Designを使ったコンポーネント指向のUI開発:Q〜本稿は(序)(破)(Q)のシリーズの3番目の記事になります。Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の2つの場合について紹介します。Designの導入に際して工夫した点について説明していますので、そちらをご覧ください。下のサイトテンプレートを題材に実装していきます。https://html5up.net/prologueシチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。Designのコンポーネント単位に分割していきます。コンポーネントの分割フロー図は(破)で以下のように定義しました。ページをヘッダーやフッター、大きなセクションで分割します。分割したコンポーネントはOrganismsになります。それぞれをさらに分割していきます。「他のページやコンポーネント内で既に繰り返し使っている」または「これから繰り返し使うことがわかっている」状態でなければMoleculesに分類する必要はありません。迷ったらOrganismsにします。今回、Moleculesに分類するコンポーネントが無くなってしまうためいくつかをMoleculesに分類しました。実装コンポーネント分割ができたら実装していきます。今回実装で使用する主要な技術セットは以下になります。使用して実装していきますが、ReactでもVue.jsでも問題ありません。アプリケーションを構築するためのコンポーネント指向のフレームワークです。ここでは詳しい説明については割愛しますので公式ページを参照ください。ja.nuxtjs.orgスタイリングにはstyled-componentsを導入しています。Modulesを抑えて近年急上昇している技術です。これまでのスタイルリングはcssの定義をclass属性(className属性)とのマッピングによって行ってきましたが、styled-componentsはコンポーネントに「スタイル」の定義も持たせられるようにしたライブラリです。これにより、コンポーネントをよりカプセル化しやすくなりました。詳しくは公式ページで。スタイルガイドを作成するためのツールです。(破)で説明したように仕分けたコンポーネントは一覧化しないと開発がやりづらくなります。Stroybookはコンポーネントを一覧化するツールです。https://storybook.js.org/環境構築まずは、Nuxtのプロジェクトテンプレートを構築します。install起動確認します。devhttp://localhost:3000/次にストーリーブックをインストールします。中を以下のように書き直します。}確認のため、Nuxt.jsプロジェクトを作成した時にサンプルとして作成されるAppLogo.vueファイルのストーリーファイルを作成してみます。yarn.lockstories.jsの中身は以下になります。}))起動して確認してみます。storybookhttp://localhost:6006/左のタブにAppLogoコンポーネントのラベルが表示されています。キャプチャではわかりませんがタブをクリックするとAppLogoに仕込んであるアニメーションが正常に作動します。次にstyled-componentsをインストールします。vue-styled-components試しにAppLogo.vueをstyled-componentsでスタイリングしてみます。</VueToNuxtLogo>まずはマークアップ部分ですが、class属性をもつdiv要素ではなく全てコンポーネントのタグにしました。</script>次に<style>タグを全て削除し、代わりに<script>タグの中にTriangleOne〜TriangleFourといったスタイリングされたコンポーネントを作成しています。styled-componentsを用いることでclass属性に対してスクレイピング的に行っていたスタイリングからコンポーネントに閉じ込める形で定義することができました。移行する場合に技術的差異が少なくすむ狙いもあってstyled-componentsを採用しています。Designコンポーネントを実装していくだけです。完成後のcomponentsディレクトリは以下のようになりました。stories.jsStorybookは次のようになりました。※Storybookにstorybook-addon-vue-infoというアドオンを適用しています。Nuxt.jsとstyled-componentsとStorybookを使って、スタイルを閉じ込めたコンポーネントとそれらのコンポーネント一覧を作成することができました。vueファイルとstoryファイルの両方を修正していく運用になります。フレームワークを使用しない場合はどうする?ReactやVue.jsといったコンポーネント指向のフレームワークを使用していない場合はこれまで通り、HTMLをマークアップし、class属性に対してCSSでスタイリングをしていくことになるかと思います。現場によると思いますが、将来的にReactやVue.jsといったフレームワークを使用することになる可能性は十分あります。その場合でもスムーズに移行できるように共通のデザインシステムを使っておくべきかと考えます。Designを取り入れたCSS設計手法が必要になるのですが、目ぼしいものは見当たりません。Designの考え方を取り入れたCSS設計を考えました。数あるCSS設計手法のひとつで、OOCSSやSMACSS、BEM、SuitCSSなどのメジャーな設計手法のいいとこどりをした国産の設計手法です。DesignとFLOCSSを組み合わせたCSS設計手法について説明します。下記のような構成とします。organismsFoundationReset.cssやNormalize.cssなどを用いたブラウザのデフォルトスタイルの初期化や、プロジェクトにおける基本的なスタイルを定義します。ページの下地としての全体の背景や、基本的なタイポグラフィなどが該当します。FLOCSSより引用Layoutページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。DesignではTemplatesにあたるため、この階層にTemplateファイルを作成します。ObjectFLOCSSではプロジェクトにおける繰り返されるビジュアルパターンをすべてObjectと定義します。Organismsの3つのレイヤーに分けられます。Utilityはすべてmodifierで表現できると考えられるため原則なくなります。命名規則MindBEMdingBEM(MindBEMding)のシンタックスである、Block、Element、Modifierに分類して構成される規則を採用します。Modifierの命名の派生パターンとして、JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、is-*プレフィックスを付与し、.is-activeというようにすることもできます。このアイデアを採用する場合の原則として、.is-activeそのものにルールを持たせるのは禁止します。他のモジュールのModifierのスタイルを汚染してしまうのを防ぐためです。FLOCSSより引用プレフィックス役割を明確にするためにプレフィックスをつけます。.t-*今回の題材ではapp.scssのようなファイルは次のようになりました。原則、以下を禁止事項とします。モジュール間のカスケーディング他のモジュールを親とするセレクタを用いたカスケーディング同一レイヤーにおけるモジュール間のカスケーディングそのレイヤーにおいて、特定のモジュールに依存することなく、モジュールとして独立して再利用できるべきであり、混在させることによって他の開発者が予想しない挙動になるべきではないためです。...}例外として、レイヤー間におけるカスケーディング、例えば、MoleculesレイヤーがAtomsレイヤーのモジュールを変更することは許容します。このような例であってもセレクタのカスケーディングをおこなう必要はなく、Modifierによって拡張することによって解決することができる場合があります。コンポーネント一覧化ReactやVue.jsフレームワークを使用しない場合はStorybookが使えません。そのため、それに代わるコンポーネント一覧ツールが必要になります。HTMLというものがサポートされていますが、sassのようなプリプロセッサとの併用に関するドキュメントが少ないため導入検討中ですそこでsc5というCSSスタイルガイドジェネレーターを使用します。styleguide.sc5.ioスタイルガイドジェネレータは数多くあるのですが、sc5はCSSに決められたフォーマットでコメントを書くだけでスタイルガイドが生成できるため簡単に始められます。インストールにはgulpが必要になります。styleguidegulpfile.jsを作成します。'styleguide:applystyles']);scssファイルに以下のようなコメントを記述します。}}最後にpackage.jsonを修正します。styleguidehttp://localhost:3000/ポート番号はオプションで変えられます。下のように採番してAtoms、Molecules、Organismsでカテゴライズしています。2.0.0このようにscssファイルの実装とそのコメントを修正していく運用になります。スタイルガイドは実装とは別ファイルで管理されることが多くて更新が滞ってしまいがちですが、これなら実装と結びついているため更新が滞ることが少ないかと思います。(Q)のまとめフレームワークを使用する場合と、使用しない場合の両方の実装方法について紹介しました。Designのコンポーネントの分け方(特にMoleculesとOrganisms)が定義されていればそれほど迷うことなく実装できると思いました。デザイナーと協業して開発する方法については今回言及していませんが、一覧をつくっておくと協業がスムーズになります。破綻する前に少なくても作って置くべきかと思います。シリーズまとめこれまでコンポーネント指向でUIを開発してきて、いろいろな手法を検討しましたが、どれもコンポーネントの単位が定まらず破綻していきました。Designというメンタルモデルに注目するようになり、この記事にまとめることになりました。メンタルモデルとは認知心理学の用語で、「あることに出くわしたときに、それをどう解釈/判断し行動するか」について指標となるモデルのこと。Vue.js)やアイデア(FLOCSSなど)をベースに考えると十分実装可能な概念だと思いました。Designになりがちですが、どの現場でもなるべく使えるように考えたつもりです。どこかの現場の参考になれば幸いです。今後についてシリーズは実は完結していません。この方法で数年運用してみても破綻してないか、困ったことはないかを書いて完結になると思っています。Designを使ったコンポーネント指向のUI開発:||(2020年公開予定)でご紹介しようと思います。Designを使ったコンポーネント指向のUI開発:破〜月別アーカイブHPスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。