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

command not found: nodeエラーは、”nodebrew use” で解決する

##直面した問題

“`bash:Terminal
% nodebrew list
v15.2.1

current: none
%
% node -v
zsh: command not found: node
%
“`
以下のように、パスを通したり、いろいろやっても*node*コマンドは認識されない。

・[@kyosuke5_20さんのQiita記事「kyosuke5_20」](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
・[「node がインストールできない」](https://teratail.com/questions/219745)

##*nodebrew use vバージョン番号*を実行すると、*node*コマンドが認識された。

“`bash:Terminal
% nodebrew use v15.2.1
use v15.2.1
% nodebrew list
v15.2.1

current: v15.2.1
%
% node -v
v15.2.1
%
“`

Webアプリ未経験者がReactに手を出す

妻が「こんなアプリがあったらいいのに」と話していたのを聞いて、ノリでちょっと作ってみようと思ったのだが、そもそもC言語しか知らない人間にとっては「WebアプリってCSSとJavascriptで作るもんでしょ？」ぐらいしか知識がなく。

しかし、断念するのもアレなので色々とググったら、ReactとかVue.jsとかどっかで見たことある言葉がたくさん出てきてしまって更に悩むことになったが、なんとなくReactを使おうと決めた。

Reactのことなら巷に情報は溢れているし、Webアプリ開発者の方々ならサクサク進めるであろうが、未経験者はいちいち躓いていくという現実を、備忘録込みで記録を残してみようと思う。

# 今の理解
Reactについての認識はこんなところ。

– WebのUI用JavaScriptライブラリ群
– これを使えばWeb画面であれやこれやできる
– Facebookが開発しているOSSで、今は商用に使っても大丈夫

また、このReactを用いてWebアプリ開発を行うには、以下の２つのパッケージが必要と知った。

– [npm](https://npm.community/

【npx webpack】No valid exports main found for　でエラー

#【原因】Node.jsのバージョンが古い
Node.jsのバージョンが古い事が原因

僕の場合は“`v13.5.0“` でした。

そこでまずは、[こちら](https://phoenixnap.com/kb/update-node-js-version)の記事のオプション2を参考にnpmを使用して更新しました。

①まずnpmキャッシュをクリアします

“`
npm cache clean -f
“`

②続いて、バージョンマネージャーのnをインストール

“`
npm install -g n
“`

③最新の安定バージョンをインストールします。

“`
n stable
“`

④ここで、Nodeのバージョンを確認してみます。

“`
node -v

v14.15.1
“`

これで、バージョンが変わっていればOKなのですが、僕の場合はバージョンに変化なしでした。

#【原因】リンク先
続いては、[こちら](https://mebee.info/2019/10/12/post-1793/)の記事を参考に

リンク先を変更してみました。

“`
ln -s

Typescript(Node.js)でtgzを解凍する

## Typescriptでtgz(tar.gz)ファイルを解凍する

実装例が少ないことと、紹介されている実装方法では展開先などが指定できなかったりするものがあるため、紹介しておきたいと思います。

## 使用するパッケージ

[npm tar](“https://www.npmjs.com/package/tar”,”npm tar”)

## よく見る実装方法

“`typescript
import * as fs from ‘fs’;
import * as zlib from ‘zlib’;
import * as tar from ‘tar’;

const tgzPath = ‘/file/hoge.tgz’;
const outPath = ‘/path/output’;

const gunzip = zlib.createGunzip();
const extractor = tar.Extract({path: outputPath});

fs.createReadStream(tgzPath).pipe(gunzip).pipe(extractor

PWAを試してみよう

（最近あまり聞かなくなりましたが）扱ったことがなかったので、PWA(Progressive Web Apps) を試してみようと思います。

WebページをPWAとして設定することで以下のことができます。

* Webアプリなのに、ネイティブアプリのように、Android/Windowsにアプリとして登録することができる。
* アドレスバーのようなブラウザっぽさはなく、全画面でネイティブアプリのように起動することができる。

PWAのService Workerの機能を使った実装をすることで、以下のことができます。

* Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる。
* サーバ側からPush通知ができる。

ということで、今回の投稿では、PWAの設定方法と、Push通知の実装をしてみます。

ただ作るだけではモチベーションが上がらないので、パスワード管理アプリ「パスワードマネージャ」を作成します。
世の中にいろいろなツールがありますが、やっぱり自分で管理したいので。。。

毎度ながら、ソースコード一式をGitHubに上げておきました。

porurub

Steinを使ってSpreadSheetのデータをとるときのメモ

#準備
１．Steinにアカウント登録（Googleアカウント）　このとき、SpreadSheetへのアクセス許可がなされる。
２．SteinのSpreadSheetのURLを貼り付けるところがあるので、扱いたいSheetのURLをコピペ　どのファイルなのかを指定する目的
３．Stein上に表示されるAPIのURLをコピー　Steinを通してSpreadSheetにアクセスされる。
　
４．Node.js（今回使う言語）上にコピペ

“`javascript
// Read Sheet1
const SteinStore = require(“stein-js-client”);
const store = new SteinStore(
“https://api.steinhq.com/v1/storages/xxxxxxxxxxxxxxx

部屋が乾燥してきたらGoogleHomeで知らせてもらう

# はじめに
今年の冬は、例年以上に湿度に注意という事で、湿度が低いときはGoogleHomeに注意してもらうことにした。


# ハード
– RaspberryPi 3B
– GoogleHome (私のはminiです)
– SwitchBot 温湿度計
– 母艦(Windowsマシン。何でも良い)

# モジュール
主なモジュールは以下の通り。
– Raspberry Pi OS：Buster(2020-05-27-raspios-buster-armhf)
– Node.js
– castv2-client
– VoiceText
– node-switchbot
– Ambient(予め準備しておく：[Ambient](https://ambidata.io/refs/node-js/))

## Raspberry Pi OS
Rasp

RaspberryPi で castv2-client を使ってGoogleHomeをしゃべらす

# はじめに
これまでは google-home-notifier を使って RaspberryPi からGoogleHomeをしゃべらせていたのだが、RaspberryPi を構築しなおしたら全く動かん！色々調べてみたら動かない記事が沢山あって皆さん苦労しているようだ。castv2-client なるものでも GoogleHomeをしゃべらすことができるらしいのでやってみた。

# 環境
– RaspberryPi 3B
– GoogleHome (私のはminiです)
– 母艦(Windowsマシン。何でも良い)

## Raspberry Pi OS
RaspberryPiのインストールは済んでいるもとします。

“`bash
~ $ cat /proc/device-tree/model
Raspberry Pi 3 Model B Rev 1.2

~ $ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description: Raspbian GNU/Linux 10 (

【Node.js】tailwindcssでログインページを作成する方法

# はじめに
今回は[前回の記事](https://qiita.com/Ryo9597/items/8a8e21c51bc2abb49594)の続きです。
今回はNode.js+EJS+tailwindcssでログインページを作成します。

## 今回のファイル構成
“`
nodejs-tailwindcss/
│
├ controllers/
│　└ pageIndex.js
│
├ puclic/
│　└ styles/
│　 └ style.css
│　 └ tailwind.css
│
├ views/
│　└ index.ejs
│
├ index.js
├ package.json
├ postcss.config.js
├ tailwind.config.js
“`
それでは実際にコードを書いていきましょう！

## 最初に、index.jsを作成しよう
“`javascript:index.js
//モジュールを読み込む
const express = require(‘express’)

NextJSのapiでサーバー側からリダイレクトをさせたい時

– `page/api`配下で処理を書いてそれを`fetch`した時に、処理内容に応じてクライアント側でリダイレクト処理をさせたい時`res.redirect(‘/’)`と書いても`status: 307`が帰ってくるだけでクライアント側はリダイレクトされません。
– クライアント側のリダイレクトをさせたい時はクライアント側でrouter処理を書きましょう。

“`js:src/api/*
export deafult (req, res) => {
res.status(307)
}
“`

“`jsx:src/pages/*
import Router from ‘next/router’

() => {
if(code == 307){
Router.push(‘/’)
}
}
“`

node弱いのでもっといいやり方あったら教えてください。。。

湯婆婆言語作ってみた

#湯婆婆言語作ってみた
Qiitaで湯婆婆のセリフをいかに短く実装するかブームらしいので自作言語を作って
実装した話です
ソースコードはここにのってます
https://github.com/riya81/yuba

うぷ主の環境

– macOS Big Sur 11.0.1
– Node 12.16.3

手順
1. 自作言語の構文を考える
2. トランスパイル先の言語を決める
3. ファイルを読みこむ
4. トランスパイラを作る
5. トランスパイラをビルドする

手順は僕の他の記事に詳しく書かれているので省きます
この記事のソースコードを少し変えただけです
https://qiita.com/riya81/items/b1d5261205d13e4740cb

#コマンド
“`shell
y “名前”;
“`

これだけで湯婆婆を実装できます
この機能しかないです

#まとめ
まとめることなんかほぼ無いうっすい記事ですが以上
湯婆婆言語を作った話でした

コピペで簡単！爆速でtailwindcssをNode.jsに導入する方法について

# はじめに
皆さんはどのCSSフレームワークを使われていますか？

有名どころは、Twitter社が作った[BootStrap](https://getbootstrap.com/2.3.2/)でしょうか。

Bootstrapの大きな欠点は、どこかで見たようなサイトに仕上がり、
デザインにオリジナリティが出すことが難しくなります。

そんな中でおすすめしたいのが、今回取り上げる**[Tailwind](https://tailwindcss.com/)**です。

この記事では、Node.jsでtailwindcssを導入する方法をご紹介いたします。

## 今回使用するモジュール
今回使用したモジュールは以下の通りです。
今回採用したテンプレートエンジンは**ejs**となります。
また、ルーティング処理等はすべて**express**を用いています。

“`json:package.json
“autoprefixer”: “^10.0.1”,
“ejs”: “^3.1.5”,
“express”: “^4.17.1”,
“postcss”: “^8.1.6”,
“postc

webpack v5がリリースされた現状まとめ

# プロダクションで使うのはまだ早い(11月時点

webpack v5のリリースは行われましたが、まだバグが多くありwebpackで使用するloaderやpluginは対応が全然追いついていません。

[webpack v5系のIssues](https://github.com/webpack/webpack/issues?q=is%3Aissue+is%3Aopen+label%3Awebpack-5) を眺めると多くの問題があることがわかります。

プライベートでwebpack v5にアップデートを試みたところ全部壊れました。大変危険です、webpack v5 を使用するのは 数ヶ月ほど待ったほうが良いと思います。

# 周辺ツールの現状

webpackを使用するにあたって特に重要な webpack-dev-server と webpack-cli の現状は以下のとおりです。

## webpack-dev-server

webpack-dev-server は webpack v5対応がまだリリースされてないので、動かないケースが何点かあります。

– [webpack

子供用の学習アプリケーションを作る(2) アニメーション編

# はじめに
以前作成したアプリの続きをしていきます。
[参考: 子供用の学習アプリケーションを作る(1)](https://qiita.com/yoshii0110/items/ba2bf4023c4a6caf3431)

今回は、コンテンツの選択画面にアニメーションを導入し、選択後の詳細画面を作成したので、その実装について記事にしていこうと思います。

# 動作
まずは、動作を見ていただければと思います。


# 実装
## 構成
構成は以下のようになっています。

“`
❯ pwd
/Users/yoshitaka.koitabashi/Desktop/iLearn/src/components

~/Desktop/iLearn/src/components
❯ tree .
.
├── a

obniz × LINE bot 距離センサに近づいたらLED点灯＆LINEへお知らせをpushしてみる

#自己紹介
大学時代C言語を学んでから十数年以来のプログラミングを始めています。
本業はweb制作で、ホームページとLINE連携の需要がとても多く、LINEbotに興味を持ちました。
今回も練習した事のメモです。

#やったこと
obnizの超音波測距センサーで100cm以内に近づくとフルカラーLED WS2811で指定した色が光る。
さらにはLINE botに近づいた事を知らせます。

#obnizの超音波距離センサーで近づくとLEDが光る
という部分の動作確認です。

“`
const obniz = new Obniz(‘obnizID’);
“`

obnizIDを書き換えます。

“`
const Obniz = require(‘obniz’);
const obniz = new Obniz(‘obnizID’);

obniz.onconnect = async() => {
// 超音波測距センサを利用
const hcsr04 = obniz.wired(‘HC-SR04’, { gnd: 11, echo: 10, trigger: 9, v

飲みに誘いにくい人が使う、飲みお誘いLINE Botの「用途に合わせた宛先設定部分」

#リモートが続いてふさぎ込んでしまう人を救いたい
　コロナの影響でリモートでお仕事をすることが増えて、
　よほどオープンにぐいぐい誘える人でない限り、人を飲みに誘うのも気がひけてしまう。（私もその一人です）
　今、会社に入った新人の子たちなど、顔も知らない社員の人がいっぱいいる。__なかなかつながりが広がらない__のが課題です。
　だけど飲みたい。___（言わずもがな対策は必須で）___
　
　__そんなときに会社の人たちを飲みに誘うサービスをLINE Botで作っています。__
　その１機能がこれです。まだDBへの接続などはやってなくて出し分けの部分のみ。

　

　なんでLINE Botを使ったかというと、
　シャイな人でも使えて、利点として__大体の人が使っている。どこでもメッセージを送れる。__
　といったとこ

javascriptで文字列を分解して配列化メモ

#書き方
分割対象の文字列.split(区切りに使用する文字列)

#今回の場合
LINEから受け取ったメッセージ「飲みに行きたい　名前」なので、

“`javascript

const message_arr = event.message.text.split(“　”)
“`
全角スペースかな。

全角スペースを入れていないときは、配列の2個目の要素は「undefined」になる。

多言語からみるマルチコアの活かし方

# 多言語からみるマルチコアの活かし方
# はじめに
近年では1つのCPUに複数のコアが搭載されたマルチコアが一般的になっています。
しかし、現状のプログラミング言語ではエンジニアが意識せずにマルチコアをしたプログラムを作ることは難しいです。
そこで、様々な言語から見たマルチコアの活かし方について説明していきます。

# プロセスとスレッド
プロセスとは1つ１つのアプリケーションといった実行中のプログラムのことで、スレッドは CPU利用の単位です。プロセスは次のように1つ以上のスレッドを持っており、CPUのコア数分だけスレッドを処理することができます。(また、近年では[SMT](https://ja.wikipedia.org/wiki/%E5%90%8C%E6%99%82%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B9%E3%83%AC%E3%83%83%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0)という技術によって1つの物理コアで2スレッドといった複数のスレッドを処理することができます。2コア4スレッドみたいなやつです)
![スレ

変数のスコープを間違えてたメモ

#やりたかったこと
LINEで飲みに行きたいと言ったらメッセージが返ってくる予定

#あかんかった
単純なミスだからインデントをちゃんとつけよう。（どこのカッコの中に入ってるかわかりにくかった）
飲みに行きたい1人目って返信してもらうはずが、なにも来なかった。
定義されたスコープが違うからと認識しているが、別の理由か？（use strictをグローバルレベルのところには書いてた。）
もう少し調べよう。

“`javascript
// ユーザーメッセージが飲みに行きたいものかどうか
if (check_go(event.message.text)) {
let pushText = ”;
console.log(“飲みに

Create-react-appのindex.htmlで条件分岐してmetaタグなどを入れる

#Create-react-appで環境毎にhtmlタグを変えたい時のメモ

本番環境と開発環境でmetaタグを変えたかった(開発環境にnoindexを入れたかった)ので、調べてみたらejsのテンプレートに対応してるみたいです。

参考：[Conditional content in index.html](https://github.com/facebook/create-react-app/issues/3112)

##ejsの文法

参考：[ejs.co](https://ejs.co/)

とりあえず<% %>で囲った中はjs書いていいみたいです。変数をそのまま出力するときは<%=何でしょうか。今後使う時が来たら調べてみます。 ```ejs:index.html <% if (user) { %>

<%= user.name %>

<% } %>
“`

##結論

自分は下記metaタグ入れたかっただけなので、結論こう書きました。環境変数とかもよく分かってないのでもっとちゃんとしたやり方あるかもしれないです。

ビルド時に本番環境サイトはREAC