【自分備忘録】Nuxt.jsいじってみた

はじめまして。

今回、Vue.jsもしっかりいじったことない自分が、とある案件でNuxt.jsをやろうという自分的暴挙に出ました。←
Reactはがっつりやっているわけじゃないけれど、別案件でやっていて。
「Reactいじったから次はVueかなー」と思って、空き時間とか使って少し勉強していたのです。
そしたらちょうど案件が舞い込んできたので、「Nuxtでやっちゃおー！」というノリでやってみました。

ちょっとした感想を書きつつ、備忘録兼ねて、色々とQiitaに書いていこうと思います。
作業しながら、Qiitaの記事も色々参考にさせていただきました…書いてくれた人本当にありがとう。。。

## 率直な感想
五月雨に書いていきます！

### 公式ドキュメントが日本語／日本語の参考資料が豊富（な印象）
英語得意なわけじゃないから、日本語ドキュメント本当に助かった…ありがとう！！
自分は、Vue.jsの公式ドキュメントとNuxt.jsの公式ドキュメントを交互に見ながら進めた感じ。

* [Vue.js公式ドキュメント](https://jp.vuejs.org/v2/guide/)
* [Nuxt.js公式ドキュメント](https://ja.nuxtjs.org/guide/)

あとは、ドキュメントと合わせて、Vueの基礎ってことで、色々調べて猫の本とか、BOOTHでNuxtの本とか買いました。
[『基礎から学ぶ Vue.js』（mioさん著）](https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453/ref=asc_df_4863542453/?tag=jpgo-22&linkCode=df0&hvadid=295706574430&hvpos=1o1&hvnetw=g&hvrand=3394210851157642751&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009717&hvtargid=pla-524581061219&psc=1&th=1&psc=1)

### 環境構築が簡単。自分の作業しやすいようにカスタマイズも。
コマンド叩いて、あとは「テストツールどうする？」「フレームワークどうする？」とかの質問に、ぽちぽち選択するだけで、環境できちゃう。
あとは、職場でずっとPugとStylus使って作業してたので、パッケージインストールしたら使えるのは、とってもありがたかったです。。

* [『nuxt.js(v2)でpug/stylusを利用する』](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)

上記記事、参考にさせていただきました…ありがとうございます！
TypeScriptもモジュール入れたら使えるみたいなんだけど、今回はやってないので、次の機会にやろうかと思います。

### モジュールが豊富
アナリティクスの設定とかリダイレクト設定、サイトマップの作成などなど…色んなことをモジュールが助けてくれました。
https://awesome-nuxt.js.org/resources/modules.html

### コンポーネント指向
ちょっと抜粋するけど…ディレクトリ構成がこんな感じ↓

```
ProjectDir
├ components/ （コンポーネント置き場）
│   ├ Title.vue
│   └ Button.vue
├ layouts/ （テンプレとなるvueファイルが置かれる場所。エラーページとかも）
└ pages/ （ページのvueファイルが置かれる場所）
    ├ user/
    │   └ _id.vue 
    └ index.vue
```

componentsディレクトリがあって、その中に再利用可能なコンポーネントを作っていく。
そのコンポーネントを組み合わせてページを作っていく感じ（layout部分は割愛）。
コンポーネント指向なサイトが作れるので、制作も運用も楽になりそう。
（サイト設計のときにしっかりとした相談が必要になるだろうけど。。）

```vuejs:components/Button.vue
<template lang="pug">
a.c-button(v-bind:href='href', target='_blank') {{ text }}
</template>
<style lang="stylus">
.c-button
  // スタイルを記述していく
</style>
<script>
export default {
  props: {
    href: {
      type: String,
      default: '#'
    },
    text: {
      type: String,
      default: 'リンクテキスト'
    }
  }
}
</script>
```

```vuejs:pages/index.vue
<template lang="pug">
article
  section
    Title タイトル
    p 説明テキスト。説明テキスト。説明テキスト。説明テキスト。
    Button(href='http://sample.co.jp/', text='サンプルサイトへのリンク')
</template>
<script>
import Title from '~/components/Title.vue'
import Button from '~/components/Button.vue'
export default {
  components: {
    Title,
    Button
  }
}
</script>
```

### ルーティングの設定が簡単
あとは、vue-routerもデフォルトで入っているので、pagesディレクトリ内にvueファイルを作るだけで、ルーティング設定を自動でやってくれるのも、ありがたかったです。
動的なルーティングに関してもファイル名の先頭に`_`つけてあげればOK。
（ただし、URLに`_`を入れたい場合は、別途設定が必要。）

### ページの表示速度が早い
ページの表示速度は結構大きいかな。。
今回の案件では、SEOを気にしなきゃいけないこともあって、SSR（サーバーサイドレンダリング）にしたのですが…そのおかげもあってか、体感的にも表示が早く感じました。

## もうちょっとしっかり調べとくべきだったなーと思った内容
* SSRについて
* ルーティングについて（動的ルーティングのページは、generateコマンドだと生成されないってのが、ドキュメントにも載ってた…のに見落としてた）
* APIを叩いて返ってきたデータを利用した、ページの描画について（axios）
* http→httpsへのリダイレクト対応
* nuxt.config.jsでの諸々の設定
* IE対応←

バックエンドエンジニアさんと一緒に、試行錯誤しながら感がすごかった。。。
APIの部分は、単純な原因だったんだけど、そこに行き着くまでに随分時間がかかりました。。。
おかげで、Nuxtのライフサイクルについては、随分と理解できたかな。
ちょいちょい作業してて詰んだ部分は、これからQiitaに備忘録として書いていく予定ですφ(..)

## 総括
Nuxt.js大変だったけど楽しかったです。
Vue初心者でも、単純に何かサイトを作るとかくらいなら、学習コストはそんなに高くないのかなという印象です。
（細かいところまでしっかり理解して進めるんだったら、それなりな学習コストは必要だと思うけど。）
今度は案件じゃなくて、趣味で色々やってみようって思いました！