Sveltekit と他フレームワーク を組み合わせた話

At: Svelte Japan Offline Meetup #3
By: Maruo.S

Transcript

1. 1/18 Svelte Japan Offline Meetup #3 | December 19, 2024 Sveltekit と他フレームワーク を組み合わせた話 Maruo.S
2. 2/18 ご注意 企業等での利用のされ方などが考慮されていません。 誤りがある可能性があります ( お手数ですが都度ご確認ください ) 。
3. 3/18 自己紹介 Maruo.S 高専 5 年生 (20 歳 ) 趣味 : プログラミング・電子工作・ピアノ
4. 4/18 目次 Svelte(kit) と他のフレームワークを組み合わせる意味 0 1 実際に組み合わせてみる 0 2
5. 5/18 そもそも Sveltekit って 何のためのフレームワーク ?
6. 6/18 Sveltekit の特徴 一通りのルーティング機能 adapter によるデプロイ 方法の幅広い選択肢 データロード・フォームアクション とそれに対する型生成 セキュリティ機能 → とても汎用的なウェブアプリケーション開発フレームワーク etc...
7. 7/18 Sveltekit の特徴と問題点 一通りのルーティング機能 adapter によるデプロイ 方法の幅広い選択肢 データロード・フォームアクション とそれに対する型生成 セキュリティ機能 ディレクトリベースのルーティング → ページ数が多いとディレクトリ数が 多くなってしまう パブリックな API を提供する用途には 最適化されていないため、 CORS 等 の検証に少し癖がある
8. 8/18 ディレクトリベースのルーティング https://qiita.com/marusoftware/items/e11759727c513c24aea1 文句を言っておきながら結局帰ってきてしまいました ....
9. 9/18 セキュリティ機能 Sveltekit を公開 API サーバとして動作させる ※adapter-node を使用 → 確かに https://my.site 上で動くアプリケーションからの POST などは正常に動作 　 ( 当たり前 ) 出典 : https://kit.svelte.jp/ docs/adapter-node
10. 10/18 セキュリティ機能 ( つづき ) 外部からアクセスするとき、もれなく Origin ヘッダが必要 でも、 Origin って ... API を作るような用途に Sveltekit はあまり向いていない ?
11. 11/18 他のフレームワーク (Python/FastAPI) と組み合わせてみる
12. 12/18 Python/FastAPI とは ? Python の REST API フレームワーク OpenAPI 仕様書の生成をエンドポイントを定義した時点 で行ってくれる サーバ側でのバリデーションを自動的に行ってくれる →Openapi-ts を用いて API クライアントを自動的に生成すれば、型情報等 　も保持され、シームレスな開発が可能 ?
13. 13/18 API の作成 FastAPI で API エンドポイントを 定義 クライアント 更新 Openapi-ts で クライアントを 再生成 モデルを 利用して フロント作成 Openapi-ts によ ってクライアントと 同時に生成され るモデルをフロン トでも流用 完成 ! 開発の流れ
14. 14/18 モデルを使用したフロント Bind!
15. 15/18 Openapi-ts でエラーハンドリング
16. 16/18 他フレームワークと組み合わせて できるようになったこと より強力なバリデーション AI などとの接続 フロントエンドの静的化
17. 17/18 最後に • devcontainer を用いた開発環境 • sveltekit+fastapi • ORM • 簡単な認証機能 • Github action でのビルド などを盛り込んだテンプレート
18. 18/18 ご清聴ありがとうございました !