アシアル技術セミナー Vo.2 Webフロントエンド開発最前線 ～SPAおよびPWA開発プロジェクトの現場から～ 「Vue.jsでのSPA開発の実際」
Vue.jsでのSPA開発の実際 SAITOU KATSUYA斉藤 勝也アシアル株式会社
View Slide
斉藤 勝也 Saitou Katsuya アシアル株式会社 Web開発チーム 好きなエディタは Sublime Text （素早く起動するため） 2010 2012 2019 PHPエンジニア SE兼PL 2017 JSエンジニア, ネイティブエンジニア 2
● ここ2年ぐらいでVue.jsをSPAに適用して開発 ● その中で見えてきた課題や開発方針について話します ● Vue.jsなどの使い方はある程度知っていて、これを実際のアプリに利用したい方を対象としています 今日の話 1/23
● 結論 ○ Vue.jsでSPAやるとハマる！ことはない○ どちらかと言えば、それら以外の課題がある■ ローカルPC環境周り■ API接続確認周り■ スマホやサーバー上で展開周り■ 納品周り今日の話 2/24
Vue.jsでのSPA開発 概要 課題 まとめ 目次5
Vue.jsでのSPA開発 概要 課題 まとめ 6SPAとは 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開発 概要 8APIサーバー
Vue.jsでのSPA開発 概要 課題 まとめ 9SPAとは 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開発の流れ ● ソースを実際に動かしたい環境で、プリコンパイルして 実行 ソースコード13HTTPサーバー
● 作成したソースコードを顧客に提出● 引き継ぎや環境構築などソースコード周りをサポート 納品 Vue.jsでのSPA開発 概要 ＞ SPA開発の流れ 14ソースコードソースコードソースコード
参考：Vue.js周りの利用実績 PHPMySQL VuexwebpackMonaca CordovaiOS AndroidLaravelaxiosvue-clinginxサーバー環境 モバイル環境フロントエンド環境AWSEC2Vue.jsvue-devtoolsVue.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対応 ○ 脆弱性の内容を確認 ○ 開発時にしか使わないモジュールであるため悪用がないと判断
Vue.jsでのSPA開発 概要 課題 まとめ 26ローカルPC環境 API接続確認 スマホやサーバー上で展開 納品
API接続確認 localhostとAPIの接続 27
課題 ○ http://localhost 上で開発するも、 ○ localhostから用意されているAPIへの許可はされていなく、接続できない ○ クロスドメイン問題の話 localhostとAPIの接続 1/3 課題 ＞ API接続確認 28
localhostとAPIの接続 2/3 課題 ＞ API接続確認 29https://xxx.org/api/getXxxhttp://localhostAPIサーバー
対応 ○ 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
Vue.jsでのSPA開発 概要 課題 まとめ 35ローカルPC環境 API接続確認 スマホやサーバー上で展開 納品
スマホやサーバー上で展開 スマートフォンへのアプリ展開方法 36
課題 ○ WebViewベースのアプリを作成する○ アプリの確認までに、JavaScriptをプリコンパイル、続いてネイティブでのビルドを行う○ この流れが時間を食いやすく、スマホでデバッグする気になれないスマートフォンへのアプリ展開方法 1/3 課題 ＞ スマホやサーバー上で展開 37
対応 ○ 弊社製サービスMonacaを利用○ ネイティブビルドをスキップでき、スマホ上での開発・確認サイクルが早くなる スマートフォンへのアプリ展開方法 2/3 課題 ＞ スマホやサーバー上で展開 38
スマートフォンへのアプリ展開方法 3/3 課題 ＞ スマホやサーバー上で展開 39プリコンパイル ネイティブビルド 確認プリコンパイル 確認従来
スマホやサーバー上で展開 画像の初回ローディングの時間 40
課題 ○ 必要な画像などは初回にローディング○ しかしスマホでは、ネットワークやCPUなどの状態で、PCよりもローディングが遅くなる画像の初回ローディング 1/3 課題 ＞ スマホやサーバー上で展開 41
画像の初回ローディング 2/3 課題 ＞ スマホやサーバー上で展開 42初回リクエスト…, aaa.jpg, bbb.jpg, ... APIサーバー
対応 ○ 圧縮サイズを下げる画像の初回ローディング 3/3 課題 ＞ スマホやサーバー上で展開 4346KB 30KB- 35%
スマホやサーバー上で展開 実行時エラーが追いかけづらい 44
課題○ プリコンパイルしたアプリの実行中、エラーが発生したためJSを確認する ○ しかし、ソースは圧縮化されて追いづらい実行時エラーが追いかけづらい 1/4 課題 ＞ スマホやサーバー上で展開 45
実行時エラーが追いかけづらい 2/4 課題 ＞ スマホやサーバー上で展開 46
対応○ ChromeやSafariの開発者ツールを利用して、 読みやすい形式に変換 ○ さらにブレークポイントを設定することで、 各変数のその時の値を知ることができる 実行時エラーが追いかけづらい 3/4 課題 ＞ スマホやサーバー上で展開 47
実行時エラーが追いかけづらい 4/4 課題 ＞ スマホやサーバー上で展開 48
スマホやサーバー上で展開 日付オブジェクト生成でエラー 49
課題 ○ API越しに文字列を取得し、JS側で日付オブジェクトを生成 ○ しかしiOS端末では、以下のJSでは失敗する ○ new Date("2019-12-11 12:00:00") 日付オブジェクト生成でエラー 1/2 課題 ＞ スマホやサーバー上で展開 50
対応 ○ 実行環境ごとに実行可能な文字列を確かめる ○ 例：new Date("2019/12/11 12:00:00") ※MySQLから返す値を利用すると、正常な値に見え、気づきにくい 日付オブジェクト生成でエラー 2/2 課題 ＞ スマホやサーバー上で展開 51
スマホやサーバー上で展開 サーバー上に展開 52
課題 ○ SPAをAWS EC2上に展開する過程で、 npm installするも、メモリエラー ○ 無料枠があるため選びがちな、t2.microという インスタンスが1GBメモリしかない サーバー上に展開 1/2 課題 ＞ スマホやサーバー上で展開 53
サーバー上に展開 2/2 課題 ＞ スマホやサーバー上で展開 54対応 ○ t2.mediumなど、メモリを4GBぐらいは確保する ○ npm install以外にも、PHPでのcomposer installでも 起きることがあり、1GBではメモリが少ない認識 を持っておいたほうがいい
サーバー上に展開 2/2 課題 ＞ スマホやサーバー上で展開 55
Vue.jsでのSPA開発 概要 課題 まとめ 56ローカルPC環境 API接続確認 スマホやサーバー上で展開 納品
納品 納品後の環境で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を利用して、確認してもらう ※命名次第でソースのどの部分が、画面のどこに対応するかが、 分かりにくくなることがある。
引き継ぎ時の説明 4/5 課題 ＞ 納品 64
引き継ぎ時の説明 5/5 課題 ＞ 納品 65
Vue.jsでのSPA開発 概要 課題 まとめ 66
Vue.jsを使ったSPAは課題が少ないと感じる まとめ 1/3 67
ただ、ローカルでの開発や実際の環境で 確認する中で課題が発生する まとめ 2/3 68
各ツールでは対策されづらい部分であるため こういった知見を広げてほしい まとめ 3/3 69
70
asial_corp
mosa_siru
revcomm_inc
nagix
is_ryo
clairegiordano
joker1007
tsukubachallenge
dahatake
hakubishin3
smt7174
sansantech
minorun365
stephaniewalter
mojombo
geeforr
hursman
chriscoyier
shlominoach
aki_iinuma
marcduiker
philhawksworth
zakiwarfel
jrom
samanthasiow