目次
はじめに
Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptでグローバル定数を使用する方法を記載します。
プロジェクト構成
プロジェクトの構成は以下とします。
project ┣ index.html ┣ index.js ┗ const.js
グローバル定数の定義
「const.js
」に以下のように定数を定義します。
ここでは、「HELLO
」「SAMPLE
」の2つの定数を定義しています。
Object.defineProperty(window, "HELLO", { value: "ハロー", writable: false, }); Object.defineProperty(window, "SAMPLE", { value: "サンプル", writable: false, });
グローバル定数の取得
「index.js
」に以下のように定数を定義します。
「HELLO
」「SAMPLE
」の2つの定数を取得してコンソール出力しています。
console.log(HELLO); console.log(SAMPLE);
HTMLで呼び出し
「index.html
」に以下のように定数を定義します。
グローバル定数定義のJSファイルをインポートする必要がある点が注意です。
<!DOCTYPE html> <html lang="ja"> <head> <title></title> <meta charset="UTF-8" /> <script src="./const.js"></script> <script src="./index.js"></script> </head> <body></body> </html>
以下のGitHubにソースコードをアップしていますので、実際に確認したい方はPullしてご確認ください。