プロジェクトのディレクトリにて次のようなコマンドを入力すると各パッケージのバージョンが確認できます。

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

パッケージマネージャー「Homebrew」を使ってNode.jsをインストールします。
macOS（またはLinux）用パッケージマネージャー – Homebrew

インストールには次のコマンドをターミナルで実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

/opt/homebrew以下にインストールされます。
インストールが完了したら出力されたメッセージの最後の方に環境変数PATHへの追加方法が記載されています。

==> Next steps:
- Run these two commands in your terminal to add Homebrew to your PATH:
    (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/(username)/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"

指示に従って2行のコマンドを実行します。

(echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/(username)/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

これでインストールは完了です。
バージョンを表示して動作を確認しましょう。

brew -v

続いて、nodeをインストールします。
次のコマンドを実行。

brew install node

完了したらNode.jsとついでにnpmのバージョンを表示して確認しましょう。

node -v
npm -v

以上でnodeのインストールは完了です。

一番簡単な方法です。
XcodeのCommand Line Toolsをインストールするとgitが使えるようになります。

xcode-select --install

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

続きを読む…»

MySQLではGROUP BYを使ってレコードをグループ化し、カラムの合計や最小値・最大値などを集計することができます。
集計した値をWHERE句の抽出条件指定に使用することはできません。
そんなときはHAVING句を使用します。

まずはサンプルのテーブルを用意しましょう。

CREATE TABLE `students` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `name` varchar(30) NOT NULL,
  `class` int(4) NOT NULL,
  `score` int(4) NOT NULL,
  PRIMARY KEY (`id`)
);

サンプルデータを登録します。

INSERT INTO `students` VALUES
    (DEFAULT, '赤井', 1, 168),
    (DEFAULT, '井田', 2, 133),
    (DEFAULT, '宇野', 3, 167),
    (DEFAULT, '江崎', 1, 185),
    (DEFAULT, '奥本', 2, 142),
    (DEFAULT, '加藤', 3, 176),
    (DEFAULT, '菊池', 1, 159),
    (DEFAULT, '久保', 2, 181),
    (DEFAULT, '剣持', 3, 155);

classでグループ化し、scoreの合計を抽出してみましょう。

SELECT class, SUM(score) AS sum_score FROM `students`
GROUP BY class;

結果は次のようになります。

+-------+-----------+
| class | sum_score |
+-------+-----------+
|     1 |       512 |
|     2 |       456 |
|     3 |       498 |
+-------+-----------+

試しにWHERE句を使ってみましょう。

SELECT class, SUM(score) AS sum_score FROM `students`
WHERE sum_score > 500
GROUP BY class;

すると

ERROR 1054 (42S22): Unknown column 'sum_score' in 'where clause'

このようにエラーとなります。

それではHAVING句を使ってみましょう。

SELECT class, SUM(score) AS sum_score FROM `students`
GROUP BY class
HAVING sum_score > 500;

すると結果は次のようになります。

+-------+-----------+
| class | sum_score |
+-------+-----------+
|     1 |       512 |
+-------+-----------+

HAVING句による条件指定で絞り込みができています。

WHERE句はグループ化で集計される前、HAVING句はグループ化で集計された後のデータに対して条件を指定し絞り込むことができます。