RoomClip の Nuxt.js 移行の話

RoomClip の Nuxt.js 移行の話

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の知識ほぼ０。
    ○ サーバ側のリニューアルも含めて、基本一人で行うので、工数はできるだけ減らしたい。
    

    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