How to make front-end / How to make front-end

How to make front-end Masanobu Naruse

シンプルさを支える基本の考えはベクトル 4

Agenda 1. GUIアーキテクチャパターン 2. データ同期 3. エラーハンドリング 4. コンポーネント構造 5.
まとめ 5

まとめ 6

MVC MVP MVVM 7

Complex 9

Simple 11

In software 14

Classic MVC 15

Model View Controller Classic MVC 16

Model View Controller Classic MVC GUI Pattern 22

Model View Controller Classic MVC Observer 24

MVC Framework ? 27

Model View Controller MVC2 28

MVP 29

MVP Humble View Supervising Controller 30

Model View MVP (Humble View) Presenter 32

Model View MVP (Super Vising Controller) Presenter 40

Presenter Model View MVP (Super Vising Controller) 46

Model View MVP (Super Vising Controller) Observer Presenter 47

Model View MVP (Super Vising Controller) Presenter Observer 48

MVC は MVP になった 50

MVVM 51

Model View MVVM ViewModel 52

Model View MVVM ViewModel 53

Model View MVVM Binding ViewModel 54

MVC MVP MVVM 58

MVC MVP MVVM 59

重要なのは Model と View を分けること糊付け方法が C, P, VM MVC
MVP MVVM 60

というわけで独自アーキテクチャ 61

MVX 62

MVX Model View Xxx 63

MVX Model View Xxx を提唱してたら 64

MVW 65

MVW Model View Whatever 66

Flux ? 67

Classic MVC は MVP となりその実装案のひとつとして Flux 70

重要なのはデータフロー 71

重要なのはデータフロー 72

まとめ 73

Id: 1 Name: naruse Twitter: @nrslib 75

Id: 1 Name: naruse Twitter: @nrslib Id: 1 Name: naruse
Twitter: @nrslib 76

Twitter: @nrslib 77

Twitter: @nrslib Modal 78

Twitter: @nrslib Modal Name: nrs 79

Id: 1 Name: naruse Twitter: @nrslib Id: 1 Name: nrs

Twitter: @nrslib 81

Twitter: @nrslib Update Name: nrs 82

Id: 1 Name: nrs Twitter: @nrslib Id: 1 Name: nrs
Twitter: @nrslib 83

Twitter: @nrslib 84

Twitter: @nrslib どこが悪いかもう一度 85

Twitter: @nrslib 88

Twitter: @nrslib 89

Twitter: @nrslib 90

Twitter: @nrslib 94

Twitter: @nrslib 95

Twitter: @nrslib 一時的なデータ不整合 96

Twitter: @nrslib 一時的なデータ不整合たとえるなら 97

どうすればよいか 99

Twitter: @nrslib 102

Twitter: @nrslib Modal Name: nrs Update Name: nrs 106

Id: 1 Name: nrs Twitter: @nrslib Id: 1 Name: naruse

Id: 1 Name: nrs Twitter: @nrslib Id: 1 Name: naruse
Twitter: @nrslib Modal Name: nrs Id: 1 Name: nrs Twitter: @nrslib 108

Modal 110

フォーム？ 113

Twitter: @nrslib Id: 1 Name: nrs Twitter: @nrslib 121

Twitter: @nrslib Id: 1 Name: nrs Twitter: @nrslib あくまでサーバのデータでフロントを更新する 122

Id: 1 Name: naruse Twitter: @nrs Id: 1 Name: nrs
Twitter: @nrslib Update Name: nrs Id: 1 Name: naruse Twitter: @nrs 125

Twitter: @nrslib Id: 1 Name: naruse Twitter: @nrs Id: 1 Name: nrs Twitter: @nrs 126

Twitter: @nrs Id: 1 Name: naruse Twitter: @nrs Id: 1 Name: nrs Twitter: @nrs 127

Twitter: @nrs Id: 1 Name: naruse Twitter: @nrs Id: 1 Name: nrs Twitter: @nrs 信頼たるデータを信頼しよう 128

まとめ 129

エラー 130

好きですか？エラー 131

エラーハンドリング 132

好きですか？エラーハンドリング 133

エラーハンドリングはソフトウェアの使い勝手を決定づける重要な要素 134

その上でもう一度 135

好きですか？エラーハンドリング 136

僕はあんまり好きじゃないです 137

本質的じゃないから 138

どうすれば？ 139

エラーを整理してみよう 140

ユーザが回復できるエラーシステムエラー 141

ユーザが回復できるエラーシステムエラー拾うべきは？ 142

ユーザが回復できるエラーシステムエラー 143

更にエラーを分ける 144

クライアントエラーサーバーエラー 145

クライアントのシステムエラークライアントの回復可能エラーサーバーのシステムエラーサーバーの回復可能エラーサー
バクライアントシステムエラー回復可能エラー 146

nrs@@example.com メールアドレス 149

nrs@@example.com メールアドレスメールアドレスの形式ではありません 150

******** パスワード ******** パスワードの確認 151

******** パスワード ******** パスワードの確認パスワードが一致しません 152

画面ごとに異なるハンドリングのためそれぞれの画面でハンドリング 154

画面ごとに異なるハンドリングのためそれぞれの画面でハンドリングディレクティブなどで共通化 155

naruse ユーザ名 [email protected] メールアドレス ******** パスワード ******** パスワードの確認 157

naruse ユーザ名 [email protected] メールアドレス ******** パスワード ******** パスワードの確認すでに登録されていますすでに登録されています
158

Mail: [email protected] Name: naruse Password: ******** 160

Mail: [email protected] Name: naruse Password: ******** duplicated-email, duplicated-username 161

Mail: [email protected] Name: naruse Password: ******** duplicated-email, duplicated-username duplicated-email だからメール欄に
エラー表示して 162

Mail: [email protected] Name: naruse Password: ******** duplicated-email, duplicated-username duplicated-email だからメール欄に
エラー表示して duplicated-username だからユーザ名欄にエラー表示して 163

duplicated-email だからメール欄にエラー表示して duplicated-username だからユーザ名欄にエラー表示して 164

duplicated-email だからメール欄にエラー表示して duplicated-username だからユーザ名欄にエラー表示して画面ごとにハンドリング？ 165

登録済みのメールアドレスですこのユーザ名はすでに取得されています naruse ユーザ名 [email protected] メールアドレス ******** パスワード ******** パスワードの確認
168

登録済みのメールアドレスですこのユーザ名はすでに取得されています naruse ユーザ名 [email protected] メールアドレス ******** パスワード ******** パスワードの確認
これなら？ 169

duplicated-email だからメール欄にエラー表示して 171

duplicated-email だからメール欄にエラー表示して duplicated-username だからユーザ名欄にエラー表示して 172

そのほかにも duplicated-email だからメール欄にエラー表示して duplicated-username だからユーザ名欄にエラー表示して 173

そのほかにも duplicated-email だからメール欄にエラー表示して duplicated-username だからユーザ名欄にエラー表示してアレやコレや 174

エラーコードに従ってエラーメッセージを表示そのほかにも duplicated-email だからメール欄にエラー表示して duplicated-username だからユーザ名欄にエラー表示してアレやコレや
175

どう実現する？ 176

通信ライブラリをラップする 177

export default class Apios { public static post<T>(url: string, data?:
any, params?: { onError?: IErrorNotifier; unexpectedErrorHandler?: Handler<T>; config?: AxiosRequestConfig; } ): Promise<ApiosResponse<T>> { const onError = this._selectErrorNote(params.onError); ... return new Promise<ApiosResponse<T>>((resolve, reject) => { Axios.post(url, data, { headers: { token: token } }) .then((res) => { const response = this._convertErrorMessage(res.data); if (this.isIResponse(response)) { if (response.errors.length > 0) { onError(response); } } const apiosResponse = new ApiosResponse(false, response); resolve(apiosResponse); }) .catch((e: AxiosError) => { unexpectedErrorHandler<T>(resolve, reject, e, onError); }); }); 178

const notifyErrorToMessageService: IErrorNotifier = (response: IResponse) => { response.errors .map(x
=> x.message) .forEach(message => messageService.addMessage(MessageType.Error, message) ); }; 182

const notifyErrorToMessageService: IErrorNotifier = (response: IResponse) => { response.errors .map(x
=> x.message) .forEach(message => messageService.addMessage(MessageType.Error, message) ); }; 183

<template> <div v-if="hasAnyMessage"> {{head}} <template v-for="tailMessage in tail"> <br> {{tailMessage}}
</template> </div> </template> ... @Component export default class NotifyMessage extends Vue { ... public get hasAnyMessage(): boolean { return this.messageService.hasAnyMessage; } public get head(): string { return this.messageService.headMessage; } public get tail(): string[] { return this.messageService.tailMessages; } } 184

<template> <div v-if="hasAnyMessage"> {{head}} <template v-for="tailMessage in tail"> <br> {{tailMessage}}
</template> </div> </template> ... @Component export default class NotifyMessage extends Vue { ... public get hasAnyMessage(): boolean { return this.messageService.hasAnyMessage; } public get head(): string { return this.messageService.headMessage; } public get tail(): string[] { return this.messageService.tailMessages; } } 185

細かく制御したいときもある 186

入力画面の難易度が高いエラー発生個所がわかりづらいたとえば 187

any, params?: { onError?: IErrorNotifier; unexpectedErrorHandler?: Handler<T>; config?: AxiosRequestConfig; } ): Promise<ApiosResponse<T>> { const onError = this._selectErrorNote(params.onError); ... return new Promise<ApiosResponse<T>>((resolve, reject) => { Axios.post(url, data, { headers: { token: token } }) .then((res) => { const response = this._convertErrorMessage(res.data); if (this.isIResponse(response)) { if (response.errors.length > 0) { onError(response); } } const apiosResponse = new ApiosResponse(false, response); resolve(apiosResponse); }) .catch((e: AxiosError) => { unexpectedErrorHandler<T>(resolve, reject, e, onError); }); }); 呼び出し側がエラーハンドラを設定できるように受け口を用意 190

Callback を渡すようになるので必然的に Promise を使わなくなる 191

Callback を渡すようになるので必然的に Promise を使わなくなる 192

Promise 地獄 193

Promise を使えるようにするより場合分けをしっかりしたほうがいい 194

できごとハンドリング成功失敗例外セッション切れ権限変更（パーミッション変更） 195

できごとハンドリング成功 Callback 失敗例外セッション切れ権限変更（パーミッション変更） 196

できごとハンドリング成功 Callback 失敗しない or Callback 例外セッション切れ
権限変更（パーミッション変更） 197

できごとハンドリング成功 Callback 失敗しない or Callback 例外しない
or Callback セッション切れ権限変更（パーミッション変更） 198

or Callback セッション切れログイン画面へ権限変更（パーミッション変更） 199

or Callback セッション切れログイン画面へ権限変更（パーミッション変更）しない（権限エラー通知） 200

or Callback セッション切れログイン画面へ権限変更（パーミッション変更）しない（権限エラー通知） 201

public static post<T>(url: string, data?: any, onSuccess: T => void,
params?: { onError?: IErrorNotifier; unexpectedErrorHandler?: Handler<T>; config?: AxiosRequestConfig; } ) できごとハンドリング成功 Callback 失敗しない or Callback 例外しない or Callback セッション切れログイン画面へ権限変更（パーミッション変更）しない（権限エラー通知） 202

public static post<T>(url: string, data?: any, onSuccess: T => void,
params?: { onError?: IErrorNotifier; unexpectedErrorHandler?: Handler<T>; config?: AxiosRequestConfig; } ) できごとハンドリング成功 Callback 失敗しない or Callback 例外しない or Callback セッション切れログイン画面へ権限変更（パーミッション変更）しない（権限エラー通知） 203

基本は何もしなくてよくて必要なときに差し込めるというのが大事 204

まとめ 205

コンポーネント構造のテーマ 1. コンポーネント構造 2. ページ遷移や通信を行う箇所 3. Flux 系のライブラリの使いどころ 4. データの保持は誰の役目？
206

207

まずはいわゆるオブジェクト指向プログラミング 208

シンプルなオブジェクト同士の構造は？ 209

ObjectA ObjectB 210

ObjectA ObjectB 211

ObjectA ObjectB Method Call 212

ObjectA ObjectB Method Call Method Call 213

ObjectA ObjectB Method Call Method Call 214

class ObjectA { private objectB = new ObjectB(this); public method()
{ this.objectB.methodForA(); } public methodForB() { ... } } class ObjectB { public constructor( private readonly objectA: ObjectA) { } public method() { this.objectA.methodForB(); } public methodForA() { ... this.objectA.methodForB(); } 215

{ this.objectB.methodForA(); } public methodForB() { ... } } class ObjectB { public constructor( private readonly objectA: ObjectA) { } public method() { this.objectA.methodForB(); } public methodForA() { ... this.objectA.methodForB(); } 相互参照 218

{ this.objectB.methodForA(); } public methodForB() { ... } } class ObjectB { public constructor( private readonly objectA: ObjectA) { } public method() { this.objectA.methodForB(); } public methodForA() { ... this.objectA.methodForB(); } 相互参照コンストラクタに this を渡してると大抵ヤバイ 219

ObjectA ObjectB 225

{ this.objectB.methodForA(); } public methodForB() { ... } public methodForB2() { ... this.objectB.methodForA2(); } public methodForB3() { this.objectB.methodForA3(); ... this.objectB.methodForA4(); } public methodForB4() { ... class ObjectB { public constructor( private readonly objectA: ObjectA) { } public method() { this.objectA.methodForB(); } public methodForA() { this.objectA.methodForB(); ... this.objectA.methodForB2(); } public methodForA2() { ... this.objectA.methodForB3(); } public methodForA3() { ... } public methodForA4() { 226

{ this.objectB.methodForA(); } public methodForB() { ... } public methodForB2() { ... this.objectB.methodForA2(); } public methodForB3() { this.objectB.methodForA3(); ... this.objectB.methodForA4(); } public methodForB4() { ... class ObjectB { public constructor( private readonly objectA: ObjectA) { } public method() { this.objectA.methodForB(); } public methodForA() { this.objectA.methodForB(); ... this.objectA.methodForB2(); } public methodForA2() { ... this.objectA.methodForB3(); } public methodForA3() { ... } public methodForA4() { 動作順序把握できました？ 246

ObjectA ObjectB methodForA methodForB methodForB2 methodForA2 methodForB3 methodForA3 methodForA4 247

ObjectA ObjectB methodForA methodForB methodForB2 methodForA2 methodForB3 methodForA3 methodForA4 把握できました？
248

どうするか？ 249

ObjectA ObjectB 250

ObjectA ObjectB Parent ObjectA ObjectB 251

class Parent { private readonly objectA = new ObjectA(); private
readonly objectB = new ObjectB(); public method() { this.objectB.methodForA(); this.objectA.methodForB(); this.objectA.methodForB2(); this.objectB.methodForA2(); this.objectA.methodForB3(); this.objectB.methodForA3(); this.objectB.methodForA4(); } } 252

readonly objectB = new ObjectB(); public method() { this.objectB.methodForA(); this.objectA.methodForB(); this.objectA.methodForB2(); this.objectB.methodForA2(); this.objectA.methodForB3(); this.objectB.methodForA3(); this.objectB.methodForA4(); } } class ObjectA { public methodForB() { ... } public methodForB2() { ... } public methodForB3() { ... } public methodForB4() { ... } } class ObjectB { public methodForA() { ... } public methodForA2() { ... } public methodForA3() { ... } public methodForA4() { ... } } 253

readonly objectB = new ObjectB(); public method() { this.objectB.methodForA(); this.objectA.methodForB(); this.objectA.methodForB2(); this.objectB.methodForA2(); this.objectA.methodForB3(); this.objectB.methodForA3(); this.objectB.methodForA4(); } } class ObjectA { public methodForB() { ... } public methodForB2() { ... } public methodForB3() { ... } public methodForB4() { ... } } class ObjectB { public methodForA() { ... } public methodForA2() { ... } public methodForA3() { ... } public methodForA4() { ... } } オブジェクトはシンプルに 254

readonly objectB = new ObjectB(); public method() { this.objectB.methodForA(); this.objectA.methodForB(); this.objectA.methodForB2(); this.objectB.methodForA2(); this.objectA.methodForB3(); this.objectB.methodForA3(); this.objectB.methodForA4(); } } 255

readonly objectB = new ObjectB(); public method() { this.objectB.methodForA(); this.objectA.methodForB(); this.objectA.methodForB2(); this.objectB.methodForA2(); this.objectA.methodForB3(); this.objectB.methodForA3(); this.objectB.methodForA4(); } } コードを見れば一目瞭然 256

コンポーネントも同じ 257

TabButton TabButton TabButton TabButton 258

TabButton TabButton TabButton TabButton Click 259

TabButton TabButton TabButton TabButton Click Select 260

TabButton TabButton TabButton TabButton Click Select 261

TabButton TabButton TabButton TabButton Click unselect() Select 262

TabButton TabButton TabButton TabButton TabButtonGroup 265

TabButton TabButton TabButton TabButton TabButtonGroup Click 266

TabButton TabButton TabButton TabButton TabButtonGroup Click Clicked 267

TabButton TabButton TabButton TabButton TabButtonGroup Un Select Un Select Un
Select Un Select 268

TabButton TabButton TabButton TabButton TabButtonGroup Un Select Un Select Un
Select Un Select 269

TabButton TabButton TabButton TabButton TabButtonGroup Select 270

TabButton TabButton TabButton TabButton TabButtonGroup Select 271

TabButton TabButton TabButton TabButton TabContent Click 272

TabButton TabButton TabButton TabButton TabContent Clicked TabButtonGroup 273

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Clicked Clicked (B) Tab
274

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Tab Un Select 275

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Tab Un Select Un
Select Un Select Un Select Un Select 276

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Tab Un Select Un
Select Un Select Un Select Un Select 277

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Tab Select (B) 278

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Tab Select (B) Select
279

280

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Tab Change Content 281

TabButton TabContent TabButtonGroup Tab 282

TabButton TabContent TabButtonGroup Tab 283

TabButton TabContent TabButtonGroup Tab メソッド 284

TabButton TabContent TabButtonGroup Tab メソッド 285

TabButton TabContent TabButtonGroup Tab メソッドイベント 286

TabButton TabContent TabButtonGroup Tab メソッドイベントコンポーネントの基本構造 287

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Clicked Tab Clicked (B)
288

TabButton TabButton TabButton TabButton TabContent TabButtonGroup Clicked Tab イベント Clicked
(B) 289

290

メソッド 291

メソッド Vue などではこれをバインディングで実現する 292

たとえば 293

<template> <button @click="onClick"> <slot /> {{selected}} </button> </template> <script lang="ts">
import {Component, Emit, Prop, Vue} from "vue-property-decorator"; @Component export default class TabButton extends Vue { @Prop() public selected!: boolean; @Emit('click') public onClick() { } } </script> 294

<template> <ul> <TabButton v-for="param in parameters" :key="param.id" :selected="isSelected(param.id)" @click="onTabButtonClick(param.id)"> {{param.title}}
</TabButton> </ul> </template> <script lang="ts"> ... export default class TabButtonGroup extends Vue { @Prop() public selectedTabId!: string; @Prop() public parameters!: ITabButtonParameter[]; @Emit('tabButtonClick') public onTabButtonClick(id: string) { } public isSelected(id: string) { return id === this.selectedTabId; } } 297

<template> <div> <TabButtonGroup :selectedTabId="selectedTabId" :parameters="tabContents" @tabButtonClick="onTabGroupTabButtonClick" /> <slot :selectedTabId="selectedTabId" />
</div> </template> <script lang="ts"> ... export default class Tab extends Vue { public tabContents: TabContent[] = []; public selectedTab: TabContent | null = null; @Prop() public selectedTabId!: string; public mounted() { const tabContents = this.$slots.default .filter(x => x.componentInstance) .map(x => x.componentInstance) .map(x => x as TabContent); this.tabContents = tabContents; this.onTabGroupTabButtonClick(this.tabContents[0].id); } @Emit('tabButtonClick') public onTabGroupTabButtonClick(id: string) { } 300

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <Tab :selectedTabId="selectedTabId" @tabButtonClick="onTabButtonClick">
<TabContent title="first" :active="isActive('first')"> ContentsFirst </TabContent> <TabContent title="second" :active="isActive('second')"> ContentsSecond </TabContent> ... </Tab> </div> </template> <script lang="ts"> ... export default class Home extends Vue { public selectedTabId: string = "first"; public onTabButtonClick(id: string) { this.selectedTabId = id; } public isActive(id: string) { return id === this.selectedTabId; } } </script> 303

<TabContent title="first" :active="isActive('first')"> ContentsFirst </TabContent> <TabContent title="second" :active="isActive('second')"> ContentsSecond </TabContent> ... </Tab> </div> </template> <script lang="ts"> ... export default class Home extends Vue { public selectedTabId: string = "first"; public onTabButtonClick(id: string) { this.selectedTabId = id; } public isActive(id: string) { return id === this.selectedTabId; } } </script> 子コンポーネント同士の取り回しはあくまでもそれを保持する親コンポーネントが責任をもっておこなう 309

<TabContent title="first" :active="isActive('first')"> ContentsFirst </TabContent> <TabContent title="second" :active="isActive('second')"> ContentsSecond </TabContent> ... </Tab> </div> </template> <script lang="ts"> ... export default class Home extends Vue { public selectedTabId: string = "first"; public onTabButtonClick(id: string) { this.selectedTabId = id; } public isActive(id: string) { return id === this.selectedTabId; } } </script> 子コンポーネント同士が勝手に反応しないようにすること 310

311

ページ遷移 312

PageA PageB ComponentA Button 313

PageA PageB ComponentA Button Click 314

PageA PageB ComponentA Button ページ遷移はページコンポーネントを見れば分かるようにすること 322

PageA PageB Link Component これはページを見れば分かる（ページに遷移先情報がある）ので OK Parameter Link
to PageB 323

通信 324

Page Component Data 325

Page Component Http Data 326

Page Component Http Http Data 327

Page Component Http Http コンポーネントの使いまわしがない限り通信も基本はページ（データもページが保持してバインディング） Data 328

329

Flux は複数のコンポーネントを制御する目的で使うのは控える 330

コンポーネントの基本構造に従うことを優先する 331

コンポーネント構造のテーマ 1. コンポーネント構造 2. ページ遷移や通信を行う箇所 3. Flux 系のライブラリの使いどころ 4. データはどうやって変更する？
332

Component Component Data Component 333

Component Component Data Component Action 334

Component Component Data Component Action Event 335

Component Component Data Component Action Event Event 336

Component Component Data Component Action Event Event 337

Component Component Data Component Action Event Event データを変更するのはデータを保持するコンポーネント 338

モデルバインディングは？ 339

<input v-model="message"> <p>Message is: {{ message }}</p> 340

<input v-model="message"> <p>Message is: {{ message }}</p> Component Input message
341

342

実はこうではない 343

344

Event 345

Event 346

Event モデルバインディングはシンタックスシュガー 347

まとめ 348

シンプルなコードを達成するためのセオリー 349

ベクトルを意識 351

ベクトルを意識データの流れ実装の流れ処理の流れを一定にする 352

GUI プログラミングで目指すべきゴール 353

Humble View 354

慎ましい View を目指すこと 355

テストする必要もないほど慎ましい View を目指すこと 356

Auther Masanobu Naruse HomePage https://nrslib.com Twitter @nrslib

How to make front-end / How to make front-end

How to make front-end / How to make front-end

More Decks by nrs

Other Decks in Programming

Featured

Transcript