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

TypescriptでMermaidシーケンス図を作るプログラムを作ってみたかった

# 前置きと挫折
Javaへのマイグレーション業務にてシーケンス図やクラス図などのUMLを作るかの検討を行なっており、ソースなどからUML起こすことを自動化できないか、を考えたのがきっかけ。

VSCodeの拡張機能などでないか探したが、なさそうだったので自分で作るか、といったん決意。

ただ、調べていくと、Javaのソースコードの構文解析を一から作成するのは無理そうだったので、せめてファイル設定値に従ってMermaid記法のシーケンス図を作るプログラムを作るか…ということで作業開始。

将来的にVSCodeの拡張機能化したいと考えていたため、Typescriptを選んだ。

# Mermaidとは
https://mermaid.js.org

上記にリンク添付、端的に説明すると、
Markdownテキストでクラス図やシーケンス図グラフを作成できるダイアグラムツール。
使えると便利。

# Repository
https://github.com/ryoheiY/create-sequence-diagram-by-ts

# 例
以下のようなYamlファイルから
~~~yam

wsl(Windows Subsystem for Linux)事始め

# はじめに
本資料はmac普段使ってた人がwinで開発環境をちょっと作る為にやった作業のメモですほぼ。

# 目標
– Windowsでモダンな開発環境を作りたい
– ほしいのはとりあえずNode.jsさえあればいったんOK

# 作業

## WSLの初期設定

詳しくはここを参照
https://zenn.dev/dyoshy/articles/04d6bf3822b6ff

WSLのインストール
“`
wsl –install
“`

WSLのバージョン指定
“`
wsl –set-default-version 2
“`

Visual Studio Code を入れてVSCode remote Developmentをインストール。
これで、wsl上のUbuntu内のファイルを触ることができる

## Dockerインストール

Dockerはいったん不要な気もしたけど…
VS Code上でWSLを開き、Ctrl+@でターミナルを開いて以下を実行していく

“`
$ sudo apt update
$ sudo apt install ca-certifica

TypeScriptの中級コース～TypeScriptにどっぷり浸かろう！～

## TypeScriptを極めよう！

TypeScriptは次世代のVBAになるほどMicrosoftがプッシュしています。
TypeScriptからファイルシステムにアクセスすることはできませんが
PowerAutomateと一緒に使うことで高度な処理が実現できます。

それではいきましょう！

## 1. 型推論の高度な使用法

TypeScriptの型推論は非常に強力です。複雑な型推論の例を見てみましょう。

“`typescript
function createPair(v1: T, v2: U): [T, U] {
return [v1, v2];
}

let pair = createPair(“hello”, 42);
// pairの型は [string, number] と推論されます
“`

## 2. 条件付き型の応用

条件付き型を使用して、入力に基づいて型を動的に選択できます。

“`typescript
type TypeName =
T extends string ? “string” :
T ex

SeleniumでWebDriverを自動取得し、スクリーンショットをGitHub Actionsで撮影して格納するNode.jsサンプルコード

# 本サンプルが提供する内容

* Seleniumを用いたブラウザーの自動操作に置いて、Webドライバーのインストール管理を不要とする実装方法（Selenium公式が**webDriverの実装の自動取得に対応**したので、その機能を利用）
* ブラウザー自体が無い環境で、ブラウザーも含めて自動取得してSeleniumによるブラウザーを介したE2Eテストをする方法

* 合わせて、GitHub Actionsで実行して撮影したスクリーンショットをArtifactに格納するワークフローも実装してある
* なお、GitHub Actionsそのものの解説はしない

# サンプルコード

以下のGitHubリポジトリを参照。

* [https://github.com/hoshimado/selenium-automated-driver-management-sample-nodejs](https://github.com/hoshimado/selenium-automated-driver-management-sample-nodejs)

なお、GitHub Ac

TypeScriptの入門コース: 汗かいて学ぶTypeScript

## はじめに

TypeScriptは、JavaScriptに静的型付けを追加した強力なプログラミング言語です。本記事では、TypeScriptの基本的な概念と使い方を、サンプルコードを交えながら解説していきます。

## 1. TypeScriptとは

TypeScriptは、Microsoftが開発したオープンソースの言語で、JavaScriptのスーパーセットです。つまり、既存のJavaScriptコードはそのままTypeScriptとして動作します。

TypeScriptの主な特徴:

– 静的型付け
– クラスベースのオブジェクト指向プログラミング
– モジュールシステム
– 最新のECMAScript機能のサポート

## 2. 開発環境のセットアップ

TypeScriptを使い始めるには、Node.jsとnpmをインストールする必要があります。

1. Node.jsをインストール: https://nodejs.org/
2. TypeScriptをグローバルにインストール:

“`bash
npm install -g typescript
“`

3.

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

## 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機能は基本的には特に不自由な