最近良く「SPA」とか「SSR」とか「SSG」とかよく聞きますよね。

左から「シングルページアプリケーション」「サーバーサイドレンダリング」「スタティックサイトジェネレーター」です。

僕自身最近は「Netlify」で超簡単な小さいページをSSGでデプロイしたりしています。

サーバーの契約とかしなくても良いのでとても簡単です。

さて、今回はNuxt.jsを使ってアプリを作るために開発環境の構築をやっていきましょう。

インストール

では、まずはインストールから始めていきます。

とはいえ、公式のドキュメント見れば問題なくできると思うのでそっちが良いと思う人は以下のリンクからどうぞ。

インストール - NuxtJS

それ以外の心優しい方、ありがとうございます。

それではインストールやっていきましょう。

前提条件の確認

まずはnode.jsのバージョンを確認しましょう。

公式サイトでは v10.13 以上を推奨しています。

エディタはお好きなものを使用してください。

create-nuxt-app

それではnuxt.jsをインストールしたい場所にターミナルで移動しましょう。

今回私は例として端末のルートディレクトリで実行してみます。

やり方はyarnになりますが、npmも読み替えてもらえればOKです。

// yarn yarn create nuxt-app <project-name> // npmnpx create-nuxt-app <project-name>

<project-name>には作成するアプリの名前を入れてください。

そうすると対話形式で色々と質問されます。

全部書くと大変なことになるので以下に質問内容を貼っておきます。

create-next-appの質問内容

今回、僕はこんな感じの設定にしてみました。

最後まで回答できたらインストールが始まります。

インストールしている間少し休憩しましょう。

インストールが完了するとなにやら指示が表示されました。

🎉  Successfully created project sample-site   To get started: 	cd sample-site	yarn dev   To build & start for production: 	cd sample-site	yarn build	yarn start ✨  Done in 1461.49s.

僕はこんな感じで表示されました。

ここまで来たらあとは指示に従うだけです。

// プロジェクトに移動して...cd (project-root) // ローカルサーバー起動yarn dev

ローカルサーバーが起動すると以下にアクセスできるようになります。

http://localhost:3000/

表示されましたか？

表示されていたらガンガン開発を進めていきましょう！

表示されない場合、どこかで間違えています。

プロジェクトルートに移動していますか？

一個ずつ確認してみてください。

以上でNuxt.jsの環境構築は完了です。

お疲れさまでした。

それではよいNuxtライフを！

Nuxt.js

【Transition】Nuxt.jsでページ遷移時にアニメーションをつけてみる

Nuxt.jsを使ってSSR、SSGの環境構築をしてみよう