はじめに
本記事は無料でサクッとアプリが作れる技術スタックの紹介と、使ってみての感想です。
具体的なセットアップは範囲外にしています。
技術スタック
・React
・TypeScript
・Supabase(データベース)
・Firebase(デプロイ)
使用しているものはすべて無料です。
データベースはSupabaseを選びました。
プロジェクトインスタンスが2個まで無料で利用できます。
作成したアプリをWeb上に公開したいのでホスティングサービスとしてFirebaseを選びました。
毎月一定の利用量に達するまでは無料で利用可能です。
今回作成したアプリ
デジタル名刺アプリです。
以下の機能があります。
・idで名刺を検索して閲覧する
・名刺を新規作成する
・各項目のバリデーション
サクッと作るために
プロジェクト立ち上げ
viteというビルドツールを使って1つのコマンドでプロジェクトを立ち上げることができます。
プロジェクトを作成したいディレクトリに移動し、
npm create vite@latestを打つ。あとは指示に従うだけです。
デザイン
UIはほぼ時間をかけていません。
Chakra-UIというCSSライブラリを使用しています。
Buttonなどが簡単に作成でき、ローディングアイコン等もChakra-UIで完結します。
バリデーション機能
React Hook Formを使用し、フォームの入力に不備がある時の挙動を簡単に実装できました。
使ってみての感想
プロジェクトを立ち上げてFirebaseでデプロイするだけなら1時間もかからずにWeb上でサイトを公開できました。
Herokuも数年前に有料になってしまったので、Firebaseが今のところ個人開発で使うのに勝手がいいのではと思っています。