Vue.js + Nuxt.js を使ってB2Cサービスを作った話

Transcript

1. Vue.js + Nuxt.js を使ってB2Cサービスを作った話 March 9, 2018 Wakamatsu Hisashi Front-end engineer CyberAgent, Inc.
2. 若松 良（Wakamatsu Hisashi） Front-end engineer 経歴 - 大学卒業後、映像制作に携わる - 2012年にCAに中途入社 - フロントエンドエンジニアとして複数サービスの立上げ、運用に携わる - 1年半程前から女性向けメディア「 by.S」の運用を担当 自己紹介
4. 半年前の自分、あるいは これからVue.js + Nuxt.jsの導入を検討している人に とって役に立つかもしれない話 本日の発表内容
5. アジェンダ - フレームワークの選定プロセス - Vue.js + Nuxt.jsを採用して良かったこと - 逆に困ったこと - 結局採用してどうだったのか
6. サービスを新しくつくるとき
7. サービスを新しくつくるとき コスメの レビューサイト
8. サービスの要件 認証、様々な条件による絞り込み検索、コメント投 稿、レビュー投稿、レビュー結果のビジュアライズ等 サービスを新しくつくるとき
9. サービスの要件 認証、様々な条件による絞り込み検索、コメント投 稿、レビュー投稿、レビュー結果のビジュアライズ等 ビジネスの要求 完璧なSEO対策、圧倒的な表示速度、サイト設計 サービスを新しくつくるとき
10. サービスの要件 認証、様々な条件による絞り込み検索、コメント投 稿、レビュー投稿、レビュー結果のビジュアライズ等 ビジネスの要求 開発側の要求 開発のしやすさ、高い安定性、高い運用性、 新しい技術への挑戦 完璧なSEO対策、圧倒的な表示速度、サイト設計 サービスを新しくつくるとき
11. 実現するための手段として ふさわしいのは？
12. 実現するための手段として ふさわしいのは？
13. Vue.js + Nuxt.js というのはどうか
14. Vue.js + Nuxt.js について調べた結果 “Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフ レームワークです。”
15. Vue.js + Nuxt.js について調べた結果 Positive Vue.js自体、パフォーマンスに優れている Nuxt.jsは公式に推奨されている 簡単にSSR + SPAを実現できる 日本語ドキュメントが豊富
16. Vue.js + Nuxt.js について調べた結果 Positive Negative 肝心のNuxt.jsがrc版 色々備わっているが、拡張性は？ 社内、社外を見渡しても、中・大規模な B2Cサービスでの開発実績がほとんどな い Vue.jsはバックボーンが企業ではない Vue.js自体、パフォーマンスに優れている Nuxt.jsは公式に推奨されている 簡単にSSR + SPAを実現できる 日本語ドキュメントが豊富
17. Vue.js + Nuxt.js は本当に 様々な要件をクリアできるのか？
18. Negative 肝心のNuxt.jsがrc版 正式版がでるのは時間の問題
19. Negative 肝心のNuxt.jsがrc版 正式版がでるのは時間の問題 拡張性は大丈夫？ ExpressでNuxt.jsをミドルウェアと して使えば大体のことはできる
20. Negative 社内、社外を見渡しても、中・大 規模な B2Cサービスでの開発実 績がほとんどない 機運は高まっている。あとは事例 を待つのみ 肝心のNuxt.jsがrc版 正式版がでるのは時間の問題 拡張性は大丈夫？ ExpressでNuxt.jsをミドルウェアと して使えば大体のことはできる
21. Negative 社内、社外を見渡しても、中・大 規模な B2Cサービスでの開発実 績がほとんどない 機運は高まっている。あとは事例 を待つのみ バックボーンが企業ではない ？？？ 肝心のNuxt.jsがrc版 正式版がでるのは時間の問題 拡張性は大丈夫？ ExpressでNuxt.jsをミドルウェアと して使えば大体のことはできる
22. とりあえずやってみる
23. Vue.js + Nuxt.jsを採用して 良かったこと
24. 1. ルーティングが捗る
25. pages/ 　├ announcement/ 　├ brand/ 　├ category/ 　│　└ _id/ 　│　　　└ _page.vue 　└ item/ ディレクトリ構成がそのままサイトの パスとして反映される。
26. https://lulucos.jp/category/6bowG3A9rnILDz26J/2?minPrice=1000&maxPrice=5000 動的なルーティングも直感的に対応可
27. pages/ components/ middleware/ modules/ layouts/ store/ pages以外にも、ディレクトリの構成を 強制されるが、それほど違和感は感じない
28. app.get('/auth/facebook', passport.authenticate('facebook')); app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/login' }), function(req, res) { res.redirect('/login/sns'); }); app/server.js 特定のURLをトリガーにしてサーバ側で 何らかの処理を実行したい場合
29. 2. 拡張性も問題ない
30. import express from 'express'; import { Nuxt, Builder } from 'nuxt'; let app = express(); const nuxt = new Nuxt(nuxtConfig) app.use(nuxt.render) app/server.jsv Express上で、Nuxt.jsを ミドルウェアとして使う https://github.com/nuxt-community/express-template
31. app.use(session({ store: new RedisStore({ port: *****, host: config.elasticacheEndpoint, ttl: COOKIE_EXPIRATION_DATE, db: 0 }), secret: SESSION_OPTION_SECRET, resave: true, saveUninitialized: true, cookie: { maxAge: COOKIE_EXPIRATION_DATE } })); app/server.js Redis等のデータストアも問題なく 利用できる
32. 3. ビルドシステムも良い感じだった
33. 適切にファイル分割され、ページ毎の差分 jsファイルは、prefetchが指定されている
34. 適切にファイル分割され、ページ毎の差分 jsファイルは、prefetchが指定されている
35. パフォーマンスにも貢献している Lulucos 競合サービス
36. 1. ルーティングが捗る 2. 拡張性も問題ない 3. ビルドも良い感じにしてくれた 4. その他 - vue-devtoolsでStoreのデータの流れを確認しつつデバッグ - ドキュメントが充実している 良かったこと
37. 困ったこと
38. 1. ライフサイクルの罠
39. Vue.jsのライフサイクルに加え、SSR部分になる Nuxt.jsのライフサイクルも考慮する必要がある
40. サーバサイドで実行されるメソッド内では、 windowオブジェクトへのアクセスは不可 fetch ({ store }) { store.dispatch('fetchAuth'); } pages/index.vue
41. 例えばwindowオブジェクトにアクセスする必要がある処理等は、 適切な場所で適切に実行する必要がある fetch ({ store }) { store.dispatch('fetchProfile'); } beforeCreate () { 　if(process.client) { 　　this.$store.dispatch('fetchProfile'); 　} } pages/index.vue pages/index.vue
42. 逆に、サーバサイド特有のオブジェクトにアクセスできず、 エラーになるケースも export default function (context) { 　const currentPath = context.req.url; 　context.permalink = context.env.baseUrl + currentPath; } middleware/context-data.js
43. SSR時のライフサイクルメソッドでサーバサイド特有のオブジェクトにアクセ スする時には、判定を入れる必要がある。 export default function (context) { 　const currentPath = context.req.url; 　context.permalink = context.env.baseUrl + currentPath; } middleware/context-data.js export default function (context) { 　const currentPath = process.server ? context.req.url : context.route.fullPath; 　context.permalink = context.env.baseUrl + currentPath; } middleware/context-data.js
44. Vue.js、Nuxt.jsのライフサイクルを 理解しておくことが大事 - 簡単にSSR + SPAシステムの構築ができる反面、ライフサイクルが入 り組む - どういった処理がSSR時に、またSSR後に実行されるかをしっかりと 理解することが肝要
45. 2. 新陳代謝が激しい
46. v1.4.0 Atinux released this an hour ago v1.3.0 Atinux released this 29 days ago · 86 commits to dev since this release v1.2.0 Atinux released this on 26 Jan · 111 commits to dev since this release v1.1.0 Atinux released this on 13 Jan · 182 commits to dev since this release v1.0.0 Atinux released this on 9 Jan · 209 commits to dev since this release v1.0.0-rc11 Atinux released this on 7 Sep 2017 · 712 commits to dev since this release nuxt/nuxt.js v1.0.0リリース以降も頻繁にアップデートを重ねている
47. context.isClient has been deprecated, please use process.client instead. context.isServer has been deprecated, please use process.server instead. v1.0.0 Atinux released this on 9 Jan · 209 commits to dev since this release v1.0.0-rc11 Atinux released this on 7 Sep 2017 · 712 commits to dev since this release nuxt/nuxt.js アップデートのタイミングでWarningが出ることも
48. apollo-module.js Update to v1 of NUXT dohomi released this on 9 Jan · 17 commits to master since this release Upgrade apollo-client and vue-apollo dohomi released this on 8 Nov 2017 · 36 commits to master since this release v2.1.1 Atinux released this on 15 Sep 2017 · 45 commits to master since this release apollo-module.jsもアップデートする必要があり、 気づいたらインターフェースも結構変わっていた。
49. 小まめにアップデートする 基本的に、Nuxt.js周りのライブラリーはアップデートが頻繁に行われてい る。常にリリースをチェックし、メジャーアップデートに関しては優先度高め で対応する。
50. 1. ライフサイクルが入り組んでいる 　 　SSR + SPAのライフサイクルを予め理解しておく 2. ライブラリの新陳代謝が激しい 　　　 　小まめにアップデートする 3. その他 - ホットリローディングにかかる時間がかかるようになってきた 　　 ※ コンポーネントの量産が影響してそう 困ったこと
51. Vue.js + Nuxt.jsを採用した結果 どうだったのか
52. - 結局「SSR + SPA」を低コストで実現できた - 開発コストの削減、パフォーマンス発揮という点を鑑みても採用した ことに満足している - SSRしなくてもメリットは十分あると思う - 継続的にNuxt.jsの開発が行われるのであれば、今後、他の新規プ ロジェクトの技術選定においても有力な選択肢になりうると思う。 結果として
53. ご静聴ありがとうございました