イイダリョウのブログ。export)でどんなことができるのか事始めてみたJSVue.jsやNuxt.jsを理解する上で重要なJSの「モジュール」という仕組みを先に理解する。外部JSファイルの一部の機能を読み込むようだが、どんなことがことができるのか。defaultを使って名前をimport側でつける最後にJSファイル読み込みこれまで、HTMLファイルに外部のJSファイルを読み込むときはこうしていた。src="js/hoge.js"></script>ファイルごと読み込むのでだんだん増えていく運命...。src="js/hoge4.js"></script>デメリットもある。ファイルの中の一部の機能しか使わないのにファイルごと読まなければならない上から順番に読むので、読み込み順を間違えるとうまく機能しない上から順番に読むので、途中のファイルでエラーが起こると続きが読まれないこれを解決するのがモジュールとのこと。モジュールとは何かでは、モジュールとは何か。(module)とは「部品」のこと。書くと「そいつ単独でも機能としては成立するけど、普通は他のものと組み合わせて使うよ!」な部品のこと部品ね。合体するときの接続部分の形とかが決まってるよ何かと合体させる前提で接続の形が決まっている部品と。ES-ModulesJSのモジュールは「ES-Modules」というらしい。ESはECMAScriptだね。useで見ると、IE以外の主要ブラウザは対応している模様。export用のファイルを作成する。ファイル名はexport.jsとでもしておくか。//処理}通常の関数の前に「export」を追加する形。alert(massage);}まずは簡単にアラートからwHTML上にモジュール読み込み(import)の処理を書く次に、HTMLファイル上でモジュールを読み込む。//処理</script>scriptタグに注目!type属性が「module」になっている!!「import」で関数を読み込み、「from」でその関数が書かれているファイルを読み込む。aisatsu("はじめまして、モジュール君♪");</script>さあどうだ!......ん?ありゃ?何も起こらない。返事がない、ただの屍のようだ。?おお!先ほどの参考記事にヒントがあった!import文のfromの中では必ず./や../、/、といったパスで記述しなければなりません。xxx.jsというように記述するのはNGで、./xxx.jsとファイルパスを明確に記載します。MDN例えばモジュールの中身全体を読み込むにはこう書く。</script>オブジェクト名はimport側で命名していい。この中にjsファイルの関数が入る。モジュール内の複数の関数を読み込むにはこう書く。default」を使うとexport側は無名関数にして、import側で名前をつけれる。