これは夏のブログリレー2023 20日目の記事です。
こんにちは、21B SysAd班のmehm8128です。
今回はタイトルの通り、OSS Contributionをした話をします。
最近、Next.jsのapp routerが出て、server componentで様々なUIフレームワークが使えなくなってしまったという話がありますね。styled-components使ってるときに自分も経験しました。Tailwind CSSやvanilla-extractは使えるようで、まだ使えないライブラリも対応を進めているらしいですね。その中でKuma UIというUIフレームワークはserver componentでも使えるいい感じのUIフレームワークとして話題になっていたので、自分も使ってみました。
僕は自分のポートフォリオをapp routerに移行したついでに、sunsetting(deprecatedではないけどメンテナンスが止まってしまった状態？で合ってますかね)になったWindi CSSも別のUIフレームワークに移行しようということでKuma UIを使ってみることにしました。
使ってみた
ポートフォリオのリポジトリはこちらです。
https://github.com/mehm8128/mehm8128-portfolio
あんまり中身は見ないでください🙈
作者(日本人)によるKuma UIの紹介ブログはこちらです。
https://zenn.dev/poteboy/articles/d94573793d56ed
紹介されている通り、できるだけクラス名の🦄を減らし、🐻がつくようにCSSを書いていきます(書かれているように、本番ビルドでは絵文字はkumaの文字列に変換されます)。
基本のコンポーネントやstyled css kのAPIを用いて書くことができます。
ちなみに僕はFlexコンポーネントとHStackコンポーネントの使い分けがあんまり分かっていないので誰か教えてほしいです。Flexコンポーネントにflex-direction: rowがついただけという理解なのでどう使い分ければいいんだろってなってます。
バグ発生！
ポートフォリオの〇〇をWindi CSSから置き換えていたときのことでした。
と書こうとしたのですが、その箇所がどこだったか忘れてしまいました。
とにかく、
<Box marginRight={12} textAlign='right'>
みたいな感じの書き方をしていたときのことでした。
textAlign='right'が効かなかったのです。
この組み合わせできないんだっけ？と一瞬思い、className='mr-3 text-right'みたいに書いてみたのですが、こちらは正常に右寄せされました(移行中だったのでWindi CSSも残っていました)。
もしかして？と思い、
<Box marginLeft={12} textAlign='left'>
<Box marginRight={12} justifyContent='right'>
なども試しましたのですが、やはりこの場合もmarginじゃない方のCSSが効きません(paddingで試したか・再現したかは記憶にないです、多分再現するはず)。
ここで、ソースコードを読むことを決めます。
Kuma UIのソースコードはこちらです。
https://github.com/kuma-ui/kuma-ui
今回出したPRも先にリンクを貼っておきます。
https://github.com/kuma-ui/kuma-ui/pull/283
まずexampleディレクトリで同じように再現するかを確認しました。
exampleディレクトリ↓
https://github.com/kuma-ui/kuma-ui/tree/main/example/next-app-router
再現したので、ソースコードを色々辿ったり漁ったりしました。
そうすると、このファイルが怪しいということが分かったのですが、最初にテストファイルで今回の条件に合うようにpropsを設定してテストが落ちるかを確認しました(props追加後のものが現状のmainブランチに反映されています)。そうすると無事(？)落ちたので、compose.tsの実装をちゃんと読むことにしました。
このくらいのコードであれば原因を特定することはそこまで難しくなく、無事特定できました。
よって修正してテストが通るか確認して、と思ったのですが、謎のエラーでテストが落ちました。
compose is not a function
そこそこの時間をかけて原因を調査したのですが分からず、一旦「テスト落ちてる原因分からないのですがこういうバグがあって直しました！原因分かったら教えてほしいです」みたいな感じでPRを出してしまいました。その後、レビュー待ちの期間で再度調査をしたのですが、解決はできませんでした。
しばらく待つと、ついに原因が分かったメンテナーの方が現れ、直し方を教えてくださりました。詳しくはPRを見てください。
リリースも無事され、まともコードを書いた中では初のOSS Contributionになりました。今までちょっとした翻訳のPRや、バグのissueを立てるだけ、なら他のリポジトリで行ったことはあったのですが、ちゃんとコードを書いたのは初めてです。そのときも今回もなのですが、メンテナーが日本人のときがそこそこあり、日本人同士なのにPR(issue)内では英語で会話するのがちょっと面白いです。
普段様々なOSSを使わせてもらっていて、バグに遭遇したときも既に誰かがissueで議論して解決策が出ていたり、最近PRを出した人がいて最新バージョンでは直っていたりと、Contributorの方たちのおかげで快適に使うことができていることが多いと感じているので、今後もっとOSSに貢献していけたらと思います。
明日の担当はYHz_ikiriくんです、お楽しみにー
