Tauri v2 + React でローカルファーストなMarkdownノートアプリを作った

要約

NotionやObsidianに「ちょうどいい」が見つからなかった筆者が、自分好みのノートアプリ「Graphite」をTauri v2とReactで自作した。ElectronはバンドルサイズがN150MB超と重いため、OSのWebViewを利用して約10MBに抑えられるTauriを採用。エディタにはTipTap（ProseMirrorベース）を使い「見た目はリッチ、保存はMarkdown」を実現した。状態管理はZustandでシンプルに、UIはshadcn/ui＋Tailwind CSSで構築。当初Componentから直接invoke()を呼んでいたが痛みを感じて「Component→Store→lib/api→Rust」の4層アーキテクチャへ整理した。

📌

Key Points

•ElectronではなくTauriを選択：バンドルサイズを約10MBに抑えられ、バックエンドにRustを使うことでファイル操作・セキュリティ面でも優位
•TipTap＋tiptap-markdownで「リッチエディタ体験」と「Markdownファイル保存」を両立し、コードブロックのシンタックスハイライトなど細部は自前で調整
•invoke()はlib/api/層に集約・ComponentはStore経由でデータ取得・Store間の直接参照禁止、という3ルールで4層アーキテクチャを整理し保守性を向上

Why it matters

TauriとReactを組み合わせたローカルファーストアプリ開発の実践的な設計パターン（レイヤードアーキテクチャ・状態管理・Markdownエディタ統合）を具体的なコードとともに示しており、デスクトップアプリ開発を検討するWebエンジニアにとって参考度が高い。

原文を読む