【JavaScript,jQuery特訓編】web制作でよくあるパーツを実装しよう【解答付き】

Shogo（しょーごログ運営）

2020年11月5日 17:42

2024.04 初回のみローディング処理させるコードを追加しました。

こんにちは、フリーのweb制作者として6年ほど活動しているしょーごと申します。

今回は「web制作に特化したjQuery,JavaScript教材」を作成しました。

【動画でも解説しています】

この動画の18:13からJS特訓編に触れています。

学べること、作るもの

学べること
・web制作で頻出のjQuery、JavaScriptによるDOM操作実践
・jQuery,JavaScriptの書き方の違い
・デバッグ方法、開発の進め方

作るもの7つ
・ハンバーガーメニュー(ページ内リンクのスムーススクロール含む)
・ドロワーメニュー
・ローディング
・スムーススクロールでページトップに戻るのボタン
・アコーディオン
・モーダル
・タブ

web制作のjQuery,JavaScript学習における課題

今回の教材作成はとある問題意識からスタートしています。
それは「web制作に特化したJS教材がない」ということです。

特に「実際にものを作りながら学べる教材が少ない」と感じていました。

例えば、JS教材で一番最初に見ることになるconsole.log()はデバッグでとても重要なメソッドですが、これだけ学んでも実開発で使わないと、実際にどう使うのか実感がわかないと思います。

そこで今回、web制作でよくあるパーツを実装しながら、JSでの開発をjQuery,JavaScript両方学べる教材にしました。

web制作で頻出のパーツなので、今回の教材でのコードは実案件で即使うことができます。

特に、「ハンバーガーメニュー」「ドロワーメニュー」などは実案件での使用率は70%超えぐらいで頻繁に使うので、今回作ったものは確実に資産になります（もちろん解答コードを実案件でそのまま流用いただいても構いません）

学習の進め方

JSの学習に集中してもらうために、HTML,CSSはこちらで用意しておきました。フォルダをダウンロードしてJS部分を開発していただきます。

また、仕様や動きは実装するパーツごとに動画を用意していますので、それを参考にしてもらいます。

①既存のHTML,CSSを参考に動きを実装してみる（最低jQuery、余裕があればJavaScript でも）
②解答コードで別の実装方法にも触れてみる

注意点（*購入前にご一読ください）
・HTML,Sassは基本的には解説はしません（解答コードは載せています）
・質問回答は非対応になります。
・jQueryはProgate中級レベルの理解があること(結構難しいです)
・解答コードを付けていますが、解説はざっくりとしているかもしれません。JavaScriptの基礎などは適宜ググって頂く必要があります。
・JavaScriptはES6(ES2015)で記述している部分があります。