Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~

Last updated at 2024-05-20Posted at 2019-11-25

概要

Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。
しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。

本記事では、これからWEB開発者を目指す人を対象に、
・Nuxtを習得するには何が必要か？
・そのための勉強方法
を紹介します。

解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。

自己紹介

NuxtとFirebaseを用いたWEBアプリ開発を担当することになりました。
Python※はある程度触ってきたものの、WEB開発は全くの未経験。Progateや入門書を触って、簡単なWEBサイトを公開した経験がある程度でした。

(※趣味レベルの機械学習やWebスクレイピング。Aidemyさんの講座も受講しました)

失敗談「とりあえずNuxtアプリを作ってみたけど・・・・・・・?」

さて、Nuxtは公式ドキュメントの内容が充実しており、"分かりやすい"です。
しかも驚くべきことに日本語に翻訳されています。

例えばnpmの環境構築さえ済んでいれば、下記の簡単なコマンドで簡単にプロジェクト※を始めることができます。
(※厳密には違うのですが、初心者の方は「プロジェクトを作る=アプリを作る」と読みかえてください)

//任意のディレクトリで下記を実行すると、`yourproject`という名前のプロジェクトが作成されます
$ npx create-nuxt-app yourproject

//サーバーを立ち上げます。http://localhost:3000で確認できます
$ npm run dev

また、NuxtとFirebaseも簡単に組み合わせることができます。
フロントエンドにNuxt, バックエンドにFirebaseを利用すれば大抵の機能は実装することができます。
例えば私はQiita記事を参考にユーザー認証を実装したり、あとは簡単なチャット等を作りました。

ここまでで、カタチがあり動くものを何となく作れました。

しかし、**WEBエンジニアとして自分が成長していないことに気付きます。なぜなら、Nuxtの中身を理解できているわけではないから。「このままだとググってコピペすることしかできないし、WEBエンジニアとして自立できない」**と危機感を募らせました。

Nuxtに飛びつく前にまず基本をちゃんと押さえよう

「Nuxtは公式ドキュメントが充実していて分かりやすい」とよく言われていますが、正直当初はさっぱり分かりませんでした。
Nuxtのドキュメントはとても優良なドキュメントです。
しかし但書をつけると、「**(Vueの経験がある人には）**Nuxtは公式ドキュメントが充実していて分かりやすい」んですね。なぜなら、NuxtはVueを発展させて、その弱点を補ったものだからです。

なので、Nuxtに飛びつく前にまず基本をきちんと押さえましょう。

Nuxtを習得するために必要な技術(及び学習方法)

レベル感

レベル感としてはざっくり以下のように区分できると思います。
「Vue以前の知識が不足している人」(JavaScript, HTML, CSS等)
「Vue初心者」(シングルファイルコンポーネント、Props, 算出プロパティ等のVueの基礎知識)
「Vue中級者(Vuex, ライフサイクルメソッド等のVueの知識。及びFirebaseの利用方法)」

で、「Vue中級者」まで行くと冒頭で設定した目標に到達できると思います。

「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」

JavaScript(ES6)

ES6以降のJavaScriptはもはや別物と言っても過言ではないくらい、強力に進化しています。例えばconstによる宣言、アロー関数の使い方、forEachによるループ文等は抑えていますか?

ProgateのJavaScriptコースはES6にも対応していて良く出来ていますが、Progateだけだと物足りないです。
「MDN Web Docs」で知識を固めたら、ひとまず事足りるでしょう。

しかし、熱意がある方は是非初めての JavaScript 第 3 版 ―ES2015 以降の最新ウェブ開発も手にとって頂ければと思います。
全く「初めて」でも初心者向けでもなく、かなり骨太な書籍ですが、飛躍的にJSの理解を深めることができます。
邦訳も技術書の中では最高峰と言っても過言ではないくらい良く練られています。

JSON

例えばNuxtにおいては、i18nのような外部モジュールの設定を行ったり、APIからのレスポンスデータの受け取りを行う際に使います。
エンジニアにとってお馴染みのJSONですが、何となくで済ませてきた人も多いのではないでしょうか。この機会にしっかりと理解しましょう。
といっても、「MDN web docs」でJSONについての項目を読めば、簡単にキャッチアップできます。

JSON データの操作

HTML

初歩的に見えて、本当の意味で使いこなしている方は少ないです。Web アプリにおいて、適切な HTML タグの使用は SEO やアクセシビリティに大きく影響します。例えば、アプリ内で共通して使い回すヘッダーコンポーネントに対して、v-ifを用いてトップページの時のみに<h1>タグ、トップページ以外なら<div>タグを与える、というテクニックを使用していました。各タグをどのようなときに使うべきか、なぜ適切な HTML タグを使用するべきかについて、詳しくは 「MDN Web Docs」を読んで見てください。

ちなみに、MDNを開いてみて「難しい」とか「ストレスを感じる」ということであれば、ProgateのHTMLコースを挟むと良い橋渡しになるでしょう(ただし、Progateだけだと不十分です)

CSS

「マージンの衝突」や「プロパティの優先度」、「CSS設計」については大丈夫ですか？
Webアプリ・Webサイトにおいてもネイティブアプリ並みの快適なUXが求められている現在の環境において、「CSS が書きやすい」のは Nuxt を採用するメリットの一つです。
だからこそ、可読性と保守性を備えたCSSを書くことは重要です。
「マージンの衝突」、「プロパティの優先度」等の CSS の上級知識(及びそれらを回避するための実践的な書き方)、BEM や FLOCSS に代表される「CSS 設計」については、Web 制作者のための CSS 設計の教科書が最良の一冊です。
「MDN Web Docs」のCSSの章は辞書的に参照するのには便利ですが、体系的にCSSの実践的な知識を得るには不向きです。

ちなみに、ProgateのCSSコースの内容は「初心者が楽しくプログラミングを体験する」には良いと思うのですが、実践的な書き方からは程遠いと思います。

WEB開発の基本知識

バニラのVue.jsではなくNuxtを採用する主要な動機としては、サーバーサイドレンダリング（SSR）が実装しやすい、という点が挙げられます。従来のシングルページアプリケーション（SPA）の欠点に対するアンサーとしてSSRが提示されましたが、そもそもSPAやSSRとは何なのでしょか（ちなみに僕はさっぱり分かりませんでした）。

ググればなんとなくそれぞれの用語について分かった気にはなれるんですが、本当の意味で理解するためにはWeb技術についての最低限の知識が必要です。

また、VueやNuxtのようなコンポーネントベースの開発はコンポーネントのライフサイクルメソッドの理解が難所になりますが、Web技術についての知識があるとすんなりと入りやすいです。

と言っても、ITパスポートやら大学のコンピュータサイエンスの勉強をする必要はないので安心してください。
まずは「MDN Web Docs」の Web のしくみ等を参照して頂ければ十分かと思います。
また発展的な内容にはなりますが、興味がある方はWeb を支える技術がこの分野においては不朽の名著です。

Vue.js

「シングルファイルコンポーネント」「Props」「算出プロパティ」等、基本を抑えていますか？ごく簡単なもので良いので、フルスクラッチ※（後述）で一つ一つのファイルやコードの意味をきちんと理解しながらアプリを作ってみると理解が深まります。
お勧めはVue.js&Nuxt.js超入門です。
Vueについてこれ以上なく丁寧で分かりやすい解説です。まず通して読んでみて概要を把握してから、２周目から実際に手を動かしてコードを書いてみると効率的です。Nuxtについては十分な紙幅が割かれていませんが、Vueについて基本知識が身に付けば十分キャッチアップできます。本書を通すだけでも、Nuxtの公式ドキュメントはかなり読めるようになっているはずです。
唯一のネックはVuexについて解説がほとんど省略されていることです。しかし、VuexはおそらくNuxt習得において最も躓きやすい難所なので、入門書である本書では避けたのは賢明な判断かと思います。

(Vuexについては、次項で紹介しているように[Vue.js入門基礎から実践アプリケーション開発まで](Vue.js入門基礎から実践アプリケーション開発まで)がお勧めです。前項で触れたライフサイクルメソッドについても本書が分かりやすいです)

Vuex

Nuxtプロジェクトにおいて、Vuexによる状態管理は必須です。が、そもそも「状態」とは何を意味するか説明できますか？実はこの「状態」は日本語ではなく、「アプリケーションが保持するデータ」を指します。
Vuexの公式ドキュメントは良くできているのですが、Web開発未経験の方が読んでも意味を理解できないと思います。
そこでお勧めしたいのが[Vue.js入門基礎から実践アプリケーション開発まで](Vue.js入門基礎から実践アプリケーション開発まで)です。Vueについての書籍は増えてきていますが、問題なのはその殆どがVuexについての説明を省略していることです。私が出会った中で唯一、Vuexについて丁寧に説明していたのが本書です。

また、動画形式のものとしてはのUdemyの超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)がお勧めです。
どうしても難しい、と感じた場合は動画形式を試してみると切り抜けられる可能性があります（苦手なことを勉強する際は動画形式が最も良いと思います）。

firebase

フロントエンドにNuxtを採用する場合、バックエンドはFirebaseという組み合わせが最もポピュラーです。
また、「個人で何かサービスを作りたい」という場合も、Nuxt×Firebaseなら大抵の機能は実装できます。
例えば「SNSアカウントによるログイン機能」はUser Authentication, 「テキストの投稿機能」はFirestore、「画像データの投稿」はFirestore&Cloud Storageと、それぞれFirebaseの機能で簡単に実現できます。

以前までは実践Firestoreを勧めていたのですが、同じ作者から
Nuxt.jsとFirebaseを使って爆速で何か作る前に読む本というそのものずばりな新刊が発表されたので、こちらの方がベターかと思います。

Nuxt

Nuxtについては、Nuxtの公式ドキュメントを読むのが最も良いです(そのために必要なのが今まで紹介してきた項目だったわけです)。
あるいは、Hello!! Nuxt.js Hello!!Vue&Nuxtシリーズはマイナーですが、公式ドキュメントと併せて読むと理解しやすくなると思います。Kindle Unlimitedの対象なので、会員なら無料で読めます。

Nuxt.jsビギナーズガイドはNuxtを日本で流行らせたエンジニア直々の書籍ですが、出版されてからかなり年月が経過しているのであえて読む必要もないと思います。
あえてハンズオン形式のものが欲しいならUdemyがお勧めです。
英語になってしまいますが、UdemyのNuxt.js - Vue.js on Steroidsはお勧めできます。英語と言っても字幕付きですし、聞き取りやすくシンプルな英語を使っているので英語力はさして必要ありません。コードもあるので、難なく理解できると思います（一部の例外を除いて、基本的に日本語の資料より英語の資料の方が良質です）。

日本語が良い方はNuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発までなどが人気なようです。

終わりに

Nuxtは新しい技術なので、キャッチアップまでの道筋を見据えるのが難しいかと思います。
本記事がお役立ちになれば幸いです。

おまけ【上級者向け】

Nuxt × TypeScript

React 程ではありませんが、Nuxt においても TypeScript の導入は広がっています。
まずVueやNuxt自体に自信がついてからにはなりますが、TS も抑えておくと、エンジニアとしてよりスキルアップできます(単価も上がります)。

超TypeScript入門完全パック(2020)がまずはお勧めです。Udemyの有料講座ですが、大部分が無料公開されています(Vuexの章で紹介した超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)と著者による講座です)。

書籍としてはオライリーのプログラミング TypeScript ―スケールする JavaScript アプリケーション開発が非常に好評です。TypeScriptの基本を抑えていることが前提ですが、実践 TypeScript ~ BFF と Next.js&Nuxt.js の型定義~もNuxt×TSのtipsとして参考になります。

オンライン上で無料で公開されている仕事ですぐに使える TypeScriptも一読しておきたいところ。

Nuxt × Python

Nuxtプロジェクトに部分的にPythonを組み込むのもポピュラーな構成です。
例えばNuxtで快適なUIを実現しつつ、Pythonでコンテンツを自動生成する等です。
具体例としては、仮想通貨メディアのCoin PartnerはNuxtで構成されていますが、「機械学習による仮想通貨分析」というコンテンツはPythonを使用しています。ちなみにCoin Partnerは学生が開発・運用をして、2〜3年で６億円でEXITしたので、Nuxt導入の最大の成功例の一つです。

Nuxt.jsとPythonで作る！ぬるさくAIアプリ開発入門　データ分析からAIアプリ開発まで優しく解説！はNuxt×Pythonで実際に機械学習アプリを開発するという意欲的な書籍です。Nuxt自体の解説は控えめですが、Nuxtの基本をある程度抑えたらチャレンジしたら楽しいでしょう。
コード自体の解説というより、アプリを企画・実装するまでの全体的な流れを学ぶ資料として捉えると、適切な期待値を設定できると思います（低評価の内容をみると、まだ自走スキルが十分でない方が手を出してしまったように見えます）。