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
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
新世界の理解
koriym
0
140
パスタの技術
yusukebe
1
400
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
210
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
720
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
decksh - a little language for decks
ajstarks
4
21k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
180
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Producing Creativity
orderedlist
PRO
347
40k
Site-Speed That Sticks
csswizardry
10
790
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
The Language of Interfaces
destraynor
160
25k
RailsConf 2023
tenderlove
30
1.2k
Thoughts on Productivity
jonyablonski
69
4.8k
Building Applications with DynamoDB
mza
96
6.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
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を使うとログをオシャレにできる
• 自動生成は正義