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

Three.jsで目指せ60FPS : ジオメトリ結合編

## はじめに

この記事は、three.jsにおけるジオメトリ結合の

– 描画負荷に対する影響
– モデルデータの結合方法
– 結合したジオメトリの制限と回避方法

の3点を共有するためのものです。

### 想定する環境

– Google Chrome 102.0.5005.61
– three.js r141

お手元のthree.jsのバージョンを確認してからお読みください。バージョンが異なる場合、記事の内容が適用できない場合があります。

### 想定する読者

– three.jsを使ったことがある。
– WebGLを直接書いたことはない。
– 画面描画の負荷に不満があるが、どのように改善すればいいかわからない。

この記事では、three.jsのインストール方法は取り扱いません。あらかじめご承知ください。

## ドローコールの数と描画負荷の変化

### デモ

まずはデモをご覧ください。画像をクリックすると、それぞれのデモページに遷移します。

#### ▼ デモ A : ジオメトリを結合していないデモ

::: note aler

JavaScriptのデバックにはdebugger文を使おう

JavaScript初心者のため、デバック力がまだまだ拙くどうしたらデバック力ってつくのだ…と悩んでいたら

?‍? < スタックトレースするといいよ！ ?‍? < スタックトレースするには`debugger`とか`console.trace()`使うといいよ！ と教えていただきdebuggerを使ったらとても便利だったので? ### スタックトレースとは > スタックトレース (stack trace)とは
>
> エラーが発生したときに表示される内容で、そのエラーが発生するまでの過程（どんな処理がどの順番で呼び出されたかの流れ）を、ざっくりと表示したものです。
>
> [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word13281.html)

### スタックトレースを使って問題をどう切り分けるか
まずは問題が起きている箇所のスコープを狭くしていきましょう?

問題の切り分け方として
– ざっくり入口と出口の関数に適切な値が入っているのか
– 外れ値の場合はどうか
– 意図していない値が入ったとき

【Angularアプリケーション開発 #6】複数データを表示させる

なんちゃってMockファイルを作成して、複数データをhtmlで扱う方法を学びます。

– Mockファイルを作成しましょう。
外部から参照できるようにexportの宣言を忘れずに！
“`typescript:mock-member.ts
import { Member } from ‘./member’

export const MEMBER:Member[] = [
{id:’1′,name:’daisuke’},
{id:’2′,name:’masato’},
{id:’3′,name:’takeshi’},
{id:’4′,name:’shiji’}
];
“`
– コンポーネントからMockファイルのデータを参照できるようにします。
– MEMBERをimportします。
– `members`という変数にMEMBERの代入しています。
※onSelectメソッドは今回関係ありません。（気にしないでください）
“`typescript:members.component.ts
import { Component, OnInit } from ‘

TypeScriptでワーカースレッド（Web Worker）を手軽に、そして型安全に使いたい

## ことの発端

Webブラウザで動作する `javascript` で [Web Wroker](https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API) の存在は知っていたのですが、ワーカースレッドで動作するコードは別ファイルにする必要があるという認識で、今まで「何とかならんかなぁ？」と思いながら過ごしていました。
で、つい最近 [PapaParse](https://www.papaparse.com/) を使用する機会があって、この `PapaParse` がワーカースレッドで動作させることができるので、これは良い機会と興味本位でスレッドで動くべき `javascript` ファイルはどこで読み込まれるのかを Webブラウザのネットワークログを見て観測していたら、`Blob URL` で読み込んでいました。

「なんですと！」

そこで、もうちょい調べてみると、こんな記事が！！！

https://stackoverflow.com/questions/5408406/web-workers-without-

【React】Webpackの設定で3種類のエラーが出たから原因と解決方法をここに記す

# 目次
[1.動作環境](#1-動作環境)
[2.バンドルしたファイル](#2-バンドルしたファイル)
[3.バンドル成功時のWebpackの設定](#3-バンドル成功時のwebpackの設定)
[4.上記のコードになるまでに出たエラー文と原因と解決方法](#4-上記のコードになるまでに出たエラー文と原因と解決方法)
[1.はじめに](#1-はじめに)

# 1. 動作環境
Windows10
React 18.1.0
Webpack5
npm 8.5.5 (←2022年3月22日に公開されたバージョン)

# 2. バンドルしたファイル
今回Webpackでindex.jsを起点に2つのcssファイル、4つのjsファイルを辿って計6つのファイルをバンドルしました。


# 3. バンドル成功時のWebpa

npmコマンドまとめ

## はじめに
取りあえず使うのってこれくらい？
他につかたいコマンドがあれば都度調べるなり、付け足して使うなりしてください

## ローカル
**npmを初期化**
`npm init` `npm init -y`
**install**
`npm install `
**localのcommandを呼び出す**
`./node_modules/.bin/コマンド`
**簡単に呼び出す**
`npx コマンド`
**packageをdevDependenciesに記録する**
`npm install –save-dev `
**uninstall**
`npm uninstall `
**dependenciesも消す**
`npm uninstall –save `
**devDependenciesも消す**
`npm uninstall –save-dev `
**install済みのpackageを表示**
`npm list`

**特質事項**
過去のnpmのversion`

【まとめ】npm install と npm audit とnpm-check-updates

## npm install の概要

npm install を実行すると、 package.json に記載しバージョンのパッケージと、
そのパッケージを使用するために必要な関連モジュールをまとめてインストールしてくれる。

なお、この際にpackage-lock.jsonが自動作成され、
実際にインストールされたパッケージや関連モジュールのバージョン等が記載される。

次回以降に npm install を実行した場合、package.json ではなく package-lock.jsonを元にインストールが実行される。
package-lock.jsonの存在意義としては、チームで開発する場合などに関連モジュールのバージョンまで揃えられる、という点が主かと思われる。
そのあたり下記記事様がわかりやすく解説してくださってます。

https://qiita.com/sasao3/items/b794c1e44715bb6f834f

## パッケージのセキュリティに問題がある場合

上記 npm install でインストールしたパッケージやモジュールのセキュリティに問題がある場

なぜ !1 なのか？

プロジェクトの古いソースコードを眺めていると次のような記述があった。

“`javascript
{
hoge: !1
}
“`

`!1` ！？！？

そのコードを見た時、正直笑いました。
なんでそうなるの？？って。

そして理由を考えてみたのです。
かのプログラマーがそう書かないといけなかった理由を……。

### 推測① 短くしたかった

まっさきに思いついたのがこれです。
`false` ５文字に対して、 `!1` ２文字ですからね。

わからなくない。
わからなくはないんだけど……なぜ！　なぜ `0` にしない。
１文字いけただろ！

底妥協すんなよ！！

ということで、この推測は却下しました。

### 推測② 俺JSに詳しいんだぜって言いたかった

ほら、あるじゃないっすか！
三項演算子覚えたプログラマーが、やたらめったら三項演算子使っちゃうやつ。
めっちゃ見にくいからやめれ！！！

って感じで、 `JavaScript` の `1` が `true` として評価されるのを覚えた人が書いた、と。

これは普通にありそうだ。
……でもなぜ `0` にしない！！　

ヘッダ固定テーブル(縦横スクロール)（むりやり）

## DEMO
codepen

## イメージ
そのままの状態 |上や左が固定
–|–
|

## 気にしたこと
– position sticky だと作れなかった。
– 上や左を固定で置くために、tableを複数個置いた。
– HTML的には、いいコードではないけど、見た目重視。
– jQueryを使わない。

タグ付きテンプレートリテラルを理解したい

## はじめに

MDNによると、

>テンプレートリテラルは非公式にテンプレート文字列と呼ばれることもありますが、文字列リテラルではないので、文字列リテラルが使えるところならばどこでも使えるわけではありません。

恥ずかしながら、文字列リテラルだと思ってました。
MDN読んでると日々新しい発見があって面白いです。

## テンプレートリテラルのおさらい

文字列リテラルは、シングルクォートとダブルクォートで文字列を囲みますが、
テンプレートリテラルは、バッククォートで囲みます。

通常の文字列リテラルと違うのは主に2点。

:::note
1.改行できる。
2.プレースホルダーを含めることができる。
:::

## 改行について

“`TypeScript
// 文字列リテラル
const hoge: string = “Hello, \nworld!”;
console.log(hoge);

// テンプレートリテラル
const huga: string = `Hello,
world!`;
console.log(huga);
“`

結果

“`
Hello,
wo

タッチとスクロールを判別する

“`
$(‘.link’).on(‘touchend click’, function(){
//処理…
});
“`

スクロール領域の内部全体にtouchendおよびclickイベントを設定した要素を置くと、タッチデバイスでのスクロール動作が、内部に対するtouchendイベントとして認識されてしまう。

##### 【候補1】windowオブジェクトによるタッチイベント対応判別
**有効ではない。** 近年タッチイベント対応かつマウス操作もできるデバイスが登場したので、イベント自体発火しなくなるおそれがある。

##### 【候補2】scrollイベントによるフラグ管理
**有効ではない。** scrollイベントが発火する前にtouchstartイベントが発火するためか誤動作の抑止にはつながらなかった。

##### 【候補3】そもそもtouchイベントを使わず、metaタグ（name=”viewport”）にuser-scalable=noを設定して遅延を解消する
**有効…だけど微妙。** user-scalable=noは画面の拡大・縮小を禁止する設定。ダブル

【Nuxt.js / Vue.js】MediaRecorderを使ってブラウザ上で録画機能の実装する

## はじめに
Nuxt.jsでWebカメラを起動し、動画を撮影するサンプルコードを紹介します。
ブラウザからカメラとマイクにアクセスするためには、ローカル環境でhttps接続する必要があります。
やり方は以下のURLを参考にして実装しました。
[Qiita](https://qiita.com/nobita_x009/items/0ce13d7ba08a287fbf94 “【Nuxt.js】ローカル環境をhttpsで起動する方法”)

【JavaScript】JavaScriptのクラスとコンストラクタ

“`JavaScript
class Person {
constructor(name) {
this.name = name;
}
introduce(num) {
console.log(`Hello, my name is ${this.name}`);
console.log(num);
}
}

const otto = new Person(‘Otto’);
otto.introduce(123);
“`

# 結果
“`
Hello, my name is Otto
123
“`

[JavaScript]日本語IME入力中か判定する方法

# 概要
JavaScriptでキーボード押下時などに日本語IME入力中かを判定する方法のまとめです。
日本語入力周りのイベントは、2022年現在主だったブラウザでも挙動に差異があり面倒です。

[IME（全角）入力におけるjsイベント現状調査](https://qiita.com/darai0512/items/fac4f166c23bf2075deb)
こちらの方の記事とだいぶ内容が被っていますが、私の調査結果と微妙に異なるところもあり、改めて自分なりにまとめています。

# 調査対象ブラウザ

– Chrome 99 (Mac)
– Firefox 98 (Mac)
– Safari 15 (Mac)
– Chrome 99 (Windows)
– Firefox 98(Windows)
– Edge 99(Windows)

※ Edgeはバージョン79からChromiumエンジンに変わっており、それ以前は挙動が全く異なると思われるので注意

# 日本語入力時に発生するイベントの流れ

まず、日本語入力時に発生するイベントとその発生順序を確認しました。
OSによる差はなかったの

初心者用：まずはどの言語を選べばいいの？

# どの言語を選べばいいの？

実際に僕の周りでこの質問を投げかけられることが多々あります　　
よく回答で見るのが
>やりたいことによる　　

って言われますよね　　
確かにそうなのですが今回は
**特にまだやりたいことがわからない人向け**　　
に書いていきたいと思います　　

## 筆者おすすめはJavaScript
まずはこれです
Web開発には欠かせない言語です
開発環境の用意が非常に単純
テキストエディタとブラウザがあればできます
テキストエディタとはプログラムを書くノートみたいなものです
実はWindowsに入っている「メモ帳」でもできます
筆者のおすすめのエディタは「VScode」か「Atom」ですね

### JavaScriptで何ができるの？？
ざっくりといえばWeb開発です
ホームページを作ったりできます
フロントエンジニア、サーバーエンジニアという言葉がありまして
・前者は人の目に見える部分
・後者は裏方の仕事
といった認識でいいでしょう
JavaScriptは基本的にフロントエンジニアの仕事になります
ブラウザアプリケーションの見た目を作っているという感じで

[PHP入門]　テキストデータへの、送信、書き込み、読み込み　

# 初めに
PHPの学習を始め、よく使うけど、始めのうちは忘れて何度も見直すだろう。
という点を、メモ代わりにまとめていきます。

## 基本的な書き方
**[開始タグ]** “`“

**[HTMLへ表示]** “echo“ 　　
“`
echo “Hello”; //文字列
echo $hensu; //変数
“`
※jsのconsole.logのように()は不要だが、“ ; “を忘れるとエラーが出るので注意。

**変数定義**　
“`
$num = 1; //数列
$name = “hoge”;　　　 //文字列
“`
## HTMLフォームのデータをPHPファイルへ送信
PHPを使う事で、HTMLとCSSだけでは見た目だけだったお問い合わせフォームを実際に活用できるようになります。

“`

お名前:

MAI

超軽量な手動data masking用のjavascriptライブラリ

`manual-data-masking`は超軽量な手動data masking用のjavascriptライブラリです。


# Repository link
https://github.com/HC200ok/manual-data-masking

# 手動data maskingとは？
手動data maskingはテキストデータ内に存在する個人情報や悪い言葉などの機密情報とセンシティブな情報を

JSの特殊な記述方法　書き殴り

## if文

“`javascript
let number = 10
let result = “”;

if(number < 10) result = "10未満"; else if (number < 100) result = "100未満"; //一般的な記述 if(number < 10){ result = "10未満" }else if (number < 100){ result = "100未満" } ``` ## 分割代入 ```js const user = { id:1, name:"dossy" } let {id,name} = user console.log(id) //=>1

“`
## 参考

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assign

AFrameで2D・3Dの画像とビデオを表示する

私たちのARアプリケーションの1つでは、[AFrame](https://aframe.io/)にARマーカー付きの3Dモデルに加えて、さまざまな2Dおよび3Dアセットを表示して、アプリケーションの機能を拡張したいと考えていました。 最初は、作業に時間がかかるように見えましたが…

どうなったでしょう？

[AFrame](https://aframe.io/)で下記の5つのアセットの種類が表示できるようになりました：

– 3Dのモデル
– 3Dで2Dの画像（静止画のみ）
– 3Dで2Dの動画
– 2Dの画像（静止画とアニメーション画像）
– 2Dの動画

## 適切なファイル形式
以下は、ブラウザのサポートに応じて、各アセットタイプに使用できるファイル形式の非網羅的なリストです：
– 3Dのモデル：GLB、GLTF、OBJ、COLLADA (DAE)、PLY、JSON、FBX、three.js等
– 3Dで2Dの画像：AVIF 、GIF、JPG、PNG、SVG、WebP等
– 3Dで2Dの動画：_3GP_、_MOV_、MP4、MPEG、MPG、_OGG_、_OG

やっぱりサーバー側でもWeb標準APIを使いたい

– JavaScriptランタイムはこれからもたくさん出てくる
– Node.js, Deno, cloudflare workers, Google Apps Script, …
– それぞれ別々のAPIを設計していたらキリがない
– 独自のAPIを設計してテストして仕様を維持していくのは大変
– Web標準APIを使えば解決

## JavaScriptランタイムとWeb標準API

前提として、JavaScriptにはどのランタイムでも使える関数（**標準ビルトインオブジェクト**）と特定のランタイムでしか使えない関数（**ランタイムAPI**）がある。

前者は例えば`eval`や`Array`などで、後者は`console`や`setTimeout`などだ。

||標準ビルトインオブジェクト|ランタイムAPI|
|—|—|—|
|特徴|すべてのランタイムで使える|ランタイムごとに違う|
|例|`Array`, `eval`など|`console`, `setTimeout`|
|実装者|JSエンジン（V8など）|JSランタイム（Node.jsなど）|
|仕