Rust+JSでデスクトップアプリの開発が出来る<a href="https://tauri.app/" target="_blank" rel="nofollow noopener noreferrer">Tarui</a>で開発する環境を作ったのでメモ。とはいえ<code>環境を作った</code>といってもほぼやることはなくて、雛形作ってLintやVSCodeの設定を整えるだけだった。特に難しいことはない。
<h1 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロジェクト作成</h1>
<img src="https://storage.googleapis.com/zenn-user-upload/3e40e2f08b9f-20220902.png" alt loading="lazy" class="md-img">
<div class="code-block-container"><pre><code>$ npm create tauri-app
✔ Project name · try-tauri
✔ Choose your package manager · npm
✔ Choose your UI template · next-ts
</code></pre></div><ul>
<li>
<code>npm create tauri-app</code>をすると雛形を作れる。</li>
<li>
<code>Choose your package manager</code>では<code>cargo</code>や<code>yarn</code>などから好きなものを選ぶ。
<ul>
<li>ただ、<code>cargo</code>を選ぶとフロントエンドは<code>Vanilla</code>か<code>yew</code>の２種類のみになるので微妙かも。普通に<code>npm</code>で良さそう。</li>
</ul>
</li>
<li>
<code>Choose your UI template</code>は<code>npm</code>か<code>yarn</code>を選べば<code>Vanilla</code>,<code>React</code>,<code>Vue</code>はもちろん<code>Svelte</code>,<code>Preact</code>,<code>Next</code>まで沢山あって便利。</li>
<li>今回はNext.js + TypeScriptにしたいので<code>next-ts</code>を選んだ。これで準備の99%は完了。</li>
</ul>
<h1 id="%E5%AE%9F%E8%A1%8C">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A1%8C" aria-hidden="true"></a> 実行</h1>
下記を実行するとHello WorldのGUIが立ち上がる。
<div class="code-block-container"><pre><code>$ npm run tauri dev
</code></pre></div>初回はコンパイルが終わるまで結構時間がかかるので注意。
<h1 id="lint%E3%82%84formatter%E3%81%AE%E6%95%B4%E5%82%99">
<a class="header-anchor-link" href="#lint%E3%82%84formatter%E3%81%AE%E6%95%B4%E5%82%99" aria-hidden="true"></a> lintやformatterの整備</h1>
フロントエンド用のLintやFormatterなどの設定。
<code>.prettierrc.js</code>
<div class="code-block-container"><pre class="language-js"><code class="language-js">module.exports = {
 singleQuote: true,
 semi: false,
 trailingComma: "none",
};
</code></pre></div><code>.prettierignore</code>
<div class="code-block-container"><pre class="language-prettierignore"><code class="language-prettierignore">package.json
package-lock.json
</code></pre></div>eslintのインストール。
<div class="code-block-container"><pre><code>$ npm install -D eslint eslint-config-next
</code></pre></div><code>.eslintrc.json</code>
<div class="code-block-container"><pre class="language-json"><code class="language-json">{
 "extends": "next/core-web-vitals"
}
</code></pre></div><h1 id="vscode%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#vscode%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> VSCodeの設定</h1>
<div class="code-block-container"><pre class="language-json"><code class="language-json"> {
 "editor.formatOnSave": true,
 "editor.inlayHints.fontFamily": "Courier New",
 "editor.inlayHints.fontSize": 14,
 "workbench.colorCustomizations": {
 "editorInlayHint.foreground": "#868686f0",
 "editorInlayHint.background": "#3d3d3d48",
 "editorInlayHint.typeForeground": "#fdb6fdf0",
 "editorInlayHint.parameterForeground": "#fdb6fdf0"
 },
 "[rust]": {
 "editor.defaultFormatter": "rust-lang.rust-analyzer",
 "editor.formatOnSave": true
 },
 "[toml]": {
 "editor.formatOnSave": false
 },
 "rust-analyzer.linkedProjects": [
 "/Home/dev/src-tauri/Cargo.toml" &lt;= ここは絶対指定のPATHでCargo.tomlまで含めて記述しないとだめ
 ]
	}
</code></pre></div><ul>
<li>色とかHintsのサイズとかはお好み。</li>
<li>
<code>code .</code>でプロジェクトのルートで開いて開発する場合は<code>"rust-analyzer.linkedProjects"</code>で<code>Cargo.toml</code>の場所を指定してあげないとエラーが出る。</li>
<li>あとtomlで<code>editor.formatOnSave</code>をfalseにしてるのは.prettierignoreがサブディレクトリのCargo.tomlに効かないから。</li>
</ul>
<h1 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%97%E3%81%9F%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%81%97%E3%81%9F%E3%83%8F%E3%83%9E%E3%82%8A%E3%81%A9%E3%81%93%E3%82%8D" aria-hidden="true"></a> その他ちょっとしたハマりどころ</h1>
<h2 id="vscode%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC">
<a class="header-anchor-link" href="#vscode%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC" aria-hidden="true"></a> VSCodeでエラー</h2>
デフォルトだとVSCode側で<code>src-tauri/src/main.rs</code>にて下記のエラーが発生してる。
<div class="code-block-container"><pre><code>proc macro panicked
message: The `distDir` configuration is set to `"../dist"` but this path doesn't exist
</code></pre></div><ul>
<li>
<code>dist</code>ディレクトリをプロジェクトのルートに作成すれば消える</li>
</ul>
<h2 id="release-build%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC">
<a class="header-anchor-link" href="#release-build%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC" aria-hidden="true"></a> release buildでエラー</h2>
<ul>
<li>雛形作成したままの状態でrelease buildを作成しようとするとエラーが出る。</li>
<li>
<code>tauri.config.json</code>に記述されている<code>icon.icnc</code>がプロジェクトにないので失敗するっぽい。</li>
<li>これはMacApp用のアイコンっぽいんだけど別になくてもビルドはできるのでここの記述は消しちゃってbuildしても良さそう。必要なら<code>icon.icnc</code>を頑張って作る。</li>
</ul>
<h1 id="%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9" aria-hidden="true"></a> リソース</h1>
<ul>
<li>
<a href="https://tauri.app/" target="_blank" rel="nofollow noopener noreferrer">Build smaller, faster, and more secure desktop applications with a web frontend | Tauri Apps</a>
<ul>
<li>公式サイト</li>
</ul>
</li>
<li>
<a href="https://github.com/tauri-apps/create-tauri-app" target="_blank" rel="nofollow noopener noreferrer">tauri-apps/create-tauri-app: Rapidly scaffold out a new tauri app project.</a>
<ul>
<li>プロジェクト作成のCLI</li>
</ul>
</li>
<li>
<a href="https://zenn.dev/kumassy/books/6e518fe09a86b2" target="_blank">Rust GUI の決定版！ Tauri を使ってクロスプラットフォームなデスクトップアプリを作ろう</a>
<ul>
<li>ちょうど良い感じのTauriのTutorialがZenn Bookにあったので載せておく。</li>
</ul>
</li>
</ul>

Tauri + Next.js + TypeScriptで開発する準備

その他ちょっとしたハマりどころ

Discussion