本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
13.1 モジュール, 導入
知らない単語
-
AMDとは
- アメリカの大手半導体メーカーの一つ、Intel社製マイクロプロセッサの互換製品で有名 -
CommonJS
- サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクト
学んだこと
- モジュールとは?
モジュールは単なる1つのファイルであり、
export と import を利用することで、モジュール間で機能を相互にやりとりすることができる
export は、ファイルの外部からアクセス可能であるべき変数や関数にラベル付けをし、
import は他のモジュールから機能をインポートできるようにする
例、関数をエクスポートしているファイル sayHi.js がある
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}
別のファイルでインポートして使う
// 📁 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // function...
sayHi('John'); // Hello, John!
import は相対パス ./sayHi.js のモジュールを読み込み、エクスポートされた関数 sayHi を対応する変数に割り当てる
- コアなモジュールの特徴
通常のスクリプトと比較して、モジュールの特徴はなにか？
モジュールは常に use strict なので、未宣言変数への代入はエラーになる
各モジュールには独自の最上位のスコープがあり、モジュール内の最上位の変数や関数は他のスクリプトからは見えない
- モジュールコードはインポート時の初回にのみ評価されます
同じモジュールが他の場所でもインポートされる場合、コードは初回のみ実行され、その後エクスポートしたものはすべてのインポートしているモジュールで利用される
感想
モジュールコードはインポート時初回にのみ評価されるという事は、1度限りの評価でその後覆す事はできないので注意する必要がある。
13.2 エクスポートとインポート
知らない単語
- 無し
学んだこと
- exportの種類
宣言の前
export [default] class/function/variable ...
スタンドアロン
export {x [as y], ...}.
再エクスポート
export {x [as y], ...} from "mod"
export * from "mod" (デフォルトは再エクスポートしない).
export {default [as y]} from "mod" (デフォルトの再エクスポート).
- Importの種類
モジュールから名前付きエクスポート
import {x [as y], ...} from "mod"
デフォルトエクスポート
import x from "mod"
import {default as x} from "mod"
すべて
import * as obj from "mod"
モジュールの取得/評価のみでインポートはしない
import "mod"
- 書き方
sayHi();
import {sayHi} from './say.js'; // ファイルの末尾で import
インポートはファイルの先頭にあるが、書きやすいという理由だけである
import/export 文は {...} の中では動作しないので注意
感想
exportとimportで書き方の違いをしっかり覚えていく。
また、exportは再エクスポートの書き方もあるので注意する。
13.3 Dynamic imports(ダイナミックインポート)
知らない単語
- オンデマンド
- ユーザの要求があった際に、その要求に応じてサービスを提供する事
例えばブラウザなどを通じてユーザのリクエストに応じて、テキストや画像などのコンテンツを配信しているインターネット上の多くのデータ配信は、オンデマンド方式である
- ユーザの要求があった際に、その要求に応じてサービスを提供する事
学んだこと
- import() 式
import(module) 式は、モジュールを読み込み、モジュールがもつすべてのエクスポートを含むモジュールオブジェクトになる promise を返す
例として
let modulePath = prompt("Module path?");
import(modulePath)
.then(obj => <module object>)
.catch(err => <loading error, no such module?>)
のような書き方をする
import() は一見すると関数呼び出しに見えるが、super()と同じく、たまたま括弧を使用している構文である
関数ではないので、変数に import をコピーしたり、call/apply を使用することはできない
感想
import()はsuper()と同じで、関数ではないので、構文として覚える。
最後に
exportとimportは書き方や役割を間違って覚えないように注意したい。