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

Viteで始めるLeafletを使った地図アプリ開発：町丁目ポリゴンの表示実践編

## 概要説明
Viteを利用してアプリケーションのテンプレートを作成します。その後にLeafletを使って地図の表示から町丁目ポリゴンの表示まで行います。
Node.jsはインストール済みの想定となります。

## 使用したもの
### Vite

Viteとは2020年に発表されたフロントエンドのビルドツールで、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。

https://ja.vitejs.dev/

### leaflet
比較的軽量なオープンソースのJavaScript地図ライブラリです。

https://leafletjs.com/

### 町丁目ポリゴン
町丁目とは行政界の一つで「富士見町3丁目」「広尾1丁目」など「●丁目」で表わされる行政区画のことです。行政界は他には都道府県や市区町村、大字などがあります。
町丁目ポリゴンとは町丁目の境界データであり、e-stat で 小地域（町丁・字等別）という名称で公開されています。

今回使用する町丁目ポリゴンは、TerraMap API からレスポンスされたG

【JavaScript】クラスの継承

# 継承とは
>クラスの継承は、あるクラスが別のクラスを拡張するための方法です。
つまり、既存の機能の上に、新たな機能を作ることができます。

# 継承前
“`ドラえもんクラス.js
class Doraemon {
constructor() {
this.name = ‘ドラえもん’;
}

walk() {
alert(`${this.name}は歩く`);
}
}

const doraemon = new Doraemon();
doraemon.walk(); // ドラえもんは歩く
“`

“`ドラみクラス.js
class Dorami {
constructor() {
this.name = ‘ドラみ’;
}

walk() {
alert(`${this.name}は歩く`);
alert(‘気分が良くなる’);
}
}

const dorami = new Dorami();
dorami.walk(); /

React19のformアクション機能の魅力

## はじめに
React19では、新たに`

`の形式で、フォームアクションが追加されました
これにより、フォームの送信時に非同期関数を直接呼び出せるようになり、よりシンプルなコードが書けるようになります
本記事では、この新機能の使い方とその利便性について詳しく解説します
また、この新機能`useFormStatus`というフォームの送信中の状態を取得するフックも追加されてより利便性が向上しました

## formアクションの使用
以下の例では、フォーム送信時に`handleSubmit`関数が非同期に呼び出されます

### React19の実装例
“`jsx
import { useState } from ‘react’;
import { useFormStatus } from ‘react-dom’;

async function handleSubmit(formData) {
const response = await fetch(‘/api/submit’, {
method: ‘POST’,
body

RustとWebAssemblyでAsciiアート生成ツール作ってみた

# はじめに

無料個人非商用版があるRustIDE「RustRover」が正式リリースされたついでに、以前から触ってみたかったRustを学習していきたいと思います。

なんとなくですが、学習用にRustとWebAssembly使ってAsciiアートGenerator的なのを作成しようと思います。

RustRoverについて

https://blog.jetbrains.com/ja/rust/2024/05/28/rustrover-is-released-and-includes-a-free-non-commercial-option/

# プロジェクトの作成

wasm-packのテンプレートを作成。


buildのtargetをwebにする。

![Ru

【React】Material UIを使った一番シンプルなサイドバー実装

# はじめに
本記事では下記のようなシンプルなサイドバーを作成することを目的とします。


なお、レスポンシブルデザインにも対応するためにMaterial UIを活用します。
「サイドバー　作り方」の検索で出てくる記事・動画だと意外と実践的な内容が少ないため、参考になるかと思います。

# 作り方の全体像
### フォルダ構成
Sidebar.jsとSidebarData.jsの二つのファイルを作成します。

Sidebar.jsではレスポンシブルなサイドバーの見た目を実装し、SidebarData.j

Canvasでグリッチアニメーション

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

# :loudspeaker: はじめに

Canvasでもグリッチアニメーションがしたい！ということで、この記事ではCanvas上でのグリッチアニメーションの実装を解説します。

グリッチアニメーションもといグリッチエフェクトとは、意図的にノイズや歪みを加え、エラーやバグのような視覚効果を再現したものです。元々はCG分野で使用されていましたが、現在ではWebデザインにも利用されています。

Web上でグリッチエフェクトを表示する方法にはCSSやSVGを使用した例がたくさんありますが、Canvasを使うことでさらに細かい制御や複雑なアニメーションを実装できます。Canvasはピクセル単位で操作が可能で、自由度が高く、シンプルなAPIにより実装に集中できます。これによりグラフィック操作や描画アルゴリズムについてよく学

サーバーサイドTypeScriptでも、非同期処理を使わないという選択肢が必要なのではないか

私は[Accel Record](https://www.npmjs.com/package/accel-record)というTypeScript用ORMライブラリを開発しています。
Accel Recordは他のTypeScript/JavaScript用ORMライブラリとは異なり、非同期APIではなく同期APIを採用することにしました。

ORMのインターフェースを検討する過程で、非同期APIと同期APIについて利点や欠点を比較することとなりました。この記事ではそれらについて整理し、サーバーサイドTypeScriptでも、非同期処理を使わず同期処理で開発できるという選択肢が必要なのではないかという考えについて述べたいと思います。

## TypeScript/JavaScriptの非同期処理とは？

サーバーサイドでJavaScriptを実行する場合、Node.jsを利用することが多いです。
Node.jsはシングルスレッドで動作する非同期I/Oモデルを採用しており、アプリケーションの実装を非同期処理で行うことが一般的です。

非同期処理の書き方は歴史的にも変遷してきましたが、現在

【JavaScript】ストレス社会から逃れグラデーションの変化をずっと見ていたいあなたにおくるランダム生成した背景色のグラデーションをスムースに切り替えるスクリプト

## なんでもグラデーションがかっこいい！

私はウェブページで大事なのは配色だと思っています。

特にランダムで指定した色の組み合わせが偶然作り出すかっこいい組み合わせのグラデーションが好きです。

だからグラデーションの背景色をスムースに切り替えるスクリプトを作りました。

## グラデーションをずっと見ていると落ち着く

気分がリラックスできて落ち着くことができる自然なグラデーション変化が楽しめるスクリプトはこちらです。

“`html