JavaScript【JavaScript入門】初心者がrequireの使い方で迷った時に読むまとめ!マサト2018/8/62019/5/13こんにちは、ライターのマサトです!今回は、JavaScriptファイルを読み込むことができる「require」について学習をしていきます!サーバー側とフロント側で利用方法が異なるので混乱しがちですが、基本的な考え方は同じなのでしっかりと理解しておきましょう。「require」と「script」の違い「RequireJS」についてなどの応用的な使い方に関しても解説していきます。まとめ「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側で利用できるようにするためのメソッドです。);この例のように、requireの引数に読み込みたいモジュール名を指定するだけです。読み込んだモジュールは指定した変数に格納されるので、一般的なJavaScriptのインスタンスを作成する感覚に近いでしょう。これにより、scriptタグを使わずにJavaScript単体でモジュール(ライブラリ)を読み込んで使えるわけです。//ここにgulpの処理を記述する});この例では、requireの引数に読み込みたいモジュール名として「gulp」を指定しているのが分かりますね。これにより、JavaScript側でgulpを利用することができるようになり、以降は自動化させたいタスク処理を記述できます。「RequireJS」の使い方この章では、フロント側(ブラウザ上)でrequireを使う方法について見ていきましょう!主に、RequireJSを利用したJavaScriptファイルの読み込み方法について学んでいきいます。フロント(ブラウザ上)でもrequireを使う方法JavaScriptのファイルを分割したりして数が多くなってくると、scriptタグだけでは管理が難しくなってきますよね?しかしながら、Node.jsのようにrequireを使ったファイルの読み込みはフロント(ブラウザ上)では用意されていません。そこで、利用したいのが「RequireJS」というライブラリです。これは、まさにフロント側でrequireによるファイルの読み込みを実現できる機能を提供してくれます。関数処理)特徴的なのは、requireの第1引数に読み込みたいJavaScriptファイルを指定するという点です。これは配列で指定できるので、複数のファイル読み込みにも対応しています。あとは、第2引数の関数処理内で読み込んだファイルを元にしたJavaScriptコードを記述していくことになるわけです。RequireJSを使ってJSファイルを読み込む方法それでは、実際にRequireJSを使って簡単なJavaScriptファイルを読み込んでみましょう!RequireJSで読み込むためには、元になるJavaScriptファイルのコードを「define()」内に記述する必要があります。「sample.js」というファイルを作成して次のように記述します。};});これは任意の数値を2乗するだけのシンプルな関数です。この処理をdefine()内に記述し「return」で返すことで準備は完了です。次に、requireを使って「sample.js」を読み込むには次のように記述します。console.log(result);});実行結果100requireの第1引数にファイル名として「sample」を設定し、関数内で2乗を返す処理を利用しているのが分かります。「num(10)」と記述することで、「sample.js」で定義した関数を利用することができるのです。実行結果を見ると2乗した数値が取得できているのが分かりますね!まとめ今回は、JavaScriptファイルを読み込むことができる「require」について学習をしました!最後に、もう一度ポイントをおさらいしておきましょう!JavaScript単体でファイルを読み込むにはrequireが必要Node.jsの場合はモジュール化されたファイルを読み込めるフロント側ではRequireJSを利用することで読み込むことができる上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。