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

---

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

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

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

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

React, Next.js, TypeScript, Material UIといったライブラリはこのWebサイトの構成と同じ．さらに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を使っている．

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

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

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

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

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

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

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

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

• UI/UX改善
  • ダークテーマを導入したい．
  • 実際に使ってみたらUXが微妙な部分があったので修正したい．
• Googleサービスとの連携
  • 今のところGoogle Classroomからのクラスデータインポート，Google Calenderへのエクスポートを考えている．
• PWA対応
  • スマホで見る場合はアプリがあったほうが嬉しそう．
  • next-pwaを使えばできそうな気がする(参考: Next.js環境でのPWA(Progressive Web App)の導入手順)

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

---