Web制作フリーランスのなかじんです。
Web制作のコーディング中に、
「書いたコードが実装されていない！ブラウザに反映されていない！なんで？」
ってことあるあるだと思います。
例えば、画像のスライダーを実装したくて、Swiperのライブラリを使ったとします。
「必要なコードは書いたはずなのに、挙動がおかしい！動かない！」
となった時、あなたはどんな行動を取りますか？
今回の記事は特に「Web制作の学習中の方」に向け
詰まったときに取るべき行動が見える
誰かに質問する時にも役立つ・繋がる記事となっています！
学習中の実体験
上記のSwiperの件について
学習当初、jQueryが苦手だった私はまずjsファイルを見直してなぜだ…とよくコードとにらめっこをしたものです。
（苦手だからこそ、ここに問題があるに違いないと思い込んでいました…）
「jquery 動かない」「Swiper not working 」など検索していました。
しかし、往々にしてHTMLタグのスペルミスや、
記述は合っていたけれどキャッシュの関係で動いていなかった…なんて
初歩的なミスもありました。
他にも詰まりポイントとして「CSSが効かない」ことも多々ありました。
なんなら、CSS効かない問題の方がぶつかる回数は多かったです。
学習を続けたそんな中で、分からなくて詰まった時、
ググる前に最低限これは確認しようということで徐々にリストを作成してきました！
分からない… →いきなりググるだと
論点が違う・的はずれなところを調べて、
解決からどんどん離れて沼にハマる可能性があります。
ググらなくても確認できることや可能性を先に潰しておく。
これが「灯台下暗し」を避けられる仕組みのひとつになりそう。
今回は、静的コーディングが対象です↓
【対処法】詰まった時に見るリスト
- コンパイルされているか
- スペルミスはないか
- カッコ足りているか、コロンはあるか、
- タグの開始と終わりの数は合っているか
- セレクタ名、関数名が合っているか
- 全角スペースが混ざっていないか
- 親子関係は正しいか
- 他の記述が優先されていないか → 検証ツールで確認
- タグの性質を間違って認識していないか（ブロック要素とインライン要素）
- キャッシュがクリアされているか → スーパーリロード
- jsをデバック
- 公式サイトを読む（ライブラリの場合）
ーーー ↑ ここまでは最初に確認 ↑ ーーー
この時点で、上記のどれかに不備があれば
ピンポイントでそこを修正、調べにいくことができます。
そして、、、
- エラー文を読む
- ググる（時間をきめる）
- 質問する(最終手段)
最後の「質問する」の時点で、
自分は「どこまで・何を確認したのか」順を追っていれば既にまとまっていると思います。
そのため、回答者視点ではお相手がどこまで自走していてどの段階に居るのか、
アドバイスやヒントを考えやすくなります。
自分自身の迷走も避けられ、仮に質問したとしてもお相手にも煩わしさを与えない。
Win-Winにも繋がるんじゃないかなぁと。
最後に
かく言う自分も案件中に焦りで視野が狭まると、
ついつい初歩的な見落としをしがちなので、戒めていきます😌
ここにはリストアップしていませんが、
夜な夜な悩んだ実装やコードを意外と翌朝に確認すると、瞬時に不備に気づけるとかもあるあるなんじゃないかと（笑）
