2020年12月8日

プログラミング

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

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

目次

  1. はじめに
  2. ポイント1・命名規則
  3. ポイント2・propsなどを設定できるようにする
  4. ポイント3・同じようなコンポーネントを量産しない
  5. ポイント4・Atomic Designの分類分け
  6. まとめ

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

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

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

はじめに

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

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

Group 1.png (3.9 kB)

ポイント1・命名規則

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

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

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

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

可変にすると便利そうな項目

  • text (ボタンテキスト)
  • backgroundColor (背景色)
  • size (width / height など)
  • margin
  • onClick() などのボタンを押したときの挙動

Group 3.png (15.2 kB)

上記のような項目はコンポーネントを使う上でよく可変になる項目なので、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でせっかく再利用可能にしたコンポーネントの利点が失われてしまい、特定のものに特化したコンポーネントが生まれてしまいます。

Group 4.png (14.2 kB)

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

Group 5.png (16.4 kB)

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

そもそもAtomic Designとは?

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

スクリーンショット 2018-11-29 15.22.23.png (510.9 kB)

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

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

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

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

Group 6.png (11.1 kB)

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

まとめ

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

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP