Rubyの404 (Not Found)エラー

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Rubyでタイピングアプリを作っていますが、
タイピング機能を実装中に以下のエラーメッセージが発生しました。
画面にテキストが表示されていないので、テキストを表示出来るようにしたいです。

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

GET http://localhost:3000/posts/script.js net::ERR_ABORTED 404 (Not Found)

該当のソースコード

var p = document.getElementById('text');

//タイピングする文字列をここで用意しておく
var textLists = [
    'Hello World',
    'This is my App',
    'How are you?',
    'Hello Hello',
    'I love JavaScript!',
    'Good morning',
    'I am Japanese',
    'Let it be'
];

.texts-bar

  %p#text

  %script{:src => "script.js"}

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

rails 6.0.0
ruby 2.6.5p114

Comments

[asm]

script.jsをサーバー上のどこに設置しましたか？

[kotoya]

public/postsです。

Answer 1

Rubyで作っているのか、Railsで作っているのかがよくわからないですが・・・
http://localhost:3000/posts/ディレクトリにscript.jsファイルを置いてみてはいかがでしょうか？

Comments

[kotoya]

回答ありがとうございます。
Railsで作っています。
http://localhost:3000/posts/ディレクトリの場所がわからないです。

[kotoya]

public/postsに`script.js`ファイルを置くと、
以下のメッセージがターミナルに表示されました。

Started GET "/posts/new" for ::1 at 2020-09-26 08:56:39 +0900
Processing by PostsController#new as HTML
Rendering posts/new.html.haml within layouts/application
Rendered posts/new.html.haml within layouts/application (Duration: 0.1ms | Allocations: 15)
Completed 200 OK in 17ms (Views: 15.2ms | ActiveRecord: 0.0ms | Allocations: 9372)

このメッセージはどういう意味でしょうか？

[no1knows]

Railsで作っているならapplication.jsにコードを記載して、%script{:src => "script.js"}を削除すればよいかと思います。

[kotoya]

application.jsに以下のコードを記載しました。

//= require jquery
//= require rails-ujs
//= require_tree .

//script.jsの中身

var p = document.getElementById('text');

//タイピングする文字列をここで用意しておく
var textLists = [
'Hello World',
'This is my App',
'How are you?',
'Hello Hello',
'I love JavaScript!',
'Good morning',
'I am Japanese',
'Let it be'
];
var checkTexts = [];

createText();

function createText() {
//文字列をランダムに取得する
var rnd = Math.floor(Math.random() * textLists.length);

//前の文字列を削除してから次の文字列を表示する
p.textContent = '';

//文字列を1文字ずつに分解して、それぞれにspanタグを挿入する
checkTexts = textLists[rnd].split('').map(function(value) {
var span = document.createElement('span');

span.textContent = value;
p.appendChild(span);

return span;
});
}

document.addEventListener('keydown', keyDown);

function keyDown(e) {

//キーボードからの入力は「e.key」に格納されている
if(e.key === checkTexts[0].textContent) {
checkTexts[0].className = 'add-blue';

//0番目の配列要素を削除して、次の1文字を比較対象にする
checkTexts.shift();

//配列要素が空っぽになったら次の問題を出す
if(!checkTexts.length) createText();
}
}

すると、別のエラーが表示されました。

application.self-4f8606506b46aeebe7a0ee4c9ec664d9624db8e62b80c4ec4fc47b886ab886e1.js?body=1:27 Uncaught TypeError: Cannot set property 'textContent' of null
at createText (application.self-4f8606506b46aeebe7a0ee4c9ec664d9624db8e62b80c4ec4fc47b886ab886e1.js?body=1:27)
at application.self-4f8606506b46aeebe7a0ee4c9ec664d9624db8e62b80c4ec4fc47b886ab886e1.js?body=1:20

[no1knows]

そもそもの質問については解決できたという認識で良いでしょうか？

「質問に記載のない」コードのエラーは、表示されているようにCannot set property 'textContent' of nullなどを見直したりすればよいかと思います。
もしそれでも動かなければ別の質問を立てていただければと思います。

[kotoya]

失礼しました。
質問については解決できました。

別の質問を立てます。