LINEUP & SCHEDULE

Rust で型安全な SPA 開発

  • 10:50 - 11:15 (JST)

    • Session Language: 日本語
    • Caption Language: English

背景

Rust が好き で、自社ではサービスのバックエンドに採用して実運用しています。

Rust はエコシステムが充実しており、信頼性や速度も高性能であるため、そこに非常に助けられています。環境構築が容易であること、強力な型システムや borrow checker による信頼性、C 言語並の速度が魅力だと感じています。

目的

フロントエンド開発でも Rust の恩恵を受けたい!

今の顧客向けフロントエンドでは TypeScript を使っていて、開発は早いが悩みもあります。(any で型安全性が下がったり、環境構築が大変だったりなど)

Rust のフロントエンド (GUI) crate も色々出てきてるし試してみたい!

やったこと

運用ツールに取り入れて使ってみました。バックオフィス向け GUI アプリです。 Web 向けフロントエンドである seed-rs を使ったアプリと、デスクトップ GUI crate の iced を使ったアプリの 2 つを作りました。 運用パラメータを変更するためのツールや、テストでの API 呼び出しや設定変更で社内で活用しています。

作ってみてどうだったか

双方とも The Elm Architecture ベースで、自身は Elm と Rust 経験者なのでとっつきやすさはありました。一般的な SPA として使っています。

  • seed-rs (+ actix-web)
    • モチベーション: DB にて直接 SQL クエリーを直接実行するのをやめて HTTP でやりたい。
    • メリット
      • バックエンドも一緒に作ったので、HTTP でやり取りする JSON の構造体定義を共有できてうれしかった。
      • DOM ツリーを構築するので、スタイルを CSS フレームワークに任せられる。
    • デメリット
      • 独自コンポーネントを作成するには型パラメーターの理解など難しい要素がある。
  • iced
    • モチベーション: QA チームなど非エンジニアでも扱える運用ツールを作りたい。
    • メリット
      • ボタンなど UI 要素が抽象化されていて実装しやすい。
      • (Rust の規模の大きい crate はだいたいそうですが、) サンプルがたくさんあるので参考にしながら実装できる。
    • デメリット
      • レイアウトをきれいに調整するのに手がかかる。
      • 独自コンポーネントを作るのはかなり大変。

今後の展望・課題

今回の発表は作ったものの紹介ですが、Rust のフロントエンドというと egui や dioxus など様々な crate があります。 まだ使用していない GUI crate について、いくつか紹介・比較してみたいと思います。 (e.g. egui, Dioxus, Tauri, Bevy)

今回 Rust で GUI を作成して、やはりデータ型定義まわりがやりやすかったのが印象的でした。(serde を使えるのが良い。) また、enum と match でコンポーネントを振り分けたりなど Rust 特有の良さもあると感じました。 しかし、総じて crate で独自コンポーネントの作成が難しく、主にスタイル (UI の見た目) の調整が大変でした。 キレイでスタイルの調整がやりやすい crate が現れれば、あるいは iced 向けのコンポーネントセットなどが現れれば、業務で Rust GUI を作るのもやりやすくなっていくと思われます。

Share it on


Bio

名和雅実

名和雅実

Fairy Devices Inc., Product Development Team, Engineer


Copyright © Rust.Tokyo 2022 all rights reserved.


特定商取引法に基づく表示

Twitterもぜひフォローしてください! @rustlang_tokyo

お問い合わせ: rust-tokyo-staff@googlegroups.com

過去の開催