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

IPv6で接続されたHTTPクライアントのIPv4アドレスを確認する方法

https://ipchecker.berdysh.net/

REMOTE_ADDR には IPv6 しか入って来ないのでIPv4のアドレスを取得する為にもう一本の新しいセッションを張る必要がある。

別セッションでもまたIPv6が使われてしまわないように、DNSにIPv4専用にAレコードのみを記載したサブドメインを用意。

https://ipv4.berdysh.net/IpChecker/

“`
fetch(‘https://ipv4.berdysh.net/IpChecker/’, {
method: ‘get’,
headers: { ‘Origin’: HTTP_ORIGIN }
})
.then(function (data) {
return data.json() ;
}).then(function (json){
console.log(json) ;
}) ;
“`

JSON応答でIPv4のアドレスを応答する

“`
{
“REMOTE

jQueryの$(window).on (‘load’)で躓いた

# はじめに
前回に引き続き、遅延読み込み(Ajax)の修正後に躓いた話。
jQueryの`$(window).on (‘load’)`が上手く動かない。。。
具体的には、リストデータを遅延読み込みする際に画面読み込み時だけ上手く動かず(動くこともある)、条件検索や件数表示を変えたときの処理はきちんと動く。
改善前のソースコードはこんな感じ。
“`
$(function () {
$(window).on(‘load’, function(){
// ここでAjax通信を行う。
});
}
“`
これがそもそもダメだった。
`$(function () {} `で`$(window).on(‘load’, function(){});`を囲うことは **jQuery3以降では完全にアウト**とのこと。
# 解決策
“`
$(window).on(‘load’, function(){
// ここでAjax通信を行う。
});
“`
これだけ。`$(function () {} `の外に出すだけ。
ただ、開発によっては思わぬ事故を防ぐために関数定

悪名高きスクロール妨害広告を解析する

@huzisuke 様による[悪名高きスワイプ広告を解析する](https://qiita.com/huzisuke/items/cdc63b4bf9d2ded5b5ca)への~~便乗~~リスペクト記事です。

https://qiita.com/huzisuke/items/cdc63b4bf9d2ded5b5ca

# スクロール妨害広告
:::note alert
以下の折り畳みに掲載しているキャプチャには性的な広告が含まれます。十分にご注意ください。
:::

スクロール妨害広告


いくら下にスクロールしても強制的に巻き戻されてしまいます。

こちらが実際に

reduceってめっちゃ便利じゃね？って話

# 概要
JavaScriptの配列操作っていろいろなメソッドありますよね。

– forEach()
– map()
– filter()
– reduce()

ここら辺が主にあると思うんですが、皆さん何使ってますか？
僕はreduce()を推したい…!!
じゃあ何が嬉しいんだよってことで実際に動かして確認します。

# 実際にやってみた
先に結論言います。

**配列でも、文字列でもなんでも作れます**

filterとかmapだと、結果として新しい配列を作ることになります。
reduceだと配列でも、文字列でもなんでも作れます。

以下、サンプル。

まず文字列作る。
“`文字列作る.js
const tanakaList = [“田中1.男”,
“田中2.女”,
“田中3.男”,
“田中4.男”,
“田中5.女”,
“田中6.男”];

const genderCheck = (l

DigitalOcean　FunctionのAPIでJSON形式でレスポンスさせる方法

# JSON形式になぜならないのか

“`main.js
export function main(args) {
const response = {
“body”:’abc’,
};
return response;
}

“`
“`text:result
abc
“`

となってしまいJSON形式にならない。

# 解決方法

https://docs.digitalocean.com/products/functions/reference/parameters-responses/#returns

の一番下に書いてある通り、

“`text:https://docs.digitalocean.com/products/functions/reference/parameters-responses/#returns
If you only ever want to return JSON data from your function,
you can ignore the above requirements
and i

鉄道の運行情報表示板に憧れて、駅間ラインデータを作成した話

## はじめに

鉄道の地理データというと駅のポイントデータや路線のラインデータが思いつきますし、今まで自分もいろいろな地図（[例1](https://qiita.com/mg_kudo/items/b685ee9dfd3e376602dc)、[例2](https://qiita.com/mg_kudo/items/a6b4b53f2cacfacac9a0)）を作ってきました。一方、鉄道の駅間毎に情報を表示したいと思う場合もあります。例えば、以下のような事例が考えられます。

* 運休区間や遅延区間等の表示
* とある特急列車の運行区間の表示
* 駅間毎の輸送量などの統計データの表示

しかしながら、駅のポイントデータや路線のラインデータはあっても、**駅間をつないだラインデータ**（駅毎に区切ってあるもの）というのは、あまり見たことがありません。そこで、今回、公開データをもとに、**全国の鉄道**についてなるべく簡易に作成しようと試行錯誤しましたので、その過程と成果を紹介します。

最終的に、タイトルにある「運行情報表示板」のようなものができたかな、とは思います。（以下は東京の地下

(改)EC最安値を教えてくれるLINE Botを作ってみた

## LINE Bot初号機をTeachable MachineとNode-Redで進化

LINE Bot 2号機#protoout #linebot #ec #javascript #nodered pic.twitter.com/rIqvAGWXtf

— tnsato (@tnsato2000) August 24, 2023

日々の業務の中で店舗巡回時に、LINEへ商品コード（JAN）を打ち込むと3大ECモール(Amazon、Rakuten、Yahoo)それぞれの最安値がその場で分かるというLineBot初号機を前回作ってみました。MakeとSSSAPIを活用し事前に価格調査をまとめたスプレッドシートからデータを引張りLINEへ返すものでした。
【前回記事】

https://qiita.com/tnsato4000/items/ee6395df07a427573f22

実際運用してみて使い勝手に課題を感じました。店頭で通常13桁ある商品コード（JAN）の数値をLINEへ手打ちするのはかなり面倒だし、間違いやすいという点です。そこで今回は「Teachable Machine」と「Node-Red」を活用して、手打ち作業をなくし商品を撮影するだけで各モールの最安値がLINEに返ってくるという進化版に挑

JavaScript で 2 元ゴレイ符号: 符号化と総当たりによる誤り訂正

本記事で説明する内容:

– いくつかの 2 元ゴレイ符号の例
– (23, 12, 7) 完全 2 元ゴレイ符号
– (24, 12, 8) 拡大 2 元ゴレイ符号
– (18, 6, 8) 短縮 2 元ゴレイ符号
– 平方剰余符号としての 2 元ゴレイ符号の構成
– 符号化
– 総当たりによる誤り訂正

本記事で説明しない内容:

– 一般のゴレイ符号
– BCH 符号としての 2 元ゴレイ符号の構成
– その他の方法による誤り訂正

2 元ゴレイ符号自体の説明は別記事にしました。

参考「[2 元ゴレイ符号 入門: 符号化 – Qiita](https://qiita.com/kerupani129/items/58cf347ab5349d686bda)」

# 1. 有限体上の計算の準備

## 1.1. 指数表および対数表を作成する
有限体上の掛け算や割り算を効率良くするために、$\alpha^i$ の値を対応させる指数表および対数表を作成します。

ここでは、原始多項式を $x^{11} + x^2 + 1$ とする有限体 $GF(2^{11})$

JavaScript：Promiseを使い、並行処理のサンプル

## 前書
* 自分勉強のメモ、ご参考まで
* 参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

## Promise.allのサンプル

###### サンプルソース：
“`javascript:MultiAsyncCalls.js
var aaa = aaa || {};
(function (global) {
var _ = aaa; // namespace

var asyncCall1 = function () {
return new Promise((resolve) => {
setTimeout(() => {
console.log(‘asyncCall 1 …’);
resolve(‘resolved’);
}, 5000);
});
};

var asyncCall2 = function () {
return

PipedreamでobnizやLINEを使う実験 #iotlt #pipedream #obniz

PipedreamはiPaaSなのにNode.jsやPythonやGolangのコードが書けて、npmモジュールも使えるのでobnizを使ってIoTやれるかを実験してみます。

## 先に結論っぽい話

(メモ書きしたあとに追記してます)

> https://speakerdeck.com/n0bisuke2/tuiniipaasdeobnizgadong-kukamo-number-iotlt-number-pipedream-number-obniz
> 

[IoTLT](https://togetter.com/li/2210569)で話をしてきた↑が一旦現状の結論ぽい感じです。

>

元記事を表示

はじめてのブロックチェーン実践講座その１

# はじめに
本講座では、金融庁認定の暗号資産：**Symbol** ブロックチェーンを利用し、
**プログラム知識ゼロ**でブロックチェーンを自由に利用、体験していただきます。

また、本講座はTaka Nobu(@nem_takanobu）様の「[速習Symbolブロックチェーン](https://github.com/xembook/quick_learning_symbol/blob/main/01_introduction.md)」を元に作成しております。

また、本講座では、**Symbolブロックチェーンを利用しての送金、送金ツールの作成**を実施することが誰にでも可能となります。

# 準備するもの
・インターネット接続環境
・Google Chromeブラウザ

# １．Symbolウォレット作成
### Symbolウォレットのインストール

[**こちら**](https://note.com/nembear/n/n56d2c9a28e8a)のリンク先を参照し、Symbolウォレットのインストールと作成を実施してください。
※**大項目１～３まで実施**すればOK

JavaScriptでドロップダウンを実装する

## はじめに
Javascript研修を通して、ドロップダウンメニューを実装する。

## コーディングルール
– ES6 (EcmaScript2015)以降のモダンな記法を使う
– 関数をモジュール化して使用する
– data 属性を使用してDOM要素を取得する

## 目指す動作
![Something went wrong]()

## コード(pug, scss)
すでにpugファイルとscssファイルは用意されており、JSファイルを作成する。
この2つのファイルはすでに用意されているもののため割愛。

“`_dropdown.pug
.dropdown
.dropdown__inner
nav
ul.dropdown__menu
li.dropdown__menuItem(data-selector=”dropdown-menu-item”) ABOUT
ul.dropdown__subMenu(data-selector=”dropdown-sub-menu”)
li.dropdown

JavaScript の分割代入で変数名を変更する

JavaScript の分割代入についての学習メモ。

# 詳細
これができるのは知っていた。
“`javascript
const obj = { a: 42, b: true };
const { a, b } = obj;

console.log(a); // 42
console.log(b); // true
“`
これができるのは知らなかった。
“`javascript
const obj = { a: 42, b: true };
const { a: foo, b: bar } = obj;

console.log(foo); // 42
console.log(bar); // true
“`
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E6%96%B0%E3%81%97%E3%81%84%E5%A4%89%E6%95%B0%E5%90%8D%E3%81%B8%E3%81%AE%E4%BB%A3%E5%8

Node.js：環境構築のいろいろ

## 前書
* 個人勉強メモです。ご参考まで。

## 目的
* Windows10環境、簡単でUnZipすれば稼働できる。
* 共通モジュールと個別モジュールの関係を明確にする。

## Node.js ダウンロード先
* URL：「https://nodejs.org/ja/download/releases」
各バージョンのインスタンスパッケージがあり、とても便利。
今回は「https://nodejs.org/download/release/v18.17.1/node-v18.17.1-win-x64.7z」をダウンロード

## Node.js インストール手順
* インストールパッケージの展開先： **「C:\aaa\nodejs」**
* 環境変数「NODE_PATH」：**「C:\aaa\nodejs\node_modules」**
* 環境変数「PATH」：**「C:\aaa\nodejs」**

## Node.js グローバルインストールパスの確定
**「npm root -g」** コマンドで確認
“`console: npm root -g

[イベントデリゲーション] 遅延読み込み(Ajax)修正後に色々な箇所が動かなくなった

# はじめに
リストデータを読み込む際に、時間がかかるということでUX改善のためリストデータの読み込みを遅延読み込み(Ajax)に修正したらJavaScriptで制御しているいろいろな箇所が動かなくなった。
改善前のソースコードはこんな感じ。
“`
$(function() {
$(‘任意のセレクター’).click(function(e) {
// 処理
});
});
“`
この**任意のセレクター**に修正した遅延読み込みのタグが指定されているのが原因だった。
画面読み込み後に確定する`$(‘任意のセレクター’)`の、**任意のセレクター**がまだ存在していないからだ。順序的にはこんな感じなのでしょうか。
1. ドキュメントの読み込みが完了→$(function()
2. セレクタ―確定→$(‘任意のセレクタ―’)
3. Ajaxリクエスト
4. 「任意のセレクタ―」を含むHTMLの描画

# 解決策
では解決策はどうすれば良いかというと。
“`
$(function() {
$(document).on(‘click’, ‘任意のセ

Javascript で早歩きとランニングの時間をpointで測定していき山歩きガチャをしていくPGM

Javascript で早歩きとランニングの時間をpointで測定していき山歩きガチャをしていくPGM

---

Javascript で早歩きとランニングの時間をpointで測定していき山歩きガチャをしていくPGMを
作りました。30pt(30分の早歩きまたはランニング)毎に一回ガチャを引き、花図鑑の花を埋めていく
PGMです。

---

githubURL: https://github.com/NanjoMiyako2/Runer-Mountain

サンプルページURL: https://nanjomiyako2.github.io/Runer-Mountain/

---

参考素材のサイト
花図鑑・植物図鑑を見る – みんなの花図鑑（掲載数：3,406件）
参考にしたサイト
Local Storag

Windows11 に Node.js インストール(nvm-windows利用), JavaScript実行, React 環境構築(VSCode)

Windows11 に Node.js インストールして JavaScript 実行、React環境構築をやってみる
以前、Node.js を通常インストールしたがバージョン管理の必要が出てきたので nvm-windows より Node のバージョン管理できるようにしてたときのメモです
MSのドキュメントにある [Windows での NodeJS のインストール](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows) を参考にしてます

やることは大雑把にこんなところ

– Node.js アンインストール
– Node.js(nvm-windows) インストール
– Node.js で JavaScript実行(簡単なHTTPサーバたてる)
– React環境構築(VSCode)

:::note info
コマンドプロンプト or Powrshell を使う時は 「管理者として実行」 で起動する
:::

# Node.js アンインストール

MSのドキ

JavaScript：asyncとawait 簡単なサンプル

# asyncとawaitのサンプル

#### 下記のサンプルはMDNからコピーし、自分の理解をメモ
＊方法：**Promise** を利用し、同期処理を非同期になる。
＊戻り値：**resolve(‘resolved’);** で実現する。

“`javascript:async&await.js
function resolveAfter2Seconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve(‘resolved’);
}, 2000);
});
}

async function asyncCall() {
console.log(‘calling’);
const result = await resolveAfter2Seconds();
console.log(result);
// Expected output: “resolved”
}

asyncCall();
“`

【Rails7+esbuild】必要なJavaScriptのみ個別に読み込みたい時

# 必要なJavaScriptのみ個別に読み込みたい
方法が分からず、とりあえず動きゃいい精神でapplication.jsに全部読み込ませてたら、パフォーマンス診断で怒られてしまった（あたり前田のクラッカー）


不必要なjsを読み込んでいるページでブラウザエラーも出ていたので、これを機に直すことに。

## そもそも、なぜapplication.jsに詰め込んだ？
#### Sprockets::Rails::Helper::AssetNotFound in ○○　のエラーになる。
![スクリーンショット 2023-08-24 10.41.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2817989/fb

AI 術士に負けるな！今なら間に合うアブラカダブラ

AI 術士なる耳慣れない言葉が世の耳目を引く今日この頃、いかがお過ごしでしょうか？

日夜、「すてーぶるでぃふゅーじょん」なる所で苛烈な呪文開発競争が行われているそうです。これは負けていられませんね。

ですので、西洋呪術の王道アブラカダブラで迎え撃ちます。

我々は本格派ですから、さらに呪文の回文化を行い万全を期します。

ついでにコーディングで得られた知見とサンプルコードを共有します。

## 前提条件

– 回文プログラム
– 文字列を引数に取り、返り値に回文を返す関数
– 回文は引数に引数の逆順を結合する「パワー系回文」方式
– 最後の 1 文字は繰り返さない

これ単体ではあまり面白くないが、次のプログラムのパーツとなります。

– アブラカダブラ回文プログラム
– 回文プログラムを再帰的に適用することでアブラカダブラ風の呪文を作る関数

具体的には次のような答えを返すプログラムを作ります。

“`goal.txt
想定される答え:
ABCDEDCBA
ABCDCBA
ABCBA
ABA
A

なお、実在するアブラカダブラの呪文が書かれた護