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
250
サクッと簡単!お手軽 Scaffold
KeitaroOkamura
March 08, 2019
Tweet
Share
More Decks by KeitaroOkamura
See All by KeitaroOkamura
Suspenseのユースケースを探る
keitarookamura
1
240
ヤギでもわかるソフトウェアテスト
keitarookamura
0
110
ヤギでもわかるオブジェクト指向UIデザイン
keitarookamura
3
260
ヤギでもわかるGit入門
keitarookamura
1
220
ユースケースから考えるユーザビリティ
keitarookamura
1
160
自社サイトをPWA化した話
keitarookamura
0
97
CSS Animations vs WAAPI
keitarookamura
0
450
マイクロインタラクションから考えるアニメーション
keitarookamura
1
240
Vue.js+AtomicDesign
keitarookamura
2
2.6k
Other Decks in Technology
See All in Technology
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
190
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
200
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
スタートアップにおける組織設計とスクラムの長期戦略 / Scrum Fest Kanazawa 2024
yoshikiiida
13
3.6k
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
How to Think Like a Performance Engineer
csswizardry
4
590
MySQLのロックの種類とその競合
yoku0825
6
1.6k
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Featured
See All Featured
Thoughts on Productivity
jonyablonski
64
4.1k
Adopting Sorbet at Scale
ufuk
71
8.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
The World Runs on Bad Software
bkeepers
PRO
63
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
A Tale of Four Properties
chriscoyier
155
22k
Writing Fast Ruby
sferik
623
60k
Making Projects Easy
brettharned
111
5.7k
BBQ
matthewcrist
82
9k
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͍͍ͧ ‣ पลπʔϧͬͺΓେࣄɻ໘ͳ͜ͱࣗಈԽ͢Δ ‣ ίϯϙʔωϯτ໊ͱ͔ελΠϧΨΠυʹԊͬͨίʔυ୲อͰ͖Δ ‣ ΧελϚΠζ࣍ୈͰແݶͷՄೳੑ✨ ࠓͷ·ͱΊ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ