📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 82行目: | 82行目: | ||
<u>これが、シングルページアプリケーション (SPA) と呼ばれる仕組みの基本である。</u><br> | <u>これが、シングルページアプリケーション (SPA) と呼ばれる仕組みの基本である。</u><br> | ||
<br> | <br> | ||
<syntaxhighlight lang="html"> | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<!-- 文字エンコーディングをUTF-8に設定 (日本語等の多言語文字を正しく表示するために必要) --> | |||
<meta charset="UTF-8" /> | |||
<!-- ファビコン (ブラウザのタブに表示される小さなアイコン) の設定 --> | |||
<!-- この場合はViteのロゴをSVG形式で使用している --> | |||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |||
<!-- レスポンシブデザインのための設定 --> | |||
<!-- width=device-widthでデバイスの画面幅に合わせ、initial-scale=1.0で初期ズーム倍率を1倍に設定 --> | |||
<!-- これにより、モバイルデバイスでも適切に表示される --> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |||
<!-- ブラウザのタブやウィンドウのタイトルバーに表示されるタイトル --> | |||
<title>Tauri + React + Typescript</title> | |||
</head> | |||
<body> | |||
<!-- Reactアプリケーション全体が描画される起点となる要素 --> | |||
<!-- このdiv要素の中に、main.tsxで起動されたReactコンポーネントが挿入される --> | |||
<!-- id="root"という識別子により、JavaScriptからこの要素を特定できる --> | |||
<div id="root"></div> | |||
<!-- Reactアプリケーションのエントリーポイント (起動スクリプト) を読み込む --> | |||
<!-- type="module"により、ES6モジュール形式として扱われ、importやexportが使える --> | |||
<!-- main.tsxが実行されることで、Reactアプリケーションが初期化され、上記のroot要素に描画される --> | |||
<script type="module" src="/src/main.tsx"></script> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
<br> | |||
==== tsconfig.json : TypeScriptのメイン設定 ==== | ==== tsconfig.json : TypeScriptのメイン設定 ==== | ||
TypeScriptコンパイラに対して、「どのようにTypeScriptコードをJavaScriptコードに変換すればよいか」を指示する設定ファイルである。<br> | TypeScriptコンパイラに対して、「どのようにTypeScriptコードをJavaScriptコードに変換すればよいか」を指示する設定ファイルである。<br> | ||