開発備忘録：npm+TypeScript入門 Part 1

はじめに

このページでは、2025年におけるTypeScriptの開発環境の構築方法について解説します。

TypeScript開発に必要なもの

• Node.js
• npm
• コマンドラインの知識

ある方がいいもの

• Bash

Windowsの場合、BashはGit for Windows、MSYS2、WSLのいずれかをインストールすると付いてきます。

コマンドプロンプトでは技術的な落とし穴に落ちやすいです。Bashが業界標準であり、ネットでもBashを前提とした記事が多いです。以下、Bashの使用を前提とします。

Node.jsのインストール

Node.jsとはサーバサイドで動くJavaScriptのことです。具体的には、JavaScriptをコマンドラインで実行します。ブラウザの外側で自由にJavaScriptを実行できるのが最大の特徴です。これにより、JavaScriptの汎用性や自動化機能が格段に向上し、サーバでも実行可能になります。

• Node.js 公式サイト: https://nodejs.org/ja/

Windowsの場合は、公式サイトから Node.js のインストーラをダウンロードしてインストールしてください。それ以外の場合は、OSに搭載されているパッケージマネージャを用いて Node.jsをインストールしてください。インストール方法は、OSによって異なります。

BashにNode.jsとnpmのPATHを通す

Windowsの場合は、お使いのBashにNode.jsとnpmへのPATHを通してください。WindowsのNode.jsの場所は/c/Program Files/nodejsや/c/Program Files (x86)/nodejsなどになります。npmの場所は/c/Users/(ユーザ名)/AppData/Roaming/npm などです。具体的なやり方ですが、 ~/.bash_profileの最後に次のような行を追加して、Bashを再起動することになります。

export PATH="/c/Program Files/nodejs:/c/Users/katahiromz/AppData/Roaming/npm:$PATH"

npmのインストール

npmとはNode Package Managerの略です。Node.jsで使われるパッケージを管理します。

Windowsの場合、npmは、Node.jsに付属するので（2025年10月現在）、Node.jsをインストールした後に次のコマンドを実行すればインストール完了です。

npm install -g npm

Windows以外の場合は npm install -g の先頭に sudo を付けてください。

Node.jsとnpmのバージョン確認

インストールが完了したかどうか、次のコマンドで確認します。

node -v
npm -v

バージョン番号が表示されれば成功です。

Node.jsでjsを実行

適当なフォルダで次のような内容の hello.js ファイルを作成してください。

const message = 'Hello, JavaScript!';
console.log(message);

さらに、node hello.js を実行してください。「Hello, JavaScript!」と表示されます。確かにNode.jsでJavaScriptを実行できますね。

npmパッケージの作成

適当なパッケージ名（例えば「hello-ts」）のフォルダで次を実行します：

npm init

質問に答えていけば、次のようなpackage.jsonができます。質問がわからないときは、EnterキーだけでOKです。

{
  "name": "hello-ts",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "author": "",
  "type": "commonjs",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

この package.json ファイルはJSON形式で自由に変更しても構いません。ただし、JSONですので、カンマ (,) の有無やエスケープ忘れ、半角全角の違いなどに注意してください。

package.jsonのscripts とは？

package.json に "scripts"という項目がありますが、npm runで実行できるバッチ処理（スクリプト）をここに記述します。例えば、コマンドで「npm run test」と書けば、この場合、echo "Error: no test specified" && exit 1 が実行されます。

よく使うコマンドをここに記述するとよいでしょう。

パッケージに必要なライブラリを追加する方法

一般的な話ですが、開発及び配布に必要なライブラリ (dependencies) は次のように追加します。

npm install ライブラリ名

開発環境のみに必要なライブラリ (devDependencies)では--save-devオプションを付けます。

npm install --save-dev ライブラリ名

ここで、--save-devは-Dと同じです。

パッケージにインストールされたモジュールは、そのパッケージの package.json の dependencies と devDependencies に記述され、node_modulesフォルダに格納されます。

TypeScript用のコマンドをインストールする

グローバルにTypeScriptをインストールします。

npm install -g typescript

これでtsxなどのTypeScript用のコマンドが使えるようになります。

パッケージにTypeScriptをインストールする

パッケージフォルダで次を実行します：

npm install typescript @types/node -D

node_modulesフォルダが作成され、そこにいくつかのファイルが追加されます。

パッケージの実装

パッケージフォルダにソースを置くsrcフォルダを作成します。

mkdir src

さらに次のような内容のsrc/index.tsを作成します。

const message: string = 'Hello, TypeScript!';
console.log(message);

: stringの部分がTypeScript固有の型情報となります。実はTypeScriptはJavaScriptの拡張です。JavaScriptはTypeScriptの部分集合と言えます。

tsxでtsを直接実行

tsx src/index.tsを実行すると「Hello, TypeScript!」と表示されます。tsxは、TypeScriptを直接実行できるコマンドです。直接実行できるメリットの代わりにコンパイル済みに比べて実行速度が遅くなります。

tsconfig.jsonの準備

TypeScriptソース (*.ts) をJavaScript (*.js)にコンパイルするためには、tsconfig.jsonファイルが必要です。次のコマンドでデフォルトの tsconfig.json が作成されます。

npx tsc --init

npxは、node package executerの略でnpm付属のコマンドで、とにかくnodeパッケージを実行するためのコマンドです。必要に応じて tsconfig.json の内容をJSON形式で変更できます。

tsconfig.json のコンパイラオプションを少し修正しましょう。"rootDir"を"./src"に、"outDir"を"./dist"にしましょう。

...
  "compilerOptions": {
    // File Layout
    "rootDir": "./src",
    "outDir": "./dist",
...

また、Node.jsを使うので、"lib"と"types"を次のように変更します：

    "lib": ["esnext"],
    "types": ["node"],

buildスクリプトの追加

配布前のコンパイル、難読化などの処理をまとめて「ビルド」と呼びます。buildという名前のスクリプトを追加するとよいでしょう。

...(package.jsonの内部)...
  "scripts": {
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

tscは、TypeScript compilerの略で、tscの実体は node_modules/.bin の中にあります（2025年現在の仕様）。npx tscのように頭にnpxを付ければシェルからtscを実行できます。

実際にビルド

これで、npm run buildを実行するとビルドが開始されます。エラーメッセージが表示されず、配布用のdistフォルダが作成され、dist/index.jsとdist/index.js.mapができていればビルド成功です。さらに node dist/index.js を実行すると、「Hello, TypeScript!」と表示されますね。ビルド後、どこかに配布したい場合は、distフォルダの中をコピーして配布します。

ファイル「.gitignore」を追加

node_modules は大きくなりがちで実装によってしばしば変わるので、Gitに保存されてほしくないですね。次のような内容のファイル「.gitignore」を作成してください。

.idea
.DS_Store
Thumbs.db
node_modules
*.js.map
*.tsbuildinfo
dist

ここに記載されている .DS_Store (macOSで使われる) やThumbs.db (Windowsで使われる)などはGitに保存する必要はありません。node_modules がなくても node_modules の中身は npm install で復元できます。

JavaScriptの難読化と最適化 (minify)

JavaScriptの難読化と最適化には、UglifyJSを使います。VSCodeを使う方法もありますが、ここでは紹介しません。UglifyJSのインストールは次の通りです：

npm install -g uglify-js

実際に難読化するには、次のようなコマンドラインを実行します。

uglifyjs dist/index.js -c -m -o dist/index.min.js

この場合、dist/index.min.jsが実際に難読化したファイルになります。うまく行けば、ファイルサイズが小さくなったものの、難読化前と同じように動作します。この難読化処理は、次のようにscriptsとしてpackage.jsonに記載するとよいでしょう。

...(package.json内部)...
  "scripts": {
    ...
    "build": "tsc && npm run minify",
    "minify": "uglifyjs dist/index.js -c -m -o dist/index.min.js",
    ...
  },
...

これで npm run buildを実行すれば難読化します。UglifyJS の詳しい使い方は、uglifyjs --helpをご覧ください。

http-serverを使ってみる

Webサーバーをローカルホストで起動してブラウザでアクセスすることも可能です。http-serverを開発用としてローカルにインストールします：

npm install -g http-server

次に、serverというスクリプトをpackage.jsonのscriptsに追加します：

...
"scripts": {
  ...
  "server": "http-server ./dist -o",
  ...
}
...

これで npm run server でブラウザとWebサーバーlocalhost:8080が起動します。http-serverの詳しい使い方はこちら。

免責事項

Web技術は非常に変化が速いものです。ここに書いていることは、仕様変更などにより、将来動かなくなるかもしれません。また、Web技術は実に多様であり、あなたのWeb技術と私のWeb技術は異なっていても良いのです。著者はまだまだ初心者ですので間違いがあるかもしれません。

終わりに

2025年のTypeScriptの開発環境構築について解説しました。連絡は katayama.hirofumi.mz@gmail.com まで。

参考資料

• https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
• https://ics.media/entry/4682/
• https://www.npmjs.com/package/http-server
• https://github.com/Enchan1207/hello-ts