f:id:mugi1:20191105233030j:plain:w400

2019年4月に開催された技術書典６で頒布した「レガシーフロントエンド安全改善ガイド」ですが、このたびインプレスR&D社さまより商業版を刊行することになりました。

自分が商業版の技術書を書く日が来るとは思わなかったのでビクビクしています。

表紙イラストは同人版と同様、鍋料理さんに描いていただきました。「安全な感じで！」という相談から、カワイイ工事現場が仕上がりました、とても気に入ってます。工事現場本と呼んでください。

タイトルに「迷わない！困らない！」という強気ワードが付いててちょっぴり恥ずかしいですが、迷わず困らない内容になってる・・はずです！

同人版との違い / 加筆・修正した点

紙の本で比較すると、ページ数が110ページ程度→200ページ超と大幅に加筆しています。同人版のときは印刷費用なども怖くてあえて書かなかった部分がたくさんあったのですが、それらもすべて盛り込んだ結果、大変なことになりました。

同人版では、改善後のコードはBabelを利用したESNextのコードとしており、TypeScriptについては「かなり流行ってるし、こちらもオススメだよ」程度に触れていました。

しかし、「これからレガシーフロントエンドを改善するのであれば、選択肢としてTypeScriptを無視するのはありえないだろう」と考え、すべての改善後コードをTypeScriptを前提とした形に変更しています。

結果的には、サンプルコードを含めたすべてのコードを書き直すことになって死ぬかと思いました。

全コードがTypeScript前提となったので、TypeScript導入に関するセクションも追加しています。主にツラい環境への段階的な導入にフォーカスを置いています。

といった、既存コードベースに導入する際に困る点を詳細に書いたつもりです。

同人版は、一冊を通してサンプルコードをひたすら書き換えていくような内容になっていました。これはこれで写経とかもできて楽しかったのですが、読む本としてはツラいものがあるだろうな〜と思っていました。

そこで商業版では、各章ごとに基本的な解説を用意した上で、章末尾に実践編として同人版のようなサンプルコードの書き換え例を紹介する形としています。

情報だけざっと読みたいんじゃ〜〜、という方は各章の前半部を見てもらえればOKですし、さらに深く理解したい場合には、1章ずつ実践編をこなしていくことで、同人版と同様に手を動かして書き換えの流れを追うことも可能になっています。

といった点をがっつり書いています。 TypeScriptと組み合わせた場合のtypescript-eslintの導入も紹介しています。

本書後半では、jQueryなどで書かれたレガシーコードからの書き換え先として、主にVue.jsを取り上げて紹介しています。

同人版ではひたすらサンプルコードを書き換えつつ紹介していましたが、レガシーコードとは根本的な考え方が異なり困惑する部分も多いかなと思ったため、簡単なモーダル表示なども例にあげつつ、同人版よりかなり掘り下げて書いています。

他にもさまざまな加筆・修正が入っています。

（足しすぎてもはや自分でもよくわからない）

どんな方にオススメか

次のような方が想定読者です（本書内に書いてある内容と同一です）

JavaScriptを利用したフロントエンド開発における基礎的な部分の説明は省略しています。DOM などのピンと来ない場合には少し難しいかもしれません。

技術書典６のときに、物理本が完売してしまって買えなかった方もいたのが心残りでした。この本が一人でも多くのレガシーフロントエンドで悩む方の助けになれば嬉しく思います。

パワーアップした「レガシーフロントエンド安全改善ガイド」をよろしくお願いします🙏