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

jwtについて

YoutubeのfreeCodeCamp.orgでJWTについて動画があったのでまとめます。自分用に（笑。

jsonwebtokenの使い方について https://www.npmjs.com/package/jsonwebtoken。

この動画の中でserver側とfront側で分けていたのでそれに習います。

server側では
cors と　cookie-parserを使ってログイン情報を受け取ります。
https://www.npmjs.com/package/corsから

“`
Simple Usage (Enable All CORS Requests)
var express = require(‘express’)
var cors = require(‘cors’)
var app = express()

app.use(cors())

app.get(‘/products/:id’, function (req, res, next) {
res.json({msg: ‘This is CORS-enabled for all origin

JWTについて

YoutubeのfreeCodeCamp.orgでJWTについて動画があったのでまとめます。自分用に（笑。

jsonwebtokenの使い方について https://www.npmjs.com/package/jsonwebtoken

この動画の中でserver側とfront側で分けていたのでそれに習います。

server側では
cors と　cookie-parserを使ってログイン情報を受け取ります。
https://www.npmjs.com/package/corsから

“`
Simple Usage (Enable All CORS Requests)
var express = require(‘express’)
var cors = require(‘cors’)
var app = express()

app.use(cors())

app.get(‘/products/:id’, function (req, res, next) {
res.json({msg: ‘This is CORS-enabled for all origins!

typescriptで書かれたnodeアプリ、クライアント サーバ どっちでコンパイルする？

# クライアント側でコンパイルして、gitにコンパイル済みjsを含むよ派

– メリット
– サーバはpullして実行するだけだから余計なものが入らない
– デメリット
– gitにコンパイル済みファイルが混ざる。
– ローカルでコンパイルするのを忘れて、コンパイル済みファイルがソースコードと違う場合が発生する

# サーバ側でコンパイルするよ派

– メリット
– gitにはソースコードのみ存在して余計なものがない
– デメリット
– サーバにビルド環境を整えたくない

LINEログインを、Node.js + Herokuでやってみた

お仕事でLINEログインをチームで実装する機会があったので、自分でもできるように小さなサービスを作ってみようと思います。

まずは、LINEログインボタンを表示し、それを押すとLINEログインの実行を行い、ログインしたアカウント情報を表示するところまで実装します。

サーバサイドはNode.jsを利用し、インフラとしてはHerokuを利用します。
（LINEからのcallback　URLを指定する必要があるので、Herokuが便利です。）

## 事前準備

Node: v12.13.1
Heroku CLI: 7.35.0

## Nodeアプリ環境の構築

https://github.com/noboru-i/line-note/commit/d0d935c6075b5f3f007b306d7aeaf14b2134355e
https://github.com/noboru-i/line-note/commit/94518c502c16b300e63bc8d4bdf73eb95d9b3d9d

まずは、サンプルを持ってきて、フォルダ名などをリネーム。

“`
git clone

CSVデータから大量にHTMLファイルを生成する。

#概要

神戸市が提供しているオープンデータ「観光施設情報」のCSVを元にHTMLを量産します。

#制作物

・観光地一覧ページ(index.html)


・観光地詳細ページ（place**.html）


#開発環境

node v9.3.0
npm v6.12.1
gulp v4.0.2

**package.json**

“`json
{
“name”: “csv2html”,
“version”: “0.0.1”,
“scripts”: {
“gulp”: “gulp

[exercism.io]VSCodeでJestのデバッグをする方法

## 概要
[exercism.io](https://exercism.io/)のJavaScriptコースでJestのデバッグをする方法を紹介します。
といっても結局はVSCodeでJestのデバッグをする方法です。

## 方法
**1.launch.jsonに以下の記述をする。**
`program`のパスはjestの実行ファイルがある場所に変えてください。

“`json

{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “node”,
“request”: “launch”,
“name”: “Jest Debugger”,
“program”: “${workspaceFolder}/javascript/list-ops/node_modules/.bin/jest”,
“args”: [ “${fileBasenameNoExtension}” ],
“cwd”: “${workspaceFolder}/${relativeFileDirname}”,
}
]

NestJS の Module と DI を理解する

この記事は [NestJS アドベントカレンダー](https://qiita.com/advent-calendar/2019/nestjs) 2 日目の記事です。

## はじめに

[昨日の記事](https://qiita.com/potato4d/items/aabb78fd201592352d64)ではアプリケーションを作って一通り動かすところまで説明されました。
この中では Module については、デフォルトで生成される AppModule のまま使用しておりますが、大規模になるにつれて Module を分割することになると思います。
この記事では、 Module の概要と、 Module を分割することによる DI への影響を説明します。
[公式のドキュメント](https://docs.nestjs.com/modules)にも説明がありますので、合わせて読んでいただくことでより理解が深まると思います。

サンプルコードのリポジトリは以下になります。

[https://github.com/nestjs-jp/advent-calendar-2019/tree/m

Nuxt.jsで作っているサイトにKARTEのタグを入れてみるメモ

Nuxt.jsで作っている[Webサイト](https://protoout.studio)に[KARTE](https://karte.io/)を入れてみたときのメモです。

## NuxtにGoogle アナリティクスを導入する手順とほぼ同じで出来た

公式の[Google アナリティクスを使うには？](https://ja.nuxtjs.org/faq/google-analytics/)が参考になります。

読んでみると

> **`他のトラッキングサービスでも、同様の方法を使うことができます。`**

って書いてますね。

### 1. plugins/karte.jsを作成

こんな雰囲気で`plugins`の中に`karte.js`を作成します。

> ![スクリーンショット 2019-12-02 22.53.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/21589869-60f9-2bd4-45e7-83fb23f66d9a.png “スクリーンショット 2019

【初心者向け】wsl2上に最新安定板のnode.jsをインストールする方法

## 筆者環境
– Microsoft Windows [Version 10.0.19033.1]
– wsl2
– NAME=”Ubuntu”
– VERSION=”18.04.3 LTS (Bionic Beaver)”

## aptのアップデートとaptでnodejsとnpmをインストール

“`bash
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install node npm
$ node -v
v8.10.0
$ which node
/usr/bin/node
$ npm -v
3.5.1
“`

## npm をアップデートしようとすると…?

“`bash
$ sudo npm install -g npm
NPM ERR!

# why?

$ which npm
/mnt/c/Program Files/nodejs/npm
“`

Oh! `command npm` がwsl上にインストールされたnpmで
はなく、ゲストマシンのwindows上にインストールされたnpmを

Node.js & Express & MySQL & React でTODOリスト Herokuにデプロイ編

## はじめに
前回の続きです。
https://qiita.com/hcr1s/items/0e5970c5af496c221a24

今回は、前回作成したAPIをHerokuへデプロイしていきます。

## 前提
今回は、Herokuのアカウントを所持しており、クレジット登録していることを前提とします。

## Heroku app作成
まずは、git initやheroku createを実行していきます。

“`
# 既にgit initしている場合は省略
$ git init
$ git add .
$ git commit -m ‘commit名’

# herokuでアプリ作成
$ heroku create アプリ名
$ heroku git:remote -a アプリ名

$ git push heroku master

“`

とりあえず本番環境へpushは完了です。

## MySQL
本番環境でMySQLへ接続するための設定を行なっていきます。

“`
$ heroku addons:add cleardb
“`

Herokuでは、cleardbとい

JSConfJP 2019 スライドまとめ(WIP)

行けなかったので行きたい気持ちの供養のためにまとめています。
リンクされていないスライドを見つけたらリクエストいただけると幸いです。

# DAY 1 (2019/11/30)

| |Room A(体育館) |Room B(B105) |Room C(屋上) |
|:—:|—|—|—|
|12:00
–
13:00 |Open |
|13:00
–
13:30 |Opening talk |
|13:30
–
14:00 |The State of JavaScript
by Raphaël Benitte and Sacha Greif |
|14:00
–
14:15 | Break |
|14:15
–
14:45 |「繋がり」の可視化
by Nadieh Bremer | WebAuthnで実現する安全・快適なログイン
by Eiji Kitamura / えーじ |JavaScript AST プログラミング: 入門とそ

React App #1 方針決め

## TL;DR

ReactでWebアプリを作ります。
構造とか意識しつつ気になるツールを組み込む予定です。（進捗次第）

## 私について
– Reactは4年前くらいに触った気がする。記憶のかなた。
– webも数年前から触っていなかったが、最近また調べ始めた。
– 最近アーキテクチャを意識し出した。依存性逆転の原則おもしろい。

## 開発環境
– Mac OS Catalina
– Node.js
– Yarn

## 方針（アプリの内容）

名前: Rooms（仮）
概要: 色々な部屋？を見るアプリ
操作: 上下左右にフリックorボタンで移動

部屋は作成もできる（作成だけで別のアプリができる分量になりそう…?最初は簡単な部屋）
他の人の作った部屋を閲覧したい…?

## 方針（開発）

– SPA
– スマートフォン向け

### アーキテクチャ

データは一方通行で流れるべきらしい。
Reactの設計思想がそうなので、その流れを組んでfluxを意識する。
後述のReduxがフレームワークとして勝手に意識してくれそう？

コンポーネントの作り方はAtomic De

[Node.js]Expressのミドルウェアの基本

## はじめに
この記事では、Expressを使いこなす上で必須となる、「ミドルウェア」について説明します。Expressをこれから使い始める方、使い始めて間もない方を対象にした基本的な内容になります。

現在の最新バージョンである4.17.1で動作を確認しています。

## Expressとミドルウェア
[Express](https://expressjs.com/)はNode.js環境で使われる最も人気のあるWebアプリケーションフレームワークのうちの一つです。最小限の機能を提供する薄いフレームワークになっていて、ユーザーの自由度が高い点が特徴的です。（例えば、データベースアクセス、認証をExpressは提供しません。）

また、[ドキュメントにある通り](https://expressjs.com/ja/guide/using-middleware.html)、「Expressアプリケーションは一連のミドルウェア関数呼び出し」といえます。つまり、ユーザーからのHTTPリクエストを受信しレスポンスを返すまでに、いくつかのミドルウェア関数を通過し、リクエストからレスポンスまでのサイ

エンジニアの教養、フレームワーク解剖学【Express編】

このエントリは、[GMSアドベントカレンダー2日目](https://qiita.com/advent-calendar/2019/global-mobility-service)のものです。
昨日は、[Hiroshi Oda](https://qiita.com/hi1280)さんの[AWSでドキュメントサイトを最速で公開する方法。自動デプロイもあるよ！](https://qiita.com/hi1280/private/2182a52a24a0783ded97)でした。

Node.jsで最も使われているフレームワーク「Express」。職場ではExpressを用いて開発しているのですが、自分にとってExpress内部が完全にブラックボックス化していました。こりゃまずい。ということで、Expressをソースコードから理解してみた際のまとめ記事です。

Expressは最小限で柔軟なアプリケーションフレームワークと言われていることもあり、他のフレームワークと比べてフレームワークの内部挙動を把握しやすいと思います。そのため、Expressを知らない、Node.jsを知らないという方でも

React-Native環境構築

# React Nativeをやってみようと思い、環境構築をした話
jsもあまり書いたことないのですが、React Nativeで遊んで見ようかと思って、
環境作ってみました。

## 環境
MacOS 10.14.6(mojave)
MacBook Pro(2015)

## 最初にやったこと
よくわからなかったので、サイトを参考にして、見よう見真似でやってみた。

“`shell
$ brew install node
$ brew install watchman
“`

watchmanのところで、pythonのインストールが勝手に走ってる、、、
すでにpyenvで各種入れてるのだけど、、、(まあ、/usr/local/binに入れる分にはいいか)

“`shell
$ npm install -g react-native-cli
“`
この辺までは普通に通るのだが、、、、

“`shell
$ react-native init ProjectName
“`
ここで、やたらとWARNやらエラーやらが、、、

“`shell
# —-中略—

Node.jsでローカルファイルを軽やかに操作するスクリプト集

# はじめに

こんにちは、たか（[@HighHawk5](https://twitter.com/HighHawk5)）です。

最近、50GBのアクセスログファイルを解析する機会があったのですが、データサイズが大きすぎて普通のファイルシステムでは途中で処理が落ちてしまうんですね。
そこで、**Node.js**の非同期処理（ストリーム）を採用したところ、なんの問題もなくサクサクと処理できたので、Node.jsのファイルシステムを使ってローカルファイルを操作できるスクリプト集を作りました。
ローカルファイルを一括で修正したり、解析したり、スクリプトを組み合わせて色々なファイル操作に活用してみてください。

**今回つくったスクリプトはすべてGitHubに上げておきましたので、ダウンロードしてすぐお使いになれます。**

“`bash
nodeFileSystem
├── changeLines.js
├── deleteFiles.js
├── grepFiles.js
├── listUpFiles.js
├── modules
│   └── fsCustom.js
├── r

WebpackerなしでNode.jsベースの最小のJavaScriptビルド環境を設定する「minimum_javascript_on_rails」

# はじめに
事の始まりはかれこれ1年程運用している個人プロダクトにWebpackerを導入しようとしたことです。
Webpackerを使うという選択は正直「なんとなく」でした。しかしWebpackerに関する様々な記事を読んでいたところ、pixivさんの[今日から簡単！Webpacker 完全脱出ガイド](https://inside.pixiv.blog/subal/4615)やMisocaさんの[Webpackerを導入してから外すまでをふりかえる](https://tech.misoca.jp/entry/2019/02/22/110000)をはじめとした脱Webpacker系記事がいくつか見受けられたことや、「なんとなく」Webpackerを使うよりは自分で設定した方がはるかに勉強になると思い、結果的にWebpackerの使用はやめました。

本記事では、`minimum_javascript_on_rails`を参考に最小のビルド環境を設定する手順を説明していきたいと思います！

# minimum_javascript_on_railsとは
> WebpackerなしでN

【TypeScript】マークダウン文字列をHTMLにパースする(GitHub Flavored Markdown)

# サンプル

今回紹介するコードを使用しているのがこちら。

デモページ: [github-markdown-editor](http://d16jzdw21epfsy.cloudfront.net)
github: [kou-pg-0131/github-markdown-editor](https://github.com/kou-pg-0131/github-markdown-editor)

# 使用するモジュール
– `marked`, `@types/marked`
markdownをHTMLにパース

– `highlight.js`,`@types/highlight.js`
コードのシンタックスハイライト部分をパース
**`highlightjs`モジュールも存在しますが、別物なので間違えないように注意**

“`bash
npm i marked @types/marked highlight.js @types/highlight.js
“`

# サンプルコード

“`typescript
import marked from ‘m

毎日npm auditを実行して脆弱性対応する

## はじめに

Node.jsで開発している方は多くのnpmパッケージを利用していますよね。これらの脆弱性をいち早く見つけて対応するために、私が実践していることを紹介します。

CIと言えるかやや不安ですが、細かく考えずCI/CD Advent Calendarに投稿してしまいます。

## 背景

ある程度の規模の企業では、依存パッケージの脆弱性スキャンとしてOSSや商用ツールを利用しているところもあるでしょう。ただし、小規模な企業や個人開発ではそこまでなかなか手が回らない、お金が出せないというケースもあるかもしれません。そこで、安価に（できれば無料で）手っ取り早く脆弱性を発見する仕組みを検討してみました。

## 対象

`package-lock.json`に列挙されている依存パッケージの脆弱性検知を対象とします。自前のソースコードの脆弱性スキャンなどは本記事の対象外です。

## 脆弱性検知の方法

私は個人開発のリポジトリで2つの方法を併用しています。

– [Snyk](https://snyk.io/)
– npm audit on CircleCI

本記事では後者を

Node.js & Express & MySQL & React でTODOリスト API編

## 目的
ReactでTODOアプリを作成したことはありますが、自分でAPIを書いたことがなかったので書いてみました。
Web企業未経験なので、間違いなどありましたらご指摘いただけると助かります！

## APIを書くまえに
まずは簡単にNode.jsとReactの勉強をUdemyで行いました。
Linkは下記になります。

【フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門】
https://www.udemy.com/course/react-application-development/

【Node.js速習講座 Part1 <導入＆基礎編>】
https://www.udemy.com/course/nodejs-part1/

【Node.js速習講座 Part1 】
https://www.udemy.com/course/nodejs-part2-express/

## データベースとテーブルの準備
まずはじめにMySQLで必要なテーブルを準備します。

“`
$ sudo service mysqld