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

D1d987836a880f8c29d1f63c88b92f80?s=47 shike
October 04, 2019

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

D1d987836a880f8c29d1f63c88b92f80?s=128

shike

October 04, 2019
Tweet

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を使うとログをオシャレにできる

    • 自動生成は正義