一つのファイルにいろいろなコードを書いていると、後から見返した時に何のコードを書いていたのかがわからなくなることがありませんか？
今回は、別のファイルからコードを読み取ることができるrequireについて、ひな姉が解説してくれるそうです。
登場人物
- 天野 陽菜（あまの ひな）: おしゃれな自社サービス開発企業に勤めるフロントエンドエンジニア。明るくフレンドリーで、後輩の育成にも積極的。実は元ゲーマーで方向音痴。
- 後輩ちゃん: JavaScriptを学び始めた初心者。
ファイルが増えたらどうする？
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]ひな姉、こんにちは！最近JavaScriptで書くコードが少しずつ長くなってきて、一つのファイルに全部書くと、なんだかごちゃごちゃしてきたんです。もっと整理する方法はないんでしょうか？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]こんにちはー！そうそう、その悩み、プログラマーあるあるだね！良いところに気がついたよ。コードが長くなってきたら、機能をまとまりごとに別のファイルに分けるのが基本なんだ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]そうなんですか！でも、ファイルを分けたら、どうやってそれぞれのファイルの中身を連携させるんですか？別のファイルに書いた関数を、別のファイルから使ったり…。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]まさにそこが今日のテーマ！そんな時に活躍するのが、require（リクワイア）っていう魔法の命令なんだ。これは、他のファイルに書かれたコードを、今のファイルで使えるように読み込むためのものなんだよ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]読み込む！なんだかすごく便利そうです！[/voice]
require って何？（Node.jsの世界で大活躍！）
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]まず、require が主に活躍するのは、Node.jsっていう環境でJavaScriptを使う時なんだ。Node.jsは、ウェブサイトの裏側（サーバー）を作ったり、パソコンの中で動くツールを作ったりするのに使うんだよ。君がいつもウェブサイトを見るブラウザとは、ちょっと違う場所でJavaScriptを動かすイメージかな。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]Node.js！聞いたことはありますけど、普段使っているブラウザと違うんですね。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そう！require は、そのNode.js環境で、別のJavaScriptファイル（これを『モジュール』って呼ぶことが多いんだ）を読み込むための命令なんだ。例えるなら、料理をする時に、必要な材料や調理器具を戸棚から持ってくる、そんな役割だね。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]なるほど！戸棚から持ってくる…。[/voice]
require の仕組み：『エクスポート』と『インポート』
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]じゃあ、実際にどうやって使うのか見てみよう。例えば、計算をする機能をまとめたファイルと、それを使うファイルに分けたいとするね。[/voice]
a) まずは『エクスポート』（外に公開する）
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]まず、他のファイルから使ってほしい機能（関数や変数など）を、そのファイルの外に『公開』する必要があるんだ。これを『エクスポート』って呼ぶよ。module.exports という特別な書き方を使うんだ。[/voice]
//ファイル名:math.js
const add = (a,b) =>{
return a+b;
}
const subtract = (a,b) =>{
return a-b;
}
//add関数とsubtract関数をファイルの外に公開する
module.exports = {
addFunction:add,
subtractFunction: subtract
};[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]module.exports っていうのが、外に公開するための呪文なんですね！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]math.jsではアロー関数を使っているよ！
アロー関数に関しては別の記事で紹介しているから、わからない場合は合わせて読んでみてね！[/voice]
[kanren postid=”956″]
b)次に『インポート』（読み込む）
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そう！そして次に、この math.js で公開した機能を、別のファイルで『インポート』、つまり読み込むんだ。ここで require の出番だよ！[/voice]
//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[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]わ！ require('./math.js') って書くだけで、別のファイルで定義した関数が使えるようになるんですね！これはすごく便利です！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]でしょ？ . は『現在のディレクトリ』、つまり『今いるフォルダ』って意味だから、同じフォルダにある math.js を読み込む時は ./math.js って書くんだよ。もしフォルダが違えば、パスをちゃんと書いてあげればOKだよ。[/voice]
なぜ require を使うの？コードを整理するメリット
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]このようにファイルを分割して require で連携させることを『モジュール化』って呼ぶんだ。これにはたくさんのメリットがあるんだよ。
- コードが整理される: 機能ごとにファイルを分けるから、どこに何が書いてあるか分かりやすくなる。ごちゃごちゃしたコードを見るのが苦手な人（私とか！）には、特に嬉しいポイントだね。
- 再利用しやすくなる: 一度作った便利な関数や機能を、色々なプロジェクトや別のファイルで簡単に使い回せるようになる。
- 管理しやすくなる: 特定の機能にバグが見つかったり、新しい機能を追加したい時に、その機能が書いてあるファイルだけを見ればいいから、修正や変更が楽になるんだ。
- 複数人での開発がスムーズに: チームで開発する時も、それぞれが担当するファイルを分けて作業できるから、効率が上がるよ。
[/voice]
大事な注意点！ブラウザとrequire
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]ここで一つ、とっても大事な注意点があるんだ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_57_27.png” name=”後輩ちゃん” type=”l line”]何ですか？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]ここまで説明してきた require は、ブラウザ上で動くJavaScriptでは、基本的にはそのまま使えないんだ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.png” name=”後輩ちゃん” type=”l line”]えっ！そうなんですか！？じゃあ、ブラウザのウェブサイトを作るときは使えないってことですか…？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]そうなんだ。require は主にNode.jsで使われる『CommonJS』っていうモジュールシステムの一部なんだ。ブラウザのJavaScriptは、もともと別の方法でファイルを読み込んでいたんだよ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_38.png” name=”後輩ちゃん” type=”l line”]じゃあ、ブラウザでファイルを分けて書くのは無理なんですか…？[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]諦めないで！今のモダンなJavaScript開発では、ブラウザでもコードを分割して読み込むための別の方法があるんだ。
それは『ES Modules（ESモジュール）』っていう新しい仕組みで、import（インポート）と export（エクスポート）っていうキーワードを使うんだよ。Node.jsでも、最近はこのES Modulesが使えるようになってきているんだ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]あるいは、『Webpack（ウェブパック）』とか『Parcel（パーセル）』みたいな、たくさんのJavaScriptファイルを一つにまとめてくれるツール（これを『ビルドツール』って呼ぶんだ）を使う方法もあるんだ。これらのツールが、君の書いたrequireを使ったコードを、ブラウザが理解できる形に変換してくれるんだよ。[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]なるほど！ require はNode.jsの世界がメインで、ブラウザには import とか別の仕組みがあるんですね。ちょっと複雑だけど、知っておくべきことですね！[/voice]
まとめ：require でコードを整理しよう！
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]
今日のポイントをまとめると…
requireは、Node.js環境で、別のJavaScriptファイル（モジュール）を読み込むための命令だよ。module.exportsで機能を公開し、requireで読み込んで使うのが基本的な流れ。- コードを整理し、再利用しやすく、管理しやすくする『モジュール化』に役立つんだ。
- 大事な注意点！
requireはブラウザのJavaScriptでは直接使えないことが多いよ。ブラウザではimport/export（ES Modules）や、ビルドツールが使われることが多いんだ。
どうだったかな？ require の役割と、どんな場所で使われるかがイメージできたかな？」
[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-11_49_35.png” name=”後輩ちゃん” type=”l line”]はい！コードを分割して整理できるのがすごく便利だって分かりました。Node.jsの勉強をする時には、ぜひ require を使ってみます！ブラウザとの違いも教えてもらえて助かりました！[/voice]
[voice icon=”https://samurai-marketinglab.com/wp-content/uploads/2025/05/ChatGPT-Image-2025年5月30日-18_16_00.png” name=”天野先輩” type=”l line”]よかった！それぞれの環境で最適な方法を選ぶのが、プロのエンジニアへの道だね。また次回も新しいことを学んでいこうね。それじゃあ、またね！[/voice]
コメント