● まず anyenv をインストール

ターミナルから以下を実行します。

brew install anyenv

echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
echo $SHELL -l

一旦ターミナルを終了して、再度起動。

メッセージが出るので次のコマンドを実行

anyenv install --init

・2. anyenv を使って nodenv をインストール

anyenv install nodenv

exec $SHELL -l

これでインストールは完了です。

・2-B. node.jsインストール時に同時に自動的にyarnもインストールしてくれるように設定する

yarn自動インストールの設定

mkdir -p "$(nodenv root)/plugins"
git clone https://github.com/pine/nodenv-yarn-install.git "$(nodenv root)/plugins/nodenv-yarn-install"

これを行うだけでnode.jsインストール時に同時に自動的にyarnもインストールしてくれます

yarn を手動でインストールする 場合はこちらのコマンド実行

npm install --global yarn

・3. インストール可能な node.js の全てのバージョンを表示する

nodenv install -l

・4. 例） node.js version 18.14.0 をインストールする

nodenv install 18.14.0

M1 Macには バージョン16以上しかインストールすることができませんのでご注意ください

・5. 例） システム全体で使用する node.js のバージョンを 18.14.0 にする

nodenv global 18.14.0

・6. あるフォルダ以下では 使用する node.js のバージョンを 6.3.0 にする

フォルダ「my-project」以下は v16.19.0 を使用するようにセットします

cd my-project
nodenv install  16.19.0
nodenv local  16.19.0

これで、フォルダ「my-project」以下は必ず 16.19.0 になります。

・6. node.js が使えることを確認する

node -v

正しくバージョンが表示されればOKです。

● マシンにインストールした node の全バージョンを表示する

nodenv versions

● nodenv のインストール時に default-packages file not found と表示される時の修正方法

touch $(nodenv root)/default-packages

引用 : https://bit.ly/2VGjCxp

● nodenvのインストール可能なリストを更新する

cd ${NODENV_ROOT}
git pull

cd ${NODENV_ROOT}/plugins/node-build/
git pull

● Node.js Global pathをセットする

~/.bash_profile に記述しておきます

# Node.js Global pathをセット
node_global_path=$(npm root -g)
echo ${node_global_path}
export NODE_PATH=${node_global_path}

● install

curl https://get.volta.sh | bash

（インストール後にターミナルを終了して、再起動します）

● volta を 使って node.js の特定バージョンをインストールする

バージョン 14.17.0 をインストールする例

volta install node@14.17.0

● volta を 使って node.js の特定メジャーバージョンの最新版をインストールする

バージョン 18系の 最新をインストールする例

volta install node@18

● volta を使ってインストールしたnode.jsのすべてのバージョンを表示させる

volta list all

（インストール後にターミナルを終了して、再起動します）

● インストールしたnode.jsのバージョンの確認

node -v

● volta をアンインストールする

1. volta 本体と voltaを使って インストールしたnode.jsのアンインストール

rm -rf ~/.volta

2. bash_profile から以下のパスを削除

export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"

● npx を使用する場合

サーバーを立てたいディレクトリに移動した後

npx http-server

これだけで okです。

● npm install を使用する場合

サーバーを立てたいディレクトリに移動した後

npm install http-server
./node_modules/http-server/bin/http-server

これだけで okです。

● オプション

例えばポート番号を変更するには以下のように指定します

./node_modules/http-server/bin/http-server  --port 50001

● パッケージのインストール

npm install @aws-sdk/client-s3
npm install @aws-sdk/s3-request-presigner

● signed URL を取得する

geturl.js

import { GetObjectCommand, S3Client } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
// ************************
const accessKeyId = 'XXXXX'; 
const secretAccessKey = 'XXXXX';
const region = 'XXXXXXXXXX';
const bucket = 'my-bucket';
const key = 'my-file.png';
// ************************
const client = new S3Client({
  region: region,
  credentials: {
    accessKeyId: accessKeyId,
    secretAccessKey: secretAccessKey,
  },
});

const url = await getPresignedUrl(client, bucket, key, 60*60*8);
console.log( `the url is ${url}` );

async function getPresignedUrl(client, bucket, key, expiresIn) {
  const objectParams = {
    Bucket: bucket,
    Key: key,
  };

  const url = await getSignedUrl(client, new GetObjectCommand(objectParams), { expiresIn });
  return url
};

● package.json で esmoduleを読み込めるようにする

package.json

"type": "module"

● 実行する

node geturl.js

● モックの Test Double 分類

一言でモックと言っても、実は以下のように分類されます.
dummy , fake , spy, stub, mock

● Jest で使用するTest Doubleは？

Jestでは 大きく分けて、次の2つ jest.mock , jest.spyOn を使います。

.prettierrc.js

module.exports = {
  arrowParens: 'always',
  bracketSameLine: false,
  bracketSpacing: true,
  htmlWhitespaceSensitivity: 'css',
  insertPragma: false,
  jsxSingleQuote: true,
  printWidth: 120,
  proseWrap: 'preserve',
  quoteProps: 'as-needed',
  requirePragma: false,
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'none',
  useTabs: false
}

 arrowParens : alwaysの時 Arrow関数の引数が１つでも括弧がつく。avoid の時付かない

● JWTをざっくり説明すると以下の通り

・ヘッダ、ペイロード（データ本体）、署名をドットでつないで Base64 エンコードしたもの。

・中身は Base64エンコードしただけなので、ペイロードの中身は誰でも見ることができる。

・電子署名を使用して、ペイロードが改ざんされていないか？、正規の発行元以外から勝手に発行されたものかどうか？などを検証することができる。

・よく「JWT脆弱性」というワードが出てくるがJWT自体に脆弱性はない。
（正しくは「JWTを使用した認証システムに脆弱性が存在することがある」）

● node.js で jwt を扱うパッケージ auth0 / node-jsonwebtoken

https://github.com/auth0/node-jsonwebtoken

● node.js 以外の他の言語で jwt を扱うパッケージ

https://jwt.io/libraries

● JWTの署名のアルゴリズム

引用: https://github.com/auth0/node-jsonwebtoken

jwtのアルゴリズムを知る方法

https://jwt.io/ にトークンを入力するとヘッダに

{
  "alg": "RS256",
  "kid": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "typ": "JWT"
}

と表示されます。（"alg": "RS256" なので RS256）

HS256とRS256の違いは何ですか？

HS256

HS256（ _ hmac _ with SHA-256）は、 対称アルゴリズム で、2者間で共有される唯一の（秘密）キーを持ちます。署名の生成と検証の両方に同じキーが使用されるため、キーが危険にさらされないように注意する必要があります。

RS256

RS256（ SHA-256 を持つRSA署名）は 非対称アルゴリズム で、公開鍵と秘密鍵のペアを使用します。アイデンティティプロバイダには署名の生成に使用される秘密（秘密）鍵があります。 JWTの利用者は、署名を検証するための公開鍵を入手します。秘密鍵ではなく公開鍵を保護する必要がないため、ほとんどのアイデンティティプロバイダは、（通常メタデータURLを通じて）消費者が簡単に入手して使用できるようにしています。

HS256は危険です。RS256を使いましょう。
Google Firebase Auth , Amazon AWS Cognito の accessToken は RS256 です。

● サーバーサイドでクライアントから受け取った「jwtの検証」

サーバーサイドではクライアントから受け取ったjwtの以下の点を検証します

・jwtのペイロード（データ本体）に「改ざんがあるかどうか？」の検証
・想定している発行元以外から「勝手に発行されたjwtかどうか？」の検証
・jwtの有効期限が「有効期限内であるかどうか？（jwtが有効か？）」の検証

● node-jsonwebtoken を使った検証(verify)のサンプル

Google Firebase の Authentication で受け取ったトークンを検証します。
検証に使用する公開鍵はGoogleのサーバから取得します。

npm install  jsonwebtoken axios

const axios = require("axios").default;
const jwt = require("jsonwebtoken");

/**
 * 
 * @param {string} accessToken 
 */
const verifyJWT = async (accessToken) => {
  const kid = getKidFromJwtHeader(accessToken);
  const publicKey = await getPublicKeyFromFirebase('https://www.googleapis.com/robot/v1/metadata/x509/securetoken@system.gserviceaccount.com', kid);

  jwt.verify(accessToken, publicKey, function (err, decoded) {
    if (err) {
      console.log('● verifyでエラーが発生');
      console.log(err);
    }
    else if (decoded) {
      console.log('● verify OK');
      console.log(decoded);
    }
    else {
      console.log('● JWTのデコードができませんでした');
    }
  });
}

/**
 * jwtからヘッダの中のkidを取得
 * @param {string} token 
 * @returns {string} key 
 */
const getKidFromJwtHeader = (token) => {
  const jwtHeader = getJwtHeader(token)
  const obj = JSON.parse(jwtHeader)
  return obj.kid
}

/**
 * jwtからヘッダを取得
 * @param {string} token 
 * @returns {string} key 
 */
const getJwtHeader = (token) => {
  const tokenHeader = token.split('.')[0]
  const jwtHeader = Buffer.from(tokenHeader, 'base64').toString()
  return jwtHeader
}

/**
 * Firebaseのjwt検証用公開鍵を取得する
 * @param {string} url 
 * @param {string} kid 
 * @returns {string} key 
 */
const getPublicKeyFromFirebase = async (url, kid) => {
  const res = await axios.get(url)
  const publicKeys = res.data
  const key = publicKeys[kid]
  return key
}


verifyJWT("<検証したいトークン>");

● クライアント（WEBブラウザ）で受け取ったJWTの保存先

○「HTTP OnlyでSecureなCookieに保存する」
×「LocalStorageに保存する」 （ local storageはあらゆるJavaScriptコードから自由にアクセスできてしまいます ）

引用: https://bit.ly/3fMiqVy

● 他にjwtを取り扱う上で気をつけること

・共通鍵のアルゴリズムは選択しない
・鍵の長さは256bit以上とする
・検証をせずにデコードだけすると、改ざんまたは勝手に発行されたトークンを見ている可能性がある
（なので alg=none を使用するのはありえない）
・認証NGとなるjwtでも、データの中身は誰でも見れるので機密情報はjwtには含めない

vanilla js で jest で テストファイルの中にimpor export を使用すると次のようなエラーが表示されることがあります

   Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

これを node.js 変換によって回避する方法はこちらです

● 1. シェルから次のコマンドを実行する

export NODE_OPTIONS=--experimental-vm-modules

● 2. package,json に追加

"type": "module"　を追加します。

{
  "devDependencies": {
    "jest": "^28.1.2"
  },
  "type": "module"
}

● jest.config.js を esモジュール形式にする

module.exports = {
  testMatch: ['<rootDir>/**/*.test.js'],
};

　　　↓

export default {
  testMatch: ['<rootDir>/**/*.test.js'],
};

以上です。

● jest の実行

npm test

または

npx jest

してみましょう

● 1. WSL2のインストール

WSL2をインストールしたら、コマンドプロンプトではなく Windowsターミナルから Ubuntu を選択して、unixを起動します。

● 2. homebrew のインストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

echo 'eval "$(/home/kato/.linuxbrew/bin/brew shellenv)"' >> /home/kato/.bash_profile
eval "$(/home/kato/.linuxbrew/bin/brew shellenv)"

● 3. anyenvのインストール

brew install anyenv
anyenv init

echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
exec $SHELL -l
anyenv install --init

● 4. nodenvのインストール

anyenv install nodenv
exec $SHELL -l
nodenv --version

● 5. Yarn プラグイン のインストール

node.jsインストール時に同時に自動的にyarnもインストールしてくれるように設定する

mkdir -p "$(nodenv root)/plugins"
git clone https://github.com/pine/nodenv-yarn-install.git "$(nodenv root)/plugins/nodenv-yarn-install"

● 6. Node.js のインストール

nodenv install 16.13.2
nodenv global 16.13.2
node -v

● 1. Macのローカルマシンに Express で https:// なサーバを立ち上げる

server.js

'use strict';
const express = require('express');
const serveIndex = require('serve-index');
const fs = require('fs');
const port = 3000;
const app = express();
const server = require('https').createServer({
    key: fs.readFileSync('./privatekey.pem'),
    cert: fs.readFileSync('./cert.pem'),
}, app)
app.use(express.static('.'));
app.use(serveIndex('.', {icons: true}));
server.listen(port, () => console.log(`Server Started    https://127.0.0.1:${port}`))

nodeモジュールのインストール

npm init -y
npm i -S express serve-index

cert.pem , privatekey.pem の作成

openssl req -x509 -newkey rsa:2048 -keyout privatekey.pem -out cert.pem -nodes -days 365

サーバー起動

node server.js

● 2. Google Chromeからオレオレ証明書のhttpsサーバーにアクセスする

以下の手順でGoogle Chromeからアクセスできるようにします

・1. Firefoxから証明書の名前を確認する。

・2. Safariでアクセスしてキーチェーンに証明書を追加する。

・3. キーチェーンアプリから常に信頼する設定にする。

● Windows の node.js に module.paths を追加する

1. 現在の node.js の module.paths を確認する

node
module.paths

( Ctrl+C 2回押して抜けます。)

2. 環境変数 NODE_PATH にパスを追加する

SET NODE_PATH=C:\laragon\bin\nodejs\node-v14\node_modules

3. 再度 node.js の module.paths を確認する

node
module.paths

● reactアプリの初期化（TypeScript）

reactアプリの初期化（TypeScript）

npx create-react-app test-app --template typescript

reactアプリの初期化（JavaScript + TailwindCSS）

npx create-next-app my-first-next-with-tailwind -e with-tailwindcss

● firebase の 初期化

firebase-tools のインストール

npm install -g firebase-tools

バージョン8を指定して入れる場合は以下のようにインストールします
（バージョン9からファイルサイズが小さくなったため 9がオススメですが。）

npm install -g firebase-tools@8

firebase --version

8.20.0

一旦ログアウトしてから再度ログイン

firebase-tools のバージョン違いによりエラーが出ることがあるので一旦ログアウトを行ってから再度ログインします

 firebase logout
 firebase login

プロジェクト一覧の表示

firebase projects:list

firebaseの設定

firebase init

例えば以下のように質問に答えます

? Which Firebase features do you want to set up for this directory?
→ （ホスティングを行う場合） ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
→ （Firestoreを使う場合） ◯ Firestore: Configure security rules and indexes files for Firestore


? What do you want to use as your public directory? 
→ build

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 
→ y

? Set up automatic builds and deploys with GitHub? (y/N) n
→ n

● firebase へデプロイ

npm run build
firebase deploy

Hosting URL: https://my-app-xxxxx.web.app

● firebaseへデプロイしたアプリを削除

firebase hosting:disable

URLにアクセスしてNOT FOUNDになっていることを確認します。

● electron で アプリのアイコンを設定する

・electron-builder を使用している場合

  "build": {
    "mac": {
      "icon": "./icon.png"
    },
    "win": {
      "icon": "./icon.png"
    },
  }

・Electron-Forge v5 を使用している場合

package.json に以下の設定を追加します。　（アイコン画像は path/to/icon.icns に設置）

{
  ...
  "config": {
    "forge": {
      ...
      "electronPackagerConfig": {
        "icon": "path/to/icon.icns"
      },
      ...
    }
  }
}

・Electron-Forge v6: を使用している場合

package.json に以下の設定を追加します。　（アイコン画像は path/to/icon.icns に設置）

{
  ...
  "config": {
    "forge": {
      ...
      "packagerConfig": {
        "icon": "path/to/icon.icns"
      },
      ...
    }
  }
}

npm run package で再度ビルドを行います

なおアイコン画像の形式はMacの場合icns形式である必要があります。
こちらのウェブサイトからPing画像からicnsへ変換することができます

● cloudconvert

https://cloudconvert.com/

● electron で URLを開く

const { shell } = require('electron')
shell.openExternal('http://localhost/')

● electron で ローカルのフォルダを開く

const { shell } = require('electron')
shell.openPath('/Users/hogehoge/テスト フォルダ/001');

● 1. Vue アプリのインストールと起動の確認

vue create electron-vue-hello
cd cd electron-vue-hello
npm run serve

http://localhost:8080/ にアクセスして起動することを確認します

● 2. electron-builder のインストールと起動の確認

control + c でプロセスをkillして次のコマンドからインストールします

vue add electron-builder

package.json 次のコマンドが追加されたことを確認します

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },

● 3. electronアプリを実行する

npm run electron:serve

● 4. electronアプリをビルドする

npm run electron:build

ここまで来れました準備は全て完了です次はプログラムを記述していきましょう。

● 5. プログラムコードを記述する

npm run electron:build

● electron アプリの記述個所参照方法

1. package.json の main

例

  "main": "src/index.js",

2. src/index.js

index.js の createWindow にイベントを記述していきます

例

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();
};


// ● 続けてイベントを記述 ↓

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

● electron のインストール

npm install electron --save-dev

● electron アプリの作成

npx create-electron-app my-hello-app

● my-hello-app アプリの起動

cd my-hello-app
npm start

アプリが起動します

● メインプロセスとレンダラープロセス（View）とのデータのやり取り

touch src/renderer.js

renderer.js

const { ipcRenderer } = require('electron')
// DOM Ready
document.addEventListener("DOMContentLoaded", function () {
    /**
     * my-btn を押すとメインプロセスへデータを渡す
     */
    const btn = document.getElementById('my-btn')
    btn.addEventListener('click', () => {
        ipcRenderer.send('MessageMain', { message: 'レンダラーからメインプロセスへメッセージです。' });
        console.log( '● レンダラーからメッセージを送信しました' );
    });
});

index.html で renderer.js を読み込みます。

index.html

    <script src="renderer.js"></script>

index.js でメッセージを受けれるようにしておきます。

index.js

/**
 * レンダラープロセスからデータの受信 (MessageMain)
 *
 */
ipcMain.on('MessageMain', (event, arg) => {
  console.log( '● arg' );
  console.log( arg );
})

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });

　　↓

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

● my-hello-app アプリのビルド

npm run make

out フォルダにアプリができます。 （ファイルサイズが大きいのは諦めましょう）

windows 32bit用にビルド

npx electron-forge make --arch=ia32

● electronアプリのビルドサイズを小さくする

こちらを clone してビルドしてみましょう。 https://github.com/electron-react-boilerplate/electron-react-boilerplate

● Electron製アプリの起動速度を1,000ミリ秒速くする方法

https://blog.craftz.dog/how-to-make-your-electron-app-launch-1000ms-faster-bcc2997fa1f7

● electronアプリの 配布用パッケージ.dmg インストーラを作成する

electron-builderのインストール

npm install electron-builder --save-dev

● パッケージ作成を実行する

・mac 64bit 用にアプリの 配布用パッケージ.dmg インストーラを作成する

node_modules/.bin/electron-builder --mac --x64

・windows 64bit 用にアプリの 配布用パッケージを作成する

npx electron-builder --win --x64

・windows 32bit 用にアプリの 配布用パッケージを作成する

npx electron-builder --win --ia32

● .env ファイルに設定情報を記述しelectronアプリから読み込む

npm install --save dotenv

「プロジェクトのトップディレクトリ」に .env ファイルを作成します

.env

HOGE=テスト文字列

index.js

//.envに記述したデータを読み込み
require('dotenv').config();

// 環境変数の表示
  console.log('● process.env');
  console.log( process.env );

ビルドしたときもビルドしたトップディレクトリに .env を設置する必要があります。

● デフォルトのブラウザでURLを開く

const { shell } = require('electron')
shell.openExternal('https://www.google.com/')

● electronアプリをシングルインスタンスを強制する

app.on('ready', createWindow);

　　　↓

const gotTheLock = app.requestSingleInstanceLock();

if (!gotTheLock) {
   .... 何かしらの行いたい処理
  setTimeout( function(app) {
    app.exit();
  }, 1500, app );
} else {
  app.whenReady().then(() => {
   .... 何かしらの行いたい処理
  });
}

● lodashのインストール

yarn add lodash
yarn add --dev @types/lodash

または

npm install lodash
npm install --D @types/lodash

● javascript , lodash の コレクション操作の便利メソッド

次のようなコレクション系データがあったとします。

var stageItems = [
	{ id: 5, name: "山田" },
	{ id: 6, name: "斎藤" },
	{ id: 7, name: "朝倉" },
	{ id: 8, name: "神山" },
	{ id: 9, name: "山田" },
];

● 検索して1件のみ返す find

// id = 6 なアイテムを選択します
const item = _.find(stageItems, { id:6 });

● 検索して複数件返す filter

// name:'山田' なアイテムを全て返します
const item = _.filter(stageItems, { name:'山田' });

なお、コレクションだけでなくこのようなオブジェクトのオブジェクトでも検索可能です

var stageItems = {
	5: { id: 5, name: "山田" },
	6: { id: 6, name: "斎藤" },
	7: { id: 7, name: "朝倉" },
	8: { id: 8, name: "神山" },
	9: { id: 9, name: "山田" },
};

● オブジェクトの 指定したキー以外の要素を取得する omit

const obj1 = {
  id: "hoge",
  name: "ほげ",
  phone: "123-4567"
};

const newObj = _.omit(obj1, ["id", "phone"]); // {name: "ほげ"}

● 何番目の要素なのかを検索

// id = 6 が 何番目の要素なのかを検索 （ 0 が先頭 ）
const added_i = this.stageItems.findIndex(({id}) => id === 6);
alert( added_i ); // 2番目の要素なので 1

● コレクションのソート

const sortedItems = sortBy(items, "name");

// 逆順にする場合は .reverse() を実行します
const sortedItems = sortBy(items, "name").reverse();

// =>
// [
//   { name: 'coffee', amount: 500 },
//   { name: 'juice', amount: 500 },
//   { name: 'lunch-a', amount: 1000 },
//   { name: 'lunch-b', amount: 1200 },
//   { name: 'smile', amount: 0 },
//   { name: 'suger' }
// ]

引用: https://hbsnow.dev/blog/js-sort/

● 削除

    itemDelete: function ( argId ) {
      alert("このidを削除します" + argId);
      this.stageItems = _.remove(this.stageItems, function (o) { return o.id !== argId; });
    },

● 配列の先頭 または 末尾から n個 削除

drop : 先頭 n個 削除
dropRight : 末尾 n個 削除

const data2 = _.dropRight(data, 3)    // 先頭 3つを削除
const data2 = _.dropRight(data, 2)    // 末尾 2つを削除

● コレクションからあるメンバだけを取り出したコレクションを作成して返す ( pluck )

const originalAttachFilesIDs = _.map(originalAttachFiles, 'fileID')

    const simpleItems = _.map(stageItems , (data) => {
      return { name: data.name }
    })

pluckメソッドは version 4 から .map() に統合されたようです。

// in 3.10.1
_.pluck(objects, 'a'); // → [1, 2]
_.map(objects, 'a'); // → [1, 2]

// in 4.0.0
_.map(objects, 'a'); // → [1, 2]

● オブジェクトのディープコピー

・JavaScriptではオブジェクトのコピーは参照コピーとなります。
・JavaScriptでは スプレッド構文やObject.assignを使ったコピーは1階層目は値がコピーされますが、
2階層以降にオブジェクトがあった場合 参照コピー となります。

オブジェクトをディープコピーしたい場合はこちらの cloneDeep()メソッドを使用します

const clonedItem = _.cloneDeep(item);

● javascript スプレッド構文とObject.assignを使ったコピーでは2階層目が参照コピーとなる例

const taguser1 = {
  id: 1,
  name: "hoge",
  tags:[
    {
      id:1,
      name: "Windows"
    } ,
    {
      id:2,
      name: "mac"
    }
  ]
};
const taguser2 = { ...taguser1 }; // 参照のコピー（オブジェクトをコピーした場合は参照がコピーされる）
const taguser3 = Object.assign({}, taguser1);

taguser1.id = 99999;
taguser1.tags[0].name = "ウィンドウズ"

console.log( '● taguser1' );
console.log( taguser1 );

console.log( '● taguser2' );
console.log( taguser2 );

console.log( '● taguser3' );
console.log( taguser3 );

結果

● taguser1 ​​​​​
{ id: 99999,
  name: 'hoge',
  tags: [ { id: 1, name: 'ウィンドウズ' }, { id: 2, name: 'mac' } ] }

● taguser2
{ id: 1,
  name: 'hoge',
  tags: [ { id: 1, name: 'ウィンドウズ' }, { id: 2, name: 'mac' } ] }

● taguser3
{ id: 1,
  name: 'hoge',
  tags: [ { id: 1, name: 'ウィンドウズ' }, { id: 2, name: 'mac' } ] }

参考 : https://qiita.com/waterada/items/62b32930d3c3668ff3d2

● lodash のバンドルサイズを小さくする

https://www.labnol.org/code/import-lodash-211117

import capitalize from 'lodash.capitalize';

const capitalizeFirstName = (name) => {
  const result = capitalize(name);
  console.log(response);
};

● memoize を 複数のキーで使用する

import memoize from 'lodoash/memoize';

const expensiveFunction = (input) => {
  return input * input;
};

const memoizedFunction = memoize(expensiveFunction);

console.log(memoizedFunction(5)); // Calculates the square of 5
console.log(memoizedFunction(5)); // Returns the cached value

　↓

const multiply = (a, b) => {
  return a * b;
};

const resolver = (...args) => {
  return JSON.stringify(args);
};

const memoizedMultiply = _.memoize(multiply, resolver);

console.log(memoizedMultiply(1, 2)); // Calculates the product of 1 and 2 and caches the result
console.log(memoizedMultiply(1, 3)); // Calculates the product of 1 and 3 and caches the result
console.log(memoizedMultiply(1, 2)); // Returns the cached value

● You-Dont-Need-Lodash-Underscore

https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

● lodash代替コード 検索サイト

https://youmightnotneed.com/lodash/

_.find の例

// Native JavaScript
var users = [
  { 'id': 1 , 'user': 'barney',  'age': 36, 'active': true },
  { 'id': 2 , 'user': 'fred',    'age': 40, 'active': false },
  { 'id': 3 , 'user': 'pebbles', 'age': 1,  'active': true }
]

const id = 3;
const user = users.find(function (o) { return o.id === id; })

_.pluck の例

// Underscore/Lodash
var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
var names = _.pluck(array1, "name")
console.log(names)
// output: ["Alice", "Bob", "Jeremy"]

// Native
var array1 = [{name: "Alice"}, {name: "Bob"}, {name: "Jeremy"}]
var names = array1.map(function(x){
  return x.name
})
console.log(names)
// output: ["Alice", "Bob", "Jeremy"]

アロー関数でこのように記述できます

const names = array1.map(x => x.name);

_.uniq の例

// Underscore/Lodash
var array = [1, 2, 1, 4, 1, 3]
var result = _.uniq(array)
console.log(result)
// output: [1, 2, 4, 3]

// Native
var array = [1, 2, 1, 4, 1, 3];
var result = [...new Set(array)];
console.log(result)
// output: [1, 2, 4, 3]

複数の配列の共通する値を取得する _.intersection の例

// Underscore/Lodash
console.log(_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]))
// output: [1, 2]

// Native
var arrays = [[1, 2, 3], [101, 2, 1, 10], [2, 1]];
console.log(arrays.reduce(function(a, b) {
  return a.filter(function(value) {
    return b.includes(value);
  });
}));
// output: [1, 2]

// ES6
let arrays = [[1, 2, 3], [101, 2, 1, 10], [2, 1]];
console.log(arrays.reduce((a, b) => a.filter(c => b.includes(c))));
// output: [1, 2]

コレクション内に特定の キーの存在を確認する _.has

// Lodash
var object = { a: 1, b: 'settings', c: { d: 'test' } };
  
var hasA = _.has(object, 'a');
var hasCWhichHasD = _.has(object, 'c.d')

console.log(hasA);
// output: true
console.log(hasCWhichHasD);
// output: true

// Native
const has = function (obj, key) {
  var keyParts = key.split('.');

  return !!obj && (
    keyParts.length > 1
      ? has(obj[key.split('.')[0]], keyParts.slice(1).join('.'))
      : hasOwnProperty.call(obj, key)
  );
};

var object = { a: 1, b: 'settings' };
var result = has(object, 'a'); 
// output: true

参考 : https://bit.ly/3guGUik

● next.js サイトのインストールと起動（create-next-app コマンド）

npx create-next-app

実行するとサイト名を

What is your project named? … 

と聞かれますので入力します。（ 例: test-app）

アプリ名を指定して新規作成する場合は

npx create-next-app --example parameterized-routing test-app

のようにすると

example指定: parameterized-routing
アプリ名: test-app

で新規作成します。

Next.js公式examples集を分類

https://bit.ly/396iZE8

next.js の 起動 ( 1. dev )

npm run dev

next.js の 起動 ( 2. build & start )

npm run build
npm run start

next.js の ページを追加する

新規ファイルを作成

vi pages/page01.js

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div>
      <h1>Hello page01</h1>
    </div>
  )
}

これが URL
http://localhost:3000/page01

にあたります。

ボタンの作成

<Link href="/page02">
  <button>page02</button>
</Link>

● 静的サイトとしてビルドする

package.json

{
  "scripts": {
    ...
    "build_static": "next build && next export -o dist",
  },

（ "build_static"の行を追加します ）

ビルドの実行

npm run build_static

/dist/ フォルダに書出が行われます。

● examples

https://github.com/vercel/next.js/tree/master/examples

● json に コメントを記入する

JSON ファイルにコメントを記述することはできませんが以下のように無効なパラメーターとして登録しておくことでコメントを対応させることができます。

_comment にコメントを記述する

{
   "_comment": "comment text goes here...",
   "glossary": {
      "title": "example glossary",
      "GlossDiv": {
         "title": "S",
         "GlossList": {
         }
      }
   }
}

引用: http://bit.ly/2PbxnQS

● npmパッケージ検索サイト

おすすめ順に紹介します

● 1. npms.io

https://npms.io/

● 2. npmjs.com

https://www.npmjs.com/

● 3. node-modules.com

http://node-modules.com/

● puppeteerのインストールと検証

npm i puppeteer

vi test_puppeteer.js

以下の内容で保存します。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });

  const page = await browser.newPage();
  await page.goto('https://google.co.jp/');
  await page.screenshot({path: __dirname + '/test_puppeteer.png'});
  await browser.close();
})();

実行します

node test_puppeteer.js

● libX11-xcb.so.1 が読み込めないというエラーが表示される場合

libX11-xcb.so.1: cannot open shared object file: No such file or directory

と言うようなエラーが表示される場合があります

・libX11-xcb.so.1の場合

chromiumをインストールします（Centos stream）

dnf install -y chromium

・libXss.so.1の場合

libXScrnSaverをインストールします（Centos stream）

dnf install -y chromium

その他参考 : https://github.com/puppeteer/puppeteer/issues/5361

● puppeteer-core のインストールと検証

puppeteer と puppeteer-coreの違いは？

puppeteerをインストールした場合はGoogle Chromeのバイナリを追加でダウンロードします。
puppeteer-coreは使用しているマシンに既にインストール済みのGoogle Chromeを使用します。（Google Chromeのダウンロードは行いません）

npm i puppeteer-core

vi test02.js

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',    
  });
  const page = await browser.newPage();
  await page.goto('https://google.co.jp/');
  await page.screenshot({path: 'test02.png'});

  await browser.close();
})();

node test02.js

● Sandboxエラーとなる場合は

  const browser = await puppeteer.launch();

　　↓

  const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });

　としておきましょう。

● npmパッケージをインストールする

npm install -g vsce

npm install -g yo

yo doctor

vsce --version

1.95.1

バージョン番号が返ってくればOKです。

● Publisherの作成

Azure Dev Ops にログインして「Profile」→「Personal access tokens」から Personal Access Tokens を作成します。
設定はこちらを参考にします。

https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&tabs=preview-page

作成したトークンをコピーしておきます。

● ログインの確認

vsce login <ユーザー名>

（コピーしておいたトークンを使ってログインします）

● githubにpushする

作成した拡張をgithubにpushします。（詳細は割愛します）

● package.json に以下を追加する

	"icon": "icon.png",
	"repository": {
		"type": "git",
		"url": "https://github.com/xxxxx/YOUR-GIT-PROJECT-NAME"
	},
	"bugs": {
		"url": "https://github.com/xxxxx/YOUR-GIT-PROJECT-NAME/issues"
	},

● vsce publish する

vsce publish

● vsce publish する（ログイン確認を行わずいきなりパブリッシュする場合）

vsce publish -p <token>

コマンドのヒストリにトークン文字列が残るので注意しましょう

npm ls で deduped がたくさん出るようなら yarn への乗り換えを検討しましょう。

● yarn を使用する

 brew install yarn

● yarn のバージョンを確認する

 yarn -v

1.19.1

● npmの代わりに yarn を使用する

npm install image-js

↓

yarn add image-js

Webpack4 + Babel を使用して IE11 での動作を確認する。

● webpackのインストール

ローカルにインストールします（ サイズはさほど大きくなく、46MB 程度なので複数のローカル環境に入れてもあまりディスクの負担になりません）

webpackとwebpack-cliとwebpack-dev-serverをインストールする

cd YOUR-PROJECT-FOLDER
npm install webpack webpack-cli webpack-dev-server -D
npm init -y

なお、オプションの -D は　--save-dev と同じです
https://docs.npmjs.com/misc/config

● ソースファイルを用意する

./src/index.js

import {hellowebpack} from './f';
hellowebpack();

./src/f.js

export function hellowebpack() {
  alert('hellowebpack!!!');
}

● webpacのビルドの実行

npx webpack

./dist/main.js が以下のような内容で作成されます

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),alert("helloメソッドが実行された。")}]);

javascriptのコードが圧縮されています。
これは 「 mode: 'production' 」な本番仕様です。
開発環境では圧縮しない 「 mode: 'development' 」を使用することでコンパイル時間を圧倒的に短縮することができます。
（ ↓ やり方はこの後で）

● webpackの ソースファイルをwatchしながらビルドの実行

webpack.config.js

watch: true を追加すると watch します

module.exports = {
    ........................
    watch: true
};

● index.htmlを作成し、表示させる

1. index.html の作成

./dist/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>webpack test</title>
	<script src="./main.js"></script>
</head>
<body>
</body>
</html>

2. webpack.config.js の作成

mode: 'development' の記述はここに行います。

module.exports = {
    devtool: 'inline-source-map' ,
    mode: 'development',	// （development: 開発　　　production: 本番）
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
    devServer: {
        contentBase: 'dist',
        open: true
    }
};

3. npx webpack-dev-server で サーバを起動する

npx webpack-dev-server

これでサーバが起動し、自動的に ./dist/index.html を読み込んで「hellowebpack！！！」アラートが表示されれば成功です。

● ファイル変更時の自動更新を確認する

webpack-dev-serverを起動しておくと、対象ファイルが更新された時に自動でリコンパイルがかかります。 それを確認してみます。

./src/f.js を以下のように変更して保存する

export function hellowebpack() {
  alert('hellowebpack!!! 変更しました。');
}

ブラウザに切り替えて、自動的に更新されていることを確認します。
自動更新機能は便利ですね！

● 本番サーバへファイルをアップロードして動作を確認する

「control + c 」で webpack-dev-serverを終了してから webpack ビルドを行う。

npx webpack

./dist/ 以下の全てのファイルを本番WEBサーバへアップロードして表示させて確認します。

● webpack で js 以外に css も読み込めるようにする

webpack ではデフォルトでは js しか読み込めません。 css を読み込むようにするには

style-loader css-loader をインストールする

npm i -D style-loader css-loader

webpack.config.js の設定項目の一番下に以下を追加します。

 module: {
      rules: [
        {
          test: /\.css/,
          use: [
            'style-loader',
            {loader: 'css-loader', options: {url: false}},
          ],
        },
      ]
    }

引用: https://goo.gl/QhDqE9

● webpack で js 以外に scss (sass) も読み込めるようにする こちらが今一番WEB制作的には一番現実的でしょう。

npm i -D webpack webpack-cli sass-loader sass style-loader css-loader

webpack.config.js を次のようにします。

// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";

// ソースマップの利用有無(productionのときはソースマップを利用しない)
const SOURCEMAP_FLAG = MODE === "development";  // true or false

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: MODE ,
  module: {
    rules: [
      {
        // 対象となるファイルの拡張子(scss)
        test: /\.scss$/,
        // Sassファイルの読み込みとコンパイル
        use: ExtractTextPlugin.extract([
          // CSSをバンドルするための機能
          {
            loader: 'css-loader',
            options: {
              // オプションでCSS内のurl()メソッドの取り込まない
              url: false,
              // ソースマップの利用有無
              sourceMap: true,
              // Sass+PostCSSの場合は2を指定
              importLoaders: 2
            },
          },
          // PostCSSのための設定
          {
            loader: 'postcss-loader',
            options: {
              // PostCSS側でもソースマップを有効にする
              sourceMap: true,
              // ベンダープレフィックスを自動付与する
              plugins: () => [require('autoprefixer')]
            },
          },
          // Sassをバンドルするための機能
          {
            loader: 'sass-loader',
            options: {
              // ソースマップの利用有無
              sourceMap: SOURCEMAP_FLAG,
            }
          }
        ]),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
  ],
  // source-map方式でないと、CSSの元ソースが追跡できないため
  devtool: "source-map"
};

引用元 : https://qiita.com/hiroseabook/items/383d54a87fd5ab4108bc

● babelを使ってIE11でも表示ができるようにする

ES6で書いたJavaScriptは IE11 では使えないので babel をwebpackから呼び出してIE11でも使える状態でコンパイルします

1. ./src/Myclass.js ファイルの追加

./src/Myclass.js

export class Myclass {
  constructor(id,userName) {
	this.id       = id;
	this.userName = userName;
  }
  alertUserName() {
  	alert(this.userName);
  }
}

2. ./src/index.js ファイルの変更

./src/Myclass.js

import {hellowebpack} from './f';
import {Myclass} from './Myclass.js';

hellowebpack();

var m = new Myclass(1, 'DOWN TOWN');
m.alertUserName();

3. babel のインストール

npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env

webpackと合わせると 70MB くらいになります

4. webpack.config.js の設定変更

下記のように書き換えます。

module.exports = {
    mode: 'production', // development or production
    entry: './src/index.js',
    output: {
        path: `${__dirname}/dist`,
        filename: 'main.js'
    },
    devServer: {
        contentBase: 'dist',
        open: true
    } ,
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: [
                        '@babel/preset-env',
                    ]
                }
            }]
        }]
    }
};

5. webpackのビルドの実行

npx webpack

6. IE11 ブラウザでの確認

本番サーバへアップロードして IE11で確認します。

Express を立ち上げるほどではないときは次のようにしてサーバを立ち上げます。

myserver.js

var fs   = require('fs');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    fs.readFile(__dirname + '/index.html', 'utf-8', function (err, data) {
        if (err) {
            res.writeHead(404, {'Content-Type' : 'text/plain'});
            res.write('page not found');
            return res.end();
        }
        res.writeHead(200, {'Content-Type' : 'text/html'});
        res.write(data);
        res.end();
    });
});
server.listen(1337, '127.0.0.1');

console.log( 'Server Started.\nopen "http://127.0.0.1:1337/"' );

実行方法

node myserver.js

でWEBサーバを立ち上げた後 http://127.0.0.1:1337/ へアクセスします。

引用 : https://goo.gl/xJBmYF

● JavaScript自動整形PrettierをSublime Textから使用できるようにする

・Js Prettier

https://packagecontrol.io/packages/JsPrettier

● Js Prettierのインストール

Sublime Textのパッケージコントローラーからインストールします

(command + shift + p) →【Install Package を選択】→【Js Prettierを選択】

● Js Prettierの設定

【Package settings】→【JsPrettier】→【settings - Default】を選択して設定ファイルを開きます
次の2つの項目のパスを設定します。

例:)

	"prettier_cli_path": "/Users/hogehoge/.nodebrew/current/bin/prettier",
	"node_path": "/Users/hogehoge/.nodebrew/current/bin/node",

＃・パスの調べ方

which prettier
which node

● Js Prettierの実行

(command + shift + p) →【JsPrettier:Format Codeを選択】

とても便利なのでぜひショートカットを設定しましょう。

● Js Prettierのショートカット設定（ctrl+pで起動する場合）

    // JsPrettier
    { "keys": ["ctrl+p"], "command": "js_prettier" } ,

今時ES6 JavaScriptで記述することが多くなったので
コード検証ツールにESLint、自動整形ツールにPrettierをインストールしてSublimeTextから使用できるようにします。

● ESLintのインストール

npm install -g eslint

● Prettierのインストール

npm install -g prettier

● PrettierによるJavaScriptソースコード自動整形のテスト

ここまでの状態で自動整形のテストを行います
test.js ファイルを用意して自動整形してみます

prettier test.js 

ターミナル画面（標準出力）に自動整形した結果が表示されます。
実際に自動整形してファイルを更新するには（ --write ）オプションを使用します。

prettier --write test.js

● ESLintによるJavaScriptソースコード検証のテスト

※1. .eslintrc.js の生成

eslint test.js と行きたいところですが、まず設定ファイルを作成します。 懸賞したいファイルがあるディレクトリから

eslint --init

を実行すると対応形式で設定ファイル( .eslintrc.js )が生成されます こんなファイルです

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

※2. eslintの実行

eslint test.js 

でソースコードの検証が実行されます。

● ESLint検証ルール( .eslintrc.js )をカスタマイズする

.eslintrc editor
https://pirosikick.github.io/eslintrc-editor/

● Airbnb JavaScript Style Guideに沿ったESLintを設定する

「Airbnb JavaScript Style Guide」はなかなか厳格なルールなので
既存のプロジェクトにいきなり当てはめるには無理がありますが
どの程度厳格なソースフォーマット指定なのか体験しておくだけでも価値があると思います

・ Airbnb JavaScript Style Guide

https://github.com/airbnb/javascript

・ Airbnb JavaScript Style Guide に沿ったESLintを設定します

npm init -y
npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint

{
  "extends": "airbnb"
}

● Sublime Textから使用できるようにする

JavaScript自動整形PrettierをSublime Textから使用できるようにする

ファイル一覧を取得する

Node.js でファイル一覧を取得するサンプルコード (2015-11-10) http://bit.ly/2q7nxjW

node.jsでオブジェクトの中身を一気に表示するにはconsole.logで表示しても良いのですが
次のようにすると楽に見れます

● utilのインストール

npm install util --save-dev

● utilの使い方

通常

console.log(results);

とする代わりに

var util = require('util');
console.log(util.inspect(results,false,null));

とします。

● node.jsでphpと同じTwigテンプレートを使用する

システムの開発がphpかつテンプレートエンジンTwigを使用する場合
デザイン過程で静的なhtmlを作成する場合にもTwigを使用しておくとプログラムへのテンプレート化する時に
作業を省くことができます

実はGulpにはPHPと同じTwigテンプレートがあるのでこちらを使用します。
node.js とgulp はあらかじめインストールしておきます。

● gulp でTwig を扱うgulp-twigをインストールする

npm install  gulp-twig  --save-dev

● gulp-twigでコンパイルするための設定を gulpfile.js に作成する

以下の仕様でコンパイルするよう設定を記述します

● ./twig/ ディレクトリ以下の全ての html ファイルをTwigテンプレートを使用してコンパイルし、./www/ ディレクトリ内に生成する。
● アンダースコアで始まるファイルはコンパイルしない。

gulpfile.js 以下のとおり作成する

// twig コンパイル設定
var gulp   = require('gulp');
var twig   = require('gulp-twig');
var rename = require('gulp-rename');
gulp.task('twig', function () {
    'use strict';
    gulp.src(['./twig/*.html', './twig/*/*.html', '!./twig/_*.html'])
    .pipe( twig({}) )
    .pipe(gulp.dest('./www/'));
});

● gulp-twig によるコンパイルの実行

gulp twig

● テンプレートファイル内で書き出される html のファイル名を取得する

テンプレートファイル内に以下のように記述します

・gulp-twigの場合

{{ _target.relative }}

・PHP twigの場合

{{  _self.getTemplateName().__toString }}

● テンプレート例（レイアウトとそれを継承するテンプレート）

_layout.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<header></header>
<div class="container">
	{% block content %}{% endblock %}
</div>
<footer></footer>
</body>
</html>
<!-- {{ template_filename }} -->

index.htm

{# 継承元 #}
{% extends "_layout.htm" %}

{# ファイル名 #}
{% if _self.getTemplateName() %}
	{% set template_filename = _self.getTemplateName().__toString %}
{% else %}
	{% set template_filename = _target.relative %}
{% endif %}

{# ページタイトル #}
{% set title = 'ユーザー管理・データ編集の完了' %}
{% block title %}{{ title }}{% endblock %}

{# コンテンツ #}
{% block content %}
<!-- ここにコンテンツを記述します -->
...
...
...
<!-- ここにコンテンツを記述します -->
{% endblock %}

上の2つのファイルを用意して test.htm を gulp-twig でコンパイルすると次のようなファイルが生成されます。

test.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ユーザー管理・データ編集の完了</title>
</head>
<body>
<header></header>
<div class="container">
	<!-- ここにコンテンツを記述します -->
...
...
...
<!-- ここにコンテンツを記述します -->
</div>
<footer></footer>
</body>
</html>
<!-- test.html -->

● electronとは？

electonとは html や css や javascript などといった web 制作の技術を使ってデスクトップ上のアプリケーションを制作しようというものです。 （ まず node js が必要になりますので node js のインストールを完了させておいてください ）

● electron をインストールする

 npm install -g  electron
 npm install -g  electron-packager 

● Helloworldプログラムに必要な3つのファイルを用意する

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello Electron!</h1>
Node version: <script>document.write(process.versions.node)</script>,
Chrome version: <script>document.write(process.versions.chrome)</script>,
Electron version: <script>document.write(process.versions.electron)</script>.
</body>
</html>

main.js

const { app, BrowserWindow } = require('electron');
let win;
function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 });
    win.loadURL(`file://${__dirname}/index.html`);
    win.on('closed', () => {
        win = null;
    });
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    if (win === null) {
        createWindow();
    }
});

package.json

{
  "name": "myapp",
  "version": "0.0.1",
  "main": "main.js"
}

● プログラムを実行する

electron .

● アプリを作成する（ビルド）

1. electonのバージョンを調べる

   electron -v
   

   （例 : v1.6.2）

1. electron-packagerアプリケーションを作成する

   electron-packager <ディレクトリ>  <アプリ名（拡張子は除く）>  --platform=darwin,win32  --arch=x64  --version=<バージョン>  --overwrite
   

● electron 関連リンク

https://qiita.com/tags/electron
https://teratail.com/questions/search?q=electron&search_type=and
http://bit.ly/2nYCc4d
http://bit.ly/2n8dA47

● 実際にelectronを使って制作されたプログラム

※ iCultus（常駐型カレンダー）

https://github.com/djyde/iCultus

※ comma-chameleon（CSVエディタ）

https://github.com/theodi/comma-chameleon

※ lightgallery

http://sachinchoolur.github.io/lightgallery-desktop/

● MacからWindowsビルド用パッケージのインストール

nodebrew を使って以下のパッケージをインストールします

brew cask install xquartz（途中で管理者パスワードの入力を求められます）
brew install wine

● （Mac）まず homebrew でインストールしてある node.js nodebrew をアンインストールする

brew uninstall nodebrew
brew uninstall node

● （Mac または Linux）に nodebrew をインストールする

curl -L git.io/nodebrew | perl - setup

.bashrc の最後にパスを追加

cd
vi .bash_profile

下記の2行を追加します

# nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH

　
正しくインストールされたか確認します。

source ~/.bash_profile
nodebrew help

バージョンが表示されればOKです。

● nodebrew を使って好きなバージョンの node.js をインストールする

・インストール可能な node.js の全バージョンを表示する

nodebrew ls-remote

・（例）Node.js v9.5.0 バージョンをインストールする

nodebrew install-binary v9.5.0

・現在インストール済みの node.js 全バージョンを表示

nodebrew list

・（例）Node.js v9.5.0 バージョンに切り替える

nodebrew use v9.5.0

・Node.js が正しくインストールされていることを確認する

node -v

バージョン名が正しく表示されればOKです。

● node.js 用 sqlite3 モジュール「sqlite3」をインストールする

npm install sqlite3

● sqlite3のデータベース「mydb.sqlite3」を作成する

sqlite3 mydb.sqlite3

● 続けてデータベース内にテーブル「user_dt」を作成する

CREATE TABLE  user_dt  (
  data_id       INTEGER PRIMARY KEY AUTOINCREMENT,
  user_name     TEXT,
  modified_date DATETIME
);

● .quit コマンドでsqliteを抜ける

.quit

● スクリプトファイル test.js を以下の内容で作成する

```
var sqlite3 = require('sqlite3').verbose();
var mydb    = new sqlite3.Database('./mydb.sqlite3');
mydb.run("INSERT INTO user_dt (user_name,modified_date) VALUES ('taro yamada', datetime('now', 'localtime') )");
```

##● スクリプトを実行してデータベースにデータを1件登録する
```
node test.js
```

##● node.js + sqlite3 で使用できる クエリービルダー
http://knexjs.org  
https://hiddentao.com/squel/  

##● node.js + sqlite3  で使用できる O/Rマッパー
http://docs.sequelizejs.com/en/v3/  

ヘッドレスブラウザとは「画面がないWEBブラウザ」の事です。
最近では Headless Chrome が人気です。 参考 : https://goo.gl/NQsFS2
が、npm だけでインストールできる phantomJS を紹介します。

● phantomJS

WebKit（Safari） ベースのヘッドレス（画面なし）ブラウザ

・phantomJSのインストール方法（npm のみでインストールする方法）

npm install phantomjs

以下のパスを手動で追加します

./node_modules/phantomjs/bin/phantomjs

・phantomJSのインストール方法（Mac の brew を使う方法）

brew install phantomjs

・phantomJSのインストール方法（CentOS の yum を使う方法）

yum -y install freetype
yum -y install fontconfig
npm install -g phantomjs

● slimerJS

Gecko（firefox） ベースのヘッドレス（画面なし）ブラウザ

・slimerJSのインストール方法（Mac）

brew install slimerjs

・slimerJSのインストール方法（CentOS7）

npm install -g slimerjs

● casperJS

ヘッドレスブラウザを簡単に扱うライブラリ（JavaScript）です。 このcasperJSから「phantomJS」または「slimerJS」を操作します。

・casperJSのインストール方法（Mac）

brew install casperjs

・casperJSのインストール方法（CentOS7）

yum -y install freetype
yum -y install fontconfig
npm install -g casperjs

● casperJSからブラウザを操作してxpathで要素を取得し、画面のスクリーンショットを撮る

test.js で下記コードを保存

var AnchorArrays = [];
var casper = require('casper').create();
casper.start('http://flatsystems.net/kakunin.php', function() {
});
casper.then(function() {
	casper.wait(3000, function() {
	    // xpath要素の取得
	    var xpath = "//*[@id='my_id']";
	    var element = this.evaluate(function(path){
	                return __utils__.getElementByXPath(path).innerHTML;
	    },xpath);
	    console.log( element );

	//png
    	this.capture('kakunin.png');
    	console.log( 'キャプチャを作成しました。' );
	});
});
casper.run();

● casperJSからphantomJSで起動する

casperjs  test.js

● casperJSからslimerJSで起動する

casperjs  --engine=slimerjs test.js

slimerJSで起動するときは --engine=slimerjs を追加します。

● casperJSコードを実際のブラウザソースから生成する Chrome拡張機能

・Resurrectio

https://chrome.google.com/webstore/detail/resurrectio/kicncbplfjgjlliddogifpohdhkbjogm

slimerjs のインストール

Mac OSX の場合は brew でインストールできます

brew install slimerjs

slimerjs のバージョンを確認する

インストールが完了したらバージョンを確認しておきます

slimerjs -v

slimerjs でWEBページのスクリーンショットを撮る

```
var page = require("webpage").create();
page.open('http://zozo.jp/')
    .then(function(status){
        if(status === 'success'){
            console.log(page.title);
            page.render('test.png');
        }
        phantom.exit();
    });
```
実行します
```
slimerjs test.js
```


# slimerjs をCUI環境で実行させる
slimerjsはGUI環境下でないと動作しません。
CUIで実行すると
```
slimerjs --debug=true XXXXX.js 
```
```
Error: no display specified
```
というエラーになります。

そこで  CUI でも実行できるように Xvfb( X virtual framebuffer ) をインストールします。

```
yum -y install xorg-x11-server-Xvfb
```
　　  
Xvfbの使い方は 実行したい処理の前に ```xvfb-run``` を付け加えます
```
Xvfb slimerjs --debug=true XXXXX.js 
```
これでCUI下の環境でも実行できます。

Heroku上でヘッドレスWEBブラウザ phantom.js を使用するにはビルドパックを追加します。 ビルドパックをGithub上で公開してくれている方がいるのでありがたく利用させていただきます。

● heroku-buildpack-phantomjs

https://github.com/stomita/heroku-buildpack-phantomjs

ターミナルから以下を実行

cd "アプリのあるディレクトリ"
heroku login
heroku buildpacks:add --index 1 https://github.com/stomita/heroku-buildpack-phantomjs
git push heroku master

● phantomjs がHeroku上にあるか確認する

heroku run phantomjs -v

バージョンが帰ってくればOK

● Heroku上のphantomjsから他のWEBサイトにアクセスできるか確認する

・1.アプリのあるディレクトリに `phantom_test.js` ファイルを以下の内容で作成します。

var page = require('webpage').create();
page.open('http://yahoo.co.jp/', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});

・2.Heroku上に再デプロイします。

git add .
git commit -m "add buildpack"
git push heroku master

・3.phantomjsでスクリプトを実行します。

heroku run phantomjs phantom_test.js

「Status: success」が帰ってくればOK

● 日本語フォントを追加して文字化けを解消する

フォントは `./fonts` ディレクトリに .ttf フォントファイルを置いて git push すればOKです。
フォントファイルは著作権に注意して使用しましょう

・フリーの日本語フォントファイル Google Noto Sans

https://www.google.com/get/noto/#sans-jpan

・Heroku上の日本語フォントが正しく認識されているか確認する

heroku run fc-match sans:lang=ja

Buildpacks | Heroku Dev Center

● 現在使用中の buildpack を表示する

heroku buildpacks

● buildpack をセットする

heroku buildpacks:set "ビルドパック名またはURL"

● buildpack を追加する

heroku buildpacks:add "ビルドパック名またはURL"

● buildpack を削除する

heroku buildpacks:remove "ビルドパック名またはURL"

● 全てのbuildpack を削除する

heroku buildpacks:clear

node.js から phantomJSを使用するには下記2つの方法がおすすめです。

• 1.モジュール Nightmare を使う方法（実行経過が見えるのでおすすめです。）
• 2.モジュール node-horseman を使う方法

● 1.モジュール Nightmare.js を使って phantomJS を操作する

● モジュール nightmare , vo のインストール

npm install nightmare
npm install vo

● テストプログラムを実行する（Googleへアクセスしてタイトルを取得）

・下記コードを `test.js` で保存

var Nightmare = require('nightmare');
var google = new Nightmare()
    .viewport(1000, 1000)
    .useragent("Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36")
    .goto('http://google.com')
    .evaluate(function () {
      return {
        title: document.title,
        href : location.href
      };
    })
    .run(function(err, nightmare) {
        if (err) return console.log(err);
        console.log('Done!');
        console.log(nightmare);
    });

・テストコードを実行

node test.js

GoogleホームページのタイトルとURLが表示されればOKです。

● テストプログラムを実行する（niconicoへアクセスしてログインする）

・下記コードを `niconico_login.js` で保存

var Nightmare = require('nightmare');
var vo = require('vo');
vo(function* () {
  var nico_id   = '###メールアドレス###';
  var nico_pass = '###パスワード###';
  var nightmare = Nightmare({ show: true });
  var link = yield nightmare
    .goto('https://account.nicovideo.jp/login')
    .type('input[id="input__mailtel"]', nico_id)
    .type('input[id="input__password"]', nico_pass)
    .click('#login__submit')
    .wait(2000)
    .then(function() {
      console.log('終了しました');
    });
  yield nightmare.end();
  return link;
})(function (err, result) {
  if (err) return console.log(err);
});

・テストコードを実行

node niconico_login.js

ニコニコ動画にログインできればOKです。

● 2.モジュール node-horseman を使って phantomJS を操作する

● モジュール node-horseman のインストール

npm install node-horseman

● テストプログラムを実行する

・下記コードを `test.js` で保存

var Horseman = require('node-horseman');
var horseman = new Horseman();
var filename = 'test.png';
horseman
    .userAgent('Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0')
    .open('http://www.google.com')
    .type('input[name="q"]', 'github')
    .click('[name="btnK"]')
    .keyboardEvent('keypress', 16777221)
    .waitForSelector('div.g')
    .count('div.g')
    .log() // prints out the number of results
    .screenshot(filename)
    .log(filename)
    .close();

・テストコードを実行

node test.js

Googleの検索結果の画面が test.png に保存されれば正常に動作しています。

参考 : https://www.sitepoint.com/?p=124173

●インストール （MacOSX Homebrew を使ってインストール）

brew install phantomjs

●インストール （その他のインストール方法）

http://phantomjs.org/download.html

●PhantomJSの動作確認

・hello.js という名前で下記のコードを保存します。

console.log('Hello, world!');
phantom.exit();

・実行します

phantomjs hello.js 

・実行結果

Hello, world!が表示されればインストール成功です。

●PhantomJSを使ってWEBページ（例:ヤフー）のページのスクリーンショットを撮る

・page.js という名前で下記のコードを保存します。

var page = require('webpage').create();
page.open('http://www.yahoo.co.jp', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('page.png');
  }
  phantom.exit();
});

・実行します

phantomjs page.js 

・実行結果

同じフォルダに page.png というキャプチャ画像があれば成功です。

● Herokuの使い方

（「ユーザー登録してWEBアプリをデプロイしてHeroku上で実行する」までの方法）

・1. Herokuへのユーザー登録

https://www.heroku.com/
からユーザー登録を行う

・2. Heroku Command Line（Heroku CLI）のインストール

https://devcenter.heroku.com/articles/heroku-command-line
からインストーラをインストール

・3. Herokuへログイン

heroku login

・4. ひな形を使ってデプロイをテスト

git clone https://github.com/heroku/ruby-getting-started.git
cd ruby-getting-started
heroku create

ここまで行うとURLが自動発行されます

https://XXXXX.herokuapp.com/ | https://git.heroku.com/XXXXX.git

git pushします

git push heroku master

No such app as XXXXX. というエラーが出るときは

git remote rm heroku

としてから

heroku create
git push heroku master

とします。

ブラウザで開く

heroku open

・5. node.js アプリをherokuにデプロイ

cd  "アプリのディレクトリ"

git init
git add .
git commit -m "first commit"

heroku create
git push heroku master
heroku open

・6. node.js アプリを修正した時の再デプロイ

git add .
git commit -m "change xxxxx"
git push heroku master
heroku open

・よく使うherokuコマンド

▼ herokuへログイン

heroku login

「メールアドレス」「パスワード」を入力してログインします。

▼ heroku上のアプリを表示

heroku apps

と入力すると herokuアプリが

hogehoge-fugafuga-12345
hunihuni-furifuri-67890

という風に表示されます。

▼ herokuアプリをブラウザで表示

アプリ hogehoge-fugafuga-12345 をブラウザで表示するには

heroku open --app hogehoge-fugafuga-12345

と入力します。 またはブラウザのアドレス欄に直接

https://hogehoge-fugafuga-12345.herokuapp.com

と入力してもOKです。

▼ heroku上のアプリを削除

アプリ hogehoge-fugafuga-12345 を削除するには

● 確認なしで削除

heroku apps:destroy --app hogehoge-fugafuga-12345 --confirm hogehoge-fugafuga-12345

● 確認ありで削除

heroku apps:destroy --app hogehoge-fugafuga-12345

▼ heroku上でbashを使用する

heroku run bash

▼ heroku上で任意のコマンドを使用する

・Heroku上のホームディレクトリのファイル一覧を表示

heroku run pwd ;  ls -la

・Heroku上のphantomjsのバージョンを表示

 heroku run phantomjs -v

●その他 Node.js が使える Paas

• openshift
• Google App Engine

node.js - How can I run latest version of node on Openshift? - Stack Overflow
Google App Engine Node.jsを試してみる。 GAE/Node.js - Qiita
Google App Engineを無料で運用する方法（2016年版） - koni blog

● cheerio-httpcli

>Node.jsでWEBページのスクレイピングを行う際に必要となる文字コードの変換と、cheerioによってパースしたHTMLをjQueryのように操作できるHTTPクライアントモジュールです。

特徴 : 文字コード自動変換 , jqueryライクなセレクタ , フォーム簡易送信機能

https://www.npmjs.com/package/cheerio-httpcli

・インストール

npm install cheerio-httpcli

● osmosis

>HTML/XML parser and web scraper for NodeJS.

特徴 : xpathで要素の取得が可能 , Aタグのリンクを自動的に辿れる

https://www.npmjs.com/package/osmosis
マニュアル : https://github.com/rchipka/node-osmosis/wiki

・インストール

npm install osmosis

・スクレイピング例

【osmosis node.js】で検索した結果のリンクURLをスクレイピングします。

var osmosis = require('osmosis');
var url     =  'https://www.google.co.jp/search?client=safari&rls=en&q=osmosis&ie=UTF-8&oe=UTF-8&gfe_rd=cr&ei=JXMyWLv2NOjC8AernaPYAg#q=osmosis+node.js';
osmosis
.get(url)
.paginate("//*[@id='pnnext']",3)    // 最大 3ページ目まで
.set({
    'link_url'  :  ["//*[@id='rso']//h3/a/@href"] ,
    'link_title':  ["//*[@id='rso']//h3/a"] ,
})
.then(function( context, data){
    // console.log(context.request);
    console.log(data);
})
.done(function(){
    console.log("=================================\nscrape done.\n");
});

その他のスクレイピングモジュール : http://blog.webkid.io/nodejs-scraping-libraries/