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
サクッと簡単!お手軽 Scaffold
Search
KeitaroOkamura
March 08, 2019
Technology
1
290
サクッと簡単!お手軽 Scaffold
KeitaroOkamura
March 08, 2019
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
290
ヤギでもわかるソフトウェアテスト
keitarookamura
0
130
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
300
ヤギでもわかるGit入門
keitarookamura
1
250
ユースケースから考えるユーザビリティ
keitarookamura
1
210
自社サイトをPWA化した話
keitarookamura
0
120
CSS Animations vs WAAPI
keitarookamura
0
510
マイクロインタラクションから考えるアニメーション
keitarookamura
1
270
Vue.js+AtomicDesign
keitarookamura
2
2.7k
Other Decks in Technology
See All in Technology
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
230
サプライチェーン攻撃に学ぶModuleの仕組みと セキュリティ対策
kuro_kurorrr
3
790
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
310
そのグラフに「魂」は宿っているか? ~生成AI全盛期におけるデータ可視化手法とライブラリ比較~
negi111111
2
830
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AIコーディングとエンジニアリングの現在地 / A Snapshot of AI Coding and Engineering(Sept. 2025)
ar_tama
0
160
新卒QAエンジニアの成長戦略
qatonchan
0
300
DEFCON CHV CTF 2025 Write-up
bata_24
0
190
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
KMP の Swift export
kokihirokawa
0
110
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
130
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
Featured
See All Featured
Visualization
eitanlees
148
16k
Unsuck your backbone
ammeep
671
58k
How to Think Like a Performance Engineer
csswizardry
27
2k
Building an army of robots
kneath
306
46k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
880
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
BBQ
matthewcrist
89
9.8k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
αΫοͱ؆୯ʂ͓खܰ4DBGGPME ( & & , 4 8 ) 0
% 3 * / , * / ' 6 , 6 0 , " ' 3 0 / 5 & / % & % * 5 * 0 /
‣ ,FJUBSP0LBNVSB ‣ ΧϥϏφςΫϊϩδʔגࣜձࣾ ‣ ϑϩϯτΤϯυΤϯδχΞ ‣ !LBSBBHFLFJUBSPP ࣗݾհ
‣ ΞϓϦέʔγϣϯͷܗ ‣ ྫ͑ɺ3VCZPO3BJMTʹʮ4DBGGPMEʯͱݺΕΔܗΛࣗಈ ੜ͢Δػೳ͕͋Δ ‣ "OHVMBS$-*ͩͱʮOHHFOFSBUFʯίϚϯυҰൃͰܗΛੜͰ ͖Δ 4DBGGPMEͱʁ
‣ 7VF$-*ͱ͍͏ϓϩδΣΫτͷܗΛੜ͢Δ։ൃπʔϧ͋Δ ‣ (FOFSBUPSͱ͍͏ػೳ͕͋ΓɺطଘςϯϓϨʔτΛͬͯϢʔβʔ ͚ʹΧελϚΠζՄೳ ‣ IUUQTHJUIVCDPNWVFKTUFNQMBUFT ‣ ͭ·ΓɺϓϩδΣΫτݻ༗ͷίʔυੜͰ͖Δ 7VFKTͰʁ
‣ ϓϩδΣΫτͷઃܭΛόγοͱܾΊΕͳ͍ɻɻɻ ‣ ࠓޙɺॊೈʹมԽ͍ͯ͘͠Մೳੑ͋Γ ‣ ͬͱؾܰʹ4DBGGPMEJOH͍ͨ͠ʂ ͔͠͠ɻɻɻ $ vue generate
ίϚϯυཉ͍͠
ઌि͙Β͍ ʮԿ͔ྑ͍ͷ͋Γ·͔͢ʔʁʯ
ઌि͙Β͍ ʮ)ZHFO͍͍ͧʙʯ
ѹతײँͬɾɾɾʂ
IUUQXXXIZHFOJP
)ZHFO͕Ͱ͖Δ͜ͱ ‣ γϯϓϧ͔ͭߴͳίʔυδΣωϨʔλʔ ‣ ରܗࣜͰϑΝΠϧΛ࡞Ͱ͖Δʂ ‣ طଘϑΝΠϧʹίʔυΛೖͰ͖Δʂ ‣ ࣗ༝ʹ$-*ʹΦϓγϣϯΛͤͯɺςϯϓϨʔτͰͦͷ Λల։Ͱ͖Δʂ
‣ ΧελϚΠζແݶେʂ
Γ͍ͨ͜ͱ ‣ ίϯϙʔωϯτͷ4DBGGPMEΛίϚϯυ͔Βੜ͍ͨ͠ʂ ‣ ੜϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͍͢͜͠ͱ ‣ ίϯϙʔωϯτϑΝΠϧ WVF ͕࡞ΒΕΔ ‣
ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ ‣ "UPNJD%FTJHOͷཻ͕1BHFTͷ߹ɺϧʔςΟϯά͕Ճ͞ΕΔ
Γ͍ͨ͜ͱ ‣ ίϯϙʔωϯτͷ4DBGGPMEΛίϚϯυ͔Βੜ͍ͨ͠ʂ ‣ ੜϩδοΫςϯϓϨʔτ͕ϝϯςφϯε͍͢͜͠ͱ ‣ ίϯϙʔωϯτϑΝΠϧ WVF ͕࡞ΒΕΔ ‣
ςετʢ+FTUʣϑΝΠϧ͕࡞ΒΕΔ ‣ 4UPSZCPPLͷϑΝΠϧ͕࡞ΒΕΔ ‣ "UPNJD%FTJHOͷཻ͕1BHFTͷ߹ɺϧʔςΟϯά͕Ճ͞ΕΔ )ZHFOͳΒ؆୯ʹͰ͖Δʂ
5FNQMBUF --- to: "src/components/<%= category %>/<%= name %>/index.vue" --- <template>
<div/> </template> <script lang="ts"> import Vue from “vue"; export default Vue.extend({ name: "<%= name %>" }); </script> ‣ ςϯϓϨʔτFKTܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧ
5FNQMBUF --- to: "src/components/<%= category %>/<%= name %>/index.vue" --- <template>
<div/> </template> <script lang="ts"> import Vue from “vue"; export default Vue.extend({ name: "<%= name %>" }); </script> ‣ ςϯϓϨʔτFKTܗࣜͰهड़ɹྫɿίϯϙʔωϯτϑΝΠϧ IFBE෦ʢZBNMܗࣜʣ CPEZ෦ʢFKTܗࣜʣ
1SPNQU ‣ ίϚϯυΛ࣮ߦ͢Δͱɺྫ͑ʮίϯϙʔωϯτ໊Կʁʯͱ͔ ͕ରతʹग़͖ͯ·͢ɻͦͷରతͳ༰ΛಠࣗʹΧελϚΠζ ͢Δ͜ͱ͕Ͱ͖Δ $ hygen new component ✔
ίϯϙʔωϯτ໊: · TestButton ? ίϯϙʔωϯτཻ: … ✔ atoms ✔ molecules ✔ organisms ✔ pages
1SPNQU ‣ QSPNQUKTʹྻܗࣜͰJORVJSFSͷϑΥʔϚοτΛॻ͖·͢ ‣ όϦσʔγϣϯͰϢʔβʔͷޡͬͨೖྗΛ͙͜ͱՄೳ module.exports = [ { type:
"input", name: "name", message: "ίϯϙʔωϯτ໊:", validate(value) { if (!value.length) { return "ίϯϙʔωϯτ໊Λೖྗ͍ͯͩ͘͠͞ɻ"; } return true; } },
)FMQFST ‣ DPOpHϑΝΠϧͷIZHFOKTʹϞδϡʔϧΛಡΈࠐΉͱɺςϯϓ ϨʔτͰͦͷϞδϡʔϧ͕͑Δ module.exports = { helpers: { fs:
require("fs") } };
)FMQFST ‣ ྫ͑ɺ/PEFKTͷGTϞδϡʔϧΛ͑ɺϑΝΠϧૢ࡞͕Մೳ ‣ FYQPSUͨ͠ϑΝΠϧΛҰׅͰಡΈ͜Έɺ·ͱΊͯFYQPSU͢ΔΑ ͏ͳϑΝΠϧ࡞Ͱ͖Δ // components/atoms/index.ts import TestButton
from “./TestButton/index.vue"; import TestIcon from "./TestIcon/index.vue"; export { TestButton, TestIcon };
$ ͕࣌ؒ͠༨͍ͬͯͨΒɺdemo ͠·͢
‣ )ZHFO͍͍ͧ ‣ पลπʔϧͬͺΓେࣄɻ໘ͳ͜ͱࣗಈԽ͢Δ ‣ ίϯϙʔωϯτ໊ͱ͔ελΠϧΨΠυʹԊͬͨίʔυ୲อͰ͖Δ ‣ ΧελϚΠζ࣍ୈͰແݶͷՄೳੑ✨ ࠓͷ·ͱΊ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ