トップページの作成

さて、それでは早速実際に Web アプリケーションを開発していきましょう。

まずは最初にアクセスされるトップページを作成します。

HTMLを返す

今 http://localhost:3000 にアクセスすると　Hello Hono! と表示されていると思います。

これは HTML ではなくただのテキストをレスポンスとしてブラウザに返しているだけです。

では、HTML を返すようにしてみましょう。

まずは src/index.tsx を以下のように編集してください。

tsx

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

そして、npm run dev を実行してください。

http://localhost:3000 にアクセスすると Hello Hono! と表示されているはずです。先ほどと違って、<h1> タグで囲まれた Hello Hono! が HTML として解釈されて表示されているので、文字が大きく表示されているはずです。

Hello Hono!が大きく表示されているブラウザの画面

c.html と c.text の違い

ブラウザはサーバーから送られてきたデータがなんのデータかを判別するのに、HTTP レスポンスヘッダーの Content-Type という項目を参照します。 Content-Type には送られてきたデータの種類を表す MIME タイプが書かれています。例えば

MIMEタイプ	説明
text/plain	テキスト
text/html	HTML
image/png	PNG画像
image/jpeg	JPEG画像
application/json	JSON

などがあります。

c.text は Content-Type を text/plain に設定して文字列を送信する関数です。対して c.html は Content-Type を text/html に設定して文字列を送信する関数です。

そのため、c.text で送信した文字列はブラウザがテキストとして解釈し、c.html で送信した文字列はブラウザが HTML として解釈します。

もし感覚的に理解したい人は先ほどの c.html('<h1>Hello Hono!</h1>') を c.text('<h1>Hello Hono!</h1>') に変更してみてください。

http://localhost:3000 にアクセスすると <h1>Hello Hono!</h1> と表示されているはずです。ブラウザは HTML であることに気づかないので、<h1> タグごとただのテキストとして表示してしまいます。

app.get とは

ブラウザは URL を入力してアクセスすると GET リクエストというものをサーバーに送信します。 GET リクエストの他にもリクエストには POST や PUT、DELETE などがあり、それぞれ異なる意味を持っています。これらを HTTP メソッドと呼びます。

リクエスト	意味
GET	取得
POST	作成
PUT	更新
DELETE	削除
のように、サーバーに対するデーターの操作の種類をメソッドによって区別しています。
`app.get` は `GET` リクエストを受け取った時に実行される関数を登録する関数です。
もちろん他にもHonoでは `app.post` や `app.put`、`app.delete` などいろいろなHTTPメソッドに対応した関数を登録することができます。

app.get('/', (c) => {
  return c.text('GET /')
})
app.post('/', (c) => {
  return c.text('POST /')
})

curl というコマンドを使うと、ブラウザを使わずにターミナルから HTTP リクエストを送信することができます。

bash

curl -X GET http://localhost:3000
# GET /
curl -X POST http://localhost:3000
# POST /

-X オプションで HTTP メソッドを指定することができます。このようにして HTTP メソッドに対する関数が正しく実行されていることを確認してみてください。

JSXを返す

さて、HTML を返すことができたので、次は JSX を返してみましょう。

::: tips JSX とは JSX は HTML を JS の世界で便利に書くために作られた JavaScript の拡張構文で、JS のコードの中に HTML のような記法で書くことができるちょっと特殊なものです。

トリッキーではありますが、この JSX が今の Web アプリケーション開発においては一番主流なので、ぜひ使いこなせるようになってください。 :::

まずは src/index.tsx を以下のように編集してください。

tsx

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

文字列で囲わなくてもそのまま HTML のように書くことができます。

そして、npm run dev を実行してください。

先ほど環境構築のセクションで src/index.ts を src/index.tsx にリネームしたのを覚えていますか？ JSX を使うためには JavaScript なら .js の代わりに .jsx、TypeScript なら .ts の代わりに .tsx を使う必要があります。

http://localhost:3000 にアクセスすると Hello Hono! と表示されているはずです。

実際に1つのページを具体的に作ってみる

さて、ここまでで HTML を JSX を用いて返すことができるようになりました。

それでは実際に 1 つのページを作ってみましょう。

まずは src/index.tsx を以下のように編集してください。

tsx

app.get('/', (c) => {
  return c.html(<h1>Hello Hono!</h1>)　
  return c.html( 
    <html lang="ja">
      <head>
        <title>トップページ | Hono SNS</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </head>
      <body>
        <main>
          <h1>Hello Hono!</h1>
          <p>これはHonoのトップページです。</p>
        </main>
      </body>
    </html> 
  ) 
})

いつものサイトの構成のように <head> と <body> を追加して、サイトに不可欠な情報を足してみました。

そして、npm run dev を実行してください。

http://localhost:3000 にアクセスすると以下のような画面が表示されているはずです。

トップページの画面

これで一旦トップページの作成を終わります。ここまでのコードはこちらにあります。

トップページの作成 ​

HTMLを返す ​

JSXを返す ​

実際に1つのページを具体的に作ってみる ​

トップページの作成

HTMLを返す

JSXを返す

実際に1つのページを具体的に作ってみる