JavaScript(jQuery)学習のロードマップ!どっちを先に学べば良い?

index

[open]

\ アプリをリリースしました /

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

学習ロードマップ

  1. 予備知識:HTML/CSS学習をある程度やる
  2. 基礎知識:jQueryの参考書
  3. 基礎知識:JavaScriptの参考書
  4. 応用技術:学んだ知識をもとにプログラムを自作

HTML/CSS学習を終えてオリジナルサイトを作成していた時期にそろそろもっと動きのあるWebサイトが作りたいなとなりjavascriptを学ぶことを決意しました。

最初はjavascriptのjaの字も知らずjQueryとの違いすらわかりませんでしたが、現在学習して少しずつ実践で使えるプログラムが描けるようになってきました。

学習を始めたのはHTML/CSS学習から160時間くらい経ったころでした。

JavaScriptとは

JavaScriptとはWebサイトに動きを出すためのプログラミング言語です。スライドショーやマウスホバー時やスクロール時の変化など、静的になりがちなWebページにアクションを起こすことができます。

JavaScriptにはさまざまなライブラリがありますNode.jsやReact.js一応Bootstrapもなどもライブラリの1つです。ライブラリは難しくて奥が深いJavaScriptを機能に応じてできるだけ簡単に記述できるようにしてあるコード集です。

そのコードを読み込むことでライブラリに組み込まれている関数などを使用することができるのです。

jQueryとは

jQueryJavaScriptのライブラリの1つです。

Webサイトの動きに特化したようなライブラリでjQueryの方がわかりやすく直感的にコードを書くことができる気がします。

学習難易度もそんなに高くなく、お決まりのパターンが多いのでサクッと覚えられると思います。

JavaScriptとjQueryはどっちから学ぶべき?

JavaScriptのライブラリであるjQueryですが内容は全くと言っていいほどの別物です。互換性はあるといえばありますが、学習するなら完全に別々にやった方が良いです。

結論:どちらを先にやっても問題ない

全くの別物であるため正直どっちからやっても同じです。実際にわたしはjQueryから学習を始め、ある程度理解してからJavaScriptの学習を始めました。

特に悩んだ点や苦しんだ点はなかったので好きな方から始めたら良いと思います。

私の学習フローとおすすめの参考書

ということで私は「jQuery」の学習から始めていきました。 学習手段は『参考書』です。

プログラミング学習サイトも頭をよぎりましたが学習本のがわたしには合っていると感じました。

ちなみに無駄にしたくないので買う時はいくつもの参考書の口コミを調べまくり、納得したものを購入します。

今回は私が悩みに悩んで購入したおすすめの参考書も紹介しておきます。

jQuery最高の教科書

jQueryの知識がゼロに等しかった私が最初に始めたのは「jQuery最高の教科書」という参考書での学習でした。

この本の内容はJavaScriptのことはほとんどなくjQueryに特化した学習本です。私もJavaScriptの知識もゼロの状態でこの本を読みましたがつまづくこともなくすんなり進むことができました。

この本は参考のプログラムを自分で手を動かしながら作っていくスタイルです。

jQueryのことが細かく書いてあり、使用方法や記法、できるプログラムを解説しながら一つ一つ作っていく感じです。

この本で学習しているときはあまり調べごとをせず欲しい知識は本からほとんど手に入れられたと思います。なので初めてでjQueryを1から学習したい人におすすめの本でした。

良かったところ

おすすめできない人

私が学習したところ

jQueryのことは大体理解できたのでここで学習は一旦ストップしました。

JavaScript本格入門

jQueryをある程度学習終えてからJavaScriptの基礎を学ぼうと「JavaScript本格入門」を購入しました。

これは手を動かしながら学ぶ参考書というよりは、リファレンス(参照文献)として使える本になります。

分かりやすくというよりも基礎と意味の理解を重視して解説されていると感じました。

1つ1つの挙動の説明や関数の使い方、HTML(DOM)の操作方法なども詳しく書いてあります。

この本を使って学習というよりは何かわからないところがあった時にこの本で調べる感じに使える本という感じでした。

良かったところ

合わなかったところ

私が学習したところ

この本を使っての学習という面で見ると15時間程度である程度の挙動や意味を理解できた気がします。

それでも暗記できているわけではないし、暗記するものでもないのであとは実際に使ってこんなことできたなとかこんな関数だったなとできたので私は満足できました。

オリジナルでプログラムを作る

2冊の参考書で学んだ後は自分の力試しに自作でプログラムを作成しました

といってもわからないところはカンニングしながらやり方を覚えていきました。 もともと参考書でも作ったプログラムもあったので思い出しながら作成しました。

作成したプログラム

「jQuery最高の教科書」でも作成したスライドショーや完全自作でモーダル機能(画像をクリックで拡大表示)、目次機能などを作成しました!

例えばこの記事の目次部分やPCで見ると出てくるサイドバーのカレントインデックス(読んでる記事の見出しごとに色を変化+目次機能)などを作成しました。

参考書2冊とこれだけの時間をかければwebサイトに組み込むレベルならある程度はかけるようになりました。

ですがjavascriptは奥が深すぎますね...笑まだまだ全然初心者レベルのままな気がします。

とはいえこの学習の流れは個人的には良かったと思っていますのでぜひ参考にしてみてください!

学習ロードマップ〜まとめ〜

  1. jQuery最高の教科書でjQueryの基礎と使い方、作れるプログラムを学ぶ
  2. JavaScript本格入門でjavascriptの基礎と記法、できることを学ぶ
  3. 実際にプログラムを自作して、よく使うコードやプログラムの仕組みを覚える
  4. 必要になった時にリファレンスやネットをみながら学びながら作成

ご覧いただきありがとうございました!

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

フレームワーク:Laravel/Vue.js

作成の流れQiita「Laravel×Vue.jsを使って初めてWebアプリを自作しました!」

感想:初めて作成したWebアプリです!メールアドレスでの会員登録や質問投稿、回答やコメント、いいねやフォローなどSNSに近い機能を実装してみました。レビューや修正すべきポイントなどを教えていただけると嬉しいです!

New Article

index