この記事はヤプリ Advent Calendar 2023 7日目の記事です。
フロントエンドエンジニアの@k0n_karinです！今回は業務で利用中のNuxt BridgeにissueとPRを出す機会があったので、その体験記を書いていきます。
きっかけ
YappliのCMSでは、現在Nuxt2を使っています。Nuxt2のEOLが来年6月末のため、Nuxt3を目指して絶賛バージョンアップ作業を進行しています。
Nuxt3へのバージョンアップ作業にはNuxt Bridgeという、Nuxt2向けにNuxt3の機能をバックポートしてくれる便利なOSSを使っています。Nuxt Bridgeを使うことにより、Nuxt2を使っていながらNuxt3との差分を小さくし、段階的なバージョンアップが可能になります。
Nuxt BridgeはNuxt3互換の新しいAPIだけでなく、@nuxtjs/composition-apiの利用者向けに互換のあるレガシーAPIを提供しています。これによって、@nuxtjs/composition-api利用者は、段階的に新APIに置き換えていくことができます。
その中で、Nuxt Bridgeが提供するレガシーAPIのdefineComponentの型定義が、@nuxtjs/composition-apiのものと異なっていました。引数と返り値がどちらもanyとなっていたので、型推論が正常に使えなくなる状態でした。
まずはIssueを書く
早速Issue、と行きたいところですが、その前に改めて自社のリポジトリ固有の問題ではないか、問題を切り分けてるためにミニマムな動作環境を作り、正確な事象を確認して整理していきます。
これは、実際にIssueを書く際にもメンテナーの方にわかるように、再現環境を提供するのに役立ちます。（URLで共有できるStackBlitzやCodeSandoboxなどが便利です）
https://stackblitz.com/edit/github-heoruj?file=defineComponent.ts
再現環境で事象が確認できたら、早速Nuxt BridgeのIssueテンプレに沿って書いていきます。
OSSでのコミュニケーションは英語が一般的で、当然Nuxt Bridgeでも英語を使います。このようなときは生成AIを使うと、コードレビューに相応しい英語を書いてもらえてすごく助かります。いい時代ですね。
今回はNuxt Bridgeと@nuxtjs/composition-apiの型定義の差分で困っていたので、2つのリポジトリを比べて直せそうな当たりが付きました。
この内容も合わせてIssueを書いてみました。
反応を待つ
幸いすぐにメンテナーの方から返事があり、good first issue/typesのラベルが付きました。提案した内容にも「良いと思う！」とのコメントを頂きました。コミュニティの温かさを感じますね。
PRを出してみる
まずはNuxt Bridgeリポジトリをforkして、作業ブランチを切って開発をします。
https://github.com/konkarin/bridge/tree/typing/legacy-define-component
さて、どこを直すかの当たりは既についているので、型定義をさくっと直します。
https://github.com/konkarin/bridge/commit/7c76d2d9f15e0a3923c90f7a80802fe9c81f23b0
修正したら早速PRを出しましょう。PRにもテンプレが用意されているため、それに沿って書いていきます。
ここでもAIが活躍します。
レビューを待つ
ドキドキしながらレビューを待っていると、コメントが付いていました。今回は、ついでに近くのコードの型付けの修正を依頼されていたので、サクッと対応します。
この修正の中で、レガシーAPIからVueの他の型がexportされていないことに気づき、これらもバックポートしたら便利そうなことに気づいたので、メンションしてみます。（ここでもドキドキ
https://github.com/nuxt/bridge/pull/994#discussion_r1411718801
返事を見てみると、意図的にexportしていないことがわかり、学びになります。好奇心で聞いてみてよかったです！👍
こうして、晴れてマージされました🥳
おわりに
以前からやってみたかったOSSコントリビュート、以前に様々なOSSのgood first issueのラベルを漁ったこともありましたが、その時はよくわからず諦めていました。普段使っているOSSだとコントリビュートしやすいという話を聞いたことがありましたが、それは本当にそうで、自分事として困ると自分事として直しやすかったです。
今回は型定義を直すだけでしたが、これからも積極的にいつもお世話になっているOSSにコントリビュートしてきたいですね。
このような活動にもしご興味を持っていただけたり、やってみたいと思った方は、是非カジュアル面談でお話しましょう！
