Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / 技術 Tips & Tutorials / React Hooksを試してみよう!(useStateとuseEffect編)

2019年4月5日 By KD コメントを書く

React Hooksを試してみよう!(useStateとuseEffect編)

React Hooksを試してみよう!(useStateとuseEffect編)

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

見出し

  • 1 はじめに
  • 2 React Hooksとは?
  • 3 前提
  • 4 ニュースを検索するアプリケーションの作成(クラスベース)
    • 4.1 ベースを作る
    • 4.2 実装する
    • 4.3 動作確認する
  • 5 ニュースを検索するアプリケーションの作成(React Hooksで再実装)
    • 5.1 React Hooksによる再実装
    • 5.2 動作確認
  • 6 最後に
  • 7 環境
    • 7.1 関連記事

はじめに

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

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

動作確認する

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

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

NewImage

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

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

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

React Hooksによる再実装

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

App.js

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

動作確認

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

NewImage

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

最後に

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

環境

  • PC: macOS Mojava 10.14.3
  • NodeJS: v11.11.0
  • create-react-app: 2.1.8
  • react: 16.8.6
The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • React Styled Componentsを試してみよう

    Reactを中心とするコンポーネントベースのWebアプリケーション開発は、CSSをモジュール化しようとする動きにも影響を…

  • create-react-appで作ったアプリのService Workerを無効化する方法

    create-react-appはデフォルトでPWAのためのService Workerに対応しています。しかし、PWA…

  • [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

    プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ…

  • Springプロジェクトをマルチモジュールで構成する方法(Maven編)

    マルチモジュール化は機能のまとまりを明確化し、プロジェクト再利用性やメンテナンス性を高める良い方法です。今回は、Mave…

  • 初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)

    フルスタックエンジニアの需要はスタートアップであればあるほど強いものです。そして、エンジニアにとってフロントエンドとバッ…

カテゴリ : 技術 Tips & Tutorials タグ : react, react-hooks

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~
  • バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!
    バンクーバー留学豆知識: バンクーバーのカジノを攻略せよ!必勝法を公開します!

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

The following two tabs change content below.
  • この記事を書いた人
  • 最新の記事
KD
Twitter のプロフィール

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。
KD
Twitter のプロフィール

最新記事 by KD (全て見る)

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介 - 2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~ - 2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~ - 2019年10月30日

関連記事

  • React Styled Componentsを試してみよう

    Reactを中心とするコンポーネントベースのWebアプリケーション開発は、CSSをモジュール化しようとする動きにも影響を…

  • create-react-appで作ったアプリのService Workerを無効化する方法

    create-react-appはデフォルトでPWAのためのService Workerに対応しています。しかし、PWA…

  • [tips][Tumblr] Tumblrでソースコードをシンタックスハイライトする方法

    プログラマがTumblrをメインのブログにした時に困るのは、シンタックスハイライトです。私はめんどくさがりなので、シンタ…

  • Springプロジェクトをマルチモジュールで構成する方法(Maven編)

    マルチモジュール化は機能のまとまりを明確化し、プロジェクト再利用性やメンテナンス性を高める良い方法です。今回は、Mave…

  • 初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)

    フルスタックエンジニアの需要はスタートアップであればあるほど強いものです。そして、エンジニアにとってフロントエンドとバッ…

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes