【個人開発】Bun + Vite + Remixを使い、１ヶ月でWebアプリ作ってみた ~開発編

はじめに

Bun + Vite + Remixの環境にした経緯や、企画の内容に関しては一つ前の記事に詳しく書いています。前回の記事

開発環境

フロントエンド

言語・フレームワークなど	バージョン
bun	1.0.30
vite	5.1.6
remix	2.8.1
tailwind	3.4.1
fullcalendar	6.1.11
axios	1.6.8
prisma	5.11.0
react	18.2.0
typescript	5.4.2
remix-auth	3.6.0
remix-auth-form	1.4.0

Dockerを用いたbunの環境構築方法はこちら

bunの環境が用意できたら

shell

bun create vite my-app

どこかでRemixを選択するところがあるので

✔ Select a framework: › Remix
or
✔ Select a variant: › Remix

バックエンド

Vercelが用意しているDBのPostgresがあるので今回はそれを使用しました。
これでしか使えない機能などは使っていないので詳しくは公式ドキュメントを見てください。

手こずったところ

注意
そもそも日本語も英語も記事が少ないです

かなり最新の技術のためかあまりにも少なくて手こずりました。

package.json

    // この--hostがないとアクセスできなかった
    "dev": "vite dev --host

sample.tsx

    import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";

    export async function loader({ request }: LoaderFunctionArgs){
        // ここはサーバー側で最初にdbの取得やauthなどを設定する
        
    }
    export async function aciton ({ request }: ActionFunctionArgs){
        // ここはクライアント側が何かしらのアクション(buttonが押された時)にdbに追加などを設定する
        
    }
    export default functon sample(){
        //ここはいつものReactやNextでおなじみの
    }

基本的にはこのloaderとactionを駆使してなんとかしなくてはならないので例えば
一つのページに2つ以上actionがある場合(検索して、追加するなど)はかなり面倒なことをしなくてはならないので大変でした。

余談

Fullcalendarがとても使い勝手が良かった

まとめ

TypeScriptをつかってバックエンドも開発したい方やシンプルな構造や小さいサービスなどに向いてるフレームワークだと感じました。

ここまでお読みいただいた方ありがとうございます。

もし良ければ覗いてみてください！