JavaScript よく使う便利な処理

開発チームでJavaScriptの勉強会があったので、
内容アウトプットです。

今回はよく使われている5つについて、
実際コードと解説を書いていきます。

紹介するもの

①flat
②shift
③map
④三項演算子
⑤スプレッド構文（てんてんてんのやつ）

①flat

配列を平坦化するメソッド。
ネスト（入れ子）になっている配列のネストを解除するようなイメージ。

元の配列は維持する。

//flatの例
const ary1 = [[1,2,3],[4,5,6]]
console.log(ary1);

const aryFlat = ary1.flat();
console.log(aryFlat);


//結果

//ary1
(2) [Array(3), Array(3)]
0:(3) [1, 2, 3]
1:(3) [4, 5, 6]

//aryFlat
(6) [1, 2, 3, 4, 5, 6]

②shift

配列の先頭（一番最初）の要素を取り出す。
取り出した要素は変数から削除する。
取り出した要素を変数に入れることもできる。

「最新情報だけ取り出したい」
なんて場面でよく使う。

//shiftの例
const ary = [1,2,3,4,5,6]
console.log(ary);

const aryShift = ary.shift();
console.log(aryShift);
console.log(ary);

//結果
//ary
[1, 2, 3, 4, 5, 6]

//aryShift
1

//aryShift後のary 1が削除されている
[2, 3, 4, 5, 6]

③map

配列の中身を一つずつ変換して、新しい配列を作るメソッド。
よく使う。

//mapの例
const membershipData = [
    {
        id: "001",
        name: "田中太郎",
        planType: "premium",
        joinDate: "2023-01-15"
    },
    {
        id: "002",
        name: "佐藤花子",
        planType: "standard",
        joinDate: "2023-02-20"
    },
    {
        id: "003",
        name: "鈴木一郎",
        planType: "premium",
        joinDate: "2023-03-10"
    }
];

const aryMap = membershipData.map(e => {
    
    const displayPlanTypeList = {
        standard: "スタンダードコース",
        premium: "プレミアムコース"
    }
    
    return {
        id: e.id,
        name: e.name,
        displayPlanType: displayPlanTypeList[e.planType],
        joinDate: e.joinDate
    }
})

console.log(aryMap)

//結果 planType要素をdisplayPlanTypeにして新たな配列を生成
    [
     {
        id: "001",
        name: "田中太郎", 
        displayPlanType:"プレミアムコース" , 
        joinDate:"2023-01-15"
     },
     {
         id: "002",
         name: "佐藤花子", 
         displayPlanType:"スタンダードコース" ,
         joinDate:"2023-02-20"
     },
     {
         id: "003",
         name: "鈴木一郎",
         displayPlanType:"プレミアムコース",
         joinDate:"2023-03-10"
     }
   ];  

④三項演算子

if-else文を少ない記述量で実現した演算子。

elseifと似たような処理をするには、
ネストする必要がある。

// if-else文で記述
let score1 = 50;
let passingGrade1;

if (score1 >= 40) {
	//Trueの処理
	passingGrade1 = '40点以上で合格です。';
} else {
	//Falseの処理
	passingGrade1 = '40点未満　不合格です。';
}

console.log(passingGrade1); //'40点以上で合格です。'


// 三項演算子で記述
let score2 = 60;
let passingGrade2 = (score2 >= 40) ? "40点以上で合格です。" : "40点未満　不合格です。";

console.log(passingGrade2);  //'40点以上で合格です。'

⑤スプレッド構文

配列やオブジェクトを展開できる構文。
元の配列やオブジェクトは維持する。

通称「点点点のやつ」。「...」って書く。

//例1 配列の展開
const ary1 = ["裏金問題","界隈","初老ジャパン","新紙幣"];
const ary2 = ["50-50","ふてほど","Bling-Bang-Bang-Born","ホワイト案件","名言が残せなかった","もうええでしょう"];
const mergedArray = [ ...ary1, ...ary2 ];

console.log(mergedArray); 
//結果　["裏金問題","界隈","初老ジャパン","新紙幣","50-50","ふてほど","Bling-Bang-Bang-Born","ホワイト案件","名言が残せなかった","もうええでしょう"]


//例2 オブジェクトの展開
const recentBuzzwords = { "2024年": "ふてほど", "2023年": "アレ（A.R.E.）" };
const pastBuzzwords = { "2022年": "村神様", "2021年": "リアル二刀流/ショータイム", "2020年": "3密" };
const mergedBuzzwords = { ...recentBuzzwords, ...pastBuzzwords };

console.log(mergedBuzzwords); 
//結果 {2024年:"ふてほど",2023年:"アレ（A.R.E.）",2022年:"村神様",2021年:"リアル二刀流/ショータイム",2020年:"3密"}

最後に

自分でコードを書くと、やはり理解が深まります。

人事ネタで作ると、最近の話題もチャッチアップできて一石二鳥ですね。

ちなみに「流行語、野球用語多くない？」と思ったら、
2021～2023年が連続して、それ以前の10年だと1つだけでした。
（2016年の「神ってる」）

次の勉強会も、こんな感じでアウトプットしていきます。
Buzzwords以外の要素を使おうと思います。