WEBフロントエンドにおけるソフトウェア設計の考察 / Consideration of software design in WEB front end

B8403d102456248570005ee7fb2ba0f7?s=47 philomagi
February 16, 2020

WEBフロントエンドにおけるソフトウェア設計の考察 / Consideration of software design in WEB front end

概要
・現代Webフロントエンドにおける難しさは何によってもたらされるのか
・Webフロントエンドと「ドメイン」の関係について
・Webフロントエンドを「設計」することについて
・Webフロントエンドにおけるアーキテクチャ考察

参考資料(スライドにも記載)
・エリック・エヴァンスのドメイン駆動設計
 ・Eric Evans(著)今関 剛(監訳)和智 右桂、牧野祐子(訳)
・Clean Architecture 達人に学ぶソフトウェアの構造と設計
 ・Robert C. Martin(著)角 征典、高木 正弘(訳)
・未来を作った人々 - ゼロックス・パロアルト研究所とコンピュータエイジの黎明
 ・Michael Hiltzik(著)エ・ビスコム・テック・ラボ(監訳)鴨沢眞夫(訳)
・オブジェクト指向のハードコア
 ・https://www.zerobase.jp/salon/2019/05/25/hardcore-oo.html
 ・(2) 哲学
 ・(3) Smalltalk by @sumim
 ・(8) GUI by 上野学(@manabuueno)
・クライアントアプリの「中心」とは何か
 ・by @takasek
 ・https://speakerdeck.com/takasek/20200121-the-center-of-the-client-number-ios-ca
・複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ
 ・by しんぺい(@shinpei0213)
 ・https://speakerdeck.com/shinpeim/fu-za-najavascriptapurikesiyonnili-tixiang-kautamefalseakitekutiya
 ・http://techblog.reraku.co.jp/entry/2017/08/08/184313
・Almin.js | JavaScriptアーキテクチャ
 ・by azu(@azu_re)
 ・https://azu.github.io/slide/2016/child_process_sushi/almin-javascript-architecture.html
・CQRS+ES(再)入門
 ・by かとじゅん(@j5ik2o)
 ・https://speakerdeck.com/j5ik2o/cqrs-plus-es-zai-ru-men
・Facebook の決断:MVCはスケールしない。ならば Flux だ。
 ・https://www.infoq.com/jp/news/2014/05/facebook-mvc-flux/
・Vue.js + デザインパターンによるコンポーネント実装
 ・by @philomagi
 ・https://speakerdeck.com/tooppoo/vue-dot-js-dezainpatan-niyorukonponentoshi-zhuang-v2
 ・https://github.com/tooppoo/sample-for-vue-with-design-patterns
・モデルとは何であって、何でないのか
 ・by 末並 晃(@a_suenami)
 ・https://speakerdeck.com/a_suenami/moderutohahe-deatute-he-denaifalseka-number-kichijojipm
 ・https://a-suenami.hatenablog.com/entry/2019/08/05/084814
・atomic design
 ・by brad frost
 ・https://bradfrost.com/blog/post/atomic-web-design/
・Atomic Design 〜 堅牢で使いやすいUIを効率よく設計する
 ・五藤 佑典
・MVCとはなにか
 ・by 天重 誠二(@tenjuu99)
 ・https://speakerdeck.com/tenjuu99/what-mvc-is
 ・https://note.com/tenjuu99/n/n0232ccd1089d
 ・https://note.com/tenjuu99/n/nbbb4b273676d
・The Model-View-Controller (MVC)Its Past and Present
 ・Trygve Reenskaug
 ・http://folk.uio.no/trygver/2003/javazone-jaoo/MVC_pattern.pdf

B8403d102456248570005ee7fb2ba0f7?s=128

philomagi

February 16, 2020
Tweet

Transcript

  1. 48.

    48

  2. 51.

    Atomic Designと「設計」 51 • Atomic Design はUIパーツの設計方法論 ◦ Atomic Design

    のスコープは「UIパーツをど う組み立てるか」まで ◦ ソフトウェアの設計までカバーするものでは ない ◦ Atomic Design で「設計」は完結しない
  3. 63.
  4. 64.
  5. 68.
  6. 74.

    74 補足)フロントエンドと「ロジック」 • ここで言う「ロジック」とは何か? • 「ロジック」=ビジネスルール・業務ルールとは限らない ◦ 「ロジック」といえばビジネスルール・業務ルールというのは、主にバックエンドというコンテクスト における表現 ◦

    この意味での「ロジック」ならば、フロントエンドには無い(むしろ、有ってはいけない) • フロントエンドにおける「ロジック」は、表示と操作のルール ◦ そもそもフロントエンドとバックエンドでコンテクストが異なるのだから、「ロジック」が同じ意味で あるという保証は無い ◦ むしろ、それぞれコンテクストが違うのだから、扱う「ロジック」は異なって当然 ◦ フロントエンドでは、この意味でのロジックを対象に抽象化を行う
  7. 105.

    105

  8. 109.

    109

  9. 111.
  10. 122.

    展望あるいは予想 122 • 「ユーザーイリュージョン」への接続 ◦ フロントの関心 =「ユーザーが『した』と思ったことを現実にする」という整理は、「ユーザーイ リュージョン」という視点へつながりそう?( cf. 「MVCとは何か」)。

    ◦ 実装パターンではなく、パタン・ランゲージとしての MVCとの接続?(cf. The Model-View-Controller (MVC)Its Past and Present) ▪ 「ユーザーが『した』と思ったことを現実にする」は「ユーザーのメンタルモデルを実装す る」につながるか? ▪ 操作と表示を改めて Viewから隔離することで、 Viewの「民主化」は成るか? • オブジェクト指向ユーザーインターフェース(OOUI)との関連 ◦ 「フロントエンドソフトウェアの設計」と相性が良いように感じた。 ◦ むしろ、今回の議論の行き着くところは OOUIなのかもしれない。
  11. 123.

    展望あるいは予想 123 • フロントエンドDDDの検証 ◦ フロントエンドはサーバーとは別の形でドメインと関わる。 ◦ それならば、フロントエンドでの DDDも理論上可能なはず。 ▪

    一方で、フロントエンドのドメインとの関連の仕方はことなる以上、フロントエンドにおける 「ドメインモデル」の対象も変わってきそう ▪ フロントエンドにとってのドメインモデルは「ユーザーのメンタルモデル」? ◦ フロントエンドDDDにおける特殊性・一般性・要件を言語化する。 • CQRS(+ES)としてのFluxアーキテクチャ再分析 ◦ フロントエンドCQRS(+ES)という視点は有力に感じた。 ◦ 具体的な活用方法や活用箇所を言語化する。
  12. 128.

    参考資料(敬称略) 128 • エリック・エヴァンスのドメイン駆動設計 ◦ Eric Evans(著)今関 剛(監訳)和智 右桂、牧野祐子(訳) •

    Clean Architecture 達人に学ぶソフトウェアの構造と設計 ◦ Robert C. Martin(著)角 征典、高木 正弘(訳) • 未来を作った人々 - ゼロックス・パロアルト研究所とコンピュータエイジの黎明 ◦ Michael Hiltzik(著)エ・ビスコム・テック・ラボ(監訳)鴨沢眞夫(訳) • オブジェクト指向のハードコア ◦ https://www.zerobase.jp/salon/2019/05/25/hardcore-oo.html ◦ (2) 哲学 ◦ (3) Smalltalk by @sumim ◦ (8) GUI by 上野学(@manabuueno) • クライアントアプリの「中心」とは何か ◦ by @takasek ◦ https://speakerdeck.com/takasek/20200121-the-center-of-the-client-number-ios-ca
  13. 129.

    参考資料(敬称略) 129 • 複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ ◦ by しんぺい(@shinpei0213) ◦ https://speakerdeck.com/shinpeim/fu-za-najavascriptapurikesiyonnili-tixiang-kautamefalseakit ekutiya

    ◦ http://techblog.reraku.co.jp/entry/2017/08/08/184313 • Almin.js | JavaScriptアーキテクチャ ◦ by azu(@azu_re) ◦ https://azu.github.io/slide/2016/child_process_sushi/almin-javascript-architecture.html • CQRS+ES(再)入門 ◦ by かとじゅん(@j5ik2o) ◦ https://speakerdeck.com/j5ik2o/cqrs-plus-es-zai-ru-men • Facebook の決断:MVCはスケールしない。ならば Flux だ。 ◦ https://www.infoq.com/jp/news/2014/05/facebook-mvc-flux/ • Vue.js + デザインパターンによるコンポーネント実装 ◦ by @philomagi ◦ https://speakerdeck.com/tooppoo/vue-dot-js-dezainpatan-niyorukonponentoshi-zhuang-v2 ◦ https://github.com/tooppoo/sample-for-vue-with-design-patterns
  14. 130.

    参考資料(敬称略) 130 • モデルとは何であって、何でないのか ◦ by 末並 晃(@a_suenami) ◦ https://speakerdeck.com/a_suenami/moderutohahe-deatute-he-denaifalseka-number-kichijojipm

    ◦ https://a-suenami.hatenablog.com/entry/2019/08/05/084814 • atomic design ◦ by brad frost ◦ https://bradfrost.com/blog/post/atomic-web-design/ • Atomic Design 〜 堅牢で使いやすいUIを効率よく設計する ◦ 五藤 佑典 • MVCとはなにか ◦ by 天重 誠二(@tenjuu99) ◦ https://speakerdeck.com/tenjuu99/what-mvc-is ◦ https://note.com/tenjuu99/n/n0232ccd1089d ◦ https://note.com/tenjuu99/n/nbbb4b273676d • The Model-View-Controller (MVC)Its Past and Present ◦ Trygve Reenskaug ◦ http://folk.uio.no/trygver/2003/javazone-jaoo/MVC_pattern.pdf