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

ECMAScript Annex B と型定義、ついでに __proto__

## Annex B について

JavaScript の言語仕様には Annex B という項目があります。これは Web 互換性のために残されているレガシーな機能の仕様について記述してあり、新たに ECMAScript のコードを書く際にこれらの機能を使用したり、その存在を前提にしたりしてはいけないと明記されています。

https://tc39.es/ecma262/#sec-additional-ecmascript-features-for-web-browsers

ここには `String#big` などの今となっては全く実用性のないメソッドや、`escape`, `unescape` 函数、もともと IE の独自実装だった `String#substr` などについて記述されています。

ブラウザではこれらの機能を取り除くことが出来ないので残念ながら扱うことが出来ます。また Chrome の JavaScript エンジンである V8 を使っている [Node.js](https://nodejs.org/ja/) や [Deno](https://deno.land/

JavaScript入門(オブジェクト①)

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**
object.js：オブジェクトを作成、定義するファイル
index.html：「object.js」を使用、および開発者コンソールで確認する際に開くファイル

**【★ポイント

色々な機能を追加したタイマーを作りたい

#初めに
　Guildという名前でwebサイトを作ろうと四苦八苦しておりますが、そもそもGuildが何を目的に作成しているのか忘れかけていたところで、ギリギリで何を作ってたのが今日この頃です。
　依頼を気軽に受けれる場所をネットで作りたいなと思ってGuildを作成していたのですが、たまには息抜きもいいかなと、とにかく機能を盛りだくさんにしてタイマーを作っていこうと思います。デザインに関しては例の如く。
因みにNode.jsをサーバーサイドで利用しています。だからせっかくなのでNode.jsのプログラムも載せておきましょう。

　最終的には、以下のを作ったよってお話です。

https://guild.click/timer
#バージョン
・Node.js　　　　　　15.11.0
・MongoDB　　　　　4.4.6
#仕様書
　考えつく限りタイマーに付けれる機能を考えていきます。
・無難にアラーム付きタイマー
・タイマーの設定
・タイマーアラームの変更
・周期的なタイマー
　あれ？案外思い浮かばないな、とりあえずこれらを作っていきましょう。思いついたら後から付け足すか、後日の記事の

setIntervalを即時関数でやるよ

#初めに
　Guildを作る息抜きにタイマーを作成していたのですが、案外引っかかるところが多かったので、それを記事にしようと思いました。
#即時関数にする理由
　setIntervalは即時関数を使えばちょっとした問題があるみたいです。

https://qiita.com/kouhe1/items/9c23604901039832d385

　このサイトから引用させていただきます。

>setInterval() は指定ミリ秒に呼び出されたコールバックをコールバック関数に引き渡しますが、もしそれが引数のように他のものを期待している場合、それを混同する可能性があります。この問題を回避するためには、コールバックを呼び出すために無名関数を使用してください。

　とのことです。
　例えばが以下のプログラムですね。

“`javascript
var count = 0;
setInterval(function(){
console.log(count)
count++;
},1000)
“`

“`javascript
0
1
2
3
4
5
“`

　こういう風にずっと続

これからReact始めたい人のためのステップ #1

この記事は下記のような人に役に立てるように書いていければと思います。

– これからReact学びたい！けど何から初めて良いかわからない
– モダンフロントってどこか苦手なレガシー思考な人
– Reactに書かれている記事は見たけど、よくわからない部分が多い
– 開発環境とか整えるのが面倒

本記事は単発で終わるものでなく、実際に僕が学習した過程を連載形式でお届けできればと思います。
これから勉強したい人、今勉強しているけどつまずいてモチベーション上がらない人の助けになればと思います。

僕はまずチュートリアルから開始しました。
とにかく動くものを作ろうとする方もいるかもしれませんが、
エラーに詰まった場合言語の仕様や思想を知らないとエラー解消に時間がかかってしまうため
少し時間がかかっても言語仕様の理解を優先して実施することに決めております。
[Reactチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)

## まずはコンポーネントから
Reactに何を描画したらいいのか伝える。
データが変更されるとReactは効率よく更

returnした値が処理を待たずに返ってきてしまう

#やりたいこと

functionsでfirestoreのdocを連想配列で返したい。

#問題
処理を待たず、return されてしまい
返ってきた値が空の配列 {}になってしまう。

#期待する値
{
hoge: [{fuga: 0}, {bar: 1}],
piyo: [{poyo: 4}]
},

#行ったこと
functions下以外で、ベタ打ちで実行したらしっかりと値が返ってきた。しかし、functionsを経由すると空になってしまう。

“`
const functions = require(“firebase-functions”);
const db = require(“../firebase”).db;
const location = require(“../firebase”).location;
const runtime = require(“../firebase”).runtime;

exports.fetchProducts = functions
.region(location)
.runWith(runtime)
.https

slack TimeTreeの今日の予定を自動で投稿する

#はじめに
こちらの記事は**TimeTreeというカレンダーアプリを使用することを前提**として進めます。

私は大学の課題の提出締め切りをTimeTreeで管理しているのですが、携帯の通知だと見逃してしまうのでslackにリマインドさせて忘れないようにしようと思ったのがきっかけです。

#作成目的
大学がオンライン授業になり、課題の締め切りが授業によって違うため、締め切りを自動でお知らせしてもらい提出を忘れないようにするため。

#サイクル

1. botが毎日決まった時間に課題リマインド用のチャンネルで@TimeTreeコマンドをたたく
1. TimeTreeが今日の予定を知らせる

TimeTree Appの仕様は、ユーザーから@TimeTreeを利用したコマンドを入力してカレンダーの情報を取得します。
>【予定を確認】
Slack上でTimeTreeの予定の確認ができます。
下記のコマンドをSlack上で入力してください。
@TimeTree 今日
@TimeTree 明日
@TimeTree today
@TimeTree tomorrow

#作成手順
1. [slac

Cloud Storage for Firebase フォルダごと削除する

# 方法
現状フォルダごと削除する機能はないので、リストを取得してループを回す。
フォルダ配下のファイルがすべて消えるとフォルダも削除される。

“`
//　削除するフォルダへの参照を作成
var listRef = storageRef.child(‘files/uid’);

// フォルダ配下のアイテムをすべて取得
listRef.listAll().then( (res) => {
res.items.forEach( (itemRef) => {
//　削除
itemRef.delete()
});

“`

# 参考
https://firebase.google.com/docs/storage/web/delete-files?hl=ja
https://firebase.google.com/docs/storage/web/list-files?hl=ja

【JavaScript】letとconst（とvar）の使い方について

#はじめに
JavaScriptの基本中の基本ですが、letやconst、varの使い方を簡単にまとめていきます。

#varについて
JavaScriptは、元来、変数を定義するときには`var`しかありませんでした。
しかし、ES6で新しく`let`と`consｔ`が追加されたことにより、それ以降は`let`と`consｔ`が使われるようになっています。
したがって、`var`はもう使わないと考えて良いでしょう。

#letとconstの違い
###`let`は上書きできるが、`const`は上書きできない！！
たとえば、以下のようなコードがあったとします。

“`JavaScript:JavaScript
//let
let name = ‘Yamada’;
name = ‘Suzuki’;
console.log(‘hello　’ + name);
“`
この場合、`let`は上書きできるので、`hello Suzuki`と出力されます。
次に、以下のようなコードがあったとします。

“`JavaScript:JavaScript
//const
const name =

web系エンジニアを目指す人にオススメの高コスパUdemy講座7選！【html編】

この投稿では、web系エンジニア（特にフロントエンド）を目指す人に向けて、htmlやcssやJavaScriptが学べるUdemy講座を紹介していきます。
htmlやcssはweb開発の基礎中の基礎なので、最初にガーッと学んでおくのがオススメです。

## [HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門
おすすめ度：★★★★
・[[HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門](https://px.a8.net/svt/ejp?a8mat=3BBPJR+AVRCOQ+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fhtml-css-js%2F)
### この講座で学べる内容
・HTML/CSSを用いたWebページの構築
・JavaScriptを利用したプログラミング
## ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる

Firebase version9以降でCloud Storageを使う[登録編]

### タイトル通りです。
2021/8/25にリリースされた`Firebase JavaScript SDK (v9.0.0)`の使い方、特にCloud Storageについて、まだ日本語のドキュメント等があまり整備されていないので一応書き残しておきます。

### 公式
https://firebase.google.com/docs/storage/web/start

### 8系と何が違うの？
関数をnamed importをして必要なものだけ使う。みたいな方針になったらしいです。
わかりやすく説明されてます↓

https://zenn.dev/hiro__dev/articles/605161cd5a7875

### Cloud Storageの扱い方について
早速結論ですが、Cloud Storageの使い方です。v8以前と比較します。

### importと参照の作成

– v8

“`js
import firebase from “firebase/app”;
import “firebase/storage”;

const firebaseConfi

js canvas画像と図形を連射して表示されないときのオチ

##要約
結論からいうと画像の読み込みは一瞬では終わらないのでonload後に描くよう意識しないとダメよってだけの話です。

##問題
画像を表示させてその裏側に円を付けたいと思った私がいます。画像はcanvasのdrawImage()で、円はcanvasのarc()で描きます。しかし、これを正直に書くだけではループして連発する際に上手く行かないんですね。これの解決策を備忘録で残します。

##問題のコード
“`js
const canvas=document.createElement(“canvas”);
canvas.width = 600;
canvas.id = “FieldCanvas”;
canvas.height = 400;

特定ユーザーのQiita記事一覧を得る(4)

[前回の記事](https://qiita.com/ELIXIR/items/417275e4c751c1fb59a0)のアップデートです。
記事を作成日時でソートするようにしました。
増えてきた自分の記事を検索するのにも役立ちます。

[動作デモ](https://elix.jp/app/tools/qiita_index.html?uuid=ELIXIR)
前回同様ローカル環境でも動作します。

[更新部分]

“`
var ALL_DISP_TAG = ‘All’;

function dispData(_resArr,_tag=””){
createButtons(_resArr,_tag);
var articles = [];
for(var i=0;i<_resArr.length;++i){ if((_tag=="")||(_tag==ALL_DISP_TAG)||(articleContainsTag(_resArr[i],_tag))){ var tmpStr = '

javascript: filterとmap

#はじめに
これはGASでスプレッドシートを処理する中で理解したことを忘れないための備忘録です

###データ
検証に利用する配列`CurretGradeObject.createObjects()`です。

“`json:CurretGradeObject.createObjects()
[
{ memberId: 100234,
grade: ‘一般’,
award: ‘最優秀’,
},
{ memberId: 100567,
grade: ‘一般’,
award: ‘優秀作’,
},
{ memberId: ”,
grade: ”,
award: ”,
}
]
“`
#filter
###　書き方
“`javascript:
var memberData = CurretGradeObject.createObjects().filter(function(x) {
return x
})
“`
“`json:返却値
[
{ memberId: 100234,
grade:

【Jest入門】前後処理が呼び出されるタイミング~beforeEach、beforeAll、afterAll、afterEach~

# はじめに
Jestでテストを書いていて、DBのクリーンアップ処理やモックのリセットをする際に、“`beforeAll“`や“`beforeEach“`などを使う機会がありました。改めて調べると、呼び出されるタイミングが特殊なものもあったのでまとめました。

## 調査

describe関数をネストする例で、beforeEach、beforeAll、afterAll、afterEachの実行タイミングを調べてみました。

“`javascript:timing.test.js
// 前後処理の実行されるタイミング
describe(“テスト”, () => {
beforeAll(() => console.log(“1 – beforeAll”));
afterAll(() => console.log(“1 – afterAll”));
beforeEach(() => console.log(“1 – beforeEach”));
afterEach(() => console.log(“1 – afterEach”));
test(“テスト

Mapboxの3Dデータと土砂災害警戒区域をMapbox GL JSで重ねて表示してみました

# はじめに
– Mapboxの3D地形及び3D建物と土砂災害警戒区域をMapbox GL JS(v2)で重ねて表示してみました。
– [Mapboxの3D地形](https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/)はMapbox GL JS(v2)で[新たに追加された機能](https://docs.mapbox.com/jp/mapbox-gl-js/overview/#v2%E3%81%AE%E6%96%B0%E6%A9%9F%E8%83%BD)になります。
– 土砂災害警戒区域には国土数値情報の[土砂災害警戒区域データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-A33-v1_4.html)を用いています。

# アウトプットイメージ

MapboxGLJS(v2)の3Dマップに土砂災害警戒区域（急傾斜地、土石流、地滑り）を追加して、レイヤの切り

簡易紙芝居PGM

簡易紙芝居PGM

JavaScriptのテキスト読み上げ機能を使った簡易的な紙芝居PGMを作りました
あと紙芝居データ共有Wikiもついでに作成しました

---

githubURL:https://github.com/NanjoMiyako/KamiSiba
サンプルページURL:https://nanjomiyako.github.io/KamiSiba/
紙芝居データ共有WikiURL:https://seesaawiki.jp/kamisiba20210918/

---

使い方
まず読み上げさせたいテキストデータと行別画像リストファイルを読み込ませます
その後開始行と一行あたりの読み上げ時間を入力した再生ボタンを押します

---

行別画像リストのファイル形式
表示させたい行番号1,画像URL1
表示させたい行番号2,画像URL2
…

---

参考にしたサイト
javascriptのsetTimeoutが即実行されてハマっ

?インターネット老人?のためのホームページ（死語）リフォーム術

# この記事の対象
～00年代初頭にホームページ作っていて、現在放置中……という人、あるいはそういう人から依頼されて昔のフォルダを受け取った人が対象になります。
スキル的にはjQuery(Bootstrap)なら何とか勢～（バックにも関心がある）SPA初心者勢を想定しています。

# 手順
## 1.本当に自前でやる必要があるか考える
Webサービスが氾濫する現在、現在サイトにある機能を本当に自前で提供する必要があるか考えましょう。

### 日記
まぁ**最有力はブログへの移行**ですね。黒歴史を消す人も多いですが、逆に過去の日記みたいなもんで、残しておきたいと思う人もいるかと思います。ていうかホームページは放置してて日記にあたる部分だけ流石にブログに移行してる人も多いかと思いますね。
何らかの理由でブログに移行できない、不適切だと思う場合はスクレイピングして文章データをmdやらjsonに纏めて、今流行りのGatsbyあたりに手を出すのも良いのではないでしょうか。

### イラスト
これは現行のシェアとしてもシステム的にも**[pixiv](https://www.pixiv.ne

[初学者]javascriptのクロージャー

#はじめに
while文とかfor文とか~文あるけど、あれは関数なのか？の疑問から生まれたものです。
文の正体は分かりませんでした。

#目次
　1.ループ文の謎
　2.ガベージコレクション？　ガレージコレクションなら知ってます。
　3.静的スコープとはなんですか？
　4.クロージャー

#ループ文の謎
ループ文とはご存知でしょうか？基礎で出てくるあれです。

“`
for(let i = 0; i < 5; i += 1) { console.log(i); } // 0,1,2,3,4と出ます。 ``` 基礎の基礎のループ文。 ではあえて関数で書くとどうやって書くのかを疑問に持ちました。 ``` let a = 0; function A() { a += 1; console.log(a); }; A(); //1 A(); //2 A(); //3 A(); //4 A(); //5 ``` 普通に出ますね。ではlet a = 0;を関数内に入れてみましょう。 ``` function A() { let a = 0; a += 1; c

JavaScriptから学ぶSwiftで新しく対応したasync、await

Swiftでasyncとawait機能が対応した。
自分自身Swift以外の言語の素養がなく、asyncとawaitとはなんぞやというところから勉強したのでその記録
async、awaitの学習教材としてJavaScriptの言語仕様を見ている

# 前提知識として、JavaScriptでのasync await

## Promise型　
非同期処理の戻り値であり、非同期が完了するまで、その実態はundefinedになる。

戻り値が返ってきたら、その戻り値がラップされた型となる。戻り値が返ってきたタイミングで自身のthen()メソッドを呼ぶ

“`jsx
getDate()
.then(function(data) {

return getYear(data)

}) .then(function(year) {

return getSomething(year)

}) .then(function(item) {

getAnotherThing(item)

})
“`

## async
非同期の戻り値(Promise)が返って