Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Code Generatorを作ってコンポーネントを自動生成しよう / Let's make ...
Search
shike
October 04, 2019
Programming
1
2.2k
Code Generatorを作ってコンポーネントを自動生成しよう / Let's make code generator
shike
October 04, 2019
Tweet
Share
More Decks by shike
See All by shike
TypeScript + GASでAPIを作る / Build API with TypeScript and GAS
shike0909
0
150
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
shike0909
0
140
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
2.2k
Reduxについて / Redux introduction and TODO example with Redux
shike0909
0
120
Other Decks in Programming
See All in Programming
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
410
JetBrainsのAI機能の紹介 #jjug
yusuke
0
190
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
960
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
210
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
7
1.9k
Reactの歴史を振り返る
tutinoko
1
170
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
decksh - a little language for decks
ajstarks
4
21k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
230
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
KATA
mclloyd
31
14k
Facilitating Awesome Meetings
lara
54
6.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
430
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Git: the NoSQL Database
bkeepers
PRO
431
65k
How to Ace a Technical Interview
jacobian
278
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
Transcript
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はスタイルやアイコンつきのログ出力するやつ
実際のコード
None
None
None
None
package.jsonのscriptに追加 作成したファイルをnodeで実行するようにpackage.jsonのscriptに定義 "component:generate": "node ./cli/generateComponent"
None
コンポーネントの作成が捗る!
まとめ • CLIを作るにはinquirerを使うと簡単 • Code Generatorを作るにはinquirer + mustacheが便利 • さらにsignaleを使うとログをオシャレにできる
• 自動生成は正義