Node.js関連のことを調べてみた2021年08月02日

クロスブラウザなブラウザ拡張を開発・審査・公開するまで（Chrome拡張/Firefoxアドオン/Opera/Edge）

ブラウザ拡張のクロスブラウザ対応には結構手間がかかります。
特にブラウザごとの違いにはなかなか悩まされます。

– `デバッグ方法` の相違
– `パッケージ作成方法` の相違
– `審査方法・基準` の相違

対応する過程で手間取ったり足踏みしたりすることも多いわけですが、「開発から公開まで」について良くまとまっている記事も見当たりません。

そこで本記事は、ブラウザ拡張の開発から公開までのコストを削減できるよう、以下の2点を説明していきます。

– 開発の工程を減らす
– クロスブラウザ拡張用パッケージによる開発・デバッグ・パッケージ化
– 申請・公開をスムーズに
– 各ベンダーの審査の共通点・相違点をまとめ、準備の負担を軽減

いつか役に立てていただければ :bow_tone1:

# 対象の読者
– これからChrome拡張などを作りたい方
– 拡張のクロスブラウザ対応をしたい方
– ただし Chrome, Firefox, Opera, Edge に限ります
– 各ベンダーの審査の違いについて知りたい方

## 必要な知識
– ターミナルコマンドが打てる

RaspberryPiとMESH(ボタンタグ+カスタムタグ)を使ったPCスクリーショット(Mac)の保存操作

# 経緯

* 趣味の自転車で使っている室内トレーニングアプリ(zwift,rouvyなど)でトレーニング中にスクリーンショットを保存したい
* Macではスクリーショットはcommand+shift+3で保存できますが、トレーニング中に操作するのは危険なので、片手でも実行できるようにしたい

# 作ったもの
MESHのボタンタグを押すとMacのスクリーンショットを指定したフォルダに保存します。
 

# MESHを選択した理由
* バッテリー内蔵で単体で動作し、自転車に取付け

gulpでSass環境構築とエラー紹介

## 前提
Nodeはインストール済とします。
## 作業
プロジェクトのホームディレクトリから下記のコマンドを叩いて、package.jsonを作成します。

“`
$ npm init -y
“`
gulpを使用してsassの環境を構築していくので、下記のコマンドを叩いてインストールを行う。

“`
$ npm install –save-dev gulp
$ npm install –save-dev gulp-sass
“`
次に同じ階層にgulpfile.jsを作成して以下のように記述。

“`gulpfile.js
var sass = require(‘gulp-sass’)(require(‘sass’));
var gulp = require(‘gulp’);

gulp.task(“sass”, function(done){
gulp.src(“./sass/**/*.scss”)
.pipe(sass({outputStyle: “expanded”}))
.pipe(gulp.dest(“./css”));

Node.jsで簡易なWebシステムの構築①

#目的
Node.jsを用いて簡易なWebシステムを構築する。まずは DBを参照して簡単な画面を出すだけ。

#環境条件
[Node.js実行環境構築](https://qiita.com/MARTOON/items/8fbbbda9df6242652030)
で構築した環境を利用。

#構築手順

ec2-userでログイン

“`
# rootユーザにスイッチ
sudo su –
“`

##1.アプリ用のデータ準備
MySQLに必要な設定を実施する。

“`
# MySQLにログイン
mysql -uroot -ppassword
“`

“`sql
# DBの作成
create database myappdb;
“`

“`sql
# DBの選択
use myappdb;
“`

“`sql
# テーブルの作成（ID, Name, Priceを含む簡易なテーブル）
create table myapptbl1 (id int auto_increment, name varchar(50), price int, primary key (id));
“

Node.js実行環境構築

#目的
Node.jsを用いて簡易なWebシステムを構築することを目的に、まずは動作環境の構築を行う。

#環境条件
– Node.jsサーバ
– EC2：t2.micro
– OS：Red Hat Enterprise Linux 8 (HVM), SSD Volume Type
– Disk：汎用SSD（GP2） 10GB

セキュリティグループの設定等はいい感じに。

#構築手順

ec2-userでログイン

“`
# rootユーザにスイッチ
sudo su –
“`

“`
# Node.js用ディレクトリの作成
mkdir -p /opt/nodejs
“`

“`
# 作成したディレクトリへ移動
cd /opt/nodejs
“`

“`
# Node.jsのモジュールインストール
yum module install nodejs:14
“`

“`
# nodeの配置先の確認
which node
“`

/usr/bin/node

“`
# Node.jsのバージョン確認
node -v
“`
v14.16.0

【簡単】nodejsがインストール済のlinuxのコンテナを作成する【備忘録】

# Dockerfile作成
“`dockerfile:Dockerfile
FROM node:12

ENTRYPOINT /bin/bash
“`
あとはDockerfileのあるディレクトリで

“`
docker build -t image_name .
“`
でイメージをビルドし、

“`
docker run -it image_name
“`
でnodejsがインストール済みのlinuxのシェルにアクセスできます。

ちなみにlinuxのディストリビューションはdebainです。

【AWS】Lambdaのスロットリング時の挙動確認

## やりたいこと
– S3のファイルPUTをトリガーとしたLambdaでスロットリングエラーが発生した時の挙動の確認
(スロットリングエラーが発生したときのトリガーイベントが消失するのか…)

## Summary
– Lambdaのスロットリングが発生してもS3 イベントは消失せず、一定間隔でリトライされる。(リトライ間隔は徐々に伸び、最大5分)
– リトライされる期間はイベントの最大有効時間の設定で調整(公式開発者ガイドに記載)

## 前提

https://qiita.com/kei1-dev/items/9321668126c9b84b88a0

## 検証手順
1. Lambdaソースコードの修正
1. Lambda同時実行数、タイムアウト期間の設定
1. 動作確認

### 1. Lambdaソースコードの修正
– Lambda内に70秒の待機を追加し、スロットリングが発生しやすくする。

“`javascript:index.js
‘use strict’;

const aws = require(‘aws-sdk’);
const s3 = new aws.S3

LambdaからDynamoDBに接続する。(Node.js)

##概要
LambdaにデプロイしたNode.jsからDynamoDBに接続し、データを取得する。
早い話が下記図を実施します。

##TBLの準備
下記TBLを用意します。マイグレーション方法は[リンク](https://qiita.com/kouji0705/items/438e808fdb1b872671d8)を参考にしてください。

##ディレクトリ構成
“`shell:ディレクトリ構成
~/develop/study/aws/dynamo2 $ t

【AWS】S3のPUTイベントをトリガーにLambda(Node.js 14.x)を起動する

## きっかけ
案件でS3ファイルのPUTをトリガーにLambdaを動かして、PUTされたファイルを加工するような処理が必要なため、仕組みの具体的な設定内容の確認をしたかったため。

## やりたいこと概要

## 前提
– AWS: 社用アカウント利用

## 構築Step
1. S3バケット作成
1. Lambdaの構築、ソース修正
1. Lambdaに紐づくIAMロール修正
1. Originバケット PUTトリガー設定
1. 動作確認

### 1. S3バケット作成
– デフォルト設定のまま、Origin、Copiedバケットを作成
![screencapture-s3-console-aws-amazon-s3-bucket-create-2021-07-31-00_17_50.png](https://qiita-image

Rails×Reactアプリをクローンした後の環境構築について。

Rails×Reactで構成されたアプリケーションに対して git clone した後、環境構築しようとした際に、ものすごく時間がかかったので、同じミスをしないようにメモしておく。

# 結論
()は必要に応じて

① Nodeのバージョンを指定
(② .nvmrcに希望のバージョンを指定)
(③ .gitignoreに .nvmrcを追加)
④ gemfile.lock削除
⑤ Railsのバージョンを指定
⑥ “Bundle install“
⑦ “Rails db:create“
⑧ “Rails db:migrate“
⑨ “npm ci“
⑩ “yarn -v“(→ yarnがインストールされていなければ “yarn install“)
( “rails webpacker:compile“)

### ①について
まずlatestなNodeを使用するとnode-gypのエラーが後々発生する可能性があるので、出来ればstableなバージョンをインストールして使用するべき。
(npmは基本自動で変更されるので合わせる必要なし)

### ②につ

ServerlessFrameworkのテンプレをYarn Workspacesで扱うチュートリアル

## 概要

複数のServerlessFrameworkプロジェクトをYarn Workspacesを利用して１リポジトリに収めた際の備忘録です。

GitHubにコードサンプルを上げています：https://github.com/shu000/serverless-ts-monorepo-sample

### Dependencies

– Node.js v14.15.1
– Yarn v1.22.5
– ServerlessFramework v2.52.1

## Step 1. テンプレートのインストール

まずは、ServerlessFrameworkのテンプレートを利用して、`hello`パッケージを作成します。

“`shell
sls create –template aws-nodejs-typescript –path hello
“`

複数のパッケージを用意したいので、同様に`bye`パッケージも作成します。

“`shell
sls create –template aws-nodejs-typescript –path bye
“`

Electronでウインドウアプリ製作 part1

# 目標

electronを用いてフレームレス（タイトルバーのない）なウインドウアプリケーションを作成し、その際独自に最小化、最大化、閉じるボタンを作り、機能させる。

# 下準備
#### Node.jsのインストール
割愛します、詳しくは[こちら](https://qiita.com/sefoo0104/items/0653c935ea4a4db9dc2b)

#### アプリケーションのディレクトリを作成
ディレクトリ名は仮にTestWindowAppとした。

“`
$ mkdir TestWindowApp
$ cd TestWindowApp
“`

#### package.jsonの作成
Node.jsのパッケージを管理するnpm（Node Package Manager）を使い、packege.jsonを生成する。

“`
$ npm init -y
“`

生成されたpackage.json

“`json:package.json
{
“name”: “testwindowapp”,
“version”: “1.0.0”,
“descrip

Node.js with TypeScriptでWeb Assembly使ってみる

## はじめに
バックエンドJS(Node.js)でWASM(Web Assembly)の使い方を説明する日本語記事が少なさそうだったので書いてみます。
Rustのインストール方法等は省略します。わからない場合は参考先をご確認ください。

バックエンドならそのままGoやRustで書けばいいのでは?と思うかもしれません。
それができる体制であれば、その方がいいと思います。
個人的には少人数でプロダクトを創っているチームは
とりあえず、フロントエンド/バックエンド両方をTypeScriptで書いて、プロダクトの仮説検証まわしつつ、
パフォーマンス向上させたい部分をWASMで置き換えていく戦略もありかなと思い、検討しています。

## この投稿で説明すること

この投稿では以下のようなプロジェクトを構成で

“`shell
➜ tree -I ‘target|node_modules’ sample_project
sample_project
├── node_ts_express_sample
│   ├── package-lock.json
│   ├── package.j

【node.js】CSVファイル読込パッケージ「CSV Parser」・出力機能「CSV stringifier」の紹介およびコード例

## 背景

掲題モジュールを使えば「CSVを取得して読み込む時はカンマでsplitして…」といった面倒な処理から解放されたため、自身のメモ代わりに共有する。
二次元配列または連想配列の配列のように取得することができるため、肝心の実装に注力することができる。

## 公式ページ

### CSV Parser for Node.js
https://csv.js.org/parse/

### CSV stringifier for Node.js
https://csv.js.org/stringify/options/cast/

## csv-parse実装例

■元データ

“`
A列, B列, C列
1, 2, 3
“`

といったCSVファイルがあるとする。

“`
const csvParseSync = require(‘csv-parse/lib/sync’) // requiring sync module
const fs = require(‘fs’)

let path = ‘/any/’
let filename = ‘test.csv’
// ファイ

node.js + Expressサーバーのポートを変更する

初期設定ではlocalhost:3000となっているが、
bin/wwwファイルを変更することでポートを変更できる。

この点を

“`
var port = normalizePort(process.env.PORT || ‘3000’);
“`

このように

“`
var port = normalizePort(process.env.PORT || ‘4000’);
“`

これでローカルでwebサーバーを立ち上げる際にポートを分けることができる。

参考

stackoverflow

Node.jsでDynamoDBを操作する(CRUD処理編)

#概要
表題通り、Node.jsでDynamoDBを操作する記事です。

##基本情報
操作TBL

“`shell:ディレクトリ構成
~/develop/study/aws/node/dynamo $ tree
.
├── crud
│ ├── OlympicCreateItem.js
│ ├── OlympicDeleteItem.js
│ ├── OlympicGetItem.js
│ └── OlympicUpdateItem.js
├── data
│ └── olympicData.json
└── migration
├── OlympicCreateTable.js
└── OlympicLoadData.js

3 directories, 7

【Node.js】 NVM(Node Version Manager)インストール

> 私は日本就職を目指して、勉強している韓国人大学生です。
> もし、内容の中で間違った表現や言葉などがあれば、書き込みをしてください。

> 本コンテンツはmacOSを基準とします。

#NVMというのは？
– [NVMのレポジトリ](https://github.com/nvm-sh/nvm)（公式ドキュメント）
– Node.jsのバージョン管理アプリ
– 様々なプロジェクトを行う時、簡単にNode.jsのバージョンを管理できる
– デフォルトバージョンの設定
– インストールされたバージョンのリスト確認
– etc…

#NVMインストール
1. インストール

“`bash
$ sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
“`

2. `~/.bash_profile`にスクリプトを追加（`zsh`シェルを使っていると、`~/.zshrc`に追加）

“`vim
export NV

自前のローカルサーバ(外部プロセス)で動く React 開発環境 を作りながら、webpack の設定に入門した

Webフロントの開発にデータAPIとしてのモックサーバは必要不可欠ですが、Express やそもそも Node が得意じゃない人は自分の慣れた言語でモックサーバを書きたいこともあると思います。
特に protobuf とか、 dll なんかで提供される資源を利用したいとき、Node からアクセスするのは初心者にはハードルが高い。

ということで今回は自前のローカルサーバを使う React の開発環境を、OSに依存しないよう設定しました。
手作業でしたが想像以上にお手軽に動いたので共有します。

~~webpack 完全に理解した~~

# 達成したこと
– webpack による JS, CSS ファイルのホットバンドル(ブラウザのリロードではない)
– `yarn start` で全部起動するOS非依存設定 (ホットバンドルと自作サーバの立上げ)
– React 用のloaderの設定。

# 外部プロセスの(並列)起動設定だけ知りたい方
“`
yarn add yarn-run-all -D
“`
`npm-run-all –parallel` のアライアスの `ru

Slidev マークダウンでサクサク書けるプレゼンツール

Slidev マークダウンでサクサク書けるプレゼンツール

Slidev マークダウンでサクサク書けるプレゼンツール from kinneko


スライドをマークダウンでサクサク作りたい

slidev

読み方
![demo

Docker + Nginx + Node.js で開発環境構築

業務でNext.jsに触れる機会があったのでDockerで開発環境構築をやってみたいと思ったので書いていきます。
実際にはMySQLも含みますがサーバーサイド側のため割愛します。

*ローカル開発環境構築の想定のため、セキュリティは本番環境を想定していません。

## やりたいこと
`docker-compose`で`Nginx`コンテナをリバースプロキシとして`Node.js`コンテナへリクエストを投げる環境の構築

##環境構築
Docker for Macをインストール済みかつNext.jsでプロジェクト作成済みを想定

#### docker version

“`terminal
$docker –version
Docker version 20.10.6, build 370c289
“`

#### ディレクトリ構造
“`terminal
├── docker-compose.yml
├── node
| ├── Dockerfile
├── nginx
├── default.conf

“`

#### docker-compose.y