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

@fukuoka.ts #3

Transcript

1. もうオレには関係なくない
   TypeScript :||
   2021-08-23 fukuoka.ts @dojineko
   

   View Slide

2. どじねこ @dojineko
   GMOペパボ / よろず屋
   

   View Slide

3. 今日お話する内容
   

   View Slide

4. TypeScriptが便利なのはわかったよ
   

   View Slide

5. でも、業務でレガシーを抱えてる
   オレにはあまり関係ないもんな...
   

   View Slide

6. 実務で使えるやり方ってないんだろうか...
   

   View Slide

7. やりましょう
   

   View Slide

8. もくじ
   ➔ これまでのTypeScript
   ➔ 理想と現実
   ➔ TypeScriptを学ぶとは
   ➔ 気軽に使える武器たち
   

   View Slide

9. はじめるまえに
   ● おはなしすること
   ○ TypeScriptの簡単な現状
   ○ お仕事で使うための取り組み方
   ○ 便利な武器へのポインタ
   ● おはなししないこと
   ○ TypeScriptの新機能
   ○ TypeScriptの細かな言語仕様
   ○ 具体的なコードについて
   

   View Slide

10. これまでのTypeScript
    

    View Slide

11. 拡大するTypeScript
    ● 2012年に登場したTypeScriptは、JavaScriptによるアプリケーション
    開発シーンの拡大により、2018年頃より急速にシェアを伸ばしている
    GitHubにおける言語ランキングの推移
    (https://octoverse.github.com/)
    

    View Slide

12. 型定義の拡充
    ● 2021年現在においては型情報の提供が豊富に行われており
    TypeScriptで実装されたモジュールも増えてきている
    ● 星の数ほどあるモジュールのどれが継続的に
    メンテナンスされているかの一つの指標になる
    型定義が含まれるパッケージは
    npm で TSのアイコンが表示されます
    

    View Slide

13. ● 「TypeScript」という言語仕様となり、Microsoftの実装した「tsc」
    以外にも、「swc」(Rust) や「babel」といったトランスパイル速度に
    特化した実装や、統合的な開発体験を意識した「rome」も出てきてい
    る
    言語仕様にもなったTypeScript
    

    View Slide

14. 実行環境としてのTypeScript
    ● TypeScript を前提とした実行環境 Deno が登場した
    ● ちょっと古い話題だと ts-node が production ready になった
    ※ 個人的には Deno をとても推しています
    

    View Slide

15. ツールなどの対応
    ● 各種フレームワークやツールでTypeScriptを最初からサポートする
    アップデートが提供されており、特別な設定を行わず型を使用した
    開発が可能になってきた。
    ○ Next.js、Nuxt.js などのフロントエンドフレームワーク
    ○ Nest.js などのフルスタックフレームワーク
    ○ Vite のTypeScriptテンプレート
    

    View Slide

16. これまでのTypeScript - まとめ
    ➔ TypeScriptが言語仕様として見られるようになってきており、
    開発規模拡大時に障壁になるトランスパイル時間を
    削減、高速化する実装が出てきている
    ➔ 2019年頃までに比較してフレームワークやツールが積極的に
    TypeScriptをサポートするようになり、導入の敷居が低くなった
    ➔ 単なるJavaScriptへのトランスパイルの利用にとどまらず、
    そのまま実行できる環境も出てきた
    

    View Slide

17. 理想と現実
    

    View Slide

18. 考えうる理想
    ● TypeScriptを取り巻く環境はより良くなってきており、
    比較的導入しやすい状態になってきたと言えそう
    ● 新規開発であれば技術選定の候補には必ず入れてもいいような状態
    ● 「よーしパパ、TypeScriptで開発始めちゃうぞ〜！」
    

    View Slide

19. 立ちふさがる現実
    ● 現実は...理想には...程遠いことが...あまりにも多すぎる...
    ○ 一番導入しやすそうな新規開発ってそんなに機会は無い
    ○ 20年近く積み上げられたレガシーなシステムの存在
    ■ 例: PHP と jQuery のアプリ
    ■ 例: Ruby on Rails と CoffeeScript のアプリ
    ○ 課せられたミッションはそれらの運用と保守
    ■ 運用と保守
    ● 運用と保守
    ○ 運用と保守
    ■ 運用と保守
    

    View Slide

20. やっぱオレには関係ないじゃん...
    休みはゲームして遊びたいし...
    

    View Slide

21. ちょっとまって！
    休みはゲームで遊ぼう
    

    View Slide

22. 現実は分解して認識しよう
    ● TypeScript は JavaScript のスーパーセット
    ○ つまり、今あるアプリ資産を捨てる必要はない
    ○ 手を加えるところからTypeScriptにしていけるということ
    ● TypeScriptで開発するメリットを把握しておく
    ○ 今ある現実をより良くするための手段と理解しておく
    ■ 型による整合性チェックができる
    ■ コード品質が上がる
    ■ モチベーションの向上 など
    

    View Slide

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

    View Slide

24. 課題の分解例 2
    ● 例: Ruby on Rails と CoffeeScript のアプリ
    ○ CoffeeScript は JavaScript を出力する
    ○ JavaScript にさえなれば TypeScript としても扱える
    ■ decaffeinate などでざっと変換するとよい
    ○ Rails の場合は Webpacker 組み合わせることもあるが、
    これは無理して使わなくても良い
    ■ 素朴に tsc でビルドして配置するだけでもいい
    ■ webpack や rollup で別途ビルドするやり方も
    

    View Slide

25. 脱線タイム: TypeScriptにするメリットとは？
    ● 開発体験の向上
    ○ VSCodeなど対応している環境を使えば、コード補完つかえる
    ● コード品質の向上
    ○ 無視されがちな undefined や null の可能性をチェックできる
    ● テスト工数の削減
    ○ ビルド時にある程度間違いを事前に検知できる
    ● モチベーションの向上
    ○ 見落とされがちだが人間が開発している以上は、
    人間の気持ちの状態は開発速度に大きく影響する。
    

    View Slide

26. ちょっと古いけどこれらのスライドも参考に見てくれるとうれしいです
    https://speakerdeck.com/dojineko
    

    View Slide

27. 脱線タイム: レガシーに対しての接し方
    ● 本当に一切触らなくていいなら何もしないでおこう
    ○ なにも手を入れないで済むのはそれはそれで理想状態
    ● 継続的に手を入れる必要があるものなら端っこから改善していこう
    ○ 手を入れやすいようにしていかないと開発速度は必ず鈍化する
    ■ 将来の自分、チームメンバーを苦しめることになる
    ● 見てると「アレ」な実装はあるので「今までありがとう」を意識しよう
    ○ パラダイムの変化や機能の改善、技術水準の変化に起因する
    ○ 感謝しつつも、適切に対処することが大切
    

    View Slide

28. 理想と現実 - まとめ
    ➔ いきなりTypeScriptを実務に活かそうとすると、新規開発はともか
    く、継続案件ではなかなかないという現実に立ちふさがれる
    ➔ TypeScriptはJavaScriptのスーパーセットであるという特性を
    使えば、システムの保守運用でも活用するシーンは大いにある
    ➔ 開発品質を上げるために、モチベーションを上げるために、
    未来に負債を残さないためにやっていきましょう
    

    View Slide

29. TypeScriptを学ぶとは
    

    View Slide

30. うわ しんどそう...
    必要なことはJSとTSを別々に学ぶのではなく...
    

    View Slide

31. TSがJSを内包したモノであると理解すること
    一石二鳥！
    

    View Slide

32. TypeScriptの歩き方
    ● TypeScriptはJavaScriptのスーパーセット
    ● JavaScriptの構文はすべてTypeScriptで使用可能
    ● TypeScriptを学ぶとはすなわちJavaScriptも同時に学ぶこと
    ○ JavaScriptがわかればTypeScriptで覚えることは比較的僅か
    ○ 学習量が二倍あるということではなく
    1つ覚えれば2つの知識として使えるお得なセット！
    

    View Slide

33. 具体的な手段の例
    ● やりたいことドリブンでとにかく手を動かす
    ○ やってみるのが一番早い
    ● JavaScript Primerを見る
    ○ https://jsprimer.net/
    ● TypeScript Handbookを見る
    ○ https://www.typescriptlang.org/docs/handbook/intro.html
    ● 本を読む
    ○ 体系的に一気に覚えてしまいたいときは効率が良い
    ○ 本の知識はその時点のスナップショットになる
    

    View Slide

34. 気軽に使える武器たち
    

    View Slide

35. そのまえに「気軽に使える」とはなんだろう？
    ● 気軽に使うために必要なこととは？
    ○ 手がかからないこと
    ■ とりあえず入れればなんとかなりそうなもの
    ○ すぐ使えること
    ■ 複雑な設定を必要とするものは職人が必要になる
    ○ 過剰に「簡単」でないこと
    ■ 「簡易さ」と「単純さ」は異なる
    

    View Slide

36. 脱線タイム:「気軽に使える」を理解しよう
    ● 「気軽に使える」仕組みには様々な工夫がされている
    ○ 一方でそれらが割り切った要素があることを理解して使おう
    ○ 例えば...
    ■ 内部で使われてるライブラリに細かい設定ができないかも？
    ■ 依存関係の理由で一部の最新の機能を使えないかも？
    ● 割り切りは悪いことではなく、単に使い方があってないということ
    ○ 別の手段を模索するのも一つの手
    ○ 使う前にかならず評価しよう
    

    View Slide

37. フロントエンドの場合
    

    View Slide

38. Vite (https://ja.vitejs.dev/)
    ● Vue.js を作った Evan You 氏が作成したフロントエンドツール
    ○ バンドラではなくそれらをベースにした開発ツール
    ● ES Moduleをベースとしておりビルドが高速 (rollupによるもの)
    ○ require ではなく import を使用する
    ● JSを活用したペライチのページをまるごと作ったり
    既存のJS資産をESMに対応させればビルドも可能
    ● TypeScript向けのテンプレートが存在していてすぐ使える
    ● React、Vue、Svelte など好きなものが使える
    

    View Slide

39. Vite で React を使用する場合の設定例 (テンプレートより)
    ViteにReact用のプラグインを
    設定しているだけだがこれが全て
    

    View Slide

40. ● ランディングサイトをReactやVueで楽しつつ作りたい
    ○ テンプレートを使ってすぐに開発に取りかかれる
    ○ CSS Modulesなども最初から使える状態
    ● すでにある小規模なReactやVueアプリのビルドを整理したい
    ○ ビルド処理を整理してViteに移譲してメンテナンス性を上げる
    ● 今動いている JavaScript を TypeScript に移行したい
    ○ 細かな設定をせずビルド環境を用意できる
    ○ 必要であれば内部の rollup の設定もできる
    Viteの活用例
    

    View Slide

41. Svelte (https://svelte.dev/)
    ● フロントエンドコンパイラ
    ○ VueやReactと異なりSvelteでビルドした結果は
    ほぼ純粋なJavaScriptとして出力される
    ● バンドルサイズが比較的小さい (※ 諸説あり)
    ● 仮想DOMを使わない
    ● 実装にはTypeScriptも使用できる
    ● 書き味はVueに近い (※ 個人の感想です)
    

    View Slide

42. Svelteで作ったコンポーネントのサンプル
    https://svelte.dev/examples#nested-components
    

    View Slide

43. ● Chromeの拡張のポップアップ画面をSvelteで作る
    ○ ビルド結果のサイズが小さく高速なメリットを活かす
    ● React と Vue を横断して使えるコンポーネントを作る
    ○ サイズが小さく、場合によっては単独でも使える点を活かす
    Svelteの活用例
    

    View Slide

44. ちょっと宣伝 (TS+Vite+Svelte)
    ● TypeScript と Vite、Svelteを組み合わせて、
    Chromeの拡張機能を作ったときのお話があるそうです！
    ● @litencatt のLTに乞うご期待
    

    View Slide

45. Next.js / Nuxt.js
    ● フロントエンドの完全な新規開発や、リプレース案件の候補に
    ● 必要であればWebAPIを作るための仕組みも備わっている
    ● 開発元やコミュニティによる進化が継続している
    ○ TypeScriptのサポートもある
    ● ※取り上げると膨大になるので今回は割愛...
    

    View Slide

46. フロントエンド以外の場合
    

    View Slide

47. Deno
    ● TypeScript の実行環境 (=TSをそのまま実行できます)
    ● Rust+TS製、swcによるトランスパイルが行われているため高速
    ● Node.js 向けのライブラリもCDNを経由することで使用できる
    ● 1コマンドでインストールできるので、環境構築が楽
    ● VSCode向けの拡張機能を入れればDeno向けのコード補完もOK
    ● 標準APIに準拠しておりMDNに互換性情報が載るようになった
    

    View Slide

48. ts-node
    ● Node.jsでTypeScriptを直接実行するためのライブラリ
    ● Node.jsの資産をすべてそのまま使用可能
    ● 型チェックをONにしても実用上問題ない速度で動作する
    ● Node.jsの互換性情報はMDNに載っている
    

    View Slide

49. MDNにおけるDenoとNode.jsの互換性リスト対応の様子 (例: TextDecoder)
    

    View Slide

50. Denoやts-nodeの活用例
    ● 手元で使う便利ツールをts-nodeやDenoで作る
    ○ TypeScriptの学習の機会を作りたいときなど
    ■ 「とりあえずShellScriptにするか」とかの代替にしたり
    ○ チームにじわじわと普及させていきたいときなどに
    ● WebAPIサーバーの実装に
    ○ ts-nodeならExpressが使える
    ○ DenoならDeno deployをつかうと本番環境の構築もかんたん
    

    View Slide

51. clasp (https://github.com/google/clasp)
    ● Google製のGoogle App Script(GAS)開発ツール
    ● Node.js上で動作する
    ● TypeScriptでGASを作成しデプロイできる
    ● GAS向けの型情報がつかえる
    ● Jestなどでテストできる
    

    View Slide

52. 気軽に使える武器たち - まとめ
    ● 今ある資産を活かしながら
    TypeScriptのメリットを活用する手段はたくさんある
    ● ツールは活用シーンに合わせて評価しよう
    ● JavaScript/TypeScriptはフロントエンドだけでなく
    サーバーサイドや手元の環境、GASなど
    活用シーンはいろいろある！
    

    View Slide

53. まとめ
    

    View Slide

54. 今回のまとめ
    ● TypeScriptは新規開発だけでなく、既存資産に対しての組み込みや
    運用効率化にも活用できる
    ● 最近では、TypeScriptを前提とした簡単に使える仕組みが増えてき
    ており、導入や置き換えにかかるコストがかなり低下している
    ● TypeScriptを触っていればJavaScriptも完全に理解できる...かも？
    

    View Slide

55. Happy TypeScript!!
    

    View Slide

56. View Slide