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

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


## 概要

`msg` 関数は、文字列を翻訳対象としてマークし、エンコードする関数です。

```jsx
const encodedString = msg('Hello, world!');
```

エンコードされた文字列は、翻訳を取得するために [`useMessages`](/docs/react-native/api/strings/use-messages) フックに渡す必要があります。

<Callout>
  **エンコード:**
  `msg` は入力文字列をエンコードするため、JSX 内などで直接使用することはできません。
  元の文字列に戻したい場合は、[`decodeMsg`](#decodemsg) でデコードする必要があります
</Callout>


## デコード [#decodemsg]

元の文字列を取得するには、[`decodeMsg`](#decodemsg) でデコードする必要があります

```jsx
import { msg, decodeMsg } from 'gt-react-native';
const encodedString = msg('Hello, world!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "Hello, world!"
```


## リファレンス

### パラメーター

| 名前         | 型                                                                                     | 説明                            |
| ---------- | ------------------------------------------------------------------------------------- | ----------------------------- |
| `content`  | `string`                                                                              | エンコードする文字列。                   |
| `options?` | [`InlineTranslationOptions`](/docs/react-native/api/types/inline-translation-options) | `msg` の動作をカスタマイズするための翻訳オプション。 |

### 戻り値

エンコードされた文字列。変数が補間されている場合は、その値に置き換えられます。

***

## 動作

### 本番環境

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

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

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

### 開発

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

開発中にオンデマンド翻訳を行うと、遅延が発生します。
本番ビルドでは、コンテンツを明示的にオンデマンド翻訳しない限り、この遅延は発生しません。

***

## 例

### 基本的な使い方

`msg` を使うと、文字列を翻訳用にマークできます。

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

const encodedString = msg('Hello, world!');

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

注: &quot;Hello, world!&quot; はユーザーが設定した言語に翻訳されます。

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

辞書の翻訳に変数を渡せます。

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

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

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

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

注: &quot;Alice&quot; は変数であるため、ユーザーの優先言語には翻訳されません。


### ICU メッセージ形式の使用

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

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

const encodedString = 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(encodedString)}
    </p>
  );
}
```

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

***

## 注意事項

* `msg` 関数は、文字列を翻訳対象としてマークするための関数です。
* `msg` を使った文字列の翻訳は、runtime ではなくビルドプロセス中に行われます (開発時を除く) 。

## 次のステップ

* 文字列の翻訳には、[`useMessages`](/docs/react-native/api/strings/use-messages)を参照してください。