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
280
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
94
CI/CD実践入門! GitHub ActionsでCI/CD環境を作ってみよう!
shingen29
0
280
ユースケース駆動開発で自社プロダクトを作ってみた!
shingen29
1
7.1k
MDN Web Docsから学ぶ 公式ドキュメントを読むメリット
shingen29
0
860
PHP8をざっくり解説してみる
shingen29
0
310
最近のプロジェクトを振り返ってみる
shingen29
0
380
Style Guideとstylelintを使ってHTML/CSSを綺麗に書こう!
shingen29
2
840
Stripe CLIを触ってみた!
shingen29
1
240
Other Decks in Technology
See All in Technology
「どこにある?」の解決。生成AI(RAG)で効率化するガバメントクラウド運用
toru_kubota
2
430
評価の納得感を2段階高める「構造化フィードバック」
aloerina
1
200
Long journey of Continuous Delivery at Mercari
hisaharu
1
210
型システムを知りたい人のための型検査器作成入門
mame
15
3.8k
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
210
自分を理解するAI時代の準備 〜マイプロフィールMCPの実装〜
edo_m18
0
110
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
260
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
290
"SaaS is Dead" は本当か!? 生成AI時代の医療 Vertical SaaS のリアル
kakehashi
PRO
3
220
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
13
7.7k
從四件事帶你見識見識 事件驅動架構設計 (EDA)
line_developers_tw
PRO
0
110
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.2k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Facilitating Awesome Meetings
lara
54
6.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
GitHub's CSS Performance
jonrohan
1031
460k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
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ʹΠϕϯτ͠·͢ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ