GAE/Go1.11試行（その５：「いきなりNuxt.js（プロジェクト生成とディレクトリ構造理解）」）

# お題
[前回](https://qiita.com/sky0621/items/d91ffd1faf63dbf34e77)までで、ユーザ情報を扱うWebAPIサーバをGoで実装し、ローカルではMySQL、GAEデプロイしたらCloud SQLに接続できるようにした。
このままWebAPIの機能充実、及び、GAEとの絡みを実装していてもいいのだけど、そろそろフロントと絡めた実装も試してみたい。
というわけで、（フロント側の技術選定にもいろんな基準があるのだけど、諸事情により）[Vue.js](https://jp.vuejs.org/)／[Nuxt.js](https://ja.nuxtjs.org/)を選定。
（だって、公式の日本語ドキュメント充実してるのだもの・・・）

今回は、単に「[create-nuxt-app](https://ja.nuxtjs.org/guide/installation/)」ツールによるプロジェクト生成とディレクトリ構造の理解のみを目指す。

## 参考

そもそも、Vue.jsとは？
https://jp.vuejs.org/v2/guide/

そして、Nuxt.jsとは？
https://ja.nuxtjs.org/guide/

# GAE試行Index
- [GAE/Go1.11試行（その４：「CloudSQL接続方法」）](https://qiita.com/sky0621/items/d91ffd1faf63dbf34e77)
- [GAE/Go1.11試行（その３：「GoでMVC+S構成のWebAPIを作る」）](https://qiita.com/sky0621/items/c7b196a1ba0e126cc3f5)
- [GAE/Go1.11試行（その2：「"google.golang.org/appengine"パッケージのappengineから取れる情報」）](https://qiita.com/sky0621/items/0e0a119f9fefc40e2953)
- [GAE/Go1.11試行（その1：「クイックスタート」）](https://qiita.com/sky0621/items/8a42ee24cb417940228c)
- [GAE/Go1.9試行（その0：「クイックスタート」）](https://qiita.com/sky0621/items/6d5541e5fa7d2ac349e7)

# 開発環境
### # OS
```
$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="17.10 (Artful Aardvark)"
```

### # Node.js
```
$ node -v
v8.11.3
```

### # npm
```
$ npm -v
6.2.0
```

# 実践

## Nuxtプロジェクト生成

[公式のプロジェクト生成手順](https://ja.nuxtjs.org/guide/installation)に則り、各フェーズの選択は若干思いつきでプロジェクト生成完了。

```
$ npx create-nuxt-app myproj
npx: 402個のパッケージを14.441秒でインストールしました。
> Generating Nuxt.js project in /work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj
? Project name myproj
? Project description My world-class Nuxt.js project
? Use a custom server framework none
? Use a custom UI framework vuetify
? Choose rendering mode Single Page App
? Use axios module yes
? Use eslint yes
? Use prettier yes
? Author name sky0621
? Choose a package manager npm
Initialized empty Git repository in /work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj/.git/
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.

> nodemon@1.18.7 postinstall /work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> nuxt@2.3.4 postinstall /work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj/node_modules/nuxt
> opencollective || exit 0

                                                             
                                     :=.                     
                                    -=+=:   :-               
                                  .-=+++=: :++=.             
                                 .-+++++++=++++=.            
                                .=+++++++****++++.           
                               :=+++++++******++*+:          
                              :=+++++++********++*+:         
                             :=+++++++**********++*+-        
                            -=+++++++*************+*+-.      
                          .-=======+**************++++=.     
                          .........::::::::::::::::::::.     
                                         
                         Thanks for installing nuxtjs 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                           Number of contributors: 156
                              Number of backers: 137
                            Annual budget: US$ 31,696
                            Current balance: US$ 7,638
                                         
           👉  Donate: https://opencollective.com/nuxtjs/donate
                                         
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN eslint-plugin-vue@4.7.1 requires a peer of eslint@^3.18.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN acorn-jsx@5.0.1 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1079 packages from 541 contributors and audited 15016 packages in 29.162s
found 0 vulnerabilities


  To get started:

    cd myproj
    npm run dev

  To build & start for production:

    cd myproj
    npm run build
    npm start
```

## ローカル起動

```
$ cd myproj/
$ npm run dev

> myproj@1.0.0 dev /work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj
> nuxt

ℹ Preparing project for development                                                                                                                                                              00:11:17
ℹ Initial build may take a while                                                                                                                                                                 00:11:17
✔ Builder initialized                                                                                                                                                                            00:11:17
✔ Nuxt files generated                                                                                                                                                                           00:11:17

✖ Client
  Compiled with some errors in 11.60s


 ERROR  Failed to compile with 1 errors                                                                                                                                          friendly-errors 00:11:29


 ERROR  in ./layouts/default.vue                                                                                                                                                 friendly-errors 00:11:29

Module Error (from ./node_modules/eslint-loader/index.js):                                                                                                                       friendly-errors 00:11:29

/work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj/layouts/default.vue
   89:1  error  Delete `··`                           prettier/prettier
   90:3  error  Delete `··`                           prettier/prettier
   91:1  error  Replace `······` with `····`          prettier/prettier
   92:1  error  Delete `··`                           prettier/prettier
   93:1  error  Replace `········` with `······`      prettier/prettier
   94:1  error  Delete `··`                           prettier/prettier
   95:1  error  Replace `········` with `······`      prettier/prettier
   96:1  error  Delete `··`                           prettier/prettier
   97:1  error  Replace `··········` with `········`  prettier/prettier
   98:7  error  Delete `··`                           prettier/prettier
   99:1  error  Delete `··`                           prettier/prettier
  100:7  error  Delete `··`                           prettier/prettier
  101:1  error  Delete `··`                           prettier/prettier
  102:7  error  Delete `··`                           prettier/prettier
  103:5  error  Delete `··`                           prettier/prettier
  104:1  error  Replace `····` with `··`              prettier/prettier
  105:1  error  Delete `··`                           prettier/prettier

✖ 17 problems (17 errors, 0 warnings)
  17 errors and 0 warnings potentially fixable with the `--fix` option.

                                                                                                                                                                                 friendly-errors 00:11:29
 @ ./.nuxt/App.js 4:0-47 6:14-23
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                                                 friendly-errors 00:11:29
ℹ Waiting for file changes                                                                                                                                                                       00:11:29

   ╭─────────────────────────────────────────╮
   │                                         │
   │   Nuxt.js v2.3.4                        │
   │   Running in development mode (spa)     │
   │   Memory usage: 236 MB (RSS: 359 MB)    │
   │                                         │
   │   Listening on: http://localhost:3000   │
   │                                         │
   ╰─────────────────────────────────────────╯
```

エラー出てるよ・・・。
公式の通りにプロジェクト作ってみただけなのに・・・。
Ubuntuがダメなのか？　npmのバージョンが古いのか？　それとも別の問題か？
あ、でも、サーバ起動はしている様子？
一応、ブラウザで開いてみよう。

![p001.png](https://qiita-image-store.s3.amazonaws.com/0/180599/4aa758d3-fd56-9e9b-f0e6-97cd0e6cdbb6.png)

まあ、ダメだよねぇ。
Vue.jsにしてもNuxt.jsにしても、まだ何も覚えていないのだけど、出だしから躓くとは・・・。

## エラー原因調査

`prettier` とやらに怒られている？
[prettier](https://prettier.io/)が何かというと、~~「保存時にコードをチェックするため」のもの~~「コードフォーマッター」らしい。

:point_up: この時点では諦めたけど、後日、[別記事](https://qiita.com/sky0621/items/2deb95a94bd4a6bd4d72#問題解消)でプロジェクト生成時、同じ事象にぶつかり、今度は解消。
:point_up: 「`yarn run lint --fix`」が必要だったらしい。

試しに、`prettier` を外してプロジェクトを再生成してみるか。

```
$ npm run dev

> myproj@1.0.0 dev /work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj
> nuxt

ℹ Preparing project for development                                                                                                                                                              00:32:09
ℹ Initial build may take a while                                                                                                                                                                 00:32:09
✔ Builder initialized                                                                                                                                                                            00:32:09
✔ Nuxt files generated                                                                                                                                                                           00:32:09

✔ Client
  Compiled successfully in 11.08s

ℹ Waiting for file changes                                                                                                                                                                       00:32:21

   ╭─────────────────────────────────────────╮
   │                                         │
   │   Nuxt.js v2.3.4                        │
   │   Running in development mode (spa)     │
   │   Memory usage: 208 MB (RSS: 352 MB)    │
   │                                         │
   │   Listening on: http://localhost:3000   │
   │                                         │
   ╰─────────────────────────────────────────╯
```

通ってしまった・・・。
画面も開くか？

![p002.png](https://qiita-image-store.s3.amazonaws.com/0/180599/98eb399f-1ba5-66c7-d4d8-9b43e854de68.png)

今度はエラー出てないね。
まったく原因調査になってないけど、主目的はある程度、Nuxt.jsがどんなものか知ることなので、とりあえず先に進もう。。。

## ディレクトリ構造の確認

画面が開いたのはいいとして、次は、どういう構造の上にこうなったかを知る必要がある。
なにしろフロントエンドフレームワークはビギナー同然なので。
プロジェクト生成して試しに起動確認をした時点で、ディレクトリ構造は下記のようになっている。
（README.mdは除外）

```
$ pwd
/work/src/js/github.com/sky0621/go-webapi-for-gae-study/frontend/myproj
$ tree -L 2
.
├── assets
│   └── style
├── components
│   ├── Logo.vue
│   └── VuetifyLogo.vue
├── layouts
│   └── default.vue
├── middleware
├── node_modules
　　　　〜省略〜
├── nuxt.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── index.vue
│   └── inspire.vue
├── plugins
│   └── vuetify.js
├── static
│   ├── favicon.ico
│   └── v.png
└── store
```

公式に記載の[ディレクトリ構造](https://ja.nuxtjs.org/guide/directory-structure)を元に理解。
以下、公式ドキュメントの参照リンクとともに、気になった点のみ記載。

### ■ assets

参照：https://ja.nuxtjs.org/guide/assets

- いわゆる画像などのアセット置き場
- Webpackで扱うケースと扱わないケースがある。
- Webpackで扱うケースでは、設定により画像サイズに応じてBase64データURLによるインライン化とファイルのまま処理するかを選択可能

### ■ components

参照：https://jp.vuejs.org/v2/guide/components.html

- Vue.js のコンポーネントファイル置き場
- コンポーネントの data メソッドについては手を加えない。
- コンポーネントは再利用可能な Vue インスタンス
- コンポーネントの data オプションは関数でなければならない。

### ■ layouts

参照：https://ja.nuxtjs.org/guide/views#%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88

- アプリケーションのレイアウトファイル置き場
- layouts/error.vue ファイルを追加することでエラーページをカスタマイズできる。

### ■ middleware

参照：https://ja.nuxtjs.org/guide/routing#%E3%83%9F%E3%83%89%E3%83%AB%E3%82%A6%E3%82%A7%E3%82%A2

- アプリケーションのミドルウェア置き場
- レンダリング前に実行する関数を定義

### ■ pages

参照：https://ja.nuxtjs.org/guide/views

- アプリケーションのビュー及びルーティングファイル置き場
- HTML テンプレートを拡張するために、プロジェクトのルートディレクトリに app.html を作成する。

### ■ plugins

参照：https://ja.nuxtjs.org/guide/plugins

- ルートの Vue.js アプリケーションをインスタンス化する前に実行したい JavaScript プラグイン置き場

### ■ static

参照：https://ja.nuxtjs.org/guide/assets#webpack-%E3%81%A7%E6%89%B1%E3%82%8F%E3%81%AA%E3%81%84%E9%9D%99%E7%9A%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB

- 静的ファイル置き場

### ■ store

参照：https://ja.nuxtjs.org/guide/vuex-store

- 状態を管理する[Vuexストア](https://vuex.vuejs.org/)のファイル置き場

# まとめ
出だしから躓いたこともあり、ディレクトリ構造の理解も表面をさらっただけになった・・・。というか、最後は単に力尽きただけ。
やはり、実際に動くものを作ろうとしながら、つどつどドキュメントを見ていく方が理解が進むのだろうな。
次回は、Goで作ったWebAPIを呼び出すコードと画面を作っていく過程で、実際に動くものを作る際、何が必要で何にハマるのか見ていきたい。