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

Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division

E37b4344ef4bfd0fc4826c04971e54fb?s=47 nrs
July 10, 2019

Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division

Vue.js 講演用資料です。

# 概要
コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。
一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。
それが SPA 未経験のチームであればなおさらです。
直近のプロジェクトはまさにそんなプロジェクトでした。
本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、
またコンポーネント実装時に注意すべき事柄についてお話します

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

E37b4344ef4bfd0fc4826c04971e54fb?s=128

nrs

July 10, 2019
Tweet

Transcript

  1. Masanobu Naruse Vue.js × Atomic Design - コンポーネント分割の指針

  2. <template> <dl> <dt>Name</dt><dd>{{name}}</dd> <dt>Job</dt><dd>{{job}}</dd> <dt>Company</dt><dd>{{company}}</dd> <dt>Twitter</dt><dd>{{twitter}}</dd> </dl> </template> <script lang="ts">

    import { Component, Vue } from 'vue-property-decorator'; @Component export default class MyProfile extends Vue { public name: string = 'Masanobu Naruse'; public jobs: string[]= ['Programmer', 'Developer Evangelist']; public company: string = 'GMO Internet, Inc.'; public twitter: string = '@nrslib'; public get job(): string { return this.jobs.join(', '); } } </script>
  3. Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3.

    まとめ
  4. Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3.

    まとめ
  5. None
  6. None
  7. 新規プロジェクト 立ち上げ

  8. 時代は Vue だよ!

  9. None
  10. None
  11. None
  12. jQuery 入れていいですか?

  13. 当時のチームのスキルマップ

  14. SPA やったことある勢

  15. SPA やったことある勢 me

  16. SPA やったことある勢 jQuery 勢 me

  17. SPA やったことある勢 jQuery 勢 me

  18. SPA やったことある勢 jQuery 勢 me jQuery メインになりそう

  19. None
  20. 無意味に重複したコード 読み込まないと目的が分からないコード 実装者以外解読が難しいコード

  21. 無意味に重複したコード 読み込まないと目的が分からないコード 実装者以外解読が難しいコード 排除 したい

  22. 重複したコードを減らすコツ

  23. 重複したコードを減らすコツ モジュール性を高めること

  24. None
  25. 理解しやすいコードのコツ

  26. 理解しやすいコードのコツ 理解の範囲を狭めること

  27. None
  28. 時代はコンポーネント指向だ

  29. コンポーネント指向で 作ってください

  30. コンポーネント指向で 作ってください はい わかりました

  31. コンポーネント指向で 作ってください はい わかりました うまくいくとは思えない

  32. コンポーネント指向を 根付かせるために

  33. None
  34. None
  35. None
  36. None
  37. コンポーネント指向

  38. コンポーネント指向

  39. これに従って 作ろう コンポーネント指向

  40. これに従って 作ろう イメージ つかないなぁ コンポーネント指向

  41. None
  42. これに従って 作ろう

  43. これに従って 作ろう わかる 気がする

  44. Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3.

    まとめ
  45. None
  46. 実際 どう作れば?

  47. すべては Atom から なります 実際 どう作れば?

  48. すべては Atom から なります 実際 どう作れば? うまくいくとは思えない

  49. 人を動かすための ステップ

  50. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。

  51. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。

  52. ひとつのページを分析してみせる

  53. © 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
  54. Atom

  55. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel.

    Team GMO Internet, Inc. Company Programmer / Developer Evangelist 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
  56. https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO

    Internet, Inc. Company Programmer / Developer Evangelist 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
  57. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel.

    Team GMO Internet, Inc. Company Programmer / Developer Evangelist 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
  58. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel.

    Team GMO Internet, Inc. Company Programmer / Developer Evangelist 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
  59. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel.

    Team GMO Internet, Inc. Company Programmer / Developer Evangelist 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
  60. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel.

    Team GMO Internet, Inc. Company Programmer / Developer Evangelist 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
  61. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel.

    Team GMO Internet, Inc. Company Programmer / Developer Evangelist 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
  62. Molecules

  63. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell

  64. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell

  65. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle

  66. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle

  67. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button

  68. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button

  69. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell TableCell TableCell HomePageTitle

    Placeholder Button
  70. Organism

  71. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    TableCell TableCell
  72. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    TableCell TableCell
  73. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search TableCell TableCell
  74. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search TableCell TableCell
  75. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
  76. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
  77. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG TableCell TableCell
  78. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
  79. 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
  80. あとはページを担当分けして みんなでやってもらう Here is a sample.

  81. その間にサンプル作成

  82. None
  83. <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>
  84. <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>
  85. <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>
  86. <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>
  87. <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>
  88. <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>
  89. 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 構成サンプル
  90. pages Top TopRootPage TopIndexPage Index Info Index Detail InfoRootPage InfoIndexPage

    InfoDetailPage TopRoute InfoRoute InfoData 構成サンプル (ページ) :
  91. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。

  92. 皆がつまずいたポイント

  93. <h1> タグとか どうします?

  94. 案ずることはない すべては 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>
  95. <div> タグは?

  96. <div> タグは? 位置調整などは コンポーネントにしない <template> <div class="container__body"> <primary-button @clicked="onTestButtonClicked"> Test

    Button </primary-button> </div> </template>
  97. ボタンって更に 分けられません? Search

  98. 分けたらボタン じゃなくなる ボタンって更に 分けられません? Search Search

  99. ファイル 作りすぎじゃ

  100. ファイルが増えても フォルダ分けすれば探せる ファイル 作りすぎじゃ

  101. どれが Atom で どれが Molecules で どこからが Organism?

  102. どれが Atom で どれが Molecules で どこからが Organism? Atom を利用したら

    Molecules Molecules を利用してたら Organism 意味ある塊なら Organism
  103. Organism を利用した Organism が出てきました!

  104. Organism は Organism を コンポジションしていい そもそも3つのレイヤーで おさまるわけがない Organism を利用した Organism

    が出てきました!
  105. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。

  106. コンポーネントで大事なこと

  107. { ‘data’ : ‘a’} Parent Component Child Component

  108. { ‘data’ : ‘a’} Copy { ‘data’ : ‘a’} Parent

    Component Child Component
  109. Parent Component Child Component { ‘data’ : ‘a’} { ‘data’

    : ‘a’} Change
  110. Parent Component Child Component { ‘data’ : ‘a’} { ‘data’

    : ‘b’} Change
  111. Parent Component Child Component { ‘data’ : ‘a’} { ‘data’

    : ‘b’} Notify
  112. Parent Component Child Component { ‘data’ : ‘b’} { ‘data’

    : ‘b’} Notify
  113. Parent Component Child Component { ‘data’ : ‘b’} { ‘data’

    : ‘b’} Notify
  114. Parent Component Child Component { ‘data’ : ‘b’} { ‘data’

    : ‘b’} Notify コンポーネント作りの 経験がないとやりがち
  115. { ‘data’ : ‘a’} Parent Component Child Component

  116. { ‘data’ : ‘a’} Parent Component Child Component Notify event

  117. { ‘data’ : ‘a’} Parent Component Child Component Change

  118. { ‘data’ : ‘b’} Parent Component Child Component Change

  119. { ‘data’ : ‘b’} Parent Component Child Component Change モデルバインド(v-model)も

    この動作をしている
  120. { ‘data’ : ‘b’} Parent Component Child Component Change Child

    Component Notify event Notify event 親子が増えても一緒
  121. SPA やったことある勢 jQuery 勢 me

  122. SPA やったことある勢 jQuery 勢 me 彼らに経験を積んでもらうには?

  123. 実践の場の提供

  124. <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>
  125. <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> 実践的なコンポーネントを 作ってもらって経験してもらう
  126. <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 があれば コンポーネントの使い方もわかる
  127. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。

  128. 褒めるタイミング

  129. 褒めるタイミング レビュー

  130. できました

  131. できました そうそう! そうだよ! 最高!

  132. できました そうそう! こうだよ! 最高! 間違いを指摘するだけが レビューじゃない!

  133. レビューは勘違いを正すために 慣れるまでは細かい単位で

  134. Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3.

    まとめ
  135. Atomic Design に忠実であるべきか

  136. No

  137. 重要なのは

  138. 無意味に重複したコード 読み込まないと目的が分からないコード 実装者以外解読が難しいコード 排除 したい

  139. None
  140. テックリードとして チームに関わるときは

  141. すべては Atom から なります 実際 どう作れば? 押し付けるのではなく

  142. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。 実践に至る道筋を設計しよう

  143. やってみせ、言って聞かせて、 させてみせ、 ほめてやらねば、人は動かじ。 話し合い、耳を傾け、承認し、 任せてやらねば、人は育たず。 やっている、姿を感謝で見守って、 信頼せねば、人は実らず。 山本五十六

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