- 1. Playwright – FullPage指定のスクリーンショット撮影で意図しないマウスオーバー効果・ブラウザサイズ変更が起こってしまう
- 2. Node.js のサポート期間を８年に延ばせる（かもしれない）ひとつのやり方
- 3. Node.js 利用可能なメモリ量
- 4. 【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法
- 5. Hubot Slack アダプターや RTM API から移行先について
- 6. 拡張子がmjsとjsのファイルの違いについて
- 7. ExpressにreCAPTCHAを埋め込む
- 8. Node.jsのdb-migrateで環境変数を利用する
- 9. Azure Static Web AppsのデプロイでGitHub ActionsのNode.jsのバージョンを指定する
- 10. Promise.allの魔法：複数の非同期操作を一度に処理
- 11. Node.jsで待望（?）のコンソールの色を変えられるようになった
- 12. node.jsでメモリの使用量を調べる方法
- 13. 浦島太郎の為のJavaScript周り整理メモ
- 14. Node.jsとMessaging APIでプッシュメッセージを送ろう
- 15. Voltaを使用していることによるNodeのバージョン変更ができない時の対処法について
- 16. Disocrd.js 主要権限名
- 17. 【M3 Mac】 HomebrewとNode・npmの導入
- 18. Node.jsでGoogleスプレッドシートを手軽に読み取る
- 19. node.jsのREPLで深いobjectを全部表示する
- 20. 【Webアプリ開発】23卒、新卒1年目にやれたこと
Playwright – FullPage指定のスクリーンショット撮影で意図しないマウスオーバー効果・ブラウザサイズ変更が起こってしまう
Playwrightの操作動画を記録してみて分かったのだが、Playwright は fullPage のスクリーンショット撮影の時、ブラウザサイズを変更することでスクリーンショット撮影を実現してそうな気がする
このため
– 意図しないブラウザサイズ変更がおこなわれる
– 副作用でカーソル位置が変わってしまうという現象が起きていそうだった
カーソル位置の問題に関しては、スクリーンショット撮影前にカーソル位置を左上に移動させておくことで、問題を抑止しやすくなるかもしれない
“`js
await page.mouse.move(0, 0)await page.screenshot({
path: `foo.png`,
fullPage: true,
})
“`# チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ
# プロフィール・経歴
https://github.com/Yu
Node.js のサポート期間を８年に延ばせる（かもしれない）ひとつのやり方
先日、「[Javaエンジニアのための Nodejs/Nuxt3入門](https://speakerdeck.com/hidekatsu_izuno/nuxt3ru-men)」という資料を公開したのですが、Node.js がすでに業務システムを作るのに十分な環境が整っています。しかし、どう考えても導入を進めるためのネックになっている項目があります。それは LTS （長期サポート）の短さです。
Node.js のランタイムは偶数バージョンが LTS となっており、リリースの半年後に長期サポートが始まり 30 カ月後にはセキュリティ・パッチの提供が受けられなくなります。実はこの 30 カ月という期間は、PHP（3年） や Ruby（3 年 3カ月） といった他の言語ランタイムに比べて特別短いわけではないですし、JavaScript の言語としての安定性を考えれば、気軽にメジャーバージョンアップをすればいいと思うのですが、これがこと業務システムとなると大問題になります。
業務システムの開発に長く携わっていると、多くの日本企業が EOL（製品のライフタイム終了）を非常に気にしていることに気
Node.js 利用可能なメモリ量
–max-old-space-size で設定する
“`
NODE_OPTIONS=”–max-old-space-size=999″
“`
デフォルト値、1400MB らしい
デフォルトで、積んでるメモリの50%までらしい。–max-old-space-sizeを設定しても、積んでるメモリによって制限されるっぽい。
384MBのコンテナに–max-old-space-size=300を設定したが、231BMしか使えないぽかった。“`.ts
const v8 = require(‘v8’);const heapStatistics = v8.getHeapStatistics();
const totalHeapSizeMB = (heapStatistics.total_available_size / 1024 / 1024).toFixed(2);console.log(`Total available heap size: ${totalHeapSizeMB} MB`)
“`
【TypeScript】yarn4 + VSCodeでts2307が一生出続ける問題の解消法
執筆時点で最新版のモジュールをガチャガチャかき集めたVue.jsプロジェクトを作成しようとしたところ、一瞬つまずいたのでここに解決方法を書きしたためておきます。
# やること
– TypeScriptで記述し、Node.jsランタイムに突っ込み、Yarn v4で依存関係を管理しているようなプロジェクトで、表題の問題を解決する
– `tsconfig.json`を極力いじらず、解決したい
– 解決方法は下記2通りのどっちでもOK
1. `.yarnrc.yml`に1行書いて、Yarn v2以降特有のパッケージ依存解決方法をYarn v1と同じやり方に設定する
2. VSCode用のYarn Editor SDKを設定して、VSCodeがインストールされたモジュールを認識できるようにする# 問題とその原因
## 問題
> TS2307: Cannot find module or its corresponding type declarations
このエラーがVSCodeだけで出現し続けてわずらわしいというのが問題です。画像を見ると「？？？」となる
Hubot Slack アダプターや RTM API から移行先について
こんにちは、Slack の[公式 SDK 開発](https://github.com/slackapi)と日本の Developer Relations を担当している瀬良 (@seratch) と申します :wave:
今週、Slack プラットフォームチームより以下のアナウンスメントが出ました。
https://api.slack.com/changelog/2024-04-discontinuing-new-creation-of-classic-slack-apps-and-custom-bots
要点をまとめると以下の三点となります。
* 2024 年 6 月 4 日以降、”classic app” と呼ばれる [RTM API](https://api.slack.com/legacy/rtm) や旧式の bot scope を持つアプリは新規で作成できなくなります
* これまでに作成されたアプリは引き続き動作しますが、RTM から [イベント API](https://api.slack.com/apis/connections/events-api) への早め
拡張子がmjsとjsのファイルの違いについて
Nodeのバージョン18以上のLambdaでは、デフォルトファイルの拡張子が`mjs`に変更されています。LambdaのNodeのバージョンを更新するにあたり、`mjs`ファイルと`js`ファイルとの違いについて調査しました。結論として、拡張子の違いはJavaScriptのモジュールシステムの違いに由来しています。以下、詳細を解説します。
## 拡張子が.mjsと.jsのファイルの違い
### 前提
JavaScriptには2つの主要なモジュールシステムが存在します。
– CommonJs
– ECMAScript(ES Module, ES2015)### モジュールシステムと拡張子
– CommonJs: cjs（あまり一般的ではありません）
– ES Module: mjs拡張子が`js`の場合は、`package.json`内の`type`フィールドで指定されたモジュールシステムに従います。`type`は`”commonjs”`または`”module”`のいずれかを指定できます。指定がない場合、デフォルトはCommonJSとなります。
## 実験
### 拡張子が.
ExpressにreCAPTCHAを埋め込む
BOT対策として、Expressで作成したフォームにGoogleのreCAPTCHA(v3)を埋め込みます。
## 1. GoogleのreCAPTCHAに登録する
Googleが提供するサービスなので、規約に同意して登録します。
https://www.google.com/recaptcha/about/
## 2. ドメインの設定
WebサイトのURLで使用しているドメインを追加します。
ローカルの開発環境でも動作させたいので、「localhost」も追加しておきます。## 3. Viewの.ejsにHTMLタグを追記する
header部に.jsファイルのロードと送信関数を追記します。
次に、フォームの送信ボタンを置き換えます。
サイトキーはreCAPTCHAを登録するとGoogleから貰えます。onSubmit関数でformタグのidを指定しているので、書き換えるのを忘れずに。
“` html
Node.jsのdb-migrateで環境変数を利用する
# 目的
Node.jsでdb-migrageパッケージを用いてMigrationをしたい。
その際、jsonファイル内で環境変数を用いてMySQLのパスワードを設定したい。##### 参考
https://qiita.com/tiwu_dev/items/77b60ac9efa15142468d# 解決策
公式のDocumentにしっかりと書かれていた。https://db-migrate.readthedocs.io/en/latest/Getting%20Started/configuration/
> You can also specify environment variables in your config file by using a >special notation. Here is an example:
>
>“` json: database.json
>{
> “prod”: {
> “driver”: “mysql”,
> “user”: {“ENV”: “PRODUCTION_USERNAME”},
> “passw
Azure Static Web AppsのデプロイでGitHub ActionsのNode.jsのバージョンを指定する
# はじめに
今回は、AzureのStatic Web Appsにおいて、GitHub Actionsによるデプロイ時のNode.jsのバージョンを指定する方法について書いていきます。
とある依存ライブラリが、Node.jsがv18以上でないと動かないようになってましたが、これをGitHub Actionsでビルド＆デプロイしようとしたときに、v16が使われてしまい失敗するということが起きたので調査しました。
## Azure Static Web Appsとは
Azure Static Web Appsとは、GitHubとの連携が強力なWebホスティングサービスです。
https://learn.microsoft.com/ja-jp/azure/static-web-apps/overview
GitHub Actionsを利用して、プッシュしたら自動デプロイ、みたいなフローが簡単に構築できます。
また、Azure Functionsが組み込まれており、バックエンド処理を記述することも可能です。
# エラーが起きたポイント
これは、GitHub Actionsのロ
Promise.allの魔法：複数の非同期操作を一度に処理
# はじめに
Promise.allは、複数のPromiseオブジェクトを並行して処理するための非常に便利なJavaScriptの機能です。複数の非同期操作を完了する必要があり、これらの操作が相互に依存していない場合に、Promise.allは特に便利です。
# Promise.allを利用前
以下の関数を参考にしてください。この関数では、すべてのステップが前のステップが終了するのを待ってから実行されますが、実際にはご飯を炊くことと野菜を切ることは同時に行うことができます。そのため、かなりの時間が無駄になっています。
“`typescript:example.ts
// チャーハンを作る関数
const makeDish = async (): Promise=> {
await prepareIngredients(); //食材を用意する
await cookRice(); //ご飯を炊く
await chopVegetables(); //野菜を切る
await addIngredients(); //食材を入れる
await stirFry(
Node.jsで待望（?）のコンソールの色を変えられるようになった
Node.js 21.7.0のアップデートでText Stylingという項目がありました。
コンソールに表示させる **文字の色や装飾や背景色を変えられる**ようになります。
> 
> https://github.com/nodejs/node/releases/tag/v21.7.0“`js
const { styleText } = require(‘node:util’);
const errorMessage = styleText(‘red’, ‘Error! Error!’);
console.log(errorMessage);
“`こんな感じでコンソールの文字色が外部モジュール無しで変えられま
node.jsでメモリの使用量を調べる方法
この記事では、Node.jsでメモリ使用量を調べるための方法を紹介します。
## process.memoryUsage()メソッドの使用
Node.jsには、現在のプロセスのメモリ使用状況を調べるための組み込みのメソッドがあります。process.memoryUsage()は、ヒープ使用量、ヒープの合計サイズ、RSS(Resident Set Size)など、様々なメモリ使用指標を含むオブジェクトを返します。
“`
/*
rss (Resident Set Size): 全てのメモリ使用量を含む、プロセスに割り当てられたメモリの量
heapTotal: ヒープに割り当てられた合計メモリの量
heapUsed: 実際に使用されているヒープのメモリの量
external: V8エンジン外部で確保されたメモリの量（例えば、ネイティブモジュールによって確保されたメモリ）
*/const used = process.memoryUsage();
const messages = [];
for (let key in used) {
const mb = Math.round
浦島太郎の為のJavaScript周り整理メモ
## はじめに
ちょこちょこJavaScript周りは追っていたが、変化が目まぐるしく追いつけていなかった。
業務で使うに当たり、ざっくり把握し直したのでメモ。## 言語周り
### 標準仕様: 実装状況はブラウザなど実行環境に依る
– CommonJS: requireで読み込むやつ
– ECMAScript: importで読み込むやつ。こっちが標準になっていく### 型付け
– TypeScript: 結局JSに変換して実装するので後付けという立ち位置## 実行環境周り
### エンジン
– V8: Node.jsやChromeで使われている
– JavaScriptCore: WebkitなどAppleで使われている？### ランタイム
– Node.js
– Deno: npmの反省から生まれる。パッケージ管理機能込み。Rust製
– Bun: 早い。Node.jsの置き換えを狙う。Zig製### パッケージマネージャー: どれか一つを選ぶ。bundler的なやつ
– npm (+ npx): 大きなプロジェクトなどだと遅さが問題になる？
– yar
Node.jsとMessaging APIでプッシュメッセージを送ろう
## はじめに
[前回](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee)に引き続き、MessagingAPIの練習です。
今回はボット側から任意のタイミングでメッセージを送ることができるプッシュメッセージに挑戦します。Node.jsとMessaging API、そしてボットのサーバーとしてRenderを使用します。
構築手順については[前回](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee)の記事を参考にしてください。また、本記事は以下のソースコードをベースにし、以降で紹介する処理を追加していくことで実装を進めます。
ソースコードを確認する
“`javascript:app.js
// モジュールのインポート
const https = require(“https”);
const express = require(“express”);
const fs = require(“fs”);/
Voltaを使用していることによるNodeのバージョン変更ができない時の対処法について
## Nodeのバージョン変更ができない時の対処法について
今回Nodeを指定してインストールしたが、バージョンが変わらず沼りかけたので記事にしました。
“Node バージョン 変わらない” などで検索してみたものの、どの記事の内容を実行しても状況が変わりませんでした。
原因は”Volta”を使用していたことにあります。
その経験を元に対処法を共有できればともいます。注：
“Volta”については個人で調べてください。
“Volta”を使用しているということはプロジェクトでバージョンを統一している可能性があります。
ですので、プロジェクトに影響がないか等の影響範囲を確認した上でバージョンの変更をするように。まずNodeを指定してダウンロードしたのに変わらない場合、まずは下記コマンドを実行してください。
“node”コマンドの実行可能ファイルがどの場所にあるかが表示されます。
“`.ターミナル$ which node
“`
確認できたらそのファイルに移動し”node -v”を実行すると変更前のバージョンが出てくるはずです。
出たきたら下記コマンドでnodeをイ
Disocrd.js 主要権限名
# Discord.js v14のメンバーの主要権限名
d.jsで、メンバーが所持している権限の確認するなどの際に使用する権限名を書いていきますが、すべての権限を書いているわけではありません。:::note warn
Disocrd.js v14で動作します。その他のバージョンでは動作はしない可能性があります。
:::
##
### サーバーでの権限
– ADMINISTRATOR: サーバー全権限（管理者）
– KICK_MEMBERS: メンバーのキック権限
– BAN_MEMBERS: メンバーのBAN権限
– CREATE_INSTANT_INVITE: 招待リンクの作成権限### テキストチャンネルでの権限
– VIEW_CHANNEL: チャンネルの閲覧権限
– SEND_MESSAGES: メッセージの送信権限
– MANAGE_MESSAGES: メッセージの管理権限
– MENTION_EVERYONE: everyoneメンションの送信権限### ボイスチャンネルでの権限
– CONNECT: ボイスチャンネルへの接続権限
– SPEAK: ボイスチャ
【M3 Mac】 HomebrewとNode・npmの導入
# HomebrewとNode・npmの導入
Node・npmはともかく、Homebrew導入で途中エラったので備忘録
環境はM3 MacBookAir# Homebrewの導入
## １. インストールするディレクトリに移動
以下のコマンドを実行し、`/Users/{user-name}`ディレクトリへ移動**{user-name}は環境によって異なる。**
“`shell:実行内容
cd ~
“`
:::note info
Macの純正ターミナルは初期ディレクトリがここ
どこにインストールするかは個人が任意に設定（あくまで自分はここ）
:::## ２. Homebrewをインストール
以下のコードをコピーするか、公式サイトからコピーして実行
“`shell:実行内容
/bin/bash -c “$(curl
Node.jsでGoogleスプレッドシートを手軽に読み取る
## はじめに
Node.jsでGoogleスプレッドシートを読み書きするためには、公式のnpmとして[googleapis](https://www.npmjs.com/package/googleapis)が提供されており非常に便利ですが、より少ないコード量で手軽に様々な機能を扱うためのラッパーである[google-api-tool-box](https://www.npmjs.com/package/@genta-mz/google-api-tool-box)を公開したので、使い方を解説します。## インストール
Node.jsのプロジェクトを作成し、`@genta-mz/google-api-tool-box` をインストールしてください。
“`shell
$ npm i @genta-mz/google-api-tool-box
“`
https://www.npmjs.com/package/@genta-mz/google-api-tool-box## GoogleAPIでアクセスするための認証情報をセットアップする
一番簡単なのはGCPプロジェクトの
node.jsのREPLで深いobjectを全部表示する
“`
> repl.writer.options.depth = null
“`例
“`
> {1: {1: {1: {1: {1: 1}}}}}
{ ‘1’: { ‘1’: { ‘1’: [Object] } } }
> repl.writer.options.depth = null
null
> {1: {1: {1: {1: {1: 1}}}}}
{
‘1’: {
‘1’: { ‘1’: { ‘1’: { ‘1’: 1 } } }
}
}
“``repl.writer.options` に `util.inspect` の第二引数を設定できるようだ。
https://github.com/nodejs/help/issues/1490
【Webアプリ開発】23卒、新卒1年目にやれたこと
Hello, everyone. どうも、新卒1年目エンジニアでした。
年度が変わります。せっかくの機会なので、今年度（2023年度）やったことを振り返ります。
# 筆者の略歴
– 大学時代（2019.4~2023.3）
– 情報系の学部を卒業（23卒）
– 授業で一通りのコンピュータサイエンスは知っている状態
– RISC-V OSを実験で作って、セマフォ使って並列処理動かしたのが思い出
– 教育データをAIでこねこねして、最終的にXAI（Explainable AI）の話につなげた卒業研究
– Pythonいっぱいやった
– 就職（2023.4~）
– 某事業会社の開発部門に配属
– 上流から下流までしっかりやる
– Webアプリ作ることが多い# やったこといろいろ
## 1. Webエンジニアの超基礎研修
社内での研修期間を存分に利用して、Webエンジニアとして育ちました。そもそも、まともにWebアプリを作ったことすらなかった筆者だったので、すべてを本当に基礎から学びました。
###
