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

Vue.jsでのSPA開発の実際

 Vue.jsでのSPA開発の実際

アシアル技術セミナー Vo.2
Webフロントエンド開発最前線
~SPAおよびPWA開発プロジェクトの現場から~
「Vue.jsでのSPA開発の実際」

アシアル株式会社

April 04, 2019
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

Transcript

  1. Vue.jsでのSPA開発の実際
 SAITOU KATSUYA 斉藤 勝也<[email protected]> アシアル株式会社


  2. 斉藤 勝也 Saitou Katsuya
 アシアル株式会社 Web開発チーム
 好きなエディタは Sublime Text (素早く起動するため)
 2010


    2012
 2019
 PHPエンジニア
 SE兼PL
 
 2017
 JSエンジニア,
 ネイティブエンジニア 
 2
  3. • ここ2年ぐらいでVue.jsをSPAに適用して開発
 
 • その中で見えてきた課題や開発方針について話します
 
 • Vue.jsなどの使い方はある程度知っていて、これを実際のア プリに利用したい方を対象としています
 


    今日の話 1/2 3
  4. • 結論
 ◦ Vue.jsでSPAやるとハマる!ことはない ◦ どちらかと言えば、それら以外の課題がある ▪ ローカルPC環境周り ▪ API接続確認周り

    ▪ スマホやサーバー上で展開周り ▪ 納品周り 今日の話 2/2 4
  5. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 目次 5

  6. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 6 SPAとは
 SPA開発の流れ


  7. SPA(Single Page Application)とは 1/2
 Vue.jsでのSPA開発 概要
 7 • 初回のリクエストで、ページ構成に必要なファイルを取得
 •

    その後、必要な情報を都度リクエスト
 ◦ JSON形式でレスポンスを受け取ることが多い • ページの遷移時に、サーバーサイドでのページローディングを挟まない

  8. 都度リクエスト /api/getXxx, /api/setXxx, ... 初回リクエスト index.html, all.js, all.css, .... SPA(Single

    Page Application)とは 2/2
 Vue.jsでのSPA開発 概要
 8 APIサーバー
  9. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 9 SPAとは
 SPA開発の流れ


  10. SPA開発の流れの例
 Vue.jsでのSPA開発 概要
 ローカルPC環境開発 API接続確認 スマホやサーバー 上に展開 納品 10 テストについては省略

  11. • PC上にhttp://localhostで開発できる環境を用意
 • vue-cliなどコマンド一つで環境をセットアップできる
 ローカルPC環境開発
 Vue.jsでのSPA開発 概要 > SPA開発の流れ
 エディタ

    ローカルサーバー ブラウザ 11 ソース コード
  12. • アプリと、外部で作成されたAPIとの接続確認
 API接続確認
 Vue.jsでのSPA開発 概要 > SPA開発の流れ
 12 リクエスト /api/getXxx,

    /api/setXxx, ... APIサーバー
  13. スマホやサーバー上で展開
 Vue.jsでのSPA開発 概要 > SPA開発の流れ
 • ソースを実際に動かしたい環境で、プリコンパイルして
 実行
 ソース コード

    13 HTTPサーバー
  14. • 作成したソースコードを顧客に提出 • 引き継ぎや環境構築などソースコード周りを サポート
 納品
 Vue.jsでのSPA開発 概要 > SPA開発の流れ


    14 ソース コード ソース コード ソース コード
  15. 参考:Vue.js周りの利用実績
 PHP MySQL Vuex webpack Monaca Cordova iOS Android Laravel

    axios vue-cli nginx サーバー環境 モバイル環境 フロントエンド環境 AWS EC2 Vue.js vue- devtools Vue.jsでのSPA開発 概要 > SPA開発の流れ
 15
  16. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 16 ローカルPC環境
 API接続確認
 スマホやサーバー上で展開
 納品


  17. ローカルPC環境開発
 
  lintルールと戦う
 
 17

  18. 課題 ◦ lintルールと書きたい方向性が合わない
 lintルールと戦う 1/2
 課題 > ローカルPC環境開発
 18 //

    no-unused-varsルール toSettings() { let a = "text data" } // yodaルール if (4 < input.length) { ... }
  19. 対応 ◦ チームと相談して、きついルールのレベルを変更 lintルールと戦う 2/2
 課題 > ローカルPC環境開発
 19 "rules":

    { "yoda": "off", "no-unused-vars": "warn" },
  20. ローカルPC環境開発
 
  ユニットテストを実行し終わるまでが長い
 
 20

  21. ユニットテストを実行し終わるまでが長い 1/2
 課題 > ローカルPC環境開発
 21 課題
 ◦ コード修正
 ◦

    書いたコードをプリコンパイル(webpackビルド)
 ◦ ユニットテスト実行
 ◦ ここまで、体感約30秒 - 60秒かかる

  22. 対応
 ◦ 案件にもよるが、ユニットテストではなく、
 結合テストでカバー
 ◦ ナイトリービルドなどで、テストの頻度を下げる
 ユニットテストを実行し終わるまでが長い 2/2
 課題 >

    ローカルPC環境開発
 22
  23. ローカルPC環境開発
 
  脆弱性のあるモジュールが発見された
 
 23

  24. 課題
 ◦ npm install時に脆弱性のあるモジュールが
 利用されていると警告
 ◦ アップデートを試みるも、バージョンが上がらず
 脆弱性のあるモジュールが発見された 1/2
 課題

    > ローカルPC環境開発
 24
  25. 脆弱性のあるモジュールが発見された 2/2
 課題 > ローカルPC環境開発
 25 対応
 ◦ 脆弱性の内容を確認
 ◦

    開発時にしか使わないモジュールであるため 悪用がないと判断

  26. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 26 ローカルPC環境
 API接続確認
 スマホやサーバー上で展開
 納品


  27. API接続確認
 
  localhostとAPIの接続
 
 27

  28. 課題
 ◦ http://localhost 上で開発するも、
 ◦ localhostから用意されているAPIへの許可はされていなく、 接続できない
 ◦ クロスドメイン問題の話
 localhostとAPIの接続

    1/3
 課題 > API接続確認
 28
  29. localhostとAPIの接続 2/3
 課題 > API接続確認
 29 https://xxx.org/api/getXxx http://localhost APIサーバー

  30. 対応
 ◦ localhostからのアクセスを許可してもらう依頼
 ▪ サーバー構成次第
 ◦ 社内でスタブサーバーを作成
 ▪ APIの仕様次第
 localhostとAPIの接続

    3/3
 課題 > API接続確認
 30
  31. API接続確認
 
  APIの仕様変更
 
 31

  32. 課題
 ◦ APIの仕様変更が予告なくあった
 ◦ 例: 型が変わった
 ▪ { isDone :

    true } -> { isDone : “true” } APIの仕様変更 1/3
 課題 > API接続確認
 32
  33. 対応
 ◦ propsという仕様で型を定義することで
 API側かクライアント側の問題かを
 素早く切り分けることができた。
 APIの仕様変更 2/3
 課題 > API接続確認


    33
  34. APIの仕様変更 3/3
 課題 > API接続確認
 34

  35. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 35 ローカルPC環境
 API接続確認
 スマホやサーバー上で展開
 納品


  36. スマホやサーバー上で展開
 
  スマートフォンへのアプリ展開方法
 
 36

  37. 課題
 ◦ WebViewベースのアプリを作成する ◦ アプリの確認までに、JavaScriptをプリコンパイル、続いて ネイティブでのビルドを行う ◦ この流れが時間を食いやすく、スマホでデバッグする気に なれない スマートフォンへのアプリ展開方法

    1/3
 課題 > スマホやサーバー上で展開
 37
  38. 対応
 ◦ 弊社製サービスMonacaを利用 ◦ ネイティブビルドをスキップでき、 スマホ上での開発・確認サイクルが早くなる
 スマートフォンへのアプリ展開方法 2/3
 課題 >

    スマホやサーバー上で展開
 38
  39. スマートフォンへのアプリ展開方法 3/3
 課題 > スマホやサーバー上で展開
 39 プリコンパイル ネイティブビルド 確認 プリコンパイル

    確認 従来
  40. スマホやサーバー上で展開
 
  画像の初回ローディングの時間
 
 40

  41. 課題
 ◦ 必要な画像などは初回にローディング ◦ しかしスマホでは、ネットワークやCPUなどの状態で、PCよ りもローディングが遅くなる 画像の初回ローディング 1/3
 課題 >

    スマホやサーバー上で展開
 41
  42. 画像の初回ローディング 2/3
 課題 > スマホやサーバー上で展開
 42 初回リクエスト …, aaa.jpg, bbb.jpg,

    ... APIサーバー
  43. 対応
 ◦ 圧縮サイズを下げる 画像の初回ローディング 3/3
 課題 > スマホやサーバー上で展開
 43 46KB

    30KB - 35%
  44. スマホやサーバー上で展開
 
  実行時エラーが追いかけづらい
 
 44

  45. 課題 ◦ プリコンパイルしたアプリの実行中、 エラーが発生したためJSを確認する
 ◦ しかし、ソースは圧縮化されて追いづらい 実行時エラーが追いかけづらい 1/4
 課題 >

    スマホやサーバー上で展開
 45
  46. 実行時エラーが追いかけづらい 2/4
 課題 > スマホやサーバー上で展開
 46

  47. 対応 ◦ ChromeやSafariの開発者ツールを利用して、
 読みやすい形式に変換
 ◦ さらにブレークポイントを設定することで、
 各変数のその時の値を知ることができる
 実行時エラーが追いかけづらい 3/4
 課題

    > スマホやサーバー上で展開
 47
  48. 実行時エラーが追いかけづらい 4/4
 課題 > スマホやサーバー上で展開
 48

  49. スマホやサーバー上で展開
 
  日付オブジェクト生成でエラー
 
 49

  50. 課題
 ◦ API越しに文字列を取得し、JS側で日付オブジェクトを生成
 ◦ しかしiOS端末では、以下のJSでは失敗する
 ◦ new Date("2019-12-11 12:00:00")
 日付オブジェクト生成でエラー

    1/2
 課題 > スマホやサーバー上で展開
 50
  51. 対応
 ◦ 実行環境ごとに実行可能な文字列を確かめる
 ◦ 例:new Date("2019/12/11 12:00:00") 
 ※MySQLから返す値を利用すると、正常な値に見え、気づきにくい
 日付オブジェクト生成でエラー

    2/2
 課題 > スマホやサーバー上で展開
 51
  52. スマホやサーバー上で展開
 
  サーバー上に展開
 
 52

  53. 課題
 ◦ SPAをAWS EC2上に展開する過程で、
 npm installするも、メモリエラー
 ◦ 無料枠があるため選びがちな、t2.microという
 インスタンスが1GBメモリしかない
 サーバー上に展開

    1/2
 課題 > スマホやサーバー上で展開
 53
  54. サーバー上に展開 2/2
 課題 > スマホやサーバー上で展開
 54 対応
 ◦ t2.mediumなど、メモリを4GBぐらいは確保する
 ◦

    npm install以外にも、PHPでのcomposer installでも
 起きることがあり、1GBではメモリが少ない認識
 を持っておいたほうがいい

  55. サーバー上に展開 2/2
 課題 > スマホやサーバー上で展開
 55

  56. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 56 ローカルPC環境
 API接続確認
 スマホやサーバー上で展開
 納品


  57. 納品
 
  納品後の環境でnpm install
 
 57

  58. 課題
 ◦ 開発中は、社内からしかアクセスできないリポジトリ
 からモジュールをnpm installして開発
 ◦ 納品後など別環境からはリポジトリを
 参照できないため、当然、npm installに失敗する
 納品後の環境でnpm

    install 1/2
 課題 > 納品
 58
  59. 納品後の環境でnpm install 2/2
 課題 > 納品
 59 対応
 ◦ ソースコードと一緒に、インストール元モジュールを渡して

    対応 ◦ package.jsonを納品時に見直す必要がある
  60. 納品
 
  引き継ぎ時の説明
 
 60

  61. 課題
 ◦ アプリを納品し、引き継ぎ会でアプリの構造を説明 ◦ どのコードが画面のどこに当たるのかが
 分かりにくい、という指摘が入る
 引き継ぎ時の説明 1/5
 課題 >

    納品
 61
  62. 引き継ぎ時の説明 2/5
 課題 > 納品
 62

  63. 引き継ぎ時の説明 3/5
 課題 > 納品
 63 対応
 ◦ ソースコードと画面の対応図を作成
 ◦

    vue-devtoolsを利用して、確認してもらう
 
 ※命名次第でソースのどの部分が、画面のどこに対応するかが、
  分かりにくくなることがある。

  64. 引き継ぎ時の説明 4/5
 課題 > 納品
 64

  65. 引き継ぎ時の説明 5/5
 課題 > 納品
 65

  66. 
 Vue.jsでのSPA開発 概要
 課題
 まとめ
 66

  67. Vue.jsを使ったSPAは課題が少ないと感じる
 まとめ 1/3
 67

  68. ただ、ローカルでの開発や実際の環境で
 確認する中で課題が発生する
 まとめ 2/3
 68

  69. 各ツールでは対策されづらい部分であるため
 こういった知見を広げてほしい
 まとめ 3/3
 69

  70. 70