Help us understand the problem. What is going on with this article?

【React Native】アプリ開発未経験のフロントエンドエンジニアがToDoリストを作ってみる

More than 1 year has passed since last update.

はじめに

普段はAngularなどでWebアプリケーションを開発している私ですが、急にReact Nativeを学びたくなったので、徒然とこの記事を書きはじめました。
↓な感じのToDoリストを作ります。

ToDo

最終成果物はこちらです。
todo-sample

この記事でわかること

  • React Nativeの基礎の基礎

ベストプラクティス的なやつとか、こんな応用的な使い方してやったぜ!みたいなのは全く書いてません。

まずはインストールしないとはじまらない

React Nativeには「node」と「watchman」が必要らしいので、さくっとインストールします。

brew install node
brew install watchman

続いて、React Nativeの本体をインストールです。

npm install -g react-native-cli

プロジェクトを作って起動してみる

react-native init Todo
cd Todo
react-native run-ios

Welcome

この画面が表示されれば起動成功です。
ちなみにシミュレーター上で「Command + D → Debug JS Remotely」を選択することで、デベロッパーツールによるデバッグできるので、覚えておいたほうが良いです。

簡単に設計する

この後は「index.ios.js」に処理をズンズン書いていけば何とかなりそうですが、せっかくなので手を動かす前に必要なClassはどんな感じになるか考えてみます。

スクリーンショット_2016-12-18_18_20_40_.png

  • TodoListContainer
    画面を囲うContainer。TodoListとFooterを持つ。
  • TodoList
    TodoList全体。TodoListItemを持つ。
  • TodoListItem
    TodoList単体。CheckboxとTodoを表示するTextを持つ。
  • Footer
    画面下部に固定されているFooter。textInputと追加ボタンを持つ。

最低これらのClassがあれば何とかなりそうです。

初期データを表示する

まずは「index.ios.js」をいじくって、TodoListContainerを初期化します。

  • index.ios.js
import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import TodoListContainer from 'Todo/src/TodoListContainer';

class Todo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TodoListContainer />
    );
  }
}

AppRegistry.registerComponent('Todo', () => Todo);

データは、Todoを追加する処理をする「Footer」とTodoを描画する「TodoList」の橋渡し的な役割を担う「TodoListConainer」に持たせます。

  • TodoListContainer.js
this.state = {
  todos: [
    {text: 'Learn react native'},
    {text: 'Make a to-do app'}
  ]
}

そして、「TodoList」のpropsにデータを渡します。
stateとpropsは下記が参考になります。
React における State と Props の違い

render() {
  return (
    <View style={{flex: 1}}>
      <ScrollView
        style={styles.base}
      >
        <TodoList
          todos={this.state.todos} //TodoListのpropsにデータを渡す
        />
      </ScrollView>
     ・・・
}

続いて、ReactNativeで用意されているコンポーネントである「ListView」でTodoを描画します。

  • TodoList.js
constructor(props) {
  super(props);

  //ListViewで扱うデータ形式にする
  this.dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2
  });
}

render() {
  return (
    <ListView
      dataSource={this.dataSource.cloneWithRows(this.props.todos)}
      renderRow={(todo) => <TodoListItem {...todo} />}
      renderSeparator={this.renderSeparator}
    />
  );
}
  • TodoListItem.js
render() {
  return (
    <View style={styles.todo}>
      <CheckBox
        isChecked={this.props.complete}
        onClick={()=>this.onClick()}
      />
      <Text style={[styles.text, this.state.isChecked ? styles.isTextDisabled : null]}>
        {this.props.text}
      </Text>
    </View>
  );
}

Checkboxは下記コンポーネントを使わせていただきました。
react-native-check-box

Todoを追加する

Todoの追加は「Footer」に配置してある「追加」が押されたタイミングで、「TodoListContainer」のstateを更新して行います。

  • Footer.js
onAddPress() {
  // TodoListContainerのaddTodoメソッドにtextを渡して実行
  this.props.addTodo(this.state.text);

  // Todo追加後はTextInputを空にする
  this.setState({
    text: ''
  });
}
  • TodoListContainer.js

stateにセットした配列に新しく値を追加する際は、concatで処理するのが定石っぽいのでそうします。

addTodo(text) {
  this.setState({
    todos: this.state.todos.concat([{text: text}])
  });
}

スクリーンショット 2016-12-18 22.36.19.png

追加された!∩( ・ω・)∩ばんじゃーい

おわりに

そんなこんなでToDoリスト(ToDoの削除ができないのは気にしない)が出来上がりました。
React.jsをある程度知っていれば思った以上に高速で開発できますね…
やっててよかったReact.js。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away