OmniAICreator/Qiita-1.07M huggingface dataset:
jest.setup.jsを作成してルートディレクトリに置いたら赤線が出てしまうのを修正する方法

## やりたかったこと
jestでのテストにて、テストケースのたびにわりと負荷のかかることをしているので、
デフォルトの設定だとタイムアウトしてしまうので、その設定を追加したかった。

```javascript:jest.setup.js
jest.setTimeout(30000);
})

```

## 解決方法
jestを実行時の環境変数の設定や今回のようなタイムアウトの設定などは、
「.jest」って名前でディレクトリを作ってその中に入れる必要がある。
もし入れないで実行しようとしたら、「setupFiles option was not found」となる。
【Rails】アプリケーションを削除してみた

#はじめに
テストで作成したミニアプリを削除てみました。備忘録もかねて記事に残します。

####目次

1.手順
2.削除


#1. 手順
・データベースの削除
・フォルダ削除

アプリを削除するには、ただフォルダを削除すれば良いと思っていました。
しかし、それではデータベースがの残ったままなので、不具合が起きる可能性があります。

下記に参考にさせていただいた記事があります。アプリ以外もいろんなフォルダの削除方法を紹介されてるので、興味がある方は参考にしてみてください。


#2. 削除
それでは削除して行きます〜

・データベースの削除

```
$ rails db:drop
```
開発とテスト二つのデータベースが削除されれば成功です。

・フォルダ削除

```
$ cd ..
$ rm [アプリ名]
```
コマンドで削除可能ですが、ファインダーからゴミ箱に入れても削除できます。

以上です！


##最後に
私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。
それでは、また次回お会いしましょう〜

##参考
https://qiita.com/ruemura3/items/63eb805aa2b4e250df81
【UWP】Visual Studioでアプリ認定キットを使った事前チェックを行う

今回、UWPアプリの案件を担当しました。
その際にWindowsアプリ認定キットというものを使用したので、テストの実施方法をまとめておきたいと思います。

### 開発環境
|ツール  | バージョン | 
|:-----------|:------------|
| Visual Stdio 2019| -|
| Windows 10 SDK| 10.0.19041.0|


## ■結論
MicrosoftストアでログインできるアカウントでVisualStudioにログインすること！

## ■Windowsアプリ認定キットって何？
アプリをMicrosoft Storeへ審査に出す前の事前チェックに使用するツールです。
**アプリがMicrosoft Storeへアップロードするための基準を満たしているか**ということのチェックを行います。

Windows用のアプリケーションを作り、他の人に配布をしたい場合は下記2つの方法があります。

```
1.Microsoft Storeにアップロードする
2.サイドロード（Microsoft Storeを経由しないアプリの導入）を行う
```

今回は、Microsoft Storeへアップロードするので「Windowsアプリ認定キット」を使用します。

## ■Visual StudioでWindowsアプリ認定キットを使う

Windowsアプリ認定キットはインストールして使う方法もありますが、Visual StudioでWindowsアプリ認定キットを使うこともできます。

>Visual Studioを使用している場合は、アプリパッケージを作成するときに Windows アプリ認定キットを実行できます。 方法については、「UWP アプリのパッケージ化」をご覧ください。
引用：https://docs.microsoft.com/ja-jp/windows/uwp/debug-test-perf/windows-app-certification-kit


[UWP アプリパッケージ化の手順](https://docs.microsoft.com/ja-jp/windows/msix/package/packaging-uwp-apps#generate-an-app-package)は公式サイトに書かれているため省略します。下記は僕が行ったパッケージ化の手順です。

```
1.Visual Studioのソリューションエクスプローラーからプロジェクトを右クリックでメニュー表示
2.公開>アプリパッケージの作成をクリック
3.「新しいアプリ名でMicrosoft Storeに」をチェック
4.ソリューション構成で「Release」を選択
```

詰まったのが、アプリ認定キットの使用画面が表示されなかったことです。
公式サイトには「Visual Studioを使用している場合は、アプリパッケージを作成するときにWindowsアプリ認定キットを実行できます。」とあります。確かに、[こちら](https://qiita.com/flat-8-kiki/items/33dbc1358ad974f94d99)の記事ではパッケージの作成が完了した時点で「Windowsアプリ認定キットを起動する」という選択肢が表示されています。しかし、僕の画面では表示されませんでした。

<img width="521" alt="アプリ認定キットが起動できない.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/39e02b9b-ea23-a31c-da31-765d159804a0.png">

このとき、僕の場合はVisual StudioでログインしているアカウントをMicrosoftストアへログインできるアカウントへ切り替えたところ、アプリ認定キットを実行するためのボタンが表示されるようになりました。

<img width="528" alt="アプリ認定キットの実行が表示された.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/bcab55be-ef83-7838-f75e-710d6f625a5c.png">

表示されました！

<img width="486" alt="認定キット結果.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250884/9d8a409e-2e4c-9261-3311-1e89ce89ec5f.png">
※画像は少し古いものです。

## ■まとめ：Visual Studioでの参考記事が少なった。
Visual Studioを使ってアプリ認定キットを実行している記事が余りにも少なく、実行までに時間がかかってしまいましたがアプリ認定キットによるテストまで実施できました。

それでは！

####参考：
>■Windows アプリ認定キットの使い方
http://www.balard.sakura.ne.jp/vb/storeapp/kit.php 
■Titanium製アプリをWindowsアプリ認定キットでテストする（UWP）
https://qiita.com/flat-8-kiki/items/33dbc1358ad974f94d99
■Visual Studio で UWP アプリをパッケージ化する - Microsoft Docs
https://docs.microsoft.com/ja-jp/windows/msix/package/packaging-uwp-apps#generate-an-app-package
iPadを有線接続した時のMACアドレスを間違えた・・・

ネットワークの知識にあまり自信がなかった為、納品の時にやらかしてしまったので備忘録として残します

ネットワークは難しい・・・

## 結論

MAC アドレスは NIC(network interface card) に対してふられていて、有線アダプタにも NIC が入っている
L2 スイッチで MAC アドレスによって転送先を割り振る場合は、本体ではなくアダプタの MAC アドレスを参照しないといけない

## ざっくり参考

### そもそも MAC アドレスって何？

> MAC アドレス（マック・アドレス、英語: Media Access Control address）とは、Media Access Control において、**ネットワークインタフェースを識別するため**に使用>されるアドレスである。 wiki より引用

インターネット通信の際にデータのヘッダー部分（メタデータが入ってる部分）に仕込んでおくことで

この通信はどこから来て、どこに返さないといけないか　というのがわかるらしい

> L2 スイッチなどの通信機器では、通信機器のポートと、そのポートに接続される相手の通信機器の MAC アドレスのマッピング情報を「MAC アドレステーブル」に保存している。 wiki より引用

MAC アドレステーブルに事前にマッピングすることで、その通信データをどこに流せばいいかを L2 スイッチ等に理解させることができるらしい

### NIC って？

> コンピュータネットワーク内でコンピュータ間の通信を行うために使用されるハードウェアの 1 つである。

ネットワークに繋がる機器には絶対入っている

自身とその他ネットワークを繋ぐための改札口みたいな物？

## 何があったか

ここから先はただの日記です
ブラウザバックする方は LGTM してからお願いします ❤️

### 事の発端

自社製品で iPad を使っている。
ある企業様へ納品の際に有線接続のご要望があった為、サードパーティ製のアダプタを購入。
セキュリティの為、MAC アドレスの共有を依頼されたので iPad の MAC アドレスの調べ方を検索。

ここで大きな間違いを犯す・・・

> google 検索「iPad 有線 MAC アドレス」

いくつかのサイトを見ると、設定の「情報 > 一般 > Wi-Fi アドレス」が iPad の MAC アドレスだと書いてあった

> 有線なのに Wi-Fi アドレス？？おかしいな・・・

とは思いつつ、ネットワークに疎かった為有線でも Wi-Fi でも同じなのかなと思い
自社で有線接続をし、Wi-Fi アドレスを調べて連絡した。

### 波乱の幕開け

納品の日に iPad を接続し、無事ネットワークが通る事を確認して一安心
これまでの顧客は MAC アドレスと IP アドレスを紐付けたいという要望がなく、自分でもやった事がなかったので結構緊張した

しかししばらくして再び接続し直すと・・・

> <font color="red">iPad がインターネットに接続されていない為、url のページを Safari で開く事ができません。</font>

さっきまで行けてたのになんで？！？！

他の端末（有線アダプターを使用しない物）は有線でも動作するのに、iPad だけ動かない
iPad のネットワーク設定は正しいし、持参した Wifi には接続したので初期不良じゃない
ネットワーク設定をし直したり、再起動しても直らない

マスクしながら動き回ってしかもネットワーク繋がらなくて焦って暑かった（ぴえん）

### 救世主の登場

スイッチ側の設定の問題かもしれないので、顧客のネットワーク管理者に問い合わせてもらった

すると衝撃の一言が

> 救世主「MAC アドレスが全然違うみたいですよ」

そんなバカな・・・

> 救世主「アダプターを介して有線接続してるならそのアダプターの NIC が持つ MAC アドレスじゃないとダメですよ」

そうなの・・・

接続してるのはアダプターだけどネットワークを使ってるのは iPad だから
iPad の MAC アドレスじゃないとダメだと思ってた・・・

でもよくよく考えてみると、アダプターの NIC が最初に認識されるんだから当然か
iPad の「Wi-Fi アドレス」の違和感は当たってたのか

> 救世主「スイッチ側で確認した MAC アドレスで振り直しますね」

こうしてぼくもといばかは救われたのだった

## 教訓

エンジニアたるものネットワークのお勉強はしっかりしましょう
セキュリティに直接関わるところだし、客先や技術者通しの話で恥をかいちゃいます
そもそも iPad を有線で接続するのはやめましょう（暴論）
カーネルとは

## 勉強前イメージ

OSの中心部分となるもの
HWへの司令する場所で、カーネルだけでは動かない

## 調査

### カーネル とは

オペレーティングシステム(OS)の中核を構成するソフトウェア
プログラムの起動や終了、メモリの割り振りなどソフトウェアとハードウェアの間で仲介する役割
アプリがリソースを使って動作できるようにします
これはサーバだけではなく、PCや携帯電話にも当てはまります

![プレゼンテーション1 - PowerPoint 2020-10-26 13.40.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/cfde0c7d-a3af-cd2c-0792-74d2cc50f5b6.png)



### 主要なカーネルの種類

- モノリシックカーネル

OSのほとんどの機能をカーネルに盛り込み、一体化させたもの
入出力機能・ネットワーク機能などすべてカーネルが引き受ける
OSが一体化しているため、実行速度が速い
Linuxはモノリシックカーネルと言われているが、実際はハイブリッドという声もある

- マイクロカーネル

小さな(マイクロ)カーネルの意
モノリシックカーネルとは違い、OSの中核として必要最低限の機能割り込み処理やプロセス間通信処理)だけを持っており
他の処理はモジュールに任せる
メリットはカーネルの肥大化を防ぎ開発効率を上げたり、追加機能を用意にしたりする

他にも以下のカーネルなどがある。
- ハイブリッドカーネル
- ナノカーネル
- エクソカーネル


### カーネルの動作

※今回は、一旦Linuxカーネルを中心に調べていきます

- メモリ管理

メモリが何にどれだけ割り振られたかを追跡します

- プロセス管理

どのプロセスがどれだけCPUを使えるかを確認・決定します

- デバイスドライバー

ハードウェアとプロセスを仲介します

- システムコールとセキュリティ

プロセスからのサービス要求を受け取ります

## 勉強後イメージ

カーネルにも種類があったとは知らなかった
必要最小限だけ(マイクロカーネル)だと思ってたら、実はそうでもない(モノリシックカーネル)のかな？
今回は種類とどういうものか、しか調べられなかった...
今度はもう少し突っ込んだ内容をしたい


## 参考

- [カーネル（Kernel）って何？](https://exture-ri.com/2019/05/22/%E3%82%AB%E3%83%BC%E3%83%8D%E3%83%AB%EF%BC%88kernel%EF%BC%89%E3%81%A3%E3%81%A6%E4%BD%95%EF%BC%9F/)
- [Linux カーネルとは](https://www.redhat.com/ja/topics/linux/what-is-the-linux-kernel)
- [Linux の歴史](https://www.redhat.com/ja/topics/linux)
- [モノリシックカーネルとマイクロカーネル](https://linuc.org/study/knowledge/460/)
- [カーネルとは](https://www.slideshare.net/mao999/ss-78358117)
本番DB作業をする個人はどのようなオペミス対策をするべきか

誤ってテーブル1枚のレコードをすべて delete してしまいました。
`343 rows affected` という表示は一生忘れないでしょうね...

理想は「スクリプトを流すだけ」など自動化されていることだとは思うのですが、手動運用が残っている部分が存在するというのもまた事実だと思います。
そのような環境で、本番環境を壊さないようにするために個人ができることについて考えてみました。

## 手順書を作る（コマンドを手打ちしない、ヒストリを使わない）

本番環境に流すコマンドは、事前に書いておいたものをコピペするだけにしましょう。

以下のような行為はオペミスのもとなのでやってはいけません：

- コマンドをその場で手打ちする
- ヒストリからほしいコマンドを探して実行する

そのため、以下のような手順書を事前に準備しておくべきです。

```
begin;

# 事前確認
#   期待値: 1
select count(*) from user where user_id = 1;

# 削除
#   期待値: 1 row affected.
delete from users where user_id = 1;

# 事後確認
#   期待値: 0
select count(*) from user where user_id = 1;


rollback;
# commit;
```

## 手順書にないことはしない

手順書にないことはやってはいけません。
どうしてもやる必要があるなら手順書を書くところからもう一度やり直しです。

「手順書作っておいて手順書にないことするわけないじゃん」と思いがちですが、
たとえば1件deleteする予定のはずが空振って0件だった場合、 直打ちで select をして確認をしていたりしないでしょうか?

「それくらい大丈夫じゃない？」という気がしますが、以下のようなオペミスが考えられます：

- select したつもりが delete で実行してしまってレコードを消してしまう
- select の where 句が抜けていて、全件検索が走ってしまう

このようなオペミスを防ぐためにも、本番環境では些細と思えるアドリブも徹底して控えることが望ましいです。

## 検証環境でリハーサルをする

検証環境で手順書に従ってリハーサルをしましょう。
手順書のテストにあたります。

検証環境でやったこと以外は、本番環境でアドリブでやってはいけません。

## ダブルチェックをする
本番環境の実行は必ず2人以上でダブルチェックをして実行しましょう。
1人がコマンドの入力をして、実行する前にもうひとりがコマンドに誤りがないか確認してから実行します。
HaskellでExcelファイル(xlsx)を読み込む

xlsxライブラリを使ってHaskellでExcelファイル(xlsx)を読み込む方法を記載します。  
  
動作確認環境
　OS: Windows10 pro
　stack: 2.5.1
　Excel: Excel 2016  
  
xlsxライブラリ
[https://hackage.haskell.org/package/xlsx](https://hackage.haskell.org/package/xlsx)  

下記サンプルプログラムを使用します。
[https://hackage.haskell.org/package/xlsx-0.8.2/docs/Codec-Xlsx.html](https://hackage.haskell.org/package/xlsx-0.8.2/docs/Codec-Xlsx.html)  

stackで新しいプロジェクトを作成します。

```
stack new my-project
cd my-project
```

サンプルプログラムで使用するモジュールをdependenciesに追加します。

```
dependencies:
- base >= 4.7 && < 5
- xlsx  #追加
- bytestring  #追加
- lens  #追加
```

サンプルプログラムをMain.hsファイルにコピーします。

```
{-# LANGUAGE OverloadedStrings #-}
module Read where
import Codec.Xlsx
import qualified Data.ByteString.Lazy as L
import Control.Lens

main :: IO ()
main = do
  bs <- L.readFile "report.xlsx"
  let value = toXlsx bs ^? ixSheet "List1" .
              ixCell (3,2) . cellValue . _Just
  putStrLn $ "Cell B3 contains " ++ show value
```

module名をReadからMainに書き換えます。

```
module Main where
```

Excelファイルを作成します。
B3セルに表示したい文字を入れます。
sheet名を「List1」にします。
ファイル名を「report.xlsx」にしてプロジェクトフォルダ配下に保存します。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87133/8a3ed230-3fbf-8e85-e4c3-fd1d1ae87850.png)
コンパイルします。

```
stack build
```

実行します。

```
stack exec my-project-exe.exe
```

B3セルに記入した文字が表示されます。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87133/7bcaed11-a064-766b-f8ac-4f64c753ffb7.png)

本記事の全コード
[https://github.com/ringo-apo/haskell_xlsx](https://github.com/ringo-apo/haskell_xlsx)  

以上
querySelectorの使い方

#querySelector
JavaScriptには「getElementById()」とか「getElemetnsByClassName()」などHTML要素を取得できるメソッドはありますが、

「querySelector()」を使うとid属性値・class属性値などを意識せずにjQuery感覚でHTML要素をセレクタ指定することができます。

```html:index.html
<p>全ての色が混ざり合うと白くなるものは何か？</p>
<button onclick="result1()">答え</button>
<p id="ans1">ここに答えを表示</p>
```

```js:index.js
let list1 = document.querySelector('#ans1');
function result1() {
  list1.innerHTML = '<h4>加法混色</h4>'+'<img src="img/rgb.png">';
}
```

![スクリーンショット 2020-10-27 8.18.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633943/bbd0c9ab-cd64-a5eb-8642-e126b4e5bc67.png)
Control files to build in Golang project

# Background

We are developing a project that needs to run on Windows and Linux. The project is written in Golang. There are a lot of codes that can be shared between these OS, so we decided to make it in the same project. By this way we can speed up the development process very much.

In the project, there are some code files that run on Windows only, some run on Linux only, and some run on both Windows and Linux. And we want to separating them on build. It means:

-  The binary for Linux will contain common code + code for Linux
-  The binary for Windows will contain common code + code for Windows

# Benefit

By separating files on build, I can see that we have some benefits:

- We don't have to check runtime.GOOS to determine which code will run and which will not. We can write less code to do the same thing.
- Changes for Linux environment will not affect the behaviors on Windows and vice versa. So it help us reduce time for testing.
- The test code will be built and run on the specified OS only, so we get a more accurate code coverage percentage.

# How can we do it

Firstly we need to divide the code for Linux and for Windows into different files. After that we can use one of the following ways.

## Name the file

We can tell `go` what **OS** and what **architecture** we want to build a file by naming it. The followings are examples about file names and build behaviors:

- `hello_windows.go`, `hello_windows_test.go`: will only be built and tested on Windows
- `hello_linux.go`, `hello_linux_test.go`: will only be built and tested on Linux
- `hello_linux_adm64.go`, `hello_linux_adm64_test.go`: will only be built and tested on Linux 64 bit

The file name patterns are:

- `*_GOOS.go`, `*_GOOS_test.go`
- `*_GOOS_GOARCH.go`, `*_GOOS_GOARCH_test.go`

**We can do this way if the build condition is only about OS and architecture.**


## Use `// +build` command

This way gives us more control on the environment. We can specify multiple OS and architectures, compiler, go version, -tags

```golang
// file name: hello.go
// +build linux windows
// +build amd64

package hello
```

The comment `// +build` above will tell `go` to build the file on Windows 64bit or Linux 64 bit. So when we build the project in `freebsd`, the package `hello` will be excluded from the files to be built.

If we have a test for this package, it will be something like this:

```golang
// file name: hello_test.go
// +build linux windows
// +build amd64

package hello
```

The comment `// +build` above will tell `go` to exclude this file from test on environments that are not Linux 64bit or Windows 64bit for us. We don't have to check the OS then skip the test.

For complex usage of `// +build`, please check golang documentation here: https://golang.org/cmd/go/#hdr-Build_constraints

# Reference

- https://golang.org/cmd/go/#hdr-Build_constraints
- [Valid combinations of GOOS and GOARCH](https://golang.org/doc/install/source#environment)
[day: 9]Angularのリファクタリング

# Angular コンポーネントの分割

RxJSの学習を行う中で[Angular after tutorial](https://zenn.dev/lacolaco/books/angular-after-tutorial)を行いました。
第一章の中で学んだコンポーネントの分割についてです。

## 役割を分担する

userの情報を返すapiにアクセスし、取得したuserの配列をviewに表示するシンプルなアプリケーションを作成し、それをリファクタリングする中で役割の分割という考えがあります。

このアプリケーションではapp.componentが以下の役割を持っています。

- アプリケーションブートストラップのエントリポイントになる
- apiから値を取得する
- 取得したuserの配列を表示する
- userの詳細情報を持つ

これでは一つのコンポーネントが持つ役割が多く、何らかの変更でapp.componentが正常に動作しない場合に全て影響が出てしまいます。

そのため、これらを一つずつ別のコンポーネントに分割することで役割を分担していきます。

このように機能ごとにコンポーネント毎に役割を分担して実装するのが良いと学びました。
VisualStudio（コンパイル結果）とRiderのWinformsのレイアウト（大きさや間隔など）が異なる場合の修正方法

FormのDesignerのAutoScaleDimensionsの値（7F,14F）をいい感じの値に変更する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114606/05aa20cf-7368-3bf5-098b-5d6cc93a7e5c.png)
絵文字APIの使い方メモ

# 絵文字のAPIの使い方
絵文字用のAPIの使い方がよく分からなかったので、検索してみたら、下記の記事が存在。
http://rdrgn.hatenablog.com/entry/2017/01/20/000000

まずは、emojione.min.jsとemojione.min.cssを読み込む必要がある。

# 実際に使ってみた
実際に動かした結果は下記の通り。emojione.min.jsはimgタグを返している。
https://qiita.com/heihei15408697/items/e830cae0a967346f6650

返却されたimgタグをうまく出力したかったけど、そこの扱いがうまくいかず、imgタグの文字列をそのまま出力して終わっている。

出力する方法をどこかで調べて、ちゃんと出るようにしたい。
フロントエンド(TypeScript, Three.js)のみで動く、Molecular Visualizerの開発（その２）

## 概要
詳しくは[その１](https://qiita.com/TakashiKusachi/items/0c44dd2efcd631dab3e3)を参照ください

## 現状
![heat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364025/41a85420-fae4-f563-2cf6-97ee144e2ada.png)
色が変わったくらいでほとんど見た目は前回から変わってない。


## (前回との）更新内容
画面構成を部分的にVue.js化
headerにCSSでhover時の色の変化を加えた。
他細かな修正とまだ記事にしてない機能の追加


## 分子構造データクラスとパーサー
現状対象としている構造データは、原子が3D空間上に点在していて、任意の原子間に結合が存在している。
つまりデータ構造としては、原子のリストと、結合のリストと、それのコンテナである。
これを愚直に抽象化したインターフェースを次のように設計した。AtomにはelementType以外にFFtypeなどが必要ではないかという話は、いったんおきましょう。

Atom　インターフェース(./src/systems/system.ts)

```
enum ElemType{
    ANY,H,He,Li,Be,B,C,N,O,F,Ne,
}

export type Position = Array<number>;
export type Name = string;

export interface IAtom{
    position: Position;
    name: Name;
    element: ElemType;
    index: number;
}
```

Bond インターフェース(./src/systems/system.ts)

```
export type BOND_TYPE= number;

export interface IBond<AtomType extends IAtom = IAtom>{
    atoma: AtomType;
    atomb: AtomType;

    vector: number[];
    distance: number;

    position: Position; 
}
```

System　インターフェース(./src/systems/system.ts)

```
export interface ISystem<AtomType extends IAtom,BondType extends IBond<AtomType>>{
    /**getterでの実装を禁ズ */
    systemName: string;

    natoms: number;
    nbond: number;
    getNames(): string[];
    getPositions(): Position[];
    getElements(): ElemType[];
    getAtom(index:number): AtomType;
    atomIndexOf(name:string): number;
    getAtoms():Generator<AtomType,string,unknown>;
    getBond():Generator<BondType,void,unknown>;
}
```

実現クラスは設計では一つしか作らない予定であるため、インターフェースクラスを用意する意味はほとんどないが、ひとまず経由することとした。

このSystemクラスは、描画するクラスに引き渡され描画のためのオブジェクトの作成や、IAtom.nameを使ってクリックイベントの対象物の識別に使われる（予定）。
「シート名変更」の使い方 - DBUpdateTool

Excelアドイン
DBUpdateTool(https://www.lasis.com/products/dbupdatetool)

シート名を操作するメニューです。

1. 以下の状態から、操作を始めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/6c5fe370-01d2-403a-2de0-0124b7bc1a2e.png)

2. 「A1」セルにマウスのカーソルを当て、コメントを表示します。コメントは、ヘッダー作成時に自動的に作成されます。テーブルの別名、ユニークキー、外部キーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/6dcc5907-cf4b-e630-cfe2-d0ca96081f20.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/18982aa7-8bf4-71c2-2608-fbc41b32df2b.png)

3. アドインタブの「DBUpdateTool」のメニューより、「シート名変更」 > 「テーブル名-テーブル別名」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/b83af61d-0b07-c95a-a064-74bb2f0ba1ed.png)

4. 処理を実行しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/d6e54d30-53b6-2a15-a655-1f6380f803ea.png)

5. ご覧の通り、「Account」のシート名が「テーブル名-テーブル別名」の形式に変更されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/f51a8b7f-fba0-6925-c810-6c3a84f750f8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/805113/a55831c6-5925-ae86-2482-32f3a99ee33f.png)
Boincで新型コロナ対策に協力して暗号通貨Byteballをもらう

前回の記事の続きです。
更新が長引きました。
#暗号資産Byteballを導入
WorldCommunityGrid(以下、WCG）で獲得したポイントに応じて、暗号通貨であるByteball(Obyte)を受け取ることができます。
Byteballホームページ:https://obyte.org
どうやら、PoWを使用しないDAGという理論を元にした暗号通貨だそうで・・・。うん、わからん・・・
少し前まで、日本語版のサイトもあったのですが、サイトが更新されたことで日本語版がなくなったようです。日本人としては少しさみしいですね。
サイトからAppImageファイルをダウンロードしたあと、管理しやすいようにAppImageファイルを一箇所に集めたディレクトリ（仮にAppsとする）に叩き込みます。
`mv ~/Download/obyte-x86_64.AppImage ~/Apps`
そして、実行権限を与えます。
`chmod u+x obyte-x86_64.AppImage`

#WCGの設定
WCGのサイトにアクセスして、自身のアカウントにログインします。
右上のSettingsを開き、「Data Sharing」を選択します。ラジオボタンが「Display my data」になっているかどうか確認します。
![2020-10-08 18.23.39 www.worldcommunitygrid.org 81b4bde73fd5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535888/5b69b051-52e5-6557-b226-e32da3c62d21.jpeg)
WCGのサイト上で設定を保存したあと、byteballを起動させてbotストアからもらえるように設定すればOK。

BOINCに協力すればもらえる暗号通貨には、Byteballの他にも
 - Gridcoin
 - Neumannium
があります。
Neumanniumは、日本で開発された暗号通貨だそうです。（https://icesword.co.jp）
Js/CSSのキャッシュをコントロール

# js/cssをブラウザでキャッシュさせない方法
## Cahche Bustingって言うらしい。。。
その方法は、以下の通り

対策前のコード↓

``` sample.html
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg" alt="Sample">
```



対策後コード↓

``` sample.html
<!-- CSS -->
<link href="style.css?ver=1.0.0" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js?ver=1.0.0" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg?ver=1.0.0" alt="Sample">
```

「?」の後に任意の文字列を付与すると、ブラウザは対策前のURLとは違うものだと認識する。
(これをクエリ文字列という)

クエリ文字列はほかにも
・更新日時 (例：src=”style.css?date=20201027053000″)
・バージョン (例：src=”style.css?ver=1.2.3″)
・ランダム数


jsやcss側での加工はと言うと、**必要ない**。

これでjs/cssを更新しても、ブラウザでキャッシュされなくなる。
しかし、htmlがキャッシュされたら元も子もないので、htmlには以下のmetaを記述する。

``` sample.html
<head>
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
```

３つともキャッシュしちゃダメよ！ということらしい。

以上。
モダンな技術のReactを勉強しよう


最近現役エンジニアの方とお話しさせていただく機会があったのですが、やっぱり現場はReact一択！！とういう声が大きかったので、どんな技術なのか、どうやって導入するのか調べて実際に簡単なアプリを作成していこうと思うので、これからReactをアウトプットして行こうと思います。


##Reactとは
まずは簡単にReactってどういうものなのかざっと調べた情報を記述します

* ReactはFacebookが作った
* JSのライプラリ
* 記述の仕方はJSX(ほぼHTML)
* {}内はJSの記述できる
* SPA(Single Page Application)を作ることに最適
    * ちなみにSPAはページ推移せず、一つのWebページでコンテンツを切り替えられるやつのこと　いちいちリロードが必要ないやつ
* TypeScriptと相性が良い


ほんとに簡単に調べた結果を羅列しただけですが、こんな感じ

モダンな技術を学ぶのはわくわくしますね！　オラわくわくすっ(ry
まあよく意味わからないところとかあるんですけど、それはアプリ作りながらやっていけばわかる様になっていくのかなと思います
じゃけん、環境構築やっていきましょうか！（埼玉県出身者より）


##環境構築
`create-react-app`という開発環境を簡単に構築できるツールを使っていくのですが、どうやらそれを使うためには
`node`
`npm`
が必要らしいです

またそれをインストールするためには`Homebrew`と`nodebrew`をインストールしなければいけない様です、、ややこしい、、

なんでまずはこのコマンド

```react:ターミナル
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" 
```

その後、Macのパスワードと
`Press RETURN to continue or any other key to abort`
と出てくるのでreturn押してあげてください
これでHomebrewのインストール完了

つぎはこのHomebrewを使ってnodebrewをインストールします

```react:ターミナル
brew install nodebrew
```
これでnodebrewのインストール完了
そんで次にnodebrewを使ってnodeをインストールします

```react:ターミナル
nodebrew install stable
```
ディレクトリがないとエラー出る場合はこれを先に

```react:ターミナル
mkdir -p ~/.nodebrew/src
```

インストールが完了したら

```react:ターミナル
nodebrew ls
```
でバージョンを確認しましょう
多分今の安定バージョンというのは`v14.4.0`になっていて、それをインストールした状態ですが
`current: none`
とターミナルに記載があると思います。
これを`v14.4.0`にするために

```react:ターミナル
nodebrew use v14.4.0
```

これで再度バージョンを確認すると
`current: v14.4.0`
になっているはず

そして次はこれ(最新macOSなら)

```react:ターミナル
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
```

これでやっとnodeがインストールできました！！
nodeがインストールされたらnpmもインストールされていますので、これで`create-react-app`を使う環境が整ったとういう感じですね！

そしてこれが最後のアプリケーションを作成するときにコマンド

```react:ターミナル
npx create-react-app 任意のアプリケーション名
```
これでアプリケーションが作成されました！！
Finderから確認できればアプリケーションは作成されています
長かった？ですね

あっ、アプリケーションの作成の際はちゃんと自分が作りたいディレクトリに移動して作成してくださいね！

##まとめ
とりあえず`create-react-app`の環境構築までをずらずら記述していったのですが、ネットワークの基礎的な部分が圧倒的に不足していますね。。。
なんでかわからないけどできたという状態から抜け出すためにはどのくらい勉強すればいいのかトホホ、、、



##参考
https://www.youtube.com/watch?v=P5lDbRxp9sI&t=140s
BIG-IP キャプチャ


##BIG-IPでキャプチャ

```
[root@ltm-i2600-1:Active:Standalone] log # tcpdump -i 0.0 -s 0 -w 20201014-004.cap
```

ファイルが作成されます。

```
[root@ltm-i2600-1:Active:Standalone] log # pwd
/var/log
[root@ltm-i2600-1:Active:Standalone] log # ls *.cap
20201014-001.cap  20201014-002.cap  20201014-003.cap  20201014-004.cap  20201014-005.cap
```
##sslo lab

名前が長すぎるとNG

```
[root@ltm-i2600-1:Active:Standalone] log # tcpdump -lnni ssloN_sslo_proxy_to_service.app/ssloN_sslo_proxy_to_service -Xs0
tcpdump: verbose output suppressed, use -v or -vv for full protocol decode
listening on ssloN_sslo_proxy_to_service.app/ssloN_sslo_proxy_to_service, link-type EN10MB (Ethernet), capture size 65535 bytes
 errbuf ERROR:Interface name too long to add /Common. Length (59) must be less than (57).
tcpdump: pcap_loop: Interface name too long to add /Common. Length (59) must be less than (57).
0 packets captured
0 packets received by filter
0 packets dropped by kernel
[root@ltm-i2600-1:Active:Standalone] log #
```
##キャプチャファイルをPCに転送

```
Yumi.T@yumi logs % scp -P 25105 root@9.188.52.180:/var/log/20201014-004.cap  ./
Password:
20201014-004.cap                                                                                                                                   100%   50KB 327.3KB/s   00:00
```
#Wireshark
##Wiresharkに秘密鍵を保存する
SSH通信を可視化するため、Wiresharkに秘密鍵を保存します。
このとき.pemファイルは保存できないので.keyファイルに変換する。

```
Yumi.T@yumi logs % openssl rsa -outform der -in sslo.pem -out sslo.key
Enter pass phrase for sslo.pem:
writing RSA key
```





##参考

[BIG-IPでtcpdumpを使用する際のTips](https://qiita.com/Kaz_K/items/3de4a890f18f52ef5e5a)

[Linux～Windows間でファイル転送する方法](https://qiita.com/gita/items/fd461299d35e3b89769f)

[【scp】Linuxでリモート・ローカル間でファイルを転送するコマンド](https://uxmilk.jp/50946)

[SCPコマンドでローカルのファイルをサーバにアップ＆サーバ上のファイルをDL](https://qiita.com/ritukiii/items/c724f09fe66fedf2618b)


[.pemを.keyに変換するには?](https://www.366service.com/jp/qa/17728ebeae8276ec08b9b39cead0db73)

[【解析】https(SSL/TLS)をwiresharkで復号化する方法(SSLKEYLOGFILE),ブラウザで見る方法](https://milestone-of-se.nesuke.com/nw-basic/tls/decrypt-tls-at-executing-packetcapture/)
SQL Server : テーブルサイズの変化とクエリ実行速度の関係性について


# 背景
サービス成長に伴ってデータは増え続けます。テーブルのレコード数が増えていったときに、「インデックスの構造はどう変わるか」が理解できると「テーブルサイズの変化に伴ってクエリの実行速度はどう変わるか」について予測できるようになるので、説明したいと思います。

# レコード数の違いによるインデックス構造の変化を確認
テーブル定義は同じで、レコード数だけが異なるDBを3つ用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/3c506a60-a609-fad1-dc6d-eaf5f0c98652.png)

次に、各DBでインデックスの再構築を実施し、断片化をできる限り抑えた状態にします。

```sql
use MyTuningDB_small
alter index PK_MemberEMail on MemberEMail rebuild
go

use MyTuningDB_middle
alter index PK_MemberEMail on MemberEMail rebuild
go

use MyTuningDB_large
alter index PK_MemberEMail on MemberEMail rebuild
go
```

そのあと、各DBごとにインデックスの構造を確認します。

```sql
DECLARE @OBJECT_ID int
set @OBJECT_ID = OBJECT_ID('MemberEMail')

SELECT
index_id
,index_type_desc
,index_depth
,index_level
,page_count
,record_count
FROM sys.dm_db_index_physical_stats (DB_ID(), @OBJECT_ID, NULL , NULL, 'DETAILED') as A
JOIN sys.objects as B on A.object_id = B.object_id
ORDER BY index_id, index_level
```

結果は以下のようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/50159144-e154-2ffc-3015-c534956f0dd0.png)

この結果から、以下のことがわかります。

- 1000万単位のレコード数の差でも、ツリーの深さはほぼ同じ(index_depth = 3 or 4) 
- リーフノードのページ数(page_count)はレコード数にほぼ比例

# レコード数の違いによるクエリ実行速度の変化を確認
Index ScanとIndex Seekの両方で、テーブルのレコード数が増加するに伴って実行時間がどう変化するのかを計測してまとめました。

# Index Scanのとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/fe0a08f0-c65e-7bcf-4408-02a1ca69d061.png)
↑のように、Index Scanでクエリ実行される場合の、テーブルレコード数の変化と実行速度の関係を計測して以下にまとめました。

#### 実行時間まとめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/d9ccaa52-3535-1737-f1b2-46f24f0bdfb9.png)

#### Index Scanのときのクエリ実行速度変化のポイント
- レコード数が増えるほど「論理読み取り数」が増加
 - リーフノードのページ数にほぼ一致
- レコード数が増えるほど如実に実行時間が増加
 - 1.5秒→3秒→5秒

# Index Seekのとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/37a47401-c589-1c77-81e8-0c14498eb7bf.png)
↑のように、Index Seekでクエリ実行される場合の、テーブルレコード数の変化と実行速度の関係を計測して以下にまとめました。

#### 実行時間まとめ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148310/8930313c-290c-e4bc-8d9f-a7ef79a05403.png)

#### Index Seekのときのクエリ実行速度変化のポイント
- レコード数が増えても「論理読み取り数」がほぼ同じ
 - インデックスの階層数にほぼ一致
- 故に、レコードが大幅に増加しても実行時間はほぼ同じ
 - Index Seekの強力な特徴

# まとめ
まず、レコード数増加に伴ってインデックスの構造がどのように変化するのかを確認しました。
1000万単位でレコードが増えても、クエリの階層数（深さ）はほとんど変わらず、一方で、リーフページ数はレコード数に比例して増えていく傾向を確認できました。

次に、Index Scan / Index Seekにおけるレコード数変化が及ぼす実行時間への影響について確認していきました。Index Scanはレコード数が増えていくと実行時間も伸びていくのに対して、Index Seekについてはレコード数が増えても実行時間は増えないことが確認できました。

このことから、データ量増加に伴うクエリ実行時間の変化を推定するときは、「そのクエリの実行はScanなのか、Seekなのか」を理解しておくことが重要だと分かります。

「データ量が増えたから遅くなった/遅くなりそう」ではなく、

- 「データ量が増えてもSeek処理なので速度は変わらないはず」
- 「データ量が増えるとScan処理なので徐々に遅くなって行く懸念がある」

といった推定ができると負荷に関する未来予測の精度が上がると思います。
Golangのnet/httpでCORSを全許可するときにつけるヘッダー


```golang

func handler(w http.ResponseWriter, r *http.Request) {
   w.Header().Set("Access-Control-Allow-Headers", "*")
   w.Header().Set("Access-Control-Allow-Origin", "*")
   w.Header().Set( "Access-Control-Allow-Methods","GET, POST, PUT, DELETE, OPTIONS" )
```
RSpecのテストでArgumentError: wrong number of arguments (given 2, expected 0)が出た時の対処法

##はじめに
RSpecのテストを実行したときに

```
　　　Failure/Error:
       post login_path, params: { session: { email: user.email,
                                             password: user.password } }

     ArgumentError:
       wrong number of arguments (given 2, expected 0)
```
と出てエラー解決に時間がかかったので書いていきます。
##エラー内容
このエラーは「呼び出し側の引数」(given 2)と2に対して「メソッド側の仮引数」（expect 0)で0ですよと言われています。何らかの理由で値にズレが生じているということです。
##発生した原因
RSpecのコード内で

```
let!(:post) { create(:post, user: user) }
```
という記述をしていて、post login_path, params: { session: { } }のpostがget,post,deleteなどのpostではなくてRSpecコード内のlet!(:post)を呼び出してしまっているから。
##解決方法
先ほどあったコードの名前を変えてあげるだけです。

```
let!(:new_post) { create(:post, user: user) }
```
##参照
https://qiita.com/yo0917/items/20c165a3b06805bf2e37

##最後に
すごい初歩的なミスかもしれませんがRSpec書きたての僕はすごい悩まされたので今後も頑張って解決していきたいです。
文章力も上げていきたいです。
カレンダーから日付を選択するフォーム作成方法


#普通の入力フォーム（変更前）

```java:ビューファイル
<%= form.text_area :day, placeholder: "day" %>
```

![前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/773c7cb1-941f-7949-7e45-66482a7e2d6b.png)

#カレンダー選択フォーム(変更後)

**text_area　→　datetime_fieldに変更する。**

```java:ビューファイル
<%= form.datetime_field :day, placeholder: "day" %>
```

![後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/50068c2a-cefe-2ac4-7a82-7eeae5d51afa.png)


#まとめ
変更前は色々と記述しないといけなくて難しいのかと思うかもしれませんが、
実際は記述を少し変えるだけでできちゃうんです！！
ぜひ、やってみて下さい。

#####以上。
Firebaseでのデプロイ時のエラー（2020年10月27日現在）

#はじめに
Firebaseにてデプロイを行った際に起きたエラーについて時系列でまとめていきます。

ちなみに、トラハックさんがすごく丁寧に解説しているので参考にすると良いかもしれません。(最近Firebaseのルールが変わったためにエラーが起きているみたいです。)
→[日本一わかりやすいReact入門【実践編】#3...Firebaseプロジェクトの作成と初めてのデプロイ](https://www.youtube.com/watch?v=ta2m6nfYHuQ)

## Error: functions predeploy error: Command terminated with non-zero exit 
package.jsonの「"react-app"」の部分だけ削除します。

```package.json
  "eslintConfig": {
    "extends": [
      "react-app"  ←ここだけ
      "react-app/jest"
    ]
  },
```
これで通ります。

##　Error: HTTP Error: 400, Billing account for project '1050404670100' is not found. Billing must be enabled for activation of service(s) 'cloudbuild.googleapis.com,containerregistry.googleapis.com' to proceed.

何やら長い文。
簡単に訳すと、

**「請求先がないんだけど！！デプロイしたいなら有料プランにしてな！！」**

という事らしいです。

（ええ。個人のテスト開発だし、どうせなら無料のままが良いんだが。）と悩んでいても意味ないです。~~Google様にこう言われたら従うしかないのです。。~~。

ただ、有料プラン（Blaze）に変更しても無料枠が大きいので、個人開発レベルでは課金されることはほぼないようです。また、課金されそうになると通知を送ってくれる機能もあるのでそこまで心配しなくても良いかと思います。

### ということで有料プランに変更。
変更の方法については、申し訳ありません、省略させていただきます。🙇🏻‍♂️

ほんでもって、firebase deployをすると、、、

```ターミナル
✔  Deploy complete!
```

やったーーーーー！できた！

# さいごに
ご覧いただきありがとうございました。お役に立てていれば幸いです。
（ご指摘等あればバンバンお願いいたします！）
sys/cdefs.hがないときの対処



# 症状
Ubuntu18.04でC言語のコンパイル時に以下のエラーが出たときの対処方法をメモしておきます。

```
sys/cdefs.h: そのようなファイルやディレクトリはありません
```


# 対処
普通は`libc6-dev-i386`をインストールすれば治るようです。

```shell
sudo apt install libc6-dev-i386
```

私の場合、`libc6-dev-i386`は既にインストールされていました。
`libc6-dev`を再インストールすることで解決しました。

```shell
sudo apt install --reinstall libc6-dev
```

# 原因
`/usr/include/sys/cdefs.h`は`/usr/include/x86_64-linux-gnu/sys/cdefs.h`へのシンボリックリンクになっています。
その`/usr/include/x86_64-linux-gnu/sys/`が存在しなかったことが原因でした。

おそらく、`sys`を除外したバックアップから復元したときにやってしまったようです。うっかりすぎますね。


# 参考文献
[致命的なエラー：sys / cdefs.h：そのようなファイルまたはディレクトリはありません|](https://qastack.jp/ubuntu/470796/fatal-error-sys-cdefs-h-no-such-file-or-directory)
生データの揺らぎをフィルタで整える

##フィルタリングの意義
センサにはノイズがつきものです。突然データがピンッと跳ねることがあります。
また人間は非常にアナログです。指を止めているつもりでもデータがブルブルと揺らいだりします。

これをそのままデジタルに用いると非常に不安定なシステムになってしまいます。
そこで生のデータを整えるフィルターが重要となります。

##フィルター
指数移動平均（EMA）フィルターを用います。[（参照）](https://ja.wikipedia.org/wiki/%E7%A7%BB%E5%8B%95%E5%B9%B3%E5%9D%87#%E6%8C%87%E6%95%B0%E7%A7%BB%E5%8B%95%E5%B9%B3%E5%9D%87)

```math
S_t = α \times Y_{t-1} + (1-α) \times S_{t-1}
```

αの値が大きいほど古い値の重みが小さくなります。逆も然り。

####ローパスフィルター
瞬間的な変動値を減衰します。ブルブルを抑えたデータが得られます。

```swift
var lastVal: CGFloat = 0.0
var alpha: CGFloat = 0.4

func lowpass(val: CGFloat) -> CGFloat {
  lastVal = alpha * val + lastVal * (1 - alpha)  
  return lastVal
}
```

####ハイパスフィルター
瞬間的な変動成分のみにします。グイッと変化した際のデータが得られます。

```swift
var lastVal: CGFloat = 0.0
var alpha: CGFloat = 0.4

func highpass(val: CGFloat) -> CGFloat {
  lastVal = alpha * val + lastVal * (1 - alpha)
  return val - lastVal
}
```
Linux Command 纏め

```terminal
ssh [option] hostname [cmd]
```
ssh : Secure Shell Protocol 、network protocolの中の一つで、
computer to computer のように　ネットのようなpublic networkを通じてお互いに通信をする時
セキュリティー的に安全のため使うprotocol。
１．データ転送
２．遠隔制御

SSH Client -> SSH Protocol <= SSH Server

|option  |コマンド内容|
|---|---|
|-i  |秘密鍵ファイル(identity ファイル指定)  |
|-l  |ログインユーザ名を指定  |
|-p|ポート番号を指定|
|-x  |X11の転送を有効化  |
|-1  |SSHのprotocol version1を使用 |
|-2  |SSHのprotocol version2を使用 |
|-4  |IPv4を使用|



◆ls ：　folder/fileの一覧を表示
◆cd ：　folderの場所を移動
◆pwd ：　現在のfolder位置を表示
◆cp ：　folder/file copy
◆mv ：　move
◆rm ：　remove
◆mkdir ：　make directory? folderを作成
【TypeScript】配列から指定個数だけ無作為に非復元抽出する関数

# コード

```ts
// 関数インターフェイスのための型関数定義
type Append<T, U extends unknown[]> = ((x: T, ...y: U) => void) extends (...x: infer V) => void
    ? V
    : never;

declare type FixedLengthTuple<T, L extends number, R extends any[] = []> = {
    0: R;
    1: FixedLengthTuple<T, L, Append<T, R>>;
}[R["length"] extends L ? 0 : 1];

// 本題の関数定義
type Options<T, L extends number> = {
    list: readonly T[];
    length: L;
};

function sampleWithoutReplacement<T, L extends number>({
    list,
    length,
}: Options<T, L>): FixedLengthTuple<T, L> {
    const copiedList = list.slice();
    const result = [];

    for (let i = 0; i < length; i++) {
        const index = Math.floor(Math.random() * copiedList.length);
        result.push(...copiedList.splice(index, 1));
    }

    return result as any;
}
```

# 解説

**型関数について**

`Append<T, U extends unknown[]>`は配列型の先頭要素に新たな型を追加する型関数。([参考はこちら](https://qiita.com/cuttlefish_math/items/792c911794a5a1bb304b))

`FixedLengthTuple<T, L extends number, R extends any[] = []>`は指定した型の固定長タプル型を生成する型関数。([参考はこちら](https://qiita.com/kgtkr/items/eff20225e4bf9b159110))

**本題の関数について**

引数の`list`のコピーを取ります。(後に配列に対して破壊的メソッドを使用するため)
結果を格納しておく空の配列`result`を宣言しておきます。

`length`で指定された回数だけ`for`文を回します。
`for`文の中では、まず`Math.random()`を利用して配列の`index`をランダムに決めます。続いて、`Array.prototype.splice()`を使用して配列の指定箇所から要素を抜き出します。
`Array.prototype.splice()`が破壊的メソッドであることを利用して「非復元性」を表現しています。

結果を格納している`result`は固定長であることをコンパイラが認識しないので、`as any`でTypeScriptコンパイラを黙らせます。([プログラマーの勝利](https://qiita.com/uhyo/items/aae57ba0734e36ee846a#typescript%E3%81%8C%E6%95%97%E5%8C%97%E3%81%99%E3%82%8B%E3%81%A8%E3%81%8D))

# 動作確認

こんなのでいいのかわかりませんが、結果にばらつきはなさそうです。(統計的検定までは勘弁)

```ts
const test: any = {};

for (let i = 0; i < 100000; i++) {
    const numbers = sampleWithoutReplacement({ list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], length: 1 })

    numbers.forEach(number => {
        test[number] = test[number] ? test[number] + 1 : 1;
    })
}

console.log(test);
//{ "0": 10076, "1": 10154, "2": 9928, "3": 9998, "4": 9963, "5": 10068, "6": 9863, "7": 10024, "8": 9953, "9": 9973 } 
```
演算子とは

#演算子

**プログラミングにおける値の計算や比較などに使用する記号のことです。
計算における代表的な演算子は<font color="Red">+</font>や<font color="Red">-</font>、比較における代表的な演算子は<font color="Red">></font>や<font color="Red"><</font>があります。**

この簡単な記号である演算子を用いることで、計算や比較処理を瞬時に行ってくれます。

#代数演算子

演算子の中でも計算を行うものは、代数演算子と呼ばれます。
Rubyで一般的な計算をする場合、以下の様な演算子が使えます。

![演算子.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762918/662bfc84-39be-7cf3-d520-2627c4a7757a.png)

使い方は、普通の算数の計算と同じです。ただし、**剰余の計算は馴染みがない**ので注意が必要です。
例えば、「17を5で割ったときの余り」を求めることができます。

以下の例を見てください。

```java:【例】irb
# 足し算
irb(main):001:0> 1000 + 2000
=> 3000

# 引き算
irb(main):002:0> 3000 - 1500
=> 1500

# 掛け算
irb(main):003:0> 50 * 40
=> 2000

# 割り算
irb(main):004:0> 600 / 15
=> 40

# 剰余演算（5 ÷ 2をした余り）
irb(main):005:0> 5 % 2
=> 1
```

#irbで以下のコードを実行しましょう
1年は何時間か計算してみましょう。

```java:irb
irb(main):001:0> 24 * 365
```

実行すると、一瞬で計算結果が表示されますね。
実際にやってみて下さいね！！


#まとめ

**・演算子とは、プログラミングにおける値の計算や比較などに
使用する記号のこと。
・代数演算子とは、演算子に属し、その中でも計算を行うもの。**

#####以上。
GitlabをSlackと連携させて、Issueやマジリクをslackに通知させる

# 背景
- コミュニケーションはslack、コードはGitlabで管理しているが、いまいち開発タスクの進捗がわかりにくかったり、「マジリク飛ばしました」と毎回連絡するのがめんどくさかった。
- webhookを利用してGitlabとSlack連携させて、Issueやマジリク等への通知を飛ばせないのかと思った。


# 方法
##1. Slack API側での設定
[Slack API](https://api.slack.com/)を開き、`Start Building`を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/17c2f640-8d3b-371f-cbed-25f9b885b385.png)

**App Name**に通知するアプリの名前を登録（今回は例として`sample-gitlab-notification`とする）
**Development Slack Workspace**で、接続したことがあるワークスペースがプルダウンで表示されるので、連携したいSlackのワークスペースを選択
`Create App`を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/5b1e7478-fd22-df63-05fd-b5ad6bf5369d.png)

`Incoming Webhooks`を選択。これで、外部ソースからslackへメッセージを投稿できるようになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/876bd1f3-ade2-1cac-1ae5-1f4c052c1122.png)

`Activate Incoming Webhooks`を**On**にし、`Add New Webhook to Workspace`押下。
その後、プルダウンから投稿するチャンネルを選択し、`許可する`を押下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/51faee8d-b755-cd58-ada6-64587a42f629.png)

すると、遷移後の画面の一番下に**webhook URL**が記載されているので、それをコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/6de3ffe8-9f93-1b3a-b37d-4c301ff37886.png)

あとはこれをGitlab側に入力するだけ！

## 2. Gitlab側での設定
Issueを管理したいプロジェクトを開き、`Setting`から`Integrations`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/93e439be-51ca-e8f5-1e89-e68b8e5ec376.png)

その中の`Slack notifications`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424284/6d29b98c-dc28-d607-8fbf-322850bdb33b.png)

Push,Issue,Merge Requestなどから通知を行いたいものを選択し、遷移したページのWebhook欄に先ほどコピーしたwebhook URLを貼り付け、`Save changes`

---

**以上！**

**結構簡単な設定で、GitlabでIssueがopen, closeされた時、マージリクエストがきた時などにslackに通知を飛ばすことができる。**
【Rails6】jQuery導入・uncaught reference error $ is not definedエラーの解決法


__開発環境__

* Rails 6.0.3.4
* yarn 1.22.4

__目次__
１）jQuery導入
２）uncaught reference error $ is not definedエラーの解決法

#１） jQuery導入 >> 箇条書き

　__1. yarn add jquery でjqueryを導入__
　__2. environment.jsへ webpackの設定ファイルにjQueryを管理下に追加する記述を書く__
　__3. application.jsへ jQueryを呼び出すための記述を書く__
　__4. application.html.erbへ javascriptの呼び出しが記述されているか念の為確認__

#１） jQuery導入 >> 詳しく解説
##　1. yarn add jquery でjqueryを導入
```
ターミナル
$ yarn init　*補足：OSにHomebrewでyarnインストールをすでにされている場合は不要だと思います。
$ yarn add jquery
```
__*補足：__私は"yarn add jquery"だけで問題ないのですが、他の方の記事を確認したところ、"yarn init"を先に入力するという説明もあったので、補足として記載させていただきます。『Homebrewでyarnインストール』については[こちら](https://qiita.com/hiro266/items/fb1d37c180d6cbc696c8)の記事が参考になると思います。

__*補足2：__
gem 'jquery-rails'をGemfileへ記述する方法もありますが、Rails6からはyarn addが推奨されているらしいです。今回は、Webpackerで管理するため、Node.jsのパッケージを利用しています。

##　2. environment.js
```javascript:app/config/webpack/environment.js
//この記述内容をコピペ（もともとの記述は削除でOK）
//これは、webpackの設定ファイルでjQueryを管理下に追加するための記述です。
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

module.exports = environment
```
##　3. application.js
```javascript:app/javascript/packs/application.js
// 省略
require("@rails/ujs").start()
require("turbolinks").start()  //私はいつもコメントアウトします
require("@rails/activestorage").start()
require("channels")
require('jquery') //これを追記
// 省略

```
__*補足：__turbolinksはキャッシュを積極的に利用するため、ページがロードされてから起こるイベントがうまく動かないことがあります。私はjavascriptを使う上で少し厄介だなという認識なので、コメントアウト。(キャッシュを利用するとページの読み込み時間は短縮されるんですけどね)

##　4. application.html.erb　＊＊念のために確認
```html.erb:app/view/layouts/application.html.erb

<!-- tourbolinksを削除する場合こうなります -->
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= javascript_pack_tag 'application' %>
```

ここまでがJqueryを導入するまでの一連の流れです。


#2）  $ is not definedエラーの解決法
$がnot defined（定義されていない）ということは、jQueryがうまく入れることができていないということなので、jQuery導入で説明した４ステップを確認すれば、解決するのではないかなと思います。

　__1. yarn add jquery でjqueryを導入__
　__2. environment.jsへ webpackの設定ファイルにjQueryを管理下に追加する記述を書く__
　__3. application.jsへ jQueryを呼び出すための記述を書く__
　__4. application.html.erbへ javascriptの呼び出しが記述されているか念の為確認__


以上です。
kahadbのログファイルを強制的にフラッシュする方法

サーバのディスク容量アラートの原因を探ったら
activemqのkahadbのフォルダが100G近くあって、ディスクを圧迫していた

フォルダ内を見ると
db-xxxxxx.log
というファイルが無数に作成されており、これが積み重なって100Gになっているようだった

```
[user01 srv01 /usr/apache-activemq/data/kahadb]
$ ls -lh
合計 101G
略
-rw-r--r--  1 root root  33M 11月 12 17:24 2018 db-47599.log
-rw-r--r--  1 root root  33M 11月 12 17:42 2018 db-47600.log
-rw-r--r--  1 root root  33M 11月 12 18:02 2018 db-47601.log
-rw-r--r--  1 root root  33M  3月  5 17:22 2019 db-54390.log
-rw-r--r--  1 root root  33M  3月  5 18:46 2019 db-54391.log
-rw-r--r--  1 root root  32M 10月 26 20:47 2020 db-63532.log
-rw-r--r--. 1 root root  88M 10月 26 20:47 2020 db.data
-rw-r--r--. 1 root root 3.2M 10月 26 20:47 2020 db.redo
-rw-r--r--. 1 root root    0  5月  9 18:26 2014 lock
```

## db-xxxxxx.logは何のファイル？
公式のドキュメントを見るとdb-xxxxxx.logというファイルは拡張子の通りkahadbのログファイルだった
https://activemq.apache.org/why-do-kahadb-log-files-remain-after-cleanup

本来は30秒毎に更新されるのだが
何らか理由でkahadbが掴んでいる状態だとログファイルが削除されず残り
db-1.log
db-2.log
db-3.log
....
と溜まり続けるようだ

## 削除方法
本来は、なぜログファイルが掴まれ続けているのかを調査した上で個別の解決方法を取るのが正しいのだが
自分のケースでは、ログや未送信のキューを失っても良かったので全データをリセットする方法を取った

方法は
deleteAllMessagesOnStartup="true"
という属性をactivemq.xmlのbroker要素に追加してactivemqを再起動するだけ

```
例

# activemq.xml修正
vim /usr/apache-activemq/conf/activemq.xml

#以下のようにbroker要素のdeleteAllMessagesOnStartupを追加
  <broker deleteAllMessagesOnStartup="true"　xmlns="http://activemq.apache.org/schema/core" brokerName="localhost" dataDirectory="${activemq.base}/data" destroyApplicationContextOnStop="true" schedulerSupport="true" persistent="true">

# activemq再起動 (cent6環境)
sudo /etc/init.d/activemq stop
sudo /etc/init.d/activemq start

```

activemq.xmlのリファレンス
https://activemq.apache.org/xml-reference
SIEM on Amazon Elasticsearch Serviceを利用する

https://aws.amazon.com/jp/blogs/news/siem-on-amazon-elasticsearch-service/

AWSの方がセキュリティ観点の可視化とログ分析の解決策を公開しました。このようなサービスは大変お高い印象がありますが、AWSのサービス上で構築するため規模に合わせた課金額になります。（ログ量に比例するため小規模のシステムでも導入できるはず）


**aws-samples / siem-on-amazon-elasticsearch**
https://github.com/aws-samples/siem-on-amazon-elasticsearch

ログの可視化と分析においてログ出力／蓄積／サービスごとに重複したログの消し込みなど導入までにやらなければならないことが非常に多いですが、CloudFormationのテンプレートをデプロイすれば利用準備が整い、専用のS3バケットにログを書き込むことであらかじめ用意してあるダッシュボードで可視化できるようになります。

**以下はCloudtrailのテンプレを使った可視化**
デフォルトでもセキュリティ関連のイベントがいつ／どれだけ起きているか？可視化できます
![ct.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/34f0dcb0-7d2f-4de7-167a-43cb40a751c1.png)

単純にダッシュボードを表示するだけでも、クロスアカウント環境下において全体像の可視化に利用できるかと思います。ただより効率的に運用するにはもう少し鳴らしてノウハウをためる必要があるかと思いました。いろいろなログを蓄積して可視化を進めていきます！
Java SE Bronze 試験番号： 1Z0-818 （データの宣言と使用　編）（2020年10月）

公式サイト: [Java SE Bronze](https://education.oracle.com/java-se-bronze-available-only-in-japan/pexam_1Z0-818 "Bronze")

![oracle.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/00aa6754-3fc9-7b81-c61d-644274046f99.png)

#目的
:cherry_blossom: **Java Bronze SE 合格** :cherry_blossom:
#目次
> 1, Java のデータ型（プリミティブ型、参照型）
> 2, 変数や定数の宣言と初期化、値の有効範囲
> 3, 配列（一次元配列）の宣言と作成、使用
> 4, コマンドライン引数の利用




#1, Java のデータ型（プリミティブ型、参照型）

**プリミティブ型**
 >　byte
 　short
 　int
 　long
 　float
 　double
 　boolean
 　char

**参照型**
 >　String

#2, 変数や定数の宣言と初期化、値の有効範囲
>変数

```ruby:Variable.java
class Variable { 
	public static void main(String[] args) {
				
     -- Primitive type --
		byte  a = 1;
		short b = 5;
		int   c = 10;
		long  d = 100L;
		
		float  e = 1.0F;
		double f = 2.00;
		boolean x =  true;
		boolean y = false;
		char z = 'A';
		
	 -- Reference type -- 
		String name = "java";
	}
}
```
>定数 　※慣習的に大文字を使います

```ruby:Constant.java
class Constant { 
	public static void main(String[] args) {
				
     -- Primitive type --
		final int VALUE = 10;
		
	 -- Reference type -- 
		final String NAME = "java";
	}
}
```

#3, 配列（一次元配列）の宣言と作成、使用
```ruby:Array.java
class Array { 
	public static void main(String[] args) {
	
    -- int type --
	int[] numbers = {5, 10, 15, 20};

    -- String type -- 
	String[] subjects = {"Japanease", "Math", "Social", "Sience", "English"};
		
	for (int i = 0; i < numbers.length; i++) {
		System.out.println(numbers[i]);
	}
		
	for (int i = 0; i < subjects.length; i++) {
		System.out.println(subjects[i]);
	}		
     
	}
}
```

#4, コマンドライン引数の利用

```ruby:CommandLine
> java "クラスファイル名" "値１" "値２" ...
```

mainメソッドでは、Stringクラスの配列としてコマンドライン引数を受け取ります

```ruby:CommandLine.java
class CommandLine { 
	public static void main(String[] args) {

        System.out.println(args[0]);
        System.out.println(args[1]);

        "よく使う命令実行文"
        "キーボードから１行の文字列の入力を受け取る"
        String s = new java.util.Scanner(System.in).nextLine();
        "キーボードから１行の整数の入力を受け取る"
        int input = new java.util.Scanner(System.in).nextInt();

        System.out.println(s);
        System.out.println(input);
	}
}
```

#備考
**アドバイス**や**コメント**などあればぜひお願いします:blush:
適時、加執修正します❗️
1, [データの宣言と使用　編](https://qiita.com/iwasaki-hub/items/785572dfa89c60d3bdcb)
2, [ループ文　編](https://qiita.com/iwasaki-hub/items/fdbcb6b3acc75776a906)
メモ化を学んだ

## 前書き

最近Web系企業のインターン選考や本選考を受ける機会が何度かありました。
多くの企業の選考でコーディングテストがありまして、今回少し勉強したのでアウトプットの練習も兼ねて備忘録的な感じで残しておきます。


今回は**メモ化**についてです。

##メモ化とは
簡単に言うと、プログラムの高速化のためのテクニックです。

「再帰処理などで何度も同じ関数が呼ばれる際に計算結果をキャッシュ（メモ）に記録しておき、前に計算したものに関してはキャッシュされた値を返す」といった感じのテクニックです。


## 実装例
今回は実装例として、**フィボナッチ数列のn番目の数字は何か**を求めるプログラムを紹介します。

###フィボナッチ数列

~~~math
a_1=a_2=1 \\
a_n=a_{n−1}+a_{n−2}\\
(1\leqq n)
~~~

フィボナッチ数列を漸化式で表すと上記のようになります。
詳しい説明は省略しますが、最初の2つの項は1を返し、それ以降は前の2つの項の和を返します。


### ただの再帰で実装
~~~ python
def fibonacci(n):
    if n == 1 or n == 2:
        return 1

    return fibonacci(n - 2) + fibonacci(n - 1)

print(fibonacci(6))  # 8
~~~

### メモ化で実装
~~~ python
memo = {1: 1, 2: 1}

def fibonacci(n):
    # memoの中にnが記録されている場合は、その値を返す
    if n in memo:
        return memo[n]

    # ない場合はメモに記録して、その値を返す
    memo[n] = fibonacci(n - 2) + fibonacci(n - 1)
    return memo[n]

print(fibonacci(6))  # 8
~~~

## イメージ
ただの再帰で実装した場合のn=6は、fibonacci(4)が2回、fibonacci(3)が3回呼ばれています。
nがどんどん大きくなると、計算する回数が増えていくことがイメージできると思います。
メモ化をすると1度計算したものについて2回目以降は計算しなくて済むので、計算回数を大幅に減らすことができます。
![fibonacci.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403760/9d266a9a-b74b-f525-c407-381c36b8c2e2.png)


## まとめ
- メモ化はプログラムの高速化のためのテクニックの1つ。
- nが大きくなればなるほど有効
JavaScriptでGoToトラベルのクーポン種別を絞込む

# はじめに
~~金持ちほど得をする~~素敵なキャンペーン、GoToトラベルですが、クーポン種別が紙と電子の二種類あることをご存知でしょうか?
紙クーポンは、その名の通り実体のある紙形のクーポン、電子クーポンはスマホから使用できるバーチャルなクーポンです。

普通に考えれば、同じキャンペーンで発行されたクーポンなので同じように使えるはずですが、そこは流石日本というべきか、
**電子クーポンは紙クーポンと比較して約半数の店鋪でしか使用できません。**

「まあ、最初に調べてから旅行すればいいじゃん」と思いますが、**GoToトラベルのサイト上ではクーポン種別による絞り込みが出来ません。**

これをUserScriptを使用して改善してみます。

![Screen Shot 2020-10-27 at 0.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185096/8bb645ed-1814-bb42-d0d4-978a043eb716.png)


## UserScriptって？
UserScriptとは、Webサイト上でユーザー任意のJavascriptを割り込む仕組み、またはそのスクリプトのことです。
たいていのブラウザで拡張機能として動作します。[Tampermonkey](https://www.tampermonkey.net/)あたりが有名でしょうか。
今回はこれを用いることによって、GoToトラベルの公式Webサイト上で絞り込み機能を有効化しています。

## スクリプト
```javascript
// ==UserScript==
// @name         GoToRefine
// @namespace    https://satoh.dev/
// @version      0.1
// @description  Refine your search results by coupon type for GoTo Travel. This is how it should be.
// @author       Soh Satoh
// @match        https://map.goto.jata-net.or.jp/?st=result&*
// @require      https://jpillora.com/xhook/dist/xhook.min.js
// @grant none
// ==/UserScript==

(function () {
	// Add a button to choose between electronic or paper coupons
    // ref: https://www.lisz-works.com/entry/tampermonkey-add-selector
	var selectable_elements = ['デフォルト', '電子クーポン', '紙クーポン'];
	var selectbox = $('<select>')
		.attr({
			name: 'sel',
			id: 'selector',
			style: 'color: white; font-size:' + $('.reset-btn').css('font-size'),
		})

		.on('change', async function () {
			localStorage.setItem('mode', this.selectedIndex);
			location.reload(true);
		})

		.appendTo($('.reset-btn'));

	$.each(selectable_elements, function (i, v) {
		selectbox.append($('<option>').val(v).text(v));
	});

	// Apply the saved setting
	var selector = $('#selector')[0];
	selector.selectedIndex = localStorage.getItem('mode');

    if(selector.selectedIndex == 0) return;

	// Hook XHR
	xhook.after(function (request, response) {
        if(request.url.indexOf('api/point') == -1) return;

		var modified = JSON.parse(response.data);

		var items = modified.items;
		var i = items.length;
		while (i--) {
			if (items[i][selector.value] != '1') {
				items.splice(i, 1);
			}
		}
		response.data = JSON.stringify(modified);
	});
})();
```

最初にJQueryでページにセレクトボックスを追加します。
デフォルト、電子クーポン、紙クーポンの間で選択可能にし、

```
localStorage.setItem('mode', this.selectedIndex);
```

でローカルストレージに設定を保存するようにしています。
本来はGM.setValueを使用するべきなのですが、これを使用するとなぜかXHRにHookできなくなるため断念しました。理由がわかる方はコメントをいただけると幸いです。

次に[XHook](https://github.com/jpillora/xhook)を使用してresponseを書き換えています。
このスクリプトを使用することで、かんたんにXHR(Ajax)を傍受、改変することが可能です。
本来は外部スクリプトを利用する予定ではなかったのですが、responseの書き換えがどうやってもうまく行かず断念しました。(responseTextの改変は簡単なのですが)

## 最後に
最初は容易に検索できるよう、Webサイトを作成しようと思ったのですが怒られたくないのでやめました。
「初めから絞込めるようにしろよ」とは思うのですが、まあそれやられるとGoToキャンペーン本来の意味を失う部分もあるのかもしれません。
電子クーポンのほうが不便だなんて意味がわからないですけどね。それならどちらかに統一してくれたほうが便利なんですが。