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

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

063859d1457e4ea7372097688c41e1c9?s=47 yugkwmt
November 01, 2019

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

063859d1457e4ea7372097688c41e1c9?s=128

yugkwmt

November 01, 2019
Tweet

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
  15. 15

  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