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

もう俺には関係なくないTypeScript/Our TypeScript

dojineko
August 23, 2021

もう俺には関係なくないTypeScript/Our TypeScript

@fukuoka.ts #3

dojineko

August 23, 2021
Tweet

More Decks by dojineko

Other Decks in Technology

Transcript

  1. はじめるまえに • おはなしすること ◦ TypeScriptの簡単な現状 ◦ お仕事で使うための取り組み方 ◦ 便利な武器へのポインタ •

    おはなししないこと ◦ TypeScriptの新機能 ◦ TypeScriptの細かな言語仕様 ◦ 具体的なコードについて
  2. 立ちふさがる現実 • 現実は...理想には...程遠いことが...あまりにも多すぎる... ◦ 一番導入しやすそうな新規開発ってそんなに機会は無い ◦ 20年近く積み上げられたレガシーなシステムの存在 ▪ 例: PHP

    と jQuery のアプリ ▪ 例: Ruby on Rails と CoffeeScript のアプリ ◦ 課せられたミッションはそれらの運用と保守 ▪ 運用と保守 • 運用と保守 ◦ 運用と保守 ▪ 運用と保守
  3. 現実は分解して認識しよう • TypeScript は JavaScript のスーパーセット ◦ つまり、今あるアプリ資産を捨てる必要はない ◦ 手を加えるところからTypeScriptにしていけるということ

    • TypeScriptで開発するメリットを把握しておく ◦ 今ある現実をより良くするための手段と理解しておく ▪ 型による整合性チェックができる ▪ コード品質が上がる ▪ モチベーションの向上 など
  4. 課題の分解例 1 • 例: PHP と jQuery のアプリ ◦ jQuery

    を使っているコードはTypeScriptでも書ける ▪ 拡張子を「js」を「ts」に変えてビルドするだけで良い ▪ より簡単には「js」のままでも型推論や補完を使える ◦ jQuery は TypeScript の型定義が提供されている ◦ 今あるコードを全て「ts」にしてもいいし、手を加える部分だ け「ts」にするという戦略も取れる
  5. 課題の分解例 2 • 例: Ruby on Rails と CoffeeScript のアプリ

    ◦ CoffeeScript は JavaScript を出力する ◦ JavaScript にさえなれば TypeScript としても扱える ▪ decaffeinate などでざっと変換するとよい ◦ Rails の場合は Webpacker 組み合わせることもあるが、 これは無理して使わなくても良い ▪ 素朴に tsc でビルドして配置するだけでもいい ▪ webpack や rollup で別途ビルドするやり方も
  6. 脱線タイム: TypeScriptにするメリットとは? • 開発体験の向上 ◦ VSCodeなど対応している環境を使えば、コード補完つかえる • コード品質の向上 ◦ 無視されがちな

    undefined や null の可能性をチェックできる • テスト工数の削減 ◦ ビルド時にある程度間違いを事前に検知できる • モチベーションの向上 ◦ 見落とされがちだが人間が開発している以上は、 人間の気持ちの状態は開発速度に大きく影響する。
  7. 脱線タイム: レガシーに対しての接し方 • 本当に一切触らなくていいなら何もしないでおこう ◦ なにも手を入れないで済むのはそれはそれで理想状態 • 継続的に手を入れる必要があるものなら端っこから改善していこう ◦ 手を入れやすいようにしていかないと開発速度は必ず鈍化する

    ▪ 将来の自分、チームメンバーを苦しめることになる • 見てると「アレ」な実装はあるので「今までありがとう」を意識しよう ◦ パラダイムの変化や機能の改善、技術水準の変化に起因する ◦ 感謝しつつも、適切に対処することが大切
  8. 具体的な手段の例 • やりたいことドリブンでとにかく手を動かす ◦ やってみるのが一番早い • JavaScript Primerを見る ◦ https://jsprimer.net/

    • TypeScript Handbookを見る ◦ https://www.typescriptlang.org/docs/handbook/intro.html • 本を読む ◦ 体系的に一気に覚えてしまいたいときは効率が良い ◦ 本の知識はその時点のスナップショットになる
  9. 脱線タイム:「気軽に使える」を理解しよう • 「気軽に使える」仕組みには様々な工夫がされている ◦ 一方でそれらが割り切った要素があることを理解して使おう ◦ 例えば... ▪ 内部で使われてるライブラリに細かい設定ができないかも? ▪

    依存関係の理由で一部の最新の機能を使えないかも? • 割り切りは悪いことではなく、単に使い方があってないということ ◦ 別の手段を模索するのも一つの手 ◦ 使う前にかならず評価しよう
  10. Vite (https://ja.vitejs.dev/) • Vue.js を作った Evan You 氏が作成したフロントエンドツール ◦ バンドラではなくそれらをベースにした開発ツール

    • ES Moduleをベースとしておりビルドが高速 (rollupによるもの) ◦ require ではなく import を使用する • JSを活用したペライチのページをまるごと作ったり 既存のJS資産をESMに対応させればビルドも可能 • TypeScript向けのテンプレートが存在していてすぐ使える • React、Vue、Svelte など好きなものが使える
  11. • ランディングサイトをReactやVueで楽しつつ作りたい ◦ テンプレートを使ってすぐに開発に取りかかれる ◦ CSS Modulesなども最初から使える状態 • すでにある小規模なReactやVueアプリのビルドを整理したい ◦

    ビルド処理を整理してViteに移譲してメンテナンス性を上げる • 今動いている JavaScript を TypeScript に移行したい ◦ 細かな設定をせずビルド環境を用意できる ◦ 必要であれば内部の rollup の設定もできる Viteの活用例
  12. Deno • TypeScript の実行環境 (=TSをそのまま実行できます) • Rust+TS製、swcによるトランスパイルが行われているため高速 • Node.js 向けのライブラリもCDNを経由することで使用できる

    • 1コマンドでインストールできるので、環境構築が楽 • VSCode向けの拡張機能を入れればDeno向けのコード補完もOK • 標準APIに準拠しておりMDNに互換性情報が載るようになった