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

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. まとめ
7. 新規プロジェクト 立ち上げ
8. 時代は Vue だよ！
12. jQuery 入れていいですか？
13. 当時のチームのスキルマップ
14. SPA やったことある勢
15. SPA やったことある勢 me
16. SPA やったことある勢 jQuery 勢 me
17. SPA やったことある勢 jQuery 勢 me
18. SPA やったことある勢 jQuery 勢 me jQuery メインになりそう
20. 無意味に重複したコード 読み込まないと目的が分からないコード 実装者以外解読が難しいコード
21. 無意味に重複したコード 読み込まないと目的が分からないコード 実装者以外解読が難しいコード 排除 したい
22. 重複したコードを減らすコツ
23. 重複したコードを減らすコツ モジュール性を高めること
25. 理解しやすいコードのコツ
26. 理解しやすいコードのコツ 理解の範囲を狭めること
28. 時代はコンポーネント指向だ
29. コンポーネント指向で 作ってください
30. コンポーネント指向で 作ってください はい わかりました
31. コンポーネント指向で 作ってください はい わかりました うまくいくとは思えない
32. コンポーネント指向を 根付かせるために
37. コンポーネント指向
38. コンポーネント指向
39. これに従って 作ろう コンポーネント指向
40. これに従って 作ろう イメージ つかないなぁ コンポーネント指向
42. これに従って 作ろう
43. これに従って 作ろう わかる 気がする
44. Agenda 1. Vue.js と Atomic Design の関係 2. 実践 3. まとめ
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. その間にサンプル作成
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 を コンポジションしていい そもそも３つのレイヤーで おさまるわけがない 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. 無意味に重複したコード 読み込まないと目的が分からないコード 実装者以外解読が難しいコード 排除 したい
140. テックリードとして チームに関わるときは
141. すべては Atom から なります 実際 どう作れば？ 押し付けるのではなく
142. やってみせ、 言って聞かせて、 させてみせ、 ほめてやらねば、 人は動かじ。 実践に至る道筋を設計しよう
143. やってみせ、言って聞かせて、 させてみせ、 ほめてやらねば、人は動かじ。 話し合い、耳を傾け、承認し、 任せてやらねば、人は育たず。 やっている、姿を感謝で見守って、 信頼せねば、人は実らず。 山本五十六
144. Auther Masanobu Naruse HomePage https://nrslib.com Twitter @nrslib