[解決済]Dreamweaverで作ったJSONファイルがajaxでfail→コメント削除で解決

jQueryとJSONとajaxでデータを読み込もうと四苦八苦している、ハイブリッドアプリ初心者おさみです、こんばんは。

クライアントサイドとサーバサイド、どっちから手を動かそうか迷って、簡単そうなクライアントサイドから手をつけております。

ajaxを使用したサーバとのデータのやり取りにJSONを使う前提で、とりあえず仮のJSONファイルを作ってajaxメソッドで読み込もうとしたところ、まあfailする。なんでやねん!!といろいろ探っていると、原因はJSONファイルの冒頭にあったコメント行でした。

どうやらDreamweaverさんにしてやられたようなので、備忘録です。


スポンサーリンク

1.書いたコード

先日少しだけご紹介したjQuery Mobile スマートフォンアプリ開発という書籍では、サーバとのデータ通信についてあまり深く突っ込まれておりません。

そのため、前々から目をつけていた確かな力が身につくJavaScript「超」入門という書籍をKindleで追加購入してごにょごにょやっておりました。あ、KindleってKindleハードは持っていません。もっぱらiPadアプリです。

で、一番知りたかったajax & JSONを使ったデータ読み込みのところで、ほぼほぼサンプル通りに書いたところ、どうにもこうにも動かない。どう動かないかというと、ajax().failに落ちてしまうんですね。

書いたコードは以下の通り。

//ajaxでデータ取得
$.ajax({
     url: 'test.json',
     dataType: 'json',
     cashe: false
})
     //成功したら処理実行
     .done(function(res){
          //処理を記述
})
     //失敗したらエラーダイアログを出してreturnする
     .fail(function(){
          alert("データ取得に失敗しました");
          return;
});

この関数をトップページ読み込み時に実行してやろうというわけです。が、実行してみると、無情にも「データ取得に失敗しました」のアラートメッセージ…自分で書いたエラーダイアログなのにムカつく…。

2.failメソッドのエラーメッセージを確認

なんでやねん!!とイライラしてきた頃、failメソッドに引数を指定してやれば、エラーコードがわかると知り、実行してみました。

//ajaxでデータ取得
$.ajax({
     url: 'test.json',
     dataType: 'json',
     cashe: false
})
     //成功したら処理実行
     .done(function(res){
          //処理を記述
})
     //失敗したらエラーダイアログを出してreturnする
     .fail(function(jqXHR, textStatus, errorThrown){ //引数を追加
          alert("データ取得に失敗しました" );
          console.log(errorThrown); //追加
          return;
});

実行してみたところ、コンソールに以下のメッセージが。

SyntaxError: Unexpected token / in JSON at position 0

ん?JSONのシンタックスエラー?position 0?

というわけで、test.jsonを開いて冒頭を見てみました。すると下記コメント行を発見。

// JSON Document

これが原因?

行番号は1だけどなあ…と思いつつ、コメント行を削除。するとなんとまあ、動いたんですよ。


スポンサーリンク

3.JSONファイルにコメントアウトの概念はない

これって初歩的なことなんだろうな…と自己嫌悪に陥りながら、「JSONファイル コメント」で検索してみました。するとまあ、情報がたくさん出てきます。ありがとうございます。Google先生っていうけど、本当に先生なのはGoogleさんが拾ってくるサイトの筆者さんだ、という言葉を最近とてもかみしめております。

JSONにはコメント行が付けられない?ネットで見つけた方法の有用性を試してみた

上記サイトさんのように、JSONにはコメントアウトの概念がない。その前提のもと、なんとかコメントを入れられないだろうか、という試みもあるようですね。

4.DreamweaverでJSONファイルを作ったら勝手にコメントが入る

今回エラーの原因となったコメントですが、自分で入れたわけではありません。アプリ学習作業はDreamweaverかVS Codeのどちらかを気分で変えておりまして、今回はDreamweaverで作業をしておりました。

Dreamweaverのファイルウインドウから新規作成すると、勝手に入るんですよ。コメント。

これはJSONファイルだけでなく、JSファイルでもCSSファイルでも同じです。しかしまあ、JSONには入れたらあかんかったと。そういうわけです。

5.よろしい、ならば初期ファイルを変えてしまえ

エラー出すようなファイルを作るな!とか、HTMLの新規作成したときのデフォルトセットも微妙なんだよな…と思いながら、またまた検索をかけてみました。すると、下記ページを発見。

[dw] Dreamweaverの初期設定ドキュメントの内容を変更する

あるんですね、デフォルトファイルの置き場所!

というわけで、さっそくC:\Program Files\Adobe\Adobe Dreamweaver CC 2017\configuration\DocumentTypes\NewDocumentsにある、Default.JSONを編集。試しに新規作成してみたところ、編集内容が反映されておりました!

6.逆手に取って動作確認に使えるかもしれない

コメントの入ったJSONファイルをajaxで読み込もうとしたらfailする。ということは、fail時の処理を動作確認したいと思ったら、JSONファイルにコメントを入れてやればできるというわけですね。逆転の発想!

サーバとのやり取りを実装すれば、通信を切るなりサーバを落とすなりすればいいのかもしれませんが、私のようなひよっこが簡単にajaxをfailさせる手段としてはアリです。

7.まとめ

今回のトラブル(?)でわかったことをまとめておきます。

  • JSONファイルでコメントアウトはできない
    • JSONファイルにコメントを入れたら失敗時の動作確認ができる
  • DreamweaverでJSONファイルを作ったらコメントが入る
  • Dreamweaverの初期ファイルは編集できる

蓋を開けてみれば単純なことなのですが、これでけっこう頭を悩ませたりするんですよね。解決してよかったよかった。

[jQuery Mobile] jQuery Mobile 1.4.5での初期化処理

この投稿の投稿者は おさみ です。ブックマーク用 パーマリンク

スポンサーリンク