【React】React Testing Libraryを使ってみる

## React Testing Libraryとは？
Reactアプリケーションをテストできるライブラリです。
Testing LibraryはVueなどのフレームワークでも利用することができます。

### 使用するコード
TestComponent.js
“`typescript
const TestComponent = () => {
return (

こんばんわ

こんにちは

ボタン1
ボタン2

);
};

export default TestComponent;
“`

### テストの実行
テストを実行するファイルを作成します。名前を`Test

【海外イベント紹介】Headless vs Traditional eCommerce Platforms

オランダのアムステルダムにある「財団法人GitNation」が毎年開催するカンファレンス「JSNation」。
今回は、そこで2021年に行われたプレゼンテーションから、Commerce Layer社、Fabrizio Picca氏のライトニングトークの内容をお届けします。
同社が提供するプラットフォーム「Commerce Layer」において、従来のWebデータベースの問題点をJamstackのアーキテクチャでどう解決しているのか、注目です。

:::note info
目次
* 従来のモノリスなシステムの問題点
* Jamstackの思想がもたらす解決策
* まとめ
:::

## 従来のモノリスなシステムの問題点

従来のWebシステムの多くは巨大なモノリスと化しているといわれています。
「モノリス（monolith）」とは、遺跡などにある巨大な平らな一枚岩のこと。ここでは、大きな１つのものにすべてを詰め込んだシステムのことを意味します。
そのようなシステムには、大抵、以下のような問題があります。

#### 柔

【React】自作サイトを自作ライブラリで高速化する話

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev) です。

随分前なのですが、 React で手軽にサイトを高速化できるライブラリ `react-dom-lazyload-component` を作って公開しました。

https://github.com/hiroki0525/react-dom-lazyload-component

ふと、「本当に **サイト高速化の効果があるのか？** 」と思い、自作サイトに `react-dom-lazyload-component` を使ってみました。

**自作ライブラリが本当にサイト高速化に役立つのか**、検証したいと思います。

## `react-dom-lazyload-component` ってどんなライブラリ？

**ブラウザの決まった枠内に入るまで DOM を非表示にするライブラリです** 。

`IntersectionObserver` というブラウザ API をご存知の方はピンと来るかもしれません。

![スクリーンショット 2022-11-18 9.04.12.png](h

JavaScriptでクラスやインスタンスを判定してメンバを列挙する

# 概要

Javascriptでクラスを判定してメンバを列挙する必要が出てきたのでやり方を探してみた。
Node.js・Chromeで確認
JavaScriptのクラス関係の命名がよくわからなかったのでJava基準で

# クラス、インスタンスの判別

クラス・インスタンスを普通にtypeofに通すとクラスは`function`、インスタンスは`object`と返ります。JavaScriptのクラスが単なる糖衣構文に過ぎないことがよくわかります。

“`javascript
class TestClass {
static classMethodTest(){}
static classFieldTest;
static arguments;
instanceMethodTest(){}
instanceFieldTest;
}

let TestObject = {
constructor: ”
}

let TestFunction = function() {
}

let TestInstance = new TestCla

【JavaScript】Day.jsでタイムゾーンを変更しつつフォーマットする

## 概要
Day.jsではparseやformatの際に、日付のタイムゾーンを設定することができます。
今回はUTCのタイムゾーンで受け取った日付の文字列を、日本時間に変換しつつformatする、といった場合にどうするかというののメモ書きです。

## 対応方針
まず、parse時にドキュメントの[Parsing in Zone](https://day.js.org/docs/en/timezone/parsing-in-zone)にある通り、`dayjs.tz`の関数を呼び出してUTCのタイムゾーン指定でparseします。
parse後のオブジェクトをドキュメントの[Time Zone](https://day.js.org/docs/en/timezone/timezone)にある通り、もう一度`dayjs.tz`関数を呼び出して、日本時間に変換します。

## 実装サンプル
“`js
function getDayJsObj() {
const dayjs = require(“dayjs”);
const utc = require(“dayjs/plugin/

はてなブックマークにフィルタ機能を追加する

# きっかけ
私は、はてなブックマークをよく見ています。
有用な記事が多いですが、さらに効率的に閲覧するために、フィルター機能を作成しようと思いました。
スマホアプリでは公式にフィルタ機能が実装されました[^1]が、ブックマークコメント等でブラウザ版での実装を希望する声は大きいですね。
[^1]:[はてなブックマークアプリでミュート機能（β）の提供を開始しました](https://bookmark.hatenastaff.com/entry/mute)

# 完成品
– はてなフィルタリング

# 使用方法
1. Chromeの拡張機能[Tempermonkey](https://www.tampermonkey.net/)[^2]をインストール
2. [はてなフィルタリング](https://greasyfork.org/ja/

プリズン・ブレイク　シーズン5　第9話（最終話）『瞳の奥』のあのシーンを再現するべくWebアプリを制作した。

# 前書き
**「プリズン・ブレイク」**

皆さんの中にも作品を愛し、**マイケル・スコフィールド**を愛した方もいるだろう。
例に漏れず私もその一人だ。
プリズン・ブレイクは、ウォーキングデッドほどではないが、5シーズン90エピソードで構成されており、一通り見るには**一度深呼吸をし、覚悟を決めなければ最後まで見切ることができない**ような長編ドラマである。

私はそれを、**5周**した。
5回、1からプリズン・ブレイクを見たのだ。
周りからは、「他の作品も色々見ろ」と言われたが、**5回も見ることができるほど価値のある作品**なのである。

今回制作したシーンだが、90エピソードある90話目の一部にあたる。
プリズン・ブレイクについて詳しく知りたい方や気になる方は、もちろんご自身の目で一度見ていただくことを推奨するが、[Wikipedeia](https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AA%E3%82%BA%E3%83%B3%E3%83%BB%E3%83%96%E3%83%AC%E3%82%A4%E3%82%AF)も参考いただけ

Web音楽プレイヤーアプリ

HTML/CSS、JavaScript、jQueryで自作のWeb音楽プレイヤーアプリを開発しました

“`html