JavaScript関連のことを調べてみた │ f@ctor

1. プリザンターの一覧画面で数値項目をスター記号で表示する
2. Leafletを使って地図に多角形を描き、人口データの属性を持つ町丁目ポリゴンを取得し、表示する
3. JavaScriptのArrayBufferとは？
4. サーバーフレームワークh3の8つの特徴
5. UnJSとは?
6. 【JavaScript】window.open()でnoopenerやnoreferrerを設定する方法
7. LogTape 0.7.0で導入される暗黙的コンテキストの紹介
8. Kotlinでアプリ内のhtmlファイルを表示してJavaScriptでカメラを利用する方法
9. GASからAWS APIを実行する
10. React入門ガイド：初心者のための完全解説
11. コールバック関数
12. `export` と `export default` の違い
13. Stripe Link入門: 迅速かつセキュアな決済手段を、数行のコードで実現する方法
14. Bitcoin トランザクションログシミュレーションのゲーム。
15. [JavaScript] データ型とリテラル
16. JavaScript: HTMLに生binary埋め込み(2)
17. Amplify Gen2* Amplify Gen2 * Vite リポジトリ公開
18. JISOU 課題1「学習記録アプリ」振り返り
19. 2024年版：エンジニアが今、学ぶべきJavaScriptフレームワーク完全比較
20. Python初心者必見！エラーをデバッグするための 5 つの基本テクニック

プリザンターの一覧画面で数値項目をスター記号で表示する

## 概要
プリザンターの一覧画面で数値項目をスター記号（星マーク）で表示するスクリプトです。アンケート結果やレビュー評価の数値を「★」で表現したいときにどうぞ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/0069d4d2-3b95-7854-b8fe-272f2cee8409.png)

## 適用手順
### 1. スクリプトの設定

テーブルの管理画面から以下の手順でスクリプトを設定します。

1. 対象テーブルの管理画面を開きます。
2. スクリプトタブより新規作成ボタンをクリックします。
3. タイトル欄に任意の名称を入力します。
4. スクリプト欄に以下の内容を貼り付けます。
5. 出力先の「全て」のチェックをオフにし、「一覧」のチェックのみをオンにします。
6. 画面下部の更新ボタンをクリックし、変更が反映されたことを確認します。

https://pleasanter.org/manual/table-management-scr

元記事を表示

Leafletを使って地図に多角形を描き、人口データの属性を持つ町丁目ポリゴンを取得し、表示する

## 概要説明
Leafletの描画ツールを使ってフリーハンドで多角形を描きサーバーと連携、多角形内の町丁目ポリゴンを取得・表示し、町丁目ポリゴンが持つ人口データを出力するようにします。

## 使用したもの

### Leaflet
比較的軽量なオープンソースのJavaScript地図ライブラリです。

https://leafletjs.com/

### 町丁目ポリゴン、令和2年国勢調査結果/人口総数
今回使用する町丁目ポリゴンおよび令和2年国勢調査結果/人口総数数データは、TerraMap API からレスポンスされたGeoJSON形式のデータです。

https://www.mapmarketing.co.jp/terramap-api?grid=qiita&utm_source=qiita.com&utm_medium=referral&utm_campaign=qiita_leaflet_freehand_polygon_f7e3f9df20e004d12f71_01

### その他
JavaScript
PHP

## 完成イメージ
全体の完成イメージは、以下の動画

元記事を表示

JavaScriptのArrayBufferとは？

JavaScriptにおける`ArrayBuffer`は、バイナリデータの格納と操作に特化したデータ構造で、主にWeb APIや低レベルなデータ処理のために使用されます。その特徴は以下のとおりです：

### 1. **固定長のメモリ領域**

– `ArrayBuffer`は一定のサイズのメモリ領域を確保します。サイズはバイト単位で指定され、一度生成するとサイズは変更できません。

### 2. **バイナリデータの格納**

– JavaScriptの通常の配列は、任意の型のデータを格納できますが、`ArrayBuffer`は純粋なバイナリデータ（ビットの列）を格納します。
– メモリ効率が高く、大量データを扱う際に便利です。

### 3. **複数のビュー（TypedArray）でデータにアクセス可能**

– `ArrayBuffer`自体にはデータアクセス機能はありません。そのため、`TypedArray`や`DataView`などを使用してバッファ内のデータにアクセスします。
– `Uint8Array`, `Int16Array`, `Float32Array`などの`

元記事を表示

サーバーフレームワークh3の8つの特徴

`h3`は、UnJSプロジェクトが開発する軽量なHTTPサーバーフレームワークで、特にサーバーレスアーキテクチャやエッジコンピューティングに適した設計がされています。以下に`h3`の主な特徴をまとめます。

### 1. 軽量かつ高速な設計

– **依存関係を最小限に抑えた設計**により、シンプルで軽量です。
– ハイパフォーマンスを目指し、サーバーレスやエッジコンピューティング環境での高速処理に最適化されています。
– 小規模なリソースで動作するため、低スペックの環境でもスムーズに動作します。

### 2. サーバーレスとエッジ環境に対応

– `h3`は、AWS Lambda、Vercel Edge Functions、Cloudflare Workersなどのサーバーレスおよびエッジ環境をターゲットとして設計されています。
– これにより、デプロイ先や利用環境に左右されず、柔軟なスケールアウトが可能です。
– `h3`はNuxt 3や他のサーバーレスAPIにも対応し、これらと組み合わせることで、スムーズにサーバーレスアプリケーションが構築できます。

### 3. TypeS

元記事を表示

UnJSとは?

UnJSは、サーバーサイドのJavaScript/TypeScript開発向けのツールやライブラリ群を提供するオープンソースプロジェクトで、特に**Nuxt.jsの開発者**が多く関わっています。以下、UnJSの特徴をいくつか紹介します。

### 1. 軽量で高速

UnJSのライブラリは、軽量であることを重視して設計されています。必要最小限の依存関係のみを使用し、ビルド速度やパフォーマンスに影響を与えないよう工夫されています。

### 2. モジュール志向で柔軟

UnJSの各ツールやライブラリは独立して利用可能であり、必要な機能を選んで取り入れることができます。そのため、Nuxt.jsやVue.js以外のプロジェクトにおいても柔軟に活用できます。

### 3. サーバーサイドとエッジコンピューティングに適した設計

UnJSのライブラリは、Node.jsだけでなく、エッジ環境（Cloudflare Workers、Vercel Edge Functionsなど）でも実行しやすい設計がされています。軽量なだけでなく、各プラットフォームの制限を考慮して最適化されています。

##

元記事を表示

【JavaScript】window.open()でnoopenerやnoreferrerを設定する方法

以下のように記述することで`window.open()`に`noopener`と`noreferrer`を設定できます。

“`js
window.open(“http://example.com”, “_blank”, “noreferrer”)
“`

`noreferrer`しか記述していませんが自動的に`noopener`も適用されます。

https://developer.mozilla.org/ja/docs/Web/API/Window/open#noreferrer

元記事を表示

LogTape 0.7.0で導入される暗黙的コンテキストの紹介

LogTape 0.7.0のリリースをお知らせできることを嬉しく思います。この新バージョンでは、アプリケーション全体のログに文脈情報を簡単に追加できる、暗黙的コンテキストという強力な新機能を導入しています。

## 暗黙的コンテキスト（implict contexts）とは？

例えば、アプリケーションでHTTPリクエストを処理しているとき、リクエストの処理中に生成されるすべてのログメッセージにリクエストIDを含めたいとします。コードベースのどこでログが生成されるかに関係なく、これを実現したい場合です。

暗黙的コンテキスト以前は、以下のような方法が必要でした：

1. すべての関数呼び出しでリクエストIDを引数として渡す
2. 各モジュールでコンテキスト付きの新しいロガーを作成する
3. またはグローバル変数を使用する（これには様々な問題があります）

暗黙的コンテキストを使用すると、リクエストハンドラの開始時点でコンテキストを設定するだけで、その実行コンテキスト内のすべてのログメッセージに自動的にその情報が含まれるようになります。以下が簡単な例です：

“`typescript

元記事を表示

Kotlinでアプリ内のhtmlファイルを表示してJavaScriptでカメラを利用する方法

Android StudioでKotlinを使って、アプリ内のhtmlファイルを表示して、さらにJavaScriptでカメラを利用するための作業メモです。

# Android Studioでプロジェクト作成
1　Android Studioを起動して、「New Project」を選択します。
2　「Empty Views Activity」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509199/8a649e7e-d076-bd94-7621-c862b113c379.png)
3　「Next」をクリックます。
4　「Name」にプロジェクト名を入力して「Finish」をクリックします。

# build.gradle.kts に androidx.webkit を追加
1　Gradleフォルダのbuild.gradle.ktsをダブルクリックしてコードを表示します。
![image.png](https://qiita-image-store.s3.ap-north

元記事を表示

GASからAWS APIを実行する

# はじめに
GAS（Google Apps Script）便利ですよね。
簡単に実行環境が整備出来て、その他のGoogleサービスとの相性も良いです。

またAWSの環境を導入している人も多いのではないでしょうか？
EC2やLambdaなど便利なサービスも多く、安定していて使い勝手が良いです。

今日はGASからAWSのAPI操作をするための下記のライブラリの使い方を紹介します。

[GitHub – smithy545/aws-apps-scripts: An interface to authenticate AWS api requests from within google scripts](https://github.com/smithy545/aws-apps-scripts)

# 使い方

## 前提
下記の条件が必要です。
– Googleアカウント持っていてGASが実行できる
– AWSアカウント持ってる
– AWSでアクセスキーの発行をしている

アクセスキーはIAMの画面から発行できるのでまだの人は事前に行ってください。
私はAWS CLI用に発行したもの

元記事を表示

React入門ガイド：初心者のための完全解説

## Reactとは？
Reactは、Facebookが開発・維持しているJavaScriptライブラリです。ユーザーインターフェース（UI）を構築するための、最も人気のあるフロントエンドライブラリの一つです。

### Reactの主な特徴
1. **コンポーネントベース**
– UIを小さな独立した部品（コンポーネント）に分割して開発
– 再利用性が高く、保守が容易
– コードの見通しが良くなる

2. **仮想DOM（Virtual DOM）**
– 実際のDOMの軽量なコピーを使用
– 効率的な差分更新により高いパフォーマンスを実現
– 開発者はDOMの直接操作を気にする必要がない

3. **単方向データフロー**
– データは親から子へ一方向に流れる
– 予測可能で分かりやすい状態管理
– デバッグが容易

## 他のフレームワークとの比較

### Vue.js との比較
– **Vue.js**
– より緩やかな学習曲線
– テンプレート構文が直感的
– 小〜中規模プロジェクトに最適

– **Rea

元記事を表示

コールバック関数

Javascriptのコールバック関数について勘違いしていたので、勉強し直したことをメモとして残します。

こんなところで引っかかってるやつもいるんだなと知ってもらえれば幸いです。
## コールバック関数とは
### 定義
>引数として他の関数に渡され、外側の関数の中で呼び出されて、何らかのルーチンやアクションを完了させる関数のこと
[Callback function (コールバック関数) | MDN Web Docs 用語集 ](https://developer.mozilla.org/ja/docs/Glossary/Callback_function)
### 簡単な例
“`javascript:例1
const fn1 = a => a + 1; // コールバック関数
const fn2 = (b) => b(1) * 2;
fn2(fn1) // 4
“`
例1では確かに`fn1`が外側の`fn2`内で呼び出されてから実行されているため、`fn1`はコールバック関数と言えます。（Chat GPTさんに確認したので間違いないはず！）
### 勘違い
ただ、コールバック

元記事を表示

`export` と `export default` の違い

# `export` と `export default` の違い

`export` キーワードは、**1 つ以上**の変数、関数、またはクラスをエクスポートするために使用されますが、`export default` キーワードは、**1 つ**の**デフォルト**の変数、関数、またはクラスをエクスポートするために使用されます。他のモジュールでは、`import` キーワードを使用して、これらのエクスポートされた変数、関数、またはクラスをインポートできます。

## 1. `export`

### 1. エクスポート方法

– `export` で公開されたメンバーは、必ず `{}` で囲む必要があります。この形式を **必要に応じたエクスポート** と呼びます。
– `export` では、複数のメンバーを公開できます。

“`javascript
// 直接エクスポート
export let str = `hello world!!!`;
export function fuc() {}

// 定義してからエクスポート
let str1 = ‘hello’;
let str

元記事を表示

Stripe Link入門: 迅速かつセキュアな決済手段を、数行のコードで実現する方法

この記事では、Stripeが提供するシンプルかつセキュアな決済手段 Link を決済フォームに導入し、テストする方法を紹介します。Linkによる支払いをサポートすることで、顧客はクレジットカード情報を入力することなく、支払いフローを完了させることができます。決済体験をスムーズにすることで、決済フォームでのカゴ落ちを防止でき、コンバージョン率（ CVR ）の向上や、それに伴う売り上げの増加が期待できます。

![image7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/0d2479c4-3473-7ad2-97c7-5446492bda29.png)

実装に必要なコードの量もとても少なく、テスト環境を使った決済体験のテストや、表示非表示の制御もとても簡単です。この記事とサンプルコードを元に、少ない手間で実現できる新しいCVR改善・売り上げ向上施策のアイディアをお試しください。

## Linkとは

Linkは、Stripeが提供する支払いサービスです。Linkにクレジットカード情報を

元記事を表示

Bitcoin トランザクションログシミュレーションのゲーム。

#### タイトル: 「仮想通貨ナイト」

東京、銀座のど真ん中。時刻は午前1時、街は人々が帰り始める静かな時間に入ろうとしていた。そんな中、一人のプログラマ、拓海は画面に張り付いてビルの一室で夜を過ごしていた。彼はBitcoinトランザクションのシミュレーションコードをデバッグしていた。

拓海はエンジニアチームのリーダーだが、決して目立つタイプではない。彼は静かにコードと向き合い、毎晩のように誰もいないオフィスで仮想通貨の動きやウォレットの挙動をシミュレートし続けている。「世の中が寝静まった時、仮想通貨はさらに活発になるんだ」と彼は自分に言い聞かせていた。

拓海は自分のプログラムが生成する「TxID（トランザクションID）」や「送信元」や「受信先」のウォレットアドレスをじっと見つめていた。画面上には、リアルタイムで生成される取引がログとして流れ続ける。ランダムに生成される「送信元」アドレスは、どれも実際のウォレットアドレスのようにリアルで、そこから受信先への「BTC（ビットコイン）」が次々と送金されていく。

![image.png](https://qiita-imag

元記事を表示

[JavaScript] データ型とリテラル

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# まとめ

# 目次
– [データ型](#データ型)
– [リテラル](#リテラル)

# データ型
> JavaScriptは動的型付け言語に分類される言語であるため、静的型付け言語のような**変数の型**はありません。しかし、文字列、数値、真偽値といった**値の型**は存在します。これらの**値の型**のことを**データ型**と呼びます。

[データ型とリテラル](https://jsprimer.net/basic/data-type/)

## プリミティブ型
> プリミティブ型（基本型）は、真偽値や数値などの基本的な値の型のことです。プリミティブ型の値は、一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性を持ちます。

[データ型とリテラル](https://jsprimer.net/basic/data-type/)

|型|例|
|–|–|
|真偽値

元記事を表示

JavaScript: HTMLに生binary埋め込み(2)

[過去の記事](https://qiita.com/mashuel/items/3cf307aaaeae089bc271)の続編、今回は余計な手間をかけずにHTMLに生のbinary dataを埋め込む方法を紹介します。
`