【初心者必見】JavaScriptのimportとexportのやり方

JavaScript

javascript

こんにちは、カミ@god48_です。

この記事はJavaScriptのimportとexportのやり方を説明します。
importとexportを知らなければコードを実用的に書いていくこともできないので、初心者の方は必ず覚えていきましょう。

順序としてexport→importなので先にexportから学びましょう。

exportとは

インポートの説明をします。

exportとはデータなどを取り出して出力することです。
JavaScriptの「export」は「import」する際ために行います。
exportをしなければimportができないので注意してください。

JavaScriptのexportのやり方

JavaScriptではexportしたいクラス、メソッドの前にexport文をつけてあげます。
exportすることによってimportができるようになります。

classのimportのやり方

 　
export class Module {
  constructor() {
    consol.log('クラスのexportのやり方です')
  }
}

メソッドのimportのやり方

　
export function method() {
  constructor() {
    consol.log('メソッドのexportのやり方です')
  }
　

スポンサードサーチ

importとは

インポートを説明していきます。

importとはデータの取り込みです。
JavaScriptのimportはデータを取り込んで使えるようにすることです。

JavaScriptには次のインポートのやり方があります。
用途に合わせて使いましょう。

  • HTMLファイルにJavaScriptファイルを取り込む
  • 別のJavaScriptファイルでexportされたクラス、メソッドなどを取り込む

JavaScriptのimportのやり方

冒頭にも書きましたが、
JavaScriptで「import」するにはJavaScriptファイルを「export」しなければいけません。

export後に「module」することで、JavaScriptファイルをimportすることができます。

importするには、「module名」と「import元」のパスを書きます。

　  
// import {モジュール名} from 'import元のパス'
import {Module} from 'sample/import'

HTMLファイルにJavaScriptファイルをimport

JavaScriptにimportする方法は二つあります。
JavaScriptでsrcタグをを書いてimportする方法とsrcタグを書かずに直接importする方法です。

src属性とは、HTMLに組み込む画像や、JavaScriptなどの外部リソースの場所を指定するときに使います。

srcタグをを書いてimportする方法

 　 
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>importの方法を記載しています</p>
    <script src="sample.js" type="module"></script>
</body>
</html>
　

srcタグを書かずに直接importする方法

　　
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>importの方法を記載しています</p>
    <script type="module">
      import {Module} from 'sample/import'
    </script>
</body>
</html>
　

JavaScriptファイルに外部のJavaScriptファイルをimportする

先ほどと同じように「module名」と「import元」のパスを書きます。

　
import {Module} from 'sample/import'
　

importしたいclassやmethodをexportを行い、import元に書いてあげれば、importすることができます。

　  
//jsファイルにimportする.

import {Module} from 'sample/import'


class AfterImport  {
  constructor () {
 
  }

}

スポンサードサーチ

まとめ

なんども同じこと書いているのでこれもう大丈夫だと思いますが、「import」したい場合は「export」を行い、import側でmoduleとパスの指定をすればimportができます。

参考になるから見てみてね。

確実にエンジニアに転職したい方向け

未経験からエンジニアを目指すTechAcademy Pro（エンジニア転職保証コース）

Pythonを学びたい方向け

【PyQ】いよいよ、誰でも機械学習を学べる時代へ

カミの転職経験談

JavaScriptJavaScript

Posted by kami