挑戦! TypeScript

Transcript

1. 挑戦！TypeScript OCHaCafe5 #4 Kyotaro Nonaka Oracle Corporation Japan Apr. 6, 2022
2. はじめに – 本日のコンセプト 「TypeScript？名前は知ってるけど使ったことはないなぁ」という人でも、 TypeScriptの特長を知り、 TypeScriptを使ったフロントエンド開発ができるように！ 2 Copyright © 2022, Oracle and/or its affiliates
3. Agenda 1. TypeScriptとは？ 2. TypeScript開発を始めよう – TypeScriptプロジェクトを用いた開発 3. TypeScript開発を始めよう – 型指定や機能の確認 4. TypeScriptで実際に画面を作ってよう 3 Copyright © 2022, Oracle and/or its affiliates
4. 自己紹介 • 野中 恭大郎 • 日本オラクル ソリューションアーキテクト本部 • 前職はECパッケージのアプリエンジニア • OCHaCafe出場7回目 • 巨人もリバプールも調子よくてスポーツ観戦が楽しいです 4 Copyright © 2022, Oracle and/or its affiliates @non_kyon
5. TypeScriptとは？ 5 Copyright © 2022, Oracle and/or its affiliates
6. TypeScriptとは？ 一言で言えば、型定義のできるJavaScript • JavaScriptの拡張 • JavaScriptとの互換性 • Microsoftが開発/メンテナンス 利用事例 • Google, Slack, など既に多くの企業が利用 TypeScriptを利用できるフレームワーク • React • Vue.js • Angular など 6 Copyright © 2022, Oracle and/or its affiliates
7. TypeScript? JavaScript? その関係 TypeScriptは、 • JavaScriptの上位互換 • JavaScriptの標準仕様である ECMAScriptに準拠 • コンパイルしてJSになる(=Node.js) なので、関係性は右図のように • 因みに、ES6とはECMAScript2015の ことを指す 7 Copyright © 2022, Oracle and/or its affiliates
8. Why TypeScript ? 型の追加 • 可読性の向上 • 保守性の向上 • 開発生産性の向上 コンパイラ • CI/CDとの親和性 • ES5/ES6の互換性 言語特性 • 標準仕様に準拠 • JavaScriptの知識をそのまま活かせる 8 Copyright © 2022, Oracle and/or its affiliates JavaScriptでは動かすまでtypoに気づけない TS化 エラーが出るのでtypoに気づける(IDEの補完機能も使える) ⇒ 生産性の向上 どんな値が入り得るのかわからない(わかりづらい) TS化 どんな値が入るのかが分かる ⇒ 可読性の向上、保守性の向上 ▪型の追加によるメリットのイメージ
9. TypeScriptで開発する = JavaScriptで開発する TypeScriptは概念的に、JavaScriptにリンターとドキュメントを加えたもの • JavaScriptを記述してプログラミング • 型によってJavaScriptを静的に解析し、バグや潜在的なバグを減らす(リンターの導入) • 型によってJavaScriptの可読性を向上(ソースコードそのもののドキュメント化) 9 Copyright © 2022, Oracle and/or its affiliates JavaScriptを学べば、TypeScriptは書ける！
10. TypeScriptの「型」システム TypeScriptは、型を追加することで、 リンターのメリットやドキュメントのメリットをJavaScriptに組み込むことを可能とする 型という概念の導入障壁もできるだけ低くなるように設計されている • 型推論 • 型指定 • 構造的な型システム 10 Copyright © 2022, Oracle and/or its affiliates
11. 暗黙的な型推論 TypeScriptは、可能な限り型推論を行う 例えば、特に大きなプロジェクトで、ある変数が stringなのかnumberなのか、などの可読性 の問題を解決 また、エラーは発生するものの、JavaScript自 体は元のまま出力されるので、段階的な移行 を実現できる 11 Copyright © 2022, Oracle and/or its affiliates var foo = 123; //number(数値)を代入 foo = ‘456’; // stringを代入しようとするとエラー
12. 明示的な型指定(TypeAnnotation) 明示的に型を指定 (TypeAnnotationの記述)が可能 明示的に型を指定することで • コード自体がドキュメントになる • コンパイラに対して型の解釈を強制する 12 Copyright © 2022, Oracle and/or its affiliates var foo: number = 123; //コロンで型指定 foo = ‘456’; // stringを代入しようとするとエラー
13. 構造的型システム 端的に言えば、「オブジェクトの構造が同じであれば、型に 互換性がある」ということ 追加のプロパティがあっても互換性は保たれる ※構造的型について非常にわかりやすくまとめてくださっています https://qiita.com/suin/items/52cf80021361168f6b0e 13 Copyright © 2022, Oracle and/or its affiliates
14. TypeScript開発を始めよう TypeScriptプロジェクトを用いた開発 14 Copyright © 2022, Oracle and/or its affiliates
15. TypeScriptプロジェクトの全体像 プロジェクトルート/ │ ├ src/ │ ├ node_modules │ │ │ ├ js/ │ └ ts/ │ │ ├ dist/ │ └ tsconfig.json 15 Copyright © 2022, Oracle and/or its affiliates プロジェクトの管理単位 JavaScriptのソースを配置 TypeScriptのソースを配置 コンパイル成果物の置き場 tscによるコンパイル コンパイルコンテキスト ├ node_modules └ ts/ │… ├ example1.ts │ ├ example2.ts │ ├ example3.ts │… グローバル名前空間を利用 した変数や関数の共有 3rdパーティライブラリなど impor/exportによる、 異なるTSファイル間にお ける変数や関数のやりとり
16. compilation context (コンパイルコンテキスト) TypeScriptでは、tsconfig.jsonファイルを用いて、コンパイル対象のファイル情報(include/exclude)やコ ンパイラオプションを設定する 16 Copyright © 2022, Oracle and/or its affiliates ▪ tsconfig.jsonの作成 • 空のJSONファイルの作成 • tsc init コマンドの実行 {} $ tsc --init ▪ コンパイラオプション https://www.typescriptlang.org/ tsconfig#compilerOptions { "compilerOptions": { "target": "es5", "module": "commonjs", "lib": [], … } } ▪ include/exclude **/*で「全てのフォルダとファイル」を意味(glob) { "compilerOptions": … "include":[ "./folder" ], "exclude":[ "./folder/**/*.spec.ts", "./folder/someSubFolder" ] }
17. TypeScriptコンパイラ(tsc) インストール コンパイルの実行(親ディレクトリ含め、tsconfig.jsonが検索される) プロジェクトのディレクトリを指定 watchモードで起動 • TypeScriptプロジェクトファイルの変更を監視 • 変更があれば再コンパイルするので、変更分がすぐに確認できる 17 Copyright © 2022, Oracle and/or its affiliates $ npm install -g typescript //node.jsのインストールが必要 $ tsc $ tsc -p ./<対象のプロジェクトディレクトリ> $ tsc -w
18. Modules (モジュール) – グローバル名前空間 単純に変数宣言だけを行うと 他の.tsファイルで変数が利用できる 18 Copyright © 2022, Oracle and/or its affiliates 競合しやすくなるので 注意が必要
19. Modules (モジュール) – モジュールの仕様 exportを利用 exportを付けると エラーが出るように importを利用 importすることでexportした変数が利用できる importした変数に再代入は不可 19 Copyright © 2022, Oracle and/or its affiliates
20. Dynamic Import Expressions (動的インポート) インポートは動的(且つ非同期)に行うことも可能 初期表示のパフォーマンス改善などに役立つ 20 Copyright © 2022, Oracle and/or its affiliates ※古いブラウザ(IEなど)では利用できないこともあるので注意
21. TypeScript開発を始めよう 型指定や機能の確認 21 Copyright © 2022, Oracle and/or its affiliates
22. : TypeAnnotation で型指定 基本的な型 • class/interface/type • プリミティブ型 • 配列 • インターフェース • インライン型 特殊な型 • any • null/undefined • void その他 ジェネリクス Union Intersection Tuple Alias 22 Copyright © 2022, Oracle and/or its affiliates
23. : TypeAnnotation で型指定 基本的な型 プリミティブ型 以下の3つを意味 • string • number • boolean 配列 number[]のように、型の 後に[]を付ける インターフェース 複数の型指定を単一のも のにまとめる ※後ほど詳しく解説 インライン型 名前を持たないインター フェース(可読性の観点から、 極力使うべきではない) 23 Copyright © 2022, Oracle and/or its affiliates
24. : TypeAnnotation で型指定 基本的な型 class • 他言語のClassと同様の用途 • newでインスタンス作成が可能 • コンストラクタの定義が可能 • getter/setterを使った変数ア クセスの制御も可能 interface • 複数の型アノテーションをまとめる 用途で利用 • 変数などの型指定に用いられる • インスタンス作成ができない • implementsでClassの実装が 可能 type interfaceと同様に複数の型アノ テーションをまとめる用途 型指定に利用でき、下図”Pet”のよ うにenumのような使い方もできる 24 Copyright © 2022, Oracle and/or its affiliates
25. : TypeAnnotation で型指定 特殊な型 any 名前の通り、全ての型を許容する JavaScriptからの移行などで利用す る場合が考えられる null / undefined 正確には型ではない(≒型として指定 することはない)が、TS/JSでは存在 しない値としてnullとundefinedがあ る void 関数の戻り値がない場合にvoidを 指定 25 Copyright © 2022, Oracle and/or its affiliates
26. : TypeAnnotation で型指定 その他 ジェネリクス Javaなどと同様に、実行時 に型が決まる場合に利用が できる Union いくつかの決まった型のうちど れか、という表現が可能 Intersection &で繋ぐことによって、型と型 を併せた型として定義するこ とができる Tuple 配列的に型を指定すること ができる 26 Copyright © 2022, Oracle and/or its affiliates
27. Namespaces (ネームスペース) Namespaceを利用して、コード内部をグループ化して利用できる 基本的にはModulesの機能を使うべきだが、ファイルを切り出したりなどの必要がないため、 既存JavaScriptのTypeScript移行などに利用すると便利 27 Copyright © 2022, Oracle and/or its affiliates コンパ イル 実行
28. @types パッケージ (Definitely Typed) @typesとは？ • TypeScript用の型定義リポジトリ • JSライブラリなどを型定義済みで使えるように • パッケージの検索 • https://www.typescriptlang.org/dt/search @typesの使い方 • npmを用いて@typesパッケージをインストールすれば、グローバルに利用できる • 例: Reactのライブラリをインストール • 一般的には、ソースコード内でモジュールのように利用する 28 Copyright © 2022, Oracle and/or its affiliates npm install --save-dev @types/react import * as React from 'react';
29. アンビエント宣言(declare) アンビエント宣言(declare)を利用すると、 • 他のコンポーネントに型の情報を付加できる • 既存のJavaScriptライブラリを型安全に利用可能 • @typesパッケージもこのアンビエント宣言を利用 lib.d.ts • JSランタイムやDOMにある、一般的なJavaScriptの 機能のアンビエント宣言をまとめた型定義ファイル • TypeScriptをインストールすれば自動的に使える 29 Copyright © 2022, Oracle and/or its affiliates ▪example.d.ts ▪元の.tsファイル ※ *.d.tsの形で型定義のファイル は分けるのが一般的
30. 型アサーション TypeScriptにはオブジェクトを任意の型で上書きする型 アサーションという機能がある このエラーは、exampleが「何もフィールドを持たない型」 とコンパイラが型推論を行っているので発生する 以下のように、interfaceを定義して as を使う <>を利用することもできる ※キャストとの違い ソースコードの記述という観点では同じように扱うが、 • 実行時の型を強制するキャスト • 型をどのように解釈するかをコンパイラに伝えるアサー ション と言った違いがある 30 Copyright © 2022, Oracle and/or its affiliates
31. Enum TypeScriptではEnumが利用できる 下図のように記述した場合、内部的にはnumberとして 扱われる String型のEnumも記述可能 constを付けるとパフォーマンス的にメリットがある 31 Copyright © 2022, Oracle and/or its affiliates
32. 関数における型 パラメータに型指定 ?を付けてオプションパラメータ化 関数の型のみを定義 32 Copyright © 2022, Oracle and/or its affiliates
33. 型ガード typeof • typeof演算子を利用すると、異なるブロック内で異 なる型の形で解釈できる • 下図はnumberとstringのそれぞれで存在しないメ ソッドに対してエラーが出ている instanceof • instanceof演算子もtypeofと同様 • 下図は、異なるClass(=instance)のそれぞれで存 在しないフィールドに対してエラーが出ている 33 Copyright © 2022, Oracle and/or its affiliates
34. TypeScriptで実際に画面を作ってみよう 34 Copyright © 2022, Oracle and/or its affiliates
35. デモ: TypeScriptでDOM操作 Blank状態のHTML + JavaScriptで文字表示 35 Copyright © 2022, Oracle and/or its affiliates <div id=“app”>要素に<h1>要素がappendされる ▪demo-simpledom.htmlをブラウザで表示 これを元に 1. index.tsの記述 2. js/index.jsにコンパイル 3. メッセージをHello, TypeScript!に置き換える と言った流れのデモを行う index.js(この時点では存在しない)を読み込む
36. 実際に記述する…その前にプロジェクトの構成 • $ tsc --initの実行 • tsconfig.jsonを自動的に生成 • tsconfig.json内、outDirのコメントアウトを外し、コンパイル成果物(JS)の配置先を 指定 • index.tsを作成 • 中身はHTML内のJSのまま • ここでまず $ tsc を実行してみる • js/以下にindex.jsが出力されれば、プロジェクトの構成は上手くいっていることになる 36 Copyright © 2022, Oracle and/or its affiliates
37. 型アノテーションを用いてindex.tsを記述 ▪index.ts 37 Copyright © 2022, Oracle and/or its affiliates
38. .tsのコンパイル • $ tscをプロジェクトのルートディレクトリで実行 • 成果物のJSを確認してみる • HTMLページをブラウザで開いてみる 38 Copyright © 2022, Oracle and/or its affiliates
39. TypeScriptでWebページを作ってみる TypeScriptを使ったWeb アプリを作成 • SPA(Single Page Application) • Oracleが提供するフロン トエンドフレームワーク (ツールキット)Oracle JETを利用 • フレームワークを利用した 場合のプロジェクト構造 やTypeScripソースの構 造を確認してみる 39 Copyright © 2022, Oracle and/or its affiliates
40. Oracle JET (JavaScript Extension Toolkit) クラウド・ネイティブなエンタープライズ・システムのための JavaScript ツールキット オープンソース・プロジェクトにオラクルがエンタープライズ開発に必要な 要素を追加 • Oracle JET を構成するオープンソース・プロジェクト • オラクルが追加した要素 • 双方向データ・バインディングのための共通データ・モデルAPI、i18n/L10N、 アクセシビリティ、データ検証/変換、データ可視化UI レスポンシブ Web アプリとハイブリッド・モバイル・アプリの両方に対応 オープンソース (Universal Permissive License) で利用可能 TypeScriptに対応 40 Copyright © 2022, Oracle and/or its affiliates Knockout.js RequireJS jQuery jQuery UI Hammer
41. プロジェクト構造 demo-spa(プロジェクトルート)/ ├ node_modules -> @typesパッケージなどライブラリ群 ├ scripts -> Oracle JETがビルドなどに利用するライブラリ ├ src/ │ ├ css/ -> CSSファイル群 │ ├ js/ -> JSファイル群(アンビエント宣言を行う独自ライブラリなど) │ └ ts/ -> TSファイル群 ├ index.html -> メインページ ├ staged-themes/ -> Oracle JETがCSSテーマに利用するCSSライブラリ ├ web/ -> ビルド成果物などの配置先(FWによってdistなどの場合もあり) … └ tsconfig.json -> TypeScript設定ファイル 41 Copyright © 2022, Oracle and/or its affiliates FW固有 FW固有
42. TypeScriptソース 実際に見ながら確認 42 Copyright © 2022, Oracle and/or its affiliates
43. ご清聴ありがとうございました！ 43 Copyright © 2022, Oracle and/or its affiliates