Nodeのフロント側（HTMLファイル内）でjQueryを使いたい

NodeにExpressをインストールした環境で、Webアプリケーションを作ろうとしております。Node_moduleにjQueryをインストールし、ViewsフォルダのIndex.ejsファイル内でjQuertを利用しようと試行錯誤しています。
しかし、Node_moduleからjQueryを呼び出すことができず困っております。初歩的な質問で恐縮ですが、お知恵を御借りさせてください。

具体的には、ボタンを押すと「テスト成功」という文字が表示されるようなページを作ろうとしています。コードは以下のとおりです。

【Index.ejs】

<head>
<style>
h2 {display: none;}

.btn {
  display: inline-block;
  cursor: pointer;
  padding: 12px 80px;
  background-color: #5dca88;
  box-shadow: 0px 5px #279C56;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
}

.btn:active {
  position: relative;
  top: 5px;
  box-shadow: none;
}
</style>
</head>

<body>
<h1>テスト</h1>
<div class="btn" id="show-text"> ボタン </div>

<h2 id="text">
テスト成功
</form>
</h2>


<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script>
$(function() {
  $('#show-text').click(function() {
    $('#text').show();
  });
});
</script>
</body>

またコードが間違っていないか確かめるために、<script src="../node_modules/jquery/dist/jquery.min.js"></script>を、<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>へ書き換えました。
そうする動いたため、やはりjQueryの読み込みに失敗しているのではないかと考えています。
尚、<script src="http://【利用しているドメイン】/jquery.min.js"></script>も試してみましたが動きませんでした。。

どうぞよろしく御願い致します。

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

回答1件

ベストアンサー

node.jsのexpress staticの部分をどう設定しているかでURLが変わります
例

app.use(express.static(__dirname + 'web'));

などと設定していると思いますが、
このexpress.staticなどで設定しているところにjquery.min.jsを入れてみてsrcを

としてみてください

http://expressjs.com/ja/starter/static-files.html

投稿2016/05/30 08:19

date

総合スコア1820

fukurou

2016/05/30 08:32

アドバイスを下さりありがとうございます。大変助かります。確認しましたところ、express staticの部分は以下のように設定しておりました。 app.use(express.static(path.join(__dirname, 'public'))); そこでnode_moduleに入っているjquery.min.jsファイルを、 publicフォルダ内にコピー致しました。その後、以下で試してみましたがまだ動かないようでございます。 <script src="http://【利用しているドメイン】/jquery.min.js"></script> 何度も恐縮ですが、アドバイス頂けますと幸いです。

fukurou

2016/05/30 08:34

【利用しているドメイン】に設定しているポート番号（:3000）を追加すると動きました。迅速に回答頂きありがとうございました。

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