Tauriが来そうな気がするので、なんか書いてみる。
Github
GitHub - katakanan/tauri_life_game
TauriではGUIのフロントエンドをいろいろなフレームワークで書ける。
- Vanilla
- yew
- React
- Vue
とかいろいろだが、プロジェクトを生成するときの選択肢によって、選べる幅が変わってくるらしい。
環境設定
WindowsなのでPowershellで作業する。
Cargo でcreate-tauri-appを入れる。
yarnを入れる。
プロジェクト生成
コマンドによってテンプレートプロジェクトを生成できるが、
とりあえずReactが出てくるのか以下の選択をしたとき。
> cargo create-tauri-app ✔ Project name · react_ex2 ✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm) ✔ Choose your package manager · yarn ✔ Choose your UI template · React - (https://reactjs.org/) ✔ Choose your UI flavor · TypeScript
Reactにした理由は、React Nativeなどによって、盛んに開発されており、たくさんの情報があるような気がしたので。
Nextjsなどでもよいかもしれない。
YewはRustでHTMLを生成する感じのフレームワークであるが、情報がまだあんまりなくて初手つらかった。
Vanillaは素のHTMLやjavascripなので、動的な画面を作るのが大変なので、なし。
ビルド
cd react_ex2 yarn yarn tauri dev
をしろ、との指示がある。
vscodeで開いておく。
ビルドを行うと、アプリが起動する
編集をするとホットリロードして勝手にリビルドされて起動しなおされる。
http://localhost:1420/
にアクセスするとUIだけを表示できる(ロジック側は動かない)
アプリが起動した。
Life game
とりあえず、Reactだけで、Life gameを書いてみる。
ここを写経した
React Hooks Project Tutorial - Game of Life - YouTube
動いてるっぽい。
Tauri::Command
ReactでできることをわざわざRustでやる 必要もないが、
ここからRust側に処理を切り出してみる。
基本的にHTML側のデザインに対して、ユーザーからの入力があって、onclickとかに紐づいたTypescriptのasync関数がRustの関数を呼ぶ。
そして戻り値をTypescript側で受け取ってなんやかんやする、というスタイルになる気がする。
呼ぶときの引数はRustの引数名をキーに持つオブジェクトを渡す。
Rust側からの戻り値はプリミティブな型だとそのままなことが多い。
Rust側で定義される構造体はserdeで構築された形で指定できるが、大体はDerive(serde)するとオブジェクトな形になって来るので、どんな形で返ってくるのかを確認しなければならない。
なので構造体で返すときはTypescript側で使いやすい形になるようなSerializeをしたほうがよいかも(?)
今回はRust側での盤面の状態の管理にndarray crateを使用し、そのなかのArray2を使用した
TypescriptにArray2を返すと、１次元の配列とrowとcolのサイズ、その他もろもろが渡されていた。
ビルドがコケる
iconがないみたいなエラーがでるのでrustのところにあるconfigを変更する。
起動
yarn tauri dev
感想
あまりRustの恩恵を受けたプロジェクトではないが、Tauriの導入にはちょうど良いかもしれない。Typescriptから呼べるRustの関数を最小限にするようなうまい設計を考える必要がある。
