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

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で割った値が返ってきます。どういう要件なのかわかりま

JavaScriptのSingleton パターン

Classバージョン
“`typescript
export class Singleton {
private static instance: Singleton | null

public static getInstance(): Singleton {
if (Singleton.instance)
return Singleton.instance
Singleton.instance = new Singleton()
return Singleton.instance
}

private constructor() {
}
}
“`
Functionバージョン
“`javascript
function genGetInstanceMethod() {
let instance;

class Singleton {

}

// getInstanceをmethodとして返す
return () => {
// Closureを利用する
if (instance

Railsにjavascriptを導入する

### javascriptを導入
RailsではWebアプリケーション開発が可能です。私も自身でポートフォリオを作りましたが、どうにも寂しい印象がぬぐえませんでした。というのも普段利用しているサービスを見ると、要素に動き、つまりアニメーションがあるものが多いです。マウスを合わせることでイラストが動いたり、文字が下から上からスライドして現れたりといったような感じです。
今のポートフォリオはページをリンクでただつなげたようなものなので、改善したい。
そこで扱うのがjavascriptです。これをRailsに導入します。
まずは、ファイルの作成。importでよびだすためです。
`script.js`ファイルを作成します。それをapp/javascript/packs/application.jsに記述しましょう。
“`
import Rails from “@rails/ujs”
import Turbolinks from “turbolinks”
import * as ActiveStorage from “@rails/activestorage”
import “channe

PDFを閲覧＋αするクロム拡張の楽な作り方③

# 連載一覧
– **[PDFを閲覧＋αするクロム拡張の楽な作り方](https://qiita.com/largetownsky/items/1cb016598824b7ea1b1e)**
– クロム拡張でWeb上のPDFファイルを閲覧できる様になる
– ただし、URLは謎形式で手入力する必要あり
– **[PDFを閲覧＋αするクロム拡張の楽な作り方②](https://qiita.com/largetownsky/items/fe854ea78960816538e5)**
– 普通のURL入力やリンククリックのPDF閲覧に対応
– 普通にPDFビューアとして使える様になる
– **[PDFを閲覧＋αするクロム拡張の楽な作り方③](https://qiita.com/largetownsky/items/e61624ba8be7e1d50fed)**
– PDF閲覧に独自処理を追加

拙作のWebにリンク＆ノートを追加できるクロム拡張も、PDF対応する予定ですので、よろしくお願いします。

https://qiita.com/largetownsky/items/

JSでErrorを継承して作った独自エラークラスを判定する方法

Errorを継承して独自のエラークラスを作る方法は以下の感じです。

“`js
class MyError extends Error {
constructor (msg) {
super(msg)
}
}

try {
// …
// ここでエラーがあったとき
throw new MyError(‘エラー’)
// …
} catch (err) {
// instanceof でエラーの型を判定
if (err instanceof MyError) {
console.log(‘MyError’)
} else if (err instanceof Error) {
console.log(‘その他のエラー’)
}
}
“`

複数の場合も同じ感じです。

“`js
class MyError extends Error {
constructor (msg) {
super(msg)
}
}

class MyErrorEx extends MyError {
construct

import * as 構文とパフォーマンス最適化

JavaScriptには、`import * as` という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。

“`js
import * as mod from “./some-module”;

console.log(mod.foo, mod.bar);
“`

たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事では`import * as`構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。

## webpackで検証してみよう

Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を切って出力ファイルを見やすくしつつ、import/export周りの最適化だけは有効にするという設定です。なお、この記事では執筆時点での最新バージョンであ

kuromojiを使ったJavaScriptだけの形態素解析

# はじめに
形態素解析というと、Pythonを使って[mecab](http://taku910.github.io/mecab/)というのが鉄板でしょうかね。辞書は[neologd](https://github.com/neologd/mecab-ipadic-neologd)で。
でもほかの環境でも形態素解析したい場面があり、今回はJavaScriptでやってみるお話です。使うライブラリはkuromojiのJavaScript版。

https://github.com/takuyaa/kuromoji.js

ちなみに、mecabもneologdもkuromojiも、更新が止まっています。mecabは、2013/02/18 MeCab 0.996 が最新、neologdは2020/08/20 v0.0.7が最新、kuromojiは2018/11/24が最終更新日です。（2022/5/28時点）
最新の単語に対応していない等の問題が出る可能性がありますので、ご使用の際にはちょっとご注意ください。

## 作ったもの
動くものを置いておきます。公式のデモとほぼ同じですが、自分で文

An account already exists with the same email address but different sign-in credentials.

# 背景
Google firebaseのSNS認証で、同じemailアドレスを登録しているプロバイダで認証したところ
(例えば、FacebookアカウントとGoogleアカウントのメールアドレスが同じ場合など)

An account already exists with the same email address but different sign-in credentials…
のエラーメッセージと共にログインできなくなってしまいました…?

# 改善策

Google Firebase様の公式ドキュメントの通りにjavascriptを書けばよさそうです!!

https://firebase.google.com/docs/auth/web/account-linking

1 : データベースなしでブラウザチャット作ったけど質問ある?

### 2: >>1 なんでデータベースなしでやったの?
#### 金かかるからw
#### 有料系のやつじゃないとクッソ重いしだるいからやて

### 俺、佐藤裕也（｀ェ´）ﾋﾟｬｰ
#### お金がないので今日も、無料のブラウザサーバーを謳歌する
#### というわけでw replitっていうブラウザエディタ使ってんだけど、無料でサーバー使えるんだよねw
#### で、せっかくここまで有料を華麗に回避してきたのに、今更有用のデータベース使うのアホらしいんだよねw
#### じゃあもう自分で擬似データベース作ろうとwっていうわけなんだお

## 仕組みのお話。
#### `POSTでデータを送信　→ phpで、ファイルに保存。(txtでもなんでもいいお) → 非同期通信でリアルタイムで表示するためにajaxで表示`
#### みたいな感じだおw　仕組みはEZ

## ソースコードとかとか
#### まあ基本コードって感じかな？これベースにしていくよ。
##### POSTのPHP register的な？　送信先の処理だけどw
“`php:post.php
//日本語が文字化けしな

JavaScriptでreadOnlyの値を強制的に上書きする方法

# はじめに
Angularのテストをjasmineで書いています。
テスト対象のComponentを`extends`していますが、拡張元のComponentのプロパティが`readOnly`で変更できず詰みました。

トリッキーな方法かもしれませんが、以下の[`Object.defineProperty()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)を使用する方法でreadOnlyのプロパティを変更できたので、共有します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

# やりたいこと
Angularのテストをjasmineで書いた場合、拡張元のComponentの読み込み専用プロパティの値を変更したいです。

ちなみに、このプロパティは本来の実装で変更の必要がないも

【簡単】React Developer Toolsとwhy did you renderを使ったレンダリング最適化方法をいまさらだけど整理してみた

# React.memo/useCallback/useMemo…知ってはいるけどいつ使えば良いかわからない

Reactを始めてまもない方やバックエンドとフロントを両方兼務している方にとって、レンダリング最適化やパフォーマンスチューニングは苦手意識を持つ方が多いと思います。

かくいう私も普段はPHPとTypeScriptをいったりきたりしつつ、
フロント業務ではNext/Reactを触り始めてはいるもののメモ化周りとチューニング方法は全く理解できていませんでした。

原因を振り返ってみると以下のようなものでした
「各フックそれぞれの説明において、その場では分かった気がしていた」
「console.logが埋め込まれた前提で再レンダリングの説明をされるだけでは応用が効かない
「問題を検証　→ 分析　→ 改善（ここでメモ化周りのhooksを使う）フローで進められていない」
「そもそもどこがネックなのか検証できるツールと利用方法を理解していない」

そんな反省を踏まえて自分用の備忘録的に今回の記事を書こうと思いました。

:::n