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

CODE39に準じたバーコードフォントを作成する

# バーコード・CODE39

QRコードと比べて情報量の少ないバーコードですがフォントとして利用すれば大量の表示が可能である事と視認性の高さやスペースの問題から今でも多く使用されています。

そんなバーコードには多くの種類があります。その中でも数字だけでなくアルファベットと一部の記号が使用でき、視認性に優れる***CODE39***は産業界でよく使用される存在です。

実際、自分自身も前職が製造業であったので進捗管理システム上でよくスキャンしていました。様々なきれいと言い難い協力会社の現場に廻されてときに猛者感を醸し出すものもいた図面と伝票ですが、バーコードスキャンエラーが出ることはありませんでした。今思うとこのバーコードもCODE39だったかもしれません。

## CODE39について

CODE39は1975年に米インターメック社で開発されたバーコード規格で、数字、アルファベット、記号の合計43個の文字を符号化したものです。

9本の太細のバー、スペースで一つの文字（キャラクタ）を表わし、3本は常に太いバー・スペースになります。また始まりと終わりはバーとなります。文字列の終始には

P5.js 日本語リファレンス(beginGeometry / endGeometry)

このページでは[「P5.js 日本語リファレンス」](https://qiita.com/bit0101/items/91818244dc26c767a0fe) の beginGeometry() / endGeometry()関数を説明します。

## beginGeometry / endGeometry

### 説明文

beginGeometry() は図形形状情報を保持する p5.Geometry オブジェクトへ図形の追加を開始します。
endGeometry() は図形形状情報を保持する p5.Geometry オブジェクトへ図形の追加を終了します。
beginGeometry()とendGeometry()の間で複数のシェイプ（図形）を追加することで複雑な図形形状を作成することができます。

beginGeometry() と endGeometry() は、描画のパフォーマンスを向上させるのに役立ちます。たとえば、以下の(a)の方が(b)よりも高速に描画することができます。
(a)beginGeometry() と endGeometry()の間で個々のシェイプ(図形

検索した文字列の隣をクリックする方法

“`js
// 仮の変数にPower Automate Desktopから取得した文字列を設定
var searchText = “ここに検索文字列を入力”;

// 検索文字列を含む

要素の左隣の

内のタグをクリックする関数
function clickLinkInAdjacentLeftTd(searchText) {
const tds = document.querySelectorAll(‘td’);

// 全ての

要素をループ
for (let i = 0; i < tds.length; i++) { if (tds[i].textContent.includes(searchText) && i > 0) {
const previousTd = tds[i – 1]; // 左隣の

要素を取得
const link = previousTd.querySelector(‘a’); // 左隣の

内の最初の要素を取得

React + TypeScript: memoで包んだコンポーネントでもコンテクストの更新により再レンダーされる

コンポーネントを[`memo`](https://qiita.com/FumioNonaka/items/c0427027dea12857c825)で包むと、親から渡されたプロパティ(`props`)が直前と変わらないかぎり再レンダーされません。ただし、コンテクストを使っていると(`useContext`)、`props`は前と同じでも、コンテクストが更新されれば再レンダーされます。簡単なコード例で、その動きと対応方法を探ってみましょう。

# ふたつの子コンポーネントでコンテクストを使う
つぎのモジュール`src/App.tsx`がつくるコンテクスト(`createContext`)は、ふたつの状態変数(`name`と`theme`)を`value`として子のコンポーネントツリーに与えています。子コンポーネントは、`NameEditor`と`Greeting`のふたつです。あとに示すように、どちらも`memo`でラップしてあります。なお、[メモ化した子コンポーネントにプロパティとして渡す関数(`handleChange`)は、`useCallback`に包みましょう](https:

GaussianBlur のカーネルを調べる

OpenCVの `GaussianBlur()` で実際に適用されるカーネルの中身は、要素がすべて0で中心だけが1の画像に `cv.GaussianBlur()` を適用することで調べられます。

5×5のカーネルのときは次のようになります（Python版）。

“`Python
>>> import cv2
>>> import numpy as np

>>> img = np.zeros((5, 5))
>>> img[2, 2] = 1
>>> img
array([[0., 0., 0., 0., 0.],
[0., 0., 0., 0., 0.],
[0., 0., 1., 0., 0.],
[0., 0., 0., 0., 0.],
[0., 0., 0., 0., 0.]])

>>> filter = cv2.GaussianBlur(img, (5, 5), 0)
>>> filter
array([[0.015625, 0.03125 , 0.046875, 0.03125 , 0.015625],

Node.jsの対話環境

# Node.jsで対話環境を利用する

Node.jsにはJavaScriptのコードを対話的に実行ができる環境があります。

REPLは手軽にコードを実行できますので、簡単なテストやデバッグなどで使用可能です。

“`nodejs
node
“`

nodeコマンドを実行すると、「>」という表示がされます。
この状態でJavaScriptのコードを入力してエンターキーを押すとコードが実行されて戻り値が表示されます。

D3 v7 都道府県別人口の treemap

D3 で 都道府県罰人口の Treemap を描いてみます。

データは以下のサイトからCSVをダウンロードして使います。
[社会・人口統計体系 – e-Stat（政府統計の総合窓口）](https://www.e-stat.go.jp/regional-statistics/ssdsview/prefectures)

【関連記事】
[React 再入門 (React hook API) – Qiita](https://qiita.com/sand/items/7a6ef787d11c3ebabf08)
[D3 v7 入門 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/8b5ca42d1bf511e61ccd)
[D3 v7 応用 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/999715cebe52ade66c0b)
[D3 v7 グラフ – d3-scale、d3-axis、d3-shape – Qiita](https:

関数の引数を使ってオブジェクトの値を取得する

# はじめに

関数の引数を使ってオブジェクトの値を取得する方法を綴ります。

# 実装方法

### オブジェクトを用意する
“`javascript
const user = {
name: ‘太郎’,
age: 18,
}
“`

### 関数を用意する

“`javascript
const userValue = (key) => {
return user[key];
}
“`

これだけです。
**user.key**とすると**unedefined**になってしまうので注意が必要です🤣

[ReviewAI 使用例] 松屋 [新大久保 韓国料理店]

# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！
[人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc)

今回は、松屋 の食べログに集まっているレビューを分析します。

## 松屋

伝統韓国料理のお店だそうです。

> JR新大久保駅より　徒歩10分
> 東新宿駅から212m

[食べログ](https://tabelog.com/tokyo/A1304/A130404/13000028/)

## ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
– [食べログ](https://tabelog.com/)
– [じゃらん](https://www.jalan.net/)
のレビューを分析できます

JavaScript: 配列の雛型作成で高速化

配列を任意の値で初期化するには雛型から複製した方が高速です。しかし**複製自体を省略する事も可能**。objectを作る段階で既に初期化が完了しているという裏技を紹介します。[この記事でもちら～っとこっそり](https://qiita.com/mashuel/items/3358e8a075369b5f4255)触れている内容ですが、今回の記事はもう少し深掘りしていきます。
方法は極めて単純で、関数の`prototype`を配列化するだけです。
## benchmark
要素が数値限定の速度検証
“`js
{// TypedArray雛型の複製。遅い
let a=256, Narray=new Uint8Array(a), t=new Date;
for(;Narray[–a]=a;);//雛型の初期化
for(;a++<256;){ let A=[]; for(let i=0;i<1e4;)A[i++]=Narray.slice(); } console.log(new Date-t); } {// 配列もどき。高速 let a=256, Narray=fu

API Gateway でIAM認証を通してみた！Postman、AWS CDK

## きっかけ
とあるプロジェクトで使った別で作成された既存のAPIを実行するのにIAM認証が有効になっていたためIAMが必要だったのですが、これまでAPIキーでしか認証を通したことがなかったため実装するのに悪戦苦闘しました。
色々調べてうまく行ったのでここにまとめてみました。

## やりたいこと
1. CDKから作成しているラムダ関数から別で作成されたIAM認証を通してAPIを実行する
2. postmanからAPIの動作確認をしたいためpostmanでのIAM認証設定

## ラムダ関数の設定
### CDKでの権限設定
ラムダはこのように定義しました⇩
“`cdk/lib/lambda.ts
const lambda = new lambda.Function(
this,
`lambda-${props.envName}`,
{
runtime: Runtime.NODEJS_18_X,
handler: ‘index.handler’,
code: lambda.Code.fromAsset(‘lambda/’), // ラムダコ

HERE Maps API for JavaScriptでGeoJSONのポリゴンを表示させる / はじめましてHERE

この記事では[HERE Maps API for JavaScript](https://developer.here.com/develop/javascript-api)を使って地図にポリゴンを表示させてみようと思います。

私が所属しているマップマーケティングではエリアマーケティングで利用するポリゴンや統計データの作成を行っています。ポリゴンは行政界(都道府県～町丁目)やメッシュを扱うことが多いです。[TerraMap API](https://www.mapmarketing.co.jp/terramap-api?grid=qiita&utm_source=qiita.com&utm_medium=referral&utm_campaign=qiita_here_geojson_76207ebde9f2816c682f_01)というWeb APIでデータの配信も行っています。
これらのデータを使って地図アプリケーションを作成する際にポリゴンの表示がほぼほぼ必須になります。HERE Maps API for JavaScriptでGeoJSONの町丁目ポリゴンの表示方法を知りたい

React始めてみたいあなたへ。CodePenでかんたん世界時計！

## 冒頭
:::note warn
Aさん:「まずは公式Tutorial見ましょうね。」
Bさん:「動画学習しましょうね。」

あなた: 「はい！がんばります！」
:::
って飲み込むの疲れますよね。

今回は、「ちょっとReact気になってるよ。」という人向けの記事です。
簡単に試せる（遊べる）方法を紹介したいと思います。

題して、**「Reactで世界時計やってみよう ~ with CodePen」** です。
ハードルめちゃくちゃ低いです。

## 前提
– [CodePen]()のアカウント登録（もしかすると登録せずにできたかも。）
– 時差の概念を知っている

## サンプルコード
とりあえず動くものをお見せします。4カ国の世界時計です。
デジタルです。

【JS】ラベル

# ラベルの概要

「ラベル」はJavaScriptにおける「`goto`文」のようなものです。

## `break`

“`js
for() {
for() {
break;
}
//breakした後の処理
}
“`

この例は、ネストされた `for` の `break` は、上位の `for` を `break` できないことを示しています。

break とは

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/break

> break 文は現在のループや switch 文を終了し、プログラムの制御を終了した文の次の文に移します。ラベル付きの文の中で使用された場合は、ラベル付きの文を飛び越えるためにも使われます。

この時に使用するのが「ラベル」です。

“`js
loop: for() {
for() {
break loop;

React + TypeScript: memoでコンポーネントの再レンダーをpropsが変わらないかぎり省く

`memo`で包んだコンポーネントは、受け取る`props`が変わらないかぎり再レンダーされません。

本稿はReact公式サイト「[memo](https://react.dev/reference/react/memo)」にもとづき、`memo`はどう使うのか、およびどのような場合に使うとよいのかを解説します。説明内容と順序は、公式ドキュメントにしたがいました。ただし、解説はわかりやすく改め、またコード例とサンプル([StackBlitz](https://stackblitz.com/))はTypeScriptを加えたうえで修正した部分が少なくありません。

# 構文

“`react
const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
“`

コンポーネントを`memo`でラップすると、[メモ化](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96)されたコンポーネントが返されます。メモ化されたコンポーネントは、親コンポーネントのレンダリ

[JSX / JavaScript] 波括弧がないアロー関数に戸惑った話

### 概要
アロー関数について、恥ずかしながら今更気がついた仕様がありましたので、自戒の念を込めて記事化することにしました…

### 詳細
`JSX`を記載している時の話…

以下のコードを書いて保存すると、
“`jsx
{members.map((member, i) =>

{member}

)}
“`
↓ `Prettier` によって整形された
“`jsx
{members.map((member, i) => (

{member}

))}
“`

**「…ん？」**
アロー関数が改行されているのに `{}` ではなく、 `()`とされている？
てっきり以下のような記載になると思っていた…（これでも動きます）

“`jsx
{members.map((member, i) => {
return

{member}

;
})}
“`

この記法について調査してみました。

### わかったこと
アロー関数は`()`と`{}`で動きに違いあることが

【React】本日の日付をYYYY-MM-DD形式で表示する

new Date()
指定した時刻を表す日付オブジェクトを生成するメソッドです。

引数に日時、時間などを指定することができ、
何も指定されなかった場合は 現在のデバイスに設定されている時刻を取得します。

toLocaleString()メソッド
Dateオブジェクトを文字列に変換するメソッドです。

new Date()と組み合わせて、 new Date().toLocaleString() と書くことができます。

このようにして書くことで、現在時刻を取得し、文字列として表示することができます。

YYYY-MM-DD形式にフォーマットしたい場合

“`typescript:sample.tsx
const today = new Date();
const formatted = today
.toLocaleDateString(“ja-JP”, {
year: “numeric”,
month: “2-digit”,
day: “2-digit”,
})
.split(“/”)
.join(“-“);
“`

[ReviewAI 使用例] 新大久保 韓国料理店 まとめページ

# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
レビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます。
このページはそのまとめページです。

# 記事一覧

– [マッコリの物語](https://qiita.com/RetegyLink/items/e829c83c746fd5cee3ca)
– [松屋](https://qiita.com/RetegyLink/items/51406e5dcf750bb935f0)
– くるむ
– セマウル
– TEJI
– テジョンデ
– 名家
– ホンスチュクミ
– チョクミドサ
– ヤンピョン ヘジャンク
– コリア タッカンマリ
– でりかおんどる
– 味ちゃん
– オムニ食堂

# ReviewAI (レビューアイ)

弊社 RetegyLink が開発中のレビュー分析 AI です。
https://reviewai.next-seed.work/
試作版を公開中で、現在は
– [食べログ](https://tabelog.com/)
– [じゃらん](https://

[ReviewAI 使用例] マッコリの物語 [新大久保 韓国料理店]

# はじめに

レビュー分析AIサービスの ReviewAI (レビューアイ) を開発しています。
本記事ではレビュー分析の例として、新大久保の韓国料理の人気店を取り上げていきます！
[人気店の記事をまとめているページはこちらです。](https://qiita.com/RetegyLink/items/3d94852bf25a724a82cc)

今回は、マッコリの物語 の食べログに集まっているレビューを分析します。

## マッコリの物語

【新大久保駅5分】圧倒的高コスパ＆メニュー豊富な人気韓国料理店！

> 当店イチ押しメニューは超厚切り25mmの「厚切サムギョプサルセット」。名物「エビロールサムギョプサルセット」も肩を並べるほど人気です。ランチ限定「サムギョプサル食べ放題」や3品選べる「2,700円SET」も大好評！飲み放題も充実しています。店名の通りマッコリも豊富ですので、迷う方は4種類選べる「お試しマッコリカクテル」を♪専用iPadもご用意◎ご宴会、女子会、デートなど盛り上がること間違いなし♪

[食べログ](https://tabelog.com/tokyo/A1304

OpenAIをAPI利用するPHPとjavascript

# OpenAI Assistants

ChatGPTをはじめとするAIっておもしろいですよね。
MyGPTsも良いですが、エンジニアとしてはAPI利用したいケースの方が多いと思います。
APIからGPTsを利用するために、AssistantsでInstructionsを作りますが
いざAPIを使おうとするとthreadとかmessagesとかrunsとか・・・色々クセを理解しないと
API利用するのも一苦労です。

ってことで、簡単にAPIを利用できるように**ライブラリ化**しました。
しかも、バックエンドとフロントエンドがたった１つのファイルで使えるお手軽さ（！）
リポジトリを公開しましたので、即利用したい方は以下からどうぞ。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
　https://github.com/tri-comma/OpenAI_PHP_JS
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

## 解説

1つのファイルでPHPとjavascript？？:thinking:
はい、そうです。GETとPOSTでレスポンスを切り替え