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

Rustのrand使ってRandomArt作ってみた

# はじめに

下記でアナログ時計を作った構成を利用し、

Rustのrandを使ってRandomArt挑戦してみようと思います

前回作ったアナログ時計について

https://qiita.com/shisojuice/items/370769ecdfb48313ed24

# プロジェクトの作成

Rustで縦横320の無地の画像に用意。

320内におさまるランダムな大きさのランダムな色の円を4つほど書いてみる。

最後に、Base64の文字列を返す。

“`rust:lib.rs

// 省略

#[wasm_bindgen]
pub fn trick_png() -> String{
let mut img = DynamicImage::new_rgba8(320,320);
// 円の中心座標
let center_x = img.width() / 2;
let center_y = img.height() / 2;
let mut rng = rand::thread_rng();
for _i in 0..=

【Laravel】ajaxで非同期処理

## やりたいこと
Laravelで作成した記事投稿アプリなどにおいて、ユーザーが記事をいいねした際に画面遷移や更新などの同期処理ではなく非同期で反映させたい（ユーザーが一つの記事対していいねできるのは一回までにする）

## Table
likesテーブルのmigration
likeがuserとarticleに紐付き、user,articleとlikesが一対多の関係
“`php
class CreateLikesTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create(‘likes’, function (Blueprint $table) {
$table->increments(‘id’);
$table->integer(‘user_id’)->foreign(‘user_id’)->r

【Spring Boot】thymeleaf + ajaxで非同期処理

## やりたいこと
SNSのようなアプリケーションでユーザーが投稿からコメント削除をした場合に、ajaxでページ遷移や更新を行わず非同期で反映させたい

## Thymeleafの記述
* `meta`タグにCSRF対策トークン埋め込み
* Spring Security使用している場合は設定しないと動かない
“`html


“`
* 必要なjsファイルとjQuery読み込み
“`html


“`

## コメント一覧表示部分
“`show.html RustとWebAssemblyでSvgコンバーター作ってみた

# はじめに

前回FaviconGenerator作成した時にIcon繋がりでSvgのコンバーターも作りたいと思ったので

学習用にRustとWebAssembly使ってSvgコンバーター的なのを作成しようと思います。

前回FaviconGeneratorについて

https://qiita.com/shisojuice/items/2ce43d25ec48c2c36486

# プロジェクトの作成

wasmで画像dataと閾値を受け取り、グレースケール変換と256×256にリサイズする。

ピクセルを走査し、閾値よりも暗い場合は、Pathに描画していく。

最後に、出力結果のSvgのFormatの文字列を返す。

“`rust:lib.rs
// 省略

#[wasm_bindgen]
pub fn image_to_path(image_data: &[u8], threshold: u8) -> String {
let img = image::load_from_memory(image_data).unwrap();
let img = i

SVG を高画質の PNG に変換する方法 – JavaScript を使用して

Web 開発において、**SVG** を**高画質**の**PNG** 形式に変換したい場合があります。

例えば、以下の記事で紹介しているツールを作成する際に、Web ページ上では SVG を小さく表示しますが、ダウンロード時には高画質な PNG 画像として提供したい場合です。

https://qiita.com/shikuno_dev/items/367fffe2ef52c903a6ae

本記事では、JavaScript と Canvas API を使用して SVG 画像を高画質の PNG 画像に変換する方法を紹介します。SVG の基本要素を説明した上で、実装の手順を解説します。

# SVGの基本要素
SVG要素には、いくつかの重要な属性があります。ここでは、`width`、`height`、および `viewBox` について説明します。

## width と height
width と height 属性は、SVG 要素の幅と高さを指定します。これらの値はピクセル単位で指定され、表示される領域のサイズを決定します。

“`xml

今回は例によって圧縮の話題となります。高圧縮率を誇るPPMの中でも特に高速な部類に属するPPMdについて紹介します。開発者はDmitry Shkarin氏。初版から20年以上経過していますが、いまだに現役バリバリの骨董programです。

## PPMDに搭載されている技術

## 接尾辞木
文脈情報を接尾辞木のようなもので管理する事により高速化。多分。

### Secondary Escape Estimation
これは記号数や頻度等の色々な要素から作るhash値によって、似たような連中を寄せ集めてescape確率推定を行います。

### 遺伝法
今までより長い次数の文脈が出てきた場合に、文脈を木として持っている場合ならば、親の情報を子に遺伝させることにより、始めからかなり高い予想性能を持たせます。

## 実装編
“`js:sub
const N1=4,N2=4,N3=4,N4=128+3-1*N1-2*N2-3*N3>>2,
N_INDEXES=N1+N2+N3+N4,UP_FREQ=5,MAX_FREQ=124,
ExpEscape=new Uint8Array(

らくらく便利なlodashの関数を紹介する

## はじめに
[前回の記事](https://qiita.com/course_k/items/7d1b470035c466c30215)に引き続き、便利なlodashの関数を紹介します。

## isEqual
### 概要
オブジェクトや配列などの比較に使用します。
ネストされていても、深い比較をするので、完全に同じものかどうかを判定することができます。

### 基本形
`_.isEqual(value, other)`
#### value, other
比較対象です。オブジェクトや配列、マップなど様々なものを指定できます。

### 使用例
以下のような、更新用フォームがあるとします。

フォームのデータはオブジェクトとして扱い、値の変更がない場合には更新処理を行わないものとします。

ネストされたオブジェクトの場

RustとWebAssemblyでアナログ時計作ってみた

# はじめに

下記でパラパラ文字作った時とほぼ同じ構成で1秒ごとに針進めればアナログ時計できそうと思ったので作ってみる

前回作ったパラパラ文字について

https://qiita.com/shisojuice/items/90c70d8218236e0325b3

# プロジェクトの作成

RustでJavascript側から時分秒を受け取る。

縦横320の無地の画像に半径155かつ太さ2の円と、半径5の円を用意。

次に時針分針秒針を書く。(三角関数忘れたのでGemini1.5proに聞く🤖)

“`
(s as f64 / 60.0): 秒を分で表す（0.0 – 1.0）
*360.0: 分に対する角度を度数法で計算
-90.0: 0秒のときに秒針が12時方向を指すように90度補正

(m as f64 + s as f64/ 60.0): 分に秒による経過分を加算
/60.0: 分を時間で表す（0.0 – 1.0）
*360.0: 時間に対する角度を度数法で計算
-90.0: 0分のときに分針が12時方向を指すように90度補正

(h as f64 % 12.0

JSのEventEmitterについて調べる

# はじめに
MSAを基盤としてサービスを構成するために必要なのはイベント駆動アーキテクチャです。これはイベントを登録し、そのイベントに対する応答を返すことでサービスの結合度を下げることができます。現在制作中のトイプロジェクトでは、エラーハンドリングやロギング処理などをイベントベースで作成していく予定です。

シングルスレッドはプロセス内で1つのスレッドが1つのリクエストのみを処理し、このとき他のリクエストを同時に実行できないため、**シングルスレッドブロッキングモデル**と呼ばれます。Node.jsはシングルスレッドですが、ノンブロッキングモデルであり、クラスタリングを通じてプロセスをフォークしマルチプロセシングを利用することができます。

# イベント駆動とは？
イベントが発生したときに予め指定した作業を実行することを意味します。JavaScriptでは`addEventListener`でアクションを登録し、イベントが発生したときに予め登録したコールバック関数を実行する方式で動作します。

~~~javascript
dom.addEventListener(‘click’, (

フロントエンドでHEIC画像をjpegやpngに変換したい

iPhoneで撮影した画像はHEIC形式になっていますが、HEICだとブラウザで表示することができません。そのため、アップロードされたHEIC画像をブラウザで表示する場合は、jpegやpngに変換する必要があります。
もしフロントエンドで変換をするのであれば、`heic2any`というライブラリをおすすめします。

https://github.com/alexcorvi/heic2any

`heic2any`は、HEIC形式の画像ファイルをJPEG、PNG、GIFなどの画像形式に変換するためのJavaScriptライブラリです。

# 実装例

HEIC画像をjpeg画像に変換するコード例はこちらです。

“`javascript
import fs from ‘fs/promises’;
import heic2any from ‘heic2any’;

// HEICファイルを読み込み、JPEGに変換し、結果をファイルに保存する関数
async function convertHeicToJpeg(inputPath, outputPath) {
try {

RustとWebAssemblyでパラパラ文字作ってみた

# はじめに

下記で電光掲示板ツール作った時とほぼ同じ構成でGifみたいに1文字ずつ画像をパラパラさせてみようとおもいます。

電光掲示板ツールについて

https://qiita.com/shisojuice/items/0bd4663aed0a3152d1f6

# プロジェクトの作成

Rustで文字から画像を生成するために、文字とFontデータ(今回はNotoSansJPを使用)を受け取る。

今回は1文字のみを表示してパラパラさせるので半角、全角をなるべく中央に来るように

scaleやLayout時の座標などを設定する。

(今回はざっくり計算のpaddingで中央に寄せたので、、、

文字によってはずれている、、、)

最後に、Base64の文字列を返す。

“`rust:lib.rs

// 省略

#[wasm_bindgen]
pub fn str_to_png(str:&str,font_data:&[u8]) -> String{
let ch = str.chars().nth(0);
let font = rusttype::Fo

TypeScriptの高度な型システムとReact Hooksの利用

# TypeScriptの高度な型システムとReact Hooksの利用 :beginner:
TypeScriptは、JavaScriptに強力な型システムを追加することで、コードの品質と可読性を向上させることができます。このガイドでは、TypeScriptのいくつかの高度な型システムとReact Hooksを使用する際の具体的な方法について説明します。

## Intersection Types（交差型）
Intersection Typesとは
交差型（Intersection Types）は、複数の型を組み合わせて1つの型にすることができます。これにより、オブジェクトが複数の型のすべてのプロパティを持つことを保証します。

“`typescript
interface Person {
name: string;
}

interface Employee {
employeeId: number;
}

type PersonEmployee = Person & Employee;

const john: PersonEmployee = {

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名 > 任意のタグ名)`とか
`$tags(任意のclass名 > 任意のタグ名)`とか変数名はお好きに
:::

以上。

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

– [html5：audio・

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

## はじめに
いきなりですが、以下のコードを読んで違和感を感じませんか？
ちょっとでも「ん？？😕」と思った方はこちらの記事を読んでいただけると嬉しいです🎉
“`typescript
const text: string = ‘example’
if (text === undefined){
return
}
“`
厳密等価演算子を使ったstring型とundefind型の比較で、コンパイルは通ったのですが違和感がありました。
簡単な例ですが、発見があったのでまとめます。

先に結論を書きます。

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

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…..と書いていては、最終的にコードが長くなっていって、タイプミスもするし、大変になってくるので、値を取得したコード達をそれぞれ定数宣言し、コンパクトにまとめる。とのことで