OSSコントリビュート、意外と簡単説
大学4年生のkawaiです！
憧れだったOSSコントリビュートをすることができたので共有したいと思います。
概要
今回コントリビュートしたのは日本初のUIライブラリ「Yamada UI」です
OSSコミット、チャレンジしてみるか、、
一年ほど前にリリースされ、「なんだか凄そう、、」と思って、Hiroto YamadaさんのXをフォローしていました。
フォローしていると時々以下のようなポストが流れてきます。恐らく新しくOSSコントリビューターを増やすために、簡単なタスク(good first issue)を用意してくださっているのだと思います。
このようなポストを見るうちにOSSコントリビュートするしかない！と思い立って今回挑戦してみました。
今回担当したissue
issueの内容
Provide the exact quote of the error or issue
We should use <For /> component when repeating a component
e.g.
<For each={items}>{(item, index) => <Text key={index} fontWeight="bold">{item}</Text>}</For>
以下ののドキュメントのコードのリファクタリングです。
Cardコンポーネントのコードが繰り返されている箇所があったので、Forコンポーネントに置き換えるというissueでした。
Card以外のコンポーネントも同じように、Forでリファクタリングするというissueやマージ済みのPRがたくさんあったので、参考にしながら進めることができました。
実装したプルリクエスト
コード
以下のようにForコンポーネントを使うことで、コードを簡潔にすることができました。
-<Card variant="subtle" colorScheme="green">
- <CardHeader>
- <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
- </CardHeader>
-
- <CardBody>
- <Text>
- 『SLAM
- DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。-主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
- </Text>
- </CardBody>
- </Card>
-
- <Card variant="solid" colorScheme="pink">
- <CardHeader>
- <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
- </CardHeader>
-
- <CardBody>
- <Text>
- 『SLAM
- DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画作品。-主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
- </Text>
- </CardBody>
- </Card>
+ <For each={["sm", "md", "normal", "lg"]}>
+ {(size, index) => (
+ <Card key={index} size={size}>
+ <CardHeader>
+ <Heading size="md">『SLAM DUNK』（スラムダンク）</Heading>
+ </CardHeader>
+
+ <CardBody>
+ <Text>
+ 『SLAM
+ DUNK』（スラムダンク）は、バスケットボールを題材にした井上雄彦による日本の漫画+作品。主人公の不良少年桜木花道の挑戦と成長を軸にしたバスケットボール漫画。
+ </Text>
+ </CardBody>
+ </Card>
+ )}
+ </For>
最後に
実装は修正も含めて1時間もかからなかったと思いますし、初心者の方でも時間をかければできそうなIssueだと感じました！
日本からリリースされたUIライブラリということでドキュメントも日本語で書かれていて、スムーズにIssueにアサインされるところからマージまで達成できました
初心者向けのgood first issueはまだまだあるのでぜひ取り組んでみてください！
Discussion