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

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)
– 松屋
– くるむ
– セマウル
– TEJI
– テジョンデ
– 名家
– ホンスチュクミ
– チョクミドサ
– ヤンピョン ヘジャンク
– コリア タッカンマリ
– でりかおんどる
– 味ちゃん
– オムニ食堂

# ReviewAI (レビューアイ)

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

[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でレスポンスを切り替え

実践編 Storybookでのテスト [5日間でReactの基礎を習得したい 5/5日目]

# はじめに

5日間でReactの基礎を習得する試みの5日目です。最終日は、[4日目](https://qiita.com/MichaelHashimoto/items/8c4ce6e8df40db9488df)に作成したNavLinkコンポーネントのテストをStorybookでやってみます。

https://qiita.com/MichaelHashimoto/items/f3ad9f56081a40b9b788

# Storybook

## Storybookのインストール

前回作成したプロジェクトディレクトリで以下のコマンドを実行すると、StoryBookがインストールされ、起動します。
“`
npx storybook@latest init
“`

私の場合は、依存関係の問題でうまく行かなかったため、次のようにしました。
“`
npm install –save react-rough-notation@1.0.5 // 依存関係のエラーを解決するため、react-rough-notationをバージョンアップした。
npx storybook@lates

Javascript ジェネレータにnext()で値を渡した際の挙動メモ

ジェネレータ周りの実装を見ていた時に、`next()`で値を渡した際の挙動がわかりにくかったので、自分用にメモを残します

# ジェネレータとは
定義については、Mozillaのドキュメントを見ていただければと思いますが、ジェネレータとは、
「ジェネレータ関数によって返されたもので、`Array`オブジェクトのようにイテラブルで、またイテレータでもある」
ものとなります。

今回はジェネレータに引数を渡す方法であるGaneratorオブジェクトのインスタンスメソッド`next()`の引数を指定した場合の挙動を把握するためのコード例とその挙動を載せます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Generator/next#value

# 結論： `yield`のところに値が入る。初回の呼び出しでは値が渡せない
ジェネレータは`yield`のところで停止し、`next()`メソッドで次の`yield`のところまで進みます。
`next()`で渡した値は、`yield`の

HTMLページにログイン機能（Cognito）を実装する・こんにちは⚫︎⚫︎さんする

## はじめに
とりあえず動かしてみたい方々向けです。

公式のドキュメントをやってみた感じのものになっています。

https://www.npmjs.com/package/amazon-cognito-identity-js

## 前提
Cognitoでユーザープールとアプリケーションクライアントを既に作成している事を前提にしています。

ユーザー自身でユーザー登録が出来るように「セルフサービスのサインアップ」は有効にしておいて下さい。

## 成果物
順に操作した上でページ遷移すると、ログインユーザー名が表示されます。


↓

![img_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349281/4148c8bf-e9f1-7783-8ad9

月相・休日付きカレンダー

「[Date に休日情報を追加した派生クラスを作ってカレンダーを表示する](https://qiita.com/ikiuo/items/4ab99731ecac076f3608)」に「[月の満ち欠けの簡易表示](https://qiita.com/ikiuo/items/88037ba8e0238c6a0ff2)」と月相を求める処理を追加して、背景に目安となる月相を表示してみる。

月相の計算 (JavaScript)

“`javascript:
/*
* 月相の計算
*
* 計算方法は下記のものを使用しています
* 書籍：天体の位置計算(増補版) [長沢 工 著]
* 【7-2表】月の位置の略算式（海上保安庁水路部による）
* 【7-3表】太陽の位置の略算式（海上保安庁水路部による）
*/
class MoonPhaseRC {
static Tbase = Date.UTC(1975, 1-1, 0);

/*
* コンストラクタ
* 引数は日時(Date コン

JavaScript: let, const, classに関して用途以外の豆知識

まず有効な記述法について。scopeが異なるので以下の例では2重定義とはなりません。
“`js
//global scope
let a=-~-~0-~-~0;
const b=1e+999;
//block scope
{
let a=new class{};
const b=class{};
class c{}
}
“`
などといった芸風はよく見掛けますね。しかし以下のような記述をすると不思議な事が起こります。
“`js
eval(“let a=0;const b=1;class c{}”);
console.log(typeof a, typeof b, typeof c)
“`
evalの中には`{}`が無いので`a`、`b`、`c`はglobal領域に存在しているかのような印象を受けますが、実際には**eval実行部分でしか参照できません**。よってconsole.logではundefinedが出力されます。
以下の記述は`{}`を省略できる状況で`var`と`let`による変数宣言や`class`定義を試みています。しかしなんと`var`以外は文法違反です(当

【HTML】要素を追加・移動する 4メソッド【JS】

# はじめに

HTMLに要素を追加・移動をするには
– `prepend()`
– `append()`
– `before()`
– `after()`

の4つのメソッドを使用します。

# 4メソッドの違い

– `prepend()`：子要素として先頭に挿入
– `append()`：子要素として末尾に挿入

– `before()`：同じ階層の要素として上に挿入
– `after()`：同じ階層の要素として下に挿入

正確な説明ではないですが、イメージを掴むには十分かと思います。
## 要素の追加

CodePenの使い方

| |
|:–:|
||
|【使い方】Resultをクリック|
|![スクリーンショット 2024-05-0

レビュー分析AI (ReviewAI) に新機能：観点の詳細を確認する機能を実装しました。

# はじめに
みなさま、GWは楽しんでますか？
旅行や観光、ついでに温泉に入った人も多いのではないでしょうか？
このGWで弊社リテジーリンクでは、レビュー分析AIサービス・ReviewAI (レビューアイ) に
観点の詳細を確認する機能を実装しましたので、ご紹介します。

今回はGWということで、草津温泉のつつじ亭についての
食べログのレビューを分析させていただきます。

## つつじ亭

つつじ亭は、草津温泉の料亭旅館です。
[食べログ](https://tabelog.com/gunma/A1004/A100402/10007823/)

## ReviewAI (レビューアイ)

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

# レビュー分析

こちらが分析結果です。
全てのレビューを分析し、観点ごとに強みと改善点

face-api.js の「Face Expression Recognition（表情認識）」の公式デモ・利用可能なモデルの情報などを見てみた：ml5.js の FaceApi では使えない仕組みの部分

前回、以下の記事を書いた際に扱った「face-api.js」の話です。

●ml5.js の FaceApi（face-api.js の一部の機能を使える API）で扱える仕組み・モデルに関するメモ – Qiita
　https://qiita.com/youtoy/items/932c1868b032e3a4dfa8

その中でも、ml5.js の FaceApi では扱えない仕組みとなっていた「Face Expression Recognition（表情認識）」の情報を見ていこうと思います。

## サクッと試す
もし、face-api.js の「表情認識」の動作確認をしたいというだけなら、公式のデモにアクセスするのが一番簡単です。

### 公式デモにアクセスする
デモを試す場合、まずは[公式のリポジトリ](https://github.com/justadudewhohacks/face-api.js/tree/master)の中にある項目「[Click me for Live Demos!](https://justadudewhohacks.github.io/face-a

JSで”name”という変数を宣言すると「’name’ is deprecated.」と出る件を調査！

# はじめに
Udemyの”【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門”の講座内にて、nameという変数を宣言したところ下記のWarningが出たので調べてみました！

# 内容

記入したコード
“`
const name = “art”;
function log_name(name){
console.log(name);
}

log_name(name);
“`

発生したWarning
“`
‘name’ is deprecated.
“`

# 原因
変数nameがグローバルコンテキストの”window”オブジェクトにてすでに存在しているため、衝突を避けるためにWarningを出している（by ChatGPT）
解決策としては「変数名をnameから変更する」のが一番効果的。
どうしてもnameを使用したい場合は、グローバルスコープではなく関数やブロックスコープなどの閉ざされた環境だけであれば問題ない、とのこと！
さすがGPT先生！

# 実験
実際にwindow.nameの値を出力してみて値が更新されているのか

TypeScriptのジェネリクスってなんだ？

## はじめに
4月からTypeScriptを初めて使いだしてから一ヶ月ほど経ちますが、いまだに以下のようなコードに馴染めないでいます。

“`typescript
function reverseArray(arr: T[]): T[] {
return arr.reverse();
}

const numbers = [1, 2, 3];
const reversedNumbers = reverseArray(numbers);
console.log(reversedNumbers);
“`
これは「ジェネリクス」と呼ばれる書き方を使っています。

本記事はジェネリクスについての基礎から丁寧に確認する記事となります。

## ジェネリクスとは
### ジェネリクスの概要
ジェネリクスは再利用できるコンポーネントを作るための機能です。
特定の型ではなく、様々な型で動作するコンポーネントを作成します。
TypeScript独自の機能ではなく、C#やJavaなど他の言語にもジェネリクスは存在します。
ジェネリクスは関数のほか、クラス、インターフェース、