JavaScript: はじめの一歩 (3)

textarea などのテキストデータを読んで処理する (2023)

• テキストデータを読んで処理する に続く。

テキストを行の配列や 2重配列に分割して処理する

• TestJS_parse_line01.html
  textarea の文字列を読む。 テキストを行単位で分割する。
  テキストを行に分割する
  

  // text を行の配列 (Array) に分割する。
  const array = text.split(/\r\n|\n|\r/);
  

  このサンプルでは 配列 (Array) にアクセスする処理が出てきます。 下で説明します。

• TestJS_parse_CSV01.html (2023/12)
  CSV (カンマ区切り) のデータテキストを 2重配列に分割する。
  テキストを2重配列に分割する
  

  /** カンマ区切りのテキストをパースして 2重配列にする。
    下の例では空行やスペースのみの行は途中の行も含めてすべて除去します。
    また、値の文字列も trim() します。
   */
  function parseCSV(text){
  	const array = text.split(/\r\n|\n|\r/).filter( s => s.trim() );
      return array.map( s => s.split(",").map( s => s.trim()) );
  }
  

  このサンプルでは => という記述が出てきます。 アロー関数 と呼びます。 下で説明します。

2重配列のテキストはタブ区切りのテキスト (TSV) が扱いやすいです。 HTML の table の表も Web ブラウザでテキストをコピーすると TSV テキストになります。
TSV テキスト

文字列を数値に変換する

• 数値のテキストを処理する

プログラムの制御の基本要素 - 順次、分岐、反復

プログラムの動作の基本要素は 1) 順次、2) 分岐、3) 反復 のたった 3つしかありません。

順次

処理を順番に実行します。

// プログラムの頭から 処理1()、処理2()、処理3() の順に実行する。
処理1();
処理2();
処理3();

分岐

条件を調べて 2つの場合の処理に分岐します。

if (条件){
	// 1) 条件を満たす場合の処理
}
else {
	// 2) 条件を満たさない場合の処理
}

• JavaScript: 演算子: 比較など

反復

繰り返しの処理です。

//例: 配列 array の先頭の要素から順番に取り出して処理する。
for (const value of array){
	// value は配列 array の要素です。
	// value を見て処理します。
}

• JavaScript: 反復処理 for, while など

いろいろ

はじめの一歩のこれまでのサンプルはほとんど 1) 順次 の処理です。 2)分岐と 3) 反復の処理があまり出てきていません。 配列の値の読み出しで for of の反復処理や if の条件分岐が少々出てくる程度です。

遠い昔のプログラミング言語では最初の方で 順次、分岐、反復の説明をすることが多かったのですが、 時代が下るほど順次で間に合う処理は順次で済ませるようになっています。 順次のように手続きを並べただけの処理は、 複雑な分岐や反復がある処理に比べてプログラムを読みやすくなり、 処理の流れが分かりやすくなります。

代わりにイベント処理や try catch やコールバック処理の話が if や for よりも先に出てくるようになりました。

配列と連想配列 (2024/01)

複数のデータを束ねて 1つの変数で扱いたいときに、 配列 (Array) や 連想配列 を使います。

let array = [];       // 配列のオブジェクトを作る。
let object = {};      // 連想配列のオブジェクトを作る。

配列 Array

• JavaScript: 配列 Array (1)

• TestJS_array01.html
  配列の初期化、配列の値の読み取り。
• TestJS_for_array01.html
  for 文で配列の要素を読み取る。
  

連想配列 Object

• JavaScript: 連想配列 Object (1)

• TestJS_object01.html
  連想配列の初期化、値の読み取り。

(工事中) 原始型と参照型

変数に格納するデータの種類として 原始型 と 参照型 があります。 数値や論理 (true/false) などのデータは原始型です。 配列 (Array) や連想配列 (Object) は参照型です。

コールバックとアロー関数 (2023)

• コールバック処理
• アロー関数

JavaScript では コールバック (callback) を多用します。 コールバックは実はこれまでのサンプルで何度も登場しています。 button タグに onclick="関数名()" で関数をつけて ボタンを押したら処理が呼び出される動作もコールバック処理です。 関数をボタンなどのイベントに付けたり別の関数の引数に渡したりして、 必要なときに呼び出してもらう処理方法をコールバックと呼びます。

コールバックは例えば下のような書き方をします。

1. アロー関数で記述されたコールバック。
   => のような記号が出てきます。

   func1( param => コールバック処理 );  // => はアロー関数を表します。
   
   button.onclick = event => コールバック処理; // ボタンにイベント処理を付ける例。
   

2. 関数の引数で function(){...} が現れる。

   func1( function(param){
           //コールバック処理
       });
   
   button.onclick = function(param){
           //コールバック処理
       });
   

2) は IE 時代までの昔風の書き方です。 IE はアロー関数に対応していませんでした。 現在ではコールバックでは 1) の アロー関数 を使った記述を多用します。

文字列の置換処理の例

文字列の置換処理 String.replace() でも コールバック処理を多用します。

• JavaScript: String.replace(正規表現, コールバック関数) の処理

  // 例: HTML テキストの <h2> タグに id="ID(通し番号)" の id を付ける。
  let counter = 1;
  html = html.replace(/<h2>/g, () => `<h2 id="ID${ counter++ }">` );
  

• TestJS_RegExp_replace_callback01.html
  HTML の h2 タグに通し番号の id を付けるサンプル。

データをファイルに保存する、データファイルを読む

• JavaScript: ファイル処理 FileAPI
  FileAPI を使うとデータをローカルファイルに保存したり、 データファイルを読んだりできます。

JSON テキストでデータを読み書きする

• JavaScript: JSON シリアライズ
  データ保存のときに JSON を使うと、 複雑な構造を持つデータの読み書きも簡単にできます。

いろいろ

• JavaScript: はじめの一歩 (4) に続く

関連

• JavaScript: はじめの一歩 (1)
• JavaScript: はじめの一歩 (2)
• JavaScript: はじめの一歩 (4)
• JavaScript: 次の一歩 (1)
• JavaScript: 文法などのノート
• JavaScript: 考古学