JavaScript（jQuery）学習のロードマップ！どっちを先に学べば良い？
index
[open]
＼ アプリをリリースしました ／
学習ロードマップ
- 予備知識：HTML/CSS学習をある程度やる
- 基礎知識：jQueryの参考書
- 基礎知識：JavaScriptの参考書
- 応用技術：学んだ知識をもとにプログラムを自作
HTML/CSS学習を終えてオリジナルサイトを作成していた時期にそろそろもっと動きのあるWebサイトが作りたいなとなりjavascriptを学ぶことを決意しました。
最初はjavascriptのjaの字も知らずjQueryとの違いすらわかりませんでしたが、現在学習して少しずつ実践で使えるプログラムが描けるようになってきました。
学習を始めたのはHTML/CSS学習から160時間くらい経ったころでした。
JavaScriptとは
JavaScriptとはWebサイトに動きを出すためのプログラミング言語です。スライドショーやマウスホバー時やスクロール時の変化など、静的になりがちなWebページにアクションを起こすことができます。
JavaScriptにはさまざまなライブラリがありますNode.jsやReact.js一応Bootstrapもなどもライブラリの1つです。ライブラリは難しくて奥が深いJavaScriptを機能に応じてできるだけ簡単に記述できるようにしてあるコード集です。
そのコードを読み込むことでライブラリに組み込まれている関数などを使用することができるのです。
jQueryとは
jQueryもJavaScriptのライブラリの1つです。
Webサイトの動きに特化したようなライブラリでjQueryの方がわかりやすく直感的にコードを書くことができる気がします。
学習難易度もそんなに高くなく、お決まりのパターンが多いのでサクッと覚えられると思います。
JavaScriptとjQueryはどっちから学ぶべき？
JavaScriptのライブラリであるjQueryですが内容は全くと言っていいほどの別物です。互換性はあるといえばありますが、学習するなら完全に別々にやった方が良いです。
結論：どちらを先にやっても問題ない
全くの別物であるため正直どっちからやっても同じです。実際にわたしはjQueryから学習を始め、ある程度理解してからJavaScriptの学習を始めました。
特に悩んだ点や苦しんだ点はなかったので好きな方から始めたら良いと思います。
私の学習フローとおすすめの参考書
ということで私は「jQuery」の学習から始めていきました。 学習手段は『参考書』です。
プログラミング学習サイトも頭をよぎりましたが学習本のがわたしには合っていると感じました。
ちなみに無駄にしたくないので買う時はいくつもの参考書の口コミを調べまくり、納得したものを購入します。
今回は私が悩みに悩んで購入したおすすめの参考書も紹介しておきます。
jQuery最高の教科書
jQueryの知識がゼロに等しかった私が最初に始めたのは「jQuery最高の教科書」という参考書での学習でした。
この本の内容はJavaScriptのことはほとんどなくjQueryに特化した学習本です。私もJavaScriptの知識もゼロの状態でこの本を読みましたがつまづくこともなくすんなり進むことができました。
この本は参考のプログラムを自分で手を動かしながら作っていくスタイルです。
jQueryのことが細かく書いてあり、使用方法や記法、できるプログラムを解説しながら一つ一つ作っていく感じです。
この本で学習しているときはあまり調べごとをせず欲しい知識は本からほとんど手に入れられたと思います。なので初めてでjQueryを1から学習したい人におすすめの本でした。
良かったところ
- jQueryの記法を丁寧に教えてくれる
- 難易度がページを捲るごとにゆっくり上がっていく
- 作成するプログラムが汎用性の高いものばかり
おすすめできない人
- 中級者である程度のプログラムを自作できる人
- スライドショーが作れるレベルなら買ってもいまいちかも?
私が学習したところ
- jQuery最高の教科書(1周)
- 学習時間：57時間
- 学べたスキル：jQueryの記法、jQueryで作成できる機能（スライドショーや画像ホバー時の動き）
jQueryのことは大体理解できたのでここで学習は一旦ストップしました。
JavaScript本格入門
jQueryをある程度学習終えてからJavaScriptの基礎を学ぼうと「JavaScript本格入門」を購入しました。
これは手を動かしながら学ぶ参考書というよりは、リファレンス（参照文献）として使える本になります。
分かりやすくというよりも基礎と意味の理解を重視して解説されていると感じました。
1つ1つの挙動の説明や関数の使い方、HTML（DOM）の操作方法なども詳しく書いてあります。
この本を使って学習というよりは何かわからないところがあった時にこの本で調べる感じに使える本という感じでした。
良かったところ
- リファレンスとして使える（よく読み返す）
- 説明が事細かで根本から理解できる
合わなかったところ
- 読んでて面白い感じではない
- 作りながら学びたい人向けではない
私が学習したところ
- JavaScript本格入門(1周)
- 学習時間：15時間
- 学べたスキル：javascriptの基礎知識、色々なメソッドやプロパティの挙動、javascriptがどのような言語でどのようなことができるか
この本を使っての学習という面で見ると15時間程度である程度の挙動や意味を理解できた気がします。
それでも暗記できているわけではないし、暗記するものでもないのであとは実際に使ってこんなことできたなとかこんな関数だったなとできたので私は満足できました。
オリジナルでプログラムを作る
2冊の参考書で学んだ後は自分の力試しに自作でプログラムを作成しました
といってもわからないところはカンニングしながらやり方を覚えていきました。 もともと参考書でも作ったプログラムもあったので思い出しながら作成しました。
作成したプログラム
- スライドショー
- モーダル
- 自動目次生成機能
- カレントインデックス
- スクロールでワンテンポ遅らせて表示
「jQuery最高の教科書」でも作成したスライドショーや完全自作でモーダル機能(画像をクリックで拡大表示)、目次機能などを作成しました！
例えばこの記事の目次部分やPCで見ると出てくるサイドバーのカレントインデックス(読んでる記事の見出しごとに色を変化+目次機能)などを作成しました。
- 総学習時間：80時間
- 学べたスキル：jQueryの基礎、javascriptの基礎、ある程度のプログラムの仕組み
参考書2冊とこれだけの時間をかければwebサイトに組み込むレベルならある程度はかけるようになりました。
ですがjavascriptは奥が深すぎますね...笑まだまだ全然初心者レベルのままな気がします。
とはいえこの学習の流れは個人的には良かったと思っていますのでぜひ参考にしてみてください！
学習ロードマップ〜まとめ〜
- jQuery最高の教科書でjQueryの基礎と使い方、作れるプログラムを学ぶ
- JavaScript本格入門でjavascriptの基礎と記法、できることを学ぶ
- 実際にプログラムを自作して、よく使うコードやプログラムの仕組みを覚える
- 必要になった時にリファレンスやネットをみながら学びながら作成
ご覧いただきありがとうございました！
