Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web IDE『Wazamono-Editor』Tech Stack List

Avatar for Kanata Kanata
March 24, 2026
4

Web IDE『Wazamono-Editor』Tech Stack List

Avatar for Kanata

Kanata

March 24, 2026

Transcript

  1. ​ 技術スタックリスト​ ​ カテゴリ​ ​ テクノロジ​ ​ 役割​ ​ 採用の理由(根拠)​

    ​ 開発環境​ ​ Windows 11​ ​ 開発ホストOS​ ​ 標準的な開発プラットフォームとして。​ ​ Antigravity​ ​ 開発エディタ​ ​ 最先端の開発環境を使うため。​ ​ Git​ ​ バージョン管理​ ​ 実装工程での変更をさかのぼるため。​ ​ Node.js​ ​ 実行ランタイム​ ​ モダンなフレームワークやnpmを使うため。​ ​ npm​ ​ パッケージ管理​ ​ 車輪の再発明を避けるため。​ ​ フレームワーク​ ​ TypeScript​ ​ 開発言語​ ​ 型安全性。​ ​ Vite​ ​ ビルドツール​ ​ 高速なHMR(Hot Module Replacement)。​ ​ vite-plugin-pwa​ ​ PWA構築​ ​ インストール不要なWeb IDEを実現するため。​ ​ React​ ​ UIライブラリ​ ​ 複雑なUI状態をコンポーネント単位で管理するため。​ ​ react-error-boundary​ ​ エラー境界​ ​ アプリ全体のクラッシュを防ぐため。​ ​ Zustand​ ​ 状態管理​ ​ モード切り替え、モーダル開閉、通知ドットの管理を​ ​ 軽量に行うため。​ ​ スタイリング​ ​ /UI​ ​ Tailwind CSS​ ​ CSSフレームワーク​ ​ 独自のテーマを容易に実装するため。​ ​ Radix UI​ ​ UIコンポーネント​ ​ ノイズのない和風UIをゼロからデザインするため。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
  2. ​ エディタ実装​ ​ CodeMirror 6​ ​ エディタエンジン​ ​ モバイル端末向けのエディタエンジンとして最適。​ ​

    esbuild-wasm​ ​ バンドラ​ ​ ユーザーコードをインメモリでビルド/実行するため。​ ​ データ管理​ ​ OPFS​ ​ ストレージ​ ​ ユーザーコードやGitデータなどを​ ​ ブラウザ内で永続化するため。​ ​ IndexedDB​ ​ メタデータDB​ ​ タブの表示順序やユーザー設定などを​ ​ ブラウザ内で永続化するため。​ ​ Dexie.js​ ​ IndexedDBラッパー​ ​ IndexedDBの操作を型安全かつ簡潔なコードで記述するため。​ ​ isomorphic-git​ ​ Gitエンジン​ ​ .gitディレクトリをOPFS内に構築し、​ ​ ブラウザ内でのバージョン管理を実現するため。​ ​ fflate​ ​ 圧縮・展開​ ​ ユーザーのプロジェクトデータを​ ​ ZIPにまとめて出力する処理を高速実行するため。​ ​ Buffer​ ​ ポリフィル​ ​ isomorphic-git等、Node.js APIに依存するライブラリを​ ​ ブラウザ内で動作させるため。​ ​ ホスティング​ ​ Cloudflare Pages​ ​ 静的アセット配信​ ​ セキュアかつ高速にアプリを配信するため。​ ​ アセット​ ​ /フォント​ ​ Shippori Mincho​ ​ デザイン用​ ​ フォント​ ​ デザイン性が重要な部分に使用するため。​ ​ M PLUS 1 Code​ ​ コーディング用​ ​ フォント​ ​ 視認性が重要な部分に使用するため。​ ​ 品質管理​ ​ /テスト​ ​ Vitest​ ​ 単体テスト​ ​ 状態管理ロジックを検証するため。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​
  3. ​ Playwright​ ​ E2Eテスト​ ​ 本番環境に近いシナリオで自動検証するため。​ ​ ESLint​ ​ リント​

    ​ プロジェクト独自のコーディング規約を自動適用するため。​ ​ © 2026 kanata_yurufuwa All Rights Reserved.​