あえてPHPerにすすめるVuejs

1.1K Views

July 14, 18

スライド概要

[20180714 PHPConference関西2018]

profile-image

フロントエンジニア

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

あえてPHPerにすすめる Vue.js入門 株式会社ORATTA 中島 凜(果物リン@FruitRiin) 2018/07/14 PHP Conference関西 2018 1

2.

自己紹介 - 果物リン@FruitRiin • 株式会社ORATTA • サーバーアプリケーション担当 ぺちぺちしている • 趣味JSer • Vue.jsはいいぞ! 2

3.

株式会社ORATTA • 戦国アスカZEROとか作ってます • Chromeで遊べるPWA版 『戦国アスカZEROクイック』を 先日リリースしました!(2018.6) 3

4.

戦国アスカZERO なでなでするほど強くなるRPG 4

5.

Next Project is Laravel with Game このロゴにピンときたらORATTAです? 5

6.

We are Hiring このロゴにピンときたらORATTAです 6

7.

はい

8.

あえてPHPerにすすめる Vue.js入門

9.

お品書き • あなたにとっての最初のPHP経験は? • なぜ「Vue.js」なのか • Vueの始め方 Laravel編 • Vue.js 基本のSyntax紹介 9

10.

あなたにとって 最初のPHPは?

11.

私の最初のPHPとの出会い • 目的を達成するのにちょうど良かった • echo "<html>"; 😇 • JSは片手間に書くもの 11

12.

我々もUXを提供していた!

13.

few years later... 13

14.

2018年におけるPHP • 重厚なフレームワークに乗っかるのがトレンド • 主な仕事その1 = APIサーバー • • ajaxで呼ばれてjsonを返す 主な仕事その2 = HTMLを返す • Blade, Twig, Jade 14

15.

2018年におけるWeb

16.

とりあえず動く

17.

ちょっとしたことで ページ遷移とかしない風潮

18.

PHPのみでは ページ遷移必須 18

19.

イマドキのUXは JSが必要

20.

フロントエンド やっていき

21.

なぜ「Vue.js」なの?

22.

2018年 Frontend Framework 3選 激動の2015年〜2017年を経て この3つで落ち着いてきた 22

23.

どれがいい? Laravel先生Vue推し 23

24.

GitHub Stars are Vue.js > React

25.

Vue.jsでしょ!

26.

真面目な話… Vue.jsのいいとこ • View(Template)のコードがHTMLっぽい • • デザイナーにも受け入れてもらいやすい 導入とコーディングが程よくゆるふわ • 部分的に取り入れられる 26

27.

Laravelで始める Vueの環境構築 Vue.jsを始める最短レシピ 27

28.

最短レシピダイジェスト • 「LaravelからVue.jsを使う最短レシピ」 Qiitaに書きました • 新規Laravel5.6プロジェクトから 3ステップでOK • Laravelのプロジェクトは作ってあるとする 28

29.

Vue.jsのインストール • Projectへ移動 npm install • laravelの package.json に従ってインストール • composer.json みたいなやつ 29

30.

Bladeを修正 • jsとcss読み込み用のタグを追加 • CSRFトークンをVue.jsへ渡すコードを追加 • コードは割愛!それぞれ一行追加でOK 30

31.

開発環境の起動 • LaravelとVueを起動する php artisan serve & npm run hot • npm run hot は Vueコンポーネントのコンパイル、サーブ用 31

32.

コーディングデモ Vue.js基本のシンタックス紹介 32

33.

resources/assets/js/ ExampleComponent.vue • デモではExmaple.vueになってます • もともとのスタイリングは取っ払ってます • コンポーネントの現在の値を見る dataViewerコンポーネントを入れてます 33

34.

注釈 - デモ用コンポーネント 34

35.

注釈 - デモ用コンポーネント 35

36.

HotModuleReload • コンポーネントを保存 →開発中は自動で読み込み直される! • 地味に便利! • 動画じゃないとわかないので割愛 36

41.

イベントとメソッドと 表示非表示まとめ • v-if : trueの時だけ表示 • v-else : 前の条件がfalseの時だけ表示 • • 離れた場所は v-if="!hoge" とかで! v-on:click="method" でクリック時に〜 41

46.

配列とループ まとめ • 配列は {{lists[0]}}, {{lists[1]}} で表示 • ループは v-for="[要素] in [配列]" • キーも取りたい時は v-for="([要素], [key]) in [配列]" 46

48.

オブジェクトとループ • オブジェクトは {{obj.hoge}}, {{obj.foo}} で表示 • ループは v-for="[小要素] in [親オブジェクト]" • キーも取りたい時は配列と同様 48

49.

Vueの部分利用 • resources/view/welocome.blade.php で使う • blade上でVue用のコードが使える • いくつか注意点あり 49

50.

resources/assets/js/app.js 50

52.

Vueの部分利用 • サーバーサイドでレンダリングするHTMLの Vueのコード→展開される • HTMLも普通に使える • コンポーネントも利用できる • 自動更新が効かない 52

53.

Vueの部分利用 - 注意その1 • bladeの{{}}とバッティングする • v-text, v-html 代わりにつかう • デリミタを変更する • blade,Vueどちらも可能 53

54.

Vueの部分利用 - 注意その2 • ユーザー入力などで{{}}が渡されると Vueに展開されて非常に危険! • v-textで渡せば大丈夫 • エスケープされる 54

55.

まとめ • HTMLの拡張でテンプレートが書ける • 馴染みやすい! • リアルタイムに動くモノが『簡単に』作れる! • 実はデザイナー(コーダー)さんとの協業も (比較的)簡単 55

56.

Vue.jsはいいぞ Fin. 56

57.

付録 こんな記事書いてます(Qiitaにあります!) 57

58.

初めてVue.jsに触れた頃の私へ 今の私が伝えたいTips プロジェクト作成編 • タイトルが長い! • プロジェクトを小さく作れ! • jQueryとごった煮は 🙅 危険! 58

59.

初めてVue.jsに触れた頃の私へ 今の私が伝えたいTips コンポーネント分割/ライブラリ選択編 • タイトルが更に長い! • コンポーネント分割するのは一画面作たあと • こんなライブラリあるよ! 59

60.

私がハマったVueショボいミス • 誰も書かない凡ミスをあえて書く • 「Main」コンポーネントを作ってはいけない とか 60

61.

Vue.jsはいいぞ! 61