Nuxt.js知識ゼロから仕事しながら1ヶ月でそこそこ規模案件の構築をできるようになるまで

# TL;DR
去年春、Nuxt.jsを~~いまさらかってかんじで~~勉強しました。
ゼロから勉強してそこそこ規模案件の開発を回せるようになったので、
今回その道筋を載せることにしました。

そこそこ規模=ECサイトのUI構築でした。

大体学習開始して1ヶ月でそこそこ実戦に使える知識になったかと思います。
再利用価値あるかなと思ったので公開いたします。

※勉強の道筋だけ書いているので、勉強の内容はすっ飛ばしてるor別記事になっています。
※リンクしてる記事は色々落ち着いてから書いたので学習当初とタイムラグがあります。
※あくまで個人の体験談なので、それ違う！！とか言われてもわしゃ知らん。

# 本題
## 筆者のスキル
- フロントエンド（html/js/css）5年
    - うちブランク2年くらいあり
- バックエンド（PHP）少々
- 大型案件のUI実装経験あり（~~ただしjQuery~~）
- そけつごーとかおぶじぇくとしこーとかはそれなりわかってるつもりです

## 勉強した内容
- vue.js/Nuxt.js
    - アーキテクチャ
    - Atomic Design
    - Nuxt.js基本
    - Vuex
    - Typescript（核心までは学べていない）
- ツール・プラグインなど
    - Storybook
    - Prism / OpenAPI / Swagger
    - Axio / Auth
    - Jest

## 勉強の道筋
### 基本のアーキテクチャについて調べる
そこそこ規模の大きい案件を進めるにあたって、
**中途半端なアーキテクチャだと後々詰む**ので
まずはアーキテクチャについて調べました。

調べるときのワードは「**Vue.js 大規模**」など。
そうすると、規模大きめ案件のVueのTipsがでてきます。

- ディレクトリ構造
- 使用しているモジュール

について重点的に見ていくと、
要件に合わせた必要なモジュールやツールが見えて来ました。

このタイミングでVuex、Axios、OpenAPI Generatorなど、
なんとなく**単語だけでも**覚えておきます。
また、Storybookは元々知っていましたが、
Nuxtにも対応していることを知りました。

### 公式に近いそれなり規模サンプルコードを調べる

今回Vue/Nuxtについてほぼ知識ゼロのところから進めたため、
記法についての知識が全くありませんでした。
(なんとなく、テンプレートをコンポーネントごとに用意する、
処理系やcssをscopedの状態で同じファイルに書く、という知識はありました)

なので、
**公式になるべく近く、かつ実案件に応用できる**、
それなりの規模のサンプルコードを調べました。
今回はVueFesというコミュニティが、
日本国内で規模の大きいコミュニティであり、
なおかつ実用的な規模のサンプルコードを公開していたのでそれを参考にしました。
(めっっっっちゃありがたい)

https://github.com/vuejs-jp/vuefes-2019

わからないなりになんとなくディレクトリを眺め、
package．jsonを眺め、
へぇーこんなモジュール使ってんだなぁ〜を軽く見ます。

わからない単語やモジュールはこの時点でググってわかった気になっておくことで、
後工程が楽になります。
(ここでTypescript使った方がいいよなーとなる)

### Nuxt本体、Storybook本体の導入方法を調べる

このタイミングでやっとNuxt本体について調べました。
巷のブログや[公式ドキュメント](https://nuxtjs.org/ja/docs/get-started/installation)を見ながら、
とりあえずHello Worldまでできるようにします。

configファイルの書き方についても、Vuefesを参考にヨチヨチしました。
(とはいえnpxの時に大体のことしてくれるけど)

Nuxt本体だけだとコンポーネント開発がめんどくさいので、Storybookも導入しました。

https://qiita.com/rockinruuula1227/items/1d4ef6e928525a81356e

この時はStorybookのインストールで結構つまづきました。
CSSが読めなかったり、モジュールがないと怒られたりラジバンダリ。
心折れかけてたところでnuxt-storybookの存在を知り救われるなど。

### Nuxtでログイン・ログアウト機能を実装する
Authを利用して実装。

Swaggerドキュメントをいただいていたので、
そこからPrismのモックサーバーを立ててAPIの向き先をモック設定にしました。
このタイミングでOpen API Generatorの使い方も学習しました。

https://qiita.com/rockinruuula1227/items/4f20991c83751a3fe2ce

吐き出されたソースを見て、なんとなく
ふーんこんなふうに使うのかなー？を理解しました。

### コンポーネントを実装する

やっとコンポーネント実装に入ります。
最初は素のhtmlでいけるような複雑度の低いコンポーネントから実装し、
Storybookに反映します。
このタイミングでAtomic Designをざっくり勉強。

コンポーネントを実装していく上で、以下の実装を学習しました。

- データバインド、イベント
- scssのValiablesの呼び出し
- アコーディオンやタブなどのよくあるパーツの実装

まずはドキュメントを流し読み（理解しなくて良い）
表層的な実装を野良ブログなどで勉強してから、
改めてドキュメントを読み直すことで、
仕様についてより深く勉強できたかと思います。

ひとまずはtsではなく通常のjsで書いて、
ある程度デフォルトの構文に慣れてからtsに書き換えていくという手法で進めました。

ある程度複雑なコンポーネントの実装にはいった段階で
Vuexについて学びました。
Vuexについては表層的な実装の理解はできましたが、
もっと良い実装方法や設計手法について考察・勉強すべきだったなーと反省。

### API周りの実装
headerにbearer tokenをつける必要があったのですが、
openapi generatorだとそれが出来なくて四苦八苦しました
インターフェースだけありがたくopenapi generatorの吐き出しソースを使って、
API通信そのものはaxiosを拡張したもので対応したんですがこれでよかったのだろうかと思わなくもない。

### プラグインの実装
ある程度コンポーネントやストアが揃ってきたところでヘルパーの実装をしました。

### Jestを書く
**本来ならばコンポーネントを書くと同時に書くべき。
最後に回して超絶後悔しました。**

JestおよびVue test utilの公式ドキュメントの情報で難なくかけました。
ノリ的にはjQueryのノリなので難易度的には低かったです。
カービィのスターを集める感覚でカバレッジのパーセンテージ増やすの地味に楽しい。

# まとめ
## というわけで
そんなかんじでした。まる。
なんだかんだでだいーーーぶまえに無事リリースです。

## いまだによくわかってない
ナクスト？
ヌクスト？?

発音記号は間違いなくaとu混じってるやつだと思ってる。