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
140
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
shike0909
0
130
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
2.1k
Reduxについて / Redux introduction and TODO example with Redux
shike0909
0
110
Other Decks in Programming
See All in Programming
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
CI改善もDatadogとともに
taumu
0
110
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Open source software: how to live long and go far
gaelvaroquaux
0
620
sappoRo.R #12 初心者セッション
kosugitti
0
230
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
最近のVS Codeで気になるニュース 2025/01
74th
1
250
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Featured
See All Featured
Statistics for Hackers
jakevdp
797
220k
How to train your dragon (web standard)
notwaldorf
90
5.8k
A Tale of Four Properties
chriscoyier
158
23k
Unsuck your backbone
ammeep
669
57k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How to Ace a Technical Interview
jacobian
276
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Agile that works and the tools we love
rasmusluckow
328
21k
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を使うとログをオシャレにできる
• 自動生成は正義