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