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

【React】Testing Libraryのロール名のメモ

Testing Libraryでロール名が分からないときがあったので書き留めておく

### h1~h6タグ
“`typescript
const xxx = screen.getByRole(‘heading’);
expect(xxx).toBeInTheDocument();
“`

### buttonタグ
“`typescript
const xxx = screen.getByRole(‘button’);
expect(xxx).toBeInTheDocument();
“`

### inputタグ　テキストボックス
“`typescript
const xxx = screen.getByRole(‘textbox’);
expect(xxx).toBeInTheDocument();
“`

### inputタグ　ラジオボタン
“`typescript
const xxx = screen.getByRole(‘radio’);
expect(xxx).toBeInTheDocument();
“`

### inputタグ　チェックボックス
“

kintone と EDITROOM の機能連携の実例解説： 自作プラグインを利用した連携３―Vite と TypeScriptの導入

# 目次

– [目次](#目次)
– [はじめに](#はじめに)
– [作業](#作業)
– [本記事中の作業範囲](#本記事中の作業範囲)
– [どうして Vite を導入できるのか](#どうして-vite-を導入できるのか)
– [なぜビルドツールを導入したいのか](#なぜビルドツールを導入したいのか)
– [開発](#開発)
– [1. Vite の導入](#1-vite-の導入)
– [2. TypeScript の導入](#2-typescript-の導入)
– [(opt.) kintoneオブジェクトの型推論を有効化](#opt-kintoneオブジェクトの型推論を有効化)
– [所感](#所感)
– [おわりに](#おわりに)

# はじめに

アップデイティットの毛利です。

前回に引き続き、弊社の「[EDITROOM](https://editroom.updateit.co.jp/)」と kintone の自作プラグインを繋いで動作させるために作業を進めていきます。

前回はこちら：

https://qi

JavaScriptのforEach文

paizaの問題集でforEach文を利用しました

“`JavaScript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
// 自分の得意な言語で
// Let’s チャレンジ！！
var lines = [];
var reader = require(‘readline’).createInterface({
input: process.stdin,
output: process.stdout
});
reader.on(‘line’, (line) => {
lines.push(line);
});
reader.on(‘close’, () => {
//入力した文字列をsplitメソッドを使って分割
const array1 = lines[0].split(‘ ‘);
// forEach文を使用して各要素をそれぞれ標準出力する
array1.forEach(function(element){
console.log(element);
});

いくつかの言語での全角スペースの挙動

## 最初に

言語によって、全角スペースが混入したときの挙動が違います。

各言語によって、どのような違いがあるのだろうかと思い、簡単に調べてみました。

### Python・Javaは、検知してエラー

全角スペースが混じってるだけで、それを検知しエラーとして教えてくれました。

– Python(3.8.2)は、`SyntaxError: invalid character in identifier`と表示。
– Java(openjdk 15)は、`error: illegal character: ‘\u3000’`と表示。

Javaは文字コードまで教えてくれるので、親切ですね。

### Rubyは、変数名に扱えてしまう

Rubyでは、日本語も変数名に使うことができ、全角スペースも変数名に使えてしまいます。

“`fullwidth_space.ruby
　 = “Hello, world!”
p 　 # “Hello, world!”
“`

上記のコードは、全角スペースに文字列を代入して出力してます。

そういうわけで、もし全角スペースが混じってもそれを検知

node.jsでファイル移動する方法

node.jsでファイル移動する方法について調べたのですが、あまり良い情報がなかったので記事にします。

よく出てくるのが、`fs.renameSync`を使う方法
“` javascript
import fs from “fs”;

fs.renameSync(‘/home/hello.txt’, ‘/tmp/world.txt’);
“`
renameというメソッド名にもかかわらずファイル移動も出来ちゃうのですが、弱点があってLinuxだとパーティションを跨ぐとエラーになります。Windowsだとドライブを跨ぐと下記のようなエラーになります。
“`
Error: EXDEV: cross-device link not permitted
“`

node.jsの公式サイトの説明
https://nodejs.org/docs/latest/api/fs.html#fsrenamesyncoldpath-newpath

解決策としては、パーティションやドライブを跨ぐ移動をしたときは下記のようなメソッドを作成すると良さそうです。
“` javascript
import

【MapLibre】アイコンにアニメーションを付ける

## はじめに
この記事は#30DayMapChallenge2022 23日目の記事です。
テーマはMovementです。
MapLibre GL JSを使ってアイコンにアニメーションを追加してみます。


https://30daymapchallenge.com/

## アイコンにアニメーションを追加する
[公式のサンプルコード](https://maplibre.org/maplibre-gl-js-docs/example/add-image-animated/)を参考に実装します。
[11日目:Colour Friday: Red](https://qiita.com/asahina820/items/5158ef09dd043dbc8c5e) で使った「赤」がつく駅名のGeoJSONファイルを使います。

“`index.html

FormDataでファイル名に日本語が含まれるファイルをPOSTすると文字化けした

? 初投稿です。
まだまだ未熟者ですので、温かい目で見ていただけると幸いです。

## やりたいこと
家庭用GooglePhotoのようなものを製作したい。
フロントはreactで製作し、Material UIを活用しUI周りを整える。
バックはexpressで製作し、multerで画像を保存する。

フロントからバックへの画像送信はaxiosを用いてPOSTする。

## 状況
題の通り、inputで選択したファイルの名前に日本語を含む場合、バック側で受け取った際にファイル名が文字化けする。

“`js:フロント
// フォームデータに画像追加
const data = new FormData()
images.map((image) => {
data.append(‘images’,image)
})

// 送信
await axios.post(
url,
data,
{
headers: {
‘Content-Type’: ‘multipart/form-data’,

JavaScriptスッキリリファクタリング 1

ネット上にあるJavaScriptのコードをリファクタリングしていく企画です。

## 元コード

食べ物のラジオボタンを選択したら、それに合わせて<select>タグの内容(<option>タグ)が変わる。
細かな仕様として、未選択の<option>タグは常に表示する。

https://gistpreview.github.io/?987d2d085c8a4f2d927706073676fa0d

“`html:元コード

• 
  果物
• 
  野菜

AWS Kinesis Video Streamsを使ってブラウザでビデオチャット

AWS Kinesis Video Streamsを使って、ブラウザでビデオチャットをしてみます。
通信プロトコルは、WebRTCです。
最近のブラウザは、カメラやマイクも使えるので、ブラウザだけでビデオチャットできてしまいます。

以下の環境で、動作を確認しました。

・Windows10：Chromeブラウザ
・Amazon Fire：Silkブラウザ
・Android：Chromeブラウザ
・iPhone：Safari、Chromeブラウザ

以下は、Windows10のChromeブラウザでの画面です。こんな感じで、同時に接続している端末の画面を並べてみることができます。すべての端末でこのような画面でみれるのは、WebRTCのおかげです。


以下の構成となりまして、御覧の通り、AWSを使うことで、ブラウザだけで実現できます。

![

Spring boot ＋ Ajax　簡易掲示板作成 (削除機能)

# 最初に
今回の記事は前回投稿した[Spring boot ＋ Ajax　簡易掲示板作成 (編集機能)](https://qiita.com/Sesoniso/items/bd40bf9b55790f3f917a)に削除機能を追加するための記事となります。
主のプロジェクト、環境構築など記事に記載していますので先にそちらをご覧ください。
[Spring boot ＋ Ajax　簡易掲示板作成 (投稿機能)](https://qiita.com/Sesoniso/items/a3c2b2c32bff09bfbbd5)

・本記事の完成ページ


# 1. サンプルコード
## 1.1 HTMLファイル
“`html:/src/main/resources/templates/top.html

Redmineのための簡単なタイムトラッカー

# Redmineのための簡単なタイムトラッカー
## 0. 変更履歴
| 1 | 2 |
|:-:|:-:|
|日付| 変更点|
|2022-11-24| Redmine に送信する時間がいつもゼロになっていた。javascript のstart=stop の場所を修正|
## 1. はじめに
### 1.1 背景
redmine は各種共同開発のために利用される。ところが、機能が多い。一方で、REST API が提供されているので、redmine をバックエンドとして、フロントエンドのツールが開発されている。自分の仕事の成果を上げるためには、作業時間の見える化が必要で、そのためのツールも、もちろんある。ところが、そのようなツールは有料だったり、個人には過大だったりする。いくつもの仕事が同時平行で、他の人のチケットを気にしない、という人のためのツールがほしい。
自分で作る。
### 1.2 設計
チケット一覧を表示するウェブページを perl の CGI で生成する。ページには javascript を埋め込んであり、ボタンをクリックすると計時を開始し、もう一度クリックすると、計時を

【jQuery】複数のプルダウンで自動計算処理

複数のプルダウンがあり、そのプルダウンで得点を選択すると合計得点を動的に表示する実装になります。

HTML
“`html
01020

01020

• 合計得点
• 点

“`

jQueryの処理
“`javascript
function sumSelectedScore() {
let totalScore = 0

【static java】静的メンバ

“`java
public static void main(String[] args)
“`
この「static」とはなんだろう。

#### staticとは静的メンバである。
ざっくり簡単に言えば

**「インスタンスを生成しなくてもフィールドやメソッドを利用できる」**

オブジェクト指向の基本原則として「インスタンスの独立性」というものがありインスタンスを生成することにより”独立性を担保”できるので
**今まではインスタンスを生成するごとに違う値を入れられていた**と思う。

“`java:インスタンス生成（例）
Man m1 = new Man();
Man m2 = new Man();
Man m3 = new Man();

//それぞれnameフィールドが用意されていた場合
m1.name = “m1”;
m2.name = “m2”;
m3.name = “m3”;
“`

#### staticを使った利用
大きく分けて　「staticメソッド」「staticフィールド」　の２つ。

“`ja

#14 Spring JavaScript 生年月日から年齢を自動計算[間違いがあったので編集中]

# #14 Spring 生年月日から年齢を自動計算[間違いがあったので編集中]
今回はJavaScriptを用いて生年月日から年齢を自動で求めるようなプログラムを記述していきます。
最初に書いておきますが、入力フォーム内に“/,-“のような数字以外の文字が含まれていても問題なく動作することができました。

# 前回まで
前回は新規登録画面を作成しました。

https://qiita.com/Jackoguro/items/db35aa456341a484254b

入力フォームに誕生日1,2という項目があります。

誕生日1は“type=”date”“を用いて入力する形式で、誕生日2は“type=”text”“を用いて“yyyy/MM/dd“形式を用いて入力します。

# 構築環境
1. 各バージョン
Spring Boot

Web音楽プレイヤーアプリ②

Web音楽プレイヤーアプリの修正および機能を追加しました

“`HTML