React.jsの勉強会に参加してデザインのコンポーネント化できないWEBデザイナーはやばいかもっていう話

React.jsの勉強会に参加してデザインのコンポーネント化できないWEBデザイナーはやばいかもっていう話

先日、友人の会社主催のReact.js勉強会に参加しました。といっても知り合いのエンジニアが集まる勉強会なので、ほぼ身内。だいたいのハンズオンが終わったあとに議題に挙がったのが、デザインのコンポーネント化についてでした。
結論、WEBデザイナーにコンポーネント化の理解がないときびしいよねって話です。

React.jsについて

Facebookが作ったライブラリでMGithub製のAtomInstagramなどが採用していて注目されています。さらにReact.jsはMVCフレームワークのViewの部分をComponentと呼ばれる部品を作っていくライブラリです。なので、Backbone.jsのView部分をReact.jsにすることもできます。

A JavaScript library for building user interfaces | React

https://facebook.github.io/react/

https://facebook.github.io/react/

Componentとは

例えばHelloというコンポーネントを作るとしたらこんな感じ。

var Hello = React.createClass({
  render() {
    return (
      <div><span>hello</span></div>
    )
  }
})

簡単にいっちゃえば上記のようなjsでComponentと呼ばれる部品をたくさん作り組み合わせてページをつくりましょう、というもの。

ここで思ったのが、いくらJS側でコンポーネント化されていたとしてもデザインがコンポーネント化されていなければ何の意味もないんですよね。というのもいろんな会社でReact.jsが使われてきていますし、AngularJSにしてもコンポーネント志向ですし、今後もコーポーネント化は進んでいくのではと思います。JSフレームワーク使うならデザイナー(ここでいうデザイナーはフロントエンドエンジニアやPhotoshopなどでページデザインをするデザイナーも含める)もコンポーネント化の理解が必要になっていきます。

デザインにおけるコンポーネント化

フロントエンドエンジニア、マークアップエンジニアにとってはCSSのコンポーネント化は以前から使われている手法です。モジュール化と言われたり、コンポーネント化と言われたりしていますが。

ただ、今後求められるのは高い次元でのコンポーネント化ではないかなと思います。もっといえばMaterial designBootstrapFoundationに代表されるフレームワークレベルのコンポーネント化です。フロントエンドエンジニアにはそれくらいレベルのCSS設計が求められると思います。さらに、ページデザインをするデザイナー(ここでは分業を想定)にもフレームワークレベルのパーツデザインが求められます。

なので、デザインにしてもコーディングにしてもそれらコンポーネントを部品として使い回し組み立てるって感じですね。なのでデザイナーにも、コンポーネント化の理解もっというとJSとCSSなどコーディングの理解が必要になります。

コンポーネント化のポイント

CSSを設計する上で

  • わかりやすい
  • 探しやすい
  • 再利用しやすい
  • 拡張しやすい

っていうのは大原則ですよね。この辺を理解しつつさらに

コンポーネント間で依存関係がない
コンポーネント同士で依存しあわないデザインでなければいけません。CSSで言えば

.detail .title{
	
}

.list .title{
	
}

は良くないです。親要素のクラスセレクタに依存してしまっていますね。これでは再利用することもできないです。これはコーディングの内容ですが、ページデザインを起こす段階から、CSSの設計を考慮して作る必要がありそうです。めっちゃ難しいけど。

なので、ページをデザインするよりかはそれ単体で完結しているパーツを作り、それらの集合体でページを作るイメージが大事なのかなと思います。それこそがフレームワークレベルのパーツデザインにつながると思います。

BEMが相性よさそう

まーこれは好き嫌いあるし絶対BEMがいいとは思いませんが、CSSの書きやすさ、分かりやすさという点でコンポーネント化と相性はいいと思います。

先ほども「単体で完結しているパーツを作り」としました。BEMでいうところのBlockにあたる部分ですね。Blockのセレクタ名がそのままコンポーネントとして使いまわすことができます。ElementやModifierと組み合わせればパーツで完結しかつ、他のコンポーネントを依存しあわない設計ができます。

よくあるカードデザインにサムネイルとテキストを表示させるコンポーネントのマークアップなら

<div class="card card--white media">
	<div class="media__left">
		<img src="hoge.jpg" class="thumb thumb--circle" alt="hoge">
	</div>
	<div class="media__right">
		<span class="text text--primary">ほげほげ</span>
	</div>
</div>

こんなかんじでパーツのみで完結させることができますし、BEMならマークアップからスタイルが連想しやすくできます。とはいえOOCSSとかSMACSSでも同じような考えですけどね。。。

スタイルガイドラインの必要性

部品を組み立ててページデザインを行うので、そのパーツがどんな見た目でどんなHTMLでどんなCSSかっていうのが一目でわかる必要があります。なので、コンポーネント化するなら必須といえます。その際にStyleDoccoと言われるNode.jsで作られたスタイルガイドジェネレータを使うと便利ではないかなと思います。

CSSにStyleDoccoのルールに沿ったコメントを書くことでCSSのスタイルガイドを自動的に作成することができます。僕も現場で使ったことはないので今後導入していきたいツールです。GulpのプラグインもあるのでWatchしながらできそうだしよさそうです。今度サンプルを作ってみようかなと思います。

CSSスタイルガイドのススメ(StyleDocco入門編) | MONSTER DIVE【モンスターダイブ】

http://www.monster-dive.com/blog/web_creative/20130726_001058.php

http://www.monster-dive.com/blog/web_creative/20130726_001058.php

gulp-styledocco

https://www.npmjs.com/package/gulp-styledocco

https://www.npmjs.com/package/gulp-styledocco

Gulp+stylus+styledoccoでフロントのスタイルガイド生成 | T2

http://makoto-tanaka.com/%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89/5723/

http://makoto-tanaka.com/%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89/5723/

まとめ

React.jsの勉強会に参加してみて議題に挙がったこと、自分なりに考えたことを記事にさせていただきました。

フレームワークのようなデザイン、CSS設計を行えることで強みにできるなと思います。最近ではそんなにHTMLやCSSの知識がなくても簡単なWEBサイトを作れるツールやサービスが増えてきました。今後WEBデザイナーやフロントエンジニア、マークアップエンジニアとして生き残っていくためにもReact.jsさらにフレームワークのようなコンポーネント設計というのは差別化できるなと思います。JavaScriptが得意ではないWEBデザイナーさんでも高い次元でコンポーネント設計ができると強みになるなと。

## オススメの本



WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

イチからわかる!Reactの仕組みと使い方UIコードの再利用化と速度向上を図る!Reactのコンセプト、コンポーネント、JSX、活用テクニック、一歩進んだ使い方を解説!

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ