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

JavaScriptのreduce関数を理解する

## reduce関数とは
`reduce`関数は、配列の各要素に対して**累積的な計算**を行い、単一の値に**畳み込む**(=reduce)ための関数。つまり、配列全体を１つの値にまとめあげるための関数。

## 基本的な構文
“`javascript
array.reduce((accumulator, currentValue, currentIndex, array) => {
//処理
}, initialValue);
“`
### 各パラメータの意味
– `accumulator`: 前回の`reduce`の実行結果が保持される値。初回は`initialValue`が入る。
– `currentValue`: 現在処理中の配列の要素。
– `currentIndex`: 現在処理中の配列のインデックス。(省略可)
– `array`: `reduce`が実行されている配列。(省略可)
– `initialValue`: `accumulator`の初期値。省略すると配列の最初の要素が使用され、`currentValue`は２番目の要素から始まる。

## 使

p5.js を使った驚くほど短いシェーダーのコード

### ショートストーリー: 「驚くほど短いコードの魔法」
東京の喧騒が少し落ち着いた夕方、プログラマーの悠斗（ゆうと）はコーヒーを片手に、自宅のデスクに向かっていた。彼は新しいウェブアプリの開発に夢中で、特に最近興味を持っていたのはシェーダーという特殊なプログラミング技術だった。映像に豊かな表現力を加えられるこの技術を、どうにかして簡単に扱えないかと試行錯誤していた。

「シェーダーって、すごく難しいんだよな…もっとシンプルにできたらいいのに。」


悠斗はデスクトップに散らばった複雑なシェーダーコードを見ながら溜息をついた。そのとき、彼の頭に浮かんだのは、最近触り始めたp5.jsというJavaScriptのライブラリだった。

「p5.jsなら、もっとシンプルに書けるかも？」

試しに、彼はエディタを開き、p5.jsを使った

ユーザーが入力した単語に最も類似するWikipediaカテゴリを推定するシステム。


概要
本プロジェクトでは、TensorFlow.jsとUniversal Sentence Encoderを使用して、ユーザーが入力した単語とWikipediaのカテゴリに相当する100個の単語との類似度を計算し、その結果に基づいて最も近いカテゴリを推定するシステムを構築しました。本システムは、コサイン類似度を用いて単語の埋め込みベクトル間の距離を測定し、上位5つのカテゴリをユーザーに提示する機能を備えています。

背景
近年、自然言語処理（NLP）における単語や文の意味をベクトル空間に埋め込む技術が進化しており、特にUniversal Sentence Encoder (USE) は、文単位での意味表現を高精度にベクトル化することで、さまざまなNLPタスクで広く利用されています【1】。本プロジェ

Leafletで図形やラインを表示させる

# はじめに

こんにちは、開発部の一筒です！
前回のLeaflet.jsの記事に続き、今回は図形やラインの表示方法を紹介したいと思います！


前回はマーカーの表示についてご紹介しました：

https://qiita.com/hatsukaze/items/3d708b3323d611dc5725

# まず地図を用意

前回と同様に、OpenStreetMapとLeafletの利用に必要なCSSファイル、JavaScriptファイルをダウンロードまたはCDNから取得し、マップを表示します。(前回と同じなので省略してます)

“`javascript:マップの表示
// Leafletを使用して地図を初期化　初期の中心座標とズームレベルを指定
var map = L.map(‘map’, {
center: [34.693

プログラマー畑から見たPower Automate for Desktop基礎

# はじめに
IT未経験者に PAD (Power Automate for Desktop)を教えるにあたって、システム開発と同じノリでやったら引っかかった点をまとめてみました。

# ノーコード開発とRPAは違う
ほぼここに集約されます。Power AutomateはあくまでもRPAです。システム開発ではなく、システムの自動化です。条件分岐でやら繰り返し処理やらが最小限出てきて、ちょいちょいプログラミング言語の気配を出してきますので勘違いしないようにしましょう。
できる限りPowerAutomateでは、”順番にシステムを起動させる” & “最小限操作でのデータ移動”だけにしましょう。

# 変数の宣言がない
設定はあっても宣言はないです。変数の設定はただの代入です。
宣言しなくてもいきなり使えます。宣言の為に1アクション使うのは無駄です。

# 変数の型が変幻自在
数値型にテキスト型を入れたらそれ以降テキスト型になります。テキストを数値に変換してもとの変数に戻せます。気持ち悪いですけど、型の維持より意味の維持に注力して、変数の絶対数を減らした方がフローはわかりやすいと思います。

javascript(js)のループ処理(for文)で同期処理を行う

“`js
async function func() {
const results = []
for await (let item of array) {
const result = await promissProc(item)
results.push(result)
}
}
“`

AbortController APIについて

### これは備忘録
こちらは私のアウトプット用の備忘録ですので、内容が正確なものである保証はできません！

### AbortController APIとは
主にfetch処理を中断したりする際に使用するWebAPIのことらしいです。
例えば、ユーザーが検索条件を変更する度にデータを取得するfetchが実行されているというのは非効率なため、fetchが実行されて完了する前に次のfetchが飛んできた場合、前回のfetchを中断することができるらしい。

### そもそもWebAPIってなんでしょうか
まずAPIとはApplication Programming Interfaceの頭文字をとったもの。APIとは、アプリケーションやプログラムなどをつなぐ接点（インターフェース）のことを指すらしい。
APIを活用することによって、外部からその機能やデータを利用できたりするのでより効率的に開発を進めることができたりするらしい。また、APIを提供する側にとっては、より広く自分たちの情報を提供や、多くのサービス利用につながるので有益らしいです。なるほど。

### 話を戻してAbortCon

JavaScriptとp5.jsライブラリを用いて、Perlinノイズに基づく動的な3次元地形アニメーション。




### 概要 Perlinノイズを使った3D地形
本研究では、JavaScriptとp5.jsライブラリを用いて、Pe

p5.jsを用いた大規模な3D地形ビジュアライゼーションシステム。




### 大規模3D地形ビジュアライゼーションシステムの設計と実装
1. はじめに
コンピュータグラフィックスにおける地

JavaScriptのcallメソッドについて勉強してみた

タイトルの通り、JavaScriptのcallメソッドについて学んでみました。

以下、MDNからの引用です。

> call() はあるオブジェクトに所属する関数やメソッドを、別なオブジェクトに割り当てて呼び出すことができます。
参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call

これだけだとわかりづらいので、filterメソッドを例を挙げてみます。

filterメソッドは、対象の配列の各要素に対してコールバック関数を実行し、条件を満たす（コールバック関数がtrueを返す）要素だけを抽出した新しい配列を返します。

通常、このfilterメソッドは配列にしか使用できません。

例えば、querySelectorAll() メソッドで取得したNodeListに対して、filterメソッドやmapメソッドなどを使用することはできません。NodeListに対してforEachやlengthは使うことができますが、配列に使用できるメソッドをNodeLi

【jQuery】 DataTablesでnullとrenderオプションを使って、複数のフィールドの値を組み合わせて表示する方法

# 概要
jQueryのDataTablesの`render`オプションを使用して、複数のフィールドを連携して表示するよう実装しました。使い方について説明します。

# サンプルコード
以下のように`render`関数を使用して、`condition1`、`condition2`、`condition3`の値を連結して表示することができます。
`data`にはバックエンド側からデータが連携される前提です（私はdjangoを利用しました）。

“`js
$(document).ready(function () {
var RenderTable = function (data) {
var table = $(‘#sample_table’).DataTable({
“language”: {
“url”: “//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Japanese.json”
},
// 略

javascriptでforループっぽいのがたくさんあるのでそれぞれのメリデメを調査した

JavaScriptで配列をループする方法は多数ありますが、どれがどういうメリットがあるのかよくわからなかったので、調査してみました。
一般的に以下の3つがよく使われ、それぞれにメリットがあります。
用途やシチュエーションによって使い分けるのがおすすめです。

### 1. **`forEach`**
配列の要素を一つ一つ処理するのに最も一般的です。
“`javascript
const array = [1, 2, 3, 4];
array.forEach((element, i) => {
console.log(element, i);
});
“`
**メリット**:
– シンプルで直感的。
– コールバック内で要素に対して処理を簡単に書ける。
– インデックスが使える。

**デメリット**:
– `return`で処理を途中で止められない（途中でループを抜けたい場合は他の方法が必要）。

### 2. **`for…of`**
モダンで直感的な配列のループ方法。`forEa

７行テトリスをMonicaを使って分解してみるテスト

# ７行テトリスをMonicaを使って分解してみる

“`javascript:7_line_tetris.html