Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:45.

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

ユーザが入力した文字列を集積して何らかの処理をする際などでは、「ユーザが入力した文字列」を「既存のリスト(配列)」の先頭や末尾に追加していきたい場合がよくあります。ユーザによって入力された文字列を、リスト(配列)の先頭や末尾に追加していく処理は、わりと簡単です。

まずは、話を簡単にするために、ユーザの入力をinput要素で受け、入力結果の集積リストをtextarea要素で用意する場合を例にします。

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

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

◆ユーザの入力欄:



◆文字列リスト(Read Only):

上記のサンプルで「上記の入力内容を、以下の末尾に追加」ボタンを押すと、テキスト入力欄に入力した内容が、その下のテキストエリアの末尾に追加されます。

このサンプルでは特に複雑なことは何もしていません。ただ、

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

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

■HTMLソース:

◆ユーザの入力欄:
<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」を実行しています。

■JavaScriptソース:

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要素で作ったリストの先頭に追記していく場合は、例えば以下のようになります。

◆ユーザの入力欄:



◆文字列リスト(Read Only):

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

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

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

■JavaScriptソース:

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

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

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

ただこれだけです。2つめの「先頭に追記する」という記述がやや冗長ですが。
JavaScriptで文字列を扱う際に、「 A = B + A 」という構文を使えば、「Aの先頭にBを追記する」という処理ができます。(※A・B共に文字列の場合)

ユーザの入力を配列に格納したい

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

そこで最後に、例として、以下のような処理を行う方法を紹介しておきます。

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

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

◆ユーザの入力欄:



◆文字列リスト(Read Only):

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);

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

※なお、掲載しているサンプルでは、ユーザの入力内容が安全かどうかのチェックと対策を施していますが、掲載しているソースには(シンプルにするために)それらの処理は割愛しています。ユーザの入力をページ上に表示する際には、ご注意下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど