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

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

yugkwmt
November 01, 2019

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

yugkwmt

November 01, 2019
Tweet

More Decks by yugkwmt

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Vue.js との出会い
    6

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Vue.js の学習
    12

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 便利な機能
    19

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ○ 繰り返し処理の記述の簡単さに驚いた
    23

    View full-size slide

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

    View full-size slide

  24. 25
    実行結果

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide