「Tauriの基礎 - 開発環境」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=Tauriの基礎 - 開発環境です。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

新しい編集 →

ビジュアルウィキテキスト

@@ 69行目: / 69行目: @@
 srcディレクトリにはReactのフロントエンドコード、src-tauriディレクトリにはRustのバックエンドコードが配置される。<br>
 <br>
+==== index.html : アプリケーションの入口 ====
+index.htmlは、Tauriアプリケーション全体の入り口となるHTMLファイルである。<br>
+通常のWebサイトと同様、TauriのWebViewが最初に読み込むページとなる。<br>
+<br>
+<code>head</code> タグの中には基本的なメタ情報、<code>body</code> タグの中には <code>div</code> タグが1つだけあり、そこにid="root"のような属性が付いている。<br>
+この <code>div</code> タグが、Reactアプリケーション全体が描画される場所になる。<br>
+<br>
+ファイルの最後には <code>script</code> タグがあり、JavaScriptファイル (通常は、src/main.tsxやsrc/main.jsx) を読み込んでいる。<br>
+<br>
+<u>※重要</u><br>
+<u>画面の内容は、全てReactが動的に生成して、このrootのdiv要素の中に挿入していく。</u><br>
+<u>これが、シングルページアプリケーション (SPA) と呼ばれる仕組みの基本である。</u><br>
+<br>
+==== tsconfig.json : TypeScriptのメイン設定 ====
+TypeScriptコンパイラに対して、「どのようにTypeScriptコードをJavaScriptコードに変換すればよいか」を指示する設定ファイルである。<br>
+<br>
+TypeScriptは、JavaScriptに型の概念を追加した言語で、開発時にはTypeScriptで記述するが、動作させる時にはJavaScriptに変換する必要がある。<br>
+この変換ルールがtsconfig.jsonに記述されている。<br>
+<br>
+例えば、以下に示すような設定が含まれている。<br>
+* どのバージョンのJavaScriptに変換するか
+* どのディレクトリのファイルをコンパイル対象にするか
+* strictモード (厳格な型チェック) を有効にするか
+<br>
+Reactを使用する場合は、JSXという特殊な構文をどう扱うかという設定も重要である。<br>
+JSXは、JavaScript内でHTMLのような記述ができる構文である。<br>
+<br>
+==== tsconfig.node.json : ビルドツール用のTypeScript設定 ====
+ビルドツール (Vite等) の設定ファイルをTypeScriptで記述する時に使用する設定である。<br>
+<br>
+tsconfig.json および tsconfig.node.json が2つに分割されている理由として、実行環境が違うからである。<br>
+<br>
+tsconfig.jsonはWebViewで動作するための設定、tsconfig.node.jsonはNode.js環境で動作する (ビルドやバンドルの処理を行うツール) ための設定である。<br>
+WebView環境 と Node.js環境 では、使用できる機能や推奨される設定が異なるため、設定を分離して管理した方が効率的である。<br>
+<br>
+例えば、vite.config.ts ファイルはNode.js環境で実行される設定ファイルである。<br>
+このファイルがTypeScriptで記述されているため、それをコンパイルするための設定がtsconfig.node.jsonに記述されている。<br>
+<br>
+==== vite.config.ts : Viteの設定ファイル ====
+Viteというビルドツールの設定ファイルである。<br>
+Viteは、フロントエンド開発で人気のある開発サーバとビルドツールである。<br>
+<br>
+このファイルには、以下に示す設定が記述されている。<br>
+* 開発サーバをどのポートで起動するか
+* どのプラグインを使うか
+* ビルド時にどのような最適化を行うか
+<br>
+Tauri + Reactのプロジェクトでは、Reactを使用するためのプラグインやTauriとViteを連携させるための設定が含まれている。<br>
+<br>
+Viteでは、開発中にソースコードを変更すると瞬時にアプリケーションに反映される <u>ホットモジュールリプレースメント (HMR)</u> という機能でがある。<br>
+これにより、ソースコードを変更するたびに変更した部分だけがリロードされるため、開発効率が大幅に向上する。<br>
+<br>
+==== src/main.tsx : Reactアプリケーションの起動コード ====
+Reactアプリケーションを実際に起動させるソースコードを記述する。<br>
+<br>
+ReactDOMライブラリを使用して、Appコンポーネントをindex.htmlのroot要素にマウント (描画) している。<br>
+このファイルが実行されることにより、Reactアプリケーションが動作する。<br>
+<br>
+また、このファイルでは、アプリケーション全体に影響する初期設定やグローバルなスタイルシートのインポートも行われることがある。<br>
+アプリケーションが起動する直後に実行したい処理がある場合は、このファイルに記述する。<br>
+<br>
+==== src/App.tsx : メインのReactコンポーネント ====
+アプリケーションのメインとなるReactコンポーネントである。<br>
+コンポーネントはReactにおける部品のようなもので、画面の一部分や機能をまとめたものである。<br>
+<br>
+Appコンポーネントは、最上位のコンポーネントであり、アプリケーション全体の構造を定義する。<br>
+<br>
+このファイルでは、function App() のような関数定義があり、その中でJSXを使用して画面の構造が記述されている。<br>
+初期状態では、Tauriのロゴや簡単なカウンタのボタン等が含まれている。(動作確認のためのサンプルコード)<br>
+<br>
+実際の開発では、App.tsxファイルに全てを記述するのではなく、機能ごとに複数のコンポーネントを作成して、それらをApp.tsxで組み合わせる。<br>
+例えば、ヘッダコンポーネント、サイドバーコンポーネント、メインコンテンツコンポーネント等を別々に作成して、Appコンポーネントでそれらを配置する。<br>
+<br>
+==== src/App.css : Appコンポーネントのスタイル ====
+App.tsxコンポーネントの見た目を定義するCSSファイルである。<br>
+<br>
+App.tsxファイルでは、App.cssをインポートしている。<br>
+<br>
+Reactでは、コンポーネントごとにスタイルシートを分離して管理することが一般的である。<br>
+<u>"このスタイルはどのコンポーネントで使われているのか"</u> が明確になり、保守性が上がる。<br>
+<br>
+また、TailwindCSSのようなCSSフレームワークを使用する場合は、このファイルの役割が変わることもある。<br>
+<br>
+==== src/vite-env.d.ts : Viteの型定義ファイル ====
+TypeScriptの型定義ファイルである。<br>
+ファイル名の末尾にある「.d.ts」というのは、declaration type scriptの略で、<u>型の宣言のみを記述するファイル</u> という意味である。<br>
+<br>
+Viteが提供する型定義を参照する指示が記述されている。<br>
+これにより、Vite特有の機能、環境変数の読み込み、モジュールのインポート等に使用する時に、TypeScriptのエディタ上で補完および型チェックができる。<br>
+<br>
+このファイルは、基本的に編集する必要はない。プロジェクト作成時に自動生成され、そのまま使用し続けるものである。<br>
+ただし、Vite以外の特殊な型定義を追加する場合は、このファイルを編集することもある。<br>
 <br><br>