プロジェクトの作成

ローカルでの準備

Hono はコマンド一発でプロジェクトを作成する create-hono という CLI ツールを提供しています。 これを使って爆速でプロジェクトを作成しましょう。

1.プロジェクトの作成

まずはプロジェクトを作成します。

npm create hono hono-sns

ターミナル上に質問が表示されます、以下のように答えてください。

create-hono version 0.3.2
✔ Using target directory … hono-sns
✔ Which template do you want to use? › nodejs

nodejs を選択できていれば成功です。

2.プロジェクトの起動

次に生成されたプロジェクトを少し編集します。

package.json の scripts の中身を以下のように書き換えてください。

{
  "scripts": {
    "dev": "tsx watch src/index.ts"
    "dev": "tsx watch src/index.tsx"
  },
  "dependencies": {
    "@hono/node-server": "^1.8.2",
    "hono": "^4.0.8"
  },
  "devDependencies": {
    "tsx": "^4.7.1"
  }
}

特に Hono のバージョンが 4 系になっていることを確認してください。このサイトでは 4 系を前提にしています。 もし最新バージョンで動作しないなどの問題があれば、バージョンを 4 系に合わせるか私に連絡してください。

そして src/index.ts を src/index.tsx にリネームしてください。 README.md はあっても良いですが別に必要ないので削除してしまって構いません。

3.Gitの初期化

次に Git の初期化を行います。

git init

こうすることで、hono-sns ディレクトリが Git の管理下に置かれます。

これで準備は完了です、以下のコマンドでプロジェクトを起動してみましょう。

npm install
npm run dev

http://localhost:3000 にアクセスして Hello Hono! と表示されていれば成功です。

ここまでのコードはこちらにあります。

GitHubでの準備

Github でこれから作っていくアプリのコードを管理できるようにします。 Github のアカウントがない人は作成し、ログインしてください。

1.リポジトリの作成

Github のトップページにある New ボタン、または

https://repo.new

からリポジトリを作成します、設定はお好みで。

2.リモートリポジトリの追加

作成したリポジトリの URL をコピーして、ローカルのリポジトリにリモートリポジトリとして追加します。 README.md は作成しないようにしておくと楽です。

git remote add origin <リポジトリのURL>

3.コミットとプッシュ

最後にコミットとプッシュを行います。

pwd # hono-sns　の階層にいることを確認
git add .
git commit -m "環境構築"
git branch -M main
git push -u origin main

これで Github にコードがアップロードされました。