JavaScript関連のことを調べてみた

[Three.js] r155からライトの光度単位が変わりました

## 先に結論だけ

Three.js r155からデフォルトの光度単位が変わりました。PointLightとSpotLightのデフォルトの光度は1カンデラになり、大幅に暗くなっています。

Three.jsを更新してシーン全体が暗くなったり、モデルにハイライトが入らないと感じたら、以下の2点を調整してください。

1. PointLightとSpotLightの光度を数百倍に強くする
2. それ以外のライトの強度をMath.PI倍にする

## はじめに

この記事は、Three.js r155での照明の変更とその対処を共有するためのものです。

### 対象とする読者

この記事は、すでにThree.jsを利用しているユーザーを対象にしています。Three.jsの解説やインストールガイドは含みません。

### 対象とする環境

この記事は、Three.js r155以降を前提としています。記事を読む前にお手元の環境をご確認ください。

## Three.js r155での変更点

2023年7月にリリースされたThree.js r155から[WebGLRenderer.useL

live-serverでMIME typeエラーが出た話

# はじめに
最小構成でwebアプリを作ろうと思い立ちgithub copilotを使いながら楽々作っていこうと思ったらつまづいたので備忘録として残しておきます。

## 開発環境
* Terminal Zsh
* VSCode Version: 1.85.1 (Universal)
* Google Chrome ver120.0.6099.129（Official Build） （arm64）
* npm v10.2.3
* node v20.10.0
* live-server

## live-serverのインストール
live-serverはVSCodeの拡張機能でもありますが、ターミナルから実行したかったのでnpmでインストールしました。
“`zsh:zsh
npm install -g live-server
“`

## ディレクトリ構成
“`
.
├── README.md
├── index.html
└── module
├── Hello.js
└── time.js
“`

## プログラム
以下のようなコーディングを行いました。

元プログラマー自身の困惑 (ソースコードの整理は大変)

# はじめに(起)
現役をリタイヤーして早や、15,6年になります。今でも、趣味で、Webサイトのページを作成しています。そこで、自身に困惑しているなることがあります。これまで作成してきたソースコードは長年のメンテナンスでかなりゴミ交じりのコードになっています。そのたの適宜、ソースコードの整理を始めますがいつでも中途半端で終わっています。いざ、やり始めても、やることが多すぎてあきらめてしまいます。これまで、その繰り返しです。

# なぜできないのか(承)
理由はいろいろあります。
#### ・本気で時間をかけてやろうとする意欲が出ない。
理由は、趣味で行っていることが原因です。仕事であれば、ある程度の結果は出せるとは思いますが、
#### ・これも下手に手を出すと返って藪蛇になることもあります。
よく、システム更新時に起こる問題です。世の中のあるシステムでも問題になっています。プログラムコードはちょっと修正しただけでも、その後にとんでもないシステム事故になることがあります。
今の時代は車でも電気製品が多く組み込まれています。その中にプログラムが組み込まれていてときどき不具合が発生してリ

next-sessionでセッションを再生成するときの注意点

next-sessionはNext.jsでのsession利用を簡単化するためのライブラリです。
主に以下を行ってくれます。
– session cookieの管理
– session storeとの接続 (session idの突合）
– HTTPヘッダーの設定、Storeへの書き込みを暗黙的に行うautoCommit機能

参考: [hoangvvo/next-session（github)](https://github.com/hoangvvo/next-session)

この記事では、セッションを再生成する実装を行う際に私がハマったことについて共有します。
先に書いておくと、`autoCommit: false`を指定した場合は同じ原因でハマることはありません。

## どういう時にセッションを再生成するのか
セキュリティの観点から、ログイン成功時に新しいセッションを開始し古いセッションを破棄することが望ましいです。
これは、IPAのセキュリティガイドにも記載されています。

参考: [1.4 セッション管理の不備　](https://www.ipa.go.jp/secur

【JS/ES6】疎結合と密結合

# はじめに
JSを勉強中に疎結合と密結合という言葉を知った。

# 疎結合と密結合って？
「密結合」は素間の関係性が強く、個々の要素が他の要素へ及ぼす影響が大きな状態。
「疎結合」は要素間の関係が相対的に緩く、独立性が高い状態。

# JSにおいての疎結合と密結合
JSのメソッドを作る時、グローバルで定義した変数を使うのは便利な反面、密結合が起こりやすい。
“`
let word = “hoge”;

const hoge = () => {
word = “fuga”;
};

hoge();
“`
この場合、グローバルで定義したwordを作成した関数で直接書き換えているが、この書き方だと変数（word）と関数（hoge）をセットで使用することになる（密結合）。
また、他の関数で同じ変数を使うこともあり得るので避けたい。
“`
let word = “hoge”;

const hoge = (word) => {
word = “fuga”;
};

hoge(word);
“`
こちらの書き方は結果は同じだが、変数で引数を渡して使用することでメソッドを独立して

【JS/ES6】関数（メソッド）の宣言の仕方（書き方）

# はじめに
関数を宣言するときに忘れそうになるので備忘録メモ。

# 通常の宣言パターン

“`
const 関数名 = function(引数){
// ここに処理
};

const 関数名 = (引数) => {
// ここに処理
};
“`

# プロパティを持たせての宣言パターン

“`
const オブジェクト名 = {
プロパティ名1: 値1,
プロパティ名2: () =>{
// ここに処理
}
}

オブジェクト名.プロパティ名2();
“`

# クラス定義

“`
class クラス名{
constructor(引数){
this.変数名 = 値;
}

メソッド1(){
}

メソッド2(){
this.メソッド1();
}
}

//クラスからインスタンスを生成
const インスタンス名 = new クラス名();

“`

### クラスAを継承したクラスB
“`
class A{
constructor(){
}
}

class B extends A{

講義第２回

# Javascriptを利用したコーディングを知ろう
# 初めに
## 今回の目的
Javascriptを利用して非同期処理を動かしてみる
APIを利用してみる

# 1. 非同期処理
## 非同期処理とは？
一言でいうと…
「一つの処理を実行中であっても他の処理を実行できる実行方式」

逆に同期処理とは？
「１つずつ前から順番に処理を実行できる実行方式」
## 1-1. ペペロンチーノの作り方
ペペロンチーノを作る料理工程に例えて
ハンズオン形式で非同期処理の理解を深めよう！
ペペロンチーノ料理工程
1. パスタを茹でる（5分）
1. ニンニクを切る（1分）
1. ソースを作る（4分）
1. 皿に盛り付ける

## 1-2. ペペロンチーノの作り方（同期処理編）
実行用ファイルを作成
まずは料

ユーティリティクラスを作るべきか考える

:::note
JavaScript,TypeScriptでのユーティリティクラスを今回は扱います
:::
## この記事で分かること
– ユーティリティクラスの定義
– eslintで非推奨にされている背景
– ユーティリティクラスがもたらす技術的負債
– ユーティリティクラスではなくて個別で関数、定数宣言するべき

# 1. 背景
staticなプロパティのみのclassを実装することがあリましたが使い時として妥当だったのかと思うことがあった為です。

# 2. ユーティリティクラスの定義

https://lindbakk.com/blog/utility-and-helper-classes-a-code-smell

– 以下をプロパティに持つクラス
– static メソッド
– static 変数
– インスタンス化できない
– 状態を持たない

「ヘルパー・クラス」もユーティリティクラスに含まれるそうです。

ユーティリティクラスの定義が誤っていた場合はコメントでご教授ください🙏

ユーティリティクラスの例
– [Math](https://develo

Babylon.js Playground にあるの公式サンプル「Particle System Examples」を最小化してみたり利用するパーティクル用画像を変えてみたりする

## はじめに
この記事では、以前書いた以下の記事でも使った [Babylon.js Playground上の公式サンプル「Particle System Examples」](https://playground.babylonjs.com/#0K3AQ2#3067)を扱います。

●Babylon.js Playground上のサンプルで自分が欲しい部分を ChatGPT に取り出してもらう【完走賞ゲット-22】 – Qiita
　https://qiita.com/youtoy/items/051e8e723dbd2bd72dff

上記の記事では、Babylon.js Playground上のコードを最小化していたのですが、今回は HTML のファイル全体を最小化してみます。
また、パーティクルシステムで利用されている画像を別のものに変更する、というのもやってみます。

## 今回の内容
Babylon.js Playground上でコードを扱う際には、JavaScript のプログラムの一部のみを編集するだけで処理を実行でき、HTML や CSS などの記載は考慮せずに扱える

【JavaScript】単純リクエストを飛ばすことでpreflightでのエラーを回避する（突貫工事）

## 困ったこと
#### 状況
HTMLにJavaScriptを組み込み、XMLHttpRequestを使い外部のAPIを叩きたかった。
（HTTPメソッドはPOST。ヘッダーには`Content-Type`として`application/xml`を指定）
動作確認のため、このHTMLをGoogle Chromeで開き、JSを実行してみた。

#### 結果
APIのレスポンスを得られなかった。Chromeの開発者ツールでコンソールを見てみると、
「 **preflight** に失敗しました」という内容のエラーが出ていた。
（エラーメッセージをコピペし忘れました）

## 調査内容
– preflightは、実際のリクエスト前に、クライアントがサーバーから通信許可を得るために行われるもの
– preflightは、実際のリクエストが **単純リクエスト** ではない（かつCORS）の場合に行われる
– preflightのエラーの突破策は以下
1. リクエストを単純リクエストとすることでpreflightが行われないようにする
2. APIのレスポンスをいい感じに

JavaScript学習の記録3

# はじめに
復習も兼ねて，JavaScriptの学習内容をアウトプットしていきます．

# mapを使った配列の処理
mapメソッド：配列・オブジェクト内のすべての要素に処理を行い，新しい配列・オブジェクトを作成するメソッド．
“`javascript
// 使用例
const numbers = [1, 2, 3];

const doubleNumbers = numbers.map((number) => {
return number * 2;
};

console.log(doubleNumbers);
“`
“`javascript
//実行結果
[2, 4, 6]
“`

# 三項演算子 : ?
使い方は，
`(ある条件) ? (trueの時返す部分) : (falseの時返す部分)`
“`javascript
//使用例
const val = 3 > 0 ? “trueです” : “falseです”;
console.log(val);
“`
“`javascript
//実行結果
trueです
“`

アナログ回路 その28

# 概要
問題みつけたので、解いてみた。

# 問題


# シュミレーション結果


実効値１００ｖの電圧は、ルート２倍で１４１ｖ
グラフから、近いのは２８２ｖ

# 成果物

https://embed.plnkr.co/plunk/1NsGgFQDfr2IVJcN

以上。

【fetch関数の使い方】RailsAPIを利用するためのフロントエンド実装

## はじめに
Rails APIなどの外部APIからデータを取得したり、フォームデータをサーバーに送信するために使用されるJavaScriptのfetch関数を学習しました。

しばらくJavaScriptから離れていたため、この機会にJavaScriptの基本文法を再学習し、さらに新しくfetch関数の使い方を習得しました。

この記事では、fetch関数の活用方法やその重要性について詳しく解説していきます。

## fetch関数とは何か

fetch関数は、JavaScriptでWeb APIやリソースにネットワークリクエストを送るための標準的な方法です。

リモートのサーバーからデータを取得したり、データをサーバーに送信したりできます。

### fetch関数の基本的な使い方
“`javascript
fetch(‘https://example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
“`

このコードは、https://example.c

修正：haskellコードの理解（関数合成・複数の`.`）

# はじめに
[辺境のHaskell道場で、賢者におもっくそ鍛えられた件](https://qiita.com/kohki_takatama/items/ef77d30e2491fd5c1c65)で
“`hs
checkForFactor :: Int -> Int -> Bool
checkForFactor = (.) (== 0) . mod
“`
これをなんとか理解しました。
でも、微妙に納得いってない部分があったんですよね。
その答えがわかったので追記する形です。
# 問題
“`hs
checkForFactor :: Int -> Int -> Bool
checkForFactor x y = (.) (== 0) (mod x) y
“`
これが原型です。
1. `mod x`でカリー化した１引数関数（定数xを割る、引数yの関数）を返す。
2. 1の関数を、`(== 0)`と関数合成。
3. これで、`y`を受け取る→`mod x`により`x % y`が計算され、`(== 0)`に渡される→真偽値が返る、という関数が作れました！
問題は、ここからの変形です。
前

アナログ回路 その27

# 概要

問題みつけたので、解いてみた。

# 問題


# シュミレーション結果


Vdは、０．７V
Idは、０．２A
に、見える。

# 成果物

https://embed.plnkr.co/plunk/EiNe2tcFtBRta7Cc

以上。

モダンJavaScript

## はじめに
フロント開発で、知らない記述のコードを見かけることが多くなりました。
サーバサイド開発が主担当なのですが、遅れをとらないように勉強を始めました。
参考になった資料や記事などを元にして、モダンJavaScriptについて、まとめていきます。

## モダンJavaScript
### 変数宣言
**var** による変数宣言では再宣言できる。複数個所で定義されていると、プログラムの実行順によっては、どこで定義された変数なのかが、判断が難しくなる。
ES2015で追加された **let** による変数宣言を使えば同じ名前の変数の再宣言を避けられる。定数を宣言する **const** もES2015で利用可能となった。

:::note warn
constで定義した変数がオブジェクトや配列、関数といったプリミティブ型以外の場合は、内部の値を変更や追加できてしまうので注意が必要。
:::

### テンプレート文字列
バッククォートで囲んだ文字列に **${変数}** を入れ込む記法。プラス記号で文字列を連結しないので可読性が向上する。

“`javascript
cons

WebBluetooth APIを用いたBLE通信で21文字以上のデータをPCから送れなかったことに関するメモ

# 結論
– 2024/01/08現在において、writeValueメソッドならびにwriteValueWithoutResponseメソッドを用いて20byte以上のデータを送信できない。
– [chromiumへのバグ報告](https://bugs.chromium.org/p/chromium/issues/detail?id=1073311&fbclid=IwAR1APy0bcv5_ZtGPUnHtw6IhKZ49McJaPn6AZvA79XEechQbDkLagS45Q9c)を確認する限りだと修正はされていない。

# 気付いたきっかけなど

事象に気づいた際の情報をまとめます。

## 概要

– Chromeフロントエンドからmicro:bitに50文字程度の文字列を連続送信するコードを書こうとしたときに事象に気づいた
– AndroidアプリのBLEScannerからmicro:bitのCharaに文字列データを送った際には正常に受信できていた。BLEScannerは下記からインストール可能

https://play.google.com/store/apps/de

【JavaScript】ES2024の新機能まとめ

[ES2024](https://qiita.com/rana_kualu/items/16539958b0c9d3b3dba8) / [ES2023](https://qiita.com/rana_kualu/items/84f66fe970f7feccf367) / [ES2022](https://qiita.com/rana_kualu/items/8bafecd760ae69cfac41) / [ES2021](https://qiita.com/rana_kualu/items/ae3297dd2974fcf047c4)

JavaScriptの仕様は、[TC39](https://tc39.es/process-document/)というところで決められています。
ブラウザベンダや関係者が[定期的に会合を行い](https://github.com/tc39/notes/tree/main/meetings)、様々な新機能について話し合って[どのようにするかを決めています](https://github.com/tc39/agendas)。

ちなみに[2023年9月

[TypeScript]never型とは

# never型とは
「値をもたない」を意味する特殊な型。
never型は、通常、関数が正常に終了しないことを示す型です。
以下がサンプルコードです。
“`ts
type Exclude = T extends U ? never : T;

type Foo = Exclude // string | number
“`
このコードは、継承した U 型と一致する型を T 型の中から除外する型定義です。
ここでは、「type foo」の中で宣言された「Exclude」の第二引数に、「boolean」型が渡されているため、Foo 型は 「string | number」となります。

# never型が多く使われる場面
never 型は主に、以下のように使われることが多い。

### エラーのスロー（throwError関数）
“`ts
function throwError(): never {
throw new Error();
}
“`
このthrowError関数は、常にエラーをスロ

React+TypeScriptでOpenAPIを使う

# React+TypeScriptでOpenAPIを使ってRESTで通信

お仕事でAndroid＋kotlinサーバサイドでOpenAPIを使ってREST通信のアプリを開発していたのですが、ひょんなことからWebアプリも開発することになりました。
ここ10数年くらいはサーバサイドばかりでフロントエンドやってなかったのですが、折角ならReact＋TypeScrptで作ってみようと思い立ちました。

サーバサイドは今までと同じように、kotlin + sprintBoot3 + OpenAPIです。

https://qiita.com/cozyk100/items/c2afb1885f0dbabb0be0

OpenAPIのインタフェース(json、yaml)の作り方は変わりません。上記の記事の②の方法、サーバサイドの実装から作ります。

この時に1点注意しなければならないのは、サーバサイド側のControllerクラスのアノテーションの付け方で、
“`
@RestController
class MyController(private val service: MyServic