JavaScript関連のことを調べてみた2020年01月13日

JavaScript勉強の記録その13: スプレッド構文とレスト構文を使ったオブジェクトの操作

#スプレッド構文を利用したプロパティーの結合

スプレッド構文を利用して、２つのオブジェクトのプロパティーを結合することができます。

“`index.js
const otherProps = {
r: 4,
color: ‘red’,
}

const point = {
x: 100,
y: 180,
…otherProps,
};

console.log(point);
//=>{x: 100, y: 180, r: 4, color: “red”}
“`

#レスト構文を利用してプロパティーの値を分割代入する

レスト構文を使って、オブジェクトの分割代入をすることもできます。

“`index.js
const otherProps = {
r: 4,
color: ‘red’,
}

const point = {
x: 100,
y: 180,
…otherProps,
};
const {x, y, …others} = point;

console.log(x);
//=>100
console.log(y

4歳娘「パパ、実行時エラーの出ないフロントエンド言語ってなーんだ？」

## とある休日の朝
娘（**4歳**）「パパ、最近はお仕事でどんなWebサイトを作ってるの？」

ワイ「ん？詳しくは言えへんけど、**技術記事投稿サイト**や」

娘「**Qiitaのパクリ**みたいなやつ？」

ワイ「ハッキリ言うなや」

## 娘ちゃんはなぞなぞがしたい
娘「それよりパパ、なぞなぞしよ」

ワイ「ええで」

娘「じゃあ行くよー」
**娘「実行時エラーの出ないフロントエンド言語ってなーんだ？」**

ワイ「…いや…どんな言語でも実行時エラーは出るやろ」
ワイ「例えばさっきの技術投稿サイトで」
ワイ「最新記事を1件表示しようとした場合…」

“`js
const newestArticle = articles[0];
“`

ワイ「↑こんな感じで最新の1件を取得して」

“`html

最新記事

{ newestArticle.title }

“`

ワイ「↑こんな感じで画面に表示しようとするやろ？」
ワイ「でも、まだ記事が1件もなかった場合には…」

> TypeErr

JavaScriptでJSONからテーブルを動的に生成

以下のサンプルソースは、JSON型データからテーブルを動的に生成し、指定した行数ずつ表示するページング機能を実装しています。「Tabulator」は使っていません。

“`ruby:jsontoTable.thml