【JavaScript】catchブロックでのエラータイプの検証

特定のエラータイプの時のみ処理したい場合。

“`js
try {
// …
} catch (err) {
if (err instanceof ErrorType) {
err.errorType = ‘ErrorType’
}

next(err);
}
“`

—
検索キーワード
エラータイプが一致するか エラータイプ 検証 条件文 条件 if catchブロック

Node.jsでかっこよくサーバーを開ける

こんにちはAtsu1209です。
今回はNode.jsでかっこよくサーバーをあける方法を書いていきます。
初心者向けです。(私のメモでもある)

# Node.jsとは
Node.jsは名前から読み取れるように基本的にはJavaScriptです。

普通のJavaScriptはクライアント側(サイトを閲覧している側)で動きます。
しかしどこかの天才がサーバーサイドでJavaScriptを動かせるようにしたのが
Node.jsです。

# 普通にサーバーを開ける
まず普通にNode.jsでサーバーを開けます。
ExpressというフレームワークとNodemonというツールを使います。

### Express
ExpressとはNodeで最も人気なフレームワークです。
サーバーを開けるのがとても楽です、

### Nodemon
Nodemonは普段ファイルを更新するたびにサーバーを開け直すところを
自動で更新してくれる便利なツールです。

# ツールのインストール
“`console:Expressのインストール
npm install express
“`
“`console:

Google拡張機能と連携できるTauriベースのアプリを作った

# はじめに
https://qiita.com/kft12/items/401697d44e56b50f5fc5

こちらの記事にて書いた通り、色々な経緯がありGoogle拡張機能からのPOSTリクエストを受け取れるElectronのアプリを作りました。

が、やっぱりTauriで作りたいなぁ・・といろいろ試行錯誤した結果、なんとか実装出来たのでメモも兼ねて残しておきます。

:::note warn
注意：Rustは素人以下レベルなのでかなり違和感のあるコードなどもあると思います。
ご容赦ください。
:::

# 連携方法
色々調べに調べた結果、Rustにて利用出来る`Actix-Web`というフレームワークが良いよ、ということでふんわり理解しました。

実装は下記の通りです。

“`toml:Cargo.toml
[dependencies]
tauri = { version = “1”, features = [ “api-all”] }
serde = { version = “1”, features = [“derive”] }
serde_json = “1”
ac

【Javascript、Python】変数名で使える文字って結局何？

# 導入
最近の言語、意外と変数名にいろんな文字使えますよね？
結局何文字くらい使えるのか気になったのでまとめてみました。
javascriptはWindows11のFirefoxとEdge(結果は同じ)
pythonは動作環境なんて持っていないので、google colabです。
# 使える文字
pythonの方は若干ミスってますが(詳細は下)
予想は、Lが1文字目から使えて、Mが2文字目から使える感じかなと思っています。
記号系は`_`とか`$`とかを除き基本的に使えないのかなと思っています。

https://tool-support.renesas.com/autoupdate/support/onlinehelp/ja-JP/csp/V4.01.00/CS+.chm/Editor.chm/Output/ed_RegularExpressions4-nav-2.html

## Javascript
“`js
const character_usable_in_variable_name = new Map();
for(let $i = 1; $i<205745; $i++

Date Range Pickerで空文字を許可する方法

## はじめに

こちらのDate Range Pickerは、通常だとinputの値を空文字にすると自動で日付が入ってしまいます。空文字を入力できるようにする方法を調べたので備忘録として残します。

https://www.daterangepicker.com/

## コード

`autoUpdateInput`のオプションを`false`にすることで自動でinputに値が入らないようにします。
ただし、applyボタンを押しても値が入らなくなるため、`apply.daterangepicker`のイベントを検知して手動で値を入れる必要があります。

“`javascript
$(function () {
$(‘input[name=”daterange”]’)
.daterangepicker({
autoUpdateInput: false,
})
.on(‘apply.daterangepicker’, function (_, picker) {
const startDate = picker.startDate.

【Knip】不要なコードや依存関係を見つける

## Knipとは

Knipを使用すると未使用のファイルや依存関係、`export`などを検出できます。

https://knip.dev/

## 使い方

### インストール

以下の手順でインストールできます。

“`shell
yarn add -D knip typescript @types/node
“`
:::note info
`typescript`, `@types/node`はすでにインストールされていれば不要です。
:::

:::note warn
Yarnを使用してインストールした際に問題が発生した場合は[Yarnでインストールした際のエラーの対処法](#yarnでインストールした際のエラーの対処法)もご確認ください。
:::

`package.json`の`scripts`に`knip`を追加します。

“`json:package.json
{

“scripts”: {
“knip”: “knip”
},

}
“`

以下のように実行できます。

“`terminal
yarn knip
“`

実行すると使

10行で動きをつける、モーダルウィンドウとスライドメニュー(JavaScript)

## モーダルウィンドウ
dialog要素を使うことで簡単に作れた。
### dialog要素とは
HTMLの要素でモーダルダイアログやポップアップウィンドウを簡単に作成するために使用できる。
これを使うことで対話的に操作できるコンテンツをページの上に重ねて表示することができる。
“`html:index.html

クリック

モーダルウィンドウ

GPT-4o の入力に 2つ／3つの画像ファイルを使う（画像は Base64エンコード）：OpenAI の Node.js用ライブラリを利用

以下の記事で試していた、GPT-4o での画像入力の話の続きです。

●GPT-4o の入力に Base64エンコードした画像ファイルを使う：Node.js の process.loadEnvFile() と OpenAI のライブラリの組み合わせ – Qiita
　https://qiita.com/youtoy/items/3844c6904b6a39fdad64

今回は、公式のドキュメントの以下に書かれている「Multiple image inputs」を試してみます。
（以下を見かけて、なんとなく試してみたくなったため）

●Vision – OpenAI API
　https://platform.openai.com/docs/guides/vision/multiple-image-inputs


上記の公式サンプルでは、入力画像

[React] Create React App(CRA)を使用したReactプロジェクトのフォルダ構成

# 目次（生成されるファイル）
– [node_modules](#node_modules)
– [public](#public)
– [src](#src)
– [gitignor](#gitignor)
– [package.json](#package.json)
– [README.md](#README.md)
– [package-lock.json](#package-lock.json)

# node_modules
– プロジェクトで使用されるすべての依存パッケージが格納されます。

# public
– 公開用の静的ファイルが格納されます。
– `index.html`: アプリケーションのルートHTMLファイルです。このファイルにReactコンポーネントがレンダリングされます。

# src
開発者が実際にコーディングするファイルが格納されます。
– `index.js`: アプリケーションのエントリーポイントです。ReactDOMを使ってReactコンポーネントをDOMにレンダリングします。
– `index.css`: アプリケーション全体のスタイルシー

第18回 JavaScript アニメーションによるサイドバー（translateX）

# はじめに
Webサイトによく出てくるサイドバーを作りたいと思います。

# 今回実施する内容
今回は、Webでよく出てくるサイドバーを`anitemate`と`translateX`を使用して作成したいと思います。
メニューアイコン（ハンバーガーアイコン）をクリックすると、画面左からサイドバーがスライドして表示され、再クリックするとサイドバーが左側へ消えていくものです。
`scaleX`を使用しようと思ったのですが、サイドバーは`translateX`の動作をしているようだなと思いました。

# ソースコード(Git Hub)
https://github.com/Build-Mount/JS_18_sidebar

# 環境
OS: Windows 11 JP (64bit)
バージョン 125.0.2535.51 (公式ビルド)

DOM（Document Object Model）の基本

## はじめに
DOM（Document Object Model）は、HTMLやXML文書をプログラムから操作するためのAPI（Application Programming Interface）です。DOMは、文書の構造をツリー構造として表現し、プログラムからそのツリーの各部分にアクセスしたり変更したりできるようにします。JavaScriptを使ってWebページを動的に操作する際の基盤となる技術です。

## DOMの基本構造

DOMは、文書の各要素をノード（Node）として扱い、これらのノードをツリー構造（DOMツリー）で表現します。ノードにはいくつかの種類がありますが、主なノードタイプは以下の通りです。

### 1. **要素ノード（Element Node）**:
– HTMLの各タグ（例：`

`, `

`, ``）に対応します。
– ノードタイプ：`Node.ELEMENT_NODE`

### 2. **テキストノード（Text Node）**:
– 要素の中のテキストに対応します。
– ノードタイプ：`Node.TEXT_N

条件分岐 [JavaScript]

私たちは１日に3万５千回意思決定をしていると言われています。

意思決定とは例えば、
・今日はなんの服を着よう・・・
・朝ごはんはどうしよう・・・
・何分の電車に乗ろう・・

など単純なものから複雑なものまで様々です。

そして、この意思決定に関するプロセスをプログラミングの世界に投影したのが条件分岐になります。

条件文は、JavaScript特有ではなく、他のプログラミング言語にも共通する概念です。

条件文を使用することで、特定の場合に、特定の結果を出すように場合分けすることができます。

それでは、この条件文について詳しくみていきましょう。

## 目次：

[・条件分岐](#条件分岐)
[・比較演算子](#比較演算子)
[・if文、else if、else](#if文else-ifelse)
[・if文](#if文)
[・else if](#else-if)
[・else](#else)
[・応用的な書き方](#応用的な書き方)
[・if文を入れ子（ネスト）で使う](#if文を入れ子ネストで使う)
[・論理演算子](#論理演算子)
[・１、AND

DOM操作について

今回はJavaScriptを学習して特に大事だと考えたDOM操作についてアウトプットしていきたいと思います。

## DOM操作とは
DOM（Document Object Model）は、HTMLやXML文書をプログラムから操作するための仕組みです。Webページを動的に変えるために、DOM操作は必要となります。この記事では、初心者が基本的なDOM操作について学んだことを説明していきます。

## 基本的なDOM操作
要素の取得

まず、操作したい要素を取得する方法を説明します。以下の方法があります。

IDで取得: getElementByIdメソッドを使います。
クラス名で取得: getElementsByClassNameメソッドを使います。
タグ名で取得: getElementsByTagNameメソッドを使います。
CSSセレクタで取得: querySelectorやquerySelectorAllメソッドを使います。

“`
// IDで要素を取得
let element = document.getElementById(‘exampleId’);

// クラス名で要

テンプレートリテラルをもう少し理解したい(MDNを添えて)

## 俺たちは雰囲気でテンプレートリテラルをやっている
MDNより
> テンプレートリテラルはバッククォート (`) で区切られたリテラルで、substitutionと呼ばれる埋め込み式が利用できます。
タグなしテンプレートリテラルは文字列となるため、文字列の補間に便利です（エスケープされていない改行が許されるため、複数行の文字列も可能です）。

変数を埋め込んで見やすい形式で文字列を生成できて便利だー、という漠然とした理解の下に雰囲気で使っていた & 何も困らなかったためこれまで調べてこなかった。

が!調べて見るといくつか発見があったため、まとめてみる。

## タグなしテンプレートリテラル
おなじみ。改行できたり、式を埋め込めて見やすい形式で文字列を生成できて便利。

“`ts
// 文字列リテラル
const name = “foo”;
console.log(“Hello\n” + “World\n” + name + “-san”);
// Hello
// World
// foo-san

// テンプレートリテラル
const name = “foo”;
conso

ESLintとtypescript-eslintを手動で設定してみる

:::note
本来は`npm init @eslint/config@latest`で設定したかったです。
typescript-eslint@7.9.0はeslint@8.57.0に依存しているので、eslint@8.57.0と指定して手動でインストールします。
:::

# eslintの初期設定

“`terminal
$ npm init @eslint/config@latest
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you’ve selected requires the following dependencies

配列を並べ替える

JavaScriptで配列を並び替える方法のメモ。
数値、アルファベットの場合は`sort`を使用します。
“`js
const array = [‘Delta’, ‘Bravo’, ‘Alfa’, ‘Charlie’, ‘Echo’]
console.log(array.sort()) // [‘Alfa’, ‘Bravo’, ‘Charlie’, ‘Delta’, ‘Echo’]
“`
降順の場合、
“`js
const array = [‘Delta’, ‘Bravo’, ‘Alfa’, ‘Charlie’, ‘Echo’]
array.sort((a, b) => {
if (a > b)
return -1
if (b > a)
return 1
}) // [‘Echo’, ‘Delta’, ‘Charlie’, ‘Bravo’, ‘Alfa’]
“`
数値の配列でも同じようにソートできます。
日本語の場合は`localeCompare`を使用します。
“`js
const array = [“うし”, “わに”, “あひる”, “みかん”

[Javascript]配列のあれこれ

Javascriptも他の言語もそうだろうが、
とにかく何を引数としているのか、または中身なにこれ。が非常に多い。

特に苦戦した（今もしているけど）のが配列と値の取得＝指定。

初学者ゆえに捉え方が間違っていたりするところも多々あるだろうが、
現時点での理解度として記述していきます！

##
“`
const Animal = [
{id : 1, name : “cat”, color : “black”},
{id : 2, name : “dog”, color : “brown”},
{id : 3, name : “bird”, color : “blue”}
]
“`
上記の配列Animalに含まれているオブジェクトは3つ。Animal.lengthでいうと = 3。

「id」「name」「color」のキーと、
それぞれの値プロパティが、「：」の後ろで設定されている。

単純にAnimalの中のnameキーを叩けば、値を見ることができるのか。
“`
console.log(Animal.name)
=>undefined
“`

結果

超huffman符号

適応型huffman符号**もどき**を利用した高圧縮programを紹介します。純粋な統計型手法であり、速度は全く褒められたものではありません。圧縮性能はgzipに匹敵しまくるとかしないとか…。

## 手口
1文字符号化/復号化するごとに最初からhuffman符号を作り直すという非常に効率の悪い事をしています。統計の取り方の都合上、そうせざるを得なくなりました。
その都合とは、過去の文脈を洗いざらい調べ尽くして文字の頻度を混合するというもの(PPMとは似て非なるもの)。この二段攻撃により想像を絶する程の低速ぶりを発揮しちゃっています。ついでに記憶空間も大量消費しやがります。
まあ実際には文脈の長さは指定した値に固定され、調べるにも限度があります。

## 実装
それではJavaScript様による実装を晒しておきます。低速なので非同期関数にしました。`compress()`と`decompress()`が本体です。
“`js
//加重倍率調整配列
const coef=new Uint32Array([34304,33348,240,0,29273,128512,24,1,641

JSで一時停止機能付きのsetTimeoutを自作してみた

# 初めに
JavaScriptには、「何ミリ秒後に実行する」という処理を行うことができる**setTimeout**というメソッドが標準で搭載されてあります。

また、**clearTimeout**というものも存在し、これは既に開始されたsetTimeoutを中断することができます。

しかし、その次にまた同じものを開始させた場合、カウントは途中からではなくまた始めからになってしまいます。
もちろんそのような場合の方が便利なときもありますが、途中から再開できるものも欲しいときがあったので、
少し改良して一時停止機能を搭載した自作のsetTimeoutを作りました。

# コード
実際に作ってみたものがこちらになります。
“`mySetTimeout.js
// 時間を管理するオブジェクトの宣言
let TimeLines = {
ID: [],
StopTimeList: [],
isPauseList: []
};
let isPause = false;

// 自作のsetTimeout
function mySetTimeout(Function,

React完全入門ガイドを終えて

UdemyでReact学習を進めていく中で得た基礎知識や気になったことを調査し、キーワードをまとめました。

# 講座について
[オススメUdemy講座](https://www.udemy.com/course/react-complete-guide/?couponCode=LEADERSALE24B)
神講座と名高いReact完全入門ガイド。
コーディングに留まらず、内部構造や周辺知識を分かりやすく図で説明してくれるので、納得感を持って学習を進めていけます。
これからReactを学びたいと思っている方には全員にオススメできます。まさに神講座。

# DOMと仮想DOM
DOM(Document Object Model)とは、JavaScript(※以下JS)によってHTMLを操作する仕組みのこと。
仮想DOMとは、実際のDOMと同じデータ構造をJSオブジェクトとして表現したもの。
Reactでは仮想DOMを操作し、差分のみを実際のDOMに反映させることでパフォーマンスの向上を実現している。

# JSX
JSX(Javascript Syntax Extension)とは、