Vue.js実際のところ(1)−概要

これから複数回にわたって,Vue.js実際のところを書いていこうと思います.
必ずしも「正しい」或いは「より良い」実装ではなく,自分がこうかな?ああかな?と思いながら作っていった記録なので,あまり技術的に参考になる話は出てこないかも知れません.

今回は第一回として,全体の概要説明です.

サンプルとして使うのは,自分が震災以降活動に参加している,あるNPO法人のための日誌の仕組みです.(クライアント仕事は書けませんので)


福島県で活動しているこの法人では,現地で採取した様々なサンプル(土壌であったり,植物であったり,米であったり・・・)を東京まで送って精密な放射能量測定を行っています. この測定作業のためには下準備として測定機に掛けるための容器にサンプルを正確に詰める作業が必要で,これらを多くのボランティアスタッフが担当していて,今回この活動日誌(手書きノート)を記録するための仕組みを作ったわけです.

上の図が情報構造の概要です.

日付・時刻・概要の他に,その時々の参加メンバーが複数あり,サンプルは複数回に渡って処理されていくので,都度作業パターンに乗って動いていきます. 届くサンプルはその時々でバラバラで且つ件数も大きく異なりますが,作業パターンは5種類となっています.

また,臨時で別の作業(例えば更に精密な測定に掛けるための準備等)が入ることもあります.


まずはこれらの情報の登録画面を作るために,Vueのコンポーネントを下記の様に分類することにしました.

  • 日付,時刻・概要・参加メンバーはそれぞれ別々のコンポーネントに分割
  • 作業パターンに関しては5つの構造が全く同じ(複数サンプル+処理概要)なので一つのコンポーネントを流用
  • その他臨時活動は概要と同じテキストなのですが,修正要望が入るかも知れないので一応別コンポーネント化

こうしてそれぞれのコンポーネント毎に .vue ファイルを作り,それらを親コンポーネント(今回はApp.vue)でまとめて表示しています.

実際には,上の画面キャプチャの様に「(登録ではなく)表示用」のコンポーネントと,右のサイドバーに表示している,過去の一覧表示コンポーネントも準備し,それらも App.vue でまとめています. コンポーネントの構造は下図の通りです.

ある程度作ってからふと気がついたのですが,routerを埋め込むとなるともう少しコンポーネント構造は検討した方が良い様です. 今回は完全にシングルページなので問題無いのですが.

第一回はここまでで,次回から個々のコンポーネントについて少し書いてみたいと思います.

投稿者:

shun

あいかわらずのプログラマ人生 ・・・なんだけど、徹夜をすることが出来なくなりました。 肩を壊してしまい,リハビリに通ってます.( ;∀;)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です