常連

### 解決したいこと
Gemのgonを導入しましたが、エラーになってしまい使用することができません。

###### 行った手順
Gemfileにgem 'gon'記述、bundle install
(Gemfile.lockには入っていました)
```
views/layouts/application.html.erb

 <head>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= include_gon %>　　　　　←　ここに記述

    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js" integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
```
```
コントローラー

  def new
    @document = Document.new
    @sheets = current_user.sheets.all
    gon.sheets = @sheets　　　　　← ここに記述
  end
```
### 発生している問題・エラー
```
NameError 
undefined local variable or method `include_gon' for...
```
###### 試してみたこと
- head内ではなくbody内のjs読み込み部分の上でinclude
- <%= include_gon %>　を　<%= Gon::Base.render_data %>　に変更

互換性や読み込み順序などに問題があるのでしょうか。
エラーの原因がわからず手詰まりなので、他に確認するべきことがありましたら教えていただきたいです。

###### 少し気になっている部分
```
javascript/packs/application.js　の並び順

require("jquery")
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("@nathanvda/cocoon")
require("bootstrap/dist/js/bootstrap")
```

【Rails6】Gemのgonがincludeできない

### 前提
Docker環境上でRuby on railsを用いて、開発しております。
バージョン情報
Rails 6.1.4.7
ruby 2.7.4
Docker 20.10.11
Node.js v14.17.6
現在、webpackerを用いており、以下の記述でjsファイルとVIEWが連携しています。
= javascript_packs_with_chunks_tag 'select'

### 実現したいこと

gonを使ったRailsとJavascriptの連携をし、controller内でセットした変数をJavascript内で使う事ができるようにしたい。

### 発生している問題・エラーメッセージ
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-11/22d5633f-f10b-4062-bca6-1225226f4d1e.png)
gonが起動していればhello,テスト太郎!と表示されるはずが、hello,$(gon.user.name)!とそのまま表示されてしまい、gonが起動していない
### 該当のソースコード


Gemfileに以下の記述は既にあり、

```Gemfile
gem 'gon', '~> 6.4’
```

dockerのappコンテナ上でbundle installを実行済みです。

```app/controllers/select_controller.rb
def new
  gon.user = 'テスト太郎'
end
```


```app/javascript/packs/select.js

window.alert('hello,$([gon.user.name](http://gon.user.name/))!');
```



```app/views/form.html.slim
= include_gon
= javascript_packs_with_chunks_tag 'select'
```

### 試したこと
ターミナルのappコンテナ上でgem listと入力し、gonがインストール済みか確認したところインストールされていることが確認が取れました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-11/b81b41dd-ab9b-417f-a5b9-3e0841127dda.png)
次に
```app/views/form.html.slim
= javascript_include_tag "select"
```
を追加したところ以下のエラーが表示されました。
```
Sprockets::Rails::Helper::AssetNotFound at /settings/locations/new
The asset "category_select.js" is not present in the asset pipeline.
```
そこで、以下の記述を
```config/envitonments/production.rb
config.assets.compile = true
```
falseから記述をtrueに変更をして、再起動したのですが、変化はありませんでした。
controller内でセットした変数をJavascript内で使う事ができないのは、どのような原因が考えられるでしょうか？

### 補足情報（FW/ツールのバージョンなど）
参考サイト
https://makolog.xyz/gem/
https://qiita.com/s_nakamura/items/5d153f7d9db1b1190296
https://qiita.com/masashiiwasaki/items/c4360437094177ba042d


gonを使ったRailsとJavascriptの連携をしたい

### rails gem"gon"を利用したjavascriptファイルへのデータの引き渡しがうまくいかない。

現在Googlemap APIを利用して、ユーザーがおすすめの場所を投稿、共有できるようなプロダクトを作成しております。
全投稿をマーカーとして表示したマップをホーム画面に表示しようかと考えているのですが、ピンが表示されず、お知恵をお借りいただけますと幸いです。

具体的には以下のようなコードを設定しております。

**背景**
- PostモデルとSpotモデルを作成。Postモデルには投稿内容が、Spotモデルには位置情報（address, latitude, longitude）を保存している。
- PostモデルとSpotモデルは一対一の関係。


**homeページのコントローラー**
```ruby
def home
  @posts = Post.all.includes([:spot])
  gon.posts = @posts
end
```


**assets/javascript/googlemap.js**
```javascript
let map
let marker = [];
let geocoder

function initMap(){
  geocoder = new google.maps.Geocoder() //GoogleMapsAPIジオコーディングサービスにアクセス
  map = new google.maps.Map(document.getElementById('map'), { //'map'というidを取得してマップを表示
    center: {lat: 35.6594666, lng: 139.7005536}, //最初に表示する場所（今回は「渋谷スクランブル交差点」が初期値）
    zoom: 15, //拡大率（1〜21まで設定可能）
  });
  for (var i = 0; i < gon.posts.length; i++) {
    var markerLatLng = new google.maps.LatLng({lat: gon.posts[i].spot.latitude, lng: gon.posts[i].spot.longitude}); // 緯度経度のデータ作成
    marker[i] = new google.maps.Marker({ // マーカーの追加
      position: markerLatLng, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
    });
}
```

**エラー内容**
上記のコードではピンが一件も表示されません。
エラー内容を確認してみると"property 'latitude' of undefined"とあり、gon.posts[i].spotにうまく位置情報が渡せていないことが原因と思われます。
![イメージ説明](9deb1df97209d302057afe121881e406.png)
![イメージ説明](2378563972290126d5df5935682a173a.png)

行ったこと
0. 番号リストgon.posts[i].spot.latitude, gon.posts[i].spot.longitudeの値を具体的な緯度、経度の数字（渋谷スクランブル交差点　lat: 35.6594666, lng: 139.7005536）に直したところ、ピンは正常に渋谷スクランブル交差点に表示された。
0. 番号リストコントローラーで@post = Post.first、　gon.lat = @post.spot.latitude、 gon.lng = @post.spot.latitudeを定義しjavascriptのmarkerLatLngに挿入したところ、一件目の投稿に関するピンは正常に表示された。
0. 番号リストrailsコンソールで@posts = Post.allと定義し、@post[0].spot.latitudeと打ったところ、一件目の緯度情報が得られた。

以上のことからgon.posts=@postsで上手くgon.postsに情報を渡せていない or javascriptファイルにて情報を取り出す方法に問題があると考えております
どこが問題か、どこを修正するべきか、ご意見をいただけますと幸いです。
よろしくお願いいたします。

rails gem"gon"を利用したjavascriptファイルへのデータの引き渡しがうまくいかない。

## やりたいこと：情報ウィンドウ（mapAPIのinfoWindow）のcontent内へ記載したリンクを押すと、プロフィールページへ遷移するようにしたいです。

解けない状況が続いており相談させてください。

【アプリイメージ】
トップページ上に配置したマップに、参加者の位置を反映させたマーカーを立てます。
各マーカー毎の情報ウィンドウを開くと、リンクが貼ってあり、クリックすると参加者個別のプロフィールに飛べるようにしたいです。

【出来ていること、出来ていないこと】
出来ていること ：①②③
出来ていないこと：④

①マップ作成 → ②マーカー立て(位置反映) → ③情報ウィンドウの発生(リンク先記載) → ④個別プロフィールへ遷移
※緯度経度をデータベースに保存し、gonを使用してコントローラから、JSファイルへ配列データを渡しています。

## 発生している問題点と仮説
情報ウィンドウ内に記載のリンクをクリックするとエラーが出ます。
そこでカーソルを合わせた場合の遷移先(画面左下)を見ると、id番号が指定できていないようです。
参考：https://gyazo.com/bbf2996d0f8f54777988b3e337781453

abouts#showに遷移したく、idを指定しました。
遷移出来ない現状では下記となっています。
/abouts/gon.aboutIdArray[i]

paramsを確認すると以下となります。
{"controller"=>"abouts", "action"=>"show", "id"=>"gon", "format"=>"aboutIdArray[i]"}


本来は以下のようにしたいです。
/abouts/42
※「42」等showページのid番号（/abouts/:id）

以上から、ソースコード上の
下記の行による数字の指定ができていないのではと考えています。
> '<p>ABOUT: <a id="url" href="/abouts/gon.aboutIdArray[i]" target="_blank">id反映されていない</a></p>' +


## 関連ソースコード
```
// JSファイルです。
#map.js
var mapCenter = { lat: 35.659482, lng: 139.700553 };
var mapMarker = [];
var mapInfoWindow = [];
var infoWindowContent = [];

function initMap() {
  var mapArea = document.getElementById("map");
  var mapOption = {
    center: mapCenter,
    zoom: 6, 
  };

  // ----- MAP ------------------------------------------
  var mapIs = new google.maps.Map(mapArea, mapOption);

  // ----- Location -------------------------------------
  for (var i = 0; i < gon.aboutIdArray.length; i++) {
    mapMarker[i] = new google.maps.Marker({
      position: new google.maps.LatLng(
        parseFloat(gon.latArray[i]),
        parseFloat(gon.lngArray[i])
      ),
      map: mapIs,
    });

    **idが渡せていない様子なので、この辺りが問題ではないかと推測しています。**
    infoWindowContent[i] =
      '<div class="infoWindow">' +
      '<p>ABOUT: <a id="url" href="/abouts/42" target="_blank">直接idを指定すれば遷移可能</a></p>' +
      '<p>ABOUT: <a id="url" href="/abouts/gon.aboutIdArray[i]" target="_blank">id反映されていない</a></p>' +
      '<div class="infoWindowName">' +
      "<%= gon.nameArray[i] %>" +
      "</div>" +
      '<div class="infoWindowAbout">' +
      "</div>" +
      "</div>";
    mapInfoWindow[i] = new google.maps.InfoWindow({
      content: infoWindowContent[i],
    });
    markerEvent(i);
  }
}
function markerEvent(i) {
  google.maps.event.addListener(mapMarker[i], "mouseover", function () {
    mapInfoWindow[i].open(map, mapMarker[i]);
  });
}


// 念の為コントローラーも記載します。
#maps.controller.rb
class MapsController < ApplicationController
  def index
    gon.nameArray = []
    gon.aboutIdArray = []
    gon.latArray = []
    gon.lngArray = []
    gon.invArray = []

    userIdArray = []
    noneAboutUserIdArray = []
    User.all.each do |user|
      userIdArray << user.id
    end
    userIdArray.each do |userId|
      if About.where(user_id: userId).blank?
        noneAboutUserIdArray << userId
      end
    end
    User.all.each do |user|
      noneAboutUserIdArray.each do |noneAboutUserId|
        if user.id == noneAboutUserId
        else
          gon.nameArray << user.name
        end
      end
    end
    About.all.order(user_id: "ASC").each do |about|
      gon.aboutIdArray << about.id
      gon.latArray << about.latitude
      gon.lngArray << about.longitude
      gon.invArray << about.invitation
    end
  end
end


```


## 試したこと
```
【試行１】具体的なid番号直打ち
下記ソースコードのように直接id番号を指定した場合、プロフィールページへ遷移可能です。
> '<p>ABOUT: <a id="url" href="/abouts/42" target="_blank">直接idを指定すれば遷移可能</a></p>' 
よって、id番号を取ってこれれば、showへ遷移可能と考えています。


【試行２】指定する配列(id番号が並んでいます）が取れているか確認
for文の中で確認したところ、数字の形でデータは取得出来ていそうです。
※並び順はコントローラーで指定した通りです。
#console.log(i);
 =>[0,1,2,3,4,5,6,7,8,9,10,11]
#console.log(gon.aboutIdArray[i]);
 =>[43,41,42,46,48,50,53,54,55,56,57,58]
よって、gonでのデータ渡し及び、for文での配列の要素の指定はできると考えます。
infoWindowの中で呼び出すにはどうしたらよいのでしょうか。。。


【試行３】google.maps.InfoWindow内で直接、配列要素を参照しようとした場合
infoWindowContent[i]を使わずに、
google.maps.InfoWindow内へ直接記載しました。

>mapInfoWindow[i] = new google.maps.InfoWindow({
>  content:
>    '<div class="infoWindow">' +
>    '<p>ABOUT: <a id="url" href="/abouts/42" target="_blank">直接idを指定すれば遷移可能</a></p>' +
>    '<p>ABOUT: <a id="url" href="/abouts/gon.aboutIdArray[i]" target="_blank">id反映されていない</a></p>' +
>    '<div class="infoWindowName">' +
>    "<%= gon.nameArray[i] %>" +
>    "</div>" +
>    '<div class="infoWindowAbout">' +
>    "</div>" +
>    "</div>",
>});

結果は変わらず、/abouts/gon.aboutIdArray[i]、の指定のままでした。
（配列の要素を一つづつ拾ってきて、/abouts/42 、のようにはなりませんでした）

```

原因の予想は立てられたものの、どう解決したらよいか分からずにいます。
ネットで記事を探しましたが見つけられず、解決策や試行案を教えて頂けると幸いです。

確認漏れや疑問点などありましたらご指摘ください。
よろしくお願いいたします。


###### 補足事項
Rails 5.2.4.3
ruby 2.5.1
MySQL 5.6.47

情報ウィンドウ（mapAPIのinfoWindow）のcontent内へ記載したリンクを押すと、プロフィールページへ遷移するようにしたいです。

railsのChart.jsで、itemに紐づくレビューの平均値を、レビュー項目ごとにランキングにしたいのですが、dataにどう連携すればいいのかわかりません。

例）
みかん、オレンジ、レモン(item)について、ユーザーが酸っぱさ（rating1カラム）の星５段階評価をしていくと、その平均値がランキングで表示されるようにしたいです。
「酸っぱさランキング」ページにいくと、みかん、オレンジ、レモン、それぞれの平均値が横棒グラフ(horizontalBar)として表示されているイメージです（ランキングにしたいので平均値が大きい順になるともっと嬉しいです）

```html
<% @items.each do |t| %>
 </div> 
 <div class="avg"><%= t.reviews.average(:rating1)  %></div>　// これであれば各itemのrating1カラム平均値が列挙できる
 <% end %>

// 以下、chart.js。dataのところに何を入れればいいのかわかりません
 <canvas class="myCharts"></canvas>
  <script>
    ctx = document.getElementsByClassName("myCharts");
    var avg = document.getElementsByClassName("avg");
    myChart = new Chart(ctx, {
       type: "horizontalBar",
      data: {
            labels: <%== @itemname %>, 　// ここは全てのitem名がちゃんと列挙される
            datasets: [             
                {
                        data:  [1,2,3,4],  // ここの置き換えがわからない
                    backgroundColor: ["red", "yellow", "green", "blue", "purple"]
                }
                    ]
        },
options: {
            responsive: false,
            title: {
                display: true,
                fontSize: 20,
                text: "酸っぱさランキング"
            },
            legend: {
                display: false,
            },                
            scales: {
                xAxes: [ // Ｘ軸のオプション
                    {
                        ticks: {
                            min: 0
                        }
                    }
                ],
                yAxes: [                   //
                    {                      //
                        ticks: {           //
                            reverse: true  // 
                        }                  //
                    }                      //
                ]                          //
            }

        }
    });

</script>
 </div>


```


◆やってみたこと
①idだと複数表示されないという回答を別記事で見たので、classにしました

②普通にeachメソッドで　<%= t.reviews.average(:rating1)  %>　とすれば、全ての項目の数値が出てきます。しかし、chart.jsの中のdataにそれを入れてもグラフの数値は表示されませんでした。同様にcontroller上でgonを利用して代入してみましたが、これもうまく表示されませんでした。

```html
// 以下でやってみました
     data: {
            labels: <%== @itemname %>, 
            datasets: [      
                <% @items.each do |t| %>    　// ここ追加してみました
                {
                        data: <%= t.reviews.average(:rating1)  %>, 　// ここに追加してみました
                    backgroundColor: ["red", "yellow", "green", "blue", "purple"]
                }
                 <% end %>　// ここ追加してみました
                    ]
        },
```

③controller上で平均値を指す変数を定義、

```ruby
  @items.each do |item|
  @ratesum= item.reviews.sum(:rating1)  # カラムのデータの合計値 
  @ratecount= item.reviews.count(:rating1) # カラムのデータ個数
  @rateavg = @ratesum.to_f/@ratecount
  end
```
chart.jsの方で以下のように記載すると、なぜか一番最後のitemの平均値が一番上のitemに反映されました。
それ以外はまっさらです。

```html
data: {
            labels: <%== @itemname %>, 
            datasets: [      
 
                {
                        data: [<%= @rateavg  %> ], 　// ここに追加してみました
                    backgroundColor: ["red", "yellow", "green", "blue", "purple"]
                }

                    ]
        },
```

④以下をcontrollerで定義、gon.rating1をchart.jsのdataに代入してみましたが、これだと配列の中から順番に数値が表示されるようです。以下の場合、平均値をどう出せばいいのかわかりませんでした。

```ruby
// 以下で定義
  reviews = Review.all
  @rating1 = reviews.map { |review| review.rating1 }
  gon.rating1 = @rating1
```

