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

axios を使う

Vue勉強中にaxios というライブラリが出てきたので、調べた。

> HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptのライブラリ。

とのこと。
Vueを使うのに必須という訳ではなく、Vueとは無関係に、このライブラリ単体で使えるものらしい。

https://qiita.com/s_taro/items/30114cfa370aac6c085f

axios には、`get` 以外にも `delete`, `post`, `put` と言った関数があるようだ。

https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9

https://rakuraku-engineer.com/posts/axios/

(Vue.js 3.1.5を使用)

“`javascript:javascript
const app = Vue.createApp({
data: () => ({
users: []
}),
mounted: function() {

Difyを使って選手名から選手の球場飯を表示させたかったけど全員カレー表示になって困っている

私は野球が好きなので球場によく行きます。球場飯って今すんごくおいしいんですよ！
ちょっと高めですけどね。推し選手の球場飯とか食べたがりです！

## 【結論】失敗したのでご報告

Difyを使ってみたけど、多分プロンプトの書き方が悪かったのか、見事に**カレーライス**になった笑
もはやカレーライスbotだ。

【Typescript 5.4】NoInferについて 【新機能】

## はじめに
2024年3月にTypeScript5.4がリリースされました。
その中で、NoInferという新しい機能が追加され、
これが便利だったので紹介します。

## NoInferとは?
>When calling generic functions, TypeScript is able to infer type arguments from whatever you pass in.
ref:https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/

ジェネリック関数で引数の型を元に、他の引数の型を推論できるものです。
既存の型のパラメータによって制限できるというものです。

|5.3以前|5.4|
|—|—|
|![f04395a8-3870-7405-6faa-f989690bebc1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636995/f37fc148-324c-5ce6-6935-

Javascriptでバリデーションを実装

# はじめに
前回に引き続きbootstrapのモーダル機能で新規登録・ログインフォームを作成方法をアウトプットします✍️

https://qiita.com/3rarara/items/6450603f2ea29f5d7793

初心者ですので、もっといい方法があるよ！
等ございましたらご教示いただけますと幸いです！

# 開発環境
– ruby: 3.1.2
– Rails: 6.1.7.7
– Cloud9
– bootstrap: 4.6.2

# 前提条件
– bootstrap4.6.2 導入済み
– devise 導入済み

# Javascriptでバリデーションを実装
新規登録やログインにエラーが発生した時、
deviseの使用上元の(モーダルでない)新規登録ページやログインページに飛んでしまいます
ログインを非同期で行うことも試みましたが挫折しました…
なので、今回はJavascriptで簡単なバリデーションをつけていきたいと思います
コード全体だけ見たいよ〜という方はこちらをクリックしてください↓

Javascriptコード

React/JavaScript: 親要素の取得 – parentElement vs closest()

親要素を取得する際、parentElementとclosest()には以下のような違いがあります。

### 返り値の違い
– **parentElement**: 直接の親要素を返します。親要素がない場合はnullを返します。
– **closest()**: 指定したセレクターに一致する最も近い先祖要素を返します。該当する要素がない場合はnullを返します。

### 対象の範囲の違い
– **parentElement**: 直接の親要素のみを対象にします。
– **closest()**: 対象要素から上方向に遡って、指定したセレクターに一致する要素を探します。

### メンテナンス性の違い
– **parentElement**: コンポーネントの構造に依存しないため、メンテナンス性が高いです。
– **closest()**: 指定するセレクターに依存するため、コンポーネントの構造が変わるとメンテナンス性が低くなる可能性があります。

### パフォーマンスの違い
– **parentElement**: 直接の親要素を取得するため、パフォーマンスが高いです。
– **c

【コピペで動くよ！】JavaScriptでビットボードを用いたオセロ盤を実装する

# はじめに
JavaScriptは32bit整数しかサポートしてないからビットボードで実装できないな～って思ってたら、今はそんなことなかったっぽいので実装してみました。

## 各ブラウザの対応状況
`BigInt()`使えるやん

## Swiftで実装した記事
ロジックはこちらを~~丸パクリ~~参考にします。

https://qiita.com/sensuikan1973/items/459b3e11d91f3cb37e43

## ソースコード
盤はSVGで描画しました。

“`index.html




#1 Reactの基本的なコードの枠組み

## Reactの基本的なコードの枠組みを理解する

以下のコードを用いて、それぞれのコードがどのような役割をしているのか整理していこうと思います。

“`
import React from ‘react’;
import { connect } from ‘react-redux’;
import { bindActionCreators } from ‘redux’;

class Hogehoge extends React.Component {
constructor(props) {
super(props);
this.state = { …INITIAL_STATE };
}

componentDidMount() {

}

render() {
const { aaa } = this.state;

return (
);
}
}

export default connect(
(state) => state,
(dispatch) => ({
dispatch,

「テスト自動化実践ガイド」執筆に至るまで

## はじめに

テスト自動化についての本を書きました。2024年7月30日に発売します。

https://x.com/tsueeemura/status/1803575143652008360

もともと2021年3月ぐらいから書き始めて、同年12月に書き終わる予定だったのですが、伸びに伸びてこんなことになってしまいました。

幸いなことに興味を持ってくださっている人が多いようなので、ここでは書籍で書ききれなかった、執筆に至るまでの背景（あるいは、いかに自分がE2E自動テストで苦労してきたか）について書いてみたいと思います。

## 試行錯誤の時期

自分が初めてE2Eテスト自動化に取り組んだのは2018年ごろからで、当時は [TestCafe](https://testcafe.io/) というツールを使っていました。そのころのことは別の記事に書いてあります。

https://qiita.com/tsuemura/items/92da801e1db39b6b8d91

ちょっと引用してみましょう。

> イケてるところ
> コマンド一つでマルチブラウザテスト環境が構築できる
>

英語文書濾過

英語文書の地味な濾過装置を紹介します。固定辞書に登録された文字列を1文字に置換していき、縮んだ分は末尾に空白が埋め込んでいきます。結果として圧縮しやすい文字列が生成されるかもしれないという代物。
符号130～250は辞書番号に該当し、254はescape符号で辞書番号自体を符号化する為に用います。
“`js
const wordList=”0ac0ad0ai0al0am0an0ar0as0at0ea0ec0ed0ee0el0en0er0es0et0id0ie0ig0il0in0io0is0it0of0ol0on0oo0or0os0ou0ow0ul0un0ur0us0ba0be0ca0ce0co0ch0de0di0ge0gh0ha0he0hi0ho0ra0re0ri0ro0rs0la0le0li0lo0ld0ll0ly0se0si0so0sh0ss0st0ma0me0mi0ne0nc0nd0ng0nt0pa0pe0ta0te0ti0to0th0tr0wa0ve0all0and0but0dow0for0had0hav0her0him0his0man0mor0not0now0one0out

【JavaScript】View Transitions APIの使い方

## はじめに
現代のウェブ開発において、ユーザーエクスペリエンス（UX）は非常に重要な要素となっています。
その中でも、ページ遷移の際の滑らかなアニメーションはユーザーにとって直感的で心地よい体験を提供します。

この記事では、直感的で心地よい体験を提供するために、View Transitions APIを用いて、簡単かつ効果的にページ遷移アニメーションを実装する方法をご紹介しようと思います。

## View Transitions APIとは？
View Transitions APIは、ウェブページ間の遷移を滑らかにするための新しいAPIです。
このAPIを使用することで、異なる DOM でのアニメーションを実装することができます。

詳しくは、こちらをご覧ください！

https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API

https://ics.media/entry/230510/

## View Transitions API の使い方
### ① HTMLファイル準備する
まずは、

tabIndex と focus を使ったページロード時のスクロール制御

# はじめに
Web ページを構築する際に、ページロード時にスクロールする要素を制御したい場合があります。

例えば、以下のページは `body` の `height` を `200vh` に設定しています。ページロード時に、キーボードの**下矢印キー**を押すと、ページ全体がスクロールします。ページ内に表示されている 3 つの記事のいずれかをスクロールさせる場合、工夫が必要です。


本記事では、`tabIndex` と `focus` を組み合わせて、スクロールする要素を制御する方法を紹介します。

# HTML
HTML ファイルを作成します。3 つの記事の要素を記述します。
“`html

Bowring_short（精度良好な地理距離の短距離近似法）

こんにちは。
精度良好な地理距離の短距離近似法として、[Bowring’s method for short lines](https://en.wikipedia.org/wiki/Geographical_distance#Bowring’s_method_for_short_lines) (Wikipedia)[^1] を見つけ、下記のソースを書き下しました。

[^1]: [Bowring, B. R., “The direct and inverse problems for short geodesic lines on the ellipsoid”. Surveying and Mapping](https://books.google.co.jp/books?id=eEI4AAAAIAAJ&pg=PA36&lpg=PA36&dq=Bowring+Surveying+and+Mapping+1981+degrees+radians&source=bl&ots=g_-TH3_hvQ&sig=ACfU3U01xtWe6_63kQoU_j2PKetjNk180Q&hl=ja&s

Touchdesignerでウェブサイトのキャプチャをリアルタイムレンダリング

## chromeで開いたページをTouchdesignerでリアルタイムレンダリングする

#### **動機**
大学の課題でTouchdesignerを用いた作品を制作する授業があった。そこで、読み込んだウェブサイトがリアルタイムにTouchdesigner上でレンダーされ、サイトの滞在時間によってウィンドウのサイズを変える仕組みを使うことで何か面白い可視化を行えるのではないかと考えた。
先日、講評が終わりひとまず課題は終了となったがまだシステムを設計したに過ぎない段階で作品として、可視化として意義のあるものとして成立させるにはまだまだ道は長い状況である。
しかし、いったんの区切りとして現在の状況をまとめ改めて振り返り、そして備忘録として残しておきたいと思う。また、作品が進展するたびに更新していけたらと思う。
※Touchdesignerのことも、プログラミングのこともそんなに詳しくないため正確でない表現や間違いがあるであろうことは先に言っておく。
(2024.07.15)

#### **実装概要**
1. chromeの拡張機能を作成し訪れたサイトのurlとタイトルとタイムス

JavaScript: 圧縮とかNeural Network

Neural network(神経回路網?)を利用した圧縮法を紹介します。かつて最強を誇ったPAQ系列の始祖にあたる`p12`。厳密には`p5`や`p6`もありますが、まあ放置の方向で。

## やぶからぼうに実装
“`js
const G=new Uint16Array(11265),Sigma2=new Uint16Array(1<<16); (function(g,s,i,j){// initialize above for(;i--;)for(j=256;j;) s[i<<8|--j]=389.12*(i+j+1)/((.5+i)*(.5+j))|0; for(i=11328;i;) g[i-=64]=65536/(1+Math.exp(-i/1024))|0; for(;i<11201;i+=j)for(j=1;j<64;) g[i+j]=g[i]+((g[i+64]-g[i])*j++>>6)}
(G,Sigma2,256));
// setImmediateもどき
(function(a){
var F=[],hit=”\0″;
a.wait0=f

（MDN）画像の切り替え

お疲れ様です。

今日はMDNというサイトの中にある、「Javascriptの基本」というページにて、Javascriptの初歩について勉強していました。
その中にあった、画像を切り替えるという項目を実践してみました。
切り替えると言ってもイベントを使っての切り替えです。


HTMLのフォーム送信がEnterキーなのか送信ボタンなのか判別する方法

HTMLのフォームは、送信ボタン（``）をクリックするだけでなく、[暗黙の送信手段](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission)による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）で**Enterキー**を押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。

この記事では、理由はともかく、**フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい**人に向けてその方法を伝授します。

## TL;DR

暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。

## 解説

Enterキーのような方法による暗黙の送信は、実際には「そのフォームの**default button**に対して`

Trailhead-LWC開発ハンズオンChallengeの取り組み方-

## この記事に書いていること

Salesforceが提供する学習プラットフォーム[Trailhead](https://trailhead.salesforce.com/ja/today)におけるハンズオンChallengeのうち、**フロントエンド分野のLightning Web コンポーネント（LWC）開発課題**をクリアするまでの取り組み方について、参考サイトを踏襲しつつ躓きポイントを追加して解説しています。
また開発環境としてVSCodeを使用する前提で記載しています。

学習者だけでなく、Salesforce資格（特に[JavaScriptデベロッパー資格](https://trailhead.salesforce.com/ja/credentials/javascriptdeveloperi)）保有者にとっても、年にいちどの資格更新モジュールに取り組む際の参考になると幸いです。

:::note info
対象読者
– Salesforce資格保有者で更新課題に取り組む方
– Trailheadのフロントエンド課題に取り組む方
:::

以下のリソースも参考になります。

【Rails7】Maps JavaScript APIで住所オートコンプリート入力の新規投稿機能を実装する

## 自己紹介
はじめまして、はる（[@lemonade_37](https://twitter.com/lemonade_37)）と申します。
駆け出しエンジニアとして働き始めて約4ヶ月が経過しました🐣

## 概要
だいぶ期間が空いてしまいましたが、前回の
[【Rails7】Maps JavaScript APIを使って投稿を地図上にピンで表示する](https://qiita.com/lemonade_37/items/51ca0f18fd9da842bb00)
の続きとして、位置情報を含んだMapと連動できる新規投稿機能を実装していきます。

### 完成イメージ図


![qiita01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34716

th:ifを使った時のaddEventListener

# 結論
“`javascript:qiita.js
const 目的のボタン等;
if(目的のボタン等){
目的のボタン等.addEventListener…
}
“`

# 経緯
th:ifを使って表示の切り替えを行うボタンにクリックイベントを追加しようとしたら
“`html:sample.html

OK

“`

“`
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
“`
と表示されてボタンが想定通りに作動しない。

# 解決方法
どうやらth:ifで非表示にしているオブジェクトは、ないものとしてふるまってしまいjavascriptを読み込む際にイベントを追加しようとしているオブジェクトが見つからなくなってしまうようだ。

そのため、そのオブジェクトが存在するかどうかをif()で判断し、それが存在するときのみイベントを

【JavaScript】配列が空かどうかはlengthを使おう！

どうもこんにちは。

今回は、今日ドジったことを忘れないようにメモしておきます。

# コード

“`js
var humanData = [ [], [] ]

if ( humanData[0] != [] && humanData[1] != [] ){
console.log(“空なのに実行されちゃうよん”);
}

if ( humanData[0].length > 0 && humanData[1].length > 0 ){
console.log(“これなら実行されないよん”);
}
“`

# 解説

Rubyなら、`if humanData[0] != [] && humanData[1] != [] … end`で書けるんですけどね…

JavaScriptだと、これじゃ書けないみたいです。理由は、「**配列の参照（オブジェクトのメモリアドレス）を比較するため、常に false となってしまうから**」のようです。

ほうほう…

JavaScriptで配列が空か判定するためには、「`length`が