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. 実際のコード

10. None
11. None
12. None
13. None

14. package.jsonのscriptに追加 作成したファイルをnodeで実行するようにpackage.jsonのscriptに定義 "component:generate": "node ./cli/generateComponent"

15. None

16. コンポーネントの作成が捗る！

17. まとめ • CLIを作るにはinquirerを使うと簡単 • Code Generatorを作るにはinquirer + mustacheが便利 • さらにsignaleを使うとログをオシャレにできる

    • 自動生成は正義