初めまして!
キャスレーコンサルティング 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つです。
1.Node.js
JavaScriptを、サーバーサイドで動かすためのものです
2.npm
Node.jsの拡張パッケージを、管理するためのものです。
3.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(
.....
);
}
}
あまり見慣れない構文が出てきましたね。
まず1では、Headerというクラスにcomponentを継承させて定義しています。
このクラスの中に、処理を記述していきます。
次に2です。ここに記載された内容を、レンダリングします。
Reactは、JSXという特殊な構文により書かれるので、
return内に書かれたJSXを、レンダリングして表示させます!ということが書かれています。
どちらもcomponentを書くには必須ですので、気を付けましょう。
(私は、return()と記載しており、最初のころはエラー三昧でした。)
これで、componentはほぼ完成です。
export default App;
この文を記載することで、「他のファイルで、このcomponentを使います!」という定義になります。
export defaultしたファイルを先ほどの記述した通りインポートすれば、
componentとして読み込んでくれます。
returnの中に記載されています。
ここでインポートしたcomponentを読み込むという処理が、記述されています。
/はタグを閉じる前ですので、気をつけましょう。
5.こんなこともできる
以下のスクリーンショットは、筆者がReactの勉強をするときに、
さまざまなサイトをもとに実装した画面となります。
YouTubeAPIを使って検索された、動画情報です。
componentを繋いでいくと、こんなこともできるという参考までに記載いたします。
6.最後に
いかがだったでしょうか?
自分自身まだまだ駆け出しで勉強中ということもあり、わかりにくいところも多かったと思います。
まずは「やってみる精神」で今回、この内容でのブログを執筆させていただきました。
Reactはこれから流行になっていくであろう最新技術なので、
これを機に一緒に勉強を始めてみませんか??
最後までお読みいただき、ありがとうございました。