OmniAICreator/Qiita-1.07M huggingface dataset:
【S】String.sliceで文字列の一部分を取り出す

「一部抜き出すやつなんだっけ……」ってなりすぎです、いい加減学んでください僕

## 回答

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/slice

## 前n文字を消す

`String.prototype.slice(n)`

```javascript:slice-1.js
"あいうえお".slice(2) // => "うえお"
```

## 後ろn文字だけ残す

`String.prototype.slice(-n)`

```javascript:slice-1.js
"あいうえお".slice(-2) // => "えお"
```

## 前n文字を残して、更に前m文字を消す

`String.prototype.slice(m, n)`

```javascript:slice-1.js
"あいうえお".slice(1, 4) // => "いうえ"
```

## 後ろn文字を残して、更に後ろm文字を消す

`String.prototype.slice(-n, -m)`

```javascript:slice-1.js
"あいうえお".slice(-4, -2) // => "いう"
```
【p5.js】奇抜な時計を作ったら読みにくい件について

# 前作
https://qiita.com/NekoCan/items/e812924204ca1c89c8c5

無難な針時計を作ったので他の時計も作ってみたくなった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/5f5e8215-5898-6e9d-7641-68eadfd2ac1a.png)


# 振り子時計を作ってみた
## きっかけ
時計と言えば振り子時計が思い付いた
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/be53b9f6-f09b-a9aa-42ca-0dc26a62ad71.png)](https://www.irasutoya.com/2014/03/blog-post_6983.html)


ので、振り子だけでデジタル表記の時計を作れないか画策

## そしてできたものがこちら

https://openprocessing.org/sketch/1524274

![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/7505b443-16a1-cb06-7e08-41e39b4dbdee.gif)

**な　ん　か　や　だ**

上から順番に
- 時間振り子（12時間表記）
- 分振り子
- 秒振り子
が揺れています

振り子の揺れ具合で、大まかな時間を ~~読めもしない~~把握できるのはアナログ時計と一緒で
細かな時間はデジタル表記で把握できるという~~不便さ~~優れもの

# ソースコード
コードはリンク先の`pendulum clock`のタブに

https://openprocessing.org/sketch/1524274
rails s(rails server)でエラーENOENTが出た件

前提です

railsを導入して、rails sやろうと思った矢先に出たエラーです

初歩的すぎるのか、ネットで調べても出なかったので、載せようと思います。
初心者でつまずく人もいるんじゃないでしょうか。

<h2>問題点</h2>
アプリケーション内でrails sを起動してもエラーが出てしまう。

以下、環境


OS:Windows11
Ruby:3.1.3p185 (2022-11-24 revision 1a6b16756e) [x64-mingw-ucrt]
Rails:7.0.4


以下エラーコード

```題名

C:\Users\user\sample_app>rails s

C:/Program Files/Ruby31-x64/lib/ruby/gems/3.1.0/gems/railties-7.0.4/lib/rails/app_loader.rb:53:in `exec': No such file or directory - 
"C:/Program Files/Ruby31-x64/bin/ruby.exe" (Errno::ENOENT)
        from C:/Program Files/Ruby31-x64/lib/ruby/gems/3.1.0/gems/railties-7.0.4/lib/rails/app_loader.rb:53:in `block in exec_app'
        from C:/Program Files/Ruby31-x64/lib/ruby/gems/3.1.0/gems/railties-7.0.4/lib/rails/app_loader.rb:48:in `loop'
        from C:/Program Files/Ruby31-x64/lib/ruby/gems/3.1.0/gems/railties-7.0.4/lib/rails/app_loader.rb:48:in `exec_app'
        from C:/Program Files/Ruby31-x64/lib/ruby/gems/3.1.0/gems/railties-7.0.4/lib/rails/cli.rb:7:in `<top (required)>'
        from <internal:C:/Program Files/Ruby31-x64/lib/ruby/3.1.0/rubygems/core_ext/kernel_require.rb>:85:in `require'
        from <internal:C:/Program Files/Ruby31-x64/lib/ruby/3.1.0/rubygems/core_ext/kernel_require.rb>:85:in `require'
        from C:/Program Files/Ruby31-x64/lib/ruby/gems/3.1.0/gems/railties-7.0.4/exe/rails:10:in `<top (required)>'
        from C:/Program Files/Ruby31-x64/bin/rails:25:in `load'
        from C:/Program Files/Ruby31-x64/bin/rails:25:in `<main>'
```


<h2>原因</h2>

ダウンロードした**Ruby**のフォルダを、Cドライブのprogram files配下に置いていたのが原因。

<h2>解決策</h2>
RubyフォルダをCドライブに直接配置することで解決
GitのエディタにVSCodeを設定する方法

# はじめに
私は普段、Visual Studio Code（以下VSCode）エディタを用いて開発を行っていますが、
ターミナルで`git commit`実行時にエラーが発生しVSCodeエディタが立ち上がらず困りました。
そこでVSCodeを用いてコミットメッセージが入力出来るように設定手順を解説します。
前提として、Gitはローカル環境にインストールした状態で読み進めてください。

# 環境
- MacBookPro
- VSCodeバージョン：1.74.0

# 解決方法
## GitのエディタにVSCodeを設定する
まず、VSCodeをGitのエディタとして設定します。
以下のコマンドをターミナルで実行します。
```
$ git config --global core.editor "code --wait"
```
では、GitのエディタとしてVSCodeが設定されたか確認してみましょう。
以下のコマンドをターミナルで実行します。
```
$ git config core.editor
```
以下のように表示されていればOKです。
```
code --wait
```
これで無事設定が出来た！と思いきや、
`git commit`とコマンドを打つと以下のようなエラーが表示されてしまうんですね。。。
```
hint: Waiting for your editor to close the file... code --wait: code: command not found
error: There was a problem with the editor 'code --wait'.
Please supply the message using either -m or -F option.
```
上記の解決方法について、次で解説します。

## VSCodeの設定
まず、VSCodeを起動します。
起動できたら「コマンドパレット(⇧⌘P)」(or「表示」>「コマンドパレット」)の入力欄に「shell command」と入力し、
下図のような選択肢が出てきたら「シェルコマンド:PATH内に'code'コマンドをインストールします」を選択しインストールを実行します。
![shell command.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349936/bc84e9d4-f4ab-b012-7c6e-9004b6e46d82.png)
![shell command完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349936/e62b2719-9518-2a07-25ed-7ddf7da926b1.png)
続いて、以下のコマンドをターミナルで実行し、表示されたパスをコピーします。
```
$ which git
```
VSCodeで「⚙」>「①設定(⌘,)」をクリック、「②git path」と検索、「③settings.jsonで編集」をクリックします。
![git path設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349936/2d2d5b8c-fbff-4cb8-3e9c-bfba9bfd2b95.png)
編集画面にて以下のコードを追加します。
パス部分に先ほどターミナルでコピーしたご自身のパスをペーストし、保存してしてください。
```json:settings.json
"git.path": "/usr/bin/git"
```
以上で全ての作業が完了です。
お疲れ様でした。

# まとめ
`git commit`してもVSCodeが開かない時は、以下のコマンドで現在設定しているエディタを一度確認してみましょう。
```
$ git config core.editor
```
# Git 公式ドキュメント:
https://git-scm.com/docs/git-config

# あとがき
最後までご覧いただきありがとうございました！

初めての作業ってすごく緊張しますよね。
ましてやそこでエラーが発生したりした時には、オロオロしてしまったり。。。
そんな時こそ焦らずに調べながら、少しずつ作業を進める余裕を持ちたいですね。
この記事が少しでも皆様のお役に立てれば幸いです。
【R】RowとColumn、どっちがどっちかわからなくなった人のための情報

どっちだよ、ってなるよね〜〜
僕もなるので書きます

## 行と列

- Enterキーを押して**改行**しますね？

## RowとColumn

- EnterキーはReturnキーとも呼ばれますが、ReturnとRowのRが対応してると考えればいいと思います。
- 要素をn個横並びに置くやつを「nカラム」と呼んだりしますね

---

体が覚えるまで間違えよう
【Q】querySelectorの使い勝手が良くて好き

JavaScriptで特定の要素を弄り倒したい！！っていうときの備忘録

## よく紹介されがちなやつ

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

`document.getElementById(id)`が紹介されていることが多い気がするし、初めて出会ったのはこれだった覚えがある。
これ、idがついてない要素にさわれないというデメリットがある。

## そこでこれだよ

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

`document.querySelector(selector)`ならCSSセレクタで要素を持ってくることができる。
idがついてなくても最悪クラスとかでたどり着ける

なお、指定したselectorに該当する要素が複数ある場合は最初のものが返される

## 複数扱いたい場合

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

`document.querySelectorAll(selector)`でNodeListをもらおう
Goでベンチマークテスト

# 概要
この記事は、[CyberAgent PTA Advent Calendar 2022](https://adventar.org/calendars/7539)の12日目の記事です。
広告プロダクトチームでサーバーサイドエンジニアをやっています。
Golangの広告プロダクト実装において、システムパフォーマンスも意識しながら実装をしていたため、今回はGoにベンチマークテストについて書きます。

# Go Benchmark
Goのtestingパッケージには、ベンチマークを行う機能が提供されています。
```go
func BenchmarkXxx(*testing.B)
```
のように、関数の接頭辞に`Benchmark`を付けることで、ベンチマークテスト用の関数として見なされます。
`go test`に`-bench`フラグを付けることで実行可能です。

ベンチマーク用関数のサンプルは下記で、
```go
func BenchmarkRandInt(b *testing.B) {
    for i := 0; i < b.N; i++ {
        rand.Int()
    }
}
```
b.N回実行されるようになっていて、
下記のような実行結果が出力されます。
```
BenchmarkRandInt-8   	68453040	        17.8 ns/op
```
ループあたり17.8nsの速度で、68453040回実行されたことを意味しています。

## オプション
いくつかのオプションが用意されていて、より詳細な情報を出力することもできます。
`-benchmem`はメモリの情報を出力できるので、おすすめ。
`-cpu`, `-benchtime`, `-cpuprofile`などいくつかあります。
詳細はこちら: https://pkg.go.dev/cmd/go#hdr-Testing_flags


# ベンチマークテストしてみる
```go
import (
	"fmt"
	"strconv"
	"testing"
)

func BenchmarkA(b *testing.B) {
	for i := 0; i < b.N; i++ {
		testA(i)
	}
}

func BenchmarkB(b *testing.B) {
	for i := 0; i < b.N; i++ {
		testB(i)
	}
}

func testA(num int) string {
	return strconv.Itoa(num)
}

func testB(num int) string {
	return fmt.Sprintf("%d", num)
}
```
`strconv.Itoa`と`fmt.Sprintf`を比較するテストを書いてみました。

`go test -bench . -benchmem`で実行します。

```
BenchmarkA-8    47877226                24.79 ns/op            7 B/op          0 allocs/op
BenchmarkB-8    15777586                76.22 ns/op           16 B/op          1 allocs/op
```
`strconv.Itoa`は、ループ当たり24.79nsの速度で、47877226回実行でき、
`fmt.Sprintf`は、ループ当たり76.22nsの速度で、15777586回実行できたことが分かりました!
Box×Salesforce×Slack活用のススメ

# はじめに
これまで、BoxとSalesforceの連携やBoxとSlackの連携についていくつか記事を書かせていただきました。
* [Boxとの連携でSalesforceをより便利に活用しよう(Box for Salesforce)](https://qiita.com/kamadhi/items/006626ddb0b66a70e902)
* [Box×Salesforce活用のススメ](https://qiita.com/kamadhi/items/bcada53ca82d9aa7403a)
* [Box×Slack活用のススメ(初級編)](https://qiita.com/kamadhi/items/5c58269e5975c9c53a62)

今回はいよいよ全部連携させた時にどんな業務の仕方が実現できるのかを書いてみます。

# 目次
1. SalesforceとSlackの連携
2. SalesforceとSlackの連携で利用したツール(SkyVisualEditor(テラスカイ様))
3. Box・Salesforce・Slack連携イメージ
4. Box・Salesforce・Slack連携させた時にこんな使い方ができるよ！
5. まとめ


# 1. SalesforceとSlackの連携
SalesforceとSlackについては様々な情報が出てくるので、ここでは軽くしか触れませんが、ざっくりと
* Slack上でSalesforceのレコード情報を検索
* Slack上でSalesforceのレコード情報の更新を検知する
* Salesforce上にSlackのメッセージを取り込む

ということができるようになります（もっとたくさんできることはあります！）

https://www.salesforce.com/jp/products/slack/customer-360-integrations/

# 2. SalesforceとSlackの連携で利用したツール(SkyVisualEditor(テラスカイ様))
上記は無償で連携できるのですが、今回はテラスカイ様の「SkyVisualEditor」を試してみました。

https://info.skyvisualeditor.com/

「SkyVisualEditor」は、コーディングなしでSalesforceの画面を開発することができる素晴らしいツールです。今回は「SkyVisualEditor」の数ある機能のうちSalesforce画面上にSlackのチャンネルを埋め込むSlack連携機能を試してみました。

https://www.terrasky.co.jp/news/2022/05/sve-slack-api.php

# 3. Box・Salesforce・Slack連携イメージ

連携させるとSalesforce画面上にBoxのフォルダとSlackチャンネルが埋め込まれます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/e154b7a1-3650-2bd0-56a7-5a91e2f243e2.png)


# 4. Box・Salesforce・Slackを連携させた時にこんな使い方ができるよ！
### Salesforceレコード上でコミュニケーションとコンテンツのやり取りをシームレスに実現

①確認したい/更新したいSalesforceレコードにアクセス
②メンバーに知らせたいコンテンツがあるときはBoxからその場で共有リンクを発行 / コンテンツが欲しいときはファイルリクエストURLを発行
③上記をSlackへ投稿

これで3つのシステムをいちいち切り替えることなくBoxの情報(非構造化データ)、Salesforceの情報(構造化データ)、そしてSlackでのコミュニケーションが実現できますね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/78527dfd-251d-3471-0e46-cadb1c3dec7e.png)

### お客様との面談録画を見ながらコミュニケーション・レコード更新
① Boxのプレビュー機能を利用して、Zoom録画ファイルなどお客様との面談録画をSalesforceレコード上で再生
② 気づいたことやチームに共有したいことを面談録画を見ながらSlack上でコミュニケーション
③ お客様の言葉に合わせてその場でNextstep記載や提案する商品の変更など、Salesforceレコードを更新

面談録画を見ながらSlackを送りたい、レコードを更新したい、何度も録画を見返すのはしんどい、、ということきっとあると思います。
1つの画面上で全てが完結するのがいいですね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/648c3ea4-877b-02bc-7fe1-126474fa34b6.png)

### お客様との面談録画を見ながらコミュニケーション・レコード更新
① Slack上にメンバーがファイルを添付して送信
② [こちらの機能](https://support.box.com/hc/ja/articles/4415585987859-Slack%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%81%A8%E3%81%97%E3%81%A6Box%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B)を利用して、Slack上に添付されたファイルをBoxに自動で格納
③ ファイルを確認してレコード更新や、Slackチャンネルへ入っていないメンバーを含めた全社へ連絡したい場合にChatterでその場で通知

Slack上に添付されたファイルをBoxへ自動的に格納することで、すべてのコンテンツがBoxに溜まっていき、あらゆるシステムで活用できるコンテンツプラットフォームができますね。Boxの中の情報を中心としてSalesforceの更新や全社共有を実現してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986270/2c38e899-8ce5-8fa2-d510-2b1272ac2bed.png)

# 5. まとめ
いかがでしたでしょうか。
ここに書いてあること以外にも、Box・Salesforce・Slackを連携させることでもっともっと色々な働き方を実現できると思います。
ぜひ皆さんも色々と試してみてください！
LeetCode 問題番号 1108番

[Defanging an IP Address](https://leetcode.com/problems/defanging-an-ip-address/)

よくわからないけど空のChar型の配列(string型の変数)ansを用意しといて 
与えられたstringの前から順番に見ていって
ピリオド以外の時はそのままansに追記して
ピリオドの時は[.]を追加でできました
```C++
class Solution
{
public:
    string defangIPaddr(string address)
    {
        string ans;
        for (auto i : address)
        {
            if (i == '.')
            {
                ans.push_back('[');
                ans.push_back('.');
                ans.push_back(']');
            }
            else
            {
                ans.push_back(i);
            }
        }
    }
    
};
```
[C# SerialPort] DataReceived イベント内でSerialPort.Close()をすると死ぬ

Close()を実行すると自身の実行されているイベントの終了を待つので、イベントの中でClose()するとデットロックが生じます。

デバッグ的にはClose()内にはいったままTry catchにも引っかからずだんまりとなります。
コピーコンストラクタでポインタ渡しをするクラスの配列をvectorで作る時にハマった話


# 何にハマったの？

クラスのコピーの時にポインタ渡しをするコードを書いたら、vectorでの使用時に想定と違う挙動が起きた。
詳しくは下を見てください。

# サンプルコード

```c++
#include<cstdlib>
#include<cstdio>
#include<vector>

class A{
  public:
    float *p;
    A(int d){
      p = new float[d];
      return;
    }
    ~A(void){
      delete p;
      return;
    }

    void copy(const A &rhs){
      this->p = rhs.p;
      return;
    }

    A(const A &rhs){
      copy(rhs);
    }

    A& operator=(const A &rhs){
      copy(rhs);
      return *this;
    }

};

int main(void){
  std::vector<A> tmp(3, A(2));

  printf("%lf\n", tmp[1].p[0]);
  tmp[0].p[0] = 1.0;
  printf("%lf\n", tmp[1].p[0]);

  return 0;
}
```

newした後に配列の初期化してないとか色々省いてますが許して。。。

## 実行結果

```shell
0.000000
1.000000
free(): double free detected in tcache 2
```

tmp[0]の値を変えてるだけなのにtmp[1]の値が変わる？？？

# 原因

C++日本語リファレンスを読むと、vectorのコンストラクト時の挙動は
`value のコピーを n 個要素として保持した vector オブジェクトを構築する。`
とあるように、vectorの各要素の初期化はコピーで行われるらしい？
https://cpprefjp.github.io/reference/vector/vector/op_constructor.html

試しに
```c++
  printf("%p %p %p\n", tmp[0].p, tmp[1].p, tmp[2].p);
```
とかやってみるとアドレスが全部同じなのが確認できます。
no space left on deviceエラーはDockerが容量を使用し過ぎている

# 概要
`docker compose`でビルドした際に`failed to solve: failed to prepare xxxxxxx: mkdir /var/lib/docker/overlay2/xxxxxxxxxx/work: no space left on device`というエラーが出た時の対処法についてまとめます

## Dockerのストレージ使用量を調べる
以下を実行する
```shell
docker system df
```

実行すると次のように表示されるはずです。
```
TYPE            TOTAL     ACTIVE    SIZE      RECLAIMABLE
Images          27        12        17.09GB   9.62GB (56%)
Containers      12        12        1.072GB   0B (0%)
Local Volumes   105       4         14.2GB    13.75GB (96%)
Build Cache     138       0         1.622GB   1.622GB
```

ImageやLocal Volumesが圧迫しているのがわかる。

## ボリュームやコンテナ、イメージ、ネットワークの削除

### イメージの削除
タグを持たず、他のコンテナからも参照されないイメージを削除します
```sh
docker image prune
```

| オプション | 説明 |
|:-:|:-:|
| `-a` | 既存のコンテナから使用されていないイメージを全て削除する |
| `-f`<br/>`--force` | 作業の続行確認をパスする |
| `--filter` | 対象イメージの制限をかけることができる。<br/>例）`--filter "until=24h"` |

その他のフィルター表現：[docker container prune リファレンス](https://docs.docker.jp/engine/reference/commandline/container_prune.html)

### コンテナの削除
```sh
docker container prune
```

| オプション | 説明 |
|:-:|:-:|
| `-f`<br/>`--force` | 作業の続行確認をパスする |
| `--filter` | 対象イメージの制限をかけることができる。<br/>例）`--filter "until=24h"` |

その他のフィルター表現：[docker container prune リファレンス](https://docs.docker.jp/engine/reference/commandline/container_prune.html)

### ボリュームの削除
```sh
docker volume prune
```

| オプション | 説明 |
|:-:|:-:|
| `-f`<br/>`--force` | 作業の続行確認をパスする |
| `--filter` | 対象イメージの制限をかけることができる。<br/>例）`--filter "label!=keep"` |

その他のフィルター表現：[docker container prune リファレンス](https://docs.docker.jp/engine/reference/commandline/container_prune.html)

### ネットワークの削除
```sh
docker network prune
```

| オプション | 説明 |
|:-:|:-:|
| `-f`<br/>`--force` | 作業の続行確認をパスする |
| `--filter` | 対象イメージの制限をかけることができる。<br/>例）`--filter "until=24h"` |

その他のフィルター表現：[docker container prune リファレンス](https://docs.docker.jp/engine/reference/commandline/container_prune.html)

### 一括削除
```sh
docker system prune
```

| オプション | 説明 |
|:-:|:-:|
| `-f`<br/>`--force` | 作業の続行確認をパスする |
| `--volumes` | ボリュームも含めて削除 |

:::note warn
デフォルトではボリュームは削除されない
:::


### build cacheの削除

```sh
docker builder prune
```

[docker builder prune](https://docs.docker.com/engine/reference/commandline/builder_prune/)
LeetCode 問題番号1389

[Create Target Array in the Given Order](https://leetcode.com/problems/create-target-array-in-the-given-order/)

よくわからないけどindexっていう配列から指示された場所にnumsの値を挿入していくだけ
これなんか計算量が良くない気がするけどヨシ！
```C++
class Solution
{
public:
    vector<int> createTargetArray(vector<int> &nums, vector<int> &index)
    {
        vector<int> ans;
        if (nums.size() == 0)
        {
            return nums;
        }
        for (int i = 0; i < nums.size(); ++i)
        {
            auto it = ans.begin();
            for (int j = 0; j < index[i]; j++)
            {
                it++;
            }
            ans.insert(it, nums[i]);
        }
        return ans;
    }
};
```
[参考:std::vectorのinsertを正しく使う](https://qiita.com/kumagi/items/4285b732dde3441ea854)
【Unity2D】ビルドすると崩れるからCanvasのRender ModeをWorld Spaceに変換したい

# 概要
本稿はWebGLにビルドした際にGUIが崩れて支障をきたしたときのための記事になります。

## イメージするゲーム
ボールを生成して、オブジェクトに当たるとその倍率の得点を計算するシンプルなゲーム
**※オブジェクトとテキストの位置が一致していないといけない
　が、ビルドするとその位置関係が崩れるという人のための記事**
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/f1bcfcb1-0c5a-0f38-5b2e-5f44e51dc059.gif)


## GUIが崩れるイメージ図
ビルド前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/e89fa574-83fb-a29a-1af2-a179e9cfd323.png)
WebGLビルド後（全画面）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/802df7d3-8478-d24b-1b84-8f693849d0f9.png)
画面サイズが変わると相対的な座標に位置するGUIが崩れる

# 解決策
キャンバスの設定の`Render Mode`を`World Space`にしてオブジェクトと同じ位置にGUIを表示させればいける

☞`Render Mode`について参考記事

https://tech.pjin.jp/blog/2017/03/02/unity_ugui_canvas_rendermode/

**だがしかし**
`Overlay`から`World Space`に直に変更すると、GUIサイズが大きいままなので、位置を再調整する手間がかかる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/13f35ade-7aa3-f7ff-1e6f-faa391983391.png)

そこで、1手順挟むだけで楽に変更できる
という記事なのだ

## 解決手順①
まずは`Render Mode`を`Camera`に変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/037e92f3-b89e-b778-b120-ee2a397b8d61.png)
かつ、`Render Camera`にシーン内のカメラを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/78423e0d-7996-c353-cc08-5c62d6469aa0.png)
するとカメラのサイズにキャンバスサイズを再調整してくれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/60a6354c-2981-6c92-f99f-306d9cdbcf23.png)
**※この状態でビルドしても崩れる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/0547d2ee-8a3c-bf5d-e47f-dba3f1f98e22.png)

## 解決手順②
キャンバスの`Render Mode`を`World Space`にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/b949cfa3-d5a0-6212-7e8a-b4f0b95db848.png)
GUIが崩れてないことを確認してビルド
すると崩れてな～～い
![Videotogif (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554244/f4259b63-9e67-795f-3fd0-91eaaa70d3ae.gif)

以上です。
Kotlin(Spring Boot)でgradlewをしたらjava.lang.UnsupportedClassVersionErrorというエラーが出る

# はじめに

SpringBootを起動しようとしたときに遭遇したエラーについてまとめます
バージョンなどを気にせずハンズオン的になんとなくでテンプレート作成してしまうと遭遇しそうなエラーですが、あまりネットには同じような記事はなかったのでまとめてます

(簡単なエラーなのでこれくらいで記事にする人はいないのかもですが)

# 問題

```
$ ./gradlew bootRun
```

を実行したところ以下のエラーが発生しました

```
/app # ./gradlew bootRun
> Task :compileKotlin
> Task :processResources
> Task :compileJava NO-SOURCE
> Task :classes
> Task :bootRunMainClassName
> Task :jar
> Task :inspectClassesForKotlinIC

> Task :bootRun FAILED
Error: LinkageError occurred while loading main class com.example.demo.DemoApplicationKt
        java.lang.UnsupportedClassVersionError: com/example/demo/DemoApplicationKt has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 56.0
```

Javaのバージョンエラーが発生しているようでした
SpringBootのテンプレートで作成しているので設定などを見直しました

# 解決方法

まずはJavaのバージョンを調べるために以下のコマンドを叩きました

```
/app # java --version
openjdk 12-ea 2019-03-19
OpenJDK Runtime Environment (build 12-ea+29)
OpenJDK 64-Bit Server VM (build 12-ea+29, mixed mode, sharing)
```

OpenJDKのバージョンは`12`でした

改めて作成したSpringBootの設定を見ると以下になっていました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/daa7125b-ea16-ed98-f20e-63d96f3a7f9a.png)

よくわからず`Java 19`を選択していました。そこで`11`に選択してやり直したところうまくいきました

# おわりに

依存関係などがいままでやってた言語に比べて色々あるなと思いました
こういう環境こそコンテナで管理したいのですが、いまのところうまくいっていないので地道に学習します

# 参考

https://qiita.com/kazukiigeta/items/ba2b57c41421726803c5
平面ベクトル「22年 茨城大 後 工 2(5)」をsympyでやってみた。

作図はありません

...座標平面上の2つのベクトル...
オリジナル

https://kamelink.com/blog/2022/12/13/6-4-22-ibarakidai-kou-kou-2-5/

上と同じです。大学入試数学問題集成＞

https://mathexamtest.web.fc2.com/2022/202210161/2022101610200mj.html#top-0214

# sympyで(positiveで)
```python
from sympy import *
x=Symbol('x', positive=True)
a,b=map(Point,([3,-1],[x,2]))
print("#",solve((a+2*b).dot((a-b)),x)[0])
# 3/2
```

# sympyで(varで）

```python
from sympy import *
var('x')
a,b=map(Point,([3,-1],[x,2]))
print("#",solve((a+2*b).dot((a-b)),x))
# [0, 3/2]
```
alchemy サービスの紹介

web3.0 アプリケーションを開発するとブロックチェーンの RPC サーバーが必要になりますが、自分で用意せずに他のサービスを使う場面も多々あります。

[infura.io](https://www.infura.io/) は老舗ですが、後続のサービスとして、[alchemy](https://www.alchemy.com/) も有力な選択肢になってきています。また、基本のブロックチェーン RPC サーバー以外、他の便利な API が提供されていて、かつ SDK も提供されているので、詳細内容を紹介します。

![Screen Shot 2022-12-13 at 11.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4777/6bedcba5-3a22-4863-2e22-f4a6139dd373.png)

## サポートしているチェーンの比較

|chain|alchemy|infra.io|
|-----|:-------:|:--------:|
|Ethereum|◯|◯|
|Polygon|◯|◯|
|Solana|◯|◯|
|Arbitrum|◯|◯|
|Optimism|◯|◯|
|Astr|◯|☓|
|Starknet|◯|◯|
|Celo|☓|◯|
|Avalanche C-Chain|☓|◯|
|Palm|☓|◯|
|Near|☓|◯|

## 他の便利な API

### [NFT API](https://docs.alchemy.com/reference/nft-api-quickstart)
NFT のデータを取得したことがあればお分かりだと思いますが、１つのアドレスに対してい、所有しているすべての NFT を出したい場合は、実は結構面倒で、必要に応じて各 NFT コントラクトのアドレスを収集したりする必要があります。
Alchemy の SDK を使えば、その手間もかけずにカンタンにできてます。

下記は公式サイトのサンプルから、読みやすくするためコメントや console.log をいくつ削除しただけですが、これだけでそのアカウントが所有するすべての NFT を表示できますね。

```js
import { Network, Alchemy } from "alchemy-sdk";

const settings = {
  apiKey: "demo", // Replace with your Alchemy API Key.
  network: Network.ETH_MAINNET, // Replace with your network.
};
const alchemy = new Alchemy(settings);

const nftsForOwner = await alchemy.nft.getNftsForOwner("0xshah.eth");
console.log("number of NFTs found:", nftsForOwner.totalCount);

for (const nft of nftsForOwner.ownedNfts) {
  console.log("contract address:", nft.contract.address);
  console.log("token ID:", nft.tokenId);
}

const response = await alchemy.nft.getNftMetadata(
  "0x5180db8F5c931aaE63c74266b211F580155ecac8",
  "1590"
);

// Print some commonly used fields:
console.log("NFT name: ", response.title);
console.log("token type: ", response.tokenType);
console.log("tokenUri: ", response.tokenUri.gateway);
console.log("image url: ", response.rawMetadata.image);
console.log("time last updated: ", response.timeLastUpdated);
```

### [Notify](https://docs.alchemy.com/reference/notify-api-quickstart)
ブロックチェーン上に発生するイベントを webhook 方式で通知してくれるサービスです。

サポートされているイベントタイプは下記になっています。

Webhook Type | Description | Network
-- | -- | --
Mined Transaction | 送信したトランザクションがブロックに含められたタイミング | All
Dropped Transactions | 送信したトランザクションが削除されたタイミング | All
Address Activity | すべての ETH、ERC20、ERC721、ERC1155 の送受信発生したタイミング | All
NFT Activity | Ethereum NFT の ERC721 および ERC1155 の NFT が転送されたタイミング| Ethereum Mainnet & Goerli
NFT Meta Updates | Ethereum および Polygon NFT の ERC721 および ERC1155 トークンコントラクトのメタデータの更新されたタイミング | Ethereum Mainnet & Goerli; Polygon Mainnet & Mumbai

これらの通知を活用すれば、もっとリアルタイムでユーザーに情報変更を通知できますね。

## まとめ
上記２つを紹介しましたが、それ以外の API もあるので、ぜひ試してください。
Material-UIでサマリーが下部にあるアコーディオンを作りたい

# はじめに

React+Material-UI でアプリ開発をしているのですが、デザイン上サマリー部分が下部にあるアコーディオンを作りたくて、[公式ドキュメント](https://mui.com/material-ui/api/accordion/)を参照したのですが、そのような機能は見当たらなかったので スタイル でなんとかしました。

## 今回作りたいもの

![対応後のアコーディオン](https://storage.googleapis.com/zenn-user-upload/87d3c2284de1-20221213.png)

# 対応方法

## 対応前

これが Material-UI を使用したシンプルな Accordion の実装です。

```jsx
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

export const SimpleAccordion = () => {
  return (
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>サマリー</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>アコーディオンの中身</Typography>
      </AccordionDetails>
    </Accordion>
  );
};
```

サマリー部分は上部にあります。
![対応前のアコーディオン](https://storage.googleapis.com/zenn-user-upload/9e2b784325ce-20221213.png)

## 対応後

```diff jsx
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+ import { styled } from "@mui/material/styles";

+ const AccordionExpandUpper = styled(Accordion)(({ theme }) => ({
+   display: "flex",
+   flexFlow: "column-reverse nowrap",
+ }));

export const SimpleAccordion = () => {
  return (
+    <AccordionExpandUpper>
-    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography>サマリー部分</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>アコーディオンの中身</Typography>
      </AccordionDetails>
+    </AccordionExpandUpper>
-    </Accordion>
  );
};

```

サマリー部分が下部に表示されました！
![対応後のアコーディオン](https://storage.googleapis.com/zenn-user-upload/87d3c2284de1-20221213.png)

# おわりに

公式でサポートされてなかったり、`AccordionSummary`と`AccordionDetails`入れ替えるだけじゃうまくいかなかったので、どうしようかなと思っていたところ、スタイルの変更ですんなりできたので助かりました。
こんなことしなくてももっといい方法があるぞ！という方がいらっしゃいましたら、ぜひとも共有していただければ。。。
pandasのDataFrameから特定の列（前方一致/後方一致）を抜き出し、削除、分割する

アンケート分析でたまにpython&pandasを使用しています。
分析の前処理でカテゴリ変数を変換したり、いらない列を削除したりする必要があるのですが、全てのDataFrameに同じ処理をするわけではないので、抽出して処理をして、また戻す、といったことを頻繁にやっています。
列を抽出（指定）する方法としてindexや列名指定などの方法がありますが、それぞれ
* 数値(index）指定：間違いやすいし、操作すると位置が変わってしまう
* 列名指定：列名を正しく全て列挙するのが大変（日本語アンケートの列名は長くなりがち・・）

という問題があり、前方一致や後方一致で一括処理できると便利なのになーと思っていました。


検索ですぐに良いやり方が見つからなかったので、試行錯誤してみました。
もっと良いやり方をご存知の方はコメントしてもらえるとありがたいです。
## 操作するDataFrame

サンプルとして、以下のようなDataFrameを操作していきます。

```python
import pandas as pd
df = pd.DataFrame(
    data={
        'ID':[0, 1],
        '属性_A':[0, 1],
        '属性_B':[1, 1],
        '回答_A':[2, 2],
        '回答_B':[0, 2],
        '回答_C':[2, 3],
        'その他':[0, 0]}
)
```
DataFrameを表で表すとこんな感じです。
|  | ID | 属性_A | 属性_B | 回答_A | 回答_B | 回答_C | その他 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| 0 | 0  | 0  | 1  | 2  | 0  | 2  | 0  |
| 1 | 1  | 1  | 1  | 2  | 2  | 3  | 0  |


## 前方一致で列名を返す
まず、前方一致で列名を取得してみたいと思います。
*ID*、*属性*という言葉から始まる列の名前を取得するコードは以下のようになります。

```python
words_start = ('ID', '属性')  #用語はタプル
cols_bool = df.columns.str.startswith(words_start) #ndarrayでTRUE/FALSEのBoolean配列
df.columns[cols_bool]
```
カラム名のIndexが返ってきます。タプルで指定した、IDと属性を含む列を取得できました。
`Index(['ID', '属性_A', '属性_B'], dtype='object')`
これは`columns=`のようなパラメータに代入可能です。


## 前方一致の列を含むDataFrameを作成
```python
words_start = ('ID', '属性')  #用語はタプル
cols_bool = df.columns.str.startswith(words_start)
df_ext = df[df.columns[cols_bool]]
```
先ほどのIndexを使ってDataFrameを取得しました。
|  | ID | 属性_A | 属性_B |
|:-:|:-:|:-:|:-:|
| 0  | 0  | 0  | 1  |
| 1 | 1  | 1  | 1  |

## 前方一致の列をDataFrameから削除
2つのやり方があります。削除コマンドのdropを用いる場合と、それ以外を抽出する場合です。
### dropを用いる場合
```python
words_start = ('ID', '属性')  #用語はタプル
cols_bool = df.columns.str.startswith(words_start)
df_drop = df.drop(columns=df.columns[cols_bool])
```

### notを用いる場合（それ以外を抽出）
```python
words_start = ('ID', '属性')  #用語はタプル
cols_bool = df.columns.str.startswith(words_start)
df_drop = df[df.columns[~cols_bool]]
```
`cols_bool`はブーリアン配列であり、`~`を使うとnotとなります。
これを用いて、削除（というか該当しない列を抽出）しました
どちらも結果は以下のようになります
|  | 回答_A | 回答_B | 回答_C | その他 |
|:-:|:-:|:-:|:-:|:-:|
| 0  | 2  | 0  | 2  | 0  |
| 1  | 2  | 2  | 3  | 0  |

## 分割する場合
抽出と削除ができたので、組み合わせれば分割ができます
まとめて返す関数を作ってみました
```python
def df_split_startwith(df, words):
    cols_bool = df.columns.str.startswith(words)
    return df[df.columns[cols_bool]], df[df.columns[~cols_bool]]
```
以下のように使えます
```python
words_start = ('ID', '属性')  #用語はタプル
df_1, df2 = df_split_startwith(df, words_start)
```
## 後方一致の場合
`endswith()`を使うだけです。

```python
words_end = ('A', 'C')
cols_bool = df.columns.str.endswith(words_end)
df_ext2 = df[df.columns[cols_bool]]
```
|  | 属性_A | 回答_A | 回答_C |
|:-:|:-:|:-:|:-:|
| 0  | 0  | 2  | 2  |
| 1  | 1  | 2  | 3  |
QueryObject & Repository

![export 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/3985b2f3-de4b-d35b-5944-61d72bb52740.png)

https://bliki-ja.github.io/pofeaa/QueryObject/

https://bliki-ja.github.io/pofeaa/Repository/

Query Object と Repository はいずれも、Data Mapper によってマッピングされたデータを得るために用いられます。

Query Object は端的に言ってしまえば言語内 DSL です。SQL を直接使ってデータを得る Transaction Script や Table Module で可能なことが、Data Mapper を利用してデータソースをすっかり隠蔽した Domain Model でできなくなってしまうと、パターンの選択肢として価値がなくなります。Data Mapper 層も、エンティティを得るという目的範囲においては (もちろん集計関数やウィンドウなどの SQL ならではの機能については別として)、SQL と同等レベルの高度な問い合わせに応える必要があるかもしれません。

Query Object は、検索条件を表す言語をオブジェクトで作るパターンです。構造化された言語文法の個々の要素 (クライテリアと呼ばれることもあります) が、オブジェクトのインスタンスとなる Composite パターン (GoF) で設計されます。複雑な問い合わせ担った場合、それは実質、SQL のクエリビルダになります。が、最終的に (単一または複数の) 主キーで行を指定するような形になった場合、Identity Map のキーを指定して、SQL を発行せずにインスタンスを得ることができます。Foreign Key Mapping を辿って Lazy Load で関連データを取得するとき、その問い合わせのほとんどは、主キーを指定しただけの Query Object になります。

Query Object があらゆる問い合わせを表現できる言語であるのに対して、Repository はごく限られた数のメソッドしか持ちません。

Domain Model はできるだけ、データソースの存在を忘れて、ビジネスロジックに集中した方が純度が上がります。どこからともなく無限のストレージリソースが提供されている、といった雑な認識が可能な抽象があってくれれば、その詳細はどう実現されていても気にしなくていいのが理想です。そのようなデータ倉庫(=Repository)の抽象オブジェクト(インターフェース)を設けるのが、Repository パターンです。

Repository のメソッドは Domain Model に現れる「データソースへの検索要求」に応じて、必要最小限の数が設けられます。メソッドには、検索条件引数をせいぜいひとつかふたつしか持たない程度の表現力しか持たせないのがセオリーです。どんな問い合わせにでも応じられる Repository を作ろうとするのはアンチパターンです。

Domain Model のメリットのひとつは、データソースと分離した純粋な単体テストです。もし Repository のインターフェースが簡単にモックオブジェクト化できないものだったら、単体テストはデータベースを求めはじめます。Domain Model は、どこで何をしているかわからないオブジェクト群の連携です。操作範囲が明らかな Table Module パターンよりも、テスト用データベースの準備が困難です。抽象化されているぶん、Transaction Script の場合よりも困難と言えるかもしれません。誰でも気軽にモックにできる単純さが、良い Repository の必要条件です。

Query Object は可能な操作全て表現するもの、Repository は実際に要求されることにだけ端的に応えるもの、と、パターンを意識する状況が全く異なるのが、違いの本質です。つまりほとんどの場合、「Repository の具象を実装するときに、Query Object を使う」「Domain Model には Query Object を使わせない」となるのが、これらの個別技法パターンの利用パターンとなります。
引き継ぎについて個人的に思うコツ

本記事では、退職時のことは取り扱っておりません。
継続して働いていく中で自分のタスクを別のメンバーにお願いすることに関する記事になります。

# 対象読者
・引き継ぎしたいができなくて困っている方
・引き継ぎのやり方を調べている方
・タスクに追われている方
・部下や後輩がいる方

# 引き継ぎをする目的

・新しいタスクに取り組むため
・作業負荷を分散するため
・後輩を成長させるため
・適材適所にするため
・属人性をなくすため

これらがあるかなと思っています。

# 引き継ぐことに適しているタスク

・自分以外のメンバーでもできること
・運用・保守のような定期的な業務
・自分がやる場合は適材適所とは言えない内容

このようなタスクの場合は別のメンバーに引き継ぐことをおすすめします。
誰かがやらないといけないのでこういったタスクが出るたびに後輩に渡すのは少し違います。

__自分にしかできないこと__　と　__自分がやった方が効果的__　と言えるようなタスクは積極的にやっていく方がいいです。
そうでない場合には引き継ぐようなイメージです。

## その前に、なぜ引き継ぎができないか
2つあるかと思います。

1つ目は言い出しにくいということ。2つ目は引き継ぎ対象者の能力不足があると思います。

### 言い出しにくいということ

なんでも自分がやりますと答えることは気の優しい人に多いですが、タスクに押しつぶされて自滅してしまいます。
幸福度高く継続して働いていくためには仕事は分散してやっていくことが大切かと思います。

頑張っているあなたのことはみなさんが知っていることかと思います。
ですが大丈夫そうだから特に助けないのです。

自分がタスクの負荷が大きくタスクを引き継ぎしたいことを素直に伝えてみると意外とすんなり受けてくれます。

### 引き継ぎ対象者の能力不足

難しいタスクの場合は自分でやってしまいましょう。
いずれ引き継いでもらいたいと考えている場合はそれに近づくように日々の教育・指導にゆっくり向き合っていきましょう。
それが部下にとって成長になることを示して進めていければ部下にとっても動きやすいかと思います。



# 引き継ぎのコツ

## 誰に引き継ぐのか
その依頼したいタスクに適しているメンバーです。
同僚や部下なら誰でもいいわけではありません。そのタスクを理解してやることにそこまで苦痛に感じない人が適しています。
どんなタスクなのかを考えて、相手に合わせて依頼します。
もちろん、忙しすぎる人は避けた方が良いです。

## お願いの仕方
前提として丁寧にお願いすることは必要です。
その上で
・お願いしたい経緯・理由
・タスクの目的
・タスクの内容を明示
・できそうかの確認

を入れた内容を渡すことが必須だと思っています。
これがあることで後任者が迷うことが少なくなります。

## 嫌がられた場合

嫌がられるケースもあると思いますが、説明が足りないことがほとんどかと思っています。それか適切じゃない人を選んでしまっています。
両者で話して引き継ぐべきではないと判断した場合はおとなしく自分のタスクに戻すか別のメンバーを検討しましょう。

丸投げして「わからないことあったら聞いてね」みたいな引き継ぎの仕方はやめましょう！（※信頼関係が築けているのなら大丈夫な気もしますが、良くないです。）
弊社ではそういう人がちらほらいますが、たいてい後任者が不満を抱えています。

## 依頼される側はどういうタスクだったら受けたいと思うか

依頼される側は自分がやる場合に何をすればいいのかわかるタスクかどうかを見ています。
どんなタスクか不明瞭な状態で依頼されるケースを恐れつつそれが言えないので断りたくなる心理が生まれてきます。
理由・目的・内容を明示できていれば、リソースの限界に来てない限り受けてくれるケースがほとんどです。

## GWCを満たしているか
GWCという概念がありますがこれを満たしていればそのタスクに向いていると言われています。
G: Get to it 何をすればいいかわかる
W: Want to it やりたいと思えるタスク
C: Capacity to it 能力やリソースが足りている

これを満たしているかも念頭にいれて検討してみてください。

# 終わり
以上、若輩者のポエムでした。
ここまで一読いただけたとしたらありがとうございます。
Googleで式を検索しなくても、コンソールで計算しちゃえばいいじゃない

S高通学コース2年生の綾坂ことです。
なんか空いてたので書いてみようかと。

## 唐突に要求される計算

「ここからここまでが1370円、ここからここまでが2310円か。これを12人分買わなきゃいけないから、合計金額は……」

こういうとき、ありますよね。あってください。
Googleってとても便利で計算式を検索クエリに入れると答えを出してくれます。

![スクショ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599149/a55c1975-949b-b92f-3406-2debda9b6851.png)

でも必ずしも計算が要求されるタイミングでGoogleを開いているとは限りません。
なんかいつでも手軽に計算できるいい方法ないかな〜、とか思ってたら思いつきました。

**コンソールで計算できるじゃん**

## やり方

- `F12`を押して開発ツールを開きます。
    - Macユーザーで設定を変更していない場合は`fn+F12`です。
    - `command+shift+C`でも開ける気がします。
- 出てきた画面の上のタブから、「Console」を選択します。
    - 表記は日本語に変えておいてもいいと思います。上の方にSwitch to Japaneseみたいなのが書いてある気がする
- 出てくる黒い画面に計算式を打ち込んでEnterで答えが表示されます。
  ![こういうこと](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2599149/dc57f22e-1307-0b2b-219e-d0ed9676dd06.png)

## 利点

- どこでも開ける
    - 新しいタブだろうがどこでも開けます。
- 入力途中の状態にしておけば同一タブ内でページ遷移可能
    - コンソールに計算式を打ち込みながらバスと電車の運賃を検索することもできそう
- 変数が使える
    - 開いているwebページ側で使っている変数を上書きする心配があるのでletかconstで。
    - 人数とかを変数に置いといて呼び出すこともできそう。
- 関数が使える
    - 切り上げ・切り捨て・四捨五入なども使える

## 使いそうな演算

- 加減乗除
    - `a + b`, `a - b,` `a * b`, `a / b`
- 余剰、累乗
    - `a % b`, `a ** b`
- 切り上げ、切り捨て、四捨五入
    - `Math.ceil(a)`, `Math.floor(a)`, `Math.round(a)`

---

Excelでドット絵描くみたいな「想定されていない使い方」なのはわかってます。
でも、意外と使えるんじゃね？という提案でした。
**コンソールは怖くない。**
SSHを利用した通信

# サーバー認証を行う
### サーバー認証とは？
クライアント側がサーバから送られてきたディジタル署名が正しいかどうかを検証する。
### 気づき
サーバー認証のためにクライアントはサーバの公開鍵を用いてサーバーのなりすましを確認するのか。

# 公開鍵認証でディジタル認証をする
### SSHとは？
```共通鍵暗号```を用いて通信を暗号化し、```公開鍵暗号```を用いてサーバ認証を利用者認証を行っている。
```暗号化方式の特徴```と```ディジタル署名```について理解しておくことが重要
### 共通暗号方式
この方式では```「暗号化」と「復号化」の鍵が一緒```なわけです。ある鍵を使ってデータを暗号化し、その後に同じ鍵を使ってデータを復号化します。
共通鍵暗号方式と呼ばれる理由は、まさに```暗号化と復号化の鍵が共通```しているからです。

この共通鍵暗号方式には、以下のようなメリットとデメリットがあります。

メリット：ファイルやデータの```暗号化にかかる処理速度が早い```
デメリット：データを送る人の数だけ管理する鍵が増える。送信した鍵が```第三者に盗まれる危険```がある
#### 出典
https://cybersecurity-jp.com/column/53774#:~:text=%E3%81%93%E3%81%AE%E6%96%B9%E5%BC%8F%E3%81%A7%E3%81%AF,%E5%8D%B1%E9%99%BA%E3%81%8C%E3%81%82%E3%82%8B

### 公開鍵暗号方式
```「暗号化」```と```「復号化」```の鍵を別々に作る
データの送信者ではなく、受信者が鍵を作る
先ほどの共通鍵暗号方式では、1つの鍵で暗号化と復号化をおこないました。しかし、公開鍵暗号方式では、```それぞれ別の鍵を作ります```。

```暗号化する鍵を「公開鍵」```、```復号化する鍵を「秘密鍵」```と呼びます。また、共通鍵暗号方式はデータの送信者が鍵を作り、暗号化したデータと鍵を受信者に送っていました。
#### 出典
https://cybersecurity-jp.com/column/53774#:~:text=%E6%9A%97%E5%8F%B7%E5%8C%96%E3%80%8D%E3%81%A8%E3%80%8C%E5%BE%A9%E5%8F%B7%E5%8C%96%E3%80%8D%E3%81%AE%E9%8D%B5%E3%82%92,%E3%82%92%E5%8F%97%E4%BF%A1%E8%80%85%E3%81%AB%E9%80%81%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82

### SSHでリモートログインする際の認証方法
```パスワード認証```と```公開鍵認証```の2つの種類がある。
#### パスワード認証とは？
```リモートログイン時のユーザー認証に、パスワードを利用する方法```。
システムに設定されているパスワードをそのまま利用できるためすぐにSSHを利用できるようになる。
万が一パスワードが漏洩してしまった場合は、```誰でもログインできる```ようになってしまう。

#### 公開鍵認証とは？
秘密鍵と公開鍵を用意する必要があるので手間がかかる。
しかし、```秘密鍵を持っている人しかログインできない```ため```パスワード認証よりも安全性が高い```。
.
.
.
ちょっと休憩

# クライアントがサーバ認証を行うことによって防ぐことができる攻撃はどれか？
### 中間者攻撃とは？
クライアントとサーバの```通信経路の間に存在```して、```クライアント側から見ればサーバのように振る舞い```、```サーバー側から見ればクライアントのように振る舞う```ことで、両者からの```メッセージを全て盗聴、改ざん```することができる。

```サーバの公開鍵を使って送られてきたディジタル署名```を検証しているため接続先が正規のサーバであることが保証されている。```サーバの公開鍵の正当性は、認証局の証明書で確認```しておけば良い。

#### 気づき
公開鍵と一緒にディジタル署名が送られていくのか。

# 共通鍵暗号方式を使う理由はどれか？
### 共通暗号方式
この方式では```「暗号化」と「復号化」の鍵が一緒```なわけです。ある鍵を使ってデータを暗号化し、その後に同じ鍵を使ってデータを復号化します。
共通鍵暗号方式と呼ばれる理由は、まさに```暗号化と復号化の鍵が共通```しているからです。

この共通鍵暗号方式には、以下のようなメリットとデメリットがあります。

メリット：ファイルやデータの```暗号化にかかる処理速度が早い```
デメリット：データを送る人の数だけ管理する鍵が増える。送信した鍵が```第三者に盗まれる危険```がある

# パスワード認証は、公開鍵認証に比べて、安全性が低いと考えれている。どれか？
サーバが攻撃者に乗っ取られた場合、クライアントが入手したパスワードはセッション鍵で暗号化されてサーバに送られるが、サーバが持つセッション鍵で複合すればパスワードが取得されてしまう。

# 感想
まだまだしっくりくるまで勉強だ。
# 出典
https://gihyo.jp/book/2022/978-4-297-12377-2
インターネット接続で困った話

謎のアドベントカレンダー、第 18 話です。

## 入社前

筆者の職場は、もともと実験目的で

- 128kbps のメタル回線
- クラス C（/24）のアドレス空間
- ファイアーウォールの NAT（非 NAPT）で 10 個ぐらいの IP アドレスを使ってインターネットアクセス可能
  - 導入時、NAPT なるものはまだ市販機器やソフトウェアで実用化されておらず、RFC もなかった

な感じでインターネットアクセスできるようになっていました。

社員が 3 桁のところに同時アクセスできるのが 10 程度、ということで広大なアドレス空間を無駄遣いしていたわけですが、そもそもグループ内の 1 社が実験目的で入れていたものを全社解放するのもアレなので、あらためて別の回線を引くことに。

（その際、工事許可を取ってビル前の歩道を掘って光ファイバーを通す等のあれこれがあって面白かったのですが、その話は今回の主題ではないので割愛）

## 新たな回線には

キャッシュ用のプロキシと、コンテンツフィルタリング機能付きのファイアーウォールが導入されました。

そしてこのコンテンツフィルタリング機能、接続先のドメインや IP アドレス等を内部のブラックリストと突合してアクセス可否を決めるものだったのですが、

## とにかく使えない

シロモノでした。

なんといっても海外で作られたブラックリストです。日本の扱いが雑で雑で。

止めて欲しいものがフルオープンな代わりに、たとえば **ベッコアメ・インターネットのドメイン全体が「アダルト」カテゴリでブラックリストに入っていたり** して。

ひどい。

ホワイトリストに登録すればフィルタリングをパスできるようになるものの、アクセスできずに困ってそれを伝える側もホワイトリストに登録する側もとにかく面倒です。

（筆者の職場の性質上、中小零細企業や個人商店の Web サイトにアクセスできないのは NG）

筆者は下っ端で何の権限も持たない身だったのですが、タイミングを見計らいながら、なし崩し的にしれっと **コンテンツフィルタリング機能を無効化** しました。

しれっと。

（悪い情シス担当者だ）

本来なら、上司など周囲に相談して決めるべき話ではありますが、ある程度のコストを掛けて「安全に使えますよ」「遊びじゃなくて仕事用ですよ」アピールした（であろう）上で稟議を通して導入した以上、稟議のルート上に居る当事者が

「ごめん、使い物になりませんでした〜ﾃﾍﾍﾟﾛ」

では済まないので、仮に相談したとして

**諦めずに設定をチューニングしろ（自分でわからないことは業者に相談しろ）**

という流れになるのは分かりきっています。

（まあ、一応、無効化直前にさらっと「これ使い物にならないから無効にしますね〜良いですよね？」とは伝えてはいますよ。気づかれない程度にさらっと）

## セキュリティは大事だけど

可用性を大きく損ねてまで他を優先すべきものではありません。

可用性大事。

## でもって

クラス C の（自社にとっては）広すぎるグローバルアドレス空間は、残念ですがお返ししました。

さよなら。

---

19 日目の記事に続きます。

- **[AD 移行に失敗した話](https://qiita.com/hmatsu47/items/daa74d4db76e7286e561)**

https://qiita.com/hmatsu47/items/daa74d4db76e7286e561
非エンジニアが開発部長になった話

https://qiita.com/advent-calendar/2022/kddi-tech
の13日目です。

## はじめに
非エンジニアの私の目を通してKDDIテクノロジーで苦労したことや、KDDIテクノロジーの仕事のスタイルなど感じるところをご紹介できればと思います。

想定読者
「KDDIテクノロジーってどんな会社？」と少しでも興味のあるエンジニア、求職者の皆様。

## 私のバックグラウンド
2001年に合併したてのKDDIに新卒入社し、交換機の仕様作成をやったり、海外でネットワーク機器系のSEをやったりした後、携帯電話の企画部門や開発部門で15年ほど携帯電話に関わる仕事をしてきました。
比較的最近のお仕事は、シニア向けの携帯電話や[スマートフォンの企画](https://time-space.kddi.com/kddi-now/kddi-news/20161028/)をしたり、[メッセージアプリ](https://www.au.com/mobile/service/plus-message/)の企画などに携わりました。
2021年の4月より、KDDIテクノロジー開発4部部長です。



## コロナ真っただ中の異動
企画の仕事から一転、2021年4月に今の職場に赴任してきたのですが、オフィスではリモートワークがフル活用されており、一応毎日出社してみるのですが、部のメンバーに合うのもままならない。ようやく全員に会えたのはゴールデンウィークの連休明けでした。
会社の仕組みはほぼすべてオンラインでできるので、人によっては１か月以上出社しない人もいるとのこと。外から入ってきた私にはリアルでのお付き合いが無いメンバーで働いたので、メタバースってこんな感じなのかしら？と新しい世界を体感した気分でした。

## 開発の仕事とプロジェクト管理
仕事は部署の名前通り開発が中心になっています。
私がメタバースの次に感じたカルチャーショックが、「プロジェクト毎」の管理です。それまで長年慣れてきたのは、月ごと施策ごとの管理だったのですが、当社ではプロジェクト毎の収支管理が行われております。
プロジェクト毎に予定を立て、支出を細かく管理できるので、稲盛和夫さんの「アメーバ経営」に近いことができます。
プロジェクトのメンバーは人件費や必要な物品の購入、SaaS利用料などを計上することで、メンバーの誰からもプロジェクト毎の収支が見えるようになっていて、1人1人がコスト管理をしっかりできるユニークな仕組みだと感じました。

## 控えめ真面目なエンジニア
厳密なプロジェクト管理の賜物か、それとも元来真面目なエンジニアが集まっているのか、みなさん超まじめ！というのが私の第一印象でした。
雑談もできるようになると、実はプロジェクト以外にもこんな取り組みしてみたいとか、設備を買ってみたいという話を聞けるようになりました。そんなのやったらいいじゃん！と感じましたが、これもカルチャーの違いかもしれません。
予算取ってきて、企画して、稟議書起案して、ガンガン進めております。（稟議書が得意という大企業病的なスキルですが、皆さんの役に立って良かった）

## ビジネスの話
新サービスや新プロダクトを考えたり、世に出すハードルは低いように感じます。
会社が100名ちょっと、決裁のステップが少ないので、判断が迅速です。スケールさせるものは本社でやれば良いと思いますが、ちょっと試してみたい、世に問うてみたい、といったチャレンジは非常に進めやすいです。
様々な外のお客様の要望で開発をするのも良し、自分で考えてやってみるのも良し、自由でフラットな雰囲気です。
というわけで、非エンジニアなりに、企画と開発を含むような活動も取組めてエキサイティングな毎日ですが、来年はそういった仕込みをお披露目する年になりそうなので、ご期待ください。
```
LinuxのIntel x86のIntrinsic関数をRISC-VやARM用にポートする(５)

IntelのIntrinsic関数を他のRISC-VやARMなどのアーキテクチャにポートする場合、ポートの正確性を担保するためにIntelとRISC-VやARMをネットワークで相互接続するテストフレームワークが必要であることを前回までに論じた。

では、ネットワーク接続をするテストフレームワークを作るためにはどうすればいいか。それは、ネットワーク・プロトコルを作成する必要がある。で、そのためには、ネットワークシミュレータを作成する必要がある。このテストフレームワークは実験段階であるため、ローカルでの相互接続を前提とする。

つまり、コマンド一つでネットワーク・プロトコルの実装をテストすることができるテストケースをPythonやGo言語などで作っていけば良い。
PythonにもGoにも、テスト駆動開発で使うテストフレームワークが存在する。

ネットワークの中身をシミュレートする必要はなくて、送信データと受信データだけのインターフェースを作って、抽象化してやればいい。

Rust言語を使うオプションも存在する。Rustは低水準であり、ネットワーク機能も備えている。管理モジュールをRustで作って、ポートする部分はC言語とRust両方で作れるようにする。

assertを使う。単一関数(その関数の名前をThrowParameter関数と名付ける）で、ネットワーク越しのCPUに関数を実行させて値を返すものを実装する。で帰ってきた結果をassertで確認する。一つの関数に一連のルーチンを実装する。引数にネットワークハンドラとか入れておく。

ネットワークハンドラは事前に接続設定しておく。ネットワークハンドラを設定する関数をThrowParameterNetworkEstablishmentと名付ける。つながってなかったらエラーを返す

「ネットワーク越しのCPUに関数を実行させて結果を返す」関数から帰ってきた値をassertで比較して、同じでなかったらエラーを吐き出す、テスト駆動開発のフレームワークが使える

（続く）
PSDファイルを扱えるクラスを作ったので公開

# はじめに

PSDファイルの解析と描画を独自に学習していたら出来たので公開します
解析も描画の再現もかなりの労力と時間がかかりますのでその代わりが出来たらと思います

MITライセンスに従い公開します、使用により発生した事象に責任は負いません
最配布時に作者名を記載してあればOKです、詳しくは同梱のreadme.txtを参考に

# ファイル構成

| ファイル | 説明 |
|:-:|:-:|
| PsdFile.pas  |  PSDファイルを扱うためのクラス本体 |
| FileStreamEx.pas  |  PSDファイルを読み込む時に使用するストリームクラス  |
| PSDViewer.dp  |  サンプルプロジェクト |
| PsdFileImageFram  | PSDファイルビュアー  |
| PsdFileTreeFrame  | PSDレイヤーツリービュアー  |

# サンプルプロジェクトの使い方
【使用方法】
サンプルプロジェクトをコンパイル実行して表示されたフォームにPSDファイルをドラッグアンドドロップするとレイヤーと画像が表示されます。
レイヤーの丸印をクリックするとレイヤーの表示非表示が切り替わります。
各レイヤーはPSDToolkitの方式に基づき変化します。


# TPsdFileのプロパティとメソッド

```sample.pas
    画像データやレイヤー、ツリーを初期化
    procedure Clear();
    // PSDファイルを読み込む
    function LoadFromFile(const FileName : string) : Boolean;
    // 読み込んだファイルをビットマップに描画
    procedure DrawBitmap();
    // 読み込んだファイルをビットマップに描画 ※スレッドを使用
    procedure DrawBitmap2();

    // レイヤーの表示非表示情報を初期状態に
    procedure VisibleInit();
    // 各レイヤーにアクセスするリストクラス
    property Layers  : TPsdFileLayers read FLayers;
    property LayerLength : Integer read FLayerLength;
    property LayerMaskLength : Integer read FLayerMaskLength;
    // レイヤーツリーにアクセスする再帰リストクラス
    property Trees  : TPsdFileTrees read FTrees;
    // PSDの描画に使用しているビットマップ
    property Bitmap : TBitmap read FBitmap;
    // サムネイルの描画に使用しているビットマップ
    property BitmapThumbnail : TBitmap read GetBitmapThumbnail;
    property Resource : TPsdFileResource read FResource;
    // 透明色として使われていない色を指定
    property BackgroundColor : TColor read FBackgroundColor write FBackgroundColor;
    // 使われていない色を透明色として取得
    property TransparentColor : TColor read GetTransparentColor;
    // スレッドによる描画終了時に呼ばれるイベント
    property OnDrawFinish : TNotifyEvent read FOnDrawFinish write FOnDrawFinish;

```

# ファイルダウンロード

PsdViewerV.zipのダウンロード(本体とサンプル付き)
https://drive.google.com/uc?id=1eKDPok8GKfwitpPmIWf9dzVjLD0NnGGd
VSCode 1.74のリリースノートでこれいいなと思った機能

VSCode 1.74がリリースされました。
今回も自分が使いそうな機能でいいなと思った機能を紹介します。

1.73の記事はこちら
https://qiita.com/ckbys/items/b56186f2d6f9b490ed6c

# 設定画面がキーボード操作しやすくなった

https://code.visualstudio.com/updates/v1_74#_keyboardnavigable-settings-editor-indicators-hovers-and-links

TABキーとか方向キーで設定項目を移動できるようになったので設定しやすくなりました。
方向キーで項目を選択、Enterキーで入力フォームに移動、値を入力してTABキーで確定？→最初に戻る、みたいな感じです。

# サイドバーのバッジアイコンの表示・非表示が切り替えられるようになった

https://code.visualstudio.com/updates/v1_74#_hide-badges-per-view-container

サイドバーにファイルとかGitとか拡張機能とかのアイコンが並んでると思いますが、変更とかがあるとバッジで数字が表示されますね。
その数字の表示・非表示が切り替えられるようになりました。
アイコンを右クリックして「Hide Badge」「Show Badge」で切り替えられます。
このメニューは通知いらないわー、っていう項目は非表示にしちゃっていいかもしれませんね。


# インデントサイズの設定がスペースとタブで区別されるようになった

https://code.visualstudio.com/updates/v1_74#_new-indent-size-setting

以前はインデントサイズはTab Sizeで設定していましたが、Indent Size(スペース数)の設定が別に追加されて区別されるようになりました。
スペース派への配慮か（違う

# Gitリポジトリにもセーフ・アンセーフの概念が導入

https://code.visualstudio.com/updates/v1_74#_manage-unsafe-git-repositories

以前からプロジェクトにはセーフとアンセーフの概念がありましたが、そのGitリポジトリ版が追加されたようです。

# TerminalでのQuick Fixが改良

https://code.visualstudio.com/updates/v1_74#_terminal-quick-fix-improvements

以前の記事でGitコマンドを打ち間違いしたときに正しいコマンドをサジェストする機能を紹介しましたが、その機能が改良されました。
https://qiita.com/ckbys/items/1ef11a6670cfe4cde2aa#git-similar-command

ターミナルに💡アイコンが表示されたら、クリックするとQuick Fixメニューが表示されて正しいコマンドが選べるようになりました。

# Terminalでの新規タブ作成メニューにタスク関連のメニューが追加されました

https://code.visualstudio.com/updates/v1_74#_task-actions-in-the-terminal-dropdown

- Run Task
- Configure Tasks

Run Taskの場合はタスクが実行されてTerminal部分にログが表示されます。
僕は現状タスク使ったりしてないのですが、使ってる場合はタスクごとにタブ表示できるので便利ですね。

# TypeScript4.9対応

https://code.visualstudio.com/updates/v1_74#_typescript-49

TypeScript4.9に対応しました！

# JavaScript/TypeScriptでreturnから関数定義にジャンプ

https://code.visualstudio.com/updates/v1_74#_go-to-definition-on-return

JavaScript/TypeScriptで`return`キーワードにカーソルがある状態でF12を押すとその関数の宣言にジャンプするようになりました。
これどこの`return`なんだ？っていうときに便利ですね。
これを使わなきゃいけない時はリファクタリングするべきかなとは思いますが（笑）
Magento2.3.5でElasticsearchを使用する

# 初めに
[サンプルデータを入れるためにあえて古いバージョンを入れたMagento](https://qiita.com/ryugyoku/items/333b7bbdd49c1cc97429)ですが、V2.3.5では検索エンジンがMySqlでした。これをElasticSearchに変更します。

# /etc/elasticsearch/elasticsearch.ymlの編集

赤線部分（```clust```）を```node.name```で定義した **My First Node** に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56044/d3b82978-502a-34e5-7365-a4628d9b6161.png)

その後、elasticsearchを再起動します。ちなみにelasticsearchのログは```/var/log/elasticsearch/```の下にあります。
```
sudo systemctl daemon-reload
sudo systemctl restart elasticsearch.service
```

# Magento側の設定変更

エンジンの設定は```Stores - Configuration - Catalog - Catalog Search```の中にあります。

```Use system value```のチェックを外しElasticsearchを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56044/44674216-f5e3-fee4-d265-fec5b3719f41.png)

このボタンで接続確認を行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56044/c880fadc-9035-0a28-76e6-906b225f1e8b.png)

以下の表示が出れば接続確認OKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56044/ca0b2e5d-ef1b-d67e-ec6f-a1d4860103c1.png)

```Save Config```します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56044/f562560b-629d-6a35-84e4-1da379f5e670.png)


これだけだと何も出力されないので、キャッシュとインデックスを作り直します。
```shell-session
$ bin/magento indexer:reindex
Design Config Grid index has been rebuilt successfully in 00:00:00
Customer Grid index has been rebuilt successfully in 00:00:00
Category Products index has been rebuilt successfully in 00:00:00
Product Categories index has been rebuilt successfully in 00:00:00
Catalog Rule Product index has been rebuilt successfully in 00:00:00
Product EAV index has been rebuilt successfully in 00:00:01
Stock index has been rebuilt successfully in 00:00:00
Inventory index has been rebuilt successfully in 00:00:00
Catalog Product Rule index has been rebuilt successfully in 00:00:00
Product Price index has been rebuilt successfully in 00:00:01
Google Product Removal Feed index has been rebuilt successfully in 00:00:00
Google Product Feed index has been rebuilt successfully in 00:00:00
Catalog Search index has been rebuilt successfully in 00:00:02
$ bin/magento cache:flush
Flushed cache types:
config
layout
block_html
collections
reflection
db_ddl
compiled_config
eav
customer_notification
config_integration
config_integration_api
google_product
full_page
config_webservice
translate
vertex

```

おしまい。
たった12行でユーザー定義型ガードを型安全に書けるライブラリを作った

# はじめに

ユーザー定義型ガード、使ってますか？こんなやつです

```ts
const isString = (value: unknown): value is string => typeof value === 'string'
```

こういうやつを型安全に書けるライブラリを12行で作成しました
以下はその実装です
コピペでもいいですし、 [predicatory](https://www.npmjs.com/package/predicatory) という名前で npm に公開してるのでそこからインストールすることもできます

```ts
const excludeSymbol = Symbol()

const factory =
  <I, O extends I>(
    extract: (value: I) => O | typeof excludeSymbol
  ): ((value: I) => value is O) =>
  (value: I): value is O =>
    extract(value) !== excludeSymbol

export const guard = Object.assign(factory, {
  exclude: excludeSymbol,
} as const)
```

次のように使うことができます

```ts
// これは `(value: unknown) => value is string` になる
const isString = guard(value => typeof value === 'string' ? value : guard.exclude)
```

# ユーザー定義型ガードの問題点

なぜこんなものを作ろうと思ったかというと、ユーザー定義型ガードを自前で実装しようとすると問題があるからです
具体的には型安全ではありません

上に挙げた `isString` 関数(引数として受け取ったものが `string` 型かどうかを判定するユーザー定義型ガード)を例にすると、以下のように条件式を反転させてもコンパイラは怒ってくれません

```diff
- const isString = (value: unknown): value is string => typeof value === 'string'
+ const isString = (value: unknown): value is string => typeof value !== 'string'
```

なんなら `typeof value === 'number'` とかにしてもコンパイルは通ってしまいますし、安全とは言えません
こんなシチュエーションも `guard` 関数を使えば型安全に書くことができます

```ts
// これは `(value: unknown) => value is number` になる
const isString = guard(value => typeof value === 'number' ? value : guard.exclude)
```

また、引数の型が予めわかっている場合( `Array.filter()` など)にも対応しています

```ts
type Foo = {
  foo: any
}

type Bar = {
  bar: any
}

const arr: (Foo | Bar)[] = []

// `Foo[]` になる
const foos = arr.filter(guard(fooOrBar => 'foo' in fooOrBar ? fooOrBar : guard.exclude))
```

# おわりに

スターをいただけると泣いて喜びます
https://github.com/myrear/predicatory
【備忘録】インデックス(索引)について【Oracle Database SQL】

# 1.インデックス(索引)とは
インデックス(索引)はデータの検索を高速にするためのオブジェクトです。
インデックスが設定されていない表でデータを検索する場合、問合せの条件に従って、表の先頭のデータから1行ずつ検索していきますので、データが大量にある場合には相当の時間がかかります。インデックスを設定することによって、欲しいデータにピンポイントにアクセスできるため、検索を高速化できます。

***Oracleでは、表を作成する時にPRIMARY KEY制約やUNIQUE制約を指定すると、 一意性の保証などの目的で、その列（または列の組み合わせ）に対して、 自動的に索引が作成されます。***


# 2.インデックスガイドライン
・索引を作成した方がよい場合
　　
　　大規模な表の、1%から15%程度の行を頻繁に検索する。
　　列の値が、比較的一意である
　　WHERE句の条件として、頻繁に使用される列である。
　　
・索引を作成しない方がよい場合
　　
　　列内に、異なる値がほとんどない（例えば、性別など）。
　　NULL値が多く、NULLでない値を検索しない。
　　表が小規模である。
　　
・一般に、参照整合性制約で使用される外部キー列には、索引の作成を考えるべきです。

# 3.インデックス作成方法
インデックスは、テーブルの列（カラム）に対して設定します。
　CREATE [UNIQUE] INDEX 索引名
　　ON 表名(列名 [,列名...] [ASC| DESC])
　　[VISIBLE | INVISIBLE];

以下の例では、employee表のname列に、index1という索引を作成しています。
 ```
　CREATE INDEX index1	
　　　ON employee (name);
```

表の列にインデックスが設定されると、インデックスが設定された列の値と、その物理的な格納場所（ROWID）を登録します。
表に設定されたインデックスは、表に対してDML文を実行する度にメンテナンス（必要であれば更新）されます。

# 4.インデックスの削除
索引を削除するには、DROP INDEX文を使用します。
DROP INDEX文では削除する索引を指定します。
DROP INDEX 索引名
```
DROP INDEX index1;
```

# 5.インデックスの留意点
* インデックスのは1つの列に対してだけでなく、列の組み合わせに対しても作成できます。
* ***インデックスは検索条件にマッチするデータの件数が少ない場合に有効です。***
* 1つの表に多数のインデックスを作成すると、表の行データ変更時の負荷が増加します。
* インデックスを定義した表が削除されると、そのインデックスも一緒に削除されます。
* インデックスを設定した表と、インデックスを別の表領域格納することができます。
* インデックスを設定した表と、インデックスを別のスキーマに格納することもできます。