Atomic Design本を写経して感じたこと

Bonfire Design #3で一緒に登壇した五藤さん(@ygoto3_)が書いた「Atomic Design - 堅牢で使いやすいUIを効率よく設計する」を読みました。基本はAtomicDesignに関する話がメインですが、現在の開発状況に至るまでの過程や仕組みから話が展開されるので非常に分かりやすかったのと、少し前のweb開発体制を知らない僕にとっては視野が広がり読んでて純粋に楽しかったです。

Atomic Design ?堅牢で使いやすいUIを効率良く設計する

デザイナー視点で読んだ感想

エンジニアが書いていることもあって、「エンジニアリング的思考」をコンポーネント単位で解説している点が非常に参考になりました。デザイナーはデザインの観点だけでなく実装のしやすさも考慮に入れてコンポーネントを作るのですが、「どういう単位で」「どういう命名規則で」「どうやって管理するのか」などはエンジニアとコミュニケーションを取って進めていくことが多いと思うので、そういったエンジニアリングの観点からの言及があるのはありがたいです。

写経した感想

本書にはサンプルプロジェクトが載っていてReactを使ってコンポーネントを作る過程を体験することができます。僕自身Reactはほとんど触ったことなかったのですが、実装まで入ってサービスを作っていきたいので写経してみました。全部終わってませんが、コンポーネント作成を一通り終えた時点で感じたことは「デザイナーこそ写経すべき」と強く思いました。

主な理由は2つ。

1. エンジニアがコンポーネントをどうやって作っているか体験できるため、デザインデータを渡す時に何を配慮すればよいかが自然と見えてくる
2. (実装まで触る人は)デザイナーがコンポーネント管理まで入ることでエンジニアの負担を減らせる

特に実装まで入るデザイナーはReactの思想とAtomicDesignは強力な組み合わせだと実感できるので、「なんとなくよさそう」から「デザイナー、エンジニアにとって確実に有益」に考えがシフトすると思います。またコンポーネント開発フローを体験することでいざ、チームに導入しようした時の判断材料も見えてくると思います。 最近はSketchを使ってデザインデータを作ることが主流なのもあり、Symbolを上手く使ってAtoms, Moleculesと組み合わせて作ることはデザイン製作のスピードを上げるのにも非常に役立つと思います。

個人的には4-3のプレゼンテーショナルコンポーネントとコンテナーコンポーネントの表示と見た目のロジックの話は目から鱗でした。エンジニアにとっては当たり前？なのかもしれませんが、メンテナンスしやすい仕組みづくりに感動した感じですね。僕もデザインデータを管理しやすいように意識して制作していますが、「管理しやすいデザインデータの仕組み化」はデザイナーにとって課題なので参考にできる部分がありそうに感じました。

写経してハマったポイント

サンプルコードは解説が丁寧で非常に分かりやすかったのですが、React(というかJavascript？)がほとんど未経験だったからか、途中から急にサンプルコードが難しく感じました。というのも構文に関する説明はほとんどないため、試しに触ってみるか〜と軽い気持ちでやって予想してたよりも(理解のために何度もコードを読んだため)時間がかかりました。

特にハマった点を振り返りのためにざっくりまとめます。

アロー関数

hoge = function(x){
  x > 0 ? x : 0;
}

を

const hoge = (x) => { x > 0 ? x : 0 }

のように書ける。手前の括弧は引数だと読んでるうちに気づいたのですが、次のコードを見て不安になりました。

参考: http://ushumpei.hatenablog.com/entry/2016/09/06/235336

二重のアロー関数

const fuga = x => y => x + y;

これを見たときは？？？となりましたが、どうやら下のコードと同じ模様

const hoge = (x, y) => x + y;

引数が複数ある場合はこう書けるらしい。

参考: https://stackoverflow.com/questions/32782922/what-do-multiple-arrow-functions-mean-in-javascript

export default の意味

jsファイル冒頭に書くimportで

import InfoTxt from ... import { InfoTxt } from ...

の二種類があり、どうやら

• export default InfoTxtと書いてあれば中括弧はいらない
• export const InfoTxt = () => ...と書いたら中括弧は必須

らしい。エラーメッセージにも出てこなくて、ここのエラーでめちゃくちゃハマった。。。

まとめ

AtomicDesginの思想・考え方だけでなく、サンプルを使って実際に手を動かすところまで体験できるのが非常にためになりました。時間が経つに連れ開発環境は変わってくるとため、サンプル付きのものは出版されてすぐ取り組むことに価値があると思います。ただ、すぐに開発に組み込むためというよりも、仕組みをきちんと理解し数年先で活かせるよう一回身体に入れてみるという意味合いでトライしてみましたが、エンジニアの視点を少し理解できた気がします。AtomicDesignを体系的に学んでみたい方は読んでみてはどうでしょうか。