UIコンポーネントのインタフェース

近年では、フロントエンドの開発は私の人生の重要な部分となった.しかし、私が数年前始めたとき、私はAPIが何であったかについて、わかりませんでした.私は彼らと仕事をしました、しかし、私はそれが正確に何であったかについて気にかけませんでした、あるいは、それが1を造ることを必要とするもの.私はUIのインタフェースの概念を知っていましたが、APIの文字「i」との関係は失われました.ある時点でコラボレーションがより重要になります.あなたの同僚はあなたの仕事を使用し、理解できるようにする必要があります.これは私がフロントエンドの開発でAPIとUIの接続を見始めた点です.

インターフェイスとは

フロントエンドエンジニアとして、常にあなたの仕事の再利用性を考慮してください.一方で、私たちの仕事も利用可能なユーザーにアクセスできます.両方の概念は、デザインシステムが注目の的になっている、現在の作業方法とともに来ます.ASAlla Kholmatova describes in her book 設計システムは再利用可能なパターンを含む.しかし、どのように、あなたは何かを再利用できるようにしますか?
これは、インターフェイスの概念が再生に来るところです.とても信頼できるものWikipedia 次のようにインターフェイスを定義します.

An interface is a shared boundary across which two or more separate components of a computer system exchange information

私のフロントエンドゴーグルでこの定義を見るとき、私は直接単語構成要素を見ます.一緒に動作する2つ以上の別々のUIコンポーネントは、我々がほとんどのデザインシステムを作成する方法です.インReact たとえば、子コンポーネントの子プロセスから親コンポーネントから子コンポーネントへのデータを提供します.これがフロントエンドの開発現場であり、インターフェイスをデザインし開発しているか.はい、そうです.
しかしながら、インターフェイスが役割を果たす唯一の場所ではありません.ユーザーがボタンをクリックするか、フォームで塗りつぶして、それを提出するとき、彼または彼女は我々の構成要素の1つ(またはより多く)と相互作用しています.ユーザーが対話しているUIは、インターフェイス定義からの共有境界です.ユーザーの相互作用は、私たちのコンポーネントに向けて彼または彼女の意図に関する情報を転送する方法です.

コンポーネント解剖

そこで、コンポーネントの設計と開発の際に2種類のインターフェイスを扱う.これらのコンポーネントの複数を組み合わせることにより、ユーザがシステムに接続するUIを作成することができます.すごい!できましたか.完全には.つのインターフェイスで何かを変更すると、同じコンポーネントの他のインターフェイスに影響を与えます.これを理解するために、我々はコンポーネント解剖学を見なければなりません.

UIコンポーネントは、相互に相互作用するいくつかの部分で、見ることができます.ユーザーがボタンをクリックすることによってUIと対話するとき、いくつかの論理はコンポーネントの中に引き金を引く.ロジックによっては、コンポーネント内でいくつかのことが起こります.コンポーネントの内部状態が更新され、バックエンドに要求を送信するか、またはユーザーに情報を提供します.コンポーネント内の1つの重要なパスが欠けています.APIを通じて、他のコンポーネントに情報を提供することができます.これは、コールバック関数を提供することによって、他のコンポーネントがコンポーネントに接続したときのみ動作しますonClick 「ボタン」コンポーネントの関数です.
あなたのコンポーネントはそれらのAPIを通して他の人に情報を提供することができます、そして、逆も同様です.別のコンポーネントは、APIを介してコンポーネントに情報を提供することができます.これは他のエンジニアが使うインターフェースです.私たちのコンポーネントは、別のAPIを介して接続するときにいくつかのロジックを実行します.論理に応じて、それはいずれかの内部状態を更新し、情報を提供したり、情報に基づいてUIを更新します.
最後の例では、他のコンポーネントと接続できるAPIを記述したコンポーネントです.これは、どのような情報を受け取ることができますが、情報を返すことができますどのようなタイプを説明しますonClick ). 私たちはしばしば他のエンジニアがUIコンポーネントの内部を知らないと仮定することができます.そこでインターフェイスは、他の人がどのようにして私たちの仕事を使用しているかを説明する方法になります.しかし、どのように我々は他の人がどのようにそれらと対話する必要があります知って確実にするインターフェイスを記述することができますか?

The interfaces become a way to describe how we want others to use and interact with our work

インタフェースの記述

この問題は、すでに適切なデザインを使用してユーザーの一部で解決されます.彼らがどこでどのようにあなたの構成要素と対話することができるかについてわかっているように、ユーザーに良い視覚的な待ち行列を提供することは良い第一歩です.第2のステップは、設計を実行することの範囲内で生きます.すべてのユーザーがUIをあなたが想像する方法と対話するわけではありません.これには様々な理由がありますが、大きな障害はありえます.ユーザーが部分的に盲目であるとき、彼または彼女はあなたのコンポーネントと対話するためにスクリーンリーダーを使用するかもしれません.UIのデザインは変更する必要はありませんが、実装レベルではこれらのユースケースを考慮します.これをaccessibility (or a11y ).
しかし、このポストの残りの部分では、エンジニアのインターフェースやAPIについて議論したい.他のエンジニアがUIコンポーネントと対話する方法を記述すると、些細な作業ではありません.エンジニアとして、私自身が含まれて、私たちはしばしば私たちの仕事は自明であると感じている.そうではない.我々は少なくともいくつかのことを記述する必要があります異なるレベルのエンジニアを確保するために我々の仕事を使用することができます.

私たちのUIコンポーネントのAPIは、それらにアクセスできます.

それぞれのAPIについては、どのようにそれを使用することができますどのような目的は(例えば、UIコンポーネントのスタイルに影響を与えることを記述するなど)です

実際の結果(UI)とAPI入力の異なる組合せの影響を示している例.

あなたは様々な方法で上記を達成することができます.あなたは、Markdownで広範囲のドキュメンテーションを書くことができます.md ) ファイル(例:README.md ). 楽しいオプションは、ドキュメンテーションウェブサイトを構築しています.彼女はどこでコンポーネントと対話することができます.それがあまりに大きい投資を必要とするならばGitbook or Storybook UIのコンポーネントを広範囲に記述するための良いテクニックです.

反応ガイドライン

今まで、多くのテキスト、あまりにも少ない例(私の悪い、ごめんなさい)だった.それで、あなたのAPIを説明するためにいくつかのポインタを議論しましょう.うまくいけば、例は他のフレームワークにも適用できます.反応して、あなたのAPIはprops 定義します.いくつかのプロパティを持つ小さなボタンの例を見てみましょう.

const Button = ({ onClick, variant, children, override, className, type }) => {
  return (
    <button
      onClick={onClick}
      type={type}
      className={`${override.defaultClassName} ${className}`}
      data-variant={variant}>
      {children}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['primary', 'stroke', 'flat']).isRequired,
  onClick: PropTypes.func.isRequired,
  override: PropTypes.object
};

Button.defaultProps = {
  variant: 'primary',
  className: '',
  override: {
    defaultClassName: 'btn'
  }
};

上部には、実際のコンポーネントが表示されます.にreturn ステートメントは、UIが生成されているかを参照しますが、我々はまた、小道具を適用する方法を見ることができます.もっと重要なのはButton.propTypes and Button.defaultProps この場合前者は、私たちが小道具の各々に期待する値のタイプを記述するために、そして、彼らが必要であるならば、反応する方法です.のためにvariant prop私たちも、それが持つことができる値を制限するのを見ます.
With defaultProps コンポーネントで使用される既定値を定義します.デフォルト値を使用すると、誰かが私たちのコンポーネントを使用するときに不要な副作用を回避する良い方法です.定義しない場合className , あなたが得るundefined 結果として.しかし、空の文字列にデフォルト値を設定するので、undefined . 誰かが定義されていないと呼ばれるCSSクラスを作成するとき、これは潜在的副作用を避けます.
奇妙に思えるかもしれない小道具の一つはoverride . ボタンのデフォルトクラス名を使いましょう.btn . それが賢明で良い名前であるけれども、異なったプロジェクトに取り組んでいる他の開発者は異なったデフォルトクラス名を使用するかもしれません.にoverride 通常使用するデフォルトの内部変数をオーバーライドすることができます.理想的に、それはほとんど使われません、しかし、それはあなたの構成要素を他の使用により強力にする簡単な方法です.開発者として、あなたは設定したくないoverride.defaultClassName 毎回.この場合、ラップする新しいコンポーネントを作成できますButton コンポーネント.これにより、他の開発者がコンポーネントの内部ロジックを知る必要がなくなります.

const PrimaryButton = (props) => (<Button
 variant="primary"
 override={{ defaultClassName='company-btn' }}
 {...props}
/>);

今何？

コンポーネントのインターフェイスは難しいです.UIコンポーネントを使用する他の開発者は、その内部に興味を持っていないかもしれません.それでも、彼らは彼らがどのように使用し、それと対話することを実現することを確認します.最後に、ユーザーインターフェイス、UIに影響を与えます.ユーザーはまた、どのように私たちのコンポーネントとの対話を理解する必要があります.これを達成しようとすると、小さな起動(例えばAPIの命名規則).そこから、このポストで説明されているよりもインタフェースのより良い方法を拡大して見つけることができます.
この記事はもともと投稿されたkevtiq.co