List of React [text.Baldanders.info]

Node.js v24 がリリースされた

2025-05-08T22:34:18+00:00

最近仕事で React なんか弄ってるもんで Node.js の動向も押さえておこうかな，と。

Node.js — Node v24.0.0 (Current)

この記事について Kagi Assistant に要約してもらった。

Node.js 24.0.0のリリース内容を要約します。

リリース日: 2025年5月6日

主な更新点:

V8 JavaScriptエンジンがバージョン13.6にアップデート

新機能例: Float16Array, 明示的リソース管理, RegExp.escape, WebAssembly Memory64, Error.isErrorなど

npmがバージョン11にアップデート

パフォーマンス向上やセキュリティ改善、最新JavaScriptパッケージとの互換性強化

WindowsでのビルドにMSVCサポートを廃止し、ClangCLが必須に

AsyncLocalStorageがデフォルトでAsyncContextFrameを使用し、非同期コンテキスト追跡の効率化

URLPattern APIがグローバルオブジェクトに追加され、URLパターンマッチングが容易に

パーミッションモデルの改善（実験的フラグが--experimental-permissionから--permissionに変更）

テストランナーの改善でサブテストの自動待機が可能に

HTTPクライアントライブラリUndiciがバージョン7に更新

非推奨・削除:

url.parse()のランタイム非推奨（WHATWG URL APIの使用推奨）

tls.createSecurePairの削除

SlowBufferのランタイム非推奨

REPLのnewなしインスタンス化の非推奨

Zlibクラスのnewなし使用の非推奨

child_processのspawnやexecFileでのargsパラメータの非推奨

LTS移行予定: 2025年10月にLTSへ移行予定（現在はCurrentリリース）

このリリースはNode.jsのプラットフォームの進化を促進する重要なアップデートであり、開発者は新機能の活用や非推奨APIの置き換えを検討することが推奨されています¹。

Node.js — Node v24.0.0 (Current) ↩︎

というわけで Node.js v24 は 2025-10 以降に LTS になる予定である。 Node.js の LTS は通常30ヶ月間サポートされる。現在 LTS として運用されているバージョンは v22 と v20 である（v20 は 2026-04 まで）。また v18 は 2025-04 に EoL (End-of-Life) になっている。

ブックマーク

React のお勉強

参考文献

Effective TypeScript 第2版 ―型システムの力を最大限に引き出す83項目: Dan Vanderkam (著), 今村謙士 (翻訳); オライリー・ジャパン 2025-04-08 (Release 2025-04-08); 単行本（ソフトカバー）; 4814401094 (ASIN), 9784814401093 (EAN), 4814401094 (ISBN); 評価

TypeScript のお勉強用に購入。版元で PDF 版が買える。

reviewed by Spiegel on 2025-05-03 (powered by PA-APIv5)

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発: 手島拓也 (著), 吉田健人 (著), 高林佳稀 (著); 技術評論社 2022-07-25 (Release 2022-07-25); 単行本（ソフトカバー）; 4297129167 (ASIN), 9784297129163 (EAN), 4297129167 (ISBN); 評価

仕事用に購入。版元で電子版が買える。必要なところだけつまみ食い的に参照している。

reviewed by Spiegel on 2023-11-26 (powered by PA-APIv5)

React のお勉強

2025-03-14T09:44:25+00:00

React について勉強中。

いや，今までにも React / TypeScript なプロジェクトに参加したことはあるんだけど，ある程度お膳立てされた状態での join だったので，正直 React や TypeScript を知らなくても（やっつけの知識で）コードは書けるしテストも出来るわけよ。知らない言語でもコードなんて見れば分かるし。でも，それってプロジェクトが終われば忘れるぢゃん，身に付いてないんだから。

というわけで，ちょうど新しいプロジェクトのための事前学習を始めたタイミングということもあり，勤務先の有識者に最初から教えてもらえることになった。ただし，その前に公式サイトの学習ページ（日本語があるのか）は読んでおいてね，と言われ，スキマ時間で勉強を始めたのだが… JSX から始めるのか。よしやってみよう。

JSX で簡単なコードを書くだけなら特別な開発環境も要らないしフレームワークも要らないらしい。準備として HTML の <head> 要素に以下の記述を加えればよい。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react?dev",
    "react-dom/client": "https://esm.sh/react-dom/client?dev"
  }
}
</script>

@babel/standalone は JSX から JavaScript (React.createElement の式) への変換を行うものらしい。コードはこんな感じに記述する。

<div id="root1"></div>
<script type="text/babel" data-type="module">
  import React from 'react';
  import { createRoot } from 'react-dom/client';

  const MyApp = function() {
    return <strong>Hello, world!</strong>;
  }

  const container = document.getElementById('root1');
  const root = createRoot(container);
  root.render(<MyApp />);
</script>

強調している部分が JSX の特徴的な部分で HTML タグ風の記述（JSX 要素）が使えるため Web デザイナーでもとっつきやすいというのが売りなんだそうな。ユーザが定義した MyApp() 関数の名前をタグのように使えるのがポイント。タグは XML と同じ仕様なので void タグについては <MyApp /> のように明示する必要がある。

このコードを含む HTML ファイルをブラウザで表示すると以下のような表示になる。

Hello, World by React/JSX

うんうん。ちゃんと動いてるな。

HTML タグ記法を JSX の記法に変換する “HTML to JSX” というツールもある。

チュートリアルのコードをローカルで試したい場合。

まずは node.js のインストールを済ませておくこと。私は NodeSource から v22 LTS 版を入れている。最近は Bun の話もよく聞くようになった。

チュートリアル：三目並べ – Reactより

右上にある Fork を押下すると CodeSandbox のページが開く。

via Preview - nodebox - CodeSandbox

左上にある □ を押下して表示されるメニューから “Download Sandbox” を選択してコードをまるごと（zip 形式）ダウンロードし，ローカルの適当なディレクトリに展開する。

npm install を実行して依存ライブラリをインストールしようとしたのだがエラーになって怒られたので --legacy-peer-deps オプションを付けてやり直す。今度はうまく行ったが deprecated の嵐（笑）

いよいよ npm start でローカルサーバを起動しようとしたのだが，またしてもエラーで起動せず orz どうも npm audit fix --force で依存関係を更新しないといけないらしい。しかもこれを実行するたびに状況が変わるってどうなってるの？？？

ホンマ，この辺のテキトーさが node.js 開発系が嫌な理由なんだよな。しかも依存が深すぎて？何をどうしていいのか分からない。みんなこれちゃんとメンテ出来てるの？

ぶちぶちと愚痴を垂れつつ npm start を再実行。とりあえず動いたかな。

via npm start

三目並べ実行結果より

動いてるっぽいな。

さて，お勉強を続けますか。

ブックマーク

参考文献

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発: 手島拓也 (著), 吉田健人 (著), 高林佳稀 (著); 技術評論社 2022-07-25 (Release 2022-07-25); 単行本（ソフトカバー）; 4297129167 (ASIN), 9784297129163 (EAN), 4297129167 (ISBN); 評価

仕事用に購入。版元で電子版が買える。必要なところだけつまみ食い的に参照している。