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 code generator
Search
shike
October 04, 2019
Programming
1
2.1k
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
130
Nuxt + TypeScriptで SPAを作る / Build SPA with Nuxt and TypeScript
shike0909
0
120
Lighthouseを使った認証必須のGraphQL API / GraphQL API authentication with Lighthouse
shike0909
0
1.9k
Reduxについて / Redux introduction and TODO example with Redux
shike0909
0
89
Other Decks in Programming
See All in Programming
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
5
710
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
310
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
500
Ruby GitHub Packages
bkuhlmann
0
620
エンターテイメント業界で利用されるAWS
demuyan
0
200
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
PostmanでAPIの動作確認が楽になった話
h455h1
0
140
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
HUIT新歓2024「競技プログラミング、やってみませんか?」
slephy2784
1
250
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
170
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
154
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
What the flash - Photography Introduction
edds
64
11k
The Pragmatic Product Professional
lauravandoore
24
5.8k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
Faster Mobile Websites
deanohume
297
30k
In The Pink: A Labor of Love
frogandcode
138
21k
Scaling GitHub
holman
457
140k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
The Language of Interfaces
destraynor
151
23k
How to Ace a Technical Interview
jacobian
272
22k
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を使うとログをオシャレにできる
• 自動生成は正義