RoomClip の Nuxt.js 移行の話

RoomClip の Nuxt.js 移行の話ルームクリップ株式会社岡田佳祐 2018.12.06 NuxtMeetUp#6

今日お話しすること 1. 自己紹介 2. WEBサイトリニューアルの概要 3. WEBサイトリニューアルの進捗 4. Nuxt.js（Vue.js）使っててよかったこと 5.
まとめ

ざっくり一言でいうと...

自己紹介岡田佳祐 2018.6~ ルームクリップ株式会社 WEBエンジニア居住地：広島 -> 神奈川 ->
東京バックエンド：PHP -> Laravel -> symfony -> codeIgniter -> Rails フロントエンド：jQuery -> Angular.js -> Knockout.js -> Vue.js

RoomClipとは？

リニューアル前アプリ WEB Icon by Icon Mafia from iconscout

リニューアル後 Icon by Icon Mafia from iconscout アプリ WEB

悩んだことフロントエンドどうしよう？

WEBサイトに求めること投稿 Aさん Bさん検索閲覧

WEBサイトに求めること投稿 Aさん Bさん検索閲覧 ① 使いやすいUI ② 閲覧ユーザの集客
　　　（主にSEO）

フロントエンド周りの理想 • コンポーネント指向で開発したい。 ◦ デザイナーさんが作ったものを使い回ししていきたい。 ◦ モダンなフロントエンドに触れたい！ ◦ Vue、React、Angular のどれかが良さそう。
• SSRにしたい。 ◦ SSRはしなくても、Googleのクローラーは、認識してくれる。 ◦ ただ、インデックス速度が遅くなる可能性があるらしい。 ◦ SEOが、非常に大事なので、今回はリスクをとらずSSRしたい。 • できるだけ簡単に実装したい。 ◦ フロントエンド専門の人間がおらず、webpackの知識ほぼ０。 ◦ サーバ側のリニューアルも含めて、基本一人で行うので、工数はできるだけ減らしたい。

Shinjuku.rb #65 Webフロントエンドの理想と現実 Nuxt.js おすすめ！

リニューアル後の構成 Icon by Icon Mafia from iconscout アプリ WEB

リニューアル進捗リニューアル進捗

進捗 Nuxt.js を知った日：9/26 （ちなみに、Nuxt 2.0 のリリース日：9/21）静的テストページリリース：10/16 （ https://roomclip.jp/doc/privacy ）
動的テストページリリース：10/30 （ https://roomclip.jp/myfollow/5 ）検索ページリリース：11/22（ https://roomclip.jp/tag/search?keyword=一人暮らし）今のところ、SEOによる流入や、Adsense広告の金額に影響はなさそうです。

検索ページこんな感じ

リニューアル前広告なし（モバイル）

リニューアル後広告なし（モバイル）

リニューアル後広告なし（モバイル） • 全体的に速度が向上！ ◦ 主な要因は、画像最適化、サーバからのレスポンスタイム改善 ◦ ただ、Nuxtデフォルトの状態で、ほとんどのチェック項目をクリア！ ◦ SEOに関して、Nuxtデフォルトのままで高得点！（Lighthouse）
• ただ、インタラクティブになるまでの時間が遅い... ◦ LazyLoadを入れたい...けどSEO的に大丈夫？ ◦ 2018/11/5 にGoogle公式で、実装方法が公開 ▪ Make sure Google can see lazy-loaded content

リニューアル後広告なし（モバイル）

リニューアル後広告なし（モバイル） • 少し改善！ • JavaScriptの実行時間が一番の原因 ◦ Vue 3系から、ファイルサイズ半分になるということでそれに期待！ ◦
Nuxtのファイルサイズ削減されるらしい！ ▪ feat: improve SSR bundle ◦ Vue.js 続・大規模アプリ開発 • この調子で改善して行こう！と思ってました... • しかし！社外からアクセスすると...

リニューアル後社外アクセス（モバイル）

リニューアル後（モバイル） • 社外からだと広告が表示されるため、このような値に... • 12/4 ちょうど一休.comさんより、タイムリーな記事が！！ ◦ サードパーティJavaScriptの最適化 • 広告の遅延読み込みをしようか悩んでいます...
• ただ、できることはたくさんある！

PageSpeed Insights（PC）ちなみにPC

リニューアル後社外アクセス（PC）

Nuxt.js（Vue.js）使ってよかったこと • モダンなフロントエンド開発を学べた！ ◦ lint, prettier, webpack, storybookなどなど • インフラについて詳しくなった（SSR時は、Nodeサーバ必要のため）
◦ 会社にNodeサーバの実例がなかった。 ◦ そのため、環境構築の調査から必要で、すごく勉強になった。 • 少し複雑なUIを簡単に実装できるようになった。 ◦ 次スライド • その他いろいろ！

UI実装ページトランジションがこれだけでできる！もっと詳しい資料はこちら！ http://slides.com/sdrasner/vuefes-japan#/94

こんな感じで、TinderっぽいUIが簡単に！ https://roomclip.jp/v2/checker UI実装上のソースは結構省略してるので、動かないです。こちら参考にしました！ https://github.com/shanlh/vue-tinder

まとめ • Nuxt + 様々な人が素晴らしい資料を公開してくださってることで、開発速度と、プロダクト品質の両方をいい感じにできました！ • 今後、運用実績を積んでいき、自分も皆さんに貢献できればと思います！ • ただ、SSRはいろいろ気にするところが多いので、避けれるなら避けた方がいいなーと
思いました... ◦ コンポーネントのライフサイクルフック ▪ setIntervalを、何も意識せずに使った時、ブラウザが閉じても、サーバ上で、関数は呼ばれ続ける... ◦ で、NuxtのSSRっていつ使うの？

ルームクリップでは、一緒に働く仲間を募集中です！ https://www.wantedly.com/companies/RoomClip

RoomClip の Nuxt.js 移行の話

RoomClip の Nuxt.js 移行の話

k-okada

Featured

Transcript