アイスタイル特设サイトにおける痴耻别.箩蝉导入事例（再演）
- 3. Pro?le. ~ 2015/08 istyle.inc 久保田 賢二朗 ● PHP(Laravel/Phalcon) ● JavaScript(Vue.js/Svelte) ● Go ● Scala kenjiro kubota @kubotak_public テクノロジー本部 R&D 部技術開発部 チーフエンジニア Laravel JP Conference 2020 コアスタッフ / 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テンプ レートが別れる
- 11. なるほど？
- 17. 苦労の跡
- 18. 痴耻别.箩蝉は???？
- 19. 検索ページ 商品詳細 ページ
- 20. 1. URLクエリパラメータから Lambdaで用意した商品検索 APIをコール 2. 検索一覧を表示 3. ページネーションあり
- 24. Desktop SmartPhone 表示（HTML構造）は異なるが出している内容はほぼ同じ -> ロジックを尘颈虫颈苍にして共通化
- 26. コンポーネントのテスト
- 27. APIのレスポンス内容に応じて表示文言が変わる 1. まもなく販売開始！ 2. 予約する 3. ご好評につきご予約分は終了しました 4. まもなく販売開始！ 5. 購入する 6. 在庫残りわずか！！ 購入する 7. ご好評につき完売しました @vue/test-utilsを利用してコンポーネントの出し分けテストが出来た
- 31. トラブルなく无事终了...?
- 33. 特设サイトは落ちてないよ！
- 36. thanks:)