チームリーディング――フロントエンドコンポーネントの指針 / Team leading

コンポーネント指向を浸透させるために取った、チームリーディングについてのプレゼンテーションです。

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

Transcript

1. チームリーディング 成瀬 允宣 フロントエンドコンポーネントの指針
8. 8 これから新規開発するけど なにか面白そうなのあります？
9. 9 これから新規開発するけど なにか面白そうなのあります？
10. 10 これから新規開発するけど なにか面白そうなのあります？ アトミックデザインっていうのを 知りました
11. 11 これから新規開発するけど なにか面白そうなのあります？ アトミックデザインっていうのを 知りました じゃあそれやりましょうか
13. 課題 実践 導く
14. 課題 実践 導く
18. 18 JQuery 入れていいですか？
19. 19 SPA
20. 20 SPA me
21. 21 SPA JQuery me
22. 22 SPA JQuery me
23. 23 SPAフレームワークを使う理由は？
24. 24 無意味に重複したコード
25. 25 無意味に重複したコード 読み込まないと意図が見えづらいコード
26. 26 無意味に重複したコード 読み込まないと意図が見えづらいコード 実装者以外解読が難しいコード
27. 27 無意味に重複したコード 読み込まないと意図が見えづらいコード 実装者以外解読が難しいコード
28. 28 コンポーネント指向
29. 29 無意味に重複したコード 読み込まないと意図が見えづらいコード 実装者以外解読が難しいコード
30. 30 モジュール性を高める
31. 31 コンポーネント指向
32. 32 無意味に重複したコード 読み込まないと意図が見えづらいコード 実装者以外解読が難しいコード
33. 33 無意味に重複したコード 読み込まないと意図が見えづらいコード 実装者以外解読が難しいコード
34. 34 理解の範囲を狭める
35. 35 コンポーネント指向
37. 37 コンポーネント指向で作りましょう
38. 38 コンポーネント指向で作りましょう 分かりました
39. 39 コンポーネント指向で作りましょう 分かりました こうはならない
44. 44 コンポーネント指向
45. 45 コンポーネント指向
46. 46 これに従って 作ろう コンポーネント指向
47. 47 これに従って 作ろう コンポーネント指向 イメージ つかないなぁ
49. 49 これに従って 作ろう
50. 50 これに従って 作ろう わかる 気がする
51. 課題 実践 導く
52. 52 実際 どう作れば？
53. 53 すべては Atom から なります 実際 どう作れば？
54. 54 すべては Atom から なります ……
55. 55 人を動かすための ステップ
56. 56 や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
57. 57 や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
58. ひとつのページを分析してみせる
59. © 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 Narusemi Team Narusemi Company Programmer Job Masanobu Naruse Name
60. Atom
61. Programmer Narusemi Narusemi Nrs Seminar https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name 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
62. Narusemi Narusemi Programmer https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name 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
63. Narusemi Narusemi Programmer Nrs Seminar https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name 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
64. Narusemi Narusemi Programmer Nrs Seminar https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name 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
65. Narusemi Narusemi Programmer Nrs Seminar https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG SideMenuButton TOP
66. Narusemi Narusemi Programmer Nrs Seminar https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name Search Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name BLOG TOP > ABOUT ME BreadCrumb
67. Narusemi Narusemi Programmer Nrs Seminar https://nrslib.com HP @nrslib Twitter Team Company Job Masanobu Naruse Name Search Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse TOP > ABOUT ME BLOG TableCell Name
68. Molecules
69. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell
70. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell
71. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle
72. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle
73. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button
74. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button
75. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell TableCell TableCell HomePageTitle Placeholder Button
76. Organism
77. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell
78. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell
79. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell
80. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell
81. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
82. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
83. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
84. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
85. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search TableCell TableCell TableCell TableCell TableCell TableCell BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
86. あとはページを担当分けして みんなでやってもらう Here is a sample.
87. その間にサンプル作成
89. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
90. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
91. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
92. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
93. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
94. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
95. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
96. <template> <div> <header-menu></header-menu> <div class="contents"> <side-menu></side-menu> <main class="main" role="main"> <global-message /> <slot name="main-content"></slot> </main> </div> <footer-menu></footer-menu> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; ... @Component({ components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu }, }) export default class NormalTemplate extends Vue {} </script>
97. <template> <normal-template> <router-view slot="main-content"></router-view> </normal-template> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; @Component({ components: { NormalTemplate }, }) export default class TopRootPage extends Vue {} </script>
98. <template> <normal-template> <router-view slot="main-content"></router-view> </normal-template> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; @Component({ components: { NormalTemplate }, }) export default class TopRootPage extends Vue {} </script>
99. <template> <normal-template> <router-view slot="main-content"></router-view> </normal-template> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; @Component({ components: { NormalTemplate }, }) export default class TopRootPage extends Vue {} </script>
100. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
101. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
102. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
103. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
104. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
105. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
106. <template> <contents-with-breadcrumb> <template slot="breadcrumbs"> <crumb :to="{name: 'top'}">{{$t("breadcrumb-home")}}</crumb> <crumb isActive="true">{{$t("title")}}</crumb> </template> <indexed-list v-loading="isLoading"> <indexed-list-row heading="Name"> <indexed-list-label>Masanobu Naruse</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Job"> <indexed-list-label>Programmer / Developer Evangelist</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Company"> <indexed-list-label>GMO Internet, Inc.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Team"> <indexed-list-label>UX UI / DevRel.</indexed-list-label> </indexed-list-row> <indexed-list-row heading="Twitter"> <normal-link href="https://twitter.com/nrslib">@nrslib</normal-link> </indexed-list-row> <indexed-list-row heading="HP"> <normal-link href="https://nrslib.com">https://nrslib.com</normal-link> </indexed-list-row> </indexed-list> </contents-with-breadcrumb> </template>
107. <template> <a v-if="href" :href='href' target="_blank" rel="noopener noreferrer" > <slot></slot> </a> <router-link v-else :to="to"> <slot></slot> </router-link> </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; @Component({ name: 'NormalLink' }) export default class NormalLink extends Vue { @Prop() public to: any; @Prop() public href: string; } </script>
108. atomic Atoms Molecules Organisms Templates Link Button NormalLink PrimaryButton SecondaryButton LinkButton AddButton Table TableColumn TableColumnHeader Table TableRow Table TableComponent TableSearchTable TableHeader Contents Layer : : : NormalTemplate NoAuthorityTemplate Contents ContentsWithBreadcrumb 構成サンプル
109. pages Top TopRootPage TopIndexPage Index Info Index Detail InfoRootPage InfoIndexPage InfoDetailPage TopRoute InfoRoute InfoData 構成サンプル （ページ） ：
110. 110 や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
111. 皆がつまずいたポイント
112. <h1> タグとか どうします？
113. 案ずることはない すべては Atom だ <h1> タグとか どうします？ <template> <h1> <slot></slot> </h1> </template> <script lang="ts"> import { Component, Prop, Vue } from 'vue-property-decorator'; @Component export default class Heading1 extends Vue { } </script>
114. <div> タグは？
115. <div> タグは？ 位置調整などは コンポーネントにしない <template> <div class="container__body"> <primary-button @clicked="onTestButtonClicked"> Test Button </primary-button> </div> </template>
116. ボタンって更に 分けられません？ Search
117. 分けたらボタン じゃなくなる ボタンって更に 分けられません？ Search Search
118. ファイル 作りすぎじゃ
119. ファイルが増えても フォルダ分けすれば探せる ファイル 作りすぎじゃ
120. どれが Atom で どれが Molecules で どこからが Organism？
121. どれが Atom で どれが Molecules で どこからが Organism？ Atom を利用したら Molecules Molecules を利用してたら Organism 意味ある塊なら Organism
122. Organism を利用した Organism が出てきました！
123. Organism は Organism を コンポジションしていい そもそも３つのレイヤーで おさまるわけがない Organism を利用した Organism が出てきました！
124. 決して声を荒げず 根気よく 好奇心に応える
125. 125 や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
126. コンポーネントで大事なこと
127. { ‘data’ : ‘a’} Parent Component Child Component
128. { ‘data’ : ‘a’} Copy { ‘data’ : ‘a’} Parent Component Child Component
129. Parent Component Child Component { ‘data’ : ‘a’} { ‘data’ : ‘a’} Change
130. Parent Component Child Component { ‘data’ : ‘a’} { ‘data’ : ‘b’} Change
131. Parent Component Child Component { ‘data’ : ‘a’} { ‘data’ : ‘b’} Notify
132. Parent Component Child Component { ‘data’ : ‘b’} { ‘data’ : ‘b’} Notify
133. Parent Component Child Component { ‘data’ : ‘b’} { ‘data’ : ‘b’} Notify
134. Parent Component Child Component { ‘data’ : ‘b’} { ‘data’ : ‘b’} Notify コンポーネント作りの 経験がないとやりがち
135. { ‘data’ : ‘a’} Parent Component Child Component
136. { ‘data’ : ‘a’} Parent Component Child Component Notify event
137. { ‘data’ : ‘a’} Parent Component Child Component Change
138. { ‘data’ : ‘b’} Parent Component Child Component Change
139. { ‘data’ : ‘b’} Parent Component Child Component Change モデルバインド（v-model）も この動作をしている
140. { ‘data’ : ‘b’} Parent Component Child Component Change Child Component Notify event Notify event 親子が増えても一緒
141. 141 SPA JQuery me
142. 142 SPA JQuery me 彼らに経験を積んでもらうには？
143. 実践の場の提供
144. <template> <normal-template> <template slot="main-content"> <h2 style="color: green">Play Ground</h2> <link-button :to="{name: 'module-playground-dropdown'}">Dropdown</link-button> <link-button :to="{name: 'module-playground-table'}">Table</link-button> <link-button :to="{name: 'module-playground-modal'}">Modal</link-button> <link-button :to="{name: 'module-playground-tab'}">Tab</link-button> <link-button :to="{name: 'modulePlaygroundPassword'}">Password</link-button> <link-button :to="{name: 'modulePlaygroundButton'}">Button</link-button> <link-button :to="{name: 'modulePlaygroundText'}">Text</link-button> <link-button :to="{name: 'modulePlaygroundFormElement'}">FormElement & Validator</link-button> <link-button :to="{name: 'modulePlaygroundDatepicker'}">datepicker</link-button> <link-button :to="{name: 'modulePlaygroundLoading'}">L@@ding</link-button> <link-button :to="{name: 'modulePlaygroundProgressTracker'}">ProgressTracker</link-button> <link-button :to="{name: 'modulePlayGroundProgress'}">Progress</link-button> <link-button :to="{name: 'modulePlayGroundCheckbox'}">Checkbox</link-button> <link-button :to="{name: 'modulePlayGroundPanel'}">Panel</link-button> <link-button :to="{name: 'modulePlaygroundVariableInput'}">VariableInput</link-button> <link-button :to="{name: 'modulePlaygroundRadioGroupButton'}">RadioGroup</link-button> <link-button :to="{name: 'modulePlayGroundClipboard'}">Clipboard</link-button> <link-button :to="{name: 'modulePlaygroundInnerWizard'}">InnerWizard</link-button> <link-button :to="{name: 'modulePlayGroundTooltip'}">Tooltip</link-button> <link-button :to="{name: 'modulePlayGroundConfigurationTipsPage'}">ConfigurationTips</link-button> <link-button :to="{name: 'modulePlayGroundPager'}">Pager</link-button> <link-button :to="{name: 'modulePlayGroundAnchor'}">Anchor</link-button> <link-button :to="{name: 'modulePlayGroundCapacityDisplay'}">Capacity</link-button> <link-button :to="{name: 'modulePlayGroundEmptyPanel'}">EmptyPanel</link-button> <link-button :to="{name: 'modulePlayGroundCarouselPage'}">Carousel</link-button> <link-button :to="{name: 'modulePlayGroundGraphPage'}">Graph</link-button> <router-view></router-view> </template> </normal-template> </template> <script lang="ts"> import { Component } from 'vue-property-decorator'; import { BasePage } from '@lib/vue/BasePage'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; import LinkButton from 'front/atomic/Atoms/Button/LinkButton.vue'; @Component({ components: { LinkButton, NormalTemplate }, }) export default class ModulePlayGroundRootPage extends Vue {} </script>
145. <template> <normal-template> <template slot="main-content"> <h2 style="color: green">Play Ground</h2> <link-button :to="{name: 'module-playground-dropdown'}">Dropdown</link-button> <link-button :to="{name: 'module-playground-table'}">Table</link-button> <link-button :to="{name: 'module-playground-modal'}">Modal</link-button> <link-button :to="{name: 'module-playground-tab'}">Tab</link-button> <link-button :to="{name: 'modulePlaygroundPassword'}">Password</link-button> <link-button :to="{name: 'modulePlaygroundButton'}">Button</link-button> <link-button :to="{name: 'modulePlaygroundText'}">Text</link-button> <link-button :to="{name: 'modulePlaygroundFormElement'}">FormElement & Validator</link-button> <link-button :to="{name: 'modulePlaygroundDatepicker'}">datepicker</link-button> <link-button :to="{name: 'modulePlaygroundLoading'}">L@@ding</link-button> <link-button :to="{name: 'modulePlaygroundProgressTracker'}">ProgressTracker</link-button> <link-button :to="{name: 'modulePlayGroundProgress'}">Progress</link-button> <link-button :to="{name: 'modulePlayGroundCheckbox'}">Checkbox</link-button> <link-button :to="{name: 'modulePlayGroundPanel'}">Panel</link-button> <link-button :to="{name: 'modulePlaygroundVariableInput'}">VariableInput</link-button> <link-button :to="{name: 'modulePlaygroundRadioGroupButton'}">RadioGroup</link-button> <link-button :to="{name: 'modulePlayGroundClipboard'}">Clipboard</link-button> <link-button :to="{name: 'modulePlaygroundInnerWizard'}">InnerWizard</link-button> <link-button :to="{name: 'modulePlayGroundTooltip'}">Tooltip</link-button> <link-button :to="{name: 'modulePlayGroundConfigurationTipsPage'}">ConfigurationTips</link-button> <link-button :to="{name: 'modulePlayGroundPager'}">Pager</link-button> <link-button :to="{name: 'modulePlayGroundAnchor'}">Anchor</link-button> <link-button :to="{name: 'modulePlayGroundCapacityDisplay'}">Capacity</link-button> <link-button :to="{name: 'modulePlayGroundEmptyPanel'}">EmptyPanel</link-button> <link-button :to="{name: 'modulePlayGroundCarouselPage'}">Carousel</link-button> <link-button :to="{name: 'modulePlayGroundGraphPage'}">Graph</link-button> <router-view></router-view> </template> </normal-template> </template> <script lang="ts"> import { Component } from 'vue-property-decorator'; import { BasePage } from '@lib/vue/BasePage'; import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue'; import LinkButton from 'front/atomic/Atoms/Button/LinkButton.vue'; @Component({ components: { LinkButton, NormalTemplate }, }) export default class ModulePlayGroundRootPage extends Vue {} </script> 実践的なコンポーネントを 作ってもらって経験してもらう
146. <template> <div> <secondary-button @clicked="buttonClicked">Add row</secondary-button> <secondary-button @clicked="onClearButtonClicked">Clear</secondary-button> <secondary-button @clicked="changeLoadingButtonClicked">SwitchLoading</secondary-button> <normal-heading>ページング</normal-heading> <module-play-ground-table-paging-table :data="data" :isLoading="isLoading" :orderServerId <normal-heading>件数指定</normal-heading> <module-play-ground-table-dropdown-paging-table :data="data" :isLoading="isLoading" :orde <normal-heading>検索</normal-heading> <module-play-ground-table-search-table :data="data" :isLoading="isLoading" :orderServerId <normal-heading>通常テーブル（全データ）</normal-heading> <module-play-ground-table-normal-table :data="data" :isLoading="isLoading" :orderServerId </div> </template> PlayGround があれば コンポーネントの使い方もわかる
147. 147 や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
148. できました
149. できました そうそう！ そうだよ！ 最高！
150. できました そうそう！ こうだよ！ 最高！ 間違いを指摘するだけが レビューじゃない！
151. レビューはコミュニケーション
152. 思い違いを正すため 正しい理解を促すため 初期は細かい単位で
153. 課題 実践 導く
156. 156 や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ 話 し 合 い 耳 を 傾 け 承 認 し 任 せ て や ら ね ば 人 は 育 た ず や っ て い る 姿 を 感 謝 で 見 守 っ て 信 頼 せ ね ば 人 は 実 ら ず 山 本 五 十 六
157. Auther Masanobu Naruse HomePage https://nrslib.com Twitter @nrslib