改めて考えるフロントエンドライブラリ共有LT会に行ってきた #ouchi65

先日、改めて考えるフロントエンドライブラリ Angular, Vue, React, jQuery etc... 〜何を利用してる?共有LT会〜 に参加しました。オンライン開催。簡単に所感をまとめます。

techplay.jp

所感

今回、Angular, Vue, React, jQuery etc... ということでしたが、ほとんど Vue だったような...。ただ、取り組んでいる課題や工夫の話が聴けてとても参考になりました。個人的に TODO<T>: any は興味深かったです。

あと、分類のグラデーションというのも面白かったです。自分はパターン2と3かな。確かに段階的に移行できるのは Vue のメリットかもしれないし、これがいわゆるスモールスタート可能と言われるやつですかね。

途中、アンケートを取るところがいくつかありましたが、自分の環境ではできず...。ブラウザから Zoom に参加しているからだろうか?

YouTube の URL はこちら。

youtu.be

以下、メモから抜粋。

LINEサービスをTypeScriptに置き換えた際のノウハウ&苦労話

  • テストコードがない
  • 環境が古い
    • webpack, Babel, ...
  • ビルド環境が違う
    • Browserify, module.exports/require, import/export
  • TypeScript
    • 型の安心感, コードレビューの負荷軽減
  • テスト
  • ts 運用基盤の構築
    • 中長期的にプロジェクトに適応させる
  • 小さく適用する
  • ts コンパイル
    • 既存 js ファイルのビルド結果は変えない
    • 正しくトランスパイルできているか
    • 小さいファイルから ts 対応, ビルド生成物の差分を確認
    • tsconfig の allowJS オプション有効化 (jsDoc で型チェック)
    • tsconfig の target を es2019 に
      • これまで通り Babel で Polyfill を入れたい
      • ts 側で Polyfill を入れることも可
  • Vue の SFC を ts 対応
    • Vue.extend
    • vue-class-decorator や vue-class-component は変更が大きい
  • ビルド時間短縮
    • fork-ts-checker-webpack-plugin
    • 型チェックのプロセスを分離
  • ビルド環境をシンプルに
    • ts-loader で js/ts をビルドできるように
  • テスト
    • Karma ⇒ Jest
    • window オブジェクトを書き替えるテストがやりやすい
    • jest.resetModules
    • まずはユーティリティ系から
  • 移行中にリファクタリングや修正はしない
    • 問題が起きたときに切り分けしづらい
  • TODO<T>: any
    • とりあえずビルドを通してあとで直せるように
  • computed の返り値の型を明示的に書く
  • target 以外に transpileOnly=true を設定

Frontend負債返済の野望 @ Repro

www.slideshare.net

  • 負債返済によって開発コストを下げる
  • フロントエンドとバックエンドの切り離し
    • BFF
    • フロントエンドのロジックを Rails 依存から切り離す
  • フロントエンドだけで適切なアーキテクチャ設計が必要
    • 関数型言語の影響が入ってきている
    • 過去の js のノウハウは基本的に使わない (混ぜない)
  • Vue.js にはモデルレイヤがない?
    • MVVM が難しい?どうやって状態を持つか?
    • immutable な state を考えると関数型のアプローチがよい
  • Vue 3 を待つ余裕がない ⇒ React に転換?
  • 余談) うさぎのプレゼンツール

ビザスクliteなVue.jsの使い方

様々なプロダクト環境から垣間見るVue.js

  • Rails + Vue
    • helper でカバーできない動的処理を Vue に任せる
    • Vue は jQuery の代わり?
    • SSR にできる
    • SFC の仕組みが生かしにくい
      • Lint, UT
      • テストは E2E 頼み
    • Vue 以外が DOM に触れる
  • Vue + Rails
    • コンポーネントの mount と props に値を渡すのみ
    • Rails と Vue のインタフェースが限定される (props/API)
    • SSR にできない
    • 渡したい値は props に詰め込む
  • Vue
    • Rails と Vue のインタフェースは API のみ
    • バックエンドとフロントエンドが分離される
    • API を mock すれば画面実装可能
    • E2E テストが難しい
  • 完全 Rails から徐々に Vue にシフトしたり
    • Vue の Progressive さがいい感じにマッチしている
    • テンプレートベースだから?テンプレートエンジンに組み込めるから?

TechTrain しくじり先生 - Nuxt.js, Vue.jsにおけるしくじり

  • ページをまたがるグローバルなストア
    • ログイン, ログアウト, Firebase 以外の処理, ...
    • pages に書いてある
    • ⇒ Nuxt.js + ts, Action から状態を触る
  • 他ページ用の store が冗長にロードされる
    • 肥大化した data プロパティ
    • API通信でN+1
    • ⇒ 余計なロードを削る
  • SSR
    • SPA, meta タグなし, リッチカード対応なし
    • ⇒ client タグなど
  • ページ遷移で UI がチラつく
    • API通信でローディング表示なし
    • ⇒ v-cloak, loadingindicator
  • SSR がどのくらい SEO に影響するか
    • Google が SPA に対応しているけど...