OmniAICreator/Qiita-1.07M huggingface dataset:
【Visual Studio】1つのプロジェクトに、プロジェクトをまとめてブチ込む（VB / C#）

Visual Studioでおなじみの**.vbproj**/**.csproj**ファイルから、コマンドを使って
まとめてプロジェクトを追加する方法を紹介します。

1つにまとめることで、関数などの参照がめちゃめちゃ楽になります！

プロジェクトの中にプロジェクトを入れて階層に出来るのですが
会社で使うような数百のプロジェクトを手動では流石にキツイですからね、、


#1. Visual Studio のコマンド画面を立ち上げる#
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100934/c9b152e2-a9cb-dc2a-77e0-77447a7b3963.png)

#2. 追加したいプロジェクト達がいる、フォルダに移動#
立ち上げたコマンド画面から cdコマンドで移動

```bash
cd ｛フォルダパス｝
```

｛フォルダパス｝の部分は、.vbproj/.csprojが存在する中で一番上のパスにします

#3. プロジェクトファイル一覧を取得#
vbprojかcsprojか両方かによってどれかを選んでください

##vbprojだけなら##
```bash
dir /S /B *.vbproj
```

##csprojだけなら##
```bash
dir /S /B *.csproj
```

##vbprojとcsproj両方あるなら##
```bash
dir /S /B *.vbproj *.csproj
```

##プロジェクトファイルの一覧が出る##
何れかのコマンドを実行すれば、↓のように一覧が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1100934/ffe258f2-aab0-9a3e-43fe-b7cf26b6d96a.png)

#4. 元になるプロジェクトを作る#
```bash
dotnet new sln
```
現在のフォルダに新しい.slnファイルが作成されます
ここで作成した物に追加していくので、.slnのファイル名を後で使用します
#5. プロジェクト追加コマンドを叩く#


**dotnet sln {ソリューション名}.sln add {projファイルのパス}**

のように、すべてのファイルに行います。

##エディタにファイルパスをコピー##
先ほど取得した.vbproj/.csproj のファイルパスを丸ごとコピーし
テキストエディタに貼り付けます。

**dotnet sln {ソリューション名}.sln add** を頭に加えて以下のようにします。


```bash
dotnet sln repos add C:\source\repos\ConsoleApp1\ConsoleApp1\ConsoleApp1.vbproj
dotnet sln repos add C:\source\repos\ConsoleApp3\ConsoleApp3\ConsoleApp2.vbproj
dotnet sln repos add C:\source\repos\ConsoleApp3\ConsoleApp3\ConsoleApp3.vbproj
dotnet sln repos add C:\source\repos\ConsoleApp2\ConsoleApp2\ConsoleApp4.csproj
dotnet sln repos add C:\source\repos\ConsoleApp2\ConsoleApp2\ConsoleApp5.csproj
```

##コマンド画面にペースト##
エディタに用意したコマンドを丸ごと貼り付ける

※一行づつ貼り付けなくて大丈夫です　そのままでよしなにやってくれます

#6.  4で作成したslnを開く#
プロジェクトが全部追加されてるはず、、！

これで参照が簡単になりますが、プロジェクト数が多い場合
最初の読み込みがクッソ遅くなます(´・ω・｀)
タッチパッドが認識できない問題を解決する

Dynabook に Fedora33 をインストールしたのですが、タッチパッドが認識できていないので使えません。カーネルパラメータを編集すればよさそうです。

```
# dmesg | grep touchpad
... try setting psmouse.synaptics_intertouch to 1 ... 
```

```
# vim /etc/default/grub

...(snip)...
編集前
GRUB_CMDLINE_LINUX="rhgb quiet"
編集後
GRUB_CMDLINE_LINUX="rhgb quiet psmouse.synaptics_intertouch=1"
...(snip)...

# grub2-mkconfig
# shutdown -r now
```

動くようになりました。
Capybara::Ambiguous: Ambiguous match, found huga elements 〜　　対処法

### □解決したいこと

systemspecテストコードでformで画像を選択するため、

```ruby
attach_file( 'tip_image',image_path, make_visible: true )
```

を実行したら

```ruby
Capybara::Ambiguous: Ambiguous match, found 4 elements matching file field "tip_image" that is not disabled
```

というエラーが発生しました。こちらの解決方法をアップしたいと思います。

### □原因

"tip_image"に該当するエレメントが4つ存在しますという意味のエラー内容です。
画像の選択に限らず、capybaraで選択したname属性が複数ある場合に「どのエレメントを選択しているのでしょうか」ということを聞かれています。

new.html.erbを見てみると

```new.html.erb
<div class="tip-images">
        <div class="tip-image-main">
          <p class="tip-image-main-text">画像(メイン)</p>
          <div id="image-list">
            <%= form.file_field :image, class: 'tip-image-main-img' %>
          </div>
        </div>
        <div class="tip-image-sub">
          <p class="tip-image-sub-text">画像（サブ）</p>
          <div class="tip-image-sub-images">
            <%= form.file_field :image, class: 'tip-image-sub-img' %>
            <%= form.file_field :image, class: 'tip-image-sub-img' %>
            <%= form.file_field :image, class: 'tip-image-sub-img' %>
          </div>
        </div>
      </div>
```

となっており、

こちらに"tip_image"に該当するエレメントはありません。

検証ツールで調べてみると、

![スクリーンショット 2021-04-08 8.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/985033/cf2af116-3a98-fc64-23a8-7381b80d059a.png)


ありました。

name属性が　tip[image]となっている要素が4つ存在します。

これが原因です。

### □実行したこと

name属性が複数あることが原因ですので、画像投稿のフォームそれぞれに別々のname属性を付与してみます。
その上で、attachfileで当該name属性を指定することで、解決していこうと思います。

```ruby
            <%= form.file_field :image, class: 'tip-image-main-img', name: 'tip-image-main-img' %>
```

```ruby
            <%= form.file_field :image, class: 'tip-image-sub-img', name: 'tip-image-sub-img1' %>
            <%= form.file_field :image, class: 'tip-image-sub-img', name: 'tip-image-sub-img2' %>
            <%= form.file_field :image, class: 'tip-image-sub-img', name: 'tip-image-sub-img3' %>
```
としました。
次に、systemspecのテストコードのnameも変更します。

```ruby
attach_file( 'tip-image-main-img',image_path, make_visible: true )
```

### □結果

これでうまくいきました。
正規表現の置換メモ

# はじめに

0個以上の量指定子 `*` を使った置換がVSCodeで行った場合と、Pythonの`re.sub()`で行った場合で異なっていたので調査

# 環境

```:VSCode
Version: 1.55.0 (user setup)
Commit: c185983a683d14c396952dd432459097bc7f757f
Date: 2021-03-30T16:01:55.261Z
Electron: 11.3.0
Chrome: 87.0.4280.141
Node.js: 12.18.3
V8: 8.7.220.31-electron.0
OS: Windows_NT x64 10.0.19042
```

```:Python
Python 3.9.4 (tags/v3.9.4:1f2e308, Apr  4 2021, 13:27:16) [MSC v.1928 64 bit (AMD64)]
```

# 動作

## VSCode

置換前

```:VSCode
abc
123

```

`.*`, `X` で 置換後

```:VSCode
X
X
X
```

長さ0のマッチに対しては置換が行われない。

## Python

```
>>> import re
>>> re.sub(".*", "X", "abc")
'XX'
>>> re.sub(".*", "X", "abc\n")
'XX\nX'
>>> re.sub(".*", "X", "abc\n123")
'XX\nXX'
>>> re.sub(".*", "X", "abc\n123\n")
'XX\nXX\nX'
>>> re.sub(".*", "X", "")
'X'
```

長さ0のマッチに対しても置換が行われる。

## JavaScript

```
r = []
r.push("abc".replace(/.*/g, "X"))
r.push("abc\n".replace(/.*/g, "X"))
r.push("abc\n123".replace(/.*/g, "X"))
r.push("abc\n123\n".replace(/.*/g, "X"))
r.push("".replace(/.*/g, "X"))
console.log(r)

(5) ["XX", "XX↵X", "XX↵XX", "XX↵XX↵X", "X"]
0: "XX"
1: "XX↵X"
2: "XX↵XX"
3: "XX↵XX↵X"
4: "X"
length: 5
__proto__: Array(0)
```

長さ0のマッチに対しても置換が行われる。

# 最後に

VSCode上では何か処理を入れているようです。
少し混乱してしまいました。
Slackのブックマークだけで簡単TODO管理をお勧めする

## この記事の結論
**個人的なTODO管理はSlack上で、Slackの「ブックマーク」機能だけで十分でしたという話です。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/559d77a4-01ee-371c-17f8-521f4fb09f4d.png)

やりたいことが小さいなら、凝ったツールは要らない。
最低限のやりたいことを見直してシンプルに要件を満たすのも工夫。
2ヶ月ほどやってみてこれでいいなと思ったのでまとめます。

## 課題だったこと
[Slackであちこちのチャンネルに投稿された読みたい情報が流れてしまう問題](https://zenn.dev/40balmung/articles/11599ebdd67b5f) 

> Slackはコミュニケーションツールとしてはとても便利なのですが
あちこちのチャンネルに記事の紹介や情報が流れてしまうと後で追いかけるのが大変じゃないですか？
> 「一週間ぐらい前にどこかで見た気がするんだけどなー…」（あちこちのチャンネルをポチポチ）
（15分経過）
「…スレッドの中だったわ…」
> とか頻繁に発生しています。

- 全く同じことを私もやりがち。
- **だけでなく人に頼まれたこと、差し込まれたことが散らかって忘れる**。
- TODO管理って、とにかく忘れないことが大事。忘れないためには **一箇所に集約できる** ことが必須。
- と考えると結局 **情報の起点がSlackなので、Slack上で完結してできる** ことがベスト。
- Trello とかそんな大げさなことはしなくてよい。

で、どうにかしたいと考えていた。


## 課題の詳細を洗い出し
先の記事では

> - 手軽に
- まとめられる
- 読んだかどうかわかる
- 読んだ後も残しておける
- 他人が投稿したのも残せる
- 複数のチャンネルで使える
- 複数のワークスペースで使える

が要件定義されているのですがこれを参考にするとまあ私はせいぜいこんな感じ。

- **手軽に**
- まとめられる
- 読んだかどうかわかる
- 複数のチャンネルで使える

むしろ簡単に**「今」**、**「何を読む」**、**「やる」**べきかだけが、その材料だけが目の前にあればよい。


## 解決策

元記事は

https://clickup.com/

というツールとSlackとを連携させてclickupに情報を集約する手法での解決が図られているので興味のある方はぜひそちらへ。今回私は、以下の方法で解決することを試している。

### Slackのブックマーク！ 以上！

https://slack.com/intl/ja-jp/help/articles/360042650274-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%84%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B-

**「ブックマーク」**である。よく似たところに「ピン留め」があるが、

- チャンネルメンバー全員に周知を促したいメッセージは、チャンネルへのピン留め。
- ピン留めはチャンネルメンバー（もしくはダイレクトメッセージ）全てに有効。
- 一方ブックマークは**自分にのみ有効。逆に言えば自分の目の前のTODOはこれで良い。**
- **自分自身にのみ重要度が高いメッセージ（もしくはファイル）に、ブックマークする。**

ブックマーク、全く活用できていなかった。


## 具体的フロー

朝、お仕事開始時。今日のGoogle Calendarをみて、やることリストを作成する。

```md
＜今日やること＞
〇〇打合せ
〇〇雑談会
問合せ対応
チケット
チケット
チケット
```

...をチームのSlackチャンネルに投稿。これはもともとチームで行っているルール。
**★そのままその投稿をブックマークする。**

これ以外に差し込みが入ったら、reacjiで自分のtimesチャンネルに収集する。
**★その投稿もブックマークする。**

ブックマークを眺めながらお仕事する。
**★タスクが終わったなと思ったらブックマークを剥がす。**

で、常にブックマークだけを見ていればやることが把握できるというしくみ。
ブックマークが少なくなるとお仕事が終わる清々しさ。


## ポイント

TODO管理のコツはともかく集める。いつでも見られるところに置く。だと思います。Slackが現実的に、モバイルでもPCでもどの端末でもいつでもどこでも最もアクセスしやすいツールであることを考えると、それをベースにすることが肝。Trelloやその他カンバンツールなどなどいくらでも試したいものは出てくる。しかし今、本当に必要なものは？ 敢えてシンプルに考えることも勧めたい。


### 他のツール例

[「クラウドに散ったタスクを一つのカレンダーで管理したい！」――急遽テレワークを導入した中小企業の顛末記(46)](https://internet.watch.impress.co.jp/docs/column/teleworkstory/1316059.html)
[国内企業の採用情報がTrelloでダダ漏れだと話題に ～公開設定を今すぐ見直して！](https://forest.watch.impress.co.jp/docs/serial/yajiuma/1316821.html)
[ClickUp におけるユーザー/チーム/ワークスペース等とタスクの関係 (類似製品との比較含む)](https://qiita.com/szf/items/0bdde46aa79ee06eac73)

色々ツールがあって、活用できることも大事。一方要件を定義して、要らないものは削り、意外とシンプルに十分満たせることもあるという話でした。複雑にすれば事故るし。参考になればさいわいです。
【Python】ローカルwebサーバの起動

背景
GCPのVMを検証するときにクイックスタートを使うとpythonの簡単なWebサーバを立ち上げるところがある。
このコマンドは何なのかと思った。

コマンド
sudo python3 -m http.server 80

詳細
https://qiita.com/okhrn/items/4d3c74563154f191ba16
ここにあるとおり、ローカル上で動作確認をするコマンド。
pythonの標準ライブラリでwebサーバを立ち上げてHTMLの表示まで可能。
undefined method` 　'の解決になるかもしれないお話

##遭遇したエラー
RailsでWebアプリを作成中マイクロポストの削除機能を実装している最中に以下のようなエラーに遭遇しました。

![スクリーンショット 2021-04-08 23.56.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/958803/5a6e4a1d-740e-00ed-c8f7-0ab44a25c371.png)

```Ruby
    def destroy
      @micropost.destroy
      flash[:success] = "投稿が削除されました"
      redirect_to request.referrer || root_url
    end
```
@micropostが定義されていないみたいなことが書かれていますが実際はbefore_actionで定義しているので原因が分からずお手上げでした。

##teratailやプログラム板で質問
これ以上時間を消耗するのも嫌なのでteratailで質問したところ回答は得られず、たまらず4chのプログラマー板で質問しました。

![スクリーンショット 2021-04-09 6.00.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/958803/a6c593fb-bada-8f30-4720-ff0c418d1346.png)

すると@micropostの前が全角なのが怪しいと教えていただき、そんなん今まで全角でも大丈夫だったしなーと半信半疑で半角に治したところ

![スクリーンショット 2021-04-09 6.01.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/958803/b596f6cb-9071-65e8-5ca6-ef8d226a5f22.png)

きちんと実行されました。

##エラー文の正しい解釈

![スクリーンショット 2021-04-09 6.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/958803/d009cfd2-ae36-2b3d-4b9f-526ef00a03d0.png)

よくよく見返してみればundefined method @micropostではなく　undefined method` 　'となっているので何かしらの原因でそもそもメソッド自体を読み込めていないという解釈をするべき問題であり、その解決策が全角スペースを使わないというものだったという事象でした。

##終わりに
多くの場合は全角スペースにしても動作はするようですが、そもそも日本語くらいでしか使用されない全角スペースをプログラミング言語で利用するのは不適切であり、当然動作しないシチュエーションも存在するということが勉強できたいい機会となりました。
非エンジニアがSQLを学ぶの巻 #1

# 非エンジニアがSQLを学ぶの巻
えんじにあがすなる　えすきゅーえるといふものを
でざいなーのわいも　してみむとてするなり

# いや、なんで？

最近スプレッドシートでQUERY関数を乱用していたみぎり、
つよつよエンジニアの夫がなにかのコードを鬼の形相で書いていた。

こそっと覗き込んでみたらSQL文というものを書いていたらしく、
コードを見たらその中にSELECTとかWHEREとか見覚えのある文字ばかり。
これ、スプシのQUERY関数で使う第2引数の句では・・・？
あれ？もしかして第2引数ってクエリ・・・？
（関数を雰囲気で覚え、完全にノリで書いている）

__SQL文__というのはどうやら、__データーベースに命令を伝えるための言語__で
その語を組み合わせることで__クエリ__という__呪文の詠唱__ができるらしい。

ちなみにスプシのQUERY関数は以下のように記述する。
`=QUERY(第1引数,第2引数,第3引数)`

__第1引数__には対象とするセルの範囲を入力するのだけど、
これは__`スプシでの対象範囲　＝　データベースのデータテーブル`__ってこと？

そして__第2引数__に入れてる、`select`や`where`句が__クエリ__？

最後の__第3引数__は見出しが何行目？っての指定してるだけだから
あってもなくてもだけど。

SQLを学ぶことで関数の理解がグッと深まるとは…。


## データベースの種類
・ネットワーク型
・階層型
・関係型
・オブジェクト指向

## データベースソフトについて
リレーショナルデータベースソフトを一部あげてみる。

| 名称 | よみかた | 有償・無償 | 備考 |
|:-:|:-:|:-:|:-:|
| SQL Server | えすきゅーえるさーばー | 両方 | - |
| Oracle | おらくる | 両方 | - |
| MySQL | まいえすきゅーえる | 両方 | Oracleに飲み込まれた。<br>海外シェア多し。<br>MySQLのMyは作者(My)の長女(Daughter)のことらしい |
| PostgreSQL | ぽすとぐれすきゅーえる<br>（ぽすぐれ） | 無料 | 日本シェア多し |
| mariaDB | まりあでぃーびー | 無料 | MySQLの作者が作った。<br>mariaは次女の名前らしい |
MySQLの作者はムッスメ大好きパパンということがよくわかりましたね。


# 導入編
- **WindowsPCを利用している場合は、SQLServerがオススメ**
    - その他SQLServerを選択するメリット
    - サーバーの立ち上げが容易
    - SSMS（SQL Server Management Studio）がGUI上で操作可能
    - SSMSが機能面で優秀

`※SQL Server Management Studio（SSMS）：データを見るためのツール`

## SQL Server導入
無償でフル機能が使えるデベロッパー(開発者)版を導入
https://www.microsoft.com/ja-jp/sql-server/sql-server-downloads
`※開発テスト用のため、商用利用は不可`

## SSMS日本語版導入
以下のリンクから日本語版を導入[^1]
https://go.microsoft.com/fwlink/?linkid=2151644&clcid=0x411


# 次回は設定編！



### おまけでQUERY関数で使うクエリ語全10種

```
SELECT：表示する列を選択
WHERE：条件に一致する行のみを返す
GROUP BY：行全体に値を集計
PIVOT：列の一意の値を新しい列に展開
ORDER BY：並べ替え
LIMIT：表示する行数を制限
OFFSET：任意の行数をスキップ
LABEL：列見出しを上書き
FORMAT：表示される数値を整える
OPTIONS：クエリ実行のためのオプションを制御する
```


[^1]: ※最初英語版をインストールしてしまい、日本語化できないな？と思ったら言語別リンクを発見した。<br>英語版をアンインストールしてからでないと、日本語版のインストールに失敗するので注意
[個人メモ][Bookmarklet:JavaScript]Amazonのほしい物リストのリンク一覧取得

リゼロの2周目を見終わって「はぁやっぱりレムかわいいよぉ」となって、その流れでAmazonでレムのフィギュアをひたすらほしい物リストに入れた後、そのリストページを見て思うわけです。
リンク一覧を取得したい、と。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687945/a7b8ca5a-8810-96da-fcdb-4f8219d1e94e.png)

これくらいならブックマークレットでできるといいなと思い探してみたところ、合計金額を表示してくれるものは見つけたのですが、リンク一覧取得がほしかったので作りました。
Amazonのほしい物リストのページを開いて上記ブックマークレットを実行するとクリップボードにリンク一覧がコピーされます。

```javascript
javascript:var%20lst='',add='',r=document.getElementsByClassName('a-link-normal');for(var%20i=0;i<r.length;i++){if(r[i].id.substr(0,9)=='itemName_'){lst+=r[i].title+'\t'+r[i].href+add+'\n';}}if(!lst){r=document.getElementsByClassName('a-link-normal wl-image-overlay');for(var%20i=0;i<r.length;i++){lst+=r[i].title+'\t'+r[i].href+add+'\n';}}if(!lst){alert('取得できませんでした');}else{navigator.clipboard.writeText(lst);}
```

Chromeを使っているなら拡張機能の[Pasty](https://chrome.google.com/webstore/detail/pasty/hdjihnnclpjhfdbbinmgoiehhoehhlgf?hl=ja)とか[Copy All Urls](https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk?hl=ja)でも使えばいっきにURLが開けるから便利。タブがすごいことになるけど。

## 補足
+ 2021/4/8時点のものであるため、ほしい物リストページの仕様変更に伴い使えなくなる可能性があります。
+ 表示されている分を取得するので、リストの最後まで表示させてからでないと全部の取得はできないです。
+ 一覧表示と画像タイル表示の両方に対応しているので長いですが不要なら片方は削ればよいかと（前半処理が一覧表示対応、後半処理がタイル表示対応）
+ add変数はURLに追加のタグをつけたい場合に利用すればいいんじゃないかな（入力する場合は&amp;とか忘れずに）
NestJS デフォルトの例外まとめ built-in exception

## built-in exception
NestJSはベースとなるHttpExceptionを継承するいくつかのよく使う例外をデフォルトで提供している。
何が用意されていて、ステータスコードがどれでとか調べるのが面倒なのでまとめた。


https://docs.nestjs.com/exception-filters#built-in-http-exceptions

|exception |response body |
|-- |-- |
|BadRequestException |{ "statusCode": 400, "message": "Bad Request" } |
|UnauthorizedException |{ "statusCode": 401, "message": "Unauthorized" } |
|ForbiddenException |{ "statusCode": 403, "message": "Forbidden" } |
|NotFoundException |{ "statusCode": 404, "message": "Not Found" } |
|MethodNotAllowedException |{ "statusCode": 405, "message": "Method Not Allowed" } |
|NotAcceptableException |{ "statusCode": 406, "message": "Not Acceptable" } |
|RequestTimeoutException |{ "statusCode": 408, "message": "Request Timeout" } |
|ConflictException |{ "statusCode": 409, "message": "Conflict" } |
|GoneException |{ "statusCode": 410, "message": "Gone" } |
|PreconditionFailedException |{ "statusCode": 412, "message": "Precondition Failed" } |
|PayloadTooLargeException |{ "statusCode": 413, "message": "Payload Too Large" } |
|UnsupportedMediaTypeException | { "statusCode": 415, "message": "Unsupported Media Type" } |
|ImATeapotException |{ "statusCode": 418, "message": "I'm a teapot" } |
|MisdirectedException |{ "statusCode": 421, "message": "Misdirected" } |
|UnprocessableEntityException |{ "statusCode": 422, "message": "Unprocessable Entity" } |
|InternalServerErrorException |{ "statusCode": 500, "message": "Internal Server Error" } |
|NotImplementedException |{ "statusCode": 501, "message": "Not Implemented" } |
|BadGatewayException |{ "statusCode": 502, "message": "Bad Gateway" } |
|ServiceUnavailableException |{ "statusCode": 503, "message": "Service Unavailable" } |
|GatewayTimeoutException |{ "statusCode": 504, "message": "Gateway Timeout" } |
|HttpVersionNotSupportedException |{ "statusCode": 505, "message": "HTTP Version Not Supported" |


## 使い方

### 引数なし

```
import { BadGatewayException } from @nestjs/common

throw new BadGatewayException()
```

```
{
  "statusCode": 502,
  "message": "Bad Gateway"
}
```

### message変更

引数に文字列を入れると`message`として挿入され、デフォルトの`message`は`error`として返される

```
import { BadGatewayException } from @nestjs/common

throw new BadGatewayException("error message!!")
```

```
{
  "statusCode": 502,
  "message": "error message!!",
  "error": "Bad Gateway"
}
```

`await-catch`使うとこんな感じ

```
import { BadGatewayException } from @nestjs/common

async () => {
  await test().catch(e => throw new BadGatewayException(e.message)
}
O/Rマッピングって便利

## O/Rマッピングとは　
O/Rマッピング(Object-relational mapping)について、Wikipediaには以下のように書かれています。

`データベースとオブジェクト指向プログラミング言語の間の非互換なデータを変換するプログラミング技法である。`
O/Rマッピングを実現する仕組みを、O/Rマッパーと言う。
技術書とかで初学者のかたも`ORM`ってみたことありますよね？
スルーしますよね、こういう3文字スペル笑
<br>


### SQLを知らなくてもCRUD処理が書ける
ってことになるんですよね。
つまりActiveRecordを使うからですね。
僕もRais勉強し始めてなんとなく読めるようになって、、て段階では。
このことのすごさすら分かっていませんでした。

すごく簡単な例をあげるだけの記事になってしまうのですが、
モデルをつくり、ActiveRecordを使った場合の

```rb
post 'ar/users/' do 
 User.create (name: (params[:name])
 redirect to('ar/users')
```
って


```rb
post 'users/' do
 db = SQLite3::Datebase.new'sample.db'←データベースをつなげる
 sql = 'insert into user(name) values(?);'
 stmt = db.prepert(sql)
以下省略

```

ってなってるよってことを知っておきましょうという自分へのメモです！
いろいろとはしょってますが
それでは！！
変数名のルールとよく使われる命名記法①

# 変数名のルールとよく使われる命名記法

- JavaScriptでは一つのプログラムの中で複数の変数を使用可能
- それぞれの変数には異なる値を格納可能

- 複数の変数を識別する為にそれぞれの変数には変数名を付けていく
>今回はJavaScriptにおける変数名の付け方についての解説をまとめてみます。

##変数名のルール

JavaScriptで変数名で使用できる文字やルールについて
>JavaScriptでは変数名や関数名などの名前のことを識別子と呼ぶ

- 使用可能な文字
    - Unicode文字
        - 世界中の文字表現に対応できるコンピューター用の統一文字コード。<br>欧米を中心に提唱されたコードで，アルファベットや漢字など
    - アンダーバー(_)
    - ドル記号($)
- 大文字と小文字は区別される
- 使用不可
    - 1文字目には数字(0から9)
    - 変数名にはJavaScriptの予約語

###使用可能例
>
- `num`
- `sales2020`
- `user_id`
- `$count`

---

大文字と小文字は区別されるので、<br>次の4つの変数は別の変数として扱われる
>
- myname
- MyName
- myName
- MYNAME

---

Unicode文字には日本語などの文字も含まれる
つまり、変数名に日本語を使用することも可能

```js:使用例
let 身長 = 180;
console.log(身長);
//=> 180
```

---

変数名には数字も使用可能
ただし、1文字目を数字にするとエラーになる

```js:使用例
let 5box = 10;
console.log(5box);
//=> Uncaught SyntaxError: Invalid or unexpected token
```

---

変数名には JavaScript の予約語は使用不可
>予約語とは<br>JavaScriptで予め特別な意味を持つ単語<br>として扱われているもの

```js:使用例
let switch = 'red';
console.log(switch);
//=> Uncaught SyntaxError: Unexpected token 'switch'
```

>以下、参考リンク
[JavaScriptの予約語の一覧](https://www.javadrive.jp/javascript/var/index3.html#google_vignette)
JavaScriptを使って簡単なおみくじ

#仕様
今回はドットインストールより、JavaScript使った簡単なおみくじの作成をしました！

Math.randam()を使い０以上１未満で数値を生成しif文を使い条件別に確立を決め、
ボタンを押すと結果が表示されます。


```JavaScript

const btn = document.getElementById("btn");
  btn.addEventListener("click", ()=> {
    const n = Math.random();
    if (n < 0.1) {
      btn.textContent = "大吉";  // 確率を10%に指定
    } else if (n < 0.4) {
      btn.textContent = "中吉";  // 確立を30%指定
    } else {
      btn.textContent = "凶";  // 確立を50%指定

```


- ０以上１未満の数値がランダムでnに代入される

- nが０.１未満なら”大吉”
- nが０.１以上０.４未満なら”中吉”
- nが０.４以上１未満なら”凶”

##メモ
その他パターンでも参照します。

```JavaScript
const results = ["大吉", "吉", "中吉","小吉", "末吉", "凶"];
     const n = Math.floor(Math.random() * results.length);
     btn.textContent = results[n];

```
- lengthプロパティ で results=[ ]配列の要素数を表現

```javascript

const results = ["大吉", "吉", "中吉","小吉", "末吉", "凶"];
     btn.textContent = results[Math.floor(Math.random() * results.length)];

```
- results[n] に 二列目を直接代入
[OpenID Connect]Yahoo! ID連携 v2とCurlを使って、ID連携お試し。



# はじめに
Yahooが、ID連携のサービスを出してる。v1とv2があるようだが、最新版のv2を利用してみる。

https://developer.yahoo.co.jp/yconnect/v2/

この記事では、OpenID Connectのクライアント側をCurlで簡単に疑似体験するための手順を記載する。
注意として、OpenID Connectの手順をかなり省略してる。(OpenID Connectに準拠できていない。)OpenID Conncetについては、下記を参照。
http://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html


# Yahoo! ID連携 v2を利用するための準備
上のYahooのURLから、Client IDの登録まで行う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681596/ff8d7ab2-9e99-ea62-1fed-6d7f7deb2710.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/681596/a6453828-ca4b-158f-366c-2432ee4b1a06.png)


# 認可リクエストを送り、認可コードを取得


Authorizationエンドポイントの仕様(v2仕様)は下記のとおり。

https://developer.yahoo.co.jp/yconnect/v2/authorization_code/authorization.html


ブラウザで認可リクエストを送る。
※redirect_uriは、%エンコードしてる。
※tateとnonceは任意パラメータだったが、つけてみた。

```
https://auth.login.yahoo.co.jp/yconnect/v2/authorization?response_type=code&client_id=＜クライアントID＞&redirect_uri=
https%3A%2F%2Fdeveloper.yahoo.co.jp%2Fstart%2F&state=xyz&scope=openid+profile&nonce=abc
```


認証/認可をすると、リダレクトURLのサイトにアクセスして、URLを見ると認可レスポンスが返ってる。

```
https://developer.yahoo.co.jp/start/?state=xyz&code=100Vp1mp
```

# トークンリクエストを送り、トークンを取得

Tokenエンドポイントのv2仕様は下記のとおり。

https://developer.yahoo.co.jp/yconnect/v2/authorization_code/token.html

v2では、GETではなく、POSTでリクエストを送る必要がありそう。

Authorizationヘッダに、Clinet ID, Client Secretをコロンでつなぎ、Base64エンコードした文字列を指定する。
下記のコマンドで、その文字列を事前に作成しておく。

```
echo -n "{client_id}:{client_secret}" | base64
```

下記のリクエストを送り、トークン(access_token、refresh_token、id_token)を取得する。

```
curl -X POST -H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Basic ＜client_id:client secret をbase64した値＞' \
-d 'grant_type=authorization_code&code=100Vp1mp&redirect_uri=https%3A%2F%2Fdeveloper.yahoo.co.jp%2Fstart%2F' \
https://auth.login.yahoo.co.jp/yconnect/v2/token
```

下記のようなレスポンスが返ってくる。

```

{
"access_token":"アクセストークン",
"token_type":"Bearer",
"expires_in":3600,
"id_token":"IDトークン",
"refresh_token":"リフレッシュトークン"
}

```


# Web APIアクセス(属性情報取得)
トークンが返ってきたら、ID Token検証の手順がありますが、それは今回スキップします。
下記の仕様から、属性情報を取得します。

https://developer.yahoo.co.jp/yconnect/v2/userinfo.html

下記のリクエストを送る。

```
curl -H 'Authorization: Bearer アクセストークン' \
https://userinfo.yahooapis.jp/yconnect/v2/attribute
```

下記の様なレスポンスが返ってくる。

```
{
"sub":"H5TX5WAAZEQHLO2WPOW2ECDAGE",
"locale":"ja-JP",
"birthdate":"xxxx",
"zoneinfo":"Asia\/Tokyo",
"nickname":"xxx",
"picture":"xxx"
}
```
MacでArduino互換機 KS0486 Keyestudio PLUS(Type-C)を使いたい


今回使用するのはコレ
[KS0486 Keyestudio PLUS Development Board (Black And Eco-friendly)](https://wiki.keyestudio.com/KS0486_Keyestudio_PLUS_Development_Board_(Black_And_Eco-friendly))

Arduino互換機の接続がType-C接続になってます。すっごく便利！
ですがmacで使えるようになるまでコレまた癖がありましたので解決策を記載していきます。

## ドライバのインストール
まずはKeyeStudioの[製品ページ](https://wiki.keyestudio.com/KS0486_Keyestudio_PLUS_Development_Board_(Black_And_Eco-friendly))に行き 
![スクリーンショット 2021-04-09 0.30.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/e6b538f8-83fb-3d0a-6717-dcd6f7f2084d.png)
[4.3_How to Install the Driver of CP2102](https://wiki.keyestudio.com/KS0486_Keyestudio_PLUS_Development_Board_(Black_And_Eco-friendly)#How_to_Install_the_Driver_of_CP2102)へここに記載されている「https://wiki.keyestudio.com/How_to_Install_the_Driver_of_CP2102_on_MAC_System 」のリンクへ飛ぶ.
![スクリーンショット 2021-04-09 0.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/d54c07ac-8a4e-ca78-01f0-c3106c58a9c4.png)
具体的なMacへのCP2102のドライバインストール方法が記載されているのでコレに従う。
まずはCP2102のドライバを紹介されている[ここ](https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers)からダウンロード.

.dmgを開くと複数のファイルがあり.appが本命のファイル
なお古いmacのバージョンによってはLegacyフォルダからインストールする場合もあるのでしっかりHPを確認し自分の環境に適したものをインストールして欲しい。

![スクリーンショット 2021-04-09 0.32.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/aa979d1f-d76b-330d-3ac5-ce13f564b9fc.png)

あとは指示に従いインストールして行き
インストール途中でヘルパーとシステム拡張の許可を求めてくるので許可、

![スクリーンショット 2021-04-09 0.34.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/18a297f1-c13a-d7c0-ebed-d99370c10451.png)
セキュリティ環境設定を開き,読み込みブロックの許可しインストール画面に戻ると完了しています。

![スクリーンショット 2021-04-09 0.35.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/ccd3c88e-26ce-aec0-5be2-5b57ba13fce5.png)
![スクリーンショット 2021-04-09 0.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/85fdef03-9822-8e87-3b20-2e2ee741ea56.png)

ドライバのインストール後、KeyeStudio Plusを接続し直すと無事につながっているのが確認できました。![スクリーンショット 2021-04-09 0.51.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/fb29092b-0bd9-267f-6beb-aacc4991560b.png)

## 認識しない場合
せっかくMacを使っているので Type-CtoType-Cで接続したい！そんな思いから購入したKeyeStudioPlusですがCtoCケーブルでは認識どころかうんともすんともLEDすらも点灯しません。私の環境ではMacBookAir2018とFujitsu wu2C3の2台のType-Cポートで動かないのを確認しました。

どうすれば認識するのか?
片方が一般的なUSBのUSBtoType-Cだと認識しました。
![IMG_1488-min.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/2d06bf1f-f7b1-4b41-50c6-bda7cf9fd00d.jpeg)

これはType-C独特の抵抗をどうするかにあたるのかな？と思っています。
CtoCで認識しないってことはこのType-CはただUSBコネクタとしてついているだけなのかな？とか,素人考えなのでなにかいい案などありましたら是非教えて下さい。

## 最後に
YouTubeにはmicro-BをType-CへChangeしている動画などがあります。ワクワクしますがまだまだType-Cについて知らないとこだらけです。いつか電子工作のDC電源などもType-Cに置き換わる日が来るのかなぁ
[Converting devices to USB Type-C@YouTube:DIY Perks
](https://www.youtube.com/watch?v=V-vFtiDYiIw)
開発初心者がGitでつまずいたこと学んだこと

#前提
プログラミングは以前から勉強していたものの、チームで開発をするにあたりgitを初めて実践的に使っていく上で、
私が個人的につまずいたこと学んだことを以下メモ書き程度に記述します。

#1.つまずいたこと
##1.1プライベートリポジトリにアクセスする
まずは、リモート上にあるOrganizationアカウントのプライベートリポジトリからhttps接続でcloneしようとした際に以下のようなエラーが出た。

```
remote: Repository not found.
fatal: repository 'https://ユーザ名@github.com/組織名/リポジトリ名/' not found
```
これはSSH接続でcloneすることにより解決した

```
git@github.com:ユーザ名/リポジトリ名.git
``` 
SSHの設定でconfigでHostnameを設定している場合は

```
git@ホスト名:ユーザ名/リポジトリ名.git
``` 
SSH鍵の作り方は以下参照
[お前らのSSH Keysの作り方は間違っている](https://qiita.com/suthio/items/2760e4cff0e185fe2db9)

##1.2.ローカルの変更を残さずにブランチを切り替える
developブランチとfeature/○○○のブランチを切り替えることがよくあった。しかし、コミットしていないローカルの変更があった場合、ブランチを切り替える際に変更を保持したままの状態となってしまい、正常に切り替えができない。

```
git stash 
``` 

git stash (list省略可)を使うことでコミットしていない変更を退避させ、きれいにブランチを切り替えることが可能となります。
戻す際は

```
git stash pop
``` 
退避した変更を戻すと同時にstash listから削除することができる。
##1.3.ローカルにないブランチをリモートから落とす
チーム開発していると、ブランチを分けて分担して作業している際に、他人が作業していたブランチを自分のローカルに落として確認したいという場面がよくありました。その際に使用するコマンドは

```
$ git fetch
$ git checkout -b ブランチ名　origin/ブランチ名
``` 
fetchでリモートの最新を落とし、自分のローカルに任意のブランチを作ります。（名前はリモートと同じにすることを推奨）
fetchとpullの違いについては以下参照
[【初心者向け】git fetch、git merge、git pullの違いについて](https://qiita.com/wann/items/688bc17460a457104d7d)

##1.4.直前のコミットを取り消す

```
#ローカルに変更を残したままコミットだけ取り消す
$ git reset --soft HEAD^ 
#変更をローカルから削除した上でコミットを取り消す
$ git reset --hard HEAD^ 
```

#2.学んだこと
##2.1 コミットはこまめに
コミットを細かく刻むことでエラーやバグが起きた時、最小限で戻すことができる。
特にライブラリなどをインストール後などコミットする。

##2.2 git add . を安易に使わない
コミットはメッセージに基づくまとまりでしないと、メッセージ内容に沿わない変更を含めてしまう。
変更をしたあとはすべてステージングするのではなく

```
$ git add -p ファイル名
```
などすることで一行一行確認してステージングに上げてコミットすると良い

##2.3 git push -f は慎重に
チーム開発をする上で強制pushした内容に不備があるなどでリモートを汚してしまう可能性がある。
基本的には使わないが吉。

#参考
[Gitでよく使うコマンド一覧](https://qiita.com/uhooi/items/c26c7c1beb5b36e7418e)
[【git stash】コミットはせずに変更を退避したいとき](https://qiita.com/wann/items/688bc17460a457104d7d)
[[git reset (--hard/--soft)]ワーキングツリー、インデックス、HEADを使いこなす方法](https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe)
[マンガでわかるGit 11話「強制プッシュするとどうなるの？プッシュできないときはどうすべき？」](https://next.rikunabi.com/journal/20180209_t12_iq/)
ガパピー.js - UNICODE NFC/NFD Chechker -

# IEは無理ゲ🖕

# 概要
こちらの記事

https://qiita.com/fury00812/items/b98a7f9428d1395fc230

を見て。UNICODEのNormalizeの ``Kompatible`` の挙動が気になった。数年前に作った **[ガパピー.js](https://libraplanet.github.io/gapapi-.js/)** では ``NFC``、 ``NFD``しか対応していなかったので、新たに ``Kompatible`` の ``NFKC``、 ``NFKD`` にも対応してみて比較してみた。またそれに合わせて、リポジトリを分離して公開。

# ガパピー.js
* repository (github)

https://github.com/libraplanet/gapapi-.js

* 動作ページ (gh-pages)

https://libraplanet.github.io/gapapi-.js/

名前の由来は、XP時代のいわゆる ``UTF-8-MAC`` と呼ばれる、 ``Normalize Form`` を理解していない馬鹿どもが騒いでいたあの件で、ちょっと興味をもったので調べてみようとした際に思いつきで使った文字がこの3文字+α。(すなわち、私も理解していない馬鹿)。

javascriptで作れんじゃね？と思って、その時は ``サロゲート ペア``に興味を持っていて、併せて作ったのがこのツール。

# ~~小野~~ 検証
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/e1a53fce-e470-811a-c36e-c08f914985a0.png)



``NFKC`` 素晴らしい。。。 **誰得糞記号筆頭の和暦文字** の合字も、しっかり良い感じ。同じ合字でも、濁点は分離していないのに、**誰得糞記号筆頭の和暦文字** が分離しているのは、地味に嬉しいのかも知れない。``㌦`` なんかも ``NFKD`` では ``ト`` `` ゙ `` ``ル`` と、濁点まで分解されていたりするけど。``NFKC`` では ``ド`` ``ル`` だもの。

# 余談①
関係無いけど、カタカナと濁点とか、日本語文字を の ``リガチャ (合字)`` にしたの、絶対に間違っていると思うんだよね。。。。正直半角カタカナでやってた分離表現文化は、合字なんかにしないで、そのまま無くなりゃ良かったのだよ。。。絶対レガシーで固執しているやつ以外に使わないって。``㈱`` とかほんとギャグの粋。ほんとﾗ㍑。

# 余談②
``㈱`` を ``Kompatible`` すると カッコが半角なのもすごく良い。こんな文字使うロートルなんて、カッコもなんでも全角使う人多いと思うのに、半角で攻めてくるこの素晴らしさ！お見事。全角カッコなんて、9割9分使い道無いもんね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/1ee8fd7a-b4f5-6c16-90bb-d553a6a10fae.png)
チームで価値観を共有するカードゲームの紹介～wevox values card、Moving Motivators ～

こんにちは、GxPの石村です。

チームで価値観を共有するためのカードゲームを2種類試してみましたので、実感できた効果・使えそうな場面と合わせてご紹介します。
どちらもオンラインで実施できます！

* [wevox values card](https://wevox.io/valuescard) の [オンライン版](https://values-card.wevox.io/signin)
* [Moving Motivators](https://nuworks.jp/ja/2016/10/26/moving-motivators/)

# なぜ価値観を共有したいと思ったか

「自分もチームも楽しく働くにはどうしたらいいか」ということにずっと悩んでいたのですが、
その反面、私はそれを望んでいるけど、チームは望んでいるんだろうか？ということが不安でした。
人によって仕事に対する価値観は異なるため、渡された仕事を効率的にこなせさえすれば、関係性や楽しさといったことには関心がない人もいるのではないかと考えていたためです。
そこで、RSGT2021のCoach’s Clinicで相談してみたところ、それはチームに聞いてみるしかないよね、という話になりました。
そこで教えてもらったのが、「wevox values card」と「Moving Motivators」です。
実際にチーム、部署、新卒入社の方、2on1などの場面で遊んでみました。

# wevox values card

[wevox values card](https://wevox.io/valuescard) の [オンライン版](https://values-card.wevox.io/signin)です。
こちらはカードが多様です。価値観を示すワードがランダムに出てきて、自分に合うものを残していきます。
そのため、結果はひとりひとり違うものになります。

こんな感じの結果が出ます。

![新人さん.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323160/ab920443-8a7f-787d-15cd-a13840e6008f.jpeg)

プレイの流れとしては、以下の通りです。

1. 全員ユーザー登録する（無料）
1. 代表1名が新しいルームを作成し、招待idを発行する
1. 参加者は招待idを使って同じルームに入る
1. テーマを決める（例：仕事で大事な5つの価値観）
1. プレイする。
1. 終わったら結果を見ながらひとりひとりなぜその5つになったかを説明する

プレイ中はこのような画面になり、自分の手元にあるカードと、他の人が捨てたカードだけが見えます。
「それ捨てちゃうの！？」なんて会話をしたり、全然関係ない雑談もしながらプレイすると楽しいです。
![プレイ中_多人数.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323160/46a49d3b-cb9e-ed6f-ef6e-ca66d81765d8.png)

# Moving Motivators

[Moving Motivators](https://nuworks.jp/ja/2016/10/26/moving-motivators/)は、参加者全員が10枚の同じカードを使います。
プレイするときはテーマを決めて1～3位を選び、なぜそのカードを選んだかを共有します。

私はPDFをダウンロードして、オンラインホワイトボード（miro）に画像を切り貼りして遊びました。
時間が余った人は4位以下もなんとなく並べています。
![Moving Motivators.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323160/a1640376-dda3-b79d-3dbf-0c8feed35b41.jpeg)

# 効果や使いどころ

どちらも参加者同士の価値観を共有できるため、どちらでも良いので一度やってみることをオススメします。
ダイレクトに「仕事に楽しさ求めてますか？」と聞くより、よほど相手を知ることができるように思います。

使い分けのイメージですが、

「wevox values card」は自由な発想で個性を知りたい、自分の言葉で語ってほしい、という場合向いているように思います。
山札の中には同じカードがないため、全員違う言葉の組み合わせになるからです。
その半面、たまたまどんなカードが配られるかによってしまうので、本人さえピンときていないが消去法で残った、というカードも出てきてしまいます。
とはいえ、「こういう感じなのでちょっとニュアンス違うんだけどこれを残した」といった説明は聞けるかと思います。

「Moving Motivators」はチームの共通点や違いが見つけやすいです。
今回の例だと、自由参加で実施したためか、「受容」「関係性」をほぼ全員3位以内に選んでおり、人間関係が大事だと語っていました。
誰も3位以内には選ばなかったカードもあり、偏りがわかりやすいです。
その反面、発表順が後になると「XXさんと同じです」といった説明になる場合もありますので、本人の言葉で語ってもらえる度合いはこちらの方がやや低そうです。
集計してレーダーチャートを作ってみるのも楽しいと思います。

個性を知りたいか、共通点や違いを見つけたいかによって、使い分けるのがいいのではないかなと思いました。
また、テーマも「仕事」と「人生」で同じメンバーで2回やってみたところ、全然違うカード構成になっていましたので、テーマを変えて複数回やってみるのもオススメです。

どちらもzoomをつなぎながら遊んだのですが、多人数の場合は、少人数に分けてプレイし、全員集まって結果共有をすると楽しかったです。
プレイ上の制限もありますが、人数が多いと一部の人しか話さなくなってしまうので、少人数の方が、ワイワイと話せるところが利点です。

# さいごに

他の取り組みも合わせて行っているため、このゲームだけで何かが変わるわけではありませんが、
なんとなくチームの雰囲気が明るくなり、発言量が増えてきたように思います。

是非みなさんの現場でも試してみてください。
figureから.figと.pdfを適当な場所へ保存する

タイトルの通りです．
いちいち保存したいfigureをクリックしてファイルから名前をつけて保存...などとやるのが面倒になったので簡素ですが作ってみました．

# はじめにお知らせしておくこと
* 保存先フォルダに同名のファイルがあった場合，__確認なしで__上書きされます．十分に注意してください．
* ファイル名に半角スペースや全角文字が入っていても問題なく保存できるはずです．

# ソースコード
本題のソースコードです．

```matlab:save_fig.m
name = input('なんて名前にする？\n=>','s');
figpath = 'C:\MATLAB\';
%   勝手に上書きされるよ，注意！
saveas(gca,strcat('./fig/',name,'.fig'));
saveas(gca,strcat(figpath,name,'.pdf'),'pdf');

clear figpath name
```

実行すると，

> なんて名前にする？
> =>

と聞かれ，つけたい名前を入力することができます．
入力したのち，エンターキーをｯﾀｰﾝ!と押すことで，figファイルとpdfファイルを保存することができます．
保存先はこのまま使うと

+ .figはカレントディレクトリのfigフォルダの中
+ pdfファイルはC:\MATLABの中

です．特にpdfファイルの保存先は不便なので，お好みの場所へと変更するといいでしょう．
1つめのsaveasでfigを保存しています．保存先を変えたい場合はstrcatの部分をいじってください．
2つめのsaveasでpdfを保存しています．同じく保存先を変えたい場合はstrcatの部分をいじってください．

# トラブルが起きた場合は
このmファイルで起こるトラブル(エラー)は

>無効かパスが見つかりません

しかないと思います．パスが間違っているか存在しないフォルダに保存しようとしているので，パスを確認してフォルダがあるか確認してください．

それ以外でエラーがでたらMATALBのヘルプを確認してみてください．
https://jp.mathworks.com/support.html?s_tid=gn_supp

# PDFの切り抜き(2021/4/9 追記)
この方法でPDFを保存した場合，空白部分が大きく使いづらいものとなってしまいます．
それを解決したい場合，pdfcropなどで検索してみてください．
TypeScriptでクラスと関数を相互変換する

# 基本構文
```typescript
class Sample<R> {
  static staticMethod() {};
  private privateField;
  private privateMethod(){}
  private readonly readonlyField;
  publicField;
  publicMethod(){}
  constructor(params: R) {
    this.privateField = params;
    this.readonlyField = params;
  }
}

const sample = <R>(params: R) => {
  let privateField = params;
  const readonlyField = params;
  const publicField = params;
  const privateMethod = () => {};
  const publicMethod = () => {};
  return {
    publicField, publicMethod
  }
};
sample.staticMethod = () => {};

```

# 継承/mixin
```typescript
// 継承
class Child<R> extends Sample<R>{
  private childPrivateField;
  childMethod() {}
  constructor(params: R) {
    super(params);
    this.childPrivateField = params;
  }
}
// mixin
const child = <R>(params: R) => {
  const sampleResponse = sample(params)
  let childPrivateField;
  const childMethod = () => {};
  return {
     ...sampleResponse,
     childMethod
  }
};
```

# 変換可能性について

原理的に、クラス -> 関数の変換は上記の方法で可能です（もちろん、関数ではprototypeやinstanceofは使えなくなります）

一方、関数 -> クラスの変換はこの方法でできるとは限りません。典型的なのが、多重継承をする場合でしょう。関数型では複数の元クラスを自在にmixinすることができますが、こういうコードを上記の方法でクラスに変換することはできません。関数型の記述を全部constructorに押し込めればクラスへの変換は可能なので、できないことはないのですが、記述の自由度の高さでは、関数型に軍配が上がると言えそうです。

# クラスのメリット

では、クラスと関数どちらでも良い場合、どちらを使うべきでしょうか。ケースバイケースだと思いますが、クラスのメリットは「記述の不自由さ＝可読性の高さ」ではないかと思います。クラスでは「オブジェクトがあって、それに対して操作する」ということが、コード上から明確ですが、関数では、そこから完全に外れる書き方もできます。これは、特定の状況ではクラスの可読性やメンテナンス性の高さにつながります。

「クラスは関数に変換できる」ということを踏まえた上で、それでもクラスを採用するメリットは何なのかトレードオフを考えること大事ではないかと思います。
カラム名を一括で（読み替え一覧から）変換する

#縦結合したい！でもカラム名があってない！！！

つまり、こういうこと
テーブル１
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/2273fdb0-0a3d-c27b-400c-7c3ef38dbdb0.png)
「クエリの追加」で縦に結合すると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/dc205003-8950-d4ad-c509-d7c9f1dadae1.png)

…そうだよねぇ！残念！
#これ全部カラム名の変更かけるの…
結合するテーブルがいっぱいあったら？カラムが多いテーブルだったら？

とても対応しきれる気がしないし、カラム名書き換えの式を間違えずに作り切れる気がしない…（あと、間違ってても気が付ける気がしない）


#読み替え用の一覧作っていっぺんに書き換えよう！

##まずは、読み替え用のテーブルを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/c82ee912-6f3d-fdb0-bc57-9102d1299850.png)
　↑「読み替えリスト」って名前のテーブルにした

　なお、カラム名は何でもよいので、1カラム目がOld 2カラム目がNewになるようにする。
　（なお、テーブルに3カラム以上作るとその後怒られる）

　※テーブルの元データをExcelとかで外部に持たせておくと、追加とかメンテナンスとか、QCとか楽かもしれない

##読み替えをかけたい方のテーブルに変換かける

数式バーに直接書いちゃう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/d1305cb2-7003-b475-74a2-a2d57a886a9c.png)

    = Table.RenameColumns(変更された型,Table.ToRows(読み替えリスト))
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/981acb67-26e3-14ae-3b2b-b7a8dd99e6be.png)
黄色：直前のステップ名
水色：さっき用意した変換用のテーブル名

##縦に結合したら…？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/404b90a5-58f8-d8e4-d2c7-ec5650c7a9e3.png)

もう残念じゃない！

##補足：読み替え用のテーブルについて
3つ以上テーブルを変換かけたいときや、今後こんなカラム名で来るデータもあるかも？を、事前に用意したい場合、変換をかけられてるテーブルでは関係ない読み替えのペアも登録しておきたいこともあると思います。

たとえば、変換かけたいテーブルがこれ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/467596c8-5311-fce5-d014-d62fc6a1e462.png)
読み替え用テーブルがこれ
（説明するまでもないですが3行目はテーブル内に存在しないカラム名）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/94ad92ab-2d41-58f2-519e-b56042cc577b.png)

こういう場合は、第2引数に「MissingField.Ignore」を足すと

    = Table.RenameColumns(変更された型,Table.ToRows(読み替えリスト),MissingField.Ignore)

↓存在しないカラム名は無視されるので、問題なく変換されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/d79ccf10-07e8-d1d7-47e3-e38c01da0679.png)
PlatformIO January2021(version1.53.2)でのビルドエラー


##PlatformIO のバージョン
January2021(version1.53.2)


##症状
2020年11月以来、5か月ぶりに Platform IOで新規プロジェクトを作成し、M5Stackのライブラリをプロジェクトに追加しました。
新規プロジェクト作成時かM5Stackライブラリ追加時か忘れましたが、どちらかで自動的に最新バージョンにアップデートされました。

その影響かもしれませんが、その後、M5Stackのプログラムをビルドすると、こんなエラーが出ました。




```
.pio\build\m5stack-grey\libFrameworkArduino.a(main.cpp.o):(.literal._Z8loopTaskPv+0x4): undefined reference to `loop()'
.pio\build\m5stack-grey\libFrameworkArduino.a(main.cpp.o): In function `loopTask(void*)':
C:\Users\ユーザーネーム\.platformio\packages\framework-arduinoespressif32\cores\esp32/main.cpp:17: undefined reference to `loop()'
collect2.exe: error: ld returned 1 exit status
*** [.pio\build\m5stack-grey\firmware.elf] Error 1
```
<br>

##解決方法
エラーメッセージ
undefined reference to `loop()'
のとおり、

C:\Users\ユーザーネーム\ .platformio\packages\framework-arduinoespressif32\cores\esp32/main.cpp

にある

```
loop()
```

をコメントアウトしたら、ビルドが成功しました。
<br>

本当にこれでいいのか不安ですけど、
どこかのネコのように
「通ったのでヨシ！」
とします。


<br>
CentOS8 Nginx1.18 インストール on さくらVPS

# やったこと
- `nginx.repo` の作成
- nginx 安定版(stable)のインストール

参考サイト
https://minokamo.tokyo/2021/03/18/3476/

# 手順
環境

```
# cat /etc/redhat-release 
CentOS Linux release 8.3.2011

# vi /etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

# sudo dnf install nginx
# nginx -v
nginx version: nginx/1.18.0
```

以上になります。

## 最新版を利用する場合

最新版(mainline): `nginx-mainline`

[参考サイト]('https://minokamo.tokyo/2021/03/18/3476/') の`yum-config-manager --enable nginx-mainline` が通らない場合は、 `nginx-mainline` だけ記載すれば出来ます。

`yum-config-manager` を使うためには、`yum-utils` が必要になります。
https://akamist.com/blog/archives/942 に書かれておりました。

また、その場合は、
`/etc/yum.repos.d/nginx.repo` ここではないようなので、ご注意ください
★どこなのかまで、調べてないです・・・

# まとめ
しばらくサーバを触っていないと色々古くなっているので、アップデで時間かかりますね。
今後は放置気味をやめていきたいところです。

`dnf`コマンドに変わりましたが、`yum` で通るのでどちらでも大丈夫ですね。
[CSS] 要素を非表示にする3つの方法

# はじめに

CSSでDOM要素を見えなくする3つの方法と
それぞれの挙動に関する違いに関してまとめました！

# CSSで要素を隠す3つの方法

CSSで要素を見えなくする方法は以下の3つになります！

**・display: none**
**・visibility: hidden**
**・opacity: 0**

まずは上記3つのプロパティを
「共通点」と「相違点」に分けて整理していきます！

# 共通点

共通点はタイトル通り
**「DOM要素が非表示」**になることです

たしかにどれも非表示になるのですが
細かい挙動に関しては違いがあります！

# 相違点

以下の2点でそれぞれ挙動に違いがあります！

**・領域を確保するかどうか**
**・クリックできるかどうか**

わかりやすく表にまとめるとこんな感じです

| スタイル | 領域の確保 | クリックイベント |
| --- | --- | --- |
| display: none | ❌ | ❌ |
| visibility: hidden | ⭕️ | ❌ |
| opacity: 0 | ⭕️ | ⭕️ |

「言葉だけではイメージ湧かないから動画を交えて解説して欲しい・・・」

そうですよね。。。

反省して、ここからは動画を交えてあなたが直感的に
イメージしやすいように解説を進めていきます。

# 実際に検証してみる

以下のように色の違う3つのボックスがあるとします

![threeBox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508390/f59305f2-cf99-4d37-cc89-99f6947adaf5.png)

### ボックス1に「display: none」を指定した場合

結果は以下のGIF動画のようになります

![displayNone.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508390/c0bbd999-f538-fdf0-6e58-ac1d3af0e424.gif)

ボックス1に「display:none」を指定すると領域を確保しなくなるため、図のようにボックス2とボックス3が左に移動します。領域を確保しないため、親要素の横幅が変化してるんですね。

### ボックス1に「visibility: hidden」を指定した場合

結果は以下のGIF動画のようになります

![visibility-hidden.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508390/b820b092-0a49-5599-7a5b-b9386c557aca.gif)

ボックス1に「visibilt:hidden」を指定すると領域を確保するため、ボックス1が見えなくなるだけです。「display: none」と違ってボックス2と3は左に移動しません。また、ボックス1をクリックしてもクリックイベントは発火されないのでConsoleにログは出力されません。

### ボックス1に「opacity: 0」を指定した場合

結果は以下のGIF動画のようになります

![opacity-zero.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508390/9c80959e-1fcd-dc4b-efa2-6ad4c63401b2.gif)

ボックス1に「opacity:0」を指定すると「visibility: hidden」と同じく領域を確保するため、ボックス1が見えなくなるだけです。ただ「「visibility: hidden」との違いは、ボックス1をクリックしたときの挙動です。「opacity:0」ではクリックイベントが発火するため、クリックしたときにConsoleに「click1」というログが出力されます。

こんな感じでそれぞれ挙動の違いがあるので要素を見えなくしたいときはそれぞれのプロパティの特性を理解した上で適切に使いこなしていくのが良さそうですね！

# 結論

結局、以下の表が全てなので、最後にもう一度載せておきます！

| スタイル | 領域の確保 | クリックイベント |
| --- | --- | --- |
| display: none | ❌ | ❌ |
| visibility: hidden | ⭕️ | ❌ |
| opacity: 0 | ⭕️ | ⭕️ |

# 参考文献

[display:none; VS visibility:hidden; VS opacity:0; | Qiita](https://qiita.com/FJHoshi/items/0ed4b628acdab696be62)
[display:none と visibility:hidden の違い | Qiita](https://qiita.com/rico/items/0f645e84028d4fe00be6)
ポートフォリオ(React)が完成しました

言語：React
データベース：firebase

ポートフォリオが完成したのでこれから就職活動本格化していこうと思います！
よかったら実際にやってみてくれると嬉しいです
コメント等あれば、ぜひ「ご意見はこちら」からよろしくお願いします。

アプリurl ↓↓
https://huruya-rei-9.github.io/originalapp-home/

github ↓↓
https://github.com/huruya-rei-9/originalapp-home
ニューラルネットワークの基礎を整理しよう(1)

#はじめに
　今回初めてQiitaに投稿しようと思い立ち、最近勉強したニューラルネットワークの理論について、備忘録も兼ねて投稿させていただきます。
追記（2021/4/11）:[補足記事](https://qiita.com/yamaken_1130/items/8aaee2b2ec08289fe44a)をアップしました。
追記（2021/4/13）:[Pythonにおけるニューラルネットワークの実装](https://qiita.com/yamaken_1130/items/d455531156d2be1af81a)をアップしました。
#どうやって勉強したか
　[「ゼロから作るDeepLearning--Pythonで学ぶディープラーニングの理論と実装」](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585)という書籍を読み込みました。今回は前半部分の内容を整理します。

#パーセプトロンについて
　パーセプトロンとは入出力を兼ね備えたアルゴリズムです。二つの入力値から一つの値を出力するAND回路やOR回路もこのパーセプトロンの一種。今回はAND回路を取り上げて、パーセプトロンとはなんぞや、ということをみていきます。
AND回路の入出力表を示します。

|  入力$x_{1}$  |  入力$x_{2}$  |  出力$y$  |
| ---- | ---- | ----|
|  1  |  1  | 1|
|  1  |  0  |  0|
|  0  |  1  |  0|
|  0  |  0  |  0|


　要は二つの入力がどちらも1である時、1を出力し、それ以外の時は0を出力するというものです。
ではこの関係を式で表してみます。

```math
y = \left\{
\begin{array}{ll}
0 & (b+\omega_{1}x_1+\omega_{2}x_2 \leq 0) \\
1 & (b+\omega_{1}x_1+\omega_{2}x_2  \gt 0)
\end{array}-(1)
\right.
```



　ここで出てきた定数$b$をバイアス、$\omega_{1},\omega_{2}$を重みと呼びます。さてAND回路を実現するバイアスと重みの組み合わせはなんでしょう？答えは無限にあります。例えば$（b,\omega_{1},\omega_{2}）=(-0.7,0.5,0.5)$とした場合です。計算すればたしかにAND回路と同じ出力になっていることを確かめられるはずです。
　では(1)を次のように変換してみます。
$$y=h(b+\omega_{1}x_1+\omega_{2}x_2) -(2)$$

```math
h(x) = \left\{
\begin{array}{ll}
0 & (x \leq 0) \\
1 & (x  \gt 0)
\end{array}-(3)
\right.
```
　なんてことはないです。式(1)の操作に関数を一つ挟んだような形になっただけです。この新たに出現した関数$h(x)$を活性化関数と呼びます。
　ここまでは難しい話もあまりなくすんなり入ってきました。ここから徐々に小難しくなっていきます。
#ニューラルネットワークについて
　お察しかとは思いますが、ニューラルネットワークもパーセプトロン同様入出力を持ったアルゴリズムです。パーセプトロンと何が違うかというと、先程ぽっと出てきた活性化関数に、ステップ関数（ある値を境に階段のように値が変わる関数）ではなく、シグモイド関数と呼ばれる滑らかな曲線を用いる点です。シグモイド関数とそのグラフを以下に示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1292858/755ec865-3062-b8c6-0efa-bb4fb0a85a9e.png)
$$h(x)=\frac{1}{1+e^{-x}}-(4)$$
　ではなぜニューラルネットワークではステップ関数ではなくシグモイド関数を用いるのでしょうか？後ほど整理します。
#ニューラルネットワークの学習
　さて本題です。我々が普段AIと呼んでいるものはどのようなものでしょう。コンピュータが人間のように考えること。自動運転。はたまた人類を滅ぼすために未来からやっていきたロボット。色々なイメージがあると思います。それらに共通しているものは、「機械が人の手を借りずに判断を下している」ということです。ニューラルネットワークに関して言えば、入力されたデータから、コンピュータが自分で重みとバイアスを決定します。これがニューラルネットワークの学習です。そのプロセスについて解説します。
#損失関数の導入
　機械が勝手に学習するとはいってもなにか指標を与えて挙げないとコンピュータは動くに動けません。そこで登場するのが損失関数です。一般的に2乗和平均誤差や交差エントロピー誤差を用います。難しい言葉が出てきました。ものすごく噛み砕いて表現すると機械が学習の過程で出した答えと正解との誤差のことです。精度が良いとはつまりできるだけ正解に近い答えを導出できることでしょう。ニューラルネットワークでは精度を良くするために、損失関数という誤差をできるだけ0に近づける、という指標をもとに学習を行います。
#勾配法の導入
　さて学習の指標を立てることはできましたが、どのようなアプローチを取れば良いのでしょうか？正解は微分(勾配)です。微分とは、ある点において変数の値を微小に増加させたとき関数の値がどのように変化するか示したものです。ゴールは誤差、つまり損失関数の値ができるだけ小さくなる点を求めることでした。ある重みに関する損失関数の偏微分の値が正であればその重みを減少させ、負であれば増加させる。このようにして全ての重みパラメータを更新していけばいずれ損失関数の最小値に辿り着くはずです。しかしながら例外もあります。それについては次回以降の記事で紹介します。
　ここで重要なのは更新する値が微小なものであるということです。もしも活性化関数にステップ関数を用いた場合、重みの微小な変化による出力の変化は活性化関数によってなかったことにされてしまいます。これがニューラルネットワークにおいて活性化関数にステップ関数ではなく滑らかで微分可能な関数を用いる理由です。
#まとめ
　ここまで駆け足になりましたがニューラルネットワークの学習過程について大まかな流れをまとめられたかと思います。次回以降も今回省いた活性化関数や損失関数、勾配法のPythonによる実装など備忘録として更新していきます。初めての投稿のため、稚拙な部分が多々見受けられると思いますが、筆者の成長も一緒に見守っていただけると幸いです。
【robocopy】robocopyを用いたハードディスクの移行

# はじめに
先日robocopyを使用してフォルダ・ファイルのコピーを行いハードディスクを入れ替えたため、備忘録として残します。


#使用するもの
* PC（Windows10 64bit）
* コマンドプロンプト　または　PowerShell（実行環境）

#サンプル
```
robocopy コピー元 コピー先 /MIR /COPY:DATO /R:0 /W:0 /NP /NDL /TEE /XJD /XJF
```

#解説
|オプション|説明|
|:--|:--|
|/MIR|ディレクトリ ツリーをミラー化します (/E および /PURGE と同等)。|
|/COPY:DATO|ファイルにコピーする情報 (既定値は /COPY:DAT)。<br>copyflags : D=データ、A=属性、T=タイムスタンプ、X=代替データ ストリームをスキップ S= セキュリティ =NTFS ACL、O= 所有者情報、U= 監査情報|
|/R:0|失敗したコピーに対する再試行数: 既定値は 1,000,000。|
|/W:0|再試行と再試行の間の待機時間: 既定値は、30 秒。|
|/NP|進行状況なし - コピーの完了率を表示しません。|
|/NDL|ディレクトリなし - ディレクトリ名をログに記録しません。|
|/TEE|コンソール ウィンドウとログ ファイルに出力します。|
|/XJD|ディレクトリのシンボリック リンクと接合ポイントを除外します。|
|/XJF|ファイルのシンボリック リンクを除外します。|

#その他
必要に応じてコピー結果をログへ出力するすることも可能です。
他のオプションを見るには以下のコマンドを実行すれば良いです。

```
 robocopy /?
```

#まとめ
robocopyについては色んな人が記事を書かれていますので、今さら感はありますが誰かの参考になれば幸いです。
[Ruby] メモリ使用量を計測する

# 方法

[ObjectSpace.memsize_of_all](https://docs.ruby-lang.org/ja/latest/method/ObjectSpace/m/memsize_of_all.html) を使う。

```rb
require 'objspace'

def measure_memsize_before_and_after
  # メモリ使用量をなるべく正確に計測するために、事前に GC を実行しておく。
  GC.start

  before = ObjectSpace.memsize_of_all
  yield
  after = ObjectSpace.memsize_of_all

  [before, after]
end
```

# 使用例

```rb
def fibonacci_numbers
  Enumerator.new do |y|
    n, m = 0, 1
    loop do
      y << n
      n, m = m, n + m
    end
  end
end

require 'active_support/all'

before_memsize, after_memsize = measure_memsize_before_and_after { fibonacci_numbers.first(100) }

puts "[Before] memsize_of_all: #{(before_memsize / 1_024).to_s(:delimited)} KB"
# [Before] memsize_of_all: 4,908 KB
puts "[After] memsize_of_all: #{(after_memsize / 1_024).to_s(:delimited)} KB"
# [After] memsize_of_all: 4,915 KB

before_memsize, after_memsize = measure_memsize_before_and_after { fibonacci_numbers.first(100_000) }

puts "[Before] memsize_of_all: #{(before_memsize / 1_024).to_s(:delimited)} KB"
# [Before] memsize_of_all: 5,084 KB
puts "[After] memsize_of_all: #{(after_memsize / 1_024).to_s(:delimited)} KB"
# [After] memsize_of_all: 433,674 KB
```
そんなテーブル設計あるんだ！と勉強になった話

チームの皆さんのおかげで毎日1レベルずつ上がる感じがすごく楽しい今日この頃です。

勉強になった話を忘れずに残しておきます。
テーブル設計についての話です。

## 例

例えば、会社の中でAチームとBチームというのがあるとします。
そのAチームとBチームの中には社員が属しています。
その場合、私が思いつくテーブル設計だと...

まずチームテーブルがあって

| id | チーム  |
|:--:|:------:|
| 1  | A      |
| 2  | B      |

社員テーブルがあって

| id | 社員  | チーム_id |
|:--:|:----:|:--------:|
| 1  | 佐藤  | 1       |
| 2  | 武田  | 2       |
| 3  | 田中  | 1       |

社員テーブルでチームテーブルのidを参照することでどちらのチームか判断するみたいな感じなのかなと。


でも、これを下記のようにすることができると学びました。

| id | 社員  | is_A  |
|:--:|:----:|:-----:|
| 1  | 佐藤  | true  |
| 2  | 武田  | false |
| 3  | 田中  | true  |

is_Aっていうカラムを作り、trueかfalseで判断するという。
これはチーム数が増えたらできないですが、こんな方法もあるんだなととても勉強になりました！

こういうのが楽しいです！
はじめました

この度Qiitaをはじめました．

この3月でどこかの県のどこかの大学を卒業し，晴れて同じ大学の大学院生になれました．
そこで，何か新しいことをはじめようと思い，Qiitaをはじめた次第です．

制御工学初心者なので，今後はMATLABの小技や備忘録，LaTeXのメモに加え新しく学んだことや思ったことなど，役に立つかどうか微妙な情報を雑多に掲載していくつもりです．

どうか温かい目で見てください．
様々なAutoMLライブラリの利用例〜Titanicで予測をするまで〜

## はじめに

現在、様々なAutoMLライブラリが存在しています。おそらく、それぞれに使いやすさや実行速度、どこまでを自動化するかなどと言った特徴があるかと思われます。そんなAutoMLライブラリを実際に体験してみたいと思い、利用例を書いてみました。具体的にはKaggleでチュートリアルとして用意されているTitanic（タイタニックの生存者予測）で試してみました。できるだけライブラリに任せて、どれだけ簡単にTitanicで予測ができるかということを心得としておきます。

※今後、新たなAutoMLライブラリを利用した場合や、評価したい項目があった場合、更新します。

## 様々なAutoMLライブラリの利用例

以下、AutoML自体のリンクと私が記述した利用例のリンクという流れで記載します。

### AutoGluon

https://auto.gluon.ai/stable/index.html

https://www.kaggle.com/daikikatsuragawa/a-beginner-s-guide-to-autogluon

### PyCaret

https://pycaret.org/

https://www.kaggle.com/daikikatsuragawa/a-beginner-s-guide-to-pycaret

### H2O AutoML

https://www.h2o.ai/products/h2o-automl/

https://www.kaggle.com/daikikatsuragawa/a-beginner-s-guide-to-h2o-automl

### MLJAR

https://mljar.com/

https://www.kaggle.com/daikikatsuragawa/a-beginner-s-guide-to-mljar

### EvalML

https://evalml.alteryx.com/en/stable/

https://www.kaggle.com/daikikatsuragawa/a-beginner-s-guide-to-evalml

## おわりに

様々なAutoMLライブラリの利用例を記載しました。追加で利用して欲しいライブラリや、評価して欲しい観点、それぞれのより良い利用方法、使い方がおかしい！と言った意見などありましたら気兼ねなくコメントください🙏
マジで危険が危ないnode.jsのconfig

# 概要
普段、Node.jsでExpressを使用したAPIを開発をしているのだが、config機能の取り扱いでこれはやべえって思った内容があったので備忘ついでに残すことにした。

# 事象
ある操作をすると、本来は変更が加わってはいけないはずのconfigの中身が変更されてしまう。
変更されたconfigの中身はExpressを再起動しない限り元には戻らない。

# 発現方法
呼び出したconfigの中身を入れ替えてやればいい。

```javascript
import config from 'config'
const pollutionConfig = () => {
    config.aaa = "pollution"
}

export default pollutionConfig;
```

```config:config/sample.js
module.exports = {
  "aaa":[
    111,
    222,
    333,
    {
      "sample1": 12345,
      "sample2": 67890
    }
  ],
  "bbb":[
    111,
    222,
    333,
    {
      "sample1": 12345,
      "sample2": 67890
    }
  ]
}
```
configの中身は値渡しで渡ってくるわけではなく内部的に値をクローンしてくれるわけでもないようなので、この結果は当然のことらしい。
それでも基本的なこととして、configの内容が書き変わるとかないでしょ。

# ならばどうするか
ディープコピーしようぜ。

```javascript
import config from 'config'
const safetyConfig = () => {
    const c = JSON.perse(JSON.stringify(config))
    c.aaa = "OK"
}

export default safetyConfig;
```
これなら大元のグローバル領域が変更されることはない。
ディープコピーの方法はいくつかあるが、JSONデータは配列と連想配列が入り乱れることも多いため、一旦stringifyした上でperseしなおすのが一番手っ取り早いと思う。
場合によっては、これは共通処理化してしまってもいいかもしれない。
パフォーマンスに関しては知らん。