JavaScript関連のことを調べてみた2022年01月12日

インタープリタを作る その35

#概要

インタープリタを作ってみた。
jsforthを使ってみた。
サウンド拡張する。
ドレミ、やってみた。

#サンプルコード

“`
play” ドドソソララソソファファミミレレドドソソファファミミレレソソファファミミレレドドソソララソソファファミミレレド”

“`

#成果物

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

以上。

インタープリタを作る その34

#概要

インタープリタを作ってみた。
jsforthを使ってみた。
グラフィック拡張する。
sin波、やってみた。

#写真


#サンプルコード

“`
: test 400 1 do i i sin susume loop ;
test
“`

#成果物

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

以上。

JavaScriptのClassでprivateメソッドを実装すると「Parsing error: Unexpected character ‘#’ eslint」エラーになる

## はじめに
ESLintを設定している時に、以下の図のようなエラーが発生した。

今回はこのエラーを解消する方法について調べてみたのでその備忘録を残す。

## ESLintについて
https://qiita.com/yuta-katayama-23/items/5d73bbe79c19301551df#eslint%E3%81%AE%E8%A8%AD%E5%AE%9A

を参照。

## ESLintのparserを指定する
上記のエラーを解消するには、`yarn add –dev @babel/eslint-parser`等でライブラリをインストールし、後は公式にあるように以下のように`parser`を追記すればいい。

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

グランデータのマイページで初期パスワードを変更する方法

電気使用料を調べるためにマイページへログイン。
ログイン → 初期パスワード入力 →　メール認証 → パスワード変更画面
するとパスワード変更画面で「登録する」ボタンが反応しません。

しょうがないのでデバッグさせていただきました。
結論だけ書きます。

1. パスワードは「半角英数字10文字以上20文字以下で入力」。
– コンソールからsubmitを送信

“`
$(‘#submenu_password_init’).submit();
“`

無事にログインできました。

—
※デバッグ風景
エラーメッセージが出ないのでパスワードの入力規則が分かりにくかった。
（よく見たら画面に書いてありました）
![image.png](https://qiita-image-store.s3.ap-n

インタープリタを作る その33

#概要

インタープリタを作ってみた。
jsforthを使ってみた。
グラフィック拡張する。
kame作ってみた。

#写真


#サンプルコード

“`
: koch 5 walk -60 turn 5 walk 120 turn 5 walk -60 turn 5 walk ;
: koch1 koch -60 turn koch 120 turn koch -60 turn koch ;
: koch2 koch1 -60 turn koch1 120 turn koch1 -60 turn koch1 ;
koch2 -60 turn koch2 120 turn koch2 -60 turn koch2

“`

#成果物

https://embed.plnkr.co/plunk/0IqMlprttBveL5TL

以上。

webview.hostObjects が async で失敗するのをなんとかする

“`js:JavaScript
addEventListener(‘_exe.Ready’,e=>{

var url = `https://script.google.com/macros/s/SampleDeployId/exec`;
var text = `SampleText: Fixed newly exposed boat not showing up in the boat yard menu
Changed contraptions to drop resources and inventory objects (crates) to drop resources even
when killed with fire. Previously anything killed by fire would drop nothing.`

chrome.webview.hostObjects.exe.PostError(url,text).then(r=>{
console.log(r)// null、async失敗
})
_exe.post(url,te

【サイト高速化】Lazy Load（画像の遅延読み込み）の導入方法

# 前提
本記事ではJavaScriptライブラリ(vanilla-lazyload)を利用して、画像の遅延読み込みに対応する方法について記載します。下記の状況を想定しています。

+ WordPressを利用していない
+ PageSpeed Insightsで改善項目として「オフスクリーン画像の遅延読み込み」を挙げられた

※記載に誤りがあったり、「もっとよい方法があるよ！」という場合はご教授いただけますと幸いです。

# Lazy Loadの導入手順
## 1.vanilla-lazyloadを読み込む
下記GitHubページにアクセスし、verlok氏のvanilla-lazyloadをダウンロードまたはCDNを利用して読み込みます。
https://github.com/verlok/vanilla-lazyload

### 自分の環境にダウンロードする場合
1. 「code」ボタンをクリックし、「Download ZIP」を選択します。
1. ダウンロードしたフォルダの中にある「dist」フォルダの「lazyload.min.js」を自分の環境に保存します。
1. HTM

親のチェックボックスの状態を子のチェックボックスにも連動させるJavaScriptの書き方

## 実現したい機能
– **親のチェックボックスにチェックが入ったら、子のチェックボックスにもチェックを入れる**
– **親のチェックボックスでチェックが外れたら、子のチェックボックスからもチェックが外れる**
– **子のチェックボックスでチェックが入ったり、外れたりしても親のチェックボックスは反応しない**

## サンプルページ
https://kaibara.github.io/js-checkBox/

## Github
https://github.com/kaibara/js-checkBox

## コード
### HTML

“`index.html

• 親チェックボックス
  • 子チェックボックス1
  • シフトで負の値を与えるとどうなるのか？

    左シフトと右シフト（符号なし）に負値を与えてみます。

    実行環境は macOS 12.1 (Intel版) のターミナル

    “`Console:ターミナル
    $ node
    Welcome to Node.js v16.13.1.
    Type “.help” for more information.
    > (1<<(-1)).toString(16) '-80000000' > (1<<(-2)).toString(16) '40000000' > (1<<(-3)).toString(16) '20000000' > (1<<(-31)).toString(16) '2' > (1<<(-32)).toString(16) '1' > (1<<(-33)).toString(16) '-80000000' > (0x1234<<(-4)).toString(16) '40000000' > (0x1234<<(-8)).toString(16) '34000000' > (0x1234<<(-16)).toString(16) '12340000' > (0x1234<<(-32)).t

インタープリタを作る その32

#概要

インタープリタを作ってみた。
jsforthを使ってみた。
sandbox作ってみた。

#フィボナッチ数列

“`
: fib 7 0 1 rot 0 do swap over + dup . loop ; ok
fib

1 2 3 5 8 13 21
“`

#九九

“`
: kuku 10 1 do 10 1 do i j * . loop cr loop ;
kuku

1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81
“`

#fizzbuzz

“`
: sp 32 emit ;
: fizzbuzz 100 1 do i 3 mod

別の配列から重複しない値の配列を作り直したい

配列A と配列Bにそれぞれ値があるが、配列Aに
含まれる値を
取り除いて配列Bを作り直したい

“`js
const list = [
{
id: ‘f7747f80-9386-11eb-89b0’,
},
{
id: ‘r7747f80-9386-11eb-89b0’,
}
];

const list2 = [
{
　 id: ‘f7747f80-9386-11eb-89b0’,
},
{
iid: ‘a7747f80-9386-11eb-89b0’,
}
];

const targetList = list2.filter(o => !list.find(o => o.id === list2.id));

console.debug(1, targetList);

const allList = […list, …targetList]

console.debug(2, allList);

“`

scikit-learnやlightgbmなどのONNX形式モデルがブラウザで動作しないとき

# やりたいこと
Pythonで訓練したモデルをONNX形式でブラウザ上（JavaScript）で推論させたい。

# 使用ライブラリ
– Python
– scikit-learn/lightgbm
– onnxmltools
– JavaScript
– onnxruntime-web

# 問題
[JSのサンプルコード](https://github.com/microsoft/onnxruntime-inference-examples/blob/main/js/quick-start_onnxruntime-web-bundler/main.js)通りに書いても`session.run()`部分で`412398８`のようなエラーが出て動かない。

# 解決法
PythonでモデルをONNX形式に変換する際、`zipmap`オプションを無効にしないとブラウザでは動かないらしい。
例えば、LightGBMモデルだとこんな感じ。

“`py
import onnxmltools
onnx_model = onnxmltools.convert_light

javascriptでRPG＃１４

###こんにちは
今回は、石の採掘を作っていこうと思います
では、作っていきます

####つるはしの大きさ

今回から項目ごとに太字で書いていきます
では、前作ったつるはしの大きさが大きすぎると思ったので、小さくします

“`main.js
//石のツルハシ表示
if(pl[“stone_pickel”]==1&&map_r==3){
ctx.drawImage(system[“stone_pickel”],0,0,32,32,0,64,64,64);
}
“`
この文章を、石のつるはし表示というところと、交換してください
これで、つるはしを入手してから、アイテム欄を確認すると、小さくなっています

####装備の確認

では、次にいま装備しているアイテムは何かを見れるものを作ります

main.js

“`main.js
“use strict”;
const pl = {
“x”:0,
“y”:0,
“map”:0,
“stone_pickel”:0
}
const system

ExpressとMySQLを使用して検索機能を作る方法(部分検索も実装する！！)

##目的
アパレル商品のデータを調べるときに用いる検索機能を作る。
該当する商品名を入力することで画面に出力。（部分検索も取り入れる）
該当しない商品はデータがありませんと出力する。

##使用ツール

“`
“express”: “^4.17.2”
“ejs”: “^3.1.6”,
“morgan”: “^1.10.0”,
“mysql2”: “^2.3.3”
“`

npmを使用してパッケージをインストール。
“`npm i express ejs morgan mysql2“`
※mysql2は[mysql]というパッケージがある。パフォーマンス重視ならmysql2を選択。

データベースGUIは[A5:SQL Mk-2](https://a5m2.mmatsubara.com/)を使用。

##構成ファイル

“`
datasearch
—node_modules
—roots
routing.js
—views
data.ejs
style.css
—package-lock.json
—package.json

propsと$emitを使って親子間のデータを更新する

##やりたかったこと
ハンバーガーボタンをクリックしてメニューを開閉、
この時ハンバーガーボタンは三本線からバツマークに変わる。
開いたメニューの後ろをクリックしてもメニューが閉じる（ハンバーガーボタンも三本線に戻る）

子コンポーネント：ハンバーガーボタン
親コンポーネント：ハンバーガーメニューが置いてあるヘッダー
（別コンポーネントに開閉後のメニュー）

## 試したこと
子コンポーネントでは、下記の記述をしていました。

“`Vue:Child.vue(ハンバーガーボタン)