Business.vue vol.1

1. アイスタイル特設サイトにおける
Vue.jsの導入事例(再演)
Business.vue vol.1 @kubotak_public

2. 本日予定していた内容を変更して
お届けしております。

3. Profile. ~ 2015/08 istyle.inc
久保田 賢二朗
● PHP(Laravel/Phalcon)
● JavaScript(Vue.js/Svelte)
● Go
● Scala
kenjiro kubota @kubotak_public
テクノロジー本部 R&D 部技術開発部 チーフエンジニア
Laravel JP Conference 2020 コアスタッフ / RoppongiDesignersメンバー

4. PR.
株式会社アイスタイル
istyle Inc.
インターネットのコスメ情報ポータルサイト
「＠ｃｏｓｍｅ（アットコスメ）」
の開発・運営
コスメだけではなくビューティ全般、日本だけではなく世界で"Beauty"
に係る人や企業、個人事業主が活躍できるプラットフォームを作る。
アイスタイルは、「Beauty×IT」の世界ナンバーワンを目指します。

5. @ｃｏｓｍｅ Beauty Day 2018
特設サイトでVue.jsを導入
国内最大級
1,900ブランド
35,000アイテム
20%ポイント還元
1日限りのキャンペーン
全国58局に対して
11/27-12/4まで
CM放送

6. Why Vue.js
● 弊社での導入実績があった
● VueCLIでの開発環境構築のDXが良かった
● 社内的に横断して使えるVue.jsのコンポーネントライブラリ
があること

7. 要件
● CMによるスパイクアクセスが見込まれる
● ティザーサイトは11/1から公開
19日からは事前予約が可能
(当日商品販売が一部公開され、予約購入すると当
日以降に配送)
● 19日以降はキャンペーンページに表示されるアイ
テムが毎日変化
● 12/3-4（当日）は数時間置きにアイテムが変わる
● レスポンシブなサイトではないのでPC/SPテンプ
レートが別れる

8. Lambda
+API GateWay
S3
EC2 Elasticsearch
Vue.js/static
CloudFront

9. Lambda
+API GateWay
S3
EC2 Elasticsearch
Vue.js/static
CloudFront

10. 静的ファイル・HTMLの殆どに予めページ要素を入れて
おく必要がある。
（目玉商品ページ・著名人のインタビューページ）
そして、日時によって表示させるページ・要素は変わる
動的じゃないページがあり、
かつ、各ページの公開日が違う

11. なるほど？

12. 静的なページを動的に時限式に
出し分ける
ためには？

13. 日時をトリガーに日時別のディレクトリを
publicディレクトリに格納する（上書き）
配信されるのはpublicディレクトリのみ

14. /201811191600 /201811191700 /201811201800
時間毎に似たようなデータが重複

15. 開発時にすべてのディレクトリ、HTMLを持つのは大変なので...
<%=EJS%>
パーツのテンプレート化をEJSで行い、gulpで日時ディレクトリ毎に配置されるようにタスク化

16. 何日の何時に配信される
HTMLなのかを定義された
JSONファイル
<%=EJS%> JSON
JSON定義に基づいて
ディレクトリにHTMLを
格納
具体的なGulpタスクの処理の流れ

17. 苦労の跡

18. Vue.jsは・・・？

19. 検索ページ 商品詳細
ページ

20. 1. URLクエリパラメータから
Lambdaで用意した商品検索
APIをコール
2. 検索一覧を表示
3. ページネーションあり

21. 1. URLクエリパラメータからLambdaで
用意した商品詳細APIをコール
2. カートに入れるボタンなどを生成

22. コンポーネント単位でインスタンス化

23. カートに入れる
click
社内カートインAPI
cookie
token
ロジックのあるボタンをVue.jsで楽々コンポーネント化

24. Desktop SmartPhone
表示（HTML構造）は異なるが出している内容はほぼ同じ -> ロジックをmixinにして共通化

25. 各デバイス別に書き出し
package.json
※HTMLでは別途vue.runtime.jsを読み込む必要がある

26. コンポーネントのテスト

27. APIのレスポンス内容に応じて表示文言が変わる
1. まもなく販売開始！
2. 予約する
3. ご好評につきご予約分は終了しました
4. まもなく販売開始！
5. 購入する
6. 在庫残りわずか！！ 購入する
7. ご好評につき完売しました
@vue/test-utilsを利用してコンポーネントの出し分けテストが出来た

28. Jest Mockを利用してAPIレスポンスをモック

29. コンポーネント生成（VuexがAPIフェッチを行い、モックレスポンスを取得）

30. レスポンスによって画面の文字が正しく出し分けられるか確認

31. トラブルなく無事終了...?

33. 特設サイトは落ちてないよ！

34. まとめ
● VueCLIでの開発環境構築のDXが高い。ESLint,Prettier,Jestなど
も簡単に導入できて質の高いコンポーネント開発が行えた。
● Vue.jsは大規模なNuxtからWebComponentsのようなパーツ単位
の使い方もできる幅広いFW

35. おまけ
Vue.jsを利用した箇所はSPAっぽい使い方をしたのでmetaタグ周りの対
処ができなくてOGPの設定ができませんでした。
Lambdaでうまいこと対処できたかもしれません・・・

36. thanks:)