未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す!⑧

つるぴよ
つるぴよ
もりけん塾に入塾しました!

JavaScriptを勉強してフロントエンジニアを目指しています!
今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

あわせて読みたい
【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す!⑦ JavaScriptを勉強してフロントエンジニアを目指しています! 今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。...

 

目次

コラム 配列の様々なメソッド

つるぴよ
つるぴよ
今回は少し高度なメソッドを紹介していくよ!

前回学習した「配列」には様々なメソッドがあります。

「反復メソッド」‥関数を引数にとる少し高度なメソッド
こちらについて学んでいきましょう!

Array.isArray( )

引数が配列かどうか確認します。
戻す値
配列の場合→「true」
配列でない場合→「false」
結果はコンソールに出力してみます。

var test1 = [1,2,3];
var res1 = Array.isArray(test1);

var test2 = {a: 1,b: 2,c: 3};
var res2 = Array.isArray(test2);

console.log(res1 + "\n" + res2);
結果
true
false

forEach

配列中のそれぞれの要素について関数を呼び出します。

array.forEach(function(x, i, a) {
//配列の各要素ごとに呼び出される処理
});

「x」‥配列の各要素
「 i 」‥何番目の要素かの数値
「a」‥配列自身

実際に例文を書いてみます(出力はコンソール)

var array = [11, 22, 33];
array.forEach(function(x, i) {
    console.log(i + ' : ' + x);
});
結果
0: 11
1: 22
2: 33

必ずしも「x」「i」「a」全てを使う必要はなく、上記の例のように「x」「i」だけでも良いです。使うものだけかけばOKです。

次に「ES2015」の「アロー関数」で書いてみます。
結果は上記と同じになります。

var array = [11, 22, 33];
array.forEach((x, i) => {console.log(i + ' : ' + x)});

filter( )

配列中の要素をフィルタリングして、新しい配列を生成します。

array.filter(function(x, i, a) {
//配列の各要素ごとに呼び出される処理
return = true;
});

「x」‥配列の各要素
「 i 」‥何番目の要素かの数値
「a」‥配列自身

配列の中から偶数だけを取り出して新たな配列を生成するプログラムを書いていきます!

var array = [11, 22, 33, 44, 55, 66];
var array2 = array.filter(function(x) {
  if(x % 2 === 0) {
    return true; //偶数
  }
});
console.log(array2);
結果
[22, 44, 66]
アロー関数の場合
var array = [11, 22, 33, 44, 55, 66];
var array2 = array.filter(x => x % 2 === 0);
console.log(array2);

 

map ( )

配列内の全ての要素に対して関数を実行して、その戻り値を生成します

array.map(function(x, i, a) {
//配列の各要素ごとに呼び出される処理
return = “新しい値”;
});

「x」‥配列の各要素
「 i 」‥何番目の要素かの数値
「a」‥配列自身

配列の各要素に10をかけた結果を戻り値として生成するプログラムを書いてみます!

var array = [11, 22, 33, 44, 55, 66];
var array2 = array.map(function(x) {
    return x * 10;
});
console.log(array2);
結果
[110, 220, 330, 440, 550, 660]

アロー関数で書いた場合

var array = [11, 22, 33, 44, 55, 66];
var array2 = array.map(x => x * 10);
console.log(array2);

配列のメソッドまとめ

ここまでで以下の配列のメソッドをみてきました。

①Array.isarray
②forEach
③filter
④map

このほかにも配列のメソッドはたくさんあるので「Array-JavaScript | MDN」で確認してみよう!

第15話 正規表現

「正規表現」??また難しそうなの出てきた‥
ねこまる
ねこまる
つるぴよ
つるぴよ
「正規表現」をマスターするとコンピュータをより高度に利用できるようになるよ!

「正規表現」とは‥文字列の検索や置換を行うための特殊なルール
JavaScriptだけではなく、多くのプログラミング言語や検索ソフトで利用されています。

「正規表現」による「置換」

検索する文字列」と「置換する文字列」を以下のように書きます。

文字列オブジェクト.replace( /[検索する文字列] / [フラグ] / [置換する文字列])

上記は文字列オブジェクト「replace」メソッドを使った書き方です。

「replace」メソッドの中身を解説すると以下のようになります。
・最初の引数に「検索する文字列」と「フラグ」を書く
・2番目の引数に「置換する文字列」を書く
・「正規表現」にあたるのは「/[検索する文字列] / [フラグ] 」の部分
「検索文字列」、「フラグ」、「置換文字列」には実際以下のような内容を記入します。
記入領域 実際に書き込む内容
検索文字列 「文字列」と「正規表現の記号」を使った検索の条件を表す文字列 山田
フラグ 検索の方法を制御する記号 g
置換文字列 検索結果を、置き換える文字列 田中

上記の表の「例」の部分をプログラムで書いてみましょう!

 var a = "学年で成績が1番良いのは 山田さんです" //置換前の文字列
 var b = a.replace(/山田/g, "田中");  //置換
 document.write(b); //結果の表示
結果
学年で成績が1番良いのは 田中さんです
上記は文章中にある「山田」という文字列を検索して、全て「田中」に置き換えるプログラムです。
この「replace」メソッドの引数に書いてあるフラグの「g」は「全て置換」という意味です。

「/」のエスケープ

検索文字列は「/〜/」のように2つの「/」で囲みます。
「/〜/」の間に「http://〇〇‥」のようなURLを入れたいときは以下のように「\ /」と書きます。

var a = "http://crocro.com/";    // 置換前の文字列
var b = a.replace(/http:\//g, "file:/");    // 置換。検索文字列内の『/』は、『\/』と書く
alert(b);    // 結果を表示
結果
file://crocro.com/

検索結果の取り出しと再利用

つるぴよ
つるぴよ
「検索文字列」内の(〜)で囲った場所はあとで取り出して再利用できるよ!

正規表現の中で取り出す場合
1番目の(〜)‥「\1」
2番目の(〜)‥「\2」
3番目の(〜)‥「\3」
このように「\」の後に何番目の「(〜)」かの「数字」を書いて取り出すことができます!

「英数字で構成された文字列 ( \w + ? ) 」が半角スペースの後に「もう1度登場したら\1」、「重複」と置換するプログラム例を書いてみます。
(「\w」は英数字を表す正規表現の記号です)

var namae = "dog cat cat monkey rat rat cow";        // 置換前の文字列
namae = namae.replace(/(\w+) \1/g, "重複");        // 置換
alert(namae);        // 結果を表示
結果
dog 重複 monkey 重複 cow

「検索文字列」中の「(〜)」で囲んだ場所は、置換用の文字列として再利用もできます。

1番目の(〜)‥「$1」

2番目の(〜)‥「$2」
3番目の(〜)‥「$3」

このように「$」の後に何番目の「(〜)」かの「数字」を書いて取り出すことができます!

検索結果を取り出して再利用する例を書きます

var bunsyou = "山田は田中より強い";   //置換前の文字列
 bunsyou = bunsyou.replace(/(.+)は(.+)より/g,"$2は$1より"); //置換
 alert(bunsyou); //結果を表示
結果
田中は山田より強い
上記の例を解説します
・1番目の(. +)に一致する文字列→「山田」→$1
・2番目の(. +)に一致する文字列→「田中」→$2
となるので(〜)の中で、「$2は$1より」と入れ替えることで
「山田」($1)の場所と「田中」($2)の場所が入れ替わりました。

正規表現の検索文字列

「正規表現」の「検索文字列」では様々な記号や書式が使えます。
その一例を表にまとめました。

書き方 意味
A+ 1個以上のA (可能な限り長く)
A* 0個以上のA(可能な限り長く)
A+? 1個以上のA(可能な限り長く)
A *? 0個以上のA(可能な限り長く)
A? 0または1個のA
A{3} 3個のA
A{3,} 3個以上のA
A{3,5} 3〜5個のA
A|B AまたはB
ABC|DEF ABCまたはDEF
[ABC] A,B,Cのいずれか1文字
[A-C] A〜Cのいずれか1文字
. 任意の1文字
.+ 任意の1以上の文字
^A Aで始まる文字列
A$ Aで終わる文字列
A.+B 「A(任意の文字列)B」(可能な限り長く)
A.+?B 「A(任意の文字列)B」(可能な限り短く)
A[^\ /]+B 「A(「/」を含まない文字列) B」

正規表現でよく使う記号

記号 意味
\d 数値([0-9]と同じ)
\D 数値以外([^0-9]と同じ)
\w 英数([A-Za-z0-9_]と同じ)
\W 英数以外([^A-Za-z0-9_]と同じ)
\n 改行
\r 復帰
\t タブ文字
\s スペース、タブ、改ページ、改行を含む、1つの空白文字
\S \s以外の文字

正規表現で知っている役立つ書式(グループ化)

書き方 意味
(?:aaa) 「aaa」に一致するが、後で「$番号」として取り出さない
aaa(?=bbb) 「aaa」に「bbb」が続く場合に一致。「bbb」は検索結果に含めない
aaa(?!bbb) 「aaa」に「bbb」が続かない場合に一致。「bbb」は検索結果に含めない
グループ化の例をみていきましょう!
上記の表の「aaa(?=bbb)」を使ってみます
var a = "abcdef abcxyz";    // 置換前の文字列
var b = a.replace(/abc(?=xyz)/g, "---");    // 置換
document.write(b + "<br>");        //結果を表示
結果
abcdef xyz
解説
検索文字列「abc( ? =xyz)」→「abc」に続く文字列が「xyz」ならば一致
「xyz」は検索結果に含めない。

次は「aaa(?!bbb)」を使ってみます。

var a = "abcdef abcxyz";    // 置換前の文字列
var c = a.replace(/abc(?!xyz)/g, "---");    // 置換
document.write(c + "<br>");        // 結果を表示
結果
—def abcxyz

解説

検索文字列「abc( ?!xyz)」→「abc」に続く文字列が「xyz」でなければ一致
「xyz」は検索結果に含めない。
「?」のあとが
「=」なら一致
「!」なら不一致

正規表現のフラグについて

つるぴよ
つるぴよ
JavaScriptの正規表現で使用できるフラグについて紹介するよ!

表にまとめました!

フラグ ある場合 ない場合
g 全て置換 1つだけ置換
i 大文字、小文字を区別しない 区別する
m 文頭「^」や文末「$」の一致処理を、各行の行頭や行末にも適用する 文頭「^」や文末「$」は文字列の先頭と末尾のみに適用
・フラグは「i g」のように複数指定しても良い
・何も指定しなくても良い
・1つでも良い

実際に「g ,i, m」のフラグを指定してプログラムを書いてみます。

var a = "abcdef ABCDEF abcdef ABCDEF";  // 置換前の文字列
var b = a.replace(/abc/gi, "---");      // 置換
document.write(b + "<br>");             // 結果を表示
 
var c = a.replace(/abc/g, "---");   // 置換
document.write(c + "<br>");         // 結果を表示
 
var d = a.replace(/abc/, "---");    // 置換
document.write(d + "<br>");         // 結果を表示
結果
def DEF def DEF
def ABCDEF def ABCDEF
def ABCDEF abcdef ABCDEF
解説
最初の例→検索文字列「/abc/」を「gi 」のフラグで指定しています。
「g」は全て置換なので配列の中の「abc」全てが該当します。
「i」は大文字、小文字区別しないので「ABC」も該当します。
2つ目の例→検索文字列「/abc/」を「g」のフラグで指定しています。
「g」は全て置換なので配列の中の「abc」全てが該当します。3つ目の例→検索文字列「/abc/」に対して何もフラグが指定されていません。
そのため配列の中の最初の「abc」一つだけが置換されます。
大文字小文字も区別されます。

マンガJavaScriptコラムと第15話まとめ

ここまで学んだことをまとめます
・配列の様々なメソッド
 ①Array.isArray( ) ②forEach( ) ③filter( ) ④map( )
・正規表現
 文字列の置換やフラグについて

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア(@terrace_tech)のフォローは👇

フォローはこちら

目次