Chapter 01

はじめに:この本について

Satoshi Takeda
Satoshi Takeda
2021.09.30に更新

この本について

Rebuild your mental model of web frontend programming.

この本の趣旨・読後のゴールは、仰々しい言い方をすると上記に集約されます。

筆者自らの Web フロントエンドの学び直しと同時に並行して執筆しています。その学び直しの中で持っておくと良さそうなメンタルモデルについて考えていきます。

React を扱った Web フロントエンドでの所作や勘所がなんとなく見えてきたところで Angular を扱うようになり、あらためて Web フロントエンドで持っておくと良さそうなメンタルモデルを再構築してみたいというのがこの本の大きな趣旨です。

読後は Web フロントエンドに対しての考え方やとらえ方が少しでも良い方向に変わっていることを狙いとしています。

対象読者

すでに HTML, CSS, JavaScript(TypeScript)に取り組んでいるという方が対象です。特に下記のような読者で、Web フロントエンドについて学び直しをしたいといった方向けに書いています。

  • JavaScript ライブラリやフレームワークを扱って、Web アプリケーションの UI を構築している
  • Flux や Redux、Recoil もしくは NgRx など状態管理 + View に取り組んだことがある
  • [] === []"a" === "a" の結果とその違いをなんとなく理解している

この本で扱うこと

メンタルモデル再構築についての本なので特定の技術に関連する詳細な情報やプラクティスは扱いませんが、下記に関連するような、実はこうだったのかという新しい気付きを得るために試行してみたいと考えます。

  • ライブラリやフレームワークをまたいでも、持っておいて損はない知識
  • フロントエンドにまつわる State/View のメンタルモデル再構築
  • JavaScript のイディオムを本当に理解しているのか、メンタルモデルを検証・脱構築
  • フロントエンドと外部境界、なぜ GraphQL もしくは Server Driven UI なのか

本書は下記のような流れで進みます。

1 章はコンポーネント志向の UI ライブラリである React と、フロントエンドを構築するうえでのフルスタックフレームワークと言われている Angular の特徴や共通点を列挙します。現代におけるコンポーネント志向の UI 構築、Web フロントエンド開発とはなんだったか、をあらためて学び直しよりよいメンタルモデルのための準備運動をします。

2 章はさらに学び直しと向き直りを推し進めます。アプリケーションを作るうえでの HTML について再考した結果 HTML への認識もリビルドが必要そうですし、JavaScript についても誤解だらけでさらにリビルドが必要だと自ら感じたため、何が誤解だったかを炙りだしメンタルモデルを検証し認知モデルをあらためていきます。

以下のようなコードから類推される結果を想定しながら楽しく再構築します。

function 倍にする(x) {
  x = x * 2;
}

let お金 = 10;
倍にする(お金);
console.log(お金); // 何が出力されますか

3 章では API との通信を境界にして Web フロントエンドはどんな課題を解決しようとしているのか、GraphQL, Server Driven UI の出自や、外部境界をどう考え現実の課題に取り組むとよさそうか考えます。

すべてとは言わずとも、この本のどこかが、あなたのメンタルモデル再構築に役立てられることを願っています。