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

テキストの改行が多いスマホサイトなどでよく見かけるイメージ

React19 RCさわってみた

## はじめに

こんにちは、株式会社コズムでフロントエンドエンジニアをやっている山田です。

普段の業務ではNext.jsをゴリゴリ使っていますが、Reactにどうやらメジャーアップデートが到来するようなので、本リリース前にその新機能に触れてみることにしました。

## 新機能

React19で追加される機能はフォーム関連の機能が中心となっています。また、Sever ComponentsやServer Action機能が追加されたことは印象的です。今回は追加された機能群の中でも、”useOptimistic” hookを使って簡単な画面を実装してみようと思います。

## useOptimisticとは

楽観的なUIの更新を行う新たなhookらしいです。つまり、非同期的な処理を行う際に、予測される処理後の結果をUIとして「楽観的に」表示しておいて、実際の処理結果が帰ってきた際に改めてその値に置き換える、という実装を簡潔に行うことのできるhookです。それでは実装を見てみましょう。

まず、formの状態を扱うstateを用意します。ここではApp配下にcommentというstat

TypeScriptを実行する2つの方法【トランスパイル／tsx】

# はじめに

初学者向けです。

今回はTypeScriptを実行するための方法として、

– JavaScriptにトランスパイルしてから実行
– tsx（もしくは ts-node）を使用して直接実行

の2種類を紹介します。

# 概要

– TypeScriptとは
– 実行する方法
1. 【手作業】JavaScriptにトランスパイルしてから実行
2. 【簡単】tsxを使用して直接実行

# TypeScript とは

かなり簡単に説明するとTypeScriptはJavaScriptに型がついたことで安全な開発ができるようになった言語で、AltJSの一種です。

そしてTypeScriptはそのままの状態では実行できず、基本的にはJavaScriptに変換（トランスパイル）してから実行します。

# 実行する方法

## 1. 【手作業】JavaScriptにトランスパイルしてから実行

まずはJavaScriptにトランスパイルして実行する方法です。

実際に簡単な動作環境を構築していきます。

:::note warn
※動作環境の構築にはnode.j

【JavaScript】ABC369まとめ（A~D）

AtCoder Beginner Contest 369

https://atcoder.jp/contests/abc369

A~Cの3完（40分）でした。
577perfでレートは728->714（-14）です。
D問題、まさかの添字ミスでバグりまくり大敗しました。
今回はA~Cとコンテスト後にACできたD問題についてまとめます。

# A – 369
https://atcoder.jp/contests/abc369/tasks/abc369_a

解説は場合分けでしたが、場合分けする気力が湧かなかったのでSetでゴリ押しました。要は、
– $A$と$B$の中で小さい方に$|A-B|$を引いた数
– $A$と$B$の中で大きい方に$|A-B|$を足した数
– $A$と$B$のちょうど真ん中の数（ただし整数の場合に限る）

の三種類の候補があり、同じ数字だった場合ダブルカウントしないというだけのことです。このような要件にはハッシュセットが便利です。

“`js
function Main(input) {
input = input.split(“\n”).map((l

Emscripten の基本的な使い方とグルーコード

WebAssembly (WASM) は、ウェブブラウザで動作する低レベルのアセンブリ風言語です。C/C++/Rust などの言語で書かれたコードを、ウェブ上で高速に実行することを可能にします。

Emscriptenは、C/C++ コードを WebAssembly にコンパイルするためのツールチェインです。WebAssembly へのコンパイルだけでなく、それを処理するための JavaScript のグルーコードと、ブラウザで実行するための HTML ファイルを出力します。

今回は WebAssembly には深入りせず、グルーコードに焦点を絞って、実行環境や JavaScript との連携を調査します。

本記事は Claude 3.5 Sonnet の出力をベースに編集しています。

# ハローワールド

まずは、最も基本的な C 言語のプログラムから始めましょう。以下のコードを `hello.c` という名前のファイルとして保存してください。

“`c:hello.c
#include

int main() {
printf(“Hello, W

小さなGPUでの算法術。忘れ物をしたマリオをルイージが追いかける。スプラインの類似度計算をTensorFlow.jsを用いてGPUで高速にマリオの軌道予測並列計算。


### 衝突の理
東京の小さなオフィスビルの一角、青白い蛍光灯の下でキーボードのクリック音が響く。夜遅くまで働くのが日常のプログラマー、山田達也は、深夜のカフェインに頼りながらコードと向き合っていた。彼は、かつて子供時代に夢中になったゲーム「スーパーマリオブラザーズ」の新しいプログラムに取り組んでいた。

プロジェクトのテーマは「忘れ物をしたマリオをルイージが追いかける」というシンプルなものだが、その背後には高度な計算と物理法則が隠されていた。山田は、マリオがジャンプし、走り、そしてピーチ姫を救うために次々と冒険を繰り広げる中で、彼の軌道を正確に予測するアルゴリズムを考案していた。

スプライン関数による軌道のデータベース化
「マリオもルイージも物理的な存在である以上、瞬間移動はできない」と

【AWS】S3バケットへシークレットキーを渡さずにファイルをアップロードしてもらう方法

# こんな時どうする？

### ケース1
:::note info
自分が管理するS3バケットに対して、他の人にファイルをアップロードしてもらいたい
:::
– 相手からファイルをもらって自分でアップロードする？
– その人のために新しくアクセスキーとシークレットキーを発行する？

### ケース2
:::note info
SPAなどでフロントエンド側からS3バケットへファイルを直接アップロードしたい
:::
– フロントエンドからバックエンドへ一旦ファイルをアップロードして、サーバーで受け取ったファイルをS3へアップロードする？

サーバーサイドのバリデーションが必要な場合は有効な方法ですが、サーバーに負荷がかかってしまいます。

—

どちらのケースでも他の人やフロントエンド側にシークレットキーを渡さずにアップロードしたいものです。

# 注意
:::note warn
この記事で紹介している方法は、署名バージョン2です。
2014年1月30日以降の新しいリージョンでは署名バージョン4のみがサポートされるため、それらのリージョンへのリクエストは署名バージョン4で行う必要が

奥儀。小さなGPUでの算法術。3Dテンソル算法のパフォーマンス。画像テンソルの内積算法術。


ショートストーリー：「未来を紡ぐコード」
東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。彼は次世代の動画生成AIモデルの研究に取り組んでおり、その最前線で活躍するプログラマだ。今日の彼の目標は、彼の開発した新しいアルゴリズムを使って、数学的な美しさを視覚化するアニメーションを作り上げることだった。

拓也の最新のプロジェクトは、3次元テンソルの計算を利用して、視覚的に魅力的なヒートマップを生成することだった。彼のコードは、正弦波と余弦波の複雑なパターンを組み合わせたもので、それぞれが異なるテンソルとして表現される。このテンソルたちは、未来の動画生成AIにおける「可能性の断片」だ。

ある晩、拓也は深夜のコード作成に没頭していた。彼のコンピュータの画面には、青い光が反射するテンソ

KING OF TIMEのMyレコーダーの誤操作を防止する【拡張機能】

不必要なボタンを削除しましょう


出勤する前は、出勤ボタンだけが表示されます。
出勤した後は、休始ボタンだけが表示されます。
休始した後は、休終ボタンだけが表示されます。
休終した後は、退勤ボタンだけが表示されます。
退勤した後は、何も表示されません。

# インストール方法

Tampermonkeyに下記コードを貼り付けます

“`js:kot.user.js
// ==UserScript==
// @name Hide KoT Buttons
// @namespace http://tampermonkey.net/
// @version 2024-09-02
// @description try to take over the world!
// @author You
// @

ユニークな値を作成する方法

### 前提
typeScrypt,Vue.jsを扱っていた時の話。
ほぼメモに近いです
こんな感じで生成できるんかって言う忘備録

### 経緯
for文のなかで一意になる値を何かしら指定しなければいけない状況だったが、保持しているオブジェクトでは一意な値は作成できず外部で作成したものを無理矢理注入するしかないと言う意見に至った。
👆できるならこの考え方はやりたくなかったがクリティカルなバグだったため、暫定的に対応しようとしていた。

## 方法
### Math.random(）
以下のような感じにすると１００までの乱数が作成できる。
（好きな範囲を設定してください）
“`.js
Math.floor(Math.random() * 100) + 1;
“`

### Crypto: randomUUID()
これは便利だなって思いましたね。
ライブラリ必要とせずにできるし、nodeの環境であれば使えるのは助かりますね。
ただ、これに関してはクライアント側で使えないと言うことがわかったので、今回の場合だと採用できなかった感じ
また「https」のような安全な環境でしか使えない

postMessageを使ってクロスオリジンなiframeからデータを受け取る

## はじめに

こんにちは。HRBrainでオウンドメディアやランディングページの開発を担当している渡邉です。

SalesforceなどのMAツール製のiframeフォームをウェブサイトに埋め込むことがあります。

この記事では、ウェブサイトとiframeが異なるドメインの場合に、iframeからウェブサイトにデータを受け渡す方法について解説しています。

▼ [HRBrainサービスサイト](https://www.hrbrain.jp/)におけるiframeフォームの事例


## クロスオリジンでのiframe操作の制限

iframeとウェブサイトが異なるドメインに存在している場合、ウェブサイトからiframe内の要素に直接アクセスすることができません。

– ウェブサイトのURL： `example.com`
– i

物流DXにも応用できる高速道路の料金計算API

# はじめに
HEREでエンジニアをしておりますkekishidaと申します。
以前、拙記事においてHERE Maps API for Javascripを使用してReactベースで簡単なルート検索アプリを作成する方法の紹介をしました。

https://qiita.com/kekishida/items/7587a2dcab916459e8dd

さて、先日HERE API群においても**日本の高速道路料金を計算**することが可能になりました。[^1]
本記事では、前回紹介したルート検索アプリのコードをベースに、**日本の高速道路料金を計算するアプリ**に改造してみたいと思います。

[^1]:一部の高速道路（海ほたる、本州四国連絡高速道路、日光宇都宮道路など）は未対応。

# アプリイメージ
前回紹介したルート検索アプリに、
– 車種(Choose Transport Type)
– 支払い方法種別(Choose Payment Type)
– 出発日時(Deperture)

という入力項目を追加しました。
![image.png

Javascript – オブジェクトの配列を同士を比較する ( JSON.stringfy ) ( 3人のアリス )

# 課題

2個の配列同士で、オブジェクトの値が1個でも違うものがれば、その差分を検出したい

# 対策

– `JSON.stringify` でオブジェクトを丸ごと比較する

## コード例

それぞれ名前・年齢を持つオブジェクトの配列を比較する

“`js
// 配列Aと配列B
const arrayA = [
{ first_name: ‘Alice’, age: 20 }, // 両方の配列に存在する要素
{ first_name: ‘Alice’, age: 30 }, // 両方の配列に存在する要素
{ first_name: ‘Bob’, age: 30 }, // 片方の配列にしか存在しない要素
]

const arrayB = [
{ first_name: ‘Alice’, age: 20 }, // 両方の配列に存在する要素
{ first_name: ‘Alice’, age: 30 }, // 両方の配列に存在する要素
{ first_name: ‘Alice’, age: 40 }, // 片方の配列にしか存在しない要素

JsonPathを使ってハマった件

# 何にハマったか
JavaScriptでJsonPathを使ったテストを実行しても問題ないのに、同じコードをNext.jsのアプリで実行するとエラーが出る。

`node search-query-parser+JsonPath.js`
→問題なし

npm run devで実行すると、
Advanced search error: Error: Expected comma at character 34
のエラーが出ることをDevToolのTerminalで確認。
ブラウザのDevToolのデバッガーでたどっていくと、エラーメッセージは、jsonpath-plusのindex-browser-esm.jsでJsonPathのチェックを実行する関数で発生しており、JsonPathのクエリ文字列に”{“が含まれていることが原因だとわかった。

原因は使っていたJsonPath-plusのライブラリの設定にあった。

# JsonPathとは
Jsonのクエリ言語。
ネストした複雑なJsonからでもデータを抽出することができる。2007年以降長く使われていたが、2024年にIETFによ

小さな日本語GPTのエンジニアリング。僕だけの日本語GPTを作るというゲーム。

前回のあらすじ。

https://qiita.com/tetsutakamurata76/items/619369c2651a80d02cd9


Google corab GPU で実行です。

### 実行結果。日本語トークナイザーと日本語モデルを使用。

生成されたテキスト: エポック75
### Generated Text: 健一の次の挑戦は、aiの可能性をさらに探求することでした。 田中健一は、新しいaiモデルの設計のアイデアに興奮しました。 彼は二次元テンソルを掛け合わせることで、これまで不可能とされていたものを実現でき、しかも、それが瞬時に実現できることに確信しました。

Generated Text: 健一の次の挑戦は、aiの可能性をさらに探求することでした。 四次元テンソルを使用した計算は、オイラーシャフト と g

小さなGPTのエンジニアリング。 Chat with GPT という日本語チャットゲーム。

#### You: ショートストーリー：「未来を紡ぐコード」 東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。
### GPT-2: ショートストーリー:「未来を紡ぐコード」 東京のプログラマ、加藤拓也は、夜の東京の喧騒から少し離れた静かな部屋で、一心不乱にキーボードを叩いていた。加藤は「この部屋は僕の居場所だ」と呟き、部屋の隅に座り、キーボードの音に耳を澄ませた。 加藤がキーボードに手を置いた瞬間、僕は加藤の指が震え始めた。 「僕が、この世界を創ったのは君のおかげです。君が僕を、君を僕に、そして君に。」 僕と加藤、その指は互いに触れ合い、お互いに「君」の言葉を口にした。 そして、

#### 東京のプログラマとリアルタイムのAI対話
東京の片隅に住むプログラマ、山下誠は、技術革新の最前線に立つエンジニアだ。彼は、日々の生活に追われながらも、新たなプロジェクトに取り組んでいた。彼の目標は、未来を感じることができるインターフェースを作り上げることだった。山下の手元には一つのコードがあった。これを実行することで、ブラウザでGPT-

画面が汚れているな。　カラフルなパーティクル掃除機ゲーム。スペースキーで吸引です。



### マウスでノズルを移動してスペースキーを押すと吸引です。

“`html