JavaScript関連のことを調べてみた2021年12月07日

エディターに優しいJamstackウェブサイト：Armorbloxのケーススタディ

最高のプロジェクトは、お客様がJamstackを使うことで得られるメリットを、お客様のウェブサイト上ですぐに体験できるプロジェクトです。

著者：Arkadiusz Gorecki 2019年11月10日
原文：https://bejamas.io/blog/editor-friendly-jamstack-website-armorblox-case-study/


Bejamasのウェブ開発では、パフォーマンスとセキュリティが常に最優先されています。世界中の企業に最高のセキュリティサービスを提供することを使命とする企業から、ウェブサイトに関する問い合わせを受けたとき、私たちの価値を証明できるようなプロジェクトになると思いました。

だから、一生懸命プロジェクトに取り組みました。

##1. 概要
Armor

Temporal で JavaScript の次世代の日時処理に触れてみる

この記事は [Recruit Advent Calendar 2021](https://adventar.org/calendars/6663) の 7 日目の記事です。

## イントロダクション

Web アプリケーションの新規開発をしていて、先日、日時処理のライブラリ選定をする機会がありました。直近のプロジェクトで [date-fns](https://date-fns.org/) を使っていたので、今回もそれでいいかと考えていたのですが、Temporal　が TC39 プロポーザルではあるが stage　3 になっているから試してみてもいいんじゃないかという話になりました。stage 3 であれば　　API 変更のハードルは非常に高いそうです。stage 3 になるまでの提案は[こちら](https://qiita.com/uhyo/items/5f34f5d6f33aa091a104)の記事が参考になります。少し見ただけでも大きく変わっていることがわかります。

プロジェクトはまだ開発段階ですが、実際に Temporal をプロジェクトに導入しながら、検証兼開発を進めていい

Deck.gl の世界へようこそ！ ３歩でわかる お手軽 データビジュアライゼーション

今年も [Advent Calendar](https://qiita.com/advent-calendar/2021) の季節がやってきましたね。私も恒例の社内 Advent Calendar 向けに記事を書かせていただきます。[2019年](https://qiita.com/dsudo/items/42da9c7f45ed6147395e)，[2020年](https://qiita.com/dsudo/items/43c8c443ced83f657e14) に引き続き，今年は Deck.gl をご紹介します。

# Deck.glとは
+ https://deck.gl/
+ Uber 発のオープンソース
– MITライセンス
+ データビジュアライゼーション フレームワーク
– レイヤーを使ったアプローチ
+ React フレンドリー
– リアクティブ プログラミング パラダイム
+ WebGL ベース
– GPU で大量のデータを効率的に可視化
+ ベースマッププロバイダーとの統合
– ArcGIS, CART, Google M

Typescriptで作るクラスの初期化パターン

初めまして、株式会社Another works CTOの塩原です。

弊社ではフロントエンドでもサーバーサイドでもTypescriptを使っているのですが、クラスの初期化パターンでいろいろと試行錯誤して方針を決めたので今回はその試行錯誤の過程で考えたパターンを紹介できればと思います。

# constructor(Partial)

“`
class Klass {
public propertyA: string
public propertyB: string
constructor(init: Partial)　{
this.propertyA = init.propertyA || ”
this.propertyB = init.propertyB || ”
}
}

new Klass({propertyA: ‘test’, propertyB: ‘test’})
“`

## メリット
記述量が少なくて済む

## デメリット
Partialなので、確実に初期化したいものでもoptionalで渡せてしまう

要素をフェードインさせようとしたらUncaught TypeErrorが出た

#結論
document.getElementsByClassName()の結果は、配列のようなものになっている
参考サイトhttps://teratail.com/questions/231849

##修正前のコードとそのエラーの内容
“`custom.scss
.bg-white{
padding: 3rem;
opacity: 0;
/*要素を左に100pxずらしたところに配置する*/
transform:translateX(-100px);
/*透過度と表示位置を1秒かけて変化させる*/
transition:opacity 1s,transform 4s;
}
.bg-white-after{
opacity: 1;
transform:translate(0);
}
“`

“`home.html


```

##要素の非表示
###\を隠す例
```html

```
###アニメーション
|コード|説明|備考|
|----|----|----|
|$('h1').show();|表示|CSSのdisplay: none;とセットで多用。|
|$('h1').fadeIn();|フェードイン||
|$('h1').fadeOut();|フェードアウト||
|$('h1').slideUp();|スライドアップ||
|$('h1').sli

Day.js を使って誕生日から今何歳かを計算したい

# やりたいこと
Day.js を使って誕生日から年齢を計算したい。

---

# 正攻法
```js
const birthday = {
year: 1995,
month: 12,
date: 6,
};

const today = dayjs();
const { year, month, date } = birthday;
const dayjsBirthday = dayjs(`${year}-${month}-${date}`);

console.log(today.diff(dayjsBirthday, 'year'));
```

---

# 

---

# 他の方法はないか :thinking:

---

# Day.js の `RelativeTime` プラグインを使えないか :bulb: