はじめに
こちらはバイセルテクノロジーズ Advent Calendar 2022の17日目の記事です。 前日の記事は田村さんの「こっそり作る変更履歴テーブル - CDC(Change Data Capture) を使って」でした。
こんにちは！ テクノロジー戦略本部 開発2部の飯島です。 突然ですが皆さん、OSSへのコミットってしたことはありますか？
私は今までしてこなかったのですが、今年の後半からTypeScript ESLintへコミットするようになり、現在までに何個かのPRがマージ & リリース されております。
OSSにコミットしてみるといいよという声は随所で聞きますが、実際してみてどうだったかの体験記事は多くない印象です。
なので実体験に即した記事を書くことで、読んでいただける方のOSSへのコミットに対する障壁を少しでも下げられればと考えております。
OSSへのコミットに興味はあるものの、実態がわからなくてなんとなく抵抗がある方の参考になれば幸いです。 また 今回OSSへのコミットをするきっかけにもなった、バイセルの技術キャッチアップのカルチャーや行動目標などにも触れますので、興味のある方はぜひ読み進めていただきたいです！
OSS にコミットするきっかけ
弊社の開発2部ではフロントエンドやバックエンド、インフラ、デザイン、マネジメントなど個々人が興味のある分野ごとでチームを組み、それぞれが最近気になったトピックに関してチーム内で発表しあう、アンテナ会が隔週で開催されております。
その会で話題になった技術や開発手法などがそのまま業務で使われたりするので、モダンでよりよい開発環境にすることへ寄与していると言っても過言ではありません。 そんなアンテナ会である日、Good First Issueというサイトが取り上げられました。
Good First Issueとは、初心者が取り組みやすい issue に対して付与することが推奨されているラベルのことです。
このサイトでは以下の基準をクリアしたプロジェクトが言語ごとで列挙されております。
Good First Issueの付いているissueが3つ以上存在する- コントリビュータが10人以上いる
- README.mdにセットアップの詳細な説明が書かれている
- CONTRIBUTING.mdに初めてコミットする人向けのガイドラインが書かれている
- 積極的にメンテナンスされている
そしてプロジェクトごとでstar数や Good First Issueのラベル付きのissueの内容もサイトで一瞥して把握できます。
このサイトを知った時、以前からOSSのコードを見て実装の参考にしていたこともあってOSSへのコミットに興味が湧きました。
さらに弊社のエンジニアの行動目標に「インターネットへの貢献」が含まれていて会社からも評価してもらえると思い、チャレンジしてみようと思い立ちました。
TypeScript ESLint に 初めてコミットするまで
TypeScript ESLint とは
TypeScript ESLint とは、TypeScript上でESLintを実行するためのライブラリです。
これを使うことで、ESLintのルールのTypeScriptの構文への適用が可能です。
尚、2022/12/6現在、620 万人以上のエンジニアに使われています。
こちらのplaygroundで実際に触って動作を確認できます。
TypeScript ESLint を選んだ理由
前述のGood First Issueに載っていたプロジェクトの中からTypeScript ESLintをコミット対象としたのですが、その際に以下の観点で選びました。
言語の観点
プロジェクトがたくさん登録されているか
登録されているプロジェクトは言語によって大きく異なります。
2022/12/6現在、Good First Issueに登録されている言語ごとのプロジェクト数は以下となっております。
言語によって大きくばらついていることがわかりますね。
数が少ない言語を選んではいけないとまで言うつもりはありませんが、このサイトを使ってissueを探すなら、プロジェクト数が多い言語の方が見つけやすいです。
私の場合はプロジェクト数が多く、また業務でも多く使っていたTypeScriptを選びました。
プロジェクトの観点
コードレビューされるまでのスピードが早いかどうか
せっかくPRを作成してもコードレビューがいつまでもされなかったら、実装した労力が無駄になってしまいます。
なので直近でマージされたPRを何個かチェックし、PRをopenしてからコードレビューされるまでの時間を見ると良いでしょう。
ちなみにTypeScript ESLintの場合は、フルタイムのメンテナーがおり、基本的には即日か翌日にはコードレビューされます。かなり早いです！
issue の観点
issueの作成日が新しいかどうか
古くなればなるほど現行の仕様から離れていくので、issueに書いてある要件がアップデートされていない可能性があり、もしかしたら実装の巻き戻しが発生するかもしれません。
また、Good First Issueラベルのついたissueは基本的に人気であり、残っているのは稀です。にも拘わらず残っているということは実装難易度の高い可能性が大なので、初めてのOSSコミットにはあまりお勧めしません。
なるべく新しいissueを選びましょう。
私は1週間前に作られたissueを選びました。
コミットまでの実際の流れ
リポジトリをフォークする
OSSへのコミットにおいては、リポジトリをフォークしてきて、そこからPRを作成することが定められていることが多く、TypeScript ESLintもそのように明記されているのでフォークしました。
フォークしたリポジトリはこちらです。
issue を選ぶ
Good First Issueのラベルがついている、こちらのissueにしました。
voidのtypeで、既存のoptionであるallowInGenericTypeArgumentsをtrueに変えると、generic型のdefaultの型へvoidを指定してもエラーが起こらないよう、改修してほしいという内容でした。
改修する際は一言「着手します」とコメントをしましょう。
PR を作成し、コードレビュー を依頼
CONTRIBUTING.mdのルールに沿ってPRを作成し、コードレビューを依頼しました。
実際のPRはこちらです。
コードレビューを依頼
前述のようにしっかりメンテナンスされているため、翌日にはコードレビューされました。
2回やりとりをし、最初に依頼をしてから10日ほどでマージされました！
リリース
マージ された翌日にv5.39.0としてリリースされました！
TypeScript ESLintでは毎週リリースが行われるのもあり、たまたま私のPRだけが含まれたリリースとなりました。(全世界のエンジニアに私のPRのためだけにアップデートしてもらうことになるのでなんだか恐縮ですね。笑)
https://github.com/typescript-eslint/typescript-eslint/releases/tag/v5.39.0
TypeScript ESLint にコミットしてみてどうだったか
自分が書いた処理が世界中で使われているのが嬉しい
前述の通り、2022/12/6現在は約620万人のエンジニアが使っており、週ごとのダウンロード数は 約 1600 万 回です。自分の書いた処理が世界中でたくさん使われているということなので、嬉しいです。
実装を通して勉強になった
今回の実装では、「generic型か？」「defaultの型はvoidになっているか？」など型の中身をチェックして不正か判定する必要があり、抽象構文木と照らし合わせることでそれを実現しました。
そもそも抽象構文木(AST)とは、プログラムの構造をツリー化して表現したものであり、TypeScriptの場合はコンパイラの内部で作成・参照されており、型の構造も表現されています。
私は以前からTypeScriptを触っておりましたが、抽象構文木を特に意識したことはなく、今回の実装で初めてしっかり学べました。 TypeScriptがなぜ型判定できるのか、JavaScriptにコンパイルできるのかというのも、抽象構文木化することで細かいマッピング・チェックが可能になって実現できていると知りました。TypeScriptの言語仕様についても詳しくなれた気がします。
自分が今回実装した処理のチェック対象となる、defaultをvoid型とするgeneric型を引数にとった関数の抽象構文木は以下のような感じになります。
実際のコード
const arrowGeneric1 = <T = void>(arg: T) => {};
抽象構文木
1個1個のノードに文字数や型情報、始まりと終わりの文字の位置などが格納されております。
こちらで上記のコードと抽象構文木、ノードが確認いただけます。
CI/CD が充実していて Developer Experience が高い
TypeScript ESLintではモノレポ管理ツールとして nx が使われており、それによって以下のメリットを享受できました。
- ビルドやテストにキャッシュが効くのでCIが早い
- ローカルからテストを実行してもnx cloud上でテストが走るので、ローカルにテスト環境が依存せず、かつ高速でテストが実行される
また、pushされるたびにこのような感じで専用の検証環境がnetlifyへデプロイされるので、動作確認が捗る他、レビュアとやりとりをする際は動くものを見てもらえるため、認識齟齬が減るなと感じました。基本英語でのやりとりになり、また文面だけだとうまく意図が伝えられているか不安というのもあったので、ありがたかったです。
まとめ
今回、TypeScript ESLintへコミットしてみて色んな学びが得られましたし、CI/CDの仕方や言語仕様の理解など思った以上に業務へ活かせることが多かったです。これからもOSSへのコミットは続けていきたいです。
また、今回コミットをするにあたり、弊社ではそれを応援し、評価もしてもらえたのでそのようなチャレンジをしたい方にも向いている会社なのではないかなと思いました！
最後に、バイセルテクノロジーズではエンジニアを募集しています。興味がある方はぜひご応募ください！
明日の バイセルテクノロジーズ Advent Calendar 2022 は天野さんによる「ゼロトラストに向けての下地作り、Azure AD Connectの構築」です。
