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がおすすめです。

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

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

拡張機能

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

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

• Vetur
  Vue.jsのコード補完などを行ってくれます。Vue.jsやそのフレームワークであるNuxt.jsを使用するならぜひ入れておきたい拡張機能です
• ESLint
  JavaScript系の構文チェックを行ってくれるツールです
• Prettier- Code formatter
  ルールに沿って自動整形してくれるコードフォーマッター

--- VS Codeを使用する上で ---

• Japanese Language Pack for Visual Studio Code
  名前の通り、VS Codeを日本語化してくれる拡張機能
• Material Icons 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をインストールします。

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

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

node --version

パッケージ管理ツールYarnのインストール

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

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

npm install -g yarn

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

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

yarn --version

プロジェクトの作成

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

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

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

? 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については下記サイトも参考になるかもしれません。

Development tools

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

Version control system

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

インストール後

上記質問に答え終わると、自動的に必要なものをインストールしてくれます。
その後は、作成したプロジェクトフォルダをVS Codeで開き、ターミナルに下記コマンドを入力してみましょう。

yarn dev -o

コマンド入力後にデプロイが開始されます。完了するとブラウザが起動します。

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

(備考) Githubリポジトリへの保存

Githubリポジトリの作成

まずは、プロジェクトのリポジトリを新規作成します。

Repository name と Descriptionを入力します。

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

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

ローカルリポジトリの操作

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

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

リモートリポジトリ(Github)への反映

初回はまず、リモートリポジトリの情報を追加する必要があります。

git remote add origin リモートリポジトリのアドレス

ここでいう、リモートリポジトリのアドレスは先ほど作成したGithubリポジトリのページに表示されているアドレスです。

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

git push origin master

Githubまとめ

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

次回記事について

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

参考にしたページ