プログラミング

【2020年】web制作のjQuery,JavaScriptの勉強方法まとめ【一年半思考錯誤した】

【2020年最新】web制作のjQuery,JavaScriptの勉強方法まとめ【一年半思考錯誤した】

こんにちは、フリーランスエンジニアのしょーごです。

2018年3月からプログラミング学習を始め、8月よりフリーランスでwebサイトを制作する仕事を行なっており、

現在はHTML、CSS(Sass)、JavaScript、WordPressをメインにお仕事をしています。

Webサイトやサービスを開発する際に必ずといって良いほど使うのがjQueryやJavaScriptなのですが、皆さんどうやって勉強されていますか?

おそらく

悩める人

これで本当に良いのかなぁ…

と疑問に思いつつ、悩みながら勉強されているのではないかと思います。

私自身もつい最近まで「効率のいいJavaScriptの勉強法」を模索していました。
特にweb制作に特化した方法というのは本当に存在しません。

ただ、最近は初心者でも実務レベルまで引き上げられる良質な参考書や学習サービスが出てきています。

今回記事を作るにあたって、高額プログラミングスクールを除く各種サービスを再度確認したのちに

もっとも学習効率が良いjQuery,JavaScript学習のロードマップを作成しましたので、

紹介させていただきます。

ここで紹介する方法をご覧いただければ、明日から学習教材を自分で吟味して選定する必要はありませんし、

JavaScript学習のコツもお伝えしますので、ぜひ最後までご覧ください。

【超お知らせ】
 新しくweb制作に特化したJS教材を出しました。下記の学習のあとにはこちらで実践がおすすめです。

あなたのJavaScript勉強の目的は?

javascript勉強の目的

効率の良い勉強方法を紹介する前に、まず

「プログラミングの勉強方法は目的によって変わってくる」

ということをお伝えしておきます。

今回紹介する方法は「web制作に特化」していますので、「web制作で使えるjQueryの取得」を最優先とし、その後web制作でもサービス開発でも活きるJavaScriptの効率の良い勉強法をお伝えしていきます。

最初からwebサービスやアプリケーションを作られたい方は、そもそもjQueryを学習する必要はないので、記事後半のJavaScriptから学習していただくのがいいかなと思います。

私も今から紹介する方法を経て最近Vue.jsの勉強を再開しましたが、以前より圧倒的に頭に入ってくるようになりましたので、

VueやReactといったいけてるフレームワークに興味のある方にも参考になるはずです。

jQueryの勉強方法

なぜ最初にjQueryかというと、web制作でほぼ毎回使うからです。

jQueryは最近オワコンなどと言われていますが、web制作の現場ではまだまだ主流ですし、jQueryの実装ノウハウはかなりネット上にあふれているので

今でも普通にプロジェクトに使われますし、使えないとだいぶ苦労すると思います。

改修案件でも動きの処理はjQueryで書かれていることが多いですし、

またプラグインを使った開発で初心者でも高度な動きをつけることが可能なので、web制作でお仕事をする場合は、最初に取得しておく価値は非常に高いです。

①progateを一周

まずは鉄板のProgateを行いましょう。

おそらくこの動画をご覧の方のほとんどは既にこなしているかもしれませんが、ProgateのjQueryで重要な部分は

「プログラミングの基礎的な考え」と「主要なメソッドの使い方」

雰囲気だけでも把握することです。

例えば、ProgateのjQuery上級編には、

  • スライド操作
  • フォーム内の入力チェック
  • ページ内のリンク移動

があります。別にこれらの実装は、実際はプラグインを使うかコピペで終わってしまうので、一から書く必要なんかありません。

それこそ「車輪の再発明」ですが、しかし「仕組みを知る」には格好の教材なんですよね。

仕組みを知らないとこのあと説明しますが、プラグインを使っても細かなカスタマイズを行うとなると、

いとも簡単に詰んで見積もり工数が余裕で3倍になったりするので、とても重要です。

progateを行う際は、実際に作る完成物よりも、「プログラミングの基礎的な考え」と「主要なメソッドの使い方」

頭に入れておくといいかと思います。

②jQuery標準デザイン講座

こちらの教材のいいところは、

  • 実際にwebサイトに頻出のUI機能を手を動かし実装していける
  • 難易度的にProgateからいくとちょうど良い

プログラミング学習教材は二種類ある

他のプログラミング教材にも言えるんですが、基本的に教材は二種類に別れていて、

  • 網羅的に仕様が書かれている教科書形式
  • 実際にものを作るハンズオン形式

教科書形式は中級者以上になって細かな仕様を調べたい際は重宝するんですが、

初心者の状態で見てしまっても本棚の肥やしになることが目に見えているので、

実際にものを作るハンズオン形式が初学者に重要ということになります。

jQuery標準デザイン講座の場合は、30個ものパーツ作成を通してがっつりjQueryの基礎を学ぶことができますし、難易度的にもモチベ高く取り組めるので、
オススメです。

また全てをこなす必要はなく、都度中身を見つつ、「有用だと思うパート」を学習していけばいいと思いますが、ここでも重要なのは

「完成物ではなく、考え方やコード」

です。

例えばこの本の30のパーツの中にも、明らかに使わなさそうなものも含まれていますが、そのパーツ作成の途中に使うメソッドなんかが重要だったりするので、

ぜひそこに着目して取り組んでいただけるといいのかなと思います。

③プラグインを使って作ってみる

ここまでjQueryを勉強してきましたが、実務だとプラグインで手軽に実装することも多いです。

そして、プラグインに関しては教材で学ぶのではなく、自分でググって実装するのが近道になります。

ちなみに私の場合は、自分のポートフォリオサイトを作りつつ、初めてjQueryのプラグインを使って、いろいろカスタマイズなどを行いました。

例えば、画像をクリックして拡大させたいなら「lity.js」スライダーなら「slick」フォームバリデーションなら「jQuery Validation Plugin」

などが挙げられます。

駆け出しさん
駆け出しさん
「せっかくjQuery勉強してもプラグインで間に合いそうじゃん!」

と思われるかもですが、

実はプラグインはバンバン使えるものでもないんですよね。

読み込めば読み込むほどサイトの表示速度が下がっていく特性がありますので、

プラグインは基本的に、「実装がめんどくさい複雑なもの限定」にするべきで、そうでないハンバーガーメニューだったりTopに戻るボタンなどの簡単なもの
は自分で書いて実装するのがセオリー

になります。

また、単純に自分が実現したい効果をクリティカルに発揮してくれるプラグインがないことも多いので、その場合は自作する必要がありますから、

いくらプラグインが便利だからといって、jQuery自体の勉強から逃げる理由には残念ながらならないんですよね。

私が出している教材でプラグインの実装を体験することができます。

ここまででjQueryの勉強を一旦終わります。

ここからはJavaScriptの勉強になります。

JavaScriptの勉強方法

なぜjQueryの次にJavaScriptを学ぶのか

javascriptの勉強方法

jQueryの次にJavaScriptを学ぶ理由は、web制作では生のJavaScriptを書くことは多くはないとはいえ、

案件や会社によっては重くなりやすいjQueryそのものの使用禁止だったり

今後はjQueryから生のJavaScriptやTypeScriptなどのAlt JS、また別のフレームワークに移っていく流れが確実にあるのと、

Web APIやライブラリの使用でJavaScriptのオブジェクトなどの知識が必要不可欠になるからです。

またJavaScript自体が現在かなり盛り上がっており、フロントだけでなくサーバーサイドでも必須の知識になってまして、

もはや「プログラマーの教養」と化していることから、今後を考えるとぜひ学習しておくことに越したことはないということになります。

①確かな力が身につくJavaScript「超」入門 第2版

私が探すのに特に苦労したのが、JavaScriptの学習書籍でした。

本当に難易度的に程よく、かつハンズオン形式の教材って全然なく、ようやく見つけたこちらの書籍が唯一といっていいほどです。

さらにこちらの教材はJavaScript最新文法のES2015に基づいているのもいいポイントです。

網羅している内容も、基礎文法を用いたDOM操作から、最後にはWebAPIやAjaxの概念も出てくるので、一番最初の取っ掛かりとしては、ベストな教材だと確信しています。

②JS-Pro

上記の書籍と同時並行で進めていただきたいのが、JS-Proというサービスになります。

https://js-pro.jp/

こちらは最近スタートしたJavaScriptとVue.jsの学習サービスなんですが、イメージ的には「JavaScriptに特化したProgate」というイメージです。

ハンズオン形式であり、教科書的でもある教材になりますが、前述の「JavaScript「超」入門」と併用していただくことで、

必要な知識が網羅的に身につきます。

現在はリリースしたばかりということで、月額500円で利用することができますが、5月31日より月額1980円になるようなので、

早めに登録して学習を進めておくといいかもですね。

とにかく教材のクオリティとわかりやすさがピカイチなので、全員におすすめしたいです。

③ドットインストール

さあここでドットインストールが入ってきます。

なぜこのタイミング?と思われるかもですが、

実はドットインストールにはハンズオンで実際にwebアプリを作るコースが大量に存在するんですよね。

まあ大量といっても7個だったと思います。

  1. おみくじ
  2. ストップウォッチ
  3. タイピングゲーム
  4. 三択クイズ
  5. スライドショー
  6. スロットマシン
  7. 数字タッチゲーム

まあ十分ですよね笑

これらをひたすらこなしていきます。

ここでドットインストールを入れた理由は2つあります。

①レベル的に少し難しいと感じる程度(不可能ではない)

ドットインストールの演習は難易度的に普通に難しくて、解説も最低限なので何の前提知識もない状態で挑むと普通に挫折すると思います。

ただ、皆さんはここまででJavaScriptの基礎を身につけられているので、レベル感的に頑張れば理解できるんですよね。

少し難しい程度が「学習のゾーンに入りやすい」と言われているので、このタイミングで行うのがちょうど良いということになります。

②デバッグの練習になるため

おそらくJavaScriptの基礎があっても、初見では理解できない部分もあるかと思います。

そこで、ぜひこのタイミングで「デバッグの練習」をしていただきたいなと思います。

デバッグというのは、具体的には「console.log」で値を確認するということですね。

プログラミングでは動きを確認するために変数やオブジェクトの中身を確認するための関数、JavaScriptのconsole.logやPHPのver_dumpなどがありますが、

これらを使ってプログラムの動きを逐一チェックしていく必要があります。

これをドットインストールのwebアプリ作成でぜひ習慣づけて欲しいなと思います。

わからない処理が出てきたら、都度「console.log」で1つ1つ中身を確認するという工程ですね。

ここでは詳しい説明は省きますが、気になる方は「ブレークポイント」などの言葉でググっていただけるとより理解が深められるかなと思います。

JavaScript初心者脱出後

かなり重めの内容となってしまいましたが、ここまで出来ればweb制作に置けるJavaScriptの知識は必要十分なので、あとは自分で案件でJavaScriptを触りながら、

デバッグしつつ自走して成長できると思います。

また付随する技術として、最近はweb制作でも使われているwebpackといったJavaScriptのバンドラーの学習を進めてもいいかと思います。

また、フロントエンド方面に進みたい方でも、Vue.jsやReactといったフレームワークを勉強するのに必要なJavaScript基礎力は十分に身についている状態なので、

そちらに進んで自分でwebアプリケーションを作ってみてもいいと思います。

追記:Web制作に特化したJS教材出しました

web制作ではDOM操作がメインになるのですが、そこを重点的に学べる教材を出しました。

学べること

・ハンバーガーメニュー
・ドロワーメニュー
・ローディング
・スムーススクロールでページトップに戻るのボタン
・アコーディオン
・モーダル
・タブ

\\\コーディング教材公開中///

HTML初心者からWordPress実案件レベルまでのコーディング教材noteで公開しています。

模写コーディング教材

XDデザインデータからのコーディング経験を積むことができ、ポートフォリオとして活用していただくことも可能です

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

マガジンでまとめて購入していただくとお得になります。

書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!