前書き

フロントエンドエンジニアの松原(@simezi9)です。先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。

全体の資料はこちらです

もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。

次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ

次の5年を支えるVue.js製UIコンポーネントライブラリを育てる

これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、今回はVueコンポーネントの設計が勉強会の主眼にあったこともあり、もう少しミクロな観点からVueコンポーネントを作る上で積み上げてきた知見を発表することになりました。

BASEのコンポーネント設計

スライド内でも時間を割いて紹介していますが、BASEのVueコンポーネントは大きく4種類に分かれています。

もともとはAtomicDesignの考え方を中心にしたコンポーネント設計からスタートしましたが、 Atomic Designの考え方はWebアプリのデザインを作る上で有効ではあるものの、実装という観点でいけばそれだけではうまくいかないのでは？という疑問にぶつかり、

最終的にPresentational Component / Container Componentの考えを基準として、そこからそれぞれのコンポーネントのレイヤをAtomic Designの語彙を取り入れながら分解したことで現在のような形になっています。

今回登壇するにあたっての個人的な裏テーマとして、「Atomic Designを採用している話はよく聞くけれど、純粋にそれだけでうまく回している現場はどれだけあるんだろうか？」 というのを聞いてみたいというものがありました。

実際の発表でもそのような内容に触れてその後の懇親会で話を聞いたところ、純粋なAtomic Designではなく何らかの手を加えた開発をしているプロジェクトのほうが多そうな印象を受けました。

Atomic DesignはモダンWebアプリデザインの設計手法として大きく普及したイメージはありますが、実際の実装との間をつなぐプラクティスはまだ不足していて、実際にはまだ手探りな部分も多いのかな、というような部分を実感しました。

Storybookの整備

純粋な設計の話とは少しずれてしまう部分はあるのですが、現代のフロントエンド開発の標準装備になりつつあるStorybookの実装についてもお話させていただきました。

Storybookの導入話は見かけることはあっても、各プロジェクトで思い思いの使い方をされていて、プラクティスや運用を実際に言語化している話はそれほど多く見かけないような気がしていたので、自分が開発している中での思いをスライドにしました。

Storybookをデザイナーとエンジニアがコミュニケーションを取るための土台にしていきたい、という思いはプロジェクト開始当初から持っていたものの、実際に開発していってもなかなかそれがうまくいかず、その原因はなんだろう？というのを考えたものになっています。

スライドでは「サンドボックス」性と「カタログ」性という言葉を使って自分の考えを表現してみました。

Storybookへの実装には、実際にそれを利用するユーザー（デザイナーだったりコンポーネントを組み込むエンジニアだったり）にむけた 「おもてなしの気持ち」 をプロダクトやサービスに向けるものと同様に持っていかないといけないな、というのが個人的には結論になっていたりします。

各社のstorybookチラ見せナイトとかやってみてほしい
— 〆 (@simezi9) August 5, 2019

StorybookもAtomic Design同様にもっと現場でのプラクティスの話が増えてくるといいなと思っています。

実装のtips

最後に実装のtipsとしてあまりWebでは見かけないけど個人的にベタープラクティスだと思っているVue.jsの実装のトピックをいくつか小ネタとして紹介させていただきました。

一番言いたかったことは、コンポーネントの良さは共通化ではなくて責務の分離 というポエム性が高い部分なのですが、それだけだと抽象的すぎて面白くないかなと思ったので、Eventの名前の付け方や、payloadの渡し方、aria属性を使ったスタイリングなど実用頻度が高いけど案外解説記事が見る機会の少ない（と思っている）ものを選んで取り上げてみました。特にVue.jsのスコープ付きスロットは解説が少なくとっつきにくい概念ではあるものの、一度扱えるようになると非常に強力な設計の武器となるのでぜひ取り上げたかったものになります。

このスライドでとりあげている実装テクニック自体はVuexやVuetifyなどのOSSライブラリの実装をかなり参考にさせてもらっているものもあり、こうした実装tipsに興味のある方はGithubを覗いてみるのがとてもオススメです。特にVuetifyは実装がよく練られていて質が高いのではないかと思っています。