## 防災関連アプリのフロント開発
### 目的、背景
主に管理画面のCRUD画面開発をするフロントエンドエンジニアとして2022年7月より参画（〜2024年1月）。
### 規模感、チーム構成
- フロントエンドエンジニア：1〜3人
- 参画時は3人。その後開発が落ち着いてきた後は、私がフロント担当になった
- バックエンドエンジニア：3〜7人（時期により変動）
### 使用技術や開発環境等
- Vue3(Composition API)
- TypeScript
- TailwindCSS
- urql
- Storybook
- CodeceptJS：E2Eテストフレームワーク
- Vite
- Vue Test Utils：コンポーネントのテストに使用
- Git, Github, Github Actions
### 担当した役割
#### 管理画面開発（後半では新規メニューの画面設計も少し）
- 一覧・詳細・登録・編集画面の実装。以下のライブラリ等を主に使用していた。
- Vue Router：ルーティング、画面遷移に使用
- VeeValidate：バリデーションに使用
- Pinia：状態管理に使用
- TailwindCSS：スタイリング
- OAuthのフロント側の実装を少し
- LINEとGoogleでのログイン
- Storybookを用いたコンポーネントのカタログ作成
課題・問題点1
大体のコンポーネントの使い方は、実装箇所のコードを見ればなんとなく分かった。しかし、いくつか使い方がわからないものあり、`Storybook`を充実させることになった。
- 渡す値を変えた色々なパターンのストーリーを作成した
- コンポーネントの設計書も作成し、`Storybook`で見れるようにした
- 設計書の内容：渡す値の型情報や取りうる値・許容値、コピペでもほぼそのまま使えるVueのサンプルコード等
↓
私がいる間に新たなフロントエンドエンジニアは入ってこなかったが、設計書追加のおかげで使い方が以前と比べてとても理解しやすくなったと思う。
課題・問題点2
PC用のデザインしか実装していなかったため、スマホやタブレットに最適化されておらず、使いづらい問題があった。レスポンシブにしたい。
↓
使用していた`TailwindCSS`でレスポンシブデザインに対応できるとのことで、スマホ・タブレット・PCの3種類のデバイスで閲覧しても使いづらくないようなデザインに修正した。
#### テスト作成（E2E, コンポーネント）
- E2E
- CodeceptJS：E2Eテストフレームワーク
- コンポーネントのテスト
- Vue Test Utils：Vue公式の単体テストライブラリ。コンポーネントのテストに使用
- Jest：テストランナーとして使用
課題・問題点
品質を高めるためにテストを充実させたいとの要望もあり、コンポーネントのテストを作成することになった。そして、私単独での実装を担当した。
Vue公式ということでドキュメントもしっかりしていたので、`Vue Test Utils`を使用することにした。またBEアプリで`Jest`を使用している実績があったため、テストランナーとして`Jest`を使用することにした。
`Vue Test Utils`や`Jest`を使ったことはなかったため、テストコードの作成が特に大変だった。分からないところは「とにかく公式ドキュメントを読み、テストコードを書き、テストを実行してみる」を繰り返してました。そうすること徐々に書けるようにもなり、1ヶ月ほど掛かってしまったがレビューが終わりマージされた時は達成感がすごかった。
↓
分からない時は、公式ドキュメントを読んだり、guthubのissueに同じような問題がないかを探すようになった。
google翻訳やdeepLのおかげもあり、英語への抵抗が以前より減った。
#### フロント関連のPRレビュー
- フロント担当のエンジニア同士でレビュー依頼を出し、お互いにレビューしあった。
#### フロント側にもCI（Github Actions）を導入
- BE側ですでに実装されてたのを参考に実装
- 実行項目：`npm install`、リンター、コンポーネントのテスト、ビルド