Nuxt.jsを使ってVueアプリケーションの雛形を作る

この記事で紹介すること

Nuxt.jsの開発環境構築から、SCSSでスタイル指定できるようになるまでの手順。
この手順でVueアプリケーションがすぐに作り始められるようになるます。

Nuxt.jsでアプリ開発

自身の研鑽さんのために、とにかくアプリをたくさん作ろう！ということで、Nuxt.jsを使った自作アプリを作ることにしました。

フロントエンド界隈はVue/React/Angularの三国時代となっています。
その中にあって最後発のVue.jsが頭ひとつ飛び出している感じでしょうか。

さて、Nuxt.jsはVue.jsを利用したアプリケーション構築のためのフレームワークです。SSR(サーバサイドレンダリング)やPWA(プログレッシブWebアプリケーション)などのナウい技術がとても簡単に利用できます。

なにはともあれ、まずはNuxtプロジェクトを作成する必要がありますが、このあたりはフレームワーク問わずよく整備されており最初の一歩の敷居がとっても低くなっています。もちろんNuxtも例にもれずコマンドひとつでインストールが始まり、いくつか質問に答えるだけで開発環境の雛形が作成されます。
なお、今回インストールされたバージョンはNuxt v2.10.2でした。

前提環境

前提として、Node.jsがインストールされている必要があるのでご注意ください。実行している環境はMacです。
(Linuxでもそこまでの違いはないかもしれません。WindowsでもWSLとか使えばできるんじゃないかな…)

Nuxt.jsインストール

Nuxt.jsのボイラープレート（すぐに開発開始できるような雛形）を作成します。

下記のコマンド実行します。

$ yarn create nuxt-app <project-name>

<project-name>には開発するアプリの名前を入力します。 今回はyarnを利用しますが、npxコマンドでも同様のことができます。

質問はコンソール上に表示されるので、順番に答えていきます。
(間違えたら最初からやり直し…)

1. アプリ名
   デフォルト値に先の<project-name>が入っているので、そのまま。

2. アプリの説明
   適当に説明を入れる

3. ユーザ名
   適当に名前を入れる

4. パッケージマネージャ
   yarnとnpmから選べます。
   今回はyarnを選択しました。

5. UIフレームワーク
   コンポーネントライブラリなどがここで選択できます。 Buefyを選択しました。

6. サーバサイドフレームワーク
   まずはNoneを選んで問題ないでしょう。

7. Nuxtモジュールの選択
   PWAのみにチェックを入れました。 今回は外部サーバ叩かないので、axiosは使いません。
   (ちなみに選択はspaceキーでできます。)

8. Linterの選択
   ESLintを選択

9. テスティングフレームワーク
   必要あればテスティングフレームワークを選択する。
   Jestを選択しました。

10. Nuxtのモードを選択
    Single Page Appを選択しました。

11. 開発ツール
    開発ツール向けの設定ファイルを生成できます。
    VSCodeがおすすめとのこと。

回答が終わると、全ての依存関係のインストールが始まり小一時間かかるので待ちます。
インストールの最後にコマンドの説明が表示されるので、確認しておきましょう。 インストールが完了するとプロジェクトディレクトリが作成されているはずです。

それでは開発環境を起動していきます。 まずは作成されたプロジェクトディレクトリに入ります。(<project-name>は先に入力したプロジェクト名)

$ cd <project-name>

下記コマンドによりNuxtの開発環境が起動されます。

$ yarn dev

起動完了したらlocalhost:3000にアクセスするとデフォルトの画面が表示されます。
インストール時にBuefyを選択していたので、Buefyの例を表示してくれます。

なお、詳しいディレクトリ構成についてはこちらをご覧ください。
→(公式)ディレクトリ構造

SCSSを使えるようにする

このままでも開発を進めることはできるのですが、スタイル指定にSCSSを利用したいのでsass-loaderをインストールします。
yarnコマンドでライブラリを追加していきます。(sassなところに注意)

$ yarn add sass-loader node-sass

これでscssが使えるようになりました。

実際に使う際にはvueファイル内のstyleタグに対して<style scoped lang="scss">のようにして使います。
ライブラリインストールするだけで、scss環境が作れるなんて便利ですね。

自動テストの実行

テストは下記のコマンドで実行できます。 今回はテスティングフレームワークのJestを利用しています。

$ yarn test

コマンドを実行するとテストケースがパスしたがどうかと、最後にカバレッジの一覧が表示されます。非常に高機能です。

テスト実行した画面はこのような感じになります。

最後に

以上で開発の準備は完了です。
あとはページを編集していけば、簡単なWebアプリケーションであればすぐに作成することができます。本当に簡単です。
開発にあたっては、Nuxtの公式文書が日本語でよく整備されていて、とても読みやすいので参考にしてみてください。こう言った、コミュニティを通じて翻訳活動していただいている方々には心から感謝です。

さて、この雛形を元にいろいろと開発をしていきたいと思います。はじめはなるべくシンプルなアプリ開発からスタートしていこうと考えていますが、まずは何より早めの公開を目指そうと思います。