メインコンテンツにスキップ

PTB BuilderでTSコードを生成

このレッスンでは、PTB Builderで作成したPTBのTypeScriptコードを確認し、PTB定義を .ptb ファイルとしてエクスポートする方法を学びます。とてもシンプルです。ボタンをクリックするだけです。

なぜエクスポートが便利？​

PTB Builderはビジュアルエディタで直感的にPTBを組み立てられる便利なツールです。しかし、実際のdApp開発では、コードでトランザクションを構築する必要があります。

エクスポート機能を使うと：

  • 複雑なトランザクションもGUIで直感的に構成し、コードとして出力できる
  • 実装のスタート地点として活用できる
  • 学習にも最適——コードの書き方がわからなくても、GUIで組み立ててエクスポートすれば参考になる

前提条件​

このレッスンを始める前に、以下が完了していることを確認してください：

ヒント

L10を完了していなくても大丈夫です。このレッスンでは、サンプルのPTBを使ってエクスポート機能を体験します。

PTB Builderでエクスポートを試そう​

以下のビジュアルエディタには、前回のレッスン（L10）で組み立てた「2つの送金を1つのトランザクションにまとめるPTB」があらかじめ読み込まれています。

左上のガイドに従って、エクスポートの手順を体験してみましょう。

ダウンロードした.ptbファイルをVSCodeで開こう​

エクスポートした .ptb ファイルはTypeScriptコードではなく、PTBのグラフ定義がJSON形式で保存されたファイルです。

VSCodeに Sui Extension がインストールされている状態で .ptb ファイルを開くと、Web版と同じPTB BuilderのUIが表示されます。VSCode上でもts-sdk previewウインドウからTypeScriptコードを確認できます。

つまり、.ptb ファイルを作成すれば、VSCode内でPTBを作成・編集することもできます。

VSCodeで.ptbファイルを開いた画面

ヒント

Sui Extensionのインストール方法は VSCodeにSui Extensionを導入する で紹介しています。

TSコードを確認しよう​

ts-sdk previewウインドウに表示されるTypeScriptコードは、以下のような構造になっています：

// Auto-generated from PTB Program (chain: sui:devnet)
import { Transaction } from '@mysten/sui/transactions';

const myAddress = '0xe8d3...'; // 接続中のウォレットアドレス
const tx = new Transaction();
tx.setSenderIfNotSet(myAddress);
// tx.setGasBudgetIfNotSet(500_000_000);

const sender_0 = myAddress;
const gas_0 = tx.gas;
const var_id_0 = 1000000000;
const var_id_1 = 2000000000;

const [out_1_0] = tx.splitCoins(gas_0, [var_id_0]);
tx.transferObjects([out_1_0], sender_0);
const [out_2_0] = tx.splitCoins(gas_0, [var_id_1]);
tx.transferObjects([out_2_0], sender_0);

export { tx };
コードの解説
  • Transaction クラスをインポートして、新しいトランザクションを作成
  • myAddress には接続中のウォレットアドレスが入る
  • gas_0 = tx.gas でガスコインを参照し、splitCoins で指定額を分割
  • transferObjects で分割したコインを sender_0（自分のアドレス）に転送
  • splitCoins → transferObjects → splitCoins → transferObjects の4つのコマンドが1つのPTBにまとまっている
  • export { tx } でトランザクションオブジェクトをエクスポート

成功の確認​

以下ができれば、このレッスンは完了です：

  • ts-sdk previewウインドウでTypeScriptコードを確認できた
  • 「Export」ボタンで .ptb ファイルをダウンロードできた
  • VSCode + Sui Extensionで .ptb ファイルをPTB Builderとして開けた

このレッスンでやったこと​

  • PTB BuilderのExport機能の目的を理解した
  • ts-sdk previewウインドウでTSコードを確認した
  • Exportボタンをクリックして、.ptbファイルをダウンロードした
  • VSCode + Sui Extensionで .ptb ファイルを開いた

次のステップ​

エクスポートしたコードは、上級コースで実際に使います。GUIで組み立てた内容がコードでどう表現されるか、この段階で確認しておくと、SDKを学ぶときの理解が深まります。