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

前提・実現したいこと

＊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/ツールのバージョンなど）

退会済みユーザー

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さんの方法で試したところ、無事にモジュールを認識してくれました。

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

回答2件

ベストアンサー

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

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

などが必要になります。

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

投稿2018/05/04 08:10

maisumakun

総合スコア145183

Saggitarie

2018/05/04 09:54

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

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

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

import {Information} from './info';

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

投稿2018/05/04 08:35

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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