※2019/11/8: 無料サンプルと目次を記事内に追加しました。
2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。
自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。
- メディア:
- この商品を含むブログを見る
表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。
タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！
同人版との違い / 加筆・修正した点
紙の本で比較すると、ページ数が110ページ程度→200ページ超と大幅に加筆しています。 同人版のときは印刷費用なども怖くてあえて書かなかった部分がたくさんあったのですが、それらもすべて盛り込んだ結果、大変なことになりました。
すべてのコードをTypeScriptベースに変更
同人版では、改善後のコードはBabelを利用したESNextのコードとしており、TypeScriptについては「かなり流行ってるし、こちらもオススメだよ」程度に触れていました。
しかし、「これからレガシーフロントエンドを改善するのであれば、選択肢としてTypeScriptを無視するのはありえないだろう」と考え、すべての改善後コードをTypeScriptを前提とした形に変更しています。
結果的には、サンプルコードを含めたすべてのコードを書き直すことになって死ぬかと思いました。
TypeScript導入に関する章を追加
全コードがTypeScript前提となったので、TypeScript導入に関するセクションも追加しています。主にツラい環境への段階的な導入にフォーカスを置いています。
- どういった設定から始めたらよいのか
- 型定義で落ちる部分はどう対処したらいいのか
- anyとどう向き合えばいいのか
といった、既存コードベースに導入する際に困る点を詳細に書いたつもりです。
全体的に解説部分と実践編とで分離
同人版は、一冊を通してサンプルコードをひたすら書き換えていくような内容になっていました。 これはこれで写経とかもできて楽しかったのですが、読む本としてはツラいものがあるだろうな〜と思っていました。
そこで商業版では、各章ごとに基本的な解説を用意した上で、章末尾に実践編として同人版のようなサンプルコードの書き換え例を紹介する形としています。
情報だけざっと読みたいんじゃ〜〜、という方は各章の前半部を見てもらえればOKですし、さらに深く理解したい場合には、1章ずつ実践編をこなしていくことで、同人版と同様に手を動かして書き換えの流れを追うことも可能になっています。
ESLint/Prettierの章を追加
- そもそもなぜLintツールが必要なのか？
- 段階的に導入するためにはどうしたらよいか？
といった点をがっつり書いています。 TypeScriptと組み合わせた場合のtypescript-eslintの導入も紹介しています。
Vue.jsに関する説明も掘り下げ
本書後半では、jQueryなどで書かれたレガシーコードからの書き換え先として、主にVue.jsを取り上げて紹介しています。
同人版ではひたすらサンプルコードを書き換えつつ紹介していましたが、レガシーコードとは根本的な考え方が異なり困惑する部分も多いかなと思ったため、簡単なモーダル表示なども例にあげつつ、同人版よりかなり掘り下げて書いています。
その他
他にもさまざまな加筆・修正が入っています。
- パッケージ管理ってどうしたらいいのか
- サーバサイドでレンダリングされるテンプレート依存のコードへのテストをどう書くか
- 改善完了後にどうしたらいいか
- などなど...
（足しすぎてもはや自分でもよくわからない）
どんな方にオススメか
次のような方が想定読者です（本書内に書いてある内容と同一です）
- レガシーフロントエンドから脱却する現実的な方法を知りたい
- モダンなツール・ライブラリーのメリットや導入方法を知りたい
- 改善作業における心構えやノウハウを知りたい
- 改善作業をしたいが何から手をつけたらよいかわからない
- 実践的に手を動かしてモダンな技術要素を学びたい
JavaScriptを利用したフロントエンド開発における基礎的な部分の説明は省略しています。DOM などのピンと来ない場合には少し難しいかもしれません。
無料サンプル
1章までの無料サンプルです。なんとなくの雰囲気はわかるかもしれません。
目次
目次も以下に載せておきます。いっぱい書いたな..って気持ちになりました。
第1章 改善の前に
1.1 改善作業に伴うさまざまなリスク
1.2 改善で得たいものは何か?
1.3 「安全」な改善とは
1.4 リスクを軽減する
第2章 レガシーコードを理解する
2.1 いきなりコードを変更しない
2.2 DOMの扱いで分離する
- Write/書き込み
- Read/読み込み
- Event/イベントハンドリング
2.3 理解を記録として残す
- 資料化して残す
- コードコメントに残す
2.4 自分の理解度を確認する
第3章 パッケージ管理
3.1 手動によるパッケージ管理は大変
- バージョン管理のコスト
- 依存ライブラリーの取り扱い
- 環境の再現
3.2 パッケージマネージャー
3.3 npmの導入
3.4 dependenciesとdevDependencies
3.5 npxによるコマンドの実行
3.6 実践編:パッケージ管理
第4章 テストコードを用意する
4.1 変更前の挙動をテストコードで保証する
4.2 E2Eテスト
- Jest と Puppeteer による E2E テスト
- ブラウザーを起動して E2E テストを目視で確認する
- テストはモダンに書く
4.3 ビジュアルリグレッションテスト
- jest-image-snapshot
- threshold(しきい値)の調整
- reg-suit
4.4 スナップショットテスト(HTML)
- HTML ベースのスナップショットテストの位置付け
- E2E テストの範囲
4.5 テンプレートがサーバーサイドに依存するケースへの対処
- JavaScriptのRead/Writeに注目したテストを書く
4.6 実践編:テストコードを用意する
- E2Eテスト
- ビジュアルリグレッションテスト
- スナップショットテスト
- npm-scripts の登録
- テストコードの準備完了
第5章 ESLint/Prettier
5.1 コードの記法による潜在的なリスク
5.2 人の手によるチェックの限界
- 見落とす
- 人によって好みが出る
- 指摘する・されることの心理的な負担
- 解決策→機械にやらせよう!
5.3 ESLint
- ESLint の導入
- 公開されている ESLint 設定を流用する
- ESLintを少しずつ適用する
- 一度すべて無効にして1ルールずつ有効化する
- --fix オプションが機能するものから対応していく
- 対応できない箇所
5.4 Prettier
- Prettier の導入
- 設定のカスタマイズ
- ESLint と併用する
- 自動整形によるコードへの影響
5.5 実践編:ESLint/Prettier
- 一部ルールの無効化
- グローバル値への対処
- ESLint/Prettier の導入完了
第6章 TypeScript
6.1 TypeScript
6.2 型の恩恵
6.3 TypeScriptかECMAScript(Babel)か
6.4 完全な型定義はとても大変
- 最小のコストで最大の恩恵を得る
- anyと上手に付き合う
6.5 TypeScriptのセットアップ
- --init で生成される tsconfig.json
- その他の変更したほうがよいオプション
- 最終的な tsconfig.json のサンプル
6.6 ライブラリーの型定義
- 公開されている型定義を利用する
- 独自で型定義を用意する
- 基本的には any で推論されるが...?
6.7 グローバルの値の型定義
6.8 TypeScript ESLint
- ESLint と TSLint
- typescript-eslintの追加と設定
6.9 実践編:TypeScript
- テストコードを TypeScript 化
- TODOアプリ本体のコードをTypeScript化
- TypeScript ESLintの追加
- TypeScript 化の完了
第7章 モジュール分割
7.1 小さく切り出す
7.2 モジュール管理とモジュールバンドラ
- TypeScript とモジュール管理
7.3 webpackのインストールと設定
- watchモードでwebpackを起動する
7.4 ライブラリーをnpmパッケージへ移行する
7.5 コードを分割する
7.6 実践編:モジュール分割
- webpack の導入
- jQuery を npm パッケージ利用に置き換える
- Read 部を切り出す
- Write 部を切り出す
- モジュール分割の完了
第8章 Vue.js(セットアップ)
8.1 DOM が中心であることのデメリット
- 複雑化しやすい
- データと HTML の関連が不明瞭
8.2 宣言的テンプレートと状態管理へ
- Vue.js
8.3 Vue.js のセットアップ
- SFC(Single File Components)
- SFC のビルド設定
8.4 Vue.js と TypeScript を組み合わせる
- Vue.extend
- クラススタイルコンポーネント
8.5 Vue.js DevTools
8.6 Vue.js の基本知識
- コンポーネントの基本的な構成要素
8.7 実践編:Vue.js(セットアップ編)
- SFC のビルド設定
- 動作確認
- Vue.js のセットアップ完了
第9章 Vue.js(移行の予備知識)
9.1 移行時に発生しやすい問題
- イベントバインドのタイミング
- DOM 書き換えの競合
- 非同期の DOM 更新
- 空白文字による差異
9.2 目指すべき理想構成
- 責務の閉じたコンポーネントの集合体にする
- 単方向データフロー
- データの集約
第10章 Vue.js(移行編)
10.1 Read/Write/Event との対応
- Read
- Write
- Event
10.2 シンプルな Write 部から切り出す
- コンポーネントへの切り出し
- Vue.js とレガシーフロントエンドコードとの連携
10.3 Publish/Subscribeモデル(EventBus)
- EventBus は一時的な措置
10.4 Vue.observable
- 段階的に移行しつつデータを集約する
- Vue.observable を安全に使う
10.5 Vuex
- Vuex を使うかどうか
10.6 DOM をデータで表現する
- 入力フォーム
- 連続した類似要素
- 表示・非表示の切り替え
10.7 切り出したコンポーネントに親子関係を作る
10.8 実践編:Vue.js(移行編)
- テストコードについて
- Write 部の切り出し
- Vue.observable データストアの作成
- DOM をデータで表現する
- Vue.js 化に伴う問題に対処する
- Write 部の撤廃
- Read 部の Vue.js 化
- 単方向フローを構築して全体を整理する
- データストアをどうする?
- 最終的な状態
第11章 リリースまでを安全に
11.1 レビュワーの負担を下げる
- 改善作業のレビューはつらい
- レビューボリュームを小さくする
- 確認してほしい観点を明確にする
- 資料化を怠らない
- ペアプロ・モブプロ
11.2 改善するスコープを決める
11.3 トラブル発生時のダメージを軽減する
- ロールバックを想定する
- ピークタイムのリリースを避ける
- 小さく進められないときにも有効
第12章 改善できた、次はどうする?
12.1 時と共にレガシー化は進む
12.2 日々改善を続ける
12.3 機械的に改善可能な環境を整える
- テストコード作成の習慣化
- CI 環境を整える
- Dependabotによる依存ライブラリーの更新
12.4 改善作業は終わらない
というわけで...
技術書典６のときに、物理本が完売してしまって買えなかった方もいたのが心残りでした。 この本が一人でも多くのレガシーフロントエンドで悩む方の助けになれば嬉しく思います。
パワーアップした「レガシーフロントエンド安全改善ガイド」をよろしくお願いします🙏
