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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

今日お話する内容

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

やりましょう

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

これまでのTypeScript

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

理想と現実

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

TypeScriptを学ぶとは

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

気軽に使える武器たち

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

フロントエンドの場合

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

まとめ

Slide 54

Slide 54 text

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