🦕

DenoでサッとPreactを書く

に公開1件
テーマ「フリーテーマ」
TypeScript
Deno
Preact
zennfes2025free
tech

⚠️ 注意 deno bundleを使用するため、Deno2.4.0以降が必要です。
Deno - Bundling

Preact + Deno

Deno環境でdeno bundleコマンドを活用し、シンプルにPreactをブラウザで動かします。
以下の手順は、Deno 2.5.1 の環境で実行して作成しています。

1. プロジェクトの作成

まずはDenoのプロジェクトディレクトリを作成し、初期化します。

mkdir preact-deno
cd preact-deno

deno init

2. 設定ファイルの作成

deno.jsonに、Preactのインポート設定と、開発に必要なタスクを追加します。
まず、以下のコマンドでnpmパッケージをインポートしていきます。

deno add npm:preact npm:preact/hooks

実行すると、deno.jsonファイルが自動的に更新され、preactとpreact/hooksが importsに追加されます。
Deno - add

次に、deno.jsonにcompilerOptionsと、開発・ビルド用のtasksを追加します。完成したdeno.jsonは以下のようになります。

{
  "imports": {
    "preact": "npm:preact@10.20.2",
    "preact/hooks": "npm:preact@10.20.2/hooks"
  },
  "tasks": {
    "dev": "deno run --allow-net --allow-read https://deno.land/std@0.218.2/http/file_server.ts",
    "bundle": "deno bundle -o dist/bundle.js main.tsx"
  },
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}
  • compilerOptions: DenoにJSXをコンパイルする方法を伝えます。
  • tasks: devとbundleという2つのタスクを定義しました。deno task devで開発サーバーを起動し、deno task bundleでJSX構文をブラウザが解釈できるJavaScriptコードに変換して、bundle.jsを生成します。

3. Preactでmain.tsxを作成

以下の内容でmain.tsxファイルを作成します。

import { render } from "preact";
import { useState } from "preact/hooks";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Hello from Preact + Deno</h1>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

render(<App />, document.getElementById("app")!);
  • render関数で画面に表示したいコンポーネントと、レンダリング先のHTML要素を指定しています。
  • 末尾の!は、TypeScriptにおいて「この要素は必ず存在します」ということをコンパイラに伝える非nullアサーション演算子です。これにより、要素が見つからないことによるエラーを防いでいます。

4. index.htmlの作成

index.htmlファイルを作成します。ここでは、バンドルされたJavaScriptファイルを読み込むように設定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8"/>
    <title>Preact + Deno</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./dist/bundle.js"></script>
  </body>
</html>

5. アプリケーションのバンドル

deno task bundleコマンドを実行して、main.tsxをJavaScriptファイルにバンドルします。

deno task bundle

これにより、distディレクトリが作成され、main.tsxがバンドル・トランスパイルされてdist/bundle.jsとして出力されます。

6. 開発サーバーの起動

deno taskコマンドで開発サーバーを起動します。

deno task dev

# 出力例：
Task dev deno run --allow-net --allow-read https://deno.land/std@0.218.2/http/file_server.ts
Listening on http://0.0.0.0:4507/ (http://localhost:4507/)

このコマンドはdeno.jsonに定義されたdevタスクを実行します。
ブラウザでhttp://localhost::4507/にアクセスし、動作を確認してください。

7.ここまでのコード

https://github.com/tamaki24/preact-deno

GitHubで編集を提案

Discussion