最近はFF16にハマってます。意外とあっさりとした進行ですが、重要なシーンの作り込みが半端なくて映画感覚で楽しんでます♪続きが気になって夜更かしばかりの毎日です。どうも、ノッパクンです。
概要
本記事ではTypescriptでGraphQLを開発する際におすすめのフレームワークを紹介していきます。
まず前半でWebアプリケーションフレームワーク、GraphQLフレームワーク、それぞれを紹介していきます。後半ではおすすめのフレームワーク組み合わせ3組を紹介しますので、お楽しみに！
Webアプリケーションフレームワーク編
まず、GraphQLを稼働させるためのベースとなるWebアプリケーションフレームワークを紹介します。
express
Express は、Web アプリケーションとモバイル・アプリケーション向けの一連の堅固な機能を提供する最小限で柔軟な Node.js Web アプリケーション・フレームワークです。
https://expressjs.com/ja/
はじめに紹介するのは、「express」（エクスプレス）です。node.jsが普及してから今まで、ずっと人気が続いている超定番フレームワークになります。
基本的なルーティングの機能から、body-parserやcorsなどのミドルウェアまでを豊富に備えており、安定して人気のあるフレームワークです。
様々な他フレームワークのベースとなっている事も多いため、一度触れてみるのも悪くないでしょう。
NestJS
Nest (NestJS) は、効率的でスケーラブルなNode.jsサーバー側アプリケーションを構築するためのフレームワークです。プログレッシブ JavaScript を使用し、 TypeScriptで構築され完全にサポートされており、OOP (オブジェクト指向プログラミング)、FP (関数型プログラミング)、および FRP (関数型リアクティブ プログラミング) の要素を組み合わせています。
https://nestjs.com/（翻訳）
続いて紹介するのは、「NestJS」（ネストジェーエス）です。近年、急成長をとげおり、その勢いはexpressを追い越してしまいそうです。
プロジェクト作成後に設定不要で使用できるモジュールシステム（組み込みDI）は非常に強力です。また、デフォルトでTypeScriptが使用できるのも魅力的で、リッチな開発体験が味わえるフレームワークです。
Koa
Koa は、Express の背後にあるチームによって設計された新しい Web フレームワークであり、Web アプリケーションと API のより小さく、より表現力豊かで、より堅牢な基盤となることを目指しています。
https://koajs.com/#introduction（翻訳）
次に紹介するのは、「Koa」（コア）です。次世代のWebフレームワークを謳っており、海外でそこそこ人気があります。
ミドルウェアがフレームワークのコア部分から切り離されるなど、expressを軽量化したミニマムで洗練されたフレームワークです。Koaに関連したミドルウェアやライブラリは豊富に備えているため、アプリ構築に困る事は無いでしょう。
日本ではあまり人気が無いのが残念ポイントです。
fastify
fastify は、最小限のオーバーヘッドと強力なプラグイン アーキテクチャで最高の開発者エクスペリエンスを提供することに重点を置いた Web フレームワークです。これは Hapi と Express からインスピレーションを受けており、私たちが知る限り、市内で最も高速な Web フレームワークの 1 つです。
https://fastify.dev/（翻訳）
最後に紹介するのは、「fastify」（ファスティファイ）です。そこそこ人気のあるフレームワークになります。
とにかくスピードを追求したフレームワークです。必要な機能をプラグインという形で追加していきアプリを構築します。Node.jsでモダンな開発をしていきたいがスピードも求めたい！そんなプロジェクトに最適です。
一覧まとめ
GraphQLフレームワーク編
続いて、Webアプリケーション上で動作させるGraphQLフレームワークを紹介します。
Apollo Server
Apollo Server は、 Apollo Clientを含むあらゆる GraphQL クライアントと互換性のある、オープンソースの仕様準拠の GraphQL サーバーです。これは、あらゆるソースからのデータを使用できる、本番環境に対応した自己文書化された GraphQL API を構築するための最良の方法です。
https://www.apollographql.com/docs/apollo-server/（翻訳）
まず、「Apollo Server」（アポロサーバー）です。GraphQL関連のフレームワークとしては一番人気が高いです。
制作元はフロント向けのGraphQLフレームワークなども提供しており、機能が非常に充実したフレームワークです。
Webアプリケーションフレームワークやサーバーレスなど豊富な統合先があります。スタンドアロンサーバー機能（内部的にはexpress）もあり、Webアプリケーションフレームワーク無しで使い始める事ができるため、試しに使ってみるのも良いでしょう。
TypeGraphQL
Node.js の GraphQL API の最新フレームワーク。
クラスとデコレーターを使用して、TypeScript だけでスキーマ、型、およびリゾルバーを作成します。
https://typegraphql.com/（翻訳）
次は、「TypeGraphQL」（タイプグラフキューエル）です。コードファーストのフレームワークとして一定数人気があります。
GraphQLに必要な各機能をデコレータ（＠）を用いて表現するなど、TypeScript前提のフレームワークです。信頼できる情報源をソースコードに閉じ込める事に重きをおいていて、一元管理でGraphQLの管理を楽にするフレームワークです。
基本的に単体で使用する事を想定したフレームワークであり、Webアプリケーションフレームワークは不要です。（一部統合可能）
GraphQL Yoga
簡単なセットアップ、パフォーマンス、優れた開発者エクスペリエンスに焦点を当てた、フル機能の GraphQL サーバー。
https://the-guild.dev/graphql/yoga-server（翻訳）
続いて紹介するのは「GraphQL Yoga」（グラフキューエルヨガ）です。こちらも一定数の人気があり、モダンなフレームワークです。
Apollo Serverよりパフォーマンスが良く機能も充実したフレームワークです。豊富な統合先があり、Apollo Serverと同様に万能で品質の高いフレームワークと言えるでしょう。
mercurius
Mercurius はfastify用のGraphQLアダプターです。
https://mercurius.dev/#/（翻訳）
最後に紹介するのは「mercurius」（メルクリウス）です。あまり有名なフレームワークではありませんが、Webアプリケーションフレームワークの「fastify」との組み合わせが必須なGraphQLフレームワークです。
非常に軽量なフレームワークで、スピードを重視したfastifyとの組み合わせで抜群のパフォーマンスを発揮できます。
一覧まとめ
| フレームワーク | GitHubスター数 | 関連ツール | 統合先（抜粋） |
|---|---|---|---|
 Apollo Server | Apollo Sandbox | ・Express（default） ・AWS Lambda ・Azure Functions ・fastify ・Koa ・NestJS | |
 TypeGraphQL | – | ・NestJS ・mercurius | |
 GraphQL Yoga | graphiql | ・Express ・AWS Lambda ・fastify ・Koa ・NestJS | |
 mercurius | altair graphiql | ・fastify ・NestJS ・TypeGraphQL |
おすすめのフレームワーク組み合わせ3選！
最初のおすすめすは、「fastify」✕「mercurius」です。
Node.jsでGraphQLを実現する場合に、最速の組み合わせとなります。他のフレームワークに比べてあまり人気が無いかもしれませんが、スピードを最も重視するのであればこの組み合わせが一番です。
どのプロジェクトでもアプリケーションのパフォーマンス問題は少ながらず議題にあがります。根本的にフレームワークが遅くて後からではどうにもならない・・・、なんてことを避けたいあたなにピッタリです！
参考リンク↓
次のおすすめすは、「NestJS」✕「express」✕「apollo server」です。
NestJS公式がデフォルトで推奨している構成で、一番安定性のある組み合わせとなります。調べば情報もたくさん出てきますし、とりあえず選択しておいて間違いの無い組み合わせです。
おそらく2023年7月現在、一番使用されている組み合わせなのではないかと思われます！
参考リンク↓
最後は筆者一番のおすすめ！「NestJS」✕「fastify」✕「mercurius」です。
①スピード優先、の組み合わせをNestJSのフレームワークでラップした構成になってます。パフォーマンス的には準速といったところで、ハイパフォーマンスでありながら、NestJSのリッチな開発体験を得る事ができるため、一番のおすすめです！
設定もそこまで大変ではないため、ぜひお試しください！
参考リンク↓
まとめ
様々なフレームワークを比較してみましたが、やはりNestJSの勢いが凄く、今後もドンドン普及していくと思われます。
基本的にどのフレームワークもNestJSに組み込む事ができるため、各フレームワークの使用感を試してみて、お気に入りのフレームワークの組み合わせを見つけてみるのも良いかもしれません。
TypeScriptでGraphQLするならNestJSですね！
気づいたら7月も終わりで、一年がすぎるのは早いですね！積みゲー体質なので、今年はFF16をまったり進めていって年内にクリアできたら良いかなと思いますw それではまた〜！
