HTML5プロフェッショナル認定 レベル2の学習教材

公開済みの教材をログインせずに読めます。改訂中の教材は公開していません。

• let・constとスコープの全体像

  JavaScriptの変数宣言は、値がどこから見え、どこで変更できるかを決めます。letとconstの違いは単なる書き方ではありません。短いコードを実行順に追い、ブロックスコープ、再代入、一時的デッドゾーンを区別します。

• let・constとスコープのブラウザ挙動/実装演習

  買い物リストのコードを題材に、変数の再代入とデータの変更を分けて追います。コードを一行ずつ実行し、どの束縛を参照しているか、エラーになった後に続行するかを確かめる演習です。各コードは他の宣言がない独立した実行として考えます。

• クロージャを理解する

  関数は作られた場所の変数へ後からもアクセスできます。クロージャを、値の保存という曖昧な言い方にとどめず、どの変数の束縛を参照するのかコードで追います。

• クロージャのブラウザ挙動/実装演習

  クロージャで生成した関数を並べ、どの状態を共有するかを実行順に追います。ループの修正、状態を持つAPI、オブジェクト参照と値の保存の違いを扱います。

• thisを理解する

  thisは変数の宣言場所だけでは決まりません。通常関数の呼出し方、明示的な束縛、アロー関数の外側のthisを分けて、どのオブジェクトの値を読むかを追います。

• thisのブラウザ挙動/実装演習

  メソッドの受渡しは、処理そのものと受け手の情報を切り離すことがあります。配列コールバック、bindの引数、newを含むコードを実行順に追い、安全に意図した対象を操作する方法を学びます。

• prototypeとclassを理解する

  JavaScriptの継承は、見つからないプロパティを別のオブジェクトへ探しに行く仕組みです。所有プロパティ、プロトタイプ、コンストラクタ、class記法を具体的な探索順でつなげます。

• prototypeとclassのブラウザ挙動/実装演習

  プロパティの値を変える操作と、プロトタイプ参照を差し替える操作では既存実体への影響が異なります。探索の図を更新しながら、共有メソッドや共有配列の実装上の注意点を確かめます。

• 継承を理解する

  継承は共通の振舞いを親に置き、必要な差だけを派生側へ加える仕組みです。extendsが作る二つの参照関係と、superによる初期化・親メソッド呼出しを分けて学びます。

• 継承のブラウザ挙動/実装演習

  親と子のメソッドが重なるコードを、呼出し・初期化・戻り値の三つに分けて追います。多段継承、static、親メソッドの更新を組み合わせ、どの値が最終結果になるかを確かめます。

• 例外処理を理解する

  例外は通常の処理の続きを中断し、対応するcatchへ制御を渡します。throwする値、捕捉後の流れ、finallyが戻り値へ与える影響を、小さな実行例で確かめます。

• 例外処理のブラウザ挙動/実装演習

  例外処理を含む関数では、どこで処理が止まり、どの結果を持って外側へ出るかが重要です。入れ子、return、可変オブジェクト、ループ制御を組み合わせ、処理順を追跡します。

• Promiseを理解する

  通信やファイル読込みの結果はすぐには得られないことがあります。Promiseは、後で成功値または失敗理由が決まる処理を表します。単に待つ道具と覚えず、状態・戻り値・コールバックの実行順序を読みます。

• Promiseのブラウザ挙動/実装演習

  Promiseの短いコードを追い、どの値が次へ渡るか、失敗がどこで回復するかを確認します。同期ログと非同期ハンドラーを二列に分けて考えると順序を誤りにくくなります。