Reactのコンポーネントは関数コンポーネントが主流になっていますが、クラスベースのReact.Componentも依然として理解しておく価値があります。特に既存の大規模プロジェクトやError Boundary（エラーバウンダリ）実装にはクラスコンポーネントが欠かせません。提供する機能を１つずつ丁寧に見ていきましょう。

React.Componentとは

React.Component は、ユーザー定義のクラスコンポーネントが継承する基底クラスです。内部では以下を提供します。

• props：親から渡される読み取り専用データ
• state：コンポーネント内部で変化する値
• render()：UIの描画を司る必須メソッド
• ライフサイクルメソッド：マウント・更新・アンマウント時のフック
• setState()：state更新と再レンダーのトリガー
• エラーバウンダリ：static getDerivedStateFromError / componentDidCatch

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <div>カウント: {this.state.count}</div>;
  }
}

propsの扱い

this.props には親から渡された全ての値が含まれています。コンポーネント内で変更してはいけません。

class Greeting extends React.Component {
  render() {
    return <h1>こんにちは、{this.props.name}さん！</h1>;
  }
}

// 呼び出し側
<Greeting name="太郎" />

• 型注釈：PropTypes で型・必須チェックを行う例も多い
• デフォルトProps：MyComponent.defaultProps = { count: 10 };

stateとsetState

state はコンポーネントの内部情報を保持し、setState で更新します。setState は非同期バッチ処理されるため注意が必要です。

class Counter extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    // 複数回連続呼び出すと反映タイミングがずれる可能性あり
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

• 関数型更新：前回のstateを確実に利用したい場合

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

• マージ：オブジェクトをマージする形で更新される

ライフサイクルメソッド一覧

クラスコンポーネントは以下のメソッドをオーバーライドできます。

例：データフェッチ

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch(this.props.url)
      .then(r => r.json())
      .then(json => this.setState({ data: json }));
  }

  render() {
    return this.state.data
      ? <div>{this.state.data.title}</div>
      : <p>読み込み中…</p>;
  }
}

Error Boundary（エラーバウンダリ）

クラスコンポーネントのみ実装可能な仕組みで、子コンポーネントでのレンダーエラーをキャッチできます。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    logErrorToService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h2>エラーが発生しました</h2>;
    }
    return this.props.children;
  }
}

• 再起動：Error Boundaryをリセットするロジックを外部から制御可能
• 注意：副作用フックの代替ではない

コンテキストとの連携

static contextType = MyContext をクラスに指定すると this.context で値を参照できます。

MyComponent.contextType = ThemeContext;
class MyComponent extends React.Component {
  render() {
    return <div style={{ color: this.context.primary }}>…</div>;
  }
}

パフォーマンス最適化

shouldComponentUpdate

再レンダーを制御し、不要なrender()呼び出しを抑えます。

class PureCounter extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.value !== this.props.value;
  }
  render() { /* … */ }
}

PureComponent

React.PureComponent を継承すると自動的に shallow 比較で shouldComponentUpdate を実装します。

メソッドのバインディング

this の参照を安定させるため、コンストラクタでバインディングするか、クラスフィールド構文を使います。

// コンストラクタ内で
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

// クラスフィールド
handleClick = () => { /* this が正しい */ }

デフォルトPropsとdisplayName

• defaultProps

MyComponent.defaultProps = { text: 'デフォルトテキスト' };

• displayName
  • デバッグ時の表示名を変更できます。

MyComponent.displayName = 'カスタム名';

まとめ

React.Component を理解すると、既存のクラスコンポーネントやError Boundaryが読み書きできるようになります。ライフサイクルメソッド、state / props、パフォーマンス最適化パターンなどを活用し、堅牢で読みやすいUIコンポーネントを実装しましょう。

Reactコンポーネントで副作用（データ取得・購読・手動DOM操作等）を扱う際の要がuseEffectフックです。しかし「いつ呼ばれるのか」「どこでクリーンアップすべきか」「依存配列の指定をどう書くべきか」を誤解しやすく、バグや無限ループ、不要な再実行に悩む開発者は少なくありません。本稿ではuseEffectとuseLayoutEffectのライフサイクルを丁寧に紐解き、実践的なコード例とともに解説します。

Reactエフェクトの基本概念

エフェクト（副作用）とは、ReactのUI更新の外側で起きる処理全般を指します。具体例としては：

• 外部APIからデータを取得する
• WebSocketやイベントリスナーを登録・解除する
• 手動でDOMを操作する（サードパーティライブラリ連携）

useEffectフックは、レンダー後に“副作用”を実行し、必要ならクリーンアップ（解除）も指定できる仕組みです。

import { useEffect } from 'react';

function Example({ url }) {
  useEffect(() => {
    fetch(url).then(r => r.json()).then(data => {
      console.log(data);
    });
  }, [url]);
  return <div>データを取得中…</div>;
}

• 第1引数：エフェクト用コールバック
• 第2引数：依存配列。中身が変わったときだけ再実行

ライフサイクルフロー全体像

1. マウント後：最初のレンダーが完了した直後に実行
2. 更新後：依存配列の値が前回と異なるとレンダー後に再実行
3. アンマウント前：前回のエフェクトで返したクリーンアップ関数を実行
4. 依存配列なし：マウント後のみ実行、更新時には再実行されない
5. 依存配列を省略：レンダーごとに実行し、旧エフェクトは都度クリーンアップ

以下、各ステップを深掘りします。

マウント後の初回実行

useEffect(fn, deps) は マウント直後 にまず実行されます。DOMが構築された後なので、document.getElementById など直接DOM操作しても正しく参照できるタイミングです。

function InitLogger() {
  useEffect(() => {
    console.log('コンポーネントが画面に追加されました');
  }, []); // 依存配列空でマウント後のみ
  return <div>初期化ログを出力</div>;
}

• 依存配列を空にすると、初回レンダー後だけに限定
• 一度きりのサブスクリプションやログに最適

依存配列による再実行制御

依存配列 ([a, b, …]) に指定した値が前回と異なる場合、更新後に再実行されます。

function Fetcher({ userId }) {
  const [profile, setProfile] = useState(null);
  useEffect(() => {
    let active = true;
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        if (active) setProfile(data);
      });
    return () => { active = false }; // クリーンアップ
  }, [userId]); 
  // userIdが変わるたびに実行／前回のフェッチはキャンセル
  return profile ? <UserCard data={profile} /> : <p>読み込み中…</p>;
}

• 古いフェッチ結果を書き込まないためのフラグ制御
• 依存の追加漏れが無限ループや stale closure を招く

クリーンアップ関数の重要性

エフェクト内で何らかの購読（Subscription）やタイマーを登録した場合、コンポーネントの破棄前に必ず解除する必要があります。useEffectのコールバックが返す関数がクリーンアップに該当します。

function Clock() {
  const [time, setTime] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setTime(Date.now()), 1000);
    return () => clearInterval(id); // アンマウント時に解除
  }, []);
  return <div>現在時刻：{new Date(time).toLocaleTimeString()}</div>;
}

• クリーンアップがないと、メモリリークや不要なタイマーが残り続ける
• レンダーごとに再登録してしまう実装ミスにも注意

useLayoutEffectとuseEffectの違い

• useEffect：レンダー後に非同期的に実行される
• useLayoutEffect：レンダー直後、ブラウザの描画前に同期的に実行される

レイアウトやサイズ計算をDOMに対して行う場合は、レイアウトズレを防ぐために useLayoutEffect を使います。それ以外は通常の useEffect を優先しましょう。

import { useLayoutEffect, useRef } from 'react';

function MeasureBox() {
  const ref = useRef();
  useLayoutEffect(() => {
    console.log(ref.current.getBoundingClientRect());
  }, []);
  return <div ref={ref}>サイズを測定</div>;
}

副次的レンダーとスケジューリング

React 18では厳格モード（Strict Mode）使用時に、開発中の副作用が2回実行される仕様があります。これは初回マウント→アンマウント→再マウントの動きを通して、クリーンアップ漏れを早期に検出するためです。本番ビルドでは1回だけ実行されますが、開発体験向上のため注意して実装しましょう。

パフォーマンス最適化パターン

1. 依存配列の最小化
   不要な変数を入れると再実行が多発。逆に入れ忘れると stale data の原因。
2. useCallback / useMemo
   エフェクト中で関数や計算結果を依存させる場合はメモ化して参照の安定化を図る。
3. サブスクリプション分離
   複数の副作用を一つの useEffect にまとめず、責務ごとに分けると、不要な再実行を抑えやすい。

useEffect(() => { /* データ取得 */ }, [id]);
useEffect(() => { /* 購読登録 */ }, [socket]);

よくある落とし穴と対策

実践例：データフェッチ×キャンセルパターン

import { useState, useEffect } from 'react';

function SearchResults({ query }) {
  const [results, setResults] = useState([]);
  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
      .then(r => r.json())
      .then(setResults)
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });
    return () => controller.abort(); // クエリ変更時・アンマウント時に中断
  }, [query]);
  return (
    <ul>
      {results.map(r => <li key={r.id}>{r.title}</li>)}
    </ul>
  );
}

まとめ

Reactの副作用ライフサイクルを正しく理解すると、UI更新と非同期処理、リソース管理がスムーズになります。useEffectとuseLayoutEffectの使い分け、依存配列の設計、クリーンアップの徹底、パフォーマンス最適化パターンをマスターし、副作用バグから解放された堅牢なコンポーネントを開発しましょう。

　本記事ではAndroidアプリ開発における、重要な概念の一つであるライフサイクルについて、アクティビティ（Activity)を例にして説明していきます。

アクティビティ（Activity)とは

アクティビティ（Activity)について

　Androidアプリ開発におけるアクティビティ（以下Activity)とは、「Androidアプリの画面」のことを指しています。通常皆さんがアプリを開くときは、アプリアイコンなどを押した後に画面が開き、ボタンを押したり入力などを行うと思います。その時にボタンやテキストボックスが置かれている画面そのものを1つのActivityとして理解してください。
　多くのアプリでは画面は1つではなく複数の画面から成り立っていることが多く、その場合にはActivityも複数になります。
　※Androidアプリ開発では１つのActivityに対してFragment（フラグメント）を利用して複数画面を作成する方法もありますので、詳しくは以下を参照してください。

【Androidアプリ開発】タブで画面を切り替えるアプリの実装

Andriodアプリ開発におけるタブで画面を切り替えるアプリの実装方法を説明しています。タブを利用することで複数の画面を行き来し、ユーザーにとって分かりやすく使いやすいアプリを作ることが出来ますので、学んでみましょう。

techgrowup.net

2024.10.29

アプリ画面の構成

　ここで画面を作成する時の構成を見てみましょう。

　Activityは様々な要素を持っており、画像のステータスバーやアクションバーなどの制御も可能になります。また、アプリとして必要なボタンやテキストボックスなどの要素（ビュー）もActivity内部に配置することができるます。

　プロジェクト内でのActivityの作り方については下記ページを参考に作成してみてください。

【Androidアプリ開発】簡単な画面遷移アプリを作成する

Androidアプリ開発を始めて間もない方に向けて、簡単な画面遷移アプリを作成する記事となっています。アプリにおいて画面遷移は必ず必要な要素ですので、ぜひ学習しましょう。

techgrowup.net

2024.10.29

AndroidManifest.xmlへの宣言

　Activityを利用するときには、AndroidManifest.xmlへ宣言（定義）する必要があります。これはアプリがどんなActivityを持っていて、どんな設定がされているかを認識するためです。例としてデフォルトで作成されるMainActivityの<acitivty>タグを見てみましょう。

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

name属性として.MainActivityと記述されていますが、これはMainActivity.ktクラスを指しています。また、intent-filterというタグがあると思いますが、こちらはaction, category, dataという属性を追加することができます。各要素についての説明は下記です。

　Intentについての説明は下記にまとめてあります。

【Androidアプリ開発】Intentとは、Intentの使い方とは。

Androidアプリ開発における、Intentについての概要を説明し、実際の使い方についてコード例を交えながら解説しています。画面遷移やService,Broadcast配信などに利用される重要な概念ですので、ぜひ学びましょう。

techgrowup.net

2024.10.31

Activityのライフサイクル

ライフサイクルとは

　Androidアプリ開発ではライフサイクルを意識して開発することが特に重要で、例えば「アプリを利用している時に電話が掛かってきた場合」や「アプリ利用中に電源ボタンを押してスリープになった場合」などに、アプリがクラッシュするようでは良いアプリとは言えません。
　ライフサイクルとはActivityやFragment(フラグメント）がどのように生まれて、どのように破棄されるのかをサイクルとして定義しているものになります。ライフサイクルを考慮することによって、アプリが一時的に止まった時や再開した時に復帰できるように処理を作ることができます。

Activityのライフサイクルの種類

　Googleが公式で出している、Activityのライフサイクルの流れを見てみましょう。

　Activityが始まってから、終了するまでの一連の流れが示されています。続いて、たくさんの項目がありますが、各項目について表にまとめます。

ライフサイクルの動作確認

　実際にActivity内のライフサイクルがどのように動いているか、ソースコードを書いて確認してみましょう。今回はライフサイクルのonCreate、onStart()、onResume()、onPause()、onStop()、onDestroy()の6種類のコールバック関数に、ログを入れてアプリを動かしながら確認します。
　下記コードをMainActivityに記述しましょう。

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        Log.d("MainActivity","onCreate")
    }

    override fun onStart(){
        super.onStart()
        Log.d("MainActivity","onStart")
    }

    override fun onResume(){
        super.onResume()
        Log.d("MainActivity","onResume")
    }

    override fun onPause(){
        super.onPause()
        Log.d("MainActivity","onPause")
    }

    override fun onStop(){
        super.onStop()
        Log.d("MainActivity","onStop")
    }

    override fun onDestroy(){
        super.onDestroy()
        Log.d("MainActivity","onDestroy")
    }

　Log.dというのはログをデバッグとして出力するための関数です。
　※Android Studioでログを確認するにはLogcatウィンドウを開きます。詳しくは動画を御覧ください。

　いかがでしょうか。アプリが「開く」、「閉じる」、「バックグラウンドに移る」などの動作によって、Activityのライフサイクルが変わることがLogcatで確認できましたでしょうか。
　どのAndroid端末でも、Activityのライフサイクルは同じですので、必ず覚えてください。また、ActivityではなくFragment(フラグメント）の場合だとライフサイクルは変わりますので、Androidアプリ開発ではライフサイクルを意識することが大切ということを覚えておきましょう。
　Fragment(フラグメント）のライフサイクルについては下記を見てみてください。

【Android】フラグメント(Fragment)の基本とライフサイクル

Androidアプリ開発におけるフラグメント（Fragment)の概念やライフサイクルを意識した使い方を説明しています。フラグメント（Fragment)はUIを作る上で再利用可能に出来る有用なコンポーネントなので、ぜひ学びましょう。

techgrowup.net

2024.08.24

まとめ

　今回はActivity（アクティビティ）についてと、Activity(アクティビティ）におけるライフサイクルについて説明しました。Androidアプリ開発では特に重要な概念ですので、必ず覚えてください。