ひな姉と学ぶJS！プログラムを分割する魔法 require を理解しよう

一つのファイルにいろいろなコードを書いていると、後から見返した時に何のコードを書いていたのかがわからなくなることがありませんか？
今回は、別のファイルからコードを読み取ることができるrequireについて、ひな姉が解説してくれるそうです。

登場人物

天野陽菜（あまのひな）: おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
後輩ちゃん: JavaScriptを学び始めた初心者。

ファイルが増えたらどうする？

ひな姉、こんにちは！最近JavaScriptで書くコードが少しずつ長くなってきて、一つのファイルに全部書くと、なんだかごちゃごちゃしてきたんです。もっと整理する方法はないんでしょうか？

こんにちはー！そうそう、その悩み、プログラマーあるあるだね！良いところに気がついたよ。コードが長くなってきたら、機能をまとまりごとに別のファイルに分けるのが基本なんだ。

そうなんですか！でも、ファイルを分けたら、どうやってそれぞれのファイルの中身を連携させるんですか？別のファイルに書いた関数を、別のファイルから使ったり…。

まさにそこが今日のテーマ！そんな時に活躍するのが、require（リクワイア）っていう魔法の命令なんだ。これは、他のファイルに書かれたコードを、今のファイルで使えるように読み込むためのものなんだよ。

読み込む！なんだかすごく便利そうです！

`require` って何？（Node.jsの世界で大活躍！）

まず、require が主に活躍するのは、Node.jsっていう環境でJavaScriptを使う時なんだ。Node.jsは、ウェブサイトの裏側（サーバー）を作ったり、パソコンの中で動くツールを作ったりするのに使うんだよ。君がいつもウェブサイトを見るブラウザとは、ちょっと違う場所でJavaScriptを動かすイメージかな。

Node.js！聞いたことはありますけど、普段使っているブラウザと違うんですね。

そう！require は、そのNode.js環境で、別のJavaScriptファイル（これを『モジュール』って呼ぶことが多いんだ）を読み込むための命令なんだ。例えるなら、料理をする時に、必要な材料や調理器具を戸棚から持ってくる、そんな役割だね。

なるほど！戸棚から持ってくる…。

`require` の仕組み：『エクスポート』と『インポート』

じゃあ、実際にどうやって使うのか見てみよう。例えば、計算をする機能をまとめたファイルと、それを使うファイルに分けたいとするね。

a) まずは『エクスポート』（外に公開する）

まず、他のファイルから使ってほしい機能（関数や変数など）を、そのファイルの外に『公開』する必要があるんだ。これを『エクスポート』って呼ぶよ。module.exports という特別な書き方を使うんだ。

//ファイル名:math.js

const add = (a,b) =>{
return a+b;
}

const subtract = (a,b) =>{
return a-b;
}

//add関数とsubtract関数をファイルの外に公開する
module.exports = {
addFunction:add,
subtractFunction: subtract
};

module.exports っていうのが、外に公開するための呪文なんですね！

math.jsではアロー関数を使っているよ！
アロー関数に関しては別の記事で紹介しているから、わからない場合は合わせて読んでみてね！

ひな姉と学ぶJavaScript！スッキリ書ける「アロー関数」ってなに？

2025年5月31日

b)次に『インポート』（読み込む）

そう！そして次に、この math.js で公開した機能を、別のファイルで『インポート』、つまり読み込むんだ。ここで require の出番だよ！

//math.jsを読み込む
const calculationTools = require('./math.js');

const sum = calvulationTools.addFunction(5,3);
console.log('5 + 3 =',sum)//5+3=8

const difference - calculationTools.subtractFunction(10,4);
console.log('10 - 4 =',difference);//10-4=6

わ！ require('./math.js') って書くだけで、別のファイルで定義した関数が使えるようになるんですね！これはすごく便利です！

でしょ？ . は『現在のディレクトリ』、つまり『今いるフォルダ』って意味だから、同じフォルダにある math.js を読み込む時は ./math.js って書くんだよ。もしフォルダが違えば、パスをちゃんと書いてあげればOKだよ。

なぜ `require` を使うの？コードを整理するメリット

このようにファイルを分割して require で連携させることを『モジュール化』って呼ぶんだ。これにはたくさんのメリットがあるんだよ。

コードが整理される: 機能ごとにファイルを分けるから、どこに何が書いてあるか分かりやすくなる。ごちゃごちゃしたコードを見るのが苦手な人（私とか！）には、特に嬉しいポイントだね。
再利用しやすくなる: 一度作った便利な関数や機能を、色々なプロジェクトや別のファイルで簡単に使い回せるようになる。
管理しやすくなる: 特定の機能にバグが見つかったり、新しい機能を追加したい時に、その機能が書いてあるファイルだけを見ればいいから、修正や変更が楽になるんだ。
複数人での開発がスムーズに: チームで開発する時も、それぞれが担当するファイルを分けて作業できるから、効率が上がるよ。

大事な注意点！ブラウザと`require`

ここで一つ、とっても大事な注意点があるんだ。

何ですか？

ここまで説明してきた require は、ブラウザ上で動くJavaScriptでは、基本的にはそのまま使えないんだ。

えっ！そうなんですか！？じゃあ、ブラウザのウェブサイトを作るときは使えないってことですか…？

そうなんだ。require は主にNode.jsで使われる『CommonJS』っていうモジュールシステムの一部なんだ。ブラウザのJavaScriptは、もともと別の方法でファイルを読み込んでいたんだよ。

じゃあ、ブラウザでファイルを分けて書くのは無理なんですか…？

諦めないで！今のモダンなJavaScript開発では、ブラウザでもコードを分割して読み込むための別の方法があるんだ。
それは『ES Modules（ESモジュール）』っていう新しい仕組みで、import（インポート）と export（エクスポート）っていうキーワードを使うんだよ。Node.jsでも、最近はこのES Modulesが使えるようになってきているんだ。

あるいは、『Webpack（ウェブパック）』とか『Parcel（パーセル）』みたいな、たくさんのJavaScriptファイルを一つにまとめてくれるツール（これを『ビルドツール』って呼ぶんだ）を使う方法もあるんだ。これらのツールが、君の書いたrequireを使ったコードを、ブラウザが理解できる形に変換してくれるんだよ。

なるほど！ require はNode.jsの世界がメインで、ブラウザには import とか別の仕組みがあるんですね。ちょっと複雑だけど、知っておくべきことですね！

まとめ：`require` でコードを整理しよう！

今日のポイントをまとめると…

require は、Node.js環境で、別のJavaScriptファイル（モジュール）を読み込むための命令だよ。
module.exports で機能を公開し、require で読み込んで使うのが基本的な流れ。
コードを整理し、再利用しやすく、管理しやすくする『モジュール化』に役立つんだ。
大事な注意点！ require はブラウザのJavaScriptでは直接使えないことが多いよ。ブラウザでは import/export（ES Modules）や、ビルドツールが使われることが多いんだ。

どうだったかな？ require の役割と、どんな場所で使われるかがイメージできたかな？」

はい！コードを分割して整理できるのがすごく便利だって分かりました。Node.jsの勉強をする時には、ぜひ require を使ってみます！ブラウザとの違いも教えてもらえて助かりました！

よかった！それぞれの環境で最適な方法を選ぶのが、プロのエンジニアへの道だね。また次回も新しいことを学んでいこうね。それじゃあ、またね！

アーカイブ

カテゴリー