2019年3月20日（水）に、渋谷にてフロントエンドエンジニア・デザイナー向けの勉強会「Atomic Designを実現するコンポーネント指向開発のいま」を開催しましたので、そのようすをお届けします。
当日のご参加者の方々の声は、Twitterにて #atomic_shibuya というハッシュタグでチェックできますのでぜひそちらもご覧ください！
まずは、BASEのフロントエンドエンジニア 松原から発表です。
『次の5年を支えるVue.js製UIコンポーネントライブラリを育てる』というタイトルで、Vue.js、TypeScript、Storybookを利用したUIコンポーネントライブラリの構築にあたっての知見に関する発表が行われました。
BASEではサービスリリース以降、サービスの成長スピードを最優先した実装によりコードが継ぎ足し続けられた結果、メンテナンスが難しくなり、また社内のデザインガイドラインがないために、デザインクオリティの維持が難しいという課題がありました。
それを解決するために、「次の5年の開発を支える」ための次世代管理画面プロジェクトが開始。これは、ユーザーであるショップオーナーさんが使う管理画面のフルリニューアルとコンポーネントライブラリ作成によるデザインの統一を行うというもの。
成果としては、BBQというコンポーネントライブラリが誕生したことや、GitHubをデザイナーとエンジニアの協業の場とし、コンポーネントごとのREADME.mdの用意やテストの実装によって作業フローの整理と効率化を実現したことが挙げられました。そして、次世代管理画面の第一弾のリリースも無事に完了したとのこと。
学びとして、ライブラリ作成の進め方のコツやVue.jsは必要になる知識や技量が少ないわけではないこと、作成初期に用意しておくべきだったことなどが共有され、発表が締めくくられました。
次は、コイニーのデザイナー 蕭（しょう）さんの発表です。
『人生がときめくUIコンポーネント片づけの魔法』と、最近話題の書籍になぞらえたタイトルで発表されました。
蕭さんは、片づけで必要なことは、「本当に大切なモノを見極めること」である捨てることと、「モノの定位置を決めること」である収納の二つだと定義。
まず、「捨てる」ために心がときめくものだけを残そう、と話す簫さん。UIコンポーネントがときめくかを判断するには、ユーザーテストやA/Bテストなどの客観的・論理的に判断できるものと、サービスの世界観や作り手の愛情があるとのこと。例えば使えないCOLOR SYSTEMや膨大なGRID SYSTEM、CSS FRAMEWORKなど、「いつか使うかもしれない」ものの集合は捨てましょう、とはっきりおっしゃっています。
「収納」のためには、CSSの書き順やAtomic Designの取り入れ方についてを挙げられています。
そして、どうしても捨てられないものはどうするか？という課題に対しては、残すものを厳正することで本当に必要なものに気づく瞬間が訪れるとのこと。片づける・捨てることによって判断力が磨かれ、判断の責任を人に委ねなくなると力強く話す蕭さん。
「本当にときめくモノに大いに時間と情熱を注ぎましょう」との言葉とともに発表は終了しました。
最後は、一休のエンジニア 稲尾さんです。
『「一休.comレストラン」コンポーネント指向開発の今』というタイトルで、コンポーネント指向開発の導入からデザインの言語化を進める中での知見を発表されました。
まずは、コンポーネント指向設計の導入ストーリーについてです。当時一休では、サイトの表示が遅いという課題があったそう。そこできちんとしたSPAを導入すべくNuxt.jsによるフロントエンド基盤の刷新をスタート。「一休.com レストラン」におけるコンポーネントの種類と役割を整理し、これらを適切にレイヤー化できる設計手法としてITCSSを採用したとのこと。
ただ残念なことに、コンポーネント指向設計を取り入れた結果サイトの表示は速くなったものの、重要な指標のCVR改善には繋がらなかったそう。しかし、この取り組みによって継続的なユーザビリティ改善の基礎を獲得できたと話す稲尾さん。
そしてAtomic Designではなく、ITCSSを採用した経緯についてです。これに関してはチームに必要な分類をチームで合意を取ることが重要だと話す稲尾さん。そのために「一休.com レストラン」のデザインの言語化のため、デザイナーの意思決定フローのスタイルガイド化を実施したとのこと。しかし、カンプをコンポーネント化するにあたってどのようにコンポーネント化すべきか、サイズはどのように定義すべきかなど考慮すべき事項は盛りだくさん。
最後に、「コンポーネント指向設計には近道なし」との言葉と共に、フロントエンドはWebらしくプログレッシヴに改善を続けていくと意気込んで発表を締めくくった稲尾さんでした。
発表のあとは、登壇者と発表者での懇親会を実施しました。多くの参加者が懇親会にもご参加され、にぎやかな会となりました。
今後もBASEでは様々な技術・Web開発領域での勉強会の開催を予定しています。ご興味のある方は、イベント情報の発信や参加の受付をconnpassにて行っていますので、ぜひグループへご登録ください！
