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

画像のドット抜けを解消するアルゴリズムを考える。

今回は画像のドット抜けを解消する
アルゴリズムを考えてみたいと思います。
完成品は下記の URL で公開しています。

[https://uni928.github.io/SephirothImageDotFix/](https://uni928.github.io/SephirothImageDotFix/)

ドット抜けのある画像を
このサイトで修正してみた所
ある程度解消できている事が確認できます。

また、このアルゴリズムは
ノイズ削除のように元の画像から
乖離していないと思います。

***

今回紹介するアルゴリズムについて

今回紹介するアルゴリズムは
以下の内容になります。

~~~
全てのピクセルに対して
左右が同じ位の色で自身のみ大幅に異なる場合に
自身を左右の平均の色に修正します。

例えば左右のピクセルが赤で
自身が青ならば異常と判定して
自身を赤にします。

この作業は上下も行います。
~~~

つまり連続する 3 点を見て
端の 2 点が同じような色で
中央だけ左右と乖離しすぎている場合に
異常と判定する

というのがこのアルゴリズムになります。

このアル

JavaScriptで蟻本 動的計画法　重複組み合わせ

# 概要
アルゴリズムを学習をした際の記録を投稿します。
今回は蟻本p67動的計画法の重複組合せについてです。

# 問題

“`
n種類の品物があり、i番目の品物はai個あります。異なる種類の品物同士は区別できますが、同じ種類の品
物同士は区別できません。これらの品物の中からm個選ぶ組み合わせの総数を求め、Mで割った余りを答えなさい。

入力
n = 3
m = 3
a = [1,2,3]
M = 10000

出力
6
“`

# コード部分
“`javascript
//
/**
* pp67 重複組み合わせ　
* @param n {Number} 品物の種類
* @param m {Number} 選ぶ個数
* @param a{Array} i番目の個数
* @return {Number} 組み合わせの総数
*/
const cal = (n,m,a) =>{
let dp = new Array(n + 1).fill(null).map(() => new Array(m + 1).fill(0));
for(let

小さなGPUでのエンジニアリング。自動的にFPSを計測し内蔵GPUのレンダリングパフォーマンスを探るゲーム。




![image.png](https://qiita-image-store.s3.ap-northeast-1.am

小さなGPUでのエンジニアリング。数値シミュレーションからAIへ。

https://qiita.com/tetsutakamurata76/items/449c6f3f2086a963b041

##### GPT-2: ショートストーリー: 「数値からaiへ」数値のaiは、aiが人間に与える影響を数値で表し、数値がaiに与えている影響の量と、人間のaiの数値との差をaiによって表します。 数値はaiが行う数値計算のアルゴリズムによって、人間が計算した数値を、人間が行う計算方法によって計算しますが、この数値を計算するアルゴリズムは「数値」と「ai」の2種類があります。 「aiによる数値処理」は、「数値による計算」に比べて、精度が格段に向上しています。 例えば、ある数値にaiが行った数値の結果を「計算結果」として表示しますと、「計算結果は、計算式によって数値として表されます。」というように

#### GPT-4: ショートストーリー: 「数値からAIへ」
東京の夜が深まるころ、都会の喧騒から少し離れた小さなアパートメントの一室で、田中健一はパソコンの前に集中していた。彼は熱心なプログラマーで、物理シミュレーションの数値計算を行う仕事をしていた。画

WebAssembly で同じコードを独立して動かす

WebAssebmly では同一のモジュールの複数のインスタンスが作成できます。これを利用すれば、グローバル変数をそれぞれのインスタンスで独立して利用することができます。

:::note info
シリーズの記事です。

1. [Emscripten の基本的な使い方とグルーコード](https://qiita.com/7shi/items/70ec93b683c0a1bcef6f)
2. [Emscripten と WASI](https://qiita.com/7shi/items/0cedc2a55c8ca0bb7538)
3. WebAssembly で同じコードを独立して動かす ← この記事
:::

# グローバル変数を含む例

次のような C のコードを考えます。

“`c:global.c
#include
#include

EMSCRIPTEN_KEEPALIVE
void test() {
static int n = 1;
printf(“%d\n”, n++);
}

int main()

CodeWars オススメ問題 #2

# はじめに

個人的に好きなアルゴリズム学習サイト「CodeWars」の問題をシェア。

週1くらいのペースで、全10回を目指す予定。

:::note
CodeWarsはいいぞ！の紹介は[こちら](https://qiita.com/kohki_takatama/items/2ae2808b931e943262b8)

CodeWarsの始め方は[こちら](https://qiita.com/javacommons/items/7c473cda7825ab99e08c
)
:::
# オススメ問題

https://www.codewars.com/kata/550f22f4d758534c1100025a/javascript

### 例
「東西南北に移動する時、無駄な移動を省け」という問題です。

「無駄な移動」とは、「北に行って南に行く」等です。
ただし、「北に行って東に行って南に行く」は「無駄な移動」ではありません。
“`
[“NORTH”, “SOUTH”, “SOUTH”, “EAST”, “WEST”, “NORTH”, “WEST”]

-> [West]

[

【個人開発】Qiitaの週間レポートアプリを作りました

# はじめに

技術記事を書くのが趣味の たま と申します。

**Qiitaの週間レポートを送ってくれるアプリを作りました！**

公式のサービスがありますが、自分なりにカスタムしたいときは使ってみてください。

:::note warn
※サービスとして公開はしていませんが、コードは公開します。
:::

# 完成品
:::note
:::
# きっかけ

きっかけは「しずかなインターネット」の月間振り返りレポートです。

振り返りと、ちょっとした達成感を得られるのが推しポイントです。

# 環境

| 環境 | 具体名称 |
|:-:|:-:|
| 動作環境 | Google Apps Script |
| 言語 | JS / HTML / CSS |
| API | Qiita AP

Enter押下と日本語IMEの不愉快な関係を解消する

この世界は「Enter」を押して確定するテキストフィールドで溢れています。そしてその多くが、日本語IMEの部分確定のために押し下げられたEnterを誤認して、入力中のテキストを確定してしまいます。
今日私は、Reactで作っているアプリで同じ目に遭い、（GPTに聞いて）解消することができました。

特に難しいことも新しいこともしていません。Composing中はEnterを無視しているだけです。

“`tsx
import React, { useState } from “react”;
const [isComposing, setIsComposing] = React.useState(false);

const TreeView: React.FC = ({
const handleKeyDown = (event: {
stopPropagation: () => void;
key: string;
}) => {
event.stopPropagation();
if (event.key ===

Emscripten と WASI

Emscripten は WASI に準拠した WebAssembly を出力できます。その挙動を確認します。

:::note info
シリーズの記事です。

1. [Emscripten の基本的な使い方とグルーコード](https://qiita.com/7shi/items/70ec93b683c0a1bcef6f)
2. Emscripten と WASI ← この記事
3. [WebAssembly で同じコードを独立して動かす](https://qiita.com/7shi/items/34f7d4693bd4b16d2df3)
:::

# WASI

WASI は WebAssembly System Interface の略で、WebAssembly がシステムとやり取りするためのインターフェースです。WASI は WebAssembly がブラウザ以外の環境で動作するための仕様で、POSIX に似た API が提供されています。

https://wasi.dev/

WASI に準拠したバイナリが実行できる処理系がいくつかあります。

– [Wasmtime]

JavaScript における Object の列挙順は保証されない

## はじめに
今回、自身の担当するプロジェクトにおいて不具合が見つかり、その要因が 「Object の列挙順は定義順になる、というのを前提としたコードを書いていた」ことにありました。
あまりちゃんと考えずにこうしていたのですが、この認識は誤りです。
これについて少し自分でも動作を確認してみてまとめました。

なおここで保証する・しないというのは ECMAScript の仕様上、保証されるかどうかというコンテキストでの表現であるとご理解ください。

## 例
どういうことなのかを簡単に例示します。

Node: `v20.8.1`

“`ts
const obj = {
3: ‘3’,
1: ‘1’,
9: ‘9’,
5: ‘5’,
}

// { ‘1’: ‘1’, ‘3’: ‘3’, ‘5’: ‘5’, ‘9’: ‘9’ }
“`

宣言時は key の順が `3, 1, 9, 5` となるように宣言しているのですが、参照すると `1, 3, 5, 9` の順番になってしまっています。
これが `3, 1, 9, 5` となる前提で順

【JavaScript】DOM チートシート

## はじめに
以下の教材でJavaScriptのDOMについて勉強したので、勉強したことをチートシートとして残すことにしました

https://www.udemy.com/course/the-web-developer-bootcamp-2021-japan/

## DOMの取得
### ID名から取得
– `document.getElementById(“ID名”);`
指定したID名と一致する要素を取得
“`html:index.html

“`
“`javascript:app.js
const container = document.getElementById(“container”);
“`
### クラス名から取得
– `document.getElementsByClassName(“クラス名”);`
指定したクラス名と一致する**最初の要素**を取得
“`html:index.html
リンク

StimulusとTailwind CSSでa11yを考慮したキーボード・インタラクション全部入りアコーディオンを実装する

StimulusとTailwind CSSを用いて、アクセシビリティを考慮しつつ、キーボード・インタラクションを全て含んだアコーディオンを実装してみたいと思います。

## アコーディオンとは

> アコーディオンは、インタラクティブな見出しが垂直に積み重ねられたものです。それぞれの見出しには、セクションの内容を代表するタイトル、抜粋、サムネイルが含まれています。 見出しは、ユーザが関連する内容のセクションを表示したり隠したりできるように、コントロールとして機能します。 アコーディオンは、一般的に、複数のコンテンツのセクションをシングル・ページに表示するとき、スクロールの必要性を軽減するために使用されます。
>
> [3.1 アコーディオン(表示/非表示機能を伴ったセクション) | WAI-ARIA オーサリング・プラクティス 1.1](https://waic.jp/translations/2019/NOTE-wai-aria-practices-1.1-20190207/#accordion)