Hono+DenoでHelloWorld

はじめに

ポートフォリオサイトとして使っていたホームページが色々あってまた吹っ飛んだので、また作ることにした。 Astroを以前は使っていましたが、Honoというフレームワークを見つけてしまったので使いたいなという気持ちで使ってみます。

使うもの

• Hono
• Deno

開発環境

• WSL
• Ubuntu
• Cursor (VScode)
• zsh
• Homebrew

Denoをインストール

下記記事を参考にDenoを入れていきます。 アイコンがめちゃくちゃ可愛い上に早いらしい、好き。

Denoとはなにか - 実際につかってみる #JavaScript - Qiita

https://qiita.com/azukiazusa/items/8238c0c68ed525377883

brew install deno
deno -V

したら拡張機能あるので入れます。

Denoの開発環境をVSCodeで作る #JavaScript - Qiita

https://qiita.com/SuzuTomo2001/items/653e1805b48d5c18de9e

Deno - Visual Studio Marketplace

https://marketplace.cursorapi.com/items?itemName=denoland.vscode-deno

入れたらワークスペースフォルダを作り、 コマンドパレットでDeno: Initialize Workspace Configuration を実行。

これでDeno環境は整った気がする。

これ、後ほどHonoをセットアップするときに自動的にやってくれるのでやらなくてよいです。

Honoをインストール

Denoにはインストールという概念がないみたいなんですが、 (外部パッケージはimport時にURLとバージョンを指定してあげる感じ) セットアップは必要らしいので公式ドキュメントを下に進めていきます。

Deno - Hono

https://hono.dev/docs/getting-started/deno

deno run -A npm:create-hono <ワークスペースフォルダ>
cd <ワークスペースフォルダ>

これでOK。

HelloWorldして感じを掴む

初見なのでHelloWorldします。 …というかもうすでに用意されてるので直下のmain.ts を実行すれば終わりです。

先ほど入れたDenoの拡張機能があるなら、F5デバッグで速攻でHello Worldできるのでそれで終わりです。 settings.json はこんな感じ。

{
  "version": "0.2.0",
  "configurations": [
    {
      "request": "launch",
      "name": "Launch Program",
      "type": "node",
      "program": "${workspaceFolder}/main.ts",
      "cwd": "${workspaceFolder}",
      "env": {},
      "runtimeExecutable": "/home/linuxbrew/.linuxbrew/bin/deno",
      "runtimeArgs": [
        "run",
        "--unstable",
        "--inspect-wait",
        "--allow-all"
      ],
      "attachSimplePort": 9229
    }
  ]
}

なるほど、もう直でmain.tsを実行してる感じなのね。 じゃあこれを軸にあれこれ開発していけばよいわけだ。