Nuxt.js + VuetifyでHello World

合同会社kumanoteの田中です。

最近、Google Drive APIを使って、Google Driveのドキュメントの見える化をするツールを作りました。

[Nuxt.js](https://ja.nuxtjs.org/)と[FastAPI](https://fastapi.tiangolo.com/)（pythonのパフォーマンスが良いらしいweb framework）で作りました。
せっかくなので、作り方を公開することにしました。

- [ここ](https://kumano-te.com/series/develop-gdrive-manager-with-nuxtjs-and-fastapi)で連載しています。
- [github](https://github.com/kumanote/gdrive-manager)にも連載に合わせてソースコードをアップして行っています。


こちらにも、Nuxt.jsに[Vuetify](https://vuetifyjs.com/ja/)のプラグインを導入して、Hello worldをするところまで記載します。

ちなみに Vuetify は [Material Design](https://material.io/design) というGoogleが開発しているDesingを踏襲したフレームワークで、BootstrapのMaterial Design版みたいなイメージです。


# プロジェクトのディレクトリ構成

今回開発したアプリのディレクトリ構造は以下のようになります。

以下のような感じになります。

```
gdrive-manager
├── client
│   ├── README.md
│   ├── assets
│   ├── components
│   ├── layouts
│   ├── nuxt.config.js
│   ├── package.json
│   ├── pages
│   ├── plugins
│   ├── static
│   └── store
└── server
    ├── README.md
    ├── alembic
    ├── alembic.ini
    ├── app
    │   └── api
    │       └── v1
    │           └── endpoints
    └── pyproject.toml
```

- 一番topのディレクトリ（gdrive-manager）の下に client と server のディレクトリを作成します。
    - clientディレクトリの中には Nuxt.js のアプリ関係のファイルを配置します。
    - serverディレクトリの中には FastAPI のアプリ関係のファイルを配置します。
        - serverディレクトリの中にはもっと多くのディレクトリができますが、今回は省略しています。

# 事前準備

## まえがき

- 私はMac OSX Catalinaで作業しています。WindowsやLinuxユーザーの方はコマンドを適時読み替えてください。

## nodejs/yarnのインストール

### おすすめのインストール方法

私は [nodenv](https://github.com/nodenv/nodenv) というツールをお勧めします。
nodenvというのは、nodejsのバージョンをディレクトリ毎に管理するのに適しています。

例えば、Aというプロジェクトでは、v10をBというプロジェクトでv12のnodejsを使っているとします。そうすると、PCにv10をインストールしてしまうと、プロジェクトBの作業をしたい時に、v10をアンインストールしてv12をインストールするような作業が発生してしまいます。
なので、v10とv12を別々のディレクトリにインストールして、PATH環境変数を書き直すような作業をするのが一般的なのですが・・それをツール化したものが nodenv となります。

この nodenv は nodejs の管理ツールなのですが、他にも pyenv (python用)やrbenv (ruby用)など
様々な言語に対応するツールが出ています。その XXenvを管理することができる [anyenv](https://github.com/anyenv/anyenv) というツールがあるので、筆者はこちらも使っています。
anyenvを使うと、nodenvやpyenvなどのツールをanyenvのコマンドを使ってインストールすることができるようになります。

また、nodenvで、nodeの特定のバージョンをインストールすると、勝手にyarn（nodejsのパッケージマネージャー）をインストールしてくれる[nodenv-yarn-install](https://github.com/pine/nodenv-yarn-install)というツールもあり、こちらもとても便利で使っています。

まとめると以下のような感じになります。

1. nodenvをインストール（管理する）ために anyenv をインストールする
2. anyenvを使って、nodenvをインストールする
3. nodenv-yarn-installをインストールする
4. nodenvを使って、特定のnodejsのバージョンをインストールする
5. nodenvを使って、本プロジェクトのnodejsのバージョンを固定化する

本稿の主旨とは外れるので、それぞれのツールのインストール方法割愛させていただきます。
基本的にはgithubのReadmeに書かれている内容に沿ってインストールしてください。


### nodejsのインストール

nodejsをインストールしてください。私はv13.12というバージョンをインストールしました。
動作確認はしていないですが、多少バージョンが前後しても動作すると思います。

おすすめのインストールではなくても[Node.js 本家のサイト](https://nodejs.org/ja/download/)からも、もちろんインストール可能です。

```
% node -v
v13.12.0
```

### yarnのインストール

おすすめのインストールではなくても[こちらのサイト](https://classic.yarnpkg.com/ja/docs/install/)からも、もちろんインストール可能です。

```
% yarn -v
1.22.4
```

# Hello world

まえおきが長くなりましたが、早速Nuxt.jsアプリの開発にとりかかりましょう。

## TOPディレクトリの作成

まずはプロジェクトのtopのディレクトリを作成します。"gdrive-manager" という名前で作成します。（名前はなんでも大丈夫です。）

```
% mkdir gdrive-manager
```

## アプリの雛形を作成

次にTOPディレクトリに移動して、Nuxt.jsのアプリを作成するコマンドを実行します。

```
% cd gdrive-manager
% yarn create nuxt-app client
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-nuxt-app@2.15.0" with binaries:
      - create-nuxt-app
[###################################################################################################################################################] 339/339
create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in client
? Project name gdrive-manager-client
? Project description gdrive-manager nuxt.js based client app 
? Author name Hiroki Tanaka
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework Vuetify.js
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools ESLint, Prettier, Lint staged files, StyleLint
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools Semantic Pull Requests
yarn run v1.22.4
$ eslint --ext .js,.vue --ignore-path .gitignore . --fix
✨  Done in 1.90s.

🎉  Successfully created project gdrive-manager-client

  To get started:

	cd client
	yarn dev

  To build & start for production:

	cd client
	yarn build
	yarn start

✨  Done in 152.84s.
```

実行後にいくつか選択肢に答える箇所が出てくるので、以下のように選択しましょう。

| 項目名 | 選択する内容 | メモ |
| --- | --- | ---|
| Project name | gdrive-manager-client | Nuxt.jsアプリの名前、適当でOK |
| Project description | gdrive-manager nuxt.js based client app | Nuxt.jsアプリの詳細、適当でOK |
| Author name | Hiroki Tanaka | 制作者の名前、適当でOK |
| programming language | JavaScript | TypeScriptというのも選べるけれど、難しいので、JavaScriptにしました |
| the package manager | Yarn | |
| UI framework | Vuetify.js | Material Designベースのフレームワークです。かなりオススメ |
| custom server framework | None (Recommended) | |
| Nuxt.js modules　| Axios, Progressive Web App (PWA) Support, DotEnv | スペースキーを使って全部選択 |
| linting tools | ESLint, Prettier, Lint staged files, StyleLint | スペースキーを使って全部選択 |
| test framework | None | Unit Testは今回使わないです |
| rendering mode | Universal (SSR) | Server Side Renderingを指定しましょう |
| development tools | Semantic Pull Requests | 任意です。選んでおくと、gitのコメントに気をつけるようになります。 |


これを実行すると、TOPディレクトリに下に client というディレクトリが作成され
その配下に、Nuxt.jsのテンプレートプロジェクトのファイルが自動で出来上がります。

## 初回起動

これでもうNuxt.jsアプリを起動する準備が整ってしまいました。

作成した client ディレクトリに入って、以下を実行してみましょう。

```
% yarn run dev
yarn run v1.22.4
$ nuxt

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.12.2                           │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯
```

実行すると、 [http://localhost:3000/](http://localhost:3000/) で起動している旨のメッセージが出ますので、
ブラウザを使って、[http://localhost:3000/](http://localhost:3000/)にアクセスしてみましょう。

次のような画面が見えれば成功です。

![97b0876e9ca711ea9ad24201c0a80102_hello-world-min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188896/3a14cd65-ca09-29ad-4f50-566e13bd3795.png)


以上です。