Vue.jsでのSPA開発の実際

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

斉藤勝也　Saitou Katsuya  アシアル株式会社 Web開発チーム  好きなエディタは Sublime Text （素早く起動するため）  2010 
2012  2019  PHPエンジニア  SE兼PL    2017  JSエンジニア,  ネイティブエンジニア   2

• ここ2年ぐらいでVue.jsをSPAに適用して開発    • その中で見えてきた課題や開発方針について話します    • Vue.jsなどの使い方はある程度知っていて、これを実際のアプリに利用したい方を対象としています   
今日の話 1/2 3

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

  Vue.jsでのSPA開発概要  課題  まとめ  目次 5

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

SPA（Single Page Application）とは 1/2  Vue.jsでのSPA開発概要  7 • 初回のリクエストで、ページ構成に必要なファイルを取得  •
その後、必要な情報を都度リクエスト  ◦ JSON形式でレスポンスを受け取ることが多い • ページの遷移時に、サーバーサイドでのページローディングを挟まない 

都度リクエスト /api/getXxx, /api/setXxx, ... 初回リクエスト index.html, all.js, all.css, .... SPA（Single
Page Application）とは 2/2  Vue.jsでのSPA開発概要  8 APIサーバー

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

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

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

• アプリと、外部で作成されたAPIとの接続確認  API接続確認  Vue.jsでのSPA開発概要＞ SPA開発の流れ  12 リクエスト /api/getXxx,
/api/setXxx, ... APIサーバー

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

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

参考：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

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

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

課題 ◦ lintルールと書きたい方向性が合わない  lintルールと戦う 1/2  課題＞ローカルPC環境開発  18 //
no-unused-varsルール toSettings() { let a = "text data" } // yodaルール if (4 < input.length) { ... }

対応 ◦ チームと相談して、きついルールのレベルを変更 lintルールと戦う 2/2  課題＞ローカルPC環境開発  19 "rules":
{ "yoda": "off", "no-unused-vars": "warn" },

ローカルPC環境開発    　ユニットテストを実行し終わるまでが長い    20

ユニットテストを実行し終わるまでが長い 1/2  課題＞ローカルPC環境開発  21 課題  ◦ コード修正  ◦
書いたコードをプリコンパイル（webpackビルド）  ◦ ユニットテスト実行  ◦ ここまで、体感約30秒 - 60秒かかる 

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

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

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

脆弱性のあるモジュールが発見された 2/2  課題＞ローカルPC環境開発  25 対応  ◦ 脆弱性の内容を確認  ◦
開発時にしか使わないモジュールであるため悪用がないと判断 

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

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

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

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

API接続確認    　APIの仕様変更    31

課題  ◦ APIの仕様変更が予告なくあった  ◦ 例: 型が変わった  ▪ { isDone :
true } -> { isDone : “true” } APIの仕様変更 1/3  課題＞ API接続確認  32

対応  ◦ propsという仕様で型を定義することで  API側かクライアント側の問題かを  素早く切り分けることができた。  APIの仕様変更 2/3  課題＞ API接続確認 
33

APIの仕様変更 3/3  課題＞ API接続確認  34

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

対応  ◦ 実行環境ごとに実行可能な文字列を確かめる  ◦ 例：new Date("2019/12/11 12:00:00")   ※MySQLから返す値を利用すると、正常な値に見え、気づきにくい  日付オブジェクト生成でエラー

スマホやサーバー上で展開    　サーバー上に展開    52

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

サーバー上に展開 2/2  課題＞スマホやサーバー上で展開  54 対応  ◦ t2.mediumなど、メモリを4GBぐらいは確保する  ◦
npm install以外にも、PHPでのcomposer installでも  起きることがあり、1GBではメモリが少ない認識  を持っておいたほうがいい 

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

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

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

納品後の環境でnpm install 2/2  課題＞納品  59 対応  ◦ ソースコードと一緒に、インストール元モジュールを渡して
対応 ◦ package.jsonを納品時に見直す必要がある

納品    　引き継ぎ時の説明    60

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

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

引き継ぎ時の説明 3/5  課題＞納品  63 対応  ◦ ソースコードと画面の対応図を作成  ◦
vue-devtoolsを利用して、確認してもらう    ※命名次第でソースのどの部分が、画面のどこに対応するかが、  　分かりにくくなることがある。 

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

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

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

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

Vue.jsでのSPA開発の実際

Vue.jsでのSPA開発の実際

More Decks by アシアル株式会社

Other Decks in Technology

Featured

Transcript