質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.38%

javascriptコードを実行して警告ダイアログを表示させたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 349

wesker.alice

score 45

前提・実現したいこと

Ruby、Ruby on rails を某参考書をもとに勉強しています。
JavaScriptコードが実行されると、ブラウザ上でHello,world!という警告ダイアログが表示されるとのことですが、http://localhost:3000/usersにアクセスするとエラーが出て解決できずにいます。
実現したい事はエラーを直して警告ダイアログを表示したのちに、Hello,world!の文字が太文字で表示されている状態です。
参考書を見たり、ネットで調べてみたのですが、解決せず、ここにて質問させて頂きました。

発生している問題・エラーメッセージ

http://localhost:3000/usersにアクセスすると以下のメッセージが出てきます。
Sprockets::Rails::Helper::AssetNotFound in Users#index
Showing /Users/(ユーザー名)/Users/sample/app/views/users/index.html.erb where line #2 raised:

The asset "users.js" is not present in the asset pipeline.
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Extracted source (around line #2):

<%= stylesheet_link_tag 'users' %>
<%= javascript_include_tag 'users' %>

<div class ='users-index'><%= @Hello =%></div>


ターミナルには以下の文章が出ています。

ActionView::Template::Error (The asset "users.js" is not present in the asset pipeline.):
    1: <%= stylesheet_link_tag 'users' %>
    2: <%= javascript_include_tag 'users' %>
    3: 
    4: <div class ='users-index'><%= @Hello =%></div>

app/views/users/index.html.erb:2
app/controllers/users_controller.rb:5:in `index'

該当のソースコード

app/views/users/index.html.erb

<%= stylesheet_link_tag 'users' %>
<%= javascript_include_tag 'users' %>

<div class ='users-index'><%= @Hello =%></div>


app/assets/stylesheets/users.scss

// Place all the styles related to the users controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.users-index {
    font-weight: boid;
}


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( users.js users.css )

試したこと

config/initializers/assets.rbの一番下の「Rails.application.config.assets.precompile += %w( users.js users.css )」を# なしで保存しrails s でサーバーを起動し、http://localhost:3000/usersにアクセスしたところエラーが出て困っています。
書籍にはusers.coffeeが書いてあったものの、見当たらないので、app/assets/の下にjavascriptsフォルダを作成し、その中に「users.coffee」を新規作成しました。

users.coffee

alert('Hello, world!')


と記述保存をし、http://localhost:3000/usersを再読み込みしてもエラーは変わらずでした。

ちなみに「javascriptsフォルダ」はapp/javascriptとして既に別に存在していましたが、書籍の通り、app/assets/javascripts/users.coffee で半ば荒技で新たに作る形で記述をしてみました。
もしかしたら2重でエラーの原因になってしまうかもですが、試してみました。

しかし、エラーが解決しないところをみると、問題は当該のソースコードに問題があるのではと思うのですが、現時点で分からなかったので質問させていただきました。

どなたかcssが読み込まれ、表示する方法が分かる方いましたら、よろしくお願いいたします。

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

MacOS Catalina ver10.15.3
Ruby ver2.6.3
Rails ver6.0.2.1
VS Code ver1.42.1

書籍の環境
windows 10 Pro
Ruby ver2.4.1
Ruby on Rails ver5.1.2

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

書籍にはusers.coffeeが書いてあったものの、見当たらないので、app/assets/の下にjavascriptsフォルダを作成し、その中に「users.coffee」を新規作成しました。

CoffeeScriptのコンパイラ(coffee-script)は入れましたか? Rails 6ではデフォルトで入っていないかもしれないです。


そして、Rails 6ではJavaScriptの標準がWebpackerに切り替わっています。app/assets/以下に書くのは、古いやり方です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/16 21:06

    ご回答ありがとうございます。
    gem install -g coffee-script
    で入力してみましたが、下記エラーが出てきました。
    ERROR: While executing gem ... (Errno::ENOENT)
    No such file or directory @ rb_sysopen - coffee-script

    ---------------------------------------
    ネットで調べ、gemに何か問題があるのではと思い、ターミナルで
    sudo gem update
    rbenv install
    brew update
    brew upgrade ruby-build
    を行いました。

    その後、
    gem install -g coffee-script
    を再び打ち込んでみましたが同様のエラーのままでした。
    rails sでサーバー起動後、初期とは違うエラーが出ました。

    LoadError in UsersController#index
    cannot load such file -- coffee_script

    Extracted source (around line #23):
    def require_with_bootsnap_lfi(path, resolved = nil)
    Bootsnap::LoadPathCache.loaded_features_index.register(path, resolved) do
    require_without_bootsnap(resolved || path)
    end
    end

    #23 require_without_bootsnap(resolved || path)
    この1文に問題があるとのことで、調べてみましたがよく分からず、rails sを起動する際に、
    /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin19/etc.bundle: warning: already initialized constant Etc::SC_THREAD_PRIO_INHERIT
    のような文が大量に出るようになってしまいました。

    キャンセル

  • 2020/03/16 21:15

    Railsで使うgemは、Bundler経由で入れます。

    Gemfileに「gem 'coffee-script'」と書いて、bundle installを行ってみましょう。

    キャンセル

  • 2020/03/16 21:36

    ご回答ありがとうございます!
    無事警告を表示させ、太文字のHello,world!がページに表示させる事ができました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る