bootstrapの読み込みscritタグでJQueryが動かなくなる

##問題
bootstrapを使用するために、body内に以下の記述をするのですが、
一つ目のJQueryに関してそうなscriptタグがあると、私が記述したJQueryが動作しなくなります。
これを消すと正常に動くようになるのですが、このscriptタグはどんな役割を持っているのでしょうか。

調べてもとりあえず記述しておけって書いてある記事しか出なくよくわかりませんでした。
・消すとデザインに影響が発生する可能性があるのか？
・そもそもなんのために記述しているのか？(bootstrapの読み込みにJQueryが出てくる意味がわかりません)

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

##コード
全体のコードです。

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Title -->
    <title>test</title>
  </head>

<body>
<a href="#nav1">ナビ1へジャンプ</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!-- ページ内ジャンプ先 -->
<div id="nav1">ここにナビ1の内容を記述</div>

<script>
  $(function(){
    $('a[href^="#"]').click(function() {
      var speed = 2000; // スクロールスピード(ミリ秒)
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
</script>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

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

回答2件

ベストアンサー

余程の理由がない限り、jQueryを複数読み込むのは不具合の元です。
あと、slim版はその名の通り、機能が削られた簡易版です。
削られた機能を使っていると当然動きません。

jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた

このscriptタグはどんな役割を持っているのでしょうか。

Bootstrap4.0.0を動かすためのものです。
ドキュメントでslim版がCDNとして置かれているのはslim版で十分動くためで、
slim版にない機能を利用する場合はslim版の読み込みは不要です。

※ただ、提示されたコードからするとjQueryもBootstrapもバージョン古いです。余程の理由がない限り最新使いましょう。

投稿2020/09/25 04:40

m.ts10806

総合スコア80875

takaotaka

2020/09/25 05:13

bootstrapを動かすためにはJQueryを読み込む必要があり、そのためにJQueryのslim版を読み込んでるということですね！私の場合head内で通常のJQueryを読み込んでおり、それをslim版の読み込みで上書きしちゃってたんですね。そしてslim版ではスムーズスクロール機能が使えないため、動かなかったと。理解できました。バージョンの最新化もしておきます！分かりやすいご説明、ありがとうございました。

m.ts10806

2020/09/25 05:24

最新・・・というと少し前に出たBootstrap5はjQueryと決別しているのでご注意を（使えないわけではなく不要となった）。4までであればjQuery依存版なので必須です。

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

javasuript
1    // <a>タグで属性hrefが"#"で始まる要素がクリックされた時
2    $('a[href^="#"]').click(function() {
3      var speed = 2000; // スクロールスピード(ミリ秒)
4      // 自分のhref属性を取得
5      var href= $(this).attr("href");
6      // 自分より前のターゲットを探す
7      var target = $(href == "#" || href == "" ? 'html' : href);
8      // ターゲットの位置を取得
9      var position = target.offset().top;
10      // (speed = 2000)始めと終わりは緩やかに、途中は速めにターゲットの位置へスクロールアップ
11      $('body,html').animate({scrollTop:position}, speed, 'swing');
12      return false;
13    });