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

Nuxt.js v2からv3へ on TENTIAL

icchiman
October 20, 2021
1.1k

Nuxt.js v2からv3へ on TENTIAL

株式会社TENTIALのNuxt.js v2からv3への移行話

icchiman

October 20, 2021
Tweet

Transcript

  1. Nuxt.js v2からv3へ on TENTIAL


    View full-size slide

  2. # 自己紹介


    市來晟弥 (いちきせいや) @hey_icchiman


    ・経歴

     ・ 27歳(プログラミング歴12年ぐらい) 

     ・ Far Connection - CEO 

     ・ 元 ZEALS - CTO 

     ・ 元 3minute(現GREEグループ) - フロントエンド/アプリエンジニアリード 

     ・ WARC - フロントテックリード 

     ・ TENTIAL - CTO2年目 


    ・インフラ、サーバーからフロントまで 

     ・ vue(nuxt.js) / express.js / meteor.js / react / react native 


    View full-size slide

  3. # 目次



     

      ・TENTIALの技術スペック

      ・なんでv3, composition apiへ移行しているのか

      ・実際の移行作業

      ・composition api の感想

      ・2年間Nuxt.jsを運用してみた反省


    View full-size slide

  4. # TENTIALの技術スペック

    Rails

    Nuxt

    (SSG -> SSR)

    Nuxt

    (SSR)

    Nuxt

    (CSR -> SSR)

    ・Vue.js(all composition api) 

    ・express.js (api server) 

    ・Firestore 

    ・all Typescript 

    ・Vue.js 

    ・express.js (api server) 

    ・MongoDB 

    ・JS -> TS移行中 

    ・composition api移行中 

    ・Vue.js 

    ・express.js (api server) 

    ・contentful(CMS) 

    メディア事業

    D2C事業

    モール事業(新規事業)

    コーポレートサイト


    View full-size slide

  5. 新たにSCM(物流)システムを

    自社で作ることに


    View full-size slide

  6. # TENTIALの技術スペック

    Rails

    Nuxt2

    (SSG -> SSR)

    Nuxt2

    (SSR)

    Nuxt2

    (CSR -> SSR)

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Firestore 

    ・all Typescript 

    ・Vue.js 

    ・express.js (api server) 

    ・MongoDB 

    ・JS -> TS移行中 

    ・composition api移行中 

    ・Vue.js 

    ・express.js (api server) 

    ・contentful(CMS) 

    メディア事業

    D2C事業

    モール事業(新規事業)

    コーポレートサイト

    物流システム(新規事業)

    ・apollo, graphql 

    ・MongoDB 

    ・TS 

    Nuxt3

    (SSR)

    13名のエンジニアでこれらを支えている


    View full-size slide

  7. # なんでv3, composition apiへ移行しているのか


    View full-size slide

  8. # なんで移行しているのか

    Nuxt

    (CSR -> SSR)

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Firestore 

    ・all Typescript 

    composition api + TypeScript


    快適過ぎる...

    モール事業(新規事業)


    View full-size slide

  9. # なぜ快適なのか

    ・composition api 

     → ロジックの抽出と再利用(特にvueメソッド)

       コンポーネント毎(一部の処理)でのロジックを再利用を可能。

       あらゆる関数で共通化。


    ・TypeScript

     → 静的型付け・型チェック。補完性。不要なエラーを削減。


    ・Firestore 

     → 単純なクエリ


    View full-size slide

  10. # なんで移行しているのか

    Nuxt

    (CSR -> SSR)

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Firestore 

    ・all Typescript 

    composition api + TypeScript


    快適過ぎる...

    モール事業(新規事業)

    甘い蜜を知ってしまった僕たち


    View full-size slide

  11. 全サービス移行じゃぁ!!


    View full-size slide

  12. # 今日の比較・移行対象のサービス

    Nuxt2

    (SSR)

    Nuxt2

    (SSR)

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Firestore 

    ・all Typescript 

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Mongoose(MongoDB) 

    ・JS -> TS移行中 (一部リリース済み)
     

    ・composition api移行中 (一部リリース済み)

    D2C事業
 モール事業(新規事業)

    つらみ 快適

    View full-size slide

  13. # D2CブランドTENTIAL

    移行するぞ!!!

    Nuxt2

    (SSR)

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Mongoose(MongoDB) 

    ・JS -> TS移行中 (一部リリース済み)
     

    ・composition api移行中 (一部リリース済み)

    D2C事業


    View full-size slide

  14. # D2CブランドTENTIAL


    機能
    ・カート
    ・決済(定期決済も)
    ・商品管理
    ・SKU(商品サイズ,タイプ等)管理
    ・注文履歴
    ・ユーザー管理(会員ユーザー、未会員ユーザー)
    ・クーポン発行/使用履歴管理
    ・LP管理
    ・メーリングリスト
    ・広告管理(ASP、トラッキングログ)
    ・記事管理、記事用監修者(一般的なニュースだけでなくEC内メディア
    も)
    ・診断管理
    ・お問い合わせ管理
    ・その他設定(税率や手数料、送料)
    ・管理者管理(配送担当者やCS,CXの担当者、広告運用担当者、メディア
    担当者など管理者も多いため管理体制もしっかりする)
    ・分析ページ
    Nuxt2

    (SSR)

    ・Vue.js(composition api) 

    ・express.js (api server) 

    ・Mongoose(MongoDB) 

    ・JS -> TS移行中 (一部リリース済み)
     

    ・composition api移行中 (一部リリース済み)

    D2C事業


    View full-size slide

  15. # D2CブランドTENTIAL

    ファイルが多すぎる!!!

    共通化されてない処理も多すぎる!!!


    View full-size slide

  16. # D2CブランドTENTIAL

    だが、やらねばならぬ


    View full-size slide

  17. # D2CブランドTENTIAL


    View full-size slide

  18. # 実際の移行作業

    js関数を管理するディレクトリを整理



    → 共通化する処理や関数のイメージを

    共通認識


      (1番重いページをベースに議論できると尚良)

    View full-size slide

  19. vue3で新しく入る

    ref, reactive等の命名も整理

    # 実際の移行作業


    View full-size slide

  20. this(Vueインスタンス)
    が使えなくなる問題!? 



    → thisを多用している関数から

      composition api化を進める


      (一旦は setup関数の引数contextで使えるが

    根本的=共通化の解決にならない)

    # 実際の移行作業


    View full-size slide

  21. # 実際の移行作業

    SSRは要注意!! 



    → refではなく

      ssrRef, shallowSsrRefを使う

      (Nuxt特有。vue3で検索してきたコードをコピペする時注意)

    View full-size slide

  22. refとreactiveや、 

    ssrRef, shallowSsrRefの使い分けも整理 



    → refはプリミティブ(1つの値に対して)使うstate 

      (DBベースや共通関数化で使われている値になるケースが多い)

      reactiveはobjectやcomponent単位で持つstate 


    → 基本的にshallowSsrRefを使う 

       (ssrRefが必要なケースはあまりない)

    # 実際の移行作業


    View full-size slide

  23. ・関数をかなり共通化できる


    ・設計や命名などかなりリファクタでき、

     エンジニアメンバー間で共通認識を持つと共に

     改修スピードのアップやバグ比率を削減


    ・composition api + SSRは注意すべき

     (中々、大規模サービスで行なっている先駆者がいないイメージでNuxt3に移行する時の一番心配な点)


    ・コアなサービスでは絶対に行うべき

     (一定のコストはかかるため放置してたりあまりメンテする必要のないサービスでは無理にしなくて良いかと) 


    # composition api の感想


    View full-size slide

  24. ・component: true (nuxt.config.ts) にすべき(ダイレクトインポート)

      (falseで都度コンポーネントを自由にimportできてしまうとcomponentsフォルダの設計がぐちゃぐちゃに)

    # 2年間Nuxt.jsを運用してみた反省


    View full-size slide

  25. # 2年間Nuxt.jsを運用してみた反省

    ・component: true (nuxt.config.ts) にすべき
    (ダイレクトインポート)

      (falseで都度コンポーネントを自由にimportできてしまうとcomponentsフォルダの設計がぐちゃぐちゃに)


    ・設計や命名、共通関数化を全員が徹底すべき
    (3,4名以上から破綻)


    ・ファイルが多い場合はTS化の前に

    composition apiのみだけでも進めて

     先に関数を共通化するのもアリかも

     (その後にts化。tsとcomposition apiは目的が違うため別に同時に進めなくても良い)


    ・複雑なクエリや処理になることはv3前は特に避けるべき

    (移行が大変)


      (弊社では売上分析など大量のDBをmongoose+expressで捌いてd3を使っていたりした

       →BQ(バッチ処理整形)+データスタジオに移行。などSaaSも積極的に検討する)


    View full-size slide

  26. だから新規事業は、この構成にした


    View full-size slide

  27. ・コンポーネント設計の最適化(component: true)

    ・超共通関数化(Nuxt3, composition api)

    ・静的型付け(TypeScript)

    ・複雑なクエリを無くす(apollo, graphql)

    # 日々アップデートする僕たち

    物流システム(新規事業)

    ・apollo, graphql 

    ・MongoDB 

    ・TS 

    Nuxt3

    (SSR)


    View full-size slide

  28. 絶賛採用中

    TS書きたい人募集


    View full-size slide

  29. Nuxt.js v2からv3へ

    でした!

    以上


    View full-size slide

  30. ご静聴ありがとうございました!


    View full-size slide