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
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
140
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
390
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
The XZ Backdoor Story
fr0gger
0
3.6k
LLVM/ASMを使った有限体の高速実装
herumi
0
120
事前準備が肝!AI活用のための業務改革
layerx
PRO
1
380
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
227
52k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Docker and Python
trallard
39
3k
Design by the Numbers
sachag
277
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Making Projects Easy
brettharned
113
5.8k
A Tale of Four Properties
chriscoyier
155
22k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
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͍͍ͧ ‣ पลπʔϧͬͺΓେࣄɻ໘ͳ͜ͱࣗಈԽ͢Δ ‣ ίϯϙʔωϯτ໊ͱ͔ελΠϧΨΠυʹԊͬͨίʔυ୲อͰ͖Δ ‣ ΧελϚΠζ࣍ୈͰແݶͷՄೳੑ✨ ࠓͷ·ͱΊ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ