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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

few years later...

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2019೥ʹ͓͚ΔWeb UX

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ΠϚυΩͷUX͸ JS͕ඞཁ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

ͳͥʮVue.jsʯͳͷʁ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

2nd most starred project onGitHub

Slide 20

Slide 20 text

Vue.jsͰ͠ΐʂ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Step3. npm run dev • ىಈʂ

Slide 28

Slide 28 text

でん。 Vueͷੈք

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Vue.jsはいいぞ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Vue.jsはいいぞ Fin