glideで学ぶデータベース

# はじめに…

Glideは「ノーコード」と言えども、データベースの知識が無いと**もったいない！！**

ということでGlideでデータベースの使い方をまとめてみました。


# 目次

1. サンプルアプリの説明

1. Step1 テーブルを作ろう
    1. テーブルごとの役割
    1. 列の役割と型

1. Step2 データとレイアウトを繋げよう
    1. どこにどのデータがあるのか
    1. 複雑なデータの動き

1. Step3 テーブル同士を繋げよう
    1. 「繋げる」のイメージ
    1. なぜ繋げるのか

# 1. サンプルアプリの説明

- サンプルアプリ：https://planetdb.glide.page

- アプリの概要：太陽系の星の解説
    - トップページ
      太陽系の代表的な星が並んでいる。星が押せるようになっている。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/1f53e18d-94e1-d7b6-547d-10abe1701466.png)
    - 星を押した後（例：水星）
      星の情報が並んでいる。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/bb9187f2-f58f-39e6-a5ec-9fe561c13e3e.png)
    - 「画像を変更」を押した後
      画像をイラストと写真の交互に変更させることができる。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/c9380443-ea59-c4df-0244-6e1566a18a06.png)
    - 「この星の種類を詳しく見る」を押した後
      星の種類についての説明とそれに区分される星が並んでいる。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/e01918b6-c6e2-5074-700b-091a8e94f85f.png)

# Step1 テーブルを作ろう

## 1. どこにどのデータがあるのか

テーブルの種類
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/7dedc0b2-2cfc-5ae2-c4f7-626e7abb0bb8.png)
- Planetsテーブル：星それぞれに関するテーブル
- Categoriesテーブル：星の種類に関するテーブル

## 2. 列の役割と型
<details>
<summary>Planetsテーブル</summary>

|列名|型|説明|
|---|---|---|
|planet_name|Text|星の名前|
|planet_english_name|Text|星の英名|
|planet_image_illustration|Image|星のイラスト|
|planet_image_photo|Image|星の写真|
|planet_category|Text|星の種類|
|planet_distance|Number|太陽からの距離（単位なし）|
|planet_distance_txt|Template|太陽からの距離（単位あり）|
|planet_weight|Number|重さ（単位なし）|
|planet_weight_txt|Template|重さ（単位あり）|
|planet_temperature|Number|表面温度（単位なし）|
|planet_temperature_txt|Template|表面温度（単位あり）|
|planet_size|Number|直径（単位なし）|
|planet_size_txt|Template|直径（単位あり）|
|categories_relation|Relation|Categoriesテーブルと繋げる|
|click_num|Number|クリック回数|
|tf_num|Math|クリック回数が偶数回か奇数回か|
|now_image|If→Then→Else|クリック回数が偶数回ならイラスト、奇数回なら写真|

</details>

<details>
<summary>Categoriesテーブル</summary>

|列名|型|説明|
|---|---|---|
|categories_name|Text|種類の名前|
|planet_english_name|Text|種類の英名|
|category_explanation|Text|種類の説明|
|planet_relation|Relation|Planetsテーブルと繋げる|

</details>

# Step2 データとレイアウトを繋げよう

## 1. どこにどのデータがあるのか

- トップページ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/1f53e18d-94e1-d7b6-547d-10abe1701466.png)
それぞれの星のカードには日本語（`planet_name`）と英語（`planet_english_name`）の星の名前とイラスト（`planet_image_illustration`）の画像が表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/50b02b4b-b66f-37e3-489b-85fa34cf22d0.png)

- 星を押した後（例：水星）
    ![image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/0ca466ec-1d57-eba6-bfae-ee481fa9aeec.jpeg)

    - 星の名前：赤色の部分
      日本語（`planet_name`）と英語（`planet_english_name`）の星の名前と今のクリック数に応じた画像（`now_image`）を表示する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/d1413b2d-8e48-5ad5-cf4f-c89684f9e6fa.png)

    - 画像の変更：緑色の部分
      クリック数（`click_num`）に1加算する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/3dd07064-800a-eaf5-708a-137b7393f1d6.png)
    
    - 星の種類：青色の部分
      左）星の種類（`planet_category`）を表示する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/00acd55b-5f86-2b7c-0f72-b90e22f3a55b.png)
      右）星の種類の情報（`categories_relation`）を表示する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/6823c0a4-d554-2c29-9b99-4412ccade57b.png)

    - 星の情報：紫色の部分
      4つの情報を表示する。
      太陽までの距離：`planet_distance_txt`
      重さ：`planet_weight_txt`
      表面温度：`planet_temperature_txt`
      直径：`planet_size_txt`

- 「この星の種類を詳しく見る」を押した後
    ![image (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/53495d0f-06c7-c4e0-03df-9b28cd5d896f.jpeg)

    - 星の種類の名前：赤色の部分
      日本語（`category_name`）と英語（`category_english_name`）の星の種類の名前を表示する。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/4c61b6e1-a00b-602a-5af8-cfe987d1a452.png)

    - 星の種類の説明：緑色の部分
      星の種類の説明（`category_explanation`）を表示する。

    - 同じ星の種類の星：青色の部分
      それぞれの星のリストには日本語（`planet_name`）と英語（`planet_english_name`）の星の名前とイラスト（`planet_image_illustration`）の画像が表示される。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/b4b525ba-d6f4-6656-2add-218a3f96aba6.png)

## 2. 複雑なデータの動き

**クリック数に応じて画像を動的に変更する**　～偶数回の時はイラスト、奇数回の時は写真を表示する～

やり方
1. クリック数をカウントする
1. クリック数が偶数か奇数かを見る
1. 画像を分岐させる
1. 画像を表示する

### 1. クリック数をカウントする
「画像を変更」ボタンの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/bf052c3d-5da9-a969-20dd-f1e9f684e8e2.png)
ボタンを押すと今表示中の行の`click_num`に1加算する。

### 2. クリック数が偶数か奇数かを見る
`tf_num`列の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/33700a30-f6e2-35b0-7e93-60c072d1ae87.png)
※click=`click_num`とする
mod(click,2)　→　clickを2で割った余りを`tf_num`に入れる。
= clickが偶数の時0、奇数の時1を入れる。

### 3. イラストを分岐させる
`now_image`列の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/de15898b-715b-2bee-557b-c20e73f0697d.png)
`tf_num`が0の時（=click_numが偶数の時） → `planet_image_illustration`（イラスト）を入れる。
`tf_num`が1の時（=click_numが奇数の時） → `planet_image_photo`（写真）を入れる。

### 4. 画像を表示する
画像の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530073/14a262d5-ccc8-4bfd-cd12-d89f95ebd022.png)
`now_image`を表示する。

# Step3 テーブル同士を繋げよう

## 1. 「繋げる」のイメージ

一言で言うと…**一括管理**
情報の中で一括管理したほうが良い時は別のテーブルに分けてそれ同士を繋げたほうが良い

## 2. なぜ繋げるのか

サンプルアプリの例
例）やりたいこと：星の種類の説明を編集したい
- PlanetsテーブルとCategoriesテーブルを分けていない場合
    Planetsテーブル（`category_explanation`に誤字）
    |planet_name|planet_category|category_explanation|
    |---|---|---|
    |太陽|恒星|自ら光を発している星|
    |水星|地球型惑星|"恒星の周りをまわっている星 密度が大きい惑星"|
    |金星|地球型惑星|"公正の周りをまわっている星 密度が大きい惑星"|
    |木星|地球型惑星|"構成の周りをまわっている星 密度が大きい惑星"|
    |金星|地球型惑星|"後世の周りをまわっている星 密度が大きい惑星"|
    |…|…|…|

    1. `category_explanation`の誤字を探す
    1. 1つずつ誤字を直す

→　誤字を直すのに手間がかかる＆また間違える可能性が大きい

- PlanetsテーブルとCategoriesテーブルを分けている場合
    Planetsテーブル
    |planet_name|planet_category|category_explanation（Categoriesテーブルの`category_explanation`を参照）|
    |---|---|---|
    |太陽|恒星|自ら光を発している星|
    |水星|地球型惑星|"公正の周りをまわっている星 密度が大きい惑星"|
    |金星|地球型惑星|"公正の周りをまわっている星 密度が大きい惑星"|
    |木星|地球型惑星|"公正の周りをまわっている星 密度が大きい惑星"|
    |金星|地球型惑星|"公正の周りをまわっている星 密度が大きい惑星"|
    |…|…|…|

    Categoriesテーブル（`category_explanation`に誤字）
    |category_name|category_explanation|
    |---|---|
    |恒星|自ら光を発している星|
    |地球型惑星|"公正の周りをまわっている星 密度が大きい惑星"|
    |…|…|

    1. Categoriesテーブルの`category_explanation`の誤字を探す
    1. 1列のみ誤字を直す

→　直す量が少ない＆また間違える可能性が少ない

これが（リレーショナル）データベースの良い所！
※「繋げる」ことができるデータベースを特にリレーショナルデータベースと言う。

# 終わりに…

【結論】これが無料でできるGlideはすごすぎる。