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
20180831_宮崎_沖縄JSナイトvol2.pdf
Search
大塚真言
August 31, 2018
Technology
0
250
20180831_宮崎_沖縄JSナイトvol2.pdf
大塚真言
August 31, 2018
Tweet
Share
More Decks by 大塚真言
See All by 大塚真言
自社プロダクトを作ってみた.pdf
shingen29
0
260
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
85
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
250
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
6.6k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
840
PHP8をざっくり解説してみる
shingen29
0
300
最近のプロジェクトを振り返ってみる
shingen29
0
360
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
800
Stripe CLIを触ってみた!
shingen29
1
220
Other Decks in Technology
See All in Technology
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
160
Охота на косуль у древних
ashapiro
0
110
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
300
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
JavaにおけるNull非許容性
skrb
2
2.6k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
160
What's new in Go 1.24?
ciarana
1
110
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Docker and Python
trallard
44
3.3k
Documentation Writing (for coders)
carmenintech
67
4.6k
Agile that works and the tools we love
rasmusluckow
328
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Scaling GitHub
holman
459
140k
The Language of Interfaces
destraynor
156
24k
Thoughts on Productivity
jonyablonski
69
4.5k
Transcript
։ൃΛॿ͚Δ Vue.jsͷศརͳϥΠϒϥϦհ 2018/08/31 ٶ࡚×ԭೄ×ࢁܗ JSφΠτ ʂ ϑϦʔϥϯεWebΤϯδχΞ େ௩ਅݴ @mametra
<جຊใ> - େ௩ਅݴʢ໊͋ͩɿ͠Μ͛Μʣ - ϑϦʔϥϯεWebΤϯδχΞ - ౦ژੜ·Εҭͪɺ2017ΑΓٶ࡚ʹҠॅ - झຯΩϟϯϓͱϑΣεɺ࠷ۙαʔϑΟϯ͡Ί·ͨ͠ <ܦྺ>
- ৽ଔͰ࢜௨ʹೖࣾ͠3΄ͲγεςϜΤϯδχΞΛܦݧ - גࣜձࣾαʔνϑΟʔϧυ FAAVOࣄۀ෦ ʹస৬ - Ҭ×ΫϥυϑΝϯσΟϯά FAAVOͰWebΤϯδχΞͱͯ͠ࢀը ͠ɺPHPΛ৮Γ࢝ΊΔɻ - 3΄Ͳอकӡ༻Λܦݧ͠ɺ20183݄͔ΒϑϦʔϥϯεͱͯ͠׆ಈத <εΩϧ> - PHP, Laravel, Vue.js, AWS ࣗݾհ
ʻΞδΣϯμʼ Vue.jsͱʁ ։ൃΛָʹ͢ΔVue.jsͷجຊతͳϥΠϒϥϦΛհ ʻରऀʼ Vue.jsΛ৮ͬͯΈ͍ͨਓɺͪΐͬͱ৮ͬͯΈͨਓ ࠓ͢͜ͱ
Vue.jsͱʁ
1. ϓϩάϨογϒ(ਐาతɺલਐతʣͳJavaScriptϑϨʔϜ ϫʔΫ 2. ͍ͭͷJavaScriptͰ࢝ΊΒΕͯ͠Έ͘͢ɺֶशί ετ͕͍ɻ 3. ެࣜυΩϡϝϯτ͕ຊޠରԠ 4. αʔόαΠυ͕PHPͷ߹ɺLaravelͰඪ४ࡌͷͨΊ૬
ੑ͕ྑ͍ Vue.jsʢϏϡʔυοτδΣΠΤεʣ ͱʁ
Vue.jsͷϥΠϒϥϦΛհ
axiosʢΞΫγΦεʣ HTTP௨৴Λ؆୯ʹߦ͏͜ͱ͕Ͱ͖ΔJavascriptϥΠϒϥϦ Vue.jsͷϥΠϒϥϦͰͳ͍͕ɺVue.jsެࣜΨΠυʹهࡌ͕͋Δ͘Β͍ελϯμʔυ ※ https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html HTTP௨৴ ʙϥΠϒϥϦհᶃʙ
InterceptorsͰڞ௨ॲཧ ɾϦΫΤετͷAuthorizationϔομʔʹΞΫηετʔΫϯΛ༩͍ͨ͠ ɾΤϥʔൃੜ࣌ʹಛఆͷॲཧΛ͍ͨ͠ HTTP௨৴ ʙϥΠϒϥϦհᶃʙ
Bootstrap-vue ɾhttps://bootstrap-vue.js.org/ ɾVue.jsͰBootstrapΛ͍͘͢͢Δͭ ɾBootstrap4ʹରԠࡁΈ ɾΧελϜίϯϙʔωϯτΛݺͼग़ͯ͠͏ CSS ʙϥΠϒϥϦհᶄʙ
ͲΕ͘Β͍͍͘͢ͳͬͨʁ ɾߦ1/3ఔʹݮΔ ɾͨͩ͠ɺΧελϜίϯϙʔωϯτ͕૿͑͗͢Δͱίʔυ͔ΒDOMߏΛ ͍ʹ͘͘ͳΓɺ͋ͱ͔ΒσβΠϯΛมߋ͠ʹ͘͘ͳΔ ɾ࠷ݶͷݟӫ͑ͰαʔϏεΛ࡞Δ߹ੵۃతʹͬͯྑ͍ CSS ʙϥΠϒϥϦհᶄʙ Bootstrap-vueະ༻
Vee-Validate ɾinputλάͷ v-validate σΟϨΫςΟϒʹόϦσʔγϣϯϧʔϧΛه ࡌ͢Δ͚ͩ ɾσϑΥϧτͷΤϥʔϝοηʔδӳޠ͕ͩɺຊޠԽ؆୯ όϦσʔγϣϯ ʙϥΠϒϥϦհᶅʙ
ΧελϜόϦσʔγϣϯ ɾValidator Ϋϥεͷ extend() ͰՃͰ͖Δ όϦσʔγϣϯ ʙϥΠϒϥϦհᶅʙ
Vue.jsʹ։ൃΛָʹ͢ΔϥΠϒϥϦ͕ଟ͘ଘࡏ͢Δ ɾHTTP௨৴ʢaxiosʣ ɾCSSʢBootstrap-vueʣ ɾόϦσʔγϣϯʢvee-validateʣ ɹ˞ଞʹଟ͋Γ·͢ Vue.jsΛͬͯεϐʔυײͷ͋Δ։ൃΛ͍͖ͯ͠·͠ΐ͏ʂʂ ͪͳΈʹͰ͕͢ɺɺɺ ࣍ճͷJSφΠτͷൃදऀେืू͍ͯ͠·͢ʂʂʂ ·ͱΊ
9݄10ʹΠϕϯτ͠·͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ