質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

9回答

4019閲覧

jQueryのコードをJavaScriptに直したい

WeilSpinor

総合スコア170

jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

0クリップ

投稿2019/03/14 01:02

プログラミング初心者です。
jQuery mobileで書かれたコードをJavaScriptのみを使って書きたいと思っています。

経緯

MonacaでBackend Memoというメモ帳のサンプルアプリがあり、そのプログラムを読んでJavaScriptとアプリ開発の勉強をしようと思いました。
Backend Memoの仕様やソースコードの説明が以下のサイトページで書かれています。
Backend Memo
UIは、jQuery mobileを使って書かれています。

しかし、JavaScriptやアプリ開発の質問をする中で、色々な人に指摘されたことがあります。
それは、

「初心者がJavaScriptもちゃんと書けないうちに、jQueryとかのライブラリに手を出すのは、いろいろすっ飛ばしていて、間違っている。まずは生のJavaScriptの書き方や概念を覚えるべきだ」

というものです。
確かに、それはそうかもしれません。
しかし、勉強をするためにいろいろなソースコードを見て真似したりするわけですが、
実際に実用的なものを作るうえでは、むしろ、ライブラリを使わないことの方が少ないわけで、
JavaScriptならば、大概はjQueryを使っており、
JavaScriptのみで書かれたソースコード=勉強教材を用意する(見つけ出す)のは困難なんです。

なので、あくまで生のJavaScriptを勉強する、という名目のもと、

拾ってきたjQueryを含むJavaScriptコードを、生のJavaScriptのみで書き直す

という方法をとろうかと思っています。
しかし、何ぶん初心者ゆえ、

何をどう直せばよいか、どうアプローチをとればいいのか、まるまるまるっきり分からない、

ため、直し方を教えて頂きたく思い、質問しました。

人によっては、**「やってほしいことを丸投げにした質問」**と判断し、批判されると思いますが、
どうか、そこはご理解頂いた上でご回答いただけると幸いです。

該当のソースコード

具体的に知りたいのは、以下のコードからjQuery mobileの記述を生のJavaScriptに直す方法です。
$とか♯とか、ちょっとした書き方の作法の違いレベルなら判るのですが、
書き方に大幅な違いが出てくるものは、自分で処理しきれる自信がありません。
ですから、もう初めから教えて頂きたく思います。

全てでも一部でも構いませんし、考え方、アプローチのしかたを教えて頂くのでも構いません。
ご回答宜しくお願い致します。

メモの追加

追加ページ上で Save ボタンを押したときに、onSaveBtn() を呼び出します。次に、ページ上で入力された title と content の値を、 addMemo() 関数に渡します。
この関数では、 monaca.cloud.Collection().insert() ( Monaca バックエンド API ) を使用して、 Memo コレクションに、コレクションアイテムを挿入します。

javascript

1function onSaveBtn() 2{ 3 var title = $("#title").val(); 4 var content = $("#content").val(); 5 if (title != '') 6 { 7 addMemo(title,content); 8 } 9} 10 11function addMemo(title,content) { 12 var memo = MC.Collection("Memo"); 13 14 memo.insert({ title: title, content: content}) 15 .done(function(insertedItem) 16 { 17 console.log('Insert is success!'); 18 $("#title").val(""); 19 $("#content").val(""); 20 //display a dialog stating that the inserting is success 21 $( "#okDialog_add" ).popup("open", {positionTo: "origin"}).click(function(event) 22 { 23 event.stopPropagation(); 24 event.preventDefault(); 25 getMemoList(); 26 $.mobile.changePage('#ListPage'); 27 }); 28 }) 29 .fail(function(err){ console.log('Insert failed!');})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoorwm

2019/03/14 01:10

すでに、その考え自体が色々すっ飛ばして間違えていると思います。 素のJavaScriptを学ぼうというのなら、ひとまずjQueryの事を忘れて学ぶべきだし、あえてjQueryを絡めるのならば、jQueryのソースを読めばいいだけでしょう。
WeilSpinor

2019/03/14 01:18

ご回答ありがとうございます。 「初心者だからといって、無理に生のJavaScriptにこだわる必要はない」 ということでしょうか? jQuery抜きで学びたいのは山々ですが、 アプリ的なものでjQuery抜きの教材=ソースコード、というものが、そもそも世の中にはあまりないみたいなんです。
Lhankor_Mhy

2019/03/14 02:22

JavaScript の教材として Monaca を選択している時点で、すでに大きく間違っていると思いますね。
m.ts10806

2019/03/14 02:27

モバイルほぼ前提だからフレームワーク前提ですよね。
WeilSpinor

2019/03/14 05:25

MonacaはJavaScriptでアプリを作るものですから、むしろ選択肢としてピッタリだと思うのですが…? もちろんjQueryは出てきますが。
maisumakun

2019/03/14 06:07

「いきなりMonacaに取り掛かるのは、レベルが高すぎる」という意味合いかと思います>大きく間違っている
Lhankor_Mhy

2019/03/14 06:15

うーん、普通に react とかで PWA 書けばいいじゃん?ってなるんですよねえ…… teratailで質問するにしても、開発環境持ってる人じゃないと答えられないとか、ドキュメントが少ないとか、教材とするには不利な点が多いように思えます。 勉強目的なら、ヴァニラでミニマムなものから作っていった方がいいと思いますけど……
Lhankor_Mhy

2019/03/14 06:24

ある程度、コードが書ける人が「バックエンドに手間をかけずにネイティブアプリのガワをかぶったSPAを作りたい」というなら、Monaca はいい選択なのかもしれませんが、「JavaScript の勉強をしたい」って人には向いていないと思うなあ……
WeilSpinor

2019/03/14 08:32 編集

>「バックエンドに手間をかけずにネイティブアプリのガワをかぶったSPAを作りたい」 まさにそのつもりです。 スマホアプリ作りとJavaScriptを両方とも学びたくて、それなら、 「JavaScriptでスマホアプリを作る」 ことで、同時に達成可能ではないか、という発想です。 プログラミングの勉強として一番良い方法は、 「何かを自分で考えてを作る、という実践の中で覚える」 ことだそうです。これは、 「自分で作戦を組み立てることで考える力がつく」 「自分で問題点を見つけて、調べることで、記憶に残りやすい学習ができる」 「作りたいものができて達成感を感じ、モチベーションの維持に繋がる」 ということを同時に満たすことができ、この上ない能動学習になっているからです。 そのやり方として、 「非常に簡易なスマホアプリをたくさん作る」 という学習が最適なのではないか、と考え、やってみました。 しかし、スマホアプリ開発にJavaScriptを使うのは王道ではないらしく、それを実現するほとんど唯一と言ってよい方法が、 「Monacaを使う」 ということだったんです。 MonacaはJavaScript初心者、スマホアプリ開発初心者が「面倒な環境構築がない」ので「挫折することなく」「効率よく」スマホアプリ開発を学べるため、適している、 ということは、以下の記事も主張しています。 https://www.sejuku.net/blog/8600
maisumakun

2019/03/14 08:32

> スマホアプリ作りとJavaScriptを両方とも学びたくて、それなら、 「JavaScriptでスマホアプリを作る」 ことで、同時に達成可能ではないか、という発想です。 意気込みはいいのですが、一気にやるには荷が重すぎるのではないかと思います。まずはHTML+JavaScriptぐらいから始めるほうがいいでしょう。
Lhankor_Mhy

2019/03/14 08:54

そうですか。それならばよろしいのでは。 まあ、多少の不利は熱意でカバーする、ということなんでしょうから、がんばってください。
m.ts10806

2019/03/14 11:03

あまり侍エンジニアを根拠にしてもらいたくないなあ…。営業妨害するつもりはないですが、色々あったし…。
guest

回答9

0

「初心者がJavaScriptもちゃんと書けないうちに、jQueryとかのライブラリに手を出すのは、いろいろすっ飛ばしていて、間違っている。まずは生のJavaScriptの書き方や概念を覚えるべきだ」

これって、「とか」じゃなくてダイレクトにjQueryと、jquery.fnを取り巻くエコシステムの事を指してるんでしょ?
同じライブラリでもLodashはプログラミングのセンスがよくなる魔法のライブラリだから積極的に使っていくべきだし、他にもそういった類の利用者のスキルを引き上げるツールというものは多くある。

jQueryのエコシステムは確かに便利で、
知識が無くてもコピペでそれらしいのが作れちゃうから、
何か課題が出てきてもぐーぐるでjQueryライブラリを漫然と検索するだけ、
誰かの作ったjquery.fnのライブラリが無いと何も出来ず、そこから進めないコピペプログラマ止まりになっちゃうからネイティブJSを学習しろというのはわかる。

でも私個人としては別にネイティブJSがマストだとは思わない。
必要だと感じてから必要な分だけ学べばいい。
必要でないものを学ぼうとするとモチベーションがもたずに続かない。

「全てのエンジニアはC言語からやるべきだ」という似たような主張もあるけど、
それも下記のような反対意見がある。

「もう誰もが手動でメモリ管理しなければならない時代は終わった。
どうしてもPCの限界ギリギリのパフォーマンスを出さなきゃいけないケースに遭遇し、
必要だったり興味がある人間だけが学べばいい」


別にネイティブのJSをしっかり学習しようと言うのは殊勝な心がけだねと思うけど、
jQuery→JSへのダウングレードの仕方がわからん助けてはホンマこいつは…

JSの文法やDOM APIに書かれた本を買ってきて勉強するべき。
その最終試験としてjQueryでぱぱっとやってる事をjQueryのソースコードをカンニングしたり、
ドキュメントを見ながら動作をエミュレートして同じモノを作り上げるという行為は勉強になる。

でもそこの部分だけをダイレクトに人に聞いて何の勉強になるの?
何も意味ないから、今回の勉強やめたら?
本当にJavaScriptのコアなスキルが必要になってから、必要なだけ勉強した方がよっぽど為になるし有用だと思うよ。

投稿2019/03/14 03:33

編集2019/03/14 03:52
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WeilSpinor

2019/03/14 05:56

ご回答ありがとうございます。 >でも私個人としては別にネイティブJSがマストだとは思わない。 必要だと感じてから必要な分だけ学べばいい。 必要でないものを学ぼうとするとモチベーションがもたずに続かない。 そうですよね! 「常識的にはjQueryを使うような部分はjQueryで覚える」という感じで織り交ぜながら覚えるべきですよね。 ついでよろしければ、その加減についてお聞きしたいのです。 『3ステップJavascript入門』というJavaScriptの入門書(ベストセラーで何度も版を重ねているので、まともなはず)をやったのですが、 その本では、DOM操作については、document.writeやgetElementByIdなど基本的なものは紹介していましたが、 querySelectorとかeventListenerといった中級者以上向け(?)のものは載っていませんでした。 むしろそれよりもjQueryの存在を教えていました。 私がquerySelectorやeventListenerを初めて見たのは、確か何かjQueryで書かれた簡単なプログラムを見ていて、意味が分からず検索したときに出てきたサイトで、 「これはネイティヴではこうやって書くんです」とレクチャーしていた、という感じです。 ベストセラー入門書でquerySelectorやeventListenerに全く触れてすらいないということは、 「初心者にとってそこまで重要ではない」と判断して、 それらを知らなくても、jQueryをやっても良いでしょうか?(むしろ、逆輸入的にネイティヴを覚える感じ?)
miyabi-sun

2019/03/14 06:20

> querySelectorとかeventListenerといった中級者以上向け(?)のものは載っていませんでした。 この辺は単純に登場が遅かっただけでしょう。 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener querySelectorはIE8、addEventListenerはIE9からの対応です。 IE6が現役として残り続けた時代もあり、IEの為にif文で分岐して同じ機能を持つ別名のメソッドを使うということは日常茶飯事でした。 jQueryはクロスブラウザ対応として生まれた側面が強かったので、 当時登場した書籍がjQueryに行けと誘導するのは当然といえるでしょう。 今日ではIEの必須対応が11と大幅にバージョンアップし、 クロスブラウザを行う必要がかなり薄れました。 猫も杓子もjQueryということはなくなりましたが、メソッド名が簡素で書きやすいというメリットは建材なので未だ使われるライブラリではあります。 そういった事情を鑑みて、jQueryへの誘導を促すという大筋を変えないまま、少しずつ駄目な箇所を改訂したんだろうなと推測します(読んでないので察してるだけですが) ですが、将来に渡ってjQueryが使われ続けるかに関しては微妙です。 ReactやVue.js等のJSフレームワークの思想とマニュアルでDOM操作を行うjQueryは思想が反発します。 なのでネイティブのJSは最終的に覚えた方が良いですし、jQueryの勉強を深掘りするよりはVue.jsを覚えたほうが良いかと思います。
WeilSpinor

2019/03/14 06:35

ご返信ありがとうございます。 なんだか、 ライブラリーなんてものが存在するからいけないんじゃないか?、 と思いました。 似たような機能のモジュールをもった違うライブラリがいくつもあり、 しかも、あるケースでは〇〇というライブラリを使い、ある人は××というライブラリを使っている、 と、どれを使うか統一されていないので、 JavaScript初学者としては、 「何を、何から、どう勉強すればいいのか分からない」 状況に陥ります。 「ライブラリーのせいでややこしくなっているなら、いっそライブラリなどに手を出さず、ネイティヴJavaScriptを深めればよいのではないか」 と思いますが、 「実用的なプログラムとなると、 結局、ライブラリを使わないいネイティヴJSのみのコードなんてほとんど存在せず、勉強が難しい」 というのがあるので、難しいところですね。 プログラミング初心者ながらにして、 「プログラミングの世界が、せっかく勉強した知識が、次から次へと塗り替えられて使い物にならなくなり、結果的に勉強し続けなければならない」 という定説の意味がわかった気がします。
WeilSpinor

2019/03/14 06:40

「JavaScriptはプログラミング初心者に最適の言語」 ということで始めたのですが、 むしろこういうライブラリとかフレームワークが多すぎたり、勉強の幅が広すぎたりするせいで、 「到達点がわからない」 という点で、むしろC言語とかの方が良かったんじゃないかと思いました。(どちらかというと、Webよりmバックエンドプログラムの方が興味があるので…) でも、とりあえず今考えている簡単なアプリなどを作れるようになるまでは、JavaScriptはjQueryも織り交ぜて覚えていこうと思います。 ご回答ありがとうございました。
miyabi-sun

2019/03/14 06:46

沢山覚える必要があるというのはその通りですが、 この辺は歴史なんで知っている事が増えれば増える程次の学習が楽になります。 弥生時代に歴史が動いたのも、縄文時代の狩猟生活が過酷でゴロゴロ人が死んでたから、 畑耕して水でも撒けば食べて行けるように文化を前進させただけの話ですよね。 それと同じことです。 その視点で見ていくとライブラリなんて「当時の技術で実現するには辛いから望まれて作られた」ものに決まってます。 何をする為に登場したのかや、その技術では何が辛いから次のライブラリにとって変わられたのかという背景を知れば次のライブラリが登場してもすんなり触れるようになります。 こういう風に知っていることは力なので、覚える事が多くて辛い!というよりは、 「便利な世の中になったねぇ」という視点で触ってみる事をオススメします。
guest

0

実際に実用的なものを作るうえでは、むしろ、ライブラリを使わないことの方が少ないわけで

これには同意です。
だからってjQueryというJavaScriptのライブラリを利用して作られたフレームワークであるjQuery Mobileで書かれたコードを書き直すのは無理がありますし、幾ら時間があっても足りません。
昔扱ったことがありますがCSSも大量にありますよね。

大事なのはjQueryも含めたJavaScriptなどで、きちんとしたWebサイトを構築することであって、リプレイスではないはずです。
本来は一度きちんと構築が終わったものに対してリファクタリングなり、どうしても速度を求めたいときに検討するような段階で考えることですので、既存のソースの書き換えにいきなり取り組むのではなく、もっと簡単なところから、ミニマムコードで検証されてはどうでしょうか?

「脱jQuery」で検索するとどのような取り組みをすれば良いのか見えることもあると思いますし、ミニマムコードを試しながら理解や学習を進めることもできると思います。

※速度改善を求めるための移行としても他にも先にやるべきことやできることがあるので、脱jQueryは中々筆頭にはなりません。

学習であればなおさら既存コードに取り組むのは余計わけわからなくなるだけなので、例えばgetElement系のところとか、イベントのところとか、もっと簡単な、小さな機能から進めていくべきかと思います。

投稿2019/03/14 01:14

編集2019/03/14 01:15
m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

「初心者がJavaScriptもちゃんと書けないうちに、jQueryとかのライブラリに手を出すのは、いろいろすっ飛ばしていて、間違っている。まずは生のJavaScriptの書き方や概念を覚えるべきだ」

ここでいう「生のJavaScript」は、DOM操作すら行わない、純粋にプログラミング言語としてのJavaScriptを意味している、と自分は解釈しました。まずは数値計算とか条件分岐とか、プログラミング言語としてのJavaScriptを先にマスターしたほうがいい、というのには同意します。

ただ、いまはだいぶましになりましたが、jQueryを使わずにDOM操作を行うのは、それはそれで1レベル高い話となります。「DOM操作にjQueryから入る」というのは、(VDOM系など、相容れづらい環境と組み合わせるようなシチュエーションでなければ)そう悪いことではありません。

投稿2019/03/14 01:19

maisumakun

総合スコア145184

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WeilSpinor

2019/03/14 06:03

ご回答ありがとうございます。 そうですか。では、気兼ねなくjQueryをバリバリ使っていこうと思います。
guest

0

jQuery を使うにしても、JavaScript もろくに書けない状態で書くと、単なるググる→コピペにしかならないから、まずは JavaScript の基礎をしっかりとやれ、という趣旨であれば断然同意します。

が、それを jQuery を使うな、という主張と結びつけてはいけません。

むろん jQuery を使わずに、jQuery と同じようなことはできるのですが(ライブラリとはそういう使いやすい部品なのですから)、そのために必要な労力は、果たして見合うだけの価値があるのでしょうか?
いってみれば模型をフルスクラッチで作れ、ガンプラなんぞ模型じゃない、ってレベルの話ですからね。

車輪の再発明なんてしなくて済むならしなきゃいいのです。

投稿2019/03/14 07:15

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

見た感じライブラリを使う前提になっておりその制御の部分なので
中途半端にjs化する意味はあまりないでしょうね。

一応簡単に、たとえば

javascript

1 var title = $("#title").val();

の記述はこう書けますが

javascript

1 var title = document.querySelector("#title").value;

id=titleの要素がない場合valueを参照したり
当該要素にvalueプロパティ(もしくは属性)がない場合エラーになるので

javascript

1 var ele = document.querySelector("#title"); 2 var title=(ele===null || typeof ele.value==="undefined")?null:ele.value ; 3 console.log(title);

などの受け方をしたほうがベターです

投稿2019/03/14 01:26

yambejp

総合スコア114839

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WeilSpinor

2019/03/14 05:58

ご回答ありがとうございます。 ついでにお聞きしたいのですが、 『3ステップJavascript入門』というJavaScriptの入門書(ベストセラーで何度も版を重ねているので、まともなはず)をやったのですが、 その本では、DOM操作については、document.writeやgetElementByIdなど基本的なものは紹介していましたが、 querySelectorとかeventListenerといった中級者以上向け(?)のものは載っていませんでした。 むしろそれよりもjQueryの存在を教えていました。 私がquerySelectorやeventListenerを初めて見たのは、確か何かjQueryで書かれた簡単なプログラムを見ていて、意味が分からず検索したときに出てきたサイトで、 「これはネイティヴではこうやって書くんです」とレクチャーしていた、という感じです。 ベストセラー入門書でquerySelectorやeventListenerに全く触れてすらいないということは、 「初心者にとってそこまで重要ではない」と判断して、 それらを知らなくても、jQueryをやっても良いでしょうか?(むしろ、逆輸入的にネイティヴを覚える感じ?)
yambejp

2019/03/14 06:13

実はわたしjQueryだいっきらいで、人には勧めていないんですが jsでなんステップも踏まなくてはならない処理を jQueryでは1行で実現できたりするので、しかたなく覚えました 「ライブラリはある程度なれてから」という諸先輩の忠告は むしろ逆で、初心者こそライブラリを積極的に使い、並行して 早い段階でjsの基礎を学習スべきだと思っています。 とくにこの掲示板でも「直接答えを教えちゃうのは邪道」という 考え方を持つ人も多いですが、結果のすぐ見えない学習は 初心者にはまったく面白くなく挫折してしまうことも多いので 私はなるべく動くサンプルをお見せして、必要があれば解説するという スタンスを取っています。
miyabi_takatsuk

2019/03/14 11:36

横槍失礼します。 > とくにこの掲示板でも「直接答えを教えちゃうのは邪道」という > 考え方を持つ人も多いですが、結果のすぐ見えない学習は > 初心者にはまったく面白くなく挫折してしまうことも多いので > 私はなるべく動くサンプルをお見せして、必要があれば解説するという > スタンスを取っています。 すごく同意です。
guest

0

jqueryならまだしもjquery mobileを!?

無理無理、javascriptの学習第一歩でハードル高すぎ
jquery mobileはライブラリっていうよりフレームワークだよ

投稿2019/03/14 01:18

KazuhiroHatano

総合スコア7804

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WeilSpinor

2019/03/14 05:32

でも、問答無用で出てくるんです…。なぜダメなんですか?
KazuhiroHatano

2019/03/14 06:07

素のjavascriptの学習をまずしようというのはいいけど 素のjavascriptの学習のためにjquery mobileのコードを 素のjavascriptにして学習しようというアプローチがまずい ハードル高すぎです もうちょっと初心者向けのハードルを 多分WEBでの素のjavascriptの学習は とりあえず無限スクロールのページが 作れるとこまでいけば十分と思います
guest

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/03/14 01:19

こういったコードスニペットでjQueryを置換していくことは、ブラックボックスをブラックボックスで置き換えているにすぎず、個人的には、得られる学習効果は小さいように感じられます。
guest

0

ベストアンサー

はじめに、かなり個人的な意見入ってるかもです。

しかし、JavaScriptやアプリ開発の質問をする中で、色々な人に指摘されたことがあります。

それは、

「初心者がJavaScriptもちゃんと書けないうちに、jQueryとかのライブラリに手を出すのは、いろいろすっ飛ばしていて、間違っている。まずは生のJavaScriptの書き方や概念を覚えるべきだ」

というものです。

確かに、それはそうかもしれません。
しかし、勉強をするためにいろいろなソースコードを見て真似したりするわけですが、
実際に実用的なものを作るうえでは、むしろ、ライブラリを使わないことの方が少ないわけで、
JavaScriptならば、大概はjQueryを使っており、
JavaScriptのみで書かれたソースコード=勉強教材を用意する(見つけ出す)のは困難なんです。

この意見言った人のことよくわからんですね。
他の回答者さんがおっしゃる通り、変数の概念や、計算、表示とか、そういった基本ができてないってならわかりますが、
そこらへんは理解されているんですよね?
かくいう僕自身、jQueryからJavaScript入って、今は、
OSスクリプトや、JSXなども使えるようになった身なので、
最初のうちは、jQuery通して触れるの全然ありだと思いますけどね。

だいたい、jQueryの時点で、変数の概念や、条件式やら繰り返しやらの扱い、やりますし。
(というかそれらプログラムの基礎的概念使わないと、jQuery使っても大したことできない)

具体的に知りたいのは、以下のコードからjQuery mobileの記述を生のJavaScriptに直す方法です。

KazuhiroHatanoさんのおっしゃる通りです。
そんなのやめましょう、絶対無駄です。

勉強にはなるかもしれませんが、ただただ時間浪費するだけですよ。
それより、jQueryから入ったなら、自分でオリジナルのライトボックス系プラグインを作ってみるとか、そっちの方がはるかにいい勉強になりますよ。
JavaScriptの基礎的概念とかも同時に学べるかと思います。
(そうしないと機能的プラグインは作れない)

一回、jQuery解析しようと挑戦したことありますが、
それも、「いいや、ライブラリとして使うんだから、この解析超無駄」と止めましました。

人様が作ったものをわざわざ、バニラに直すって、
別言語に置き換えるならまだしも(Perl → PHPとか)、同じ言語同士でそれやるって、結局同じ言語なんだから、無駄じゃないですかね。
ふじりんご(赤)に色塗って、シナノゴールド(黄)に変えようとしてるようなものじゃないでしょうか。(色塗っても結果ふじりんごのままですよね)
遊戯王でいうなら、せっかく二体リリースしてアドバンス召喚したのに、それを二体のバニラモンスターに戻すってことです。(遊戯王はそっちのほうが戦略的にいい場合ありますが 笑)
と個人的には思います。

投稿2019/03/14 11:23

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

WeilSpinor

2019/03/14 12:38

ご回答ありがとうございます。 そうですか。良かったです。 仰るレベルの基本概念は、ほぼ全て把握仕切っていると思います。 変数、データ型、繰り返し、配列、多次元配列、構造体、メモリ、アドレス、ポインタ、関数、オブジェクト、インスタンス、コンパイル、document.write、DOM、getElementById… 書き方は完璧には覚えてないし、イディオム的使い方はそんなに知りませんが、基本レベルの概念は十分すぎるほど理解していると思います。 >遊戯王でいうなら、せっかく二体リリースしてアドバンス召喚したのに、それを二体のバニラモンスターに戻すってことです。 神のカードを生贄に捧げ、青眼の白龍を召喚するようなもの、ということですね。 それでは、洗脳が解けたところで、これから心置き無くjQueryを使い倒してやろうと思います。
miyabi_takatsuk

2019/03/14 12:54

そこまで把握されてるなら、もしや、他の言語学ばれてるのでは? 笑 そこまで理解されてるなら、jQuery Mobileをネイティブに戻すなんてことさらさらやる必要ないでしょう。 むしろ、質問者さんに意見を言った方より、質問者さんの方が理解されてる可能性すら感じます。 そうそう、オベリスクをわざわざリリースして、ブルーアイズ召喚したって感じ。いいですね 笑 確か社長やってましたが 笑 どうか頑張ってください。
WeilSpinor

2019/03/14 13:27

>そこまで把握されてるなら、もしや、他の言語学ばれてるのでは? 笑 数年前に、遊びでC言語入門書を読みましたが、サンプルコードをコマンドプロンプトで実行したりした程度です。 充分理解しているといっても、やはり入門書に書いてあるレベルの理解のことで、 たとえばDOMの『リファレンス(?)』と呼ばれる専門用語炸裂で書かれたコマンドの使い方辞典みたいなものを読んでも、なんだか分かりません。 とりあえず、もうちょっとプログラミングの基本用語などを覚えたりもしながら、少しずつ勉強していこうと思います。 ご声援ありがとうございます。
raccy

2019/03/15 15:13

いやいやちょっと待ってください。jQueryは所詮ブルーアイズのようなただの激レアカードですよ。ラー(React.js)やオベリスク(Angular)、オシリス(Vue.js)といった神のカードには一段劣りますよ。あの世界のカードと一緒でJSも強さのインフレが激しいのですよ。いつまでもブルーアイズ(jQuery)にこだわると社長みたいになってしまいますよ。バニラはむしろ遊戯みたいにクリボーのようなショボいカードで頑張るって事ですよ。でも、いつも最後に勝っているのはなぜか遊戯…というところにバニラの強さの秘密があると言うことですよ!
miyabi_takatsuk

2019/03/17 03:27

> reccyさん w 遊戯王と、バニラJSの併せ技、大変にありがとうございます! 僕もそう思います。遊戯王の方も含めて w バニラJSを学んでおくこと自体はかなり有意義ですよね。 自然と、Node.jsや、JSXや、はたまた、Gulpなども扱えるようになり、広がりますし、大規模開発の場合は特に、ライブラリ使うより、パフォーマンスよくもなりますしね。 ES6からは、jQueryとさほど変わらないくらいDOMも扱いやすくなってますし。 ご意見、補足、大変にありがとうございます!
guest

0

まずはこれをやってみては?
MDN JavaScript の第一歩
https://developer.mozilla.org/ja/docs/Learn/JavaScript

投稿2019/03/14 04:52

shuzi

総合スコア197

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問