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

つるぴよ

もりけん塾に入塾しました！

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

あわせて読みたい

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

JavaScriptの学習方法

1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る

— フロントエンドエンジニア (@terrace_tech) June 30, 2020

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

つるぴよ

今回は少し高度なメソッドを紹介していくよ！

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

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

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

forEach

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

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

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

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

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

filter( )

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

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

var array = [11, 22, 33, 44, 55, 66];
var array2 = array.filter(x => x % 2 === 0);
console.log(array2);

map ( )

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

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

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

アロー関数で書いた場合

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」で確認してみよう！

第１５話　正規表現

「正規表現」？？また難しそうなの出てきた‥

ねこまる

つるぴよ

「正規表現」をマスターするとコンピュータをより高度に利用できるようになるよ！

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

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

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

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

 var a = "学年で成績が１番良いのは 山田さんです" //置換前の文字列
 var b = a.replace(/山田/g, "田中");  //置換
 document.write(b); //結果の表示

「/」のエスケープ

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

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

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

つるぴよ

「検索文字列」内の（〜）で囲った場所はあとで取り出して再利用できるよ！

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

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

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

var bunsyou = "山田は田中より強い";   //置換前の文字列
 bunsyou = bunsyou.replace(/(.+)は(.+)より/g,"$2は$1より"); //置換
 alert(bunsyou); //結果を表示

正規表現の検索文字列

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

正規表現でよく使う記号

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

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

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

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

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

つるぴよ

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

表にまとめました！

実際に「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>");         // 結果を表示

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

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

武骨日記

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

フォローはこちら