図解! JavaScript のツボとコツがゼッタイにわかる本 “超”入門編

JavaScript の文法を基礎これから学びたいという初心者のための入門書。基本文法からゲームの作成まで、楽しくプログラミングを学べます。
Chapter01 JavaScript をはじめよう
Chapter02 データ型と演算子を学ぼう
Chapter03 配列を学ぼう
Chapter04 制御構文を学ぼう
Chapter05 関数を学ぼう
Chapter06 組み込みオブジェクトを学ぼう
Chapter07 JavaScript で HTML を書き換える方法を学ぼう
Chapter08 ブラックジャックを作ろう (プログラムの基盤づくり)
Chapter09 ブラックジャックのプログラムを完成させよう
Chapter10 ブラックジャックを改良しよう

『図解! JavaScript のツボとコツがゼッタイにわかる本 “超”入門編』 (中田 亨 著、秀和システム、2021 年 3 月刊) は、JavaScript をまったく書いたことがない人が、基本の文法を一つずつ覚え、最後にブラウザーで遊べるカードゲームを作り上げるまでを案内する入門書です。版元の紹介では、HTML や CSS の基礎知識を身に付けた人の次のステップとして位置づけられ、未経験者や初心者のために基本的な文法を厳選して学ぶ超入門書と説明されています。習った文法をすぐにゲーム作りで使うので、文法をどこで使うのか分からないまま挫折するのを避けたい人に向いた一冊です。

全 10 章の構成、文法の 7 章とブラックジャックの 3 章

前半の Chapter01 から Chapter07 は文法編です。Chapter01 で JavaScript の役割と書く場所、従来の ES5 と ES2015 以降の書き方の違い、ブラウザーのコンソールの使い方、エディターの準備を確かめ、Chapter02 のデータ型と演算子、Chapter03 の配列と連想配列、Chapter04 の条件分岐と繰り返し、Chapter05 の関数と 変数の有効範囲、Chapter06 の文字列や日付、数学などの組み込みオブジェクトへと進みます。Chapter07 では HTML のツリー構造とノード、Document オブジェクト、イベントの扱いを学び、JavaScript から画面を書き換える方法に入ります。後半の Chapter08 から Chapter10 は、ブラックジャックを題材にした制作編です。Chapter08 でゲームのルールと処理の大まかな流れを日本語で組み立て、Chapter09 で変数と関数の名前を決めてプログラムを完成させ、デバッグ用の関数も作ります。Chapter10 では、ディーラーだけのルールや勝負するまで相手のカードが見えない仕組みを足して、ゲームを改良していきます。

文法を覚えても書けない壁を、小さなゲームで越える

プログラミングの入門でつまずきやすいのは、文法の説明は理解できても、自分で何かを作ろうとすると最初の一行が書けないという段階です。文法は部品の説明であり、部品をどう組み合わせれば目的の動きになるかは、実際に小さなプログラムを作る経験の中でしか身につきにくいからです。ブラックジャックは、カードの山を配列で表し、点数を関数で計算し、勝敗を条件分岐で判定し、ボタンのクリックをイベントで受け取るというように、前半で学ぶ文法の出番を作りやすい題材です。本書がいきなりコードを書かず、まず処理の流れを日本語で書いてから JavaScript に置き換える手順を踏んでいるのも、作りたいものを手順に分解する練習として効いてきます。

HTML と CSS の基礎があると読みやすい、向かない読者

画面を書き換える Chapter07 以降は HTML のタグの構造を前提に進むため、タグや属性の基本を知らない場合は、HTML と CSS の入門書の選び方 を参考に一冊先に通しておくと理解が早くなります。一方で、React や Vue.js といったフレームワーク、非同期処理やサーバーとの通信、TypeScript を学ぶ本ではありません。すでにほかの言語で開発経験があり、JavaScript の言語仕様を体系的に押さえたい人には、内容がやさしすぎると感じられるはずです。入門のあとにどの本へ進むかは、JavaScript と TypeScript の本の選び方 で目的に合う次の段階を探せます。

Web ページに動きを付けてみたい、プログラミングを独学で始めたが文法書の途中で止まってしまった、という人にとって、作る楽しさを味わいながら基本文法を一通り使い切れる本書は、最初の一冊として元が取りやすい選択です。完成したゲームに自分でルールを足していく体験は、次に何を作るかを考える出発点にもなります。