お題
前回までで、ユーザ情報を扱うWebAPIサーバをGoで実装し、ローカルではMySQL、GAEデプロイしたらCloud SQLに接続できるようにした。
このままWebAPIの機能充実、及び、GAEとの絡みを実装していてもいいのだけど、そろそろフロントと絡めた実装も試してみたい。
というわけで、（フロント側の技術選定にもいろんな基準があるのだけど、諸事情により）Vue.js／Nuxt.jsを選定。
（だって、公式の日本語ドキュメント充実してるのだもの・・・）
今回は、単に「create-nuxt-app」ツールによるプロジェクト生成とディレクトリ構造の理解のみを目指す。
参考
そもそも、Vue.jsとは？
https://jp.vuejs.org/v2/guide/
そして、Nuxt.jsとは？
https://ja.nuxtjs.org/guide/
GAE試行Index
- GAE/Go1.11試行（その４：「CloudSQL接続方法」）
- GAE/Go1.11試行（その３：「GoでMVC+S構成のWebAPIを作る」）
- GAE/Go1.11試行（その2：「"google.golang.org/appengine"パッケージのappengineから取れる情報」）
- GAE/Go1.11試行（その1：「クイックスタート」）
- GAE/Go1.9試行（その0：「クイックスタート」）
開発環境
# 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プロジェクト生成
公式のプロジェクト生成手順に則り、各フェーズの選択は若干思いつきでプロジェクト生成完了。
$ 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のバージョンが古いのか？ それとも別の問題か？
あ、でも、サーバ起動はしている様子？
一応、ブラウザで開いてみよう。
まあ、ダメだよねぇ。
Vue.jsにしてもNuxt.jsにしても、まだ何も覚えていないのだけど、出だしから躓くとは・・・。
エラー原因調査
prettier とやらに怒られている？
prettierが何かというと、「保存時にコードをチェックするため」のもの「コードフォーマッター」らしい。
この時点では諦めたけど、後日、別記事でプロジェクト生成時、同じ事象にぶつかり、今度は解消。
「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 │
│ │
╰─────────────────────────────────────────╯
通ってしまった・・・。
画面も開くか？
今度はエラー出てないね。
まったく原因調査になってないけど、主目的はある程度、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
公式に記載のディレクトリ構造を元に理解。
以下、公式ドキュメントの参照リンクとともに、気になった点のみ記載。
■ 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
- 静的ファイル置き場
■ store
参照：https://ja.nuxtjs.org/guide/vuex-store
- 状態を管理するVuexストアのファイル置き場
まとめ
出だしから躓いたこともあり、ディレクトリ構造の理解も表面をさらっただけになった・・・。というか、最後は単に力尽きただけ。
やはり、実際に動くものを作ろうとしながら、つどつどドキュメントを見ていく方が理解が進むのだろうな。
次回は、Goで作ったWebAPIを呼び出すコードと画面を作っていく過程で、実際に動くものを作る際、何が必要で何にハマるのか見ていきたい。