🐁

Rust / Axumで簡単なWebアプリを作る

2023/05/07に公開

はじめに

Rustの勉強のために、簡単なBBSのバックエンドシステムを実装してみました。
ログイン機能はなし、メッセージの投稿と削除、一覧が見れるといった最低限のものになります。

また、Webアプリケーションのフロント側としては、SvelteKitを利用しました。
こちらも勉強中のため、探り探りという感じです。

下記を遵守しながら開発を行いました。

Backend:

Frontend:

一覧機能
- メッセージの一覧を表示
- ページアクセス後、コンポーネントが最初にDOMにレンダリングされた後に、バックエンド側の一覧エンドポイントにPOSTを行い、一覧を取得。
- 5件ずつ最新順に表示
- ページネーションで過去の投稿を確認可能。
投稿機能
- メッセージを入力して投稿
- メッセージを入力して送信を押した際に、バックエンド側の投稿エンドポイントにPOSTを行い、メッセージを登録。その後、最新のデータをfetchして一覧を更新する。
削除機能
- メッセージの一覧の削除ボタンを押して投稿を削除
- 削除ボタンを押した際に、バックエンド側の削除エンドポイントにPOSTを行い、メッセージを論理削除。その後、最新のデータをfetchして一覧を更新する。

ソースコード一式です。
https://github.com/ys39/rust_bbs

基本的にパッケージを組み合わせて開発する？といった感じ。
Rustのコンパイルエラーがわかりやすい。コンパイルに失敗した際に、どこに文法ミスがあるのかなどを示してくれるため勉強しながらコーディングができて助かった。
rust-analyzerが開発するうえで便利
実装が分からなくなったら、Docs.rs や Tokioのブログなどを確認するようにした。
- 参考[1]ではaxumのバージョン0.4.8を利用しており、今回は0.6.1を利用。バージョン間の差異を吸収するために、このサイトが非常に参考になった。
エラー処理のクレートであるanyhowとthiserrorがいい感じにエラー処理をキャッチしているので、エラー処理の実装が比較的シンプルでよかった。

公式のチュートリアルがわかりやすいため、比較的学習の労力が軽く感じる。
メッセージ投稿、削除、ページネーションをjsで行うようにしたため、リロードの発生しない滑らかなページとなった。ただ、その分今回のWebアプリではURLが変化しないためUXが少し悪い。
実行モデルがブラウザサイドとサーバサイドで明確に分かれており、それを意識するとディレクトリ構成が理解しやすくなった。

Rust
- 画像/ファイルの処理を追加
- エラー処理をしっかりと理解する
- テストコードを書くようにする
- 脆弱性対策(LAMP環境などで実施されている対策をRust/Axumではどのように実施するのか調査が必要）
SvelteKit
- フレームワークならではの状態管理やライフサイクルの概念を理解して、それに則ったコーディングを行う

[1]: 佐藤昭文著. (2022/09/30). Webアプリ開発で学ぶ Rust言語入門
※こちらの本ではRustでTODOアプリを開発しており、今回はそれをBBS用に書き直している形になります。
[2]: axum exampleリスト (https://github.com/tokio-rs/axum/tree/main/examples)
[3]: The Rust Programming Language (https://doc.rust-lang.org/stable/book/)
[4]: Kyohei Hamaguchi (tnzk)，小関泰裕　著. (2023/4/28). 実践 Svelte入門
[5]: SvelteKitチュートリアル (https://learn.svelte.jp/tutorial/welcome-to-svelte)