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

Transcript

1. JavaScript も jQuery も未経験の新人エ
   ンジニアが 1 年間 Vue.js を
   学習して感じた話
   株式会社ラクス　川又 由雅
   FRONTEND CONFERENCE 2019
   

   View Slide

2. 自己紹介
   ● 川又 由雅
   ● 株式会社ラクス
   ● 業務で経験した言語
   ○ PHP（Laravel）
   ○ HTML, CSS
   ○ JavaScript, jQuery, Vue.js
   ● Chat Dealerの開発に携わっている
   2
   

   View Slide

3. 定期的に勉強会を開催中！
   3
   https://rakus.connpass.com/
   

   View Slide

4. この発表のターゲット
   ● これから Vue.js を学び始める人
   ○ 勉強法、つまづいたときの解決法など
   ● Vue.js を教える人
   ○ Vue.jsを初めて学ぶ人がどこにつまづくか、解決さ
   せるにはどうすればよいか
   4
   

   View Slide

5. 目次
   ● Vue.js との出会い
   ● Vue.js の学習方法
   ● 開発業務で Vue.js を使ってみて苦労したこと
   ● Vue.js と jQuery を使いこなせるようになってきて
   ● これから Vue.js を学び始める人へ
   ● まとめ
   5
   

   View Slide

6. Vue.js との出会い
   6
   

   View Slide

7. Vue.js とは？
   ● 2014 年にリリースされた JavaScript のフレームワーク
   ● 2015 年には PHP のフレームワーク「Laravel」のフロン
   トエンドエンジンに採用され、知名度が上昇
   ● Adobe や任天堂、LINE など有名な企業で広く採用され
   ている
   7
   

   View Slide

8. Vue.js とは？
   ● JavaScript のデータを更新するだけで描画されている
   内容も更新される（データバインディング）
   ● 一度作ったリソースの再利用を得意としている（コン
   ポーネント）
   8
   

   View Slide

9. Vue.js を触ったきっかけ
   ● 研修で Vue.js の学習を行った
   ○ 配属された部署で開発している「Chat Dealer」はフ
   ロントエンドに Vue.js や jQuery が用いられている
   9
   

   View Slide

10. Chat Dealer とは？
    ● サイトに専用スクリプトを埋め込んで利用するチャットシ
    ステム
    10
    

    View Slide

11. Chat Dealer で Vue.js を使うところ
    ● 管理画面
    11
    

    View Slide

12. Vue.js の学習
    12
    

    View Slide

13. Vue.js の勉強の流れ
    まずは教科書を読む
    ● 「基礎から学ぶ Vue.js」mio 著
    ● Vue.js がどんなものなのか知る
    ● サンプルコードが豊富
    ● Vue.js について詳しく書かれている
    13
    

    View Slide

14. Vue.js の勉強の流れ
    Web 上でコードを書いてみる（JSFiddle）
    ● 公式ドキュメントを読みながら書いてみる
    ● 教科書のサンプルコードを読みながら書いてみる
    ● ちゃんと説明通り動くか確認
    ● https://jsfiddle.net/
    14
    

    View Slide

15. View Slide

16. Vue.js に対して感じたこと
    ● 機能が豊富
    ○ データバインディング
    ○ v-if（分岐）
    ○ v-for（繰り返し） ...etc
    ● 記述がシンプル
    ○ データ、メソッドの構成がわかりやすい
    16
    

    View Slide

17. 便利な機能
    ● データバインディング
    ○ データを更新するだけで描画内容が更新される
    ○ 入力内容をプレビューとして表示するときに変更が
    すぐ反映されて便利
    ○ 入力してすぐに描画内容が変わったことに驚いた
    17
    

    View Slide

18. 18
    ここでデータバ
    インディングを
    行う
    使用する
    データ
    

    View Slide

19. 便利な機能
    19
    

    View Slide

20. 便利な機能
    ● v-if
    ○ 入力内容によって表示⇔非表示を変える
    ○ ブロックの表示⇔非表示を簡単に切り替えられて
    便利
    ○ データとv-ifを使うだけでブロックの表示⇔非表示を
    切り替えられて驚いた
    20
    

    View Slide

21. 21
    表示⇔非表示
    の判定を行う
    使用するデータ
    

    View Slide

22. 22
    isShow == trueのとき
    isShow == falseのとき
    

    View Slide

23. 便利な機能
    ● v-for
    ○ 配列として格納しているデータの中身を繰り返し描
    画する
    ○ 簡単に配列の中身をループすることができてうれし
    い
    ○ 繰り返し処理の記述の簡単さに驚いた
    23
    

    View Slide

24. 24
    使用する配列
    リストで配列
    の中身を繰り
    返し描画
    

    View Slide

25. 25
    実行結果
    

    View Slide

26. シンプルな記述
    ● 構成に関してどこに何を書くべきかわかりやすい
    ○ データ（data）
    ○ メソッド（methods）
    26
    

    View Slide

27. 開発業務で Vue.js を
    使ってみて苦労したこと
    27
    

    View Slide

28. コンポーネント
    ● 開発中のコードで、設定したデータがどう動いているか
    理解するのに苦労した
    ○ コードの量が多くて整理しづらかった
    →デバッグを用いてデータの流れをメモしながら整
    理する
    28
    

    View Slide

29. コンポーネント
    ● 教科書を読んでもなかなかコンポーネントを理解できな
    かった
    →教科書をじっくり読んで理解できないときは先輩
    に聞く
    29
    

    View Slide

30. イベントハンドラ
    ● イベントハンドラ：ボタンをクリックしてアラートを出すな
    ど処理を行う
    30
    

    View Slide

31. 31
    使用するイベントハ
    ンドラ（ボタンをク
    リックすると発動）
    「data中のname
    (“Vue.js”)」とイベント
    を起こしたタグの名
    前(button)をアラート
    で表示
    

    View Slide

32. イベントハンドラ
    ● 引数に入れる「event」をどう使えばよいかわからな
    かった
    →不明点を先輩に教えてもらった
    Web上のサンプルコードや教則動画を見てみる
    32
    

    View Slide

33. Vue.js と jQuery を
    使いこなせるように
    なってきて
    33
    

    View Slide

34. jQuery に対する所感
    ● Vue.js と違って使用する範囲を指定しないのは自由に
    書けていい
    ○ Vue.js で使用する範囲がかぶるとエラーになる
    34
    

    View Slide

35. 35
    かぶると
    エラーが
    発生
    

    View Slide

36. jQuery に対する所感
    ● class, id による検索など構文の書き方が面倒
    ○ Vue.js は使いたい要素に書けばよいが、jQuery は
    class, id から検索する
    ○ 運用も Vue.js の方が楽に感じる
    36
    

    View Slide

37. jQuery に対する所感
    ● jQuery
    37
    class 名を検索
    

    View Slide

38. ● Vue.js
    jQuery に対する所感
    38
    要素を直接指定
    

    View Slide

39. Vue.jsに対する所感
    ● 機能が豊富で多くのことが実現できてうれしい
    ○ for 文による繰り返し
    ○ if 文による分岐処理 ...etc
    ● 記述がシンプルで理解しやすい
    ● 半年から1年にかけてコンポーネントがスラスラ書ける
    ようになり、理解が深まったことを実感した
    39
    

    View Slide

40. 比較してどう感じたか
    ● Vue.js のほうが書き方がシンプルに感じた
    ○ v-for のように配列を用いた繰り返しが簡単に書け
    て良い
    ○ v-if のように表示⇔非表示が簡単に書けて良い
    ○ 対象の要素に直接書き込んで使えて良い
    ● Vue.jsは使用する範囲を指定するところが面倒
    40
    

    View Slide

41. これから Vue.js を
    学び始める人へ
    41
    

    View Slide

42. おすすめの Vue.js の学習法
    1. サンプルコードを記述して実行
    ○ 公式ドキュメント、教科書を参照する
    　　　→実際に書いてみることで知識が定着する
    ○ 業務で教科書の「4章：データの加工と監視」のゲッ
    ター、セッターは非常に役に立った
    42
    

    View Slide

43. おすすめの Vue.js の学習法
    2. 学習したことを取り入れたページを作ってみる
    ○ TODOリスト
    →学んだことをどう使うか考えるのでより理解が深
    まる
    43
    

    View Slide

44. まとめ
    44
    

    View Slide

45. まとめ
    45
    ● 公式ドキュメントなど日本語のドキュメントが豊富で学
    習しやすかった
    ● 記述がシンプルで理解しやすかった
    

    View Slide

46. まとめ
    46
    ● コンポーネントは導入は難しいが理解できれば便利で
    うれしい
    ● jQuery と比較して記述がシンプルで良い
    ● 理解を深めるならサンプルコードを書くだけでなく、学
    習したことを取り入れたページを作成してみるのも良い
    

    View Slide

47. まとめ
    47
    ● Vue.jsの内容で理解が不足しているポイントがないか
    探して、もう1度学び直したい
    ● 自分でページを作ってみたい
    ○ TODO リスト
    ○ チャットアプリ ...etc
    

    View Slide