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

E37b4344ef4bfd0fc4826c04971e54fb?s=47 nrs
December 07, 2019

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

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

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

E37b4344ef4bfd0fc4826c04971e54fb?s=128

nrs

December 07, 2019
Tweet

Transcript

  1. 2.

    2

  2. 3.

    3

  3. 4.

    4

  4. 5.

    5

  5. 6.
  6. 7.

    7

  7. 12.
  8. 15.

    15

  9. 16.

    16

  10. 17.

    17

  11. 19.
  12. 20.
  13. 36.

    36

  14. 40.
  15. 41.

    41

  16. 42.

    42

  17. 43.

    43

  18. 48.

    48

  19. 56.

    56 や っ て み せ 言 っ て 聞

    か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
  20. 57.

    57 や っ て み せ 言 っ て 聞

    か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
  21. 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
  22. 60.
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. 68.
  31. 76.
  32. 81.

    HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
  33. 82.

    HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
  34. 83.

    HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
  35. 84.

    HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder

    TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
  36. 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
  37. 88.
  38. 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>
  39. 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>
  40. 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>
  41. 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>
  42. 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>
  43. 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>
  44. 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>
  45. 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>
  46. 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>
  47. 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>
  48. 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>
  49. 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>
  50. 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>
  51. 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>
  52. 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>
  53. 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>
  54. 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>
  55. 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>
  56. 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>
  57. 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 構成サンプル
  58. 109.

    pages Top TopRootPage TopIndexPage Index Info Index Detail InfoRootPage InfoIndexPage

    InfoDetailPage TopRoute InfoRoute InfoData 構成サンプル (ページ) :
  59. 110.

    110 や っ て み せ 言 っ て 聞

    か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
  60. 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>
  61. 121.

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

    Molecules Molecules を利用してたら Organism 意味ある塊なら Organism
  62. 125.

    125 や っ て み せ 言 っ て 聞

    か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
  63. 134.

    Parent Component Child Component { ‘data’ : ‘b’} { ‘data’

    : ‘b’} Notify コンポーネント作りの 経験がないとやりがち
  64. 140.

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

    Component Notify event Notify event 親子が増えても一緒
  65. 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>
  66. 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> 実践的なコンポーネントを 作ってもらって経験してもらう
  67. 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 があれば コンポーネントの使い方もわかる
  68. 147.

    147 や っ て み せ 言 っ て 聞

    か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
  69. 154.
  70. 155.
  71. 156.

    156 や っ て み せ 言 っ て 聞

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