【JavaScript入門】初心者がrequireの使い方で迷った時に読むまとめ!

こんにちは、ライターのマサトです!

今回は、JavaScriptファイルを読み込むことができる「require」について学習をしていきます!

サーバー側とフロント側で利用方法が異なるので混乱しがちですが、基本的な考え方は同じなのでしっかりと理解しておきましょう。この記事では、

  • 「require」とは?
  • 「require」の使い方

という基本的な内容から、

  • 「require」と「script」の違い
  • 「RequireJS」について

などの応用的な使い方に関しても解説していきます。この記事で、「require()」をしっかり学習して自分のスキルアップを目指しましょう!

「require」とは?

まずは、「require」について基本的な知識から見ていきましょう!「require」は、一般的にモジュール化されたJavaScriptファイルを読み込むために用いられます。

通常、JavaScriptのライブラリを読み込む場合は「scriptタグ」を使ってHTMLに記述しますよね?

しかし、例えばNode.jsのようにサーバーサイドでJavaScript単体を実行する場合はscriptタグが使えません。

そこで、JavaScriptファイルをモジュール化しておいてrequireから読み込んで実行するという手法が取られるようになりました。本記事ではこのrequireの使い方から通常のJavaScriptでも利用できる「RequireJS」についても解説していきます!

「require」の使い方

この章では、一般的によく使われるNode.jsにおける「require」の使い方について見ていきましょう!

主に、requireの書き方および実際のプログラミング手法について学んでいきます。

基本的な構文と書き方について

まずは、基本となる構文から見ていきましょう!Node.jsにおけるrequireは、npmで読み込んだモジュールに対してJavaScript側で利用できるようにするためのメソッドです。

次の構文例を見てください!

const 変数 = require( モジュール名 );

この例のように、requireの引数に読み込みたいモジュール名を指定するだけです。読み込んだモジュールは指定した変数に格納されるので、一般的なJavaScriptのインスタンスを作成する感覚に近いでしょう。

これにより、scriptタグを使わずにJavaScript単体でモジュール(ライブラリ)を読み込んで使えるわけです。

モジュールを読み込む方法

それでは、実際にモジュールを読み込んでみましょう!サンプル例として、タスクを自動化できる「gulp」をrequireを使って読み込んでみましょう!

次のサンプル例を見てください!

const gulp = require('gulp');

gulp.task('clean', function() {


    //ここにgulpの処理を記述する

});

この例では、requireの引数に読み込みたいモジュール名として「gulp」を指定しているのが分かりますね。

これにより、JavaScript側でgulpを利用することができるようになり、以降は自動化させたいタスク処理を記述できます。

「RequireJS」の使い方

この章では、フロント側(ブラウザ上)でrequireを使う方法について見ていきましょう!

主に、RequireJSを利用したJavaScriptファイルの読み込み方法について学んでいきいます。

フロント(ブラウザ上)でもrequireを使う方法

JavaScriptのファイルを分割したりして数が多くなってくると、scriptタグだけでは管理が難しくなってきますよね?

しかしながら、Node.jsのようにrequireを使ったファイルの読み込みはフロント(ブラウザ上)では用意されていません。そこで、利用したいのが「RequireJS」というライブラリです。

これは、まさにフロント側でrequireによるファイルの読み込みを実現できる機能を提供してくれます。ただし、構文(書き方)が少し違うので次の例をよく確認しておいてください!

require(読み込むファイル名, 関数処理)

特徴的なのは、requireの第1引数に読み込みたいJavaScriptファイルを指定するという点です。これは配列で指定できるので、複数のファイル読み込みにも対応しています。

あとは、第2引数の関数処理内で読み込んだファイルを元にしたJavaScriptコードを記述していくことになるわけです。

RequireJSを使ってJSファイルを読み込む方法

それでは、実際にRequireJSを使って簡単なJavaScriptファイルを読み込んでみましょう!RequireJSで読み込むためには、元になるJavaScriptファイルのコードを「define()」内に記述する必要があります。

例えば、「sample.js」というファイルを作成して次のように記述します。

define(function() {
    return function(num) {

        return num * num;

    };
});

これは任意の数値を2乗するだけのシンプルな関数です。この処理をdefine()内に記述し「return」で返すことで準備は完了です。

次に、requireを使って「sample.js」を読み込むには次のように記述します。

require(['sample'], function(num) {

  const result = num(10);
  
  console.log(result);

});

実行結果

100

requireの第1引数にファイル名として「sample」を設定し、関数内で2乗を返す処理を利用しているのが分かります。

「num(10)」と記述することで、「sample.js」で定義した関数を利用することができるのです。実行結果を見ると2乗した数値が取得できているのが分かりますね!

まとめ

今回は、JavaScriptファイルを読み込むことができる「require」について学習をしました!
最後に、もう一度ポイントをおさらいしておきましょう!

  • JavaScript単体でファイルを読み込むにはrequireが必要
  • Node.jsの場合はモジュール化されたファイルを読み込める
  • フロント側ではRequireJSを利用することで読み込むことができる
  • 上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

    LINEで送る
    Pocket

    ITエンジニアへ転職したい方におすすめ

    自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
    エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

    しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

    こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

    そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

    侍ワークスは、独自案件を多く掲載しているだけでなく、

    ・応募から就業まで一貫したサポート

    ・就業後もアフターフォロー

    といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

    まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

    書いた人

    マサト

    マサト

    フリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。
    独学でJavaScript, Node.js, Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。