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

forEachでなくfor…ofで実現するバリデータ例

# はじめに
javascript初心者向けの記事です。

forEachの処理でできなかったことをfor…ofで実現した話です。
コードレビューで指摘され、**forEach内でreturnしてもcontinue扱いになる**ことを知ったので例をまとめておきます。

# やりたいこと
文字列を先頭から1文字ずつチェックします。
数字か平仮名以外であれば、**他の文字をチェックせずに**falseを返すバリデータ処理を書きます。

# NG例
実際に私が書いた冗長なコードのサンプルは以下です。
この例のように、**forEach**を使用すると、returnしてもcontinue扱いとなり、ループを抜けることができません。
数字か文字列以外の場合でも、全ての文字をチェックしてしまっています。

“`javascript:NG例
// 各正規表現を定義
const number = new RegExp(/^[0-9]+$/);
const hiragana = new RegExp(/^[ぁ-んー]+$/);

//入力文字列を定義
const str = ‘カタカナ01’;
c

O’Reilly「JavaScript第7版」を読んだ（15章編）

O’Reilly JavaScript 第 7 版を読んだので、自分の学習メモを主目的として気づきをまとめます。

https://www.oreilly.co.jp/books/9784873119700/

## 前置き

本投稿内容は第 15 章の内容アウトプットになります。

お仕事柄、第 15 章 「Web ブラウザ上の JavaScript」 のメモが多くなりそうなのでその手前までで分けることにしました。

https://qiita.com/kawa-mon/items/5803e4ef3f84efcb55bc

実務では TypeScirpt を使うエンジニアリングマネージャーをしていますが、体系立てて JavaScript を学んだことがほぼ無かったため、本書を手に取って、スキマ時間で読み進めてきました。今回を機に、新たに勉強になったこと・解釈間違いなどを整理してメモとしておきます。

## Web プログラミングの基礎

– 今や Web API のすべてを 1 冊の書籍でカバーするのは不可能なので、何か知りたいことがあれば [MDN Web docs](https

Chromeで、TableをCSVで取得(楽天証券積立設定取得)(自分向けメモ)

# 楽天証券の積立設定を取得
複数ページにまたがる場合は、手動で切り替えてから取得。。。

“`javascript
var downloadAsTextFile = function(fileName, content) {
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, content]);
var url = window.URL || window.webkitURL;
var blobURL = url.createObjectURL(blob);

var a = document.createElement(‘a’);
a.download = fileName;
a.href = blobURL;
a.click();
};
var downloadAsCSVFile = function(fileName, rows) {
var content = “”;
for( var i in rows)

javascriptでvideoのバッファをシークバーにうまく表示する。

# 概要
なんとなく動画再生サイトを作る中で、バッファをどうにかして目に見えるようにするため、
プログラムを作っていたらかなり壁に当たったので、js経験あまりない僕がそのコードを残しておく。
ちょっと文がおかしいとか思ってもコメントでボロクソ言って終わりにしてくれ(´・ω・｀)

ちなみに言っておくけど、オフラインというかhtmlをそのまま開いただけだと、
このbuffer表示は無意味と化すから、オンラインのサイトで使うとか、WindowsのIISを使うとかしないといけない。

# 仕組み
`

変数宣言

# 変数の再宣言、再代入
変数は定義した後、別の定義をすることが可能なものです。
javascriptには先ほど書いたlet以外にも変数宣言が可能です。

・var
・let
・const
この三種類が変数宣言が可能なものになります。
とはいえvar自体は今の現場ではほとんど使われていない模様。

##### 再宣言
一度、宣言した変数名で再度、変数宣言を行うことを再宣言といいます。
再宣言はvarのみが可能です。
“`
var nickname = “taro”
console.log(nickname)
var nickname = “ichiro”
console.log(nickname)
“`
letやconstの場合
“`
let nickname = “taro”
console.log(nickname)
let nickname = “ichiro”
console.log(nickname)
“`
とやってもエラーが発生してしまいます。
##### 再代入
変数に値を代入した後で、別の値を代入することを再代入といいます。
“`
var nickname =

deno deploy beta 4発表！価格設定をcloudflare workersと比較する

[deno deploy beta 4](https://deno.com/blog/deploy-beta4)でdeno deployの価格設定が発表されました。まだ今後も機能が追加されるということで、詳細については発表されていない部分も多そうですが、とりあえず同種のサービスである[cloudflare workers](https://workers.cloudflare.com/)と比較してみたいと思います。

## 無料枠

:::note warn
公式ドキュメントを参照して書きましたが、リストは不完全です。足した方がいい情報や間違っている情報がありましたら、コメントしていただけると有難いです。
:::

||cloudflare workers|deno deploy|
|–|–|–|
|リクエスト数|10万/日|10万/日|
|CPU時間|10ms|10ms（平均とのこと）|
|データセンター数|270|32（今後追加するとのこと）|
|コールドスタート|0ms|?|
|メモリ|128 MB|?|
|プロジェクト個数|最大30（今後増加とのこと）|?|
|TypeS

【FirebaseSDK(v9)】FirestoreでドキュメントIDを複数指定して取得する方法

### 以下コレクションが存在する場合に各取得方法の簡単な例(JavaScript or TypeScript)
– [ドキュメントIDを1つ指定して、ドキュメントを1つ取得する場合](#ドキュメントIDを1つ指定して、ドキュメントを1つ取得する場合)
– [フィールドを指定して、複数ドキュメントを取得する場合](#フィールドを指定して、複数ドキュメントを取得する場合)
– [ドキュメントIDを複数指定して、ドキュメントを複数取得したい場合](#ドキュメントIDを複数指定して、ドキュメントを複数取得したい場合)

“`
accounts
L XXXXXXXX
L name = xさん
L frendIds = [YYYYYYYY, ZZZZZZZZ]
L YYYYYYYY
L name = yさん
L frendIds = [XXXXXXXX]
L ZZZZZZZZ
L name = zさん
L frendIds = [XXXXXXXX]
“`

#### ドキュメントIDを1つ指定して、ドキュメントを1つ取得する場合
“`
import { initia

jQuery と React / Vue の考え方の違いを１枚の画像で図示して説明してみる

# はじめに

なぜ jQuery でなく React / Vue を使いたいか、あるいは、どのような時に使うべきか、という話について、自分でかみ砕いたこれらの内容を１枚の図にまとめ、その説明を文章としてまとめた。

:::note warn
あくまで、考え方の違いだけを示しているので、正確ではない情報を含みます。 これらを比較・検討する考えの取っ掛かりとして利用することを想定しています。
また、あくまで個人的な見解をまとめたものです。 もし、あまりにも的外れな点があればご指摘下さい。
:::

# 図示と説明


## jQuery や Vanilla JS を使う場合の考え方

最初にページが生成された後、イベント[^1]を起点にして **DOMの操作を行い自分自身を書き換えていく。** そしてこれを繰り返して

javascriptの学習開始

# javascript
いまやWebサイトを作る際には必須ともなっているjavascript。
Web系への就職を目指しているのであれば必ず学んでおかなければなりません。

### javascriptとは
ではjavascriptとはどういうものなのか。
javascriptはHTMLやCSSでは実現できないWebサイトに動的な変化をもたらすことができる言語です。
例を挙げると、googleのサジェストやフォーム入力の際に現れるエラーメッセージなどです。
javascriptを用いることで、サイト内で画面遷移することなくアプリケーションを利用できたり、ユーザに親切なインターフェースを提供できるようになります。

### javascriptを書く
javascriptの記載方法は2つ。HTMLファイルに記入をするか、拡張子.jsのファイルに記入するかです。
まあ実際はHTMLファイルに記入をするとそれだけでコード量が膨大になってしまうため、jsファイルへの記入が一般的です。
##### Hello,Worldを表示させる
“`

【TypeScript】配列の要素をキーとするオブジェクトを生成したい

## お断り
2022/5/25現在未解決です。

## 対処フロー
1. 文字列リテラルの配列を定義する
1. 配列をもとにUnion Typeを定義する
1. 2.のUnion Typeをキーとするプロパティを持つTypeを定義する
1. 3.のTypeを満たすオブジェクトを、1.で定義した配列をもとに作りたい
1. 配列からオブジェクトにするには、Object.fromEntriesが有効
1. 作ってみたが、戻り値の型が{[x: string]: any}で型一致させられなかった

## コードベース
“`ts
// 1.
const Foo = [“a”, “b”, “c”] as const;
“`
“`ts
// 2.
type foo = typeof Foo[number];
// type foo = “a” | “b” | “c”
“`
“`ts
// 3.
type bar = {
[key in foo]: () => void // プロパティの型は適当
}
// type bar = { “a” | “b” | “c” : () => vo

new Map()について

# 初める前に
転スラ書籍の小説読み進めないとちょっとネタバレになるかもです?

# 初めに
今回業務でnew Map()に大いに助けられたので、備忘録として記載していこうと思います。
かなり便利な関数なので、皆さんも積極的に使用していただけたらと思います！

# new Map()関数とは
そもそもnew Map()とは何かについてですが、ざっくり説明すると[{key, data}]で格納されているiterateble型になっています。

例えば、リムルの配下をmapで格納したい場合は以下のようになります。

“`js
const mapData = new Map()
mapData.set(‘リムル・テンペスト’, {
‘魔神王’: ‘ディアブロ’,
‘幽幻王’: ‘ゼギオン’,
‘赫怒王’: ‘紅丸’
})

console.log(mapData)

// Map(1) {size: 1, リムル・テンペスト => {魔神王: ‘ディアブロ’, …}}

// 中身
// key:’リムル・テンペスト’
// value:{魔神王: ‘ディアブロ’, 幽幻王: ‘ゼ

JScriptからVBScriptの関数を使う

# 概要

VBScriptの組み込み関数はJScriptから使用することができません。

数値処理やキャストはJScript側でどうにかなりますし、有名なところでは`MsgBox`が`Popup`で代用できますが、`InputBox`や`RGB`関数などは代替手段がなく、利用したいシーンもそこそこ考えられます。

従来、JScriptとVBScriptの相互運用には、ScriptControlかWSFファイルが用いられていました。前者は64bit環境では動作しませんし、後者は…なんだか…個人的にスマートな感じがせず好きではないです。

今回紹介する内容では、`*.js`ファイル1つで完結するようにまとめています。

# 解説

VBScriptとJScriptから同時に触れるオブジェクトに対して、VBScript側でプロパティを生やして、JScriptから叩くことを考えます。

## スクリプトを2つ使う

まずは2つのファイルに分けて、わかりやすい状態で説明します。

VBScript側のコードがこちらです。JScript側で関数を使う前に実行します。

“`vb
Wit

【Javascript】時間の取り扱い（Timestamp ⇄ Dateオブジェクト）

# Dateオブジェクト作成

まずはDateオブジェクトの作成から。

## 現在時刻で作成

“`jsx
new Date();
“`

## 年月日時分秒の値を渡して作成

“`jsx
console.log(new Date(2015));
// Thu Jan 01 1970 09:00:02 GMT+0900

console.log(new Date(2015, 0));
// Thu Jan 01 2015 00:00:00 GMT+0900

console.log(new Date(2015, 15));
// Fri Apr 01 2016 00:00:00 GMT+0900

console.log(new Date(2015, 0, 20));
// Tue Jan 20 2015 00:00:00 GMT+0900

console.log(new Date(2015, 0, 40));
// Mon Feb 09 2015 00:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 14));
// Tu

カリー化で一部の引数を固定して関数を複製する

### カリー化とは

> カリー化とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること（あるいはその関数のこと）である。

文字だけでは全然わからないと思うのでコードで解説します。

下記のように引数を２つ受け取る関数があるとします。

“`javascript
sample(arg1, arg2) {
console.log(`引数１：${arg1}, 引数２：${arg2}`)
};

sample(‘りんご’, ‘ぶどう’);
// => 引数１：りんご, 引数２：ぶどう
“`

これはみんなおなじみの普通の関数。

`sample`という名前で関数を定義し、`arg1`と`arg2`という二つの引数をとっています。

このときに、引数１だけを固定して、引数２だけを変えて何回かこの関数を呼び出したい場合、上記のままだとこうなります。

“`javascript
sample(‘りんご’, ‘ぶどう’);

sample(‘りんご’, ‘スイカ’);

sample(‘りんご’

【JavaScript】Ace Editor で入力文字数制限をする

## Ace Editor とは
– JavaScript を使って簡単にコードエディタをHTMLに埋め込むことが出来るライブラリ

https://ace.c9.io/

## 概要
– Ace Editor に入力する際に文字数の制限を入れたい
– 実装方法としては onChange の際にチェックを入れる

## 設定用関数
“`javascript
// 最大文字数設定用
function setAceEditorMaxLength(editor, maxLength) {
if (!editor) return;
if (maxLength !== parseInt(maxLength,10)) {
return;
}
editor.session.on(“change”,function(edt){
var doc = editor.session.getDocument();
var nbLines = doc.getLength() – 1;
var Range = ace.require(‘ace/range’).Range;
var r

Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtinsの対処法

## はじめに

eslint実施時に以下のエラーが出たため、その時の対応をまとめました。

“`bash
Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtins
“`

## 問題のコード

“`js
const hasProperty = entry.hasOwnProperty(‘Key’);
if (hasProperty) {
// 処理
}
“`

## 改善したコード

以下のように`Object.prototype`を使うことでエラーが出なくなりました。

“`js
const hasProperty = Object.prototype.hasOwnProperty.call(entry, ‘Key’);
if (hasProperty) {
// 処理
}
“`

## 参考
https://stackoverflow.com/questions/39282873/object-hasownproperty-yi

ライブ会場の座席検索サービス

今回、ポートフォリオとして**ライブ会場の座席検索サービス**を作ったので、少し解説します。

# 目次

[1.作った経緯](#1-作った経緯)
[2.実際のページ](#2-実際のページ)
[3.使用技術](#3-使用技術)
[4.工夫した点](#4-工夫した点)
[5.苦労した点](#5-苦労した点)
[6.これからの課題](#6-これからの課題)

# 1. 作った経緯

僕はよくアーティストのライブに行くのですが、チケットの席番号を見て毎回思うことがありまして、**「自分の席の位置がよくわからない」** ということです。

**特にスタンド席などは、会場全体を囲むように色々な方向に席があり、なおかつ 2階,3階とフロアも分かれているので、会場内で迷ってしまうこともあると思います。**

そんな悩みを解決するために今回作ったのが、**ライブ会場の座席検索サービス**です。
意外とありそうで無いサービスだったので、**だったら作ってしまおう！！** ということで作ってみました。

# 2. 実際のページ

[ライブ座席検索](http://www.search-venue-seat

Chromeで、TableをCSVで取得(実質コスト取得)(自分向けメモ)

# 実質コストをCSVで取得

https://diamond.jp/zai/articles/-/131949

## 毎度のライブラリ
“`javascript
var downloadAsTextFile = function(fileName, content) {
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, content]);
var url = window.URL || window.webkitURL;
var blobURL = url.createObjectURL(blob);

var a = document.createElement(‘a’);
a.download = fileName;
a.href = blobURL;
a.click();
};
var downloadAsCSVFile = function(fileName, rows) {
var content = “

MapLibre GL JSと地理院標高タイルで3D地形を表示する


## TL;DR

– MapLibre GL JSの`v2.2.0-pre.2`で3D-Terrainが実装された
– MapLibre GL JSの`addProtocol()`を使う事で読み込んだタイルデータを加工できる
– `addProtocol()`で地理院標高タイルをTerrainRGBへ変換することで、標高タイルを使って3D-Terrainを表示できた

## MapLibre GL JSと3D-Terrain

https://github.com/maplibre/maplibre-gl-js/pull/1022

3D-Terrainの実装はかなり長い時間がかけられており、早い段階から

deno deployでWebサイトを公開する方法4種

[deno deploy](https://deno.com/deploy)はDeno社が公式で提供する、Deno向けのエッジコンピューティングサービスです。

https://deno.com/deploy

# deno deployの特徴

#### TypeScriptをトランスパイルなしでそのまま実行

deno deployはDenoの実行基盤を流用して構築されているため、TypeScriptやwasmを直接実行することができます。事前のビルドステップがないため、CI/CD等でビルド構成を設定する必要がありません。

#### GitHub連携

GitHubを使用している場合、GitHub Appsをリポジトリにインストールすると、push時に自動でデプロイされます。またプルリクエストが開かれた場合はプレビュー用のURLが発行されます。
自分が試した感じだと、pushしてから本番環境に反映されるまで3秒から5秒ほどで結構早いです。

GitHubリポジトリ上のファイルは`Deno.readTextFile()`などを使ってローカルファイルのように読むことができます。これの