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

先頭の文字を判定して必要に応じて削除する方法（JavaScript/Vue）

javaScriptで先頭の文字を判定して、それが特定の文字の場合削除する方法です。

例えばAPIから送られてくる値が
“`userName: “,山田,鈴木,吉村”“`
だとします。

この値をそのまま画面上に表示してしまうと先頭にカンマが表示されてしまい、よろしくありません。
画面表示の際に先頭のカンマを削除して表示するのが好ましいです。
それを実現するためにはstartsWith()メソッドとslice()メソッドを用います。

# 方法
まず、先頭の文字がカンマかどうかの判定を行います。
いきなり先頭の文字を削除せず。一度判定を挟むのはAPIの仕様が変わり先頭にカンマが入らなくなった場合に山田の山を削除してしまうことになるからです。
先頭の文字がカンマであるかの判定はstartsWith() メソッドを用います。

startsWith() メソッドは文字列が引数で指定された文字列で始まるかを判定して true か false を返します。
startsWith() メソッドがfalse、つまり先頭の文字がカンマでない場合はそのまま表示、startsWith() メソッド

サーバーレスの静的ウェブアプリケーションの公開について

React で静的ウェブアプリケーションを作成し、静的ウェブコンテナとして作成した Amazon S3 バケットに配備して公開するまでの大きな流れを説明します。

**防御壁:**

* 私が、社内でプログラミングに不慣れな後進へ勉強会で説明するために作成している文書です。内容は、初回の投稿のままではなく、随時更新します。
* 私は、C、Java、.NET、Perl や Python などを主に業務で使用してきたため、最近の ECMAScript は経験が浅いです。私も学びながら、教えながらの文書のため、正確性に欠く部分もありますが、ご容赦ください。
* 私は、AWS については AWS Certified Solutions Architect – Associate レベルの資格を保有しています。Professional ではありません。
* 私は、カタカナ語の語尾にある長音記号を省略しないスタイルです。

—

# はじまりの React アプリケーション

## React とは

ウェブアプリケーションの UI 構築のための JavaScript ライブラリです。

Me

現在時間を表示させる

js:
function set2(num) {
// 桁数が1桁だったら先頭に0を加えて2桁に調整する
let ret;
if (num < 10) { ret = "0" + num; } else { ret = num; } return ret; } function showClock() { const nowTime = new Date(); //現在日時 const nowHour = set2(nowTime.getHours()); //時間 const nowMin = set2(nowTime.getMinutes()); //分 const nowSec = set2(nowTime.getSeconds()); //秒 const msg = "現在時刻は、" + nowHour + ":" + nowMin + ":" + nowSec + " です。"; document.getElementB

Reactの弊害。自動テストのスクリプトを阻むステート管理を無理やり突破

# なんの話か
Reactで作られたWebページ（申込フォーム）のテスト自動化のために、Seleniumを導入しようとしたのですが、Reactのステート管理の壁に阻まれて、思ったように値が入らないーーーとなりましたが、なんとか解消したという話です。

ついでに、需要があるかわかりませんが、Seleniumテストケースを生成するExcelツールにまとめてみました。詳細は[後述](#selenium-test-case-generator)

# はじめに
Seleniumを選定した理由は以前使ったことがあり、なんとかなりそうだと思ったからです。SeleniumはSeleniumでも、ブラウザエクステンションのSelenium IDEです。
> Selenium IDE

作ったのは、これに読み込ませるテストケースを生成するツールです。

JavaScript 乱数使ってカラーコード生成

JavaScript で乱数 `Math.random()` 使ってカラーコード生成

“`
let rgbArray = […Array(3).keys()].map(i => Math.floor(Math.random() * 256));
let colorCode = ‘rgb(‘ + rgbArray.join(‘,’) + ‘)’;
“`

2度押し防止処理。なるべく共通化

### form
“`javascript:form.js
$(‘form’).on(‘submit’, function(){
$(‘form’).off(‘submit’);
});
“`

【GAS】GAS+スプレッドシートが思ったより辛かったので、EntityとRepositoryを導入する

[前回](https://qiita.com/taimax/items/d5e25214c9a2a6b43c4f)、初めてGASを触ってみたところ、思ったより辛かったので、それならばと思い、、、、

※言うまでもないですが、**個人の感想**です

:::note warn
TL;DR
結局、**辛い**
:::

※本記事は下記の記事の続きとなります

https://qiita.com/taimax/items/d5e25214c9a2a6b43c4f

## 何が辛いか

GASはスプレッドシートと組み合わせると、　VBAのように使用することができます。

JavaScriptベースなので、非常に書き味よく表操作できて嬉しいな、というところなのですが、結局の所、扱うデータがスプレッドシートに紐付いているため、行番号であったり、列番号にガッツリと依存しているため、中々辛いところがあります。

特に気をつけないで書くと、マジックナンバーの嵐となり、万が一表の構造が変わったら？と思うと、直すのが本当に大変です。
（実際に前回の記事で、記事の重複チェックをURLから記事IDに変更しよ

WebSocket Byte、Stringの送受信の検証

ブラウザからWSを通して送受信できるデータについて確認、実装を行います。

## クライアントで扱うことができるデータタイプ

[規格](https://websockets.spec.whatwg.org/#ref-for-dom-websocket-send%E2%91%A0)のレファランスから「Blob、ArrayBuffer」を扱っていることがわかりますが、[MDNのレファランス](https://developer.mozilla.org/ja/docs/Web/API/WebSocket/send)からは「USVString」も追加でサポートしていることが記載されています。
「Blob」は基本的にファイルデータを指していますが、データを転送する際に「ArrayBuffer」からバイトを転送することと大きく変わりはないため、今回はByteデータの送信で検証します。

## クライアントが受け取るデータタイプ

データ転送時とは違く、[MDNのレファランス](https://developer.mozilla.org/en-US/docs/Web/API/MessageEve

【jQuery】子要素から親要素を指定＆同一class名を持つ要素を個別に書き換える

こんにちは。E-kan株式会社の岡田です。

既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間地味に苦労したので備忘録。
ざっくり必要なところだけ抜き出すとこんな感じです。

## 変更前html
“`html

タイトル01

本文01

• 
• 
• 

タイトル02

[JavaScript]map()で連想配列から特定keyの値を取得する

# はじめに
今回は、JavaScriptのmap()について学んだことをまとめておきたいと思います。

map()の基本構文の説明後、タイトルのサンプルコードを紹介します。

# 目次
[1.mapメソッドとは](#1-mapメソッドとは)
　[1-1.基本構文](#1-1-基本構文)
　[1-2.サンプルコード](#1-2-サンプルコード)
[2.本題](#2-本題)
[3.参考記事](#3-参考記事)

# 1. mapメソッドとは

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

map()は、元となる配列から新しく配列を作るためのメソッドです。

配列の各要素に対して与えられたコールバック関数を実行し、関数の戻り値で
新しい配列を生成します。

コールバック関数の引数には
– 第１引数：現在処理されている要素の値
– 第２引数：現在処理されている要素の配列内におけるインデックス（**省略可**）
– 第３引数：現在処理している配列（**省略可**）

【JavaScript】ToDoアプリを作ってみた

![Something went wrong]()
JavaScript学習中の者です。
簡単なTodoアプリを作成しながら、理解をしていきます。
もし誤っている箇所がありましたらご指摘いただけますと幸いです。

# ボタンをクリックしたらフォームに入力した各内容tdが1行（tr）で表示されるようにする（削除機能なし）

“`html:todo.html