BOOK Studio947
狩野祐東・狩野さやか著書

Ajaxを使用した演習以降上手くいきません。

書籍Q&ACategory: 確かな力が身につくJavaScript「超」入門Ajaxを使用した演習以降上手くいきません。
asked 7年 ago

こんにちわ、先週書籍を購入したものです。
jsは苦手意識があったので、なかなか手につかなかったのですが
本書を読むと、内容が丁寧に説明されており、尚且つ分り易いので少しづつですが理解が出来つつあり、まだ自分で考えてコードを組む事はまだまだ難しいのですが、苦手意識は無くなりつつあります。

ですが、6-03_Ajaxを使用してからの演習から上手くいきません。
コンソールを表示(Chromeを使用)を拝見すると
https://gyazo.com/91e00d5f639d4f2edcc02c76eb9019c2
この様なエラー表示が出てしまい、jsonもうまく機能してくれません。(6-03_Ajaxの演習以降すべて)
https://gyazo.com/0684e6e1639673089ace194cbf53d31d
(JavaScript勉強会以外は”crowded”:”no”にしてあります)
私の認識ですと、Ajaxがうまく読み込めてないとの認識ですが、どのような原因と対処法、又は調査法があるのか教えていただけないでしょうか?
また認識違いであればご指摘お願いいたします。

下記index.コード
https://gyazo.com/26e4806f49dba4a836ad2229356a4fcd
jsonのコード自体は、データを整形の正誤サイトを使い確認したところ問題はありませんでした。

11 Answers
狩野 祐東 Staff answered 7年 ago

コンソールのスクリーンショットを見てみました。URLが「file:///…」になっていることから、ファイルがローカルにあるようです。ローカルファイルから、オンライン(ネット上)のファイルをAjaxで読み込むことはできないので、作業中のファイルをご自分のWebサーバーなどにアップロードして試してみてください。

→関連項目:『確かな力が身につくJavaScript「超」入門』p.259

answered 7年 ago

ご教授いただきありがとうございました。
サーバ上で実行することでエラーはなくなりました。

もう1点別の問題が発生しましたので、こちらについても教えて頂けると助かります。

以下のとおりクリックしても全て「お席があります」という表示になってしまいます。
https://gyazo.com/d8ff6cd74dc34098492a9112e6d983f6

Jsonでは「js」のみyesを記述していますが、上記のように全て同じ結果になってしまいます。
https://gyazo.com/85db9a6ed1f5373b2ee1e30d8ea715a9

index.htmlに記載しているIF文の記述は以下になっていますが、
なぜ「お席あります」になってしまうのでしょうか。
https://gyazo.com/aa2b58aba997935ef646954e447d0b8a

このようになってしまう原因と自分で原因を解決できるような、
よいデバック方法があれば教えて頂けないでしょうか。
※以下の方法で取得できるかと思いましたがうまく変数を取得することが出来ませんでした。

console.log(/*出力したい変数やメッセージ*/);

宜しくお願い致します。

狩野 祐東 Staff answered 7年 ago

基本的には、結果を見て「どうしたらこのようになるか(なぜ思ったとおりに動かないのか)」を考えて、原因を突き止めます。

今回の場合、原因はいくつか考えられますが、結局のところ、ボタンの要素に「crowded」クラスが追加されていないのではないか、ということが推測できます。

この段階で開発ツールでHTMLの状態を確認して、本当にそうかどうか確かめます。もしくは(今回は違うでしょうが)、CSSが正しく書かれているかを確認します。

もし、「crowded」クラスが追加されていない場合、「crowded」クラスを追加しているあたりのソースコードを中心にチェックします。とくに、data.jsonが正しく読み込めているかどうか、data.jsonは本当に正しく書けているのか、などをチェックします。

ちなみに、console.log()を書いて変数が取得できなかったと書かれていますが、おそらく、何らかの理由でデータファイルが取得できていないのかもしれません。

answered 7年 ago

色々と丁寧にご教授いただきありがとうございました。
アドバイスをいただき、色々と調べ、見直したりした結果。
jsonも読み込むことができ、6-03_Ajaxの演習を無事終えることが出来ました。
原因としては、チェックをしてる間に必要な文字を消してしまったり、
単純にスペル間違いなどもありました。

HTMLやjs、PHPなどの参考書は多いですが、デバックについての参考になる書籍は見かけたことがないので、jsを勉強する上で初心者にとってなかなか難しい部分もあります。
プログラマーの方は、当たり前のようにやっている方が多いですが、私位のレベルですとサイトなどを検索しても、デバックについて分り易いモノが見当らない事が多いので、デバックについて詳しい事が載っている本やヒントになる本があれば、嬉しいなと最近つくづく思っております。
デバックについての本を出版していただければ助かりますので、是非とも機会があればよろしくお願い致します。

他の書籍についても、参考にさせていただきたいと思います。

狩野 祐東 Staff answered 7年 ago

デバッグの方法ですか。なるほど… かたちにするのに苦労しそうですが考えてみます。

answered 6年 ago

7-1のRSSの演習が、step1,step2,step3,extraのどの付属プログラムとも動作しないです。
http://code.jquery.com/jquery-1.11.3.min.jsのhttp:が抜けていないでしょうか。
PHPのファイルの最後に?>が抜けていないでしょうか。
それらを直しても「データの読み込みに失敗しました」になります。

狩野 祐東 Staff answered 6年 ago

実習7-1で読み込むRSSデータのURLが、書籍出版後変更されました。そのため、ダウンロードしたサンプルデータが古いと、そのままでは動作しない可能性があります。詳しくは以下の正誤表をご参照ください。URLを書き直せば動作するはずです。

確かな力が身につくJavaScript「超」入門 正誤表

なお、JavaScriptを読み込むときの「http:」が抜けているのは間違いではありません。また、phpの最後の?>がないのも間違いではありません。

answered 6年 ago

サンプルデータを新しくダウンロードしましたが
step1からstep3は「データの読み込みに失敗しました」になり、
extraは、画面真っ白のままになります。

狩野 祐東 Staff answered 6年 ago

ところで、サンプルデータまたはお作りになったデータをWebサーバーにアップロードしてから確認していますか? このサンプルは外部サイトと通信をおこなうため、パソコンに保存されたHTMLファイルをダブルクリックして開いても、正常に動作しません(p.268)。

answered 6年 ago

Webサーバーにアップロードしてから確認しています

狩野 祐東 Staff answered 6年 ago

ブラウザの開発ツール>コンソールを開いてみてください。エラーが表示されているようであれば、そのエラー内容をもとにお作りになったソースを修正します。エラーが出ない場合は、おそらくプログラムのどこかを書き間違えているので、もう一度確認してみてください。