ノーコードでTODOアプリを作ってみた

# はじめに

IT業界にいる方なら、ニュースやQiita、書籍、または企業のIT部門が発信しているブログなどから、技術やトレンドをインプットしていると思います。

こうしたインプットの中から、少しでもアウトプットをしていかなければと思い、その月の気になった記事やニュース、技術などをピックアップして、なにか書いてみようと思いました。

9月編は[こちら](https://qiita.com/wakiwaki/items/8ff211a487af32dd4095)



# 今月の気になること

今月の気になることは、「ノーコード」です。
少し前からよく聞くけど、それってどうなの？なんだかんだ言って、自分で書いたほうが品質もいいし、早いんじゃない？と思っていました（フラグ）
試さずにディスるのは良くないので、今回試してみようと思います。



# ノーコードでアプリを作ってみた

## 作るもの

チュートリアルの王道（だと思っている）TODOアプリを作ってみようと思います。
凝ったものではなく、TODOとDue Dateが書いてあって、あとはチェックボックスでDONEにできるくらいのシンプルなものにしようと思います。



## ツール選定

[こちら](https://tech-camp.in/note/technology/92173/)の記事を参考に、[Adalo](https://www.adalo.com/)を使ってみることにします。

>
用意されているパーツを視覚的に組み立てたり、必要なテキストを入力したりといった簡単な操作でアプリ開発ができる、ノーコード開発ツールです。
>

わくわく。



## とりあえずはじめてみる

### プラットフォームの選択

ユーザー登録して、アプリの新規作成をおすと...

![スクリーンショット 2020-11-02 9.15.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/f3426e5c-2617-bed5-ed3c-8d8130a7bd0a.png)

モバイルかWebが選べるんですね。今回はモバイルを選択します。

### テンプレートを選択

![スクリーンショット 2020-11-02 9.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/24be0572-c16c-37b9-cf3a-e59300c91e19.png)

なるほど、よく作るようなアプリはテンプレートが用意されているんですね...
ってTODOアプリあるじゃん！！！

...テンプレートを使ってもつまらないので、Blankを選択しました。


### 仕上げ

![スクリーンショット 2020-11-02 9.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/dfebcdc2-2e98-5df8-dc27-a08d002dda73.png)

アプリ名と、Primary/Secondary Colorを入力して、CREATE！
すると、Overviewが出てきたので、見ました。

![スクリーンショット 2020-11-02 9.16.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/97a507c5-c232-cd90-1946-52146a0537f2.png)




### プロトタイピングツールにそっくりな見た目

ダイアログを消すと、編集画面がお目見えします。

![スクリーンショット 2020-11-02 9.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/7a14fcb2-9179-f2fe-c0a9-705642f6650c.png)


すでに、SignUp画面とLogin画面はAdaloが作ってくれています。
某プロトタイピングツールにそっくりな見た目で使いやすそうです。


## TODOリストの見た目を作る

見た目を作っていきましょう。

### コンポーネントからリストを選択する

Adaloでは、ナビゲーションやフォームなど、基本的なコンポーネントセットが用意されているので、その中から、自分のイメージに近いものを配置して、必要であればアレンジしていくという形で見た目を作っていくことができます。

私の場合は、TODOのリストを作りたいので、リスト表示系のコンポーネントの中から、Custom Listを選択し、Home画面にぐぐぐっと引っ張って配置します。

![スクリーンショット 2020-11-02 9.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/272eaffd-4afe-b9ca-86db-80d29a532080.png)

![スクリーンショット 2020-11-02 9.21.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/4eee83b8-e16f-f30b-1b4d-99fa9d34fbd1.png)

配置するときはガイドラインが表示されます。

![スクリーンショット 2020-11-02 10.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/7d119c2e-6685-c742-837a-b7a9acff46d1.png)

配置されました。


### 基本のコンポーネントをアレンジする

まずはチェックボックスを追加していきます。
Listコンポーネントを選択した状態で、ADD COMPONENTを選択します。
![スクリーンショット 2020-11-02 10.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/a8e481a2-972c-7373-23af-cace99fc42c9.png)

Buttonコンポーネントの中から、Toggleを選択し、任意の場所まで引っ張って配置します。
![スクリーンショット 2020-11-02 10.19.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/efb9c622-899a-2a19-3829-357a92554684.png)

チェックボックスが配置されました。
![スクリーンショット 2020-11-02 10.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/0f68b94f-e51a-1948-46da-befd28c9e10c.png)

あとは、TitileとSubTitleとなっているところに、それぞれTODOとDueDateを入れたいので、名前を変えておきます。（後々、この作業は不要だと気づくのですが、そのデータがどこに表示されるか明確にしておきたいので、手順に入れておきます。）

Listコンポーネントを選択し、Componentsの中から、Titleを選択します。

![スクリーンショット 2020-11-02 10.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/a0637072-10b4-526a-6df6-ec27ca125a74.png)

Titleという文字を、TODOに変えると、コンポーネントでの表示が変わりました。
![スクリーンショット 2020-11-02 10.26.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/63d0980b-af72-4d37-407c-e11ebe55a037.png)

同様にSubtitleをDueDateに変えました。
![スクリーンショット 2020-11-02 10.29.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/3fcf91c0-8d4e-4cd5-7e62-064d7b54cad5.png)



## データベースを作る

データベースを作ります。
このツールを触って一番の驚きだったのが、この機能です。

### コレクションを作成する

左側のタブの、ドキュメントのアイコンをクリックすると、データベースの設定?画面が表示されます。

![スクリーンショット 2020-11-02 10.46.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/278c1dfa-c87d-629f-7605-94cc6b7761b5.png)

サインアップ画面で使うUsersコレクションはすでに作られていました。
ドキュメントタイプのNoSQLかと思います。

ここにTodosコレクションを追加していきます。ADD COLLECTIONを押します。
![スクリーンショット 2020-11-02 10.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/5779ccd6-d95b-7115-4711-412b699f2064.png)

コレクション名を入力して、ADDを押すと、コレクションが作成されます。
![スクリーンショット 2020-11-02 10.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/140cab83-6cdc-d954-e4e0-b3ee0fd6cbaf.png)

デフォルトでNameというプロパティが入っているのですが、そちらに加えて、以下の2つのプロパティを追加します。
- DueDate
- IsDone

DueDateから追加していきます。
ADD PROPERTYをクリックすると、データ型が選択できます。（すごい...）
![スクリーンショット 2020-11-02 11.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/cd36f8fa-7c63-3e28-15fe-3e5f8cf45047.png)

プロパティ名を入力してSAVEしたら完了です。
![スクリーンショット 2020-11-02 11.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/40b1ba88-826e-b289-281d-2b10a7e62d60.png)

同様に、IsDoneも追加します。
![スクリーンショット 2020-11-02 11.02.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/7c34b7e1-60b7-08a7-4aa1-8b2b978df600.png)

### コレクションにデータを追加する

できあがったTodosコレクションにデータを追加していきます。

Todosコレクションの横の0Recoedsをクリックすると、
![スクリーンショット 2020-11-02 11.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/ee2f0ad9-9194-ad96-0587-268a6271caa3.png)

このようなダイアログが表示されます。ADD TODOからデータの追加をします。(CSVでもアップロードできそうですね)
![スクリーンショット 2020-11-02 11.05.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/620bdfa5-273c-f619-cef4-c748e722589a.png)


追加しました。
![スクリーンショット 2020-11-02 11.07.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/eced3109-72d7-0de2-b391-21d4321e567a.png)


## 見た目とデータを連携する

できあがったコレクションと、Home画面を連携します。

### リストとコレクションの連携

リストとコレクションの連携を連携します。
リストコンポーネントを選択し、プルダウンからTodosコレクションを選択します。

![スクリーンショット 2020-11-02 11.10.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/0c26c3a8-63ed-2610-4604-49dde508f39d.png)

リストに表示するデータにフィルターをかけたり、上位に表示する条件などが入力できます。
今回は、DONEになったものを下に表示するような設定をしてみます。
ADD STRONGから、希望する条件を選択します。
![スクリーンショット 2020-11-02 11.14.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/f9cf12d9-388b-1e00-d1e1-db2873ac4ff4.png)

### リスト内のコンポーネントとデータを連携する

リスト内のコンポーネント(TODOのName/DueDate/IsDone)をデータと連携していきます。

リストコンポーネントを選択し、Componentsの中からデータを連携したいコンポーネントを選択します。（まずはNameから）
![スクリーンショット 2020-11-02 11.16.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/11fcf9b5-246e-d453-daf5-7653b9d966c0.png)

連携したいコレクションのプロパティを選択します。
![スクリーンショット 2020-11-02 11.18.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/f451aaa5-742a-022f-f51e-87d1fbc6b3bc.png)

連携されました。
![スクリーンショット 2020-11-02 11.21.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/3165bc3c-0bff-b73f-bf25-f5a3a7d68b2a.png)


TODOという文字列+TodosのNameになってしまっているので、文字列は削除します。
右側のリストコンポーネントをみると、表示が変わっているのが確認できます。
![スクリーンショット 2020-11-02 11.21.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/cc0be748-553d-b061-9a3d-ea37178f0944.png)

この作業を、DueDateとIsDoneにも行います。

## できた！

プレビュー機能で試してみます。画面右上のPREVIEWボタンを押します。
![スクリーンショット 2020-11-02 11.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/a04aa4c3-4489-4d88-84d4-18613745a46a.png)

動かしてみると...
A![ezgif-6-40025350249f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/0946835b-7b58-afda-4d94-0bb021e60ffb.gif)


#感想

15分くらいできれいな?ネイティブのTODOアプリが完成しました。
これをコードで書けといわれたら、今の自分では確実に不可能です。

Adaloでは、マンスリープランを契約すると、Apple StoreやGoogle Playでアプリを公開できたり、外部のAPIからデータを取得できるみたいです。(2020年11月2日時点)
![スクリーンショット 2020-11-02 11.36.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308235/dd99f0d2-9ef4-07d3-3934-35b5b671ed3c.png)

プロトタイピングツールよりはるかに使いやすかったので、プロトタイプの作成に使っても良いかなとも感じました。

一方で、ノーコードは開発者では無ない人でもアプリが作れるのが魅力だと思っていたのですが、多少の知識が無いと難しいのではないかと感じました。（データベースを作って...の下りなど）

以上！
~~10月編なのに、投稿日が11月なのはつっこまないでください~~