Next.js LearnのアプリでDB連携してる箇所をAPI化して、Swagger化してみた

Transcript

1. Next.js Learn のアプリでDB 連携 してる箇所をAPI 化して、 Swagger 化してみた Shima Tech Hub #1 # しまてく @takarake
2. 🗣 アジェンダ 1️⃣ 自己紹介 2️⃣ なんでNext.js なの❓ 3️⃣ どうやったの❓ 4️⃣ 感想🤔
3. 1️⃣ 自己紹介
4. 1️⃣ 自己紹介( 真面目用)
5. 1️⃣ 自己紹介(X @takarake)
6. 2️⃣ なんでNext.js な の❓
7. その前に、このQR コードを 読んでください📱
8. 「バッチリですぜ❗👍」と回答された方はどの点でモダンな開発をされてますか❓ 13 votes - 13 participants
9. 皆さん、ご回答ありがとうございました❗
10. 話を戻しまして、なんでNext.js なの❓
11. 開発チームの取り組みの紹介と挑戦した( してる) こと
12. 2021 年 💪 若手向け基礎インフラスキル育成 2022 年 💪 AWS SAA 取得 ＆ チーム関係性強化
13. 2023 年 💪 ノウハウ共有促進 & 組織発信力強化 2024 年 💪 組織体制強化 & メンター育成
14. 現在の課題 💦 若手メンバーも増えたが、まだまだ体制強化が必要​ 開発相談が増加中 🆙 💦 既存メンバーの言語スキルが異なり、育成が属人化​ Ruby 、PHP 、Node.js 、Python など様々
15. 取り組みに至った考え方 🤔 体制強化のため、メンター不足を解消したい​ 🤔 チーム全体で共通技術を習得し、育成も負荷分散できるようにしよう
16. 2024 年の今、モダンな技術ってなんだ❓🤔
17. ウチの開発案件にマッチしてる技術ってなんだ❓🤔
18. 調査の結果、下記のような理由から Next.js を選択🙇‍♀ ゼロコンフィグ機能 最低限の設定を自動でやってくれる ファイルベースルーティング機能 開発にあたり、ルーティング設定が不要でわかりやすい フロントもバックエンドも両方対応でき、API 作成も簡単 利用技術が統一可能 Netflix でも導入されたり、継続して開発が進行 Vercel が メンテナでもあり、今後も進化が期待できる CyberAgent グループでもよく利用され、ノウハウ共有を受けやすい 高度な技術ノウハウ共有も受けられ、育成にも活かせる ※ 弊社では 0 -> 1 で開発する案件が多いことやフロントとバックエンドと複雑化せず、リリース後に引き継ぎが しやすいことも考慮して選定
19. 今年度で上級者を目指す🚀
20. Next.js Learn をやり、色々いじる👨‍💻
21. スマホやデスクトップアプリ化してみたり Next.js Learn のアプリをデスクトップアプリ化とスマホアプリ化してみた #iOS - Qiita
22. コンテナ化してみたり Next.js のコンテナ化( 開発環境にも、本番環境にも対応する) #Docker - Qiita
23. ということで、Swagger 化もやってみた👍
24. 3️⃣ どうやったの❓
25. 3️⃣ どうやったの❓ 1. Next.js Learn が完了済みの状態からAPI 化する Next.js 14 のため、App Router でのAPI 化(Routing: Route Handlers | Next.js を利用) Swagger 化のため、NPM モジュールインストール（差分はこちら👇余計なものも入ってますが、、、、 💦）
26. 3️⃣ どうやったの❓ 2. インストールした next-swagger-doc のGithub のREADME に従い、設定を行う Next.js 13 以降に関しての対応方法が記載されていてハートフル💖 jellydn/next-swagger-doc ` `
27. 3️⃣ どうやったの❓ 3. 下記のように、 app/api/hello/route.ts 内でSwagger Comment を記載する感じ そのため、yaml ファイルは不要で作れる ` ` 1 2 // file: app/api/hello/route.ts 3 /** 4 * @swagger 5 * /api/hello: 6 * get: 7 * description: Returns the hello world 8 * responses: 9 * 200: 10 * description: Hello World! 11 */ 12 export async function GET(_request: Request) { 13 // Do whatever you want 14 return new Response('Hello World!', { 15 status: 200, 16 }); 17 }
28. 3️⃣ どうやったの❓ 4. Next.js Learn のアプリを起動し、Swagger UI を確認 http://localhost:3000/api-doc にアクセスすると、Swagger UI が表示される ` `
29. 3️⃣ どうやったの❓ 5. ここでちょっとした問題発生💦 Next.js Learn のアプリでAPI 化はされてるが、Swagger Comment 自分で書くの❓💦 API できてるのに、、、、自動化できないのかなー🤔
30. 3️⃣ どうやったの❓ 5. ここでちょっとした問題発生💦 Next.js Learn のアプリでAPI 化はされてるが、Swagger Comment 自分で書くの❓💦 API できてるのに、、、、自動化できないのかなー🤔 ・・・・・・そこに救世主現る❗👀
31. 3️⃣ どうやったの❓ 6. cURL to Swagger 皆さんすでにご存知かもしれませんが、、、、💦 cURL コマンドとその結果からSwagger 形式に変換してくれる👍
32. 3️⃣ どうやったの❓ 7. あとはAPI 化したものをCURL して、cURL to Swagger を使ってSwagger Comment としてコピペするだけ👍 8. ちゃーんとVercel へもデプロイして、Swagger UI を確認👍 Next Swagger API Example
33. 4️⃣ 感想🤔
34. 4️⃣ 感想🤔 結構簡単にSwagger 化できた👍 利用したGithub リポジトリはこちら 本当はOpenAPI の定義から自動テストを行いたかった💦 k1LoW/runn を利用してのテスト作成自動化を考えてた🤔 次はGithub Pages 化かなー😅😅😅
35. ご静聴ありがとうございました❗