Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

nrs

July 10, 2019
Tweet

More Decks by nrs

Other Decks in Programming

Transcript

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

    View full-size slide



  2. Name{{name}}
    Job{{job}}
    Company{{company}}
    Twitter{{twitter}}


    <br/>import { Component, Vue } from 'vue-property-decorator';<br/>@Component<br/>export default class MyProfile extends Vue {<br/>public name: string = 'Masanobu Naruse';<br/>public jobs: string[]= ['Programmer', 'Developer Evangelist'];<br/>public company: string = 'GMO Internet, Inc.';<br/>public twitter: string = '@nrslib';<br/>public get job(): string {<br/>return this.jobs.join(', ');<br/>}<br/>}<br/>

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 新規プロジェクト
    立ち上げ

    View full-size slide

  6. 時代は Vue だよ!

    View full-size slide

  7. jQuery 入れていいですか?

    View full-size slide

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

    View full-size slide

  9. SPA やったことある勢

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 理解しやすいコードのコツ

    View full-size slide

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

    View full-size slide

  20. 時代はコンポーネント指向だ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. コンポーネント指向

    View full-size slide

  26. コンポーネント指向

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. これに従って
    作ろう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 実際
    どう作れば?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. © 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

    View full-size slide

  40. 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

    View full-size slide

  41. 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

    View full-size slide

  42. 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

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide

  45. 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

    View full-size slide

  46. 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

    View full-size slide

  47. HomePageTitle
    Placeholder
    Button
    SideMenuButton
    BreadCrumb >
    TableCell

    View full-size slide

  48. HomePageTitle
    Placeholder
    Button
    SideMenuButton
    BreadCrumb >
    TableCell

    View full-size slide

  49. HomePageTitle
    Placeholder
    Button
    SideMenuButton
    BreadCrumb >
    TableCell
    HomePageTitle

    View full-size slide

  50. HomePageTitle
    Placeholder
    Button
    SideMenuButton
    BreadCrumb >
    TableCell
    HomePageTitle

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. 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

    View full-size slide

  63. あとはページを担当分けして
    みんなでやってもらう
    Here is a sample.

    View full-size slide

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

    View full-size slide














  65. <br/>import { Component, Vue } from 'vue-property-decorator';<br/>...<br/>@Component({<br/>components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu },<br/>})<br/>export default class NormalTemplate extends Vue {}<br/>

    View full-size slide














  66. <br/>import { Component, Vue } from 'vue-property-decorator';<br/>...<br/>@Component({<br/>components: { GlobalMessage, FooterMenu, NotifyMessage, SideMenu, HeaderMenu },<br/>})<br/>export default class NormalTemplate extends Vue {}<br/>

    View full-size slide






  67. <br/>import { Component, Vue } from 'vue-property-decorator';<br/>import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue';<br/>@Component({<br/>components: { NormalTemplate },<br/>})<br/>export default class TopRootPage extends Vue {}<br/>

    View full-size slide




  68. {{$t("breadcrumb-home")}}
    {{$t("title")}}



    Masanobu Naruse


    Programmer / Developer Evangelist


    GMO Internet, Inc.


    UX UI / DevRel.


    @nrslib


    https://nrslib.com




    View full-size slide




  69. {{$t("breadcrumb-home")}}
    {{$t("title")}}



    Masanobu Naruse


    Programmer / Developer Evangelist


    GMO Internet, Inc.


    UX UI / DevRel.


    @nrslib


    https://nrslib.com




    View full-size slide









  70. <br/>import { Vue, Component, Prop } from 'vue-property-decorator';<br/>@Component({<br/>name: 'NormalLink'<br/>})<br/>export default class NormalLink extends Vue {<br/>@Prop() public to: any;<br/>@Prop() public href: string;<br/>}<br/>

    View full-size slide

  71. 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
    構成サンプル

    View full-size slide

  72. pages Top
    TopRootPage
    TopIndexPage
    Index
    Info Index
    Detail
    InfoRootPage
    InfoIndexPage
    InfoDetailPage
    TopRoute
    InfoRoute
    InfoData
    構成サンプル
    (ページ)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. タグとか
    どうします?

    View full-size slide

  76. 案ずることはない
    すべては Atom だ
    タグとか
    どうします?





    <br/>import { Component, Prop, Vue } from 'vue-property-decorator';<br/>@Component<br/>export default class Heading1 extends Vue {<br/>}<br/>

    View full-size slide

  77. タグは?

    View full-size slide

  78. タグは?
    位置調整などは
    コンポーネントにしない



    Test Button



    View full-size slide

  79. ボタンって更に
    分けられません?
    Search

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. どれが Atom で
    どれが Molecules で
    どこからが Organism?
    Atom を利用したら Molecules
    Molecules を利用してたら Organism
    意味ある塊なら Organism

    View full-size slide

  85. Organism を利用した
    Organism が出てきました!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. { ‘data’ : ‘a’}
    Copy
    { ‘data’ : ‘a’}
    Parent
    Component
    Child
    Component

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  101. { ‘data’ : ‘b’}
    Parent
    Component
    Child
    Component
    Change
    モデルバインド(v-model)も
    この動作をしている

    View full-size slide

  102. { ‘data’ : ‘b’}
    Parent
    Component
    Child
    Component
    Change
    Child
    Component
    Notify
    event
    Notify
    event
    親子が増えても一緒

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  105. 実践の場の提供

    View full-size slide




  106. Play Ground
    Dropdown
    Table
    Modal
    Tab
    Password
    Button
    Text
    FormElement & Validator
    datepicker
    L@@ding
    ProgressTracker
    Progress
    Checkbox
    Panel
    VariableInput
    RadioGroup
    Clipboard
    InnerWizard
    Tooltip
    ConfigurationTips
    Pager
    Anchor
    Capacity
    EmptyPanel
    Carousel
    Graph




    <br/>import { Component } from 'vue-property-decorator';<br/>import { BasePage } from '@lib/vue/BasePage';<br/>import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue';<br/>import LinkButton from 'front/atomic/Atoms/Button/LinkButton.vue';<br/>@Component({<br/>components: { LinkButton, NormalTemplate },<br/>})<br/>export default class ModulePlayGroundRootPage extends Vue {}<br/>

    View full-size slide




  107. Play Ground
    Dropdown
    Table
    Modal
    Tab
    Password
    Button
    Text
    FormElement & Validator
    datepicker
    L@@ding
    ProgressTracker
    Progress
    Checkbox
    Panel
    VariableInput
    RadioGroup
    Clipboard
    InnerWizard
    Tooltip
    ConfigurationTips
    Pager
    Anchor
    Capacity
    EmptyPanel
    Carousel
    Graph




    <br/>import { Component } from 'vue-property-decorator';<br/>import { BasePage } from '@lib/vue/BasePage';<br/>import NormalTemplate from 'front/atomic/Templates/Layer/NormalTemplate.vue';<br/>import LinkButton from 'front/atomic/Atoms/Button/LinkButton.vue';<br/>@Component({<br/>components: { LinkButton, NormalTemplate },<br/>})<br/>export default class ModulePlayGroundRootPage extends Vue {}<br/>
    実践的なコンポーネントを
    作ってもらって経験してもらう

    View full-size slide



  108. Add row
    Clear
    SwitchLoading
    ページング
    件数指定
    検索
    通常テーブル(全データ)


    PlayGround があれば
    コンポーネントの使い方もわかる

    View full-size slide

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

    View full-size slide

  110. 褒めるタイミング

    View full-size slide

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

    View full-size slide

  112. できました

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  117. Atomic Design に忠実であるべきか

    View full-size slide

  118. 重要なのは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide