Node.js関連のことを調べてみた

オムライス指数をGoogleMapとOpenAIで算出するLineBOT

## 昔ながらのオムライスが食べたい

昔ながらのオムライスを出す店が急激に減っています。
そこで、この駅に行けばありつけるよ、という情報を数値化することを考えています。

その数値を***オムライス指数***と名付けて、それを算出、活用できるアプリを開発して、オムライスを食べる探索に出かけたいと考えています。

今回は、そのプロトタイプをLineBOTで作ってみました。

## 作成したLineBOT

https://x.com/tadokuno/status/1825799731223867719

駅名を入力すると、その駅のオムライス指数を返します。

それを算出する根拠となる情報も同時に返しますが、本来は返す必要のない情報です。
プログラムが正しく動いていることを確認するために出力しています。
アプリを作るための第1ステップなので、ユーザービリティは考えられていませんが、ご了承ください。

## オムライス指数の各要素

最終的なオムライス指数の構成要素は10個なのですが、今回のプロトタイプではそれを6個としました。
各要素は、0点から10点の間の整数値をとり、合算して0点か

Windows11 に Node.js インストール(nvm-windows利用)

Windows11 に Node.js インストールしてみる
以前、Node.js を通常インストールしたがバージョン管理の必要が出てきたので nvm-windows より Node のバージョン管理できるようにしたときのメモです
MSのドキュメントにある [Windows での NodeJS のインストール](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows) を参考にしてます

やることは大雑把にこんなところ

– Node.js アンインストール
– Node.js(nvm-windows) インストール

:::note info
コマンドプロンプト or Powrshell を使う時は 「管理者として実行」 で起動する
:::

# Node.js アンインストール

MSのドキュメントよりOSに Node.js 入ってる場合はアンインストールを推奨してる
環境変数とか残ったままだとハマりそうなのでアンインストールしておきます

1. 現状の Node.

React開発を加速！ViteとDockerで作るシンプル開発環境入門

## はじめに
この記事は、弊社で行うインターンシップのプラス要素の資料として書きました。
5日間のインターンでは、環境構築を必要としないCodesandboxを使用します。
インターンを通じて、さらに興味を持った学生向けに今回の資料を作成しました。

この記事の目的は、記事に出てくるツールなどを使いこなすのではなく、入門編として今後Dockerなどを使用することが出てきた際に抵抗なく、始められるようになることを目指して作成しています。

### 対象者
– 弊社のインターン生
– Viteを使ってReactの環境構築したい人
– Vite + Dockerを使って環境構築したい人
など…

### 今回出てくるものたち
– Node.js
– Docker
– React
– Vite

### 出てこないもの
ツールそれぞれの詳しい解説

## Node.jsの準備
今回、npmコマンドを使用するため、Node.jsをインストールします。
まず、バージョンを確認するコマンドで、npmコマンドが使用できるか確認しましょう。
“`bash
$ npm -v
10.5.1
“`

nvmを使ってWSL2のローカル環境のNode.jsバージョンを上げる方法

とある作業中に`npm create vite@latest . — –template react`をしたら大量のWARNINGが出た。

“`
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘create-vite@5.5.2’,
npm WARN EBADENGINE required: { node: ‘^18.0.0 || >=20.0.0’ },
npm WARN EBADENGINE current: { node: ‘v19.5.0’, npm: ‘9.3.1’ }
npm WARN EBADENGINE }
“`
これは`vite`が要求するNode.jsのバージョンに対して、現在の環境のバージョンが満たされていないという事らしい。
なのでNode.jsのバージョンを上げてみた。

※自身の備忘録なので少し細かいかもしれません。必要な箇所だけ参考にしてください。
※間違いがありましたら指摘してもらえると嬉しいです！

# nvmの利用
まず、バージョンを上

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

## 概要

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

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

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

**主な利点:**

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

[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;

vercel dev コマンドで出た謎の Cannot find module エラー対処備忘録

# 前提
vercel serverless functions として 　`api/a.ts` が用意してあり、ローカルで起動するために [`vercel dev` コマンド](https://vercel.com/docs/cli/dev) を使う
next.jsは使っていない

# 発生したこと
ローカルで起動して `http://localhost/a` にアクセスすると、
`502: BAD_GATE_WAY` になり、以下のような謎のエラーが発生

“`
Error: Function `api/a.ts` failed with exit code 1
node:internal/modules/cjs/loader:1148
throw err;
^

Error: Cannot find module ‘/Users/me/Library/Application’
Require stack:
– internal/preload
at Module._resolveFilename (node:internal/modules/cjs/loader

TypeScriptチートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API])

みなさんTypeScript(JavaScript)でどんなことができるかご存知ですか？初学者向けの言語や大規模開発でよく使う言語だというイメージがあると思います．TypeScript(JavaScript)はフロントの開発からバックの開発までなんでもできる非常に有用な言語です．本記事ではプログラミングをしたことのない人やTypeScript(JavaScript)を触った人のステップアップのためなど幅広い方向けに書きました．また，Node.jsの仕組みやReact,Vue.jsでの応用例やAPI作成まで網羅しました．配列を操作する際の便利な関数やUIライブラルの紹介といった便利機能も記載しています．文法がわからなくなったら適宜文法の欄に戻って確認したり，逆に飛ばしてみたい方はどんどん先に進んで読んでいってください！

# 他のチートシート
Docker コマンド

https://qiita.com/JavaLangRuntimeException/items/21f7c7bf3d143f821697

git/gh コマンド

https://qiita.com/JavaLangR

[paiza]1周目完走（【殿堂入りキャンペーン】村人の友好関係 (paizaランク S 相当)

# くぅ～疲れましたw
やっとJavaScriptで問題が一通り終わったよ～！
次回【Javaで2周目】、ディエルスタンバイ！！

https://paiza.jp/works/mondai/s_rank_skillcheck_archive/group_popularity

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

“`javascript:groupPopularity.js
// [問題文（原文）]
// あなたは今「PAIZA の村」という、村人と交流しながら生活していくゲームで遊んでいます。
// 村人は合計で N 人であり、各村人は 1 ～ N で番号付けられています。
// このゲームの目的の一つは村の人々と仲良くなることです。
// これを示すパラメータとして、各村人と村人の間には「友好度」と呼ばれる非負整数が定められています。
//
//

[Node.js] [Jest] 単体テストにおける jest.spyOn の使い方

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

# 目次

# `jest.spyOn(object, methodName)`の基本構文
> jest.fnと同様の関数を作成しますが、引数に与えられたobject[methodName]へのコールも実装します。 Jestの モック関数を返します。

~~~ts:xx.test.ts
const spy = jest.spyOn(object, methodName);
~~~

# `mockFn.mockResolvedValueOnce(value)`の基本構文
> モック関数を1回呼び出したときに返す値を受け取ります。 次のモック関数へのコールが異なる値を返せるようチェーンすることができます。

~~~ts:xx.test.ts
const spy = jest.spyOn(object, methodName);
spy.mockResolvedValueOnce(value);
~~~

# 活

はじめてのWebアプリを作ろう（1）-環境構築

HTML・CSS・JavaScriptの基本を学び終えた初心者です。

学んだことを体系的に復習するため、いくつかWebアプリを作っていきます。
定番のToDoアプリを作成したのち、TypeScript・Reactを用いてアップグレードしていく予定です。

私と同じように基本を学び終え、「次なにしよう…」と迷っている方の一助となれば幸いです。

今回は環境構築について一部まとめます。

※プログラミング初学者がまとめている記事です。
温かい目で見守ってくださると嬉しいです:hugging:

# 前提条件

以下の環境で使用している前提でまとめていきます。
– OS：Windows10 22H2 or Windows11
– エディタ：Visual Studio Code
– 仮想環境：Docker Desktop

# 1.Docker導入

仮想環境の構築については、すでに多くの先輩方が解説されているので、そちらの記事を参考にします。

まずはじめに、WSL2とDockerを導入します。
– [Windows上でDocker環境を作成する方法とその構成](https://qiita

Node.js(TypeScript)でBlueSky APIを使って画像付きでツイートするメモ

## はじめに

Twitter APIをしらべてみたらBlueSkyも気になってみた。
結論から言えば、”@atproto/api”さえインストールすればもう大丈夫。よくできている。

文字列にリンク先がある場合はRichTextを使えば、自動判別してくれる。便利。っていうかRichTextを使わないとリンクしてくれない。いけず。

“` typescript:blueskyManager.ts
import {BskyAgent, RichText} from ‘@atproto/api’
import fs from “fs”;
export class BlueskyManager {
private readonly _agent: BskyAgent;
constructor() {
this._agent = new BskyAgent({
service: “https://bsky.social”,
});
}

private login = async () => {

Live2DモデルをAWSのS3にデプロイ

# Live2D モデルをブラウザでどこからでも見られるようにしたい！

## 目次

– [はじめに](#はじめに)
– [前提条件](#前提条件)
– [手順概要](#手順概要)
– [1. Live2D SDK for Web をダウンロード](#1-live2d-sdk-for-web-をダウンロード)
– [2. サンプルモデルを組み込んでビルド](#2-サンプルモデルを組み込んでビルド)
– [3. AWS S3 バケットを作成](#3-aws-s3-バケットを作成)
– [4. ビルド生成物を S3 にアップロード](#4-ビルド生成物を-s3-にアップロード)
– [さいごに](#さいごに)

## はじめに

どうも、駆け出しのぴよぴよエンジニアです。
本記事では、Live2D SDK for Web を使用して、作成した Live2D モデルを、AWS の S3 にデプロイしてブラウザで表示させる手順について説明します。将来的にはコミケで売り子アプリのようなものを作

[paiza]島流しにしてやろうか（島探し (paizaランク S 相当)

# コードの指摘は受ける
ネガティブな批判を相手のことを何も考えずにしちゃう人って何なんだろうね？
きっと頭と心が残念なのかな？（特大ブーメラン

https://paiza.jp/works/mondai/s_rank_skillcheck_sample/search-island

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!

## 解き方2つ
今回はちょっと調べながらやってみて、
データ量によってスタックオーバーフローで実行できない可能性のあるコードと
多分実行できるであろうコードの2つを書いてみたよ。
※例題の2つはどっちのコードでも動いたけど、100 * 100とか1000 * 1000だと、どうなるかわからないのでこの記事を投稿した後にテストしてみてって感じかな
※ちなみに凄い単純な500 * 500は問題なく動いた（パラメータ例有り

### 1：深さ

CordovaアプリでGoogleMapからロケーション情報を共有する

[散歩ルート計画アプリを作った](https://qiita.com/poruruba/items/90d25395670f1bf5a5fe) の作成時に習得したテクニックです。

GoogleMapでスポットをクリックすると以下のような詳細ダイアログが表示されます。
そのダイアログの右上に共有ボタンがあり、これを選択すると他のアプリにこの情報が共有されます。


この共有機能をCordovaアプリで実現してみます。

# 共有内容

共有ボタンをクリックすると、以下のような共有先アプリの選択ダイアログが表示されます。
今回はこの選択先アプリに含まれるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/ceb1f015

Nuxt 3 + Vuetify 3 環境構築【vuetify-nuxt-moduleは非推奨】

:::note alert
以下のやり方を実行すると下記エラーが発生するため、実行しないでください。代わりにマニュアルセットアップをしてください。
:::

“`bash
Internal server error: Failed to resolve import “vuetify/iconsets/mdi” from “virtual:vuetify-icons-configuration”. Does the file exist?
“`

マニュアルセットアップ

https://vuetifyjs.com/en/getting-started/installation/#manual-setup

“`shell
pnpx nuxi@latest init .
npx nuxi@latest module add vuetify-nuxt-module
pnpm run dev
“`

“`app.vue