【コピペOK】5分で動く！Hono入門で始めるサーバーサイド開発

「サーバーサイド開発って、なんだか難しそう…」
「黒い画面に英語がたくさん出てきて、心が折れそう…」

もしあなたがそう感じているなら、この記事はまさに運命の出会いかもしれません。

この記事では、今話題のWebフレームワーク`「Hono」`を使って、たった5分で動く簡単なブログアプリケーションをゼロから作成する手順を、ハンズオン形式で丁寧に解説します。

理屈は後回し！
まずは「自分の書いたコードで、Webページが動いた！」という感動を、最速で体験してみましょう。

はじめに：サーバーサイドって、実は怖くない！

「サーバーサイド」と聞くと、なんだかとても専門的で、難しそうなイメージがありますよね。

でも、安心してください。
この記事を読み終える頃、あなたは自分自身の手でWebサーバーを動かせるようになっています。

この記事が約束するのは、難しい理論よりも、まず「動いた！」という小さな成功体験です。
その体験が、あなたの`「プログラミング学習」`における、大きな一歩になるはずです。

準備はこれだけ！3分で終わる環境構築

開発を始めるための準備は、本当にあっという間に終わります。

必要なもの

今回の開発で必要なのは`「Node.js」`という、JavaScriptをPC上で動かすためのプログラムだけです。

お使いのPCに`「Node.js」`がインストールされているか、ターミナル（WindowsならコマンドプロンプトやPowerShell）で以下のコマンドを打って確認してみましょう。

node -v

`v18.0.0`のようなバージョン番号が表示されればOKです。
もしコマンドが無いと怒られたら、以下の公式サイトから最新の推奨版（LTS）をインストールしてください。

• Node.js 公式サイト

プロジェクトのセットアップ

次に、ブログアプリのファイルを入れておくための「作業フォルダ」を準備し、`「Hono」`をインストールします。

ターミナルで、以下のコマンドを1行ずつ順番に実行してください。

# 1. 作業フォルダを作って、そこに移動する
mkdir hono-quick-start && cd hono-quick-start

# 2. プロジェクトの初期設定ファイルを作る
npm init -y

# 3. Honoと、TypeScriptを動かすためのツールをインストール
npm install hono @hono/node-server tsx typescript

これで準備は完了です！驚くほど簡単でしょう？

コピペでOK！魔法のコードで「Hello World」

いよいよコーディングです！
まずは、ブラウザに「Hello Hono!」と表示するだけの簡単なプログラムを書いてみましょう。

`hono-quick-start`フォルダの中に、`index.ts`という名前で新しいファイルを作成し、以下のコードをそのままコピーして貼り付けてください。

import { Hono } from 'hono'
import { serve } from '@hono/node-server'

const app = new Hono()

app.get('/', (c) => {
  return c.text('Hello Hono!')
})

serve({
  fetch: app.fetch,
  port: 3000
}, () => {
  console.log('Server is running on http://localhost:3000')
})

コードを貼り付けたら、ターミナルで以下のコマンドを実行します。

npx tsx index.ts

`Server is running on http://localhost:3000`と表示されたら成功です！

ブラウザを開き、アドレスバーに `http://localhost:3000` と入力してください。

「Hello Hono!」と表示されましたか？
おめでとうございます！ これが、あなたの作ったWebサーバーが動いている証拠です！

本番：ブログ記事を表示させてみよう

「Hello World」に成功した勢いで、ブログのメイン機能を作ってしまいましょう。

先ほど作成した`index.ts`の内容をすべて消して、以下のコードに差し替えてください。
今度は少し長いですが、一気にコピー＆ペーストでOKです！

import { Hono } from 'hono'
import { serve } from '@hono/node-server'

// --- ここからブログのコード ---

// 1. 仮のブログ記事データ
const posts = [
  { id: '1', title: 'Honoはすごい！', body: 'Honoは本当に速くて、開発が楽しいです。' },
  { id: '2', title: 'ブログの作り方', body: 'Honoを使えば、簡単なブログならすぐに作れます。' },
];

const app = new Hono()

// 2. 記事一覧ページ ( http://localhost:3000/posts )
app.get('/posts', (c) => {
  return c.html(
    `<h1>記事一覧</h1>
     <ul>
       ${posts.map((post) => `<li><a href="/posts/${post.id}">${post.title}</a></li>`).join('')}
     </ul>`
  )
})

// 3. 記事詳細ページ (例: http://localhost:3000/posts/1 )
app.get('/posts/:id', (c) => {
  const id = c.req.param('id')
  const post = posts.find((p) => p.id === id)

  if (!post) {
    return c.text('記事が見つかりません')
  }

  return c.html(
    `<h1>${post.title}</h1>
     <p>${post.body}</p>
     <hr>
     <a href="/posts">記事一覧へ戻る</a>`
  )
})

// --- ここまでブログのコード ---

serve({
  fetch: app.fetch,
  port: 3000
}, () => {
  console.log('Server is running on http://localhost:3000')
})

コードを貼り替えたら、もう一度ターミナルでサーバーを起動します。（もし動いたままなら `Ctrl + C` で一度止めてから再実行してください）

npx tsx index.ts

さあ、ブラウザで `http://localhost:3000/posts` にアクセスしてみてください！

どうでしょうか？
「記事一覧」と表示され、2つの記事タイトルがリンクになっていれば大成功です！
タイトルをクリックすれば、記事の本文も読めるはずです。

まとめ：ここがあなたのスタートライン

チュートリアル、お疲れ様でした！
あなたは今、`「Hono」`を使ってブログの「記事一覧」と「記事詳細」を表示する機能を、自分自身の手で作り上げました。

今回体験した、

• URLに応じて処理を振り分けること（ルーティング）

• 用意したデータをHTMLとして表示すること

は、`「サーバーサイド開発」`の最も基本的で、最も重要な仕組みです。

もちろん、これはゴールではなく、あなたのWeb開発者としてのキャリアの始まりです。
ここから、さらにアプリケーションを良くしていくためのアイデアは無限にあります。

• 記事を投稿する機能を追加してみる

• CSSを使って、見た目をオシャレにしてみる

• 本物のデータベースに接続してみる

難しそうに聞こえるかもしれませんが、今日の「できた！」という体験を思い出してください。
今のあなたなら、一つ一つ調べながらきっと実装できるはずです。

この記事が、あなたの「モノづくりの楽しさ」を発見するきっかけになれば、とても嬉しく思います。

最後に、あなたに質問です！

今回、`「Hono」`を触ってみて、どんな印象を持ちましたか？
「意外と簡単だった！」「ここがよく分からなかった…」など、ぜひあなたの率直な感想をコメントで教えてください！

#Hono #Nodejs #プログラミング初心者 #サーバーサイド #駆け出しエンジニアと繋がりたい

実務で使える強力な自動化の例として、ずんだもん動画の全自動生成システムを公開しました。
完全コピペでシステム構築ができるこの記事に興味がある方はどうぞ。