RailsのJavaScriptでJSONを扱うには？

Question

やりたいこと

Railsで、予め用意したJSONファイルのデータをCanvasに描画するWebアプリを作っています。
JavaScriptで描画をするため、JSONファイルをJavaScriptから読み込みたいのですが、方法がわか
りません。

疑問点

1. JSONファイルはどこに保存するのが適切ですか？

　　assets/javascriptsでしょうか？

1. 1に保存したJSONファイルは、

　　a. どこで
b. どうやって
読み込んだら良いのでしょうか？

今は、assets/javascripts に保存したJSONファイルを、対応するコントローラのメソッドから読み込んで、JavaScriptに渡せないか？と思案中です

# controller
def method1
  gon.json_data = open(file_name) do |f|
    JSON.load(f)
  end
end

gem "gon"を使用すればJavaScriptに変数を渡せるようなのですが、JSONファイルのパスを上手く指定できず・・・
それと、コントローラで読み込んで変数を渡すのではなく、JavaScriptコードからJSONファイルを読み込めればいいのですが・・・

アドバイス、ご回答頂けると幸いです！

Answer 1

何がどこで実行されるかに関して混在してませんか？
RailsはOSの80番ポートを専有し、HTTPリクエストを待ち受けるWebサーバとして動作します。

各ユーザはブラウザを立ち上げて、RailsのサーバへHTTPリクエストを送信します。
HTTPリクエストに含まれるパス等の情報に従ってルーティングを行い、
適切な情報をHTTPレスポンスとしてブラウザへ返します。

このやり取りを行いブラウザはHTMLファイルを受け取り、
それを解析し、<script>タグを発見することでその中の文字列をJavaScriptと認識して実行開始します。

この違い、めちゃくちゃ重要です。

---

RailsはHTTPリクエストを受け取り、Rubyのコードを走らせてHTMLを作るのが仕事です。
この中にどんなJavaScriptのコードが書かれていようが動かしたりはしません。
逆にHTMLを作るというならば、どんな文字列だって埋め込む事が出来るはずです。

JSONを扱うには？

JSONはJavaScriptの箇所にベタっと貼り付けるだけで動作する程、
JavaScriptと親和性の高いファイルフォーマットです。

つまり、RubyでJSONファイルを読み込んで、
<script>タグの中身にベタッと貼り付ければおしまいです。

保存したJSONファイルを、対応するコントローラのメソッドから読み込んで、JavaScriptに渡せないか？と思案中です

もしそれをしたいならAjaxを学習しましょう。

静的ファイルのJSONはそのまま配信出来るようにしておき、
HTTPリクエストが送られてきたらJSONをそのままHTTPレスポンスとして返すようにしておきます。

その後、JavaScriptで該当のパスへAjax(HTTPリクエスト)を使ってJSONを取得して、
そのJSONを解析して使うようにできます。
CSVやTSV、YAML、XMLファイルなんかも同じ手法でやり取りされます。
JavaScriptはJSONを読み取り値に変換する機能をデフォルトで持っているので、JSONで返してくれると非常に嬉しいですけどね。

Comments

[退会済みユーザー]

なるほど、Railsについてイマイチ「Webアプリを作るにあたり、作業をある程度自動化してくれるもの」という曖昧な認識でしたが、例えばXAMPPのようなイメージがより正しいのですね
勉強になります！

>HTTPリクエストが送られてきたらJSONをそのままHTTPレスポンスとして返すようにしておきます。
>その後、JavaScriptで該当のパスへAjax(HTTPリクエスト)を使ってJSONを取得して
この場合、Controllerは使用せずにJavaScriptファイルからJSONを読み込むということでしょうか？

```
// javascript
$.getJSON('data.json', function (data) {
//処理...
});
```

このようにすれば上手くAjaxで読み込まれるはず。。。
上記コードのdata.jsonは、javascriptファイルと同じ階層にJSONファイルがある場合、"./data.json"という指定でいいのでしょうか？

ここが、どうパスを設定しても "http://localhost:3000/data.json 404 (Not Found)"というエラーが発生してしまいます

どうかお返信を頂けると幸いです。

Answer 2

ajaxでJavaScriptから直接読み込むのが通常かと思います。
Railsなど利用したければJavaScriptからajaxでpostしてリクエスト受け取ってjson読み込んで結果を返す、となりますが、何かしらデータ加工や抽出がはいらないのであればajaxで直接json叩いた方が早いです。

Comments

[退会済みユーザー]

>ajaxでJavaScriptから直接読み込むのが通常かと思います。
なるほどです！

>Railsなど利用したければJavaScriptからajaxでpostしてリクエスト受け取って
なるほど、アプローチとしては、直接JSに以下のようなコードで実行した方が自然なんですね

```
// javascript
$.getJSON('data.json', function (data) {
//処理...
});
```

JSONファイルは基本的にassets/javascripts においておく認識で良いのでしょうか？

また、(以下は他の回答者様への返信と同文です)
上記コードのdata.jsonは、javascriptファイルと同じ階層にJSONファイルがある場合、"./data.json"という指定でいいのでしょうか？
ここが、どうパスを設定しても "http://localhost:3000/data.json 404 (Not Found)"というエラーが発生してしまいます

返信を頂けると幸いです。。

[m.ts10806]

URL直に実行して開けないファイルが参照できないのは画像もJavaScriptも同じです。
Rails詳しいわけではないですが、別途assetsからインクルード仕組みがあるのでは？
それに合わせるか、Webルート配下に置くのが確実です。

Answer 3

JavaScript側から、

// javascript
$.getJSON('/data.json', function (data) {
//処理...
});

のような形で静的なJSONファイルを読み込むのであれば、Railsですとpublicディレクトリの下、例えば public/data.json などに置くことになるかと思います。

なお、public以外のディレクトリの役割については、RailsガイドのRails をはじめようなどを見るとよいかと思います。

Comments

[退会済みユーザー]

ご回答ありがとうございました！
無事、PublicにJSONファイルを置いて、"/data.json"とURLを設定することで、JSファイルから参照できました！
そういえば、Publicに設置した画像も頭に"/"をつけて参照しますが、JSONでも同様に参照できたのですね！
とても助かりました！改めて、ご回答ありがとうございました！

miyabi-sun さん、mts10806 さんもご回答とアドバイスをいただき、大変ありがとうございました！
また何かありましたら()、何卒よろしくお願いいたします。。。