React Hook Formを用いた複雑性の高いエディタ開発の設計

<html><head></head><body><p>先日行われた<a href="https://isucon.net/archives/58848927.html" target="_blank" rel="noreferrer">ISUCON14</a>にRightTouchのエンジニアメンバーikki, nari, takkenの3名で、チームnarinariとして参加しました。</p>
<p><strong>結果は12728点で831チーム中97位</strong> となりました。<br>
<a href="https://isucon.net/archives/58847106.html" target="_blank" rel="noreferrer">利用言語別のNode.jsでは9位</a>にくいこむことが出来ました。</p>
<p>当日の点数遷移としてはこんな感じです。</p>
<p><img src="https://ik.imagekit.io/righttouch/9f8e10f6-b9fb-4479-ad87-8439c2bce827/isucon01.webp" alt="isucon01.webp"></p>
<h2 id="0次予選">0次予選</h2>
<p>ISUCON14は予選がなく、何回かに分けて先着順での参加申し込みでした。</p>
<p>最初の申し込み回は結果的に秒殺でしたが、秒単位で時間を確認しつつ、チーム名は一旦適当につけることでなんとか滑り込むことができました。冒頭にもあるように結局名前はこのままで行きました（笑）</p>
<p><img src="https://ik.imagekit.io/righttouch/6459be3d-18ad-4133-83d7-52b8d02c98b0/isucon03.webp" alt="isucon03.webp"></p>
<h2 id="練習">練習</h2>
<p>全員が初参加ということで、当日ぶっつけ本番というわけにも行かないので、本番前に2回ほど練習会を行いました。</p>
<p>練習ではmatsuuさんの<a href="https://github.com/matsuu/aws-isucon?tab=readme-ov-file" target="_blank" rel="noreferrer">こちら</a>やISUCON本の<a href="https://github.com/catatsuy/private-isu" target="_blank" rel="noreferrer">private-isu</a>使って練習しました。また、traPさんの<a href="https://isucon-workshop.trap.show/" target="_blank" rel="noreferrer">こちら</a>も非常に参考になりました。</p>
<p>主に行ったのは下記です。</p>
<ul>
<li>基本的なインスタンスのセットアップ手順</li>
<li>以降の練習 or 本番に向けた作業メモを残す</li>
<li>競技中によく叩くコマンドをMakefileにまとめる</li>
</ul>
<p>セットアップをする中でつまづいたポイントや、回ごとに異なりそうな部分は当日に焦らないようにコメントを残しておくことで再利用しやすくしました。</p>
<h2 id="ISUCON14の出題概要">ISUCON14の出題概要</h2>
<p>ISURIDEという椅子のマッチングサービスが題材でした。いわゆるタクシー配車アプリの椅子版で、ユーザーが椅子をリクエストすると周りにいる椅子とマッチングし、座ることができるというものです。</p>
<p>詳しくは動画をご覧ください</p>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe title="ISUCON14 出題動画" src="https://www.youtube.com/embed/UFlcAUvWvrY?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen="" scrolling="no" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;"></iframe></div>
<h2 id="当日の流れ">当日の流れ</h2>
<h3 id="午前">午前</h3>
<p>ikkiがインスタンスのセットアップを担当し、nari,takkenでドキュメントやコード読みとAPMのセットアップなどを行いました。</p>
<p>2台目のインスタンスセットアップ時にコマンドのコピペをミスり、環境を壊してしまい、インスタンスを作り直すなどのトラブルはありましたが、12時ごろにそれぞれのインスタンスのセットアップを終えて、ベンチを回して点数が出ることを確認しました。</p>
<p>また、当初はgolangで参加する予定でしたが、やはり慣れている言語にしようということでnodeにすることにしました。結果的に今回はアプリケーションロジックの改善がメインだった（はず）ので慣れている言語にしておいて良かったです。</p>
<h3 id="12時-14時">12時-14時</h3>
<p>APMにたまったデータをもとに一旦遅いSQLたちにINDEXを貼る儀式を行い、数百点アップしました。</p>
<p>そこから、各自コードを読み進めたり、実際にアプリを触ってみたりして、やたらとリクエスト数が多いエンドポイントやN+1になっているところを発見し次第、改善を試みるという形で進めていましたが、なかなかうまく改善が進まない時間が続きました。</p>
<p>流石にこのままだと厳しいと思い、一旦集合してモブプロ的に大きな課題を潰そうという方針に変えました。</p>
<h3 id="15時">15時</h3>
<p>見つけた大きな課題を全員で取り組むスタイルに変え下記を改善しました。</p>
<ul>
<li>都度計算している重い処理をカラムとして保存するようにスキーマ変更</li>
<li>DBとAppのインスタンスを分ける</li>
<li>Honoのリクエストログを止める</li>
</ul>
<p>この辺の取り組みをして大体8000点くらいまで上昇しました。</p>
<p>ほぼ初期スコアの時間が長かったのでちょっとホッとしました。</p>
<h3 id="16時-17時50分">16時-17時50分</h3>
<p>もう一つくらい改善できるかなと思い、次にライドの不満度に目をつけました。</p>
<p>初期だとランダムに椅子をマッチングさせていたところを現在地から近く、スピードが速い椅子をマッチングさせるようにロジックを変更しました。</p>
<p>追加でいくつかINDEXを貼ったりして、17時くらいに12000点強位まで上がりました。</p>
<h3 id="ラスト10分">ラスト10分</h3>
<p>なんやかんやでギリギリまで改善をしていて、再起動試験などをしないととなり、大急ぎで行いました。</p>
<p>幸い特に問題は起こらず、不要なサービスの停止まで完了して18時を迎えました。</p>
<h2 id="感想">感想</h2>
<p>下記はISUCON14に初参加して感じたポイントです。</p>
<ul>
<li>事前練習は必須
<ul>
<li>練習なしだったら諸々のセットアップで大半の時間を消費していた可能性があります</li>
</ul>
</li>
<li>何事もイテレーションサイクルが短いことが重要だと感じた
<ul>
<li>VSCodeのmysql拡張がSSH時にもいい感じに使えて、コードからクエリをコピペするとどんなデータが返ってくるかわかったり、書いたクエリが動くのか都度確認できて良かったです</li>
</ul>
</li>
<li>分担にはかなり慣れが必要そう
<ul>
<li>私たちのチームは結果的にモブプロ的な形で進めた方が早かったです</li>
</ul>
</li>
</ul>
<p>ほぼ初期スコアの時間が結構長く、内心焦りつつ最終的にはいくつか改善できたので初参加としては良かったと思います。</p>
<p>弊社から出ていた別チームと打ち上げに行き、感想戦をしていたところ、コスパ良く改善できるポイントを取り逃がしていたことを知り、若干の悔しさを残して初めてのISUCONは終了という感じです。</p>
<h2 id="最後に">最後に</h2>
<p>RightTouchでは、プロダクトのパフォーマンスにこだわるプロダクトエンジニアを絶賛採用中です。<br>
少しでも興味を持った方がいればぜひお話ししましょう！</p>
<p>エンジニア求人情報の詳細<br>
<a href="https://righttouch.co.jp/jobs/engineer" target="_blank" rel="noreferrer">https://righttouch.co.jp/jobs/engineer</a></p>
<p>採用サイト<br>
<a href="https://righttouch.co.jp/recruitment" target="_blank" rel="noreferrer">https://righttouch.co.jp/recruitment</a></p>
</body></html>

RightTouchのエンジニアでISUCON14に初挑戦してきました