先生と生徒の会話形式で理解しよう

生徒

「今までJavaScriptで作ってきたプログラムがあるのですが、これをTypeScriptと一緒に使うことはできますか？」

先生

「もちろんです！TypeScriptはJavaScriptをベースに作られているので、古いコードや最新のES6コードと共存させることが可能ですよ。」

生徒

「でも、拡張子が違うとエラーになりそうで怖いです。具体的にどう設定すればいいんでしょうか？」

先生

「設定ファイルを少し調整するだけで、JSファイルを読み込めるようになります。その手順を優しく解説しますね！」

1. TypeScriptとJavaScriptの共存とは？

プログラミングの世界には、「JavaScript（ジャバスクリプト）」という非常に有名な言葉があります。これはWebサイトに動きをつけるための言語です。そして、そのJavaScriptをより使いやすく、ミスが起きにくいように進化させたのが「TypeScript（タイプスクリプト）」です。

「新しくTypeScriptを学び始めたけれど、過去に作ったJavaScriptのファイルもそのまま使いたい」「便利なJavaScriptのライブラリ（部品集）を取り入れたい」という場面はよくあります。これを共存（きょうぞん）と呼びます。TypeScriptは、JavaScriptを包み込むような関係性にあるため、適切な設定を行えば、同じプロジェクト内で両方のファイルを混ぜて使うことができるのです。

特に最近のJavaScriptは「ES6（イーエスシックス）」や「ESNext（イーエスネクスト）」と呼ばれ、非常に便利な機能がたくさん追加されています。これら最新の書き方で書かれたJavaScriptファイルを、TypeScriptから呼び出す方法をマスターしましょう。

2. JavaScriptファイルを読み込むための設定「allowJs」

初期状態のTypeScriptは、安全性を守るために「JavaScriptファイル（.js）」を読み込まないようになっています。そこで、TypeScriptの設定ファイルであるtsconfig.json（ティーエスコンフィグ・ジェイソン）を編集する必要があります。このファイルは、いわば「プログラミングのルールブック」のようなものです。

このルールブックの中に、「allowJs（アロウ・ジェイエス）」という項目を追加します。これは「JavaScriptを許可する」という意味の英語です。

用語解説：tsconfig.json
TypeScriptのコンパイラ（翻訳機）に対して、「どのようにプログラムを変換するか」を指示するための設定ファイルです。

設定の書き方

プロジェクトのルートフォルダ（一番上の階層）にあるtsconfig.jsonを開き、以下のように記述を確認、または追記してください。


{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "outDir": "./dist",
    "target": "ES6"
  },
  "include": ["src/**/*"]
}

ここで重要なのは "allowJs": true です。これを「true（真）」にすることで、TypeScriptは「あ、JavaScriptファイルも仲間なんだな」と認識してくれるようになります。逆にここが「false」のままだと、JavaScriptを読み込もうとした瞬間に「そんなファイルは知りません！」とエラーが出てしまいます。

また、"checkJs": true にすると、JavaScriptファイルの中身までTypeScriptが厳しくチェックしてくれるようになりますが、初心者のうちはエラーがたくさん出て混乱するため、まずは false（チェックしない）にしておくのがおすすめです。

3. 実際にJSファイルを読み込んでみよう

それでは、具体的な例を見ていきましょう。例えば、計算を行うJavaScriptファイルがあり、それをTypeScriptから呼び出す場面を想像してください。料理に例えるなら、秘伝のタレ（JavaScript）を、新しい料理（TypeScript）の隠し味として使うようなイメージです。

手順1：JavaScriptファイルを作成する

まずは、mathUtils.js という名前で、単純な足し算をする関数を作ります。これは最新のES6という書き方（exportキーワード）を使っています。


// mathUtils.js (JavaScriptファイル)
export const add = (a, b) => {
    return a + b;
};

手順2：TypeScriptファイルから呼び出す

次に、main.ts というTypeScriptファイルから、先ほどのJavaScriptを読み込みます。読み込むときは import（インポート） という言葉を使います。これは「外から持ってくる」という意味です。


// main.ts (TypeScriptファイル)
import { add } from './mathUtils';

const result = add(10, 20);
console.log("計算結果は: " + result);

このように、拡張子が .ts であっても .js のファイルを普通の部品と同じように取り扱うことができます。これが共存の第一歩です。パソコンを初めて触る方にとって、ファイルの種類が違うものを混ぜるのは不思議に感じるかもしれませんが、TypeScriptが裏側で「翻訳」をしてくれているので安心してください。

4. ES6/ESNextとの連携が重要な理由

なぜ、わざわざJavaScriptと連携させる必要があるのでしょうか？それは、現代のシステム開発において、すべてをゼロから作り直すことはほとんどないからです。世界中のエンジニアが作った便利な道具（ライブラリ）の多くはJavaScriptで書かれています。

また、最新のJavaScript規格であるESNextでは、クラス（設計図）の作り方や、データの効率的な扱い方が日々進化しています。TypeScriptは常にこれらの最新機能を追いかけているため、JavaScriptの進化をそのまま取り入れつつ、TypeScriptの強みである「型（データの種類）のチェック」を組み合わせることができます。

例えば、大きな会社のシステムを古いJavaScriptからTypeScriptに引っ越しさせる際も、一気に全部変えるのではなく、少しずつ1ファイルずつTypeScriptに変換していく「段階的な移行」が可能です。このとき、allowJsの設定は必須のテクニックとなります。

5. 共存時に気をつけるべきポイント

JavaScriptとTypeScriptを混ぜて使うとき、一つだけ大きな違いがあります。それは「型（かた）」の情報です。TypeScriptは「この箱には数字が入ります」「この箱には文字が入ります」と厳しく決めますが、JavaScriptは「何を入れても自由」というスタンスです。

そのため、JavaScriptから読み込んだ関数は、TypeScript側から見ると「何が入っているかよくわからない謎の存在（any型）」に見えてしまうことがあります。この謎を解くために、将来的に「型定義ファイル（.d.ts）」という説明書を作ることもありますが、まずは「JSファイルを読み込める」という状態を作れるようになることが大切です。

もし読み込みでエラーが出る場合は、以下の3点を確認してみましょう。

tsconfig.json の allowJs が true になっているか。
ファイルの保存場所（パス）が合っているか。
ファイルの拡張子を間違えていないか。

6. 実際の開発現場でのイメージ

プログラミング未経験の方に向けて、開発の流れを例えてみます。TypeScriptでの開発は「設計図をしっかり書く建築」に似ています。一方、JavaScriptは「現場の判断で柔軟に作るDIY」のようです。

既存のJavaScriptコードを読み込むというのは、過去にDIYで作った丈夫な椅子（JSの関数）を、新しく建てる大きな家（TypeScriptのプロジェクト）のリビングに配置するようなものです。すべてを一から作り直す必要はなく、良いものはそのまま使い、新しい部分はしっかりとした設計図（TypeScript）に基づいて作る。これが効率的なプログラミングのコツです。

パソコンの操作に慣れていない方は、まずはファイルを「作成」して「保存」する、という一連の流れを繰り返してみてください。tsconfig.jsonを書き換えるという作業は、パソコンの設定を変更するような少し緊張する作業かもしれませんが、一度覚えてしまえば、TypeScriptの活用の幅がぐんと広がりますよ。