macoblog

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

アプリ検索ツール(β版)を公開

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

JavaScript プログラミング

WEBトマトWEBトマト

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

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

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

目次【本記事の内容】 [ click ]

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

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

  • 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アプリ

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を読み込み配列に入れ直す方法【簡単実装】