Vue CLI導入メモ

#1.Node.jsのインストール

###1. Homebrewのインストール
ターミナルに下記のコマンドを打ち込んでMacOS用のパッケージマネージャー「Homebrew」をインストールする。

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

###2. nodebrewを使ってNode.jsをインストールする
下記のコマンドでNode.jsのバージョン管理ツール「nodebrew」をインストール

“`terminal:nodebrewのインストール
$ brew install nodebrew
“`

nodebrewを使って安定版のNode.jsをインストールし、有効化

“`terminal:Node.jsのインストール
#安定版のインストール
$ nodebrew install-binary stable

#インストール確認
$ nodebrew list

v16.12.2

c

[firestore] Error: 7 PERMISSION_DENIED: Missing or insufficient permissions

# 前提
GOOGLE_APPLICATION_CREDENTIALSを利用してサービスアカウントを設定している。

# 問題
firestoreにwriteする際に、タイトルエラーが出て書き込めなかった。

“` firestore.rules
rules_version = ‘2’;
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth != null;
}
}
}
“`

firestore.rulesを見ても、特に問題は見当たらない。

# 解決
以下のコードが原因

“` typescript
import { initializeApp } from ‘firebase-admin’
initializeApp({ projectId: “YOUR_PROJECTID” })
“`

GOOGLE_APPLICATION_CREDENTIA

laravel-mix yarn run dev で vue-template-compiler ライブラリが依存してた

## 環境

– PHP 7.4.4
– Laravel 7.5.1
– Node 12.16.1
– yarn 1.22.0

“`json:package.json
{
“private”: true,
“scripts”: {
“dev”: “yarn run development”,
“development”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”,
“watch”: “yarn run development — –watch”,
“watch-poll”: “yarn run watch — –watch-poll”,
“hot”: “cross-env NODE_ENV=development nod

React+ReduxアプリにNode.js(express)とJWTで認証・認可周りの処理を実装する①API側

## はじめに

React+ReduxアプリケーションにNode.js(express)でAPIを作り、jsonwebtoken(JWT)で認証・認可周りの処理を実装してみました。今回はAPI側の実装の内容を書いていきます。
[ソースコード](https://github.com/N-Iwata/react-express-jwt-api)はGitHubにありますので、参考にしてください。

## 使ったもの
* Node(v12.15.0)
* express(v4.17.1)
* jsonwebtoken(v8.5.1)
* body-parser(v1.19.1)
* nodemon(v2.0.3)
* REST Client(VSCodeの拡張機能)

## ディレクトリ構成

“`
root/
　├ api/
　│ ├ login.js
　│ └ users.js
　├ config/
　│ └ jwt.config.js
　├ middlewares/
　│ └ verifyToken.js
　├ app.js
　└ request.rest
“`

## 作

Node.jsについて調査とまとめ（自分用。編集中）

このたび、仕事（Not 個人の開発）でNode.jsを利用して開発することになったので、その調査を行う。
ポイントとしては「開発者は自分だけではない」ということか。自分だけなら理想を求めて翻訳資料が少なかったりまだ不安定だったりするライブラリも利用できるが、組織でとなるとそうはいかない。

## 前提
今回はフロントエンド、バックエンドを分離して作成することを前提としている。
Node.jsはそのバックエンド側（APIサーバ）で利用する

## フレームワーク
Node.jsを利用するとして、フレームワークの利用を検討する。
そのまま利用しても構わないが、少しでも手間は省きたい。
また、自分だけでなく多様な人が利用するため、フレームワークの調査市やすさも重要である。
（自分だけなら英語でも読むけど……ね。調べて教える？時間があればやるよ。そんな時間ができることは一生無いけどな！）

https://www.wantedly.com/companies/company_3239475/post_articles/179467

【Node.js】bundleサイズは大事って話

#サービスの動作が遅かった
最近，アーチャー伝説ってスマホアプリ専用の[【マルチ募集掲示板サービス】](https://archer-duo.herokuapp.com/)をリリースしました．

技術としては，Node.js/React/TypeScript/Express/Webpackを使用しました．このサービス，募集スレッドのリアルタイム更新をアピールしてるんですが，その肝心のbundle.jsが動き出すのが遅いんですよね．

そこでSSR(Server Side Rendering)について調べてたら[こんなサイト](https://www.publickey1.jp/blog/17/server_side_renderingserver_side_rendering_ng-japan_2017.html)が出てきて，めっちゃわかりやすいやんけ！と．要するにNode.jsってすごいし早いけど，やっぱSSRしない方が動作は早いよねと．でもSEOの観点とUX考慮するとまあSSRした方がいいよねと．

そこで重要になるのがjsの読み込み速度．今回Webpackを使ってるのでここをなん

AiScriptを使ってみた

# はじめに
[AiScript](https://github.com/syuilo/aiscript)（読み：あいすくりぷと）はMisskeyの開発者でもあるsyuiloさんが作成したプログラミング言語の一種です。
> **AiScript** is a scripting language runing on JavaScript. Not altJS.
>
> – ホストから変数や関数を提供することが出来ます
> – 外の情報にはアクセス出来ないので安全にスクリプトを実行できます(サンドボックス環境)

ベースはTypeScript(JavaScript)で、Node.jsで動作します。

※この記事は2020年4月17日現在のものです。執筆時点では開発段階であるため、仕様変更がある場合がありますので予めご了承ください。

## 動作環境の構築

動作環境を構築するにはNode.js(LTS版で動作すると思います)が必要になります。
インストールしていない場合はインストールしておいてください。

1. リポジトリをクローンします。: `git clone https://git

nvm, Node.js, npmをUbuntuで最新にUpdate

Node.js環境を年に2回程度使うのですが、使い方を毎回忘れているので備忘録として残しておきます。

# 環境

|種類|システムなど|備考|
|:-:|:-:|:–|
|OS|Ubuntu18.04.01LTS|Windowsから仮想で動かしています|
|Node.jsバージョン管理|nvm|もっといいのもありそうですが、たまにしか使わないので変えるのが面倒で調べていない|
|Node.jsパッケージ管理|npm|なんとなくnpm使っています|

# Update方法
## nvm
最初はnvmのバージョンチェックします

“`bash
nvm –version
“`

[GitHubの「Installing and Updating」](https://github.com/nvm-sh/nvm#install–update-script)にあるコマンドでnvmをアップデートします。[最新のバージョン](https://github.com/nvm-sh/nvm/releases)(*”v0.35.3″*の部分)に注意してください。

“`bash
curl -o-

WebSocketが切断された際に、自動的に再接続する方法

先日、WEBサイト制作者さん向けのウェブサービスをリリースしたのですが、制作の際に得た知見をシリーズで共有していこうと思います。

## WebSocket の自動再接続が行われない
[Crew’sHub](https://crewshub.net)には、リアルタイムのチャット機能があり、Web Socketを利用しています。
また、データ管理画面でも、プロジェクトメンバーが編集したら即座に更新されるようになっており、やはりここでもWebSocketを利用しています。

開発中に遭遇した問題として、WebSocketが切断された際に、自動再接続がうまく行われないということがありました。

クライアント側では、Reconnecting WebSocketという、WebSocketがクローズされた際に自動的に再接続が行われるモジュールを採用しています。

**reconnecting-websocket**
https://www.npmjs.com/package/reconnecting-websocket

自動再接続されるはずのモジュールではありますが、ノートPCでスリープから復帰

【JavaScript】配列の一部だけを合計して新しい配列を作る

変換前の配列：“`array1 = [ 年, 月, 日, 人数1, 人数2, … , 人数47 ];“`
変換後の配列：“`array2 = [ 年, 月, 日, 人数1～人数47の合計 ]; “`

つまり、人数を合計したい。

“`javascript
let array2 = array1.slice(0, 3).concat(array1.slice(3).reduce((a, x) => { return a + x }));
“`

Node.js(五):Express 実装

今回からはNodeでExpressを勉強しましょう、Expressは人気なのJSバックエンドモジュールと言うことです。先ずはインストールしてみよう。

実装の手順

Node.js立ち上げ

新たなフォルダを作って、エントリポイントとしてのapp.js追加して、vscode中のターミナルでポロジェクトにnode.jsをインストする。

“`terminal
xxx.xxx:my-first-express$npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install

AWS lambda(Node.js)でオレオレ証明書(self-signed)を一時的に信頼してSSL通信を行う方法

# はじめに
AWS lambdaのNode.js(https標準モジュール)で実装した、WEBサイトへhttpsのリクエストを投げる処理で、以下の２つのエラーが発生した際の対応についての記事です。
※急いでいる方、ソースコードだけ見たい方は[ここから見ればOK](#3オレオレ証明書self-signedを一時的に信頼する)です

Dockerコマンド ～学習メモ書き

# 前提
・導入メモになります。
・いろいろ試してみたが、やっぱりHyperVがいい

# 準備するもの
## アプリケーション側
> アプリケーション側はnodejs を使用します。
> 今回はnode の公式リポジトリを使用するための、Dockerfile

“`ruby:app-server/Dockerfile
FROM node:5
RUN npm -g install redis
ENV NODE_PATH C:\nodejs\node_modules

ENTRYPOINT [“node”, “app.js”]
“`

“`ruby:app-server/src/app.js
var redis = require(‘redis’);
var redis_client = redis.createClient(6379, “noderedis”);
var listen_port = 10080;

require(‘http’).createServer(function (request, response) {
redis_client.incr(

GASの処理速度が遅いのでNode.jsに移行したらwebアプリが高速に

#はじめに
弓道で用いるwebアプリを開発しているんですが、データの読み書きがクソ遅いので、
GoogleAppsScript+スプレッドシートからNode.js+Firebaseに移行しました。
（GoogleAppsScript Web APIからCloud Functions APIに変えたいうこと）

Google Apps ScriptもNode.jsも基本は一緒ですが…

これでかなりwebアプリの待機時間が短くなったので、記事にしようと思います。

私の使用用途は、**スプレッドシートにユーザーやデータを保管し、それを読み書きする、つまりwebアプリのバックエンドとしての利用でGASの処理速度が遅い**と感じたものであるので読む際は注意してください。

#結果から
どれだけ早くなったか先に紹介しておきます。

的中を記録し、その月のデータをとってくる処理を例に紹介します。記録するデータは日付、中たった数、引いた本数、的中率の四つのデータです。月のデータは付けた日の月のデータ全てとってきます。

↓Google Apps Script + スプレッドシート
![gas.

Macでnodebrewを使用したnodeのインストールと設定

### (前手順)pkgで入れたnodeの削除 (入れてた場合)
[こちらの記事](https://qiita.com/tabolog/items/da18143e70f40e356b5d)を参考に削除を実施。

“`shell
$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
“`
lsbomコマンドとは
>BOMファイルの内容を表示するコマンド。BOMファイルとは、
「Mac OS X Bill of Materials File」のことで、Apple社固有のファイル。
インストーラ（Installer.app）を使用するMacOS X標準のパッケージファイルに含まれている。

(参考:[lsbom- BOMファイルの内容を表示する](https://renoji.com/IT.php?Contents=Program_ShellScript_Bash/Cmd_lsbom.html))

“`she

npm install でエラー。gyp: No Xcode or CLT version detected!　

#npmを使ってみる
今回初めて、Node.jsを使うためにセットアップ！
と思っていたのですが、いきなりエラー続きで意味も分からず苦戦していたので共有します。
皆様が同じ目に合いませんように。

“`
$ cd work/01-webpack
“`
まずは、フォルダを作成

“`
$ npm init -y
“`
そして、package.jsonファイルを作成を作成しました。
ここまでは、良かったのですが。。。
アプリケーションで使用するモジュールをインストールするために、webpackをインストールする時に

“`
$ npm install webpack webpack-cli –save-dev
“`
を行ったあと、エラーが。

“`
No receipt for ‘com.apple.pkg.CLTools_Executables’ found at ‘/’.

No receipt for ‘com.apple.pkg.DeveloperToolsCLILeo’ found at ‘/’.

No receipt for ‘com.apple.pkg.D

破壊するかどうか

ほぼ備忘録。よく使うメソッドがArrayを破壊するかどうか
ググるときは日本語なら`配列 [メソッド名] 破壊的`、英語なら`array [メソッド名] mutating`あたりがよい

# 破壊する

– `fill()`
– `pop()`
– `push()`
– `reverse()`
– `shift()`
– `sort()`
– `splice()`
– `unshift()`

# 破壊しない

– `concat()`
– `entries()`
– `every()`
– `filter()`
– `find()`
– `forEach()`
– `includes()`
– `indexOf()`
– `join()`
– `keys()`
– `map()`
– `reduce()`
– `some()`

# 参考情報

– 手元の環境はNode v12.16.1
– [Array – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_

「うちでヨガしよう」ヨガポーズがあっているか判定してくれるLINE bot～Node.jsに読み込む～

#概要
　コロナウイルの影響で外出自粛、在宅ワークをされている方が多いと思います。普段よりも運動量が減ってしまうので、何かできないかと考えてヨガを支援するLINE botを開発しています。

#やりたいこと
　機能としては、お題のポーズ写真がbotから送られてくるので、そのポーズをとった自分の写真をbotに送ると正しいポーズか判定してくれます。

　まずはLINE botアカウントだけ作りました。

#実装
　学習モデルの作成は次の２つの記事で解説しています。
・ [Googleが提供しているサービス「Teachable Machine」でヨガポーズの学習モデルを作って遊んでみた](https://qiita.com/kmaepu/items/1350464b3940dfe6957e)
・[Teachable Machineで作成したモデルを使

在宅ワーク中に会議中サインをobnizとLINEBotで作ってみた deploy編

### はじめに
この記事は前回[在宅ワーク中に会議中だよサインをobnizとLINEBotで作ってみた \- Qiita](https://qiita.com/3yaka4/items/5765dc5abf547783dc59)のなかで外部Deployができなかったので前回のコードを元にHerokuにDeployしました。
deployとは別のところで一部未完成です。

### 概要
「今オンラインミーティング中！！！！ノックしないでー、開けないでー」みたいなことで気まずい思いをしたことが増えてきたので、いわゆる トイレの空き情報「空」 みたいなサイネージが欲しくて作りました。

LINEBotに「開けないで」といれると　obnizのディスプレイに　『　×　』　を描画し
「終わったよ」　といれるとけしてくれます。
　
### できたもの
(ngrokからHerokuにかわりましたが、よく考えると見た目は前回同じだった。。。)
![IMG_20200415_214353-COLLAGE (2).jpg](https://qiita-image-store.s3.ap-northeast

Node jsとESP32を使ってLEDをリアルタイムに制御する

# はじめに
##開発環境
node.js　12以降
npm 6以降
Arduino core for the ESP32 1.04以降
## 作るもの
スマホ等のブラウザからnode.jsを通してESP32にLEDの制御信号を送り,ESP32でリアルタイムにLEDを制御します。
またスマホからnode.jsサーバーにはwebsocketを、node.jsからESP32にはMQTTを用います。

##対象読者
node.jsを触ったことのある人
ESP32にコードを書き込める人
フルカラーLEDを持っている人
#node.js側の実装
まず以下のコマンドを実行する

“`
$mkdir 好きな名前
$cd さっき決めた名前
$npm init (質問に答える エンター連打でもヨシ！)
“`
##パッケージのインストール
して以下のコマンドを実行ください

“`
$npm install express mosca mqtt socket.io -s
“`
## サーバーのコードを作成
index.jsを作成して以下のコードを書き込む

“`js:index.js
//各パ