【javascript】requireをブラウザで実行したい。

Question

最近 javascript を学習し始めたものです。

現在ブラウザ上でボタンを押したらmidiを作成する(出来れば再生もする)というwebアプリを目標に学習をしていて、

手始めにこれを使ってみようと考え、そのままコピペしました。

https://grimmdude.com/MidiWriterJS/

しかし、ボタンを押してメソッドが呼ばれ、
最初の行の『var MidiWriter = require('midi-writer-js');』
の部分で『require is not defined』というエラーが出ました。

調べた結果、そもそもブラウザで『require』を使うことは出来ないらしいというものを見つけ、更に調べた結果、

このようにするとブラウザでrequireを使う事が出来ると知りました。

https://qiita.com/gumieProf/items/e5ed3a919926af985e90

なのですが、実際にやってみて上手くいきませんでした。

【具体的に何をしてどうなっているか】

①：**『npm i -g browserify』**を実行。

②：『lib\app.js』というファイルを作成し、
**『var $ = require('midi-writer-js');』**の1行だけ書いておく。

③：『Script\MidiWriterJS.js』というファイルを作成し、
**『browserify lib\app.js -o Script\MidiWriterJS.js』**を実行。

④：先程③にて作成した『MidiWriterJS.js』の中身が変更されていることを確認。
(4000行くらい追記されてた。)

⑤：『Rhythm.php』でボタンを押すと『midi.js』の**『chbt()』を実行**を確認。
しかし、

【midi.js】

function chbt() {

//ここで『require is not defined』
var MidiWriter = require('Script\MidiWriterJS.js');

var track = new MidiWriter.Track();

track.addEvent(new MidiWriter.ProgramChangeEvent({ instrument: 1 }));

var note = new MidiWriter.NoteEvent({ pitch: ['C4', 'D4', 'E4'], duration: '4' });
track.addEvent(note);

の、『var MidiWriter = require('Script\MidiWriterJS.js');』で『require is not defined』のエラー。
// Generate a data URI
var write = new MidiWriter.Writer(track);
console.log(write.dataUri());
}

の、『var MidiWriter = require('Script\MidiWriterJS.js');』
の部分で**『require is not defined』**のエラー...。

結局、『require』が定義されていないと怒られています。

『MidiWriterJS.js』の使い方を誤解しているのかな？などと考えているのですが、
根本からして間違えている可能性もあり、なかなか先へ進めません。
④辺りまではいい感じにできていそうだと思っていたのですが...。

何か知っていること、アドバイス等々ありましたら教えて頂けると非常に助かります。

///////////////////////////////////////////////////////////////////////////
【関係ありそうなファイル】
|-- Rhythm.php (main)
|
|-- midi.js (実行するメソッドがある)
|
|-- lib
| |---app.js (requireする？)
|
|-- Script
| |--- MidiWriterJS.js (browserify実行で作成)
////////////////////////////////////////////////////////////////////////////

• node.js(16.2.0)
• npm(7.13.0)

Answer 1

requireを含むファイルは、すべてbrowserifyでの処理に掛ける必要があります。

browserifyは「requireを必要な処理に置き換える」ということをやっているので、ブラウザで直接requireを使えるようになるわけではありません。

Comments

[maisumakun]

> requireをブラウザで実行したい。

それは基本的にできません。browserifyなどで「requireを含まない」スクリプトに変換して対応することとなります。

[Knomono]

まだ理解が追い付いていないのですが、

今回『browserify lib\app.js -o Script\MidiWriterJS.js』を実行して追記された『MidiWriterJS.js』の中身は、
requireを使わないで『midi-writer-js』を使う場合こうですよというものに書き換えられたもの。という認識で合っていますか？

[maisumakun]

だいたいそんな感じです。

（ただし、その結果を別なファイルからrequire('Script\MidiWriterJS.js')のように呼ぶ、というのは適当ではありません）

[Knomono]

今、midi.jsの『var MidiWriter = require('Script\MidiWriterJS.js');』の部分を消して、

・MidiWriterJS.js を インスタンス化してmidi.jsで扱う
(例えば const MidiWriter = new MidiWriterJS())、

・MidiWriterJS.js を midi.js に importする
(例えば const MidiWriter02 = import('MidiWriterJS.js');)

など思いついたものを試して回っているのですが、
そもそも方向性としては合ってると思いますか？
もしくは、ボタンを押したらMidiWriterJS.jsの中のメソッドを直接呼び出して使ったりするのでしょうか？

[maisumakun]

> そもそも方向性としては合ってると思いますか？

なぜrequireを排除しているのでしょうか？（「browserifyした結果のファイル」をrequireするのが適当でない、といっただけで、require自体は使わないといけません）

[Knomono]

1.require()があると『require is not defined』が出る。
2.それを回避する為に代わりとなる『MidiWriterJS.js』を作成。
3.require()を消して、同じ場所で『MidiWriterJS.js』を呼び出して使えば
　require()を書くことなく参考サイトのようにMidiWriterJSを利用することが出来る。

と考えていたのですが、少し認識がずれていましたね。

[maisumakun]

> 2.それを回避する為に代わりとなる『MidiWriterJS.js』を作成。

それを解決するためにbrowserifyを使うのです。

[Knomono]

少し混乱してきてしまっているのですが、
browserifyを使って『MidiWriterJS.js』が出来たので、browserifyを扱えたのだと思っています。

しかし、ボタンを押したら呼ばれるchbt()内に、
参考サイトのコードと全く同じように書いても『require is not defined』と出てしまうのは、
browserifyが正しく出来ていない可能性があると考えられるのでしょうか？

それとも、正しくrequire()を呼び出せていないだけなのでしょうか？
今は
const MidiWriter = require('midi-writer-js');
でエラーが出ています。

[maisumakun]

> しかし、ボタンを押したら呼ばれるchbt()内に、
参考サイトのコードと全く同じように書いても『require is not defined』と出てしまうのは、

require()を書いたファイル（呼ばれる側ではなく、呼ぶ側）をbrowserifyで処理する必要があります。ブラウザから直接requireが見えてしまえばエラーです。

[Knomono]

何となく理解出来てきたような気がします。
今回、②でわざわざ『lib\app.js』を作成して③でそれをbrowserifyしてとかやっていましたが、
そんなことしないでrequire()があるmidi.jsに対して『browserify midi.js -o midiApp.js』のようなコマンドを実行して、作成された『midiApp.js』をRhythm.phpにあるボタンを押したら呼び出すようにすれば良かったという話ですか？

[maisumakun]

そうです。

[Knomono]

browserifyで新しく生成した『midiApp.js』では、onClick から呼ばれるメソッド(今回の場合『chbt()』)を呼ぼうとすると『chbt is not defined』と言われます。
browserifyで生成した場合メソッドの書き方も変更させなければならないというルールがあったりするのでしょうか？

[maisumakun]

そうですね、browserifyで作ったファイルの中の識別子は、ローカルなものになってしまってそのままでは外部からアクセスできません。

window.chbt=chbt;のように書いてグローバルエクスポートする、onclick属性を使わずJavaScript側からaddEventListenerを行うなど、書き方を変える必要があります。

[Knomono]

最後にaddEventListenerを使ってボタンを押すと作成したmidiをダウンロードできるものを形にすることが出来ました。

非常にわかりやすく、とても勉強になりました。
ありがとうございました！