## 起動関連

### ビルド
```
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)

Rails 自己結合

```bash
Android resource linking failed
```

というエラーがずっと表示される。

解決策: `compileSdkVersion`と`targetSdkVersion`を合わせる。

```build.gradle
android {
    compileSdkVersion 29
    defaultConfig {
        minSdkVersion 23
        targetSdkVersion 29
    }
}
```

解決！

Android Android resource linking failed

`align="center"`を付与しても、`details`が高さに影響を与えるため、中央揃えにならず、`hide-details`をつける必要がある。

```js
<v-row align="center">
  ...
  <v-col>
    <v-text-field
      hide-details // 👈
      outlined
      dense
    ></v-text-field>
  </v-col>
  ...
</v-row>
```

v-text-filed 縦 中央 揃え

## 数式

1, 1, 2, 3, 5, 8, 13, 21.... と続いていく数式

$
Fn = Fn-1 + Fn-2 
$

## 関数
```js
function fib(n) {
  if (n === 0 || n === 1) {
    return 1;
  } else {
    return fib(n - 1) + fib(n - 2);
  }
}

// 出力
console.log(fib(0)); // 1
console.log(fib(1)); // 1
console.log(fib(2)); // 2
console.log(fib(3)); // 3
console.log(fib(4)); // 5
```


JavaScript フィボナッチ数列

```js
/**
 * @param {number[]} nums1
 * @param {number[]} nums2
 * @return {number}
 */
var findMedianSortedArrays = function(nums1, nums2) {
    let newNum = [...nums1, ...nums2];
    newNum.sort(function(a, b) {
      return a - b;
    });
    console.log("newNum:", newNum);
    let half = (newNum.length / 2) | 0;
    console.log("half:", half);
    if (newNum.length % 2) {
        return newNum[half]
    }
    return (newNum[half-1] + newNum[half]) / 2;
};
```

Median of Two Sorted Arrays

```js
// 作成
let users = new Map();

// 1つずつセット
users.set('1', { name: 'A', age: 19 });
users.set('2', { name: 'B', age: 18 });
users.set('3', { name: 'C', age: 20 });

console.log(users)
// Map(3) {'1' => {…}, '2' => {…}, '3' => {…}}

// sizeの取得
console.log(users.size);
// 3

// keys()でループ
for (let key of users.keys()) {
  console.log(key) // 1 ...
}

// values()でループ
for (let value of users.values()) {
  console.log(value) // {name: 'A', age: 19} ...
}

// 一括作成
let userIds = new Map([[ "1", "A" ], ["2", "B"], [ "3", "C" ]]);
// Map(3) {'1' => 'A', '2' => 'B', '3' => 'C'}

// userIdsからvalue取得
for (let key of userIds.keys()) {
  // 要素の取得
  console.log(users.get(key)); // {name: 'A', age: 19} ...
}

// keyをまとめる
console.log(Array.from(users.keys()));
//  ['1', '2', '3']

// valueをまとめる
console.log(Array.from(users.values()));
//  [{…}, {…}, {…}]
```

- キーオーダー
- **キーと値のペアを頻繁に追加および削除するシナリオでは、パフォーマンスが向上します。**

[Map - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)

JavaScript Map Object 使い方

## ドキュメント

- [API Routes: Introduction | Next.js](https://nextjs.org/docs/api-routes/introduction)
- [HTTP リクエストメソッド - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)

## 実装

```js
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  switch (req.method) {

  case 'GET':
    res.status(200).json({ message: 'GET' })
    break

  case 'POST':
    res.status(200).json({ message: 'POST' })
    break

  case 'PATCH':
    res.status(200).json({ message: 'PATCH' })
    break

  case 'DELETE':
		res.status(200).json({ message: 'PATCH' })
    break

  default:
    res.status(405).end()
    break
  }
}
```

## API呼び出し

axiosを使用し、API を呼び出します。

```bash
yarn add axios
```

```js
// GET Method
await axios.get('/api/user', {
  params: {
    id: userId
  }
})

// POST Method
await axios.post('/api/user', {
	id: userId
})

// PATCH Method
await axios.patch('/api/user', {
	id: userId
})

// DELETE Method
await axios.delete('/api/user', {
  params: {
    id: userId
  }
})
```

- GET と DELETE は、リクエストのクエリに値を持つことができます（Bodyには含めることができません）
- POST と PATCH は、Bodyに値を持つことができます

`getServerSideProps`で API Routes を呼び出すのはあまりよくなさそうです 🤔

[use getStaticProps with /api routes · Discussion #16068 · vercel/next.js](https://github.com/vercel/next.js/discussions/16068)

## 値の取得

```js
const { id } = req.query // GET DELETE
const { id } = req.body // POST PATCH
```

## NextAuth

NextAuthを使用している場合は、sessionからuserIdを呼び出すこともできます。

- [Securing pages and API routes | NextAuth.js](https://next-auth.js.org/tutorials/securing-pages-and-api-routes#using-getsession)

```js
import type { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from 'next-auth/client'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const session = await getSession({ req })

  if (!session?.user?.id) {
    res.status(401).send({ message: 'Unauthorized' })
    return
  }

  const userId = session.user.id
}
```

sessionにuserIdを含めるには、 `pages/api/auth/[...nextauth].ts`の `callbacks.session` を変更します。

- [Callbacks | NextAuth.js](https://next-auth.js.org/configuration/callbacks#session-callback)
- [How to get userId on api Endpoints while using next-auth · Discussion #536 · nextauthjs/next-auth](https://github.com/nextauthjs/next-auth/discussions/536)

```js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/server/prismaClient'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        user: {
          ...session.user,
          id: user.id // 👈 ココ
        }
      })
    }
  }
})
```

Vercel

Next.js API Routes で REST API 実装

```js
const subscription = await stripe.subscriptions.retrieve(
  "sub_xxxx", // Userモデルに保存したsubscriptionId
);

const params = {
  items: [
    {
      id: subscription.items.data[0].id,
      plan: "price_xxxx", // 新しいプラン
    },
  ],
};

const updatedSubscription = await stripe.subscriptions.update(
  "sub_xxxx", // Userモデルに保存したsubscriptionId
  params,
);
```

[Stripe API Reference - Update a subscription - cURL](https://stripe.com/docs/api/subscriptions/update?lang=node)

Node.js Stripe Subscription 更新

顧客の更新`customers.update`のオプションで、`invoice_settings.default_payment_method`に`PaymentMethod.id`を渡してあげると、デフォルトのお支払い方法が設定される。

```js
const customer = await stripe.customers.update('cus_xxx', {
  invoice_settings: {
    default_payment_method: 'pm_xxx',
  },
});
```

[支払いの詳細を更新する](https://stripe.com/docs/payments/checkout/subscriptions/update-payment-details#set-default-payment-method)

[Stripe API reference – PaymentMethods](https://stripe.com/docs/api/payment_methods)