Open8

Tauri + React(+shadcn/ui)で大体何とかなるかも

React
Rust
TypeScript
Tauri
shadcn/ui
泡沫京水泡沫京水

Tauriとは

かなりざっくりと書くと、

  • 画面を構築する部分はWebフロントエンドのライブラリを使用
    • TypeScriptなら、React・Vue・Svelteなど
    • Rustなら、Leptos・Yewなど
  • 内部の処理部分はRustで記述する

というフレームワークで、これまでWebの畑にいた人が気軽にクロスプラットフォーム開発に身を乗り出しやすいものとなっています

しかも、WebAssemblyを使ったRustのフロントエンドフレームワークも使えるので
やろうと思えばRustだけでも動かせるという
Rustで出来ること多いな！？と思わせられるフレームワークです

泡沫京水泡沫京水

shadcn/uiとは

ベースはTailwindCSSのUIコンポーネントライブラリのように扱われているが、
これは様々なものを一気に導入するものではなく、必要に応じて部分導入ができるもので
そのコンポーネントのファイルがnode_modulesではなく、components/uiのディレクトリに
格納されるので自分の手で手を加えやすく、それによってオリジナリティを出しやすいというメリットもある

泡沫京水泡沫京水

だいたい何とかなるとは？

  • 画面周りの開発体験
    • Reactでコンポーネントをうまいこと使い回せる
    • ある程度デザインが整ってて簡単に導入できるUIコンポーネントは簡単に引っ張ってこれる
  • 後ろ側の処理は早くしたい
    • 爆速で安全なRustを使う
泡沫京水泡沫京水

じゃあやってみようか...といく前に

言うまでもない話かもしれませんが、

  • フロントエンド開発を行うためのNode.js
  • Rustを扱うためのRustのインストール
  • Optional：WebAssemblyを扱うためのwasm32-unknown-unknownの導入

が既に終わっていますか？
終わっていなければ導入してください。
もし、パソコンの環境を汚したくなくて、今はただ試したいというだけであれば、
VSCodeとDockerさえ入っていればいいです。
加えて、VSCodeの拡張機能として、DevContainer拡張機能が入っていれば文句なしです。
それを使って、仮想環境の中に開発環境を構築してしまいましょう。

泡沫京水泡沫京水

環境構築ができたなら

開発を始めていきましょう
ToDo! ここに必要なコマンドを書いておく

泡沫京水泡沫京水

できればしておきたいこと

泡沫京水泡沫京水

https://engineering.cocone.io/2023/02/17/tauri_rspc_typescript_rust/

  • rspc：Rust側で開発したAPIの型定義を使って、TypeScript用の型定義ファイルを生成するもの
    • featuresにtauriオプションがあるので、Tauriで使うことが十分に想定されている

https://blog.mudatobunka.org/entry/2024/11/06/120000

  • Tsify：通常、Rustを通して生成されるTypeScriptの型はclassとして宣言されるので、人によって不便に思うだろうし、JSON Serializableではないというめんどくささがある。それを解決してくれるのがこれ
    • JSON形式でシリアライズ・デシリアライズできないと、ネットワークを通して値を送信するときなどにとっても不便。型情報も消失されるのは本当にしんどいよね
    • それをinterfaceとして型定義されていると嬉しい
      • Branded Typesでワンチャンデバッグもできるように設定できるかもしれない
      • 外部APIから渡ってきた値でもプロパティ名と型が一致すればすぐにTauriのバックエンド側の関数に渡せるようになる
      • だからこそ、interfaceで出力されて欲しいと切実に思うし、d.tsファイルとして出力されて欲しいと思った時にぴったりなのがTsify
泡沫京水泡沫京水

気をつけるべきこと

  • WebViewで表示していることを十分に考慮する
    • つまり、外部ではなくブラウザ上のAPIを利用するとき、対応しているかどうかを確認するときは、一番右の2つをみる
      • Chromeより対応しているものが少ないかもしれない
  • Dark Themeを実装する際、今までのフロントエンド