Deno でやるフロントエンド

0.9K Views

February 27, 25

#deno #typescript #javascript

スライド概要

Deno を使ってフロントエンドの実装をする環境について、
SPA/MPA、各種フレームワークの対応具合を概観します。

とらのあなラボ

@toranoana_lab

スライド一覧

虎の穴ラボ株式会社は、主にとらのあな関連サービスのシステム開発を専門に担う、エンジニアの会社です。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 1.17MB)

関連スライド

前向きに仕様を調整する「準備」

とらのあなラボ 3K

20231224_Next.jsのApp RouterによるWeb開発について

とらのあなラボ 333

Nagano.rb_18_2024忘年会_プロダクトの_CIにかかる時間を_1_3_にしてみた話

とらのあなラボ 313

Webページの更新を検知するツールを作った話

とらのあなラボ 307

OpenTelemetry in Deno

deno typescript javascript opentelemetry mita.ts

とらのあなラボ 286

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0

ue4 ue5 ue-beginner

エピックゲームズジャパン 1.4M

各ページのテキスト

Denoとは - Node.js 作者のライアンダールが作者現在 Deno Land inc で開発 OSS 特徴 - パフォーマンス - ツール群を含んだ1ファイルで提供される - ランタイム自身で、バージョン管理(上げ下げ)ができる - TSをセットアップ無しで書き始められる - Key-Valueストアをランタイムに持つ - Deno Deployというホスティングサービスを持っているなどなど Copyright (C) 2024 2023 Toranoana Lab Inc. All Rights Reserved.

https://deno.com/

https://deno.com/blog/web-frameworks-on-deno

10.

直近対Next https://github.com/denoland/deno/pull/26720 対Nuxt https://github.com/denoland/deno/pull/27086 現在も、各フレームワークの機能を動かすための改善(=Node.js互換性)の向上が図られている。 Copyright (C) 2024 2023 Toranoana Lab Inc. All Rights Reserved.

11.

シンプル1枚ページ、SPA、MPA > deno run -RWE npm:create-vite-extra@latest deno-vanilla deno-vue deno-react deno-preact deno-lit deno-svelte deno-solid Done. Now run: cd app deno task dev Copyright (C) 2024 2023 Toranoana Lab Inc. All Rights Reserved.

12.

シンプル1枚ページ、SPA、MPA > deno run -RWE npm:create-vite-extra@latest deno-vanilla deno-vue deno-react deno-preact deno-lit deno-svelte deno-solid Done. Now run: cd app deno task dev vite.config.mts 置いて、調整すればマルチページアプリも可能 Copyright (C) 2024 2023 Toranoana Lab Inc. All Rights Reserved.

13.

[beta]

シンプル1枚ページ、SPA、MPA + API
API が欲しければ、つくれば良い。

import { serveDir } from "@std/http";
import { type Context, Hono } from "@hono/hono";
const app = new Hono();

Deno でAPIサーバーを立ててしまう。app.get("/api/get_time", (_c: Context) => {
> deno task build --watch
> deno serve --watch -R server.ts
で両立。

return new Response(new Date().toISOString());
});
app.get("/*", (c: Context) => {
return serveDir(c.req.raw, {
fsRoot: "dist",
});
});
export default {
fetch(req: Request) {
return app.fetch(req);
},
} satisfies Deno.ServeDefaultExport;

Copyright (C) 2024
2023 Toranoana Lab Inc. All Rights Reserved.

14.

[beta]

Deno 2.2 でさらに楽になった
{
"tasks": {
"dev": "deno run -A --unstable --node-modules-dir npm:vite",
"build": "deno run -A --unstable --node-modules-dir npm:vite build",
"preview": "deno run -A --unstable --node-modules-dir npm:vite preview",
"serve": "deno run --allow-net --allow-read https://deno.land/[email protected]/http/file_server.ts dist/",
"server": "deno run --allow-net --allow-read server.ts",
"sync:build": "deno run -A --unstable --node-modules-dir npm:vite build --watch",
"sync:serve": "deno serve -R server.ts"
},
"lint": {
"exclude": ["dist", "node_modules", ".vite"],
"plugins": [
]
}
}

> deno task sync:*
でまとめてビルドとサーバーアプリをまとめて起動できる
Copyright (C) 2024
2023 Toranoana Lab Inc. All Rights Reserved.