Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
731
Help us understand the problem. What is going on with this article?
@m_mitsuhide

憧れのTypeScriptフルスタック環境がコマンド1発で作れる超軽量フレームワーク「frourio」

今年6月のTypeScript Meetup #4で初公開されたTypeScript製フレームワーク「frourio (フルーリオ)」が今月のアップデートでめちゃくちゃカッコいい感じに仕上がっているので紹介します

frourioはフロントからバックエンド・ORマッパーまでのアプリ全体を一つのTypeScriptとして統合型チェックが可能になるフレームワークです
1つのディレクトリで完結するので一見するとモノリシックのようですが、型で繋がっていること以外はフロントとバックが個別のプロジェクト扱い(それぞれに別のpackage.jsonがある)なのでフロントはVercel、バックエンドはDockerでAWSにデプロイするみたいなことが可能です

image

新しいfrourioの特徴

  1. TypeScript製で最速のフレームワーク
  2. コマンド1発でフロントSPA + RESTサーバー + ORマッパーの環境構築
  3. Vercel製React Hooks「SWR」に対応
  4. 関数にDependency Injectionが可能
  5. ロゴがカワイイ

順番に解説していきます

TypeScript製で最速のフレームワーク

誤解の無いように最初に伝えておくと、実用レベルでNode.jsフレームワークの世界最速はFastifyです
FastifyにもTypeScriptの型定義はありますが、コード自体は普通のJavaScriptで書かれています

TypeScript製フレームワークというカテゴリでは名前のよく似たFoxifyが最速でした
(最後のリリースは2年以上前・・・)

そんなFastifyとFoxifyの間に割って入りNode.js全体で2位、TypeScript製では最速になったのがfrourioです

Framework Version Requests/sec Latency
fastify 3.7.0 64,873 1.45
frourio 0.19.0 64,457 1.46
foxify 0.10.20 57,810 1.64
nest-fastify 7.4.4 57,303 1.65
express 4.17.1 11,972 8.24
nest 7.4.4 10,025 9.86

出典:https://github.com/frouriojs/benchmarks

突然現れたfrourioが爆速なのにはカラクリがあって、サーバーのコアがFastifyなのです
すでにある速いエンジンをラップすれば速くなるのは当たり前・・・

しかしながら、Fastifyを自分で書くよりも高速に動作します
frourioはシンプルな関数を組み合わせる設計になっていることと、ルーティングでオーバーヘッドが発生しないようコンパイル時点で型情報を基に最適化することでFastify本来のパワーを引き出すフレームワークなのです

コマンド1発でフロントSPA + RESTサーバー + ORマッパーの環境構築

※10/25現在、一部のWSL環境ではエラーが発生してインストールができません

Next.jsのcreate-next-app、Nuxt.jsのcreate-nuxt-app相当のコマンドがfrourioにもあるので環境構築は簡単です
Node.js v10系にはないflatMapを使っているのでv12/v14の環境で以下のコマンドを叩いてください

$ npx create-frourio-app
$ yarn create frourio-app

パッケージのダウンロードが終わったら、ターミナルに以下メッセージが表示され自動でブラウザが開きます
※ブラウザが開かない場合は手動でURLを打ち込んでください

open http://localhost:3000 in the browser

無題.png

「Directory name」は新規作成するプロジェクトのディレクトリ名を入力します
package.jsonのnameにも使われる名前です

frourioのコアはデフォルトで選択されているFastifyがおススメです
Expressに比べて日本語情報が少ないものの、開発は活発だし何よりベンチマークが5倍以上速いです
フロントエンドはNext.jsかNuxt.jsの好きな方を選んでください
無題1.png
「Daemon process manager」までの項目についてもお好きなように
無題2.png
ORマッパーはデコレータ不要で型がきっちり付くPrismaがおススメです
今回はちょっと動かしてみるだけなのでデータベースはSQLiteにするといいです
事前インストール不要でプロジェクト内に閉じた開発が出来ます
SQLiteで使う.dbファイルはデフォルトのまま
無題3.png
依存性注入のサンプルコードを見たい場合はJestを選択しCreateボタンを押します
無題4.png
画面にモーダルが現れ、ターミナルでインストールが始まります
無題5.png
インストールが終わるとブラウザが自動でリロードされてNextかNuxtのTodoアプリが表示されます
インストールのあとにビルドの工程があるのでかなり時間がかかります
無題1.png

Vercel製React Hooks「SWR」に対応

インストール時にNext.jsを選択すると、pages/index.tsxに以下のコードがあります
無題6.png
10行目のuseAspidaSWRというのがSWRのラッパーで、引数に渡したapiClient.tasksをキーとして/tasksにGETリクエストを行っています
返り値はSWRの返り値と全く同じです

実はこの引数がfrourioのコントローラと型で静的に繋がっているのです

server/api/tasks/index.jsにこのAPIの型定義があります
server/api以降のディレクトリ名がそのままAPIのURLに対応してます
無題7.png
試しにresBodyの型をstringに変えてみると
無題8.png
Next.js: pages/index.tsx
無題10.png
frourio: server/api/tasks/controller.ts
無題9.png
Next.jsとfrourioの両方で型エラーが出るのがfrourioのスゴイところです

関数にDependency Injectionが可能

frourioはバリデータ以外全て関数で書きます
関数で書かれたコントローラーに依存性注入を行うパターンは一般に確立されていませんがfrourioでは「関数型DI」と呼んでいる方法を採用しています
インストール時にテストフレームワークとしてJestを選択するとfrourioのテストコードが含まれます

以下8行目でprismaオブジェクトを注入したfindAllTaskを定義
あとで依存性注入しやすいようにasでアップキャストしておきます
無題11.png
以下7行目でfindAllTaskとprintをコントローラーに注入
無題12.png
好きなツールを使ってテストを記述
以下7行目のコントローラーはもちろん、8行目のfindAllTaskにも依存性注入が必要なので入れ子にしています
printは依存がないのでアロー関数を直接注入します
無題13.png
実行結果
無題14.png
よく見かけるクラスベースのDIに比べて非常に簡潔に記述出来ていることが伝わるでしょうか

これはvelonaという別のライブラリを取り込んで実現したものです
(正確にはfrourioでDIを行う方法を模索し続けた結果生まれたスピンオフライブラリです)

以下の記事が参考になります
まだクラスへの依存性注入で消耗してるの?TS製の関数型DIヘルパー「velona」のススメ

ロゴがカワイイ

海外のデザイナーに発注して作ってもらったカワイイキャラクターがロゴに使われています
frourio-github-ogp.png
気に入ったらGitHubにスターを押してやって下さい
frourio

参考記事

以下URLでfrourioの日本語解説記事が連載される予定です
frourio でフロントエンドとバックエンドを一緒に静的型検査する
frourio でサクッと API 型定義 & コントローラーを書く

731
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
731
Help us understand the problem. What is going on with this article?