Honoとは何か(初心者向き)

# 動画
この動画のレビューです。

https://www.youtube.com/watch?v=ZXBbmU9Z1cg

# この記事を書いている段階
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
```
![スクリーンショット 2024-10-27 19.26.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/1bf178e0-6fa9-9d86-c03d-ccfab9930752.png)

***src/indexの中身が出力***されています。


# APIの取得
今回はダミーデータを用意して、APIの取得をブラウザでします。

```index.ts
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?pretty

<img width="1440" alt="スクリーンショット 2024-10-28 21 23 42" src="https://github.com/user-attachments/assets/a4d78853-2a7b-4ad3-a593-a70dcd9517e7">

⚫︎***補足***
```http://localhost:8787/posts```でもちゃんとブラウザで表示されます。

# 特定のidを取得
特定のidを指定して取得していきたいです。以下の記述を追記しました。
```index.ts
//特定のブログを取得したい
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を変えていきます。

![スクリーンショット 2024-10-28 21.56.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/d47c7f2a-6b00-4c5c-5690-2bf21bedf6e2.png)


# PostmanでAPIの確認
知らない人のために言っておくと***PostmanはAPIの取得ができるAPIの開発とテストを行うためのツール***です。


- http://localhost:8787
![スクリーンショット 2024-10-28 22.16.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/5e48d3a0-6248-f96d-5357-9fc141525264.png)

- http://localhost:8787/posts
posts?prettyでも整形されるみたいです。
![スクリーンショット 2024-10-28 22.21.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/f220661f-8357-d874-76b5-167c1a5b5a55.png)

# Postmanでpostを作成する
Postmanで4を作成します。
```index.ts
//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);
});
```

![スクリーンショット 2024-10-28 22.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/b8ebf570-36b8-53db-d3b3-72df52b79a01.png)

そしてPostmanで再度確認します。

![スクリーンショット 2024-10-28 22.37.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748789/94d40c6a-cd82-2a21-0c34-b63c327ed21d.png)

postが４つになっていました。

# ベストプラクティス
リファクタリングのコツが紹介されていました。

- ```ベストプラクティス```

https://hono.dev/docs/guides/best-practices

日本語訳にすると

> より大規模なアプリケーションの構築
Ruby on Railsのようなコントローラ」を作成せずに、より大規模なアプリケーションを構築するにはapp.route()を使用します。アプリケーションに/authorsと/booksのエンドポイントがあり、index.tsからファイルを分離したい場合は、authors.tsとbooks.tsを作成します。

とのことです。

- ```ミドルウェア```

https://hono.dev/docs/guides/middleware

>ミドルウェアの定義
ハンドラ - レスポンスオブジェクトを返す。呼び出されるハンドラは1つだけ。
ミドルウェア - 何も返さず、await next()で次のミドルウェアに進む。
ミドルウェアは、ハンドラだけでなく、app.useやapp.HTTP_METHODを使って登録することができる。この機能では、パスとメソッドを指定するのが簡単だ。


続きは動画で実装してみてください。


# 公式ドキュメント

https://hono.dev/