JavaScript でモジュール化したファイルを読み込むrequireの使用方法について

Question

sample.jsの関数をhoge.jsファイルで呼び出す際にrequireを使用して呼び出したいと思っています。

ディレクトリ構造

hoge-
    |-hoge.js =>関数を実行するファイル
    |-sample.js =>関数を定義したファイル

しかし、現状VSCodeのターミナルより　node hoge.jsで実行すると下記のようなエラー表示されており、
実行することができません。

$ node hoge.js
internal/validators.js:124
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Array

また実行したコードは下記となります。
sample.js↓

define(function(){
    return function(num){
        return num * num
    }
})

hoge.js

require(['sample'],function(num){
    const result = num(10);
    console.log(result)
})

どなたかご教示いただけませんでしょうか？

Comments

[m.ts10806]

エラーに書いてある通りのように思いますが、エラーは読まれたのでしょうか。
https://qiita.com/cannorin/items/eb062aae88bfe2ad6fe5

[takochan1192]

コメントありがとうございます。
すみません。エラーの意味が理解できませんでした。ご教示いただけますと幸いです。

[m.ts10806]

「意味が理解できない」の意味が分かりません。
英語が読めないのか、Google翻訳にかけてにほんごにしてもなお理解できないのか。
基本的なオブジェクトの概念理解できていれば翻訳にかけずともおおよそ予測はつく内容とも思います。

[takochan1192]

コメントありがとうございます。Google翻訳などにかけて、頑張ってみます。

Answer 1

miyabi-sun さんが　NodeJS のモジュールに関する内容を回答されています。
※JavaScriptモジュールにおいて、誤解しないための補足になります。

ご質問のコードで示されている define()、require() は　RequireJS の使い方になります。

RequireJS をざっくり語るとこんな感じです

• ブラウザ側のモジュールローダライブラリ
• ブラウザ側JavaScriptに「モジュール」の考え方が無かった時（NodeJSの登場以降）に誕生。

ブラウザのグローバルスコープに define(), require() を拡張する形で実装される。

• 非同期なモジュール読み込みができる実装であり、AMD(the Asynchronous Module Definition)と呼ばれた。
• ブラウザ側JavaScriptのモジュール化を支持する開発者によって活用された。
• 現在はES6モジュールが仕様策定され、過去のものになりつつある(IEのためにバンドラーで応用される)

JavaScript用モジュールとしては NodeJS のほうが先ですので、これを踏まえて、もう一度 miyabi-sun さんの回答を読んでみてください。

---

RequireJS 関連は「興味があれば」以下のような検索で調べることができます。

• Why AMD? (RequireJS 開発者による提案)

Google検索：

• JavaScript モジュール化
• JavaScript モジュール AMD ... RequireJS の実装コンセプト

Comments

[miyabi-sun]

あの書き方はRequireJSだったんですね
高評価10個分くらい勉強になりました、ありがとうございます。

[AkitoshiManabe]

今もブラウザとNodeJSのモジュールに違いがありますので、NodeJS（npm）側も ES6モジュールスタイルに変わるかどうか（ES6モジュールスタイルに統一されてゆくかどうか）が気になるところですね。

[takochan1192]

ご丁寧にご回答いただきまして誠にありがとうございます。
RequireJSの書き方とは全く知りませんでした。自分で質問しておきながら、お恥ずかしい限りです。
検索キーワードまでご教示いただきまして本当にありがとうございます。
早速、検索させていただきました。
ご教示いただきました事をしっかりと調べて、学ばせていただきたいと思います。

Answer 2

2つの質問を総合したような感じで
まだNode.js流儀の開発の流れが身についてないのだと思います。

そこで、勉強が捗るように初手で何をやるべきか、その意味は？
これに集中して解説していきます。

この回答をとっかかりにしながら進めてください。

---

requireの歴史

JavaScriptはブラウザ上でDOMツリーを書き換えるために作られた言語です。
そのため、外部ライブラリは「別のスクリプトタグでグローバル変数に定義すればええやん」という
他のプログラミング言語、汎用スクリプト言語ではありえない実装になっています。

GoogleMap等が台頭してきて一気に大ブレイクし、
パソコン上で汎用スクリプト言語で動かしたい欲求が生まれてきました。
その結果作られたのがNode.jsです。

Node.jsはJSにはない外部ファイルを読み込む仕組みを作る必要がありました。
そこでCommonJSに目をつけ、これをベースに実装を行いました。
CommonJSは大雑把に説明すると
「JSの外部ライブラリ不便だよね、要望として提出するために仕様だけでも詰めておこうか」
という形で存在している仕様で、メジャーな実装はNode.jsが台頭してくるまでありませんでした。

requireの使い方

Node.jsではrequire関数を使うことで
外部のJSファイルを呼び出して実行したり、
結果を取り出す事ができます。

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

requireが要求する引数は文字列です。
const moduleName = require('module-name');
こういう使い方にしてください。

引数の文字列が下記の条件で探しに行く箇所が変わります。

• 先頭文字が./で始まる: JSファイルの存在しているディレクトリからJSファイルを探す
• 先頭文字が../で始まる: JSファイルからみて親ディレクトリからJSファイルを探す
• それ以外: node_modulesディレクトリ内から該当モジュールを検索する

この辺はUnix、Linuxのパスあるあるですね。
自分が同じディレクトリに複数JSファイルを作成して参照したい場合は
const hoge = require('./hoge.js');
みたいにしないとnode_modulesを探しに行って「モジュールが無い！？」とエラーになるので注意してください。

node_modulesとは？

Node.jsは専用パッケージ管理ツールのnpmと密接に関係しています。
npm install [module-name]
上記のように入力することでnpmサイトからモジュールをDLしてきて、
node_modulesディレクトリを作成してその中で管理します。

しかし、複数開発者がJoinしてきた時にどのモジュールを使っているか確認したいですよね？
なので、package.jsonというファイルを生成して管理するのが基本です。

package.jsonはプロジェクトルートにただ一つ存在します。
npmは基本的にこのpackage.jsonファイルを常に確認しながら、
package.jsonが存在するディレクトリにnode_modulesディレクトリを作成し、
DLしたモジュールを賢く管理しています。

package.jsonを作ってみよう

npm initコマンドを使います。
すると対話シェルが立ち上がり、プロジェクトの概要説明等を入力させた後、
コマンドを入力したディレクトリにpackage.jsonファイルを設置してくれます。
対話シェルが煩わしいなら--yesオプションをつけると、適当に空欄にしながらpackage.jsonファイルを作ってくれます。
後でエディタで開いて空欄の項目を適宜埋めれば良いでしょう。

Node.jsのプロジェクトを作る時は
必ずこのnpm initが起点となります。
ここからnode_modulesディレクトリを作ってプロジェクトを管理していくわけですね。

$ npm init --yes

$ ls
package.json

$ npm install [module_name]

$ ls
package.json node_modules/

requireされる側のJSファイルの書き方

requireされる側のJSの書き方もまだのようなので回答します。

Node.jsではJavaScriptと違い、
外部モジュールを扱うためにrequireという関数が勝手にグローバル変数に追加されています。

それと同じように、
requireされた時に値をrequire元へ返す為の変数も定義されています。
module.exportsという値です。

これに代入演算子で代入することでrequire元で使えるようになります。

// 値を加算するadd関数のJSファイル
// add.js
module.exports = function (a, b) {
  return a + b;
}

// それを利用する
// index.js
const add = require('./add.js');
console.log(add(3, 5));

$ node index.js
8

このように動作するか試してみてください。

Comments

[takochan1192]

非常に分かり易くご回答いただき、感謝の言葉が見つかりません。
本当にありがとうございました。
今携わっているプロジェクトで、Nuxtを使用しているのですが、node.jsやJavaScriptの知識が浅く、学習の必要性を感じておりましたが、なかなか周囲に教えていただける方がおらず非常に困っておりました。
ご教示いただきました方法で、動作を確認することができました。
今回ご回答いただきました内容を何度も読み返させていただき、
理解を深めさせていただきます。
本当にありがとうございました。

[takochan1192]

ちなみになんですが、非常に初歩的な質問でお恥ずかしいのですが、
ご回答にございました
$ npm install [module_name]
の[module_name]はディレクトリに存在しているjsファイル名のことでしょうか？
$npm install index.js
とコマンドを実行してもエラーとなりました。
$npm install でコマンドを実行しnode_modulesが入りました。
ご教示いただけますと幸いです。

[miyabi-sun]

[module_name]の部分は、
npmのサイトで配布されているモジュールの名前が入ります。

例えば日時のデータを扱いたいから何かライブラリはないかなーと探して、
Day.jsというモジュールを発見したとしましょう。
https://www.npmjs.com/package/dayjs

これのnpmサイト上での登録名は「dayjs」です。
`npm install dayjs`でDay.jsを導入できるよ。
Node.js上で使うときも`const dayjs = require('dayjs');`で呼び出せるよって事です。

今回行った`npm install`とモジュール名を省略して実行した場合は挙動が変わります。
まず`package.json`ファイルを読み込んで、
`dependences`キーに記載してあるモジュール名を全てインストールしてくれます。
(npmのサイトからモジュールをダウンロードして`node_modules`ディレクトリの中に放り込む)

なので、後から開発者が増えたり、コードの変更でこのライブラリ要らんから削除しちゃおうとなった時
`package.json`ファイルをエディタで開いて読めば理解したり、思い出しやすくなるわけです。

[takochan1192]

ご回答いただきましてありがとうございます。
そういうことだったのですね。
module_name の意味を全く理解しておりませんでした。
勉強になりました。本当にありがとうございました。