コーディング沼り解消3ステップ
本業でWordPressのカスタマイズをPHPで書いていたとき、朝からずっと同じ箇所で詰まっていたことがあります。解決したのは17時でした。1日のほとんどを1つのエラーに使ったことになります。
とことん沼った割に、原因は単純なことだったりします。あのときもそうでした。
沼る時間をどれだけ減らせるかで、1日に進む量は全然変わってきます。去年の8月は副業で37案件を対応しましたが、あれができたのも沼らなかったからだと思っています。僕が詰まったときにやっていることを、コード例とあわせてそのまま書きます。
そもそも「沼る」とは何か
コーディング中の「沼る」は、同じ場所で同じ試行を繰り返して、時間だけが過ぎていく状態のことです。時間の感覚が飛ぶ。同じ検索ワードで同じ結果を眺め続ける。焦って視野が狭くなる。このあたりが揃ってきたら、たぶん沼っています。
やっかいなのは、沼っている本人が「もう少しで解ける気がする」と思い続けてしまうところです。実際には解決に近づいていないのに、30分、1時間と粘ってしまう。納期が押せば、クライアントからすると「まだできていないのかな」という状態が続くことにもなります。
ステップ1｜手を止めて「何がわからないか」を言葉にする
最初にやるのは、キーボードから手を離して、今詰まっている内容を文章にすることです。沼っているときの頭の中は「なんか崩れてる」「なんかエラー出る」くらいの解像度です。そのままでは検索ワードも質問文も組み立てられません。一度言葉にすると、問題の輪郭が出てきます。
3行メモの書き方
僕がよく使うのは「3行メモ」です。テキストファイルでもコメントアウトでも付箋でも構いません。
■ やりたいこと
ヘッダーのロゴを中央寄せにして、右側にナビを横並びで置きたい
■ 今起きていること
ロゴが中央に寄らず、ナビも縦並びになってしまう
■ 試したこと
・親要素に display: flex を指定した
・justify-content: center を指定した
・ナビの ul に display: flex を追加したが変化なし
これを書くだけで、検索に使える具体的なワードが自然と出てきます。「ヘッダー ロゴ 中央寄せ flex」のように、漠然とした「なんか崩れてる」よりずっとヒットしやすくなります。
詰まりポイントをコメントで整理する
コード側にも手を入れると、さらに見通しが良くなります。詰まっている箇所の上下にコメントを入れて、自分の予想と現実のズレを書き出します。
/* 期待：.header の中で .logo が中央、.nav が右に来る */
/* 現実：.logo が左に寄ったまま、.nav が下に落ちる */
.header {
display: flex;
justify-content: center; /* ← これで中央になるはず？ */
}
.nav {
/* display: flex を入れると横並びになるはずだが効かない */
}
コメントの書き方に決まった型はないので、深く考えなくても、思ったことをそのまま書き込んで大丈夫です。
コメントを書いていると、「そもそも .nav の親は .header だっけ？」みたいな基本的な見落としに気づけます。
以前、スムーススクロールでヘッダーの高さ分を引くコードが効かず、まあまあ沼ったことがありました。ああいうときも、頭の中だけで考えているうちは同じところを回り続けます。
ステップ2｜一度ブラウザを閉じて別のことをする
言語化しても糸口が見えないときの次の手は「離れる」です。同じ問題を考え続けると、見える範囲がどんどん狭くなります。一度離れて別の作業をすると、戻ってきた瞬間に「あ、あそこじゃん」と気づけることがあります。
以前、縦書きにしたときの表示崩れを調べても解決できず、その日は一度寝かせました。翌日にはあっさり解決できましたね！
5分〜15分のおすすめリセット方法
目安は5分から15分くらいです。長すぎると今度は戻れなくなるので、僕はタイマーを決めてから始めています。実際にやっているのはこのあたりです。
- 席を立って水を飲みに行く、軽くストレッチをする
- 窓の外の遠くを30秒くらいぼーっと眺める（目も休まります）
- 洗い物や軽い家事を1つだけ片付ける
- 別のタスクの簡単な部分を10分だけ進める
ポイントは、「考えるのをやめる」のではなく「別の軽作業に切り替える」ところです。詰まったコードを一度バックグラウンドに追いやると、別の角度から見られる状態になります。
やってはいけない「離れ方」
逆に、向いていないリセットもあります。代表的なのはSNSを開くこと。タイムラインを眺めると脳の別の部分が忙しく動いてしまって、リフレッシュになりません。
動画サイトも同じで、5分だけのつもりが30分以上になりがちです。戻ってきたときに「あれ、さっき何に詰まってたんだっけ？」となって、ステップ1の言語化からやり直すことになります。受け身で情報を浴びる行動は、沼り解消のリセットには向いていません。
ステップ3｜調べ方と聞き方を変える
ここまでやって解けないなら、自分の前提そのものがズレている可能性が高いです。情報を集める入り口から変えていきます。
検索キーワードの組み替え方
沼っているときの検索ワードは、似た単語を少しずつ変えているだけになりがちです。思い切って切り口を変えると、違う情報源にたどり着けます。
【Before】同じ系統の言葉で粘る
・「flex 中央寄せ 効かない」
・「flex 中央寄せ できない」
・「css 中央寄せ うまくいかない」
【After】切り口を変える
・「flex container 子要素 並ばない 理由」（理屈を調べる方向）
・「display flex 親要素 指定 忘れ」（よくあるミスを調べる方向）
・"justify-content center not working"（英語で検索）
・エラーメッセージをそのままコピーして貼る
特に英語での検索は当たりが多いです！Stack Overflowなどの海外Q&Aサイトが上位に出てきて、同じ悩みに対する回答がまとまっています。翻訳ツールに通せば内容は十分読めます。
これはAIに聞くときも同じです。「1時間くらいずっとChatGPTに聞いてるんですけど解決しません」というご相談をいただくことがあります。
同じ聞き方で粘っている限り、返ってくる答えも似たものになります。3行メモの内容をそのまま渡すと、こちらの状況が伝わって答えの精度も変わってきます。
人に聞くときに添えるべき情報
調べても解決しないときは、先輩やコミュニティに聞く段階です。僕も「このエラーわからないんですが、アオイさんわかりませんか？」とご連絡をいただくことがあります。そのときいちばん助かるのが、ステップ1の3行メモがそのまま貼ってあることです。
【質問テンプレート】
お疲れさまです、ご相談させてください。
◆ やりたいこと
ヘッダーのロゴを中央、ナビを右端に横並びで配置したい
◆ 今起きていること
ロゴが左寄せのまま、ナビが縦並びになる
◆ 試したこと
・.header に display: flex と justify-content: center を指定
・.nav ul にも display: flex を追加
・参考URL：example.com/flex-centering-article
◆ 再現コード（最小セット）
（ここにCodePenなどの再現URLを貼る）
わかる範囲でアドバイスいただけると助かります。
質問する側が情報を整理しておくと、答える側は推測する手間がなくなって、具体的な回答にすぐ入れます。
逆に「なんか崩れるんですが…」だけだと、相手も何から確認していいかわからず、やりとりが増えて時間がかかります。僕が答える側のときも、3行メモが貼ってあると回答までがかなり早いです。
沼ったときに使える「自分用チェックリスト」
ここまでの3ステップを、詰まった瞬間にパッと見返せるようリスト化しておくと便利です。僕はエディタのスニペットに入れたり、Notionやメモアプリに貼ったりしています。
- タイマーで15分経ったら、一度必ず手を止める
- 「やりたいこと／今起きていること／試したこと」を3行で書く
- 検索ワードを、3行メモから作り直す
- 5分〜15分、別の軽作業でリセットする（SNS・動画は禁止）
- 検索の切り口を変える（理屈／よくあるミス／英語／エラー文コピペ）
- それでも解けなければ、3行メモ＋再現コードを添えて人に聞く
手元に置いておくと、沼りかけた瞬間に「今どこまでやった？」と自分に問い直せます。解き方を覚えるより、沼っていると気づけるほうが先だと思っています。
おわりに
詰まりを言葉にして、いったん離れて、聞き方を変える。ここまで書いてきたのはこの動きです。
これをやれば毎回すぐ解決するわけではないと思いますが、沼る時間を減らす手がかりにはなると思います。
次に詰まったら、ぜひ3行メモから開いてみてください！