Enjoy Application Engineering

Slide 1

Slide 1 text

Masanobu Naruse Application Engineering Enjoy

Slide 2

Slide 2 text

2 Developer Relations Team Programmer / Developer Evangelist Masanobu Naruse

Slide 3

Slide 3 text

3 エンジニアリングを楽しもう

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5 最後になにか質問はありますか

Slide 6

Slide 6 text

6 最後になにか質問はありますかなにか勉強しておくべきことはありますか

Slide 7

Slide 7 text

Slide 8

Slide 8 text

8 学ぶべきことはいっぱいある

Slide 9

Slide 9 text

9 けど必要なことはその都度教える

Slide 10

Slide 10 text

10 業務に必要なことは入社後に教えるので好きなことを学んでください

Slide 11

Slide 11 text

11 はい！業務に必要なことは入社後に教えるので好きなことを学んでください

Slide 12

Slide 12 text

12 はい！業務に必要なことは入社後に教えるので好きなことを学んでくださいとはいうものの

Slide 13

Slide 13 text

13 どうせ同じ時間かけるなら役に立つこと勉強したい

Slide 14

Slide 14 text

14 そりゃそうだよね！！！

Slide 15

Slide 15 text

15 みなさんが学ぶべきものはみなさんが決めるべき

Slide 16

Slide 16 text

16 というわけで

Slide 17

Slide 17 text

17 アプリケーションの開発者として普段やっていることをお話します

Slide 18

Slide 18 text

18 興味が沸いたら手に取ってみてください

Slide 19

Slide 19 text

19 Front-end Back-end

Slide 20

Slide 20 text

20 Front-end Back-end

Slide 21

Slide 21 text

SPA

Slide 22

Slide 22 text

22 Single Page Application

Slide 23

Slide 23 text

23 Single Page Application

Slide 24

Slide 24 text

24 Multiple Page Application

Slide 25

Slide 25 text

25 Multiple Page Application

Slide 26

Slide 26 text

26 Browser Server Request

Slide 27

Slide 27 text

27 Browser Server

Slide 28

Slide 28 text

28 Browser Server Response

Slide 29

Slide 29 text

29 SPA

Slide 30

Slide 30 text

30 Browser Server Request

Slide 31

Slide 31 text

31 Browser Server { "name" : "naruse", "job" : "programmer" }

Slide 32

Slide 32 text

32 Browser Server Response { "name" : "naruse", "job" : "programmer" }

Slide 33

Slide 33 text

33 Browser Server { "name" : "naruse", "job" : "programmer" }

Slide 34

Slide 34 text

34 Browser Server { "name" : "naruse", "job" : "programmer" }

Slide 35

Slide 35 text

35 In MPA

Slide 36

Slide 36 text

36 Top

Slide 37

Slide 37 text

37 Top

Slide 38

Slide 38 text

38 Top List

Slide 39

Slide 39 text

39 Top List

Slide 40

Slide 40 text

40 Top List Detail

Slide 41

Slide 41 text

41 In SPA

Slide 42

Slide 42 text

42 Top

Slide 43

Slide 43 text

43 Top List

Slide 44

Slide 44 text

44 Top List Detail

Slide 45

Slide 45 text

45 サーバのデータが欲しいとき

Slide 46

Slide 46 text

46 Top

Slide 47

Slide 47 text

47 Top List

Slide 48

Slide 48 text

48 Top List

Slide 49

Slide 49 text

49 Top List Request

Slide 50

Slide 50 text

50 Top List Request Response

Slide 51

Slide 51 text

51 Top List Detail Request Response

Slide 52

Slide 52 text

52 Top List Detail Request Request Response

Slide 53

Slide 53 text

53 Top List Detail Request Response Request Response

Slide 54

Slide 54 text

54 Top List Detail Request Response Request Response 遷移に待ち時間がない

Slide 55

Slide 55 text

55 代表的な SPA フレームワーク

Slide 56

Slide 56 text

Slide 57

Slide 57 text

57 Angular

Slide 58

Slide 58 text

58 Vue.js

Slide 59

Slide 59 text

59 React

Slide 60

Slide 60 text

60 etc.

Slide 61

Slide 61 text

Atomic Design

Slide 62

Slide 62 text

Slide 63

Slide 63 text

63 すべては Atom から成る

Slide 64

Slide 64 text

64 すべては Atom から成る

Slide 65

Slide 65 text

65 ATOMS

Slide 66

Slide 66 text

© 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar

Slide 67

Slide 67 text

UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Logo

Slide 68

Slide 68 text

UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG HeaderTitle Nrs Seminar

Slide 69

Slide 69 text

UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar TOP Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG TextBox Search

Slide 70

Slide 70 text

UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG PrimaryButton Search

Slide 71

Slide 71 text

71 Nrs Seminar ATOMS : Logo : HeaderTitle Search Search : TextBox : PrimaryButton

Slide 72

Slide 72 text

72 MOLECULES

Slide 73

Slide 73 text

73 MOLECULES ATOMを組み合わせたもの

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search SearchBox

Slide 77

Slide 77 text

77 MOLECULES Search Search Nrs Seminar : HeaderLink : SearchBox

Slide 78

Slide 78 text

78 ORGANISMS

Slide 79

Slide 79 text

79 ORGANISMS ATOM / MOLECULES を組み合わせたもの

Slide 80

Slide 80 text

Slide 81

Slide 81 text

UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Job Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Header Nrs Seminar

Slide 82

Slide 82 text

Nrs Seminar © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME TOP > ABOUT ME BLOG Search Search https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name Table UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job

Slide 83

Slide 83 text

83 ORGANISM : Header : Table

Slide 84

Slide 84 text

84 TEMPLATES

Slide 85

Slide 85 text

85 TEMPLATES ページの基礎となるコンテンツ構造

Slide 86

Slide 86 text

© 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter GMO Internet, Inc. Workplace Developer Evangelist Title Programmer Job Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Nrs Seminar

Slide 87

Slide 87 text

Slide 88

Slide 88 text

88 PAGES

Slide 89

Slide 89 text

89 PAGES テンプレートにデータを流し込んだ結果

Slide 90

Slide 90 text

Slide 91

Slide 91 text

© 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name

Slide 92

Slide 92 text

92 デザインシステムにする

Slide 93

Slide 93 text

93 Design System?

Slide 94

Slide 94 text

94 Designer Engineer

Slide 95

Slide 95 text

95 Designer Engineer Search SearchWord ここのページはこのデザインで

Slide 96

Slide 96 text

96 Designer Engineer Search SearchWord

Slide 97

Slide 97 text

97 Designer Engineer Search SearchWord また見たことないボタンが・・・

Slide 98

Slide 98 text

98 Designer Engineer Search SearchWord もっと再利用しやすいしてくれない？

Slide 99

Slide 99 text

99 Designer Engineer Search SearchWord わかりました

Slide 100

Slide 100 text

100 Designer Engineer Search SearchWord どうすれば再利用しやすいんだ？伝わったかなぁ

Slide 101

Slide 101 text

101 Designer Engineer Search SearchWord どうすれば再利用しやすいんだ？伝わったかなぁ向いている方向は同じでも勘所が違う

Slide 102

Slide 102 text

102 Designer Engineer 統一感視線誘導かっこよさ共通化保守性難易度 Search SearchWord

Slide 103

Slide 103 text

103 Designer Engineer Search SearchWord デザインシステム

Slide 104

Slide 104 text

104 Designer Engineer Search SearchWord デザインシステムデザインシステム

Slide 105

Slide 105 text

これに従ってデザインするからねやりやすい！

Slide 106

Slide 106 text

106 Front-end Back-end

Slide 107

Slide 107 text

107 Front-end Back-end

Slide 108

Slide 108 text

アーキテクチャ

Slide 109

Slide 109 text

109 もっとも恐るべき事態

Slide 110

Slide 110 text

110 スマート UI

Slide 111

Slide 111 text

111 注文確認画面注文履歴確認画面注文履歴一覧画面

Slide 112

Slide 112 text

112 注文確認画面注文履歴確認画面注文履歴一覧画面サーバー

Slide 113

Slide 113 text

113 注文確認画面注文履歴確認画面注文履歴一覧画面注文情報サーバー

Slide 114

Slide 114 text

114 注文確認画面注文履歴確認画面注文履歴一覧画面注文情報サーバー

Slide 115

Slide 115 text

115 注文確認画面注文履歴確認画面注文履歴一覧画面注文情報サーバー注文金額計算を書くべき場所は？

Slide 116

Slide 116 text

116 注文確認画面注文履歴確認画面注文履歴一覧画面注文情報サーバー

Slide 117

Slide 117 text

117 注文確認画面注文金額計算注文履歴確認画面注文金額計算注文履歴一覧画面注文金額計算注文情報サーバー

Slide 118

Slide 118 text

118 注文情報注文金額計算サーバー注文確認画面注文金額計算注文履歴確認画面注文金額計算注文履歴一覧画面注文金額計算

Slide 119

Slide 119 text

119 スマート UI を防ぐには

Slide 120

Slide 120 text

120 たとえば

Slide 121

Slide 121 text

121 レイヤードアーキテクチャ

Slide 122

Slide 122 text

122 プレゼンテーションアプリケーションモデルインフラストラクチャコードを分類しどこに何を記述するかの方針を示す

Slide 123

Slide 123 text

123 ヘキサゴナルアーキテクチャ

Slide 124

Slide 124 text

124 ビジネスを中心に見立ててそれ以外を交換可能なものとする

Slide 125

Slide 125 text

125 別名ポートアンドアダプターポートアダプター

Slide 126

Slide 126 text

126 たとえばテレビゲーム

Slide 127

Slide 127 text

127

Slide 128

Slide 128 text

128

Slide 129

Slide 129 text

129

Slide 130

Slide 130 text

130

Slide 131

Slide 131 text

131

Slide 132

Slide 132 text

132 In Software

Slide 133

Slide 133 text

133

Slide 134

Slide 134 text

134

Slide 135

Slide 135 text

135

Slide 136

Slide 136 text

136

Slide 137

Slide 137 text

137 クリーンアーキテクチャ

Slide 138

Slide 138 text

138 ビジネスを中心に見立ててそれ以外を端に追いやり依存の方向を絶対的に制御する

Slide 139

Slide 139 text

139 ビジネスを中心に見立ててそれ以外を端に追いやり依存の方向を絶対的に制御するヘキサゴナルと一緒

Slide 140

Slide 140 text

140 詳細な実装の方針についても表現されている

Slide 141

Slide 141 text

141 詳細な実装の方針についても表現されている迷いづらい

Slide 142

Slide 142 text

142 アーキテクチャの役目

Slide 143

Slide 143 text

143

Slide 144

Slide 144 text

144

Slide 145

Slide 145 text

145

Slide 146

Slide 146 text

146 Freedom

Slide 147

Slide 147 text

147 Expedition

Slide 148

Slide 148 text

148

Slide 149

Slide 149 text

149

Slide 150

Slide 150 text

ドメイン駆動設計

Slide 151

Slide 151 text

151 ドメイン？

Slide 152

Slide 152 text

152

Slide 153

Slide 153 text

153 彼らに役立つソフトウェアを作るには？

Slide 154

Slide 154 text

154

Slide 155

Slide 155 text

155 彼らが見ている世界を知るべき

Slide 156

Slide 156 text

156

Slide 157

Slide 157 text

157 モデル

Slide 158

Slide 158 text

158 モデルコード

Slide 159

Slide 159 text

159 モデルコード

Slide 160

Slide 160 text

160 モデルコード

Slide 161

Slide 161 text

161 モデルコードドメインの精通者と開発者が協力しドメインとコードを結びつけ価値あるソフトウェアを開発するためのプラクティス

Slide 162

Slide 162 text

162 ソフトウェアを開発する対象のことをよく知り、コードで表現すること