<p>もし <code>0.1.x</code> を使用しているユーザーには <code>0.1.10</code> にアップグレードさせる必要があるので、<code>"0.1.x"</code> に対して <code>"0.1.10"</code> を指定します。<br>それ以外のユーザーには <code>8.0.0</code> にアップグレードさせる必要があるので、 <code>"*" </code>もしくは <code>"^0.1.10"</code> 以外のバージョンを持つすべてのユーザーに対して <code>"8.0.0"</code> を指定します。</p><h3 id="h3a193bd26b">2. <code>resolutions</code>フィールドを使って全体でバージョンを上げる（npm 7以降は対応）</h3><p>複数の依存関係のサブ依存も含めて、特定のパッケージのバージョンを一括で上げたい場合、<code>yarn</code>や<code>npm 7</code>以上の環境では、<code>package.json</code>に<code>resolutions</code>フィールドを追加して、特定のパッケージのバージョンを指定できます。</p><ol><li><code>package.json</code>ファイルに次のように<code>resolutions</code>フィールドを追加します。</li></ol><pre><code>json</code></pre><p>コードをコピーする<br><code>"resolutions": { "&lt;package-name&gt;": "&lt;version&gt;" }</code><br>たとえば、<code>lodash</code>のバージョンを最新の安定版にする場合：</p><pre><code>json</code></pre><p>コードをコピーする<br><code>"resolutions": { "lodash": "^4.17.21" }</code></p><ol><li><code>npm install</code>を実行して、<code>resolutions</code>で指定されたバージョンがインストールされるようにします。</li></ol><h3 id="h4d9bc145ea">3. <code>npm-force-resolutions</code>を使ってサブ依存を強制的にアップデートする</h3><p><code>npm</code>では、サブ依存パッケージのバージョンを強制的に上げるために<code>npm-force-resolutions</code>を使うことができます。</p><ol><li><code>npm-force-resolutions</code>をインストール：</li></ol><pre><code>bash</code></pre><p>コードをコピーする<br><code>npm install npm-force-resolutions --save-dev</code></p><ol><li><code>package.json</code>に<code>resolutions</code>フィールドを追加して、特定のパッケージをアップデート：</li></ol><pre><code>json</code></pre><p>コードをコピーする<br><code>"resolutions": { "&lt;package-name&gt;": "&lt;version&gt;" }</code><br>例として、<code>lodash</code>をアップデートする場合：</p><pre><code>json</code></pre><p>コードをコピーする<br><code>"resolutions": { "lodash": "^4.17.21" }</code><br><a href="https://qiita.com/masato_makino/items/20d4fcfc9c05bd3907da" target="_blank" rel="noopener noreferrer">https://qiita.com/masato_makino/items/20d4fcfc9c05bd3907da</a><br></p><ol><li><code>preinstall</code>スクリプトに<code>npm-force-resolutions</code>を追加：</li></ol><pre><code>json</code></pre><p>コードをコピーする<br><code>"scripts": { "preinstall": "npx npm-force-resolutions" }</code></p><ol><li>最後に<code>npm install</code>を実行して依存関係を更新：</li></ol><pre><code>bash</code></pre><p>コードをコピーする<br><code>npm install</code></p><h3 id="haf7a501fd0">4. 手動で依存パッケージのバージョンを調整</h3><p>直接依存しているパッケージのバージョンを個別に上げる場合、<code>package.json</code>内の依存パッケージを直接編集し、バージョンを更新することもできます。</p><pre><code>bash</code></pre><p>コードをコピーする<br><code>npm install &lt;package-name&gt;@latest</code><br>これにより、プロジェクト全体で特定のパッケージを最新版にすることができますが、サブ依存関係も影響を受ける場合がありますので、その際は<code>resolutions</code>を活用します。</p><h3 id="h5fe0caba45">5. テストと確認</h3><p>依存関係をアップデートした後は、必ずビルドとテストを実行して、プロジェクトが問題なく動作するか確認してください。<br>これらの方法で、プロジェクト全体で特定のパッケージのバージョンをアップデートできます。<br><br>エラーの中身を確認する<br>npm audit fixすればなおる！とあったのでやってみたけど減らなかった</p><pre><code># postcss はコマンドでは自動で直せないことを示している
No fix available
# semver は npm audit fix --force コマンドで修正できることを示している
fix available via `npm audit fix`
# word-wrap は npm audit fix コマンドで修正できることを示している
fix available via `npm audit fix --force`</code></pre><p><br></p>

<p>この備忘録ブログサイトを作ってから、パッケージの追加やアップデートは何度かしてきましたが、全体をしっかり見直すことはしていませんでした。<br>今回は、npmパッケージをまとめてバージョンアップデートしてみることに。</p><p>いくつかの記事を参考にしながら、自分なりに進めてみた備忘録です。</p>

<h2 id="h0bc54e2937">まずはnpm-check-updates</h2><p><a href="https://www.npmjs.com/package/npm-check-updates" target="_blank" rel="noopener noreferrer nofollow">npm-check-updates</a>はプロジェクトにインストールされているnpmパッケージのバージョンを一括で確認・更新することができます。</p>

# グローバルインストール
npm install -g npm-check-updates

# パッケージのバージョン確認
ncu

<p><code>ncu</code>（npm-check-updates）を実行すると、以下の情報が表示されます。</p><ol><li><strong>現在のバージョン</strong><br>プロジェクトにインストールされている各パッケージの現在のバージョン</li><li><strong>最新のバージョン</strong><br>各パッケージの最新バージョンが表示され、どのパッケージが更新可能かを把握できる</li><li><strong>更新が必要なパッケージの一覧</strong><br>どのパッケージを更新する必要があるかが一目でわかる</li></ol><table><tbody><tr><th colspan="1" rowspan="1"><p>文字色</p></th><th colspan="1" rowspan="1"><p>意味</p></th></tr><tr><td colspan="1" rowspan="1"><p>🔴赤</p></td><td colspan="1" rowspan="1"><p>メジャーアップグレード／major upgrade</p></td></tr><tr><td colspan="1" rowspan="1"><p>🔵青</p></td><td colspan="1" rowspan="1"><p>マイナーアップグレード／minor upgrade</p></td></tr><tr><td colspan="1" rowspan="1"><p>🟢緑</p></td><td colspan="1" rowspan="1"><p>パッチのアップグレード／patch upgrade</p></td></tr></tbody></table><h3 id="hdc7579b318">アップデートの実施：パッチからマイナーバージョンへ</h3><p>一気にすべてのパッケージをアップデートするのが不安だったので、まずはパッチバージョンだけをアップデートすることにしました。</p>

<p>アップデートが完了した後、変更をコミットし、デプロイを実行。</p><h4 id="hd15c229cf0">デプロイでこける😱</h4><p>npm installを実行してなかった..<br>package-lock.jsonを更新し、package.jsonと整合性を取る。</p><p>デプロイできた！</p>

<p>問題がなかったので次はマイナーバージョンをアップデート。</p>

<p><strong>📝参考</strong></p><ul><li><a href="https://qiita.com/nekyo/items/19be05578638fe3e4aec" target="_blank" rel="noopener noreferrer nofollow">【Mac+Node】Mac に node.js（と Python2）をインストール。時々 ncu。</a></li></ul>

<h2 id="h1003736836">パッケージのアップデートとknipの活用</h2><p>パッケージのアップデートを行ったものの、使ってないパッケージやプロジェクト内の整理できてなかった‥</p><p>これを機にknipを使って未使用のコードや依存関係を整理してみました。</p><blockquote><p>Knip finds <strong>unused files, dependencies and exports</strong> in your JavaScript and TypeScript projects. Less code and dependencies lead to improved performance, less maintenance and easier refactorings.</p><p>Knip は、JavaScript および TypeScript プロジェクト内の未使用のファイル、依存関係、エクスポートを検出します。コードと依存関係が少ないほど、パフォーマンスが向上し、メンテナンスが減り、リファクタリングが容易になります。</p><p><a href="https://github.com/webpro-nl/knip" target="_blank" rel="noopener noreferrer nofollow">https://github.com/webpro-nl/knip</a></p></blockquote><p>パッケージを入れて確認‥👀</p>

# インストール
npm install -D knip

# 実行
npx knip

# オプションを使うとmarkdownのレポート形式で出してくれる
npx knip --reporter markdown

<p>たくさん該当しました😂</p><p>使用していないファイル、パッケージ、型など削除します。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>説明</p></th></tr><tr><td colspan="1" rowspan="1"><p>Unused files</p></td><td colspan="1" rowspan="1"><p>プロジェクト内で参照されていないファイル</p></td></tr><tr><td colspan="1" rowspan="1"><p>Unused dependencies</p></td><td colspan="1" rowspan="1"><p>インストールされているが、コードで使用されていないパッケージ</p></td></tr><tr><td colspan="1" rowspan="1"><p>Unused devDependencies</p></td><td colspan="1" rowspan="1"><p>開発環境でインストールされたが、プロジェクト内で使用されていない開発用パッケージ</p></td></tr><tr><td colspan="1" rowspan="1"><p>Unlisted binaries</p></td><td colspan="1" rowspan="1"><p><code>package.json</code>に記載されていない実行可能なバイナリファイル。</p></td></tr><tr><td colspan="1" rowspan="1"><p>Unused exports</p></td><td colspan="1" rowspan="1"><p>モジュールからエクスポートされているが、他のモジュールで参照されていないエクスポート</p></td></tr><tr><td colspan="1" rowspan="1"><p>Unused exported types</p></td><td colspan="1" rowspan="1"><p>型定義ファイルからエクスポートされているが、他のコードで使用されていない型</p></td></tr></tbody></table><h4 id="hbeb24e1e68">消したら動かなくなった😱</h4><p><code>image/loader.js</code>が未使用ファイルとして検出され、誤って削除してしまった。</p><p>今後同じような問題を避けるために、以下の手順で設定を変更することにしました。</p>

{
  "entry": [
    "image/loader.js",
    "next-sitemap.config.js"
  ]
}

<p>entryに指定されたファイルを未使用ファイルとしてマークしないため、検知されたくないファイルを指定しました！</p><h4 id="he16f0ec8e4">整理できた！</h4><pre><code>✂️  Excellent, Knip found no issues.</code></pre><p>📝<strong>参考</strong></p><ul><li><a href="https://tech.basemachina.jp/entry/introduction-knip" target="_blank" rel="noopener noreferrer nofollow">TypeScript/JavaScriptの不要なコードを削除するツール「Knip」の紹介</a></li><li><a href="https://zenn.dev/roboin/articles/3dfc5eba5433ba" target="_blank" rel="noopener noreferrer nofollow">不要なexportや依存関係を削除できるKnipの使い方</a></li></ul>

<h2 id="h10e8f9edeb">npm auditでセキュリティ脆弱性を確認</h2><p>npm auditを実行したらcriticalはありませんでしたが、highが10個も該当しました😓</p><p>23 vulnerabilities (4 low, 5 <span style="color: #d99200">moderate</span>, 10 <span style="color: #ff0000">high</span>)</p><table><tbody><tr><th colspan="1" rowspan="1"><p>レベル</p></th><th colspan="1" rowspan="1"><p>内容</p></th></tr><tr><td colspan="1" rowspan="1"><p>critical</p></td><td colspan="1" rowspan="1"><p>非常に危険な脆弱性</p></td></tr><tr><td colspan="1" rowspan="1"><p>high</p></td><td colspan="1" rowspan="1"><p>深刻な脆弱性</p></td></tr><tr><td colspan="1" rowspan="1"><p>moderate</p></td><td colspan="1" rowspan="1"><p>影響のある脆弱性</p></td></tr><tr><td colspan="1" rowspan="1"><p>low</p></td><td colspan="1" rowspan="1"><p>低リスクの脆弱性</p></td></tr></tbody></table>

# npm audit report

axios  0.8.1 - 0.27.2 || 1.3.2 - 1.7.3
Severity: high
Axios Cross-Site Request Forgery Vulnerability - https://github.com/advisories/GHSA-wf5p-g6vw-rhxx
Server-Side Request Forgery in axios - https://github.com/advisories/GHSA-8hc4-vh64-cxmj
fix available via `npm audit fix --force`
Will install @sendgrid/client@8.1.4, which is a breaking change
node_modules/@sendgrid/client/node_modules/axios
node_modules/axios
  @sendgrid/client  7.0.0 - 7.7.0
  Depends on vulnerable versions of axios
  node_modules/@sendgrid/client
    @sendgrid/mail  7.0.0 - 7.7.0
    Depends on vulnerable versions of @sendgrid/client
    node_modules/@sendgrid/mail

braces  <3.0.3
Severity: high
Uncontrolled resource consumption in braces - https://github.com/advisories/GHSA-grv7-fg5c-xmjg
fix available via `npm audit fix`
node_modules/braces

cookie  <0.7.0
cookie accepts cookie name, path, and domain with out of bounds characters - https://github.com/advisories/GHSA-pxg6-pf52-xh8x
No fix available
node_modules/cookie
  @cloudflare/next-on-pages  *
  Depends on vulnerable versions of cookie
  node_modules/@cloudflare/next-on-pages
  youch  2.0.4 - 3.3.3
  Depends on vulnerable versions of cookie
  node_modules/youch

…続く

<p>npm auditを実行して大量の情報が表示されると、おお、、これ全部か……↘</p><h3 id="h0a4eb18963">どんな情報が出力されている？</h3><p>dompurifyを見てみます。</p>

dompurify  3.0.0 - 3.1.2
Severity: high
DOMPurify allows tampering by prototype pollution - https://github.com/advisories/GHSA-mmhx-hmjr-r674
DOMpurify has a nesting-based mXSS - https://github.com/advisories/GHSA-gx9m-whjm-85jf
fix available via `npm audit fix`
node_modules/dompurify

<p>dompurify パッケージの 3.0.0 から 3.1.2 に関する脆弱性が報告されていて、2つの脆弱性が詳細リンクと一緒に記載されている。</p><p>npm audit fix を使用することで修正が可能である旨が表示され、最後に影響のあるパッケージのファイルパス（node_modules 配下の dompurify）も記載されている。</p><h3 id="hda65cb0310">npm audit レポートの構成</h3><table><tbody><tr><th colspan="1" rowspan="1"><p>セクション</p></th><th colspan="1" rowspan="1"><p>説明</p></th></tr><tr><td colspan="1" rowspan="1"><p>パッケージ情報</p></td><td colspan="1" rowspan="1"><p>対象のパッケージ名と影響を受けるバージョン範囲</p></td></tr><tr><td colspan="1" rowspan="1"><p>Severity（深刻度）</p></td><td colspan="1" rowspan="1"><p>脆弱性の深刻度</p></td></tr><tr><td colspan="1" rowspan="1"><p>脆弱性の詳細</p></td><td colspan="1" rowspan="1"><p>脆弱性の名称と内容、影響範囲の概要</p></td></tr><tr><td colspan="1" rowspan="1"><p>Advisory URL</p></td><td colspan="1" rowspan="1"><p>各脆弱性の詳細情報へのリンク</p></td></tr><tr><td colspan="1" rowspan="1"><p>修正方法</p></td><td colspan="1" rowspan="1"><p>npm audit fix による自動修正方法や推奨バージョンへのアップデート案内</p></td></tr><tr><td colspan="1" rowspan="1"><p>パス情報</p></td><td colspan="1" rowspan="1"><p>対象のパッケージの場所<br>依存関係の深いパスもここにリストされる</p></td></tr></tbody></table><h3 id="h5fa47394a1">修正してみる</h3><p>fix available via <code>npm audit fix</code>とあるので、<code>npm audit fix dompurify</code>を実行してみます。</p><p>17 vulnerabilities (3 low, 4 moderate, 10 high)</p><p>dompurifyのhighが消えて、npm auditレポートの該当件数も減りました！</p><p>npm audit fixで解消されるパッケージは、まとめて対応しました。</p><h2 id="hb3073dfb6d">npm audit fixでは解決できないパッケージ</h2><p>path-to-regexpを見てみます。</p>

path-to-regexp  4.0.0 - 6.2.2
Severity: high
path-to-regexp outputs backtracking regular expressions - https://github.com/advisories/GHSA-9wv6-86v2-598j
fix available via `npm audit fix`
node_modules/@vercel/routing-utils/node_modules/path-to-regexp
node_modules/path-to-regexp
  @vercel/node  >=2.11.0
  Depends on vulnerable versions of path-to-regexp
  node_modules/@vercel/node
  @vercel/routing-utils  *
  Depends on vulnerable versions of path-to-regexp
  node_modules/@vercel/routing-utils
    @vercel/gatsby-plugin-vercel-builder  *
    Depends on vulnerable versions of @vercel/routing-utils
    node_modules/@vercel/gatsby-plugin-vercel-builder
      @vercel/static-build  >=1.3.0
      Depends on vulnerable versions of @vercel/gatsby-plugin-vercel-builder
      node_modules/@vercel/static-build
    @vercel/redwood  >=0.6.1-canary.0
    Depends on vulnerable versions of @vercel/routing-utils
    node_modules/@vercel/redwood

<p>npm audit fix path-to-regexpを実行してみましたが、解消されません。</p><p>出力された脆弱性の詳細情報を確認してみます。</p><blockquote><p>path-to-regexp outputs backtracking regular expressions - <a href="https://github.com/advisories/GHSA-9wv6-86v2-598j">https://github.com/advisories/GHSA-9wv6-86v2-598j</a></p><p>path-to-regexp が出力する正規表現にはバックトラッキングが含まれており、悪意のある入力に対して正規表現の評価が長時間かかる可能性があります。</p></blockquote><blockquote><p>path-to-regexp outputs backtracking regular expressions<br>For users of 0.1, upgrade to 0.1.10. All other users should upgrade to 8.0.0.</p><p>0.1 のユーザーは 0.1.10 にアップグレードしてください。その他のすべてのユーザーは 8.0.0 にアップグレードする必要があります。</p></blockquote><p>8.0.0にする必要がありそうです。</p><h3 id="h8594afbbc5">npm lsで依存関係を確認</h3><p>npm ls path-to-regexpを実行。</p>

├─┬ @cloudflare/next-on-pages@1.13.5
│ └─┬ vercel@37.12.1
│   ├─┬ @vercel/fun@1.1.0
│   │ └─┬ path-match@1.2.4
│   │   └── path-to-regexp@1.9.0
│   ├─┬ @vercel/node@3.2.23
│   │ └── path-to-regexp@6.2.1
│   └─┬ @vercel/redwood@2.1.8
│     └─┬ @vercel/routing-utils@3.1.0
│       └── path-to-regexp@6.1.0
└─┬ wrangler@3.78.5
  └── path-to-regexp@6.3.0

<h3 id="h9354bfba43">具体的な依存関係</h3><p>@cloudflare/next-on-pages@1.13.5 パッケージが、以下のパッケージを持っている。</p><ul><li>vercel@37.12.1<ul><li>@vercel/fun@1.1.0: path-match@1.2.4 から path-to-regexp@1.9.0 に依存している。</li><li>@vercel/node@3.2.23: path-to-regexp@6.2.1 に依存している。</li><li>@vercel/redwood@2.1.8: @vercel/routing-utils@3.1.0 から path-to-regexp@6.1.0 に依存している。</li></ul></li></ul><p>👉特定のパッケージが他のパッケージに依存している状態</p><h3 id="he411664183">直接の依存関係</h3><p>wrangler@3.78.5 パッケージが path-to-regexp@6.3.0 に依存している。</p><p>👉プロジェクトが直接インストールしたパッケージ</p><h3 id="hebf37af91f">該当パッケージのバージョンを最新にしてみる</h3><p>@cloudflare/next-on-pagesとwranglerのパッケージを最新にアップデートしましたが、Severity: highのままでした。</p>

<h2 id="ha4650c7ed2">特定のパッケージとそのサブ依存のバージョンを一括で上げる</h2><p>npmの場合は依存関係ツリーをpackage.jsonで上書きするoverridesオプションがあります。</p><blockquote><p><strong>overrides</strong></p><p>If you need to make specific changes to dependencies of your dependencies, for example replacing the version of a dependency with a known security issue, replacing an existing dependency with a fork, or making sure that the same version of a package is used everywhere, then you may add an override.</p><p><a href="https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides" target="_blank" rel="noopener noreferrer nofollow">https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides</a></p></blockquote><p>package.jsonにpath-to-regexpのバージョンを8.0.0で固定します。</p>

{
  //略
  "overrides": {
    "path-to-regexp": "8.0.0"
  }
}

<p>追加したあとに<code>npm install</code>を実行。</p><p>17 vulnerabilities (4 low, 6 <span style="color: #d99200">moderate</span>, 7 <span style="color: #ff0000">high</span>)</p><p>highが10→7に減りました！</p><p><code>npm ls path-to-regexp</code>を確認してみる。</p>

├─┬ @cloudflare/next-on-pages@1.13.5
│ └─┬ vercel@37.4.2
│   ├─┬ @vercel/fun@1.1.0
│   │ └─┬ path-match@1.2.4
│   │   └── path-to-regexp@8.0.0 deduped
│   ├─┬ @vercel/node@3.2.14
│   │ └── path-to-regexp@8.0.0 deduped
│   └─┬ @vercel/redwood@2.1.5
│     └─┬ @vercel/routing-utils@3.1.0
│       └── path-to-regexp@8.0.0 deduped
└─┬ wrangler@3.83.0
  └── path-to-regexp@8.0.0 overridden

<h3 id="h9f572c40b1">残りのhighのパッケージもアップデート</h3><h4 id="he48ac23e5c">semver</h4>

semver  6.0.0 - 6.3.0 || 7.0.0 - 7.5.1
Severity: high
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via `npm audit fix`
node_modules/@vercel/fun/node_modules/semver
node_modules/eslint-plugin-jsx-a11y/node_modules/semver

<p>出力された情報の参照先に以下のバージョン以上に更新するようにと書いてあります。</p><ul><li>7.x ブランチ: 7.5.2 以上</li><li>6.x ブランチ: 6.3.1 以上</li><li>5.x ブランチ: 5.7.2 以上</li></ul><p>package.jsonのoverridesで7.5.2以上を設定。</p>

{
  //略
  "overrides": {
    "path-to-regexp": "8.0.0",
    "semver": ">=7.5.2"
  }
}

<h4 id="h9189d9ec57">next</h4><p>dependenciesのパッケージなので、nextはインストールしているバージョンをアップデートします。</p>

next  10.0.0 - 14.2.6
Severity: high
Next.js Server-Side Request Forgery in Server Actions - https://github.com/advisories/GHSA-fr5h-rqp8-mj6g
Denial of Service condition in Next.js image optimization - https://github.com/advisories/GHSA-g77x-44xx-532m
fix available via `npm audit fix --force`
Will install next@15.0.1, which is a breaking change
node_modules/next

<p>SSRFはv13.5.7・v14.2.10以降で、イメージ最適化はv14.2.7以降と..</p>

<p>9 vulnerabilities (3 low, 6 <span style="color: #d99200">moderate</span>)</p><p>highが全部消えた！</p><p>（こまめに動作するか確認を挟んでましたが）最後に動作確認をして完了です。</p><h2 id="had7a21d220">実際にやってみて</h2><ul><li>定期的にアップデートしないとまとめて実施するのが辛い。そもそもプロジェクト全体の健全性を保つためには、定期的に対応すべき。</li><li>パッケージの中のパッケージ＝サブ依存関係の確認方法やアップデート方法が学びになった。</li><li>npm audit の中身が読めるようになると、とっつきにくさは軽減される。<p></p></li></ul><p>📝参考</p><ul><li><a href="https://qiita.com/alfe_below/items/1141ec9acbb81b504855" target="_blank" rel="noopener noreferrer nofollow">package.json dependencies メンテの仕方 最短ルート</a></li><li><a href="https://zenn.dev/tm35/articles/c170eac0b22f5f" target="_blank" rel="noopener noreferrer nofollow">【npm audit】npm package の脆弱性対応してますか？</a></li><li><a href="https://qiita.com/masato_makino/items/20d4fcfc9c05bd3907da" target="_blank" rel="noopener noreferrer nofollow">依存パッケージの脆弱性修正には、package.jsonのoverrides / resolutionsフィールドを使いましょう</a></li></ul>

ずっと放置していたnpmパッケージのアップデートに取り組んでみた

<p>チェックボックス「すべて選択」機能があるサイトの有効・無効動作とタップエリアについて、いくつかサイトを調べてみました。</p><h2 id="hb629a8fc9d">どんなケースで「すべて選択」機能があるか</h2><p>一括で同じ動作をする場合とに「すべて選択」といった機能がついている傾向にある。 ※個人的に調べた結果</p><p><strong>一括で同じ動作をするケース</strong></p><ul><li>まとめて記事を削除する</li><li>まとめてお気に入りに登録する</li><li>まとめて資料請求する</li></ul><p><strong>似たような選択肢をまとめて選択するケース</strong></p><ul><li>沿線沿いの駅をまとめて選択する</li><li>職種の小・中分類に属する選択肢をまとめて選択する</li></ul><p>など</p><h2 id="hc8b6cdf8b8">「すべて選択」の有効・無効の切り替えの動作パターン</h2><h3 id="h10422867da">01 何も選択していない状態から「すべて選択」</h3><p>「すべて選択」を有効にすると「すべて選択」とすべての選択肢が有効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e4fd1c34e92f41c494fc45de1f4debec/check_all01.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="h552e44218b">02 すべて選択が有効な状態から「すべて選択」無効</h3><p>「すべて選択」を無効にすると「すべて選択」とすべての選択肢が無効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e4fa9efc557741e9ad137922e11254ae/check_all02.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="hd56333a796">03 すべて選択が有効な状態から一部選択肢を無効</h3><p>一部選択肢を無効にすると「すべて選択」が無効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/5eba20b963ac489e90dfb0af0449471a/check_all03.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h3 id="hd9b0b45367">04 一部選択有効な状態からすべて選択を有効</h3><p>「すべて選択」以外の選択肢がすべて有効になると「すべて選択」が有効になる</p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1c88cc0550b8483890f6a8026b247f64/check_all04.png?w=332&amp;h=74" alt="" width="332" height="74"></figure><h2 id="heb84ddeb7d">番外編</h2><p>調べたサイトでは「すべて選択」自体がチェックボックスになっているケースが多かったですが、中にはテキストリンクで有効・無効にするケースもありました。</p><p><strong>Amazonのショッピングカートページ</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ca7188bb1e2f4b3d887997b7613fc300/checkbox_amazon.png" alt="" width="1016" height="240"></figure>

<h2 id="h59f599a5a9">クリック・タップエリアも調べてみました💡</h2><h3 id="hef1cc3126d">⚙ ダッシュボード</h3><p><strong>WordPress</strong></p><ul><li>ホバーしたときにクリックエリアの背景色が変わる</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/36cc36aa7ae84b0ca92b2e0ce2455e4a/checkbox_wp.png?w=332&amp;h=156" alt="" width="332" height="156"></figure><p><strong>STUDIO</strong></p><ul><li>特にクリックエリアは拡大されてない</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/9f2fbd04b2554bd6abda07e047dce3b7/checkbox_studio.png?w=332&amp;h=156" alt="" width="332" height="156"></figure><h3 id="hf4bdfdb6f0">🏠 賃貸・物件検索サイト</h3><p><strong>SUUMO</strong></p><ul><li>チェックボックスより幅広くテキストの一部も含んでいるのでタップしやすい</li><li>アコーディオン機能とチェックボックスがあるところはチェックボックスよりタップエリアが拡大されている</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/858323e540ca4b6eb035a483ad4fe501/checkbox_suumo.png" alt="" width="1017" height="240"></figure><p><strong>アットホーム</strong></p><ul><li>一行全体がタップエリア</li><li>リンクエリアとの境目にラインがあるのでチェックボックスエリアとリンクエリアを認識しやすい</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1b257901205f4fde8bcaf6b44813f9a8/checkbox_athome.png" alt="" width="1016" height="240"></figure>

<h3 id="h7e77abcf62">🏢 施設・店舗検索サイト</h3><p><strong>ホットペッパービューティー</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/539c5e6809304040a8422f00ae9c6f01/checkbox_hotpepper.png" alt="" width="1016" height="240"></figure><p><strong>一休.com</strong></p><ul><li>背景色がついているのでタップエリアが明確</li><li>地域は都道府県名の横に選択中の数が表示される</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/4aeb0dd1041647a38f03e0af10fa0f52/checkbox_ikyu.png" alt="" width="1016" height="300"></figure><p><strong>楽天トラベル</strong></p><ul><li>チェックボックスとテキストまでタップエリア</li><li>よく検索される条件だけピックアップされたエリアにボタンのようなチェックボックス</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/e951d474818b4659b11e3e33b09c72a6/checkbox_rakuten.png" alt="" width="1016" height="220"></figure><h3 id="hec4ab7c7de">👚 ファッションEC</h3><p><strong>ZOZOTOWN</strong></p><ul><li>タップエリア広め</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/c7708a85c4ea4ccf9ba74133b8937915/checkbox_zozo.png" alt="" width="1016" height="240"></figure><p><strong>SHOPLIST</strong></p><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/1a14bd5b45354c28a2f1dd8f640a83ba/checkbox_shoplist.png" alt="" width="1016" height="240"></figure>

<h3 id="hb029aebaf1">🏃 求人検索サイト</h3><p><strong>バイトル</strong></p><ul><li>選択中の親要素のテキスト色も変化する</li><li>項目によって選択しやすいデザインになっている（１行にすべての選択肢が収まっている）</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/57b2968819894b2dac1806f205edfdaf/checkbox_baitoru.png" alt="" width="1016" height="240"></figure><p><strong>エンゲージ</strong></p><ul><li>１行にアコーディオンとチェックボックスの両方がある場合、チェックボックスのタップエリアが広め</li><li>アコーディオンの開閉ボタン領域が明確</li><li>選択中のアイコンが表示される</li></ul><figure><img src="https://images.microcms-assets.io/assets/5e670c7778344f88b5eed6bb029b015c/ddee7f51f7944aa590fa322c87dace49/checkbox_en-gage.png" alt="" width="1016" height="300"></figure>

<h2 id="ha214098e44">まとめ</h2><p>今回調べたサイトでは「すべて選択」の挙動は同じ結果に。たくさん選択肢があるという理由だけで「すべて選択」の機能を付けるよりも、項目の内容や検索条件によって「すべて選択」するケースがあるのかを検討する必要がある。</p><p>リンクエリアの中にあるチェックボックス、アコーディオンと一体になったチェックボックスの場合、どこまでがチェックボックスに対するタップエリアか明確だと誤操作による意図しないページ遷移が防げる。</p>

チェックボックス「すべて選択」機能があるサイトの有効・無効動作とタップエリアについて調べてみた

<p>このサイトはWebサイト制作のための備忘録ブログです。<br></p><ul><li>Next.js×microCMSの学習のため</li><li>備忘録ブログを使った検証</li><li>学習の記録</li><li>サイト制作に関して思ったこと など</li></ul><p><br>あまり縛りなくゆるめにWebに関連する内容を記録していこうと考えています。<br></p>

<p>このサイトはWebサイト制作のための備忘録ブログです。</p><p><br></p><ul><li>Next.js×microCMSの学習のため</li><li>備忘録ブログを使った検証</li><li>学習の記録</li><li>サイト制作に関して思ったこと など</li></ul><p><br></p><p>あまり縛りなくゆるめにWebに関連する内容を記録していこうと考えています。</p>