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

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

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

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

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

解決済

javascriptのモジュールをimportしたいのだが、関数が定義出来ない(読み取られない)

kkk1997
kkk1997

総合スコア1

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

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

1回答

0評価

1クリップ

259閲覧

投稿2022/05/18 14:08

編集2022/05/20 15:38

前提・実現したいこと

[前提]javascriptでモジュールを使い、import/exportを試みましたが関数が定義されません。

[実現したいこと]
HTML・CSS・javascriptを用いて簡単なクイズアプリを作成中です。
まず初めにjavascriptから新たに2つファイルを作成しました。
その内のquiz_data_jp.jsファイルで書いたクイズ問題を
もう一方のscript.jsファイルにexportさせ、クイズ問題を反映させたいと考えております。

起きている問題・エラーメッセージについて

quiz_data_jp.jsファイル⇨script.jsファイルにexportを試みましたが、
関数quizDataJpが定義されません。

[エラーメッセージについて]

vscode上で、関数名quizDataJpにカーソルを合わせると
『'quizDataJp' が宣言されていますが、その値が読み取られることはありません。ts(6133)』
と、上記のように表示されます。
素人ながら必死に解決を目指し、模索いたしましたが力及ばず此方のサイトにて質問をいたしました。

お教えいただきたいことについて

・import先で関数(変数)が定義出来ない原因
・その解決策

貴重なお時間の中、大変恐れ入りますが
お教えいただけますとありがたく存じます。
拙い文章でお読みづらく恐縮ですが何卒よろしくお願いいたします。

該当のソースコードについて

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>薄毛対策クイズ</title> <link rel="stylesheet" href="style.css"> <script type="module" src="./script.js" defer></script> <script type="module" src="./quiz_data_jp.js" defer></script> </head> <body> <div id="quiz-container"> <div id="quiz-header"> <h2 id="question">Question text</h2> <form id="quiz-form" name="quizForm"> <ul> <li> <input type="radio" id="a" name="answer" value="a" /> <label id="a-text" for="a">Quesition</label> </li> <li> <input type="radio" id="b" name="answer" value="b" /> <label id="b-text" for="b">Question</label> </li> <li> <input type="radio" id="c" name="answer" value="c" /> <label id="c-text" for="c">Question</label> </li> <li> <input type="radio" id="d" name="answer" value="d" /> <label id="d-text" for="d">Question</label> </li> </ul> </form> </div> <button id="submit">回答する</button> <button id="submit">ヒント</button> <div id="results-container"> <div id="results-header"> <h2 id="results"></h2> <button id="next-quiz">次の問題へ進む</button> </div> </div> </div> </body> </html>

javascript

//こちらのコードがquiz_data_jp.jsです。 const quizDataJp = [ { question: '頭皮改善を行なう上で効果的ではに習慣は次の内どれ?', a: '毎日湯舟に浸かる', b: 'ふくらはぎのマッサージ', c: '就寝時は頭から携帯を離す', d: '短時間睡眠', correct: 'd' }, { question: '自毛植毛を行う上でデメリットは複数あるが、次の内デメリットとして当てはまらないものはどれ?', a: '手術後に生え揃うまで早くて一年は掛かる', b: '植毛によって生えてきた髪の毛にはカラーが出来ない', c: '密度を濃くしすぎてしまうと生着率が下がる恐れがある', d: '10%の確率で生着しない失敗リスクがある', correct: 'b' }, ]; export const question = quiz_data_jp.js;

javascript

//こちらのコードがscript.jsです。 import { quizDataJp } from "./quiz_data_jp.js"; // 質問 const questionElm = document.getElementById('question'); // 質問文 const a_text = document.getElementById('a-text'); const b_text = document.getElementById('b-text'); const c_text = document.getElementById('c-text'); const d_text = document.getElementById('d-text'); // 送信ボタン const submitBtn = document.getElementById('submit');

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

k.a_teratail

2022/05/18 14:19

作成中のコードなどはないのでしょうか? これだけでは、回答が非常に難しいです。
kkk1997

2022/05/18 14:46

k.a_teratail様 コメントありがとうございます。 コードが記載出来ておらず大変失礼いたしました。 お忙しい中、恐れ入りますが ご確認いただけますと幸いです。 よろしくお願いします。
int32_t

2022/05/18 15:14

> 『'quizDataJp' が宣言されていますが、その値が読み取られることはありません。ts(6133)』 quizDataJp を script.js 内で使ってないのでしょう。この import を削除すればいいです。
kkk1997

2022/05/20 06:36

int32_t様 コメントありがとうございます。 ご返信が遅くなり失礼いたしました。 おかげさまで理解いたしました。 大変ありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

import

自身のプラットフォーム・プログラム・データセットに対して、外部ソースを取り込むプロセスをimportと呼びます。

JavaScript

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