JavaScriptを使ってみよう

このチュートリアルでは、JavaScriptまたはTypeScript向けのクライアントライブラリである　xrpl.js　を使用して、Node.jsまたはウェブブラウザでXRP Ledgerに接続されたアプリケーションを構築するための基本的な手順を説明します。

本ガイドで使用しているスクリプトや設定ファイルは、本サイトのGitHubリポジトリで公開されています。

学習目標

このチュートリアルでは、以下のことを学びます。

XRP Ledgerベースのアプリケーションの基本構成要素。
xrpl.jsを使ったXRP Ledgerへの接続方法。
xrpl.jsを使ったテストネットでのウォレット生成方法。
xrpl.jsライブラリを使った、XRP Ledgerアカウント情報の検索方法。
How to put these steps together to create a simple JavaScript app or web-app.

前提条件

このチュートリアルを実行するには、JavaScriptでコードを書き、小さなJavaScriptプロジェクトを管理することにある程度慣れている必要があります。ブラウザでは、JavaScriptをサポートする最新のWebブラウザであれば問題なく使用できます。Node.jsでは、バージョン14を推奨します。Node.jsのバージョン12と16も定期的にテストされています。

npmを使用したインストール

空のフォルダを作成して新しいプロジェクトを開始し、そのフォルダに移動してNPMで最新版のxrpl.jsをインストールします。

npm install xrpl

作り始めましょう

XRP Ledgerを使用する際には、XRPをウォレットに追加したり、分散型取引所と統合したり、トークンを発行したりと、管理しなければならないことがいくつかあります。このチュートリアルでは、これらすべてのユースケースを始めるための共通の基本パターンを説明し、それらを実装するためのサンプルコードを提供します。

多くのXRP Ledgerプロジェクトで使用している手順をご紹介します。

ライブラリのインポート
XRP Ledgerへの接続
ウォレットの作成
XRP Ledgerの参照
イベントのListen

1. ライブラリのインポート

プロジェクトに xrpl.js をどのように読み込むかは、開発環境によって異なります。

ブラウザ

以下のような<script>タグをHTMLに追加してください。

<script src="https://unpkg.com/[email protected]/build/xrpl-latest-min.js"></script>

上記の例のようにCDNからライブラリをロードすることも、リリースをダウンロードして自分のウェブサイトでホストすることもできます。

これは、モジュールを xrpl としてトップレベルにロードします。

Node.js

npmを使って、ライブラリを追加します。これにより、package.jsonファイルが更新されます。まだ存在していなければ新しいファイルが作成されます。

npm install xrpl

その後、ライブラリをインポートします。

const xrpl = require("xrpl")

2. XRP Ledgerへの接続

参照や取引を行うには、XRP Ledgerへの接続を確立する必要があります。xrpl.jsでこれを行うには、Clientクラスのインスタンスを作成し、connect()メソッドを使用します。

Tip: xrpl.js の多くのネットワーク関数は、Promisesを使って非同期に値を返します。ここで紹介するコードサンプルでは、async/await パターンを使用して、Promises の実際の結果を待ちます。

// In browsers, use a <script> tag. In Node.js, uncomment the following line:
// const xrpl = require('xrpl')

// Wrap code in an async function so we can use await
async function main() {

  // Define the network client
  const client = new xrpl.Client("wss://s.altnet.rippletest.net:51233")
  await client.connect()

  // ... custom code goes here

  // Disconnect when done (If you omit this, Node.js won't end the process)
  await client.disconnect()
}

main()

XRP Ledger メインネットへの接続

前節のサンプルコードでは、利用可能な並列ネットワークの1つであるTestnetに接続する方法を紹介しました。本番環境に移行するには、XRP Ledger Mainnetに接続する必要があります。それには2つの方法があります。

コアサーバをインストール (rippled)して、自分でノードを動かしてみましょう。コアサーバはデフォルトではMainnetに接続しますが、設定を変更してTestnetやDevnetを使うこともできます](connect-your-rippled-to-thexrp-test-net.html)。独自のコアサーバを運用するのには良い理由があります。独自のサーバを走らせた場合、次のようにして接続することができます。
```
const MY_SERVER = "ws://localhost:6006/"
const client = new xrpl.Client(MY_SERVER)
await client.connect()
```
デフォルト値の詳細については、コアサーバ設定ファイルの例をご覧ください。

利用可能な公開サーバを利用する:

const PUBLIC_SERVER = "wss://xrplcluster.com/"
const client = new xrpl.Client(PUBLIC_SERVER)
await client.connect()

3. ウォレットの作成

xrpl.js ライブラリには、XRP Ledgerアカウントのキーとアドレスを扱うための "Wallet "クラスが用意されています。Testnetでは、次のようにして新しいウォレットに資金を供給することができます。

  // Create a wallet and fund it with the Testnet faucet:
  const fund_result = await client.fundWallet()
  const test_wallet = fund_result.wallet
  console.log(fund_result)

キーを生成するだけであれば、次のように新しいWalletインスタンスを作成することができます。

const test_wallet = xrpl.Wallet.generate()

また、base58でエンコードされたシードをすでに持っている場合は、次のようにしてそのシードからWalletをインスタンス化することができます。

const test_wallet = xrpl.Wallet.fromSeed("sn3nxiW7v8KXzPzAqzyHXbSSKNuN9") // テスト用シークレット、本番環境では使用しないでください

4. XRP Ledgerの参照

クライアントのrequest()メソッドを使って、XRP LedgerのWebSocket APIにアクセスします。例えば、以下のようになります。

  // Get info from the ledger about the address we just funded
  const response = await client.request({
    "command": "account_info",
    "account": test_wallet.address,
    "ledger_index": "validated"
  })
  console.log(response)

5. イベントのListen

XRP Ledgerのコンセンサスプロセスが新しいレジャーバージョンを生成したときなど、xrpl.jsではさまざまなタイプのイベントのハンドラを設定することができます。そのためには、まずsubscribeメソッドを呼び出して欲しいイベントの種類を取得し、クライアントのon(eventType, callback)メソッドを使ってイベントハンドラをアタッチします。

  // Listen to ledger close events
  client.request({
    "command": "subscribe",
    "streams": ["ledger"]
  })
  client.on("ledgerClosed", async (ledger) => {
    console.log(`Ledger #${ledger.ledger_index} validated with ${ledger.txn_count} transactions!`)
  })

作り続けましょう

これで、xrpl.jsを使って、XRP Ledgerに接続したり、ウォレットを生成したり、アカウントの情報を調べたりする方法がわかりました。次のようなことも可能です。

概念:
- XRP Ledger Overview
- クライアントライブラリ
Tutorials:
- XRPの送信
References: