LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Yukimi_Choko(雪見 チョコ)

TypeScript初心者が小さな個人開発する際の全体手順メモ（Win版）

Last updated at Posted at 2024-12-31

個人開発新規作成する時のファイル作成からのメモ
小さなプロジェクトを対象としReactなどは使っていない
自分自身の理解を深めるためにあえて手順を分けてる場所も有り

TypeScriptとVScodeを使用、そこまでの説明は割愛

途中で中断した際、作業ディレクトリが思った場所でないことがあるので注意！その場合ここではcd my-typescript-projectを打つ

1.Node.jsのインストール

初回のみNode.jsのインストール必要。npm（Node Package Manager）が利用可能になる為
（インストール手順は割愛）

2.プロジェクトのディレクトリを作成

1.Node.jsのインストールは初回のみ、2回目以降はココから始める

mkdir my-typescript-project
cd my-typescript-project

  • mkdir my-typescript-projectmkdir
    現在のディレクトリ（ターミナルで作業してる場所）に空のmy-typescript-projectというフォルダが作成される
    mkdirは「make directory」の略で、新しいディレクトリ（フォルダ）を作成するためのコマンド。my-typescript-projectは作成されるディレクトリの名前。なので自分の好きなファイル名を指定する。但しスペース はあまり使わず間を空けたいならハイフン-を使う

  • cd my-typescript-project
    現在の作業ディレクトリがmy-typescript-projectに変更される。ディレクトリを移動することで、以降のコマンドがこの新しいディレクトリ内で実行される
    cdは「change directory」の略で、指定したディレクトリに移動するためのコマンド。作成したディレクトリmy-typescript-projectの中に移動する。つまり以降のファイル作成やインストール作業はmy-typescript-project内で行われることになる。

3.npm initでプロジェクトの初期化

npm init -y

プロジェクトに必要な設定ファイルpackage.jsonを迅速かつ簡単に生成し、開発の準備を整えるコード
このステップを省略すると、依存関係やスクリプトの管理が手間になり、プロジェクト運用が非効率になる可能性がある。npm init -yを使ってプロジェクトを初期化する理由は、Node.jsプロジェクトで必要となるpackage.jsonファイルを簡単に作成するため。このファイルには以下のプロジェクトの基本情報が含まれる。また-yというオプションを使う事で1つ1つ行う作業を省略できている。

  • プロジェクト名
  • バージョン番号
  • プロジェクトのエントリポイント（デフォルトはindex.js）
  • ライセンス情報
  • スクリプト（後でカスタマイズ可能）

4.TypeScriptのインストール

npm install typescript --save-dev

TypeScriptをプロジェクトに追加する。--save-devでTypeScriptをインストールすると、そのプロジェクトのnode_modulesにインストールされ、package.jsonのdevDependenciesセクションに記録される。つまりプロジェクト間で異なるTypeScriptのバージョンを使うことが可能になり他の開発者が同じプロジェクトを利用する場合、npm installコマンドを実行すればpackage.jsonに基づいて同じ依存関係がインストールされ依存関係をプロジェクト単位で管理し、安定した開発環境を維持する事が可能になる。なのでプロジェクト毎にインストールする必要がある。

5.ローカルサーバーの導入（必要に応じて）

npm install lite-server --save-dev

lite-serverは本番環境用ではなく開発中にブラウザで確認しやすいようにするツール。ローカルサーバーを追加しindex.htmlを使う際に必要になるもの。index.htmlが不要な場合は飛ばしてOK。本番では別途Webサーバー（例: Apache, Nginx）を使用することが一般的。

index.htmlを使うかの判断基準

必要な場合（フロントエンド）

  • Webブラウザで動作するアプリケーションを開発する時（TypeScriptやJavaScriptを使用）
  • UIを伴うプロジェクト（ユーザーが見る画面有り）
  • 静的ファイルをホスティングする場合

不要な場合（バックエンド）

  • サーバーサイド開発のみ（Node.jsなど）
  • CLIツールやAPIサーバーを作る場合

6.TypeScript設定ファイルの作成

npx tsc --init

インストールが完了したら、TypeScriptの設定ファイルを生成する。これによりtsconfig.jsonという設定ファイルが作成される。tsconfig.jsonは、TypeScriptコンパイラ（tsc）の設定を定義するためのファイル。一度設定を行えば、tscコマンドを使う際に設定を毎回指定する必要がなくなる（例: npx tscとするだけでプロジェクト全体をコンパイル）

mkdir src
New-Item -Path "src\index.ts" -ItemType File

index.tsファイルを作成する。

  • mkdir src
    mkdirは「make directory」の略で、新しいディレクトリ（フォルダ）を作成するためのコマンド。この場合srcという名前のディレクトリを現在の作業ディレクトリ内に作成する。通常src（sourceの略）はプロジェクトのソースコードを格納するために良く使われる名前らしい

  • New-Item -Path "src\index.ts" -ItemType File
    New-Itemは「空のファイルやフォルダを作成する」ためのコマンド。この場合srcディレクトリ内にindex.tsという空のファイルを作成する。結果src/index.tsというファイルが作成される。このファイルはTypeScriptファイル（.ts拡張子）で、プロジェクトのエントリポイント（起点）として使われることが多い。

LinuxやmacOSはこの部分のコマンドが異なる。またコマンド入力しなくてもVS Code内から直接ファイルを作成するのもあり（VS Codeのエクスプローラ（サイドバー）で srcフォルダを右クリック → 「新しいファイル」 → index.tsと入力して作成）

tsconfig.jsonを編集

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

生成されたtsconfig.jsonを必要に応じてカスタマイズする

修正後に「保存」する事！

  • compilerOptions
    TypeScriptコンパイラの動作を制御する設定オプションがここに記述される
  • outDir
    コンパイルされたJavaScriptファイルの出力先を明確に指定する（例: dist/）またoutDirを記載する事により自動的にdist/が作成される
  • rootDir
    ソースコードのルートディレクトリを指定します（例: src/）これで構造が明確になる
  • include
    コンパイル対象とするファイルやディレクトリを指定
  • exclude
    コンパイル対象から除外するファイルやディレクトリを指定（デフォルトでnode_modulesが除外される、なのでこのコードはなくても良い）

index.htmlがある場合、TypeScriptのmoduleオプションはCommonJSよりもESNextまたはESModuleを使用するのが一般的に適している（モダンブラウザでサポートされているESモジュール形式）moduleをESNextまたはESModuleに設定し、HTMLで<script type="module">を使う。互換性が必要な場合（古い環境など）はmoduleをCommonJSに設定するのが良い

主要なcompilerOptions

オプション名 説明
target 出力するJavaScriptのバージョンを指定（例: ES5, ES6, ES2020など）
module 使用するモジュールシステム（例: CommonJS, ESNext, AMDなど）
strict 厳格モードを有効にする（型チェックがより厳しくなる）。デフォルトでtrue。
esModuleInterop ESモジュールの互換性を向上させる（importとrequireの互換性を確保）。
skipLibCheck ライブラリファイル（node_modules内など）の型チェックをスキップしてコンパイル時間を短縮。
forceConsistentCasingInFileNames ファイル名の大文字小文字の一貫性を強制する。

7.index.tsにコードを記述

// 挨拶を生成する関数
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

// コンソールに出力
console.log(greet("World"));

上記はコード例。コンソールに「Hello, World!」と出る（この手順は⑥index.tsファイル作成時に行っても問題ない）

8.TypeScriptのコンパイル

npx tsc

tscコマンドを使用してTypeScriptをJavaScriptにコンパイル。distディレクトリ内にコンパイル済みのindex.jsが生成される

8-5.index.htmlにコードを記述

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Project</title>
</head>
<body>
    <script src="dist/index.js"></script>
</body>
</html>

index.htmlを作成した時はこのコードを記述する。このHTMLコードは、TypeScriptでコンパイルされたJavaScriptファイルdist/index.jsをブラウザで実行するための基本的なHTML構造。これでindex.js内のJavaScriptコードが実行され、必要に応じてHTMLページを動的に操作したり、データを表示したりされる。

下記はコマンドでindex.html作成＆記述

echo '<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Project</title>
</head>
<body>
    <script src="dist/index.js"></script>
</body>
</html>' > index.html

9.ディレクトリ構造を確認（確認のみで実行なしなくて良い）

my-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── index.html
├── tsconfig.json
├── package.json
├── package-lock.json

index.htmlが必要な場合は上記↑、不要な場合は下記↓を参照。エラーなく出来ていた場合このような構成が出来上がっている（順不同）

my-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── package.json
├── tsconfig.json
├── package-lock.json

my-typescript-projectの部分は指定したファイル名
この時dist/ディレクトリガ存在していなかった場合「8.TypeScriptのコンパイル」npx tscがちゃんと実行されているか確認する

  • src/
    TypeScriptファイルを格納するディレクトリ
  • dist/
    コンパイル後のJavaScriptファイルが出力されるディレクトリ

10.スクリプトの実行

ローカルサーバーで実行（index.htmlがある場合）

npx lite-server

フロントエンドの場合こちらを実行。lite-serverを使ってブラウザで確認。自動的にブラウザが開きindex.htmlが表示される。実行時コンソールに「Hello, World!」と表示される。ブラウザがindex.htmlをロードし、そこからdist/index.jsを読み込む仕組み（コンソールのみでブラウザ画面には出ないスクリプトです）

実行する前にnpx tscでコンパイルが成功していることを確認する

JavaScriptファイルを直接実行（index.htmlがない場合）

node dist/index.js

バックエンドの場合こちらを実行。Node.jsを使用してコンパイル済みのJavaScriptファイルを実行する。実行時コンソールに「Hello, World!」と表示される

11.ブラウザで確認（自動で開かなかった場合など）

10のスクリプト実行後自動で開かなかったり上手く表示されなかった場合は以下を試す

①http://localhost:××××をクリックし実行
10のスクリプト実行時ターミナルに表示されたローカルアドレスを直接クリックし確認

②Visual Studio Code の Live Server を使用
ローカル環境でfile://プロトコルを使用してHTMLを開くと、Quirks Modeが発生することがある。その場合Live Server拡張機能を使う事により解決する事もある

1.Visual Studio Code (VS Code) を開く
2."Ritwick Dey" 作成の Live Server を選択し、「インストール」
3.VS Code のエクスプローラーで index.html を右クリック、「Open with Live Server」を選択

③上記でスクリプト変更時に「保存」しているか
スクリプト編集時に「保存」をしていなかった故に反映されていない可能性あり

④エラー確認
対策をしても表示されない場合ブラウザのデベロッパーツール（F12）でエラーを確認する

説明はここまで、より効率の良い方法は存在するので個人でカスタマイズして下さい！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?