フロントエンドのコンポーネントづくり

2019.07.15

こんにちは。

フロントエンドのコンポーネントづくりについて、今日はご紹介したいとおもいます。

はじめに

弊社では、Facebookとコミュニティによって開発されているユーザインタフェースを構築するためのJavaScriptライブラリである React を、積極的に採用しています。

理由としては、

  • コンポーネントベースであること
  • 薄いフレームワークであること
  • 何よりも、実装していて楽しい // 重要

です。

それでは、フロントエンドのコンポーネントづくりを、設計(定義)〜実装〜運用という流れで見ていきましょう。

設計

コンポーネント設計のポイントは、ワイヤーフレームの情報設計です。

情報設計ができていない状態のまま実装を進めると、後々のフェーズになってから仕様に大幅な変更が加わる可能性があります。

コンポーネントの自体の設計がしっかりしていても、ワイヤーフレームコンポーネントの責務が仕様変更により増えたり、保守がむずかしいコンポーネントが生まれる可能性が高くなります。

場合によっては、コンポーネント自体の作り直しも発生するでしょう。

今回は情報設計には触れませんが、情報設計がきちんとなされることが重要で、その設計でデザインが仕上がっていると仮定します。

まず、コンポーネントを定義するには、仕上がったデザインやワイヤーフレームからどれがコンポーネントなのかを読み解く力が必要です。

そのためには、実装者の利用シーンを想像することが大切です。

  • どの画面で使われるか
  • 共通にする粒度
  • 可変である要素(プロパティ)

を考慮しながら設計しなくてはなりません。

特にプロパティは、単純なボタンを1つ例にとっても、

  • ボタンのラベル
  • ボタンの幅(固定、それとも幅100%?)
  • ボタンの種類(削除のような危険な操作をするボタンなのか、通常のボタンなのか)

などがあるでしょう。

コンポーネントの定義は難しく、良いコンポーネントの定義に答えはありません。 利用シーンやプロダクトの状況などに応じて答えはさまざまです。

ただ一ついえることは、コンポーネントを使って実装する際に初めて良いかどうかは分かります。 最適な状態になるように、メンテナンスができれば理想です。

実装

実装におけるポイントは、開発環境作りです。開発環境作りさえしっかりしていれば、安定した実装を行うことができます。

弊社では、コンポーネントを作る際に、React(React Hooks) + TypeScript + Sassを使った CSS Module をベースにしています。

Facebookが 2019年2月に発表した React Hooks は 関数コンポーネントから使える新しいAPI ですが、 何よりも従来のクラスコンポーネントに比べて、本質的な実装に集中することができます。 そして、TypeScript によりコンポーネントに型を導入することができ、より使いやすく、より安全になります。 CSS Module を導入することで、コンポーネントに閉じたスタイルを適応することができます。

たとえば、ボタンを実装する場合は、このようになります。

/* button.tsx */
import * as style from './style.scss'

interface Props {
  children: string;
  // ボタンに必要なプロパティを定義
}

const Button: React.FunctionComponent<Props> = (props: Props) => {
    const {children} = props;
    return (
        <button
          className={style.button}
          onClick={onClick}
        >
        {children}
        </button>
    );
};

export default Button;
/* style.scss */
.button {
    // ボタンのスタイルを定義
}

デザインの実装にうつります。

最近は、ワイヤーフレームを作成したあと Sketch でデザインし、 Zeplin でデザインパーツを共有するという手法をとっています。

Zeplin を使うと、パーツからCSSを簡単に取得できることもあり、非常に高速にコンポーネントの実装をすすめることができます。

たとえば、上のボタンの場合 Sketch でデザインされたボタンの場合、このようなCSSを抽出することができます。

width: 480px;
height: 80px;
border-radius: 16px;
box-shadow: 0 4px 2px 0 rgba(0, 0, 0, 0.3),
            inset 0 6px 0 0 rgba(202, 234, 255, 0.6);
border: solid 4px #1b4866;
background-color: #3aa1e6;

そして、コンポーネントにCSS(スタイル)を埋め込みながら、可変にするプロパティを設定しコンポーネントに適用します。

また、要素が溢れた場合なども考慮して調整することで、より汎用的なコンポーネントに仕上げていきます。

運用

コンポーネントを用いて様々な画面を作っていくと、既存のコンポーネントに対しての変更が発生します。

その際は、以下の点に注意した上でコンポーネントを運用していくことが大切です。

  • ひとつのコンポーネントの責務を増やしすぎない
  • コンポーネントのスタイルは、コンポーネント内で閉じたものにする
  • コンポーネントに状態をもたせるときは、コンポーネント内で完結したものにする

最後に

コンポーネントを上手に定義すると、フロントエンドが運用しやすくなります。

使いやすいコンポーネントを作るということは、正解がありません。

このフローも常にアップデートされていくことになるとおもいますが、参考になれば幸いです。

インパスではフロントエンドエンジニアを募集しています。
すこしでも興味をもたれた方は、ぜひご連絡ください。