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の間にどれだけ多くのコンポーネントが挟まっていても関係なく情報を受け渡すことができます。

続きを読む…»

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);

続きを読む...»