f@ctor

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

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

@testing-library/reactを使ってモーダル実装コードをテストする

## 概要
@testing-library/reactを使ってモーダル実装したコードのテストコードを書いてみました。

## 仕様
実装内容としては、1つのページにモーダルを開くリンクと、初期状態がdisabledのボタンがあり
モーダルを開くリンクを押し、モーダルを閉じる際にボタンのdisabledを解除しボタンが押せるようにするというのが
実装ないようになります。

## コード
“`App.tsx
import React, { useState } from “react”;
import { ModalItem } from “./components/ModalItem”;

export const App: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const [disabled, setDisabled] = useState(true);

const handleOpenModal = () => {
setIsOpen(!isOpen);
};

元記事を表示

正弦波を使ってオリジナルパワポ背景生成器を作った

## はじめに
オリジナルパワポ背景、欲しいですよね。
それどころか、もしそれぞれのページに固有の背景パターンを作れたら、どうでしょう。

もしセクションごとに背景パターンが異なると、「違う話を始めたな」と **視覚的に** 分かります。（もちろんちゃんとそれが分かるようにお話するべきであるのは間違いないですが、、、）

今回は、テキストからパワポ背景に変換するサイトを作りました。

これには[見てて面白いの王、見てて面白いキング](https://qiita.com/uts1_6/items/11e348ead4bae71571b8)であるところの　（正弦波による） **合成波** を描画しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602537/c374190f-e72b-c8f7-4df1-6f120b0cc77f.png)

:::note
動作サイト: https://konbraphat51.github.io/SinDrawer/
レポジトリ: http

元記事を表示

【AOS.js】スクロールアニメーションの紹介

# はじめに
AOS.js（Animate On Scroll）は、スクロール連動型アニメーションを簡単に追加できる軽量なJavaScriptライブラリです。このライブラリを使用すると、要素が表示されるタイミングに応じてフェードイン、スライドイン、ズームインなどのアニメーションを実装することができます。AOS.jsは、直感的な設定とカスタマイズオプションを提供し、開発者にとって使いやすいツールとなっています。

# 利用方法
### 1. ライブラリのインクルード
AOS.jsを使用するには、まずライブラリをHTMLファイルにインクルードします。以下は、CDNを利用した例です。
“`html





AOS.js Example

元記事を表示

Node.jsでYouTube Data APIを叩いてみる

## この記事は
この記事は YouTube Data APIの `Video:list`, `Channel:list`, `Search:list` をNode.jsで叩いてみたメモ。

## (余談)記事制作の背景
余談だが、次のサービスを作るのにAPIを叩く必要があった。
特に生放送の開始時間、終了時間、配信継続時間(動画の再生長)が欲しかった。

https://hardcore-timetable.netlify.app/

…このサービスの内容を説明するのは記事の趣旨ではないので団長の思いで割愛する。

## 前提
Google Cloud Platform(GCP) でAPIキーを発行する必要があるが、このAPIキーは取得できているものとする。
いくつか記事を読んだが、 [こちら](https://qiita.com/koki_develop/items/4cd7de3898dae2c33f20)の記事がわかりやすかった。

## Videos:list
[Videos:list](https://developers.google.com/youtube/v3/

元記事を表示

【React】3つの「propsの渡し方」から理解する、分割代入

## まえがき
“`js
const { id, title, date } = eventData;
“`
「なんだこの書き方は…？」となりがちなJavaScriptの記法、その1つが**分割代入**ではないでしょうか？

本記事は、**「分割代入という単語は知っているけれど仕組みはよく分かっていない」** あるいは、**「propsの渡し方がいくつかあって混乱している」** そんな悩みを解決する記事としてお届けします。

### 本記事で解説すること
– **基本を学ぼう**
1. 「オブジェクト」とは？
2. JavaScriptの「分割代入」とは？
3. Reactの「props」とは？
– **3つの「propsの渡し方」**
1. 分割代入は使わない `props.****`
2. コンポーネント内で分割代入 `const { aaa, bbb } = props`
3. 引数に分割代入 `const Xxxx = ({ aaa, bbb }) => {`

## 基本を学ぼう

### ①「オブジェクト」とは？
– オブジェクトは、**プロパティ

元記事を表示

PC で利用できるマイクなどのオーディオ入力のリストで特定の名前のもののみ取得（p5.js Web Editor上で試す）

以下の内容の、続きのような記事です。

●PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices） – Qiita
　https://qiita.com/youtoy/items/8339313b561c503ffe39

上記の記事では、以下のように全てのオーディオ入力を取得していたのを、今回は特定の名称のもののみ取り出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7aecac56-fa61-40d0-e921-be2728969a0b.png)

それをまた、p5.js Web Editor上で試します。

## 前回のプログラムの編集版
今回の内容のベースになるものとして、前回の記事のプログラムを少し編集した内容を掲載します。

“`javascript
function setup() {
createCanvas(400, 400);

navigator.me

元記事を表示

Amazonの商品情報をクリップボードにコピーするブックマークレット

メルカリで出品する時にいちいち商品情報を入力するのが面倒なので、開いているAmazonのページから商品情報を取得してクリップボードにコピーするブックマークレットを作りました。

Amazonのページを開いた状態で、ブックマークレットをクリックすると、クリップボードに保存されます。
そのままメルカリなどにペーストしてください。
Apple製品同士だとMacからiPhoneにコピペできるから便利ですよね。

## 取得できる情報

– 商品名
– 現在価格
– 商品概要

など

## ブックマークレット

CodePenのページからリンクをブックマークバーにドラッグ&ドロップすれば簡単です。

javascriptで作るゲーム【ジャンケンマンフィーバー】完結編（音声出力）

前回まではこちらを参照してください。
https://qiita.com/tri-comma/items/e9790b420d9786f91149
https://qiita.com/tri-comma/items/be169c9163d637d82af3

最後に音声再生を実装しました。
（ついでにコインも描画しました）

# 前回ソースからの差分

“`diff_javascript: [差分1] JankenFever.onstop()に引数追加、JFViewクラスの各イベントハンドラに音声再生処理を追加
if (this.status == this.STS.SPINING) {
const medal = this.ROULETTE[this.ridx];
this.medal -= medal;
this.player.medal += medal;
this.status = this.STS.STANDBY;
– this.onstop ? this.onstop() : null;
+ this.onstop ? this.ons

元記事を表示

Railsでの予約システムにおける非同期スロット更新とエラーハンドリング

## はじめに
今回は、Railsでの予約システムにおける非同期スロット更新の実装方法と、発生したエラーの解決方法について共有します。

## 問題点

予約システムの開発中に、日付を変更するたびにスロット情報を非同期で更新しようとしましたが、以下のエラーが発生しました。

“`plaintext
ActiveRecord::RecordNotFound – Couldn’t find Company with ‘id’=undefined:
app/controllers/reservations_controller.rb:207:in `update_slots’
“`

## 解決方法

エラーの原因は、JavaScriptで`company_id`が正しく取得されず、リクエストに`undefined`が渡されていたことです。以下の手順で解決しました。

### ビューの修正

`company_id`を含むデータ属性を日付入力フィールドに追加します。

“`erb
<%= form.date_field :date, id: 'for_customer_index_

元記事を表示

【備忘録】休業日と営業日の表示を非同期通信で切り替えるRailsアプリの実装

## 内容
休業日と営業日を切り替えて表示するために、以下のコードを実装しました。
備忘録なので説明は省いています（面倒くさいので・・・）

### `app/controllers/reservations_controller.rb`

“`ruby
def update_slots
date = params[:date]
@date = Date.parse(date)
@company = current_company
@time_slots = generate_time_slots(@company)
@non_business_day = ScheduleService.is_non_business_day?(@company, @date)
@services = @company.services
@service_availability = ScheduleService.calculate_availability(@company, @date, @services, @time_slots)
response_data

元記事を表示

globalThis【JavaScript】

# はじめに

https://qiita.com/kohki_takatama/items/5f1c6f75e6bbf6553682

前回の記事では、ホスト環境によってglobal objectの名称と挙動が違うことを書きました。
– Node.js：`global`
– ブラウザ：`window`

（この他にもホスト環境は存在します）

この記事にコメントを頂いたのですが、どうやら`globalThis`という共通の名称が使用できるようです。

名称は同じ。では挙動はどうでしょうか。検証してみます。

# ブラウザ：`window`

前回の記事で確認した、いずれの点も`window`と同じ挙動でした。

– `const`を使用した変数宣言は、`window.name`ではアクセスできない
→`globalThis.name`も同様
– `var`を使用した変数宣言は、`window.name`でアクセスできる
→`globalThis.name`も同様
– `console.log`と`window.console.log`は完全に等しい
→`globalThis.cons

元記事を表示

eslint-plugin-import-accessを使ってみる

:::note
## 概要
`defaultImportability: ‘package’`のオプションで丸ごとpackage-privateにできます
このオプションがない場合だと`@package`のつけ忘れによる誤exportが起こり得ますがそれを防いでくれます 👍
[dependency-cruiser](https://github.com/sverweij/dependency-cruiser)と[eslint-plugin-strict-depenencies](https://github.com/knowledge-work/eslint-plugin-strict-dependencies)との使い分けを考え直す必要性を感じました
:::

# 1. 背景 🖼️

TypeScirptではexport宣言した変数や関数は全てのファイルからimportできてしまいます。

これにpackage-privateの機能を組み合わせれば外部のディレクトリからimportを制限できたり、モジュール管理がしやすくなると思い調査しました。

https://qiita.com/

元記事を表示

【Next.js エラー対応】”Image with src “/images/[image-file-name.png]” has either width or height modified, but not the other…”

Next.js の next/image で画像の縦横比を設定しろと怒られた場合の対処法。
（公式マニュアルをちゃんと読んでおけば遭遇しないやつ）

### エラーメッセージ

“`
“Image with src “/images/[image-file-name.png]” has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles ‘width: “auto”‘ or ‘height: “auto”‘ to maintain the aspect ratio.”
“`

直訳：「[画像名]は幅か高さのどちらかが変更されていますが、もう一方は変更されていません。CSSを使って画像のサイズを変更する場合は、縦横比を維持するために「width: “auto”」または「height: “auto”」スタイルも含めてください。」

### 元のコード

“`reacttypescript

元記事を表示

面接官「0.1 + 0.2 == 0.3 が成立しない理由を説明せよ」

## 面接官「0.1 + 0.2 == 0.3 が成立しない理由を説明せよ」

という質問がきたらどう答えるだろうか。

## 0.3にはならない

### Javascript
適当なブラウザから以下のようなJavascript実行した。結果「0.1+0.2==0.3」は「false」となった。

“`js
0.1+0.2==0.3
//false
0.1+0.2===0.3
//false
“`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552182/e0a4c538-1729-487b-503c-e1f632b2a7c6.png)

ちなみに以下のような先頭に0をつけなくても、小数点として解釈される。
“`js
.1+.2==.3
//false
“`

### Python
バージョン3.10.11で検証する。同様に「0.1+0.2==0.3」は「false」となった。

“`py
>>> 0.1+0.2==0.3
False
“`

## なぜか

これは

元記事を表示

JavaScript の async/await について

曖昧な理解ではなく、確実な理解を目指す立場から、まずコルーチンとイベントループを簡単に説明してから、Promiseとasync/awaitを解説します。

### コルーチンと `yield`：フィボナッチ数列のジェネレーター

コルーチン（coroutine）と`yield`を理解するには、ジェネレーター関数を用いると効果的です。ここでは、フィボナッチ数列を生成する例を通じて説明します。

#### フィボナッチ数列のジェネレーター

フィボナッチ数列は、次の数が前の二つの数の和である数列です。以下に、フィボナッチ数列を生成するジェネレーター関数を示します。

“`javascript
function* fibonacci() {
let [a, b] = [0, 1];
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
“`

このジェネレーター関数`fibonacci`を使用する呼び出し元のコード例は以下の通りです：

“`javascript
const gen =

元記事を表示

Teachable Machineを使ったWebアプリの作り方

こんにちは！小売業で働いているHaMaです。

私の勤めている店舗には、共有PCが事務所に4台あります。
皆さんが使うため、エクセルファイルやPDFファイルなど、データがデスクトップに散らかり放題です。
よく使うアプリケーションが埋もれてしまい、探すのに一苦労します。

そこで今回は、Teachable Machineを用いてデスクトップの散らかり具合を測定するWebアプリを制作しました。
「整頓済み」「散らかっている」という判断を、人の感覚ではなく、アプリにさせることで、あるべき姿を店舗従業員の皆さんで統一しようという試みです。

# 作品の紹介

WordPressでJavaScriptを埋め込む方法

## はじめに
今回はWordPressでモーダルを実装する際にJavaScriptをどこに埋め込めばいいか悩んだのでその解決策をまとめる
## 問題点
WordPressでJavaScriptのコードをどのphpファイルに埋め込めばいいのか
## 解決策
footer.phpの“`“`の直前に埋め込むことで解決する
ただしこれは非推奨な方法のようなので別の方法は後日追記する

“`footer.php




“`

元記事を表示

遅延シーケンス in JavaScript (function 使わない版)

[遅延シーケンスを用いた無限素数列 in JavaScript](https://qiita.com/kohyama/items/0f6643d30ce2ffa98572)
で使っている遅延連結リストを function を使わずに実装
するために必要な前提知識の再確認および演習です.

# function と =>

「function」で関数を定義する場合と「=>」で関数を定義する場合で

| | function | => |
|:——————–|:——–:|:——-:|
|prototype | 使える | 使えない|
|名前を使った再帰 | 使える | 使えない
|new で呼び出して
コンストラクタとして | 使える | 使えない |

のような違いがあります.

本記事では, 上記機能を使わず「=>」を使っていきます.
(function を使う版は[こちら](https://qiita.com/kohyama/items/d

元記事を表示

SIP-1000準拠のデコーダーを作る

# はじめに

### SIPについて
コミュニティのみなさんがまとめていただいてます。

https://symbol-community.com/ja/community/304

https://drive.google.com/file/d/122hovzaodAAie1dueN1LEuTag9gpj3rW/view

> SIP は “Symbol Improvement Proposal” の頭文字を取り略称表記したもので、Symbolの仕様や機能を改善するための提案、その申請の形式で、Bitcoinでは BIP 、Ethereumでは EIP という形式があります。
現在Symbolの仕様や機能の改善等についての提案は、Discordなどでコアチームに対して都度任意の形式で行われており、 BIP や EIP のようなフォーマルな形式は存在していません。
そのため今回の SIP-1000 もフォーマルな形式に則ったものではありませんが、 BIP や EIP に倣い SIP-1000 として提案し、意見を募集するものです。同時に、その提案フローを書くためのガイドラインを SI

元記事を表示

OTHERカテゴリの最新記事