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

プロミス食堂　〜JavaScript Promiseの直観的なお話〜

##きっかけ

ある日、家族とショッピングモールのフードコートで昼食をとりました。私と子供たちが一足先にフードコートに行って注文をしておき、妻が後から合流するという段取りで、私たちは４つのメニュー（ピザ２枚とうどん２杯）を注文しました。

フードコートではメニューを注文すると、４つの呼び出しベルが渡されました。
しばらくしてピザのベルが２つ鳴り、ピザを受け取りました。


そこに妻から電話がありました。
「今どんな状況？」
「ピザができたけど、うどんがまだだから、4つ揃うのを待ってるんだ。」
「じゃあ、全部揃ったら連絡してもらってもいい？」
「わかった。全部揃ったら連絡するよ。」

そしてその時、あることがひらめきました。
「おーっ、これはまさに、Promise.allじゃないか！」
日常生活の

FirestoreのCRUDまとめ

JavaScriptでのFirestoreのCRUD処理をまとめます。

## コレクションのリファレンスを取得
FireStoreではコレクションという仕組みがあります。
RDBでいうところのテーブルです。
コレクションのリファレンスを取得することで、コレクション単位の操作ができます。

“`js
const itemsRef = db.collection(‘items’);
“`

## ドキュメントのリファレンスを取得
FireStoreではコレクションの中に複数のドキュメントがあります。
RDBでいうところのレコードです。
ドキュメントのリファレンスを取得することで、ドキュメント単位の操作ができます。

“`js
const itemRef = db.collection(‘items’).doc(‘[DocumentId]’);
“`
docメソッドのの引数を空にすると、新規で生成したドキュメントへのリファレンスを返します。
その際のドキュメントIDは自動で生成されます。
また、ドキュメントのリファレンスは以下のように記述することも可能です。

“`js
co

Cognos Analytics カスタムビジュアライゼーション 開発環境セットアップ

#カスタムビジュアライゼーション 開発環境セットアップ
カスタムビジュアライゼーションの開発環境をセットアップする手順を記載します。
前提として、端末がCognos Analyticsサーバーに接続可能な環境である必要があります。

**NodeJS/NPMのダウンロード**
以下のリンクから、Nodes.jsのバージョン10をダウンロードします。
※ここでは「node-v10.19.0-x64.msi」をダウンロードしています。

**NodeJS/NPMのインストール**
ダウンロードしたモジュールをクリックしてインストーラーを起動します。
※全てDefaultのままでインストールを行います
![image.png](https://qiita-image-store.s3.ap-northea

Cognos Analytics カスタムビジュアライゼーション機能の紹介

#カスタムビジュアライゼーション概要
Cognos Analyticsの「カスタムビジュアライゼーション」機能を、何回かに分けて紹介します。カスタムビジュアライゼーションは、一言でいうと「d3.jsでCognosのグラフを自作する」機能です。
Cognos製品のデフォルトに無いグラフを使用する要件が出てきた時に、必要になってくる技術ですね。
技術的には、Cognosの技術というよりd3.jsの技術が重要なので、Cognosはやって来たけどd3.jsはやって来んかった～、という人(私も・・・)は是非この機会にd3.jsを学ぶとCognosスキルの幅が広がると思います。

d3.jsの技術さえあれば、こんなグラフが自在に作れてしまいます。
お客様の無茶ぶりに「Cognosではできませんよ～」ではなく、「ああ、まあ、自分で作りますから良いですよ」と、さらっと言えるとかっこいいですね。
【JS】date-fnsを使って 日本語で「X年Xヶ月」を返す関数（コピペ用）

## 経緯
* 指定した時間から経過した時間「X年Xヶ月」を日本語で返す関数、ググれば使えるものがすぐ出てくるかと思ったが記事がなかったので書いておく

## 前提
* 開発では日付管理ライブラリによく[date-fns](https://date-fns.org/)を使用するので今回はそちらを利用する

いまから導入する場合は早速追加

“`terminal:terminal
$ npm install date-fns –save
# or
$ yarn add date-fns
“`

# 実装

“`typescript

import { differenceInYears, differenceInMonths, parseISO } from ‘date-fns’;

~ ~ ~

// 指定した時間から経過した時間「X年Xヶ月」を返す
const getDifferenceInYM = (targetDate: Date, baseDate: Date) => {
let date = targetDate;
const diffYears = diff

マウスを押し続けている最中のマウス座標を求める（web ブラウザ内）

こんにちは。
web ブラウザ画面内において、マウスボタンを押し続けている最中の移動するマウス座標を求め、処理してみました。

なお、押し続けている最中の移動ではなく、ボタンを離したイベントを対象とするのならば、より簡素になります（下記）。

“`javascript
const mouseDown = e => {posOrigin = mousePos(e)};
const mouseUp = e => {printLog(mousePos(e))};
“`

“`html







```

【表示】
**?true?**
h1タグが表示されます。
turbolinksとは

# turbolinksとは
- TurbolinksはRails4.0からデフォルトで導入されたgem

- ajaxとhistoryAPI(popState, pushState)を利用して画面遷移

- js, cssの読み込みを初回時に行い次回以降の読み込み処理を省略することで高速化する。

# 主なTurbolinksの動作は2つ
####fetchReplacement
- ``タグのリンクをクリックした時の遷移をajax化して画面遷移なしにページ遷移する。

- clickイベントの挙動を変えている

####fetchHistory
- 戻るボタンなどを押した時のイベントを書き換えている

- fetchReplacement時にpushStateでキャッシュしたページをpopStateで復元する。

# 参照
[Turbolinksを調べてみた](https://gist.github.com/saboyutaka/8727377#fetchreplacement)

ブロックチェーンの基礎知識＆JavaScriptでブロックチェーンを構築する

ここでは、**ブロックチェーン**の基礎知識と**JavaScript**を使った**ブロックチェーン**の構築方法を紹介します。コードを使って、基礎となるデータ構造、PoWマイニング、トランザクション処理など、**ブロックチェーン**を説明します。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/build-your-own-blockchain-with-javascript_595314)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

#ブロックチェーンを知る
ブロックチェーンはその名の通りブロックの連鎖であるため、ブロックチェーンの基本的なデータ構造はブロックです。ブロックの中身は、タイムスタンプ、データ、ハッシュ、previousHashなどの情報が含まれています。これらの構成要素のうち、データ部分は当然のことながらデータを格納するために使われ、previousHashは前のブロックのハッシュ値を格納する役割を果たしています。以