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

待ち合わせ専用！距離で色が変わるアプリを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を使用できます。

– *

【Javascript】基本的なDOM操作について図解で解説する

# はじめに

以前、[こちら](https://qiita.com/yuto_h9m8/items/e774d86e0256a4e9062b)の記事にてDOMの概要について投稿しました。本記事では、具体的にDOMを書き換える方法について図を用いて解説していきたいと思います。

# DOMの書き換え

下記のようなDOMツリーを考えます。

▼HTMLソースコード

▼DOMツリー

### 作成

下記のように`createElement`で要素を指定し

3Dゲーム用の物理エンジンを自作

# 物理エンジンを自作する
ゲームを作成する際に使用するUnityやUnreal Engineなどゲーム制作ソフトには、物理シミュレーションを行う物理エンジンが普通標準で搭載されている。
これらの物理エンジンを使えば簡単に物体の衝突をシミュレーションしてゲームを作成することができるが、物理エンジンで行っていることを理解し、自分で実装してみたいと興味を持ったので３D空間での物理エンジンを自作してみた。
以下、今回作成した物理エンジンを使った物体の衝突シミュレーションの例である。いずれも３D空間内で物体の反発、回転、摩擦を考慮してシミュレーションしている。

球、直方体、六角柱の物体の衝突

重力のある空間での多数の球の衝突
![phystest2.gif](https://qiita-image-store.s3.ap-northeas

mod7占い (paizaランク S 相当) を無駄に汎用的に解く(JavaScript)

## 問題

https://qiita.com/official-events/9ab96aa95d62fe3cbdd7

これの中にある、

https://paiza.jp/works/mondai/s_rank_skillcheck_sample/mod7

です。

数字が被っていないカードがいっぱいあって、
その中から３枚引いたとき数字の合計が7で割り切れるパターン数を出せ、という問題です。

## 説明

#### 「汎用的に」と題しているのは

これは単純に、

– **「７」で割るとか「３」枚とかの数字は可変にしよう**

という話です。(※問題文にはそんな話はまったく出てきません)

３重のfor文とか再帰呼び出しとかは使わないよ、ということですね。

#### 解き方は無難に

公式の解説にある方法も参考にしています。

– カードは「Nで割った余り」だけ見てその個数を数える。
– 重複を承知で、余りのすべての組み合わせを列挙する。 (例 [0,0,0]〜[6,6,6] 7^3通り)
– 余りの合計がNで割り切れる組み合わせだけを選択する。(例 [0,0,0]

Visual StudioでJavaScriptのプログラムをデバッグする

# 設定手順
## JavaScriptのデバッグを有効化する
１．Visual Studioを開き、ツール > オプションを押下します
２．デバッグの中から、「ASP.NET の JavaScript のデバッグを有効にする (Chrome、Edge、IE)」をチェックします
３．OKボタン押下で閉じます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2257421/ec063960-f327-6ed7

Rails7のTurboが原因でリダイレクト後にjsが動かなくなる

## 概要
Turboが有効なRails7にて、削除処理を行った後リダイレクトするとjsが聞かなくなってしまった。

## 元のコード

“`erb:erb
<%= link_to '削除する', users_memo_path(@memo.id), data: { turbo_method: :delete }, class: 'delete-button button' %>
“`

“`ruby:controller
def destroy
memo = Memo.find(params[:id])
memo.destroy if memo.user_id == current_user.id
redirect_to users_memos_path, status: :see_other
end
“`

“`js:js
document.addEventListener(‘DOMContentLoaded’, function() {
// 既存の処理
});
“`

## 成功した方法
Turboが読み込まれた際にjsを実行するよ

jQuery で日付フォーム（日付範囲ピッカー）を作成

完成イメージ

今回はホテル予約サイトなどでよく見る日付の範囲を選択するフォームをhtml、jquery、cssを用いて作成しました。


入力フォームをクリックするとカレンダーが表示されます


日付を2つ選択すると選択された期間に色が付き、決定ボタンを押すとフォームに日付けが表示されます。クリアボタンで選択した日付を解除します

![スクリーンショッ

クラウド変数の容量の限界を調べる

# はじめに
初投稿です。めちゃくちゃ分かりづらい記事になっている気がします。
Scratchというサイトとプログラミング言語があります。Scratchでは「クラウド変数」という機能が追加されています。クラウド変数はサーバーにデータが保存され、Scratcherであれば誰でも変更できます。この機能を応用すれば、オンラインゲームなども作成できます。
今回はクラウド変数について詳しく見ていきます。

# クラウド変数の制限
とても便利なクラウド変数ですが、いくつかの制限があります。
– New Scratcherだと使えない
– 一つのプロジェクトに10個しか作れない
– 0.1秒のレート制限がある
– クラウド変数に保存できる値には安全性確保のための制限がある

今回は「クラウド変数に保存できる値」について考え、その容量の限界を調べてみます。クラウド変数の制限は詳しく明らかにされていませんが、有名なものとして、「数値しか保存できない」や「256文字しか保存できない」があります。

その他の制限としては、
– +がついているものは保存不可能
– -は最初の文字でしか置けない
– 小数点はど

[Python + Selenium ヘッドレスブラウザ] webdriverでjsを呼び出した場合のログ確認

ヘッドレスブラウザ上でjavascriptで処理を実行した場合どうデバッグする方法
console.log()の内容をpython側に持ってきて標準出力で確認できるようにしました。

“`
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options

# Chrome WebDriverの設定
chrome_options = Options()
chrome_options.add_argument(“–headless”) # ヘッドレスモード
service = Service(‘/path/to/chromedriver’) # Chromedriver のパス

# WebDriverの初期化
driver = webdriver.Chrome(service=ser

SVGMapはラスタとベクタを良い感じに使い分ける地図ライブラリ

[SVGMap](https://www.svgmap.org/)という面白い地図描写フレームワークを教えてもらったので試す。

# 概要

SVGMapは、次の2点が非常に特徴的です。何より、15年も前にそれを作っていたという点については驚きを隠せません。

– 分散的に配置されたレイヤをカプセル化・クライアントサイドで合成する[Decentralized Web Mapping](https://satakagi.github.io/mapsForWebWS2020-docs/De-centralizedWebMapping.html)の戦略
– [Quad Tree Composite Tiling](https://satakagi.github.io/mapsForWebWS2020-docs/QuadTreeCompositeTilingAndVectorTileStandard.html)という作者が提唱したタイリング手法で、データの密度に応じてラスタタイルとベクタタイルを切り替える

>![Propose an encapsulated web app that

チームにテストコードを書く文化を定着させる

## この記事は？
皆さんお久しぶりです。[@cosme](https://www.cosme.net/)の開発エンジニアをしております、村田です。@cosmeを運営する株式会社アイスタイルではPHP -> TypeScriptへの技術移行を進めており、フレームワークとしてはexpress, oclif, そして本記事で紹介するJavaScript製のテスティングフレームワークであるjestなどの各種ツールを使って開発を進めています。

この記事で紹介する内容は、チームでテストコードを書く文化を定着していく話です。というのも、既存プロダクトにて元々テストコードが十分に書かれていない部分があったため、リプレース後のサービスではしっかりとテストを書いていこう、ということでチームで一致団結しました。今まではテスト記述に対する基準は開発者によって任されていたところ、私の担当しているバックエンドのプロジェクトでは、テスト記述の優先度を高くしてリリース基準としてもテストコードの記述を含むことを追加することにしました。

## テストを書く理由
テストコードを書くことは多くのメリットがあります。私が

絶対チェックすべきGitHubリポジトリ15選

# はじめに

GitHubのリポジトリをみるという習慣はなかなか初心者の方だとないと思います。
しかし、世の中には参考になるリポジトリがたくさんあるので今回は厳選して紹介していきます。

# エンジニア共通

エンジニアであれば共通的に参考になるリポジトリを紹介してきます。

## [How Web Works](https://github.com/vasanthk/how-web-works)

Googleで検索ワードをいれてエンターキーを押してから、実際にWebサイトが表示されるまでの裏側で行われていることを詳しく紹介してくれています。

https://github.com/vasanthk/how-web-works

## [developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/076f4271-c1a9-b243-05cf

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

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

他のランクはこちら

– [Dランク](https://qiita.com/TD12734/items/8864fc925e4b35efea13)(標準入力の解説もこちら)

# 多分これが一番短いと思います
## 宝くじ
“`js
process.stdin.some(l=>{[a,b,…c]=(0+l).trim().split`
`;c.map(d=>{d-=a;console.log(d?~d&&d-1?d%1e4?d%1e3?”blank”:”third”:”second”:”adjacent”:”first”)})})
“`

153文字

`0+l`で入力された数字を数値の配列に変換。
jsでは0がfalse扱いされることを利用し、三項演算子で色々と処理しています。
まず、

LWCで外部APIを使ってみる

## 概要
LWCを勉強の一環として、外部APIを呼び出した結果をSalesforceの項目に反映させる方法を試してみました

### デモ
以下のように「郵便番号」項目を持つ取引先が存在するとします

また、取引先を参照する「調査結果」オブジェクトがあって、この詳細画面にLWCで作った「住所情報反映」ボタンを設置しています

ボタンを押下すると「住所」項目に取引先の郵便番号の住所が自動入力されます
![image.png](https://qiita-image-store.s3.ap-northea