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

私もJSONを初めて触った時は上手く読み込めなくて苦労したのを覚えています、私の場合だと、jsonを読み込む処理(js)ばかりに気を取られて、肝心のJSONファイルには目を向けなかったのが落とし穴でした。

そんな経験をもとに、JSONファイルが読み込めない時の原因と解決策について解説しています。、初心者向けに分かりやすく説明していますので、プログラミング独学中の方は是非どうぞ。

JSONが読み込めない原因と解決策

プログラミングの中でjsonが読み込めない時って色々ありますが、原因として考えられるのは大きく２つあると思います。

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

それぞれ簡単に解説します。

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

当たり前の話ですがjsonファイル単体では何もすることができません、読み込んで使うことで初めて力を発揮します。しかし、その処理自体が間違っていれば返ってくるのはエラーです。

例えば、javascript（jquery）なら$.ajax()や$.getJSON()を使う方が多いと思いますが、パスの指定が間違っていたりしていると読み込まれません。でも、この手の間違いってあまりないんですよね。

jsonファイル側の構文間違い

先に結論を言ってしまうと、最初に確認すべきはJSONファイルであり、処理を見直しても解決することは少ない気がします。

有難いことに、ネット上にはコピペですぐ使えるようなコードがたくさん落ちています。それらを使っていれば構文エラーもほとんどないですし、あってもパスの指定間違いくらい。

jsonファイルを読み込めない時は真っ先にファイルの中を疑う、jsonファイル側の構文エラーを疑った方が無駄に時間をかけなくて済むと思います。そこで、JSONでよくある記述(書き方)間違いについて初心者向けにまとめてみました。

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

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

{
  "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アプリを紹介したいと思います、基本的にこの2つがオススメ。

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

①：JSON構文チェックツール

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

そのままの意味です、JSONの構文間違いをチェックしてくれるものです、JSONの記述をコピペするとシンタックスエラーがないかチェックしてくれるので凡ミスを早期発見できます、初心者の方は是非使っている事をオススメします。

②：JSON変換ツール

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

私はCSVファイルをよく利用するので結構重宝しています、適当なエディタでCSVファイルを開いて、コードをWEBアプリにコピペすることで変換できます、もちろんCSVファイルをそのままインポートすることも可能です。

終わりに

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

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

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

いかがでしょうか。jsonは簡単に記述できて便利ですが、甘く見るとめんどくさいことになります。慣れない間は構文チェックのWEBアプリなどを使ってしっかり確認することをオススメします。

今回は以上になります。

他の人が読んでいる記事