こんにちは、鈴木俊吾（すずしん）です。

「何か身近な課題を解決するミニアプリを自作してみたい」　
「そうだ！デスクトップ付箋メモアプリを作ってみよう！！」

そう思い立った私。
そこで、どのフレームワークを使ってアプリ開発するか検討した結果。
Tauri + Bun + TypeScript + Svelteを使うことにしてみました。

この記事では、主にTauriのセットアップ方法および最初のアプリHelloWorldを動作させるまでの流れを解説します。

Tauriを使ったアプリ開発をしようと思った理由

私はちょっとしたメモを取る時、VSCodeでテキストファイルを編集しています。
ただ、いちいちエディタを起動して、テキストファイルを編集するという手間はちょっと面倒。
もっと手軽にメモを編集・管理したいと思っていました。

もちろん、そういった問題を解決するためのアプリというのは存在します。
そのうちの一つが、デスクトップメモアプリ系のもの。
デスクトップ上に付箋のようにメモを配置して編集できるようにします。

既にあるアプリを使ってもよいのですが…。
どうせなら、アプリ開発者として自分で作ってみたいと思ったのです。
自分で作れば、思い通りの機能を持ったデスクトップメモアプリを作れますよね？

そこで、どのフレームワークで開発するかを検討しました。
その結果、私のスキルセットから判断して、Tauri + Bun + TypeScript + Svelteの組み合わせで行くことにしました。

Tauriを使うことで、使用するメモリの量を節約しつつ、全体のファイルサイズも小さくできます。
Tauriでは、フロントエンドをTypeScript、バックエンドをRustで開発します。
私個人として、TypeScriptの扱いにはそれなりに慣れています。
Rustについては未経験ですが、AIのサポートを受ければ何とかなるだろうと判断。
できるだけ最速でアプリを開発することを目的にした結果です。

Tauriアプリの開発環境の構築

MacOS環境でBunを使ったTauriアプリの開発環境の構築の流れとしては以下のようになります。

  • Homebrewのインストール
  • XCodeのインストール
  • Rustのインストール
  • Node.jsのインストール
  • Bunのインストール
  • Tauriアプリの開発

Homebrew

まず、Homebrewをインストールします。
まだHomebrewをインストールしていない方は、ターミナルで以下のコマンドを実行してください。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

XCode

MacOSアプリを開発するために必須のツールとなります。
アプリストアからインストールして、一度起動してセットアップを完了させてください。
もし、デスクトップアプリ開発のみで良い場合には、以下のコマンドでも大丈夫です。

xcode-select --install

Rust

Tauriでは、Rustが使われています。
そのため、Rustの開発環境が必要です。
以下のコマンドを実行してください。

curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

Node.js

Node.jsは、フロントエンドにJavaScirpt (TypeScript)を使う際に必要になります。
Homebrew経由で、最新版をインストールしてください。

brew install node

Bun

まだBunをインストールしていない方は、以下のコマンドを実行してください。

curl -fsSL https://bun.com/install | bash

Tauriアプリの開発手順

Tauriアプリのテンプレートを作成します。
作成するには、create-tauri-appを利用していきます。
ちなみに、今回はBunを使用しているので、以下のようになります。

bun create tauri-app

上記コマンドを実行すると、いくつか質問されます。
プロジェクト名、Identifier、フロントエンド言語、パッケージマネージャ、UIテンプレートとフレーバーを選択します。
ここでは、hello-world、com.suzushinlab.hello-world、TypeScript (JavaScript)、Bun、SvelteとTypeScriptを順に選択していってください。

以上で、必要なファイルが自動的に生成されます。

Tauriアプリの実行は以下のコマンドを指定します。

bun tauri dev

この手順を順番に実行していった際、`+page.svelte`でエラーが出ていました。
このエラーを修正するには、2行目のインポート文を以下のようにします。

import { invoke } from "@tauri-apps/api/core";

うまく実行されると、以下のような画面が表示されるはずです。
これで開発環境のセットアップは完了です。

これから本格的にアプリ開発に挑戦します！

さて、これでTauriを使ったアプリ開発環境の構築が完了しました。
ここから、いよいよ本格的に作りたかったデスクトップメモアプリの開発に移ります。

今後の記事では、デスクトップメモアプリの開発過程についても書いていきます。
興味がある方は、ぜひ今後の記事をチェックしてみてくださいね！