OmniAICreator/Qiita-1.07M huggingface dataset:
Cargoについて学ぶ

# Cargoとは
* Rustのビルドシステムであり、パッケージマネージャです。
* コードのビルドやコードが依存しているライブラリのダウンロードや、それらのライブラリのビルドを行ってくれます。

Cargoは、rustの公式のインストーラを使用していれば、勝手にインストールされます。

```
❯ cargo --version
cargo 1.48.0
```

## cargoでプロジェクトを作成してみる
* まずはじめに、**hello_cargo**という名前の新しいバイナリの実行可能ファイルを作成します。
* **cargo new**に渡した**--bin**引数で、バイナリを作成します。

```
❯ cargo new hello_cargo --bin
     Created binary (application) `hello_cargo` package
```

* hello_cargoディレクトリにいき、中を見てみると2つのファイルと1つのディレクトリを確認できます。
* Cargo.tomlファイルと、中にmain.rsファイルがあるsrcディレクトリです。
* また、 .gitignoreファイルと共に、新しいGitリポジトリも初期化されています。

```
❯ cd hello_cargo
❯ tree .
.
├── Cargo.toml
└── src
    └── main.rs

1 directory, 2 files
```

* Cargo.tomlを見てみる。

[下記は、**cargo new**で生成されるもの]

* Cargo.tomlはCargoの設定フォーマットです。
* [package]は、後の文がパッケージを設定していることを示すセクションヘッダーです。
* [package]の後に3行あるもの(name,version,authors)は、Cargoがプログラムをコンパイルするのに必要な設定情報です。

* [dependencies]は、プロジェクトの依存を列挙するためのセクションを示しています。

```Cargo.toml
[package]
name = "hello_cargo"
version = "0.1.0"
authors = ["yo-koitabashi <XXXX@XXX.com>"]
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
```

## src/main.rsを変更し、ビルド実行してみる
* Cargoは、ソースファイルがsrcディレクトリにあることを期待します。
* 今回は、下記のコードでビルドしてみようと思います。

```src/main.rs
fn main() {
    println!("Hello, world!");
}
```

### ビルド
* ビルドの実行は下記のコマンドを実行できます。

[cargo buildコマンドで作成されるもの]

* カレントディレクトリではなく、**target/debug/hello_cargo**に実行可能ファイルを作成します。
* 最上位に新しいファイル**Cargo.lock**を作成します。このファイルは、自分のプロジェクトの依存の正確なバージョンを追いかけます。

```
❯ cargo build
   Compiling hello_cargo v0.1.0 (/Users/yoshitaka.koitabashi/Desktop/rust勉強用/rust-cargo1-3/hello_cargo)
    Finished dev [unoptimized + debuginfo] target(s) in 5.41s
```

```
❯ ls -la
total 24
drwxr-xr-x   8 yoshitaka.koitabashi  staff  256  3  2 23:28 .
drwxr-xr-x   3 yoshitaka.koitabashi  staff   96  3  2 23:10 ..
drwxr-xr-x  10 yoshitaka.koitabashi  staff  320  3  2 23:28 .git
-rw-r--r--   1 yoshitaka.koitabashi  staff    8  3  2 23:10 .gitignore
-rw-r--r--   1 yoshitaka.koitabashi  staff  142  3  2 23:28 Cargo.lock
-rw-r--r--   1 yoshitaka.koitabashi  staff  233  3  2 23:10 Cargo.toml
drwxr-xr-x   3 yoshitaka.koitabashi  staff   96  3  2 23:10 src
drwxr-xr-x@  5 yoshitaka.koitabashi  staff  160  3  2 23:28 target
```

* 下記のコマンドで実行可能ファイルを実行できます。

```
❯ ./target/debug/hello_cargo
Hello, world!
```

### コードをコンパイルし実行する方法
* **cargo run**コマンドを使用すると、コードをコンパイルし、吐かれた実行可能ファイルを1コマンドで実行することができます。

```
❯ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.00s
     Running `target/debug/hello_cargo`
Hello, world!
```

### コンパイルできることを確かめる方法
* **cargo check**コマンドを使用すると、実行可能ファイルは生成せず、コードを確認しコンパイルできることを確かめます。

```
❯ cargo check
    Checking hello_cargo v0.1.0 (/Users/yoshitaka.koitabashi/Desktop/rust勉強用/rust-cargo1-3/hello_cargo)
    Finished dev [unoptimized + debuginfo] target(s) in 0.06s
```

### リリースビルドを行う方法
* **cargo build --release**コマンドを使用すると、最適化を行なってコンパイルすることができます。
* このコマンドは、**target/debug**ではなく、 **target/release**に実行可能ファイルを作成します。
【MAMP環境】新アプリ作成コマンド・初期設定



##◆ アプリケーションを作成する

###１）composerインストール済みの場合

```
$ cd /Applications/MAMP/htdocs/
$ composer create-project laravel/laravel --prefer-dist test1 
　　＊＊アプリできる＊＊
$ cd test1
$ chmod -R 777 storage
$ chmod -R 777 bootstrap/cache
※ -R	ディレクトリ内の複数のファイルも変更対象とする
```

###２） composerのインストール未の場合
```
$ cd /Applications/MAMP/htdocs/ 
$ curl -sS https://getcomposer.org/installer​ | php 
$ sudo mv composer.phar /usr/local/bin/composer 
$ composer -V 
$ composer create-project laravel/laravel --prefer-dist blog 
$ cd blog/ 
$ chmod -R 777 storage 
$ chmod -R 777 bootstrap/cache
```

##◆ 初期設定(アプリ作成後)
###１）config/app.php
```
'timezone' => ‘UTC’           'timezone' => ‘Asia/Tokyo’
'locale' => ‘en’                   ‘locale' => ‘ja’
'faker_locale' => 'en_US’,    'faker_locale' => ‘ja_JP’
```

###２）.env
```
APP_NAME=Laravel          APP_NAME=Name
※MAMPの設定(公式サイトにあり)
DB_PORT=3306               DB_PORT=8889
DB_DATABASE=laravel     DB_DATABASE=test1
DB_PASSWORD=             DB_PASSWORD=root
※追記
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
```

###３）app/Providers/
```
※mysqlの文字コードが対応していない時に必要
※2箇所追記
use Illuminate\Support\Facades\Schema;
public function boot()
{
Schema::defaultStringLength(191);
}
```

__以上！__
【Vue.js】開発環境構築

# Vue.js 開発環境構築
Vue.jsの環境を作るには主に２つのやり方がある

# 種類

CDNからの読み込み（とりあえず開発絵少し触ってみたいなくらい）
- Vueが用意してくれているサーバーから読み込み

ローカルにnpmインストール（本格的に本番環境などで運用したい場合）
- プラスでvue-cliをインストールすればもっと作りやすくなる

## Vue.jsの環境を作るには主に以下２つのやり方がある
### ① CDNからの読み込み（とりあえず開発で少し触ってみたいなくらい）
Vueが用意してくれているサーバーから読み込み
その中でも、開発用と本番用がある
開発用：```<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>```
本番用：```<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>```

※CDNはちょっとしたコードを書いてテストしてみたいという時に使う程度

### ② ローカルにnpmインストール（本格的に本番環境などで運用したい場合）
プラスでvue-cliをインストールすればもっと作りやすくなる


※開発の現場ではほぼほぼVue-CLIを使用。CDNで開発することはほぼない
RxSwift ボタンのタップを検知してViewModelに処理してもらう

#記事を書こうと思ったきっかけ
MVVM設計でボタンタップを

```swift
registerButton.rx.tap.subscribe(onNext: {
    viewModel.createUser()
}).disposed(by: disposeBag)
```
みたいに書いていたんですけどなんかこれってViewModelの責務なんじゃないのかなと思いモヤモヤするので調べてみました。

#実装
ViewModelを以下のようにします。

```swift
protocol ViewPresentable {
    typealias Input = (
        buttonTapped: Driver<()>, ()
    )
    
    var input: ViewPresentable.Input { get }
}

class ViewModel: ViewPresentable {
    var input: ViewPresentable.Input
    
    
    private let bag = DisposeBag()
    
    init(input: ViewPresentable.Input) {
        self.input = input
        
        self.input.buttonTapped.drive(onNext: {
            print("tapped")
        }).disposed(by: bag)
    }
}

```

次にViewControllerです。

```swift
class ViewController: UIViewController {

    @IBOutlet weak var button: UIButton!
    private var viewModel: ViewPresentable!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        viewModel = ViewModel(input: (
            buttonTapped: button.rx.tap.asDriver(), ()
        ))
    }


}
```

これでボタンをタップしてみると

```
tapped
```
できました。
ここで重要なのは
inputの

```
typealias Input = (
        buttonTapped: Driver<()>, ()
    )
```
と

```
viewModel = ViewModel(input: (
            buttonTapped: button.rx.tap.asDriver(), ()
        ))
```
ですね。

少し成長できた気分です。
UIの更新だけなら最初のやり方でもいいかもしれないですが、ビジネスロジックなども伴う時はこんな感じで書いた方がいいのかな？と思います。

指摘などありましたらよろしくお願いいたします。
【Python】ログを出力する

pythonを使用してExcelファイルの操作を勉強しています。
本日の気づき(復習)は、ログの出力に関してです。
pythonでExcelを操作するため、openpyxlというパッケージを使用しています。

今まではとりあえずプログラムを記述することに注力してきました。
今後の事を考えると、ちゃんと処理が実行できているか確認するためにログを出力していきたいです。

# loggingモジュール
標準ライブラリなので追加インストールは必要ありません。
https://docs.python.org/ja/3/library/logging.html

今回はこちらで入力した数だけブックを作り、一緒にログファイルも作る記述をしてみます。
ログファイルには処理の開始と終了、エラー発生時にログが出力されるようにしたいです。

# logging.basicConfigメソッド

```python
logging.basicConfig(filename=ログのファイル名, level=ログのレベル, format=ログの書式)
```

上記の記述でログのファイル名や書式を指定します。
format引数に指定す出来る書式は下のページをご確認ください。

https://docs.python.org/ja/3/library/logging.html#logrecord-attributes

ログ出力を行うメソッドはログのレベルごとに用意されています。
レベルは出力する内容(重要度)によって使い分けが出来るので
該当するレベルのログのみを抽出する事が出来ます。

- logging.debug()
- logging.info()
- logging.warning()
- logging.error()
- logging.critical()

下に行くほど重要度が高いです。
basicConfigメソッドのlevel引数に指定したレベルよりも低いものは
ログファイルには出力されません。

```python:例
level=logging.WARNING
-->DEBUG,INFOレベルのログは出力されない
```

後、気を付けないといけない点は、Windouwsの場合
作成されたログファイルの文字コードはCP932になるということのようです。
Windouwsにもとからあるメモ帳を使えば大丈夫な様ですね。

```python:logging_create_book.py
import logging
import sys

from openpyxl import Workbook

logging.basicConfig(filename='create_book.log',
                    level=logging.INFO,
                    # ログの書式を、「日時」「レベル」「ログメッセージに設定」
                    format='%(asctime)s: [%(levelname)s] %(message)s')

logging.info('処理を開始しました')
try:
    count = sys.argv[1]
    for i in range(int(count)):
        wb = Workbook()
        ws = wb.active
        ws.title = '概要'

        file_name = f'資料_{i + 1}.xlsx'
        wb.save(file_name)

        logging.info('ブックを作成しました: %s', file_name)

# 例外が発生した場合スタックトレースを出力
except Exception:
    logging.exception('例外が発生しました')

logging.info('処理が終了しました')
```

ここでも、見慣れない言葉が出てきました。

# スタックトレース
スタックトレースは、プログラムで例外が発生した際に、

- どのように関数が呼び出されたのか
- どこでエラーが発生したのか

を特定できる情報です。
不具合発生時の原因究明に、重宝されます。

```python:sample.py
import traceback

def a():
    b()

def b():
    c()

def c():
    char = None
    char.format('hello')

try:
    a()
except Exception as e:
    print(traceback.format_exc())
```

こちらを実行すると

```
$ python3 sample.py 

Traceback (most recent call last):
  File "sample.py", line 14, in <module>
    a()
  File "ssample.py", line 5, in a
    b()
  File "ssample.py", line 8, in b
    c()
  File "ssample.py", line 12, in c
    char.format('hello')
AttributeError: 'NoneType' object has no attribute 'format'
```

英語がたくさん表示される為か見ているだけで気がめいりますが、よ～く読むと
sample.pyの12行目（line 12）で、c()関数（in c）にある、char.format('hello')
でエラーが発生し、
エラー内容は'NoneType' object has no attribute 'format'
ということがわかります。
こんな感じで、どうやってエラーになったかがわかると修正もしやすいですね。

今回は個人的にちょっとレベルが高かったように感じます。

Railsの時もそうでしたが、調べていくうちにわからないことが増えて行って
取り返しがつかない時がちょくちょくおきます。

一旦諦めて、進んでまたエラーが出たらその時にまた調べることにします。
ということで、今回はここまでです。
【Vscode plugin】Vetur

# Vetur
Vue.jsに関するvscodeの拡張機能

# 読み方
ビーターらしい

# サポート一覧
- シンタックスハイライト
- スニペット
- Emmet
- コードチェック（linting/Erorr Check）
- オートコンプリート

## vscodeでのメッセージ

Veturは見つけることができませんtsconfig.json、jsconfig.json/ XXXX / XXXXXXで。
あなたがいずれかを持っていない場合はtsconfig.json、jsconfig.jsonプロジェクトで、Veturは、フォールバックの設定を使用します。パスエイリアス、デコレータ、インポートjsonなどの一部の機能は機能しません。

この構成をプロジェクトの正しい位置に追加するか、を使用vetur.config.jsしてファイルパスを設定できます。


これから編集予定↓

vscodeでアラート

```
Vetur can't find `tsconfig.json` or `jsconfig.json` in ディレクトリパス
```

# Vetur公式
https://vuejs.github.io/vetur/
【Xcode12】Libraryを常時表示させる方法

# 環境
- Xcode: 12.5.1

# Libraryの常時表示方法
- **optionキーを押しながらLibraryボタン（+）クリック**

![スクリーンショット 2021-03-02 23.24.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999511/7c2a9c11-69c3-f785-03c7-dd36cc06a6fa.png)![スクリーンショット 2021-03-02 23.27.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999511/e391e9da-e17a-9a1d-3a6c-a1c9992480fa.png)

連続してObjectsを追加する際などに有用です。
【JavaScript】RGBメソッドの使い方

# RGB 関数

## これが元になって調査
```
// RかGかBの値が変わったら、できた色を算出する
mixColor: function() {
    var ans = "RGB("+this.R+", "+this.G+", "+this.B+")";
    return ans;
},

```

## 構文

```
RGB(赤、緑、青)
```

## 確認画面
３つのスライダー動かしたら指定した部分のbackgroundColorが変化します！
![スクリーンショット 2021-03-02 23.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/979873/226fd7c5-d856-0fe5-d462-2544e0ca4620.png)
【JavaScript】clearIntervalメソッドの使い方

# clearInterval()

setInterval()でセットしたタイマーを解除する


## これが元になって調査
```
methods: {
    startTimer: function () {
        // 残り5秒
        this.restSec = 5;
        // タイマースタート。1秒（1000ミリ秒）ごとに、1秒減らす
        this.timerObj = setInterval(() => {
            this.restSec--;
        }, 1000)
        // console.log(this.timerObj);
    }
},
watch: {
        restSec: function() {
            // 0秒以下になったらアラート&タイマー停止
            if (this.restSec <= 0) {
                alert("制限時間です。");
                clearInterval(this.timerObj);
            }
        },

}
```

## 参考
http://www.htmq.com/js/clearinterval.shtml
webpackとは？

#webpackとは

1. Webアプリケーションを作成する際に必要な、<br>`様々なJavaScriptをひとまとめに管理する`為のツール
2. モダンなWebアプリケーション開発では、<br>様々なJavaScriptライブラリを用いる為、`その依存関係を管理`してくれる

>
以前取り上げた[機械語と人間語](https://qiita.com/iamu_TECH_CAMP/items/0587f0d14543652d685f)とも関連しています。
>
[webpackの公式ドキュメント](https://webpack.js.org/)こちらも参考として添付します。

##webpackが行うこと

| 基本要素 | 読み | 役割 |
|:-:|:-:|:-:|
| Entry | エントリー | 依存関係を解決するために、<br>どのファイルを基準（エントリーポイント）とするかを決める |
| Output | アウトプット | エントリーポイントにされ、<br>webpackによってまとめられたファイルを、<br>どこへどのような名前で出力（アウトプット）するのか指定する |
| Loaders | ローダー | JavaScript以外のCSSやHTMLなどのファイルを<br>モジュールに変換する方法を読み込み（ロード）、指定した処理を行う |
| Plugins | プラグイン | 圧縮などの、ファイルをまとめる以外で<br>ローダーが実行できないタスクを導入し、拡張（プラグイン）する |

>
webpackを用いることで、JavaScriptのライブラリとJavaScript以外の
`さまざまな言語を、変換・圧縮した上で、好きな場所に配置することが可能`


#WebpackerというGem

Railsにも`webpack`を導入してコマンドによる操作が可能だが、
設定ファイルの記述がやや難しくなっている
そのため、設定を簡易化してくれる`WebpackerというGem`を使用

##Webpacker

`webpack`をRails仕様にし、専用の設定ファイルやヘルパーメソッドを用意してくれるGem

>
Railsバージョン6系以降からは、デフォルトで`Webpacker`が導入される

近年のフロントエンド技術の台頭により、
（主には、JavaScriptのライブラリが充実してきたこと）
Sprocketsから`webpack`を利用する方針へ転換された

[Webpackerの公式GitHub](https://github.com/rails/webpacker)

`Webpacker`によって、
Sprocketsのアセットパイプラインと同じような静的ファイルのプリコンパイルに加え、
JavaScriptのパッケージが利用できるようになる
そうだ、SQLの勉強をしよう23

#はじめに
そろそろ、SQLについての基本的なことについては知ることができてきたと思います。
これからは手を動かして、自分の思い通りの結果を得られるように定着を図っていこうと思います。

本日は、あまり学習していないので、内容が薄いです…

##自動的に連番を振る列に指定する方法

```sql
CREATE TABLE テーブル名(
列名(IDなどが適切) INTEGER PRIMARY KEY AUTO_INCREMENT
)
```

`AUTO_INCREMENT`の記述をすることで、データが追加されたタイミングで自動的に連番が振られます。
フロントエンジニアが本気でCSSだけで「リアルなビー玉」を作る

# どうも7noteです。再現シリーズ今回はビー玉に挑戦してみました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/a27fbd94-8fec-ab16-5218-dff15cedd7a7.png)


ビー玉、水晶玉、ガラス玉、、、今回のはなかなかの力作です。
[鏡餅](https://qiita.com/7note/items/34217d2b926efa32bf40)を作った時とは比にならないくらいリアルに作れました・・・

いったいなんの役に立つかわからないですがただただ楽しいですね。

## ソース

```index.html
<div class="b-dama"></div>
```

```style.css
.b-dama {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #182879;
  background-image: radial-gradient(90% 90% at 65% 80%, #48bffe 20%, transparent);
  box-shadow: -7px -20px 7px -10px rgba(26,68,111,0.9) inset, 0px 30px 5px -10px rgba(0,0,0,0.3), inset 0 0 10px 0px #fff, inset 0 0 25px 0px #fff;
  position: relative;
}

.b-dama::before {
  content: "";
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  background: radial-gradient(12% 9% at 42% 21%, #fff 45%, transparent), radial-gradient(8% 3% at 52% 95%, #53FAFF 15%, transparent);
  box-shadow: -2px 67px 8px -40px #dbf2ff;
  transform: rotate(-33deg);
  position: absolute;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/858eca07-dd45-5fe1-ca58-2d7e73006a8a.png)

## まとめ

個人的に気に入っているのは光が透けてちゃんと地面に水色の光が差し込んでいるあたりですかね。
また思いついたらいろいろ書いてみたいと思います。

参考：https://oekaki-zukan.com/articles/7902

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Vercelの登録をGitHubアカウントで行ったらブロックされた件+その対応メモ

# はじめに
私は[自分サイト](https://hagiayato.github.io/my-site/)、[自作静的webアプリ](https://hagiayato.github.io/my-site/works/)の公開をGitHub Pagesでおこなっておりますが、同じことを
Vercelでもおこなうことができます。
[こちらの動画](https://www.youtube.com/watch?v=UuX8xPx8rWo)でVercelに興味を持ち、GitHubのアカウントで登録(sigh up)をしたところ、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/59259278-daee-eb1f-5604-f6d1ef92fe3d.png)
<font color="red">「Error:This user account is blocked. Contact support@vercel.com for more information.」</font>
このようなエラーが出て、何やら登録がブロックされたようです。
ページを再読み込みしても登録がブロックされたため、色々と対応してみることにしました。
# 対応
### サポートにメールを出す
ブロックの詳細について、エラーメッセージではサポートにメールしてほしいと書いてありました。
ということで早速サポートにメールで

- ブロックの原因
- ブロックを解消するために私は何をすればいいか

を問い合わせてみました。(超久しぶりの英文メール)

```メール本文.txt
Dear customer support,

My name is (GitHubアカウント名), an IT engineer in Japan.
(※ここに、登録時に使ったアカウントのリンクを貼る)

I tried signing up to vercel by My GitHub account for learning.
However it's blocked with the following message.
「Error:This user account is blocked. Contact support@vercel.com for more information.」

So please let me know
・Why it's blocked?
・How can I succeed in signing up?

I look forward to hearing from you.

Sincerely,
```

### 返事が来た
メールを出したのは日本時間2021/3/2の夜でしたが、その1時間後にサポートから返信が来ました。
(サポートが迅速!)
その内容は…

```
// 申し訳ありませんが、あなたのアカウントは不正使用防止システムに引っ掛かりました。これはエラーのようです。
My apologies — your account was flagged by our abuse prevention system, it looks like this was an error.

// 不正使用防止システムによるブロックを、今解除しました。
I have now unblocked your account. 
```

このメールを受け取った後に再度Vercelにアクセスしたところ、問題なくVercelにログインできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655112/8b5051a2-95f9-aea9-e320-606e4657e73b.png)

### 考えられる原因は…?
実はGitHubのアカウントでVercelに登録した際、"Continue with GitHub"ボタンを2度押したからかアカウント連携画面を2つ出しておりました。
これでアカウント連携処理が不正扱いになっていたのかもしれません。

# おわりに
Vercelの登録時にアカウントがロックされた場合は、エラーメッセージの通りにサポートにメールを送れば対応できます。同じような事象が発生した際の参考になればと思います。
【jquery,js】表示されたcsvを並べ替える[sort,join,trim,split,each] [js10_20210302]

####  <font color='orange'>処理の概要</font>
テキストエリアに表示されたcsvデータを読みの順で並べ替えを行います。

##### 処理のフロー：
　(1)初期化メソッドでテキストエリアにcsvテキストを表示します。
　(2)実行ボタンを押下するとテキストを取得します。
　(3)指定の文字列を取得し、任意のカラムで比較を行います。
　(4)テキストエリア2にソートしたテキストを表示する

####  <font color='orange'>画面イメージ</font>

#####画像１
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/45fb203d-a7f9-93e0-c888-f7e7d5235898.png" width="300px">

#####画像２
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/abe1f9c7-dda9-38a7-31ba-77e766894bd0.png" width="300px">


####  <font color='orange'>ソースコード</font>
```html:index.html
<body onload="init()">
	<!-- テキストエリア表示内容はタブ入力されるので、インデント注意 -->
	<textarea id="beforeUserInput"></textarea>
	<br>
	<input type="button" id="execSortButton" value="並べ替え">
	<br>
	<textarea id="afterUserInput"></textarea>
</body>
```

#### リファクタリングする前
```javascript:main.js
function init(){
    var lobjText = ""
    var defaultStr = [
        ["蜜柑","みかん",80],
        ["西瓜","すいか",300],
        ["葡萄","ぶどう",280]
    ]
    
    $.each(defaultStr,function(){
        lobjText = lobjText + this + "\n";
    });
    $("#beforeUserInput").val(lobjText)
};

$(function() {
    $("#execSortButton").click(function(){
        var sortItem = $("#beforeUserInput").val();
        sortItem = sortItem.trim();
        var sortArray = sortItem.split("\n");
        // 列数を指定
        var sortColumnNum = 2;

        sortArray.sort(function(sortName1,sortName2){
            //ソートする対象となる列数を格納する
            var strNumber = sortColumnNum - 1
            var compareNameA = sortName1.split(",")[strNumber];
            var compareNameB = sortName2.split(",")[strNumber];

            if (compareNameA < compareNameB) return -1;
            if (compareNameA > compareNameB) return 1;
            return 0;
        });

        outputText = sortArray.join("\n")
        $("#afterUserInput").val(outputText);
        
    });
});
```


####  <font color='orange'>ポイント</font>
html：
(1)特になし
js：
(1)sortItemの前後に無駄な改行や、タブ文字、半角スペースが存在しないように除去する。
この方法は、「trim()」を利用する
(2)ソート処理は、sort()関数の引数に関数を指定することで複雑な条件でソートが行える。
(3)join()は配列に対して、セパレーターをドッキングさせて文字列とする。
引数がない場合は、カンマでドッキング。
[a,b,c].join() => "a,b,c"
(4)split()は引数を入力すると、セパレータを排除して、配列に変換する。
"a\nb\nc".split(\n) => [a,b,c] 便利！

####  <font color='orange'>参考資料</font>
JavaScript(仕事の現場でサッと使える！デザイン教科書)　p210
[Rails] 変数の中身が空か確認するメソッド

Railsで `view` `model` `controller` でも変数の中身が空か確認したいときに以下のメソッドを使います。

#nilメソッド
`nil?`
オブジェクトがnilの場合のみ `true` を返し、それ以外は `false` を返します。空文字や配列の器、ハッシュの器だけでも全てfalseを返します。

#emptyメソッド
`empty?`
`String(文字列)`、 `Array(配列)`、 `Hash（連想配列）` 定義されているメソッドです。空の文字列や空の配列の場合にtrueを返します。nilや真偽値オブジェクトに対して呼び出すと `NoMethodError` が発生するので、気をつけましょう。

#blankメソッド
`blank?`
blankメソッドを使用したオブジェクトが空白の場合は `true` を返し、空白ではない場合は `false` を返すメソッドです。`〜が存在しないとき` の条件分岐でよく使います。

#presentメソッド
`present?`
blankメソッドの逆(`!blank?`)で、オブジェクトが空白ではない場合に `true`を返し、空白の場合は `false` を返します。 `〜が存在するとき` の条件分岐でよく使います。

`if hoge.present?`と `unless hoge.blank?` は同じ意味になりますが、前者を使った方がわかりやすいです。
dockerでgemを追加したときにbundle installではなくbuildする

備忘録的な感じです

題名にある通りDockerでrails開発をしていてgemを追加した後

```
$ docker-compose run --rm (コンテナ名) bundle install
```
を試したらgemが更新されずエラーになる

```
$ docker-compose build
```
でエラーも出ず解決した。


色々調べていたらdockerfileの

```Docker:Dokerfile
FROM ruby:2.6.6
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN mkdir /rails-qanda
WORKDIR /rails-qanda
COPY Gemfile /rails-qanda/Gemfile
COPY Gemfile.lock /rails-qanda/Gemfile.lock
RUN bundle install
COPY . /rails-qanda
```

のCOPY Gemfile /rails-qanda/Gemfileが
[COPY]　ローカルのファイルをコンテナへコピー
という意味らしいのでgemを追加したらここの部分やり直すためにbuildし直すということなのかな。

また理解が深まり次第追記予定

docker難しい、、
Lightning Experience のナレッジの基本 ⇒ 簡単な知識ベースの設定

１．Lightning Knowledge の設定フローを使用して、何を設定できますか?
２．記事の概要はどこに表示されますか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/a63c732d-a2bc-8d89-9fa1-0aabd2bef9da.png)
プログラミング初心者でもできる laravel で hello world 画面に表示させるまでの道のり

# 前提
* Macbookでの操作になります。  
* ターミナルがなんなのかがわかるくらいのレベルの人向けの記事です。
* laravelが使える段階まで環境構築を済ませていること。
* php, homebrew, compser をインストールし終わって環境構築を完了している人
* ここでは初心者向けに難しい単語などをイメージができるような説明をするため  
  実際の意味とは異なる説明をするかもしれません。上級者の方は見て見ぬ振りでお願いします。  

# プロジェクトの作成
いきなり専門用語でてきますね。
プロジェクトの意味をなんとなくイメージできるように一つ例えをしましょう。

あなたはパキラの種を持っていました。
家の中でパキラを咲かせたいです。
まずやらなければいけないのは器を用意することです。
器がないと何も始まりません。
器があって初めて土を入れられます。

![pakira.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387055/357240e9-3a7a-ed1a-7fc1-b8c4afe3538a.jpeg)


プロジェクトはその器だとお考えください。
そしてhello worldを表示させることはパキラ育てること(目的)だと思ってください。

チューリップを育てたい(hello meの表示をしたい)って思った場合でも
やはりまずは器(プロジェクト)がないと何も始まりません。
まずは器(プロジェクト)を手に入れましょう。

これでだいたいイメージはつきましたでしょうか？

では器を手に入れる(プロジェクトを作成する)にはターミナルで下記のコマンドをコピペしましょう。
※現在いるディレクトリにプロジェクトが作成されるため、プロジェクトをおきたい場所に移動してから
下記のコマンドをいれましょう。

```terminal
composer create-project laravel/laravel pakira
```

pakiraはプロジェクト(器)の名前です。
pakiraの部分は何をつけても構いません。練習の時は。

# 動作確認
※ここからは器の話は忘れてくださいね？頭を切り替えていきましょう。

作ったプロジェクトにディレクトリを移動し下記のコマンドを実行する

```
php artisan serve
```
`Starting Laravel development server: http://127.0.0.1:8000` みたいな結果が出てくるので
そのurlをchromeのurl欄にコピペする
おそらくほとんどの人は http://127.0.0.1:8000 になってるはず。
止める時は キーボードの `control + c` で
![スクリーンショット 2021-03-02 23.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387055/79bb04b2-b0ba-49ab-4bbb-ce3df601d56d.png)

自分はlaravelのバージョンが8.29.0なのでこう言う画面になってますがバージョンによって表示される内容がちょっと変わったりするそうです。
エラーとかでなければ成功です！

# APP_KEYの生成
これも専門的な言葉が出てきますね。とりあえず、laravel取り入れたらこれをやるものなんだって覚えましょう
(他の人laravelをcloneしてきた時も同じ。これを行ってください)
これがないとうまく使えない機能とかあります。そのうち、あれ？なんで動かないんだ？って
一日中原因調査する羽目になったりするかもしれないので。

```
php artisan key:generate
```

これをやると `.env` っていうファイルの中の `APP_KEY=` っていうところに英数字が追加されてます。
追加されてたら成功！

# heroku使う予定がある方
 `heroku` というサービスを使う予定であれば
heroku側でもこのkeyの設定がないとうまく動かないので
※heroku使わない方はここはスキップしてください。

```
heroku config:set APP_KEY=$(php artisan --no-ansi key:generate --show)
```

## heroku関連の設定したほうがいいもの
### エラーがweb画面で見れるようにする
config/app.php の `'debug' => (bool) env('APP_DEBUG', false),` って書いてあるところ
こいつをfalseじゃなくてtrueにすると見れるようになるはず。
42行目あたりにこの記述があると思いますが
なかったらバージョンが変わったことによっての影響なので別途必要に応じて調べれください

```config/app.php
'debug' => (bool) env('APP_DEBUG', true),
```

### Procfileを作成
これも
手動でもできますしコマンドでもできます。
ここではコマンドを使って作成する方法を紹介します。
やりたいことはアプリフォルダ直下にProcfileって言う名前のファイルを作ってコピペするだけです。

```
touch Procfile
```

```
echo 'web: vendor/bin/heroku-php-apache2 public/' > Procfile
```
Dockerコンテナ上でUSBモジュールを使う方法

Dockerコンテナ上でBWT901CL(IMUセンサ)を使おうとして，調べたことをまとめる．

やらないといけないことは以下の2点．
1. `docker run`でホストとコンテナ間でUSBデバイスのフォルダを共有する．
2. `chmod`で実行権限を与える．


# 1. ホストとコンテナ間でUSBデバイスの共有

そのときの`docker run`用のシェルスクリプトは以下のとおり

```run.sh
USER_NAME=dorebom
WORKSPACE=workspace/ros2docker/ros2_ws

docker run --rm -it --privileged \
        --gpus all \
        --device=/dev/ttyUSB0:/dev/ttyUSB0 \
        -v /tmp/.X11-unix:/tmp/.X11-unix \
        -v /etc/localtime:/etc/localtime \
        -v /home/$USER_NAME/$WORKSPACE:/home/developer/ros2_ws \
        -e DISPLAY=$DISPLAY \
        --name ros2test \
        ros2docker:foxy
```
ここで，今回のUSBデバイスのアドレスは`/dev/ttyUSB0`であったので，`--device`オプションで共有．

[NOTE]その他のオプションは，Dockerコンテナ上でGPUを使うためと，ROSのGazeboなどのGUIをホスト側で利用するためのものであり，また後日解説する．

# 2. 実行権限を与える

このままでは，コンテナ内でUSBデバイスを認識できても実行できないので権限を与える．

```bash
$ sudo chmod 777 /dev/ttyUSB0
```
ここで，私の環境ではDockerコンテナ内でユーザアカウントを利用しているため，`sudo`を使用している．


## 参考にしたページ
https://qiita.com/sh-hay/items/a9fe525e496d8c8daeae
条件付きGANの精度を上げるContraGANの要約

[ContraGAN](https://arxiv.org/abs/2006.12681)というなにやら面白そうなGANの論文があったので、読んでみました。

# ContraGANってなんだ？

ContraGANは条件付きGANの一種です。通常の条件付きGANのようにデータとクラスの関係を学ぶだけでなく、2C loss(conditional contrastive loss)と呼ばれるlossを加えて、データとデータの関係を学ぶところが一番の特徴です。2C lossを加えるだけなので、DCGAN, BigGANなどに取り入れることができます。

条件付きGANの先行研究の一つに[ProjGAN](https://arxiv.org/abs/1802.05637)があります。ProjGANはBigGANにも取り入れられていますが、オーバーフィッティングやモード崩壊などの問題があったそうです。どうやらそういった問題も改善されているとのことです。

# ContraGANのアーキテクチャ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630841/35fafc13-f19b-f093-366c-eb80366a1cd8.png)

図のようにDiscriminatorの途中から分岐して、射影(MLP)した出力とクラスラベルの埋め込みを使って2C lossを計算する。
Adversarial lossと2C lossの重み付き和をトータルのlossにして敵対的学習を行う、というのが全体のアーキテクチャです。
射影$h$はパラメタライズされたMLPだったらよいようですが、論文で行った実験では線形射影でうまくいっているようです。

# 2C loss

この論文で提案されている2C lossとは、conditional contrastive lossの略語です。名前の通り、条件を付けた上で、データ間の比較も行う、ということですね。データ間の比較のアイディアはNT-Xent(Normalized Temperature-scaled Cross Entropy Loss)というアイディアにインスパイアされています。そのへんの細かい議論は原論文を読んで頂くということで省略しますが、以下のように2C lossを定義します。

```math
l_{2C}(\mathbf{x}_i, y_i; t) := -\log{\left( \dfrac{\exp{(l(\mathbf{x}_i)^{\top}e(y_i)/t)}+\sum_{k=1}^{m} \mathbf{1}_{y_k=y_ i}\cdot\exp{(l(\mathbf{x}_i)^{\top}l(\mathbf{x}_k)/t)}}{\exp{(l(\mathbf{x}_i)^{\top}e(y_i)/t)}+\sum_{k=1}^{m} \mathbf{1}_{k\neq i}\cdot\exp{(l(\mathbf{x}_i)^{\top}l(\mathbf{x}_k)/t)}} \right)}
```

ここで、記号は以下の通り用いています。

$\mathbf{X}=\\{\mathbf{x}_1, \ldots, \mathbf{x}_m: \mathbf{x}_i\in\mathbb{R}^{W\times H}\\}$: 学習画像の集合

$\mathbf{y}=\\{y_1, \ldots , y_m\\}$: 対応するラベルの集合

$D_{\phi_1}:\mathbb{R}^{W\times H}\to\mathbb{R}^k$: エンコーダ

$h:\mathbb{R}^k\to\mathbb{S}^d$: 超球への埋め込み(つまりベクトルを正規化する)-$\phi$でパラメータ化されたMLP

$t$: 温度(スカラー値)

$l=h\circ D_{\phi_i}$: 画像の超球への埋め込み

この2C lossは何しているかというと、分子の第一項

``` math
\exp{(l(\mathbf{x}_i)^{\top}e(y_i)/t)}
```
ではデータと対応するクラスの関係を近づける役割を担っています。分子の第二項

``` math
\sum_{k=1}^{m} \mathbf{1}_{y_k=y_ i}\cdot\exp{(l(\mathbf{x}_i)^{\top}l(\mathbf{x}_k)/t)}
```
では同じラベルのデータ同士の関係を近づける役割を担っています。
結局のところ、データとラベル、データとデータの関係のいずれも考慮された設計になっているわけですね。


# Total loss

トータルのlossは以下の通り。

```math
\mathcal{L}=\mathcal{L}_{\rm adv}+\lambda \mathcal{L}_{\rm 2C}
```

$\mathcal{L}_{\rm adv}$はLSGAN,WGAN,WGAN-GPでもなんでも好きなGANのAdversarial lossを選べます。

# 参考文献

1. [Kang, Minguk, and Jaesik Park. "ContraGAN: Contrastive Learning for Conditional Image Generation." NeurIPS 2020. Neural Information Processing Systems, 2020.](https://arxiv.org/abs/2006.12681)
1. [Miyato, Takeru, and Masanori Koyama. "cGANs with Projection Discriminator." International Conference on Learning Representations. 2018.](https://arxiv.org/abs/1802.05637)
1. [Brock, Andrew, Jeff Donahue, and Karen Simonyan. "Large Scale GAN Training for High Fidelity Natural Image Synthesis." International Conference on Learning Representations. 2018.](https://arxiv.org/abs/1809.11096)
1. [Chen, Ting, et al. "A simple framework for contrastive learning of visual representations." International conference on machine learning. PMLR, 2020.](http://proceedings.mlr.press/v119/chen20j.html)
Kaggle初心者の1.5歩目(初心者向けコンペ紹介)

## はじめに
こんにちは 

機械学習のコンペサイトとして有名なものに[**Kaggle**](https://www.kaggle.com/)があります．

Titanicのコンペが機械学習のチュートリアルとして有名で、やったことがある方も多いかもしれません．
https://www.kaggle.com/c/titanic

これを理解したらもう十分！
・・・とはならないと思います．
(この状態だった時代もあったと思います．ブログやQiitaで知見を充実してくださった先人の方々には本当に頭が下がる思いです)

そこで難易度が低く腕ならしにちょうど良いコンペがないかなーと探していたら良いコンペがあったので紹介します．

## Kaggle Tabular Playgroud Series

結論ですが2021年から始まったTabular Playground Seriesがとてもおすすめです．
https://www.kaggle.com/c/tabular-playground-series-mar-2021

このコンペは以下の特徴があります．

 -  データがテーブルデータ形式
 -  データ量がそこそこ大きい(100MB程度)
 - **毎月新データで開催されるコンペ**

個人的には特に一番下が強いと思っています．
Titanicって問題として有名になりすぎてしまっているので
検索すると似たことやってる人が多くてあまり試行錯誤しなくても精度が出てしまうんですよね．．．
またTitanicはテーブルコンペにしてはテーブルのデータ量やカラム数が少なく、実際のコンペと乖離しているという部分もあります．

このコンペならほどほどのデータ量で手探りしながら解いていくことになり、
コンペの期間としても長すぎず短すぎずで良いのでは？と思っています．

また画像分類や自然言語処理でなく、テーブルデータ形式なのでTitanicと同じテクニックで解けるというのもあります．

初心者なら過去のコンペのカーネル見て勉強しろというのがごもっともな意見だと思います．
しかしコンペ出たほうがテンションが上がると思うのでテンションが上がる方を選択しましょう

ちなみにこのコンペは賞金やメダルこそ出ませんが1~3位にはKaggle merchandise(おそらくTシャツとかマグカップとかシールとか)がでるそうです．

## Kaggle以外の初心者向け機械学習コンペ
Kaggleとタイトルに書きましたがKaggle以外のコンペサイトでも初心者向けコンペを見つけたのでついでに紹介します．
### SIGNATE Beggner限定コンペ
こちらは日本のサイトで[株式会社SIGNATE](https://signate.co.jp/)が主催するコンペです．
https://signate.jp/competitions/414

ユーザの称号がBegginerの場合のみ参加できるコンペです．
注意点としてはKaggleのようなJupyter Notebookの環境は用意されていないので
Google Colabなりローカルに開発環境を作るなりで環境を整える必要があります．

こちらも毎月開催されています
賞品などはありませんが、上位60%に入るとBegginerの一つ上の称号であるIntermidiateがもらえるそうです．

### atmaCup
こちらも日本のコンペで[atma株式会社](https://www.atma.co.jp/)が主催するコンペです．
 ~~https://atma.connpass.com/event/204364/~~　
追記: コンペは終了しました．次回コンペを待ちましょう．
今回のディスカッションは初心者必見です．見ましょう．

https://www.guruguru.science/competitions/16

毎回初心者向けの講座を開催しているそうなのでとっつきやすいと思います．

注意点としてはSIGNATEと同じく環境は自分で整えるということと1~2週間のオンサイトのコンペだということです．
(ただ時節柄現在はすべてオンラインです)
そしてコンペ後には振り返り会が開催されています．

こちらは定期的に開催されているようです．
~~上記URLのコンペは今週開催されるコンペです．登録しましょう．~~
追記: コンペは終了しました
入賞者には物理メダルがもらえるそうです．

## 終わりに
さて、3月のTabular Playground Seriesが始まっています．
本日は機械学習を学び始めるにはちょうど良い日ではないでしょうか？

それでは良い機械学習ライフを！
Hashcat使い方　[自分用まとめ]

# Hashcat


暗号化技術にハマっております。
悪用はしません。

### インストール

```
brew hashcat
```


```
hashcat <ハッシュモード> -b
```

秒何Hash計算できるかベンチマークを表示
hashcat -m 0 -b
ならMD5解読のベンチマーク


###マスクオプション

?l 小文字英字
?u 大文字英字
?d 10進数数字
?h 16進数数字小文字
?H 16進数数字大文字
?s 記号
?a ?l+?u+?d+?s

大小文字数字記号8文字なら

```
?a?a?a?a?a?a?a?a
```
がマスクオプション

### ブルートフォースアタック

```
hashcat -m 0 5d41402abc4b2a76b9719d911017c592 -a 3 ?l?l?l?l?l
```
オプション解説
-m 0 ハッシュモード 今回はMD5
-a 3 アタックモード 3は総当たりモード
?l?l?l?l?l マスクオプション 4桁の小文字

解読するとhelloが出てくる

### ディクショナリアタック
辞書を用意
辞書があるディレクトリ内にて

```
hashcat -m 0 d41e98d1eafa6d6011d3a70f1a5b92f0 -a 0 <辞書ファイル>
```
-a 0 アタックモード 0は辞書モード
解読するとPassw0rdが出てくる
あとからカラム属性にインデックスを追加する

###インデックス（索引）
インデックスとは検索やソートを高速化するためのデータ構造の事です。
むやみにインデックスを貼るのはデータベースリソースを余分に使うため、性能が向上するかどうかを見極めてから作成する必要があります。


モデル作成とadd_indexを同時に試みるも、

```
PG::UndefinedTable: ERROR:  relation "care_recipitents" does not exist
```
エラーを吐かれてしまったので先にモデルを作成しました。

migrationファイルを作成します。

```
rails g migration add_index_to_carerexipidents
```

```
class AddIndexToCarerexipidents < ActiveRecord::Migration[6.0]
  def change
    add_index :care_recipitents, [ :family_name_kana, :given_name_kana ]
  end
end
```
複合インデックスを作成しています。


```
rails db:migrate
```

schema.rb

```
 t.index ["family_name_kana", "given_name_kana"], name: "index_care_recipitents_on_family_name_kana_and_given_name_kana"
```


ちゃんと貼られています。
【Bootstrap】sassを用いてBootstrapをカスタマイズする方法

今回はsassを用いてBootstrapをカスタマイズする方法を整理しました。

##前提
エディター：VSCode
npm 6.13.4

Bootstrap4を使用。

##sassでカスタマイズするメリット
「Bootstrapの内容を変更したい、、、」まず思い着いたのは、自分で作成したCSSファイル上で値を上書きすることでした。
しかし実際にその方法で変更していると、CSSファイルの中身が大きくなり、複雑になってしまう。それに伴い、再度変更したくなった際に見つけるのが大変で困る困る。
そこでたどり着いたのがsassを用いたカスタマイズでした。Bootstrap4以降では、CSSの記述はsassのみが採用されているとのことです。（sassについては、[こちらの記事](https://qiita.com/daigoooooooo/items/f4f8823036d967dcb672)をご覧ください。）
sassを使うことで、変数の値を変えるだけでBootstrapの内容を変えることができるため、とても分かりやすい＆管理がしやすくなります。

##sassのダウンロード・ファイル構造
方法はいくつかあります。詳しくは[公式サイト](https://getbootstrap.jp/docs/4.1/getting-started/download/)をご覧ください。
今回はnpmを用いてパッケージをダウンロードしました。

```
$ npm install bootstrap
```
例として、`your-project`というプロジェクトがあり、`scss`フォルダに`custom.scss`という独自のscssファイルを作成している状態だとします。npmを用いてダウンロードすると、以下の様に`node_modules`というフォルダが追加され、その中に`js`や`scss`のフォルダが存在しています。

```
your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss
```

##カスタマイズの方法
`node_modules`内のBootstrapのコアファイルを修正することもできます。しかし、元に戻したくなった場合や、エラーが生じてしまった際に場所を見つけるのが困難になってしまう等の点から推奨されていません。
そこで、独自に作成した`custom.scss`にBootstrapのsassファイルをインポートし、そこで値を変更していきます。その際、Bootstrapのファイルを全てインポートする、または必要な内容だけをインポートするという方法があります。
方法は次の「軽量化」で記述します。公式で推奨されているのは後者なのですが、それぞれのファイルの内容が複雑に関わり合っているので、慣れるまでは前者の方法を使用することになるかと思います。

```scss:custom.scss
@import "../node_modules/bootstrap/scss/bootstrap";
```
あとはインポートの記述の前に変更したい値を定義するだけです。Bootstrapの全ての変数は`scss/_variables.scss`ファイルに記述されています。
公式同様、body要素の background-color と color を変更する例を次に示します。

```scss:custom.scss
$body-bg: #000;
$body-color: #111;

@import "../node_modules/bootstrap/scss/bootstrap";
```
あとはコンパイルすることで内容を変更することができます。
※CDNを用いている場合は変更内容が適応されないので、htmlのhead要素内に自分で作成したcssファイルを読み込む記述を忘れずに。

##軽量化
全てのファイルをインポートすると要領が大きくなってしまいます。そこで、軽量化を図るための方法を最後に載せておきます。

```scss:custom.scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
```
Reqiredの３つのファイルは必須です。Optionalのファイルは各自の変更したい内容に応じてインポートしてください。
pm2でnext js を永続化させる方法について。表示速度向上で試行錯誤したのでメモ

next jsを永続化し落ちないようにするために試行錯誤したのでご紹介。
next jsをAWS ec2 のような環境に直接デプロイ（npm run start）すると安定せず突然サイトが落ちることがあります。
pm2を使用すると自動的にサーバーを再起動＆監視してくれプロダクション環境でも安定して使用可能です。


#Step１
pm2 を環境にインストール

```
npm install -g pm2
```


上記のコマンドをPC（もしくはクラウド環境）に打ち込むとインストールできます。

#Step2
next jsをビルドする。

```
npm run build
```
ビルドすることにより、高速にページが開けるようになります。

#Step3
pm2でnext jsを永続化

```
pm2 start npm --name "next" -- start
```

ちなみに以下のパスから起動すると、ビルド前の非効率なサーバーが永続化されるので要注意。(googleで検索したらよく出てくるやつ)
ページスピードインサイトで構築中のサイトを”startで起動したもの”と"以下のパスで起動したも"の比較すると、ページの送信サイズが１０倍ほど違うという結果になりました。（当然重すぎてまともな時間で動きませんでした。）
startだとかなり早くなります。

https://developers.google.com/speed/pagespeed/insights/

```
./node_modules/next/dist/bin/next
```

#Step4
pm2でサーバーが永続化されていることを確認

```
pm2 list
```
status がonlineになっていれば完了です。
![スクリーンショット 2021-03-02 22.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169295/d5665dc9-a41c-b4eb-082f-15431cae5a81.png)

以上で完了！
ROS2環境のDockerコンテナでのVSCode Remote開発



VSCodeでリモート開発しようとすると，インテリセンスが機能せず不便だったので調べてみた．


# インテリセンスを有効にする方法

コンテナ上の開発フォルダの直下に以下のフォルダとファイルを書き込む．

```
.vscode/
　└ setting.json
```

`setting.json`ファイルに，以下の内容を書き込む．

```
{
    "python.autoComplete.extraPaths": [
        "/opt/ros/foxy/lib/python3.8/site-packages/"
    ]
}
```
ここで，`foxy`の部分はROSのディストリビューションに応じて変更し，`python3.8`の部分もPythonのバージョンに応じて変更する．

これで，ROSに関するライブラリに対してパスが通り，インテリセンスが機能するようになる．




## 記事を書くのに参考にしたページ

https://kic-yuuki.hatenablog.com/entry/vscode-python-autocomplete

https://qiita.com/paty-fakename/items/c82ed27b4070feeceff6
[Kotlin] toList()でMutableListをimmutableなListにする

# 概要

#### mutableListをListにする時は、必ずしも `toList()` を呼ぶ必要はないです

```kotlin
fun returnsImmutableList(): List<Int> {
    val mutableList = mutableListOf<Int>()

    // （略:mutableListに要素を詰める）
    
    return mutableList.toList() // <- ここで無駄に処理が走る
}
```


# 説明

mutableListをListにしたい時にとりあえずtoList()を呼びがちですが、無駄に計算量を増やしている場合があります
本稿ではtoList()の挙動について説明し、その使い所について考えます

## ListとMutableListの関係

`List`も`MutableList`も`interface`で、多くの場合`ArrayList`を実体として持つと思います

例えば、`mutableListOf()` はArrayListを生成して返す関数です[^1]

そして、`MutableList`は`List`を継承しています[^2]

つまり、以下のような記述が可能です

```kotlin
val list: List<Int> = mutableListOf<Int>()
```

## `toList()`は何をしているか

`toList()`は`Iterable`インターフェースの関数です

その実装をみてみると、実は内部で**`toMutableList()`を呼んでいます**[^3]
初めの例ですと、**MutableListをListにしようとしたのに、実はMutableListを返しているのです**

その`toMutableList()`は何をしているかというと、`ArrayList`のコンストラクタを呼び出して新しいインスタンスを生成します

```kotlin:Collections.kt
public fun <T> Collection<T>.toMutableList(): MutableList<T> {
    return ArrayList(this)
}
```

この時、元の`Collection`はディープコピーされますので、O(N)の時間/空間計算量かかってしまいます

## `toList()`の使い所

以上から、`toList()`を使う/使わないは次のように判断できます

- `MutableList`の参照だけ渡せれば良い場合 -> List型に安全にキャストできる
- ディープコピーが必要な場合 -> `toList()`を使う

具体的に書き下すと以下のような使い分けが良さそうです

#### `toList()`を使わない

- 関数の中では`MutableList`で扱いたいが、`List`型として返したい（最初の例）
    - `MutableList`型のままreturnできます
- 関数呼び出しで引数として`List`型を要求されているが、`MutableList`を渡したい
    - `MutableList`型のまま渡せます

#### `toList()`を使うべき

- `MutableList`を操作したいが操作前の状態を保持したい時
- `Set`など他の`Collection`を`List`にする時

以上です
読んでいただきありがとうございました

[^1]: `arrayListOf()`で明示的にArrayListを得ることもできます
[^2]: https://qiita.com/opengl-8080/items/36351dca891b6d9c9687#%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9%E3%81%AE%E9%96%A2%E4%BF%82
[^3]: IterableがCollectionである場合で、かつそのCollectionのsizeが2以上の場合に限ります
「漸化式 - 例題」を参考にSymPy Liveでやってみた。


オリジナル

https://qiita.com/bobchin/items/1cf180e9c6abe948c945

## SymPy Liveで
以下サイトに、print文を貼り付けて下さい。
a()やx()は、だめでした。pycharm他になります。

https://live.sympy.org/

### 1.等差型
print(rsolve(f(n+1)-f(n)-3, f(n),{f(1):2}))
3*n - 1
又は、(printなしでもでます。)
rsolve(f(n+1)-f(n)-3, f(n),{f(1):2})
結果は、画像のため省略。
### 2.等比型
print(rsolve(f(n+1)-f(n)-3, f(n),{f(1):2}))
5*2**n/2

print(simplify(rsolve(f(n+1)-2*f(n),f(n),{f(1):5})))
5*2**(n - 1)
print(rsolve(f(n+1)-f(n)-2*n+1, f(n),{f(1):4}))
(n/2 - 3/4)*(2*n - 1) + 17/4

print(simplify(rsolve(f(n+1)-f(n)-2*n+1, f(n),{f(1):4})))
n**2 - 2*n + 5


### 3.階差型
print(rsolve(f(n+1)-f(n)-2*n+1, f(n),{f(1):4}))
(n/2 - 3/4)*(2*n - 1) + 17/4

print(simplify(rsolve(f(n+1)-f(n)-2*n+1, f(n),{f(1):4})))
n**2 - 2*n + 5

### 4.特殊解型
print(rsolve(f(n+1)-4*f(n)+3, f(n),{f(1):2}))
4**n/4 + 1

print(simplify(rsolve(f(n+1)-4*f(n)+3, f(n),{f(1):2})))
4**n/4 + 1

simplifyが同じでした
Googleの音声読み上げAI「Text to Speech」の過去形の日本語文を音声合成すると語尾が上がる？

Google Cloud PlatformのAIサービスの１つとして提供されている「Cloud Text to Speech」は、日本語の音声読み上げにも対応しています。
しかし、「～だった」や「～しました」という過去形の日本語文章を読み上げると、疑問文のように語尾が上がる音声合成になります。

#無料で利用できるText to Speech

Googleが提供する音声合成サービス「Cloud Text to Speech」は、非常に滑らかにテキストを読み上げる音声データを生成してくれます。

https://cloud.google.com/text-to-speech/?hl=ja

「Cloud Text to Speech」は、以下の文字数であれば無料で利用できます。

+ 標準音声：0~400万文字
+ WaveNet音声：0~100万文字

WaveNet音声というのは標準音声よりも高性能な音声で、よりなめらかに読み上げてくれます。

高性能なWaveNet音声でも、400字詰め原稿用紙250枚分が無料で利用できるので、個人利用では無料で十分です。

#Cloud Text SpeechをGASで利用する

無料で利用できるCloud Text to Speechは、ブラウザ上ではお試しとして短い文章しかできません。
そのため、長文を利用するには、Google Cloud PlatformからText to SpeechのAPIを有効化して利用する必要があります。

お手軽にCloud Text to Speechを利用できる方法として、以下の記事でGoogle Apps Script(GAS)での利用方法を解説しています。

https://auto-worker.com/blog/?p=320

Text to Speech APIの発行方法から、GASで実行するためのサンプルコードを紹介しています。

#「～だった」など過去形の文章を読み上げると、語尾が上がる？

ただ、Cloud Text to Speechはまだまだ完璧な読み上げが実現できていません。
ひらがなと漢字、カタカナを適切に組み合わせないと、想定しない読み上げをすることがあります。

さらに、問題が発覚したのは、「～だった」や「～しました」といった過去形の文章です。

+ 今日は朝ごはんを作りました。
+ 暖かい陽気な1日だった。

このような文章をText to Speechに読み上げると、語尾が疑問文のように上がってしまうのです。

+ 今日は朝ごはんを作りました。↑
+ 暖かい陽気な1日だった。↑

https://drive.google.com/file/d/1W8gB19gLsBeUBYqlvpGMAsfqvM_4W8Aa/view?usp=sharing

句読点などを工夫したり、エクスクラメーションマーク!を使ってみたのですが、語尾が上がる事象は解消されませんでした。

#音声マークアップSSMLでも語尾のイントネーションは対応不可

Text to Speechには、音声読み上げで利用される音声用マークアップ言語SSMLが利用できます。

しかし、Text to Speechに対応しているSSMLのタグを調べたところ、休止をコントロールするbreakタグや、ピッチや速度を調整するprosodyタグで、語尾のイントネーションを調整するものはありませんでした。

そのため、過去形の文章を読み上げた音声データの語尾を上げないようにするのは調べたところ、困難でした。

#「です」、「ます」で防ぐ対処法のみ

残念ながら、Text to Speechで語尾が上がらないように対処するには、「です」や「ます」といった現在形の文章に変換することです。
おそらく、もう少しText to Speechの性能が高まれば、語尾が上がる事象も解消すると思われますが、2021年3月時点ではまだまだです。
1文単位の音声読み上げのアプリなどを作る場合は、この仕様に注意して、文章をうまく書き換えるなどの対応しましょう。
【ShouldaMatchers】複数カラムへの重複チェックで発生したエラーの原因と対応方法


#事象

RspecでShouldaMatchersを使用した複数カラムの重複チェック実行時、以下のようなDBのエラーが発生しました。

```
 1) Like is expected to validate that :user_id is case-sensitively unique within the scope of :post_id
     Failure/Error: it { is_expected.to validate_uniqueness_of(:user_id).scoped_to(:post_id) }
     
     Shoulda::Matchers::ActiveRecord::ValidateUniquenessOfMatcher::ExistingRecordInvalid:
       validate_uniqueness_of works by matching a new record against an
       existing record. If there is no existing record, it will create one
       using the record you provide.
     
       While doing this, the following error was raised:
     
         Mysql2::Error: Field 'user_id' doesn't have a default value
     
       The best way to fix this is to provide the matcher with a record where
       any required attributes are filled in with valid values beforehand.
     # ./spec/models/like_spec.rb:8:in `block (2 levels) in <main>'
     # -e:1:in `<main>'
     # ------------------
     # --- Caused by: ---
     # Mysql2::Error:
     #   Field 'user_id' doesn't have a default value
     #   ./spec/models/like_spec.rb:8:in `block (2 levels) in <main>'
```

※投稿に対してのいいね機能のテストとして、`User`と`Post`を保持する`Like`モデルを作成していました。

```ruby:spec/models/like_spec.rb
RSpec.describe Like, type: :model do
  it { is_expected.to validate_presence_of(:user_id) }
  it { should belong_to(:user) }
  it { is_expected.to validate_uniqueness_of(:user_id).scoped_to(:post_id) } # エラー発生

  it { is_expected.to validate_presence_of(:post_id) }
  it { should belong_to(:post) }
end
```

```ruby:app/models/like.rb
class Like < ApplicationRecord
  belongs_to :user
  belongs_to :post
  validates :user_id, presence: true, uniqueness: { scope: :post_id }
  validates :post_id, presence: true
end
```

#原因
`uniqueness`に対してテストをする`validate_uniqueness_of`は、インスタンスが存在しない場合は作成してテスト実行するため、その他のカラムのDBの制約によってはDBエラーが発生するようです。
今回の場合だと、user_idに対してnullを許容しないケースとなっていたため、nullのデータが作成されてしまい、エラーが発生しました。

# 対応
`spec/models/like_spec.rb`に、インスタンスを事前に作成するような記述を追加することで、テストが問題なく完了しました。
ShouldaMathcersを使用したモデルのテストではインスタンス等不要だと思っていましたが、作成が必要なケースがあることも認識しておく必要があります。

```ruby:spec/models/like_spec.rb（修正後）
RSpec.describe Like, type: :model do
  subject { FactoryBot.build(:like) } # 追加
  it { is_expected.to validate_presence_of(:user_id) }
  it { should belong_to(:user) }
  it { is_expected.to validate_uniqueness_of(:user_id).scoped_to(:post_id) }

  it { is_expected.to validate_presence_of(:post_id) }
  it { should belong_to(:post) }
end
```


#参考
**・[モジュール：Shoulda :: Matchers :: ActiveRecord — YARD0.8.7.3によるドキュメント](http://matchers.shoulda.io/docs/v3.1.1/Shoulda/Matchers/ActiveRecord.html#validate_uniqueness_of-instance_method)**
ふりがなを打つのは簡単！

#ふりがなをうちたい

この漢字にふりがなを打ちたいなと思うなら、HTMLにこれを書くだけで打てます！

```ruby:HTML
<ruby>
   勝<rt>しょう<rt>
   利<rt>り<rt>
</ruby>
```

簡単なのぜひやってみて下さい！
【lambda 超初心者】CLIを使ってlambda関数を作成する

### 内容
AWS CLIを使って、lambda関数を作成する。
個人の備忘録であるためかなり内容が薄くなっている。

1. デプロイディレクトリを作成
2. Pythonコードを作成
3. zip化 ライブラリやコードを含める
4. aws lambda create-function --funtion-name ... lambda関数名やhandler, runtimeなどの設定を行う

5. 更新対象のコードの編集や、ライブラリの追加を行い再度zip化する
6. aws lambda update-function-code .. を利用してlambda 関数を更新する


### 参考
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/python-package-create.html#python-package-create-with-dependency
https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/python-package-update.html
HTML/CSSで縦線を入れる方法

#HTML

```ruby:HTML
<div class="line-left">
   <p>HELLO</p>
</div>
```
縦線をつけたい要素を親要素で囲む必要があります。今回はdivで囲んでみました。

#CSS

```ruby:CSS
.line-left {
    border-left: 3px solid red;
}
```

![スクリーンショット 2021-03-02 215651.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/f04b7207-6e5e-69c3-98f2-ac6de6565099.png)

border-left：　太さ　種類　色；
このように、border-leftプロパティを使うことでHELLOの左側に縦線が付きます。

HELLOと線の距離を離したいなら、

```ruby:CSS
.line-left {
    border-left: 3px solid red;
    padding-left: 10px;
}
```

![スクリーンショット 2021-03-02 220038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1153703/2fb93b13-38b3-6612-1b1a-3ee7152ec4e0.png)

このように、padding-leftプロパティを入れることで間隔をあけることができます。
ぜひやってみてください！
PHPの多次元配列を特定の値でソート（array_multisort関数）

単一の配列のソートはPHPマニュアルの[配列のソート](https://www.php.net/manual/ja/array.sorting.php)を参考にすればできますが、多次元配列の場合のソートは複雑…
というわけで、いつでも確認できるように記録しておきます。


## 多次元配列の例
次のような2次元配列のデータがあるとします。

```php
$records = [
  [
    'ID' => "A00004",
    'PAYMENTNO' => "11111",
    'PRICE' => "7500",
    'ITEMNAME' => "スニーカー"
  ],
  [
    'ID' => "A00002",
    'PAYMENTNO' => "22222",
    'PRICE' => "4500",
    'ITEMNAME' => "カットソー"
  ],
  [
    'ID' => "A00001",
    'PAYMENTNO' => "05555",
    'PRICE' => "5000",
    'ITEMNAME' => "ニット"
  ],
  [
    'ID' => "A00003",
    'PAYMENTNO' => "03333",
    'PRICE' => "7000",
    'ITEMNAME' => "ジーンズ"
  ],
  [
    'ID' => "A00003",
    'PAYMENTNO' => "03331",
    'PRICE' => "9000",
    'ITEMNAME' => "ジャケット"
  ]
];
```

この配列に対して、「ID」の昇順で並べ、「ID」の値が同じ場合は「PAYMENTNO」の昇順で並べたいとします。
この場合、[array_multisort関数](https://www.php.net/manual/ja/function.array-multisort.php)と[array_column関数](https://www.php.net/manual/ja/function.array-column.php)を組み合わせて使えばスッキリ実装できます。

## ソート実行

```php
// array_multisort(ソートの軸となる配列(1), ソートの軸となる配列(2), ソートしたい配列)
array_multisort(array_column($records, 'ID'), array_column($records, 'PAYMENTNO'), $records);
```

ここではソートの軸を2つにしていますが、もちろん1つでも良いですし、引数を追加すれば3つでも4つでも増やせます。

省略せずに書くなら
`array_multisort(ソートの軸となる配列(1), ソート順(1), ソート方法(1), ソートの軸となる配列(2), ソート順(2), ソート方法(2), ソートしたい配列)`
となりますが、以下2つはデフォルトの設定を使うのであれば省略可能です。

* ソート順：デフォルトがSORT_ASC
* ソート方法：デフォルトがSORT_REGULAR

※設定の詳細は公式リファレンス参照

この「ソートの軸となる配列」は、$recordsをforeachで回してIDを取り出して、配列を作成して…としても良いのですが、array_columnを使えば配列から特定のキーに対する要素を1発で取り出せるので、この方が楽でコードもスッキリします。
[array_column関数](https://www.php.net/manual/ja/function.array-column.php)



## ソート後
上でソートした配列`$records`をvar_dumpしてみると、以下のようになります。

```php
array(5) {
  [0]=>
  array(4) {
    ["ID"]=>
    string(6) "A00001"
    ["PAYMENTNO"]=>
    string(5) "05555"
    ["PRICE"]=>
    string(4) "5000"
    ["ITEMNAME"]=>
    string(9) "ニット"
  }
  [1]=>
  array(4) {
    ["ID"]=>
    string(6) "A00002"
    ["PAYMENTNO"]=>
    string(5) "22222"
    ["PRICE"]=>
    string(4) "4500"
    ["ITEMNAME"]=>
    string(15) "カットソー"
  }
  [2]=>
  array(4) {
    ["ID"]=>
    string(6) "A00003"
    ["PAYMENTNO"]=>
    string(5) "03331"
    ["PRICE"]=>
    string(4) "9000"
    ["ITEMNAME"]=>
    string(15) "ジャケット"
  }
  [3]=>
  array(4) {
    ["ID"]=>
    string(6) "A00003"
    ["PAYMENTNO"]=>
    string(5) "03333"
    ["PRICE"]=>
    string(4) "7000"
    ["ITEMNAME"]=>
    string(12) "ジーンズ"
  }
  [4]=>
  array(4) {
    ["ID"]=>
    string(6) "A00004"
    ["PAYMENTNO"]=>
    string(5) "11111"
    ["PRICE"]=>
    string(4) "7500"
    ["ITEMNAME"]=>
    string(15) "スニーカー"
  }
}
```

ちゃんと「ID」の昇順かつ、「ID」が同じ場合は「PAYMENTNO」の昇順になっていますね！


## 参考にした記事
* [PHPの多次元連想配列のソート](https://qiita.com/shy_azusa/items/54dadc55e3e71cde1445)
* [多次元配列のソート：array_multisort関数](https://gray-code.com/php/sort-of-multi-dimensional-array/)
firebaseを使って環境分けを設定する

firebaseを利用した環境分けをする際、てこづったのでここにまとめておく。

※今回はrelease、debugの２つに分ける。
※podやfirebaseのセットアップについては省く

##①まずfirebaseでアカウントを作り、プロジェクトを２つ作成する。（release用、debug用）
こんな感じでふたつ作る
![スクリーンショット 2021-03-02 21.49.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112697/6716734f-a245-8342-5a57-09253b750c0e.png)


##②両方のプロジェクトからGoogleService-Info.plistを取得する


##③Xcodeのプロジェクトでフォルダをふたつ作り、分ける（debugのほうは名前を変える）
![スクリーンショット 2021-03-01 22.13.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112697/d1c19b21-cad4-09bf-d1db-32225f580556.png)

##④環境分けするためのファイルを追加する


```swift:FirebaseUtil.swift

import Foundation
import FirebaseCore

final class FirebaseUtil {

  static func setup() {
    #if DEBUG
    let name = "d_GoogleService-Info"
    #else
    let name = "GoogleService-Info"
    #endif
    let filePath = Bundle.main.path(forResource: name, ofType: "plist")
    if let options = FirebaseOptions(contentsOfFile: filePath!) {
      FirebaseApp.configure(options: options)
    } else {
      assertionFailure("Could'nt load config file")
    }
  }
}

```
##⑤環境が分かれたか確認するクラッシュ用のViewControllerを追加する

```swift:CrashliticsViewController.swift
import UIKit

class CrashliticsViewController: UIViewController {

    
      @IBAction func tapCrash(_ sender: Any) {
        fatalError()
      }
    }
```
※Storyboard上のボタンと繋いで、タップするとクラッシュします。

##⑥TARGETのEditSchemeを開き、releaseかdebugで分けるだけ
![スクリーンショット 2021-03-02 21.42.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112697/b6cc36ad-5b5f-36c1-a01a-ebaab69db098.png)


##⑦クラッシュの確認方法で少してこづったので、[わかりやすい記事](https://www.hfoasi8fje3.work/entry/2020/12/17/%E3%80%90Firebase_Crashlytics%E3%80%91%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%AB%E3%82%AF%E3%83%A9%E3%83%83%E3%82%B7%E3%83%A5%E6%83%85%E5%A0%B1%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C "分かりやすい記事")はこちら


##⑧それぞれビルドし、クラッシュさせる
それぞれのプロジェクトのCrashlyticsを確認し、下記のように出ていたらOK
![スクリーンショット 2021-03-02 21.52.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1112697/2f6fcfc1-91d1-ed90-4a30-e2c93bda2ed7.png)
Cookieを使った認証機能を実装しようとしてCORSでどハマりした時のメモ

## 前提
  - フロントエンド：Nuxt.js →　http://localhost:3000
  - バックエンド：Node.js →　http://localhost:4000
  - [universal-cookie](https://www.npmjs.com/package/universal-cookie)を使う

## やりたかったこと
- サーバーで発行されたcredential情報をcookieとして保存すること
- cookieに保存されているcredential情報をサーバーに送付して、それを元に認証機能を実装すること

## はまったこと
- クライアントからのリクエストに対して、サーバー側からのレスポンスに`Set-Cookie`ヘッダーを付与することは出来て、ブラウザのdeveloper toolでも`Set-Cookie`ヘッダーがレスポンスにあることを確認出来ているのに、クライアントでcookieがセットされない。

## 原因
- 原因はCORSの設定。

## 解決のために参考したリンク（ほんとまじでありがとうございます！）
- [なんとなく CORS がわかる...はもう終わりにする。](https://qiita.com/att55/items/2154a8aad8bf1409db2b)
- [XMLHttpRequest.withCredentials - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)

```js
await axios.get('apiのエンドポイント', { withCredentials: true });
```
- [Access-Control-Allow-Credentials - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials)
- [Access-Control-Allow-Origin - MDN Web Docs](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
- [cors - npm package](https://www.npmjs.com/package/cors)

 ```js
  import cors from 'cors';
  const app = express();
  app.use(cors({ origin: true, credentials: true }));
 ```