Laravel/Vue.js勉強会 #8 オールスターズ

1. アイスタイル特設サイトにおける
Vue.jsの導入事例
Laravel/Vue.js勉強会#8 オールスターズ @KenjiroKubota

2. Profile. ~ 2015/08 istyle.inc
久保田 賢二朗
● PHP(Laravel/Phalcon)
● JavaScript(Vue.js/Svelte)
● Scala
kenjiro kubota @kubotak_public
テクノロジー本部 R&D 部技術開発部 チーフエンジニア
Laravel JP Conference 2019 副実行委員長 / RoppongiDesignersメンバー

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

4. Laravelの話題はありません。
sorry...

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
REST API
S3
EC2 Elasticsearch
Vue.js/static
CloudFront

9. ということは

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

11. なるほど？

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

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

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

15. 苦労の跡

16. Vue.jsは・・・？

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

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

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

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

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

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

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

24. トラブルなく無事終了...

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

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

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

29. thanks:)