# 今回プロジェクトに採用する技術など

## Vue3の現状など
- 結論として今Vue3をそのまま開発プロジェクトで採用するのは茨の道
- 色々見ても、まだ動作お試しレベルの情報しかない。
- `$ vue add vue-next` でVue3β版にアップデートできるが、周辺ライブラリは鋭意対応中といった感じで、vuex, routerはまだアルファ版
- そもそも`$ vue create``$vue add vue-next`の流れでコンパイルができない。正しくはどうしたらいい?の公式アナウンスもない感じ。
- ネット上にはd.tsを書き換えるとかリスキーなことを言ってる人がいるが、仮にそれで動いたとしても絶賛開発中なので仕様は大いに変わる可能性があり、まだまだ人柱感が凄い。

## どうするか？
- 結論。一旦2系で、compositionAPI導入。tsは使う。
> 静的な型システムは、アプリケーションの成長に伴って発生する多くの潜在的なランタイムエラーを防ぐのに役立ちます。これは、Vue で TypeScript を使用するために追加のツールを必要としないことを意味します。
https://v3.vuejs.org/guide/typescript-support.html#official-declaration-in-npm-packages

と公式にもあるので、Vue3は公式にtsサポートするし、サードパーティ製のライブラリに頼らなくてもts導入できるならということで、今後更に Vue * ts のシチュエーションは増えていきそうな予感。(そのためのcompositionAPIという意味合いもありそう)

- ちなみにvue * typescriptではclassAPI、Decoratorなどを使った書き方もあるが、vue３ではclassAPIの採用は却下されている
https://github.com/vuejs/rfcs/pull/17

- クラス構文を用いずにTS対応させたい場合、ピュアなVueライク(computed, method等)に書けるVue.extendがあるので、一旦これでいきたい。
- ピュアVueからcompositionAPIへの書き換えの記事は散見できるので、強い人達の知見をお借りして余力があればcompositionAPIを使って書いてみるスタイルが良さそう。
- もしもts辛い、となった場合<script lang="ts"></script>ではなく通常のjsで書いてもOKです。

## Vuex
ここらへん参考にしてます。
https://qiita.com/yam0918/items/68d4d6c74b06d589a195
- firestoreのコレクション単位でモジュール切っていくスタイルが良いかなと思ってます。
- store/blocksStore.tsがリポジトリに上がってるので、テンプレ的にこれをコピって使用してもらえば問題なさそうです。
- firestoreのデータ更新関連のメソッドはactionsにどんどん定義していけば良いかなと思ってます。

## 他今回参考にした資料等
https://github.com/vuejs/composition-api#user-content-typescript-support
https://engineering.linecorp.com/ja/blog/vue-js-typescript-otoshidama/
https://spice-z.com/20200511/
https://ryokatsu.dev/2020/0206/

## 備考
### project作成時、vue createのオプション
Check the features needed for your project:
- Babel
- TypeScript
- Router
- Vuex
- Css Pre-processer
- Linter / Formatter
- Unit Testing

Use class-style component syntax?
- no

Use Babel alongside TypeScript
- yes

Use history mode for router?
- yes

Pick as CSS pre-processor
- Sass/SCSS

Pick a linter / formatter config
- ESLint + Prettier

Pick additional lint features
- Lint on save

Pick a unit testing solution
- Jest

Where do you prefer placing config for Babel, ESLint, etc.?
- In dedicated config files

## 追加した主要なライブラリ
- vuexfire
- dotenv
- firebase
- normalize.css
- bootstrap-vue