Web3.0検証(12)-MeteorでTODO管理アプリの開発(基本機能)

##### [前回] [Web3.0検証(11)-MeteorでDapp開発(環境準備)](https://qiita.com/mingchun_zhao/items/77d1687690e13853e923)

## はじめに

[Meteor(ミーティア)公式チュートリアル](https://www.meteor.com/tutorials/blaze/creating-an-app)を参考に、TODO管理アプリを作ってみます。
TODOリストを管理可能で、他のユーザーと共有できるシンプルなアプリです。

## 前回の補足

- Meteorアプリの公開
    - Meteorで開発したWebアプリを、コマンド一つで世界に公開できる
        - `meteor deploy hogehoge`コマンドを実行
            - `hogehoge`は公開URLのサブドメイン
    - アプリが公開サーバーにアップロード・デプロイされ、Web上で公開される

## 早速アプリ作成開始

### フレームワークを選択

Meteorプラットフォームは、複数のフレームワークをサポートしているようです。

- React
- Blaze
- Angular
- Vue

今回は、Reactを使用しアプリ作成します。

### Meteorプロジェクトを作成

端末を開き、任意の作業ディレクトリに移動。

```
$ meteor create simple-todos-react
Created a new Meteor app in 'simple-todos-react'.

To run your new app:
  cd simple-todos-react
  meteor

If you are new to Meteor, try some of the learning resources here:
  https://www.meteor.com/tutorials

When you’re ready to deploy and host your new Meteor application, check out Cloud:
  https://www.meteor.com/cloud
```

### ディレクトリ構成を確認
- client
    - クライアント側(Web)の設定用ファイル
        - client/main.jsx: アプリのメインコンポーネントをHTMLにレンダリング
- server
    - サーバー側(Node.js)のセットアップ用ファイル
        - main.js: MongoDBデータベースを初期化
            - MongoDBは埋め込みバージョンが用意されている、インストール不要
- imports/ui
    - Reactコード
        - App.jsx: React To-doアプリのルートコンポーネント

### Meteorアプリを実行
```
$ cd simple-todos-react
$ meteor run
[[[[[ ~/simple-todos-react ]]]]]

=> Started proxy.
=> Started HMR server.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/
```

Meteor起動後も、アプリへの変更は自動同期される。

### タスクコンポーネントの作成

- imports/uiディレクトリにTask.jsxファイルを作成

タスクリスト内のタスクを表すReactコンポーネントをエクスポート。
リスト表示するため`li`要素を返す。

```imports/ui/Task.jsx
import React from 'react';

export const Task = ({ task }) => {
  return <li>{task.text}</li>
};
```

### サンプルタスクを作成

- タスクリストをレンダリングするため、サンプルデータを定義
※ 本来であれば、データはデータベースに保存される(コード上に記述せず)

タスクの配列`tasks`を作成

```imports/ui/App.jsx
import React from 'react';

const tasks = [
  {_id: 1, text: 'First Task'},
  {_id: 2, text: 'Second Task'},
  {_id: 3, text: 'Third Task'},
];
 
export const App = () => (
  <div>
    <h1>Welcome to TODO List!</h1>
    <Hello/>
    <Info/>
  </div>
);
```

### サンプルタスクをレンダリング

- Reactを使用し、レンダリングロジックを実装

上述タスクコンポーネントを使用し、リストアイテムをレンダリング。
※ Reactコード内で、`{}`を使用しJavascriptコードを記述可能
Arrayオブジェクトの.map関数を使用し、サンプルタスクを反復処理。

```imports/ui/App.jsx
import React from 'react';
import { Task } from './Task';

const tasks = [
  {_id: 1, text: 'First Task'},
  {_id: 2, text: 'Second Task'},
  {_id: 3, text: 'Third Task'},
];

export const App = () => (
  <div>
    <h1>Welcome to TODO List!</h1>
    <ul>
      { tasks.map(task => <Task key={ task._id } task={ task }/>) }
    </ul>
  </div>
);
```

※ タスク毎に`key`プロパティを付与してください(`key`を使って、特定タスクを操作可能)。

- アプリコンポーネントから、不要となったHelloとInfoを削除

以下のファイルも削除
```
$ rm imports/ui/Hello.jsx
$ rm imports/ui/Info.jsx
```

### ブラウザでアプリを確認

ブラウザから、`http://localhost:3000/`にアクセス。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/20467b18-9fb9-8a0a-37c3-92eb7e6cfc6d.png)|
|:--|

### アプリがモバイル端末でどのように表示されるか確認

- ブラウザで、デベロッパーツールを表示(Chromeの場合、F12キー)
- 画面右上で、モバイルデバイスとタブレットを示す小さなアイコンをクリック

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/794bc510-7ffe-3fb5-c0fb-22e2dd178bf0.png)|
|:--|

- シミュレートするモバイル端末を選択

#### (おまけ)モバイル端末で直接アプリを表示

‐ Meteor稼働サーバーのIPアドレスを確認
```
$ ip addr | grep "inet" | grep -Fv 127.0.0.1 | awk '{print $2}'
::1/128
172.22.149.79/20
fe80::215:5dff:fe1f:3e95/64
```

- モバイル端末で、上記IPアドレスを使用しアプリに接続

### モバイル端末の表示サイズを調整

viewportを修正し、サイズ調整。

- client/main.htmlファイルの`head`タグ内の`title`の後に以下追加

```client/main.html
  <meta charset="utf-8"/>
  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
  <meta
      name="viewport"
      content="width=device-width, height=device-height, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
  />
  <meta name="mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
```

ブラウザをF5で更新すると、画面表示が変わることを確認できます。

## おわりに

Meteorを用いて、簡単なTODO管理アプリを作成しました。
次回は、タスクデータをMongoDBデータベースに保存するように、機能拡張します。
お楽しみに。

##### [次回] [Web3.0検証(13)-MeteorでTODO管理アプリの開発(MongoDBにデータ保存)](https://qiita.com/mingchun_zhao/items/9ff061d25b13557d2015)