技術ブログ

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

トップ > JavaScript > 通常のJavaScriptで共通関数を作成する方法

通常のJavaScriptで共通関数を作成する方法

JavaScript

目次

はじめに

Reactなどのフレームワークを使用していない純粋なHTML/JavaScriptで共通関数を使用する方法を記載します。

プロジェクト構成

プロジェクトの構成は以下とします。

project
┣ index.html
┣ index.js
┗ common.js

共通関数の定義

「common.js」に以下のように定数を定義します。
ここでは、「hello」「sample」の２つの関数を定義しています。

helloはコンソール出力、smapleは戻り値がある関数です。

必ず、最初に「window.globalFunction = {};」を記載して初期化することを忘れない様にしてください。

window.globalFunction = {};

window.globalFunction.hello = () => {
  console.log("ハロー");
};

window.globalFunction.sample = () => {
  return "サンプル";
};

共通関数の実行

「index.js」に以下のように定数を定義します。
「hello」「sample」の２つの関数を実行してコンソール出力しています。

window.globalFunction.hello();
console.log(window.globalFunction.sample());

HTMLで呼び出し

「index.html」に以下のように定数を定義します。
グローバル定数定義のJSファイルをインポートする必要がある点が注意です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <script src="./common.js"></script>
    <script src="./index.js"></script>
  </head>

  <body></body>
</html>

以下のGitHubにソースコードをアップしていますので、実際に確認したい方はPullしてご確認ください。

github.com