フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた

先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました.

Vue.js入門 基礎から実践アプリケーション開発まで

正に欲しかった類の本で大変助かりました、ホントありがとうございます！

結論から言うと、

Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある）

っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです.

このエントリーでは、

• 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想
• 私がフロントエンド開発するまでにやってきたJavaScriptで参考にした本とかサイトの紹介

をサクッと紹介します.

TL;DR

• 初学者もプロのエンジニアも、Vue.js使ってる人は「Vue.js入門 基礎から実践アプリケーション開発まで」絶対的にオススメ、一冊手元に置いておけ
• JavaScriptの事をちゃんと知りつつ、アプリ作って学びましょう（自分にも言い聞かせている）
• バックエンドの人も、データサイエンスの人もちょろっとでもフロントエンド出来ておくと後々結構役に立つぞ！（経験則）

おしながき

私のVue.js/JavaScript歴とフロントエンド力

ザックリ言うと、

• フロントエンド専業ではないエンジニアです.エンジニアとしては何でもやりますが、バックエンドおよびデータサイエンス寄りのエンジニアです、Pythonが一番得意*1
• Vue.jsなら仕事レベルのコードは書ける、というか書いてます*2
• JavaScriptは色々と調べながら書いてる、少なくとも得意のPythonほど使いこなせていない
• Vue.js以外だと、React（プロトタイピング的に紙芝居作った）、Angula（二年前に古い方をやった）の経験あり、どっちも自信持って使えるとは言えない
• 前述の通り、PyCon JP 2018の野球の話にて、Nuxt.js + Django REST Frameworkでアプリを作って発表・デモしました

「Vue.js入門 基礎から実践アプリケーション開発まで」の感想

感想をザックリ書くと

Vue.jsを初歩から実践まで徹底的に解説。使いやすくかつ，プロダクションでも活躍するVue.jsをVue.jsコントリビューターの著者らが解説する一番わかりやすい入門書です。

「 Vue.js入門 基礎から実践アプリケーション開発まで」の説明文より

フロントエンド開発をVue.jsで始める人から、既に仕事や趣味で開発してる人まで幅広く網羅的に知見を得られる・学べる良著

だなと思いました.

実際読み進めると、仕事やPyCon JPの発表の時にハマった・わからなかったポイントが多々あり、本音言うとあと半年早く出てたら...!と思わせる内容でした.

フロントエンド専業じゃない自分が読んでもわかりやすいかつ、実際作るとハマりそうな箇所、

• コンポーネントの仕組みがようわからん（mixins使ったほうがいいの？それともcomponent???）*3
• Vue Routerがイマイチよくわかんない
• そもそもインスタンスの発生・消滅タイミングとか、ふるまいの違いなど、リアクティブプログラミングする上で色々知りたい

といった、初手で迷うところから慣れはじめた時に疑問に思うことまでちゃんと書かれている（≒初歩から実践まで網羅している）あたりが強いと思いました.

今年読んだ技術書の中でもTop 3に入るくらい気に入りました.

目次と概要

章ごとに何が書いてるかという簡単な解説を.

個人的には1章がかなり気に入っています&3章以降を辞書的に使うイメージで読んでいます.

1. プログレッシブフレームワークVue.js

前半はWebの誕生からAjax, HTML5, Node.jsにES2015を経てVue.jsに至るまでの歴史.

読み物として面白いです&フロントエンド開発が今に至るまでがつかめるのでじっくり読んだほうが良いポイントです.*4

後半はVue.jsとはなんぞや？を基本的な所から触れています.

2. Vue.jsの基本

Vue.jsの使い方.

最低限Vue.jsでプログラミングするのに必要なことが解説されています.

3. コンポーネントの基礎

Vue.jsのミソであるコンポーネントについて.

4. Vue Routerを活用したアプリケーション開発

SPA（シングルページアプリケーション）への入り口である、Vue Routerについて.

5. Vue.jsの高度な機能

トランジション、スロット、ミックスインといった、実践レベルでは必須の機能について.

6. 単一ファイルコンポーネントによる開発

Vue CLIからはじまる、単一ファイルコンポーネントについて.

これも絶対知らないといけないやつ.

7. Vuexによるデータフローの設計・状態管理

Vuexによるデータフロー.

個人的にはまだ理解してない・使ってないので覚えたい.

8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ

Vue CLIでの開発環境構築やビルド、テストなどなど.

そこそこの規模のアプリケーションで必須になるやつ.

9. 中規模・大規模向けのアプリケーション開発② 設計

そこそこの規模のアプリケーションで必要な設計ノウハウ・思想など.

10. 中規模・大規模向けのアプリケーション開発③ 実装

実装・テストの実践、特に中上級者向けのノウハウ.

Appendix

JQueryからの移行や開発ツール、TypeScriptにNuxt.jsなどなど.

これからフロントエンド開発・JavaScriptをやる方へ

老若男女問わず、エンジニアしていたり、プログラミングしていたりすると、

• フロントエンドはじめたほうが良いのでは？
• JavaScriptってどう学べば

と思うことがあると思います.

僭越ながら私がどうやって来たか&オススメ書籍を簡単にまとめました、ご参考までにどうぞ.

私がJavaScript関係でやってきたこと（図）

全体像を絵にするとこんな感じです.

今年に入ってからVue.jsやReactをはじめたのですが、本業がバックエンドだったり（野球）データサイエンティストなので、JavaScriptへの再入門が必要だ！

って感じになり、

• ES2015（今どきのJavaScript）を学び直す
• 網羅的にフロントエンド開発を知る
• メインのVue.jsを知る

というスタイルでやりはじめました.

オススメのサイト・本

私が参考にしたものをザクッと.

イマドキのJavaScriptの書き方2018（Qiita）

昨年のアドベントカレンダーで大きくバズった記事でご存知の方も多いかなと.

この記事の内容はホントよく出来ている&ちゃんとまとまっていて参考になりました.*5

qiita.com

JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで

ES2015を網羅的かつ、お手本がある状態で知るならここかなと.

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

職場に一冊常備していて、JavaScriptのコードがなんかイケてないorいい書き方を探す時に活用しています.

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

初学者・初心者で迷ったらこの本です！それぐらいオススメ.

Slack風のチャットアプリを、React, Angular,Vue.jsで作ってみるというお題で各フレームワークを比較するというわかりやすいかつ、面白いコンセプトです.

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

ネイティブアプリ屋さん向けに、React Nativeも載ってるのはすごく面白いです.

【我思う】サーバーサイド・データサイエンスの人もフロントエンドがちょろっと出来ておくと良いかも（異論は認める）

これは我思う！という意見なのですが、

• さっさとプログラミング・エンジニアリングで仕事したいならデータサイエンティストよりフロントエンドやぞ！*6
• フロントエンドは動くものでユーザーさんからのフィードバックを得られるのでやってて気持ちいい（学びもたくさんある）*7
• Webの世界はバックエンドだけできていればOKって感じじゃなくなってる、フロントorデータサイエンスもある程度必要
• 言うてもデータサイエンティストは狭き門、未経験でパッとできるお仕事ではない
• データサイエンスの人も最後はプレゼンテーションという意味で、見せるもの（フロントエンド）は必要、やっておいて損はないはず！*8

イマドキのエンジニアは求められるモノが沢山あって大変な気がしますが、それだけやりがいある・結果出ると面白い仕事なので、まずはフロントエンドあたりからはじめると良いのではないでしょうか？

最後、若干ポエムで締めましたが感想としては以上です.

*1:ちなみに経験値低いのがベアメタルから扱うインフラ、やってないのはネイティブアプリ開発（iOS/Android）

*2:ちなみに、現職（ネクストベース）の主力プロダクト「BACS」はVue.js製のSPAです

*3:Vue.jsをはじめて一番最初にハマった

*4:バックエンドや機械学習と違い、フロントエンドは古いWebも知らないと開発できない印象があります、起源とかね

*5:同じ日にPython本のエントリーを出して、ホットエントリーのランキングで負けてくやCと思ったのはここだけの話です（）

*6:もくもく会（rettypy）での雑談でも、「データサイエンスよりフロントエンドできた方が手っ取り早く結果出るよ」みたいなことは真面目半分冗談半分に言ってます

*7:これは個人差あると思いますが、自分自身が目の前で動くモノに惹かれるタイプなので、フロントエンド結構好きになりました、小学生のころに初めてプログラミングをしたときの感動を思い出したと言うか

*8:見せるものが大切だから、PyCon JPでフロントエンドをやりました、TableauやRedash使うのもいいけど、「仕組みをしる」意味での「車輪の再実装」はやっておいて損はないはず