JavaScript: はじめの一歩 (3)
JavaScript はじめの一歩 (2) からの続きです。textarea などのテキストデータを読んで処理する
- テキストデータを読んで処理する に続く。
テキストを行の配列や 2重配列に分割して処理する
- TestJS_parse_line01.html
textarea の文字列を読む。 テキストを行単位で分割する。
テキストを行に分割する
// text を行の配列 (Array) に分割する。 const array = text.split(/\r\n|\n|\r/);
このサンプルでは 配列 (Array) にアクセスする処理が出てきます。 下で説明します。
- TestJS_parse_CSV01.html
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 テキスト
スペース区切り、CSV などのテキストを TSV や JSON に変換する。 連続するスペースを1つの区切りとみなして変換します。
ツールサンプル, テキスト変換
文字列を数値に変換する
TestJS_input02.htmlinput タグ type="number" のサンプル。 数値の文字列を読み取って数値に変換して計算する。
TestJS_textarea_read02.html
textarea の数値の文字列を読んで合計を計算する。
プログラムの制御の基本要素 - 順次、分岐、反復
プログラムの動作の基本要素は 1) 順次、2) 分岐、3) 反復 のたった 3つしかありません。
順次
処理を順番に実行します。
// プログラムの頭から 処理1()、処理2()、処理3() の順に実行する。 処理1(); 処理2(); 処理3();
分岐
条件を調べて 2つの場合の処理に分岐します。
if (条件){ // 1) 条件を満たす場合の処理 } else { // 2) 条件を満たさない場合の処理 }
反復
繰り返しの処理です。
//例: 配列 array の先頭の要素から順番に取り出して処理する。 for (const value of array){ // value は配列 array の要素です。 // value を見て処理します。 }
いろいろ
はじめの一歩のこれまでのサンプルはほとんど 1) 順次 の処理です。 2)分岐と 3) 反復の処理があまり出てきていません。 配列の値の読み出しで for of の反復処理や if の条件分岐が少々出てくる程度です。
遠い昔のプログラミング言語では最初の方で 順次、分岐、反復の説明をすることが多かったのですが、 時代が下るほど順次で間に合う処理は順次で済ませるようになっています。 順次のように手続きを並べただけの処理は、 複雑な分岐や反復がある処理に比べてプログラムを読みやすくなり、 処理の流れが分かりやすくなります。
代わりにイベント処理や try catch やコールバック処理の話が if や for よりも先に出てくるようになりました。
配列と連想配列
複数のデータを束ねて 1つの変数で扱いたいときに、 配列 (Array) や 連想配列 を使います。
let array = []; // 配列のオブジェクトを作る。 let object = {}; // 連想配列のオブジェクトを作る。
配列 Array
- TestJS_array01.html
配列の初期化、配列の値の読み取り。 - TestJS_for_array01.html
for 文で配列の要素を読み取る。
連想配列 Object
- TestJS_object01.html
連想配列の初期化、値の読み取り。
(工事中) 原始型と参照型
変数に格納するデータの種類として 原始型 と 参照型 があります。 数値や論理 (true/false) などのデータは原始型です。 配列 (Array) や連想配列 (Object) は参照型です。
コールバックとアロー関数
JavaScript では コールバック (callback) を多用します。 コールバックは実はこれまでのサンプルで何度も登場しています。 button タグに onclick="関数名()" で関数をつけて ボタンを押したら処理が呼び出される動作もコールバック処理です。 関数をボタンなどのイベントに付けたり別の関数の引数に渡したりして、 必要なときに呼び出してもらう処理方法をコールバックと呼びます。
コールバックは例えば下のような書き方をします。
- アロー関数で記述されたコールバック。
=> のような記号が出てきます。func1( param => コールバック処理 ); // => はアロー関数を表します。 button.onclick = event => コールバック処理; // ボタンにイベント処理を付ける例。
- 関数の引数で 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 を使うと、 複雑な構造を持つデータの読み書きも簡単にできます。