<commit_before>---
layout: detail
title: コンパイラ
---

## Introduction
## 概要

Custom tags need to be transformed to javascript before the browser can execute them.
The riot compiler is designed to transform riot tags into javascript modules.
A compiled riot tag will look like this:

カスタムタグはブラウザで実行される前にJavaScriptに変換される必要があります。
RiotのコンパイラはriotタグをJavaScriptモジュールにトランスパイルするよう設計されています。
コンパイルされたRiotタグは次のようになります：

```js
export default {
  css: `my-tag { color: red; }`, // コンポーネントのcss文字列
  template: function() {}, // 内部Riotテンプレートファクトリ関数
  exports: {}, // コンポーネントイベントとライフサイクルメソッド
  name: 'my-tag' // コンポーネントID
}
```

**Each tag file must contain only one tag definition**.

**ひとつのタグファイルに含められるタグ定義は、ひとつだけです。**

## In-browser compilation
## インブラウザ・コンパイル

The `riot+compiler.js` bundle lets you compile and execute riot tags directly in your browser for quick prototypes and tests.
You can load riot tags into your browser by setting a `type="riot"` attribute on your script tags.
For example:

`riot+compiler.js`によるバンドルは、素早くひな型を作ってテストできるよう、ブラウザでタグを直接コンパイルし、実行する機能を提供しています。
以下のように、`<script>`タグの属性に`type="riot"`を指定することで、Riotタグをブラウザにロードすることが可能です：

``` html
<!-- マウント位置 -->
<my-tag></my-tag>

<!-- <my-tag/> は外部ファイルで指定されています -->
<script src="path/to/javascript/my-tag.riot" type="riot"></script>

<!-- riot.jsとコンパイラを含める -->
<script src="https://unpkg.com/riot@{{ site.data.globals.version }}/riot+compiler.min.js"></script>

<!-- コンパイルとマウント -->
<script>
(async function main() {
  await riot.compile()

  riot.mount('my-tag')
}())
</script>
```

Notice that in this case riot will internally transform all the `export default` expressions to enable a better support for browsers that don't support javascript modules yet.

この場合、Riotは内部的に、全ての`export default`式を、JavaScriptモジュールではなく、よりブラウザ表示に適した形に変換することに注意してください。

Riot can compile asynchronously all the external tags included via `<script>` into the DOM and via `riot.mount` it will render them.

Riotは`<script>`タグを通じて全ての外部タグを非同期にDOMにインクルードすることができ、`riot.mount`を通じてレンダリングすることが可能です。

You might prefer using `data-src` instead of `src` on your `<script>` tags stop your browser prefetching automatically any riot script tag in order to avoid to load the same resources twice. Riot will automatically fetch and compile your tags via ajax.

ブラウザによるRiotスクリプトのプリフェッチ機能を抑止して、同じリソースを複数回読み込むことを防ぐため、`<script>`タグの`src`属性の代わりに`data-src`属性を使いたい場合があるかも知れません。Riotは自動的にajaxを用いて、タグをフェッチしてコンパイルします。

## Pre-compilation
## プリコンパイル

The Compilation phase is asynchronous and it will not block your application rendering. However you should use the browser compilation only for prototyping or for quick experiments.

コンパイルは非同期に行われ、描画処理をブロックしません。しかし、インブラウザ・コンパイルはひな型作成と簡単な確認のためだけに使うべきです。

Pre-compilation on gives you following benefits:
<commit_msg>fix: conflict<commit_after>---
layout: detail
title: コンパイラ
---

## 概要

カスタムタグはブラウザで実行される前にJavaScriptに変換される必要があります。
RiotのコンパイラはriotタグをJavaScriptモジュールにトランスパイルするよう設計されています。
コンパイルされたRiotタグは次のようになります：

```js
export default {
  css: `my-tag { color: red; }`, // コンポーネントのcss文字列
  template: function() {}, // 内部Riotテンプレートファクトリ関数
  exports: {}, // コンポーネントイベントとライフサイクルメソッド
  name: 'my-tag' // コンポーネントID
}
```

**ひとつのタグファイルに含まれるタグ定義は、ひとつだけです。**

## インブラウザ・コンパイル

`riot+compiler.js`によるバンドルは、素早くひな型を作ってテストできるよう、ブラウザでタグを直接コンパイルし、実行する機能を提供しています。
以下のように、`<script>`タグの属性に`type="riot"`を指定することで、Riotタグをブラウザにロードすることが可能です：

``` html
<!-- マウント位置 -->
<my-tag></my-tag>

<!-- <my-tag/> は外部ファイルで指定されています -->
<script src="path/to/javascript/my-tag.riot" type="riot"></script>

<!-- riot.jsとコンパイラを含める -->
<script src="https://unpkg.com/riot@{{ site.data.globals.version }}/riot+compiler.min.js"></script>

<!-- コンパイルとマウント -->
<script>
(async function main() {
  await riot.compile()

  riot.mount('my-tag')
}())
</script>
```

この場合、Riotは全ての`export default`式を内部的に、ブラウザ表示に適した形に変換しますが、まだJavaScriptモジュールをサポートしていないことに注意してください。

Riotは、`<script>`を通じてDOMにインクルードされた全ての外部タグを非同期にコンパイルし、`riot.mount`でそれらを描画することが可能です。

ブラウザによるRiotスクリプトタグのプリフェッチ機能を抑止し、同じリソースを複数回ロードすることを防ぐため、`<script>`タグの`src`属性の代わりに`data-src`属性を使いたい場合があるかも知れません。Riotは自動的に、ajaxによってタグをフェッチしてコンパイルします。

## プリコンパイル

The Compilation phase is asynchronous and it will not block your application rendering. However you should use the browser compilation only for prototyping or for quick experiments.

コンパイルは非同期に行われ、描画処理をブロックしません。しかし、インブラウザ・コンパイルはひな型作成と簡単な確認のためだけに使うべきです。

Pre-compilation on gives you following benefits:

{'fraction_non_alphanumeric': 0.11802088061734, 'fraction_numerical': 0.0, 'mean_word_length': 6.073836276083467, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2431168', 'n_tokens_mistral': 2326, 'n_tokens_neox': 2153, 'n_words': 355}