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
86
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
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
370
Log Analytics を使った実際の運用 - Sansan Data Hub での取り組み
sansantech
PRO
0
110
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
2
660
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.8k
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
210
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
340
完璧を捨てろ! “攻め”のQAがもたらすスピードと革新/20250306 Hiroki Hachisuka
shift_evolve
0
100
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.6k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
350
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
220
Featured
See All Featured
Making Projects Easy
brettharned
116
6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Automating Front-end Workflow
addyosmani
1369
200k
Designing Experiences People Love
moore
140
23k
Building Adaptive Systems
keathley
40
2.4k
Code Review Best Practice
trishagee
67
18k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
The Language of Interfaces
destraynor
156
24k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
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ʹΠϕϯτ͠·͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ