OmniAICreator/Qiita-1.07M huggingface dataset:
Atomショートカット備忘録

[こちら](https://qiita.com/yamagh/items/0fb4e7bbbd3c9ef4d855)から個人的に忘れがちなものを抜き出しています。

##カーソル移動

| 操作 | 備考 | 覚え方 |
|:----|:----|:----|
| ⌥B | 単語の先頭へ移動 | ⌥B ack |
| ⌥F | 単語の末尾へ移動 | ⌥F orward |

##選択

| 操作 | 備考 | 覚え方 |
|:----|:----|:----|
| ^⇧W | 単語全体を選択 | ^⇧W ord |
| ⌘A | 全て選択 | ⌘A ll |
| ⌘D | カーソル位置の単語選択。その後、同文字列にマッチするものを選択してマルチカーソル状態。 | ⌘D uplicate |
| ^⌘G | カーソル位置の単語(または選択範囲の文字列)にマッチする箇所を全て選択。 |

##編集

| 操作 | 備考 | 覚え方 |
|:----|:----|:----|
| ^⌘↑ / ^⌘↓| 現在行を上または下へ移動 |  |
| ⌥⌫ | 単語の先頭まで削除 |  |
| ^K | 行末までを削除 | ^K ill |
| ^⇧K | 現在行を削除 | ^⇧K ill |
| ⌘⇧D | 現在行を複製 | ⌘⇧D uplicate |
| ⌘Enter / ⌘⇧Enter| 現在行の下もしくは下に行を追加 |
| ⌘] / ⌘[| インデントをひとつ追加・削除 |  |

##プロジェクトファイルペイン操作

| 操作 | 備考 |
|:----|:----|
| ^0 | ファイルツリー/ファイル編集エリアのフォーカスを切り替える |
| `H` `J` `K` `L` | ファイル選択/フォルダの開閉 |
| A | ファイルの新規作成 |
| ⇧A | フォルダの新規作成 |
| D | ファイルのコピー |
| ⌥⌘¥ | ファイルツリーを開閉 |
| ⌫ | ファイル/フォルダ削除 |
| M | リネーム |
| ⇧⌘\ - M | 編集中のファイルのリネーム |
| ⇧⌘\ | 編集中のファイルを選択する |

##パネル操作

| 操作 | 備考 |
|:----|:----|
| ⌘K - ←/→ | パネルを分割|
| ⌘K - ⌘←/→ | パネルを移動|

##タブ操作

| 操作 | 備考 |
|:----|:----|
| ⌘N | 新規タブを追加 |
| ⌘⇧T | 最後に閉じたタブを復元 |
| ⌥⌘→ or ^tab or ⌘⇧] | 次のタブを選択 |

## その他

| 操作 | 備考 | 覚え方 |
|:----|:----|:----|
| ⌘⇧P | コマンドパレット開閉 | Command P alette |
GCPのHTTP(S)ロードバランサでセッションアフィニティを設定する

# 問題

GKEのIngressで作成したHTTP(S)ロードバランサについて、Ingressコントローラからはセッションアフィニティが設定できません。
[このページ](https://github.com/kubernetes/ingress-gce/blob/6b80ddaada3ef9fb7e1d946f03b1d9def47c743d/docs/annotations.md)のaffinityの欄を確認すると、2017/12/28現在はnginxコントローラのみ対応しており、GCPのロードバランサは対応していないことがわかります。

つまり、以下のようにgceコントローラを使用している場合は、セッションアフィニティのannotationsは使用できません。

```.yaml
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: eccube-ingress
  namespace: 
  annotations:
    kubernetes.io/ingress.class: "gce"
 .
 .
 .
```

# 解決策

gcloudコマンドを使ってセッションアフィニティを設定できます。
Ingressがデプロイされ、HTTP(S)ロードバランサが立ち上がった後、以下のようなスクリプトを実行します。

```enable-affinity.sh
backend_list=(`gcloud compute backend-services list | awk -v ORS=" " '!/NAME/{gsub("\n"," ",$1); print $1 }'`)
for v in "${backend_list[@]}"
do
    gcloud compute backend-services update "$v" --session-affinity client_ip --global
done
```

上記のスクリプトでは現存するバックエンドサービス全てに対して、セッションアフィニティ`ClientIP`を設定しています。
BigQueryでA/Bテストの信頼区間を計算してみよう

以前説明していたのは、ボタンをクリックするかどうかの二択を続けているという意味で二項分布のbinom.testを利用してました
jstatを利用して、信頼区間を計算してみましょう
Wantedlyでは、BigQueryを使って分析するのは基盤もあるため非常に簡単なので、今回簡単な統計計算をBigQuery上でやってみようと思いました
BigQueryではRを実行できないので、基礎的な統計処理の実装が入っている、jstatを利用して、信頼区間の計算をしました

### 信頼区間の計算

A/Bテストはコインのようにある確率のものを繰り返す時に何枚表かという問題に似ているため、binom.testを利用して評価しています。
Rでは以下のように実行しています。

```
> x=20
> n=80
> conf=0.95
> binom.test(x,n,conf.level=conf)

	Exact binomial test

data:  x and n
number of successes = 20, number of trials = 80, p-value = 8.581e-06
alternative hypothesis: true probability of success is not equal to 0.5
95 percent confidence interval:
 0.1598796 0.3593635
sample estimates:
probability of success
                  0.25

```

実際に区間の計算で用いているのは以下の二つのメソッドになります
詳しいRのコードはこちらになります。
https://github.com/wch/r-source/blob/af7f52f70101960861e5d995d3a4bec010bc89e6/src/library/stats/R/binom.test.R

```
> qbeta((1 - conf)/2, x, n - x + 1)
[1] 0.1598796
> qbeta(1 - (1-conf)/2, x + 1, n - x)
[1] 0.3593635
```

qbetaは、不完全ベータ関数の逆関数で、
jstatにあるibetainvがこのqbetaに当たるのでこちらを用います
https://github.com/jstat/jstat/blob/bbb79875c0708c1687e9f8082c63350455130e0e/src/special.js#L325
(jStatsはRの実装を参考にして実装しているようでした)

BigQueryで実行するには以下のように書きます。

```
CREATE TEMPORARY FUNCTION binom_range(conf FLOAT64, x FLOAT64, n FLOAT64)
RETURNS ARRAY<FLOAT64>
LANGUAGE js AS """
  return [jStat.ibetainv((1 - conf)/2, x, n - x + 1), jStat.ibetainv(1 - (1-conf)/2, x + 1, n - x)]
"""
OPTIONS (
  library="gs://#{project_name}/jstat.js"
);

SELECT
  binom_range(0.95, 20, 80)
```

### 関連
BigQueryで統計量の計算をしてみよう
https://qiita.com/reikubonaga/items/ed125e6e3b7aae9d1ee8
乱数(モンテカルロ法)を使って確率を計算しよう
https://qiita.com/reikubonaga/items/28ee2c2c8074b98b0b04
"No space left on device"で Haskell (in NixOS) のビルドがコケた時の対処


# 環境

- NixOS 17.09
- Stack lts-10.0
- GHC 8.2.2
- intero 0.1.24


# 状況

`lts-10.0` が出て `GHC 8.2.2`が使えるようになったということで軽く試してみようと
Emacs(intero)を立ち上げたところ `Cabal` のビルドで
`"No space left on device"`というメッセージが出てエラーになった
`nix-collect-garbage -d` や `nix-store --optimize` 等を実行し
`dfコマンド` で見ても容量に余裕がありそうだがエラーが解消されなかった

# 原因

`/run/user/1000` にマウントされているtmpfsの容量が足りていなかった(200Mになってた)
https://www.freedesktop.org/software/systemd/man/logind.conf.html
どうやらsystemdの機能によるものっぽい

# 解消


```configuration.nix
  ...

  services.logind.extraConfig = "RuntimeDirectorySize=1024M";

  ...
```

```shell
 $ sudo nixos-rebuild switch
 $ sudo reboot
```

無事ビルド出来た
【超速】Raspberry Pi 3にUbuntuとROSの環境構築

#はじめに
RaspberryPiにROSを導入しようと思ったのですが、調べてみると茨の道らしい…
本家ROSwikiにめっちゃ楽な方法があったので試すことにする。
しかし、これでインストールできるのはUbuntu MATE 16.04とROS kineticですのであしからず。。
#環境
- Raspberry Pi3
- microSD 16GB class10
  - OSの容量が8GBなので最低１６GBがいい．

#導入

##OSのダウンロード
http://www.german-robot.com/2016/05/26/raspberry-pi-sd-card-image/
ROSwikiのrasberrypiの欄からいろいろリンクたどっていくとubuntu MATE16.04+ROS Kineticのパッケージを見つけた.
このページからubuntuとROSの入ったzipファイルをダウンロードする。

ダウンロードして解凍してください．

##インストール
- まずSDカードをPCに挿入
こいつでSDがどのデバイスファイルとして認識されているか調べる．(↓例)

``` sh
$diskutil list

/dev/disk2 (internal, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:      GUID_partition_scheme                        *15.5 GB    disk2
   1:                        EFI EFI                     209.7 MB   disk2s1
   2:       Microsoft Basic Data RPI                     15.3 GB    disk2s2
```

この場合SDは/dev/disk2

- フォーマットする．
 `$ diskutil eraseDisk FAT32 RPI /dev/disk2`

- 完了したらアンマウント
 `$ diskutil unmountDisk /dev/disk2`

- イメージの書き込み(解凍したファイルのあるディレクトリに移動後）
 `$sudo dd bs=1m if='2017-03 Ubuntu Mate 16.04 + ROS Kinetic.img' of=/dev/disk2`

    - 時間がかかるので待つ
    - 僕の環境では１時間
    - macであればctrl + Tで現在の状況を確認できる
    - 1mを大きくすれば早く終わるがエラーが出る可能性もあるらしい
   
- RaspberryPiを起動

##RspberryPiの設定

| user | password |
|:-:|:-:|
| pi  | raspberry  |

- キーボード設定がGermanなのでメニューバーから
System→Preferences→Hardware→Keyboardで設定を日本語とか英語に変える．

- 初期設定をする
 `$raspi-config`

    - からInterfacing Optionsを選択しSSHを有効にする．
    - Advanced なんとかでファイルシステムを拡張する．
        - こうすることで使える容量が増える．  
- 設定変更したらリブートしとく

## ROS

- とりあえずこれやる（２時間くらいかかる）

 ```sh
$ sudo apt-get update
$ sudo apt-get upgrade
```

- 終わったらroscoreしてみる

#参考
+ http://wiki.ros.org/ROSberryPi/Installing%20ROS%20Kinetic%20on%20the%20Raspberry%20Pi
+ http://www.german-robot.com/2016/05/26/raspberry-pi-sd-card-image/
+ https://qiita.com/moutend/items/7ede458aec97056dfd5e
+ http://igarashi-systems.com/sample/translation/raspberry-pi/configuration/raspi-config.html
JSで1〜nまでの整数配列を作成する

# ES2015シンタックス+ES5ビルトインでがんばる

```js
Array(...Array(10)).map((_,i)=>i+1)
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
```

# 緩募

ES2015以降のビルトイン使えばもっと短く書けそう。ステキな書き方知っている方、教えてください（コメント欄あたりに） :bow:
AWS LambdaのログがCloudWatchに書き込まれなくなった時の解決方法

ちょっと今更ですがAWS Lambdaを使ってみました。

使い方、作り方は他の方が書いてるページの方が色々詳しく書いてありますので、今回躓いてなおかつ調べてもあまり出てこなかった内容に関して記載します。

#Cloud Watchにログが書き込まれなくなった

##問題
Lambda関数を作成すると、自動でCloudWatchにログを溜めていってくれます。そして、Lambdaの管理画面上で「テスト」ボタンを押して実行した場合には以下のようにそのログへのリンクが出現し、実際にどう流れたかも見ることができます(そもそも管理画面上でも確認可能です)。

![スクリーンショット 2017-12-28 15.08.38.png](https://qiita-image-store.s3.amazonaws.com/0/225670/9f484135-4193-3ec1-f9b5-33b496e5b1b9.png)

ただ、関数を作ったり消したりと色々やっていたらいつの間にか「ログ」のリンクをクリックしても以下のようなエラー文言が出るようになってしまった。
>ログストリームのロード中にエラーが発生しました。このページを更新して、再試行してください。

##解決法
上記にある通り、開発時には管理画面で見れるのであまり気にしてなかったのですが、やはり公開するとなると外部からのリクエストが何だったのか見たいし、何より気持ち悪いので調べることに。

調べた所基本的に、Cloud WatchにはIAMのロールがちゃんと設定されていれば書き込まれるらしい。ということで、IAMロールを確認すると、書き込み先のリソースが固定になっていた。

書いている時点で、どうやって最初始めたかかなりうろ覚えですが、最初に始める時にロールの作成をLambda上で行った。確かこんな感じ。
![スクリーンショット 2017-12-28 15.14.33.png](https://qiita-image-store.s3.amazonaws.com/0/225670/628ab5c0-d972-0094-3128-0b4c417b892c.png)

この際勝手にロールを作ってくれるのですが、どうやらその時に生成されるのはその時に作ったLambda関数のロググループへの書き込みのみになるようです。よって、ロールをLambdaから作った際は気をつけたほうが良さそうです。

また、上記のロールの内容変更を行う前に、Lambda関数のページを表示していた場合、リロードだけではCloudWatch上にロググループは自動的に作成されません。一度ページを閉じて、改めてLambda関数のページを開くと作成されます。
idカラムがないデータベースファースト時の複合キー設定

タイトルママ。
テーブルにidカラムが存在しない場合のDBファーストでも
複合キーを好き勝手に設定できるようにする方法。
##経緯
Oracle→SQLServer（まだやってる）へのデータ移行での壁その4くらい。
単一キーであれば[Key]アノテーションを付けるだけでいいんだけど、
複合キーになると"InvalidOperationException"でカラム順がないよと怒られる。
その回避策。
##対応内容
***.tt(edmx配下Modelに生成される4ファイルのうちの一つ)を以下のように編集

```***.tt(line66～)
    var simpleProperties = typeMapper.GetSimpleProperties(entity);
    if (simpleProperties.Any())
    {
		int orderNo = 0; //追加
        foreach (var edmProperty in simpleProperties)
        {
#>
/*追加ここから*/
	<# if (ef.IsKey(edmProperty)){ #> 
	[Key, Column(Order = <#= orderNo.ToString() #>)]
	<# orderNo++; #>
	<# } #>
/*追加ここまで*/
    <#=codeStringGenerator.Property(edmProperty)#>
<#
        }
    }
```

``` ***.tt(line415～)
    public string UsingDirectives(bool inHeader, bool includeCollections = true)
    {
        return inHeader == string.IsNullOrEmpty(_code.VsNamespaceSuggestion())
            ? string.Format(
                CultureInfo.InvariantCulture,
                "{0}using System;{1}" +
                "{2}",
                inHeader ? Environment.NewLine : "",
                (includeCollections ? (Environment.NewLine + "using System.Collections.Generic;") : "")
					+Environment.NewLine +"using System.ComponentModel.DataAnnotations;" //追加
					+Environment.NewLine +"using System.ComponentModel.DataAnnotations.Schema;", //追加
                inHeader ? "" : Environment.NewLine)
            : "";
    }

```

###なにやってんのこれ？
各種出力されるフォーマットにちょっと手を加えている。
上はPKに[Key Column(Order = n)]アノテーションを付属させるため。
下はusingを2種追加。上記2種のアノテーションを使うため。
なので極論としては下は省いて上の変更にクラス参照をきちんと記述してやるのでもよい。
見栄えはともかく。
BigQueryで統計量の計算をしてみよう

BigQueryにはUDFという、ユーザ定義関数を実行することができます
また、StandardSQLでは外部jsをインクルードできるようになりました
今回、jsの統計ライブラリであるjstatsを読み込んで、BigQueryで統計量の計算をすることにしました

## 手順

1. jstat.jsをGoogle Cloud Storageにアップする
2. 以下のクエリをBigQueryで実行する


### twoSidedDifferenceOfProportions

```
jStat.fn.twoSidedDifferenceOfProportions(.5, 134, .51, 101);
=> 0.879357522092445
```

```
CREATE TEMPORARY FUNCTION twoSidedDifferenceOfProportions(p1 FLOAT64, n1 FLOAT64, p2 FLOAT64, n2 FLOAT64)
RETURNS FLOAT64
LANGUAGE js AS """
  return jStat.fn.twoSidedDifferenceOfProportions( p1, n1, p2, n2);
"""
OPTIONS (
  library="gs://#{project_name}/jstat.js"
);

SELECT
  twoSidedDifferenceOfProportions(0.5, 134, 0.51, 101)

=> 0.879357522092445
```

### 注意

以下のように最初FLOAT64の箇所をINT64としていて、数字が全く違うものが返ってきていました。
型はしっかり確認して利用しましょう。

```
CREATE TEMPORARY FUNCTION twoSidedDifferenceOfProportions(p1 FLOAT64, n1 INT64, p2 FLOAT64, n2 INT64)
RETURNS FLOAT64
LANGUAGE js AS """
  return jStat.fn.twoSidedDifferenceOfProportions( p1, n1, p2, n2);
"""
OPTIONS (
  library="gs://#{project_name}/jstat.js"
);

SELECT
  twoSidedDifferenceOfProportions(0.5, 134, 0.51, 101)CREATE TEMPORARY FUNCTION twoSidedDifferenceOfProportions(p1 FLOAT64, n1 INT64, p2 FLOAT64, n2 INT64)
RETURNS FLOAT64
LANGUAGE js AS """
  return jStat.fn.twoSidedDifferenceOfProportions( p1, n1, p2, n2);
"""
OPTIONS (
  library="gs://#{project_name}/jstat.js"
);

SELECT
  twoSidedDifferenceOfProportions(0.5, 134, 0.51, 101)

=> 0.0106513479995477
```
vim で .vue のシンタックスハイライトが死ぬ時の設定

https://github.com/posva/vim-vue#my-syntax-highlighting-stops-working-randomly

上記 README にも書いてあるが、「複数の言語が混ざってるファイルだと vim の効率よくシンタックスハイライトかけようとする機能が混乱してうまくいかないことがある」とのことで、下記を .vimrc なり .config/nvim/init.vim なりに書くのがよい。

```vim
autocmd FileType vue syntax sync fromstart
```

[vim-polyglot](https://github.com/sheerun/vim-polyglot) でシンタックスハイライトまとめて入れてるとついつい固有のオプションとかを見落とす。。
今更だけどSQLでcountした中からmax値を取得する

ちょっとSQL書く機会減ってきて、久しぶりに触れたときに忘れかけていたことを記事として残しておくよ！普段からSQL書く人は当たり前のことだから鼻でもほじりながら読んでね！

## 本記事の対象者

- 私
- SQL初心者
- GroupBy知らない人
- 改めてSQLのちょっと複雑な処理復習したい人

## 前提条件
本記事は以下のテーブルを操作することを前提としております。

`select * from city`

id|name|coutryCode|distinct|population
---|---|---|---|---|---
1|Kabl|AFG|Kabol|1780000
2|Qandahar|AFG|Quandahar|237500
3|Herat|AFG|Herat|186800
･･･|･･･|･･･|･･･|･･･

## 早速操作していくよ！
タイトル通り、前提条件で記載したテーブルから、SQLでcountした中からmaxを取得するよ！
具体的には、「一番多いcountryCodeは何か」を調査するよ！

### 1. countryCodeでグループわけして、各countryCodeの出現回数を取得するよ！
```sql
select countryCode, count(*) from city group by countryCode;
```

countryCode|count(*)
---|---
ABW|1
AFG|4
AGO|5
AIA|2
ALB|1
AND|1
ANT|1
･･･|･･･

### 2. 1で分けたグループの中から、最大値を取得するよ！
```sql
select max(cnt) from 
(select countryCode, count(*) cnt from city group by countryCode) num;
```


|max(cnt)|
|---|
|363|

サブクエリはほぼ1と同じですが、少し修正しています。理由として、count(*)に名前付けをしないとmax関数がうまく動作しません。cntと名前をつけるときには、as cntでもOK。

### 3. 1でグループ分けしたデータから、2で抽出した値と同じcountryCodeを取得する。
```sql
select temp.countryCode from 
(select countryCode, count(*) cnt2 from city group by countryCode) temp
    where temp.cnt2 = (
        select max(cnt) from (
            select countryCode, count(*) cnt from city group by countryCode
            ) num
        );
```

|countryCode|
|---|
|CHN|

最初のサブクエリは、1で出力した内容。
where temp.cnt2 = 以降のサブクエリは2で取得した値です。

## 最後に今回のおさらい
countした結果の最大値を取得するのは意外と難しい。。。
ただし、今回のようにサブクエリ１つずつ順を追っていけば理解も深まるかと思います。

気が向いたら、同様のクエリをhaving句やall句などを用いて書き換えてみようと思います。
ご精読ありがとうございました。
[VBA]UTF-8ファイルを出力する

#はじめに
ExcelのデータをUTF-8でエンコードして出力したかったのですが、ファイル操作関連のステートメントや FileSystemObjectで対応しているエンコードは限られておりUTF-8では出力できません。
ActiveX Data Objectsを利用することで、UTF-8などさまざまなエンコードに対応ができそうなので、関数を作成しました。

#準備
Visual Basic Editor のメニューから、[ツール]→[参照設定]で、リストから参照設定する。
・Microsoft ActiveX Data Objects x.x Library (最新バージョンのみでOK)

#実装
```vbnet
Public Sub SaveFile(ByVal filename As String, ByVal text As String, _
                    Optional ByVal enc As String = "UTF-8")
    
    'ファイル出力
    Dim output: Set output = New ADODB.Stream
    output.Type = adTypeText
    output.Charset = enc
    output.Open
  
    output.WriteText text
    output.SaveToFile filename, adSaveCreateOverWrite
    output.Close

End Sub
```
【Swift4】Date()の９時間のズレを調整【Date】


Date()はGMTベースなので日本では９時間ズレます。
単純にシステム日時が欲しい時のためにメソッドをひとつ追加します。

#### Dateを拡張

```swift
extension Date {
    
    func toStringWithCurrentLocale() -> String {

        let formatter = DateFormatter()
        formatter.timeZone = TimeZone.current
        formatter.locale = Locale.current
        formatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        
        return formatter.string(from: self)
    }

}
```
#### テスト

```swift
// 15時に実行

let date = Date()
print(date)
print(date.toStringWithCurrentLocale())

// 2017-12-28 06:00:30 +0000
// 2017-12-28 15:00:30
```
Haskellにおける型クラス制約の役割

最近Haskellの勉強を始めました。そこで最近「なるほど！」と思った**型クラス制約**について説明をしたいと思います。なお記事は対話形式で進められます。

## リストの合計値を求める関数を実装する
私はPMのアランにリストの合計値を求める関数の実装を頼まれます。（既存の関数があるけど、そこは気にしない、むしろHaskellの強みは既存の関数を容易に実装できることにあるのです。）

**アラン**: ヘイ、ヒロト! リストの合計値を求める関数を実装してくれないか
**ヒロト**: オーケイ！そんなの朝飯前ですよ！

```haskell:sum.hs
sum' :: [Int] -> Int
sum' = foldr1 (\x acc -> x + acc)
```

でもこれには問題があります。そう、これは`Int`のリストしか受け付けません。
アランに呼び出されます。

**アラン**: ヒロト！君が実装した関数は`Int`しか受け付けないよ！`Float`や`Double`のリストにも適用できるようにしてくれないか
**ヒロト**： おっけい！**型変数**を使えばいいんだね！

```haskell:sum.hs
sum' :: [a] -> a
sum' = foldr1 (\x acc -> x + acc)
```
しかしコンパイルしようとするとエラーが出ます。

```zsh:error
    • No instance for (Num a) arising from a use of ‘+’
      Possible fix:
        add (Num a) to the context of
          the type signature for:
            sum' :: forall a. [a] -> a
    • In the expression: x + acc
      In the first argument of ‘foldl1’, namely ‘(\ x acc -> x + acc)’
      In the expression: foldl1 (\ x acc -> x + acc)
  |
5 | sum' = foldl1 (\x acc -> x + acc)
  |    
```

これは要するに「`foldl1`関数で要素同士を足そうとしてるけど、`a`は型クラス`Num`のインスタンスじゃないからできないよ！」と言われているのです（違ったら教えてください。。）
そう、`a`は型変数なので数値以外の型(`Bool`や`Char`)などを受け取れるのです。`Char`などを受け取っても合計値を求めることはできません。

そこで**型クラス制約**が出てきます。これによって型変数`a`は型クラス`Num`のインスタンスでなくはならないことを定めることができます。結果、`a`は`Num`のインスタンスであることが確約されるので`Num`で実装されている関数(ここでは加算)が使えるようになります。

```haskell:sum.hs
sum' :: (Num a) => [a] -> a
sum' = foldr1 (\x acc -> x + acc)
```

これで実装が完了しました。

```zsh:sum
*Main> sum' [1,2,3,4,5]
15
```


つまり関数の宣言において型変数を利用する際には、その関数でどのような処理を行うのか、それにはどの**型クラス**のインスタンスである必要があるのかを考慮する必要があります。必要な処理が分かれば**型クラス制約**は導出されます。

最初、型クラス制約を学んだ際にはそこがよくわからなくて、「型クラス制約をすれば、その型クラスの関数が利用できるようになるんだ（微妙に違う)」と思っていました。

## 参考になった記事
[Typeclasses and overloading, what is the connection?
](https://stackoverflow.com/questions/47971360/typeclasses-and-overloading-what-is-the-connection)
Googleの検索結果を一年間で絞り込むブックマークレットを作った

Googleの検索結果を一年間で絞り込むブックマークレットを作りました。


## ソースはこちら
```javascript
javascript:(function(){
  var google = 'www.google.co.jp';
  var url = location.href;
  var param = '&tbs=qdr:y';
  var redirectUrl;
  if(url.indexOf(google) == -1) {
    return;
  }
  if (url.indexOf(param) !== -1) {
    redirectUrl = url.replace(param, '');
  } else {
    redirectUrl = url + param;
  }
  location.href = redirectUrl;
})()
```


### 使い方
まず、上記のURLを、[/packer/](http://dean.edwards.name/packer/) でインライン化しコピー。

その後、適当なページのブックマークをブックマークバーに保存。

次に、保存したブックマークを右クリックして、「編集...」から、名前を適応な名前（私は「あといちねん」としました。）とし、先ほどコピーしたJSをURLの欄にペーストし、保存。

### 使ってみよう
Googleの検索結果画面で作ったブックマークをクリックすると、一年間の記事に絞り込まれます。

また、すでに一年間に絞り込まれている場合は、絞り込みを解除します。

Googleの検索結果画面以外では何もせず返すようになっています。


## なんで作ったの？

以前はChrome拡張の[ato-ichinen](https://chrome.google.com/webstore/detail/ato-ichinen/pojaolkbbklmcifckclknpolncdmbaph?hl=ja) と使っていました。

いつの頃からか、私の環境で動作が悪くなり、反応しないようになってしまいました。。

ないものは作りましょう。


## どうやってるの？
通常時の検索結果と、一年間で絞り込んだ場合のURLを見比べてみると、絞り込んだ方のURLには `&tbs=qdr:y`が付いていることがわかりました。

なので、URLを見て、`&tbs=qdr:y`が含まれていなければつけて、含まれていれば外す、ということをしています。

他にも、
`&tbs=qdr:m`: 一ヶ月
`&tbs=qdr:w`： 一週間
`&tbs=qdr:d`： 24時間
`&tbs=qdr:h`： 一時間
というパラメータが付いていたので、ソースの `var param`の値をいじれば、好きなように絞込みができます。


## 作った感想
URLにパラメータを渡して色々したいということはあると思います。
これを応用したらいろんなことができそうです。

ちなみに今回の作る動機だった ato-ichinen は今回のブックマークレットを作り終わってから使ってみると、問題なく動作しました。。。

まぁ、ブックマークレット作る経験ができたので、よしとします。
Mysql2を通して暗号化したデータをDBにインサートについて

##はじめに
外国人の@rueyjyeです。
二回目の記事です。よろしくお願いします。
今回はmysql2を使って、うまく暗号化したデータをインサートできない件の回避策を書きたいと思います。


## mysql２
https://github.com/brianmario/mysql2
mysql2はrubyのgemです。簡単にDBとやりとりできる便利なgemです。

#### ・使い方
```sample.rb
require 'mysql2'

client = Mysql2::Client.new(:host => "localhost", :username => "root")
results = client.query("SELECT * FROM users")
results.each do |row|
  puts row # {"id"=>1, "name"=>"hoge"}
end

```

## インサートしたいもの
#### ・暗号化処理
opensslを使って、文字列を暗号化したデータをDBにインサートしたいです。

```encrypt.rb
# encoding: utf-8

require 'openssl'

def encrypt(data)
    cipher = OpenSSL::Cipher::Cipher.new("AES-256-CBC")
    cipher.encrypt
    cipher.pkcs5_keyivgen('something')
    enc = cipher.update(data) + cipher.final
    return enc

end

def decrypt(data)
    cipher = OpenSSL::Cipher::Cipher.new("AES-256-CBC")
    cipher.decrypt
    cipher.pkcs5_keyivgen('something')
    dec = cipher.update(data) + cipher.final
    return dec
end

encrypted_data = encrypt('testtest')
p encrypted_data # H9\xC0\x16\xC2o\x9C\xFD\xDB\xBAX\xB3\xC0>J\xFA
decrypted_data = decrypt(encrypted_data)
p decrypted_data # testtest
```
#### ・インサート処理

```sql
sql = 'insert into users (name) values ' + encrypted_data
client.query(sql)
```
インサートは成功しましたか、テーブルの中身を見るとnameは何も入っていない状態です。

## 原因は
```rb
p encrypted_data.encoding #<Encoding:ASCII-8BIT>
```
最初はエンコーディングの問題と思いますが、
でもDBのエンコーディングをasciiに変更してもデータが入れません。

おそらくmysql２はインサートするものをsql文の中に書けて実行する。文字列にしてインサートするでこと。
なら　\　を使ってエスケープすればいいと思ったけど、もう一回インサートすると

```
H9xC0x16xC2ox9CxFDxDBxBAXxB3xC0>JxFA　　
```
バックスラッシュが消えました。。。。

調べたら下記の記事を見つかりました。
[Ruby Mysql2 Client not taking backslash while insert
](https://stackoverflow.com/questions/38742993/ruby-mysql2-client-not-taking-backslash-while-insert)
\ is likely being removed by the MySQL2 client as part of a SQL injection protection preprocessor.
セキュリティー対策のため、バックスラッシュが対応していないです。

## 回避策
根本的な原因はmysql2がバックスラッシュが対応していないから、バックスラッシュないもの入れたらいいかなと思いました。

それなら16進数に変換しよう

```encrypt.rb
# encoding: utf-8

require 'openssl'

def encrypt(data)
    cipher = OpenSSL::Cipher::Cipher.new("AES-256-CBC")
    cipher.encrypt
    cipher.pkcs5_keyivgen('something')
    enc = cipher.update(data) + cipher.final
    return enc.force_encoding('UTF-8').unpack("H*")[0]
end

def decrypt(data)
    cipher = OpenSSL::Cipher::Cipher.new("AES-256-CBC")
    cipher.decrypt
    cipher.pkcs5_keyivgen('something')
    d = []
    d.push(data)
    dec = cipher.update(d.pack("H*")) + cipher.final
    return dec
end

encrypted_data = encrypt('testtest')
p encrypted_data # 4839c016c26f9cfddbba58b3c03e4afa
decrypted_data = decrypt(encrypted_data)
p decrypted_data # testtest
```
これでDBにインサートをできました。

もしかしたら私の調査不足かもしれませんが、最後は無事にDBにインサートできるでよかったです。


## 参考
[mysql2](https://github.com/brianmario/mysql2)
[Ruby Mysql2 Client not taking backslash while insert
](https://stackoverflow.com/questions/38742993/ruby-mysql2-client-not-taking-backslash-while-insert)
GSuite Business使用時のGoogleDriveアップロードの制限

# GoogleDriveのアップロード制限

Google ドライブにファイルやフォルダをアップロードする
https://support.google.com/drive/answer/2424368?hl=ja

によれば
>注: 1 つのアカウントにつき、1 日に最大 750 GB までアップロードできます。

(2017/12/28現在)

と書かれている。

………え？「俺の所にはそんな事書かれてない」って？


というトラップに引っ掛かった話。

# Googleのサポートページの罠

どうやらGoogleのサポートページはログインしているアカウントによって表示される内容が変化するらしい。
つまり上記の記述は、GSuite Businessのアカウントでログインしていないと現れない。

事前に調べていた際は存在しなかった記述が、サポートから提示された同一URLでは内容が追加されていて驚いた。
サポートに連絡した際は管理者アカウントでログインしたので、そこで初めて気づいた次第。
実は熟練GSuite管理者だったら良く知られた話なのかもしれない。

無料Gmail、GSuite Basic、GSuite Businessの3つを使い分けているレアな人はご注意を。
さくらのクラウド ウェブアクセラレータ（CDN)とAWS S3を組み合わせて使う

個人ブログに移動しました。

[さくらのクラウド ウェブアクセラレータ（CDN)とAWS S3を組み合わせて使う](https://blog.masa23.jp/posts/2018/12/wwebaccel-aws-s3/)
Shadertoy はじめました week #5

![20171228_135711.png](https://qiita-image-store.s3.amazonaws.com/0/2585/c1354be7-3c1b-1015-504c-f4b499f61473.png)
[Shadertoy : Escher's Cubes](https://www.shadertoy.com/view/ltjBzz)

# Week #5
以前からやってみたかった[不可能立体](https://ja.wikipedia.org/wiki/%E4%B8%8D%E5%8F%AF%E8%83%BD%E5%9B%B3%E5%BD%A2)の Shader Art に挑戦しました。不可能立体といえばエッシャーだろ、位のノリで適当な名前を付けてしまいましたが、[ペンローズの三角形](https://ja.wikipedia.org/wiki/%E3%83%9A%E3%83%B3%E3%83%AD%E3%83%BC%E3%82%BA%E3%81%AE%E4%B8%89%E8%A7%92%E5%BD%A2)と呼ぶそうです。
[今年の WebGL アドベントカレンダーで doxas さん](https://qiita.com/doxas/items/8490976ea91cc0e2658c)が作成してた[glslfan](https://glslfan.com/?channel=-L1PtF8K3w6c5YjFQUCi)というシェーダ配信サイトで遊んでいて、思い付きで作ってみました。違和感をなくすように微妙な数値調整をリアルタイムに出来るのは、なかなか楽しかったです。[物理的に可能な方法](https://twitter.com/mike_at_cg/status/946203297752408064)と、[レイトレース計算をいじる方法](https://twitter.com/mike_at_cg/status/946205879816171521)の2種類があるのですが、物理的に可能な方法の方が脳が理解できるので面白いと思いました。ただ、Shader Art のノウハウ的には後者の方が面白いので、そこら辺も記事にしてみたいです。

# Tips #5
成果物5つ目です。
[Shadertoy : Escher's Cubes](https://www.shadertoy.com/view/ltjBzz)
[透過物体](https://qiita.com/keim_at_si/items/2fb0ff70527afdd8fd2e)以上にニッチなジャンルですが、ゆっくりとノウハウを記事にしていければと思ってます。
- glslfan (GLSL sandbox) と Shadertoy でソースの共通化
- 不可能立体で違和感をなくす、シェーディング、ライティング
- レイトレースで不可能立体を再現するトリック
- 簡易反射レイトレーサー
RSpecのController SpecからRequest Specへの移行

業務でRuby on Rails(5.1.4)アプリのテストを書いている。ControllerのテストはController Specというので書いていたのだが、これは徐々に非推奨になっていくからRequest Specにしろ（やボケ）と公式に書いてあったので、その２つがどう違うのか理解しつつメモしておく（2017-12-28現在の情報)。

ちなみに私はオブジェクト指向やテスト駆動については一通り知っているが、rubyを本格的に触り始めて3か月のへっぽこrubyistなので、railsの思想的背景やrubyならではの事情に詳しくない。

### 非推奨になった事情

- http://rspec.info/documentation/3.7/rspec-rails/#label-Controller+Specs
- http://rspec.info/blog/2016/07/rspec-3-5-has-been-released/#rails-support-for-rails-5
 - 確かに、突然assignsって叩いてチェックするテストはなんだかなー、テストコードださいなー、と思っていたので、ちょうど良い。
 
## Request Specとは(公式)

- http://rspec.info/documentation/3.7/rspec-rails/#label-Request+Specs

まずは、このサンプルコードをコピペして、自分のプロジェクトで動くようにカスタマイズするとよいと思う。雰囲気はわかる。

### よく知っている人の情報（英語）を探す

**rspec controller spec deprecated** でググったら一番に出てきたのがこれ。
https://everydayrails.com/2016/08/29/replace-rspec-controller-tests.html
１年ほど前（2016年8月）の記事だがそんなに変なこと言ってなさそうなので、以下、これをかいつまんで話す。

- 著者はこの人。https://www.aaronsumner.com/ 
 - RailsやRSpecのコミッタではないが、それなりに信頼できる人だと思われる。ググった情報を読むときに超重要なのは、該当事項をよく理解している人が書いた記事かどうか。

## 記事の概要

コードは[記事そのもの](https://everydayrails.com/2016/08/29/replace-rspec-controller-tests.html)を見てほしい。
Request Specの利点（**太字**は私の感想）

- Controllerのメソッドを直で叩くのではなく、アプリケーションのエンドポイントを直に文字列指定もしくは変数による指定で叩ける。これによって、routeの設定ファイルがきちんと設定できていることや、変数がアプリ的に認識されていることもテストできる。
 - **この方が、クライアント側から実際に疎通することをより正確に確認できる。**

ちなみにこの記事にはPart 2, 3とあり、3はつい先月出た。

 - [Part 2](https://everydayrails.com/2016/09/05/replace-rspec-controller-tests.html) は、すでにassignsをボコボコ書いてるテストを移行するなら[capybara](https://github.com/teamcapybara/capybara)と[Feature Spec](https://relishapp.com/rspec/rspec-rails/v/3-4/docs/feature-specs/feature-spec)を使えという話。**これは次PJでやってみたい。**
 - [Part 3](https://everydayrails.com/2017/11/20/replace-rspec-controller-tests.html) は、テストどうこうというよりは、Controllerからビジネスロジックを排除してModelに書く話。長いけど、後半に業務ロジックごとにクラスを分ける話(Service Objectと言うらしい)が出てきて興味深い。全然知らなかったけど、10月ぐらいからRails界隈で議論になっているそうな（[これ](https://avdi.codes/service-objects/)とか[その反論](https://aaronlasseigne.com/2017/11/08/why-arent-we-using-more-service-objects-already/)とか）。**これはこれで別記事としてまとめたい。**
Android Studioでkotlin,kotlinxパッケージを利用出来るようにする

単純にKotlinプラグイン入れてもすぐ使用できないので記載しておきます。
kotlinとkotlinxがimport出来るようになります。

| ツール | バージョン |
|:-:|:-:|
| Android Studio  | 3.0.1  |


# **1. Kotlinプラグインのインストール**
[File]-[Settings]-[Plugins]から"kotlin"で検索。
Kotlin開発元であるJetBrainsのプラグインがあるのでインストールします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/226435/94937ad8-91f5-20a7-3dfa-45b9cd5e9d3b.png" width=80%>

インストールしたらAndroidStudioを再起動。

# **2. MainActivityをKotlinファイルへコンバートする**
1. MainActivityファイルを選択
2. [Code]-[Convert Java File to Kotlin File]を選択する
<img src="https://qiita-image-store.s3.amazonaws.com/0/226435/6f804785-198f-db81-e510-6eb1566f2e0b.png" width=60%>

MainActivity.javaからMainActivity.ktになっている事を確認する。


# **3.build.gradleにkotlin情報を自動記述**
1. [Tools]-[Kotlin]-[Configure Kotlin in Project]をクリック
2. [Cofigure Kotlin with Androlid with Gradle]が表示されるのでそのままOK

<img src="https://qiita-image-store.s3.amazonaws.com/0/226435/4e613e77-ba5d-3cb0-ab6d-5eda36fc91e2.png" width=60%>


3.下記の様なバーが表示されるので右の[Sync Now]を押下する
<img src="https://qiita-image-store.s3.amazonaws.com/0/226435/5e2c7547-f69f-0920-10a5-f853efeea5fd.png" width=80%>

この時点で"kotlin"はimport出来ますが、"kotlinx"はエラーになります。
なので、build.gradleに情報を追記しましょう。

# **5."kotlinx"を利用出来るようにする**
## 5-1. build.gradle(Project:~)の編集
~~下記コードをdependencies内に追加する~~
<font color="Red">追記: 確認してみたところこのコードを追加しなくても問題ありませんでした。</font>
**classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"** 


```build.gradle
android {
    - 省略 -
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
　　}
　　- 省略 -
 }
```



## 5-2. build.gradle(Module:~)の編集
下記コードを追加する
**apply plugin: 'kotlin-android-extensions'**

```build.gradle
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
```
## 5-3.再度Syncする
先程と同様にバーが表示されるのでSyncします。
これでkotlinxも使用可能になるはずです。

# **6. 参考サイト**
・Android開発ではじめるKotlin
https://qiita.com/Kogarasi/items/4bd0a37763b057e9d796
・Android Studioを利用してKotlinでHello Worldを表示する
http://takedajs.hatenablog.jp/entry/2017/05/21/224614
・“Unresolved reference kotlinx” エラー
https://ja.stackoverflow.com/questions/14890/unresolved-reference-kotlinx-%E3%82%A8%E3%83%A9%E3%83%BC
Node.insertBefore を使って insertAfter する

生 DOM API では insertBefore はありますが、insertAfter はありません。
ある DOM の1個後ろに新しいアイテムを追加したい場合は、次のように書くことで処理を実現できます。

```js
target.parentElement.insertBefore(newItem, target.nextSibling)
```

上で、 `target` は1個後ろにアイテムを追加したい基準の dom です。target が兄弟 dom の中で一番最後のアイテムだったとしても上の書き方で OK です。その場合は、 `target.nextSibling` が null になって、その場合は insertBefore の仕様で、newItem はリストの中の一番最後に挿入されます。

以下のようなヘルパー関数を作ると便利かもしれません。

```js:insert-after.js
function insertAfter(newItem, target) {
  target.parentNode.insertBefore(newItem, target.nextSibling);
}
```

参考: https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib
How to configure SSD in ESXi 6.5

### Symptom

With internal SSDs configured as RAID, ESXi 6.5 U1 treats as HDD, not as SSD...


```
[root@localhost:/vmfs/volumes] esxcli storage nmp device list
naa.60030057023a36a01ef6a8bd2e3c7c26
   Device Display Name: Local FTS Disk (naa.60030057023a36a01ef6a8bd2e3c7c26)
   Storage Array Type: VMW_SATP_LOCAL
   Storage Array Type Device Config: SATP VMW_SATP_LOCAL does not support device configuration.
   Path Selection Policy: VMW_PSP_FIXED
   Path Selection Policy Device Config: {preferred=vmhba2:C2:T0:L0;current=vmhba2:C2:T0:L0}
   Path Selection Policy Device Custom Config: 
   Working Paths: vmhba2:C2:T0:L0
   Is USB: false

mpx.vmhba1:C0:T4:L0
   Device Display Name: Local TSSTcorp CD-ROM (mpx.vmhba1:C0:T4:L0)
   Storage Array Type: VMW_SATP_LOCAL
   Storage Array Type Device Config: SATP VMW_SATP_LOCAL does not support device configuration.
   Path Selection Policy: VMW_PSP_FIXED
   Path Selection Policy Device Config: {preferred=vmhba1:C0:T4:L0;current=vmhba1:C0:T4:L0}
   Path Selection Policy Device Custom Config: 
   Working Paths: vmhba1:C0:T4:L0
   Is USB: false

naa.60030057023a36a021d6f2c21a392021
   Device Display Name: Local FTS Disk (naa.60030057023a36a021d6f2c21a392021)
   Storage Array Type: VMW_SATP_LOCAL
   Storage Array Type Device Config: SATP VMW_SATP_LOCAL does not support device configuration.
   Path Selection Policy: VMW_PSP_FIXED
   Path Selection Policy Device Config: {preferred=vmhba2:C2:T1:L0;current=vmhba2:C2:T1:L0}
   Path Selection Policy Device Custom Config: 
   Working Paths: vmhba2:C2:T1:L0
   Is USB: false
```



### How to fix


```
[root@localhost:/vmfs/volumes] esxcli storage nmp satp rule add -s VMW_SATP_LOCAL --device naa.60030057023a36a021d6f2c21a392021  --option=enable_ssd
```

cf.

```
[root@localhost:/vmfs/volumes]esxcli storage nmp satp rule remove -s VMW_SATP_LOCAL --device naa.60030057023a36a021d6f2c21a392021

[root@localhost:/vmfs/volumes] esxcli storage core claiming unclaim --type device --device naa.60030057023a36a021d6f2c21a392021 

[root@localhost:/vmfs/volumes] esxcli storage core claimrule load

[root@localhost:/vmfs/volumes] esxcli storage core claimrule run
```

![2017-12-28_134548.jpg](https://qiita-image-store.s3.amazonaws.com/0/114634/ff952a07-571a-15c2-9c14-0ab76a6aece7.jpeg)


:thumbsup:
オープンソースのJavascriptプロジェクト 5選

![1__w0EBzHpNi_qsTdyt_54bA.png](https://qiita-image-store.s3.amazonaws.com/0/200848/09725d78-ae68-0ace-9680-a24a8b0c96de.png)

GitHubで公開されているオープンソースの人気Javascriptプロジェクトを紹介していきます🌟

# No.1
#### [Chalarangelo / 30-seconds-of-code](https://github.com/Chalarangelo/30-seconds-of-code) 
![chalarangelo-30-seconds-of-code-640x274.png](https://qiita-image-store.s3.amazonaws.com/0/200848/1aa52292-0dd8-651a-e80d-6c8b68fd1e64.png)

30秒以内に理解できる有用なJavascriptスニペットの整理されたコレクション。
Star:12,556🌟

# No.2
#### [danilowoz / react-content-loader](https://github.com/danilowoz/react-content-loader) 
![33861377-b0d5a560-dec4-11e7-825e-f6209591309b.jpg](https://qiita-image-store.s3.amazonaws.com/0/200848/5db39a84-d0d6-ef45-9d61-f001c1f57d42.jpeg)
 
SVGを使用して、Facebookカードローダーと同様にロードされるコンテンツの構造をシミュレートするローダーのコレクションを作成するコンポーネントを使用します。
Star:2,637🌟

# No.3  
#### [parcel-bundler / parcel](https://github.com/parcel-bundler/parcel)  
![1*-Tcq85crClCEu_gYzn06gg.gif](https://qiita-image-store.s3.amazonaws.com/0/200848/e04d905f-2a37-007b-543c-9c25dd2a9279.gif)
急速にWebアプリケーションバンドラの設定をする
Star: 13,267🌟  

# No.4  
#### [google / boardgame.io](https://github.com/google/boardgame.io)
<img width="451" alt="スクリーンショット 2017-12-27 17.52.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/200848/6811d368-995f-759c-f013-7ba499b24996.png">  
状態管理など、ターンベースのゲームにも適しています。
Star:4,580🌟
  
# No.5  
#### [facebook / Docusaurus](https://github.com/facebook/Docusaurus)
![26-1514286444.png](https://qiita-image-store.s3.amazonaws.com/0/200848/3e2a2e3f-b5e0-5b0c-ad35-66f16349779a.png)
オープンソースのドキュメンテーションWebサイトを簡単に管理できます。
Star:2,860🌟 

---

Curated by [Boostnote](https://boostnote.io/ja)
[GitHub](https://github.com/BoostIO/Boostnote/issues)
[Twitter](https://twitter.com/boostnoteapp)
[Facebook group](https://www.facebook.com/groups/boostnote)
二進数でフィボナッチ数列を考える

先ほど [C 言語での二進数表示のアイデアメモ](https://qiita.com/ryohji/items/5a7aa375c134528fc7c4) を書いた直後にツイッターを眺めていたら、以下の記事が流れてきました。

[15歳女子が「フィボナッチ数列は２進数でも美しいのか」を考察 算数・数学の自由研究作品コンクール「MATHコン」で日本数学検定協会賞を受賞](http://www.su-gaku.net/press_release/detail.php?id=51)

このシンクロニシティを無駄にしてはならぬと、とりあえず 45 番目まで二進数で表示してみました。
何か見えてくるのでしょうか？

# 二進数フィボナッチ数列
```text
00000000-00000000-00000000-00000001 1
00000000-00000000-00000000-00000001 1
00000000-00000000-00000000-00000010 2
00000000-00000000-00000000-00000011 3
00000000-00000000-00000000-00000101 5
00000000-00000000-00000000-00001000 8
00000000-00000000-00000000-00001101 13
00000000-00000000-00000000-00010101 21
00000000-00000000-00000000-00100010 34
00000000-00000000-00000000-00110111 55
00000000-00000000-00000000-01011001 89
00000000-00000000-00000000-10010000 144
00000000-00000000-00000000-11101001 233
00000000-00000000-00000001-01111001 377
00000000-00000000-00000010-01100010 610
00000000-00000000-00000011-11011011 987
00000000-00000000-00000110-00111101 1597
00000000-00000000-00001010-00011000 2584
00000000-00000000-00010000-01010101 4181
00000000-00000000-00011010-01101101 6765
00000000-00000000-00101010-11000010 10946
00000000-00000000-01000101-00101111 17711
00000000-00000000-01101111-11110001 28657
00000000-00000000-10110101-00100000 46368
00000000-00000001-00100101-00010001 75025
00000000-00000001-11011010-00110001 121393
00000000-00000010-11111111-01000010 196418
00000000-00000100-11011001-01110011 317811
00000000-00000111-11011000-10110101 514229
00000000-00001100-10110010-00101000 832040
00000000-00010100-10001010-11011101 1346269
00000000-00100001-00111101-00000101 2178309
00000000-00110101-11000111-11100010 3524578
00000000-01010111-00000100-11100111 5702887
00000000-10001100-11001100-11001001 9227465
00000000-11100011-11010001-10110000 14930352
00000001-01110000-10011110-01111001 24157817
00000010-01010100-01110000-00101001 39088169
00000011-11000101-00001110-10100010 63245986
00000110-00011001-01111110-11001011 102334155
00001001-11011110-10001101-01101101 165580141
00001111-11111000-00001100-00111000 267914296
00011001-11010110-10011001-10100101 433494437
00101001-11001110-10100101-11011101 701408733
01000011-10100101-00111111-10000010 1134903170
```

1bit 目は 1, 1, 0 の 3 拍子、 2bit 目は 0, 0, 1, 1, 0, 0 の 6/8 拍子、になっているようです。
下の桁の繰り上がりも影響しそうなものですが、 N bit 目についてそれぞれ 3 * N 倍周期の規則性が見えそうです。

# ソースコード
上記二進数表示は、以下のコードで生成しました。 (long の代わりに long long を使えばもっと出せますね)

```c
#include <stdio.h>

#define OCB(c) (c&1)|(c&2)<<2|(c&4)<<4|(c&8)<<6|(c&16)<<8|\
(c&32)<<10|(c&64)<<12|(c&128)<<14

int main() {
  long prev = 0, fib = 1;
  char *const pf = (void*) &fib;

  int loop = 45;
  while (loop --) {
    const long next = prev + fib;
    printf("%08o-%08o-%08o-%08o %ld\n",
           OCB(pf[3]), OCB(pf[2]), OCB(pf[1]), OCB(pf[0]), fib);
    prev = fib , fib = next;
  }

  return 0;
}
```

> **変更** 2017.12.30
> 8 進数を媒介して都度計算するようにし、二進数変換テーブルを削除。
Visual Studio 2017でMVCプロジェクトにnpmを導入する

ASP.NET MVCでは、JavaScriptライブラリとして[Knockout.js](http://knockoutjs.com/)が付属していた時期が続きました。

時間の経過っともに、Knockout自体はメンテナンスされているものの、大幅なバージョンアップはされないような感じになっています。
その背景から、モダンなJavaScriptライブラリとの親和性が無かったりと、なかなか使いづらくなってきました。
そこで、最近のメジャーなスタックを使って改修できないかといろいろと検討していたところ、[Vue.js](https://github.com/vuejs/vue)が良さげということなので、ASP.NET MVCプロジェクトに導入する方法をまとめました。

## Nugetでインストール
当然ながらはじめは、Nugetでインストールを試みました。（この段階でちょっと不安ありましたが）
Visual Studioのパッケージマネージャーから検索し、まずは本体をインストール。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/226944/8623f04a-e2fa-0563-5207-b627ba3caca2.png)

次に型定義ファイルもインストールします。(もはやピュアなJavaScriptでの開発は出来ない体なのです)
残念ながらバージョンが古すぎる。メンテナンスがされていないようです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/226944/76dd0ef7-abea-5f9b-3611-e6b6b20656b8.png)

と、Nugetでのパッケージ管理を諦めることになりました。

## npmでインストール
であれば、[Vue.jsの更新サイト](https://jp.vuejs.org/v2/guide/installation.html)にあるように普通にnpmパッケージでライブラリを管理を試してみました。
Visual Studio上では標準でnpmをサポートしていないようです。([bower](https://bower.io/)はあるのに)

そのため、拡張機能で検索すると、「Package Installer」なる機能がありました。
ダウンロード数もまずまずです。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/226944/b5fd5f76-650b-0bc8-756d-ed4c961a9a38.png)

### インストール方法
プロジェクトを右クリックし「Quick install Package」を選択
管理パッケージでnpmを選択し、インストールしたいパッケージ名を入力後、バージョンを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/226944/a39e0159-dd17-99c0-c30e-bcd6b08c104b.png)

無事、インストールできました。
また、自動でpacakge.jsonも作成され、MVCプロジェクトの管理対象となります。
インストールされるnode_modules配下はプロジェクト管理対象外となっています。

npmで管理されてるVue.jsはデフォルトで型定義ファイルをサポートしているので、これで問題解決です。

#### 再インストール
pacakge.jsonを右クリックし「パッケージの復元」を選択すると、再インストールできます。

今後クラシックなASP.NET MVCであってもクライアントライブラリはnpm管理が良さそーです。
これで、やりたいこと全部できましたが、今後はタスクランナーとかでwebpackとかと連動させて見ようと思います。

次回は、Vue.JS周りの記事を書いていこうと思います。
psqlでログインするときのパスワード入力を省略する

# PostgreSQLでパスワード認証せずにログイン

PostgreSQLでpsqlでログインをする際は、MySQLと違ってパスワード入力を求められてしまってスクリプトを連続で実行することができない。
そうなるとバッチ処理の実施などにも影響が出てしてしまうが、下記二つの方法で回避できることが確認できた。

## .pgpassで対応する方法

１．実行したいユーザのHOMEディレクトリにてviコマンドで「.pgpass」ファイルを作成する。

```
vi .pgpass
```

２．以下の書式に沿ってファイルに接続情報を記載していく。
　　複数定義したい場合は同様の書式で複数行記述していくだけ。
　　コメントアウトはシェルなどと同じく「#」を行頭につける。

```
ホスト名:ポート:データベース名:ユーザ:パスワード
例)：192.168.1.111:9876:postgres01:dba_user:password
```

※ホスト名、ポート、データベース名には「*」も指定可能。
　「*」を指定した場合の意味は、いずれも可(制限なし)となる。

３．作成した「.pgpass」ファイルの権限を **600** に変更する。

```
chmod 600 .pgpass
```

※「.pgpass」を作成してもパーミッションが600でないとワーニングとなってしまい、パスワードの入力を求められてしまうので注意。

```
# psql -d postgres01 -h 192.168.1.111 -U dba_user
WARNING: password file "/root/.pgpass" has group or world access; permissions should be u=rw (0600) or less
Password for user dba_user:
```

※.pgpassを配置するディレクトリについては「PGPASSFILE」という環境変数で設定を変更することが可能。

## 環境変数を利用する方法

１．psqlはPASSWORDという変数が設定されているとそのパスワードを取りに行く動作の様なので、
　　「PGPASSWORD」という環境変数を事前に設定しておくことでもパスワード認証を省略可能。
　　「.bash_profile」などに事前に設定しておくと手間が省けて尚良し。

```
export PGPASSWORD=password
```

※「PGPASSWORD」はマニュアル的には非推奨の模様だし、環境変数なので複数のDBユーザーをまとめて記載できない。
　そこら辺を考えると「.pgpass」を使用する方が個人的にもお薦めかと･･･。


## 参考

[PostgreSQL 9.1.5文書　31.13.環境変数](https://www.postgresql.jp/document/9.1/html/libpq-envars.html)
[【PostgreSQL】psqlにてパスワードを省略する方法](https://kaede.jp/2015/10/27002723.html)
よく使うコマンドランキングを出す

## よく使うコマンドランキングを出す

* 下記の記事を見ていて面白かったので、やってみました。
  * https://dev.classmethod.jp/devenv/cm-shell-2017/

```sh
history | awk '{print $2}' | sort | uniq -c | sort -nr | head -n 5

  70 powershell
  61 ls
  47 vim
  35 irb
  32 aws

```

今年はPowershellで勉強会したから、ですね。
https://www.slideshare.net/TetsuYama/powershell-v4


休暇中に目次をつけて整頓して最終バージョンにする予定です。
まだまだ2017年はやることがたくさん！
０が多いカウントデータの回帰分析 ZIP　Rで分析

０が多いようなカウントデータを分析したり、予測したりするには１手間必要だったりします。例えば　[六本木で働くデータサイエンティストのブログ](http://tjo.hatenablog.com/entry/2013/09/18/235052)とかではポワソン回帰・負の二項分布の使いわけを説明されています。
ただ実業務で割と多いのが、０回がほとんどで１回がちょっと多い、それからさらに少なくなるといった以下のような対数正規分布みたいなデータを扱う事が多く、なんかいいやり方ないかなぁと調べるとZIP(Zero-inflated model)というのがあるようなので備忘録がてら比較しておきます。


```
library(pscl)
library(boot)
data(fir)
set.seed(123)

table(fir$count)
# 学習用と検証用でデータ分割
learn_idx <- sample(1:nrow(fir),nrow(fir)*0.8)
learn_data <-  fir[learn_idx,]
eval_data <- fir[-learn_idx,]


## ポワソン回帰/ZIP/通常回帰を比較
glm1 <- glm(count ~ ., data = learn_data, family =  poisson)
lm_result <- lm(count ~ ., data = learn_data)
zip <- zeroinfl(count ~ . | ., data = learn_data)
lm_pred_result <- predict(lm_result,eval_data)
zip_pred_result <- predict(zip,eval_data)
glm_pred_result <- predict(glm1,eval_data)

mean(abs(lm_pred_result-eval_data$count))
mean(abs(zip_pred_result-eval_data$count))
mean(abs(glm_pred_result-eval_data$count))

AIC(lm_result)
AIC(glm1)
AIC(zip)

# もうちょっと０が多いデータで再チャレンジ
data(bioChemists)
table(bioChemists$art)

# 学習用と検証用でデータ分割
learn_idx <- sample(1:nrow(bioChemists),nrow(bioChemists)*0.8)
learn_data <-  bioChemists[learn_idx,]
eval_data <- bioChemists[-learn_idx,]

glm1 <- glm(art ~ ., data = learn_data, family = poisson)
lm_result <- lm(art ~ ., data = learn_data)
zip <- zeroinfl(art ~ . | ., data = learn_data,EM=TRUE)
lm_pred_result <- predict(lm_result,eval_data)
zip_pred_result <- predict(zip,eval_data)
glm_pred_result <- predict(glm1,eval_data)

mean(abs(lm_pred_result-eval_data$art))
mean(abs(zip_pred_result-eval_data$art))
mean(abs(glm_pred_result-eval_data$art))

AIC(lm_result)
AIC(glm1)
AIC(zip)
```
psclライブラリーのzeroinfl関数で実行できます。ポワソン回帰・線形回帰・ZIPで比較します。bootライブラリーはデータ用のライブラリーです。
最初にfirデータのカウントを予測しますが、firデータは0以外が多いときはポワソン回帰の性能がよさそうですが、AICだと微妙にZIPのほうがよさげです。bioChemistsデータは０が多いものになるとやはりZIPのほうが精度的にも良くなります。
Office 2016 のインストーラーを強制終了したら次回セットアップ時大変な目にあった

Office2007が入っているwindows7にoffice2016インストーラーを起動した直後に
「office 2007をアンインストールしてからoffice2016インストーラーを起動すればよかった」
と思い、2016のインストーラーを終了しようとするも終了できなかった。

すかさずタスクマネージャーからインストーラーを終了。
それでもまだプロセスが残るのでOS強制再起動。

そして次回セットアップをしようとしたら以下 0-1036(0)エラーに遭遇。
マイクロソフトのホームページから取得できるアンインストーラーできれいに消した後でも問題が解決しないため以下ホームページのとおりレジストリ情報を削除した。

[Microsoft Office error code 0-1036 (0) - Microsoft Support](http://microsoftsupport.cc/microsoft-office-error-code-0-1036-0/)

インストールできた。
Windows10でTensorFlow(GPU版）とKerasをセットアップする

# はじめに
Windows10とTensorFlow1.4でGPU版をインストールしたところバージョン依存に苦しめられたのでメモします。

# 環境
1. ALIENWARE 15（R3）
    - Windows 10 Professional
    - NVIDIA GeForce GTX 1060 6GB GDDR5
    - Core i7-7700HQ

# TensorFlow GPU版の注意点
TensorFlowのインストールガイドを見てもらうとわかるのですがTensorFlowのGPU版はCUDA, cuDNNのバージョン依存があります。
今回インストールするTnesorFlowの1.4ではCUDA 8.0, cuDNN6.0が必要です。
またCUDAはVisualStudioのバージョン依存があるのでこちらも組み合わせに注意しましょう。

# インストールするもの
1. [Anacond](https://www.anaconda.com/download/) の最新版
2. [Visual Studio 2015](https://www.visualstudio.com/ja/vs/older-downloads/)
    - 最新版ではなく2015が必須！昔のバージョンをダウンロードする場合はアカウント作成とVisual Studio Dev Essentialsへの登録が必須です。
3. [CUDA Toolkit 8.0](https://developer.nvidia.com/cuda-80-ga2-download-archive)
    - 最新版ではなく8.0が必須！
4. [cuDNN v6.0 (April 27, 2017), for CUDA 8.0](https://developer.nvidia.com/rdp/cudnn-download)
    - nVIDIAへのアカウント登録が必須です。cuDNN v6.0 Library for Windows 10をダウンロードして解凍しておきます。
5. TensorFlow GPU 1.4
6. Keras 2.1

# インストール手順
1-3はインストーラがあるのでそのまま手順に従ってインストールしましょう。
4は解凍先のbinファイルを環境変数のPATHに突っ込む必要があります。
5-6はAnaconda Promptから`pip install tensorflow-gpu`と`pip install keras`でいけます。

# インストール中に発生したトラブル
KerasでTensorflowのGPU版を動かすと、TensorFlow内の関数でDLLのロードができないエラーが発生しました。
こちらはCUDAのインストールがうまくいっていない、CUDAのバージョンがあっていない、cuDNNのバージョンがあっていないことが原因だったのでもしDLL関連のエラーが発生した場合は、各バージョンとインストールが正しくできているか最初から確認しましょう。

# 最後に
GPU使うと爆速すぎてこれ以外でDeepLearningは考えられない
React + Reduxでアプリを作るときのパフォーマンスチューニングどうするか問題

## 初めに
- 説明下手です
- なんだその実装は的なものがあるかもしれません
- ガチ勢からの突っ込み待ってます

## PureComponentは有効なのか
v15.3にてshallowな比較を行うPureComponentが追加されました。
自分のプロダクトでもさっそく使用し、ログインにかかる時間を計測してみましたが、
```
Component 717.5300000000007 ミリ秒
PureComponent 876.8950000000004 ミリ秒
```
Componentに比べ**微増**という結果になりました。
その他、PureComponentを使用したことによる表示に関する不具合も発生したため、
結果PureComponentの使用を諦めることにしました。

お前の実装がク〇だから速度出ないんだよ！という突っ込みもあるかと思いますが、
コーディングスキルが均一でない現場で、
確実な効果が出るか分からないものを使うのは気が引けたのでこのような判断をしました。

## shouldComponentUpdateのチューニング

```js
import deepEqual from 'fast-deep-equal'

export default class ReactComponent extends Component {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !deepEqual(this.props, nextProps) || !deepEqual(this.state, nextState)
  }
```
参考：http://sssslide.com/speakerdeck.com/masashi/spawopahuomansutiyuningusitahua

これが理想でしたが、当方でこれをやったところ動かなくなる事件が多発し断念
開発の途中でチューニングコードを入れたのがまずかったので、
最初からチューニングコードありきで動くものを作る。

## それ本当にReduxに乗せる必要ある？問題
Actionがdispatchされると、Storeに登録されているReducerすべての関数が実行されます。
100個Reducerが登録されていれば100個のswitch文がブン回っているわけです。
この処理は削れるなら削っておきたいです。
APIの取得結果を複数の画面で使用する場合ではReduxの仕組みは有効だと思います。
しかし、例えば1か所で1回しか使わないデータをStoreにずっと持っておいたり、
どう考えても関係ないReducerに渡ったりするのは無駄に感じます。
そこでAPIの結果をdispatchせずにactionでreturnしてしまうという実装を割とやっています。

```js
// HogeAction
export function getData(param) {
  return async dispatch => {
    const result = await callAPI(param);

    // dispatchしない
    /*
    dispatch({
      type: REDUX_GET_DATA,
      result
    })
    */

    return result
  }
}

// React.Component
class HogePage extends Component {
  doSomething = param => {
    (async () => {
      const result = await this.props.hogeActions.getData(param);

      // ごにょごにょ
    })()
  }
}

// 略

export default connect(mapStateToProps, mapDispatchToProps)(HogePage)
```

## まとめ
- 最初からチューニングのコードは入れておく
- PureComponentは効果があるときだけ使う
- Reduxに乗せる必要のないものは載せない
Javaトラブルシューティングに役立ちそうなツールやコマンド


# Javaトラブルシューティングに役立ちそうなツールやコマンド

- 自分のためにまとめました
- https://qiita.com/YN0314/items/5e5c57d52ac1379daf6d
- https://qiita.com/i_matsui/items/4997ebedbdd7a6495509
- https://qiita.com/i_matsui/items/aabbdaa169c6ae51ecb3
- https://qiita.com/i_matsui/items/0d1ae2c7e9d17b6c04e0
- ↑記事を参考に見ました

## Javaプロセス一覧(jps)

javaのプロセス一覧が観れる

```
$JAVA_HOME/bin/jps

# -vでより詳細に見れる。起動時渡したオプション等
```

```
97312 RemoteMavenServer
97399 WSSampleMain
97398 Launcher
97403 Jps
81229 sbt-launch.jar
97005
97324 NailgunRunner
```

## スタックトレース(Thread dump) (jstack)

```
$JAVA_HOME/bin/jstack $プロセス番号

# -F でハングしてるプロセスでも取りに行ける

```


## heap dump(jmap)
jmapコマンドで取れる

```
$JAVA_HOME/bin/jmap -histo $プロセス番号
# メモリ上に何のオブジェクトがいくつ？サイズどんなもん？をだす

$JAVA_HOME/bin/jmap -heap $プロセス番号
# heapの状況を見れる

```

*heapdump取得中はJavaアプリケーションが停止する*

## jcmd

## まとめてくれてるやつ
https://www.ibm.com/developerworks/jp/java/library/j-5things8.html

## 便利ツール
### JMC
- スタック、ヒープなんでもこいやをGUIでいい感じに見れる

### jvm-mon
- CPU使用率、プロセス、Thread、ヒープ仕様をターミナル上でグラフィカルに見れる

## Javaオプション
### JVMがOOMで落ちた時ヒープダンプ勝手に出す

```
java -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath=$吐き出し先ディレクトリ
```

### GCログを落とす
#### ログの見方
- GCと出るとFull GC以外
- Full GCはその名の通り
- `~~K -> ~~K`は前後のメモリ使用量

#### 標準出力に出される

```
java -verbose:gc
```



#### ファイルに出される
```
java -Xloggc:./gclog/gc.log
```

##### オプション
- 時刻
	- -XX:+PrintGCDateStamps
- 詳細
	- -XX:+PrintGCDetails
- ログローテーション
	- -XX:+UseGCLogFileRotation
	- -XX:GCLogFileSize=N
		- Nに1K, 1M, 1G なりサイズをしていするとログファイルのローテーションされる閾値が設定できる
	- -XX:NumberOfGCLogFiles=N
		- Nファイル数分 0 , 1 , 2 ...とログファイルがローテーションされる
		- Nまで出力されると0から上書きされる
全ての Docker Image, tag を消すワンライナー


諸事情で Image が大量に出来てしまった場合に...

```
docker images --format "{{.Repository}}:{{.Tag}}" | xargs docker rmi
```

> コンテナが稼働しているImageはErrorになるので、消えないです。
> オススメではないですが、それも強制的に消したいなら ``-f`` option を付けます。

中間Imageのゴミ ``<none>`` だけを消したい時はこうです。

```
docker image prune
```

もしくは ↓ で、Imageだけでなく、不要なコンテナ、ネットワークも一括で削除できます。

```
docker system prune
```
fish shell と IDE 設定

普段いうほど shell に触れる機会がなくて、特に気にすることもなく bash を利用し続けてきたのですが、
せっかくなので、fish shell に変えてみました。
ちょっと触れてみて、今まで特に何の拡張もしていなかったせいか、補完機能がめちゃ強ッッ!!に感じました。

## 導入してるプラグイン

ちゃんと shell 使えるようになりたいなと思って、とりあえず下記のプラグインを入れました。

|プラグイン|url|
|-----|-----|
|fish-bd|[https://github.com/0rax/fish-bd](https://github.com/0rax/fish-bd)|
|z|[https://github.com/fisherman/z](https://github.com/fisherman/z)|

peco, ghq あたりを褒めちぎっている人が多いので、それもインストールしようかな...

## IDE への導入

普段利用しているIDE は WebStorm と VSCode の二刀流になるのですが、
そのどちらでもデフォルトを fish shell に変えてみます。

### VSCode の設定変更

- settings.json に shell のデフォルト設定がされているので、そちらを変更する
- OS毎に変えられる模様

```json:setting.json
"terminal.integrated.shell.osx": "/usr/local/bin/fish"
```

![vsc.png](https://qiita-image-store.s3.amazonaws.com/0/166794/396c01fb-c59a-ff85-76cb-bfdf71c12291.png)

### WebStorm の設定変更

- Preferences の Tools -> Teminal 部分の Shell Path を変更

![webstorm.png](https://qiita-image-store.s3.amazonaws.com/0/166794/df964909-5889-c050-beaa-5036dc38218b.png)

## 環境変数の設定

npm と yarn が動かなくなってしまったので、環境変数を設定。
bash とかでやってる export は fish では使えないらしいので、若干ハマッた。 
.bashrc を読みこんではくれないらしい。
config.fish という設定ファイルがあるようなので、そちらからパスを通す。

```fish:
vi ~/.config/fish/config.fish 
```
```fish:config.fish
set -x PATH $HOME/.nodebrew/current/bin $PATH
```

これで無事に動くようになりました。
apollo-client v2 + rails (graphql-ruby) でファイルをアップロードするmutationを作る方法


# 問題
1. apollo-client v2 でも現状はファイルをアップロードするmutationをカバーしていない？様子
2. https://github.com/jaydenseric/apollo-upload-client を使う事でファイルアップロードするmutationを作る事は可能
3. しかしながらファイルがアップロードされる場合、サーバー(今回rails + `graphql-ruby`)で想定しているparamsの内容とは合っていないのでそのままではファイルを受け取れない

```ruby
# fileをアップロードしない場合のキー
# app/controllers/graphql_controller.rb
def execute
  params.keys
=> ["query",
 "variables",
 "controller",
 "action",
 "graphql"]
```

```ruby
# fileをアップロード**する**場合のキー
# app/controllers/graphql_controller.rb
def execute
  params.keys
=> ["operations",
 "map",
 "0",
 "controller",
 "action"]
```

# 解決方法
ネストされた状態などを考えると色々ややこしそうなのでgem化した
https://github.com/github0013/graphql_apollo_upload_client_params

```ruby
class GraphqlController < ApplicationController

  def execute
    # paramsを使いやすいように加工する
    converted_params = GraphqlApolloUploadClientParams.convert(params)

    variables = converted_params.variables
    query = converted_params.query
    operation_name = converted_params.operation_name

```

そうしてclient側から通常通りmutationを呼び出して、

1. variables直下
2. ネストした中のオブジェクトのプロパティとして
3. 配列として
4. FileListのまま

アップロードするファイルオブジェクトを渡す

```js
mutation($file: File!) {
  testField(file: $file)
}
...
...

this.props
.mutate({
  variables: {
    file: fileObject
  }
})
.then(({ data }) => {
  console.log(data)
})
```

ファイルを受け取るためにはサーバー側で該当mutationのパラメータータイプを独自のFileスカラーにする

```ruby
FileType = GraphQL::ScalarType.define do
  name "File"
  description "ActionDispatch::Http::UploadedFile"

  coerce_input ->(action_dispatch_uploaded_file, ctx) {
    action_dispatch_uploaded_file
  }
end
```

あとは通常通りパラメーターとしてファイルが参照できる。