NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発
2K Views
May 21, 22
スライド概要
C# Tokyo のフリーテーマLT会で公開。
1981年、東京生まれ。ロスジェネ。修士（史学）。 カウボーイエンジニアの気があるITエンジニア。C#、Python、Ruby、JavaScript/TypeScript、OSS界隈に生息。 ほかにもライター、アマチュアカメラマンなど。 同人評論サークル「恢徳堂」主筆。発達障がい当事者。 MBTI診断ではENFPタイプ。一応正教会信徒。いわゆるオタク。 「個」が尊重される、持続可能で公正な社会を目指す。 モットー：【自由・平等・寛容・生存・環境】
関連スライド
各ページのテキスト
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント と で OpenAPI をつなぐ ASP.NET 開発 NSwag aspida Web API + Next.js 【メタバース】フリーテーマ LT 会 C# Tokyo イベント in 2022-05-21 Iosif Takakura @huideyeren この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 1
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント お前誰よ？ 年生まれの就職氷河期世代。 普段は横浜で Windows でC# (ASP.NET MVC) と SQL を書いている 社会人になってプログラミングを始めた 発達障害(ADHD & 自閉スペクトラム障害)当事者 でも「やさしさ」は忘れたくない いろいろと「オタク」 評論サークル「恢徳堂」主筆 その他、写真や鉄道・国内旅行、 TRPG やそれに近いWeb ゲームも好き 本日 3D アバターとボイスチェンジャーを使用中 1981 この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 2
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント はじめに この発表は .NET Framework 前提 だよ .NET Core でも .NET でもないよ…… なお、 Node.js と TypeScript の話題も出てくるよ しかも Java も要るよ JRE でも何とかなる……よ、多分…… 初めて Web API 開発をしたのでいろいろまずいところあるかも…… この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 3
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント 開発のきっかけ 社内でお試しに作ってみた蔵書管理アプリ 社内の課題を解決するために作ってみる 要件定義・設計から開発までぜんぶ自分一人で行う 使えるなら実際に使う 技術スタックは今あるもの前提 ほぼ ASP.NET MVC で作ってほしいとのこと Node.js でフロントエンド作れないのはもどかしかった この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 4
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント Node.js が使えるようになった 突如 Node.js が導入された 長年粘った成果 実案件でなければ学習で使ってよい まだ実案件で使うには厳しそう…… この機会に蔵書管理アプリに使ってみることに API設計ノウハウなんてなかった この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 5
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント 作った 作っているアプリ 社内の蔵書管理用アプリ 認証無しで貸し借りできる状態 ユーザーIDを手入力する デザイン：ぼろぼろ 将来的にはリクエスト機能など追加予定 この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 6
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント 選択したアーキテクチャ フロントエンド: Next.js Static Site Generation を採用 ホスト先は IIS バックエンド: ASP.NET Web API フロントエンドとは別のポートにデプロイ 純粋なAPIとして開発 もちろんホスト先はIIS 使うのは .NET Framework で…… この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 7
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント ここで問題になるのがフロントエンドとバックエンドの繋ぎ込み に任せたい フロントエンド側で全て対応したい ということで以下の構成を使用 フロントエンド: axios + aspida バックエンド: NSwag NSwag で生成した JSON から API を生成する作戦を採用 でも最初は API 定義は書くよ OpenAPI Specification この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 8
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント aspida って何？ さんによる、型でガードされた REST API を用意してくれるツール axios のほかにも fetch API や SWR にも対応 OpenAPI から TypeScript の型定義を生成してくれるツールも用意 frourio というピュア TypeScript なフレームワームもある Solufa この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 9
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント バックエンドとフロントエンドを分ける意味あるの？ 大いにある、と思いたい フロントエンドの変更の影響がバックエンドに及びにくい フロントエンド側だけ開発を進めることも可能 データベースから設計していく方法に対し設計しやすい モデルは開発中にあらかた定まる モノリシックで開発するよりフロントエンド側の技術制限が少ない 静的ファイルとしてサーバーにアップできれば問題ない フロントエンドのノウハウを吸収可能 開発が動き出したら素早く開発できた この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 10
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント バックエンドとフロントエンドを分けて苦労した点は？ このアーキテクチャの有効性を説明するのが大変だった Node.js を入れてもらうのに2年ぐらいの説得が必要 Node.js を実戦投入したのはよいがノウハウが社内にない 開拓者精神で突き進むしかない まだ主要案件で使えない 検証が間に合っていないらしい コマンドライン、とっつきにくい…… UNIXで鍛えられた私だからまだなんとかなった 認証はおそらく大変になると思われる この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 11
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント API と フロントエンドの繋ぎ方 in C# 1. OpenAPI Specification i. Swashbuckle ii. NSwag 2. GraphQL さんによる C# 大統一理論ツール群を使う 4. 型定義だけ作って何とかする i. neno さんによる Tapper を使うというアプローチ ii. OpenAPI Specification からクライアントライブラリを生成する → 結局 NSwag を使うことに…… 3. gRPC → neuecc この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 12
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント なぜ NSwag を選んだのか じゃなかった から…… .NET なら Swashbuckle が内蔵されているけど…… 2. .NET Framework 向けの Swashbuckle はちょっと…… Swagger UI のバージョンが古かった…… 3. .NET Framework 向け Swashbackle は2018年で更新が止まっていたため…… NSwag の方は更新が続いている 1. .NET この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 13
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント なぜ NSwag でクライアントまで作らなかったのか アプリの形でツールを入れられなかった セキュリティの問題があるから…… クライアントの生成は TypeScript 側で行いたかった 将来的にサーバーサイドが何に変わっても良いように…… neno さん曰く、NSwagから生成されたコードは名前衝突がひどいらしい このことはaspidaを使い始めてから知った Python の FastAPI とかにサーバーサイドが変わっても同じ手段でいける FastAPI も OpenAPI Specification 生成可能 この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 14
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント なぜ gRPC や GraphQL 、 Tapper を使わなかったのか だから！ や を使うには .NET Core 系じゃないと厳しいと思う 使えるのなら .NET 6 使いたい…… ちなみに Tapper を知ったのは開発を始めてから Tapper は型定義の生成のみでクライアントを生成しない クライアントを生成してくれるのなら乗り換えてたかも…… 結局、OpenAPI と心中する覚悟ができていた FastAPI に触れていたおかげでこの手が使えると思った .NET Framework gRPC GraphQL この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 15
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント 実際のやりかた まず OpenAPI Specification を YAML で書く 2. OpenAPI Generator で ASP.NET Core 2.1 向けの コードを生成する Classic ASP.NET のコードは生成できないので…… 3. ASP.NET on .NET Framework にモデルを移植する エラーが出たら丁寧に直していく 無論、手書きで…… 4. サーバーサイドロジックは自力で書く 5. APIがあらかたできたら aspida で TypeScript を生成する 1. この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 16
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント まとめ の型問題は基本 TypeScript 側に寄せる サーバーサイドが変わっても吸収できる……と思いたい .NET Framework で OpenAPI Specification を生成するなら NSwag を使うとよい OpenAPI 起点にするといろいろと捗る API を生成してくれる aspida が便利 API この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 17
NSwag と aspida で OpenAPI をつなぐ ASP.NET Web API + Next.js 開発 in 【メタバース】フリーテーマ LT 会 C# Tokyo イベント ご清聴ありがとうございました この作品はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスの下に提供されています。 18