さて、JavaScriptの基礎が整ったなら、
次はいよいよ試験内容に沿って手を動かしながら勉強を……！
そう意気込んだところで、
次なる試練が立ちはだかりました。
どうしても、
試験対策用のテキストだけでは、開発の準備が整わない。
選択問題や空欄補充問題は解けても、
そこから「実際に動くスクリプト」を書こうとすると、
何から手を付ければいいのかわからないのです。
仮に書けたとしても、
相当な時間をかけて、手探りで進めることになるでしょう。
あぁ、誰か。
- 専属コーチのように
- 順序立てて
- 基礎から応用まで
- しかも、試験範囲を外さずに
丁寧に手ほどきしてくれないだろうか……。
そう嘆いていたところで、
ふと、妙案が降ってきました。
「あれ？
AIに学習計画を立ててもらって、
試験範囲の解説も全部お願いすればいいのでは？」
これが――
大当たりでした。
私がChatGPTに投げたのは、こんな依頼です。
HTML5プロフェッショナル認定試験レベル2の試験範囲について、
実際にスクリプトを書いて手を動かす形で学習したい。大まかなセクションに分けて、
それぞれの内容を網羅するアプリケーションを作成するとしたら、
適切なコンテンツを設定して教えてほしい。
すると、次のような返答がありました。
わかりました。
作るときは「○○を作る」と言ってください。
手順と、試験内容の知見について、それぞれ解説します。
という返答。
そして提示されたのが、以下の構成でした。（要約）
ChatGPTが提示した学習プラン
グラフィックス & アニメーション
（Canvas / requestAnimationFrame / WebGL軽く）
→ Canvasミニゲームメディア要素
（audio / video + 各種API）
→ Videoプレイヤーストレージ
（localStorage / Session / IndexedDB / Blob / File API）
→ メモ帳アプリ通信
（WebSocket / Fetch / XHR）
→ WebSocketチャット＋API連携デバイスアクセス
（Geolocation / DeviceOrientation / Clipboard）
→ スマホ機能を使うWebアプリパフォーマンス & オフライン
（Worker / Cache / Performance API）
→ オフライン対応＋高速化セキュリティモデル
（CSP / sandbox / SOP / CORS）
→ 脆弱性を防ぐための設定確認
これは、
「あとで振り返れるように、ポイントだけ箇条書きでまとめてほしい」
とお願いして出してもらった一覧です。
試験範囲をしっかり網羅した上で、
アプリ内容まで具体的に設計されている。
正直、
現状未修の状態だったら、
ここまでの学習計画を自力で立てることはできなかったと思います。
さらに驚いたのは、
それぞれの項目について、
- 開発手順
- 実装の意図
- 試験範囲として問われる知識
を、指定すれば順序立てて解説してくれることでした。
ここからは、実際に手を動かしていきます。
まずは、
Videoプレイヤーから試してみることに。
必要なファイル構成や素材の準備について相談すると、
次のような回答が返ってきました。
HTMLファイルとJavaScriptファイルを用意し、
音源やサムネイル用の画像はフリー素材サイトから準備します。そのうえで、このコードをファイルに入れて、
まずは最低限動く状態を作ってみましょう。
指示通りに実装を進め、
ひとまず動くところまで完成。
その後、使っている知識について整理をお願いすると、
では、ここで使っている試験範囲の知識を整理します。
video要素の役割、各イベントの意味、
APIがどのように使われているかを確認していきましょう。
…と、
実装 → 知識整理がセットで進んでいきます。
実際にテキストを片手に、
試験範囲の知識問題も照らし合わせてみましたが、
内容の真偽もきちんと正確でした。
（ちょっと疑ってごめん。）
……控えめに言って、神では？
これなら、
- ドットインストールで基礎固め
- ChatGPTと一緒に実装
- 試験知識を整理して定着
という流れで、
「手を動かしながら試験対策する」ことができます。
ということで、
この学習スタイルで、ひたすら進めていくことにしました。
それでは、また次回。
