20250301_CircLeT

Transcript

1. /FUMJGZ
   'VODUJPOTΛ &YQSFTTKTΛ࢖͖ͬͯΕ͍ʹͨ͠ Saku 2025/03/01
2. 1 目次 1. なぜやったのか 2. Netlify Functionsとは 3. Express.jsとは 4. なにがどうなった？？？ 5. まとめ
3. 2 なぜこれをやったか • フロントエンドとバックエンドの両方を自分で実装したアプリ ケーションを作ってみたい。 • 授業にて「データベース」という科目があった。 • フロントエンドとバックエンドをTSで共通化したかった。 /FUMJGZ
   'VODUJPOTΛ&YQSFTTKTΛ࢖ͬͯߏ଄Խͨ͠࿩
4. 3 作ったもの 日程調整アプリ • 実装した機能 • 基本的な日程調整アプリの機能 • 日程調整を時間含め入力可能 • 日程調整の入力をもとに参加人数の多い日のサジェスト機能
5. 4 バックエンド • バックエンドはデータベースとしてSupabaseを利用 • Supabaseとやり取りするAPIを Netlify Functions × TypeScriptで実装 使用技術 Netlify functions Supabase
6. 5 Netlify Functionsとは Netlifyというホスティングサービスが提供している FaaS(Function as a Service)のこと。 特徴：簡単な設計でAPIのエンドポイントを立てることができる。 簡単なAPIならば作成可能だが、複雑なエンドポイントの設計に は向いていない（多分。。。）
7. 6 Netlify Functionsとは Netlify Funtions簡単な仕組み OFUMJGZGVODUJPOT UFTU VTFS FWFOU • ここまでしか指定できない • ${baseUrl}/test/ • ${baseUrl}/user/ • ${baseUrl}/event/ • ${baseUrl}/test/example のようなエンドポイントは ${baseUrl}/test/に集約される。 → 複雑なAPIはコード内で自分で分岐を書く必要がある。 （メソッドの分岐も自分で書く必要がある。） （/user/:user_id/のようなエンドポイントも自分で書く必要がある）
8. 7 Express.jsとは • HTTPリクエストを受け取ってルーティングを実現してくれる Node.jsのフレームワーク （ちゃんと学んでないから間違ってる気しかしない）
9. 8 なにがどうなった？？？ OFUMJGZGVODUJPOT UFTU VTFS FWFOU • Netlify Functionsで立てたエンドポイントのファイル内 にexpress.jsを利用したrouterを作る。 /.netlify/functions/test/example のgetとpostを実装できた
10. 9 なにがどうなった？？？ 比較 前 後
11. 10 まとめ • Netlify Functionsを活用するときがあれば思い出してもらえ ると嬉しいです。 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠