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

[paiza]みんなでしりとり (paizaランク B 相当)

# 条件がめんどくせぇんよ
指定された単語リストがあるのに、そのリストから選ばない（入力例2）とかサイコパス集団がしりとりしとるんか？
もう少しルールわかる奴らでしりとりあえよ。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/word_chain

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

“`javascript:wordChain.js
// [問題文（原文）]
// あなたは友達たちと N 人でしりとりを行うことにしました。
// 1 人目、 2 人目、…、 N 人目、 1 人目、2 人目、… という順序で発言をします。
//
// ここで、それぞれの人は、次に挙げる 4 つのしりとりのルールを守って発言をする必要があります。
//
// 1. 発言は、単語リストにある K

Node.jsのBufferを使って、画像をbase64のバイナリ形式に変換してHTMLに埋め込む

Puppeteerというライブラリを使ってHTMLからPDFを作成していた時に、画像ファイルが表示されない（読み込まれない）という問題が発生
→ローカルのファイルは読み込めないのでバイナリで埋め込む必要がある、とのことだった

Bufferを使って変換する方法が簡単にできたのでメモ

まず、画像をバイナリに変換する方法
“`JS:logic.js
// 画像ファイルを読み込む
//../../assets/image.pngは読み込むファイルのパス
const imageBuffer = fs.readFileSync(path.resolve(__dirname, ‘../../assets/image.png’));
// BufferをBase64文字列に変換
const base64String = imageBuffer.toString(‘base64’);
“`

HTMLの実装
“`HTML:template.html

“`

バイ

[paiza]神経衰弱 (paizaランク B 相当)

# 問題文を読み解くのがめんどい。。。

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/concentration

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

“`javascript:concentration.js
// [問題文（原文）]
// 神経衰弱と呼ばれるトランプゲームのシミュレーションをしましょう。
// 今回は数字が書かれたトランプのみを考え、ジョーカーは考えません。
//
// まず、トランプを縦 H 枚、横 W 枚の長方形の形に並べた状態でスタートします。
// H × W 枚のトランプには 1 〜 13 の数字のうちどれか1つが書かれています。
// また、同じ数字が書かれたトランプが複数あります。
//
// プレイヤーが N 人おり、それぞれ 1 〜 N で番号付

APIのテストをStepCIで実装した際のナレッジ

APIのリグレッションテストが元々はJMeterで実装されていたが、人によりJAVAの環境が違って動かなかったり、スクリプトがjavascriptで書かれていたり(古いJAVAでしか動かない)など運用が面倒になっていたので、StepCIで実装しなおす事に。

– StepCI
https://stepci.com/

テストコードがyamlで記述でき可読性、メンテ性も良くなる。かつCIの実装も簡単になるのでヨシ。
ただ動的なテストデータを使用したい場合は多少スクリプトを書く必要があるため、それを書いた際のナレッジ。

##### 以下、実装サンプル　
“`js:stepci.js
import { run } from ‘@stepci/runner’

// Workflow定義
const workflow = {
version: “1.0”,
name: “Sample Test Workflow”,
// includeしているworkflow共通で使用する変数
env: {
host: “localhost:8080”,
header: {

Azureのfreeプランでnodeアプリをホストする際に容量不足になった場合の対処方法

AzureWebAppsのフリープランで試しにホストする際、node.jsアプリだと度々デプロイに失敗します😥
その時、フリープランは1GBのストレージしかなく、デプロイ時にあげたzipファイルサイズやら、展開後のファイルサイズやら、node_modulesのサイズやらで容易に上限に達してしまいます、、(remixアプリをあげたときの所感です)
わざわざリソースを作り直すのも面倒なので、以下の手順でクリーニングを行って対処しました

:::note info
1. Azure Web Appsの高度なツールに接続する
2. bash接続を選び、`npm cache clean -force`を実行する
:::

上記によりストレージ内のnpmキャッシュがクリアされ、容量に余裕が出ると思います
検証はしていませんが`~/site/wwwroot`配下を`rm -r`することでも容量を削減でき、再度デプロイできるんじゃあないかと思います
~~時間がとれなかったので記事作成ちょっと手抜きしました~~

VSCodeでデバックができるPlaywrightの自動ソース生成(所要時間5分)

## Playwrightとは
Webサイトの自動テストツールです。Microsoft製のツールでブラウザの操作からソースを自動生成する機能があります。

Node.jsのプロジェクトをローカルに環境を作るのでPCを汚すことが少なくとも少ないと思っています。
(不要の場合はプロジェクトフォルダを削除で解決。npxでインストールするブラウザのプラグインは$HOME/.npm/_npxや他の場所に保存されていないのではと思っています)


## 前提条件
・Node.jsがパソコンに入っていること。
入っていれば5分で実用できます。
(Macの場合のインストール方法は[こちら](https://qiita.com/ryouta33/items/193b43a524f11c045ed3))

## PlaywrightのTest

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ファイルから
~~~ya

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