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

Code Generatorを作ってコンポーネントを自動生成しよう 2019/10/04 Gotanda.js 株式会社Cluex 柴山健吾

自己紹介 • 柴山健吾 • 株式会社Cluitグループの株式会社Cluex • Webグループ • バックエンドもフロントもやります •
好きな言語 ◦ TypeScript, Kotlin • Twitter ◦ @shikeapp0909

背景 • 新規プロダクトの立ち上げに際して、ディレクトリ構成含めてコンポーネント設計について議論した • チーム内にAtomic Design経験者がいなかったが、 Atoms, Molecules, Organismsみたいな粒度で分類分けして管理したい
• あまり厳密にしすぎずLv1, Lv2, Lv3くらいのゆるさで十分ではないかという結論に至った • Storybookも導入し、もちろんテストもちゃんとやるので、それも含めたディレクトリ構成どうするかを考えた

• DMMさんのこの記事に感銘を受けた ◦ DMM動画サービスの問題を解決しようとしている話（コンポーネント編） ◦ https://inside.dmm.com/entry/2018/07/12/components • テストもStorybookもコンポーネントと1 : 1の関係になるので、
同じディレクト内に収めるのはとてもGood • さらにそのディレクトリごと自動生成するというのが非常にGood • ということで分類とコンポーネント名を渡すとコンポーネントを自動生成するCLIを作ることに背景

最終的なディレクトリ構成

CLIを作っていく！ • 言語 ◦ Node.js • 使用ライブラリ ◦ inquirer（https://github.com/SBoudrias/Inquirer.js） ▪
対話形式でのコマンドラインを作成するためのライブラリ ◦ mustache（https://github.com/janl/mustache.js/） ▪ テンプレート ◦ signale（https://github.com/klaussinani/signale） ▪ オシャレなログを出力できる

InquirerはCLIでよく見るプロンプトを作成するやつ

signaleはスタイルやアイコンつきのログ出力するやつ

実際のコード

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

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

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

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

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

shike

More Decks by shike

Other Decks in Programming

Featured

Transcript

Code Generatorを作ってコンポーネントを自動生成しよう 2019/10/04 Gotanda.js 株式会社Cluex 柴山健吾

自己紹介 • 柴山健吾 • 株式会社Cluitグループの株式会社Cluex • Webグループ • バックエンドもフロントもやります •

背景 • 新規プロダクトの立ち上げに際して、ディレクトリ構成含めてコンポーネント設計について議論した • チーム内にAtomic Design経験者がいなかったが、 Atoms, Molecules, Organismsみたいな粒度で分類分けして管理したい

• DMMさんのこの記事に感銘を受けた ◦ DMM動画サービスの問題を解決しようとしている話（コンポーネント編） ◦ https://inside.dmm.com/entry/2018/07/12/components • テストもStorybookもコンポーネントと1 : 1の関係になるので、