20200211のReactに関する記事は2件です。

投稿日：2020-02-11T20:28:42+09:00

React hooksを試してみた

はじめに

現在進行形でReactを勉強中な状態ですが、昨年、React hooksてなんか界隈で盛り上がってた気がするなぁ、という事で、どういうものなのかキャッチアップしつつ、テキストとしても残しました。

個人的なメモレベルです。あしからず。。。
以下、公式ドキュメントを参考にしてます。
フックの導入

Componentの簡単なおさらい

Reactのコンポーネント定義には、クラスコンポーネントと関数コンポーネントが存在します。

クラスコンポーネントは、state(状態)を持つことが可能で、ライフサイクルメソッドを実装できたりと、細かな描画制御に耐えうるコンポーネントを作成したいときに利用されていました。

関数コンポーネントは、Hooksを利用できるようになる前は、state(状態)を持つことが不可能で、渡された値をただ描画するだけのコンポーネントでした。(頑張れば、状態を制御することも出来そうですが。。。)

なので、Hooks登場以前は、コンポーネントが状態を持たないことが分かっている場合は、よりシンプルに実装できる関数コンポーネントで実装し、状態を持つ必要が出てきたタイミングで、クラスコンポーネントにリファクタして、という事が現場では行われていたのではないかと思います。

全機能を実現できるなら、最初からクラスコンポーネントで良いじゃん！...と一瞬思いましたが、アプリケーション開発で、クラスコンポーネントにメソッドを詰め込んでいく状況を想像すると、見通しが悪くなりそうだな...と感じます。

React Hooksとは

これまでは、渡された値をただ描画するだけだった関数コンポーネントの機能を拡張してくれるのがHooksです。(クラスコンポーネントでしかstateを管理できなかったが、Hooksの登場により、関数コンポーネントでも実現できるようになった)

関数コンポーネントとは、要は、関数なので、クラスコンポーネントよりも、シンプルにかつ、Hooksの機能により状態を持たせることも出来るようになります。

では、実際に書いてみます。

まずはuseStateというメソッドをreactからインポートします。
useStateをimport
import React, { useState } from 'react';
このuseStateは引数に初期値を与える事ができます。
useStateは何を返すのかなぁとconsole.logで確認すると、
以下の場合、数字の０と関数が入っていることが分かります。
useStateの戻り値をチェック
import React, { useState } from 'react';

const App = () => {
    const state = useState(0);
    console.log({state});
};
配列に初期値と関数が入ってることが分かります。
useStateは常に二つの要素を返します。

上記を踏まえて、useStateの記法を確認しましょう。
ES6の分割代入を使って、それぞれの要素を受け取ります。
１つ目は初期値、二つ目は初期値を操作する関数を受け取ります。
useStateの記法
//もし、sizeだったらsetSizeと書きます。これは慣習的なものです。
const [count, setCount] = useState(0);
これで関数コンポーネントでcountのstateを操作する準備が出来ました。
以下、定番のカウントコンポーネントです。

setCountは、クラスコンポーネントでおなじみのsetStateと同じように、
値の状態を変更する事によって、自身のコンポーネントの再描画を指示します。
(ここではクリックイベントで状態を変えて、再描画させています)
reactのチュートリアルで定番のカウントコンポーネントで検証
import React, { useState } from 'react';

const App = () => {

    const [count, setCount] = useState(0);

    const increment = () => setCount(count + 1); 
    const decrement = () => setCount(count - 1);

    //setCountの引数には関数も与えることができる
    //setCountの引数には現時点の状態が返ってくる。
    //その値に基づいて、複雑な処理をしたいという要件で使えるテクニック
    const increment2 = () => setCount((previousCount) => previousCount + 1)

    return(
        <>
            <h1>count: { count }</h1>
            <button onClick={ increment }>プラス１</button>
            <button onClick={ increment2 }>プラス１</button>
            <button onClick={ decrement }>マイナス１</button>
        </>
    )
}

export default App;
所感

今回、ホントに基本的な部分を試してみただけですが、useEffectなども便利そうです。
徐々にReactも面白くなってきたかも。

　 Tweet
Qiitaで続きを読む

投稿日：2020-02-11T19:26:39+09:00

Reduxの基礎学習→アウトプット

アウトプット背景

Reduxを勉強中、React だけでもstateを使えば状態を管理できるのに、なぜRedux（＝別ライブラリ）が必要なのかわからなくなった背景があったので、アウトプット。

今回は概念が中心（追って追記予定）

Reduxとは

Redux とは、フロントエンドにおける状態管理に特化したライブラリ。

Reduxを必要とする場面

状態管理が複雑な場面

小規模なアプリケーションであればもちろん一つの state でも十分に管理することができる。

しかし、大きなアプリケーションになると、コンポーネントツリーは肥大化し、状態管理が複雑になる。

状態管理が複雑になると？

バグのきっかけ

親コンポーネントで状態を一限管理しようとすると、大きな state になってしまい、「状態の更新や取得」が複雑になりバグのきっかけとなる。

単純に管理が面倒

バケツリレーがいたるところで起こってしまうのも管理が大変になり問題にもなる。

情報の伝達が困難

それぞれのコンポーネントで独自の state を持ってしまうと、他のコンポーネントにその状態を知らせるのが難しくなり複雑化してしまう。

https://css-tricks.com/learning-react-redux/

Reduxを使うことで状態を分離

Reduxを使うことで状態管理にかかる部分をコンポーネントのツリーから分離することが可能。

また、複雑なバケツリレーから解放（完全に解放されるわけではないが負荷は減る）やコンポネート間の状態のやりとりが可能となる。 from https://css-tricks.com/learning-react-redux/

Redux の特徴

概念：redux は flux という概念に基づいて設計

flux の2つの特徴

「一方向に状態が流れる」というという特徴を持っている。

また、「値を直接変更しない」という関数型の特徴も併せ持っている。

Redux の登場人物

Store

Storeはアプリケーションの状態(state)を保持している場所。

コードで直接的に記述する部分はほとんどない

Redux の状態そのものは Store と呼ばれるオブジェクト。この中に各 Reducer に対応した State がネストして入っている。

StoreはReducer を介してしか変更できない

StoreはstateにgetStateメソッドを通していつでもアクセス可能。
Javascript
console.log(store.getState())
Action type

Reducer や middlwareがどの処理を行うかを判断するために使用。

直接値を変更できないのでこのような方法が取られる。定数や typescript であれば enum で定義されることが多いらしい。（自分自身Typescript・enumはまだ勉強範囲外なのでメモとして記載）
Javascript
const ACTION_TYPE = "ACTION_TYPE";
ActionCreator

Actionを作成するメソッド。

FluxのActionCreatorとは異なり、Actionを作るのみを行いStoreへのdispatchは行わない。

Action

ActionはStoreに向かって「何をする」という情報を持ったオブジェクト（関数）。

Actionをdispatch（＝ Redux に通知）を検知すると，「Stateの番人（＝Reducer）」が更新しReduxのフローが実行

Actionはtypeプロパティを必ず持つ必要がある。
Javascript
{
    type: "アクションの種類を識別できる文字列またはシンボル",
    payload: "アクションの実行に必要なデータ（引数）",
}
Reducer

payload と直前の state を受け取って次の state を返す関数。

Reducer は Store に登録された関数

Redux における関数は Reducer を介さないと更新できない仕組みになっている。

どのように状態を更新するかは Action type で条件分岐をするのが一般的。
Javascript
{
const reducer = (state = initState, { type, payload }) => {
  switch (type) {
    case ACTION_TYPE:
      return newState(payload);
    default:
      return state;
  }
};
次回以降

概念をが中心で記載したので、次は具体的な処理内容も追記していく。

React-reduxについても追記予定