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

JavaScript初心者が実装！お助けボタンでスムーズにマンダラチャートを作成したい！

# マンダラチャートとは
某二刀流メジャーリーガーが高校時代、目標を達成するために作成していたことで有名ですが、添付画像のように9×9マスで、以下のように構成されています。

* 中央のマス：メインの目標やテーマを記入する
* 周囲の8つのマス：中央の目標に対するサブゴールや要素を記入する
* 更に外側の8つの区画：各サブゴールなどについて、さらに詳細な要素やアクションを記入する

# 意外と埋まらない、、、
マンダラチャートを作成したことがある人はわかるかもしれませんが、意外と関連する内容が浮かばず、マスが埋まらなかったりします。

そこで、お助けボタンを各区画の中央マスに配置し、そのボタンを押すと、関連する単語リストが表示されるようにしました。

スタックオーバーフローが発生しない非同期再帰関数

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

## はじめに

[ky](https://github.com/sindresorhus/ky)のソースコードを読んでいるときに、以下の非同期再帰関数でスタックオーバーフローが発生しない理由を言語化できなかったので調べてみました。

“`javascript
// https://github.com/sindresorhus/ky/blob/v1.4.0/source/core/Ky.ts#L330
new globalThis.ReadableStream({
async start(controller) {
const reader = response.body!.getReader();
if (onDownloadProgress) {
onDownloadProgr

Ajax リクエストを投げる[JavaScript]

どのようにJavaScriptからリクエストが投げられるのかを考えてみたいと思います。
リクエストは色々なタイミングで発生します。

例：
・リンクをクリック
・URLに入力してエンターを押した時
・再読み込みボタンをクリック

JavaScriptからリクエストを作成することもできます。その方法として「AJAX」があります。

AJAX（Asynchronous JavaScript and XML）

AJAXを使うことで、Webページを再読み込みせずに裏側で情報を送受信できます。
これにより、ユーザー体験が向上します。

以前だと、ページを再読み込みしたり、違うページに移動しなければならなかったことが、同じページにいながらにして裏側の情報を取得できるようになりました.

今回は、AJAXについてと、JavaScriptでリクエストを投げる方法などについてまとめていきます。

## 目次：

– [API入門](#api入門)
– [JSON](#json)
– [HTTPのリクエストについて](#httpのリクエストについて)
– [HTTPステータスコード](#httpステータ

JavaScript入門 #最初の一歩

## 初めに

フロント開発をするようになりHTMLとCSSを一口かじった時点でJavaScriptの存在を知り学ぶ必要があったので初心者ながら学んだことを記事にしていきたいと思います！

書籍を用いて学んでいる余裕はなかったので今回は以下のサイトのチュートリアルを用いて学んでいますので初心者の方がいらっしゃったらご参考までに！

https://ja.javascript.info/

> ただ、筆者の頭の中でいまいち体系的にまとめきれておらず、単語帳のような構成になっている部分がありますのでご了承ください。

## JavaScriptとは


JavaScriptは、ウェブページに複雑な機能を実装することを可能にするプログラミング言語（スクリプト）です。動的に更新されるコンテンツを作成したり、マルチメディアを制御したり、画像をアニ

とにかくAngular x Jest でユニットテストを書くための覚書

Angularのユニットテストの書きはじめとして、コンポーネント表示時に特定のサービスのDIをして、非同期処理（API通信など）を得た結果、意図した表示になっているかを確認できるようなテストコードを書けるようになっておきたかったので方法を調べてみました。

なお、今回はテストランナーとしてJestを採用しています。
Jestの導入方法は以下を参考にセットアップしています。

現在Angularチームの方でもテストランナーとしてJestを使えるような取り組みを進行中のようです。
未確認ではありますが、以下に記載している方法でも同様の結果が得られるかと思います。

https://blog.angular.dev/moving-angular-cli-to-jest-and-web-test-runner-ef85ef69ceca

# プロジェクトの作成

`ng new` している際に `–standalone` オプションを付けて、今後作成されるコンポ

Node.jsってナンダ？JavaScriptってナンダ？

JavaScriptを使う時に絶対聞くこいつ

Node.jsについてしっかり理解していますか？

**なんかReact,Vue.js,Next.jsで出てくるなあ**

と思っている方…その通りです．

**サーバーサイドのJavaScriptだよね**

ほぼ正解です．

とりあえず

**Javascriptで書くんじゃないの？**

これが共通認識でしょう．

# そもそもJavaScriptってナンダ？
そもそもjavascriptとはブラウザで動くことを想定とした言語である．一方PythonやJavaなどいわゆる`一般的な`言語はPCのOS機能にアクセスできる．

:::note info
ブラウザで動く，とはPCのローカル上にアクセスせず，ChromeやSafari,Firefo

SheetJS(xlsx)を安全に使う方法

### はじめに
NodeJSでExcelファイル(xlsx)の読み書きを行うためのライブラリのうち、一番人気[^1]だと思われるSheetJS(xlsx)を安全に使う方法を解説します。

他のnpmで公開されているライブラリのように `npm install` でインストール可能ですが、脆弱性が見つかっているバージョンがインストールされてしまいます。

“`
➜ npm install xlsx

added 9 packages in 735ms
“`
“`
❯ npm list
sheetjs@ /Users/arikawa/Documents/git/sheetjs
└── xlsx@0.18.5
“`
“`
➜ npm audit
# npm audit report

xlsx *
Severity: high
Prototype Pollution in sheetJS – https://github.com/advisories/GHSA-4r6h-8v6p-xvw6
SheetJS Regular Expression Denial of Service

HERE Maps API for JavaScriptでマルチポリゴンを表示させるときのtips

以前 ↓ の記事を書いたときポリゴンの表示ができたーと喜んでいたのですが、改めて見たらポリゴンの色がfillColorに指定した`rgba(255, 0, 0, 0.3)`になってない！と気づいたので、訂正と反省を兼ねてマルチポリゴンを描画するときのdisableLegacyModeの大事さについて書きます。
結論を書いてしまうと、HERE Maps API for JavaScriptでマルチポリゴンのGeoJSONを読み込んで表示するならdisableLegacyModeを有効にしましょう、です。

https://qiita.com/4gou/items/76207ebde9f2816c682f

前の記事ではポリゴン表示の部分はこんな感じで書きました。（今は訂正してあります）
“` js
// H.data.geojson.ReaderでURLのGeoJSONを読み込む
const reader = new H.data.geojson.Reader(url, {
style: function (mapObject) {
if (mapObject instan

【React】{} と {{}} の違いってなに (　ﾟдﾟ)？

## 背景
reactを勉強し始めて、たまに見る`{{}}` ってなに？
`{}` ではいかんのか？

たとえば、`context`で `provider`の`value`をセットする時とか…
“`jsx
const [tasks, setTasks] = useState([]);
return (

{children}

);
“`

インラインスタイルを適用する時とか
“`jsx
const App = () => (

Hello World

);
“`

これは一体…`{}` とはどう違うのか???
と疑問に思ったことがあったので、学習のために残そうと思いました。

## 違い
**外側の{}はJavaScript として解釈さ

【Figma Plugins】Figma PluginsにWebpackを導入する

## はじめに

FigmaのPluginを開発する際、Figma PluginsにWebpackを導入したいと思ったことはありますか？
この記事では、Figma PluginsにWebpackを導入する方法を解説します。

## Figma PluginsにWebpackを導入する
Webpackは複数のJavaScriptファイルをパッケージ化するモジュールバンドラです。
Webpackを導入するには、以下の手順で行います。

1. Webpackをインストールする
1. WebpackでTypescriptをセットアップする

### 1. Webpackをインストールする
#### 1-1. npm をインストールする
まずは、ターミナルで以下のコマンドを入力します。

“`console.
npm install
“`

####

[JavaScript] Setオブジェクトの新しいメソッドを紹介するよ

# 🐣 はじめに
JavascriptのSetオブジェクトに新たなメソッドが追加され、主要なブラウザーエンジンで利用できるようになったので今回はこれらのメソッドについて調査したものを紹介してみようと思います。

Setオブジェクトの基本的な使い方については [「setオブジェクト」の検索結果 \- Qiita](https://qiita.com/search?q=set%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88) をご参照ください。

# 🆕 Set メソッドの新機能について
クロスブラウザサポートを備えた新しいメソッドの要点は以下の通りです。

|メソッド名| 説明| 返り値 |
|—|—|—|
| `union()` | このセットと指定されたセット内のすべての要素を含む新しいセットを返します。 | Setオブジェクト |
| `intersection()` | このセットと指定されたセットの両方の要素を含む新しいセットを返します。 | Setオブジェクト |
| `difference()` |

JSにおいて関数はオブジェクト扱いされる

## 前提
筆者はJSにはあまり精通しておらず、pythonが少し分かる程度（for文とかif文、関数）。

今回はx,y,zの和を出力する関数で気づいたことを共有。

## JSで最初に書いたもの

“`javascript:fomula.js
const answer = ({x, y, z}) => {
return x + y + z;
};

answer(3, 4, 5);
console.log(answer);

//出力結果
(x, y, z) => {
return x + y + z;
}
“`

あれ？しっかり引数も渡してるしなぜ、answerが12にならないのか分からない。
出力結果が文字列な時点で、何かおかしい。JavaScriptにおける関数の扱い方を調べてみた。

## 結果
https://jsprimer.net/basic/function-declaration/

このサイトから、JavaScriptでは関数はオブジェクト扱いされることが分かった。つ

クロスオリジンリソース共有（CORS）とは？+AWS ソリューションアーキテクトに求められる観点

## はじめに
AWSの資格を全て取得しました。勉強している時に、良く出てくるけど、詳しくはよくわかっていなかった **クロスオリジンリソース共有（CORS）** について、調べてみました。まず、AWSの公式サイトに記載されている内容をおさらいし、アーキテクトに求められる観点を提示し、仕組みについて理解を深めていきたいと思います。

## クロスオリジンリソース共有が重要なのはなぜですか?
インターネット技術がまだ新しかった時代では、**クロスサイトリクエストフォージェリ (CSRF) の問題**がありました。これらの問題では、被害者のブラウザから別のアプリケーションに偽のクライアントリクエストが送信されていました。

たとえば、被害者が銀行のアプリケーションにログインしたとします。その後、だまされて新しいブラウザタブに外部ウェブサイトを読み込まされたとします。そして、その外部ウェブサイトは被害者のクッキー認証情報を使用して、被害者に**なりすまして**データを銀行のアプリケーションに中継するのです。結果として、権限のないユーザーが銀行のアプリケーションに**意図せずアクセスする**よ

xsltテンプレート内でxmlを値をjavascriptの変数に入れる方法

個人的「質はともかく継続する」20日目です
すごくニッチな技術です。

# xsltテンプレート内でxmlを値をjavascriptの変数に入れる方法

“`js
var items = ‘;’
“`

これだけです。
意外とハマりました。

ブラウザJavaScriptだけで、CGI掲示板ぽいやつを作る

# これはもしかしたら、ジョークプログラムかも、とお思いの皆さん・

– ご明察。
– JavaScript初心者が、Geminiくんに聞いて、JavaScriptで掲示板作って、と頼んだら作ってくれたものですね。
– （そのあと、JavaScript初心者が6時間ぐらい掛けて仕上げたものです。短いですが）

# 思い付きの発端

– GitHub Pagesに、掲示板CGIを設置したいけど、PerlもPHPも動かないよね。
– FC2とかの掲示板を借りるのはしゃくだよね。
– だったら、いっそのこと、Static HTMLとJavaScriptだけで掲示板って、作れないですかね～？

# やってみた。

– ギッハブに上げるほどでもないので、ソースを貼り付け
– （ちなみに、骨格は全部Geminiくんが書いてくれました）

“` index.html




主要なAPI一覧と概要+AWS ソリューションアーキテクトに求められる観点

## はじめに
__APIって何？__ 初めて言葉を聞いた時、アプリケーションをつなぐ窓口のようなものだよと説明されて、わかったようなわからないような __もやもや__ したまま、なんとなくわかった気になっていました。AWS資格を全て取得し、実務経験もそこそこに積んだので、説明が出来ないと恥ずかしいと考えて、主要なAPI一覧と概要を整理しました。あわせて、AWSソリューションアーキテクトとして、求められる観点を記載致しました。

## AWS ソリューションアーキテクトに求められる観点
・AWS Lambda 関数上で実行されるアプリケーションを構築したい。
・複数の顧客がこのアプリケーションを使用する。
・各顧客に特定の期間のリクエストの割り当てを与えたい。
・クォータは顧客の使用パターンと一致する必要がある。
__これらの要件を満たすソリューションは?__

__ソリューション例__
Lambda 関数を呼び出すためのプロキシ統合を使用して Amazon API Gateway REST API を作成する。顧客毎に、適切なリクエスト割り当てを含む API ゲートウェイの使用計画を

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