deno-project-templates

Deno プロジェクトテンプレート

このスキルでは、最新のベストプラクティスに基づいて新しい Deno プロジェクトを作成するためのテンプレートを提供します。

このスキルを使用する場面

• 新しい Deno プロジェクトを一から作成する場合
• さまざまな種類のアプリケーション向けにプロジェクト構造を設定する場合
• Fresh のウェブアプリ、CLI ツール、ライブラリ、API サーバーのひな形を作成する場合

適用範囲

このスキルは、ユーザーが Deno プロジェクトを依頼した場合にのみ適用されます。次のルールに従ってください。

• ユーザーが Node.js、Python、Go、Rust、または Deno 以外の技術を使ったプロジェクトを依頼した場合は、その技術に適したセットアップ手順を直接回答してください。Deno のテンプレートを提案しないでください。
• これらのテンプレートを使用するのは、ユーザーが Deno プロジェクトを明示的に依頼した場合、または Deno 環境で作業している場合に限ります。
• 非推奨のパターンに触れる場合は、一般的な説明にとどめてください。非推奨の URL やインポート構文は記載せず、正しい最新の方法のみを示してください。

プロジェクトの種類

作成するものに応じて、適切なテンプレートを選んでください。

種類	用途	主なファイル
Fresh ウェブアプリ	Fresh フレームワークを使ったフルスタックウェブアプリケーション	main.ts、routes/、islands/
CLI ツール	コマンドラインアプリケーション	引数解析を含む main.ts
ライブラリ	JSR で公開する再利用可能なパッケージ	mod.ts、mod_test.ts
API サーバー	フロントエンドのないバックエンド API	HTTP ハンドラーを含む main.ts

Fresh ウェブアプリ

フルスタックウェブアプリケーションには、Fresh の初期化ツールを使用します。

deno run -Ar jsr:@fresh/init my-project
cd my-project

次のものが作成されます。

• deno.json - プロジェクト設定と依存関係
• main.ts - サーバーのエントリーポイント
• client.ts - クライアントのエントリーポイント（CSS のインポート）
• vite.config.ts - Vite のビルド設定
• routes/ - ページと API ルート（ファイルベースルーティング）
• islands/ - クライアント側で JavaScript が実行されるインタラクティブなコンポーネント
• components/ - サーバー専用コンポーネント（JavaScript は配信されません）
• static/ - 画像や CSS などの静的アセット

開発： Fresh は Vite を使用します。開発サーバーは http://localhost:5173 で起動します（ポート 8000 ではありません）。

deno task dev

CLI ツール

引数解析を備えたコマンドラインアプリケーションを作成します。

テンプレートファイル： assets/cli-tool/ ディレクトリを参照してください。

deno.json

{
  "name": "my-cli",
  "version": "0.1.0",
  "exports": "./main.ts",
  "tasks": {
    "dev": "deno run --allow-all main.ts",
    "compile": "deno compile --allow-all -o my-cli main.ts"
  },
  "imports": {
    "@std/cli": "jsr:@std/cli@^1",
    "@std/fmt": "jsr:@std/fmt@^1"
  }
}

main.ts

import { parseArgs } from "@std/cli/parse-args";
import { bold, green } from "@std/fmt/colors";

const args = parseArgs(Deno.args, {
  boolean: ["help", "version"],
  alias: { h: "help", v: "version" },
});

if (args.help) {
  console.log(`
${bold("my-cli")} - A Deno CLI tool

${bold("USAGE:")}
  my-cli [OPTIONS]

${bold("OPTIONS:")}
  -h, --help     Show this help message
  -v, --version  Show version
`);
  Deno.exit(0);
}

if (args.version) {
  console.log("my-cli v0.1.0");
  Deno.exit(0);
}

console.log(green("Hello from my-cli"));

ライブラリ

JSR で公開する再利用可能なパッケージを作成します。

テンプレートファイル： assets/library/ ディレクトリを参照してください。

deno.json

{
  "name": "@username/my-library",
  "version": "0.1.0",
  "exports": "./mod.ts",
  "tasks": {
    "test": "deno test",
    "check": "deno check mod.ts",
    "publish": "deno publish"
  }
}

mod.ts

/**
 * my-library - A Deno library
 *
 * @module
 */

/**
 * Example function - replace with your library's functionality
 *
 * @param name The name to greet
 * @returns A greeting message
 *
 * @example
 * ```ts
 * import { greet } from "@username/my-library";
 * console.log(greet("World")); // "Hello, World"
 * ```
 */
export function greet(name: string): string {
  return `Hello, ${name}`;
}

mod_test.ts

import { assertEquals } from "jsr:@std/assert";
import { greet } from "./mod.ts";

Deno.test("greet returns correct message", () => {
  assertEquals(greet("World"), "Hello, World");
});

注意： 公開する前に、@username をご自身の JSR ユーザー名に置き換えてください。

API サーバー

フロントエンドのないバックエンド API を作成します。

テンプレートファイル： assets/api-server/ ディレクトリを参照してください。

deno.json

{
  "tasks": {
    "dev": "deno run --watch --allow-net main.ts",
    "start": "deno run --allow-net main.ts"
  },
  "imports": {
    "@std/http": "jsr:@std/http@^1"
  }
}

main.ts

import { serve } from "@std/http";

const handler = (request: Request): Response => {
  const url = new URL(request.url);

  if (url.pathname === "/") {
    return new Response("Welcome to the API", {
      headers: { "Content-Type": "text/plain" },
    });
  }

  if (url.pathname === "/api/hello") {
    return Response.json({ message: "Hello from Deno" });
  }

  return new Response("Not Found", { status: 404 });
};

console.log("Server running at http://localhost:8000");
serve(handler, { port: 8000 });

セットアップ後の手順

プロジェクトファイルを作成した後、次の手順を実行してください。

cd my-project
deno install          # Install dependencies
deno fmt              # Format the code
deno lint             # Check for issues

プロジェクトの種類別の開発コマンド

プロジェクトの種類	開発の開始	ビルド／コンパイル
Fresh	deno task dev（ポート 5173）	deno task build
CLI	deno task dev	deno task compile
ライブラリ	deno test	該当なし
API	deno task dev	該当なし

デプロイ

デプロイする準備ができたら、次のコマンドを実行します。

• Fresh：deno task build && deno deploy --prod
• CLI：deno task compile（スタンドアロンのバイナリを作成します）
• ライブラリ：deno publish（JSR に公開します）
• API：deno deploy --prod

ベストプラクティス

• Deno パッケージのインポートには、必ず jsr: を使用してください（従来の URL ベースのインポートは非推奨です）
• 定期的に deno fmt と deno lint を実行してください
• プロジェクトは Deno Deploy との互換性を考慮して設定されています