Zenn
🔰

XRPLのJavaScript開発入門編

2024/04/29に公開
JavaScript
Node.js
#
web3
XRP Ledger
XRP Ledger
tech

XRPLとJavaScriptを用いて、開発進めるための入門編です。

XRPL、またはJavaScriptビギナー向けの内容ではありますが、大事な基礎となりますので是非理解しながら進めてみてください。

※このセクションの内容を実行するにはNode.jsのインストールが必要となります。

※また、この記事の内容は、最近作成中のサイト、XRPL道場でも紹介しています。

ゴール

  • JavaScriptのXRPLプロジェクトのつくり方の基本を覚えること
  • JavaScript向けのクライアントライブラリであるxrpl.jsの基本的な使用方法を理解すること
  • ウォレットの概念と仕組みを理解すること
  • コードベースで、テストネットに接続ができること
  • コードベースで、テストネットでトランザクションを送信できること

プロジェクトのセットアップ

  1. 新しいディレクトリを作成し、そのディレクトリ内で以下のコマンドを実行して、新しいNode.jsプロジェクトを初期化します。

    npm init -y

  2. xrpl.jsライブラリをプロジェクトにインストールします。

    npm install xrpl

テストネットに接続する

XRPLには、テストネットが用意されています。

テストネットを利用することで、開発者がメインネットを想定したプロダクト開発ができるようになっています。テストネットを利用する大きな理由としては、メインネットでは実際に手数料とアカウントの準備金としてのXRPのコストを負担をする必要があるからです。

以下が一般的に利用されるテストネット環境です。

wss://s.altnet.rippletest.net:51233

その他のテストネット環境もいくつか存在していますので、こちらを参考にしてください。

スクリプトを作成

  1. プロジェクトディレクトリにconnect.jsという新しいファイルを作成します。

  2. 以下のコードをconnect.jsに貼り付けます。

    const xrpl = require('xrpl'); // xrplライブラリを読み込みます。

async function main() {
  // async
  // Testnetサーバーに接続します。Testnetは、XRP Ledgerの開発用テストネットワークです。
  // xrpl.Clientクラスを使って、XRP LedgerのTestnetサーバーに接続するためのクライアントを作成します。
  const client = new xrpl.Client('wss://s.altnet.rippletest.net:51233');

  // client.connect()メソッドを呼び出して、サーバーに接続します。
  // awaitを使って、接続が完了するまで待機します。
  await client.connect();

  // 接続が成功したら、コンソールにメッセージを出力します。
  console.log('Connected to the XRP Ledger Testnet');

  // client.disconnect()メソッドを呼び出して、サーバーとの接続を切断します。
  client.disconnect();
}

main().catch(console.error);
// main関数を呼び出して、プログラムを開始します。
// catch(console.error)を使って、エラーが発生した場合はコンソールにエラーメッセージを出力します。

    このスクリプトは XRP Ledger の Testnet に接続し、成功したことをコンソールに表示後、接続を閉じるだけのシンプルな処理です。

スクリプトの実行

  1. コマンドラインで以下のコマンドを実行して、スクリプトを実行します。

    node connect.js

  2. 成功すれば、コンソールに以下が表示されます。

    Connected to the XRP Ledger Testnet

テストネットのアドレスとトークンを取得する

テストネットでは開発用としての、ネイティブトークンであるXRPを取得することができます。

以下のサイトではアドレスを指定して取得することができます。

アドレスを作成しつつ、取得も同時したい場合は以下でアカウントを取得しましょう。

スクリプトを作成

  1. プロジェクトディレクトリにsend_xrp.jsという新しいファイルを作成します。

  2. 以下のコードをcreate_wallet.jsに貼り付けます。

    const xrpl = require('xrpl');

async function main() {
  // Testnetサーバーに接続
  const client = new xrpl.Client('wss://s.altnet.rippletest.net:51233');
  await client.connect();

  // 送信用のウォレット情報を設定
  // これはサンプルであり、実際の秘密鍵を使用する場合は注意が必要です
  const sender = xrpl.Wallet.fromSeed('your_wallet_seed_here');

  // 送信先アドレスと送金額を設定
  const recipient = 'recipient_address_here';
  const amount = '100'; // 100XRP : 送信するXRPの量

  // トランザクションの準備
  const prepared = await client.autofill({
    TransactionType: 'Payment',
    Account: sender.address,
    Amount: xrpl.xrpToDrops(amount), // XRPをDropsに変換
    Destination: recipient,
  });
  console.log('Prepared transaction:', prepared);

  // トランザクションの署名
  const signed = sender.sign(prepared);
  console.log('Signed transaction:', signed);

  // トランザクションの送信
  const result = await client.submitAndWait(signed.tx_blob);
  console.log('Transaction result:', result);

  // 接続を閉じる
  client.disconnect();
}

main().catch(console.error);
    1. your_wallet_seed_hereには、テストネットの送信元アドレスのシークレットキーを入力してください。
    2. recipient_address_hereには、テストネットの送信先アドレスを入力してください。

スクリプトの実行

  1. コマンドラインで以下のコマンドを実行して、スクリプトを実行します。

    node send_xrp.js

    成功すれば、コンソールに以下が表示されます。

    Prepared transaction: {
    TransactionType: 'Payment',
    Account: 'r2UUsk6CLuLSDLYi5yhswa378tQ9cGLQW',
    Amount: '100000000',
    Destination: 'rHjHkeRJ7PMQXbghGKYL9NkTvksoixkojV',
    Flags: 0,
    NetworkID: undefined,
    Sequence: 230386,
    Fee: '12',
    LastLedgerSequence: 230412
}
Signed transaction: {
    tx_blob: '120000220000000024000383F2201B0003840C614000000005F5E10068400000000000000C7321ED4CA842EEAEF0676AE4DEA3E1ACFDB4C5EFBDC2034091627BF4BE1EE3683C948374408E6DEA70D583884639692A69CF0D76CC30FE368C41967B87FA5E717462F1F768DFE6205A285747963F52D7A61AAB77F09A967E9459C6770543ED1CF233EF8D0481140647116D6E951B75A250510595C2E2772F56584A8314B781779BC48D6A07B5685B1D2EBE7AE0F0B7B2EF',
    hash: '1E33DACD3868BE78F67B89D4A68914E139CBAB17078A15BE2210FBA2D952F30D'
}
Transaction result: {
    id: 12,
    result: {
        Account: 'r2UUsk6CLuLSDLYi5yhswa378tQ9cGLQW',
        Amount: '100000000',
        DeliverMax: '100000000',
        Destination: 'rHjHkeRJ7PMQXbghGKYL9NkTvksoixkojV',
        Fee: '12',
        Flags: 0,
        LastLedgerSequence: 230412,
        Sequence: 230386,
        SigningPubKey: 'ED4CA842EEAEF0676AE4DEA3E1ACFDB4C5EFBDC2034091627BF4BE1EE3683C9483',
        TransactionType: 'Payment',
        TxnSignature: '8E6DEA70D583884639692A69CF0D76CC30FE368C41967B87FA5E717462F1F768DFE6205A285747963F52D7A61AAB77F09A967E9459C6770543ED1CF233EF8D04',
        ctid: 'C00383FA00860001',
        date: 767641940,
        hash: '1E33DACD3868BE78F67B89D4A68914E139CBAB17078A15BE2210FBA2D952F30D',
        inLedger: 230394,
        ledger_index: 230394,
        meta: {
        AffectedNodes: [Array],
        TransactionIndex: 134,
        TransactionResult: 'tecUNFUNDED_PAYMENT'
        },
        validated: true
    },
    type: 'response'
}

  2. 表示されたhash値1E33DACD3868BE78F67B89D4A68914E139CBAB17078A15BE2210FBA2D952F30Dをテストネットのエクスプローラにて検索してみます。

    すると…UNFUNDED PAYMENTという表示がされていますが、これは送信に失敗している状態となります。

    実は、コンソールに表示されたTransactionResultフィールドの値を元に、結果を確認することができます！上記でTransactionResult: 'tecUNFUNDED_PAYMENT'と表示されていることを確認してください。

    このトランザクションを送信したアドレスはFaucetツールで100XRP発行されていますが、実際に使用できる残高は準備金として10XRPを除いた金額（約90XRP）となります。また送信時に手数料を支払う必要があるため、90XRPの送金でも失敗する可能性があるということを覚えておいてください。このようにトランザクションは厳密に検証されています。

  3. 次にsend_xrp.jsのソースをconst amount = '50';と変更してから、node send_xrp.jsコマンドを実行してみてください。

    Transaction result: {
    id: 12,
    result: {
        Account: 'r2UUsk6CLuLSDLYi5yhswa378tQ9cGLQW',
        Amount: '50000000',
        DeliverMax: '50000000',
        Destination: 'rHjHkeRJ7PMQXbghGKYL9NkTvksoixkojV',
        Fee: '12',
        Flags: 0,
        LastLedgerSequence: 230757,
        Sequence: 230387,
        SigningPubKey: 'ED4CA842EEAEF0676AE4DEA3E1ACFDB4C5EFBDC2034091627BF4BE1EE3683C9483',
        TransactionType: 'Payment',
        TxnSignature: '7998B34A2A0B574A878D7E3F2B852C2ACD0D752544AD77670242F9B27524949F45AF64BEFAA0296566CEAFCD6404E65347C2E8CAFA010A691B38F2736769A90A',
        ctid: 'C003855300000001',
        date: 767643022,
        hash: '8E6F6D695BA8EE2BCB2DE00336E51E6277F5F80DB12A553C099DCBB5ECB5E9C4',
        inLedger: 230739,
        ledger_index: 230739,
        meta: {
        AffectedNodes: [Array],
        TransactionIndex: 0,
        TransactionResult: 'tesSUCCESS',
        delivered_amount: '50000000'
    },
    validated: true
},

    今度は、TransactionResult: 'tesSUCCESS'とレスポンスが返ってきており、送金が成功していることを確認できました。

さいごに

ここまで完了できれば、クライアントライブラリであるxrpl.jsを利用することで、XRPの送金を簡単に行えることが理解できたと思います。

基本的にはトランザクションを送る方法はその他も同様です。もちろん送るデータ内容は異なりますが、例えば、TransactionType: 'Payment'と指定している箇所を別のTransactionTypeであるTrustSetに変更することで、トラストラインの実装が可能です。

このように一般的なWeb開発者や初心者でも簡単にパブリック・ブロックチェーンを利用できることが、XRPLのエコシステムの強みであると思います。

Discussion