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

JSで全角or半角のローマ数字を全角アラビア数字に変換した

■前提条件
jsで実装する。

■要件
全角or半角のローマ数字を、全角アラビア数字に変換したい。
ただし、文章中の一部に含まれているものとする。
（例）てすとタワーⅡhoge

■課題
ライブラリを使用して変換しようとしたが、先頭文字が変換対象となるためエラーになってしまう。
→使用予定のライブラリ：https://www.npmjs.com/package/numeric-quantity

■解決策
ライブラリ使用せず、自力で実装。
今回の設計では10までの値を変換対象としているが、50(Ⅼ)、100(Ⅽ)なども対象とする場合は追記が必要。

■コード
“`
/**
* 全角or半角ローマ数字を全角アラビア数字に変換
*/
const romanToArabic = (str) => {
const romanMap = {
Ⅰ: “１”,
Ⅱ: “２”,
Ⅲ: “３”,
Ⅳ: “４”,
Ⅴ: “５”,
Ⅵ: “６”,
Ⅶ: “７”,
Ⅷ: “８”,
Ⅸ: “９”,
Ⅹ: “１０”,

Synthesizer V Studio Pro のスクリプト機能を試してみた

# これは何？
２週間ほど前に、Synthesizer V Studio Pro　を購入し、オリジナル曲のボーカルトラックを作成しています。
その中で、スクリプト機能が使えるということを知ったので少し試してみました。

– Synthesizer V
– Dreamtonicsが開発する強力な音声処理エンジンと直感的で柔軟なユーザーインターフェースを併せ持つ歌声合成ソフトウェア。簡単にいうと、初音ミクとかのVOCALOIDみたいなものです。

# 今回作成するもの
選択しているノートを1オクターブあげるスクリプトを作ってみようと思います。

ちなみにスクリプトの対応言語は、`JavaScript` と　`Lua` になりますが、今回は　`JavaScript` で試してみます。

公式ドキュメント: https://resource.dreamtonics.com/scripting/ja/index.html

## はじめに枠組みを作る

スクリプトの構成には、以下の２つのグローバル関数が必ず必要になります。

– `getClientInfo()`
– スクリプ

【Figma Widget】Figma Widgetで使えるHooks まとめ

## はじめに

みなさんは、Figma Widget を開発する際、FigmaにどんなHooksが使えるんだろう？と思ったことはありますか？

この記事では、そんな、Figma Widgetで使えるHooksについて解説しようと思います。

## Figma Widgetで使えるHooks

### useEffect

useEffect はウィジェットの状態が変化するたびに実行されるHooksです。
そのため、非同期タスクの実行、呼び出しのバンドル、またはイベント ハンドラーの副作用の統合が可能になります。

https://www.figma.com/widget-docs/api/properties/widget-useeffect/

“`ts
useEffect(() => {
// 処理を記載する
})
“`

### usePro

【React】ライブラリをGitHub上のReleaseのTagを使ってPublishする

# はじめに

こんにちは、エンジニアのkeitaMaxです。

前回作成したライブラリをGitHubのReleaseのTag機能を使ってPublishできるようにします。

https://qiita.com/keitaMax/items/8657d469e4d2dc094d75

https://qiita.com/keitaMax/items/bf74d1a472bf4cae3d86

# npm tokenの取得

https://www.npmjs.com/

NPMにログインをして、AccessTokenを押します。（自分のアイコンをクリックでメニューが開きます。）


`Generate New Token`クリックし、`Granular Access Token`を選択します。

[JavaScript] 頻出document.getElementByIdを短く書く

# [JavaScript] 頻出document.getElementByIdを短く書く
JavaScriptの頻出のアレ、document.getElementByIdを短く書く。必要な場面でいちいち書いてられん。短く書けるように最初の方で定義しておく

要点はこう：

:::note
`document.getElementById`を短く書けるようにする。
`document.getElementsByClassName`を短く書けるようにする。
`document.querySelectorAll`を短く書けるようにする。
↓
`$(任意のID名)`
`$cls(任意のclass名)`
`$qcls(任意のclass名 > 任意のタグ名)`
:::

以上。

この記事は、既出Qiita記事
– [円形プログレスバー 自動生成&設定 (CSS,SVG,JS)](https://qiita.com/Reng/items/cc34099bec22c484057a)

– [html5：audio・videoタグの音量初期値を設定(指定)するjavascript](https://

string型とundefind型を比較してもエラー起きないんですけど？

## はじめに
厳密等価演算子を使ったstring型とundefind型の比較で、コンパイルは通ったのですが違和感がありました。
簡単な例ですが、発見があったのでまとめます。

先に結論を書きます。

:::note warn
JavaScript（TypeScript）では、どんな型の変数も undefined と比較することができる
“`typescript
undefined === undefined // true
undefined === null // false
undefined === 0 // false
undefined === “” // false
undefined === true // false
“`
:::

## 背景
[WebSocketサーバの実装で導入しているライブラリ](https://github.com/socketio/socket.io)の型定義で誤りがあることに気がつきました。

ソースコードにコメントで記載されていますが、socketインスタンスはidプロ

CDNでReact入門

# CDNでReact入門
Reactは、JavaScriptWebフレームワークの中で一番人気である。しかし、こちらを扱うには、Nodejsの環境を作る必要があり、ハードルが高い。
ところが、CDNを使えば、環境構築をしなくても、お試しでReactが使える。
今回で、Reactの良さを色んな人に味わって欲しい。

## 前提条件
– HTML/CSSがわかる
– JavaScriptの最新バージョンのコードがわかる
– 分割代入がわかる
– Visual Studio Codeが使える
– LiveServerをインストールしている
– Prettierをインストールし、セットアップも完了している。(推奨)

## プロジェクト作成
例によってTodoListを作る。
CLI使用
“`
mkdir react-todolist
cd react-todolist
“`
Linux系
“`
touch index.html
touch style.css
“`
PowerShell
“`
New-Item index.html
New-Item style.css
“`

（1冊ですべて身につく）カラーピッカーを作成する　カラーコードを表示する

お疲れ様です。

昨日の続きから進めていきます。
昨日の時点では、カラーピッカーで適当に色を選択してもカラーコードは変化しませんでしたが、今日はカラーコードが表示されるようにしました。



id名 ColorPicker から値(value)を取得し、それを表示。(2枚目の画像)
ただ、毎回 document.querySelector…..と書いていては、最終的にコードが長くなっていって、タイプミスもするし、大変になってくるので、値を取得したコード達をそれぞれ定数宣言し、コンパクトにまとめる。とのことで

えー！めっちゃ便利じゃん！と思ったlodashの関数を紹介する

## はじめに
JavaScriptのユーティリティライブラリの一つにLodashというものがあります。

業務で配列を扱うために使っていて、便利なので重宝しています。
しかし、配列操作以外にも便利なものが結構あることを知ったので、それらを紹介します。

## debounce
### 概要
一度発火すると、一定時間は再発火されない関数を定義することができます。
フォームのユーザー入力によってAPIを呼び出す処理の場合に有効です。

### 基本形
`_.debounce(func,wait,option)`
#### func
実行したい処理を指定します。

#### wait
待機する時間を指定します。単位はミリ秒です。

#### option
オブションをオブジェクトの形式で指定します。
設定できるのは以下の3つのプロパティです。
`{leading:boolean, maxWait:number, trailing:boolean}`
今回は扱わないので、詳細は割愛します。

### 使用例

以下のような、入力結果に合わせてリアルタイムで検索するような画面があるとします。

Objectの静的メソッドを一覧で見る！

Objectの操作で、「あれどうやるんあだっけ？」ということがありました。
これを機会に、静的メソッドを見ていきます。

*量が多いので2回に分けて行います。順序は個人的に利用頻度が高そうなものから並べています

### Object.keys()

– オブジェクトのすべての列挙可能なプロパティ名を配列として取得する

“`js
const user = { name: ‘名前’, age: 25, email: ‘namae@example.com’ };
const keys = Object.keys(user);
console.log(keys); // [“name”, “age”, “email”]
“`

### Object.values()

– オブジェクトのすべての値を取得し、リスト表示や計算に使います。

“`js
const user = { name: ‘名前’, age: 25, email: ‘namae@example.com’ };
const values = Object.values(user);
console.log(value

JavaScriptで安全なセッション管理をしてみたい

## Self-XSSでも盗めないHTTPセッションで可能か？

Self-XSSは簡単に言うと、ブラウザーの開発者モード(コンソール)をユーザー自身に操作させる攻撃。
場合によってはセッション情報を盗んで、別のところから改めて攻撃もできる。
根本的な対策は難しく、コンソール画面に警告を出しておくとかがあるらしい。

そのブラウザでのセッションの対策は難しくても
セッション情報を盗めないようにできないか？
ちょっと考えて、WebCrypto APIを使って鍵交換・暗号化することで出来そうと、思って色々やってみた。

## 一応できる

はい、一応です。
少なくともSNS等では到底使えない方法です。

****

全体の流れ

1. クライアント側で
subtle.generateKey()を使いECDH鍵ペアを作成
公開鍵をサーバーに送信

2. サーバーも同様にECDH鍵ペアを作成
クライアントから送られてきた公開鍵をsubtle.importKey()で取り込んで
共有情報を生成しsubtle.deriveKey()で共有秘密鍵を作成
そしてその情報と紐づけるセッションIDしてを生

[JavaScript] functionとarrow関数でのthisの挙動

前回まではレキシカル環境とクロージャについてお話ししてきました。

今回はfunctionとarrow関数でのthisの挙動の変化について書いていこうかと思います。

今回はカイージくんは登場しません。予めご了承ください。

⇩カイージくんとのお勉強はこちらをご覧ください⇩

https://qiita.com/shima14142/items/35d47c65799251e73fd9

https://qiita.com/shima14142/items/ba57d6f4038681819b5a

## 本題:thisとは
`this`は関数やメソッドがどのオブジェクトから呼び出されたかを示します。

通常の関数では、`this`は関数が呼び出されたコンテキストによって決まります。例えば、オブジェクトのメソッドとして呼び出された場合、`this`はそのオブジェクトを指します。

~~~js
const obj = {
value: 42,
regularMethod: function() {
console.log(this.value); // t

JavaScript 標準ライブラリまとめ

—

# 標準ライブラリ

### Number

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number

| API | 意味 | 備考 |
| ———————————————————— | ———————————- | ——————————– |
| [Number.NaN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/NaN) | 数学的に存在しない

[JavaScript] 借金返済と学ぶ、クロージャを利用したプライベート変数

前回の記事では、レキシカル環境とクロージャについてカイージとともに学んでいきました。後編となるこちらでは、クロージャを利用したプライベート変数(みたいなやつ)と、アロー関数とfunctionでのthisの挙動について書いていこうと思います。

⇩⇩前回の記事はこちらです⇩⇩

https://qiita.com/shima14142/items/35d47c65799251e73fd9

今回も、以下の登場人物が出現します。

## 登場人物
なんか二人増えてますね。~~原作ファンブチギレのメンバーたちです。~~

## 前回のお話も踏まえながら
1発4000円もするパチンコ”ヌーマ”に挑戦した二人。すると、そこには新たな敵、イチジョーと~~自分たちを裏切ったイシーダのおっちゃんの娘である~~イシ

fetch APIを使用したPOSTリクエスト

## はじめに

AJAXは、JavaScriptを使用して非同期的にサーバーと通信する技術の総称です。その代表的な技術であるfetch APIを使用したPOSTリクエストの例を2つ紹介し、それぞれの特徴についてまとめます。

## 基本的なfetch APIを使用したPOSTリクエスト

“`javascript