jsファイル内で他のアプリの情報をapiで取得し、変数に代入したい。

前提・実現したいこと

カレンダーのアプリを作成中です。カレンダーに予定を表示させたいのですが、その予定は別のアプリからapiで取得した情報になっており、まずは情報を取得したいのですがjsファイル内でのapiの叩き方が分かりません。
jsファイル内でapiで取得した情報を変数に代入し、その変数をjsファイル内で使いまわしたいです。

コードを色々試したのですが、今の書き方でおかしい箇所をご指摘頂けないでしょうか、、
お忙しいところ申し訳ございません。

該当のソースコード

carendar.js

var uri = `curl -v -X GET "https://smartyoyaku-staging.herokuapp.com/api/v1/tasks" \
          -H "Authorization: Bearer zW7L6rzrFcqMCAJ64fQcBYJx"`
var event = JSON.parse(uri)


$('#calendar').fullCalendar({
        // ヘッダーのタイトルとボタン
        header: {
            // title, prev, next, prevYear, nextYear, today
            left: 'prev,next today',
            center: 'title',
            right: 'month agendaWeek agendaDay'
        },
        dayClick: function () {
            //ここにモーダルで詳細表示
            alert('日付クリックイベント');
        },
        events:events_data,
        // イベントソース(ここにAPI情報を記載)
        eventSources: [
            {
                events: [
                    {
                        title: 'event1',
                        start: '2020-06-01'
                    },
                    {
                        title:  "event2",
                        start: '2020-06-02',
                        end: '2020-06-02'
                    },
                ]
            }
        ],
        // ボタン文字列
        buttonText: {
            today:    '今日',
            month:    '月',
            week:     '週',
            day:      '日'
        },
        // 曜日名称
        dayNames: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
        // 曜日略称
        dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
        
});

試したこと

railsのcontroller内で試しにcurlコマンドを実行しましたがapi情報を取得できました。ですがjsファイル内で以下の記述では取得出来なく、XMLHttpRequestなどの方法も試しましたが上手くいかずでした。

def index
    uri = `curl -v -X GET "https://smartyoyaku-staging.herokuapp.com/api/v1/tasks" \
          -H "Authorization: Bearer zW7L6rzrFcqMCAJ64fQcBYJx"`
    @event = JSON.parse(uri)
end

viewファイル
<%= @event %>

中身↓
"tasks": [
        {
            "id": 31,
            "request": "よろしく",
            "start_at": 1593316800,
            "end_at": 1593320400,
            "task_course": {
                "title": "中川のコース",
                "description": null,
                "course_time": 60,
                "charge": "10000"
            },
            "store_member": {
                "name": "山田",
                "phone": "09079616666",
                "address": null
            }
        },
    ]

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

jsおよびhtml内では(<%= %>内を除いて)Rubyは関係ありません。
JavaScriptの文法に従う必要があります。

JSにおいてバッククォートは文字列の一種なので"https://～～"と普通に書いたのと大差ありません。

また、そもそもJSはクライアントPC(htmlを表示してる側)で実行されるためcurlがインストールされているか？などは不確定なうえ
セキュリティ的な問題を回避するため「コマンドを実行する」的な事は不可能です。

そのため、XMLHttpRequestやfetchを利用する事になりますが
同一オリジンポリシーによりドメイン超え(railsがhttps://rails.app/～でapi側がhttps://api.app/～)的な事を行おうとすると

CORSでapi側から許可を得る
jsonpで取得できるならばそちらを使う
railsにデータの仲介を行うプロキシを作る

などの方法を行わないといけません。

開発中のみ回避できればいいのならば、拡張や起動オプションなどでブラウザにCORS無効化を訴える事ができなくもないので探してみるのも手です。

投稿2020/06/28 21:38

asm

総合スコア15149

jyon3030

2020/07/01 05:37

お返事遅れてしまい申し訳ありません！あれから色々調べfetchを使ってみようと試行錯誤しましたがダメでした。やはりシンプルにrubyの変数をjavascriptで使う方法を調べた結果、方法があったのでそのやり方で実装する事にしました。失敗はしましたがjavascriptのapi通信について少し知れたのでよかったです！ありがとうございました！

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