JavaScript関連のことを調べてみた2020年06月11日

Firebaseで作るWebアプリケーション – データベースからデータを取得する

# 今回やること

[前回](https://qiita.com/sfjwr/items/b279676532b0af2d9ef7)保存したデータを取得し、画面に表示するようにします。

# データベースからデータを取得するAPIを作成する

`functions/index.ts`に下記を追加します。

“` ts
export const listArticle = functions.https.onCall(async (data, context) => {
const dd = await admin.firestore().collection(‘articles’).get();
return dd.docs.map((doc) => doc.data());
});
“`

`listArticle`という名前のAPIを追加し、collection(‘articles’)を`get`しています。

このように記述すると、指定のコレクションの中のデータを全て取得することができます。

取得したデータは`DocumentData`という形式になり、プロパティ`

Firestoreのリアルタイムリスナーの書き方

FirestoreにはWebSocketを利用して、データの更新を各端末に送信する**リアルタイムリスナー**という仕組みがあります。
更新を確認するのにポーリングする必要がなく非常に強力な仕組みです。

CRUDの書き方は以下を参照してください。
[FirestoreのCRUD操作の書き方まとめ
](https://qiita.com/sano1202/items/cef4aa43a8905d999664)

# 単一ドキュメントのリッスン
リアルタイムリスナーを使用たい場合は、ドキュメントのリファレンスでonSnapshotメソッドを使用します。

“`js
db.doc(‘items/[documentId]’)
.onSnapshot(function(doc) {

// ドキュメントが作成、変更、削除されるたびに出力される
console.log(doc.data());

// リスナーの停止
unsubscribe();
});
“`
リスナーを停止する場合は、unsub

Firebaseで作るWebアプリケーション – データベースにデータを保存する

# 今回やること

[前回](https://qiita.com/sfjwr/items/ac8c623b17e0e92f5632)は、WebブラウザのクライアントからAPIを呼び出す処理を作成しました。

今回は、データベース(Firestore)へデータを保存する処理を作成します。

# データベースへのデータの保存

Firestoreは、キーバリュー型のデータベースです。指定のキーに紐付けて、データを保存することができます。例えば郵便番号をキーに、住所をデータとして保存する、というようなイメージです。

次のように記述することでデータを保存できます。

“` ts
admin.firestore().collection(‘addresses’).doc(‘100-0001’).set({
address: ‘東京都千代田区千代田1番1号’,
});
“`

`collections`の引数にはコレクション名を指定します。データの種類のようなもので、好きに設定することができます。RDBでのテーブル名に相当します。

`doc`の引数にデータのキーを指定します。`set`

Firebaseで作るWebアプリケーション – APIを作成する

# 今回やること

今回から、[前回](https://qiita.com/sfjwr/items/5fd983c61d208b07e9bb)構築した環境に、機能を徐々に入れていきます。まずはサーバーサイドにAPIを一つ作成し、それをクライアント(Webブラウザ)から呼び出して結果を画面に表示するところまで行います。

# Cloud FunctionsにAPIを用意する

Cloud Functionsを利用すると、簡単にサーバーサイドにAPIを作成することができます。

JavaScriptで作成した一つの関数が一つのAPIに対応し、関数の引数と戻り値を通してクライアントとやり取りを行うことができます。

クライアントから送られてきたデータは関数の引数に設定され、関数の戻り値でクライアントへデータを送り返す、という形になります。

## APIを書く

ファイル`functions/index.ts`がCloudFunctions用のAPIを記述するファイルになっています。こちらにAPIを記述していきます。

“` ts
import * as functions from ‘f

Puppeteerにはまだまだ負けられないcheerio-httpcliの底力を見せる時が来た

昨今のWEBスクレイピングといえばSPAなどの動的更新WEBサイトの増加もあって[Puppeteer](https://pptr.dev/)が主流になっていますが、かつて一世を風靡した（言いすぎ）[cheerio-httpcli](https://www.npmjs.com/package/cheerio-httpcli)というスクレイピングライブラリもあるのをご存知でしょうか。

静的HTMLを解析してjQueryのように要素を検索・操作するいわゆる古いタイプのライブラリではありますが、まだまだ現役でやれるところを見せるべく、目玉機能をいくつか引っさげてバージョン0.8.0へと進化したのでこの場を借りて紹介させていただきます。

Puppeteer使いの方にも役立つ情報もあるのでぜひぜひ最後までご覧ください。

ちなみに、cheerio-httpcliについての紹介記事は過去に何度かQiitaで紹介しているので「cheerio-httpcli？なにそれおいしいの？?」的な人はそちらもご覧になるとより分かりやすいと思います。

#### 過去の紹介記事

* [Node.js用のスクレ

Firebaseで作るWebアプリケーション – 環境を構築する

# はじめに
Google Firebaseを利用すると、Webアプリケーションのサーバーサイドを簡単に構築することができます。

Firebaseは、簡単に言えばAPIサーバーやファイルサーバー、Webサーバー等をサーバーレスで構築できる仕組みを提供してくれるものです。

昔はWebアプリケーションを作成しようとした場合、サーバーマシンを用意してOSをインストールし、ApacheやMySQLなどのサーバーアプリをインストールして設定するなど、目的とするWebアプリケーションを作成すること以外にやらなければならないことが数多くありました。

また、Webアプリケーションのユーザーが増えてサーバーを増築するようなことになると、同様の作業を何度も繰り返すような必要がありました。

Firebaseは、このような多くの作業を肩代わりしてくれます。

そのためFirebaseの利用者は、Webアプリケーションの作成のみに集中することができ、少人数でWebアプリケーションの開発・運用を行うことが可能となります。

やる気があれば、一人でもWebアプリケーションを一から構築・運用することも現実的で

コーディング練習 ブログトップページ編 2 / 3

## まずはじめに
Progateやドットインストールなどをやって、
次に何をすれば良いかわからない人向けに、簡単で分かりやすく、
実際に通用するコーディングを練習していこうという内容です。
全3回の内、今回はその2回目の記事です。1回目の記事↓
[コーディング練習 ブログトップページ編 1 / 3](https://qiita.com/engineerhikaru/items/ee17367e0f61f6015b3e)

## 完成品

作って理解JavaScript：JOKE開発記その4 – 関数

# 今回のスコープ

いよいよ関数の定義と呼び出しを実装します。機能としては

– 宣言としての関数定義（ただし、巻き上げは行わない）
– 関数式での定義（アロー関数はまだ実装しない）
– デフォルト引数はサポート。分割代入やrest引数は今後の課題

## テストプログラム

というわけでテストプログラムです（合計5個）

“`js:step0004_01.js
/// 関数を宣言して実行
function square(x) {
return x * x;
}

console.log(square(3));
console.log(square(4));
“`

JavaScriptの特徴として定義されているよりも少ない引数で呼べるというものがあります。というわけでそれもテストします。[^1]
`undefined`と表示されるだけでは何もおもしろくないのでデフォルト引数も実装することにしました。

[^1]: 逆に「定義されているよりも多い引数で呼ぶ」こともできるわけですが、配列をまだ実装していないため「多い分全部」を格納するrestを操作する方法がなく今ステップで

パッケージの使い方

# プログラミングの勉強日記
2020年6月10日　Progate Lv.85
JavaScript Ⅴ

##パッケージとは
　JavaScriptの中では他の人が通った便利なプログラムがパッケージという形で公開されている。このパッケージは自分のプログラムの中に組み込んで使うことができる。
　今回紹介するパッケージはコンソール出力の文字に色を付けることができるchalk、コンソールに値を入力できるreadline-syncのパッケージを紹介する。

##パッケージのインポート
　パッケージを自分のプログラムで使用するためにはインポートが必要である。
`import 定数名 from “パッケージ名”;`でインポートすることができる。ファイル名ではなく、パッケージ名を指定する。

##chalkパッケージの使い方
　

“`javascript:chalkを使って文字の色を変える
import chalk from “chalk”;
console.log(chalk.yellow(“Hello World”)); //文字色を黄色に

GASで動的HTML②　HTML内でGoogleドライブ内の画像ファイルをダイナミックに表示させる。

# 前回の記事でやったこと
前回の記事でAPIを使って動的HTMLを作成することができました。

> GAS で動的HTMLを作成してWebに公開する。（API連携）
> https://qiita.com/jooji/items/6227821eb5f9b48e2e87

# この記事でやること
この記事では、せっかくGASを使うのですからGoogleアプリと連携にチャレンジしてみたいと思います。

## Googleドライブの特定フォルダ内の画像ファイルを一覧するWebページの作成
Googleドライブに写真用フォルダを作り、画像ファイルを保管しているとします。
そのフォルダの画像ファイルを一覧するWebページを作ってみたいと思います。

画像ファイルはどんどん増えたり減ったりしますので、動的にHTMLを作成する必要があります。

# この記事で学習すること

1. HTML内でGASを実行する方法
2. HTMLのimgタグにGoogleDriveの画像ファイルを使用してブラウザに表示する方法
3. HTML内に記述したGASからHTMLを書き変える方法

## ①HTML

TypeScriptで学ぶSOLID〜単一責任の原則編〜

# 対象読者

– SOLIDを学習あるいは復習したい方
– TypeScriptが既に読めるあるいは気合いで読める方
– いずれかのオブジェクト指向言語を知っている方は気合いで読めると思います

# 環境

– OS: macOS Mojave
– Node.js: v12.7.0
– npm: 6.14.3
– TypeScript: Version 3.8.3

# 本シリーズ記事一覧(随時更新)

– TypeScriptで学ぶSOLID〜単一責任の原則編〜

# SOLIDとは

**ソフトウェア設計の5つの原則の頭文字をとったもの**です。

これらの原則はソフトウェアをメンテナンスしやすいようにするためのガイドラインです。具体的には以下です。

– 単一責任の原則（**S**ingle responsibility principle）
– 開放閉鎖の原則（**O**pen–closed principle）
– リスコフの置換原則（**L**iskov substitution principle）
– インターフェイス分離の原則（**I**nterface s

JavaScriptにおける正しいURLエンコードの方法（encodeURIとencodeURIComponentの違い）

# はじめに
javascriptにおいてURLをパーセントエンコードする場合に使用する`encodeURI`と`encodeURIComponent`の違いを説明します。

# URLエンコードとは
URLに含まれる日本語とか半角スペースとかを「あ」→「%E3%81%82」、「 」→「%20」に変換すること

# URLデコードとは
エンコードされたURLを元に戻すこと

# javascriptでやってみる
“`
let url = “http://api/user/太郎?age=20”;
console.log(encodeURI(url));
console.log(encodeURIComponent(url));
“`
“`ruby:実行結果
http://api/user/%E5%A4%AA%E9%83%8E?age=20
http%3A%2F%2Fapi%2Fuser%2F%E5%A4%AA%E9%83%8E%3Fage%3D20
“`

`encodeURIComponent`はURLの形式としておかしな文字列になってしまいました。

# 違い
URL内で特別

pandas-highchartsのdisplay_chartsをjupyter以外の環境で実行する

#背景
データ解析などをやる人はよくjupyterを使うみたいですね。
おそらくデータを即座にグラフにして描画する、みたいなのはPython 単体では苦手なので、ブラウザ上でやってるんだと思います。
しかし、displayなどの表示(html描画)関係のメソッドは、jupyter特有のものであり、他の環境では実行できません。
Qiitaのデータ解析記事などを参考にしても、jupyterの環境の記事だと、描画周りが自分の環境だとうまくいかなかったりします。
今回は、pandas-highchartsで表示するグラフをpycharm環境から見る必要があったので記事化しました。

#方法
pandas-highchartsのソースコードを参考に、以下のような関数を作りました。
pandas-highchartsのdisplay_chartsは、returnでdisplayにしてしまっているため、返り値はNoneになります。その一歩手前でhtmlのテンプレートに埋め込んでリターンしている感じです。
(参考)
https://github.com/gtnx/pandas-highcharts/

JavaScript 配列

##目次
-配列の作り方
-配列の要素にアクセスする
-配列の要素を変更する
-配列の全ての要素に対して何らかの処理を行う
-配列に処理を行ったあとで結果を別の配列として取得する
-配列の要素のうち条件に合うものだけを抽出して別の配列として取得する

##配列の作り方

　[] （大括弧）の中にそれぞれの値を , （カンマ）区切りで与えてあげる。
　たとえば、複数のスコアがあったとして、それをscores という定数名で全ての値を配列で管理したかった場合下記のようになる。

“`
// const score1 = 60;
// const score2 = 80;
// const score3 = 40;

const scores = [60, 80, 40];
“`

##配列の要素にアクセスする

配列ではインデックスは 1 番からではなくて 0 番から始まる。

“`
const scores = [60, 80, 40];
“`
上記の場合インデックス 0 番目が 60 、 1 番目が 80 、 2 番目が 40 となる。
2 番目のスコアだけ

要素の数が n の集合のべき集合（に相当する配列）を得る

# はじめに

– 要素の数が `n` の集合の[べき集合](https://ja.wikipedia.org/wiki/%E5%86%AA%E9%9B%86%E5%90%88) を得るコードを書きました。
– 使用したプログラミング言語はJavaScriptです。
– 数学の集合の代替として、コードでは配列を使っています。
– 要素数が `n` の集合を表す配列としては、`[0, 1, 2 … n-1]` を使います。

# 仕様

非負の整数 `n` を受け取り、べき集合に相当する配列を返す関数 `powerSet` を作成しました。

“`javascript
powerSet(n)
“`

`powerSet(n)` の仕様は以下です。

– 引数の `n` として非負の整数を受け取る。それ以外の場合は、Error をスローする。
– 以下は、`n` が 0以上2以下の場合の、`powerSet(n)` が返す配列の例になります。
– `powerSet(0)`： 空集合Φのべき集合を表す配列 `[ [] ]` を返す。
– `powerSet(1)`： 要素が

Javascriptの復習（4）

# この記事について
本記事はプログラミング初学者がアウトプットの場として書いたものです。初学者以外の方にとっては退屈な記事となると思いますのでスルーしてください。Rubyを学習した後なのでRubyと比較しつつ書いていこうと思います。

# クラス
　オブジェクトを何度も作成する時、毎回オブジェクトを作成するコードを書いていると大変です。似たようなオブジェクトを効率よく作成する方法としてクラスがあります。クラスはオブジェクトを生成する方法をまとめておくもので、ここに値を与える事でオブジェクトを生成できます。クラスを設計図として例える説明が多いですが、私個人としてはオーダー用紙のようなイメージの方がしっくりきます（オーダー用紙の記入内容で作成されるものが少し変わってくるようなイメージ）。書き方こそ違えどRubyのクラスとほぼ同じです

　クラスは以下のように書きます。

“`script.js

class クラス名 {

}

“`

クラスから実際にオブジェクトを生成する時は「newクラス名()」と書きます。
クラスから生成したオブジェクトは**インスタンス**と呼ばれます。

Kinx ライブラリ – REPL

# Kinx ライブラリ – REPL

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

今回は REPL です。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

当初、REPL できないんじゃないか、と悲観していましたが、なんとなくそれっぽく動くものが出来上がったのでご紹介です。

というのも、`evel` を

async/awaitを利用したコードのエラーハンドリング

# async/awaitを使ったコードのエラーハンドリングのもやもや

es6で導入されたasync/await、皆さん使われていますか？
かつてのコールバック地獄から始まり、Promiseを経てこのasync/awaitが使えるようになったことで、非同期処理はとてもシンプルに書けるようになりました。

しかしこのasync/awaitですが、特にexpressなどを使ったサーバーサイドで書いている時にエラーハンドリングどうしたら良いか困ったりした経験はないでしょうか？
内部的にはPromiseが使われているので、要はPromiseのエラーハンドリングと同じなのですが、僕は当初もやもやしていました。

### もやもやその1： catchした後も実行が止まらない…
例えば下記みたいなコードを書いた経験がある方もいるのでは？
私も最初書きましたｗ

“`js
const getItem = async(req, res) => {
const { itemId } = req.params;
const item = await db.getItem(itemId).catc

【Rails】pay.jpの導入（ビューのカスタム〜登録まで）

## 最初に
商品購入時等に必要なクレジットカードの登録機能をpayjpを用いて実装しました。
ビューのカスタム〜登録までの手順を備忘録として残します。

## 開発環境
・Rails 5.2.4.2
・Ruby 2.5.1

## pay.jpとは
https://pay.jp/docs/started
簡単にいうと、クレジットカードの登録〜決済を代行してくれるサービスです。
payjpジェムを使用することによって機能の実装を助けてくれます。


ちなみにカード情報そのものをDBに保存することは禁止されています。
payjpに保管されている情報を顧客i

【備忘録】Javascript : Symbol型について

## 概要
JavascriptのES2015から出現したプリミティブデータ型。
下記コードを見てもらうと分かるが、シンボルの実体は「唯一無二の何か」であり、
決して競合しないユニークなキーのようなもの。

“`javascript.js

const sym1 = Symbol();
const sym2 = Symbol();

console.log(sym1 === sym2) // false
“`

※ Symbol型は初期化する際にnew演算子は不要

## 用途
Symbolは唯一無二なところからプロパティのキーとして使用し、使うメリットとしては名前の衝突などを防ぐことができるのだそう。
以下、使い方のコード例です。

### 1,プライベートメンバを定義する

“`Javascript.js

const SECRET_PROP = Symbol();

class App{
constructor(hoge,foo,secret){
this.hoge = hoge;
this.foo = foo;
this[SECRET_