web制作

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特化教材

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

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

しょーごログ-コーディング課題のレビュー
レビューの様子

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください!

無料の入門編から本格企業サイトまで/

あなたの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の概念も出てくるので、一番最初の取っ掛かりとしては、ベストな教材だと確信しています。

②ドットインストール

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

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

実はドットインストールにはハンズオンで実際に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アプリケーションを作ってみてもいいと思います。

【追記】JavaScriptはAIとともに学習すべし

2024年以降の正解線ではJavaScriptはAIと共に学ぶのが最適解かと思います。

どんな教材を使ってもわからない部分が出てくると思いますが、その時に

一行一行小学生でも分かるように解説して

といえばめちゃくちゃ分かりやすく解説してくれます。

Web制作でChatGPTでできる事例7選【コーダーが解説】

ChatGPTとCursorを使う方法を紹介していますが、メンターが格安で手に入る訳なので、学習が爆速になります。

是非導入してください。

CursorはAI搭載エディターですが、初学者の内から使い始めるべきだと思います。

Web制作→フロントエンドに転身

Web制作でのJavaScriptの勉強は行き着くとWebフロントエンドの開発エンジニアかと思います。

以前Web制作フリーランス→自社開発企業フロントエンドエンジニアに転身された方にインタビューしているので、JSの勉強方法など参考になるかと思います👇

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

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

学べること

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

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

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

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!

しょーごログ-コーディング課題のレビュー
レビューの様子

\課題の購入はこちらから/

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});