基本操作

• デュアル編集: 左のテキスト欄と右のGUI（ツリー）は連動しています。片方を編集するともう片方に即座に反映されます。
• ファイル操作: 💾 ファイル操作ボタンから、JSONの保存や読み込みができます。データはお使いのブラウザ内に保存されます。
• 全画面表示: ⛶ 全画面ボタンでエディタを画面全体に表示できます。ESCキーか、右上のボタンで元に戻ります。

実践！JSON構築ガイド (GUI編)

右側のGUIエディタを使って、ゼロから以下のようなユーザープロフィールのJSONデータを作成してみましょう。

{
  "name": "山田 太郎",
  "age": 30,
  "isStudent": false,
  "address": {
    "city": "東京",
    "zipcode": "100-0001"
  },
  "skills": [
    "JavaScript",
    "HTML",
    "CSS"
  ]
}

1. ステップ1: 新規作成
   まず ✨ 新規作成 ボタンを押し、エディタを空のオブジェクト { } の状態にします。
2. ステップ2: キーと値の追加 (文字列, 数字, 真偽値)
   - 右側の { } の行の左端にある四角いアイコン (ドラッグハンドル) をクリックするとメニューが表示されます。その中から Append を選択します。
   - name: `field`に name、`value`に 山田 太郎 と入力します。型は自動で `String` になります。OK を押します。
   - age: 同様に `Append` を選択し、`field`に age、`value`に 30 と入力します。型が自動で Number になります。
   - isStudent: `field`に isStudent と入力し、型選択で `Boolean` を選び、チェックを外して `false` にします。
3. ステップ3: オブジェクト (ハッシュ) の追加
   - ルートオブジェクトで `Append` を選択し、`field`に address と入力します。
   - 型選択で Object を選び、OK を押すと address: { } が作成されます。
   - 作成された address の行で同様に `Append` を選択し、city と zipcode を追加します。
4. ステップ4: 配列の追加と要素の挿入
   - ルートオブジェクトで `Append` を選択し、`field`に skills と入力します。
   - 型選択で Array を選び、OK を押すと skills: [ ] が作成されます。
   - 作成された skills の行で `Append` を選択し、型を `String` のまま `value` に JavaScript を入力して追加します。これを繰り返し、HTML と CSS も追加します。

これで完成です！左側のテキストエディタにも、目標と同じJSONコードが生成されているのが確認できます。