TypeScriptの基礎 - 開発環境のソースを表示

== 概要 ==
TypeScriptは、Microsoftが開発したJavaScriptのスーパーセット (superset) であり、静的型付けと高度な言語機能を備えたプログラミング言語である。<br>
<br>
全ての有効なJavaScriptコードはTypeScriptとしても有効であるため、既存のJavaScriptプロジェクトへの段階的な導入が可能である。<br>
TypeScriptで記述されたコードは、tscコンパイラによって型情報が除去され、通常のJavaScriptコードに変換されて実行される。<br>
<br>
開発環境の構築には、以下に示すアプローチが一般的である。<br>
<br>
<center>
{| class="wikitable"
|+ 開発環境の構築アプローチ
! アプローチ !! 説明
|-
| tscコンパイラを直接使用する方法 || TypeScriptの公式コンパイラを用いた基本的なアプローチ
|-
| Viteを使用する方法 || 開発サーバと高速ビルドを提供するフロントエンドビルドツールを活用するアプローチ
|-
| TypeScript Playgroundを使用する方法 || インストール不要でWebブラウザ上でTypeScriptを試せるオンライン環境
|}
</center>
<br>
TypeScriptを学習する場合は、TypeScript Playgroundから試し、その後ローカル環境を構築することを推奨する。<br>
<br><br>

== TypeScriptとは ==
TypeScriptは、Microsoftによって2012年に公開されたオープンソースのプログラミング言語である。<br>
JavaScriptをベースとしながら、静的型付けなどの機能を追加することで、大規模なアプリケーション開発の課題を解決することを目的として設計された。<br>
<br>
==== JavaScriptとの関係 ====
TypeScriptはJavaScriptのスーパーセットとして設計されており、以下の関係が成り立つ。<br>
<br>
<center>
{| class="wikitable"
|+ JavaScriptとの互換性
! 特徴 !! 説明
|-
| rowspan="2" | 完全な互換性
| 全ての有効なJavaScriptコードは、そのままTypeScriptとして有効である。
|-
| 既存のJavaScriptファイルを <u>.ts拡張子</u> に変更するだけで、<br>TypeScriptとして扱うことができる。
|-
| 段階的な型付け || 既存プロジェクトへの段階的な導入が可能であり、型注釈のない箇所はJavaScriptと同様に動作する。
|-
| rowspan="2" | JavaScriptへのコンパイル
| TypeScriptは最終的にJavaScriptにコンパイルされるため、<br>JavaScriptが動作する全ての環境で実行できる。
|-
| Node.js、Webブラウザ、その他のJavaScriptランタイムで動作する。
|-
| ECMAScriptへの準拠 || TypeScriptはECMAScript仕様に準拠しており、<br>最新のJavaScript機能 (async / await、アロー関数等) を利用できる。
|}
</center>
<br>
==== TypeScriptの主要な特徴 ====
下表に、TypeScriptが提供する主要な機能と特徴を示す。<br>
<br>
<center>
{| class="wikitable"
|+ TypeScript の主要な機能と特徴
! 機能 !! 説明
|-
| rowspan="3" | 静的型付け (Static Typing)
| 変数、関数のパラメータ、戻り値に型を注釈 (アノテーション) として付与できる。
|-
| コンパイル時に型の不一致を検出し、実行前にエラーを発見できる。
|-
| コードの意図が明確になり、チームでの開発でコミュニケーションコストが下がる。
|-
| rowspan="3" | 型推論 (Type Inference)
| 全てに型を明示的に記述しなくても、コンパイラが文脈から自動的に型を推測する。
|-
| 例えば、<u>const x = 5;</u> と記述した場合、<u>x</u> の型は自動的に <u>number</u> と推論される。
|-
| 型推論により、型安全性を保ちながらソースコードの記述量を減らすことができる。
|-
| rowspan="2" | コンパイル時エラー検出
| 実行前に多くのエラーを検出できるため、デバッグに掛かる時間を削減できる。
|-
| 存在しないプロパティへのアクセス、型の不一致、未定義変数の使用等を事前に発見できる。
|-
| rowspan="2" | インターフェースとジェネリック
| インターフェースを用いてオブジェクトの構造を定義して、コードの一貫性を保つことができる。
|-
| ジェネリックを用いて、型を汎用的に扱う再利用可能なコードを記述できる。
|-
| rowspan="2" | 列挙型 (Enum)
| 名前付きの定数の集合を定義する列挙型を利用できる。
|-
| 関連する定数をグループ化して、コードの可読性を向上させる。
|-
| rowspan="2" | IDE統合
| Zed等の現代的なエディタとの統合により、優れた開発体験を提供する。
|-
| 自動補完 (IntelliSense)、リファクタリング支援、型情報のホバー表示等の機能が利用できる。
|}
</center>
<br><br>

== コンパイルの仕組み ==
TypeScriptのコードは、そのままWebブラウザやNode.jsで実行することはできない。<br>
<br>
tscコンパイラを用いてJavaScriptコードに変換 (コンパイル) する必要がある。<br>
<br>
==== tscコンパイラ ====
tscは、TypeScriptの公式コンパイラである。<br>
型チェックとトランスパイル (TypeScript -> JavaScriptへの変換) の2つの役割を担う。<br>
<br>
===== コンパイルの流れ =====
tscコンパイラによるコンパイルは、以下の手順で行われる。<br>
<br>
# ソースコードの読み込み
#: TypeScriptソースコード (<u>.ts拡張子</u> / <u>.tsx拡張子</u> ファイル) を読み込む。
#: <br>
# 構文解析とAST生成
#: ソースコードを解析して、AST (Abstract Syntax Tree : 抽象構文木) を生成する。
#: <br>
# 型チェック
#: ASTを基に型の整合性を検証し、宣言された型との一致を確認する。
#: 型エラーがある場合は、エラーメッセージを報告する。
#: <br>
# コード生成
#: 型情報を除去して、JavaScriptコードを出力する。
#: 出力先のJavaScriptバージョン (ES5、ES2020等) は、<u>tsconfig.jsonファイル</u> で設定できる。
<br>
基本的なコンパイルコマンドを以下に示す。<br>
<br>
 # 単一ファイルのコンパイル
 tsc index.ts
 
 # tsconfig.jsonの設定に従ってコンパイル
 tsc
 
 # 型チェックのみ (ファイル出力なし)
 tsc --noEmit
 
 # ファイル変更を監視して自動コンパイル
 tsc --watch
<br>
===== 型消去 (Type Erasure) =====
TypeScriptの重要な特性として、型消去 (Type Erasure) がある。<br>
コンパイル後に生成されるJavaScriptコードには、型情報が含まれない。<br>
<br>
型消去の仕組みを以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 // TypeScriptコード (コンパイル前)
 
 function greet(name: string): string {
    return "Hello, " + name;
 }
 
 const age: number = 30;
 
 interface User {
    id: number;
    name: string;
 }
 </syntaxhighlight>
<br>
上記のTypeScriptコードは、コンパイル後に以下のJavaScriptコードに変換される。<br>
<br>
 <syntaxhighlight lang="javascript">
 // JavaScriptコード (コンパイル後)
 
 function greet(name) {
    return "Hello, " + name;
 }
 
 const age = 30;
 
 // インターフェースは完全に消去される (コードに残らない)
 </syntaxhighlight>
<br>
型消去に関する重要な点を以下に示す。<br>
<br>
* 型アノテーションの削除
*: 変数や関数に付与した型注釈は、全てコンパイル時に削除される。
*: <br>
* インターフェースの消去
*: インターフェース定義は完全に削除され、生成されたJavaScriptコードには残らない。
*: <br>
* 型エイリアスの消去
*: <code>type</code> キーワードで定義した型エイリアスも、コンパイル時に削除される。
*: <br>
* ランタイムでの型情報不在
*: 型情報はランタイムでは参照できないため、実行時の型チェックには別の手段が必要になる。
*: <br>
* エラー時のコンパイル継続
*: tscは型エラーがあってもコンパイルを継続し、JavaScriptファイルを生成する。(デフォルト動作)
*: エラー時にファイルを生成したくない場合は、<u>tsconfig.jsonファイル</u> で <code>noEmitOnError: true</code> を設定する。
<br>
==== Viteでの利用 ====
Viteは、フロントエンド開発向けのビルドツールであり、TypeScriptのトランスパイルと型チェックを分離して処理する。<br>
この分離により、開発時の高速フィードバックと型安全性を両立することができる。<br>
<br>
下表に、Viteにおける処理の役割分担を示す。<br>
<br>
<center>
{| class="wikitable"
|+ Viteにおけるビルド処理の役割分担
! フェーズ !! ツール !! 処理内容 !! 型チェック
|-
| 開発時トランスパイル || esbuild (またはSWC) || TypeScript → JavaScript の高速変換 || なし
|-
| 型チェック || tsc --noEmit || 型の整合性検証のみ || あり
|-
| 本番ビルド || Rollup + esbuild || バンドリング + トランスパイル + 最小化 || なし
|}
</center>
<br>
* 開発時のトランスパイル
*: esbuild (またはSWC) を用いてTypeScriptを高速にJavaScriptに変換する。
*: 型チェックは行わないため、高速な変換が可能となり、HMR (Hot Module Replacement) の応答速度を維持する。
*: <br>
* 型チェック
*: <code>tsc --noEmit</code> コマンドで型チェックのみを実行する。(<code>--noEmit</code> オプションにより、ファイルは出力されない)
*: CIパイプラインや別ターミナルで実行することにより、型安全性を担保する。
*: <br>
* 本番ビルド
*: Rollupによるモジュールバンドリングとesbuildによるトランスパイル・最小化 (minification) を行う。
<br>
型チェックを別プロセスで実行するコマンドを以下に示す。<br>
<br>
 <syntaxhighlight lang="bash">
 # 型チェックのみを実行 (ファイル出力なし)
 tsc --noEmit
 
 # ファイル変更を監視しながら型チェックを実行
 tsc --noEmit --watch
 </syntaxhighlight>
<br><br>

== .tsと.tsxの違い ==
TypeScriptには、<code>.ts</code> と <code>.tsx</code> という2種類のファイル拡張子がある。<br>
使用する拡張子は、ファイルにJSXシンタックスが含まれるかどうかによって決まる。<br>
<br>
==== .tsファイル ====
<u>.tsファイル</u> は、通常のTypeScriptコードを記述するためのファイルである。<br>
JSXシンタックスを含まない、純粋なTypeScript / JavaScriptロジックを記述する場合に使用する。<br>
<br>
<u>.tsファイル</u> の用途を以下に示す。<br>
* ユーティリティ関数
*: 文字列操作、日付計算、数値フォーマット等の汎用関数
*: 例: <u>utils.ts</u>
*: <br>
* ビジネスロジック
*: データの変換、バリデーション、APIとの通信処理等
*: 例: <u>api.ts</u>、<u>validation.ts</u>
*: <br>
* 型定義
*: インターフェース、型エイリアス、列挙型の定義
*: 例: <u>types.ts</u>、<u>interfaces.ts</u>
*: <br>
* クラス定義
*: UIに依存しないデータモデルやサービスクラス
*: 例: <u>UserService.ts</u>、<u>AuthManager.ts</u>
<br>
<u>.tsファイル</u> の記述例を以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 // utils.tsファイル
 
 export function formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
 }
 
 export function clamp(value: number, min: number, max: number): number {
    return Math.min(Math.max(value, min), max);
 }
 </syntaxhighlight>
<br>
==== .tsxファイル ====
<code>.tsx</code> ファイルは、TypeScriptとJSXシンタックスを組み合わせて記述するためのファイルである。<br>
主にReactコンポーネントの定義に使用される。<br>
<br>
JSXは、HTMLライクなマークアップをJavaScriptコード内に記述するための構文拡張である。<br>
Reactでは、このJSXを用いてUIコンポーネントの構造を表現する。<br>
<br>
<u>.tsxファイル</u> ファイルを使用する時の重要な事柄を以下に示す。<br>
<br>
* <code>tsconfig.jsonファイル</code> での設定
*: <code>.tsxファイル</code> でJSXを使用するには、<u>tsconfig.jsonファイル</u> の <code>compilerOptions</code> に <code>jsx</code> オプションの設定が必須である。
*: Reactの場合は <code>"jsx": "react-jsx"</code> の設定を推奨する。(React 17以降の自動インポート方式に対応)
*: <br>
* 主な用途
*: Reactコンポーネント (関数コンポーネント、クラスコンポーネント) の定義
*: 例: <u>App.tsx</u>、<u>Button.tsx</u>、<u>Header.tsx</u>
<br>
<code>.tsxファイル</code> の記述例を以下に示す。<br>
<br>
 <syntaxhighlight lang="typescript">
 // Button.tsxファイル
 
 import React from "react";
 
 interface ButtonProps {
    label: string;
    onClick: () => void;
    disabled?: boolean;
 }
 
 export function Button({ label, onClick, disabled = false }: ButtonProps) {
    return (
       <button onClick={onClick} disabled={disabled}>
          {label}
       </button>
    );
 }
 </syntaxhighlight>
<br>
<code>tsconfig.jsonファイル</code> における <code>jsx</code> オプションの設定例を以下に示す。<br>
<br>
 <syntaxhighlight lang="json">
 {
    "compilerOptions": {
       "jsx": "react-jsx"
    }
 }
 </syntaxhighlight>
<br>
下表に、<code>.ts拡張子</code> と <code>.tsx拡張子</code> の違いを示す。<br>
<br>
<center>
{| class="wikitable"
|+ .tsと.tsxの比較
! 項目 !! .ts !! .tsx
|-
| JSXシンタックス || 使用不可 || 使用可能
|-
| 主な用途 || ユーティリティ、型定義、ビジネスロジック || Reactコンポーネント
|-
| tsconfig.jsonのjsx設定 || 不要 || 必須
|-
| ファイル例 || utils.ts / api.ts / types.ts || App.tsx / Button.tsx
|}
</center>
<br><br>

== 開発環境のセットアップ ==
TypeScriptの開発環境をローカルに構築するための手順を以下に示す。<br>
<br>
==== Node.jsとパッケージマネージャの準備 ====
TypeScriptの開発には、Node.jsとパッケージマネージャ (npm 等) が必要である。<br>
<br>
* Node.js
*: バージョン18以上を推奨する。
*: [https://nodejs.org/ Node.js公式サイト] からインストーラをダウンロードしてインストールする。
*: バージョン管理ツール (nvm、fnm 等) を用いて管理することも推奨される。
*: <br>
* npm
*: Node.jsにバンドルされており、Node.jsのインストール時に同時にインストールされる。
*: <code>npm --version</code> コマンドでインストールを確認できる。
<br>
Node.jsとnpmのインストール確認コマンドを以下に示す。<br>
<br>
 <syntaxhighlight lang="bash">
 # Node.jsのバージョンを確認
 node --version
 
 # npmのバージョンを確認
 npm --version
 </syntaxhighlight>
<br>
==== TypeScriptのインストール ====
TypeScriptのインストール方法には、グローバルインストールとローカルインストールの2種類がある。<br>
プロジェクトごとにバージョンを管理できるため、ローカルインストールを推奨する。<br>
<br>
 <syntaxhighlight lang="bash">
 # ローカルインストール (推奨)
 npm install --save-dev typescript
 
 # グローバルインストール
 npm install -g typescript
 </syntaxhighlight>
<br>
インストール後、tscのバージョンを確認する。<br>
<br>
 # ローカルインストールの場合
 npx tsc --version
 
 # グローバルインストールの場合
 tsc --version
<br>
<u>tsconfig.jsonファイル</u> を生成するには、以下のコマンドを実行する。<br>
<br>
 # tsconfig.jsonを生成
 npx tsc --init
<br>
<u>tsconfig.jsonファイル</u> の詳細については、[[TypeScriptの基礎 - tsconfig.json]]のページを参照すること。<br>
<br>
==== Viteプロジェクトの作成 ====
===== 対話形式での作成 =====
以下に示すコマンドを実行すると、プロジェクト名、フレームワーク、バリアント (TypeScript / JavaScript) を対話的に選択できる。<br>
<br>
 npm create vite@latest
<br>
===== テンプレートを指定した作成 =====
React + TypeScriptのプロジェクトを直接作成する場合は、以下に示すコマンドを実行する。<br>
<br>
 # React + TypeScriptテンプレートでプロジェクトを作成
 npm create vite@latest <任意のプロジェクト名> -- --template react-ts
<br>
下表に、利用可能な主要なテンプレートを示す。<br>
<br>
<center>
{| class="wikitable"
|+ Viteの主要テンプレート
! テンプレート名 !! 説明
|-
| <code>vanilla-ts</code> || フレームワークなし + TypeScript
|-
| <code>react-ts</code> || React + TypeScript
|-
| <code>vue-ts</code> || Vue.js + TypeScript
|-
| <code>svelte-ts</code> || Svelte + TypeScript
|}
</center>
<br>
===== プロジェクトの初期化と起動 =====
プロジェクト作成後は、以下の手順で依存パッケージをインストールし、開発サーバを起動する。<br>
<br>
 <syntaxhighlight lang="bash">
 # プロジェクトディレクトリに移動
 cd my-app
 
 # 依存パッケージのインストール
 npm install
 
 # 開発サーバの起動
 npm run dev
 </syntaxhighlight>
<br>
開発サーバが起動すると、ターミナルにローカルURLが表示される。<br>
Webブラウザで表示されたURLにアクセスすることにより、アプリケーションの動作を確認できる。<br>
<br>
==== TypeScript Playground ====
TypeScript Playgroundは、Webブラウザ上でTypeScriptを即座に試せるオンライン環境である。<br>
Node.jsやnpmのインストールが不要なため、TypeScriptの学習を始める時や、動作を手軽に確認する場合に活用できる。<br>
<br>
* URL
*: [https://www.typescriptlang.org/play TypeScript Playground]
<br>
下表に、TypeScript Playgroundが提供する主な機能を示す。<br>
<br>
<center>
{| class="wikitable"
|+ TypeScript Playgroundの主な機能
! 機能 !! 説明
|-
| 即座の実行 || 処理を記述すると、リアルタイムでコンパイルされたJavaScriptコードを確認できる。
|-
| 型エラーの表示 || 型エラーが発生した箇所がリアルタイムで強調表示される。
|-
| rowspan="2" | コードの共有
| 記述した処理をURLとして共有する機能を利用できる。
|-
| バグの報告や、他者へのサンプルコードの共有に活用できる。
|-
| コンパイルオプションの変更 || ターゲットバージョンや厳格モード等のコンパイルオプションをWebブラウザ上で変更して動作を確認できる。
|}
</center>
<br><br>

== 関連情報 ==
* [[TypeScriptの基礎 - tsconfig.json]]
* [[TypeScriptの基礎 - 型注釈とプリミティブ型]]
* [[TypeScriptの基礎 - 型推論]]
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Rust]][[カテゴリ:Web]]