# gt-next: General Translation Next.js SDK: セットアップ
URL: https://generaltranslation.com/ja/docs/next/tutorials/examples/currency-converter/setup.mdx
---
title: セットアップ
description: チュートリアル用プロジェクトをセットアップする
---

## はじめに

このチュートリアルでは、`gt-next` を使って非常にシンプルな Next.js プロジェクトをセットアップする方法を、より詳しく解説します。
プロジェクトのセットアップから翻訳まで、最初から最後まで順を追って進めていきます。
このチュートリアルでは、基本的な内容からより高度な概念へと段階的に学んでいきます。
TypeScript、Next.js、React の基本的な知識があることを前提としています。

このチュートリアルで扱う内容は次のとおりです。

* 新しい Next.js プロジェクトのセットアップ
* `<T>` コンポーネントを使ったアプリの翻訳
* `<Var>`、`<Currency>`、`<DateTime>`、`<Num>` などの変数コンポーネントを使った動的コンテンツの翻訳
* `<Plural>` や `<Branch>` などの branch コンポーネントを使った条件付きコンテンツの翻訳
* アプリでの i18n ルーティングの利用

このチュートリアルで作成するのは、通貨間の換算レートを確認できるシンプルなアプリです。
できるだけ最小構成にするため、スタイルはインライン指定のみを使い、ライブラリも `gt-next` のみを使用します。
この例は、GeeksforGeeks の [Currency Converter](https://www.geeksforgeeks.org/how-to-create-a-currency-converter-app-in-reactjs/) チュートリアルをもとに作成しています。

## Next アプリをセットアップする

まず、新しい Next.js アプリを作成します。次のコマンドを実行してください。

```bash copy
npx create-next-app@latest
```

セットアップウィザードが開くので、そこでアプリ名と使用するtemplateを選択します。
このチュートリアルでは、名前に`currencies`を使用し、TypeScript を使うか尋ねられたら `Yes` を選択してください。

プロジェクトディレクトリに移動して、アプリを起動しましょう！

```bash copy
cd currencies
npm install
npm run dev
```

これにより、アプリが `http://localhost:3000` で起動します。


## コンテンツを追加しましょう！

アプリのセットアップができたので、アプリの内容を上書きして、シンプルな通貨コンバーターを表示してみましょう。
以下のコードを `src/app/page.tsx` ファイルと `src/app/layout.tsx` ファイルにそのままコピー＆ペーストしてください。

今のところ、仕組みはあまり気にしなくて大丈夫です。
このコードは、為替レート API へのフェッチをシミュレートし、2 つの通貨間の為替レートを表示しているだけです。

<Tabs items={['layout.tsx', 'page.tsx']}>
  <Tab value="page.tsx">
    ```jsx title="src/app/page.tsx" copy
    "use client";

    import { useEffect, useState, useCallback } from "react";

    // 2つの通貨とその為替レートのマップ (from -> to)
    type ExchTable = Record<string, Record<string, number>>;

    const EXCH_RATES: ExchTable = {
      usd: { usd: 1, inr: 73.5, eur: 0.85, jpy: 105.45, gbp: 0.72 },
      inr: { usd: 0.014, inr: 1, eur: 0.012, jpy: 1.46, gbp: 0.01 },
      eur: { usd: 1.18, inr: 85.5, eur: 1, jpy: 123.5, gbp: 0.85 },
      jpy: { usd: 0.0095, inr: 0.68, eur: 0.0081, jpy: 1, gbp: 0.0068 },
      gbp: { usd: 1.39, inr: 99.5, eur: 1.17, jpy: 146.5, gbp: 1 },
    };

    // ボタンのスタイル
    const buttonStyle = {
      backgroundColor: "#007bff",
      color: "white",
      border: "none",
      padding: "10px 20px",
      cursor: "pointer",
      borderRadius: "5px",
      fontSize: "16px",
      margin: "20px",
    };

    /**
     * この関数は現在の為替レートを取得するAPIリクエストをシミュレートします。
     * 為替レートを返す前に1秒待機します。
     * @returns 2つの通貨間の為替レート
     */
    async function fetchExchangeRate(from: string, to: string): Promise<number> {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      return EXCH_RATES[from][to];
    }

    function Page() {
      // 為替レート
      const [info, setInfo] = useState<ExchTable>({});
      const options = ["usd", "inr", "eur", "jpy", "gbp"];

      // 通貨
      const [from, setFrom] = useState("usd");
      const [to, setTo] = useState("inr");

      // 値
      const [input, setInput] = useState(0);
      const [output, setOutput] = useState(0);

      // 通貨を変換する関数
      const convert = useCallback(() => {
        if (info?.[from]?.[to]) {
          const rate = info[from][to];
          setOutput(input * rate);
        } else {
          setOutput(0);
        }
      }, [info, input, to, from]);

      // 変換元または変換先の通貨が変わるたびにAPIを呼び出す
      useEffect(() => {
        // 為替レートがすでに取得済みの場合はそのまま変換する
        if (info?.[from]?.[to]) {
          convert();
          return;
        }
        // 為替レートを取得する
        (async () => {
          const response = await fetchExchangeRate(from, to);
          // 既存の情報を上書きせずに新しいレスポンスを追加する
          setInfo((prevInfo) => ({
            ...prevInfo,
            [from]: {
              ...(prevInfo?.[from] || undefined),
              [to]: response,
            },
          }));
        })();
      }, [from, to, convert, info]);

      // ユーザーが通貨を切り替えるたびに変換を実行する
      useEffect(() => {
        convert();
      }, [info, convert]);

      // 2つの通貨を入れ替える関数
      function flip() {
        const temp = from;
        setFrom(to);
        setTo(temp);
      }

      return (
        <div style={{ margin: "0 auto", width: "50%", textAlign: "center" }}>
          <div style={{ margin: "20px 0", paddingBottom: "20px" }}>
            <h1 style={{ fontSize: "2.5em", fontWeight: "bold" }}>
              通貨換算
            </h1>
          </div>
          <div style={{ flex: 2, textAlign: "center", margin: "20px 0" }}>
            <h3>金額</h3>
            <input
              type="text"
              placeholder="金額を入力してください"
              style={{ textAlign: "center" }}
              onChange={(e) => {
                setInput(Number(e.target.value));
              }}
            />
          </div>
          <div
            style={{ display: "flex", justifyContent: "center", margin: "20px 0" }}
          >
            <div style={{ flex: 1, textAlign: "center" }}>
              <label htmlFor="from">
                <h3>変換元</h3>
              </label>
              <select
                name="from"
                id="from"
                value={from}
                onChange={(e) => setFrom(e.target.value)}
              >
                {options.map((option) => (
                  <option key={option} value={option}>
                    {option.toUpperCase()}
                  </option>
                ))}
              </select>
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
              <button
                onClick={() => {
                  flip();
                }}
                style={buttonStyle}
              >
                入れ替え
              </button>
            </div>
            <div style={{ flex: 1, textAlign: "center" }}>
              <label htmlFor="to">
                <h3>変換先</h3>
              </label>
              <select
                name="to"
                id="to"
                value={to}
                onChange={(e) => setTo(e.target.value)}
              >
                {options.map((option) => (
                  <option key={option} value={option}>
                    {option.toUpperCase()}
                  </option>
                ))}
              </select>
            </div>
          </div>
          <div style={{ margin: "0 auto", width: "50%", textAlign: "center" }}>
            <button
              onClick={() => {
                convert();
              }}
              style={buttonStyle}
            >
              変換
            </button>
            <h2>変換後の金額：</h2>
            <p>{input + " " + from + " = " + output.toFixed(2) + " " + to}</p>
          </div>
        </div>
      );
    }

    export default Page;
    ```
  </Tab>

  <Tab value="layout.tsx">
    ```jsx title="src/app/layout.tsx" copy
    import type { Metadata } from "next";
    import { Geist, Geist_Mono } from "next/font/google";
    import "./globals.css";

    const geistSans = Geist({
      variable: "--font-geist-sans",
      subsets: ["latin"],
    });

    const geistMono = Geist_Mono({
      variable: "--font-geist-mono",
      subsets: ["latin"],
    });

    export const metadata: Metadata = {
      title: "Currency Converter",
      description: "A simple currency converter",
    };

    export default function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      return (
        <html lang="en">
          <body
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            {children}
          </body>
        </html>
      );
    }

    ```
  </Tab>
</Tabs>

## まとめ