質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.38%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

891閲覧

Bootstrapのcarousel.jsのみを使う方法

Raiden

総合スコア22

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/06/08 08:10

Bootstrap5を使いWebサイトを作っていますが、
JS(bootstrap.js)が必要なコンポーネントを全て使いたいわけではなく、
Carouselだけ使いたいです。
なので、公式のソースファイルをDLして、js/dist/carousel.jsをHTMLにscriptタグで読み込ませました。
試しにCarouselのサンプルをひとつ実行させてみました。
しかし、bootstrap.jsを使っていた頃には出なかったエラーが出ます。

Uncaught TypeError: Class extends value undefined is not a constructor or null at carousel.js:223 at carousel.js:9 at carousel.js:10

私はcarousel.jsをそのまま読み込ませるのではなく、何か事前にしなくてはいけない作業があるのではないかと思っているのですが、何か必要な作業はありますか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/06/08 08:17

エラーメッセージを見る限り、クラスの継承をしようとしたところ親クラスが存在しないようです。 bootstrap.js に依存しているのではないかと思います。
Lhankor_Mhy

2021/06/08 08:20

あ、bootstrap.js に依存してるわけではないですかね。別のモジュールに依存しているということではないかと思います。
Raiden

2021/06/08 09:38

ありがとうございます。imoprtするんですね。 JSファイルに import Carousel from '../js/carousel.js' const carousel = new Carousel(document.getElementById('carouselExampleControls')) とかいてみましたが、質問のエラーが消えないのと Cannot use import statement outside a module というエラーが新しく出てしまいました。 一応、手法は教えていただいたので、新規に質問し直したほうが良いでしょうか?
Lhankor_Mhy

2021/06/08 09:55

うーん、そうではなくて、carousel.js *が*別のモジュールに依存している、という話です
m.ts10806

2021/06/08 09:59 編集

あれ、今bootstrapのサイト落ちてますかね。 connection failureになってる。そのせいかcdn使ってるサイトが大変なことに。
m.ts10806

2021/06/08 09:57

いずれにしても利用しているバージョンが5で「Carouselのサンプル」が4.2なのでそのままは動かないと思いますが・・
Raiden

2021/06/08 10:05

>Lhankor_Mhyさん すいません。 この最適化の方法はまた違うんですね。 あと、依存しているということでは無いのかと思っていました。 つまり、carousel.js単体ではなく依存しているモジュールが必要ということでしょうか。 しかし、何に依存しているのかが私には分かりません。
Lhankor_Mhy

2021/06/08 10:07 編集

> m.ts10806さん 当方からも見ることができないです。SOも見れないので、CDN系のトラブルかもですね。 バージョンの違いは気づきませんでした、ありがとうございます。
Raiden

2021/06/08 10:13

わかりました! もし何なのかが分かったらLhankor_Mhyさんにも分かるようにここにかいておきますね。
Lhankor_Mhy

2021/06/08 10:15

ご丁寧にありがとうございます。
guest

回答1

0

自己解決

依存関係にあるモジュールをいくつも洗っているうちに
「さすがにこんな大量のモジュールを扱ってやっと機能させるのはおかしい」と気が付き、
Webpackで必要なコンポーネントをインストールするのがだということに気が付きました。
やはり公式サイトの「最適化」の項目通りにやるのが正しかったようです。

なので、ソースファイルをDLしてやる方法はおすすめしません。

投稿2021/06/09 09:12

Raiden

総合スコア22

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問