blob: 0c2d98658e1f1da9eff4ac50b818f4e253eb9685 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
title: WebAssembly テキストフォーマットから wasm に変換する
slug: WebAssembly/Text_format_to_wasm
tags:
- WebAssembly
- assembly
- conversion
- text format
- wabt
- wasm
- wast2wasm
- wat2wasm
translation_of: WebAssembly/Text_format_to_wasm
---
<p>{{WebAssemblySidebar}}</p>
<p class="summary">WebAssembly にはS式ベースのテキスト表現があります。これはテキストエディタ、ブラウザの開発者ツールなどで見せるために設計された中間表現です。この記事では、これがどのように動作するか、テキスト形式のファイルを <code>.wasm</code> アセンブリ形式に変換するのに利用可能なツールの使用方法について少し説明します。</p>
<div class="note">
<p><strong>注</strong>: テキスト形式のファイルは通常 <code>.wat</code> という拡張子で保存されます。場合によっては <code>.wast</code> も使われます。これはアサーションなどの変換時に .wasm に含まれない特別なテストコマンドを含むファイルを指します。</p>
</div>
<h2 id="A_first_look_at_the_text_format" name="A_first_look_at_the_text_format">はじめてのテキストフォーマット</h2>
<p>簡単な例を見てみましょう。次のプログラムは <code>imports</code> というモジュールから <code>imported_func</code> という名前の関数をインポートし、<code>exported_func</code> という名前の関数をエクスポートしています:</p>
<pre class="brush: wasm; notranslate">(module
(func $i (import "imports" "imported_func") (param i32))
(func (export "exported_func")
i32.const 42
call $i
)
)</pre>
<p>WebAssembly 関数 <code>exported_func</code> は私達の環境 (WebAssembly モジュールを使用しているウェブアプリケーションなど) で使用するためにエクスポートされます。この関数が呼び出されたとき、インポートされた JavaScript 関数 <code>imported_func</code> パラメータとして値 (42) を渡して実行されます。</p>
<h2 id="Converting_the_text_.wat_into_a_binary_.wasm_file" name="Converting_the_text_.wat_into_a_binary_.wasm_file">テキストの .wat ファイルからバイナリの .wasm ファイルに変換する</h2>
<p>上の <code>.wat</code> テキスト表現の例を <code>.wasm</code> アセンブリ形式に変換してみましょう。</p>
<ol>
<li>はじめに、上のコードをテキストファイルにコピーして <code>simple.wat</code> という名前のファイルを作成します。</li>
<li>このテキスト表現をブラウザが実際に読み込んで利用可能なアセンブリ言語にアセンブルする必要があります。 このために wabt ツールを使用することができます。これは WebAssembly のテキスト表現から wasm 変換する、または逆に変換するコンパイラ(加えてもう少し別のツール)が含まれます。<a href="https://github.com/webassembly/wabt">https://github.com/webassembly/wabt</a> に行って、今ページに従ってツールの設定をします。</li>
<li>ツールをビルドしたら、システム <code>PATH</code> に <code>/wabt/out</code> ディレクトリを追加します。</li>
<li>次に、wast2wasm プログラムを実行します。入力ファイルパス、続いて <code>-o</code> パラメータ、出力ファイルパスを指定します:
<pre class="brush: bash; no-line-numbers notranslate">wat2wasm simple.wat -o simple.wasm</pre>
</li>
</ol>
<p>これで <code>simple.wasm</code> という名前のファイルに wasm が出力されます。これには <code>.wasm</code> アセンブリのコードが含まれます。</p>
<div class="blockIndicator note">
<p><strong>注</strong>: wasm2wat を使用して wasm から テキスト表現に戻すことができます。例: <code>wasm2wat simple.wasm -o text.wat</code>.</p>
</div>
<h2 id="Viewing_the_assembly_output" name="Viewing_the_assembly_output">アセンブリの出力を見る</h2>
<p>出力されたファイルはアセンブリベースなので通常のテキストエディタで表示することができません。ただし、wat2wasm ツールの <code>-v</code> オプションを使用して見ることができます。以下を試してみてください:</p>
<pre class="brush: bash; no-line-numbers notranslate">wat2wasm simple.wat -v</pre>
<p>ターミナルには次のように出力されるでしょう:</p>
<p><img alt="several strings of binary with textual descriptions beside them. For example: 0000008: 01 ; section code " src="https://mdn.mozillademos.org/files/14653/assembly-output.png" style="display: block; margin: 0px auto;"></p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/WebAssembly/Understanding_the_text_format">WebAssembly テキストフォーマットを理解する</a> — テキスト形式のシンタックスの詳細説明。</li>
<li><a href="/ja/docs/WebAssembly/C_to_wasm">C/C++ から WebAssembly にコンパイルする</a> — Binaryen/Emscripten のようなツールはソースコードを wasm にコンパイルし、JavaScript のコンテキストでモジュールを実行するために必要な API コードを作成します。それらの使用方法の詳細はこちらから探してください。</li>
<li><a href="/ja/docs/WebAssembly/Using_the_JavaScript_API">WebAssembly JavaScript API の使用</a> — WebAssembly API コードがどのように機能するかについて詳しく知りたい場合はこちらをお読みください。</li>
<li><a href="https://webassembly.github.io/spec/core/text/index.html">Text format</a> — WebAssembly GitHub レポジトリのテキスト形式の詳細説明。</li>
<li><a href="https://github.com/xtuc/webassemblyjs/tree/master/packages/wast-loader">wast-loader</a> — あなたのためにこれをすべて処理する WebPack のローダーです。</li>
</ul>
|
