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

【海外イベント紹介】 The COVID Tracking Project: 0 to 2M API Requests in 3 Months

今回は、「Jamstackカンファレンス Virtual May　2020」で行われたプレゼンテーションから、「The COVID Tracking Project: 0 to 2M　API Requests in 3 Months」の内容をご紹介します:loudspeaker:

>目次
>― プロジェクト結成の経緯 ―
>1. 母数（検査数）の欠如
>2. 感染状況追跡プロジェクト
>3. 社会のニーズに応える
>― プロジェクトのサイトをJamstackで構築した理由 ―
>4. サイトのリニューアル
>5. サイトの堅牢性
>6. まとめ

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

日本ではまだまだ知名度が低いJamstack。日本の皆さんに、Jamstackをより身近に感じてもら

暇つぶしを提案してくれるAPIからタイピングゲームを作って暇つぶしをする

# タイピングゲーム


https://motokikando.github.io/js-typing-game/

# 使用API

退屈を紛らわす手段を提供してくれる The Bored API

https://www.boredapi.com/(https://www.boredapi.com/)

JSON形式で下記のように返してくれる。activityが具体的な提案を表示してくれる。

“`json
{
“activity”: “Play a video game”,
“type”: “recreational”,
“participants”: 1,
“price”: 0,
“link”: “”,
“key”: “5534113”,
“accessibility”: 0
}
`

【React】useNavigateをモック化してリンク遷移のユニットテストを書く

# 概要
useNavigateを使ってリンク遷移を行うReactアプリにて、useNavigateをモック化してリンク遷移テストを行います。
先月からReactとTypeScriptを使い始めたばかりなのため、指摘等ありましたらよろしくお願いします。

## 環境
– @types/react: 18.0.9
– @types/react-router-dom: 5.3.3
– @types/jest: 27.5.1
– react: 18.1.0
– react-router-dom: 6.3.0
– typescript: 4.6.4

# やり方
まずは実装コードの紹介。
“`useRedirectSignUp.ts
import { useCallback } from ‘react’;
import { useNavigate } from ‘react-router-dom’;

export type ReturnType = {
onClickSignUp: () => void;
};

// SigunUp画面への遷移
export const useRed

【Angularアプリケーション開発 #4】ルーティング設定

今回はルーティングの設定、一覧ページから詳細ページに遷移できるように実装していきます。
また、[http://localhost:4200/](http://localhost:4200/)がリクエストされた場合は、リダイレクトを行って、別ページに遷移するようにしてみます。
– ひとまず、ルーティングに使用するコンポーネントを新規作成しましょう。
MembersComponentを作成します。
tsファイルとhtmlファイルの内容です。↓
“`typescript:members.component.ts
import { Component, OnInit } from ‘@angular/core’;

@Component({
selector: ‘app-members’,
templateUrl: ‘./members.component.html’,
styleUrls: [‘./members.component.css’]
})
export class MembersComponent implements OnInit {

members = [

React大好き侍が、「もうSolidJSでいいじゃん…//」ってなったワケ。

# Reactが好きです。
Reactが好きです。コンポーネントを関数として扱うのが好きです。
[SolidJS](https://github.com/solidjs/solid)はReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。

## コードの比較
### React
“`jsx
const Counter = () => {
const [count, setCount] = useState(0)

useEffect(() => {
console.log(`Count: ${count}`)
}, [count])

return (

{count}

setCount(prev => prev + 1)}>Add

)
}
“`
### SolidJS
“`jsx
const Counter = () => {
const [count

【BigQuery】URLをデコードする関数をJavaScriptで作る –

## 背景
データベースにエンコードされたURLが入っていた場合、そのURLをデコードしなければいけませんよね。
既存の関数で一発！というわけにはいかないURLのデコードの関数をUDF(User-Defined Function)として作ってみました。

## URLエンコード、デコードとは
まず初めに、URLのエンコードとデコードとはなんぞやということを書いておきます。
URLのエンコードとは、**本来URLの中で使えない文字を、使用できる文字の特殊な組み合わせによって置き換えること**です。日本語の入っているURLなどもエンコードすることで機能します。

具体的には、 %の後に 0~9,A~Fの16進数2桁で1Biteの文字を表します。日本語などの1Biteで表しきれないものは、その組み合わせで表します。(例：%41がA、%23が#、%E3%81%82 が あ など)

デコードとは、エンコードされたURLを元の状態に戻すことです。

では、本題に入ります。

## BigQueryではJavaScriptが使える
BigQueryのUDFは、実はJavaScriptで書くことがで

JavaScriptの上限・限界値

JavaScriptの文字列や配列は最長でどこまで格納できるか、気にしたことはありますか？関数は何個まで引数を取れるのでしょうか？ブロックのネストは何段まで？

この記事では、そんな素朴な疑問に答えてみます。

テストに使った環境は、

* macOS 12.3.1 (Arm64)
* Node.js v17.7.2
* Firefox Nightly 102.0a1 (2022-05-29)

です。当たり前ですが、この記事に載せる数値は環境によって変わる可能性があります。

テストに使ったスクリプト類は

* https://github.com/minoki/javascript-limits

に置いてあります。

# 文字列の長さ

まずは文字列の長さです。

規格には

> The String type is the set of all ordered sequences of zero or more 16-bit unsigned integer values (“elements”) up to a maximum length of 2^53 – 1 eleme

【JavaScript】非同期処理とは　

## 目的

いつまで経っても非同期処理がよくわからなかったので一念発起して学び直し。
まだまだ理解不足なので間違いあればご教示お願いします。

## 結論

非同期処理とは、コールスタックが空になってから実行される処理のこと。
どういうことか順を追って記載していく。

## 同期処理との違い

メインスレッド（JavaScriptが実行される場所）でコードが上から順番に実行されることを同期処理と呼ぶ。
上から順番に実行されるので、長い処理があってもそれが完了してからでないとその次の処理には進まない。

対して非同期処理は、
処理の完了を待たずして次の処理を実行を移させる処理のことを指す。

## 非同期処理の仕組み

非同期処理は、その処理の完了を待たずして次の処理へ実行を移すため、
並列で処理が複数進行できるようにしたもの、と思われがちだが、（私もそうだった）
そうではない。

JavaScriptは基本的にメインスレッドのみで実行されるからである。(=シングルスレッドで動いている)
（厳密に言うと並列で処理できる方法もある、気になる方はService Workerで検索）

sort() に渡す比較関数の書き方

をいつも忘れるのでメモ。

数値の場合
“`js
(a, b)=> a – b
“`

文字列の場合
“`js
(a, b)=> a < b ? -1 : 1 ``` 逆順にしたい場合は、a と b をひっくり返す。 同点の場合に次の比較方法がある場合は ```||``` でつなぐ。まず数値で比較し、同点なら文字として比較するなら ```js (a, b)=> a – b || (a < b ? -1 : 1) ``` ただしこの場合、先の比較関数は同点の場合に必ず 0 を返すこと。

HTMLとJavascriptファイルのみのデプロイ

# はじめに
自主学習として、Webサイトを作成しております。
しかし、HTML JSファイルのみでデプロイをしようと試みましたがうまくできないためご教示いただけますと幸いです。

# 試したこと
AWSにてバケットを作成、S3保存をしてherokuデプロイ等の手順を実施しました。
jsonファイル、phpファイルを作成するとデプロイが可能と下記サイトで情報を得たため実施
https://qiita.com/bitcoinjpnnet/items/ee5b4064279996c4d5ad

# 作成データのファイル
ファイルが現在下記のURLとなっております。
https://gyazo.com/7ce45e97e4f6b964124b5c5123c9d7b2

ASP.NET Coreを使ったToDoアプリの作成(後半)

# はじめに
本記事では実際に手を動かしながらアプリを作成する過程を書いていきたいと思います。
助言、アドバイス、間違い等ございましたら、ご指摘いただけると幸いです。

# 後半概要
– 前半で調べた知識をもとにToDoアプリを作成していく

# 環境
– OS : Windows10
– DB : Postgres14.1
– IDE : Visual Studio 2019
– 使用言語 : C#, Javascript
– フレームワーク : ASP.net Core 5.1, .Net 5.0
– ライブラリ : jquery, bootstrap5, lodash
– その他 : pgAdmin 4

# 設計
## 画面設計
まずは深く考えずに最低限の機能だけ持たせます。
ヘッダーフッターは正直いらないですが、せっかく用意して

今週の学び　第7回

# 今週の学び

jQueryなど

– null
– データ型の1種で自身の「null」という値のみを持つ
nullは識別できないことを表し、変数がオブジェクトを指していないことを示す

– clearInterval()
– 以前に setInterval() の呼び出しによって確立されたタイマーを利用した繰り返し動作を取り消す
–
– setInterval()
– setInterval(‘関数名’ , ‘ミリ秒’);
Window および Worker メソッドで提供され、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出す

– prop()
– 主にチェックボックスやラジオボタンの選択値を取得するために使う
–
– clearInterval()
– 以前に setInterval() の呼び出しによって確立されたタイマーを利用した繰り返し動作を取り消す

– ==と===の違い
– ==は、文字列と数値の比較の場合、文字列を数値に変換してくれる
===の場合、文

マウントを取ってくる人への耐性をつけるWebアプリ

## マウントとってくる人ってどこにでもいますよね
あなたの周りには、一見それっぽいけど中身があまりない話でマウントをとってくる人はいないでしょうか？
そういう人の相手は苦労しますよね。邪見にすると人間関係が悪くなりますし、かと言ってまともに取り合っているとストレスが溜まってしまいます。

そこで、そういった人たちへの耐性を身に付け、笑顔でやり過ごすことができるようになるためのWebアプリを作ってみました！

## 「ドヤ顔バズワードくん」
作成したWebアプリは以下に公開していますので、まずは是非触ってみてください！

https://nimble-shortbread-3ebc8c.netlify.app/

非常にシンプルなアプリなので解説は必要ないとは思いますが、~~ちょっとイラっとする顔の~~アバターがひたすらよく分からないバズワード

React + Typescript の現場で初心者からよくあった質問とか小技的なのを書いてく

## 定数の Key のタプル型を作る

“`tsx
const NAME: {
HOGE: “hoge”,
FUGA: “fuga”
}
keyof typeof NAME
// => “HOGE” | “FUGA”
“`

## 定数の値のタプル型を作る

“`tsx
keyof typeof NAME[keyof typeof NAME]
// => “hoge” | “fuga”
“`

## ダウンキャストする
“`tsx
const { hoge, piyo } = router.query as {
hoge: string;
piyo: string;
};
“`

## 強制ダウンキャストする

危険性ははらみますが・・・

“`tsx
const { hoge, piyo } = router.query as unknown as {
hoge: number;
piyo: number;
};
“`

## Material-UI の型を拡張する

基本的に 「コンポーネント名＋ Props」という命名規則で提供されている

【Angularアプリケーション開発 #3】新規コンポーネントを作成しよう

今回は新規コンポーネントを作成し、AppComponentに組み込んでみましょう。
フッターコンポーネントを作成してみます。
– FooterComponentを作成します。
ターミナルで`ng g component footer` と入力して実行します。
すると↓エクスプローラーにfooterのディレクトリ（中身はcss、html、tsファイル等）が作成されているでしょう。
– こちらをAppComponentに組み込みます。
app.component.htmlに“`“`のタグを書きます。
![スクリーンショット 2022-05-30 0.09.40.png](https://qiita-image-store.s3.ap-northeas

CodePenで簡単にバッティングスコア管理アプリを作成⚾

## バッティングスコアをかっちょよく記録する
毎週草野球にいそしんでいる私だが、バッティングスコアとかをさくっと管理してみたかったりする。
まぁそういうアプリは当然あるわけで、その辺のアプリでもいいし、正直エクセルでも事は済むのだが、”オリジナル”のかっこいい感じのアプリとかにそそられることはないだろうか。
実は、CodePenなるものでさくっと1人でアプリが作れるらしい。
ちょうどアプリを作るタイミングが草野球をした日だったので、今日の打撃成績管理出来るといいんじゃないか？ということで、やってみることにした。
（その日は4打数2安打1盗塁。気分ウキウキで帰ってきた。）

## CodePenが便利だという前置き
CodePenはこちら。

https://codepen.io/

そして、ものの数時間で出来たプロフィールページ。おしゃれ。
サンプルとなるものがあれば、そこから派生して作れる。

https://eclectic-medovik-72ae3b.netlify.app/

## 仮完成作品
作ってみたのはこんな感じ。
もっとおしゃれにしたいし、項目も充実させたい。

JavaScriptで作る変則リバーシ④

# はじめに
以前ご紹介させていただいた、下記記事からの続編(第④弾)になります。

https://qiita.com/y-tetsu/items/ab8d92969c3c1b20fc9c

プログラムの土台部分については、下記の記事で紹介しています。

https://qiita.com/y-tetsu/items/59237213d544f14bbc9c

今回は前回作ったものをベースに、新たに**シアン色の石**と**山吹色の石**を追加した、計**6色の石を使った、3(+2)人対戦で遊べる変則リバーシ**を作りましたので、ご紹介したいと思います。

# できたもの
以下のような、ブラウザで遊べるものを作りました。
自身が先手(黒)で、相手(白と灰、シアン、山吹)はコンピュータ、としています。
「あの言語のあれ」まとめ

# 「あの言語のあれ」まとめ

## なにこれ

最近あっちこっちの言語を行き来しているので、
「あの言語のあれ、この言語でどう書くんだ？」
をまとめたものが欲しくなったので備忘録的にまとめていきたいと思います。
徐々に追記していく感じで書いていきます。
分類は特に深く考えてつくってないです。
載せてほしいものがあればコメントまたは
編集リクエストいただければ気づいたときに対応します。

## コレクション操作系

### map

コレクションの要素に対して関数を適用した新しいコレクションを返す。

Common Lisp

“`common-lisp
(defvar xs (list 1 2 3))
(mapcar (lambda (x) (* x 2)) xs) ; (2 4 6)
“`

JavaScript

“`js
let xs = [1,2,3];
xs.map(x => x*2); // [2, 4, 6]
“`

React好きの少年「あそこを見て！デフォルトインポートと名前付きインポートが混在しているよ！」

### ある日
React好きの少年「磯野！Reactしようぜ！」
ワイ「ええで、とりあえずコンポーネントをexport/importしてと。」

“`
Warning: React.jsx: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
“`

Reactのプロジェクトを始めようとしてexport / importでつまづいたところを書いてみます。
しょうもないミスだけど初心者の人は気づきにくいところかも。

前提：実行環境はCodesandboxです。

これでexportして
“`
export const Ap

BigQueryのユーザー定義関数（UDF）をJavaScriptで定義

# はじめに
BigQueryでのユーザー定義関数の書き方と、利用場面を整理します。特にJavaScriptでできることについて。

Googleの[こちらの記事](https://cloud.google.com/bigquery/docs/reference/standard-sql/user-defined-functions?hl=ja)からの抜粋と説明です。

# 1.基本

“`sql:ちょっとした処理
CREATE TEMP FUNCTION AddFourAndDivide(x INT64, y INT64)
RETURNS FLOAT64
AS ((x + 4) / y);

SELECT val, AddFourAndDivide(val, 2)
FROM UNNEST([2,3,5,8]) AS val;
“`
結果

| val | f0_ |
| — | — |
| 2 | 3.0 |
| 3 | 3.5 |
| 5 | 4.5 |
| 8 | 6.0 |

valの値に4を足して2で割った値が返ってきます。どういう要件なのかわかりま