Pro Yearly is on sale from $80 to $50! »

Enjoy Application Engineering

E37b4344ef4bfd0fc4826c04971e54fb?s=47 nrs
June 14, 2019

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

E37b4344ef4bfd0fc4826c04971e54fb?s=128

nrs

June 14, 2019
Tweet

Transcript

  1. Masanobu Naruse Application Engineering Enjoy

  2. 2 Developer Relations Team Programmer / Developer Evangelist Masanobu Naruse

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

  4. 4

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

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

  7. 7

  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 フレームワーク

  56. 56

  57. 57 Angular

  58. 58 Vue.js

  59. 59 React

  60. 60 etc.

  61. Atomic Design

  62. 62

  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 たとえばテレビゲーム

  127. 127

  128. 128

  129. 129

  130. 130

  131. 131

  132. 132 In Software

  133. 133

  134. 134

  135. 135

  136. 136

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

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

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

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

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

  142. 142 アーキテクチャの役目

  143. 143

  144. 144

  145. 145

  146. 146 Freedom

  147. 147 Expedition

  148. 148

  149. 149

  150. ドメイン駆動設計

  151. 151 ドメイン?

  152. 152

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

  154. 154

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

  156. 156

  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