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

Node.js関連のことを調べてみた2019年11月14日
目次

はじめからCEPファイルちゃんと読んでみた

はしょらず上から理解しながら、勉強の記録を残していきます。

##CEPの構造

#####格納されているフォルダ、ファイル
– ユーザー/ライブラリ/Application Support/Adobe/CEP
 > このフォルダに格納される
– CSS、CSXS、icons、js、jsx、node_modules : フォルダ
– index.html : ファイル

#####主に触るのは下記のファイル

– index.html > 見た目
– main.js > htmlと.jsxとの橋渡し
– hostscript.jsx > Adobeアプリケーションの動き

#####動かすアプリケーションの指定
– CSXS/manifest.xml > マニフェストで「イラストレーター CC2019で動かすよ!」などの宣言をする。

#####環境構築
下記を参考にさせて頂きました。
https://qiita.com/BlackCat/items/4ba7c032cdbb479c78e0

#####エディター
– Visual Studio Codeを使用

VS Codeで

元記事を表示

Node.jsでFirestoreにDate型を渡すとエラーになる

Firebaseのクラウドデータベースである[Cloud Firestore](https://firebase.google.com/docs/firestore?hl=ja)は、Timestamp形式での日付・時刻の保存に対応しており、その日付順にソートすることができます。

“`typescript
const db = firebase.firestore()
const data = await db.collection(‘messages’)
.orderBy(‘date’, ‘asc’)
.limit(limit)
.get()
.then(querySnapshot => {
return querySnapshot.docs.map(doc => doc.data())
})
“`

また、`startAt`や`endBefore`といった特定の期間で区切ることもできます。

“`typescript
const db = firebase.firestore(

元記事を表示

GraphQLについてのハンズオン

# 概要
GraphQLについて、NodeJSのウエブフレームワーク[majidai](https://www.npmjs.com/package/majidai)を使ってハンズオンを実施したいと思います。GraphQLとは何かを理解する前に、クライアントとサーバーの間でデータのやり取りするにあたってどの様な方法あるか考えてみましょう。僕が認識している中では、以下の3つの方法が主流ではないかと思います。

#### ① 従来のやり方
クライアントからリクエスト受け付けるたびにDBサーバーから情報を取得し、色々と整形しレスポンス
![traditional](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/1494257477001-TraditionalWebserver.png)

#### ② REST API
用途毎にエンドポイントを用意する
![rest](https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/05/14942574

元記事を表示

IoTの力を使って、スポーツ後の靴を早く乾かす

## スポーツの秋

最近涼しくなってきて、ランニングをしている人を良く見かけるようになりました。
皆さんは運動した後のシューズケアしていますか?
IoTの力を借りて、シューズケアをしましょう。

## できたもの

超初心者が子供の服装について目安を教えてくれるLine Botを作ってみた

##はじめに
プログラミングを勉強し始めてから2か月経過しました。
休み休みなのでちょっとずつの進歩ですが、
自分の成長のために新たなLINE BOTにトライしてみたくなりました。
季節の変わりめ、いつも困るのが子供の服装です。
子供は大人より体温が高いらしく、同じ感覚で服を用意すると
すぐ「あつ~い」と脱がれてしまいます・・・。
挙句の果てに上着を忘れたり、やたら荷物が増えたり。
ということで気温から服装の目安を教えてくれるLine Botを作ってみました。
##作った目的
前回までのLine Botは基本的にオウム返しのみの設定でした。
今回は少しステップアップするためWEBのAPIにつなげることに
挑戦してみました。
##仕様
1⃣明日の気温を教えてくれる
2⃣気温を入れると、子供の服の目安を教えてくれる。
##環境
基本的には[「LINE BOT作ってNowで動かした時のメモ」](https://qiita.com/tettsu__/items/720ff09020582f235485#bot%E3%82%9211%E3%81%AE%E3%83%88%E3%83%BC%E3%8

元記事を表示

npmコマンドで、permission deniedが発生する

# 状況
babelをインストールしようとすると、permission deniedが発生し、インストールに失敗しました。

“`Bash
$ npm i @babel/core @babel/node @babel/preset-env –save-dev
npm ERR! code EACCES
npm ERR! syscall rename
npm ERR! path /home/user/repos/play_express/node_modules/@babel/core
npm ERR! dest /home/user/repos/play_express/node_modules/@babel/.core.DELETE
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, rename ‘/home/user/repos/play_express/node_modules/@babel/core’ -> ‘/home/user/repos/play_express/node_modules/@bab

元記事を表示

[nodemon] app crashed – waiting for file changes before starting… というエラーに遭遇した時の対処法

# [nodemon] app crashed – waiting for file changes before starting… というエラーに遭遇した時の対処法

## Githubのissuesをのぞいてみる
見たことないくらいのコメント数が付いていました。
https://github.com/linnovate/mean/issues/1066

いろいろな意見があるが問題としては

– nodemonがない(インストールしていない)
– インストールしたnode_modulesに問題がある

## 上記を踏まえ行った対応

1. `npm install -g nodemon` でnodemonをインストール
2. node_modulesを一旦削除して`npm i` でインストールしなおす

## こちらを実行し再度ビルドしたところ正常に動きました。

元記事を表示

Node.js 簡単な応答バッチ処理

# はじめに
Node.jsでyまたはnの応答に従い、バッチ処理を実行するJavaSciptのサンプルを作成しました。
この辺、Promiseとasync/awaitなどを利用して対話的に同期処理を実行すると分けがわからなくところです。
初学者向けと自らの備忘録で掲載します。

# 前提
* OS : Windows7以上
* [Git For Windows 構築ずみ](https://qiita.com/toshi-click/items/dcf3dd48fdc74c91b409)でbashターミナルを使用
* VSCodeでコード編集
* node.js環境構築済み

# バッチ処理リスト

* **batchlist.json**

“`Json
[
{“msg” : “★ ★ リストを確認します。(ls) 実行 = y, 中止 = n ★ ★”,
“con” : “y”,
“can” : “n”,
“cmd” : “ls”
},
{“msg” : “★ ★ パスを確認します。(pwd) 実行 = y, 中止 = n ★

元記事を表示

node splice関数で文字列操作

# まえがき
splice関数で配列操作してみた。

# 参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

# 環境

“`bash
$bash –version
GNU bash, バージョン 5.0.0(1)-release (x86_64-pc-linux-gnu)
Copyright (C) 2019 Free Software Foundation, Inc.
ライセンス GPLv3+: GNU GPL バージョン 3 またはそれ以降

元記事を表示

JavaScriptのトップレベルスコープは常にグローバルスコープではなかった

# JSのトップレベルスコープは常にグローバルオブジェクトだと思っていた

タイトル通りですが、これに関しては疑っていなかったので個人的に割と衝撃でした。何か(?)に**裏切られた気持ち**です。。
もう少し詳しく書くと、JSを実行した時の**グローバルスコープ(=グローバルオブジェクト)**は、ブラウザ上では`window`で、Node.js上では`global`である。が、**トップレベルスコープ**がそれぞれ`window`と`global`ではなかった。
この記事では、**トップレベルスコープ**について検証していきます。

※トップレベルスコープ・・・関数とかの外側、rubyだとmain。

# `window`と`global`について検証
## グローバル変数について確認
まず、ブラウザ上で実行した下記のコードを見ると、`window`グローバルオブジェクト内の**プロパティ**(グローバル変数)になっていることがわかる。

“`javascript
// ブラウザ上で実行
var foo = ‘global’;
bar = ‘global’;
(function(){

元記事を表示

Node(express)でサーバーを立てた時、 CORSエラー出てしまったらヘッダー情報を追加しよう

## 状況・経緯
Node(express)を使用してAPIを作成。そのAPIを別で立てたローカルサーバーでアクセスしたら以下のようなエラーが出た。

“`
Access to fetch at ‘http://localhost:3000/’ from origin ‘http://127.0.0.1:8080’
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
“`

`http://127.0.0.1:8080`から`localhost:3000`へのアクセスは CORSポリシーによってブロックされていますといわれてしまった・・・

## CORSとは

オリジン間リソー

元記事を表示

#docker alpine + headless Chrome + #node pm2 + html-pdf-chrome で HTML PDF 変換する。一時ファイル必要なし。

# html-pdf-chrome

https://github.com/westy92/html-pdf-chrome

– puppeteer ではない
– HTMLファイルではなくソースを渡した時にPDF変換したい

# docker

“`
docker run -it alpine ash
“`

# chromium フォント nodejs をインストール

“`
apk add –update udev ttf-freefont chromium nodejs npm
“`

# 必要があれば Google 日本語フォントのインストール

“`
mkdir /noto

cd /noto

wget https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip

unzip NotoSansCJKjp-hinted.zip && mkdir -p /usr/share/fonts/noto && cp *.otf /usr/share/fonts/noto && chmod

元記事を表示

Online完結!Web開発環境クッキングレシピ[ver 2019.11]-その3

[Online完結!Web開発環境クッキングレシピ[ver 2019.11]-その2、の続きです](https://qiita.com/yellow-strelitzia/items/451965b329e7efc563ee)

####手順.8 Heroku用ファイルを追加して、リポジトリを更新
Web開発環境クッキングレシピ[ver 2019.11]-その2、の継続で、gitpodへログインし、.heroku.dockerfileとheroku.ymlファイルを追加します

“`.heroku.dockerfile
FROM node:12.13
WORKDIR /app
COPY . /app
RUN npm i
CMD npm start
“`

“`heroku.yml
build:
docker:
web: .heroku.dockerfile
“`

手順6と同じように、リポジトリを更新する作業をしましょう。

####手順.9 Herokuアカウントを作成する
Herokuのサインアップページを開き、アカウントを作成します。Primary devel

元記事を表示

Online完結!Web開発環境クッキングレシピ[ver 2019.11]-その2

[Online完結!Web開発環境クッキングレシピ[ver 2019.11]-その1、の続きです](https://qiita.com/yellow-strelitzia/items/de1c489908792a65436e)

####手順.5 node.jsで実行するコードを整備する
ログインしたGitpodのページで画面下部のところが、Terminalになっています。
ここで、コマンドを入力して、node.js用のコードを整備していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530472/17cfeb88-48f5-e178-ea84-a727c323c7a9.png)

“`
npm init
“`

すべての質問にEnterとして終了させます
今の質問の中で、entry pointをデフォルトのindex.jsで回答したことになり、この情報がpackage.jsonファイルに記載されたので、index.jsという名前のJavascriptコードを用意します
ペー

元記事を表示

Online完結!Web開発環境クッキングレシピ[ver 2019.11]-その1

##サマリー
Web開発を学習しようとする場合、開発環境を準備したり、実行環境を準備したりするまでの流れをつかみ取るのは、実際のところハードルが高いと思います(Web系開発であればなおさら)。
初学者の方でも環境構築まで、つまづかずに行える手順の1つとして思案し、参考になる記事作成をしたいと思い、執筆してみます(ちなみに、筆者は業務ではWeb開発も、Linux系環境も専門外なので、その点はご容赦くださいませ)
>**GitHubリポジトリへコードを配置する方法です。この手順を参考にご自身のソースコードを追加する場合、ソースコードはGitHubを検索するすべての方に見えてしまいますので、認証情報や業務上秘匿にしなくてはいけないような内容を誤って組み込まないように強く留意しましょう。**

この手順では、
– GitHubのリポジトリを作成する
– Gitpodのアカウントを作り、WebベースIDEを利用可能にする
– Herokuへデプロイする
を行います。

##調理の具材
Webブラウザ、Javascript、Node.js、GitHub、Gitpod、Heroku、Docker

元記事を表示

RHEL 8にNode.js 10をインストール(AppStream)

# はじめに

Application Stream(AppStream)を利用してRHEL8にNode.js 10をインストール
参考:[RHEL8のパッケージ構成 – BaseOSとApplication Stream – 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal](https://access.redhat.com/node/4079021)より、2021-04がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

“`shell-session
# cat /etc/redhat-release
Red Hat Enterprise Linux release 8.1 (Ootpa

元記事を表示

RHEL 8にNode.js 12をインストール(AppStream)

# はじめに

Application Stream(AppStream)を利用してRHEL8にNode.js 12をインストール
参考:[RHEL8のパッケージ構成 – BaseOSとApplication Stream – 赤帽エンジニアブログ]( https://rheb.hatenablog.com/entry/rhel8_baseos_and_appstream)

## サポート

本手法で導入した場合、[Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal](https://access.redhat.com/node/4079021)より、2021-11がEOLだと思われる。
それ以降に報告された脆弱性や不具合への対応は実施されない可能性がある。

## LOG

### インストール

“`shell-session
# cat /etc/redhat-release
Red Hat Enterprise Linux release 8.1 (Ootpa

元記事を表示

新Github Actions を使って npm audit fix と PR 作成を自動化してみた

Security Alerts に怒られる前になんとかしたい!

## やりたいこと

Node.js であれば“`npm audit fix“`で行える依存ライブラリの更新のような保守作業…。
日頃意識していないとなかなか手につかないので自動で Pull Request 作成までできるようにしたい。
欲を言えば、Approve や Merge も自動でやってほしい。(今回はやらない)

## Github Actions

11月13日ごろに正式リリースとなる Github Actions のβ版を試してみました。

### なぜ Github Actions なのか

[Github Marketplace](https://github.com/marketplace?type=actions) で公開されているツールを使って Workflow が組めるので、他の CI/CD サービスよりも Github の操作がしやすいのではと思いました。

## 実装

今回は [Create Pull Request](https://github.com/marketplace/ac

元記事を表示

Node.js(4):module PATH

パス確認

node.jsパスモジュールはディレクトリとファイルパスが取れる。先ずは今のパスを確認する。

“`javascript:app.js

console.log(__dirname); //ディレクトリパス
console.log(__filename);//ファイルパス

“`

“`terminal:terminal
$node app.js
/Users/xxxxx/node_practice/path
/Users/xxxxx/node_practice/path/app.js

“`

パス重要な関数のまとめ

“`app.js
var path = require(‘path’);

//今のディレクトリのパス
console.log(path.dirname(__dirname));
//ディレクトリを組み合わせ
console.log(path.join(__dirname,’/xx’));
//ファイル名
console.log(path.basename(__filename));
//ファイル拡

元記事を表示

OTHERカテゴリの最新記事