React　で list 表示をする際には、keyを設定し、その値で rendering の挙動を変えています。

useState で配列が頻繁に変更される場合に、index を使用する場合 rendeing　の挙動がおかしくなります。そのため各要素に緩いユニークを付与します。

```ts
const createId = (): string => {
  const tmpId: string = new Date().getTime().toString(16)
  return `list-${tmpId}`
}

createId()
```

[リストと key – React](https://ja.reactjs.org/docs/lists-and-keys.html#keys)

React の List 表示のために緩くユニークなIDを作成する

- LGTM: Looks Good To Me 良いと思います
- IMO: In My Opinion
- WIP: Work in progess　作業中です
- FYI: For Your Information 参考までに
- nits: 細かいことだけど
- type: スペルミス

こんな感じでPull Request作ったり

```
[WIP] ~~
```

コメントされたりする。

```
[nits]~~
```

Review時やPull Request に使用される略語

[axios/index.d.ts at 6b4fd93e6886c281ef1a51fca556616ce17f8fba · axios/axios](https://github.com/axios/axios/blob/6b4fd93e6886c281ef1a51fca556616ce17f8fba/index.d.ts)

```ts
import axios, { AxiosRequestConfig } from 'axios';

const requestParam: AxiosRequestConfig = {
  method: 'get',
  url: `${process.env.NEXT_PUBLIC_API_ENDPOINT}/users`,
  headers: {
    Authorization: `Bearer ${accessToken}`,
  },
};

const { data }: any = await axios(requestParam);
```

axiosの型メモ

## Gitのバージョンアップ

```sh
git --version

brew install git

git --version
```

## Gitのデフォルトブランチ名をmain変更

```sh
git config --global init.defaultBranch main
```

## ユーザー設定

```bash
git config --global user.name "John Doe"
git config --global user.email johndoe@example.com
```

## alias設定

```bash
# system
git config --system alias.co checkout
git config --system alias.br branch
git config --system alias.cm commit
git config --system alias.st status
# global
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.cm commit
git config --global alias.st status
# local
git config --local alias.co checkout
git config --local alias.br branch
git config --local alias.cm commit
git config --local alias.st status
```

## config確認

```bash
# local
cat {repo}/.git/config
# global
/Users/user/.gitconfig
# system
cat /usr/local/etc/gitconfig
```

### .gitconfigが無い場合

```bash
rm ~/.gitconfig
touch ~/.gitconfig
```

## リモートリポジトリの確認

```bash
git remote -v
```

追加

```sh
git remote add origin {url}
```

変更

```sh
git remote set-url origin {url}
```

## ローカルの直前コミットを戻す

```bash
git reset --soft HEAD^
```

合わせて、ステージを戻す

```bash
git reset
```

## リモートの直前コミットを戻す

```bash
git reset --hard HEAD^
```

```bash
git push origin +master
git push origin +develop
```

上記は履歴が残らないので、履歴を残したい場合は、`revert`を使いましょう。

## マージ済ブランチの削除

```bash
git branch -D `git branch --merged | grep -v \* | xargs`
```

## 特定のコミットを打ち消す

ログを調べて、コミットのハッシュを特定する。

```bash
git log
tig
```

```bash
git revert {ハッシュ値}
```

## ブランチ名の変更

```bash
git branch -m <古いブランチ名> <新しいブランチ名>
git push origin :<古いブランチ名> # ついでに削除
```

## unstagedファイルを削除

```bash
git clean
git clean -f # 強制
git clean -df # ディレクトリも含める
```

## 特定のファイルを特定のコミットに戻す

```bash
git checkout [コミット番号] [ファイルパス]
```

## GitHub SSH接続

- SSHキーを作成し、`~/.ssh/config`に記載、GitHubにSSH公開鍵を設定する。

## GitHub でパスワードを変更した後
```bash
git config --global user.name <username>
git pull # なんでも良い
```

を実行し、パスワードを聞かれるので、入力する。

## Personal Access Token設定後のMac設定

```bash
 $ git credential-osxkeychain erase ⏎
 host=github.com  ⏎
 protocol=https   ⏎
 ⏎
 ⏎
```

```bash
git fetch
```

[How do you reset the stored credentials in 'git credential-osxkeychain'?
](https://stackoverflow.com/questions/11067818/how-do-you-reset-the-stored-credentials-in-git-credential-osxkeychain)

## credential-osxkeychainの設定

```bash
git credential-osxkeychain
```

認証アシスタントがインストールされていない場合は、以下の内容が表示されます。

```bash
git: 'credential-osxkeychain' is not a git command. See 'git --help'.
```

この時点で、認証アシスタントを正しいパスにダウンロードすることができます。

```bash
curl -s -O http://github-media-downloads.s3.amazonaws.com/osx/git-credential-osxkeychain
chmod u+x git-credential-osxkeychain
mv git-credential-osxkeychain /usr/local/bin
```

インストール後、オープン認証アシスタントの設定を行います。

```bash
git config --global credential.helper osxkeychain
```

[GitHub for Mac error: git: 'credential-osxkeychain' is not a git command](https://stackoverflow.com/questions/13661354/github-for-mac-error-git-credential-osxkeychain-is-not-a-git-command/55060030)

## Rebase
```sh
git rebase [つなぐ元にするブランチ名]
git rebase origin/[つなぐ元にするブランチ名]
# コンフリクト解消
git rebase --continue
```

## 元ブランチの確認

```sh
git show-branch
```

## git blame
行ごとに差分を見る

```
git blame <paths>
```

## 大文字と小文字のファイル検知

```
$ git config -l --local | grep core.ignorecase
core.ignorecase=true
これをfalseにしてあげたらOK.

$ git config core.ignorecase false
```

## Tagの利用

```
git tag v1.0.0
git push --tags
```

## git管理から削除

```bash
git rm client/.env
```

## 直前のコミットの修正

```sh
git commit --amend -m "修正するコメント"
```

Gitの使い方まとめ

## Document

- [hokaccha/nodebrew: Node.js version manager](https://github.com/hokaccha/nodebrew)

## Install for MacOS

```sh
brew install nodebrew
nodebrew -v
# これを設定しないと Node をインストールできない
nodebrew setup
```

`.zshrc`に`PATH`を追記する。

```.zshrc
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

```sh
source ~/.zshrc
where node
# /Users/user/.nodebrew/current/bin/node
```

### Uninstall

```sh
brew uninstall nodebrew
```

`.zshrc`の`PATH`を戻す。

## Usage

### インストール可能なバージョンの確認

```sh
nodebrew ls-remote
```

### インストールされたバージョンの確認

```sh
nodebrew ls
```

### 特定のバージョンのインストール

```sh
nodebrew install v14.18.2
nodebrew install v16.13.0
```

### 特定のバージョン削除

```sh
nodebrew uninstall v14.18.2
nodebrew uninstall v16.13.0
```

### 特定のバージョンの使用

```sh
nodebrew use v14.18.2
node -v
```

## Warning

`PATH`を設定して、`use`を使用してもバージョンが切り替わらない場合は、nodeのbinaryがない場合があるので、一度`uninstall`してから、`install`する。

nodebrewでnodeのバージョン切り替え

今回は、Nuxt.js×markdown-itで記事を表示する方法を解説しています。
markdown-itを使用すると、取得したMarkdownデータを簡単に変換することができます。

## @nuxtjs/markdownitをインストールする

[@nuxtjs/markdownit](https://www.npmjs.com/package/@nuxtjs/markdownit)をインストールします。
[markdown-it/markdown-it](https://github.com/markdown-it/markdown-it)を拡張したNuxtモジュールです。

```bash
yarn add @nuxtjs/markdownit
```

## nuxt.config.jsの設定

`nuxt.config.js`にmarkdow-itのオプションを書いていきます。

```js
{
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true // $md.render()がグローバルで使えるようになる
  }
}
```

## VueファイルでMarkdownを変換する

`injected: true`を設定したので、Vueファイルで変換する準備ができました。
` v-html="$md.render()"`で変換を行います。

```js
<template>
  <div v-html="$md.render(markdown)"></div>
</template>

<script>
export default {
  data() {
    return {
      markdown: '# Hello World!'
    }
  }
}
</script> 
```

以上で基本的な変換設定はおわりです。

## おすすめのプラグイン

### 目次の生成

- markdown-it-table-of-contents
- markdown-it-anchor

```bash
yarn add markdown-it-table-of-contents markdown-it-anchor
```

```js
export default {
  markdownit: {
    injected: true,
    // プラグインを使用する場合、ここに書いていきます
    use: [
      "markdown-it-anchor",
      [
        "markdown-it-table-of-contents",
        {
          includeLevel: [1, 2], // 目次で生成する<h>タグ
        },
      ],
    ]
  },
}
```

`markdown-it-table-of-contents`は、目次を自動生成してくれるプラグインで、
`markdown-it-anchor`は、リンクをクリックすると、その場所まで移動してくれるプラグインです。
\
変換データの中に`[[toc]]`を書くと、指定した`<h1>`タグなどから目次を生成してくれます。

### `<a>`タグのの設定

- markdown-it-link-attributes

```bash
yarn add markdown-it-link-attributes
```

```js
export default {
  markdownit: {
    injected: true,
    use: [
      [
        "markdown-it-link-attributes",
        {
          attrs: {
            target: "_blank",
            rel: "noopener noreferrer",
          },
        },
      ],
    ]
  },
}
```

`markdown-it-link-attributes`は、オプションに書いた`attributes`を`<a>`に追加してくれます。

上記の設定の場合、`[リンクテキスト](リンク)`から以下のようなHTMLが生成されます。

```html
<a href="/" target="_blank" rel="noopener noreferrer">リンクテキスト</a>
```

主に重宝しているのは、上記の3つのプラグインです。

<div class="sen"></div>

この他にも、YoutubeやSoundCloudをいい感じに変換してくれるプラグインやCSSをいい感じに変換してくれるプラグインなどたくさんのプラグインが公開されています。気になる方は[markdown-it プラグイン](https://www.npmjs.com/search?q=keywords:markdown-it-plugin)から調べてみてください。
\
また、[markdown-it](https://github.com/markdown-it/markdown-it)を拡張したり、パーサーを１から作るというのも一手かもしれません！


今回は、Nuxt.js×markdown-itで記事を表示する方法を解説しています。
markdown-itを使用すると、取得したMarkdownデータを簡単に変換することができます。

NuxtJS

Nuxt.js×markdown-itで記事を表示する方法

```js
const getLengthOfOptiomalCompression = function(str) {
  if (str.length === 0) {
    console.log('Please enter valid string.');
    return;
  }

  let output = '';
  let count = '';
  for (let i = 0; i < str.length; i++) {
    count++;
    if (str[i] !== str[i+1]) {
      output += str[i] + count;
      count = 0;
    }
  }
  console.log(output);
}

getLengthOfOptiomalCompression('aaaa');
getLengthOfOptiomalCompression('aaaabbccddd');

```

JavaScript Run-length encoding

[Rigellute/spotify-tui: Spotify for the terminal written in Rust 🚀](https://github.com/Rigellute/spotify-tui)

[Spotifyd/spotifyd: A spotify daemon](https://github.com/Spotifyd/spotifyd)

## 設定

```bash
brew install spotify-tui
spt
```

[Connecting to Spotify’s API](https://github.com/Rigellute/spotify-tui#connecting-to-spotifys-api) API と接続する。

```bash
brew install spotifyd
brew services start spotifyd
```

Good

![spotify-tui](//images.contentful.com/0jyj5pjwic68/6ypzIfgQSdAnCpqwlWjAqR/631962ac1adec6f7a1d17ed365f883cc/____________________________2021-10-19_22.53.09.png)

macOS spotify-tui で terminal から spotify を聞く

## 起動関連

### ビルド
```
docker build .
```

### イメージ名/タグ名の変更
```
# イメージの確認
docker images
docker tag {イメージID} {イメージ名}:{タグ}

# 例
docker tag {イメージID} app:latest
```

## 削除関連

### Volume 削除
確認
```
docker volume ls
```

```
docker volume rm {Volume_ID}
```

全部削除
```
docker volume rm $(docker volume ls -qf dangling=true)
```

リンク切れ削除
```
docker volume ls -qf dangling=true | xargs -r docker volume rm
```

### Contaniner 削除
コンテナ削除

```
docker rm {コンテナID}
```

強制終了
```
docker kill 
```

すべてのコンテナを停止する
```
docker stop $(docker ps -q)
```

### Images 削除

```
docker images
```

```
docker rmi {IMAGE_ID}
```

```
docker image prune
```

## 全削除

```bash
docker system prune
```

## 参考
- [How To Remove Docker Images, Containers, and Volumes | DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes)
- [Dockerのイメージ、コンテナおよびボリュームを削除する方法 - DigitalOcean](https://www.digitalocean.com/community/tutorials/how-to-remove-docker-images-containers-and-volumes-ja)
- [使用していない Docker オブジェクトの削除（prune）](https://docs.docker.jp/config/pruning.html)

Docker

Docker操作まとめ

- [クロージャ - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)
- [You-Dont-Know-JS/README.md at 2nd-ed · getify/You-Dont-Know-JS](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md)

> クロージャは「関数」と「その関数が作られた環境」という 2 つのものの組み合わせです。

```js
function makeFunc(name) {
  return function(age) {
    return `${name}の年齢は、${age}ですね！`;
  };
}

const func1 = makeFunc("田中太郎");
const func2 = makeFunc("山田太郎");

console.log(func1(22)); // 田中太郎の年齢は、22ですね！
console.log(func2(23)); // 山田太郎の年齢は、23ですね！
```

## クロージャでプライベートメソッドの模倣

```js
// Module Pattern
const counterModule = (function() {
  let count = 0;

  return {
    increment: function() {
      count++;
    },
    show: function() {
      console.log(count);
    }
  };
})();

counterModule.show(); // 0
counterModule.increment();
counterModule.show(); // 1
console.log(count); // ReferenceError: count is not defined
```

[IIFE (Immediately Executed Function Expression) --MDN Web Docs Glossary: Definition of Web-related Terms | MDN](https://developer-mozilla-org.translate.goog/ja/docs/Glossary/IIFE?_x_tr_sl=ja&_x_tr_tl=en&_x_tr_hl=en&_x_tr_pto=nui,sc)

Bad Case:

> アロー関数 call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。

[アロー関数式 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

JavaScript Closure

```js
str = "http://example.com";
str = str.replace("http://", "https://");

console.log(str);
// "https://example.com"
```

正規表現で先頭だけでも良いかも

JavaScript http https replace

```js
let lastElement = array.slice(-1)[0];
// or 
let lastElement = array[array.length - 1];
```

JavaScript 配列の最後の要素 取得

```js
const str = "-";
const valid = /^[0-9a-zA-Z\-]*$/.test(str);

console.log(valid);
// true
```

JavaScript 半角英数字ハイフンのみ

```js
// 予約リスト(APIから取得した想定)
const reservationList = [
  { startTime: new Date('2021-10-01 09:00:00'), endTime: new Date('2021-10-01 10:00:00') },
  { startTime: new Date('2021-10-01 10:00:00'), endTime: new Date('2021-10-01 11:00:00') },
  { startTime: new Date('2021-10-01 14:00:00'), endTime: new Date('2021-10-01 15:00:00') },
];

/**
 * 予約可能かを判定して返す
 * 予約リストにレコードがない場合は、予約できる true
 * 予約リストにレコードがある場合は、予約できない false
 * @param {Object} params
 * @param {Date} params.startTime - 予約の開始時間
 * @param {Date} params.endTime - 予約の終了時間
 * @returns {boolean}
 */
function searchReservation(params) {
  const { startTime, endTime } = params;

  let canReserve = true;
  for (reservation of reservationList) {
    // 予約可能な条件の逆の場合、予約できないフラグを立てる
    if (!((reservation.endTime <= startTime) || (endTime <= reservation.startTime))) {
      canReserve = false;
      break; // falseになった場合、ループを終了する
    };
  }
  return canReserve;
};

// 実行
// 予約が埋まっていない場合、true
console.log(searchReservation({
  startTime: new Date('2021-10-01 11:00:00'),
  endTime: new Date('2021-10-01 12:00:00')
})); // true

// 予約が埋まっている場合、false
console.log(searchReservation({
  startTime: new Date('2021-10-01 09:00:00'),
  endTime: new Date('2021-10-01 10:00:00')
})); // false
```

JavaScript カレンダー予約の重複チェック

設定

```user.rb
has_many :childs, class_name: "User", foreign_key: "parent_id"
belongs_to :parent, class_name: "User", optional: true
```

取得

```rb
user = User.find(1)
user.childs # 子を取得
user.parent # 親を取得
```

FactoryBot

```rb
# 親
　parent = FactoryBot.create(:user)

# 子
ambassador_child = FactoryBot.create(
  :user,
  parent_id: parent
)
```

ridgepole

```rb
t.integer "parent_id", null: true, commnet: "親のID"
t.index ["parent_id"], name: "parent_id"
```

[Active Record の関連付け - Railsガイド](https://railsguides.jp/association_basics.html#%E8%87%AA%E5%B7%B1%E7%B5%90%E5%90%88)