初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！
-
-
-
はてな -
-
目次
React って何？
React とは UI を作ることに特化した JavaScript のフレームワークです。以下のようなリッチな表現の時間選択のための UI も React を使って実装されていて、 react-gradient-timepicker というライブラリ名で一般に公開されています。
そのほかにも、日付選択のためのカレンダー形式の UI や Slick のようなカルーセルの UI も公開されています。React はこういった複雑な UI を作ることが得意なフレームワークです。
ただし、React を使うと、こういった UI が簡単に作れるようになるというわけではなく、JavaScript やプログラムのある程度の知識は必要になってきます。
HTML と JavaScript が合体した JSX 記法
React の特徴として JavaScript 内に HTML の様な独自の記法（JSX）を記述する点が挙げられます。
以下が JSX のサンプルの記述になります。
// RenderListコンポーネントの作成
const RenderList = (props) => {
return (<ul className="shiritori">
{props.items.map((item) => <li>{item}</li>)}
</ul>);
}
// RenderListコンポーネントの利用
const items = ['コアラ', 'ラッパ', 'パリ', 'りんご'];
<RenderList items={items} />
上記の RenderList コンポーネントは単純に配列の値をリスト表示する簡単なコンポーネントです。<ul> など HTML よく見かける記述がありますが、その中に変数や関数の計算結果を出力するために {} を記述します。
この様に HTML と JavaScript が渾然一体となっているのが React の特徴の一つです。
JavaScript と HTML の距離が近いことによって JSON などのデータを HTML に反映させたりすることがとても容易です。JSX の記法を避け、普通の JavaScript で React を使うこともできます。
その場合以下の様な記述になります。
const e = React.createElement;
ReactDOM.render(
e("ul", { className: 'shiritori' },
e("li", null, 'コアラ'),
e("li", null, 'ラッパ'),
e("li", null, 'パリ'),
e("li", null, 'リンゴ'),
)
);
記述量が少なければ普通の JavaScript で記述してもわかるのですが記述量が多くなってくると HTML を JavaScript で表現するのは難しくなってきます。そのため HTML の様に直感的に記述できる JSX 記法が提供されています。
HTML が自動で更新されるリアクティブなプログラミング
React のいいところはデータを更新しただけで自動で HTML が更新される仕組みにあります。例えば以下の codepen は、入力された二つの input から合計値を計算する簡単なコンポーネントの例です。
input に値を入力するとその合計値がリアルタイムに反映されているのがわかるかと思います。
See the Pen
React サンプルコード by webkikaku (@webkikaku)
on CodePen.
折角なので codepen 上ではなく先ほど Create React App で作成した環境を利用しましょう。
Todo クラスを作ろう
まずは todo クラスを作っていきます。my-app/src/todo.js を作成してください。以下がコンポーネントの class を作る際の雛形になります。
import React, { Component } from 'react';
class Todo extends Component {
}
render メソッドを定義
次にどのように HTML を描画するかを決めるための render メソッドを作りましょう。ここでは todo 名を入力するためのテキストフィールド、入力した todo をリストに追加するためのボタンと todo 一覧を表示するためのリストを作っています。
import React, { Component } from 'react';
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
name: ''
};
}
render() {
const { todos } = this.state;
return (<div>
<input type="text" />
<button>登録</button>
<ul>
{todos.map((todo, index) => <li key={index}>{todo}</li>)}
</ul>
</div>);
}
}
todo の追加メソッドを定義
次に todo を実際にリストに追加するためのメソッドを作って見ましょう。まずはテキストフィールドに入力された値を name として state に保存しましょう。React では state を保存するために setState というメソッドを使います。実際に入力された値は e.target.value で取り出せます。
class Todo extends Component {
...
onInput = (e) => {
this.setState({
name: e.target.value
});
}
...
render() {
const { todos } = this.state;
return (<div>
<input type="text" onInput={this.onInput} />
<button>登録</button>
<ul>
{todos.map((todo, index) => <li key={index}>{todo}</li>)}
</ul>
</div>);
}
}
次に登録ボタンをクリックした際の処理を追加します。以下のコードでは、スプレッド演算子を使って配列を新しい配列に展開し、その末尾にテキストフィールドで入力した値をセットしています。
class Todo extends Component {
...
addTodo = () => {
const { todos, name } = this.state;
this.setState({
todos: [...todos, name]
});
}
...
render() {
const { todos } = this.state;
return (<div>
<input type="text" onInput={this.onInput} />
<button onClick={this.addTodo} >登録</button>
<ul>
{todos.map((todo, index) => <li key={index}>{todo}</li>)}
</ul>
</div>);
}
}
todo の削除メソッドを定義
次に todo を削除するボタンを作りましょう。removeTodo メソッドで削除したい todo の index 番号を受け取ってその位置にある todo を除いた配列を作り、state の todos に再セットしています。
class Todo extends Component {
...
removeTodo = (index) => {
const { todos, name } = this.state;
this.setState({
todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
});
}
...
render() {
const { todos } = this.state;
return (<div>
<input type="text" onInput={this.onInput} />
<button onClick={this.addTodo} >登録</button>
<ul>
{todos.map((todo, index) => <li key={index}>
{todo}
<button onClick={() => { this.removeTodo(index) }}>削除</button>
</li>)}
</ul>
</div>);
}
}
完成形は以下のようなソースコードになります。他のファイルで作った todo を読み込めるように class の先頭に export default を追加しています。
import React, { Component } from 'react';
export default class Todo extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
name: ''
};
}
onInput = (e) => {
this.setState({
name: e.target.value
});
}
addTodo = () => {
const { todos, name } = this.state;
this.setState({
todos: [...todos, name]
});
}
removeTodo = (index) => {
const { todos, name } = this.state;
this.setState({
todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
});
}
render() {
const { todos } = this.state;
return (<div>
<input type="text" onInput={this.onInput} />
<button onClick={this.addTodo} >登録</button>
<ul>
{todos.map((todo, index) => <li key={index}>
{todo}
<button onClick={() => { this.removeTodo(index) }}>削除</button>
</li>)}
</ul>
</div>);
}
}
最後に my-app/src/index.js で先ほど作成した todo コンポーネントを読み込めば完成です。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Todo from './todo';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Todo />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
まとめ
これまで React を始める上での基礎をお伝えしました。JSX の記法に慣れて、props, state やライフサイクルを理解すれば React で複雑なコンポーネントも作れます。
ただし React で本格的にアプリを作るのであればその周辺技術も学ぶ必要があります。
例えば複数のコンポーネントを管理するためにアプリケーション全体の state を管理するためのライブラリとして react-redux, redux などがあります。また URL ごとに表示するコンポーネントを出し分けるためのツールとして react-router があり、React をサーバーサイドでレンダリングするためのツールとして Next.js があります。
これらの周辺技術と組み合わせながら Web アプリケーションを作ることがほとんどなので、React でコンポーネントが作れるようになった後はこういった技術も勉強して行きましょう。この記事でまずは React を始める最初の一歩を踏み出していただければ幸いです。
他にも Vue の入門についても公開していますので、興味のある方は下記リンクからどうぞ！
-
-
-
はてな -
-