たいさブログ

taisa's engineer blog

JavaScript

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

投稿日:


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

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

どんな本か

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

「はじめてのフロントエンド開発」という本を書きました – massa142’s blog

共著者として参加していた書籍『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に 技術評論社 さまより発売となりました。 React、Angular、Vue.js、React Nativeそれぞれが、同じサーバの APIを参照し、同様の機能を持ったアプリケーションとして作成します。

  • どんな本か
  • こんな方におすすめ
  • 書いたきっかけ
  • パンダの由来
  • サポートリポジトリ

本書の内容について

書籍タイトルは『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』ですが、タイトルに出てくるワードの他にも『フロントエンドの最新動向』『環境構築』『ES2015』『TypeScript』『Firebase』についても書かれています。

表紙をパット見ただけでは内容が分からないところもあると思うので、本書がどのような内容かを簡単にまとめてみます。

アウトライン

  • Part1:JavaScriptフロントエンドフレームワーク最新動向
    • 第1章:JavaScriptフロントフレームワークの興隆
    • 第2章:SPA、PWA – フロントエンド実装技術の最新トピック
  • Part2:フロントエンドJavaScript開発のための基礎知識と環境構築
    • 第3章:フロントエンドJavaScript開発のための環境構築
    • 第4章:フロントエンドJavaScript開発のための基礎知識
    • 第5章:フロントエンドJavaScript開発のためのサーバ構築
  • Part3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js
    • 第6章:React入門 & 徹底活用
    • 第7章:Angular入門 & 徹底活用
    • 第8章:Vue.js入門 & 徹底活用
  • Part4:Slackライクなサンプルで学ぶ React Native
    • 第9章:React Native 入門 & 徹底活用

大きな流れ

まずPart1で「JavaScriptフロントエンドの最新動向」を解説し、Part2で「環境構築」「ES2015」「TypeScript」「FirebaseによるAPIサーバの構築」などフロントエンド開発の事前準備をします。

Part3、4では「React」「Angular」「Vue.js」「React Native」それぞれの章の最初の入門で基礎知識を解説した後、同一のAPIを利用しSlackライクなサンプルアプリを作ります。それぞれが同一APIを使って同じアプリケーションをつくることでそれぞれの特徴を掴めるような構成になっています。

各Partについて

Part 1:JavaScriptフロントエンドフレームワーク最新動向

第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フレームワークの動向を掴みつつ、フロントエンドに関する技術的な面を把握することができると思います。

Part 2:フロントエンドJavaScript開発のための基礎知識と環境構築

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

第4章では「ES2015」「TypeScript」について解説しています。第5章では「Firebase」を使って以降の章で利用するAPIサーバの立ち上げについて解説しています。

Part 3:Slackライクなサンプルで比べて学ぶ React/Angular/Vue.js、Part 4:Slackライクなサンプルで学ぶ React Native

第6、7、8、9章では、それぞれの章において各フレームワーク/ライブラリへの入門をした後サンプルアプリを作るという流れになります。

本書は(特にPart 3とPart 4)は、ただ読み進めるよりも実際にコードを書いて動かしてみてほしいというのが思いとしてあります。

中には「はじめての」というタイトルの割には敷居が高いと感じる人もいるかもしれませんが、とにかく書いて動かしてみて比較してみてほしいです。

誤植情報

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

okachijs/jsframeworkbook

Contribute to jsframeworkbook development by creating an account on GitHub.

おわりに

自分は去年のはじめにJavaScriptの最新動向のキャッチアップをしてプロダクトに適用しようと決めて活動していました。それでまずはじめに「ES5」「ES2015」「TypeScript」「webpack」を触りつつ、どのフレームワーク/ライブラリを使うかを選定することからはじめました。

選定ではまず対象を「React」「Angular」「Vue.js」に絞りました。他フレームワークについては本書にも少しでてきますがOkachi.jsという勉強会で比較発表会をした結果や現状のトレンドを考慮し対象から外しました。

対象を絞った上で、チームメンバーで分担して「React」「Angular」「Vue.js」の担当者を決め、各自が調べた結果の発表会をした上で最終的に使うフレームワークを検討し決定しました。

最終的には、メンバーのスキルセット、プロダクトとの相性、スケジュール、導入のラーニングコスト、知り合いに知見のある人がいるか、など総合的に判断しVue.jsを採用しました。結果的にはVue.jsを採用してよかったと思いますが、これらの条件が違えば他のフレームワーク/ライブラリを採用していたかもしれません。

このように振り返ってみると、去年行ったキャッチアップ活動の多くは本書に詰め込まれてるように思います。なのでこれからやろうという方は是非本書を参考にしてみてください。また参考までに、去年「slideship Tech Dive」という勉強会でLTした時の投稿とスライドを貼っておきますので合わせて見てみてください。

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集」でLTしてきた。タイムテーブルは、メインセッションがVue、ReactVR、React SPAになっていてその後LT4本で親睦会という構成。自分は「フロントエンド速習コース」というタイトルでLTをさせてもらった。


-JavaScript
-, , , , , , , ,

執筆者:

関連記事

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1. …

ECMAScript 6を触ってみる – モダンになった文法

WEB+DB PRESS Vol.87は、@t_wadaさんの言うとおりES6を速習するのにとても良い書籍だと思う。個人的には「JavaScript: The Good Parts ―「良いパーツ」に …

ECMAScript 6を触ってみる – 標準化されたモジュール管理システム

前回に引き続きJSの速習コース実践ラスト。最後は「WEB+DB PRESS Vol.87 第1特集 第6章-標準化されたモジュール管理システム-」を速習する。 これまでのモジュール管理 JavaScr …

ECMAScript 6を触ってみる – 非同期処理 PromiseとGeneratorによるフロー制御

前回に引き続きJSの速習コースを実践。今回は「WEB+DB PRESS Vol.87 第1特集 第5章-簡潔で柔軟な非同期処理-」を速習する。 PromiseとGeneratorによるフロー制御 これ …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …