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

TypeScript のオブジェクト型まわりの整理

TypeScript のオブジェクト型まわりが多少ややこしかったので整理。

## オブジェクト型(Object Types)

用途：いろいろ。主にデータのまとまりを表現するため。

“`typescript
type Person = {
name: string;
age: number;
};

const taro: Person = { name: ‘taro’, age: 22 };
const hanako: Person = { name: ‘hanako’, age: 25 };
“`

## インデックス型(Index Signatures)

用途：任意のプロパティ名を使用したい場合。主に辞書データを扱う場合。

“`typescript
type IdToPerson = { [key: string]: Person };
const idToPerson: IdToPerson = { id_1: taro, id_2: hanako };
“`

## `Record`

用途はインデックス型と同じ。下記は上記と同

JavaScriptにおける無名関数とアロー関数の「this」のスコープの違いについて

# 前置き

これについて学ぶ発端となったのは、以下のコードを書いているときでした。
リクエストを並列に走らせたく、Promise.allを使う必要がありました。
Promise.allの引数には、配列でPromiseオブジェクトを渡す必要があるので、下のputs（）というPromiseオブジェクトを返す関数も作成しました。

以下ではエラーが出るのですが、どこが間違いか気づきますか？

“`JavaScript
method(A, B) {
// 処理
}

puts(A, B): Promise {
return new Promise(function(resolve) => {
this.$api
.get(‘/tech-talk’)
.then(response => {
this.method(A, B)
})
.then(() => resolve())
})
}

funcA(): Promise {
const pr

【個人開発】誰でも、気軽に使える！エンジニア向け案件マッチングサービスを作ってみた。

# はじめに

はじめまして、まーと申します。
Twitter↓
Tweets by KPz234iNYoOQZF5

今回作成したサービス↓
https://match-engineer.com/

昨今では、コロナウイルスの影響もあり、「テレワーク」や「リモートワーク」といった言葉が一般の方々にも浸透しました。そんな中、「自分も案件を獲得してみたい！」「まずは副業からはじめてみたい！」といったニーズも増えています。
(参考：https://xn--pckua2a7gp15o89zb.com/news/20211109)

しかし、そのようなニーズが増えている一方で、経験の浅い学生や主婦のような方々が、**気軽に挑戦できる環境が整っているとは言いづらい状況**となっています。エンジニアの方が案件を獲得するクラウドソーシング

休憩時間だからこそ、テンションをあげたい時に押すボタンを作った

# 「疲れた！」という言葉を何かのエネルギーに変えたい
リモワ中、誰もいないのをいいことについ「疲れたー！！！」と叫んだりしたことはないだろうか？私はある。実際は「つっっっっっっかれたー……」という、心の底から絞り出した渾身の「疲れた」。
この言葉を **何かのエネルギーに変換することはできないだろうか？** そう、例えば **テンションをあげる何かに……**

# テンションをあげるものと言えば
テンションが上がるものは何か？ **氷川きよし**でしょ。
完成したのがこちら。
※音声は流れません

テーマ「休憩」でアプリを作りました。ものはリプに貼っておきます。 pic.twitter.com/l02IhKpxaH

— 7mst?Webサービス【ぬいmeet】制作中 (@nnmshita) March 3, 2022

# アプリ
https://condescending-bassi-b0ab17.netlify.app/

**＜使い方＞**
* マイク認証をONにして、ボタンを押す。
* 心の底から「疲れたー！」と言う。（「めっちゃ疲れた」「ちょー疲れた」でも可）
* 氷川きよしさんが煽り散らしてくれるので、こぶしを振り上げ

【個人開発】「真のナポリピッツァ協会」認定店をサクッと探せるWebサービスをリリースしました。

## はじめに
[おおの](https://twitter.com/ohno_hope3)と申します。
突然ですが、**真のナポリピッツァ**[^1]を食べたくありませんか？
これを使えば**真のナポリピッツァが食べられて感動すること間違い無し**というサービスを開発しました。
– ナポリピッツァ好きが**真のナポリピッツァ協会認定店**[^2]をサクッと探したい。
– ナポリピッツァを意識して食べたことがなかった人に**真のナポリピッツァ**[^1]の感動を伝えたい。
– ナポリピッツァ界隈の発展を応援する想いを込めて **『真のナポリピッツァ部』** を開発しました。

**URL:** https://www.napolipizza-club.com/
**GitHub:** https://github.com/shota-hope/True

JavaScript: reduce [アウトプット全くしてこなかったのでアウトプットする004]

reduceを書くことがほぼなかったのでアウトプットします。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

> reduce() で一番わかりやすいのは、配列のすべての要素の和を返す場合でしょう。

“`js
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);

console.log(sumWithInitial);
// expected output: 10
“`

“`js
(previousValue, currentValue) => previousValue + currentValue,
`

vistaでphotoshop その13

# 概要

vistaでphotoshopやってみる。
キャンバス作って、部分的にjpg読んで、pngで出力やってみる。

# 写真


# サンプルコード

“`
preferences.rulerUnits = Units.PIXELS;
var docObj = app.documents.add(640, 480);
var fileObj = new File(“/Users/ore/eki.jpg”);
open(fileObj);
var x = 100;
var y = 100;
var selReg = [[x, y], [x + 400, y], [x + 400, y + 400], [x, y + 400], [x, y]];
activeDocument.activeLayer.copy();
activeDocume

getElementsByClassNameでの躓き

getElementsByClassNameへの理解不足で躓いたので記録として記載します。

Javascript学習の一環としてHTML/CSSで作成した静的サイトの文章を英語化しようとgetElementsByClassName, style.displayを使おうとしていましたが、getElementsByClassNameについてしっかり確認せず、名前の似ているgetElementByIdのように考えていたのでエラーとなりました。

**getElementsByClassName（）：指定したクラス名を持つ要素のリストを返す。**
**getElementById: 指定したidを持つ要素を返す。**

当初”リストを返す”を理解できておらず、その後のstyle.displayが効かなく困りましたが、配列として考えてfor分で取り出すことができるという情報を発見したので参考にしました。
pタグにクラスを持たせて取得し、取得した要素のstyle属性(display)を操作することで簡易的に日本語⇄英語の切り替えをできるようにしています。
無理やりやってる感じが強いのでスマートな

日時ライブラリのTemporalの色々なAPIをいじってみた

## はじめに

:::note warn
Temporalは現状 TC39 proposal stage 3 のものを使用しています
今後APIが変わる可能性もあるのでご注意ください
:::

JavaScriptで日時ライブラリを使用する機会があり、Temporalが stage 3 だったのを思い出したので、少し触ってみようと思いました。

せっかくなので、何か作りながら触ってみようということで、簡易的なカレンダーを作ってみました。

https://codesandbox.io/embed/green-sky-olr0m4?fontsize=14&hidenavigation=1&theme=dark

## Temporalとは

JavaScript標準ライブラリへの追加を目指して開発中の日時ライブラリです。

https://github.com/tc39/proposal-temporal

Temporalについては日本語でもドキュメントを一部翻訳いただいていたり、Qiitaにすでにいい記事がいくつかあるので、詳しくはそちらをご覧ください。

https://tc39

MediaRecorderで作ったp5.jsの超簡単録画ツール(p5.MovRec)を更新した話

# サマリ?
以前に、[MediaRecorderとffmpeg.wasmでp5.jsの超簡単録画ツール(p5.MovRec)を作った話
](https://qiita.com/tetunori_lego/items/c942eb2aad844b72dadb)で作ったツールについて、セキュリティの都合上`ffmpeg.wasm`が使えなくなるケースが多くなってしまったため、再度、高画質`webm`動画を作るツールとして再リリースすることにしました。録画手順もさらに簡単になったので、改めて記事化しておきます。

というわけで、あらためまして、`MediaRecorder`を使って、`p5.js`上で、簡単にスケッチの録画ができるツール(`p5.MovRec`)を開発しました。既存の`p5.js`のスケッチを汚すことなく、HTMLファイルにたった**1行**追加して、キーボードを押すだけで爆速で動画が生成される簡単ツールとなっています。TwitterとかYouTubeとかに作品をアップされている方にお勧めです。
※ただし、TwitterにUpする方は、[Convertio](https:

JavaScript入門：タイピングソフトを作ろう！「 キーワード簡単編集で自分の練習したい文字列に変更可能 」

# Youtubeで公開した内容を記事にしました。

#### タイピングソフトを作ろう！【後編】「HTML/CSS/JavaScript/PHP…のキータイピング練習にも対応」JavaScript入門
以下Youtubeでの解説動画も張っておきます。（同じ内容ですが、詳しすぎるほど説明してます（笑））

https://youtu.be/T4jU9KHukoM

## ◆ サンプルファイル
**Github** からダウンロードしてご利用ください
https://github.com/yamazakidaisuke/keytyping_youtube

## ◆ どんなキータイピングアプリ？
**外部ファイルでキーワードを管理**します、以下のように並べるだけ。
これはJavaScriptでFileApiを利用することで可能になります。

入社3日目

#改善点
会社でもコメントでも御指摘あった通り殆ど日記と大差なくQiitaで書く様な物では無かったのと自分が思ってるよりか説明下手なのもあったので今回からはよりエンジニア向け且つ分かり易く纏める事を意識したいと思います、御指摘して下さった方々本当にありがとうございます。

##そんな訳で本日の学習内容
午前中　主にHTMLの学習
HTMLの基本文法から、HTMLの始まりを表す〈!DOCTYPE html〉タグや見出しの〈h〉タグ、段落を表す〈p〉タグと箇条書きに用いる〈li〉タグにその〈li〉タグを囲む〈ul〉と兎に角タグ、タグ、タグと出て来ますが基本的にはタグとタグで挟むイメージと各タグの要素を少しでも覚えておけば案外混乱無くコーディング出来るのでしょうか？一先ずは〈body〉タグの間に本文を書き込むって事を頭に入れて今後の学習を進めてみましょうか。

午後　JavaScriptの学習
letでは無くvarが出て来てそれでいて使い方は同じ？取り敢えず調べて見て分かった事は

・varは再代入、再宣言が可能な事
var a　= 1
var a　= 2
みたいな感じに使える

・letは

Moment.jsで現在日付からの年度末日を計算する

## 要件
現在日付の年度末の日付を出力したい。
例えば1月1日なら 同年の3月31日だが、4月1日以降は翌年の3月31日を出力すること。
if文を使わず、なるべくモダンなコードで実装すること。

## コード
“`javascript
nendoEnd(){
// まず現在の年度を取得する
const y = moment().subtract(3, “months”).year();
// 現在の年度の年に1を足して 3月の31日にする
// ここで注意が必要なのは、month()で設定できるデータはゼロから始まる数値だということです。
const now = moment()
.year(y + 1)
.month(2)
.endOf(‘month’);
return now.format(“YYYY-MM-DD”);
}
“`

## テスト

2022-03-31 → 2022-03-31
2022-04-01 → 2023-03-31

OK!

## 参考

現在の年度は、3ヶ月前

【JavaScript】ページ遷移せずに画面遷移する

# 1. やりたいこと
有向グラフで表される任意の状態遷移をブラウザの画面上に実現したい。
具体的には、画面上に、「現在のノード」を表示し、さらに現在のノードを始点とする全エッジを、
ボタンとして描画する。ボタンをクリックすると、そのエッジに従って次のノードへ移動する。
但しこの際の移動では、ページ遷移を行わない。あくまでも1ファイルで完結する。

# 2. 仕様
– `head`タグで画面シングルトンを定義し、`body`タグで呼び出す。
– 画面シングルトンは、DOMを用いて`document.body`を書き換える機能を持つ。
– 有向グラフは`head`タグにて書いておく。


Stripe Connectで構築したマーケットプレイスで、コンビニ決済に対応する３つの方法（デスティネーション支払い編）

Stripeを利用することで、顧客は料金の支払いをコンビニで行えます。また、Stripeユーザーは、**コンビニでの決済処理結果を、Stripe DashboardやWebhookを通して受け取る**ことができます。

コンビニ決済を有効化することで、これまでリーチすることが困難だった「**クレジットカードを持たない顧客**」にリーチすることが可能です。また、顧客も公共交通機関での移動中や、信頼性の低いネットワークを利用している状況など、**「クレジットカードを取り出して入力する」操作がやりにくい場面**でも、安心して注文ができるようになります。

# コンビニ決済は、Connectでも利用可能

この決済はConnectでプラットフォームを構築されているお客様もご利用が可能です。
C2Cのマーケットプレイスでは、クレジットカード情報の取り扱いに不安を感じる顧客も少なからず存在します。プラットフォーム・マーケットプレイスがコンビニ決済をサポートすることで、顧客はより安心して商品・サービスを注文できるようになります。

![nm7W8u4S.png](https://qiita-imag

Stripe Billingを利用して、コンビニ決済での定期購入サブスクリプションを管理する(JS・ノーコード編)

定期課金においても、クレジットカード以外の決済方法をサポートすることで、より多くの顧客にリーチできます。

コンビニ決済を有効化すると、顧客は定期的な料金の支払いをコンビニで行えます。これにより、これまでリーチすることが困難だった「**クレジットカードを持たない顧客**」にリーチすることが可能です。

また、顧客も公共交通機関での移動中や、信頼性の低いネットワークを利用している状況など、**「クレジットカードを取り出して入力する」操作がやりにくい場面**でも、安心して注文ができるようになります。さらに、Stripeでサブスクリプションを集約管理することで、契約期間中にコンビニ決済と**カードやその他の決済方法への切り替えも簡単**に可能です。

この記事では、Billingを利用している場合に、コンビニ決済を受け付けるための方法と、実運用に備えて注意しておきたいポイントの例を紹介します。

# Dashboardからの操作で、ノーコードに開始する

定期課金を最も簡単に始める方法は、Dashboardから操作することです。
実際にテスト環境でサブスクリプションを作成してみましょう。

Stripe Elements / Checkoutを利用したコンビニ決済で、Webhookを利用した在庫管理・発送業務との連携を実装する

Stripeでは、カード決済の他にコンビニ決済についても顧客に提供できます。
ただし、カード決済とは**決済のタイミングが異なる**ため、導入前にシステムの対応状況を確認する必要があります。

Dashboardで都度状況を確認することももちろん可能です。
ですが、StripeのWebhookを利用することで、**手動のオペレーションを最小化できるシステムを最小化**することができます。

また、Webhookを利用したアプリケーションを実装する以外にも、**Zapierなどのタスク自動化ツールを活用することで、ノーコードで実現**させることも可能です。

今回は、在庫管理や発送業務といった、決済が完了した後に執り行う業務への連携について、Stripe Webhookを利用する方法の例を紹介します。

なお、コンビニ決済の導入方法については、以下の記事をご覧ください。

https://qiita.com/hideokamoto/items/c59c4c4ee24b98ac997b

# コンビニ決済の導入前に確認が必要なこと

まず、確認が必要な項目をおさらいしましょう。
重要な点

Stripe Checkout / Elementsで、コンビニ決済のサポートを開始する３つの方法

Stripeを利用することで、顧客は料金の支払いをコンビニで行えます。また、Stripeユーザーは、**コンビニでの決済処理結果を、Stripe DashboardやWebhookを通して受け取る**ことができます。

コンビニ決済を有効化することで、これまでリーチすることが困難だった「**クレジットカードを持たない顧客**」にリーチすることが可能です。また、顧客も公共交通機関での移動中や、信頼性の低いネットワークを利用している状況など、**「クレジットカードを取り出して入力する」操作がやりにくい場面**でも、安心して注文ができるようになります。


この記事では、Stripeを利用した決済で、コンビニ決済をサポートする方法について、「Checkout」「PaymentElements」そして「Elements(PaymentElemen

function()関数をアロー関数に書き換えよう

# 主旨

[学習メモ](https://qiita.com/KK1989/items/1e20a934aab056a67d0e)の記事にコメントを頂き、その中で、、、
「function()使ったり、letで変数宣言してるけど、もっと簡単な書き方あるよ〜」
と教えていただき、その内容を自分なりにまとめてみたもの

## やること

１、変数定義letの省略
２、アロー関数への書き換え

今回の問題となる僕の元コードがこちら、、、
“`js:0padding.js
const twoDigital = function(num) {
let digit = String(num).padStart(2,0);
return digit;
}
“`

↑をスッキリした記述にすると↓になる。

“`js:0padding.js

const twoDigital = num => String(num).padStart(2, ‘0’);

“`

（ちなみにこれは２桁のゼロパディング関数の宣言と定義に関するコード　numを引数）

### １,letの変数宣言無くす

そ

Stripe Checkoutで「カートの中身」または「実際に注文された商品」の種類と数を取得する方法

Stripe Checkoutを利用することで、手軽に安全なオンライン注文ページを顧客に提供することができます。

また、Checkoutの設定を変更することで、「カートの中の商品の数量を変更」したり、「アップセルの提案」を行うことも可能です。

https://qiita.com/hideokamoto/items/669d8b02195ac148dd3e

https://qiita.com/hideokamoto/items/bc990f9211ede447b74e

これにより、顧客は注文の直前にカートの中身を再調整することができ、前のページに戻るなどの余計な手間を省くことができます。

# カートの中身を取得する方法

「ブラウザがエラーでダウンした・移動中で一時的にオフラインになった」などの理由で、Checkoutのセッションが一時的に途切れるケースが存在します。

この場合、顧客はCheckoutページで変更した後の数量で、注文を再開したいと考えます。

その場合、システム側では、Stripe APIを利用し、カートの中身を取得する必要があります。

“`js
cons