UIコンポーネントを開発するときに押さえておきたい『FIRSTの原則』
FIRST とは
GoogleのエンジニアであるAddy Osmaniさんが公開した以下の記事に提唱された内容です。
（本ページは主にこのページの要約を記載しています）
また、自身の整理のためにまとめているため、誤り等ありましたらご指摘ください。
要するに何？
以下の頭文字（括弧内）をとったものを観点として、コンポーネントとして切り出すことを提唱しています。
| UI コンポーネント化の時の観点 | 日本語訳 |
|---|---|
| Keep it (F)ocused. | 焦点を絞る |
| Keep it (I)ndependent. | 独立させる |
| Keep it (R)eusable. | 再利用可能にする |
| Keep it (S)mall. | 小さくする |
| Keep it (T)estable. | テスト可能にする |
対象読者
UIコンポーネントを考えるときに、どこをコンポーネントとするのか迷うことがある方
各観点の詳細
原文の説明順に観点を紹介するので順番が『FIRST』と異なっていますが、ご了承ください。
Keep it (S)mall.~小さくする~
原文
In fact, the secret to efficiently building ‘large’ things is generally to avoid building them in the first place. Instead, compose your large thing out of smaller, more focused pieces.
日本語
実際、「大きな」ものを効率的に構築する秘訣は、一般に、最初の段階で構築しないことです。その代わりに、大きなものをより小さくより焦点を絞った部分から構成するのです。
メリット
小さくするメリットは、以下のとおりです。
- 小さなものは作ることが容易（大きなものは小さなものからできあがる）
- 小さいAPIは学習しやすい
Keep it (R)eusable.~再利用可能にする~
原文
Code reuse can save you time.
You're likely to discover flaws in the original design that you improve on over time, but the more your component is reused, the more you fix these flaws, improving reusability.
日本語
コードの再利用は時間を節約することができます。
ゼロから書くよりも、既存のコンポーネントをそのまま使える方が助かります。しかし、コンポーネントが再利用されればされるほど、これらの欠点が修正され、再利用性が向上します。
メリット
再利用性は以下のメリットがあります。
- コード再利用は時間を節約する
- 再利用できるということは、構造化されよく定義されたコードを書けている証拠となる
Keep it (F)ocused.~焦点を絞る~
原文
On the whole, approaching components with modularity and a focus in mind increases reuse, eases maintenance and improves extensibility. Diligence does need to be taken with making something ‘focused’ however.
日本語
全体として、モジュール性とフォーカスを意識してコンポーネントにアプローチすることで、再利用が増加し、メンテナンスが容易になり、拡張性が向上します。しかし、「フォーカス」されたものを作るには、慎重さが必要です。
メリット
焦点を絞ったコンポーネントを作ると、以下のメリットが発生します。
- 複雑さが減り、保守性の向上につながる
- 小さな、より細かいピースに大きなシステムを分割できるため、より簡単に理解できる
Keep it (I)ndependent.~独立させる~
原文
Separation of concerns. If each component addresses a specific concern, this simplifies the update cycle as one component doesn't always need to know the details of others.
日本語
懸念事項の分離。各コンポーネントが特定の問題に対処している場合、あるコンポーネントが他のコンポーネントの詳細を常に知っている必要がないため、更新サイクルが単純化されます。
メリット
独立させることで、以下のメリットがあります。
- システムの論理的で関連性のある部分が分離でき、保守性の向上につながる
- 更新サイクルが単純化される
Keep it (T)estable.~テスト可能にする~
原文
By splitting out a component into something smaller, it’s generally easier to test and document. Keeping your component source DRY can help.
日本語
コンポーネントをより小さなものに分割することで、一般にテストや文書化が容易になる。コンポーネントソースを DRY に保つことは有効である。
メリット
こちらは、『FIRST』の原則に基づいたときに発生するメリットの事になりますが、以下が考えられます。
- テストや文書化が容易になる
- コンポーネント単体での動作確認が可能になる
あとがき
各観点が重なっている印象を受けました。
また、共通コンポーネントとするかの判断軸が以下のようにかかれていて、「なるほど」となりました。
- 共有されるコンポーネントを構築する場合は、APIの機能が90%以上のユーザーで使用されるかを確認する
- 10%未満で使用される場合は、別のコンポーネントやモジュールにすることを検討する
コンポーネントを作る場合は『FIRST』を意識して開発したいですね。
Discussion