時間割アプリを作ってみた話

2023/05/07

2023/05/07


Webアプリ実装の練習としてTSynctという時間割管理アプリを作ってみた.

機能


授業管理

Class

授業ごとに以下の項目を保存することができる.

  • クラス名
  • 担任
  • 教室
  • メモ
  • 表示色

時間割管理

TimeTable

1コマごとに授業を選択して一覧表示できる.授業に設定した表示色を使ってくれるので分かりやすい(本当?).

中身


フロントエンド

React, Next.js, TypeScript, Material UIといったライブラリはこのWebサイトの構成と同じ.さらにSWRというライブラリを追加した.

SWR

データフェッチ用のライブラリとしてSWRを利用している.

const UserProfile = (props: UserProfileProps) => {
  const {data, error, isLoading} = useSWR("/api/user", fetcher)
  if (error) return <div>Failed to load</div>
  if (isLoading) return <div>Loading...</div>
  return <div>Hello, {data.name}</div>
}

こんな感じでuseSWR() hookを利用することで,データ(data)とデータ取得状態(isLoading)とエラー状態(error)を一括して取得することができる. ついでにローカルへのデータキャッシュも行ってくれる.

axiosやら何やらで細かく書く必要のある部分をスキップできるので嬉しい.また,データ取得だけでなく保存(POST/PUTリクエストなど)にも対応している.

参考: SWRを使おうぜという話2022

バックエンド

バックエンドはFirebaseを使っている.

Cloud Functions for Firebase

GCPのCloud FunctionsにFirebaseとの連携機能がついた物.バックグラウンドで行うバッチ処理を関数化して実行している.

Firebase Authentication

認証機能を提供してくれるサービス.これでGoogleログインの機能を実装している.

Firestore Database

NoSQL系のデータベースサービス.そこそこ大きめの無料枠があるので嬉しい.

Authenticationと連携してアクセス制御してくれたり,Firestoreの変更をトリガーにしてFunctionを呼び出してくれる.

(本当はPostgreSQLを使ってみたいけど,サーバーの維持コストが嵩むので断念した.Cloud SQLに無料枠があったら嬉しいんですが...)

Firebase Hosting

せっかくなので(?)GitHub Pagesの代わりにFirebase Hostingを使った.

利点としてはデプロイが楽になったことが挙げられる. firebase deployコマンド1回で,Cloud Functionの関数もFirestoreのルールもFirebase Hostingで配信する静的ファイルも全てデプロイしてくれる.便利すぎか??

今後の予定


だいぶ即興で作ってしまったので,時間がある時に完成度を上げていきたい.時間あるかなぁ

  • UI/UX改善
    • ダークテーマを導入したい.
    • 実際に使ってみたらUXが微妙な部分があったので修正したい.
  • Googleサービスとの連携
    • 今のところGoogle Classroomからのクラスデータインポート,Google Calenderへのエクスポートを考えている.
  • PWA対応

来年の4月になったらもう少し真面目に宣伝したいですね.


Shared on: