【人生ログ開発 #1】初心者が、Tauri v2 + Reactでデスクトップアプリ開発の第一歩を踏み出してみた

はじめに

現在、私は自分の人生のログ（過去の経験、経験どうしのつながり、現在から見た過去の経験の解釈など）を可視化・管理するためのツールを自作するという、少し壮大なプロジェクトをスタートさせました。

プログラミングに関してはまだまだ勉強中の身ではありますが、「自分の欲しいものは自分の手で作り上げたい」という思いで挑戦しています。

このプロジェクトの基盤として軽くて高速な Tauri + React を選んだのですが、最初の環境構築からして壁だらけでした……。今回はその第一歩として、まずは最小構成で "Hello World" を表示させるまでの軌跡を、同じ道を通る方への備忘録を兼ねてまとめたいと思います。

0. 必要なもの

• PCの管理者権限
• ファイルエディタ（Visual Studio Code, Notepad++, etc.）
• インターネット接続環境

1. 開発環境の準備

今回は以下の環境で開発を行いました。

• OS: Windows 11 Home 25H2
• Node.js : v24.15.0
• npm : 11.12.1

Tauri Quick Start 事前準備によると、Windows環境でのDesktop Tauriアプリ開発には以下の事前準備が必要とのことです。

1. OS別依存関係のインストール
2. Rustのインストール

順番に行っていきます。

OS別依存関係のインストール

Tauri は Microsoft の C++ Build Tools と Microsoft Edge WebView2 を使用します。Windows での開発には、このふたつが両方とも必要になります。 (Tauri Quick Start 事前準備より)

早速、インストールを行ってきます。

Microsoft C++ Build Tools

1. Microsoft C++ Build ToolsからBuild Toolsのダウンロードを行います。
   
2. 「ダウンロード」フォルダに"vs_BuildTools.exe"がダウンロードされたので、実行します（実行にはPC管理者権限が必要です）。
3. 「続行」を選択（Visual Studio Installerのダウンロードとインストールが始まります）。
   
4. 「C++によるデスクトップ開発」を選択して、インストール。
   
5. 完了
   

WebView2

Windows 10（バージョン 1803）以降の Windows では、WebView 2 が既にインストール済みです。開発に使用するシステムの Windows バージョンがこれに該当すれば、このステップを飛ばして、直接 Rust をインストール に進んでください。(Tauri Quick Start 事前準備より)

スキップしました。

Rustのインストール

PowerShell で以下のようにコマンドを入力することで、winget を使用して rustup をインストールすることもできます：

winget install --id Rustlang.Rustup

ということで、上記コマンドをPowerShell上で実行しました。

1. PowerShellwinget install --id Rustlang.Rustupで実行。
2. Yと返答。
   
3. 完了
   
4. 再度PowerShellを開けてrustup default stable-msvcで確認。
   

rustup default stable-msvcは、PowerShellをいったん閉じて、再度開いてから実行しなければエラーを起こす可能性があります。

Node.js

Node.jsのインストールを行います。調べてみるとたくさんバージョンがあるらしい...

そこでNode.jsのリリースサイトを見てみると、v24がLTSとしてリリースされたもっとも新しいバージョンであることがわかります。

そこで、v24のインストールを行いました。

ここでは、node.jsのインストールやアップふれーど方法は割愛します。

• Node.jsのインストール方法
  • https://nodejs.org/ja/download
  • https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b

これにて、事前準備は完成です。

今回はモバイルアプリの作成予定がないため、Tauri Quick Start 事前準備の「モバイル関連の設定」はスキップしました。

2. プロジェクトの作成

Tauri が非常に柔軟である理由の１つは、事実上どのようなフロントエンド技術（フレームワーク）とも連携できることです。新しい Tauri プロジェクトを作成するための一助として、公式に維持管理されている「ユーティリティ create-tauri-app」があり、各フロントエンド技術用テンプレートがいくつか用意されています 。(Tauri Quick Start プロジェクトの作成より)

create-tauri-app を使って、プロジェクトを生成します。

1. "tauri_onramp"というフォルダーを用意しました。その場所で、PowerShellを開きます。
   
2. PowerShellでirm https://create.tauri.app/ps | iexを実行。
3. Project情報を以下のように記載。
   • Project name : tauri_onramp
   • Identifier : com.tauri_onramp.app
   • Choose which language to use for your frontend : TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun)
   • Choose your package manager : npm
   • Choose your UI template : React - (https://react.dev/)
   • Choose your UI flavor : JavaScript
     
4. 完了。
   

指示に従い、以下のコマンドをPowerShellで実行するとDesktopを見ることができました。

cd tauri_onramp
npm install
npm run tauri dev

npm installを実行すると以下のようなエラーが出ました。

npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.psl を読み込むことができません。

PowerShellでスクリプトの実行が制限されているため、npm等のコマンドを通すために許可が必要なようです。そこで、以下の方法で解決しました。

1. PowerShellをいったん閉じる。
2. PowerSHellを管理者権限で開きなおす。
3. PowerShellで以下のコマンドを実行する。

> Get-ExecutionPolicy
Restricted
> Set-ExecutionPolicy RemoteSigned
> Get-ExecutionPolicy
RemoteSigned

以下の記事に同じ問題がyarnで生じた事例が紹介されております。こちらを見て解決することができました。

npm run tauri devを実行中に以下のようなエラーに遭遇しました。

アプリケーション制御ポリシーによってこのファイルがブロックされました。(os error 4551)

これは、Windowsのスマートアプリコントロールを「オフ」にすることで解決しました。また、私の環境では他のセキュリティアプリもnpm run tauri devの実行を止めていたため、アプリのアンインストールを行いました。開発者モードの有効化やアンチウイルスソフトの除外設定などで対策をすることができれば、より簡単かつ安全に解決できたと思います。

以下の記事を見て、エラー内容とWindowsのスマートアプリコントロールのつながりに気づかされました。感謝です。

3. プログラムの修正 (Hello World)

デフォルトですでにHello Worldよりもはるかに洗練された画面が表示されてますが、今回はシンプルに App.jsx を書き換えて "Hello World" を表示させましょう。

src/App.jsx を開き、中身を以下のように書き換えます。

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");

  async function greet() {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    setGreetMsg(await invoke("greet", { name }));
  }

  return (
    <main className="container">
-     <h1>Welcome to Tauri + React</h1>
+     <h1>Hello World</h1>
+     <p>Life Log Project: Initializing...</p>
-
-      <div className="row">
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
-        </a>
-        <a href="https://tauri.app" target="_blank">
-          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
-
-      <form
-        className="row"
-        onSubmit={(e) => {
-          e.preventDefault();
-          greet();
-        }}
-      >
-        <input
-          id="greet-input"
-          onChange={(e) => setName(e.currentTarget.value)}
-          placeholder="Enter a name..."
-        />
-        <button type="submit">Greet</button>
-      </form>
-      <p>{greetMsg}</p>
    </main>
  );
}

export default App;

4. "Hello World"アプリの起動

以下のコマンドでアプリを起動しました。

npm run tauri dev

今回の目標は完遂です。

まとめ

驚くほど簡単にデスクトップアプリの第一歩を踏み出すことができました。
今後も、計画にのっとって必要な技術スタック（Three.js etc.）の学習を進めていきます。

今回の参考資料

今回参考にしているのは、以下の資料です。

• Tauri Quick Start (2026年4月時点の情報です)
• 入門 React