JavaScript も jQuery も未経験の新人エンジニアが 1 年間 Vue.js を 学習して感じた話 / frontend conference 2019

Transcript

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