クラウドワークス(crowdworks.jp)の施策チームの薄井です。当チームは、エンジニア3名、デザイナー1名、プロダクトオーナー1名の5名で、ユーザ向けの機能改修施策の開発を行っています。

今回の記事では、当チームが機能リリースまでの開発プロセスをどのように進めているかを書いていきます。現在、チーム内には開発プロセスの詳細なドキュメントはないため、これを機に言語化をして、ドキュメントを作りたいという考えです。

開発プロセスの流れ

当チームでは、下記の手順で開発プロセスを進めています。

プロダクトオーナーが開発要件を決める
デザイナーがUIデザインを作る
エンジニアが調査・設計・実装を行う
チーム全員でステージング環境で動作確認を行う
機能リリース！

開発要件とデザインの決定

まず初めに、プロダクトオーナーが開発要件をまとめます。開発要件は、施策の「ビジネス価値」「対象」「背景にある課題・仮説」「受け入れ条件」などを記載しています。開発要件をチーム全体で確認した後、デザイナーがUIデザインを作成し、さらに具体的な内容が決まります。

エンジニアは出来上がった開発要件とデザインを基に、この後の工程を進めていきます。

調査

開発要件の受け入れ条件とデザインを、現行機能と比較しながら、変更箇所を洗い出します。それと共に、機能を追加する画面の、既存実装の調査を行います。

リリース単位をどう分けるか

リリースをなるべく細かく行いたいため、開発要件の受け入れ条件に書かれている内容から、リリースをどう分けられるか考えます。全体の設計完了を待たずに実装を始めることもあったため、優先度が高い部分から設計を終わらせたい、という意図もあります。

既存実装にどこまで手を入れるか

最近行っている改修の対象になっている既存機能は、マイナーチェンジを除いて5年以上前から手付かずで、テストが無いことがしばしばあります。本当は既存実装に対して、テスト追加やリファクタリングをしたいですし、するべきなのですが、時間は有限で、やりたい施策は順番待ちになっています。なので、今回行いたい改修のために必要な分はどこまでかを議論し、既存実装にどこまで手を入れるかを決めます。

フロントエンドは何で進めるか

クラウドワークスでは、Railsで動いているサービスのフロントエンドをVue.jsに置き換えつつあります。その上で、コストとリターンを鑑みて、Vue.jsに切り替えるか、Railsで完結させるかを決めます。とはいえ、Railsを採用するケースは、ごく小規模(1画面のみ)で、複雑なロジックはなく、既存のスタイルを適用するだけ、という場合で、それ以外はVue.jsで実装しています。また、jQueryで動いている機能もまだまだあり、それをVue.jsで作り直すかも考えどころです。

設計

以前は、設計は最低限にして、具体的な部分は実装者の裁量に委ねていたのですが、現在は、詳細なタスクに落とし込むまで打ち合わせをしています。時間はかかりますが、このやり方の方が、実装に着手したあと、スケジュールが大きく膨らむのは避けられているため、やるべきであるという認識をチームで持っています。

必要なUIコンポーネントの洗い出しと命名

設計方針が決まり、Vue.jsを採用する規模だった場合、デザインから必要なコンポーネントを洗い出していきます。コンポーネントをどこまで細かくしていくか、コンポーネント名・プロパティ名を考えつつ話し合います。チーム全体で納得できる名前をつけられると、そのコンポーネントに対する認識が揃ったな、と確信できます。

実装

調査・設計は、エンジニア全員が集まった場で同期的に進めていますが、実装は個々人の裁量で非同期に進めていきます（モブプロをするときはまた別）。各タスクの実装後は、コードレビューを必ず行います。命名が適切か、可読性が低くないか、ロジックが最適化されてるかなどの、ソースコードの品質の担保のためです。また、チーム内の複数のエンジニアが実装内容を把握することも大事です。