ブロックチェーンゲームの作り方1 基本編Part1

[Previous << User Signature](https://qiita.com/flowcadence/items/af846638da5bc2bb4bdc)
[Next >> 2 - 基本編Part2](https://qiita.com/flowcadence/items/bd9dd37723dab0557064)

https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#%E9%96%8B%E7%99%BA%E6%96%B9%E6%B3%95

:::note

**TL;DR 何がセットアップに必要?**
1. [VSCode](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#1-vscode%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89)(ご存知シェアNo.1コードエディター)
1. [VSCode Extention(Cadence)](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#3-vscode-extention%E3%82%92%E9%96%8B%E3%81%8F)
1. [Flow CLI](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#4-cadence%E8%A8%80%E8%AA%9E%E3%82%92%E6%9B%B8%E3%81%8F%E5%89%8D%E3%81%AB)
1. [`flow init`](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#5-flow%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E5%88%9D%E6%9C%9F%E5%8C%96)
1. [HelloWorld.cdc の作成](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#6-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
1. [flow.json でデプロイ用意](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#8-flowjson%E3%81%AB%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%AF%E3%83%88%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)
1. [`flow emulator` & `flow project deploy`](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#9-%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF%E8%B5%B7%E5%8B%95)
1. [Hello, World! の実行](https://qiita.com/flowcadence/items/8cc25249cda37364cac1#10-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%AF%E3%83%88%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80)

FCL (flow client library) はブラウザからスマートコントラクトにアクセスする為のライブラリです。今回はターミナルでHello World! を表示するだけなのでFlow CLI (command line interface) だけが必要です。

**Flow blockchainの特徴は"easy to build"** です。スマートコントラクト言語をjQueryみたいにスラスラとブロックチェーンに繋がるコードを書けて、ウォレットとの繋がり方やコマンドラインツールも、一貫して一つの理念のもとに開発の手が止まらないように書きやすく作られています。一度コードを書いてみるとその美しい文法スタイルから何て書きやすいプログラミング言語なんだ、と感じるはずです。Swift言語に酷似していますが、JavaScript(TypeScript)エンジニアとも相性が良いスマートコントラクト言語です。

ウォレットで作成したアカウントには無料でストレージが割り振られており<sup>[1]</sup>、自由に保存できます。そこに保存されるのは、コインやNFTなどの資産、スマートコントラクト、そして鍵です。ストレージの持ち主にしかこれらを移動させることができませんが、その内容を変更するトランザクションというのがあり、これを安全にプログラミングしてシステムを構築することができます。そして実際に移動します。コピーは不可能です。スマートコントラクトのデプロイ者はこの仕組みを使って世界中で事業を行うことができます。

[開発者紹介ビデオ](https://www.youtube.com/watch?v=ckQyjV6ay6c)(出資者パーティの様子): 8:30~ごろから開発メンバーの紹介があります。なんとこの中で出てくる[Cadence言語](https://github.com/onflow)メイン開発者、Bastianは今もずっとDiscord上で開発の質問に答えてくれてます。時々元Appleエンジニア(Keynote開発者;16:40頃~)で現在チーフアーキテクトをしているDieter(Dete)も開発チャンネルでコメントをくれますのでとても開発フレンドリーなブロックチェーンです。
:::

#### [Why Flow](https://qiita.com/flowcadence/items/b6acebdde2b9a6a417c3#flow-token)
> FLOW（または$FLOW）トークンは、Flowネットワークのネイティブ通貨です。開発者およびユーザーは、FLOWを使用してネットワーク上で取引(transact)を行うことができます。開発者は、ピアツーピア決済(他人同士の決済)、サービス料金徴収、または消費者向け特典(rewards)のために、FLOWを直接アプリに統合することができます。

ということでやっていきます、P2P(ピアツーピア)決済アプリ開発!

#### 1. VSCodeをダウンロード
以下URLからVSCodeをダウンロードします。(Macの方は赤枠の中のボタンを押してください)
https://code.visualstudio.com/download

![スクリーンショット 2024-12-29 9.59.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/5f383cce-a2ef-be02-c8fb-e3da9161b060.png)

#### 2. VSCodeを開く
自分がプロジェクトを開始したいフォルダを新規で作成しておいてください。作成が終わったらVS Codeを開いて以下の赤枠の中のリンクをクリックして、そのフォルダを開きます。
![スクリーンショット 2024-12-29 10.01.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/55510762-e903-7e0f-3494-f1ec624af21b.png)

#### 3. VSCode Extentionを開く

フォルダを開き終わったら以下のような画面になります。左端に四角が４つ繋がったようなアイコンが見えますのでそれをクリックします。
![スクリーンショット 2024-12-29 10.05.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/01153c91-94d7-455a-7860-f177232d02bf.png)

Search枠にCadenceと入力します。
![スクリーンショット 2024-12-29 10.06.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/6d3201d9-706a-6c16-24c2-81285381ecd5.png)

リストとして表示される検索結果から、一番上のCadenceを選択します。画面の中央に表示されるInstallボタンをクリックします。（画面の赤丸内に表示されます。ここではインストール済みのため表示されていません）

#### 4. Cadence言語を書く前に

ここにCadence言語でプログラミングを書いていくわけですが、その前にFlow CLIをインストールします。このCLIはブロックチェーンとやり取りする上で不可欠なコマンドを提供してくれます。

`Terminal` > `New Terminal`を選択してTerminalウィンドウを表示します。（画面赤枠）
![スクリーンショット 2024-12-29 10.36.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/9717ba23-9e9a-fcbe-1510-cf95ef5cd327.png)

以下URLを参考にして、インストールコマンドをTerminal内で実施します。

https://qiita.com/flowcadence/items/530223569e603e10e1a7

```ruby:Macの場合
brew install flow-cli
```
インストールが終わったら`flow version`コマンドをTerminalウィンドウ内で実施します。
```ruby
flow version
```
Output:
![スクリーンショット 2024-12-29 10.23.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/08feb61d-0d56-125f-6fd2-daa8f701925d.png)
*Version v1.9.2以降が出力されていれば、Cadence1.0に対応したバージョンです。*

(*`flow help` コマンドを入力すると、Flow CLIで実行可能なコマンドをリスト表示してくれます。*)

#### 5. Flowプロジェクトを初期化

Flow プロジェクトを初期化するために以下のコマンドを実行します。
```ruby
flow init
```

以下のような出力がされますのでHelloWorldと入力します。入力が終わったらEnterを押します。
![スクリーンショット 2024-12-29 10.38.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/c77eb223-ba88-babe-957c-f939a20ec6b6.png)

(*`Would you like to install any core contracts and their dependencies?:`
と表示された場合は、Noを選択します。*)

![スクリーンショット 2024-12-29 10.41.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/c6e23354-59b6-f447-36d5-ef94fd6050ab.png)

Terminalウィンドウに`🎉 Congrats! your project was created.`と表示され、画面の左側にHelloWorldフォルダと複数のファイルが表示されます。

#### 6. スマートコントラクトを作成する

`File` > `New File`を選択して、プロジェクトに新しいファイルを作成します。「`HelloWorld.cdc`」と入力してファイル作成を完了します。

![スクリーンショット 2024-12-29 10.46.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/444f1513-b788-fc43-7f3d-920a999cce0f.png)

ファイル名の左横にアイコンが表示されます。これはVSCodeが自動で`.cdc`のファイル名から判断して表示してくれています。`.cdc`はCadence言語のファイル拡張子です。

#### 7. スマートコントラクトコードを入力

以下のようにCadence言語のコードを入力します。
```ruby
access(all) contract HelloWorld {
  
}
```

この2行目に以下のコードを入力します。
```ruby
  access(all) let greeting: String

  init() {
    self.greeting = "Hello, World!"
  }
```

コードは以下のことを示しています。
1. HelloWorldというスマートコントラクトを宣言します
1. コントラクトの中にgreetingという変数を宣言します。変数はデータを保存することができます。`String`はテキストデータを保存することができます。
1. この変数に初期値として"Hello, World!"というデータをセットしました。


![スクリーンショット 2024-12-29 12.06.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/fa44e4f6-6009-4970-81d3-de4045bc4661.png)

#### 8. `flow.json`にコントラクトを設定する

`flow.json`を開いて`contracts`の下に`"HelloWorld": "./HelloWorld.cdc"`を書きます。
![スクリーンショット 2024-12-29 11.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/f0ce1fbd-d2d8-b650-c0d3-0b4f59893ce5.png)

`contracts`と同じ階層に`deployments`のブラケットを作り、その下に`emulator`のブラケットを作ります。この中にアカウントを指定するのですが、`accounts`を見ると、`"emulator-account"`がありますので、それを使ったブラケットを作り、その中にデプロイするコントラクト名を入れます。下図:

![スクリーンショット 2024-12-29 12.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/959efd17-cabc-7159-8b57-de676d07057a.png)

`emulator`はネットワークの一種で、コントラクトをデプロイすることができます。

#### 9. エミュレータ起動

以下のコマンドをTerminalウィンドウに入力して実行します。
```ruby
flow emulator -v
```
以下のようにエミュレータネットワークが起動しますので、Terminalウィンドウの右上の`+を`クリックして新しいTerminalウィンドウを開きます。
![スクリーンショット 2024-12-29 11.38.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/cffa71e1-4cb1-25ab-7a94-3aeb3ea3ecb5.png)

新しいウィンドウで以下を実行します。
```ruby
flow project deploy
```
エミュレータはあなたのマシンの中だけで動くネットワークですので、すぐにデプロイが完了します。
![スクリーンショット 2024-12-29 11.41.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/b5b06bcf-fcaa-4c3a-0f35-0c13d7537705.png)

Output:
```ruby
HelloWorld -> 0xf8d6e0586b0a20c7 
```
*`0xf8d6e0586b0a20c7`はデプロイされたアカウントのアドレスを示しています*

#### 10. スマートコントラクトのデータを読み込む

`HelloWorld.cdc`ファイルと同じ階層に`read_greeting.cdc`ファイルを作成します。
![スクリーンショット 2024-12-29 11.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/f396d24b-55ba-7754-d847-d547f12df939.png)

以下のコードを`read_greeting.cdc`ファイル内に書きます。
```ruby
import "HelloWorld"

access(all) fun main(): String {
  return HelloWorld.greeting
}
```
:::note
💡スマートコントラクトのデータを取得する関数は全て`main`関数から始まります。`: String`と後ろについているのはこの関数が`String`(文字列)を返すことを示しています。
:::

以下コマンドをTerminalウィンドウで実行します。
```ruby
flow scripts execute ./read_greeting.cdc
```
Output:
![スクリーンショット 2024-12-29 11.54.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/45fc69d5-7231-53d7-1023-65fc0d3544c7.png)

以上で、スマートコントラクトを実際にエミュレータにデプロイして、そのスマートコントラクトの変数を読み出すことができました。

`Day2`以降はこの`Day1`の内容を既に知っているものとして進めていきますので、`Day2`以降もこのページを振り返って、エミュレータにデプロイする方法を知っている前提で進めてください。

***
<b>[Previous << User Signature](https://qiita.com/flowcadence/items/af846638da5bc2bb4bdc)
</b>

[Flow blockchain / Cadence version1.0ドキュメント](https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#%E9%96%8B%E7%99%BA%E6%96%B9%E6%B3%95)

<b>[Next >> 2 - 基本編Part2](https://qiita.com/flowcadence/items/bd9dd37723dab0557064)</b>


<sup>1. ストレージはアカウント作成時に0.01FLOWを支払って用意されますが、そのストレージ費用はアカウント作成者が負担するので利用者にとっては無料になります。 [↩]()</sup>