f@ctor

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

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

【Publisher】Extensibility using HTML, CSS and JavaScript

# Introduction #
I will customise the standard Sharperlight web report.
The report will have two buttons and a check box on each row of a table.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/35b525dc-2760-e67e-8a21-e5f16d9c01e0.png)

I use HTML, CSS and JavaScript to make it.

# Backend Code #
The backend code is written as a HTML file and it has the button elements and JavaScript code.
This code will be rendered as a part of the web report generated by Sharper

元記事を表示

配列結合最速王を決めよう.js

# この文書の目的
タイトル通りですが、最近JavaScript（Node.js）において配列の結合でトラブルに遭遇したので、どうしてたら良かったのかを改めてまとめてみました。

## 条件
この文書では、配列の結合とは以下のようなものを指すこととします。
`a=[1,2,3]; b=[10,20,30]`を`c=[1,2,3,10,20,30]`のようにする。

この例ではたかだか3要素しかない2つの配列を結合するだけなので、まあ普通に`concat()`でも使いましょう、で終わりですが、やりたいこと（というかトラブルになったこと）は、「ある程度の要素数を持ったある程度の数の配列を結合すること」です。

以下に示すサンプルでは、要素として配列を持った親配列が以下のように定義されているものとします。
“`javascript
parentArray = [
[1,2,3,….],
[10,20,30,….],
[100,200,300,….],
…
]
“`
これを結合して、
`resultArray = [1,2,3,….,10

元記事を表示

スクロールアニメーションと画像表示の考え方【中級編⑥】

# はじめに
今回は、スクロールすると画像が表示されるアニメーションの仕組みについて考えていきます。

# スクロールすると右からフワッと表示される画像

See the Pen
スクロールすると右からフワッと表示される画像 by Uka Suzu

元記事を表示

それってSetにする価値ありますかね？

# はじめに

競プロ([AtCoder](https://atcoder.jp/))をやっていると、配列の要素数や検索回数が大きい場合、重複削除目的ではなく高速化のために、配列(`Array`, `List`)を`Set`や`Map`(Rubyの場合`Hash`)に変換することはよくあります。

さて、実業務ではどうでしょうか？

実際に扱う配列の要素数、検索回数が$10^6$程度ということはそんなにないかもしれません。
むしろ、要素数や検索回数が100未満ということが多いのではないでしょうか？

では、この場合に、配列を`Set`や`Map`(or `Hash`)に変換する価値はあるのでしょうか？
もちろん、`Set`, `Map`(or `Hash`)になったものを、検索する速度が速いことはわかります。

しかし、`Set`や`Map`(or `Hash`)に**変換するにもコストがかかります**。

**境界はどこでしょうか？**

今回、`Ruby`, `Javascript`, `Kotlin`で、`Set`, `Map`(or `Hash`)の使用は要素数・検索回数がどれ

元記事を表示

【JavaScript】配列の応用まとめ①（条件抽出・マッピング）

こんにちは😺
だいぶ期間が空いてしまいました・・・
少しずつ落ち着いてきたので再開します:relaxed:

JS基礎学習、今回は`配列`の応用編①です！

## ▼配列の応用
### 1. 配列のフィルタリング（条件抽出）
配列の中から特定の条件に合う要素だけを抽出する。
` filter() ` メソッドを使って特定の条件を満たす要素を抽出する。

“` js
// 例: 偶数の要素を抽出
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]
“`

＜応用例＞
– 商品リストの中の商品の在庫があるものだけを表示
– Todoリストの完了していないタスクだけを表示

### 2. 配列のマッピング（値の変換）

:::note info
**データマッピング（Data Mapping）**
異なるデータソースや異なるフォーマットのデータを変換・結合し、マッピング（対応

元記事を表示

焦点を外すための、パラボラアンテナによる電波密度の計算ゲーム。

#### ショートストーリー: 焦点を外す
東京の喧騒が静まりかけた深夜、アキラは自宅のオフィスでキーボードを叩いていた。彼は才能あるプログラマであり、国家プロジェクトの一環として最新の装甲車両の防御システムを開発していた。近年、ドローンによる成形炸薬弾攻撃が増加しており、東京の安全が脅かされていた。そのため、彼の仕事はかつてないほど重要だった。

成形炸薬弾は、金属ジェットを高速で放出することで、強力な破壊力を持っている。その焦点距離を特定し、無効化することが、この防御システムの肝となる。アキラは、プログラムに新しいアルゴリズムを実装することを決意した。彼は金属ジェットが最も効果を発揮する焦点距離を特定し、その距離を巧妙にかわす方法を考えた。

防御システムの開発
彼の開発チームは、成形炸薬弾の特性を徹底的に分析した。金属ジェットが形成される瞬間、爆風の圧力波が発生し、その後、焦点が定まる。アキラは、装甲車両の動きとシールドの展開を同時に行うことで、焦点距離を回避し、ダメージを最小限に抑えるアルゴリズムを設計した。

「焦点を外せば、威力は無効化できる」と彼はチームに説明した。シス

元記事を表示

目指せ高度１０００メートル。ロケット打ち上げゲーム２。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846020/1abfc2c1-53b5-9056-9faa-fc312d5e5cbd.png)

![スクリーンショット 2024-10-14 230553.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846020/63679eb0-ad41-2819-a22d-badc381a255f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846020/9136da8e-b010-274a-5137-5095e0a47c9f.png)

### 目指せ高度１０００メートル。ロケット打ち上げゲーム２。

スペースキーを押している間はエンジン噴射します。放すとエンジン停止で自由落下で着陸します。

コードをメモ帳などのテキストエディタ

元記事を表示

【JavaScript】Idle Detection APIとかいう悪用以外の使い道がないAPI

2024/09/10に[Idle Detection API](https://wicg.github.io/idle-detection/)というAPIが更新されていました。
ステータスは[Draft Community Group Report](https://www.w3.org/community/about/process/)です。
これはコミュニティによる提案であり、W3Cによる正式な勧告ではありません。
個人や団体レベルでも、とりあえずRFCを作ってみたり検討したりできる段階ということです。

以下は[この提案を管理しているGitHub](https://github.com/WICG/idle-detection)から、このRFCの意義を解説した[Readme](https://github.com/WICG/idle-detection/blob/main/README.md)の紹介です。

# User Idle Detection API

このAPIでは、開発者はユーザがアイドル状態になったとき(キーボードマウスを操作していない、スクリーンセーバーが起動した

元記事を表示

プログラミング言語別のDate型操作方法

## 記事を書こうと思ったきっかけ
今回この記事を書こうと思ったのは、仕事や自己学習の中で日付（Date型）を扱う機会があったことがきっかけです。仕事では主にVB.NETを使用し、自己学習ではReactを使って開発をしていますが、ふと「日付を扱う方法は、言語によってどのように異なるのだろう？」と疑問を持ちました。そこで調べた内容を整理し、この記事としてまとめました。
今回調べた言語は以下の４つです。
– Java
– Python
– JavaScript
– VB.NET

## JavaでのDate型の扱い

Javaでは、日付操作に古くからjava.util.Dateが使用されてきました。近年ではjava.time.LocalDateやZonedDateTimeなどのモダンなAPIが推奨されています。日付のフォーマット変換にはSimpleDateFormatやDateTimeFormatterが使われ、タイムゾーンの考慮も簡単に行えます。これにより、異なる地域間での正確な時刻操作や、過去・未来の日付演算が容易になります。
“`Java:
// 必要なクラスをインポートします
i

元記事を表示

GAS(Google Apps Script)のライブラリーコードを隠蔽する

以前はGAS(Google Apps Script)のライブラリーは隠蔽されていた記憶がかすかに残っています。少なくとも、パブリックメソッドとプライベートメソッドを書き分けて、関数の公開と非公開を選択出来ていたことは覚えているので、即ち、やっぱりライブラリー全体のコードは隠蔽されていたような気がするのです。
昔のことはこの際どちらでも良いのですが、本記事の目的としてはライブラリーとして公開するライブラリー自体のコードを隠蔽し、ライブラリーの利用者や第三者から解読を不可とすることにあります。
研究記事となりますので、実際は何らかの方法で解読できてしまったという場合にも責任は負いかねますのでご参考までとして下さい。

***※余談※*** 私の人生は、半角括弧「()」を使うべきか、全角括弧「（）」を使うべきかに悩まされ翻弄される人生でした。特にPC黎明期は画面やフォントの関係から半角派でした。今も実はどちらかと言えば半角の方がしっくりくるのですが、ちょっと下にずれていたり、ちょっと潰れ過ぎていたりする印象もあり、Microsoft社が全角推しになったタイミングで、メジャープラットフォームの

元記事を表示

TypeScriptにてユニオン型の型ガードを整理したい

# 型ガードとは
* 型絞り込みのために使う論理チェックのこと

# ユニオン型とは
* ある値の取り得る型の数を、2つ以上に拡大する

“`typescript
let hoge: string | number
“`

# ユニオン型の型ガードを整理する

* 複数の型をもつユニオン型などの場合はどのように型ガードするといいのかを整理したい

## ユニオン型だと型安全ではないと言われる
* TypeScriptの型システムではユニオン型などの複数の型を取り得る場合に、
そのプロパティにアクセスするとどちらかの型がくるかわからないため型安全ではないと判断される

“`typescript
// hoge: string | number
let hoge = Math.random() > 0.5 ? ‘John’ : 40;

// 引数にstringかまたはnumberのどちらが来るかわからない
fugafuga(hoge)
“`

### 値を割り当てる
* TypeScriptは変数に値が割り当てられたら、その変数が何の型なのかを理解してくれます
* 値を割り当てて

元記事を表示

作成したログイン機能をNextjsに移す

## はじめに

以前作成した [ログインしたユーザーがTODOリストを作成できるようにする](https://qiita.com/idaten7240/items/f11db6a20985190e60fd) をNext.jsに移行します。

## next.jsとは

Next.jsは、Facebookが開発したReactベースのフレームワークです。サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を容易に実装できるよう設計されており、SEO対策やパフォーマンスの最適化にも効果的です。

## 準備
#### Node.js と npm のインストール
“`
node -v
npm -v
“`

作業ディレクトリに移動します（例：workspace）
“`
cd ~/workspace
“`

Reactプロジェクトの作成
“`
npx create-react-app app todo
cd app todo
“`

## ページコンポーネントの作成

HTMLファイルをNext.jsのページコンポーネント（.jsxファイル）に変換します。

元記事を表示

【Next.js】Prismaの使い方(findUnique編)

# 記事作成の背景
ORMのPrismaでデータベースから一意のレコードをfindUniqueで取得する際に、沼ってしまったので備忘録として記載します。

# 沼った原因は何だったのか？
結論は、スキーマ定義で対象となるカラムに対してUnique属性を付与していなかったことが原因でした。
今回は、emailとpasswordの2つで絞り込んで一意のレコードが取得できるようにします。

“`scema.prisma(修正前)
model Users{
id Int @id @default(autoincrement())
name String
email String
password String
created_at String
updated_at String
}

“`

↑のスキーマ定義だとエラーが生じてしまいます。
コンソールには、「IDとは、一意となるカラムを少なくとも1つは指定してね」という表示が出ます。

なので、下記のように修正します。

“`scema.prisma(修正後)
mod

元記事を表示

JavaScriptで複数の画像を表示するアニメーションを考える【中級編⑤】

# はじめに
今回は、JavaScriptを用いて画像をゆっくり表示するアニメーションを制作していきます。

# 複数の画像を表示する

See the Pen
複数の画像を表示する by Uka Suzuki (動画生成技術。「動きを捉えるアルゴリズム」

### ショートストーリー: 「時間の流れを捉えるアルゴリズム」
東京の夜、渋谷のオフィスビルに明かりが灯る。プログラマーの田中は、ディスプレイの前で一心に作業していた。彼の目の前には、彼が開発中のニューラルネットワークモデルが映し出されている。フレーム数の違いが、モデルに与える影響を検証している最中だ。

「フレーム数が増えれば、動きの連続性がもっと捉えられるはずだ…」

田中は1フレームの入力でモデルを実行する。結果は想像通り、動きは途切れ途切れで滑らかさに欠けていた。まるで連続したスナップショットが次々と映し出されるかのようだ。

「やっぱり、1フレームでは瞬間的な情報しか捉えられない…」

彼は次に、30フレームをモデルに入力した。今度は違う。連続的な動作の流れが、滑らかに画面に映し出される。物体が自然に動き、時間の経過が明確に再現されていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3846020/406acd28-7901-53a3-43f3-89b

元記事を表示

JavaScriptでTODOリストを作ってみた part.3

こんにちは！gamubaruです！

今回も引き続きjsでTODOリストを作っていきます！
本日は削除機能を作成していきたいと思います！

よろしくお願いします！

１．クリックイベントをつけよう
–
削除ボタンクリックしたときに動く関数を作成してみようと思います。
その前に、各TODOにユニークな値を付けていきたいと思います。（このレベルならクリックした横の値とかでもできるけど、、練習ということで）

HTMLを生成するときに値を付与したいので、こちらの関数は分解したいと思います。

“`js
/**
* HTMLを生成する
* @param {string} tagName 生成するタグの名前
* @param {string} text 名前
* @returns {HTMLElement} 生成したタグ
*/
const createElement = (tagName,text) =>{
const elm = document.createElement(tagName)
if (text !== undefined){
elm.

元記事を表示

kintoneから生成AIとAPI連携し、回答をレコードに自動保存するJavaScriptと活用案

![サムネイル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211946/b2fedf62-8bbe-770e-363c-0ae3405b1bed.jpeg)

# 概要

kintoneをCRM（顧客管理）やSFA（営業支援）として利用している企業にとって、
顧客対応の効率化は永遠の課題であり、伸び代でもあります。

そこでkintoneと、今話題である**生成AI**（今回は`Gemini API`を使用）を連携し、
効率化させていきたいと思います。

生成AIと連携するkintoneプラグインはすでに下記のように市販されておりますが、
内容や利用規模によっては内製のAPI連携で十分構築できると感じました。

https://kintone-sol.cybozu.co.jp/integrate/msol026.html

まずはコードを紹介し、その後に活用案の一例を紹介します。

# kintoneへのコード設定

## 事前準備①

kintoneのUI上にて、
– ボタンを配置する`スペースフ

元記事を表示

カレンダーを作るー1

お疲れ様です。

シンプルカレンダーについていろいろ調べていましたが、データが古くletではなくvarが使われていたのもあり、chatGPT先生にコードを書いてもらいました。
まずはそれを見ながら分からないことろを調べ、今自分がどこの部分のコードを書いているか理解しながらやっていきます。

というわけで進捗です↓
![スクリーンショット 2024-10-14 000952.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3810013/02b1f9a0-8965-4893-2612-a5e4b581e7aa.png)
cssを書いてない状態なので、全部下に伸びていっちゃってますので、明日cssをあてて見た目を整えたいと思います。

今回コードを読んでいく中で、「テンプレートリテラル」のことをすっかり忘れていましたので、途中で復習をしました:writing_hand:

“で囲んで、${}の中に式などを書くことで、文字列が出来上がるというものでした。
${}を見ると、「jQueryだ！」とか思いましたが、

元記事を表示

JavaScript圧縮program集2

## Hacker Packer
[Dean Edwards’ Packer](http://dean.edwards.name/packer/)の改造版

See the Pen Hacker Packer by xezz (@xezz) on

元記事を表示

Javascriptによるアニメーション作成

## anime.jsを使用したアニメーション作成

アニメーションサイトGit共有リンク
https://github.com/ayaka0525/anime/tree/main

anime.jsをサイトで検索して、anime.min.jsのRawをクリックし名前をつけて保存。
自分の作成しているhtml,cssなどと同じ階層に入れたら使えるようになる。

https://github.com/juliangarnier/anime/blob/master/lib/anime.min.js

htmlのscript手前で読み込み
“`

“`

javascriptはhtmlのbodyに直接記述した。
先ほど読み込みをしたanimateBlocksを使用している。
“`