ElectronとNode.jsの制約に苦しめられた話

# 注意事項

Electron初心者なので、間違った情報があるかもしれません。
タスクに追われてるので文章がちゃんとしていない可能性があります。
コードを引っ張り出してくるのが面倒だったので、コードは1行もありません!
ご了承ください。:bow:

## バージョン情報

詳しくは覚えていないのでメジャーバージョンのみ
Node.js v16.x
Electron v15.x

# 経緯

## Electronを採用した理由

– ブラウザの技術でデスクトップアプリを作れるから
– 実績がある（VSCode、Slackなど）
– 並列処理もなんとかできると思ってた

あまり深く考えずにElectronを採用しましたが、これが原因で後々苦しむことになります…

# Electronの仕様

Electronは起動時に2つのプロセスを立ち上げます。

メインプロセスとレンダラープロセスの2種類があります。（参考: https://www.electronjs.org/ja/docs/latest/tutorial/process-model）

また、プロセス間の通信に

【Nodejs】ストリーム(stream)に念入りに気合を込めて正拳突きを繰り返しながら説明していく

#ストリームとは
ストリームとは、大きいデータを少量に分けてちょっとずつデータを運ぶ概念のことです。
英語でstreamは「流れや川」を表します。
小さいデータが連続的に流れる様子が川のようなのでstreamというのですね。

streamには、大きく分けて2つの役割があります。

– データを読み込む (write)
– データを書き込む (read)

具体的な例を見ていく前にストリームが役立つシーンを紹介します。
また、ここでは基本的にファイルモジュールを扱っていきます

# ストリームが役立つ例

ファイルをコピーしてフォルダ１からフォルダ２に移す。単純な例を考えます。

“`
.
├── フォルダ１── a.txt
└── フォルダ２
“`

ここで２つのコードの書き方が考えられます。

１．ファイルを一度完全にバッファ（一時保存される領域）にコピーしてから、フォルダ２にファイルを書き込む
２．ファイルをバッファに読み込み、読み込めたものから順に書き込みを行う

１の場合

“`js
const fs = require(‘fs’)
text = fs.readFi

WebStorm の設定確認事項

## nodenv 利用時の IDE からの npm script の実行
IDE から npm script の実行すると以下の様な package manager が以見つからない旨のエラーがでます。

“`
Error running ‘lint’: Specify a valid package manager: cannot find a binary file inside ‘/Users//.anyenv/envs/nodenv’ directory
“`

以下の対応を行うと正常に npm script をキックできるようになります。

– `npm -g install @nodenv/jetbrains-npm`
– package manager のパスを `echo $(npm -g prefix)/lib/node_modules/@nodenv/jetbrains-npm` の出力結果に変更する
– ![webstorm1.png](https://qiita-image-store.s3.ap-northeast-1.amazon

anyenv 経由で nodenv を導入した環境で新しい node.js を使う

# はじめに
https://qiita.com/ucan-lab/items/ce35bcaf2562054917a8

上記記事に体変お世話になりました。
(当記事では新しい node.js の利用にフォーカス)

また、公式docは[こちら](https://github.com/nodenv/nodenv)

# 前提
– any env 経由で nodenv が入っている
– `nodenv install -l` しても、欲しい最新の node.js のバージョンが出てこない

# 手順
– anyenv-update の plugin を入れてアップデート
– `mkdir -p $(anyenv root)/plugins`
– `git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update`
– `anyenv update`
– `nodenv install -l` で新しい node.js のバージョンを確認する
– 対象のバ

Node.jsをアップデートしてみる(備忘録)

問題

UdemyでRubyonRailsの学習を始めようと思ったら、
まずはMacで動いているNode開発環境を最新状態にする必要があるとのこと。

Homebrew

Homebrewの最新バージョンはこちらから確認できます↓
https://github.com/Homebrew/brew/releases

2021/12/13時点でのHomebrewの最新バージョンは3.3.7

私の環境でのHomebrewのバージョンは2.6.1

“`title:Homebrew
% brew -v Homebrew 2.6.1
Homebrew/homebrew-core (git revision d21e8d; last commit 2020-12-12)

AWS DevOps – AWS X-Rayによる分散トレーシング その3 (Node.js編)

# はじめに
本連載は以下の3部で構成されています。

1. [AWS X-Rayによる分散トレーシング その1 (概要編)](https://qiita.com/k-inui/items/18eba083a6fe061e5ea5)
2. [AWS X-Rayによる分散トレーシング その2 (Java編)](https://qiita.com/k-inui/items/33bb5819d0ee24e02e28)
3. **AWS X-Rayによる分散トレーシング その3 (Node.js編) ←今回**

X-Rayの基本から学びたいという方はまず[その1](https://qiita.com/k-inui/items/18eba083a6fe061e5ea5), [その2](https://qiita.com/k-inui/items/33bb5819d0ee24e02e28)を参照下さい。

本記事では、LambdaのランタイムにNode.jsを採用した場合にX-Rayに必要な設定やその際に注意すべきことを記載しています。
それでは、早速LambdaでX-Rayを使ってみましょう！

GoogleアナリティクスのAPIをNode.jsから触る

こんにちは、この記事は[岩手県立大学アドベントカレンダー](https://qiita.com/advent-calendar/2021/ipu)12日目の記事です。

先日Node-RED向けにGoogle Analyticsのノードを自作した記事を書きました。

https://qiita.com/n0bisuke/items/f5b3136e74d44ec2e4e1

この中で使ってる元の実装の紹介をしてみます。

## Google Analyticsのバージョン – GA4

[Google Analytics Data API (GA4)](https://developers.google.com/analytics/devguides/reporting/data/v1)のデモを触っていくのですが、Google Analyticsは従来のユニバーサルアナリティクス(UA)とGoogle アナリティクス 4(GA4)があります。

GA4の方が新しいバージョンって認識で問題なさそうな気がします。

## Google Analytics Data APIのサンプルを触る

Expressでsocket.ioを利用しWebSocket通信を実施する。

#アジェンダ
①公式提供のソースコードの解析
②Roomを追加する

###①公式提供のソースコードの解析
リンクより、socketioのソースコードを取得し、実行する。

“`javascript:サーバ側のコード
const app = require(‘express’)();
const http = require(‘http’).Server(app);
const io = require(‘socket.io’)(http);
const port = process.env.PORT || 3000;

app.get(‘/’, (req, res) => {
res.sendFile(__dirname + ‘/index.html’);
});

/** コネクション確立 */
io.on(‘connection’, (socket) => {
console.log(‘接続成功！！’)
socket.on(‘chat message’, msg => {
io.emit(‘chat message’, msg);
console.l

【Node.js】Expressとexpress-validatorでサインアップ機能にバリデーションをかける

#はじめに
メインはフロントですが、趣味でExpressを触っているものです。サインアップ機能を実装するにあたってexpress-validatorを採用したので実装に至るまでのコードをメモします。後半にセキュリティ面も考慮したログイン画面も解説しているので最後までご覧いただけますと幸いです。

#express-validatorを使ってミドルウェアを作る
validateMiddleware.jsにバリデートをかけているコードをまとめています。単純にemailに対してメールアドレスとしての形式をとっているかのチェックととpasswerdに対して最低６文字以上のバリデートをかけています。たったこれだけの記述でバリデーションを実装できるので便利ですね。

“`javascript:validateMiddleware.js
const { check, validationResult } = require(“express-validator”);

const validateParam = (req, res, next) => {
return [check(“emai

NestJSで入門するnpmライブラリ公開生活

今回、既存のJSライブラリをNestJS用にラッピングするライブラリを作成することにして、OSS活動アピ（大したことない）をやってみようと思いました。

以下、作ったライブラリとその概要

## 1. [nestjs-ip-middleware](https://www.npmjs.com/package/nestjs-ip-middleware)

– 動機：NestJSをいじってて、なにかライブラリっぽいものを作ってみたいという思いつき。
– 経緯
– 案件でIP取得する機能をやっていて、偶然[nestjs-real-ip](https://www.npmjs.com/package/nestjs-real-ip)というものを見つけた。
– これはただのラッパーライブラリーで、実装を見ると簡単だったから自分でもこういうの作れるのでは？という経緯。
– ちなみに、アクセス元のIPを取得する[request-ip](https://github.com/pbojinov/request-ip)のラッパー
– 実装
– 完全に真似て作りました。こちらのライブラリではデコレータと

yarn start がまたできない件

# 再びyarn startができない
Reactにてアプリケーション作成中に、
「Error: error:0308010C:digital envelope routines::unsupported」
のようなエラーが出たため、googleで検索すると、解決のためには最低でもnodeのバージョンをv14.18.1まで下げる必要があるとのこと。

## nodebrewを使う
ターミナル上で、「nodebrew install-binary v14.18.1」を実行するが、「Can not fetch」となりインストールできない…

## nvmでバージョン管理
nodebrewでインストールできなかったため、nvmをインストールして、「nvm install v14.18.1」を実行。すると、無事にインストール完了しました。

## まとめ
再びyarn start を実行すると、無事にREACTが起動しました！もし、同じようなエラーがある場合には参考にしていただければと思います。ただ、なぜ問題が起きてなぜ解決したのかその裏側は分からずですね。エラーをきっかけに色々

Expressでシンプルな掲示版を作る

# はじめに
Expressを使ってシンプルな掲示板を作る手順を説明します。

ソースコード
https://github.com/jeronimo34/SimpleBBS

# 初期設定
以下のコマンドを実行しアプリの雛形を作成します。
テンプレートエンジンに `pug` を選択します。

“`
npm install express-generator -g
express –view=pug SimpleBBS
cd SimpleBBS
npm install
“`

# 投稿一覧表示実装
## 投稿データの保存先
`app.locals.posts`に投稿データを保存します。`app.locals`に設定した値はアプリケーションの存続期間中、持続します。
アプリケーションを再起動すると投稿データが失われてしまうため、本来はDBにデータを保存すべきですが、今回は簡単のため`app.locals`を使用します。

“`javascript:app.js
// データベース
app.locals.posts = [
{
name:”test1″, text: “

[Node.js] Nodemailerで２通以上同時にメールを送信する

この記事は、【 [可茂IT塾 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/kamo-it) 】の17日目の記事です。

Webの作成で実装したことを記事にしました。
誰かのお役に立てれば、幸いです。

お問い合わせフォームに入力した内容を入力者と企業に２通同時に確認メールを送るAPIを作成しました。
そこで`nodemailer`を使用したので、まとめて記事にしました。

## Nodemailerでメールを送信する。

Nodemailerをインストールします。

https://www.npmjs.com/package/nodemailer

“`
npm i nodemailer
“`

### フォーム側

“`typescript
const [fieldValues, setFieldValues] = useState({
// 各フォームの初期値
})

const onSubmit = async () => {
const ur

【Node.js】Line Messaging APIでLine Botを作るまでに躓いた箇所をまとめる

#はじめに
普段はVue.jsやNuxt.jsを使っている者です。バックエンド側の知見も得ようと言うことでExpressを最近触りはじめたのですが、今回はLINE botを作るにあたって躓いた箇所をまとめていきたいと思います。

#LINE Messageing APIの導入①（ngrokでトンネリングさせる）

LINE Messageing APIのwebhookを使用する際はhttps通信でやりとりをしなくてはいけません。しかしhttpsでやりとりをローカルで行うことはできずherokuに一度アップして動作の確認をする記事が散見しました。

毎回デプロイする手間を省くためにngrokを使用することによってローカルでhttps通信でLINE Messageing APIを試すことができるのでこちらを採用した方が良いかと思います。不便な点としては1時間でsessionが切れてしまうので都度URLを登録し直すのがめんどくさいというところでしょうか。

###■ngrokで引っかかったポイント

ngrokを使用する際は、ターミナルを2つ開く必要があり、片方ではlocalhost3000

【Nuxt.js】ボタンクリックで画面を表示させる方法（アプリ開発アウトプット）

#はじめに
こんにちは！
今回は【Nuxt.js】ボタンクリックで画面を表示させる方法についてアウトプットしていきます！

#前提
・Nuxtの新規プロジェクト作成が既に済んでいる
・vue.jsの基礎学習が済んでいる

#対象
・真偽値を使用しての開発を学びたい方
・診断アプリケーションを作りたい方

#実装
“`vuejs:template

診断を始める！

SAP BTPのCloud Foundry EnvironmentにNode.jsアプリをデプロイする

この記事は[Node.js Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nodejs)の12日分の記事です。

今回はNode.js+expressのアプリを作ってSAP BTPのCloud Foundry環境にデプロイする方法について説明します
#環境
OS:Windows10
Node.js：16.13.1
CF-CLI：V8

#Node.jsとは
サーバーサイドで動くJavaScriptの実行環境です。

#SAP BTPのCloud Foundry環境について
SAP BTPは、インテリジェントエンタープライズアプリケーションとデータベース、およびデータ管理機能、アナリティクス、統合機能、拡張機能が一つに統合された、クラウド環境とハイブリッド環境の両方に対応したプラットフォームです。
数百もの SAP アプリケーションとサードパーティアプリケーションの事前構築済み統合も含まれています。

https://www.sap.com/japan/products/business-technology-

Reactのコンポーネントライブラリの開発では、ライブラリの依存関係の指定に気を付けなければいけないという話

## はじめに
Reactのコンポーネントライブラリを初めて開発しました。
今回はライブラリの依存関係で少し詰まった際に調べた内容を中心にお話しします。

## コンポーネントライブラリ開発で参考にした記事
以下の記事を参考に作成しました。大変分かりやすかったです。

– 公開方法の参考記事
– [3分でできるnpmモジュール](https://qiita.com/fnobi/items/f6b1574fb9f4518ed520)
– コンポーネントライブラリ開発の参考記事
– [React Component な npm のパッケージを作って TypeScript のプロジェクトで使う](https://qiita.com/pure-adachi/items/a9a39b3ffcb5af4c5b59)

## コンポーネントライブラリ開発プロジェクトの構成
– この後の説明をスムーズにするために、プロジェクトの構成を記載しておきます。

“`
root
├ sample-app (動作確認用プロジェクト)
│ ├ src
│ │ └ index.js
│ └

react-nativeでMapにマーカーを動的に表示させる

（１）react-native-mapsで動的にマーカーを表示する

普段はソーシャルワーカー(PSW)として障がいをお持ちの方の支援をしています。ReactやReact Nativeでアプリ作成を楽しんでいます。以前作成したReactNativeアプリでreact-native-mapsを使用したので、まとめておこうと思います。

参考にした記事【ReactNative】react-native-mapsで地図の表示領域が描画される度に領域情報を取得する

React Native のアドベントカレンダーを作成してくれた@nekonikiさんの記事です、ありがとうございます:blush:

（２）およそ 25000 か所

こちらは日本全国にある障がい者向けの就労支援事業所の数です、近年とても増えてきておりIT技術を学ぶことができる事業所もあります。すべての事業所を一度マップにしてみたい

[Prisma] チートシート

## 概要
Prismaを使ったプロジェクトを半年くらい担当していたが、そのプロジェクト離れることになったのでまた使う時のためのメモ

**公式ドキュメント**

[prisma-client](https://www.prisma.io/docs/concepts/components/prisma-client)
[Prisma Client API reference](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#model-queries)

https://www.prisma.io/

## CRUD

|メソッド | アクション |メモ |
|—|—|—|
| create |作成 | |
|createMany |一括作成 | bulk insert |
|findUnique |取得 | 一意の識別子またはIDを指定する必要がある |
|findFirst |取得 | 条件に一致する最初のレコードを取得 |
| findMan

nodebrewのインストール方法

## 最初に打つコマンド
“`
$ curl -L git.io/nodebrew | perl – setup
“`

## .bash_profileにパスを通すために設定を記述する。
“`
$ echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.bash_profile
“`

## .bash_profileの変更を適用させる。
“`
$ source ~/.bash_profile
“`

## nodebrewがインストールされているのか確認する。
“`
$ nodebrew help
nodebrew 1.1.0

Usage:
nodebrew help Show this message
nodebrew install Download and install (from binary)
nodebrew compile