質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

Q&A

解決済

1回答

537閲覧

Vue.js+AtomicDesignの設計

tampopopofu

総合スコア22

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

デザインパターン

デザインパターンは、ソフトウェアのデザインでよく起きる問題に対して、解決策をノウハウとして蓄積し再利用出来るようにした設計パターンを指します。

0グッド

2クリップ

投稿2019/08/03 09:37

前提

Vue.js+AtmicDesignでの設計というか実装方法について教えていただきたいです。
恐らく正解というものはないのかもしれませんが、もしメリットデメリットがあるなら参考にしていきたいです。

AtmicDesignについてのサイトは結構見てきました。
そこでよくある例文に

 ・Atoms → 入力欄、検索ボタン
・Molecules → 入力欄 + 検索ボタン
・Organisms → 上記Moleculesを含んだヘッダー

というものがあります。
これをこのまま実装していけば、「検索結果を表示するもの」が必要になりますが、それに対する例文が全然ないのです。

悩んでいること

「検索結果を表示するもの」を実装する場合、たぶん「結果欄」というAtomsを作成すると思います。
例として、以下に「入力欄」、「検索ボタン」、「結果欄」という3つのAtomsがあり、それを「検索ボックス」というひとつのMoleculesに入れるとします。
該当のソースコードに簡単に表示します。

・入力欄に値を入力
・検索ボタン押下
・入力値に関する情報を一覧表示

上記の「情報を一覧表示」をする場合、searchRes.vueitemsに情報を設定する必要があります。

ここで私が悩んでいること、一般的にどの方法が取られるのかが知りたいです。

<方法1>
・検索ボタン押下後、searchBox.vuesearch()メソッドで入力値の情報を取得。
・取得した情報をsearchRes.vueitemsにprops経由で設定。

<方法2>
・検索ボタン押下後、searchBox.vuesearch()メソッドで入力値をstore等に保管か、propsでsearchRes.vueに渡す。
searchRes.vueで入力値を検知し、情報を取得。
・取得した情報を一覧表示。

簡単に言いますと、一覧情報を取得してからsearchRes.vueに渡すのか、
検索キーをsearchRes.vueに渡して一覧情報を取得するか、です。

該当のソースコード

js

1// 入力欄:searchInp.vue 2<template> 3 <input type="text" value=""> 4</template>

js

1// 検索ボタン:searchBtn.vue 2<template> 3 <input type="button" value="Search" @click="fnc"> 4</template> 5<script> 6export default { 7 methods: { 8 fnc() { 9 this.$emit('fnc'); 10 } 11 } 12} 13</script>

js

1// 結果欄:searchRes.vue 2<template> 3 <div> 4 <p v-for="(item, idx) in items">{{ item }}</p> 5 </div> 6</template>

js

1// 検索ボックス:searchBox.vue 2<template> 3 <search-inp /> 4 <search-btn @fnc="search"></search-btn> 5 <search-res></search-res> 6</template> 7<script> 8import searchInp from './searchInp'; 9import searchBtn from './searchBtn'; 10import searchBox from './searchBox'; 11export default { 12 methods: { 13 search() { 14 } 15 } 16} 17</script>

考えたこと

方法1では、searchBox.vueに処理が集まりすぎて肥大化してしまわないのか、
方法2では、searchRes.vueに機能を持たせるのはよくないのか、とかを考えてどういう設計にすればいいのかどっちつかずの状態です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

方法1で実装すべきと思います。
atomsに機能を持たせるのは原則に反しませんか?
atomsでは再利用可能性を追求すべきと思います。

投稿2019/08/04 17:58

u-sho

総合スコア110

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tampopopofu

2019/08/10 06:39

ご回答ありがとうございます。 >atomsでは再利用可能性を追求すべきと思います。 そうですよね。その通りだと思います。 Moleculesが肥大化する懸念を記述していましたが、それこそ機能単位にしていけばそれほど肥大化することもないのではと思い始めました。 Organismsのほうにデータ取得を持たせると複数のMoleculesを内包したときに肥大化するのかなと思いました。 ありがとうございました。ちょっとスッキリしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問