UIT INSIDE UIT INSIDE
2020/10/23 に公開 3020 views

このエピソードについて

@g4rds が、 @daisuke.yamamoto と @uhyo_ に、Vue 3 や React / TypeScript の技術選定とその理由について聞いてみました。

ゲスト紹介

  • @daisuke.yamamoto
    • Data Visualization チーム フロントエンドエンジニア
    • チームでは、Vue.js を主に利用しており、 RC から Vue 3 を開発に投入している
  • @uhyo_
    • LINE 証券フロントエンドエンジニア
    • TypeScript コントリビューター
    • LINE 証券では React/TypeScript を利用しており、 React 17 や Recoil を Production 導入している

React/Vue と TypeScript 対応

  • React の TypeScript 対応
    • React はご存知 TypeScript-First で記述できる
      • React 自体が facebook/flow で記述されていることに由来
      • はじめから Type Friendly な設計がなされている
    • Router の型などについては後述
  • Vue の TypeScript 対応
    • Vue 3 でコンポーネントの型が改善、Vuexの改善、TSXサポート、テンプレートの一部サポートなどが追加
      • ただテンプレートの型については完全ではない
      • まだまだ React に追いついているとは言えない状況

フレームワークを取り巻くエコシステム

  • React
    • Router、状態管理、テストスイートなどどれも自分で選択
    • Router
      • LINE 証券では React Router を利用
        • 型定義が弱いので uhyo としては uhyo/rocon を使いたい
    • 状態管理
      • LINE 証券では統一的なオピニオンがあるわけではない
        • 最近は Recoil の導入を始めた
        • 直接的に Recoil を使うのではなく、ラップした Custom Hooks を利用
    • テストスイート
      • React Testing Library を利用
        • Enzyme は利用していない
  • Vue
    • Vuex, Vue Router, Vue Test Utils など必要なものが一通り揃っている
      • すべてがオフィシャルで提供されている
    • Vuex は 4.0 で型が改善などアップデートも
      • Vue Router の path などは string or string[]
    • Vue Test Utils は enzyme 寄りの BFF コンポーネント改善ツール
    • このあたりは 2.x から変わらず、 3.0 にあたっての追加などはなし

React v18 と Vue v3 のこれから

使っている技術の弱み

  • React
    • React の良さでもあるが、オフィシャルなエコシステムが存在しない
      • 結果として CSS in JS など、好みが分かれる部分がプロジェクトによってバラバラになる
  • Vue
    • TypeScript 対応はやはり React と比較して弱い部分がまだある

Refs