シラバス詳細

区分

環境情報科目

ディプロマ・ポリシーとの関係

カリキュラム・ポリシーとの関係

カリキュラム全体の中でのこの科目の位置づけ

科目の目的

本科目の目的は、Webサイトに動的な振る舞いと機能を与えるプログラミング言語であるJavaScriptの基礎から応用までを体系的に習得することにあります。プログラミング未経験者でも理解できるよう、変数や条件分岐といった基本概念の定着を図りながら、Webブラウザ上の要素を操作するDOM（Document Object Model）の仕組みを深く理解します。最終的には、ユーザーの操作に応答するインタラクティブなUIや、データを活用したコンテンツ生成、視覚的なアニメーション効果を実装し、機能的なWebサイトを自力で構築できる実践能力を養うことを目的とします。

到達目標

1. 変数、定数、関数、条件分岐、ループ処理といったプログラミングの基本構造を理解し、適切な構文を用いてコードを記述できるようになります。
2. DOM操作とイベントリスナーを適切に組み合わせ、ユーザーのアクション（クリック、入力、スクロール等）に応答するインタラクティブなWebページを実装できるようになります。
3. 配列やオブジェクトを用いたデータ構造を理解し、複数のデータを管理・操作してHTMLコンテンツを動的に生成するスキルを習得します。
4. ブラウザの開発者ツールを活用したデバッグ手法を身につけ、エラーの原因を特定して自律的に解決し、Webサイト制作プロジェクトを完遂する能力を確立します。

科目の概要

本科目では、Web制作の現場で標準的に使用されるJavaScriptの技術を、全30回の授業を通じて段階的に学習します。前半では、開発環境の構築から始め、テキストの書き換えやスタイルの変更といった基本的なDOM操作を通じて、プログラムが動く仕組みを直感的に理解します。中盤では、「カラーピッカー」や「文字数カウンター」、「画像一覧ページ」といった具体的なアプリケーション制作を行いながら、配列、オブジェクト、繰り返し処理といったプログラミングの重要な概念を実践形式で学びます。後半では、スクロールに連動したアニメーション表現や、Intersection Observer APIを用いた高度な演出手法を取り入れ、最終的にこれまでの学習内容を統合した本格的なWebサイト制作演習を行います。

科目のキーワード

JavaScript、DOM（Document Object Model）、イベントリスナー、変数と定数、条件分岐、配列とループ、オブジェクト操作、Webアニメーション、Intersection Observer、デバッグ

授業の展開方法

授業は、各テーマに関する理論解説と、実際にコードを記述して動作を確認するハンズオン形式の演習を密接に組み合わせて進行します。単にテキストの内容をなぞるだけでなく、各回で作成する機能（UIパーツやツール）の完成イメージを共有した上で実装に取り組み、達成感を得ながら学習を進めます。特に初学者がつまずきやすいデータ構造や非同期処理の概念については十分な時間を割いて解説します。授業の終盤では総合演習としてWebサイト制作プロジェクトに取り組み、コーディングからデバッグ、仕上げに至るまでの一連のプロセスを実践することで、応用力と問題解決能力を高めます。

オフィス・アワー

神馬一博：【前期】
Web環境システム概論木曜5限
【後期】
Web環境システム開発Ⅰ（Webアプリケーションの実装）水4限・5限
Web環境システム開発Ⅱ（クライアント再度・プログラミング）木5限
渡辺謙：【前期】
環境データベース概論
環境データベースⅡ
環境プログラミングⅣ（永続化技法）
全科目：木曜5限
【後期】
環境データベースⅠ
環境データベースⅢ
コンピュータ・アーキテクチャ論
全科目：木曜5限

科目コード

UC4042

学年・期

2年・後期

科目名

Web環境システム開発Ⅱ（クライアントサイド・プログラミング）

単位数

授業形態

演習

必修・選択

選択

学習時間

前提とする科目

展開科目

関連資格

担当教員名

神馬一博・渡辺謙

回	主題	コマシラバス項目	内容
1	JavaScriptの言語的特徴とWeb制作における役割・動作原理	科目の中での位置付け	本講座はWebデザインにおける動的表現の実装を目的としている。第1回は、Java等の他言語経験を持つ学生に対し、Webブラウザ上で動作するJavaScriptの特異性を、HTMLおよびCSSとの関係性の中で再定義する導入回である。静的なマークアップ言語に動的な振る舞いを付加する仕組みと、スクリプトの配置場所による挙動の違いを理解し、今後の制作演習の基盤を構築する重要な位置づけにある。
		コマ主題細目	① JavaScriptの言語的特徴とWeb制作における役割 ② HTML・CSS・JavaScriptの相互関係と動作原理 ③ スクリプトの記述場所と外部ファイル化の運用手法
		細目レベル	① 本細目では、プログラミング言語としてのJavaScriptの概要と、Webサイト制作において果たすべき役割について詳説する。まず、学生が既に習得しているJava言語との混同を避けるため、両者の違いについて歴史的背景を交えて解説する。JavaScriptは元来、Netscape社が開発したブラウザ向けの言語であり、開発当初はMochaやLiveScriptと呼ばれていた経緯がある。Javaという名称が含まれているのは、当時注目されていたJava言語の人気にあやかったものであり、両者は全く異なる言語であることを明確に理解させる必要がある。Javaがコンパイルを必要とする厳密な言語であるのに対し、JavaScriptはブラウザ上で手軽に実行可能なスクリプト言語であるという特性を認識させる。次に、Webデザインの文脈におけるJavaScriptの役割について解説する。Webサイトは単なる情報の閲覧媒体から、ユーザー体験を提供するアプリケーションへと進化している。この中でJavaScriptは、静的なWebページに「機能」や「動き」を付加する役割を担っている。具体的には、ポップアップウィンドウの表示、画像スライダーの実装、計算機能の提供などが挙げられる。これらはHTMLやCSSだけでは実現困難な動的な処理であり、JavaScriptを用いることで初めて実現可能となる。さらに、テキストで紹介されている具体的なWebサイトの事例を通じて、JavaScriptの実践的な活用イメージを醸成する。例えば、ページの読み込み時にロゴマークがアニメーションしながら表示されるローディング画面や、クリックするとメニューがスライドして現れるハンバーガーメニュー、スクロール量に応じて要素がふわっと表示されるエフェクトなどである。また、ユーザーの入力内容を即座にチェックするフォームバリデーションや、ダークモードとライトモードの切り替えといった機能面での活用事例も紹介する。これらの事例から、JavaScriptが単なる装飾のためのツールではなく、ユーザビリティやアクセシビリティを向上させるための重要な技術であることを理解させる。学生には、これから学ぶ技術が実際のWebサイトでどのように使われているかを観察させ、自身の制作物にどう応用できるかを想像させるよう指導する。この細目で理解すべき範囲は、JavaScriptの言語的定義からWebサイトにおける具体的な活用事例の把握まで。
			② 本細目では、Webページを構成する三つの主要技術であるHTML、CSS、JavaScriptの関係性と、それらがブラウザ上でどのように連携して動作しているかについて解説する。まず、これら三者の役割分担を明確にするために、テキストでも用いられている「車」の比喩を用いて説明する。HTMLは車の骨組みやボディといった構造を作る役割を担い、CSSはボディの色や塗装といった見た目を決定する役割を担う。そしてJavaScriptは、エンジンやアクセル、ブレーキ、ライトといった、車を動かし制御するための「機能」を担っている。この比喩を通じて、JavaScriptが単独で存在するのではなく、HTMLという構造とCSSという装飾の上に成り立っていることを理解させる。次に、JavaScriptがブラウザ上でどのように動作し、画面に変化をもたらしているのかというメカニズムについて解説する。重要な概念は、JavaScriptがHTMLやCSSを「リアルタイムで書き換えている」という点である。通常、HTMLやCSSはサーバーから読み込まれた時点で表示内容が固定されるが、JavaScriptを用いることで、ユーザーの操作や時間の経過などの条件に応じて、ブラウザ上のソースコードを動的に変更することが可能となる。例えば、ボタンをクリックした瞬間にテキストの内容を「メニュー」から「閉じる」に書き換えたり、画像のファイルパス（src属性）を書き換えて別の画像を表示させたりすることができる。また、CSSのスタイルを操作して、背景色を変更したり、要素の表示・非表示を切り替えたりすることも可能である。この「書き換え」の処理は、ページ全体を再読み込み（リロード）することなく行われるため、ユーザーにストレスを与えることなくスムーズな画面遷移やインタラクションを提供できる点が大きな特徴である。Javaなどのコンソールアプリケーションでは、プログラムが上から下へと順次実行されて終了することが多いが、WebにおけるJavaScriptは、ユーザーのアクション（イベント）を待ち受け、それに応じてHTMLやCSSを操作するというイベント駆動型の動作が基本となることを強調する。これにより、静的な文書構造に対して動的な生命を吹き込むというWebプログラミング特有の考え方を定着させる。この細目で理解すべき範囲は、HTML・CSS・JavaScriptの役割分担から、JavaScriptによるDOM操作の概念的な理解まで。
			③ 本細目では、JavaScriptのコードをWebページに適用するための具体的な記述方法と、ファイルの管理運用について解説する。JavaScriptをブラウザに認識させ、実行させるためには大きく分けて二つの方法が存在する。一つ目はHTMLファイルの中に直接記述する方法、二つ目は外部ファイルとして作成し読み込ませる方法である。それぞれの記述ルールとメリットについて、実務的な観点も含めて詳細に指導する。まず、HTMLファイル内に記述する方法について解説する。この場合、`＜script＞`タグを使用し、その開始タグと終了タグの間にJavaScriptのコードを記述する。記述場所としては、`＜head＞`タグの中、あるいは`＜body＞`タグの中の任意の位置が許容されている。この方法は、少量のコードをテスト的に記述する場合や、特定のページのみで動作させたい短いスクリプトを埋め込む場合に手軽である。しかし、コード量が増加するとHTMLファイルの可読性が低下し、メンテナンスが困難になるという欠点があることを指摘する。次に、外部ファイルとして記述する方法について詳説する。拡張子が「.js」のファイル（例：script.js）を作成し、そこにJavaScriptのコードのみを記述する。そして、HTMLファイル側から`＜script＞`タグのsrc属性を用いて、そのファイルパスを指定し読み込ませる。この方法の最大の利点は、HTML（構造）とJavaScript（振る舞い）を完全に分離できる点にある。これによりコードの見通しが良くなり、修正や管理が容易になる。さらに、一つのJavaScriptファイルを複数のHTMLページから読み込んで使い回すことが可能となるため、Webサイト全体の共通機能を実装する際には必須の手法となる。また、複数のJavaScriptファイルを読み込む場合の挙動についても触れる。HTMLファイル内に複数の`＜script＞`タグを記述することで、複数の外部ファイルを順次読み込むことができる。この際、ブラウザは記述された順序に従ってファイルを読み込み、実行していくため、ファイル間に依存関係がある場合は読み込み順序に注意を払う必要があることを理解させる。基本的には、実務においては保守性と再利用性の観点から外部ファイル化が推奨されることを強調し、適切なディレクトリ構成でファイルを管理する習慣を身につけさせる。この細目で理解すべき範囲は、HTML内への記述および外部ファイルの読み込み方法と、それぞれの特性の理解まで。
		キーワード	① Webブラウザ ② HTML ③ CSS ④ scriptタグ ⑤ 外部ファイル
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだJavaScriptの役割やWebサイトでの活用事例を定着させるため、実際にインターネット上の様々なWebサイトを閲覧し、JavaScriptが使われていると思われる箇所を探してみること。例えば、画像が切り替わるスライダーや、クリックで開閉するメニューなどがどのように動作しているか観察し、HTMLやCSSだけでは表現できない「動き」や「機能」に着目して分析を行うこと。また、授業内で解説したJava言語との違いについても整理しておくこと。 ◆次回授業の予習次回の授業では、実際にJavaScriptのコードを記述するための開発環境を構築する。そのため、自身のPC環境において、テキストエディタ（Visual Studio Code）をインストールできる状態にあるか確認しておくこと。また、Webブラウザ（Google Chrome）が最新の状態になっているか確認し、普段使用しているブラウザの開発者ツールの開き方について、一般的な操作方法を調べておくとスムーズに実習に入ることができる。基本操作に不安がある場合は事前に確認しておくこと。
2	JavaScriptの記述と実行	科目の中での位置付け	本授業は、全30回にわたるWebデザイン・開発演習の第2回目にあたり、前回学んだJavaScriptの概要的知識を、実際の制作活動へと移行させるための重要な導入フェーズに位置しています。学生は本コマを通じて、プログラミングを行うための具体的な作業環境を自身のPC内に構築し、実際にコードを記述してブラウザ上で動作させるという、Web開発における最初の一歩を踏み出すことになります。これは以降の全演習の基盤となります。
		コマ主題細目	① 統合開発環境Visual Studio Codeの導入と設定 ② HTMLファイル内へのJavaScript記述と実行 ③ 外部ファイル化によるJavaScriptの管理と記述の簡略化
		細目レベル	① 本主題では、現代のWeb開発においてデファクトスタンダードとなっているコードエディター、Visual Studio Code（以下VSCode）の導入と環境構築について詳説します。Java言語の学習ではEclipseやIntelliJ IDEAといった重量級の統合開発環境（IDE）を利用した経験があると思われますが、Webフロントエンド開発においては、軽量かつ拡張性の高いVSCodeが広く採用されています。授業ではまず、Microsoft社の公式サイトからインストーラーをダウンロードし、各学生のOS環境（WindowsまたはMac）に適した手順でインストールを行う方法を解説します。単にツールをインストールするだけでなく、Web制作におけるエディターの役割、すなわちシンタックスハイライトによる可読性の向上や、入力補完機能によるコーディングミスの防止といった利点についても触れ、メモ帳などの単純なテキストエディターとの決定的な違いを理解させます。続いて、初期状態では英語表記となっているVSCodeのインターフェースを、拡張機能である「Japanese Language Pack」を用いて日本語化する手順を実践します。プログラミング学習の初期段階において、ツールの操作自体が障壁とならないよう、母国語での環境を整えることは学習効率の観点から極めて重要です。また、プロジェクトごとのファイル管理の重要性を説き、本授業用の作業フォルダ（例：03-demo1）を作成し、VSCode上でそのフォルダを開くという一連のワークフローを定着させます。Java開発におけるパッケージ管理とは異なり、Web制作ではファイルシステム上のディレクトリ構造がそのままWebサイトの構造に直結することを意識させ、適切なファイル管理能力を涵養します。最後に、エディター上で「信頼」設定を行う意味についても触れ、セキュリティ意識を持たせます。この細目で理解すべき範囲は、VSCodeのインストールから日本語化を行い、作業用フォルダを作成してエディターで開くことができる状態まで。
			② 本主題では、構築した環境を用いて実際にJavaScriptのコードを記述し、Webブラウザ上で動作させるプロセスを実践します。まず、HTMLファイル（index.html）を新規作成し、その中に`＜script＞`タグを用いてJavaScriptを埋め込む手法について解説します。Java言語ではクラス定義やmainメソッドが必須となりますが、JavaScriptでは`＜script＞`タグ内に記述されたコードが上から順に即座に実行されるというスクリプト言語特有の挙動を理解させます。具体的には、「window.alert('メッセージ');」というコードを記述し、ブラウザ上で警告ダイアログを表示させる演習を行います。ここで、JavaScriptの基本的な文法構造である「オブジェクト.メソッド(パラメーター)」という概念について詳しく解説します。「window」はブラウザのウィンドウ全体を表すオブジェクトであり、「alert」はそのウィンドウに対して警告を表示するよう命令するメソッド、そして括弧内の文字列が表示内容を決定するパラメーターであることを、Javaのオブジェクト指向の知識と対比させながら説明します。また、文字列を扱う際の引用符（シングルクォーテーションまたはダブルクォーテーション）の使用ルールや、命令文の区切りとしてのセミコロンの役割についても触れます。さらに、コードを記述した後は必ずファイルを保存し、ブラウザをリロードすることで変更が反映されるという、Web開発における基本的な「記述・保存・確認」のサイクルを習得させます。ブラウザがコードを解釈し実行するランタイム環境であることを強く意識させ、Javaのコンパイル実行との違いを明確にします。この細目で理解すべき範囲は、HTMLファイル内のscriptタグにalertメソッドを記述し、ブラウザでダイアログが表示される仕組みを理解するまで。
			③ 本主題では、JavaScriptコードをHTMLファイルから分離し、外部ファイル（.js）として管理する方法について詳説します。HTML内にスクリプトを記述する方法は手軽ですが、コード量が増加した場合や複数のページで同じ処理を使い回す場合には不向きです。そこで、拡張子「.js」を持つ独立したファイルを作成し、HTML側の`＜script＞`タグにsrc属性を付与して読み込ませる手法を解説します。これはCSSを外部ファイル化するのと同様の概念であり、構造（HTML）と振る舞い（JavaScript）を分離することで、保守性や可読性が向上することを学生に理解させます。授業では、新規に「script.js」などのファイルを作成し、先ほどのalertメソッドを記述した上で、HTMLファイルから正しく読み込まれるかを確認する演習を行います。この際、外部ファイル側には`＜script＞`タグ自体は不要である点に注意を促します。また、複数のJavaScriptファイルを読み込む場合の順序や、ブラウザがHTMLを解析する過程でスクリプトファイルが読み込まれるタイミングについても基礎的な概念を説明します。さらに、JavaScript特有の省略記法として、「window.alert()」における「window.」の部分が省略可能であることについても解説します。windowオブジェクトはグローバルオブジェクトであり、明示的に指定しなくても暗黙的に参照されるという言語仕様を学びます。ただし、省略可能なのはwindowオブジェクトに限られるため、他のオブジェクトを操作する際には明示的な指定が必要であることも補足します。Javaのような厳格な言語と比較し、JavaScriptの柔軟性とそれに伴う注意点を認識させます。この細目で理解すべき範囲は、外部JSファイルの作成と読み込み方法、およびwindowオブジェクトの省略記法を習得するまで。
		キーワード	① Visual Studio Code ② scriptタグ ③ src属性 ④ windowオブジェクト ⑤ alertメソッド
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で構築した開発環境（Visual Studio Code）を自宅のPCでも再度確認し、スムーズに起動・操作できるようにしてください。また、授業内で扱ったalertメソッド以外のメソッドや、コンソールへの出力方法などが存在するか、一般的なWeb開発の入門サイトなどを通じて興味を広げておくと良いでしょう。特に、HTMLファイルとJavaScriptファイルが別々のファイルとして存在しながら、ブラウザ上で統合されて動作する仕組みについて、頭の中で整理しておくことが重要です。コードを書く、保存する、ブラウザで確認するという一連の流れを無意識に行えるよう反復練習してください。 ◆次回授業の予習次回の授業では、JavaScriptを記述する際のより詳細な文法ルールや、ブラウザの開発者ツールを用いたデバッグ方法について学びます。プログラミングにおいて「大文字・小文字の区別」や「全角・半角の違い」がなぜ重要なのか、一般的なプログラミングの基礎概念として振り返っておいてください。また、Webブラウザ（Google Chrome等）には、普段見ているページ以外に「裏側」を確認するための機能（デベロッパーツールのコンソール機能など）が備わっていることについて、どのようなものか概要を調べておくと、次回の実習がよりスムーズに理解できるでしょう。
3	記述作法とコンソールを用いたデバッグ手法	科目の中での位置付け	本講義は、全30回の第1部「WebとJavaScriptの基礎」の最終回に位置します。前回までに構築した開発環境を用い、Java言語の学習経験を持つ学生が、Webブラウザ上で動作するJavaScript特有の記述作法と実行環境の特性を確立するための重要な単元です。特に、コンソールを用いたデバッグ手法の習得は、次項以降のDOM操作やイベント処理における問題解決能力の基盤となり、Web制作の実践的なスキルへの架け橋となります。
		コマ主題細目	① JavaScriptの命令文構造と記述上の基本原則 ② 文字列リテラルの表現方法とエスケープ処理 ③ 開発者ツールのコンソールを用いたデバッグ手法
		細目レベル	① 本細目では、JavaScriptにおける基本的な命令文の構造とその記述ルールについて、学生が既に習得しているJava言語との対比を交えながら詳細に解説します。まず、プログラムの基本単位となる命令文の構成要素について、テキストで提示されている「オブジェクト.メソッド(パラメター)」という形式に基づき分析します。具体例として取り上げる「window.alert('メッセージ');」というコードは、Javaにおける「System.out.println("メッセージ");」と同様に、操作の対象（オブジェクト）、実行すべき動作（メソッド）、およびその動作に必要な情報（パラメター）から成り立っています。ここで重要なのは、JavaScriptがWebブラウザ上で動作する言語であり、「window」オブジェクトがブラウザのウィンドウそのものを指し示しているという点です。Java Bronzeの知識を持つ学生にとって、オブジェクト指向的な「対象・操作・引数」という概念は馴染み深いものですが、JavaScript特有の仕様として、グローバルオブジェクトであるwindowは記述を省略できるという柔軟性があることを理解させます。次に、コードを記述する際の厳格なルールについて指導します。プログラミング言語において、コンピュータへの指示は一字一句正確である必要があります。特に初心者が陥りやすいミスとして、全角スペースの混入や、全角英数字の使用が挙げられます。これらは見た目での判別が難しいため、必ず半角英数字モードで入力する習慣を徹底させます。また、JavaScriptはJavaと同様に大文字と小文字を厳密に区別（ケースセンシティブ）する言語です。「alert」を「Alert」と記述すると動作しない理由を、識別子の認識という観点から論理的に説明し、正確なタイピングの重要性を再認識させます。さらに、文の区切りを示すセミコロンについても触れます。JavaScriptでは特定の条件下でセミコロンを省略することが可能ですが、意図しない動作を防ぎ、可読性を維持するために、Javaと同様に文末には必ずセミコロンを付与するという「お作法」を初期段階から遵守させます。これにより、将来的にコードが複雑化した際や、圧縮ツールを通した際のトラブルを未然に防ぐことができます。この細目で理解すべき範囲は、命令文の構成要素の理解から、半角英数や大文字小文字の区別、セミコロンの付与といった記述ルールの遵守まで。
			② 本細目では、プログラミングにおいてデータを扱う上で最も基本的な型の一つである「文字列」の定義方法と、特殊な文字を含めるための記述法について詳説します。Java言語では文字（char）をシングルクォーテーション、文字列（String）をダブルクォーテーションで囲むという厳密な区別が存在しますが、JavaScriptにおいてはその区別がなく、どちらの引用符を使用しても文字列として扱われるという言語仕様の違いを明確にします。その上で、Web制作の現場においてどちらを使用すべきかという指針を示します。テキストではシングルクォーテーションの使用が推奨されていますが、その合理的な理由として、HTMLの属性値（class="name"など）が慣習的にダブルクォーテーションで記述されることが多いため、JavaScriptコード内でHTMLタグを文字列として扱う際に、引用符の干渉を避けることができるという点を解説します。また、見た目のシンプルさや入力のしやすさといった実用的な側面も考慮し、プロジェクト内で統一されたコーディング規約に従う重要性を説きます。続いて、文字列の中に引用符そのものを含めたい場合に発生する問題とその解決策について解説します。例えば、「It's」のようにアポストロフィを含む文字列をシングルクォーテーションで囲むと、文字列の終端が誤認識されエラーとなります。この問題を解決するために、異なる種類の引用符で囲む方法（ダブルクォーテーションで囲む）と、エスケープシーケンス（エスケープ表記）を使用する方法の二通りを提示します。特にエスケープシーケンスについては、バックスラッシュ（環境によっては円記号）を用いることで、直後の文字が持つ特別な意味を打ち消し、単なる文字として扱わせる仕組みを理解させます。これは引用符だけでなく、改行を表す「\n」などの制御文字を表現する際にも用いられる汎用的な概念です。学生には、これらの手法を適切に使い分け、意図した通りの文字列データをプログラム内で表現できる能力を養います。Webデザインにおいては、ユーザーへのメッセージ表示や動的なHTML生成など、文字列操作が頻繁に行われるため、この基礎知識は極めて重要です。この細目で理解すべき範囲は、引用符の使い分けの基準から、エスケープシーケンスを用いた特殊文字の表現方法まで。
			③ 本細目では、JavaScript開発において必須となるGoogle Chromeのデベロッパーツールの機能、特に「コンソール」パネルの活用方法について実践的な解説を行います。プログラミングにおいてエラーは避けて通れないものであり、エラーが発生した際に適切に対処できる能力（デバッグ能力）が、初学者と熟練者を分ける大きな要因となります。まず、ブラウザ上でデベロッパーツールを起動し、Consoleタブを表示させる手順を習得させます。このコンソールは、JavaScriptのコードを直接入力して即座に実行結果を確認できる対話型の環境としても機能するため、文法の確認や小さなロジックの検証に役立つことを示します。次に、テキストで紹介されている「console.log()」メソッドの重要性について詳説します。これまでに学んだ「alert()」メソッドは、警告ダイアログを表示してユーザーの操作を中断させる性質があるため、実際のWeb制作現場でのデバッグ用途には不向きです。対して「console.log()」は、裏側（コンソール画面）に静かに情報を出力するため、Webページの動作を妨げることなく、変数の値や処理の通過確認を行うことができます。このメソッドを用いて、プログラムが開発者の意図通りに進行しているかを逐次確認する習慣を身につけさせます。さらに、コードに誤りがある場合にコンソールに表示されるエラーメッセージの読み解き方を指導します。例えば「Uncaught SyntaxError」が表示された場合、それが構文エラーであることを示しており、指摘された行番号や波線部分を確認することで、スペルミスや記号の閉じ忘れ（シングルクォーテーションの不足など）といった原因を特定できることを解説します。エラーメッセージはコンピュータからの拒絶ではなく、修正箇所を示すヒントであるという認識を持たせ、エラーを恐れずに自己解決を図る姿勢を涵養します。また、HTMLファイルに記述したスクリプトが正しく読み込まれ、コンソールに出力される一連の流れを確認し、開発サイクルの基礎を確立します。この細目で理解すべき範囲は、デベロッパーツールの起動とコンソールの基本操作から、console.logを用いたログ出力、およびエラーメッセージに基づいた基本的なトラブルシューティングまで。
		キーワード	① オブジェクト ② メソッド ③ alert() ④ エスケープシーケンス ⑤ console.log()
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったJavaScriptの記述ルールとコンソールの使い方について、実際に手を動かして定着を図ってください。具体的には、エディタを使用して意図的にクォーテーションを閉じ忘れたり、全角スペースを混入させたりしたコードを作成し、ブラウザのコンソールにどのようなエラーメッセージが表示されるかを確認してください。また、console.logを使用して、複数の異なる文字列（特殊文字を含むものなど）を出力する実験を行い、エスケープシーケンスの挙動を再確認してください。 ◆次回授業の予習次回の授業では、作成したHTML要素をJavaScriptから操作する「DOM操作」について学びます。その準備として、HTMLのid属性やclass属性がどのような役割を持っていたか、CSSでそれらをどのように指定（セレクタ記述）していたかを整理しておいてください。JavaScriptがHTMLのどの部分を特定して操作するのかというイメージを持つために、HTMLのツリー構造（親要素、子要素の関係）についても基本的な概念を振り返っておくと、次回の理解がスムーズになります。
4	プロジェクト準備と要素の取得	科目の中での位置付け	本授業は、第2部「基本文法とDOM操作」の第1回目にあたり、Web制作におけるJavaScriptの実践的な利用を開始する重要な転換点です。これまでの第1部で習得した開発環境と基礎知識を基盤とし、実際に機能するWebアプリケーション「カラーピッカー」の構築に着手します。本コマでは、適切なプロジェクト構成の構築手法と、HTMLドキュメントとJavaScriptプログラムを接続するための最も基本的な技術であるDOM要素の取得方法を確立し、以降の動的なWebページ制御への土台を築きます。
		コマ主題細目	① Webアプリケーション開発におけるプロジェクト構成と機能仕様の理解 ② ブラウザのレンダリング機構とスクリプト読み込みの最適化 ③ Document Object Modelの概念とquerySelectorによる要素取得
		細目レベル	① 本主題では、これから作成する「カラーピッカー」というWebアプリケーションの全体像を把握し、開発に必要なファイル群を適切に管理するためのディレクトリ構成を構築します。まず、Webデザインの現場で頻繁に使用されるカラーピッカーがどのような機能を持つツールであるかを分析します。具体的には、ユーザーが直感的に色を選択できるインターフェース、選択された色のRGB値やカラーコードの取得、そして背景色の動的な変更といった一連の動作仕様を確認します。これらの機能は、静的なHTMLとCSSだけでは実現不可能であり、JavaScriptによる動的な制御が必要不可欠であることを理解させます。次に、開発プロジェクトにおけるファイル管理の重要性について解説します。Java開発におけるパッケージ構成と同様に、Web開発においてもリソースを適切に分類・整理することは、保守性や拡張性を高める上で極めて重要です。本授業では、プロジェクトのルートディレクトリを作成し、その直下にHTMLファイルを配置するとともに、スタイルシートを格納する「css」ディレクトリと、スクリプトファイルを格納する「js」ディレクトリをそれぞれ独立して作成します。このように役割ごとにファイルを物理的に分割することで、コードの見通しを良くし、将来的な修正や機能追加に強い構造を作る習慣を身につけさせます。さらに、ベースとなるHTML構造とCSSスタイルを適用し、アプリケーションの骨格となるユーザーインターフェース（UI）を準備します。ここでは、`＜input type="color"＞`というHTML5の機能を利用して、ブラウザ標準のカラーパレットを呼び出す仕組みについても触れます。最後に、作成したJavaScriptファイルがHTMLから正しく読み込まれているかを確認するために、コンソールへのログ出力を実施します。これは、Javaにおける「Hello World」的な導通確認と同様であり、開発の初期段階で環境的な問題を排除するための定石的な手順です。学生には、単にコードを記述するだけでなく、アプリケーションの完成形をイメージしながら、論理的なファイル構成を設計する能力を涵養します。この細目で理解すべき範囲は、演習用プロジェクトのディレクトリ構成を完了し、各ファイルの役割と仕様を把握するまで。
			② 本主題では、WebブラウザがHTML文書を解析し、画面を描画するプロセス（レンダリング）と、JavaScriptファイルの読み込み・実行タイミングの関係性について詳説します。従来、`＜script＞`タグはHTMLの`＜body＞`タグの閉じる直前に記述することが推奨されていました。これは、ブラウザがHTMLを上から順に解析（パース）する際、`＜script＞`タグに遭遇すると解析を一時中断し、スクリプトのダウンロードと実行を優先してしまうという同期的な挙動に起因します。HTMLの解析が完了していない段階でJavaScriptが実行されると、操作対象となるHTML要素がまだ存在しないため、プログラムがエラーを起こす可能性があります。また、スクリプトの処理に時間がかかるとページの表示自体が遅延し、ユーザー体験（UX）を損なう原因となります。これらの問題を解決するための現代的な手法として、本授業では`＜script＞`タグの`defer`属性について深く掘り下げます。`defer`属性を付与することで、ブラウザはHTMLの解析を中断することなく、バックグラウンドで並行してJavaScriptファイルをダウンロードします（非同期処理）。そして、HTMLの解析が完全に終了し、DOMツリーの構築が完了した時点で初めてスクリプトを実行します。これにより、`＜head＞`タグ内にスクリプトの読み込み記述をまとめつつ、ページの表示速度を向上させ、かつDOM要素への安全なアクセスを保証することが可能になります。非同期処理の効率性の説明を解釈し、シングルスレッドで動作するブラウザのメインスレッドをブロックしないことの重要性を理解させます。Javaのようなコンパイル言語とは異なり、Webブラウザという実行環境の特性に合わせたリソース読み込みの制御が必要であることを強調します。学生には、同期処理と非同期処理の違いを意識させ、Webパフォーマンスを考慮した適切なスクリプト読み込みの実装能力を養います。この細目で理解すべき範囲は、defer属性を用いたスクリプト読み込みの仕組みとメリットを理解し、正しく実装できるまで。
			③ 本主題では、JavaScriptを用いてWebページ上の要素を操作するための核心的な概念であるDOM（Document Object Model）と、その具体的なアクセス手法について解説します。DOMとは、HTML文書の構造をプログラムから操作可能なオブジェクトのツリー構造として表現したものです。Java言語においてクラスからインスタンスを生成してメソッドを呼び出すのと同様に、JavaScriptではWebページ上のあらゆる要素（タグ、属性、テキストなど）をオブジェクトとして扱います。ブラウザはHTMLを読み込むと、これを解析して「document」オブジェクトを頂点とするDOMツリーをメモリ上に展開します。開発者はこのdocumentオブジェクトを通じて、ページ内の特定の要素を検索し、取得し、操作することが可能になります。本授業では、特定の要素を取得するための標準的なメソッドである`querySelector`の使い方を重点的に扱います。`querySelector`は、引数にCSSセレクタと同じ形式の文字列を指定することで、条件に一致する最初の要素を取得します。例えば、HTML側で`＜input id="colorPicker"＞`のようにID属性が付与された要素に対し、JavaScript側では`document.querySelector('#colorPicker')`と記述してアクセスします。この記述方法は、Webデザインを学ぶ学生にとって馴染み深いCSSの記法（IDセレクタの`#`やクラスセレクタの`.`）をそのまま活用できるため、直感的で強力な手段となります。取得した要素は一つのオブジェクトとして変数（定数）に格納され、以降はその変数を経由して要素のプロパティを読み取ったり、変更したりすることができます。授業内では、実際に取得した要素を`console.log`を用いてブラウザのコンソールに出力し、HTMLのタグがJavaScript上ではどのようなオブジェクトとして認識されているかを確認させます。これにより、静的なテキストデータであるHTMLが、JavaScriptによって動的に操作可能な「物（オブジェクト）」へと変換されるプロセスを実感させます。Javaのオブジェクト指向の知識と関連付けながら、Web固有のAPIであるDOM操作の基礎を確実に習得させます。この細目で理解すべき範囲は、querySelectorを用いて任意のHTML要素を取得し、コンソールで確認できるまで。
		キーワード	① DOM ② querySelector ③ defer属性 ④ 非同期処理 ⑤ API
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で構築したプロジェクトのディレクトリ構造を再度確認し、なぜHTML、CSS、JavaScriptを別々のファイル・フォルダに分ける必要があるのか、そのメリットを整理してください。また、`defer`属性を外した場合や、スクリプトの読み込み位置を変えた場合に、ブラウザの挙動やコンソールへの出力結果がどのように変化するかを実際に試し、HTML解析とスクリプト実行のタイミングの関係性について考察してください。さらに、`querySelector`を使って、ID以外のセレクタ（タグ名など）で要素を取得するコードを書き、意図した要素が取得できているかコンソールで確認する実験を行ってください。 ◆次回授業の予習次回の授業では、取得したDOM要素に対して具体的な操作を行っていきます。特に、要素内のテキストを書き換える処理や、DOMツリーの親子関係といった構造的な概念について学びます。そのため、HTMLタグが入れ子構造（ツリー構造）になっていることの意味を再確認しておいてください。また、プログラミングにおける「文字列」の扱いや、変数に格納されたオブジェクトのプロパティにアクセスする基本的な記法（ドット記法など）について、Javaでの知識を振り返りつつ、JavaScriptではどのように記述されそうか、思考を巡らせておくとスムーズに理解が進みます。テキストの該当範囲の図解を眺めておくことも有効です。
5	テキスト操作とDOMの概念	科目の中での位置付け	本授業は、Webデザインを制御するためのJavaScript習得を目指す全30回コースの第5回にあたります。前回までに開発環境の構築と、`querySelector`を用いたHTML要素の取得方法を学びました。今回は、取得した要素に対して実際に変更を加える「DOM操作」の第一歩を踏み出します。Webページ上のテキストを動的に書き換える手法や、ブラウザがWebページをどのように認識しているかというDOM（Document Object Model）の概念、そして効率的な文字列操作手法を理解することで、次回のイベント処理やスタイル操作へ向けた強固な基盤を築きます。
		コマ主題細目	① textContentプロパティを用いたテキストの取得と書き換え ② DOM（Document Object Model）の構造とオブジェクト指向的階層 ③ テンプレート文字列（テンプレートリテラル）による文字列操作
		細目レベル	① 前回の授業では、`document.querySelector`メソッドを使用してHTML要素をJavaScript側で取得する方法を学びました。しかし、要素を取得しただけではWebページに変化は起きません。本細目では、取得した要素に対して具体的な操作を行い、ページ上の表示を変化させる方法を解説します。具体的には、テキストで扱われている`textContent`プロパティに焦点を当てます。皆さんはJavaの学習を通じて、オブジェクトが「フィールド（属性）」と「メソッド（操作）」を持つことを理解しているはずです。JavaScriptにおいて、HTML要素は一つのオブジェクトとして扱われ、そのタグに挟まれたテキスト内容は`textContent`というプロパティ（Javaでいうフィールド）に格納されています。授業ではまず、前回作成したカラーピッカーのプロジェクトを使用し、ID名`colorText`を持つp要素（「カラーコードを検索」と書かれている部分）をターゲットにします。コンソールを用いて、`document.querySelector('#colorText').textContent`と記述し、現在のテキスト内容が取得（Get）できることを確認します。次に、このプロパティに対して新しい文字列を代入（Set）することで、ブラウザ上の表示が即座に書き換わる様子を実践します。例えば、`document.querySelector('#colorText').textContent = '色を選んでください';`と記述して実行すると、HTMLファイルを直接編集してリロードすることなく、JavaScriptによって動的に表示が変更されます。これはWebアプリケーションにおけるUI更新の基本原理です。ここで重要なのは、代入演算子`=`を用いた書き換えの挙動です。JavaScriptでは、DOM要素のプロパティに値を代入することで、ブラウザのレンダリングエンジンに対して表示の更新を指示することになります。学生には、単にコードを書くだけでなく、「要素を取得する」→「プロパティにアクセスする」→「値を代入する」という一連のプロセスが、オブジェクト指向プログラミングにおけるメンバ変数へのアクセスと同じ感覚であることを理解させます。また、`textContent`は純粋なテキストのみを扱い、HTMLタグを含めてもエスケープ（そのまま文字として表示）される点についても触れ、セキュリティ（XSS対策）の観点からも基本的なテキスト操作にはこのプロパティが推奨されることを説明します。この細目で理解すべき範囲は、`textContent`プロパティを使用して、特定のHTML要素内のテキスト情報を参照し、任意の文字列に書き換えることができる状態になるまで。
			② テキストの書き換えを通じてJavaScriptによるHTML操作の一端に触れたところで、その裏側にある仕組みであるDOM（Document Object Model）について、テキストに基づき学術的に解説します。DOMとは、HTML文書をオブジェクトのツリー構造として表現するAPI（Application Programming Interface）のことです。WebブラウザはHTMLファイルを読み込むと、タグの一つひとつを「オブジェクト」としてメモリ上に展開し、それらを親子関係に基づいた木構造（ツリー構造）として構築します。これをDOMツリーと呼びます。授業では、このツリー構造の最上位に位置する`window`オブジェクトと、その配下にある`document`オブジェクトの関係性を詳説します。皆さんがこれまでの授業で何気なく記述してきた`document.querySelector`の`document`とは、まさにWebページ全体（HTML文書）を管理するオブジェクトそのものを指しています。さらにその下に`html`要素があり、その中に`head`要素と`body`要素が含まれ、さらにその子要素として`div`や`p`が存在するという階層構造を、テキストの図解を参照しながら視覚的に理解させます。Javaのクラス継承やパッケージ階層とは異なり、これはインスタンス化されたオブジェクト同士の所有関係（コンポジション）に近い構造です。また、JavaScriptにおける「オブジェクト」の定義についても再確認します。JavaScriptのオブジェクトは「プロパティ（特徴・状態）」と「メソッド（動作・機能）」の集合体です。例えば、先ほど扱った`textContent`はプロパティであり、`alert()`や`querySelector()`はメソッドです。DOMを理解することは、JavaScriptがWebブラウザという環境（ホスト環境）から提供されるAPI（プロパティやメソッド群）をどのように利用して画面を操作するかを理解することと同義です。この概念を掴むことで、単なる構文の暗記ではなく、「ブラウザが提供する機能の地図」を読み解く力が養われます。授業内では、`window.alert`の`window`が省略可能であることや、グローバルスコープの変数が`window`オブジェクトのプロパティとして扱われることなど、ブラウザ環境特有の挙動についても触れ、DOMという概念を包括的に把握させます。この細目で理解すべき範囲は、HTML文書がDOMツリーとして解釈される構造を理解し、オブジェクト、プロパティ、メソッドの関係性をDOMの観点から説明できるまで。
			③ DOM操作によってWebページの表示を動的に変更できるようになった今、次に必要となるのは「表示させる文字列を効率的に作成する技術」です。Web開発では、固定のメッセージの一部に、変数に格納された動的な値（例えばユーザーの名前や、計算された数値、今回で言えば選択されたカラーコードなど）を埋め込んで表示する場面が頻繁に発生します。本細目では、テキストで紹介されている「テンプレート文字列（テンプレートリテラル）」について詳説し、その利便性と記述方法を習得させます。まず、従来の方法（ES5以前）であるプラス演算子`+`を用いた文字列連結の問題点を提示します。例えば、「カラーコードは #ffffff です」と表示したい場合、`'カラーコードは ' + colorCode + ' です'`のように記述する必要がありました。この方法では、引用符（シングルクォーテーションやダブルクォーテーション）の閉じ忘れや、スペースの入れ忘れといったミスが多発しやすく、コードの可読性も著しく低下します。特にHTMLタグを含む長い文字列を生成する場合、その煩雑さは顕著になります。これに対し、ES6（ECMAScript 2015）から導入されたテンプレート文字列は、バッククォート（` ` `）で文字列全体を囲み、その中に`${変数名}`という形式で変数を直接埋め込むことができます。授業では、バッククォートの入力方法（JIS配列キーボードでのShift+@など）から丁寧に指導し、実際にカラーピッカーの演習コードを用いて実践します。具体的には、取得したカラーコードの値を表示する際に、`text.textContent = \`カラーコード：\${color.value}\`;`のように記述し、変数の値が文字列内に展開される様子を確認します。Javaにおける`String.format`や`System.out.printf`に近い概念ですが、より直感的かつ簡潔に記述できる点がJavaScriptの強みです。また、テンプレート文字列内では改行がそのまま反映される点など、可読性向上以外のメリットについても触れます。この技術は、今後の授業でHTMLタグを動的に生成したり、複雑なメッセージを表示したりする際に必須となるため、確実に習得させます。この細目で理解すべき範囲は、バッククォートを用いたテンプレート文字列の構文を理解し、変数を埋め込んだ文字列を生成してDOM要素に反映できるまで。
		キーワード	① textContent ② DOM (Document Object Model) ③ プロパティ ④ テンプレート文字列 ⑤ ツリー構造
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだ`textContent`プロパティを使用して、HTML内の任意の要素のテキストを書き換える実験を行ってください。その際、バッククォートを使用したテンプレート文字列を活用し、自分の名前や好きな言葉を変数に入れて、それを文章の中に埋め込んで表示させてみましょう。また、ブラウザの検証ツール（デベロッパーツール）でDOMツリーを確認し、HTMLタグの階層構造がJavaScriptからどのように見えるかを再確認してください。 ◆次回授業の予習次回の授業では、プログラム内で値を保持し続けるための「定数」と、ユーザーの操作（クリックや入力など）を検知する「イベントリスナー」について学びます。これらはWebページにインタラクティブな機能を持たせるための核心部分です。これまでに学んだ変数の概念を思い出しながら、値が変わらない変数（定数）の使い所について想像しておいてください。また、普段使っているWebサイトで、どのような操作をしたときに画面が変化するか意識して観察しておきましょう。
6	定数とイベントリスナー	科目の中での位置付け	本授業は、Web制作におけるJavaScriptプログラミングの基礎を確立する第2部の中核に位置します。これまでに学習したDOM操作の手法をより効率的かつ実践的なコードへと昇華させ、静的なWebページをユーザーの操作に応じて動的に変化させるための「イベント処理」の概念を導入します。これは、単なるスクリプト記述から、インタラクティブなWebアプリケーション開発へと踏み出すための重要な転換点となります。
		コマ主題細目	① 定数によるDOM要素の管理とコードの最適化 ② イベント駆動型プログラミングとaddEventListenerの概念 ③ 入力イベントの検知と動作確認
		細目レベル	① 本細目では、前回の授業で学習したDOM操作を基礎とし、取得したHTML要素をJavaScriptコード内で効率的に扱うための手法として、定数（const）の利用法について詳しく解説します。まず、document.querySelectorメソッドを用いてHTML要素を取得する際、その都度メソッドを記述してDOMツリーを探索することは、コードの記述量が肥大化するだけでなく、ブラウザの処理負荷の観点からも非効率であることを学生に認識させます。Javaなどの静的型付け言語における変数宣言の知識を持つ学生に対し、JavaScriptにおける変数宣言の種類（var、let、const）の違いを簡潔に触れつつ、現代のJavaScript開発においては、再代入の必要がない限り「const」を使用することが標準的なプラクティスであることを説明します。特に、DOM要素への参照はプログラムの実行中に変更されることが稀であるため、constを用いて定数として宣言し、そこに取得した要素オブジェクトへの参照を格納するという設計思想を理解させます。これはJavaにおけるfinal修飾子を付与したオブジェクト参照変数に近い概念であり、参照先のオブジェクト自体（HTML要素のプロパティなど）は変更可能であるが、変数が指し示す参照先そのものは変更されないという点を明確にします。授業では、テキストの題材において、色を選択するinput要素やテキストを表示するp要素などを取得し、それぞれわかりやすい名前（識別子）を付けた定数に格納するコーディングを実践します。このプロセスを通じて、コードの可読性が向上し、後続の処理で要素を再利用しやすくなるというメリットを体感させます。また、定数名の命名規則についても触れ、キャメルケースなどの一般的な規約に従いつつ、その要素が何を表しているかが一目でわかるような名称を付けることの重要性を説きます。最終的に、適切な要素取得と定数定義が、堅牢なアプリケーション構築の第一歩であることを学習します。この細目で理解すべき範囲は、document.querySelectorで取得したDOM要素をconstを用いて定数に格納し、コード内で再利用可能な状態にする記述方法まで。
			② 本細目では、Webアプリケーションにおけるプログラミングの核心である「イベント駆動（イベントドリブン）」の概念と、それを実装するためのaddEventListenerメソッドについて詳説します。学生はこれまで、プログラムが上から下へと順次実行される手続き型の手法に慣れ親しんでいますが、GUIを持つWebアプリケーションでは、ユーザーのアクション（クリック、キー入力、マウス移動など）が発生するまでプログラムが待機し、特定のアクション（イベント）が発生した瞬間に予め登録された処理が実行されるという非同期的な挙動が基本となることを説明します。この仕組みを実現するために、JavaScriptが提供するEventTargetインターフェースのメソッドであるaddEventListenerの構文と役割について、論理的に解説を進めます。具体的には、このメソッドが「どの要素が（対象オブジェクト）」、「どのような操作をされた時に（イベントタイプ）」、「何を実行するか（イベントリスナー/コールバック関数）」という3つの要素で構成されていることを理解させます。JavaのSwingやAWTにおけるイベントリスナーの登録と概念的に類似していることを示唆しつつ、Webブラウザ特有のイベントの種類について概観します。特に、第1引数に指定するイベントタイプ（'click'や'input'など）は文字列で指定する必要がある点や、第2引数には実行したい処理そのもの（関数）を渡すという高階関数の概念が含まれている点に注意を促します。ここでは、関数の詳細な定義方法については次回の授業で扱うため、あくまで「処理の塊を渡す場所」としての第2引数の役割を構造的に理解させることに重点を置きます。また、HTMLタグ内に直接onclick属性などを記述する古い手法と、addEventListenerを使用する現代的な手法を比較し、HTML（構造）とJavaScript（振る舞い）を分離することの保守性における優位性についても言及します。これにより、学生はイベントリスナーがWebページにインタラクティブな生命を吹き込むための「監視役」であることを概念的に習得します。この細目で理解すべき範囲は、イベント駆動型の処理フローを理解し、addEventListenerメソッドの基本的な構文構造と引数の役割を把握するところまで。
			③ 本細目では、前項までに定義した定数と学習したaddEventListenerメソッドを組み合わせ、実際に色情報取得の動作を制御するコードを実装します。具体的には、ユーザーがマウス（input type="color"）を操作して色を変更した際に発生するイベントを検知し、その反応として何らかの処理を実行させる仕組みを構築します。まず、対象となるイベントタイプとして、値が確定した時に発生する'change'イベントと、操作中にリアルタイムで発生する'input'イベントの違いについて解説し、ユーザーに対して即座にフィードバックを返すインタラクティブなUIにおいては'input'イベントが適していることを説明します。授業では、先に取得しておいたカラーピッカーの要素（定数）に対してaddEventListenerを設定し、第1引数に'input'を指定します。第2引数の処理部分については、現段階では複雑なロジックを組むのではなく、ブラウザのコンソール機能（console.log）を用いて、イベントが正しく発火しているかを確認する単純な処理を記述させます。これにより、ユーザーがマウスで色を選んでいる最中に、コンソール画面に連続してログが出力される様子を観察させ、イベントリスナーがバックグラウンドでユーザーの操作を絶えず監視し続けていることを視覚的に実証します。また、イベント発生時に取得できる情報として、input要素のvalueプロパティを参照することで、現在選択されているカラーコード（16進数文字列）が取得できることを確認します。この演習を通じて、Javaなどのコンソールアプリケーションとは異なり、Webフロントエンド開発では「要素の取得」「イベントの監視」「プロパティの参照」という一連の流れがセットになって機能が実装されることを体系的に理解させます。さらに、記述したコードが正しく動作しない場合のデバッグ手法として、ブラウザのデベロッパーツールを活用し、エラーメッセージの有無やコンソール出力の内容を確認する習慣も定着させます。この実践的なコーディングを通じて、学生は静的なHTML要素がJavaScriptによって動的なインターフェースへと変化する過程を体験します。この細目で理解すべき範囲は、input要素に対してinputイベントリスナーを設定し、操作に応じてコンソールに値を出力して動作確認ができるところまで。
		キーワード	① 定数 ② イベント ③ イベントリスナー ④ addEventListener ⑤ inputイベント
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で作成したコードを見直し、なぜDOM要素を定数に格納する必要があるのか、そのメリットを整理してください。また、addEventListenerの構文を再確認し、第1引数に指定できるイベントタイプには'input'以外にどのようなものがあるか（例：'click', 'change', 'mouseover'など）、インターネット上のリファレンス等を用いて調べ、それぞれのイベントがどのようなユーザー操作に対応しているかを確認してください。 ◆次回授業の予習次回の授業では、イベント発生時に実行させる具体的な処理を記述するために「関数」について詳しく学びます。プログラミングにおける関数の一般的な役割（処理のまとまり、再利用性）について整理しておいてください。また、JavaScriptにおける関数の定義方法にはいくつかの種類があるため、基本的な「function」キーワードを使った記述や、より現代的な「アロー関数」という記述方法が存在することについて、概要を把握しておくとスムーズに理解できます。
7	関数の基礎と実装	科目の中での位置付け	本授業は、第2部「基本文法とDOM操作」の後半に位置し、これまで学習した要素の取得や書き換えといった個別の処理を、再利用可能な「機能」としてまとめる重要な転換点である。JavaBronzeレベルの知識を持つ学生に対し、Javaのメソッドとは異なるJavaScript特有の関数定義（アロー関数）や、オブジェクトとしての関数の扱い方を定着させる。次回以降の条件分岐やスタイル操作を行うための土台となるロジック構築の基礎を確立する回である。
		コマ主題細目	① アロー関数の構文と定義方法 ② 色情報の値取得ロジックの実装 ③ 関数の実行タイミングとイベント連携
		細目レベル	① 本細目では、現代のJavaScript開発において標準的に使用される「アロー関数」の定義方法とその構文構造について詳説する。学生は既にJavaにおけるメソッド定義（戻り値の型、メソッド名、引数リスト）を理解しているが、JavaScriptにおける関数は「値」として変数や定数に代入可能であるという言語的な特性を理解させる必要がある。具体的には、従来の`function`キーワードを用いた宣言ではなく、`const`を用いて定数に関数を代入する関数式の記述方法（`const 関数名 = () =＞ { 処理 };`）を導入する。この際、`()`が引数リスト、`=＞`がアロー（矢印）、`{}`が処理ブロックを表すという構文の各要素を分解して解説し、視覚的な構造理解を促す。また、関数を定数として宣言することの意義について、関数の中身が意図せず再代入されることを防ぎ、堅牢なコードを記述するための作法であることを強調する。Javaのメソッドはクラスに属する手続きであるのに対し、JavaScriptのアロー関数は、それ自体がオブジェクトとして扱われ、データのように受け渡しが可能である点についても触れ、言語パラダイムの違いを意識させる。さらに、テキストに基づき、処理を関数化することのメリットとして、「複数の処理をひとつにまとめること」や「任意のタイミングで呼び出し可能になること」を挙げ、コードの可読性と再利用性が向上することを理解させる。授業内では、実際に「colorBg」という名前の関数を定義し、その枠組みを作成するプロセスを実践させることで、構文の定着を図る。この細目で理解すべき範囲は、アロー関数を用いた関数の定義構文を理解し、定数として関数を宣言する意味と構造を正しく記述できるまで。
			② 本細目では、定義した関数内部における具体的な処理ロジックの構築方法について解説する。前回の授業までに学習したDOM操作の知識を活用し、HTML上のカラーピッカー要素（input type="color"）から、ユーザーが選択した色の値を取得する一連の手続きを関数内に実装する。ここでは、`document.querySelector`メソッドを用いてHTML要素をオブジェクトとしてJavaScript側に取り込む手順を再確認し、取得した要素オブジェクトが持つプロパティへのアクセス方法を詳説する。特に、テキスト情報を取得する際の`textContent`プロパティと異なり、フォーム要素（inputタグ）に入力・選択された値を取得する際には`value`プロパティを使用しなければならないという点を強調し、HTML要素の種類に応じた適切なプロパティ選択の能力を涵養する。具体的には、関数`colorBg`のブロック内部において、定数`color`に色情報の要素を格納し、その`color.value`を参照することで16進数のカラーコード（例: #ffffff）が取得できる挙動を確認させる。Javaの静的型付けとは異なり、JavaScriptでは取得した値が自動的に文字列型として扱われる点にも触れ、データ型の扱いに関する注意点を喚起する。また、コンソールログを用いて取得した値を逐次出力させながら実装を進めることで、コードが意図通りに動作しているかを確認するデバッグの習慣を定着させる。この実装プロセスを通じて、単にコードを書き写すのではなく、「要素の取得」から「値の抽出」に至るデータの流れを論理的に組み立てる力を養う。この細目で理解すべき範囲は、関数内部でDOM要素を取得し、input要素特有のvalueプロパティを用いてユーザーの入力値を正しく取り出せるまで。
			③ 本細目では、定義した関数を実際に動作させるための「実行（呼び出し）」と、ユーザー操作に応じた「イベント連携」の仕組みについて解説する。関数は定義しただけでは実行されず、明示的に呼び出す必要があることを、Javaのメソッド呼び出しの知識と関連付けながら説明する。まず、コンソール上で`関数名()`と記述して実行し、定義したロジックが正しく動作するかをテストする手法を実践させる。これにより、関数の「定義」と「実行」が明確に分離された概念であることを理解させる。次に、Webアプリケーションにおける実践的な関数の利用方法として、イベントリスナーとの連携を詳説する。前回の授業で扱った`addEventListener`メソッドの第二引数として、今回作成した関数`colorBg`を渡すことで、ユーザーがカラーピッカーを操作したタイミング（inputイベント）で関数が自動的に実行される仕組みを構築する。ここで重要となるのが、引数として関数を渡す際に`()`を付けずに関数名のみを記述するというJavaScript特有のルールである。`()`を付けるとその場で関数が即時実行されてしまい、イベント発生時に動作しないという初学者が陥りやすいミスを指摘し、関数オブジェクトそのものを渡す（コールバック関数）という概念を定着させる。これにより、静的なJavaプログラムとは異なる、ユーザーのアクションをトリガーとするイベント駆動型プログラミングの基礎的な制御フローを完全に理解させる。この細目で理解すべき範囲は、関数の明示的な呼び出し方法を習得し、イベントリスナーに関数を正しく登録してユーザー操作と連動させることができるまで。
		キーワード	① アロー関数 ② 関数式 ③ valueプロパティ ④ コールバック関数 ⑤ inputイベント
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習授業内で作成した関数のコードを見直し、アロー関数の構文（`() =＞ {}`）を何も見ずに記述できるか確認すること。また、input要素の値を`value`プロパティで取得する際の流れを整理し、なぜ`textContent`では取得できないのか、その理由をフォーム要素の特性と照らし合わせて言語化できるようにしておくこと。 ◆次回授業の予習次回の授業では、取得した色の値を使ってWebページの背景色を実際に変更する処理を実装するため、CSSにおける`background-color`プロパティの役割について確認しておくこと。また、条件によって処理を分岐させる`if`文の基本的な構文について、既習のプログラミング知識（Java等）をもとに思い出し、論理構造を整理しておくこと。
8	スタイルの操作と条件分岐	科目の中での位置付け	本授業は、第2部「基本文法とDOM操作」の最終回に位置し、これまで学習した変数の宣言、DOM要素の取得、関数の定義といった基礎知識を統合する重要な局面です。今回は、Webデザインの核となる「見た目の動的な変化」をJavaScriptで制御する方法と、プログラムに判断能力を持たせる「条件分岐」を学びます。これにより、ユーザーの操作に応じて画面の配色や表示内容が変化する、インタラクティブな制御を完成させ、次部以降のイベント処理へと繋げる架け橋となります。
		コマ主題細目	① JavaScriptによるCSSスタイルの操作とプロパティの規則 ② if文を用いた条件分岐と厳密等価演算子の活用 ③ ロジックの統合による動的なテキスト表示の実装
		細目レベル	① 本細目では、JavaScriptを用いてHTML要素のCSSスタイルを動的に変更する手法について詳説します。Web制作において、静的なCSSファイルだけでは実現できない、ユーザーの操作に即座に反応するデザイン変更は非常に重要です。具体的には、DOM操作を通じて取得した要素の`style`プロパティにアクセスし、値を代入することでスタイルを書き換えるプロセスを学習します。テキストの事例では、ユーザーが選択した色の値を、Webページ全体の背景色として適用する機能を実装します。ここで学生が特に注意すべき点は、CSSのプロパティ名とJavaScriptにおけるプロパティ名の記述規則の違いです。CSSでは「background-color」のようにハイフン（ケバブケース）で記述されるプロパティは、JavaScriptでは「backgroundColor」のようにキャメルケース（単語の先頭を大文字にする記法）に変換して記述する必要があります。この規則は、ハイフンがJavaScriptにおいてマイナス記号（減算演算子）として解釈されることを防ぐための言語仕様上のルールです。授業では、`document.body.style.backgroundColor`という具体的なコード例を用い、`body`要素の背景色に対して、カラーピッカーから取得した値を代入する流れを解説します。また、この操作がブラウザー上でどのように処理されているかを理解させることも重要です。JavaScriptによってスタイルが変更されると、HTMLのタグ内にインラインスタイル（style属性）として値が書き込まれます。これはCSSファイルでの記述よりも優先度が高くなるため、即座に画面上の表示が切り替わります。学生には、Javaなどのコンパイル言語とは異なり、スクリプトの実行が即座にブラウザーのレンダリングエンジンに反映されるインタプリタ言語特有の挙動を認識させます。この段階で、単に色が変えられるだけでなく、フォントサイズや表示・非表示など、あらゆるCSSプロパティが同様の規則で操作可能であるという応用的な視点も涵養します。この細目で理解すべき範囲は、DOMのstyleプロパティへのアクセス方法、ケバブケースからキャメルケースへの変換規則、および背景色変更の具体的な実装コードまで。
			② 本細目では、プログラムに判断能力を持たせ、状況に応じて処理を分岐させるための制御構造であるif文について解説します。学生は既にJava Bronze範囲の知識を有しているため、if文の基本的な概念や論理構造（真偽値による判定）については既知のものとして扱いますが、JavaScript特有の記述作法や比較演算子の挙動に焦点を当てて指導を行います。具体的には、カラーピッカーで選択された色が特定の色（白または黒）であった場合に、表示するテキストの内容を変更するという要件を満たすためのロジックを構築します。 JavaScriptにおける条件分岐で特に強調すべき点は、比較演算子「===」（厳密等価演算子）の使用です。Javaなどの静的型付け言語とは異なり、JavaScriptは動的型付け言語であるため、変数の型が柔軟に変化します。そのため、単なる等価演算子「==」を使用すると、意図しない型変換が行われ、バグの温床となる可能性があります。本授業では、値だけでなく型まで厳密に比較する「===」を使用することが、堅牢なWebアプリケーション開発におけるベストプラクティスであることを学術的な観点から説明します。テキストの事例に即し、具体的な実装としては、カラー要素の値が「#ffffff」（白）の場合と、「#000000」（黒）の場合、そしてそれ以外の場合という3つのパターンに分岐させます。`if`、`else if`、`else`を用いた構文を記述し、それぞれのブロック内でどのような処理が行われるかを整理します。ここでは、条件式の中に記述するカラーコードが文字列（String）として扱われるため、シングルクォーテーションで囲む必要がある点など、シンタックスの細部にも注意を向けさせます。また、条件分岐はプログラムの流れ（フロー）を制御するものであり、上から順に条件が評価され、最初に合致したブロックのみが実行されるという基本的な実行順序についても、コードの可読性と効率性の観点から再確認を促します。この論理的な思考プロセスは、単なる文法の暗記ではなく、アルゴリズム構築能力の基礎となります。この細目で理解すべき範囲は、JavaScriptにおけるif文の構文、厳密等価演算子（===）の重要性、および複数条件（else if）を用いた分岐ロジックの構築まで。
			③ 本細目では、これまでに学習したDOM操作によるテキストの書き換え、スタイルの変更、そして条件分岐のロジックを一つの関数内に統合し、機能的なカラーピッカーを完成させる工程を実践します。プログラミングにおいて、個々の要素技術を理解するだけでなく、それらを組み合わせて意味のあるアプリケーションとして動作させる構成力が求められます。ここでは、ユーザーが色を選択した瞬間に、背景色が変わり、同時にその色のコードと条件に応じた補足情報（(white)や(black)など）が画面に表示される一連の流れを実装します。授業の進行としては、まず前回の授業で作成した関数の内部に、今回学んだ背景色変更のコードとif文による条件分岐のコードを適切な順序で記述していきます。具体的には、まず取得した色の値を背景色に反映させ、その直後にif文を用いて色の値を判定し、対象のHTML要素（pタグなど）の`textContent`プロパティを書き換えるという手順を踏みます。この際、テンプレート文字列（バッククォートを用いた記法）を活用し、条件分岐の中で変数と文字列を連結して表示内容を生成する方法についても復習を兼ねて実践します。例えば、白が選択された場合には「カラーコード: #ffffff (white)」のように、動的な値と静的な文字列を組み合わせた出力を生成します。学生には、コードを書く順序と処理の依存関係について深く理解させます。関数が呼び出されたときに、どのような順序でデータが処理され、最終的にユーザーの目に触れるUI（ユーザーインターフェース）として出力されるのか、そのデータフローを意識させることが重要です。また、これによって実現される「ユーザーの操作に対する即座のフィードバック」が、Webデザインにおけるユーザー体験（UX）の向上にどれほど寄与するかという観点についても触れます。単に機能要件を満たすだけでなく、使いやすく分かりやすいWebサイトを作るための技術的基盤としてJavaScriptを活用する姿勢を養います。最終的に、完成したコードがエラーなく動作し、全ての条件分岐が正しく機能することをデベロッパーツールのコンソール等を用いて検証する習慣も身につけさせます。この細目で理解すべき範囲は、スタイル操作と条件分岐を組み合わせた関数の実装、テンプレート文字列による出力の制御、および完成した機能の動作確認まで。
		キーワード	① styleプロパティ ② backgroundColor ③ if文 ④ 厳密等価演算子 ⑤ テンプレート文字列
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱った、JavaScriptからCSSを操作する記述方法と、if文を用いた条件分岐の書き方について、手元の環境でコードを書き換えながら確認を行ってください。特に、CSSのプロパティ名がJavaScriptではキャメルケースになる規則や、厳密等価演算子を用いた比較の挙動は、実際に異なる値を代入して動作を試すことで理解が深まります。作成したカラーピッカーのコードを一部変更し、別の色を条件に加えるなどの実験を行うと効果的です。 ◆次回授業の予習次回の授業では、Webページ上でユーザーが行う様々な操作（クリックや読み込み完了など）をきっかけとしてプログラムを動かす「イベント処理」について学びます。Webブラウザーがユーザーのどのような操作を検知できるのか、一般的なWebサイトを見ながら想像しておいてください。また、これまでに作成した関数がどのようなタイミングで呼び出されるべきか、これまでの学習内容（関数の定義と呼び出し）を整理しておくと、スムーズに理解が進みます。
9	イベントの基礎とローディング画面の実装	科目の中での位置付け	本授業は、全30回のカリキュラムにおける第3部「イベント処理とUI実装」の導入回に位置付けられる。これまでの第2部では、JavaScriptによるDOM操作の基本や文法構造を学習したが、プログラムの実行タイミングは主にページ読み込み時や単純な関数呼び出しに限られていた。本回からは、ユーザーの操作やブラウザの状態変化をトリガーとする「イベント駆動型プログラミング」へと移行する。具体的には、Webサイト制作において必須となる「ローディング画面」の実装を通じて、イベントの概念とCSSクラスの動的な操作方法を習得し、静的なWebページから動的なWebアプリケーションへの架け橋となる重要な単元である。
		コマ主題細目	① イベント駆動型プログラミングの概念とロードイベント ② ローディング画面の構造設計とCSSによる表現 ③ クラス操作による表示状態の制御と実装
		細目レベル	① 本細目では、JavaScriptにおける「イベント」の概念と、その具体的利用法について体系的に解説する。これまでの授業で扱ったプログラムは、HTMLファイルが読み込まれた時点で上から順に実行される手続き的な処理が主であった。しかし、実際のWebデザインにおいては、「ボタンがクリックされたとき」「マウスが乗ったとき」「画面の読み込みが完了したとき」など、特定の事象（イベント）が発生したタイミングで処理を実行する必要がある。これをイベント駆動（イベントドリブン）型プログラミングと呼ぶ。学生はJavaの学習経験があるため、GUIプログラミングにおけるイベントリスナーの概念と類似していることを示唆しつつ、Webブラウザ特有の環境について詳説する。特に本回で焦点を当てるのは、Webページの表示プロセスに関わる「ロードイベント」である。WebページはHTML文書の解析、CSSの適用、画像やスクリプトなどの外部リソースの読み込みという段階を経て表示される。ローディング画面の実装においては、これらすべてのリソース（特に容量の大きな画像データなど）の読み込みが完了した時点を検知することが不可欠である。ここでは、`window`オブジェクトに対してイベントリスナーを設定し、`load`イベントを監視する手法を解説する。また、類似するイベントである`DOMContentLoaded`（HTMLの解析完了時点）との違いについても触れ、なぜローディング画面の制御には`load`イベントが適切なのかを、ブラウザのレンダリングプロセスの観点から論理的に説明する。さらに、`addEventListener`メソッドを用いたイベントハンドラの登録方法について、その構文（対象要素、イベントの種類、実行する関数）を詳細に解説し、無名関数やアロー関数を用いた記述パターンについても再確認を行う。これにより、学生は「いつ」「何を」実行するかという制御フローの基礎を確立する。この細目で理解すべき範囲は、イベント駆動の基本概念から、`load`イベントの特性および`addEventListener`を用いたイベント登録の記述方法まで。
			② 本細目では、JavaScriptで制御するための前提となるHTML構造とCSSによるスタイリングについて解説する。ローディング画面は、Webサイトのメインコンテンツが完全に読み込まれるまでの間、ユーザーに対して「処理中である」ことを視覚的に伝え、体感的な待ち時間を短縮させるUX（ユーザーエクスペリエンス）上の重要な要素である。まず、HTML構造として、メインコンテンツとは独立した「ローディング用レイヤー」を作成し、それを画面全体に覆い被せる手法を解説する。具体的には、`＜div＞`タグ等を用いてローディング画面用のコンテナを作成し、その中にロゴや進捗を示すアイコンなどを配置する構造を設計させる。次に、CSSを用いた配置とスタイリングについて詳説する。ローディング画面は、ページの内容量に関わらず常にブラウザウィンドウ全体（Viewport）を覆う必要があるため、`position: fixed`を用いた固定配置や、`width: 100vh`, `height: 100vh`といったViewport単位の指定方法を復習しつつ適用する。また、JavaScriptによる制御を見越したCSS設計の重要性についても言及する。後述するJavaScriptの処理では、ローディング完了時にこのレイヤーを非表示にするが、唐突に消滅させるのではなく、CSSの`transition`プロパティを用いて不透明度（`opacity`）や可視性（`visibility`）を徐々に変化させることで、スムーズな画面遷移を実現する手法を解説する。特に、単に`display: none`で消す場合と、`opacity`を操作する場合のアニメーション可否の違いについて理解を深めさせる。ここでは、初期状態としての「表示されているスタイル」と、読み込み完了後に適用される「非表示となるスタイル（クラス）」を明確に区別して定義することの重要性を説く。この段階ではまだJavaScriptは記述せず、静的なマークアップとスタイル定義を通じて、これから動かす対象（オブジェクト）を明確に定義する能力を養う。この細目で理解すべき範囲は、ローディング画面に必要なHTML構造の構築から、画面全体への固定配置およびアニメーションを考慮したCSSプロパティの設定まで。
			③ 本細目では、前段で設計したローディング画面に対して、JavaScriptを用いて実際に動的な制御を加える実装プロセスを詳説する。ここでは、JavaScriptからCSSを直接書き換えるのではなく、CSSクラスの着脱（追加・削除）を通じてスタイルを変更する手法を標準的なアプローチとして指導する。これは、構造（HTML）、表現（CSS）、振る舞い（JavaScript）の分離というWeb標準の原則に則った手法であり、保守性の高いコードを書くために不可欠な概念である。具体的には、`classList`プロパティとそのメソッドである`add()`の使用方法を中心に解説する。授業の進行としては、まず`document.querySelector`を用いてローディング画面の要素（HTML要素）を取得し、定数に格納する手順から開始する。次に、第一主題で学んだ`window`オブジェクトの`load`イベントリスナーの中に、取得した要素に対して特定のクラス（例：`.loaded`）を追加する処理を記述させる。このクラス`.loaded`には、CSS側で`opacity: 0`や`visibility: hidden`などが定義されており、クラスが付与された瞬間にCSSのトランジション機能が作動し、ローディング画面がフェードアウトするという仕組みである。この一連の流れ（イベント検知 → 要素取得 → クラス追加 → CSS変化）を論理的に理解させることが重要である。さらに、実習においては、単にコードを写すだけでなく、ブラウザのデベロッパーツールの「要素（Elements）」タブを用いて、ページの読み込み完了と同時にHTMLタグにクラス属性が動的に付与される様子を目視で確認させる。これにより、プログラムが正しく動作していることを客観的に検証するデバッグ能力も同時に涵養する。また、応用として、読み込みが一瞬で終わってしまいローディング画面が確認できない場合の対処法や、意図的な遅延処理の必要性についても補足的に触れることで、実制作における課題解決能力を高める。この細目で理解すべき範囲は、DOM要素の取得からclassListを用いたクラスの動的追加、およびそれによる画面遷移の完全な実装まで。
		キーワード	① イベントリスナー ② ロードイベント ③ classList ④ CSSトランジション ⑤ 非同期処理
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだ「イベント」と「クラス操作」の関係性を整理してください。特に、JavaScript側でスタイルを直接指定するのではなく、CSSクラスの付け替えによって見た目を変化させるメリットについて、保守性や可読性の観点から考察してください。また、`load`イベントが発火するタイミングと、HTML要素が解析されるタイミングの違いについて、自身の言葉で説明できるように整理しておくことを推奨します。 ◆次回授業の予習次回はボタン操作による「ダークモード」の実装を行います。今回学んだ`classList.add()`に加え、クラスを削除する`remove()`や、有無を切り替える`toggle()`メソッドについて、その機能と使い分けを調べておいてください。また、Webサイトにおける配色の切り替えがどのようなCSS変数の変更やクラス適用によって実現されているか、一般的なWebサイトの事例を観察し、仕組みを想像しておくと理解がスムーズになります。
10	クラス操作による動的変更	科目の中での位置付け	本授業は、全30回の第3部「イベント処理とUI実装」の第2回目に位置し、前回学んだイベント処理の基礎を応用的なユーザーインターフェース構築へと発展させる重要な段階です。現代のWebサイトやアプリケーションで標準的な機能となりつつある「ダークモード」の切り替え機能の実装を通じて、JavaScriptによるCSSクラスの動的な操作手法と、ユーザーの状態に応じた条件分岐処理の実践的なスキルを習得します。
		コマ主題細目	① イベントリスナーの設定と要素の取得 ② classListプロパティを用いたスタイルの動的変更 ③ 条件分岐によるテキストコンテンツの制御
		細目レベル	① 本細目では、Webページ上の特定の要素に対するユーザー操作を検知し、プログラムの実行を開始するための基盤を構築します。まず、HTML文書内に配置された切り替えボタンをJavaScriptから操作可能なオブジェクトとして取得する手順を解説します。Java言語におけるオブジェクトの参照と同様に、JavaScriptにおいてもDOM（Document Object Model）を通じてHTML要素をオブジェクトとして扱います。具体的には、documentオブジェクトが持つquerySelectorメソッドを使用し、HTML側で付与されたID属性をキーとして要素を特定します。この際、取得した要素を再代入不可能な定数（const）として宣言することは、意図しない参照の変更を防ぎ、堅牢なコードを記述する上で重要であることを再確認させます。次に、取得したボタン要素に対して、クリックという特定の動作（イベント）を監視させるための設定を行います。これにはaddEventListenerメソッドを使用します。このメソッドは、第一引数に監視するイベントの種類（ここでは'click'）、第二引数にイベント発生時に実行する関数を指定するという構造を持っています。JavaBronzeの知識を持つ学生にとって、これはイベントリスナーインターフェースの実装やラムダ式によるコールバック処理と概念的に類似していることを理解させるとスムーズです。ここでは、アロー関数を用いて記述を簡潔にし、クリックされた瞬間にコンソールへのログ出力やアラート表示を行うことで、イベントが正しく発火しているかを確認する「疎通確認」の重要性を説きます。また、Webデザインにおけるインタラクションの実装では、HTMLの構造（ボタンの配置）、CSSによる初期スタイル、そしてJavaScriptによる振る舞いの定義という三者が密接に連携していることを理解させます。コードを書く順序として、まずは静的なHTML要素が存在し、それをJavaScriptで取得し、イベントリスナーを付与するという一連の流れを論理的に整理させます。この段階ではまだ画面の見た目は変化しませんが、ユーザーのアクションをプログラムが捕捉できる状態にすることが、動的なWebサイト制作の第一歩となります。この細目で理解すべき範囲は、HTML要素の取得からクリックイベントの検知確認まで。
			② 本細目では、JavaScriptを用いてWebページの見た目を動的に変化させるための主要な手法である「クラスの操作」について詳説します。Webデザインにおいてスタイルを変更する方法は大きく分けて二つあります。一つは要素のstyleプロパティを直接操作してCSSの値を書き換える方法、もう一つはあらかじめCSSで定義されたクラスをHTML要素に付け外しする方法です。本授業で扱うダークモードの実装においては、管理のしやすさとコードの可読性の観点から後者が推奨されることを説明します。JavaScript内に具体的な色コードやスタイル定義を埋め込むのではなく、スタイルに関する責務はCSSに持たせ、JavaScriptはあくまで「状態の切り替え（クラスの着脱）」のみを担うという「関心の分離」の原則を理解させます。具体的には、要素オブジェクトが持つclassListプロパティを使用します。このプロパティは、その要素に適用されているクラス属性のリストを管理するオブジェクトです。classListには、クラスを追加するadd、削除するremove、そして存在すれば削除し存在しなければ追加するtoggleという便利なメソッドが用意されています。ダークモードの切り替えスイッチのような機能においては、現在の状態を判定して分岐を書く必要がないtoggleメソッドが極めて有効であることを実践を通じて示します。実装においては、ページ全体の色調を変更するため、ボタンそのものではなく、document.body（body要素）に対してクラス操作を行います。CSSファイル側で「.dark-mode」というクラスセレクタを用意し、背景色や文字色を定義しておきます。そして、ボタンがクリックされたタイミングでbody要素のclassListに対してtoggle('dark-mode')を実行します。これにより、ワンクリックでページ全体のデザインが一瞬で切り替わる仕組みが実現します。このプロセスを通じて、DOMツリーの上位にあるbody要素にクラスを付与することで、子孫要素全体のスタイルを効率的に制御できるCSSの継承の仕組みと、それをJavaScriptから制御するダイナミズムを深く理解させます。この細目で理解すべき範囲は、classList.toggleメソッドを使用したCSSクラスの動的な付け替えまで。
			③ 本細目では、UIの状態変化に合わせて、ボタンに表示されるテキストラベルを適切に更新するための条件分岐処理について解説します。前項までの実装で見た目のデザインはダークモードとライトモードを行き来するようになりましたが、ボタンの文字が固定のままではユーザーにとって不親切なインターフェースとなります。そこで、現在のモードがどちらであるかを判定し、それに応じて「ダークモードにする」あるいは「ライトモードにする」というようにテキスト内容を書き換えるロジックを実装します。ここでは、Javaの基礎知識を持つ学生にとって馴染み深いif文を使用しますが、判定の基準となる条件式の書き方にWeb特有のアプローチが必要であることを説明します。具体的には、ボタン要素のtextContentプロパティを参照し、現在表示されている文字列が何であるかを比較演算子（===）を用いて判定します。例えば、現在のテキストが「ダークモードにする」であれば、次はライトモードへの切り替えを促すためにテキストを「ライトモードにする」へ変更し、そうでなければ元に戻すといった論理構造を組み立てます。また、テキストの書き換えにはtextContentプロパティへの代入操作を用います。これはDOM操作の基本であり、HTMLタグを含まない純粋なテキスト情報の更新に最適です。この処理を、前項で実装したクラスの切り替え処理と同じイベントリスナー関数の中に記述することで、一度のクリック操作で「スタイルの変更」と「テキストの更新」が同期して実行されるようになります。さらに、条件分岐の判定基準として、テキストの内容だけでなく、body要素に「dark-mode」クラスが付与されているかどうか（classList.containsメソッド）を利用する方法など、別のアプローチについても触れ、プログラミングにおける解法の多様性を示唆します。最終的に、見た目の変化と情報の変化が矛盾なく連動する、完成度の高いユーザーインターフェースを構築する能力を養います。単に機能が動けば良いというだけでなく、ユーザーが現在の状態を正しく認識できるような配慮をコードに落とし込むことの重要性を強調します。この細目で理解すべき範囲は、if文を用いた状態判定とtextContentプロパティによる表示内容の更新まで。
		キーワード	① classList ② toggle ③ addEventListener ④ textContent ⑤ if文
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で作成したダークモード切り替えのコードを見直し、特にJavaScript側でのクラス操作がブラウザの表示にどのように反映されているかを、デベロッパーツールの「要素（Elements）」パネルを使って確認してください。ボタンをクリックするたびにHTMLのbodyタグにクラス属性が付与されたり消えたりする様子を視覚的に捉えることで、DOM操作の仕組みがより深く理解できます。また、CSS側で定義したクラス名とJavaScriptで指定した文字列が正確に一致していなければ動作しない点も再確認しておきましょう。 ◆次回授業の予習次回は、入力フォームに入力された文字数をリアルタイムで数えるカウンター機能を作成します。Webサイトの会員登録画面などでよく見かける機能です。予習として、JavaScriptで文字列の長さを取得するにはどのようなプロパティを使用するのか（JavaのStringクラスのlengthメソッドとの違いなど）を調べておくとスムーズです。また、キーボードを叩くたびに処理を実行するには、どのようなイベントタイプ（クリック以外）を利用すればよいか、想像を巡らせておいてください。
11	フォームの入力制御	科目の中での位置付け	本授業は、第3部「イベント処理とUI実装」の第3回目にあたる。前回まではクリックイベントによる画面の切り替えや状態変化（ローディング、ダークモード）を扱ったが、今回はユーザーのテキスト入力という動的な操作をトリガーとしたイベント処理へと学習を進める。フォーム入力の制御はWebアプリケーションにおいて極めて重要な機能であり、文字列の長さをリアルタイムに取得・判定するロジックの実装を通じて、JavaScriptによるインタラクティブなUI構築の基礎を確固たるものにする位置付けである。
		コマ主題細目	① テキストエリアの要素取得とキーボードイベントの設定 ② 文字列長プロパティの活用とリアルタイムカウンターの実装 ③ 条件分岐によるクラス操作と動的なフィードバックの実装
		細目レベル	① 本細目では、ユーザーがテキストを入力するためのフォーム要素と、その入力状況を表示するためのテキスト要素をJavaScriptから操作するための準備、およびイベントリスナーの設定について詳説する。まず、HTMLにおける`＜textarea＞`タグと、文字数を表示するための`＜p＞`タグ（または`＜span＞`タグ）の構造を確認し、それぞれに付与されたID属性を用いて`document.querySelector`メソッドにより要素オブジェクトとして取得する手順を解説する。学生はJavaBronzeの知識を有しており、オブジェクトの概念や変数の宣言については理解している前提であるが、JavaScriptにおけるDOM要素の取得が、Javaにおけるインスタンスの生成や参照の取得と類似した概念であることを補足しつつ、`const`を用いた定数として宣言することの重要性を説く。次に、取得したテキストエリア要素に対して、ユーザーの操作を検知するためのイベントリスナーを設定する。これまでの授業ではクリック（`click`）イベントを扱ってきたが、文字数カウンターのようなリアルタイムなフィードバックを必要とする機能においては、ユーザーがキーボードのキーを操作したタイミングを捉える必要がある。ここでは、キーが押されてから離された瞬間に発生する`keyup`イベントを採用する。`addEventListener`メソッドを用いて、第一引数にイベントタイプとして`'keyup'`を指定し、第二引数にイベント発生時に実行される関数（イベントハンドラ）を記述する形式を実践する。この際、アロー関数を用いた記述方法を再確認し、コードの可読性を高める手法を定着させる。また、なぜ`click`イベントでは不十分なのか、あるいは`keydown`ではなく`keyup`を選択する理由について、ユーザーが文字を入力し終えた（キーを離した）確定的な状態で文字数をカウントする必要があるというUIUXの観点から論理的に説明し、適切なイベントタイプの選定がWeb制作において重要であることを理解させる。さらに、イベントリスナーが登録されることで、ブラウザがどのようにユーザーの操作を監視し、プログラムが待機状態となるかという非同期的な実行モデルについても、Javaのイベント処理（AWT/Swing等のリスナー）とのアナロジーを用いて解説を行い、Webブラウザ上でのイベント駆動型プログラミングの基礎概念を深める。この細目で理解すべき範囲は、DOM要素の取得から`keyup`イベントリスナーの登録を行い、キー入力時にログが出力される確認まで。
			② 本細目では、イベントハンドラ内における具体的な処理の実装、特に文字列の長さを取得し、それを画面上のカウンターとしてリアルタイムに反映させる一連のデータフローについて詳説する。`keyup`イベントが発火した際、まず行うべきはテキストエリアに入力されている現在の値の取得である。取得したテキストエリア要素のオブジェクトが持つ`value`プロパティにアクセスすることで、その時点での入力文字列全体を取得できることを示す。続いて、取得した文字列の長さを計測するために、JavaScriptの標準的なプロパティである`length`を使用する。ここで特に注意を促すべき点は、Javaにおける文字列長取得が`String.length()`という「メソッド」であるのに対し、JavaScriptにおける`String.length`は「プロパティ」であるという文法上の差異である。学生はJavaの癖で括弧をつけてメソッド呼び出しのように記述してしまうミスを犯しやすいため、プロパティへのアクセスはフィールド参照と同様であることを明確に区別して理解させる。文字数（数値）が取得できたならば、次はその値をユーザーに見える形で画面に表示する工程に移る。事前に取得しておいたカウンター表示用のHTML要素（`＜p＞`タグなど）に対し、`textContent`プロパティを用いて数値を代入する。単に数値を表示するだけでなく、「あと〇文字」や「現在〇文字」といった説明的なテキストと共に表示することが一般的であるため、テンプレート文字列（バッククォートと`${}`）を用いた文字列の埋め込み手法を実践する。これにより、従来の`+`演算子を用いた文字列連結よりも直感的かつ可読性の高いコード記述が可能になることを示す。実際にブラウザで動作確認を行い、キーボードを叩くたびにイベントが発火し、再計算された文字数が瞬時に画面に反映される様子を観察させる。この一連の処理（入力検知→値取得→長さ計算→画面更新）が極めて高速に行われることで、ユーザーはリアルタイムな反応を感じることができるという仕組みを理解させる。また、入力された文字が空の場合（0文字）や、改行が含まれる場合のカウント挙動についても触れ、`length`プロパティが返す値の正確な意味（UTF-16コードユニットの数としての文字数）についても、学術的な視点から簡潔に補足する。この細目で理解すべき範囲は、入力された文字列の長さを`length`プロパティで取得し、`textContent`を用いて画面上の数値を動的に更新する実装まで。
			③ 本細目では、取得した文字数に応じて画面の見た目を変化させる条件分岐ロジックの実装と、CSSクラスの操作による動的なスタイル変更について詳説する。単に文字数を数えるだけでなく、特定の制限文字数（例えば100文字）を超えた場合に警告色を表示するなど、ユーザーに対して視覚的なフィードバックを与えることは、Webデザインにおけるユーザビリティ（使いやすさ）の向上に直結する。まず、プログラム内で閾値となる数値を定義し、現在の文字数と比較する論理を構築する。学生はJavaでの学習を通じて`if`文や`else`文、比較演算子（`＞`や`＜=`など）の基礎知識を有しているため、制御構文自体の詳細な説明は省略し、JavaScriptにおいてそれをどのようにDOM操作と結びつけるかに焦点を当てる。具体的には、「文字数が100を超えている場合」と「それ以外の場合」という条件分岐を記述する。条件に合致した場合の処理として、カウンターの文字色を赤色に変更するなどのスタイル適用を行うが、ここではJavaScriptから直接`style.color`プロパティを操作する方法ではなく、CSSクラスの着脱を行う方法（`classList`の利用）を推奨し、その理由を詳説する。JavaScriptコード内に具体的な色コード（例：`red`や`#ff0000`）を記述してしまうと、デザインの変更が必要になった際にプログラムを修正しなければならなくなる。一方、あらかじめCSS側で`.alert`のようなクラスを定義しておき、JavaScriptからは`classList.add('alert')`や`classList.remove('alert')`を使ってそのクラスを付け外しするだけに留めれば、構造（HTML）、表現（CSS）、振る舞い（JavaScript）の分離というWeb標準の原則を守ることができ、保守性が高まることを理解させる。演習では、文字数が制限を超えた瞬間にクラスが付与されて文字色が変わり、文字を削除して制限内に戻ればクラスが削除されて元の色に戻るというトグル動作を実装する。また、境界値（ちょうど100文字の場合など）における挙動が仕様通りであるかを確認するテストの視点も養う。これにより、単なる機能実装に留まらず、ユーザーインターフェースとしての品質を担保するためのプログラミング的思考を涵養する。この細目で理解すべき範囲は、文字数に応じた`if`文による条件分岐を作成し、`classList`を用いてCSSクラスを着脱することでスタイルを動的に変更する実装まで。
		キーワード	① lengthプロパティ ② keyupイベント ③ textContent ④ classList ⑤ add()/remove()
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったテキストエリアに入力された文字数をリアルタイムにカウントする仕組みについて、手元のPCでコードを再現し動作を確認すること。特に、イベントリスナーがどのタイミングで発火しているか、`length`プロパティがどのように値を返しているかを、コンソールログ等を用いて追跡し、処理の流れを再確認すること。また、条件分岐によってスタイルが変わる境界値の動作についても、実際に入力を行って検証しておくこと。 ◆次回授業の予習次回はフォーム操作の続きとして、チェックボックスの状態変化を検知し、ボタンの有効・無効を切り替える機能を学ぶ。日常生活でWebサイトを利用する際、利用規約の同意チェックボックスを押さないと送信ボタンが押せない仕組みなど、フォーム部品の状態が他の要素に影響を与える事例を探し、どのようなロジックで動いているか想像しておくこと。また、真偽値（boolean）の概念についてJavaの知識を振り返っておくこと。
12	フォーム操作と論理演算子	科目の中での位置付け	Webサイトにおけるユーザーインターフェースの実装として、フォームの制御は不可欠な要素です。本回では、チェックボックスの状態に応じて送信ボタンの有効・無効を切り替える機能の実装を通じて、DOMプロパティによるUI制御と、真偽値や論理演算子を用いた条件判定のロジックを習得します。これは、ユーザーの誤操作を防ぎ、適切なデータ入力を促すための基本的な技術であり、後の総合演習におけるフォーム実装の基礎となります。
		コマ主題細目	① フォーム要素の取得とイベントリスナーの設定 ② checkedプロパティとdisabled属性によるUI制御 ③ 真偽値と論理演算子を用いたコードの最適化
		細目レベル	① 本授業の最初の段階では、Webフォームにおけるインタラクティブな機能の基盤となる、HTML要素の準備とJavaScriptによる要素の取得、そしてイベントリスナーの設定について解説します。具体的には、「利用規約に同意する」というチェックボックスにチェックを入れた時だけ、送信ボタンが押せるようになる機能を実装するための準備を行います。まず、HTML側の構造として、チェックボックス（input type="checkbox"）と送信ボタン（input type="submit"またはbutton要素）が必要であることを確認します。この際、初期状態としてボタンが無効化されている必要があるため、HTMLタグ内にdisabled属性を記述しておくことの重要性を説きます。これは、JavaScriptが読み込まれる前や実行に失敗した場合でも、意図せずボタンが押されることを防ぐための安全策としても機能します。次に、JavaScriptを用いてこれらの要素を操作対象として取得する手順を詳説します。既習のdocument.querySelectorメソッドを使用し、id属性などを手掛かりにしてチェックボックス要素とボタン要素をそれぞれ定数に格納します。JavaでのGUIプログラミングにおいてコンポーネントを変数に割り当てるのと同様に、DOM要素をJavaScriptの変数（定数）として保持することで、後のプログラム内での操作が可能になることを理解させます。要素の取得が完了したら、ユーザーの操作を検知するためのイベントリスナーを設定します。ここでは、チェックボックスの状態が変化したことを検知するために、addEventListenerメソッドを用いて「change」イベントを監視対象とします。「click」イベントも使用可能ですが、フォーム要素の値や状態の変化を扱う際には、意味的に「change」イベントが適切であることを解説します。アロー関数を用いてイベントハンドラの枠組みを作成し、チェックボックスの変更時に特定の処理（関数）が呼び出される仕組みを構築します。ここではまだ具体的な制御ロジックは記述せず、コンソールログ等を用いてイベントが正しく発火しているかを確認する段階までを扱います。このプロセスを通じて、静的なHTML要素に対して動的な振る舞いを付与するための基本的なセットアップ手順を確実に習得させます。この細目で理解すべき範囲は、対象となるHTML要素をJavaScriptで取得し、changeイベントに対するイベントリスナーの登録が完了するまで。
			② 続いて、イベントハンドラ内部における具体的な制御ロジックの実装について詳説します。ここでは、チェックボックスが現在チェックされているかどうかを判定し、その結果に基づいて送信ボタンの有効・無効を切り替える処理を記述します。まず、取得したチェックボックス要素が持つ「checked」プロパティについて解説します。DOMのinput要素（type="checkbox"）は、checkedというプロパティを持っており、これにアクセスすることで、チェックされていればtrue、されていなければfalseという真偽値（boolean）を取得できることを示します。Javaの基礎知識を持つ学生にとって、このboolean型の扱いは馴染み深いものですが、それがHTML要素の状態と直結している点をWeb固有の概念として強調します。次に、条件分岐（if文）を用いた実装を行います。if文の条件式としてチェックボックスのcheckedプロパティを評価し、trueの場合（チェックされている場合）とfalseの場合（チェックされていない場合）で処理を分けます。ここで操作対象となるのが、送信ボタン要素の「disabled」プロパティです。HTMLにおけるdisabled属性は存在するか否かで無効化が決まりますが、JavaScriptのDOMプロパティとしてのdisabledは、trueまたはfalseの値を持ちます。ボタンを有効化したい場合はdisabledプロパティにfalseを代入し、無効化したい場合はtrueを代入するという操作を行います。この実装により、ユーザーがチェックボックスをクリックするたびにchangeイベントが発生し、その都度if文による判定が行われ、ボタンの状態がリアルタイムに更新される仕組みが完成します。実際にブラウザ上で動作確認を行い、チェックを入れるとボタンのグレーアウトが解除されて押せるようになり、チェックを外すと再び無効化される挙動を観察します。この一連の流れを通じて、JavaScriptのプロパティ操作が即座にブラウザのレンダリング（見た目）と機能に反映されるDOM操作の基本原理を深く理解させます。また、UIのフィードバックがユーザー体験（UX）に与える影響についても触れ、システムの状態を視覚的に伝えることの重要性を認識させます。この細目で理解すべき範囲は、checkedプロパティで状態を判定し、if文を用いてボタンのdisabledプロパティを適切に切り替える実装ができるまで。
			③ 最後の主題として、作成したコードのリファクタリング（整理・最適化）を行い、よりプログラマらしくは効率的な記述方法を解説します。前項で作成したコードはif-else文を用いて記述されていますが、論理的な関係性を整理することで、これをわずか1行のコードに短縮できることを示します。ここで重要となるのが「真偽値（Boolean）」と「論理演算子」の理解です。まず、checkedプロパティが返す値はtrueまたはfalseであり、disabledプロパティに設定すべき値もtrueまたはfalseであることを再確認します。ここで両者の関係性を分析すると、「チェックされている（true）」ときは「無効化しない（false）」、「チェックされていない（false）」ときは「無効化する（true）」という関係にあることが分かります。つまり、disabledプロパティに設定すべき値は、checkedプロパティの値を「反転」させたものになります。この「反転」を実現するために、論理否定演算子「!（エクスクラメーションマーク）」を導入します。Java等のプログラミング言語と同様に、JavaScriptでも「!」は真を偽に、偽を真に変換する演算子です。これを用いることで、if文を使わずに「ボタン要素.disabled = !チェックボックス要素.checked;」という形式で直接代入することが可能になります。この記述は、「ボタンの無効化状態は、チェックボックスのチェック状態の否定である」というロジックを簡潔に表現しています。授業では、実際にif文をコメントアウトし、この1行のコードに書き換える演習を行います。動作が変わらないことを確認した上で、このようにコードを短縮することのメリットを解説します。コード行数が減ることで可読性が向上し、バグの温床となる複雑な分岐を減らすことができます。また、真偽値をそのまま値として扱う感覚は、プログラミング中級者へステップアップするために必要な思考法です。単に動けばよいというだけでなく、論理的な構造を見抜き、シンプルで美しいコードを書く能力を涵養します。最後に、checked以外のプロパティや他の論理演算子（&&や\|\|）への応用可能性についても示唆し、論理演算の世界観を広げます。この細目で理解すべき範囲は、論理否定演算子を用いてif文を省略し、効率的かつ可読性の高いコードへリファクタリングできるようになるまで。
		キーワード	① checkedプロパティ ② disabled属性 ③ changeイベント ④ 真偽値（Boolean） ⑤ 論理否定演算子
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったチェックボックスによるボタン制御の仕組みを、何も見ずにゼロからコードを書いて再現できるか確認してください。最初はif文を使った記述でロジックを整理し、動作が確認できたら論理否定演算子を使った1行の記述に書き換えてみましょう。また、チェックボックスだけでなく、テキストボックスに文字が入力されていない時はボタンを押せないようにするなど、他のフォーム要素に応用する場合、どのようなプロパティやイベントを使えばよいか想像してみることも有効な復習となります。 ◆次回授業の予習次回はページのスクロール量に応じた処理を学びます。Webサイトを見ているとき、スクロールすると画面上部に進捗バーが伸びたり、特定の位置までスクロールすると「トップへ戻る」ボタンが現れたりする機能を見たことがあるはずです。普段閲覧しているWebサイトで、スクロール操作に連動して動く要素がないか意識して探してみてください。また、画面の「高さ」や「スクロールされた量」を数値として扱うことになるため、座標やピクセル数といった数値計算のイメージを持っておくとスムーズに理解できるでしょう。
13	スクロールイベントと数値計算	科目の中での位置付け	本授業は、Web制作におけるJavaScriptの役割を体系的に学ぶコースの第13回目に位置し、第3部「イベント処理とUI実装」の最終回となります。これまでに学習したクリックや入力といった単発的なイベント処理とは異なり、ユーザーの操作に応じて連続的に発生するスクロールイベントを扱います。Webサイトのインタラクティブ性を高めるための動的な数値計算とスタイル操作の連携手法を習得し、次章以降のデータ構造やアニメーションの実装へとつながる重要なステップとなります。
		コマ主題細目	① スクロールイベントの検知と現在位置の取得 ② ページ全体の構造理解とスクロール可能領域の算出 ③ 数値計算に基づくプログレスバーの動的制御
		細目レベル	① Webブラウザ上でのユーザー体験を向上させるために、スクロール操作に応じたインタラクションの実装について詳しく解説します。まず、windowオブジェクトに対してscrollイベントを設定する方法を導入します。JavaのGUIプログラミングにおけるイベントリスナーと同様の概念ですが、Webブラウザにおけるスクロールイベントは、ユーザーがホイールを動かしたりスクロールバーをドラッグしたりするたびに、非常に短い間隔で連続して発火するという特性を持っています。この特性を理解させるために、実際にコンソールログを用いてイベントの発火頻度を確認させる演習を行います。次に、現在のスクロール位置を取得するためのプロパティであるwindow.scrollYについて詳説します。Webページにおける座標系の概念、特にY軸方向の値が上から下へと増加していく仕組みを説明し、ページ最上部が0となることを理解させます。また、古いブラウザとの互換性やpageYOffsetとの関係性についても触れつつ、現代の標準的な記述方法としてwindow.scrollYの使用を推奨します。さらに、取得した数値がピクセル単位であることを確認し、この値がページのどの位置に対応しているのかを視覚的にイメージできるよう解説を進めます。スクロールイベントの中でリアルタイムにscrollYの値を取得し、それをコンソールに出力することで、ユーザーの操作とプログラム内の数値がどのように連動しているかを体感させます。このプロセスを通じて、静的なHTMLとCSSだけでは実現できない、ユーザーの動的な操作に基づいた処理の基盤を築きます。最後に、スクロールイベントを利用する際のパフォーマンスへの配慮についても簡単に触れ、無駄な処理を記述しないことの重要性を示唆します。この細目で理解すべき範囲は、windowオブジェクトへのscrollイベントリスナーの登録方法から、イベント発生時にwindow.scrollYプロパティを用いて現在の垂直方向のスクロール量を取得し、その挙動を確認するところまで。
			② プログレスバーのような進捗表示UIを実装するためには、現在の位置だけでなく、ページ全体のサイズを正確に把握する必要があります。ここでは、DOMにおける要素のサイズ取得に関するプロパティについて詳細に解説します。まず、Webページの「全体の高さ」と「現在表示されている領域（ビューポート）の高さ」の違いを明確に区別して理解させます。具体的には、document.documentElementオブジェクトが持つscrollHeightプロパティとclientHeightプロパティを紹介します。scrollHeightは、画面に表示されていない部分も含めたページ全体の高さを表し、clientHeightはブラウザウィンドウ内で実際にコンテンツが表示されている領域の高さを表すことを図解的な視点で説明します。その上で、ユーザーが実際にスクロールできる最大距離を算出するロジックを導き出します。スクロールバーが一番下に到達したとき、window.scrollYの値はscrollHeightそのものではなく、scrollHeightからclientHeightを引いた値になります。なぜなら、画面に表示されている高さの分だけ、スクロールの開始位置（上端）はページ最下部より手前で止まるからです。この計算式の意味を、具体的な数値例（例えばページ全体が2000px、画面の高さが800pxの場合など）を用いて論理的に解説し、Javaでの数値演算の知識と結びつけながら理解を深めさせます。また、これらのプロパティがどのHTML要素（通常はhtmlタグ相当のdocument.documentElement）に属しているかを確認し、DOMツリーからの適切なアクセス方法を習得させます。この計算によって得られる「スクロール可能な最大値」が、次項で行う割合計算の分母となる重要な値であることを強調します。この細目で理解すべき範囲は、scrollHeightとclientHeightの概念的な違いを理解し、それらを用いてスクロール可能な最大範囲を計算式によって導き出すところまで。
			③ 前項までに取得した「現在のスクロール量」と「スクロール可能な最大値」を用いて、スクロールの進捗率を計算し、それを視覚的なUIであるプログレスバーに反映させる一連の実装工程を詳説します。まず、進捗率（パーセンテージ）を求めるための算術計算について解説します。具体的には、「現在のスクロール量 ÷ スクロール可能な最大値 × 100」という計算式をJavaScriptコードとして記述します。Javaにおける整数同士の除算とは異なり、JavaScriptの数値型は浮動小数点数として扱われるため、除算結果が小数になることを前提とした処理が必要であることを補足します。次に、計算された数値をMath.roundメソッドなどを用いて適切な桁数に丸める処理を行い、CSSの値として扱いやすい形式に整えます。そして、計算結果をHTML要素のスタイルに動的に適用する方法を実践します。具体的には、プログレスバーとして配置したdiv要素を取得し、そのstyle.widthプロパティに対して、計算したパーセンテージ値を単位（%）付きの文字列として代入します。ここでは、テンプレート文字列（バッククォート）を使用した記述方法を復習し、数値と文字列の連結をスマートに行う方法を推奨します。この処理をscrollイベントの中で実行することにより、ユーザーがスクロールするたびに計算と描画更新が行われ、バーが滑らかに伸縮するアニメーション効果が生まれる仕組みを理解させます。最後に、if文などの条件分岐を用いる必要はなく、計算式の結果をそのままプロパティに代入するだけで、リニアに変化するUIが実現できるというプログラミングの効率性についても言及します。これにより、数値データとデザイン（CSS）がJavaScriptを介して密接に連携するWebフロントエンド開発の醍醐味を伝えます。この細目で理解すべき範囲は、スクロール率の計算ロジックを実装し、その結果をDOM要素のstyle属性に適用してプログレスバーを動作させるところまで。
		キーワード	① scrollイベント ② window.scrollY ③ scrollHeight ④ clientHeight ⑤ styleプロパティ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったスクロールイベントと数値計算の連携について、実際にコードを書いて動作を確認してください。特に、ページ全体の高さと表示領域の高さの違い、そしてスクロール可能な最大値を求める計算式の意味を再確認することが重要です。また、計算結果をCSSのwidthプロパティに反映させる際、テンプレート文字列を用いて単位（%）を付与する記述方法も復習しておきましょう。 ◆次回授業の予習次回からは、JavaScriptを用いてHTMLを動的に生成する方法や、複数のデータを管理するための「配列」について学びます。Webページ上のリストや画像一覧などを効率的に作成するために不可欠な概念です。プログラミングにおけるデータの集合体の扱いについて、一般的な概念を整理しておくとスムーズに学習に入れます。また、HTMLの構造をJavaScriptから変更するイメージを持っておくと良いでしょう。
14	HTML生成と配列	科目の中での位置付け	本授業は、第4部「データ構造と動的生成」の導入となる第14回である。これまでの授業では、既存のHTML要素を取得して操作することや、単一のイベント処理に焦点を当ててきた。今回からは、JavaScriptを用いてHTMLタグそのものを動的に生成し、ページに追加する手法を学ぶ。また、Webサイト上の多数のコンテンツを効率的に管理するためのデータ構造として「配列」を導入する。これにより、静的なWebページから、データに基づいてコンテンツが変化する動的なWebアプリケーション開発への第一歩を踏み出す重要な位置付けにある。
		コマ主題細目	① insertAdjacentHTMLメソッドによるHTML要素の動的挿入 ② 複数のデータを管理するデータ構造としての配列の定義 ③ 配列要素へのアクセス方法とインデックスを用いたデータ操作
		細目レベル	① 本細目では、JavaScriptを使用してHTMLコードを動的に生成し、DOMツリー内の特定の位置に挿入する手法について詳しく解説する。これまでの授業では、`textContent`プロパティを用いてテキストのみを書き換える操作や、`style`プロパティによるCSSの変更を行ってきたが、Webアプリケーション開発においては、新しいHTMLタグそのものを作成し、ページに追加する処理が頻繁に求められる。テキストに基づき、これを実現するための`insertAdjacentHTML`メソッドの使用方法を学習する。まず、HTMLファイル内にコンテンツを挿入するための親となる要素（コンテナ）を用意し、それを`querySelector`などで取得する手順を確認する。その上で、`insertAdjacentHTML`メソッドの構文を理解させる。このメソッドは2つの引数を取る。第1引数は挿入する位置を指定する文字列であり、`beforebegin`（要素の直前）、`afterbegin`（要素内部の最初）、`beforeend`（要素内部の最後）、`afterend`（要素の直後）の4種類が存在することを説明する。特に、リスト形式で要素を追加していく際によく用いられる`beforeend`の挙動について、図解的なイメージを持たせて理解を深める。第2引数には、挿入したいHTMLタグを含む文字列を指定する。ここでは、テンプレート文字列（バッククォート）を使用することで、複雑なHTML構造も可読性を保ちながら記述できることを再確認する。例えば、`＜div＞`タグや`＜img＞`タグを含む文字列を作成し、それをメソッドに渡すことで、ブラウザが文字列を解析（パース）し、DOMノードとしてページにレンダリングする仕組みを解説する。この操作により、HTMLファイルに直接記述されていない要素が、JavaScriptの実行によって画面上に現れる様子を実践的に確認させる。この動的な生成プロセスは、後の授業で学ぶループ処理と組み合わせることで、大量のデータを一覧表示する機能の基礎となる技術であることを強調する。この細目で理解すべき範囲は、`insertAdjacentHTML`メソッドを用いて、指定した親要素内の末尾に新しいHTMLタグを含む文字列を要素として追加表示できるまで。
			② 本細目では、Webサイト制作において複数の関連するデータを効率的に取り扱うためのデータ構造である「配列（Array）」の概念と定義方法について解説する。テキストに基づき、これまでの変数や定数が単一の値を格納する「箱」であったのに対し、配列は複数の値を順序付けて格納できる「ロッカー」や「棚」のようなものであるという比喩を用いて説明する。学生は既にJavaでの配列の知識を有しているが、JavaScriptにおける配列の特性には柔軟性がある点に注意を促す。具体的には、JavaScriptの配列は可変長であり、要素の追加や削除が容易であること、また、異なるデータ型の値を混在させて格納することも可能であることを（推奨はしないものの）言語仕様として説明する。配列の定義方法として、角括弧`[]`を用いた配列リテラルの記述法を習得させる。例えば、画像一覧ページを作成するシナリオを想定し、複数の画像ファイル名（文字列）を一つの変数で管理するために配列を使用する例を示す。`const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];`のように、カンマ区切りで値を記述し、それを定数に代入する形式を実践する。ここで、配列自体を`const`で宣言しても、配列内部の要素は変更可能であるというJavaScript特有の挙動についても、オブジェクトの参照という観点から補足的に触れ、Javaの`final`との違いによる混乱を防ぐ。また、配列の中に格納するデータは、文字列だけでなく、数値や論理値、さらには将来的に学ぶオブジェクトなど、あらゆるデータ型が可能であることを説明する。Webデザインの現場では、商品リスト、ナビゲーションメニューの項目、スライドショーの画像パスなど、順序を持つデータの集合を扱う場面が極めて多いため、配列は必須の知識である。配列を適切に定義し、コンソールに出力してその構造（`Array(3)`のような表記や展開された状態）を確認する方法までを指導し、データ構造としての配列の実体を視覚的に把握させる。この細目で理解すべき範囲は、配列リテラルを用いて複数のデータを格納した配列を作成し、その構造を理解するまで。
			③ 本細目では、定義された配列から特定のデータを取り出し、プログラム内で利用する方法について詳しく解説する。配列内の各データ（要素）には、その格納順序を示す番号である「インデックス（添字）」が自動的に割り振られることを理解させる。重要な点は、このインデックスが「0」から始まること（ゼロベースインデックスing）である。Java等の経験がある学生には馴染み深いはずだが、初学者が最も躓きやすいポイントの一つでもあるため、1番目の要素はインデックス0、2番目の要素はインデックス1であることを繰り返し強調する。具体的な記述方法として、配列名の後ろに角括弧を付け、その中にインデックス番号を指定する記法（例：`images[0]`）を習得させる。これにより、配列という集合体から個別の値を抽出できることを実践する。また、テキストで扱われている`length`プロパティについても解説する。`配列名.length`を参照することで、その配列に格納されている要素の総数を取得できることを示す。これは、配列の全要素に対して処理を行う場合や、最後の要素にアクセスする場合（`length - 1`）に不可欠な情報となる。さらに、存在しないインデックス（例えば、要素数が3の配列に対してインデックス3や100など）にアクセスした場合、エラーにならずに`undefined`が返されるというJavaScript特有の挙動についても触れ、データ取得時の安全確認の重要性を示唆する。授業内では、配列から取り出した画像ファイル名の文字列を、主題①で学んだ`insertAdjacentHTML`のテンプレート文字列内に組み込み、実際に画面上の`＜img＞`タグの`src`属性として展開する演習を行う。これにより、「データの定義（配列）」→「データの取得（インデックス）」→「UIへの反映（DOM操作）」という一連のデータフローを体験させ、静的なHTML記述との違いを明確にする。単に値をコンソールに出力するだけでなく、Webページの一部として機能させることで、配列操作の実践的な意義を定着させる。この細目で理解すべき範囲は、インデックスを指定して配列の要素を取得し、それをHTML生成のロジックに組み込んで利用できるまで。
		キーワード	① insertAdjacentHTML ② beforeend ③ テンプレート文字列 ④ 配列（Array） ⑤ インデックス（添字）
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業では、JavaScriptを使ってHTMLタグを動的に追加する方法と、複数のデータをまとめる配列の基礎を学びました。復習として、授業で扱った以外のHTMLタグ（例えばリストタグ`＜li＞`や段落タグ`＜p＞`など）をJavaScriptから生成し、画面の指定した場所に挿入できるか試してください。また、自分の好きなもの（趣味や食べ物など）をテーマにした配列を作成し、コンソールで特定の要素を取り出したり、配列全体の要素数を確認したりする操作を行ってください。配列のインデックスが0から始まる点に注意しながら、意図したデータが正しく取得できるか確認しましょう。 ◆次回授業の予習次回の授業では、今回学んだ配列の知識を活かし、配列内のすべてのデータを順番に処理する「ループ処理（繰り返し処理）」を学びます。プログラミングにおいて、大量のデータを効率的に扱うためにループ処理は不可欠です。予習として、もし配列の中身が100個や1000個あった場合、今回のように一つずつインデックスを指定して取り出す記述を行うとコードがどのようになるか想像してみてください。また、同じような処理を何度も繰り返すための構文がプログラミングには存在することを意識し、JavaScriptにおける代表的なループ文の種類について軽く用語を確認しておくと、スムーズに理解に入れるでしょう。
15	配列操作とループ処理	科目の中での位置付け	本講義は全30回の折り返し地点にあたり、第4部「データ構造と動的生成」の中核を成す重要な回である。前回学習した配列の基礎知識とDOM操作技術を統合し、データ量に応じたコンテンツの動的生成を実現する。静的にHTMLを記述する従来の手法から、プログラムによって効率的に画面を構築する手法への転換点であり、現代のWeb開発において必須となる「データ駆動型」のUI構築の基礎を確立する位置付けにある。
		コマ主題細目	① 配列データを用いたDOM操作と要素表示 ② ループ処理の構文構造と実行ロジック ③ 配列とループ処理の連携によるリスト生成
		細目レベル	① 本細目では、前回定義した配列に格納されたデータを個別に抽出し、Webページ上の具体的な要素として表示する手法について詳説する。まず、配列内のデータへのアクセス方法として、インデックス（添字）を用いた指定方法を再確認する。学生はJavaの学習を通じて配列のインデックスが0から始まることを理解しているが、JavaScriptにおいても同様の規則が適用されることを明示し、`配列名[インデックス番号]`という記述で特定の値が取得できることを実践させる。その上で、取得した値をHTMLの構造内に組み込むための手法として、テンプレート文字列（テンプレートリテラル）の活用法を解説する。従来の文字列連結と比較し、バッククォートを用いることで変数の埋め込みが容易になり、可読性が向上することを理解させる。具体的には、画像ファイル名が格納された配列からファイル名を取り出し、`img`タグの`src`属性や`alt`属性として展開するHTML文字列を作成する手順を示す。次に、作成したHTML文字列を実際のWebページ（DOMツリー）に反映させるためのメソッドとして、`insertAdjacentHTML`の使用法を掘り下げる。このメソッドは、対象となる要素の「直前」「直後」「子要素の先頭」「子要素の末尾」のいずれかにHTMLを挿入する機能を持つが、リスト表示においては「子要素の末尾（beforeend）」への追加が適している理由を構造的な観点から解説する。実際に配列の0番目、1番目の要素を手動で記述して表示させる演習を行い、コードが正しく動作することを確認させる。しかし同時に、配列の要素数が数個程度であれば手動での記述も可能であるが、数十、数百といったデータ量を扱う場合には、インデックス番号を1つずつ書き換えたコードを羅列することが極めて非効率的であり、保守性の観点からも問題があることを指摘する。コードの重複はバグの温床となりやすく、修正が必要になった際の手間も増大するため、より効率的な処理方法が必要であることを認識させる。この非効率性の体験を通じて、次項で扱うループ処理（繰り返し処理）の必要性を強く動機付けることが本細目の狙いである。最後に、存在しないインデックス（例えば配列長を超えた番号）にアクセスした場合、JavaScriptではエラーではなく`undefined`が返されるという挙動の違いについても触れ、Javaとは異なる言語特性への理解を促す。この細目で理解すべき範囲は、配列の特定の要素へアクセスし、それをテンプレート文字列と`insertAdjacentHTML`を用いて手動でHTMLに追加表示する手法と、その限界を理解するまで。
			② 本細目では、プログラミングにおける基本制御構造の一つである「繰り返し処理（ループ）」について、JavaScriptにおけるfor文の構文とその動作原理を解説する。学生はJavaにおいてfor文の基本的な概念を学習済みであるが、JavaScriptの文脈において改めてその構造を定義し直す。for文は「初期化式」「条件式」「増減式」の3つの要素から構成され、これらがセミコロンで区切られて記述されることを板書等で視覚的に整理する。特にJavaとの相違点として、ループカウンタ変数の宣言に`int`ではなく`let`を使用する点に注目させる。`let`を用いることで、変数のスコープ（有効範囲）がブロック内に限定され、安全なコード記述が可能になることを説明する。 for文の実行フローについては、まず初期化式が一度だけ実行され、その後に条件式の評価が行われるという順序を論理的に解説する。条件式が真（true）である場合にのみブロック内の処理が実行され、処理終了後に増減式が実行されるというサイクルを詳細に追跡する。このサイクルは条件式が偽（false）になるまで繰り返されるため、条件設定の正確性が極めて重要であることを強調する。特に、条件式の設定ミスや増減式の記述漏れによって発生する「無限ループ」のリスクについては、Webブラウザのフリーズやクラッシュを引き起こす深刻な問題であることを警告し、記述時には細心の注意を払うよう指導する。講義内では、実際にコンソールへのログ出力を用いた演習を行い、ループカウンタ変数（慣習的に`i`が用いられることが多い）の値が0から始まり、ループごとに1ずつ増加していく様子を確認させる。これにより、for文が単なる「繰り返し」ではなく、「数値を変化させながらの繰り返し」であることを直感的に理解させる。また、繰り返したい回数が決まっている場合にfor文が最適であることを説明し、while文など他のループ構文との使い分けの視点も示唆する（ただし詳細は扱わない）。この段階ではまだDOM操作とは組み合わせず、純粋に制御構文としてのfor文の挙動を完全に把握させることに注力する。変数の値がどのように変化し、どのタイミングでループが終了するのかを、具体的な数値を当てはめながらトレース（追跡）する能力を養う。これは、プログラミングにおけるアルゴリズム的思考の基礎を固める上で不可欠なプロセスである。この細目で理解すべき範囲は、JavaScriptにおけるfor文の正確な構文を習得し、コンソール上で意図した回数の繰り返し処理を実装・制御できるまで。
			③ 本細目では、前項までに学習した「配列からのデータ取得」と「for文による繰り返し処理」を統合し、動的なリスト生成の実装を行う。これはWebアプリケーション開発において最も頻出するパターンの一つであり、データの集合を効率的に画面上に展開する技術である。まず、配列の全要素を処理するために、配列が持つ`length`プロパティの重要性を解説する。`length`プロパティは配列に格納されている要素の総数を表す数値であり、これをfor文の条件式（例：`i ＜配列名.length`）に利用することで、配列の要素数が変動した場合でもコードを修正することなく、常にすべての要素を処理できることを示す。これを「ハードコーディング（具体的な数値を直接記述すること）」と比較し、プログラムの柔軟性と保守性が飛躍的に向上することを理解させる。具体的な実装手順として、for文のブロック内でHTML文字列を動的に生成するロジックを詳説する。ループカウンタ変数`i`を配列のインデックスとして利用し（`配列名[i]`）、その回のループで処理すべき画像ファイル名を取得する。そして、テンプレート文字列を用いて`img`タグのHTMLを構築し、`insertAdjacentHTML`メソッドの`beforeend`オプションを使用して親要素に追加していく流れを実演する。この処理が繰り返されることで、ブラウザ上では画像が上から順（あるいは左から順）に追加され、最終的にすべての画像が一覧表示される様子をイメージさせる。また、この実装過程において、変数の使い分けについても指導を行う。HTML要素を取得した定数や配列そのものはループの外で宣言し、ループ内で変化する値（ファイル名や生成されるHTML文字列）はループ内で処理するという、スコープとメモリ効率を意識したコーディングスタイルを提示する。さらに、演習として画像だけでなく、画像に付随するテキスト情報なども配列化し、それらを組み合わせてよりリッチなリスト項目（例えば`＜li＞`タグの中に`＜img＞`と`＜p＞`を入れるなど）を生成する応用的な考え方についても触れる。これにより、単なる画像の羅列ではなく、構造化されたコンテンツをデータから生成する能力を涵養する。最終的には、静的なHTMLファイルに`img`タグを10個書くことと、配列にファイル名を10個記述してfor文で回すことの違いを比較させ、後者が圧倒的に修正や拡張に強いことを結論付ける。Webサイト制作において、データと表示ロジックを分離して考えることの第一歩として、この技術の習得を位置付ける。この細目で理解すべき範囲は、配列の`length`プロパティを利用したfor文を記述し、配列内の全画像データをWebページ上に一覧表示させる動的生成処理を実装できるまで。
		キーワード	① for文 ② 変数のスコープとlet ③ 条件式 ④ 増減式 ⑤ lengthプロパティ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだfor文の構文を何も見ずに記述できるか確認してください。特に、初期化式、条件式、増減式の順序と役割を再確認し、意図的な無限ループにならないよう注意点を整理してください。また、配列を作成し、その内容をfor文を使って順番にコンソールに出力するプログラムを作成してみることを推奨します。さらに、配列の要素数を変更した際に、プログラムを修正せずにすべての要素が表示されるか実験し、lengthプロパティの利便性を体感してください。 ◆次回授業の予習次回は、複数の情報をひとまとめに扱う「オブジェクト」という概念を学びます。現実世界の「物（オブジェクト）」には、色や大きさ、名前といった属性がありますが、プログラミングでも同様にデータに属性を持たせる方法があります。配列はデータを順番に並べるものでしたが、オブジェクトはデータに名前を付けて管理するものです。変数の有効範囲を示す「スコープ」という言葉の意味や、`let`と`const`の使い分けについても、これまでの学習を振り返りながら整理しておいてください。
16	変数のスコープとオブジェクト	科目の中での位置付け	本コマは、全30回の講義における第4部「データ構造と動的生成」の第3回目に位置する。前回までに学習した配列とループ処理による単純なリスト操作から一歩進み、より複雑で意味的なまとまりを持つデータを扱うための「オブジェクト」というデータ構造を導入する。また、プログラムの規模が拡大するにつれてバグの温床となりやすい変数の有効範囲（スコープ）について、現代的なJavaScriptの仕様（ES6以降）に基づいた厳格な管理手法を確立する。これらは、次回以降に扱う「配列とオブジェクトを組み合わせたリッチなコンテンツ生成」や、後のWebアプリケーション開発におけるデータ管理の基盤となる重要な単元である。
		コマ主題細目	① 変数宣言の使い分けとスコープの理解 ② オブジェクトの基礎構造と定義 ③ オブジェクトの操作とWebページへの活用
		細目レベル	① JavaScriptにおける変数宣言には、歴史的な経緯から`var`、`let`、`const`の3種類が存在するが、本講義では現代の標準的な開発スタイルである`let`と`const`の使い分けと、それらが形成するスコープ（有効範囲）の概念について詳説する。まず、`const`について解説する。`const`は「定数」を宣言するためのキーワードであり、一度値を代入すると再代入が不可能となる。Javaにおける`final`修飾子と同様に、変更されるべきでない値を保護するために用いられるが、JavaScript開発においては「基本はすべて`const`で宣言し、どうしても再代入が必要な場合のみ`let`を使う」という指針が一般的であることを理解させる。これは、意図しない値の書き換えによるバグを防ぎ、コードの可読性と安全性を高めるためである。次に、`let`について解説する。`let`は再代入可能な変数を宣言するために用いられ、ループカウンタや、条件によって値が変化するフラグ変数、計算の途中経過を保持する変数などに使用される。続いて、変数の「スコープ（有効範囲）」について学術的な視点から解説する。`let`と`const`は「ブロックスコープ」という性質を持つ。これは、波括弧`{}`で囲まれたブロックの内部で宣言された変数は、そのブロックの外側からは参照できないというルールである。例えば、`if`文や`for`文のブロック内で宣言した変数は、その処理が終わるとメモリ上から破棄され、ブロック外からはアクセスできなくなる。これにより、プログラムの異なる箇所で同じ名前の変数を使用していても、互いに干渉することなく安全に処理を記述できることを理解させる。Javaを学習済みの学生にとっては、メソッド内のローカル変数の概念に近いが、JavaScriptではブロック単位で厳密に管理される点が重要である。また、ブロックの外側で宣言された変数は「グローバルスコープ」を持ち、どこからでもアクセス可能であるが、不用意なグローバル変数の使用は名前の衝突（ネーミングコンフリクト）を招くリスクがあるため、可能な限りスコープを限定して変数を宣言すべきであるという設計原則についても言及する。最後に、古い記述である`var`との違いについて触れ、`var`はブロックスコープを無視したり、変数の巻き上げ（ホイスティング）といった直感的でない挙動を引き起こしたりするため、現代のWeb開発では使用を避けるべきであることを確認する。この細目で理解すべき範囲は、`let`と`const`の適切な使い分け基準から、ブロックスコープによる変数の生存期間とアクセス権限の仕組みまで。
			② 前回の授業で扱った「配列」は、データを順序（インデックス番号）で管理するリスト構造であったが、本細目では、データに「名前（キー）」を付けて管理する「オブジェクト」というデータ構造について解説する。Webデザインの現場において、例えば1つの商品を表示する場合、その「商品名」「価格」「画像パス」「紹介文」といった属性は、順序よりもそれぞれの意味（ラベル）によって管理されるべきである。配列を用いて`item[0]`や`item[1]`のように数値で管理しようとすると、何番目にどの情報が入っているかをプログラマが記憶しなければならず、可読性が著しく低下する。これに対し、オブジェクトを用いれば、`name`や`price`といったキーを用いて意味的にデータをひとまとめにすることが可能となる。 JavaScriptにおけるオブジェクトの定義方法として、最も基本的かつ頻繁に使用される「オブジェクトリテラル」の構文を詳説する。波括弧`{}`の中に、`キー: 値`というペアをカンマ区切りで記述することで、構造化されたデータを直感的に定義できることを示す。例えば、`const item = { name: 'コーヒー', price: 450, image: 'coffee.jpg' };`のように記述する。ここで、Java等のクラスベースのオブジェクト指向言語との違いについても触れる。Javaではオブジェクト（インスタンス）を生成するために事前にクラス（設計図）を定義する必要があるが、JavaScriptではクラスを定義せずとも、必要なプロパティを持つオブジェクトを即座に生成（アドホックに作成）できる柔軟性があることを理解させる。この特性は、Webページ上の多種多様なUIパーツや設定情報を管理する際に極めて有用である。また、オブジェクトのプロパティ（キーと値のペア）に格納できるデータ型についても解説する。値には数値や文字列だけでなく、真偽値、配列、さらには別のオブジェクトを含めることも可能である。これにより、複雑な階層構造を持つデータも表現できることを示す。例えば、`style`というキーの値として、さらに`color`や`fontSize`を持つオブジェクトを入れ子にするようなケースである。このようなデータ構造は、将来的に学ぶJSON（JavaScript Object Notation）の基礎となる概念であり、サーバーとのデータ通信においても標準的に利用される形式であることを示唆し、その重要性を認識させる。本講義では、テキストに沿って具体的なコード例を書き写し、コンソールでの出力を確認しながら、オブジェクトの構文規則を確実に習得させる。この細目で理解すべき範囲は、オブジェクトリテラルを用いたオブジェクトの生成方法から、プロパティの定義規則、配列との用途の違いまで。
			③ 定義したオブジェクトから必要な情報を取り出し、Webページの表示や制御に利用する方法について詳説する。オブジェクトのプロパティにアクセスするための基本的な記法として、「ドット記法（Dot notation）」を中心に解説する。ドット記法は、`オブジェクト名.プロパティ名`という形式（例：`item.name`）で記述し、直感的で可読性が高いため、プロパティ名が固定されている場合には最も推奨されるアクセス方法である。Javaにおけるフィールドアクセスと同様の感覚で記述できるため、学生にとっても馴染みやすい概念である。次に、取得したデータをHTML要素に反映させる実践的な手順を解説する。`document.getElementById`や`querySelector`を用いて取得したHTML要素に対し、オブジェクトから取り出した値を代入する。例えば、`img`要素の`src`属性に対してオブジェクトの画像パスプロパティを代入したり、`p`要素の`textContent`に対して商品名プロパティを代入したりする操作を行う。この際、テンプレート文字列（バッククォート`` ` ``を用いた文字列）を活用することで、`color: ${item.color}`のように、CSSのスタイル指定文字列の中にオブジェクトのプロパティを動的に埋め込む手法についても実践する。これにより、JavaScript上のデータ構造と、ブラウザ上の表示（DOM）をどのように結びつけるかという、Webアプリケーション開発の基本的なデータフローを理解させる。また、オブジェクトのプロパティ値の書き換えと、定数宣言（`const`）との関係性についても重要な概念として解説する。細目①で「`const`は再代入不可能」と説明したが、オブジェクトを`const`で宣言した場合、再代入できないのは「オブジェクトそのもの（参照先）」であり、オブジェクトの中身である「プロパティの値」は変更可能であるという仕様を理解させる。例えば、`const item = { price: 100 };`と宣言した後に、`item.price = 200;`と記述して価格を変更することは許可される。これはJavaにおける参照型変数の`final`修飾子の挙動と同様であるが、初学者が混同しやすいポイントであるため、メモリ上の参照の仕組みを含めて丁寧に説明する。最後に、これらの操作を通じて、データ（Model）と表示（View）を分離して考えることの重要性を説く。HTMLに直接データをハードコーディングするのではなく、JavaScriptのオブジェクトとしてデータを一元管理し、それをHTMLに流し込むという手法を取ることで、修正や変更に強いWebサイト制作が可能になることを、具体的な演習を通じて体感させる。この細目で理解すべき範囲は、ドット記法によるプロパティの参照・更新方法から、オブジェクトのデータを用いたDOM操作の実装、`const`宣言されたオブジェクトの可変性の理解まで。
		キーワード	① スコープ ② 定数 ③ オブジェクト ④ プロパティ ⑤ ドット記法
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだ「オブジェクト」の作成方法を復習してください。身の回りにあるもの（例えば、自分の持っているスマートフォン、好きな映画、履修している講義など）をテーマに決め、それを表現するためのプロパティ（名前、価格、特徴など）を持つオブジェクトをコードとして記述してみましょう。また、`let`と`const`を使い分け、ブロック`{}`の内と外で変数がどのように見えるか、わざとエラーが出るパターンも含めてコードを書いて動作を確認し、スコープの挙動を体感してください。 ◆次回授業の予習次回の授業では、今回学んだ「オブジェクト」を「配列」の中に格納して、複数のデータをまとめて管理する方法を学びます。ECサイトの商品一覧のように、同じ構造を持つデータがたくさん並んでいる状態をイメージしておいてください。配列のインデックス番号と、オブジェクトのキーを組み合わせることで、特定のデータの特定の値（例えば「2番目の商品の価格」）にどのようにアクセスすればよいか、これまでの知識を組み合わせて予想しながら思考を整理しておいてください。
17	複雑なデータ構造と一覧表示	科目の中での位置付け	本講義は、第4部「データ構造と動的生成」の核心となる回であり、これまで学習してきた「配列」「オブジェクト」「ループ処理」といったプログラミングの基本概念を統合し、実用的なWebコンテンツ生成に応用する段階に位置する。静的なHTML記述から脱却し、JavaScriptを用いてデータに基づいた動的なWebページ（商品一覧画面など）を構築する手法を習得する。これは、現代のWeb開発において必須となる「データとビュー（表示）の分離」を理解するための重要なステップであり、後の第6部での総合演習における動的コンテンツ実装の基礎となる。
		コマ主題細目	① 配列とオブジェクトを組み合わせた複合データ構造の設計と定義 ② 複合データ構造に対するアクセス手法とプロパティ操作の理解 ③ ループ処理とDOM操作を組み合わせた動的HTMLコンテンツの生成
		細目レベル	① 本細目では、Webサイト上で扱う複数の関連情報を効率的に管理するためのデータ構造について詳説する。これまでの授業で、単一の値をリストとして管理する「配列」と、ある対象に関する複数の属性情報をひとまとめにする「オブジェクト」について個別に学習してきた。しかし、実務的なWeb制作、例えばECサイトの商品一覧やブログの記事一覧などを実装する場面では、これらを単独で使用するのではなく、組み合わせて使用することが一般的である。具体的には、「商品」という一つの概念をオブジェクト（名前、価格、画像パスなどのプロパティを持つ）として定義し、それら複数の商品オブジェクトを配列の中に格納するという階層構造を作成する。学生はJava言語において、クラスを定義し、そのインスタンスを`ArrayList`などのコレクションに格納する手法（`List＜Item＞`のような構造）に馴染みがあるはずである。JavaScriptにおいても概念的には同様であるが、クラスを事前に定義することなく、オブジェクトリテラル`{}`を用いて即座に構造化データを記述できる点に柔軟性があることを理解させる。授業では、テキストの例題であるフルーツジュースのメニューデータを題材とし、`const lists = [...]` という配列宣言の中に、複数のオブジェクト`{ name: '...', price: 100, img: '...' }`をカンマ区切りで列挙して記述する方法を実践する。ここで重要なのは、配列が「順序」と「集合」を担い、オブジェクトが「意味」と「属性」を担うという役割分担を明確に理解することである。この構造化により、データの追加や削除が配列操作として容易に行えるようになり、かつ個々のデータの凝集度が高まることを解説する。また、画像ファイル名や価格といった異なるデータ型の値を、一つのオブジェクト内にプロパティとして共存させることができるJavaScriptのオブジェクトの特性についても再確認し、JSON（JavaScript Object Notation）形式に近いこのデータ記述法が、Web APIを通じたデータ交換の標準的な形式であることを示唆しつつ、正確な構文で記述能力を養う。この細目で理解すべき範囲は、配列の中に複数のオブジェクトを含むデータ構造を自ら設計し、構文エラーなくコードとして記述できるまで。
			② 前段で定義した「配列の中にオブジェクトが格納されたデータ構造」に対し、プログラムから特定の値を取り出し、利用するためのアクセス手法について解説する。データ構造が複雑化することで、値へのパス（経路）も階層的になるため、インデックス指定とプロパティアクセスの組み合わせ方を正確に把握する必要がある。具体的には、まず配列のインデックスを用いて特定の要素（オブジェクト）にアクセスし、続いてドット記法を用いてそのオブジェクト内の特定のプロパティ値を参照するという二段階の手順を踏むことを論理的に説明する。例えば、配列名が`lists`である場合、`lists[0]`は配列の先頭にある「オブジェクトそのもの」を指し示す。この時点ではまだ具体的な商品名や価格といった値には到達していない。そこからさらに`.name`や`.price`といったプロパティ名を繋げることで、`lists[0].name`という記述が「リストの1番目にある商品の名前」という具体的な値を意味することになる。Java言語における`list.get(0).getName()`のようなメソッドチェーンやアクセス方法と比較しつつ、JavaScriptではより簡潔な記法で深層のデータにアクセスできることを示す。また、ブラケット記法`[]`とドット記法`.`の違いや使い分けについても触れ、プロパティ名が固定の場合はドット記法が一般的であることを定着させる。さらに、開発者ツールのコンソール機能（`console.log`）を活用し、`lists[0]`を出力した際にブラウザ上でどのようにオブジェクトの中身が展開されるかを確認させる。これにより、自身の記述したコードが意図したデータ構造としてメモリ上に展開されているかを視覚的に検証するデバッグ能力を養う。また、次項で扱うループ処理の準備として、インデックス部分を固定値（`0`や`1`）ではなく、変数`i`を用いて`lists[i].name`のように記述することで、任意の要素に動的にアクセスできる概念を理解させる。この抽象化こそが、大量のデータを一括処理するための鍵となることを強調する。この細目で理解すべき範囲は、複合データ構造内の任意のデータに対して、インデックスとプロパティ名を組み合わせて正確にアクセスし、その値をコンソールに出力できるまで。
			③ 本細目では、定義したデータ構造とアクセス手法を用い、JavaScriptによってHTMLタグを動的に生成し、Webページ上に一覧表示させる実装プロセスを詳説する。ここでは、「データがある限り処理を繰り返す」というロジックを実装するために`for`文を使用する。学生は既にJava等でループ処理の基本文法を習得しているが、JavaScriptにおけるDOM操作と組み合わせた具体的な記述パターンを身につけることが目的となる。まず、配列の要素数（`lists.length`）を終了条件とした`for`文を構築する。ループの内部では、現在のインデックス`i`に対応するオブジェクト（`lists[i]`）から必要な情報（画像パス、商品名、価格）を取得し、それをHTMLのマークアップ構造に埋め込む処理を行う。この際、従来の文字列連結（`+`演算子）ではなく、テンプレート文字列（バッククォート`` ` ``）を使用することで、HTMLタグと変数を可読性高く記述できる利点を解説する。`＜img src="${lists[i].img}"＞`のように、属性値やテキストコンテンツに変数を埋め込み、一つのHTMLブロックを表す文字列を作成する。次に、生成したHTML文字列を実際のWebページ（DOMツリー）に反映させる手法として、`insertAdjacentHTML`メソッドを使用する。このメソッドは、指定した要素（例えば一覧を表示するための親`＜div＞`や`＜ul＞`）に対し、相対的な位置（`beforeend`など）を指定してHTMLを挿入するものである。`innerHTML`プロパティへの代入とは異なり、既存の要素を破壊せずに新しい要素を追加していく動作原理を理解させる。ループが回るたびに、新しい商品情報のHTMLが親要素の末尾に追加され、結果として配列内のデータ数分だけの商品パネルが画面上に並ぶことになる。この一連の流れを通じて、静的なHTMLファイルに直接記述するのではなく、データ（JavaScript）からビュー（HTML）を生成するという、現代的なWebフロントエンド開発の基本パラダイムを実践的に習得させる。最終的に、ブラウザ上で画像やテキストが正しく表示され、CSSによるスタイルが適用されたリッチな一覧ページが完成することを確認する。この細目で理解すべき範囲は、配列データをループ処理し、テンプレート文字列と`insertAdjacentHTML`を用いて動的にHTML要素を生成・表示させる一連のコードを実装できるまで。
		キーワード	① 配列とオブジェクトの組み合わせ ② オブジェクトリテラル ③ 埋め込み変数 ④ 相対位置 ⑤ JSON
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱った「配列の中にオブジェクトを記述するデータ構造」を、テキストの例題を見ずに自分で記述できるか確認してください。また、作成したデータ構造に対して`for`文を用いてアクセスし、コンソールにプロパティ値を順番に出力するプログラムを作成して、インデックスとドット記法の使い方を再確認してください。動的なHTML生成については、テンプレート文字列内の変数の埋め込み方と、`insertAdjacentHTML`の第一引数（挿入位置）の意味を重点的に復習してください。 ◆次回授業の予習次回の授業では、オブジェクトや配列からデータをより効率的に取り出すための構文である「分割代入」について学習します。テキストを一読し、現在の記述方法（`obj.name`など）と比べてどのようにコードが簡潔になるのか、その書式の違いを眺めておいてください。また、データの活用事例として紹介されているコラムにも目を通し、JavaScriptにおけるデータ操作の応用可能性についてイメージを膨らませておいてください。
18	分割代入とデータの活用	科目の中での位置付け	本講義は第4部「データ構造と動的生成」の最終回にあたり、これまで学んだ配列やオブジェクトの操作をより洗練された記述で行うための「分割代入」を扱う。複雑なデータ構造から必要な情報を効率的に抽出し、コードの可読性と保守性を高める手法を習得する。これにより、次章以降のアニメーション制御や総合演習における複雑なロジック記述への対応力を養う重要な転換点となる。
		コマ主題細目	① オブジェクトにおける分割代入の構文と利点 ② 配列の分割代入と適切なデータ構造の選択 ③ Mathオブジェクトの活用とデータ操作の総括
		細目レベル	① 本細目では、JavaScriptのモダンな記法の一つである「分割代入（Destructuring Assignment）」について、特にオブジェクトに対する適用方法を中心に解説する。前回の授業において、配列内に格納されたオブジェクトデータ（商品情報など）をループ処理で取り出し、HTMLとして出力する方法を学んだ。その際、オブジェクトのプロパティにアクセスするために、`item.name`や`item.price`、`item.image`のように、オブジェクト変数名とドット演算子を繰り返し記述する必要があった。プロパティ数が増加すればするほど、この記述は冗長になり、コードの可読性を低下させる要因となることを指摘する。そこで、これらの課題を解決する手段として分割代入を導入する。具体的には、`const { name, price, image } = item;`のように記述することで、オブジェクトのプロパティ名と同じ名前の変数を生成し、対応する値を一度に抽出して代入できる仕組みを詳説する。学生はJavaの学習を通じて、オブジェクトのフィールドにアクセスする際にはゲッターメソッドを使用するか、あるいは直接フィールド参照を行うことに慣れているが、JavaScriptの分割代入のような「宣言と同時に複数のフィールドを個別の変数に展開する」という構文は新鮮に映る可能性がある。そのため、この構文が単なる省略記法ではなく、コードの意味を明確にし、変数スコープ内でのデータの扱いをスッキリさせるための重要なテクニックであることを強調する。また、分割代入を使用する際の注意点として、抽出したいプロパティ名と変数名が完全に一致している必要がある点や、存在しないプロパティを指定した場合は`undefined`が代入される挙動についても触れる。さらに、前回の授業で作成した商品一覧表示のコードを例に取り、分割代入を用いてリファクタリング（プログラムの挙動を変えずに内部構造を整理すること）を実践させる。これにより、テンプレートリテラル内で`${item.name}`と記述していた箇所が`${name}`と簡潔に記述できるようになり、HTML生成コードの見通しが劇的に良くなることを体験させる。この細目で理解すべき範囲は、オブジェクトに対する分割代入の基本的な構文を理解し、既存のコードをリファクタリングして可読性を向上させる方法まで。
			② 本細目では、配列に対する分割代入の構文と、データ構造の適切な使い分けについて解説する。オブジェクトの分割代入が「プロパティ名」をキーとして値を抽出したのに対し、配列の分割代入は「要素の順序（インデックス）」に基づいて値を抽出することを理解させる。具体的には、`const [first, second] = list;`のような記述により、配列の0番目と1番目の要素をそれぞれ変数`first`と`second`に代入できる仕組みを解説する。この構文は、特定の順序で並んだデータから先頭のいくつかの要素だけを素早く取り出したい場合などに有用である。また、ここではテキストのコラムにある「配列とオブジェクトの使い分け」についても詳しく掘り下げる。プログラミングにおいてデータを管理する際、配列を使用すべきか、オブジェクトを使用すべきかという判断は、初学者が迷いやすいポイントである。一般的に、商品リストや画像リストのように「同じ種類のデータが順序を持って並んでいる」場合は配列が適しており、ある一つの商品に関する「名前、価格、画像」のように「異なる属性のデータが意味を持って集まっている」場合はオブジェクトが適しているという指針を示す。第17回で扱った「オブジェクトを要素に持つ配列」という構造は、この両者の特性を組み合わせた典型的なパターンであり、Web開発の実務において極めて頻出するデータ構造であることを再確認する。さらに、配列の分割代入とオブジェクトの分割代入を組み合わせることで、複雑なネスト構造を持つJSONデータなどから必要な情報だけをピンポイントで抽出できることを示す。例えば、APIから取得したデータ構造を想定し、その中から特定のデータを効率的に取り出す演習を通じて、データ構造に対する理解を深める。学生には、単に構文を覚えるだけでなく、扱うデータの性質に応じて最適なデータ構造（配列かオブジェクトか）を選択し、そこから分割代入を用いてスマートにデータを取り扱う能力を涵養する。これは、後の総合演習において自力でデータ設計を行うための基礎となる。この細目で理解すべき範囲は、配列の分割代入の構文、およびデータの性質に基づいた配列とオブジェクトの適切な使い分けの判断基準まで。
			③ 本細目では、数値データを動的に操作するための「Mathオブジェクト」の活用方法を学び、第4部「データ構造と動的生成」全体の総括を行う。Webサイト制作において、ランダムな画像をトップページに表示したり、確率に応じた演出を行ったりするなど、数学的な計算が必要となる場面は多い。JavaScriptには標準の組み込みオブジェクトとして`Math`が用意されており、これを利用することで複雑な計算処理を容易に実装できることを解説する。具体的には、乱数を生成する`Math.random()`、数値を切り上げる`Math.ceil()`、切り捨てる`Math.floor()`、四捨五入する`Math.round()`などの主要なメソッドの使用方法を詳説する。特に`Math.random()`は0以上1未満のランダムな小数を返すため、これを整数に変換して配列のインデックスとして利用する方法は、Web制作における定番のテクニックである。例えば、画像のファイル名が格納された配列から、ページを読み込むたびにランダムに一枚を選んで表示する「おみくじ」のような機能を実装する手順を示す。この過程で、配列の要素数（`length`）と乱数を組み合わせるロジックの組み立て方を理解させる。最後に、第4部の総括として、データの定義（配列・オブジェクト）、データの操作（ループ・条件分岐）、データの抽出（分割代入）、そしてデータの加工（Mathオブジェクトなど）という一連の流れを体系的に振り返る。Webページにおける「動的な生成」とは、静的なHTMLを書くことではなく、データという「素材」をJavaScriptという「道具」で加工し、最終的にDOMとしてブラウザに描画するプロセスであることを強調する。これまで学んだ個々の構文が、実際のWebアプリケーション構築においてどのように連携し機能するのかを統合的に理解させることで、次章から始まる「Webアニメーションの実装」や、より高度なインタラクションの実装へ向けての準備を整える。学生には、データ操作の基礎がWebデザインの自由度を大きく広げるものであることを認識させる。この細目で理解すべき範囲は、Mathオブジェクトを用いた基本的な数値計算と乱数生成の実装、およびデータ操作からDOM生成に至る一連のプロセスの理解まで。
		キーワード	① 分割代入 ② Mathオブジェクト ③ undefined ④ プロパティ ⑤ インデックス
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で学んだ分割代入を用いて、過去の授業（第17回など）で作成したコードのリファクタリングを試みること。特に、オブジェクトのプロパティに繰り返しアクセスしている箇所を見つけ、分割代入を適用することでコードがどのように簡潔になるかを確認する。また、Mathオブジェクトのメソッドを使用して、コンソール上でランダムな数値を生成したり、計算結果を確認したりする小さなプログラムを作成し、動作に慣れておくこと。 ◆次回授業の予習次回からは第5部「Webアニメーションの実装」に入るため、Webサイトにおけるアニメーションの役割について考えておくこと。CSSのみで実現できるアニメーション（transitionやanimationプロパティ）と、JavaScriptを用いるアニメーションの違いについて、一般的なWebサイトの事例を観察しながら整理しておくとよい。また、HTML要素のクラスをJavaScriptから操作する`classList`の基本的な使い方（第10回で学習済み）を復習しておくと、スムーズに学習に入れる。
19	Webアニメーションの効果と制御	科目の中での位置付け	本授業は、全30回のカリキュラムにおける第5部「Webアニメーションの実装」の初回にあたります。これまでの授業で習得したJavaScriptによるDOM操作やイベント処理の基礎知識を応用し、Webサイトに動的な表現を加えるための第一歩を踏み出します。静的な情報提示にとどまらず、ユーザー体験（UX）を向上させるためのインタラクションデザインの概念と、CSSとJavaScriptを連携させたアニメーション実装の基本手法を確立する重要な転換点となります。
		コマ主題細目	① Webサイトにおけるアニメーションの役割と効果的な設計論 ② CSSアニメーションの構造と@keyframesを用いた動きの定義 ③ JavaScriptによるクラス操作を通じたアニメーションの制御
		細目レベル	① 本細目では、Webデザインにおけるアニメーションの意義と、それがユーザー体験に与える影響について学術的な視点から詳説します。現代のWebサイトにおいて、アニメーションは単なる装飾や視覚的な娯楽のためだけに存在するものではありません。ユーザーの視線を重要なコンテンツへと自然に誘導する「視線誘導」や、ボタンクリックなどの操作がシステムに正しく認識されたことを伝える「フィードバック」、さらにはWebサイト全体の世界観やブランドイメージを強化する「演出」といった、機能的かつ心理的な役割を担っています。学生には、これらの目的を理解した上で、どのような場面でどのような動きを取り入れるべきかを論理的に判断できる能力を養います。また、テキストで紹介されている「心地よい動き」の概念についても深く掘り下げます。物理法則に基づいた自然な動き、すなわち「イージング（加速・減速）」を取り入れることで、デジタル上の表現に有機的な質感を与える手法について解説します。例えば、一定の速度で動くリニアな動きは機械的で冷たい印象を与えがちですが、動き出しをゆっくりにし、停止直前に減速するといった緩急をつけることで、ユーザーに安心感や高級感を与えることができます。逆に、過剰なアニメーションやタイミングの悪い動きは、ユーザーの閲覧を妨げ、不快感を与える「ノイズ」となり得る点についても警鐘を鳴らします。さらに、アニメーションの持続時間（デュレーション）についても触れます。Webサイト上のインタラクションにおいて、ユーザーが「待たされている」と感じない適切な時間はどの程度か、テキストに示された0.3秒などの具体的な数値を参考にしながら、人間の認知特性に基づいた時間設計の重要性を解説します。講義を通じて、学生は単にコードを書くだけでなく、ユーザー心理を考慮したアニメーション設計の基礎理論を習得します。これにより、技術的な実装に入る前の段階で、効果的かつ適切なアニメーションを計画するための土台を築きます。この細目で理解すべき範囲は、Webアニメーションの機能的役割から、イージングや適切な時間設定を含む心地よい動きの設計原則まで。
			② 本細目では、JavaScriptでアニメーションを制御するための前提となる、CSS側でのアニメーション定義方法について実践的に解説します。Web制作の現場において、複雑なアニメーションの挙動そのものをJavaScriptの演算のみで毎フレーム描画することは、パフォーマンスやコードの保守性の観点から推奨されない場合があります。代わりに、CSSの機能であるアニメーションプロパティとキーフレーム（@keyframes）を活用し、JavaScriptはあくまでその「開始の合図」を送る役割に徹するという、役割分担（関心の分離）の概念を理解させます。具体的には、まずアニメーションの開始状態と終了状態、そしてその間の変化の過程を定義する`@keyframes`ルールの構文について詳説します。ここでは、要素が画面の下からふわっと浮き上がって表示される「フェードインアップ」の動きを例に取り上げます。透明度を操作する`opacity`プロパティと、位置を移動させる`transform: translateY()`プロパティを組み合わせることで、洗練された動きを作成する手順を示します。初期状態では要素を透明かつ少し下に配置し、アニメーション終了時には不透明かつ元の位置に戻すというロジックをCSSで記述する方法を学びます。次に、定義したキーフレームを要素に適用するための`animation`関連プロパティについて解説します。アニメーションの名前を指定する`animation-name`、1回のアニメーションにかかる時間を指定する`animation-duration`、そしてアニメーションの進行速度の緩急を指定する`animation-timing-function`（イージング）の設定方法を習得します。特に重要な概念として、`animation-fill-mode: forwards;`を取り上げます。この設定を行わない場合、アニメーション終了後に要素が初期状態（透明な状態など）に戻ってしまう現象が発生するため、アニメーション終了時のスタイルを維持するためにこのプロパティが不可欠であることを、実演を通じて理解させます。学生は、JavaScriptが介入する前の段階として、CSSのみで完結するアニメーションの定義と挙動確認を確実に行えるようになることを目指します。この細目で理解すべき範囲は、@keyframesによるアニメーションの定義から、animationプロパティを用いた要素への適用と挙動設定まで。
			③ 本細目では、前段で定義したCSSアニメーションを、JavaScriptを用いて任意のタイミングで実行させるための実装手法を詳説します。静的にCSSを記述しただけでは、ページが読み込まれた瞬間にアニメーションが開始されてしまいますが、JavaScriptを介在させることで、ユーザーの操作や特定の条件に合わせてアニメーションを発火させることが可能になります。この制御の核心となる技術が、DOM要素のクラス属性を操作する`classList`プロパティです。授業ではまず、アニメーションを適用したいHTML要素を`querySelector`などで取得する手順を確認します。その後、取得した要素の`classList`プロパティが持つメソッド群、特に`add()`メソッドの使用方法に焦点を当てます。CSS側でアニメーション定義を含んだクラス（例: `.fadein`）を用意しておき、JavaScriptでそのクラスを対象要素に追加するというプロセスを実践します。この操作が行われた瞬間、ブラウザは要素に新しいクラスが適用されたことを検知し、CSSで定義されたアニメーションルールに従って描画を開始します。これが、Web制作における最も標準的かつ効率的なアニメーション制御のパターンであることを強調します。また、実装演習として、見出し要素に対してJavaScriptからクラスを付与し、下から浮き上がるアニメーションを実行させるコードを作成します。ここでは、単にコードを写すだけでなく、ブラウザのデベロッパーツールの「Elements」パネルを用いて、JavaScriptの実行によってHTMLのクラス属性がリアルタイムに変化する様子を目視確認させます。これにより、コード（原因）とブラウザ上の挙動（結果）の因果関係を明確に理解させます。さらに、テキストのコラムにある`getElementById`と`querySelector`の使い分けや違いについても触れ、要素取得のバリエーションについての知識も補強します。Java等の他言語経験がある学生に対しては、スタイルそのものを命令的に書き換えるのではなく、状態（クラス）を変化させることで宣言的にスタイルを適用するというWebフロントエンド特有のアプローチの違いについても意識させ、Web標準技術への適応を促します。この細目で理解すべき範囲は、JavaScriptによるDOM要素の取得から、classList.addを用いたクラス付与によるアニメーション発火のメカニズムまで。
		キーワード	① CSSアニメーション ② @keyframes ③ classList ④ イージング ⑤ インタラクション
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったアニメーションの実装手法について、自身のPC環境でコードを書き直し、動作を再現させてください。特に、CSSで定義したアニメーションがJavaScriptによるクラス付与のタイミングで正しく動作するかどうか、デベロッパーツールを用いてHTMLの属性変化を確認しながら復習することを推奨します。また、アニメーションの秒数や変化の幅（移動距離など）の数値を変更し、動きの印象がどのように変わるかを実験的に確認することで、パラメータ調整の感覚を養ってください。 ◆次回授業の予習次回は複数の要素に対してアニメーションを適用し、より複雑な表現を行う手法を学びます。予習として、Webサイトにおけるリスト表示や画像ギャラリーなどで、要素が一つずつ順番に表示されるような演出がどのような場面で使われているか、普段閲覧しているWebサイトを観察してみてください。また、プログラミングにおける「配列」や「繰り返し処理」の概念について、これまでの学習内容を振り返り、複数のデータを扱うための基本的な論理構造を再確認しておくと、次回の理解がスムーズになります。
20	複数要素のアニメーション制御	科目の中での位置付け	本講義は、全30回で構成されるWebデザインおよびプログラミング学習コースの第20回であり、第5部「Webアニメーションの実装」の第2回目にあたる。前回学習した単一要素へのアニメーション適用の基礎を発展させ、今回は複数の要素に対する複合的なアニメーションの実装や、動きの質を高めるための詳細なパラメータ調整について学ぶ。これにより、ユーザーの視覚に訴えかける洗練されたWeb表現の基盤を確立する重要な位置付けにある。
		コマ主題細目	① 複合的なアニメーション定義と複数要素への適用 ② アニメーションの挙動制御と状態維持 ③ CSSプロパティによる多彩な表現パターンの探求
		細目レベル	① Webサイトにおけるアニメーションは、単に要素が表示されるだけでなく、位置の移動と不透明度の変化を組み合わせることで、より自然で洗練された印象を与えることができる。本細目では、CSSの@keyframesルールを用いて、フェードイン効果（opacityの変化）とスライド効果（transform: translateの変化）を同時に定義する方法について詳しく解説する。具体的には、開始状態（0%）で要素を透明かつY軸方向に下げて配置し、終了状態（100%）で不透明かつ元の位置に戻すという一連のキーフレーム設定を記述させる。学生は既にJavaBronzeレベルの知識を有しているため、オブジェクト指向におけるクラスの継承やメソッドのオーバーライドといった概念との類似性を示唆しつつ、CSSにおけるクラス定義がスタイルの「ひな形」として機能することを説明する。さらに、JavaScriptを用いてHTMLドキュメント内の複数の要素を取得し、それらに対してアニメーション用のクラスを動的に付与する手法を実践する。ここでは、`document.querySelector`や`getElementById`による単一要素の取得に加え、アニメーション対象となる要素がページ内に複数存在する場合の考え方について概観する。JavaScript側で行う処理はあくまで「クラス名を追加する」というDOM操作のみであり、実際のアニメーション動作の詳細はCSS側に委譲するという役割分担（関心の分離）を明確に理解させることが重要である。このアプローチにより、コードの可読性が向上し、デザインの変更にも柔軟に対応できる保守性の高い実装が可能になることを示す。また、複数の要素に対して同時にクラスを付与した場合の挙動を確認し、ブラウザのレンダリングプロセスにおけるアニメーション開始のタイミングについても触れる。この細目で理解すべき範囲は、opacityとtransformを組み合わせた@keyframesの定義方法から、JavaScriptによるクラス付与を通じてWebページ上の要素を動かす基本的な実装フローまで。
			② アニメーションの実装において、単に動くだけでなく「どのように動くか」という質の向上はユーザー体験（UX）を大きく左右する。本細目では、CSSのアニメーション関連プロパティを用いた詳細な挙動制御について詳説する。まず、`animation-duration`プロパティによるアニメーションの所要時間の設定について解説する。時間が短すぎるとユーザーが変化を認識できず、長すぎると操作の妨げとなるため、適切な時間設定（例えば0.5秒から1秒程度）がデザイン上の重要事項であることを理解させる。次に、`animation-timing-function`プロパティを用いたイージング（加減速）の設定について解説する。物理法則に基づかない等速運動（linear）と、自然界の動きに近い加減速（ease、ease-in-outなど）の違いを視覚的に比較させ、Webデザインにおいて「心地よい動き」を実現するための数学的な曲線の概念を導入する。さらに、初学者が最も陥りやすい問題である「アニメーション終了後の状態」について、`animation-fill-mode`プロパティを中心に深く掘り下げる。デフォルトの設定では、アニメーションが終了すると要素は即座に開始前のスタイル（透明など）に戻ってしまう現象が発生する。これを防ぎ、アニメーション終了時のスタイル（不透明かつ所定の位置）を維持するために、値として`forwards`を指定する必要があるメカニズムを論理的に説明する。Java等のGUIプログラミングにおける描画更新ループとは異なり、Webのアニメーションは宣言的なステート（状態）の遷移として管理される特性を持つことを強調する。また、`animation-delay`を用いてアニメーションの開始を意図的に遅らせる手法についても触れ、演出のタイミング調整の基礎を固める。この細目で理解すべき範囲は、animation-duration、timing-function、fill-mode、delayの各プロパティの役割と、それらを組み合わせて意図通りの挙動を実現する設定方法まで。
			③ Webアニメーションの魅力は、基本的なフェードインだけでなく、多様な動きのバリエーションによってコンテンツの意味や重要度を強調できる点にある。本細目では、CSSの`transform`プロパティの値を変更することで実現可能な、様々なアニメーションパターンについて詳説する。前回および前項で扱ったY軸方向の移動（translateY）に加え、X軸方向への移動（translateX）による横からのスライドイン、`scale`関数を用いた拡大・縮小アニメーション、`rotate`関数を用いた回転アニメーションの実装方法を体系的に解説する。これらの変形処理は、ブラウザのレンダリングエンジンにおいてGPUアクセラレーションが有効になりやすく、パフォーマンスの観点からも推奨される手法であることを技術的な背景として補足する。授業の進行としては、JavaScriptのコード（クラスを付与するロジック）は一切変更せず、CSSの記述のみを書き換えることで全く異なるアニメーション効果が得られる実演を行う。これにより、構造（HTML）、振る舞い（JavaScript）、表現（CSS）を分離することのアーキテクチャ上の利点を学生に強く印象付ける。具体的には、「注意を引きたいボタンには拡大効果」「読み物コンテンツには穏やかなフェードイン」「遊び心のある要素には回転」といったように、デザインの意図に応じた適切なアニメーションの選択指針についても議論する。また、各変形関数を組み合わせる（例えば、回転しながら拡大するなど）方法についても触れ、表現の幅が無限に広がる可能性を示す。最後に、これら多様なアニメーションを一つのWebページ内で乱用することの弊害（視覚的なノイズ）についても警鐘を鳴らし、節度ある実装の重要性を説く。この細目で理解すべき範囲は、transformプロパティの主要な関数（translate, scale, rotate）を用いたアニメーションバリエーションの実装と、それらの使い分けの指針まで。
		キーワード	① animation-timing-function ② animation-fill-mode ③ animation-delay ④ transform ⑤ opacity
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったCSSアニメーションの各プロパティについて、それぞれの役割と設定値による挙動の違いを整理してまとめること。特に、`animation-fill-mode: forwards`を指定しなかった場合にどのような表示になるか、また`animation-timing-function`の値を`linear`や`ease`に変更した際に動きの質感がどう変わるかについて、実際にコードを書いて確認することが望ましい。さらに、`transform`プロパティを用いた移動、拡大、回転の記述方法を復習し、JavaScriptからクラスを付与することでアニメーションが開始される一連の流れを再確認しておくこと。 ◆次回授業の予習次回の授業では、複数の要素を順番に表示させる「遅延実行」について学習する。そのため、プログラミングにおける「配列」の概念と、インデックス（添え字）を用いたデータアクセスの方法について復習しておくこと。また、JavaScriptにおける`setTimeout`関数の基本的な役割について調べておくことが推奨される。アニメーションを一度にすべて実行するのではなく、時間差をつけて実行することでどのような視覚効果が生まれるか、普段利用しているWebサイトやアプリのアニメーションを観察し、その効果について考察してみること。
21	遅延実行と画像アニメーション	科目の中での位置付け	本Webデザイン演習科目において、第21回は「第5部：Webアニメーションの実装」の第3回目に位置する。前回までは、単一または複数の要素に対してCSSクラスの着脱を行うことで、即時的なアニメーションを開始する手法を学んだ。今回はそこに「時間」の概念を導入する重要な回である。JavaScriptの`setTimeout`関数を用いて処理の実行タイミングを制御し、複数の画像が時間差で次々と表示される、より洗練された視覚表現の実装を目指す。これは、単なる動的な装飾にとどまらず、Webブラウザにおける非同期処理の挙動を理解するための入り口としても機能する重要な単元である。
		コマ主題細目	① 複数の要素の取得と一括操作の準備 ② setTimeout関数による処理の遅延実行 ③ インデックスを活用した段階的アニメーションの実装
		細目レベル	① 本主題では、Webページ内に配置された複数の画像要素に対して、JavaScriptから一括してアクセスするための手法について解説する。これまでの授業では、主に`querySelector`メソッドを用いて、特定のIDを持つ要素や、最初に合致した要素単体を取得し操作を行ってきた。しかし、画像ギャラリーのように同じ種類の要素が多数並ぶ構成において、それらを個別にID指定して取得することは非効率的であり、コードの保守性も著しく低下する。そこで、CSSセレクタに合致するすべての要素を取得可能な`querySelectorAll`メソッドの利用法を詳説する。学生には、`querySelectorAll`メソッドが返す値が、単一の要素ではなく「NodeList」と呼ばれるコレクション（要素の集合体）であることを理解させる必要がある。Java言語の学習経験がある学生にとっては、これを配列や`List`のようなものとして捉えることが理解の助けとなるが、JavaScriptの純粋な配列（Array）とは異なるオブジェクトである点にも留意させる。具体的には、NodeListが保持する各要素に対して処理を行うためには、`for`文などのループ構造を用いて、インデックス番号を介してアクセスする必要があることを解説する。また、JavaScriptによる制御の前段階として、HTMLとCSSの準備がいかに重要であるかを再確認させる。今回実装する「順番に表示されるアニメーション」を実現するためには、初期状態としてCSS側で要素を透明（`opacity: 0`）にし、かつ変化を滑らかにするための`transition`プロパティを設定しておく必要がある。JavaScriptはあくまで「きっかけ（トリガー）」として機能し、実際の描画変化はCSSが担うという役割分担を意識させ、要素の取得からスタイルの初期設定までの一連の流れを実践させる。この細目で理解すべき範囲は、querySelectorAllメソッドを用いて複数のHTML要素をNodeListとして取得し、ループ処理を用いて各要素へアクセスするための準備が整うまで。
			② 本主題では、JavaScriptにおける関数の実行タイミングを制御するための`setTimeout`関数について詳説する。これまでのプログラムは、コードが記述された順序に従って上から下へと即座に実行されていたが、Webデザインの演出においては「少し待ってから動かす」という時間的な制御が求められる場面が多々ある。`setTimeout`関数は、第一引数に実行したい関数（コールバック関数）、第二引数に遅延させる時間をミリ秒単位で指定することで、指定時間が経過した後に処理を実行する機能を持つ。ここで学生に特に強く理解させるべき概念は、JavaScriptの非同期的な挙動である。Java言語における`Thread.sleep()`メソッドなどは、プログラムの実行そのものを一時停止（ブロック）させるが、JavaScriptの`setTimeout`は処理を停止させるわけではない。ブラウザは`setTimeout`の命令を受け取ると、「指定時間後にこの処理を行う」という予約だけを行い、即座に次の行のコードの実行へと移る。この「ノンブロッキング」な性質のおかげで、タイマーの待機中でもブラウザはフリーズすることなく、ユーザーの操作を受け付けたり画面を描画したりすることが可能となっている。授業では、単純なコンソール出力を用いた実験を行い、`setTimeout`で指定したメッセージが他の即時実行されるコードよりも後に表示されることを確認させる。その上で、前回の授業で学んだCSSクラスの付与処理（`classList.add`）を`setTimeout`の中に記述することで、ページ読み込みから一瞬遅れて要素が表示される仕組みを解説する。アロー関数を用いた記述方法についても復習し、簡潔にコールバック関数を定義する手法を定着させる。この細目で理解すべき範囲は、setTimeout関数の基本的な構文とノンブロッキングな動作特性を理解し、指定した時間が経過した後に特定の処理（クラスの付与など）を実行できるようになるまで。
			③ 本主題では、前項で学んだ要素の取得（NodeList）と遅延実行（`setTimeout`）を組み合わせ、複数の画像が「順番に」表示されるアニメーションを実装する。単にすべての画像に対して同じ遅延時間を設定したのでは、全員が一斉に遅れて表示されるだけであり、「順番に」という演出にはならない。そこで、ループ処理における変数（インデックス `i`）を活用し、各要素ごとに異なる遅延時間を動的に計算するロジックを詳説する。具体的には、`for`文を用いて画像要素のリストを走査し、`i`番目の画像に対して `setTimeout` を設定する際、遅延時間を `i * 100`（ミリ秒）のように記述する手法を解説する。この計算により、0番目の要素は0ミリ秒後（即時）、1番目の要素は100ミリ秒後、2番目の要素は200ミリ秒後というように、インデックスが増えるごとに実行タイミングがずれていくことになる。学生には、この計算ロジックをトレースさせ、ループ自体は一瞬で回りきるが、セットされたタイマーが五月雨式に発火することで、視覚的な「時間の流れ」が生まれる仕組みを深く理解させる。さらに、遅延時間の係数（上記の例では100）を変更することで、アニメーションのテンポやリズムを調整できることを実践を通じて体感させる。演出の意図に合わせて適切な時間設定を行うことは、Webデザイナーにとって重要なスキルである。また、テキストで紹介されている「ランダムな順序で表示させる」といった応用例についても触れ、インデックス以外の値を利用することで多様な表現が可能になることを示唆する。最終的に、作成したコードがWebページ上で正しく動作し、心地よいアニメーション効果が得られることを確認し、コード記述の順序と実際の動作順序の関係性を完全に把握させる。この細目で理解すべき範囲は、ループ変数を活用して各要素の遅延時間を動的に計算し、複数の要素が流れるように順番にアニメーション表示される視覚効果を実装できるまで。
		キーワード	① setTimeout ② 非同期処理 ③ querySelectorAll ④ NodeList ⑤ 遅延実行
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱った`setTimeout`関数を使用して、Webブラウザのコンソールに異なるタイミングでメッセージを表示させる実験を行ってみること。例えば、3秒後に「表示開始」、その1秒後に「完了」と表示させるにはどのようにコードを記述すればよいか、時間の計算ロジックを再確認すること。また、`querySelectorAll`で取得した要素の数（`length`プロパティ）を確認し、`for`文のループ条件が正しく設定されているかを見直すことで、配列操作とループ処理の基礎を固めること。 ◆次回授業の予習次回は、Webページをスクロールした際に要素が画面内に入ったことを検知してアニメーションを開始する手法を学ぶ。これには「Intersection Observer API」という機能を使用する。一般的なWebサイトにおいて、スクロールするとふわっと画像が現れる演出がどのように実装されているか、日常的に閲覧するサイトを観察し、その挙動（一度だけ動くのか、スクロールするたびに動くのかなど）に注目しておくこと。また、ブラウザのスクロールイベントとパフォーマンスの関係について、一般的な課題意識を持っておくことが望ましい。
22	Intersection Observerによるスクロール連動	科目の中での位置付け	本授業は、第5部「Webアニメーションの実装」の最終回にあたり、これまで学習したCSSアニメーションや遅延処理の知識を統合し、現代のWebデザインにおいて標準的となっている「スクロール連動型アニメーション」の技術を習得する重要な位置付けにある。特に、パフォーマンスに優れたIntersection Observer APIの利用法を学ぶことは、次回の総合演習における高品質なWebサイト構築の基盤となる。
		コマ主題細目	① Intersection Observer APIの基本概念と導入 ② 交差判定の詳細な制御とオプション設定 ③ 複数要素に対するスクロール連動アニメーションの実装
		細目レベル	① Webサイトにおいて、ユーザーのスクロール操作に応じて画像やテキストがふわっと表示される演出は、視覚的な魅力を高める手法として非常に一般的である。この機能を実装するために、かつてはwindowオブジェクトに対するscrollイベントリスナーを使用することが通例であった。しかし、scrollイベントは1ピクセルのスクロールごとに頻繁に発火するため、その都度要素の位置計算を行うとブラウザへの負荷が極めて高く、ページの動作が重くなるというパフォーマンス上の重大な欠点があった。これに対し、本授業で導入するIntersection Observer APIは、ブラウザの内部処理として効率的に要素の交差（画面内に入ったかどうか）を監視する仕組みを提供するものである。まず、このAPIの基本的な概念として、「監視する側（Observer）」と「監視される側（Target）」という二つの役割が存在することを理解させる。JavaScriptにおいてこの機能を利用するためには、IntersectionObserverクラスのインスタンスを生成する手順を踏む必要がある。Java言語の学習経験がある学生にとっては、new演算子を用いてクラスのインスタンスを生成する概念は馴染み深いものであるが、JavaScriptのIntersectionObserverコンストラクタでは、引数として「交差した時に実行するコールバック関数」と「監視の条件設定を行うオプションオブジェクト」の二つを渡す点が特徴的である。このコールバック関数は、監視対象の要素が設定された交差条件を満たした瞬間に、ブラウザによって自動的かつ非同期に実行される仕組みとなっている。授業では、基本的な実装の流れとして、まず定数にIntersectionObserverのインスタンスを代入し、その後にobserveメソッドを用いて具体的なHTML要素を監視対象として登録するプロセスを詳説する。この一連の流れにより、スクロールイベントをJavaScript側で常時監視し続ける従来の非効率な処理から脱却し、必要なタイミングでのみ処理を実行する効率的なプログラム構造が実現できることを解説する。また、このAPIはメインスレッドをブロックせずに実行されるため、ユーザーのスクロール体験を阻害することなく、スムーズなWebブラウジングを提供できる点も、Webデザインを制御するエンジニアとして理解しておくべき重要な利点である。この細目で理解すべき範囲は、Intersection Observer APIの役割とメリットを理解し、基本的なインスタンス生成と監視開始の構文を記述できるところまで。
			② Intersection Observerを用いたより精密な制御ロジックの構築について解説する。オブザーバーのインスタンス生成時に渡すコールバック関数には、引数としてentriesという配列が渡される。この配列には、監視対象となっている要素の状態変化に関する情報がIntersectionObserverEntryオブジェクトとして格納されており、プログラミングにおいてはこれをループ処理などで取り出して個別に確認する必要がある。特にWebデザインの制御において重要なプロパティがisIntersectingである。これは監視対象の要素が交差領域（通常はブラウザの表示領域）に入っている場合にtrue、入っていない場合にfalseを返す真偽値である。この値をif文などの条件分岐に用いることで、「画面に入った瞬間」を正確に検知し、特定のアニメーションを開始するといったロジックが可能となる。また、交差判定のタイミングや範囲を微調整するためのオプション設定についても詳説する。コンストラクタの第2引数に渡すオプションオブジェクトには、root、rootMargin、thresholdという三つの主要なプロパティを設定できる。rootは監視の基準となる枠を指定するもので、省略時やnull指定時はブラウザのビューポート（表示領域全体）が基準となる。特に利用頻度が高いのがrootMarginであり、これはCSSのmarginと同様の記述形式で交差判定の領域を拡大・縮小できる機能を持つ。例えば、値に「-100px」などを指定することで、画面の端よりも少し内側に判定ラインを設定し、要素が画面内に十分に入ってからアニメーションを開始させるといった演出上の調整が可能になる。thresholdは交差の割合を0.0から1.0の数値で指定し、要素の何割が見えたらコールバック関数を発火させるかを定義するものである。これらのプロパティを適切に組み合わせることで、デザイナーの意図を反映した繊細なインタラクションが実現できることを理解させる。さらに、一度アニメーションが完了した要素に対しては、unobserveメソッドを使用して監視を解除することが、メモリリークを防ぎ、Webページのパフォーマンスを維持する上で重要である点も併せて解説し、リソース管理の意識を涵養する。この細目で理解すべき範囲は、コールバック関数内での交差判定ロジックの記述と、オプションによる判定領域の調整方法まで。
			③ これまでに学習したIntersection Observerの知識とDOM操作の技術を統合し、実際のWebページにおいて複数の要素をスクロールに応じて順次アニメーション表示させる実践的な実装方法を詳説する。まず、HTMLとCSSの準備段階として、アニメーションさせたい要素に対して初期状態では非表示（opacity: 0）や位置のズレ（transform: translateYなど）を設定し、アニメーション用のクラスが付与された際に本来の表示状態へと遷移するCSSトランジションを定義しておくことの重要性を説く。JavaScript側では、document.querySelectorAllメソッドを用いて監視対象となる複数の要素（例えばセクションごとの見出しや画像など）をNodeListとして一括で取得する。次に、Intersection Observerのインスタンスを生成し、コールバック関数を定義する。この関数内では、前述のisIntersectingプロパティを確認し、交差している場合にはentry.targetを用いて対象のHTML要素に直接アクセスし、classList.addメソッドでアニメーション用のCSSクラスを付与する処理を記述する。ここでJavaの配列操作やループ処理の知識を応用し、取得した複数の要素に対してforEachメソッドを使用し、個別にobserver.observeを実行して監視対象に登録する流れを解説する。これにより、ページ内に多数存在する要素が、それぞれのタイミングで画面内に現れた瞬間に個別にアニメーションが発火する仕組みが完成する。また、一度表示された要素が画面外に出た際にアニメーションをリセットして再度実行可能にするか、あるいは一度きりの表示としてその後の監視を終了するかといった挙動の違いは、else節でクラスを削除するか、あるいはunobserveで監視を終了するかによって制御できることを、実際のコード記述を通じて理解させる。最終的に、ブラウザのデベロッパーツールのコンソールや要素パネルを活用し、スクロールに伴ってHTML要素にクラスが動的に付与・削除される様子を目視で確認しながらデバッグを行う手法についても触れ、エラーのない確実な実装能力を養う。Web制作の現場では、このようなインタラクションがユーザーの注目を集めるために頻繁に使用されるため、その実装パターンを完全に習得させることを目指す。この細目で理解すべき範囲は、CSSとJavaScriptを連携させ、複数の要素に対するスクロール連動アニメーションを完成させるところまで。
		キーワード	① Intersection Observer ② 交差判定 ③ コールバック関数 ④ isIntersecting ⑤ rootMargin
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習 Intersection Observer APIを用いたスクロール連動アニメーションの実装手順を復習してください。特に、従来のscrollイベントと比較した際のメリットや、オブザーバーのインスタンス生成、監視の開始（observe）、監視の解除（unobserve）といった一連のフローを再確認しましょう。また、オプション設定であるrootMarginが判定タイミングにどのように影響するか、自分の言葉で説明できるように整理しておいてください。 ◆次回授業の予習次回からはいよいよ総合演習に入ります。これまでに学んだ知識を総動員して一つのWebページを作成することになるため、テキストの冒頭部分に目を通し、作成するWebページの全体像やディレクトリ構成を確認しておいてください。特に、これまでに学習したローディング画面の実装やボタン操作などの機能が、実際のサイト構成の中でどのように配置されるか、完成イメージを持って授業に臨んでください。
23	総合演習準備と画面遷移	科目の中での位置付け	本授業は、全30回のカリキュラムにおける第6部「Webサイト制作演習」の初回にあたる。これまでに習得した基本文法、DOM操作、イベント処理、データ構造、アニメーションといった個別の技術要素を統合し、実用的なWebページを構築する総合的な実践フェーズへと移行する重要な位置付けにある。特に本回では、Webサイトの第一印象を決定づけるローディング画面の実装を通じて、ページの読み込みプロセスと連動したDOM操作およびCSSとの連携手法を再確認し、以降の演習の基礎を固める。
		コマ主題細目	① 総合演習のプロジェクト概要と構造設計の理解 ② CSSによるローディング画面のレイアウトと状態管理 ③ loadイベントを活用した画面遷移制御の実装
		細目レベル	① 本主題では、テキストに基づき、これから数回にわたって作成するWebページの完成形とその機能要件を詳細に分析し、プロジェクトの全体像を把握させる。作成するWebページには、ページ読み込み時のローディング画面、マウス操作に反応する画像ギャラリー、ハンバーガーメニューによるスライドナビゲーション、そしてスクロールに連動した要素のフェードイン表示など、現代のWebデザインにおいて標準的とされる機能が含まれていることを解説する。これらの機能が、これまで学習してきた「イベントリスナー」「クラス操作」「配列処理」「Intersection Observer」といった技術の組み合わせによって実現されることを示し、既習知識と実践的応用の結びつきを明確にする。次に、演習に使用するプロジェクトフォルダのディレクトリ構成を確認させる。HTMLファイル、CSSファイル、JavaScriptファイル、および画像リソースがどのように配置され、相互に参照されているかを理解することは、開発環境におけるトラブルシューティングの基本である。特に、今回提供されるベースとなるHTML構造について、デベロッパーツールのElementsパネルを用いて視覚的に確認させる指導を行う。具体的には、ローディング画面となる要素がメインコンテンツと並列、あるいは包含関係としてどのようにマークアップされているか、そしてそれらがブラウザ上でどのようにレンダリングされる初期状態にあるかを把握させる。また、JavaScriptによるDOM操作を効率的に行うためには、HTMLにあらかじめ適切なIDやクラス属性が付与されている必要があることを説明する。これから記述するスクリプトが、どのHTML要素をターゲットとし、どのようなタイミングで実行されるべきかを論理的に整理させることで、コーディング前の設計段階の重要性を認識させる。ただコードを書き写すのではなく、機能要件を満たすために必要なロジック（例えば、読み込み完了を検知する、要素を取得する、クラスを付け替える等）を自ら組み立てる思考プロセスを重視し、エンジニアとしての設計能力を涵養する。この細目で理解すべき範囲は、総合演習で作成するWebページの機能要件を把握し、プロジェクトのファイル構成およびHTMLのDOM構造を正しく理解するまで。
			② 本主題では、テキストの内容に基づき、ローディング画面の視覚的な実装と、JavaScriptでの制御を前提としたCSS設計について詳説する。ローディング画面は、Webページのリソースが完全に読み込まれるまでの待機時間において、ユーザーの離脱を防ぎ、システムが正常に動作していることを伝えるための重要なユーザーインターフェース（UI）である。まず、CSSを用いてローディング画面をブラウザのビューポート全体に覆いかぶせるレイアウト手法を解説する。`position: fixed` プロパティを使用して要素を画面の所定位置に固定し、`width` および `height` を100%に設定することで全画面表示を実現する方法、さらに `z-index` プロパティを用いて他のすべてのコンテンツよりも前面（最上位レイヤー）に配置するスタッキングコンテキストの概念について理解を深めさせる。次に、JavaScriptとCSSの役割分担について重点的に指導する。JavaScriptは「要素のスタイルを直接書き換える」のではなく、「要素の状態（ステート）を変更する」役割を担い、実際の見た目の変化はCSSが担当するというモダンなWeb開発の原則を説明する。具体的には、JavaScriptによって特定のクラス（例: `loaded` クラス）がHTML要素に付与された際、CSSのセレクタがその変化を検知し、`opacity` プロパティを0にする、あるいは `visibility` プロパティを `hidden` に変更するといったスタイル定義を行う。この「クラスの着脱による状態管理」の手法は、プレゼンテーション（見た目）とロジック（振る舞い）を分離し、保守性の高いコードを記述するために不可欠である。授業では、実際にCSSファイルを編集し、ローディング画面の背景色やロゴの配置などを定義させるとともに、状態変化時の挙動を記述させる。また、JavaScriptを記述する前の段階として、ブラウザのデベロッパーツール上で手動でクラス属性を追加・削除し、CSSで定義したスタイルが正しく適用されるか、意図した通りに画面の表示・非表示が切り替わるかを検証させる。このプロセスを通じて、問題が発生した際に原因がCSSにあるのかJavaScriptにあるのかを切り分けるデバッグ能力の基礎を養う。この細目で理解すべき範囲は、CSSを用いた全画面オーバーレイの実装方法と、クラスの着脱を利用した表示状態の制御（状態管理）の概念を理解するまで。
			③ 本主題では、テキストの内容に基づき、JavaScriptを用いてページの読み込み完了を検知し、ローディング画面からメインコンテンツへスムーズに遷移させる処理を実装する。ここでは、Webブラウザにおけるリソースの読み込みプロセスと、イベント発火のタイミングについて深く掘り下げる。具体的には、`window` オブジェクトに対する `load` イベントについて詳説する。DOMツリーの構築完了時点で発火する `DOMContentLoaded` イベントとは異なり、`load` イベントは画像やスタイルシート、外部スクリプトなど、ページ内の全てのリソースの読み込みが完了した時点で発火することを理解させる。ローディング画面の目的が「全てのコンテンツの準備が整うまで待機させること」である以上、この `load` イベントこそが画面遷移のトリガーとして適切であることを論理的に説明する。実装においては、まず `querySelector` 等を用いてローディング画面の要素を取得し、`window.addEventListener('load', ...)` を用いてイベントリスナーを設定する手順を解説する。そして、イベントが発火したタイミングで、対象要素の `classList` を操作し、前項でCSSに定義した「非表示用のクラス（例: `loaded`）」を追加するコードを記述させる。さらに、単に表示を切り替えるだけでなく、ユーザー体験（UX）を向上させるためのアニメーション制御についても触れる。CSSの `transition` プロパティと連携させることで、クラスが付与された瞬間にパッと消えるのではなく、徐々に透明になっていくフェードアウト効果を実現する仕組みを解説する。また、非同期処理的な観点から、処理の流れを整理させる。ブラウザがリソースを読み込み（待機）、読み込み完了通知（イベント）を受け取り、JavaScriptがDOMを操作し、その結果としてブラウザがスタイルの再計算と描画を行うという一連のサイクルをイメージさせる。さらに、ローディングのアニメーションが完了した後に、要素を完全にDOM上から隠蔽するための `visibility: hidden` や `display: none` への移行の必要性や、CSSアニメーションの完了を待つためのタイミング調整の考え方についても言及し、見た目の美しさとプログラムの堅牢性を両立させる実装能力を涵養する。この細目で理解すべき範囲は、`load` イベントを用いた読み込み完了の検知方法と、クラス操作によるアニメーション連携を通じた画面遷移の実装プロセスを理解するまで。
		キーワード	① loadイベント ② classList ③ transitionプロパティ ④ 非同期処理 ⑤ z-index
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で実装したローディング画面の仕組みについて、HTMLの構造、CSSによる重ね合わせとスタイル定義、JavaScriptによるイベント検知とクラス操作という3つの側面から整理すること。特に、ブラウザの読み込みプロセスにおいて、どのタイミングでイベントが発火し、画面が切り替わるのか、処理の流れを頭の中でシミュレーションできるようにしておくこと。また、CSSのクラス着脱によってアニメーションが動作する原理について、自身の言葉で説明できるように振り返りを行うこと。 ◆次回授業の予習次回の授業では、マウス操作に応じた画像ギャラリーの実装を行うため、複数のHTML要素をJavaScriptでまとめて取得し、それぞれに対して処理を行う方法について確認しておくこと。特に、配列やリスト形式のデータを扱うための構文や、繰り返し処理の基本的な考え方について整理しておくと、次回のスムーズな理解につながる。また、マウスカーソルが要素に乗ったときや離れたときに発生するイベントについて、どのような種類があるか調べておくこと。
24	画像ギャラリーの実装	科目の中での位置付け	本授業は、第6部「Webサイト制作演習」の第2回目にあたり、Webサイトで頻繁に使用される画像ギャラリーの実装を通じて、より実践的なDOM操作とイベント処理を習得する位置付けにあります。前回学んだ画面遷移の実装に加え、今回はユーザーの能動的な操作（マウスオーバー）に対するインタラクティブな反応の実装に焦点を当てます。特に、複数の要素に対して同一の処理を効率的に適用するためのループ処理の手法は、今後のWeb開発において必須のスキルとなります。
		コマ主題細目	① 画像ギャラリーのHTML構造解析と単一要素に対するマウスオーバー効果の実装 ② カスタムデータ属性を活用したメイン画像の動的な切り替え処理の実装 ③ forEachメソッドとquerySelectorAllを用いた複数要素へのイベント一括登録
		細目レベル	① 画像ギャラリーのHTML構造解析と単一要素に対するマウスオーバー効果の実装: この細目では、Webサイトにおける画像ギャラリーの一般的な構成要素とその制御方法の基礎について解説します。まず、メイン画像を表示する領域と、選択肢となるサムネイル画像リストというHTML構造の関係性を理解させます。具体的には、大きな画像を表示するためのimg要素と、その下に並ぶ複数のサムネイル用img要素がどのように配置されているかを確認します。JavaScriptでこれらを操作するためには、それぞれの要素を適切に取得する必要がありますが、まずは基本となる「1つのサムネイルにカーソルを合わせたとき」の挙動から実装を始めます。JavaBronzeレベルの知識を持つ学生にとって、オブジェクトの取得やメソッドの呼び出しは既知の概念ですが、Web制作においては「どのタイミングで」「どのスタイルを変更するか」というUIの視点が重要になります。ここでは、ユーザーがサムネイルにマウスカーソルを乗せたこと（mouseoverイベント）を検知し、その視覚的フィードバックとしてサムネイル画像の透明度を変更する処理を記述します。具体的には、CSSで定義したフェード用クラスをJavaScriptから付与するのではなく、直接スタイルプロパティを操作する方法や、あるいはCSSトランジションと組み合わせたクラスの着脱について検討します。テキストのアプローチに従い、まずは特定の1つのサムネイル要素を取得し、それに対してaddEventListenerを用いてmouseoverイベントを設定する手順を実践します。この段階ではループ処理を使用せず、個別の要素に対してコードを記述することで、イベントリスナーの基本的な動作原理と、イベント発生時に実行される関数（イベントハンドラ）の流れを確実に把握させます。また、マウスが離れた際（mouseout）に元の状態に戻す処理の必要性についても触れ、ユーザーインターフェースとしての完成度を高めるための配慮についても言及します。このように、複雑な機能を最小単位に分解して実装することで、次項以降で扱う動的な画像切り替えや複数要素への展開への足掛かりとします。この細目で理解すべき範囲は、HTML要素の取得から単一要素へのマウスイベント設定、およびイベント発火時のスタイル変更の基本動作まで。
			② この細目では、サムネイルへの操作に連動してメイン画像を切り替えるロジックの中核部分について解説します。画像ギャラリーの本質的な機能は、サムネイルを選択することで、対応する大きな画像がメインエリアに表示されることです。これを実現するためには、HTMLのimg要素が持つsrc属性をJavaScriptを使って動的に書き換える必要があります。ここでは、サムネイル画像が保持している情報（画像パス）を取得し、それをメイン画像のsrc属性に代入するというデータの流れを理解させます。特に重要な概念として、HTML5で導入されたカスタムデータ属性（data属性）の活用について詳説します。サムネイル用の画像とメイン表示用の画像が異なるファイル（例えば、サムネイルは低解像度や正方形にトリミングされたもので、メインは高解像度のもの）である場合、単にサムネイルのsrc属性をコピーするだけでは意図した画像を表示できません。そこで、サムネイルのHTMLタグ内に「data-image」のような独自の属性を定義し、そこにメイン画像のパスを格納しておく手法を学びます。JavaScript側からは、要素のdatasetプロパティを通じてこのカスタムデータ属性にアクセスできることを示し、JavaにおけるMapやオブジェクトのフィールドへのアクセスと類似した概念として説明することで理解を促します。実装手順としては、前項で設定したmouseoverイベントの中で、イベントが発生したターゲット要素（サムネイル）のdatasetから画像パスを取り出し、それをメイン画像の要素（id="main"などで取得済み）のsrc属性にセットするという一連の処理フローを構築します。このプロセスを通じて、静的なHTMLファイルに対してJavaScriptがどのように介入し、コンテンツの内容そのものを動的に変更できるかというDOM操作の強力な機能を体験させます。また、属性値の取得や設定における文字列操作の注意点や、パスが正しく設定されていない場合のエラー挙動についても触れ、堅牢なコード記述の重要性を説きます。この細目で理解すべき範囲は、src属性の操作による画像の切り替え方法と、datasetプロパティを用いたカスタムデータ属性の取得および活用方法まで。
			③ この細目では、これまでに作成した機能をすべてのサムネイル画像に対して効率的に適用するための手法について解説します。前項までは単一の要素に対して個別にイベントを設定していましたが、サムネイルの数が増えるたびにコードを複製するのは非効率であり、保守性も低下します。そこで、プログラミングの基本である「繰り返し処理」を用いてコードを最適化します。まず、document.querySelectorAllメソッドを使用して、特定のクラス名を持つすべてのサムネイル要素をNodeList（配列に似たリスト構造）として一度に取得します。Javaの配列やリスト操作に慣れ親しんでいる学生にとって、複数のデータをまとめて扱う概念は馴染み深いものですが、JavaScriptにおける反復処理の記述方法、特にforEachメソッドの特有の記法について重点的に解説します。forEachメソッドは、リストの各要素に対して実行したい処理（コールバック関数）を引数として受け取ります。ここでは、アロー関数を用いたモダンな記述方法を採用し、引数として渡される各要素（個々のサムネイル）に対して、①で学んだイベントリスナーの登録と、②で学んだ画像切り替え処理を記述していく手順を実践します。このリファクタリング（コードの整理・改善）の過程を通じて、冗長なコードが洗練された短いコードに生まれ変わる様子を目の当たりにさせ、プログラミングにおける抽象化と効率化の重要性を認識させます。また、ループ内での変数のスコープ（有効範囲）についても触れ、各反復で扱われる「element」変数が、その回に処理されている特定のサムネイル要素を指していることを明確にします。さらに、forEachを使用することで、将来的にHTML側でサムネイルの数が増減しても、JavaScriptのコードを変更することなく自動的に対応できるというメリットについても強調します。最後に、これまでの学習内容を統合し、マウスオーバーによるスタイル変更とメイン画像の切り替えが、すべてのサムネイルでスムーズに動作することを確認し、完成した画像ギャラリーの挙動を検証します。この細目で理解すべき範囲は、querySelectorAllによる複数要素の取得から、forEachメソッドを用いた繰り返し処理によるイベントリスナーの一括登録の実装まで。
		キーワード	① forEach ② querySelectorAll ③ dataset ④ mouseover ⑤ src属性
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回実装した画像ギャラリーのコードを見直し、特に複数の要素に対して一括で処理を適用する流れを再確認してください。HTML側で定義したカスタムデータ属性がJavaScript側でどのように取得され、利用されているかをトレースし、データの受け渡しの仕組みを整理しておくことが重要です。また、アロー関数を用いた記述法と従来の関数定義の違いについても、これまでの学習内容と照らし合わせて確認しておきましょう。 ◆次回授業の予習次回の授業では、クリック操作によって表示・非表示が切り替わるスライドメニューの実装を行います。Webページ上での要素の配置を制御するCSSのpositionプロパティや、画面外への配置方法、およびクラスの着脱によって要素を表示させる基本的な仕組みについて、これまでの知識を整理しておいてください。また、CSSトランジションを用いた滑らかな動きの表現についても想定しておくと、次回の実装がスムーズに進みます。
25	スライドメニューの実装	科目の中での位置付け	本講義は全30回の第6部「Webサイト制作演習」の3回目に位置し、これまでに学習したDOM操作、イベント処理、配列操作、アニメーション制御を統合して、実用的なWebサイトのUIパーツを構築する段階にあります。前回作成した画像ギャラリーに続き、今回はモバイル端末やレスポンシブデザインにおいて標準的なナビゲーション手法である「スライドメニュー（ハンバーガーメニュー）」を実装します。ここでは、CSSによるスタイル制御とJavaScriptによるクラス操作を連携させ、動的な画面レイアウト変更を実現する手法を習得します。
		コマ主題細目	① スライドメニューの構造理解と開閉ロジックの実装 ② ハンバーガーボタンのアニメーション連携と状態管理 ③ 繰り返し処理を用いたメニュー項目の順次表示演出
		細目レベル	① 本細目では、Webサイトにおけるナビゲーションの重要なパターンであるスライドメニューの基本的な実装方法について解説します。まず、HTMLとCSSによって構築された初期状態の構造を理解することから始めます。スライドメニューは通常、`position: fixed` などのCSSプロパティを用いて画面の表示領域外（例えば右端の外側）に配置されており、ユーザーの操作があるまで視界に入らないように設計されています。JavaScriptの役割は、この隠されたメニューを可視領域に移動させるための「トリガー」を引くことにあります。具体的には、`document.querySelector` メソッドを用いてメニュー全体のコンテナ要素と、開閉のスイッチとなるボタン要素を取得します。次に、クリックイベントの設定を行います。Javaなどのアプリケーション開発ではボタンクリックに対して直接的な描画命令を書くことが多いですが、Webフロントエンド開発においては、JavaScriptはあくまで「状態の変化」を通知する役割に徹し、実際の見た目の変化はCSSに委譲するという「関心の分離」が重要です。ここでは `addEventListener` を使用してクリックイベントを監視し、イベント発生時に `classList.toggle` メソッドを実行します。このメソッドは、指定したクラス名が要素に存在しなければ追加し、存在すれば削除するというトグル動作を一行で実現する強力な機能です。例えば、メニュー要素に `open` というクラスが付与された場合、CSS側であらかじめ定義された `transform: translateX(0)` などのスタイルが適用され、メニューが画面内にスライドインしてくる仕組みを構築します。この手法により、JavaScriptのコードはシンプルに保たれ、アニメーションの速度やイージングなどの演出はCSS側で柔軟に調整可能となります。学生には、DOM要素のクラス属性を書き換えることが、ブラウザのレンダリングエンジンに対して再描画を促すシグナルとなるプロセスをイメージさせます。また、`toggle` メソッドを使用することで、条件分岐（if文）を用いて「開いているか・閉じているか」を判定するロジックを自前で実装する必要がなくなり、コードの可読性と保守性が向上することも強調します。この細目で理解すべき範囲は、HTML/CSSで隠されたメニューを、JavaScriptのクラス操作によって表示・非表示切り替えする基本ロジックの実装まで。
			② 本細目では、メニューの開閉動作と連動して、トリガーとなるハンバーガーボタン自体の見た目を変化させる実装について詳説します。近年、多くのWebサイトでは、三本線で構成されたハンバーガーアイコンが、クリックされるとアニメーションして「×（バツ）」印の閉じるボタンに変形するUIが採用されています。このインタラクションは、ユーザーに対して現在のシステムの状態（メニューが開いている状態）を視覚的に伝え、次のアクション（メニューを閉じる）を示唆する重要なユーザビリティ要素です。実装のアプローチは、先ほどのメニュー本体の制御と同様に、クラスの付け替えによって行います。ボタン要素に対しても `classList.toggle` を使用し、クリックされるたびに特定のクラス（例: `active` や `open`）を着脱させます。CSS側では、このクラスが付与された状態に対して、三本線のうち真ん中の線を透明にし、上下の線を回転（`rotate`）および移動（`translate`）させて交差させるスタイル定義がなされています。JavaScript側では、メニュー本体とボタンという異なる2つのDOM要素に対して、同時にクラス操作を行う必要があります。ここで重要となるのが、イベントハンドラ内での処理の記述順序と対象の明確化です。一つのクリックイベントに対して、メニューパネルへのクラス操作と、ボタン自身へのクラス操作を記述します。JavaBronzeレベルの知識を持つ学生であれば、オブジェクト指向的な考え方として、ボタンオブジェクトが自身の状態を変更し、同時にメニューオブジェクトの状態も変更するという相互作用を容易に理解できるはずです。また、UIの状態管理という観点から、`z-index` プロパティによる重なり順の制御についても触れます。メニューが開いた際、ボタンはメニューパネルよりも手前（ユーザー側）に表示され続けなければ、ユーザーはメニューを閉じることができなくなります。JavaScriptでクラスを付与した際、CSSのスタッキングコンテキスト（重ね合わせコンテキスト）がどのように変化するか、あるいは維持されるかを意識する必要があります。このように、JavaScriptによるDOM操作は単なる機能実装にとどまらず、CSSと密接に連携して整合性の取れたUI体験を提供するための司令塔であることを理解させます。この細目で理解すべき範囲は、ボタンの形状変化とメニュー開閉を同期させ、ユーザーインターフェースとしての整合性を保つ実装まで。
			③ 本細目では、スライドメニューが表示された後の演出として、メニュー内部のリスト項目（リンク）を上から順番に遅れて表示させるアニメーションの実装について解説します。単にメニュー全体がスライドしてくるだけでなく、中のコンテンツがリズミカルに表示されることで、ユーザーの視線を誘導し、洗練された印象を与えることができます。これを実現するために、配列操作と繰り返し処理、そしてCSSプロパティの動的な操作を組み合わせます。まず、メニュー内のすべてのリスト要素（`li` タグや `a` タグ）を `document.querySelectorAll` メソッドを用いて取得します。これにより、配列に似たデータ構造である `NodeList` が返されます。次に、このリストに対して `forEach` メソッドを適用します。`forEach` は、Javaの拡張for文やストリームAPIと同様に、コレクションの各要素に対して処理を行うためのメソッドですが、JavaScriptの `forEach` ではコールバック関数の第二引数として「現在の要素のインデックス（何番目の要素か）」を受け取ることができます。このインデックス（0, 1, 2...）が、今回のアニメーション実装における鍵となります。具体的なロジックとしては、ループの中で各要素の `style` プロパティにアクセスし、`transition-delay`（遷移遅延時間）または `animation-delay` を設定します。例えば、インデックスに定数（0.1秒など）を掛け合わせることで、1番目の要素は0秒遅れ、2番目は0.1秒遅れ、3番目は0.2秒遅れといった具合に、階段状の遅延時間を生成することができます。計算式としては `index * 0.1 + 's'` のような文字列連結を行い、CSSの値として代入します。この処理により、メニューが開くという一つのアクションに対し、複数の要素が時間差を持って反応する複雑なアニメーションが、わずか数行のJavaScriptコードで実現できることを示します。また、`forEach` を使用することで、メニュー項目の数が増減してもコードを修正することなく自動的に対応できるという、プログラミングならではの拡張性と柔軟性についても言及します。静的なHTML/CSSだけでは記述が冗長になりがちな表現を、JavaScriptのループ構造を用いて効率的に制御する手法は、Webデザインにおける動的表現の基礎となります。この細目で理解すべき範囲は、`querySelectorAll` と `forEach` を活用し、インデックスに基づいた動的な遅延スタイルを適用するアルゴリズムの理解まで。
		キーワード	① ハンバーガーメニュー ② classList.toggle ③ forEachメソッド ④ transition-delay ⑤ z-index
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で実装したスライドメニューのコードを見直し、JavaScriptで付与したクラスがCSS側でどのようなスタイル変化を引き起こしているか、ブラウザの検証ツール（デベロッパーツール）を用いて確認してください。特に、ボタンをクリックした瞬間にHTMLのDOMツリー上でクラス属性がどのように変化しているか、そしてそれに伴い画面上の要素がどう動いているか、実際の挙動とコードの対応関係を詳細に追跡することで、DOM操作の理解を深めることができます。 ◆次回授業の予習次回は、Webページをスクロールした際に要素がふわっと表示されるエフェクトの実装を行います。これには「スクロールイベント」や、より現代的でパフォーマンスに優れた「Intersection Observer API」という機能を使用します。一般的なWebサイトでスクロールに応じてコンテンツが表示される仕組みについて、どのようなタイミングで動作しているか観察しておくと、次回の学習がスムーズになります。具体的なコードを調べる必要はありませんが、スクロールと連動したWeb表現に関心を持ってください。
26	スクロール表示エフェクトの実装	科目の中での位置付け	本授業は、第6部「Webサイト制作演習」の第4回目に位置し、これまでに構築してきたWebページの視覚的品質を向上させるための重要な工程である。前回のスライドメニューの実装に続き、今回はユーザーのスクロール操作に連動した動的なインタラクションをWebページ全体に適用する。これにより、静的な情報の羅列にとどまらず、ユーザーの閲覧体験（UX）を豊かにするモダンなWebサイト制作の手法を確立する段階にある。
		コマ主題細目	① 複数要素の取得と初期化処理 ② 交差判定ロジックの構築 ③ 監視の実行とパフォーマンス制御
		細目レベル	① 本細目では、スクロールに応じてアニメーション表示させるべきHTML要素をJavaScript側で適切に特定し、操作可能な状態にするための準備工程について詳説する。現代のWebデザインにおいて、ページをスクロールした際にコンテンツが「ふわっ」と現れる演出は、ユーザーの視線を誘導し、情報の認知負荷を下げる効果的な手法として定着している。この挙動を実現するためには、まずHTML側でアニメーションの対象となる要素に対して、共通のクラス名（テキストでは「fadein」クラス）を付与する必要がある。CSSにおいては、これらの要素に対して初期状態で非表示（opacity: 0）や位置のオフセット（transform: translateYなど）を設定しておくことが前提となるが、JavaScriptの役割は、これらの要素群をプログラム内で一括して管理することから始まる。学生は既にIDによる単一要素の取得を学んでいるが、本講義ではページ内に点在する複数の対象を扱うため、`document.querySelectorAll`メソッドを使用する。このメソッドが返却するNodeListは、配列に類似したデータ構造を持つが、厳密には配列（Array）とは異なる特性を持つことを理解させる必要がある。Javaの配列やリスト構造に関する知識を持つ学生に対し、DOM操作におけるコレクションの扱い方との差異を明確にしつつ、取得した要素群がどのようにメモリ上に保持されるかを解説する。また、取得した要素が正しくJavaScript内で認識されているかを確認するために、コンソール出力を用いたデバッグ手法についても触れる。この段階で、対象となる要素が一つもない場合や、意図しない要素が含まれていないかを確認することは、後の工程での不具合を防ぐために不可欠である。さらに、JavaScriptによる制御が開始される前の初期状態として、CSSとJavaScriptの役割分担（スタイル定義と振る舞いの制御）を再確認し、これから実装するロジックがどのDOM要素に対して作用するのかを明確に意識させる。この細目で理解すべき範囲は、`querySelectorAll`を用いてクラス名「fadein」が付与された全てのHTML要素を取得し、NodeListとして変数に格納するまで。
			② 本細目では、WebブラウザのAPIである`Intersection Observer`（交差監視API）を用い、要素が画面内に入ったことを検知するための核心的なロジックの実装について解説する。従来、スクロールイベント（scroll event）にリスナーを設定し、要素の座標計算を繰り返す手法が取られていたが、これはメインスレッドへの負荷が高く、パフォーマンス低下の原因となっていた。これに対し、`Intersection Observer`は非同期的に交差状態を監視するため、ブラウザの描画性能を損なうことなく効率的な実装が可能であることを、技術的な背景として説明する。授業では、まず`IntersectionObserver`クラスのインスタンス化を行い、そのコンストラクタに渡すコールバック関数の定義に重点を置く。このコールバック関数は、監視対象の要素がビューポート（画面表示領域）と交差したタイミング、または交差しなくなったタイミングでブラウザによって自動的に呼び出される。関数には引数として`entries`という配列が渡されるが、ここには監視対象ごとの状態変化情報が含まれている。学生には、`forEach`文などを用いてこの`entries`配列を走査し、各エントリ（`entry`）の`isIntersecting`プロパティを確認する手順を実装させる。このプロパティが`true`であれば「画面内に入った」と判定できるため、そのタイミングで対象要素（`entry.target`）の`classList`に対して、表示用のクラス（例：「scrollin」）を追加する処理を記述する。CSS側では、この追加されたクラスに対して`transition`プロパティを用いたアニメーション（不透明度を1にする、位置を元に戻すなど）が定義されているため、クラスの付与がトリガーとなって視覚的な変化が発生する仕組みである。ここでは、JavaScriptが直接スタイルを書き換えるのではなく、あくまで「状態の変化（クラスの着脱）」を管理し、表現はCSSに委譲するという、現代的なフロントエンド開発の設計思想（関心の分離）についても強調する。この細目で理解すべき範囲は、`Intersection Observer`のコールバック関数内で交差判定を行い、対象要素にクラスを追加するロジックを記述するまで。
			③ 本細目では、構築した交差判定ロジックを実際に取得済みの各要素に適用し、アニメーションの実行とその後の監視解除による最適化について詳説する。細目①で取得したNodeList（`fadein`クラスを持つ要素群）と、細目②で作成した`IntersectionObserver`のインスタンスを結びつける工程である。ここでは、NodeListに対して`forEach`メソッドを使用し、リスト内の全ての要素に対して`observer.observe()`メソッドを実行することで監視を開始する。これにより、ページ内の複数の要素が個別に監視され、スクロールに応じて順次コールバック関数が発動する仕組みが完成する。さらに、Webアプリケーションの品質を高めるための重要な概念として、リソースの効率的な利用について解説する。今回の演出のような「一度だけ表示されればよいアニメーション」の場合、要素が表示された後も監視を継続することは、ブラウザのリソースを無駄に消費することになる。したがって、コールバック関数内において、要素が表示済み（クラスが付与された状態）となった直後に、`observer.unobserve()`メソッドを呼び出し、その要素の監視を明示的に終了させる処理を追加する。これにより、一度表示された要素は監視対象から外れ、スクロールを戻しても再アニメーションせず、かつ計算負荷も軽減される。この「監視の開始」から「交差検知」、「クラス付与」、「監視の終了」という一連のライフサイクルをコード上で完結させることが本授業のゴールである。また、テキストのコラムで触れられている`for`文と`forEach`メソッドの違いについても補足し、配列操作における構文の選択指針についても触れる。特にNodeListに対する反復処理において、モダンなJavaScriptでは`forEach`が簡潔に記述できる点や、アロー関数との親和性についても言及し、可読性の高いコード記述を推奨する。最終的に、ブラウザで実際にスクロール操作を行い、意図したタイミングで要素が表示されるか、エラーが発生していないかを確認し、実装の正当性を検証する。この細目で理解すべき範囲は、全対象要素の監視を開始し、表示完了後に監視を解除する処理の実装まで。
		キーワード	① Intersection Observer ② querySelectorAll ③ NodeList ④ forEach ⑤ unobserve
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったスクロール連動型のアニメーションは、現代のWebサイトで頻繁に使用される技術です。復習としては、まず`Intersection Observer API`が従来のスクロールイベントと比較してなぜ優れているのか、その仕組みを概念的に整理してください。また、`querySelectorAll`で取得した要素の集合（NodeList）をループ処理で扱う流れや、コールバック関数内での条件分岐（`isIntersecting`の判定）のロジックを、コードを見ずに流れ図などで書き出してみることを推奨します。 ◆次回授業の予習次回は、開発中に発生するエラーの解決方法やデバッグ手法について学びます。予習として、これまでの演習中にブラウザのデベロッパーツールの「Console」タブにどのようなメッセージが表示されていたか、記憶を呼び起こしておいてください。また、意図的にコードのスペルを間違えた際にブラウザがどのような反応を示すか、あるいはプログラムが動かなくなった際にどのような手順で原因を探すべきか、自分なりのアプローチを整理しておくと、次回の体系的な学習がよりスムーズになります。
27	エラー解決とデバッグ手法	科目の中での位置付け	本コマは、第6部「Webサイト制作演習」の5回目にあたり、これまでの演習を通じて実装してきたWebページの機能が正しく動作しない場合に、その原因を特定し修正するための技術を習得する重要な回です。プログラミングにおいてエラーとの遭遇は避けられず、特にJavaScriptはブラウザ上で動作するため、特有のデバッグ手法が求められます。本講義を通じて、学生はエラーを恐れずに自力で解決する能力を身につけ、総合演習の成果物を完成へと導くための実践的なトラブルシューティングスキルを確立します。
		コマ主題細目	① デベロッパーツールの活用とエラーメッセージの解読 ② JavaScriptにおける主要なエラータイプとその原因 ③ トラブルシューティングの実践的プロセスと解決手法
		細目レベル	① 本細目では、Webブラウザに搭載されているデベロッパーツール、特に「Console（コンソール）」パネルを活用したエラーの発見と情報の読み取り方法について詳説します。学生はすでにJava言語の学習を通じてコンパイルエラーや実行時例外の概念を持っていますが、インタプリタ言語であるJavaScriptにおいては、実行時に初めてブラウザがエラーを検知し、コンソールに出力するという特性を理解する必要があります。まず、Google Chromeのデベロッパーツールを起動し、コンソールタブを開く手順を再確認した上で、意図的にエラーを含んだコードを実行させ、実際にどのような表示がなされるかを観察させます。エラーメッセージは通常、赤文字で表示され、その内容は「Uncaught（捕捉されなかった）」という接頭辞、エラーの種類、具体的なメッセージ、そして発生したファイル名と行番号で構成されていることを解説します。特に、ファイル名と行番号のリンクをクリックすることで、Sourcesパネル上の該当箇所へ即座にジャンプできる機能は、デバッグの初動として極めて重要であることを強調します。また、エラーが発生していないにもかかわらず、期待した動作をしない場合（論理エラー）における「console.log」メソッドの活用法についても掘り下げて解説します。JavaにおけるSystem.out.printlnと同様に、変数の値やオブジェクトの中身、条件分岐の通過確認などをコンソールに出力することで、プログラムの実行フローを可視化する手法を実践します。この際、単に変数を出力するだけでなく、識別用の文字列とセットで出力することで、ログの可読性を高めるテクニックについても触れます。さらに、Web制作の現場では、HTMLのDOM要素が正しく取得できているかを確認するために、取得した要素そのものをコンソールに出力し、nullになっていないかを確認する作業が頻繁に発生します。このように、コンソールは単なるエラー表示板ではなく、プログラムの内部状態を診断するための強力なツールであることを認識させます。この細目で理解すべき範囲は、デベロッパーツールのコンソールを用いてエラーの発生箇所を特定し、console.logを用いて変数の状態を確認する方法まで。
			② 本細目では、JavaScript開発において頻繁に遭遇する代表的な3つのエラータイプ（SyntaxError、ReferenceError、TypeError）について、それぞれの発生メカニズムと具体的な原因を体系的に解説します。学生はJavaの知識を有しているため、静的型付け言語との違いを対比させながら説明を展開します。一つ目の「SyntaxError（構文エラー）」は、プログラムの文法として正しくない記述があった場合に発生します。これはJavaのコンパイルエラーに相当しますが、JavaScriptでは実行前の解析段階や実行時に発覚します。具体的な原因として、全角文字の誤入力、括弧や引用符の閉じ忘れ、カンマの欠落などが挙げられます。特に日本語環境では、スペースや記号が誤って全角で入力されるケースが多発するため、エディタ上での視認確認の重要性を説きます。二つ目の「ReferenceError（参照エラー）」は、存在しない変数を参照しようとした場合に発生します。これは、変数の宣言（letやconst）を行う前に使用してしまった場合や、単純なスペルミス、あるいは変数のスコープ（有効範囲）外からアクセスしようとした場合に起こります。Javaでは宣言のない変数はコンパイルに通りませんが、JavaScriptでは実行時にこのエラーとして顕在化することを理解させます。三つ目の「TypeError（型エラー）」は、値の型が期待される操作に対して不適切な場合に発生します。Web制作において最も典型的な事例は、DOM操作に関連するものです。例えば、document.querySelectorで要素の取得に失敗した場合、その戻り値はnullとなりますが、そのnullに対してaddEventListenerなどのメソッドを実行しようとすると、「Cannot read properties of null」といったメッセージと共にTypeErrorが発生します。これはJavaにおけるNullPointerExceptionに近い概念であり、操作対象が確実存在するかどうかを確認することの重要性を教示します。また、関数ではない変数を関数として呼び出そうとした場合にもこのエラーが発生します。これらのエラータイプごとの特徴を理解することで、学生はエラーメッセージを見た瞬間に原因のあたりをつける能力を養います。この細目で理解すべき範囲は、SyntaxError、ReferenceError、TypeErrorの違いと、それぞれの典型的な発生要因まで。
			③ 本細目では、エラーが発生した際にパニックにならず、論理的かつ効率的に問題を解決するための具体的な手順と心構えについて詳説します。エラー解決のプロセスは、「現象の確認」「原因の特定」「修正」「再確認」のサイクルで構成されます。まず、コンソールに表示されたエラーメッセージを英語だからといって敬遠せず、Google翻訳などを活用してでも内容を正確に把握する姿勢を求めます。メッセージには「何が（What）」「どこで（Where）」起きたかが明記されているため、まずは示された行番号を確認し、その周辺のコードを重点的にチェックするよう指導します。原因の特定においては、よくあるミスのパターンをチェックリストとして活用する手法を導入します。具体的には、スペルミス（Typo）がないか、全角スペースが混入していないか、開き括弧と閉じ括弧の対応は正しいか、HTML側のID名やクラス名とJavaScript側の指定が一致しているか、などを順序立てて確認します。特にWeb制作においては、HTMLファイルとJavaScriptファイルの読み込み順序や、defer属性の有無によってDOM要素の取得可否が変わるため、スクリプトの実行タイミングに関するミスも疑うべきポイントとして挙げます。また、エラーメッセージが表示されないまま機能が動作しない場合についても触れます。これは論理的な誤りや、イベントリスナーの設定ミスなどが考えられます。この場合、前述のconsole.logを活用して、プログラムがどこまで正常に動作しているかを通過点ごとに確認し、問題の所在を絞り込んでいく「切り分け」の作業が不可欠です。例えば、クリックイベントが発火しない場合、まずはクリック時の処理の先頭にログ出力を仕込み、そもそもイベント自体が検知されているかを確認します。検知されていなければHTML側の記述や要素取得に問題があり、検知されていればその後の処理ロジックに問題があるといった推論が可能になります。最後に、どうしても原因がわからない場合は、エラーメッセージをそのまま検索エンジンに入力して解決策を探るスキルも、現代のエンジニアには必須の能力であることを伝えます。この細目で理解すべき範囲は、エラー発生から解決に至るまでの一連の思考プロセスと、具体的なチェックポイントを用いた修正手法まで。
		キーワード	① Console（コンソール） ② SyntaxError ③ ReferenceError ④ TypeError ⑤ デバッグ
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習本日の授業で扱ったデベロッパーツールの操作方法を再確認し、意図的に間違ったコード（スペルミスや全角スペースの混入など）を書いてみて、実際にどのようなエラーメッセージがコンソールに表示されるかを実験してください。また、これまでの演習で作成したコードを見直し、console.logを使って変数の値や処理の流れを確認する練習を行ってください。エラーメッセージの内容を読み解き、原因を特定する感覚を養うことが重要です。 ◆次回授業の予習次回の授業では、これまでの演習課題の仕上げとコードの整理（リファクタリング）を行います。テキストのテキストの残りの部分やコラムなどに目を通し、Webページの完成度を高めるためのテクニックについて確認しておいてください。また、jQueryなどのライブラリと標準のJavaScript（Vanilla JS）の違いについても触れるため、関連するコラムを読んで概要を把握しておくと理解がスムーズになります。
28	総合演習の仕上げと発展	科目の中での位置付け	本講義は、全30回にわたるWebデザインのためのJavaScript学習の集大成となる位置づけにあります。これまで第6部のWebサイト制作演習を通じて、断片的な知識を統合し、一つの機能的なWebページを構築してきました。今回はその最終段階として、作成したコードの品質を高めるリファクタリングの手法や、実務で頻繁に遭遇するライブラリ（jQuery等）とネイティブJavaScript（Vanilla JS）との関係性を学びます。単に動作するだけでなく、保守性や拡張性を考慮したプログラミング視点を養い、授業終了後も自律的に学習を継続できるための指針を提示する重要な回となります。
		コマ主題細目	① コードのリファクタリングとループ処理の最適化 ② ライブラリの活用とフレームワークの選択 ③ Web制作におけるJavaScript学習の展望
		細目レベル	① 総合演習で作成したWebページのコードを見直し、より効率的で可読性の高い記述へと昇華させるリファクタリングの手法について詳説します。特に、複数の要素を操作する際に不可欠なループ処理の記述方法について、Java言語での学習経験がある学生にも馴染み深いfor文と、JavaScriptの配列メソッドであるforEachの違いに焦点を当てて解説します。for文は条件式による柔軟な制御が可能であり、breakやcontinueを用いて処理を途中で中断したりスキップしたりすることができる利点があります。一方で、forEachメソッドはコールバック関数を使用するため、記述が簡潔になり、カウンター変数の管理が不要になるなど、コードの可読性が向上するメリットがあります。Web制作の現場では、取得した複数のDOM要素（NodeList）に対して一律の処理を行うケースが多く、このような場合にはforEachが適していることを具体的なコードの比較を通じて理解させます。学生には、単に「動けばよい」という段階から一歩進んで、処理の目的やコードのメンテナンス性を考慮して最適な構文を選択する能力を養わせます。また、CSSとJavaScriptの連携における高度なテクニックとして、CSSの疑似要素（::beforeや::after）に対する操作についても解説します。疑似要素はHTMLドキュメント上のDOMツリーには直接存在しないため、JavaScriptのDOM操作メソッドを用いて直接スタイルを変更することができません。この技術的な制約を理解させた上で、親要素に対してクラスを付与または削除し、そのクラスに紐づくCSS記述によって間接的に疑似要素のスタイルを変化させる手法を指導します。これは、JavaScriptが「振る舞い」を制御し、CSSが「見た目」を責務とするというWeb標準の役割分担にも合致した設計思想です。リファクタリングを通じて、こうした役割分担を意識したきれいなコードを書くことの重要性を説き、将来的に他者が読んでも理解しやすいコードを作成する習慣を身につけさせます。この細目で理解すべき範囲は、for文とforEachの特性の違いから、疑似要素を制御するためのクラス操作の活用方法まで。
			② Web制作の現場において使用されるJavaScriptライブラリやフレームワークの変遷について解説し、本講義で学んできた素のJavaScript（Vanilla JS）との関係性を体系的に整理します。かつてjQueryは、ブラウザ間の挙動の違い（クロスブラウザ問題）を吸収し、DOM操作やアニメーションを短いコードで記述できるツールとして爆発的に普及しました。しかし、現在のWeb開発においては、ブラウザの標準仕様が統一され、ES6以降のVanilla JS自体の機能も大幅に強化されたことで、ライブラリに依存せずとも効率的な開発が可能になっています。この歴史的背景と技術的変遷を概観し、なぜ今、ライブラリではなくVanilla JSを学ぶことが重要なのかを論理的に説明します。学生には、かつてのjQuery特有の記法（$関数など）と、現在の標準API（document.querySelector、fetch APIなど）を対比させ、抽象化された便利なツールの裏側にある仕組みへの理解を深めさせます。また、現代のフロントエンド開発で主流となっているCSSフレームワーク（Bootstrap、Tailwind CSSなど）やJavaScriptフレームワーク（React、Vue.js、Svelteなど）についても触れ、それぞれの特徴と適用場面を解説します。さらに、JavaScript実行環境の多様化についても理解を促します。従来、JavaScriptはブラウザ内でのみ動作する言語でしたが、Node.jsの登場により、サーバーサイドでもJavaScriptが利用可能になりました。Node.jsを用いることで、フロントエンドとバックエンドを同一言語で開発できるメリットや、npmエコシステムを通じた豊富なパッケージの活用、開発ツール（Webpack、Viteなど）の利用が可能になることを説明します。これにより、JavaScriptが単なるブラウザスクリプト言語から、フルスタック開発言語へと進化した過程を理解させます。ライブラリやフレームワークを使用することのメリットとデメリットについて客観的な視点で考察します。これらのツールは開発速度を向上させ、複雑な機能を容易に実装できる反面、バンドルサイズの増大によるパフォーマンスへの影響や、特定の技術への依存度が高まるリスクがあることを理解させます。また、演習で扱ったローディング画面の実装などを例に挙げ、特定の機能に特化したライブラリ（プラグイン）の存在についても触れます。重要なのは、ツールを盲目的に使用するのではなく、プロジェクトの要件、規模、パフォーマンス要求、チームの技術スタックなどに応じて適切な技術を選定する判断力です。Vanilla JSの基礎力がしっかりしていれば、どのような新しいライブラリやフレームワークが登場しても、そのドキュメントを読み解き、スムーズに習得できることを強調します。この授業を通じて得た基礎知識が、将来的な技術の拡張を支える土台となることを認識させます。この細目で理解すべき範囲は、JavaScriptライブラリ・フレームワークの歴史的変遷と現代的な選択肢（CSSフレームワーク、JavaScriptフレームワーク）、Node.jsによるサーバーサイドJavaScriptの可能性、およびVanilla JSとの違いと技術選定における判断基準まで。
			③ 本コースの総括として、これまでに学習した知識が実際のWebサイト制作の現場でどのように活かされるかを再確認し、今後の学習に向けた具体的な展望（ロードマップ）を提示します。Webデザイナーやフロントエンドエンジニアにとって、JavaScriptは単に動きをつけるだけでなく、ユーザー体験（UX）を向上させるための重要なツールです。これまでに学んだDOM操作、イベント処理、非同期処理、アニメーション制御といった各要素技術が、ユーザーの視覚や操作感にどのように影響を与えるかを改めて整理します。また、開発プロセスにおいて避けて通れない「エラー」との向き合い方についても、テキストの内容を踏まえて再説します。エラーメッセージは拒絶ではなく解決へのヒントであり、デベロッパーツールを駆使して原因を特定し修正するトラブルシューティングのプロセスこそが、エンジニアとしてのスキルを飛躍的に高める機会であることを精神的かつ技術的な側面から指導します。さらに、今後の学習の方向性として、より高度なインタラクションの実装や、Webアプリケーション開発へのステップアップについて触れます。テキストの「次は何をしよう？」というセクションに基づき、JavaScriptの可能性の広がりを示唆します。例えば、Canvas APIを用いたグラフィカルな表現や、ReactやVue.jsといったモダンなフレームワークへの挑戦など、本講義で得た基礎知識をベースに広がる多様なキャリアパスを紹介します。学生には、技術は常に進化しているため、一度学んで終わりではなく、継続的な学習が必要であることを伝えます。しかし、その根底にある基本的な考え方や文法は変わらないため、自信を持って新しい技術に触れていくよう動機づけを行います。最終的に、自らのアイデアをコードによって形にし、Webというメディアを通じて表現する楽しさを再認識させ、能動的な学習者としての姿勢を確立させることを目指します。この細目で理解すべき範囲は、Web制作におけるJavaScriptの役割の再確認から、エラー解決の重要性、そして今後の継続的な学習指針まで。
		キーワード	① リファクタリング ② 疑似要素 ③ CSSフレームワーク ④ ライブラリ ⑤ サーバーサイドJS
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で扱ったfor文とforEachメソッドの使い分けについて、それぞれの構文の特徴やメリット・デメリットを整理してまとめること。さらに、現代JavaScriptで利用可能な他の配列メソッド（map、filter、reduceなど）についても比較検討し、それぞれの適用場面を理解すること。また、CSSの疑似要素をJavaScriptから間接的に操作する仕組みについて、クラスの付け替えがどのようにスタイルの変化を引き起こすか、DOMとCSSの関係性を図解して復習すること。特に、JavaScriptによる動的なクラス操作（classList.add、classList.remove、classList.toggle）と、CSS側での状態管理（疑似クラス、データ属性セレクタなど）の連携について理解を深めること。さらに、JavaScriptライブラリ・フレームワークの変遷と現代のWeb開発における技術選択について、以下の観点から自身の言葉で説明できるように要点を整理しておくこと　• jQueryが果たした歴史的役割と、現在では標準APIで代替可能になった背景　• 現代のCSSフレームワーク（Bootstrap、Tailwind CSSなど）の特徴と使用場面　• JavaScriptフレームワーク（React、Vue.js、Svelteなど）の登場理由と適用範囲　• Node.jsによるサーバーサイドJavaScriptの可能性とフルスタック開発の意義これらの知識を体系的に整理し、技術選定における判断基準を自分なりに構築しておくこと。 ◆次回授業の予習次回の授業からは総復習に入るため、第1回から第13回までの学習内容（第1部～第3部）を全体的に見直しておくこと。特に、基本文法、DOM操作の基礎（要素の取得、テキストの変更、スタイルの操作）、イベント処理の仕組みについて、テキストの該当箇所を読み返し、不明点があればリストアップしておくこと。過去の演習課題のコードを見直し、どのようなロジックでプログラムが動作していたかを再確認することで、総復習時の理解度を高める準備を整えておくこと。
29	総復習（前半）	科目の中での位置付け	本授業は全30回のカリキュラムの終盤に位置し、これまで学習したWebデザイン制御のためのJavaScriptプログラミング知識を体系的に整理する総復習の前半パートである。第1部から第3部で扱った基本文法、DOM操作、およびイベント処理は、動的なWebサイト構築の根幹を成す技術である。これらを再確認し、断片的な知識を統合することで、次回の後半復習および将来の実践的な制作活動への確固たる土台を築くことを目的とする。
		コマ主題細目	① DOMの概念と要素の取得・操作手法の再構築 ② イベントリスナーと関数定義による対話的処理の実装 ③ 条件分岐とクラス操作を用いた動的UI制御の総括
		細目レベル	① 本細目では、Webページをプログラミングコードから操作するための基本概念であるDOM（Document Object Model）と、その具体的な操作手法について詳細に再確認を行う。まず、ブラウザがHTMLを読み込んだ際に構築するDOMツリーの構造を概観し、JavaScriptが`document`オブジェクトを通じてHTML要素にアクセスする仕組みを論理的に整理する。学生はJava言語などを通じてオブジェクト指向の基礎概念を有しているが、WebブラウザにおけるDOMという特殊なオブジェクトモデルが、いかにして視覚的なWebページと結びついているかを改めて理解させる必要がある。具体的には、要素を取得するための標準的なメソッドである`querySelector`の使用法を詳説する。引数として渡す文字列がCSSセレクタと同様の形式（ID名の前の`#`やクラス名の前の`.`など）であることを強調し、HTML構造とCSS、そしてJavaScriptのセレクタ記述が一貫したルールに基づいていることを再認識させる。また、取得した要素を`const`を用いて定数として宣言し、コード内で再利用可能なオブジェクトとして管理する重要性についても解説する。これは、コードの可読性を高めるだけでなく、DOMへのアクセス回数を減らしパフォーマンスを維持するためにも重要な作法である。続いて、取得した要素に対する操作として、テキスト内容の変更とスタイルの変更を取り上げる。`textContent`プロパティを用いたテキストの書き換え処理や、テンプレート文字列（バッククォートと`${}`）を用いた変数の埋め込み記述について復習し、動的な文字列生成の効率的な手法を定着させる。さらに、`style`プロパティを介したCSSスタイルの変更についても解説する。CSSのプロパティ名（例：`background-color`）がJavaScript内ではキャメルケース（例：`backgroundColor`）に変換される規則性について注意を促し、構文エラーを防ぐための知識を確実なものとする。これらの学習を通じて、Webページ上の特定の要素をJavaScriptで「特定」し、その「内容」や「外見」をプログラムによって意図的に変化させるという、Webフロントエンド開発における最も基礎的かつ重要なプロセスを完全に習得させる。この細目で理解すべき範囲は、DOMツリーの概念理解から、`querySelector`による要素取得、およびプロパティ操作による表示内容の変更まで。
			② 本細目では、静的なWebページに対してユーザーのアクションに応じたインタラクティブな動作を付与するためのイベント処理と、それに関連する関数の定義方法について詳説する。WebサイトにおけるJavaScriptの主要な役割は、ユーザーの操作（クリック、スクロール、入力など）を検知し、適切なタイミングで処理を実行することにある。この「イベント駆動型」のプログラミングモデルを理解させるため、`addEventListener`メソッドの構文と役割について重点的に解説する。まず、`addEventListener`の第一引数であるイベントタイプ（`click`、`input`、`load`など）の指定と、第二引数であるコールバック関数の関係性を整理する。ここでは、イベントが発生した瞬間にブラウザが登録された関数を呼び出す仕組みを解説し、プログラムが上から下へと順次実行されるだけの同期処理とは異なる、非同期的な実行タイミングの概念を定着させる。また、HTMLの解析完了を待ってからスクリプトを実行するための`defer`属性の重要性についても触れ、DOM要素が未生成の状態でJavaScriptが実行されることによるエラー（`null`に対する操作など）を回避するための環境設定についても再確認を行う。次に、処理のまとまりとしての「関数」の定義方法について、現代的なJavaScript記述の標準であるアロー関数（`() =＞ {}`）を用いた記法を復習する。Javaなどの他言語におけるメソッド定義と比較しつつ、JavaScriptでは関数を変数や定数に代入して扱うスタイルが一般的であることを示し、`const`を用いた関数定義の構文を確実に記述できるように指導する。さらに、定義した関数を`addEventListener`の引数として渡す際、関数名の後ろに`()`をつけると即時実行されてしまう点などの、初学者が陥りやすいミスについても注意喚起を行う。これらを通じて、ユーザーの操作をトリガーとして特定の関数を呼び出し、一連の処理を実行させるための実装パターンを確立させる。具体的な演習の振り返りとして、ボタンクリックによる背景色の変更や、カラーピッカーの操作イベントなどを想起させながら、コードの記述順序と動作の因果関係を論理的に結びつける能力を養う。この細目で理解すべき範囲は、`addEventListener`を用いたイベントリスナーの設定から、アロー関数による処理の定義と呼び出しまで。
			③ 本細目では、取得したデータやユーザーの状態に応じて処理を分岐させ、Webページのユーザーインターフェース（UI）を動的に変化させるための応用的な手法を総括する。これまでの学習で扱った条件分岐や論理演算、そしてCSSクラスの操作を組み合わせることで、実用的なWeb機能がどのように構築されているかを体系的に理解させる。まず、プログラムの制御構造である`if...else`文を用いた条件分岐の記述を復習する。ここでは、比較演算子として厳密等価演算子（`===`）を使用する重要性を説き、予期せぬ型変換によるバグを防ぐための堅牢なコーディング習慣を再確認させる。また、複数の条件を組み合わせるための論理演算子（`&&`, `\|\|`）や、真偽値（boolean）の扱いについても触れ、フォームの入力チェック（バリデーション）などで必要となる論理的な思考力を強化する。例えば、チェックボックスの状態や入力文字数に応じて送信ボタンを有効化・無効化するといった具体的なロジック構築の手順を整理する。次に、UIの見た目を変更する手法として、`style`プロパティを直接操作するのではなく、`classList`プロパティを用いてCSSクラスを着脱する方法（`add`, `remove`, `toggle`）を詳説する。この手法は、JavaScriptが「状態の変化」を担い、CSSが「見た目の定義」を担うという役割分担（関心の分離）を実現する上で極めて重要である。ダークモードの切り替え機能などを例に挙げ、JavaScript側では単に`dark`クラスをトグルするだけで、複雑な配色変更はすべてCSS側に任せるという効率的な実装パターンを解説する。これにより、保守性が高く拡張性のあるコードを書く能力を涵養する。さらに、フォーム要素（`＜input＞`など）からの値の取得についても再確認を行う。`value`プロパティを通じてユーザーが入力した文字列や数値を取得し、その`length`プロパティを用いて文字数をカウントする処理などを通じて、データの取得から判定、そして画面反映に至る一連のフローを統合する。これらの知識を総動員し、ユーザーのアクションに対してシステムが適切に応答し、視覚的なフィードバックを即座に返すリッチなWeb UIの実装能力を完成させる。この細目で理解すべき範囲は、条件分岐によるロジック構築から、`classList`とフォーム操作を組み合わせたUI制御の実装まで。
		キーワード	① DOM（Document Object Model） ② querySelector ③ addEventListener ④ アロー関数 ⑤ classList
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習今回の授業で総復習した第1部から第3部までの範囲について、スライドやノートを見返すだけでなく、実際に手元の開発環境でコードを記述して動作を確認すること。特に、`querySelector`による要素の取得、`addEventListener`によるイベントの設定、そして`classList`によるスタイルの切り替えという一連の流れを、何も見ずに記述できるか試すことが望ましい。また、関数定義におけるアロー関数の記法や、条件分岐における厳密等価演算子の使用など、構文上の細かなルールについても再確認し、基礎的な記述ミスを減らすよう努めること。 ◆次回授業の予習次回の授業では、シラバスの第4部から第6部に相当する範囲の総復習を行う。ここでは、複数のデータを扱うための「配列」や「オブジェクト」、それらを処理するための「ループ処理（for文など）」、さらにはWebページに動きをつけるための「アニメーション」や「Intersection Observer」といった高度なトピックが含まれる。そのため、配列の宣言方法やインデックスによるアクセス、オブジェクトのプロパティ参照の方法など、データ構造に関する基本的な構文を事前に見直しておくこと。また、総合演習で作成したコードを読み返し、全体の構成を思い出しておくと理解がスムーズになる。
30	総復習（後半）	科目の中での位置付け	本授業は、全30回にわたるJavaScriptコースの最終回であり、第4部から第6部までの学習内容を総括する位置づけにあります。これまで学習した配列やオブジェクトによるデータ管理、スクロールや時間経過と連動したアニメーション、そしてWebサイト制作の実践演習について、その論理構造と実装手順を再確認します。単なる知識の羅列ではなく、各機能がどのように連携して一つのWebサイトを構成しているかを体系的に理解し、受講生が独力で動的なWebサイトを構築・運用できる能力を定着させることを目的とします。
		コマ主題細目	① データ構造の活用と動的DOM生成の論理 ② 高度なインタラクションと非同期アニメーションの制御 ③ 総合演習の振り返りとトラブルシューティング技法
		細目レベル	① 本細目では、第4部で学習した「複数のデータを効率的に扱う手法」について、そのプログラミングロジックを再整理し、実践的なコード記述能力を確実なものとします。まず、Webサイト上の商品リストや画像ギャラリーなど、規則性のあるコンテンツを生成するために不可欠な「配列」と「オブジェクト」の複合データ構造について詳説します。Java言語等で学ぶ静的な配列とは異なり、JavaScriptの配列は柔軟にオブジェクトを格納できる点を踏まえ、プロパティ（画像パス、商品名、価格など）を持つオブジェクトを配列として定義する際の構文規則を再確認します。次に、定義したデータ構造をHTMLとして画面に描画するための「ループ処理」と「DOM操作」の連携について解説します。ここでは、`for`文や`forEach`メソッドを用いて配列内の各要素にアクセスし、テンプレート文字列（バッククォート）を使用してHTMLタグを含む文字列を動的に構築する手順を一つひとつ追っていきます。特に、単に文字列を連結するだけでなく、`insertAdjacentHTML`メソッドを用いて、取得した親要素の適切な位置（`beforeend`など）に挿入するまでの一連の流れを、コードの実行順序に沿って論理的に整理します。なぜ手動でHTMLを書くのではなくJavaScriptで生成するのか、その保守性と拡張性の観点からも理解を深めます。さらに、変数のスコープ（`let`と`const`の使い分け）や、オブジェクトからの分割代入といった、コードの可読性と安全性を高めるためのモダンな記述法についても復習します。これらの知識は、単に動かすだけでなく、エラーが起きにくく修正しやすいコードを書くために必須の素養です。これら一連のデータ操作の流れを統合し、データ定義から画面描画までを自力で実装できる論理的思考力を養います。この細目で理解すべき範囲は、配列とオブジェクトを組み合わせたデータ構造の定義から、ループ処理とDOM操作を用いてHTMLを動的に生成・表示するまで。
			② 本細目では、第5部で扱ったWebサイトに動きを与えるためのアニメーション技術と、それを制御するイベント処理の仕組みについて体系的に復習します。Webデザインにおけるアニメーションは、単なる装飾ではなく、ユーザーの視線を誘導し、操作に対するフィードバックを与える重要なUI要素であることを前提に解説を進めます。まず、CSSの`transition`プロパティとJavaScriptの`classList`操作（クラスの着脱）を組み合わせた基本的なアニメーション実装について、その役割分担を整理します。JavaScriptはあくまで「きっかけ」を作り、実際の動きはCSSが担当するという基本原則を再確認します。次に、時間的な制御を行うための非同期処理について詳説します。`setTimeout`関数を用いて処理を遅延させ、複数の要素を順番に表示させる「スタaggering（時差）」効果の実装ロジックを振り返ります。ここでは、配列のインデックスを活用して遅延時間を計算する数式（例：`index * 100`ミリ秒）の意味を理解し、ループ処理の中でどのようにタイミングをずらしているかをコードレベルで解析します。さらに、現代のWeb制作において標準的な手法となっている「Intersection Observer API」を用いたスクロール連動型アニメーションについて深く掘り下げます。従来のスクロールイベントと比較した際のパフォーマンス上の利点を踏まえ、交差判定のロジック（`entries`、`isIntersecting`）や、監視の開始（`observe`）と解除（`unobserve`）の一連の流れを解説します。特に、コールバック関数がどのタイミングで実行されるのか、オプション設定（`rootMargin`など）が判定範囲にどう影響するかを図解的にイメージできるように説明します。これにより、ユーザーの行動に呼応した洗練されたインタラクションを実装する能力を涵養します。この細目で理解すべき範囲は、CSSクラス操作による基本アニメーションから、Intersection Observerを用いたスクロール連動演出の実装まで。
			③ 本細目では、第6部で実施したWebサイト制作の総合演習を通じて、これまで学んだ個別の技術がどのように統合され、機能的なWebページとして完成するのかを総括します。具体的には、ローディング画面からトップページへの遷移、ハンバーガーメニューの開閉、画像ギャラリーの切り替えといった主要機能の実装ロジックを、コードの全体像の中で位置づけ直します。例えば、ローディング画面の実装では、`window`オブジェクトの`load`イベントを起点とし、クラスの着脱によって画面の重なり順（z-index）や不透明度（opacity）を操作する一連の処理フローを再確認します。これにより、個々のメソッドの知識だけでなく、それらを組み合わせる構成力を高めます。また、プログラミング学習において避けて通れない「エラー解決（デバッグ）」の手法についても重点的に解説します。開発中に遭遇する代表的なエラー（`SyntaxError`、`ReferenceError`、`TypeError`など）について、その原因と対処法を体系的に整理します。ブラウザのデベロッパーツール（特にConsoleパネル）を活用し、エラーメッセージから問題の発生箇所（行番号）や原因を特定する具体的な手順を詳説します。初心者が陥りやすい「綴り間違い」「全角文字の混入」「閉じ括弧の忘れ」「スコープ外からの変数参照」といったミスを例に挙げ、自力で問題を切り分け、解決に至るための思考プロセスをトレーニングします。最後に、作成したコードのリファクタリング（整理・改善）の重要性や、jQueryなどのライブラリと「Vanilla JS（素のJavaScript）」の違いについても触れ、今後の学習の指針を示します。授業の最後には質疑応答の時間を設け、受講生が抱える疑問点を解消し、自信を持ってJavaScriptを用いたWeb制作に取り組める状態を目指します。この細目で理解すべき範囲は、総合演習における各機能の実装ロジックの統合的理解から、デベロッパーツールを用いたエラー解決手法の習得まで。
		キーワード	① Intersection Observer ② 配列とオブジェクト ③ insertAdjacentHTML ④ 非同期処理 ⑤ デバッグ（トラブルシューティング）
		コマの展開方法	社会人講師 AL ICT PowerPoint・Keynote 教科書コマ用オリジナル配布資料コマ用プリント配布資料その他該当なし
		小テスト	授業時間内に、LMS上において該当コマの小テストを実施する。
		復習・予習課題	◆今回授業の復習これまでの授業で作成したコード（カラーピッカー、画像一覧、アニメーション、総合演習のWebサイト）を全て見直し、それぞれの機能がどの構文によって実現されているかをコメントなどを読み返しながら確認してください。特に、自分が躓いた箇所やエラーが発生した箇所については、なぜそのエラーが起きたのか、どのように解決したのかを再考し、ノートなどにまとめておくことで、実践的なスキルの定着を図ってください。 ◆次回授業の予習本授業でコースは終了となりますが、JavaScriptの世界は広大です。テキストの最終章やコラムで紹介されている、より高度なライブラリやフレームワーク、あるいはAPI連携などの発展的なトピックについて、興味のある分野をインターネット等で調べてみてください。また、これまでの学習成果を生かし、自分オリジナルのポートフォリオサイトやWeb作品の構想を練ってみることは、継続的な学習への動機づけとして非常に有効です。

履修判定指標

履修指標	履修指標の水準	キーワード	配点	関連回
第1部：WebとJavaScriptの基礎 Web制作におけるJavaScriptの役割とHTML/CSSとの関係性を理解し、Visual Studio Codeを用いた開発環境の構築から、基本的なプログラムの記述、実行、デバッグ方法までを習得します。	【★☆☆初級】 - WebサイトにおいてJavaScriptがどのような動きを実現できるか説明できる。 - Visual Studio Codeをインストールし、日本語化などの基本設定を行える。 - alertメソッドなどを用いて、簡単なメッセージをブラウザに表示できる。【★★☆中級】 - HTMLファイル内に直接記述する方法と、外部JavaScriptファイルを読み込む方法を使い分けられる。 - コンソール機能を利用してconsole.logによるログ出力を行い、動作確認ができる。 - 大文字・小文字の区別や半角英数の使用など、記述時の基本的な文法ルールを遵守できる。【★★★上級】 - ブラウザのデベロッパーツールを用いてエラーメッセージを確認し、記述ミスを特定できる。 - HTMLの構造とJavaScriptの処理の読み込み順序など、実行タイミングの基本概念を理解している。	JavaScript、Visual Studio Code、コンソール、alertメソッド、外部スクリプト、デバッグ	10	1, 2, 3
第2部：基本文法とDOM操作変数、定数、関数、条件分岐といったプログラミングの基礎概念を理解し、DOM（Document Object Model）操作を通じてWebページの要素を動的に変更する技術を身につけます。	【★☆☆初級】 - querySelectorメソッドを用いて、HTML内の特定の要素を取得できる。 - 取得した要素のテキスト内容を書き換え、画面上の表示を変更できる。 - ボタンクリックなどの基本的なイベントを検知する仕組みを記述できる。【★★☆中級】 - constやletを用いて定数・変数を適切に宣言し、データを管理できる。 - 処理を関数（アロー関数含む）として定義し、必要なタイミングで呼び出すことができる。 - JavaScriptからCSSのプロパティを操作し、要素の背景色などを変更できる。【★★★上級】 - if文を用いた条件分岐を実装し、状況に応じて異なる処理を実行できる。 - テンプレート文字列を活用し、変数を含んだ文字列を効率的に作成できる。 - DOMのツリー構造を理解し、親子関係を意識した要素操作ができる。	DOM、querySelector、textContent、const、addEventListener、アロー関数、if文、テンプレート文字列	20	4, 5, 6, 7, 8
第3部：イベント処理とUI実装クラスの操作によるスタイルの切り替えやフォーム入力の検知など、実践的なイベント処理を学び、ユーザーの操作にリアルタイムに応答するインタラクティブなUIパーツを実装します。	【★☆☆初級】 - classListを用いてHTML要素へのクラス追加・削除を行い、見た目を変化させることができる。 - 入力フォームに入力された文字列の長さを取得できる。【★★☆中級】 - ダークモード切り替えのような、トグル（ON/OFF）機能を持つUIを実装できる。 - 論理演算子や比較演算子を用いて、チェックボックスの状態に応じたボタンの有効化制御ができる。 - Webページの読み込み完了イベントを利用し、ローディング画面を制御できる。【★★★上級】 - スクロールイベントを監視し、スクロール量に応じた数値計算を行って画面表示に反映できる。 - 複数の条件を組み合わせた複雑な条件分岐を行い、ユーザー体験を損なわないUI挙動を設計できる。	classList、ローディング画面、ダークモード、lengthプロパティ、論理演算子、真偽値、スクロールイベント	20	9, 10, 11, 12, 13
第4部：データ構造と動的生成配列やオブジェクトといったデータをまとめて扱う構造を理解し、繰り返し処理を用いて画像リストなどのHTML要素を効率的に生成・表示する方法を習得します。	【★☆☆初級】 - 配列を作成し、複数のデータを順序立てて格納することができる。 - insertAdjacentHTMLを用いて、JavaScriptからHTMLタグをページに追加できる。【★★☆中級】 - for文を用いて配列内のデータを順番に取り出し、繰り返し処理を実行できる。 - オブジェクトを作成し、プロパティを用いて名前や価格などの関連するデータを管理できる。 - 配列とループ処理を組み合わせ、リスト形式のHTMLコンテンツを動的に生成できる。【★★★上級】 - 配列の中にオブジェクトが含まれるような、複雑なデータ構造を適切に操作できる。 - 分割代入を用いて、オブジェクトや配列から必要なデータを簡潔なコードで取り出せる。 - 変数のスコープ（有効範囲）を正しく理解し、予期せぬ変数の上書きや参照エラーを防ぐことができる。	配列、オブジェクト、for文、insertAdjacentHTML、スコープ、分割代入、動的生成	20	14, 15, 16, 17, 18
第5部：Webアニメーションの実装 JavaScriptとCSSアニメーションを連携させた動きの制御や、スクロール位置を監視するAPIを活用し、視覚的に魅力的なWeb表現を実装します。	【★☆☆初級】 - JavaScriptでクラスを付与することをトリガーとして、CSSアニメーションを開始させることができる。 - setTimeoutを用いて、指定した時間後に処理を実行させることができる。【★★☆中級】 - 複数の要素に対して、タイミングをずらしながら順番にアニメーションを適用できる。 - アニメーションの完了を考慮した処理の流れを構築できる。【★★★上級】 - Intersection Observer APIを使用し、要素が画面内に入ったことを検知してアニメーションを実行できる。 - スクロール連動型のアニメーションにおいて、パフォーマンスを意識した実装ができる。 - ユーザーの視線誘導を意識し、適切なタイミングとイージングで動きを制御できる。	CSSアニメーション、setTimeout、Intersection Observer API、遅延実行、コールバック関数、スクロール連動	20	19, 20, 21, 22
第6部：Webサイト制作演習これまでの学習内容を統合して機能的なWebサイトを構築し、エラー解決やコードの整理を含む実践的な制作能力と、自力で問題を解決するスキルを養います。	【★☆☆初級】 - 画面遷移や基本的な表示切り替えを含む、一連のWebページ機能を実装できる。 - 提供されたサンプルコードや解説を参考に、記述ミスなくコードを完成させることができる。【★★☆中級】 - forEachメソッドを用いて、複数の要素（メニューや画像など）に対して一括でイベントを設定できる。 - 画像ギャラリーやスライドメニューなど、一般的なWebサイトのUIコンポーネントを作成できる。 - 開発中に発生したエラーに対し、コンソールを確認して原因の当たりをつけることができる。【★★★上級】 - 作成したコードを見直し、重複の排除や可読性の向上（リファクタリング）を行うことができる。 - ブラウザごとの挙動の違いや予期せぬバグに対し、デベロッパーツールを駆使して修正できる。 - 複数の機能が混在するコードにおいて、処理の競合を防ぎ、整合性の取れたプログラムを構築できる。	forEach、画像ギャラリー、スライドメニュー、デバッグ、リファクタリング、トラブルシューティング	10	23, 24, 25, 26, 27, 28, 29, 30

評価方法

評価基準	評語
学習目標をほぼ完全に達成している・・・・・・・・・・・・・	S (100～90点)
学習目標を相応に達成している・・・・・・・・・・・・・・・	A (89～80点)
学習目標を相応に達成しているが不十分な点がある・・・・・・	B (79～70点)
学習目標の最低限は満たしている・・・・・・・・・・・・・・	C (69～60点)
学習目標の最低限を満たしていない・・・・・・・・・・・・・	D (60点未満)

教科書

参考文献

実験・実習・教材費