【ブログサイト開発其の2】Nuxt.jsの環境準備（Nuxt.js編）

【ブログサイト開発其の2】
Nuxt.jsの環境準備（Nuxt.js編）

初稿： 2021.02.16 更新： 2022.02.09 Nuxt
目次
今回はやっとこさでNuxt.jsのセットアップをお伝えしたいと思います！
npmの確認
前回Node.jsをインストールしたかと思いますが、Node.jsをインストールすることでnpmも使用できるようになっているはずです。

ターミナルで以下のコマンドを打ってnpmが入っているか試してみましょう。
```
hogehoge@hogehoge ~ % npm -v
```
入っていれば、以下のような表示になります。
```
hogehoge@hogehoge ~ % npm -v
6.14.5
```
今回入れるNuxt.jsはnpmのバージョンが5.2.0以降で使用できるnpxコマンドを使用するので、
5.2.0以下の方は以下を参考にnpmのバージョンをアップしてください。
http://snagimo.com/specify-versions-of-node-js-and-npm
Nuxt.jsのインストール
さてついにNuxt.jsをインストールする工程に行きます。笑

まずは、今回Nuxt.jsで作成するディレクトリで、ターミナルを開いてください。
（ここからターミナルはMacのターミナルでもいいですし、VScodeのターミナルでも構いません。）

ディレクトリでターミナルを開いたら、以下のコマンドを打って行きます。
```
npx create-nuxt-app <project-name>
```
ここで記載されている、<project-name>は任意の名前でよいので、私はnuxt-sampleとしてNuxtをインストールします。
```
npx create-nuxt-app nuxt-sample
```
上記コマンドを叩くと何度か質問されていきます。
各質問に答えていきましょうー！
Programming language
まず、言語の選択がでますが、ここはjavaScriptを選択しましょう。
```
Programming language: (Use arrow keys)
❯ JavaScript 
 TypeScript
```
Package manager
次は、パッケージマネージャーは何を使用するかを選択します。ここはnpmを選択しましょう。
```
Package manager: (Use arrow keys)
❯ Yarn 
 Npm 
```
UI framework
次はUIフレームワークの選択です。これはCSSフレームワークを選択する形になるので、好きなものがあればそれを選択して使用しましょう。
```
 UI framework: (Use arrow keys)
❯ None 
 Ant Design Vue 
 Bootstrap Vue 
 Buefy 
 Bulma 
 Element 
 Framevuerk 
 iView 
 Tachyons 
 Tailwind CSS 
 Vuesax 
 Vuetify.js
```
私はTailwind CSSというの使用してみたかったので、Tailwind CSSを選択しましたが、最終的には自分でscssファイルを作ってスタイリングしてます。笑
Nuxt.js module
次は、Nuxtで使用するモジュールです。ここはaxiosを選択しましょう。
```
Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA)
 ◯ Content
```
Linting tools
コードをチェックするLintツールを選択します。
ここでは、ESLint、Prettierを選択します。
```
Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
```
Testing framework
ここはテストツールを選択します。今回テストツールは使用しないので選択なしでよいです。
```
Testing framework: (Use arrow keys)
❯ None 
 Jest 
 AVA 
 WebdriverIO 
```
Rendering mode
レンダリングモードを選択します。
今回は静的サイトでNetlifyでファイルをアップしますので、Universalを選択します。
```
Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG) 
 Single Page App
```
Deployment target
ここはデプロイ（本番環境）先を選択します。
今回はJAMStackなので、Staticを選択します。
```
Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
 Static (Static/JAMStack hosting) 
```
Development tools
jsconfig.jsonはVSCodeで開発ツールの設定を自動的に生成してくれます。
対して、Semantic Pull RequestsはGithubのツールで、コミットメッセージやプルリクエストのタイトルをチェックするツールになります。

VSCodeを使用している方は、jsconfig.jsonを選択しましょう。
```
Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests
```
これで全部の質問に答えました。

全部の質問に答えるとインストールが始まり、次のメッセージが表示されるとインストール完了になります。
```
Successfully created project nuxt-sample
```
ターミナルを開いていたディレクトリにいろいろファイルが入っていると思いますが、これがNuxt.jsのファイル群になります。
次に実際に起動をさせてみましょう！
Nuxt.jsの起動
Nuxt.jsを起動するには、インストールされたファイルがあるルートに移動する必要があります。
今回でいうと、nuxt-sampleというプロジェクト名でインストールをしていると思うので、ターミナルで以下コマンドを打ちディレクトリを移動しましょう。
```
cd nuxt-sample
```
ディレクトリを移動したら、以下コマンドを打ち、
```
npm run dev
```
http://localhost:3000にアクセスして、以下のようなページが表示されれば成功です！

次回
ここまでお疲れさまでした。笑
Node.jsが長く大変だったかと思いますが、Nuxt.jsまでインストールすることができました！

次回はNuxt.jsのディレクトリの説明やブログ構築について書いていきたいと思います。

それでは次回もゆたしく〜〜
記事一覧に戻る