動画
この動画のレビューです。
この記事を書いている段階
Expressはまだ実装していない。
Hono
Honoは炎のHonoでRubyみたいに日本人が作ったフレームワークみたいです。
Node.js環境で使用できる超軽量のWebフレームワークで、
TypeScriptやJavaScriptでの開発に適してます。
似たようなものだと
- Express
- Nest.js
などです。
Expressより軽量みたいです。
導入
npm create hono@latest
アプリ名を決めてcloudflare-workersを選択します。
導入後、開発ディレクトリに移動します。
npm install
で依存関係をインストールします。
その後wranglerをインストールします。
npm install -g wrangler
そしてwranglerを起動してサーバーを起動します。
wrangler dev
npm run dev
src/indexの中身が出力されています。
APIの取得
今回はダミーデータを用意して、APIの取得をブラウザでします。
import { Hono } from 'hono'
import { prettyJSON } from 'hono/pretty-json';
const app = new Hono()
//ダミーデータ
let blogPosts = [
{
id: "1",
title: "Blog1",
content: "Blog1 Posts",
},
{
id: "2",
title: "Blog2",
content: "Blog2 Posts",
},
{
id: "3",
title: "Blog3",
content: "Blog2 Posts",
}
];
app.use("*",prettyJSON()); //Pretty JSON
app.get('/', (c) => {
return c.text('Hello Hono!')
})
//APIのデータ取得 cはcontext
app.get("/posts",(c)=> c.json({posts: blogPosts}));
export default app
PrettyJSONと言うものがあるそうです。
Jsonでデータを見やすく整形して表示するためのツールやライブラリのことです。
⚫︎補足
http://localhost:8787/postsでもちゃんとブラウザで表示されます。
特定のidを取得
特定のidを指定して取得していきたいです。以下の記述を追記しました。
//特定のブログを取得したい
app.get("posts/:id",(c) => {
const id = c.req.param("id");
const post = blogPosts.find((p) => p.id === id);
if(post){
return c.json(post);
} else {
return c.json({message: "not found this page "},404);
}
});
-
http://localhost:8787/posts/1?pretty
idの1や2を変えていきます。
PostmanでAPIの確認
知らない人のために言っておくとPostmanはAPIの取得ができるAPIの開発とテストを行うためのツールです。
-
http://localhost:8787/posts
posts?prettyでも整形されるみたいです。
Postmanでpostを作成する
Postmanで4を作成します。
//postの作成
app.post("posts",async(c) => {
const {title,content} = await c.req.json<{
title:string;
content:string;
}>();
const newPost = { id: String(blogPosts.length + 1),title,content };
blogPosts = [...blogPosts,newPost];
return c.json(newPost,201);
});
そしてPostmanで再度確認します。
postが４つになっていました。
ベストプラクティス
リファクタリングのコツが紹介されていました。
ベストプラクティス
日本語訳にすると
より大規模なアプリケーションの構築
Ruby on Railsのようなコントローラ」を作成せずに、より大規模なアプリケーションを構築するにはapp.route()を使用します。アプリケーションに/authorsと/booksのエンドポイントがあり、index.tsからファイルを分離したい場合は、authors.tsとbooks.tsを作成します。
とのことです。
ミドルウェア
ミドルウェアの定義
ハンドラ - レスポンスオブジェクトを返す。呼び出されるハンドラは1つだけ。
ミドルウェア - 何も返さず、await next()で次のミドルウェアに進む。
ミドルウェアは、ハンドラだけでなく、app.useやapp.HTTP_METHODを使って登録することができる。この機能では、パスとメソッドを指定するのが簡単だ。
続きは動画で実装してみてください。
公式ドキュメント