ユーザの入力内容をテキストエリアや配列の先頭・末尾に追加する方法

ウェブ上でユーザが入力した複数の文字列を集めてから何らかの処理をする際などでは、「ユーザが入力した文字列」を「既存のリスト(配列)」の先頭や末尾に追加していきたい場合がよくあります。
ユーザによって入力された文字列を、JavaScriptでリスト(配列)の先頭や末尾に追加していく処理は、わりと簡単です。
ここでは話を簡単にするために「ユーザの入力をinput要素で受け、入力結果の集積リストをtextarea要素で用意する」場合を例にして、JavaScriptソースの書き方を3パターンほど紹介します。

ユーザが入力した内容を、テキストエリアの末尾に追加していく例

ユーザがinput要素の1行入力欄に入力した内容を、textarea要素で作ったリスト末尾に追記していく場合は、例えば以下のようになります。

上記のサンプルで「上記の入力内容を、以下の末尾に追加」ボタンを押すと、テキスト入力欄に入力した内容が、その下のテキストエリアの末尾に追加されます。
このサンプルでは特に複雑なことは何もしていません。ただ、

1. 「テキスト入力欄」(input要素)の内容(valueプロパティ)を受け取って、
2. 「テキストエリア」(textarea要素)の内容(valueプロパティ)に追記している

……というだけです。
HTMLソースとJavaScriptソースは以下の通りです。

◆ユーザの入力欄：
<input type="text" id="sampleUserInput" value="ここに何か入力">
<input type="button" value="上記の入力内容を、以下の末尾に追加" onclick="AddStringToTextarea();">
◆文字列リスト(Read Only)：
<textarea cols="30" rows="6" id="sampleInputedList" readonly>北海道
東京都
大阪府
</textarea>

最初にinput要素で入力欄を作り、次にinput要素でボタンを作り、最後にtextarea要素で結果表示欄を作っています。textarea要素にはダミーの文字列を3行ほど記述しています。なお、入力欄の装飾に関する記述は省略しています。
スクリプトから利用するため、ユーザが入力するためのinput要素には「sampleUserInput」というid名を、表示結果のtextarea要素には「sampleInputedList」というid名を、それぞれ加えています。
ボタンをクリックした際には、以下で作成する関数「AddStringToTextarea」を実行しています。

function AddStringToTextarea() {
   var UserString = document.getElementById('sampleUserInput').value;
   document.getElementById('sampleInputedList').value += UserString + "\n";
}

上記のソースでは、以下のような処理をしています。

1. id名「sampleUserInput」の要素のvalueプロパティの値を、変数「UserString」に格納。
2. id名「sampleInputedList」の要素のvalueプロパティの値へ、変数「UserString」の内容に改行「\n」を加えて追記

ただこれだけです。シンプルですね。
JavaScriptで文字列を扱う際は、「 A += B 」という構文で、「Aの末尾にBを追記する」という意味になります。(※A・B共に文字列の場合)
なお、この「 A += B」は、「 A = A + B 」と書いても同じです。ただ「+=」を使う方が、Aを1回しか書かなくて良いので、ソースがシンプルになります。

ユーザが入力した内容を、テキストエリアの先頭に追加していく例

先ほどとは真逆に、リストの先頭に追記する例も紹介しておきます。
ユーザがinput要素の1行入力欄に入力した内容を、textarea要素で作ったリストの先頭に追記していく場合は、例えば以下のようになります。

上記のサンプルで「上記の入力内容を、以下の先頭に追加」ボタンを押すと、テキスト入力欄に入力した内容が、その下のテキストエリアの先頭に追加されます。
こちらの処理内容も、先ほどとほとんど同じです。

1. 「テキスト入力欄」(input要素)の内容(valueプロパティ)を受け取って、
2. 「テキストエリア」(textarea要素)の内容(valueプロパティ)の先頭に追記している

……というだけです。
末尾に追記するのではなく先頭に追記するので、先ほどより少しだけソース量が増えていますが、やっていることはほぼ同じです。
JavaScriptソースは以下の通りです。(HTMLソースは先ほどと同じなので割愛します。)

function AddStringToTextarea() {
   var UserString = document.getElementById('sampleUserInput').value;
   var TargetList = document.getElementById('sampleInputedList');
   TargetList.value = UserString + "\n" + TargetList.value;
}

上記のソースでは、以下のような処理をしています。

1. id名「sampleUserInput」の要素のvalueプロパティの値を、変数「UserString」に格納。
2. id名「sampleInputedList」の要素のvalueプロパティの値へ、変数「UserString」の内容に改行「\n」を加えて追記

ただこれだけです。
4行目の処理は、単に「 A = B + A 」と書けば「Aの先頭にBを追記する」という処理になる、というだけのことです。

ユーザの入力を配列に格納してから何か処理して出力したい

これまでの例のように、ユーザの入力をいきなりtextarea要素に表示したい場合はあまりありませんよね。
実際のスクリプトでは、一旦ユーザの入力を配列に追加した上で、何らかの処理を加えてから、必要に応じて表示(出力)する……ということになるのではないかと思います。
例えば、五十音順にソートしてから出力したいとか、重複する項目を排除してから出力したいとか。
そこで最後に、例として、以下のような処理を行う方法を紹介しておきます。

1. textarea要素の内容を、1行ずつ配列に展開する。
2. ユーザの入力をinput要素で受けて、配列に追加する。
3. 配列に含まれる「空行」を削除する
4. 配列の内容を、1項目1行でtextarea要素に表示する

結果的には、先ほどの例とほとんど同じ処理になるのですが。
途中で「空行を削除」する処理を追加しているので、ユーザが「何も入力しない状態」でボタンを押した場合には、配列には何も追加されません。

JavaScriptソースは以下の通りです。

function AddStringToTextarea() {
   // ▼textareaの内容を改行で分割して配列に格納
   var nowArray = document.getElementById('sampleInputedList').value.split("\n");
   // ▼ユーザの入力得る
   var UserString = document.getElementById('sampleUserInput').value;
   // ▼配列の末尾に追加
   nowArray.push(UserString);
   // ▼空行を削除
   var resArray = [];
   for( var i=0 ; i < nowArray.length ; i++ ) {
      if( nowArray[i].length > 0 ) {
         resArray.push( nowArray[i] );
      }
   }
   // ▼配列の内容に、1つずつ改行を付加
   var retString = "";
   for( var i=0 ; i<resArray.length ; i++ ) {
      retString += resArray[i] + "\n";
   }
   // ▼表示
   document.getElementById('sampleInputedList').value = retString;
}

ここでの処理と変数の関係は、だいたい以下のようなものです。

1. 現在のtextarea要素の内容を、1行ずつ区切って、配列「nowArray」に格納。
2. input要素へのユーザからの入力内容を、変数「UserString」に格納。
3. 配列「nowArray」の末尾に、変数「UserString」の内容を追加。
4. 配列「nowArray」から空行を探し出し、空行を除いた配列「resArray」を新たに作成。
5. 配列「resArray」の各文字列に、改行「\n」を付加して、変数「retString」に格納。
6. 変数「retString」の内容を、textarea要素に出力。

文字列を指定の文字で区切って、配列を作るsplitメソッドについては、記事「カンマ区切りの入力文字列を配列に分割して格納」でも解説していますので、別途ご参照下さい。
配列「nowArray」の末尾に、変数「UserString」の内容を追加するには、上記のソース中にもあるように、pushメソッドを使います。

nowArray.push(UserString);

もし、配列「nowArray」の先頭に、変数「UserString」の内容を追加したい場合は、unshiftメソッドを使います。

nowArray.unshift(UserString);

というわけで、ユーザの入力を配列に格納して処理する方法の解説でした。

(更新日：2017年06月17日)