小村の開発環境構築（９）　Nuxt.jsの初期アプリケーション作成

こんばんは、小村だよ！
今日はおまちかね、Nuxt.jsの初期アプリを作成するよ！
ここまで長かった……ようやくWebサイト作成の第１歩や！

やること

Nuxt.jsの初期アプリ作成

事前準備

VSCodeからUbuntuにSSH接続していること（手順はこちらの事前準備）

手順

Nuxt.jsの初期アプリ作成

参考：Nuxt.js インストール（公式）
最初のアプリ作成は、Nuxt.jsのcreateコマンドを使って作成していくよ！
後々プロジェクトのフォルダ構成を変えることを加味して、project名は[src]
- ここで作成されるフォルダは後々ソースをまとめるフォルダになる予定だよ！
というわけで下記のコマンドを実行

yarn create nuxt-app src

ここから怒涛の質問攻め。就職活動かよ

Nuxt.jsからの質問攻めに答える

参考：【Nuxt.js】create-nuxt-appのすすめ〜create-nuxt-appの質問に負けたくないあなたへ〜
基本的に上記サイトを参考に質問に答えていくよー
- ただ新しい質問などが加わってるのでその都度調べて解答するね
私の回答は下記のとおり！

Project name: src

プロジェクト名を決める項目
- 前述の通り[src]でいくよ！

Programming language: JavaScript

使用する言語の選択
- JavaScriptとTypeScriptの2択
- 将来的にTypeScriptで作りたいけどまずは慣れてるJavaScriptで作っていくよ！
- その後それを参考にTypeScriptで書き直す方針

Package manager: Yarn

パッケージマネージャの選択
- yarnとnpmの2択
- yarnのほうが上位互換の認識なので特別なことがなければyarn

UI framework: Vuetify.js

UIのフレームワーク。参考サイトが特に役立った。
- 下記の強みを重視して私はVuetify.jsを選択したよ
  - コンポーネント、リファレンスが充実している
  - アニメーションが綺麗

Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA), Content - 
Git-based headless CMS

Nuxt.jsで使用する追加ライブラリ。３種類から取捨選択する。
私は全選択。理由は下記。
- [x] Axios - Promise based HTTP client
  - 将来的にDjango Rest Frameworkを使用し、DBとのAPI連携を行なうため
- [x] Progressive Web App (PWA)
  - webアプリをモバイルアプリのように使うことのできる仕組み
  - 将来的にスマホ対応もしたいため導入。初めて入れるのでドキドキ。
- [x] Content - Git-based headless CMS
  - 参考：NuxtでGitベースのヘッドレスCMS機能を実現するNuxt/Contentの紹介
  - 参考：ヘッドレスCMSとは何か？従来CMSとの違いやメリデメを解説！
  - あまり理解しきれてないけど要はマークダウンでvueを書ける？
  - マークダウン大好き人間なので採用。今度これ単体の調査記事を書きたい。

Linting tools: ESLint, Prettier, Lint staged files, StyleLint, Commitlint`

Lintに関連するツールの選択。5種類から取捨選択する。
私は全選択。理由は下記。
- [x] ESLint
  - JavaScriptではおなじみのリンター。当然使用する
- [x] Prettier
  - JavaScriptではおなじみのフォーマッター。当然使用する
- [x] Lint staged files
  - lintの通ったソースコードのみしかcommitできなくする仕組み
  - あったほうがいいなぁと思い採用。初めて使う。
- [x] StyleLint
  - スタイルシートに対するリンター。採用。初めて使う。
- [x] Commitlint
  - 参考：commitlint の紹介
  - コミット時のルールを設定する。採用。初めて使う。

Testing framework: Jest

ユニットテストで使用するツールを選択する。4種類から選択
選択できるのは[Jest] [AVA] [WebdriverIO] [Nightwatch]
- [Jest]が一番利用されているので[Jest]を選択
  - 実は私、フロント側だとあまりユニットテスト書いたことないのです……
  - ただ勉強も兼ねてるのでね！積極的にテスト書いてくぞ！！！

Rendering mode: Universal (SSR / SSG)
Deployment target: Server (Node.js hosting)

webサイトの描画方法（サーバサイド、フロントサイド、動的、静的）の選択
- 参考：Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら
  - 参考サイトがとてもわかりやすい！！！ありがとう！！！いい薬です！！！
- ２つの質問で１セットみたい
  - ひとまずSSRを採用。そのうち変更することになるかもしれないねー

Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
, Dependabot (For auto-updating dependencies, GitHub only)

開発で使用する便利ツール。3種類から取捨選択
私は全選択。（一度Semantic Pull Requestsを外しましたが入れなおしました）
- [x] jsconfig.json (Recommended for VS Code if you're not using typescript)
  - Javascriptのconfigファイル。TypeScriptでなければ入れておいていいと思う
- [x] Semantic Pull Requests
  - 参考：Githubの便利な機能であるSemantic Pull Requestを解説します
  - コミット時のコメントがGitHub準拠かどうかをチェックするツール
  - ~~Lintツールの時に設定した[Commit Lint]と被ると思い不採用。~~
  - ~~そのうち個別に入れるかもしんない~~
  - ソース管理からコミット時にCommitLintしてくれないので入れました
- [x] Dependabot (For auto-updating dependencies, GitHub only)
  - 参考：DependabotとGithub Actionsで自動バージョンアップを実現する話
  - 自動でnode_modulesのバージョンアップをしてくれるツール。
  - のちにこいつが爆発して大変な思いをする。
  - でも入れておいて後悔はない！慣れれば便利！

Continuous integration: GitHub Actions (GitHub only)

CL/CIを何で実現するかの選択
- CL/CIについてはまだ知識仕入れてないけど、そのうち絶対やる！
- で、やるならGitHub Actionsになりそうだなぁと思い選択
- 別ツールになるかもしれないし、この辺はかなり未知だね！

What is your GitHub username? komura314

GitHubのユーザー名を聞かれる
- 無礼者！人に名を尋ねるときは自分から名乗れ！！！

Version control system: Git

バージョン管理の選択
- Git一択やろがい！

以上で質問終了。長かった！！！

Enterキー。ｯﾀｰﾝ!!

めちゃんこWarningとエラー出るんだが？？？？
でもsrcフォルダはできていることを確認。run buildで失敗してるのかな？？？
エラーログをひとまず眺めてみる

error /home/komura/develop/little-village/src/node_modules/deasync: Command failed.
Exit code: 1
Command: node ./build.js
Arguments: 
Directory: /home/komura/develop/little-village/src/node_modules/deasync

～～～中略～～～

gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
make: Entering directory '/home/komura/develop/little-village/src/node_modules/deasync/build'
  CXX(target) Release/obj.target/deasync/src/deasync.o
make: g++: Command not found
make: *** [deasync.target.mk:111: Release/obj.target/deasync/src/deasync.o] Error 127
make: Leaving directory '/home/komura/develop/little-village/src/node_modules/deasync/build'
gyp ERR! build error

ははーーーん？？？
どうやら[g++]を使用したいけどないよーっていう話っぽい？？？

g++をインストールして再度yarn install

参考：【Ubuntu】 "make: g++: Command not found"と出た場合はg++をインストールで解消。
参考サイトの通り下記を実行

sudo apt-get install build-essential g++
yarn install

おぉおーーーー！！！通った！！！！
ばんじゃーーーい！！！ばんじゃーーーい！！！

動作確認

後は下記を実行して動作確認！！！ｯﾀｰﾝ!!!

# 画像だとnpm run devでやっちゃってるけど、yarnで慣れたほうが良い
yarn run dev

情報収集するけどいい？って聞かれる。
うっせーはよ作らせろ！（いつもお世話になっております。協力します）

お！！！！！
やったーーーー！！！！とおった！！！！！
疲れたーーー！！！！

おわりに

めっちゃ調べながらやったから5時間くらいかかったよ！！！！
まだnuxt.jsの設定やらGitHubとHerokuへのPushが残ってるけどもうむり！！！！
続きはまた次回にします！！！
ばたんきゅーーー！ちゃおーーー！！！