ワイヤーからReactでAtomicDesignを実装するまで

ワイヤーからReactでAtomicDesignを実装するまで

atsss氏：よろしくお願いします。

（会場拍手）

すいません、僕あまりお世話になっていないんですけど、これからお世話になるかもしれないなと思って、LTしに来ました。

伊藤敦之と申します。株式会社ローカルワークスでいま新卒2年目です。Railsエンジニアとして働いています。

「お世話になる」ということで無理やりこじつけたんですけど、いつもお世話になっているのはSketchで、Railsにももちろんお世話になっています。これから新しいプロダクトがあるので、Reactにお世話になろうかなと密かに思っている状況で来ました。

会社としては、遅ればせながらReactの導入を考えているという状況です。

Reactはけっこう昔からあるライブラリなんですけど、1年前に触って、それから本番に導入するために触らなきゃいけないなと思ってました。なので手始めに、バックエンドはRailsでフロントをReactで簡単に作って、1年前を思い出すということをしました。次に、reduxをちゃんと勉強しなきゃいけないなと思って、react, redux で簡単なアプリケーションを作って勉強しました。

最後に本番導入を判断するためには、きちんともっと大きなアプリケーションを作ってみて、使えるかどうか判断しなきゃいけなと思いました。なので、Slackのコピーを作って、裏側はElixerのPhoenixで作って、表側はReactで作るということもしました。

また、UIのコンポーネント設計をちゃんとしたかったので、Atomic Designを使ってやってみました。

ワイヤーの作成

これはデモなんですけど、ちゃんとWebSocketにつないであって、「ちゃんとSlackっぽく動くよね」みたいな。CSSも自分でがんばって書きました。

ここまでやると、「Reactってなんとなくわかってきた！　イエーイ！」とハッピーな感じになってきて、勝手に本番に入れてみました。

新規事業だったんですけれども、いきなりそこでモノは作れなかったので、まずワイヤー引いてみましょうと。

でもプロトタイプぐらいだったらそんなに難しいこともなく、デザインも僕ができちゃうので、モックも作ってしまいました。それに対して社内でフィードバックをもらって、メモを残せるようなかたちにしていきました。

たまたまなんですけど、このワイヤーに対してのコメントがだいたいロジックになっていて、モックに対してのコメントがユーザーインタビューとかユーザビリティテストの対象になりました。

モックがここまでできるとだいたいDB設計もできるようになるので、社内のネゴを取りながら次のステップに進むことができました。

Sketchの活用とRailsでの実装

Sketchなんですけど、この段階ではSymbolを丁寧に作りましたって感じですね。Atomic Designの本を読んで、ちゃんとそれに則るようなAtomic Designを作ってみました。

これはこのままコンポーネントになるので、このあとUIのことを考える必要がすごく減ってよかったなというのと、あとSketchって修正が簡単なので、社内とネゴるときにいろいろ楽だったなと思います。

僕はRailsで実装するのが早かったので、最初にRailsで実装してみようと思ったんですけど。こんな感じで、基本的に全部コンポーネントに切り出してあるので、あとは外部から必要な値を入れてあげるとそのとおり表示されるみたいなものを作って、SymbolをRailsのパーシャルっぽく切り出しまいた。、そのSymbolの単位でCSSModuleっぽく、パーシャルに1対1になるようにCSS書き出しました。

RailsにはhelperというViewのロジックを仕込めるところがあるんですけど、さっきのワイヤーに出されたロジックはそこに押し込んで管理しておきました。

ここまで来たら、RailsはHerokuにデプロイするのがすごい簡単なので、いったん上げちゃいました。

ここでできたプロトタイプは、さっきのモックを書いた時のユーザーインタビューとかユーザビリティテストみたいなのに使われました。また、スタートアップなので、関係各所、一緒にやっている会社さんとか、株主の方に説明するときのデモに使われるのにけっこう重宝されました。

Reactと今後の課題

ここでやっとReactで、大したこと書はいてないんですけれども。アイコンを表示するときのコンポーネントは、こんな感じで、Railsのパーシャルの単位でコンポーネントをまず作り、CSSはそのままコピってくるだけという状態になってます。ReactnoContainer Componentはhelperに書き出したロジックををそのまま書き出せば、あとはそのまま実装できるかなという状態になりました。

すごいイイ感じだなと思って、またハッピーになりました。

でも、よくわからないこともたくさんあって、ここはどうしてるのかなって聞きたいんですけれども。middlewareがどんどん肥大していくなと思っていてます。

ここはAPIの通信してるところなんですけど、非同期通信が多いからどんどん肥大化していってます。みなさんがmiddlewareの管理ってどういうふうにしてるのか気になります。

あと、Reactってテストのライブラリがたくさんあって、僕はテスト書くの基本的に好きなんですけど、こんなに書いて管理するのはちょっとしんどいなと思っています。

最後に、コンポーネントの管理も課題だと思っていて。「これってmoleculesだな」みたいに思ったら、実装中にけっこう変えたりしてました。いまは僕しか開発もデザイナーもいないので、僕がStorybookで管理できていればいいんですけども、デザイナーさん入ったときにSketchのSymbolとStorybookが乖離しているとすごいやりにくいかなと思っています。

それでもなんかいい感じだなと思っていて。非同期でヌルヌル動く体験ってすごいユーザーにわかりやすいなと思ってるし、React Nativeもあるので、ネイティブアプリ化も捗るなと思っています。もともとそれが目的でReactをやろうと思っていたんですけど、それがいいなと思っています。

以上です。

（会場拍手）