概要

HTML/CSS/JavaScript/Node.jsをひとつながりで習得し、フルスタックWebアプリを自作する

想定読者

Web制作・Webアプリ開発を始めたい初学者、またはフロントとサーバー両方を一冊でざっと把握したい入門段階のエンジニア

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

• すでにHTML/CSS/JavaScriptを実務で使っている人には既知事項が多く内容が薄い
• Node.jsやExpressを本番運用するレベルの読者には扱いが入門にとどまる
• 各技術を深く掘り下げたい場合は、それぞれ専門書が別途必要になる

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

• HTMLとCSSでWebページの構造とスタイリングを記述できる
• JavaScriptでDOMを操作し、インタラクティブなページを実装できる
• Node.jsとExpressでサーバーサイドのルーティングとAPIエンドポイントを構築できる
• SQLite3を使ったRDBでデータの永続化と基本的なCRUD操作ができる
• ログイン管理とタスクCRUDを備えたTodoアプリをフルスタックで完成させられる
• フロントからサーバーまでをJavaScript一言語でつなぐ技術スタックの全体像を把握できる

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

• 第 1 章 概要と開発環境構築 — 学ぶ全技術の地図を描く章。序盤に全体像を掴めるため、挫折防止に効果的
• 第 2 章 HTML・CSS基礎 — ページ構造とスタイリングの基礎。既にHTML/CSSを知っている読者は速読で可
• 第 3 章 JavaScript基礎 — DOM操作・イベント処理まで。サーバーサイドJSとの語彙共通化が本書の特徴
• 第 4 章 Node.js基礎 — サーバーサイドJavaScriptの基本。Chapter 3と連続して読むと言語の文法を二度学ばずに済む
• 第 5 章 Node.js + Expressによるサーバー構築 — ルーティング・ミドルウェアの基礎。実務的なWebサーバーの骨格を最小構成で体験できる
• 第 6 章 SQLite3によるデータベース操作 — RDBとSQLの基本をExpressアプリと接続する形で学ぶ。最も実践的な章のひとつ
• 第 7 章 Todoアプリ完成(ログイン・CRUD統合) — 全技術を組み合わせた総仕上げ。最終章から逆引きしてつまずいた箇所を調べる読み方も有効

ハイライト

• 本来なら、これらをマスターするにはたくさんの入門書や参考書籍が必要となってしまいますが、すべて用意し学ぶのは初心者にはかなりな負担です。そこで本書では、『これだけわかれば何かできる』という最低限の知識に絞って一冊にまとめました。(複数書籍が必要な技術範囲を一冊に凝縮した本書の編集方針が端的に表れている箇所)
• このアプリケーションは、ユーザーのログイン管理、タスクの作成・取得・更新・削除の機能を備えており、いろいろなアプリケーションの基本となる形になっています。(最終章のTodoアプリが教材として完結している点を示す記述。実用性の根拠)

編集メモ

Qiita記事での言及は検索上位では確認できず、累計likes・引用件数ともに数値根拠が得られなかった。ただし楽天ランキング等の外部シグナルも本セッションでは未取得のため、HTML/CSS/JavaScript/Node.jsをセットで俯瞰する入門書として位置付けるsupplementaryが現時点での保守的な評価となる

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

• プログラミングの概念（変数・関数・条件分岐・ループ）をいずれかの言語で経験していること
• ターミナル（コマンドライン）の基本操作（ディレクトリ移動・コマンド実行）ができること
• テキストエディタでのファイル編集経験（VSCode等）

学習のコツ

• Chapter 7のTodoアプリを先に動かしてみてから、Chapter 1に戻って読み進めると、各技術の役割分担が最初から腑に落ちやすい
• HTML/CSSに既習の読者はChapter 2を速読し、Chapter 3（JavaScript）から本格的に取り組むと時間効率が良い
• Chapter 5〜6はExpressとSQLiteが登場するサーバーサイド核心部。コードをそのまま写すだけでなく、ルーティングのパスとSQLのCRUDを自分の言葉で説明できるか確認しながら進むと定着が早い
• 一冊で完走した後は、各技術ごとの専門書（JavaScript/Node.js/SQLそれぞれ）に移行すると学習の段差が小さい