intersection observer apiとは

# はじめに
初めまして、英語を効率的に学べるサービスを自ら手掛けたいと思いプログラミング学習を約３ヶ月前から始めました。アプトプットをしたいと思い下手くそな説明または間違った内容の投稿にもなるかも知れませんが、『どうか遊んでいる子供を見守っているお父さんのような暖かい目』で私の記事を読んでほしい限りです。笑

# 本日の学び
今日はjavascriptのIntersection Observer APIを学びました。なのでAPIについて簡単ですが説明していこうと思います（間違っている場合ご指摘お願いいたします）

# そもそもIntersection Observer APIとは？
画像(target)などが画面（viewport)にどのくらいの割合表示されているのかがわかる仕組みのこと。この技術のおかげでwebサイトでよく見る画像を下から上にフワッと表示できるようにおしゃれなサイトを制作できるようになる

“`

自作のChrome拡張機能をManifest V3へ移行した際の修正内容まとめ

# 自作のChrome拡張機能
[Chord Dictionary](https://chrome.google.com/webstore/detail/chord-dictionary/lnefagbhokamcaedbeopnhdabkcemkcf?hl=ja)

# 修正内容

## manifest.json
“`diff_json:manifest.json
{
– “manifest_version”: 2,
+ “manifest_version”: 3,
“web_accessible_resources”: [
– “main.js”,
– “main.css”,
+ {
+ “resources”: [“main.js”, “main.css”, “sounds/*.mp3”],
+ “matches”: [“http://*/*”, “https://*/*”]
+ }
],
– “browser_action”: {
+ “action”: {
“default_title”: “Chord Di

Asciidoctor Web PDFで表紙をつくってみた

# 1. はじめに

Asciidoctor Web PDFは、asciidoc形式のファイルをPDFに変換してくれます。
フォントもとりあえずでよければ、適当に選んでくれるみたいです。
処理系は javascriptです。

Asciidoctor PDF(ルビー版）で、表紙をカスタマイズするのは難しすぎるので、
Asciidoctor Web PDFを使用しました。

# 2. 準備

Node.jsは インストールされているとします。

https://github.com/Mogztter/asciidoctor-web-pdf
を参考に、とりあえずグローバルインストールします。

コマンドプロンプトなどから、次のコマンド実行します。

“`console
>npm i -g @asciidoctor/core asciidoctor-pdf
“`
インストールを確認するために、バージョン確認してみます。

“`console
>asciidoctor-web-pdf –version
Asciidoctor Web PDF 1.0.0-alpha.14～～～
“`

【JavaScript】ワンクリックで複数のページが開くリンクをブログに設置する方法

知人の依頼で作成

超簡単です、非エンジニアでもhtmlをいじれればできると思います。

ソースコード
–

“`html

ここクリックするとタブが開きます

“`

指定したidのものをクリックしたさいに関数が発火するようにしています。

URLは仮でgoogleにしていますが、もちろん任意のもので

ag-grid-community 事始め

# はじめに

　高機能な表組み表示を求められ、グリッド表示ライブラリを試しております。
　AG Grid（[公式サイトのデモページ](https://www.ag-grid.com/example/)）がすごかったので、例に組み込んでみることにしました。
　使用するのは、”ag-grid-community”のバージョンは 27.3.0 です。

# 構築手順

　fetchしたjsonを加工して表示する、という前提で説明をしていきます。

## パッケージ追加

　[JavaScript Data Grid: Install AG Grid with NPM](https://www.ag-grid.com/javascript-data-grid/npm/)のページに従って、npmコマンドを駆使してパッケージ追加します。
　package.json には「”ag-grid-community”: “^27.3.0”,」が増えました。

> npm install –save ag-grid-community

## カラムの定義(1)：最低限必要な項目

　[JavaScri

Jestのmockを使いES6クラスのテストを実装してみた　様々なモックの作成方法

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/nb2f427093fd8

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/435c2b3d4b2759fa19c20de59de6e8215f8a445f

https://github.com/yuta-katayama-23/node-express/commit/8da10b36cd23c9868d9f5ead1311c40dc3935425

## おまけ
上記で見てきたES6クラスの実装の仕方の都合上、例えばExpressで利用する際には以下のようになるだろう。

“`js
import express, { Router } from ‘express’;
const router = Router();

const port = process.env.PORT ||

HTMLのdialog要素の背景をクリックしてdialog要素を閉じる方法

IE11のサポートが終了して遂に色々なタグが自由に使えるようになってきました。
今まで使いたくても対応が面倒なので全部divにしていた要素の一つ、dialog要素を実装していて`::backdrop`の部分をクリックして閉じるにはどうすればいいのか調べた際のメモです。

## やりかた
dialog要素がクリックされた際、`getBoundingClientRect`でdialog要素の寸法を調べ、クリックされた位置がdialog要素の内か外かをチェックし、要素外なら`close()`を発動させる。

“`js
const dialog = document.getElementsByTagName(“dialog”)[0];
const button = document.getElementsByTagName(“button”)[0];
button.addEventListener(“click”, (event) => {
dialog.showModal();
});
dialog.addEventListener(“click”, (event) => {
c

IntersectionObserverとは？

# はじめに
フッターまでスクロールした際に、画面の下部にあるボタンがフェードアウトするような実装をしました。
scrollイベントだと、画面が動くたびにイベントが発火されるので、パフォーマンス的に良くないので、IntersectionObserverを使用しました。

# IntersectionObserverについて
IntersectionObserverとは、指定した要素と基準要素が交差するのを非同期で監視してくれるという機能です。

IntersectionObserverは、別名 **交差オブザーバー API**とも言います。
IntersectionObserverは、画面をスクロールした際にフェードインするようなアニメーションによく使われています。scrollイベントは、スクロールするたびにイベントが発火しますが、IntersectionObserverは非同期で実行されるのでパフォーマンスにも影響しにくいです。

# IntersectionObserverの使い方
IntersectionObserverは、コンストラクターを呼び出し、指定した要素が基準とする要素

【javascript】【jquery】文字列を結合代入する

# コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
let results = [
{‘name’ : ‘田中,’, ‘japanese’ : 83},
{‘name’ : ‘渡部,’, ‘japanese’ : 62},
{‘name’ : ‘品川,’, ‘japanese’ : 23},
{‘name’ : ‘滝谷,’, ‘japanese’ : 93},
{‘name’ : ‘川原田,’,’japanese’ : 55},
{‘name’ : ‘一色’, ‘japanese’ : 27},
];
let name = ”;
results.forEach((result) => {
name = name + result.name
})
console.log(name);
“`

# 結果
“`
田中,渡部,品川,滝谷,川原田,一色
“`

相手の「n年前」のツイートを一発表示する（語句検索も）

# 動機
– いろんな人の「n年前の今日」のツイートを見たい
– 故人の「5年前の今日」等をこまめに追えればグリーフケアの一助になるかも

# コード

ブクマ用／一行圧縮　※ブックマークのURL欄にコピペ

“`javascript:
javascript:(()=>{const defo=3;const input=window.prompt(‘how many years ago?’,defo)??!1;if(input===!1)return;const url=decodeURIComponent(location.href);let userName=%27livedoornews%27;const r1=/^https:\/\/(mobile.)?twitter.com\/(\w*)(\/.*|\?.*)?$/;const m1=url.match(r1)??!1;if(m1[2]!==%27search%27){switch(m1[2]){case undefined:case %27i%27:case %27home%27:case %27explore%27:c

【javascript】【jquery】パイプライン演算子

## 数値でなければ、任意の数値を表示
# コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

let a = 123;
console.log(a|0)
//結果：123

let b = ‘123’;
console.log(b|0)
//結果：123

let c = ‘0a123’;
console.log(c|0)
//結果：0

let d = ‘a123′;
console.log(d|0)
//結果：0
“`
## nullか0なら文字列を表示する

“`javascript
let e = 123;
console.log(e||’データなし’)
//結果：123

let f = ”;
console.log(f||’データなし’)
//結果：データなし

let g = 0;
console.log(g||’データなし’)
//結果：データなし

【海外イベント紹介】 Speeding up Singapore’s COVID-19 response with the Jamstack by Kwa Jie Hao

今回は、「Jamstackカンファレンス 2021」で行われたプレゼンテーションから、

「Speeding up Singapore’s COVID-19 response with the Jamstack」

の内容をご紹介します:loudspeaker:

10年以上の歴史を持つ「Jamstackカンファレンス」は、Jamstackの生みの親であるクラウドコンピューティング企業「Netlify」が主催。世界中の開発者が集い、Jamstackをコンセプトとした最新のWebサイトの設計、開発などについて話し合います。プレゼンテーションの言語は英語ですが、本ブログでは日本語でご紹介します。

>**目次**
政府謹製のWebサイトビルダー
Jamstackでの構築
フェイクニュースとの戦い
―成功例―
① 企業支援のためのサイト
② 市民の体験を共有するためのサイト
最後に

今回の講演者は、シンガポールのエンジニアチーム「オープン・ガバメント・プロダクツ」の一員であるKwa Jie Hao氏。

「オープン・ガバメント・プロダクツ」は、シンガポールの公共サイトで利用されるシステムや

Railsで最新V8のSwiperへのバージョンアップに対応する

こんにちは、りです。
先日Swiper.jsは`4.5.0`から`8.2.4`(時点最新)へアップデートされました、（怖いバージョン差?）、今回はその対応STEPSとバージョンの解説をまとめました。
## 概要
**1.アップグレード対応STEPS:**
– STEP1: Swiperのアップデート
– STEP2: クラス名を変える
– STEP3: CSSとJSを読み込ませるように修正する

**2.注意点:**
– V6.5.1未満場合脆弱性がある
– V5.4.5以降はIE11では対応していなかった

**3.参考資料**

### 1.アップグレード対応STEPS
Swiperのリリース情報確認: `2022-06-13`に[v8.2.4](https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md#824-2022-06-13)をリリース、[v4.5.0](https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md#450—r

【JavaScript】9割自力でまるばつゲーム作った

QiitaでのQ&Aに２回ほど助けられましたが、それ以外すべて自力で作りました。
今後コードの簡略化と勝敗の判定の追加に励みます。
アドバイスやご意見等お待ちしております。
“`html

まるばつゲーム