こんにちは、らいちです。
WEB制作学習の中で、JavaScriptの基本的な内容を終えたところで、「実際に何か作っていきたい！」と思う方も多いと思います。
ただ、取り掛かろうにも具体的に何が作れるのかがわからないものです。普通の教材では基本文法などの基礎を学ぶだけで、実践的な内容はなかったりしますからね。
この記事では、JavaScriptで作れるものをまだイメージできていない方へ向けて、できることやできないこと、実際に作れるものを紹介していきます。
記事を読んだ後の学習ロードマップや、ChatGPTを使った実践的な学習方法も紹介しているので、ぜひ最後まで読んでいってください。
Javascriptについてのおさらい
JavaScriptはWEBサイト上で動作するプログラミング言語で、JSやバニラJSといった呼ばれ方をします。
| 項目 | 内容 |
|---|---|
| 特徴 | ・ブラウザ上で動作する ・ユーザーの操作によっても実行できる ・サーバーとのやりとり無しに即時実行可能 |
| 使用するメリット | ・サイトの動きがリッチ(豊か)になる ・学習リソースが多い(情報がかなり多い) ・ライブラリやフレームワークの選択肢が多い |
| ライブラリ（一部） | ・jQuery ・GSAP ・Chart.js |
| フレームワーク（一部） | ・React ・Vue.js ・Angular |
JavaScriptを使うことで、サイトに「動き」やユーザー操作への「反応」を付け足すことができます。具体的には、アニメーションやクリックしたら表示するなどですね。
また、他の言語とは違ってインストールの必要もないため、環境構築もかなり簡単にできます。なので、他のプログラミング言語と比べて気軽にコードを実行できます。
らいちWEB制作では一部ライブラリなどは使う場合があるものの、基本的にはそのままのJavaScriptを使うことが多いです。
WEB制作にてできること・できないこと
JavaScriptについておさらいをしたところで、「じゃあWEB制作ではどんなことができるの？できないの？」の部分について説明していきます。
できること
WEB制作でJavaScriptができることは以下の5つになります。
- UI操作関連：メニューの開閉やタブ切り替え、ポップアップ表示などの見た目操作
- アニメーション：スクロールアニメーションやローディングアニメーションなどサイト内での演出
- フォーム操作関連：フォームでの入力チェックや自動保管、送信ボタン制御など
- 外部データの取得・表示：APIを使用した天気情報やニュース、SNSデータの取得など
- 非同期通信：ページの再読み込みを伴わないデータや表示の更新など
PHPやRubyなどシステムでよく使われる言語とは違い、ページの読み込みをしなくても、即時に要素を表示させたり動かしたりなどが可能です。
こうした即時に実行できるといった点から、ユーザーにとって便利であったり、世界観のあるサイトを作るために不可欠な存在となっています。
らいちおしゃれに動くサイトであったり、立体的なものが写っているサイトもたいていはJavaScriptが使われていますよ！
できないこと
便利なサイトを作るために必要なJavaScriptですが、反対に以下の3つのことはできません。
- サーバーサイド処理：データベース操作やセッション管理、セキュリティ対策など
- OSに関わる直接操作：PC上のファイルアクセスやOS設定の変更など
- 機械学習やAI関連：画像認識やデータの学習、予測など
JavaScriptはWEBサイト上の見た目部分、つまり「クライアントサイド」に特化しているため、サーバーでのやりとりやデスクトップ上の操作は苦手です。
らいち基本的にWEB制作では、JavaScriptはUIであったりアニメーションを実装するためのものです！
Node.jsを使えばサーバーサイドも処理できる
「できないこと」にてJavaScriptはサーバーサイド処理を挙げましたが、実はNode.jsというものを使うことで、サーバーサイド処理ができちゃいます。
なので、ログイン機能やデータベース操作など、いわゆる「システム的な処理」もJavaScriptで完結させることができます。
ただ、WEB制作ではWordPressをよく使う関係上、PHPがサーバーサイド処理を担うことが多いため、Node.jsのことは正直気にしなくて良いです。
らいちまた、Node.jsを使うためにVPSサーバーなどの契約・環境構築が必要になるため、余程のことがない限りは使わない方が良いですね。
具体的にJavaScriptで作れるもの
できること・できないことについて説明したところで、JavaScriptで作れるものとして以下の5つを紹介します。
これらはWEB制作でよく使われるものなので、ぜひ確認しておきましょう。
ハンバーガーメニュー
ハンバーガーメニューは3本線のアイコン（≡）でよく表されるメニューで、スマートフォンなど画面が小さいデバイスのために使われます。
- クリックイベント：クリックした時に処理を実行させる
- クラスの付け外し：HTMLのクラスをJavaScriptにて付け外しする
レスポンシブが主流の今では、ほとんどのサイトで実装されています。かわいい名前に反して相当重要な機能なので、ぜひ押さえておきましょう。
らいちもちろん、この「WEBの図書館」でもちゃんと実装されています。PCから見ている方で興味があればスマホで見てみてください！
スクロールアニメーション
スクロールをしたら要素を表示させる機能のことです。特定の位置にスクロールしたら、文章や画像がふわっと表示されたり、スライドインや拡大されるなどですね。
- IntersectionObserverによる監視：画面内に入ったらアニメーションを実行するために必要なAPI
- クラスの付け外し：HTMLのクラスをJavaScriptにて付け外しする
WEBサイトに世界観や楽しさを加えるために必須の機能になります。
ちなみにJavaScriptでの実装については「実行」と「クラスの付け外し」だけで、基本はCSSがメインになります。なので、JavaScript部分は正直難しくありません。
らいちただ、アニメーションの内容によってはもちろん実装が難しくなります。例えば、複数アニメーションを組み合わせたりですね。
ダークモード切り替え
ダークモード切り替えはWEBサイトを明るい見た目のライトモードと、暗い見た目のダークモードを切り替える機能のことです。
- クリックイベント：クリックした時に処理を実行させる
- クラスの付け外し：HTMLのクラスをJavaScriptにて付け外しする
- Local Storage保存：ブラウザにデータを保存（ページ遷移後も設定を反映）
ユーザーがサイト内に設置されたスイッチを押すことで、ライトモードとダークモードを切り替えられるため、ユーザー自身が好みのデザインでサイトを閲覧できるようになります。
JavaScriptが担う部分は、「実行」と「クラスの付け外し」、加えてページ移動の際に「設定を保存する」程度で、そこまで難しくありません。
らいちJavaScriptは補佐的な扱いで、動きやデザインはすべてCSSでやります。なので、CSSの方が断然難しいです。
カルーセル
カルーセルは、複数画像やコンテンツを横にスライドさせて順番に表示させる機能のことです。ユーザー自身で手動でスライドさせたり、数秒ごとの自動スライドも実装できます。
- クリックイベント：クリックした時に処理を実行させる
- クラスの付け外し：HTMLのクラスをJavaScriptにて付け外しする
- インデックス管理：現在の要素の位置を管理する
この機能によって小さい画面でもコンテンツを十分に表示させたり、サイトをおしゃれにできます。
ちなみに、カルーセルの実装はSwiper.jsやSlick.jsなどライブラリを使っての実装が多いです。
らいち自作でもできますが、正直実装に時間がかかる+難易度も高いので、凝ったものを作らない限りはライブラリを使った方が良いですよ。
お問い合わせフォーム入力チェック
お問い合わせフォームの送信時に、「ユーザーが必要な情報をすべて入力しているか」「正しい形式で入力されているか」をチェックする機能です。
- 送信イベントの検出：送信ボタンを押した時に処理を実行させる
- 値の取得：入力内容を取得して処理内へ渡す
- バリデーション：if文や正規表現などで入力内容をチェックする
- ページ遷移制御：入力内容が正しい場合は遷移、そうでない場合は遷移させない
入力内容によってはエラーが発生したり、意図しない動作を起こしてしまうため、お問い合わせフォームがある場合に入力チェックは必須になります。
実装の際は「どんな入力パターンがあるのか」「エラーの起こる可能性のあるパターンはどれなのか」を想定していかなければなりません。
らいち実装もさることながら、ちゃんと入力チェックが機能しているかのテストもしっかりしなければいけないので、難易度は結構高めです！
JavaScript実践学習ロードマップ
JavaScriptで具体的に作れるものを把握したらそのまま終了するのではなく、実際に何かを作りながら学習を進めていくことが重要です。
そこで、みなさんが今後も学習をしっかり進められるように、JavaScript学習ロードマップを紹介します。
【STEP1】JavaScriptでの簡単なUI操作
最初のステップでは、WEB制作でよく使われる「クリックしたら表示・動作」するUI操作の部分を学習しましょう。
- ハンバーガーメニュー
- タブ切り替え
- アコーディオンメニュー
「実行」や「クラスの付け外し」といった基本的なJavaScriptの処理が詰まっているので、最初の学習に最適です。
また、UI操作関連の機能は今のWEB制作では当たり前に実装されているため、ぜひできるようにしておきましょう。
らいち実装方法自体は結構シンプルなので、コツさえ掴めばすぐに身につけられますよ！
【STEP2】Webサイトアニメーションの作成
STEP1でJavaScriptの基本的な処理ができるようになってきたら、アニメーションの実装について学んでいきましょう。
- スクロールアニメーション
- ページ内リンクでのスムーススクロール
- ローディングアニメーション
アニメーションでは、イベント発火のタイミングや画面の自動移動、表示させる時間など細かな処理が必要になります。
特に、「①ここでイベント発火」→「②処理」→「③処理」といったどう処理を組み立てていくのかが重要になるので、アニメーション実装でぜひ方法や考え方を身につけていきましょう。
らいちここができれば、WEB制作でのJavaScriptはほぼ大丈夫です。正直STEP5まで飛んでしまっても良いくらいに、スキルが身についている状態ですので！
【STEP3】API連携によるデータの取得
STEP2が終わったら、ここからはJavaScriptの発展。外部データを取得してWEBサイト上に表示するAPI連携の実装に挑戦しましょう。
- 天気予報APIによる天気情報表示
- WordPressのRESTAPIで記事一覧表示
- X（Twitter）のAPIによるポスト表示
このSTEPでは「どのようにデータを取得」し、受け取ったデータを「どう加工して表示させるか」といったWEB開発レベルのJavaScriptスキルを身につけられます。
らいちAPI連携ができれば、外部サービスや自社システムのデータを表示させるといった、クライアントの難易度高めな要望にも応えられるようになりますよ！
プログラミング言語を学ぶ上で出てくるAPIとは？APIの基礎と使い方について解説！
【STEP4】Ajaxによるデータ処理
STEP3ができるようになったら、さらなる発展としてAjaxを使ったデータの表示や更新に挑戦しましょう。
- お問い合わせフォームのAjax送信
- ページネーション
- 検索結果表示
Ajaxはページ更新を挟まずに必要な部分だけを表示・更新できる技術なので、いわゆるシームレスなサイト制作を作れるようになります。
らいち必須のスキルではないですが、他のWEB制作者と差をつけられる部分なので、今後単価を上げるためにもぜひできるようにしておきたいですね。
【STEP5】ポートフォリオの作成
最後はSTEP1〜STEP4までの得たスキルを駆使し、ポートフォリオの作成をしましょう。おすすめの作成内容については以下のとおりです。
- アニメーションやUI操作を取り入れたサイト
- ユーザーがいかに便利に使えるかを考えたサイト
- 外部データ表示がメインのサイト
単に作るのではなく、「なぜ作ったのか」「どうしてこうした設計なのか」を意識して作るのが重要です。クライアントにスキルを証明するだけでなく、仕事ぶりも見られるためですね。
らいち企画→デザイン→コーディング→テストをすべて行うため大変ではありますが、仕事に直結する部分なのでぜひ力を入れて作成しましょう！
JavaScriptに対するよくある質問
JavaScriptに対してよく挙げられる質問について紹介します。
早速【STEP1】を実践しよう(ChatGPT使用)
JavaScriptの学習ロードマップを紹介したところで、早速【STEP1】に取り掛かっていきましょう。今回はChatGPTを使って「ハンバーガーメニュー」の作成を実践していきます。
準備するもの
STEP1で準備しておくものは以下のとおりです。通常のJavaScript使うので、準備自体はすぐにできます。
- VSCode：コーディングするために使用
- ChatGPT：コードの解説を受けたり、コーディングしてもらうために使用
らいちChatGPTは無料版でも優秀なので契約する必要はありません！ただし、今後本格的に使うなら今のうちから契約して使い慣れておくのが良いでしょう。
また、今回作るハンバーガーメニューの設計は以下のとおりです。
- クリックしたら5つのメニューを表示
- メニューを表示している間は三本線を×(バツ印)にする
- メニューは右から左へ表示されるようにする
すごく簡単な設計ですが、学習の段階ではこの程度で大丈夫です。この設計に従って実装していきます。
【STEP1】を実践
まずはコーディングを行うためのフォルダを準備します。好きなところにフォルダを作成して「hamburger-menu」という名前へ変更します。変更したらVSCodeで開いておきましょう。
次はChatGPTに設計のとおりのハンバーガーメニューをコーディングしてもらうため、以下のプロンプトをChatGPTに入力して送信します。
HTML・CSS・JavaScriptを使って以下の要件を満たすハンバーガーメニューを作成してください。
・クリックしたら5つのメニューを表示
・メニューを表示している間は三本線を×(バツ印)にする
・メニューは右から左へ表示されるようにする送信後、ChatGPTがHTML、CSS、JavaScriptを回答してくれました。今回作成された回答のイメージが以下のとおりです。ちなみに、コードについては長いため一部割愛しています。
次に先ほど用意したフォルダの中にファイルを作成していきます。htmlコードを確認したところ、JavaScript「script.js」、CSSは「style.css」で、パスはhtmlの記載場所と同じ階層でした。
そのため、htmlファイルは基本のファイル名「index.html」で作成し、同じ階層に「script.js」「style.css」を作成します。
ファイルの作成が完了したら、回答してもらったコードを各ファイルへ貼り付けます。コードを貼り付ける際は、必ず言語に対応した拡張子のファイルに貼り付けてください。
そして、サイトを開きます。確認したところハンバーガーメニューは問題なく作成されており、メニューの開閉もしました。ただし、バツ印が若干崩れているため、修正のほうを行なっていきます。
今回の修正内容はかなり軽微なものなので手動修正をします。線の位置を修正するだけなので、作成してもらったコードのうち、位置を調整するtransformのtranslateYの数値を変更。これによりきれいなバツ印になりました。
以上でハンバーガーメニューの作成は終わりです。基本的にはChatGPTで大枠を作成し、細かな修正や要件追加を手動で行っていくイメージです。
今回は単にハンバーガーメニューを作成するだけでしたが、これだけだと身につかないので、ヘッダーに組み込んだり好みのデザインに変更するなどアレンジに挑戦していきましょう。
らいちまた、ChatGPTに作らせて終わりではなく、しっかりコードも読むことを心がけてください！どんな仕組みで動き、どこを変更すれば思い通りになるのかがわからないままだと実務で使えないためです！
プログラミングのエラーでChatGPTは使えるの？メリットやリスクを解説！
まとめ
本記事では、WEB制作にてjavaScriptでできることや具体的に作れるもの、加えて今後の学習ロードマップについて紹介しました。
JavaScriptはWEBサイトを便利・おしゃれにするために必須の言語であり、現代のWEB制作には欠かせないものとなっています。
ここまで読んでいただいた方なら、WEB制作でのJavaScriptのイメージができている状態なので、ぜひ学習を進めて実践的なスキルを身につけていきましょう。
らいち紹介した学習ロードマップを参考にしながら進めることで、かなり効率的にスキルを身につけられます！
