Enjoy Application Engineering

https://gmo-recruit.connpass.com/event/133160/
「エンジニアトーク！×会社説明会」イベントにて行ったセッションのスライドです。
みなさんの興味の範囲を広げることができるように、普段の開発のキラキラした部分を紹介しています。
具体的には SPA, Atomic Design, Architecture, DDD をざっくばらんにご紹介しています。
ご興味沸きましたら調べてみたり、学んでみたりしてくださいませ。

# URL
HomePage: https://nrslib.com
Twitter: https://twitter.com/nrslib

Transcript

1. Masanobu Naruse Application Engineering Enjoy
2. 2 Developer Relations Team Programmer / Developer Evangelist Masanobu Naruse
3. 3 エンジニアリングを楽しもう
5. 5 最後になにか 質問はありますか
6. 6 最後になにか 質問はありますか なにか勉強しておく べきことはありますか
8. 8 学ぶべきことは いっぱいある
9. 9 けど必要なことは その都度教える
10. 10 業務に必要なことは 入社後に教えるので 好きなことを 学んでください
11. 11 はい！ 業務に必要なことは 入社後に教えるので 好きなことを 学んでください
12. 12 はい！ 業務に必要なことは 入社後に教えるので 好きなことを 学んでください とはいうものの
13. 13 どうせ同じ時間かけるなら 役に立つこと勉強したい
14. 14 そりゃそうだよね！！！
15. 15 みなさんが学ぶべきものは みなさんが決めるべき
16. 16 というわけで
17. 17 アプリケーションの開発者として 普段やっていることを お話します
18. 18 興味が沸いたら 手に取ってみてください
19. 19 Front-end Back-end
20. 20 Front-end Back-end
21. SPA
22. 22 Single Page Application
23. 23 Single Page Application
24. 24 Multiple Page Application
25. 25 Multiple Page Application
26. 26 Browser Server Request
27. 27 Browser Server
28. 28 Browser Server Response
29. 29 SPA
30. 30 Browser Server Request
31. 31 Browser Server { "name" : "naruse", "job" : "programmer" }
32. 32 Browser Server Response { "name" : "naruse", "job" : "programmer" }
33. 33 Browser Server { "name" : "naruse", "job" : "programmer" }
34. 34 Browser Server { "name" : "naruse", "job" : "programmer" }
35. 35 In MPA
36. 36 Top
37. 37 Top
38. 38 Top List
39. 39 Top List
40. 40 Top List Detail
41. 41 In SPA
42. 42 Top
43. 43 Top List
44. 44 Top List Detail
45. 45 サーバのデータが欲しいとき
46. 46 Top
47. 47 Top List
48. 48 Top List
49. 49 Top List Request
50. 50 Top List Request Response
51. 51 Top List Detail Request Response
52. 52 Top List Detail Request Request Response
53. 53 Top List Detail Request Response Request Response
54. 54 Top List Detail Request Response Request Response 遷移に待ち時間がない
55. 55 代表的な SPA フレームワーク
57. 57 Angular
58. 58 Vue.js
59. 59 React
60. 60 etc.
61. Atomic Design
63. 63 すべては Atom から成る
64. 64 すべては Atom から成る
65. 65 ATOMS
66. © 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
67. 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
68. 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
69. 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
70. 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
71. 71 Nrs Seminar ATOMS : Logo : HeaderTitle Search Search : TextBox : PrimaryButton
72. 72 MOLECULES
73. 73 MOLECULES ATOMを組み合わせたもの
74. 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
75. 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 HeaderLink Nrs Seminar
76. 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
77. 77 MOLECULES Search Search Nrs Seminar : HeaderLink : SearchBox
78. 78 ORGANISMS
79. 79 ORGANISMS ATOM / MOLECULES を組み合わせたもの
80. 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
81. 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
82. 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
83. 83 ORGANISM : Header : Table
84. 84 TEMPLATES
85. 85 TEMPLATES ページの基礎となるコンテンツ構造
86. © 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
87. © 2019 narusemi All rights reserved. XXX > YYY Search Search Nrs Seminar
88. 88 PAGES
89. 89 PAGES テンプレートにデータを流し込んだ結果
90. © 2019 narusemi All rights reserved. XXX > YYY Search Search Nrs Seminar
91. © 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
92. 92 デザインシステムにする
93. 93 Design System?
94. 94 Designer Engineer
95. 95 Designer Engineer Search SearchWord ここのページは このデザインで
96. 96 Designer Engineer Search SearchWord
97. 97 Designer Engineer Search SearchWord また見たことない ボタンが・・・
98. 98 Designer Engineer Search SearchWord もっと再利用しやすい してくれない？
99. 99 Designer Engineer Search SearchWord わかりました
100. 100 Designer Engineer Search SearchWord どうすれば 再利用しやすいんだ？ 伝わったかなぁ
101. 101 Designer Engineer Search SearchWord どうすれば 再利用しやすいんだ？ 伝わったかなぁ 向いている方向は同じでも 勘所が違う
102. 102 Designer Engineer 統一感 視線誘導 かっこよさ 共通化 保守性 難易度 Search SearchWord
103. 103 Designer Engineer Search SearchWord デザインシステム
104. 104 Designer Engineer Search SearchWord デザインシステム デザインシステム
105. これに従って デザインするからね やりやすい！
106. 106 Front-end Back-end
107. 107 Front-end Back-end
108. アーキテクチャ
109. 109 もっとも恐るべき事態
110. 110 スマート UI
111. 111 注文 確認画面 注文履歴 確認画面 注文履歴 一覧画面
112. 112 注文 確認画面 注文履歴 確認画面 注文履歴 一覧画面 サーバー
113. 113 注文 確認画面 注文履歴 確認画面 注文履歴 一覧画面 注文情報 サーバー
114. 114 注文 確認画面 注文履歴 確認画面 注文履歴 一覧画面 注文情報 サーバー
115. 115 注文 確認画面 注文履歴 確認画面 注文履歴 一覧画面 注文情報 サーバー 注文金額計算を書くべき場所は？
116. 116 注文 確認画面 注文履歴 確認画面 注文履歴 一覧画面 注文情報 サーバー
117. 117 注文 確認画面 注文金額計算 注文履歴 確認画面 注文金額計算 注文履歴 一覧画面 注文金額計算 注文情報 サーバー
118. 118 注文情報 注文金額計算 サーバー 注文 確認画面 注文金額計算 注文履歴 確認画面 注文金額計算 注文履歴 一覧画面 注文金額計算
119. 119 スマート UI を防ぐには
120. 120 たとえば
121. 121 レイヤードアーキテクチャ
122. 122 プレゼンテーション アプリケーション モデル インフラストラクチャ コードを分類し どこに何を記述するかの 方針を示す
123. 123 ヘキサゴナルアーキテクチャ
124. 124 ビジネスを中心に見立てて それ以外を交換可能なものとする
125. 125 別名 ポートアンドアダプター ポート アダプター
126. 126 たとえばテレビゲーム
132. 132 In Software
137. 137 クリーンアーキテクチャ
138. 138 ビジネスを中心に見立てて それ以外を端に追いやり 依存の方向を絶対的に制御する
139. 139 ビジネスを中心に見立てて それ以外を端に追いやり 依存の方向を絶対的に制御する ヘキサゴナルと一緒
140. 140 詳細な実装の方針についても 表現されている
141. 141 詳細な実装の方針についても 表現されている 迷いづらい
142. 142 アーキテクチャの役目
146. 146 Freedom
147. 147 Expedition
150. ドメイン駆動設計
151. 151 ドメイン？
153. 153 彼らに役立つ ソフトウェアを 作るには？
155. 155 彼らが見ている 世界を知るべき
157. 157 モデル
158. 158 モデル コード
159. 159 モデル コード
160. 160 モデル コード
161. 161 モデル コード ドメインの精通者と開発者が協力し ドメインとコードを結びつけ 価値あるソフトウェアを開発するためのプラクティス
162. 162 ソフトウェアを開発する対象のことを よく知り、コードで表現すること
163. 163 当たり前のことがもっとも困難
164. さいごに
165. 165 本日ご紹介したのは ほんの一部
166. 166 もっとも重要なのは
167. 167 楽しいと感じる心
168. 168 楽しさ駆動で 充実したエンジニアライフを！
169. 169 Auther Masanobu Naruse HomePage https://nrslib.com Twitter @nrslib