Reactの注目の新機能であるReact Hooksをニュース検索アプリケーションを題材にして従来の方法と比較しながら試してみましょう。

はじめに

React Hooksはリリース前から話題になっていた新機能であり、私もベータ版の段階からサンプルを実装して試したりしていました。ざっくりと言うと、クラスベースから関数ベースの実装にするための機能です。他のプログラミング言語でも流行っている関数型プログラミングにフォーカスする形に進化したと考えて良いでしょう。

今回はニュースを検索する簡単なReactアプリケーションを従来のクラスベースで実装し、新機能のReact Hooksで再実装する形で試していきましょう。

React Hooksとは？

React Hooksとは、React 16.8で新しく追加された新機能で、従来Reactでクラスベースで実装していたことを関数ベースで実装することができるようになります。コーディングがシンプルにできるようになり、かつ、React特有のコンポーネントの状態管理を簡単にする利点があります。

今回はHooksの中でも基本となる「useState」と「useEffect」を使うことにします。

前提

以下の準備が完了している必要があります。

• NodeJSがインストールされていること。
• create-react-appがインストールされていること。
• News APIのAPI keyを取得していること。(登録することで無料で取得できます。)

詳しいバージョンは「環境」を参照してください。

ニュースを検索するアプリケーションの作成(クラスベース)

まずは、従来のクラスベースの方法で実装してみましょう。

ベースを作る

まずは、ベースとなるフォルダを作成し、必要なパッケージをインストールします。

$ npx create-react-app news-search-app
$ cd news-search-app/
$ rm src/App.css 
$ rm src/App.test.js
$ rm src/logo.svg
$ yarn add axios bootstrap reactstrap
$ touch .env
$ tree -aI 'node_modules|.git'
.
├── .env
├── .gitignore
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── serviceWorker.js
└── yarn.lock

なお、今回はデザイン用にBootstrap4のReactコンポーネントである「reactstrap」を利用します。

実装する

サクサク実装してきましょう。

.env

REACT_APP_API_KEY=your-api-key

事前に取得したAPI keyを設定します。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

BootstrapのCSSをインポートしておきます。

index.css

body {
text-align: center;
font-size: 20px;
padding: 2.5%;
}

簡単なCSSを書いておきます。

App.js

import React, { Component } from 'react';
import axios from 'axios';
import {
Form,
Input,
Button,
InputGroup,
Card,
CardImg,
CardTitle,
} from 'reactstrap';
const api = axios.create({
baseURL: 'https://newsapi.org/v2/everything/',
timeout: 1000,
headers: { 'X-Api-Key': process.env.REACT_APP_API_KEY },
});
class App extends Component {
state = {
searchWord: 'React Hooks',
articles: [],
query: '?q=React Hooks',
};
componentDidMount() {
document.title = `Searching by ${this.state.searchWord}`;
this.getArticles();
}
componentDidUpdate() {
document.title = `Searching by ${this.state.searchWord}`;
}
componentWillUnmount() {
this.setState({
searchWord: 'React Hooks',
articles: [],
});
}
getArticles = async () => {
try {
const result = await api.get(this.state.query);
const articles = result.data.articles.map(article => ({
title: article.title,
url: article.url,
urlToImage: article.urlToImage,
}));
this.setState({
...this.state,
articles,
});
} catch (error) {
console.log(error);
this.setState({
searchWord: '',
articles: [],
});
}
};
handleSeachWord = e => {
this.setState({
searchWord: e.target.value,
});
};
handleSearchForm = e => {
e.preventDefault();
this.setState({
...this.state,
query: `?q=${this.state.searchWord}`,
});
this.getArticles();
};
render() {
const { searchWord, articles } = this.state;
return (
<>
<h2>News Search App</h2>
<Form onSubmit={this.handleSearchForm}>
<InputGroup className="mx-auto col-8" style={{ margin: 20 }}>
<Input
type="text"
value={searchWord}
placeholder="Type search word..."
onChange={this.handleSeachWord}
/>
<Button type="submit">Let's Search!</Button>
</InputGroup>
</Form>
<div className="d-flex flex-wrap justify-content-center">
{articles.map((article, index) => (
<div key={index}>
<a href={article.url} target="_blank" rel="noopener noreferrer">
<Card style={{ width: 400, height: 300, margin: 20 }}>
<CardImg
src={article.urlToImage}
alt={article.title}
top
width="100%"
height="250px"
/>
<CardTitle>{`${article.title.slice(0, 30)}...`}</CardTitle>
</Card>
</a>
</div>
))}
</div>
</>
);
}
}
export default App;

検索すると、News APIから記事情報を取得して、表示する簡単な実装です。後で、React Hooksと比較するために、コンポーネントの状態管理の関数をあえて使っています。

動作確認する

それでは、アプリケーションを起動し、検索してみましょう。

$ yarn start

「JavaScript 2019」で検索してみます。

検索結果が想定どおりに表示されました。OKです。

ニュースを検索するアプリケーションの作成(React Hooksで再実装)

それでは、React Hooksを使ってApp.jsを書き直しましょう。

React Hooksによる再実装

今回はReact HooksのuseStateとuseEffectを使って再実装し、できるだけ関数に切り出す形にします。

App.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {
Form,
Input,
Button,
InputGroup,
Card,
CardImg,
CardTitle,
} from 'reactstrap';
const api = axios.create({
baseURL: 'https://newsapi.org/v2/everything/',
timeout: 1000,
headers: { 'X-Api-Key': process.env.REACT_APP_API_KEY },
});
const App = () => {
const [searchWord, setSearchWord] = useState('React Hooks');
const [articles, setArticles] = useState([]);
const [query, setQuery] = useState('?q=React Hooks');
const getArticles = async () => {
try {
const result = await api.get(query);
const newArticles = result.data.articles.map(article => ({
title: article.title,
url: article.url,
urlToImage: article.urlToImage,
}));
setArticles(newArticles);
} catch (error) {
console.log(error);
setSearchWord('');
setArticles([]);
}
};
useEffect(() => {
document.title = `Searching by ${searchWord}`;
getArticles();
}, [query]);
const handleSeachWord = e => {
setSearchWord(e.target.value);
};
const handleSearchForm = e => {
e.preventDefault();
setQuery(`?q=${searchWord}`);
};
const newsSearchForm = () => (
<Form onSubmit={handleSearchForm}>
<InputGroup className="mx-auto col-8" style={{ margin: 20 }}>
<Input
type="text"
value={searchWord}
placeholder="Type search word..."
onChange={handleSeachWord}
/>
<Button type="submit">Let's Search!</Button>
</InputGroup>
</Form>
);
const showArticles = () => (
<div className="d-flex flex-wrap justify-content-center">
{articles.map((article, index) => (
<div key={index}>
<a href={article.url} target="_blank" rel="noopener noreferrer">
<Card style={{ width: 400, height: 300, margin: 20 }}>
<CardImg
src={article.urlToImage}
alt={article.title}
top
width="100%"
height="250px"
/>
<CardTitle>{`${article.title.slice(0, 30)}...`}</CardTitle>
</Card>
</a>
</div>
))}
</div>
);
return (
<>
<h2>News Search App</h2>
{newsSearchForm()}
{showArticles()}
</>
);
};
export default App;

これでReact Hooksに対応しました！従来のクラスベースに比べてかなりソースコードの可読性が向上していますね。また、注目すべき点として、Reactのコンポーネントの状態管理用の関数(componentDidMount、componentDidUpdate、componentWillUnmount)がuseEffectで管理できるようになっている点です。これによりややこしい状態管理のコーディングのミスを減らすことができるでしょう。

動作確認

起動して、「Japan」で検索してみしょう。

先ほどと同じ動作で動いていますね。

最後に

いかがでしたか？これでReact Hooksの基本であるuseStateとuseEffectの使い方が掴めたのではないかと思います。クラスベースよりもスッキリして使いやすいですよね。どんどん使っていきましょう。それでは。

環境

• PC: macOS Mojava 10.14.3
• NodeJS: v11.11.0
• create-react-app: 2.1.8
• react: 16.8.6