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

私がアロー関数を理解するまで

# これは何？

非エンジニア向けにGoogleAppsScript(GAS)レクチャーを行なっています。プログラムが全くの初めての人を対象にしています。このレクチャーを卒業し、基本的なことが理解できるようになった人が「その次に知っておいたほうがいいこと」の一つに **配列の扱い** があるなと思いました。これを説明してみよう、、、

と思ったのですが、実務でよく使いそうな、`filter`, `map`, `find` について説明するには **アロー関数** を説明しないと話が繋がらないので、この記事では **アロー関数が存在しない世界線のJavaScriptを書いていた私が、アロー関数をどうやって理解したのか** を記述します。

# 対象者

* GoogleAppsScriptおよびJavaScriptでの基本構文は知っているレベル
* 具体的には [ケーススタディでしっかり身につく! Google Apps Script超入門](https://www.amazon.co.jp/dp/4297126273) を修了しているレベル

# 関数を変数/定数に代入できるのは

[GAS, JavaScript] try-catch と Error のこと

# これは何？

非エンジニア向けにGoogleAppsScript(GAS)レクチャーを行なっています。プログラムが全くの初めての人を対象にしています。このレクチャーを卒業し、基本的なことが理解できるようになった人が「その次に知っておいたほうがいいこと」の一つにErrorへの対応があるなと思いました。これを説明してみよう、という記事。

# 対象者

* GoogleAppsScriptおよびJavaScriptでの基本構文は知っているレベル
* 具体的には [ケーススタディでしっかり身につく! Google Apps Script超入門](https://www.amazon.co.jp/dp/4297126273) を修了しているレベル

# エラーとは？

初学者にとってエラーは可能なら見たくないし、メッセージも英語だから読みたくないし、もうイヤだ。という心境になりますよね？私はなりました。

だけど、エラーは「ここがおかしいよ」って教えてくれているので、それを読み解くことでエラーを解消することができます。

例えば下記の関数を実行するとエラーが出ます。

“`js
fu

javascript のタスク系処理を Promise / AsyncIterator を交えつつまとめてみた

# サンプル

## playground

See the Pen
interval example. by juner clarinet (@juner)
on 【API不要】Twitterのリストを無料で出力する方法(自分用メモ)

# はじめに

要素を特定できるクラスが全然なくて、多分、
人によってクラス名が違う可能性もありますので、他の方の環境でも動作することは保証できません。

# 何が問題か

ツイッターのリストって、エクスポートできないんですよ。
Twitter APIでリスト出力は可能なんですが、Basic以上のプラン契約が必要で、べらぼうにお金が必要なんですね。
ネットでリスト出力できるスクリプトも有料販売されていますが、私の場合、リストに登録しているユーザー数は100人程度なので、別にAPIやスクリプト使うほどのことでもないなと思いまして。
なんとか無料でできないかと模索した結果、できました。

# 実装

“`javascript
let resultArray = [];

function processElements() {
const elements = document.querySelectorAll(‘div.css-175oi2r[data-testid=”cellInnerDiv”]’);

elements.forEach(element => {

部下の質問にきちんと答えるために自分のあいまいだった知識を改めて調べなおした#01

部下からもらった質問の中であいまいな回答しかできなかったことを後で調べて共有したものをメモとして。
# 要素の存在確認について
### Q :「jquery 要素 存在確認」で検索すると`.length`で確認する方法と`.size()`で確認する方法がヒットしたけどどっち使えばいいのか？
個人的にずっと`.length`使ってたんだけど部下に`.length`と`.size()`の違いをハッキリ説明できなかったので
「jquery length size() 違い」とかで検索してたらそもそもバージョン3.0以降では廃止になったらしいのでどっちがどっちとかではなかった。
一応廃止の情報を見つけるまでに`.size()`は非推奨となっていて、その理由が`.size()`のメソッド内で`.length`呼んでるから単純に数数えるなら`.length`でよくない？とのこと。

# `.lengt`hを使ったif文の書き方
### Q : なぜif文の条件が`num.length`じゃだめなのか。
“`js
if (num.length) {
// 処理
}
“`
と書いていたので

画面いっぱいに広がる銀河シミュレーションのゲーム。



### 中央に重力源がある銀河シミュレーションを表しています。各パーティクルはランダムな位置と速度で始まり、重力源に引かれて回転します。

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

# HTMLコードを生

ダイナミック　ローレンツアトラクター　が描かれた空間内を飛び回るゲーム。



### ローレンツ・アトラクターを3Dでプロットし、その空間内をカメラが飛び回る視点でアニメーションを行ってます。

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

# HTMLコードを生成
html_content =

MobXを使ったリアクティブなReact開発の実践ガイド

## MobX とは

MobX は JavaScript の状態管理ライブラリで、React などのフレームワークと組み合わせて使用することが多く、特徴は状態管理をシンプルで直感的に行うことができる点である。以下の 3 つの主要な概念に基づいている。

1. State
アプリケーションを動かすデータのこと。スプレッドシートのセルのように扱うことで、その変更を追跡する。
2. Actions
State を変更するコード。ユーザーイベント、バックエンドデータへの送信、スケジュールされたイベントなどが該当します。
3. Derivations
State から相互作用なしに導き出すことができるもの。ユーザーインターフェース、導出データ（残りの todo の数など）、バックエンドの統合（サーバーへの変更の送信など）が該当します。

## 原則

MobX は、action が state を変更し、それによって影響を受けるすべてのビューが更新されるという一方向のデータフローを使用する。
![MobX Flow.png](https://qiita-image-store

Quadtree（四分木）を p5.js で扱うための情報源を探してみる

Quadtree（四分木）を p5.js で扱ってみたいと思い、そのために役立つ情報源を探してみたという話です。

## 情報源
### 動画
ざっくり調べたところ、有名どころの [The Coding Train](https://www.youtube.com/@TheCodingTrain) を見るのが、自分には一番良さそうな選択肢でした。

●Coding Challenge #98.1: Quadtree – Part 1 – YouTube

# ER図

待ち合わせ専用！距離で色が変わるアプリをNetlifyとFirebaseで作ってみた！

こんにちは、推しと一緒に住んでいる元保育士のりゆです。
**推し**とは**夫**のことなのですが、最近特に夫との待ち合わせが至福のひと時なのです。
ただ現実で待ち合わせている時、あることに気づいてしまったのです。

## 推しが近づいてくるところが見られないぞ！？

かといって世に出ているGPSアプリは、それぞれの個人情報を大切にしたいのでやりたくないのですね。
私自身、現在地を把握したいという欲求はありませんでした。
ただ推しが近づいてくるドキドキ感を味わいたいのです！！

現状世の中を調べてみましたが、私が求めているサービスはありませんでした・・・😅
なので！ないなら作るしかないですね！！
大まかな距離で居場所がわかり、数字ではなく直感的に近づいてきていることが認識できて待ち合わせ時間が今までより楽しい体験になるものを作

Vitestを使ったモダンなJavaScriptテスト入門

# はじめに

モダンなJavaScript開発において、効率的で信頼性の高いテスト戦略を構築することは非常に重要です。
本記事では、高速で使いやすいテストフレームワークである「Vitest」について詳しく解説します。
Vitestの基本的な使い方から、非同期テスト、モック、カバレッジまで、実践的な知識を提供します。

## Vitestとは

Vitestは、Vite上に構築された高速なユニットテストフレームワークです。
Jest互換のAPIを持ちながら、Viteのエコシステムを活用して高速な実行と設定の簡素化を実現しています。

## テストファイルの基本構造

Vitestのテストファイルは、以下のような基本構造を持ちます：

“`typescript
// 必要なモジュールをインポート
import { describe, it, expect } from ‘vitest’
import { someFunction } from ‘./someModule’

// someFunctionのテストスイートを定義
describe(‘someFunction’, () =

mapメソッドとforEachメソッドの基本的な違い

## アジェンダ
mapメソッドとforEachメソッドの基本的な違いについて簡単にまとめます。

## 違い/共通点
### 違い
:::note info
– **戻り値**があるかないか。
`map`は**新しい配列**を返すが、`forEach`は**何も返さない**。
:::

### 共通点
:::note info
– 各要素に対しての処理を行う。
– 元の配列を**編集しない**。(非破壊的メソッド)
:::

## 詳細
### map:
– 各要素に対して指定した関数を実行し、その**結果を新しい配列として返します**。
元の配列を変えずに、新しい配列を作成する場合に使用します。

“`javascript
const array = [1, 2, 3];
const newArray = array.map((element) => element * 2);
console.log(newArray); // [2, 4, 6] – 元の配列の各要素を2倍にした新しい配列
“`

### forEach:
– 各要素に対して

タイピングが遅い人用の C♯ の入力補助用 html を公開してみる。

タイピングが遅い人向けの
C♯ の入力補助用の html を作成しましたので
皆さんの役に立てればと思い
公開してみます。

[オンラインで動作するバージョンはこちら](https://uni928.github.io/sephiroth_csharp_creat_aider/)

[ダウンロードはこちら(Google Drive)](https://drive.google.com/file/d/1js001-NbiaGYmKovGbF0Bu4KdSnQNF7N/view?usp=sharing)

***

この html の見た目


***

この html の使い方

各ボタンを押すと
そのコードがクリップボードにコピーされます。

例えば

“`Csharp
for(int i = 0; i < list.Count; i++)

【備忘録】GitHubのレポを新規プロジェクトとしてClone(fork)するやり方の備忘録

## 既存のプロジェクトを再利用して新規プロジェクトの叩き台にする
色々とプロジェクトやアプリの破片を作ってはGitHubに保存してきたのですが、たまにそれに手を加えて新しいプロジェクトとして作り直したいなあという事がよくあり、クローンの手順を踏むのですが、よく手順を忘れるのでここに備忘ログ。Firebaseをよく使うので、Firebaseプロジェクトのクローン手順。
### １、下準備
– ローカルに新しいプロジェクト用のディレクトリを作る
– Firebase上に新しいプロジェクトを作る
– GitHub上に新しいプロジェクト用のリポを作る

### ２、GitHubから既存のリポをローカルにクローンする
作っておいたローカルのディレクトリに移動し
“`terminal
cd path/to/your/directory
“`
リポをクローンする
“`terminal
git clone https://github.com/username/repository-name.git
“`
package.jsonのname/version/description などを新し

構成図エディタ GUI-DAC (ジーユーアイ・ダック) の使い方と特徴 – アーキテクチャをビジュアルに楽しもう！


## はじめに

GUI-DACは、GUI[^1]とDaC[^2]両方の特性を持つ構成図エディタだ。この記事では、GUI-DACの特徴と使い方を紹介するぞ。GUI-DACでアーキテクチャをビジュアルに楽しんで、クリエイティブな力を解放しよう。

## 1. GUI-DACとは

GUI-DACは、構成図をマウスで編集できて、作った構成図をテキストで保存ができるんだ。

[^1]:GUI(Graphical User Interface)とは、アイコンやボタンなどを用いて直感的にわかりやすく操作できるようにしたユーザーインターフェースのこと。

[^2]:DaC(Diagram as Code)とは、コードを使用して図を作成および管理し、視覚的なドキュメントの作成、管理を改善する手法のこと。

## 2. 特徴

### 2.1 直感的なイ

LogTape：JavaScript/TypeScript向けのシンプルで柔軟なロギングライブラリの紹介と使い方

こんにちは、皆さん。今回は、JavaScriptとTypeScript向けの新しいロギングライブラリ「[LogTape]」をご紹介します。

https://github.com/dahlia/logtape

ログ出力は開発者にとって欠かせない作業ですが、適切なツールがないと面倒で時間がかかることがあります。LogTapeは、この問題を解決するために設計された、シンプルでありながら強力なロギングライブラリです。

LogTapeの主な特徴は以下の通りです：

– **依存関係なし**：LogTapeには依存関係がありません。LogTapeの依存関係を心配することなく使用できます。

– **ライブラリサポート**：LogTapeはアプリケーションだけでなく、ライブラリでも使用できるように設計されています。ライブラリにログ機能を提供するためにLogTapeを使用できます。

– **ランタイム多様性**：LogTapeは、Deno、Node.js、Bun、エッジ関数、ブラウザをサポートしています。コードを変更することなく、さまざまな環境でLogTapeを使用できます。

– *