JavaScript関連のことを調べてみた2023年07月18日

Stripeで、料金と商品のデータをまとめて取得する方法

StripeのAPIを利用して、商品情報や料金情報をサイトに表示する場合、通常Product / Priceの２APIを利用します。

“`js
const stripe = new Stripe(env.STRIPE_SECRET_API_KEY, {
apiVersion: ‘2022-11-15’
});
const products = await stripe.products.list();
const productWithPrice = []
for await (const product of products.data) {
const prices = await stripe.prices.list({
product: product.id
})
productWithPrice.push({
…product,
prices
})
}
return productWithPrice;
“`

今回は別解として、Price APIだけを利用して取得する方法を紹介します。

## Stripe APIは、`expand`パラメタで

【周りに流されるな！?】人気なReactよりも初心者にVueがおすすめな理由 4選 ?

# 1. はじめに :writing_hand:
フロントエンドのJavaScriptフレームワークは，`React`, `Vue`, `Angular`, `jQuery`など様々ありますが, 今現在(2023/07/18)においては, `React`と`Vue`が人気を占めています．

しかし，Reactは学習コストが高く，フロントエンド初心者には挫折してしまう原因になりかねません(筆者も一度Reactで挫折しました:sob:)．そのため，この記事では**初心者になぜVueがおすすめかということを，Reactと比較しながら**述べていきたいと思います！:clap:

## 1-1. 比較する対象について
“`plaintext
==== React =====
React 17.0.1
==== Vue ====
Vue 3.3.4
“`
今回比較していくのは以下2つです
– Reactは人気が上昇した大きな要因である，**関数コンポーネント**
– Vueは 一番書きやすいとされる，**Options API**
– (Composition APIは賛否両論ある

npmライブラリを使うだけではなく、作れる側となるためのスタート

# 概要と対象読者
`npm install XXXXX`
Javascriptである程度開発を積まれた方々は、一度は目にしているコマンドでしょう。

これまでは利用するだけで、作る方法すら知らない身分でした。
すぐに何かライブラリを公開する、といった予定はないですが、最近色々実装する機会があり、いずれ公開するときがくる、、、ような気もしています。

**今回の記事では、作成から公開して使用してみるまでの流れ、これを理解するところから取り組んでみました。**

:::note
**以下のような方々に向けた記事です！**

– Javascriptの基本的な文法を理解している方
– 普段使っている`npm install XXX`の反対側（作る側）がどんなことをするのか気になる方
– npmのライブラリ公開に興味がある方
:::

## npmのアカウント登録

https://www.npmjs.com/

まずは、ライブラリを公開するためにnpmに自分の情報を登録するところから始めます。
ユーザ名・メールアドレス・パスワードを入力して
アカウントを作成してみました。（作成後の画面）

ニコ生ゲー作る時に詰まったことを集めてみた

# 初めに
先日初めてニコ生ゲームを制作し、公開することができました!
その名も **「ギャンブルクッキークリッカー」** というゲームです。
Twitchの**チャンネルポイント**と皆さんお馴染みの **「クッキークリッカー」** にインスパイアされたゲームです。
簡単に説明すると、
画面左上に表示される **クッキー** をクリックして
増やしたクッキーを使ってアイテムを購入して生産性を向上しつつ、ひたすら連打してクッキーを増やすという **「クッキークリッカー」** 要素に、
主が選択肢を提示し

MongoDB のデータベース作成からデータ挿入まで(Docker)

MongDBをdockerで触ったときのメモです。
初心者向けで、DB構築からデータ挿入をとりあえず出来るくらいです。

“`docker-compose.yaml
version: ‘3’
services:
mongo:
image: mongo
ports:
– 27017:27017
volumes:
– ./db/data:/data/db
– ./docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d:ro
environment:
MONGO_INITDB_ROOT_USERNAME: “root”
MONGO_INITDB_ROOT_PASSWORD: “password”
command: [“mongod”, “–bind_ip”,0.0.0.0]
container_name: “mongo”
“`

[MONGO_INITDB_ROOT_USERNAME]と[MONGO_INITDB_ROO

地図上で検索するコードをChatGPTとCodePenで書いてみた

# はじめに
初心者の方でも簡単に試すことができる、地図表示と位置情報検索のサンプルコードを紹介します。

HERE Maps APIを使用して地図上にマーカーやポイントを表示する簡単なデモを作成したいと考えていましたが、私は開発経験がなかったため、どのように学ぶのが良いか分かりませんでした。
そんな時に、今話題のChatGPTに相談してみたところ、必要なHTML、JavaScriptコードを生成してくれ、CodePenにコピペで動作確認を繰り返し行うことで、Webブラウザーだけで開発することができました。

HEREとCodePenアカウントがあればどなたでもお試しできますので、お気軽にご活用、フィードバックください。

# 事前に必要なもの
– CodePen　アカウント　https://codepen.io/　
ブラウザ上

ESモジュールとCommonJSと対応したTypeScriptパッケージの（たぶん）正しい作り方

先日、[JTC-utils](https://www.npmjs.com/package/jtc-utils) という CommonJS と ESM に対応したデュアルパッケージを公開したのですが、**とてつもなく**苦労したのでここにメモを残しておくことにします。

https://www.npmjs.com/package/jtc-utils

デュアルパッケージに対応するという記事はいくつかありますが、この記事は次の条件の時に役に立つと思います。

1. ソースコードは TypeScript で作りたい。
2. CommonJS と ESモジュールの両方に対応したい。
3. サブモジュール[^1]を作りたい。（←**ここ重要**）

[^1]: `import * from “main/sub”` 形式の階層型モジュール構成

## 何がそんなに難しいのか

TypeScript で作成したソースコードを CommonJS と ESモジュールにトランスパイルするため、ひとつのプロジェクト内に３つのソースコードが共存することになります。この時、次の条件が満たされる必要があります。

Todoアプリを作成してNest.jsのキャッチアップをしてみた

## はじめに

後述の記事を参考にNest.jsのキャッチアップを行いました。
ワンポイント追加として、DockerでDB（Postgres）を構築し、そこに接続するように設定してみました。
私が普段使っているバックエンドフレームワークはLaravelですが、そもそもの設計思想の違いなのかすんなりと理解が進まなかったので備忘録として記載します。

この記事の内容はほとんど下記２記事の内容をなぞったものです。
下記の記事に従って動かないとか、どんなふうに読んでいるんだろう的な時の参考になれば幸いです。

## リポジトリ

[https://github.com/ryosuke-horie/nest-todo-app/](https://github.com/ryosuke-horie/nest-todo-app/)

## 参考記事
以下の2記事を参考に進めています。

### Next.js
[NestJSを触りながら学ぶ(TodoAPI作成)](https://zenn.dev/kobayashiyabako/articles/nestjs-first)

### Docker

【Multiple Select】の multipleWidth をautoにする方法

jQueryのプラグインであるMultiple Selectの選択肢の幅をautoにする方法を書きます。
ただソースを書き換えるので、もしかするとあまり良くないのかもしれません。
使用したmultiple-selectはv1.6.0です。

単刀直入にいうと、multiple-selectのリポジトリでissueしてくれた方が、書いていた方法を使います。
https://github.com/wenzhixin/multiple-select/issues/576

書いてある通りですが、僕の場合はCDN先のソースをローカルに取ってきて、下のように書き換えて、
“`javascript:multiple_select.js
– this.$drop.find(‘.multiple’).css(‘width’, “”.concat(this.options.multipleWidth, “px”));
+ this.$drop.find(‘.multiple’).css(‘width’, this.options.multipleWidth);
“`

使用する際に、下のオプションを

Docker開発環境構築 – React(TypeScript)

# 概要
最近React(Typescript)で環境構築する機会があり、ReactをDocker化する上で工夫したところをまとめました。

# 環境
“`terminal
$ node -v
v18.16.1
$ npm -v
9.5.1
$ docker -v
Docker version 24.0.2, build cb74dfc
“`

# 事前準備
1. [Docker](https://www.docker.com/products/docker-desktop/)をダウンロードして起動までしておきます。
2. [React](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app)のアプリケーションを作成しておきます。

# フォルダ構成

create-react-appでの自動生成物の中から不必要なフォルダやファイルを削除した構成になります。

“`terminal
$ tree -I “node_modules”
“`
“`
.
├── node_modul

【General】Cont. Example of building a solution using YouTube API

# Introduction #
This is a sequel to the previous article [Example of building a solution using YouTube API](https://qiita.com/Miki_Yokohata/items/e9f1cc9a9f39045055ba).
In the previous article, we were able to obtain such a dataset. We will use these data in this article.
Let’s create our original menu.
## Publisher ##
**Publisher** is a Sharperlight application that can be used to create web-based menus.
Start it from the application menu.
![image.png](https://qiita-image-store.s3.ap-northeast

メソッドの追加 javascript オブジェクトと関数とコンストラクター関数とインスタンスとprototype

こんにちは！

JavaScript初学者として、ほんの段差2cm、いや、5mm程度位で混乱して躓いた感じですが、
これは今後自分の学習においても、後学におかれましても、確定的な情報として有益だと感じましたので、首題「**メソッドの追加**」について、纏めさせていただきます！

### 実行してみましょう
jsFiddle（https://jsfiddle.net/ ）
JS Bin（https://jsbin.com/?html,js,output ）

### メソッド追加　関数とオブジェクト

次のようにすると上手く行きます。

“`javascript
/* 関数オブジェクトfn生成 */
function fn() {
console.log(“fn is called”);
}

// プロパティ追加
fn.prop = 0;
/* ★メソッドの追加★ */
fn.method = function () {
console.log(“method is called”);
}

// 関数オブジェクト各種出力
fn();
console.log(fn.prop)

【General】Example of building a solution using YouTube API

# Introduction #
I’ve posted several articles on using the YouTube API in the past, and this article is related to that as well.
This time, I’m going to save my YouTube channel information in a local database and use it to create a report.
I would like to get and save Playlist information and Video information belonging to each Playlist from a YouTube channel.
I checked what kind of information can be obtained in advance and prepared the following database.
You can see a table for Playlist and a

React勉強メモ１

Reactの紹介

Reactは、Facebookが開発したユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。Reactは、コンポーネントベースのアーキテクチャを採用しており、再利用可能なUI部品を作成し、それらを組み合わせてアプリケーションのビューを構築することができます。

Reactの特徴として以下のような点が挙げられます:

仮想DOM（Virtual DOM）: Reactは、仮想DOMと呼ばれる仕組みを使用して、効率的なUIのレンダリングを実現しています。仮想DOMは、変更があった部分のみを実際のDOMに反映することで、パフォーマンスを向上させます。

コンポーネントベース: Reactでは、UIを小さな再利用可能なコンポーネントに分割することができます。これにより、コードの再利用性が高まり、保守性や開発効率が向上します。

単方向データフロー: Reactでは、データの流れが一方向であるというアーキテクチャを採用しています。これにより、データの変更が予測可能で、バグの発生を減らすことができます。

Reactの運用範囲

Reactは、ウ

JavaScript で 2 元 BCH 符号: 符号化と総当たりによる誤り訂正

本記事で説明する内容:

– 「2 元原始狭義 BCH 符号」の例
– 符号化
– 総当たりによる誤り訂正

本記事で説明しない内容:

– 一般の BCH 符号
– その他の方法による誤り訂正

2 元 BCH 符号自体の説明は別記事にしました。

参考「[2 元 BCH 符号 入門: 符号化 – Qiita](https://qiita.com/kerupani129/items/538824ded8fcaa09d641)」

# 1. 有限体上の計算の準備

## 1.1. 指数表および対数表を作成する
有限体上の掛け算や割り算を効率良くするために、$\alpha^i$ の値を対応させる指数表および対数表を作成します。

ここでは、原始多項式を $x^4 + x + 1$ とする有限体 $GF(2^4)$ を使用することにします。

“`js
const GF_LOG_NEGATIVE_INFINITY = 15;

// 指数表を作成
const generateExponents = () => {

const exponents = new Uint8Array(16

Javascriptのメソッドをおさらい

Svelte.jsのチュートリアルをやっていて、
メソッドいっぱい出てくるけど覚えてないやついっぱいあったので再確認。

# 配列メソッド：

push(): 配列の末尾に新しい要素を追加します。
pop(): 配列の末尾の要素を削除し、その要素を返します。
shift(): 配列の最初の要素を削除し、その要素を返します。
unshift(): 配列の最初に新しい要素を追加します。
slice(): 配列の一部を新しい配列として返します。
splice(): 配列から要素を削除または追加します。
map(): 配列の全ての要素に関数を適用し、その結果を新しい配列として返します。
filter(): 配列の全ての要素をテストし、テストをパスした要素から新しい配列を生成します。
reduce(): 配列の全ての要素に関数を適用し、単一の出力値を生成します。

# 文字列メソッド：

split(): 文字列を特定の文字で分割し、その結果を配列として返します。
join(): 配列の全ての要素を連結して新しい文字列を生成します。
slice(): 文字列の一部を新しい文字列として返します。

複数の連続するモーダルウィンドを素のjavascriptで実装する

モーダルウィンド(ポップアップ)の実装のやり方はネットでたくさん出てきますが、
例えば、複数のアイテムがあって、そのアイテムのトリガーとなる部分を押すと
それに対応したモーダルを表示させるようなやり方が見つからず苦労したのでメモします。

↓こんなイメージです。↓

ちなみに、今からやろうとしていることはbootstrapを使えば簡単に実装できるのですが、bootstrapのデザインをそのまま使うのが嫌でオリジナルなデザインにしようとしたものの、
cssのカスタマイズが面倒で、それならいっそ自分で実装すればいいやと考えた経緯があります。

あくまでやり方の紹介なので、cssのデザインは最低限の簡素なものです。
また、htmlファイルにcssもjavascriptも全

JSの用語について

# 変数の宣言
JavaScriptでは変数の宣言はvar,let,constで行う
ただし、varについては以下の理由で使用が控えられている
###### 1.再宣言が可能
一度宣言した変数と同じ変数名で再度宣言することが許容されている
以下のコードではコンソールには0,1と表示される
“`diff_javascript
var a = 0;
console.log(a);
var a = 1;
console.log(a);
“`
###### 2.参照が巻き上げられる
変数を宣言する前に代入することが許容されている
以下のコードではコンソールには0と表示される
“`diff_javascript
a = 0;
console.log(a);
var a;
“`
##### 3.スコープ単位が関数である
関数やifのような制御構文のブロックをすり抜けて変数の参照をすることが許容されている

# コールスタック
実行中のコンテキストの積み重ねのこと
「LIFO」の形で消滅していく

# ホイスティング
コンテキスト内で宣言した変数、関数をコード実行前にメモリに配置すること
関

[Javascript/Web]iOSでSVG画像がぼやける不具合の対策

# はじめに
こんにちは。また久しぶりの投稿ですね。
WebアプリでSVG画像を出すのは、よくあることですね。しかし、SVG画像にシャドーをかけると、iOSのブラウザで開てみたら、画像がぼやけます。
これは困ります。
おそらくiOSのバグですが、いつ直すかわからない以上、直すまで待つのもいけないです。
代わりにPNG画像を出すのは解決できるが、ズームインしてもぼやけないために、大きいPNGを置かないといかないので、画像のサイズが増えます。
では、SVGを使う前提で、ぼやけるを防ぐ方法があるのでしょうか？ここで一つの解決策を紹介させていただきます。

# 問題点
上記通り、シャドーをかけているSVGをそのままwebに出すと、iOS上でぼやけます。
SVGは下記のようです。
“`xml

スマートフォンと地図は相性が良いです。スマホは持ち歩いて使うのが基本ですし、位置情報などの情報も取得できます。

今回はNCMBとMonacaを使って地図上にメモできる地図メモアプリを作ります。地図はOpenStreetMapのものを利用し、タップした場所にメモと写真を残しておけるアプリです。

[前回は地図表示とデータの登録を実装](https://qiita.com/goofmint/items/038f186f99bdab1aa088)しましたので、今回は地図上へのマーカー表示と一覧表示処理を実装していきます。

## コードについて

今回のコードは[map-note-monaca](https://github.com/NCMBMania/map-note-monaca) にアップロードしてあります。実装時の参考にしてください。

## 地図上へのマーカー表示

この処理は `www/map.html` にて実装します。地図が表示された際に、NCMBからメモ一覧を取得します。

“`js
// ページが表示された後にノートをロードし、マーカーを追加します。
$on(‘pag