# General Translation Integrations: ファイル形式の追加
URL: https://generaltranslation.com/ja/docs/integrations/paraglide/guides/adding-file-formats.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 組み込みの language が対応していない形式のコンポーネントファイルを解析する方法。

JavaScript、TypeScript、JSX 以外のファイルは、language によって TypeScript に変換されます。language とは、フレームワーク自体のツールをラップする小さなアダプターです。[対応しているファイル形式](/docs/integrations/paraglide/reference/file-formats)に含まれない形式でメッセージを使用している場合は、language を追加してください。

language はライブラリのオプションとして指定するため、このガイドでは CLI ではなく [`collectContext`](/docs/integrations/paraglide/reference/collect-context) を使用します。

## 始める前に [#before-start]

対象の形式に対応したコンパイラまたは言語ツールが必要です。このツールは次のものを返す必要があります。

* JavaScript または TypeScript のコードに変換されたファイル。
* そのコードから元のファイルへのソースマップ、または Volar のマッピング。

マッピングのないコードは使用箇所としてカウントされません。そのため、どの使用箇所が検出されるか、また文脈がどこで区切られるかは、マッピングによって決まります。

## language を作成する [#write-language]

[`SourceLanguage`](/docs/integrations/paraglide/reference/extension-api#languages) では、対象とするファイル拡張子と必要なパッケージを指定し、生成したモジュールを返します：

```ts title="riot-language.ts"
import {
  mappingsFromSourceMap,
  type SourceLanguage,
} from '@generaltranslation/paraglide-js/compiler';

export const riotLanguage: SourceLanguage = {
  name: 'riot',
  extensions: ['.riot'],
  requires: ['@riotjs/compiler'], // 未インストール時の警告にパッケージ名が表示されます
  async generate(source, file, context) {
    // アプリ側から読み込みます。インストールされていない場合は undefined になります。
    const compiler =
      await context.load<typeof import('@riotjs/compiler')>('@riotjs/compiler');
    if (!compiler) return undefined; // スキップされます

    const { code, map } = compiler.compile(source, { file });
    const mappings = mappingsFromSourceMap(map, code, source);

    return { code, lang: 'js', mappings };
  },
};
```

1. `context.load` でツールを読み込み、バージョンをアプリ側と一致させます。ツールが見つからない場合は `undefined` を返してください。その形式はスキップされ、`requires` に指定されたパッケージ名を示す警告が 1 件出力されます。
2. `mappings` を構築します。バージョン 3 のソースマップには `mappingsFromSourceMap` を、Volar ベースのツールのマッピングには `mappingsFromVolar` を使用します。
3. ツールがファイルを受け付けなかった場合は例外をスローします。そのファイルは警告付きでスキップされます。

## language を登録する [#register-language]

デフォルトの設定とあわせて渡します：

```ts
import {
  collectContext,
  defaultLanguages,
} from '@generaltranslation/paraglide-js/compiler';
import { riotLanguage } from './riot-language.js';

await collectContext({ languages: [...defaultLanguages, riotLanguage] });
```

この language に対応する拡張子のファイルが解析対象に含まれるようになります。1 つのファイルに複数の language が一致する場合は、リスト内で最初に指定されたものが使用されます。

## スクリプトとスクリプト拡張子に対応する [#scripts]

* **独立したスクリプト:** Astro ページのクライアントスクリプトのように、それ自体が独立したモジュールであるスクリプトは、`scripts` にそれぞれ `{ code, lang, mappings }` として含めて返します。これらのスクリプト同士、およびメインの `code` との間で名前が共有されることはありません。
* **スクリプト拡張子:** Angular コンポーネントが `.ts` を使うように、スクリプト用の拡張子を持つファイルを処理対象にするには、`detect(source, file)` を追加し、自分のフォーマットのファイルに対してのみ `true` を返すようにします。

## Next steps

- /docs/integrations/paraglide/guides/resolving-imports

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.