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

[HTML, JavaScript]formaction動かない…

# はじめに

「登録する」ボタンを持つ登録フォームに「プレビュー」機能を追加するときのお話。

プレビュー機能はPOST送信したいので、1form内で2つのsubmitボタンを置きたい、という形になる。

“`php

// // 追加したい

“`

少し前ではJSで遷移先を変更したり、サーバーにリクエスト送ってからsubmitされたinputのvalueの値で処理内容変えたりとかやりたいことのわりに結構面倒なことをしなくてはいけなかったらしい。

※参考：JSでの制御

[単一フォーム に 複数サブミット を配置して 遷移先 を切り替える 方法](https://garafu.blogspot.com/2017/04/one-form-multiple-submit.html)

※参考：サーバーでの制御（PHP）

[PHP

【初心者向け】 console.log() の引数にオブジェクト+メソッドを入れると想定した値が得られないかも

# はじめに
初心者です。間違っていることを言っているかもしれません。
お気づきの点があれば、コメントで教えていただけると勉強になります。

# 想定している読者
– 私のように、初心者の方
– 私のように、console.logで変数の値を追っていたら変な値がでてびっくりした方

# console.log()はメソッドの戻り値を出力する
console.log()は、引数に「(メソッドで処理した)オブジェクトを取るとき」と「オブジェクト+メソッドを取るとき」で出力される値が違います。
具体的には以下のように違いがでます。

“`javascript:引数がオブジェクトの時
const array = [1, 2, 3];
array.push(4);
console.log(array);
// => (4) [1, 2, 3, 4]
“`
“`javascript:引数がメソッドの時
const array2 = [1, 2, 3];
console.log(array2.push(4));
// => 4
“`
上の例では引数がオブジェクトなので、オブジェクトが出力さ

Recursion（再帰）を理解する

## 再帰関数とは
自分自身を呼び出す関数のこと。ループと似ており同じコードを何度も実行するので、無限再帰を防ぐための条件が必要になる。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#recursion

## 再帰のコードを書くときのポイント

* 実際の値を当てはめて、コードの流れを考える
* どのような関数をどこで呼び出すか考える
* ベースケースとリカーシブケースを考える
* 「リカーシブケース」・・・何を対象に再帰処理を継続していくか（ループの繰り返し処理にあたる部分）
* 「ベースケース」・・・どういう条件を満たしたら再帰処理を止めるのか（ループ終了）
* 木構造で考えると分かりやすい

## 実際にコードを分解してみる

* じゃんけんの組み合わせ（下のサイトからコード参照）

https://medium.com/@sidiousvic/visualizing-recursion-b8107bd56b01
“`js
const rockPaperScissors = (r

explorer.fileNestingへの誘い～エクスプローラーを見やすくしよう！～

# Abstract

VScodeのエクスプローラーは、アイコンテーマの拡張機能をインストールするなどによって、大変みやすくなります。しかしNode.jsなどで開発を行なっていると、設定ファイルが大量にトップディレクトリに存在することで、目的の設定ファイルが探しにくいということがあると思います。そこで本記事では、そのような悩みを解決し得る機能、 Explorer file nesting を解説しようと思います。
本記事ではまず Explorer file nesting が何をするものなのかについて紹介したのち、核となる`explorer.fileNesting.patterns`について基本から特殊変数の一覧と意味を紹介します。
この機能使いこなせば、エクスプローラーの表示が更に見やすくなり、QOLが向上するに違いありません。
本記事を読み終えると、例えば以下のようなエクスプローラーにすることができ、package.jsonに主な設定ファイルを集約するようなことができます。
![image.png](https://qiita-image-store.s3.ap-northeas

RailsのWebpackerがコンパイルしているのにJavaScriptを実行してくれない、ホットリロードが効かない

# はじめに

以前、Dockerを利用したRails+Webpackerの環境を作成したのですが、改めて作成する機会がありやってみたところ、webpackでつまづいてしまったのでその個所をまとめます。

# 問題

## 1. Webpackを設定したがコンパイルが行われない

`/bin/webpack-dev-server`を起動したところ、`public/packs/manifest.json`ができるけれども、`public/packs/js`のディレクトリは作成されなかった。また`/bin/webpack`を実行するとコンパイルが実行されていたが、なぜかJavaScriptは読み込まれておらず、うまくコンパイルが行われていないようだった

以下の記事をみつけた

https://qiita.com/undrthemt/items/52a557cb937d133b7140

`./config/webpacker.yml`のホストが`localhost`になっていたので、docker-compose.ymlのwebpackerコンテナの名前に変更することでJavaScript

Vue.jsのはじめにつまづいたエラー

触り始めたときにつまづいたことをメモしていきます

# vue/no-unused-components
コンポーネントをインポートしているのに使用してないとエラーになっちゃう。
エラーにまでしなくてもよくない？と思うけど…
例えば以下のコードだとエラーが出る。
“`

“`

`MyHeader.vue`のコンポーネントをインポートしておいて使用していないので、
`vue/no-unused-components`のエラーになっちゃいます。

# vue/multi-word-component-names

・ファイル名　→　パスカルケース
・HTML内　 →　ケバブケース
・JS内 →　キャメルケース
参考
[【

vimeoでendedイベントを取れないとき

vimeoを利用し、同一のiframe内で動画を連続再生したいという要望。
ところが、playerのendedイベントがなぜか1つめの再生のものしか取れない。
そのような状態でもgetEndedメソッドは使えたので、力業。
“`javascript
setInterval(function () {
player.getEnded().then(function (ended) {
if (ended) {
// ここで必要な処理
}
});
}, 100);
“`
もっといいやり方はないかな？

JavaScriptで0パディングを行う方法

# 0パディングとは
ゼロパディングとは、数値を文字として表現・表示する際に、指定された桁数に足りない分だけ左右に「0」を追加する処理のこと。決まった長さ（固定長）の文字列に変換したいときに行われる。※1

この処理をJavaScriptで行いたい場合、非常に簡単に実装することが可能です。

## String.prototype.padStart()メソッド
0パディングを行うためにはpadStart()メソッドを用います。
padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

使用方法としては第一引数に設定したい文字数、第二引数に埋める文字です。
例えば3桁で表示したい場合は下記のようなコードになります。
“`
let num =”6″
console.log(num.padStart(3, ‘0’));
“`
出力結果
“` “006” “`

これが仮に初めから3桁の数字が用意されている場合は0を挿入しません。
“`
let num

先頭の文字を判定して必要に応じて削除する方法（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アプリを作ってみた

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

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

“`html:todo.html