Vue.js * How to make front-end / vuejs how to make front-end

Vue.js * How to make front-end
Masanobu Naruse

View Slide

Sample
https://github.com/nrslib/vue-sample-assortment
2

View Slide

諸注意
3
CSRF 対策とかやってなかったり
取り回しが甘かったりしてます
express, vuetify はじめて触りました
Vue.js ですけど ts です

View Slide

Agenda
1. つつましいエラーハンドリング
2. 認証認可の戦略
3. 全体的なコンポーネント構造
4

View Slide

Agenda
5

View Slide

エラー
6

View Slide

好きですか？
エラー
7

View Slide

エラーハンドリング
8

View Slide

好きですか？
9

View Slide

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

View Slide

その上でもう一度
11

View Slide

好きですか？
12

View Slide

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

View Slide

本質的じゃないから
14

View Slide

どうすれば？
15

View Slide

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

View Slide

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

View Slide

拾うべきは？
18

View Slide

19

View Slide

更にエラーを分ける
20

View Slide

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

View Slide

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

View Slide

サーバーの
サーバーの
サ
ー
バ
ク
ラ
イ
ア
ン
ト
23

View Slide

サーバーの
サーバーの
サ
ー
バ
ク
ラ
イ
ア
ン
ト
24

View Slide

[email protected]@example.com
メールアドレス
25

View Slide

[email protected]@example.com
メールアドレスの形式
ではありません
26

View Slide

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

View Slide

********
パスワード
********
パスワードが
一致しません
28

View Slide

29

View Slide

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

View Slide

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

View Slide

サーバーの
サーバーの
サ
ー
バ
ク
ラ
イ
ア
ン
ト
32

View Slide

naruse
ユーザ名
[email protected]
********
パスワード
********
33

View Slide

naruse
ユーザ名
[email protected]
********
パスワード
********
すでに登録されています
すでに登録されています
34

View Slide

35

View Slide

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

View Slide

Name: naruse
Password: ********
duplicated-email,
duplicated-username
37

View Slide

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

View Slide

Name: naruse
Password: ********
duplicated-email,
duplicated-username
duplicated-email
duplicated-username
だからユーザ名欄に
39

View Slide

duplicated-email
duplicated-username
40

View Slide

duplicated-email
duplicated-username
画面ごとに
ハンドリング？
41

View Slide

42

View Slide

43

View Slide

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

View Slide

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

View Slide

どう実現する？
46

View Slide

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

View Slide

48
export default class WraxiosCore {
...
public get(url: string, params?: IOptionParameter): Promise> {
return this.request('get', url, null, params);
}
public post(url: string, data?: any, params?: IOptionParameter): Promise> {
return this.request('post', url, data, params);
}
}

View Slide

49
...
}
}
}

View Slide

50
...
}
}
}
request メソッドへ

View Slide

...
public request(method: Method, url: string, data?: any, aParams?: IOptionParameter): Pr
const params = aParams === null || aParams === void 0 ? {} : aParams!;
const requestConfig: AxiosRequestConfig = !params || !params.config ? {} : params.config;
requestConfig.method = method;
requestConfig.url = url;
requestConfig.data = data;
const calledQueueNum = this.queueNum;
return new Promise>((resolve, reject) => {
axios.request(requestConfig)
.then(res => {
if (calledQueueNum !== this.queueNum) {
return;
}
const response = new WraxiosResponse(res.data);
resolve(response);
})
.catch((e: AxiosError) => {
if (calledQueueNum !== this.queueNum) { 51
request 本体

View Slide

...
.then(res => {
return;
}
resolve(response);
})
axios (通信ライブラリ）をラップ

View Slide

...
.then(res => {
return;
}
resolve(response);
})
axios の取り回しを
確認してみよう

View Slide

.then(res => {
...
})
...
if (response.status === 400) {
const clientErrorResponse = this.makeResponse(response.data);
const errorHandler = this.selectErrorHandler(params.onError);
errorHandler(clientErrorResponse);
if (!!params.onErrored) {
params.onErrored();
}
} else {
const unExpectedErrorHandler = this.selectUnexpectedErrorHandler(params.onUnexpectedE
unExpectedErrorHandler(resolve, reject, e);
}
});
54

View Slide

.then(res => {
...
})
...
params.onErrored();
}
} else {
}
});
55
エラーハンドラー選定

View Slide

56
...
private selectErrorHandler(handler?: IErrorHandler): IErrorHandler {
if (handler === null || handler === void 0) {
return notifyErrorToMessage;
}
return handler;
}
}
const notifyErrorToMessage: IErrorHandler = (response: IErrorResponse) => {
response.errors
.map((x) => x.message)
.forEach((message) => ServiceLocator.instance.messageService
.addMessage(MessageType.Error, message));
};

View Slide

57
...
}
return handler;
}
}
response.errors
};
デフォルト実装

View Slide

58
...
}
return handler;
}
}
response.errors
};
デフォルト＝メッセージシステムに通知

View Slide

59
...
}
return handler;
}
}
response.errors
};
デフォルト＝メッセージシステムに通知
具体的なメッセージは？

View Slide

.then(res => {
...
})
...
params.onErrored();
}
} else {
}
});
60
さきほどのコード

View Slide

.then(res => {
...
})
...
params.onErrored();
}
} else {
}
});
61
レスポンスからエラー用メッセージの生成

View Slide

62
...
private makeResponse(data: any): IErrorResponse {
const response = data as IErrorResponse;
if (!!response && !!response.errors) {
for (const error of response.errors) {
const errorMessageKey = 'error.api.' + error.code;
const errorMessage = i18n.t(errorMessageKey).toString();
if (!errorMessage || errorMessage === errorMessageKey) {
error.message = i18n.t(
'common.wraxios.unregistered-error-message’,
{ errorCode : "code:¥"" + error.code + "¥""}
).toString();
} else {
error.message = errorMessage;
}
}
}
return data;
}
}
エラーメッセージ生成処理

View Slide

63
...
).toString();
} else {
}
}
}
return data;
}
}
エラーコードからキーを生成

View Slide

64
...
).toString();
} else {
}
}
}
return data;
}
}
メッセージのデータファイルから読み取り

View Slide

65
...
).toString();
} else {
}
}
}
return data;
}
}
メッセージのデータファイルから読み取り
{
"ja" : {
"common" : {
"routing" : {
"no-authority" : "権限が足りません"
},
"wraxios" : {
"unregistered-error-message" : "予期せぬエラー（{errorCode}）",
"role-changed" : "権限が不足しています"
}
},
"error" : {
"api" : {
"/user" : {
"POST" : {
"too-long-name" : "ユーザー名が長すぎます"
}
}
}
}
}
}

View Slide

66
...
).toString();
} else {
}
}
}
return data;
}
}
エラーメッセージが見つからない時は
デフォルトメッセージ

View Slide

これで基本的に
何もしなくてOK
67

View Slide

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

View Slide

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

View Slide

70
...
}
}
}

View Slide

71
...
}
}
}

View Slide

72
export interface IOptionParameter {
onError?: IErrorHandler;
onErrored?: () => void;
onUnexpectedError?: UnexpectedErrorHandler;
config?: AxiosRequestConfig;
}
...
}
}
}

View Slide

73
}
...
}
}
}
エラーハンドラー登録用

View Slide

74
export default class UserAddConfirmPage extends Vue {
...
public onSubmitButtonClick() {
wraxios.post(
'user',
this.model,
{ onError: (res) => { pushNextWithError(res, this.backLocation()); }})
.then(res=> {
const data = res.data;
this.$router.push({name: "user-detail", params: { id: data.createdUuid }})
});
}
private backLocation(): RawLocation {
return {name: 'user-add-input', params: this.model};
}
}

View Slide

75
export default class UserAddConfirmPage extends Vue {
...
public onSubmitButtonClick() {
wraxios.post(
'user',
this.model,
{ onError: (res) => { pushNextWithError(res, this.backLocation()); }})
.then(res=> {
const data = res.data;
this.$router.push({name: "user-detail", params: { id: data.createdUuid }})
});
}
private backLocation(): RawLocation {
return {name: 'user-add-input', params: this.model};
}
}
ページ遷移してエラー通知する

View Slide

76

View Slide

77

View Slide

エラーハンドリングで重要なのは
場合分け
78

View Slide

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

View Slide

成功する
失敗
例外
権限変更

View Slide

成功する
失敗する or しない
例外
権限変更

View Slide

成功する
例外する or しない
権限変更

View Slide

成功する
セッション切れログイン画面へ
権限変更

View Slide

成功する
権限変更
（パーミッション変更）
しない（権限エラー通知）
84

View Slide

成功する
権限変更
85

View Slide

86
成功する
権限変更
}

View Slide

87
成功する
権限変更
}

View Slide

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

View Slide

Agenda
89

View Slide

こんなシステムは嫌だ
90

View Slide

認証してないのにログインできちゃった
91

View Slide

権限がないはずなのに操作できちゃった
92

View Slide

認証認可を担保するには？
93

View Slide

強力な仕組みが必要
94

View Slide

人力を排除せよ
95

View Slide

認証認可の戦略
1. 認証と認証切れ
2. ルートの認可
3. リソースの認可
96

View Slide

97

View Slide

98
認証が必要でないページ

View Slide

99
import LoginRootPage from "@/views/login/LoginRootPage.vue";
export default {
path: '/login',
name: 'login',
component: LoginRootPage,
meta: { noAuth: true }
};

View Slide

100
import LoginRootPage from "@/views/login/LoginRootPage.vue";
export default {
path: '/login',
name: 'login',
component: LoginRootPage,
meta: { noAuth: true }
};
ページに認証不要を設定
（未設定＝認証必要）

View Slide

101
認証確認をしているのは

View Slide

102
export default async function globalBeforeEach(to: Route, from: Route, next: Function) {
if (await transferLoginWhenNoAuth(to, from, next)) {
return;
}
if (await transferWhenNoRole(to, from, next)) {
return;
}
next();
}
ルート変更時のグローバルフック

View Slide

103
return;
}
return;
}
next();
}

View Slide

104
async function transferLoginWhenNoAuth(to: Route, from: Route, next: Function)
: Promise {
if (isAuthorised(to)) {
if (!accountStoreFacade.hasInfo()) {
await accountStoreFacade.loadAccountInfo();
if (!ServiceLocator.instance.routeService.endure) {
ServiceLocator.instance.routeService.releaseOverwrite();
ServiceLocator.instance.routeService.saveBackRoute(to);
}
next({name: 'login'});
return true;
}
}
}
return false;
}

View Slide

105
: Promise {
}
return true;
}
}
}
return false;
}
遷移先は認証が必要か

View Slide

106
: Promise {
}
return true;
}
}
}
return false;
}
認証の確認

View Slide

107
: Promise {
}
return true;
}
}
}
return false;
}
認証していなかったらセッション確認

View Slide

108
: Promise {
}
return true;
}
}
}
return false;
}
未認証ならログイン画面へ

View Slide

109

View Slide

110
未認証

View Slide

111
未認証
認証

View Slide

112
: Promise {
}
return true;
}
}
}
return false;
}

View Slide

113
: Promise {
}
return true;
}
}
}
return false;
}
遷移先を保存

View Slide

114
export default class LoginRootPage extends Vue {
@Action("account/loadAccountInfo") public loadAccountInfo!: () => Promise;
public async onLoggedIn() {
await this.loadAccountInfo();
const routeService = ServiceLocator.instance.routeService;
if (routeService.hasBackRoute) {
const nextRoute = routeService.pathToBack();
routeService.clear();
this.$router.push(nextRoute);
} else {
this.$router.push({name: 'top'});
}
}
}
ログイン画面

View Slide

115
export default class LoginRootPage extends Vue {
@Action("account/loadAccountInfo") public loadAccountInfo!: () => Promise;
public async onLoggedIn() {
await this.loadAccountInfo();
const routeService = ServiceLocator.instance.routeService;
if (routeService.hasBackRoute) {
const nextRoute = routeService.pathToBack();
routeService.clear();
this.$router.push(nextRoute);
} else {
this.$router.push({name: 'top'});
}
}
}
ログイン後、保存された遷移先へ

View Slide

116

View Slide

基本的にすべてのルートは
最高権限を必要とする
117

View Slide

118
export default {
path: '/user',
component: UserRootPage,
children: [
{
path: '',
name: 'user-index',
component: UserIndexPage,
meta: {role: AccountRole.Advanced},
},
{
path: ':id',
name: 'user-detail',
component: UserDetailPage,
},
{
path: 'add/input',
name: 'user-add-input',
component: UserAddInputPage,
},
...
]
}
User 関連

View Slide

119
export default {
path: '/user',
children: [
{
path: '',
name: 'user-index',
},
{
path: ':id',
},
{
path: 'add/input',
},
...
]
}
最高権限が必要

View Slide

120
export default {
path: '/user',
children: [
{
path: '',
name: 'user-index',
},
{
path: ':id',
},
{
path: 'add/input',
},
...
]
}
Advanced 権限

View Slide

121
export default {
path: '/',
component: TopRootPage,
meta: {role: 'any'},
children: [
{
path: '',
name: 'top',
component: TopIndexPage
}
]
};
Top ページ

View Slide

122
export default {
path: '/',
component: TopRootPage,
meta: {role: 'any'},
children: [
{
path: '',
name: 'top',
component: TopIndexPage
}
]
};
権限不要

View Slide

実際の処理
123

View Slide

124
return;
}
return;
}
next();
}
ルート変更時のグローバルフック

View Slide

125
return;
}
return;
}
next();
}
認証後に認可の確認がある

View Slide

126
async function transferWhenNoRole(to: Route, from:Route, next: Function): Promise {
if (!isAuthorised(to)) {
return false;
}
if (isAnonymous(to)) {
return false;
}
if (isAllowed(to)) {
return false;
}
const showMessage = from.name === 'top'
? (message: string) => ServiceLocator.instance.messageService.addMessage(MessageType.Erro
: (message: string) => ServiceLocator.instance.messageService.reserve(MessageType.Error,
const mesasge = i18n.t("common.routing.no-authority").toString();
showMessage(mesasge);
next({name: "top"});
return true;
}

View Slide

127
return false;
}
return false;
}
return false;
}
return true;
}

View Slide

128
return false;
}
return false;
}
return false;
}
return true;
}
function isAuthorised(to: Route): boolean {
return to.matched.every(record => !record.meta.noAuth);
}
そもそも認証が要求されるか確認

View Slide

129
return false;
}
return false;
}
return false;
}
return true;
}

View Slide

130
return false;
}
return false;
}
return false;
}
return true;
}
function isAnonymous(to: Route): boolean {
return to.matched.some((record => !!record.meta && record.meta.role === 'any'));
}
認可が不要か確認

View Slide

131
return false;
}
return false;
}
return false;
}
return true;
}

View Slide

132
return false;
}
return false;
}
return false;
}
return true;
}
function isAllowed(to: Route): boolean {
return to.matched.some(record => {
if (!record || !record.meta) {
return false;
}
const metaRole = record.meta.role;
if (metaRole instanceof Array) {
const allowedRoles = metaRole;
return accountStoreFacade.isAllowedAny(allowedRoles);
} else {
const allowedRole = !!metaRole
? metaRole
: AccountRole.Administrator;
return accountStoreFacade.isAllowed(allowedRole);
}
})
}
自身の権限と照らし合わせる

View Slide

133
return false;
}
return false;
}
return false;
}
return true;
}
権限がないのでTOPへ遷移しエラー表示

View Slide

134

View Slide

まずサーバー側で 403 を発行する
135

View Slide

136
router.get('', authorize("advanced"), (req, res) => {
const json = debugDataLoader("user", "get");
res.json(json);
});
router.post('', authorize(), (req, res) => {
const json = debugDataLoader("user", "post");
res.json(json);
});
router.get('/:id', authorize("advanced"), (req, res) => {
const json = debugDataLoader("user", "get-detail");
res.json(json);
});

View Slide

137
router.get('', authorize("advanced"), (req, res) => {
const json = debugDataLoader("user", "get");
res.json(json);
});
router.post('', authorize(), (req, res) => {
const json = debugDataLoader("user", "post");
res.json(json);
});
router.get('/:id', authorize("advanced"), (req, res) => {
const json = debugDataLoader("user", "get-detail");
res.json(json);
});

View Slide

403 のハンドリング
138

View Slide

139
const notifyMessageWhenUnexpectedErrorHandler: IUnexpectedErrorHandler = (
resolve: (value?: WraxiosResponse | PromiseLike>) => void,
reject: (reason?: any) => void,
error: AxiosError
) => {
...
const statusCode = response.status;
switch (statusCode) {
case 401:
router.push({name: 'login'});
break;
case 403:
const message = i18n.t('common.wraxios.role-changed').toString();
ServiceLocator.instance.messageService.reserve(MessageType.Info, message);
router.push({name: 'top'});
break;
default:
router.push({name: 'error-server'});
break;
}
};

View Slide

140
const notifyMessageWhenUnexpectedErrorHandler: IUnexpectedErrorHandler = (
resolve: (value?: WraxiosResponse | PromiseLike>) => void,
reject: (reason?: any) => void,
error: AxiosError
) => {
...
const statusCode = response.status;
switch (statusCode) {
case 401:
router.push({name: 'login'});
break;
case 403:
const message = i18n.t('common.wraxios.role-changed').toString();
ServiceLocator.instance.messageService.reserve(MessageType.Info, message);
router.push({name: 'top'});
break;
default:
router.push({name: 'error-server'});
break;
}
};
権限エラーメッセージを予約してTOPへ遷移

View Slide

Agenda
141

View Slide

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

View Slide

ObjectA ObjectB
143

View Slide

ObjectA ObjectB
144

View Slide

ObjectA ObjectB
Method
Call
145

View Slide

ObjectA ObjectB
Method
Call
Method
Call
146

View Slide

ObjectA ObjectB
Method
Call
Method
Call
147

View Slide

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() {
...
} 148

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 149

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 150

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 151
相互参照

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 152
相互参照
コンストラクタに
this を渡してると
怪しいかも

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 153

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 154

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 155

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 156

View Slide

class ObjectA {
public method() {
}
...
}
}
class ObjectB {
public constructor(
}
public method() {
}
...
} 157

View Slide

ObjectA ObjectB
158

View Slide

class ObjectA {
private objectB
= new ObjectB(this);
public method() {
}
...
}
public methodForB2() {
...
this.objectB.methodForA2();
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
this.objectA.methodForB2();
}
public methodForA2() {
...
}
...
}
159

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
160

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
161

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
162

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
163

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
164

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
165

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
166

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
167

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
168

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
169

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
170

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
171

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
172

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
173

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
174

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
175

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
176

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
177

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
178

View Slide

class ObjectA {
private objectB
public method() {
}
...
}
...
}
...
}
...
class ObjectB {
public constructor(
}
public method() {
}
...
}
...
}
...
}
動作順序
把握できました？
179

View Slide

ObjectA ObjectB
methodForA
methodForB
methodForB2
methodForA2
methodForB3
methodForA3
methodForA4
180

View Slide

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

View Slide

どうするか？
182

View Slide

ObjectA ObjectB
183

View Slide

ObjectA ObjectB
Parent
ObjectA ObjectB
184

View Slide

class Parent {
private readonly objectA = new ObjectA();
private readonly objectB = new ObjectB();
public method() {
}
}
185

View Slide

class Parent {
public method() {
}
}
class ObjectA {
...
}
...
}
...
}
...
}
}
class ObjectB {
...
}
...
}
...
}
...
}
} 186

View Slide

class Parent {
public method() {
}
}
class ObjectA {
...
}
...
}
...
}
...
}
}
class ObjectB {
...
}
...
}
...
}
...
}
}
オブジェクトは
シンプルに
187

View Slide

class Parent {
public method() {
}
}
188

View Slide

class Parent {
public method() {
}
}
コードを見れば
一目瞭然
189

View Slide

コンポーネントも
同じ
190

View Slide

TabButton TabButton TabButton TabButton
191

View Slide

Click
192

View Slide

Click
Select
193

View Slide

Click
Select
194

View Slide

Click
unselect()
Select
195

View Slide

Click
unselect()
Select
196

View Slide

Click
unselect()
Select
197

View Slide

TabButtonGroup
198

View Slide

TabButtonGroup
Click
199

View Slide

TabButtonGroup
Click
Clicked
200

View Slide

TabButtonGroup
Un
Select
Un
Select
Un
Select
Un
Select
201

View Slide

TabButtonGroup
Un
Select
Un
Select
Un
Select
Un
Select
202

View Slide

TabButtonGroup
Select
203

View Slide

TabButtonGroup
Select
204

View Slide

TabContent
Click
205

View Slide

TabContent
Clicked
TabButtonGroup
206

View Slide

TabContent
TabButtonGroup
Clicked
Clicked
(B)
Tab
207

View Slide

TabContent
TabButtonGroup
Tab
Un
Select
208

View Slide

TabContent
TabButtonGroup
Tab
Un
Select
Un
Select
Un
Select
Un
Select
Un
Select
209

View Slide

TabContent
TabButtonGroup
Tab
Un
Select
Un
Select
Un
Select
Un
Select
Un
Select
210

View Slide

TabContent
TabButtonGroup
Tab
Select
(B)
211

View Slide

TabContent
TabButtonGroup
Tab
Select
(B)
Select
212

View Slide

TabContent
TabButtonGroup
Tab
Select
(B)
Select
213

View Slide

TabContent
TabButtonGroup
Tab
Change
Content
214

View Slide

TabButton
TabContent
TabButtonGroup
Tab
215

View Slide

TabButton
TabContent
TabButtonGroup
Tab
216

View Slide

TabButton
TabContent
TabButtonGroup
Tab
メソッド
217

View Slide

TabButton
TabContent
TabButtonGroup
Tab
メソッド
218

View Slide

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

View Slide

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

View Slide

TabContent
TabButtonGroup
Clicked
Tab
Clicked
(B)
221

View Slide

TabContent
TabButtonGroup
Clicked
Tab
イベント
Clicked
(B)
222

View Slide

TabContent
TabButtonGroup
Tab
Select
(B)
Select
223

View Slide

TabContent
TabButtonGroup
Tab
Select
(B)
Select
メソッド
224

View Slide

TabContent
TabButtonGroup
Tab
Select
(B)
Select
メソッド
Vue などでは
これをバインディングで
実現する
225

View Slide

たとえば
226

View Slide

227

 export default class LoginRootPage extends Vue { ... public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... 

View Slide

228

 export default class LoginRootPage extends Vue { ... public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... 子コンポーネントのイベントをハンドリング 

View Slide

229

 export default class LoginRootPage extends Vue { ... public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... 

View Slide

230

 export default class LoginRootPage extends Vue { ... public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... 子コンポーネントの操作は あくまでそれを保持するコンポーネント 

View Slide

ページ遷移や通信を行う箇所
231

View Slide

PageA PageB
ComponentA
Button
232

View Slide

PageA PageB
ComponentA
Button
Click
233

View Slide

PageA PageB
ComponentA
Button
Click
234

View Slide

PageA PageB
ComponentA
Button
235

View Slide

PageA PageB
ComponentA
Button
236

View Slide

PageA PageB
ComponentA
Button
Click
237

View Slide

PageA PageB
ComponentA
Button
Click
238

View Slide

PageA PageB
ComponentA
Button
Click
239

View Slide

PageA PageB
ComponentA
Button
240

View Slide

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

View Slide

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

View Slide

...

{{user.name}}

...

 ... export default class UserIndexPage extends Vue { 

View Slide

通信も同じ
246

View Slide

Page
Component
Data
247

View Slide

Page
Component
Http
Data
248

View Slide

Page
Component
Http
Http
Data
249

View Slide

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

View Slide

251

 ... export default class LoginRootPage extends Vue { @Action("account/loadAccountInfo") public loadAccountInfo!: () => Promise<void>; public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... } 

View Slide

252

 ... export default class LoginRootPage extends Vue { @Action("account/loadAccountInfo") public loadAccountInfo!: () => Promise<void>; public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... } 

View Slide

253

 ... export default class LoginRootPage extends Vue { @Action("account/loadAccountInfo") public loadAccountInfo!: () => Promise<void>; public formDisabled: boolean = false; public onSubmit(model: ILoginRequest) { ServiceLocator.instance.messageService.clearMessage(); this.formDisabled = true; wraxios.post('/login', model, { onErrored: () => { this.formDisabled = false; }}) .then(_ => { this.onLoggedIn(); }); } ... } 通信はフォームで行わずルートで行っている 

View Slide

まとめ
254

View Slide

重要なこと
255

View Slide

無駄な努力はせず
必要な努力をする
256

View Slide

チームのメンバーが
注力すべきところはどこか
考えながらコア部分を作っていこう
257

View Slide

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

View Slide

Vue.js * How to make front-end / vuejs how to make front-end

Vue.js * How to make front-end / vuejs how to make front-end

nrs

More Decks by nrs

Other Decks in Programming

Featured

Transcript