プログラムのお話

Vue.jsとflaskで作る家計簿管理webアプリ コンポーネントの分け方

前回は実装したい機能とDBのテーブルについて考えていきました。今回はVue.jsのコンポーネントに分け方について書いていこうと思います。

Vue.jsのコンポーネントの分け方を考える

Vue.jsのコンポーネントはAtomicDesignというやり方で分けていきます。 AtomicDesignはatoms、molecules、organisms、templates、Pagesにwebサイトを分類していきます。それぞれの粒度の基準は以下のようになります。

Atomic Design
atoms機能的にこれ以上分解できないコンポーネント
例)ボタンやラベル
molecules2つ以上のatomsで構成されたコンポーネント。一つの事が出来るようにします。
例)検索フォーム
organismsatomsやmoleculesで構成されたコンポーネント。
例)ヘッダー、フッター、サイドメニュー
templatesテンプレートです。全体のレイアウトを決めます。今回は使わないです。
pages実際に画面に表示するコンポーネント。ルーティングします。

AtomicDesignについては以下のサイトがとても詳しく書いていますの参考にしてください。

https://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/

AtomicDesignで分けていく

先程のAtomicDesignの考え方でwebアプリを分けていきます。今回はpagesとorganismsのみ考えて、内部の細かいmoleculesやatomsは作りながら柔軟に変えていこうと思います。初めにルートコンポーネントであるApp.vueが存在します。本当は正しくないのですが分かりやすいように図のようにApp.vueがあるとします。

複数のページで同じコンポーネントを使い回したい時にはApp.vueにコンポーネントを追加します。下の図ではHeader、sidemenu、Footerをコンポーネントとして追加します。前回の項目で説明した通り、これらはorganismsに分類されます。残ったMainは<router-view>で、URLが変更された場合にURLに紐づいたページを表示します。具体的にいうと下のような感じです。

  • http://localhost/page1 page1を表示する
  • http://localhost/page2 page2を表示する

家計簿webアプリではトップページと月・年・累計収支の2ページにします。トップページは更新情報やちょっとした日記を書くページにしようと思っています。 月・年・累計収支は家計簿webアプリのメインとなるページで、タブなどで月・年・累計などを切り替えようと思います。新規での収支の追加もこのページにモーダルの形で実装しようと思います。

コンポーネントの分け方は悩ましい

今回はコンポーネントの分け方についてでした。

今まで簡単なVue.jsの簡単なwebサイトしか作っていなかったので、しっかりコンポーネントを分ける作業は難しかったです。正直、柔軟に変えていこうと書いていますが、思い付かなかっただけです。何となく知的な言葉で誤魔化してます。

実際にこの家計簿webアプリを完成させて次に作る時はしっかりとした設計でやっていきたいと思います。まずはどのようにコンポーネントを分けるか経験する所から初めていこうと思います

次回は実際にVue.jsで作っていきます。