Currency Converter
セットアップ
チュートリアルプロジェクトのセットアップ
はじめに
これは、gt-nextを使用して非常にシンプルなNextJSプロジェクトをセットアップする方法に関する、より詳細なチュートリアルガイドです。
プロジェクトのセットアップから翻訳まで、最初から最後までご案内します。
このチュートリアルを通じて、シンプルな概念からより高度な概念へと進んでいきます。
このチュートリアルは、Typescript、Next.js、およびReactの一般的な理解を前提としています。
このチュートリアルで取り上げる項目のリストは次のとおりです：
- 新しいNext.jsプロジェクトのセットアップ
<T>コンポーネントを使用してアプリを翻訳する<Var>,<Currency>,<DateTime>,<Num>のような変数コンポーネントを使用して動的コンテンツを翻訳する<Plural>,<Branch>のようなブランチコンポーネントを使用して条件付きコンテンツを翻訳する- アプリでのi18nルーティングの使用
私たちのアプリは、通貨間の換算レートを確認できるシンプルなアプリになります。
可能な限りシンプルに保つために、インラインスタイリングとgt-nextライブラリのみを使用します。
この例は、GeeksforGeeksの通貨コンバーターチュートリアルに基づいて構築されました。
次のアプリをセットアップする
まず、新しいNextJSアプリを作成しましょう。次のコマンドを実行することでこれを行うことができます:
npx create-next-app@latestこれによりセットアップウィザードが起動し、アプリの名前と使用したいテンプレートを選択できます。
このチュートリアルでは、名前をcurrenciesにし、TypeScriptを使用するかどうか尋ねられたらYesを選択してください。
プロジェクトディレクトリに移動し、アプリを起動しましょう！
cd currencies
npm install
npm run devこれにより、アプリがhttp://localhost:3000で起動します。
コンテンツを追加しましょう！
アプリのセットアップが完了したので、アプリの内容を上書きしてシンプルな通貨コンバーターを表示しましょう。
次のコードを src/app/page.tsx ファイルと src/app/layout.tsx ファイルにコピー＆ペーストしてください。
今はどのように動作するかをあまり心配しないでください。 このコードは、通貨交換APIへのフェッチをシミュレートし、2つの通貨間の為替レートを表示するだけです。
"use client";
import { useEffect, useState, useCallback } from "react";
// A map between two currencies and their exchange rate (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 },
};
// some styles for button
const buttonStyle = {
backgroundColor: "#007bff",
color: "white",
border: "none",
padding: "10px 20px",
cursor: "pointer",
borderRadius: "5px",
fontSize: "16px",
margin: "20px",
};
/**
* This function is meant to simulate an api fetch request to get the current exchange.
* Waits for 1 second before returning the exchange rate.
* @returns the exchange rate between two currencies
*/
async function fetchExchangeRate(from: string, to: string): Promise<number> {
await new Promise((resolve) => setTimeout(resolve, 1000));
return EXCH_RATES[from][to];
}
function Page() {
// exch rates
const [info, setInfo] = useState<ExchTable>({});
const options = ["usd", "inr", "eur", "jpy", "gbp"];
// currencies
const [from, setFrom] = useState("usd");
const [to, setTo] = useState("inr");
// values
const [input, setInput] = useState(0);
const [output, setOutput] = useState(0);
// Function to convert the currency
const convert = useCallback(() => {
if (info?.[from]?.[to]) {
const rate = info[from][to];
setOutput(input * rate);
} else {
setOutput(0);
}
}, [info, input, to, from]);
// Calling the api whenever from or to currency changes
useEffect(() => {
// If the exchange rate is already present, then convert
if (info?.[from]?.[to]) {
convert();
return;
}
// Fetch the exchange rate
(async () => {
const response = await fetchExchangeRate(from, to);
// Enter new response without overwriting old info
setInfo((prevInfo) => ({
...prevInfo,
[from]: {
...(prevInfo?.[from] || undefined),
[to]: response,
},
}));
})();
}, [from, to, convert, info]);
// Call convert whenever a user switches the currency
useEffect(() => {
convert();
}, [info, convert]);
// Function to switch between two currency
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;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>
);
}結論
これで、通常のNextJSアプリがセットアップされ、gt-nextを使用して翻訳する準備が整いました。
このガイドはいかがですか？