<p data-line="1" class="code-line">CI/CDでのデプロイ中に、以下のようなエラーに遭遇したことはありませんか？</p>
<div class="code-block-container"><pre><code class="code-line" data-line="3">npm error `npm ci` can only install packages when your package.json and package-lock.json are in sync.
npm error Missing: @types/markdown-it@14.1.2 from lock file
npm error Missing: @types/linkify-it@5.0.0 from lock file
npm error Missing: @types/mdurl@2.0.0 from lock file
</code></pre></div><p data-line="10" class="code-line">このエラーは、package.jsonに記載されている依存関係がpackage-lock.jsonに含まれていない時に発生します。この記事では、確実な解決方法を紹介します。</p>
<h2 id="%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E5%8E%9F%E5%9B%A0" data-line="12" class="code-line"><a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E5%8E%9F%E5%9B%A0" aria-hidden="true"></a> エラーの原因</h2>
<p data-line="14" class="code-line"><code>npm ci</code>は本番環境での高速なインストールを目的としており、package-lock.jsonの内容を厳密にチェックします。package.jsonに新しい依存関係を追加したが、package-lock.jsonが更新されていない場合にこのエラーが発生します。</p>
<h2 id="%E8%A7%A3%E6%B1%BA%E6%89%8B%E9%A0%86" data-line="16" class="code-line"><a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 解決手順</h2>
<h3 id="1.-%E4%B8%8D%E8%B6%B3%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E4%BE%9D%E5%AD%98%E9%96%A2%E4%BF%82%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="18" class="code-line"><a class="header-anchor-link" href="#1.-%E4%B8%8D%E8%B6%B3%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E4%BE%9D%E5%AD%98%E9%96%A2%E4%BF%82%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 1. 不足している依存関係をインストール</h3>
<p data-line="20" class="code-line">エラーメッセージに表示されているパッケージを明示的にインストールします：</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="22"><span class="token function">npm</span> <span class="token function">install</span> @types/markdown-it@14.1.2 @types/linkify-it@5.0.0 @types/mdurl@2.0.0
</code></pre></div><h3 id="2.-package-lock.json%E3%81%AE%E6%9B%B4%E6%96%B0%E3%82%92%E7%A2%BA%E8%AA%8D" data-line="26" class="code-line"><a class="header-anchor-link" href="#2.-package-lock.json%E3%81%AE%E6%9B%B4%E6%96%B0%E3%82%92%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 2. package-lock.jsonの更新を確認</h3>
<p data-line="28" class="code-line">インストール後、package-lock.jsonが更新されていることを確認：</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="30"><span class="token function">git</span> status
</code></pre></div><p data-line="34" class="code-line">以下のような出力が表示されるはずです：</p>
<div class="code-block-container"><pre><code class="code-line" data-line="36">modified:   package.json
modified:   package-lock.json
</code></pre></div><h3 id="3.-%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" data-line="41" class="code-line"><a class="header-anchor-link" href="#3.-%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 3. 動作確認</h3>
<p data-line="43" class="code-line">ローカルで<code>npm ci</code>が正常に動作することを確認：</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="45"><span class="token function">npm</span> ci
</code></pre></div><h3 id="4.-%E5%A4%89%E6%9B%B4%E3%82%92%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88" data-line="49" class="code-line"><a class="header-anchor-link" href="#4.-%E5%A4%89%E6%9B%B4%E3%82%92%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88" aria-hidden="true"></a> 4. 変更をコミット</h3>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="51"><span class="token function">git</span> <span class="token function">add</span> package.json package-lock.json
<span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">"fix: add missing TypeScript type dependencies"</span>
<span class="token function">git</span> push
</code></pre></div><h2 id="%E5%AE%9F%E9%9A%9B%E3%81%AE%E4%BF%AE%E6%AD%A3%E4%BE%8B" data-line="57" class="code-line"><a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E4%BF%AE%E6%AD%A3%E4%BE%8B" aria-hidden="true"></a> 実際の修正例</h2>
<p data-line="59" class="code-line">私のプロジェクトでの実際の解決手順：</p>
<h3 id="%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%AD%E3%82%B0" data-line="61" class="code-line"><a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%AD%E3%82%B0" aria-hidden="true"></a> エラーログ</h3>
<div class="code-block-container"><pre><code class="code-line" data-line="63">18:52:21.132    npm error Missing: @types/markdown-it@14.1.2 from lock file
18:52:21.133    npm error Missing: @types/linkify-it@5.0.0 from lock file  
18:52:21.133    npm error Missing: @types/mdurl@2.0.0 from lock file
</code></pre></div><h3 id="%E8%A7%A3%E6%B1%BA%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" data-line="69" class="code-line"><a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89" aria-hidden="true"></a> 解決コマンド</h3>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="71"><span class="token comment"># 不足している依存関係をインストール</span>
<span class="token function">npm</span> <span class="token function">install</span> @types/markdown-it@14.1.2 @types/linkify-it@5.0.0 @types/mdurl@2.0.0

<span class="token comment"># 変更をコミット</span>
<span class="token function">git</span> <span class="token function">add</span> package.json package-lock.json
<span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">"fix: add missing TypeScript type dependencies"</span>
<span class="token function">git</span> push
</code></pre></div><h2 id="%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F" data-line="81" class="code-line"><a class="header-anchor-link" href="#%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F" aria-hidden="true"></a> よくある質問</h2>
<h3 id="q%3A-%E3%81%AA%E3%81%9C%E3%81%93%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F" data-line="83" class="code-line"><a class="header-anchor-link" href="#q%3A-%E3%81%AA%E3%81%9C%E3%81%93%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> Q: なぜこのエラーが発生するのか？</h3>
<p data-line="85" class="code-line">A: 通常、以下のような状況で発生します：</p>
<ul data-line="87" class="code-line">
<li data-line="87" class="code-line">他の開発者がpackage.jsonのみを変更してコミット</li>
<li data-line="88" class="code-line">手動でpackage.jsonを編集してpackage-lock.jsonを更新し忘れ</li>
<li data-line="89" class="code-line">異なるnpmバージョンでの依存関係解決の違い</li>
</ul>
<h3 id="q%3A-npm-install%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%EF%BC%9F" data-line="91" class="code-line"><a class="header-anchor-link" href="#q%3A-npm-install%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Q: <code>npm install</code>との違いは？</h3>
<p data-line="93" class="code-line">A:</p>
<ul data-line="95" class="code-line">
<li data-line="95" class="code-line"><strong>npm install</strong>: package.jsonを基にpackage-lock.jsonを生成/更新</li>
<li data-line="96" class="code-line"><strong>npm ci</strong>: package-lock.jsonを厳密に再現（本番環境向け）</li>
</ul>
<h3 id="q%3A-%E4%BA%88%E9%98%B2%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F" data-line="98" class="code-line"><a class="header-anchor-link" href="#q%3A-%E4%BA%88%E9%98%B2%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> Q: 予防方法は？</h3>
<p data-line="100" class="code-line">A: 以下の点に注意：</p>
<ol data-line="102" class="code-line">
<li data-line="102" class="code-line">依存関係追加時は必ず<code>npm install</code>を使用</li>
<li data-line="103" class="code-line">package.jsonとpackage-lock.jsonは常にセットでコミット</li>
<li data-line="104" class="code-line"><code>npm ci</code>をローカルでもテストしてからデプロイ</li>
</ol>
<h2 id="ci%2Fcd%E3%81%A7%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95" data-line="106" class="code-line"><a class="header-anchor-link" href="#ci%2Fcd%E3%81%A7%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95" aria-hidden="true"></a> CI/CDでの対処法</h2>
<h3 id="cloudflare-pages" data-line="108" class="code-line"><a class="header-anchor-link" href="#cloudflare-pages" aria-hidden="true"></a> Cloudflare Pages</h3>
<p data-line="110" class="code-line">ビルドコマンドで<code>npm ci</code>の代わりに<code>npm install</code>を使用する選択肢もありますが、package-lock.jsonを修正する方が推奨されます：</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="112"><span class="token comment"># 推奨: package-lock.jsonを修正</span>
<span class="token function">npm</span> run build

<span class="token comment"># 代替案: npm installを使用（非推奨）</span>
<span class="token function">npm</span> <span class="token function">install</span> <span class="token operator">&amp;&amp;</span> <span class="token function">npm</span> run build
</code></pre></div><h3 id="github-actions" data-line="120" class="code-line"><a class="header-anchor-link" href="#github-actions" aria-hidden="true"></a> GitHub Actions</h3>
<div class="code-block-container"><pre class="language-yaml"><code class="language-yaml code-line" data-line="122"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Install dependencies
  <span class="token key atrule">run</span><span class="token punctuation">:</span> npm ci  <span class="token comment"># package-lock.jsonが正しければ高速</span>
</code></pre></div><h3 id="vercel" data-line="127" class="code-line"><a class="header-anchor-link" href="#vercel" aria-hidden="true"></a> Vercel</h3>
<p data-line="129" class="code-line">Vercelは自動的に依存関係の不整合を検出し、適切なコマンドを選択してくれる場合が多いです。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="131" class="code-line"><a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="133" class="code-line">「Missing from lock file」エラーの解決手順：</p>
<ol data-line="135" class="code-line">
<li data-line="135" class="code-line"><strong>エラーメッセージで不足パッケージを特定</strong></li>
<li data-line="136" class="code-line"><strong><code>npm install [パッケージ名]</code>で依存関係を追加</strong></li>
<li data-line="137" class="code-line"><strong>package-lock.jsonの更新を確認</strong></li>
<li data-line="138" class="code-line"><strong>ローカルで<code>npm ci</code>をテスト</strong></li>
<li data-line="139" class="code-line"><strong>変更をコミット＆プッシュ</strong></li>
</ol>
<p data-line="141" class="code-line">このエラーは依存関係の管理に関する重要なサインです。適切に対処することで、本番環境での予期しない動作を防げます。</p>
<p data-line="143" class="code-line">package.jsonとpackage-lock.jsonは常にセットで管理し、CI/CDでの一貫した動作を保証しましょう。</p>


npm ciで「Missing from lock file」エラーが出た時の対処法