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

JavaScriptで関数のオーバーロードを宣言する【TypeScript5.0新機能】

TypeScriptによる型のある世界は生のJavaScriptでも体験できます。[JSDoc](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html)を使えば良いのです。JSDocを使えば型が付与された、しかし正真正銘のJavaScriptコードが書けます。JSDocはJavaScript実行環境にとってはただのコメントなので当然ブラウザでそのまま動きます。`tsc`による変換の儀式は不要で、型チェックだけを行うことになります。

その型チェックもVSCodeを使っていればTypeScriptをインストールしなくても勝手にやってくれるので、小さなプロジェクトならこれで十分だと思います。VSCodeを使っている前提にはなりますが、その場合なんのセットアップや変換もなく型のあるJavaScriptを扱えます。

JSDocによる型付けは割と強力で一般的な場面ではほとんど不自由しません。しかし比較的よく使う型宣言なのに今まで唯一できないことがありました。それが関数のオーバーロードの宣言です。

そのJ

React Hooks

関数コンポーネントで色々できるようになるReact Hooksです。
Reactいじったことある人前提で書いていきます。

## useState
コンポーネント内での状態管理を実装できます。

コードで再現すると
“`jsx
const { useState } = require(“react”)

function UseStateSample() {
const [count, setCount] = useState(0)

return(

set count: {count}

setCount(count – 1)}>- setCount(count + 1)}>+

)
}

export default UseStateSample
“`

これの結果が
![qiita1.gif](https://

【Express】express-generatorで作成した雛形でHTTPSサーバーを起動する【Node.js】

## 概要
やることとしては、いつもの雛形に
①証明書配置用のディレクトリを作成して秘密鍵と証明書を配置
②bin/wwwを修正してhttpsサーバーを作成
の2点のみ。

## 環境
– Node,js：18.12.0
– npm：9.2.0
– Express：4.18.2
– EJS：3.1.8（別に必要ない）

## 雛形を作成
いつものやつ（テンプレートエンジンはejs）。
“`
$ npx express-generator –view=ejs <アプリ名>
$ cd <アプリ名>
$ npm install
“`
## SSL証明書を配置
証明書配置用のディレクトリを作成し、
“`
$ mkdir .ssl
“`
秘密鍵と証明書を配置。
※証明書の作成方法は割愛
“`
$ ls .ssl
server.crt server.key
“`
## bin/wwwの修正
fsとhttpsのモジュールを追加して、HTTPSサーバーを作成するように修正する。
express-generatorがvarで書いてるから、なんとなくvarで書く。
“`javascrip

備忘録 reduceを使って値を加工する

# 紹介する経緯
reduceの使い方を見ていると、配列の要素を全て足す処理など集計系の記事が多かったので、今回は実用的なreduceの使い方を紹介します。
(備忘録的な意味も含めて)

# reduceの簡単な説明

ここでは説明を省きますが、操作したい配列が空配列(要素数が0)の場合エラーが出ますので、第2引数の初期値は設定しておいた方が良いです。

+ **accumulator(前回の値)**
初期値はinitialValueで設定できます。
設定しない場合はarray[0]番目が初期値になる。

+ **currentValue(現在の値)**
配列内で現在処理されている要素。

+ **currentIndex**
配列内で現在処理されている要素のindex番号。

+ **array**
現在操作されている配列

+ **initialValue**
第2引数で初期値を設定できる。

“`javascript:sample.js
array.reduce((accumulator, currentValue, currentIndex, array)

ChatGPTでNCMBのJavaScript SDKを使ったTodoアプリを作る

ChatGPTは自然言語による質問に対して、それっぽい答えを返してくれるAIです。自然言語同士の質問と回答の場合、合っていないことも多々あるのですが、ことプログラミングコードについては割と精度が高いように思います。

今回はこのChatGPTを使って、NCMBのデモアプリを作ってみました。コーディングは一切行っていません。

## 1回目

1回目のメッセージは以下の通りです。

“`
NCMBのJavaScript SDKを使ってTodoアプリを作るサンプルコードを書いてください
“`

できあがったコードは以下の通りです。requireを使っているので、Node.jsなどで動くものになるようです。

“`jsx
// Import the SDK
var NCMB = require(“ncmb”);

// Initialize the SDK with your application key and client key
var ncmb = new NCMB(“YOUR_APPLICATION_KEY”, “YOUR_CLIENT_KEY”);

// Define

json-server tips

# json-serverとは何？
expressベースのAPIモックサーバーです。
通常のAPIモックサーバーとしてJSONを定義するだけで簡単に使えます。
また、DBを内蔵しており、POSTなどの更新にも対応しているようです（未使用）
追記：直接、db.jsonを書き換えるようです。

例えば以下のようなJSONファイルを用意するだけでモックサーバーが簡単に作れます。
“`json:db.json
{
“posts”: [
{ “id”: 1, “title”: “json-server”, “author”: “typicode” }
],
“comments”: [
{ “id”: 1, “body”: “some comment”, “postId”: 1 }
],
“profile”: { “name”: “typicode” }
}
“`

CLIで以下のコマンドを叩くことでモックサーバーが起動します。

“`bash
$ json-server –watch db.json
“`

但し、後述しますが、CLIにはバグがあるた

detailsタグでなんでもアコーディオンにしていいのか考える

# はじめに

最近、アコーディオンUIと言えば、`details` `summary`を使った実装がアクセシビリティもバッチリで良いと聞きます。

しかしながら、全ての状況においてこの実装が適しているのかというとそうとも言えないんじゃないか、とふと思いました。

MDNの例や、このタグを紹介されているページなどを見ると、Q&Aや、何かのリストをアコーディオンに格納するために使っているものが多く、実際そのような使い方には特に抵抗感はありません。

しかし、「ページが長くなるから」などのデザイン的意図を含んだ理由で、`section`で囲われるような大きなコンテンツをまるっとアコーディオンの中に格納する場合などは、details（詳細）とsummary（概要）という英語から想像するに、適していないんじゃないか？と感じてしまいます。

“`html:こういうやつは合法なの？

許されざる呪文

死の呪い、磔の呪い、服従の呪文を指す言葉です。
これらの呪いは1717年に使用が禁止され、服従の呪文の支配下だった場合を除

kintone向けのblastengineを使ったメール送信プラグインを開発する

kintoneはサイボウズ社の提供するノーコードサービスです。業務アプリとして使われている方も多いのではないでしょうか。

そんなkintoneでは外部から操作できるAPIに加えて、アプリと連携して動作するプラグインが開発できます。今回はblastengineでメール送信を行うプラグインを開発してみました。

## 完成品

完成版のコードは [kintone-plugin](https://github.com/BlastengineMania/kintone-plugin) にアップしてあります。実装時の参考にしてください。

## ベースの作成

プラグインのベースは `create-kintone-plugin` というコマンドで作成できます。対話型でプラグインのベースになるコードを生成してくれます。

“`
% npx create-kintone-plugin blastengine

kintoneプラグインのプロジェクトを作成するために、いくつかの質問に答えてください 🙂
では、はじめましょう！

? プラグインの英語名を入力してください [1-64文

Astroを使って構築したサイトに、Stripeの決済やサブスクリプション申し込みフローを追加する方法

静的なウェブサイトを構築する方法の１つとして、Astroへの注目が高まっています。

[](https://astro.build/)
[https://astro.build/](https://astro.build/)

今回は、このAstroを使ったサイトにて、Stripeを利用した決済フォームを組み込む方法を紹介します。

## 3つの組み込み方

Astroで構築したサイトにStripeの決済フォームを組み込むには、3つの方法があります。

– 1: リンクまたは埋め込みコードで実装する
– 2: リダイレクト型の決済セッションを作成する
– 3: 埋め込み型の決済フォームを実装する

１がもっとも簡単に組み込みができる反面、デザインのカスタマイズ性などは３に軍配があがります。

そ

Day.jsで日付データから指定したフォーマットの文字列を取得する

今まで日付取得のモジュールを使用せずに長ったらしく書いていたため、
短縮するためのモジュール紹介兼、自分用の備忘録として記載します。

これまでコンソールログなりWebページ上での表示なり、日時を取得する際に記載したコードは以下の通り。

“`javascript:before.js
const today = new Date();
const week = [“日”, “月”, “火”, “水”, “木”, “金”, “土”];
const year = today.getFullYear();
const month = today.getMonth() + 1; // 1月~12月 -> 0~11
const date = today.getDate();
const day = today.getDay();
const hour = today.getHours();
const minute = today.getMinutes();
if (hour < 10) hour = "0" + hour if (minute < 10) minute

GWTのファイル構造

GWTでは、プロジェクトをそのまま生成すると次のようになります。

パッケージ事に、役割が明確に分かれているので、
わりとすぐ理解できます。


LEGOシティのトレインを複数操作できるページを作成

LEGOシティのトレイン(https://www.lego.com/ja-jp/themes/city/train)
のリモコンやアプリでは一つの電車しか操作できないので、
電車を複数台動かそうとすると都度リモコンやスマホを用意する必要があります。

少し調べた限りだとサードパーティでも複数台動かせるアプリなどが見つからなかったので（ご存知でしたら教えて下さい）
作ってみました。

当初スマホアプリで作成しようとしたものの、
[Web Bluetooth API](https://developer.mozilla.org/ja/docs/Web/API/Bluetooth)というブラウザでbluetooth接続するライブラリがあることを知ったので、
インストール不要のブラウザで操作できるものにしました。

完成品は[こちら](https://kametter.github.io/lego_train_bluetooth/)です。

# 内容

対応ブラウザであれば`navigator.bluetooth`クラスが用意されているので、それを使用。

実装自体は[JavaScriptを介

複数の半角スペースが1つにトリムされてしまう

# 複数の半角スペースが1つにトリムされてしまう

“`入力値.
あい うえお
“`

“`表示.
あい うえお
“`

HTMLのルール上、複数の半角スペースは1つにトリムされてしまいます

上記の例では、5つの半角スペースを入力したにも関わらず、表示上は1つに。

実際に入力したスペースの分表示されるようにしたいと思います

# 解決策1：white-spaceでcssをあてる

@juner さんの[ご指摘](https://qiita.com/baby-0105/items/a31d1c989753c9212106#comment-e9fe0482eff4f967fc66)より `解決策1` 追記

`white-space: pre-wrap;`

> 連続するホワイトスペースはそのまま残されます。行の折り返しは、改行文字や
要素のあるときか、行ボックスを埋めるのに必要なときに行います。

jsでゴニョゴニョする必要は無く、割と簡単に正しく表示できました

“`入力値.
あい うえお
“`

“`表示.
あい うえお
“`

CSS-Tricks の記事で見かけた「マウスカーソルの軌跡上でパーティクルを発生させる処理」を p5.js で置きかえる（一部は簡略化）

この記事の内容は、[CSS-Tricks の記事（「Simulating Mouse Movement」というタイトルのもの）](https://css-tricks.com/simulating-mouse-movement/)で見かけた、「マウスカーソルの軌跡上でパーティクルを発生させる処理」を、p5.js の処理で置きかえた時の話です。

自分が実装した内容を動作させた時の様子は、以下のとおりです。

CSS-Tricks の記事で見かけた内容を、 #p5js で実装しなおしてみた話、それを Qiita の記事に書いてみた！

●CSS-Tricks の記事で見かけた「マウスカーソルの軌跡上でパーティクルを発生させる処理」を p5.js で置きかえる（一部は簡略化） – Qiita
　https://t.co/GGaoWKXp3m pic.twitter.com/S3BrzdOkXC

— you (@youtoy) February 7, 2023

## 元の処理の内容
今回の参照元で用いた、「マウスカーソルの軌跡上でパーティクルを発生させる処理」は、以下の部分に掲載されたものです。

そこで実装されていた JavaScript のプログラムは以下のとおりです。

コンポーネントをVSCode上でプレビューできるvue-component-previewが最強だった件

# Abstract

本記事では、Vue.jsにおいてコンポーネントをプレビューしながらコードを書ける、vue-component-previewを紹介します。(図: プレビューしている様子)
こちらのプラグインは、本記事をサクッと読んでいただくとわかる通り、かなり”良い”です。
しかしながら、紹介/解説記事がQiitaには恐らくありませんでした。
一方でZennには最後に示した参考記事が一つありましたが、最も基本の機能しか紹介していません。
そこで本記事では、**基本機能から始まって公式の紹介でも紹介していない機能までを紹介していきます**。

:::note warn
VSCodeのお話です。
Vue.jsではscript setup記法 / TypeScriptを採用しています。
環境のセットアップ自体の詳しい解説は行いません。
:::

【自然言語処理】テキストデータにラベル付けするサイトを作った

:::note
このサイトのお話をしています。
https://konbraphat51.github.io/Text-Labeling/
:::

## この記事は
極性分析や文書分類などで、テキストデータをラベリングしたいタイミング、ありますよね。

そこで、冒頭の手軽のラベリングできるサイトを作りました。

## 実装
### 全体コード
全体コードはこの通りです。
“`html





プリザンターでフィルタ条件/ソート条件付の一覧を表示するURLの作り方

# はじめに
[プリザンター](https://pleasanter.org)の一覧画面で、フィルタ条件やソート条件を予めセットしておきたい場合があります。ビュー機能を利用する方法もありますが、JavaScriptなどで動的に変更したい場合などの記述方法について説明します。

## 実装方法
フィルタ条件やソート条件を指定したviewを作成し遷移先URLのクエリパラメータに渡します。
“`javascript
let view = {
ColumnFilterHash: {
ClassA: “[\”設計\”]”
},
ColumnSorterHash: {
StartTime: ‘asc’
}
};
location.href = ‘/items/2/index?view=’ + JSON.stringify(view);
“`

## 遷移先のURL
ブラウザ上でJavaScriptを実行すると下記のようなURLに遷移します。view=の部分にクエリパラメータとしてviewの内容が指定されています。

“`url

Three.jsで動画テクスチャの切り替える際に必要だったこと

# 概要
Three.jsで`HTMLVideoElement`をThree.js空間の特定のオブジェクトのテクスチャとして扱う際に複数の動画を任意のタイミングで切り替える際に切り替え時に稀に動画再生がされない問題に悩まされたので、対策として有効だったことを備忘録として記します。(検証端末:モバイルブラウザ(Android Chrome1049, iOS Safari))

# Three.js空間上で不必要になったインスタンスの解放処理
Three.jsで作成したインスタンスは自動的には解放されないので、明示的に解放処理を入れてください。
私の場合は、動画の切り替えの際に前回の動画を貼り付けているテクスチャに対してThree.jsの[texture.dispose()](https://threejs.org/docs/#api/en/textures/Texture.dispose)することで対処しました。これをしない場合、iOS Safariで`WebGL context lost`エラーに苦しめられました。

# HTMLVideoElementの`preload`属性を設定

preventDefault()に気づかず苦戦した話

## はじめに
こんにちは。
駆け出しフロントエンドエンジニアのももたれです。

最近はJavaScriptの基礎部分をひたすら書いてました。
自分の備忘録も兼ねて、preventDefault()に気づかず苦戦した話を書きます。

## 実装内容
### ページTOPへ戻るボタン
ページに入り、ちょっとスクロールしたら右下に出てくる「ページTOPへ戻るボタン」
クリックしたら**するするっと**ページTOPに戻る、まあよく見るあのボタンを作ろうとしてました。

htmlとcssで**ただの**「ページTOPへ戻る」は作ったことありますが、JavaScriptを使っては初めて。
調べたらよさげな記事出てきたので、「お、いけそう」と思いきや、だいぶ苦戦しました。

### コード
こんな感じで書いてました。

htmlは大した内容じゃないので省略します。
大事なのは、**aタグ**使ってました。

“` javascript
// スクロールしたらボタンが出てくる
const topBtn = document.querySelector(“[data-target-following

[JavaScript]URLSearchParams.toString()がnull値を”null”とするのを避ける為、nullをオブジェクトから除外する

# 前提

　GET用のURLパラメータを構築する時、URLSearchParams.toString()が便利です。次のように使います。

“`javascript
const params = {
search: “abc”,
searchtype: 2,
userid: 1234,
}

const url = “https://host/api/getXXX” + (new URLSearchParams(params)).toString()
console.log(url);
“`

“`
https://host/api/getXXX?search=abc&searchtype=2&userid=1234
“`

# 問題点

　paramsのプロパティ値にnullやundefinedを含むものがあった場合、それらは”null”、”undefined”という文字列としてエンコードされます。

“`javascript
const params = {
search: null,
searchtype: undefined,
userid: 1234