f@ctor

JavaScript関連のことを調べてみた2020年11月03日

JavaScript関連のことを調べてみた2020年11月03日
目次

【Vue.js】リアクティブで動作しない時の対処法

#最初に
下記サイトのVue.jsのガイドに従って、進めていたところリアクティブが動作しなかったので調査開始。
[Vue.jsのガイド](https://jp.vuejs.org/v2/guide/)
#エラーメッセージ
Live Reload is not possible without body or head tag.
どうやらボディタグかヘッドタグがないためリロードが動かないっぽい。
#解決策

{{ message }}



ボディタグで囲ってみたところ、無事リアクティブが動作した。

元記事を表示

JavaScript オブジェクトのメンバ名一覧に「Object.keys( obj )」を使うのは古いらしい

JavaScript メモ

オブジェクトのメンバ名一覧表示するコード

“`JS
const obj = {
hu: 0,
ji: 1,
ko: 2,
lp: 3
}

// 少し前の記憶だと、オブジェクトのメンバ一覧は、こう書いていた、、、
for ( const k of Object.keys( obj ) )
console.log( k )

// いつのまにか、以下のように in で短く書けるようになっていた、、、
for ( const k in obj )
console.log( k )
“`

すなわち、`Object.keys( obj )`の出番は無くなった、ということ。

いつのまに。

ってか、なんでわざわざ`Object.keys( obj )`を使っていたんだろう？？　for-in って、サポートされたのいつだっけ？

知らなかった。また、ひとつ賢くなった。

そういえば、`forEach()` も使わなくなったよね。

追記：
「いや、for-in のほうが古いよ」 というコメントをいただき、調べてみたら、たしかに

元記事を表示

森田賢二さんのJavascript練習問題集を解いてみた Act.1

この記事はエンジニア芸人の森田賢二さんが作成した[Javascript練習問題集](https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d)を解く過程における気付きや学びを記録したものである。

問１
[Object.assign](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)について問うた問題。

“`
Object.assign(target, …sources)

// 別解
const c = {…a, …b}
// このようにスプレッド構文を使うことによっても、マージ可能。どちらもshallow copyである。
“`

### To Do
・ 戻り値はtargetオブジェクトってどういうことかを理解する
・ prototypeとは何かを理解する

ではまた〜

元記事を表示

var,let,constの違い

[JavaScriptで書く「var,let,const」の違いと使い分け方法](https://techacademy.jp/magazine/14872)
[JavaScript:基本だけど重要！変数を var で宣言した場合としない場合の違い](https://www.sirochro.com/note/js-var-different/)

元記事を表示

【2020年10月版】 OpenCV.jsのビルド方法 + 最大メモリを上げる方法

OpenCV.jsのビルド方法はいろいろな方がビルドしてみたで書かれていますが、Emscriptenの最新バージョンでのバグなどもあり意外とはまりどころが多かったので記録として残しておきます。

後、OpenCV.jsが確保できる最大メモリはデフォルトで1GBですが、動画解析などでどうしてもそれ以上必要といった場合に使用可能なメモリを増やす方法を記載します。

# 手順

* Emscriptenのインストール
* OpenCVのクローン
* ビルド

# Emscriptenのインストール

基本的な内容は以前書いた記事と同じなので、まず下記を参照してください。

https://qiita.com/wjs_fxf/items/2a3c4845912cc0a1a2e7

上ではEmscriptenのバージョンを**latest**でインストールしていたと思いますが、Emscriptenのバージョンが**2.0.5**以上だとOpenCV.jsのビルドに失敗するようで、**latest**が現在**2.0.9**を指しているためビルドできません。

latestと記載されている箇所を次

元記事を表示

C#とjavascriptで乱数系列を共有したいんだが…（XorShiftを題材として）

# 端的に言ってしまうと…

javascriptでUInt32な数値を扱いたかったんです
ん？
いや、とっ掛かりはやはり`XorShift`な訳で、ある乱数列にデータを重畳してプログラム間で受け渡ししたいな、と
まぁその様に思った次第です

でも今回のプログラム間、ってのが`C# ⇔ javascript`なんです
ここで問題になるのが`javascript`の乱数は`seed`を必要としません、ってか「受け付けません」
それでは乱数列の共有など出来るハズもありませんから、何か`seed`を指定できる簡便な乱数発生器はないかな？

と思って行き当たったのが`XorShift`なんです

# XorShift

これはググって頂ければすぐ分かりますが、すんごい軽量ながら`seed`を元に結構ガチな乱数列を捻り出してくれる（らしい）疑似乱数発生器です

おーっ！
こいつぁ御誂え向き…

なんて思ったのも束の間
そこそこの周期を期待するなら、`unsigned int`な数値を扱える必要があるぅ？

いやいやいやー
御冗談を
`javascript`の扱える数値に型なんて概念ありま

元記事を表示

[メモ] JavaScript プロトタイプとクラスを学んでTodoリストを作った

ミス等有りましたらご助言いただけますと幸いです。
#コンストラクタ
オブジェクトを生成するには、 `{}`のようなオブジェクト初期化子を使用するか、コンストラクタ関数を用いる。
コンストラクタ関数はオブジェクトの雛形(種類)を定義する。
定義したら、new を用いてそのオブジェクトのインスタンスを作成する。

“`js:app
function Task(name) {
this.name = name;
this.isDone = false;
}
const task = new Task(‘a’);
“`

[参考](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function)

#プロトタイプ
オブジェクトは`prototype`オブジェクトという特別なプロパティを持っている。
コンストラクタ関数と併せて使用し、インスタンス化した際に`__proto__`に`prototype`の参照がコピーされる。

“`

元記事を表示

‘v-slot’ directive doesn’t support any modifierとエラーが出たときの対処方法。

Nuxtを利用していると、プロジェクトの立ち上げ時に、ESLintというLintingツールをいれると、
v-slotで書いたとき部分に下記のようなエラーが出た。

“`
‘v-slot’ directive doesn’t support any modifier
“`

実際に実行したかったコードはこれ↓。

“`Vue.js