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

【Vue・JS】！(否定)で真偽値を返す際の注意点。式はカッコで囲む。

Vueのif文で`！`を使う際に思った挙動にならなかったので注意点のメモ。

##!（否定）の注意点
if文の式の頭で`！`を使う時は、**式をカッコで囲む**。

例：配列arrの要素数が1以外の場合は処理を実行する場合。

“`js:OK
if(!(this.arr.length == 1)){
処理
}
“`

“`js:NG
if(!this.arr.length == 1){
処理
}
“`

##NG内容
上記NG事例のようにカッコで囲まないと、!this.arr.lengthの値が１かどうかを判定することになる。

0, null, undefinedはfalseとみなされるため、配列arrの要素数が空（または0、null、undefined）の時以外、`!this.arr.length`はfalseとなる。

よって、１以外で処理実行したいところが、0のみで処理実行で、１以上は処理実行しない結果となる。

“`js:例
arr = [1,2,3]

console.log(!arr.length)

JavaScript 関数の代入でつまづいたこと

#JavaScript 関数の代入でつまづいたこと

最近学校でAjaxとかSevletでWebアプリを作るプロジェクトが始まったので自分でも色々勉強してみる。

###【問題】getElemenByIdでnullしか返ってこない

“`index.html

“`

“`inde

ml5.jsのSoundClassifier呼び出しエラー対処メモ

# ml5.jsのSoundClassifier呼び出しエラー
SoundClassifierを使おうとしているが、Javascriptのエラー。。
よく分からないので知見を持っている方に伺いました。


# ソースの修正点
エラーのソースと正しいソース両方のせましたが、引数のvideoがいらなかったです。
ImageClassifierのソースをコピーして使いまわして実施していたので、取っていなかったことが原因でした。

## エラーのソース
“`javascript
// 自作モデルのロード
classifier = ml5.soundClassifier(imageModelURL + ‘model.json’, video, () => {
// ロード完了
app.modelState = ‘ロー

[初心者向け] イメージで覚えるデータ構造：配列 Array編

## 前書き

データ構造ってたくさんあって覚えるの大変ですよね．僕も勉強した直後はいいんですがある程度日数が経つと忘れてしまい -> また勉強し直す，の繰り返しでした．

その過程のうち効果的だったのが，タイトルにもある通り絵や図で特徴を覚える方法でした．

データ構造ってかなり抽象的な内容だと思います．コンピューターのメモリの中身を実際に見る機会なんて少ないので学んだデータ構造が本当にどのように振る舞っているのかなかなか確認しづらいのが，定着率が低い原因だと思いました．

そこで，この記事では簡単かつ具体的な図で各構造を表す（つもり）ことで大学で情報工学専攻じゃ無い人も，プログラミング初心者でも事前知識無しでデータ構造の特徴を覚えることができるのでは，と期待しつつ，自分へのメモ書きも含めて記事を書きました．

データ構造を学ぶ目的としては完全に構造を暗記するのではなく，それぞれの構造の良いところと欠点を知ることで，自分の開発目的にあった効率の良い構造を選べるようになることだと思います．というわけでこの記事の内容も丸暗記するというよりは，配列ってこんな良いところ，欠点がある

単純に比べるHOC, Render prop, Hooks

# はじめに

Reactでロジックを共通化してビューだけを外から与える手法を調べていました。

公式の例を見ていましたが、やや複雑で発展的に感じたので、
単純な同じ例を使ってHOC, Render prop, Hooksを比較してみました。

# 題材

カウンターアプリとします。

“`jsx
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { value: 0 };
this.add = this.add.bind(this);
this.reset = this.reset.bind(this);
}

add() {
this.setState({ value: this.state.value + 1 });
}

reset() {
this.setState({ value: 0 });
}

render() {
return (

【Electron】HTML/CSS/JavaScript でデスクトップアプリを作った【インストールから exe 化まで】

# HTML/CSS/JavaScript でデスクトップアプリを作りたかった
こんにちは、ndj です。
今までデスクトップアプリ作成には `Python` の `tkinter` ライブラリしか使用したことがなかったのですが、
ボタンやラベルの配置など結構独特で難しいなあという印象がありました。
今回は HTML/CSS/JavaScript などのいわゆる Web 関連の技術でデスクトップアプリケーションを作成することができる `Electron` という `JavaScript` のフレームワークを使用して、超簡易的なアプリケーションを作成してみました。

※本記事内の `Electron` および関連パッケージのインストール方法、パッケージ化などのセクションについては `Windows` 向けです。

## 使用環境

– OS: Windows10 Pro 64bit
– Node.js: v10.18.0
– npm: 6.13.4
– Electron: v10.1.5
– Electron Builder: v22.9.1

## Electron とは
>Elect

【JavaScript】碁盤の目状に並べた複数の配列の縦・横を入れ替える

# そもそも何をしたいのか
言葉では説明しづらいので以下をご覧ください。

まず下記のコードを実行すると…

“`JavaScript:JavaScript
const createGrid = num => {
const serialNumArr = Array.from(new Array(num).keys());
return serialNumArr.map(v1 => serialNumArr.map(v2 => ++v2 + v1 * num));
};

const grid = createGrid(5);
“`

以下のような5つの連番を値に持つ配列を5つ格納した配列、`grid`が作成されます。

（画像1）
[](https://gyazo.com/05affae2385b5103a99a61dca6e69e5e)
これの縦と横の中身を入れ替えて、以下のようにしたいとします。
（※そもそも配列

娘に会えない日も自分の声で絵本を読み聞かせられるようにした。機械学習入門。

#娘も私も絵本の読み聞かせは毎日欠かせない
もうすぐ2歳になる娘は絵本を読んでもらうことが好きで、寝る前に必ず自分で選んだ絵本を持ってくる。仕事で娘に会えない日も、自分の声で読み聞かせてあげることができれば、明日も私を指名して絵本を持ってきてくれるかもしれない。娘のお気に入りの絵本を機械学習が判断し、読み聞かせの音声を再生するWebアプリケーションを作った。

家にいない日も、娘に自分の声で読み聞かせできるようにした。#protoout #機械学習

React (JavaScript) で湯婆婆を実装してみる

##はじめに
原作者様: [Javaで湯婆婆を実装してみる – Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)

この壮大なビッグウェーブならぬビッグ湯婆婆に乗るっきゃない！

##コード

“`html:index.html

【webpack】webpack設定を一からまとめてみる①

## webpackとは
フロントエンド開発におけるオープンソースのモジュールバンドラーである。
ここで言うモジュールとは、JavascriptやCSS、画像などのファイルを示し、モジュールバンドラーとはこれらのファイルをまとめる役割を持つ。現在の最新はバージョン5となっている。
webpackを利用するメリット
・自動でファイルの依存関係を解決してくれる
・リソースをコンパクトにしてくれる
・ローダーや各種プラグインを導入する事でデフォルトの設定を上書きし、機能を拡張する事が出来る

## 導入方法
####①Node.jsをインストールする
webpackはNode.jsで動かす為、最初にインストールしておく。
####②フロントエンドパッケージを初期化
Node.js上で動かすモジュールの管理

DBSCANのJavaScriptによる実装

# はじめに

「[色々な機械学習処理をブラウザ上で試せるサイトを作った](https://qiita.com/norimy/items/669c19ecf2256b3ecae5)」中で実装したモデルの解説の五回目です。

今回はDBSCANの実装についてです。

デモは[こちら](https://ai-on-browser.github.io/)から。（TaskをClusteringにして、ModelのDBSCANを選択）
実際のコードは[dbscan.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/dbscan.js)にあります。

なお、可視化部分については一切触れません。

# 概説

[Wikipedia](https://ja.wikipedia.org/wiki/DBSCAN)の擬似コードをそのままコードに起こしただけとなります。
なので、解説することがありません。

コード中の`getNeighbors`が、上記の擬似コードの`regionQuery`となります

reduce関数完全に理解した

**reduce 関数**って使ってますか？

JavaScript の数ある配列操作の中で最もよくわからん奴・・・じゃないですか？

私はなんとなく、単に合計を求めたりする為のものだと思ってました

でも実際使ってみるとかなり便利だったので、皆さんにも完全に理解してもらうべく立ち上がりました

気分はスーパーヒーローです

※ この記事はレジェンドオブトゥモローシーズン 2 を見ながら書いたので少しだけヒーロー成分が入っています

## reduce 関数って？

MDN の例文を少しわかりやすく書いています

“`
array.reduce( ( previousValue, currentValue[, currentIndex[, originalArray]] ) { //callbackFunction
// return result from executing something for accumulator or currentValue
}
[, initialValue]);
“`

いやわかりにくい！

1 つ 1 つ説明します

## 第一引数 ：

JSエコシステムぶらり探訪(5): CommonJSモジュールバンドラー

[←前](https://qiita.com/qnighy/items/faddc72389f6c94421e1) [目次](https://qiita.com/qnighy/items/16fdd8e58309a1f706a0)

## モジュールバンドラーとは

前3回までで説明したNode.jsのモジュールシステムとnpmのパッケージシステムは、再利用可能なJavaScriptプログラムを作り、配布し、利用する仕組みとして非常によくできたものでした。そのため、この**Node.jsのモジュールシステムをブラウザでも利用したい**という需要が生じることになりました。正確には以下の2つの需要がありました。

– Node.js用に書いたプログラムをブラウザでも再利用したい。
– 純粋にブラウザ向けのJavaScriptコードでも、モジュールシステムやパッケージシステムを使いたい。

これらの願いを同時に叶えるべく、Browserifyをはじめとした**モジュールバンドラー**というツールが開発されました。モジュールバンドラーは複数のJavaScriptモジュールを結合し、ひとつのJa

ハッカーっぽいやつ作ってみた ～ コーディングを記録して動画風に再生する

# はじめに
いつもの通り作りっぱなしなので、バグってるかもしれません。

# デモ用

See the Pen
CodingDemo by kob58im (@kob

【JavaScript】日時の表示

#プログラミング勉強日記
2020年11月8日
日時表示の方法をコードでまとめる。

#コード
“`script.js

//データオブジェクトの初期化
const now = new Date();

//現在の年を取得
const year = now.getFullYear();

//現在の月を取得(月は0-11で表す)
const month = now.getMonth();

//現在の日付を取得
const date = now.getDate();

//現在の時間を取得
const hour = now.getHours();

//現在の分を取得
const min = now.getMinutes();

//『年/月/日 時間：分』の形で文字列を定数outputに代入
const output = `${year + 1900}/${month + 1 }/${date} ${hour}:${min}`;

//id属性がtimeのコンテンツをoutputに書き換える
document.getElementById(‘time’).textContent =

初学者向け JavaScript 問題集

##JavasSriptの問題作ってみました
#####わかりずらい可能性大?‍♂️

###問題1
初期値として**Japanese**を設定“const word = wordFactory(‘Japanese’);“
“createメソッド“を実行すると以下のようにコンソールに出力されます。

“word.create(‘English’);“
出力結果 **”Japanese + English = Japanglish”**

以上のようなメソッドを持ったオブジェクトを**クロージャー**を用いて作成してください。

実行したいときは“index.html“を作成してください

“`index.html

LaravelとjQueryで非同期処理で実装するいいね機能を世界一わかりやすく解説してみたい

#やりたいこと
ジャズライブの口コミを投稿できるサイトをチームで制作しています。
今回は、ユーザーの投稿にいいねをできる機能を実装したいです。結構苦労したので、初心者だけど、いや初心者だからこそ日本一わかりやすくメモを残しておきたいと思います。ご指摘などありましたら、ぜひ容赦無くよろしくお願いします。

Laravel 7です。

###仕様
1. ハートボタンとカウンターで構成する
* 各投稿が合計いくつのいいねを集めているかが表示される
* 下記行動ができるのはログインしているユーザーのみ
* いいねボタンが押されたらスタイルをピンクにし、いいねカウントの数字を１増やす
* もう一度押されたらスタイルと数字を元に戻す
* あるユーザーが１つの投稿に対していいねが押せるのは１回のみ
* 自分がいいねした投稿は常にピンクになっている

###実装前のプログラムの挙動に関する疑問…
* どの時点でサーバー側にリクエストを出せばいい？（非同期処理だとしたら、イベントが発生した直後？）
* 非同期処理だとしたら、何回も押されたらその都度リクエストを出してサーバーと通信するのか？？
* 誰

小規模なテキストエディタを実装しながらプログラミングとUnit testを学んでみよう

# [kilo-editor](https://github.com/freddiefujiwara/kilo-editor)とは
## これはなに
これは、[kilo](https://github.com/snaptoken/kilo-src)をベースにして
非常に小規模なテキストエディタを実装しながら、個人的にテキストエディタの実装を学んだり、
jestを使ったテスト駆動開発の勉強のために作りました。

– [kilo-editor](https://www.npmjs.com/package/kilo-editor)[](https://badge.fury.io/js/kilo-editor)

また、本家はc言語で開発されていましたが、私が慣れているnodejsで実装しました。

## なんでこんなものをつくったの
きっかけとしては　[Build Your Own Text Editor](https://viewsourcecode.org/snaptoken

0から始めるPromise(javascript)

Promiseとかthenが何をやっているのか全くわからない人向けの記事。
イラストを使って説明しているのでこれを読めば「こういう事やっているのか!」と理解できるレベルになると思います。
本題に入る前に同期処理と非同期処理の違いについて説明します。

## 同期処理ついて
超ざっくり説明すると上から順番に処理してくれるのが**同期処理**
例えば来店から完食までをconsole.logで表す同期処理は下記になる

**同期処理の例**

“`javascript
console.log(“来店”);
console.log(“ラーメン注文”);
console.log(“待機中”);
console.log(“ラーメンお待ち!”);
console.log(“食事中”);
console.log(“御馳走様でした”);
“`

## 非同期処理ついて
例えばタイムラグを発生して来店から完食までをconsole.log表したいとする。
今回の例は下記のように表示させたいとする。
>・画面読み込みから3秒後に「来店」
・上記の2秒後に「ラーメン注文」
・上記の1秒後に「待機中」
・上記

JavaScript: 配列の直積を返すジェネレータを作ってみた

[前の記事](https://qiita.com/ttatsf/items/a98719ad9e1f72ddecca)のついでにやってみた。
多重ループとかの時に便利そう。

“`js:
// 直積を返すジェネレータの内部再帰関数
const innerProdG = selected => (xs, …xss) => function*(){
if (xs === undefined ) {
yield selected
return
}
for (const x of xs) yield* innerProdG( […selected, x] )( …xss )
}()

// 複数の配列をとって直積を返すジェネレータ
const prodG =
innerProdG([])

// 使用例：
const a = [0, 1]
const b = [2, 3]
const c = [4, 5]

for(const e of prodG(a, b, c)) console.log(e)
/*
[ 0, 2, 4 ]
[ 0,