JSONをUnityで読み込んでみる



#JSONをUnityで読み込んでみる
一旦簡単な解説を殴り書きで書いてます。
また時間があれば詳しく書いていきたいと思います。


##そもそもJSONって何？？
めちゃくちゃ詳しく書くとこんな感じらしい
`JavaScript Object Notation（JSON、ジェイソン）はデータ記述言語の1つである。軽量なテキストベースのデータ交換用フォーマットでありプログラミング言語を問わず利用できる。名称と構文はJavaScriptにおけるオブジェクトの表記法に由来する。`
wikipediaから引用 https://ja.wikipedia.org/wiki/JavaScript_Object_Notation
簡単に言うと`ゲーム等で使うデータを保存するもの`という認識で概ねOK!
<br>
でも、まだ言葉だけだと難しいと思うので、実際にJSONを見てみましょう！
下の例は`Job`が`Attacker`で`Hp`が`100`あるキャラクターのJSONデータです
`{}` でデータ全体を括って、その中の左側にHpやJobといった`キー`,右側に100や"Attacker"といった`値`を記入します。
記入したデータのキーと値の間には`:`を書いて、データの区切りには` , `をつけましょう

```json:JSONの例
{
  "Hp" : 100,
  "Job" : "Attacker",
}
```
また、同じような形のJSONのデータセットを利用するために配列を使うこともできます

```json:JSONの例
[
  {
    "name": "Sato",
    "Hp" : 100,
    "Job": ["Attacker", "Healer"],
    "alive": true
  },
  {
    "name": "Mori",
    "Hp" : 20,
    "Job": ["Magician", "Teacher"],
    "alive": true
  }
]
```

##JSONをUnityで動かしてみよう
### 1. 必要なライブラリ2つをダウンロードしよう

JsonNode.cs

https://gist.github.com/asus4/7f7b5912d703f44c2711

MiniJSON.cs

https://gist.github.com/darktable/1411710

URL先の「Download ZIP」からダウンロードすることができます！
<img width="500" alt="how to dl" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/200f21b7-35f9-ed57-1edd-42630cf0c80b.png">

### 2. ライブラリをUnityへインポートしましょう

Projectウィンドウへ`JsonNode`と`MiniJSON`スクリプトが追加されていればOKです！
<img width="３00" alt="how to import" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/b106f851-f533-72cb-8e73-e214a06be47e.png">

### 3. 今回のテスト用にJSONを作成しよう
今回使ったjsonのデータは↓になります。

```json:Test.json
{
  "title": "TestTittle",
  "notes": [
    {"timing": "0.5","type": "A"},
    {"timing": "3","type": "B"},
    {"timing": "6.5","type": "A"},
    {"timing": "7","type": "B"}
  ]
}
```
もし新規でJSONファイルを作れなかった場合は↓先のリンクからDLしてください！
https://drive.google.com/file/d/1EeL2EPjr_784TmYQWWGASbnrO4I_DcXw/view?usp=sharing
Testと書かれたファイルを追加できていればOKです！
<img width="300" alt="clear to import" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/dfc4c3f6-94c4-2dc9-3465-c3ad44974f61.png">

### 4. JSONを読み込むコードを書いてみよう
新しく`JsonLoader`というスクリプトを作成してコードを以下のように書いてみましょう
詳しい解説は下の方でやっていきます！

```C#:JsonLoader.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class JsonLoader : MonoBehaviour
{
    public TextAsset textAsset;
    // Start is called before the first frame update
    void Start()
    {
        string jsonText = textAsset.ToString();
        JsonNode json = JsonNode.Parse(jsonText);
        //Json上にある"title"の値を表示する
        Debug.Log(json["title"].Get<string>());
        
        foreach (JsonNode note in json["notes"])
        {
            string type = note["type"].Get<string>();
            float timing = float.Parse(note["timing"].Get<string>());
            Debug.Log(type +" : "+ timing);
        }
    }
}

```

### 5. 書いたコードをアタッチしよう
a. 新しいゲームオブジェクトを作ってそこへ作ったJsonLoaderを`アタッチ`しましょう！
<img width="600" alt="clear to import" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/447673eb-1deb-e428-4704-461d4401d492.png">
b. Json Loader内のText Assetへ先ほど作った` Test.jsonをアタッチ`
<img width="600" alt="clear to import" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/77b0258a-ed98-483e-566e-550eb676c114.gif">

### 6. 書いたコードを実行してみよう
実行してこんな感じに表示されたらOK!
<img width="400" alt="clear to import" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/74f2c7c0-ff85-9d50-8db6-9f7616139e84.png">
UnityのConsoleウィンドウへ↓のコードにある水色部分全てが表示されるようになりました！
<img width="500" alt="clear to import" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634988/aa8d9746-7d0d-980a-ad6a-ead97f444844.png">
#### これでファイルの読み込み自体は完了です！

## コードの中身について軽く解説

### Text Assetとは
`Text Asset は、インポートされたテキストファイルのための形式です。プロジェクトフォルダーにテキストをドロップすると、テキストアセットに変換されます。以下のファイル形式がサポートされています。`
使えるファイル形式は「txt,html,htm,xml,bytes,json,csv,yaml,fnt」が使えます。
Unity公式リファレンスから：[テキストアセット](https://docs.unity3d.com/ja/2019.4/Manual/class-TextAsset.html#:~:text=Text%20Asset%20%E3%81%AF%E3%80%81%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88%E3%81%95%E3%82%8C,%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82)

つまり、txtのようなテキストファイルをUnityで使えるようにするものということです！
今回の場合だとTest.jsonをプログラムで使う為以下のコードを書いています！

```C#:
public TextAsset textAsset;
```

### JSONの読み込み
先ほど読み込んだtextAssetを`string`(文字列)として扱う為に`ToString()`で変換しています

```C#:
string jsonText = textAsset.ToString();
```

文字列に変換したJSONのデータはこのままではただの文字列でしかないので、`この文字列はJsonだよー！と教えてあげる為にParseというものを行います。`
（参照）　[JsonNode.Parse メソッド
](https://docs.microsoft.com/ja-jp/dotnet/api/system.text.json.nodes.jsonnode.parse?view=net-6.0)

```C#:
JsonNode json = JsonNode.Parse(jsonText);
```

### JSONデータの表示(1)
JSON内のデータからキー：tittleと書かれている部分のデータをstring(文字列)として取得して、その後Debug.Logを用いてUnityのConsoleウィンドウで表示しています。

```C#:
//Json上にある"title"の値を表示する
Debug.Log(json["title"].Get<string>());
```
↑のコードを実行すると↓のデータを取得することができるようになりました！

```json:
"title": "TestTittle"
```

### JSONデータの表示(2)
次は、このような↓JSONの配列を読み取っていきます。

```json:
"notes": [
    {"timing": "0.5","type": "A"},
    {"timing": "3","type": "B"},
    {"timing": "6.5","type": "A"},
    {"timing": "7","type": "B"}
  ]
```

今回みたいにデータの個数が不明な場合に、データの個数回だけ読み込みを行い時は`foreach`と呼ばれるものを使います。
foreach文はデータの回数分処理が実行されるループ文（for文やwhile文の仲間！）です！
結果的に指定した配列などのデータ全ての要素を読み取ることができます。
<br>
例として以下のコードを書いてみます。
実行してみると`aaa`,`bbb`,`ccc`の順でconsoleに表示されます。
つまりforeach文によって`「1回目のループでaaa,2回目のループでbbb,3回目のループでccc」`が`iへ代入`されていることがわかりました！

```C#:
string[] array = { "aaa", "bbb", "ccc" };
//配列の個数の回数だけ処理を実行する
foreach(string i in array)
{
    Debug.Log(i);
}
```

では、最後に今回書いたコードについて見てみましょう！
a. まずforeach文を使ってキー"notes"にあるデータの個数回、処理を行っています。（今回の場合だと4回ですね）
b. そして、その処理の中でキー"type"と"timing"を読み込んでいます（読み込みの書き方は"tittle"の時とおなじ！）
c. timingは文字列ではなくで数値なので、float.Parse　を用いて変換してます！
d. Debug.logを使ってUnityのconsoleで表示！

```C#:
foreach (JsonNode note in json["notes"])
{
     string type = note["type"].Get<string>();
     float timing = float.Parse(note["timing"].Get<string>());
     Debug.Log(type +" : "+ timing);
}
```
#### これで読み込みに関する軽めの説明もおしまいです！

## 最後に
今回はJSONを初めて使う人も多いかと思い、必要最低限の説明と解説だけを記載していますが、是非興味を持たれた方はJSONをゲーム等へ積極的に使ってもらえたら嬉しいです！