Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのVue.jsハンズオン

 はじめてのVue.jsハンズオン

社外向け勉強会用に作成した資料です。

taiga533

August 05, 2019
Tweet

More Decks by taiga533

Other Decks in Programming

Transcript

  1. はじめてのVue.jsハンズオン
    Todoリストの作成を通してVue.jsに
    触れてみよう!

    View full-size slide

  2. まずは自己紹介
    2

    View full-size slide

  3. 名前:川﨑 大河
    所属:株式会社ラクーンホールディングス
    技術戦略部 開発チーム
    主な仕事:BtoB卸売りサイト スーパーデリバリーの開発
    3

    View full-size slide

  4. 好きなこと
    ● キャンプ
    ● ビリヤード
    ● プログラミング
    4

    View full-size slide

  5. 今回の目標
    Vue.jsを使ってTodoリストを作成し、
    Hello, worldの2歩先を行く
    5

    View full-size slide

  6. みなさんが目標を達成できるように
    ● JavaScriptが苦手な方でも進められるよう、ゆっく
    りやります
    ● コードを写していただくようなところは間を開けま

    ご理解ご協力お願いします。
    6

    View full-size slide

  7. 今日やること
    7

    View full-size slide

  8. 1. Vue.jsのいいところを知ろう
    2. 環境構築をしよう
    3. Vueを使って見た目を変えよう
    4. todoリストを作ってみよう
    5. 最後に
    8

    View full-size slide

  9. Vue.jsのいいところ
    ● 学習コストが低い
    ○ 見た目に関わる部分はほぼHTMLで書くことができる
    ○ 日本語の資料が多い
    ● かゆいところに手が届く
    ○ UI・ビジネスロジックに関係ない部分の実装がすでに組み込まれてい

    ○ 独自テンプレート構文でHTMLに動きを付けることができる
    ● 関連ライブラリが豊富
    ○ うまく使えば開発工数を短縮できる
    9

    View full-size slide

  10. 環境構築をしよう①
    今回はnpm(node package manager)は使いません。
    gitをインストールされている方は
    git clone https://github.com/taiga533/vue-todomvc.git
    を実行し、cloneしたフォルダの中に入ってください。
    10

    View full-size slide

  11. 環境構築をしよう②
    git入れてないよ~!という方は
    1. こちらのURLを開いて
    2.
    3. ダウンロードしたzipを解凍
    4. 解凍したフォルダを開く
    11
    Clone or download をクリック

    View full-size slide

  12. ディレクトリ構成
    ● /js/app.js
    ○ vue.jsのロジックを書くところ
    ● /index.html
    ○ todoリストのHTML
    主にこの2つのファイルを編集します。
    12

    View full-size slide

  13. Vue.jsを読み込む
    index.htmlのheadタグ内部の任意の場所に

    と書きましょう。
    現時点だとvue.jsを読み込んだだけなので、見た目は何も変わりません。
    CDNから読み込む場合は、headタグ内部の任意の場所に

    と書きます。 13

    View full-size slide

  14. app.jsを開いて以下のように編集します。
    (function (window) {
    'use strict';
    // この下から追記
    window.app = new Vue({
    el: '#app',
    });
    // この上まで追記
    })(window);
    ←①
    ←②
    14
    app.js
    Vue.jsを使う範囲を決めよう!

    View full-size slide

  15. Check Point!✅
    ● ①の行
    ○ Vueの機能を使用するために、Vueオブジェクトを作成している。
    ○ Vueで使う変数や関数を{}で囲い、オブジェクトとして引数に渡している。
    ○ 基本的にVueを使うときはJavaScriptにnew Vue({ });を必ず書く。
    15

    View full-size slide

  16. Check Point!✅
    ● ②の行
    ○ Vueの独自テンプレート構文を使える
    DOM要素を指定しています
    ○ ②の場合だとid=”app”とタグに書かれたDOM要素がVueオブジェクトと結びつく
    ○ 指定したDOM要素の内部でのみVueの独自テンプレート構文が使える

    foo

    bar


    el=”#app”と書いた場合
    Vue.js独自の記述はこの中でしか
    機能しない
    16
    HTML

    View full-size slide

  17. app.jsを開いて以下のように編集します。
    (function (window) {
    'use strict';
    window.app = new Vue({
    el: '#app',
    // この下から追記
    data: {
    title: 'Hello, World',
    },
    // この上まで追記
    });
    })(window);
    ←①
    17
    app.js
    Vue.jsを使って見た目を変えよう!

    View full-size slide

  18. Check Point!✅
    ● ①の行
    ○ data: {変数名: 値}という形のオブジェクトを定義している
    ○ 基本的にVueテンプレートで使う変数はdata:{}の中で定義する
    ○ vueの独自テンプレート内部でのみ使うことができる
    ○ ①の場合だとtitleという名前で値が’Hello, World’という変数を定義したことになる

    {{foo}}

    {{foo}}


    new Vue({
    el: "#app",
    data: {
    foo: 'Hello, World'
    }
    }
    この部分でしかtitle変数は
    使えない
    18
    HTML
    JS

    View full-size slide

  19. index.htmlを下記のように書き換えましょう。


    {{ title}}



    19
    index.html

    View full-size slide

  20. Check Point!✅
    ● vueのテンプレート構文では{{}}(ムスタッシュ構文)で変数名や関数名を囲うことで
    変数の値や関数の戻り値を表示することができます。
    ○ {{}}で使えるのはnew Vue({ });の{}内部で定義された変数や関数だけで
    す。
    20

    View full-size slide

  21. 21

    title

    index.html

    {{ title + ‘a’ }}

    index.html
    {{}}をつけなかった場合
    {{}}の中で式を使った場合

    {{ title }}

    index.html
    {{}}をつけた場合

    View full-size slide

  22. app.jsを以下のように変更しましょう。
    ・・・
    el: "#app",
    data: {
    title: 'Hello, World',
    // この下から追記
    // 追加されたTodoをリストで保持する変数
    todos: [],
    // 新しいTodoタイトルを保持する変数
    newTodo: "",
    // この上まで追記
    },
    ・・・ 22
    Todoを追加できるようにする
    app.js

    View full-size slide

  23. data: {
    ・・・
    },
    // この下から追記
    methods: {
    addTodo() {
    if (!this.newTodo) return;
    this.todos.push({id: (new Date()).getTime(), title: this.newTodo, completed: false});
    this.newTodo = "";
    },
    },
    // この上まで追記
    }
    ←①
    ←②
    23
    app.js

    View full-size slide

  24. Check Point!✅
    ● ①の行:new Vue({ });の{}内部にmethods:{}を用意すると{}の中にvueテンプ
    レートの内部で使える関数を定義できる。
    ⚠注意⚠
    new Vue({ });の{ }の中でdata: {/* 色々 */},で定義した変数を使うときは、
    必ず this.定義した変数名
    とする。
    24

    View full-size slide

  25. Check Point!✅
    ● ②の行:追加されるtodoにはid, title, completedというプロパティを持たせている
    各プロパティの役割
    ● id
    ○ 配列todosに格納されるtodoそれぞれに一意性(同じものが存在しないという
    性質)をもたせる
    ● title
    ○ todoの文字列を保持する
    ● completed
    ○ todoが完了したかどうかを真偽値(true/false)で保持する
    25

    View full-size slide

  26. index.htmlを以下のように変更しましょう。

    {{ title }}

    class="new-todo"
    placeholder="なにかやるべきことは?"
    autofocus
    v-model="newTodo"
    v-on:keyup.enter="addTodo">



    ←①
    ←②
    26
    index.html

    View full-size slide

  27. Check Point!✅
    ● ①の行:v-modelディレクティブ(サンプル)
    v-model=”foo”
    と書いたinputタグ
    変数foo
    v-model=”foo”
    と書いたinputタグ
    変数foo
    変数fooが変更されたとき
    v-model=”foo”と書いたinputタグのvalueが変更されたとき
    Valueの値を代入
    fooの値をvalueに設定
    双方の変更が双方に適用される便利な機能
    双方向バインディング
    27

    View full-size slide

  28. Check Point!✅
    ● ②の行:v-onディレクティブ(サンプル)
    ○ ユーザーの入力(イベント)があったときに実行する関数を設定できる
    v-on:keyup.enter=”bar”
    と書いたinputタグ
    関数bar()
    v-on:keyup.enterが設定された要素でエンターキーが押された時
    呼び出し
    28

    View full-size slide

  29. 29
    すべて完了にする







    {{ todo.title }}







    index.html
    ←①
    追加したTodoを表示できるようにする

    View full-size slide

  30. Check Point!✅
    ● ①の行:v-forディレクティブ
    ○ 配列の数だけDOM要素を繰り返し生成する機能
    ○ v-for=”配列の要素が入る変数名 in 配列名”
    ○ v-for=”todo in todos”が書かれた要素とその子要素た
    ちは、変数todoを参照することができる
    30

    View full-size slide

  31. コードで説明すると・・・
    // todosの中身がこのような場合に
    todos: [
    'チャーハンを食べる',
    'ラーメンを食べる',
    '刺し身を食べる'
    ]

    チャーハンを食べる


    ラーメンを食べる


    寿司を食べる



    {{ todo }}
    31
    JS
    HTML
    HTML

    View full-size slide

  32. Todoの状態を完了にできるようにしよう
    次にTodoを完了の状態にできるようにしましょう。






    {{ todo.title }}
    ・・・
    ←①
    ←②
    32
    index.html

    View full-size slide

  33. Check Point!✅
    ● ①の行:v-bindディレクティブ
    ○ v-bind:class=”{completed: todo.completed}”と書くとtodo変数の
    completedプロパティがtrueのときのみcompletedクラスがHTML要素に付
    与される
    例:と書くと
    変数fooがtrueのとき

    変数fooがfalseのとき

    33

    View full-size slide

  34. Check Point!✅
    ● ②の行:type=”checkbox”のときのv-model
    ○ input要素のtype属性がcheckboxの場合はv-modelに割り当てられた変数
    にtrueかfalseが入る
    例:と書いたとき
    ✔ チェックがつくと・・・ チェックがないと
    bar = true bar = false
    34

    View full-size slide

  35. Todoを削除できるようにしよう
    35
    addTodo() {
    ・・・
    },
    // この下から追記
    deleteTodo(deleteTarget) {
    // 削除対象のtodoの添字を取ってくる
    const deleteTargetIndex = this.todos.indexOf(deleteTarget);
    const deleteCount = 1;
    // 削除対象のtodoをtodosから削除
    this.todos.splice(deleteTargetIndex, deleteCount);
    },
    // この↑まで追記
    }
    app.js
    todoを削除する関数

    View full-size slide



  36. {{ todo.title }}




    クリックしたときTodoを削除す
    る関数が呼ばれる
    36
    index.html

    View full-size slide

  37. Todoを編集できるようにしよう
    37
    el: "#app",
    data: {
    ・・・
    newTodo: "",
    // この下から追記
    // 編集対象のtodoを保存する変数
    editTargetTodo: null,
    // 編集対象のtodo.title文字列を保存する変数
    editTargetTodoTitle: "",
    // この上まで追記
    },
    ・・・
    app.js

    View full-size slide

  38. 38
    deleteTodo(deleteTarget) {
    ・・・
    },
    // この下から追記
    editTodo(editTarget) {
    this.editTargetTodo = editTarget;
    this.editTargetTodoTitle = editTarget.title;
    },
    updateTodo(updateTarget) {
    updateTarget.title = this.editTargetTodoTitle;
    this.editTargetTodo = null;
    this.editTargetTodoTitle = "";
    },
    // この上まで追記
    },
    編集内容を保存する変数
    編集対象のtodoを設定する
    関数
    app.js

    View full-size slide






  39. {{ todo.title }}







    ↓①
    ダブルクリックしたとき、編集
    するTodoを設定する関数が
    呼ばれる。
    todo編集中にエンターを押さ
    れると、編集内容を確定する
    関数が呼ばれる。
    39
    Todoタイトル編集欄の内容
    と、変数editTargetTodoTitleを
    結びつける
    index.html

    View full-size slide

  40. Check Point!✅
    ● ①の部分:編集対象のTodoとそれぞれのliタグに割り当てられたTodoが等しいと
    きだけclass=”editing”になるようにしている

    配列1番目


    配列2番目

    editTarget = 配列2番目の要素の場合
    v-bind:class="{editing: editTarget === todo}">
    {{ todo.title }}

    Vueテンプレート側 出力されるHTML
    40
    HTML HTML

    View full-size slide

  41. Todoの件数を加工して表示しよう
    todoの残り件数をカンマ区切りで表示するようにしましょう。
    41

    View full-size slide

  42. 42
    editTargetTodoTitle: ""
    },
    // この下から追記
    computed: {
    todoCount() {
    const COMMA_SPLIT_REGEX = /(\d)(?=(\d{3})+$)/g
    // todosの要素数をカンマ区切りにして返す
    return this.todos.length.toString().replace(COMMA_SPLIT_REGEX, '$1,');
    },
    },
    // この上まで追記
    methods: {
    ・・・
    app.js
    ←①

    View full-size slide

  43. Check Point!✅
    ● ①の行:new Vue({ });の{}内部にcomputed:{}を用意すると{}の中にvueテン
    プレートの内部で使える計算済みプロパティが定義できる。
    計算済みプロパティとは
    data:{}に登録されている変数に処理を加えてVueテンプレート側で表示できる。
    data: {
    // todoが1000個入ったtodos
    todos: [...]
    },
    computed: {
    todoCount() {
    // todoCountをカンマ区切りにして返す
    }
    }
    {{ todoCount }}
    1,000
    43
    HTML
    HTML
    JS

    View full-size slide

  44. 44



    残り{{ todoCount }}項目



    index.html

    View full-size slide

  45. 要素の表示非表示を切り替えられるように
    しよう
    Todoリストに何も存在しないときは、
    □の部分を表示しないようにしましょう。
    45

    View full-size slide

  46. app.jsを以下のように編集します。
    computed: {
    todoCount() {
    const COMMA_SPLIT_REGEX = /(\d)(?=(\d{3})+$)/g
    // todosの要素数をカンマ区切りにして返す
    return this.todos.length.toString().replace(COMMA_SPLIT_REGEX, '$1,');
    },
    // この下から追記
    existsTodo() {
    return this.todos.length > 0;
    },
    // この上まで追記
    },
    46
    todoリストにtodoが存在したと
    きにtrueを返す
    app.js

    View full-size slide

  47. index.htmlを以下のように編集します。




    ・・・





    ←①
    47
    index.html
    ←①

    View full-size slide

  48. Check Point!✅
    ● ①の行:v-ifディレクティブ
    ○ HTMLタグにv-if=”条件式”と書くと条件式を満たした場合のみ、v-if=”条件
    式”を書いたHTML要素が表示されるようになる。


    見えますか?


    Vueテンプレートをこのように書
    くと・・・


    見えますか?


    foo = trueの場合に出力される HTML


    foo = falseの場合に出力される HTML
    48
    HTML
    HTML
    HTML

    View full-size slide

  49. 最後に
    まだまだ完成とはいえませんが、時間の都合上ここまでとさせていただきます。
    2時間お付き合いいただき、誠にありがとうございます。
    多少はVue.jsのお勉強のお役に立てたでしょうか?
    この勉強会を機会に、みなさんがVue.jsに興味を持っていただけたら幸いです。
    49

    View full-size slide

  50. 実は・・・
    ● このTodoリストにはもっと詳細な機能要件があります。
    ○ readme.mdに書いてあります。更に実装してみたい方は読んでみてくださ
    い。
    ● このTodoリストのテンプレートはTodoMVCという名前で、githubに公開されてい
    るものです。(オープンソース)
    50

    View full-size slide

  51. アンケートの回答をよろしくお願いします。
    51
    https://forms.gle/UP8yxFfebhoMjwwFA

    View full-size slide