RailsでJqueryを使用すると、言語処理ができない

次の環境でテストをしています。
OS : Ubuntu20.04
Ruby: 3.0.0
Ruby on Rails : 6.0.0
jQuery : 4.4.0

次の処理をしました。

jqueryは、次の方法でインストールしました。

　a)次のHPの「Download the compressed, production jQuery 3.5.1」ボタンより、jqueryをダウンロードする。
https://jquery.com/download/
ダウンロードしたパッケージは、「jquery-3.5.1.min.js」ファイルとなります。

jquery-railsは、次の方法でインストールしました。

　a)次のコマンドにより、jquery-railsの最新バージョンを確認しました。(4.4.0でした)
gem list -rea jquery-rails
b)次のコマンドにより、jquery-railsの最新バージョンを取得しました。
gem install jquery-rails -v 4.4.0

次の方法で、Railsアプリをインストールしました。

　a)次のコマンドにより、railsの新規アプリを作成する。
cd $HOME/DataRails_HTML
rails new jquery1 --webpack

　b)「$HOME/DataRails/jquery1/Gemfile」のパスにあるGemfileを次のように修正する。
（「gem 'jquery-rails'」の行を追加しました）

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.2', '>= 6.1.2.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'jquery-rails'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

　c)次のコマンドにより、依存パッケージをインストールしました。
cd $HOME/DataRails_HTML/jquery1
bundle exec rails webpacker:install

　d)次のコマンドにより、コントローラを作成しました。
cd $HOME/DataRails_HTML/jquery1
rails generate controller headtest6 index

　e)ビューのファイル「$HOME/DataRails_HTML/jquery1/app/views/headtest6/index.html.erb」を
次のように修正しました。

<%= javascript_include_tag "jquery-3.5.1.min.js" %>

<h1></h1>
<h2></h2>
<h3></h3>
  <div1>
	<p11></p11><br>
	<p12></p12><br>
	<p13></p13><br>
	<p14></p14>
	<hr>
	<hr>
  </div1>
<h3></h3>
  <div2>
	<p21></p21><br>
	<p22></p22><br>
	<p23></p23><br>
	<p24></p24>
	<hr>
	<hr>
  </div2>

<%= javascript_include_tag "headtest6.js" %>

　f)パス「$HOME/DataRails_HTML/jquery1/app/assets/javascripts」を作成し、
そのパスに1.で作成した「jquery-3.5.1.min.js」ファイルをコピーしました。

　g)パス「$HOME/DataRails_HTML/jquery1/app/assets/javascripts」に、ファイル「headtest6.js」を作成し、
次のように修正しました。

$("h1").text("見出しのテスト(6)");
$("h1").css( { "textAlign":"center", "backgroundColor":"red",
			"fontSize":"20px" } );

$("h2").text("文字の修飾");
$("h2").css( { "backgroundColor":"blue", "color":"white",
			"fontSize":"18px" } );

$("h3:eq(0)").text( "通常文字");
$("h3:eq(1)").text( "ボールド文字");
$("h3").css( { "color","white", "fontSize":"15px"} );
$("h3:eq(0)").css( "backgroundColor", "green" );
$("h3:eq(1)").css( "backgroundColor", "lime" );

$("div1").css( "color","red" );
$("div2").css( { "color":"blue", "fontWeight":"bold" } );

$("p11").text("通常の文字表示");

$("p12").text("イタリックの文字表示");
$("p12").css( "fontStyle", "italic" );

$("p13").text("アンダーラインの文字表示");
$("p13").css( "textDecoration", "underline" );

$("p14").text("(BLACKの文字表示)");
$("p14").css( "color", "black" );

$("p21").text("ボールドの文字表示");

$("p22").text("ボールド＋イタリックの文字表示");
$("p22").css( "fontStyle", "italic" );

$("p23").text("ボールド＋アンダーラインの文字表示");
$("p23").css( "textDecoration", "underline" );

$("p24").text("(BLACKの文字表示)");
$("p24").css( { "color":"black", "fontWeight":"normal" } );

$("hr").css( "borderWidth", "2px" );
$("hr:eq(0)").css( "borderColor", "aqua" );
$("hr:eq(1)").css( { "borderColor":"aqua", "borderStyle":"dotted" } );
$("hr:eq(2)").css( "borderColor", "fuchsia" );
$("hr:eq(3)").css( { "borderColor":"fuchsia", "borderStyle":"dashed" } );

　h)ファイル「$HOME/DataRails_HTML/jquery1/config/initializers/assets.rb」を次のように修正しました。
（最後の行を追加しました。）

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
Rails.application.config.assets.precompile += %w( jquery.min.js
						headtest6.js )

　i)次のコマンドを実行することにより、サーバーの起動をしました。
cd $HOME/DataRails_HTML/jquery1
rails server

　j)サーバーが起動した状態で、ブラウザから下記URLを入力しました。
http://localhost:3000/headtest6/index/
すると、ブラウザには次の画像が表示されました。

この画面を見てもわかるように罫線2本以外が表示されていません。

Windows10環境で同じ処理をした場合は、下図のように表示されています。

ちなみにUbuntu18.04の場合も成功しているのです。

皆さんにお聞きいたしますが、
1.僕の処理にどこが間違っていたのでしょうか？
2.Ubuntu20.04環境でJqueryの項目を表示するにはどのようにすればいいのでしょうか？

hide5stm

2021/04/21 14:16

ブラウザは何を使っているでしょうか? chromeであれば右クリックから「検証」で javascript のconsoleなどを見るとエラーが出ているかもしれないので、その辺りの情報もあると回答しやすいです。

FKM

2021/04/23 17:10

Ubuntu以外のRailsなどの環境は18.4と全く同じなんでしょうか？

Osat.Kaso

2021/04/24 12:26 編集

hide5stmさん、FKMさん、ありがとうございます。 Ubuntu20.04のバージョンは次の通りです。　Ruby: 3.0.0 　Ruby on Rails : 6.0.0 　jQuery : 3.5.1 　jQuery-Rails : 4.4.0 Ubunut18.04のバージョンは次の通りです。　Ruby: 2.6.3 　Ruby on Rails : 6.0.0 　jQuery : 3.4.1 　jQuery-Rails : 4.3.5 なお、どちらも、WebはFirefoxを使用していました。 Chromeで実行した時も同じエラーが発生しました。

Osat.Kaso

2021/04/26 01:18 編集

それと、hide5stmさんが話していたchromeでの検証も行いました。＜Consoleの項目＞　次のメッセージが表示される　　Uncaught SyntaxError: Unexpected token ',' ＜sourceの項目(jquery-3.5.1.min.source.jp)＞　次のメッセージが表示される　　ould not load content for http://localhost:3000/assets/jquery-3.5.1.min.source.js (Connection error: net::ERR_CONNECTION_REFUSED) 私の推測ですが、jQueryのバージョン3.5.1が怪しいと思われます。なので、次のことを試してみたいと思います。　1) jQueryを3.4.1に戻してみる。　2)現在の最新版の3.6.0にアップグレードしてみる。

FKM

2021/04/24 12:38

自分はキャメルケースで書いてるのが気になります。JQueryでcss制御するときは基本ケバブケースですので

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

回答1件

自己解決

FKMさん、ありがとうございました。
あなたが言われたように、キャメルケース⇒ケバブケースの修正をすると、成功しました。

$("h1").text("見出しのテスト(6)");
$("h1").css( { "text-align":"center", "background-color":"red",
			"font-size":"18px" } );

$("h2").text("文字の修飾");
$("h2").css( { "background-color":"blue", "color":"white",
			"font-size":"15px" } );

$("h3:eq(0)").text( "通常文字");
$("h3:eq(1)").text( "ボールド文字");
$("h3").css( { "color":"white", "font-size":"15px" } );
$("h3:eq(0)").css( "background-color", "green" );
$("h3:eq(1)").css( "background-color", "lime" );

$("div1").css( "color","red" );
$("div2").css( { "color":"blue", "font-weight":"bold" } );

$("p11").text("通常の文字表示");

$("p12").text("イタリックの文字表示");
$("p12").css( "font-style", "italic" );

$("p13").text("アンダーラインの文字表示");
$("p13").css( "text-decoration", "underline" );

$("p14").text("(BLACKの文字表示)");
$("p14").css( "color", "black" );

$("p21").text("ボールドの文字表示");

$("p22").text("ボールド＋イタリックの文字表示");
$("p22").css( "font-style", "italic" );

$("p23").text("ボールド＋アンダーラインの文字表示");
$("p23").css( "text-decoration", "underline" );

$("p24").text("(BLACKの文字表示)");
$("p24").css( { "color":"black", "font-weight":"normal" } );

$("hr").css( "border-width", "2px" );
$("hr:eq(0)").css( "border-color", "aqua" );
$("hr:eq(1)").css( { "border-color":"aqua", "border-style":"dotted" } );
$("hr:eq(2)").css( "border-color", "fuchsia" );
$("hr:eq(3)").css( { "border-color":"fuchsia", "border-style":"dashed" } );