うまくスタイルやスクリプトが反映されない時

こんにちは、マサヒロです。

やっとお盆も終わり秋らしさがやってくる頃です。

僕はお盆に休みらしい休みは取れませんでしたが、SNSで世間がワイワイしているのを見て、気分を盛り上げていました。やっぱりお盆の雰囲気は良いですね

さて、今回は「コーディング中にスタイルやスクリプトが反映されないとき試したい事項3選」を紹介します。

コーディングをしていて、うまく反映されなくてずっと画面と睨めっこしてしまうことってありませんか？

かくいう僕もめちゃくちゃあります。うまく反映されなかったら自信が無くなることも・・・。

「思いつくことは全部やったぞ！どこがおかしいねん！」というときですね。

そんなとき、本当に簡単なところが意外と見落としているときがあります。

単語の綴りが間違っている

コーディングは1文字でも間違えれば、それは違う言葉とみなされます。

例えば’padding-left: 10px’ と書きたいところ’pading-left: 10px’と’d’を1文字でも抜いて書いてしまうと、それはもうWebからすると、’padding’では無いのです。

Webは人間と違って「あ、paddingって書きたいんだろうなぁ」とは考えてくれません。

なので、しっかりと綴りは覚えて、正確に書くことが重要です。

ただ、これは！コーディングに慣れていて頭では分かっていても間違えることがあります。タイピングミスとかです。なので、まずは正確に単語が打てているかを確認しましょう。

また大文字小文字ミスがあります。

例えば、JqueryとかSassで、関数や変数の命名をする際に大文字を使うときが頻度が多くあるのですが、これがまぁ間違えるんですよね。

変数の命名をする際には、理解しやすくする為に単語単語で最初大文字にするということがあるのですが、例えば

$colorBlueGra:linear-gradient(315deg, lighten($colorBlue, 50%) 0%,  $colorBlue 80%);

上記のような変数です。

‘$colorBlueGra:’ のところのように単語の接頭を大文字にしています。あまり’$colorbluegra:’ とは書かないですかね。分かりにくいので。

で間違えるのは、このような変数を作った後に、変数を使う時（呼び出す時）です。B を b にしたり。G を g にしたり。 ここをよく’$colorbluegra:’とかしちゃうんです。

これも先にあげた通りWebは「この人は’colorBlueGra’と書きたいんだろうな！」と全く考えてくれません。意外とWebというものはドライなのです。

なので、この大文字小文字ミスも要注意ですね。

実は全角入っちゃってる

これもよくあります。

英語の全角ミスは分かりやすくてまだ可愛い方ですが、空白の全角もあります。

よくあるのが、ネットの参考ページに載ってたりする、いわゆる「コピペOK！コード」に全角の空白や文字が含まれていたりするんですよね。

で、そのままエディタにペーストしても反映されないんですよ。全角の空白や文字が含まれていたりするからなんですよね。

これの何がタチが悪いって、コピペだから、エラー吐かれたときに、どこが原因なのかわからないんですね。頭空っぽの思考停止状態でコピペしてるので。

そんな時にエラーを吐かれたりすると「え、どこかのコードがバッティングしてるんじゃ・・・」という風に考え込んじゃうんですよね。。。

で、コピペのコードに空白の全角なんて入っているなんて、そんな微塵も思ってないわけじゃないですか。めちゃくちゃ時間をかけてコードの原因を探ってしまって時間を費やしてしまいます。

でも経験上、そういう時、エラーが吐かれたら、大抵コピペ部分に全角が混じってます。

なので、真っ先にそういう時は「全角文字・スペース」を疑ってください。勿論、全角の文字の可能性もありますので併せて要注意です。

/* paddingの綴りが間違っている*/
.example {
  pading-left: 10px;　
}

エラーと距離を置いてみる

最終手段は、上手く行かないコードたちと一旦距離を置いてみる、ということです。

実はこれすごく有効打です。

理由はというと同じコードを見すぎると、本当に「視野が狭くなっている」んですよね。

例えば、「ここがエラー吐いているんだ！ここのどこかにエラー部分があるんだ！」と思っていたら、その前のコードが原因でエラーを吐いていたり。

で、視野が狭くなっていると、もういつまで経っても解決できないんですよね。外野が悪さをしているのに、そこに気がつかないので。

その視野の狭さを元に戻す方法は「一旦そのエラーから距離を置いて、昼寝や散歩、もしくは翌日に回す」ことです。

すると意外と翌日、エラーが解決できたりします。1時間や2時間も煮詰まってたら、潔く「距離を置いて」みましょう。

まとめ

エディタによっては、「何行目の何列目でエラーが出てるよ！原因はこれだよ！」と教えてくれますが、全てそう簡単に解決はできないもの。エディタが教えてくれた通りに修正しても、思い通りのデザインやスタイルが当たらないことも多々あると思います。

そして、思いつくエラーの原因を探り尽くしても解決できない時、その時には既に遅し。思っている以上に視野が狭くなっていると思います。そう思ったら、とりあえず距離を置いて散歩してみてください。