割り勘webサービスを２週間でリリースした手法を紹介する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/148503/b2e49a5d-d791-7600-733a-413f4a5a7315.png)

# リリースしたもの

##### リンク
[Walica（ワリカ） | お金の立替・割勘をスマートに清算](http://walica.jp/) 

##### Twitter
[立替清算サポートアプリ Walica（ワリカ）](https://twitter.com/WalicaJP)

##### 見た目
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f35623835393737352d323063362d623833352d626366322d3436393666303038643839662e6a706567.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148503/146aaf5d-5530-27c2-9de6-87b15303b410.jpeg)


<!-- wp:heading {"level":5} -->
<h5>セールスポイント</h5>
<!-- /wp:heading -->

<!-- wp:list -->
<ul>
<li>最適アルゴリズムが少ない回数で精算方法をリコメンド</li>
<li>インストール・会員登録不要</li>
<li>飲み会に２次会から参加した人、お酒飲めない人などがメンバーにいる場合の特殊な計算も可能</li>
<li>10円, 100円, 1000円単位での精算を選択できる。</li>
</ul>
<!-- /wp:list -->

<!-- wp:heading {"level":1} -->
<h1>開発チーム</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>自分<br />- 開発経験2年くらい<br />- サーバー・インフラ担当</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>もうひとり<br />- 開発経験3-4年くらい<br />- デザイン・フロント担当</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>の二人で作りました。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>今回の開発の早さ</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>私達が週末に個人開発を共同で初めて１年ほど経ちました。<br />今まで３つのサービスをリリースしましたが、今回のサービスは圧倒的早さで提供できたので、そのノウハウをお伝えします。</p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<table class="wp-block-table">
<thead>
<tr>
<th>サイト</th>
<th>開発期間</th>
<th>開発環境</th>
</tr>
</thead>
<tbody>
<tr>
<td>動画キュレーションサイト</td>
<td>3ヶ月</td>
<td>Vue + Flask</td>
</tr>
<tr>
<td>スポーツショップの販売サイト</td>
<td>2ヶ月</td>
<td>Vue + Flask</td>
</tr>
<tr>
<td>割り勘サイト</td>
<td><strong>2週間</strong></td>
<td>Vue + Flask</td>
</tr>
</tbody>
</table>
<!-- /wp:table -->

<!-- wp:heading {"level":1} -->
<h1>なぜ週末開発でこの早さを実現できたか</h1>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>【早さの極意一】　完全分業</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>開発をしていて、最もスムーズに進むのに役に立ったのが<strong>分業</strong>でした。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>メリット</code> としては、<br />- それぞれの開発者の得意なことに徹することができる<br />- 作業の重複（コンフリクト）が発生しない</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>デメリット</code> としては、<br />- 参加していない作業については、担当者に任せきりになり後からメンテができない</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>がありました。今回はリリースまでの速度を重視したため、メリットがデメリットを上回りました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>具体的な作業内容としては、下のイメージのような感じです。</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://camo.qiitausercontent.com/e0b64f0d90e00462cc50104d07df3ef34f40e6ff/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f66383566323639382d653562352d336462362d653831632d3435653566623162323833632e706e67" target="_blank" rel="noreferrer noopener"><img src="https://camo.qiitausercontent.com/e0b64f0d90e00462cc50104d07df3ef34f40e6ff/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f66383566323639382d653562352d336462362d653831632d3435653566623162323833632e706e67" alt="image.png" /></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>注目すべきは、<br />両者の作業が疎結合になっていることです。<br />そして、一番最後の工程の「結合テスト＆リリース」で作業が合流するため、その合流地点に関しては明確に基準を設けました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>今回の場合は、フロントのAPIコールが合流地点になるため、<br />ソースコードに下記のようなコメントを記載して開発していました。</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">@application.route('/api/group/&lt;group_id&gt;', methods=['GET'])
# param: none　　←コメントで入力値を記載
# return: group_id(string)　←コメントで出力値を記載
def get_group(group_id):
    return jsonify(group_service.get_group(group_id))
</pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":3} -->
<h3>【早さの極意二】 レビュー頭出し</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>これは、チームとして成熟してきた場合に有効です。<br />ある程度一緒に開発をしていると、「このレビュアーは、これを気にするな」ということがわかってきます。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>ちなみに私が一緒に開発しているエンジニアは、 <strong>変数名をやたら気にする</strong> という特徴があります。<br />なので、コードレビュー※に出す前に <strong>「この変数って、これでいいかな？」</strong> と聞くようにしていました。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>実際に自分が思いついた変数でもレビューは通るかもしれませんが、 <br /><strong>「相手の気にするところは、意思決定プロセスに参加させる」</strong> ということが合意のために重要ということに気づきました （SIer体質感）</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>※図にはありませんがコードレビューは随時やってます。</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>【早さの極意三】開発ツール活用</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>最後に、開発に役立ったツールの紹介をして終わります。</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li><a href="http://ermaster.sourceforge.net/content/manual/ja/index.html" target="_blank" rel="noreferrer noopener">ERMaster</a></li>
</ul>
<!-- /wp:list -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://camo.qiitausercontent.com/1f216f63760b3af50607a62deaba1e054fb1f648/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f38383831373032332d326530652d396532352d613635352d6166386437653131643466382e706e67" target="_blank" rel="noreferrer noopener"><img src="https://camo.qiitausercontent.com/1f216f63760b3af50607a62deaba1e054fb1f648/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f38383831373032332d326530652d396532352d613635352d6166386437653131643466382e706e67" alt="image.png" /></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Eclipseで動作するER図作成ツール。ぶっちゃけ見た目はイマイチですが、今でもダントツで多機能かつ使いやすいツールです</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul>
<li><a href="https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=ja" target="_blank" rel="noreferrer noopener">PostMan</a></li>
</ul>
<!-- /wp:list -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://camo.qiitausercontent.com/85868e3c4fb7740dc313a7d4b6dcd04391b9cd01/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f37663734323438312d306533342d353432362d666434322d6562346337333263346236382e706e67" target="_blank" rel="noreferrer noopener"><img src="https://camo.qiitausercontent.com/85868e3c4fb7740dc313a7d4b6dcd04391b9cd01/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3134383530332f37663734323438312d306533342d353432362d666434322d6562346337333263346236382e706e67" alt="image.png" /></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>知らない人はいないかもしれませんが、便利な使い方を紹介します。<br />今回の開発手法のように、フロントとバックエンドで分かれる場合の使い方です。 <br />バックエンド担当はAPIのテストと並行してURL・パラメータをPostmanに入力します。 <br />入力した値はエクスポートできるので、この結果をフロント開発メンバーにシェアすれば、 <strong>PostmanがそのままAPIインターフェース定義書になる寸法です。</strong> <br />複雑なロジックが無ければ、SwaggerもAPI Blueprintも不要です</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>最後に</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>サービスの宣伝＆ノウハウの共有でした。<br />読んでいただいてありがとうございます。</p>
<!-- /wp:paragraph -->