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

オブジェクトとクラスをjavaScriptとpythonで比べる

紛らわしいので、記事にして、アウトプットしておく。

クラスandインスタンス化

javaScript

“`javascript
class Person {
run() {
console.log(“run”)
}
}
const person = new Person();
person.run();
“`

python

“`python
class Person(object):
def run(self):
print(“run”)

person = Person()
person.run()
“`

__init__とconstructor

javaScript

“`javascript
class Person {
constructor(name) {
this.name = name;
}
run() {
console.log(

同一form内の押すボタンによってaction内容を変更する

## 概要
編集ページを作っている際に同じformタグ内に複数submitボタンが欲しい場合があったので、同一フォーム内で押すボタンによって、actionの内容を変更する方法を記載する

展開しやすいようにjQueryなどは使わず、素のJavaScriptで記載します。

## 実装イメージ

今回は同一ページ内に以下のようにbuttonタグを配置して、押したボタンによって指定のurlを叩くといった動作をさせます。

## 完成ソース

“`html

出勤

axiosでページ遷移してフラッシュメッセージを出す！

# [何をするか？](#-2.何をするか?)
WEBサービス内でコンテンツを削除したりする際にモーダル画面を出す時は
Vue.jsでやったりする方が楽だったりします。

その際にaxiosを使用して削除実行後に特定のページ、または同一ページに遷移した後に
フラッシュメッセージを出したいとします。いや、出したい。

削除用ルーティング
“`web.php
Route::post(‘/delete/{id}’,’DeleteController@idea_delete’)->name(‘delete’);
“`

下記の様に削除ボタンがあったとしましょう。
今回は簡単な例なのでController内の記述は省きます
propsで削除する対象のidとweb.phpに記載してるルーティングを記載
ちなみに文字列をpropsで渡す場合は「:」付けるとエラーになります。
“`item_detail.blade.php

インラインスクリプトをデバッグする方法

# はじめに

インラインスクリプト(htmlのscriptタグに書かれたjavascript)をデバッグするには、サーバに配置したhtmlファイルなどを書き換える必要があります。
例えば、[このようにして](https://qiita.com/madobon/items/cf1a22b7960840bb1a65)。
つまり、手の届くところにhtmlファイルがないとデバッグできません。

しかし、それができない状況に追い込まれました。

そうしたときにどのようにしてインラインスクリプトのデバッグを実現するのか?
これについて、私が実際に使った方法を書き残しておきます。

本文の手順1と2については状況によっては不要もしくは代替手順が必要です。
例えば、htmlのデバッグしたいscriptタグ内にベタ書きでスクリプトが記述されている場合は不要です(その場合の代替手順については本文の「手順」節の次節にて提案します)。

しかし、今回私が遭遇したケースのように、jsがどこかのタイミングで対象scriptタグ内に外部jsファイルを書き込んでいる場合は、手順1と2との両方を行うことになるかと思い

Beebotte の REST API と MQTT の組み合わせを公式情報を見つつ試す（curl と Node.js）【2022年4月版】

過去に、以下の記事でも扱った [Beebotte](https://beebotte.com/) で、REST API と MQTT を組み合わせて使う話です。

– [MQTTブローカーとしても使える Beebotte で MQTT.js を使った Pub/Sub（Node.js で実装）【2022年4月版】 – Qiita](https://qiita.com/youtoy/items/e2539558b67e708b905d)
– [Beebotte のダッシュボードで M5StickC から送った数値をグラフ化する（UIFlow ＋ MQTT でデータ送信） – Qiita](https://qiita.com/youtoy/items/b65ddfc89a03117a0ee3)

## 通信方法に関するドキュメントを見てみる
### Beebotte の MQTT
MQTT を使う話は、冒頭でも掲載していた[過去記事](https://qiita.com/youtoy/items/e2539558b67e708b905d)をご参照ください。

### Beebotte の R

WebAssembly基礎知識編

## WebAssemblyとは

ブラウザでプログラムを高速実行するための「ブラウザ上で動くバイナリコードの新しい仕様」であり、特定の技術を表す用語ではない

## 技術的背景
・多彩なコンテンツの表示やアニメーションなど、重い処理が求められるようになった

・インターネットが普及したことでwebサイトのアクセス数が激増し、多くのリクエストを処理しなければならなくなった

・スマホなど、PCと比べてスペックの低い端末などでの閲覧が多い

・サーバ側の負荷分散などは日夜行われているが、スマホなどにかかるリソースの圧迫に関してはあまり考えられていないのでは?

## JavaScriptを速くする試み

[Just In Timeコンパイルの採用](#just-in-timeコンパイルの採用)

[asm.jsの登場](#asmjsの登場)

[WebAssemblyの登場](#webassemblyの登場)

## Just In Timeコンパイルの採用
JITコンパイルの採用により従来の7倍ほど速くなったが、JavaScriptが動的型付け言語であるが故にJITコンパイルにも[欠点

【React / Next】関数コンポーネント(Functional Component)のpropsをジェネリクスにして汎用的に使いたい

# やりたいこと
– TypeScriptで共通コンポーネントを作成する際、抽象度を上げて汎用的に使いたい
– ジェネリクスを使って汎用性を上げる

# 想定ケース
– テーブルコンポーネントを作成して、共通部品として使用する
– 共通コンポーネントへは、「レコードデータ / カラムデータ / ヘッダー情報」 を props で渡す
– 今回はヘッダー情報のみ、フロントで保持する

# コード
## 型情報
“`typescript:types/table.ts
type Props = Partial & {
width?: string | number;
};

// ヘッダーのlabelと幅を定義、さらにデザイン済みのReactNodeを含める
type ColumnObject = {
headerLabel: string;
headerWidth?: string | number;
// itemの幅はヘッダーの幅と同一とするため、headerWidthの値を使用
item: (_props: Props) => Rea

2011年のJavaScript本は古い – 2022年、freeCodeCamp日本語版の紹介

## 2011年のJavaScript本は古い
[パーフェクトJavaScript (PERFECT SERIES 4) | 井上 誠一郎, 土江 拓郎, 浜辺 将太 |本 | 通販 | Amazon](https://www.amazon.co.jp/dp/477414813X)

先日久方ぶりに出社した際にフロアの隅にたたずんでいる本を見つけ読んでみたものの、時代を感じる内容だったのでそのメモとポエムです。「パーフェクトJavaScript」。2011年の本である。古い（進次郎構文である）。
目次: https://gihyo.jp/book/2011/978-4-7741-4813-7

## 技術書は高い

買うか借りるか。どうやって手に入れるかの選択肢はこんな感じではないだろうか。

– 買う
– メリット: 読める。筆者に対価を払える。何度

【rails入門】javascriptを用いてカーソルを制御する

# はじめに
皆さんこんな経験ありませんか？
—


ログインするときメールアドレスの次にパスワードを入力しようとしたけど、保存してるパスワードとか予測変換とかでパスワードの入力欄が隠れてしまう！！
—
# 今回やること
javascriptを用いてメールアドレスを入力し終わってenterを押すと自動でパスワード入力欄にカーソルが合わさるようにする

# 早速やっていきましょう！
前提としてrailsでdeviseというGemを使用してログイン機能を実装しているとします！
### 1.現状のコード
“`html:views/users/sessions/new.html.erb

ログイン

※登録したメールアドレスとパスワードを入力してください。

<%=

scrollイベントを用いずに「topから〇〇pxスクロールしたらどうのこうの」する

## やりたきこと
scrollイベントを用いることなく、「topから〇〇pxスクロールした」瞬間を検知したい。

## 結論
`IntersectionObserver`で`document.body`を監視し、`observer`の`rootMargin.top`に境界となる値を設定する。

“`ts:Typescript
const border = 100; // 100pxスクロールしたらどうのこうのする

const option = {
root: null,
// rootMargin.topに境界を、rootMargin.bottomにbodyの高さを設定
rooMargin: `${border}px 0px ${document.body.clientHeight}px 0px`,
threshold: 1
};

const callback = (entries: IntersectionObserverEntry[]) => {
// IntersectionObserverEntryはundefinedの可能性があ

【TypeScript】TypeScriptの第一歩

# 概要
TypeScriptをチャレンジ、最初の第一歩を踏み出したい方向けの記事となります。

# 環境・前提
PC：MacBook Pro
使用エディタ：VSCode

`npm`というパッケージ管理システムを利用するため、Node.jsが必要になります。
『[こちらのダウンロードページ](https://nodejs.org/ja/download/)』から(LTS※推奨版を)ダウンロード、インストールしてください。

★Node.jsインストールすると「npm」というコマンドが使用できるようになります。

“`sh
#　執筆時点の各バージョン
node -v
v16.14.2

npm -v
8.5.0
“`

# 手順

## プロジェクトの初期化
まずは、Mac標準のターミナル開き、以下のコマンドを入力していきます。

“`sh
# 任意のディレクトリ内で作業ディレクトリを作成 & 移動
mkdir sample_frontend
cd sample_frontend
“`

“`sh
# VSCodeを開く(VSCodeが開いたら「command + jキー」を

ESP32とサーボを使ってノーコードプログラミング

前回の投稿「[ESP32＋QuickJS＋Blocklyの例](https://qiita.com/poruruba/items/a3e53ed75cdeae6dfec8)」に引き続き、以下のJavascript実行環境のファームウェアを使ったBlocklyをやっていきます。

電子書籍：M5StackとJavascriptではじめるIoTデバイス制御

https://poruruba.booth.pm/items/3735175

今回は、M5StickCを使います。また、M5StickC用に最適なサーボハットがあります。

https://www.switch-science.com/catalog/6076/

サーボは、実はノーコードプログラミングでの操作のリアクションとしてインパクトがあるので、ちょうどよい素材になるのではないでしょうか。
M5StickCとサーボ以外に用意するのは、ストローと折り紙です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/1b73

モジュールバンドラーってなに？

## モジュール化とは
モジュール化とは、別ファイルに分割すること。コードの管理をしやすくすることで、大規模開発などにも対応できる。
* 他のコードとの依存性を少なくし、変更、拡張がしやすくなる
* 変数名の競合をさせないことで、名前空間の汚染を防ぐことができる
* 機能ごとにモジュール化するため、再利用がしやすい

## モジュールバンドラーとは

> **モジュールバンドラーは複数のJavascriptファイルの依存関係を解析して、一つのファイルとしてまとめてくれる（バンドル）機能**があります。モジュールバンドラーによってバンドルされたファイルはそのまま読み込ませて使用することができます。これにより、開発者はファイルの依存関係を気にすることなく、Javascriptファイルを使用することが可能になりました。依存関係を気にすることがなくなったおかげで、大規模な開発などでもJavascriptを導入しやすくなりました。
>
引用：[https://it-kyujin.jp/article/detail/1675/](https://it-kyujin.jp/article/deta

XSSバイパス・マニュアル【HTML+JavaScript】

# 本記事の対象者
・XSSとは何なのか、 __既にある程度理解している人__。
・XSSについてはあまり理解できていないが、 __気が付いたらセキュリティ部署に配属されてしまっていた人__ 。

# XSSとは？
XSSは、__クロス・サイト・スクリプティング__ の略で、Webサイトの脆弱性を利用して、第三者である __別のクライアントで任意のJavaScriptを実行する攻撃__ です。

任意のJavaSciptを実行する事で、 __Cookie情報を抜き取って他人のアカウントに不正にログイン(セッションハイジャック)__ したり、 __ユーザーの入力した情報を全て別のサーバーへ送信(データ漏洩)__ させるといった事ができます。

### 注意事項

::: note warn
__本記事では、意図的に「攻撃する側の目線」で、実践的に攻撃方法などを紹介いたします。__
__しかし、実際にこれらの攻撃を利用して、第三者のウェブサイトを改竄した場合などには、犯罪となってしまう可能性があります。あくまでも、セキュリティを確保するという目的の上でご利用ください。__
:::

# X

個人的GreaseMonkey頻用パタン

# 前書き

GreaseMonkey(以下`G.M.`と呼ぶ)のスクリプトは、スクラッチで書くように何も考えずサクサクと書きたいです。
なので、私がチートシートとして使うために、実際によく使っているパターンをまとめておきます。

# 本文

## 初期化処理
G.M.を使うときに私は、windowのloadイベントのリスナーを追加して、やりたいことを記述した関数をそこで実行するようにしています。

“`javascript
// ==UserScript==
— 省略 —
// ==UserScript==

//////////////////////////////////////////////////////////////////////////////////////////////
// ここに直に書くと、DOMが読み込まれる前に実行されるので、addEventListenerと関数/変数定義以外は記述しない。
// なぜなら作ってきた大抵のG.M.スクリプトは、特定ページのDOMに対して処理を行っているから。

let v1 = 0;
const f1 =

split()　文字列を分割　JavaScript

## 用途
文字列を分割して使いたい時に使用する。

## 使用方法
“`js:書き方
var hoge = “文字列”;
hoge.split(区切り文字や正規表現, 分割数);
“`
文字列を任意の場所で分割することができる。分割数は省略できる。

“`js:例
var hoge = “01-02-03-04-05-06”;
var array_hoge = hoge.split(‘-‘, 4);

console.log(array_hoge);
// [“01″,”02″,”03″,”04”]
“`

“`js:応用
var hoge1 = “2000-01-02”;
var hoge2 = hoge1.split(‘-‘)[0]; // 「-」で区切って配列に入れた後の1番目の文字列
var hoge3 = hoge1.split(‘-‘)[1]; // 「-」で区切って配列に入れた後の2番目の文字列
var hoge4 = hoge1.split(‘-‘)[2]; // 「-」で区切って配列に入れた後の3番目の文字列

console.log(hoge1);

iPhone の safari で２回目以降の window.open できない → できた！

# したいこと

親画面から子画面のポップアップをしたい。

子画面が無ければ新規で起動し、あればそれをアクティブにする。
（つまり開く子画面は１つのみであり、無限増殖しない。）

# 困った現象

ほとんどのブラウザは以下の方法でＯＫだったはずですが・・・

親画面
“`html:old1.html

旧 親画面

子画面起動

特定のdom要素すべてを一括変更するワンライナー

時々使いたくなるのだがいつも方法を忘れるのでメモ。chromeのコンソール等で気軽に使う目的で一行にしています。

“`javascript
// あるクラスのついた全要素を非表示にする
[…document.getElementsByClassName(“some-class”)].forEach((e) => e.style.display = “none”)
// あるタグの全要素にクラスを足す
[…document.getElementsByTagName(“div”)].forEach((e) => e.classList.add(“some-class”))
“`

# 解説
## querySelectorAllではダメな理由
querySelectorAllの戻り値はNodeListであって、ライブなものではないから。getElementsByXXXはライブなオブジェクトを返すので、そこのプロパティを変えると実際の表示が変わる。[参考](https://developer.mozilla.org/ja/docs/Web/API/Document/queryS

javaScriptからimgタグの情報を取得しようとしたけど[null]だった話

# ことのはじめ

https://qiita.com/hideya670/items/57395a4edde5923c5c9f

以前にゲームの要件定義をしてそもそも`javaScript`から`html`の`img`をいじれるのかと疑問におもって実験した｡

## 起きたエラー
以下の文で`img`タグをいじろうとした
“`javascript:test.js
let img = document.getElementById(“humanCard1”);
img.src = “./img/c01.png”;
“`
しかし､帰ってきた答えは
“`
null
“`
nullなので､`src`プロパティをいじろうとしてもそもそも見つからないからいじれない

## どう解決したか
`test.js`を読み込むタイミングが早かったのが原因
“`html:修正前






“`
プログラム

ブラックジャックのなんちゃって設計(js) part1

# はじめに
プログラミングの練習としてとりあえず作ってみる
**素人が曖昧な知識で作成しています**
jsの練習のためjsで書きます

# カードクラス
### プロパティ
* 値(j,q,kは10点となる)
* 画像

# デッキクラス
トランプのカードをまとめたもの
### プロパティ
* カード一枚一枚
* すべてのカードを入れたリスト
* カウンター
### メソッド
* デッキを混ぜる(リストの並びをぐちゃぐちゃにする)
* カード取り出す
* カウンターを1増やす

# プレイヤー
### プロパティ
* 自分が持っているカード(リスト)
* 自分のカードの合計値
* ブラックジャック達成
* 手札の中にAがあるかどうか

### メソッド
* カードをもらう
* 自分のカードが22以上か調べる
* 自分のカードがブラックジャックを達成しているか(aと10点札)
* 自分の手札にAがあるか(1点,10点と2つの扱いがあるため)

# コンピューター (プレイヤーを継承)
### メソッド
* 自分のカードが18以下か調べる

# 人間 (プレイヤーを継承)
### メソ