mcpField
D
deno-frontend

deno-frontend

github.com/denoland開発102412 回インストール13 週間前に更新
リポジトリ

deno-frontend について

既存または新規プロジェクトでフロントエンドを開発する人向けの Deno スキルです。一般的な npm フレームワークと Fresh を扱い、それぞれに沿った手順を示します。

主な機能

  1. 01Deno で npm フロントエンドフレームワークを利用
  2. 02Deno コマンドによるプロジェクト作成と実行
  3. 03アイランドアーキテクチャで Fresh アプリを構築
  4. 04Fresh のルートとコンポーネントの案内
  5. 05Fresh のバージョン移行情報

活用シーン

  1. 01Deno でフロントエンドプロジェクトを開始
  2. 02Deno で React または Svelte プロジェクトを実行
  3. 03Fresh でサーバーサイドレンダリングページを構築

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/denoland/skills --skill deno-frontend

インストール後、Claude Code で/deno-frontendを入力して読み込まれたか確認します。

同梱ファイルreferences/FRESH_MIGRATION.mdreferences/FRESH.md

詳細

Deno でのフロントエンド開発

方法は 2 つあります。プロジェクトですでに使われているものに合わせて選んでください。

一般的な npm フレームワーク — 通常はこちらを選びます

Deno では、React、Vue、Svelte、Solid、Vite、Astro、Next.js、Nuxt、SvelteKit、Remix、SolidStart といった通常のフロントエンドエコシステムを利用できます。移植は不要で、Deno 固有の書き方もありません。

deno create vite my-app     # or astro, next, nuxt, svelte…
cd my-app
deno install
deno task dev

deno create は npm create に相当します。deno install は package.json を読み込みます。deno task <script> は package.json のスクリプトを実行します。違いはそれだけです。

それ以外はすべて、各フレームワークの公式ドキュメントに従ってください — ルーティング、コンポーネント、データ読み込み、設定はフレームワークの領分であり、Deno の領分ではありません。Deno 風の API バリエーションを独自に作らないでください。また、React や Svelte のプロジェクトで Fresh のパターンを使わないでください。

知っておくとよいことは次のとおりです。

  • "nodeModulesDir": "auto" を deno.json に設定する必要があるフレームワークもあります。Next.js では必要です。
  • 開発サーバーにも権限が適用されるため、フレームワークのタスクでは通常 -A が必要です。
  • デプロイについては、フレームワークごとのビルドコマンドとプリセットをまとめた deno-deploy スキルを参照してください。

Fresh — Deno 独自のフレームワーク

Fresh は、サーバーサイドレンダリングを行い、クライアント側の JavaScript を最小限に抑えたい、新しい Deno ファーストのプロジェクトに適しています。アイランドアーキテクチャを採用しており、ページはサーバーでレンダリングされ、JavaScript が配信されるのは islands/ 内のコンポーネントだけです。

deno run -Ar jsr:@fresh/init
cd my-project
deno task dev                # http://localhost:5173

Fresh のプロジェクトは Vite ベースです。ビルドには vite.config.ts、サーバーには main.ts、ファイルベースのルートには routes/、アイランドには islands/、サーバー専用コンポーネントには components/ を使います。コンポーネントモデルは Preact が提供し、状態管理にはシグナルを使います。

// islands/Counter.tsx — interactive, ships JS
import { useSignal } from "@preact/signals";

export default function Counter() {
  const count = useSignal(0);
  return <button onClick={() => count.value++}>Count: {count.value}</button>;
}

重要なルールは 3 つです。

  1. アイランドは JavaScript を配信するため、小さく保ち、それ以外はすべて components/ に置いてください。
  2. アイランドのプロパティはシリアライズ可能でなければなりません。関数は渡せません。
  3. ハンドラーは単一の (ctx) パラメーターを受け取ります。

ルート、ハンドラー、define ヘルパー、ミドルウェア、アイランド、シグナル、Tailwind については、references/FRESH.md を読み込んでください。

"fresh" からインポートする Fresh 2.x を使ってください。既存の 1.x プロジェクト、または 2.0.0-alpha.* リリースに固定されたプロジェクトについては、references/FRESH_MIGRATION.md を参照してください。

さらに詳しく

  • https://fresh.deno.dev/docs — Fresh のドキュメント
  • references/FRESH.md — Fresh 2.x のパターンを詳しく解説
  • references/FRESH_MIGRATION.md — Fresh 1.x およびアルファ版からの移行

コメント

Markdown 対応