RoomClip の Nuxt.js 移行の話
RoomClip の Nuxt.js 移行の話ルームクリップ株式会社 岡田 佳祐2018.12.06 NuxtMeetUp#6
View Slide
今日お話しすること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とは?
リニューアル前アプリWEBIcon 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の知識ほぼ0。○ サーバ側のリニューアルも含めて、基本一人で行うので、工数はできるだけ減らしたい。
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/checkerUI実装上のソースは結構省略してるので、動かないです。こちら参考にしました!https://github.com/shanlh/vue-tinder
まとめ● Nuxt + 様々な人が素晴らしい資料を公開してくださってることで、開発速度と、プロダクト品質の両方をいい感じにできました!● 今後、運用実績を積んでいき、自分も皆さんに貢献できればと思います!● ただ、SSRはいろいろ気にするところが多いので、避けれるなら避けた方がいいなーと思いました...○ コンポーネントのライフサイクルフック■ setIntervalを、何も意識せずに使った時、ブラウザが閉じても、サーバ上で、関数は呼ばれ続ける...○ で、NuxtのSSRって いつ使うの?
ルームクリップでは、一緒に働く仲間を募集中です!https://www.wantedly.com/companies/RoomClip