クイックスタート

このチュートリアルでは、TypeScript 5.4 以降を使用してゼロから新しい Effect プロジェクトをセットアップする手順を案内します。

Node.js

Node.jsの新しい Effect プロジェクトを作成するための手順は以下の通りです。

1. 最初のステップとして、プロジェクトディレクトリを作成し、その中に移動します：

   mkdir hello-effect
   cd hello-effect

2. 次に、npm を使用して TypeScript プロジェクトを初期化します（TypeScript 5.0 またはそれ以降をインストールしていることを確認してください）：

   npm init -y
   npm install typescript --save-dev

   これにより、TypeScript プロジェクトの初期セットアップを含むpackage.jsonファイルが作成されます。

3. 次に、TypeScript を初期化します：

   npx tsc --init

   このコマンドを実行すると、TypeScript の設定オプションを含むtsconfig.jsonファイルが生成されます。重要なオプションのひとつにstrictフラグがあります。

   tsconfig.jsonファイルを開き、strictオプションの値がtrueに設定されていることを確認してください。

   {
     "compilerOptions": {
       "strict": true
     }
   }

4. 次に、必要なパッケージを依存関係としてインストールします：

   npm install effect

   このパッケージは、Effect プロジェクトの基盤となる機能を提供します。

次に、すべてが正しくセットアップされていることを確認するために、簡単なプログラムを書いて実行します。

ターミナルで以下のコマンドを実行します：

mkdir src
touch src/index.ts

index.tsファイルを開き、以下のコードを追加します：

import { Effect, Console } from "effect";

const program = Console.log("Hello, World!");

Effect.runSync(program);

index.tsファイルを実行します。ここでは、ts-nodeを使用してターミナルでindex.tsファイルを実行します：

npx ts-node src/index.ts

"Hello, World!"というメッセージが表示されるはずです。これにより、プログラムが正しく動作していることを確認できます。

Deno

Denoの新しい Effect プロジェクトを作成するための手順は以下の通りです。

1. 最初のステップとして、プロジェクトディレクトリを作成し、その中に移動します：

   mkdir hello-effect
   cd hello-effect

2. 次に、Deno を初期化します：

   deno init

すべてが正しくセットアップされていることを確認するために、簡単なプログラムを書いて実行します。

main.tsファイルを開き、内容を以下のコードに置き換えます：

import { Effect, Console } from "npm:effect";

const program = Console.log("Hello, World!");

Effect.runSync(program);

main.tsファイルを実行します：

deno run main.ts

"Hello, World!"というメッセージが表示されるはずです。これにより、プログラムが正しく動作していることを確認できます。

Bun

Bunの新しい Effect プロジェクトを作成するための手順は以下の通りです。

1. 最初のステップとして、プロジェクトディレクトリを作成し、その中に移動します：

   mkdir hello-effect
   cd hello-effect

2. 次に、Bun を初期化します：

   bun init

   このコマンドを実行すると、TypeScript の設定オプションを含むtsconfig.jsonファイルが生成されます。重要なオプションのひとつにstrictフラグがあります。

   tsconfig.jsonファイルを開き、strictオプションの値がtrueに設定されていることを確認してください。

   {
     "compilerOptions": {
       "strict": true
     }
   }

3. 次に、必要なパッケージを依存関係としてインストールします：

   bun add effect

   このパッケージは、Effect プロジェクトの基盤となる機能を提供します。

簡単なプログラムを書いて、すべてが正しくセットアップされていることを確認しましょう。

index.tsファイルを開き、内容を以下のコードに置き換えます：

import { Effect, Console } from "effect";

const program = Console.log("Hello, World!");

Effect.runSync(program);

index.tsファイルを実行します：

bun index.ts

"Hello, World!"というメッセージが表示されるはずです。これにより、プログラムが正しく動作していることを確認できます。

Vite + React

Vite + Reactの新しい Effect プロジェクトを作成するための手順は以下の通りです。

1. Vite プロジェクトのテンプレートを使用するため、ターミナルで以下のコマンドを実行します：

   # npm 6.x
   npm create vite@latest hello-effect --template react-ts
   
   # npm 7+, 追加のダブルダッシュが必要です：
   npm create vite@latest hello-effect -- --template react-ts

   このコマンドは、React と TypeScript のテンプレートを持つ新しい Vite プロジェクトを作成します。

2. 新しく作成されたプロジェクトディレクトリに移動し、必要なパッケージをインストールします：

   cd hello-effect
   npm install

   パッケージがインストールされたら、tsconfig.jsonファイルを開き、strictオプションの値がtrueに設定されていることを確認します。

   {
     "compilerOptions": {
       "strict": true
     }
   }

3. 次に、必要なeffectパッケージを依存関係としてインストールします：

   npm install effect

   effectパッケージは、Effect プロジェクトの基盤となる機能を提供します。

簡単なプログラムを書いて、すべてが正しくセットアップされていることを確認しましょう。

src/App.tsxファイルを開き、その内容を以下のコードに置き換えます：

import { useState, useMemo, useCallback } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { Effect } from "effect";

function App() {
  const [count, setCount] = useState(0);

  // Effect<void>
  const task = useMemo(
    () => Effect.sync(() => setCount((current) => current + 1)),
    [setCount]
  );

  const increment = useCallback(() => Effect.runSync(task), [task]);

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={increment}>count is {count}</button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

これらの変更を加えた後、以下のコマンドを実行して開発サーバーを起動します：

npm run dev

その後、oを押してアプリケーションをブラウザで開きます。

ボタンをクリックすると、カウントが増加するはずです。これにより、プログラムが正しく動作していることを確認できます。