フロントエンド開発の経験がなかったのですが、4ヶ月ほど前に始めた副業先で急にVue.js（Nuxt.js）でフロントエンド開発することになりました。
「急いでVue.jsを学ばないと！フロントエンド開発はじめてだけど何から学べば！？」
と色んな情報や学習ツールをあさりつつ四苦八苦したので、後世のフロントエンド（Vue.js）開発入門エンジニアに向けて参考になった情報をまとめておきます。
これからVue.js（Nuxt.js）で開発をしようとしている方の参考になれば幸いです。
Vue.js（Nuxt.js）の学習内容と技術書・記事
Vue.jsを業務で扱えるようになるために学習したい内容には、ざっと以下があります。
Vue.jsを業務で扱えるようになるために学習したい内容
- JavaScriptの基本（Vue.jsの理解を進めやすくするために必要）
- JavaScriptの開発方法（JavaScript開発の手順とノウハウ）
- Vue.jsの基本（業務でVue.jsで開発する上で最低限必要）
- Nuxt.jsの基本（業務でVue.jsで開発する上で最低限必要）
Vue.jsでのフロントエンド開発を業務で始めて、困り果てないために最低限必要だった知識はこんなものかなと。
それでは、これらを学ぶ上で効果的だった技術書・記事をまとめていきます。
Vue.jsを学ぶ上で効果的だった技術書・記事まとめ
JavaScriptの基本（Vue.jsの理解を進めやすくするために必要）
まずは、JavaScriptの基本をおさえることが大事ですね。
Vue.jsの文法を学ぶ際にも、JavaScriptの基礎は理解できている前提で進んでいる本や記事が多いので、まずはJavaScriptを学んでおくといいです。
JavaScriptの周辺知識をざっくり
JavaScriptでの開発方法、基本的な書き方と、JavaScript開発で最低限知っておくべき知識がまとまっている良書。
JavaScriptをちゃんと学ぼうと思って渋谷の一番大きな本屋で立ち読みしまくった結果、一番良さそうなのがこの本でした。
全部しっかり読むと数日かかってしまうので、忙しい方はいったんパラパラと流し読みしておいて、業務で実装する範囲に関してしっかり読み込むという使い方がよいと思います。
Awesome JavaScript : 素晴らしい JavaScript ライブラリ・リソースの数々 - Qiita
JavaScript関連の有益なリンクがまとまったGithubページの転記記事。
JavaScriptで開発する際に必要になる技術知識領域をざっくり知るためにさーっと目を通すとよい。
JavaScriptの歴史をざっくり
JavaScriptがどのような経緯で誕生して変化してきたのかをざっくり知ることができる記事。
歴史を知ることで今の技術の理解が深まるし、さくっと読めるので読んでおきたい。
JavaScriptの文法・コーディング規約
JavaScriptとは · JavaScript Primer #jsprimer
JavaScriptの基礎の基礎を学べる良サイト。
基本的なコーディング規約や文法がさくっと学べるので読んでおくとよい。
ES2015
ES2015での書き方をざっくり学ぶことができる記事。
TypeScript
TypeScriptをWeb開発で利用する時のベストプラクティスがまとまっている記事。
TypeScriptが利用されている開発環境で開発するなら読んでおきたい。
TypeScriptの型についてまとめられている良記事。TypeScriptが採用されている開発環境で働く場合は目を通しておきたい。
HTML・CSS
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTMLとCSSのコーディング規約について参考になる記事。
目を通しておくだけでも、HTML・CSSを書く時に意識が向くので読んでおきたい。
非同期処理（Promise・await・async）
async/await 入門（JavaScript） - Qiita
非同期処理のasyncとawaitの概要と書き方が紹介されている記事。
非同期処理はどんなWebサービスでも必要になるので、学んでおくと良い。
Primiseの仕組みが詳細に解説されている良記事。
非同期処理に関して何となく分かるけど、仕組みも理解したいという時に読むとよいですね。
ブラウザの基礎知識
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
ブラウザの内部動作を図も見ながら視覚的に学べる良記事。新人時代に社内のフロントエンドエンジニアに聞いて教えてもらった記憶がある。
サーバーから受け取ったデータを元にページが表示されるまでブラウザがどんな仕組みで動いているのかを学ぶことで、フロントエンド開発周りのデバッグもしやすくなる。
フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | LeapIn
ブラウザのページ描画までをざっくり学べる記事。上の記事よりも先にこっちの記事を読んだ方がざっくり理解できてよいかもしれない。
npm（パッケージマネージャ）とpackage.json
【初心者向け】NPMとpackage.jsonを概念的に理解する - Qiita
外部のライブラリを利用する時になんとなく使っているnpmとpackage.jsonの役割と中身と使い方を学ぶことができる良記事。
CDN
JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話
CDN（Contents Delivery Network）の概念と使い所の理解ができる。
JavaScriptの開発方法（JavaScript開発の手順とノウハウ）
開発ツール
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
フロントエンド開発で使うことになるツールがまとめられている良い記事。
この用途でこのツールを使うのかと参考になる。
デバッグ
標準ビルトインオブジェクト - JavaScript | MDN
「Chromでは動くのに、IEでは動かない！IEでだけデザイン崩れてる！」となった場合にまず疑うのはjsのメソッドがIE対応されていないこと。
JavaScriptのメソッドを使う時は、MDNで各種ブラウザで利用可能かどうかを確かめましょう。
フロントエンドエンジニアになってから11ヶ月間で覚えたちょっと捗るChromeの使い方 - Qiita
Chromを開発時に利用する上で開発者ツールの各メニューの使い方、便利なショートカットが学べる良記事。
【2019年4月版】JavaScriptのconsoleがすごいことになってた。 - Qiita
「console.log();」だけじゃないconsoleでできることが紹介されている記事。
ずっとconsole.logだけでデバッグしていたので眼からウロコでした。
IDE設定
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
フロントエンド開発でVSCodeを使うならやっておきたい設定がまとまっています。
初期に設定しておくことで開発生産性を上げられる。よさそうなのは取り入れる。
フォーマッタ
JavaScriptでの静的検証ツールESLintの使い方がまとまっている。
フォーマッタを入れていると他人のコードを読みやすくなるし、推奨されている書き方を自動できに学ぶことができるので、入れておきたい。
パフォーマンス・速度改善
How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita
Webサイトのパフォーマンス改善をする上で知っておきたい知識がまとまった記事。
サイトの高速化について、その具体的な方法が複数紹介されている。
仕様調整
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
フロントエンド開発をする上で仕様の考慮漏れが発生しやすいポイントがまとめられた良記事。
忙しいデザイナーとの協業で頻発する仕様の漏れを防ぐためにも読んでおくと良い。
Vue.jsの基本（業務でVue.jsで開発する上で最低限必要）
Vue.jsの基本をざっくり
Vue.jsの文法について、それぞれ詳細に仕組みが説明された良書。
Vue.jsの本は何冊か出版されていますが、個人的にはこの本が仕組みから理解できて実践でしっかり通用する学びが得られる最良の本だと思います。
Vue.jsの業務開発を始める1週間前に4日くらいかけて読みましたが、この本のおかげで相当Vue.jsの理解が進みました。
何はともあれ公式ドキュメント。
Vue.jsについて全く知識がない状態だと厳しいですが、ある程度Vue.jsの知識がついてきたら公式ドキュメントを読むのが一番仕様理解の助けになります。
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsの文法に関して網羅的にまとまっている良記事。
文法の背景や挙動の詳細などはまとまっていないので、ざっくりと文法を知るかある程度Vue.jsの文法を学んだ後にさらっと復習するために読むとよい。
Vue.jsの文法・コーディング規約
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
Vue.jsを書く上で気を付けたいことがまとまっているので読んでおくと良い。
【保存版】Webフロントエンド基礎力（初心者向け） - Qiita
業務でVue.jsでのフロントエンド開発をする場合は、必ずHTMLとCSSも書くことになります。
HTMLとCSSについてタグの種類、どのタグがどんな挙動をするのかをざっくり学ぶことができる良記事です。
Vue.jsでTypeScript
vue.js + typescript = vue.ts ことはじめ - Qiita
TypeScriptでVue.jsを書く上での基礎知識がまとまった良記事。
TypeScriptでVue.jsを書いている開発環境で働く場合もそうでない場合も、参考として読んでおきたい。
ライブラリ
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
Vue.jsでよく使われるライブラリがまとまっている。
この用途ではこのライブラリが使われるんだなとさらっと知っておくとよい。
Vue.js + Vuexでデータが循環する全体像を図解してみた - Qiita
Vuexのデータフローについて図付きでわかりやすく説明された良記事。
Vuexをはじめて使う場合にデータの流れの理解で苦労したので、この記事を読んでおけばよかったですね。
Nuxt.jsの基本（業務でVue.jsで開発する上で最低限必要）
Nuxt.jsとPythonで簡単なWebアプリケーションを開発してGKEにデプロイするところまでの実装例を学ぶことができる本。
実際に手を動かすことでこんなふうに実装するのかと理解は進みます。
文法についての説明がほとんどなく、この本だけでNuxt.jsの文法やなぜこう書くのか？を理解することはできないので、この本でざっくり実装イメージを掴んでから公式ドキュメントを読むなり、実装したい内容に関してGithubのissueや技術記事を読み進めていくとよいです。
Nuxt.jsの公式ドキュメント。困ったら読もう。
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
Nuxt.js（とFirebase）でざっくり何が作れるのかを知れる記事。
これからNuxt.js×Firebaseの開発環境で働く場合は、さっと読んでおくとよい。
Vue.js（Nuxt.js）のTwitterアカウント
ぼく自身も全然追い切れてませんが、Vue.js関連のTwitterアカウントも紹介しておきます。
Vue.jsをつくったひと。
Vue.jsの開発状況やリリースされた機能の説明記事が流れてくる。
Nuxt.jsについての開発状況やリリースされた機能の説明記事が流れてくる。
日本のVue.jsのカンファレンス情報とか流れてくる。
まとめ
以上、初めてのVue.js（Nuxt.js）開発業務を始める前に学んでよかった技術書・記事まとめでした。
はじめてのVue.jsでの業務開発でしたが、この辺の本・記事を読みつつ、分からないことは都度Githubのissueや関連技術記事を読むことで、「実装方法分からなくて実装が終わらない...ﾀｽｹﾃ...」となる事態は避けることができました。
もちろん自分自身、まだ全然Vue.jsの理解は乏しすぎるので、これからも日々精進していきます。
では。
