こちらのチャプターでは、フロントエンドのコンポーネント設計について解説します。
初めに、フロントエンドの知識については、我々に大した知見がないため、必ずしもベストプラクティスではないということを御了承ください。
Envaderでは、フロントエンドにvue.jsを採用しました。
技術選定理由は、以下の2点です。
- 開発者がフロントエンドの知識に乏しかったため、React.jsより導入しやすそう
- 開発者がデザインスキルに乏しかったため、UIコンポーネントフレームワークであるvuetifyを利用したかった
ここから、コンポーネント化について解説します。
コンポーネントという言葉は、以下の2つの意味合いで使われていると解釈しています。
よって、それぞれについて解説していきます。
- デザインカンプ上でのコンポーネント化
- vue.jsにおけるコンポーネント設計
はじめに、デザインカンプにおけるコンポーネント化について解説します。
知識0からの開発だったため、なかなか苦労しましたが、自分たちなりのルールを決めてフロントエンドの実装に取り掛かりました。採用したルールは以下の通りです。あくまで、我々の実装ルールであり、一般的にこれが正しいとは限りません。（現在もフロントエンドは勉強中です。）
- figmaによるワイヤーフレームの作成
- figmaによるデザインカンプの作成
- アトミックデザインの原則に従い、デザインカンプをコンポーネントに分ける
- レビュー・改善
- コーダーに引き渡す
次に、vue.js側でのコンポーネント設計について解説します。
とりあえず、動的型付けはよろしくない印象があったため、Typescriptを採用しています。
ディレクトリ設計は以下の通りです。
App.vue
apollo/ : apollo clientに関する設定, GraphQL queryファイル
assets/ : 画像ファイル等を保存
auth/ : SPAにおけるログイン管理に関する設定
components/ : componentトファイル
const/ : 定数
layouts/ : Navigation BarやFooter等のファイル
main.ts : エントリポイント
plugins/ : vuetify等の設定
router/ : vue-routerの設定
scss/ : SCSS
store/ : vuexの設定
types/ : 型ファイル
views/ : 各ページのcomponentファイル
ディレクトリ設計としては、以下の2点を工夫しました。
-
viewsに、URLと対応するページのレイアウトファイルを置く -
componentsには、アトミックデザインで出てきたコンポーネントを作る