今回のお題はメインとなるjsの可読性を上げようかなって話
まぁそういう意味では前回の「document.getElementById」を毎回書くのを止めようかなって話と同じですね。
javascriptで長いコードを外部化する方法
まず、古来からのjavascriptの読み込み方法というのは
<script type="text/JavaScript" src="./main.js"></script>
こんな感じです。
ですがこの読み込み方法では外部ファイルjsを参照出来ません。
jsのファイルの読み込み方法から変更する必要があります。
<script type="module" src="main.js"></script>
この様にタイプの指定をmoduleという指定方法でjavascriptを読み込みます。
①従来の読み込み方法
違いとしては古来の方法は「window.」というブラウザのグローバル空間で定義されていています。例えばwindow.a=10
var a=10
と、どちらで定義しても同じです。「window.」のプロパティの形で登録されていて暗黙的に省略してるだけです。
通常の関数もそうです。
function aaa() { console.log("こんにちは");}
console.log(window.aaa); // 関数 aaa
aaa();
じゃあ、node.jsの場合は？となる人も居るかと思いますがnodeでは「global.」オブジェクトに定義されます。ですので、
global.myVar = 10;
console.log(global.myVar); // 10
console.log(myVar); // 10
nodeではこんな感じになります。
話しを戻して、例えば、
<script type="text/JavaScript" src="./main1.js"></script>
<script type="text/JavaScript" src="./main2.js"></script>
と、二つ読み込んだ場合はどちらにコードを記載してもどちらかでも変数にも関数にもアクセスできます。
main1に「function a(){ console.log("test");}」と記述しているならば、main2で「a()」と書くだけでアクセスできます。
ファイル自体は分かれていても、コードの処理領域・スコープが同じなのです。
更に言えば読み込んでいるhtml側もそうです。
例えば、
<button onclick="a()">ぼたん</button>
はボタンを押すだけで「a()」を実行できます。
②モジュールの読み込み方法
次にmoduleですが、こちらは処理領域がjsのファイル内に閉じられています。
<script type="module" src="main1.js"></script>
<script type="module" src="main2.js"></script>
例えばmain1.jsに「function a(){ console.log("test");}」記述されている時に
html側から「<button onclick="a()">ぼたん</button>」を押しても実行出来ません。
「window.」領域にモジュールの内容がいない為html側からアクセスできません。
対応については順番に説明します。
②-1：モジュールのスコープ
関数を定義した場合も同様で、「const c = (x) => x+1」のように定義した場合、html側からも他のjsファイルからもアクセス出来ません。
②-2：他のjsファイルへのアクセス
現状ではmain1.jsは完全に独立していて他のjsに影響されないしmain1.jsも他のjsへは影響を与える事は出来ません。
この方式はコーディング的にスコープ周りは強固ですが面倒臭いのは否めない。
②-2-1：エクスポートする側
export const bb=2
const cc=3
export function ee() {}
function ff() {}
コードを流してみた時に頭に「export 」があるかどうかで外部から見れるかが直ぐに分かります。
２．一番最後に「export 」対象を列挙する方法①
const aa=1
const bb=2
const cc=3
function ee() {}
function ff() {}
export { aa, bb, ee,ff};//まとめて指定
また、ある程度量がある場合列挙するのがそれはそれで面倒かもしれない。
const aa=1
const bb=2
const cc=3
function ee() {}
function ff() {}
export { aa, bb, ee,ff};//まとめて指定
export default { bb, dd, ee,ff}; // デフォルトエクスポート
モジュールにつき1回だけ可能な指定方法、手間的には対象を列挙①と変わりません。
インポート時に楽が出来るかどうかの違いです。詳細はインポート側で説明。
②-2-2：インポートする側
１．エクスポートされた変数関数をそのまま使えるようにする
console.log(aa);
console.log(dd());
エクスポートされた変数や関数の名前を指定して名前を変えずそのままそれを使えるようにします
２．一括取り込み①「export default」読み込み
console.log(datas.aa);
console.log(datas.dd());
オブジェクトの様に一括で取り込み、プロパティの様に対象全てを利用する事が出来ます。
モジュール1つにつき1回だけ可能。
console.log(datas2.aa);
console.log(datas2.dd());
エクスポート対象を*で全て対象にしてasで名前を付けて纏めています
こちらもオブジェクトとプロパティの様に対象対象全てを利用できます
４．エクスポートされた変数関数の名前を変更して取り込む
import { aa as zz, dd as yy} from './db.js';
console.log(zz);
console.log(yy());
エクスポートされた変数や関数の名前を指定した後にasで変数関数の名前を変更して取り込みます。
５．一旦全て取り込んで個別に取り出す(分割代入)
import * as datas2 from './db.js';
const { aa, dd } = datas2 ;
console.log(aa);
console.log(dd());
一旦全て取り込むのは既に紹介しましたがオブジェクトとプロパティのようなアクセスでした。分割代入を使えば元の名前で変数関数を取り出して使う事ができます。
html側からアクションを起こす方法
コード側のやり取りの説明が終わったので今度はhtmlからのアクションはどうするのかについてです。「window.」空間外にjavascriptがいる為アクセス出来ません。しかもjsと違ってhtml側からではインポートの構文が使えません。解決方法は主に２つ。
①「window.」空間に来てもらう
html側からアクセス出来ないのは「window.」空間に対象の変数も関数も居ない為アクセスできないのですから、js側で「window.」に定義してhtml側の空間に下りてきて貰えばいいのです。■js(module)
function dd() {}
window.dd=dd;
■html
<button onclick="dd()">ボタンをクリック</button>
こうする事でモジュール空間にあった変数や関数を「window.」空間に定義してhtml側からでもアクセスできるようになります
②イベントリスナーでjs側からhtml側アクション待ちで待機する
■js(module)function dd() {}
document.getElementById("pp").addEventListener("click", dd);
■html
<button id="pp">ボタンをクリック</button>
onclickと違い一方方向にアクションが進んでいくのではなくjs側で待ち状態にしてhtml側のアクションの後にjs側でアクションされた対象を特定して実行する
どのボタンかの特定が必要に足る為idなどの識別子は必ず必要になる。
③「window.」空間の上にオブジェクトの空間を挟む
■js(module)function dd() {}
window.obj1= window.App || {};
<button onclick="obj1.dd()">ボタンをクリック</button>
一階層浮かせているのでonclickで実行する時にオブジェクト名も必要になります。
現状のjavascriptの一部を分離するために色々と調べたんだけど今から分割するのは手間が掛かり過ぎるかも・・・うーん困った。
調べる前は外部ファイルに定義して必要なものだけ引っ張ってこればいいのかなと思っていたけどエクスポートとインポートが相互で処理が必要で思ったより簡単ではなかった。
