#018　TypeScript（5）：ハローの表示

2024年7月7日 09:42

ハローを表示してみる

環境構築が出来たので、フォルダ：srcの中にファイル：app.tsを作成する。

🗒️app.tsの内容

const message = 'Hello, TypeScript!';

// コンソールには単にメッセージの内容が出力される
console.log(message);   // Hello, TypeScript!

// コンソールにはオブジェクトの形式で出力される
console.log({ message }); // { message: 'Hello, TypeScript!' }

// ◆なぜオブジェクト形式を使うのか？
// 明確な表示：
//      オブジェクト形式にすると、変数名とその値が
//      ペアで表示されるため、デバッグ時にどの変数の値が
//      出力されているのかが一目でわかります。
// 複数の変数を一度に表示：
//      複数の変数をまとめて表示する際に便利です。

🏃コマンド実行

npm run build

動作：TypeScriptファイルを一度だけJavaScriptにコンパイルします。
使用シーン：プロジェクトの最終的なビルドを作成する時や、変更をまとめてコンパイルしたい時に使います。
例え：料理で言えば、全ての材料を一気に調理して完成品を作るようなものです。

使い方

ターミナルでnpm run buildと入力します。
コマンドが実行され、TypeScriptファイルがJavaScriptにコンパイルされます。
処理が終わると、ターミナルに戻ります。

distフォルダの内容説明

各ファイルについて詳しく見ていきましょう：

app.js
- これは、TypeScriptコードがコンパイルされて生成されたJavaScriptファイルです。
- ブラウザやNode.jsで直接実行できるコードが含まれています。
- 元のTypeScriptファイル（src/app.ts）から変換されたものです。
app.js.map
- これは「ソースマップ」ファイルと呼ばれるものです。
- 主な目的は、コンパイルされたJavaScriptコード（app.js）と元のTypeScriptコードを関連付けることです。
- デバッグ時に非常に役立ちます。ブラウザの開発者ツールで、JavaScriptコードではなく元のTypeScriptコードを見ながらデバッグできるようになります。

distフォルダの役割

配布用（Distribution）のファイルを格納するフォルダです。
ここに含まれるファイルは、TypeScriptコンパイラによって生成されたものです。
Webサーバーにアップロードしたり、アプリケーションを実行したりする際に使用するファイルが含まれています。

初心者の方にとっては、以下のように考えるとわかりやすいかもしれません

app.jsは、TypeScript（料理のレシピ）から作られた実際の料理（JavaScript）です。これを人々（ブラウザ）に提供します。
app.js.mapは、その料理がどのようにして作られたかを示す詳細な記録です。料理（コード）に問題があった場合、元のレシピ（TypeScriptコード）のどの部分に問題があったかを特定するのに役立ちます。

jsを読み込むファイルを作成

フォルダ：distにファイル：index.htmlを作成

index.htmlの内容

app.jsを読み込んでいるだけ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>タイプスクリプト</h1>
    <script src="./app.js"></script>
</body>
</html>

VSC拡張機能のLive Serverで起動

index.htmlを選択して、画面右下のGO Liveをクリック

ブラウザの開発者ツールで確認

画面右クリック　＞　検証　で　開発者ツール起動

npm run watch で作業効率化

これで、ファイル：app.ts に対して修正が発生したら、自動的にコンパイルされ、distフォルダにビルドされる

この設定部分の説明は

package.jsonファイルの"scripts"セクションに記述

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

この記事が気に入ったらサポートをしてみませんか？