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

(同じ利用者による、間の6版が非表示)

19行目:

webkit2gtk3はWebViewを表示するためのエンジン、opensslは暗号化通信、他のライブラリはアプリケーションの各種機能やアイコン表示に使用される。

# 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

sudo zypper install curl wget file webkit2gtk3-devel openssl-devel libappindicator3-devel librsvg-devel

29行目:

34行目:

これを使用すると、異なるプロジェクトで異なるNode.jsのバージョンを簡単に切り替えることができる。

Node.jsのインストールは、[[インストール - ~~Yarn~~|インストール - ~~Yarn#NordJS~~]] のページを参照すること。

Node.jsのインストールは、[[インストール - Node.js]] のページを参照すること。

== Rustのインストール ==

Rustのインストールは、[[インストール - Rust|インストール - Rust]] のページを参照すること。

130行目:

139行目:

JSXは、JavaScript内でHTMLのような記述ができる構文である。

{

// TypeScriptコンパイラのオプション設定

229行目:

238行目:

このファイルがTypeScriptで記述されているため、それをコンパイルするための設定がtsconfig.node.jsonに記述されている。

{

// このファイルは、Node.js環境で実行されるビルドツール用のTypeScript設定ファイルです

581行目:

590行目:

== IDE ==

==== IDEA Ultimate ====

===== 基本設定 =====

IDEA Ultimateでは、プロジェクトのルートディレクトリを開く。

612行目:

622行目:

任意でTauriプラグインもインストール可能である。

このプラグインは、Tauriのコマンド定義やコンフィグファイルの編集をサポートする。

===== プロジェクト構成 =====

プロジェクトは以下に示す構造である。

* Rustソースコード

*: src-tauri/src

* ビルド出力

*: src-tauri/targe

===== Rustツールチェーンの設定 =====

# [ファイル] - [設定]を開く。

# [言語 & フレームワーク] - [Rust]を選択する。

# [ツールチェーンの場所]にて、RustおよびCargoのパスを設定する。

#: 設定例 : $USER_HOME$/cargo/bin

===== 実行 / デバッグ構成の作成 =====

[実行]メニューバー - [構成の編集]を選択する。

まず、JavaScriptデバッグ構成を作成する。

# [+]アイコン - [JavaScriptデバッグ]を選択する。

# [名前]欄に、任意の名前を入力する。

# [URL]欄に、<code>http://localhost:1420</code> (Tauriのデフォルトポート) を入力する。

# [ブラウザー]欄に、Chromium系ブラウザを選択する。

# [OK]ボタンを押下する。

次に、npm実行構成 (フロントエンド) を作成する。

# 画面右ペインにある[+]アイコン - [npm]を選択する。

# [名前]欄に、任意の名前を入力する。

# [package.json]欄に、プロジェクトルートの package.json ファイルを選択する。

# [コマンド]プルダウンで、run を選択する。

# [スクリプト]プルダウンで、dev を選択する。

# [OK]ボタンを押下する。

最後に、複合構成 (フルスタックデバッグ) を作成する。

複合構成を使用すると、フロントエンドとバックエンドを同時にデバッグすることができる。

* Tauri + React + Rust構成 (フロントエンド + バックエンド構成)

*# 画面左ペインにある[+]アイコン - [複合]を選択する。

*# [名前]欄に、任意の名前を入力する。

*# 画面右ペインにある[+]アイコンを選択して、以下に示す設定を追加する。

*#* Run tauri-app

*#* JavaScript Debug

*#* dev

*# [OK]ボタンを押下する。

*:

* Tauri + React構成 (フロントエンドのみ)

*# 画面左ペインにある[+]アイコン - [複合]を選択する。

*# [名前]欄に、任意の名前を入力する。

*# 画面右ペインにある[+]アイコンを選択して、以下に示す設定を追加する。

*#* JavaScriptデバッグ

*#* dev

*# [OK]ボタンを押下する。

*:

* Tauri + Rust構成 (バックエンドのみ)

*# 画面左ペインにある[+]アイコン - [複合]を選択する。

*# [名前]欄に、任意の名前を入力する。

*# 画面右ペインにある[+]アイコンを選択して、以下に示す設定を追加する。

*#* Run tauri-app

*#* dev

*# [OK]ボタンを押下する。

===== ログポイント =====

# ブレークポイントを右クリック - [More]を選択する。

# [Breakpoint hit]メッセージをカスタマイズする。

# [Suspend]チェックボックスのチェックを外す場合、停止せずにログだけ出力する。

===== 監視式 (Watches) =====

# デバッガーツールウィンドウの[Watches]タブを選択する。

# [+]アイコンを押下して、新しい監視式を追加する。

# 任意の式を入力する。

#: 例: <code>vec.len()</code>

# デバッグ時に常に評価結果が表示される。

===== メモリビュー =====

# デバッグ中に変数を右クリック - [View Memory]を選択する。

# バイナリデータを確認することができる。

==== RustRover ====

@@ 19行目: / 19行目: @@
 <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
   sudo zypper install curl wget file webkit2gtk3-devel openssl-devel libappindicator3-devel librsvg-devel
@@ 29行目: / 34行目: @@
 これを使用すると、異なるプロジェクトで異なるNode.jsのバージョンを簡単に切り替えることができる。<br>
 <br>
-Node.jsのインストールは、[[インストール - Yarn|インストール - Yarn#NordJS]] のページを参照すること。<br>
+Node.jsのインストールは、[[インストール - Node.js]] のページを参照すること。<br>
+<br><br>
+== Rustのインストール ==
+Rustのインストールは、[[インストール - Rust|インストール - Rust]] のページを参照すること。<br>
 <br><br>
@@ 130行目: / 139行目: @@
 JSXは、JavaScript内でHTMLのような記述ができる構文である。<br>
 <br>
-  <syntaxhighlight lang="json">
+  <syntaxhighlight lang="javascript">
   {
     // TypeScriptコンパイラのオプション設定
@@ 229行目: / 238行目: @@
 このファイルがTypeScriptで記述されているため、それをコンパイルするための設定がtsconfig.node.jsonに記述されている。<br>
 <br>
-  <syntaxhighlight lang="json">
+  <syntaxhighlight lang="javascript">
   {
     // このファイルは、Node.js環境で実行されるビルドツール用のTypeScript設定ファイルです
@@ 581行目: / 590行目: @@
 == IDE ==
 ==== IDEA Ultimate ====
+===== 基本設定 =====
 IDEA Ultimateでは、プロジェクトのルートディレクトリを開く。<br>
 <br>
@@ 612行目: / 622行目: @@
 任意で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>
 ==== RustRover ====