JavaScriptとDOM | Webtraining　- Webトレは、初心者から実務までのWeb学習トレーニング

JAVASCRIPT DOM COURSE

JavaScriptとDOM

JavaScriptからHTML要素を取得し、クリックや入力などの操作に合わせて表示を変更する方法を全12回で学びます。

このJavaScriptとDOM講座では、Webページ上の要素を自由に操作し、動きのあるインタラクティブな表現を作るための実践的な内容を学びます。

まずは、JavaScriptでDOM（Document Object Model）の仕組みを理解し、HTML要素を取得・変更する基本操作を体験します。イベントリスナーを使ってクリックや入力などの動きを検知し、フォームの値を取得して表示するなど、動的なページの作り方を身につけます。

さらに、classをつけるclassListを使った見た目の変更、setAttributeによる属性操作、新しい要素を追加するToDoリスト風の実装など、実際のWebアプリ制作にもつながる内容を扱います。

後半では、fetchを使ったAPI通信（then / async await）や、複雑なJSON構造の読み取り、setTimeout / setInterval によるタイマー処理、localStorageを使ったブラウザ保存など、実務でも活かせるJavaScriptとDOMの応用力を育てます。

DOM操作を通じて、「ページを動かす」「データを扱う」「結果を残す」という一連の流れを理解し、ブラウザ上で自在に動きを作り出せる力を養っていきましょう。

DOMとは？

DOM（ドム）は、Document Object Model の略で、Webページを「JavaScriptから操作できるようにした仕組み」です。
Webページの見た目はHTMLとCSSで作りますが、その裏側では、ページ全体が「オブジェクトのかたまり」として扱われています。

JavaScriptでは、このDOMを使って、

ボタンをクリックしたときに表示を変えたり、
フォームに入力された内容を読み取ったり、
新しい要素を追加・削除したり

といった動きのあるWebページをつくることができます。

この講座では、DOMの基本的な考え方と、よく使う書き方（プロパティやメソッド）をひとつひとつ丁寧に学びます。

この講座を始める前に

こちらの学習を始める前に、HTML/CSSに不安がある場合は、一度下記のトレーニングを受けておきましょう。

WHAT YOU WILL LEARN

このコースで学ぶこと

HTML要素を取得する

id、class、CSSセレクターを使い、操作したいHTML要素をJavaScriptから取得します。

操作をイベントで受け取る

クリック、入力、キー操作などを検知し、必要な処理を実行します。

画面の内容を変更する

class、属性、文章、要素を変更・追加し、操作に応じて画面を更新します。

外部データを扱う

API、JSON、非同期処理、localStorageを使い、取得したデータを画面へ反映します。

FOR LEARNERS

このコースの対象者

JavaScript基礎を学び、次にHTML要素を操作したい方
クリックやフォーム入力に反応するページを作りたい方
DOM、イベント、APIという言葉を実例から理解したい方
Webアプリケーション制作の基礎へ進みたい方

HOW TO LEARN

学習の進め方

STEP 1 対象のHTMLを確認する
JavaScriptから操作する見出し、ボタン、入力欄などの構造を確認します。
STEP 2 要素を取得して処理を書く
DOM APIを使って要素を取得し、イベントに合わせた処理を記述します。
STEP 3 ブラウザで操作する
クリックや入力を試し、画面の変化とコンソールの結果を確認します。
STEP 4 課題とテストで振り返る
練習問題へ取り組み、全12回の後にコーステストで理解度を確認します。

CURRICULUM

全12回のカリキュラム

DOMの取得から始め、イベント、フォーム、要素や属性の変更、API、データ保存へ順番に進みます。

START LEARNING

操作に反応するページを作ろう

まずは第1回で、JavaScriptからHTML要素を取得する仕組みを確認しましょう。

第1回から始める JavaScript基礎テストに挑戦する