macoblog

「ゲーム × プログラミング」で生きていく

毎週金曜夜22時〜LIVEやってます

【初心者向け】JSでJSONが読み込めない!?エラーの原因はこれ

JavaScript プログラミング

「Javascriptを使ってJSONを読み込もうとするとエラーが出る。」「エラーすら出ないんだけど」初めてJSONを触るとこんな事がよくあります。

本記事では、JSONファイルが読み込めない時の原因を初心者向けに解説しています。独学で詰まった時は是非読んみて下さい。

私もJSONを初めて触った時は上手く読み込むことができなくて苦労しました。

なぜ苦労したか?

それは読み込む際の処理(js)ばかりに気を取られて、肝心のJSONファイルには目を向けなかったからです。

そんな経験談をもとに解説していきたいと思います。

スポンサードサーチ


JSONが読み込めない時

JSONが読み込めない時

Javascriptでjsonが読み込めない時っていろいろありますが、

大きくわけるとこの2つ。

  • jsonの読み込み処理(js側)が間違っている
  • json側の構文間違い

それぞれ解説します。

jsのjson読み込み処理が間違っている

当たり前の事ですがjsonファイル単体では何もすることができません。

読み込んで使用することで初めて力を発揮します。

しかし、読み込み処理が間違っていれば当然ながら何も動きません。

$.ajax()$.getJSON()を使う方が多いと思いますが、パスの指定が間違っていたりしていると読み込まれません。

jQueryでJSONを読み込む方法は下記を参考

【超簡単】jQueryでJSONを読み込む方法【コピペOK】

しかし、この手の間違いってあまりないんですよね。

最初に確認すべきはJSONファイルってこと

js側を見直しても解決することは少ない気がします。

有難いことに、ネット上にはコピペですぐ使えるようなコードがたくさん落ちています。

それらを使っていれば構文エラーもほとんどないと思います、あってもパスの指定間違いくらい。

つまり、jsonファイルが読み込めない時は、処理よりjsonファイルを疑ったほうがいいってことです。

jsonの構文はシンプルですが、甘くみていると泥沼にハマりますよ。

JSONでよくある記述(書き方)間違い5つ

JSONでよくある記述(書き方)間違い5つ

jsonの構文間違いとしてよくある例を紹介したいと思います。

注:これから紹介する記述例は初心者向けにわかりやすいよう冗長なものになっています、ご容赦ください。

シングルクォーテーションを使用している

{
  "name": 'tanaka',
  'age': 20
}

上記は代表的な構文間違いの一つです、2つあります。

2行目では、valueである「tanaka」に「’」を使用しているので構文エラーです。

3行目も同様に、keyである「age」に「’」を使用しているので構文エラーです。

jsonでは「’」は使用できません、keyだろうとvalueであろうと例外はありません。

私も最初の頃は使えるものだと思っていました。笑

必ず「”」ダブルクォーテーションを使うようにしましょう。

適切でないカンマ(コンマ)「,」

[
  {
    "name": "tanaka"
    "age": 20
  }

  {
    "name": "satou",
    "age": 30
  }
]

これもよくある間違いですね、2つあります。

3行目では、複数のオブジェクトがあるにも関わらず「,」で区切られていません、「”tanaka”」の後ろに「,」を付けるのが正解です。

6行目も同様に、配列として複数の要素があるにも関わらず「,」で区切られていません、6行目に「,」を記述するのが正解です。

変なとろこに全角スペース

基本的に半角スペースであれば問題ありませんが、全角スペースはNG。

そんなミスしないと思うでしょ?お恥ずかしながら私はありました。( ´∀`汗)

それはコピペの不注意です

テキストをコピーする際に全角スペースが含まれていたことで、意図しないところに全角スペースがペーストされます。

コピペされてからではわかりづらいので最悪泥沼化待ったなしです。

こういう時は全角スペースを可視化できるエディタが大活躍しそうですね!

jsonの構文は完璧だという方はもう一度見直してみましょう、もしかすると意外なところから・・・。

入れ子の記述ミス


"human":[
  {
    "name": "tanaka",
    "age": 20
  }
]

「jsonに慣れてきたやでー」と少し調子に乗った時にありがちなのがこれ。

一見問題なさそうですが、実は「{}」が足りていません。

1行目に「{」、8行目に「}」を記述するのが正解です。

複数の配列を管理する際は気をつけておきましょう。

jsと同じ要領でコメントアウト

{
  "name": "tanaka", // 名前
  "age": 20 // 年齢
}

残念ながらjsonにはコメント構文がありません

ですので上記のようにjsと同じ要領でコメントアウトしていると構文エラーになります。

どうしてもコメントアウトしたいという時は何らかの工夫が必要になります。

スポンサードサーチ


JSONで重宝するオススメWEBアプリ

JSONで重宝するオススメWEBアプリ

JSONファイルを作成する上で便利なWEBアプリを紹介したいと思います。

基本的にこの2つがオススメ。

  • JSON構文チェックツール
  • JSON変換ツール

JSON構文チェックツール

JSONの構文間違い(シンタックスエラー)にハマったらこれ。

JSON Pretty Linter

そのままの意味です、JSONの構文間違いをチェックしてくれるものです。

JSONの記述をコピペするとシンタックスエラーがないかチェックしてくれます。

これで確認すればJSONファイルがおかしいなんてことはなくなりますね!

JSON変換ツール

CSVやSQLをJSONに変換してくれるツールです。

CSV to JSON – CSVJSON

私はCSVファイルをよく利用するので結構重宝しています。

適当なエディタでCSVファイルを開いて、コードをWEBアプリにコピペすることで変換できます。

CSVファイルをそのままインポートすることも可能です。

終わりに

終わりに

本記事の内容を簡単にまとめました。

jsonが読み込めない時はまずjsonファイルを疑う

  • 「’」シングルクォーテーションを使ってないか
  • 「,」カンマは適切であるか
  • コピペする際に全角スペースが紛れてないか
  • 配列にするとき適切な入れ子になっているか
  • jsの要領でコメントアウトしていないか

いかがでしょうか。

jsonは簡単に記述できて便利ですが、甘く見るとめんどくさいことになります。

慣れない間は構文チェックのWEBアプリなどを使って確認することをオススメします。

以上になります。

関連記事【超簡単】jQueryでJSONを読み込む方法【コピペOK】

関連記事jQueryでJSONを読み込み配列に入れ直す方法【簡単実装】