MochiuWiki : SUSE, EC, PCB

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

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集
ビジュアルウィキテキスト
細 Wiki がページ「Tauri - 開発環境」を「Tauriの基礎 - 開発環境」に、リダイレクトを残さずに移動しました
 
(同じ利用者による、間の12版が非表示)
19行目: 19行目:
<br>
<br>
webkit2gtk3はWebViewを表示するためのエンジン、opensslは暗号化通信、他のライブラリはアプリケーションの各種機能やアイコン表示に使用される。<br>
webkit2gtk3はWebViewを表示するためのエンジン、opensslは暗号化通信、他のライブラリはアプリケーションの各種機能やアイコン表示に使用される。<br>
# RHEL
## 環境によっては、webkit2gtk4.1-develが必要な場合がある
sudo dnf install epel-release
sudo dnf install curl wget file webkit2gtk4.0-devel openssl-devel libappindicator-gtk3-devel librsvg2-devel
  # SUSE
  # SUSE
  sudo zypper install curl wget file webkit2gtk3-devel openssl-devel libappindicator3-devel librsvg-devel
  sudo zypper install curl wget file webkit2gtk3-devel openssl-devel libappindicator3-devel librsvg-devel
29行目: 34行目:
これを使用すると、異なるプロジェクトで異なるNode.jsのバージョンを簡単に切り替えることができる。<br>
これを使用すると、異なるプロジェクトで異なるNode.jsのバージョンを簡単に切り替えることができる。<br>
<br>
<br>
Node.jsのインストールは、[[インストール - Yarn|インストール - Yarn#NordJS]] のページを参照すること。<br>
Node.jsのインストールは、[[インストール - Node.js]] のページを参照すること。<br>
<br><br>
 
== Rustのインストール ==
Rustのインストールは、[[インストール - Rust|インストール - Rust]] のページを参照すること。<br>
<br><br>
<br><br>


82行目: 91行目:
<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>
96行目: 139行目:
JSXは、JavaScript内でHTMLのような記述ができる構文である。<br>
JSXは、JavaScript内でHTMLのような記述ができる構文である。<br>
<br>
<br>
<syntaxhighlight lang="javascript">
{
  // TypeScriptコンパイラのオプション設定
  // これらの設定により、TypeScriptがどのようにコードをJavaScriptに変換するかが決まる
  "compilerOptions": {
    // コンパイル対象となるJavaScriptのバージョンを指定
    // ES2020は2020年に標準化されたECMAScript仕様で、async/awaitやオプショナルチェイニングなどの機能が使える
    "target": "ES2020",
    // クラスフィールドの定義方法を新しい仕様（defineProperty）を使うように設定
    // これにより、クラスのプロパティがより予測可能な動作をする
    "useDefineForClassFields": true,
    // TypeScriptで使用できるライブラリの型定義を指定
    // ES2020: ES2020の標準ライブラリの型定義
    // DOM: ブラウザのDOM（document、windowなど）の型定義
    // DOM.Iterable: DOMの反復可能なオブジェクト（NodeListなど）の型定義
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    // モジュールシステムの形式を指定
    // ESNextは最新のECMAScriptモジュール仕様を使用することを意味する（import/export構文）
    "module": "ESNext",
    // node_modulesの型チェックをスキップして、ビルド速度を向上させる
    // サードパーティライブラリの型エラーを無視することで、開発効率を上げる
    "skipLibCheck": true,
    /* バンドラーモード関連の設定 */
    // ViteやWebpackなどのモダンなバンドラーツールと連携するための設定
    // モジュールの解決方法を「bundler」に設定
    // これにより、バンドラーが独自のモジュール解決ロジックを使うことを前提とした設定になる
    "moduleResolution": "bundler",
    // .ts拡張子を含むimport文を許可する
    // 通常、TypeScriptは拡張子なしでimportするが、バンドラーモードではこれが許可される
    "allowImportingTsExtensions": true,
    // JSONファイルをモジュールとしてimportできるようにする
    // import data from './data.json' のような書き方が可能になる
    "resolveJsonModule": true,
    // 各ファイルを独立したモジュールとして扱う
    // これにより、各ファイルが他のファイルに依存せずにコンパイルされ、Viteなどのツールと相性が良い
    "isolatedModules": true,
    // JavaScriptファイルを出力しない
    // Viteが独自にトランスパイルとバンドルを行うため、TypeScriptコンパイラはファイルを出力する必要がない
    "noEmit": true,
    // JSX（ReactのHTML風構文）を「react-jsx」形式で変換
    // React 17以降の新しいJSX変換方式を使用し、各ファイルで明示的にReactをimportする必要がなくなる
    "jsx": "react-jsx",
    /* コード品質チェック（Linting）関連の設定 */
    // これらの設定により、より厳格な型チェックと潜在的なバグの検出が行われる
    // strictモードを有効化
    // これにより、すべての厳格な型チェックオプションが一括で有効になる
    // （null安全性、暗黙のany型の禁止、thisの型チェックなど）
    "strict": true,
    // 使用されていないローカル変数がある場合にエラーを出す
    // コードの品質を保ち、不要な変数を削除するのに役立つ
    "noUnusedLocals": true,
    // 使用されていない関数のパラメータがある場合にエラーを出す
    // これにより、不要な引数を持つ関数を発見できる
    "noUnusedParameters": true,
    // switch文でcase句からbreak/returnなしで次のcase句に落ちる（fall through）場合にエラーを出す
    // 意図しないバグを防ぐための安全機能
    "noFallthroughCasesInSwitch": true
  },
  // TypeScriptコンパイラが処理対象とするディレクトリを指定
  // この場合、srcディレクトリ内のすべてのTypeScriptファイルが対象となる
  "include": ["src"],
  // プロジェクト参照を設定
  // tsconfig.node.jsonを参照することで、ビルドツール用の設定とアプリケーション用の設定を分離している
  // これにより、Node.js環境で実行されるコード（vite.config.tsなど）とブラウザで実行されるコードで
  // 異なるコンパイル設定を適用できる
  "references": [{ "path": "./tsconfig.node.json" }]
}
</syntaxhighlight>
<br>
==== tsconfig.node.json : ビルドツール用のTypeScript設定 ====
==== tsconfig.node.json : ビルドツール用のTypeScript設定 ====
ビルドツール (Vite等) の設定ファイルをTypeScriptで記述する時に使用する設定である。<br>
ビルドツール (Vite等) の設定ファイルをTypeScriptで記述する時に使用する設定である。<br>
107行目: 238行目:
このファイルがTypeScriptで記述されているため、それをコンパイルするための設定がtsconfig.node.jsonに記述されている。<br>
このファイルがTypeScriptで記述されているため、それをコンパイルするための設定がtsconfig.node.jsonに記述されている。<br>
<br>
<br>
<syntaxhighlight lang="javascript">
{
  // このファイルは、Node.js環境で実行されるビルドツール用のTypeScript設定ファイルです
  // 具体的には、vite.config.tsなどの設定ファイルをコンパイルする際に使用されます
  "compilerOptions": {
    // compositeモードを有効化
    // これにより、プロジェクト参照（Project References）機能が使えるようになる
    // 大規模なプロジェクトで複数のtsconfig.jsonを連携させる際に必要な設定
    // メインのtsconfig.jsonから、このtsconfig.node.jsonを参照できるようになる
    "composite": true,
    // node_modulesの型チェックをスキップ
    // サードパーティライブラリの型定義ファイルをチェックしないことで、コンパイル速度を向上させる
    // 開発体験の改善に役立つ設定
    "skipLibCheck": true,
    // モジュールシステムの形式を指定
    // ESNextは最新のECMAScriptモジュール仕様（import/export）を使用する
    // Node.jsの最新バージョンではESモジュールがネイティブでサポートされている
    "module": "ESNext",
    // モジュールの解決方法を「bundler」モードに設定
    // Viteのようなモダンなバンドラーツールが使用する独自のモジュール解決ロジックに対応
    // これにより、バンドラーが期待する形式でモジュールが解決される
    "moduleResolution": "bundler",
    // デフォルトエクスポートを持たないモジュールからのデフォルトインポートを許可
    // 例えば、CommonJS形式で書かれたライブラリを、ES6のimport文でインポートできるようになる
    // import React from 'react' のような書き方が可能になる（Reactはデフォルトエクスポートを持たない）
    "allowSyntheticDefaultImports": true
  },
  // このTypeScript設定ファイルが対象とするファイルを指定
  // この設定では、vite.config.tsファイルのみが対象となる
  // つまり、このtsconfig.node.jsonは、Viteの設定ファイルをコンパイルするためだけに使われる
  // アプリケーションのソースコード（srcディレクトリ）は、メインのtsconfig.jsonで処理される
  "include": ["vite.config.ts"]
}
</syntaxhighlight>
<br>
==== vite.config.ts : Viteの設定ファイル ====
==== vite.config.ts : Viteの設定ファイル ====
Viteというビルドツールの設定ファイルである。<br>
Viteというビルドツールの設定ファイルである。<br>
130行目: 303行目:
アプリケーションが起動する直後に実行したい処理がある場合は、このファイルに記述する。<br>
アプリケーションが起動する直後に実行したい処理がある場合は、このファイルに記述する。<br>
<br>
<br>
<syntaxhighlight lang="ts">
// このファイルの役割:
// 1. index.htmlのroot要素を特定する
// 2. その要素をReactアプリケーションのコンテナとして設定する
// 3. Appコンポーネントをレンダリング (描画) する
// 4. 開発時の品質チェック (StrictMode) を有効化する
//
// このファイルはアプリケーション全体のエントリーポイントであり、
// index.htmlから<script>タグで読み込まれることで、Reactアプリケーションが起動する
// Reactライブラリの本体をインポート
// Reactは、UIを構築するためのコアライブラリ
// このインポートにより、JSX構文やReactの基本機能が使えるようになる
import React from "react";
// ReactDOMのクライアントサイド機能をインポート
// ReactDOM/clientは、Reactコンポーネントを実際のHTML DOM要素に変換し、Webブラウザの画面に描画するための機能を提供する
// "react-dom/client"は、React 18以降で導入された新しいAPIで、以前の"react-dom"より高速かつ柔軟なレンダリングが可能になっている
import ReactDOM from "react-dom/client";
// アプリケーションのメインコンポーネント (App) をインポート
// このコンポーネントが、アプリケーション全体の構造と機能を定義している
// "./App"という相対パスは、同じディレクトリ (src) 内のApp.tsxファイルを指す
// .tsxや.jsxの拡張子は、インポート時に省略できる
import App from "./App";
// ReactDOMのcreateRootメソッドを使って、Reactアプリケーションのルート (起点) を作成
// この処理は、Reactアプリケーションを起動するための最も重要なステップ
//
// document.getElementById("root"):
//  - index.html内の<div id="root"></div>要素を取得
//  - この要素が、Reactアプリケーション全体を表示するコンテナとなる
//  - 全てのReactコンポーネントは、最終的にこの要素の中に描画される
//
// as HTMLElement:
//  - TypeScriptの型アサーション (型の明示的な指定)
//  - getElementById()はHTMLElement | nullを返す可能性があるが、
//    ここでは確実にHTMLElementが存在することを開発者が保証している
//  - もし要素が見つからない場合、実行時エラーが発生するので注意が必要
//
// createRoot():
//  - React 18で導入された新しいAPIで、アプリケーションのルートを作成
//  - この関数が返すルートオブジェクトを使って、Reactコンポーネントを描画する
//  - 以前のReactDOM.render()と比べて、並行レンダリングなどの新機能が使える
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  // React.StrictModeコンポーネントでアプリケーション全体を包む
  // StrictModeは、開発時にのみ動作する特殊なコンポーネントで、以下の機能を提供する:
  //
  // 1. 潜在的な問題の検出:
  //    - 非推奨のライフサイクルメソッドの使用を警告
  //    - レガシーなAPI (findDOMNode等) の使用を警告
  //    - 予期しない副作用 (side effects) を検出
  //
  // 2. 2重レンダリング:
  //    - コンポーネントを意図的に2回レンダリングすることで、
  //      副作用の問題を早期に発見できる
  //    - 本番環境では、この2重レンダリングは行われない
  //
  // 3. より良いコードの習慣を促す:
  //    - 将来のReactのバージョンに対応しやすいコードを書くことを推奨
  //
  // StrictModeは画面に何も描画せず、子コンポーネントのチェックのみを行う
  // 開発環境でのみ動作し、本番ビルドでは完全に無効化されるため、パフォーマンスへの影響はない
  <React.StrictMode>
    {/* Appコンポーネントを描画 */}
    {/* このコンポーネントが、アプリケーションの実際の内容を表示する */}
    {/* App.tsxで定義されたすべてのUI要素が、ここから展開される */}
    <App />
  </React.StrictMode>,
);
</syntaxhighlight>
<br>
==== src/App.tsx : メインのReactコンポーネント ====
==== src/App.tsx : メインのReactコンポーネント ====
アプリケーションのメインとなるReactコンポーネントである。<br>
アプリケーションのメインとなるReactコンポーネントである。<br>
142行目: 388行目:
例えば、ヘッダコンポーネント、サイドバーコンポーネント、メインコンテンツコンポーネント等を別々に作成して、Appコンポーネントでそれらを配置する。<br>
例えば、ヘッダコンポーネント、サイドバーコンポーネント、メインコンテンツコンポーネント等を別々に作成して、Appコンポーネントでそれらを配置する。<br>
<br>
<br>
<syntaxhighlight lang="ts">
// Reactのフック (状態管理機能) をインポート
// useStateは、コンポーネント内で動的に変化する値（状態）を管理するための関数
// Reactでは、状態が変化すると自動的にコンポーネントが再描画される仕組みになっている
import { useState } from "react";
// Reactのロゴ画像をインポート
// Viteでは、画像ファイルを通常のモジュールとしてインポートでき、
// インポートされた値は画像のURLになる
import reactLogo from "./assets/react.svg";
// Tauriが提供するinvoke関数をインポート
// invoke関数は、フロントエンド（React）からバックエンド（Rust）の関数を呼び出すための重要な機能
// これにより、JavaScriptでは実現できない高速な処理やシステムレベルの操作をRustで実行できる
import { invoke } from "@tauri-apps/api/core";
// このコンポーネント専用のCSSファイルをインポート
// インポートすることで、スタイルが自動的に適用される
import "./App.css";
// Appコンポーネントの定義
// 関数コンポーネントは、ReactでUIを構築するための基本的な単位
// この関数は、画面に表示される内容（JSX）を返す
function App() {
  // greetMsgという状態変数と、それを更新するための関数setGreetMsgを定義
  // useState("")の引数""は初期値で、最初は空文字列が設定される
  // この状態は、Rustのgreet関数から返されたメッセージを保持する役割を持つ
  const [greetMsg, setGreetMsg] = useState("");
  // nameという状態変数と、それを更新するための関数setNameを定義
  // この状態は、ユーザーが入力フィールドに入力した名前を保持する
  const [name, setName] = useState("");
  // greet関数の定義
  // asyncキーワードにより、この関数は非同期関数となり、awaitが使用できる
  // 非同期処理は、処理が完了するまで待機する必要がある処理（ここではRustの関数呼び出し）に使用される
  async function greet() {
    // Tauriのinvoke関数を使って、Rust側で定義された"greet"コマンドを呼び出す
    // 公式ドキュメント: https://tauri.app/develop/calling-rust/
    // invoke関数の仕組み:
    // 第1引数: 呼び出したいRust関数の名前（文字列）
    // 第2引数: Rust関数に渡す引数をオブジェクト形式で指定
    //          ここでは、{ name }という省略記法を使っている（{ name: name }と同じ意味）
    // awaitキーワードにより、Rust関数の実行が完了するまで待機する
    // Rust関数から返された値は、自動的にJavaScript/TypeScriptの値に変換される
    // 返された値をsetGreetMsg関数に渡すことで、greetMsg状態を更新する
    // 状態が更新されると、Reactは自動的にコンポーネントを再描画し、新しいメッセージが画面に表示される
    setGreetMsg(await invoke("greet", { name }));
  }
  // コンポーネントが返すJSX（JavaScriptに埋め込まれたHTML風の構文）
  // このJSXが実際に画面に描画される内容を定義している
  return (
    // main要素にcontainerクラスを適用
    // このクラスはApp.cssで定義されており、中央揃えのレイアウトを提供する
    <main className="container">
      {/* 見出し（h1タグ） */}
      {/* Tauri + Reactアプリケーションへの歓迎メッセージ */}
      <h1>Welcome to Tauri + React</h1>
      {/* ロゴを横並びで表示するコンテナ */}
      <div className="row">
        {/* Viteのロゴとリンク */}
        {/* target="_blank"で新しいタブで開き、rel属性はセキュリティのために必要 */}
        <a href="https://vite.dev" target="_blank">
          {/* /vite.svgはpublicフォルダ内の画像を参照している */}
          {/* classNameはJSXでのクラス属性の指定方法（HTMLのclassに相当） */}
          {/* "logo vite"のように複数のクラスを空白区切りで指定できる */}
          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
        </a>
        {/* Tauriのロゴとリンク */}
        <a href="https://tauri.app" target="_blank">
          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
        </a>
        {/* Reactのロゴとリンク */}
        <a href="https://react.dev" target="_blank">
          {/* reactLogoは上部でインポートした変数 */}
          {/* JSX内で変数を使う場合は、波括弧{}で囲む必要がある */}
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      {/* 案内メッセージ */}
      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
      {/* フォーム要素 */}
      {/* onSubmitイベントハンドラで、フォーム送信時の動作を定義 */}
      {/* アロー関数 (e) => {...} は、イベントオブジェクトeを受け取る関数 */}
      <form
        className="row"
        onSubmit={(e) => {
          // e.preventDefault()で、フォームのデフォルト動作（ページリロード）を防ぐ
          // これにより、シングルページアプリケーションの挙動を維持できる
          e.preventDefault();
          // greet関数を呼び出して、Rust側の処理を実行
          greet();
        }}
      >
        {/* テキスト入力フィールド */}
        <input
          id="greet-input"
          {/* onChangeイベントハンドラで、入力値が変更されるたびに実行される処理を定義 */}
          {/* e.currentTarget.valueで、入力フィールドの現在の値を取得 */}
          {/* setName関数を呼び出すことで、name状態を更新 */}
          {/* これにより、ユーザーの入力がリアルタイムで状態に反映される */}
          onChange={(e) => setName(e.currentTarget.value)}
          {/* プレースホルダーテキスト（入力フィールドが空のときに表示されるヒント） */}
          placeholder="Enter a name..."
        />
        {/* 送信ボタン */}
        {/* type="submit"により、このボタンをクリックするとフォームのonSubmitイベントが発火する */}
        <button type="submit">Greet</button>
      </form>
      {/* 挨拶メッセージの表示エリア */}
      {/* 波括弧{}内のgreetMsgは、状態変数の現在の値を表示する */}
      {/* greet関数が実行されると、この値が更新され、新しいメッセージが表示される */}
      {/* 最初は空文字列なので何も表示されないが、ボタンをクリックすると */}
      {/* Rust側から返されたメッセージがここに表示される */}
      <p>{greetMsg}</p>
    </main>
  );
}
// Appコンポーネントをエクスポート
// export defaultにより、このコンポーネントが他のファイルからインポート可能になる
// main.tsxファイルで、このコンポーネントがインポートされ、画面に描画される
export default App;
</syntaxhighlight>
<br>
==== src/App.css : Appコンポーネントのスタイル ====
==== src/App.css : Appコンポーネントのスタイル ====
App.tsxコンポーネントの見た目を定義するCSSファイルである。<br>
App.tsxコンポーネントの見た目を定義するCSSファイルである。<br>
161行目: 546行目:
このファイルは、基本的に編集する必要はない。プロジェクト作成時に自動生成され、そのまま使用し続けるものである。<br>
このファイルは、基本的に編集する必要はない。プロジェクト作成時に自動生成され、そのまま使用し続けるものである。<br>
ただし、Vite以外の特殊な型定義を追加する場合は、このファイルを編集することもある。<br>
ただし、Vite以外の特殊な型定義を追加する場合は、このファイルを編集することもある。<br>
<br>
<syntaxhighlight lang="ts">
// このファイルは、TypeScriptの型定義ファイル (declaration file) である
// ファイル名の末尾にある「.d.ts」という拡張子は、「これは型の宣言だけを含むファイルですよ」という意味を持つ
//
// TypeScriptでは、JavaScriptのライブラリやツールを使う際に、それらがどのような型 (関数の引数や戻り値等) を持っているかを知る必要がある
// この型情報を提供するのが型定義ファイルの役割である
// /// <reference types="..." />
// これは「トリプルスラッシュディレクティブ」と呼ばれる特殊なコメントである
// TypeScriptコンパイラに対して、特定の型定義ファイルを参照するよう指示する役割を持つ
//
// この行により、Viteが提供するすべての型定義がプロジェクト全体で利用可能になる
// 具体的には、以下のような機能の型情報が提供される:
//
// 1. 環境変数 (import.meta.env) の型定義
//    - import.meta.env.VITEで始まる環境変数にアクセスする際、TypeScriptがこれらの変数の存在を認識し、適切な補完やエラーチェックを行える
//
// 2. 静的アセット (画像、SVG、CSSなど) のインポートに関する型定義
//    - import logo from './logo.svg' のような記述をした時、TypeScriptが「SVGファイルをインポートしても大丈夫」だと理解できる
//    - 通常、TypeScriptは画像ファイルをモジュールとして認識しないため、この型定義がないとエラーが発生してしまう
//
// 3. Vite独自の機能 (HMR、glob importなど) の型定義
//    - import.meta.hot (ホットモジュールリプレースメント用のAPI)
//    - import.meta.glob (複数ファイルの一括インポート)
//    などの機能を使う際に、正しい型情報が提供される
//
// このファイルは通常、プロジェクト作成時に自動生成され、開発者が手動で編集する必要はほとんどない
// ただし、独自の型定義を追加したい場合には、このファイルに追記することもできる
//
// 例えば、カスタムファイル形式 (.glslや.wasmなど) をインポートしたい場合、このファイルに以下のような型定義を追加することができる:
//
// declare module '*.glsl' {
//  const content: string;
//  export default content;
// }
//
// このように、プロジェクト固有の型定義を一元管理する場所としても機能する
/// <reference types="vite/client" />
</syntaxhighlight>
<br><br>
<br><br>


== IDE ==
== IDE ==
==== IDEA Ultimate ====
==== IDEA Ultimate ====
===== 基本設定 =====
IDEA Ultimateでは、プロジェクトのルートディレクトリを開く。<br>
IDEA Ultimateでは、プロジェクトのルートディレクトリを開く。<br>
<br>
<br>
196行目: 622行目:
任意でTauriプラグインもインストール可能である。<br>
任意でTauriプラグインもインストール可能である。<br>
このプラグインは、Tauriのコマンド定義やコンフィグファイルの編集をサポートする。<br>
このプラグインは、Tauriのコマンド定義やコンフィグファイルの編集をサポートする。<br>
<br>
===== プロジェクト構成 =====
プロジェクトは以下に示す構造である。<br>
* Rustソースコード
*: src-tauri/src
* ビルド出力
*: src-tauri/targe
<br>
===== Rustツールチェーンの設定 =====
# [ファイル] - [設定]を開く。
# [言語 & フレームワーク] - [Rust]を選択する。
# [ツールチェーンの場所]にて、RustおよびCargoのパスを設定する。
#: 設定例 : $USER_HOME$/cargo/bin
<br>
===== 実行 / デバッグ構成の作成 =====
[実行]メニューバー - [構成の編集]を選択する。<br>
<br>
まず、JavaScriptデバッグ構成を作成する。<br>
# [+]アイコン - [JavaScriptデバッグ]を選択する。
# [名前]欄に、任意の名前を入力する。
# [URL]欄に、<code>http://localhost:1420</code> (Tauriのデフォルトポート) を入力する。
# [ブラウザー]欄に、Chromium系ブラウザを選択する。
# [OK]ボタンを押下する。
<br>
次に、npm実行構成 (フロントエンド) を作成する。<br>
# 画面右ペインにある[+]アイコン - [npm]を選択する。
# [名前]欄に、任意の名前を入力する。
# [package.json]欄に、プロジェクトルートの <u>package.json</u> ファイルを選択する。
# [コマンド]プルダウンで、<u>run</u> を選択する。
# [スクリプト]プルダウンで、<u>dev</u> を選択する。
# [OK]ボタンを押下する。
<br>
最後に、複合構成 (フルスタックデバッグ) を作成する。<br>
複合構成を使用すると、フロントエンドとバックエンドを同時にデバッグすることができる。<br>
<br>
* Tauri + React + Rust構成 (フロントエンド + バックエンド構成)
*# 画面左ペインにある[+]アイコン - [複合]を選択する。
*# [名前]欄に、任意の名前を入力する。
*# 画面右ペインにある[+]アイコンを選択して、以下に示す設定を追加する。
*#* Run tauri-app
*#* JavaScript Debug
*#* dev
*# [OK]ボタンを押下する。
*: <br>
* Tauri + React構成 (フロントエンドのみ)
*# 画面左ペインにある[+]アイコン - [複合]を選択する。
*# [名前]欄に、任意の名前を入力する。
*# 画面右ペインにある[+]アイコンを選択して、以下に示す設定を追加する。
*#* JavaScriptデバッグ
*#* dev
*# [OK]ボタンを押下する。
*: <br>
* Tauri + Rust構成 (バックエンドのみ)
*# 画面左ペインにある[+]アイコン - [複合]を選択する。
*# [名前]欄に、任意の名前を入力する。
*# 画面右ペインにある[+]アイコンを選択して、以下に示す設定を追加する。
*#* Run tauri-app
*#* dev
*# [OK]ボタンを押下する。
<br>
===== ログポイント =====
# ブレークポイントを右クリック - [More]を選択する。
# [Breakpoint hit]メッセージをカスタマイズする。
# [Suspend]チェックボックスのチェックを外す場合、停止せずにログだけ出力する。
<br>
===== 監視式 (Watches) =====
# デバッガーツールウィンドウの[Watches]タブを選択する。
# [+]アイコンを押下して、新しい監視式を追加する。
# 任意の式を入力する。
#: 例: <code>vec.len()</code>
# デバッグ時に常に評価結果が表示される。
<br>
===== メモリビュー =====
# デバッグ中に変数を右クリック - [View Memory]を選択する。
# バイナリデータを確認することができる。
<br>
<br>
==== RustRover ====
==== RustRover ====
「http://mochiuwiki.e2.valueserver.jp/index.php?title=Tauriの基礎_-_開発環境」から取得