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

React Native 事始め – 環境構築 Android

# はじめに
最近 React Nativeはじめました。React NativeはFacebookが提供しているマルチプラットフォームアプリケーションフレームワークです。React Nativeでは開発方法が以下の二種類に分かれます。

* React Nativeを用いた方法
* Expoを用いた方法

React Nativeは通常の開発と同様でiOSの場合はipa、Androidの場合はapkファイルを作成します。しかしExpoの場合は、expo.ioに配布されたアプリケーションを参照する事で機能が実現されます。

今回はReact Nativeを用いた方法を行います。Mac PCで必要なツール、ライブラリをインストールして、Androi

Node.js イベントループ

#Node.js とは
* Node.jsはChromeのV8 JavaScriptエンジンをベースに作られたJavaScriptランタイムです。
* Node.jsはevent-driven、non-blocking I/O modelデザインなので軽量で効率的です。

# Blocking vs Non-Blocking
この二つの違いは、リソースをプロセスに集中すべきか否かです。

**Blocking** (synchronous)
このオペレーションを処理する場合は、そのプロセス処理を終了するまで次のオペレーションに移ることが出来ません。

例えば、お茶を飲むという行動はBlockingオペレーションです。
>　1. カップを口までは運ぶ　2. お茶を飲む　3. カップをテーブルに置く　4. 完了

お茶を飲んでいる間は、お茶を飲むことに集中していると思います。

**Non-Blocking** (asynchronous)
このオペレーションを処理する場合は、とりあえずプロセス処理を開始します。
I/Oオペレーション等でリソースを使わない割に時間がかかりそうだったら、一旦

ツイートにスーパー正男のプレイ動画（？）を埋め込めるようにした話

皆さんこんにちは。この記事では、TwitterのPlayer cardを用いてツイートに**スーパー正男**のプレイ動画**（？）**を埋め込めるようにした話をしようと思います。

この記事は[スーパー正男Re同盟 年越しカレンダー2019-2020](https://c94.masao.space/advent/) の10日目の記事です。

ツイートに載せるには　このプレイログもなかなかインパクトがあるな（ぇ
裏技ステージなので理解が難しいのが難点だが（ぇ
https://t.co/il

NoodlでWeb Speech API Speech Recognitionを使う！Noodl Javascriptノードの使い方も解説

※この記事はNoodl2.0を使用しています

NoodlでWeb Speech API Speech Recognitionを使う方法です。
音声認識を使うとなると、バックエンド側の開発が必要となり大変ですよね。
Chromeのブラウザのみ対応になりますが、Web Speech API Speech Recognitionを使うと
数行のJavascriptで簡単にマイクから拾った音声をテキストにすることができます！

# 参考にした記事
Web Speech API Speech Recognitionについて、詳細はこちら
[Webページでブラウザの音声認識機能を使おう – Web Speech API Speech Recognition](https://qiita.com/hmmrjn/items/4b77a86030ed0071f548)

あけおめmicrobit！！
無音だけど音声認識してる【JavaScript】JavaScript、その前に〜Webサイトが表示されるまで・レンダリング

JavaScriptの勉強に必要な事前知識です。追求すると底がありませんが、最低限必要な内容をまとめました。

– Webページが表示されるまでの流れ
– ブラウザの役割
– JavaScriptの役割

# Webサイトが表示されるまで
アドレスバーにURLを入力し、画面上にWebページが表示されるまでの流れです。通信でどのようなデータがやり取りされているか、確認しておきます。

## 図解

# ブラウザ
上図のクライアントに該当するアプリケーションが“ブラウザ“です。動作の結果は「Webページを表示する」ですが、内部では様々なことが行われています。

ブラウザの構成については、意外とネット上の情報が少なかったです。
自分は下記サイトを参考にしました。

> [ブラウザの仕組み: 最新ウェブブラウザの内部構造](https://www.

元記事を表示

フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話【Firebaseと連携編】

# 始めに
明けましておめでとうございます．(執筆時:2020/1/1)
年末年始は~~一緒にゆっくりする友達もいないので~~やったことない技術分野にチャレンジしています．
前回までの記事は

– [vue cli4でプロジェクトを作ってgithub pagesに公開する + travisでCI/CD](https://qiita.com/nkz0914ssk/items/49a7dc86aee9bd2914d5)
– [フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話](https://qiita.com/nkz0914ssk/items/dfee0506bad353c37d1f#_reference-484ac484469cccd19166)
– [フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話【Cardデザイン】](https://qiita.com/nkz0914ssk/items/e15c7119d18c04a9936b)

です．

## 最終的に作ったもの（再掲）
実際に作ったポートフォリオは[こちら](https://n

JavaScriptコードデザインOne Component One Object（OCOO）のススメ！

## フロントエンドプロジェクトでのJavaScriptコードデザインの課題
アプリケーション開発でフロントエンドの主役はJavaScriptのはずなのに、フロントエンドエンジニア達のコーディング認識が一番合わない部分でもあります

CSSではOOCSS、BEM、SMACSS、FLOCSS…など様々なコードデザインのアプローチがあるのにも関わらず、JavaScriptにはそういったものがないですね

なので私がよく利用しているJavaScriptのコードデザイン方法（OCOO）を発信してみようと思いました

## OCOO（オクー）とは
– JavaScriptのコードデザイン方法です（私が勝手に考えて名付けました）
– One Component One Object略してOCOO（オクー）です
– 概念を一言でいうと**一つのコンポーネント（又はモジュール）は一つのオブジェクトだけを参照する**という規約です
– JavaScriptフレームワークやライブラリのコードを書く時に意識してもらえるとコンポーネントのコードを追いかけやすくなります

## メリット
– 変数宣言が散ら

Riot Route でルーティング時のレンダリング前に何らかの処理をさせる手っ取り早い方法

本記事は [Riot.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/riotjs) の第22日目です.

以下, 注意事項です.

* [Riot.js](https://riot.js.org/) を `riot` と呼ぶ
* [@riotjs/route](https://github.com/riot/route) を `route` と呼ぶ
* 本記事の route は `v5.2.0(執筆時点の最新)` とする
※v5 については別途記事を書き中 :bow:

# `onBeforeRoute` イベントハンドラの生成

route のソースコードを見ていくと, 2つ riot コンポーネントが見つかりますが, その中の [route-hoc.riot](https://github.com/riot/route/blob/master/src/components/router-hoc.riot) を見てみますと,

“`js:router-hoc.riotの抜粋
onBeforeRou

HTML要素をドラッグで動かす

See the Pen
MovableElement by Yoshiharu (@yoshiharu2580

【Nuxt.js】SEO基礎編②：超簡単解説！5分でわかるSEO

前置き

前回の続きです。
全てにおいて
https://note.com/aliz/n/nf7cfce1bb6ca
**心構え**
が大事になるので、ご確認を。

# 3-2.SEO内部対策

使いやすいサイトを作ること
**ページ内の質をあげることです。**
知りたい情報で検索をし、
たどり着いた先で
良質な情報が得られることが求められます！

なぜこれが重要なのかは
基礎編をご覧ください。
クローラー、インデクサ、インデックスなど

**具体的な対策方法は2つ
・インデクサビリティの最適化
・クローラビリティの最適化**

## インデクサビリティの最適化

クローラーに適切に情報を
インデックスしてもらうために
分かりやすいサイト構造に
**どのページにどの情報があるかを判別させる**
具体的なポイントを下記で説明します。

**大枠の構造が…
・パンくずリストの設置
・title要素の最適化
・meta要素の最適化**
など
細かいpタグなどは別記事にて。

ページネーションは
サポート終了したため触れません。
複数のページ情報を
1連のまとまりのあるものと判別するため

Express (Node.js) の Graceful shutdown

基本的な実装の仕方と、実装した場合 / しなかった場合、で実際にどういう動作をするか〜、について書きます。

> Linux, Node.js 12.13.0, での話だけをします。

## Graceful shutdown ?

[Express] \(Node.js\) に限りませんが、Web サーバーを停止する際、クライアントから接続中のリクエスト (リクエスト受付してまだレスポンスしていない接続) はどうなるでしょうか？

Graceful shutdown とは一般的に以下の停止を指します。

* 停止指示後に、新しい接続を受付しない
* 残った処理中の接続が完了するのを待ってから、プロセスを安全に停止する

## SIGNALs

そもそも Web サーバープロセスはどうやって停止するかというと、 [SIGNAL] を用いて停止します。

具体的には下表の通り、コマンド等によって [SIGNAL] を送信できます。

| SIGNAL | kill command | Linux Terminal | Kubernetes | 実装依存 | 説明 |
|:——

webpack4で複数のエントリポイントに応じたjs,cssファイルを出力する

複数のエントリポイントから一回のビルドコマンドで別々のjs, scss等のバンドルファイルを出力したい。

“`ディレクトリ構成
root
│ package.json
│ package-lock.json
│ webpack.config.js
│
├─assets
│ │
│ ├─dist
│ │ ├─ js
│ │ │ ├─A.js
│ │ │ └─B.js
│ │ └─ css
│ │ ├─A.css
│ │ └─B.css
│ │
│ ├─js
│ │ ├─A.js
│ │ ├─B.js
│ │ └─modules
│ └─sass
│ ├─A.scss
│ ├─B.scss
│ └─modules
│
└─node_modules
“`

modules以下を使用して構成される[name].js及び、[name].scssから、
distのjs,css配下に[name].js及び[name].cssをbundleとしてそれぞれ生成

Google提供のDataflowテンプレートとJavaScriptの話

# tl;dr

* GoogleはDataflowのテンプレートを提供しているよ
* コードはGitHubで見られるよ
* いくつかのテンプレートはJavaScriptで変換の処理を書けるよ
* JavaScriptの処理はNashornを使っているよ

# Google提供のDataflowテンプレートとは
名前の通り、Googleが提供していてるDataflowのテンプレートです。
これを使うことで、コードを（あまり）書かずに一定の処理が行えます。

提供されているテンプレートは、GCPのストレージ（GCS・Pub/Sub・Datastore・BigQuery・Spanner）間の移動を行うものが多く、例えば、

* Pub/SubからBigQuery（ストリーミング）
* GCSからBigQuery（バッチ・ストリーミング両方）

などがあります。

ちなみに、GCPのストレージ間移動**以外**のテンプレートとしては、[Datastoreのデータ削除](https://cloud.google.com/dataflow/docs/guides/templates/pro

(2020年元旦時点で最新の）Stripeの決済をReactで使う

どこの決済サービスを利用するかは悩ましいところですが、業界標準のStripeはいずれにしてもおさえておきたい・・・ということで調査。意外と苦労したのでメモ。

## 前提知識

ネットに多くの情報がありますが、仕様が変化していて最新の情報を見つけるのに苦労しました。
事前に知っていればもっと楽だったことをまとめてみます。

### Stripeのサービス

[Stripe](https://stripe.com/jp)が提供するサービスはいろいろある。

* PAYMENT（ま、普通の決済）
* BILLING（月額課金）
* CONNECT（プラットフォーマー用）

ここの記事では **PAYMENT** を扱います。

>他にも色々ありますが、日本では使えないものもあるので注意（Issuingとか）。

### PAYMENTの中でもいろいろ

１つのサービスの中でも自サイトへの埋め込み方法やAPIの種類など複数あります。

#### 埋め込み方

* Checkoutを利用する（Stripeが用意した決済画面を利用する（自分のサイトに埋め込む））
* Stripe.js/Elem

jsの>> 説明

アプリを作りたいと思いWEBに落ちているコードを参考にしていると、分からないコードがあったのでググったり動かしてみて分かった事を書いていきます。

結論

“`
var x = 23
var x2 = x >> 1;
var x22 = Math.floor(x / 2);

console.log(x2 + ‘ , ‘ + x22) //11 , 11
“`

要するに
x >> p
と
Math.floor(x / 2**p)
は同じ値を返すということ

kintoneのAPIで別アプリからqueryで取得したJSONデータの処理方法

#kintoneで別アプリからAPI経由でデータを取得して処理する
##処理イメージ
新規で作るkintoneアプリに、テーブルを設け、別アプリ（マスターデータ登録アプリ）から、ステータスが「使用中」のものだけを引っ張ってきて、新規アプリのテーブルにデータを突っ込む。テーブルの行数は引っ張ってきたデータの件数に依存するが、随時増やす。

##REST APIを使う
kintone関係のサイボウズのページを検索すると、REST APIを使うように書いてあるのだが、戻り値はJSONで返ってくる、と書いてある。JSONで返って来たデータを、巧いこと処理してテーブルに突っ込んで行かなくてはならないのだが、サイボウズのページには

“`JavaScript:sample.js
console.log(record);
“`

みたいなlog出力のサンプルしかなくて、戻り値のJSONをどう処理するべきか、というのに非常に苦労したので、ここに書いておく。

###検索条件の設定
まず、検索してデータを引っ張ってくるので、その検索条件を書く。一応、順番に並べる必要があるので、「ソートキー」というフ

ジェネレータを使った非同期処理

# はじめに
ES6以降、JavaScriptの非同期処理は、GeneratorやPromiseを使って書きやすくはなりました。しかし、直列と並列を変更したり、混在させたり、何層にも入れ子にしたい場合があるので、より書きやすく読みやすい記述を検討します。

# サンプル用非同期処理関数(sleep)の準備
関数内の実行状況がわかるサンプルを用意してテストします。実際のコードで使用する実用的なものとしては、画像の読み込み、AjaxでのAPI呼び出し、タイマーで起動させるものなどがあります。

“`js:テスト用サンプル関数の準備
const sleep = (time, callback) => {
console.log(‘sleep time : ‘ + time + ‘ start’);
const completion = () => {
console.log(‘sleep time : ‘ + time + ‘ callback’);
callback();
};
if (time === 0) { // 関数終了前にコールバックが呼ばれる場

jQueryめもめも

# めもめも
jQueryの書き方を頻繁に忘れるのでメモするぜ
追記するかも

# 基本
**JavaScriptは、HTMLの読み込みが終わった後に実行!!!**

“`javascript
jquery(document).ready(function(){
//処理//
});

//↓↓↓↓↓省略形↓↓↓↓↓//

$(function(){
//処理//
});
“`
「$」は関数の名前。jquery()と機能は同じ。他のライブラリと合わせて使うと衝突するかもしれないので後者を使った方が賢明。

## 基本構文
“`javascript
$(セレクター).イベント(function() {
$(セレクター).命令
});
“`
セレクター：操作する要素を指定する
命令：操作する内容
イベント：操作するタイミングを決める

## コールバック
メソッドの引数に関数を渡すこと

“`javascript
$(‘#target’).click(function(){
//処理//
}
“`

## メソッドチェーン
要素の指定が一度で済み

閲覧しているWebページの画像ファイル名一覧を表示するブックマークレット

`img`要素の`src`属性の値を一覧でブラウザーのコンソール画面に表示するブックマークレット。

“`js
javascript:Array.prototype.forEach.call(document.querySelectorAll(‘img[src]’), el => console.log(el.getAttribute(‘src’)));
“`

次のブックマークレットは、画像ファイルの拡張子が`.png`、`.jpg`、`.gif`である場合のみコンソール画面に表示される。

“`js
javascript:Array.prototype.forEach.call(document.querySelectorAll(‘img[src]’), el => { const src = el.getAttribute(‘src’); if (src.match(/\.(?:png|jpg|gif)$/)) console.log(src); });
“`

ファイル一つコピペで試すAuth0+Vue.jsのログインサンプル

こんばんわ！ 2019年、年の瀬ですね。

実家でまったりしながら、少し前に書いたAuth0のサンプルを一つのファイルにまとめてみました。

今後触ってみる人の参考になれば幸いです。設定などは以下の記事をご参照下さい。

* [Auth0 + GitHub Pagesでミニマムなログインサンプルを作る](https://protoout.studio/posts/auth0-github-pages)
* [【Auth0 + Nuxt.js】クリスマスなのでこのブログにログイン機能を作ってみる](https://protoout.studio/posts/auth0-nuxt-sample1)

## コピペ用index.html

“`index.html

ログインが必要なページ（さんぷる）