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

【個人開発】全国の無料キャンプ場を検索し、欲しい情報を一目見て得られるようなサービスを作りました。

## はじめに
みなさんキャンプはお好きですか？キャンプで焚き火を囲んでいるだけでも心が浄化されますよね。焚き火には「1/f ゆらぎ」と呼ばれる成分が含まれていて化学的にその癒し効果が証明されているそうです。焚き火をしながら「1/f ゆらぎ」の声を持つ宇多田ヒカルの曲を聴き、好きなビールでも飲めば大抵の嫌なことなんて忘れてしまいます。僕は焚き火をするのに無料キャンプ場をよく利用しています。コスパ最強の無料キャンプ場を多くの人に知ってもらいたいと思い、このサービスを作りました。

## サービス概要
CAMPHOOD -無料キャンプ場をもっと身近に利用しよう-
URL: https://www.camphood.net

キャンプに行く前はとにかく情報収集が大事です。僕はいつも下記のようなことをざっと調べていましたが、ま

javaScript91_DOMとイベント

DOMはDocument Object Modelの略称です。
JSはDOMを通してHTMLファイルを操作します。DOMを理解すればWebページを自由に操作することができます。
Document：　一つのHTMLファイル
Object：　HTMLファイルの全ての箇所をObjectに変換したという意味です。
Model：　モデルでオブジェクト間の関係性を表す。ノードが分かればobjectを取得することができる。

Node(ノード）：webページを構成する最も基本的な部分。HTMLタグ、属性、テキストなどは全てノードと言えます。
ノードは下記の４種類に分類されます。
1 documentノード：HTMLファイル
2 要素ノード：HTMLタグ
3 属性ノード：要素の属性（例：id)
4 テキストノード：HTMLタグ内のテキスト
![image.pn

初学者友人「JavaScriptって役に立つの？」わい「ブラウザ設定で無効にっと。ほれ。」→結果…

## 初学者友人との、ある日の会話

友人「なぁ、JavaScriptって本当に役に立つの？」

わい「おぉ。めちゃくちゃ役に立つで。」

友人「ほう。どんなふうに？」

わい「うーん…どんなふうにか…。せや！ブラウザ設定でJavaScriptを無効にっと。ほれウェブサイトみてみ。」

友人「おぉ！！！すげぇぇぇっっっ！！！」

**１枚の絵は千の言葉を語る**

JavaScriptの凄さを知るには、ブラウザ設定でJavaScriptを無効にしてからウェブサイトを閲覧してみましょう。

## この記事に書いてあること
この記事では、ブラウザ設定でJavaScriptを無効にして、ウェブサイトを閲覧したらどうなるのかを書いています。

JavaScriptの凄さを改めて実感してもらい、一人でも多くのフロントエンドエンジニアのモチベーションに繋がればと思います。

なお、JavaScriptをオフにしてウェブサイトを閲覧するというアイデア自体は、２０１９年に書かれた以下の記事を大変参考にさせて頂きつつ、「２０２２年現在ではどうなっているか？」「エンジニアがよく使いそうなサイトではどうなの

「setInterval」一定間隔で繰り返し実行

_コード構文_

“`
setInterval(「関数①」,「秒数」);
“`
この関数setIntervalは
「一定間隔（「秒数毎」）で関数①を呼び出し続ける」
というものです。
実際に例でどういうものかを見ていきます。

_コード例_

“`
function console1(){
console.log(“tagotyan”);
}
setInterval(console1,300);
“`
上記記述は
・コンソールに「tagotyan」という文字列を出力する関数を定義。
・setInterval関数を使用して「関数①」に「console1関数」を、「秒数」に「３００」を記述しています。
・「0.３秒に一回「tagotyan」をコンソールに出力し続ける」という意味になります。
ここでの「３00」は0.３秒、仮に「1000」だと１秒ですね。

次は二次元配列で定義した変数をランダムで呼び出し続ける時の注意点です。

_ランダム変数コード構文_

“`
let 二次元変数名=[[],[]];
let 乱数変数名=Math.floor(Math.random()*(二

Recoilを基礎から理解しよう！(環境構築〜基本編)

この記事は

– Reactで状態管理ツールを使ってみたい。
– でも学習コストが高くて難しそう。

そのように感じている人向けに、Recoilの使い方をまとめたものになっています。
筆者はReduxという類似ツールを使ったことがありますが、**「圧倒的にRecoilは簡単」**だと思っています！
状態管理ツールの選定に迷っている人、`Recoil`の利用を考えてみてはいかがでしょうか！！

#Recoilってなに？
Reactの提供元であるMeta(FaceBook)が開発中の新しい状態管理ライブラリです。
ReduxやReactQueryの立ち位置のライブラリになります！

https://recoiljs.org/

2022年2月時点ではプレリリース状態（v0.6.1）となっていますが、作っているのがReactの生みの親ですので状態管理ライブラリとして標準利用される可能性大だと思っています。

# 実装
それでは早速書いていきましょう！

# まず初めに
Next.jsやRecoilなど必要なライブラリをインストールします。

まず最初に`Next.js`のインストール。

`

JavaScriptで配列の重複を削除する方法

# はじめに
個人で開発しているブログサイトのとある機能にて、JavaScriptで重複を含む複数の数値が格納された配列から、重複を削除する方法が知りたかったので、調べてみたところ、すぐに2つの実装方法が見つかりました。今回は、そちらの方法の紹介に加えて、2つの方法の相違点から、実装にあたって考慮するべき点についてまとめてみました。

# 結論
先にこの記事での結論をお伝えすると、**JavaScriptで重複を削除する際には、基本的に[Setオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set)を使うことをお勧めします。**下で紹介するようなindexOfメソッドとfilterメソッドを用いた方法もありますが、処理の対象となるデータが将来的に大きくなることが予想される場合、計算量の大幅な増大につながるため、処理速度の問題となる可能性があります。下記で実装方法を含めて説明します。

# 1. indexOfとfilterメソッドを使った場合
JavaScript

【MediaPipe】カメラで手の指を検知するゲームを作ってみた

# 概要

## MediaPipeとは？

– Google社が提供するライブストリーミングのためのオープンソースのMLソリューションです
– Android・iOSなどのプラットフォームや、Python・JavaScriptなどの様々な言語で、メディア向けの機械学習を利用できます
– メディア向けというのは顔や手をカメラで認識する仕組みになると思います

## 何を作ったのか？

– 今回は機械学習に関する部分は一切に触れていません
– 既存のJavaScriptの手の検出のサンプルを元に表題のゲームを作成しました
– JavaScriptも素のJavaScriptで作成しています
– タイトルとゲームでそれぞれのHTMLファイルで作成しています

## 作ったゲームのルール

– 赤い枠に人差し指が入ったら点数が加算されます
– 最初のハイスコアは30でスコアがそれ以上になると更新され記録されます

## 参考にした資料とフレームワーク

– MediaPipeの手の認識のサンプル
– https://codepen.io/mediapipe/full/RwGWYJw
–

[JavaScript] プロトタイプチェーンをいじって継承元を変更する

## 環境

– Node.js v16.14.0

## 詳細

JavaScript のプロトタイプチェーンをいじれば人を神（のサブクラス）にすることもできる。

“`js
‘use strict’;

class God {
destroy() {
console.log(‘Destroy!’);
}
}

class Animal {
hunt() {
console.log(‘Hunt!’);
}
}

class Human extends Animal {
hack() {
console.log(‘Hack!’);
}
}

const isAnimal = (target) => target instanceof Animal;
const isHuman = (target) => target instanceof Human;
const isGod = (target) => target instanceof God;

const adam = new Human();

console.log(isAn

ブラウザゲームを作ってみよう(その5:図形表示)

#はじめに
[その4](https://qiita.com/noji505/items/ac21d108add93d2470e6)ではファイル分割を行いました。
今回は図形表示を行いたいと思います。

#図形を表示してみよう
実は既に今までのサンプルで使用していました。
(毎回ループの最初で画面をクリアするときに使用)

ライブラリに以下のメソッドを定義しています。

“`javascript:shape.js
//———————————————————–
// drawRect : 矩形描画
// 引数 : X,Y,幅,高さ,色,透明度
// 戻り値 : 無し
//———————————————————–
function drawRect( x, y, w, h, c, alpha )
{
c = hexToRGB( c ); // 色を16進数へ変換

if( alpha == null ){ // 透明度な

javaScript84_String型オブジェクトのメソッド

String型オブジェクトに関して使用するメソッドをまとめました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/cb8b7a4c-4b24-d8

【JavaScript】Object.deepEquals(仮)

こんにちは。

今回はJavaScriptにおける未解決問題(?)のお話です。

# オブジェクト比較
JavaScriptにおいて、オブジェクト同士の比較は非常に面倒なことのひとつです。

割と有名な話なので、いくつかのパターンをざっとおさらいすると…

“`js:Abstract-Equal
const o1 = {};
const o2 = {};

o1 == o2; // true
“`
どちらも `object` 型なので、中身のプロパティが何であれ `true` と解釈されます。

“`js:Strict-Equal
const o1 = {};
const o2 = {};

o1 === o2; // false
“`
それぞれ別インスタンスなので、中身のプロパティが何であれ `false` と解釈されます。

“`js:for-in
const o1 = {};
const o2 = {};

for(const key in o1){
if(o1[key] !== o2[key]){
throw “Not equal”;

Null合体演算子(?:とか??)を使うときは優先順位に気をつけろ

早速ですがこのコードをご覧ください。

“`kotlin
fun main() {
val tmp1: Int? = 0
val tmp2: Int = 1
println(tmp1 ?: 0 + tmp2)
}
“`
`1`が表示されると思った方はお気をつけください。実際に出力されるのは`0`です。
`0`だと思った方はもうすでにNull合体演算子と優先順位をマスターしているので、このままそっとブラウザバックしてください。
## なぜ 0 と表示されるのか
至極単純な理由で`?:`は`+`より優先順位が低いため`tmp1 ?: 0 + tmp2`は`tmp1 ?: (0 + tmp2)`と解釈され最終的に`0 ?: 1`というふうになるため`0`が出力されるのです。
ちなみにKotlinだけでなくC#やJavaScript（というかほとんどの言語？）でも同じで

“`C#
int? tmp1 = 0;
int tmp2 = 1;
System.Console.WriteLine(tmp1 ?? 0 + tmp2);
“`
“`javascript
c

Node.jsのworker_threadsモジュール（スレッドプール）

# はじめに
node.jsでマルチスレッドを実現するworker_threadsについて、実例を交えて説明します。

# 参考
– ハンズオンNode.js

https://github.com/oreilly-japan/hands-on-nodejs/blob/master/ch04/samples.txt

# worker_threadsモジュール

例として、http\://localhost:3000/10へのアクセスに対して10番目のフィボナッチ数を返すような簡易Webアプリケーションを構築していきます。
パフォーマンスを担保するために生成するスレッドをプールして使い回すような仕組みにしたいです。
以下の３ファイルで実現できます。

~~~thread-pool.js
‘use strict’
const { Worker } = require(‘worker_threads’)

module.exports = class ThreadPool {
// 空きスレッド、キューを初期化
availableWorkers = []
queue = []

骨までしゃぶりつくす「ぷよぷよプログラミング」(4/4）

# この記事の目的
　この記事ではソースコードを読んで冗長そうであったり、間違いがあるのではないか、と感じた点を記述していきます。初回に述べた目的の内容からは外れた番外編的な内容となります。

初回

https://qiita.com/KennyKTA/items/360aa62aa7f7ba084a2f

## おそらく不要なコード

“`pyuyoimage.js
this.batankyuImage.style.top = -this.batankyuImage.height + ‘px’;
“`
目的はthis.batankyuImage.style.topの初期化に見えるのですが、this.batankyuImage.heightがundefinedです。実行時はundefinedが適当な数値となって動作はするようです。

ちなみに後のコードで

“`puyoimage.js
this.batankyuImage.style.top = y + ‘px’;
“`

とあり、ここで正常な値が上書きされる形でプログラムの動作が担保されているように見えます。

## お

骨までしゃぶりつくす「ぷよぷよプログラミング」(3/4)

# この記事の目的
　この記事では[前々回記事](https://qiita.com/KennyKTA/items/360aa62aa7f7ba084a2f)の

– 目的1.「ぷよぷよプログラミング」で作成していく範囲のソースコードから javascript と html の技術を学んでいく

に沿ってソースコードを読み込んだ結果を記述しようと思います。記載する項目は私が学びがあったと感じたものだけで、すべての文法などを解説するものではありませんん。下に言及する項目の一覧を示します。

1. HTML
– 全般
– `

`

1. Javascript ( ECMA Script )
– 全般
– クラスと静的プロパティ／静的メソッドと this
– return の仕様
– 定義されていない配列要素へのアクセス
– オペランド ||
– オペランド &&
– キーコード

1. Document Object Model ( DOM )
– 全般

【JavaScript】Promiseと非同期処理について

こんばんは。今回はJavaScriptの非同期処理について書いていきます。

##非同期処理とは？
非同期処理とは、ある処理を実行をしている際に、他のタスクが別の処理を実行できる方式をいいます。
DBから値をとってくるなど、他の処理と比べて時間がかかる処理があった場合、この非同期処理の仕組みがないと、DBから値をとってくる処理が終わるまで待っていなければなりません。
非同期処理の場合、DBから値をとってくる処理を行ってるとき、別のイベントが発生すると、一旦DB処理を中断してそのイベントを処理します。そしてまたDB処理を再開します。

しかし非同期処理にも不便な点があります。例えばDBから値を取得し、そのデータをreturnする関数があったとします。普通にこの関数を実行すると、DBから値を取得する処理が行われている間にreturnが実行され、正常に値が返されなくなってしまいます。
そのような問題を解決するための方法はいくつかありますが、今回はPromiseを使った方法をご紹介します。

##非同期処理を順番に実行する
非同期処理を順番に実行する場合、Promiseを使うと便利です。

You must `await server.start()` before calling `server.applyMiddleware()`の解決方法

## 概要

– Apollo serverのチュートリアルでつまづいたので共有
– 結論、バグっぽいのでダウングレードする or コードを書き直す
– 公式のissue(https://github.com/nestjs/graphql/issues/1621#issuecomment-878474079) で報告されている

### 環境
– macOS Monterey: 12.2.1
– “apollo-server-express”: “^3.6.3”,
– “express”: “^4.17.3”,
– “graphql”: “^16.3.0”,

##　試したコード
““javascript:index.js
const express = require(‘express’);
const { ApolloServer, gql } = require(‘apollo-server-express’);

// Construct a schema, using GraphQL schema language
const typeDefs = gql`

JavaScript83_基本データ型の変換

ここで基本データ型を参照データ型Objectに変換するための方法を紹介する。

基本データ型は下記の５種類があります：
String Number Boolean Null Undefined
参照データ型
Object

JSは３つの構造関数を用意してくれた。それらを使うことで、基本データ型をObjectに変換することができる。
1 String()
String型データをString型のObjectに変換することができる
2 Number()
　Number型データをNumber型のObjectに変換することができる
3 Boolean()
　Boolean型データをBoolean型のObjectに変換することができる

例：Number型の対象を作る

Objectデータ型の機能は基本データ型より多く、使いやすいです。
![image

javaScript82_Math

Mathは構造関数ではない。
Mathはツールに属し、中には数学に関する計算方法と属性などが入っています。
そのため、Mathを使う時に、新しいオブジェクトを作る必要はありません。
直接使うことができます。
注意：大文字で書いた属性は全部変わらない値です。例：PI
console.log(Math.PI);

abs()は数値の絶対値を計算することができる。
console.log(Math.abs(-1));
結果は１になります。

Math.ceil()
Math.floor()
Math.roun

つぶやきProcessing用に書かれた Processing・p5.js のプログラム（対象2つ）を p5.js で書きかえてみる

## はじめに

タイトル通りの内容で、「つぶやきProcessing（Twitter の制限文字数内で動くプログラムを書くもの）」のために書かれた「Processing のプログラムと、それとは別の p5.js のプログラム」を、それぞれ p5.js用に書きかえたという話です。
「p5.js を p5.js で書きかえる？」と思われたかもしれませんが、これは「つぶやきProcessing用に短く書ける記法が用いられているものを、短縮版でない記法に展開する」という内容になります。

書きかえには以下の 3つの観点があり、今回の書きかえ対象の 2つのうち、一方は「主に 1 の観点での書きかえをしていて」、「もう1つは、以下の 2・3 の 2つの観点での書きかえ」という形になります。

1） Processing と p5.js とで文法が異なる部分を書きかえる
2） つぶやきProcessing用に短く書ける記法が用いられている部分を展開する
3） その他の書きかえ

なそ、書きかえ版は、普段よく利用している「[p5.js Web Editor](
https://editor.p5js