JSONを使いこなすためにおすすめなViewer・Editor厳選6選!!

皆さんは、JSONを知っていますか?

JSONとは、データを読み書きするときに便利なデータフォーマットの1つです。ただ、初めて使う場合は書き方がわからない人も多いので、専用エディタを使うのがおすすめです!

そこで今回は、

  • おすすめのJSON Viewer・Editor

といった基礎的なことから、

  • JSONを実際に書くときに必要な知識

といった応用的な方法まで、徹底的に解説します!

JSONファイルを使う時の悩みとは?

JSONファイルはとても便利なデータ形式なのですが、初めて使う方は慣れるまで時間がかかる人が多いです。たとえば、JSONは次のようにデータを入れ子で表現することができます。

上記のデータを作るときのJSONの書き方は、次のとおりです。

 {
  "UserInfo": [
    {
      "id": 1,
      "name": "エンジニア1",
      "like-lang": "VBA",
      "tel": {
        "home-phone": "XX-XXXX-XXXX",
        "mobile-phone": "YY-YYYY-YYYY"
      }
    },
    {
      "id": 2,
      "name": "エンジニア2",
      "like-lang": "php",
      "tel": {
        "home-phone": "XX-XXXX-XXXX",
        "mobile-phone": "YY-YYYY-YYYY"
      }
    },
    {
      "id": 3,
      "name": "エンジニア3",
      "like-lang": "ruby",
      "tel": {
        "home-phone": "XX-XXXX-XXXX",
        "mobile-phone": "YY-YYYY-YYYY"
      }
    }
  ]
}

初めてみた方は、どのようなルールで書けばよいのかよくわからないですよね。慣れれば簡単に書くことができるのですが、

慣れるまでの敷居をなんとか下げたい・・・

と思う方も多いのではないでしょうか?そんな時は、JSONの専用ビューワー(Viewer)・エディタ-(Editor)を使うのがおすすめです。専用のエディタを使えば、次のようにノード形式で表示したデータに、直接データを追加することができます。

※以下はhttps://jsoneditoronline.org/というJSON用のWEBエディタを使っています

1. JSONエディタの機能を使ってjSONデータの要素を追加

2. 追加した要素にデータを入力し、JSON(テキスト形式)変換機能を実行

3. JSON(テキスト形式)のデータが自動で追加される

このように、エディタの使い方さえ覚えれば、簡単にJSONデータを作ることができます。そのため、JSON専用のビューワー(Viewer)・エディタ-(Editor)を使うのがおすすめです!

おすすめのJSON Viewer・Editorとは?

次に、おすすめのJSON用ビューワー(Viewer)・エディタ-(Editor)について解説します。

WEB

まずは、WEBで使えるJSON用ビューワー(Viewer)・エディタ-(Editor)について解説します。OSに依存せずネット環境さえあれば使えるので、おすすめです!

JSON Online Editor


引用元:JSON Eonedit oronline https://jsoneditoronline.org/

機能がシンプルかつWindows・Macに限らずWEBブラウザさえあれば無料で使えるので、とてもおすすめのエディタです!テキスト形式・ノード形式どちらでも使えます!

ただし、ネット環境がないと使えないので、Wi-Fiを持ち歩いていない方は、注意が必要ですね。

JSONView


引用元:JSON View Firefox用https://addons.mozilla.org/ja/firefox/addon/10869/

引用元:Chrom ウェブストア  Google Chrom 用https://chrome.google.com/extensions/detail/chklaanhfefbnpoihckbnefhakgolnmc

次は、ブラウザの拡張機能「JSONView」です。

JSONで作ったデータをWEBブラウザでササっと見たいケースはよくあるので、JSONエディタとは別に入れておくのがおすすめです!編集したりはできないですが、見やすく整形して表示することができるので、ChromeまたはFireFoxの拡張機能を入れておくのがおすすめです!

Windows

次に、Windowsで使えるJSON用ビューワー(Viewer)・エディタ-(Editor)について解説します。

JSONedit (インストールソフト)


とてもシンプルなデザインで、テキスト形式・ノード形式どちらからでも編集できます。かつ、インストール不要でダウンロードすればすぐに使えるので、余計な手間もかかりません。

Windowsユーザで、初めてJSONを使う方に特におすすめです!

notepad++


引用元:notepad̟⁺⁺ https://notepad-plus-plus.org/

notepad++はWEB開発にも使える、開発エディタの1つです。開発エディタの中でも動作が軽く、プラグインも豊富なので使っている方はいるかもしれませんね。

notepadd++にプラグインを2ついれれば、次のようにJSON(ノード形式) + JSON(テキスト形式)で見れるようになります。

notepad++に興味が湧いた方は、インストール後に以下プラグインを入れてみてくださいね!

※プラグイン追加方法:Plugin Admin → JSON Viewer & JSToolをチェック

  • ノード形式で見るためのプラグイン:JSON Viewer
  • JSONコードを整形してくれるプラグイン:JSTool

Mac

次に、Macで使えるJSON用ビューワー(Viewer)・エディタ-(Editor)について解説します。

Jayson


Finder・XcodeなどMacアプリで標準的に使われているデザインを使って構成されているため、Macユーザに優しいつくりになっています。有料エディタですが、シンプルながら高機能で使いやすいデザイン、豊富なショートカットもあり、とてもおすすめです!

Power JSON Editor


こちらもテキスト形式・ノード形式で確認・編集ができ、Macユーザに馴染みのあるデザインになっているのでおすすめです!

かつ編集してすぐ結果が反映されるので、簡単かつ速くJSONデータを作ることができます。有料エディタですが、価格以上の価値があるJSONエディタですね。

参考記事:https://egg-is-world.com/2017/10/28/mac-power-json-editor/

【補足情報】JSONフォーマットの書き方を詳しく知りたい方へ

ここまでJSON用ビューワー(Viewer)・エディタ-(Editor)について解説してきましたが、複雑なJSONデータをすべてエディタ任せで作ろうとすると、時間がかかってしまいます。

そのため、基礎的なJSONフォーマットの書き方を覚えておくのがおすすめです!

JSONフォーマットとは?具体的な書き方についても徹底解説!!
更新日 : 2019年4月1日

まとめ

今回は、JSONデータを作るときにおすすめのビューワー(Viewer)・エディタ-(Editor)について解説しました。JSONは書き方に慣れるまで少し大変なので、専用のエディタを使うのがおすすめです!

今回紹介したツールは使い方も簡単なので、ぜひ使ってみてくださいね!

Writer

Sanshiro Wakizaka

フリーランス

北海道出身の30歳で、フリーランスエンジニア兼テックライターとして活動中。新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。

Webアプリ、業務アプリ開発において、要件定義 ~ 運用保守まで様々な経験あり。また3歳の娘がいる1児のパパで、日々娘との時間を確保するために仕事を頑張っています!
侍エンジニアでは、【誰でもわかるレベルのわかりやすさ】を意識して、記事を執筆中。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close