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

[paiza]売れ残りにはなりたくねぇなぁ。。。

# 市場から売れ残らないように生きたい
実力社会って厳しい世の中。。。無能は淘汰されていくのね。。。

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/leftover

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!
“`javascript:leftover.js
// [問題文（原文）]
// あなたはスーパーマーケットを経営しています。
// 今、ある生鮮食品を m[kg] 仕入れました。とても新鮮だったため、生のまま販売したところ、 m[kg] のうち p[%] を売ることができました。次にその売れ残りをすべてお惣菜にして販売したところ、売れ残った量のうち q[%] が売れました
// さて、m[kg] 仕入れたこの食品は最終的に何kg 売れ残ったでしょうか。ただし、生鮮食品をお総菜にする際は、

[paiza]みんな大好きFizzBuzz

# ループ・分岐を1度に学ぶならコレ
とりあえず新しい言語を始める時にHelloWorldの次ぐらいにやるのがFizzBuzz。
コレでループとifの書き方を理解してってやるのが下手な教科書で研修やるより1番いい気がする。

https://paiza.jp/works/mondai/c_rank_skillcheck_sample/fizz-buzz

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

“`javascript:fizzBuzz.js
// [問題文（原文）]
// 整数 N が入力として与えられます。
//
// 1からNまでの整数を1から順に表示してください。
//
// ただし、表示しようとしている数値が、
//
// ・3の倍数かつ5の倍数のときには、”Fizz Buzz”
// ・3の倍数のときには、”Fizz”
// ・5の倍数のと

お名前.comDDNSクライアントをNode.jsで実装

# 一つ一つアカウント情報入れるのは、煩わしい。
お名前ドットコムには[公式のダイナミックDNSクライアント](https://help.onamae.com/answer/7920)があります。しかし、私はこのソフトウェアに不満があります。

– DDNS設定を一つ追加するたびにアカウント情報を個別に入力しなければならない
– タスクバーに表示されないので、見つからなくなる
– 閉じてもバックグラウンドに残り続け、開くたびに増える

1つ目が一番の不満要素ですが、とにかくアプリケーションとして使い勝手が悪い。
そこで、自作のサーバー上で動作するダイナミックDNSクライアントを作ってみました。

# 使い方

https://github.com/JUN-SUZU/onamae-ddns-client

GitHubからダウンロードします。(starつけてくれると嬉しいです。)
以下のファイルを作ります。
“`config.json
{
“userId”: “お名前ドットコムのユーザーID”,
“password”: “お名前ドットコムのパスワード”
}
“`

`

[paiza]みかん農家に俺はなる！

# 命の水だ、ポンジュース（みかんみかんみかん
自分が中学ぐらいにメタルというジャンルを日本に広めた素晴らしいバンドだったと思う。

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/mikan

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

“`javascript:mikan.js
// [問題文（原文）]
// あなたはみかん農園を営んでいます。
// 収穫の季節になると、あなたはみかんを収穫し、重さごとに仕分けなければいけません。
// 仕分け作業は非常に時間がかかる作業なので、あなたはみかんを重さごとに仕分けてくれるプログラムを書くことにしました。
// みかんはある定数 N の倍数のうち、正の整数の重さが書かれた箱に仕分けられます。
// 例えば N = 10 の時、10 g, 20 g,

趣味マッチングアプリの作り方(Laravel)

## Laravel、Tailwind CSS、AIを使って

今回は、Laravel、Tailwind CSS、AIを使って趣味マッチングアプリを作る方法をご紹介します。

このアプリでは、ユーザーがログインし、AIが同じ趣味を持つ近いユーザーをマッチングし、WhatsApp風のチャット機能を提供します。

## 1. プロジェクトのセットアップ

まず、Laravelプロジェクトを作成し、Tailwind CSSをインストールします。

“`bash
composer create-project laravel/laravel hobby-matching-app
cd hobby-matching-app
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
“`

`tailwind.config.js`を編集します：

“`javascript
module.exports = {
content: [
‘./resource

バグが起きたら自動でJiraにチケット作成してほしい…

## はじめに
こんにちは!!
Firebase Functionsを使っていると、時々エラーが発生しますよね。そんな時、手動でエラーログを確認し、Jiraにバグのチケットを作成するのは手間がかかります。
そこで、Firebase Functionsでエラーが発生した際に、Jiraに自動でチケットを作成する方法をご紹介します。使用する言語はTypeScript、Node.js、そしてHTTPリクエストにはaxiosを使用します。

## 何を書いたか
この記事では、Firebase Functionsでエラーが発生した際に、自動でJiraにバグのチケットを作成する方法について詳しく説明します。

## なぜ書いたか
エラー発生時に迅速に対応するためには、エラーログを確認し、バグのチケットを作成することが重要です。しかし、手動でこれを行うのは非効率です。そこで、自動化することでエラー対応を迅速かつ効率的に行えるようにこの記事を書きました。

対象読者は、Firebase Functionsを使用しているエンジニアや、エラー処理を自動化したいと考えている方々です。

## 本題
###

Node.js、Express、GraphQL、htmxを使ったチャットアプリの作成

## このアプリについて

このチュートリアルでは、Node.jsとExpressをバックエンドに、GraphQLをデータ取得に、htmxをフロントエンドに使用したリアルタイムチャットアプリを作成します。

また、他のユーザーがチャットに参加しているかどうか、メッセージを読んだかどうかも確認できる機能を追加します。

### 必要なツール

– Node.js
– npm
– Express
– Apollo Server (GraphQL)
– htmx

### 各技術の説明

**Node.js**: JavaScriptランタイムで、サーバーサイドのスクリプトを実行するために使用されます。

**Express**: Node.js上で動作するウェブアプリケーションフレームワークで、APIの作成やルーティングに便利です。

**GraphQL**: データの取得と操作を行うためのクエリ言語で、クライアントが必要なデータだけを取得できます。

**htmx**: HTML属性を使って、サーバーからのデータを直接DOMに反映させることができるライブラリです。

## プロジェクトの

pnpm execとpnpm dlx

よく`pnpm exec`と`pnpm dlx`のどっちがどっちなのか分からなくなるのでまとめる。

## pnpm exec
プロジェクト内で`node_modules/.bin`に置かれたコマンドの実行や、スクリプトの実行を行うコマンド。

“`sh
# node_modules/.bin/vitestを実行
pnpm exec vitest
# websiteワークスペース内でlsを実行
pnpm -F website exec ls
“`

既存の名前と衝突しなければ、`exec`は省略できる。
“`sh
# node_modules/.bin/vitestを実行
pnpm vitest
# インストールされたパッケージ一覧が表示される(pnpm exec lsではない)
pnpm ls
“`

## pnpm dlx
プロジェクト内の依存関係に関係なく、パッケージをレジストリから取得してデフォルトのコマンドを実行するコマンド。

“`sh
# storybookの初期化
pnpm dlx storybook@latest init
“`

`pnpx`は`pnpm

[paiza]野球の審判

# だんだんやる気が。。。
千葉大会の市船の決勝戦、監督が直接審判とやり取りできないからって、キャプテンの子が審判と監督の間を行ったり来たりの板挟み状態で、これは将来立派な中間管理職になれそうですね！
ってか、オリンピックもそうだけど、これだけカメラだったりAIの技術が上がったんだから、誤審して叩かれる人間の審判ってもういらなくね？

あとサッカーの超演技的痛がり方はもはや芸術の域だよね！
あんなに痛がってたのに、数秒で立ち上がってプレー再開できるとか超人なのか？

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/umpire

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

“`javascript:umpire.js
// [問題文（原文）]
// 野球の各打者はストライクが 3 つたまるとアウトと

[paiza]宝くじ (paizaランク C 相当)

# Cランク解いてイキりたい
サマージャンボが当たったら、フルテレOKな会社に転職して、犬のブリーダーやりたい。。。
こんなクソ暑い中、~~コロってても~~出社を推進してくる会社があるとか頭おかしいよね～

https://paiza.jp/works/mondai/c_rank_skillcheck_archive/lottery

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

“`javascript:lottery.js
// [問題文（原文）]
// 今年もパイザ宝くじの季節がやってきました。パイザ宝くじ券には 100000 以上 199999 以下の 6 桁の番号がついています。毎年1つ当選番号 (100000 以上 199999 以下)が発表され、当たりクジの番号が以下のように決まります。
//
// 1等：当選番号と一致する番号
// 前後賞：当選

Backlog Gitリポジトリの更新をトリガーに、Amazon S3にコンテンツを自動でアップロードする

# はじめに

## この記事の概要

この記事では、タスク管理ツールBacklogのGitリポジトリとAmazon S3（以下、S3）との連携方法についてまとめています。
流れとしては、Backlog GitリポジトリのWebフックを使用して、リポジトリの更新をトリガーにLambda関数が実行されるようにします。そして、Lambda関数がS３にファイルアップロード処理を行います。
この一連の流れの具体的な構築方法や注意点をまとめています。

## BacklogのGit機能について

[Backlog](https://backlog.com/)はタスク管理ツールです。そして、その機能の一つにGit機能があります。
ソースコード管理といえば、IT業界全体では、おそらくGitHubを使用しているチーム（人）が多いと思いますが、タスク管理にBacklogを使用しているケースでは、タスクとソースコードの紐付けが行いやすかったり、タスク管理とソースコード管理（他にもWiki機能もあるのでドキュメント管理なども）を一元化できるなどのメリットがあります。

このGit機能は基本的には特に不自由な

【Docker Compose】Node.js / TypeScript / MySQL の Docker 開発環境構築

# はじめに
この記事では、Docker Compose を利用した Node.js / TypeScript / MySQL の Docker 開発環境構築手順について記載します。

https://docs.docker.com/compose/

# 開発環境
開発環境は以下の通りです。

– Windows11
– Docker Engine 27.0.3
– Docker Compose 2
– MySQL 9.0.0
– Node.js 20.15.1
– npm 10.8.2
– @types/node 20.14.11
– ts-node 10.9.2
– TypeScript 5.5.3

# Node.js / TypeScript の環境構築
まずは Node.js / TypeScript の環境構築をおこないます。

## `package.json` の作成
`package.json` を作成します。

https://docs.npmjs.com/cli/v10/commands/npm-init

コマンド実行中の質問をスキップするため、`-y` をつ

[Node.js] [Jest] Jestでテストを行う

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

# 目次
– []()
– []()

# プロジェクトを作成する
1. プロジェクト（ディレクトリ）を作成する
~~~sh
mkdir jest-tutorial
~~~
1. ディレクトリに移動する
~~~sh
cd jest-tutorial
~~~
1. [プロジェクトルート※1](※1:プロジェクトルートは、すべてのプロジェクトソースの親であるフォルダーです。)にpackage.jsonを作成する
~~~sh
touch package.json
~~~
1. package.jsonに下記を記載する
~~~json:package.json
{
“name”: “jest-tutorial”,
“license”: “UNLICENSED”
}
~~~
1. package

[paiza]N倍の文字列

# 下から順に。。。

https://paiza.jp/works/mondai/d_rank_skillcheck_archive/square

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

“`javascript:square.js
// [問題文（原文）]
// 整数 N が入力されるので、N 個の*を繋げた文字列を出力するプログラムを作成しましょう。
// 例えば N = 3の場合
// ***
// のように出力してください。
function square(lines) {
if (!Array.isArray(lines) || lines.length !== 1) {
console.log(“1行入れろや！”);
return;
}
const repCnt = Number(lines[0]);
if (

[paiza]文字の一致

# 同じ文字かどうかチェック
https://paiza.jp/works/mondai/d_rank_skillcheck_sample/diff_str

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

“`javascript:sameStr.js
// [問題文（原文）]
// 2 つの文字列 a, b が入力されます。文字列が一致していれば “OK” 、異なっていれば “NG” と出力してください。
function sameStr(lines) {
if (!Array.isArray(lines) || lines.length !== 2) {
console.log(“2個の文字を入れろや！”);
return;
}
if (!lines.every(line => line.length > 0 && line.le

[paiza]足し算するだけの簡単なお仕事

# Dランクをわかりにくく解く
https://paiza.jp/works/mondai/d_rank_skillcheck_sample/addition

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

“`javascript:add.js
// [問題文（原文）]
// ２つの正の整数 a, b が半角スペース区切りで入力されるので a と b を足した数を出力してください。
// ※「掛け算」の問題では入力が改行区切りで与えられましたが、今回は半角スペース区切りで与えられます。
function add(lines) {
if (!Array.isArray(lines) || lines.length !== 1) {
console.log(“1行入れろや！”);
return;
}
const vals = lines[

[paiza]文字列をつなげるだけの簡単なお仕事

# でぇベテランだけど、Dランク解いてイキりたい

https://paiza.jp/works/mondai/d_rank_skillcheck_archive/email_address

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

“`javascript:createMailAddress.js
// [問題文（原文）]
// Eメールアドレスとはローカル部とドメインを「@」を繋いだ文字列で表されます。
// ローカル部を s ,ドメインを t として、それぞれ長さ n の文字列が改行区切りで入力されます。
// 以下の構文に沿った文字列を出力してください。
//
// s(ローカル部)@t(ドメイン)
//
// 例えば
// info
// paiza.jp
// のような入力の場合
// info@paiza.jp
// と出力して下さい。
f

Electron+Vue3でマルチウィンドウを理解したい

:::note info
viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方は[こちら](#一緒に二次元業界を盛り上げていきませんか)まで。
:::

# Electronでマルチウィンドウを制御したい
知り合いの自転車屋さんに、商品のポップを簡単にデザインできるツールを作れないか相談を受けたので、Electronを使ったデスクトップアプリで作ってみることにしました :bike:
ポップのプレビュー画面が必要になるのですが、その際のマルチウィンドウ制御に少し悩まされたので、自身の備忘録も兼ねて検証内容をまとめてみました。

# 検証環境
Windows10
Node：20.10.0
Vue CLI：5.0.8

# 環境構築
ある程度これに倣えば同じように検証ができるように記載しています。

今回は、VueでElectronを利用するために[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vu

error: We can’t find the necessary environment variables to replace the Node version.

# 事象

Windows環境にて、fnmを使用してnode.jsのアップグレードを実行しようとしたところ、タイトルどおりのエラーが発生した。

https://nodejs.org/en/download/package-manager

# 原因

環境変数が設定されていない模様。

“`
error: We can’t find the necessary environment variables to replace the Node version.
You should setup your shell profile to evaluate `fnm env`, see https://github.com/Schniz/fnm#shell-setup on how to do this
Check out our documentation for more information: https://fnm.vercel.app
“`

# 対処

環境変数を追加するコマンドを実行した。

“`
fnm env –use-on-cd | Out-String

TypeScriptを初めて触ってみた

# 概要
今までJavaScriptは多少触ってきましたが、近年のTypeScriptの勢いを見て、そろそろ触らないといけないなぁ、と思ったエンジニアの備忘録です。

# 目的
何事もまずは動かしてみる、の精神で、まずは最低限TypeScriptが実行できる環境をvscode上で整え、簡単なコードを実行するまでを目的とします。

# 想定読者
・JavaScriptを触ったことがあり、TypeScriptはなんとなく聞いたことがあるがよくわからない方
・コマンド実行に苦手意識が無い方

# 全体の流れ
環境構築
・Node.js、npmインストール
↓
JSONファイルの作成
├package.json
└tsconfig.json
↓
サンプルコード作成
↓
実行
↓
デバッグ
└ブレイクポイントの設定
↓
ESLint設定
↓
感想

# 環境
・Windows 11
・Visual Studio Code(以下、「vscode」)
・Node.js v20.16.00
・Node Package Manager(以下、npm) 10.8.2

# 環境構築
### Node.j