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

Vue で空文字が Prop で渡ってきてバグってしまった話

数年前に作られていたvue 2 (TypeScriptなし) のプロダクトで空文字がPropで渡ってきてバグってしまった話と、注意点を備忘録として残します。

※ これは2022/12/05に個人ブログで公開した記事を移植したものです。

## 背景

数年前に作られていたvue 2 (TypeScriptなし) のプロダクトで次のようなコンポーネントがありました。

“`js
export default {
props: {
sample: Boolean,
default: false,
},
};
“`

このコンポーネントはこのように呼び出されています。

“`vue

“`

このsample2、実は文字列が入っていました！

設計者の意図としては、JSの暗黙的な型変換と同様に空文字列であれば `false` 、 1文字以上であれば `true` という実装にしたかったのだと考えられます。

## 空文字列 `””` が `true`

Node-REDのGit機能を学ぶ 概要編

本記事では、Node-REDで本格的なフロー開発を行う際に必須となるGit機能を紹介します。
　Node-REDは産業向けIoTアプリをコーディング不要で構築できる開発環境として近年、工場データの見える化ダッシュボードや、工場のファクトリーオートメーションなどのシステムで利用されています。しかし、これらのミッションクリティカルシステムのフロー開発では以下の問題に遭遇しがちです。


# フロー開発で起きがちな問題

### [問題1] すべての機能が1つのフローに存在
　Node-REDの環境が1つしか存在しない場合、多数のノードを含む巨大なフローがその1つの環境で実行されることになります。このようなフローはメモリやCPUのリソースを大量に消費するため、パフォーマンスの問題が発生しがちです。また、同じ名前のコンテキスト

【TypeScript】ぶっちゃけTypeScriptを使うとなにが嬉しいのか調べた話

# はじめに
単純にJavaScriptじゃなくTypeScriptを使うメリットを知りたいという興味本位から調べ始めました。粗末な備忘録ですがお付き合い頂けると幸いです。

# この記事の対象者
* 私と同じ初学者の方
* 同じような疑問を持っている方
* 温かい目で見守っていただける方

# そもそも、JavaScriptとは
まず、TypeScriptについて考える前に比較とするJavaScriptとはなんぞや

JavaScriptは、ウェブページを動的にするために使われるプログラミング言語です。当初はブラウザ内で動作するスクリプト言語として登場しましたが、現在ではサーバーサイド（Node.jsなど）やモバイルアプリ開発、デスクトップアプリケーション、ゲーム開発など、多岐にわたる領域で使用されています。JavaScriptは、HTMLとCSSと共に、ウェブ開発の3つの核となる技術の一つです。

JavaScriptの主な特徴は以下の通りです：

– **インタープリタ言語**: JavaScriptはコンパイルされる代わりに、ブラウザやNode.jsなど

AI生成音楽の魔法を発見する

画像を魅惑的な音楽作品に変換する人工知能の力を利用した画期的な新サービスをご紹介できることをとても嬉しく思います。AI Image to Music Generatorへようこそ。こちらは、誰でも簡単に写真、絵画、その他の視覚芸術を美しく練られたメロディーとハーモニーに変換できる革新的なプラットフォームです。
これはこれまでにない全く新しい音楽創作の形態です。AI Image to Music Generatorでは、アップロードした画像の色、形、テクスチャなどを先進のAIアルゴリズムが分析し、その作品のエッセンスを反映した繊細な音楽を作曲します。結果として、オリジナルの画像の情動とイメージを喚起するオーディオ体験が得られます。
この技術は非常に驚くべきものだと思います。熱心な写真家で音楽愛好家の私にとって、自分の休暇の写真やお気に入りの絵画が、AIによって感動的なピアノ協奏曲、大気的なサウンドスケープ、その他の様々な音楽スタイルに解釈されるのは信じられない経験です。すべての画像が、生成された曲を通じてそれぞれの物語を語ります。
ここには無限の可能性があります。AIがより多くのデータを

PlunkerでPhaser.Physics その13

# 概要
Plunkerで、Phaser.Physicsやってみた。
motorJoint、使ってみた。

# 写真


# サンプルコード

“`

var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image(‘a’, ‘assets/sprites/a.png’);
game.load.image(‘b’, ‘assets/sprites/b.png’);
}
var codeCaption;

PlunkerでPhaser.Physics その12

# 概要
Plunkerで、Phaser.Physicsやってみた。
wheelJoint、使ってみた。

# 写真


# サンプルコード

“`

var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image(‘a’, ‘assets/sprites/a.png’);
game.load.image(‘b’, ‘assets/sprites/b.png’);
}
var codeCaption;

PlunkerでPhaser.Physics その11

# 概要
Plunkerで、Phaser.Physicsやってみた。
prismaticJoint、使ってみた。

# 写真


# サンプルコード

“`

var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.spritesheet(‘diamonds’, ‘assets/sprites/diamonds32x24x5.png’, 32, 24);
}
var codeCaption;
var bodyAs

PlunkerでPhaser.Physics その10

# 概要
Plunkerで、Phaser.Physicsやってみた。
ropeJoint、使ってみた。

# 写真


# サンプルコード

“`

var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image(‘a’, ‘assets/sprites/a.png’);
game.load.image(‘b’, ‘assets/sprites/b.png’);
}
var codeCaption;
v

PlunkerでPhaser.Physics その9

# 概要
Plunkerで、Phaser.Physicsやってみた。
revoluteJoint、使ってみた。

# 写真


# サンプルコード

“`

var game = new Phaser.Game(800, 600, Phaser.CANVAS, ‘phaser-example’, {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image(‘a’, ‘assets/sprites/a.png’);
game.load.image(‘b’, ‘assets/sprites/b.png’);
}
var codeCaptio

ReactとFlaskの組み合わせにおけるCORSの重要性と設定方法

## はじめに

近年、フロントエンドとバックエンドの分離が一般的な開発パターンとなっています。このような構成では、Reactのようなフロントエンドフレームワークを使ってUIを構築し、Flaskのような軽量なバックエンドフレームワークをAPIサーバーとして使用することがよくあります。しかし、このようなアーキテクチャを採用する際、Cross-Origin Resource Sharing（CORS）に関する理解と適切な設定が大切で、本記事がその備忘録です。
## CORSとは？

CORSは、ウェブページが異なるオリジン（ドメイン、プロトコル、ポート）のリソースにアクセスすることをブラウザが許可するようにするセキュリティ機能です。デフォルトでは、ブラウザは同一オリジンポリシーを強制し、異なるオリジン間のリソース共有を制限します。しかし、実際のアプリケーションでは、フロントエンドとバックエンドが異なるオリジンに存在することがよくあります。このとき、CORSポリシーの設定が必要となります。

## FlaskにおけるCORS設定

FlaskでAPIを構築し、Reactアプリケーションから

ReactのuseMemoとは何か？

# useMemo
“`useMemoフック“`は、***計算結果をキャッシュし、その結果を再利用するためのもの***で、
***計算に時間がかかる関数の結果をメモ化***するために使われます。

useMmeo構文
“`
useMemo(() => 値を計算するロジック, 依存配列);
“`
例えば以下のように使います。
“`jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
“`
***computeExpensiveValueは計算コストの高い関数***で、***aとbがその関数の引数***です。
useMemoの第二引数には、この計算が依存する値（aとb）が含まれています。
***これらの値が変更された場合にのみ、computeExpensiveValueが再計算***されます。
それ以外の場合は、以前の結果がキャッシュされ、再計算されません。

“`jsx
import React, { useState, useMemo } from ‘react’;

JSはこれだけ学べばよし!JavaScriptPrimerでの勉強法

# 概要
Reactをやる前にまずはJavaScriptから学習しようと思い、以下のサイトで学んだ。
Udemyとかの写経だけだとアウトプットが足りずに身につかないので、
まずはTodoリストから作成してみることにした。

# この資料をやってみて

https://jsprimer.net/use-case/todoapp/

https://read-engineer.com/2020/12/01/javascript/

# 最初に
全部載せることはしないので一部のアウトプットだけ記載していきます。
***基本プログラミング言語を習得の1番近道はTodoリストを作る***といいです。
***CRUDの実装***ですね。僕もLaravelでやっても成果は出ました。

この記事では最初にインプット、後半はアウトプットを書いていきます。
メモ形式になっていくのでご了承ください。

# 学ぶべき知識
学ぶべき知識は以下のように学びます。

– 変数、配列、条件分岐、ループ処理 (プログラミング言語全般の基礎部分)
– クラス、オブジェクト
– 関数
– thisの取り扱い
– 例外処理

【JavaScript】fetchのレスポンスのコンテンツタイプが正しいか検証する方法

以下のようにレスポンスヘッダーの`content-type`を確認することで検証できます。

“`javascript
async function fetchSample(request) {
try {
const response = await fetch(request);

const contentType = response.headers.get(“content-type”);
if (!contentType || !contentType.includes(“application/json”)) {
throw new TypeError(“JSONではありません。”);
}
const jsonData = await response.json();
// …

} catch (error) {
console.error(“Error:”, error);
}
}
“`

https://developer.mozilla.org/ja/docs/

EPUB形式の電子書籍でJavaScriptを使ってMP3音声を再生

# やりたいこと
外国語学習のためにテキストと音声を組み合わせた電子書籍を自作したいと思いました．

EPUB形式の電子書籍を自作し，CSSで音声再生ボタンを用意して，JavaScriptで音声を再生させるプログラムを用意することで実現しました．

[EPUB形式の電子書籍を一からゴリゴリ作成する方法](https://qiita.com/campanura/items/1fcd64754d4a45c8f225)

# コード

## JavaScript
“`diff_javascript:playMP3.js
function playAudio(audioFile, audioPlayerId, buttonId) {
const playButton = document.getElementById(buttonId);
const audioPlayer = document.getElementById(audioPlayerId);

// オーディオが再生中かどうかを確認
const isPlaying = !audioPlayer.

X(旧Twitter)の片思いフォローを整理するブックマークレット「バイバイ片思い」のご紹介

## ~~片思いフォロージェノサイド~~バイバイ片思い for X(Twitter)
X(旧Twitter)でふと、「片思いフォロー、整理したいな〜」って思ったことない？🤔 でもひとつひとつチェックしていくのって、めんどくさいよね😅 そんな時にピッタリなのが、「バイバイ片思いブックマークレット」だよ！


この記事では、使ってみたいだけの人のために、どうやって使うのかを先にサクッと解説しちゃうね🚀
実際のコードについても後から解説するよ✨

:::note alert
インターネット上で掲載されているプログラムを安易に実行すると酷い目に遭うことがあるから、ちゃんとよく確認してから、気を付けて使うんだよ！
利用は自己責任で！
:::

使い方はめちゃくちゃ簡単で、誰でもすぐにできちゃうから、興味がある人はぜひ最後までチェックしてみてね！そして、このブ

JavaScriptの配列とオブジェクトの置換

# はじめに
何度も忘れて調べるので自分用メモ。
ググるのも説明するのも難しいから、解を得るまでが地味にめんどくさいやつ。

JSONで定義されているものを、使いやすいように変換したいときに出くわします。idというキーに入っている値をキーにして、nameというキーに入っている値を値にした、オブジェクトを作りたい。（伝われ！）

# 課題
“`JavaScript
// この配列を
const ary1 = [{id:11, name:”aa”}, {id:22, name:”bb”}];
// この形に変換したい
const map1 = {11:”aa”, 22:”bb”};
“`
コードでかけばすぐ伝わる。

この変換があれば
“`JavaScript
console.log(map1[11]); // aa
“`
ができる。

# もったいぶらずに解
“`JavaScript
const map1 = ary1.reduce((m, v) => (
{…m, [v.id]:v.name}
), {});
“`
`reduce`で解体しながら作り上げていく感じ

【kintone】フィールドの値まわり(初心者/入門)

# はじめに
kintoneのフィールドの値は`record[フィールドコード].value`で基本取り出せます。
例えば文字列フィールドに`テキスト`というフィールドコードを設定し、`こんにちは`と入れていた場合、
`record[“テキスト”].value`としてあげれば`こんにちは`が取り出せます
少し異なるフィールドだけ羅列します。

## テスト環境の画面
今回こんな感じの環境で見ていきます。


## ユーザー選択(組織選択、グループ選択）
`record[“ユーザー選択”].value`で取得するとvalueの中に配列で各ユーザーの情報`{code:ユーザーのコード, name:ユーザーの名前}`が入っています。
例えば、一人目の名前だけ取得したければ`record[“ユーザー選択

【TypeScript】画面表示までの流れを図解で理解しながら環境構築する

# はじめに

最近、個人で作りたいアプリが見つかったので、そのアプリをTypeScriptで実装しようと考えています。まずはTypeScriptで実装するにあたって環境構築を実施したのですが、reactなどみたいに`npx create-react-app`を打つのみでなく、若干複雑だったので記事にまとめようと思いました。
下記で環境構築を動画で説明してくださっている方がいたので、それを元に構築したのですが、この記事では図解することで、視覚的にわかりやすく説明できればと思います。

参考動画：https://www.youtube.com/watch?v=qSHlXcSces8

# 全体観


上記がTypeScriptを用いて画面表示するまでの流れとなっています。
詳しい仕組みの説明は下記記事を参考してみてください。

仕組みの説明：ht

AG-Gridでヘッダーの下にアクションエリアを表示する方法

AG-Gridでテーブルのヘッダー行の下にアクションができる固定行を表示する方法を解説します。

(React版v28を使用しています。)

※ これは2022/12/13に個人ブログで公開した記事を移植したものです。

## ヘッダー行の下にアクションができる行とは？

正式な名称がわからないので説明的ですが、次のようなUIです。 (もし名前ご存知でしたら教えてください)


AG-Gridではこの機能は搭載されていませんでした。そこで、AG-Gridの様々な機能を活用して無理やり実装してみました。

https://www.ag-grid.com/react-data-grid/full-width

フリーレンの次回予告を再現してみる

## はじめに
アニメ「葬送のフリーレン」の次回予告、毎度見る度にエモいって思うんです。
セリフの切り抜きが無作為に表示され（セリフも流れ）最後に次回タイトルが読み上げられた時、とっても興味をそそられます。
AngelBeatsの次回予告を真似したやつですね。

この次回予告、自作できないかと思って試行錯誤してみると案外簡単につくれました。（どこで使うねんっというツッコミは悪しからず却下で！）

### 完成物

Githubのプレビューは以下

[https://ymmy833y.github.io/FreelenNextPreview/](https://ymmy833y.github.io/FreelenNextPreview/
)

## ソースコード
全容は [GitHub](https://github.com/Ymm