Hono+DenoでHelloWorld

はじめに

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

使うもの

• Hono
• Deno

開発環境

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

Deno をインストール

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

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

brew install deno
deno -V

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

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

Deno - Visual Studio Marketplace

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

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

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

Hono をインストール

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

Deno - Hono

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 を実行してる感じなのね。
じゃあこれを軸にあれこれ開発していけばよいわけだ。