xrpl-dev-portal/@i18n/ja/docs/tutorials/get-started/get-started-using-javascript.md

html, parent, seo, top_nav_name, top_nav_grouping, labels, showcase_icon

html	parent	seo	top_nav_name	top_nav_grouping	labels	showcase_icon
get-started-using-javascript.html	javascript.html	description XRP Ledgerを参照するためのエントリーレベルのJavaScriptアプリケーションを構築します。	JavaScript	始めましょう	開発	assets/img/logos/javascript.svg

JavaScriptを使ってみよう

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

本ガイドで使用しているスクリプトや設定ファイルは、{% repo-link path="_code-samples/get-started/js/" %}本サイトのGitHubリポジトリ{% /repo-link %}で公開されています。

学習目標

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

• 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プロジェクトで使用している手順をご紹介します。

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

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

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

ブラウザ

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

<script src="https://unpkg.com/xrpl@2.0.0/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 の実際の結果を待ちます。

{% code-snippet file="/_code-samples/get-started/js/base.js" language="js" /%}

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では、次のようにして新しいウォレットに資金を供給することができます。

{% code-snippet file="/_code-samples/get-started/js/get-acct-info.js" from="// Create a wallet" before="// Get info" language="js" /%}

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

const test_wallet = xrpl.Wallet.generate()

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

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

4. XRP Ledgerの参照

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

{% code-snippet file="/_code-samples/get-started/js/get-acct-info.js" from="// Get info" before="// Listen to ledger close events" language="js" /%}

5. イベントのListen

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

{% code-snippet file="/_code-samples/get-started/js/get-acct-info.js" from="// Listen to ledger close events" before="// Disconnect when done" language="js" /%}

作り続けましょう

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

• XRPの送信.
• 代替可能トークンの発行
• アカウントに安全な署名 を設定する。

関連記事

• 概念:
  • XRP Ledger Overview
  • クライアントライブラリ
• Tutorials:
  • XRPの送信
• References:
  • xrpl.js リファレンス
  • Public API Methods
  • API規約
    • base58 エンコード
  • トランザクションフォーマット

{% raw-partial file="/docs/_snippets/common-links.md" /%}