この記事は ANDPAD Advent Calendar 2022 の 15日目の記事です。
soe-j です。 前回勢いで書いたので、2回目は落ち着いて書こうと思って投稿数日前。そんなもんですよね。
アンドパッドでは新卒採用を始めたこともあり、新たな挑戦の機会に立ち会うことが多くあります。 今回は、Vueをキャッチアップしたい！という声にお応えしてライトな研修を作ったので、これを一例としてご紹介したいと思います。 あくまで社内向けの研修のため公開していませんが、コンセプトや研修の組み立て方など参考にしていただけたら幸いです！
なぜ作ったか
そもそもVue公式にもチュートリアルはあるので、まずは「このチュートリアルで十分か？」「何か足りないか？」というところから考えていきました。 vuejs.org
一通り眺めてみたところ、あらゆるVueの使い方（変数の値がリアクティブにビューに反映される、フォームに入力した値が変数に反映される、etc...）が網羅されていました。 これさえあればVueの使い方が全部わかる！終了！という気持ちにもなります。
しかし、実際にプロダクションコードを書く際は、以下の点を意識していることに気づきました。
- 全てコンポーネントに書くわけではなく、役割を意識したロジック分解をする
- コンポーネントをどう分割するか、ドメインをどう昇華するか
- アプリケーション内における共通のモデルを設計する
- API呼出など非同期処理中の表現、またその状態をどうハンドリングするか
などなど。 これらの観点はプロダクト固有の部分も多く、一般的なチュートリアルでは限界があります。
一方で、これらの観点を既存コードを見ながら口頭で伝えるだけでは理解度を測ることは難しく、そのため達成感を得ることも難しいです。
加えて「なぜそのような構成にするのか」を体感してもらいたかったので、 「シンプルに作り始めて辛みが出たところを見直して完成形にする」という流れを考えました。
そんなわけで、何も気にせずガツガツ手を動かせるレポジトリも用意することにしました。
触れてほしいこと
Vue公式チュートリアルを踏破していることを前提に、それだけでは得られない前述の４点に触れてもらえるような課題を考え始めました。
- 全てコンポーネントに書くわけではなく、役割を意識したロジック分解をする
- コンポーネントをどう分割するか、ドメインをどう昇華するか
- アプリケーション内における共通のモデルを設計する
- API呼出など非同期処理中の表現、またその状態をどうハンドリングするか
上記を体感することに集中してもらうために、必要となるVueの機能や実装してほしい処理などを洗い出しました。
- APIリクエスト
- コンポーネント作成、コンポーネント間の連携（props, emit でコンポーネント間のやりとり）
- コンポーネント間で再利用可能なロジックの抽出（composables の活用）
- TypeScript を導入して、アプリケーション内における共通の型を作る
コンテンツ
上記の触れてほしい機能・実装を網羅するためには、簡単なリソース操作が適当だと考えました。 他のリソースとの兼ね合いがない操作であれば考えることが少なく、触れるべきことに集中できるはずです。 ここでは例として、操作するリソースを「顧客」とします。
テーマ「顧客ページを作る」として、以下のようなタスクを作成しました。 optional なものは、後から別のタスクとして実施することも可能としました。
- 表で顧客を表示
- ページを作成
GET /customersリクエストして、テーブルに表示- (optional) 取得中 loading 表示
- 顧客作成
- 作成フォームを表示
POST /customersリクエスト- (optional) 作成後一覧をリロード
- 詳細表示
- テーブルをクリックしたら詳細画面を表示
GET /customers/:idリクエスト- (optional) 取得中 loading 表示
- 編集フォーム→更新
- 作成フォームコンポーネントを再利用
PUT /customers/:idリクエスト- (optional) 更新後一覧をリロード
- 削除
DELETE /customers/:idリクエスト- (optional) 更新後一覧をリロード
- 検索・ページャー
- 検索フォーム表示
GET /customersリクエストする際のクエリとして利用
アーキテクチャに合わせて改善
最初は、ページコンポーネントにすべて書いてしまって、動くところまででOKとしました。 そこから、だんだん機能を拡充するのにつれて、見づらい、修正しづらいというのを体感することになります。 この頃合いでアーキテクチャを紹介して、改善を促しました。これにより「なぜそのような構成にするのか」を体感してもらうことを狙いました。
実際にプロダクトで採用しているアーキテクチャを紹介して、現状のコードからどう改善するか一緒に見ていきました。 アーキテクチャについてはドキュメント化しておいて、後から見返すことが出来るようにしておくと良いでしょう。
ちなみに、今回はこのようなディレクトリ構成となりました。アーキテクチャについて詳しく書く記事があっても良いですね（期待）
- pages
- 初めは全てここに書いていた処理がコンポーネントに分解されていく
- components
- 分解されたコンポーネントたち
- composables
- コンポーネント内でも再利用できる部分が見つかり次第こちらへ
- apiClients
- API にリクエストする役割を担う
- プロダクト内 model への変換も担う
- models
- プロダクト内 model を type で定義
用意したこと
上記要素に集中してもらうために、下地を準備しました。具体的には、
- 他のリソースとの兼ね合いなくCRUD操作が可能なリソース、及びそれを操作するREST APIサーバー
- APIリクエストに必要な認証 / 認可を内包したAPI Client
- プロダクションで使用している UI コンポーネント / ライブラリ のセットアップ
- build / lint セットアップ
- エディタのオススメ設定
準備といっても、ほとんど既存レポジトリから転用できるかと思います。 新たにいい感じにセットしたくなりますが、無限に時間が吸われるので注意です（経験談）
最後に
ある程度自力で進めてもらうことは前提ではありますが、最初はフォローが必要なはずです。 気軽に聞いてもらえるように、定期カレンダーを設定したり、いつでも聞いて良いことを何度もお伝えしたり、ソフト面の環境を整えることも大事ですね。
私自身、今回の研修を考えてみて、研修の組み立て方を以下のような型にできる気がしてきました。
- 既存のチュートリアルで十分な点・足りない点を洗い出す
- 学んでほしいことに触れるために必要な要素（フレームワークの機能、実装）に分解
- 必要な要素を網羅するコンテンツを考える
- なぜそのような構成にすべきか体感できる流れを考える
- それに集中できる環境を整える（ハード・ソフト）
この型を活かして、今回触れなかったテスト周りのコンテンツも考えていく予定です。 一周した頃に、再びブログに出来たら幸いです。
アンドパッドでは、フロントエンドを牽引してくれるエンジニアを絶賛募集しています。
開発にVueを採用しているチームとReactを採用しているチームがありますので、ぜひ興味を持った方はご応募お待ちしております。
明日は、同じチームの武山さんが最近読んだ技術書についての記事を公開してくれるそうです！お楽しみに！
