こんにちは、フリーランスエンジニアのてぃすです。
今日はVue.jsの開発を強力にサポートするWebフレームワークであるNuxt.jsについての簡単な紹介と開発の始め方について書いていこうと思います。
[toc]Nuxt.jsについて
Nuxt.jsはVue.jsでWebフロントエンド開発を円滑に進めるためのフレームワークです。
メインの特徴としては、これまで実装難易度の高かったサーバーサイドレンダリングを簡単に実装するための機能を有していることです。
ただサーバーサイドレンダリングをしない場合でも、コンパイルなどをあまり意識せずに開発を始められることからVue.js開発のスタートキットとしても優秀ですし、nuxt generateなどの便利な機能から静的なWebページ生成ツールとしても高い有用性を備えています。
これからVue.jsを始めたいという人にもお勧めできるくらい完成度の高いフレームワークです。個人的な感想としては、フロントエンド界のRuby on Rails的なポテンシャルを持っているのではないかと考えています。
Nuxt.jsで開発を始める
では早速Nuxt.jsで開発を始めるための手順を紹介していこうと思います。基本的にはNuxt.jsの公式ドキュメントをベースに紹介しています。Nuxt.jsの公式ドキュメントは非常に充実していますので、開発する中で困ったことがあったら、まずは公式ドキュメントを参照するようにしておきましょう。
インストールから初期画面表示まで
Nuxt.jsの開発を始めるにはまず2つの方法があります。
スターターテンプレートを使う方法
Nuxt.jsの開発チームが用意したスターターテンプレートを使用して、コマンド1つで基本的なファイル構成が出来上がります。あとは自分の作りたいサービスに合わせてファイルを追加したり書き換えたりすることで簡単に開発を始めることができます。
フルスクラッチで始める方法
最初に1つずつファイルとディレクトリを用意して、自分でファイルを付け加えながら開発を進める方法です。Nuxt.jsのディレクトリ構造を調べながら進める必要がありますが、余計なファイルを作られないことと、Nuxt.jsの基礎を身につけながら環境構築を進めることができますので、オススメの方法です。
スターターテンプレートを使う場合
まずはVue.jsのコマンドラインツールであるvue-cliをインストールする必要があります。こちらはVueの開発をスムーズにするツールとして既にインストール済みの人もいるかも知れません。その場合はスキップしてもらってOKです。
|
1 |
yarn global add vue-cli |
|
1 |
npm install -g vue-cli |
vue-cliのインストールが完了したら、vueコマンドが使えるようになっていることを確認した上で、自分のPC上の作業用ディレクトリで以下のコマンドを実行します。
|
1 |
vue init nuxt-community/starter-template <プロジェクト名> |
自分の場合~/workspaceを作業スペースとしているので、以下のように実施しました。
|
1 |
~/workspace > vue init nuxt-community/starter-template nuxt-sample |
コマンドを実行するといくつか質問形式で入力画面が表示されますが、基本的にはEnterでスキップしてしまってOKです。
|
1 2 3 4 5 6 7 8 9 10 11 |
? Project name nuxt-sample ? Project description Nuxt.js project ? Author tis <sample@sample.com> vue-cli · Generated "nuxt-sample". To get started: cd nuxt-sample npm install # Or yarn npm run dev |
するとこれだけでコマンドを実行したディレクトリ配下にプロジェクト名で入力した名前のディレクトリが作成され、その中に基本的なNuxt.jsのファイル構成が出来上がります。(説明用にVisual Studio Codeを使用しています。)
ファイル構成が出来上がっていることを確認したら、vue initコマンドの実行結果の下にも表示されているスタート用のコマンドを実行します。
|
1 2 3 |
cd nuxt-sample yarn install yarn run dev |
|
1 2 3 |
cd nuxt-sample npm install npm run dev |
上記コマンドを実行すると最後にOPEN http://localhost:3000と表示されますので、ブラウザでhttp://localhost:3000開いてみましょう。Nuxt.jsのサンプル画面が表示されます。あとは作りたいサービスに応じてテンプレートファイルをいじったり模倣したりして、開発を進めていきましょう。
フルスクラッチで始める方法
自分でファイルを追加しながら始める方法ですが、こちらも手順としては非常にシンプルです。
まずは自分の作業ディレクトリ配下にプロジェクト名でNuxt.js開発用のディレクトリを作成して、その階層に移動します。例ではnuxt-sample-manualというサービスを作るとします。
|
1 2 |
~/workspace > mkdir nuxt-sample-manual ~/workspace > cd nuxt-sample-manual |
次に作成したディレクトリにpackage.jsonを作成して、nuxt用の記述を追加します。
まずはファイルを作成して、
|
1 |
~/workspace/nuxt-sample-manual > touch package.json |
以下のように内容を記述します。
|
1 2 3 4 5 6 |
{ "name": "my-app", "scripts": { "dev": "nuxt" } } |
記述し終わったら、Nuxtをカレントディレクトリにインストールします。
|
1 |
yarn add nuxt |
|
1 |
npm install --save nuxt |
Nuxt.jsのインストールが完了したら、基本となるディレクトリとファイルを作成します。
|
1 2 |
~/workspace/nuxt-sample-manual > mkdir pages ~/workspace/nuxt-sample-manual > touch pages/index.vue |
このpages/index.vueがlocalhost:3000に接続した時にNuxtの方で自動的に呼び出してくれるファイルとなります。試しに以下のようにファイルの中身を編集してみましょう。
|
1 2 3 |
<template> <h1>Hello world!</h1> </template> |
編集を保存したら、スタートテンプレートの時と同様に開発用サーバーを起動します。
|
1 |
yarn run dev |
|
1 |
npm run dev |
localhost:3000に接続することで、先ほどよりは地味ですが、保存した内容が画面に表示されることを確認できます。
まとめ：早速開発をスタートしましょう
いかがだったでしょう。できる限り丁寧に初心者の方でも躓きにくいように説明してきました。
以下の記事では開発環境が整った後に、スムーズに開発を行うための設定などを紹介しています。よりNuxt.jsでのフロント開発を加速させたい人は是非ご覧になってみてください。
https://tisnote.com/nuxt-js-setting/
これからのフロント開発において、主力となってくるであろうNuxt.jsの開発手法を身につけて、エンジニアとしての価値を高めていきましょう。
閲覧いただき、ありがとうございました。
