AsaDesign

React：三目並べ(セットアップ編)

https://ja.react.dev/learn/tutorial-tic-tac-toe

チュートリアルのセットアップ

  1. Node.js をインストール
  2. さきほど開いた CodeSandbox のタブで、左上隅のボタンを押してメニューを開き、そのメニューで Download Sandbox を選択して、ファイルをローカルにアーカイブとしてダウンロード
  3. アーカイブを解凍し、ターミナルを開いて解凍したディレクトリに cd する
  4. npm install で依存ライブラリをインストール
  5. npm start でローカルサーバを起動し、プロンプト通りに操作し、ブラウザで実行されるコードを確認する

npm startができない → 原因：Node.jsのバージョンが古い

いきなりnpm startした結果、ブラウザに「ERR_OSSL_EVP_UNSUPPORTED」と表示されてしまいました。

Node.jsのバージョンが古いことが原因でした。node -vで確認できます。

参考：「ERR_OSSL_EVP_UNSUPPORTED」エラーの原因

Node.js公式サイト通りに、最新バージョンをインストールします。

  • nvm ・・・Node Version Manager (ノード・バージョン管理ツール) 
  • node・・・サーバーサイドでJavaScriptを実行できる環境
  • npm・・・ Node Package Manager の略。npm コマンドをインストールすることで、 npm に登録された多数のパッケージを簡単に利用したり、公開できるようになる。インストールしたものはpackage.jsonに書かれている。

npm は Node.js をインストールすることで使えるようになる。

参考：Node.js と npm について – progate path

# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# download and install Node.js (you may need to restart the terminal)
nvm install 20
# verifies the right Node.js version is in the environment
node -v # should print `v20.17.0`
# verifies the right npm version is in the environment
npm -v # should print `10.8.2`
% nvm -v        
0.40.0
% node -v
v20.17.0
% npm -v
10.8.2

改めてnpm startします。

ようやくセットアップができました。

ちなみに：脆弱性の解消はできず

8 vulnerabilities (2 moderate, 6 high)
# 8 件の脆弱性 (中度 2 件、高度 6 件)

npm start した際、脆弱性があると表示されました。

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

言われた通りに、npm auditします。

npm audit とは

npm auditとは、プロジェクトに含まれているnpm package郡の中に脆弱性のあるnpm packageが存在するかどうかをチェックして脆弱性のレベルなどを表示してくれるコマンドのことです。

auditには「監査」や「監査する」といった意味があります。

Zenn
% npm audit

nth-check  <2.0.1
Severity: high
# nth-check の非効率的な正規表現の複雑さ
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
# 修正は「npm audit fix --force」経由で利用可能です
# 重大な変更であるreact-scripts@3.0.1をインストールします
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change


postcss  <8.4.31
Severity: moderate
# PostCSS 行の戻り解析エラー
PostCSS line return parsing error - https://github.com/advisories/GHSA-7fh5-64p2-3v2j
fix available via `npm audit fix --force`
Will install react-scripts@3.0.1, which is a breaking change

nth-checkとpostcssに脆弱性があるとのこと。
リンク先をみると、何が問題でどう悪用されるのか解説を見ることができます。

問題点を確認した後npm audit fix や npm audit fix –forceを試したのですが、脆弱性が減るどころか増えるばかりだったので、一旦諦めました。

脆弱性を抱えながらnpm startしている現状です。