71 lines
2.4 KiB
Markdown
71 lines
2.4 KiB
Markdown
|
---
|
||
|
|
id: 587d7b8c367417b2b2512b55
|
||
|
|
title: インポートを使用して JavaScript コードを再利用する
|
||
|
|
challengeType: 1
|
||
|
|
forumTopicId: 301208
|
||
|
|
dashedName: reuse-javascript-code-using-import
|
||
|
|
---
|
||
|
|
|
||
|
|
# --description--
|
||
|
|
|
||
|
|
`import` を使用すると、ファイルまたはモジュールのどの部分を読み込むかを選択できます。 前のレッスンの例では、`math_functions.js` ファイルから `add` をエクスポートしました。 次の方法で、別のファイルでインポートして使用することができます。
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { add } from './math_functions.js';
|
||
|
|
```
|
||
|
|
|
||
|
|
ここでは、`import` は `math_functions.js` 内の `add` を見つけ、その関数だけをインポートして利用できるようにし、残りは無視します。 `./` は、現在のファイルと同じフォルダ内の `math_functions.js` ファイルを探すようにインポートに指示します。 この方法でインポートする場合は、相対ファイルパス (`./`) とファイル拡張子 (`.js`) が必要です。
|
||
|
|
|
||
|
|
ファイルから複数のアイテムをインポートするには、次のように `import` ステートメントにアイテムを追加します。
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { add, subtract } from './math_functions.js';
|
||
|
|
```
|
||
|
|
|
||
|
|
# --instructions--
|
||
|
|
|
||
|
|
以前のレッスンでエクスポートした `uppercaseString` および `lowercaseString` 関数を現在のファイルで使用できるようにする、適切な `import` ステートメントを追加してください。 これらの関数は、現在のファイルと同じディレクトリにある `string_functions.js`というファイルに含まれています。
|
||
|
|
|
||
|
|
# --hints--
|
||
|
|
|
||
|
|
`uppercaseString` を正しくインポートする必要があります。
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(
|
||
|
|
code.match(
|
||
|
|
/import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
|
||
|
|
)
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
`lowercaseString` を正しくインポートする必要があります。
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(
|
||
|
|
code.match(
|
||
|
|
/import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
|
||
|
|
)
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```js
|
||
|
|
|
||
|
|
// Only change code above this line
|
||
|
|
|
||
|
|
uppercaseString("hello");
|
||
|
|
lowercaseString("WORLD!");
|
||
|
|
```
|
||
|
|
|
||
|
|
# --solutions--
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { uppercaseString, lowercaseString } from './string_functions.js';
|
||
|
|
|
||
|
|
uppercaseString("hello");
|
||
|
|
lowercaseString("WORLD!");
|
||
|
|
```
|