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

話題のanalyzeコマンドを実装してみた

今、イケてるエンジニア界隈で話題沸騰中の`analyze`コマンドをご存知でしょうか。

こういうやつですね。

# Yet another `analyze` command

コレCLIっぽい見た目をしていますが、実はWebブラウザ上[^sobaya007]でしか動作しません。不便ですね。
[^sobaya007]: https://qiita.com/sobaya007

Shellでも使いたい！という声にお答えして、実装してみました！！

コチラです。
[](https://nodei.co/npm/qiita-analyze/)

Source

JavaScriptでちょっと複雑なcliを作るのに便利なEnquirer

# この記事は

[LAPRAS アウトプットリレー](https://daily.lapras.blog/) の…何日目だっけ？3/25の記事です！
こんにちは！LAPRAS エンジニアの @rockymanobi です！

最近Node.jsでCLIを作る機会があり、その時に触ったEnquirerというライブラリが便利だったので、軽く紹介してみようというものです。ツールそのものについて軽くふれつつ、制作過程で出てきた「こんなことしたいけど、どう実現すれば良いんだろう」と試行錯誤して分かった使い方などを共有できればなと思います。

# Enquirerとは

Enquirerは CLIアプリケーションにおける対話的インターフェイスの実装を楽にしてくれるライブラリです。単純なテキスト入力の受付はもちろん、リストからの選択、チェックボックス、パスワード、入力補完、など、様々な入力方式を手軽に組み込むことができます。Node.js製です。JavaScript(TypeScript)万歳！

[公式サイト](https://github.com/enquirer/enquirer)による

【未完】楽天市場のAPIを使って買えるマスクを提案してくれるLINEBotを作ってみた

### はじめに
ProtoOutStudioというイケイケなスクールの「LINE Bot+APIで表現してアウトプット」という課題で製作したものです。

こちらの[1時間でLINE BOTを作るハンズオン](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)の記事をベースにLINEBotを作成しました。
最近の新型ウィルスの影響で、ネットショッピングばかりしているのですが、ちょっと楽天市場のトップ画面を見るのに飽きてきたので、(マスクなどの)必要なものを、（売り切ればかりなので）在庫のある商品で、高額になりすぎて買う気がなくなってしまわない（金額の）範囲で、提案してもらえるLINEBotを考えました。
（Amazonは申請が大変そうに見えたのでお見送りしました）

### 概要と作れなかったところ
#### 概要
+ LINEBotにほしいもの、「マスク」と入力したら
1. 楽天市場のキーワード検索から「マスク」を検索
2. 絞り込み検索で「購入可能」
3. 「最安価でソート」
4. 「最低金額

[備忘録]Macの開発環境構築（anyenv + nodenv + Node.js）

# 構築の流れ
1. Homebrewのインストール
2. Gitのインストール
3. anyenvのインストール
4. nodenvのインストール
5. Node.jsのインストール

# 環境
– macOS Catalina
– シェルは zsh

# Homebrewのインストール

[本家](http://brew.sh/index_ja.html) のスクリプトを実行。

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

Homebrewのバージョン確認。

“`
% brew -v
“`

# Gitのインストール

Gitがインストールされているか確認する。
使い方が表示されればOK。

“`
% git
“`
### HomebrewでGitをインストール

“`
% brew install git
“`

# anyenvのインストール

HomebrewかGitでanyenvをイン

VSCode1.43.0では即時関数内でtry-catchを使うとreturnが正しく解釈されない

VSCode（1.43.0と1.43.1で確認）では、以下のコードでconsole.logの部分が「到達できないコード」として判定されてしまう。

“`JavaScript
const message = (() => {
try {
/* エラーが発生しそうな処理 */
return “success”;
} catch (e) {
return “error:” + e;
}
})();

console.log(“message = ” + message);
“`

しかし、Node.js（12.16.1）で上記のコードを実行すると、console.logはちゃんと実行される。

“`
message = success
“`

即時関数の中でtry-catchは使うべきではないのだろうか？
そもそもこういった処理を即時関数化すべきではないのかも？
でもVSCode 1.42.1 以前はちゃんとconsole.logが到達可能と判定されていたし・・・。

VSCodeのissue

create-react-appを卒業して自分でReact + TypeScriptの開発環境を作れるようになるということ

これまでReactの環境構築をする時は[create-react-app](https://github.com/facebook/create-react-app)に頼りっきりでしたが、いい加減自分で作れないとまずいなと思い忘備録も兼ねて残しておきます。
また、せっかくTypeScriptも使うので `webpack.config.js` もTypeScriptで書けるようにしたいと思います。

***

最終的なディレクトリ構成は次のようになります。

“`
.
┃━━ public
┃ ┗━ index.html
┃━━ src
┃ ┃━ index.tsx
┃ ┗━ App.tsx
┃━━ package.json
┃━━ package-lock.json
┃━━ tsconfig.json
┗━━ webpack.config.ts
“`

それではやっていきましょう。

## 1. ディレクトリの初期化

適当なディレクトリを作って `npm init` するだけです。

“`
mkdir hogehoge
cd hogehoge
npm init -y
“

Node.js を持ち歩けるようにして、どこでも簡易WEBサーバを起動出来るようにする

Node.jsで便利なライブラリをつくったとしても、お客さまのPCやサーバの本番環境に **Node.jsの実行環境がないケース** もあります。**「Node.jsの実行環境を持ち歩けたらなぁ、、」**ということでググってみたらこの記事が。。

– [Node.js & npm をインストーラー無しで 手軽にはじめる](https://www.cottpic.com/2019/04/use-NodeJS-without-installer.html)

インストーラなどの実行が不要な **解凍すればすぐに使えるNode.js実行環境**の構築手順です。コレを使えば、実行環境ごとZipでアーカイブしたファイルを作成し**作業環境でそれを解凍すればNode.js環境の構築完了**、なんて事ができそうです。

ついでに、そのNode.js上でWebサーバを立ち上げることで、どこでも簡易WEBサーバが起動出来るようにしてみます。

## Node.js実行環境の構築

[公式](https://nodejs.org/ja/download/)からバイナリをダウンロード。Windows Bi

obniz+赤外線LED+TypeScriptでリモコンコンセント(OCR-05W)を動かす

## はじめに

こんにちは。電気毛布エンジニアの[@tmitsuoka0423](https://twitter.com/tmitsuoka0423)です。

昨日書いた「[obniz+赤外線LEDでリモコンコンセント(OCR-05W)を動かす](https://qiita.com/tmisuoka0423/items/ac84514454857d157c60)」では、obnizのパーツライブラリページ上で動作確認しましたが、今回はTypeScriptで実装していきます。
ソースコードは[https://github.com/tmitsuoka0423/obniz-ocr-05w](https://github.com/tmitsuoka0423/obniz-ocr-05w)で公開しています。

## 【クラウドファンディング実施中！】mouful（モウフル）

「[**電気毛布につけるだけ！スマホで布団の温度調節できるmouful（モウフル）**](https://camp-fire.jp/projects/view/220261)」
というクラウドファンディングを実施しています。

node.jsのテンプレートリテラルと+による文字列結合の速度差

# はじめに
文字列を取り扱う際、毎回テンプレートリテラルと文字列連結だとどちらの方が早いのだろう。という疑問が毎回頭を過ぎってました。
ということで軽くですがテストしました。

# 環境
– Windows 10 pro
– node.js v13.0.1

# 試す

計測には`performance`を使用しました。
10^7回文字列連結する処理を10回繰り返し、平均実行時間を出しました。
なお実行時間の単位は`ms`です。

まずは単純な文字列同士の結合です。

“`javascript
const { performance } = require(“perf_hooks”);
const a = “hogehoge”;
const b = “fugafuga”;

/** concat_text */
let concat_sum = 0;
for (let i = 0; i < 10; i++) { const start = performance.now(); for (let j = 0; j < 10 ** 7; j++) { const hog

Windows10にてReact公式チュートリアル用のローカル開発環境構築時、node最新化、npx実行で突っかかった備忘録

# はじめに
React公式チュートリアルをやってみたところ
ローカル開発環境構築中にnode最新化、npx実行で突っかかったので、備忘録。

実施したチュートリアル
[Reactチュートリアル(日本語)](https://ja.reactjs.org/tutorial/tutorial.html)

なお、自分はReactは触ったことが無い。

# 環境
– windows10 64bit
– node 6.9.4 -> 13.11.0
– npm 6.13.7

# ローカル開発環境の構築
チュートリアルを進める方法には、2つのオプションがある。

> オプション 1: ブラウザでコードを書く
> 始めるのに一番手っ取り早い方法です！
> …
> オプション 2: ローカル開発環境
> これは完全にオプションであり、このチュートリアルを進めるのに必須ではありません！

今回はオプション2を実施した。

## node最新化
### 既存nodeバージョン確認
> 1. 最新の Node.js がインストールされていることを確かめる。

とあるので、nodeを最新化する。
現行入

Node.jsでファイル出力

下記の『同期処理メソッド「writeFileSync」』を参考に実施
[node.jsでファイルの入出力操作](https://qiita.com/shirokuman/items/509b159bf4b8dd1c41ef)

N予備校の教材でAjaxでCORSを試してみる

# やりたいこと

N予備校のAjaxのページに「同一生成ポリシーを満たさない場合CORSにひかかって通信できません」と書かれているが、そのあたりの回避策について特に紹介されていなかったので`Access-Control-Allow-Origin`を試してみる。

## 前提知識

* CORS https://developer.mozilla.org/ja/docs/Web/HTTP/CORS
* N予備校 https://www.nnn.ed.nico/courses/497/chapters/6891
* この教材をそのまま使います（非会員は見れません）

## 環境

* Vagrant ubuntu（Node.jsにて上記のリンクのサーバが稼働している）
* 手元のマシン（Mac）

## 実験

* 手元のマシンのブラウザから、Vagrant上のNode.jsに対してAjax通信を行い失敗することを確認する
* CORSを回避するためにサーバー側にヘッダーを挿入する

### 修正前

* LoadAvgが表示されない
* コンソールログをみると以下のエラーが発

GraphQL Mesh は何を解決するのか？ ~ Qiita API を GraphQL でラップして理解する GraphQL Mesh ~


# GraphQL Mesh とは

[The Guild](https://twitter.com/TheGuildDev) から [GraphQL Mesh](https://github.com/Urigo/graphql-mesh) が発表されました。

? GraphQL Mesh – Query Anything, Run Anywhere ?https://t.co/PlZpAC9b54

? I'm very proud to announce our new open source library – GraphQL M

homebrewでnodeモジュールのダウングレード

homebrewでダウングレードしたnodeを使用する際に、詰まった部分を残します。

###環境
インストール済みのnodeバージョン：13.11.0
インストールしたいnodeバージョン：12.16.1

macOS:10.14.3

##nodeバージョン12系をインストール
バージョン指定の方法が12系の場合`@12`で最新の12系のバージョンがインストールできます。

“`
$ brew install node@12
==> Downloading https://homebrew.bintray.com/bottles/node@12-12.16.1.mojave.bott
==> Downloading from https://akamai.bintray.com/3d/3dee3426e2ea8928d0724a801591a
######################################################################## 100.0%
==> Pouring node@12-12.16.1.mojave.bott

[Node.js] request モジュール がDeprecated になっていた

### 内容
> As of Feb 11th 2020, request is fully deprecated. No new changes are expected to land. In fact, none have landed for some time.

– 2020年2月11日をもってDeprecatedになったようです。
– 下記のモジュールについても `request` と依存関係があることから非推奨となりました。
– [request-promise](https://github.com/request/request-promise)
– [request-promise-native](https://github.com/request/request-promise-native)
– [request-promise-any](https://github.com/request/request-promise-any)
– 代替手段については[このissue](https://github.com/request/req

三井住友銀行口座の残高を自動取得する（Puppeteerで）

# やりたいこと・背景
– [三井住友銀行のインターネットバンキング SMBCダイレクト](https://direct.smbc.co.jp/aib/aibgsjsw5001.jsp)で口座にログインし、現在の口座残高を取得
– 他行では個人向けのAPIが公開されていたりする（[個人で動作を試せる銀行系オープンAPIまとめ](https://qiita.com/Puerto/items/c80ecfdd82f070ed2063)等参照）が、三井住友銀行では現在法人向けしかないようす
– MoneyForwardやZaim等のFinTechサービスのAPIを使って取得することはできるかもしれませんが、それらのサービスを日常的には利用していないため、調べていません
– 三井住友銀行のLINE公式アカウントに友だち登録してID連携すると、チャット形式で残高が取得できます。この記事ではよりプログラマブルに取得したい場合を想定しています。たとえば「オレオレ家計簿APIみたいなものをつくりたい」や「残高が一定金額以上（以下）になったら通知させたい」といった応用ができます

# 使用するもの
–

Puppeteerなら、Google App Engine Node.jsでスクレイピングしてスプレッドシート(GAS経由)にデータを蓄積するのが無料だよ！

# 以下の記事の概要です。
– 日経225オプションのデータを入手したい。（理由は、分析して儲けるため）
– 私が契約している証券会社は、Javascriptでデータを取得するタイプのサイトなので、Headless Chromeの利用が必須。
– これまでの経験で、Google App Engine（python）は使えるが、それ以外はハードル高い。
– Cloud Runに手を出そうとしたが、ちょっとハードルが高かった。
– Google App Engineだと、Javascriptでデータ取得するタイプのサイトにスクレイピングするのは、無理。
– と思っていたら、Puppeteerなるツールがあって、それを使えば、Google App Engineで運用できると最近知った。
– てことで、Puppeteerでアプリを作って、Google App Engine Node.js（GAE）で運用しようということになった。
– GAEなら、cronで定期実行可能なので、定期的にデータを取得できる。
– 定期的にデータが取得できるなら、Googleスプレッドシートへ書き込んでおけば、後から

完全にクラウドで完結する無料の Web 開発環境 2020 年春

# 目的

2020 年春時点での、ぼくのかんがえたさいきょうのうぇぶかいはつかんきょうを作ります。完全にクラウドで完結する Web 開発環境を無料で構築します。ここで言う「完全にクラウドで完結する」とは、環境をセットアップしてコードを書き、テストをして本番環境にデプロイするまでの全てをブラウザだけで完結することを指します。**ローカルのコマンドラインツールやローカルで動く IDE などは一切使わない**というのがポイントです。

つまり、Windows、Linux、Mac など OS の依存がないだけでなく、ブラウザが動く環境さえあれば良いので、iPad や Android タブレット、果てはネカフェの PC でもそのままに適用することが出来ます。また全ての環境がクラウド側にあるという事は、作業中の状態なども全てクラウド側にあるという事です。これは**スタバでドヤるどころではない究極のノマド環境**です。**ネットがあってブラウザがあれば、いつでもどこでも開発が出来ます**。

> **本当に無料？**
> 開発環境までは無料ですが、本番環境で一部課金が必要になる場合があります。20

[Visual Studio Code] [MacOS] .nvmrcで指定したバージョンに自動で切り替えてプロジェクトをスタートする

複数の Node.js プロジェクトに参加していると、利用すべき Node のバージョンがプロジェクト毎に異なる場合があって、毎回手動で切り替えるのは大変面倒なので自動化します。

## 動作確認環境

– MacOS
– Visual Studio Code

にて動作を確認しております。Mac かつ VSCode で開発をしていて、ビルドなども VSCode 上のターミナルで行なっている方は参考になると思います。

## ロードマップ
1. nvmのインストール
2. Visual Studio Code のターミナルをzshに設定する
3. .zshrc を作成、または編集する
4. 自動バージョン切り替えを実行したいプロジェクトで .nvmrc を作成する

## 1.nvmのインストール

日本語の参考記事がたくさんありますのでそちらを参照してください。

`nvm use <バージョン>`

コマンドでいくつかの node バージョンを切り替えられるようになればOKです。

## 2.Visual Studio Code のターミナルをzshに設定する

まずは現在の VS

MacにHomebrew経由でnodenvを導入する（＋PHPStorm対策）

　以前`ndenv`を使っていたのですが、気づいたら`deprecated`になっていたので転職時に新しい端末になったのを機に`nodenv`へ移行しました。`anyenv`使って入れるのがステップ数多くてだるいなと思っていたのですが、`homebrew`であれば割とサクッと入れられそうだったので今回はこちらで導入してみるので、備忘録として残しておきます。

https://github.com/nodenv/nodenv

# Homebrewの導入

導入済み前提で進めるので、導入方法については割愛します。

# 既存のNode.jsまたはNode.jsバージョン管理の削除

各々の環境で異なっている所だと思うので適時環境にあった方法にて対応ください。Macなら大体当該ディレクトリを消せば済むと思います。

# nodenvのインストール

“`terminal
brew install nodenv
“`

まぁまぁ時間がかかると思うので、のんびり待ちます。

# 初期化コマンドをシェルプロファイルに追記

`eval “$(nodenv init -)”`を追記します。最近