コード

index.html

<button id="need_click"></button>

click.js

document.querySelectorAll('#need_click')[0].click();

解説

document.querySelectorAll('#need_click')

これで、need_clickというidを持つ要素を取得。
querySelectorAllの中の要素一つを取りたいので、[0]で0番目を取得。

.click();

これがクリックするメソッドなので、先ほど取得したものに対して実行。

よく忘れるのでメモ

JavaScriptでは 0, "", undefined, null は false になる

以下のようなよくあるif文。存在チェックなどに使われています。
この場合、例えばhogeがundefinedだとif文の中に入ります。

if(!hoge) {
  ・・・
}

JavaScriptでは以下の値はfalseとみなされます。
- 空文字("")
- 数値の0
- NaN
- null
- undefined

動作

こんな感じです。
テキストボックスにurlを入力するたびに、埋め込まれたYoutubeの動画が変更されます。

コード

//　ここがiframeに置き換わる
<div id="ytplayer"></div>
<input type="text" id="url" style="width: 600px">

<script>
  // IFrame API Playerを読み込む
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // APIコードが読み込まれた後に、YouTube Playerを作成する
  let player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', { // playerはiframeに置き換えるdivタグのid
      height: '360', // プレイヤーの高さ
      width: '640', // プレイヤーの幅
    });
  }

コードの前半部分の、プレイヤーを作成するところまでは公式のサンプルページとほぼいっしょです。
異なる点は、プレイヤーオブジェクトを作成するときに、動画IDを指定せずに後からキュー関数で読み込んでいるところです。

  const url = document.getElementById('url');
  let videoId;
  // url入力フォームの入力されたイベントを監視
  url.addEventListener('input', () => {
    // urlのv=以降が動画id
    videoId = url.value.split('v=')[1];
    // 正しいurlの形式だったとき
    if (videoId) {
      // &=クエリパラーメターがついていることがあるので取り除く
      const ampersandPosition = videoId.indexOf('&');
      if(ampersandPosition != -1) {
          videoId = videoId.substring(0, ampersandPosition);
      }
    }
    // 指定さらた動画IDのサムネイルを読み込み、動画を再生する準備をする。
    player.cueVideoById({videoId: videoId});
});

</script>

URLから動画IDを取得する方法は、こちらのサイトを参考にさせていただきました。
https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url?rq=1

inputイベントはvalue要素が変更されるたびに発生するので、テキストが変更されるたびにURLから動画IDを取得します。

取得した動画IDをcueVideoById関数に渡すことで、プレイヤーに動画を読み込ませることができます。

また、loadVideoById関数は動画IDを渡すことで即座に動画を再生することができます。

ちなみにcueVideoByUrlやloadVideoByUrlなど動画IDの代わりにURLを渡すことができる関数もあるのですが、URLの形式がhttp://www.youtube.com/v/VIDEO_ID?version=3に完全に適合している必要があります。¹

そのため、フォームから入力させるには少々使いにくくなっていますね...

その他の例

ラジオボタンから読み込む

<div id="player"></div><br>
好きなVtuberは?
<input type="radio" name="video_id" value="Lv46-MIAS8o">ギバラ
<input type="radio" name="video_id" value="EtKEC-4dW18" >月ノ美兎
<input type="radio" name="video_id" value="5YOeKW0OfPE" >本間ひまわり

<script>
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  const firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  let player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '360',
      width: '640',
    });
  }

  const video_ids = document.getElementsByName('video_id');
  video_ids.forEach(function(video_id) {
    video_id.addEventListener('click', function() {
      const videoId = document.querySelector('input:checked[name=video_id]').value;
      if (videoId){
        player.loadVideoById({videoId: videoId});
      }
    })
});
</script>

---

1. 通常のURLの形式は`https://www.youtube.com/watch?v=VIDEO_ID ↩

先日公開された Web Developer Roadmap 2020 で新たに追加された WebComponents の勉強も兼ねて
LitElement x TypeScript x Webpack で WebComponentsベースのアプリを作ることにした。

題材

どうせなら使えるものがよいと思い、
モンテカルロ法（ルーレットの必勝法みたいなやつ）の計算をしてくれるアプリを題材にした。

扱う技術

WebComponents

簡単に言うとオリジナルのHTMLタグを作るための技術の総称。
まだ賛否はあるものの、非常に再利用性の高いコンポーネントを作れること
Web標準の技術であることが特徴。

LitElement

Webコンポーネントを簡単に作るためのライブラリ。
Googleが推進しているPolymer Projectの一つ。

TypeScript と Webpack

静的型付き言語とバンドルツール。
いずれもWeb Developer Roadmapでは学習を推奨されている。

引用：https://github.com/kamranahmedse/developer-roadmap

実装

基本的にはTypeScriptの記法で、LitElementを継承したクラスを作れば良い。

simple-greeting.ts

import { LitElement, html, property, customElement } from 'lit-element';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  @property() name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElement で指定した文字列がタグ名となる。

@customElement('simple-greeting')

<simple-greeting name="Everyone"></simple-greeting>

ビルド環境

素直に ts-loader を通せばコンパイルすることもできた。
ただしLitElementはES5用ビルドがされていないため（後述）
class構文などに対応していない IE11 などに対応するには
ここからさらにbabelを通す必要があると思われる。

webpack.config.js

module: {
  rules: [
    {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'ts-loader',
          options: {
            configFile: 'tsconfig.json'
          }
        }
      ],
      exclude: /node_modules/
    }
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "sourceMap": true,
    "experimentalDecorators": true,
    "moduleResolution": "node"
  },
  "exclude": ["node_modules"],
  "plugins": [
    {
      "name": "typescript-tslint-plugin",
      "alwaysShowRuleFailuresAsWarnings": true,
      "configFile": "./tslint.json"
    },
    {
      "name": "typescript-lit-html-plugin"
    }
  ]
}

結果

<cc-monte-carlo></cc-monte-carlo>

というタグを設置すると
モンテカルロ法の計算ができるアプリが起動されるようになった。

リポジトリ： https://github.com/cc822jp/montecarlo-simulator

特徴

WebComponentsならでは特徴を述べると、
Shadow DOMになっているので外からの影響を全く受けることがない
（iframeタグを埋め込んでいるのと同じイメージ）

つまり外から document.querySelector でDOM操作される心配もないし
クラス名の衝突で不要なスタイルが当たることもない。

「いいねボタン」など、あらゆるWebサイトで使われる（再利用性が求められる）コンポーネントは
WebComponentsで作ることで安全にHTMLとJavaScript, CSSが一体となったタグを提供することができる。

参考にしたもの

参考になった LitElement x TypeScript x Webpack のボイラーテンプレートがいくつかあった。

LitElement-TypeScript-and-Webpack-Example

検索すると最初に出てきたもの。

https://github.com/abenz1267/LitElement-TypeScript-and-Webpack-Example

lit-element-form-example

Vaadinのコミッターが作ったもの。
いま思えばこっちを主に参考にすればよかった..。

https://github.com/marcushellberg/lit-element-form-example

余談: LitElementはES5用のビルドをしていない

LitElementはES5用にビルドされていない。（普通のライブラリはしている）
issueを追ってみると、ES5用にビルドするとパフォーマンスが大幅に低下するし
肥大化、バグの温床にもなるという説明があった。

最後は大御所コミッターが進撃のcloseで終了していた。
https://github.com/Polymer/lit-element/issues/302

はじめに

JSを勉強している中で、「HTMLImageElementインターフェース」というモノを知り、最初は何を言っているのかさっぱりわからなかったところから少しづつ理解したこととまとめてみます。

HTMLImageElementとは

HTMLImageElement インターフェースは、 タグに相当します。
エレメントの一種です。
画像を読み込んで表示するための機能がまとまっています。

つまり、JS上で <img>タグ に相当するモノ(オブジェクト)を作成し、htmlに反映できるだと理解しました。

こちらのサイトがわかりやすかったので引用させていただきました。

https://hakuhin.jp/js/image.html

どんな感じに使うのか

使い方：Image() コンストラクタを使用する

コンストラクタを使用

// HTMLImageElement オブジェクトを作成する
var image = new Image();

簡単にボタンクリックで画像切り替え処理を作成しました。

See the Pen LYEBEGd by RS (@shimamar) on CodePen.

まとめ

簡単な処理を作成してみましたが、まだまだ理解仕切れてないことが多いなと痛感しました。
もっと画像をJSで扱う動作を勉強してもっと臨機応変なコードを描けるようにしたいと改めて思いました！
勉強をしていく上でもっと良い方法や内容があれば更新していきます。

訳者前書き

本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。

はじめに

JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がEMCAScriptの仕様に追加されました。

この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。
同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。

記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。

1. ES2016の新機能

ES2016で導入された２つの新機能について説明します。

• Array.prototype.includes()
• 指数演算子(べき乗)

2. Array.prototype.includes()

配列のincludes()メソッドは、自身の配列に特定の要素が含まれている場合はtrueを、そうでない場合はfalseを返します。

let array = [1,2,4,5];

array.includes(2);
// true
array.includes(3);
// false

includes() と 要素検索開始インデックス (fromIndex) の組み合わせ

.includes()に対して、要素の検索を開始するためのインデックスを提供できます。
デフォルト(インデックスを指定しない場合)の値は0です。また、負の値を渡すこともできます。
※訳者注:負の値を渡した場合、配列要素数+負の値をインデックスに指定した扱いとなります。

１番目の引数は検索する要素、2番目の引数は検索を開始するインデックスです。

let array = [1,3,5,7,9,11]; // 訳者注:配列のインデックスは0番目から始まります

array.includes(3,1);
// 配列の1番目から数字の3を探します
// true
array.includes(5,4);
// 配列の4番目から数字の5を探します
// false
array.includes(1,-1);
// 配列の(配列要素数-1)番目から数字の1を探します
// false
array.includes(11,-3);
// 配列の(配列要素数-3)番目から数字の11を探します
// true

array.includes(5,4);はfalseを返します。
配列は数字の5を含みますが、同要素より後ろの4番目の要素から探し始めた為です。

array.includes(1,-1);はfalseを返します。
配列は数字の1を含みますが、同要素より後ろの(配列要素数6 - 1 =) 5番目の要素から探し始めた為です。

array.includes(11,-3);はtrueを返します。
配列は数字の11を含んでおり、同要素より手前の(配列要素数6 - 3 =) 3番目の要素から探し始めた為です。

3. 指数演算子(べき乗)

ES2016より前の仕様では、指数計算を次のように記述していました。

Math.pow(2,2);
// 4
Math.pow(2,3);
// 8

ES2016で追加された新しい指数演算子を使うと、次のように記述できます。

2**2;
// 4
2**3;
// 8

指数演算子は、次の例のように複数の操作を組み合わせる場合に、非常に役立ちます。

2**2**2;
// 16
Math.pow(Math.pow(2,2),2);
// 16

上記のようなケースでMath.pow()を使用するには、同関数を継続的に連結する必要があり、非常に長く複雑になります。
指数演算子は、同じことをより簡潔に行う方法を提供します。

4. ES2017の新機能

ES2017では数多くの素晴らしい新機能が導入されました。
ここでは、それらの機能について説明します。

5. 文字列のパディング(.padStart() および .padEnd())

文字列の末尾(.padEnd())または先頭(.padStart())に余白を追加できます。

"hello".padStart(6);
// " hello"
"hello".padEnd(6);
// "hello "

余白が6つ分必要と指定したのに、両方のケースで1つの空白しか取得できなかったのは何故でしょうか？
それは、padStartとpadEndが、元の文字列で埋めきれない空きスペースを埋める為です。
この例では、「hello」は5文字で、パディングは6文字ですので、空きスペースは1文字分しか残っていません。

こちらの例を見てください。

"hi".padStart(10);
// 10 - 2 = 8 empty spaces
// "        hi"
"welcome".padStart(10);
// 10 - 6 = 4 empty spaces
// "   welcome"

padStartを用いて右揃えする

padStartは何かを右揃えしたい場合に使用できます。

const strings = ["short", "medium length", "very long string"];

const longestString = strings.sort(str => str.length).map(str => str.length)[0];

strings.forEach(str => console.log(str.padStart(longestString)));

// very long string
//    medium length
//            short

上記の例では、予め用意した配列内から、最も長い文字列の要素を取得し、その文字列の長さを測定しました。
次に配列の各要素に対してpadStartを測定した文字長で適用することで、すべての文字列を綺麗に右揃えにできました。

カスタム値をパディングに追加する

パディングとして空白を追加するだけでなく、文字列と数字の両方を渡すことができます。

"hello".padEnd(13," Alberto");
// "hello Alberto"
"1".padStart(3,0);
// "001"
"99".padStart(3,0);
// "099"

6. Object.entries() および Object.values()

最初にオブジェクトを作成しましょう。

const family = {
  father: "Jonathan Kent",
  mother: "Martha Kent",
  son: "Clark Kent",
}

JavaScriptの以前のバージョンでは、次のようにオブジェクト内の値にアクセスしていました。

Object.keys(family);
// ["father", "mother", "son"]
family.father;
"Jonathan Kent"

Object.keys()は、値にアクセスする為に必要なキーのみの配列を返しました。

オブジェクトにアクセスする方法は更に2つあります。

Object.values(family);
// ["Jonathan Kent", "Martha Kent", "Clark Kent"]

Object.entries(family);
// ["father", "Jonathan Kent"]
// ["mother", "Martha Kent"]
// ["son", "Clark Kent"]

Object.values()は値のみの配列を返し、Object.entries()はキーと値の両方を含む配列の配列を返します。

7. Object.getOwnPropertyDescriptors()

このメソッドは、オブジェクトのすべてのプロパティ記述子を返します。
返すことができる属性はvalue, writable, get, set, configurable および enumerableです。

const myObj = {
  name: "Alberto",
  age: 25,
  greet() {
    console.log("hello");
  },
}
Object.getOwnPropertyDescriptors(myObj);
// age:{value: 25, writable: true, enumerable: true, configurable: true}

// greet:{value: ƒ, writable: true, enumerable: true, configurable: true}

// name:{value: "Alberto", writable: true, enumerable: true, configurable: true}

8. パラメータ列挙時における末尾カンマの許容

これは、構文の小さな変更です。
オブジェクトを書き込む時に、最後のパラメータであるかどうかに依らず、各パラメータの末尾にカンマをつけることができるようになります。

// こうだったのが
const object = {
  prop1: "prop",
  prop2: "propop"
}

// こうなる
const object = {
  prop1: "prop",
  prop2: "propop",
}

2番目のプロパティの最後にカンマを記述したことに注目してください。
入れなくてもエラーは発生しませんが、同僚やチームメンバーの生活を楽にする為に従うことをおすすめします。

// 私が書いたコードに・・・
const object = {
  prop1: "prop",
  prop2: "propop"
}

// 同僚がコードを更新し、新しいプロパティ prop3 を追加しますが・・・
const object = {
  prop1: "prop",
  prop2: "propop" // <- 末尾カンマがないよ！（構文エラー）
  prop3: "propopop"
}
// 直上のパラメータ prop2 の末尾にコンマを付け忘れた為、エラーになってしまいました

9. 共有メモリと Atomics(不可分操作)

MDNより:

不可分操作
メモリーが共有されている場合、複数のスレッドがメモリー内の同じデータを読み書きできます。
アトミック演算では、予測される値の書き込みと読み込みを保証するため、次の演算が開始される前に現在の演算が完了し、その演算が割り込まれないようにします。

Atomicsはコンストラクタではなく、そのプロパティとメソッドは(Mathと同様に)すべて静的です。
そのため、新しい演算子で使用したり、Atomicsオブジェクトを関数として呼び出すことはできません。

メソッドの例は次のとおりです。

• 加算 add / 減算 sub
• 論理積 and / 論理和 or / 排他的論理和 xor
• 読み出し load / 格納 store

Atomicsメソッドの例をいくつか見てみましょう。

10. Atomics.add(), Atomics.sub(), Atomics.load() および Atomics.store()

Atomics.add()は、配列、インデックス、値の3つの引数を取ります。
インデックスで示された配列要素へ値を加算し、返り値として加算前の配列要素の値を返します。

// 共有メモリー上に配列バッファを用意します
// 訳者注： Spectre 型脆弱性から保護する為、SharedArrayBufferは主要ブラウザで無効化されています(Chromeについては一部例外あり)
// https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);

// 配列の先頭要素を追加します
uint8[0] = 10;

console.log(Atomics.add(uint8, 0, 5));
// 10

// 10 + 5 = 15
console.log(uint8[0])
// 15
console.log(Atomics.load(uint8,0));
// 15

ご覧のとおり、Atomics.add()は、ターゲットの配列位置で以前の値を返します。
その後、再度uint8[0]の内容を問い合わせると、加算演算が実行され、15が得られたことがわかります。

Atomics.loadに配列とインデックスの2つの引数を渡すことで、配列から特定の要素の値を取得できます。

Atomics.sub()はAtomics.add()と同じ要領で機能し、値を減算します。

// 共有メモリーに配列バッファを用意します
const buffer = new SharedArrayBuffer(16);
const uint8 = new Uint8Array(buffer);

// 配列の先頭要素を追加します
uint8[0] = 10;

console.log(Atomics.sub(uint8, 0, 5));
// 10

// 10 - 5 = 5
console.log(uint8[0])
// 5
console.log(Atomics.store(uint8,0,3));
// 3
console.log(Atomics.load(uint8,0));
// 3

ここでは、uint8[0]の値10から5を減算するためにAtomics.sub()を使用しています。
Atomics.add()と同様に、メソッドはその配列要素の前の値(この場合は10)を返します。

次にAtomics.store()を、配列の特定要素（この場合はuint8[0])に、特定の値(この場合は3)を格納するために使用しています。
Atomics.store()は渡された値(この場合は3)を返します。

最後にAtomics.load()で同要素の値を読み出すと、5ではなく3が取得されることがわかります。

11. Atomics.and(), Atomics.or() および Atomics.xor()

これらの３つのメソッドはすべて、配列の特定要素の値に対して、ビット単位のAND、OR、XORの演算を実行します。
ウィキペディアのこちらのリンクでビット演算の詳細を読むことができます。

12. ES2017における Async と Await

ES2017では、「async / await」と呼ばれる Promise を操作する新しい方法を導入しました。

13. Promise の復習

この新しい構文に飛び込む前に、通常のPromiseを書く方法を簡単に確認しましょう。

// githubからユーザーデータを取得します
fetch('api.github.com/user/AlbertoMontalesi').then( res => {
  // 得られたデータをjson形式で返します
  return res.json();
}).then(res => {
  // もし上手くいったら、取得したデータを出力します
  console.log(res);
}).catch( err => {
  // どこかでダメだったら、エラーを出力します
  console.log(err);
})

これは、GitHubからユーザー情報を取得してコンソールに出力するという非常に単純な約束(Promise)です。

別の例を見てみましょう。

// 指定された時間歩きます(必ず歩くとはいってない)
function walk(amount) {
  return new Promise((resolve,reject) => {
    // 指定された時間が500ミリ秒未満なら、歩くのを却下します
    if (amount < 500) {
      reject ("値が小さすぎます");
    }
    // 指定された時間(ミリ秒)待ってから、指定されたメッセージを出力します
    setTimeout(() => resolve(`あなたは${amount}ミリ秒、歩きました`),amount);
  });
}

walk(1000).then(res => { // まずは1000ミリ秒歩いてみる
  console.log(res);
  return walk(500); // 上手くいったら、更に500ミリ秒歩く
}).then(res => {
  console.log(res);
  return walk(700); // 上手くいったら、更に700ミリ秒歩く
}).then(res => {
  console.log(res);
  return walk(800); // 上手くいったら、更に８00ミリ秒歩く
}).then(res => {
  console.log(res);
  return walk(100); // 上手くいったら、更に１00ミリ秒歩く
}).then(res => {
  console.log(res);
  return walk(400); // 上手くいったら、更に400ミリ秒歩く
}).then(res => {
  console.log(res);
  return walk(600); // 上手くいったら、更に600ミリ秒歩く
});

// あなたは1000ミリ秒、歩きました
// あなたは５00ミリ秒、歩きました
// あなたは700ミリ秒、歩きました
// あなたは800ミリ秒、歩きました
// uncaught exception: 値が小さすぎます

それでは、新しい async / await 構文で上記のPromiseを書き換える方法を見てみましょう。

14. Async と Await

先ほどの例を、新しい構文で書き換えるとこうなります。

function walk(amount) {
  return new Promise((resolve,reject) => {
    if (amount < 500) {
      reject ("値が小さすぎます");
    }
    setTimeout(() => resolve(`あなたは${amount}ミリ秒、歩きました`),amount);
  });
}

// `async`キーワードを用いて非同期な関数を作ります
async function go() {
  // `await`キーワードを用いて非同期に応答を待ちます
  const res = await walk(500);
  console.log(res);
  const res2 = await walk(900);
  console.log(res2);
  const res3 = await walk(600);
  console.log(res3);
  const res4 = await walk(700);
  console.log(res4);
  const res5 = await walk(400);
  console.log(res5);
  console.log("finished");
}

go();

// あなたは500ミリ秒、歩きました
// あなたは900ミリ秒、歩きました
// あなたは600ミリ秒、歩きました
// あなたは700ミリ秒、歩きました
// uncaught exception: 値が小さすぎます

今やったことを分析しましょう。

• 非同期関数を作成するには、その前にasyncキーワードを配置する必要があります
• キーワードはJavaScriptが常にpromiseを返すように指示します
• return を指定すると、promiseにラップされた値が返されます
• awaitキーワードは唯一、非同期関数の内部でのみ動作します
• その名前が示すように、awaitはpromiseが結果を返すまで待つようにJavaScriptに指示します

それでは、async付き関数の外でawaitを使用しようとするとどうなるか見てみましょう。

// awaitを普通の関数の中で使用してみます
function func() {
  let promise = Promise.resolve(1);
  let result = await promise; 
}
func();
// SyntaxError: await is only valid in async functions and async generators

// awaitを最上位空間で使用してみます
let response = Promise.resolve("hi");
let result = await response;
// SyntaxError: await is only valid in async functions and async generators

覚えておきましょう： awaitはasyncの付いた非同期関数の中でしか使えません。

15. Promiseのエラーハンドリング

通常のPromiseでは、Promiseによって返される最終的なエラーをキャッチする為に.catch()を使用します。
ここでは、それほどの違いはありません。

async function asyncFunc() {

  try {
    let response = await fetch('http:your-url');
  } catch(err) {
    console.log(err);
  }
}

asyncFunc();
// TypeError: failed to fetch

エラーを取得する為にtry...catchを使いましたが、それを用いずとも、次のようにエラーをキャッチできます。

async function asyncFunc(){
  let response = await fetch('http:your-url');
}
asyncFunc();
// Uncaught (in promise) TypeError: Failed to fetch

asyncFunc().catch(console.log);
// TypeError: Failed to fetch

16. ES2018の新機能

ES2018で導入されたものを見てみましょう。

17. オブジェクトの rest / spread

ES6（ES2015）で以下のようなコードが書けるようになったことを覚えていますか？

const veggie = ["トマト","きゅうり","豆"];
const meat = ["豚肉","牛肉","鶏肉"];

const menu = [...veggie, "パスタ", ...meat];
console.log(menu);
// Array [ "トマト", "きゅうり", "豆", "パスタ", "豚肉", "牛肉", "鶏肉" ]

オブジェクトに対しても、 rest / spread 構文を使用できるようになりました。
次のコードを見てみましょう。

let myObj = {
  a:1,
  b:3,
  c:5,
  d:8,
}

// rest 演算子を使って、オブジェクトに残っている他の全てを取得します
let { a, b, ...z } = myObj;
console.log(a);     // 1
console.log(b);     // 3
console.log(z);     // {c: 5, d: 8}

// spread 構文を使って、オブジェクトのクローン(複製)を取得します
let clone = { ...myObj };
console.log(clone);
// {a: 1, b: 3, c: 5, d: 8}
myObj.e = 15;
console.log(clone)
// {a: 1, b: 3, c: 5, d: 8}
console.log(myObj)
// {a: 1, b: 3, c: 5, d: 8, e: 15}

Objectにspread演算子を使用すると、元のObjectを変更したときにも変更されないようなクローンを簡単に作成できます。
これは、配列について説明したときに見たものと同じです。

18. 非同期な反復(Asynch Iteration)

Async Iterationを使用すると、データに対して非同期に反復処理が行えます。

ドキュメントより:

非同期イテレータは、そのnext()メソッドが{ value, done }ペアの Promise を返すことを除いて、通常のイテレータによく似ています。

for-await-ofループを使用すると、残りが1つではない反復可能オブジェクトをPromiseに変換します。

const iterables = [1,2,3];

async function test() {
    for await (const value of iterables) {
        console.log(value);
    }
}
test();
// 1
// 2
// 3

実行中に、[Symbol.asyncIterator]()メソッドを使用してデータソースから非同期イテレータが作成されます。
シーケンスないの次の値にアクセスするたびに、イテレータメソッドから返されるPromiseを暗黙的に待機します。

19. Promise.prototype.finally()

Promiseの終了時に、コールバックを呼び出すことができます。

const myPromise = new Promise((resolve,reject) => {
  resolve();
})

myPromise
  .then( () => {
    console.log('まだ作業中です');
  })
  .catch( () => {
    console.log('エラーになっちゃいました');
  })
  .finally(()=> {
    console.log('作業完了!');
  })

.finally（）もPromiseを返すので、より多くのチェーンを辿ってそれをキャッチできますが、それらのPromiseはチェーンされたPromiseに基づいて満たされます。

const myPromise = new Promise((resolve,reject) => {
  resolve();
})

myPromise
  .then( () => {
    console.log('まだ作業中です');
    return 'まだ作業中です';
  })
  .finally(()=> {
    console.log('作業完了!');
    return '作業完了!';
  })
  .then( res => {
    console.log(res);
  })
// まだ作業中です
// 作業完了!
// まだ作業中です

ご覧のとおり、finallyではなく、最初のthenによって作成されたPromiseの返り値が、finallyより後のthenにチェーンされます。

20. 正規表現の機能群

正規表現に関する4つの新しい機能が、新バージョンのECMAScriptに追加されました。
それらは以下のとおりです：

• 正規表現のsフラグ (dotAll)
• 正規表現の名前付きキャプチャグループ
• 正規表現の後読みアサーション
• 正規表現のUnicodeプロパティエスケープ

正規表現のsフラグ (dotAll)

ECMAScriptの正規表現が新たにsフラグを導入したことで、.は行終端記号を含む任意の文字に一致するようになります。

/foo.bar/s.test('foo\nbar');
// true

正規表現の名前付きキャプチャグループ

ドキュメントより：

番号付きのキャプチャグループを使用すると、正規表現が一致する文字列の特定の部分を参照できます。
各キャプチャグループには一意の番号が割り当てられ、その番号を使用して参照できますが、これにより正規表現の把握とリファクタリングが難しくなります。
たとえば、日付に一致する/（\d{4}）-（\d{2}）-（\d{2}）/が与えられた場合、周囲のコードを調べずに、月に対応するグループと日に対応するグループを確認することはできません。
また、月と日の順序を入れ替えたい場合は、グループ参照も更新する必要があります。

キャプチャグループには、（？<name>...）構文を使用して任意の識別子名をnameに付けることができます。
日付の正規表現は、/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/uのように記述できます。
各識別子名は一意で、ECMAScriptの識別子名の文法に従う必要があります。
名前付きグループには、正規表現処理結果のgroupsプロパティにおける、識別子名のプロパティとしてアクセスできます。
名前のないグループと同様に、グループへの番号付き参照も作成されます。 例えば次のように：

let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let result = re.exec('2015-01-02');
// result.groups.year === '2015';
// result.groups.month === '01';
// result.groups.day === '02';

// result[0] === '2015-01-02';
// result[1] === '2015';
// result[2] === '01';
// result[3] === '02';

let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
console.log(`one: ${one}, two: ${two}`); 
// one: foo, two: bar

正規表現の後読みアサーション

ドキュメントより:

後読みアサーションを使用すると、ドル記号をキャプチャせずにドル金額を一致させるといった感じで、パターンの前に別のパターンがあるかどうかを確認できます。
肯定的な後読みアサーションは（？<=...）として示され、アサーションに続くパターンの前に含まれるパターンを確実にします。
たとえば、ドル記号をキャプチャせずにドル金額を一致させたい場合は、/（？<=$）\d+（\.\d*）？/を使用して、'$10.53'と一致し、'10.53'を返します。
ただし、これは'€10.53'とは一致しません。
ネガティブな後読みアサーションは（？<！...）として示されますが、一方で、内部のパターンがアサーションに続くパターンの前にないことを確認してください。
たとえば、/（？<！$）\d+（？：\.\d*）/は'$10.53'とは一致しませんが、'€10.53'とは一致します。

正規表現のUnicodeプロパティエスケープ

ドキュメントより:

これにより、\p{…}および\P{…}という形式のUnicodeプロパティエスケープが追加されます。
Unicodeプロパティエスケープは、uフラグが設定された正規表現で使用可能な、新しいタイプのエスケープシーケンスです。
この機能を使用すると、次のように記述できます。

const regexGreekSymbol = /\p{Script=Greek}/u;
regexGreekSymbol.test('π');
// true

21. テンプレートリテラルの制限の解除

タグ付きテンプレートリテラルを使用すると、エスケープシーケンスの制限がなくなります。

詳細はこちらをご覧ください。

22. ES2019の新機能

それではECMAScriptの最新バージョンであるES2019に含まれるものを見ていきましょう。

23.　Array.prototype.flat() / Array.prototype.flatMap()

Array.prototype.flat()は、指定した深さまで配列を再帰的に平坦化します。
depth引数が指定されていない場合、1がデフォルト値です。
Infinityを使用すれば、すべてのネストされた配列をフラット化できます。

const letters = ['a', 'b', ['c', 'd', ['e', 'f']]];
// デフォルトの深さは1
letters.flat();
// ['a', 'b', 'c', 'd', ['e', 'f']]

// 深さ2を指定
letters.flat(2);
// ['a', 'b', 'c', 'd', 'e', 'f']

// これは、深さ1を指定して２回平坦化した場合と同じです
letters.flat().flat();
// ['a', 'b', 'c', 'd', 'e', 'f']

// ネストされた配列を含まない配列になるまで再帰平坦化を行います
letters.flat(Infinity)
// ['a', 'b', 'c', 'd', 'e', 'f']

Array.prototype.flatMap（）は'depth'引数を処理する方法に関しては前のものと同じです。
しかし、配列を単純に平坦化する代わりに、flatMap（）を使用してマッピングし、新しい配列を処理結果として返すこともできます。

let greeting = ["Greetings from", " ", "Vietnam"];

// まずは通常の`map（）`関数を使用してみましょう
greeting.map(x => x.split(" "));
// ["Greetings", "from"]
// ["", ""]
// ["Vietnam"]

greeting.flatMap(x => x.split(" "))
// ["Greetings", "from", "", "", "Vietnam"]

ご覧のとおり、.map（）を使用すると、複数階層の配列が得られます。
この配列を平坦化する為の手段として.flatMap（）を使用できます。

24.　Object.fromEntries()

Object.fromEntries()はkey-valueペアの配列をオブジェクトに変換します。

const keyValueArray = [
  ['key1', 'value1'],
  ['key2', 'value2']
]

const obj = Object.fromEntries(keyValueArray)
// {key1: "value1", key2: "value2"}

Object.fromEntries（）の引数として、反復可能プロトコルを実装する配列、マップ、または他のオブジェクトのいずれでも、反復可能オブジェクトを渡すことができます。

反復プロトコルの詳細についてはこちらをお読みください:
https://developer.mozilla.org/ja-JP/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol

25.　String.prototype.trimStart() / .trimEnd()

String.prototype.trimStart（）は文字列の先頭から空白を削除します。
String.prototype.trimEnd（）は末尾から空白を削除します。

let str = "    this string has a lot of whitespace   ";

str.length;
// 42

str = str.trimStart();
// "this string has a lot of whitespace   "
str.length;
// 38

str = str.trimEnd();
// "this string has a lot of whitespace"
str.length;
// 35

.trimLeft（）を.trimStart（）のエイリアスとして使用することができます。
.trimRight（）を.trimEnd（）のエイリアスとして使用することができます。

26.　キャッチバインディングの補完(例外変数の省略)

ES2019より前は、常にcatch句に例外変数を含める必要がありました。
ES2019では、省略できます。

// 以前
try {
   ...
} catch(error) { // 例外変数の明記が必要
   ...
}

// ES2019
try {
   ...
} catch { // 例外変数を省略可能
   ...
}

これは、エラーを無視する場合に便利です。
この使用例の詳細なリストについては、こちらの記事を強くお勧めします。
http://2ality.com/2017/08/optional-catch-binding.html

27.　Function​.prototype​.toString()

.toString（）メソッドは、関数のソースコードを表す文字列を返します。

function sum(a, b) {
  return a + b;
}

console.log(sum.toString());
// function sum(a, b) {
//    return a + b;
//  }

コメントも含まれています。

function sum(a, b) {
  // 合計するよ
  return a + b;
}

console.log(sum.toString());
// function sum(a, b) {
//   // 合計するよ
//   return a + b;
// }

28.　Symbol.prototype.description

.descriptionは、Symbolオブジェクトの任意の説明を返します。

const me = Symbol("Alberto");
me.description;
// "Alberto"

me.toString()
//  "Symbol(Alberto)"

29. チートシートをダウンロードする

翻訳元記事のチートシートはこのリンクからダウンロードできます。

---

最後までお読みいただきありがとうございます。
もし翻訳文章や内容についてお気づきの点があれば、コメント等でご連絡いただけると幸いです。

概要

問い合わせフォーム(javascript)　⇒　APIGateway　⇒　Lambda(Node.js)　⇒　Lambda(Node.js)　の流れで簡単な問い合わせサイトを作ります。

一応レスポンシブにします。

バリデーションもあります。

index.htmlのコーディング

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>問い合わせ</title>
</head>

<body>
  <div class="header">
    <a href="#" class="logo">Hoge Hoge Company</a>
    <a class="active" href="#">Home</a>
  </div>

  <main class="main-container">
    <h2>問い合わせフォーム</h2>
    <div class="container">
      <form id="form">
        <div class="row">
          <div class="col-20">
            <label for="name">名前</label>
          </div>
          <div class="col-80">
            <input type="text" id="name" name="name" placeholder="Your name.." />
          </div>
        </div>
        <div id="name-alert" class="alert-message" hidden>入力値が不正です。</div>
        <div class="row">
          <div class="col-20">
            <label for="email">E-Mail</label>
          </div>
          <div class="col-80">
            <input type="email" id="email" name="email" placeholder="Your E-Mail.." />
          </div>
        </div>
        <div id="email-alert" class="alert-message" hidden>入力値が不正です。</div>
        <div class="row">
          <div class="col-20">
            <label for="dept">所属</label>
          </div>
          <div class="col-80">
            <input type="text" id="dept" name="dept" placeholder="Ex: Example Co., Ltd." />
          </div>
        </div>
        <div id="dept-alert" class="alert-message" hidden>入力値が不正です。</div>
        <div class="row">
          <div class="col-20">
            <label for="body">内容</label>
          </div>
          <div class="col-80">
            <textarea id="body" name="body" placeholder="お気軽にお問い合わせください。" style="height:200px"></textarea>
          </div>
        </div>
        <div id="body-alert" class="alert-message" hidden>入力値が不正です。</div>
        <div class="row">
          <button id="submitBtn">送信</button>
        </div>
      </form>
    </div>

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div id="modal-content">
        <span class="close">&times;</span>
        <p id="result"></p>
        <p id="detail" style="font-size: small;"></p>
      </div>
    </div>
  </main>
  <script src="main.js" defer></script>
</body>
</html>

CSSのコーディング

style.css

* {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ",
    Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

/* Style the header with a grey background and some padding */
.header {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  background-color: #000000;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  color: #f2f2f2;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header {
    justify-content: center;
  }
  .header a {
    padding: 12px;
  }
}

.main-container {
  width: 90%;
  margin: auto;
}
.main-container h2 {
  margin-top: 12px;
}

/* Style inputs, select elements and textareas */
input,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

.alert-red {
  border: #ff4500 2px solid;
}

.alert-green {
  border: #00ff7f 2px solid;
}

.alert-message {
  color: #ff4500;
  font-size: small;
  text-align: end;
  margin-bottom: 10px;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
#submitBtn {
  background-color: #4caf50;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  float: right;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-20 {
  float: left;
  width: 20%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-80 {
  float: left;
  width: 80%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-20,
  .col-80,
  #submitBtn {
    width: 100%;
    margin-top: 0;
  }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
#modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  width: 80%; /* Could be more or less, depending on screen size */
}

.request-loading {
  border: 1px solid #888;
}

.request-success {
  border: 1px solid #00ff7f;
}

.request-fail {
  border: 1px solid #ff4500;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

javascriptのコーディング

変数URLはAPIGatewayで発行してから実装します。

main.js

const URL = 'https://'; // APIGatewayで作成したURL

const LOADING = '処理中...';
const RESULT_OK = 'リクエストを受け付けました。';
const RESULT_OK_DETAIL =
  "正常に処理が完了すると 'support@hogehoge.com' からメールが配信されます。";
const RESULT_NG = 'リクエストの受付に失敗しました';
const RESULT_NG_DETAIL =
  '大変申し訳ありません。担当者へ直接お問い合わせください。';
const DOMAIN = '@sample.com';
document.getElementById('email').value = DOMAIN;

(() => {
  const modal = document.getElementById('myModal');
  const modalContent = document.getElementById('modal-content');
  const sendBtn = document.getElementById('submitBtn');
  const span = document.getElementsByClassName('close')[0];
  const result = document.getElementById('result');
  const form = document.getElementById('form');
  const nameAlert = document.getElementById('name-alert');
  const emailAlert = document.getElementById('email-alert');
  const deptAlert = document.getElementById('dept-alert');
  const bodyAlert = document.getElementById('body-alert');
  const resultDetail = document.getElementById('detail');

  const inputValueClear = () => {
    form.name.value = '';
    form.name.setAttribute('class', '');
    form.email.value = DOMAIN;
    form.email.setAttribute('class', '');
    form.dept.value = '';
    form.dept.setAttribute('class', '');
    form.body.value = '';
    form.body.setAttribute('class', '');
    result.innerHTML = '';
  };

  // When the user clicks on <span> (x), close the modal
  span.onclick = () => {
    if (result.innerHTML !== LOADING) {
      modal.style.display = 'none';
      if (result.innerHTML === RESULT_OK) inputValueClear();
    }
  };

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = event => {
    if (event.target === modal) {
      if (result.innerHTML !== LOADING) {
        modal.style.display = 'none';
        if (result.innerHTML === RESULT_OK) inputValueClear();
      }
    }
  };

  sendBtn.addEventListener('click', async event => {
    event.preventDefault();
    const name = form.name.value.trim();
    form.name.value = name;
    const email = form.email.value.trim();
    form.email.value = email;
    const dept = form.dept.value.trim();
    form.dept.value = dept;
    const body = form.body.value.trim();
    form.body.value = body;

    // validation check
    if (validation(name, email, dept, body)) return;

    result.innerHTML = LOADING;
    modalContent.setAttribute('class', 'request-loading');
    modal.style.display = 'block';
    const jsonData = JSON.stringify({ name, email, dept, body });

    try {
      const res = await fetch(URL, {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        body: jsonData,
        headers: {
          'Content-Type': 'application/json; charset=utf-8'
        }
      });
      console.log('Response!!', res.status);
      modalContent.setAttribute('class', 'request-success');
      result.innerHTML = RESULT_OK;
      resultDetail.innerHTML = RESULT_OK_DETAIL;
    } catch (error) {
      console.log(error);
      modalContent.setAttribute('class', 'request-fail');
      result.innerHTML = RESULT_NG;
      resultDetail.innerHTML = RESULT_NG_DETAIL;
    }
  });

  const validation = (name, email, dept, body) => {
    let validationResult = false;
    if (!name.length) {
      form.name.setAttribute('class', 'alert-red');
      nameAlert.hidden = false;
      validationResult = true;
    } else {
      form.name.setAttribute('class', 'alert-green');
      nameAlert.hidden = true;
    }
    if (!email.length || !/^[^@]+@sample.com$/.test(email)) {
      form.email.setAttribute('class', 'alert-red');
      emailAlert.hidden = false;
      validationResult = true;
    } else {
      form.email.setAttribute('class', 'alert-green');
      emailAlert.hidden = true;
    }
    if (!dept.length) {
      form.dept.setAttribute('class', 'alert-red');
      deptAlert.hidden = false;
      validationResult = true;
    } else {
      form.dept.setAttribute('class', 'alert-green');
      deptAlert.hidden = true;
    }
    if (!body.length) {
      form.body.setAttribute('class', 'alert-red');
      bodyAlert.hidden = false;
      validationResult = true;
    } else {
      form.body.setAttribute('class', 'alert-green');
      bodyAlert.hidden = true;
    }
    return validationResult;
  };

  form.name.addEventListener('input', event => {
    const name = event.target.value.trim();
    if (!name) {
      event.target.setAttribute('class', 'alert-red');
      nameAlert.hidden = false;
    } else {
      event.target.setAttribute('class', 'alert-green');
      nameAlert.hidden = true;
    }
  });

  form.email.addEventListener('input', event => {
    const email = event.target.value.trim();
    event.target.value = email;
    if (!email || !/^[^@]+@sample.com$/.test(email)) {
      event.target.setAttribute('class', 'alert-red');
      emailAlert.hidden = false;
    } else {
      event.target.setAttribute('class', 'alert-green');
      emailAlert.hidden = true;
    }
  });

  form.dept.addEventListener('input', event => {
    const dept = event.target.value.trim();
    event.target.value = dept;
    if (!dept) {
      event.target.setAttribute('class', 'alert-red');
      deptAlert.hidden = false;
    } else {
      event.target.setAttribute('class', 'alert-green');
      deptAlert.hidden = true;
    }
  });

  form.body.addEventListener('input', event => {
    const body = event.target.value.trim();
    if (!body) {
      event.target.setAttribute('class', 'alert-red');
      bodyAlert.hidden = false;
    } else {
      event.target.setAttribute('class', 'alert-green');
      bodyAlert.hidden = true;
    }
  });
})();

AWS SES(Simple Email Service)を設定

※ドメインはRoute53で取得済みの前提
※併せてACM(AWS Certificate Manager)で証明書を取得済み
※SESは送信のみの設定です。

1. AWSへログイン
2. SESのコンソールへ移動
3. リージョンはバージニア北部を選択
4. 左のナビゲーションからDomainsを選択
   
5. 　をクリック
6. ↓のように入力。自分のドメインとDKIM設定をチェックして、をクリック
7. 次のモーダルではCNAMEやTXTが表示され、登録しろと指示が出る。Route53を利用している場合は、このモーダル上でDNSの登録がすべて完了する。
8. こんな感じになればOK!（※現時点ではサンドボックス上での制限された利用が可能）
   
9. 左のナビゲーションでEmail Addressesを選択
   
10. Veryfy a New Email Addressでサンドボックス上で利用できるメールアドレスを登録する。
11. 登録したメールアドレスをSend a Test Emailで登録したドメインからメールが送られるかテストして正常な動作を確認

最後に起動するLambdaを作成

1. Lambdaのコンソールページへ移動
2. 　をクリック
3. 　を選択
4. 　適当な関数名を入力
5. ランタイムはNode.js 12.xを選択
6. そのほかはデフォルトのままでOK
7. 　をクリック
8. 環境変数へ配信元のアドレスを設定
   
9. 実行ロールにはSESの権限を許可
   
10. 関数コードへ↓のコードを実装

index.js

'use strict'
const SES = require("aws-sdk/clients/ses");
const ses = new SES({ region: "us-east-1" }); // 米国東部（バージニア北部)
const FROM = process.env.FROM; // 環境変数から取得

exports.handler = async (event) => {
    console.log(event);
    const TO = [event.email];
    const params = {
        Destination: {
            ToAddresses: TO
        },
        Message: {
            Body: {
                Text: {
                    Data: [
                        event.dept + ' ' + event.name + ' 様',
                        ' ',
                        'Hoge Hoge Companyです。',
                        'お問い合わせしていただきありがとうございます。',
                        '下記の内容で承りました。',
                        ' ',
                        '[お問い合わせ内容]' + "\n" + event.body,
                    ].join("\n"),
                    Charset: "utf-8"
                }
            },
            Subject: {
                Data: '受付完了：Webからの問い合わせ',
                Charset: "utf-8"
            }
        },
        // From
        Source: FROM
    };

    const result = {statusCode: 200};
    try {
        const response = await ses.sendEmail(params).promise();
        console.log('Response: ', response);
        result.body = 'OK!!!!!';
    } catch (error) {
        console.log('Error: ', error);
        result.statusCode = error.code;
        result.body = error.message;
    }
    return result;
};

※process.envでは環境変数で設定したキーと値が利用可能（暗号化も可能）

最後に起動するLambdaのテスト

1. テストイベントの選択をクリック
2. ↓のようにテストを作成(※emailキーにはSESで登録したアドレスを記載すること)
   
3. 　をクリックしてテスト実行
4. 成功となればOK。失敗ならログを確認。
   
5. テストでemailキーに指定したアドレスにメールが配信されていればOK

最初に起動するLambdaを作成

1. Lambdaのコンソールページへ移動
2. 　をクリック
3. 　を選択
4. 　適当な関数名を入力
5. ランタイムはNode.js 12.xを選択
6. そのほかはデフォルトのままでOK
7. 　をクリック
8. 環境変数へ配信元のアドレスと受付先のアドレスを入力
   
9. 実行ロールはSESとLambdaの権限を追加
   
10. 関数コードへ↓のコードを実装

index.js

'use strict'
const SES = require("aws-sdk/clients/ses");
const ses = new SES({ region: "us-east-1" }); // 米国東部（バージニア北部)
const TO = [process.env.TO]; // 環境変数からの値を取得
const FROM = process.env.FROM;

// 次のLambdaを起動するための設定
const Lambda = require("aws-sdk/clients/lambda");
const lambda = new Lambda({ region: "ap-northeast-1" });

exports.handler = async (event) => {
    const name = event.form.name;
    const email = event.form.email;
    const dept = event.form.dept;
    const body = event.form.body;
    const sesParams = {
        Destination: {
            ToAddresses: TO
        },
        Message: {
            Body: {
                Text: {
                    Data: [
                        '[名前] : ' + name,
                        '[メールアドレス] : ' + email,
                        '[所属部署] : ' + dept,
                        '[お問い合わせ] : ' + "\n" + body,
                    ].join("\n"),
                    Charset: "utf-8"
                }
            },
            Subject: {
                Data: 'Webからの問い合わせ',
                Charset: "utf-8"
            }
        },
        // From
        Source: FROM
    };

    // 次のLambdaに送るデータ
    const payload = { name, email, dept, body };
    console.log('payload: ', payload);
    const lambdaParams = {
        FunctionName: "inpuirySendMailForm_2nd", // 最後に起動するLambdaの名称
        InvocationType: "Event",
        Payload: JSON.stringify(payload)
    };

    const result = {statusCode: 200};
    try {
        const response = await ses.sendEmail(sesParams).promise();
        console.log('Response: ', response);
        const callLambda = await lambda.invoke(lambdaParams).promise();
        console.log("Lambda Response: ", callLambda);
        result.body = 'OK!!!!!';
    } catch (error) {
        console.log('Error: ', error);
        result.statusCode = error.code;
        result.body = error.message;
    }
    return result;

};

最初に起動するLambdaのテスト（次のLambdaも起動する）

1. テストイベントの選択をクリック
2. ↓のようにテストを作成
   
3. 　をクリックしてテスト実行
4. 成功となればOK。失敗ならログを確認。
   
5. テストでemailキーに指定したアドレスに受付完了メールが配信され、環境変数でTOに指定した受付先アドレスへ問い合わせ内容が配信されていればOK

APIGatewayの設定

1. をクリック
2. REST APIの構築を選択
   
3. API名と説明を入力してAPIの作成をクリック（他はデフォルト）
   
4. アクション⇒リソースの作成を選択⇒リソース名を入力（リソースパスは自動入力）⇒CORSを有効化⇒リソースの作成をクリック
5. アクション⇒メソッドの作成⇒POSTを選択⇒セットアップで最初に起動するLambda関数名を入力⇒保存をクリック
6. 統合リクエストをクリック⇒マッピングテンプレートを追加⇒Content-Typeはapplication/json⇒テンプレートには↓を入力⇒保存をクリック

{
    "form": {
        "name":  "$util.escapeJavaScript($input.path('$.name'))",
        "email": "$util.escapeJavaScript($input.path('$.email'))",
        "dept":  "$util.escapeJavaScript($input.path('$.dept'))",
        "body":  "$util.escapeJavaScript($input.path('$.body'))"
    }
}

APIGatewayのテスト

1. テストを実行する
   
2. Lambdaが起動してメールが配信されればOK

APIGatewayのステージを作成

今回はv1というステージを作成

APIGatewayのデプロイ

リソース⇒アクション⇒APIのデプロイを選択⇒v1ステージを選択して⇒デプロイをクリック

発行されたURLをjavascriptのURL変数へ割り当て

全体の動作確認

問い合わせフォームへSESで登録したアドレスと必要事項を入力し、送信ボタンをクリックして動作を確認

実用化に向けて

• LambdaのSDK呼び出しは動作確認ができているバージョンが呼び出されるようにする必要あり。
• SESの上限緩和申請が必要。
• APIGatewayでリソースポリシーを指定して不要なアクセスを防ぐ

最後に

かなり大雑把に書きました。
小規模利用なら十分かと思います。
役に立つかな？
計画性なく作ってしまったのでここからブラッシュアップ

Youtube をサイトに複数の埋め込みをした場合、再生する動画を一つにしたいという要件は少なくないと思う。これは複数YoutubeをEmbed APIを使って、再生、停止の制御をすることで実現することができます。

• https://developers.google.com/youtube/player_parameters?hl=ja
• https://developers.google.com/youtube/iframe_api_reference?hl=ja

global で onYouTubeIframeAPIReady する必要がある

大体の人はトランスコンパイルしていると思うので、onYouTubeIframeAPIReady() が発火しなくて new YT のタイミングに困ったりする。そこで解決方法としてCustomEventを使いました。IE11のためにpolyfillも必要になります

// CustomEvent Polyfill
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
(function() {
  if (typeof window.CustomEvent === 'function') return false

  function CustomEvent (event, params) {
    params = params || { bubbles: false, cancelable: false, detail: undefined }
    var cevent = document.createEvent('CustomEvent')
    cevent.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
    return cevent
  }
  CustomEvent.prototype = window.Event.prototype

  window.CustomEvent = CustomEvent
})()

function onYouTubeIframeAPIReady () {
  var event = new CustomEvent('youtubeApi', {
    detail: {
      apiReady: true
    }
  })

  window.dispatchEvent(event)
}

poryfill.io とか使ってもいいとおもうけど、ここではMDNからコピペしました。上記のコードはトランスコンパイルできないので、IE11では動かないArrow functionあたりをうっかり使わないように気をつけます

あとは、js側からaddEventListenerでnew YT するだけ

jsの簡易サンプル

HTMLに <iframe class="movie"> としてリスト表示しているとすると

let players =[]
window.addEventListener('youtubeApi', function(event) {
  if (!event.detail.apiReady) return
  const $movies = document.querySelectorAll('.movie')
  $movies.forEach(($movie) => {
    players.push(new YT.Player($movie, {
      events: {
        'onStateChange': onPlayerStateChange
      }
    }))
  })
})

あとは onPlayerStateChange で再生と停止の制御をすればいいはず。自分の場合、表示するのは動画1つでスライダー内の動画だったので、スライドをめくると動画を停止するという挙動になったので onPlayerStateChange は使わなかった

はじめに

先日、Stripeとfirebaseを用いたサービスをリリースしました。その際にStripeのシークレットキーを環境変数に設定したくなり、ドキュメントを漁りました。
https://firebase.google.com/docs/functions/config-env?hl=ja

まずStripeだけども

stripeには2種類のキーがあります。
公開可能キーとシークレットキーですね。
公開可能キーはStripe.jsつまりフロント側で使うキーです。
一方でシークレットキーは名前の通り外に公開してはいけないので、StripeAPIつまりサーバー側で使う（隠さなければならない）キーです。
今回はシークレットキーの設定についての話です。

シークレットキーを環境変数で設定するには

必要なこととしては以下たったの2つ！
※私はCloud FunctionsでAPIを作っています。
1.コンソールでコマンドを記述
2.Cloud Functionsでシークレットキーを呼び出すための記述

1.コンソールでコマンドを記述

firebase functions:config:set stripe.secret_token="sk_××××"

これだけです。ちなみに設定した環境変数を確認するには

firebase functions:config:get

して

{
  "stripe": {
    "secret_token": "sk_××××"
  }
}

となるはずです。

2.Cloud Functionsでシークレットキーを呼び出すための記述

index.js

const stripe = require('stripe')(functions.config().stripe.secret_token);

functions.config()で環境変数にアクセスでき、stripeオブジェクトのsecret_tokenプロパティを呼んでます。

まとめ

ドキュメントにあるようにStripeAPIに限らず様々なAPIで活用できる方法です。
セキュリティ対策のためにもぜひ活用してみてください！

100日チャレンジの210日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

210日目は

おはようございます
210日目

udemyでRuby、javascript

前にRubyの環境構築やっておいたからよかった#100DaysOfCode #駆け出しエンジニアと繋がりたい #早起きチャレンジ

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) January 13, 2020

はじめに

タイトルに堂々と「Angularのデータバインディング」　と書いてますが、これから書く内容がデータバインディングなのか私はわかりません。。

そこまで用語に対して詳しくないので、言葉が間違ってたら教えてください。

本記事で見せるサンプルの環境

今回この記事で使うサンプルは、以下のような環境です。

・Ionic + Angularのアプリ
・Firebaseに保存された文字列を表示させている
・ページAで文字列を入力&保存、その文字列をページBで表示

こんな感じでーす。

文字列が改行されない問題

以下の例を見て欲しい。

ページA

a.page.html

<ion-item>
            <ion-label position="floating">タイトル</ion-label>
            <ion-input type="text" [(ngModel)]="event.title" name="title">
            </ion-input>
          </ion-item>
          <ion-item>
            <ion-label position="floating">メモ</ion-label>
            <ion-textarea rows="7" [(ngModel)]="event.memo"  name="memo">
            </ion-textarea>
          </ion-item>

こんな感じで保存したとする。

ページB

b.page.html

<ion-label *ngIf="event.title">
                 <ion-text color="dark">タイトル : </ion-text> {{ event.title }}
                 <hr>
                </ion-label>
                <div *ngIf="event.memo">
                    <ion-text color="dark">メモ : </ion-text> {{ event.memo }}
                  <hr>
                </div>

そう、改行されないのだーーー！！！

入力&保存をするページAではしっかり改行しておいたのに、データバインディングで表示させているページBでは改行されていない。

cssだけで改行できました

ページBにcssクラスを追加

b.page.html

<div *ngIf="event.memo" class="brake">
                    <ion-text color="dark">メモ : </ion-text> {{ event.memo }}
                  <hr>
                </div>

b.page.scss

.brake {
white-space: pre-wrap;
}

最後に

詳しいことはわかりません。しかし、改行できた！

こちらを参考にしました。
【AngularJS】改行をとにかく簡単に有効にする方法

CSSのwhite-spaceにはpre、wrap、nowrapなど、いろいろと種類があるようなので、気になる人は調べてみてくださいな〜。

やりたい事

DMS(※1)形式 から Degree形式 に変換したい

つまりタイトル通り 60進数 to 10進数 をしたい
10進数 to 60進数も↓の方で実装してます

e.g.) 東京の緯度経度
DMS形式 [35度39分10.1952秒, 139度50分22.1208秒]
↓
Degree形式 [35.652832, 139.839478]

※1 Degree Minute Second の略

実装

interface PointInDMS {
  lat: DMS;
  lng: DMS;
}

interface PointInDegree {
  lat: number;
  lng: number;
}

interface DMS {
  degree: number;
  minute: number;
  second: number;
}

const degreeMinuteSecond2Degree = (pointInDMS: PointInDMS): PointInDegree => {
  return {
    lat:
      pointInDMS.lat.degree +
      pointInDMS.lat.minute / 60 +
      pointInDMS.lat.second / 60 / 60,
    lng:
      pointInDMS.lng.degree +
      pointInDMS.lng.minute / 60 +
      pointInDMS.lng.second / 60 / 60
  };
};

export const main = () => {
  // 東京
  const tokyoPoint: PointInDMS = {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  };

  console.log({ tokyoPoint });

  const deg: PointInDegree = degreeMinuteSecond2Degree(tokyoPoint);

  console.log({ deg });
};

main();

実行結果

{
  tokyoPoint: {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  }
}
{ deg: { lat: 35.652832, lng: 139.839478 } }

逆もやってみた

10進数 to 60進数

一般的にDegree形式が使われてると思うので、こちらを使う事が多そう

interface PointInDMS {
  lat: DMS;
  lng: DMS;
}

interface PointInDegree {
  lat: number;
  lng: number;
}

interface DMS {
  degree: number;
  minute: number;
  second: number;
}

const degreeMinuteSecond2Degree = (pointInDMS: PointInDMS): PointInDegree => {
  return {
    lat:
      pointInDMS.lat.degree +
      pointInDMS.lat.minute / 60 +
      pointInDMS.lat.second / 60 / 60,
    lng:
      pointInDMS.lng.degree +
      pointInDMS.lng.minute / 60 +
      pointInDMS.lng.second / 60 / 60
  };
};

const degree2DegreeMinuteSecond = (pointInDMS: PointInDegree): PointInDMS => {
  const d2dms = (degree: number): DMS => {
    const minuteSecond = parseFloat("0." + degree.toString().split(".")[1]) * 60;
    return {
      degree: Math.trunc(degree),
      minute: Math.trunc(minuteSecond),
      second: parseFloat("0." + minuteSecond.toString().split(".")[1]) * 60
    };
  };

  return {
    lat: d2dms(pointInDMS.lat),
    lng: d2dms(pointInDMS.lng)
  };
};

export const main = () => {
  // 東京
  const tokyoPoint: PointInDMS = {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  };

  console.log({ tokyoPoint });

  const deg: PointInDegree = degreeMinuteSecond2Degree(tokyoPoint);

  console.log({ deg });

  const dms: PointInDMS = degree2DegreeMinuteSecond(deg);

  console.log({ dms });
};

main();

実行結果

{
  tokyoPoint: {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  }
}
{ deg: { lat: 35.652832, lng: 139.839478 } }
{
  dms: {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  }
}

やりたい事

DMS(※1)形式 から Degree形式 に変換したい

つまりタイトル通り 60進数 to 10進数 をしたい
10進数 to 60進数も↓の方で実装してます

e.g.) 東京の緯度経度
DMS形式 [35度39分10.1952秒, 139度50分22.1208秒]
↓
Degree形式 [35.652832, 139.839478]

※1 Degree Minute Second の略

実装

interface PointInDMS {
  lat: DMS;
  lng: DMS;
}

interface PointInDegree {
  lat: number;
  lng: number;
}

interface DMS {
  degree: number;
  minute: number;
  second: number;
}

const degreeMinuteSecond2Degree = (pointInDMS: PointInDMS): PointInDegree => {
  return {
    lat:
      pointInDMS.lat.degree +
      pointInDMS.lat.minute / 60 +
      pointInDMS.lat.second / 60 / 60,
    lng:
      pointInDMS.lng.degree +
      pointInDMS.lng.minute / 60 +
      pointInDMS.lng.second / 60 / 60
  };
};

export const main = () => {
  // 東京
  const tokyoPoint: PointInDMS = {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  };
  console.log({ tokyoPoint });

  const deg: PointInDegree = degreeMinuteSecond2Degree(tokyoPoint);
  console.log({ deg });
};

main();

実行結果

{
  tokyoPoint: {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  }
}
{ deg: { lat: 35.652832, lng: 139.839478 } }

逆もやってみた

10進数 to 60進数

一般的にDegree形式が使われてると思うので、こちらを使う事が多そう

interface PointInDMS {
  lat: DMS;
  lng: DMS;
}

interface PointInDegree {
  lat: number;
  lng: number;
}

interface DMS {
  degree: number;
  minute: number;
  second: number;
}

const degreeMinuteSecond2Degree = (pointInDMS: PointInDMS): PointInDegree => {
  return {
    lat:
      pointInDMS.lat.degree +
      pointInDMS.lat.minute / 60 +
      pointInDMS.lat.second / 60 / 60,
    lng:
      pointInDMS.lng.degree +
      pointInDMS.lng.minute / 60 +
      pointInDMS.lng.second / 60 / 60
  };
};

const degree2DegreeMinuteSecond = (pointInDMS: PointInDegree): PointInDMS => {
  const d2dms = (degree: number): DMS => {
    const minuteSecond = parseFloat("0." + degree.toString().split(".")[1]) * 60;
    return {
      degree: Math.trunc(degree),
      minute: Math.trunc(minuteSecond),
      second: parseFloat("0." + minuteSecond.toString().split(".")[1]) * 60
    };
  };

  return {
    lat: d2dms(pointInDMS.lat),
    lng: d2dms(pointInDMS.lng)
  };
};

export const main = () => {
  // 東京
  const tokyoPoint: PointInDMS = {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  };
  console.log({ tokyoPoint });

  const deg: PointInDegree = degreeMinuteSecond2Degree(tokyoPoint);
  console.log({ deg });

  const dms: PointInDMS = degree2DegreeMinuteSecond(deg);
  console.log({ dms });
};

main();

実行結果

{
  tokyoPoint: {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  }
}
{ deg: { lat: 35.652832, lng: 139.839478 } }
{
  dms: {
    lat: { degree: 35, minute: 39, second: 10.1952 },
    lng: { degree: 139, minute: 50, second: 22.1208 }
  }
}