Nuxt.js × Vuetify × FirebaseでWEBアプリ作成②

# はじめに
この記事は、この記事は、Nuxt.js, Vuetify, Firebaseを使用し、勤怠管理・出勤集約を行うWEBアプリを作成した過程を記録したものです。

今回は、Nuxt.jsにおけるプロジェクトの作成についてまとめていきたいと思います。

# 開発環境

* OS: Windows 10 Pro
* エディター: Visual Studio Code (VS Code)
* 実行環境: Node.js (v 16.13.1)
* パッケージ管理ツール: Yarn (v 1.22.15)

# 準備
さぁ早速書くぞと言っても、初回はいろいろとインストールしたり設定したりが必要なのでそれについても記録しておきます。

## VS Codeのインストール
エディター自体は好みが分かれると思いますが、もともと複数のプログラミング言語を使用している人や拡張機能で便利に開発を行いたい人にはVS Codeがおすすめです。

https://code.visualstudio.com/download

上記ページから、インストーラをダウンロードし、インストーラの指示に沿ってインストールを進めてください。

※機会があれば別記事でインストールまでの説明もまとめたいと思います

### 拡張機能
以下は、いれておくといい拡張機能です。ほかのサイトや記事でもよく見かけるものがほとんどです

--- Vue.js, Nuxt.jsを使う上で ---

* [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
Vue.jsのコード補完などを行ってくれます。Vue.jsやそのフレームワークであるNuxt.jsを使用するならぜひ入れておきたい拡張機能です
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
JavaScript系の構文チェックを行ってくれるツールです
* [Prettier- Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
ルールに沿って自動整形してくれるコードフォーマッター

--- VS Codeを使用する上で ---
* [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
名前の通り、VS Codeを日本語化してくれる拡張機能
* [Material Icons Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
サイドバーのアイコンをより分かりやすくしてくれる拡張機能。一目で区別しやすくなります。

### 設定の変更
開発をするうえで、VS Codeの基本設定を変更しておくと便利です
VS Code左下の歯車アイコン > 設定から変更できます。

* `Files: Auto Save` = afterDelay (初期設定: off)
自動保存に関する設定。afterDelayにすると、`Files: Auto Save Delay`に設定されているミリ秒ごとに自動保存させることができます。
* `Editor: Word Wrap` = on (初期設定: off)
行の折り返し設定。行が長くなった場合に折り返すようにしています。

## 実行環境Node.jsのインストール
開発環境でJavaSciptを実行させるために必要な実行環境Node.jsをインストールします。

https://nodejs.org/ja/download/

※機会があれば別記事でインストールまでの説明もまとめたいと思います

インストール後にちゃんとできているかどうか、下記コマンドでバージョンを確認してみましょう
```powershell
node --version
```

## パッケージ管理ツールYarnのインストール
Javascriptのパッケージ管理ツールです。Node.jsに標準でnpmやnpxが導入されていますが、使い勝手がよいYarnが導入されていることが多いみたいです。

コマンドラインからインストールします。
```powershell
npm install -g yarn
```
※ -g コマンドを入れるとグローバルにインストールすることができ、プロジェクトごとにインストールしなくてよくなります

インストール後にちゃんとできているかどうか、下記コマンドでバージョンを確認してみましょう
```powershell
yarn --version
```

# プロジェクトの作成
さぁ、それではプロジェクトを作成していきましょう。
VS Codeのターミナルなどから下記コマンドを入力して進めます。
※`yarn`の部分は`npx`でも構いません

```powershell
yarn create-nuxt-app プロジェクト名
```

すると、いろいろと質問をされるのでプロジェクトにあった回答をしてください。
一応私の回答も載せておきます

```powershell
? Project name : canere
? Programming language : JavaScript
? Package manager : Yarn
? UI framework : Vuetify.js
? Nuxt.js modules : Axios / Progressive Web App
? Linting tools : ESLint / Prettier / Stylelint
? Testing framework : None
? Rendering mode : SPA (Single Page Application)
? Deployment target : Static
? Development tools : jsconfig.json
? Continuous integration : None
? Version control system : Git
```

## 各質問について
### Project name
プロジェクトの名前です。`create-nuxt-app`コマンドで入れたプロジェクト名がデフォルトで入っているので基本的にはそのままでOKです。

### Programming language
`JavaScript`か`TypeScript`かを選べます。今後のことも考えるとTypeScriptにして学びを深めたかったところですが、開発時は特に時間がなかったので、先人たちのサンプルコードの多さ、学習のしやすさも考慮してJavaScriptにしました。

### Package manager
`npm`か`Yarn`か選べます。

### UI framework
vue.jsに対応した様々なUIフレームワーク(CSSフレームワーク)から選べます。ここは好みです。
私は、Vuetifyを選びましたが、それは参考にしていたサイトがVuetifyだったからにすぎません。
いろいろと調べてみて、自分に合ったものを見つけるといいと思います。

### Nuxt.js modules
一緒にインストールしたいモジュールを選ぶことができます

* `Axios`: APIから情報を取得する上で必須
* `PWA`: Progressive Web Applicationの略。webページをスマートフォンアプリライクに使うことができるようにする仕組み。今回はスマートフォンでの使用を想定しているので選択しています。
* `Content`: Markdown形式でページを作成できるようにするモジュールです。ブログや記事とかに便利です。

### Linting tools
コード整形ツールを選びます。様々ありますが、基本的にはVS Codeの拡張機能でも入れた`ESLinter`と`Prettier`があれば十分だと思います。

### Testing framework
テストをするためのフレームワークです。よくJestを使っている人を見ます。開発時は、テストの学習までしていられなかったのでNoneにしています。

### Rendering mode
さっくり言うと、サーバー側でレンダリングするのかクライアント側でするのか選択します。
悩んだ時はとりあえずUniversalにしておきましょう。後から変更も可能です。

* `Universal (SSR / SSG)`
* `Single Page App`

### Deployment target
本番環境で、動的に表示するか静的に表示するかを選びます。

* `Server (Node.js hosting)`
* `Static (Static/JAMStack hosting)`

Rendering mode と Deployment targetについては下記サイトも参考になるかもしれません。

https://dev.ore-shika.com/post/nuxtjs-rendering-mode/

### Development tools
開発ツールを選択します。
選択肢にも書いてある通り、VS Codeを使用している場合は`jsconfig.json`でよさそうです。

### Version control system
バージョン管理の方法を選択します。バージョン管理するのなら`Git`を選択しておきましょう。

## インストール後
上記質問に答え終わると、自動的に必要なものをインストールしてくれます。
その後は、作成したプロジェクトフォルダをVS Codeで開き、ターミナルに下記コマンドを入力してみましょう。
```powershell
yarn dev -o
```
コマンド入力後にデプロイが開始されます。完了するとブラウザが起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2453441/3eb0fe3e-0a3b-dd60-4556-476148ab1ca7.png)

うまくサンプルページが開けば成功です。

# (備考) Githubリポジトリへの保存
## Githubリポジトリの作成
まずは、プロジェクトのリポジトリを新規作成します。

Repository name と Descriptionを入力します。

その後リポジトリの種類(Public/Private)を選択します。公開したくないのならPrivateにしておきましょう。

他の項目については、後で変更もできますし、`create-nuxt-app`コマンドですでに作成されているものもあるので、基本スルーして Create repository しましょう。

## ローカルリポジトリの操作
下記コマンドを使用してローカルリポジトリ(Git)に変更結果を記録しましょう

```powershell
git init #Gitリポジトリを新たに作成するコマンド(すでにされているが一応)
git add . #カレントディレクトリすべてをローカルリポジトリに追加します
git commit -m "first commit" #ローカルリポジトリに変更結果を記録
```

## リモートリポジトリ(Github)への反映
初回はまず、リモートリポジトリの情報を追加する必要があります。
```powershell
git remote add origin リモートリポジトリのアドレス
```
ここでいう、リモートリポジトリのアドレスは先ほど作成したGithubリポジトリのページに表示されているアドレスです。

ローカルリポジトリの変更をリモートリポジトリへ反映させるには以下のコマンドを入力してください。
```powershell
git push origin master
```

## Githubまとめ
基本的には上記の操作を繰り返し行っていく形です。ブランチなどの説明は下記サイトをご覧ください。

https://techacademy.jp/magazine/6235#ta-toc-4

# 次回記事について
次回は、さっそく作成した中身に触れていきます。実装初回は、Firebaseの導入について説明していきたいと思います。

# 参考にしたページ

https://nuxtjs.org/

https://zenn.dev/silloi/articles/f6d9fd9726ae2fc5aea7

https://qiita.com/newt0/items/aeddc6a179ea3a464ed5

https://cly7796.net/blog/javascript/install-nuxt-js-with-create-nuxt-app/