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

JavaScriptのexportについて

JavaScriptのexportは、他のファイルやモジュールでコードを再利用できるようにするために、関数や変数、クラスを外部に公開する仕組みです。exportを使うことで、モジュール間の依存関係を作りながら、コードを分割して管理しやすくすることができます。

**exportには主に以下の2種類の方法があります。**

# 1. Named Export (名前付きエクスポート)
名前付きエクスポートでは、複数の関数、変数、クラスを一つのファイルからエクスポートできます。名前を指定してエクスポートするため、インポート時にはその名前を使って指定する必要があります。

使用方法
宣言と同時にエクスポート：

“`javascript
export const greeting = “Hello, World!”;

export function sayHello(name) {
return `Hello, ${name}!`;
}

export class Greeter {
constructor(name) {
this.name = name;
}

MapLibre でタイルの差分確認

## はじめに

最近、２つのタイルデータの差分を手軽に確認する方法はないかと調査しておりました。例えば、データ更新した際に、どの部分が更新されているか強調したくなるかもしれませんし、単純に２種類のタイルでどこが違うのか、把握したくなるかもしれません。

* ２種類のタイルの比較イメージ

そこで、タイルの差分確認に [MapLibre GL JS](https://github.com/maplibre/maplibre-gl-js) の `addProtocol()` が使えるのではないかと思い至りました。

この `addProtocol()` 機能を使うことで、個別のタイル URL を用いて各タイルを取得し、その結果の ArrayBuffer を返す過程に干渉することができます。そのため、この機能を用いて、別のリソースを参照したり、タ

三項演算子の書き方

三項演算子は if-then-else の式バージョンである。

if-then-else なら入れ子の場合、
“` javascript
if (条件A) {
(条件Aが真の場合)
}
else {
if (条件B) {
(条件Bが真の場合)
}
else {
(その他の場合)
}
}
“`
などと書かずに
“` javascript
if (条件A) {
(条件Aが真の場合)
}
else if (条件B) {
(条件Bが真の場合)
}
else {
(その他の場合)
}
“`
と書く。

ならば三項演算子でも
“` javascript
rv = (条件A) ? (条件Aが真の場合)
: (条件B) ? (条件Bが真の場合)
: (その他の場合);
“`
と書けばいい話である。

これが判っていないから「三項演算子禁止論」なんてものが出てくるのだ。(優先順位のバグでこう書けない壊れた言語PHPや、これを崩してしまう頭の悪いフォーマッタのせいでもあるだろうが)

javascript: URLとは？

>警告: `ウェブ上でjavascript: URL を使用することは推奨されていません`。これは、eval()を使用することによる影響と同様に、`任意のコードが実行される可能性があるため`です。また、通常のリンク動作とは異なるため、`アクセシビリティが縮小する可能性`があります。
* ウェブ上でjavascript: URL を使用することは推奨されていません
* アクセシビリティが縮小する可能性
* evalと同様の影響らしい。
* evalとは？

>JavaScript URL、つまり javascript: スキームを接頭辞とする URL は、ブラウザーがナビゲートしようとした際に `JavaScriptを実行する擬似的なナビゲーション対象として使用`されます。 `URL が文字列として評価された場合、HTML` として扱われ、ブラウザーによってレンダリングされます。
* ブラウザーがナビゲートしようとした際に `JavaScriptを実行する擬似的なナビゲーション対象として使用`とは？

### 構文
>JavaScript URL は `javascript:スキームで始

evalは使わない

>eval() を使わないでください!
直接的な eval() はいくつもの問題を引き起こします。
>
>eval() は`呼び出し元の権限で渡されたコードを実行`します。悪意のある第三者に影響を受ける可能性のある文字列で eval() を実行すると、そのウェブページや拡張機能の権限において、`ユーザーのマシン上で悪意のあるコードを実行してしまう可能性`があります。さらに重要なことに、`サードパーティのコードが eval() が（直接的な eval であれば）呼び出されたスコープを見ることができる`ため、攻撃者がローカル変数を読み取ったり変更したりすることができてしまいます。
* 悪意のあるコードを自分のパソコンの権限で実行してしまい悪さをする
* サードパーティとは？

https://www.ntt-west.co.jp/business/glossary/words-00167.html#:~:text=%E3%82%B5%E3%83%BC%E3%83%89%E3%83%91%E3%83%BC%E3%83%86%E3%82%A3%E3%83%BC%E3%81%AB%E3%81%A

JestとTesting-LibraryとMockについてまとめる

Jest・Testing-Library・Mockを使用してテストケースを記述した際に学んだことや注意点などをまとめる。

## JestとTesting-Libraryを用いたテスト
### テストケースの定義
`describe`でテストをグループ化し、`test`で実際のテストケースを定義する。
`expect`にテストしたいものを記述し、想定される結果をマッチャーを使用して記載する。
下記の例では、`toBe(true)`がマッチャーであり、想定される結果が`true`であることを記述している。
他にも`toContain`(配列に特定の要素が含まれている)など様々なマッチャーがある。
“`js
describe(‘〇〇コンポーネント’, () => {
test(‘テストケース1’, () => {
expect(true).toBe(true);
});
});
“`

### コンポーネントのレンダリング
`render`で指定したコンポーネントをレンダリングできる。
レンダリング後に要素の取得などを行うことで、レンダリング結果に対するテストを記述で

Jestのテストでハマったので調べてまとめる

jestの環境構築をしていて、`import/export`が使えなかったり、`.jsx`の取り扱いでハマったので調べたことをまとめる。

## CommonJSとESModule
JavaScriptには、モジュールの取り扱いのための仕様が2つ存在する。
jestでそのままimport/exportが使用できないのはここに起因する。

### CommonJS
>CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。

Node.jsが標準で採用している。jestも同様。
モジュールの読み込みは`require`、モジュールの公開は`module.exports`などを使用する。
ファイルの拡張子を`.js`とするとCommonJSで扱われる。

### ESModule
>ECMAScript（エクマスクリプト）は、Ecma Internationalのもとで標準化手続きが行われているJavaScriptの規格

最近の主流はこっちらしい。
モジュールの読み込みは`import`、モジュールの

ilasmでstack machine その26

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
日本語をilasmに変換するコンパイラを書け。
fizzbuzzをコンパイルせよ。

# 方針
– Plunker使う。

# 写真


# 投入したソース

“`
数値 100 を積み
変数 n に移動し
数値 1 を積み
変数 i に移動し
loop:
変数 i を積み
変数 n を積み
比べて大なら bye へ飛ぶ
変数 i を積み
数値 15 を積み
剰余し
偽なら fb へ飛ぶ
変数 i を積み
数値 5 を積み
剰余し
偽なら b へ飛ぶ
変数 i を積み
数値 3 を積み
剰余し
偽なら f へ飛ぶ
変数 i を積み
数値印字し
無条件で tug

ilasmでstack machine その25

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
ilasmを日本語に変換するコンパイラを書け。
zundokoをコンパイルせよ。

# 写真


# 投入したソース

“`
ldc.i4 0
stloc a
loop:
ldc.i4 3
callvirt instance int32 [mscorlib]System.Random::Next(int32)
ldc.i4 1
bgt zun
ldc.i4 0
stloc a
ldstr “ドコ”
call void [mscorlib]System.Console::Write(string)
br loop
zun:
ldstr “ズン”
call void [mscorlib]System.Console::W

【React】チェックボックスにドハマリした

Reactでチェックボックスにドハマリしました。
自分自身のメモのために記録します。

機能的にはONにしたら親コンポーネントの一覧に表示、OFFにしたら一覧から削除という単純な流れ。

### 修正前
“`
  item.id === album.id) ? ‘selected’ : ‘select’}
checked={albumArtList.some((item) => item.id === album.id)}
onChange={() => handleChange(album.id, album.name, album.images[0]?

ilasmでstack machine その23

# 概要
ilasmでstack machineやってみた。
生成した日本語プログラムをcopilotに解説してもらった。

# 投入したプロンプト

“`
次の日本語プログラムを解説してくれ

数値 100 を積み
変数 n に移動し
数値 1 を積み
変数 i に移動し
loop:
変数 i を積み
変数 n を積み
比べて大なら bye へ飛ぶ
変数 i を積み
数値 15 を積み
剰余し
偽なら fb へ飛ぶ
変数 i を積み
数値 5 を積み
剰余し
偽なら b へ飛ぶ
変数 i を積み
数値 3 を積み
剰余し
偽なら f へ飛ぶ
変数 i を積み
数値印字し
無条件で tugi へ飛ぶ
fb:
文字列 “fizzbuzz” を積み
無条件で print へ飛ぶ
b:
文字列 “buzz” を積み
無条件で print へ飛ぶ
f:
文字列 “fizz” を積み
print:
文字印字し
tugi:
変数 i を積み
数値 1 を積み
足す
変数

ilasmでstack machine その22

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
ilasmを日本語に変換するコンパイラを書け。
fizzbuzzをコンパイルせよ。

# 方針
– Plunkerを使う。
– 仕様

|ニーモニック　|日本語
|:–|:–|
| ldstr “fizz”| 文字列 “fizz” を積み
| ldc.i4 100| 数値 100 を積み
| stloc i| 変数 i に移動し
| ldloc i| 変数 i を積み
| call System.Console::WriteLine(int32)| 数値印字し
| call System.Console::WriteLine(string)| 文字印字し
| brtrue tugi| 真なら tugi へ飛ぶ
| brfalse tugi| 偽なら tugi へ飛ぶ
| bgt tugi| 比べて大な

2次元TypedArrayの平坦化

現時点で`TypedArray`に2次元は実装されていませんが、`Array`に`TypedArray`を詰め込んだ2次元風`TypedArray`を作る事はよくあります。…ないですか? ならばよし!
さて本題、2次元もどきを1次元に変換する処理を考察してみます
“`js
let a=[new Uint8Array([1]), new Uint8Array([2,3]), new Uint8Array([4,5,6])],
b=a.flat()
“`
上記のような処理では**bはArray**となり、`TypedArray`ではありません。素朴なloopで実現してみましょう。`A.reduce((a,b)=>a+b.length,0)`で要素総数を調べて`TypedArray`に突っ込みます
“`js
let A=[new Uint8Array([1]), new Uint8Array([2,3]), new Uint8Array([4,5,6])],
B=new Uint8Array(A.reduce((a,b)=>a+b.length,0)),b=0;
for(let a

ヘリカルコイルの3D描画。




コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実

ESP32でAES暗号/ハッシュ生成する

前回、以下の投稿で、ESP32でHMACを生成しました。

　[ESP32でHMAC(SHA-256)を生成する](https://qiita.com/poruruba/items/2ba3f1ff3e3045ce26c1)

ついでに、SHA1/256のハッシュと、AES暗号/復号をやってみます。
前回同様に、ESP32のArduinoでは、mbedtlsを利用できるのでそれを使います。

# Arduino/PlatformIOでの利用

“`cpp:main.cpp
long aes16_ecb_encrypt(const unsigned char *p_key, const unsigned char *p_input, unsigned char *p_output, long len)
{
mbedtls_aes_context ctx;
mbedtls_aes_init(&ctx);
mbedtls_aes_setkey_enc(&ctx, p_key, 16 * 8);
for(long i = 0 ; i < len ; i += 16){

NumberとparseFloatとparseInt関数を使ったキャストの違い

# ■はじめに

こんにちは。白水（しらみず）と申します。
普段は不動産スタートアップでフロントエンドエンジニアとしてお仕事しています。
不動産系のサービスに携わっていると、賃料や管理費、敷金、礼金など数字に関わるものを多々扱うことがあります。
その中でも整数なのか少数なのかで、利用するJSのメソッドが違うため、毎回動作を確認するのが大変でした。
そこで、今回「Number()」と「parseFloat()」と「parseInt()」の動作違いを検証したので備忘録として残そうと思います。
短い記事なので、良ければご覧ください。

[Shiramizu\_Junya lit\.link\(リットリンク\)](https://lit.link/js226)

# ■Numberメソッド

“`jsx
Number(“12”); // 12
Number(“015”, 10); // 15
Number(“12.3”); // 12.3
Number(“12.00”); // 12
Number(“12.03”); // 12.03
Number(“0.35”); // 0.35
Numb

Spotifyから #nowplaying のツイートを作る

Spotifyのリンクからツイート用のテキストをぱっと作るのが面倒なので、ブックマークレットで実現しました。
Spotifyをブラウザで開ければ、スマホでもPCでも動くと思います。

# 方法
## ブックマークレットを作る
1. 適当なページをブックマークに登録
1. ブックマークの名前を自分の分かりやすいもの（「なうぷれ」など）に置き換える
1. ブックマークのURLを以下のコード（ブックマークレット）に置き換える
“`javascript
javascript:(function(){
const title = document.title;
const pattern = /^(?.+) ‑ (曲・歌詞：|by )(?.+) \| Spotify$/u;
const groups = title.match(pattern).groups;
const text = `#nowplaying ${groups.song} / ${groups.artist}`;
cons

自作アプリにおすすめの外部API（JS,Reactのコードあり）

# はじめに

みなさん、こんにちは。Happiness Chainメンターのryoです。

今回は自作アプリを作る際に、導入するとおすすめな外部APIを紹介していきます。
ほとんどの現場では外部APIを1つ以上は使用しているので、これから紹介する外部APIを1つでも導入することで、転職が有利になることがあるので、是非参考にしてみてください。

※各APIにて、実際に動作するJavaScriptのコードを記述しています。SDKが正常に動作するものに関しては、SDKを使用しています。

# 1. Slack API

Slackを使用しているモダンな会社では、Slack APIを使用している所が多い印象です。例えば、ユーザーが特定のアクション（ユーザー登録など）を行った時や、メール送信時、エラーが起こった時等にslackの特定のチャンネルに通知します。実務だとSlackは常に開いているツールなので、ユーザーの動きをすぐに察知して、早期アクションを取ることができます。エンジニアもエラーをすぐ察知できるので、おすすめです。僕の経験になりますが、Slack APIを導入していない会社で導入した

しりとりアプリ開発：Reactで作るシンプルなしりとりアプリをDockerで動かすまでの手順

## はじめに
本記事では、Docker環境でReactを使用してシンプルなしりとりアプリを作成する手順について説明します。

今回は、ユーザーが前の単語の最後の文字から始まる単語を入力し、正しくしりとりを続けることができるアプリを実装しています。

本記事はITスクールの課題としてアウトプット学習を目的に作成したもので、個人の備忘録レベルの内容ですのでご了承ください。

## 必要なツール

:::note
**私の環境はM1チップ搭載のMacOSですが、本記事のハンズオンで使用するツールは以下の通りです。**
・“Docker“
・“Docker Compose“
・“Node.js（バージョン14以上推奨）“
・“npm（Node Package Manager）“
:::

## 作成したしりとりアプリのデモ動画
以下はしりとりアプリのデモ動画です。ユーザーが提示された単語に続く単語を入力すると、正確に入力したタイミングで結果が表示されます。

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.a

Anki用インポートデータ作成Webアプリケーション(記録用)

## 概要
Google Apps Script(以下GAS）の練習も兼ねてAnkiという有名な暗記アプリのインポートを楽にしたいので作成。筆者はHTMLやCSSは苦手なのでChatGPTを介し作成。

## 機能
* リスト形式での単語追加
– リストの長さはボタンで行を追加して可変的に対応可能
* リストごとの削除ボタン
* CSV出力機能
– 出力前に確認メッセージ
– 出力CSV名は”Anki_import.csv”

“`javascript:main.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile(‘index’);
}
“`
“`haml:index.html