アイスタイル特設サイトにおけるVue.jsの導入事例
- 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メンバー
- 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 テンプレートが別れる
- 9. ということは
- 11. なるほど？
- 15. 苦労の跡
- 16. Vue.jsは・・・？
- 17. 検索ページ 商品詳細 ページ
- 18. 1. URLクエリパラメータから Lambdaで用意した商品検 索APIをコール 2. 検索一覧を表示 3. ページネーションあり
- 22. Desktop SmartPhone 表示（HTML構造）は異なるが出している内容はほぼ同じ -> ロジックをmixinにして共通化
- 24. トラブルなく無事終了...
- 26. 特設サイトは落ちてないよ！
- 27. まとめ ● Laravelの話がなくてすみません ● Vueの話もたいしてなくて更にすみません ● VueCLIでの開発環境構築のDXが高い。ESLint,Prettier,Jestなど も簡単に導入できて質の高いコンポーネント開発が行えた。 ● Vue.jsは大規模なNuxtからWebComponentsのようなパーツ単位 の使い方もできる幅広いFW
- 29. thanks:)