フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development

フロントエンドカンファレンス東京2025における発表資料です。
GUIクライアント開発のノウハウのうち、フロントエンド開発にも活かせるものについてお話しています

# URL
YouTube: https://www.youtube.com/c/narusemi
HomePage: https://nrslib.com
Twitter: https://twitter.com/nrslib
Instagram: https://www.instagram.com/nrslib/

Transcript

1. フロントエンド開発に役立つクライアントプログラム共通のノウハウ nrs
2. 2 Profile nrs（成瀬 允宣） @nrslib コドモンのCTO 趣味：カンファレンス講演 学生支援 小学校支援 写真
3. 3 • フロントエンドカンファレンス北海道2024で喋ったりするぐらいは好き ◦ カメラマンもしてました フロントエンドやってるの？
4. 4 フロントエンド遍歴
5. 5 フロントエンド遍歴
6. 6 フロントエンド遍歴
7. 7 フロントエンド遍歴
8. 8 フロントエンド遍歴
9. 9 フロントエンド遍歴 JavaScript
10. 10 フロントエンド遍歴 JavaScript
11. 11 フロントエンド遍歴 JavaScript
12. 12 フロントエンド遍歴 JavaScript
13. 13 フロントエンド遍歴 JavaScript 基本は一緒
14. 14 フロントエンド遍歴 JavaScript つらみも一緒
15. たのしいゲーム開発
16. 16 ディレクター「おはよう」 朝令暮改
17. 17 ディレクター「おはよう」 ぼく「おはようございます、ここんところどうしましょう？」 朝令暮改
18. 18 ディレクター「□□にしてくれる？」 朝令暮改
19. 19 ディレクター「□□にしてくれる？」 ぼく「御意」 朝令暮改
20. 20 朝令暮改 時はすぎて夕方……
21. 21 ぼく「できました」 朝令暮改
22. 22 ぼく「できました」 ディレクター「なんか思ったんと違うなー」 朝令暮改
23. 23 ディレクター「やっぱ△△にしといて」 朝令暮改
24. 24 ディレクター「やっぱ△△にしといて」 ぼく「御意」 朝令暮改
25. 25 朝令暮改 時はすぎて翌日……
26. 26 ディレクター「一晩考えたんだけどさー」 朝令暮改
27. 27 ディレクター「〇〇にできる？」 朝令暮改
28. 28 ディレクター「〇〇にできる？」 ぼく「御意」 朝令暮改
29. たのしいゲーム開発・その２
30. 30 保守？ ねぇよそんなもん
31. 31 • コンシューマゲームって更新できますか？ 保守？ ねぇよそんなもん
32. 32 • コンシューマゲームって更新できますか？ ◦ できないですよね 保守？ ねぇよそんなもん
33. 33 • コンシューマゲームって更新できますか？ ◦ できないですよね ▪ え？ できます？ 保守？ ねぇよそんなもん
34. 34 • コンシューマゲームって更新できますか？ ◦ できないですよね ▪ え？ できます？ • それ最近のゲームですよね？ 保守？ ねぇよそんなもん
35. 35 • コンシューマゲームって更新できますか？ ◦ できないですよね ▪ え？ できます？ • それ最近のゲームですよね？ ◦ ファミコンとかスーファミ時代にあります？ 保守？ ねぇよそんなもん
36. 36 • ソシャゲ流行りましたよね 保守？ ねぇよそんなもん
37. 37 • ソシャゲ流行りましたよね ◦ ソシャゲは更新しますよね？ 保守？ ねぇよそんなもん
38. 38 • ソシャゲ流行りましたよね ◦ ソシャゲは更新しますよね？ ▪ むしろ、更新しなきゃユーザー離れますよね？ 保守？ ねぇよそんなもん
39. 39 • ソシャゲ流行りましたよね ◦ ソシャゲは更新しますよね？ ▪ むしろ、更新しなきゃユーザー離れますよね？ • 流行りにのった会社の開発者ってどういう人達だと思いま す？ 保守？ ねぇよそんなもん
40. 40 • ソシャゲ流行りましたよね ◦ ソシャゲは更新しますよね？ ▪ むしろ、更新しなきゃユーザー離れますよね？ • 流行りにのった会社の開発者ってどういう人達だと思いま す？ ◦ コンシューマゲームを作ってた人たちです！ 保守？ ねぇよそんなもん
41. 41 • ソシャゲ流行りましたよね ◦ ソシャゲは更新しますよね？ ▪ むしろ、更新しなきゃユーザー離れますよね？ • 流行りにのった会社の開発者ってどういう人達だと思いま す？ ◦ コンシューマゲームを作ってた人たちです！ ▪ つまり、保守性は… 保守？ ねぇよそんなもん
42. 42 • ソシャゲ流行りましたよね ◦ ソシャゲは更新しますよね？ ▪ むしろ、更新しなきゃユーザー離れますよね？ • 流行りにのった会社の開発者ってどういう人達だと思いま す？ ◦ コンシューマゲームを作ってた人たちです！ ▪ つまり、保守性は…… • 後ほど語ります 保守？ ねぇよそんなもん
43. たのしいゲーム開発・その３
44. 44 テスト？ ねぇよそんなもん
45. 45 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） テスト？ ねぇよそんなもん
46. 46 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました テスト？ ねぇよそんなもん
47. 47 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました ▪ デバッグ得意な人は開発者が嫌なところをよく知ってる人です テスト？ ねぇよそんなもん
48. 48 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました ▪ デバッグ得意な人は開発者が嫌なところをよく知ってる人です • ちなみに私も得意でした テスト？ ねぇよそんなもん
49. 49 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました ▪ デバッグ得意な人は開発者が嫌なところをよく知ってる人です • ちなみに私も得意でした ◦ 「なんかこのボタンぷるってすんなぁ！？」 テスト？ ねぇよそんなもん
50. 50 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました ▪ デバッグ得意な人は開発者が嫌なところをよく知ってる人です • ちなみに私も得意でした ◦ 「なんかこのボタンぷるってすんなぁ！？」 ◦ 「どうせここを連打されるのが嫌なんだろ！？」 テスト？ ねぇよそんなもん
51. 51 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました ▪ デバッグ得意な人は開発者が嫌なところをよく知ってる人です • ちなみに私も得意でした ◦ 「なんかこのボタンぷるってすんなぁ！？」 ◦ 「どうせここを連打されるのが嫌なんだろ！？」 ◦ 「なんか1Fおかしいぞここ」 テスト？ ねぇよそんなもん
52. 52 • テストなんて書いても見た目が伴わなければ何の意味もないんだよ！（暴 論） ◦ 結果的にデバッガーという職種が発達してました ▪ デバッグ得意な人は開発者が嫌なところをよく知ってる人です • ちなみに私も得意でした ◦ 「なんかこのボタンぷるってすんなぁ！？」 ◦ 「どうせここを連打されるのが嫌なんだろ！？」 ◦ 「なんか1Fおかしいぞここ」 ◦ 最近は自動テストをやってるケースも増えてきたようだ テスト？ ねぇよそんなもん
53. そんな楽しい現場経験から得られたもの
54. 54 • データを操作するのは一箇所のみ • コンポーネントはめんどくさいと使われない • コンポーネントは気づかれないと使われない • StateMachine実装 • Mediatorパターン • イベントヘル • グローバルやめよ • ： 今でも役立つゲーム開発で得たノウハウ
55. 55 • データを操作するのは一箇所のみ • コンポーネントはめんどくさいと使われない • コンポーネントは気づかれないと使われない • StateMachine実装 • Mediatorパターン • イベントヘル • グローバルやめよ • ： 今でも役立つゲーム開発で得たノウハウ フロントエンド開発でも 役立った！
56. データを操作するのは一箇所のみ
57. 57 • Single Source of Truth SSOT
58. 58 • Single Source of Truth ◦ 信頼できる唯一の情報源 ◦ すべてのデータが一箇所のみで作成、あるいは編集できるようにする SSOT
59. 59 • Single Source of Truth ◦ 信頼できる唯一の情報源 ◦ すべてのデータが一箇所のみで作成、あるいは編集できるようにする ◦ フロントエンドのための格言ではない ▪ が、意識するととってもいいぞ！ SSOT
60. 60 更新し忘れる Component A Component B Component C Component D Component F Name:nrs Name:nrs Name:nrs Name:nrs Name:nrs
61. 61 更新し忘れる Component A Component B Component C Component D Component F Name:nrslib Name:nrs Name:nrs Name:nrs Name:nrs
62. 62 更新し忘れる Component A Component B Component C Component D Component F Name:nrslib Name:nrslib Name:nrs Name:nrslib Name:nrslib
63. 63 更新し忘れる Component A Component B Component C Component D Component F Name:nrslib Name:nrslib Name:nrs Name:nrslib Name:nrslib
64. 64 実はもうちょっと深刻なんだ Component A Component B Component C Component D Component F Ptr: 1 Name:nrs Ptr: 1 Name:nrs Ptr: 2 Name:nrs Ptr: 1 Name:nrs Ptr: 1 Name:nrs
65. 65 実はもうちょっと深刻なんだ Component A Component B Component C Component D Component F Ptr: 1 Name:nrslib Ptr: 1 Name:nrs Ptr: 2 Name:nrs Ptr: 3 Name:nrs Ptr: 1 Name:nrs
66. 66 実はもうちょっと深刻なんだ Component A Component B Component C Component D Component F Ptr: 1 Name:nrslib Ptr: 1 Name:nrslib Ptr: 2 Name:nrs Ptr: 1 Name:nrslib Ptr: 3 Name:nrs
67. 67 実はもうちょっと深刻なんだ Component A Component B Component C Component D Component F Ptr: 1 Name:nrslib Ptr: 1 Name:nrslib Ptr: 2 Name:nrs Ptr: 1 Name:nrslib Ptr: 3 Name:nrs
68. 68 どうするかというと Component A Component B Component C Component D Component F Name:nrs Name:nrs Name:nrs Name:nrs Name:nrs
69. 69 どうするかというと Component A Component B Component C Component D Component F Name:nrs Name:nrs Name:nrs Name:nrs Name:nrs 更新したい！
70. 70 どうするかというと Component A Component B Component C Component D Component F Name:nrs Name:nrs Name:nrs Name:nrs Name:nrs 更新したい
71. 71 どうするかというと Component A Component B Component C Component D Component F Name:nrslib Name:nrs Name:nrs Name:nrs Name:nrs
72. 72 どうするかというと Component A Component B Component C Component D Component F Name:nrslib Name:nrs Name:nrs Name:nrs Name:nrs Name:nrslib Name:nrslib
73. 73 どうするかというと Component A Component B Component C Component D Component F Name:nrslib Name:nrslib Name:nrslib Name:nrs Name:nrs Name:nrslib Name:nrslib
74. 74 どうするかというと Component A Component B Component C Component D Component F Name:nrslib Name:nrslib Name:nrslib Name:nrs Name:nrs Name:nrslib Name:nrslib
75. 75 どうするかというと Component A Component B Component C Component D Component F Name:nrslib Name:nrslib Name:nrslib Name:nrslib Name:nrslib
76. 76 ARVだと
77. 77 ARVだと
78. 78 • 子コンポーネントへの伝搬はプロパティバインディングで実現 ARVだと Component C Component D Component F Name:nrslib Name:nrs Name:nrs Name:nrslib Name:nrslib
79. 79 • React ◦ https://react.dev/learn/passing-props-to-a-component ARVの説明にもあるよね
80. 80 • Vue ◦ https://vuejs.org/guide/components/props.html ARVの説明にもあるよね
81. 81 • https://v2.vuejs.org/v2/style-guide props down, events up
82. コンポーネントはめんどくさいと使われない
83. 83 悲しみの物語 みんな使えそうなコンポーネントを たくさん作ったぞ！ これでみんな楽になるぞ！！
84. 84 悲しみの物語 ……あれ？ 使ってない？
85. 85 悲しみの物語 WindowYesNoと YesNoWindowがある……
86. 86 悲しみの物語 あの…… なんでコンポーネントを 作ってるんです？
87. 87 悲しみの物語 めんどくさかったから
88. type MyButtonProps = { text: string; primary: boolean; size: 'small' | 'medium' | 'large'; icon: string; iconPosition: 'left' | 'right'; borderRadius: string; padding: string; margin: string; fontFamily: string; fontSize: string; fontWeight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold'; textTransform: 'none' | 'uppercase' | 'lowercase' | 'capitalize'; letterSpacing: string; lineHeight: string | number; shadow: boolean; shadowColor: string; shadowBlur: number; onClick: (event: React.MouseEvent<HTMLButtonElement>) => void; } これは極端な例だが……
89. 89 どうしたら使ってくれるんだ
90. HTMLを信じろ <button>ボタン</button>
91. 91 • Progressive Disclosure ◦ ユーザーが必要な時に必要な情報や機能にアクセスできるようにする • 成功のポイント ◦ 80/20ルール ▪ 80%のケースで使われる機能を20%の労力で使えるよう ◦ 段階的な複雑性 ▪ 簡単なことは簡単に、複雑なことも可能に ◦ Sensible Defaults ▪ 殆どの場合でそのまま使える めんどくさいと使われない
92. コンポーネントは気づかれないと使われない
93. 93 悲しみの物語２ みんな使えそうなコンポーネントを たくさん作ったぞ！ これでみんな楽になるぞ！！
94. 94 悲しみの物語２ ……あれ？ 使ってない？
95. 95 悲しみの物語２ あの…… なんでコンポーネントを 作ってるんです？
96. 96 悲しみの物語２ え？ あったの？
97. 97 今どきはStorybook
98. 98 <template> <normal-template> <template slot="main-content"> <h2 style="color: green">Play Ground</h2> <link-button :to="{name: 'module-playground-dropdown'}">Dropdown</link-button> <link-button :to="{name: 'module-playground-table'}">Table</link-button> <link-button :to="{name: 'module-playground-modal'}">Modal</link-button> <link-button :to="{name: 'module-playground-tab'}">Tab</link-button> <link-button :to="{name: 'modulePlaygroundPassword'}">Password</link-button> <link-button :to="{name: 'modulePlaygroundButton'}">Button</link-button> <link-button :to="{name: 'modulePlaygroundText'}">Text</link-button> <link-button :to="{name: 'modulePlaygroundFormElement'}">FormElement & Validator</link-button> <link-button :to="{name: 'modulePlaygroundDatepicker'}">datepicker</link-button> <link-button :to="{name: 'modulePlaygroundLoading'}">L@@ding</link-button> <link-button :to="{name: 'modulePlaygroundProgressTracker'}">ProgressTracker</link-button> <link-button :to="{name: 'modulePlayGroundProgress'}">Progress</link-button> <link-button :to="{name: 'modulePlayGroundCheckbox'}">Checkbox</link-button> <link-button :to="{name: 'modulePlayGroundPanel'}">Panel</link-button> <link-button :to="{name: 'modulePlaygroundVariableInput'}">VariableInput</link-button> <link-button :to="{name: 'modulePlaygroundRadioGroupButton'}">RadioGroup</link-button> <link-button :to="{name: 'modulePlayGroundClipboard'}">Clipboard</link-button> <link-button :to="{name: 'modulePlaygroundInnerWizard'}">InnerWizard</link-button> <link-button :to="{name: 'modulePlayGroundTooltip'}">Tooltip</link-button> <link-button :to="{name: 'modulePlayGroundConfigurationTipsPage'}">ConfigurationTips</link-button> <link-button :to="{name: 'modulePlayGroundPager'}">Pager</link-button> <link-button :to="{name: 'modulePlayGroundAnchor'}">Anchor</link-button> <link-button :to="{name: 'modulePlayGroundCapacityDisplay'}">Capacity</link-button> <link-button :to="{name: 'modulePlayGroundEmptyPanel'}">EmptyPanel</link-button> <link-button :to="{name: 'modulePlayGroundCarouselPage'}">Carousel</link-button> <link-button :to="{name: 'modulePlayGroundGraphPage'}">Graph</link-button> <router-view></router-view> </template> </normal-template> </template> <script lang="ts"> import { Component } from 'vue-property-decorator'; import { BasePage } from '@lib/vue/BasePage'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; import LinkButton from 'front/atomic/Atoms/Button/LinkButton.vue'; @Component({ components: { LinkButton, NormalTemplate }, }) export default class ModulePlayGroundRootPage extends Vue {} </script>
99. 99 気づかれないと使われない
100. 100 • Discoverability（発見可能性）を考慮しよう 気づかれないと使われない
101. 101 • Discoverability（発見可能性）を考慮しよう ◦ メンバーに「ここにあるよ！」といっても聞き流される 気づかれないと使われない
102. 102 • Discoverability（発見可能性）を考慮しよう ◦ メンバーに「ここにあるよ！」といっても聞き流される ◦ 開発プロセスの中で「とりあえず見てみるか」の流れを作る ▪ ただあるだけじゃなくて触れる状況もセット 気づかれないと使われない
103. 103 • Discoverability（発見可能性）を考慮しよう ◦ メンバーに「ここにあるよ！」といっても聞き流される ◦ 開発プロセスの中で「とりあえず見てみるか」の流れを作る ▪ ただあるだけじゃなくて触れる状況もセット ◦ 最近は AI エージェントに聞くというアプローチも効果的 気づかれないと使われない
104. StateMachine 実装
105. 105 • オブジェクトごとに主行動はひとつである ゲームオブジェクト制御
106. 106 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ゲームオブジェクト制御
107. 107 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ◦ イメージ：フレームごとにオブジェクトは１処理を行う ゲームオブジェクト制御
108. 108 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ◦ イメージ：フレームごとにオブジェクトは１処理を行う ▪ 走るボタンとガードボタンとポーズボタンが同時に押されたら？ ゲームオブジェクト制御
109. 109 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ◦ イメージ：フレームごとにオブジェクトは１処理を行う ▪ 走るボタンとガードボタンとポーズボタンが同時に押されたら？ • 優先度が高いものだけを実行する！ ゲームオブジェクト制御
110. 110 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ◦ イメージ：フレームごとにオブジェクトは１処理を行う ▪ 走るボタンとガードボタンとポーズボタンが同時に押されたら？ • 優先度が高いものだけを実行する！ ◦ 純粋なイベントドリブンにすると ゲームオブジェクト制御
111. 111 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ◦ イメージ：フレームごとにオブジェクトは１処理を行う ▪ 走るボタンとガードボタンとポーズボタンが同時に押されたら？ • 優先度が高いものだけを実行する！ ◦ 純粋なイベントドリブンにすると ▪ 優先順位を制御しづらい ゲームオブジェクト制御
112. 112 • オブジェクトごとに主行動はひとつである ◦ 毎フレーム更新される（俗に言うゲームループ） ◦ イメージ：フレームごとにオブジェクトは１処理を行う ▪ 走るボタンとガードボタンとポーズボタンが同時に押されたら？ • 優先度が高いものだけを実行する！ ◦ 純粋なイベントドリブンにすると ▪ 優先順位を制御しづらい ▪ その行動が可能かの確認処理が散在する ゲームオブジェクト制御
113. 113 StateMachine
114. type GamePhase = "mainMenu" | "gamePlay" | "pause" | "gameOver" | "victory"; class GameCoordinator { private phase: GamePhase = "mainMenu"; constructor() { // 初期化処理 } start(): void { this.step("mainMenu"); } private step(phase: GamePhase): void { switch (phase) { case "mainMenu": this.stepMainMenu(); break; case "gamePlay": this.stepGamePlay(); break; case "pause": this.stepPause(); break; case "gameOver": this.stepGameOver(); break; case "victory": this.stepVictory(); break; } this._phase = phase; } private stepMainMenu(): void { // Main Menu を開始 } private handleStartButtonClick(): void { this.step("gamePlay"); }
115. Mediator パターン
116. 116 • 選択中と未選択をどうやって制御する？ たとえばこんな画面
117. const TabButton = forwardRef<TabButtonHandle, { id: string; label: string; onRegister: (id: string, ref: React.RefObject<TabButtonHandle>) => void; }>(({ id, label, onRegister }, ref) => { const [isActive, setIsActive] = useState(false); const otherButtons = useRef<Map<string, React.RefObject<TabButtonHandle>>>(new Map()); const selfRef = useRef<TabButtonHandle>(null); ... const handleClick = () => { otherButtons.current.forEach(buttonRef => { buttonRef.current?.deactivate(); }); setIsActive(true); }; return (<button>...</button>); });
118. const TabButton = forwardRef<TabButtonHandle, { id: string; label: string; onRegister: (id: string, ref: React.RefObject<TabButtonHandle>) => void; }>(({ id, label, onRegister }, ref) => { const [isActive, setIsActive] = useState(false); const otherButtons = useRef<Map<string, React.RefObject<TabButtonHandle>>>(new Map()); const selfRef = useRef<TabButtonHandle>(null); ... const handleClick = () => { otherButtons.current.forEach(buttonRef => { buttonRef.current?.deactivate(); }); setIsActive(true); }; return (<button>...</button>); });
119. 119 動作イメージ
120. 120 動作イメージ
121. 121 動作イメージ
122. const TabButton: React.FC<{ id: string; label: string; isActive: boolean; onClick: (id: string) => void; }> = ({ id, label, isActive, onClick }) => { return ( <button onClick={() => onClick(id)}> {label} </button> ); };
123. const TabButtonGroup: React.FC<{ tabs: Array<{ id: string; label: string }>; activeTab: string; onTabChange: (id: string) => void; }> = ({ tabs, activeTab, onTabChange }) => { return ( <div> {tabs.map(tab => ( <TabButton key={tab.id} id={tab.id} label={tab.label} isActive={activeTab === tab.id} onClick={onTabChange} /> ))} </div> ); };
124. 124 動作イメージ
125. 125 動作イメージ
126. 126 動作イメージ
127. 127 動作イメージ
128. 128 • 相互参照 ◦ ５個のボタンなら 5*4 = 20 の参照 ◦ O(n^2) の複雑度 動作イメージ
129. 129 • 相互参照 ◦ ５個のボタンなら 5*4 = 20 の参照 ◦ O(n^2) の複雑度 • Mediator ◦ 5個のボタンなら 5 = 5 の参照 ◦ O(n) の複雑度 動作イメージ
130. 130 • 相互参照 ◦ ５個のボタンなら 5*4 = 20 の参照 ◦ O(n^2) の複雑度 • Mediator ◦ 5個のボタンなら 5 = 5 の参照 ◦ O(n) の複雑度 • どういう違い？ ◦ どのボタンがどのボタンを変更したか追跡困難 動作イメージ
131. イベントヘル
132. 132 Action Script って知ってますか？ • Adobe ◦ Flash
133. 133 Event Driven • Event Dispatcher
134. 134 Event Driven • Event Dispatcher ◦ すごいぞ！
135. 135 Event Driven • Event Dispatcher ◦ すごいぞ！ ▪ dipatchEvent
136. 136 Event Driven • Event Dispatcher ◦ すごいぞ！ ▪ dipatchEvent ▪ どのオブジェクトもイベント送出できるぞ！
137. 137 Event Driven • Event Dispatcher ◦ すごいぞ！ ▪ dipatchEvent ▪ どのオブジェクトもイベント送出できるぞ！ ◦ すごいぞ！
138. 138 Event Driven • Event Dispatcher ◦ すごいぞ！ ▪ dipatchEvent ▪ どのオブジェクトもイベント送出できるぞ！ ◦ すごいぞ！ ▪ addEventListener
139. 139 Event Driven • Event Dispatcher ◦ すごいぞ！ ▪ dipatchEvent ▪ どのオブジェクトもイベント送出できるぞ！ ◦ すごいぞ！ ▪ addEventListener ▪ どのオブジェクトもイベント受け取れるぞ！
140. 140 とっても自由です！
141. 141 とっても自由です！
142. 142 とっても自由です！
143. 143 とっても自由です！
144. 144 とっても自由です！
145. 145 とっても自由です！
146. 146 とっても自由です！
147. 147 とっても自由です！ • 限度があるやろ！！！
148. 148 とっても自由です！ • 限度があるやろ！！！ ◦ 1F の間にイベントが飛び交う
149. 149 とっても自由です！ • 限度があるやろ！！！ ◦ 1F の間にイベントが飛び交う ◦ グローバルにイベントが送出されて
150. 150 とっても自由です！ • 限度があるやろ！！！ ◦ 1F の間にイベントが飛び交う ◦ グローバルにイベントが送出されて ◦ イベントを受け取ったオブジェクトがイベントを送出して
151. 151 とっても自由です！ • 限度があるやろ！！！ ◦ 1F の間にイベントが飛び交う ◦ グローバルにイベントが送出されて ◦ イベントを受け取ったオブジェクトがイベントを送出して ◦ 同時に別のオブジェクトからイベントが送出されて
152. 152 とっても自由です！ • 限度があるやろ！！！ ◦ 1F の間にイベントが飛び交う ◦ グローバルにイベントが送出されて ◦ イベントを受け取ったオブジェクトがイベントを送出して ◦ 同時に別のオブジェクトからイベントが送出されて ◦ 入り組みながらイベントが送出されつづけ
153. 153 とっても自由です！ • 限度があるやろ！！！ ◦ 1F の間にイベントが飛び交う ◦ グローバルにイベントが送出されて ◦ イベントを受け取ったオブジェクトがイベントを送出して ◦ 同時に別のオブジェクトからイベントが送出されて ◦ 入り組みながらイベントが送出されつづけ ◦ 「このイベントはどこからきてるねん！？」
154. 154 イベントヘル
155. 155 イベントヘル • イベントからイベントを発火するな
156. 156 イベントヘル • イベントからイベントを発火するな ◦ イベントを受け取ったオブジェクトからイベントが送出
157. 157 イベントヘル • イベントからイベントを発火するな ◦ イベントを受け取ったオブジェクトからイベントが送出 ◦ そのイベントを受け取ったオブジェクト複数からイベントが送出
158. 158 イベントヘル • イベントからイベントを発火するな ◦ イベントを受け取ったオブジェクトからイベントが送出 ◦ そのイベントを受け取ったオブジェクト複数からイベントが送出 ◦ オブジェクトとオブジェクトがイベントで会話をしだす……
159. 159 イベントヘル • イベントからイベントを発火するな ◦ イベントを受け取ったオブジェクトからイベントが送出 ◦ そのイベントを受け取ったオブジェクト複数からイベントが送出 ◦ オブジェクトとオブジェクトがイベントで会話をしだす…… ◦ その間1F
160. 160 イベントヘル • イベントからイベントを発火するな ◦ イベントを受け取ったオブジェクトからイベントが送出 ◦ そのイベントを受け取ったオブジェクト複数からイベントが送出 ◦ オブジェクトとオブジェクトがイベントで会話をしだす…… ◦ その間1F ◦ そもそもイベントをグローバルに送出するな
161. static やめよ
162. 162 static やめろ
163. グローバルやめよ
164. 164 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード
165. 165 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード ◦ 「このコードを書いた人間は天才に違いない」
166. 166 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード ◦ 「このコードを書いた人間は天才に違いない」 ▪ 緻密に編み込まれたジェンガ
167. 167 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード ◦ 「このコードを書いた人間は天才に違いない」 ▪ 緻密に編み込まれたジェンガ ◦ 脳内メモリの容量が違いすぎる
168. 168 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード ◦ 「このコードを書いた人間は天才に違いない」 ▪ 緻密に編み込まれたジェンガ ◦ 脳内メモリの容量が違いすぎる ▪ 1F内にこの static なフィールドが何回書き換わってるんだ！？
169. 169 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード ◦ 「このコードを書いた人間は天才に違いない」 ▪ 緻密に編み込まれたジェンガ ◦ 脳内メモリの容量が違いすぎる ▪ 1F内にこの static なフィールドが何回書き換わってるんだ！？ • データ更新したはずが書き換わってない！？
170. 170 それはとても緻密な • public static がふんだんに使われた奇跡のようなコード ◦ 「このコードを書いた人間は天才に違いない」 ▪ 緻密に編み込まれたジェンガ ◦ 脳内メモリの容量が違いすぎる ▪ 1F内にこの static なフィールドが何回書き換わってるんだ！？ • データ更新したはずが書き換わってない！？ ◦ （入念な更新をされているパターン）
171. 171 グローバルやめたい • プログラミング言語の歴史を紐解くとグローバル変数との戦いがある
172. 172 グローバルやめたい • プログラミング言語の歴史を紐解くとグローバル変数との戦いがある ◦ 人類はかくしてスコープを手にした
173. 173 グローバルやめたい • プログラミング言語の歴史を紐解くとグローバル変数との戦いがある ◦ 人類はかくしてスコープを手にした • Fluxアーキテクチャのつらさに気づきましたか？
174. 174 グローバルやめたい • プログラミング言語の歴史を紐解くとグローバル変数との戦いがある ◦ 人類はかくしてスコープを手にした • Fluxアーキテクチャのつらさに気づきましたか？ ◦ やりたかったこと ▪ グローバルな状態を扱いたい ▪ グローバル変数制御の無秩序さをやめたい
175. 175 グローバルやめたい • プログラミング言語の歴史を紐解くとグローバル変数との戦いがある ◦ 人類はかくしてスコープを手にした • Fluxアーキテクチャのつらさに気づきましたか？ ◦ やりたかったこと ▪ グローバルな状態を扱いたい ▪ グローバル変数制御の無秩序さをやめたい ◦ グローバルな状態以外で使うのはイマイチ
176. 176 グローバル+イベント+static+並行並列はガチ
177. 177 グローバル+イベント+static+並行並列はガチ • ブレークポイント効かねぇ
178. 178 グローバル+イベント+static+並行並列はガチ • ブレークポイント効かねぇ ◦ マルチスレッドのためタイミング依存のバグが再現できない
179. 179 グローバル+イベント+static+並行並列はガチ • ブレークポイント効かねぇ ◦ マルチスレッドのためタイミング依存のバグが再現できない ◦ 対策はログだが……
180. 180 グローバル+イベント+static+並行並列はガチ • ブレークポイント効かねぇ ◦ マルチスレッドのためタイミング依存のバグが再現できない ◦ 対策はログだが…… ▪ 奇跡のコードなのでログを仕込んだせいでタイミングがズレる
181. ページ遷移はどこでする？
182. 182 遷移の情報はどこに置く？ Page Component Component B Component C Component D Component F Click!
183. export const OrderHistoryPage: React.FC = () => { const navigate = useNavigate(); const orders = [ { id: '1', productName: 'MacBook Pro', status: 'delivered' as const, total: 298000 }, { id: '2', productName: 'iPad Air', status: 'shipped' as const, total: 92800 } ]; const handleViewDetail = (orderId: string) => { navigate(`/orders/${orderId}`); }; const handleRequestInvoice = (orderId: string) => { navigate(`/orders/${orderId}/invoice`); }; return ( <div> <Header /> {/* 固定的な遷移は自己完結 */} <h1>注文履歴</h1> {orders.map(order => ( <OrderItem key={order.id} order={order} onViewDetail={() => handleViewDetail(order.id)} {/* 文脈的な遷移は制御 */} onRequestInvoice={() => handleRequestInvoice(order.id)} /> ))} </div> ); };
184. 184 • 個人的なルール ◦ グローバルナビゲーション ▪ コンポーネントに埋め込む ◦ コンテキスト依存 ▪ ページ相当のコンポーネントで制御する • 結果として ◦ ページ相当のコンポーネントを見れば、どう遷移するかわかる！ 遷移の性質
185. 185 遷移の情報はどこに置く？ Page Component Component B Component C Component D Component F Click! Transition
186. 186 遷移の情報はどこに置く？ Page Component Component B Component C Component D Component F Transition Information Transition Information Transition Click!
187. GUIとオブザーバーパターン
188. 188 MVC • あなたの思う MVC パターンはどっち？
189. 189 Classic MVC • MVX兄弟の元祖 ◦ あんまり最近はこう作らない ◦ この前に遡ると ▪ Document Viewとか
190. 190 MVC2 • WebフレームワークのMVC ◦ MVCをHTTPベースに ◦ Modelの変更 ▪ サーバーから通知できない
191. 191 MVP • あなたの思うMVPパターンはどっち？
192. 192 MVP (Supervising Controller) • オブザーバーパターンを使う ◦ タイミング調整がめんどい ▪ ディレイかけたい…… ◦ 個人的に名前がかっこよくて好き
193. 193 MVP (Passive View) • Viewは受け身でなにもしない ◦ Presenterが仲介する ◦ Humble View とも
194. 194 MVVM • MVP（Passive View）で双方向バインディングするとこれになる
195. 195 • データとViewを分離したい • 複数のViewが同じデータを表示したい GUIとObserverパターンはなかよし
196. Observerパターンで朝令暮改に対応する話
197. 197 よくある朝令暮改 Main Component A Component B Component C Component D Name:nrs Component E
198. 198 よくある朝令暮改 Main Component A Component B Component C Component D Name:nrs Component E Name:nrs ここに表示 することになった Name:nrs ここに表示 することになった
199. 199 よくある朝令暮改 Main Component A Component B Component C Component D Name:nrs Component E Name:nrs Name:nrs Name:nrs
200. 200 これじゃそんなに早くなくて 驚かせられないなー よくある朝令暮改 Main Component A Component B Component C Component D Name:nrs Component E Name:nrs Name:nrs Name:nrs
201. 201 爆速目指そう Main Component A Component B Component C Component D Name:nrs Component E
202. 202 • IObservavle<T>を保持 爆速目指そう Main Component A Component B Component C Component D Name:nrs Component E Component C Component E
203. 203 • もし新たに必要になったら 爆速目指そう Main Component A Component B Component C Component D Name:nrs Component E Component C Component E Name:nrs ここに表示 することになった
204. 204 爆速目指そう Main Component A Component B Component C Component D Name:nrs Component E Component C Component E IOｂservavle<T> を実装継承
205. 205 データを必要なオブジェクトが 表明するだけで使える！ 爆速目指そう Main Component A Component B Component C Component D Name:nrs Component E Component C Component E Component A
206. 206 ディレクター「おはよう」 ぼく「おはようございます、ここんところどうしましょう？」 朝令暮改
207. 207 ディレクター「□□にしてくれる？」 ぼく「御意」 朝令暮改
208. 208 朝令暮改 １時間後
209. 209 ぼく「できました」 ディレクター「もう！？」 朝令暮改
210. まとめ
211. 211 朝令暮改を 朝礼朝改で返して 怖がらせ ましょう！
212. 212 エンジニアリングの醍醐味を知った • 相手の予想を超える楽しさ ◦ 相手の驚いた顔を見たくてやってる • 人の心を知る ◦ 水の低きに就くが如し
213. 213 まとめ • GUIのノウハウを活用すれば ◦ 実装に困った時に基本に立ち返られる ◦ ライブラリが滅んでも ▪ ARV がなくても秩序をもたらすことができる ▪ jQuery でも確実なコードを書ける ▪ JavaScriptだけしか使えない状況も乗り越えられるぞ
214. 214 仲間を探しています 子どもを取り巻く環境をテクノロジーの力でよりよいものにしていく仲間を大募集！ • 子育てしやすい環境です ◦ 子育てにドメイン知識がありすぎるメンバー ◦ フレックス／フルリモート可 • 開発者体験が最高です ◦ アジャイル（XP） ◦ バーチャルオフィス（Gather） ◦ コンフォートゾーンを抜け出せるような環境 ◦ CTOが財布 #CTOは財布