React

【React入門】関数型プログラミングとは？3つの特徴を解説！

こんにちは、テルプロです！

「関数型プログラミングの特徴がわからない」とお悩みではないでしょうか？

テルプロ

本記事ではそんな悩みを解決していきます！

本記事を読むことで
  1. 関数型プログラミングの3つの特徴がわかるようになる
  2. React開発における重要な概念を知ることができる

Contents
  1. 関数型プログラミングとは？
  2. 関数型プログラミングの3つの特徴
  3. まとめ

関数型プログラミングとは？

プログラミング手法は主に、「オブジェクト指向型」と「関数型」に分かれます。

「オブジェクト指向」は、クラスや継承といった機能を生かしてコードを整理する手法です。手続(命令)型プログラミングと呼ばれており、命令を順番通り記述します。

「関数型」は、名前の通り関数を利用することでコードを整理する手法です。宣言型と呼ばれており、手続型の制御が隠されているため、簡潔に記述できます。

例えば、手続型の場合for文を用いますが、関数型の場合mapメソッドを使用します。

両者を比較すると下記のようになります。

// 手続型プログラミング
let items = [1,2,3];
let newItems = []; 

for (let i = 0; i < items.length; i++) {
  let newItem = items[i] * 2;
  newItems.push(newItem);
}

// 宣言型プログラミング
let items = [1,2,3];
let newItems = items.map(item => item * 2);

// 実行結果：どちらも [2,4,6]

このようにmapメソッドを使うことで、関数型プログラミングの方が分かりやすく記述することができます。

しかし、mapメソッドの裏ではfor文が実行されているため、for文が隠れているだけという点は押さえておきましょう。

関数型プログラミングの3つの特徴

  1. 状態と処理の分離
  2. 純粋関数
  3. 不変性(Immutability)

関数型プログラミングの特徴は上記の3つです。

どれも関数型プログラミングを理解する上で欠かせない知識になります。React開発で押さえておくべき重要な概念ですので、しっかりと押さえておきましょう。

では、それぞれ詳しく解説していきます！

状態と処理の分離

関数型プログラミングの特徴の1つ目は「状態と処理の分離」です。

では、Reactにおけるstateの持つ役割をコードで確認しましょう。

import { useState } from "react";

// 関数コンポーネントはあくまでJSXを返すという役割を持つ
const App = () => {

 // countでstate(状態)を保持している
 // 更新などの作業はReact内部で行われている
  const [count, setCount] = useState(0);
  const countUp = () => {
    setCount((count) => count + 1);
  };
  
  return (
   // JSX
    <>
      <h3>{count}</h3>
      <button onClick={countUp}>+</button>
    </>
  );
};

export default App;

React内部で更新などの作業を請け負ってくれています。そのため、状態と処理を分離して記述することができます。

純粋関数

関数型プログラミングの特徴の2つ目は「純粋関数」です。

純粋関数とは、特定の引数に対しては必ず同じ戻り値を返すということです。

言葉では分かりづらいため、「純粋関数でない場合」「純粋関数である場合」の違いをコードで確認しましょう。

純粋関数でない場合

let value = 0;

const Child = () => {
  value++;
  return <div>{value}</div>;
};

const Parent = () => {
  return (
    <>
    <Child />
    <Child />
    </>
  );
};
export default Parent;

// 出力結果 1, 2,

このような場合、[Child]関数コンポーネントが返す値が変化してしまっています。このような記述は、Reactでは問題であるとされています。


純粋関数である場合

const Child = ({ value }) => {
  value++;
  return <div>{value}</div>;
};

const Parent = () => {
  let  value = 0;
  return (
    <>
    <Child value={++value} />
    <Child value={++value} />
    </>
  );
};
export default Parent;

// 出力結果 1, 2

このような場合、受け取った引数に対して必ず同じ戻り値が返ってきます。そうすることで、可読性に優れ、テストなどもしやすくなります。

不変性(Immutability)

関数型プログラミングの特徴の3つ目は「不変性」です。

不変性とは、一度設定した値は変えてはいけないという意味になります。

Reactにおける例として、propsの値は変えられないことが挙げられます。以下のように、propsの値を書き換えようとするとエラーが発生してしまします。

const Child = (props) => {
  props.state = {value: 1}
  return (<span>{props.state.value}</span>)
}

このような値が変更可能になってしまうと、どこで何が変更されたかが分かりにくくなってしまうため、不変性を保つことが大切になってきます。

まとめ

今回はReactを理解する上で重要な関数型プログラミングについて解説しました。

今回解説した関数型プログラミングの特徴は、React開発で押さえておくべき重要な概念ですのでしっかりと押さえておきましょう。

Reactの実践的なスキルを身につけたい方には「Udemy」がおすすめです。オンラインコースの数は10万以上。世界で4000万人以上の人が学習に利用しています。

▼以下では、口コミをもとに厳選した「React学習におすすめのUdemy講座3選」をご紹介しています。ぜひ参考にしてみてください！

【2024年最新】徹底解説　React学習におすすめのUdemy講座3選Udemy　React講座のおすすめを解説します...

最後までご覧いただきありがとうございました。ではまた！

参考文献
#React
ABOUT ME
テルプロ
東京都在住のアプリエンジニア。大学では、ソフトウェア開発の研究に取り組む。長期のエンジニアインターンシップを経て、実務スキルを磨き、現在はフリーランスエンジニアとしても活動中。メインはモバイルアプリ開発。IT関連の記事監修も行い、技術の共有と普及に励んでいます。 監修実績（レバテックフリーランス）
BLOG：https://terupro.net
Flutter関連の書籍を出版しました！

こんな記事もおすすめ