💬

Tauri2.0 × React のアプリ開発 - TauriのインストールからTailwind 導入まで

2024/08/18に公開

Android

少し前からFlutterを使ってアプリ開発を始めていたのですが、Rustとwebフロントの技術を使ってマルチプラットフォーム開発ができるTauriのメジャーバージョンアップの話を聞きつけこちらの開発もやってみることにしました。

アプリ開発に機械学習の要素も取り入れたかったので、Rustで実現する様子もそのうち記事にしていけたらいいなとおもってます。

この記事でふれないこと

android仮想環境の構築
rustのセットアップ
bunのセットアップ

Tauriのインストール

https://v2.tauri.app/start/

まず、Nodeの実行環境はBunを採用しました。以下のコマンドでプロジェクトを作成します。

bun create tauri-app --rc

続いて、プロジェクト名やパッケージマネージャー、UIフレームワークなどを選択します。ここで、プロジェクト名に -（ハイフン）を使用すると、Androidの起動時にエラーが発生するため注意が必要です。（tauri.config.jsonから修正可能なので、ハイフンを入れてしまっても問題ないです）

✔ Project name · yourProjectName
✔ Identifier · com.yourProjectName.app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · bun
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript

プロジェクトを生成したら、必要なパッケージをインストールします。

bun i

デスクトップアプリのビルド

bun run tauri dev

起動後以下の画面が表示されればOKです。

Androidアプリのビルド確認

次に、Androidアプリでもビルドしてみます。

bun run tauri android init
bun run tauri android dev

このとき、 vite.config.ts の host を 127.0.0.1 に設定する必要がありました。デフォルトの localhost ではAndroidデバイスからアクセスできないため（？）です。

また、Hot ReloadはAndroid環境では効かなかったため、いったん機能開発はデスクトップで進めていこうと思いました。（デザイン実装の時に改めて調査しようと思います。）

`vite.config.ts` の `host` を変えなかった時の画面

Tailwindの導入

Tailwind CSSの公式ガイドを参考にしつつ、以下のコードをフォームの上に挿入してみました。
（挿入した場所が分かりにくくてごめんなさい。画面上部の文字ではなく、画面下部のインプットボックスの上です。）

<div className="flex flex-col items-center justify-center h-screen">
  <div className="text-4xl font-bold">Welcome to Tauri!</div>
</div>

導入されたことが分かりやすいように元のCSSは消しています。

font-boldが明らかに効いていなそうなのでうまくいっていないようです。

調べたところ、vite.config.tsに以下の設定を追加すればよいらしい。

export default defineConfig(async () => ({
  plugins: [react()],
  // ここの設定が必要
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },

修正後の表示

導入できてそうですね。

まとめ

アプリの起動とTailwindの導入でようやくスタートラインに立てました。自分自身、web開発の経験が一番長いので、VueやReactで開発できるのはうれしいです。その点でいうとElectronも選択肢にありますが、エンジニアとしてRustは書けるようにしておきたいので、Tauriを使っていきたいし、とても期待しています！