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

JavaScriptのStringについて part1

# 初めに
今回は文字列に関連するメソッドをまとめてみました。

https://javascript.info/string

# Methods
## String.prototype.charCodeAt()
`charCodeAt()`は指定された文字列のインデックスに、対応したUTF-16の`Code Unit`（`0`-`65535`）を返す。
**サロゲートペアは二つの`Code Unit`の組み合わせなので、`charCodeAt()`は一部の`Code Unit`を返すことしかできません。**
“`jsx
// Syntax
str.charCodeAt(index)
// index in here means “code unit index”
// it will return UTF-16 “code unit”
“`
“`jsx
console.log(‘abc’.charCodeAt(0)); // 97
console.log(‘abc’.charCodeAt(1)); // 98

// surrogate pair
console.log(‘?

React + TypeScript: リアクティブなエフェクト(useEffect)のライフサイクル

本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[Lifecycle of Reactive Effects](https://beta.reactjs.org/learn/lifecycle-of-reactive-effects)」は、エフェクト(useEffect)のライフサイクルをどのように捉えるべきかについてのていねいな解説です。エフェクトの依存関係の定め方についても具体的に説明されています。

本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。また、公式サイトと異なり、サンプルコードはモジュール分けし、さらにTypeScriptも導入しています。

エフェクトとコンポーネントとは異なるライフサイクルです。

* コンポーネント
– マウント
– 更新
– アンマウント
* エフェクト
– 同期の開始
– 同期の停止

エフェクトの依存するプロパティや状態が時間とともに変化する場合、ライフサイク

人事のおじさんプログラミングを学ぶ Day14「わかりやすく日時を表示する」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
わかりやすく日時を表示してみた。
Day13でひっかかったバックコーテーションには気づくことができました。

Python,Ruby,PHP,Java,JavaScript,Perlのデバッガ(デバッグ)の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのデバッガ(デバッグ)の比較

# Python

https://qiita.com/kaitolucifer/items/dc58efebd72d72a8feb2

# Ruby

https://qiita.com/port-development/items/5ea6448eb2b45c70ef65

https://qiita.com/suketa/items/52c60d79332c9a24f973

# PHP

https://qiita.com/ryouya3948/items/0055c1935b7bd62ba3b9

# Java

https://qiita.com/gatchan03/items/3c43b674e2b7c4b5c5cb

# JavaScript

https://qiita.com/a_

文字列の一部だけを取得する方法

はじめに
—
inputでユーザーが入力した値の一部だけを取得して画面に表示させたいことがありました。
色々と方法がありそうですが、自分が調べた内容を備忘録に残そうと思います。

.substring()で文字列の一部を取得する
—
文字列の一部を指定して取得するためには”.substring”を使用します。
構文は下記になります。

~~~js
str.substring(indexStart[, indexEnd])
~~~

詳しい説明
—
[公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substring)より引用して下記にまとめようと思います。

indexStart/indexEnd
—
・indexStart
取得する文字列の最初の文字の位置を指定する引数。
配列と同じように、一文字目の位置は0。

・indexEnd
文字列の中から取得しない文字の位置を指定する引数。
この引数は省略可能。
~~~
const str =

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript スケジューリング

スケジューリング (paizaランク B 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step6
解いてみました。

キャンペーンの参加数を最大化するには、
終了日が早い順にソートをすれば良いです。

あるキャンペーンが終わって、次のキャンペーンに参加する条件は、
あるのキャンペーンの終了日と次のキャンペーンの開始日を比較すれば良いです。

C++ の場合の模範解答を参考にJavaScriptでコードを書いてみました。
“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//キャンペーンは n 回開催
const n = Number(lines[0]);

//キャンペーン開始日・終了日の配列
let campaign = [];
fo

Express × TypeScriptでバックエンド開発②(MySQLの導入、ExpressでDB接続・操作)

## ご挨拶
Express × TypeScriptでバックエンド開発①(下準備~簡単なGET, POST)
の続きです。
この記事では**ExpressでMySQLへ接続しGET・POST**します。
できる限りシンプルにハンズオンでまとめました。
皆様の新しいキャリア開拓の一助になればと思います。

### ▼ゴール
・ExpressでMySQLに接続する
・シンプルなAPIの実装（GET, POST）と動作確認

### ▼対象
・フロントエンドからキャリアを始めた人（ジュニア、ミドル）
・TypeScriptでバックエンド書いてみたい人

## MySQLをインストール
https://dev.mysql.com/downloads/windows/installer/8.0.html
にアクセスし、自分のOSを選択したうえでインストーラーをダウンロードしてください。
![mysqlinstaller.png](https://qiita-imag

Kaggleの既読NoteBookの色を変えるChrome拡張機能を作った

皆さんこんにちは。題名の通り、Kaggleの既読NoteBookの色を変えるChrome拡張機能を開発してみました。

## 背景
KaggleのCompetitionページには日々新しいNoteBookが投稿されます。非常に有益な知見が多く参考になるのですが、如何せん投稿数が多く、どれを読んだことがあって、どれを読んだことがないかを把握するのが難しいのが現状だと思います。


Kaggle側で既読のStatusを変える機能を実装して貰えればいいのですが、待っていられませんよね。というわけで、既読したNoteBookの色を変えるChromeの拡張機能を簡単に開発してみました。

## 先駆者
実はKaggle関連の拡張機能を調べていると[kaggle watch](https://chrome.google.com/webstore/detail

WebサーバーでWebRTCコネクション

## ここで知れる情報
WebRTCのコネクションをVPSなどの、websocketを利用ではなくて、
さくらレンタルWebサーバーで実現した際に、発生したトラブルと解決の話。
主にJS部分でdatachannelがopenされない事象を解決しました
※Webサーバー側はDBにデータを保存、データの受け渡しができたらなんでもいいと思うので、特段解説はいれない

## 作成したアプリ
iOSで簡単なインターフォンアプリ
(SFSafariてタブやツールバーが見えないように位置調整したアプリ)
あとはHTML５でJavascriptとWebサーバーでデータのやりとりしてWebRTCコネクション

– ローカルネットワーク内でコネクション
– 接続は1:1です
– 相互で映像と音声の交換
– テキストデータのやりとりで、メッセーシングの代替

## WebRTCがコネクションされるまでの流れ(失敗篇)

User1とUser2のコネクションをする想定

– User1
1. 映像と音声用のストリームを取得
2. RTCPeerConnectionを作成
3. 映像と音声用のストリームをRT

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 部分列

部分列 (paizaランク B 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step3

大きい方から足して,和が初めてx以上になった時の要素数が答えです。
事前準備として数列aを大きい順(降順)にソートしておきます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の長さを表す整数 n, x
const [n, x] = lines[0].split(” “).map(Number);
//数列 a
const a = lines[1].split(” “).map(Number);

//数列aを降順にソートする
const aSorted = a.slice().sort((a, b) => b – a);

//大きい方から足して,和が初め

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript マンハッタン距離

マンハッタン距離 (paizaランク B 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step8
を解いてみました。
ポイントは、sort関数内で、比較する変数 `a, b`について、それぞれマンハッタン距離を求め、昇順に並べ替えるので、`return (aのマンハッタン距離) – (bのマンハッタン距離);`とすることです。

“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//n 個の点を原点とのマンハッタン距離が昇順になるように並び替え、改行区切りで出力
console.log(
lines.slice(1).map(line => line.split(” “).map(Number)).sort((a, b) =>

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 文字列のソート

文字列のソート (paizaランク B 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step7
ソート関数の中で、優先順位にしたがってifで場合分けをします。
sort関数内で、文字列の昇順は`return a.length – b.length;`です。
辞書順にするには0未満の値を返します。今回は`return -1;`としています。

“`javascript:javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//文字列の数 n
const n = Number(lines[0]);
//文字列の配列 s
const s = lines.slice(1).sort((a, b) => {
//1. 各文字列の文字数が昇順になるようにする。

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript ペアソート

ペアソート (paizaランク C 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step4

１列目の方が優先度が高いので、後にソートします。

“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数値 n
const [n] = lines[0].split(” “).map(Number);
// n 行 2 列の表 a
const a = lines.slice(1).map(line => line.split(” “).map(Number));
console.log(a);
//2 列目の数値に基づいて昇順でソート
a.sort((a, b) => a[1] – b[1]);
//1 列目の数値に基づいて昇順でソート
a.sort((a,

Jestのjest.fn()とjest.spyOn()関数について

# mockingとは
単独テストコードを作成する際、該当のコードが依存する部分を偽の動きをするもの（mock）に変更すること。テスト対象のコードが依存する部分を直接作成することが難しい場合mockingする。

# jest.fn()の使用方法
jestでは偽の関数を作成する`jest.fn()`関数を提供している。
“`javascript:javascript
const mockFn = jest.fn()
“`

この偽の関数は引数をもって呼び出すことも可能である。
“`javascript:javascript
mockFn()
mockFn(1)
mockFn(“a”)
mockFn([1, 2], { a: “b” })
“`

しかしこのままだと、偽の関数は何も設定してないため`undefined`をreturnする。
`mockReturnValue(return値)`を利用して偽の関数がどの値をreturnすべきかを設定することができる。
“`javascript:javascript
mockFn.mockReturnValue(“I am a moc

Python,Ruby,PHP,Java,JavaScript,Perlのコマンドライン引数の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlのコマンドライン引数の比較

# Python

https://qiita.com/taashi/items/07bf75201a074e208ae5

# Ruby

https://qiita.com/shiGira/items/44586bdc48c06e00d99f

# PHP

https://qiita.com/aic0o/items/91ca1ddc1fc6e025286f

# Java

https://qiita.com/takahirocook/items/ece64146015f702d0a83

# JavaScript

https://qiita.com/furusin_oriver/items/f030d1eaa9e7b54233c3

# Perl

https://perlzemi.com/

Porting WordNet to the Dogelog Player

# Introduction

The Princeton WordNet is a relational database of English lexical and semantical word relationships. As a relational database it is also readily available as Prolog predicates. We made an experiment in porting WordNet to a Dogelog Player notebook.


Dogelog Player is 100% written in Prolog, but its Prolog input/output predicates are too slow to read the Pr

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 区間のソート

区間のソート (paizaランク C 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_simple_boss
sliceで区間を切り出します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の長さを表す整数 n
//ソートする区間の左端の位置を表す l と右端の次の位置を表す r
const [n, l, r] = lines[0].split(” “).map(Number);
//数列 a
const a = lines[1].split(” “).map(Number);
//数列 a の l 番目の要素から r – 1 番目の要素だけを昇順でソート
const aSorted = a.slice(l, r).sort((a, b) => a – b);

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 重複削除

重複削除 (paizaランク C 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_simple_step3
集合Setで重複削除をします。スプレッド構文で配列に変換します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の長さを表す整数 n
const [n, k] = lines[0].split(” “).map(Number);
//数列 a
const a = lines[1].split(” “).map(Number);
//数列 a から重複した要素をすべて削除
let set = new Set([…a]);
//残った要素を昇順かつ半角スペース区切りで出力
console.log([…set].sort((a, b) => a – b).

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScrip Top – k (easy)

Top – k (easy) (paizaランク C 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_simple_step2
解いてみました。
大きい順に並び替えて、k番目に大きい値を出力します。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の長さを表す整数 n
const [n, k] = lines[0].split(” “).map(Number);
//数列 a
const a = lines[1].split(” “).map(Number);
//数列 a が降順でソートされた状態 aSorted
const aSorted = a.slice().sort((a, b) => b – a);
//数列 a の k 番目に大きい値を出力
conso

paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript 最大最小

最大最小 (paizaランク C 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_simple_step1
解いてみました。昇順に並べ替えて、末尾が最大値、先頭が最小値です。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//数列の長さを表す整数 n
const n = Number(lines[0]);
//数列 a
const a = lines[1].split(” “).map(Number);
//数列 a が昇順でソートされた状態 aSorted
const aSorted = a.slice().sort((a, b) => a – b);
//a の最大値、 a の最小値の順で、半角スペース区切りで出力
console.log(aSorted[n – 1]