モジュールモジュールの使用場所の指定、相対パス、インポート

入門JavaScriptプログラミング
 楽天ブックス
Yahoo!ショッピング
au PAY マーケット

開発環境

入門JavaScriptプログラミング (JD Isaacks(著)、株式会社クイープ(監修、翻訳)、翔泳社)のUNIT4(モジュール)、LESSON 21(モジュールの使用)、21.7(練習問題)、Q21-1の解答を求めてみる。

HTML

<script type="module" src="./sample.js"></script>

コード

let luckyNumber = Math.floor(Math.random() * 100) + 1

export default function guessLuckyNumber(guess) {
    return guess === luckyNumber;
}

コード

import guessLuckyNumber from './luck_numbery.js';

console.log('ゲーム開始');
for (let guess = 1; guess <= 100; guess++) {
    if (guessLuckyNumber(guess)) {
        console.log(`ラッキーナンバーは${guess}`);
        break;
    }
    console.log(`${guess}: ハズレ`);
}

入出力結果(Terminal、Zsh)

% python3 -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
::1 - - [17/Jun/2021 11:45:24] "GET / HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:45:24] "GET /sample.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:45:24] "GET /luck_numbery.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:45:59] "GET / HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:45:59] "GET /sample.js HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:46:02] "GET / HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:46:02] "GET /sample.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:46:02] "GET /luck_numbery.js HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:46:03] "GET / HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:46:03] "GET /luck_numbery.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:46:10] "GET / HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:46:10] "GET /sample.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:46:10] "GET /luck_numbery.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:46:34] "GET / HTTP/1.1" 200 -
::1 - - [17/Jun/2021 11:46:34] "GET /sample.js HTTP/1.1" 304 -
::1 - - [17/Jun/2021 11:46:34] "GET /luck_numbery.js HTTP/1.1" 304 -
^C
Keyboard interrupt received, exiting.
%

入出力結果(Console)

[Log] ゲーム開始 (sample.js, line 3)
[Log] 1: ハズレ (sample.js, line 9)
[Log] 2: ハズレ (sample.js, line 9)
[Log] 3: ハズレ (sample.js, line 9)
[Log] 4: ハズレ (sample.js, line 9)
[Log] 5: ハズレ (sample.js, line 9)
[Log] 6: ハズレ (sample.js, line 9)
[Log] 7: ハズレ (sample.js, line 9)
[Log] 8: ハズレ (sample.js, line 9)
[Log] 9: ハズレ (sample.js, line 9)
[Log] 10: ハズレ (sample.js, line 9)
[Log] 11: ハズレ (sample.js, line 9)
[Log] 12: ハズレ (sample.js, line 9)
[Log] 13: ハズレ (sample.js, line 9)
[Log] 14: ハズレ (sample.js, line 9)
[Log] 15: ハズレ (sample.js, line 9)
[Log] 16: ハズレ (sample.js, line 9)
[Log] 17: ハズレ (sample.js, line 9)
[Log] 18: ハズレ (sample.js, line 9)
[Log] 19: ハズレ (sample.js, line 9)
[Log] 20: ハズレ (sample.js, line 9)
[Log] 21: ハズレ (sample.js, line 9)
[Log] 22: ハズレ (sample.js, line 9)
[Log] 23: ハズレ (sample.js, line 9)
[Log] 24: ハズレ (sample.js, line 9)
[Log] 25: ハズレ (sample.js, line 9)
[Log] 26: ハズレ (sample.js, line 9)
[Log] 27: ハズレ (sample.js, line 9)
[Log] 28: ハズレ (sample.js, line 9)
[Log] 29: ハズレ (sample.js, line 9)
[Log] 30: ハズレ (sample.js, line 9)
[Log] 31: ハズレ (sample.js, line 9)
[Log] 32: ハズレ (sample.js, line 9)
[Log] 33: ハズレ (sample.js, line 9)
[Log] 34: ハズレ (sample.js, line 9)
[Log] 35: ハズレ (sample.js, line 9)
[Log] 36: ハズレ (sample.js, line 9)
[Log] 37: ハズレ (sample.js, line 9)
[Log] 38: ハズレ (sample.js, line 9)
[Log] 39: ハズレ (sample.js, line 9)
[Log] 40: ハズレ (sample.js, line 9)
[Log] ラッキーナンバーは41 (sample.js, line 6)

[Log] ゲーム開始 (sample.js, line 3)
[Log] 1: ハズレ (sample.js, line 9)
[Log] 2: ハズレ (sample.js, line 9)
[Log] 3: ハズレ (sample.js, line 9)
[Log] 4: ハズレ (sample.js, line 9)
[Log] 5: ハズレ (sample.js, line 9)
[Log] 6: ハズレ (sample.js, line 9)
[Log] 7: ハズレ (sample.js, line 9)
[Log] 8: ハズレ (sample.js, line 9)
[Log] 9: ハズレ (sample.js, line 9)
[Log] 10: ハズレ (sample.js, line 9)
[Log] 11: ハズレ (sample.js, line 9)
[Log] 12: ハズレ (sample.js, line 9)
[Log] 13: ハズレ (sample.js, line 9)
[Log] 14: ハズレ (sample.js, line 9)
[Log] 15: ハズレ (sample.js, line 9)
[Log] 16: ハズレ (sample.js, line 9)
[Log] 17: ハズレ (sample.js, line 9)
[Log] 18: ハズレ (sample.js, line 9)
[Log] 19: ハズレ (sample.js, line 9)
[Log] 20: ハズレ (sample.js, line 9)
[Log] 21: ハズレ (sample.js, line 9)
[Log] 22: ハズレ (sample.js, line 9)
[Log] 23: ハズレ (sample.js, line 9)
[Log] 24: ハズレ (sample.js, line 9)
[Log] 25: ハズレ (sample.js, line 9)
[Log] 26: ハズレ (sample.js, line 9)
[Log] 27: ハズレ (sample.js, line 9)
[Log] 28: ハズレ (sample.js, line 9)
[Log] 29: ハズレ (sample.js, line 9)
[Log] 30: ハズレ (sample.js, line 9)
[Log] 31: ハズレ (sample.js, line 9)
[Log] 32: ハズレ (sample.js, line 9)
[Log] 33: ハズレ (sample.js, line 9)
[Log] 34: ハズレ (sample.js, line 9)
[Log] 35: ハズレ (sample.js, line 9)
[Log] 36: ハズレ (sample.js, line 9)
[Log] 37: ハズレ (sample.js, line 9)
[Log] 38: ハズレ (sample.js, line 9)
[Log] 39: ハズレ (sample.js, line 9)
[Log] 40: ハズレ (sample.js, line 9)
[Log] 41: ハズレ (sample.js, line 9)
[Log] 42: ハズレ (sample.js, line 9)
[Log] 43: ハズレ (sample.js, line 9)
[Log] 44: ハズレ (sample.js, line 9)
[Log] 45: ハズレ (sample.js, line 9)
[Log] 46: ハズレ (sample.js, line 9)
[Log] 47: ハズレ (sample.js, line 9)
[Log] 48: ハズレ (sample.js, line 9)
[Log] 49: ハズレ (sample.js, line 9)
[Log] 50: ハズレ (sample.js, line 9)
[Log] 51: ハズレ (sample.js, line 9)
[Log] 52: ハズレ (sample.js, line 9)
[Log] 53: ハズレ (sample.js, line 9)
[Log] 54: ハズレ (sample.js, line 9)
[Log] 55: ハズレ (sample.js, line 9)
[Log] 56: ハズレ (sample.js, line 9)
[Log] 57: ハズレ (sample.js, line 9)
[Log] 58: ハズレ (sample.js, line 9)
[Log] 59: ハズレ (sample.js, line 9)
[Log] 60: ハズレ (sample.js, line 9)
[Log] 61: ハズレ (sample.js, line 9)
[Log] 62: ハズレ (sample.js, line 9)
[Log] 63: ハズレ (sample.js, line 9)
[Log] 64: ハズレ (sample.js, line 9)
[Log] 65: ハズレ (sample.js, line 9)
[Log] 66: ハズレ (sample.js, line 9)
[Log] 67: ハズレ (sample.js, line 9)
[Log] 68: ハズレ (sample.js, line 9)
[Log] 69: ハズレ (sample.js, line 9)
[Log] 70: ハズレ (sample.js, line 9)
[Log] 71: ハズレ (sample.js, line 9)
[Log] 72: ハズレ (sample.js, line 9)
[Log] 73: ハズレ (sample.js, line 9)
[Log] 74: ハズレ (sample.js, line 9)
[Log] 75: ハズレ (sample.js, line 9)
[Log] 76: ハズレ (sample.js, line 9)
[Log] 77: ハズレ (sample.js, line 9)
[Log] 78: ハズレ (sample.js, line 9)
[Log] 79: ハズレ (sample.js, line 9)
[Log] 80: ハズレ (sample.js, line 9)
[Log] 81: ハズレ (sample.js, line 9)
[Log] 82: ハズレ (sample.js, line 9)
[Log] 83: ハズレ (sample.js, line 9)
[Log] 84: ハズレ (sample.js, line 9)
[Log] 85: ハズレ (sample.js, line 9)
[Log] 86: ハズレ (sample.js, line 9)
[Log] ラッキーナンバーは87 (sample.js, line 6)