リストやテーブルの行をドラッグ＆ドロップで並べ替えられるようにするにはjQuery UIやSortableJSを使えば実現できます。
しかし、他のライブラリと相性が悪く他の方法を探していたらHTMLとJavaScriptだけで実現する方法がありましたのでご紹介します。

まずはHTMLで適当なテーブルを用意します。

<table id="data_table">
    <tr>
        <th>columnA</th>
        <th>columnB</th>
        <th>columnC</th>
    </tr>
    <tr id="1" draggable="true">
        <td>row1 value1</td>
        <td>row1 value2</td>
        <td>row1 value3</td>
    </tr>
    <tr id="2" draggable="true">
        <td>row2 value1</td>
        <td>row2 value2</td>
        <td>row2 value3</td>
    </tr>
    <tr id="3" draggable="true">
        <td>row3 value1</td>
        <td>row3 value2</td>
        <td>row3 value3</td>
    </tr>
    <tr id="4" draggable="true">
        <td>row4 value1</td>
        <td>row4 value2</td>
        <td>row4 value3</td>
    </tr>
</table>

表示例

ここでのポイントはtr要素に設定したidとdraggable="true"です。
draggable="true"は要素をドラッグ可能にします。
idは要素を一意なものとして認識するために必要なIDです。
tableに設定したidは対象を特定するために必要なものですので、任意でクラス等にしても問題ありません。

続きを読む…»

MySQL等から返されるハイフン区切りの日付をJavaScriptでスラッシュ区切りにしたいことがあったので、その方法をご紹介します。

まず単純な方法であれば文字列分割＆結合でやることも可能です。

console.log('2024-08-29'.split('-').join('/'));
// 2024/08/29

別な方法としてDateオブジェクトを使って実装してみたいと思います。
toLocaleDateStringを使いロケールに日本を指定して実行してみます。

let date = new Date('2024-08-29').toLocaleDateString('ja-JP');
console.log(date);
// 2024/8/29

スラッシュ区切りにはなりましたが、月が1桁になっています。
月を2桁で表示したい場合はtoLocaleDateStringメソッドの第2引数にオプションを指定します。

let date = new Date('2024-08-29').toLocaleDateString('ja-JP', { year: "numeric", month: "2-digit", day: "2-digit" });
console.log(date);
// 2024/08/29

これでyyyy/mm/ddの形式になりました。

参考URL:
Date.prototype.toLocaleDateString() – JavaScript | MDN

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/">

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