JavaScriptがHTMLファイルに反映されない

前提・実現したいこと

HTMLのファイルにJavaScriptを反映させたい

同じような問題を抱えている人は多いようですが、異なる解決策の情報が多すぎて、どれを参考にしていいのか分からない状況です...

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

GET http://localhost:3000/javascript/question.js net::ERR_ABORTED 404 (Not Found)　questions:52

該当のソースコード

JavaScript
1【question.js】
2
3const quiz = [
4  {
5    question: 'What do you like to do？',
6    answers: [ 'I play soccer.', 'I really like to play tennis', 'I love it', 'Thanks'],
7    correct: 'I really like to play tennis'
8  }, {
9    question: 'What did you eat for breakfast this morning？',
10    answers: [ 'I love to eat', 'I am eating a banana', 'I ate an apple', 'I was eat sushi'],
11    correct: 'I ate an apple'
12  }, {
13    question: 'Are you happy to come here？',
14    answers: [ 'Why not ??', 'No, I am', 'I am here', 'You are happy'],
15    correct: 'Why not ??'
16  }, {
17    question: 'What are you doing now？',
18    answers: [ 'I was eating dinner', 'I eating an apple', 'I love to eat chocolate', 'I am having a toast for lunch'],
19    correct: 'I am having a toast for lunch'
20  }
21];
22
23const $window = window;
24const $doc = document;
25const $question = $doc.getElementById('js-question');
26const $buttons = $doc.querySelectorAll('.btn');
27
28const quizLen = quiz.length;
29let quizCount = 0;
30let score = 0;
31
32const init = () => {
33  $question.textContent = quiz[quizCount].question;
34  
35  const buttonLen = $buttons.length;
36  let btnIndex = 0;
37  
38  while(btnIndex < buttonLen){
39    $buttons[btnIndex].textContent = quiz[quizCount].answers[btnIndex];
40    btnIndex++;
41  }
42};
43
44const goToNext = () => {
45  quizCount++;
46  if(quizCount < quizLen){
47    init(quizCount);
48  } else {
49    // $window.alert('クイズ終了！');
50    showEnd();
51  }
52};
53
54const judge = (elm) => {
55  if(elm.textContent === quiz[quizCount].correct){
56    $window.alert('正解!');
57    score++;
58  } else {
59    $window.alert('不正解!');
60  }
61  goToNext();
62};
63
64const showEnd = () => {
65  $question.textContent = '終了！あなたのスコアは' + score + '/' + quizLen + 'です';
66  
67  const $items = $doc.getElementById('js-items');
68  $items.style.visibility = 'hidden';
69};
70
71init();
72
73let answersIndex = 0;
74let answersLen = quiz[quizCount].answers.length;
75
76while(answersIndex < answersLen){
77  $buttons[answersIndex].addEventListener('click', (e) => {
78    judge(e.target);
79  });
80  answersIndex++;
81}

HTML
1【JavaScriptを反映させたいHTMLファイル】
2
3  <div class="container">
4    
5    <div class="jumbotron mt-5">
6      <div class="d-flex justify-content-center">
7        <div id="js-question" class="alert alert-primary" role="alert">
8          A simple primary alert—check it out!
9        </div>
10      </div>
11      
12      <div id="js-items" class="d-flex justify-content-center">
13        <div class="m-2">
14          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
15        </div>
16        <div class="m-2">
17          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
18        </div>
19        <div class="m-2">
20          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
21        </div>
22        <div class="m-2">
23          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
24        </div>
25      </div>
26    </div>
27  </div>
28  
29  <script src="../javascript/question.js"></script>
30

JavaScript
1【application.js】
2
3require("@rails/ujs").start()
4// require("turbolinks").start()
5require("@rails/activestorage").start()
6require("channels")
7require("../good_answer")
8//= require jquery
9//= require_tree .

HTML
1【application.html.erb】
2
3<!DOCTYPE html>
4<html>
5  <head>
6    <title>RECTURE</title>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
10    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
12      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
13    <script src="https://kit.fontawesome.com/4fa5451ade.js" crossorigin="anonymous"></script>
14  </head>
15    <%= yield %>
16  </body>
17</html>

【ディレクトリとファイルの構造】

11/18(水) 18:39 更新

JavaScript
1【現在のエラー文】
2questions:1 GET http://localhost:3000/questions 500 (Internal Server Error)

JavaScript
1【index.html.erb】←JSを反映させたいファイル
2
3  <div class="container">
4    
5    <div class="jumbotron mt-5">
6      <div class="d-flex justify-content-center">
7        <div id="js-question" class="alert alert-primary" role="alert">
8          A simple primary alert—check it out!
9        </div>
10      </div>
11      
12      <div id="js-items" class="d-flex justify-content-center">
13        <div class="m-2">
14          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
15        </div>
16        <div class="m-2">
17          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
18        </div>
19        <div class="m-2">
20          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
21        </div>
22        <div class="m-2">
23          <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button>
24        </div>
25      </div>
26    </div>
27  </div>
28  
29  <%= javascript_pack_tag 'question'%>

11/18(水) 19:15 更新
現在、以下のようなエラーが出ています。

![]

maisumakun

2020/11/18 08:35

・フレームワークはRailsのようですが、バージョンはいくつでしょうか？・question.jsのファイルはどれでしょうか？

moto12

2020/11/18 08:37

・フレームワークはRailsのようですが、バージョンはいくつでしょうか？ → Rails は6.0.3.4になります。・question.jsのファイルはどれでしょうか？ → 今から修正して、question.jsファイルが分かるようにします！

moto12

2020/11/18 09:38

<%= javascript_pack_tag 'question' %> という記述を、JSを反映させたいファイル（index.html.erb）の中に記述したらいいのでしょうか？上記の通り実行した結果うまくいきませんでした。

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

回答2件

自己解決

yarnとwebpackerのインストール後、

application.jsに require("../question")を記述
index.html.erbに <%= javascript_pack_tag 'question'%>を記述

上記の通り実行後、JSが反映されました。

投稿2020/11/19 02:51

moto12

総合スコア15

app/javascript以下のファイルは、Webpackerでの処理が前提となっていて、特に設定しない場合は単体で参照することはできません。

app/javascript/packs以下に移せば、javascript_pack_tag 'question'で参照できます。

投稿2020/11/18 08:49

maisumakun

総合スコア146018

maisumakun

2020/11/18 09:41

「うまくいきませんでした」とは、具体的にどのような状態になっていますか？

maisumakun

2020/11/18 10:07

question.jsを移動した後に、サーバ再起動などは行ってみましたか？

moto12

2020/11/18 10:19

今、更新して画像をエラー画面の画像を貼りました。他のサイトでも調べて application.html.erbにある <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> を消したりもしてみたのですが、エラーは変わらず出ます。サーバーの再起動は行いましたがエラー文に変わりはないようです。

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

あなたの回答