私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。導入アプリケーションが大きくなるにつれ、それを複数のファイルに分割したくなります。通常、モジュールはクラスや便利な関数のライブラリを含みます。言語レベルのモジュール構文は存在しませんでした。当初はスクリプトが小さくて単純だったため、それは問題ではありませんでした。そのため、モジュールの仕組みは必要ありませんでした。スクリプト徐々に複雑になってきました。そのため、コミュニティはコードをモジュールにまとめるための様々な方法を発明しました。古いモジュールシステムの1つで、最初はライブラリrequire.jsで実装されました。サーバ用に作られたモジュールシステムです。1つのモジュールシステムで、ユニバーサルなものとして提案されています。今や、これらはゆっくりと歴史の一部になっていますが、依然として古いスクリプトの中で利用されています。サポートされています。モジュールとは?モジュールは単なる1つのファイルです。利用することで、モジュール間で機能を相互にやりとりすることができます。キーワードは、ファイルの外部からアクセス可能であるべき変数や関数にラベル付けをします。他のモジュールから機能をインポートできるようにします。${user}!`);}...そして、別のファイルでそれをインポートして使います。John!このチュートリアルでは言語自身に焦点を当てていますが、デモ環境としてブラウザを利用します。ブラウザでモジュールを動作させる方法を見ておきましょう。sayHi('John');</script>ブラウザは自動的にインポート対象を取得/評価し、スクリプトを実行します。両方に有効なコアな特徴があります。未宣言変数への代入はエラーになります。error</script>ここではブラウザで確認していますが、同じことはどのモジュールにも当てはまります。モジュールレベルのスコープ各モジュールには独自の最上位のスコープがあります。モジュール内の最上位の変数や関数は他のスクリプトからは見えません。することを期待しています。インポートする必要があります。対しても独立した最上位スコープが存在します。これは例外であり正当な理由がある場合のみです。モジュールコードはインポート時の初回にのみ評価されますもし同じモジュールが複数の他の場所でインポートされる場合、そのコードは初回のみ実行されます。その後エクスポートしたものはすべてのインポートしているモジュールで利用されます。これは重要な結果をもたらします。メッセージを表示すると言ったような、副作用をもたらすモジュールコードを実行する場合、複数回インポートしてもトリガされるのは1度だけです(初回)。(nothing)実際、最上位のモジュールコードは主に初期化に使われます。データ構造を作成し、それらを事前に設定します。何かを再利用可能にしたいとき、それらをエクスポートします。これはより高度な例です。オブジェクトが生成され、その後このモジュールをインポートするすべてのモジュールに渡されます。オブジェクトを取得することになります。モジュールは一度だけ実行されます。エクスポートが生成され、それがインポータ間で共有されます。オブジェクトを変更した場合、他のモジュールにもその変更が見えます。このような振る舞いは、コンフィグレーションが必要なモジュールにとっては便利です。最初のインポートで必要なプロパティを設定することができ、以降のインポートではすでに準備ができている状態です。オブジェクトにクレデンシャル情報が来ることを期待します。自身の内側から行われる呼び出しを含め、誰もがそれを見ることができます。現在のモジュールに関する情報を含んでいます。この内容は環境に依存します。undefinedこれは小さな特徴ですが、完全性のために言及しておきます。持つスクリプトには、ブラウザ固有の違いもいくつかあります。使用していない場合はスキップしても構いません。説明しています)と同じ効果を持ちます。処理をブロックしません。ドキュメントが完全に準備できるまで待ちます。ドキュメントの最初にあるスクリプトが最初に実行されます。通常のスクリプトは、ページの残りが処理される前に即時実行します。これは、モジュールが遅延されているためです。通常のスクリプトはすぐに実行するので、最初に出力されます。ドキュメントが表示できることに注意してください。一部の機能はまだ機能しない可能性があります。"ローディング"を配置する、もしくはそれ以外の方法で訪問者が混乱しないようにする必要があります。インライン、外部スクリプトの両方で使用できます。非同期スクリプトは、インポートされたモジュールが処理されるとすぐに実行されます。ドキュメントとは独立しています。あるので、誰かを待つことはありません。取得)を行い、準備ができたときに実行します。これはカウンタや広告、ドキュメントレベルのイベントリスナなど、何にも依存しない機能に適しています。counter.count();</script>外部スクリプト外部モジュールスクリプトには、2つの大きな違いがあります。ヘッダを必要とします。代わりに取得するドメインを指定する場合もあります)を提供しなければなりません。src="http://another-site.com/their.js"></script>これにより、デフォルトでセキュリティが向上します。相対URLか絶対URL、どちらかの取得が必須です。モジュールは許可されていません。バンドルツールのような特定の環境では、モジュールを見つけるための独自の方法や、それらを調整するためのフックがあるため、剥き出しのモジュールを使用することができます。ブラウザではまだベアモジュールはサポートされていません。未知のタイプのスクリプトは単に無視されます。属性を使って、フォールバックを提供することが可能です。文は特別なバンドル呼び出しに置き換えられます。それを通常のスクリプトに置くことができます。形式で使用されることはほとんどありません。特別なツールを使って一緒にまとめて、プロダクションサーバにデプロイします。モジュールのようにベアモジュールやその他のことを可能にします。ビルドツールは次のことを行います。モジュールを取ります。呼び出しをバンドラ関数で置き換え、すべてのモジュールを1つのファイルにビルドします(もしくは複数のファイルにします。その過程で、他の変換や最適化を適用することができます。(スペースの削除、変数を短い名前に置換するなど)とはいえ、ネイティブモジュールも使用可能です。後で設定することは可能です。サマリまとめると、コアの概念は次の通りです:モジュールはファイルです。必要とし、それはいくつかの違いを意味します。経由で、モジュール間で機能をやり取りします。モジュールコードは一度だけ実行されます。エクスポートは一度生成され、インポータ間で共有されます。したがって、通常、モジュールを使用するとき、各モジュールは機能を実装し、それらをエクスポートします。使って、必要な場所に直接インポートします。ブラウザは自動的にスクリプトを読み込み、評価します。バンドラを使用します。次のチャプターでは、より多くのモジュールの例と、どのようにエクスポート/インポートされるかを見ていきます。前のレッスン次のレッスンシェアチュートリアルマップコメントコメントをする前に読んでください...自由に記事への追加や質問を投稿をしたり、それらに回答してください。タグを使ってください。codepen...)。記事の中で理解できないことがあれば、詳しく説明してください。Kantorプロジェクトについてコンタクト。