フロントエンド開発の流れ

フロントエンドのコードをいじるときは、だいたいこういう流れでやるとよさそうというのを書いたものです。 あくまで「自分はこう思う」という一例です。

特にフロントエンド開発をするとき固有の事情について記載してあります。

フレームワークは Vue.js で書いていますが、何でもあまり変わらないと思います。

Vue.js コンポーネントの作成

一般的な Vue コンポーネントを新規作成する作業の流れとしては以下。一部の作業をやったりやらなかったり、順番を入れ替えたりとかはあります。

• .vue ファイルを作る
• template 部分を埋める
• 処理（JS 部分）を付ける
• テストを書く
• スタイリングする（CSS 部分）
• 実際の画面に埋め込む
• Storybook を作る

チケットはこれを基準に、好きなところで分割します。コミットはもっと細かい単位で分割できるならそうすべきです。

追加と削除合わせて 200 行を超える場合は、チケット（PR）を分割するほうがいいです。 分割しない場合は、レビュワーの負担が増えてしまうので、なぜ分割しないのか理由を PR やチケットで示しておくべきです。

参考にした書籍は「Google のソフトウェアエンジニアリング」

例

• チケット 1：コンポーネントのベース部分を作成する
  • Vue ファイル・テストファイルを作成、中身は決まって書く部分だけ（import や <script setup> など）
• チケット 2：見た目部分を作成する
  • template・style を書く
• チケット 3：foo を bar にする処理を追加する
  • JS・テストを書く
• チケット 4：画面に埋め込む
  • 他のコンポーネントで import して template に表示する