概要
Nuxt.jsは今最もイケてるゥ!最高にCooooooolなWEB開発フレームワークです。巷でNuxt.jsについての記事も増えていますね。
しかし、ネット上のNuxt.jsの記事では、Nuxt.jsを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxt.jsを触る人はVue.jsの経験があるという前提）なので当然と言えば当然なのですが。
本記事では、これからWEB開発者を目指す人を対象に、
・Nuxt.jsを習得するには何が必要か？
・そのための勉強方法
を紹介します。
自己紹介
Nuxt.jsとFirebaseを用いたWEBアプリ開発を担当することになりました。
Pythonはある程度触ってきたものの（機械学習やスクレイピング等）、WEB開発は全くの未経験。Progateや入門書を触って、簡単なWEBサイトを公開した経験がある程度でした。
失敗談「とりあえずNuxtアプリを作ってみたけど・・・・・・・?」
さて、Nuxt.jsは公式ドキュメントの内容が充実しており、"分かりやすい"です。
しかも驚くべきことに日本語に翻訳されています。
例えば、npxさえ事前にインストールされていれば下記の簡単なコマンドで簡単にプロジェクト(※)を始めることができます。
(※厳密には違うのですが、初心者の方は「プロジェクトを作る=アプリを作る」と読みかえてください)
Nuxt.js - ユニバーサル Vue.js アプリケーション/インストール
//任意のディレクトリで下記を実行すると、<project-name>という名前のプロジェクトが作成されます
$ npx create-nuxt-app <project-name>
//サーバーを立ち上げます。http://localhost:3000で確認できます
$ npm run dev
また、Nuxt.jsとFirebaseを組み合わせることも簡単です。
私は下記記事を参考にユーザー認証を実装しました。
『FirebaseとNuxt.jsを使ってユーザ認証関係を簡単に作ってみる+1ヶ月前の自分に教えたいリンク集
あとはTwitterでログインできる簡単なチャットなんかも作りましたね。
ここまでで、カタチがあり動くものを何となく作れました。
しかし、WEBエンジニアとして自分が殆ど成長していないことに気付きます。なぜなら、Nuxt.jsの中身を理解できているわけではないから。「このままだとググってコピペすることしかできないし、永遠にWEBエンジニアとして自立できない」と危機感を募らせました。
Nuxt.jsに飛びつく前にまず基本をちゃんと押さえよう
「Nuxt.jsは公式ドキュメントが充実していて分かりやすい」とよく言われていますが、正直当初はさっぱり分かりませんでした。
ええ、Nuxt.jsのドキュメントはとても優良なドキュメントです。
しかし但書をつけると、「(Vue.jsの経験がある人には）Nuxt.jsは公式ドキュメントが充実していて分かりやすい」んですね。なぜなら、Nuxt.jsはVue.jsを発展させて、その弱点を補ったものだからです。
なので、Nuxt.jsに飛びつく前にまず基本をきちんと押さえましょう。（自戒を込めて）
Nuxt.jsを習得するために必要な技術
さて、いよいよ本題です。WEB開発未経験者がNuxt.jsを習得するために必要な要素を列挙します。
Vue.js
「コンポーネントとは？」「テンプレートとは？」等、基本を抑えていますか？ ごく簡単なもので良いので、フルスクラッチ※（後述）で一つ一つのファイルやコードの意味をきちんと理解しながらアプリを作ってみると良いです。
JavaScript ES6
Progateレベルだと少し物足りないです。特にアロー関数は頻繁に使いますね。おすすめは「MDN web docs」を読むことです。
JSON
超大事です!エンジニアにとって当たり前の知識ですが、何となくで済ませてきた人も多いのではないでしょうか。この機会にしっかりと理解しましょう。おすすめは「MDN web docs」を読むことです。
HTML
やはりProgateレベルだと少し物足りないです。おすすめは「MDN web docs」を読むことです。
CSS
CSSはProgateで十分ですね。
WEB開発の基本知識
コードを書くのと直接は関係ないですが、きちんと理解しておくと学習が捗ります。おすすめは「MDN web docs」を(略）
「こんなにやってられないよ」と思う方。安心してください！
それぞれのおすすめの教材もきちんとご紹介します。
目標(=Nuxt.jsを扱えるようになる）と目標に向けて自分に必要なカリキュラムが明確に分かっていれば、短期間で効率的に学習することができます。具体的には合わせて2週間程度で、無理なくNuxt.jsを習得するための準備学習を完了できます。
おすすめの学習教材・方法
「Vue.jsは未経験だがES6は分かる」「正直HTMLも怪しい・・・」とレベル感に差があると思うので、三つのペルソナに分けました。ご自身のレベルに応じて参考になさってください。
「Vue.jsの経験がある、基本がわかる」人向け
公式ドキュメントや『Nuxt.jsビギナーズガイド Vue.jsベースのフレームワークによるシングルページアプリケーション』
がおすすめです。
「Vue.js未経験、Vueだけ分からない」人向け
『Vue.js&Nuxt.js超入門』
正直、時間がない方はこれ一冊でも良いかもしれません。
Nuxt.jsを習得するためのVue.jsやJavaScriptを網羅しています。
特に素晴らしいのですが、フルスクラッチで（=一枚のHTMLファイルから手作業で）Vue.jsのアプリを作っていくので、Vue.jsの構造やファイルの中身を一つ一つきちんと理解できます。
僕は本書がきっかけで急に理解が深まりました（掌田さんの本は片っ端から揃えようと思います）。
「Progateは終わったけど・・・」「正直WEB開発の基本も自信ない」「JSONって何？」人向け
「MDN web docs」を読みましょう！
「MDN web docs」はGoogleやMicroSoft等、世界のトップレベルの人たちが中心に作成しているサイトです。つまり情報の信頼性がこの上なく高いので、正確で丁寧な理解ができます。「でも難しいんでしょ？」と思われた方、そんなことはありません。むしろ、文章量が紙幅に制限されないので懇切丁寧に解説が記述されており、とても分かりやすいです。しかも完全無料。（ほぼ）日本語対応。あらゆる点で書籍や大学の情報系の講義より遥かに優れた教材です。
何とWEB入門やJavaScriptの第一歩などの体系的なカリキュラムまで備えています。
ただ、プログラミングの知識が全くのゼロの状態で読むと少し辛いと思うので、プログラミング初心者の方はまずProgateから始めるのが良いでしょう。
終わりに
さあ、これで貴方もNuxt.js公式ドキュメントが「分かりやすい」と感じられるようになります。
自分のレベルに合わせて、無理なく学習を進めてください。
良いエンジニアライフを〜
参考文献
Nuxt.js 公式ドキュメント
MDN web docs
『Nuxt.jsビギナーズガイド Vue.jsベースのフレームワークによるシングルページアプリケーション』
『Vue.js&Nuxt.js超入門』
