f@ctor

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

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

インフラ系がAIの力を借りてフロントに出てみる

## ■初めに
関西のとある企業でエンジニアをしている物です!

普段はバックエンド領域の構築や運用を行っています。
フロントエンド領域のエンジニアをみて華があって良いなと思う事があります…..

そこで今回は裏方の私がChatGPTの力を借りてwebアプリを作成したお話となります。

今回はサービス解説となります、技術解説は次回の記事に作成させて頂きます。

[IPアドレス住所検索サイト](https://ip.r1999.com/)

## ■IP住所検索サービス

![IP住所検索サービストップページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668800/e9e3d3be-e391-8e1f-c09d-c22dbd12c974.png)

https://ip.r1999.com/

今回作成したwebサービスは「IP住所検索サービス」となります。
IPアドレスやドメインから所属する住所情報を取得し表示するサイトとなります。

フォームに入力したIPデータをJavaScriptのFetchAP

元記事を表示

恐怖！ var の動きが意味不明すぎる！

まずはこちらをご覧ください。

“`js
var num = 1;
console.log(num); // -> 1

if(num === 1) {
var num = 1234;
console.log(num); // -> 1234
}

console.log(num); // -> 1234
“`

＿人人人人＿
＞　1234 ＜
￣Y^Y^Y^Y￣

## なぜこうなるのか

### 原因1: `var` にはブロックスコープがない

> var 文は関数スコープまたはグローバルスコープの変数を宣言し、任意でそれをある値に初期化します。
> [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var)

ブロックスコープ（if 文や for 文の波括弧の中のスコープ）がないということはつまり、冒頭のコードでは `var num = 1;` と `var num = 1234;` が同じスコープで宣言されているということ。これが前提になってきます。

#

元記事を表示

LWCのコールバック関数の指定方法でハマった話

## 目次
– 概要
– 何にハマったのか？
– 原因
– 解決方法
– 結論
## 概要
– LWCでプラットフォームイベントを受信して、あれこれしたくなったため、[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-emp-api/documentation)を眺めながら実装した。リファレンスに記載されたサンプルコードを入力したのにうまくいかなかった。その後、色々試して解決できたので本記事で記録を残しておこうと思った。

## 何にハマったのか？
### 結論
subscribe関数への引数で渡すコールバック関数内で、グローバル変数を参照しようとした際に`undefined`にってしまう、、、

経緯踏まえて説明します
– サンプルコードの記載がある[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-emp-api/documen

元記事を表示

レスポンス データの読み込みに失敗しました: No resource with given identifier found

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/27b3ffaa-2fbe-bef7-7aa7-38590393e769.png)

``でリダイレクトするとエラーになるらしい、Firefoxを使おう

“`html

“`

https://happynap.net/2023-04-15-081747/

元記事を表示

@testing-libraryで改行など空白文字を含む要素をgetByTextしても取得できない時はnormalizerオプションを見直してみよう

# TL;DR

[testing-library](https://testing-library.com)の`getByText`をはじめとした`ByText`系のクエリーや、[@testing-library/jest-dom](https://github.com/testing-library/jest-dom)の`toHaveTextContent`マッチャーは空白文字を正規化するので、必要に応じて正規化オプションを設定しましょう。

“`tsx:言いたいことをコードで表すと…
import { it, expect, afterEach } from “vitest”;
import “@testing-library/jest-dom/vitest”;
import {
render,
screen,
getDefaultNormalizer,
} from “@testing-library/react”;

const App: FC = () => {
return (