jQueryがうまく反映しない。

前提・実現したいこと

「ボタンを押すと下に文が表示される(fadeInメソッドを使ってアニメーションをつける)」プログラムを作っています。

ここでは、Node.jsを導入した後、ポート番号を使ってapp.jsファイルを実行するとサーバが呼び出され、ejsファイルにアクセスするようにしています。
アクセスに成功すると、ejsファイルの実行結果が画面表示されるのですが、
CSSが反映されたものの、"ボタンをいくら押してもなかなか下の文が出てきません"。
jQueryで作成したファイルが正しく反映されていないかと思われます。

ボタンを押すとjQueryファイルが正しく反映するための対処方法を教えていただけると嬉しいです。
宜しくお願い致します。

該当のソースコード

js
1//app.js　　ejsファイルにアクセスするためのサーバ呼び出し
2const express = require('express');
3const app = express();
4
5app.use(express.static('public'));
6
7app.get('/', (req, res) => {
8    res.render('sample.ejs');  //sample.ejs・・・画面表示用ファイル
9});
10
11app.listen(3000);

ejs
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Sample</title>
6    <link rel="stylesheet" href="/css/sample.css"> <!--CSSファイルお読み込み(publicからの相対パス)-->
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8  </head>
9  <body>
10    <div class="btn">文を表示</div>
11    <h1>Hello World!</h1>
12
13    <script src="sample.js"></script>  <!--sample.js・・・jQueryで作成したファイル-->
14  </body>
15</html>

css
1.btn {
2    display: inline-block;
3    cursor: pointer;
4    color: white;
5    background-color: rgb(0, 204, 255);
6}
7
8h1 {
9    display: none;
10}

jQuery
1//jQueryでアニメーションをつける
2$(function() {
3    $('.btn').click(function() {
4        $('h1').fadeIn();
5    });
6});

試したこと

Node.jsを導入せずにejsファイルではなくhtmlファイルのままで開くと、jQueryで作成したjsファイルが正しく反映されます。

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

ファイルの構成としては、
・①publicフォルダ、②viewsフォルダ、③サーバ呼び出しのためのjsファイル(app.js)、④jQueryのファイルはすべて同じルート上にある
・publicフォルダの中にcssフォルダ、さらにcssフォルダの中にcssファイルがあり、viewフォルダの中にはejsファイルがある
という構成になっています。

m.ts10806

2021/08/20 07:19

なかなかのというのは時間経ったら出てくるというニュアンスに見えますが、事実をありのまま表現いただけますか？

yambejp

2021/08/20 07:46

CSSやHTML自体は想定通りなのでしょうか？開発ツール上エラーなどはでていませんか？

somamos

2021/08/20 08:06

なかなかというのは、一度ボタンを押したけど反応がなく、繰り返し押してみたが全く文が出てきてくれないという状態がずっと続いている、という意味になります。 CSS、HTML自体が想定通り動作していることは確認済みです。ただ、開発ツールで確認したら「sample.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)」というエラーが出ておりました。読む限りでは、サーバがjQueryで作成するファイル(sample.js)を取得できていないということでしょうか。。。

yambejp

2021/08/20 08:36

404エラーであればファイルのおいてあるディレクトリとかが間違っているのかも

somamos

2021/08/20 09:19

ありがとうございます。ファイルのおいてあるディレクトリですが、そのファイルはディレクトリ構造でいうと最上位(public,viewsフォルダと同じところ)に位置しているんですね。・そのファイルをviewsフォルダの中に入れて、プログラムの最後部分のscriptタグのところを、パスを考慮してsrc="/views/sample.js"に直したり、・ファイルをそのままにして、src="/sample.js"としたりするなど試してみたのですが、実行してもやはり同じエラーが出てきます(汗)

yambejp

2021/08/20 09:22

CSSがただしく適用されているならためしに「/CSS」にsample.jsおいてみて <script src="/css/sample.js"></script> で参照できるか検証してみては？

somamos

2021/08/20 09:53

話していただいた通り、sample.jsをcssフォルダにおいてscriptタグのところを書き換えてみたら、想定通りの正しい動作になりました！！ありがとうございます、本当に助かりました！