【初心者向け】NEM LibraryとJavaScriptを使った開発にちょっとだけ入門してみる #JavaScript

この記事では、NEMを扱うための便利なライブラリである「NEM Library」と、その周辺技術（Node.jsなど）について解説します。

対象読者

NEMを使ったアプリケーション開発を行いたい方
JavaScriptで開発を行いたい方
JSの今時の開発方法がわからない方

NEM LibraryはJSのライブラリです。他の言語で開発したい方は次に紹介するリンク先を参考にしましょう。

また、現状フロントエンド開発においてソースコードのトランスパイルは必須です。こちらを使うためのツール群に詳しくない方でもついていけるように書いたので、ここらへんが分かる方にとっては若干冗長かもしれません。

とはいえ、この記事自体かなり内容が易しめだと思うので、総じて初心者向けの記事です。詳しく知りたい方は、この記事からリンクしているライブラリのドキュメントを直接見てみてください😂

NEM Libraryとは？

NEMを扱うためのライブラリは、以下にまとめられています。

NEM – Distributed Ledger Technology (Blockchain) » Developers

JavaScriptを用いて開発するためのライブラリにはnem-apiというものがあるようですが、どうやらNEM Libraryの方が便利っぽい（使いやすい？）です。

詳細が気になる方は以下の記事も参考にしてみてください。

NEMライブラリープロジェクトの現状報告 - クリプトストリーム

NEM Libraryを使ってみる

それでは、さっそくNEM Libraryを使っていきましょう。

開発環境

最低限Node.jsが入っていれば十分です。ちなみに以下のバージョンで動作確認をしています。

node 8.9.1
npm 5.5.1
yarn 1.3.2

1. ライブラリをインストール

それでは開発を行いましょう。まずは適当なワークスペースを作り、必要なライブラリをインストールします。

$ mkdir nem-library-sample
$ cd nem-library-sample

この記事ではyarnを使います。入っていない方は入れておきましょう。

$ npm install -g yarn

以下のコマンドを打ち込み、バージョンが確認できればインストールは成功です。

$ yarn -v
1.3.2

2. ライブラリと開発環境を入れる

開発するためのライブラリを入れていきましょう。

まずはNEM Libraryを入れます。

$ yarn add nem-library

次に、JavaScriptの新しい記法で開発するためのツールを入れていきます。NEM LibraryはTypeScriptでの開発も良いと思いますが、この記事では簡単のためbabelのみ使います。

$ yarn add -D babel-cli babel-preset-env

次に、.babelrcというファイルを作り、以下のように記述します。

.babelrc

{
  "presets": ["env"]
}

そして、package.jsonに以下のように書き加えます。

package.json

{
  "dependencies": {
    "nem-library": "^0.10.0"
  },
+ "scripts": {
+   "build": "babel src -d lib"
+ },
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.32",
    "@babel/preset-env": "^7.0.0-beta.32"
  }
}

これにて開発準備は完了です。

3. 実際にコードを書いてみる

それでは、NEM Libraryのドキュメントを参考にコードを動かしてみましょう。

srcディレクトリを作り、その中にindex.jsを作ります。

そして、index.jsに以下のように書いてみましょう。

index.js

import {AccountHttp, NEMLibrary, NetworkTypes, Address} from "nem-library";

// Initialize NEMLibrary for TEST_NET Network
NEMLibrary.bootstrap(NetworkTypes.TEST_NET);

const address = new Address("TALICEROONSJCPHC63F52V6FY3SDMSVAEUGHMB7C");

const accountHttp = new AccountHttp();
accountHttp.getFromAddress(address).subscribe(accountInfoWithMetaData => {
    console.log(accountInfoWithMetaData);
});

上記のように書いたら、これをビルドします。コマンドはyarn run buildです。

$ yarn run build

すると、lib/index.jsができると思うので、こちらを動かしてみましょう。以下のように表示されれば成功です。

$ node lib/index.js
AccountInfoWithMetaData {
  balance:
   Balance {
     balance: 50482710823914,
     vestedBalance: 50482622997125,
     unvestedBalance: 87826789 },
  importance: 0.005727549928501352,
  publicAccount:
   PublicAccount {
     address:
      Address {
        value: 'TALICEROONSJCPHC63F52V6FY3SDMSVAEUGHMB7C',
        networkType: 152 },
     publicKey: '74375c15c6ce6bdbde59be88a069745a0de34444ea933f8c9f46ef407cf30196' },
  harvestedBlocks: 134648,
  cosignatoriesCount: undefined,
  minCosignatories: undefined,
  status: 'UNLOCKED',
  remoteStatus: 'INACTIVE',
  cosignatoryOf: [],
  cosignatories: [] }

4. 簡単な解説

では、少しだけコードの解説をしていきます。

NEMでは、開発用の環境ということでテストネットが用意されているので、今回はそれを使うということで最初にNEMLibrary.bootstrap(NetworkTypes.TEST_NET)と書いています。

これはNEM Libraryを使うとき、最初に行う必要がある初期化処理です。本番環境ではこれをMAIN_NETにします。

以降のコードは、わりと分かりやすいと思います。new Address("...")でアドレスを指定して、accountHttp.getFromAddress()にてアドレス情報を取得しています。

こういった記法が可能なのは、NEM LibraryがRxJSで書かれているからです。

RxJSについては自分もあまり詳しくないので、気になる方は以下の記事あたりを参考にしてみてください。

RxJS を学ぼう #1 – これからはじめる人のための導入編 – NET BIZ DIV. TECH BLOG

さいごに

今回動かしたコードは以下のリンク先のものです。

AccountHttp usage | Account - NEM Library

ドキュメントはわりとしっかしているので、今回の記事で雰囲気がつかめた方はそこまで苦労せずに開発に移行できるのではないでしょうか。

NEMを使ったアプリケーション開発は、Webの経験がある方ならすんなりと始められると思います。自分もNEMessageというサイトを公開しています（まぁこれはNEM LibraryではなくNEM-sdkを使っているんですけどね😅）。

自分はまだあまり開発できていませんが、機会があればNEM Libraryを使って何かNEMの特性を生かしたアプリケーションを作っていきたいです💪