JavaScript関連のことを調べてみた2022年11月14日

TypeScriptの型引数におけるextendsがなかなか覚えられないのでもう一回調べてみた

# はじめに
type-challengesに挑戦中にジェネリクスとextendsの組み合わせで混乱したのでまとめます
# 目次

1. [extendsとは](#Chapter1)
1. [どうやって使うか](#Chapter2)
1. [【蛇足】応用](#Chapter3)
1. [【蛇足】応用　まとめ](#Chapter4)
1. [参考文献](#reference)

# extendsとは
extendsとはtype分で型引数を指定するときに型の絞り込みを行える機能のことです。
例えば、下記の例ではtype Fooに対して““という型引数を与えて型の絞り込みを行っています。
なので、“value: T“の“T“は“string型“になるということがわかります。
この場合“string型“に絞っているので“Foo“とすることはできません。
この構文では[ジェネリクス](https://typescriptbook.

Stripeの「冪等キー」を利用して、多重決済や顧客の重複作成を予防するシステムを実装する方法

ECサイトなど、多くの決済を取り扱うシステムでは重複処理・多重決済をいかに防止するかが重要です。

Stripeの場合、同一IDのPayment IntentやInvoiceであれば、2回目以降の決済リクエストについてはデフォルトでエラーで返します。

例えば、以下のコードでは、1回目の`confirm`以降に`confirm`や`capture`を実行すると、`This PaymentIntent could not be captured because it has already been captured.`エラーが発生します。

“`js
const stripe = new Stripe(‘sk_test_xxxx’, {
apiVersion: ‘2022-08-01’,
})

// Payment Intentを作成
const paymentIntent = await stripe.paymentIntents.create({
customer: ‘cus_xxxx’,
amount: 19

Intersection Observer API(監視対象を増やす)

・queryselectorAllを使い全部を取得する。
・forEachを使い全部やる。

ちなみに、、、、
entriesには監視している全ての要素が入ってくるわけではない。
entriesは複数の要素を持つ配列で、監視開始時点では全てのtargetが、交差した時では交差したtargetだけが要素として入ってくる。
“`Javascript
const targets = document.querySelectorAll(‘img’);

function callback(entries, obs) {
console.log(entries);

if (!entries[0].isIntersecting) {
return;
}

entries[0].target.classList.add(‘appear’);
obs.unobserve(entries[0].target);
}

const options = {
threshold: 0.2,
};

const observer

Intersection Observer API(監視をやめる)

スクロールするたびに、監視してしまい、PCに負荷がかかる。
監視をやめるためには、、
“`Javascript
{
const target = document.querySelector(‘img’);

function callback(entries, obs) {
console.log(entries[0]);

if (!entries[0].isIntersecting) {
return;
}

entries[0].target.classList.add(‘appear’);
obs.unobserve(entries[0].target);
}

const options = {
threshold: 0.2,
};

const observer = new IntersectionObserver(callback, options);

observer.observe(target);
“`

・引数をもう一つ渡す。
・unobserve()を使い止める。

PHP+JavaScriptでSPA開発（WSL2/Docker）

## はじめに

PHPとJavaScriptを使って、非同期で動くToDoアプリを作成します。フレームワーク等を使わずに実装していきます。

#### 作成するアプリの仕様
– タイトル、内容の追加

– 文字数のバリデーション機能

– 削除

Intersection Observer API(範囲の指定応用)

# Intersection Observer API(範囲の応用)
thresholdを書いているところに追加する。
種類は大きく分けて２種類
1.root:null
→nullがデフォルト。細かく指定できる。％の
2.rootmargin:’0 0 0′
→marginをつける時と同じようにして書く。

ex)
“`Javascript
const target = document.querySelector(‘img’);

function callback(entries) {
console.log(entries[0]);

if (!entries[0].isIntersecting) {
return;
}

entries[0].target.classList.add(‘appear’);
}

const options = {
threshold: 1,
rootMargin: ‘0px 0px -100px’,
};

const observer = ne

Intersection Observer API(targetの情報)

# Intersection Observer API(targetの情報)
“`Javascript
const target = document.querySelector(‘img’);

function callback(entries) {
console.log(entries[0]);
}

const options = {
threshold: 0.2,
};

const observer = new IntersectionObserver(callback, options);

observer.observe(target);
“`
・functionの引数を設定することで情報を受け取ることができる。
・引数は配列扱いになり、con~()で配列のように受け取る。

【中身】
・intersectionRatioはrootが何%交差しているか。
・isIntersectingは交差しているか。真偽値

# 実践(rootに交差したらふわっと出てくる)
cssでは、、、
“`Javascript
img {

Intersection Observer API（ターゲットが交差する％）

# Intersection Observer API
ある要素がスクロールして、特定の領域に入ったら、どれだけ交差しているか調べる。
領域：root
要素：target
割合：Intersection Ratio

ex)imgが一つある。それが画面に入ってくる。
“`Javascript
const target = document.querySelector(‘img’);

function callback() {
console.log(‘fired!’);
}

const observer = new IntersectionObserver(callback);

observer.observe(target);
“`
・observer()は（）を監視して。
・new IntersectionObserver()は、IntersectionObserverは()の仕事をする。
・これらの処理は監視が始まった時、０％の時(最初と最後)の計三回ある。
→じゃあ％を指定したい時はどうするの？→threshold
# %の指定
“`Jav

Javascript (クラス)

# JSのクラスについて
“`Javascript
const posts = [
{
text: ‘JavaScriptの勉強中…’,
likeCount: 0,
},
{
text: ‘プログラミング楽しい！’,
likeCount: 0,
},
];

function show(post) {console.log(`${post.text} – ${post.likeCount}いいね`);
}

show(posts[0]);
“`
・post.textはオブジェクトの取り出し方法。
post=posts[0]= {text: ‘JavaScriptの勉強中…’,likeCount: 0,}

“`Javascript
const posts = [
{
text: ‘JavaScriptの勉強中…’,
likeCount: 0,
// show: function() {
// console.log(`${

[JavaScript]名前付きexportとデフォルトexportの違い

## 内容

JavaScriptのモジュールエクスポートについて、名前付きexportとデフォルトexportの違い・使い分けがどっちだっけ？となることがあるためまとめます。

## 目次
– [名前付きexport](#名前付きexport)
– [デフォルトexport](#デフォルトexport)

## 名前付きexport・デフォルトexportの違いまとめ

| | 名前付きexport | デフォルトexport |
|:-:|:-:|:-:|
| 書き方 | export const 変数名
export const 関数名 | export default function App() {} |
| インポートの{} | {}が必要 | {}が不要 |
| インポートする名前 | エクスポートする名前と合わせる
エイリアスを設定 | 任意の名前 |

## 名前付きexport

名前を付けて作成した変数や関数をエクスポート
“`javascript:namedExport.js
const sampleVar = ‘Varia

OpenLayers入門

## はじめに
この記事は#30DayMapChallenge2022 13日目の記事です。
テーマは5 minute mapです。
OpenLayersを使って背景地図を表示してみます。


https://30daymapchallenge.com/

## OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした

最近ロゴが変わって可愛くなりました（余談）
他のマップライブラリと比べて、座標系などGISの知識が必要になりますが高機能なことができる印象です。

OpenLayersの利用方法として以下の2つ

Vercelにデプロイ時のビルドエラー[ModuleNotFoundError: Module not found: Error: Can’t resolve ‘xxx’ in ‘/vercel/path0/components’]

## 内容

Next.jsプロジェクトをVercelにデプロイ時のビルドで、ModuleNotFoundエラーが発生したため、解決した手段を記述。
Next.jsプロジェクトをVercelにデプロイする手順の記事は[こちら](#https://qiita.com/tarian/items/dffaf2dc8c3b3e393e5f)にまとめています。

## 目次
– [エラー内容](#エラー内容)
– [エラー原因](#エラー原因)
– [解決手順](#解決手順)

## エラー内容

Vercelデプロイ時のエラー文
“`plaintext
ModuleNotFoundError: Module not found: Error: Can’t resolve ‘xxx’ in ‘/vercel/path0/components’
“`
どうやらモジュールが見つからないらしいが、コードを見返してもファイルを参照する相対パスなどに誤りが見受けられない。

## エラー原因

[Vercelの公式サイト](#https://vercel.com/guides/how-do-i-res

Next.jsプロジェクトをVercelにデプロイする

## 内容

Next.jsで作成したプロジェクトをVercelにデプロイする方法についてまとめ。
Next.jsのプロジェクトは既にGitHubにpush済、Vercelのサインアップは既に完了している前提で進めます。

## 目次
– [デプロイ手順](#デプロイ手順)
– [サブドメインの変更](#サブドメインの変更)
– [環境変数の追加・編集](#環境変数の追加・編集)
– [トラブルシューティング](#トラブルシューティング)
– [その後の運用](#その後の運用)

## デプロイ手順
### Vercelのプロジェクトを作成

[Vercelのダッシュボード](#https://vercel.com/dashboard) > Add New… > Project を選択

### GitHubにVercelからのリポジトリへの

デジタル庁公開のデザインをhtml/cssに落とし込んでみた。

# はじめに

デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。
html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。
ということでhtml/cssに落とし込んでみました。

https://www.digital.go.jp/policies/servicedesign/designsystem/

## 注意事項

– 趣味程度に作ったものを、使いたい人がいればどうぞというものです。
– 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。)
– 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。
– 大変つかれましたので、厳しいコメントは受け付けません。
– 気が向いたら、もう少しきれいにするかもしれません。

## 完成概要
ページとしてはこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws

パワーワードをバトルさせるアプリをレベルアップしてみた～Ver2～ #JavaScript #WebSpeechAPI

### 1.先日作成したアプリをレベルアップしたい
先日、パワーワードをバトルさせ勝敗を決定するアプリ **『ぱわーわーどばとる』** を作成しました。
結構いろんな方に見ていただいて、私が作成したQiita記事の中では一番参照されています。
せっかくなので、作成したアプリをレベルアップすることにしました。

※前回作成したアプリの詳細はリンク先を参照いただけると嬉しいです。
**【前回記事リンク】**

https://qiita.com/kana87/items/18de38997edf64c09086

### 2.「ぱわーわーどあぷり」とは
レベルアップしたアプリはリンク先にて公開しています。

https://prismatic-cheesecake-e864d4.netlify.app

先日作成したパワーワードをバトルさせるアプリをレベルアップしました。見た目を結構変更してます。パワーの計算にCustom Search API を使っているので、一日でできるバトル数に上限があります #protoout #パワーワード #Webアプリ #JavaScriptscripthttps://t.co/jwmAW3IryJ pic.twitter.com/czVh8AVVcE

— きく (@AYE7WvdouqRwaNp) November 13, 2022

#### 3.アプリの利用ガイド
1.入力欄にバトルさせたいパワーワードを入力する
2.「たたかわせ

ERC20トークンをmintするページを作った

# 概要

ERC20準拠のトークンをmintできる機能を作ったので紹介します。
まだまだブロックチェーン界隈の記事は少ないので参考になれば幸いです。

– 目次
– 作ったものの機能紹介
– ソースコード解説

# 作ったもの

https://teniguru.tk/teniguru_raw/bctest/OKTToken.html

イーサリアムメインネットではなくGoerliテストネットのみで利用が可能です。

Goerliテストネットへmetamaskを接続するには以下記事を参考にするとよいです。
https://qiita.com/ItodaiCrypto/items/563214a28239c6f9cf0e

mintする機能を含め、一部の機能はガス代が必要です。以下でgoerli-ETHを入手しておいてください。
https://goerlifaucet.com/

画面実装が面倒だったので、残高確認などの出力項目はconsole.logで出しています。

### get

get!!!ボタンを押すことでERC20準拠の「OKT」をmintし、ボタンを押

Firebase, 生のHTML(Java Script)を用いた簡単な開発環境をつくる

# はじめに
私がはじめてデータベースに触れたのはFirebaseである。
ネットゲームのようにDBはネット上に存在することが当たり前だと思っていたからである。
その中でFirebaseはとても使いやすかった。
そのおかげでJava Script, DBに対する理解度が深まって他の言語に対する抵抗もかなり減る結果になった。
ここでは初心者が簡単にDBを用いたホームページなどを作るとき、基本的な設定がわかるように、書いておく

# 環境
window 10
node.js 18.12.1
Firebase 8.6.5

# 基本設定

## Firebase

Firebaseにログインし、直感的にわかるように、使ってみる → プロジェクト追加をする

https://firebase.google.com/


使ってみるをクリックし、プ

【React】normal exportとdefault exportについて

reactのexport方法にはnormal exportとdefault exportの2種類ある。
違いは以下の点。

## normal export

(exportするコンポーネント側の記述。今回はMainComponentというコンポーネントをexportしたいものとする。)
“`
export const MainComponet = ( ) => { };
“`

(importするコンポーネント側の記述)
“`
import { MainComponet } from ‘./MainComponet’;
“`

normal exportの場合、MainComponetをexportするときにconstの前にexportをつけ、importする時にそのコンポーネント名を{ }で囲む。
また、**normal export の場合、importしたいコンポーネント名はexportしたコンポーネント名と一致していなければエラーになる。**
なので、import { MainComponet } from ‘./MainComponet’;の中の{ MainCom

DOMの習得までの道のり(2/n)_DOMのノード構造

## シリーズ目次
この記事の続編です。

https://qiita.com/SayCheeese/items/1828f11c47ff26162b81

**DOMの習得までの道のり**
1. [やりたいことまとめ](https://qiita.com/SayCheeese/items/1828f11c47ff26162b81)
1. **DOMのノード構造**　（本記事）

## シリーズで解きたい課題
DOMを利用して、`

`の中に`

`で並んだ要素を、
`

• `を用いたリスト形式に変換したい

  ## 本記事の内容
  1. DOMとは
  1. DOMツリー

  ## 1. DOMとは [^1]
  – JavaScript側からHTML(やXML)の要素を取得できるAPI
  – bodyタグを取得
  – id=”content”のdivタグを取得
  – ページの全てのアンカーリンクを取得
  – Document Object Model、略してDOM
  – HTMLやXMLをオブジェクトの**ツリー上の集合体**として扱うことができる

  ## 2.

DOMの習得までの道のり(1/n)_やりたいことまとめ

## この記事の趣旨
近頃DOMの勉強をしています。
うまくやりたいことが実現できないため、
備忘を兼ねて道のりや手段についてメモをとっていこうと思います。
最終的には解決策のみをまとめたページを作成予定です。

## 解きたい課題
DOMを利用して、`

`の中に`

`で並んだ要素を、
`

• `を用いたリスト形式に変換したい

  “`html:before
  
  
  
  
  
  

  にんじん

  じゃがいも

  たまねぎ

  リスト形式で表示