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

Node-REDのGit機能を学ぶ(5) フローをGitHubからRaspberry Pi 5へダウンロード

　[前の記事](https://qiita.com/kazuhitoyokoi/items/fa7d1f5259d99999873f)では「画像認識を行なうフロー」をGitHubへアップロードしました。本記事ではGitHub上に共有されているフローをダウンロードする方法を紹介します。ここでは開発環境と本番環境の分離したいケースを例として、Raspberry Pi 5のNode-RED環境にダウンロードしてみましょう。

# アプリ開発における開発環境と本番環境の分離
　産業向けIoT分野では、Node-REDを搭載したエッジデバイスが複数のベンダーから提供されています。これらデバイスでフローを開発する際、多くのフロー開発者はGit機能を有効にしていないデフォルトのNode-RED環境を使ってしまっています。しかし、デバイスは低消費電力や長期稼働向けに作られているため、開発環境に適さない場合があります。性能が低いこともあるため、「フローエディタの動作が遅い」、「デプロイボタンを押した後の待ち時間が長い」などの問題が発生することがあります。デバイスのGit機能を有効にすることで、開発環境と

Node-REDのGit機能を学ぶ(4) フローをGitHubへアップロード

　本記事では変更履歴を作成したNode-REDのフローを、GitHub上に共有する方法を紹介します。GitHubにフローファイルを置くことでフロー開発者は、フローをバックアップするだけでなく、他のフロー開発者に分かりやすい形で開発物一式を共有できます。本記事は、下の図の様に前回の[「フローの変更履歴を管理」](https://qiita.com/kazuhitoyokoi/items/cd80a8b7f1fd1596f13a)の続きとなります。


　もしNode-REDのGit機能を有効化していない場合は[「Node-REDのGit機能を学ぶ(1) 概要編」の記事](https://qiita.com/kazuhitoyokoi/items/56ee43658f287f80156c#git

Refused to execute script from ‘(URL)’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.エラー対応

## 前書き
開発中に下記のエラーに遭遇したので、その対処法の備忘録です。
### エラー文
“`error
Refused to execute script from ‘http://localhost:8080/2ndPage/app.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
create:7
Refused to apply style from ‘http://localhost:8080/2ndPage/style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
“`
## 原因
このエラーが意味するところは
「ブラウザが’http://localhost:8080/2ndPage/app.js’からリソースを取得しようと

Cypressで画面遷移時に失敗するエラーを解消する

Cypressテストコードを書いている最中にエラーが起きた内容とその解決策を備忘録として書いておく。

エラーの起きたコード

“`
visit(path)
wait(2 * 1000)

get(input).type(“入力フォームに入力したいテキスト”)
“`
### 課題
画面遷移の時に、読み込み時間が2秒以上かかった場合に、inputタグがまだ表示されていなくて、エラーに落ちる

↓ 解決策
“`
visit(path)

// inputのボタンが表示されるまで待つ（デフォルトで4秒）
cy.get(“input”).should(“exist”);

get(input).type(“入力フォームに入力したいテキスト”)
“`

inputのボタンが表示されるされるまで待つようにすれば解消。

—-

それでも、たまに同じ場所でエラーが出る場合があった。
cy.get(“input”).should(“exist”);
のところで、inputタグが見つかりませんでしたな内容。

### 画面遷移に時間がかかる場合がある
PCが重いなど何ら中の理由で、画面

[まとめ]有向グラフ描画ライブラリ（JavaScript）

## 有向グラフとは

有向グラフ（Directed Graph）とは、グラフ理論において、エッジ（枝、リンク）に方向性があるグラフのことを指します。有向グラフは、ノード（頂点）のセットと、これらのノードを結ぶ有向エッジのセットから成り立っています。

## 要素の整理

有向グラフを描画する際の主要な要素を整理します。

– ノード（Node）（節点・頂点、点）:
– グラフの基本単位です。
– グラフ内の各個別アイテムやオブジェクトを表します（例：都市、ネットワーク内のコンピュータ、人物など）。
– エッジ（Edge）（枝・辺、線）:
– ノード同士を結ぶ線です。
– 有向グラフでは、エッジには矢印が付き、一方向の関係を示します（例：AからBへの道、Webページ間のリンクなど）。
– リーフ（Leaf）:
– 子を持たないノードのことで、特に木構造の文脈で使用されます。
– 有向グラフのコンテキストでは、外部へのエッジがない（つまり、出力エッジがない）ノードと考えることができます。

## ノードの関係を表す要素

– ルートノード（

JavaScriptオブジェクト理解

# 初めに

本記事は「開眼！JavaScript」という書籍の備忘録的なまとめ。詳しく知りたい方は購入して読んでみて下さい。

## けっきょく、オブジェクト。

オブジェクトを理解すれば、JavaScriptを理解できます。

「**オブジェクトとは、名前と値を持つプロパティを格納するコンテナに過ぎない**」

この一文を心に刻んでおいて下さい。

“`jsx
const person = {name: “Jane”, age: “24”}
console.log(person.name,person.age)
“`

## 兎にも角にも、Objectを生成する。

まずは空のオブジェクトを生成してみましょう。

生成方法は２パターンあります。

– **リテラル記法**を使用する方法

“`jsx
const obj = {};
console.log(obj)
“`

– newオペレータ（Object()コンストラクタ）を使用する方法

“`jsx
const obj = new Object();
console.log(obj)
“`

現在は**リテラル記法

出る確率を調整できるサイコロ

前の投稿で、サイコロを指定回数振るプログラムを書きました。今回はサイコロの確率を変更できるプログラムを作成します。

下記サイトを参考にしています。
[出る確率を調整できるランダムテキスト（インチキサイコロ）](http://alphasis.info/2014/03/javascript-sample-fakedice/)
元サイトのプログラムは変数定義されていなかったりして動かせなかったので動作するようにし、こちら側で確率を操作できように修正しました。
numberInputsの中に正の数値を入れて、その数が大きいほど、出やすくなります。何も入れない場合は全て同じ確率でサイコロが振られます。どのくらいの確率になるかはprobabilityTextに表示されます。

“`html

サイコロを振る

1
2

The Best Java Full Stack Training Institutes in Hyderabad

The Best Java Full Stack Training Institutes in Hyderabad
Introduction:
Hyderabad, often hailed as the “Cyberabad” of India, is renowned for its thriving IT industry and technological prowess. With the increasing demand for skilled Java Full Stack Developers, several training institutes in Hyderabad have emerged to cater to the growing needs of aspiring professionals. In this comprehensive guide, we’ll delve into the best Java Full Stack training institutes in Hyderabad, highlighting their key

【コピペで始める】GASでつくるconnpass新着イベント通知LINEBOT

## はじめに

この記事は、「とりあえず外部API叩いてLINEBOTに通知することをGASでやりたい人」向けの知見提供を目的としています。

LINEBOTの開発準備や、GASの使い方は沢山記事があったり、公式のドキュメントも充実しているので、そちらに委譲します。

LINEBOT作成に必要なことのうち、本記事で書くこと、書かないことは以下です。

– 書くこと
– GASと連携させるスプレッドシートの前準備
– GASのコード
– 本botを作るときのちょっとしたtips

– 書かないこと
– [LINEBOTの開発準備](https://developers.line.biz/ja/docs/messaging-api/getting-started/#step-two-log-in-to-line-developers-console)
– [GASの使い方](https://developers.google.com/apps-script/overview?hl=ja)
– [GASの環境変数（システムプロパティ）設定方法](https://de

【jQuery】DataTablesでのエラー「Requested unknown parameter ‘xxx’ for row x, column x」の原因とは

# 概要
JavascriptのDataTablesを利用していたところ、`update`フォーム送信時に以下のエラーが表示されました。

“`
DataTables warning: table id=sample_table – Requested unknown parameter ‘hogehoge’ for row 0, column 5. For more information about this error, please see http://datatables.net/tn/4
“`

原因は簡単でしたが…念の為備忘録として残します。

## 原因と該当コード
上記エラーの原因は、大体がデータソースと列設定を確認して該当パラメータが正しく設定されているかどうか、にあると思います。
私もその例に埋もれず、よく確認したら`’hogehoge’`という名前のプロパティが存在していなかったのです。

以下のようにすると成功しました。

“`js
$(document).ready(function () {
var RenderTable = func

Web Bluetooth API で Characteristic UUID の一覧を取得してみる（toio を使い p5.js Web Editor上で試す）

## はじめに
ブラウザの「[Web Bluetooth API](https://developer.mozilla.org/ja/docs/Web/API/Web_Bluetooth_API)」で、接続したデバイスの Characteristic UUID の一覧を取得してみたという話です。

### 今回の内容
[過去に Web Bluetooth　API を使ったお試しをいろいろ行ってきましたが]()、「API を使ってどんなことができるか／どんな情報を取得できるか」というのをあらためて確認してみようと思い、その第一弾として今回の内容をやってみました。

それを、以下の組み合わせで試してみます。

– デバイス： toio
– 開発環境： p5.js Web Editor

なお toio の UUID の一覧は、公式の仕様のページで公開されているので、今回の仕組みを使って確認するというのを行う必要はありません。
今回は、Web Bluetooth API を使って取得した Characteristic UUID のリストが、以下の仕様に合致しているかを簡単に確認できるため、t

Pythonで非同期処理をシンプルに書けない例

## はじめに

@y_kato_eng (Yuuki Kato) さんの記事「[非同期処理をシンプルなPythonコードで説明する](https://qiita.com/y_kato_eng/items/ca0de5cf1224c807e7e5)」の冒頭に文章で書かれている処理をPythonで書いてみようと思いました。しかし、非同期処理を意図したものが同期処理になってしまい、シンプルに書けなかったので紹介いたします。

## 作成したい非同期処理
10分かけてご飯を炊いている間に、2分かけて食材を切り、5分かけて部屋を掃除するサンプルコードを書こうと思いました。
そこで、`asyncio.sleep`を使用して、10秒間スリープするタスクと、2秒スリープした後に5秒スリープするタスクの2つを非同期で実行し、全体で10秒で終わるサンプルコードを作成してみることにしました。実際に10分かけて動作させると待つのが大変なので10秒に短縮しています。

## JavaScriptでのサンプルコード

JavaScriptで非同期処理を書いた経験があるので、まずはJavaScriptでのサンプル

ビデオ付きホワイトボードアプリをアップデートしてみた

## 概要

ホワイトボード共有サービスをデザイン、機能共にアップデートしました。
[前回の記事](https://qiita.com/esakiryota/items/9297e213c4af67ce7d94)
[ホワイトボード共有アプリ Pairs Board](https://www.pairs-board.link/)
利用はもちろん無料。さらにアカウント作成必要なしなので、手軽に利用してみてください。
コストがかからない技術につきましては次の記事に書く予定です。

## 使用方法
1. 以下の画面の『ルームを作成』をクリック

2. 『表示名』『ルーム名』を入力し、『作成』をクリック
![スクリーンショット 2024-03-16 20.02.02.png](https://qiita-i

htmlでdos攻撃を作る

# 初めに
今回はDos攻撃ツール(html,css,javascript)を作っていきます。
# 警告
・本記事に掲載されているプログラムを使用して起きた問題について、一切の責任を負いかねます。
・Dos攻撃をすると刑法第234の２~3項、及び不正アクセス禁止法に違反します。このプログラムを使用する場合は、事前にテストサーバーを準備またはローカルホストなどを使用しましょう。[ローカルホストの起動方法](https://qiita.com/qqn5192/items/83da2cddf15f70d45abc “localホストをコマンドプロンプトで作る #windows10 – qiita”)
# Dos攻撃、D-Dos攻撃とは
そもそもDos攻撃（Denial of Service Attack）とは、１台のパソコンで攻撃先のサーバーに大量のリクエストまたは悪意のあるファイルまたはプログラムを送信してサーバーを破壊するもので、D-Dos攻撃（Distributed Denial of Service attack）は複数台のパソコンから攻撃先のサーバーに大量のリクエストまたは悪意のあ

ESLintで命名規則のチェックをする

# 背景

https://typescript-eslint.io/rules/naming-convention/

こちらのnaming-conventionというルールで命名規則のルールを設定できるということを知り、業務で導入しようと思い調査しました。

# 実現したいルール
| カテゴリ | 返り値 | case |prefix|suffix|
| —- | —- | —- | —- | —- |
| ①型エイリアス | – | PascalCase | – | Type |
| ②変数,関数,メソッド,引数 | boolean | camelCase | is,need,has,should | – |
| ③変数,関数,メソッド,引数 | boolean以外 | camelCase | – | – |
| ④プロパティ | – | snake_case,camelCase | – | – |
| ⑤定数 | – | UPPER_SNAKE_CASE | – | – |

# 完成したルール

ruleの適用順は[こちら]((https://typesc

TypeScript Webアプリケーションの構築コンポーネント

> 💡 主題：このTypeScriptシリーズブログを続けます。今度は、どうやってTypeScriptを使って、コンポーネントは開発を紹介します。このブログで、TypeScriptの「クラス」と「インターフェース」について学び、そして、簡単な商品リストのコンポーネントを作成します。
– [1 クラス](#クラス)
– [1.1 クラスの定義とインスタンス化](#クラスの定義とインスタンス化)
– [1.2 コンストラクタ](#コンストラクタ)
– [1.3 属性とメソッド](#属性とメソッド)
– [2 クラスの特性](#クラスの特性)
– [2.1 abstractキーワード](#abstractキーワード)
– [2.2 インターフェイス](#インターフェイス)
– [2.3 継承](#継承)

# クラス
## クラスの定義とインスタンス化
TypeScriptでのクラスは、`class`キーワードを使って定義されます。例えば、以下の通り、Productを定義します。
“`TypeScript
class Product {
}

Kotlin Multiplatform Javascript版 Day1

# 概要
(個人メモ)
NodejsやBrowser向けのKotlin Multiplatformプロジェクトのテンプレを作成

# ソース
https://github.com/kyoya-p/samples/tree/51f9cc7d69292f4e9430d21590f635a9ed928518/2024/KMPs/js1

# 実行
“`sh:nodejs
gradlew jsNodeRun
“`
標準出力に`Hello World!`が表示される。

“`sh:browser
gradlew jsBrowserRun
“`
開いたBrowserのConsoleに`Hello World!`が出力されている。

Javascript 配列・連想配列

Javascript の勉強した内容のメモ書きをしていく

配列の場合、インデックス番号指定でデータを取得する。

“`js:配列
const dog = [
‘秋田犬’,
‘ポメラニアン’,
];

console.log(dog[1]);
“`

連想配列の場合、メンバー毎にドット(`.`)で区切り、欲しいデータを取得する。

“`js:連想配列
const dog = {
‘秋田犬’:{
‘color’:’茶色’,
‘size’:’big’
},
‘ポメラニアン’:{
‘color’:’茶色’,
‘size’:’mini’
}
};

console.log(dog.ポメラニアン.size);
“`

JavaScriptの個人的メモ

## やりたいこと
使用言語はJavaScript
Paiza.ioのオンライン環境で実行
塗りつぶしのマス同士の間隔をX軸ごと、Y軸ごとに取得したい
X軸だと座標(3,2)と座標(4,2),座標(2,5)と座標(9.5),座標(4,7)と座標(7,7)の間隔を配列に取得
重複する間隔は不要

## コード例
“`test.js
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var beforeX;
var afterX;

var beforeY;
var afterY;

var beforeID;
var afterID;

//ボール構造体
function ballStruct(){
this.ID=””;
this.X=””;
thi

TypeScript 基礎とプロジェクト設定

>💡 主题と焦点：TypeScriptの基本概念、型システムの利点、およびTypeScriptプロジェクトの設定方法（`tsconfig.json`の設定を含む）について紹介します。

– [1 紹介](#紹介)
– [2 どうしてTypeScript](#どうしてTypeScript)
– [3 エンバイロメント設置](#エンバイロメント設置)
– [3.1 インストール](#インストール)
– [3.2 コーディング](#コーディング)
– [3.3 コンパイル](#コンパイル)
– [3.4 コード実行](#コード実行)
# 紹介
現代のWeb開発において、JavaScriptは不可欠な部分となっています。しかし、プロジェクトの規模が拡大するにつれて、JavaScriptの弱い型付けと柔軟性が時に見つけにくいバグや複雑なメンテナンス問題を引き起こすことがあります。これはTypeScriptが生まれた背景です。

TypeScriptは、Microsoftによって開発されたオープンソースの言語であり、JavaScriptの基盤の上にオプショナルな静的