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

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

PHP勉強会#136
あえてPHPerにVue.jsを勧める PHPということで、Laravel環境でVue.jsを始める環境の紹介と、基本のシンタックスをライブコーディングしました。Vue.jsはいいぞ!

去年のスライドにはライブコーディングの部分とか頑張ってるのでこちらも併せてご覧ください
https://speakerdeck.com/fruitriin/aetephpernisusumeruvue-dot-jsru-men

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

March 27, 2019
Tweet

Transcript

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

  2. 自己紹介 - 果物リン • FruitRiin@Twitter, Github, Qiita • גࣜձࣾΏΊΈ •

    ϑϩϯτΤϯδχΞʢೖࣾ̎ϲ݄ʂʣ • ڈ೥·Ͱ໿̏೥΄ͲPHPer • JS͕޷͖ɻVue.js͸͍͍ͧʂ • JS΋Vue.js΋ΏΔ;Θײ͕PHPʹ௨͡Δ
  3. ͋͑ͯPHPerʹ͢͢ΊΔ Vue.jsೖ໳

  4. お品書き • ͋ͳͨʹͱͬͯͷ࠷ॳͷPHPܦݧ͸ʁ • ͳͥʮVue.jsʯͳͷ͔ • Vueͷ࢝Ίํ LaravelฤʢμΠδΣετʣ • Vue.js

    جຊͷSyntax঺հʢϥΠϒίʔσΟϯάʣ
  5. ͋ͳͨʹͱͬͯ ࠷ॳͷPHP͸ʁ

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

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

  8. few years later...

  9. 2019年におけるPHP • ॏްͳϑϨʔϜϫʔΫʹ৐͔ͬΔͷ͕τϨϯυ • ओͳ࢓ࣄͦͷ̍ ʹ APIαʔόʔ • ajaxͰݺ͹ΕͯjsonΛฦ͢ •

    ओͳ࢓ࣄͦͷ̎ ʹ HTMLΛฦ͢ • Blade, Twig, Jade
  10. 2019೥ʹ͓͚ΔWeb UX

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

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

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

  14. ΠϚυΩͷUX͸ JS͕ඞཁ

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

  16. ͳͥʮVue.jsʯͳͷʁ

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

  18. どれがいい? LaravelઌੜVueਪ͠

  19. 2nd most starred project onGitHub

  20. Vue.jsͰ͠ΐʂ

  21. 真面目な話… Vue.jsのいいとこ • ViewʢTemplateʣͷίʔυ͕HTMLͬΆ͍ • “HTMLʹໟ͕ੜ͑ͨγϯλοΫε” • PHPerతʹ΋ೃછΈ΍͍͢͸ͣ • CSSʹடং͕࡞ΕΔ

    • ಋೖͱίʔσΟϯά͕ఔΑ͘ΏΔ;Θ • ෦෼తʹऔΓೖΕΒΕΔ
  22. Reactは…? • `php artisan priset react` Ͱ
 ϑϩϯτ͕ReactʹૣมΘΓ • ϑϩϯτքΛJavaScriptͰ


    ੐෰͍ͨ͋͠ͳͨʹΦεεϝ • ͜͜Ͱ͸ѻ͍·ͤΜ
  23. Laravelで始める Vueの環境構築 Vue.jsΛ࢝ΊΔ࠷୹Ϩγϐ

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

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

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

  27. Step3. npm run dev • ىಈʂ

  28. でん。 Vueͷੈք

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

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

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

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

  33. Vue.jsはいいぞ

  34. 付録 ͜Μͳهࣄॻ͍ͯ·͢

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

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

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

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

  39. Vue.jsはいいぞ Fin