2025/04/27記録

まず

これから日報として、日々の学習の記録をつけていきます。
理由は学習管理とアウトプット強化、ポートフォリオのため・・・といったところです。
今日は「関数型プログラミング」について学びました。
以下のURLに今回の教材を記載しています。
Reactについて体系的に学べ、Next.js、TypeScriptなどの最新のトレンドも学べます。
https://www.udemy.com/course/react-complete-guide

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

reactは16.8のhooksの登場によってオブジェクト指向プログラミングから、関数型プログラミングに移行しつつあります。

オブジェクト指向型プログラミングと関数型プログラミングの違いは？

chatGPTに聞きました。

とのこと。

実際のコードで比較すると、
↓OOP（オブジェクト指向型プログラミング）

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>カウント: {this.state.count}</p>
        <button onClick={this.increment}>増やす</button>
      </div>
    );
  }
}

export default Counter;

↓FP(関数型プログラミング)

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(prev => prev + 1);
  }

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>増やす</button>
    </div>
  );
}

export default Counter;

違いとしては、
🔵 特徴(OOP)

• Counter という**オブジェクト（クラス）**が存在して、
• 中にデータ（state）と操作（increment関数）がまとまっている！
• this を使ってクラス内部のデータを扱う！
  🔵 特徴(FP)
• Counter はただの関数！
• データ (count) も更新処理 (setCount) も関数的に分かれている！
• useStateみたいなフックを組み合わせて作る！
• **状態もできるだけ不変（immutable）**に扱う！
  があげられます。

結論

でも疑問ばかりのこります。

Hooksってなに？？？？？？？？

またchatGPTにききました。

らしいです。

useStateは上記記載の教材から学びました。
第一引数で状態（データ）をうけ、第２引数にわたってきた関数で、状態の更新をする。
あってますかね？？

---

初めての投稿で内容グチャグチャですが、徐々に改善していきます。
今後も応援よろしくお願いします。