![TypeScriptでWeb画面を表示させてみた](https://www.popoblog.tech/wp-content/uploads/2023/09/88c3f5d12c926c6cb871703ef9713606.jpg)
こんにちわ!Popoです。
この記事を読むと「TypeScriptでWeb画面を表示させたい」が解決できます。
前回、TypeScriptの環境構築を行いました。
![](https://www.popoblog.tech/wp-content/uploads/2023/08/windows-typescript-0001-01.jpg)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
環境は構築できたんだけど!
TypeScriptのアプリケーションてどうやって作ればいいんだろう?
TypeScriptでアプリケーションを作成する場合、何からはじめればよいかわからないですよね!
まずはDosコマンド画面に文字列を表示させる、簡単な処理で文字列を表示させてみたいと思います。😊
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFMyU4MiU5MiVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MiU5MiVFMyU4MSU5NyVFMyU4MSVBNiVFOCVBOSVBNiVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MiU4OCVFMyU4MSU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9Zjc4ODk1M2QxZGZjM2EwYzc1NDYyOTcwYTEwY2I0OGI&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaGltYWppcmkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFmMzQ0ZTU5YzBmMjEzNTMzNWFmZDViYjg4NjM3NDFj&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g44Ko44Or44OQ44O844Kv44Kw44Or44O844OX&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=8a1b2ded34e0e88352e813a03893b6ba)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFMyU4MiU5MiVFNyU5MiVCMCVFNSVBMiU4MyVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MiU5MiVFMyU4MSU5NyVFMyU4MSVBNiVFOCVBOSVBNiVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MiU4OCVFMyU4MSU4NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9Zjc4ODk1M2QxZGZjM2EwYzc1NDYyOTcwYTEwY2I0OGI&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzaGltYWppcmkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFmMzQ0ZTU5YzBmMjEzNTMzNWFmZDViYjg4NjM3NDFj&blend-x=142&blend-y=436&blend-mode=normal&txt64=aW4g44Ko44Or44OQ44O844Kv44Kw44Or44O844OX&txt-width=770&txt-clip=end%2Cellipsis&txt-color=%23212121&txt-font=Hiragino%20Sans%20W6&txt-size=36&txt-x=156&txt-y=536&s=8a1b2ded34e0e88352e813a03893b6ba)
TypeScriptの動作環境
![](https://www.popoblog.tech/wp-content/uploads/2023/09/44f69bd3081f6b02460e4384c72df574.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/44f69bd3081f6b02460e4384c72df574.png)
前回の記事と同様になりますが、下記がTypeScriptの環境になります。
項目 | バージョン |
Node | v18.17.0 |
TypeScript | Version 5.1.6 |
OS | Windows 11 |
VSCode | version1.81.0 |
簡単な文字表示を表示してみよう!
![](https://www.popoblog.tech/wp-content/uploads/2023/09/3655d80924cfdf8cf66d2d2f39182c07.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/3655d80924cfdf8cf66d2d2f39182c07.png)
ロジック作成の前にProjectを作成しましょう。ビルド環境ですね!
package.json を生成
コマンドプロンプト画面を表示します。
フォルダを作成して、そのフォルダに遷移します。
![CDコマンド](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-01-2.jpg)
![CDコマンド](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-01-2.jpg)
npm init -y
上記コマンドを実行してpackage.jsonを生成します。
![npm init -y](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-02.jpg)
![npm init -y](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-02.jpg)
「-y」は入力を省略させるオプションです。下記のように初期値が設定されています。
![package.json](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-03.jpg)
![package.json](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-03.jpg)
![package.json を生成14](https://www.popoblog.tech/wp-content/uploads/2023/08/20230809-12.jpg)
![package.json を生成14](https://www.popoblog.tech/wp-content/uploads/2023/08/20230809-12.jpg)
作成ができました。
TypeScript のパッケージをインストール
「package.json」の準備ができたら、TypeScript のパッケージをインストールします。
![TypeScript のパッケージをインストール](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-04.jpg)
![TypeScript のパッケージをインストール](https://www.popoblog.tech/wp-content/uploads/2023/09/20230910-04.jpg)
npm install –save-dev typescript
上記コマンドを実行します。
![TypeScript のパッケージをインストー2](https://www.popoblog.tech/wp-content/uploads/2023/08/20230809-14.jpg)
![TypeScript のパッケージをインストー2](https://www.popoblog.tech/wp-content/uploads/2023/08/20230809-14.jpg)
「node_modules」フォルダが作成されます。
「package.json」の中身を確認してみると、devDependenciesフィールドにTypeScriptがバージョン情報と共に追加されている事が確認できます。
![「package.json」の中身](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-05.jpg)
![「package.json」の中身](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-05.jpg)
ロジック記述
準備ができたところで簡単なプログラムを作成してみましょう。
初めにTypeScriptのファイルを作成します。
赤枠のボタンをクリックしてtsファイルを作成します。(ファイル名と拡張子を「ts」にするだけです。)
![tsファイルを作成](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-06.jpg)
![tsファイルを作成](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-06.jpg)
「Popo」を表示させるだけのロジックを作成してみます。
![ロジック記述2](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-07.jpg)
![ロジック記述2](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-07.jpg)
「Ctrl+S」で保存します。
コンパイル
早速コンパイルしてみましょう
VSCodeからターミナルを表示します。
メニューからも表示できますし、「Ctrl+@」でも表示できます。
![ターミナル](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-08.jpg)
![ターミナル](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-08.jpg)
下記コマンドを入力して、Enterキー押下で実行できます。
npx tsc test.ts
![コンパイル](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-09.jpg)
![コンパイル](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-09.jpg)
「test.ts」が作成されました。
![](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-10.jpg)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-10.jpg)
実行
「test.js」を実行してみます。(Javascriptを実行します。)
node test.js
![](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-11.jpg)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-11.jpg)
「Popo」が表示されました。
web画面で文字を表示してみよう!
![](https://www.popoblog.tech/wp-content/uploads/2023/09/aab5fc664aa083a17bcaf6b0d45408ae.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/aab5fc664aa083a17bcaf6b0d45408ae.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/business_man_question.png)
Web画面では文字列を表示できないの?
そういった疑問が出てくると思います。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
できますよ!早速やってみましょう!
HTML作成
htmlファイルを作成します。「test.html」とします。
![HTML作成1](https://www.popoblog.tech/wp-content/uploads/2023/08/20230810-04.jpg)
![HTML作成1](https://www.popoblog.tech/wp-content/uploads/2023/08/20230810-04.jpg)
中身はこんな感じです。
htmlでJavaScriptを呼び出しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="test1"></div>
</body>
<!-- コンパイルされた JavaScript を読み込む -->
<script src="test.js"></script>
</html>
tsファイル作成
ロジックを変更します。
var screenMsg:string = "Popo";
window.onload = () => {
const target = document.getElementById("test1") as HTMLInputElement;
target.innerText = screenMsg;
}
コンパイル
サクッとコンパイル
![](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-12.jpg)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/2023010-12.jpg)
画面表示
画面を表示させてみましょう!
![画面表示](https://www.popoblog.tech/wp-content/uploads/2023/08/20230812-03.jpg)
![画面表示](https://www.popoblog.tech/wp-content/uploads/2023/08/20230812-03.jpg)
表示できると楽しくなってきますね!
まとめ
![](https://www.popoblog.tech/wp-content/uploads/2023/09/a22a7f0acfa93505b3801e1461887d6f.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/09/a22a7f0acfa93505b3801e1461887d6f.png)
できる方であれば、「こんな簡単なロジック!」と思われるとおもいますが、初心者からするとめちゃくちゃ勉強になります。
VSCodeの操作も勉強になりますね😆
それから、Swiftと比較して感じていることは!
Swiftと違って、TypeScript単体では画面表示できない!
TypeScriptとhtmlさらにcssとファイルを分けて作成しなければいけません。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
あら!めんどう!
面倒くさがり屋の私の第一声でした。
でも、新しい事を始めることはワクワクしてきますね。どんどん勉強を進めていきたいと思っています。
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
![](https://www.popoblog.tech/wp-content/uploads/2023/05/cropped-79073d2d475c1194e5648b33dfb42d39.png)
それではまた!