Reactとは？「Pythonユーザーから見たReactのここが違う」についてまとめてみる

pythonでスマホアプリを作るには、バックエンドをpythonのWEBフレームワークであるDjangoやFlaskやFastAPIをつかい、フロントエンドではReact Nativeを使用する必要があります。

pythonに慣れ親しんだ人にとっては、

「React Nativeとは何だ？」

「React言語を習得するのが大変そう」

と少し戸惑うことになります。

この記事では、Reactについて紹介し、Pythonコードとどの様に違いがあるのかについてまとめてみました。

はじめにReactについて理解しておくと、スムーズに知識が入ってきますね。

ReactとReact Nativeについて

React（リアクト）とは

Reactは、Facebook（現Meta社）によって開発された、ユーザーインターフェイスを構築するためのJavaScriptライブラリです。Reactはコンポーネントベースのアーキテクチャを採用しており、データが変更されたときに自動的に効率的にUIを更新します。主にWebアプリケーションのフロントエンド開発に使用され、状態管理やライフサイクルメソッドを備えているため、動的なWebアプリケーションの構築に適しています。

React Native（リアクトネイティブ）とは

React Nativeは、Reactの原則をモバイルアプリケーション開発に適用したフレームワークです。React Nativeを使用すると、JavaScriptとReactのコンセプトを使用してiOSとAndroidの両方で動作するネイティブアプリケーションを開発できます。React Nativeは、ネイティブのコンポーネントを使用してUIを構築するため、完全にネイティブアプリに近いパフォーマンスを提供します。また、ホットリロード機能により、コードの変更が即座にアプリに反映され、開発プロセスを迅速化します。

ReactとReact Nativeの関係と利点

ReactとReact Nativeは共通の設計思想を共有していますが、対象プラットフォームが異なります。ReactはWebブラウザ向け、React NativeはiOSやAndroidのモバイルアプリ向けです。どちらも言語はJavaScriptを使用するため、Web開発者がモバイルアプリ開発を容易に始めることができる大きな利点があります。また、コンポーネントベース（下で説明します）の開発を採用しているため、再利用可能なUIパーツを作成して効率的に開発を進めることができます。

ReactとPythonの文法上の違い

Pythonは、インデントを使ってコードブロックを定義します。関数定義や条件分岐、ループなどの構文がシンプルで直感的です。たとえば、関数の定義は以下のようになります。

Pythonコード例：

def greet(name):
    return f"Hello, {name}!"

一方、JavaScript（Reactを含む）では、中括弧 {} を使ってコードブロックを定義し、セミコロンを文の終わりに使うことが一般的です（省略も可能ですが）。関数の定義は複数の方法がありますが、Reactでは特にアロー関数がよく使われます。

javascriptコード例：

const greet = (name) => {
    return `Hello, ${name}!`;
}

コンポーネントとは？

Pythonには「コンポーネント」という概念がありませんが、モジュールやクラスを使って似たような構造を作ることができます。

Reactでは、pythonのモジュールやクラスの代わりに、UIを構築する基本的な単位として「コンポーネント」を使います。Reactのコンポーネントは、ユーザーインターフェイス（UI）の一部をカプセル化したもので、独立して存在し、再利用可能です。コンポーネントは、HTML要素のように扱うことができ、大規模なアプリケーションを小さな部品に分割して、それぞれ独立して管理できるようにします。

これは独立した、再利用可能なコードのブロックで、自身の状態を管理することができます。例えば、以下は簡単なReactコンポーネントです：

javascriptコード例：

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

Pythonのアプリケーションでは、状態管理は変数やデータ構造を直接操作できるが、Reactでは？

Reactでは、コンポーネントの状態（state）を扱うための専用のAPIがあります。この状態はコンポーネント内で管理され、更新することでコンポーネントが再描画されます。Hooks（フック）という機能を使うと、関数コンポーネント内でも状態を扱うことができるようになります。

javascriptコード例：

import React, { useState } from 'react';

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

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

コンポーネントの種類

Reactには主に二つのコンポーネントの書き方があります。

クラスコンポーネント

Reactの初期から存在するコンポーネントの定義方法です。
ライフサイクルメソッドを利用して、コンポーネントの生成、更新、破棄時の振る舞いを制御できます。
状態（state）管理が可能です。

javascriptコード例：

import React, { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

関数コンポーネント

React 16.8から導入されたHooks APIによって、以前はクラスコンポーネントでしか使えなかった機能（状態管理やライフサイクルイベントなど）を使用できるようになりました。
シンプルで読みやすいコードが書けるため、現在では推奨されるコンポーネントの書き方です。

javascriptコード例：

import React from 'react';

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

コンポーネントのプロパティ（Props）

Propsは、コンポーネントに渡されるデータのことで、主に親コンポーネントから子コンポーネントへデータを渡すために使用されます。Propsは読み取り専用で、コンポーネント内でその値を変更することはできません。

コンポーネントの状態（State）

Stateは、コンポーネントの状態を保持するためのデータです。Stateが更新されると、コンポーネントは再レンダリングされます。Hooksを使った関数コンポーネントでは、useState フックを使用して状態を管理します。

コンポーネントのライフサイクル

クラスコンポーネントには、ライフサイクルメソッドが存在しており、コンポーネントがマウント（画面に表示されること）、アップデート（変更があるたび）、アンマウント（画面から消えること）の際に特定のコードを実行することができます。例えば、componentDidMount はコンポーネントがマウントされた後に実行されるメソッドです。

コンポーネントのサンプル

このReactのコードでは、Greeting という関数コンポーネントを定義しています。これはプロパティとして name を受け取り、その名前を含むメッセージを表示します。App コンポーネント内で Greeting コンポーネントを使用して、具体的な名前を渡しています。

javascriptコード例：

import React from 'react';

function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>;
}

function App() {
    return <Greeting name="Alice" />;
}

export default App;

ちなみにフレームワークを使わないPythonコードでは、以下の様になります。

Pythonコード例：

def greeting(name):
    return f"Hello, {name}!"

def app():
    print(greeting("Alice"))

app()

このPythonコードでは、greeting という関数を定義し、名前を引数として受け取ります。この関数は挨拶のメッセージを返します。app 関数では greeting 関数を呼び出して、その結果をコンソールに出力しています。

まとめ

ReactとPythonのコードがどのように異なるかが簡単に紹介してみました。Reactの場合はUIコンポーネントを定義し、それを組み合わせて使用しています。Pythonの場合は単純な関数の呼び出しで処理を表現しています。Reactでの開発ではUIの構造が直接的に表現されるのに対し、Pythonではより汎用的なプログラミングが行われることが多いようです。