javascriptでコードを理解する際に躓いた記法

SHIFT Group 技術ブログ

2022年8月22日 15:08

はじめに

こんにちは、SHIFT の開発部門に所属しているmurasawaです。
今期より中途で入社、バックエンド関連の開発を担当して行きます。

現在、研修でデータベースやRestAPIについて基本的な事から学んでいます。学んだことをアウトプットし理解を深めていくとともに技術の共有として役に立てば幸いです。

今回は社内の開発でjavascriptに触れた際にこれはなんだ？と思い検索にも比較的引っかかりにくかった事項をまとめました。

展開記法 (スプレッド記法{...object})

展開記法 (スプレッド記法) とは、

const newObject = { ...oldObject, color:'sky' }

のように使われているものです。

object(あるいはarrayなど)の中身を展開して別のobjectに格納する際に使います。

例えば、

const oldObjects = { id:1, name:"taro" }

というobjectがあったときに、
中身を使って新しいobjectを作りたい場合、

const newObject = {color:'sky'};
Object.keys(oldObjects).forEach((key) => { 
    newObject[key] = oldObject[key];
}

などを使って、

{ color:'sky', id:1, name:'taro' }

の配列を作るのって行も多く、いちいち大変ですよね。

そんな時、

const newObject = { color:'sky', ...oldObject };

とするだけで、

{ color 'sky', id:1, name:'taro' }

が作れてしまいます。

初めて見たときは戸惑うかもしれませんが、展開記法 (スプレッド記法)を用いたほうが簡潔でわかりやすくきれいなコードがかけます。

三項演算子「判定(x>5など）? value1 : value2」

とある変数の存在確認や条件をもとに値を代入したいとき素直に書くならば、

const number = 18;
let status;
if(number < 18) status = 'You are a minor' else status = 'You are an adult'

と書くと思います。

実は以下のように簡潔に書くことができます。

const status = number < 18 ? 'You are a minor' : 'You are an adult';

この記法も?が急に出てくるので直感的に理解しずらいですが、やっていることは単純です。
もちろん存在確認でも使うことができます。

const status = !string ? 'fill' : 'empty';

オブジェクト省略記法

定義時

オブジェクトの中身(key:value)を定義するとき、

const obj = { a:a, b:b }

のようにkeyとvalueが同じ場合があると思います。

そんな時は、

const obj = { a, b }

と記述することができます。

もちろん中身は { a:a, b:b }になっています。

取り出し時

例えば各科目の点数が入っているオブジェクトから理系科目の点数を参照したい場合、普通に書くと、

const subjectScore = {
    mathematics:100,
    contemporaryJapanese:96,
    classicJapanese: 65,
    worldHisory:75, 
    physics:89,
    chemistry:98, 
    english: 82
}

const mathematics = subjectScore.mathematics;
const physics = subjectScore.physics;
const chemistry = subjectScore.chemistry;

となると思います。

ですがこの場合、格納先の変数名とkeyが一致しているので、

const subjectScore = {
    mathematics:100,
    contemporaryJapanese:96,
    classicJapanese: 65,
    worldHisory:75, 
    physics:89,
    chemistry:98, 
    english: 82
}

const {mathematics, physics, chemistry} = subjectScore;

と書くことができます。

終わりに

社内の開発でコードを読み解く中でぱっと意味が分からず、三項演算子など名前がわかっていないと検索しにくい事項をまとめました。

理解してしまえばコードを短く簡潔にわかりやすく記述でき、便利な記法です。ほかにも省略記法などはありますが今回は開発内で頻出するものを取り上げました。

今後開発を始めていく人、関わる人の役にたてば幸いです。

執筆者プロフィール：Satoshi Murasawa
前社ではRPAツールの技術サポート、開発を1年半経験。 SHIFTでは、バックエンドエンジニアとして入社し、node.jsやmysqlに触れはじめた。
DBに漠然とした興味があり、勉強して部の中でDB関連で役割を持つことができたらよいなと思っています。

お問合せはお気軽に
https://service.shiftinc.jp/contact/

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

みんなにも読んでほしいですか？

オススメした記事はフォロワーのタイムラインに表示されます！

最後まで読んでくださり、ありがとうございます！

御社サービスのご相談はお気軽に。

ソフトウェア品質のプロがお伺いします。