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

エンジニアなら知っておくべき教養、フレームワーク解剖学【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
│   └── fsCusto

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

Node.js & Express & Socket.ioで非同期通信しようとしたら”/socket.io.js 404″で上手くいかない

#はじめに
今までRailsしかやってこなかったのでNode.jsを入門しようと思い, とりあえずexpress-generatorでWebアプリの雛形を作り, Socket.ioを使った簡単な非同期通信チャットアプリを作ろうと思いました.
しかし, npm startしてページを開けても

“`
GET /socket.io/socket.io.js 404
“`
と出てしまい上手くいきませんでした.

色々ググったら解決したので, 備忘録として記事を書きます.
間違ってる部分があればコメントでご指摘頂けると助かります.

#環境
macOS Mojava **10.14.6**
Node.js **12.13.1**
npm **6.12.1**
Express **4.17.1**
Socket.io **2.3.0**

#何がダメだったか（私の場合）
このエラーの原因は色々と考えられますが, 私の場合はapp.jsに

“`javascript
var io = require(‘socket.io’)(server);
io.on(‘connection’, fun

nodebrew から nodenv に移行しました

nodebrew はディレクトリごとに利用するバージョンが切り替えられないので nodenv へ移行しました。
そのときの手順メモ。 mac OS で brew で nodebrew をいれてありました。

## 利用しているバージョンを控えておく
“`
$ nodebrew list
“`

## nodebrew をアンインストール
“`
$ brew update
$ brew uninstall nodebrew
“`

利用しているシェルの設定ファイルから以下を削除する。

“`
export PATH=$HOME/.nodebrew/current/bin:$PATH
“`

## nodenv をインストール

まずは README を読む
https://github.com/nodenv/nodenv

“`
$ brew install nodenv
“`

シェルの設定に以下を追加しておく

“`
eval “$(nodenv init -)”
“`

## nodenv の基本的な使い方

### 利用できるバージョンの確認
“`
$ no

Apache経由でExpressに接続する方法

## 環境

* CentOS 7.7
* Apache 2.4.6
* node v12.13.1
* express-generator 4.16.1

## イメージ

## 設定手順
### 1. httpdの設定ファイルを編集する

サーバにhttpdがインストールされていない場合は、以下のコマンドでインストールし、有効化します。

“`
$ sudo yum update
$ sudo yum install httpd

$ sudo systemctl enable httpd
$ sudo systemctl start httpd
“`

`/etc/httpd/conf.d/`の直下に、`hoge.conf`というファイルを作ります。(`hoge`は変更可能)

今回はApacheをプロキシのような中継サーバ

【自分用】webpackの使い方

#webpackとは
webpackとは、HTMLやCSS、JavaScriptなどWEBサイトやWEBアプリを構成するファイルを1つにまとめてくれるツールです。

ファイルを1つにまとめることで、たくさんのメリットがあります。

####① HTTP通信の高速化
HTTP通信では、ブラウザとサーバーの同時接続数が限られるため、接続回数が増えれば、ファイルの転送にそれだけ時間がかかります。
そこで、ファイルを1つにまとめることで、サーバーとの接続回数を少なし、ファイルの転送時間を減らすことができます。

####②保守性が上がる
これまでのJavaScriptファイルは全てのファイルをHTMLに`