UI構築における重要な課題は、使いやすさと保守性、そして規模や複雑さのバランスを取ることだ。安定し、かつユーザーフレンドリーなUIを作るには、思慮深いコンポーネント設計と一般的な使用経路の理解が必要だ。自動化は、コードベースの効率と一貫性を改善する上で、画期的な変化となりうる。
Glenn Reyes氏は、NDCオスロ2023で安全なUIコンポーネントの構築について語った。
Reyes氏は、UIの構築は、特にスケーリングに関してユニークな課題があると述べた。主な課題点は、プロジェクトの複雑さが徐々に増したとしても、シンプルさと安全性を維持することにある。
Reyes氏は、UIの構築で重要なのは、コンポーネントのAPIサーフェスエリア(他者やコードが干渉できるAPI部分のこと)を最小限に保つことだと述べた。これはエラーの可能性を減らすだけでなく、コンポーネントの保守性を高め、エンジニアリング・チームにとって使いやすくする。複雑な部分に深入りするのを防ぎ、よりスムーズでエラーのない開発プロセスを促進する。
もっとも一般的で効果的な使用方法へとユーザーを自然に導くような方法でコンポーネントを作成する必要がある。通常の使用経路を直感的なものにし、回避策をあまりアピールしないようにすることは難しいかもしれないが、コンポーネントがただしく効率的に使用されるようにするためには必要なことだ。
PrettierやESLintのような、コードのスタイリングやフォーマットのためのツールは、ワークフローを合理化できるとReyes氏は言う。これらのツールは自動的に一貫したコードスタイルを強制するので、コードレビュー中にフォーマットについて議論する必要がなくなる。そうすることで、チームは見た目よりもコードのロジックや機能に集中できる。
ユーザーインターフェースのコードを確実に保守できるようにするために、Reyes氏はいくつかの戦略を提示した。
- デザイン・システムを採用する:デザイン・システムを活用することで、UIコンポーネントの一貫性を保ち、メンテナンスが容易になる。デザイン・システムは、アプリケーションのビジュアル言語を形成する要素やガイドラインを詳述し、単一の真実のソースとして機能する。
- デザイントークンを実装する:デザイントークンは、色、タイポグラフィ、スペーシングなどの値を表すことができ、アプリケーションのさまざまな部分で一貫性を保てる。単一のトークンを変更することで、そのトークンを使用しているすべてのコンポーネントに変更を反映させ、更新がよりシンプルで効率的になる。
- コンポーネントの間隔を管理する:コンポーネント間の間隔は、各コンポーネントにハードコードされるのではなく、親コンポーネントによって制御されるべきである。これにより、懸念事項の分離がより確実になり、コンポーネントの再利用性と保守性が向上する。
- TypeScriptを使う:TypeScriptは静的型付けを導入することで、保守性を大幅に向上させる。また、"style "や "class "のようなスタイリングのためのプリミティブなHTML属性を省略することを推奨している。これは、より良い型安全性、エラーの早期発見、開発者ツールの改善に貢献し、これらすべてがUIコードをより保守しやすくする。
InfoQは、安全なUIコンポーネントの構築についてGlenn Reyes氏にインタビューした。
InfoQ: 「安全なUI」をどのように定義するか?どのような特徴があるのか?
Glenn Reyes氏「安全なUI」とは、強固で信頼性が高く、誰にとってもうまく機能するものだ。安全なUIの特徴は以下の通りだ。
1.使いやすい: シンプルで直感的に理解でき、使いやすい。 一貫性: どのデバイスやブラウザでも、いつでも同じように表示され、動作します。
2.ミスに強い: エラーやユーザー入力の間違いなど、予期せぬことが起きても、故障せず、優雅に回復します。
3.成長に対応: ユーザーやプロジェクトのニーズに応じて、簡単に成長・変化できるように構築されています。
4.誰もが利用しやすい: 障害を持つ人を含め、誰もが快適に利用できるように設計されています。
5.アップデートが容易:問題を引き起こしたり、他の部分を壊したりすることなく、修正、変更、アップデートが簡単にできます。
要するに、安全なUIはよく機能し、ユーザーフレンドリーで、信頼性が高く、成長に対応でき、誰もがアクセスできる。また、メンテナンスや更新も簡単だ。
InfoQ: どのようなツールがあり、どのようなメリットをもたらすのか?
Reyes氏:マップ関数でレンダリングされるような変数リストを扱うと、コードに予測不可能性が生じることがある。これを克服するには、「順序ルール」を追加することで、決定論的な振る舞いを強制できる。これには、アルファベット順に並べ替えたり、特定のパターンに基づいてグループ化したりすることが含まれる。これにより一貫性が確保され、コードレビュー中の差分における不要なノイズが減り、レビュープロセスがよりスムーズで集中したものになる。
アプリ内で直接UIコンポーネントをビルドすると、目的のコンポーネントに取り掛かるまでに何度もやりとりが必要になるかもしれない。特に、フォーム・フィールドのエラー・メッセージのように、特定の状態に依存するコンポーネントを扱う場合、これは非効率的である。手作業でエラー・ステートを誘導する代わりに、このステートを即座に分離して表示して作業できるツールやアプローチを使うことを検討しよう。これは時間の節約になるだけでなく、周囲の状況に気を取られることなく、手元のコンポーネントだけに集中できる。