JSの変数を宣言す
るところで、undefinedになると後続の処理でお...

guest　

JSの変数を宣言するところで、undefinedになると後続の処理でおかしくなるということで、今回初めてnullを設定されていますが、これまでfooterに書いてきた、例えば画像切り替えの$switchImgSubsなどの変数にも設定すべきだったのでしょうか？
よろしくお願いします。

2018/11/22

回答 2件

ウェブカツ!!コーチ　

講師からの回答

試してみましょう。
テスト用にコードを書いて試してみてください。

$switchImgSubsは要素の画像が存在するかどうかは、ユーザーが登録するかどうかによってしまいますね？
（サービスの仕様として必ず画像登録が必須なら別ですが）

その場合、undefinedが入ることになります。

undefinedのまま、それに対して.onでイベントハンドラを設定（要素を操作）しようとしていますね。
Chromeブラウザで開発ツールを開いて、その場合に何かjsのエラーは出るか？その後の処理は止まるか？
を確認しましょう。

IE11の場合はjsにエラーがあった場合は後続の処理は絶対に止まってしまいます。
（確認できるなら、無料のvirtualboxといった仮想環境ソフトを入れて、macの中にwindowsを入れて確認してみてください。）

また、要素が確実にある（動的に要素や取得するセレクタとして使うクラス名を付け外ししていない。ベタ書きされている）という場合には、要素は確実に取得できるため、エラーは絶対に起きないわけなので、undefinedかどうかのチェックは逆に無駄なコードとなります。

無駄なコードを書く＝無駄なバグを生む可能性を高めている
ということですね。

2018/10/13

guest　

返信いただきありがとうございます。

Windows環境まで用意できませんでしたが、macのchrome環境で一旦テストコードを書いてみて、存在しない要素を宣言してもエラーは発生せず、後続の処理も進むことを確認しました。それならばと今回の$likeとlikeProductIdのnull設定を外して、こちらもエラーが出ないことを確認しました。

そうすると、今回のundefinedのチェックの必要性がわからなくなってしまいました。ブラウザに依る挙動の違いを埋めるためということでしょうか？

2018/07/27

ウェブカツ!!コーチ　

講師からの回答

では、下記コードを実行してみてください

$('#notExistId').on('click', function(){
alert('ok');
});

var $dom = $('#notExistId');
$dom.html('b');
console.log($dom);

var dom = document.getElementById('notExistId');
dom.innerText = 'c';
console.log(dom);

やってみると分かりますが、
jQueryでDOMを取得した場合は、要素がなくてもjQueryのオブジェクトが必ず返ってきます。

しかし、jsで存在しない要素を直接取得して、何かその後に操作をしようとした場合はエラーとなります。
jQueryはjsで書かれたライブラリですが、jQueryのDOMを取得する

$(セレクタ)

というもの（中身はただの関数です）は、undefinedのチェックなどを全部中で行い、要素がなくてもjQueryのオブジェクトを返す仕様となっています。
言語仕様については、詳しくはjs中級でやっていきます。

jQueryを使わない現場が現在増えてきているため、このあたりの違いをわかっておくといいでしょう。

2018/10/13

guest　

細かく説明いただきありがとうございます。確かに素のjsでエラーが出ました。
jQueryでDOMを取ってくる中で試していただけでしたので、そこまで確認できておりませんでした。
railsの勉強中も思ったのですが、ライブラリやFWに頼りすぎると、見逃してしまうことも多いですね。

2018/07/27

JSの変数を宣言す
るところで、undefinedになると後続の処理でお...

部活の学習一覧

ご意見箱

JSの変数を宣言するところで、undefinedになると後続の処理でお...

部活の学習一覧

ご意見箱

JSの変数を宣言す
るところで、undefinedになると後続の処理でお...