私がよく出会うエラーワースト5は

はじめに

Webサイトのページを作り始めて10年近くになります。その間に、様々なエラーに出会いました。何度も同じエラーに出会うこともあります。その時の解決策を忘れているためです。備忘録もありますが、あっちこっちに点在しているため、探すのも億劫でつい整理もしなくなります。それらのエラーをまとめてみたいと思い書留ました。
ここでは、主にデバッガーのコンソールに表示されるエラーメッセージやphp、MYSQLから返されるエラーメッセージについて記述しています。
開発環境は以下になります。
開発ツール:NetBeans 8.2 IDE,phpMyAdmin,Chromeデバッガー
使用言語:HTML,Javascipt,Jquery,php,MYSQL
OS:Windows10 HomeEdition

ワースト5

(1) イベントが効かない

イベントの扱いは本当に大変です。しかし、Webページを作成しているとこの処理は欠かせません。ボタンが多いと、イベント処理も多くなります。ポップ画面が多い場合も同じです。イベントを登録したのに、動作しない。これは、ポップアップ画面を表示したときの現象です。ポップアップにはいくつかのボタンなどの要素があります。それらのボタンをクリックしても何も反応しません。いきなり、この現象が現れると困惑します。何がどうなっているのかと。そこで、一呼吸落ち着いて考えてみます。
イベントが動作しないということは、イベント登録がうまく登録されていないのでは。登録しているタイミング、場所が間違っているのではと考えました。その通り、そのタイミングでは、まだ、対象とする要素が表示されてないため、正しく登録されていませんでした。デバッガで、表示を確認しながら、表示を確認後のタイミングで登録すると動作しました。

(2) SQL(MYSQL)のエラー

SQLには、いつも泣かされます。ちょっとした、構文ミスでも動作しません。カッコがなかったり、引用符が違っていると動作しません。それもphp側かSQL側でチェックしているのかはよくわかりませんが、エラー原因を特定するときは、phpMyAdminツールのSQL実行ツールを使っていますこれで、確認するとエラー原因がわかります。

・INSERTエラー

これで、ミスを犯すことがあります。何度、チェックしても見つかりませんでしたが、ある時、ふと気が付き、なんで、WHERE句があるんだろうと。それで、WHERE句を外して実行すると動きました。INSERTにWHERE句はありえないのですが、その時は全く気が付きませんでした。これもコピーペーストの弊害です。SELECT文やUPDATE文をコピーペーストしたときに入っていました。コピーのソース元を間違いました。

・$result変数のタブりでエラー

これは、foreachループでSQLの入れ子を使用していた時に発生しました。最初のSQLで結果をしまうのに\$result変数を使用していて、その中で、さらにSQLを実行したときに、再び、\$result変数に結果を保存し、前の\$result変数を壊していました。foreachの中で、前の\$result変数の結果を使用しています。これも、中々、原因が突き止められませんでした。一見しただけでは、個々の構文にエラーはありませんが、foreach全体としてみると、エラーがありました。

(3) phpのエラー

phpのデバッグは苦労します。サーバー側で実行していますので、開発マシンのパソコンでは簡単にブレークポイントを使えません。リモートデバッグ機能がうまく動作してくれません。そのため、プラグインのログツール(Chrome Logger バージョン4.1.3)を使っています。ブレークはしませんが、何とか使っています。

(4) jQueryのエラー

jQueryでよく起こすミスもいくつかあります。

・$が効いていない。

Chromeデバッガーを使用していますが、コンソールで、$.と入力しても何も出てきません。うまく動作している場合は、使用できるメソッドやプロパティなどが表示されます。

・$.each()でのcontinue,breakミス

この場合、continue,breakは効かないということは、知っていますが、その代わりに、return false、return trueを使う場合、どちらが、どっちなのかよく迷います。breakには、return trueと覚えるには、ループ処理を終えたので、true(正常)でリターンすると覚えます。continueは、まだ、処理があるので、false(失敗)でリターンすると覚えます。

・セレクターのデータが取得できない

$("セレクター");でオブジェクトデータを取得することはよくあります。しかし、これでも取得できないケースがあります。原因はよくわかりませんが、javscriptでは取得できます。たとえば、document.getElementsByClassName(クラス名);とすると取得できます。Jqueryで取得できないときは、いつもこの方法で取得しています。

(5) コーデングミス

使用している開発ツールは、Netbeans IDE 8.2です。そのエティターで、コーディングしているときにミスを犯します。

・文法ミス

覚えなければならないことが多すぎます。たとえば、正規表現は使い慣れれぱ便利ですが、やはり、難しいです。覚えてもすぐ忘れます。

・コピーペースト

よく使います。参考になるソース元を探し、コピーペーストします。
大抵、過去に作成したソースを使いまわしします。その時に、よく吟味しないまま、実行してしまいます。

・Netbeans IDE 8.2の怖いところ

Netbeans IDE 8.2のエディターは、ちょっと恐ろしいです。なにげなく、キーボードに触れていると、知らずに、キーデータが取りこまれていて、うっかり保存してしまうと、それがあとでエラーの原因になってしまいます。これは、場所を特定するのが大変です。

番外

・(1)取れないエラー

youtubeAPIを使用するサイトを作っています。その時に、発生しているエラーでデバッガーのコンソールにはエラーメッセージが表示されていますが、使用上は特に問題はありません。このエラーについては、ネットで前から話題になっていますが、どうやら、Google側で対処しなければ取れないエラーのようです。気持ち悪いですが、そのままにしてあります。
エラーメッセージ内容
www-widgetapi.js:1232 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('https://iframe.tecoyan.net').
q.sendMessage @ www-widgetapi.js:1232

・(2)データフォーマットで混乱

とにかく、種類や、記述の仕方が多く、いちいち、覚えきれません。使用時には、毎回、改めてデータフォーマット仕様を見返しています。特に、オブジェクト、配列、JSON、・・・など。新たな記述形式は使うと便利ですが、大変です。
オブジェクト、配列は「似て非なるもの」ですね。そこへJSONが出てきて、益々、混乱します。オブジェクト、クラスも同様に混乱します。その場では、理解できますが、しばらくすると忘れています。プログラミングは、この理解、記憶、忘れの連続で作業しています。作業効率は悪いですが。私の備忘録ノートは、ただ、書き留めているだけで、あとで見返すことはありません。書いているだけで、記憶している気がしてるだけです。日々の書留でノートはたくさん溜まりますが、先日、一挙にごみの日に廃棄しました。

・(3)エラーメッセージは出ているが、致命的(Fatal)なエラーではないケース

デバッガーのコンソールには、さまざまなサイトで発生しているエラーが出ていることがあります。これらのエラーは、表示されていても、実用上は困ることはなく、動作しています。しかし、Fatalエラーの場合は、動作が停止してしまいますので、原因を突き止め、対処します。

あとがき

エラーは、出さないことに越したことはありませんが、逆にエラーから学ぶこともあります。中には、数日かけても、全くわからないエラーもあります。しかし、そのエラーも、一晩寝ながら考えているとヒントが浮かぶことがあります。次の日に早速そのアイディアで試して動作すると「やったー」と、うれしいものです。考えてみると、デバッグは楽しい作業です。問題をひとつづつクリアしてゆく過程は子供の頃のプラモデル作りに似ています。完成するとうれしいものです。これからも、いろいろなエラーに出会うと思いますが、落ち着いてひとつづつ、じっくりと原因をつかみ、対策して行きたいと思います。