f@ctor

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

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

What does “window” have? – windowの中身を覗いてみる –

> この記事は、『Qiita “N/S高等学校” Advent Calendar 2023』18日目の記事です。

S高1期生、通学コース週5生の綾坂ことです。
今年もN/S高アドカレがあるとのことで、せっかくなので書こうかと。

—

私には、常日頃「JavaScriptであそぼ」をやっていて思うことがあります。
それは、**知らない機能が多すぎる**ということ。

MDN Web Docsを眺めてると、「なにそのAPI、知らなかった」となることがよくあります。
知らなかったから使えなかったは勿体ない、やはり存在だけでも知っておくべきかなと。

JavaScriptでそういう機能が全部一覧になってそうなところといえば、やはり`window`。
そんなわけで、`window`の中身を片っ端から調べていきます。

> 12月18日 追記
> 思った100倍地獄でしたたたたたｔ

## ログの生成

> `window`じゃなくて`globalThis`でやりましたが、`window === globalThis`は`true`だったのでたぶん問題ないと思います。

`Object.k

元記事を表示

【JavaScript】特定のコンテナーの中だけマウスストーカーを出現させたい

# はじめに
ページ全体に反映させるのではなく、特定の範囲内だけポインターデザインを変える方法を調べていました。今回はGSAPを使用し、マウスストーカーを作成しています。

# 問題
### ■ カーソル位置がズレる
.containerを基準に位置を取得するため、offsetXやoffsetYを使用したのですが……カーソルが範囲外に出るとマウスストーカーがあらぬ方向に吹っ飛び、思うように追従してくれません。
“`html:index.html

“`
“`css:style.css
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-it

元記事を表示

初めてのAstro

# はじめに
プロジェクトでAstroを使うことになったので軽くドキュメントの内容をまとめてみました。

# Astroとは
Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
(https://docs.astro.build/ja/concepts/why-astro/)

Astroは高度なWebアプリケーションを構築するために設計されたフレームワーク(Next.jsなど)とは異なり、ブログやポートフォリオサイトといった静的なWebサイトを作るのに向いています。

Astroはサーバーサイドでのレンダリングをメインとしており、この点も最近のJSフレームワークと異なる点となっています。
サーバーサイドでのレンダリングのおかげでパフォーマンスの向上にも期待ができる。

フロントエンドを触る人には周知の事実かも入れないが一応このような事例がある。
– 高速化100msごと → コンバージョン数1％増（Mobify、年間38万ドルの収益）
– 50%高速化 → 売上12%増（AutoAnything）
– 20%高速化 →

元記事を表示

サブスクリプション申し込み時に表示する初回請求の見積額を、StripeのRetrieveUpcoming Invoice APIで計算する

Stripeでは、「定額料金 + 数量や利用量ベースの段階的料金」のような複雑な料金体系のサブスクリプションも簡単に作成することができます。

![スクリーンショット 2023-12-13 14.27.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/3a73c441-ad0b-15bb-d327-c85e9756b3e1.png)

このような料金体系を利用することで、「利用した分だけ支払う」サービスを顧客に提供することができます。また、大口契約に対する割引なども、個別対応を行うことなく実現できます。一方で複雑な料金体系を作成する場合、顧客が「この数量・プランだといくら支払うことになるのか？」を調べやすくする必要もあります。

## RetrieveUpcoming Invoice APIで、契約前のサブスクリプションの請求額を見積もりする

Stripeでは、「次回の請求内容をプレビューする」ことができる「[Retrieve upcoming Invoice API](https:

元記事を表示

WebエンジニアがReactNative触ってみたのでつまづきポイント書いていく

Reactは最低限書けますが、 「なんかViewとか新しいComponentでてきてとっつきにくいな」とずっと避けていたので今年ちゃんと入門しようと思って書いてます。

わかってしまったら結構簡単だったので普段からReact書いている人は少しだけでもいいので書いてみると楽しいかもです。

Reactエンジニアってよくわからないですが、普段からReact触っていて基本は抑えている人のことと仮定してます。もっというと

https://ja.react.dev/learn

の「Reactを学ぶ」の部分は抑えている人のこと

# `React Native` = `React` – `HTML` + `Core Components`

自分は React Native書いていて `` みたいなフロント描画するところがすぐには馴染めなかったです。div, p, spanとかWebにある当たり前のComponentがなくて `Core Components` と呼ばれるものしかなかったです。

一旦入門して数日の雑な理解です。

## Core Components とそれ

元記事を表示

MapLibre GL JS+標高タイルで3D地形を表示する方法

# はじめに

:::note info
この記事は [MapLibre Advent Calendar 2023](https://qiita.com/advent-calendar/2023/maplibre) 18日目の記事です。
:::

MapLibre GL JSでは地形データがあれば、[3D地形を表示する](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/)ことができます。地形データ（以下、標高タイル）は[DEM（数値標高モデル）](https://fgd.gsi.go.jp/download/ref_dem.html)とも呼ばれ、MapLibre GL JSではDEMを地形データとして利用しますが、[Terrain-RGB形式（Mapbox）（もしくはTerrarium-RGB形式（Mapzen））というエンコーディング（標高換算式）の標高タイルが利用されます](https://maplibre.org/maplibre-style-spec/sources/#raster-dem)。無償で提供さ

元記事を表示

JavaScript: テキストフィールドに入力した日本語の確定と変換後の[enter]キーの押下を切り分ける

たとえば、検索ボックスに入力した語句を、[enter]キーの押下で検索実行したい場合があります。日本語の入力では、[enter]キーの操作を変換の確定とは切り分けなければなりません。

# 結論: `KeyboardEvent.keyCode`プロパティで[enter]キーを調べる
日本語入力が確定したあとの[enter]キーの押下かどうかは、[`KeyboardEvent.keyCode`](https://developer.mozilla.org/docs/Web/API/KeyboardEvent/keyCode)プロパティで調べるのがよいでしょう。テキスト入力フィールド(``要素)が変数`eventTarget`で参照されている場合は、つぎのようなコードです。

“`js
eventTarget.addEventListener(‘keydown’, ({ keyCode }) => {
if (keyCode === 13) {
// 日本語入力確定後の[enter]キーの処理
}
});
“`

# `Keyboard

元記事を表示

Angular Schematics を使ってDBデータを編集できる単純な画面のプログラムを自動生成する

## はじめに

業務アプリケーションの開発では、通常、データベース層、バックエンドロジック層、フロントエンドプレゼンテーション層など、複数の層を構築する必要があります。スキーマの変更が必要な場合、サーバサイドドメインのエンティティやクライアントのインターフェースなど、関連するコードを修正する必要があります。このような変更に対処する際には、DRY原則[^1]を実現するためにスキーマ情報を一元管理し、各層のエンティティや構造体、型情報を単一のスキーマ情報から生成できるようにしておくことが重要です。これにより、変更に強いアプリケーション構造を確立することが可能となります。

今回は Angular の __Schematics__ を使って、フロントエンドのプログラムを生成するジェネレータを作成してみようと思います。

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343337/5b22c96a-ec0d-21e1-0ee9-5dffa42e1b5f.gif)

## Angular Sc

元記事を表示

Web3.Storageと暗号化技術を組み合わせて、ファイルを安全に管理する

この記事は、[株式会社うるる（ULURU） Advent Calendar 2023](https://qiita.com/advent-calendar/2023/uluru)の18日目の記事です。

# はじめに
最近、[Web3.Storage](https://web3.storage/)というサービスに触れる機会があったので、使い方やできることをまとめつつ、暗号化技術を組み合わせてファイルを安全に管理する方法を模索します。

# この記事で登場するコード群
以下Githubレポジトリにて公開しています。

https://github.com/tatsukoni-pra/Web3Storage-Secure-Upload-Demo/tree/main?tab=readme-ov-file

# 概要
本記事で登場するWeb3.Storage, Filecoinストレージについて説明します。

:::note info
詳細まで踏み込むと長くなってしまうので、概要の説明に留めています。
より詳しくは、添付している公式のリンクなどを参照ください。
:::

## Web3.Sto

元記事を表示

メルカリのカテゴリ名とURLを抽出するスクリプト

## カテゴリー情報の抽出
メルカリの「カテゴリーからさがす」ページから
項目とURLを抽出するスクリプト

URL：https://jp.mercari.com/categories

※大カテゴリ、小カテゴリ全てで使えます。

### サンプルコード
“`Javascript
function displayLinksInBrowser(html) {
const tempElement = document.createElement(‘div’);
tempElement.innerHTML = html;

const links = tempElement.querySelectorAll(‘.content__884ec505 a’);

const table = document.createElement(‘table’);
const tableBody = document.createElement(‘tbody’);

links.forEach(link => {
const path = link.getAttribut

元記事を表示

[JavaScript] アニメーションを学ぶ

## はじめに
JavaScriptでアニメーションの基本の書き方について学習したため備忘録として残しています。

## アニメーションの基本
JavaScriptでアニメーションの指定をすることで、より豊かな表現が可能になる。
様々な関数やイベントと組み合わせることで、より柔軟にアニメーションを作成できる。

:::note
`キーフレーム`:アニメーションは開始時の値と終了時の値を指定することで、その2点の間の値を自動補完して滑らかな動きで表示することができる。
この自動補完の動かす内容のことを指す。
:::

### 書き方
“`js:web Animation APIの基本の書き方
動かす要素.animate(第一引数, 第二引数);
“`
第一引数にはキーフレーム(オブジェクト)を指定する
第二引数は再生時間(単位は**ミリ秒　１秒は1000と指定する)や細かい動きの指定

## animateで指定できるプロパティ
複数を同時に指定することができる。
アニメーションの再生時間である[duration]は**必須項目**

### delay
アニメーションの開始を遅らせ

元記事を表示

年末年始による体重増加

# 初めに
　寒気が厳しくなってきた今日この頃クリスマスまで残すところ一週間となりました。この時期は多くの行事があり慌ただしい時期となっています。年末年始は、忘年会や新年会、帰省・旅行などでごちそうを食べる機会が増えるものです。お祝い事が重なりお酒やスイーツの摂取量も増える時期といえます。長期休みで生活習慣が乱れやすい時期に、短期間で何度も暴飲暴食を繰り返すことが正月太りの主な原因といえるでしょう。
　また、年末年始は冬の寒さの真っただ中にあるため、外に出て体を動かす機会も減ってしまう時期といえます。
　**そこで正月太りが懸念される中BMIについて詳しくなっておきたいものです。**

## BMIとは？
**BMIは「 Body Mass Index 」の略で、体の大きさを表す指数です。**

## BMIを出してみよう！？！？
　まず**HMTL**に以下のコードを書いていきます。

“`html:HTML




元記事を表示

JointJS解説　〜Highlighter編〜

## Highlightersとは

Highlightersは名前の通り要素をハイライトするなどの視覚効果を付与できるJointJSの機能です。
オン・オフの切り替えができるので、マウスイベント発生時の視覚効果をつけるときに有用な機能となります。

## 使用方法

視覚効果の種類によって呼び出すAPIは異なりますが、基本的な使い方としては各APIの`add()`メソッドを使用すると視覚効果が追加されます。また、`remove()`メソッドを呼ぶと視覚効果が削除されます。
以下は、要素をクリックしたときにハイライトを表示し、領域外をクリックしたときにハイライトを削除するサンプルです。

### コード例

“`js
// ハイライトを付与
paper.on(‘cell:pointerdown’, function(cellView) {
joint.highlighters.mask.add(cellView, ‘root’, ‘my-mask-highlighter’, {deep: true});
});

// ハイライトを削除
paper.on(‘blank:point

元記事を表示

【React】シンプルなマウスストーカー（ポインター）を手軽に作成する

# 背景
マウスを動かした際の演習として、マウスのカーソルを追従するようついてくるマウスストーカーがあります。
このマウスストーカーを効果的に使用する事で、よりリッチな表現をする事ができると思います。
本記事ではReactを使用し、3つの円を使ったシンプルなマウスストーカーのサンプルについて解説します。
以下のgif画像が完成形です。

![mouse_st.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/b99e9f92-08ad-d1a6-f804-2f1788f688b1.gif)

# 環境
– vite：5.0
– React：18.2.0

# 全体のコード
先に全体のコードとCSSを以下に記載します。
“`react:App.jsx
import { useEffect, useState } from “react”;
import “./App.css”;

const Pointer = ({ name, position }) => (

元記事を表示

ストリーミング機能を持ったAIチャットシステムの開発 (2)

# はじめに

AIチャットボットは、ユーザーとのインタラクティブな会話を実現するために広く使われています。前回と今回の記事で、LangChain、非同期ジェネレータ、FastAPI、およびHTML/CSS/JavaScriptを使用して、リアルタイムにメッセージをストリーミングするAIチャットシステムを開発する方法を紹介します。

![DALL·E 2023-12-18 00.31.25 – Creative image visualizing the development of an AI bot with FastAPI. This scene depicts a futuristic lab with holographic displays showing FastAPI’s .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565029/a022bf50-e288-3622-43aa-c02ca60edfa4.png)

DALL-E 3で作成したFastAPIアプリのイメージ画像

前回

元記事を表示

「イージング関数チートシートの関数」「p5.js の lerp()、frameCount」を組み合わせたイージングの繰り返しの実装【完走賞ゲット-18】

:::note info
※ [Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です](https://twitter.com/Qiita/status/1593441648796524545)
:::

この記事は、「[完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/youtoy)」の 18日目の記事です。

## 今回の内容
今回の内容は、[イージング関数チートシート](https://easings.net/ja)の関数と、p5.js の lerp()・frameCount を組み合わせて、以下の動画のようなイージングを実装するというものです。