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

NeosVR コンパイラ その6

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
閃いた、コンパイラにapiサーバを使う。
構想編。

# 方針
– LogiXオブジェクトは、いっぱいある。それを、apiサーバに蓄積してメンテナンスして
コンパイル時に、提供する。
コンパイルにapiサーバを使う。邪道だ。

– APIサーバは、Phoenixで、実装する。

以上。

不要なexportや依存関係を削除できるKnipの使い方

## はじめに

JavaScriptやTypeScriptでコードを書いているとき、こんな経験はありませんか？

– exportしているのに、他のどこからもimportされていないクラスや関数があった
– 以前は使っていたが、今は使っていない依存関係がpackage.jsonに残っていた

ファイル内でどこからも参照されていないクラスや関数は、ESLintで検出できます。しかし、exportされている場合、どこからもimportされていなかったとしてもESLintでは検出できません。

このような問題を解決できるのが「[Knip](https://github.com/webpro/knip)」です。

## Knipとは

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

JavaScriptとTypeScriptの両方に対応しており、webpackやESLint、JSDocなども考慮しながら動作します。

https://github.com/webpro/knip

## Knipの使い方

まずは、Knipをインストールします。

“`con

デザインパターン[MVCの章]

## 1. はじめに

### MVCとは？
MVC（Model-View-Controller）は、アプリケーションの構造や役割を分離するためのデザインパターンです。特にウェブアプリケーションやGUIアプリケーションでよく利用されます。

### なぜMVCが必要なのか？
MVCは、アプリケーションの各部分が独立して動作することで、メンテナンスや拡張が容易になるという利点があります。

### 注意点
注意というか前提として学んだもののまとめとして書いたので認識が間違っていること,もっと深ぼった方がいい部分も多々あろうと思います!!
その際はぜひコメントで教えてください!!
この記事はお前らと作っていくぞ!!!
## 2. Model（モデル）の役割

### データ管理とビジネスロジック
モデルはデータの取得や保存、ビジネスロジックの適用などを行います。

### データベースとの連携
多くの場合、モデルはデータベースと連携して動作します。

### モデルの例と実装
“`python
from sqlalchemy import Column, Integer, String

DOMContentLoadedが発火しない？readyStateとDOMContentLoadedの発火順序

# 実現イメージ

Webページの読み込みが完了した時点でJavaScriptを実行したいため、readyStateとDOMContentLoadedを使って制御を行おうと考えた。

# 当初のコード
“`javascript
if (document.readyState === “complete”) {
// ページの読み込みが完了している場合、直ちに関数を実行
this.send();
} else {
// そうでない場合、DOMContentLoadedで関数を実行
document.addEventListener(“DOMContentLoaded”, () => {
this.send();
});
}
“`

readyStateがcompleteだったら即実行して、そうでなければDOMContentLoadedイベントで発火する仕掛けにした。

# 動かない時がある

しかし、実際にこれをWebサイトに埋め込んでみると埋め込んだページによっては処理が発火しないケースがあった。
そこで、ブレイクポイントを仕込んでreadyStateを

ゼロから学ぼう！Reduxの基本とその使用方法

どうもこんにちは、たくびー(@takubii)です。
最近、Reduxのチュートリアルをハンズオンで実践しました。
今回はそこで得たReduxの基本的な使い方について書いていきたいと思います。
※なお、今記事ではチュートリアルのPart4くらいまでの情報を取り上げます。Part7,8のRTK Queryについては触れません。

最終的には以下のようなアプリを作成できます。
公式チュートリアルに記載されていたSandboxを添付します。

https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/tutorial-steps/?fontsize=14&hidenavigation=1&theme=dark

## チュートリアルの所感
Reduxのチュートリアルの通してやってみた感想としては、自分が今Reduxを使うのに必要としている部分まで進めれば十分だなと感じました。
私が個人的に感じたReduxのチュートリアルの大まかなまとまりを以下にまとめます。

[Part1](https://

ブラウザ拡張機能プログラムの練習として広告を消してみる

[MDNのブラウザー拡張機能](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions)を見つつ広告を消すプログラムを作ってみた。

https://github.com/ikiuo/google-chrome-extension-admodifier

処理する項目は少ないが、実行タイミングの罠は沢山ありました。

canvas要素の全消去

canvas要素の内容を全消去したい場合、clearRectで全範囲を指定する方法をよく見かける。

“`:JavaScript
const canvas = document.getElementById(‘canvas’);
const ctx = canvas.getContext(‘2d’);
ctx.clearRect(0, 0, canvas.width, canvas.height);
“`

canvasのサイズを同じ値に指定し直すことでも全消去できる。

“`:JavaScript
const canvas = document.getElementById(‘canvas’);
canvas.width = canvas.width;

// または
// canvas.height = canvas.height;
“`

using : リソース変数の管理が楽になるキーワード (JavaScript&TypeScript)

> この記事の内容にある意見は、個人の主観的意見を前提とします。
> 記事の内容は間違いがあり得ますので、ご了承いただけると幸いです。内容の間違い、認識の違い、違う意見などありましたら、コメント大歓迎です！

# 概要

JavaScriptにおいて、変数を初期化できるkeyword `var, let, const`に加え、`using`がまもなく追加される予定です。

`using`キーワードで宣言した変数は、リソースタイプ変数として見なされ、変数がscope外になる前に自動でリソース解除作業を行うことができるようになり、従来の明示的にリソース解除コードを書くという面倒な作業がだいぶ楽になることが期待できます。

ECMAScript Proposalは以下となっておりStage3段階となってます。
https://github.com/tc39/proposal-explicit-resource-management#status
※ Stage4になると標準として確定されます。詳しくは[The TC39 Process](https://tc39.es/process-doc

【2023年9月】0円で読めるオススメ技術書5選

# はじめに
みなさん、こんにちは。高校生エンジニアの[Raio](https://twitter.com/Raio14f)です！
平日は公立高校に通いながら、放課後や休日はIT企業のエンジニアとして働いています??‍?

↓筆者について↓

https://qiita.com/Raio14f/items/ef0fb67685b36298bcb0

今回の記事では、**0円で読めるオススメ技術書5選**を紹介します！
無料で読む方法も紹介してるので、是非最後まで見て頂けると幸いです??

# 技術書を無料で読む方法
[KindleUnlimited](https://amzn.to/3t3n5sY)を使うことで、**沢山の技術書を無料で何冊でも読むことが可能です**?

– 200万冊以上の書籍が何冊でも読み放題
– 月額980円が今なら1ヶ月無料
– 場所に囚われず、様々な端末で使用可能

勿論、技術書以外にもビジネス書や漫画など種類豊富です！

**今回の記事で紹介する技術書も、全てKindleUnlimitedで読むことができるので是非** ?

**↓入会したい方は画像をクリッ

【JavaScript】【Jquery】数値以外入力不可にする※全角数値はＯＫ

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

$(‘input[name=”cost”]’).on(‘input’, function() {
var num = $(this).val().replace(/[０-９]/g,(s) => String.fromCharCode(s.charCodeAt(0)-0xFEE0));
$(‘input[name=”cost”]’).val(num);
if(!$.isNumeric(num)) {
alert(‘数値を入力してください’);
$(‘input[name=”cost”]’).val(num.replace(/\D+/g, ”));
}
})
“`

【備忘録】javascriptでdropdownlist内の一部選択肢の表示/非表示を切り替える方法

# やりたいこと
ASP.NETでWebアプリを開発しているときに、javascriptでdropdownlist内の選択肢を状況に応じて一部選択肢の表示/非表示の切り替えが出来る様にしたかった。

# 解決方法
表示/非表示にしたい選択肢のdisplayプロパティをいじることにより解決した。

●javascript
“`javascript
//選択肢の「不明」の表示/非表示を切り替える。
function Changeoptions() {
var ddl1 = document.getElementById(“<%=ddl_1.ClientID %>“)
if(ddl1.options[3].style[“display”]==”none”){
ddl1.options[3].style[“display”] = “block”;
}else{
ddl1.options[3].style[“display”] = “none”;
}
}
“`

●aspx
“`html

Nuxt3でPiniaを使って状態管理を実装してみた

## はじめに
Nuxt3でPiniaを使って状態管理を実装してみました。

PiniaはVueで扱うグローバルなデータの状態を管理するための状態管理ツールです。Vue2まではVuexがデフォルトのVueの状態管理ツールでしたが、Vue3ではPiniaの利用が推奨されています。
この記事では、Piniaを使用してファイル間での状態共有を実現し、さらに pinia-plugin-persistedstate/nuxt プラグインを利用して、ページをリロードしても状態が保持される機能を実装します。

## 開発環境
– Windows 11
– Nuxt.js 3.4.1
– Vuetify 3.4.0-alpha.0
– npm 8.19.4
– Node.js 16.20.0

## ディレクトリ構造
本記事で使用するプロジェクトのディレクトリ構造です。ファイルの作成については、実装を進めながら必要に応じて行いますので、現時点では作成されなくても構いません。
“`
[プロジェクト名]/
├── composables/
│ └── states.ts
├── pages

RustのWASMをAngularのサービスとして使う方法

ハイサイ！オースティンやいびーん！

# 概要

Rustとwasm_bindgenを使って、Angularのサービスとして使えるWASMを作る方法をサクサクと紹介します。

## なぜWASMをAngularに？

そもそもなぜWASMをAngularで使いたいのかというところを疑問に思う読者もいるかもしれませんが、その思いはおそらくパフォーマンスを追求するならAngularを使うのはどうかという前提だと仮定してお話しします。

Angularはパフォーマンスが悪いのはその通りです。特にFirst Paint（DOMに最初にレンダーされる）までの時間が悲惨です。読み込んだ後のパフォーマンスはReactよりはいいが素晴らしいわけでもないのです。

しかし、Angularが向いているのは、業務アプリであり、その業務アプリではサクサクと動作することが非常に大事です。以前勤めていた会社では、Angularを使ったアプリ開発をしていたのですが、パフォーマンスが最大の課題でした。Angularを使っていたこと自体が問題だったというより、JavaScriptのメモリ管理の問題に直面していたといった

【小ネタ】Reactのmaterial-tableで特定の行のみを編集可能とする

material-tableを使って特定の行のみを編集可能としたくて試していたがある罠にはまって中々できなかった。
同じような罠にはまる人がいるか分からないが一応記録として残しておきます。

## material-tableとは
Reactで使えるMaterial-UIをベースとしたデータテーブルコンポーネントとしてmaterial-tableというOSSがあります。 material-tableを使うことにより、Reactの標準のデータテーブルコンポーネントよりもフィルター、検索、ソートなどのテーブル機能を拡張することができます。

## 特定の行のみを編集可能とする
参考にした記事が特定の列を編集可能にする記事だったので、
私は特定の行を編集可能とする方法を調べていました。

https://qiita.com/orangeroad0922/items/36d27df9a5989e0d7ac9

特定の行を編集可能とするには、以下から“isEditable“を使えばいいんだなと分かり早速試してみました。
https://material-table.com/#/docs/fe

【メモ】JS・TSにおける定数オブジェクトの設定について

## 下記の方法で、下記が実現できる
– オブジェクト自体の再代入が防げる
– オブジェクトのプロパティとその値が不変になる

“`ts
export const SAMPLE_OBJECT = Object.freeze({
NOT_SET: “未設定”,
AAA: “aaa”,
} as const)
“`

## as const
提供元：TypeScript
作動タイミング：コンパイル時に作動

## Object.freeze()
提供元：JavaScript
作動タイミング：ランタイム時に作動

Webサイト内の特定のHTML部品に含まれる文字数を算出する

個人的な需要があったので書きました。

## 1.事前準備

“`terminal
brew install node
“`

“`terminal
npm install node-fetch jsdom
“`

## 2.コード

“`count_characters.mjs
import fetch from ‘node-fetch’;
import { JSDOM } from ‘jsdom’;

async function countCharacters(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch URL: ${url}`);
}

const html = await response.text();

const dom = new JSDOM(html);
// 抽出したいDOMを指定する
const element = dom.w

【vue.js】ドラッグ可能な要素のカスタマイズとスタイリングの方法

## 【vue.js】ドラッグ可能な要素のカスタマイズとスタイリングの方法

こんにちは。今回は、vue.jsについて初心者エンジニアに向けて、ドラッグ可能な要素のカスタマイズとスタイリングの方法について解説します。

ドラッグ可能な要素を実装することで、ユーザーが要素をドラッグして移動させたり、他の要素とのドロップ操作を行ったりすることができます。vue.jsを使用すると、簡単にドラッグ可能な要素を実装することができますが、その見た目や挙動をカスタマイズすることもできます。

以下では、ドラッグ可能な要素のスタイルや外観をカスタマイズする方法、ドラッグ時の要素の透明化やカーソルの変更手法、ドラッグ操作時の要素のサイズ変更や位置制約の設定方法、ドラッグ中の要素にハンドルや制御部品を追加する方法、そしてドラッグアンドドロップ要素にトランジションやアニメーションを適用する方法について順に説明していきます。

## ドラッグ可能な要素のスタイルと外観のカスタマイズ方法

ドラッグ可能な要素のスタイルと外観をカスタマイズするためには、vueコンポーネントのスタイルセクション内でcssを使用する

javascriptで一括で要素を追加する

# Document.createDocumentFragment()
新しい空の DocumentFragment を作成し、そこに DOM ノードを追加して画面外の DOM ツリーを作成します。

“`js
var element = document.getElementById(“ul”); // ul が存在することを仮定
var fragment = document.createDocumentFragment();
var browsers = [“Firefox”, “Chrome”, “Opera”, “Safari”, “Internet Explorer”];

browsers.forEach(function (browser) {
var li = document.createElement(“li”);
li.textContent = browser;
fragment.appendChild(li);
});

element.appendChild(fragment);
“`
### 出典
https://developer.mo

NeosVR コンパイラ その5

# 概要
NeosVRのオブジェクトを外部で生成するコンパイラを開発した。
練習問題、やってみた。

# 練習問題
nasaのapiを叩いて取得した今日の画像を表示するオブジェクトを生成せよ。

# 方針
xhrでapiを叩く。

# 写真


# 俺コード

“`
new FrooxEngine.StaticTexture2D
new FrooxEngine.UnlitMaterial
new FrooxEngine.MeshRenderer
new FrooxEngine.QuadMesh
FrooxEngine.StaticTexture2D.Data.URL.Data = “@” + NasaApi.url
FrooxEngine.UnlitMaterial.Data.Texture.Data = Froo

【kintone/javascript】利用者ごとに採番された管理番号を利用したい

# はじめに
自動採番処理はプラグインを始め色々ありますが、担当者ごとに採番値を発番する必要があったので備忘録として残しておきます。

単独でプラグインを購入するのは勿体ない、、、
なんとか自作できないか、、、

という方向けに共有です。

“`javascript:autonumbering.js
(function() {
“use strict”;

// 管理番号を自動採番します。
// <仕様>
// アプリ内の過去レコードから最も大きな採番値を取得し+1した番号をセットします。
// 管理番号の接頭辞は「従業員ID」の情報を付与します。「従業員ID」が設定されていない場合はユーザーIDを設定します。
//
// <前提条件>
// ・採番値をセットする「文字列」フィールドが設定されていること　※本サンプルでは”管理番号”というフィールドを想定
// ・「ユーザー選択」フィールドが設定されていること　※本サンプルでは”担当者”というフィールドコードを想定
// ・「数値」フィールドが設定されて