分からないことを質問してください。分からないことを質問してください。
分からないことを質問してください。
分からないことを質問してください。
分からないことを質問してください。
分からないことを質問してください。
分からないことを質問してください。

行動規範の内容に同意します

回答3件

ベストアンサー

複数アカウントがバレにくいように質問を削除していくな。

JIRA - div配置を指定をしたい｜teratail
JavaScript - JSONデータをシンプルにHTMLに直したい。｜teratail

おかしい箇所はありません。

オブジェクトへの変換の仕方ですが、ソースファイルに直接書けるなら、このようにそのままオブジェクトとして扱えます。

JavaScript
1const jsonData = {
2  "title": "タイトル",
3  "text": {
4    "menu": "タイトル",
5    "menu1": "タイトル",
6    "menu2": {}
7  },
8  "text1": {
9    "menu3": "タイトル",
10    "menu4": "タイトル",
11    "menu5": {}
12  },
13  "text2": {
14    "menu6": "タイトル",
15    "menu7": {
16      "menu8": {
17        "menu9": "タイトル",
18        "menu10": 120
19      }
20    }
21  }
22};

文字列をオブジェクトに直すには JSON.parse() を使います。
JSON.parse() - JavaScript | MDN

以下は文字列の jsonString をオブジェクトの jsonData に変換しています。上のコードと違うのは、JSON の表記が ` で囲まれていることですが、これによって一度文字列として jsonString 変数に代入しています。

JavaScript
1const jsonString = `{
2  "title": "タイトル",
3  "text": {
4    "menu": "タイトル",
5    "menu1": "タイトル",
6    "menu2": {}
7  },
8  "text1": {
9    "menu3": "タイトル",
10    "menu4": "タイトル",
11    "menu5": {}
12  },
13  "text2": {
14    "menu6": "タイトル",
15    "menu7": {
16      "menu8": {
17        "menu9": "タイトル",
18        "menu10": 120
19      }
20    }
21  }
22}`;
23
24const jsonData = JSON.parse(jsonString);

詳細な文法については次のサイトがわかりやすいと思います。

JSON入門 - とほほのWWW入門

公式情報はこちらです。

ECMAScript® 2021 Language Specification

投稿2020/09/10 12:41

編集2020/09/13 08:35

Zuishin

総合スコア28660

think49

2020/09/10 13:16

@Zuishin さん > JSON入門 - とほほのWWW入門「とほほのWWW入門」は仕様書と比較すれば、誤りが散見されます。 JavaScriptだけでなく、HTML/CSSでも何度も間違いを発見しています。特に初心者にはお勧めし難いサイトだと思います。 --- 紹介されている「とほほ」のページでは > RFC 8259, IETF STD 90, ECMA-404 2nd edition で規定されています。とありますが、もう一つの紹介サイト「ECMAScript® 2021」には https://tc39.es/ecma262/#sec-json.parse > 2. Parse ! StringToCodePoints(jsonString) as a JSON text as specified in ECMA-404. Throw a SyntaxError exception if it is not a valid JSON text as defined in that specification. とあります。 ECMA-404は有効ではないJSON文字列を定義している場合があります。 --- 「とほほ」では > { ... } の中に、ダブルクォーテーション(")で囲んだ変数名と値をカンマ(:)で区切り、下記の様に記述します。と紹介していますが、JSON文字列はオブジェクト初期化子に限定されません。 http://www.ecma-international.org/ecma-262/11.0/#sec-json.parse > The JSON format represents literals, arrays, and objects with a syntax similar to the syntax for ECMAScript literals, Array Initializers, and Object Initializers.

Zuishin

2020/09/10 13:29

私自身は(今は)ほとんどここを読むことはありませんが、とほほはインターネット黎明期から有名なサイトで読者も多く、間違いがあってもすぐ修正されるだろうと盲信していました。初心者にお勧めの正確で読みやすいサイトはありますか？

Zuishin

2020/09/10 13:57

なお > RFC 8259, IETF STD 90, ECMA-404 2nd edition で規定されています。古いバージョンを含む JSON がそれらで規定されているという言及のみで、説明の中には ECMA-404 2nd edition 準拠の不適当なものは見当たりませんでした。 > と紹介していますが、JSON文字列はオブジェクト初期化子に限定されません。それらについては後で説明されていますから、全部読めば文字列しか入らないという誤解は生じないと思います。

think49

2020/09/10 22:56 編集

@Zuishin さん初心者には概ね、MDNで十分という判断です。状況によっては、お勧めサイトが変化しますが…。 https://jsprimer.net/ https://azu.github.io/promises-book/ https://uhyohyo.net/javascript/ しかし、JavaScriptの解説サイトはどのサイトも多かれ少なかれ間違いを含んでおり、今紹介したサイト(全てでは有りませんが)、MDNでも間違いを発見した事があります。間違いの数が少なければよいというものではなく、今調べている内容が「間違った内容」にマッチしていれば、それでもうアウトです。そして、実際、質問者の質問内容 > 色々サイトを見たんですけど、[から始まっているのから{から始まったりするものまであり、、、そもそもjsonの文法がいまいち分かっておらず、何が正しいのかが分かっていないので、おかしい箇所があったら指摘していただきたいです。を「とほほ」に照らし合わせると、間違って解釈される可能性が十分にあると私は考えました。 --- 私が指摘した「とほほ」の件。 Zuishinさんの解釈も成り立ちますが、「そういう解釈も出来る」という域を超えてはいないように思います。少なくとも私は http://www.tohoho-web.com/ex/json.html の > JSON では下記の型を使用することができます。を読んで、使用することが出来るのは「JSON文字列上のルートとは限らない」と前提を置いて、後文を読みました。後述の「文字列」「数値」「ヌル値」を読んで、どれもオブジェクト初期化子のプロパティ値に埋め込まれている事から・JSON文字列はルートにオブジェクト初期化子のみを指定できる・Number型、Null型、Boolean型、配列初期化子はオブジェクト初期化子のプロパティ値としてのみ使用できると解説しているように読めました。どの解説コードもオブジェクト初期化子の中に埋め込んでいますし、それは「JSONの文法」で解説している > { ... } の中に、ダブルクォーテーション(")で囲んだ変数名と値をカンマ(:)で区切り、下記の様に記述します。と組み合わせれば、そのように読めてしまいます。私の見立てでは初心者に必要なのは「初心者向けの解説サイト」ではなく、「コードの正当性を測る方法」です。初心者は「間違った情報」を元に考えを組み立てるので正解に辿り付けません。 Google検索で情報を求めて、複数サイトがHITし、情報に統一性がない場合、どちらが正しいか分かりません。

think49

2020/09/10 22:43

結局、未解決のようなので、後続質問に私の考えを書きました。 https://teratail.com/questions/291030?reply=true#reply-412064

Zuishin

2020/09/10 23:01

> https://jsprimer.net/ > https://azu.github.io/promises-book/ > https://uhyohyo.net/javascript/ 紹介ありがとうございます。参考にします。しかしながら、結局間違いがあるというのであれば、今回のとほほは特に間違いと言うようなものでもなく、誤解を生む可能性も少ないと判断できるため、差し替える必要を感じませんでした。直しておきます。

think49

2020/09/10 23:09

わかりました。・解釈に幅がある・誤解を生む可能性がある表現が厳密かもしれません。

Zuishin

2020/09/10 23:18

正確さとわかりやすさを兼ね備えた情報は貴重なのでバランスを考えなければなりませんが、私の判断においては、とほほのこの部分は明らかな間違いや、誤解を生みやすい表現は含まれておらず、わかりやすくまとまっているという評価です。むしろ私は、think49 さんともあろう人がこれを読んでなぜ誤解をしたのか不思議に思っています。

think49

2020/09/11 04:48 編集

@Zuishin さん > むしろ私は、think49 さんともあろう人がこれを読んでなぜ誤解をしたのか不思議に思っています。まず、私は下記文章を読んで、 > JSON では下記の型を使用することができます。何をどういう形で「使用できる」のかさっぱり分かりませんでした。仮にteratailで「JSONでは～の型を使用できるようですが」と質問があったら、「使用できるとはどういうことですか」と修正依頼で突っ込みますが、同じものをとほほに感じました。「JSONの文法」は既に章が変わって、説明が終了している為、前章を撤回する説明ではないと判断しました。これがもし、 JSON では文法上、オブジェクト初期化子に加えて、下記の型も使用することができます。と書いてあったなら、先の文法を補足していて、他の型「も」使用出来るのだな、と判断したかもしれません。しかし、それでも文法上、「どこに使用できる」のかが書いていない為、「JSONの文法」に矛盾しない範囲で使用できる場所を私は探すでしょう。 {で始まって、}で終わり、かつ、文字列リテラルが使用できるこの条件に当てはまる場所は、オブジェクト初期化子におけるプロパティ値以外に考えられません。そして、それは後続の章「文字列」で説明されたJSON文字列とも矛盾しません。 { "name": "Tanaka" } 従って、私の「とほほ読了後の結論」は、JSONの文法において、・{で始まり、}で終わらなければならない・オブジェクト初期化子内においては、文字列リテラル、数値リテラル、Boolean値、Null値、配列初期化子を記述出来るとなります。 ※Zuishin さんには別の解釈があるようですが、私もZuishin さんがどのように読んだのかが気になります。

Zuishin

2020/09/11 04:53

> { ... } の中に、ダブルクォーテーション(")で囲んだ変数名と値をカンマ(:)で区切り、下記の様に記述します。 > { "name": "Tanaka" } これを「文字列しか認めない」と読むのは、「JSON には name Tanaka しか認めない」と読むようなものではありませんか？コロンとカンマに関してはタイポだと思いますが、「変数名と文字列」ではなく「変数名と値」と書いてあります。そしてそこから読み進めていくと、文字列以外の値についての記述があります。

Zuishin

2020/09/11 05:03

「ダブルクォーテーション(")で囲んだ」は「変数名と値」ではなく「変数名」にかかる修飾語ですね。確かに名文ではありませんし、この部分だけではどこにかかるか確定できませんが、読み進めることで自明になります。

think49

2020/09/11 09:10

> これを「文字列しか認めない」と読むのはそのように解釈したわけではありません。後述から、「オブジェクト初期化子の中に」数値リテラルや配列初期化子も含めることが出来る事は明らかですが、 JSON.parse('"foo"'); JSON.parse('true'); JSON.parse('null'); JSON.parse('[1,2,3]'); このような文法が認められるようには読めなかった、という事です。数値リテラルや配列初期化子が存在して良い場所を「オブジェクト初期化子の中に限定」しているように私には読めました。

Zuishin

2020/09/11 09:40 編集

後ろの方に様々なパターンについて書いてありますが、その例示がオブジェクトのプロパティの右辺に偏っているというのが問題ということですね。確かにトップレベルに置くパターンも書いておいた方がバランスが取れますね。メールアドレスが書いてあるのでメールしておきます。あの文量で JSON の全てに言及するのは無理だと思いますが、そのくらいの例示はあっても良さそうですね。とりあえず公式を併記しているので、足りない分はそれを参照してもらいましょう。

think49

2020/09/13 08:51 編集

> 複数アカウントがバレにくいように質問を削除していくな。スコア10未満のユーザは捨てアカウント率が非常に高いので、回答への情熱は著しく下がってます。マルチポスト先の@tikokehiも捨てアカウントだろうと思ってます。 https://teratail.com/users/tikokehi

Zuishin

2020/09/13 09:15

> マルチポスト先の@tikokehiも捨てアカウントだろうと思ってます。そうでしょうね。そのようなやり方をしているからいつまで経っても「不快」な思いをするんでしょうに。副アカウントを使わず正しい手続きで質問を進めていたら私も指摘することはありませんでした。

Zuishin

2020/09/15 13:18

ところで、報告を忘れていましたが、とほほさんから返信がありました。 ECMA-404 1st edition は RFC7158 と若干差異があったが、2017 年に仕様の統一が図られ、現在は同一仕様になっているそうです。該当ページに書いてあるのは 1st edition ではなく 2nd edition です。また、JSON の表記として配列や値も許されることが追記され、カンマはコロンに直っています。この回答を書く前に MDN は真っ先にチェックしましたが、あそこから JSON の仕様を読み取るのは初心者にはハードルが高すぎると思い、とても見やすくまとまっているこちらのページを採用しました。より良いものになって何よりです。

Zuishin

2020/09/15 13:20

もっとも、この質問者には猫に小判だったようですが、これでわからなければ何をやってもだめでしょう。

行動規範の内容に同意します