{"id":49244250,"url":"https://github.com/shuji-bonji/websocket-practical-guide","last_synced_at":"2026-04-24T20:40:38.546Z","repository":{"id":302946248,"uuid":"1009501698","full_name":"shuji-bonji/websocket-practical-guide","owner":"shuji-bonji","description":"ブラウザ標準WebSocket APIを使用したリアルタイム通信の実践的なガイド","archived":false,"fork":false,"pushed_at":"2026-01-20T22:17:40.000Z","size":46695,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-21T05:34:40.783Z","etag":null,"topics":["javascript","learning","pwa","svektekit","svelte","typescript","websocket"],"latest_commit_sha":null,"homepage":"https://shuji-bonji.github.io/websocket-practical-guide/","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shuji-bonji.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-27T08:32:11.000Z","updated_at":"2026-01-20T22:17:44.000Z","dependencies_parsed_at":"2025-08-21T19:39:09.690Z","dependency_job_id":null,"html_url":"https://github.com/shuji-bonji/websocket-practical-guide","commit_stats":null,"previous_names":["shuji-bonji/websocket-learning","shuji-bonji/websocket-practical-guide"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shuji-bonji/websocket-practical-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuji-bonji%2Fwebsocket-practical-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuji-bonji%2Fwebsocket-practical-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuji-bonji%2Fwebsocket-practical-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuji-bonji%2Fwebsocket-practical-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shuji-bonji","download_url":"https://codeload.github.com/shuji-bonji/websocket-practical-guide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shuji-bonji%2Fwebsocket-practical-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32240609,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","learning","pwa","svektekit","svelte","typescript","websocket"],"created_at":"2026-04-24T20:40:33.844Z","updated_at":"2026-04-24T20:40:38.536Z","avatar_url":"https://github.com/shuji-bonji.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- [![Build and Deploy](https://github.com/shuji-bonji/fact-checklist/actions/workflows/deploy.yml/badge.svg)](https://github.com/shuji-bonji/fact-checklist/actions/workflows/deploy.yml) --\u003e\n\n[![SvelteKit](https://img.shields.io/badge/SvelteKit-v2.16-red?logo=svelte\u0026labelColor=000)](https://svelte.dev/)\n[![TypeScript](https://img.shields.io/badge/-TypeScript-007ACC?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Svelte5](https://img.shields.io/badge/-Svelte%205-%23ff3e00?logo=svelte\u0026logoColor=ffffff)](https://svelte.dev/)\n[![CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![Claude](https://img.shields.io/badge/Claude-D97757?logo=claude\u0026logoColor=fff)](https://claude.ai)\n\n# WebSocket 実践ガイド (WebSocket Practical Guide)\n\nブラウザ標準WebSocket APIを中心としたリアルタイムWebアプリケーション実践ガイド。SvelteKit + TypeScript + MDsveXで構築された学習サイトです。\n\n## 📚 プロジェクト概要\n\n- **実践目標**: ブラウザ標準WebSocket APIをマスターし、PWA対応のリアルタイムWebアプリケーションを構築する\n- **総実践時間**: 約50-60時間の構造化された実践カリキュラム\n- **技術スタック**: SvelteKit + TypeScript + MDsveX + Vite + Prism.js\n\n## 🛠️ 開発環境セットアップ\n\n### 前提条件\n\n- Node.js (推奨: v20以上)\n- npm (推奨: v8以上) または pnpm または yarn\n\n### インストール\n\n```bash\n# 依存関係のインストール\nnpm install\n```\n\n## 🚀 開発コマンド\n\n### 基本コマンド\n\n```bash\n# 開発サーバーの起動\nnpm run dev\n\n# 開発サーバーを起動してブラウザで開く\nnpm run dev -- --open\n\n# プロダクションビルド\nnpm run build\n\n# プロダクションビルドのプレビュー\nnpm run preview\n```\n\n### コード品質・テスト\n\n```bash\n# TypeScript型チェック（Svelte含む）\nnpm run check\n\n# 型チェックをwatch modeで実行\nnpm run check:watch\n\n# ESLint + Prettierでコードチェック\nnpm run lint\n\n# Prettierでコードフォーマット\nnpm run format\n```\n\n### SvelteKit固有\n\n```bash\n# SvelteKitの同期（自動実行されます）\nnpm run prepare\n```\n\n## 🏗️ サイト構成（MDsveX + SvelteKit）\n\n### ディレクトリ構造\n\n```\nsrc/\n├── routes/                 # SvelteKitページ・ルート\n│   ├── +page.svelte       # トップページ\n│   └── +layout.svelte     # 共通レイアウト\n├── lib/                   # 再利用可能なコンポーネント・ユーティリティ\n│   └── index.ts           # ライブラリエクスポート\n├── app.html               # HTMLテンプレート\n└── app.d.ts               # TypeScript型定義\n\nmemo/                      # 学習コンテンツ（Markdown）\n├── curriculum.md          # メインカリキュラム\n├── socket.md              # WebSocket基礎\n├── end-to-end-hop-by-hop.md\n└── ... (その他の学習資料)\n\nstatic/                    # 静的ファイル\n└── favicon.png\n```\n\n### MDsveX統合\n\nMDsveXにより、Markdown内でSvelteコンポーネントを使用可能。\n\n```markdown\n# 学習コンテンツ\n\n\u003cscript\u003e\n  import WebSocketDemo from '$lib/components/WebSocketDemo.svelte';\n\u003c/script\u003e\n\n## WebSocketデモ\n\n\u003cWebSocketDemo /\u003e\n\n通常のMarkdownテキストとSvelteコンポーネントを組み合わせることができます。\n```\n\n### ファイル拡張子\n\n- `.svelte` - 通常のSvelteコンポーネント\n- `.svx` - MDsveX（Markdown + Svelte）ファイル\n- 両方の拡張子が `svelte.config.js` で設定済み\n\n### ルーティング\n\nSvelteKitのfile-based routingを使用。\n\n```\nsrc/routes/\n├── +page.svelte          # / (トップページ)\n├── about/\n│   └── +page.svelte      # /about\n├── phase1/\n│   ├── +page.svelte      # /phase1 (Phase 1概要)\n│   └── introduction/\n│       └── [lesson]/\n│           └── +page.svx # /phase1/introduction/[lesson] (学習コンテンツ)\n└── +layout.svelte        # 全ページ共通レイアウト\n```\n\n## 📖 実践コンテンツの構成\n\n### 1. 実践カリキュラム構造\n\n`memo/curriculum.md` に50-60時間の体系的な実践カリキュラムを用意。\n\n- WebSocket入門（5-7時間）\n- ネットワーク技術（6.5-7.5時間）\n- WebSocket API基本構造（5-6時間）\n- データ通信（6-7時間）\n- 高度なトピック（8-10時間）\n- テスト手法（5-6時間）\n- 実践プロジェクト（15-20時間）\n\n### 2. 実践フェーズ\n\n1. **Phase 1**: WebSocket API基礎理解\n2. **Phase 2**: 実装技術とプロトコル詳細\n3. **Phase 3**: テスト・評価手法\n4. **Phase 4**: 本格的なプロダクション開発\n\n## 🎯 主な実践目標\n\n- **ブラウザ標準WebSocket API**の完全マスター\n- SvelteKitでのリアルタイムアプリケーション実装\n- PWA + WebSocketの統合開発\n- 適切なサブプロトコル設計と実装\n- プロダクションレベルのセキュリティ・スケーラビリティ実現\n\n## 🔧 技術仕様\n\n- **フロントエンド**: SvelteKit 2.16.x + TypeScript 5.x\n- **ビルドツール**: Vite 6.2.x\n- **ドキュメント**: MDsveX 0.12.x\n- **コード品質**: ESLint 9.18.x + Prettier 3.4.x\n- **型チェック**: svelte-check 4.x\n- **シンタックスハイライト**: Prism.js 1.30.x\n- **図表作成**: Mermaid 11.7.x\n\n## 📝 開発時の注意点\n\n- 型安全性確保のため、コミット前に `npm run check` を実行\n- コード品質維持のため `npm run lint` でチェック\n- `memo/` ディレクトリの学習資料を参考にWebSocket実装\n- ネイティブWebSocket APIの理解を優先し、その後にライブラリを学習\n\n## 🤖 Claude Code開発者向け\n\n### 必須参照ドキュメント\n\n- **[CLAUDE.md](./CLAUDE.md)** - 開発指針とPhase別実装戦略\n- **[memo/claude-code-phases.md](./memo/claude-code-phases.md)** - 詳細な実装ガイド\n- **[memo/websocket-environments.md](./memo/websocket-environments.md)** - 環境戦略と技術詳細\n- **[memo/deployment-strategy.md](./memo/deployment-strategy.md)** - デプロイメント戦略\n\n### Phase別開発指針\n\nPhase別開発では必ず対応する環境制約を確認してください。\n\n- **Phase 1**: GitHub Pages互換（サーバーレス）\n- **Phase 2**: ローカル開発（Docker + Node.js）\n- **Phase 3**: テスト統合（モック + E2E）\n- **Phase 4**: 本番デプロイ（Vercel + Railway）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuji-bonji%2Fwebsocket-practical-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshuji-bonji%2Fwebsocket-practical-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshuji-bonji%2Fwebsocket-practical-guide/lists"}