1.Denoとは
Node.jsと同じJavaScript/TypeScriptランタイムです。
生産的で安全な開発環境となることを目的として作られており、ファイル読み込みやインターネット接続がデフォルトでは禁止されているなどの特徴があります。
さらに、パッケージマネージャの機能も持っており、PythonのPIPのような仕組みによりプロジェクト自体のサイズが小さくなっています。
そのほかにも、npmモジュールをサポートしていたり、ECMAScript6を採用していたりと様々な特徴があります。
2.Ultraとは
DenoにおいてReactのSSRを行うフレームワークです。
importMapの導入や、バンドルをしないなどの特徴があります。
3.環境
- Deno 1.29.1
4.プロジェクトの作成
Ultraには開発環境を構築するためのスクリプトが用意されているのでそれを利用してみましょう。
次のコマンドを実行してみましょう。
deno run -A -r https://deno.land/x/ultra/create.ts
プロジェクト名は"first-ultra"、TypeScriptは"y"、それ以外は0で進めます。
終了したら指示に従い、次のコマンドを実行します。
cd first-ultra
deno task dev
ブラウザでhttps://localhost:8000にアクセスして次のように表示されたら成功です。
5.ディレクトリ構成
5-1.public
静的ファイルを置くフォルダです。
public/favicon.icoには、 http://localhost:8000/favicon.ico のようにアクセスが可能です。
5-2.src
ソースコードを置くフォルダです。
5-3.build.ts
ビルド用のファイルです。多分書き換えることはないと思います。
5-4.client.tsx
クライアントサイドのJSXを書くファイルです。
Provider系はここに書くといいと思います。
5-5.deno.json
Denoの設定ファイルです。taskとかの設定ができます。
5-6.deno.lock
パッケージのキャッシュ管理のファイルです。
5-7.importMap.json
Ultraの依存関係を記述したファイルです。
5-8.server.tsx
サーバサイドの処理を書くファイルです。
静的ルーティングやサーバにあるファイルの読み書きなどはここに記述します。
6.カウンタアプリの作成
Reactが使えるので、src/app.tsxを編集して有名なカウンタを作ってみましょう。
import useAsset from "ultra/hooks/use-asset.js"
import { useState } from "react"
export default function App() {
const [count, setCount] = useState(0)
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<title>Counter</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href={useAsset("/favicon.ico")} />
<link rel="stylesheet" href={useAsset("/style.css")} />
</head>
<body>
<main>
<h1>
<span></span>__<span></span>
</h1>
<div>
<button onClick={() => setCount((current) => current - 1)}>-</button>
<h2>{count}</h2>
<button onClick={() => setCount((current) => current + 1)}>+</button>
</div>
</main>
</body>
</html>
)
}
次のように表示が変化したと思います。ボタンを押すと数字が増えたり減ったりします。
7.まとめ
今回はDenoのフレームワークであるUltraについて調べてみました。
node_modulesがないためプロジェクトの容量が小さく済んでいます。
Reactに慣れている人は違和感なく乗り換えられるため、まだまだ目覚ましい発展を繰り返すDenoに触れてみるのもいいかもしれません。