注目すべき TypeScript プロジェクト 3 選

GitHub では毎日新しいプロジェクトが生まれていますが、情報の海に埋もれてしまうものも多いです。今日は、特定の場面で実用的な 3 つのプロジェクトを紹介します。

---

react-exe：ブラウザ上で動作する React サンドボックス

vgulerianb/react-exe · 181 ⭐

このライブラリは、ブラウザ上で React コンポーネントコードを安全に実行するという、シンプルだがよくあるニーズを解決します。

渡された JSX 文字列をブラウザで直接動作するコンポーネントにコンパイルし、iframe サンドボックスでコードを隔離します。ドキュメントサイト、チュートリアル、コンポーネントライブラリのデモなど、React コンポーネントの効果をオンラインで表示する必要がある場面に特に役立ちます。

import { useReactExe } from 'react-exe';

const code = `
  export default function App() {
    return <h1>Hello World</h1>
  }
`;

function MyComponent() {
  const { Component, loading, error } = useReactExe({ code });
  
  if (loading) return <div>コンパイル中...</div>;
  if (error) return <div>コンパイルエラー: {error.message}</div>;
  
  return <Component />;
}

核心は、クライアントサイドで JSX を動的にコンパイルし、カスタムスコープの注入をサポートし、iframe の CSP ポリシーも設定可能です。

---

vite-plugin-mkcert：ワンクリックで HTTPS ローカル開発

liuweiGL/vite-plugin-mkcert · 747 ⭐

ローカル開発での HTTPS は面倒なものでした。自己署名証明書はブラウザに信頼されず、設定も複雑です。

この Vite プラグインは、ローカルで信頼される HTTPS 証明書を自動生成し、手動操作なしで使えます。

// vite.config.ts
import mkcert from 'vite-plugin-mkcert';

export default {
  plugins: [
    mkcert()  // これだけ
  ]
};

初回実行時に自動的にローカル CA 証明書をインストールし、ドメイン証明書を生成します。その後の起動では、生成済みの証明書を直接使用します。カスタムドメインや証明書の保存パスの指定、プロキシサーバーの設定も可能です。

Service Worker、ジオロケーション、カメラなどの HTTPS 機能をテストする必要があるプロジェクトでは、設定時間を大幅に削減できます。

---

Module Federation for Vite：マイクロフロントエンドのインフラ

module-federation/vite · 614 ⭐

Webpack の Module Federation はマイクロフロントエンドの標準的なソリューションでしたが、Vite エコシステムにも公式サポートが追加されました。

このプラグインにより、Vite プロジェクトも Webpack と同様にモジュールフェデレーションを実現できます。アプリケーション A がアプリケーション B のコンポーネントを動的に読み込み、双方独立してデプロイ・ビルドできます。

// モジュールを公開（リモートアプリ）
// vite.config.ts
import { federation } from '@module-federation/vite';

export default {
  plugins: [
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.tsx',
        './Header': './src/components/Header.tsx'
      },
      shared: ['react', 'react-dom']
    })
  ]
};

// モジュールを消費（ホストアプリ）
federation({
  name: 'hostApp',
  remotes: {
    remote: 'remoteApp@http://localhost:5001/mf-manifest.json'
  },
  shared: ['react', 'react-dom']
});

// リモートコンポーネントを動的読み込み
const RemoteButton = lazy(() => import('remote/Button'));

このプラグインは、Vite がネイティブでサポートしていない依存関係の共有やリモートモジュールの読み込みなどを処理し、現在は本番環境のビルドにも対応しています。

---

まとめ

プロジェクト	用途	Stars
react-exe	React コンポーネントのオンライン実行	181
vite-plugin-mkcert	ローカル HTTPS 開発	747
module-federation/vite	マイクロフロントエンド	614

3 つのプロジェクトは、具体的で頻度の高い開発の痛みを解決し、コード量は多くありませんが設計は洗練されています。似たようなニーズがあるプロジェクトでは、ぜひ試してみてください。