jQueryを上達させる方法

Question

未経験からエンジニアになって１年経ちますが本当にjQueryが苦手です。
本や勉強サイトなどを使っても上達しているように感じません。
仕事の先輩はまず他のサイトを見るのが一番いいと言いますが、見てもさっぱりで何からやっていいのかがわからなくて止まってしまいます。
皆さんの勉強方法が知りたいです。

Answer 1

カッコいい事をやっている他人のサイトを見る、これに尽きると思います。

勉強方法が思いつかないのは「私もこんな事がやりたい」といったモチベーションが無いからかと思います。まずは人のサイトを見て「かっこいい」と思ったら、Google Chrome の開発者ツール等を使ってどの部分で jQuery を使っているのかを見て、盗むのが良いと思います。

Answer 2

言語に限らずですが。

自分の実力を知ること

いま何が出来ていて何が出来ないのか、
自身の実像を知ることです。
理想と現実がかけ離れていることはよくあることですが、
かけ離れているところを如何に等身大の自身のイメージに近づけるか、
そうすることで成長の糸口が見えてきます。
いま、自分は何をすべきなのか、ですね。

jQueryとのことですが、言語としてはjavascriptです。
まずは自身がjavascriptをどこまで理解しているかというのを見つめなおしてみてはどうでしょうか。

テーマを決めて作ってみること

例えば「あったら便利だなぁ」と思う機能を作ってみること。
最初はコピペ部品寄せ集めで取り込んで作ったものでも構いません。
要は「思ったとおりのものを再現する」ことが出来ればそれでいいんです。
それだけでも「組む力」というのは身につきます。
細かい書き方まで覚えなくてもいいと思います。
「どうすれば出来上がる」想像して創造することが出来れば1段階も2段階もステージアップできます。
コピペであろうと何であろうと必要な部品をすばやく集められることも必要であり必須のスキルです。
その後に効率的なコードの書き方や自分なりの組み方を確立していけばいいですね。

また、例えば、マネすることです。
「あ、これいいな」と見つけたものや良いと思ったサイトの機能を
自分なりに「どういう作りになっているだろうか」というのを想像して作り上げる。
同じものが出来上がれば自分なりに機能を追加してみる。
これも「どうすれば出来上がる」と想像する力を養います。
既存のものを再現するので正解が見えますしね。
上手く再現できなかった場合にどうやったら乗り越えられるかを考えるだけでも成長につながります。

場数を踏むこと

どんなに本を読んでもサンプルコードを動かしてちょいカスタマイズしてきたからと言って、
場数を踏むことに勝るものはありません。

スポーツでも同じ。
練習でどんなに目を見張るプレイが出来ていても実際の試合で同じことが再現できるか？
やはり実戦を何回もこなしてことそ身につく自信は、実戦でしか得られません。

どんな形でもいいので色んなプロジェクトに参画して多くを吸収していきましょう。

以上です。
がんばってください。

Answer 3

まずはリファレンスの日本語サイトをみてざっとどういう機能があるか確認しておくことです

• http://semooh.jp/jquery/
• http://js.studio-kingdom.com/jquery/

あとは必要に応じて機能を組み合わせるだけなので、他の言語とさほど違いはないかと
個人的には正直jQueryは大嫌いでずっと避けてきたのですが、
入用になりちょこちょこっと参考サイトをみて覚えました。
できればピュアなjavascriptを少し深めに勉強しておくとjQuery自体はさほど
難しい技術ではありません。

Answer 4

見るだけではなく、実際に試してみる、くらいですかね。
コードを見るだけで動きがわかるならともかく、分からないなら実践するのみです。

幸い今は仮想化技術のおかげで、手軽にテスト用の環境を作っておけるので（例えば VMWare とか Oracle VirtualBox で）。もしトラブってしまったとしても、仮想マシンなら手軽にトラブる前の状態に戻しやすいのですし。

jQuery は根底として CSS Selector 、そして Document Object Model があるので、まずそれらを理解してからの方がわかりやすいとは思いますが。

Answer 5

「本当にjQueryが苦手」とありますが、jQuery以外のjavascriptは得意なのかというと、未経験からのエンジニアということですからそうではないのではないかな、と拝察します。

jQueryは、ただのjavascriptライブラリなので、javascriptの基礎を理解していないとなかなか理解が進まないでしょう。
たとえば、jQueryの特徴であるメソッドチェーンひとつを見ても「この後にメソッドチェーンをつないでいいのかどうか」というのは、javascriptを学習して、少なくとも関数と戻り値について理解していないと判断がつかないかと思います。

というわけで、まずはjavascriptをしっかり学んでみてはいかがでしょうか。

Answer 6

jQueryのような、DOM操作のラッパー程度のライブラリはセレクタが最も重要です。
まずはきっちりセレクタを勉強しましょう。
http://www.jquerystudy.info/reference/selectors/index.html

「どの」要素に対して「何を」したいのか？
において、「何を」に関しては調べればすぐに出てきます。

例えば「①このボタン」が「②押された時」に
「③このulタグの中にある、このliタグとこのliタグだけ」を「④非表示」にしたい。

②と④は調べればすぐ出てきますが、
①と③に関してはHTMLの構造に依存するため、調べようがありません。
つまり、処理をしたい要素さえ取得できれば、あとは調べれば何とかなります。

もう１つ例を上げると、「ある要素の最も近い親のdivタグを取得したい」というのを
調べると、closestという関数に行き着きます。
obj.closest("div") とすれば取得できると分かったところで、
肝心のobjが取れないのであればお話にならないわけです。

要素の取得も取れればどんなセレクタでもいいわけではありません。
JavaScriptはとても遅い言語なので、
パフォーマンスを考慮しながら目的の要素に辿り着く必要があり、割と奥が深いですが、
まずはどんなものでも取得できるようになりましょう。

Ajaxやアニメーションになってくると、jQueryの使い方を勉強する必要がありますが、
それも調べればすぐ出てきますので、必要になった時に調べればいいです。

###追記
そういえば、JavaScriptに慣れていないと、高階関数で混乱するかもしれませんね。。。
高階関数とは、関数自体を引数にしたり、戻り値にしたりする関数です。。
この説明の時点でもう難しいですからね。。。

あとは this の存在です。
thisが今何を指しているのか？ってのはJavaScript全般で混乱します。

$("#button").on("click", function() {
  // 押された時の処理
  // この中でのthisは、#buttonの要素
});

$("ul.image-list li").each(function() {
  // この中のthisは、li要素
});

上記のような、on関数やeach関数の引数に、関数を渡すというやつですが、
これはもう、まずはこういうものだと割り切って覚えればいいんじゃないでしょうか。。。
こういうのはjQueryとか関係なく、JavaScriptの文法なので、
いずれはJavaScriptを基礎から勉強すべきだと思います。

thisも同じように、alertや、Console.logで出力して中身を確認して、
まずは深く考えなくていいと思います。

Answer 7

jQueryに限りませんが、技術が上達しないのは、その技術が真に必要とされていない環境に身を置いているからだと思います。
また、上達しているかどうか感じられないのも、その技術を活用する機会が少ない環境だからです。

その技術本当に必要なんでしょうか？

と、私ならもっと必要になりそうなことを探して、他のことを勉強します。