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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

IntelliJ IDEA

IntelliJ IDEA(インテリジェイ アイディア)は、JetBrains社が開発した、 JavaやScalaなどで利用される統合開発環境です。

Q&A

解決済

2回答

19222閲覧

(Javascript)モジュールのexportとimportが上手くいきません。

Saggitarie

総合スコア9

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

IntelliJ IDEA

IntelliJ IDEA(インテリジェイ アイディア)は、JetBrains社が開発した、 JavaやScalaなどで利用される統合開発環境です。

1グッド

3クリップ

投稿2018/05/04 07:14

編集2018/05/05 04:44

前提・実現したいこと

*Javascriptの初心者です。

BMIを測定する簡単WebアプリをJavascriptで作成しています。
IntelliJで実行しようとすると、Chromeのコンソールにエラーが表示されます。
モジュールのimportとexportが上手く行きません。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Unexpected identifier

該当のソースコード

index.html

Javascript

1<!doctype html> 2<html lang="ja"> 3<head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 10 11 <title>あなたのBMI</title> 12</head> 13<body> 14 15<h2 id="title"> あなたのBMIを測定します。</h2> 16 17<form id="userForm" class="userForm"> 18 名前:<input type="text" id="name"><br><br> 19 体重:<input type="number" name="weight"> 20 身長:<input type="number" name="height"> 21 <input type="submit" value="送信"> 22</form> 23<br> 24<div class="container"> 25 <table class="table"> 26 <thead> 27 <tr> 28 <th>#</th> 29 <th>名前</th> 30 <th>身長</th> 31 <th>体重</th> 32 <th>BMI 結果</th> 33 </tr> 34 </thead> 35 <tbody id="userInfo"> 36 37 </tbody> 38 </table> 39</div> 40 41<div class="userList"> 42 <ul id="bmi_list"> 43 </ul> 44</div> 45 46 47<!-- Optional JavaScript --> 48<!-- jQuery first, then Popper.js, then Bootstrap JS --> 49 50<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 51<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> 52<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 53<script src="index.js"></script> 54</body> 55</html>

index.js

Javascript

1import {Information} from './info'; 2 3// inputタグを全て要素ノードの集合(配列)として取得する。 4// その他の要素ノードはidで識別することにする。 5let userForm = document.getElementById('userForm'); 6let input = document.getElementsByTagName('input'); 7let name = document.getElementById('name'); 8let userInfo = document.getElementById('userInfo'); 9 10 11let info = []; 12 13//BMIの計算結果を画面に表示するための関数 14let bmi_result = (event) => { 15 16 17 18 let id = info.length + 1; 19 //formを送信した時の挙動を制御する 20 event.preventDefault(); 21 22 //受け取った体重と身長を使ってbmiを計算を行い、その結果を戻り値としてresult変数に保持する。 23 let result = bmi_calculation(input[1].valueAsNumber, input[2].valueAsNumber); 24 result = result.toString(); 25 26 //ユーザーの情報をInfoクラスのインスタンスを生成すると同時に渡してあげる。 27 info.push(new Information((id, name.value, input[1].value, input[2].value, result)); 28 29 /* 30 * tableタグの子要素として、それぞれの情報を格納して、 31 * 画面に表示させる。  32 */ 33 let tr = document.createElement('tr'); 34 35 36 let th = document.createElement('th'); 37 th.scope = 'row'; 38 th.innerText = info[info.length].id; 39 tr.appendChild(th); 40 41 42 let td = document.createElement('td'); 43 td.innerText = info[info.length].name; 44 tr.appendChild(td); 45 46 td = document.createElement('td'); 47 td.innerText = info[info.length].weight; 48 tr.appendChild(td); 49 50 td = document.createElement('td'); 51 td.innerText = info[info.length].height; 52 tr.appendChild(td); 53 54 td = document.createElement('td'); 55 td.innerText = info[info.length].bmi; 56 tr.appendChild(td); 57 58 59 /* 最終的に、tbodyタグの子要素として追加する。*/ 60 userInfo.appendChild(tr); 61 62 63 input[0].value = ""; 64 input[1].value = ""; 65 input[2].value = ""; 66 67} 68 69//BMIの計算をして、bmi_resultに計算結果を返却する関数 70let bmi_calculation = (weight, height) => { 71 let weight_number = weight; 72 let height_number = height; 73 74 return weight_number / ((height_number/100)**2); 75} 76 77 78//formタグのイベントリスナーがsubmitボタンが押されたことにより発動する。 79userForm.addEventListener('submit',bmi_result, false); 80

info.js

Javascript

1export class Information{ 2 constructor(user_id, name, weight, height, bmi){ 3 4 this.id = user_id; 5 this.name = name; 6 this.weight = weight; 7 this.height = height; 8 this.bmi = bmi; 9 } 10};

npm run buildした後にdestフォルダ下に作成されたindex.html

Javascript

1<!doctype html> 2<html lang="ja"> 3<head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 10 11 <title>あなたのBMI</title> 12</head> 13<body> 14 15<h2 id="title"> あなたのBMIを測定します。</h2> 16 17<form id="userForm" class="userForm"> 18 名前:<input type="text" id="name"><br><br> 19 体重:<input type="number" name="weight"> 20 身長:<input type="number" name="height"> 21 <input type="submit" value="送信"> 22</form> 23<br> 24<div class="container"> 25 <table class="table"> 26 <thead> 27 <tr> 28 <th>#</th> 29 <th>名前</th> 30 <th>身長</th> 31 <th>体重</th> 32 <th>BMI 結果</th> 33 </tr> 34 </thead> 35 <tbody id="userInfo"> 36 37 </tbody> 38 </table> 39</div> 40 41<div class="userList"> 42 <ul id="bmi_list"> 43 </ul> 44</div> 45 46 47 48<!-- Optional JavaScript --> 49<!-- jQuery first, then Popper.js, then Bootstrap JS --> 50 51<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 52<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> 53<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 54<script src="../src/index.js"></script> 55<script type="text/javascript" src="index.bundle.js"></script></body> 56</html>

webpack.config.babel.js

Javascript

1import path from 'path'; 2import HtmlWebpackPlugin from 'html-webpack-plugin'; 3 4const PUBLIC_DIR = path.resolve(__dirname, "dest"); 5 6export default { 7 mode: 'production', 8 entry: './src/info.js', 9 output: { 10 path: PUBLIC_DIR, 11 filename: 'index.bundle.js' 12 }, 13 module: { 14 rules: [ 15 { 16 test: /.js$/, 17 exclude: /node_modules/, 18 use: { 19 loader: 'babel-loader', 20 options: { 21 presets: ['react'] 22 } 23 } 24 } 25 ] 26 }, 27 plugins: [ 28 new HtmlWebpackPlugin({ 29 template: './src/index.html', 30 filename: './index.html' 31 }) 32 ] 33}; 34

package.json

Json

1{ 2 "name": "javascript-todo", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "build": "webpack", 8 "test": "jest" 9 }, 10 "repository": { 11 "type": "git", 12 "url": "https://net2018-gitlab.casareal.co.jp/samples/testing-javascript.git" 13 }, 14 "keywords": [], 15 "author": "", 16 "license": "ISC", 17 "devDependencies": { 18 "babel-core": "^6.26.0", 19 "babel-loader": "^7.1.4", 20 "babel-preset-env": "^1.6.1", 21 "babel-preset-react": "^6.24.1", 22 "html-loader": "^0.5.5", 23 "html-webpack-plugin": "^3.2.0", 24 "jest": "^22.4.3", 25 "webpack": "^4.6.0", 26 "webpack-cli": "^2.0.14" 27 } 28} 29

BMI_Test.iml

IML

1<?xml version="1.0" encoding="UTF-8"?> 2<module type="WEB_MODULE" version="4"> 3 <component name="NewModuleRootManager" inherit-compiler-output="true"> 4 <exclude-output /> 5 <content url="file://$MODULE_DIR$" /> 6 <orderEntry type="sourceFolder" forTests="false" /> 7 </component> 8</module>

Javascript

1{ 2 "presets": ["env", "react"] 3}

試したこと

何故、info.jsがChrome上で認識されないのかがわかりません。
export default class Information{};やexport class Information{}両方のパターンを試してみましたが、どうしてもモジュール間で受け渡しができません。

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

miyabi-sun👍を押しています

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/05/04 08:37

ビルドツールはwebpackですか???タスクを実行するjavascriptも記載してください。
miyabi-sun

2018/05/05 03:31 編集

私もビルド無しで動くわけないだろうと思ってたのですが、MDN見たら「ChromeやFirefox等のブラウザではぼちぼち実装されてきています」という記述を見かけましたね。だから質問文で動かないといっている状況と相違するので静観していました。
Saggitarie

2018/05/05 04:29

easy_no_easyさん → ビルドツールはwebpackを使っています。後ほど、そちらのソースコードも追加しておきます。
Saggitarie

2018/05/05 04:34

miyabi-sunさん → ビルドを動かしてから実行しても、Chromeのコンソール上のimport文の箇所に赤い波線が引かれている状態でした。maisumakunさんの方法で試したところ、無事にモジュールを認識してくれました。
guest

回答2

5

ベストアンサー

ブラウザでimportを実行する場合、

  • <script>type="module"と指定する
  • importするJavaScriptの拡張子を省略しない

などが必要になります。

なお、ブラウザによるimportexportの実装はIEが非対応なほか、Firefoxも次のバージョンまでは特殊な設定をして有効化する必要があるような状態なので、実運用に入れるのは少し早い気もします(Can I use)。

投稿2018/05/04 08:10

maisumakun

総合スコア144986

suika11, miyabi-sun, kei344, umyu, fukumi822👍を押しています

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

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

Saggitarie

2018/05/04 09:54

maisumakunさんの方法でソースコードを書き直したところ、無事エラーをなくすことができました。 本当に助かりました。 ありがとうございます!
guest

0

うまくいかないというのは、importそのものができていないということでしょうか???
どこかに構文エラーがあるのではないでしょうか??
Uncaught SyntaxError: Unexpected identifier

import {Information} from './info';

importするときは波括弧要らなかったような気がしますが・・・。
import Information from './info';

投稿2018/05/04 08:35

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

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

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

IntelliJ IDEA

IntelliJ IDEA(インテリジェイ アイディア)は、JetBrains社が開発した、 JavaやScalaなどで利用される統合開発環境です。