- 1. AWS Lambda（Node.js 18.x）でwkhtmltopdfを使用するまでの流れ
- 2. Node.jsランタイムでSJISのcsvファイルを出力するLambda
- 3. 村人の友好関係 (paizaランク S 相当) を何故かObserverパターンで解く(JavaScript)
- 4. ElectronでMacOSデスクトップアプリを作ろう！初心者向けステップバイステップガイド
- 5. 【Javascript】Consoleやdebuggerを使った開発支援
- 6. node.jsでベクトルタイルサーバを作成（レンタルサーバ編）
- 7. 【Sass】環境構築やってみた
- 8. オムライス指数をGoogleMapとOpenAIで算出するLineBOT
- 9. Windows11 に Node.js インストール(nvm-windows利用)
- 10. React開発を加速！ViteとDockerで作るシンプル開発環境入門
- 11. nvmを使ってWSL2のローカル環境のNode.jsバージョンを上げる方法
- 12. 高性能キューの実現 – Elegant Queueライブラリ
- 13. [JavaScript] [Jest] インスタンスを用いたテストコード
- 14. vercel dev コマンドで出た謎の Cannot find module エラー対処備忘録
- 15. TypeScriptチートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API])
- 16. [paiza]1周目完走（【殿堂入りキャンペーン】村人の友好関係 (paizaランク S 相当)
- 17. [Node.js] [Jest] 単体テストにおける jest.spyOn の使い方
- 18. はじめてのWebアプリを作ろう（1）-環境構築
- 19. Node.js(TypeScript)でBlueSky APIを使って画像付きでツイートするメモ
- 20. Live2DモデルをAWSのS3にデプロイ
AWS Lambda（Node.js 18.x）でwkhtmltopdfを使用するまでの流れ
# wkhtmltopdfを使用することになった背景
## Puppeteerでは大容量ファイルに対応できなかった
私が開発しているLaravelのWebサービスでは書類をPDF生成するという機能があります。
今まではAWS Lambda上でPuppeteerを使用してPDF生成を行っていましたが、最近になってHTMLファイルの時点で65MBという巨大なファイルをPDF生成するケースが発生し始めてしまい、実行途中でブラウザのタイムアウトや切断が発生するようになってしまったため、緊急で他の方法に入れ替えなければならなくなりました。## 他の選択肢の検討
最初に検討したのはLambdaを使用することを辞めて、[barryvdh/laravel-dompdf](https://github.com/barryvdh/laravel-dompdf)をWorker上で動かす運用でしたが、大きいHTMLファイルの処理に非常に時間がかかるため断念しました。
wkhtmltopdfはパフォーマンスに優れているのと、Lambda関数上でPuppeteerを使用している部分を入れ替えるだけで済むので、
Node.jsランタイムでSJISのcsvファイルを出力するLambda
# 一覧データをcsv出力
データベースにはUTF-8で補完されているものの、
「ファイルの文字コードは **Shift-JIS** で（Excelでそのまま開きたい）」
という要件があったとします。今回は **AWS Lambda(Node.jsランタイム)** で構築したアプリケーションだったので、その例です。
ポイントは以下2点です。
1. UTF-8からShift-JISへのエンコード
1. Lambdaペイロード制限を考慮してS3署名付きURLを利用## まずはcsvデータを生成
csv形式へのパースには[Papa Parse](https://www.papaparse.com/)を、エンコードには[encoding.js](https://github.com/polygonplanet/encoding.js)を使うことにしました。
“`npm install“`しておきます。DBから取得したデータ配列を渡して、csv形式＆SJISエンコードした文字列を返す処理です。
“`javascript
const Papa = require(‘papapa
村人の友好関係 (paizaランク S 相当) を何故かObserverパターンで解く(JavaScript)
## 問題
https://qiita.com/official-events/9ab96aa95d62fe3cbdd7
これの
https://paiza.jp/works/mondai/s_rank_skillcheck_archive/group_popularity
これです。
ソート、しません。## 説明
この問題に出てくる話をざっくり書くと、
– 村人と別の村人の友好度の情報(友好関係)の一覧
– 村人の加入と脱退のログ一覧があって、
ログごとに、
「加入中の村人」と「加入していない村人」の間にある友好関係の内、
最大の友好度を出すという内容です。
[Observerパターン(Wikipedia)](https://ja.wikipedia.org/wiki/Observer_%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3)というのは、
イベントのはsを「通知する側」と「通知を受ける側(リスナー)」で考えるやつですね。paizaがJavaScriptをNode.jsで動かしているのは分かっているので
標準ライブラリ
ElectronでMacOSデスクトップアプリを作ろう！初心者向けステップバイステップガイド
## はじめに
こんにちは！今回は、Electronを使ってクリックするたびに名言が変わるおしゃれなデスクトップアプリを作成します。このアプリは初心者でも簡単に作れるので、初めてのデスクトップアプリ開発にぴったりです。ぜひ一緒にチャレンジしてみましょう！
## Electronとは？
**Electron**は、JavaScript、HTML、CSSを使用してクロスプラットフォームのデスクトップアプリケーションを作成できるフレームワークです。GitHubによって開発され、Visual Studio CodeやSlackなどの有名なアプリケーションにも使われています。
## 事前準備
まずは、Electronを使うために必要な環境を整えましょう。
### 1. Node.jsのインストール
Electronを動かすためにはNode.jsが必要です。以下の公式サイトからNode.jsをダウンロードしてインストールしてください。
[Node.js公式サイト](https://nodejs.org/)
### 2. Electronのインストール
Node.jsのインストー
【Javascript】Consoleやdebuggerを使った開発支援
他にも競合記事が多そうですが！
社内で JavaScript を書いている時に、どのようにデバッグしたら良いかという質問があり記事にしました！以下、サンプルは Vue にて表示しているが、基本的に JS 系列ならすべて同じ。
—-
https://developer.mozilla.org/ja/docs/Web/API/console
:::note info
【Console 画面】
「F12」や右上の「… > その他のツール > デベロッパーツール」画面にて
「Console」タブを選択した際に閲覧できる場所。
ブラウザのターミナル。
Show console drawer を ON にすると、いつでも友達になれて便利。
でローカルホストでのnode.jsでベクトルタイルサーバを作成を解説しました。本記事では、レンタルサーバにおいて、node.jsでベクトルタイルサーバを作成する方法を解説します。使用したコードは[こちら](https://github.com/k96mz/20240822hostingPracticeServer)にあります。# レンタルサーバの設定
レンタルサーバについてあまり分かっておらず、始めは[ロリポップさんのライトプラン](https://lolipop.jp/low-price-plan/)に申し込みました。少し使ったあとに気づきましたが、こちらのサーバにはNode.jsがインストールできないということが判明したので、無料お試し期間内に解約しました。共用サーバー（1台の物理サーバーを複数人で借り受けて使用する形式のサーバー）はOSやミドルウェアなども共用しますので、自分の都合で変更することはできません。
レンタルサーバについて調べるうちに
【Sass】環境構築やってみた
## はじめに
こんにちは。
早速ですが、皆さんは**Sass**って何かご存知でしょうか。
Sass（Syntactically Awesome Style Sheets）は、CSSに機能を追加した拡張言語です。通常のCSSよりも効率的にスタイルを書くことができ、コードの再利用性や管理がしやすくなります。
…と言ってもイメージ沸かないですよね。非常に申し訳ないのですが、私はSassを学ぶ前で現時点ではこの程度しか説明できません。知識を身に着けたらチュートリアル編などの記事を書きたいと思います
という事で前振りが長くなりましたが、Sassを使う為にはまず環境構築が必要になります。
本記事は、Sassの環境構築、コンパイルについて、備忘録として記事にまとめます。
記事中で用語についてざっくり説明しますが、細かい話は分からないので気になる人はご自身で調べてみてください。## 目次
[1．なぜ環境構築が必要なのか](#1なぜ環境構築が必要なのか)
[2．Node.jsのインストール](#2nodejsのインストール)
[3．gulpモジュールのインストール](#3gulpモジュールのイン
オムライス指数をGoogleMapとOpenAIで算出するLineBOT
## 昔ながらのオムライスが食べたい
昔ながらのオムライスを出す店が急激に減っています。
そこで、この駅に行けばありつけるよ、という情報を数値化することを考えています。その数値を***オムライス指数***と名付けて、それを算出、活用できるアプリを開発して、オムライスを食べる探索に出かけたいと考えています。
今回は、そのプロトタイプをLineBOTで作ってみました。
## 作成したLineBOT
https://x.com/tadokuno/status/1825799731223867719
駅名を入力すると、その駅のオムライス指数を返します。
それを算出する根拠となる情報も同時に返しますが、本来は返す必要のない情報です。
プログラムが正しく動いていることを確認するために出力しています。
アプリを作るための第1ステップなので、ユーザービリティは考えられていませんが、ご了承ください。## オムライス指数の各要素
最終的なオムライス指数の構成要素は10個なのですが、今回のプロトタイプではそれを6個としました。
各要素は、0点から10点の間の整数値をとり、合算して0点か
Windows11 に Node.js インストール(nvm-windows利用)
Windows11 に Node.js インストールしてみる
以前、Node.js を通常インストールしたがバージョン管理の必要が出てきたので nvm-windows より Node のバージョン管理できるようにしたときのメモです
MSのドキュメントにある [Windows での NodeJS のインストール](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows) を参考にしてますやることは大雑把にこんなところ
– Node.js アンインストール
– Node.js(nvm-windows) インストール:::note info
コマンドプロンプト or Powrshell を使う時は 「管理者として実行」 で起動する
:::# Node.js アンインストール
MSのドキュメントよりOSに Node.js 入ってる場合はアンインストールを推奨してる
環境変数とか残ったままだとハマりそうなのでアンインストールしておきます1. 現状の Node.
React開発を加速！ViteとDockerで作るシンプル開発環境入門
## はじめに
この記事は、弊社で行うインターンシップのプラス要素の資料として書きました。
5日間のインターンでは、環境構築を必要としないCodesandboxを使用します。
インターンを通じて、さらに興味を持った学生向けに今回の資料を作成しました。この記事の目的は、記事に出てくるツールなどを使いこなすのではなく、入門編として今後Dockerなどを使用することが出てきた際に抵抗なく、始められるようになることを目指して作成しています。
### 対象者
– 弊社のインターン生
– Viteを使ってReactの環境構築したい人
– Vite + Dockerを使って環境構築したい人
など…### 今回出てくるものたち
– Node.js
– Docker
– React
– Vite### 出てこないもの
ツールそれぞれの詳しい解説## Node.jsの準備
今回、npmコマンドを使用するため、Node.jsをインストールします。
まず、バージョンを確認するコマンドで、npmコマンドが使用できるか確認しましょう。
“`bash
$ npm -v
10.5.1
“`
nvmを使ってWSL2のローカル環境のNode.jsバージョンを上げる方法
とある作業中に`npm create vite@latest . — –template react`をしたら大量のWARNINGが出た。
“`
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘create-vite@5.5.2’,
npm WARN EBADENGINE required: { node: ‘^18.0.0 || >=20.0.0’ },
npm WARN EBADENGINE current: { node: ‘v19.5.0’, npm: ‘9.3.1’ }
npm WARN EBADENGINE }
“`
これは`vite`が要求するNode.jsのバージョンに対して、現在の環境のバージョンが満たされていないという事らしい。
なのでNode.jsのバージョンを上げてみた。※自身の備忘録なので少し細かいかもしれません。必要な箇所だけ参考にしてください。
※間違いがありましたら指摘してもらえると嬉しいです！# nvmの利用
まず、バージョンを上
高性能キューの実現 – Elegant Queueライブラリ
## 概要
JavaScript や TypeScript では、配列がキューの実装に頻繁に使用されます。組み込みの `shift()` メソッドは、ゼロ番目のインデックスにある要素を削除し、残りの要素を下にシフトしますが、これは要素の再インデックス化が必要なため O(n) の時間計算量を持ちます。
### サーキュラーバッファの利点
特に大規模なデータセットを扱う場合にキュー操作を最適化するために、サーキュラーバッファは非常に効果的なソリューションです。サーキュラーバッファは固定サイズの配列で要素を管理し、ラップすることで `enqueue` と `dequeue` 操作を O(1) の時間計算量で実行することができます。
**主な利点:**
– **メモリ効率:** サーキュラーバッファは固定サイズの配列を使用し、ラップすることで、サイズ変更の必要がなく、メモリオーバーヘッドを最小限に抑えます。
– **一貫した O(1) のパフォーマンス:** 操作が一定の時間内で完了し、配列のサイズ変更やシフトによるパフォーマンスの低下を避けることができます。
– **メモリ断片化の
[JavaScript] [Jest] インスタンスを用いたテストコード
# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0# 活用例1
## テスト対象クラス
– クラス: `Person`
– プロパティ: `name`（名前を格納する文字列）、`age`（年齢を格納する数値）
– メソッド: `greet()`（挨拶のメッセージを返す）
~~~ts:person.ts
class Person {
constructor(public name: string, public age: number) {}greet(): string {
return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
}
}
~~~
または（上記は**可読性が高い**、下記は**冗長**とされる）
~~~ts:person.ts
class Person {
public name: string;
vercel dev コマンドで出た謎の Cannot find module エラー対処備忘録
# 前提
vercel serverless functions として `api/a.ts` が用意してあり、ローカルで起動するために [`vercel dev` コマンド](https://vercel.com/docs/cli/dev) を使う
next.jsは使っていない# 発生したこと
ローカルで起動して `http://localhost/a` にアクセスすると、
`502: BAD_GATE_WAY` になり、以下のような謎のエラーが発生“`
Error: Function `api/a.ts` failed with exit code 1
node:internal/modules/cjs/loader:1148
throw err;
^Error: Cannot find module ‘/Users/me/Library/Application’
Require stack:
– internal/preload
at Module._resolveFilename (node:internal/modules/cjs/loader
TypeScriptチートシート(TypeScript(JavaScript)の文法を学び，フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API])
みなさんTypeScript(JavaScript)でどんなことができるかご存知ですか？初学者向けの言語や大規模開発でよく使う言語だというイメージがあると思います．TypeScript(JavaScript)はフロントの開発からバックの開発までなんでもできる非常に有用な言語です．本記事ではプログラミングをしたことのない人やTypeScript(JavaScript)を触った人のステップアップのためなど幅広い方向けに書きました．また，Node.jsの仕組みやReact,Vue.jsでの応用例やAPI作成まで網羅しました．配列を操作する際の便利な関数やUIライブラルの紹介といった便利機能も記載しています．文法がわからなくなったら適宜文法の欄に戻って確認したり，逆に飛ばしてみたい方はどんどん先に進んで読んでいってください！
# 他のチートシート
Docker コマンドhttps://qiita.com/JavaLangRuntimeException/items/21f7c7bf3d143f821697
git/gh コマンド
https://qiita.com/JavaLangR
[paiza]1周目完走（【殿堂入りキャンペーン】村人の友好関係 (paizaランク S 相当)
# くぅ～疲れましたw
やっとJavaScriptで問題が一通り終わったよ～！
次回【Javaで2周目】、ディエルスタンバイ！！https://paiza.jp/works/mondai/s_rank_skillcheck_archive/group_popularity
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:groupPopularity.js
// [問題文（原文）]
// あなたは今「PAIZA の村」という、村人と交流しながら生活していくゲームで遊んでいます。
// 村人は合計で N 人であり、各村人は 1 ～ N で番号付けられています。
// このゲームの目的の一つは村の人々と仲良くなることです。
// これを示すパラメータとして、各村人と村人の間には「友好度」と呼ばれる非負整数が定められています。
//
//
[Node.js] [Jest] 単体テストにおける jest.spyOn の使い方
# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0# 目次
# `jest.spyOn(object, methodName)`の基本構文
> jest.fnと同様の関数を作成しますが、引数に与えられたobject[methodName]へのコールも実装します。 Jestの モック関数を返します。~~~ts:xx.test.ts
const spy = jest.spyOn(object, methodName);
~~~# `mockFn.mockResolvedValueOnce(value)`の基本構文
> モック関数を1回呼び出したときに返す値を受け取ります。 次のモック関数へのコールが異なる値を返せるようチェーンすることができます。~~~ts:xx.test.ts
const spy = jest.spyOn(object, methodName);
spy.mockResolvedValueOnce(value);
~~~# 活
はじめてのWebアプリを作ろう（1）-環境構築
HTML・CSS・JavaScriptの基本を学び終えた初心者です。
学んだことを体系的に復習するため、いくつかWebアプリを作っていきます。
定番のToDoアプリを作成したのち、TypeScript・Reactを用いてアップグレードしていく予定です。私と同じように基本を学び終え、「次なにしよう…」と迷っている方の一助となれば幸いです。
今回は環境構築について一部まとめます。
※プログラミング初学者がまとめている記事です。
温かい目で見守ってくださると嬉しいです:hugging:# 前提条件
以下の環境で使用している前提でまとめていきます。
– OS：Windows10 22H2 or Windows11
– エディタ：Visual Studio Code
– 仮想環境：Docker Desktop# 1.Docker導入
仮想環境の構築については、すでに多くの先輩方が解説されているので、そちらの記事を参考にします。
まずはじめに、WSL2とDockerを導入します。
– [Windows上でDocker環境を作成する方法とその構成](https://qiita
Node.js(TypeScript)でBlueSky APIを使って画像付きでツイートするメモ
## はじめに
Twitter APIをしらべてみたらBlueSkyも気になってみた。
結論から言えば、”@atproto/api”さえインストールすればもう大丈夫。よくできている。文字列にリンク先がある場合はRichTextを使えば、自動判別してくれる。便利。っていうかRichTextを使わないとリンクしてくれない。いけず。
“` typescript:blueskyManager.ts
import {BskyAgent, RichText} from ‘@atproto/api’
import fs from “fs”;
export class BlueskyManager {
private readonly _agent: BskyAgent;
constructor() {
this._agent = new BskyAgent({
service: “https://bsky.social”,
});
}private login = async () => {
Live2DモデルをAWSのS3にデプロイ
# Live2D モデルをブラウザでどこからでも見られるようにしたい！
## 目次
– [はじめに](#はじめに)
– [前提条件](#前提条件)
– [手順概要](#手順概要)
– [1. Live2D SDK for Web をダウンロード](#1-live2d-sdk-for-web-をダウンロード)
– [2. サンプルモデルを組み込んでビルド](#2-サンプルモデルを組み込んでビルド)
– [3. AWS S3 バケットを作成](#3-aws-s3-バケットを作成)
– [4. ビルド生成物を S3 にアップロード](#4-ビルド生成物を-s3-にアップロード)
– [さいごに](#さいごに)## はじめに
どうも、駆け出しのぴよぴよエンジニアです。
本記事では、Live2D SDK for Web を使用して、作成した Live2D モデルを、AWS の S3 にデプロイしてブラウザで表示させる手順について説明します。将来的にはコミケで売り子アプリのようなものを作
