- 1. Fuse.jsを使って あいまい検索(fuzzy search)をする
- 2. JavaScriptでWebサイト作業自動化
- 3. Web上のボタンを押すと指定範囲を印刷自動化
- 4. [paiza]暇を持て余した神々の遊び(じゃんけんの手の出し方 (paizaランク A 相当))
- 5. VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化
- 6. 2024年におすすめのMac開発ツール（超使いやすい）
- 7. [paiza]と～う！！
- 8. 新しいReactプロジェクトの始め方
- 9. [paiza]山あり谷ありラジバンダリ
- 10. Voltaのインストール手順（macOS, zsh）
- 11. [paiza]本の整理 (paizaランク A 相当)
- 12. 【Node.js】MySQL と接続して CRUD 機能を実装する
- 13. [paiza]【殿堂入りキャンペーン】名刺バインダー管理 (paizaランク B 相当)
- 14. [paiza]長テーブルのうなぎ屋 (paizaランク B 相当)
- 15. [paiza]みんなでしりとり (paizaランク B 相当)
- 16. Node.jsのBufferを使って、画像をbase64のバイナリ形式に変換してHTMLに埋め込む
- 17. [paiza]神経衰弱 (paizaランク B 相当)
- 18. APIのテストをStepCIで実装した際のナレッジ
- 19. Azureのfreeプランでnodeアプリをホストする際に容量不足になった場合の対処方法
- 20. VSCodeでデバックができるPlaywrightの自動ソース生成(所要時間5分)
Fuse.jsを使って あいまい検索(fuzzy search)をする
Node.js環境で[Fuse.js](https://www.npmjs.com/package/fuse.js)を使用して簡単にあいまい検索を実装する方法を紹介します。
Fuse.jsはJavaScript製の軽量な全文検索ライブラリで、特にデータを加工したり、難しい知識を必要とせずにあいまい検索を実現することができます。
https://www.fusejs.io/
## 準備
まず、必要なモジュールをインストールします。Node.jsのプロジェクトを作成し、以下のコマンドを実行して必要なモジュールをインストールします。
“`
npm install fuse.js
“`注意点としては `fuse` ではなく `fuse.js` とすることです。[なぜなら `fuse` という名の別名のモジュールが存在している](https://www.npmjs.com/package/fuse)からです。
次に、サンプルコードを以下に示します。今回のコードはJIRAのAPIからデータを取得し、Fuse.jsを使用して検索結果をフィルタリングし、結果をTSVファイルとして保
JavaScriptでWebサイト作業自動化
## JavaScriptでWebサイトの作業を自動化
Webサイトで行う作業を自動化したかったので、JavaScript（以下、js）で簡単に作ってみました。
備忘録がてら、基本的なことを記録してます。js経験者やプログラミングできる人は比較的楽で簡単に使えるかと思います。
本作業はNode.jsを使用します。
また、当方はwindows11環境になります。## Node.jsのインストール
以下より、Node.jsのインストーラをダウンロードし、インストールをしてください。
https://nodejs.org/en/download/prebuilt-installer## プロジェクトフォルダを作成
ソースを格納するフォルダを任意の場所に用意します。例では「AutoJS」というフォルダ名にします。
コマンドで行う場合は、mkdirで作成できます。## nodeからpuppeteerをインストールする
コマンドプロンプトで先程作成したプロジェクトフォルダ（以下、pjフォルダ）にカレントディレクトリを移動して、以下を入力します。**npm install puppe
Web上のボタンを押すと指定範囲を印刷自動化
# 展示会での物理的な思い出
パラメータいじるだけでグラフィックを作成できる展示に物理的な思い出を持たせたい！！！！
クリエイティブコーディングやWeb上で作成したグラフィック、
それをポストカードやステッカーなどで持ち帰る体験を作りたいなと思いボタンを押しただけで自動で印刷まで出来上がる仕組みを構築しました
以下はその簡易実装例です## 概要
本記事では、Webページ上のボタンをクリックすることで指定範囲をキャプチャし、その画像をサーバーに送信して自動で印刷する仕組みを実装する手順を紹介します。使用技術や環境構築、各コード例を含めて解説します。
### 使用技術
– HTML2Canvas
– Node.js v18.17.0 （Express, Multer）
– ShellScript### 簡単な流れ
1. HTML2Canvasで指定範囲を保存
2. 画像データをサーバに送る
3. クライアントから送信されたデータを受け取る
5. シェルスクリプトをリクエスト
5. 印刷を実行## 実装
### 環境構築`Node.js` が入ってない方はこち
[paiza]暇を持て余した神々の遊び(じゃんけんの手の出し方 (paizaランク A 相当))
# ドンドン人間離れしていく。。。
`あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す N 回のじゃんけんの手が全て分かってしまいました。`何年もたつのだから もう気が付かなきゃいけない
もう 心に刻まなきゃいけない……！
勝つことがすべてだと……
勝たなきゃゴミ…… 勝たなければ…… 勝たなければ……
勝たなければ………！https://paiza.jp/works/mondai/a_rank_skillcheck_sample/janken
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:janken.js
// [問題文（原文）]
// あなたはこれから友人と N 回じゃんけんをします。しかし、あなたは全てを見通す千里眼の持ち主なので、友人がこれから出す
VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化
## アジェンダ
VoltaでプロジェクトのNode.jsとnpmのバージョンを固定化する方法をまとめます。## 手順
プロジェクトにNode.jsの特定バージョンを固定するには、以下の手順に従います。まず、プロジェクトのディレクトリで次のコマンドを実行してください（バージョン番号は適宜変更してください）。“`sh:Node.jsのバージョンをプロジェクトに固定する
volta pin node@12.22
“`同様に、npmのバージョンを固定する場合も、以下のコマンドを実行します。
“`sh:npmのバージョンをプロジェクトに固定する
volta pin npm@9.3.1
“`この操作により、指定されたバージョンはプロジェクトディレクトリに戻ると自動的に有効になります。
この操作を行うと、プロジェクトの`package.json`には以下のように設定が追記されます。
“`json:固定されたバージョンの管理
“volta”: {
“node”: “12.22”,
“npm”: “9.3.1”
}
“``package.json`に設定が
2024年におすすめのMac開発ツール（超使いやすい）
仕事をうまくやるには、まず道具を磨かなければならないと言われています。有用なツールは私たちをより効率的にすることができ、美しいインタフェースは私たちを喜ばせることができます。そのため、使いやすく視覚的に魅力的な開発ツールは私たちの開発ツールです。
そこで今日は、2024年のMacに適した開発ツールをお勧めしたいと思います。それらはあなたにとって実用的で役に立つものです。
1.TablePlusTPはデータベース管理ツールであり、ここで記述されていますが、NaviCatを使用して可用性を高めることをお勧めします。Navicatは有料ですが、「ラーニング版」を選択することができます。私がTPを使ったのは、NavicatがすべてのTPをアンインストールするように会社に手紙を送ったからです。だから私はこの代替案を見つけて、それもとても良いです。
複数のデータベース接続をサポート
に書いてあるYO!!“`javascript:hanoi.js
// [問題文（原文）]
// ハノイの塔というパズルがあります。
//
// 3つの杭があり、左から順にA,B,Cの杭とします。
// 杭Aに円盤が下から大きい順に n 個重なって置かれています。
// この円盤は必ず1つ上の円盤は下の円盤より小さくなくてはいけないルールがあります。
//
// このルールを守りながらAの杭からCの
新しいReactプロジェクトの始め方
## アジェンダ
新しいReactプロジェクトをセットアップするための基本的なステップをまとめます。## 1. Node.jsとnpmのインストール
Reactプロジェクトを始めるには、まずNode.jsとnpm（Node Package Manager）が必要です。これらがインストールされていない場合は、[Node.jsの公式サイト](https://nodejs.org/)からインストールしてください。### インストール方法（例：Homebrewを使用）
“`sh
brew install node
“`インストール後、以下のコマンドでバージョンを確認できます。
“`sh
node -v
npm -v
“`## 2. Create React Appの利用
Reactアプリケーションを素早くセットアップするために、Facebookが提供する公式のCLIツールであるCreate React Appを使用します。このツールは、プロジェクトの設定や依存関係の管理を自動化します。
### 新しいReactプロジェクトの作成
次に、`create-reac
[paiza]山あり谷ありラジバンダリ
# ありおりはべりいまそかり
`最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙のような凝った折り方ではなく、紙の右辺が上から左辺に重なるような二つ折りを、ただひたすら繰り返すだけです。
`おいおいおい、プログラムのし過ぎで頭おかしくなったんか？
刺し身にたんぽぽ載せる仕事とかに転職したほうがいいんじゃない？
かと不安になる問題文の冒頭。。。https://paiza.jp/works/mondai/real_event/origami
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:origami.js
// [問題文（原文）]
// 最近、ひたすら紙を折り続けるということがマイブームとなっているあなたは、今日もひたすら紙を折り続けています。それも、折り紙
Voltaのインストール手順（macOS, zsh）
## アジェンダ
JavaScriptツールチェインを簡単に管理できるVoltaのインストール手順を以下に説明します。この手順では、macOSのzshを使用しています。## インストール手順
### 方法1: 公式インストールスクリプトを使用1. **Voltaのインストール**:
Voltaは公式インストールスクリプトを使用して簡単にインストールできます。ターミナルを開き、以下のコマンドを実行してください。https://docs.volta.sh/guide/getting-started
“`sh
curl https://get.volta.sh | bash
“`### 方法2: Homebrewを使用
1. **Voltaのインストール**:
Homebrewを使ってVoltaをインストールするには、以下のコマンドを実行します。“`sh
brew install volta
“`**—– !!!ここから共通手順!!! —–**
2. **インストール後の確認**:
インストールが完了したら、ターミナルを再起動するか、以下のコ
[paiza]本の整理 (paizaランク A 相当)
# なんだかんだでAランクまで来ちゃったよ。。。
最初にSランクの簡単そうなやつを1問解いてから、Dランクで無双がしたいという浅はかな理由で始めて、C・Bと特に面白いことも言えずにダラダラ解いて来たけど、とうとうAランク問題に突入しました。https://paiza.jp/works/mondai/real_event/book_sort
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:bookSort.js
// [問題文（原文）]
// あなたはパイザ図書館で働く図書館員です。
//
// パイザ図書館には N 冊の蔵書があります。この蔵書はすべて 1 段からなる本棚で管理されています。そして、それぞれの本には 1 から N までの相異なる整数の ID がついています。本棚の本は ID 順に並んでいます。
//
// しかし、
【Node.js】MySQL と接続して CRUD 機能を実装する
# はじめに
この記事では、Node.js / TypeScript / MySQL を使ってユーザーの CRUD 機能を実装する手順について記載します。# 開発環境
開発環境は以下の通りです。– Windows11
– VSCode
– Talend API Tester
– 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# 開発環境構築
以下の手順で開発環境を構築します。https://qiita.com/Yasushi-Mo/items/f0b5b7350db4598e9573
# 実装方針
`src/index.ts` でルーティングを行い、`src/users.ts` で CRUD 処理を行います。
各 CRUD 処理は以下の流れで行います。1. DB接続
1. CRUD クエリ実行
1. DB接続切断
1. レスポン
[paiza]【殿堂入りキャンペーン】名刺バインダー管理 (paizaランク B 相当)
# 力こそパワー
いい感じの公式だったりアルゴリズムが思いつかない時に大事なのは？**そうだね、筋肉だね!!**
https://paiza.jp/works/mondai/b_rank_skillcheck_archive/name_card
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:nameCard.js
// [問題文（原文）]
// あなたはこれまでに出会った人たちの名刺を集めています。
// 名刺は、複数枚のファイルを閉じることができるバインダーに保存されています。
//
// 1枚のファイルには、n個のポケットが横に並んでおり、表と裏の両面から名刺を眺めることができます。
// このため、1つのポケットには、2枚の名刺が背中合わせに入っています。
//
// 各名刺には1から順に通し番号が付いているため、この番
[paiza]長テーブルのうなぎ屋 (paizaランク B 相当)
# 江戸っ子への偏見がすごいw
“`text
ただしお客さんは江戸っ子なので、それら座席のうち、いずれか一つでも既に先客に座られている座席があった場合、
一人も座らずにグループ全員で怒って帰ってしまいます。江戸っ子は気が早いんでぃ。
“`
この問題の世界の住人はヤベェ奴らしかおらんのか。。。https://paiza.jp/works/mondai/b_rank_skillcheck_sample/long-table
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:longTable.js
// [問題文（原文）]
// 東京の下町に長テーブルで有名な老舗うなぎ屋がありました。
//
// そのうなぎ屋にはとても大きい長テーブルがあり、テーブルの周りにn個の座席が配置されています。
// 座席には、時計回りに1, 2, …,
[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
