あえてPHPerに勧めるVue.js(PHP勉強会）/Invitation to start Vue.js dare to PHPer

あえてPHPerにすすめる Vue.js入門 גࣜձࣾΏΊΈɹՌ෺Ϧϯ@FruitRiin 2019/03/27 PHPษڧձ@౦ژ #136

自己紹介 - 果物リン • FruitRiin@Twitter, Github, Qiita • גࣜձࣾΏΊΈ •
ϑϩϯτΤϯδχΞʢೖࣾ̎ϲ݄ʂʣ • ڈ೥·Ͱ໿̏೥΄ͲPHPer • JS͕޷͖ɻVue.js͸͍͍ͧʂ • JS΋Vue.js΋ΏΔ;Θײ͕PHPʹ௨͡Δ

͋͑ͯPHPerʹ͢͢ΊΔ Vue.jsೖ໳

お品書き • ͋ͳͨʹͱͬͯͷ࠷ॳͷPHPܦݧ͸ʁ • ͳͥʮVue.jsʯͳͷ͔ • Vueͷ࢝Ίํ LaravelฤʢμΠδΣετʣ • Vue.js
جຊͷSyntax঺հʢϥΠϒίʔσΟϯάʣ

͋ͳͨʹͱͬͯ ࠷ॳͷPHP͸ʁ

私の最初のPHPとの出会い • ໨తΛୡ੒͢Δͷʹͪΐ͏Ͳྑ͔ͬͨ • echo "<html>"; • JS͸ยखؒʹॻ͘΋ͷ

զʑ΋UXΛఏڙ͍ͯͨ͠ʂ

few years later...

２０１９年におけるPHP • ॏްͳϑϨʔϜϫʔΫʹ৐͔ͬΔͷ͕τϨϯυ • ओͳ࢓ࣄͦͷ̍ ʹ APIαʔόʔ • ajaxͰݺ͹ΕͯjsonΛฦ͢ •
ओͳ࢓ࣄͦͷ̎ ʹ HTMLΛฦ͢ • Blade, Twig, Jade

2019೥ʹ͓͚ΔWeb UX

ͱΓ͋͑ͣϞϊ͕ϖʔδ಺Ͱಈ͘

ͪΐͬͱͨ͜͠ͱͰ ϖʔδભҠͱ͔͠ͳ͍෩ை

PHPͷΈͰ͸ ϖʔδભҠඞਢ

ΠϚυΩͷUX͸ JS͕ඞཁ

ϑϩϯτΤϯυ ΍͍͖ͬͯ

ͳͥʮVue.jsʯͳͷʁ

2019年 Frontend Framework 3選 ܹಈͷ2015೥ʙ2017೥Λܦͯ ͜ͷ3ͭͰམͪண͍͖ͯͨ

どれがいい？ LaravelઌੜVueਪ͠

2nd most starred project onGitHub

Vue.jsͰ͠ΐʂ

真面目な話… Vue.jsのいいとこ • ViewʢTemplateʣͷίʔυ͕HTMLͬΆ͍ • “HTMLʹໟ͕ੜ͑ͨγϯλοΫε” • PHPerతʹ΋ೃછΈ΍͍͢͸ͣ • CSSʹடং͕࡞ΕΔ
• ಋೖͱίʔσΟϯά͕ఔΑ͘ΏΔ;Θ • ෦෼తʹऔΓೖΕΒΕΔ

Reactは…？ • `php artisan priset react` Ͱ  ϑϩϯτ͕ReactʹૣมΘΓ • ϑϩϯτքΛJavaScriptͰ 
੐෰͍ͨ͋͠ͳͨʹΦεεϝ • ͜͜Ͱ͸ѻ͍·ͤΜ

Laravelで始める Vueの環境構築 Vue.jsΛ࢝ΊΔ࠷୹Ϩγϐ

最短レシピダイジェスト • ʮLaravel͔ΒVue.jsΛ࢖͏࠷୹Ϩγϐʯ  Qiitaʹॻ͖·ͨ͠ʂ • ৽نLaravel5.8ϓϩδΣΫτ͔Β  جຊ3εςοϓͰOK

Step1. npm install • ϓϩδΣΫτͷϧʔτͰ  `npm install`

Step2. Bladeをちょっと修正 • scriptλάΛ௥Ճ͢ΔͳͲ̏Օॴ΄Ͳ

Step3. npm run dev • ىಈʂ

でん。 Vueͷੈք

ライブコーディング Vue.jsجຊͷγϯλοΫε঺հ

ライブコーディングお品書き • ϗοτϦϩʔυ • ม਺ల։ͱೖྗόΠϯσΟϯά • ϝιουͱΠϕϯτ • ഑ྻɾΦϒδΣΫτͱϧʔϓ

PDFεϥΠυͩͱԿ΋දݱͰ͖Μ

まとめ • HTMLͷ֦ுͰςϯϓϨʔτ͕ॻ͚Δ • ೃછΈ΍͍͢ʂ • ϦΞϧλΠϜʹಈ͘Ϟϊ͕ʰ؆୯ʹʱ࡞ΕΔʂ • ࣮͸σβΠφʔʢίʔμʔʣ͞Μͱͷڠۀ΋  (ൺֱత)؆୯

Vue.jsはいいぞ

付録 ͜Μͳهࣄॻ͍ͯ·͢

私がハマったVueショボいミス • ୭΋ॻ͔ͳ͍ຌϛεΛ͋͑ͯॻ͘ • ʮMainʯίϯϙʔωϯτΛ࡞ͬͯ͸͍͚ͳ͍ • "methods"Λ"method"ͱॻ͍ͯundeﬁned

初めてVue.jsに触れた頃の私へ今の私が伝えたいTips プロジェクト作成編 • λΠτϧ͕௕͍ʂ • ϓϩδΣΫτΛখ͘͞࡞Εʂ • jQueryͱͬͨࣽ͝͸ ةݥʂ

初めてVue.jsに触れた頃の私へ今の私が伝えたいTips コンポーネント分割/ライブラリ選択編 • λΠτϧ͕ߋʹ௕͍ʂ • ίϯϙʔωϯτ෼ׂ͢Δͷ͸Ұը໘࡞ͨ͋ͱ • ͜ΜͳϥΠϒϥϦ͋ΔΑʂ

vuexをまだ理解していない全人類に捧ぐ  vuexを利用したコードの図解 • λΠτϧ͕ἤΓ͗͢ʂ • Vuexͱ͍͏ঢ়ଶ؅ཧϥΠϒϥϦͷཧղΛॿ͚͍ͨ • ͦ͏ͩਤղͯ͠ΈΑ͏ʂʢ໊Ҋ • ͪΐͬͱόζͬͨʢެ։̍ϲ݄ऑͰ163͍͍Ͷʣ

Vue.jsはいいぞ Fin

More Decks by 果物リン