常連

注目の的

自己紹介

フォロー機能を作成している最中なので、'フォローする','フォローを外す'ボタンをif文で表示させるようにしています。
しかし、フォローはできてもフォローを外すボタンを押したとたんにエラーが表示されました。
ちなみに、非同期ではありません。
まだ課題の言語化が下手くそですがお力添えをいただければと思います。
![イメージ説明](39f19b46551656f8693c05a8a84c9cc5.png)


< follows_controller.rb>
```ここに言語を入力
class FollowsController < ApplicationController

  def create
    @follow = current_user.follows.create(community_id:params[:community_id])
    redirect_back(fallback_location: root_path)
  end

  def destroy
    @community = Community.find(params[:community_id])
    @follow = current_user.follows.find_by(community_id: :@community_id)
    @follow.destroy
    redirect_back(fallback_location: root_path)
  end
end
```
<index.html.erb>
```ここに言語を入力
<div class="container">
    <div class="row">
      <% @communities.each do |community| %>
         <div class="col-3">
            <%= link_to community_path(community) do %>
               <div class="card" style="width: 14rem;">
                  <div class="card-image">
                    <%= attachment_image_tag community, :intro_image, fallback:"no-image.jpg", class:"rounded-top" %>
                  </div>

                  <div class="card-body">
                    <%= community.title %>
                  </div>
                  <% if current_user.present? && current_user.following?(community) %>
                    <%= link_to 'フォローを外す', community_follows_path(community), method: :destroy %>
                  <% else %>
                    <%= link_to 'フォロー', community_follows_path(community), method: :post %>
                  <%end%>
                  <%= community.follows.count %>
               </div>
            <%end%>
          </div>         　
       <%end%>
    </div>
</div>
```
<routes.rb>
```ここに言語を入力
Rails.application.routes.draw do


  devise_for :users
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  root to: "communities#index"
  resources :users

  resources :communities do
    resource :follows, only: [:create, :destroy]
  end



  resources :mypage, only: [:profile] do
    member do
      get 'profile'
      get 'posted_community'
      get 'followed_community'
    end
  end
end

```

[エラー]NoMethodError in FollowsController#destroy　　undefined method `destroy' for nil:NilClass

mampやxamppのhtdocsに入っているソースコード(フレームワーク、プロジェクトごと)をvscodeで編集したあと、
直ぐにターミナルからコミットpushし、logを細かく確認できる方法はありますか？
以下の方法であっているのか分かりません。


0. git管理下のディレクトリにgithubで作った空のリポジトリをcloneしました。

0. そこにmampのthdocsにあるプロジェクト(フレームワーク丸ごと)を置きました。するとそのフォルダはエイリアス状態になりました。

0. vscodeでファイルを編集保存し、コンソールでadd,commitしてlogも確認。

0. リモートにpushしようとしてもEverything up-to-dateと出るだけで,githubを確認しても変更が反映されていない

ちなみに、
- リスト空のリポジトリをクローンした時
- リストプロジェクトをディレクトリ入れた時
- リストREADME.mdを削除してみた時にpushした時
のlogはgithubにから読めます。

ソースコードを編集した時の変化,つまり、プロジェクトフォルダ内の細かい変化は反映されていないように見えます。
こういうものなのでしょうか？
やり方が素人発想なので、もっとスマートな管理方法がある気がしています。。。

**まとめると**
---
- リスト現在のフォルダの置き方は上記で良いのか？
- リストGitHub上でファイルの細かい変化を見れないのは当たり前なのか？
- リストもっとスマートな方法があるのですか？


といった感じです。
先輩方の知恵をお貸しください。どうぞよろしくお願いします。

mampやxamppのhtdocsに入れたソースコード(フレームワーク、プロジェクトごと)をgithubで管理する方法

### 前提・実現したいこと
前提
Ruby on Rails6にてアプリを作成
AWS Linux2　にてデプロイ
実現したいこと
AWSにてunicornを起動させたい
### 発生している問題・エラーメッセージ
```ここに言語を入力
ターミナル
/home/ec2-user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/unicorn-5.4.1/lib/unicorn/http_server.rb:205:in `pid=': Already running on PID:23103 (or pid=/var/www/Dr_tetsu/tmp/pids/unicorn.pid is stale) (ArgumentError)
        from /home/ec2-user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/unicorn-5.4.1/lib/unicorn/http_server.rb:137:in `start'
        from /home/ec2-user/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/unicorn-5.4.1/bin/unicorn_rails:209:in `<top (required)>'
        from /home/ec2-user/.rbenv/versions/2.5.1/bin/unicorn_rails:23:in `load'
        from /home/ec2-user/.rbenv/versions/2.5.1/bin/unicorn_rails:23:in `<main>'

```
### 該当するソースコード
```ここに言語
ターミナル
[ec2-user@********* Dr_tetsu]$ ps aux | grep unicorn
ec2-user 22797  0.0  0.2 117012  2300 pts/1    S+   12:55   0:00 less log/unicorn.stderr.log
ec2-user 23056 20.3 10.3 437808 104164 ?       Sl   13:23   0:01 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 23060  0.0  9.2 438852 93564 ?        Sl   13:23   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
ec2-user 23065  0.0  0.0 119436   908 pts/3    S+   13:23   0:00 grep --color=auto unicorn
[ec2-user@************ Dr_tetsu]$ kill 22797
[ec2-user@************ Dr_tetsu]$ ps aux | grep unicorn
ec2-user 23056  6.7 10.3 437808 104164 ?       Sl   13:23   0:01 unicorn_rails master -c config/unicorn.rb -E production -D
ec2-user 23060  0.0  9.2 438852 93564 ?        Sl   13:23   0:00 unicorn_rails worker[0] -c config/unicorn.rb -E production -D
ec2-user 23068  0.0  0.0 119436   984 pts/3    S+   13:24   0:00 grep --color=auto unicorn
[ec2-user@************* Dr_tetsu]$ kill 23056
[ec2-user@************* Dr_tetsu]$ ps aux | grep unicorn
ec2-user 23070  0.0  0.0 119436   960 pts/3    S+   13:24   0:00 grep --color=auto unicorn
[ec2-user@************** Dr_tetsu]$ RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D
[ec2-user@************** Dr_tetsu]$ RAILS_SERVE_STATIC_FILES=1 unicorn_rails -c config/unicorn.rb -E production -D
master failed to start, check stderr log for details
[ec2-user@*************** Dr_tetsu]$ less log/unicorn.stderr.log
```
### 試したこと（仮説）
[リンク内容](https://qiita.com/Coconew5/items/2f4ba976e58da9c1ec22)
エラー内容で調べると同じエラー内容のリンクを参照し実行しましたが
エラー解決に至りませんでした。
### 補足
初心者で言葉足らずで申し訳ありませんがご教示頂けたらと思い質問させて頂きました。
宜しくお願い致します。

AWSデプロイにてunicornの起動ができない

課題研究で音声認識によりwebサイトに飛べるプログラムを作成しています。そこで誰もが開きたいwebページを指定し、扱えるように単語帳を作ろうと考えています。
現状では
![イメージ説明](535e04493853ec821ccf315788416bc7.png)
このようにapp.jsのプログラムを変えなけらばなりません。

javascriptで音声認識を行いその結果をcsvファイルに書き込み、単語が書かれているもう一つのcsvファイルと比較します。そして、認識単語と用意していた単語とが一致していれば、隣に書いているurlに飛ぶようにしたいのですが方法はありませんか？
![イメージ説明](03b8ce8d6af74603cd79fed605f7f522.png)
図１　聞き取った単語

![イメージ説明](0ad2b0027b04c47fb8d83164a1b765fa.png)
図2　用意していた単語帳

javascriptでcsvファイルを読み込み正誤判断させたい

### 前提・実現したいこと

プログラミング初学者で、現在SNS風のアプリケーションのいいね機能を実装しようとしています。
完成形はボタンを押すと非同期で色が変わり、いいね数が変動する物を考えています。
現状がボタンを押すとデータベースとターミナルは動くのですが、ブラウザ上で反応がなく、
ブラウザの検証ツールに

### 発生している問題・エラーメッセージ

```
rails-ujs.js:216 POST http://localhost:3000/posts/1/likes/%23%3CLike::ActiveRecord_Relation:0x00007fd7a2d3eb00%3E 500 (Internal Server Error)
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax	@	rails-ujs.js:216
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.handleRemote	@	rails-ujs.js:652
(anonymous)
```

```
検証ツールのネットワーク

ActionView::SyntaxErrorInTemplate in LikesController#create

Encountered a syntax error while rendering template: check $("#like-button").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like post: @post}) %>");

```
のエラーメッセージが出ています。

デバッグやトラブルシューティングをどのように活用したら良いのか分からないまま手が止まってしまいました。


### 該当のソースコード

```
create.js.erb / destoroy.js.erb

$("#like-button").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like post: @post }) %>");
```

```
_like.html.erb

<% if user_signed_in? %>
        <% if post.like_user(current_user.id) %>
          <%= button_to post_like_path(like, post_id: post.id), method: :delete, id: "like-button-#{post.id}", remote: true do %>
          <i class="fas fa-star"></i>
            <span>
              <%= post.likes_count %>
            </span>
           <% end %>
        <% else %>
        <%= button_to post_likes_path(post), id: "like-button-#{post.id}", remote: true do %>
        <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
          <% end %>
        <% end %>
        <% else %>
          <i class="far fa-star"></i>
          <span>
            <%= post.likes_count %>
          </span>
<% end %>

```

```
likes_contoroller

class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: params[:post_id])
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
  end

  def destroy
    like = Like.find_by(user_id: current_user.id, post_id: params[:post_id])
    like.destroy
    @likes = Like.where(post_id: params[:post_id])
    @posts = Post.all
  end

  private

  def set_post
    @post = Post.find(params[:post_id])
  end
end

```

```
index.html.erb

<div id="like_button_<%= post.likes_count %>">
   いいね<%= render partial:'likes/like', locals: { post: post, like: @likes } %>
</div>

```
```
like.rb

class Like < ActiveRecord::Base
  belongs_to :post, counter_cache: :likes_count
  belongs_to :user
end

```

### 試したこと

https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2

こちらの記事を参考に実装を進めており、
ステータス５００にたどり着くまでに何度も自分なりにコードを書き換えておりました。
ステータス５００のエラーがどのような物かを調べ、検証ツールのネットワークを見れば原因がわかると学び覗いてみたのですが、どこがダメなのか分かりませんでした。

非同期通信　500 (Internal Server Error)

### 前提・実現したいこと

ウェブページで画面に入ったら数字をカウントアップさせるコードを書きたいのですが、アニメーションがスタートしません。

まず、カウントアップ自体は実現することが出来たのですが、それが画面の中に入ったときに発動する方法がわかりません。
カウントアップ自体は「.count」というクラスで操作しているのですが、画面に「.counted」が入ったとき「.count」を追加するというコードを書きました。

「.count」自体は正常に追加されているのですがカウントアップが始まりません。

発動条件に「.countが追加せれた時点で発動する」という条件を付けなければならないのか？と思い色々と試したのですが、javascriptはほぼ未経験のため分かりませんでした。お力添えを頂ければ幸いです、、、

### 発生している問題・エラーメッセージ

```
・「.count」が追加されてもアニメーションが始まらない
```

### 該当のソースコード

```jQuery
// 数時間とアップ
$(function(){
    var countElm = $('.count'),
    countSpeed = 10;

    countElm.each(function(){
        var self = $(this),
        countMax = self.attr('data-num'),
        thisCount = self.text(),
        countTimer;

        function timer(){
            countTimer = setInterval(function(){
                var countNext = thisCount++;
                self.text(countNext);

                if(countNext == countMax){
                    clearInterval(countTimer);
                }
            },countSpeed);
        }
        timer();
    });
});
```

```JavaScript
// 画面内に入ったらcountをクラスに追加
var boxes = document.querySelectorAll(".counted");
var boxesArray = Array.prototype.slice.call(boxes, 0);
var options = {
  root: null,
  rootMargin: "0px 50%",
  threshold: 0,
};
var observer = new IntersectionObserver(doWhenIntersect, options);
boxesArray.forEach(function (box) {
  observer.observe(box);
});

function doWhenIntersect(entries) {
  var entriesArray = Array.prototype.slice.call(entries, 0);
  entriesArray.forEach(function (entry) {
    if (entry.isIntersecting) {
      entry.target.classList.add("count");
    }
  });
}
```

```html
<!DOCTYPE html>
<html Lang="ja">

<meta charset="UTF-8">
<title>テンプレート</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
rel="stylesheet">
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
<link href="static/css/style_sp.css" rel="stylesheet">
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/main.js"></script>
</head>
<body>
<div class="count-sec">
	<div class="container">
		<div class="item-data">
			<span class="counted" data-num="100">0</span>万円
		</div>
	</div>
</div>
</body>


```



### 試したこと

参考にしたサイト一覧はこちらです。

■jQueryで数字をカウントアップしながら表示する方法
http://black-flag.net/jquery/20161108-6221.html

■スクロールアニメーションを実現！Intersection Observer APIの使い方
https://hsmt-web.com/blog/js-intersection-observer/

### 補足情報（FW/ツールのバージョンなど）

画面に要素が入ったらクラスを追加し、JQueryでアニメーションをスタートさせる

現在HTML，JQueryでおみくじアプリを作っており、その結果をtwitterに投稿する機能があるものを作っています。
[おみくじアプリ](https://k49977.github.io/omikuji/)

ここでやりたいこととして、**おみくじ結果の画像をサムネイルに反映させたいです。つまり、twitterのサムネイルを動的に変えたいです。** それについてアドバイスいただければと思います。
**詰まっているのはtwitterの強制クロールのやり方に関してです。**


現状として、
動的に変えるために、OGPの設定をHTML上でしていますが、それをJQueryで動的に変更するようにしています。おみくじ結果が出るたびに上書きしています。

 

     ```js
// metaのイメージを上書き
var imgUrl = 'https://k49977.github.io/omikuji/omikuji_files/img/icon'+ randNum +'.png';
$("#meta-img").attr('content',imgUrl);
```



　　
```html
<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<meta name="twitter:card" content="summary">
    		<meta name="twitter:site" content="@username">
    		<meta property="og:url" content="url">
    		<meta property="og:title" content="鬼滅の刃おみくじ">
    		<meta property="og:description" content="鬼滅の刃のおみくじです。今日の運勢を占ってみてね★">
    		<meta id="meta-img" property="og:image" content="https://k49977.github.io/omikuji/omikuji_files/img/icon0.png">
    		<title>おみくじ</title>
    		<link rel="stylesheet" href="./omikuji_files/omikuji.css">
    		
    		<script src="./omikuji_files/jquery.min.js" type="text/javascript"></script>
    		<script type="text/javascript" src="./omikuji_files/jquery.js"></script>
    		<script type="text/javascript" src="./omikuji_files/jQueryRotate.js"></script>
    	</head>
```
    

JQueryは問題なく、metaのog:imageのcontentを上書けています。

**ここからが詰まっている箇所で、**
**HTML自体は動的に変えられているのですが、Twitterのクロールの仕様なのか、変えたサムネイルがすぐに反映されません。**
そこで強制クロールをJQueryでできないか考えたのですが、その方法が見当たりません。
**twitterCardで強制クロールができるみたいなので、それをコード上でできればいけるのではないかと仮説を立てたりしています。**

**HTMLで動的に変わったサムネイル画像をTwitterに即時反映する方法はないでしょうか？**

よろしくお願い致します。

twitterのOGP（サムネイル画像）を動的に変えたい

### 前提・実現したいこと
投稿内容の編集機能を付けていてルーティングエラーが出てしまいました。
route.rbはresoucesでアクションを定義しているのでどこでエラーが出ているのかわかりません。

### 発生している問題・エラーメッセージ

```
Routing Error
No route matches [PATCH] "/prototypes"
Rails.root: /Users/pc名前/projects/アプリ名

Application Trace | Framework Trace | Full Trace
Routes
```

### 該当のソースコード

```
route.rb

Rails.application.routes.draw do
  
  devise_for :users

  root to: "prototypes#index"

  resources :prototypes do
    resources :comments, only: :create
  end

  resources :users, only: :show
  
end

edit.html.erb
<div class="main">
  <div class="inner">
    <div class="form__wrapper">
      <h2 class="page-heading">プロトタイプ編集</h2>
      <%= render partial: "prototypes/form" ,locals: { prototypes: @prototype }  %>
      <%# 部分テンプレートでフォームを表示する %>
    </div>
  </div>
</div>

_form.html.erb

<%= form_with model: @prototype, url: prototypes_path, local: true do |f|%>
  <div class="field">
    <%= f.label :title, "プロトタイプの名称" %><br />
    <%= f.text_field :title %>
  </div>

  <div class="field">
    <%= f.label :catch_copy, "キャッチコピー" %><br />
    <%= f.text_area :catch_copy, class: :form__text %>
  </div>

  <div class="field">
    <%= f.label :concept , "コンセプト" %><br />
    <%= f.text_area :concept, class: :form__text %>
  </div>

  <div class="field">
    <%= f.label :image, "プロトタイプの画像" %><br />
    <%= f.file_field :image %>
  </div>

  <div class="actions">
    <%= f.submit "保存する", class: :form__btn  %>
  </div>
<% end %>

prototypes.controller.rb

class PrototypesController < ApplicationController
  before_action :authenticate_user!
  before_action :move_to_index
  def index
   @prototypes = Prototype.all
  
  end

  def new
    @prototype = Prototype.new
  end
  
  def create
    @prototype = Prototype.new(prototype_params)
    if @prototype.save
      redirect_to root_path
    else
      render :new
    end
  end

  def destroy
    @prototype = Prototype.find(params[:id])
    if @prototype.destroy
      redirect_to root_path
    end
  end
 
  def show
    @prototype = Prototype.find(params[:id])
    @comment = Comment.new
    @comments = @prototype.comments
  end

  def edit
    @prototype = Prototype.find(params[:id])
  end

  def update
    @prototype = Prototype.find(params[:id])
    if @prototype.update(prototype_params)
      redirect_to  prototype_path
    else
      render :edit
  end
  

end
  
 private
  def prototype_params
    params.require(:prototype).permit(:title,:image,:catch_copy,:concept).merge(user_id: current_user.id)
  end
  def move_to_index
    unless user_signed_in?
      redirect_to action: :index
    end
  end
end

```

### 試したこと

コントローラーのupdateアクションに飛んでないかなど考えコメントアウトなどしてみましたが
エラー文が変わらないことからやはりroute.rbでのエラーだと思います。
よろしくお願いします。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Routing Error No route matches [PATCH] "/prototypes"を解決したい。

こちらのサイトに独学でXDから模写したものをあげています。

https://hiroyukitakase.github.io/contact.html

contactページをデベロッパーツールで横幅を375px以下にして見てもらうと分かりますが、

scrollという文字と画像を境に変わる縦棒を置いてあります。

仕様では、おそらく画像を境に白黒が反転するんだと思いますが、方法が分からなかったので、目視で白黒を変えて配置しました。

しかし、写真のheightは画像幅に応じて増減するので、その増減に応じてスクロールバーの縦棒の白黒の境がずれてしまいます。

こういったスクロールバー？を置く簡潔な方法はあるのでしょうか？

画像を境に変えるなら、下の記事のようなものもありますが、

https://webkore.site/text-split/

こちら（http://mr-mr.jp/）のlive the lifeのようにできれば、アニメーションの幅が広がるのでbetterだと思いますが、こちらも方法が分かりません。

スクロールバーの実装のイメージとしては、おそらく後者のサイトのようにするのであって、前者の記事ではないと考えますが。。

このようなスクロールバーの実装方法がわかる方、これ試したらいけるよ、でもいいので詳しい方ご教授ください。

cssで画像を境に文字や要素の色を変えるには

ユーザー登録後、登録したメールアドレス宛に登録完了メールを送信するために下記コードを書いてみたのですが、うまくメールが送信されません。
どの箇所を修正すれば送信されるようになるのかご教示いただけませんでしょうか。
何卒よろしくお願いいたします。
(また、作成時はこちらのサイトを参考にいたしました(https://qiita.com/Yama-to/items/823baf26bba3193712ea))


こちらから下が私が記入しているコードになります。
↓development.rb
```
#--- 中略 ---#
config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    port:                 587,
    address:              'smtp.gmail.com',
    domain:               'smtp.gmail.com',
    user_name:            'メールアドレス',
    password:             'パスワード',
    authentication:       'login',
    enable_starttls_auto: true
  }
```

↓app/mailers/application_mailer.rb
```ここに言語を入力
class ApplicationMailer < ActionMailer::Base
  default from:     "メールテスト運営局",
          bcc:      "sample+sent@gmail.com",
          reply_to: "sample+reply@gmail.com"
  layout 'mailer'
end
```
↓app/mailers/sample_mailer.rb
```app/mailers/sample_mailer.rb
class SampleMailer < ApplicationMailer

  # Subject can be set in your I18n file at config/locales/en.yml
  # with the following lookup:
  #
  #   en.sample_mailer.send_when_update.subject
  #
  def send_when_update
    def send_when_update(user)
    @user = user
    mail to:      user.email,
         subject: '会員情報が更新されました。'
    end
  end
end
```
↓views/sample_mailer/send_when_update.html.erb
```ここに言語を入力
<!doctype html>
<html lang="ja">
<head>
  <meta content="text/html; charset=UTF-8" />
  <style type="text/css">
    h2 {
      color: #e7454a;
    }
    p hr {
      color: #2d2a24;
    }
  </style>
</head>
<body>
  <h2><%= @user.name %> 様</h2>
  <hr />
  <p>
    この度は「メールテスト運営局」を利用頂きましてありがとうございます。
  </p>
  <p>
    ユーザー名: <%= @user.name %><br />
  </p>
  <hr />
</body>
</html>
```
↓views/sample_mailer/send_when_update.text.erb
```ここに言語を入力
===============================
<%= @user.name %>様
===============================

この度は「メールテスト運営局」を利用頂きましてありがとうございます。
ユーザー名: <%= @user.name %>
```

↓controllers/users_controller.rb
```ここに言語を入力
#--- 中略 ---#
def update
    @user = User.find(params[:id])
    if current_user.id != @user.id
      redirect_to user_path(current_user)
    else
      if @user.update(user_params)
        redirect_to user_path(@user)
        flash[:notice] = "You have updated user successfully."
      else
        render :edit
      end
    end
    

    ↓今回追加した箇所は下記２行です
    current_user.update(update_params)
    SampleMailer.send_when_update(current_user).deliver
  end
```

【rails】登録完了メール送信の実装について

### 前提・実現したいこと
初心者です。
Ruby on railsのアプリ開発で投稿詳細画面(show)でログインしているユーザーで投稿（post)にいいねする非同期いいね機能(ajax)を実装しようとしています。
具体的には（いいねボタン）が表示されていて押すといいねが一つ増え、ボタンが切り替わって（いいねを消す）ボタンに代わり、いいねを消すボタンを押すといいねが一つ減りボタンが再度切り替わってまた（いいねボタン）が表示されるというものです。下記のように切り替わる感じです。

　　　　　　いいね（０）　　＜＝＞　　いいねを消す（１）



### 発生している問題・エラーメッセージ
しかし、（いいね）ボタンを押すと
POST http://localhost:3000/posts/20/likes 500 (Internal Server Error）
のエラーが出てしまいajaxでページが置き換わりません（いいねボタンを押す前のまま変化しません）、**ですがページをリロードすると表示は切り替わりいいねも追加されている状態です**。
逆に、いいねをすでにしている状態で（いいねを消す）を押すと正常に動作します（想定通り）。

いいね（０）押す　　＝＞　　いいねを消す（１）　エラーになる×

いいね（０）　　＜＝　押す　いいねを消す（１）　ちゃんと動作する〇


```
chromeデベロッパーツールのコンソール
POST http://localhost:3000/posts/20/likes 500 (Internal Server Error）

railsのログエラーメッセージ
ActionView::Template::Error (No route matches {:action=>"destroy", :controller=>"likes", :post_id=>#<Post id: 20, gauge: 1.3, tention: 42, review: "こめんと、...", gut_id: 2, user_id: 1,
 created_at: "2020-12-07 16:48:22", updated_at: "2020-12-08 05:50:47", racket_id: 4, fitness: 4.0, spin: 4.0, resilience: 4.0, technique_improvement: 4.0, technique_stability: 4.0>},
 missing required keys: [:id]):
    1: 
    2: <% if @post.liked_by?(current_user) %>
    3:   <%= link_to 'いいねを消す', post_like_path(@post), method: :delete, remote: true %><%= @post.likes.count %>
    4: <% else %>
    5:   <%= link_to 'いいね', post_likes_path(@post), method: :post, remote: true %><%= @post.likes.count %>
    6: <% end %>
  
app/views/likes/_like.html.erb:3:in `_app_views_likes__like_html_erb__2605293206596886979_69929699583020'
app/views/likes/create.js.erb:1:in `_app_views_likes_create_js_erb__1115950890599874688_69929699542820'
app/controllers/likes_controller.rb:8:in `block (2 levels) in create'
app/controllers/likes_controller.rb:6:in `create'
```
該当のソースコードを見ていただく前に下のほうの試したことを先に見ていただくとよいかと思います。

### 該当のソースコード

```ruby
app/config/routes.rb

Rails.application.routes.draw do
  resources :posts do
    resources :likes, only: [:create, :destroy]
  end

  devise_for :users, controllers: {
    registrations: 'users/registrations',
    sessions: 'users/sessions'
  }
  resources :users, only: [:index, :show]
  
  resources :rackets
  resources :guts
  root to: 'top#index'
end
```

```ruby
app/controllers/likes_controller.rb

class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: @post.id)
    respond_to do |format|
      format.html
      format.js { render 'create' }
    end
  end

  def destroy
    @like = current_user.likes.find_by(post_id: @post.id)
    @like.destroy
    respond_to do |format|
      format.html
      format.js { render 'destroy'}
    end
  end

  private

  def set_post
    @post = Post.find(params[:post_id])
  end
end

```

```ruby
app/models/like.rb

class Like < ApplicationRecord
  belongs_to :user
  belongs_to :post
end
```

```ruby
app/models/user.rb

  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  belongs_to :racket, optional: true
  has_many :post, dependent: :destroy
  has_many :likes
...
```

```ruby
app/models/post.rb

class Post < ApplicationRecord
  belongs_to :gut
  belongs_to :user
  belongs_to :racket
  has_many :likes

  validates :review, presence: true, length: { maximum: 500 }

...

  def liked_by?(user)
    likes.where(user_id: user.id).exists?
  end
end

```

```ここに言語名を入力
app/views/posts/show.html.erb

<h1 class="mt-3 mb-3">レビュー</h1>

<div id="like_<%= @post.id %>"><%= render partial: 'likes/like' %></div>

...
```

```ここに言語名を入力
app/views/likes/_like.html.erb

<% if @post.liked_by?(current_user) %>
  <%= link_to 'いいねを消す', post_like_path(@post), method: :delete, remote: true %><%= @post.likes.count %>
<% else %>
  <%= link_to 'いいね', post_likes_path(@post), method: :post, remote: true %><%= @post.likes.count %>
<% end %>

//上記を下記いいねボタンのみ記述したところ動作する
<%= link_to 'いいね', post_likes_path(@post), method: :post, remote: true %><%= @post.likes.count %>

//また、いいねを付けてある状態で下記いいねを消すボタンのみ記述したところ動作する。
<%= link_to 'いいねを消す', post_like_path(@post), method: :delete, remote: true %><%= @post.likes.count %>

//if文で分岐させずに両方を表示させたうえで確認するとやはりいいねを付けるボタンの時にエラーとなる
```

```ここに言語名を入力
app/views/likes/create.js.erb

$("#like_<%= @post.id %>").html("<%= j(render 'likes/like') %>");
```

```
app/views/likes/destroy.js.erb

$("#like_<%= @post.id %>").html("<%= j(render 'likes/like') %>");
```

```javascript
app/assets/javascripts/application.js

//= require Chart.min
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require bootstrap-sprockets 
//= require_tree .
```

```
                   Prefix Verb   URI Pattern                                                                              Controller#Action
               post_likes POST   /posts/:post_id/likes(.:format)                                                          likes#create
                post_like DELETE /posts/:post_id/likes/:id(.:format)                                                      likes#destroy
                    posts GET    /posts(.:format)                                                                         posts#index
                          POST   /posts(.:format)                                                                         posts#create
                 new_post GET    /posts/new(.:format)                                                                     posts#new
                edit_post GET    /posts/:id/edit(.:format)                                                                posts#edit
                     post GET    /posts/:id(.:format)                                                                     posts#show

...
```




### 試したこと
いいねを付けるときのrailsのエラーログを見て**No route matches {:action=>"destroy", :controller=>"likes", :post_id=>**...のところと**missing required keys: [:id]**との記載があるのですが、いいねを付けるときはpostリクエストでcreateアクションを呼んでいるはずなので:action =>"create"となるはずだと思い、試しにいいねボタンのみ実装し、いいねを消すボタンはソースコードから外したところ正常に動作しました。逆にいいねがある状態でいいねを消すボタンのみ実装の場合でも正常に動作しました。このことからどちらのボタンも単体では動作していると考えられるのですが、両方のボタンを_like.html.erbに記述すると500エラーが発生しNo route matches {:action=>"destroy", :controller=>"likes", :post_id=>...missing required keys: [:id]となります。

自分が思うにいいねを付けるとき意図したリクエストとなっていないからと考えているのですが原因がわかりません。
ご教授いただければ幸いです。



### 補足情報（FW/ツールのバージョンなど）
参考にしたサイト
[https://qiita.com/soehina/items/a68ab66da3ea1d260301](https://qiita.com/soehina/items/a68ab66da3ea1d260301)
[https://qiita.com/nozonozo/items/57709083838a7fadebcf](https://qiita.com/nozonozo/items/57709083838a7fadebcf)
[https://techtechmedia.com/favorite-function-rails/](https://techtechmedia.com/favorite-function-rails/)

バージョンなど
ruby '2.6.3'
gem 'rails', '~> 5.2.4', '>= 5.2.4.3'

gem 'bootstrap'
gem 'jquery-rails'
gem 'sassc-rails'

gem 'rails-i18n', '~> 5.1' 

gem 'devise'
gem 'kaminari'

gem 'chart-js-rails'　//投稿詳細画面にレーダーチャートを表示させています
gem 'gon'               //DBのデータをjsに受け渡すのに使用しています。

Railsいいね機能でいいねを押した後ページをリロードしないと表示されません

ご回答いただけるとありがたいです。よろしくお願いします！

### 実現したいこと
フォロー中のユーザーの全ツイートを新しい順にトップページに表示したいです。

### 現状
フォロー中のユーザーの全ツイートをトップページに表示させることはできていますが、順番がユーザー登録の順番です。
例えば
１、User1がtweet1を投稿
２、User2がtweet2を投稿
３、User1がtweet3を投稿

1から3の順で投稿していても、表示される順は上から
２、User2がtweet2を投稿
３、User1がtweet3を投稿
１、User1がtweet1を投稿
になります。

### 該当のソースコード
```model
#relationship
class Relationship < ApplicationRecord
  belongs_to :user
  belongs_to :follow, class_name: 'User'

  validates :user_id, presence: true
  validates :follow_id, presence: true
end

#tweet
class Tweet < ApplicationRecord
  belongs_to :group
  belongs_to :user
  has_one_attached :image

  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    self.image.attached?
  end
end

#user
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  validates :nickname, presence: true

  has_many :group_users
  has_many :groups, through: :group_users
  has_many :tweets
  has_many :owned_groups, class_name: "Group"

  has_many :relationships
  has_many :followings, through: :relationships, source: :follow
  has_many :reverse_of_relationships, class_name: 'Relationship', foreign_key: 'follow_id'
  has_many :followers, through: :reverse_of_relationships, source: :user

  def follow(other_user)
    unless self == other_user
      self.relationships.find_or_create_by(follow_id: other_user.id)
    end
  end

  def unfollow(other_user)
    relationship = self.relationships.find_by(follow_id: other_user.id)
    relationship.destroy if relationship
  end

  def following?(other_user)
    self.followings.include?(other_user)
  end
  
end
```
```controller
#relationships
class RelationshipsController < ApplicationController
  before_action :set_user, only: [:create, :destroy]

  def index
    @followings = current_user.try(:followings)
  end

  def create
    following = current_user.follow(@user)
    following.save
    redirect_to @user
  end

  def destroy
    following = current_user.unfollow(@user)
    following.destroy
    redirect_to @user
  end

  def following
    @user = User.find(params[:id])
    @followings = @user.followings 
  end

  def follower
    @user = User.find(params[:id])
    @followers = @user.followers
  end

  private

  def set_user
    @user = User.find(params[:follow_id])
  end

end
```
```view
#relationships#index
(省略)
<% @followings.each do |following| %>
  <% following.tweets.order("created_at DESC").each do |tweet| %>
    <div class="tweet">
(省略)
```

###試したこと
```controller
#relationships
  def index
    @followings = current_user.try(:followings).order("created_at DESC")
  end
```
同じ結果になる　＋　ログアウトしたら以下のエラーが出る
```Error
NoMethodError in RelationshipsController#index
undefined method `order' for nil:NilClass
```

以上になります。ご助言いただけると幸いです。

フォロー中のユーザーの全ツイートを新しい順に表示

運営しているサイトをGoogleなどで検索したときに出てくるタイトルしたの説明文がサイト内のコンテンツと全く関係のない説明文が出てきて困っています。
サイト自体は猫を紹介しているサイトなのですが、

AWS-Solutions-Architect-Professional-KR Practice Training - AWS-Solutions-Architect-Professional-KR Free Download & AWS-Solutions-Architect-Professional-KR Updated Torrent, Amazon AWS-Solutions-Architect-Professional-KR Valid ...

このような英語の説明が出ています。
検索すると全く関係のないよくわからない商品の説明文のようです。

以下がサイト情報です。
ロイヤルキティ猫舎
https://roycat28.com/
検索時
https://www.google.co.jp/search?sxsrf=ALeKk031IjCQFH3-HAG2gyBJQWR8k7yWSg%3A1607398152614&source=hp&ei=CPPOX8HxIszZhwOfl4XYDA&q=%E3%83%AD%E3%82%A4%E3%83%A4%E3%83%AB%E3%82%AD%E3%83%86%E3%82%A3%E7%8C%AB%E8%88%8E&oq=%E3%83%AD%E3%82%A4%E3%83%A4%E3%83%AB%E3%82%AD%E3%83%86%E3%82%A3%E7%8C%AB%E8%88%8E&gs_lcp=CgZwc3ktYWIQAzIECCMQJzIGCAAQBRAeOhAIABCxAxCDARCxAxCDARBDOgoIABCxAxCxAxAEOgQIABBDOgQIABAEOgoIABCxAxCxAxBDOggIABAFEAQQHjoGCAAQBBAlUOsIWNwlYO8naABwAHgAgAHDAYgBoRWSAQQwLjIwmAEAoAEBqgEHZ3dzLXdpeg&sclient=psy-ab&ved=0ahUKEwjBlZbfuL3tAhXM7GEKHZ9LAcsQ4dUDCAg&uact=5

原因が分かる方はいらっしゃいますでしょうか？
よろしくお願いします。

■追記
ご回答いただいた皆様ありがとうございます。
各回答を参考に色々試していたところKazuhiroHatanoさんのおっしゃるGoogle Search ConsoleにてGoogleがクロールしたコードが確認できました。それがどうもおかしいようでWordPress内を色々と探っていたところ.htaccessに変な記述がありこれが原因のようです。以下がコードです。
```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(torrent|new|static|page|demo|site)-(.*) index.php?$1=$2 [L]
</IfModule>

DirectoryIndex index.php
#これ以下は普通のWordPressの記述
```
これを削除すると正常にトップページが表示されるようなのですがWordPressのダッシュボードにログインした途端に再度書き換えられてしまします。これは完全にハッキングされているで間違いないでしょうか？
また、こうなってしまった場合の対処法を教えていただけると助かります。

よろしくお願いします。

ホームページを検索したときのサイト説明がおかしい

FactoryBotを用いて設定していたのですが、FactoryBot.build(:user)を打っても全部からのままです。
どうしたら値が代入されますでしょうか？(Faker,gimeiはインストール済み)


```ここに言語を入力
factories/users.rb

FactoryBot.define do
  factory :user do
    nickname  {Faker::Name.initials}
    email     {Faker::Internet.free_email}
    password  {Faker::Internet.password(min_length: 6)}
    password_confirmation {password}
    family_name {Faker::Name.initials}
    name {Faker::Name.initials}
    family_namekana {Gimei.last.katakana}
    namekana {Gimei.first.katakana}
    birth { Faker::Date.birthday}
  end
end
```
```ここに言語を入力
 models/user.rb

 devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
         
         has_many :items
         has_many :product_purchases
         
         with_options presence: true do
         validates :nickname
         validates :name, format: {with: /\A[ぁ-んァ-ン一-龥]/, message: "Full-width characters"}
         validates :family_name, format: {with: /\A[ぁ-んァ-ン一-龥]/, message: "Full-width characters"}
         validates :namekana, format: {with: /\A[ァ-ヶー－]+\z/, message: " Full-width katakana characters"}
         validates :family_namekana, format: {with: /\A[ァ-ヶー－]+\z/, message: "Full-width katakana characters"}
         validates :encrypted_password,:password,length:{minimum:6},format:{with: /(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}/, message: "Include both letters and numbers"}
         validates :birth
        end
        

end
```

```ここに言語を入力
ターミナル

irb(main):001:0> FactoryBot.build(:user)
   (4.1ms)  SET NAMES utf8,  @@SESSION.sql_mode = CONCAT(CONCAT(@@sql_mode, ',STRICT_ALL_TABLES'), ',NO_AUTO_VALUE_ON_ZERO'),  @@SESSION.sql_auto_is_null = 0, @@SESSION.wait_timeout = 2147483
=> #<User id: nil, nickname: nil, email: "", family_name: nil, name: nil, family_namekana: nil, namekana: nil, birth: nil, created_at: nil, updated_at: nil>
irb(main):002:0> FactoryBot.create(:user)
Traceback (most recent call last):
        1: from (irb):2
ActiveRecord::RecordInvalid (Validation failed: Email can't be blank, Password can't be blank, Password is too short (minimum is 6 characters), Password Include both letters and numbers, Nickname can't be blank, Name can't be blank, Name Full-width characters, Family name can't be blank, Family name Full-width characters, Namekana can't be blank, Namekana  Full-width katakana characters, Family namekana can't be blank, Family namekana Full-width katakana characters, Encrypted password can't be blank, Encrypted password is too short (minimum is 6 characters), Encrypted password Include both letters and numbers, Birth can't be blank)
irb(main):003:0> FactoryBot.build(:user)
=> #<User id: nil, nickname: nil, email: "", family_name: nil, name: nil, family_namekana: nil, namekana: nil, birth: nil, created_at: nil, updated_at: nil>

```


**試したこと**

バリデーションエラーとターミナルに記述されているのでmodels/user.rbを確認し、optional: trueをバリデーションカラムに追記した。

FactoryBot設定 ユーザー情報

### 前提・実現したいこと

記事とタグのテーブルがあります
「記事は3件以上」という条件をクリアして、タグを取得したいです

### 該当のソースコード
・記事のテーブルとしてcontentsがあります
・タグのテーブルとしてtagsがあります
・記事が持つタグのテーブルとしてtag_relationsがあります

```sql
-- 記事
CREATE TABLE contents
    (`ID` int, `user_ID` int)
;    
INSERT INTO contents
    (`ID`, `user_ID`)
VALUES
    (1,  10),
    (2,  20),
    (3,  30),
    (4,  10),
    (5,  30),
    (6,  40),
    (7,  10),
    (8,  50),
    (9,  10),
    (10, 20),
    (11, 30),
    (12, 50),
    (13, 50),
    (14, 60),
    (15, 30),
    (16, 10),
    (17, 50),
    (18, 30),
    (19, 40),
    (20, 10)
;

-- タグ
CREATE TABLE tags
    (`ID` int, `tag_name` varchar(100))
;    
INSERT INTO tags
    (`ID`, `tag_name`)
VALUES
    (1, 'タグ1'),
    (2, 'タグ2'),
    (3, 'タグ3'),
    (3, 'タグ4'),
    (3, 'タグ5'),
    (3, 'タグ6')
;
-- タグリレーション
CREATE TABLE tag_relations
    (`tags_ID` int, `service_id` int, `kind_id` int, `contents_ID` int )
;    
INSERT INTO tag_relations
    (`tags_ID`, `service_id`, `kind_id`, `contents_ID` )
VALUES
    # contents_ID=1が、tag_ID=1とtag_ID=2を持っている
    (1, 1, 1, 1),  (2, 1, 1, 1),
    # contents_ID=2が、tag_ID=1を持っている
    (1, 1, 1, 2),
    # contents_ID=4が、tag_ID=1とtag_ID=3とtag_ID=4を持っている
    (1, 1, 1, 4),  (3, 1, 1, 4),  (4, 1, 1, 4),
    # contents_ID=5が、tag_ID=5を持っている
    (5, 1, 1, 5),
    # contents_ID=8が、tag_ID=1を持っている
    (1, 1, 1, 8),
    # contents_ID=9が、tag_ID=2とtag_ID=4を持っている
    (2, 1, 1, 9),  (4, 1, 1, 9),
    # contents_ID=10が、tag_ID=2とtag_ID=4とtag_ID=6を持っている
    (2, 1, 1, 10), (4, 1, 1, 10), (6, 1, 1, 10)
;
```
そして実現したいことのために書いたのはこちらのコードです
「記事は3件以上」という条件を
「HAVING ((Count(*))>=3)」で表現しているつもりです

```sql
select tags_ID, Count(*) AS そのタグを持つcontents_IDの件数
from tag_relations
where kind_id = 1 AND service_id = 1
group by contents_ID
having((Count(*))>=3)
```

### 現在の値
上記コードによって得られる値は次のようになります
|tags_ID|そのタグを持つcontents_IDの件数
|:--:|:--:|
|1|3|
|2|3|

###目的の値
目的はこのような値です
tag_ID=1を持つのは4件
tag_ID=2を持つのは3件
tag_ID=4を持つのは3件
他は「記事は3件以上」に合致しないので取得されず、レコードは次の3件としたいです
|tags_ID|そのタグを持つcontents_IDの件数
|:--:|:--:|
|1|4|
|2|3|
|4|3|

n件以上ある記事を持つタグを取得する（MySQL）

### 前提・実現したいこと
javascriptでimportを使わないでフォルダ参照をする方法が、
わからなくて困っています。


①　例えば以下の場合は、jsファイルを読込して、windowオブジェクトで参照できます。

(例)vee-validate.js

```javascript
// これができないので代替方法をとる
import { veeValidate } from "~/lib/vee-validate/dist/vee-validate.js";

// これだとwindowオブジェクトで参照できる
<script src="~/lib/vee-validate/dist/vee-validate.js"></script>
// ↓
var veeValidate = window.VeeValidate;
```

②　フォルダ指定をする場合の方法を調べていますが、解決できなく困ってます。
(例)　vee-validate/i18n/dist/local
※フォルダ以下は言語のjsonファイルです。

```javascript
// これができないので代替方法をとる
import { setlocale } from "~/lib/vee-validate/i18n/dist/locale/";

// 以下はNG、解決できませんでした。
<script src="~/lib/vee-validate/i18n/dist/locale/"></script>
```　　


②で試してみたこと
```javascript
// これは間違っているのでうまくいきませんでした。
<script type="module">
    import { setLocal } ="../lib/vee-validate/i18n/dist/locale/">;
</script>
```　　

このライブラリに限らず、importでフォルダ参照している場合を見かけるのですが、
javascriptでimportを使わないでフォルダ参照する方法として、どのような方法をとればよろしいでしょうか。

初歩的な質問ですみませんが、ご教授をお願いします。

javascriptでimportを使わないでフォルダ参照をする方法がわからなくて困っています。

```js
コード for(let i = 0; i < quizeSet.length; i++){
         
          for(var g = 0; g < 3; g++){
            h = `<li id="${i}-${g}-1">${quizeSet[i].answers[g]}</li>`;

 　　　　　　let id =  `document.getElementById("${i}-${g}-1")`
        　 console.log(id);

          }

          document.write(h);  
        };

        

　       id.addeventlisner("click",() => {
           window.alert("ok")
        });

```

コードの一部分しかのせていませんが、
上のようにfor文で作った30個のidにaddeventlisnerを付けたいのですが、つけることができません。
consoleで確認してみるとidは30こ取得できているようです。

質問としましては
idの取得の方法（もっといい方法があれば）と、複数のidに対するイベントの付け方を教えていただきたいです。


また、 let id =  `document.getElementById("${i}-${g}-1")`
をfor文の外でやろうとすると、iとjが定義されてませんとエラーが出てしまいます。
for文にはスコープがないと書かれていたので、なぜこのようなエラーが出でしまうのかわかりません。

何か解決策がありましたら、教えていただきたいです

for文で生成した複数のidにイベントがつけられない。

### 実現したいこと
フォーカス時、ラベル（Labelクラス）を除いた行全体の背景色を変えたい。

### 発生している問題
ラベルにフォーカスが当たると、ラベル背景色まで変わってしまう。
「Labelクラスを除く」指定をしたいが、それが分からない。


・フォーカス前
![イメージ説明](c5a70be6ada0ffa0f8885c4474e62511.jpeg)

・行にフォーカス時
![イメージ説明](9858ae89b4e626fdbc6f54040bcbe26b.jpeg)

・ラベル上にフォーカス時
![イメージ説明](997ce3862a9634bf054428cbc7c768cc.jpeg)


```css
.div-link > .link{
    text-decoration: none; 
    color: #333;
    &:not(.label) :focus,:hover {
        background-color: $backColor;
    }
}
```

```html
<ul class="vertical-posts">
        <li class="vertical-posts__item">
            <div class="div-link">
                <a class="link" href="#">
                    <div class="vertical-posts__header">
                        <p>事務局からのお知らせ</p>
                        <p><span class="label label-success fs14">キャンペーン</span>３時間前</p>
                    </div>
                    
                </a>
                
            </div>
            
        </li>
</ul>
```

### 試したこと
セレクタ指定が悪いかと思い、
.div-link > .link > .labelや
.div-link > .link > .vertical-posts__header >.label
など
:not(.label)の位置を変えたりしましたが、いずれも駄目でした。

先輩方教えて下さい。
宜しくお願いします。

特定クラスを除き、背景色を変えたい

rails6

### 発生している問題・エラーメッセージ

[https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7](https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7)
[https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27](https://qiita.com/rhiroe/items/4c4e983e34a44c5ace27)
上記を参考にしながらグループチャット機能を実装しようとしています。

create.js.erbファイルを作成したところ、create実行時に下記のエラーが出て先に進みません。
![イメージ説明](f8f8ad778c4fb6bd948fe13e3b2a7ec4.jpeg)
### 該当のソースコード
message.rbのselfに正常にデータが渡っている所までは確認できました。
```
routes.rb
 resources :recruits do
    resources :rooms, only: [:index, :create]
  end
```

```
index.html.erb
<%= form_with(model: @message, url: recruit_rooms_path, method: :post, class: 'needs-validation', html: {novalidate: false}) do |f| %>
  <div class="input-group">
    <%= f.text_field :content, class: "form-control", id: "message_content", placeholder: "メッセージを入力(200文字以内)" %>
    <%= f.submit "送信", class: "btn btn-primary input-group-append", id: "message-button" %>
  </div>
<% end %>
```

```
room_channel.rb
  def subscribed
    stream_from "room_channel_#{params['recruit']}"
  end
```
```
/*global $ messageContainer*/
import consumer from "./consumer";

document.addEventListener('turbolinks:load', () => { // js.erb 内で使用できるように変数を定義しておく
  window.messageContainer = document.getElementById('message-container');
  if (messageContainer === null) { // 以下のプログラムが他のページで動作しないようにしておく
      return;
  }

  consumer.subscriptions.create({ channel: 'RoomChannel', recruit: $('#message-container').data('recruit_id') }, {
    connected() {
      console.log("connected");
    },
      
    disconnected() {
    },
    
  // room_channel.rbでブロードキャストされたものがここに届く
    received: function(data) {
      console.log("received");
      // サーバー側から受け取ったHTMLを一番最後に加える
      messageContainer.insertAdjacentHTML('beforeend', data['message']);
    }
  });
});
```

```
rooms_controller.rb
def index
    @recruit  = Recruit.find(params[:recruit_id])
    @messages = Message.where(recruit_id: @recruit).includes(:user, :recruit).order(created_at: :desc).page(params[:page]).per(30)
    @message  = Message.new
    略
end

def create
  @message = current_user.messages.new(message_params)
  @message.recruit = Recruit.find(params[:recruit_id])
  @message.save
  ActionCable.server.broadcast 'room_channel', message: @message.template
end
```

```
message.rb
  belongs_to :recruit
  belongs_to :user
  
  validates :content,  presence: true, length: { maximum: 200 }
  
  # 投稿されたメッセージをメッセージ用の部分テンプレートでHTMLに変換
  def template
    ApplicationController.renderer.render partial: 'messages/message', locals: { message: self }
  end
```

```
create.js.erb
// フォームに入力した文字列を消去
console.log('create.js.erb');
document.getElementById('message_content').value = '';
```
#
create.html.erbファイルを作成すると、エラーは出なくなりますが何もないcreateページに移動します。
どうすればjs.erbが読み込めるのか、それとも他が原因なのか分かりません。アドバイス頂けると助かります

[Rails]チャット機能実装中 js.erbファイルが読み込めない

つぎのサイト（[リンク内容](http://codepen.io/zadvorsky/pen/PNXbGo)）
からソースをコピーして下記のサイトを制作しようとしています。

[リンク内容](https://aqua2020.sakura.ne.jp/new/)

うまく表示はされたのですが、three.min.jsファイルが500KBくらいあり
最初の表示にとても時間がかかってしまいます。
これ以外に、必要な画像や読み込んでいるcssなどは可能な限り圧縮しました。

three.min.jsはもともと圧縮されており、これ以上圧縮ができません。
表示をもう少し早くするためになにか良い方法はないでしょうか。


回答いただいたものから下記を行いました。
●CDNを利用する
●ドキュメントタイプ宣言がおかしかったため、修正
●画像やcssを圧縮

実際の本番サイトの読み込みのタイムラインは下記です。
![読み込みのタイムライン](105d6e613852e2938a5b6875f5c54499.png)

画面表示を速くするために、まだできそうなことがありましたらご教示いただけますと
幸いです。
どうぞよろしくお願いいたします。