69883


ActiveCableを使用し、非同期通信でチャットができるように実装をしています。  
初学者であるため、基本ができていないかもしれないのと、特にJavaScriptは知識が浅く調べても基本的な事すぎてなのか原因などが出てこないため、こちらで質問をさせていただきます。

下記のwebサイトを参考にし、実装を進めています。

[【Rails6】 Action CableでSlack風チャットアプリを作成 -
Qiita](https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7#4-3-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E6%8A%95%E7%A8%BF%E6%A9%9F%E8%83%BDajax)

その内の、[4.4 Action Cable の設定・確認  
](https://qiita.com/take18k_tech/items/00cc14c0eff45073ffc7#4-3-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E6%8A%95%E7%A8%BF%E6%A9%9F%E8%83%BDajax)

の部分でjs.erbを作成し`// フォームに入力した文字列を消去
document.getElementById('message_content').value =
''`の通りに記述をしたのですが、VSコード上では白文字の状態でアクティブにはなっていないようでした。  
これはajaxの導入などの時点で誤っているのか、他に必要な作業が事前にあったのかわからず困っております。

手順の中でBootstrap4の導入がありましたが、同じアプリにページネーション機能を実装した際に` <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">`を導入し、既に設定しているCSSが崩れてしまったので、その手順はスキップしあとで自身でCSSで装飾をしようと思っていました。

ですが、チャット送信画面で以下のようなエラーも出てきており、導入をしないのでいけないのか・・？と考えているのですが、どなたかお知恵を拝借できないでしょうか。

[![コンソールエラーメッセージ](https://i.stack.imgur.com/5Q37U.png)](https://i.stack.imgur.com/5Q37U.png)

因みにjQueryはapplication.jsに以下のように記述しております。

[code]

    require('jquery')
    require("@rails/ujs").start()
    require("turbolinks").start()
    require("@rails/activestorage").start()
    require("channels")
    
[/code]

どうぞよろしくお願い致します。


CC BY-SA 4.0
2020-08-26T02:35:28.260
69882
2020-08-26T05:59:13.257
2020-08-26T05:59:13.257
9008
41569
question
javascript ruby-on-rails vscode ajax erb
create.js.erbにjsコードを記述してもVSコード上で色が変わらない（無効な状態）：ActionCable


VSCode はなんでもかんでも検知して、いい感じにハイライトしてくる魔法のツールではありません。

VSCodeの設定方法や、拡張機能の使い方等をある程度学ばれるのがよいかと思います。

ダウンロード数が少ないですが、例えば下記を入れると `.js.erb` をハイライトできることを確認できました。  
<https://marketplace.visualstudio.com/items?itemName=ratismal.erb-types>

### 蛇足

蛇足ですが、こうなってくると、どの拡張機能が良いですか？と質問したくなってしまいますが、このような質問は
[買い物リスト](https://ja.meta.stackoverflow.com/questions/1381/x%E3%81%AE%E4%B8%80%E8%A6%A7%E3%81%8C%E7%9F%A5%E3%82%8A%E3%81%9F%E3%81%84-%E3%81%A8%E3%81%84%E3%81%86%E8%B3%AA%E5%95%8F%E3%81%AE%E5%82%BE%E5%90%91%E3%81%A8%E9%96%A2%E9%80%A3%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E3%81%AE%E5%AF%BE%E5%BF%9C)
と呼ばれ、スタックオーバーフローではよくない質問とされています。


CC BY-SA 4.0
2020-08-26T03:02:13.907
69883
2020-08-26T03:02:13.907
9008
69882
answer