Storeに頼りすぎないフロントエンド​

2026/06/18 開催「TSKaigi 2026 しか型ん！」でのオプティム 上山の発表資料です。

https://optim.connpass.com/event/395349/

Transcript

1. © 2019-2026 OPTiM Corp. All rights reserved. Storeに頼りすぎないフロントエンド 株式会社オプティム 上山 最終更新日：2026/06/10
2. © 2019-2026 OPTiM Corp. All rights reserved. 2 自己紹介 上山  入社：2023年度新卒  所属：株式会社 オプティム ソリューション開発部 農業ビジネス開発 ユニット  出身：長野県  好き：UI/UX, フロントエンド, Vue.js
3. © 2019-2026 OPTiM Corp. All rights reserved. 3 会社概要 商号 株式会社オプティム 英語表記：OPTiM Corporation 東京証券取引所プライム市場：3694 所在地 OPTiM TOKYO (東京本社＠浜松町) OPTiM SAGA (佐賀本店＠佐賀大学キャンパス内) OPTiM KOBE （神戸オフィス＠三ノ宮） TECH CENTER IIZUKA （テックセンター飯塚＠九州工業大学飯塚キャンパス前） 代表 菅谷 俊二 （すがや しゅんじ） 設立 2000年６月８日 従業員数 444名（2026年4月1日現在） Saga Tokyo Kobe
4. © 2019-2026 OPTiM Corp. All rights reserved. 4 事業・提供サービス概要 私たちは、AI・IoT技術を社会の隅々に行き渡らせ、 日本のあらゆる産業を根底から変革する 「AXの中核を担う企業」を目指しています。 農業AX 農業AX 農業AX 医療AX 建設・土木AX オフィスAX オフィスAX コミュニケーションAX 情シスAX 医療AX プラットフォーム オフィスAX 情シスAX 情シスAX 情シスAX 情シスAX 情シスAX コミュニケーションAX コミュニケーションAX コミュニケーションAX コミュニケーションAX 情シスAX 情シスAX
5. © 2019-2026 OPTiM Corp. All rights reserved. 5 事業紹介：情シスAX 長 き に 渡 っ て M D M シ ェ ア N o. 1 の 実 績 と 信 頼 が あ り ま す 。 スマホやタブレットの ビジネスシーンにおける 幅広い課題を解決 MDMシェア15年連続No.1※1 各業界向けMDMなど、全20部門でシェアNo.1※2 18万社以上の企業様が OPTiM Bizをご利用中※3 これまでに700以上の機種を サポートしています※4 ※1 出典：デロイト トーマツ ミック経済研究所 「クラウドサービス市場の現状と展望 2013年度版 https://mic-r.co.jp/mr/00735/」IT資産管理（MDM含む）市場「合計売上高」2011年度～2012年度実績（2013年発刊）、 「コラボレーション/ コンテンツ・モバイル管理パッケージソフトの市場展望 2014年度版 https://mic-r.co.jp/mr/00850/」MDM市場動向「MDM出荷ID数（SaaS・ASP含む）」2013年度実績（2014年発刊）、 「コラボレーション/コンテンツ・モバイル管理パッ ケージソフトの市場展望 https://mic-r.co.jp/mr/01480/」MDM市場動向「MDM出荷ID数（SaaS・ASP含む）」2014年度～2017年度実績（2015～2018年発刊）、 「コラボレーション・モバイル管理ソフトの市場展望 https://mic- r.co.jp/mr/03230/」MDM市場「MDM出荷ID数（SaaS・ASP含む）」2018年度～2023年度実績および2024年度見込（2019年～2024年発刊）より。 ※2 デロイト トーマツ ミック経済研究所 2024年度発刊「コラボレーション・モバイル管理ソ フトの市場展望 2024年度版」（https://mic-r.co.jp/mr/03230/）の2023年度実績のうち、「OPTiM Biz」が1位の評価を得た部門の数をオプティムが集計 ※3 2019年6月25日、当社集計。 ※4 2022年7月、自社調べ。
6. © 2019-2026 OPTiM Corp. All rights reserved. 6 事業紹介： 医療AX 医療現場の文書作成を 生成AI活用で効率化
7. © 2019-2026 OPTiM Corp. All rights reserved. 8
8. © 2019-2026 OPTiM Corp. All rights reserved. 9
9. © 2019-2026 OPTiM Corp. All rights reserved. 10 Storeに頼りすぎないフロントエンド / 目次  実務で遭遇した問題  Storeが引き起こす問題  Storeの使い時の見極め
10. © 2019-2026 OPTiM Corp. All rights reserved. 12 実務で遭遇した問題
11. © 2019-2026 OPTiM Corp. All rights reserved. 13 実務で発生した問題 変更検知ができない 山田 太郎 基本情報タブ 住所情報タブ 氏名 090-1234-5678 電話 何かしらの情報を入力したいフォームがあります。 2つは別々のタブです。 編集 基本情報タブ 住所情報タブ 編集 10 面積 ha 東京都港区海岸… 住所
12. © 2019-2026 OPTiM Corp. All rights reserved. 14 実務で発生した問題 変更検知ができない 山田 太郎 基本情報タブ 住所情報タブ 氏名 090-1234-5678 電話 何かしらの情報を入力したいフォームがあります。 2つは別々のタブです。 それぞれのタブで編集モードに入りました。 保存 基本情報タブ 住所情報タブ 保存 10 面積 ha 東京都港区海岸… 住所 キャンセル キャンセル
13. © 2019-2026 OPTiM Corp. All rights reserved. 15 実務で発生した問題 変更検知ができない 山田 次郎 基本情報タブ 住所情報タブ 氏名 090-0000-0000 電話 何かしらの情報を入力したいフォームがあります。 2つは別々のタブです。 それぞれのタブで編集モードに入りました。 基本情報タブの方で修正を加えて… 保存 基本情報タブ 住所情報タブ 保存 10 面積 ha 東京都港区海岸… 住所 キャンセル キャンセル
14. © 2019-2026 OPTiM Corp. All rights reserved. 16 実務で発生した問題 変更検知ができない 山田 次郎 基本情報タブ 住所情報タブ 氏名 090-0000-0000 電話 何かしらの情報を入力したいフォームがあります。 2つは別々のタブです。 それぞれのタブで編集モードに入りました。 基本情報タブの方で修正を加えて… 住所情報はあっていたので、「キャンセル」で編集モードを抜けようとすると？ 保存 基本情報タブ 住所情報タブ 保存 10 面積 ha 東京都港区海岸… 住所 キャンセル キャンセル
15. © 2019-2026 OPTiM Corp. All rights reserved. 17 実務で発生した問題 変更検知ができない 山田 次郎 基本情報タブ 住所情報タブ 氏名 090-0000-0000 電話 住所情報は全く編集していないのに、変更確認ダイアログが出てしまう（想定していない挙動） 基本情報タブ 住所情報タブ 保存 10 ha 東京都港区海岸… キャンセル キャンセル 保存 面積 住所 確認 変更された項目があります。 更新内容は破棄されますが、よろしいですか？ OK キャンセル
16. © 2019-2026 OPTiM Corp. All rights reserved. 18 実務で発生した問題 なぜ起きたのか？ 山田 次郎 基本情報タブ 住所情報タブ 氏名 090-0000-0000 電話 保存 基本情報タブ 住所情報タブ 保存 10 面積 ha 東京都港区海岸… 住所 キャンセル キャンセル Store { "name": "山田 次郎", "tell": "090-0000-0000", "areaValue": "10", "address": "東京都港区海岸…“, …… } 2つのタブは共通の1つのStoreを見て いて、その中に一つの大きな Objectとして、それぞれの情報が 保存されていた。
17. © 2019-2026 OPTiM Corp. All rights reserved. 19 Storeが引き起こす問題
18. © 2019-2026 OPTiM Corp. All rights reserved. 20 Storeが引き起こす問題 ゾンビデータ化 前のページで表示されていた情報が 次のページでも表示され続けるバグ が起きる データの流れが追えなくなる データフローが不透明になり、 どのコードが、どこで状態を 変更したのかが分からなくなる 肥大化 汎用コンポーネントのつもりなのに、Storeに依存 しているせいで仕方なくStoreを拡張していかなく てはならなくなる 情報を1つの Store に集約 機能追加で Store を拡張 コンポーネントが Store へ密結合 さらに Store を 増築する
19. © 2019-2026 OPTiM Corp. All rights reserved. 21 Storeが引き起こす問題 なぜこのような実装が生まれるのか？ 入力中の 1次データ Store
20. © 2019-2026 OPTiM Corp. All rights reserved. 22 Storeが引き起こす問題 なぜこのような実装が生まれるのか？ 入力中の 1次データ Store Store は元から責務を詰め込まれやすい そういう仕組みになっている
21. © 2019-2026 OPTiM Corp. All rights reserved. 23 Storeが引き起こす問題 でも、Storeは便利 使わないとどうしようもないことはたくさんある
22. © 2019-2026 OPTiM Corp. All rights reserved. 24 Storeの使い時の見極め
23. © 2019-2026 OPTiM Corp. All rights reserved. 25 Storeの使い時の見極め 親コンポーネントで取りまとめれば解決できる？ Parent.vue Child1.vue Child2.vue Child3.vue 例えば、色のついているコンポーネントで共通の情 報が必要な場合…
24. © 2019-2026 OPTiM Corp. All rights reserved. 26 Storeの使い時の見極め 親コンポーネントで取りまとめれば解決できる？ Parent.vue Child1.vue Child2.vue Child3.vue 例えば、色のついているコンポーネントで共通の情 報が必要な場合… 親コンポーネント側で取りまとめることで、 Storeを使用せずに、データの共有をすることがで きる。 Store
25. © 2019-2026 OPTiM Corp. All rights reserved. 27 Storeの使い時の見極め 親コンポーネントで取りまとめれば解決できる？ Parent.vue Child1.vue Child2.vue Child3.vue 例えば、色のついているコンポーネントで共通の情 報が必要な場合… 親コンポーネント側で取りまとめることで、 Storeを使用せずに、データの共有をすることがで きる。 さらに、TypeScriptの型で各コンポーネントに 渡すデータの型を絞り込んであげることで、 より安全にデータの受け渡しができ、読みやすくな る！ Store Child1型 Child3型 こっちは Child3型！ Child1型で 頂戴！
26. © 2019-2026 OPTiM Corp. All rights reserved. 28 Storeの使い時の見極め 先程の実務の例で言うと… 基本情報タブ 住所情報タブ 基本情報タブ 住所情報タブ "AddressInfo" : { "areaValue": "10", "address": "東京都港区海岸…“, } "BasicInfo“: { "name": "山田 次郎", "tell": "090-0000-0000", } { "BasicInfo“: { "name": "山田 次郎", "tell": "090-0000-0000", }, "AddressInfo" : { "areaValue": "10", "address": "東京都港区海岸…“, …… } Child1.vue Child2.vue Parent.vue
27. © 2019-2026 OPTiM Corp. All rights reserved. 29 Storeの使い時の見極め 親コンポーネントで取りまとめれば解決できる？ Parent1.vue Child1.vue Child2.vue Child3.vue Parent2.vue 逆に、このようなに親コンポーネントが分か れていたり、別ページに分かれているパター ンでは、Storeをせざるを得ない Store
28. © 2019-2026 OPTiM Corp. All rights reserved. 30 Storeの使い時の見極め 親コンポーネントで取りまとめれば解決できる？ Parent.vue Child1.vue Child2.vue Child3.vue Store Parent1.vue Child1.vue Child2.vue Child3.vue Parent2.vue Store Storeの使用を避けられるパターン Storeの使用が避けられないパターン ＞
29. © 2019-2026 OPTiM Corp. All rights reserved. 31 アプリ全体で共有したい情報なのか？ アプリ起動中、ずっと生存し続けていてほしい情報なのか？ Store 以外の解決策はないのか？ Storeの用途として、適切なのだろうか？ ◼TSの型設計をすることで、判断の一助とする Storeの使い時の見極め とりあえずでStoreを使用する前に考えてみる
30. © 2019-2026 OPTiM Corp. All rights reserved. 32 まとめ 必要なところだけ、小さく使う 避けたい辛さ • ゾンビデータ化 • 肥大化 • 追跡のしづらさ を早めに防ぎたい 使う条件 Store は • 全体共有 • 長寿命 でなければいけない情報に絞る 先に考えること 本当に Store が最適解なのかを 一度立ち止まって考える 明確に型を分離する • データフローを型で縛る • 型を設計することでStoreを使うかどうかの判断軸に なる • コードを見る側も型でどう使うか判断しやすい
31. © 2019-2026 OPTiM Corp. All rights reserved.