Slide 1
Slide 1 text
Code Generatorを作って
コンポーネントを自動生成しよう
2019/10/04 Gotanda.js
株式会社Cluex 柴山健吾
Slide 2
Slide 2 text
自己紹介
● 柴山健吾
● 株式会社Cluitグループの株式会社Cluex
● Webグループ
● バックエンドもフロントもやります
● 好きな言語
○ TypeScript, Kotlin
● Twitter
○ @shikeapp0909
Slide 3
Slide 3 text
背景
● 新規プロダクトの立ち上げに際して、ディレクトリ構成含めて
コンポーネント設計について議論した
● チーム内にAtomic Design経験者がいなかったが、
Atoms, Molecules, Organismsみたいな粒度で分類分けして管理したい
● あまり厳密にしすぎずLv1, Lv2, Lv3くらいのゆるさで
十分ではないかという結論に至った
● Storybookも導入し、もちろんテストもちゃんとやるので、
それも含めたディレクトリ構成どうするかを考えた
Slide 4
Slide 4 text
● DMMさんのこの記事に感銘を受けた
○ DMM動画サービスの問題を解決しようとしている話（コンポーネント編）
○ https://inside.dmm.com/entry/2018/07/12/components
● テストもStorybookもコンポーネントと1 : 1の関係になるので、
同じディレクト内に収めるのはとてもGood
● さらにそのディレクトリごと自動生成するというのが非常にGood
● ということで分類とコンポーネント名を渡すと
コンポーネントを自動生成するCLIを作ることに
背景
Slide 5
Slide 5 text
最終的なディレクトリ構成
Slide 6
Slide 6 text
CLIを作っていく！
● 言語
○ Node.js
● 使用ライブラリ
○ inquirer（https://github.com/SBoudrias/Inquirer.js）
■ 対話形式でのコマンドラインを作成するためのライブラリ
○ mustache（https://github.com/janl/mustache.js/）
■ テンプレート
○ signale（https://github.com/klaussinani/signale）
■ オシャレなログを出力できる
Slide 7
Slide 7 text
InquirerはCLIでよく見るプロンプトを作成するやつ
Slide 8
Slide 8 text
signaleはスタイルやアイコンつきのログ出力するやつ
Slide 9
Slide 9 text
実際のコード
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
package.jsonのscriptに追加
作成したファイルをnodeで実行するようにpackage.jsonのscriptに定義
"component:generate": "node ./cli/generateComponent"
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
コンポーネントの作成が捗る！
Slide 17
Slide 17 text
まとめ
● CLIを作るにはinquirerを使うと簡単
● Code Generatorを作るにはinquirer + mustacheが便利
● さらにsignaleを使うとログをオシャレにできる
● 自動生成は正義