「はじめてのフロントエンド開発」という共著本を出版しました

『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 Amazonより

自分はこの中の第3章の環境構築を担当しています。お陰様で現在まで売れ行きは好調ですが、一方で誤植もいくつか見つかっていますので誤植情報についてもこの投稿でお知らせします。また、表紙をパッと見ただけでは分からない本書の内容についてや去年最新JavaScriptフロントエンドをキャッチアップした経緯などを書いていきます。

「どんな本か」については共著者である新井正貴の投稿にまとめられているので確認してみてください。

書籍タイトルは『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』ですが、タイトルに出てくるワードの他にも『フロントエンドの最新動向』『環境構築』『ES2015』『TypeScript』『Firebase』についても書かれています。表紙をパット見ただけでは内容が分からないところもあると思うので、本書がどのような内容かを簡単にまとめてみます。

まずPart1で「JavaScriptフロントエンドの最新動向」を解説し、Part2で「環境構築」「ES2015」「TypeScript」「FirebaseによるAPIサーバの構築」などフロントエンド開発の事前準備をします。Part3、4では「React」「Angular」「Vue.js」「React Native」それぞれの章の最初の入門で基礎知識を解説した後、同一のAPIを利用しSlackライクなサンプルアプリを作ります。それぞれが同一APIを使って同じアプリケーションをつくることでそれぞれの特徴を掴めるような構成になっています。

第1章では「React」「Angular」「Vue.js」「React Native」に関する解説や比較をしています。また本書で扱うフレームワーク/ライブラリ以外（Polymer、Ember.js、Riot.js、Vanilla.js、Native Script、Weex、A-Frame、React VR）についてもそれぞれジャンル分けしながら取り上げて解説しています。第2章では「SPA」「PWA」に関連する技術的な内容（クライアントサイドルーティング、CSS in JS、コンポーネント指向、SSRとプリレンダリング、バーチャルDOM、MVCとMVPとMVVM、Flux、PWA、Electron など）を取り上げて解説しています。Part1を読むことで最新のJavaScriptフレームワークの動向を掴みつつ、フロントエンドに関する技術的な面を把握することができると思います。

第3章では「node.jsのインストール」から「npm」「package.json」「webpack」「IDE（VS Code）」まで、開発に必要な環境構築について取り上げて解説しています。既に環境がある人にとっては飛ばしても良い内容ですが、一方で環境構築周りで躓く人も一定数いると思うので、その場合はこの章を進めていけば開発環境を構築することができます。第4章では「ES2015」「TypeScript」について解説しています。第5章では「Firebase」を使って以降の章で利用するAPIサーバの立ち上げについて解説しています。

第6、7、8、9章では、それぞれの章において各フレームワーク/ライブラリへの入門をした後サンプルアプリを作るという流れになります。本書は（特にPart 3とPart 4）は、ただ読み進めるよりも実際にコードを書いて動かしてみてほしいというのが思いとしてあります。中には「はじめての」というタイトルの割には敷居が高いと感じる人もいるかもしれませんが、とにかく書いて動かしてみて比較してみてほしいです。

誤植情報については以下のページにまとめていて、随時更新していますので何かあったらTweetしたりissuesにあげたりしてもらえると助かります。

自分は去年のはじめにJavaScriptの最新動向のキャッチアップをしてプロダクトに適用しようと決めて活動していました。それでまずはじめに「ES5」「ES2015」「TypeScript」「webpack」を触りつつ、どのフレームワーク/ライブラリを使うかを選定することからはじめました。選定ではまず対象を「React」「Angular」「Vue.js」に絞りました。他フレームワークについては本書にも少しでてきますがOkachi.jsという勉強会で比較発表会をした結果や現状のトレンドを考慮し対象から外しました。対象を絞った上で、チームメンバーで分担して「React」「Angular」「Vue.js」の担当者を決め、各自が調べた結果の発表会をした上で最終的に使うフレームワークを検討し決定しました。最終的には、メンバーのスキルセット、プロダクトとの相性、スケジュール、導入のラーニングコスト、知り合いに知見のある人がいるか、など総合的に判断しVue.jsを採用しました。結果的にはVue.jsを採用してよかったと思いますが、これらの条件が違えば他のフレームワーク/ライブラリを採用していたかもしれません。このように振り返ってみると、去年行ったキャッチアップ活動の多くは本書に詰め込まれてるように思います。なのでこれからやろうという方は是非本書を参考にしてみてください。また参考までに、去年「slideship Tech Dive」という勉強会でLTした時の投稿とスライドを貼っておきますので合わせて見てみてください。