初めまして！
キャスレーコンサルティング 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はこれから流行になっていくであろう最新技術なので、
これを機に一緒に勉強を始めてみませんか？？
最後までお読みいただき、ありがとうございました。
