Code Generatorを作ってコンポーネントを自動生成しよう / Let's make code generator

Transcript

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