あえてPHPerにすすめるVuejs
1.5K Views
July 14, 18
スライド概要
[20180714 PHPConference関西2018]
フロントエンジニア
関連スライド
WSL2運用してみた Macとの比較
RiinFruit
18.2K
各ページのテキスト
あえてPHPerにすすめる Vue.js入門 株式会社ORATTA 中島 凜(果物リン@FruitRiin) 2018/07/14 PHP Conference関西 2018 1
自己紹介 - 果物リン@FruitRiin • 株式会社ORATTA • サーバーアプリケーション担当 ぺちぺちしている • 趣味JSer • Vue.jsはいいぞ！ 2
株式会社ORATTA • 戦国アスカZEROとか作ってます • Chromeで遊べるPWA版 『戦国アスカZEROクイック』を 先日リリースしました！(2018.6) 3
戦国アスカZERO なでなでするほど強くなるRPG 4
Next Project is Laravel with Game このロゴにピンときたらORATTAです？ 5
We are Hiring このロゴにピンときたらORATTAです 6
はい
あえてPHPerにすすめる Vue.js入門
お品書き • あなたにとっての最初のPHP経験は？ • なぜ「Vue.js」なのか • Vueの始め方 Laravel編 • Vue.js 基本のSyntax紹介 9
あなたにとって 最初のPHPは？
私の最初のPHPとの出会い • 目的を達成するのにちょうど良かった • echo "<html>"; 😇 • JSは片手間に書くもの 11
我々もUXを提供していた！
few years later... 13
2018年におけるPHP • 重厚なフレームワークに乗っかるのがトレンド • 主な仕事その１ ＝ APIサーバー • • ajaxで呼ばれてjsonを返す 主な仕事その２ ＝ HTMLを返す • Blade, Twig, Jade 14
2018年におけるWeb
とりあえず動く
ちょっとしたことで ページ遷移とかしない風潮
PHPのみでは ページ遷移必須 18
イマドキのUXは JSが必要
フロントエンド やっていき
なぜ「Vue.js」なの？
2018年 Frontend Framework 3選 激動の2015年〜2017年を経て この3つで落ち着いてきた 22
どれがいい？ Laravel先生Vue推し 23
GitHub Stars are Vue.js > React
Vue.jsでしょ！
真面目な話… Vue.jsのいいとこ • View（Template）のコードがHTMLっぽい • • デザイナーにも受け入れてもらいやすい 導入とコーディングが程よくゆるふわ • 部分的に取り入れられる 26
Laravelで始める Vueの環境構築 Vue.jsを始める最短レシピ 27
最短レシピダイジェスト • 「LaravelからVue.jsを使う最短レシピ」 Qiitaに書きました • 新規Laravel5.6プロジェクトから 3ステップでOK • Laravelのプロジェクトは作ってあるとする 28
Vue.jsのインストール • Projectへ移動 npm install • laravelの package.json に従ってインストール • composer.json みたいなやつ 29
Bladeを修正 • jsとcss読み込み用のタグを追加 • CSRFトークンをVue.jsへ渡すコードを追加 • コードは割愛！それぞれ一行追加でOK 30
開発環境の起動 • LaravelとVueを起動する php artisan serve & npm run hot • npm run hot は Vueコンポーネントのコンパイル、サーブ用 31
コーディングデモ Vue.js基本のシンタックス紹介 32
resources/assets/js/ ExampleComponent.vue • デモではExmaple.vueになってます • もともとのスタイリングは取っ払ってます • コンポーネントの現在の値を見る dataViewerコンポーネントを入れてます 33
注釈 - デモ用コンポーネント 34
注釈 - デモ用コンポーネント 35
HotModuleReload • コンポーネントを保存 →開発中は自動で読み込み直される！ • 地味に便利！ • 動画じゃないとわかないので割愛 36
37
38
39
40
イベントとメソッドと 表示非表示まとめ • v-if : trueの時だけ表示 • v-else : 前の条件がfalseの時だけ表示 • • 離れた場所は v-if="!hoge" とかで！ v-on:click="method" でクリック時に〜 41
42
43
44
45
配列とループ まとめ • 配列は {{lists[0]}}, {{lists[1]}} で表示 • ループは v-for="[要素] in [配列]" • キーも取りたい時は v-for="([要素], [key]) in [配列]" 46
47
オブジェクトとループ • オブジェクトは {{obj.hoge}}, {{obj.foo}} で表示 • ループは v-for="[小要素] in [親オブジェクト]" • キーも取りたい時は配列と同様 48
Vueの部分利用 • resources/view/welocome.blade.php で使う • blade上でVue用のコードが使える • いくつか注意点あり 49
resources/assets/js/app.js 50
51
Vueの部分利用 • サーバーサイドでレンダリングするHTMLの Vueのコード→展開される • HTMLも普通に使える • コンポーネントも利用できる • 自動更新が効かない 52
Vueの部分利用 - 注意その１ • bladeの{{}}とバッティングする • v-text, v-html 代わりにつかう • デリミタを変更する • blade,Vueどちらも可能 53
Vueの部分利用 - 注意その２ • ユーザー入力などで{{}}が渡されると Vueに展開されて非常に危険！ • v-textで渡せば大丈夫 • エスケープされる 54
まとめ • HTMLの拡張でテンプレートが書ける • 馴染みやすい！ • リアルタイムに動くモノが『簡単に』作れる！ • 実はデザイナー（コーダー）さんとの協業も (比較的)簡単 55
Vue.jsはいいぞ Fin. 56
付録 こんな記事書いてます（Qiitaにあります！） 57
初めてVue.jsに触れた頃の私へ 今の私が伝えたいTips プロジェクト作成編 • タイトルが長い！ • プロジェクトを小さく作れ！ • jQueryとごった煮は 🙅 危険！ 58
初めてVue.jsに触れた頃の私へ 今の私が伝えたいTips コンポーネント分割/ライブラリ選択編 • タイトルが更に長い！ • コンポーネント分割するのは一画面作たあと • こんなライブラリあるよ！ 59
私がハマったVueショボいミス • 誰も書かない凡ミスをあえて書く • 「Main」コンポーネントを作ってはいけない とか 60
Vue.jsはいいぞ！ 61