f@ctor

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

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

Next.jsでフォントを設定する

## 初めに
Next.jsの最新バージョンでのフォントの設定についてです。説明しているサイトが少なかったので忘備録として残します。

## 注意事項
プログラミング初心者の記事になります。明らかな誤りがある際にはコメントいただけると幸いです。

## 結論
まずは簡単に設定手順を記します。

1. font.tsを作成する
1. `next/font/google`から使用するファントの種類をインポート
1. 任意のファイルで呼び出す

以下詳しい設定方法です。

### font.tsの作成

まずは好きな場所にfont.tsを作成してください。
今回はappディレクトリ配下にそのまま設置しましたが、uiファイルを作成してもいいかもです。

![スクリーンショット 2024-04-20 14.46.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2918094/be551961-51d5-deaf-3d61-830d46ead686.png)

### `next/font/google`から使

元記事を表示

JavaScript　基本の学び　記録

JavaScriptの基本を学んだので記録用
Progate2周目での情報整理です

【while】　繰り返し処理
条件式がtrueの間、{ }を繰り返す

例　numberを1〜100まで表示するwhile文

//numberの中身は1を定義①
let number = 1;

while(number <= 100){　//numberの数値を比較しtrueかを判別② console.log(number);　//出力 number += 1;　//numberに1を足す③ } 結果： 1 2 3 ： ： 98 99 100 【for】繰り返し処理 while文をシンプルにした文 上記のwhile文①〜③を1行で指示できる 例　for(①; ②; ③){ console.log(number); } 数値をいれると for(let number = 1; number <= 100; number ++){ console.log(number); } これで上記と同じ出力になる 【if＋for】 応用例：3の倍数なら「3の倍数です」を出力、それ以外

元記事を表示

javascriptの非同期開発

### 非同期処理とシングルスレッド
#### 非同期とは
“`javascript
console.log(100)
setTimeout(function() {
console.log(200)
}, 1000)
console.log(300)
“`

“`javascript
console.log(100)
alert(200)
console.log(300)
“`
#### 非同期処理が必要になるのはどのような場合ですか?
1. 待機が発生する場合
2. 待機中はalertのようにプログラムをブロックすることを避けたい時
なので、「待機の場合」に非同期処理が必要

#### フロントエンドで非同期開発を使用するシナリオ
1. スケジューリングタスク： `setTimeout`, `setInverval`
2. Networkリクエスト: ajaxリクエスト、動的にのload
“`javascript
console.log(‘start’)
$.get(‘./products’,function(data) {
console.log(dat

元記事を表示

PMTiles 消費における MapLibre GL JS v4 の破壊的変更への対応

## はじめに

今更ですが、MapLibre GL JS の v4.0.0 が2月にリリースされました。[変更点](https://github.com/maplibre/maplibre-gl-js/blob/main/CHANGELOG.md#400)の中には、タイルをロードする際に実行する処理を追加することができる `addProtocol` の破壊的変更が含まれています。

> Changes `addProtocol` to be promise-based without the usage of callbacks and cancelable

MapLibre GL JS において、`addProtocol` は [PMTiles](https://github.com/protomaps/PMTiles) の消費などにおいて、他のウェブ地図ライブラリには代替できない機能となっていると認識しています。

そのため、今回の破壊的変更が、これまでのコードにおいてどのように影響を及ぼすのか、簡単に確認していきます。

### 参考：過去の関連記事
* addProtoco

元記事を表示

JavaScript: 接尾辞配列(Suffix Array)編

## 概要
これは文字列の接尾辞(開始位置が異なり終端位置が元の文字列と同じ部分文字列)の文字列中の開始位置を要素とする配列を、接尾辞に関して辞書順に並べ替えて得られる単純な配列です。まさに接尾辞木の配列版と言っても過言でしかありませんね。文字列検索等において猛威を振るう事が可能です。
例えばthatの接尾辞はthat, hat, at, tの4個で、これらを辞書順に並べた配列が接尾辞配列となるのです。

始点

接尾辞

0

that

1

hat

2

at

3

t

整列

始点

接尾辞

2

at

1

hat

3

t

0

that

厳密に言うと始点こそが接尾辞配列の正体です。上記の例で言えば[0,1,2,3]から並べ替えられた[2,1,3,0]です。
昇順に並んでいるので文字列の検索は二分探索を使ってウミウシ

元記事を表示

【熱望】javascript の for 文で var i を宣言するのはやめて下さい

皆さんは javascript の for 文で
以下の書き方をしたことがありますか？

“`js
for(var i = 0; i < array.length; i++) { } ``` この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 ```js for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } ``` 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまい 期待した動作にならない例になります。 私も他の人が作成した web アプリで このバグを見かけたことがあります。 for の変数を宣言する場合 必ず let で宣言して下さい。 var でなければ正常に動作しないのは 構造的欠陥のハズです。 ```js for(let i = 0; i < array1.length; i++) { //長い処理 for(let i

元記事を表示

querySelectorAllで取得した要素に対してmapとかを使う

## はじめに
`querySelectorAll`で取得した要素に対して、Array関数を利用したいとします。

“`html.example.html

sample1
target!
sample3
sample4


元記事を表示

react開発においてよく見るnamed exportとdefault exportの違い

## 概要
reactのチュートリアルや、サンプルコードと実際の開発現場でreactのコードを触ってみて
1つ違いがありました。
何の違いかというと、
reactチュートリアルでは以下のような**default export**が使用され、
“`.jsx
export function App() {
return (

テスト

);
}

export default App;
“`

実際の開発現場では以下のような**named export**と呼ばれるものが使用されているという違いがありました。
“`.jsx
export const App = () => {
return (

テスト

);
};
“`

何となくそういうものかとやっていたのですが
いざ、チュートリアルなどを触ってみるとどちらがいいのかわからなかったので今回少し調べてみました。

## default exportについて
default exportは1つのファイルに1つだけexportできます。そのため、exportするものを強制的に1つに

元記事を表示

初めてのWebアプリケーションを作ってデプロイした話(React / Express)

# 目次

[1. どんな人にオススメの記事??](#1-どんな人にオススメの記事)
[2. 自己紹介](#2-自己紹介)
[3. まえがき](#3-まえがき)
[4. 作ったサイトについて](#4-作ったサイトについて)
[5. 使った言語やライブラリなど](#5-使った言語やライブラリなど)
[6. どうやって勉強したの?](#6-どうやって勉強したの)
[7. 作ったアプリの反省](#7-作ったアプリの反省)
[8. 今回得たこと](#8-今回得たこと)
[9. 今後の展望](#9-今後の展望)
[10. 終わりに](#10-終わりに)

# 1. どんな人にオススメの記事??

この記事の読者対象は次のような方にオススメです
– Webアプリケーションを作ってみたいけど**何から学べばよいか分からない**

– ある程度HTMLやCSSは触れるけど、**バックエンドの知識は全くない**

# 2. 自己紹介

– 電気通信大学の学部4年生で情報系の専門です
– プログラミング歴については大学に入ってから始めたので3年ほどになります
– C++で競技プログラミングをしていて現在

元記事を表示

私も JavaScript でキューを実装してみた

# これは何？

https://qiita.com/mikecat_mixc/items/05491cf98392fb803f66

が面白かったので勝手に参加してみた。

# 書いたコード

こんなのを書いてみた。

“`javascript:javascript
class QueueNabe {
slotSize = 0xfeff;
constructor(){
this.headNode = this.tailNode = { prev:undefined, next:undefined, slot:Array(this.slotSize) }
}
head = 0;
tail = 0;
enqueue(x) {
if (this.slotSize === this.tail) {
this.tailNode.next = { prev:this.tailNode, next:undefined, slot:Array(this.slotSize) }

元記事を表示

chartjs-plugin-datalabels　メモ

仕事でグラフ使うよ

チャットGPTにいい感じに書いてもらったよ

これで明日のタスクできるよ

ありがと

“`js
import { Bar, Pie } from ‘react-chartjs-2’;
import { Chart, registerables } from “chart.js”
import ChartDataLabels from ‘chartjs-plugin-datalabels’;
Chart.register(…registerables)

const data = {
labels: [‘Red’, ‘Blue’, ‘Yellow’, ‘Green’, ‘Purple’, ‘Orange’, ‘Black’, ‘White’, ‘Gray’, ‘Brown’, ‘Pink’],
datasets: [
{
label: ‘# of Votes’,
data: [12, 19, 5, 5, 2, 3, 8, 7, 4, 3, 6], // 値が0以外の項目を含むデータセット
backgrou

元記事を表示

HTA（HTML Application）をPreactとTypeScriptで開発する

HTAはHTML+CSS+VBScript/JScriptでGUIアプリケーションを構築するレガシースクリプト技術です。少なくとも執筆時点ではWindows 11にも標準で搭載されています。これを、いまをときめく技術で書けたらきっと愉快です。実用性はありません。

## HTAについて

https://learn.microsoft.com/en-us/previous-versions/ms536496(v=vs.85)

だいたいInternet Explorerにいろいろ生えたElectron風のものと考えてよいでしょう。基本的な中身はIE対応のWebページと同様です。

``の有無でフォントのレンダリングが変わりました。`title`は`hta:application`より前に記述しないとウィンドウタイトルに反映されません。`x-ua-compatible`によってIEのバージョンを指定できますが、`IE=10`以降では`HTA:APPLICATION`オブジェクトの機能が事実上利用できません。`IE=9`で実行できるようにトランス

元記事を表示

同期か非同期かを確認する方法

# 結論
ブラウザを２つ立ち上げて、ブラウザAで入力したもの(例えば「いいねボタン」とか)が、ブラウザBで反映されていれば非同期ができている。
(もちろんリロードしちゃダメ)

**以上！！！！！**

元記事を表示

IP住所検索サービス作ってみた

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

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

そこで今回は裏方の私が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 (