Operational Transformation(操作変換)アルゴリズムを使用し、共同編集の実装をしている。
また、OTのバージョンが異なるので、バージョンに注意する。

```bash
npm run build # コンパイル済ファイルの生成
node dist/index.js # 実行
```

フロントエンド: [https://github.com/Operational-Transformation/ot.js/tree/master/dist](https://github.com/Operational-Transformation/ot.js/tree/master/dist)の`ot-min.js`を使用する。
バックエンドは、SocketIOのバージョン周りが古いので、書き換える。

## 参考

- [DocBaseの同時編集機能を実現しているアルゴリズム](https://kray.jp/blog/algorithm-operational-transformation/)
- [Operational-Transformation/ot.js](https://github.com/Operational-Transformation/ot.js)

JavaScript

otの共同編集機能を見ていく

Operational Transformation(操作変換)アルゴリズムを使用し、共同編集の実装をしている。
また、OTのバージョンが異なるので、バージョンに注意する。
npm run build # コンパイル済ファイルの生成
nod…

## ドキュメント

- [Qiita API v2ドキュメント - Qiita:Developer](https://qiita.com/api/v2/docs#%E6%8A%95%E7%A8%BF)

## 準備

- [Qiita](https://qiita.com/settings/applications) から個人用アクセストークンを取得する
    - scopeで`read_qiita`と`witre_qiita`にチェックを入れる
- axiosをインストールしておく

## 実装

```js

import axios from 'axios'

async function postQiita() {
	// TODO: 👇取得したTokenをセットする。漏洩しないように注意
	const QIITA_ACCESS_TOKEN = 'xxxxx'

	// POSTリクエスト
	const response = await axios.post('https://qiita.com/api/v2/items', {
		body: '# テストだよ', // 内容
		group_url_name: null,
		coediting: false,
		private: false, // 👈 限定公開 APIのテストは非公開&すぐに消しましょう
		// タグ必須だよ
		tags: [{
		  name: 'Ruby',
		  versions: ['0.0.1']
		}],
		title: 'テスト Qiita API',
		tweet: false // 投稿をTweetするか否か
		},
		{
		headers: {
		  Authorization: `Bearer ${QIITA_ACCESS_TOKEN}` // 認証
		}
	})

	// 確認
	console.log('response:', response)
}
postQiita() // 実行
```

Axios使ってQiita投稿する

## ドキュメント

- [markedjs/marked: A markdown parser and compiler. Built for speed.](https://github.com/markedjs/marked)
    - Markdown パーサーとコンパイラ
- [KaTeX/KaTeX: Fast math typesetting for the web.](https://github.com/KaTeX/KaTeX)
    - 数式のレンダリング
- [How can I close render '_' · Issue #1538 · markedjs/marked](https://github.com/markedjs/marked/issues/1538#issuecomment-526189561)

## インストール

```bash
npm install marked katex
yarn add marked katex
```

## 実装

```jsx
import marked from 'marked'
import katex from 'katex'
import 'katex/dist/katex.min.css' // 👈 CSSも忘れずに

// 数式の表現
const mathsExpression = (expr) => {
  if (expr.match(/^\$\$[\s\S]*\$\$$/)) {
    expr = expr.substr(2, expr.length - 4)
    return katex.renderToString(expr, { displayMode: true, noannotation: true })
  } else if (expr.match(/^\$[\s\S]*\$$/)) {
    expr = expr.substr(1, expr.length - 2)
    return katex.renderToString(expr, { isplayMode: false })
  }
}

// カスタムレンダー
export const customPreviewRender = (text) => {
  const renderer = new marked.Renderer()

  // code
  renderer.code = (code, lang, escaped) => {
    if (!lang) {
      const math = mathsExpression(code)
      if (math) {
        return math
      }
    } else {
      return `<pre><code class="hljs ${lang}">${hljs.highlightAuto(code, [lang]).value}</code></pre>`
    }
  }

	// codespan
  renderer.codespan = (text) => {
    const math = mathsExpression(text)

    if (math) {
      return math
    }

    return `<code>${text}</code>`
  }

  return marked(text, { renderer: renderer })
}
```

## 書き方

```
## code

/```
$
L = \frac{1}{2} \rho v^2 S C_L
$
/```

/```
$$
L = \frac{1}{2} \rho v^2 S C_L
$$
/```

## codespan

`$L = \frac{1}{2} \rho v^2 S C_L$`

`$$L = \frac{1}{2} \rho v^2 S C_L$$`

```

![marked-katex](//images.contentful.com/0jyj5pjwic68/N6lfLOF5c9nxAkYXbkewe/e6688cce69943dd0b380ddd17acf37f5/marked-katex.png)


MarkedとKatexで数式を表示する

## ドキュメント

[Event.preventDefault() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)

## ポイント

- Event.preventDefault()を使用して、遷移を無効化します
    - EventのDefaultの動作をprevent（妨げる）

## 実装

### 特定のIDを持つ1つのaタグの遷移を無効化する

- `getElementById` を使用します

```js
const preventExternalLink = () => {
  const externalLink = document.getElementById('external-link') // ID取得
  externalLink.addEventListener('click', (e) => { // イベント追加
    e.preventDefault() // 無効化
    console.log(e.target.href) // href属性の取得
  })
}
```

### 特定のIDを持つ全てのaタグの遷移を無効化する

- `querySelectorAll` を使用します

```js
const preventExternalLinks = () => {
  const externalLinks = document.querySelectorAll('#external-link')
  externalLinks.forEach(externalLink => {
    externalLink.addEventListener('click', (e) => {
      e.preventDefault()
			console.log('href: ', e.target.href)
    })
  })
}
```

aタグの遷移を無効化する

## 用途
- obj?.prop – objが存在する場合はobj.propを返し、それ以外の場合はundefined
を返します。

- obj.method？.()– obj.methodが存在する場合はobj.method（）を呼び出し、それ以外の場合はundefinedを返します。

## 応用
```js
const userCity = user?.city ?? "Unknown city";
```

Cityがない場合、"Unknown city"を返す。

## 参考
[Optional chaining '?.' in JavaScript](https://inshaweb.hashnode.dev/optional-chaining-in-javascript)

(?.)チェーンについて

## TLDR

```js
[arr[0], arr[1]] = [arr[1], arr[0]]
```

## Example
```js
let arr = [
  { id: 1, name: 'Number1' },
  { id: 2, name: 'Number2' },
];

[arr[0], arr[1]] = [arr[1], arr[0]]

console.log(arr)
// 0: {id: 2, name: "Number2"}
// 1: {id: 1, name: "Number1"}
```

## Usecase

![swap](//images.contentful.com/0jyj5pjwic68/15ECRw7y5EfaEOq6Cx70Tr/ef78bba09ed9191ac26fa4300a66edca/swap.gif)

配列の要素入れ替え

役に立ちそうな実装や面白い実装などをまとめていきます。

## Objectのキーの有無

```js
console.log('name' in user)
// true or false
```

## Spread syntax (...)

```js
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3
```

```js
let numberStore = [0, 1, 2]
let newNumber = 12
numberStore = [...numberStore, newNumber] // [0, 1, 2, 12]
```

[Spread syntax (...)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

## Classを作る

```js
class Pokemon {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  };

  // メソッド
  execSkill () {
    return `${this.name}は${this.skill}を繰り出した！`;
  };

  // 静的メソッド
  static eat () {
    return 'ポケモンは食事をしている'
  }
}

const pika = new Pokemon('ピカチュウ', '充満ぼると');
pika.execSkill()
// => "ピカチュウは充満ぼるとを繰り出した！"

Pokemon.eat()
// => "ポケモンは食事をしている"
```

> 静的メソッドは、アプリケーションのユーティリティ関数を作成するためによく使用されますが、静的プロパティは、キャッシュ、固定構成、またはインスタンス間で複製する必要のないその他のデータに役立ちます。

静的メソッドは、インスタンス化しなくても呼び出しすることができる。

[クラス](https://developer.cdn.mozilla.net/ja/docs/Web/JavaScript/Reference/Classes)

また、普段業務でClassを使わないが、お気に入りのNuxtJSも、　`nuxt.js/packages/core/src/nuxt.js`コアの部分はClassだったのでゆっくり勉強していきたい。

## Object Constructorを作る

```js
function Soldier(name, age) {
    this.name = name
    this.age = age;       
}  

const soldier = new Soldier("冒頓単于", 22);
soldier.name
// => 冒頓単于
```

## ユニークな配列を作る

```js
const fruits = ['🍎', '🍎', '🍊', '🍊']
const uniqueFruits = [...new Set(fruits)];
uniqueFruits
// => ["🍎", "🍊"]
```

## defalut valuesの代入

```js
function getUserConfig(config) {
  config.name = config.name || 'user'
  config.age = config.age || 18
  config.gender = config.gender || 'male'
  return config
}
```

```js
const config = { name: '曹操', age: 29 }
getUserConfig(config)
// => {name: "曹操", age: 29, gender: "male"}
```

リファクタリング後

```js
function getUserConfig(config) {
  const defaults = {
    name: 'user',
    age: 18,
    gender: 'male'
  }
  return Object.assign(defaults, config)
}
```

```js
const config = { name: '曹操', age: 29 }
getUserConfig(config)
// => {name: "曹操", age: 29, gender: "male"}
```

## Numberの最小値/最大値

```js
const numbers = [4, 5, 8, 2, 3]

console.log(Math.max(...numbers)) // 8
console.log(Math.min(...numbers)) // 2
```
## Sum an array

```js
const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;

console.log(myArray.reduce(reducer)); // 100  
```
## Objectを個別の変数に代入する

```js
const obj = { name: "name", age: 17 }
const { name, age } = obj
name
// => "name"
age
// => 17
```

## Replace All

```js
let fruits = "🍎 🍎 🍊 🍊";
console.log(fruits.replace(/🍎/, "🍊")); // 🍊 🍎 🍊 🍊
console.log(fruits.replace(/🍎/g, "🍊")); // 🍊 🍊 🍊 🍊
```

## Short Circuit Conditionals

```js
if (isShow) {
  show();
}
```

```js
isShow && show()
```

## Dynamic Property Names

```js
const dynamicKey = 'father';
let saiyan = {
    name: '孫悟空',
    [dynamicKey]: 'バーダック'
}
console.log(saiyan);
// { name: "孫悟空", father: "バーダック" }
```

## Use length to resize/empty an array

```js
var entries = [1, 2, 3, 4, 5, 6, 7];  
console.log(entries.length); 
// 7  
entries.length = 4;  
console.log(entries.length); 
// 4  
console.log(entries); 
// [1, 2, 3, 4]
```

```js
var entries = [1, 2, 3, 4, 5, 6, 7]; 
console.log(entries.length); 
// 7  
entries.length = 0;   
console.log(entries.length); 
// 0 
console.log(entries); 
// []
```

より高速に

```js
var fruits = ['🍎', '🍎', '🍊', '🍈'];
console.log(fruits.slice(0, 2)); // 最初の2つ ["🍎", "🍎"]
console.log(fruits.slice(-1)); // 最後 ["🍈"]
```

## 多次元配列を平坦化する(Flatten multidimensional array)

```js
var fruits = ['🍎', ['🍊', '🍊'], ['🥝', '🥝', ['🍌', '🍌'] ], '🍈'];

var flatFruits = fruits.flat(); // 1階層
console.log(flatFruits)
// ["🍎", "🍊", "🍊", "🥝", "🥝", Array(2), "🍈"]

var flatFruits = fruits.flat(2); // 2階層
console.log(flatFruits)
// ["🍎", "🍊", "🍊", "🥝", "🥝", "🍌", "🍌", "🍈"]

var flatFruits = fruits.flat(Infinity); // 全ての階層
console.log(flatFruits)
// ["🍎", "🍊", "🍊", "🥝", "🥝", "🍌", "🍌", "🍈"]
```

## ObjectのKeyの有無

```js
const obj = {}
Object.keys(obj).length // 0

const fruits = { orenge: '🍊', apple: '🍎' }
Object.keys(fruits).length // 2
```

## False Filter

```js
const fruits = ['🍊', null, undefined, 0, '0', '🍎', true, false];
fruits.filter(Boolean); // ["🍊", "0", "🍎", true]
```

## 条件式のショートカット

```js
// instead of
if (fruit.shape) {
  return fruit.shape;
} else {
  return '🍎';
}

// use
return (fruit.shape || '🍎');
```

## 参考

- [9 Extremely Powerful JavaScript Hacks](https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p)
- [10 JavaScript Hacks Every Web Developer Should Know](https://www.google.co.jp/amp/s/www.freecodecamp.org/news/javascript-hacks/amp/)
- [11 JavaScript Tricks You Won’t Find in Most Tutorials](https://medium.com/@bretcameron/12-javascript-tricks-you-wont-find-in-most-tutorials-a9c9331f169d)
- [45 Useful JavaScript Tips, Tricks and Best Practices](https://modernweb.com/45-javascript-tips-tricks-practices/)
- [MDN Hacks Blog](https://developer.cdn.mozilla.net/ja/)

JavaScriptのTipsをひたすら集める

## Math

Mathは数学を司る標準組み込みオブジェクトです。
定数や関数が搭載されています。

## Math.abs()

絶対値(Absolute value)を返します。absはabsolute: 絶対の意味を持つ。

```js
Math.abs(-10)
// 10
Math.abs(10)
// 10
```

※絶対値: 原点0からの距離をあらわす値のこと。

## Math.sign()

引数に渡された数値の符号を返します。Number以外はNaNが返ります。
数値の符号を取得したい場合に使用します。ちなみにsignは符号の意味を持つ。

```js
Math.sign(100)
// 1
Math.sign(-999)
// -1
Math.sign(0)
// 0
```

Math.abs()とMath.sign()の組み合わせ
絶対値と符号を掛け合わせる。

```js
var exampleFunc = function (x) {
  return Math.abs(x) * Math.sign(x)
}
exampleFunc(-100)
// -100
```

## Math.pow()

累乗の計算を行う。Power(累乗)の略。

```js
Math.pow(base, exponent)
Math.pow(2, 31) // 2147483648
Math.pow(-2, 31) // -2147483648
```

※累乗の指数
※冪乗の定義は、自然数・整数という縛りがない

## Math.trunc()

引数として与えた数の小数部の桁を取り除くことによって整数部を返します。
ちなみにtruncは切り捨ての意味です。

```js
Math.trunc(42.195)
// 42
```

## Math.floor()

与えられた数値以下の最大の整数を返します。

```js
Math.floor(5.9)
// 5
Math.floor(-5.9)
// -6
```

## 10進数と16進数の変換

16進数への変換は、`Number.prototype.toString(16)`

```js
Number(2147483647).toString(16) // "7fffffff"
Number(-2147483648).toString(16) // "-80000000"
// ※-2147483647はMath.pow(2, 31) - 1
```

先頭に`0x`を付けると、16進数であることを示している。付けないと構文上エラーが発生する。

16進数から10進数への変換は、`Number.parseInt("16進数", 16)`または、グローバルの`parseInt("16進数", 16)`

```js
parseInt("7fffffff", 16) // 2147483647
parseInt("-80000000", 16) // -2147483648
```

## マメ

符号付き32ビット整数は -2の32乗から2の32乗-1で表現される。

JSの最大値: `Number.MAX_SAFE_INTEGER`(9007199254740991)
JSの最小値: `Number.MIN_SAFE_INTEGER`(-9007199254740991)

※Numberの静的プロパティ
※Mathは数学でNumberは数値を扱う

## 参考

- [Math](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math)
- [Number](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number)

JavaScriptの組み込みオブジェクトMathを学ぶ

## はじめに

APIの呼び出しには、１分間に60回までなど制限があります。これを回避する為に、１回のAPI呼び出し毎に少し処理を止める実装を行いたいと思いました。

## コード

※jsonのデータをinsertしていたので、jsonをループさせています。

```js
async function exec() {
  for (let row of json) {
    insertRecord(row)
    await sleep(1100); // 1100ms眠らせる
  }
}

const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

exec() // 実行
```

JavaScriptでSleep処理の実装

## 基本形
```js
const arr = [1, 2, 3];

const asyncRes = await Promise.all(arr.map(async (i) => {
	await sleep(10);
	return i + 1;
}));

console.log(asyncRes);
// 2,3,4
```

- Array.map()を`Promise.all`で囲むことでイテレータ全体が返ってくるのを待ちます。

## FireStoreの例
この例では、Article一覧を取得し、Array.map関数の中で、Articleに紐づくWebsiteを取得しています。

```js
async function get(limit = 20) {
  const articlesRef = await db.collection('articles').limit(limit).get()
  const articles = await Promise.all(articlesRef.docs.map(async (articleRef) => {
    const article = articleRef.data()
    // Reference型なので、取得するには get() すれば良い
    const websiteRef = await article.website_id.get()
    const website = websiteRef.data()

    return {
      description: article.description,
      image_url: article.image_url,
      title: article.title,
      url: article.url,
      website: website
    }
  }))
  return articles
}
```

## 参考
- [How to use async functions with Array.map in Javascript](https://advancedweb.hu/how-to-use-async-functions-with-array-map-in-javascript/)

otの共同編集機能を見ていく

参考

関連記事