f@ctor

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

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

基礎に戻って配列の処理をやり直したPart2　ChatGPT .slice編。

# タイトル
基礎に戻って配列の処理をやり直したPart2　ChatGPT .slice編。

## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,

## 何故この記事を書こうと思ったのか。
前回の記事を参照ください。
https://qiita.com/nuhaha_2023/items/c1f7bb9796b08af60a5b

## 問題の形式
ChatGPTを使用して以下の文言を各毎回投げるとします。
問題自体を自動生成してくれるのでテンプレートだと楽ですね。

「以下のコードの基本的な処理から応用的な処理の問題を4個出して欲しい、
言語　javascript typescript
問題として使用したいメソッド　「　　　」
こちらから使用するメソッドを指定するからこれで問題出してほしい、特にヒントはいらない、問題だけ4個出して欲しい。
オブジェクトと配列に関してはサンプル程度のを問題と一緒に用意して欲しい。
詰まるか答え合わせが必要になった時はまた送信するからレビューして。」

### ここでマイルー

元記事を表示

TeX文字列を画像ファイルにするdiscord botを作る

# TeX文字列を画像ファイルにするdiscord botを作る

この記事は[アドカレ](https://qiita.com/advent-calendar/2023/hachinohe_kosen)に参加しています。

## TeXってなに？
平方根や、行列式などを綺麗に表示したいときがあります。そんなときに役に立つのが、TeXという記法です。例えば、Qiitaで$a = \sqrt{10}$と表示するには以下のように書きます。
“`TeX
a = \sqrt{10}
“`

TeXで表わせる数式記号はたくさんあります。
・[Qiitaでの様々な数式の書き方 ～ TeX記法を使ったサンプルコード付き](https://qiita.com/ttabata/items/92a4a72b042e6a2dbbad)
・[よく忘れるので数学のTeX記法をまとめ](https://qiita.com/shepabashi/items/27b7284d1f0007af533b)
・[場合分けをきれいに書く](https://qiita.com/Yarakashi_Kikohshi/items

元記事を表示

【ReactNative】自動スクロールと非同期処理

## やりたかったこと
アラーム時間指定画面(ShowPicker)を表示させた後、画面最下部に自動スクロールさせる動作の実装

![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676445/ed969d37-01b2-521e-e8b6-2b5667163520.gif)

## 詰まったこと
1回目のタップ時には、自動スクロールせず、2回目からはスクロールでぉた。

## ポイント

React Nativeがコンポーネントをレンダリングする際、通常は非同期のプロセスだそう。
そのため、修正前のコードでは、ShowPickerのレンダリング中に、末尾自動スクロールが動いてしまった。

setTimeoutを使うことで、前のレンダリングが終わった後に次のコードが読み込まれるため、
ShowPickerのレンダリング後に、末尾自動スクロールが起き、ShowPickerの最下部にスクロールされるようになった。

■修正前
“`react
const showDateTim

元記事を表示

日本の祝日API【Deno KV / Deno Cron / Deno Deploy】

# 今日が祝日かどうか

“`bash
curl https://holiday.deno.dev
“`

# 特定の日が祝日かどうか

“`bash
curl https://holiday.deno.dev/20240101
curl https://holiday.deno.dev/2024-01-01
“`

# 明日が祝日かどうか

“`bash
# 明日
curl https://holiday.deno.dev/tomorrow
# 昨日
curl https://holiday.deno.dev/yesterday
# 明後日
curl https://holiday.deno.dev/2
# 一昨日
curl https://holiday.deno.dev/-2
# 一週間後
curl https://holiday.deno.dev/7
“`

# ケンオール互換API

https://kenall.jp/docs/API/holidays/

“`bash
# 全ての祝日
curl https://holiday.deno.dev/kenall.

元記事を表示

JavaScript でシェーダーを扱っていて出てくるいくつかの用語を自分用に少し整理する：OpenGL ES、WebGL、GLSL ES など

## はじめに
この記事の内容はタイトルの通り、シェーダーを扱っていると出てくるいろいろな用語の一部を、自分用に少し整理してみるという内容です。

p5.js を使ったプログラムなど JavaScript　のプログラムで、例えば以下のようなシェーダーを使ったプログラムを作るのに、参考になりそうな情報をいろいろ見ていきました。

そんな中で、聞いたことがあるキーワードや初めて聞くキーワードなどが多く出てきました。

そのキーワードの中で、これまで耳にしていたキーワードも多かったものの、正確な意味をあまり気にしてなかったものもあったので、キーワード同士の関係性や位置付けの違いで、混乱してき部分がありました。

そこで、以下のキーワードをとりあげて、その関係性などを自分用に整理して書いてみようと思います。

– OpenGL / OpenGL ES
– WebGL （1.0、2.0）
– GLSL / GLSL ES

## OpenGL（Open Graphics Library）

元記事を表示

HTMXの正体が分からないので、オレオレHTMXを作ってみた

## HTMX とは？

https://qiita.com/twrcd1227/items/7bce18167fb02ec22729

の記事を見ればわかるが、Javascript の知識なしで ajax通信や高度なUIの実装ができるライブラリになっています。

賛否両論はあると思いますが、自分はあまり実装がどうなっているか分からず気になったので、ソースコードを少し見てオレオレHTMXを作ってみることにしました（誰にでも分かるように簡易な実装にとどめています）。

ではまずは、ソースコードを見てみましょう！

## HTMX のソースコードを読んでみる
HTMX のソースコードは、主に

https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js

の 3900行程度のコード（2024年1月27日現在）になっています。
最初からこのコードを読むのは骨が折れますが、どうやらエントリーポイントは、

“`diff_javascript:htmx.js 3862行目
// initialize the do

元記事を表示

Date に休日情報を追加した派生クラスを作ってカレンダーを表示する

カレンダーは[随分前に作った](https://ikiuo.wordpress.com/2009/03/20/windows-vista-%e3%82%ac%e3%82%b8%e3%82%a7%e3%83%83%e3%83%88-%e2%80%93-%e3%82%b7%e3%83%b3%e3%83%97%e3%83%ab%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc/)ことがありますが、現在の情報を追加して作り直してみました。

元記事を表示

JavaScriptで配列内の検索、ArrayよりもSetの方が良い場合。

# はじめに

JavaScriptでまとまったデータを管理する際、Array（配列）を使用することも多いと思いますが、特定のケースではSetというオブジェクトの方が優れているよ、というお話です。この記事では、SetとArrayの違いと、それぞれの使用場面について解説します。

## 本題

この記事では下記を解説していきます。

– **Setってそもそも何？**
– **ArrayよりもSetの方が優れている点**

### Setってそもそも何？

SetはJavaScriptの組み込みオブジェクトで、重複を許さない値の集合を管理するために使用されます。Arrayと違ってSetには`重複した値は格納できない`ということです。
Setの基本的な使い方はこんな感じです。
“`JavaScript
const uniqueNumbers = new Set([1, 2, 3, 2, 1]);
console.log(uniqueNumbers); // Set(3) {1, 2, 3}

/* 重複した 2 と 1 は格納されない。*/
“`

### ArrayよりもSetの方

元記事を表示

マンデルブロ集合のお友達のバーニングシップフラクタル君を見よう

## これがバーニングシップフラクタルだ！

### サイト

https://mogamoga1024.github.io/BurningShipFractal/

### 全体

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/d012ac0d-8807-c0e7-4aa0-df5805c84be5.png)

### 船が燃えているように見える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/ab645446-7790-daf9-3b02-e9aae92a6fa4.png)

### 癖になる気持ち悪さ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/31119b83-43cf-eed3-4d3c-862dde8cb7a7.png)

![im

元記事を表示

素数判定関数を使って簡単なゲームを作った話④

ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。

https://qiita.com/hitoki_univ/items/8e3feab0add17befc700

前回の内容については、こちらからどうぞ。

https://qiita.com/hitoki_univ/items/96e45db86abc4dae71d7

# 今回やること
第3回までで、ゲームをプレイする人数の選択、プレイヤー名と制限時間の設定に関する部分を実装しました。
今回は満を持して、ゲームの動作部分を実装していきます。

# ゲームの実行画面
前回作成したプレイヤー名などの入力画面と同様、ゲームのプレイ人数に応じて異なるページを作成する必要があります。しかし、基本構造はどのページも共通ですので、今回は2人用のページを主に確認していきます。

### HTML
“` php

元記事を表示

【やってみた】小中学生向けJavaScript教材「サイレントリアル」

# サマリ
小中学生向けJavaScript教材「サイレントリアル」の無料教材をやってみました。

# 背景
ふらふらネットの波に揺られていると、ふとこちらの記事を目にしました。

https://prtimes.jp/main/html/rd/p/000000007.000036248.html

なんとなく興味はあったものの手が出ていなかったJavaScript。
すぐできそうだったので、この機に学べればと思ってやってみることにしました。

# ゴール
サイレントリアルの無料教材である、
– Part1：ジャンプゲームを作ろう！
– Part2：アイコンをデザインしよう！

をそれぞれやってみる

# 対象読者
– JavaScript学習のとっかかりを探されている方

# 前提
必須：PC、インターネット環境
# 環境
– ホストOS：Window10 Home
– ブラウザ：Google Chromeバージョン 120.0.6099.225
# 手順
以下の公式ページにアクセスし、気になる方をクリック。（雑）

Top

![imag

元記事を表示

Reactで避けるべき useState の間違い

# 目录
– [概論](#概論)
– [間違い1：前の状態を考慮することを忘れる](#前の状態を考慮することを忘れる)
– [間違い2：状態の不変性の無視](#状態の不変性の無視)

# 概論

React.jsは現代のウェブ開発において重要な役割を果たしています。特に、コンポーネント内での状態管理に対する独自のアプローチが特徴です。よく使用されるフックの一つである`useState`は基本的でありながら、しばしば誤用されています。このような一般的な間違いを理解し、避けることは、効率的でバグのないアプリケーションを作成しようとする初心者と経験豊富な開発者の両方にとって重要です。

このブログでは、Reactの`useState`を使用する際に避けるべき4つの重大な間違いについて深く掘り下げていきます。一緒にReactのスキルを高めましょう！

# 前の状態を考慮することを忘れる

Reactの`useState`フックを使用する際、最新の状態を更新するときにそれを考慮に入れないのは一般的な間違いです。この見落としは、特に迅速な状態更新や複数の状態更新を扱っている場合に、予期せぬ挙動

元記事を表示

【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】

## 1. はじめに

これは [XPath](https://developer.mozilla.org/ja/docs/Web/XPath) を利用して DOM からノードを取得する方法を紹介する記事です。

最近 XPath の存在を知り、「XPath を利用して `document.querySelector()` のように DOM からノード（要素）を取得したい！」と思い立ったため、その方法をまとめていきます。

:::note warn
最近 XPath の存在を知ったばかりの拙いエンジニアによる記事です。誤りや不適切な記述がある場合はご指摘ください。
:::

## 2. 結論

XPath を利用して DOM からノードを取得する関数です。取得したノードは配列に格納して返却します。

“`js
const getNodesByXPath = (xpath) => {
const evaluator = new XPathEvaluator();
const expression = evaluator.createExpression(xpath);
co

元記事を表示

javascript joinメソッド

## Joinメソッドとは
配列に対して使用できるメソッドの一つ
配列に入っている要素を引数で指定した文字で、区切り、文字列連結する

引数なしで呼び出すとデフォルトである、カンマ区切りで実行される

## 例
“`
const names = [Alice, Bob, Hanako];

names.join(‘/’) → Alice/Bob/Hanako
names.join(”) → AliceBobHanako
names.join() → Alice,Bob,Hanako
“`

元記事を表示

Babylon.js の Particle Helper を使うとお手軽にパーティクルシステムを扱えて便利だった！

## はじめに
今回の記事は、Babylon.js の以下の公式ドキュメントのページで扱われている「Particle Helper」に関するものです。

●The Particle Helper | Babylon.js Documentation
　https://doc.babylonjs.com/features/featuresDeepDive/particles/particle_system/particleHelper

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7c4f7af9-c39b-32ff-5e6b-00ad3c99eb82.png)

↓こちらのポストに出てきている内容を作るのに使ったものです。

## Babylon.js でパーティクルシステムを使う話(Particle Helper以外の話)
### 基本の流れ
Babylon.js

元記事を表示

【Three.js】1つのページに複数のThree.jsシーンを作成する

Three.jsでHTMLのbody内にシーンを追加する場合、`new THREE.Scene();`で新たにシーンを作成しますが、1つのbody内に複数のシーンを作成して、スクロールなどで切り替えたい、というようなケースもあります。その場合、HTMLで要素に`data属性`を指定して複数のシーンを描画する、という方法を紹介します。

デモは[こちら](https://codepen.io/outsider-kithy/pen/rNQZEZY)

## data属性とは
HTML5では、``の`src`や`width`,`height`のような、標準で定められている「属性」の他に、独自の属性を開発者が付加できる`data属性`というものがあります。これは、接頭辞に`data-`をつけて、開発者が自由に名前をつけることができます。

“`html

“`

元記事を表示

素数判定関数を使って簡単なゲームを作った話③

ご覧いただきありがとうございます。
この内容は、複数に分けて投稿しています。全体をご覧になりたい方は、以下のリンク先よりご確認ください。

https://qiita.com/hitoki_univ/items/8e3feab0add17befc700

前回の内容については、こちらからどうぞ。

https://qiita.com/hitoki_univ/items/5893785797243794d33a

# 今回やること
第2回では、ゲームのタイトル画面を作成しました。
今回は、タイトル画面からのリダイレクト先である、プレイヤー名と制限時間を設定する画面を作成します。

# プレイヤー名、制限時間の設定画面
前回作成したページでは、選択したプレイヤー人数に応じて異なるページにリダイレクトするようにしました。
今回はそのリダイレクト先のページを作成するので、複数のページを作成します。しかし、基本構造はどのページも同じなので、今回は2人用のページを主に確認していきます。

### HTML
“` html


イベントハンドラの関数名についての雑記

今日のXでは、イベントハンドラの関数名についての話題を見ました。[元の投稿はこちらです](https://twitter.com/plus_one_masaki/status/1750705805152944273)。要するに、次の`handleClick`のような`handleイベント名`という命名は良くないということです。

“`jsx
const handleClick = () => { … };

元記事を表示

【jQuery】Nightly BuildsのDataTablesプラグインを使っていたら突如エラーになった

# 概要
今まで使用できていたページ（jQueryを使用）が突如動かなくなってしまいました。

検証ツールのConsole Logを見ると以下のようにありました。こちらの記事では、以下エラーの原因と解決方法について解説します。

“`
dataTables.buttons.min.js:44 Uncaught TypeError: t.ext.features.register is not a function
at dataTables.buttons.min.js:44:337
at dataTables.buttons.min.js:5:281
at dataTables.buttons.min.js:5:308
(anonymous) @ dataTables.buttons.min.js:44
(anonymous) @ dataTables.buttons.min.js:5
(anonymous) @ dataTables.buttons.min.js:5

jquery.dataTables.js:6188 Uncaught TypeError

元記事を表示

lenis.jsでposition:fixed要素のoverflow:scrollを効かせる

## はじめに
慣性スクロールを手軽に実装できる、Lenis.jsを使っているサイトでモーダルを作成した際、position:fixed要素のoverflow:scrollが効かない時の対処法です。

## 解決方法

### 1. スクロール要素に `onwheel=”event.stopPropagation()”`を追加
“`

“`

### 2. jsでwheelイベント伝播を停止
“`
const modal = document.querySelector(‘#cc-main’)
modal.addEventListener(‘wheel’,(e)=>{
e.stopPropagation()
})
“`
をjsに追加すれば解決します。

## 参考元
https://github.com/studio-freight/lenis/issues/14

元記事を表示

OTHERカテゴリの最新記事