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
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
Unity Android XR入門
sakutama_11
0
140
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
チームリードになって変わったこと
isaka1022
0
190
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Writing documentation can be fun with plugin system
okuramasafumi
0
120
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
YesSQL, Process and Tooling at Scale
rocio
171
14k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Optimizing for Happiness
mojombo
376
70k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Designing Experiences People Love
moore
139
23k
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を使うとログをオシャレにできる
• 自動生成は正義