概要

JavaScriptの基礎文法とDOM操作を30ステップの演習で習得する

想定読者

JavaScriptをほぼ初めて触る学生・社会人で、教室や自習の場で手を動かしながら学びたい人。授業テキストとして教員が採用するケースにも対応した構成になっている。

こんな人には向いていない

• すでにJavaScriptで簡単なWebアプリを作成したことがある人には既知の内容が大半を占め、独立した演習課題として使う価値は薄い
• React/Vue等のフレームワーク学習を急ぐ人には、素のDOM操作中心の本書では接続が遠い
• 非同期処理(Promise/async-await)や型安全(TypeScript)を業務レベルで扱いたい人には内容が浅い

読了後にできるようになること

• 変数・配列・関数・制御構文などJavaScriptの基本文法を演習形式で確実に身につけられる
• document.getElementById等によるDOM操作(要素取得・内容変更・追加・削除)を手順を踏んで習得できる
• イベントハンドラとイベントリスナーの違いと使い分けを理解できる
• フォーム操作・日付/時刻・Mathオブジェクト・文字列操作など実用的な組み込みオブジェクトを一通り使える
• setIntervalによる繰り返し処理など動的なUIの基礎パターンを実装できる
• 外部jsファイルへの分離とブラウザコンソールを使ったデバッグの基本を学べる

本書のキー概念(章解説)

• 第 1 章 JavaScriptの記述ルール
• 第 2 章 イベントハンドラ
• 第 3 章 コンソールの使い方 — デバッグ習慣を最序盤に身につけられる構成は実用的
• 第 4 章 関数の基本
• 第 5 章 変数の利用
• 第 6 章 変数の演算
• 第 7 章 配列の利用
• 第 8 章 関数の引数
• 第 9 章 要素の取得と内容の変更 — DOM操作の入口。ここから先が本書の実践的な核心
• 第 10 章 複数の要素の取得
• 第 11 章 要素の追加と削除
• 第 12 章 繰り返し処理−1
• 第 13 章 繰り返し処理−2
• 第 14 章 条件分岐−1
• 第 15 章 条件分岐−2
• 第 16 章 breakとcontinue
• 第 17 章 関数の戻り値
• 第 18 章 文字入力とエラー処理
• 第 19 章 オブジェクト、メソッド、プロパティ
• 第 20 章 スタイルの変更
• 第 21 章 属性値の変更
• 第 22 章 イベントリスナー — addEventListenerへの移行を学ぶステップ。ステップ2との対比が有益
• 第 23 章 フォームの操作−1
• 第 24 章 フォームの操作−2
• 第 25 章 日付、時刻の操作
• 第 26 章 Mathオブジェクト
• 第 27 章 文字の操作
• 第 28 章 オブジェクト変数
• 第 29 章 一定間隔で処理を繰り返す
• 第 30 章 jsファイルの分離とエラー対策 — 学習の締めとして実務的なファイル分割とデバッグ手順を扱う

ハイライト

• JavaScriptの基礎文法とDOM操作を、30ステップの演習形式で学ぶワークブックの第3版。変数・関数・制御構文・イベント処理・非同期処理までを段階的に積み上げ、授業や自習で着実に手を動かしながら習得できる構成となっている。(演習形式という本書の最大の特徴と、対象とする習熟範囲が端的にまとまっている)

編集メモ

Qiita言及記事 0件 / 累計likes 0。外部シグナルは確認できず。出版社(カットシステム)の紹介ページと書誌情報のみを根拠とする。授業テキスト採用実績を持つ教育特化の入門書として位置づけられる補完的な選択肢。

読む前に押さえておきたいこと

• HTMLタグの基本的な使い方(タグの入れ子構造、idとclass属性の概念)
• ブラウザでHTMLファイルをローカルから開く操作ができること
• プログラミング経験は不問だが、テキストエディタの基本操作は必要

学習のコツ

• 1日1ステップを目安に設計されているため、30日間の学習カレンダーを先に設定してから始めると完走しやすい
• ステップ3(コンソールの使い方)は序盤に登場するが、以降のすべてのステップで常にコンソールを開いておく習慣をつけると、エラーの自己解決力が大幅に上がる
• ステップ9〜11のDOM操作3本は連続して読み通した後で、まとめて演習コードを書き直すと定着が早い
• ステップ22(イベントリスナー)とステップ2(イベントハンドラ)を並べて比較すると、現代的な書き方への理解が深まる