デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture

フロントエンドカンファレンス北海道でお話ししたスライドです

Proposal: https://fortee.jp/frontend-conf-hokkaido-2024/proposal/ebd98e0a-241c-4443-aa98-300af113b40d

# URL
YouTube: https://www.youtube.com/c/narusemi
HomePage: https://nrslib.com
Twitter: https://twitter.com/nrslib
Instagram: https://www.instagram.com/nrslib/

Transcript

43. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
44. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
71. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
108. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
114. <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>
115. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ
121. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ 話 し 合 い 耳 を 傾 け 承 認 し 任 せ て や ら ね ば 人 は 育 た ず や っ て い る 姿 を 感 謝 で 見 守 っ て 信 頼 せ ね ば 人 は 実 ら ず
125. や っ て み せ 言 っ て 聞 か せ て さ せ て み せ ほ め て や ら ね ば 人 は 動 か じ 話 し 合 い 耳 を 傾 け 承 認 し 任 せ て や ら ね ば 人 は 育 た ず や っ て い る 姿 を 感 謝 で 見 守 っ て 信 頼 せ ね ば 人 は 実 ら ず