Slide 1
Slide 1 text
JavaScript も jQuery も未経験の新人エ
ンジニアが 1 年間 Vue.js を
学習して感じた話
株式会社ラクス 川又 由雅
FRONTEND CONFERENCE 2019
Slide 2
Slide 2 text
自己紹介
● 川又 由雅
● 株式会社ラクス
● 業務で経験した言語
○ PHP（Laravel）
○ HTML, CSS
○ JavaScript, jQuery, Vue.js
● Chat Dealerの開発に携わっている
2
Slide 3
Slide 3 text
定期的に勉強会を開催中！
3
https://rakus.connpass.com/
Slide 4
Slide 4 text
この発表のターゲット
● これから Vue.js を学び始める人
○ 勉強法、つまづいたときの解決法など
● Vue.js を教える人
○ Vue.jsを初めて学ぶ人がどこにつまづくか、解決さ
せるにはどうすればよいか
4
Slide 5
Slide 5 text
目次
● Vue.js との出会い
● Vue.js の学習方法
● 開発業務で Vue.js を使ってみて苦労したこと
● Vue.js と jQuery を使いこなせるようになってきて
● これから Vue.js を学び始める人へ
● まとめ
5
Slide 6
Slide 6 text
Vue.js との出会い
6
Slide 7
Slide 7 text
Vue.js とは？
● 2014 年にリリースされた JavaScript のフレームワーク
● 2015 年には PHP のフレームワーク「Laravel」のフロン
トエンドエンジンに採用され、知名度が上昇
● Adobe や任天堂、LINE など有名な企業で広く採用され
ている
7
Slide 8
Slide 8 text
Vue.js とは？
● JavaScript のデータを更新するだけで描画されている
内容も更新される（データバインディング）
● 一度作ったリソースの再利用を得意としている（コン
ポーネント）
8
Slide 9
Slide 9 text
Vue.js を触ったきっかけ
● 研修で Vue.js の学習を行った
○ 配属された部署で開発している「Chat Dealer」はフ
ロントエンドに Vue.js や jQuery が用いられている
9
Slide 10
Slide 10 text
Chat Dealer とは？
● サイトに専用スクリプトを埋め込んで利用するチャットシ
ステム
10
Slide 11
Slide 11 text
Chat Dealer で Vue.js を使うところ
● 管理画面
11
Slide 12
Slide 12 text
Vue.js の学習
12
Slide 13
Slide 13 text
Vue.js の勉強の流れ
まずは教科書を読む
● 「基礎から学ぶ Vue.js」mio 著
● Vue.js がどんなものなのか知る
● サンプルコードが豊富
● Vue.js について詳しく書かれている
13
Slide 14
Slide 14 text
Vue.js の勉強の流れ
Web 上でコードを書いてみる（JSFiddle）
● 公式ドキュメントを読みながら書いてみる
● 教科書のサンプルコードを読みながら書いてみる
● ちゃんと説明通り動くか確認
● https://jsfiddle.net/
14
Slide 15
Slide 15 text
15
Slide 16
Slide 16 text
Vue.js に対して感じたこと
● 機能が豊富
○ データバインディング
○ v-if（分岐）
○ v-for（繰り返し） ...etc
● 記述がシンプル
○ データ、メソッドの構成がわかりやすい
16
Slide 17
Slide 17 text
便利な機能
● データバインディング
○ データを更新するだけで描画内容が更新される
○ 入力内容をプレビューとして表示するときに変更が
すぐ反映されて便利
○ 入力してすぐに描画内容が変わったことに驚いた
17
Slide 18
Slide 18 text
18
ここでデータバ
インディングを
行う
使用する
データ
Slide 19
Slide 19 text
便利な機能
19
Slide 20
Slide 20 text
便利な機能
● v-if
○ 入力内容によって表示⇔非表示を変える
○ ブロックの表示⇔非表示を簡単に切り替えられて
便利
○ データとv-ifを使うだけでブロックの表示⇔非表示を
切り替えられて驚いた
20
Slide 21
Slide 21 text
21
表示⇔非表示
の判定を行う
使用するデータ
Slide 22
Slide 22 text
22
isShow == trueのとき
isShow == falseのとき
Slide 23
Slide 23 text
便利な機能
● v-for
○ 配列として格納しているデータの中身を繰り返し描
画する
○ 簡単に配列の中身をループすることができてうれし
い
○ 繰り返し処理の記述の簡単さに驚いた
23
Slide 24
Slide 24 text
24
使用する配列
リストで配列
の中身を繰り
返し描画
Slide 25
Slide 25 text
25
実行結果
Slide 26
Slide 26 text
シンプルな記述
● 構成に関してどこに何を書くべきかわかりやすい
○ データ（data）
○ メソッド（methods）
26
Slide 27
Slide 27 text
開発業務で Vue.js を
使ってみて苦労したこと
27
Slide 28
Slide 28 text
コンポーネント
● 開発中のコードで、設定したデータがどう動いているか
理解するのに苦労した
○ コードの量が多くて整理しづらかった
→デバッグを用いてデータの流れをメモしながら整
理する
28
Slide 29
Slide 29 text
コンポーネント
● 教科書を読んでもなかなかコンポーネントを理解できな
かった
→教科書をじっくり読んで理解できないときは先輩
に聞く
29
Slide 30
Slide 30 text
イベントハンドラ
● イベントハンドラ：ボタンをクリックしてアラートを出すな
ど処理を行う
30
Slide 31
Slide 31 text
31
使用するイベントハ
ンドラ（ボタンをク
リックすると発動）
「data中のname
(“Vue.js”)」とイベント
を起こしたタグの名
前(button)をアラート
で表示
Slide 32
Slide 32 text
イベントハンドラ
● 引数に入れる「event」をどう使えばよいかわからな
かった
→不明点を先輩に教えてもらった
Web上のサンプルコードや教則動画を見てみる
32
Slide 33
Slide 33 text
Vue.js と jQuery を
使いこなせるように
なってきて
33
Slide 34
Slide 34 text
jQuery に対する所感
● Vue.js と違って使用する範囲を指定しないのは自由に
書けていい
○ Vue.js で使用する範囲がかぶるとエラーになる
34
Slide 35
Slide 35 text
35
かぶると
エラーが
発生
Slide 36
Slide 36 text
jQuery に対する所感
● class, id による検索など構文の書き方が面倒
○ Vue.js は使いたい要素に書けばよいが、jQuery は
class, id から検索する
○ 運用も Vue.js の方が楽に感じる
36
Slide 37
Slide 37 text
jQuery に対する所感
● jQuery
37
class 名を検索
Slide 38
Slide 38 text
● Vue.js
jQuery に対する所感
38
要素を直接指定
Slide 39
Slide 39 text
Vue.jsに対する所感
● 機能が豊富で多くのことが実現できてうれしい
○ for 文による繰り返し
○ if 文による分岐処理 ...etc
● 記述がシンプルで理解しやすい
● 半年から1年にかけてコンポーネントがスラスラ書ける
ようになり、理解が深まったことを実感した
39
Slide 40
Slide 40 text
比較してどう感じたか
● Vue.js のほうが書き方がシンプルに感じた
○ v-for のように配列を用いた繰り返しが簡単に書け
て良い
○ v-if のように表示⇔非表示が簡単に書けて良い
○ 対象の要素に直接書き込んで使えて良い
● Vue.jsは使用する範囲を指定するところが面倒
40
Slide 41
Slide 41 text
これから Vue.js を
学び始める人へ
41
Slide 42
Slide 42 text
おすすめの Vue.js の学習法
1. サンプルコードを記述して実行
○ 公式ドキュメント、教科書を参照する
→実際に書いてみることで知識が定着する
○ 業務で教科書の「4章：データの加工と監視」のゲッ
ター、セッターは非常に役に立った
42
Slide 43
Slide 43 text
おすすめの Vue.js の学習法
2. 学習したことを取り入れたページを作ってみる
○ TODOリスト
→学んだことをどう使うか考えるのでより理解が深
まる
43
Slide 44
Slide 44 text
まとめ
44
Slide 45
Slide 45 text
まとめ
45
● 公式ドキュメントなど日本語のドキュメントが豊富で学
習しやすかった
● 記述がシンプルで理解しやすかった
Slide 46
Slide 46 text
まとめ
46
● コンポーネントは導入は難しいが理解できれば便利で
うれしい
● jQuery と比較して記述がシンプルで良い
● 理解を深めるならサンプルコードを書くだけでなく、学
習したことを取り入れたページを作成してみるのも良い
Slide 47
Slide 47 text
まとめ
47
● Vue.jsの内容で理解が不足しているポイントがないか
探して、もう1度学び直したい
● 自分でページを作ってみたい
○ TODO リスト
○ チャットアプリ ...etc