背景
先日弊社CTOにより、社内UIライブラリがリリースされました(詳しくはこちらをご覧ください)。
結論からいうとかなり役に立ちました。そこで、今回はメンバー視点で特に社内UIライブラリがあって助かったことを3つ紹介させていただきます。
社内UIライブラリがあって助かったこと3選
1. 各プロジェクトに同じコンポーネントを作らずに済む
弊社の事業として、マナリンク高等学院とマナリンク小中等部 というものがあるのですが、オンラインフリースクールとサポート校ということで似たデザインになりやすいです。
そこで、社内UIライブラリを使用することで、各プロジェクトに共通するコンポーネントを一度作成すれば、他のプロジェクトでもそのまま再利用することができます。これにより、同じコンポーネントを複数回作成する手間が省け、開発時間の短縮が可能になります。
ただのボタンとかであれば、新規で作る方が早いかもしれませんが、アニメーションを設定するデザインや、お問い合わせフォームなどの場合、そちらを調整する工数の方がかかるように感じます。
例えば実際にあって嬉しかったコンポーネントは、添付した画像のような記事の内容を目次として表示するコンポーネントです。cheerioなどのライブラリを使うことでも実現できますが、余計なライブラリを入れなくても良いので、このコンポーネントはあって嬉しかったです。
2. 単純に勉強になる
自社でライブラリを作っているという状況のため、コントリビュートのハードルも比較的低く、勉強になります(私も先日コントリビュートしました)。
最近勉強になったこととしては、実際に作ったライブラリをimportできるようにするためにルートファイルにexportする処理を書く必要があるのですが、それに書き忘れて、importできないという事態に遭遇しました。そこで対策として、他のライブラリはどのようなことをやっているんだろうと思い調べました。
あるライブラリはJestでcomponents以下の名前を取り出し、それがルートファイルに存在するかどうかのテストファイルを書き、追加し忘れを防いでいるようでした。
「ライブラリってどうやってExportしているの？」「ライブラリの新規バージョンのリリースってどうやっているの？」「プライベートパッケージとは？」「リリースノートの作成ってどうやるのか」などをこれ以外にも実際に触ることで、疑問もどんどん増えていくと思います。社内UIライブラリがあることで、こういった勉強になる機会をいただけるのは、とてもありがたいなと思っています。
3. 改善要望をすぐに伝えることができる
ライブラリを探していると「このバグって治ったかな？」と思って、issueを見るとCloseされているが、最新バージョンでも適用されていないといったことはよくある事だと思います。
社内UIライブラリであれば、メンテナー(CTO)が社内にいるので「こういうケースに対応したく、こういったPropsを追加しようと思うのですが、汎用性やライブラリの制作目的は失われていないでしょうか？」のように、改善要望をすぐに伝えることが可能です。こういったスピード感は社内UIライブラリがあるからこそだと思います。
課題だと感じた点
1. 追加する基準がメンテナーに依存している
現状は「こういったコンポーネント作ったのですが、他のサービスでも使う機会あると思うので、追加したいです」とメンテナーに事あるごとに相談しています。ただこのような方針を続けると、メンテナーの工数もどんどん増えてしまいます。
どう解決するかに関してですが今考えているのは、セルフレビューと似た感じの「ライブラリ追加基準リスト」のようなものを作成して、それに合致している場合のみ社内UIライブラリへの追加ができるようにするなどの仕組みです。こういうものがあれば、UIライブラリへの追加依頼が全てメンテナーに行かず、多少は工数を削減できると思っています。
2. 破壊的変更があったときに気付けない
最近あったことですが、最新バージョンでリリースされたコンポーネントを使いたく、バージョンアップを行ったのですが、他のコンポーネントの色がおかしくなるというバグ？に遭遇しました。結局利用側でCSSを指定するようになるという変更が行われたらしく、そちらが原因だったようです。
バージョンを上げるたびにリリースノートを見るのが一番良いと思いますが、そういったことが苦手なメンバーもいると思います。例えば、リリースノートを作成するGithub Actionsを実行する際に、同時にリリースノートをSlack通知で送るとかすれば、自動化できてとてもいいかなと思っています！
おわりに
今回は社内UIライブラリの作成によるメンバー視点のメリットを3つ紹介させていただきました。最近作られたライブラリということで、まだまだ改善できる点もあると思うので、コントリビュートからテストなど協力していきたいと思います。
告知
社内向けUIライブラリについて詳しく知りたい方いらっしゃいましたら、カジュアル面談としてCTOからお話することもできますので、ぜひ以下のGoogle Formからお申し込みください！オフィス来訪いただければ実際のソースコード・ビルド設定など詳しく話せます。
Google Form
Pitta（Meety）
オンライン家庭教師マナリンクを運営するスタートアップNoSchoolのテックブログです。 manalink.jp/ 創業以来年次200％前後で売上成長しつつ、技術面・組織面での課題に日々向き合っています。 カジュアル面談はこちら！ forms.gle/fGAk3vDqKv4Dg2MN7
Discussion