Home > ATOMIC DESIGNでの技術選定の結果、そして今後

ATOMIC DESIGNでの技術選定の結果、そして今後

ATOMIC DESIGNでの技術選定の結果、そして今後

Mon Dec 17 2018

技術スタック

Nuxt (Vuetify) + Firebase + Netlify

半年前に制作を開始 (当時は1.4.0)、今回SPAとしてデプロイしています。

サーバサイドの話はFirebase Advent Calendar 8日目にて、リポジトリjiyuujin/nuxt-admin-server下で進めています。

結論

これといった結論はありません!

日々より良い、ニーズに合ったCOMPONENT設計を訴求することだと思っています。

主な機能

1から3はRealtime DBを採用Firestoreに移行を進めています、https://nuxtadmin-recommend.netlify.com/

  1. 技術ネタ・勉強会スライド一覧
  2. 搭乗ログ一覧
  3. アップロード画像一覧
  4. Qiita一覧(いいね管理をスマートに)
  5. Netlifyデプロイ結果(エラー時にのみ警告を表示)
  6. 家計簿管理(これから設計・実装予定)

触ってみたい!

公開URLはこちら | Nuxt Admin、無料ですが自分以外触れません。

近く権限を追加した上で、閲覧用アカウントを準備しようかな、と検討中。

作るのにどれくらいかかったの?

3月に始まり4月まで、30-40時間くらい。

11月に微修正をしながら、12月にFirestoreへ一部移行を進めています(10時間くらい)

基本的な設計原則

pages下では画面ごとにindex.vueを用意、

それぞれの.vueで該当するVuexモジュールにアクセスします。

アクセス先であるcomponents下では、Vue.js入門 基礎から実践アプリケーション開発までに記載されている通り、設計と実装を進めているので、相違は無いと思っています。

+ components
|-- atoms
|-- molecules
|-- organisms
|-- templates

atoms

  • 再利用可。
  • Stateを持たない。
  • Vuexモジュールにアクセスしない。

molecules

  • atoms程最小単位では無いが再利用可。
  • Stateを持たない。
  • Vuexモジュールにアクセスしない。

organisms

  • リポ固有の情報を含む。
  • Stateを持っても良い。
  • Vuexモジュールにアクセスしても良い。

templates

  • リポ固有の情報を含む。
  • Stateを持っても良い。
  • Vuexモジュールにアクセスしても良い。

いざ、実装!

Base Layoutは共通化できるのでtemplatesで準備。

<template>
  <div>
    <LeftMenu />
    <Loading
      :loading="loading"
    />
    <v-container
      class="site"
    >
      <slot />
    </v-container>
  </div>
</template>

MainTemplateのインポートでレイアウト共通化できる

slotタグに入れるべきコードは、ページ固有の情報です。

入力フォームなど、コンポーネントを配置します。

<MainTemplate
    :loading="loading"
>
    <NewTip />
</MainTemplate>

情報取得はpagesに限定しました

APIから情報を取得するのはpagesでのみ。

import { mapActions } from 'vuex';
export default {
    computed: {
        ...mapActions('initTips')
    }
}

適宜使用するコンポーネントに応じて、propsで値を受け渡します。

また各コンポーネントから渡される場合は、$emitを使います。

templates > formats > atoms

テンプレートに配置するcomponentは、最小のcomponentも含むが、

一旦フォーマットとしてのコンポーネントをorganismsに配置(することが多い) 最小単位の部品はそのorganismsに設定したコンポーネントで配置。

<v-card-text
    v-if="events"
>
    <InputForm
        :data="form.title"
        column="タイトル"
        @form-data="applyTitle"
    />
    <InputForm
        :data="form.url"
        column="URL"
        @form-data="applyUrl"
    />
    <InputForm
        :data="form.description"
        column="詳細"
        @form-data="applyDescription"
    />
    <MultipleSelectForm
        :option="categories"
        :data="form.tags"
        column="タグ"
        @form-data="applyTags"
    />
    <SingleSelectForm
        :option="events.item"
        :number="form.event"
        column="イベント"
        @form-data="applyEvent"
    />
    <v-btn @click="postTip">
        Tipを追加
    </v-btn>
</v-flex>

そこで、moluesやorganismsの違いって何でしょうと.. ?

Nuxtを触っている人なら誰しもが首をかしげる箇所にハマりました。

リポ固有か否かで判定を行い、リポ固有だった場合にはorganismsに入れています。

ですが、正解は未だ分かりません..😅

技術選定の結果、そして今後

結果、Nuxt + Firebaseを採用して良かった!

  • webpack の設定が不要。
  • VuexやVue-Routerなど、既に入っている。
  • Nuxtアーキテクチャ。
  • 調べたら即日本語で解決策が出てくる。
  • FirebaseのAuth認証、かなり楽。

一方で、不満というよりかは悩みのタネも存在。。

atomsやtemplatesに入らなかったコンポーネントはほとんどがorganismsに入っている。

リポ固有の情報を含み、他で使えるような場面が少ないため、このようになっているが、

components下のディレクトリ構成については今後も議論の余地がありそうです。

今後(来年以降)

Nuxt開発・運用の実験台の一つとして継続すると共に、

  1. GraphQL(vue-apollo)を使って、AWS利用料を管理する仕組みを設計。
  2. vue-strapが公式にメンテ終了した件を受け、独自のUIを構築。

もちろんAtomicDesignについては引き続き模索します。

コメントを残す

※ 返信が必要な方はメールアドレスも入力してください