# react-native: useMessages
URL: https://generaltranslation.com/ja/docs/react-native/api/strings/use-messages.mdx
---
title: useMessages
description: 文字列翻訳関数 useMessages() のAPIリファレンス
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`useMessages` 関数は、`msg` でエンコードされた文字列をビルド時に翻訳するためのフックです。

```jsx
const m = useMessages();

<p>{m(encodedString)}</p>;
```

<Callout>
  **ビルド時翻訳:** `useMessages` による翻訳は、アプリのデプロイ前の
  ビルド時に行われます。`msg` のエンコード済み文字列を渡すと、それらは
  ユーザーの優先言語に翻訳されます。
</Callout>


## リファレンス

### パラメーター

なし

### 戻り値

`msg` から渡されたエンコード済みコンテンツを翻訳するコールバック関数 `m`。

```jsx
(encodedContent: string, options?: Record<string, any>) => string
```

| 名前               | 型                     | 説明                                 |
| ---------------- | --------------------- | ---------------------------------- |
| `encodedContent` | `string`              | `msg` から渡される、翻訳対象のエンコードされた文字列コンテンツ。 |
| `options?`       | `Record<string, any>` | エンコードされた文字列に変数を渡すための省略可能なパラメーター。    |

***


## 挙動

### 本番環境

CD プロセスでは、`msg` 関数内の内容はすべて、アプリケーションのデプロイ前に翻訳されます。
これにより、すべてのロケールで高速に読み込めますが、翻訳できるのはビルド時に判明している内容に限られます。

翻訳の生成後、設定に応じて、(1) CDN に保存されるか、(2) アプリのビルド出力に保存されます。
そこから、翻訳済みのコンテンツがユーザーに配信されます。
翻訳が見つからない場合は、元のコンテンツにフォールバックします。

必ず[こちらのデプロイガイド](/docs/react-native/tutorials/quickdeploy)に従ってください。

### 開発

開発中は、`m` 関数が必要に応じてコンテンツを翻訳します。
これは、アプリが異なる言語でどのように表示されるかを試す際に便利です。
この動作を有効にするには、環境に Dev API キーを追加してください。

開発環境でオンデマンド翻訳を行う際には、遅延が発生します。
本番ビルドでは、コンテンツを明示的にオンデマンド翻訳している場合を除き、この遅延は発生しません。

***

## 例

### 基本的な使い方

`useMessages` を使うと、`msg` でエンコードされた文字列を翻訳できます。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

注: &quot;Alice&quot; はユーザーの優先言語に翻訳されます。


### 変数を使う [#variables]

エンコードされた文字列に変数を渡せます。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* これは "Hello, Bob!" と表示されます */}
    </p>
  );
}
```


### `msg` 変数は `m` 変数より優先されます

`msg` と `m` の両方に変数を渡した場合、`msg` に渡した変数が `m` に渡した変数より優先されます。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>;
}
```

注意: これは &quot;Hello, Alice!&quot; と表示され、変数はレンダリング時に上書きされません。


### ICUメッセージ形式を使う

`gt-react-native` は ICU メッセージ形式をサポートしており、変数の書式設定も行えます。

```jsx copy
import { msg, useMessages } from 'gt-react-native';

const encodedMessage = msg(
  'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
  { count: 10 }
);

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedMessage)}</p>;
}
```

<Callout>
  ICUメッセージ形式は、変数を柔軟に書式設定できる強力な方法です。詳しくは、
  [ICUメッセージ形式のドキュメント](https://unicode-org.github.io/icu/userguide/format_parse/messages/)を参照してください。
</Callout>


### `gt-react-native` からのインポート

`"use client"` ディレクティブを使用している場合は、`gt-react-native` ではなく `gt-react-native` からインポートする必要があります。

```jsx copy
'use client';
import { msg, useMessages } from 'gt-react-native';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

***


## 注記

* `useMessages` 関数は、`msg` でエンコードされた文字列を翻訳するフックです。
* `useMessages` による文字列の翻訳は、開発時を除き、runtime より前のビルドプロセス中に実行されます。

## 次のステップ

* 文字列を翻訳用にエンコードする方法については、[`msg`](/docs/react-native/api/strings/msg)を参照してください。