見出し画像

Lisk SDK (lisk-client)を使いながらJavaScriptを勉強してみない？ - その１ -

万博おじ

おはこんばんちは万博おじです。
今回から作っていきますよー！
で、前回すっかり忘れてたんですがLiskアカウントを作成して、テストネットでLSKを送るところまでを目標にやっていきますよ💪
なお、予定ではこんな感じ(変わるかもしれません)

  1. 準備

  2. JavaScriptの基本：パスフレーズを生成

  3. 文字列操作：パスフレーズからアドレスを取得

  4. 非同期処理：APIからアカウント情報を取得

  5. ループ処理：APIからトランザクション情報を取得

  6. トランザクションの生成と送信

  7. トランザクション手数料の取得

はじめに

今回は「JavaScriptの基本：パスフレーズを生成」です。
ぶっちゃけ、これわかればJavaScriptばっちり。
しばしお付き合いください🙂

前回

今回のお勉強用ソースコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>画面タイトルです</title>
		<script src="https://js.lisk.com/lisk-client-5.2.2.min.js" defer></script>
		<style>
			html { font-size: 10px; }
			
			body { font-size: 1.6rem; }

			input[type="text"],
			input[type="number"],
			input[type="password"],
			textarea,
			button {
				font-size: 1.6rem;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div>
			<button type="button" style="width: 150px;" onclick="createAccount()">アカウントを作成</button>
		</div>
		<hr>
		<h4>パスフレーズ：</h4>
		<div id="lisk-passphrase"></div>

		<script>
			/*
			 * アカウント作成処理
			 */
			function createAccount() {
				// パスフレーズを生成して画面に表示
				const mnemonic = lisk.passphrase.Mnemonic.generateMnemonic();
				document.querySelector("#lisk-passphrase").innerHTML = mnemonic;
			}
		</script>
	</body>
</html>

前回からの変更点

ボディ部が変わりました。
画面を表示するとこんな感じになります。

変更後の画面

「アカウントを作成」ボタンを押すとパスフレーズを表示します。

パスフレーズの一部を隠しています

ソースコードの説明：HTML

＜div＞～＜div＞

このタグ内に書いたものをブロック要素として1まとまりのグループと考える際に使いますが、とりあえず初めてHTMLを勉強する人は「改行される」ということだけ覚えておきましょう。
HTMLで頻繁に出現する超重要タグです。

ℹ️HTML内にdivを使わず以下のように書いた場合、画面には「あいうえおかきくけこ」と表示されます。(HTML内でいくら改行しても改行されません。)
<body>
    あいうえお
    かきくけこ
</body>

一方、以下のようにdivを使って書いた場合は「あいうえお」の後に改行されて「かきくけこ」が表示されます。
<body>
    <div>あいうえお</div>
    <div>かきくけこ</div>
</body>

＜hr＞

罫線を引くタグです。
区切り線を引きたい場合に使います。
なお、閉じタグは不要です。

ℹ️罫線を引く方法はたくさんあるので、デザインする上であんまり使わないかもしれない😮

＜h4＞～＜/h4＞

見出しタグの１つです。
h1, h2, h3…
の順に文字サイズが小さくなります。
h6まであります。

ℹ️SEOを気にする場合には重要になりますが、個人サイトで検索エンジンなどの順位にこだわりがない場合はh○タグを使わずにCSSなどで文字サイズを変更して見出しのように使う場合もあります。

＜button＞～＜/button＞

ボタンを表示させるタグです。

ℹ️デフォルトのタイプはsubmitです。
ボタンを押して入力内容をサーバーに送信し、画面遷移などを行う場合に使用します。(その場合はformタグで囲っておく必要があります。)
ただし、今回のソースコードのようにサーバーに入力内容を送信せずに、JavaScriptの関数を呼ぶだけの場合はtype="button"としておくのがいいと思います。

style="…"

個別に適用したいスタイルを書きます。
ヘッダ部のstyle内に書いたものに加えて適用されます。

ℹ️とはいうものの、メンテナンス性を考えると個別に適用したいスタイルであってもこの方法で指定しない方がいいです。
なお、ボタンの横幅を150pxにするという意味で今回はbuttonタグにstyle="width: 150px;"としています。

id="…"

タグに識別子を付与します。
ここで指定した識別子(ID)はHTML上で一意でなくてはいけません。

ℹ️今回のソースではdivタグの1つにlisk-passphraseという識別子を付与しています。

onclick="…"

クリックした際のイベントを記載します。
JavaScriptの関数を呼び出す際に使います。

ℹ️インターネットでJavaScriptのイベント呼び出しについて検索すると、onclickなどでイベントを記載せずに、「addEventlistenerなどを利用してHTMLとJavaScriptを切り離すべき」といった記事が見つかることでしょう。
しかし、慣れていない人はまず動かすのが大事なので、そういった詳しい人向けの「～すべき」というものにあまり囚われすぎないようした方がやる気が長持ちします😂

ソースコードの説明：JavaScript(lisk-client)

ℹ️ヘッダ部で読み込むように指定しているlisk-clientは、liskという名前で使用することができます。

lisk.passphrase.Mnemonic.generateMnemonic()

Bip39の仕様則ったニーモニック(パスフレーズ)を生成します。

ℹ️lisk.passphrase.Mnemonic.generateMnemonic()は「lisk-client」内にある「passphrase」パッケージ内にある「Mnemonic」パッケージ内にある「generateMnemonic」という関数を呼び出すという意味です。(ピリオドが住所の区切りだと思ってもらえればOKです。)

ソースコードの説明：JavaScript

function createAccount()

「アカウントを作成」ボタンのonclickイベントから呼び出されます。
パスフレーズの生成と生成したパスフレーズを画面に表示します。

ℹ️JavaScriptの関数は function [関数名] という形式で定義します。
インターネットでJavaScriptの関数の作り方を検索すると無名関数などいろいろ出てくると思いますが、この書き方が基本形なのでとりあえずこの書き方を覚えておきましょう。

const [定数名]

定数を定義します。

ℹ️お勉強用ソースコードでは const mnemonic = lisk.passphrase.Mnemonic.generateMnemonic() なっているため、mnemonicという名前の定数に生成したパスフレーズが設定されます。
なお、定数は値の再設定(定義した際の値からの変更)が出来ません。
例えば
const hoge = 1;
hoge = 2;
とするとエラーになります。
設定した値を変える必要がある場合は変数(let)で定義しましょう。
※関数から取得した値をプログラム上で変更するような場面はあまりありません。なので、(変数に入れたくなりますが)しょうもないバグを産まないためにもできる限り const を使うことを心がけましょう。

ℹ️let について
let は変数を定義する際に使用します。
「JavaScriptの変数といったら var じゃないの？」と思った人、「そんなものはなかった。いいね？」
これからは let を使用しましょう。

document.querySelector("#lisk-passphrase").innerHTML = mnemonic;

生成したパスフレーズを id="lisk-passphrase" が指定されている場所に表示します。

ℹ️document.querySelectorについて
document.querySelector("#hoge") とすると id="hoge" が定義された情報(DOM)を取得することができます。
また、document.querySelector(".fuga") とすると class="fuga" が定義された情報(DOM)を取得することができます。

以前JavaScriptをやったことがある人は「おや？」と思うかもしれません。
そうです、document.getElementById や document.getElementsByClassName と同じことをセレクタ(#や.など)を使って行うことができます。(jQueryを使ったことがある人にはお馴染みですね)
便利なのでこちらで覚えておきましょう😊
なお、querySelectorは1つ目の要素しか取得できないため、複数要素を取得したい場合はquerySelectorAllを使用します。

ℹ️innerHTMLについて
取得した要素にHTML要素として値を設定(取得)します。

例えば以下のような場合
<div id="hoge">あいうえお</div>
const hoge = document.querySelector("#hoge").innerHTML;
とすると 定数hogeには「あいうえお」という文字列が入ります。

また document.querySelector("#hoge").innerHTML = "あたい"; とすると
<div id="hoge">あたい</div>
に書き換わります。

パスフレーズについて

パスフレーズという考え方はLisk特有のものではありません。
ハードウェアウォレットのリカバリーフレーズなどにも同じものが使用されたりしています。
なので、Lisk同様Bip39の仕様に準拠している場合は同じパスフレーズを使うことができますが、パスワードを使いまわしているようなものなのでおススメはしません。

⚠️パスフレーズをインターネット上に公開することは絶対にしてはいけません。また、誰かに聞かれても教えてはいけません。
もしそんなことをすると、大切な資産が奪われてしまう可能性があります😨

おわりに

今回はここまで！お疲れさまでした！
パスフレーズの生成をしつつJavaScriptを書いてみました。
今回は関数を作ったり変数・定数の違いといったJavaScriptの基本から、Liskで重要なパスフレーズについて記載したので、内容がちょっと難しかったかもしれませんね。。😅
次回は今回よりは優しくなるはずです🤣

万博おじについて

Liskに関するツールなど開発したりノード管理したりしています。
何かあればTwitter等でご連絡ください。

個人アカウント
Twitter：ys_mdmg
GitHub：lisknonanika
Discord：ys_mdmg#5646
Lisk Explorer：lisk observer, lisk scan

デリゲートアカウント(共同管理)
Twitter：liskcommulab
Discord：CommuLab#0097
Lisk Explorer：lisk observer, lisk scan

管理
ノード：Mainnet / Testnet
Lisk Service：Mainnet / Testnet
デリゲートサイト：Lisk CommuLab

個人やデリゲート宛ての寄付ありがとうございます！
ノード管理や開発資金に充てさせて頂いています😊

この記事が気に入ったらサポートをしてみませんか？