【Rails入門】JSON.parseでパラメーターをHashに変換する方法

こんにちは!システムエンジニアのオオイシです。

Ruby on RailsでJSONを取り扱うときに、

JSONをRailsで受け取る方法を知りたい

JSONをハッシュに変換するには?

フォームデータをJSONでRailsに送信したい!

なんて悩みはありませんか?

そんなあなたに、今回は以下の内容について解説していきます!


【基礎】JSON.parseとは
【基礎】JSON.parseの使いかたの基本
【応用】JSONをRailsで受け取る方法
【応用】JavaScriptでJSONをRailsに送信

JSON.parseについて初心者でもわかるように解説していますので、しっかりと理解しておきましょう!

JSON.parseとは

JSON.parseとは、JSON(ジェイソン)形式の文字列をRubyのHash(ハッシュ)形式に変換するためのメソッドです。

使いかた:

JSON.parse(JSON文字列, オプション={})
# オプション(任意)
# :max_nesting → JSON文字列のネストの深さ。デフォルトは19
# :symbolize_names → 変換したHashのキーをシンボルにする場合はtrue

このJSON.parseは、Rails用のメソッドではなくRubyのメソッドなのでご注意ください。

次項では、JSON.parseの使いかたを見ていきましょう。

なお、RubyのJSONについて知りたい場合は、こちらに詳しい解説があるので、ぜひ参考にしてください。

JSON.parseの使いかた基本

JSON.parseの使いかたはとっても簡単です。

詳しく解説していきます!

JSON.parseのサンプル

JSON形式の文字列をHashに変換するサンプルプログラムを紹介します。

サンプル:

> #JSONデータ
> json_str = '{"rails": {"json": "12345"}}'
> hash = JSON.parse(json_str)
> hash["rails"]
=> {"json"=>"12345"}

このようにJSONからHashに変換できました。

オプションを指定しない場合はハッシュのキーは文字列です。

JSON.parseのサンプル(シンボルキー)

変換したハッシュのシンボルに変換する例もみてみましょう。

サンプル:

> json_str = '{"rails": {"json": "12345"}}'
> hash = JSON.parse(json_str, symbolize_names: true)
> hash[:rails]
=> {:json=>"12345"}

このように、Hashのキーがシンボルであることが確認できました。

JSONをRailsで受け取る方法

RailsにおけるJSON.parse

WEB APIと呼ばれるサービスが最近ではとても増えてきています。

Railsの場合も、これらのWEB APIに対応するために、JSONのリクエストパラメータは、自動的にHash形式に変換してパラメータ(params)にセットしてくれます。

ただし、自動変換するのはコンテンツタイプが'application/json'の場合のみなので注意してください。

このような場合には、JSON.parseを使ってHashに変換します。

サンプルで紹介していきます。

サンプルコントローラーの作成

はじめに、サンプル用のJsonPコントローラーを作成します。

サンプルコントローラーの作成:

$ bin/rails g controller json_p parse

次に、parseメソッドにコーディングしていきます。

RailsでJSONを自動でHashに変換

JSONをHashに自動変換してパラメーター(params)にセットするサンプルコードを紹介します。

パラメーター(param)から取り出すには、

  • params[:コントローラ名]

です。

app/controllers/json_p_controller.rb :

class JsonPController < ApplicationController
  def parse
    json_hash  = params[:json_p]  # JSONから自動変換されたHash
  
  # 見やすいように整形
    response_str = 
    "Hash: " + json_hash.to_s + "\n"

    render plain: response_str
  end
end

リクエストを送信するために今回は、curlコマンドを使います。

curl(カール)とはWebブラウザのコンソール版のようなツールです。

HTTPヘッダーのコンテンツタイプ(Content-Type)が"application/json"にして、{"key":"val","key2":"val2"}を送信してみましょう。

実行結果:

$ curl http://localhost:3000/json_p/parse -X GET -H 'Content-Type:application/json' -d '{"key":"val","key2":"val2"}'
Hash: {"key"=>"val", "key2"=>"val2"}

このように、JSON形式の文字列がHashに変換されたことが確認できました。

以下は、curl(カール)のインストール方法です。

curl(カール)はWebプログラミングでよく使うので、インストールしておいたほうがよいでしょう。

curlのインストール(Mac):

$ brew install curl

Windowsの場合はこちらからダウンロードしてインストールすることができます。

なお、railsのパラメーター(params)については、こちらで詳しく解説してあります。

JSON.parseを使ってHash(シンボルキー)に変換

JSON.parseを使ってリクエストしたJSONをHashに変換する方法を紹介します。

JSONデータは{"key":"val","key2":"val2"}です。

app/controllers/json_p_controller.rb :

class JsonPController < ApplicationController
 
  def parse
    json_str  = request.body.read     # リクエストのJSON
    json_hash = JSON.parse(json_str,symbolize_names: true)  # Hashに変換

    # 見やすいように整形
    response_str = 
    "JSON: " + json_str       + "\n" + 
    "Hash: " + json_hash.to_s + "\n"

    render plain: response_str
  end
end

今回は、コンテンツタイプを"text/javascript"にして、JSONを送信しています。

実行結果:

$ curl http://localhost:3000/json_p/parse -X GET -H 'Content-Type:text/javascript' -d '{"key":"val","key2":"val2"}'
JSON: {"key":"val","key2":"val2"}
Hash: {":key"=>"val", ":key2"=>"val2"}

このように、JSONをシンボルキーHashに変換することができました。

Rubyのシンボルについては、こちらで詳しく解説してあります。

JavaScriptでJSONをRailsに送信

ここではさらに応用してJavaScriptでJSONを作成して、Railsに送信する方法をご紹介します。

formの値をJSON変換し、RailsでHashに変換した結果をブラウザに表示します。

app/views/json_p/index.html.erb:

<h1>JsonP#index</h1>
<p>Find me in app/views/json_p/index.html.erb</p>
<!-- 以下を追加 -->
<%= form_with do |f| %>
  <p>key1: <%= f.text_field :key1 %></p>
  <p>key2: <%= f.text_field :key2 %></p>
  <%= f.submit("送信") %>
<% end %>
<h2>レスポンス</h2>
<pre id="response"></pre> <!-- レスポンスを表示する-->

json_parse.jsファイルを新規に作成し、フォームデータをajaxで送信するプログラムです。

app/assets/javascripts/json_parse.js:

$(function(){
  // submitが押された場合
  $('form').on('submit', function(event) {
    Rails.ajax({
      url:  'http://localhost:3000/json_p/parse',
      type: 'post',
      data:  JSON.stringify(request_data()),
      headers:{
        'Content-Type': 'application/json',
        'X-CSRF-Token':  Rails.csrfToken() //CSRFトークン
      },
      success : function(data) {
        $("#response").html(data);
      }
    });
    return false;
  });

  // フォームの値を取得
  var request_data = function() {
    var obj = {};
    obj["key1"] = $('#key1')[0].value
    obj["key2"] = $('#key2')[0].value
    return obj;
  }
})

今回は、POSTでJSONを送信するためにrailsのroutes.rbを変更します。
入力フォーム用のルートも追加します。

config/routes.rb:

Rails.application.routes.draw do
  get   'json_p/index' # 追加
  post  'json_p/parse' # get → post
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

それでは「rails s」を実行して実行してみましょう。

入力フォームに任意の値を入力して[送信]ボタンをクリックしてください。

このように、JavaScriptからJSONを送信してHashに変換した結果がブラウザに帰ってきました。

なお、ajaxについては、こちらで詳しく解説しているので、ぜひ参考にしてください。

まとめ

いかかでしたか?

今回は、RailsでJSONをparseする場合を紹介しました。

RailsはWEB APIをプログラムするためにJSONを受け取ることを前提に作られているので、とても簡単に使うことができるので、ぜひ使ってみてください。

そして、RailsでJSONをparseする方法を忘れてしまったらこの記事を確認してくださいね!

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

オオイシ

オオイシ

システムエンジニア歴15年のオオイシです!好物は Java と Ruby。プログラミング、システムアーキテクトからマネジメントに到るまでなんでも食べます。
システム開発の相談やお困りごとがあればお気軽に
[email protected] まで連絡頂けると幸いです

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説