ピアノ・ロール・エディターは、MIDI音楽の作成と編集に使われるグラフィカル・インターフェースです。JavaScriptでプログラミングするには、以下のステップを踏んでください：

1.1.HTMLとCSSを使って、ピアノの鍵盤を表すユーザーインターフェースを作成する。

2.2.JavaScriptを使用して、ユーザーがキーをクリックまたは押したときにトリガーされるイベントリスナーを各キーに追加します。HTML5のcanvas要素を使用して、ピアノロールをレンダリングします。

3.3.MIDIデータを配列などのデータ構造に格納し、各ノートの状態を時間軸で表現します。

4.JavaScriptを使って、音符の追加や削除、音符の移動、ベロシティやデュレーションの変更など、ユーザーの入力に応じてMIDIデータを更新する。

5.Web MIDI APIを使ってMIDIデータを再生し、サウンドを生成します。Web MIDI APIはJavaScriptのインターフェイスで、シンセサイザーやデジタル・オーディオ・ワークステーションなどのMIDIデバイスと、ウェブページ内からやりとりすることができます。

6.オプションとして、ローカル・ストレージAPIを使うか、サーバーにHTTPリクエストをすることで、ユーザーがMIDIファイルを保存したりロードしたりできるようにすることができます。


以下はサンプルコードです：

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #piano {
      display: flex;
    }
    .key {
      width: 30px;
      height: 120px;
      border: 1px solid black;
    }
    .white-key {
      background-color: white;
    }
    .black-key {
      width: 20px;
      height: 80px;
      background-color: black;
      position: relative;
      left: -10px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="piano"></div>
  <script>
    const piano = document.getElementById("piano");
    const notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
    for (let i = 0; i < 88; i++) {
      const noteIndex = i % 12;
      const isWhiteKey = notes[noteIndex].length === 1;
      const key = document.createElement("div");
      key.classList.add("key");
      if (isWhiteKey) {
        key.classList.add("white-key");
      } else {
        key.classList.add("black-key");
      }
      piano.appendChild(key);
    }
  </script>
</body>
</html>```

このコードでは、ピアノの鍵盤を矩形で表現した基本的なHTMLページを作成します。鍵盤はHTMLのdiv要素を使って表現され、CSSを使ってスタイルが設定されています。JavaScriptのコードはdiv要素を生成し、白鍵または黒鍵としてスタイルを設定するクラスを追加します。

これは出発点に過ぎず、完全に機能するピアノ・ロール・エディタを作るには、さらに機能やスタイルを追加する必要があることに注意してください。
A piano roll editor is a graphical interface used to create and edit MIDI music. To program one in JavaScript, you could follow these steps:

1. Create a user interface with HTML and CSS that represents a piano keyboard, with each key represented as a rectangle.

2. Use JavaScript to add event listeners to each key that trigger when the user clicks or presses a key. You can use the HTML5 canvas element to render the piano roll, which is a graphical representation of the MIDI data over time.

3. Store the MIDI data in an array or other data structure that represents the state of each note over time.

4. Use JavaScript to update the MIDI data in response to user input, such as adding or removing notes, moving notes, or changing their velocity or duration.

5. Use the Web MIDI API to play the MIDI data and generate sound. The Web MIDI API is a JavaScript interface that allows you to interact with MIDI devices, such as synthesizers or digital audio workstations, from within a web page.

6. Optionally, you could allow the user to save and load MIDI files, either by using the local storage API or by making HTTP requests to a server.


Here is some sample code to get you started:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #piano {
      display: flex;
    }
    .key {
      width: 30px;
      height: 120px;
      border: 1px solid black;
    }
    .white-key {
      background-color: white;
    }
    .black-key {
      width: 20px;
      height: 80px;
      background-color: black;
      position: relative;
      left: -10px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="piano"></div>
  <script>
    const piano = document.getElementById("piano");
    const notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
    for (let i = 0; i < 88; i++) {
      const noteIndex = i % 12;
      const isWhiteKey = notes[noteIndex].length === 1;
      const key = document.createElement("div");
      key.classList.add("key");
      if (isWhiteKey) {
        key.classList.add("white-key");
      } else {
        key.classList.add("black-key");
      }
      piano.appendChild(key);
    }
  </script>
</body>
</html>```

This code creates a basic HTML page with a piano keyboard represented as a series of rectangles. The keys are represented using HTML div elements, and they are styled using CSS. The JavaScript code generates the div elements and adds classes to style them as white or black keys.

Note that this is just a starting point, and you would need to add more functionality and style to make a fully functional piano roll editor.