Node.js関連のことを調べてみた2020年05月11日

@babel/preset-env (babel 7.9.0)をハンズオンでちゃんと理解する

# バージョン情報

||version|
|—-|——-|
|node|12.16.3|
|@babel/core|7.9.0|
|@babel/preset-env|7.9.5|
|@babel/cli|7.8.4|
|browserslist|4.12.0|

# `@babel/preset-env` とは

`@babel/preset-env`は、`babel` プラグインのプリセットのことです。

そもそも `babel`の本体(`@babel/core`)は、「JSコードを入力として受け取り、ASTに変換後、**何らかの変換処理**を行い、変換後のASTから再度JSコードを出力すること」が責務であり、**何らかの変換処理**を指定しなければ、何のトランスパイルも行われません。

この**何らかの処理** に該当する実装がbabelプラグインのことで、開発者は実現したいトランスパイルに応じて適切なbabelプラグインを適用する設定を記述する必要があります。

…でも面倒ですよね？

単純にIEを含む主要なブラウザで一通りのES6コードを動かしたいだけという

mongooseでdocumentsを全てupdateする方法

## 商品データを一括で変更する

“`js
Product.updateMany(
{ id: req.body.id },
{ $set:
{
name: ProductName,
}
},
function(err) {
if (err) throw err;
}
);
“`

MacにNode.jsをnodebrewでインストールして環境構築【決定版】

# Mac に Node.js を nodebrew でインストールして環境構築

Mac に Node.js をインストールする方法は複数ありますが、ここでは `nodebrew` によるインストールとバージョン管理方法を説明します。

## nodebrew の導入手順

`nodebrew` を `homebrew` でインストールします。

### homebrew のインストール

“`bash
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”
“`

### nodebrew のインストール

“`bash
brew install nodebrew
“`

### nodebrew 有効化

以下のコマンドを実行し、 `nodebrew 1.0.1` と Usage などが表示されることを確認した上で、

“`b

Win10 + node.js から SQL Server 2019 Express に CSVファイルを書き込んでみる

Win10 + node.js から SQL Server 2019 Express に CSVファイルを書き込んでみる
#目的
以下の環境で[郵便番号検索の](http://www.post.japanpost.jp/zipcode/)17ISHIKA.CSVを書き込んでみる
Win10 + node.js -> Ubuntu 18.04 + SQL Server 2019 Express
\#もう少し綺麗に書きたいなぁ・・・
#対象テーブル
データの並びは以下に準拠
郵便番号データの説明
対象データにユニークキーになりそうなデータが無いので
8桁のテキストを追加する

“`sql
CREATE TABLE [dbo].[ZIPCODE](
[SEQ] [nchar](8) NOT NULL,
[PREFCODE] [nchar](3) NULL,
[KUBUNCODE] [nchar](8) NULL,
[POSTAL5] [nchar](

vue-loader 15で、テンプレート内の任意の属性(data-testなど)を除外する

# 概要

“`vue

“`

上記の`data-test`のような、テストでは使いたいけどプロダクションコードには反映させたくないような属性を、`vue-loader`の設定でプロダクションビルド時には除外し、以下のようにします。

“`vue

“`

内容は[Vueコンポーネントのビルド時に不要な属性をtemplateから取り除く](
http://nakajmg.hatenablog.com/entry/2018/02/08/140707) にかかれていることを、`vue-loader` 15系に合わせて書き直しつつ深堀りしただけになります。

# バージョン情報

||version|
|—|—|
|node|12.16.3|
|vue|2.6.11|
|vue-loader|15.9.1|
|webpack|4.43.0|

# 対象コンポーネント

以

メモ: Socket.IO の set と get メソッドは廃止されている

## 前置き
[Illustrator](https://www.adobe.com/jp/products/illustrator.html)で[絵を描いた](https://github.com/toshikisugiyama/illustrator-works)ので、それらを使って[ゲーム](https://toshikisugiyama-images.netlify.app/)を作ってみました。
以前はJavaScriptで絵をただランダムに表示させるだけだったのですが、[Nuxt.js](https://github.com/nuxt/nuxt.js)を使ってゲームに作り変え、遊び方説明ページを加えたり結果を表示させるようにしたり、英語対応やダークモードも実装したりしました。

 
 
 

しかし、

何かモヤモヤとしたものが残っています。

そして、

そのモヤモヤは日々募るばかりです。

なぜか?

 
 
 
 
 
 

そうです。

**一人でしか遊べないからで

【NodeJS】Electron(デスクトップアプリ)入門

###当記事の目的
Electron(デスクトップアプリ)のサンプルを作成。

###NodeJSがインストールされていることを確認。

“`
> node -v
v12.16.2
“`

###プロジェクト用packege.json作成

“`
> npm init
###electronパッケージをインストール
> npm i -D electron
“`
###各種ファイル作成
srcフォルダを作成し、その配下にアプリ用ファイルを作成する。
・アプリ用packege.json作成

“`json:package.json
{
“main”: “main.js”
}
“`
“`javascript:main.js
// アプリケーション作成用のモジュールを読み込み
const {app, BrowserWindow} = require(‘electron’);

// メインウィンドウ
let mainWindow;

function createWindow() {
// メインウィンドウを作成
mainWindow = new BrowserWi

【NodeJS】Express(Webアプリ)入門

###当記事の目的
Express(Webアプリ)のサンプルを作成。

###プロジェクト用フォルダを作成
“`
mkdir myapp
cd myapp
“`

###プロジェクト用packege.json作成
“`
npm init
“`

###Expressパッケージをインストール
“`
npm install express –save
“`

###インストール済みのパッケージを確認
“`
npm list –depth=0
`– express@4.17.1
“`

###各種ファイル作成
myapp ディレクトリーで、app.js というファイルを作成

“`javascript:app.js
const express = require(‘express’)
const app = express()

app.get(‘/’, (req, res) => res.send(‘Hello World!’))

app.listen(3000, () => console.log(‘Example app listening on port 3

GitLab Pagesを使ってAngular CLIで作られたプロジェクトを公開する方法

# 始めに

少し前に、[職務経歴書を GitLab Pages で公開してみた](https://qiita.com/s001_kawamura/items/955da1b76387e5b3a237)という記事を書きました。今回は、Angular CLI で作成したプロジェクトを GitLab Pages を使って公開してみたいと思います。

# 環境

– Node.js: v10.16.0
– Angular: 8.2.14

# 作業

### ひな型のアプリケーションを作成する

“`
$ ng new portfolio –routing –style css
“`

名前はお任せします。（私は、ポートフォリオの公開先として利用しようと思ったので、portfolio という名前にしています。）

### GitLab CI/CD 用の設定ファイルを作成する

プロジェクトルートに以下のファイルを作成します。

“`.gitlab-ci.yml
image: node:10

cache:
paths:
– node_modules/

before_s

高校生3人で作ったLINEBot「カップ麺タイマー」の技術的まとめと、開発の感想

こんにちは。最近高校生のDeveloper友達が増えてきて楽しくなってきているようかんです。

機能リリースした「[カップ麺タイマー](https://cupmenbot.nztm.io/)」を開発するに当たって、LINEBotのバックエンドを担当させてもらったので、開発の中で使った技術・検討したサービスなどなど、裏側を全部公開します！

プロダクトが始まった頃は**GitHubを使ったことが無い**、**非同期同期処理を知らない**、**自分で１からコードを書いたことが無い**という超絶初心者でした。ですが、[SGG](https://qiita.com/organizations/sgg?page=1)のみんなに質問しまくり、いっぱい学び、

Node.jsでRedis Clusterを取り扱う

最近でNode.jsで Redis Clusterを触る機会があったのですが
意外とRedis Cluster × Node.jsの日本語記事が無かったため、備忘録を兼ねて記事に起こしておきます。

今回利用するパッケージはこちら。
[GitHub – luin/ioredis: ?A robust, performance-focused and full-featured Redis client for Node.js.](https://github.com/luin/ioredis)

typescriptを使う場合は 一緒に型もimportしておきましょう。

“`bash
npm i ioredis
npm i -D @types/ioredis
“`

## Constructor

cluster形式の場合は利用する nodeを配列形式で指定する必要があります。
他に何もOptionを指定する必要が無いのであれば、基本この設定だけで良いです。

“`typescript
const driver: IORedis.Cluster = new IORedis.C

node.js 公開中のWEBページを強制終了する

#node.jsで公開中のWEBページを強制終了する

foreverで常時起動したnode.jsがforeverコマンドで停止できなくなり、サーバーとの通信が遮断できない状態になった。

##解決策
以下のコード１発で解決。

`killall node`

再度、ノードを起動して、無事ページが表示されました。

node.js用のforeverで表示されるWarningメッセージを表示させなくする方法

#node.js用のforeverで表示されるWarningメッセージを表示させなくする方法

foreverでnode.jsのプロジェクトファイルを読み込むと、warningメッセージが表示される。

下記のようにforeverコマンド実行時に末尾についてくる。
`forever start app.js`
`forever stop app.js`

“`
(node:30624) Warning: Accessing non-existent property ‘padLevels’ of module exports inside circular dependency
(Use `node –trace-warnings …` to show where the warning was created)
(node:30624) Warning: Accessing non-existent property ‘padLevels’ of module exports inside circular dependency
“`
warningなので特に悪さはしていな

【NodeJS】ヤフーニュースの主要トピックを取得

#当記事の目的
NodeJSでヤフーニュースの主要トピックを取得する。

##NodeJSがインストールされていることを確認。

“`
> node -v
v12.16.2
“`
##puppeteerパッケージをインストール
“`
> npm i puppeteer
“`

##インストール済みのパッケージを確認
“`
> npm list –depth=0
`– puppeteer@2.1.1
“`
##ニュース取得スクリプトを作成
“`javascript:news.js
const puppeteer = require(‘puppeteer’);

(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://news.yahoo.co.jp/’);
const itemSelector = ‘.topicsList_main li.topicsListItem a’

Flask（Python）及びExpress（Node.js）における、Get parameter 及び Post body の取得 , CORSの有効化

以下、6項目についてみていきます。HTMLファイルから送信しています。
送信も受信もローカルで行っています。サーバで試すなら、ドメインとか適宜読み替えてください。

1. Flask Get Parameter取得
2. Flask Post Body取得
3. Flask Cors有効化
4. Express Get Parameter取得
5. Express Post Body取得
6. Express Cors有効化

###注意点として、Content-Typeはすべてapplication/jsonで送信しています。

#HTML（送信側）
ブラウザで表示して、実行してください

“`html








<

バイナリファイルのアップロード・ダウンロードをする

HTMLからバイナリファイルをアップロードしたり、サーバからバイナリデータをダウンロードしてみます。

クライアント側として、HTMLのSubmitボタンを利用する方法と、Javascriptから送信する方法でやってみます。
サーバ側としては、Node.jsのSwagger-node(中身はExpress)のサーバの場合と、AWSのAPI Gateway＋Lambdaの場合を取り上げます。

毎度の通り、ソースコードは以下に上げておきました。

poruruba/fetch_laboratory
　https://github.com/poruruba/fetch_laboratory

#バイナリファイルの送信

それでは、送信するクライアント側のWebページから見ていきます。
まずは従来からの、HTMLのSubmitボタンで送信する場合です。
HTMLは以下のような感じになります。

“`html:index.html

カップ麺を待つあの3分に新しい可能性をもたらす「カップ麺タイマー」をLINE Botで作った話

# はじめに
ご覧いただきありがとうございます。

本日、高校生の仲間たちと制作したカップ麺タイマー(LINE Bot)をリリースしました。
3ヶ月間の開発期間を経て、ついにリリースできたので、開発の背景を書かせていただきたいと思います。

4月にも新型コロナウィルスの感染拡大を防ごう！とSNSで呼びかけを簡単に発信できるサービスをリリースしました。初めてQiitaで書いた記事が月間トレンドに載ってしまい、驚いています。良ければご覧ください。
[新型コロナで休校になって暇になった高校生がミニサービス「Yobikake」を3日間で立ち上げた話](https://qiita.com/nztm/items/2de55be97ac1de9a435b)

# カップ麺タイマー とは
僕たちが作ったのは、ただのカップ麺タイマーではありません。
カップ麺を待つ数分の時間を有意義なものにする新しいタイマーです。

是非、最後まで読んで頂けると嬉しいです。
![ロゴ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549246/9

URL を比較して差分画像を生成する CLI ツールを作りました

2つのウェブサイトのブラウザ上での見え方を比較したい時があると思います。例えばプロダクションと開発用のウェブサイトなど。そんな時に使える CLI を作りました。

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

`wwwdiff` は 2つの URL を引数に指定して、ブラウザ上でのレンダリング結果の差分画像を生成するツールです。

## インストール

インストールと実行には Node.js が必要です。パッケージマネージャーの npm 経由で `wwwdiff` をインストールできます。

“`shell
$ npm install wwwdiff -g
“`

インストールが完了すると `wwwdiff` コマンドが利用できるようになります。

“`shell
$ wwwdiff -v
1.1.10
“`

## 実行

比較したい2つのウェブサイトの URL を用意して下さい。例えば WordPress のデフォルトテーマで2つのポストを作って比較してみます。

| サンプル1 | サンプル2

TRPGやる回数増えたから自分たち用のオンラインツール作ってみた

## 背景
1. 友人たちとTRPGをやるようになった
2. セッションはSkype越しにやっており、皆が個別のダイスツールを使っているので、虚偽の報告が可能(しないとは思ってるけど、まぁ、可能)。
3. [リアルタイムでダイスロールを共有するWEBアプリを作ってみた](https://qiita.com/verhichi/items/747bd95b84cccb0ba8b3)
4. TRPGをやる回数が増えた
5. ダイスロール共有だけじゃ機能が足りないと言われた
6. ここまで来たら他のツール使ったほうがいいんじゃね？
7. いや、ここは勉強！自分で実装してみよう！ReactもReduxもwebsocketも知りたいし!

※ちなみに大体4人くらいでやってるけど一人を除いて全員TRPG初心者ですw

## TL;DR
– github(振り返ってみるとすごいコード汚い…)
– https://github.com/verhichi/trpg-space
– サービスのURL
– https://trpg-space.com/

なんかカオスだけど、イメージとしてはこ

nodejsプロセスのデーモン化

# nodejsをサーバサイドで起動して常駐プロセス化する場合の選択肢
※expressなどのWebサーバとしての用途ではない場合

* [forever](https://www.npmjs.com/package/forever)を使う
* 別途OSレベルのデーモン化を行う。
centos,ubuntuなら、Systemdに登録して運用とか。
この場合は、pacakge.jsonもデプロイ先に配置して依存ライブラリをインストールする。
dependencyをちゃんとruntimeに必要なもので整理する。