コンポーネント名には何を含めるべきなのか？ / what-should-be-included-in-component-names

Transcript

1. コンポーネント名には 何を含めるべきなのか？ airRnot / @airRnot1106 2026/07/27 # 雑 LT_study
2. 自己紹介 airRnot • 24 卒 • フロントエンドエンジニア • Next.js と Neovim と Nix が好き • : @airRnot1106 • : @airRnot1106 1 / 13
3. 突然ですが……
4. これは何でしょう？ 2 / 13
5. （ヒント: 「す」が「ない」から…… 👍） 2 / 13
6. 正解は…… 3 / 13
7. 「す」がない五十音表 4 / 13
8. え、ナイス？？ 5 / 13
9. コンポーネント名を考えるとき、 これを「ナイス」ではなく 「 『す』がない五十音表」と 捉えられる感覚が重要！！ 6 / 13
10. つまり……？
11. 命名に必要なのは、 連想する能力ではなく 物事のありのままの 性質・依存関係を見抜く能力 7 / 13
12. 命名の話
13. 命名とは？ コンテキストが持つ概念を明らかにし、一定の順序で並べること コンポーネントだと…… コメントを 投稿する フォーム • コメント: 関心 • 投稿する: 状況 • フォーム: 基礎 3 つの概念によって構成されている 8 / 13
14. 命名とは？ すべてのコンポーネントは、以下の 4 種類のいずれかに分類できる • 基礎 : アイコン • 状況 + 基礎 : 検索アイコン • 関心 + 基礎 : ユーザーアイコン • 関心 + 状況 + 基礎 : ユーザーを検索するアイコン 9 / 13
15. 命名とは？ 特に重要なのは基礎 基礎とは、UI としての型で、基礎的な機能そのものを指す フォーム / ボタン / テキストボックス / ダイアログ / ドロップダウ ン / タブ / スライダー / カレンダー / チェックボックス / ラジオボタ ン / トグルスイッチ / プログレスバー / スピナー / ツールチップ / ポップオーバー / アコーディオン / カード / リスト / テーブル / サイ ドバー / フッター / etc… 10 / 13
16. 命名とは？ 曖昧なコンポーネント名には、基礎が含まれていないことが多い ～Info / ～Pickup / ～Result → UI の型を捉えて、コンポーネント名に反映させよう ～InfoBar / ～PickupList / ～ResultCard 「捉えて、反映させる」 ―― これが命名の肝！ 11 / 13
17. 命名とは？ 関心と状況も同様 コンポーネントは、すでにそれらを持っている コンポーネント名は決めるものではなく その性質や依存によって勝手に決まるもの 我々はその名前を明らかにするだけ 命名ではなく、明名しよう！ 12 / 13
18. 明名とは？ コンテキストが持つ概念を明らかにし、一定の順序で並べること より詳しい解説は、こちらの記事をご覧ください 13 / 13