この記事は Chatwork Advent Calendar 2023 11日目にエントリーしています。
こんにちは、2023年4月に新卒のエンジニアとしてChatworkに入社した小林です。
研修を経て、6月にChatworkのフロントエンド開発部に参画して早半年の月日が経ち、今年も終わろうとしております。そこで今年の振り返りとして、記事を書こうと思いました。エンジニアとしては人生初の記事なので、なるべくわかりやすく書けるよう頑張りたいと思います。
この記事について
この記事では、私がChatworkの巨大なフロントエンドコードに初めて携わって得た、開発を進める上でのちょっとしたtipsを共有したいな、と思っております。
新卒としてChatworkに入社した私ですが、エンジニアとして完全に未経験という訳ではなく、学生時代にもいくつかの現場を経験をさせていただきました。
主にスタートアップや新規開発が多く、「使ってみようぜ」で技術が採用されるような勢いのある雰囲気に囲まれてきたおかげで、短期間で多くの技術に触れることができ、今となってはそれが貴重な経験となっています。
ですが、次第に大規模なプロダクトに触れてみたい、と思うようになり、それがChatworkに入社する決め手となった私は、入社前、Chatworkのコードに触れるのが楽しみでなりませんでした。
そして半年経った今、どうだったかをふと振り返ってみると、本当に必要になってから初めて学ぶような、でも知っていることで開発者として一段階レベルが上がるような、開発のtipsの積み重ねによる成長が本当に大きかったなぁ、と思います。
今となっては当たり前のようにつかっているけれど、当時は困ってから先輩や同期とモブプロした時に、「それどうやってやるんですか？！」と驚いて、やり方を教わって知るような内容です。
今回はそんな、誰かにとっては当たり前だけど、もしかしたら誰かにとっても役に立つかもしれないようなtipsを、体験を交えながら皆さんに共有できたらと思います。全部で５つあります。
大量のフロントエンドコードに埋もれないために
当たり前のことから入るのですが、初見でコードを読んだ時その量に圧倒されました。
ちょっとした機能の追加・修正タスクでも、どこから読めばいいのか、どこまで正常に動いていてどこからおかしくなっているのかわからず、どんどん時間が溶けていく…ということが時にチームにジョインしたてのことは多々ありました（今もあるのですが）。
この項ではそんな中で得た、少しでもコードリーディングに役立つtipsを共有したいと思います。
VScodeのBookmarks
まずはVSCodeの拡張機能からです。Bookmarksはその名の通り、コード内の特定の位置をメモをつけて記憶し、後で簡単にアクセスできるようにするツールです。シンプルな機能ですが、私の中では大活躍しています。
特にChatworkのフロントエンドでは、技術の世代を跨いで機能を参照する時にもコードをクリーンに保つために、実装の実体ではなく、initerfaceに依存している部分が多くあります。
jQuery時代のアーキテクチャをReact化するために大切なACL層のお話 - Chatwork Creator's Note
そのため、単純なコードジャンプでは辿り着けないこともしばしばです。そういったコードを読んでいると「さっき見てた実装どこだっけ？」となってしまうわけです。
そんな時に役立つのが、このBookmarksでした。私自身もこの拡張機能を導入してから、コードの読み込み速度が大幅に向上しましたし、エディタに記憶させることができると安心してコードを読み進められるようなりました。
Chromeのブレークポイント機能
続いてはChromeの開発者ツールについてのtipsです。
ご存じの方も多いと思うのですが、ブレークポイントとは、コードの特定の行で実行を一時停止するためのマーカーです。その時点での変数の値を調べたり、一時停止から動作を再開させ、少しずつコードを実行したりすることができます。
私もサーバーサイドを実装する上では多用していたのですが、ブラウザで実行されるビルド後のJavaScriptと開発時のコードのマッピングを行えば、Chromeの開発者機能でもブレークポイントを使えることを知らなかったので共有したいと思います。
（参考：WebFrontendのモニタリングツールとSourceMap - Chatwork Creator's Note）
ChatworkのフロントエンドではReactを使用しているのですが、Reactはただでさえ再レンダリングのタイミングが難しい上に、旧世代（現状まだ残っているReactの自前アークテクチャの箇所、jQuery実装の部分など）での状態が変化した時に、旧世代側から再レンダリングを呼び出すこともあります。
自前アーキテクチャなコードを Redux 構成に書き換えているお話 - Chatwork Creator's Note
そのため、どこのタイミングでどの世代の状態が変化し、どのようなタイミングでこの表示が行われたのかを把握することが非常に重要になってきます。
そこで役立つのが、Chromeの開発者ツールのブレークポイント機能です。これを使用することで、状態の変化や再レンダリングのタイミングを把握しやすくなり、どこから問題が生じているのかが分かりやすくなりました。
console.trace
恥ずかしながら、わたしはconsole.logしかまともに使ったことがなかったので是非紹介させてください。このメソッドはconsole.logとは違ってそれが呼び出された時点でのスタックトレース、つまりどの関数からそのエラーが引き起こされたのか、その関数はどの関数から呼び出されたのかという情報をコンソールに出力してくれるものです。
上記にも書いた通り、Chatworkのフロントエンドコードは旧世代と新世代のコードが混在しており、また、状態の変化や再レンダリングのタイミングが複雑に絡み合っています。そのため、エラーが発生した際に、その原因がどの関数から引き起こされたのか、またその関数はどの関数から呼び出されたのかを特定するのには必須のメソッドです。
実装の意図を見抜く方法
今までの項目では、単純に大量のコードを読み解くためのtips集を書きましたが、この項目からは「どういう経緯でこの実装があるのか？」を知るための知恵です。
今までに書いた技法で、コードリーディングのスピードは上がり、処理の流れを掴むことはできるようになりました。
しかし、依然として「処理の流れはわかった、だけど何でこの実装があるの？」となることは多々あります。
Chatworkは歴史のあるサービスです。実装した人がもうチームにいなかったり、今ではもっといい実装方法があるが当時はそれがベストプラクティスだったということも多々あります。
以降は、単純なコードリーディングでは読み解くことが出来ない背景を素早く知るためのtipsを共有したいと思います。
GitLensのCurrent Line Blameについて
またまた、VSCodeの拡張機能です。GitLensは、VScode上でGitとの連携を強化するための拡張機能です。たくさんの便利機能があるのですが、今回は「Current Line Blame」機能を共有したいと思います。
Current Line Blameは、エディタの現在の行に関連するGitの情報を表示してくれる機能です。具体的には、その行が最後に変更されたコミットの詳細（誰がいつ変更したか、そのコミットメッセージは何かなど）を表示してくれます。これにより、コードの各行がなぜ、どのように変更されたのかを理解するのに役立ちます。また、GitHubと連携していれば対象のPRのリンクもすぐに見ることができます。
実装の意図がわからない時に、この機能から素早くPRにたどり着くことで「これはこの不具合の対策のために行なっているんだな」と知ることができ、むやみに必要な実装を消してしまいデグレを引き起こすことを防げます。逆に「この実装は当時は必要だったが今はいらないな」と勇気を持って削除することも可能になりました。
丁寧にPRやコミットログを書くことの重要性
GitLensのCurrent Line Blameの続きのような内容になってしまうのですが、上記のような方法で簡単に実装者のPRが覗けるということは、自分の書いた行、PRもどんどん蓄積されていっているということです。実際、半年経った今VScodeでコードを眺めていると実装者の欄に「You」と表示されることも珍しいことではなくなりました。
PRやコミットログは丁寧に、というのは基本的なことなのですがこうやって先人の丁寧な記載に助けられてこそ、その重要性がより一層わかるなあと感じています。これからは自分が書いたコードが何ヶ月、何年後にもなって再度見られることがあるということなんだなあと。だからこそ、その時点での思考や意図を明確に伝えるために、PRやコミットログを丁寧に書くことは非常に重要なことだと感じております。
さいごに
日々の業務ではキャッチアップに必死な部分もあり、また周囲のレベルも非常に高い環境であるために、自分が成長しているのかを考えること自体が少なかったかもしれません。
ですが、今こうして体験記と技術記事の中間のような記事を書き進めてみるとtipsだけでも色々と書くことがあり、本当にいろんなことを学んだ半年間だったなあと実感しました。
こういった充実感を得られているのは、わからないことを聞きやすく、ジュニアレベルのエンジニアだとしても一人の開発者として尊重していただける環境にいられたからだな、と感じているところです。
大規模なプロダクトに触れてみたい、エンジニアとして成長したい方、是非一緒に働きましょう！
