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

このJava Scriptのコードの出力結果が本当に理解できないから頑張って解説

“`javascript

function test(){alert(“test1”)};
{
var a={};
a.abc = test;
test=()=>alert(“test2”);
a.abc(); // =>test1
a.abc = test;
a.abc(); // =>test2
}

“`

と実行結果がなるらしい。。。。。

なんでやねん！！！！！

“`javascript

function test(){alert(“test1”)};
{
var a={};
a.abc = test;
test=()=>alert(“test2”);
a.abc(); // => test関数を上書きした感じだから、test2じゃないの？
a.abc = test;
// なんでこのコードを
a.abc(); // =>test2
}

“`

function test(){alert(“test1”)};
と
test=()=>alert(“test2”);
はおそらく異なる関数オブジェクトなのであろう。

【巻き上げ、ホイスティング】Java Scriptでまだ関数を定義していないのに、先に呼び出せることが不思議だったので調べてみることに。

まず、タイトルがクソすぎる。
なんか良いタイトルあればお願いいたします。

Hoisting (巻き上げ、ホイスティング)について語ります。

# いきなりですが皆さんに問題

**コード1**

“`javascript
var a ={};
a.abc = test;
a.abc();
function test(){
alert(“test”)
}

“`
**コード2**

“`javascript
var a ={};
a.abc = test;
a.abc();
test=function(){alert(“test1”);}
“`

この二つのコードどちらかがエラーを起こし、
どちらかはしっかりと動作します。

シンキングタイム、、、、、

答えはコード1がちゃんと動き、コード2はUncaught ReferenceError: test is not defined
とエラーが起こる

んー、なんか不思議。

要するに、無名関数は関数を呼び出す前に関数宣言をする必要がある。
無名関数の場合は先に関数宣言(どういった関数かを定義)
しないと

アップロードされた動画の縦横サイズ情報をjavaScriptで取得する方法

## 前提
htmlのinputタグにてアップロードされた動画の縦横サイズ情報を取得して、サーバーサイドにpostする必要があり、その際に作成したコードになります。
fileinputから直接取得はできなかったた、一度videoタグに展開してから、縦横のサイズを取得しています。

## 実装

“`sample.js
// ファイル選択時にhandleFileSelectを発火
fileInput.addEventListener(‘change’, () => {
// 複数の画像やサイズがmultipleでアップロードされていた場合を想定
for (let i = 0; i < fileInput.files.length; i++) { let file = fileInput.files[i]; // 動画のみ処理を行う。今回はmp4のみ if (file.type === "video/mp4") { let element = d

Chrome DevToolsの”Emulate a focused page”がクソ便利

## “Emulate a focused page”が無効のとき
DevToolsの左上をクリックすると、コンテキストメニューが消える?

## “Emulate a focused page”が有効のとき
DevToolsの左上をクリックしても、コンテキストメニューが消えない?

Chrome拡張機能やTampermonkey作るときに便利そう！

## “Emulate a focused page”を有効にする
`Ctrl + Shift

サイト上の埋め込みyoutubeをPlaylistを使って自動更新

# 概要
クライアントから「youtubeに週1で動画アップしていくから最新のものを自動的にwebサイトに反映させて！」という依頼があったときの対応。

# 要件
主にデザイナーさんからの要望

– iframeで埋め込むとデフォルトのプレイヤーとか見えちゃうから最新動画のサムネイルで隠して！ボタンとかオリジナルのやつ使っておしゃれにしたい。
– サイトでMagnific Popupというプラグインを使用してるからそれを使ってポップアップしてから再生させたい

## 使用プラグイン
– jquery
– YouTube Player API
– Magnific Popup

# 完成系

半角スペースだけの文字列に合致する正規表現

“`javascript
// 1.空白文字のみの入力（全角スペースは許容する）
// 文字列の先頭から末尾まで半角スペースを1回以上繰り返す（=半角スペースだけで構成された文字列）
hankaku = /^\s+?$/

// 訳
^ : 文字列の先頭
\s : 空白文字（半角スペース、タブ、改行文字、改ページ）
+? : 1回以上指定した文字（上記では\s）を繰り返す
$ : 文字列の末尾

// 2.半角スペースのみの入力
// 文字コードがUTF-8の場合、1.では全角スペースも合致してしまうので直接半角スペースを入力する
hankaku_UTF8 = /^ +?$/

“`

【SkyWay】Peerをブラウザのみでマッチングさせる方法(JavaScriptSDK)

作成されたPeer同士を、クライアントサイドのみでマッチングさせる方法を紹介します。

紹介する内容は、偶数番目のPeerが奇数番目のPeerに発信する方法で、Peerが2つ作成されたタイミングでマッチングします。

#接続中のPeerIDを取得する
JavaScriptSDKには接続中のPeerIDを取得するメソッドが用意されています。
`listAllPeers()`を使用することで、SkyWayのサーバからREST APIでPeerID一覧を取得します。
[SkyWayのコンソール](https://console-webrtc-free.ecl.ntt.com/)のPeerID一覧に表示される内容と同じです。

“`javascript:sample.js
peer.listAllPeers((peers) => {
console.log(peers);
});
“`

`Peers`に、作成されたPeerIDが配列で格納されます。
複数実行すると、新しいPeerIDを加えた配列が表示されます。

#偶数番目のPeerが奇数番目のPeerに発信する

`listAll

setTimeoutの中でthis.stateがundefinedになるときの対処法

“`js
console.log(this.state); // 正しく取得できる
setTimeout(function () {
console.log(this.state); // undefined
}, 1000);
“`
# 【結論】thisを確定させる
setTimeout内では、関数の呼び出し元がグローバルオブジェクトになるので、thisを確定させる必要があります。

## .bind(this)を使う

“`js
setTimeout(function () {
console.log(this.state); // 正しく取得できる
}.bind(this), 1000);
“`

## アロー関数を使う

“`js

setTimeout(() => {
console.log(this.state); // 正しく取得できる
}, 1000);
“`

参考文献
https://qiita.com/mejileben/items/69e5facdb60781927929

【Vue.js】methods内で時間のかかる処理をawaitすると変数のビューへの反映が思ったタイミングより遅いことがある

# 起きること

“`vuejs:samplecomponent.vue