レッスン６：未知なる領域を開拓せよ⑥

新しい挑戦をすると、新しい発見に出会えるものです、、今回テストユーザーとしてSpeakeeアプリを触っておりまして、午後からも収録しようかなと考えております。Speakee開発者の投稿もあり、プログラミングをテーマにした音声を聞き、勉強している身としてはとてもありがたいお話を聴けていて嬉しく思っております。

収録の内容にしようと思ったのは、何を開発したくてプログラミングを学んでいるか、、という事について話したいと思っております。

正直なところ、これ！といった物を作りたいというわけではなく、プログラミングを通じて、どういう流れで、どのようにしてアプリやサービスが作られていくのかの一連のプロセスを知りたい、というのが今の一番の目的でして、、このSolidityを学べるCryptoZombiesの学習に関しても、どういう仕組みになってて、どのようにブロックチェーンを使うのだろうか、、という疑問を解決するために、実戦で学んだ方が理解できるだろう、、と思ったから学んでいるんだと思います。

実際に作れるようになるまで時間はかかるとは思いますが、作れるようになると一連の必要な作業がわかり、意味もある程度は理解できて、そこから改ざんできない方が絶対的によいだろうと思うものをどんどん作っていきたいと考えています。

もともとゲームや漫画が大好きな人間なので、ゲームを作るもよし、漫画の見れるサイトをつくるもよし、地域密着のアプリをつくるもよし、パッと閃いたものを形にできる力が欲しくて、プログラミングを勉強すれば世界中の人たちと対話ができる、とも思ったのもまた事実、、

何が言いたいかはこんな感じでまとまっておりませんw

自分はどっちかっていうとその瞬間を直感で生きるような人間なので、台本とかを作っても忘れてしまうし、歌詞なんかも自分で作っておきながら間違えまくる人間なので、その都度違う内容になるけど、それでもしっかり対応できるくらいアドリバーになれる経験を、場数を踏みたいと思ってます。

書いててよくわからなくなってきたので、、
CryptoZombies、スタートしますw

CryptoZombies | イーサリアムでのゲーム開発を学ぶ

それでは開演します！

チャプター６：ゾンビ軍団の表示

実際にローンチするまでの間には、色々と通る道があるとの事で、その説明を全てしたならばCryptoZombiesだけでは収まらなくなってしまう、、からこそ、その部分は省略して、大事な部分だけ例を出してやりますよ、、、という事ですな。

このチャプターでは前回の記事で作成したが中身が空っぽの関数displayZombiesの実装に入りますな。上記はこの実装するにはどうしたらいいかが書かれています。

１は変化があった場合は元のデータは消去する。
２は各idでループさせゾンビ情報を探し出し、
３はゾンビを表示できるようにHTMLテンプレートに取り込み、#zombies divに追加する。

との事ですな。

<div></div>とは、division（分割）という意味で簡単にいうと、「要素をグループ化する」との事だ。zombiesをJS用にグループ化したということか、、

上記に掲載されているコードが各ゾンビにアウトプットするやり方の簡単な例だとの事。
<li>で囲まれている部分はzombie Structの内容である事はわかりますね。

<li></li>とは、、List Itemの略式でリストの項目を表示するタグ、との事。

上記コードが尻切れのため追記します。

% 7 + 1

head + “.png”

ここで思い出すべきは、ゾンビDNAがuint型の１６桁の乱数で生成されている点です。

頭に当たる部分は、16桁のうちの２桁で識別されるため、上記のコメントにあるように、整数を取得したら、headSrcという名前の要素のソースを指定できる属性に代入する、、、という事なのか？？

書いててよくわかっておりません、、、orz…

むむっ、オーバーレイ(OverLay)とな、、何かの表面を薄く覆う事、という意味で使われるそうだ、、

複雑な実装に関しては、その時がきたら勉強してくれ、と言っているようなので、ここでは一連の流れだけやっていくぞ！という事であろう、、

理解も進められぬまま、テストだ！！（ここで理解していこう！）

コーディングスペースを見て、違和感を感じたのだが、idsというのが渡させている、、、idではなく、、、おそらくこれは複数のidを扱うからidsとなったのだろうと予測して進めてみよう。

１では、#zombies divを空にすること、との事でやり方もかいてあるので、、

$(“#zombies”).empty();

となるのであろう。

２では、< b>全IDをループしたいとのことで、ループの仕方は書いてあるので、、

for (id of ids) {}

となります。

３では、forループ内に、Aを呼び出し、Bを使ってHTMLへ追加するようにせよ、とのことで、上のコードブロックをコピペせよとのことなので、、、

getZombieDetails(id)
.then(function(zombie) {

$(“#zombies”).append(`<div class=“zombie”>
<ul>
<li>Name: ${zombie.name}</li>
<li>DNA: ${zombie.dna}</li>

<li>Level: ${zombie.level}</li>

<li>Wins: ${zombie.winCount}</li>

<li>Losses: ${zombie.lossCount}</li>

<li>Ready Time: ${zombie.readyTime}</li>

</ul>

</div>`);

});

を丸ごと貼り付けます。

まとめると、、

$(“#zombies”).empty();
for (id of ids) {

getZombieDetails(id)
.then(function(zombie) {

$(“#zombies”).append(`<div class=“zombie”>
<ul>
<li>Name: ${zombie.name}</li>
<li>DNA: ${zombie.dna}</li>
<li>Level: ${zombie.level}</li>
<li>Wins: ${zombie.winCount}</li>
<li>Losses: ${zombie.lossCount}</li>
<li>Ready Time: ${zombie.readyTime}</li>
</ul>
</div>`);
});
}

となります。