こんにちは、エンジニアの egurinko です。TSKaigi 2025 の takanorip さんの堅牢なデザインシステムをつくるためのTypeScript活用の発表では、デザインシステムを作る上でのたくさんの Tips が紹介されていました。そこで、そのうちの 1 つである JSDoc の追加をギフティのデザインシステムに適用してみました。
なぜ追加したのか？
発表内容でも言及されていましたが、ドキュメントの確認回数を削減し開発効率をあげることが狙いです。以下の画像は、JSDoc 追加前にデザインシステムの React コンポーネントに variant Prop を追加しようとした時のコードヒントです。デフォルトでも型定義が見えますが、それがどんな Prop なのかを確認するには、ドキュメントを見にいく必要がありました。
実際に JSDoc を追加した後の画像が以下です。型定義だけではなく、該当 Prop の説明やデフォルト値などを表示することができました。ドキュメントを参照することがなくなるとは言いませんが、デザインシステムを使い慣れていない方には特に効果がありそうです。
どう追加したのか？
ギフティのデザインシステムには、執筆時点で 20 の React コンポーネントがあります。また、それぞれに Props が存在するため、ドキュメントを追加するだけでも一苦労です。そこで、ドキュメント追加を雑に Devin にお願いしてみました。表題の発表ではドキュメンテーションは AI に任せると良いという Tips もありましたので、その知見も活かしてみました。
さすがにお願いが雑すぎたのか、該当の commit を見ると、コンポーネントの Props 定義そのものに JSDoc を追加してしまいました。
これ自体悪くないのですが、実際の開発では Props そのものを import して参照するよりも、コンポーネントを利用する中で個別の Prop を参照することが多いです。そこで、Ubie さんのデザインシステムの例を参考に個別の Prop に JSDoc を追加するよう Devin に追加で指示を出しました。
ここまでで内容を確認すると、9 割方良いものが出来上がっていました。そこから、最後に人間が仕上げを行い JSDoc の大量の追加をものの 30 分で終えることができました。Devin ありがたやです。
今後やりたいこと
今回 JSDoc を整備してみてわかったことは、JSDoc は想像以上に開発効率を上げることに効果があるということです。そこで、Material UI のコードヒントを確認してみました。すると、Props は今回追加したものと同じように説明とデフォルト値のみでしたが、コンポーネントのコードヒントには該当のコンポーネントへのドキュメントが書かれていました。
確かに対象のドキュメントへ辿り着くスピードを上げるのも 1 つの効率化になるので、こちらも生成 AI を利用しつつ追加していきたいなと思いました。
まとめ
今回は、TSKaigi 2025 の takanorip さんの発表に触発されて、JSDoc を Devin でつけてみたということについて書いてみました。
ギフティではデザインシステムを一緒に考えていけるようなエンジニア/デザイナーも絶賛募集中です。気になる方は、是非一度カジュアル面談でもなんでも良いので一度お話ししましょう！
