JavaScript関連のことを調べてみた

[日本語訳] GitHub Codespacesを使ってブラウザでStripeサンプルをテストする

:::note
この記事は、[dev.to](https://dev.to/stripe)に公開されている英語記事の日本語訳です。

元記事: [Testing Stripe samples in your browser with GitHub Codespaces](https://dev.to/stripe/testing-stripe-samples-in-your-browser-with-github-codespaces-1bh8)
:::

現代では、ブラウザー上でアプリケーションを開発し、テストすることができるようになりました。クラウドベースの開発環境を瞬時に立ち上げて、ローカル環境の設定なしにブラウザで動作させることが可能です。動作が開始されれば、数回のクリックで他の人とアプリケーションを共有することもできます。コンテナ技術を利用することで、アプリケーションのセットアップが迅速かつ容易になります。つまり、開発環境のセットアップを行う必要がなく、URLを共有するだけで簡単にアプリケーションを他人と共有できるということです。

コミュニティの熱心な努力のおかげで、St

カードを自然な感じで重ねる判定条件を考える

# 背景
HTML5のCanvasとJavascriptを使って、スパイダーソリティア（ゲーム）を開発をしています。

# 問題点
掴んだカードを他のカードの上に移動させる場合、移動先のカードを判定する必要があります。

マウスポインタの座標を基準に判定すると、マウスポインタが移動先のカードの上にのっている必要がある為、カードの画像は重なっていても、移動先として判定されないケースがあります。

# 解決策
カードを掴んでいる状態では、ユーザーはマウスポインタではなく、表示されているカードの位置を基準にしていると考えられます。

そこで、判定基準をマウスポインタ座標からカードの重心（中心）に変更することで、ユーザーの認知に近い自然な判定条件を目指します。

# カードの重心を計算する
カードの重心を計算する実装はシンプルです。

マウスポインタ座標(x, y)からカードを掴んだときの左上からのズレ量(offset_x, offset_y)を引くことで、今表示しているカードの左上座標が求まります。

この左上座標にカード幅の半分、カード高さの半分を足すと、カードの重心になります。

“`

JavaScriptのJSONでDateを扱う

# 困ったこと
さて、困りました。
`JavaScript`でデータを保存しようとしたらDate型がデータに入っていると
そのままパースできませんでした。
つまり、
“`javascript
let saveData = {
loginDate: new Date(),
name: “taro”,
};

let json = JSON.stringify(saveData);

// データを取り出したい
let parsedData = JSON.parse(json);
// loginDateが何日か知りたい
console.log(parsedData.loginDate.getDate());
“`
これで最後のconsole.logでloginDateが何日かを知ることができる！と思ったら実際には
“`shell
Error: parsedData.loginDate.getDate is not a function
“`
というエラーが…
今回はこれを解決したいです。

# 解決方法
JSON.parseの第2引数(reviver)を利用してパース

続・麻雀大会の点数管理とマッチングを自動化するDiscordBotを作成した

こんにちは。
以前、身内向けに麻雀大会支援ツールとしてDiscordBotを作成したのですが、新たにいくつか試したいアイデアが生まれたので改修をしてみました。

↓以前の記事↓

https://qiita.com/rm1124/items/b06743dede316cafcf28

※本記事にコードの大部分は記載しております。経緯等が気になる方は以前の記事をご覧ください。

## 環境
* Discord.js v13.17.1
* GoogleAppsScript

## 改修内容
今回は新たな機能として、**集計の自動化** を行いたいと考えました。
前回は実装のイメージが付かなかったため実現しませんでしたが、今回イメージ感が掴めたことにより実装に至りました。

前提として参加者自身に点数入力をしてもらう方法を取るため、「わかりやすさ」を重視する必要がありました。具体的な方法は以下になります。

:::note
1. botからのメッセージに結果報告用のボタンを追加
2. ボタンが押下されたらウィンドウを生成し、フォームに入力してもらう
3. 送信ボタンで送信
:::

テキス

JavaScriptの理解を深める

# JavaScriptとは

* クロスプラットフォームで動作するオブジェクト指向のスクリプト言語
* プロトタイプベースのオブジェクトモデル
* インタープリター型、あるいは実行時コンパイルされる、第一級関数のプログラミング

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Introduction

## クロスプラットフォームで動作するオブジェクト指向のスクリプト言語

### クロスプラットフォーム
iOS,Andriod,Windows,macOSなど異なるプラットフォーム上で同じ仕様のアプリケーションを動かせるプログラムのこと

### オブジェクト指向
処理を部品化して、部品を組み合わせることで１つのプログラムを作る考え方

https://unison-career.com/engineer-media/6250/

### スクリプト言語
プログラミング言語のうち、比較的容易に記述や実行ができるもの（厳密な定義は存在しない）

https://www.akkodis.co.jp/candid

toLocaleString()の罠

> javascript 数値 カンマ区切り

上記でGoogle検索すると、一番上にヒットするのが以下のサイト。

[JavaScript で数値を3桁のカンマ区切りにする簡単な方法](https://gizanbeak.com/post/js-tolocalestring)

“`js
var num = 10000;
num.toLocaleString();
// “10,000”
“`

とても簡単にできた。
ただ、注意しなければいけない点があって、
引用元のページにも記載がある通り、
小数点や桁区切りに使用される記号がlocaleによって異なること。

ブラウザの言語設定がドイツ語のユーザーの環境では、以下のようになる。

“`js
var num = 10000;
num.toLocaleString();
// “10.000”
“`

そのままデータベースに登録したら、本来Ten thousandだったはずのデータがTenになってしまい、千分の一になってしまう……

ユーザーの環境によってTen thousandだったりTenになってしまうのは不具合なので、も

【jQuery】jQuery4.0.0の変更点紹介

いまさらjQuery？

ここの人たちは見たくもない現実かもしれませんが、[世界の9割はjQueryでできていいます](https://qiita.com/rana_kualu/items/e23d728bb9b934069d8c)。

ということで世界70億人が待望していた[jQyery4のベータバージョンが2024/02/06に公開された](https://blog.jquery.com/2024/02/06/jquery-4-0-0-beta/)ので以下で紹介します。

ちなみにjQuery1が[2006/08/26](https://blog.jquery.com/2006/08/26/jquery-10/)、2が[2013/04/18](https://blog.jquery.com/2013/04/18/jquery-2-0-released/)、3が[2016/06/09](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/)のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。
し

JavaScript(TypeScript)のconsoleについておさらい【前編】

コードを組む時にlog()やdebug()をよく使うのですが、他のconsoleの仕様をあまり知らないな…と思ったのでざっくりまとめてみました。

:::note warn
筆者の確認環境は vue3系(TypeScript) × chrome です。
純粋なJS環境ではないのでどこかしら挙動が異なるかもしれません。
予めご了承下さい。
:::

# console.log()
>　一般タイプのログ情報を出力します。このメソッドでは、文字列置換および追加の引数を使用することができます。

“`ruby
console.log(出力したいオブジェクト・文字列など任意の値);
“`

個人的に一番よく使ってます。
ソース内で取得値確認のため仕込む事が多いです。

# console.debug()
>　ログレベルが debug のコンソールへメッセージを出力します。

“`ruby
console.debug(出力したいオブジェクト・文字列など任意の値);
“`

logと出し分けしたい時にこれも割とよく使います。
逆に言うとこれ以降の物に関しては実業務でほぼ使った記憶がありませ

jq 1.7の新機能ー数値精度

[JSON](https://datatracker.ietf.org/doc/html/rfc8259)処理のコマンドラインツールである[`jq`](https://stedolan.github.io/jq/)が、5年ぶりにアップデートしました。現在の最新は1.7.1（2023年12月リリース）です。1.6からいろいろと改定や新機能の追加があって、ますます楽しくなっています。

全容は[Github上のリリースノート](https://github.com/jqlang/jq/releases)を見ていただくとして、今日は改良された数値精度を試してみます。

### これまでは

`jq`は、[IEEE 754](https://ja.wikipedia.org/wiki/IEEE_754)の倍精度形式（binary64）で数値を表現します。この仕様では、仮数部（A × 10^BのAの部分）は10進数でだいたい16桁くらいまで、指数部（Bの部分）は308くらいまで正確に表現できます。それ以上では、丸め誤差が発生します。

たとえば、次で用いている円周率のπは小

同期・非同期処理の実行順序を見てみよう！

# はじめに

「ITインフラの仕組み」を読んでいく中で、同期・非同期についてのテーマがあり、改めて非同期処理について調べていたところ、色々な気づきがあったので今回記事にまとめてみました！

非同期処理とは？から、実行される際のキューとタスクの関係についても動画でまとめているので、よかったらみてください！

# 非同期処理とは

ある処理が終了するのを待たずに、別の処理を実行することを非同期処理といいます。非同期処理を日常生活でのやり取りに置き換えるとこんな感じです。

家族の例

– お母さん→息子に対して、「洗濯物干しといて」と指示
– 指示してる間に、お母さんは洗い物をやってしまう
– 洗い物が終わったタイミングで、息子の作業が終了。「洗濯物干し終わったよ〜」と言われる

もし、これを同期処理に置き換えると…

– お母さん→息子に対して、「洗濯物干しといて」と指示
– 指示してる間、お母さん待機
– 息子の作業が終了。「洗濯物干し終わったよ〜」と言われる

同期処理だと、待機時間が発生するわけです。
とても非効率ですね。

これと同じような事がWeb上で起きた場合、一度リクエス

【JavaScript】分割代入

O’reillyのJavaScript 第7版を読んで、
今まであまり使用していない技術がいろいろ載っていました。

今回はその中の**分割代入**についてまとめてみました。

# 分割代入とは
そもそも分割代入とは何でしょうか。

MDN web docsには次のように記載されています。
> 分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
>
> — [分割代入 – JavaScript – MDN Web Docs – Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

# 使い方
説明文だけでは分かりづらいので、使い方の例を見てみましょう。

## 配列の代入
“`js
let [x, y] = [1, 2];

console.log(x);

【React】exportとexport defaultの違い

# exportとexport defaultの違い
Reactコンポーネントをエクスポートする際に、`export`と`export default`の違いがあります。

1\. **export** : このキーワードを使用して、モジュール内の関数、クラス、変数などを名前付きでエクスポートします。名前付きエクスポートでは、エクスポートされたコンポーネントをインポートする際に、エクスポートされた名前を使用してアクセスします。例えば、次のように使用します。
“`js
// MyComponent.js
export class MyComponent extends React.Component {
// コンポーネントの定義
}
“`
“`js
// 別のファイルでインポートする
import { MyComponent } from ‘./MyComponent’;
“`
2\. **export default** : このキーワードを使用して、モジュールのデフォルトエクスポートを定義します。デフォルトエクスポートでは、モジュール内で一つだけのエクスポートを行うこと

【React】コンバータとは

# コンバータとは
JavaScriptにおける「コンバータ」という用語は、広範囲にわたる機能やデータ形式の変換ツールや処理方法を指す場合があります。具体的には以下のようなものがあります。

1\. **データ型変換器** : JavaScriptではさまざまなデータ型がありますが、これらを相互に変換する機能を提供するものです。例えば、文字列から数値への変換や、数値から文字列への変換、配列からオブジェクトへの変換などが含まれます。

2\. **単位変換器** : 数値を異なる単位に変換する機能を提供するものです。例えば、長さの単位をメートルからフィートに変換する、重さの単位をキログラムからポンドに変換するなどの機能が含まれます。

3\. **フォーマット変換器** : データのフォーマットを変換する機能を提供するものです。例えば、日付や時刻のフォーマットを変更する、JSON形式からXML形式に変換するなどの機能が含まれます。

4\. **画像/動画コンバータ** : 画像や動画の形式を変換する機能を提供するものです。例えば、画像のサイズを変更する、JPEG形式からPNG形式に変換

【JavaScript】pure functionとは

# pure functionとは
JavaScriptにおける「pure function（純粋関数）」とは、次の2つの特性を持つ関数のことを指します。

1\. **副作用のない** : 純粋関数は、外部の状態を変更せず、引数の値だけに依存して結果を返します。つまり、関数内でグローバル変数の変更や、引数以外の外部のデータへのアクセス、ファイルの読み書き、ネットワークリクエストの送信などの副作用がないことが求められます。

2\. **同じ入力に対して常に同じ結果を返す** : 同じ引数が与えられた場合、純粋関数は常に同じ結果を返します。関数が外部の状態に依存しないため、同じ入力が与えられれば常に同じ結果が得られることが保証されます。この特性は、関数の予測可能性を高めます。

# 使用方法
純粋関数は、プログラムの理解やテスト、デバッグを容易にし、並行処理や再利用性の向上にも役立ちます。また、関数型プログラミングの中心的な概念であり、関数型プログラミングの原則に従うことで、より堅牢で保守しやすいコードを書くことができます。

例えば、以下は純粋関数の例です。
“`js
functi

【JavaScript】論理AND演算子とは

# 論理AND演算子とは
JavaScriptの論理AND演算子は、二項演算子であり、`&&`という記号で表されます。この演算子は、二つのオペランド（条件）を取り、両方の条件が真である場合に真を返し、そうでない場合は偽を返します。

# 使用方法
具体的には、次のような形式を取ります：
“`
条件1 && 条件2
“`
`条件1`と`条件2`がどちらも真であれば、結果は真（true）となります。そうでない場合、つまりどちらか一方または両方が偽であれば、結果は偽（false）となります。

例えば：
“`js
var x = 10;
var y = 5;

if (x > 0 && y > 0) {
console.log(“両方の条件が真です”);
} else {
console.log(“少なくとも一つの条件が偽です”);
}
“`
この場合、`x`と`y`がどちらも0より大きいので、両方の条件が真となり、”両方の条件が真です”というメッセージがコンソールに表示されます。

# まとめ
論理AND演算子は、条件文や制御フローにおいて特定の条件が複数必要な場合

【JavaScript】三項演算子とは

# 三項演算子とは
JavaScriptの三項演算子は、条件演算子とも呼ばれ、条件式を評価してその結果に応じて値を返す演算子です。一般的な形式は以下の通りです：
“`
条件式 ? 式1 : 式2
“`
条件式が真であれば、式1が評価されます。条件式が偽であれば、式2が評価されます。その結果、三項演算子は式1または式2のどちらか一方を返します。

# 使用方法
例えば、以下のようなコードがあります：
“`js
var age = 20;
var message = (age >= 18) ? “成人です” : “未成年です”;
console.log(message);
“`
この場合、`age`が18以上であれば`message`には”成人です”が代入され、それ以外の場合は”未成年です”が代入されます。

# まとめ
三項演算子は、単純な条件分岐を短く書くのに便利であり、コードの可読性を向上させることができます。しかし、複雑な条件分岐や複数の式を含む場合は、他の方法（例えばif文やswitch文）を使用した方が理解しやすい場合があります。

【小ネタ】p5.js（バージョン 1.9.1）で createCapture() を使う際に左右反転を簡単に適用する方法： { flipped:true }

p5.js公式の以下のページを見ていたときに、ふと見かけてきになった内容を記事にしてみました。

●reference | createCapture()
　https://p5js.org/reference/#/p5/createCapture

具体的には、以下の `createCapture(VIDEO, { flipped: true })` という部分です。


上記の公式サンプルのページだけでなく、p5.js Web Editor でも以下の内容で試してみたら、動作確認ができました。
※ 記事執筆時点で、p5.js Web Editor でのスケッチの新規作成を行うと、最新版の 1.9.1 が使われます

“`javascript
let capture;

function setup() {
createCanvas(640

多分これを見るのが一番早い React Native Expo 環境構築 for Windows 【JavaScript】

“`
最終更新日: 20240303
“`
本題だけ見たい人はこちらに飛んでね！
[環境構築スタート](#環境構築)

#

# 記事の目的
この記事を見るだけでー
ReactNativeExpoの環境構築ができることを目的にしています！
質問事項があれば記事へのコメントもしくは[@rioLi0N](https://twitter.com/rioLi0N)にDMなど気軽にどうぞ！

# ターゲット層

1. Windowsで開発している（MAC高いから持ってない苦学生です:sob:）
2. TypeScriptじゃなくてJavaScriptを開発したい
3. ReactNative「Expo」で開発する

# バックボーン！！！
CEO「Android向けアプリ完成したね！」
僕「はい！」
CEO「ところで、iOS対応もしたいんだけど相談できる？」
僕「なるほど！いけます！」

それから色々あり調査などをした上で
下記の要件を満たすReactNativeExpoを採用することにしました！
“`
1. クロスプラットフォーム言語なので保守作業が楽になる
2. 企業の技術ス

オブジェクト URL を File または Blob オブジェクトに変換する方法

JavaScriptのオブジェクトURLをFileオブジェクトまたはBlobオブジェクトに戻す(変換する)方法を紹介します。 `URL.createObjectURL()` の逆を行います。

※ これは2020-02-04に個人ブログで公開した記事を移植したものです。

## オブジェクト URL とは

オブジェクトURLは、JavaScriptで次のようにメゾットを呼び出すことで生成されます。

“`js
URL.createObjectURL(object);
“`

https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL

ファイルを処理したり、ユーザーからファイルを受け取るライブラリなどで、オブジェクトURLで返ってきますが、データを処理したいのでFileオブジェクトやBlobオブジェクトに戻したいケースがあります。

しかし、File APIには `URL.createObjectURL(object);` の逆が用意されていません。

例えば、 [`react-dropzone`](htt

JavaScript: base64 decode最適化もどき

色々な実装でbase64文字列の復号速度を検証していきます。特に難しい事はせず、どの組み込み関数やObjectを利用するかの違いが焦点となります。返り値はUint8Arrayとします。
“`js
//復号関数群
let u8map=s=>{s=s.replace(/[^A-Za-z\d+/]/g,””);
for(var a=64,b=”ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/”,c,d=s.length,A=new Uint8Array(123),B=new Uint8Array((d+2>>>2)*3-[0,0,2,1][d&3]);A[b.charCodeAt(–a)]=a;);
for(b=0;a>16,B[b++]=c>>8&255;
re