フロントエンド開発入門を読んでみました。印象に残った内容を書き残しておきます。
２章 - フロントエンドエンジニアに求められるスキル
- Web という変化の速い環境下において、開発者は、必要に応じて適切な情報を収集し、技術を習得できればよい。常にフレームワークの変更に追従することに価値の本質はない。（開発者は解決策を生み出すことに価値を見出す必要がある。）
３章 - フロントエンドにおける一般的なツール群
- webpack では、モジュール化されたスクリプトファイルを結合し、ES Module をサポートしていないブラウザでも ES Module をサポートしているように振る舞わせることができる。
- 仮想 DOM とは、インメモリ上に展開されたツリー構造のオブジェクトである。UI の変更が発生するタイミングで、ブラウザ上で展開されている DOM との差分を検知し、差分のみを実際の DOM に適用する。
- フレームワークの選定では、ユーザー数の多さ、コミュニティの活発さ以外にも、チームメンバーのスキルや親和性（過去の経験で近しい概念を習得しているか等）も考慮すべきである。
- フロントエンドは仕様変更の多さや技術変遷の速度が速いため、仕様変更のしやすさ（他の技術との置き換えやすさ）は重要である。
- Redux は、複数のビューにまたがるステートを、Store で一元管理することができる。これによりビューとモデルの疎結合を実現することができる。また、この疎結合により、コンポーネント思考の UI 設計との親和性も高い。
- ブラウザの CSS 対応状況については、機能のサポート可否は Can I use を、プロパティ対応状況は MDN を、それぞれ参照する。
- Vue.js の SFC や、Angular では、BEM が解決した CSS のスコープ管理をツーリング側で解決してくれる。また、人手が介在しないので、人為的なミスによるバグの作り込みもない。
- 静的解析ツールは、コードを実行せずにコードの誤りを予測するものである。事前にコーディングに関するルールを静的解析ツールに反映することで、ソースコードレビューなどで指摘観点を減らすことができる。ルールは開発状況やチームメンバーのスキルに応じて適宜変更を加えていく。ツールには、Prettier、ESLint、HTMLHint、stylelint などがある。
- ユニットテストを導入することで、リファクタリングを実施した際にも、想定される動作を保てているかを検証することができる。開発当初から高いコードカバレッジを実現することは難しいので、スモールスタートで導入するというのも、ユニットテスト導入の考え方の一つである。
４章 - 開発の現場における仕事の進め方
- ソフトウェア開発では、最新の技術要素や、フレームワーク、ライブラリを導入することが重要なことではなく、動作するプロダクトをユーザーに提供し続けることが重要である。つまり、変化に柔軟に対応するための解決策を持っている必要がある。
６章 - 設計と実装
- テストコードからアプリケーションの仕様をハックすることができるため、改修時の確認コストを削減することができる。
７章 - CI/CD によって受けられるメリット
- CI にテストやリントを組み込むことで、これらの確認行為を機械的に実施できるようになる。これにより、人為的な確認の実施漏れを防ぐことができ、コードの健全性を保つことができる。また、手作業によるコードレビューの手間を省くこともできる。
- Chrome では、読み込まれた CSS のうち、利用されていないコードのカバレッジを測る機能を提供しており、未使用のコードを調べることができる。
８章 - 解析とモニタリング
- ソフトウェアをリリースした後にも、ソフトウェアを育てていくことが重要視されている。解析やABテストを実施することで UI まわりの付加価値となり得る機能を検証することができる。
９章 - チーム開発と Web への貢献
- スクラムにおける振り返りでは、スプリント中の良い取り組みを洗い出し、プロセス改善につなげる行為である。チームを成長に導くための学習サイクルである。
最新のフロントエンド開発の知識を広く学習することができる良書であると感じました。全体を通じて、著者の実際の経験に裏打ちされたアドバイスや説明がなされており、説得力のある内容です。書籍のタイトルに「入門」と記されているように、取り扱っているトピックは広く浅いです。気になるトピックについて深堀りするためには、別途専門書籍で知識を深める必要があります。