メインコンテンツへスキップ
レッスン一覧に戻る

atom.web-builder.common-install-failures-and-fixes

インストール失敗の典型パターンを潰す

インストール失敗の典型パターンを潰す このレッスンでは、あなたのパソコンに開発ツール(=Webサイトを作るための道具)を入れるときに、よく起こる失敗を3つのパターンに分けて整理します。失敗を「こういうときはこう直す...

apply-common-fixapply-common-fixよくある不具合に対する定番の対処法を当てられます。diagnose-install-errordiagnose-install-errorインストール時のつまずきを切り分けて原因を特定できます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: code_snippet検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

test_result

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

インストール失敗の典型パターンを潰す

このレッスンでは、あなたのパソコンに開発ツール(=Webサイトを作るための道具)を入れるときに、よく起こる失敗を3つのパターンに分けて整理します。失敗を「こういうときはこう直す」というレシピに変えておけば、次に同じエラーが出ても落ち着いて対処できます。

たとえるなら、料理で塩と砂糖を間違えたときに「なぜ味がおかしいのか」を分かっていれば作り直せる、という感覚です。エラーメッセージは、あなたのパソコンからの「ここがうまくいかなかったよ」という手紙です。読めば解決できます。

インストール失敗を3分類に振り分ける判断フロー

このレッスンで作るもの

  • エラーメッセージを貼ると、どのパターンに当てはまるか判断できるメモ(あなた専用のチートシート)
  • AIツールに貼り付けるだけで解決策が返ってくる「質問テンプレート」1つ

前提

  • Node.js(=JavaScriptというプログラミング言語をパソコン上で動かす土台)と pnpm(=部品をまとめてインストールする道具)が、前のレッスンで入っている状態
  • お使いのAIツール(Claude Code / Codex CLI / Cursor / ChatGPT のいずれか1つ)が起動できる状態

ステップ1: エラーを3つのパターンに分ける

インストールの失敗は、ほぼ次の3つに収まります。

  1. 権限エラー: EACCESpermission denied などの文字が出る。→ パソコンが「その場所に書き込む許可がないよ」と言っています。
  2. バージョン不一致: engineunsupportedNode version などの文字が出る。→ 道具の古さ・新しさが合っていません。
  3. ネットワーク・取得失敗: ETIMEDOUTENOTFOUND404 などの文字が出る。→ 部品を取りに行けていません。

良い例: エラーの1行目と最後の行をコピーしてから対処を考える。 悪い例: 真ん中の長い技術用語だけを読んで、何もわからず諦める。

ステップ2: AIツールに聞く質問テンプレートを用意する

エラーが出たら、次の文章を Claude Code / Cursor / ChatGPT などにそのまま貼ります。<ここ> を置き換えるだけです。

あなたはプログラミング初心者向けの親切なサポーターです。
次のエラーが出ました。原因と、私(非エンジニア)が実行すべき修正手順を、
コピペできる1行コマンドと日本語の説明つきで教えてください。

OS: <macOS / Windows / Linux のいずれか>
実行したコマンド: <例: pnpm install>
エラーメッセージ全文:
<ここにエラーを貼る>

良い例: エラー全文をそのまま貼る。 悪い例: 「インストールできません」とだけ送る(AIは状況が分かりません)。

AIチャットにエラーを貼り付けて回答をもらう様子

ステップ3: よくある修正を1行で試す

AIが返してきた手順のうち、次の3つは特によく使います。自分で覚える必要はありません。「こういう呪文がある」程度で大丈夫です。

  • Node.js のバージョンを確認する: node -v(=今入っているNode.jsの番号を表示します)
  • キャッシュ(=一時保存された古い部品)を消す: pnpm store prune(=古い部品を捨てます)
  • もう一度入れ直す: pnpm install(=設計図通りに部品をもう一度集めます)

実行する前に、必ず「これを実行すると何が起きますか?」とAIに確認してから貼り付けるようにしてください。

ステップ4: 直ったかを確認する

次の3点がそろえば成功です。

  • pnpm install が赤いエラーを出さずに終わる
  • node -v を実行するとバージョン番号(例: v20.11.0)が表示される
  • あなた専用のチートシート(メモ帳でOK)に「今日出たエラー1行目 → 原因 → 直した1行コマンド」が1件以上書かれている

つまずき対策

  • エラー全文をコピーしていない: 1行目と最後の行だけでなく、エラーブロック全体を選択してコピーしてください。
  • AIの回答をそのまま全部実行してしまう: sudo rm -rf のような強い命令は、必ず意味を聞いてから実行します。分からなければ実行しないのが正解です。
  • Windowsとmacでコマンドが違う: 質問テンプレートのOS欄を必ず埋めてください。AIが違うOSの手順を返してしまうと、余計に混乱します。

成果物の提出

今日作った「チートシート1枚」と、使った質問テンプレート1本を手元に保存してください。次回、別のインストールエラーが出たとき、同じ流れで直せるはずです。

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: code_snippet

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

test_result

メディア

diagramscreen_capture
学習完了