コンポーネントを実装するときに意識すること

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay8です！

昨日は「ActionTextとrails5系でも使えるWYSIWYGエディターgemをいろいろ試してみた」という記事でした！

ActionTextとrails5系でも使えるWYSIWYGエディターgemをいろいろ試してみた

はじめに

フロントエンドの開発において「Atomic Design」の言葉が出始めてしばらく経ちます。Atomic Designをつかったときのコンポーネントの実装については、現在も試行錯誤をしながら実装をしておりますが、コンポーネントを実装する際に弊社で気を付けていることをまとめたいと思います。

今回は下記のようなボタンコンポーネントを例にとって進めていきたいと思います。

ポイント1・命名規則

基本的なところですが、コンポーネントにおいて、どのような名前をつけるかはとても重要な項目の一つです。

上記のボタンが汎用的に使用するボタンだったとした場合、PostButtonのように特定のページで使用するような名前を使用した場合ほかのところでも使用できるものだったとしても名前のせいで汎用的なコンポーネントと認識できず、新規に作成してしまうケースもよく発生します。そのため、汎用的に使用できそうなコンポーネントであればDefaultButtonやPrimaryButtonのような汎用的な名前で作成しておくと今後の開発で効率よくコンポーネントが使用できます。

ポイント2・propsなどを設定できるようにする

再利用可能なコンポーネントにするためには、使用用途にあわせて柔軟に設定できたほうが使用しやすいです。例で示したボタンデザインにおいて可変になる可能性のある項目は以下があるかなと思われます。

上記のような項目はコンポーネントを使う上でよく可変になる項目なので、propsなどで外から値を渡せるようにするとより再利用しやすいいコンポーネントになります。

const DefaultButton = props => {
    const { text, size = "md", onClick, color = "#909090" } = props;
    if (size === "md") {
        return (
            <div
                class="btn-md"
                onClick={onClick}
                style={{ backgroundColor: color }}
            >
                <Text>{text}<Text>
            </div>
        );
        <div
            class="btn-sm"
            onClick={onClick}
            style={{ backgroundColor: color }}
        >
            {text}
        </div>
    }
}

例以外にも可変にするともしかしたら便利な項目もあったりするので、それらもpropsとして値を渡せるようにするとより良いコンポーネントになります。

ポイント3・同じようなコンポーネントを量産しない

コンポーネントを実装していると、例えば色が違うや大きさが少し違うなどで別のコンポーネントを実装してしまうときがあるかもしれません。ですが、それをしてしまうとポイント2でせっかく再利用可能にしたコンポーネントの利点が失われてしまい、特定のものに特化したコンポーネントが生まれてしまいます。

そのため、なるべく一つのコンポーネントに収めることができないかをまずは考えます。それでもできない場合が発生したときは別にコンポーネントを作成するといいと思います。

ポイント４・Atomic Designの分類分け

そもそもAtomic Designとは？

そもそもAtomic Designとはについてですが、Atomic Designとはアメリカのデザイナーであるブラッド・フロストさんの提唱したUIデザインの手法でUIのコンポーネント・パーツ単位で定義していく手法です。

コンポーネントの最小単位をAtoms(原子)として定義し、それらの集合体をMolecules(分子)、そのさらに大きな集合体をOrganisms(生体)、といった形で定義していきます。

これをすることにより、コンポーネントの整理ができるので、先ほどあげた同じようなコンポーネントの量産を防いだり、管理をしやすくするという考え方です。

今回のケースに当てはめる

今回のボタンコンポーネントに当てはめて考えてみましょう。先ほどのソースコードの中にはボタンの外観と中のテキストで構成されています。Atomsとはコンポーネントの最小単位、つまりそれ以上分解することができないので、タグ一つ一つをAtomsに定義することが多いです。また、Moleculesはそれらの集合体なので、Atomsが最低一つ以上入っているものになります。この定義で分類すると中のTextがAtoms、ボタンがMoleculesになります。

Atomic Designはあくまで考え方のひとつなので、かならずしもこの限りではありませんが、分類をする際にこのようなルールをプロジェクトチームなどで定めておくとわかりやすいです。

まとめ

今回はコンポーネントを実装するときに意識するきほんてきなことについてご紹介しました。これらを意識しながら実装すると、いままでよりもいいコンポーネントを実装できたり、新しい発見があるかもしれません。ぜひ参考にしてみてはいかがでしょうか？