JavaScriptでJSやCSSを動的インポートする （import.js）

JavaScriptで他のJSファイルやCSSファイルをインポートするのに便利なのがimport.js。WebInventif.frで紹介されているチュートリアルだが、実際に利用できるJavaScriptコードも取得でき、サンプル用のコードを削除すれば、そのまま利用できる。

本来であればHTMLヘッダで呼出せば良いが、特定の条件やページのみで実行したい場合などに利用できる。また、スタイルシートのインポートも可能なので、動的なデザイン変更をしたい場合にも利用できる。

import.jsの最後の行を消す
以下のコードはサンプル用のコードになるので、削除する。実際にインポート処理を呼出す際のコードでもあるので、修正して利用しても良い。

実際の動作は、HTMLヘッダに<script>、<link>タグを出力して指定したファイルをインポートする動作になる。しかし、こうした処理が行えないブラウザには、チュートリアルの”En savoir plus”で別途解説されているので、そちらのコードを参考にすると良い。