概要

HTML・JavaScript・CSSを手を動かしながら習得し、診断アプリをGitHubで公開する

想定読者

プログラミング未経験の高校生・大学生、あるいは社会人一年目でWebの基礎から学び直したい人。環境構築で挫折した経験がある人にも適している

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

• JavaScriptやHTMLの基礎をすでに習得済みで、フレームワークや設計手法を学びたい人には内容が初歩的すぎる
• Pythonやサーバーサイド開発をメインに学びたい人には対象技術領域が合わない
• 実務レベルのWebアプリ開発やチーム開発プロセスを求める人には発展的な内容が不足する

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

• HTMLタグの構造と意味を理解し、自己紹介ページを自力で組み立てられる
• JavaScriptの変数・条件分岐・ループ・関数・オブジェクトといった基本構文を実際に書いて確認できる
• CSSでページの見た目を制御するセレクタとプロパティの使い方を身につけられる
• HTMLとJavaScriptを組み合わせた診断アプリを、企画・実装・公開まで一通り完成させられる
• GitHubを使ったWebサイトの公開手順を経験できる
• 環境構築で止まらず、VS Codeを入れてすぐコードを書き始める流れを体験できる

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

• 第 1 章 HTMLでWebページを作ってみよう — タグ構文と自己紹介ページ作成まで。環境を整えながら最初の達成感を得るための助走として機能する
• 第 2 章 JavaScriptでプログラミングしてみよう — 変数・計算・論理・ループ・コレクション・関数・オブジェクトと7節に分けて丁寧に積み上げる。本書の学習量の中心
• 第 3 章 CSSでWebページをデザインしてみよう — スタイル適用の仕組みを学ぶ章。HTMLとJavaScriptを理解した後に読むことで結びつきが分かりやすい
• 第 4 章 診断アプリを作ってみよう — 企画から機能実装・GitHubでの公開まで通し体験できる。ここまで完走すれば作ったものをURLで共有できる状態になる

ハイライト

• vscode入れて本に書いてあるコードを書けば、プログラミングができます(入門書としての環境依存ハードルの低さを端的に示す評価)
• インターネットで学ぶ話題の通信制学校「N高校」が展開するプログラミング教育メソッドを大公開！ これからの時代に必須のスキル「Webプログラミング」の基礎を名物エンジニアが丁寧に解説。 読むだけでなく、実際に手を動かすことで実践的な知識をインプット。(N高校の実際の授業カリキュラムを書籍化したという独自性を示す出版元の説明)

外部からの言及

• 環境構築で詰まる心配がなく、VS Codeを用意してコードを写すだけで動くという点が、他の入門書との差として言及されている。HTMLとCSSから始める学習順序を『最初の一歩として一つの最適解』と評する声がある(qiita)
• 著者・吉村総一郎(sifue)自身がQiitaに寄稿した記事によると、N高校のWebプログラミング入門コースは完全未経験者が履修すると約182時間かかる設計で、本書はそのコース教材を下敷きにしている。授業映像と対応するため、独習者が体系的な流れを追いやすい構成になっている(other)

編集メモ

Qiita 言及記事 1件(likes 1)のみ確認。N高校の授業教材が原点という出典の明確さで信頼性はあるが、外部シグナルが薄いため supplementary と判定

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

• パソコンの基本操作(ファイル管理・ブラウザ操作)ができること
• VS Codeのインストールができる程度のPC設定経験(本書内に手順はあるが、初めてソフトをインストールする状況だと手間取る場合がある)

学習のコツ

• CHAPTER1とCHAPTER2を順番通りに進めることを前提に設計されているため、JavaScriptだけ先に読もうとするとHTMLとの連携が分かりにくくなる。1章から通して進めること
• CHAPTER4の診断アプリ作成は、途中で挫折しても2章末まで終わっていれば基礎は身についている。公開体験は加点として捉え、2章完了を一区切りの目安にすると良い
• GitHubでの公開(SECTION18)は環境がないと詰まりやすい。GitHubアカウントを事前に作っておき、CHAPTER4に入る前に準備しておくと止まりにくい
• 本書は授業映像(N予備校)に対応した教材が原点のため、書籍を読み進めながら分からない箇所はN予備校の無料公開部分も合わせて参照すると理解が補完できる