- 1. nodeのDockerイメージのタグについているalpineとかslimが意味するもの
- 2. Node.js 18以降のSlim/Alpine版Dockerイメージ内からHTTPの疎通確認をワンライナーで行う
- 3. SPFx環境構築
- 4. Node.js で pandas ライクなデータ処理を行う
- 5. Geolonia Mapsを画像でダウンロードして著作権表示して使う方法
- 6. Mock Service Workerを使ってサーバレスでE2Eテストを実施する
- 7. フロントエンド開発でMock Service WorkerをサーバサイドAPIモックとして使う
- 8. node.jsでGZIP圧縮された複数のログファイルを処理
- 9. AWSでLINEのレストラン予約デモをデプロイした
- 10. WSL2 でホットリロードが効かない問題の解決方法
- 11. オンラインWeb対局時計(myokoym/webchessclock)構築メモ
- 12. GitHub ActionでJavaScriptのフォーマット漏れをチェックする
- 13. AWS Lambda(node.js)でyoutube APIを利用してJSON作成した話
- 14. Node.js便利パッケージ集
- 15. 「Glitch Sync From GitHub」を使ってみた(mainにPushでGlitchに自動更新する方法)
- 16. Puppeteerで自動入力を図ろうとしたときのTips
- 17. Lambda関数からAmazon SQSにデータを送信する時ハマったこと
- 18. コーディング時間を節約できる JavaScript1行コード20点
- 19. 【別アカウントのLambda】を実行可能なLambdaをNode18 + AWS SDK for JavaScript v3で構築してみる
- 20. Firestoreでドキュメントに一括で書き込む(500件を超える場合にも対応)
nodeのDockerイメージのタグについているalpineとかslimが意味するもの
# 概要
– nodeのDockerイメージのタグ名についているalpineとslimが意味する物を知らなかったのでまとめてみる。
# `node: バージョン名`のタグ
– このイメージが最も一般的なイメージらしい。「迷ったらこれ使っとけば万事オッケー」的なことが公式にも書いてあった。
– 「迷ったらバージョン名だけのイメージを選択する」は鉄則っぽい。# `node: バージョン名-bullseye`もしくは`node: バージョン名-buster`のタグ
– bullseyeやbusterはDevian(Unix系ディストリビューションを作成しているプロジェクト)がリリースしているDebian GNU/Linuxディストリビューションのバージョンと紐づくスイーツコード(開発コードネーム)らしい。イメージがどのDebian GNU/Linuxディストリビューションをもとに作られているかがわかる。
– `node: バージョン名-bullseye`はDebian 11.0(bullseye)をもとにしている。
– `node: バージョン名-buster`はDebian 1
Node.js 18以降のSlim/Alpine版Dockerイメージ内からHTTPの疎通確認をワンライナーで行う
[Node.js公式Dockerイメージ](https://hub.docker.com/_/node)のうち、[Slim版](https://hub.docker.com/_/node/tags?page=1&name=slim)や[Alpine版](https://hub.docker.com/_/node/tags?page=1&name=alpine)には `curl` も `wget` も[入っていない](https://github.com/nodejs/docker-node/issues/1185)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63934/002ca289-0606-e7d3-a556-a1e1225041bb.png)
よってコンテナ内からHTTPサーバーの疎通確認・死活監視などを行う際にこれらを使った方法は採用できない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amaz
SPFx環境構築
# はじめに
SPFx(SharePoint Framework)は、SharePointのカスタマイズおよび拡張モデルです。フレームワークに依存せず、人気のJavaScriptフレームワーク(React、Handlebars、Knockout、Angular、Vue.js、その他) を使用できます。
本記事は、SPFx開発環境構築の備忘録です。
# 目次
1. [事前準備](#Chapter1)
1. [Sheapoint内に任意のサイトを作成](#Chapter2)
1. [yaoman、gulpをインストール](#Chapter3)
1. [yaomanジェネレータをインストール](#Chapter4)
1. [最初のプロジェクトを作ってみる](#Chapter5)
1. [参考文献](#reference)
# 事前準備
– NodeJSがインストールされていることを確認する
下記のコマンドを実行して確認できます。(v14.19.2みたいにバージョンが出てくればOK)
“`bash she
Node.js で pandas ライクなデータ処理を行う
# Pandasとは?
pandas は python でデータ処理を行う時に、大変優れた機能を提供してくれるライブラリです。
csv の読み込みはもちろん、DBからの読み込みも可能ですし、
メソッド一つで統計量の計算、結合処理までやってくれるスグレモノなんです。
ですがこれ、pythonでしか使えないんです。
しかし!!それを解決してくれる素晴らしいライブラリがありました!!# その名はDanfo
それがこのDanfo.jsです。
https://danfo.jsdata.org/Danfo.jsはオープンソースライブラリで、pandas ライブラリに大きく影響を受けている、
と書かれています。
つまり、Node.jsでpandasのノウハウを使えるということです。これは素晴らしい。# 使い方
Nodeでのインストールは以下
“`
npm install danfojs-node
“`
特に難しいこともなくインストール可能です。使用方法は、
https://danfo.jsdata.org/getting-started
に詳しく書いてあります。それではよき統
Geolonia Mapsを画像でダウンロードして著作権表示して使う方法
# 概要
地図アプリを開発していますが、たくさんの地図画像が必要になりました。
「Python 用ライブラリの staticmap を使って OpenStreetMap の画像を取得する」方法を使っていましたが、Leaflet地図のデザインが今一つ(すみません。個人の主観です)なので、別の地図画像を探していました。Geoloniaさんの地図は、月20,000回まで無料で地図を表示できますし、開発環境なら制限を気にせず無料で使えるので、ありがたいです。デザインも素晴らしく、こちらを使わせていただくことにしました。
[Geolonia 料金](https://geolonia.com/pricing/)
最初はcanvasをtoDataUrlメソッドで取得できると考えていましたが、透明な画像しかキャプチャできず困っていました。Geoloniaの中の人に相談したら、「@geolonia/mbgl-export-control」というパッケージを紹介してもらいました。Geolonia Mapsの画像をダウンロードする方法を解説します。Node.jsを使って実装していきます。
# 環
Mock Service Workerを使ってサーバレスでE2Eテストを実施する
## 概要
– [前回](https://qiita.com/tenda_ryo_y/items/4ee8e7b05b026fc985e5)は[Mock Service Worker](https://github.com/mswjs/msw)(以下MSW)のデモを使って仕組みを見ていきました
– 今回も同デモを使用してE2Eテストの流れを見ていきます## 準備
[前回の記事](https://qiita.com/tenda_ryo_y/items/4ee8e7b05b026fc985e5)を参考にMSWのデモ用ブランチからローカルに実行環境を用意してください。## E2Eテストコードを見てみる
E2Eテストコードは **examples/rest-react/e2e** に格納されています。MSWはテストスクリプトに仕込むmockと異なり、ブラウザのリクエストをインターセプトする仕組みなのでテストコードに専用の実装を施す必要はありません。またJavascriptのアセットである[Service Worker API](https://developer.mozilla
フロントエンド開発でMock Service WorkerをサーバサイドAPIモックとして使う
## 概要
– サーバサイドAPIはまだ実装されてないけど、Webフロントエンドの実装を進めたい
– 顧客に見せるために作成したモックの実装を、できるだけ実際の実装に流用したい
– E2Eテストの為だけにビジネスロジックとは関係のない実装を入れたくない
– Mock Service Workerを使えばそんなお悩みを解決できます## Mock Service Workerとは
Service Worker APIを利用してブラウザのリクエストをインターセプトすることで、サーバサイトAPIの振る舞いを模倣するモックを構築できるフレームワークです。[JSON Server](https://www.npmjs.com/package/json-server)のようなモックサーバフレームワークとの違いは、単独のサーバを起動するのではなく、Service Workerを常駐してブラウザのリクエストのインターセプトすることでモック用のレスポンスを返却する仕組みになっている点です。
[MDN – Service Worker API](https://developer.mozilla.o
node.jsでGZIP圧縮された複数のログファイルを処理
# 目的
* Apacheログなど、GZIPされた複数のログ(テキスト)ファイルを処理する時のサンプル
* すべてのログをなめてから処理をしたい場合に、非同期のせいで勝手に次のステップに進むのに悩まされた
* 大容量のログファイルに対応するため、1行ずつデータを読み込む処理にした# コード
## 処理内容
* 指定したディレクトリにあるGZIPファイルの一覧を生成
* 一覧にあるファイルをひとつずつ開いて処理、分析に必要なデータはグローバル変数に追加
* ファイルを全部読み終わったら適宜処理“`javascript
“use strict”;/*
* Modules
*/import fs from ‘fs’;
import log4js from ‘log4js’;
import zlib from ‘zlib’;
import readline from ‘readline’;
import { format } from ‘util’;/*
* Config
*/const SRC_FILE_DIR = “./src_files”;
/*
* Log
AWSでLINEのレストラン予約デモをデプロイした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3117889/b235e5a8-4277-d3fb-1ba0-294315da16e5.png)
たまたまLINE予約システムを見つけたので、試しにデモをデプロイしてみました。
予約システムに関しては、以下のサイトに説明があります。https://lineapiusecase.com/ja/usecase/reservation.html
サンプルは、以下のGitHubにあります。
AWS環境を前提としたサンプルで、AWS SAMでデプロイできます。https://github.com/line/line-api-use-case-reservation-Restaurant
# 目次
– [LINEチャネルの作成](#lineチャネルの作成)
– [バックエンドの構築](#バックエンドの構築)
– [フロントエンド環境構築](#フロントエンド環境構築)
– [テストデータ投入](#テストデータ投入)
– [動作確認](#
WSL2 でホットリロードが効かない問題の解決方法
# WSL2 でホットリロードが効かない問題の解決方法
先日から、WSL2 でホットリロードが効かない問題が発生していました。
主にフロントエンドの開発時に、結構困っていて、解決方法を探していました。
WSL2 側の google-chrome GUI を使えば、問題なくホットリロードできるのですが、Windows 側のブラウザで確認したい場合に、ホットリロードができずに困っていました。## 問題原因
問題の原因は、WSL2 で Windows の環境変数を読みに行っていたことが問題でした。
たまたま、Flutter 関連の環境構築でエラーが出ていて、その時に、WSL2 側の環境変数を確認したところ、Windows 側の環境変数が読み込まれていました。`flutter doctor` でエラーが出ていたので、WSL2 側の環境変数を確認してみました。
“`
/usr/bin/env: ‘bash\r’: No such file or directory
“`これをみて、そんなはずないのになぁと環境変数を確認していた時に発覚しました。
## 解決方法
Wind
オンラインWeb対局時計(myokoym/webchessclock)構築メモ
# 背景
ドミニオンというボードゲームを御存じでしょうか。ボードゲーム界におけるデッキ構築システムの金字塔で、第一版の発売から約14年が経った今も拡張が発売され続けている長寿コンテンツです。元はアナログゲームでしたが、現在はオンラインで遊べる[Dominion Online](https://dominion.games/)なども運営されています。さて、このDominion Onlineにはひとつ気になる仕様があります。それはプレイヤーに対してプレイ時間の制限がほぼ無いことです。そのためプレイングの速さはマナーで成り立っており、早い人と遅い人がマッチングしたりするとちょっとギクシャクする点が惜しい所です。
そこで今回は仲間内でDominion Onlineを遊ぶときに使えるWeb対局時計(myokoym/webchessclock)を立ち上げてみました。本ページではその構成要素と構築手順を整理しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385780/7b5516a
GitHub ActionでJavaScriptのフォーマット漏れをチェックする
# 設定
## 1. prettierの設定
prettierの導入をします。様々なサイトで案内されているのでそちらを参照して下さい。
例)https://ics.media/entry/17030/
以下のようにpackage.jsonに記述がされると思います。
“`json:package.json
{
“scripts”: {
“format”: “prettier –write src”
},
“devDependencies”: {
“prettier”: “^2.7.1”
}
}
“`## 2. GitHub Actionの設定
Node.jsのversionが14の例です。
PullRequestが生成されたら、こちらのActionが実行されます。“`bash: .github/workflows/pre-merge.yml
name: Pre Mergeon:
pull_request:
# Allows you to run this workflow manually from the Actions
AWS Lambda(node.js)でyoutube APIを利用してJSON作成した話
## どんな記事
・AWSを使ってyoutube APIにアクセスするLambda関数を作成したときのお話
node.jsの作成例が少なかったのでこんな感じでうまくいったよが伝われば・・## 利用技術
・AWS Lambda
・AWS S3
・youtube-node(youtube API) ※google developerに登録する
・node.js 16## 前提条件
・node.js 16での開発パッケージのインストール
“`
npm install youtube-node
npm install aws-sdk
“`## 作成したコード(抜粋)
“`
const AWS = require(‘aws-sdk’);
const s3 = new AWS.S3({‘region’:’<地域>’});const Youtube = require(‘youtube-node’);
const youtube = new Youtube();exports.handler = function(event, context, callbac
Node.js便利パッケージ集
# 私の推しパッケージ集
### chalk
コンソール装飾
https://npm.im/chalk
### chalk-animation
chalkのアニメーション
https://npm.im/chalk-animation
### express
言わずもがなのWebサーバー
https://npm.im/express
### express-session
Expressのアドオンのような感じ。
https://npm.im/express-session
### body-parser
リクエスト解析用
https://npm.im/body-parser
### ytdl-core
YouTubeダウンロード
https://npm.im/ytdl-core
### youtube-search
YouTube検索
https://npm.im/youtube-search
### puppeteer
Chromium操作
https://npm.im/puppeteer
### prism-media
Disco
「Glitch Sync From GitHub」を使ってみた(mainにPushでGlitchに自動更新する方法)
Node.jsを使ってWebアプリを作成しており、デプロイ先に [Glitch](https://glitch.com/) を活用しています。本記事では、GitHubの更新が即座にGlitchに反映されるようにする方法をまとめます。
## 内容
– GitHubにSecretを登録する
– GitHub Actionsを活用する### 必要な PROJECT_ID と AUTH_TOKEN を取得し、GitHub に Secret を登録する
https://github.com/kanadgupta/glitch-sync#inputs
にある通りです。
まずはGlitch にアクセスし、「Ctrl+Shift+I」で開発者ツールを有効にしてください。
その後、「Network」タブを開いてください
※「Preserve log」と「Disable cache」はチェックを入れなくても大丈夫です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/3fd1a
Puppeteerで自動入力を図ろうとしたときのTips
## はじめに
郵便番号, 都道府県, 住所, 建物名, 氏名, フリガナ, メールアドレス, 生年月日…など一通りのユーザー情報を入力するフォームの動作確認で、大量の `input` を何度も入力するシーンが出てきます。
手入力で対処しようとすると **動作確認NGを繰り返すたびに心が折れます。**
そこで、Puppeteerのみを含めたNode.jsの簡単なプロジェクトを立ち上げて、自動入力するツールを作り突破しようとしました。同様なソリューションとしてCypressも考えられますが、Puppeteerは自身とローカルにインストールしたChromeで完結するためこちらを採用しました。
この記事ではフォームの自動入力でPuppeteerを用いた際に役立ったTipsを紹介します。
自動入力の対象はjQuery + JavaScriptのプロジェクトを想定しています。## インストール・実行
“`console
$ npm install puppeteer-core
“`https://github.com/YusukeIwaki/ggrks-puppet
Lambda関数からAmazon SQSにデータを送信する時ハマったこと
# はじめに
Lambda関数からAmazon SQSにデータを送信する時、ハマったことがあったので備忘録として残しておく。# 前提条件
– Lambda関数からAmazon SQSにデータを送信する
– Lambda関数はVPC内のプライベートサブネットに設置している
– Lambda関数のIAMロールはAmazon SQSに対してフルアクセス権限を付与している
– Lambda関数はNode.jsで作成# 起こったこと
上記前提条件のもとLambda関数を実行するとタイムアウトしてしまった。
そのときのソースと実行結果はこちら
AWS公式サンプルソースのほぼコピペ
https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/sqs-examples-send-receive-messages.html“`js
var AWS = require(‘aws-sdk’);
AWS.config.update({region: ‘ap-northeast-1’});var sqs = n
コーディング時間を節約できる JavaScript1行コード20点
はじめましてこんにちは、ひょうどうです。
今回は、コーディング時間を節約できる1行のJavaScriptコード20点を紹介します。
> 1)配列内の数値の最大値を取得する(配列が小さい場合)
“`
Math.max(…array)
“`
> 2)配列から重複を削除する
“`
[…new Set(array)]
“`
> 3)1 から 100 までの乱数をする
“`
Math.floor(Math.random() * 100) + 1
“`
> 4)文字列が有効な数値かどうかを確認する
“`
!isNaN(+string)
“`
> 5)現在の日時を取得する
“`
new Date().toString()
“`
> 6)変数が配列かどうかを確認する
“`
Array.isArray(variable)
“`
> 7)変数がオブジェクトかどうかを確認する
“`
typeof variable === “object”
“`
> 8)配列を文字列に変換する
“`
array.join(“,”)
“`
> 9)変数が関数かどうかを確認する
“`
【別アカウントのLambda】を実行可能なLambdaをNode18 + AWS SDK for JavaScript v3で構築してみる
## 先に結論だけ知りたい人のために (クロスアカウントでLambdaからLambdaをコールする方法)
この記事の要点を列挙するよ。
– 実行環境がNode18のLambdaにはAWS SDK for JavaScript v3が最初からインストールされていて便利だよ
– Invoke APIで別アカウントのLambdaをコールするよ
– コールされる対象の【別アカウントのLambda】には、リソースベースのポリシーが必要だよ
– コールする側のLambdaには、アイデンティティベースのポリシーが必要だよ“`json:コールされる対象の【別アカウントのLambda】に付与するリソースベースのポリシー
{
“Version”: “2012-10-17”,
“Id”: “default”,
“Statement”: [
{
“Sid”: “[任意の名前]”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “arn:aws:iam::[呼び出す側のAWSアカウントI
Firestoreでドキュメントに一括で書き込む(500件を超える場合にも対応)
# batch処理で一括書き込みできる
Firestore の batch write を使用することで、500件ずつのドキュメントの更新を行うことができます。以下は Node.js でのサンプルコードです。
“`javascript
const admin = require(‘firebase-admin’);admin.initializeApp();
const firestore = admin.firestore();async function updateDocuments(collectionName, batchSize = 500) {
const collectionRef = firestore.collection(collectionName);
const query = collectionRef.orderBy(‘timestamp’).limit(batchSize);
const documents = await query.get();let batch = firestore.batch();
docu