【18日目】フロントエンドエンジニアが社内ISUCON入門編でprivate-isuに初挑戦してみた件

この記事は株式会社カオナビ Advent Calendar 2024の18日目の記事です。

はじめに

こんにちは。
カオナビでフロントエンドエンジニアをしている、まえださんです。
普段はReactを使用しています。

もう年末ですね。（はやい）
アドベントカレンダーということで、今年体験したことのなかで特に印象深かった社内ISUCONでのことを話したいと思います。

下記はISUCONって何？って人向けです。ご存知の方は読み飛ばしてください。

※公式ISUCONは、基本的にチーム戦です。
※社内で行われたISUCON入門編は、個人戦でDockerコンテナによるベンチマーク結果をSlackで集計する形式です。

ISUCONについて

ISUCONは「いい感じに スピードアップ コンテスト」の略で、LINEヤフー株式会社が運営窓口となって開催している、お題となるWebサービスを決められたレギュレーションの中で限界まで高速化を図るチューニングバトルです。（引用元: ISUCON公式Blog）

private-isu とは

こちらのリポジトリにあります。
お手元のローカル環境でISUCONを体験できます。（dockerが必要です）

社内勉強会について

カオナビでは、エンジニアの成長を支援するために、様々な社内勉強会を活発に開催しています。
新人からベテランまで、全ての社員が学び合える環境を整えています。

本記事で紹介した社内ISUCON入門編は第2回あたります。
2024年入社の新卒エンジニアも参加しています。

また、新卒研修の一環として社内ISUCON第4回を実施し、その事前勉強会として社内ISUCON3.5も行われました。

挑戦してみて気づいたこと

色々と忘れていた知識

PHPとMySQLについてすっかり忘れていました
WordpressやEC-CUBEの経験はあったのですが、あまり役に立たなかったです。

また、学生時代に研究室のサーバを立てたりしていたのですが、OSそのものの知識も不足を痛感しました。

初めて使ったツールと概念

• topコマンド
  • CPUやメモリの利用状況をリアルタイムで表示してくれるコマンドです
  • そもそも使ったことがなかったです。まじか！超便利！（小並感）という感じ
  • htopをインストールするところから始めました
• 各種パッケージマネージャ
  • Linuxは yum くらいしか知識がなく、apt は初めて使いました
  • MySQLサーバで利用した microdnf も初見でした
• データベースのインデックスについて
  • 一度勉強したはずなのにすっかり忘れていました
    • インデックスをはるとは、特定のカラムに対して検索を高速化する仕組みを作ることです
    • インデックスをつけると、データの検索が効率的になり、クエリが早くなります
• スロークエリ
  • そもそもどうやって表示するかが分からない
    • MySQLの設定ファイル my.cnf の存在を知りました
    • 設定ファイルでスロークエリログを有効にする方法を学びました
  • 時間がかかるものと回数が多いもの
    • 時間がかかっているものはデータベース側にインデックスをはることで改善する可能性があります
    • 回数が多いものはN+1問題に引っかかっている可能性があります
  • N+1問題について
    • クエリがループの中で呼ばれている可能性があるので、アプリケーション側のコードを見直す必要があります

環境に関する戸惑い

• アプリケーションファイルの場所が分からない
• コンフィグファイルの場所と名前が分からない
• パフォーマンス可視化ツールのインストール方法
  • pt-query-digest：MySQLのスロークエリログを解析するツール
  • alp：Webサーバのアクセスログを解析するツール
• OPcacheの有効化はPHPerのお作法らしい
  • OPcacheはPHPのパフォーマンスを向上させるためのキャッシュ機構です

フロントエンドエンジニアとしての気づき

バックエンド知識の重要性

フロントエンドでも求められるパフォーマンスはlighthouseなどのツールの普及によって一般のユーザーの方からも多くの指摘を受けるようになりました。
その中でも

• First Contentful Paint（FCP）：最初のコンテンツ表示にかかるまでの時間
• First Input Delay （FID）：Webページの応答性

を考える際に、フロントエンドとバックエンドの責務を切り分けて考えられると自分のコードの改修に自信を持つことができます。

パフォーマンスチューニングの面白さ

パフォーマンスチューニングやデバッグの際には「ボトルネックを探す」ということが初手でできるか否かはとても重要です。

１つボトルネックを解消すると次のボトルネックが分かり、次へ次へとベンチマークの数値が上がっていくのはとても楽しい体験です。

ボトルネックを探すために、まずなにをするか、という思考はソフトウェア開発に限らず、多くのビジネスシーンで共通のスキルとして役に立つと思います。

まとめ

private-isuに挑戦してみて、フロントエンドエンジニアの私にとって有用な気づきがたくさんありました。PHPやMySQLの知識が不足していることに気づいたり、topコマンドやパッケージマネージャーなど、普段使わないツールに触れたりしました。

最初は戸惑うことばかりでしたが、この経験を通じてISUCONそのものにも興味が湧きました。
ボトルネックを見つけて解消していく過程はパズルを解くような楽しさがあります。

この「ボトルネックを探す」という考え方は、フロントエンド開発はもちろん、他のビジネスシーンでも活かせると思います。

ISUCONのような経験は、フロントエンドエンジニアにとっても非常に有益です。ぜひ挑戦してみてください！