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
260
サクッと簡単!お手軽 Scaffold
KeitaroOkamura
March 08, 2019
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
250
ヤギでもわかるソフトウェアテスト
keitarookamura
0
110
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
270
ヤギでもわかるGit入門
keitarookamura
1
220
ユースケースから考えるユーザビリティ
keitarookamura
1
170
自社サイトをPWA化した話
keitarookamura
0
100
CSS Animations vs WAAPI
keitarookamura
0
460
マイクロインタラクションから考えるアニメーション
keitarookamura
1
240
Vue.js+AtomicDesign
keitarookamura
2
2.6k
Other Decks in Technology
See All in Technology
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
110
スプリントゴールにチームの状態も設定する背景とその効果 / Team state in sprint goals why and impact
kakehashi
2
100
Datachain会社紹介資料(2024年11月) / Company Deck
datachain
3
16k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
4 Signs Your Business is Dying
shpigford
180
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Faster Mobile Websites
deanohume
304
30k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Ruby is Unlike a Banana
tanoku
96
11k
Being A Developer After 40
akosma
86
590k
Designing for humans not robots
tammielis
249
25k
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͍͍ͧ ‣ पลπʔϧͬͺΓେࣄɻ໘ͳ͜ͱࣗಈԽ͢Δ ‣ ίϯϙʔωϯτ໊ͱ͔ελΠϧΨΠυʹԊͬͨίʔυ୲อͰ͖Δ ‣ ΧελϚΠζ࣍ୈͰແݶͷՄೳੑ✨ ࠓͷ·ͱΊ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ