Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

チュートリアルではじめるVue.js

5,510 views

Published on

社内教育用のVue.jsチュートリアル

Published in: Education
  • Be the first to comment

チュートリアルではじめるVue.js

  1. 1. チュートリアルではじめるVue.js sh-ogawa
  2. 2. 事前にやっておいて欲しいこと 使用するPCでcomposerでLaravelプロジェクトを作成できるようになっている https://readouble.com/laravel/5.4/ja/installation.html 使用するPCでnpmコマンドが使えるようなっている https://www.webprofessional.jp/beginners-guide-node-package-manager/
  3. 3. はじめに Vue.jsに入門したけど、公式チュートリアルでは個人的に内容が足らなかったので、 自分で作りました。 チュートリアルからVue.jsをはじめよう!
  4. 4. 基本的にVue.jsのチュートリアルの焼きまわしです。 文章で解説されてもよく判らなかったり、 こういうチュートリアルが欲しかったというのを追記して作成しています。
  5. 5. いつもなら御託を並べるわけだけど、 触った方が早いから、何も言いません。
  6. 6. その威力、チュートリアルで体感せよ!
  7. 7. 1. 宣言的レンダリング
  8. 8. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
  9. 9. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ① ① ② ②
  10. 10. ブラウザのデベロッパーツールで 以下を入力して実行 app.message = ‘ビールがとても飲みたいです。’
  11. 11. ブラウザのデベロッパーツールで 以下を入力して実行 app.message = ‘ビールがとても飲みたいです。’ ブラウザ上の表示変わりました?
  12. 12. これ、すごくないですか? 今までは、getElementByIdとか、$(‘#hoge’)とか行って、 その要素を取った後に「val(‘ビールがとても飲みたいです。’)」 とかやってたのに、
  13. 13. これ、すごくないですか? 今までは、getElementByIdとか、$(‘#hoge’)とか行って、 その要素を取った後に「val(‘ビールがとても飲みたいです。はい。’)」 とかやってたのに、 app.message = ‘ビールがとても飲みたいです。’ って打って実行するだけで画面に描画されてしまいました。
  14. 14. 以下の関係にある <!DOCTYPE html> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> app.message = ‘ビールがとても飲みたいです。’ ① ① ② ② ③ ③
  15. 15. 以下の関係にある <!DOCTYPE html> <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> app.message = ‘ビールがとても飲みたいです。’ ① ① ② ② ③ ③ ③インスタンスにある ②プロパティの値を ①の要素の該当箇所(②)にセットする
  16. 16. これをしっかりと抑えておけば、 あとはほぼテクニックの話なので、 やればやった分だけできるようになる。
  17. 17. これをしっかりと抑えておけば、 あとはほぼテクニックの話なので、 やればやった分だけできるようになる。 多分ね!
  18. 18. 2. ディレクティブを使う
  19. 19. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span title="{{ message }}"> マウスのカーソルを合わせてみて </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
  20. 20. マウスオーバーで”Hello Vue!”と表示された人います?
  21. 21. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span title="{{ message }}"> マウスのカーソルを合わせてみて </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> 属性値に対して、こういうことはできないです
  22. 22. これを解決するためのソリューションが
  23. 23. これを解決するためのソリューションが ディレクティブ!
  24. 24. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span v-bind:title="message"> マウスのカーソルを合わせてみて </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
  25. 25. 今度はマウスオーバーで”Hello Vue!”と表示されたでしょうか?
  26. 26. ブラウザのデベロッパーツールで 以下を入力して実行 app.message = ‘ビールがとても飲みたいです。’
  27. 27. ブラウザのデベロッパーツールで 以下を入力して実行 app.message = ‘ビールがとても飲みたいです。’ カーソルの表示変わりました?
  28. 28. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span v-bind:title="message"> マウスのカーソルを合わせてみて </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> app.message = ‘ビールがとても飲みたいです。’ “v-”で始まる属性は、Vue.jsで使用する属性です。
  29. 29. 厳密にはちょっと違うけど、 v-bind:HTML属性 というAPIだと思ってください。
  30. 30. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span v-bind:title="message"> マウスのカーソルを合わせてみて </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> app.message = ‘ビールがとても飲みたいです。’ Vueの機能を使って、 appインスタンスのmessageプロパティを HTMLのtitle属性にセットする ということを表している
  31. 31. APIはAPIリファレンスを見るしかないので、 やりたいことを達成できるものがあるかを調べてみてください。 大抵のものはきっと見つかるはずです。 APIリファレンスは以下で公開されています。 https://jp.vuejs.org/v2/api/
  32. 32. とはいえ、よく使いそうなものは本日扱うので、 丸投げはしないです。ご安心を!
  33. 33. 3. 条件分岐
  34. 34. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span v-if="seen">Now you see me</span> </div> <script> var app = new Vue({ el: '#app', data: { seen: true } }) </script>
  35. 35. ブラウザのデベロッパーツールで 以下を入力して実行 app.seen = false
  36. 36. ブラウザ上から表示が消えましたよね? 続けて、 app.seen = true を実行してブラウザに表示させましょう
  37. 37. 以下のコードを写経して ブラウザで開こう <!DOCTYPE html> <div id="app"> <span v-if="seen">Now you see me</span> </div> <script> var app = new Vue({ el: '#app', data: { seen: true } }) </script> appインスタンスのseenプロパティがtrueの場合に描画する falseの場合は、デベロッパーツールで要素を見ると判りますが 、HTMLがコメントアウトされます
  38. 38. 手軽ですね!
  39. 39. 4. ループ
  40. 40. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script> var app = new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) </script>
  41. 41. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script> var app = new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) </script> ループはv-forを使う v-forの中身はPHPの foreachに似てるので、 親しみやすいのでは?
  42. 42. 5. イベントリスナー
  43. 43. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> v-on:拾うイベント 処理メソッドを定義
  44. 44. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> メソッドは methodsセクションに書く
  45. 45. 6. コンポーネント
  46. 46. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script>
  47. 47. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script> これがコンポーネント
  48. 48. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script> コンポーネント化すると カスタムタグとして使えるようになる
  49. 49. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script> prop:このコンポーネントが受取る引数 template:実際に書き込むHTML
  50. 50. 以下のコードを写経して ブラウザで開こう<!DOCTYPE html> <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script> 引数に渡す変数は、 Vueインスタンスが持っているデータの 名前と被るとエラーになるので注意
  51. 51. 7. LaravelでVueを使う
  52. 52. ここまでのチュートリアルのように、 ちまちま定義していると辛いし、実際に使用するときはLaravel上での使用になるため、 そこのチュートリアル。
  53. 53. LaravelにはLaravel MIX、中身はwebpackが付いてくるので、 webpackを使ってVue.jsを使うことになります。 Vue.js上のドキュメントでは、「単一コンポーネント」と呼ばれているものです。
  54. 54. ファイルを分割して作ったcssやらjsを、1つのcssファイル、jsファイルに纏められるやつ 。 細かい説明は以下が判りやすいと思ったので参照してください。 https://qiita.com/soarflat/items/28bf799f7e0335b68186 Laravelで使う場合は、webpackを簡単に使えるようにLaravel Mixがある(再掲) webpack
  55. 55. 目標 <!DOCTYPE html> <div id="app"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) </script> 最終的に、 この部分を別ファイル化して使います。
  56. 56. [Laravelのプロジェクト作成] $ composer create-project --prefer-dist laravel/laravel vue-laravel-hands-on IntelliJか何かで上記で作ったルートディレクトリを開く 準備
  57. 57. 準備
  58. 58. 準備 実はデフォルトで 単一コンポーネント化されたVueコンポーネントが 付属されている
  59. 59. まぁいきなり作り出す前に、アセットコンパイル(1つのファイルに纏めたりする)が、 ちゃんと動くか確認しよう。 準備
  60. 60. $ npm install $ npm run dev 準備
  61. 61. $ npm install $ npm run dev 準備 トーストでSuccessが出ればOK
  62. 62. 以下をExample.vueに写経 <template> <li>{{ todo.text }}</li> </template> <script> export default { props: ['todo'], mounted() { console.log('Component mounted.') } } </script>
  63. 63. require('./bootstrap'); window.Vue = require('vue'); Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: '#app' }); app.jsの中身を確認 今回は要らないから削除
  64. 64. bodyタグ以下に下記を記述 <body> <div id="app"> <example v-for="item in groceryList" :todo="item"></example> </div> </body> <script src="/js/app.js"></script> <script> var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); </script> bladeを修正
  65. 65. bodyタグ以下に下記を記述 <body> <div id="app"> <example v-for="item in groceryList" :todo="item"></example> </div> </body> <script src="/js/app.js"></script> <script> var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); </script> bladeを修正 コンパイルしたjsの読込み
  66. 66. bodyタグ以下に下記を記述 <body> <div id="app"> <example v-for="item in groceryList" :todo="item"></example> </div> </body> <script src="/js/app.js"></script> <script> var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); </script> bladeを修正 変数などは利用側で定義する
  67. 67. bodyタグ以下に下記を記述 <body> <div id="app"> <example v-for="item in groceryList" :todo="item"></example> </div> </body> <script src="/js/app.js"></script> <script> var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); </script> bladeを修正 app.js上で定義したコンポーネント名を使う (普通のコンポーネントと同じ) [app.js] require('./bootstrap'); window.Vue = require('vue'); Vue.component('example', require('./components/Example.vue'));
  68. 68. bodyタグ以下に下記を記述 <body> <div id="app"> <example v-for="item in groceryList" :todo="item"></example> </div> </body> <script src="/js/app.js"></script> <script> var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } }); </script> bladeを修正 コンポーネントの引数に 利用側の変数をバインドさせる (普通のコンポーネントと同じ) [app.js] require('./bootstrap'); window.Vue = require('vue'); Vue.component('example', require('./components/Example.vue')); [Example.vue] <template> <li>{{ todo.text }}</li> </template> <script> export default { props: ['todo'], mounted() { console.log('Component mounted.') } } </script>
  69. 69. $ php artisan serve ちゃんと動くか試そう 127.0.0.1:8000にアクセスして リストが表示されればOK
  70. 70. チュートリアルはここまでです。 何か質問あれば言ってください。
  71. 71. これであなたも今日から 「Vue.js完全にマスターした」 って言えるね

×