プログラミングの初心者がコードを書いている様子を見て、気付いたことがあります。それは書くコードの中身だけでなく、書き方自体が中級者以上と大きく違うことです。初心者の中には、コードを上から順に書いていき、完成したら実行する人がいます。そして動かなくて途方に暮れます。初心者の「あるある」の1つです。

　中級者以上は、そうしたコードの書き方はしません。上から順に書くのではなく、括弧やクォーテーション マークなどの対応する部分を先に閉じて、その内側にコードを足していきます。そして、少し書き進めたら実行して、正しく動くことを確認しながら作業を進めていきます。中級者以上は「動くコード」を常に保つようにします。そして、こまめに確認します。

　書籍などに載っているサンプル コードは、試行錯誤が終わったあとの完成したコードです。しかし実際にプログラムを書く際には、様々な確認をしながらコードを書き進めます。

　この本では『BMI計算アプリ』という簡単なアプリケーションの作成を通して、1文字ずつどのように書くのか、どういった確認作業をしながらプログラムを書き進めていくのかを示します。また、コードを書く際のミスの防ぎ方や関連する知識を織り交ぜながら解説をおこないます。

　作成するアプリケーションのコードはシンプルです。以下のリンクからダウンロードすることができます。本を読む方は、サンプル コードとして手元に置いて、Webブラウザーで確認しながら読むとよいでしょう。

　簡略化した目次は、以下の内容になります。詳細な目次は、さらに下で示します。

まえがき
第1章 プログラムの書き方の原則
第2章 開発の準備
第3章 基礎知識
第4章 完成したアプリケーション
第5章 出力確認を目指す
第6章 ボタンを押したら処理をおこなう
第7章 入力情報を得る
第8章 情報を出力する
第9章 見た目を整える
第10章 内部処理を書く1
第11章 内部処理を書く2
あとがき

　というわけで、分かっている人には冗長でしょうが、現実のプログラマーの作業過程を書いていきます。また、前提となる知識も記していきます。贅沢にページ数を使い、1つの簡単なアプリケーションをJavaScriptで作り上げていく様子を体験していきましょう。

まえがき
第1章 プログラムの書き方の原則
　　1-1　中級者以上がコードを書く時に気を付けていること
　　1-2　括弧やクォーテーションを閉じながら書く
　　1-3　インデントの位置を揃える
　　1-4　変数は宣言してから使う
　　1-5　少し書くごとにコンソールに出力して確認する
　　1-6　コンソールにエラーが出れば取り除く
　　1-7　演算子の前後には半角スペースを入れる
　　1-8　変数には意味の分かる名前を付ける
　　1-9　関数は動詞（＋名詞）で命名する
　　1-10　コメントを多めに入れる
　　1-11　適度に空行を入れて構造化する
　　1-12　インデントを深くしない
第2章 開発の準備
　　2-1　ソフトのダウンロードページ
　　2-2　Visual Studio Code での操作
　　2-3　Google Chrome での操作
第3章 基礎知識
　　3-1　プログラミングの学習について
　　3-2　JavaScriptプログラムの頻出用語
　　3-3　プログラムの基本構造
　　3-4　WebブラウザーとHTMLファイル
　　3-5　HTMLファイルとJavaScriptのプログラム
　　3-6　HTMLファイルとCSS
第4章 完成したアプリケーション
　　4-1　完成したアプリケーションの画面
　　4-2　index.html
　　4-3　main.js
　　4-4　style.css
　　4-5　注意して欲しいこと
第5章 出力確認を目指す
　　5-1　htmlタグまで
　　5-2　headタグ
　　5-3　bodyタグ
　　5-4　main.jsを読み込む
　　5-5　main.jsにプログラムを書く
　　5-6　よくあるエラー
第6章 ボタンを押したら処理をおこなう
　　6-1　ボタンを配置する
　　6-2　DOM読み込み後の処理を登録する
　　6-3　ボタンの処理を実装する
第7章 入力情報を得る
　　7-1　HTMLでUIを作る
　　7-2　CSSで見た目を調整する
　　7-3　プログラムで入力欄の値を得る
第8章 情報を出力する
　　8-1　出力用の領域を作る
　　8-2　出力用の処理を書く
　　8-3　出力の見た目を整える
第9章 見た目を整える
　　9-1　タイトルを付ける
　　9-2　headタグ内を整える
第10章 内部処理を書く1
　　10-1　入力欄から得た値を確かめる
　　10-2　入力欄から得た値を数値にする
第11章 内部処理を書く2
　　11-1　BMIを計算する
　　11-2　適性体重を計算する
　　11-3　表示用のHTML文字列を作る
あとがき

　本のページのサンプルです。