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

生年月日から年齢を計算する方法を各プログラミング言語で書いてみた

# はじめに

プログラミングでよくあるタスクの一つに、生年月日から年齢を計算することがあります。今回は、各プログラミング言語でこのタスクを1行で実装してみました。どの言語でも、標準ライブラリを活用すれば簡単に計算できます。

## Python
“`python
age = (datetime.datetime.now() – datetime.datetime(1984, 8, 21)).days // 365
“`
Pythonでは、`datetime`モジュールを使い、現在の日付と生年月日との差を日数で計算し、年数に換算しています。

## JavaScript
“`javascript
const age = Math.floor((new Date() – new Date(‘1984-08-21’)) / (365.25 * 24 * 60 * 60 * 1000));
“`
JavaScriptでは、`Date`オブジェクトを利用して、生年月日と現在の日付の差をミリ秒で計算し、年数に換算しています。

## Ruby
“`ruby
age = ((Time.

Lodashでkintoneを意識しつつデータを操作する

# lodash

https://www.npmjs.com/package/lodash

lodashはJavScriptのユーティリティーライブラリです。kintoneカスタマイズでは大変便利なライブラリです。
“_”がグローバルオブジェクトで出てきたときは、lodashが利用されています。

# _.isEmpty(str)
kintone開発ではおそらく一番利用される関数です。これは値の空を確認する関数で、フィールドに値が存在するかどうかを検査するときにつかいます。

“`javascript
const dropdownValue = ev.record.ドロップダウン.value;
if(_.isEmpty(dropdownValue)){
ev.record.文字列一行.value = dropdownValue
}
“`

_.isEmptyで書かない場合は以下のように書く必要があります。

“`javascript
null != dropdownValue || ” != drowdownValue
“`
👇kintoneのドキュメントからの

同期処理と非同期処理

## 同期処理（Synchronous）

同期処理は、あるタスクが完了するまで次のタスクに進めない処理のことです。

### 特徴

– **順番に実行**：タスクは順番に実行され、前のタスクが完了しないと次のタスクは開始されない
– **シンプル**：処理の流れが分かりやすく、デバッグが容易
– **ブロッキング**：処理が完了するまで他の処理がブロックされる

### 例

– 料理：鍋に水を入れ、火をつけて沸騰させる。水が沸騰するまで次の作業に進めない
– プログラム：計算結果を得るために、計算処理が完了するまで次の処理に進めない

## 非同期処理（Asynchronous）

非同期処理は、あるタスクを開始した後、その完了を待たずに次のタスクに進める処理のことです。

### 特徴

– **並行実行**：複数のタスクを並行して実行できる
– **応答性**：ユーザーからの入力にすぐに反応できる
– **複雑**：処理の流れが複雑になり、デバッグが難しくなる場合もある

### 例

– 料理：鍋に水を入れ、火をつける。水が沸騰している間に、野菜を切るなどの別の作業を行う

＃36　クイックソートをCanvasを用いて可視化してみた

# 概要
普段からよくソートを使っているので動きを理解するためにHTML+Canvasを用いて可視化をしてみました

# クイックソートの実装
## クイックソートの概要
クイックソートとは、とある基準値よりも大きい値の配列と小さい値の配列に分割してそれを再帰的に適用することで並び替えを行うアルゴリズムです。高速なソートアルゴリズムとして知られています

1) 適当な基準値を決めます(※1)
2) 配列を基準値より小さい値の配列と大きい値の配列に分割します(※2)
3) 分割できなくなるまで1～2を繰り返します
4) 分割できなくなったら配列を結合します

* ※1 中央値を基準値として扱えると効率の面で最適ですが、今回の記事は配列の先頭の値を基準値として扱います
* ※2 今回は視覚化を目的とするため配列は分割せずに実装します

## 実装
TypeScriptでソート関数を以下のように実装しました。

* array T[] ソート対象の配列
* compareFunction: (a: T, b: T) => boolean 比較用の関数
* option
* start?:

＃34　Unraveling Asynchronous Programming: Why, What, and How

## Introduction

In today’s fast-paced digital age, we often expect our devides and applications to perform seamlessly, reacting instantaneously to our inputs, even when managing multiple tasks. Imagine typing into a search bar and waiting miniutes, or even seconds, for auto-suggestions to appear. It would feel painfully slow, wouldn’t it? This seamless performance is largely achieved thanks to the magic of asynchronous programming and the effective management of concurrent tasks.

Modern c

そろそろ大分ブラウザで使える様になった import attributes の話 (もしくは import … with {type:json / css} の話)

そろそろ使えそうな import attributes は現状 caniuse で次の様な状態となります。 主要だと firefox だけダメみたいですね。

https://caniuse.com/mdn-javascript_statements_import_import_attributes

# で、 import attribute って何なの？

## プロポーザル

https://github.com/tc39/proposal-import-attributes

## MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with

## 具体例

具体的に言うと次の様な構文です。 type は css

【WebGL2】3DモデルをBlenderで編集して、自分のWebアプリに表示する

## やりたいこと
「右腕のみの3Dモデルをライブラリを使わずに自分のWebアプリに表示させる」です。
この手のことをググると、THREE.js の記事ばかり出てきます。
本記事はTHREE.jsは使いません。使うのは WebGL2 のみです。
お手軽にやりたい場合は、THREE.js を使ってください。

## 前提知識
WebGL2, Blender の両方を少し触ったことがある人を対象としています。

## 3Dモデル
今回使用する3Dモデルは、CC Character Base – Free 3D Character Modelです。
ボーンがすでに仕込まれています。
こちらは個人的な使用と商業的な使用の両方に利用できます。

## Blenderにインポート
Blenderのバージョンは4.2です。ちなみに3.6,4.1でも大丈夫なことを確認しております。
C:\blender\download\CC_c

雲が生成され雨が降るゲーム。



### パーティクルが徐々に上昇し、一定の高度に達すると重力で落下します。つまり、雲が生成されて雨が降るシミュレーションです。

“`python
import os
import webbrowser
from http.server import SimpleHTTPRequestHandler, HTTPServer
import threading

# HTMLコードを生成
html_cont

JavaScript配列操作についての演習問題

## はじめに
勉強会向けに用意したJavaScript配列操作についての演習問題です．
ターゲットが狭いので体系的学習をしている人には向かない可能性がありますが，ご了承ください．

## 解答例についての注意事項
各問題は独立していません．前の問題の答えを使うものがあります．解答例は前の問題の解答例のプログラムがある前提で書きました．1問の解答例だけをコピペしても動かない可能性があります．動かない場合は前の問題の回答例を適宜コピペしてください．

## 問題
### 1. 0から99までの連番配列をつくる

### 2. この配列を使って総和を求める

### 3. キーとしてnumber, isPrime, isEven, divisorCountを持つオブジェクトの配列を作る（以下の関数を使用しても良い）
“`javascript
const isPrime = (num) => {
for (let i = 2; i < num; i++) { if (num % i === 0) return false; } return num

高性能キューの実現 – Elegant Queueライブラリ

## 概要

JavaScript や TypeScript では、配列がキューの実装に頻繁に使用されます。組み込みの `shift()` メソッドは、ゼロ番目のインデックスにある要素を削除し、残りの要素を下にシフトしますが、これは要素の再インデックス化が必要なため O(n) の時間計算量を持ちます。

### サーキュラーバッファの利点

特に大規模なデータセットを扱う場合にキュー操作を最適化するために、サーキュラーバッファは非常に効果的なソリューションです。サーキュラーバッファは固定サイズの配列で要素を管理し、ラップすることで `enqueue` と `dequeue` 操作を O(1) の時間計算量で実行することができます。

**主な利点:**

– **メモリ効率:** サーキュラーバッファは固定サイズの配列を使用し、ラップすることで、サイズ変更の必要がなく、メモリオーバーヘッドを最小限に抑えます。
– **一貫した O(1) のパフォーマンス:** 操作が一定の時間内で完了し、配列のサイズ変更やシフトによるパフォーマンスの低下を避けることができます。
– **メモリ断片化の

【JavaScript】ABC367解説（A〜D）

AtCoder Beginner Contest 367
https://atcoder.jp/contests/abc367

A~Dの4完（96分）でした。
1017perfでレートは666->708（+42）に。
最近1000前後のパフォが安定してきてるので、さくっと入緑できそうです。
本記事ではコンテスト期間中に提出したA~DのACコードを貼っておきます。

# A – Shout Everyday
https://atcoder.jp/contests/abc367/tasks/abc367_a

起床時間と就寝時間の間にたこ焼きへの愛を叫ぶことができるか判定する。
ただし、起床時間よりも就寝時間とたこ焼きへの愛を叫ぶ時間が早い場合は24時間をあらかじめ足しておく。
（例：18時起床、4時就寝、9時叫ぶ→18時起床、28時就寝、33時叫ぶ。18時から28時までの間にたこ焼きへの愛を叫ぶことができないので”No”を出力する）

“`js
function Main(input) {
input = input.split(“\n”).map((line) => line.

[JavaScript] [Jest] インスタンスを用いたテストコード

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# 活用例1
## テスト対象クラス
– クラス: `Person`
– プロパティ: `name`（名前を格納する文字列）、`age`（年齢を格納する数値）
– メソッド: `greet()`（挨拶のメッセージを返す）
~~~ts:person.ts
class Person {
constructor(public name: string, public age: number) {}

greet(): string {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
~~~
または（上記は**可読性が高い**、下記は**冗長**とされる）
~~~ts:person.ts
class Person {
public name: string;

【paiza×Qiita】JavaScriptで最小文字数で解答する【Dランク編】

# はじめに
こちらの[paiza×Qiita記事投稿キャンペーン](https://qiita.com/official-events/9ab96aa95d62fe3cbdd7)のDランク問題を、コードゴルフの要領で最小文字数で解答することを目指しました。
言語はJavaScriptです。

# 多分これが一番短いと思います
## 文字の一致

“`js
process.stdin.some(i=>{[a,b]=(i+””).split`
`;console.log(a==b?”OK”:”NG”)})
“`

74文字

分割代入を使うことで文字数を削れました。

## 一番小さい値