技術ブログ

プログラミング、IT関連の記事中心

通常のJavaScriptでグローバル定数を作成する方法

目次

はじめに

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してご確認ください。

github.com