SvelteKit

3ステップで試す

1. 1

   公式作成ツールで最小プロジェクトを作る

   Node.js 22.17以上とnpmが必要です。固定したsv 1.1.0でJavaScriptプロジェクトを作ります。

   node -e 'const [a,b]=process.versions.node.split(".").map(Number);if(a<22||(a===22&&b<17))process.exit(1)' && npx --yes sv@1.1.0 create sveltekit-demo --template minimal --types jsdoc --no-add-ons --install npm && cd sveltekit-demoコピー
2. 2

   フォームアクションを追加してビルドする

   POSTされたnameをサーバー側で読み、画面へ挨拶を返す経路を追加します。

   printf '%s\n' "export const actions = { default: async ({ request }) => { const data = await request.formData(); return { message: 'Hello, ' + data.get('name') + '!' }; } };" > src/routes/+page.server.js && printf '%s\n' '<script>let { form } = $props();</script>' '<form method="POST"><input name="name" value="Codex"><button>Greet</button></form>' '{#if form?.message}<p>{form.message}</p>{/if}' > src/routes/+page.svelte && npm run buildコピー
3. 3

   localhostで送信と停止を確認する

   ローカル専用ポートへCodexを送信して挨拶を確認します。起動したプロセスを停止し、そのポートへ接続できなくなったことを確認します。

   ( set -eu; port=$(node -e 'const n=require("node:net").createServer();n.listen(0,"127.0.0.1",()=>{console.log(n.address().port);n.close()})'); pid=""; cleanup(){ if [ -n "$pid" ];then kill "$pid" 2>/dev/null||true;wait "$pid" 2>/dev/null||true;fi;}; trap cleanup EXIT HUP INT TERM; node ./node_modules/vite/bin/vite.js dev --host 127.0.0.1 --port "$port" --strictPort > vite.log 2>&1 & pid=$!; i=0;until curl -fsS --max-time 1 "http://127.0.0.1:$port/" >/dev/null;do i=$((i+1));[ "$i" -lt 20 ];sleep .25;done; curl -fsS --max-time 3 -X POST -H 'Content-Type: application/x-www-form-urlencoded' --data 'name=Codex' "http://127.0.0.1:$port/" | grep -F 'Hello, Codex!';cleanup;pid="";node -e 'const s=require("node:net").createConnection({host:"127.0.0.1",port:+process.argv[1]});s.setTimeout(1000);s.once("connect",()=>process.exit(1));s.once("timeout",()=>process.exit(1));s.once("error",x=>process.exit(x.code==="ECONNREFUSED"?0:1))' "$port";trap - EXIT HUP INT TERM )コピー

Built with

• JavaScript
• Svelte

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Next.js143,179 Stars

  共通タグ 1件 · 共通カテゴリ 1件 · 同じ言語

  Reactのrouting・rendering・server機能をまとめてフルスタックWebアプリを構築する

  JavaScript
• Express69,520 Stars

  共通タグ 1件 · 共通カテゴリ 1件 · 同じ言語

  routingとmiddlewareを薄いHTTP layerとして組み合わせ、Node.js API/Web backendを構築するframework

  JavaScript
• Fastify37,232 Stars

  共通タグ 1件 · 共通カテゴリ 1件 · 同じ言語

  Node.js向けWeb/APIサーバーを低オーバーヘッド、プラグイン、JSON Schema検証、Pinoログで構築する

  JavaScript
• SortableJS31,186 Stars

  共通タグ 1件 · 共通カテゴリ 1件 · 同じ言語

  リスト要素を同一・別リスト間でドラッグ＆ドロップ並べ替えし、タッチ操作にも対応する

  JavaScript
• GSAP28,810 Stars

  共通タグ 1件 · 共通カテゴリ 1件 · 同じ言語

  timeline・tween・scroll連動を組み合わせて高度なWeb animationを制御する

  JavaScript
• Select225,907 Stars

  共通タグ 1件 · 共通カテゴリ 1件 · 同じ言語

  native selectをsearch・multi-select・AJAX・tagging対応のrich selectorへ拡張する

  JavaScript