Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RoomClip の Nuxt.js 移行の話

k-okada
December 06, 2018
2.3k

RoomClip の Nuxt.js 移行の話

RoomClip の Nuxt.js 移行の話

k-okada

December 06, 2018
Tweet

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. RoomClipとは?

    View Slide

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

    View Slide

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

    View Slide

  8. 悩んだこと
    フロントエンド
    どうしよう?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. 進捗
    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広告の金額に影響はなさそうです。

    View Slide

  16. 検索ページこんな感じ

    View Slide

  17. リニューアル前 広告なし(モバイル)

    View Slide

  18. リニューアル後 広告なし(モバイル)

    View Slide

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

    View Slide

  20. リニューアル後 広告なし(モバイル)

    View Slide

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

    View Slide

  22. リニューアル後 社外アクセス(モバイル)

    View Slide

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

    View Slide

  24. PageSpeed Insights(PC)
    ちなみにPC

    View Slide

  25. リニューアル後 社外アクセス(PC)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide