第５回 solidity学習会 講義ノート（3/19 AM8:00~）
こんにちは、CryptoGamesの高橋です。
クリスペの会社です。
また、CryptoMaidsのアンバサダーも務めさせていただいております。
今回は、3/19 AM8:00から次の場所で勉強会を行いますので、その講義ノートの公開です。
場所 https://meet.google.com/zme-pohq-hcm
予習や復習などに役立てていただければ幸いです。
はじめる前に
・実施はテストアカウントで行うことを推奨いたします。
Rinkebyというテストネットで実施を行いますが、操作を誤ってしまったときに実際のETHが使われないためです。
では、やっていきましょう。
１ 擬似ランダム性の作成について
Lootは擬似乱数を使い、値の取得やレア度の設定を行っています。
今日はそちらを見ていきましょう。
こちらがLootのコードです。
https://etherscan.io/address/0xff9c1b15b16263c61d017ee9f65c50e4ae0113d7
１ー１ keccak256について
次の箇所でrandom関数が定義されています。
ポイントはkeccak256です。
こちらにあるように、Keccak-256のハッシュを計算します。
１ー２ Keccak256を触ってみよう
実際に触ってみるとイメージがつきやすいと思います。
下のように、一意のハッシュに変換されます。
一文字違うだけでも、全く違うハッシュが生成されます。
しかし、例えば「yuki」に対しては、いつ実行しても、必ず「d203…」というハッシュが生成されます。
そのため、何を入力するかが事前にわかれば、結果はわかってしまいます。
そのため、完全なランダムではありません。
１ー３ （疑似）ランダムな値から分岐をさせよう
ランダムな分岐は特定の数で割った余り（%）を使うと便利です。
例えば、10で割った余りは0 ~ 9 の10通りです。
0,1の時がレアであるというような設定をすればレア分岐を行うことができます。
１ー４ 配列からランダムに取り出す
次は、配列からどのようにランダムな値を取り出すのかを見てみましょう。
結論としては次のように求められます。
ランダムな数を配列の長さで割った余り
下のように具体的に見てみましょう。
このように配列の長さで割った余りを使うと、必ず配列の中のどれかの値を取ることができます。
２ pluck関数を見てみましょう。
これは、次のようなことをしています。
・配列からランダムに値を取る
・一定確率でレアをつける
２ー１ レア度の分岐を見てみよう
まずは、下の1508行目を見てみましょう。
ランダムな値を21で割った余りを求めています。
これによってgreatnessには0~20の値が入っています。
これを利用して、次のようになっています。
①0 ~ 14の時 ⇨ ノーマル
②15〜18の時 ⇨ suffixが付く
③19の時 ⇨ suffix, namePrefix, nameSuffixの３つが付く
④20の時 ⇨ suffix, namePrefix, nameSuffixの３つにさらに「+1」が付く
例えば、下のケースでは、「necklace」の時に、greatnessが20になっていたことがわかります。
２ー２ 配列からの取得を見てみよう
ここでは、suffixesを見てみましょう。
下のように、16個の値が入っています。
仮にrandの値が100の時、16で割った余りは4になります。
suffixes[4]の値を確認し、「of Perfection」が入ることがわかります。
３ privateとinternalの違いは
どちらも、利用が制限されているイメージですが、違いはなんでしょう？
違いは継承先で使えるか否かです。
privateはそのコントラクト内でしか使用することができません。
一方、internalは、そのコントラクトに加え、継承先でも使用ができます。
４ viewとpureの違いについて
viewとpureの違いも押さえましょう。
違いはチェーンに書かれた値を取得できるか否かです。
viewという修飾子がつくと、値の書き換えができません。
pureはそれだけでなく、値を取得することもできません。
５ pluckでテストしてみよう
では、pluckが取っている値を実際に見てみましょう。
簡単なテストコントラクトを作ったので、これで見ていきましょう。
https://rinkeby.etherscan.io/address/0x76259cd00e0a579e03bd80383292b7443e7a0476#code
仮に「WEAPON1」を入れると、下のようになりました。
これは、実際のLootの結果と一致しております。
６ ランダムで変わる図形を作っていこう
今回は、下のようなコントラクトを作っていきたいと思います。
コードはこちらです。
コードを見ながらやっていきましょう。
https://testnets.opensea.io/collection/loot-ggmrqfil9b
６ー１ pluck関数を変えよう
今回、レア度設定は行いません。
そのため、下のレア度が関係する箇所を削除しましょう。
変更すると、オレンジ色の警告が出ます。
内容は「view」ではなく「pure」にするようにとの内容です。
変更前までは、suffixes[]などのチェーン上の情報を直接見に行っていました。
しかし、変更後は、渡された値（引数）しか使っていないため、「pure」にするように警告が出ていました。
変更していきましょう。
５ー２ 文言を変えよう
次に、下の箇所を「Circle Collection」に変えてみましょう。
５ー３ 円のサンプルを書こう
下のように、円のサンプルを記入します。
その上で、どの値を変化させるのかを決めましょう。
今回は、次の３つを変化させようと思います。
① r（半径）
②stroke（円周の色）
③stroke-width（円周の太さ）
<circle cx="175" cy="175" r="50" stroke="blue" stroke-width="5" fill="none" />５ー４ 値を格納する配列を書こう
他のコードを参考に、値を格納する配列を書いてみましょう。
こんな感じで書いてみました。
５ー５ get関数を書いてみよう
次は、他のコードを参考に、getする関数を書いてみましょう。
複数形など、スペル誤りに注意してください。
５ー６ SVG箇所を作っていこう
５ー６ー１ SVG部分を分割する
まずは、下のように、分割しましょう。
値の部分は関数で補うため、それ以外の部分を繋げていきます。
５ー６ー２ 関数を変更しよう
関数部分を全チャプターで作った関数に変更しましょう
５ー６ー３ 末尾に</svg>を加える
下のようにSVGの最後に</svg>を加えましょう
５ー６ー４ 使わない箇所を消そう
下のようにparts[9]以降は使わなくなったので、削除しましょう。
５ー６ー５ 配列の数を変更しよう
配列の数が0~8の9個となったので、下のように変更しましょう
５ー７ 背景色を変更しよう
今回、背景色も、次のように変えてみましょう。
５ー８ 使わない配列や関数を削除しよう。
下のようなLoot特有の配列などは今回使いませんので、削除しましょう。
これで、コードは完成です。
あとは、コンパイル〜ミント（今回はclaim）を行ってみましょう。
やり方はこちらをご参考ください。
今回は以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊