onchangeイベントはform要素のinputではないdiv等の要素では検知することが出来ません。
そんな時はどうすれば良いでしょうか？その方法をご紹介します。

MutationEvent ※非推奨

そんな時、以前はこんな方法がありました。
※サンプルコードではjQueryを使用しています。

サンプルのHTML

<input type="button" id="click_me" value="Click!">
<div id="sample"></div>

DOMSubtreeModified propertychangeイベントを使って変更を検知する

$(document).ready(function() {
    $('#sample').on('DOMSubtreeModified propertychange', function() {
        alert('Change!');
    });
    $('#click_me').click(function() {
        $('#sample').text('Change!');
    });
});

しかしながら上記のMutationEventは非推奨となっています。
現在は代わりにMutationObserverを使って同様のことが出来るようになっています。

続きを読む…»

通常、親コンポーネントから子コンポーネントにはpropsを使って情報を渡します。
しかし、深くネストされた下位コンポーネントに渡すには、メンテナンスのことも考えると非常に不便です。

コンテクスト（Context）を利用することで情報の受け渡しが簡単になります。

まずは基本の使い方から。
createContextでコンテクストオブジェクトを作成します。
createContextの引数はデフォルト値です。

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

コンポーネントのトップレベルでuseContextを呼び出して、コンテクストを読み取ります。

function Button({ children }) {
  const theme = useContext(ThemeContext);
  const className = 'button-' + theme;
  return (
    <button className={className}>
      {children}
    </button>
  );
}

コンテクストを上記のButtonに渡すには、該当のボタンあるいはその親コンポーネントのいずれかを、対応するコンテクストプロバイダでラップします。

export default function MyApp() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
}

function Form() {
  // ... renders buttons inside ...
}

これでプロバイダとButtonの間にどれだけ多くのコンポーネントが挟まっていても関係なく情報を受け渡すことができます。

続きを読む…»

Vite+Reactで作成したプロジェクトをサブディレクトリに配置（デプロイ）する方法を解説いたします。
今回検証したバージョンは以下のようになっています。（抜粋）
vite@5.3.1
react@18.3.1
react-router-dom@6.24.1

基本的にReactプロジェクトはドキュメントルートに配置される前提のため、jsやcss等のパスが/assets/...となっています。
まずそれを回避するためにvite.config.jsにbaseプロパティを追加します。

export default defineConfig({
  base: './',
  plugins: [react()],
})

次に、react-router-domを使って画面遷移のあるプロジェクトを作成した場合、サブディレクトリに配置すると遷移した状態でリロードしたときに404エラーでページが見つかりませんとなってしまいます。
それを回避するため、配置するサブディレクトリ直下に配置されるよう.htaccessを作成します。
例として配置するサブディレクトリをsampleディレクトリとします。

public/.htaccess

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sample/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . index.html [L]
</IfModule>

これでsampleディレクトリ以下で実際には存在しないファイル・ディレクトリへのアクセスは全てindex.htmlにリダイレクトされることになります。

次に最上位に配置されたBrowserRouterタグに要素を追加します。

src/App.jsx

<BrowserRouter basename="/sample/">

これでサブディレクトリへの配置する対応が完了しました。

プロジェクトのディレクトリにて次のようなコマンドを入力すると各パッケージのバージョンが確認できます。

npm list

出力結果の例

(プロジェクト名)@0.0.0 (プロジェクトのパス)
├── @emotion/react@11.11.4
├── @emotion/styled@11.11.5
├── @fontsource/roboto@5.0.13
├── @mui/icons-material@5.15.20
├── @mui/material@5.15.20
├── @types/react-dom@18.3.0
├── @types/react@18.3.3
├── @vitejs/plugin-react@4.3.1
├── axios@1.7.2
├── eslint-plugin-react-hooks@4.6.2
├── eslint-plugin-react-refresh@0.4.7
├── eslint-plugin-react@7.34.2
├── eslint@8.57.0
├── react-dom@18.3.1
├── react-router-dom@6.24.1
├── react@18.3.1
└── vite@5.3.1

特定のパッケージのバージョンが知りたい場合は次のようにしてください。

npm list react --depth=0

出力結果の例

(プロジェクト名)@0.0.0 (プロジェクトのパス)
└── react@18.3.1

--depth=0を付けないと依存関係にあるパッケージの情報も全て出力されます。

(プロジェクト名)@0.0.0 (プロジェクトのパス)
├─┬ @emotion/react@11.11.4
│ ├─┬ @emotion/use-insertion-effect-with-fallbacks@1.0.1
│ │ └── react@18.3.1 deduped
│ └── react@18.3.1 deduped
├─┬ @emotion/styled@11.11.5
│ └── react@18.3.1 deduped
├─┬ @mui/icons-material@5.15.20
│ └── react@18.3.1 deduped
├─┬ @mui/material@5.15.20
│ ├─┬ @mui/base@5.0.0-beta.40
│ │ ├─┬ @floating-ui/react-dom@2.1.0
│ │ │ └── react@18.3.1 deduped
│ │ └── react@18.3.1 deduped
│ ├─┬ @mui/system@5.15.20
│ │ ├─┬ @mui/private-theming@5.15.20
│ │ │ └── react@18.3.1 deduped
│ │ ├─┬ @mui/styled-engine@5.15.14
│ │ │ └── react@18.3.1 deduped
│ │ └── react@18.3.1 deduped
│ ├─┬ @mui/utils@5.15.20
│ │ └── react@18.3.1 deduped
│ ├─┬ react-transition-group@4.4.5
│ │ └── react@18.3.1 deduped
│ └── react@18.3.1 deduped
├─┬ react-dom@18.3.1
│ └── react@18.3.1 deduped
├─┬ react-router-dom@6.24.1
│ ├─┬ react-router@6.24.1
│ │ └── react@18.3.1 deduped
│ └── react@18.3.1 deduped
└── react@18.3.1

パッケージマネージャー「Homebrew」を使ってNode.jsをインストールします。
macOS（またはLinux）用パッケージマネージャー – Homebrew

インストールには次のコマンドをターミナルで実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

/opt/homebrew以下にインストールされます。
インストールが完了したら出力されたメッセージの最後の方に環境変数PATHへの追加方法が記載されています。

==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
    (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/(username)/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"

指示に従って2行のコマンドを実行します。

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/(username)/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

これでインストールは完了です。
バージョンを表示して動作を確認しましょう。

brew -v

続いて、nodeをインストールします。
次のコマンドを実行。

brew install node

完了したらNode.jsとついでにnpmのバージョンを表示して確認しましょう。

node -v
npm -v

以上でnodeのインストールは完了です。