初めまして！
キャスレーコンサルティング LS（リーディングサービス）部に所属している、18新卒の法島です。

今回は、React.jsのcomponentについてご紹介したいと思います。

目次

1.Reactってなに？
2.プロジェクトの作成に必要なもの
3.プロジェクトを作成してみよう
4.実装してみよう！！
5.こんなこともできる
6.最後に

1.Reactってなに？

React.jsとは、Facebook社が開発したJavaScriptライブラリです。
Reactで開発された例としては、Facebook・Instagram・Atom等があります。

実はすでに当社、キャスレーの先輩社員が
Reactについて記載した記事がございますので、そちらも参照してみてください。

・React.jsを使ってみよう【入門編】→こちら

2.プロジェクトの作成に必要なもの

事前準備として必要なものは、以下の3つです。

　１．Node.js
　　JavaScriptを、サーバーサイドで動かすためのものです

　２．npm
　　Node.jsの拡張パッケージを、管理するためのものです。

　３．Atom
　　今回、プロジェクトの中身を確認するテキストエディターです。
　　※お好みのテキストエディターでも、問題ありません。
　　※インストール方法については、今回は説明を割愛いたします。

3.プロジェクトを作成してみよう

まず、プロジェクトを保管するためのフォルダーを作ります。

$ mkdir react_project

作成したら、そのディレクトリに移動しましょう。

$ cd react_project

移動したら、Create React Appをインストールします。
$ npm install -g create-react-app

完了したら、Create React Appを使用してプロジェクトを作成するコマンドを実行します。
$create-react-app project1

はい、たったこれだけでプロジェクトの作成が完了です！

— Create React Appについて —
　Reactには、とりあえずお試しでやってみたいという人向けに
　npmコマンド1つで、アプリケーションのひな型を作ってくれる機能が
　Facebook社から提供されています。
　（初めてやったときは、それすらよくわからず使っていました笑）
　※私が勉強を始めた時にはなかった、
　　create react app 2という最新版が、現在リリースされているようです。

　もし二つ目のプロジェクトを作りたい場合は、プロジェクト保管ディレクトリに移動して
　creat-react-appコマンドを実行すれば、OKです。

それでは、作成したプロジェクトを実行してみましょう

先ほど作成したプロジェクトに、移動します。
$ cd prpject

起動します！
$ npm start

このように、すでに少しおしゃれな画面が表示されます。
あとは、自分の好きなように修正するだけです！

4.実装してみよう！！

今回は、作成したプロジェクトにComponentを追加して、
ToDoアプリを作成してみようと思います。
まずは、フォルダの構成について説明します。

・node_modules
　　node.jsのパッケージが保存されているファイルとなります。
　　あまり深い知識がない人に関しては、特に触ることがないので今回はスルーします。

・public
　　見慣れたHTMLが格納されています。
　　といっても、ほぼコメントアウトな上、
　　処理自体はほぼすべてcomponentに記載するので、こちらもスルーで問題ありません。

・src
　　今回、主に使用するフォルダです。この中にComponentを作成していきます。

それでは、まずsrcフォルダ内のApp.jsを開いてみましょう

App.jsに記載されている内容が、画面で表示されていると思います。
ここに、これから作成するcomponentを組み込み、画面を作っていくというイメージです。
今回は、Add、Todo、Listの3つのcomponentを作成して、
App.jsに組み込んでいくという作業を行います。

イメージとしてはこのような感じになります。

すべての準備が整ったので、いざ実装してみます。
＜ソース（完成品）＞

App.js

import React from 'react';
import Add from './component/Add';
import List from './component/List';
import './App.css'


class App extends React.Component {

  constructor() {
    super();
    this.state = {
      todolist: [],
    }
  }

  handleSubmit(e) {
    e.preventDefault();
    const title = e.target.title.value;
    const todolist = this.state.todolist.slice();
    const content = e.target.content.value;

    todolist.push({
      title: title,
      content: content,
      done: false,
    });
    this.setState({ todolist });

    e.target.title.value = '';
    e.target.content.value = '';
  }

  setTodoStatus(clickTodo) {
    const todolist = this.state.todolist.slice();
    const todo = todolist[clickTodo.index];
    todo.done = !todo.done;
    todolist[clickTodo] = todo;

    this.setState({ todolist });
  }

  deleteTodoState(clickTodo) {
    const todolist = this.state.todolist.slice();
    todolist.splice(clickTodo.index, 1);
    this.setState({ todolist });
  }

  render() {
    let undoneNum = 0;

    this.state.todolist.forEach((todo) => {
      if (todo.done === false) {
        undoneNum++;
      }
    });

    return (
      
<div className="app" class="app-area">
        
<h1 class="title">TodoList</h1>

        <Add onSubmit={this.handleSubmit.bind(this)} />
        <List todolist={this.state.todolist} setTodoStatus={this.setTodoStatus.bind(this)} deleteTodoState={this.deleteTodoState.bind(this)} />
      </div>

    );
  }
}

export default App;

Add.js

import React, { Component } from 'react';
import './Add.css'

class Add extends Component {

  render() {
    return (
      
<div className="form">
        
<form name="todoform" onSubmit={this.props.onSubmit}>
          
<div class="todo">
            
<div class="input-area">
              
<div class="button-area">
                <button type="submit" class="form-button">作成</button>
                <button type="reset" class="form-button">キャンセル</button>
              </div>

              <label>件名</label>
              <input name="title" type="text" class="title-text"/>
              <label>内容</label>
              <textarea name="content" class="content-text" rows="4" ></textarea>
            </div>

          </div>

        </form>

      </div>

    );
  }
};

export default Add;

Todo.js

import React, { Component } from 'react';
import './Todo.css'

class Todo extends Component {

  render() {
    const className = this.props.done? 'done' : 'undone';
    const status = this.props.done? '未完了' : '完了';
    const todoDelete = this.props.done? '削除する' : '';
    return(
      
<div className={className} class="">
        
<div class="Todo">
          
<div class="status">
            <a href="" onClick={(e) => { e.preventDefault(); this.props.setTodoStatus(this.props)}}>{status}にする</a>　　
            <a href="" onClick={(e) => { e.preventDefault(); this.props.deleteTodoState(this.props)}}>{todoDelete}</a>
          </div>

          
<table>
            
<tr>
              
<th>件名：</th>

              
<td>{this.props.title}</td>

            </tr>

            
<tr>
              
<th>内容：</th>

              
<td>{this.props.content}</td>

            </tr>

          </table>

        </div>

      </div>

    );
  }

};
export default Todo;

—————————————————-pt]

List.js

import React, { Component } from 'react';
import Todo from './Todo';
import './List.css'

class List extends Component {

  render() {
    const todolist = [];
    for (var i = 0; i < this.props.todolist.length; i++) {
      todolist.push(
        <Todo index={i} title={this.props.todolist[i].title} content={this.props.todolist[i].content} done={this.props.todolist[i].done} setTodoStatus={this.props.setTodoStatus} deleteTodoState={this.props.deleteTodoState} />
      );
    }

    return(
      
<div class="list-area">
        
<div class="board">
          <span class="boradName">TasksBoard</span>
          {todolist}
        </div>

      </div>

    );
  }

};
export default  List;

実際に作成したもの画像は、こちらとなります。
※今回は、スタイルのソースは載せていません。

＜解説＞

import React,{ Component } from ‘react’;

このファイルは、Reactライブラリが使えるようにするためのものです。
また、ここでCSSをインポートすれば、Componentごとにスタイルを適応させることができます。

import Add from ‘./component/Add’

文字通り、対象のファイルをインポートするという意味になります。

1．class App extends Component {
　2．render(){
　return(
　.....
　);
　}
　}
あまり見慣れない構文が出てきましたね。

まず１では、Headerというクラスにcomponentを継承させて定義しています。
このクラスの中に、処理を記述していきます。

次に２です。ここに記載された内容を、レンダリングします。
Reactは、JSXという特殊な構文により書かれるので、
return内に書かれたJSXを、レンダリングして表示させます！ということが書かれています。
どちらもcomponentを書くには必須ですので、気を付けましょう。
（私は、return()と記載しており、最初のころはエラー三昧でした。）

これで、componentはほぼ完成です。

export default App;

この文を記載することで、「他のファイルで、このcomponentを使います！」という定義になります。
export defaultしたファイルを先ほどの記述した通りインポートすれば、
componentとして読み込んでくれます。

returnの中に記載されています。
ここでインポートしたcomponentを読み込むという処理が、記述されています。
/はタグを閉じる前ですので、気をつけましょう。

5.こんなこともできる

以下のスクリーンショットは、筆者がReactの勉強をするときに、
さまざまなサイトをもとに実装した画面となります。

YouTubeAPIを使って検索された、動画情報です。
componentを繋いでいくと、こんなこともできるという参考までに記載いたします。

6.最後に

いかがだったでしょうか？
自分自身まだまだ駆け出しで勉強中ということもあり、わかりにくいところも多かったと思います。
まずは「やってみる精神」で今回、この内容でのブログを執筆させていただきました。
Reactはこれから流行になっていくであろう最新技術なので、

これを機に一緒に勉強を始めてみませんか？？

最後までお読みいただき、ありがとうございました。

法島
CSVIT事業部LS/（リーディングサービス）部 法島
新卒一年目のエンジニア。初の開発案件に現在奮闘中。 休日はだいたい料理をしている。