Pathee メディアのコンポーネントを styled-components と Atomic Design で作り替えました
これは Pathee Advent Calendar 2019 の13日目の記事です。
Pathee でエンジニアをしている irihit です。本記事では、サーバーサイドエンジニアが React と styled-components を使って、フロントエンドの開発を行なった体験を紹介させていただきたいと思います。
作り替えの目的
Pathee メディアサイトは、小売系を中心とした「おでかけスポット」をキーワード毎にまとめて記事として紹介するサービスで、スポットを運営している方はもちろん、多くの方から情報を頂戴し、運営しています。Pathee は「見つからないをなくす」ことを目標としており、より多くのスポットの、より多くの情報を消費者に届けたいという想いでサービスの改善を行なっております。その上で、Pathee メディアサイトのデザインが多くの情報を掲載できる状態ではなかったという問題を抱えていました。
そこで、Pathee メディアのデザインを刷新することによって、より柔軟に様々な情報を掲載できるように改善を行うことになりました。
デザインの構成が大きく変わるため、以前のコンポーネントの大半を廃止し、新しく styled-components を利用した Atomic Design によるコンポーネントの作り替えを行いました。
使われていた技術
Pathee メディアサイトにおいて使用されていた技術は以下の通りです。
- TypeScript (一部 JavaScript)
- React
- Redux
- Next.js
導入した技術・アーキテクチャ
styled-components とは、CSS in JS の中でも人気の強いライブラリで、簡単な記法で React コンポーネントに style を付与することができます。 emotion-js/emotion も候補に上がりましたが、他のプロダクトで styled-components を使っていたことや、次のバージョンで大きく高速化されることが見込まれることなどの理由から、styled-components を選定しました。
Atomic Design とは、デザインの要素を化学の原子、分子、有機体などに当てはめて定義していく手法です。
引用: https://bradfrost.com/blog/post/atomic-web-design/
いずれもフロントエンドの開発では人気のあるものなので、聞いたことがある、もしくは実践している方が多いのではないでしょうか。
得られたベネフィット
styled-components と Atomic Design (そして React) の組み合わせにおいて得られるベネフィットは、想像以上に強烈でした。長い間サーバーサイドの開発にのみ注力していたため、フロントエンドの開発といえば、HTML と CSS、JavaScript とが別々に存在し、実装したい UI に応じてそれぞれの境界を行き来しながら開発していくスタイルを思い浮かべていました。今回、Pathee メディアサイトの開発に携わったことによって、初めて TypeScript や React に触れ、苦手意識のあった CSS にも手を出しましたが、予想していたよりも遥かに分かりやすく、スムーズに開発を進めることができたのです。かつて感じた HTML と CSS、JavaScript の脳の切り替えに対する負荷は、Atomic Design と styled-component、React によって、小さく分類された限られたパーツに対する実装に切り出されることで、驚くほど小さくなったことを実感しました。
これから改善していくポイント
styled-components や Atomic Design はもちろん、フロントエンドやデザインの知識も乏しい状態で始めた開発であったため、開発は遂行できたものの改善していきたいポイントがいくつかあります。
特に大きいのは Atomic Design における「何を Atom, Molecule, Organism とするか」です。ここは開発チーム内ではもちろんのこと、デザイナーも含めてより広い視点で統一した考え方を持っていく必要を感じました。今後の実装では、しっかりと各メンバーと連携を取ることによって、認識の違いが生まれないように配慮していきます。
サーバーサイドエンジニアがモダンなフロントエンドの開発に関わって
以前は PHP や Go などの言語を利用したサーバーサイドの開発に関わる機会が多く、モダンなフロントエンドの開発に関われたことは、とても楽しく貴重な経験でした。フロントエンドの実装方法について知れたことで、Web API などのサーバーサイドの開発を行う上で知っておくべきことが少しでも知れたかと思います。
サーバーサイドエンジニアもフロントエンドを体験してみると、楽しいクリスマスが過ごせそうです。ハッピークリスマス。
