wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

TauriでTODOアプリを作ってみた①

仕事のタスク管理をslackで行っていたが、いい加減ちゃんと管理しくなってきたのでデスクトップアプリを自作したので、その内容を記事にした。

リポジトリ

github.com

アプリの説明

  • Markdownベースで記載できるTODOアプリ
  • できるだけシンプルに作成
  • まだ開発中

使用技術

Tauriとは?

tauri.app

  • TauriRustで作成されたクロスプラットフォームでデスクトップアプリが作成できるフレームワーク
  • デスクトップアプリのネイティブ部分のコードはRust、フロントエンドはWebの技術を使用できる
    • なのでフロントエンドに関しては以下を使用できる
      • HTML
      • React
      • Next.js
      • Svelte
  • 開発の領域的には、Electronと同じだが、バンドルサイズ、消費CPU、セキュリティが改善されている

開発のモチベーション

  • 仕事のTODOリストは今までslackのDMに書いて運用していた
    • 雑な運用でリストで書き出して、タスクが終わったら「✔」をつけるのみ運用
    • 他のTODOアプリも試したが無駄にリッチなアプリが多くて続かなかった
    • ブラウザだと他の作業で間違って消したりするのでデスクトップアプリで作りたかった
    • 仕事のTODOだとセンシティブな内容が多かったので、サーバー通信は避けたい
  • なので、自分用にカスタマイズしたTODOアプリを作ってみた

実装

構築

以下の手順でコマンドを実行していけば、初期構築は簡単に行える。

tauri.app

Tauriでの開発方法

以下のコマンドでブラウザでローカル起動。ホットリロードも対応しているので、開発は快適。

$ yarn dev

以下のコマンドでデスクトップアプリでローカル環境を起動。
ネイティブの機能をデバッグする場合は、こちらを使用

$ yarn tauri dev

以下のコマンドでデスクトップアプリをビルドできる。

$ yarn tauri build

frontendの開発

ネイティブ機能の開発

  • ネイティブ機能はRustで開発を行う
  • アプリのmenuは以下で作成
  • menuからfrontend側の通信は、以下のように作成

こんな感じで作成した。

まとめ

React経験者なら、ほぼ学習コスト無しでデスクトップアプリが作れるので、作業効率アップ用のアプリ作成とかはサクッと作る。

TODOアプリみたいに世の中には溢れているけど、自分に合ったものは見つからない時は、Tauriを使って自作するのも良いかと思った。