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

マッチングアプリを作るときにTypeSCriptが重宝する理由

## TypeSCriptを使ってマッチングアプリを作る！

こんにちは！今回は、TypeScriptとFlaskを使ってマッチングアプリを作成する方法をご紹介します。このガイドでは、フロントエンドにTypeScript、バックエンドにFlaskを使用し、step by stepで開発プロセスを説明していきます。

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

まず、プロジェクトの基本構造を作成しましょう。

“`
matching-app/
├── frontend/
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── tsconfig.json
└── backend/
├── app.py
├── requirements.txt
└── venv/
“`

### フロントエンドのセットアップ

フロントエンドではReactとTypeScriptを使用します。

“`bash
npx create-react-app frontend –template typescript
cd f

Node.js、Next.js、GraphQLでマッチングアプリを作ろう！

## どんどん作りましょう！

こんにちは、皆さん！今回は、最新のWeb技術を使って、シンプルながら機能的なマッチングアプリを作成する方法をご紹介します。Node.js、Next.js、そしてGraphQLを使用して、モダンで効率的なアプリケーションを構築していきましょう。

### 目次
1. プロジェクトのセットアップ
2. バックエンドの構築：Node.jsとGraphQL
3. フロントエンドの開発：Next.jsの導入
4. ユーザー認証の実装
5. マッチング機能の開発
6. リアルタイム通知の追加
7. デプロイメントと最適化

それでは、各章で詳しく見ていきましょう！

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

まずは、新しいプロジェクトを作成し、必要な依存関係をインストールしましょう。

“`bash
mkdir matching-app
cd matching-app
npm init -y
npm install express apollo-server-express graphql mongoose next react react-dom
npm

[paiza]3Dプリンタ (paizaランク B 相当)

# ようやくBランクか。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/3d_printer

# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!
なんなら今回から入力チェックすらめんどくさくなったので、正常系のデータしか勝たん。

“`javascript:3dPrinter.js
// [問題文（原文）]
// あなたは念願の3Dプリンタを購入しました。早速、いろいろな立体を出力して楽しみましょう！
// 3Dプリンタに入力される立体のデータは、大きさ 1×1×1 の立方体（セルという）を一つ以上組み合わせることで得られます。より正確に述べると次のようになります：
// 三次元空間で図１のような座標系 (x,y,z) を考えます。
// 立体データは、各座標 (x,y,z) でのセルが立体に含まれ

svelteKit & FastAPI の連携（Docker上)

今回はローカルのDocker環境でsvelteKitとfastAPIを使用し、
Webアプリをデプロイするまでの手順を投稿します。
この方法以外にもやり方は、いろいろあると思いますが、
検証済みの方法なので参考にして下さい。

前回の投稿でFE(フロントエンド）のsvelteKitをDocker環境で構築しました。

今回はBE（バックエンド）との連携編です。
Docker環境でFastAPIのアプリケーションが動作していることが前提とします。
世の中にFastAPIの入門記事が溢れているので、BEの中身の学習は、他の記事を参考にしてください。
svelteKit側を注目して見ていきます。
※私がお世話になった記事はこちらになります。（迷ったら公式をまず見よう）

https://zenn.dev/sh0nk/books/537bb028709ab9/viewer/b92ab0

# 目標

1. FastAPI部分の軽く説明
2. FEのDockerの設定
3. FEからBEへfetchして値を取得する

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