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

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

gulpインストール後にgulp: command not foundのエラー

#エラー内容
“`
$ gulp ejs
bash: gulp: command not found
“`

“`
$ sudo npm install -g gulp
Password:
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
/Users/mac/.npm-global/bin/gulp -> /Users/mac/.npm-global/lib/node_modules/gulp/bin/gulp.js
+ gulp@4.0.2
updated 2 packages in 9.078s
“`

“`
‘/Users/mac/.npm-global/bin/gulp’
“`
ココに着目。

#対処法
/Users/mac/.npm-global/bin に path が

元記事を表示

rails db:createのエラー解決

非同期通信を学習するために、サンプルとしてToDoリストを管理するアプリを作成しようとしたところ、データベースを作成する段階で以下のようなエラーが出た。
ので、その備忘録として残しておこうと思う。

“`
tech-camp@A-458 memo_app % rails db:create
rails aborted!
ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime.
See https://github.com/rails/execjs for a list of available runtimes.
/Users/tech-camp/projects/todo_app/memo_app/config/application.rb:7:in `
/Users/tech-camp/projects/todo_app/memo_app/Rakefile:4:in `require’
/Users/tech-camp/projects/todo_app/memo_app/

元記事を表示

新人に負けない本棚管理ページ その2(環境構築編)

# 目次

[新人に負けない本棚管理サイト その1(プロローグ)](https://qiita.com/moootoko/items/9a2282b018c1e78da04b)
新人に負けない本棚管理サイト その2(環境構築編)

# Node.js

Node.jsはサーバーサイドでJavaScriptを使えるようにするためのものです。
普通サーバーサイドの言語といえば**PHP**や**Ruby**(on Rails)、**C#**、**VB**、**Java**などがあります。
JavaScriptは本来クライアントサイドで使われる言語ですが、サーバーサイドまでJavaScriptで網羅することでぜーーんぶJavaScriptでできちゃうんです。

## 導入

### Windows

公式の[インストーラー](https://nodejs.org/ja/)をダウンロードして、画面に沿って進めていくだけです。

### Ubuntu, Debian

公式のGitHubにやり方が書いてあります。
以下のコマンドを打つだけです。

“`shell:
# Ubuntuの場合

元記事を表示

JIRA REST APIで課題情報を取得(jira-client-npm を使用)

#はじめに
* JIRA Softwareが10ユーザーまで無料で使えるようになったため家でもJIRAを触れるようになりました。
* ということでREST APIの勉強をしつつ、結果を記事に残していこうと思います。
* まずは課題の情報を取得する方法から。

#実施環境

| 項目 | 値 |
|:–|:–|
| JIRA バージョン | JIRA Software フリープラン|
| プログラム言語 | Node.js v12.16.2|
| nodeモジュール | jira-client v6.16.0|
| 認証 | googleアカウント|

* [jira-client-npm](https://www.npmjs.com/package/jira-client)を使うと比較て簡単に実装できました。

#事前準備
* [node.js](https://nodejs.org/ja/)をインストールしておく。
* JIRAで host / username / password / issueNumber(課題key)が必要になります。
* Googleアカウント認証を使用

元記事を表示

Node.js基礎:文字列処理

#はじめに
文字列の処理はもっとも使う処理です。Node.jsの文字列処理をまとめてみます。

#基本:シングル、ダブルクォーテーションで囲んで定義
“`sample.js
// 単一行
const str1 = “abc”;

// 複数行
const str2 = `あいうえお
かきくけこ
はひふひほ`

// 複数行: +で連結
const str3 = “abc” + “\n” + “def”;

// シングルクォーテーションで囲んで定義
const str4 = ‘あいうえお’ + ‘\n’ + ‘かきくけこ’;

// 変数置換
const tempStr = “abc”;
const str = `tempStr=${tempStr}`
“`

#文字列処理メソッド
説明ページ:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String

– String.prototype.startsWith()
– String.prototype.endsWith(

元記事を表示

create-guten-blockとwp-envで簡単にGutenbergブロック開発を行う

独自にGutenbergブロックを開発したい場合、一般的には、**(1)**Gutenbergブロックの開発プロジェクトと、**(2)**WordPressのテスト環境が必要になります。それぞれ全てをスクラッチで構築しても良いのですが、今回は`create-guten-block`と`wp-env`を使って、簡単に環境を構築する方法を紹介します。
なお、この手順は2020/4/19時点の内容なので、将来はもっと便利な方法が出てきているかもしれません。

# 今回採用した方法と、他の方法
環境構築の方法に正解はなく、色々な方法で環境を構築できます。
参考までに、他の選択肢と、今回採用した方法をのせておきます。(ここにある方法が全てでもありません)

## (1)Gutenbergブロックの開発プロジェクト作成方法

– 全てを自分で作成する
ソースファイルやビルド用の環境など全てを自分で構築する方法です。
自由な構成ができる反面、環境作成には手間がかかります。

– @wordpress/scriptsを使う方法
https://developer.wordpress.

元記事を表示

新人に負けない本棚管理サイト その1(プロローグ)

# 目次

新人に負けない本棚管理サイト その1(プロローグ)
[新人に負けない本棚管理サイト その2(環境構築編)](https://qiita.com/moootoko/items/615b0d135b6914d2c83c)

# イントロ

4月に新入社員がやってきました。
私もほんの1年前まで同じ立場だったのに、いつのまにか若葉マークが剥がされたり先輩が昼ごはんをおごってくれなくなったり、いろんな変化がありました。
なんとなく「若葉マークは時間とともに次第に見えなくなっていき、3月末に別れを告げ、4月を迎えると何もなかったかのように消えてる」みたいなメルヘン展開を想像していたのですが、
全然そんなことなく通常の業務からバッサリ「新人扱い」だけが抜け落ちた状態になります。
2年目を迎えた人にしかわからない感覚なのかなぁと思います。

## 今年の新人研修

技術研修で「本棚管理のWebサイトをつくる」課題が出たそうです。
本棚管理やToDoリストってWeb開発やアプリ開発の登竜門ですよね。
機能や見た目がシンプルな上にデータベースの処理を網羅できるので、非常に取り組みやすい

元記事を表示

node.jsでsoket.ioを使用して簡単なチャットを作成してみた

###まずはsocket.ioモジュールを追加しましょう。

https://www.npmjs.com/package/socket.io

`npm i socket.io`

で追加します。

1.まずはサーバーサイドのコードを書いてみます
説明はコード内のコメントを読んでいただけるとありがたいです。

“`javascript:SoketIoServerTest.js
//httpモジュール読み込み
var http = require( ‘http’ );

// Socket.IOモジュール読み込み
var socketio = require( ‘socket.io’ );

// ファイル入出力モジュール読み込み
var fs = require( ‘fs’ );

//パスのモジュール読み込み
const path = require(‘path’);

//8080番ポートでHTTPサーバーを立てる
var server = http.createServer( function( req, res ) {
//リクエストされたファイルパスを取り出す
v

元記事を表示

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を利用して開発することになったので、その調査を行う。
ポイントとしては「開発者は自分だけではない」ということか。自分だけなら理想を求めて翻訳資料が少なかったりまだ不安定だったりするライブラリも利用できるが、組織でとなるとそうはいかない。

※注意: 自分がわかればいいや、というメモ書きレベルです。丁寧な解説はありません。

## フレームワーク(Express)
今回は有名であり、日本語資料が最も多い(ここ決定打)の「Express」を利用する。
自分一人なら性能や対応状況を見比べて検討するが、今回は他の人も利用するので「調査しやすい」ものを優先する。
(英語の書き、聞き取りは無理でも読むのはやってほしい……)

Expressは割と薄いフレームワーク(フレームワーク側で)

### TypeScript対応
Node.js、Express に TypeScriptでAPIサーバを作成する例
https://qiita.com/pochopocho13/items/79a4735031ce11a91df7

### ルーター機能

元記事を表示

【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のリクエストを投げる処理で、以下の2つのエラーが発生した際の対応についての記事です。
※急いでいる方、ソースコードだけ見たい方は[ここから見ればOK](#3オレオレ証明書self-signedを一時的に信頼する)です

スクリーンショット 2020-04-16 22.24.09.png
スクリーンショット 2020-04-16 18.31.17.png

  • OTHERカテゴリの最新記事