SSRしたい場合のnuxt.jsのセットアップ例

## Project name



![スクリーンショット 2021-10-09 17.00.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/52be7eac-c0fc-da46-c976-631c10be106f.png)

まんまでございます。
あなたのプロジェクト名をinputしましょう。

## Programing language

![スクリーンショット 2021-10-09 17.00.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/a343e19e-3a9f-fe2c-add2-38786a9948c3.png)

描きやすい方で。
話が伸びると派閥争いになります。
ちなみにTSが絶賛されている中なぜ導入しないかを真面目に答えると、なんでもラップしてしまうとコアな部分の処理が見えなくなってしまいがちだと考えるからです。SCSSのようにネストした書き方をすることによってスタイル定義が分散してしまうことを防ぐ目的があるのでSCSSは良いと思いますが、JSのTS化は踏み切るほどの強い理由がないと感じているから採用はしていません。

新しいものは比較的好きな方ではありますが、いづれにしてもお好みで。

## Package manager

![スクリーンショット 2021-10-09 17.00.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/218fb637-ccc8-ace2-4e7a-1ebf1a837db5.png)

スコア的にはyarnの方が高速です。


## UI framework

![スクリーンショット 2021-10-09 17.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/2e535d29-6bb2-f06d-c508-b995cdd217a8.png)

お好きなFWで。
個人的にはvuetifyの先進的な感じが好き。
（一通り全部試してみての所感）

## Nuxt.js modules

![スクリーンショット 2021-10-09 17.01.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/cfe9360e-cc06-3420-c244-395a144eda1b.png)

APIも実装するならaxios必須。
PWAで実装したところで使いこなせるユーザーって限定的だと思うので。
なら馴染みのあるものを提供しようって結論に至りました。
（サービスは使ってもらえないと意味がない。離脱されたら本末転倒。）

## Linting tools

![スクリーンショット 2021-10-09 17.01.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/1058fcc3-2e6d-69f6-15e5-fce5105451db.png)

コーディングスタイルのチェックツールです。
全てchekedですが補足します。

### ESLint & Prettier

フロントのコードチェックをしてくれるツール。

https://qiita.com/soarflat/items/06377f3b96964964a65d
 
### Lint Staged files

コミット時にESLintを走らせてくれるツール。
（この存在を知るまではgithookのpre-commitなどでlint走らせていた）

https://qiita.com/shohei_ot/items/05a380b7c2d79ab7b692

### StyleLint

CSSのチェックを行ってくれるツール。

https://qiita.com/DesignChips/items/cd5282dba553026757c8

### Commitlint

コミットメッセージが指定した形式になっているかチェックしてくれるツール。

https://qiita.com/rihofujino/items/95838b38ea7c29bc366b

***※ つまり全部入れた方が良い。***

sourceTree経由のgit操作の場合、yarnコマンドを認識しないので以下が必要。

https://github.com/typicode/husky/issues/904#issuecomment-862184954

## Testing framework

![スクリーンショット 2021-10-09 17.01.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/ac9d0298-3bb4-4156-c138-7c4d6f50132c.png)

~~JestとAVAとで悩んだが、とりあえずAVAを入れておいた。~~

 avaでググるとj`ava`Scriptでもひっかかり記事探したりするのも工夫しなければいけなさそうなのでそこも考慮してやっぱりJestにした。

### Jestも使いやすそう

https://qiita.com/jintz/items/61af86a12b53b24ef121

https://qiita.com/mima_ita/items/558ec8cee2c0e1005ffd

https://blog.proglearn.com/2020/06/13/%E3%80%90jest%E3%80%91nuxt-js%E3%81%A7%E3%83%86%E3%82%B9%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%EF%BC%81%E3%80%90%E5%AD%A6%E7%BF%92%E6%96%B9/

## Rendering mode

![スクリーンショット 2021-10-09 17.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/3e9a983b-cd19-167e-6834-7c65710a4e78.png)

公開サイトにする必要がある場合（クローラーに見つけてもらいたい場合）はSSRにする。
管理画面などはSPA ~~でも~~ の方が良い。

## Deployment target

![スクリーンショット 2021-10-09 17.01.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/d66c3a5d-6302-e76c-3c5e-c8af87716333.png)

SSRにするならNodeServer選択。

## Development tools

![スクリーンショット 2021-10-09 17.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/3fe38f82-a595-fce0-c7f1-ab9ae41eea45.png)

### jsconfig.json

IDE(VSCodeだけ？)がコーディングの補完やサジェストをしたりするための設定ファイル。

https://qiita.com/kazuooooo/items/b0ca9bd74a093824403e

### Semantic Pull Requests

commitするときのメッセージ形式をチェックするツール。
所定のprefixを必要とする。

https://qiita.com/kaitaku/items/97699d579e93873a7380

### Dependobot

package.jsonなどに定義しているバージョンが最新か古いかを判断し、古い場合バージョンアップしろという内容のPRが作られるという目から鱗なツールです。

リポジトリのPR一覧を日常的に見る癖がある場合すぐ気付きますね。
PRが作成されたらslack通知するようにしておけば更にgood。

https://dev.classmethod.jp/articles/dependabot-101

## Continuous integration

![スクリーンショット 2021-10-09 17.01.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/6cd673b0-8556-4d14-9fa5-8f55e4555b13.png)

よくわからんのでNone。

## Wahat is youe GitHub username

![スクリーンショット 2021-10-09 17.02.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/f9b5a750-94ab-8948-fa40-525f623c841d.png)

まんまでございます。
あなたのgithubのusernameをinputしましょう。

## Version control system

![スクリーンショット 2021-10-09 17.02.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/607ace7c-95d5-8862-92c3-f17aa7fe1504.png)

gitでOK。

## nuxt created!!!

![スクリーンショット 2021-10-09 17.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125469/e4776ad6-3670-e6b3-e061-23770c2b5ea4.png)

お疲れ様でした。
CIはymlファイルとか仕組めばgithubと連携できるはずなので、ここでは気にしないことにしました。
nuxt.jsのセットアップ例ということで見てきましたが参考になりましたら幸いです。

## 最後に...

結構細かく説明してくれている文献です。

https://qiita.com/cheez921/items/fdfd224099f686e3173d