JavaScript関連のことを調べてみた2023年01月31日

【Rails】【Ajax】コメント投稿・削除を非同期通信化する。

# はじめに
プログラミング初学者の者です。オンラインでプログラミングを学習させて頂いてるのですが、さらに理解を深めていきたいと思い、学習したことを備忘録として、残して理解を深めていきたいと思います。
また、間違った点など、ありましたら、ご指摘いただけると幸いです。よろしくお願いします。

# 前提
Railsにて投稿アプリケーションを作成のち、投稿に対して、コメントできる機能実装済み。
今回は離乳食を投稿するアプリケーションで実装しています。

# 目標
### コメント機能が非同期で行えるようにする
[](https://gyazo.com/77a19537f3913ba1aae0c363e79f5193)

# 手順
①jQueryの導入
②コメント表示部分を部分テンプレート化
③投稿機能の非同期化
④削除機能の非同期化

# ①jQueryの導入
“`text.Gemfile
———略———
gem

Promiseの配列を順番に実行したい

# TL;DR

“`typescript
type Supplier = () => T;

export const sequence = (promises: Supplier>[]): Promise => {
if (promises.length === 0) {
return Promise.resolve([]);
}

return new Promise((resolve, reject) => {
const results: T[] = [];

promises
.reduce((p1: Supplier>, p2: Supplier>): Supplier> => {
return () => {
return p1().then((t: T) => {
results.push(t);

スマホでHTML5のバリデーション時に該当箇所にスクロールしない問題への対処方法

HTML5のフォームバリデーション、便利ですよね。

だけど、スマホだとエラー箇所にスクロールしてくれないんですよ。

色々探し回ってみたけど、jQueryでのバリデーションばっかりだったんですが、ピュアなJavaScriptでも結構簡単に解決できたのでここに残しておきます。

“`js
document.addEventListener(“DOMContentLoaded”, () => {
const form = document.querySelector(“form”);
form.addEventListener(“submit”, (event) => {
const elements = form.elements;
for (const element of elements) {
if (!element.validity.valid) {
element.scrollIntoView();
element.reportValid

【マルチスレッド】CompletableFutureについて

マルチスレッド処理で他のスレッドから戻り値がある場合がある。

戻り値を受け取る方法としてCompletableFutureがある。

マルチスレッドの中では、1つのスレッドの戻り値を受け取って処理を行いたい場合がある。

その場合、戻り値が必要な処理は、戻り値を受け取るまで処理がブロックされる。
戻り値を返す処理が終了したら、戻り値を取得し、後続の処理を行う。

CompletableFutureは前段の処理が終了したら自動的にその結果を次の処理を渡して実行するようにできる。

CompletableFutureは戻り値のある非同期処理をsupplyAsyncメソッドで起動する。

“` sample.java
import java.util.concurrent.CompletableFuture;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;

public class Samp

【SSG】なぜAstroは素晴らしいのか

Astroというフレームワークをご存知でしょうか。

https://astro.build/

昨年リリースされた比較的新しいフレームワークで、静的サイト生成を行うためのフレームワークです。
従来は静的サイト生成を行うためには、`EJS`や`Pug`といったテンプレートエンジンを利用するか、Next.jsやNuxtのようなフルスタックフレームワークのSSGモードを利用する選択肢が一般的でした。

Astroはフルスタックフレームワークよりも少ない学習コストで直感的に使えつつも、従来のテンプレートエンジンに比べ豊かな表現力を持ちつつ、アプリケーション開発に近い書き味でWebサイト制作を行える素晴らしいフレームワークだと感じたので採用するメリットなどをまとめてみようと思います。

## Astroのメリット

– 各種コンポーネントライブラリに対応
– [React](https://reactjs.org/)
– [Preact](https://preactjs.com/)
– [Svelte](https://svelte.dev/)
– [Vue]

コーディング時間を節約できる JavaScript１行コード２０点

はじめましてこんにちは、ひょうどうです。

今回は、コーディング時間を節約できる１行のJavaScriptコード２０点を紹介します。

> １）配列内の数値の最大値を取得する（配列が小さい場合）
“`
Math.max(…array)
“`
> ２）配列から重複を削除する
“`
[…new Set(array)]
“`
> ３）1 から 100 までの乱数をする
“`
Math.floor(Math.random() * 100) + 1
“`
> ４）文字列が有効な数値かどうかを確認する
“`
!isNaN(+string)
“`
> ５）現在の日時を取得する
“`
new Date().toString()
“`
> ６）変数が配列かどうかを確認する
“`
Array.isArray(variable)
“`
> ７）変数がオブジェクトかどうかを確認する
“`
typeof variable === “object”
“`
> ８）配列を文字列に変換する
“`
array.join(“,”)
“`
> ９）変数が関数かどうかを確認する
“`

アロー関数まとめてみた

書き方

“`js
// 通常の関数
function fn(number) = {
return number * 2
}

//　無名関数
const fn = function(number) = {
return number * 2
}

// アロー関数
const fn = (number) => {
return number * 2
}

// 引数が一つだと()を省略できる
const fn = number => {
return number * 2
}

// 処理が1行だと{}も省略できる
const fn = number => number * 2

// オブジェクトの返り値の場合
const fnObj = number => (
{result : number }
)

“`

正規乱数をプロットする

# 正規乱数をプロットする
前回、一様乱数を出力して、一つ一つの値を一本の縦線で表示し、なんだかバーコードみたいな画像を作ってみました。今回は、これに修正を加えて、

1. 乱数を正規乱数にする
1. 平均値・分散・中央値・最大値・最小値を計算して表示する。

ようにしてみました。出力結果が正しいかどうかをHADで検算しています。

### 正規乱数を作る
正規乱数を作るには、具体的にはどうすればいいんだろう、と検索してみると、次のサイトが見つかりました。

[Javascriptで正規分布の実装まとめ（乱数、累積分布関数など）](https://www.marketechlabo.com/normal-distribution-javascript/)

ここに、正規乱数を発生させるJavascriptの関数が記述されていたので（理屈はよくわかっていません。いえ、嘘を書きました。まったく、1ミリもわかりません）、これをそのまま使わせていただきました。ありがとうございます。

ということで、乱数を発生させる部分の関数を、`rnorm()` に書き換えて終了。

### 統計量の算出

paizaラーニング レベルアップ問題集 二分探索メニュー応用編 JavaScript 連番

連番 (paizaランク A 相当)

https://paiza.jp/works/mondai/binary_search_advanced/binary_search_advanced__sequential

# 解答例(C++の場合参考)
連番の最大の長さで二分探索する。
正整数列 A = (A_1, A_2, …, A_N) を先頭から順に見ていく。
cnt は現在見ている連番の長さ,sum はとりだした連番の個数として、
cntがmid以上になったら、とりだす。cntをリセットする。
また、Aの最後の要素でない、かつ、連番でないならば、cntをリセットする。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [n, k] = lines[0].split(” “).map(Number);
const a = lines[1].split(

独学のプログラミングのヒント

今日の洗練された時代では、すべてを簡単に学ぶことができます。たとえば、プログラミングは独学で学ぶことができます。プログラミングとは正確には何ですか？プログラミングは、コンピューター上でプログラムを作成するプロセスです。作成されたプログラムは、ソフトウェア、Web サイト、Android または iOS アプリケーションなどの形をとることができます。

本題に入る前に、重要な情報があります。プログラミングを始めたい方はDicoding Academyで学べます . Android、iOS、クラウドからフロントエンド、バックエンドのWeb開発者まで、さまざまな分野があります。これらの各フィールドには、初心者から上級者までさまざまなレベルもあります。すごいでしょ？すぐにクラスを確認して登録してください。

はい、本題に戻ります。この記事では、プログラミングを独学で学べるように、さまざまなヒントについて説明します。すでに興味がありますよね？さあ、よく見てみよう。

プログラミングとは？

![programming-eunoiamediaID.png](https://qiita-imag

プログラミング入門

皆さん、こんにちは！テクノロジーに関する有用な情報を共有しますが、より明確にするためには、プログラミングの世界です。

「プログラミング」と聞いて何を思い浮かべますか？コーディング？それともコンピューティング？まだ間違っています。ふむ、まずは基本から始めればよかった。プログラミングはプログラムです。

プログラムはどのようなものですか？プログラムは、特定の入力と出力を持つ論理シーケンスです。プログラムは、コンピューターが必要に応じて最適に機能できるように、コマンドの集まりの形にすることもできます。システムに統合されたプログラムは、Web アプリケーションや Android などのアプリケーションと呼ばれます。

さて、この議論では、プログラミングという用語を徹底的に復習します。次の説明を見てみましょう。

プログラミングとは？

eunoiamedia による報告プログラミングとは何か? 簡単に言えば、プログラミングはコンピューター上でプログラムを作成するプロセスです。作成されたプログラムは、ソフトウェア、ウェ

Firestoreでドキュメントに一括で書き込む（500件を超える場合にも対応）

# batch処理で一括書き込みできる
Firestore の batch write を使用することで、500件ずつのドキュメントの更新を行うことができます。以下は Node.js でのサンプルコードです。
“`javascript
const admin = require(‘firebase-admin’);

admin.initializeApp();
const firestore = admin.firestore();

async function updateDocuments(collectionName, batchSize = 500) {
const collectionRef = firestore.collection(collectionName);
const query = collectionRef.orderBy(‘timestamp’).limit(batchSize);
const documents = await query.get();

let batch = firestore.batch();
docu

【JavaScript】文字列への変数の埋め込み

「\`」(バッククォート)を使うと、簡単に文字列に変数を埋め込むことができる。
「\`」で括った文字列の中に、${[変数名]}の形で変数名を書けばよい。
クラスのメンバ、数式なども指定することが可能。改行もそのまま反映される。

“`JavaScript:sample
class myClass{
constructor(argName, argAge, argHeight){
this.name = argName;
this.age = argAge;
this.height = argHeight;
}
}

var hello = ‘こんにちは’;
var person = new myClass(‘penguin’, 7, 62);

console.log(`「${hello}！」`);
console.log(`「私は、${person.name}（${person.age}）です」`); // クラスのメンバ
console.log(`「大きさは${person.height/100}mです」`); // 数式
console.log(

なんとなくでReactでMaterial UI(MUI)のDateTimePickerを使ってみた

# はじめに
まず、この記事を書いている私がReact、MUI歴３ヶ月ちょっとの半端者です。
そのため、フィーリングで書いている部分が多々あります。
間違っている部分があるかもしれませんがとにかく実装するため調べてわかったことを書き記します。
# やりたかったこと
[調整さん](https://chouseisan.com/)みたいなものを作りたかった。
その中でカレンダーを押したら、選択した日時が入力されるっていう機能を実装しようと調べ始めた。
# DayPicker,TimePicker
カレンダーや時計のコンポーネントを使用して日時を決まった形式で出力してくれるコンポーネントの総称。
ライブラリとして公開されているものが「なんちゃらDayPicker」みたいな名前で公開されている。

まず、このPickerという名前にたどり着かなくてやりたいことを実現するためのコンポーネント探すのに苦労した。

MUIの他にも公開されているものはあるが、CSSを書きたくなかったのと他の部分で既にMUIを使っていたのでMUIのDateTimePickerを使うことにした。
# MUIのDateTi

Cognito Identity Pool を用いて、AWS SDK v3 の認証を行う。

Level 400 / AWS SDK v3 + Cognito Identity Pool + IAM Role + Permission
# 概要

この記事は、AWS SDK を v2 から v3 へ移行する際の方法を記載します。
要件上の問題から、 AWS Amplify は利用していません。

クライアントサイドで Cognito UserPool で認証し、 Cognito Identity Pool で認可して AWS Credential を発行し、AWS SDK を直接操作しています。
そのため、API Gateway 側で認可するなどの　サーバーサイドで実行する際は別の方法になります。

また、 IdToken の取得方法は v2/v3 で差がないので記載しません。

– see also
– [amazon-cognito-identity-js](https://www.npmjs.com/package/amazon-cognito-identity-js)

# 概要図
![image.png](https://qiita-image-store.

DateオブジェクトのgetFullYear() メソッドで6桁の数字が返ってくる

vueの画面を作成していたときに、
DateオブジェクトのgetFullYear メソッドの使い方に慣れず
苦戦したことがありましたので、メモ程度に書きたいと思います！

# 目次
　[事象説明](#事象説明)
　[間違ってた原因](#間違ってた原因)
　[解決策](#解決策)
　[まとめ](#まとめ)

## 事象説明
#### getFullYear メソッドについて

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

#### 勘違い
getFullYearメソッドという名称から
Year（年）が返ってくるのだから数字４桁の戻り値であることを期待していました。
6桁でも返ってくる事象があり、処理の連携がうまくいかないバグがありました。。。

・6桁で返ってきたときに入力していたコード
“`.ts:sample1.ts
const testDate = new Date(‘202301’) //2023年1月1日の情報をもつオブジェクトを作

SVG周りの座標変換まとめ

座標変換を理解するために、次のようなDOM構造を考えます。
（複雑さを排除するため、x と y（または width と height）は同じ値にしています）

“`tsx
export function Component() {
return (

);
}
“`

このDOM構造には、いくつかの座標系が存在します。
これら座標系間の変換にはどの行列を使えば良いかについては、次の図を見ることでわかります。
（図の数値は x 座標を表します）

![ctm.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59884/7dafa224-0faa-63cc-34

data-turbo-confirm の確認ダイアログをカスタマイズする方法

## 完成イメージ


## はじめに

Turbo では、フォームやリンクに `data-turbo-confirm` 属性をつけると確認ダイアログを表示できます。

https://turbo.hotwired.dev/handbook/drive#requiring-confirmation-for-a-visit

https://railsguides.jp/working_with_javascript_in_rails.html#%E7%A2%BA%E8%AA%8D%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0

通常はブラウザ標準の確認ダイアログ `window.confirm()` が使われます。

https://developer.mozilla.org/ja/do

【AWS】ローカルからプライベートサブネットにあるRDSに接続したい

## 現在の構成
ローカルから踏み台サーバを経由してRDSに接続できるようになっています。

## やりたいこと
javascriptでDB(MySQL)のコネクションを作ってデータをローカルで取得したい

現状だとRDSはプライベートサブネットにあるのでアクセスできない。
アクセスしようとするとエラーをはかれる

## やること
***SSHポートフォワーディング***をする
1\. EC2,RDSのセキュリティグループの設定
* EC2のセキュリティグループ　仮セキュリティグループ名：EC2-sg

| タイプ | プロトコル | ポート範囲 | ソース | 値 |
|———-|————-|————|—————|———–

【Illustrator】3点のパスポイントからなるpathItemの角度

“`
var selectedItems = app.activeDocument.selection;

if (selectedItems.length == 1 && selectedItems[0].typename == “PathItem” && selectedItems[0].pathPoints.length == 3) {
var pathPoints = selectedItems[0].pathPoints;
var angle1 = parseFloat(Math.atan2(pathPoints[0].anchor[1] – pathPoints[1].anchor[1], pathPoints[0].anchor[0] – pathPoints[1].anchor[0]) * 180 / Math.PI).toFixed(1);
var angle2 = parseFloat(Math.atan2(pathPoints[2].anchor[1] – pathPoints[1].anchor[1], pathPoints[2].an