Open8
TSKaigiサブイベント #1 フロントエンド
iwamasa大規模なコードベースの改修のために自作TypeScriptツールを作るメリット
鴻巣 和司 さん
メモ
大規模なコードベースの改修で起きる問題
- 実装者
- 差分の量→単調で似た編集が続き、負担
- 長期にわたる作業→通常の開発との両立の難しさ
- レビュワー
- 差分の量→実装もれの見落とし、レビュワーの負担
この問題を解決するために
→自作TypeScriptツールを作った
対象
- TS/Reactコードベース
- コンポーネントライブラリのリプレイス
実施したこと
- プロジェクト内で参照がなくなったコンポーネントを削除
結果
- 実装者
- ミス、漏れの軽減
- 変更アプローチを試すコスト低下
- レビュワー
- 差分から「差分を生成する差分」に変化
iwamasaReactNative アプリ同士の通信のために型情報をサクッと共有した話
whatasoda さん
メモ
突発のスタッフ作業でメモ取れませんでした。。。
宣伝だけでも
スライド
iwamasa私のことは嫌いになってもTypeScriptのことは嫌いにならないでください〜フロントエンドエンジニアがTypeScriptと仲良くなる方法〜
Fumiya Konno さん
メモ
初学者が辛いポイント、解決方法について
- 型エラーが解決できない
- 環境構築が大変
- コードが冗長になる
嬉しいポイント
- JavaScriptより安全
- 型はドキュメントになる
上級者への道
- 型エラーを解消できる
- 型を定義できる
- 変数や型から型を作れる
フロントエンドと型
- 型パズルよりも設計
- TSの世界は深い。まずはフロントのためのTSを覚える
iwamasaテスト用のオブジェクトを簡単につくれるFactoryJSというライブラリを作った
ktmouk さん
メモ
TSバックエンドのテスト
→重要なロジックが書かれているのでしっかりテストを書きたい
FactoryJSの紹介
iwamasaApp Router時代のスタイリング革命】Zero-Runtimeの理解とvanilla-extractという選択肢
おささ さん
メモ
2023年に2回2位を獲得している
CSSの型安全性の実現が可能(強い)
Emotionと同じようなこともできるらしい！
パフォーマンス、型安全性、開発効率が実現できる！！
iwamasatsconfig.jsonの設定を見直そう！ フロントエンド向け 2024夏
うひょ さん
メモ
moduleResolution
- 一番フロントエンドに特有なやつ
- バンドラを使っている場合に有効な設定
- "node"だったら"bundler"にしましょう
- モジュール解決の方法を決めてくれるオプション
- importしたときのモジュールを解決するための仕組み
- 昔からあったオプション
- classic: node_modulesをサポートしていない
- node, node10
- node16, nodenext
- Node.js16以降でのモジュール解決の挙動を再現する
- bundler
- webpackなどのバンドラ挙動を再現するモード
baseUrl
- 大抵の場合は不要なので消しましょう
- TS4以前でpathsを設定するためにbaseUrlが必須だった名残らしい
- 設定されていると相対パスではない指定なのにbaseUrlからimportできてしまう
target
- es5, es2023, esnextとか書ける
- コードの実行環境がどのバージョンの機能をサポートしているかを指示する
- そのバージョンのJSにトランスパイルされる
- SWCなど別のツールを使っていると無視される
- そのバージョンまでの型定義を読み込む
- 正規表現でそのバージョンでは使えない構文を弾く
- 設定できる限りの新しいバージョンを設定しよう
moduleオプション
- コードがどんなモジュールシステムで動くかを指示する
- commonjs, es2015,nodenextとか
- TSにおけるimport/exportはES Modulesにセマンティックに従う
- commonjsにした場合はrequireになる
- esnextはcommonjsじゃないよってことになる(requireはエラーになる)
iwamasaスポンサーセッション
スタッフお手伝い入ったのでメモ取れず。