Posts に戻る

久しぶりに個人開発した話について

Rust React Astro 個人開発

はじめに

今回、久しぶりに個人開発をしました。それがこのブログです。

プログラマーになる前は、Go言語などでWebアプリケーション開発を行い、ポートフォリオを作成していました。しかし、プログラマーになってからは慣れない業務に追われたり、職場が遠かったりと、なかなか時間が取れませんでした。 最近になって、ある程度自由な時間が増えたので、昔から気になっていたRustとReactの練習とキャッチアップを兼ねて、ブログを開発しました。

技術選定については深く検討したわけではありませんが、開発効率は意識しました。 特にRustは他の言語にない機能があり、難しいとよく言われます。そのため、最初は一つのファイルmain.rsで小さく作り始め、一つのタスクに集中することを意識しました。

例えば、投稿機能を実装する場合、最初から「バリデーションを行い、データベースに保存して、タグとの関連付けをして...」と考えると複雑になります。 そこで、まずは「POSTリクエストを受け取ってJSONをパースし、内容を表示する」という小さな一歩から始めました。それが動いたら次に「データベースに保存する」、その次に「バリデーションを追加する」というように、一つずつ積み上げていきました。

いきなりアーキテクチャ、設計全体を考えると思考が複雑になるため、まずは動くものを作り、その後にアーキテクチャ、設計を整理するという方針で進めました。 現時点ではmain.rsが肥大化したためファイル分割を行いましたが、まだ重複している処理があるので、これからリファクタリングを進める予定です。

使っている技術の詳細については、今後別の記事で紹介できればと思っています。 以下にAIがまとめた技術スタックの概要を載せていますので、興味のある方はご覧ください。 簡単に言えば、バグを最小化しつつ高パフォーマンスなWeb管理システムを構築し、ブログ側もレスポンスよくユーザーが見やすいように作ることを目指しました。

システム全体像

本システムは、以下の3つのコンポーネントで構成されています。

コンポーネント 役割
Backend 記事・プロフィール・タグなどのデータを管理するAPIサーバー
Frontend 記事の作成・編集・削除を行う管理画面
Blog 読者向けに記事を表示する公開サイト

Frontendで作成した記事はBackendのAPIを通じてデータベースに保存され、Blogがそのデータを取得して読者に表示するという流れになっています。

技術スタック一覧

領域 技術
Backend Rust, Actix-web, Diesel
Frontend React, Vite, TypeScript
Blog Astro
Database PostgreSQL 17 (Neon)
認証 Clerk
スキーマ管理 psqldef, Diesel

各技術の選定理由

Backend: Rust + Actix-web + Diesel

なぜRustを選んだのか

Rustは「安全性」と「パフォーマンス」を両立できるプログラミング言語です。

  • メモリ安全性: コンパイル時にメモリ関連のバグを検出できるため、実行時エラーのリスクを大幅に低減できます
  • 高いパフォーマンス: C/C++に匹敵する実行速度を持ちながら、安全性を犠牲にしません
  • 型システム: 強力な型システムにより、多くのバグをコンパイル時に発見できます

Actix-webの特徴

Actix-webは、Rustエコシステムにおいて最も成熟したWebフレームワークの一つです。

  • 非同期処理に対応しており、高い並行性を実現
  • ミドルウェアによる柔軟な機能拡張が可能
  • 豊富なドキュメントとコミュニティサポート

Dieselによる型安全なデータベース操作

DieselはRust向けのORM（Object-Relational Mapping）です。

  • コンパイル時のクエリ検証: SQLクエリの誤りをコンパイル時に検出できます
  • 型安全: データベースのスキーマとRustの型が一致することを保証します
  • SQLインジェクション対策: パラメータバインディングにより、SQLインジェクション攻撃を防止します

Frontend: React + Vite + TypeScript

管理画面には、React + Vite + TypeScriptの組み合わせを採用しました。

Reactを選んだ理由

  • コンポーネントベース: UIを再利用可能なコンポーネントとして構築できます
  • 豊富なエコシステム: フォーム管理やバリデーションなど、多くのライブラリが利用可能です
  • 広いコミュニティ: 問題解決のための情報が豊富に存在します

TypeScriptとZodによる型安全性

  • TypeScript: 静的型付けにより、開発時にエラーを早期発見できます
  • Zod: ランタイムでのバリデーションを型安全に記述でき、フォーム入力の検証に活用しています

Blog: Astro

公開サイトには、静的サイトジェネレーターのAstroを採用しました。

静的サイト生成のメリット

  • 高速な表示: 事前にHTMLを生成するため、サーバーでの処理が不要で高速に表示されます
  • SEO対策: 検索エンジンがコンテンツを正しくインデックスできます
  • セキュリティ: 静的ファイルのみを配信するため、攻撃対象となる箇所が少なくなります

Astroの特徴

  • Islands Architecture: 必要な部分だけJavaScriptを読み込むため、ページの読み込みが高速です
  • 柔軟性: React、Vue、Svelteなど、様々なフレームワークのコンポーネントを混在させることができます

データベース: PostgreSQL + psqldef

PostgreSQLを選んだ理由

  • 信頼性: 長年の実績があり、安定性が高いデータベースです
  • 機能の豊富さ: JSON型やフルテキスト検索など、高度な機能を備えています
  • オープンソース: ライセンス費用がかからず、自由に利用できます

本番環境では、サーバーレスPostgreSQLサービスであるNeonを採用しています。Neonは従来のPostgreSQLと完全な互換性を持ちながら、以下のメリットがあります。

  • サーバーレス: インフラ管理が不要で、使用量に応じた課金
  • 自動スケーリング: 負荷に応じて自動的にリソースを調整
  • ブランチ機能: データベースのブランチを作成でき、開発・テスト環境の構築が容易

psqldefによる宣言的スキーマ管理

psqldefは、データベーススキーマを宣言的に管理するツールです。

  • 宣言的: 「あるべき状態」を定義するだけで、現在の状態との差分を自動的に適用します
  • バージョン管理との相性: スキーマ定義をSQLファイルとしてGitで管理できます
  • 安全性: 適用前に差分を確認でき、意図しない変更を防止できます

まとめ

本ブログシステムでは、以下の方針で技術選定を行いました。

  • Backend: 安全性とパフォーマンスを重視し、Rust + Actix-web + Dieselを採用
  • Frontend: 開発効率と型安全性を重視し、React + TypeScript + Zodを採用
  • Blog: 表示速度とSEOを重視し、Astroによる静的サイト生成を採用
  • Database: 信頼性と宣言的管理を重視し、PostgreSQL + psqldefを採用

それぞれの技術が持つ強みを活かし、安全で高速なブログシステムを実現しています。