javascriptのrequireの使い方

javascriptのrequireを使ったモジュール化についてとても詰まったためそれについて記事にします。
モジュール化されていない既存のコードがあり、それらをある程度のファイルに分割できても今までの関数などを使いまわしたい！でもやり方がわからない！
という状況の場合、こうすれば簡単にできるよ、というのをご紹介します。

requireについて

requireはバニラなjavascriptでは動作しません。
webpackやbrowserifyなどを使用する必要がありますが、ここではそれらについては触れません。
borwserifyの導入についてはこちらを参考にしてください。 arc-tech.hatenablog.com

requireで機能ごとのjsファイルで管理することで、一部の機能を使い回す、部分的に機能を外したいなどの内部での取り回しが大変良くなります。
requireを使うことで、機能別のjsファイルにすることにより、コードの可読性も高まるため、ぜひ覚えておきたい機能です。

モジュール化

例えば、以下のようなjsファイルを準備します

out.js

function execute(){
  console.log("startを実行しました！");
}

function piyo(hoge){
  return hoge;
}

class out {
  start() {
    execute();
  }
  test(hoge){
    return piyo(hoge);
  }
}

module.exports = out;

こちらについてindex.jsで読み込んでいきます

index.js

const out = require("./out");

const o = new out();
o.start();

const hoge = o.test("テキスト");
console.log(hoge); // テキストが返ってくる

このように記述することで、外部のjsファイルと連携することができます。

既存の一つのjsファイルから機能別にjsファイルに分割することはコード量によっては負担はありますが、分割さえしてしまえばclass化してしまい、既存の関数を呼び出すよう設定すれば比較的簡単にモジュール化ができます

まとめ

以上、分割されていないjsを極力簡単に分割jsファイルにする方法についてでした。
何かご指摘等ございましたらコメントでお願いいたします。