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

RoomClip の Nuxt.js 移行の話

k-okada
December 06, 2018
2.5k

RoomClip の Nuxt.js 移行の話

RoomClip の Nuxt.js 移行の話

k-okada

December 06, 2018
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. RoomClipとは?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide