Nuxt.js の導入 -3.13.3ver-


## 2020.7.9 追記

久しぶりに Nuxt.js を導入したら、バージョンがかなりアップしていたので、更新しました✨
バージョンアップで以前発生していた[こちらの](<https://qiita.com/dama-a/items/8cb72bc593fd8d3f6044>)エラーは解消されたようです。

## はじめに

ちなみにバージョンは次のコマンドで確認できます。

```shell
> npx nuxt -v
```



## Nuxt.js をインストール

コマンドラインから次のコマンドでインストールします。

- Yarn を使った場合

```shell
> yarn create nuxt-app <my-project>
```

- npx を使った場合

```shell
> npx create-nuxt-app <my-project>
```

このあといくつか質問がありますので、それぞれ解説します。



### Project name

```shell
? Project name (my-project)
```

プロジェクト名を聞かれます。

デフォルトはインストール時にパラメーターで渡したものが表示されますので、大抵の場合はそのまま [Enter] で良いと思います。



### Programming language

```shell
? Programming language: (Use arrow keys)
> JavaScript
  TypeScript
```

使用する言語を聞かれます。



### Package manager

```shell
? Package manager: (Use arrow keys)
> npm
  yarn
```

パッケージマネージャーに `npm` と `yarn` のどちらを使うか聞かれます。



### UI framework

```shell
? UI framework:
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
```

UI フレームワークを聞かれます。（あとで変更可能です！）
UIフレームワークについては[こちらの記事](<https://qiita.com/yusuke_ten/items/4103f032dd0c6fbe5607>)が分かりやすかったです！



### Nuxt.js modules

```shell
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA)
 ( ) Content 
```

`Axios` と `PWA` 、`Content` を利用するか聞かれます。 
`Axios`[^1] は最低限チェックしたほうが良くて、`PWA` [^2]は好みです。
`Content` はブログなど静的サイトジェネレータライクに利用する場合に導入すると良いようです。



### Linting tools

```shell
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files
 ( ) StyleLint
```

`ESLint` と `Prettier` 、`Lint staged files`、`StyleLint` を利用するかどうか聞かれます。

`ESLint`  はコーディングスタイルを統一するのに便利です。
 `Prettier` はコードフォーマッター部分を連動させたりすることもできます。
`Lint staged files` は Git のコミット時などに Lint のエラーやワーニングがあるとコミットできない仕組みです。
`StyleLint` は CSS の Lint です。



### Test framework

```shell
? Testing framework: (Use arrow keys)
> None
  Jest
  AVA
  WebdriverIO 
```

テストフレームワークを聞かれます。



### Rendering mode

```shell
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App
```

ユニバーサルアプリケーションとシングルページアプリケーションのどちらで作るか聞かれます。
作るアプリに合わせて選択してください。



### Deployment target

```shell
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/JAMStack hosting)  
```

`Server (Node.js hosting)` はサーバーサイドレンダリングを行う設定です。
`Static (Static/JAMStack hosting)` は静的サイト用の設定です。



### Development tools

```shell
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests 
```

公式サイトに記述がないので、よくわからないのです。。。



### Please wait a minute...

この後、プロジェクト作成が行われ、

```shell
  To get started:

        cd my-project
        npm run dev

  To build & start for production:

        cd my-project
        npm run build
        npm run start
```

とメッセージが出たら作成完了です！



## 起動してみよう！

完了メッセージにあったように、作成されたプロジェクトに移動して、起動コマンドを入力してみましょう。

- Yarn を使った場合

```shell
> cd my-project
> yarn run dev
```

- npm を使った場合

```shell
> cd my-project
> npm run dev
```



起動……

```shell
   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt.js @ v2.13.3                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

i Preparing project for development                                                                           18:59:15
i Initial build may take a while                                                                              18:59:15
√ Builder initialized                                                                                         18:59:15
√ Nuxt files generated                                                                                        18:59:15
i Starting type checking service...                                                           nuxt:typescript 18:59:21

√ Client
  Compiled successfully in 7.54s
```



`http://localhost:3000/` にアクセス！
![1594291265737.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311982/d78324f1-efcd-5214-c1cc-1c11aafa2b5b.png)
ﾜｰｲ (/・ω・)/



## おわりに

Nuxt.js ってなに？なんて読むの？状態からのスタートでしたが、フロントエンド初めての私でも出来ました！
起動してすぐに画面が表示されるとモチベーションがあがりますね。
Nuxt.js インストールする中で知らない単語がたくさん出てきたのでいい勉強にもなりました！！

（2020.7.9 追記）
バージョンアップしてかなり質問が変わっていて困ったので、この記事が誰かの役に立てば嬉しい限りです。





[^1]: HTTP通信を簡単に扱えることができるJavaScriptライブラリです。ブラウザとnode.jsに最適化された、PromiseベースのHTTPクライアントです。
[^2]: PWAとは「Progressive Web Apps」を略した言葉で、モバイルサイト上でネイティブアプリのようなユーザー体験を提供する技術です。ウェブとアプリの両方の良さを兼ね備えています。インストールの必要はないのに、ホーム画面へのアイコン追加やプッシュ通知も可能で、ユーザーとの接触機会を増やすことができます。また読み込み速度や表示の高速化、オフラインでの閲覧可など、さまざまなメリットが得られます。