RustとYewでポモドーロタイマーを作ってみた

はじめに

イベントで定期的に登壇をしていて休日出勤したのに消化しきれなかった代休が余っていたので、3連休爆誕させて以前から興味のあったWebAssemblyの学習に時間を使ってみることにしました(いくつか本も読んだのでいつか紹介します。)。「とりあえず何か作ってみる」のが一番の近道だと考え、日々の私生活でも使えそうなポモドーロタイマーを実装することにしました。

WebAssemblyのエコシステムを調べていく中で、RustのYewというフレームワークが目に留まりました。ReactライクなAPIでWebAssemblyアプリケーションが作れるとのことで、ちょっと開発することにしました。

github.com

使用技術の選定理由

Rust：WebAssemblyのための優れたツールチェーンを持っており、学習コストは高めですが、型安全性と高いパフォーマンスが魅力でした
Yew：ReactライクなAPIで、コンポーネントベースの開発が可能。フロントエンド開発者にとって親しみやすい設計になっています
Trunk：ビルドツールとして採用。trunk serveだけで開発サーバーが立ち上がる手軽さが気に入りました

技術スタック

Rust (v1.75.0)
Yew (v0.21)
WebAssembly
Trunk (Bundler)

プロジェクトの概要

ポモドーロテクニックは25分の作業時間と5分の休憩を交互に行う時間管理手法です。今回実装したアプリケーションでは、以下の機能を提供します：

基本的なタイマー機能
- 25分のカウントダウン
- 開始/停止/リセット制御
- 視覚的なフィードバック
タスク管理機能
- タスクの記録
- 実際の作業時間の追跡
- 完了したタスクの履歴管理
データエクスポート機能
- マークダウン形式での出力
- クリップボードへのコピー機能

実装の詳細

プロジェクトのセットアップ

まず、必要なツールとターゲットをインストールします：

rustup target add wasm32-unknown-unknown
cargo install trunk

主要なデータ構造

タスクとタイマーの状態管理のための構造体：

#[derive(Clone, Debug)]
struct Task {
    description: String,
    completed_at: DateTime<Local>,
    duration: i32,
}

pub struct PomodoroTimer {
    time: i32,
    running: bool,
    interval: Option<Interval>,
    current_task: String,
    completed_tasks: Vec<Task>,
    initial_time: i32,
    markdown_visible: bool,
    markdown_content: String,
}

タイマー機能の実装

Yewのコンポーネントシステムを利用して、タイマーの制御を実装しました：

fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
    match msg {
        Msg::Start => {
            if !self.running {
                let link = ctx.link().clone();
                self.interval = Some(Interval::new(1000, move || {
                    link.send_message(Msg::Tick);
                }));
                self.running = true;
            }
            true
        }
        // 他のメッセージハンドラ...
    }
}

クリップボード機能の実装

WebAssemblyからブラウザのクリップボード APIを利用する実装：

Msg::CopyToClipboard => {
    if let Some(window) = window() {
        let navigator = window.navigator();
        let clipboard = navigator.clipboard();
        let _ = clipboard.write_text(&self.markdown_content);
    }
    true
}

開発で直面した課題と解決策

WebAssemblyとブラウザAPIの連携
- 課題：クリップボード機能の実装で型の不一致が発生
- 解決：web-sysクレートの適切な機能を有効化し、型の変換を正しく処理
状態管理とライフタイム
- 課題：コンポーネントの状態管理でライフタイムエラーが発生
- 解決：use_stateとuse_mut_refを適切に使い分けて実装

セットアップと実行方法

プロジェクトの作成：

cargo new --lib yew-pomodoro
cd yew-pomodoro

依存関係の追加（Cargo.toml）：

[dependencies]
yew = { version = "0.21", features = ["csr"] }
gloo-timers = "0.3"
web-sys = { version = "0.3.64", features = ["console", "HtmlInputElement", "Window", "Navigator", "Clipboard"] }
wasm-bindgen = "0.2"
chrono = "0.4"