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

create-react-appは更新が停止しているらしく、最近はViteでプロジェクトを生成するのが主流になりつつあるらしいです。
簡単にできるので早速試してみました。
npmとyarnを使ってやってみたので、両方の例を紹介します。

Vite

Viteがインストールされていない場合は以下のコマンドでインストールします。

nom install -g vite

npm

まずはプロジェクト生成

npm create vite@latest

コマンドを実行するとプロジェクト名・フレームワーク選択・使用言語を聞かれるので、
入力・選択してください。

Project name: vite-project
Select a framework: React
Select a variant: Javascript

上記入力が完了するとプロジェクト名のフォルダが出来上がるので、
同フォルダに移動して以下のコマンドを順に実行します。

cd vite-project

依存ライブラリをインストール

npm install

開発用ビルド

npm run dev

ローカルのURLが表示されるのでブラウザでアクセス。
画面が表示されたらプロジェクト生成の完了です。

本番用ビルド

npm run build

本番用プレビュー

npm run preview

続きを読む…»

NumberオブジェクトのtoStringメソッドを使って、基数変換を行うことができます。

まずは10進数で変換する値を宣言しておきます。

const dec = 500;

2進数に変換

const bin = dec.toString(2);
console.log(bin);

出力結果は111110100となります。

8進数に変換

const oct = dec.toString(8);
console.log(oct);

出力結果は764となります。

16進数に変換

const hex = dec.toString(16);
console.log(hex);

出力結果は1f4となります。

今度は逆の変換をしていきましょう。
各進数を10進数に変換するときはparseInt()関数を使います。

書式：parseInt(string, radix)

第1引数は文字列です。数値を指定しても文字列に変換して処理されます。
第2引数は第1引数で指定した文字列の基数を指定します。（2 <= radix <= 36）

出力結果は全て500となります。

2進数を10進数に変換

const dec = parseInt('111110100', 2);
console.log(dec);

続きを読む...»

jQueryでチェックボックスの全選択、及び全解除の仕組みを実装する方法をご紹介します。
jQueryを使いますので、jQueryの読み込みを忘れないようにしてください。

以下のようなHTMLがあったとします。

<input type="checkbox" name="all_check">全選択

<input type="checkbox" name="check[]" value="">a
<input type="checkbox" name="check[]" value="">b
<input type="checkbox" name="check[]" value="">c
<input type="checkbox" name="check[]" value="">d
<input type="checkbox" name="check[]" value="">e
<input type="checkbox" name="check[]" value="">f

まずは全選択のチェックボックスにチェックを入れると全てのチェックボックスにチェックが入るようにしましょう。

$('input[name="all_check"]').on('click',function() {
    $('input[name="check[]"]').prop('checked', this.checked);
});

次に、各チェックボックスのクリックイベントを設定し、チェックの状況によって全選択のチェック状態を変更するように仕組みます。
チェックボックスの数とチェックされたチェックボックスの数を比較して、同じであれば（全てチェックされていれば）全選択にもチェックを入れます。
どれか1つでもチェックが外れれば全選択のチェックは解除します。

$('input[name="check[]"]').on('click',function(){
    if($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length ) {
        $('input[name="all_check"]').prop('checked', true);
    } else {
        $('input[name="all_check"]').prop('checked', false);
    }
});

if文を使わずに1行で書くこともできます。

$('input[name="check[]"]').on('click',function(){
    $('input[name="all_check"]').prop('checked', ($('input[name="check[]"]:checked').length == $('input[name="check[]"]').length));
});