OmniAICreator/Qiita-1.07M huggingface dataset:
Haskell import いろいろ

[Import - HaskellWiki](https://wiki.haskell.org/Import) で Haskell の import の説明がされているのですが、ここで簡単にまとめてみます。

`Mod` モジュールでは `x`、`y`、`z` がエクスポートされているものとします。

| Import 方法 | スコープに含まれるもの |
|:--|:--|:--|
| `import Mod` | `x`, `y`, `z`, `Mod.x`, `Mod.y`, `Mod.z` |
| `import Mod ()` | なし[^1] |
| `import Mod (x, y)` | `x`, `y`, `Mod.x`, `Mod.y` |
| `import qualified Mod` | `Mod.x`, `Mod.y`, `Mod.z` |
| `import qualified Mod (x, y)` | `Mod.x`, `Mod.y` |
| `import Mod hiding (x, y)` | `z`, `Mod.z` |
| `import qualified Mod hiding (x, y)` | `Mod.z` |
| `import Mod as Foo` | `x`, `y`, `z`, `Foo.x`, `Foo.y`, `Foo.z` |
| `import Mod as Foo (x, y)` | `x`, `y`, `Foo.x`, `Foo.y` |
| `import qualified Mod as Foo` | `Foo.x`, `Foo.y`, `Foo.z` |
| `import qualified Mod as Foo (x, y)` | `Foo.x`, `Foo.y` |

私は自分で作成したモジュールは `import Mod` を使用していましたが、これは使わないほうが良いと思いました。例えば以下のようなコードがあったとして：

```haskell
import Foo
import Bar

main = baz >>= qux
```

`baz` と `qux` がなんのモジュールで定義されているのか第三者が見てわからないためです。

この中で使用するのは、以下が良さそうです。

- `import Mod (x, y)`: 関数が他とかぶらない場合
- `import qualified Mod`: 関数が他とかぶり、モジュールのパッケージ名が短い場合
- `import qualified Mod as Foo`: 関数が他とかぶり、モジュールのパッケージ名が長い場合

`import Prelude hiding (zip)` として、他のモジュールの `zip` 関数を使用する方法もありますが、基本的には `import qualified Mod as Foo` として `Foo.zip` を使用する方が良いと思います。


[^1]: タイプクラスのインスタンスだけをインポートするのに便利です（そういうユースケースがあれば、ですが）
qs.parse() 互換実装でわかる qs.parse() の仕様

以下のようなクエリパラメータがあるとします。

```
aaa=bbb&ccc[]=ddd&ccc[]=eee&aaa=fff&aaa=&ggg=hhh
```

以下のようなパラメータが渡されています。

* aaa は bbb、fff と空白文字列
* ccc[] は ddd、eee
* ggg は hhh

これを [qs](https://www.npmjs.com/package/qs) というクエリ文字列パーサで解析しつつ、このパーサと同じ動作をする実装を行い qs の仕様を確認してみました。

### TL;DR

* 配列パラメータ `foo[]=bar` は配列として扱われる
* 同一名の複数パラメータも配列として扱われる
* つまり `aaa=bbb&aaa=ccc` と `aaa[]=bbb&aaa[]=ccc` は qs では同じ扱いだった
* 2024 年 12 月現在、`aaa=bbb&aaa=ccc` と `aaa[]=bbb&aaa[]=ccc` では `aaa=bbb&aaa=ccc` の方が仕様として良さそう

### 実装

```js
import qs from 'qs'

const query = 'aaa=bbb&ccc%5B%5D=ddd&ccc%5B%5D=eee&aaa=fff&aaa=&ggg=hhh'

const parse = query => {
  return query.split('&').map(param => {
    const splitted = param.split('=')
    return {
      key: decodeURIComponent(splitted[0]),
      value: decodeURIComponent(splitted[1])
    }
  }).reduce((acc, cur) => {
    if (cur.key.endsWith("[]")) {
      const key = cur.key.substr(0, cur.key.length - 2)
      if (acc[key] === undefined) {
        acc[key] = []
      }
      acc[key].push(cur.value)
    } else {
      if (acc[cur.key] === undefined) {
        acc[cur.key] = cur.value
      } else if (Array.isArray(acc[cur.key])) {
        acc[cur.key].push(cur.value)
      } else {
        acc[cur.key] = [acc[cur.key], cur.value]
      }
    }
    return acc
  }, {})
}

console.log(qs.parse(query))  // { aaa: [ 'bbb', 'fff', '' ], ccc: [ 'ddd', 'eee' ], ggg: 'hhh' }
console.log(parse(query))  // { aaa: [ 'bbb', 'fff', '' ], ccc: [ 'ddd', 'eee' ], ggg: 'hhh' }
```

### まとめ

qs の互換実装を確認してみましたが、多くのプログラミング言語やフレームワークでも `aaa=bbb&aaa=ccc` と `aaa[]=bbb&aaa[]=ccc` は同じ扱いですが、異なる言語やフレームワークもあるので注意が必要です（以下リスト参照）。一般には `aaa=bbb&aaa=ccc` が扱いがシンプルでしょう。

* Node.js の Express はどちらも `req.query.aaa` が `['bbb', 'ccc']` を返す
* PHP はどちらも `$_GET['aaa']` が `['bbb', 'ccc']` を返す
* Python の Flask はどちらも `request.args['aaa']` が `['bbb', 'ccc']` を返す
* Python の Django はどちらも `request.GET.getlist('aaa')` が `['bbb', 'ccc']` を返す
* Ruby on Rails はどちらも `params[:aaa]` が `['bbb', 'ccc']` を返す
* Go の net/http はどちらも `r.URL.Query()["aaa"]` が `["bbb", "ccc"]` を返す
* Go の Gin はどちらも `c.DefaultQueryArray("aaa")` が `["bbb", "ccc"]` を返す
* Java の Spring Boot はどちらも `@RequestParam("aaa")` が `["bbb", "ccc"]` を返す
* Haskell の warp は `aaa` と `aaa[]` の書き分けが必要だがどちらも `["bbb", "ccc"]` を返す
    * `lookup "aaa" $ queryString request`
    * `lookup "aaa[]" $ queryString request`
* Rust の warp は `aaa` と `aaa[]` の書き分けが必要だがどちらも `["bbb", "ccc"]` を返す
    * `warp::get().and(warp::path::end()).and(warp::query::<std::collections::HashMap<String, Vec<String>>>()).map(|params: std::collections::HashMap<String, Vec<String>>| { if let Some(values) = params.get("aaa") { values } else { [] } })`
    * `warp::get().and(warp::path::end()).and(warp::query::<std::collections::HashMap<String, Vec<String>>>()).map(|params: std::collections::HashMap<String, Vec<String>>| { if let Some(values) = params.get("aaa[]") { values } else { [] } })`
T1310M3でオンボードRAIDを構築してCent OS7.7を入れる

知っている人には常識なんでしょうが、ドライバを入れないと認識しないところでハマりました。

１．Bios画面でRAIDをONにしてSave&Exit
２．https://docs.oracle.com/cd/E59941_01/html/E59783/z40000081016142.html
　　を見ながら、オンボードRAID構成を実施

３．重要：２で作った論理ドライブはCentOS7.7のインストーラで認識できないので、ドライバを入れる必要がある。
４．https://support.ts.fujitsu.com/IndexDownload.asp?lng=COM　で、RHEL7.7のSATA RAID RHDUP driver package megasr2 18.02.2019.0603.4fts-2.el7.7 for RHEL7.7をダウンロード
５．上記ドライバをDDWinなどを用いて、USBメモリに焼く

６．CentOS7.7のインストーラUSBと、ドライバを入れたUSBを両方入れる。

７．インストール画面が出たら、https://qiita.com/heimaru1231/items/5c65d98570b996510e77の「UEFIブートによってCentOSをインストールする場合」を参考に、ドライバを入れたUSBのロードを指定する。ドライバが読み込まれたらcで続けると、通常のCentOSGUIインストーラが立ち上がる。

８．作成した論理ドライブを指定してインストール実施
Laradock で php-fpm のビルドに失敗する

## `php-fpm` のビルドに失敗

Laradockをcloneして、設定を諸々済ませ、

```
docker-compose up -d nginx mysql
```

してみたところ、
こんな表示が。

```
E: Failed to fetch http://deb.debian.org/debian/pool/main/o/openjpeg2/libopenjp2-7_2.3.0-2_amd64.deb  404  Not Found [IP: 151.101.110.133 80]
E: Failed to fetch http://deb.debian.org/debian/pool/main/o/openjpeg2/libopenjp2-7-dev_2.3.0-2_amd64.deb  404  Not Found [IP: 151.101.110.133 80]
E: Failed to fetch http://deb.debian.org/debian/pool/main/p/python3.7/libpython3.7-minimal_3.7.3-2_amd64.deb  404  Not Found [IP: 151.101.110.133 80]
E: Failed to fetch http://deb.debian.org/debian/pool/main/p/python3.7/python3.7_3.7.3-2_amd64.deb  404  Not Found [IP: 151.101.110.133 80]
E: Failed to fetch http://deb.debian.org/debian/pool/main/c/cups/libcupsimage2_2.2.10-6+deb10u1_amd64.deb  404  Not Found [IP: 151.101.110.133 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
ERROR: Service 'php-fpm' failed to build: The command '/bin/sh -c if [ ${INSTALL_IMAGEMAGICK} = true ]; then     apt-get install -y libmagickwand-dev imagemagick &&     pecl install imagick &&     docker-php-ext-enable imagick ;fi' returned a non-zero code: 100

```

`php-fpm` コンテナが立ち上がらない。

その前のエラーで `run apt-get update` せいと言われているので、当該部に処理を追加する。

```Docker:laradock/php-fpm/Dockerfile
RUN if [ ${INSTALL_IMAGEMAGICK} = true ]; then \
    # ここに apt-get update && \ を追記
    apt-get update && \
    apt-get install -y libmagickwand-dev imagemagick && \
    pecl install imagick && \
    docker-php-ext-enable imagick \
;fi
```

改めてビルドしたら無事に立ち上がった。

### 参考
http://domwp.hatenablog.com/entry/2019/01/30/151146
【Node.js】定義したクラスを別のファイルで使用する


定義したクラスを別のファイルで使用するには、*module.exports*を使います。

まず元となるクラスを作成

```javascript:smartPhone.js
class iphone {
    constructor() {
    }

    call(){
        console.log('call');
    }

    mail(){
        console.log('mail');
    }
    
}


class android {
    constructor() {
    }

    call(){
        console.log('call');
    }

    mail(){
        console.log('mail');
    }

}
```
*module.exports*で外部に公開します。

```javascript:smartPhone.js
module.exports = iphone
```
これだけで、外部へ公開することができます。
しかし、今回クラスは2つあります。
クラスが複数ある場合はどうするかというと、objectにしてしまいます。

```javascript:smartPhone.js
module.exports = {
    IPHONE: iphone,
    ANDROID: android
}
```
Keyは適当な名前、valueはクラス名を設定します。
これで指定したクラスが外部から読み込めるようになりました。

早速別ファイルから読み込んでみます。
requireで呼び出します。

```javascript:usePhone.js
const iphone = require('./smartphone').IPHONE
const android = require('./smartphone').ANDROID
```
requireの引数にファイル名を指定します。".js"は省略可能です。
上記ではクラスごとで定数に代入していますが、わざわざこんなことはしません。

```javascript:usePhone.js
const {IPHONE,ANDROID} = require('./smartphone')
```

分割代入をします。

あとはクラスをnewすればOKです。

```javascript:usePhone
const a = new IPHONE()
a.call()

const b = new ANDROID()
b.call()
```
Herokuを使ってMySQLへ接続しようとして諦めた話

# 概要
現在制作しているラインボットにデータベースを使った機能を追加しようと思い、Herokuを用いてMySQLへの接続を試みましたが、かなり躓いた所がありました。
結果としては諦めたのですが、私と同じような初学者の方に少しでも参考になればと思い、念の為まとめておこうと思います。

# 環境

- macOS
- python3.7.1
- MySQL5.6.47
- mysqlclient1.4.6

# この記事で書かないこと

- MySQLの詳細なクエリの使い方

# 手順
## 1.MySQLのインストール
MySQLそのものを`pip install mysql`でインストールします。

## 2.コネクタのインストール
コネクタのインストールを行います。
正直役割がよく理解できていませんが、名前の通りMySQLのサーバーとの接続の為に必要だと思われます。
コネクタには目的や使用言語等でいくつもの種類がありますが、自分は`mysqlclient`を使用しています。
こちらも`pip install mysqlclient`でインストールします。

## 3.Herokuでの準備
自分の場合は後述のMySQLの準備などを全て終えた後に、いざ動作確認をしようとHerokuへコードをプッシュし動かしてみたのですが、MySQLのインポートエラーが出てしまいました。
原因は二つあったのですが、まず一つ目がプッシュしたファイルの内、`requirements`の記載です。
こちらにMySQLのコネクターを記載していなかった為、エラーが発生しました（因みに、最初はよくわからずMySQL自体のバージョンを記載していたのですが、これだとプッシュした時点でエラーが発生します）。

二つ目は、HerokuでMySQLを使う際はClearDBというものを使うらしく、そこから作ったアカウントが必要になります。
詳しい登録方法は割愛しますが、注意点として殆どのClearDBについての記事で、登録した後環境変数の`CLEARDB_DATABASE_URL`をコピーして先頭をmysql2に変更して`DATABASE_URL`に設定すると書いてありますが、こちらの操作はRubyの場合にのみ必要みたいです。

その為、今回は`heroku addons:create cleardb:ignite`でClearDBを追加した際の`CLEARDB_DATABASE_URL`のアカウントをそのまま使用しMySQLに接続することにしました。
`CLEARDB_DATABASE_URL`に`mysql://[username]:[password]@[hostname]/[db_name]?reconnect=true`の形で記載されているので、ターミナル上で`mysql --host=[hostname] --user=[username] --password=[password] [db_name]`と入力すれば接続することができます。

## 4.MySQLでの準備
無事MySQLに入ることができたら必要なテーブルなどを作成していくのですが、ここで問題が発生。
普通にテーブルを作ろうとモニタでクエリを打ち込んだのですが、`ERROR 2013`というエラーがでました。
その後に直ぐもう一度同じクエリを入力すると、別のエラーが出るものの実行自体はされました。
このことから、恐らくtimeout系の設定を変えなければならないと思ったのですが、変える為のコマンドは受け付けてくれませんでした。
色々調べた結果、根本的な原因としてDBの設定を変更するためにマイグレーションをしなければならないという結論になりました。
しかし、Flaskのマイグレーションのやり方を調べたものの全くと言っていいほど理解できませんでした。
元々MySQL自体にこだわっていたわけでは無かったので、一旦諦めてHerokuの標準DBであるpostgresqlを使うことにしました。

~~エラーメッセージで調べてみると、`connect_timeout`などの数値を大きくすれば解決するようでしたが、根本的な解決策ではないというのとrootユーザーで入れば問題なく処理ができることから、ClearDB特有の問題があるのではないかと考えました。
そこで、ClearDBのサイトをよく見てみると、~~

>~~データベースの編集等を行う際は、MySQL Workbench,Sequel Pro for Mac OS X,Navicatなどの使用を推奨します。~~

~~という旨の記載を発見。
これらは、直接クエリを入力せずにMySQLの操作を行うことができるGUIツールらしく、以前どなたかの記事でMySQL Workbenchを使っているのを見たのでこちらを試すことに。
[詳しい操作方法などはこちらの記事を参考](https://proengineer.internous.co.jp/content/columnfeature/6605)に、無事必要なテーブルを作成することができました。~~

余談ですがMySQLの練習がてら初めてrootユーザーでMySQLに入ろうとした際、パスワードがいくら探しても分かりませんでした。
MySQLをインストールしたときの所定のファイルに初期パスワードが記載してあるということまでは分かったのですが、いくら手順通りにやってもこのファイルを見つけることができませんでした。
結果として[こちらの記事を参考](https://liginc.co.jp/web/programming/mysql/87393)に何とかMySQLに入ることができました。

# まとめ
長々と書きましたが要約すると

1. MySQLのインストール
2. コネクタのインストール
3. HerokuでClearDBの登録（requirementsにコネクタのバージョンを記載）
4. ~~MySQL WorkbenchでClearDB内の編集~~　マイグレーション？

となります。

今回、データベースという新しい分野に挑戦してみて、今までやってきたコードを正確に書くということとは別の視点が必要になりとても勉強になりました。
ベータベースはほぼ全てのサービスで必須らしいので、今回を機にしっかりと知識を身に着け自分のスキルの幅を広げたいと思います。

# 参考

- [MySQLの使い方](https://www.dbonline.jp/mysql/)
- [便利な公式ツールMySQL Workbenchの使い方と日本語化方法](https://proengineer.internous.co.jp/content/columnfeature/6605)
- [MySQLでrootパスワードを忘れた場合の対処方法](https://liginc.co.jp/web/programming/mysql/87393)
- [HerokuでMySQLを利用する方法](https://blog.nakamu.life/posts/heroku-mysql)
JavaScriptで時刻の二桁目をゼロ埋めする

## 取得した時刻をStringへ変換してpadStart
1時2分を「1:2」ではなく「01:02」みたいに表記したかった。
忘れないようにメモ。

```javascript:console
const d = new Date('2020-03-05T01:02:03');
const hourStr   = d.getHours().toString().padStart(2, '0');
const minuteStr = d.getMinutes().toString().padStart(2, '0');
console.log(hourStr + ":" + minuteStr); // 01:02
```

## 参考資料

[String.prototype.padStart() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
「レゴ デュプロ」でノートパソコンの台を作る

# 課題と背景
+ 新型コロナウイルスにより自宅待機になった
+ 会社ではデスクトップパソコンを主に使用
+ 会社支給のB5ノートパソコンでは姿勢が悪くなるため、肩こり、首の疲れが発生し、長時間仕事が継続できない

# 解決策
+ 子供のレゴデュプロを用いて、ノートパソコン台を作成
+ 外部キーボードは必須


# 作ったノートパソコン台
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285482/b23ba40d-ebd5-a810-ca1c-925c4339d409.jpeg" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285482/69a99102-6270-0afe-7a93-e34b767051a3.jpeg" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285482/feabf154-0a6a-9a8f-2bb2-01011a40a8eb.jpeg" width=50%>


# 良かった点
+ 8 x 16の厚めの基礎板2つにB5ノートパソコンは余裕
+ 高さの調整が簡単。その気になれば普通のレゴでさらに微調整ができる

# 備考
+ レッツノートのCF-SVはいい感じに載ります。


enjoy!
[漏洞通告]CVE-2020-6418/Chrome V8类型混淆利用堆内存破坏导致远程代码执行漏洞

### 漏洞描述
`V8`是`Google Chrome`的开源`JavaScript`和`WebAssembly`引擎。`Google Chrome`在`80.0.3987.122`版本前,V8的实现中存在类型混淆漏洞,可导致堆内存破坏,使得攻击者可非法访问数据，利用精心制作的html,可达到恶意代码执行的效果.该漏洞已被在野利用多时,已经为第三次被捕获的Chrome的0day.
### 漏洞编号
CVE-2020-6418

### 漏洞威胁等级
高危

### 影响范围
<= 80.0.3987.122
### 漏洞验证
测试的Chrome版本为`80.0.3987.122`,OS为`macOS 10.15.2`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/1dc0d7a5-28ea-7462-96c0-9b7a9832fd9a.png)
模拟攻击者,部署恶意html页面在web服务器,访问恶意html页面触发弹出Chrome内置打印机
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491410/bf675b70-621d-9ec4-be62-c3559d3ec975.png)
### 修复建议
更新Chrome到最新版本

### 时间轴
[0] 2020/02/27 NVD发布漏洞通告
[1] 2020/03/05 亚信安全网络攻防实验室分析&复现该漏洞并发布漏洞通告

### Reference
https://chromereleases.googleblog.com/2020/02/stable-channel-update-for-desktop_24.html
https://github.com/ray-cp/browser_pwn/tree/master/cve-2020-6418
https://mp.weixin.qq.com/s/cLZ7Jv2p9wlK87qN03TRqA
Missing write access to /usr/local/lib/node_modules

#現象

ターミナルでyarnを入れようとした際に

```terminal
$ npm install yarn -g
```

でエラーが吐かれました


# 問題点

```
Missing write access to /usr/local/lib/node_modules
```

書き込み宣言は受け付けてないよ！とのこと。


#解決方法

```
$ sudo chown -R $USER /usr/local/lib/node_modules
```

上記コマンドを叩いたら解決しました.

詳細
ルート宣言(sudo)でファイル（/usr/local/lib/node_modules）のオーナーをユーザ（$USER）に変更(chown)

## 参考
https://flaviocopes.com/npm-fix-missing-write-access-error/
[teeコマンド]一般ユーザーでroot権限が必要なファイルを書き換える時のコマンド

## 状況

書き込み権限のないユーザーでファイルをvimで書き換えようとして。

```
Can't open file for writing
Press ENTER or type command to continue
```

と怒られる。

rootユーザーに切り替えて編集し直しても良いんだけど。
という時。

## コマンド

```
:w !sudo tee %
```

:w!  (内容を保存)
sudo tee (rootユーザーで結果の出力をファイルに書き込む)
%　(現在読み込まれているバッファのファイルへのパス)

※sudo可能なユーザであること前提
頂点の位置を合わせたい

Blenderの頂点を合わせたくS+X+0をしたのですが
まっすぐに整列してくれません
角度はあっているようですが、真っすぐにできない原因がわかりません。
どうすればよいのでしょうか。
<img width="110" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142028/faa339ca-b493-22f6-2569-c83a5131abb8.png">右、処理後<img width="109" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142028/ed2b12f2-88f3-6fd6-38d6-94e3f7bf27ae.png">
create-react-appからpugまで(その4)

その1
https://qiita.com/DaisukeNishi/items/dae74d5dcf5ddb171b3d
その2
https://qiita.com/DaisukeNishi/items/e93a3448668f65df7a91
その3
https://qiita.com/DaisukeNishi/items/697fb3579d7dd69324b3
その5
https://qiita.com/DaisukeNishi/items/ca7d80c104ca7a792f9d
その6
https://qiita.com/DaisukeNishi/items/c8982546c803d2c5dc99

`yarn eject`したり、`react-app-rewired`を使ったりと、
試行錯誤をやってきましたが、まずプロジェクト作成時に混ぜ込んだ方が
一番シンプルに行けるんではないか？と思った。

これ、便利そうな気がする。
https://github.com/kaminaly/react-pug-react-scripts
コマンドもとてもシンプルだし。あ〜でも個人がつくってるToolっぽいな。

```
npx create-react-app app-name --scripts-version react-pug-react-scripts
```
```
npx create-react-app app-name --scripts-version react-pug-react-scripts --typescript
```

なんかこう、料理の調味料を全部かごに入れた所で「CookDo」を見つけてしまったような気分・・・

##数分後

なんかおかしいな。「cra-template」をローカルに落としてきたり。。

「gitignore」が見つからない、とか。。。。これもチョットコツがいるっぽいのか？
うむむむ、これも、ダメっぽい。
HaskellでCを計算するプログラムをF#に置き換える

#前回投稿したHaskellプログラムをF#に置き換えてみました

前回の投稿記事はこれです。
[Haskellでリストを使って、コンビネーション（C）の計算プログラムを作って遊ぶ](https://qiita.com/oskats1987/items/8ae1f36ee6121a73d3b7)

このHaskellのプログラムを、F#に置き換えてみました。

```Program.fs
let c (m,n) = let denom = if m <= 0 || n <= 0 || m < n then [1;1]
                            else match m with
                                    |1 -> [1;1]
                                    |x -> [x-n+1..x]
              let nume = if n <= 0 || m < n then [1;1]
                            else match n with
                                    |1 -> [1;1]
                                    |x -> [1..x]
              
              (List.reduce (*) denom) / (List.reduce (*) nume)

[<EntryPoint>]
let main argv =

    let conbi = [(10,9);(9,9);(8,3);(7,-2);(1,3)]
    for n in conbi do
        printfn "%d" (c n)

    0
```

実行結果は

```
10
1
56
1
1
```

Haskellでは、リストは

```
[0,1,2,3,4,5]
```

と、カンマで区切りますが
F#では

```
[0;1;2;3;4;5]
```

と、セミコロンで区切ります。

あと、Haskellの`print`は、リストをそのまま表示してくれますが、F#は、できませんでした。（方法はあるかどうか分かりません）
なので`for`文でそれぞれの要素を1つ1つ表示させています。
備忘録　MySQL

#MySQLコマンド

##MySQLに入る

```
> cd C:\xampp\mysql\bin
> mysql -u root
```
##データベースの作成

```
> create database product default character set utf8 collate utf8_general_ci;
```
##データベース確認

```
> show database;
> select database();
```
	
##データベース切り替え	

```
> use product;
```

##データベース削除

```
> drop database product;
```

##テーブル作成

```
> create table users(
		id int not null auto_increment primary key,
		name varchar(255),
		score int
		);
```

##テーブル構造の確認
```
> desc users;
```
	
##データ確認
```
> select * from users;
```

##ユーザー作成

```
> create user dbuser01@localhost identified by 'password';
```

##ユーザー権限譲渡

```
> grant all on mydb01.* to dbuser01@localhost;
```

##ユーザー確認

```
> select user();
```

##ユーザー削除

```
> drop user dbuser01@localhost;
```

##レコードのデータ挿入

```
> insert into users (id, name, score) values (1, 'john', 5.8);
```

##フィールドに制限をかける
変なデータが入らないように

###null　のフィールドをはじく

```
> score float not null
```
=>　データが　null　のときフィールドそのものがないことになる

###データが無い時デフォルト値設定

```
> score float default 0.0
```

=>　score　が設定されていないとき、0.0の値が入る
###重複がないようにする

```
> name varchar(20) unique
```

=>　重複したフィールドははじかれる
###id　に対する主キーの設定

```
> id int unsigned primary key auto_increment
```

primary key　=>　null　ではない重複しない値になることが保証される
auto_inctement　=>　自動的に連番になる

##フィールドを後から追加

```
> alter table users add column email varchar(255);
```

末尾に　after [フィールド名]　とすると、指定したフィールドの直後に追加する

##フィールドを削除

```
> alter table users drop column email score;
```

##フィールドの型を変える

```
> alter table users change name user_name varchar(80);
```

##テーブルの名前を変える

```
> alter table users rename persons;
```

##全てのフィールドを抽出する

```
> select * from users;
```

##特定のフィールドのみを抽出する

```
> select id, name from users;
```

##条件付きでフィールドを抽出する

```
> select * from users where score >= 6;
```
=>　score　が6以上のすべてのフィールドを選択する
	
##文字列を抽出条件にする

```
> select * from users where name = 'john';
```
	
##部分一致で抽出

```
> select * from users where name like = 't%';
```
=> 先頭が　t　の値を抽出

```
> select * from users where name like = '%t%';
```
=> t　を含む値を抽出

```
> select * from users where name like = 't%';
```
=> 末尾が　t　の値を抽出
	
##文字数で抽出

```
> select * from users where name like = '_____';
```
=> 取得したい文字数分のアンダーバーを入れる

##抽出結果の並び替え

```
> select * from users order by score asc;
```
=> 値を小さい順に並べる

```
> select * from user where score is not null order by score desc;
```
=> 値を大きい順に並べる且つ null を除外する

```
> select * from users limit 3;
```
=> 最初の3件のみ抽出

```
> select * from users limit 3　offset 3;
```
=> 最初の3件を飛ばして次の3件を抽出

```
> select * from users order by score desc limit 3;
```
=> 値を大きい順に3件抽出
	
###レコードの更新

```
> update users set score = 5.9 where id = 1;
```
=> 1　の　id　を持つフィールドの値を更新

```
> update users set name = 'john', score = 2.9 where 'bob';
```
=> john の name を bob、score　を　2.9　に更新

##全てのデータの削除

```
>　truncate table users;
```

##外部ファイル読み込み
```
> \. ./create_other.sql
```
Azure VM の deallocate と stop の違い

azure cliでVMを停止するときのメモ。

これは課金される。VMにログインしてshutdownするのと同じ。

```
az vm stop ${VMのRESOURCE ID}
```

これは課金されない。public IPとかCPUとかのリソースが開放される。OSがインストールされているディスクは無事。startすると再開する。

```
az vm deallocate ${VMのRESOURCE ID}
```

https://docs.microsoft.com/ja-jp/azure/virtual-machines/windows/states-lifecycle
ROSでUSBカメラ画像の表示

#概要
Ubutnu 16.04にUSBカメラをつないでROSからカメラ画像を表示する方法について
ターミナルからの起動とlaunchファイル作成のそれぞれを記載


#準備
下記コマンドを必要なパッケージをインストール
(indigoの場合は`kinetic`を`indigo`に置き換え)

```
sudo apt-get install ros-kinetic-uvc-camera　
sudo apt-get install ros-kinetic-image-*
```

#ターミナルからの起動
画像の表示するためにはターミナルを3つ別々に起動させる必要がある．

##roscoreの起動
1つ目のターミナルで`roscore`を起動

```
roscore
```

##カメラnodeの起動
1つ目のターミナルはそのままにして
2つ目のターミナルでカメラ用のnodeを起動

```
rosrun uvc_camera uvc_camera_node
```

##画像を表示
これまでの2つのターミナルはそのままに
3つ目のターミナルで下記のコマンドを実行すれば画像が表示される
```
rosrun image_view image_view image:=/image_raw
```

#launchファイルの作成
ターミナルからいちいち起動させるのは面倒なのでlaunchファイルを作成しておく

```camera.launch
<launch>
 <node name="uvc_camera_node" pkg="uvc_camera" type="uvc_camera_node">

 <node name="image_view" pkg="image_view" type="image_view" output="screen">
    <remap from="image" to="image_raw"/>
 </node>

</launch>
```
これで一発でroscoreの立ち上げからカメラ画像の表示までを一発で起動できる
TypeScript 入門

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。
TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。
TypeScriptはクライアントサイド、あるいはサーバサイド (Node.js) で実行されるJavaScriptアプリケーションの開発に利用できる。

TypeScriptは大規模なアプリケーションの開発のために設計されている。

TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptプログラムは、全て有効なTypeScriptプログラムとなる。

TypeScriptは型定義ファイルをサポートしており、既存のJavaScriptライブラリに型情報を付与して利用できる。既存のオブジェクトファイルの構造を記述できるC/C++のヘッダファイルとよく似た仕組みである。これによって、その型定義ファイル内で定義された値を、他のプログラムがあたかも静的に型付けされたTypeScriptエンティティであるかのように利用することができるようになる。jQuery、MongoDB、D3.jsのような人気のあるライブラリのための、サードパーティーのヘッダファイルがある。Node.jsベーシック・モジュールのためのヘッダも入手可能で、Node.jsプログラムの開発もTypeScriptの中で行える[7]。

TypeScriptの主要な実装は、自身もTypeScriptで書かれた、JavaScriptへのトランスコンパイラである。ライセンスはApache 2 License。

TypeScriptはMicrosoft Visual Studio 2013 Update 2以降でfirst-classプログラミング言語として、C# やその他のマイクロソフト言語群とともに含まれるようになった[8]。 公式の拡張パックによりMicrosoft Visual Studio 2012 でも TypeScript をサポート可能である[9]。

言語の特徴

TypeScriptはJavaScript (ECMAScript 5) に次のような言語機能の拡張を加えたものである。

ECMAScript 6由来
●クラス
●アロー関数式（ラムダ式）
●オプション引数、デフォルト引数
●let, const
●テンプレート文字列 : 文字列内への変数埋め込み
●モジュール[26]
●for/of
●分割代入
●Symbol

ECMAScript 7由来
●デコレーター
●Async/Await

独自

●型注釈（変数、引数、戻り値などの型宣言）とコンパイル時の型チェック
●型推論、型ガード - if文の instanceof などを利用した型推論
●インタフェース
●列挙型
●Mixin
●ジェネリック
●名前空間
●タプル型
●共用体型, 交差型（英語版）
●型エイリアス
構文的には、静的型付けやクラス、継承、インタフェースのようなオブジェクト指向、名前空間などの機能を追加する、ECMA-262 言語標準のマイクロソフトによる実装である JScript.NET と TypeScript はよく似ている。


コンパイラ
TypeScriptコンパイラtsc自体もTypeScriptで作成されている（セルフホスティング）。これは通常のJavaScript にコンパイルでき、任意のホスト上のJavaScriptエンジン（たとえばブラウザなど）上で実行できる。ライセンスは Apache License 2.0である。コンパイラ・パッケージはコンパイラを実行出来るスクリプトホストに同梱されてくる。Node.js等と共にコンパイラ・パッケージとして配布される場合もある。

また、JavaScriptで書かれたクライアントサイドのコンパイラのアルファ版もある。これはページロード中にTypeScriptコードを実行する[32]。

TypeScriptで書いたコードをブラウザ上で実行するにはコンパイルが必要。

tsc --strict -t es5 *.ts

開発環境

以下の統合開発環境 (IDE) やテキストエディタがTypeScriptに対応している。

●Microsoft Visual Studio
   ●2013 Update 2から標準搭載
   ●JetBrains社によるReSharperプラグイン[33]
●Visual Studio Code
●WebMatrix
●IntelliJ IDEA, WebStorm
●Eclipse - Eclipse TypeScript Plug-in, TypEcs
●NetBeans - NetBeans TypeScript Editor
●テキストエディタ - Sublime Text, Emacs, Vim
●クラウド型IDE - Cloud9 IDE, Codenvy, Codeanywhere


中文使用手册
https://typescript.bootcss.com/
【ふくだ学習録】アプリ制作part13【40日目】

# ふくだ学習録とは？
ふくだが学習したことの備忘録。
目に見える形で残すことによってやる気を出す個人的な作戦です。
他人に見せるように書いているわけではないので、すごく読みにくいです。

### 読了した本
[データベースエンジニア養成読本 [DBを自由自在に活用するための知識とノウハウ満載!]](https://www.amazon.co.jp/dp/4774158062/ref=cm_sw_r_tw_dp_U_x_FPphEbQFPPQRM )
[ゼロから作るDeepLearning](https://www.amazon.co.jp/dp/4873117585/ref=cm_sw_r_tw_dp_U_x_y3UiEbF3P6EG7)
[PHPフレームワーク CakePHP 3入門](https://www.amazon.co.jp/dp/4798048577/ref=cm_sw_r_tw_dp_U_x_.YIjEbS1K4JY2)
[SQLアンチパターン](https://www.amazon.co.jp/dp/4873115892/ref=cm_sw_r_tw_dp_U_x_XlokEbJQK2N7P )
[Docker入門](https://www.amazon.co.jp/dp/480071091X/ref=cm_sw_r_tw_dp_U_x_xVlmEbN8ZTHZK)


### 今読んでいる本

[PHPフレームワーク Laravel入門](https://www.amazon.co.jp/dp/4798052582/ref=cm_sw_r_tw_dp_U_x_zzeyEbJBSQ5Y0 )

# アプリ制作

### ヒアドキュメントとは？
文字列をシェルスクリプトやプログラミング言語に埋め込むための方法。
複数行の記述などを簡単に記載できるようになる。

```:example
data =  <<EOS
test
テスト
123
EOS
```

詳しい記述方法などは下記を参考にする。
[ヒアドキュメントとは・基本の使い方(ruby)](https://qiita.com/shukan0728/items/b830e97f563e63e46e91)

### 【Laravel】パラメータ付きルーティング
必須パラメータの場合

```php
# {}で囲っている部分がパラメータになる
Route::get('hello/{msg}', function($msg) {
 .
 .
 .
 return ...
})
```

任意パラメータの場合

```php

# 任意にしたいパラメータの後ろに?をつける
# 引数がなかった場合のデフォルト値を指定しておく。
Route::get('hello/{msg?}', function($msg='no message.') {
 .
 .
 .
 return ...
})
```

### 【Laravel】シングルアクションコントローラ
「１つのコントローラに対して、１つのアクションだけを定義する」といった設計を行う場合に設定することがある。
設定方法は下記のように、`__invoke`というメソッドを使用することで実装できる。

```php:HelloController.php
class HelloController extends Controller
{
    # __invokeという名前で一つだけアクションメソッドを作成する。
    public function __invoke() { 
    }
}

```

```php:web.php
# 第二引数をコントローラ名だけにする（'HelloController@__invoke'といった形にしない）
Route::get('hello', 'HelloController')
```

### 【Laravel】RequestとResponse
phpではリクエスト情報を取得する際に、`$_REQUEST`というグローバル変数を使用する。
Laravelではそういったリクエストとレスポンスに関する情報は`Illuminate/Http`名前空間にある「Request」「Response」というクラスとして用意されている。

### 【Laravel】@forelse
ディレクトリ構文の中で、@foreach、@elseを組み合わせたもの。便利そう。

```php
@forelse( $配列 as $変数 )
# 繰り返し表示するもの
@empty 
# そもそも配列が存在しないとき
@endforelse
```

### 【Laravel】$loop変数
Laravelが用意してくれている、繰り返しディレクティブ内で使用できる特別な変数。
例えば、`$loop->index`と指定することで、現在のインデックス数を知ることができる。

### Laravel コントローラ処理の前、後に別処理を行う方法。
middlewareを使用する。

■前処理の場合

```php:middleware.php
public function handle($request, Closure $next)
{
    # 実行したい処理を記載しておく。
    return $next($request);
}
```

■後処理の場合

```php:middleware.php
public function handle($request, Closure $next)
{
    $response = $next($request);
    # 実行したい処理を記載しておく。
    return $response;
}
```

### 【Laravel】whereとorWhere
`where()`をメソッドチェーンで複数使用した場合は、全ての条件に当てはまるものが返ってくる。（and条件）
`orWhere()`の場合はor条件となるので、一つでも当てはまれば返ってくる。

### 【Laravel】whereRaw
whereメソッドチェーンを複数つなげるのが嫌いな人向けのメソッド。
複数条件を１行で書くことができる。（個人的にはあんまり好きじゃない）

```php
whereRaw('age >= ? and age <= ?', [$min, $max]);
```

?部分に、第二引数で渡している値が順に入っていく。
`:min`といった書き方は出来ないので注意。


# 今日の一言
Laravel良さげ！
初心者から始めるJava、if文・switch文

#はじめに
この記事は備忘録である。
参考書レベルの内容だが、本記事に掲載するコードについては、
**間違えた**ものが中心となる。これは実際にコーディング中に間違えた部分を掲載し、自分で反省するために投稿するという目的によるもの。
また、後日にJavaSilver試験問題の勉強を兼ねて復習するため、深い部分の話はここでは触れない。

#環境
言語：Java11、JDK13.0.2
動作環境：Windows10

#条件判断文
状況に応じた処理を行う場合、Javaでは**「条件(Condition)」**という考え方で処理の前提をとらえることになる。日常生活で使う条件と同じと考えていいが、Javaにおける「条件」は、**TrueかFalse**どちらかの値を持つものを指す。
条件判断文は、**「条件」の値に応じて処理を行う文**であり、条件の値を境に処理の内容を分けて用意することができる機能である。
<ul>
<li>if文</li>もし～であるならば（でないのなら）、〇〇する。
そうでないならば(else)、△△する。

<li>switch文</li>もし、〇〇の値が●●ならば、◎◎する。
△△の値が▲▲ならば、▼▼する。
いずれでもないのなら(default)、□□する。
</ul>

#関係演算子
関係演算子のうち、等号と不等号の話は前回した。残りの関係演算子は数学で扱ったものとほぼ変わらない。
<ul><li>==</li>左辺右辺が等しい
<li>!=</li>左辺右辺が異なる
<li>></li>左辺のほうが右辺よりも大きい
<li>>=</li>左辺のほうが右辺以上に大きい
<li><</li>右辺のほうが左辺よりも大きい
<li><=</li>右辺のほうが左辺以上に大きい
</ul>

#if文
基本構造はこう。


```
if(条件){
　　内容;
　　内容;
　　...
}
else{
　　内容;
　　内容;
　　...
}
```
**;（セミコロン）の位置にはくれぐれも注意。**ifやelseの直後に付かないし、内容の後には必ず付ける。また、特段の事情がない限りは、{}でifとelseそれぞれの内容を囲っておくこと。

以下間違い。

```Java:WrongEnclosing.java
...
int eggsInPoundCake = 2;
int theseEggsWeUse = 8;

if(theseEggsWeUse != eggsInPoundCake)
  System.out.println("パウンドケーキに必要な卵の数は2個です。");
  System.out.println("パウンドケーキのために卵を" + eggsInPoundCake +"個貰いますね。");
  theseEggsWeUse= theseEggsWeUse - eggsInPoundCake;
else
  System.out.println("卵をすべて使い切ってしまいました。");

 //2か所も間違っている。でもコンパイルできない理由はひとつだ。
```
{}で囲っていないため、if文は

　System.out.println("パウンドケーキに必要な卵の数は2個です。");
の段までしか掛かっていない。**下のelse文が接続していない扱いとしてコンパイルエラーが出る。**
もしelseがない場合、

　System.out.println("パウンドケーキのために卵を" + eggsInPoundCake +"個貰いますね。");
  theseEggsWeUse= theseEggsWeUse - eggsInPoundCake;

この2行はif文の外として扱われ、条件分けした(と思い込んでいる)にも関わらず勝手に処理される。

else if については今回は割愛。
#switch文
基本構造はこう。

```
switch(式){
　　case 値:
　　　内容;
　　　...
　　　break;
　　case 値:
　　　内容;
　　　...
　　　break;
　　default:
　　　内容;
　　　...
　　　break;
}
```
breakとは、**ブロック内の処理を強制的に終わらせてブロック外に抜ける文である。**switch文では、(defaultがあれば)defaultの内容まで該当する処理の中身すべてを表示してしまうため、処理の流れを操作したい場合にbreakが使われる。
以下間違え。

```Java:noBreak.java
...
int creditInSchool = 0;
char judge = 'A';
... //学校の単位に必要な各条件の検討
    //judgeが単位

//仮に彼はAの単位のままだったとする
switch(judge){
  case 'A':
    System.out.println("彼の単位は" + judge + "だ。");
  case 'B':
    System.out.println("彼の単位は" + judge + "だ。");
  case 'C':
    System.out.println("彼の単位は" + judge + "だ。");
  case 'D':
    System.out.println("彼の単位は" + judge + "だ。");
  default :
    System.out.println("彼の単位は" + judge + "、この単位は上げられないよ");
}

//結果
//彼の単位はAだ。
//彼の単位はAだ。
//彼の単位はAだ。
//彼の単位はAだ。
//彼の単位はA、この単位は上げられないよ
```
breakを入れないと、すべてのケースが実行されてしまう。

#終わりに
条件文は、実例かあるいは設問を数解くことが上達への道だろう。else ifが山積みの問題は難しいし、何より実践でごちゃごちゃにするとスパゲッティコード間違いなし。

#参考
出来るだけ自分で変数や式を書いてコンパイルしているので、完全に引用する場合はその旨記述する。

[やさしいJava 第7版](http://mana.on.coocan.jp/yasaj.html)
UE4のマルチプレイでの通信周りの処理についてのとっかかり

UE4の接続周りの処理を確認するときに参照した情報についてメモします。
メモのような情報を参照してOnlineSubsystemOculusなどの末端のコードまで含めて見ることで結構処理を追うことができました。
自分の理解のために図化したりしていますが理解が間違っている可能性があります。
また、自分にとって必要になった接続周りの一部しかまとめていません。


# 接続周り

接続周りは[NetDriver.h](https://github.com/EpicGames/UnrealEngine/blob/release/Engine/Source/Runtime/Engine/Classes/Engine/NetDriver.h)のコメントに詳しく書いてある。

## NetDrivers, NetConnections, and Channels、Game Net Drivers, Net Connections, and Channelsあたりの内容
![NetDriverNetConnectionChannel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/bd8c56bc-9120-b944-bb85-6aeff58fe6ed.png)

## Startup and Handshakingあたりの内容

![UE4サーバー起動(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/79109027-e106-1244-a204-8929664b67bb.png)

![UE4クライアントの接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/9da31b6e-4caf-c36d-be36-e43570b97409.png)

# ハンドシェーク周り

ハンドシェーク周りは[StatelessConnectHandlerComponent.cpp](https://github.com/EpicGames/UnrealEngine/blob/release/Engine/Source/Runtime/Engine/Private/PacketHandlers/StatelessConnectHandlerComponent.cpp)にも書いてある。

![ハンドシェーク.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16768/b8d4fb27-2d33-5f01-d1f5-ed7278364777.png)
PythonでWeb APIを叩く

**PythonでHTTPにアクセスする方法**

* urllibライブラリを使う
    * 標準で搭載
* Requestsライブラリを使う
    * 要インストール。こちらの方がシンプルにコードを書ける。

今回は、Requestsライブラリを使ってREST形式のWeb APIを扱います。

## HTTPメソッド

使う前に HTTPメソッド/REST API について簡単に触れておきます。
クライアントからサーバーに対して行うリクエストの種類をメソッドと呼び、基本的には以下の8種類があります。

| メソッド | 説明                                 |
| -------- | ------------------------------------ |
| GET      | リソースの取得                       |
| HEAD     | リソースのHTTPヘッダーのみを取得     |
| POST     | クライアントからサーバにデータを送る |
| PUT      | リソースを保存                       |
| DELETE   | リソースの削除                       |
| CONNECT  | サーバとの間にトンネルを確立         |
| OPTIONS  | サーバが許可しているメソッドを調べる |
| TRACE    | サーバまでのネットワーク経路を調べる |



REST API は、4つのHTTPメソッド「GET」「POST」「PUT」「DELETE」を使用したAPI実装のこと。

| HTTPメソッド | RESTにおける動作       |
| ------------ | ---------------------- |
| GET          | リソース取得（READ）   |
| POST         | リソース作成（CREATE） |
| PUT          | リソース更新（UPDATE） |
| DELETE       | リソース削除（DELETE） |



## Requestsライブラリ インストール

インストールはpipで行います。

```bash
pip install requests
```



## 使い方

基本的には以下のようにURLを指定してやればOK（パラメータは任意）

```python
import requests

url = "http://xxxxx"
pyaload = {"key1":"value1", "key2":"value2"}

r = requests.get(url, params=payload)
```

GET以外も使い方は同じ。

```python
r = requests.post(url)
r = requests.put(url)
r = requests.delete(url)
```



**レスポンス**

サーバからのレスポンスは、レスポンスの形式に応じて以下のように確認できます。

```python
# テキスト
r.text

# バイナリ
r.content

# JSON
r.json()

# 生レスポンス
r.raw

# レスポンスのHTTPステータスコード
r.status_code
```



## 実際に使ってみる

こちらの [郵便番号検索API](http://zip.cgis.biz) をPythonから叩いてみます。

```python
import requests

url = "http://zip.cgis.biz/xml/zip.php"
payload = {"zn": "1310045"}

r = requests.get(url, params=payload)

r.text
```



**実行結果**

```bash
'<?xml version="1.0" encoding="utf-8" ?>\n<ZIP_result>\n<result name="ZipSearchXML" />\n<result version="1.01" />\n<result request_url="http%3A%2F%2Fzip.cgis.biz%2Fxml%2Fzip.php%3Fzn%3D1310045" />\n<result request_zip_num="1310045" />\n<result request_zip_version="none" />\n<result result_code="1" />\n<result result_zip_num="1310045" />\n<result result_zip_version="0" />\n<result result_values_count="1" />\n<ADDRESS_value>\n<value state_kana="トウキョウト" />\n<value city_kana="スミダク" />\n<value address_kana="オシアゲ" />\n<value company_kana="none" />\n<value state="東京都" />\n<value city="墨田区" />\n<value address="押上" />\n<value company="none" />\n</ADDRESS_value>\n</ZIP_result>\n'
```



## 参考にしたサイト

* https://requests-docs-ja.readthedocs.io/en/latest/
* https://note.nkmk.me/python-requests-web-api/
* https://tsuyopon.xyz/2019/01/31/understand-4-http-methods/
* https://tools.ietf.org/html/rfc7231
[React]別々に useState で定義した相互依存する state は期待通り動かない

React の useState をいろいろいじってるときに微妙にハマったのでメモ。

useState を複数使って state を定義しているときに、それらが相互依存しているとき期待通りに動かなかった。

なので、相互依存しているものは同じ state に入れることで解消しました。

## サンプル
`loading` が `true` のとき、 `submit` できないようにしたいとする。
(`loading === true` のとき、 `canSubmit === false` にしたい)

```jsx
import React, { FC, useState, useEffect } from 'react';

const StateDependOnEachOther: FC = () => {
  // 別々の state に定義したバージョン
  const [canSubmit, setCanSubmit] = useState(true);
  const [loading, setLoading] = useState(false);

  // loading の状態に合わせて canSubmit を変える
  const submitting = () => {
    setCanSubmit(() => {
      if (loading) {
        return false;
      }

      return true;
    });
  };

  // 同じ state に定義したバージョン
  const [state, setState] = useState({
    canSubmit2: true,
    loading2: false,
  });

  // loading の状態に合わせて canSubmit を変える
  const submitting2 = () => {
    setState(prevCanSubmit2 => {
      if (prevCanSubmit2.loading2) {
        return {
          ...prevCanSubmit2,
          canSubmit2: false,
        };
      }

      return {
        ...prevCanSubmit2,
        canSubmit2: true,
      };
    });
  };

  useEffect(() => {
    // loading を true に変更
    setLoading(true);
    setState(prevState => {
      return { ...prevState, loading2: true };
    });

    // loading === true のとき、 canSumit は false にしたい
    submitting();
    submitting2();
    // eslint-disable-next-line
  }, []);

  return (
    <>
      <div>別々の useState で定義: canSubmit: {`${canSubmit}`}</div>
      <div>同じ useState で定義 state.canSubmit2: {`${state.canSubmit2}`}</div>
    </>
  );
};

export default StateDependOnEachOther;
```

## 結果
- 別々の useState で定義した場合は loading の変更が反映されず、 canSubmit は true のまま
- 同じ useState 定義した場合は loading の変更が反映され、 canSubmit は false になる

実際に動かしたものが[こちら](https://curiosity-driven.web.app/tools/state-depend-on-each-other)

とりあえず useState に定義すればいいと思ってたけど、関連するものはまとめる、または1コンポーネントの中で useState は一つにして、必要なものは全部その中に突っ込む方が良さそう。
UnityのAndroidでバックキーを押した挙動をホームボタンと一緒にする

#  使用環境
Unity2019.2.11

# 結論
ゲーム内にあるオブジェクトどれかのUpdate内を以下のようにすると、
バックキーを押した際にタスクキルではなくアプリのタスクをバックグラウンドに持っていける

```C#
   void Update()
   {
      if (Input.GetKeyDown(KeyCode.Escape))
      {
#if UNITY_ANDROID && !UNITY_EDITOR
            AndroidJavaObject activity = new AndroidJavaClass("com.unity3d.player.UnityPlayer").
                GetStatic<AndroidJavaObject>("currentActivity");
            activity.Call<bool>("moveTaskToBack" , true);
#endif
      }
   }
```
コードレビューのコメントにラベルを付けて意図を正しく伝える

## 本記事について

コードレビューのコメントにラベルを付けることで、意図をより正しく伝えることが出来ます。
私が関わる開発では以下のラベルを運用しています。

## ラベル

| ラベル | 意味 |
| :-: | --- |
| ![must](https://img.shields.io/badge/review-must-red.svg) | 必ず対応してほしい！ | 
| ![imo](https://img.shields.io/badge/review-imo-ff69b4.svg) | 自分の意見や提案、好み。 自分ならこう書くけどどうかな？ |
| ![nits](https://img.shields.io/badge/review-nits-green.svg) | 些細な指摘。インデントやタイポなど。 |
| ![ask](https://img.shields.io/badge/review-ask-blue.svg) | 質問や確認。コードの意味や背景が分からないから教えて！こういう理解でOK？ |
| :+1: | (・∀・)ｲｲﾈ!! |

## GitHubでの利用

GitHubで利用する場合は [Saved replies](https://github.com/settings/replies) に登録すると、とても便利です。
<img width="1335" alt="スクリーンショット 2020-03-05 8.28.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/b8762056-ee96-25aa-b739-86cd5826804f.png">

利用する場合はこのように使えます。
<img width="977" alt="スクリーンショット 2020-03-05 8.32.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40689/f80f2d4e-5b98-1af8-5757-ccd8b1e2dfdd.png">

## 類似記事

私の運用を紹介したかったため投稿しましたが、類似記事は以下のようにたくさんあります。

- [コードレビューを効率化するちょっとした工夫 - Qiita](https://qiita.com/yotsak83/items/6cfe6c57d003d0926973)
- [レビューコメントにラベルをつけるだけで開発効率があがって幸せになれそうな話 - Qiita](https://qiita.com/godgarden/items/3ea57a7ee6dbff1df6e6)
- [GitHubでのコードレビューにてコメントにラベルをつける - Qiita](https://qiita.com/nunulk/items/ac35aec43194e72dc142)
【Django】静的ファイル関連の設定について(css,js)

###Djangoにてcssファイルなどの設定方法をまとめてみた

##静的ファイルとは
- cssファイル
- jsファイル
- 画像ファイル
- 動画ファイル

などのクライアントからのリクエストによって、内容が変化しないファイルのことを静的ファイルと言います。今回はその中でcssファイルやjsファイルなどhtmlテンプレート関連ファイルの設定についてまとめます。
画像ファイルや動画ファイル（ユーザからアップロードを受ける静的ファイル）の場合についてはこちらをご参照ください。
https://qiita.com/Suchmos7/items/ca75b7daf969403735e1

## Setting.pyでの設定
設定が必要なパラメータは主に3つです。
- STATIC_URL
- STATICFILES_DIRS
- STATIC_ROOT

**STATIC_URL**
静的ファイル（css,js）配信用のURLを指定する。
デフォルトで'/static/'となっている。
http(s)://ホスト名/static/...
でアクセスできるようになる。

```python:settings.py
STATIC_URL = '/static/'
```


**STATICFILES_DIRS**
プロジェクト内で静的ファイルを保存する場所を指定します。
デフォルトでの保存先は
プロジェクト名/アプリ名/static/アプリ名/...
となっているが、複数のアプリケーション内でcssファイルを用いたい時などにいちいちstatic/アプリ名/...と配置するのは面倒なので、
以下のように定義し、manage.pyやアプリケーションフォルダがあるプロジェクトディレクトリ直下に置くのが好ましい。

```python:settings.py
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')
                    ] 
```

ちなみにBASE_DIRはプロジェクト直下を指すパスで、以下のように同じくsettings.pyにて定義した変数。

```python:settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 
```


**STATIC_ROOT**
setting.pyにてDEBUG=Falseの時に参照される静的ファイルの保存先。つまり本番用。
セキュリティの観点からプロジェクト内での静的ファイルの保存先と本番での保存先は違ったほうが良いという理由から、保存先を変更する。

```python:settings.py
STATIC_ROOT = '/var/www/プロジェクト名/static' 
```

##urls.pyでの設定
```python:urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app1.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
```
まず、settingsとstaticをインポートします。
そしてurlpatterns変数に上記のように付け足します。
第一引数には静的ファイルの配信URL、document_root引数には静的ファイルの保存先を指定します。
これによりURLと保存先が紐づけられ、URLにアクセスしたとき、静的ファイルの保存先につながるようになります。
ここでSTATICFILES_DIRSは使わないのか？と思われたと思うのですが、これはSTATIC_ROOTが設定されていなかったときSTATICFILES_DIRSが参照される。

##htmlテンプレートでの呼び出し方
```html
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<img src="{% static 'images/logo.png' %}"> 
```

まず{% load static %}でstaticが使えるようにします。
そして、各タグ内のurl指定にて
{% static 'ファイル名' %}
と指定します。これはSTATICFILES_DIRSまたはSTATIC_ROOT以下からのパスを記載します。

上の例だと

```
project -static - images - logo.png
                L style.css
        Lmanage.py
```

といった構造になります。
rails sができない時の対処方

# rails sを叩くとエラー出力

spring stopを試して解決できず少し詰まったので備忘録として残します。

```
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/2.5.0/fileutils.rb:90: warning: already initialized constant FileUtils::VERSION
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/fileutils-1.4.1/lib/fileutils.rb:105: warning: previous definition of VERSION was here
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/2.5.0/fileutils.rb:1188: warning: already initialized constant FileUtils::Entry_::S_IF_DOOR
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/fileutils-1.4.1/lib/fileutils.rb:1284: warning: previous definition of S_IF_DOOR was here
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/2.5.0/fileutils.rb:1446: warning: already initialized constant FileUtils::Entry_::DIRECTORY_TERM
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/fileutils-1.4.1/lib/fileutils.rb:1568: warning: previous definition of DIRECTORY_TERM was here
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/2.5.0/fileutils.rb:1501: warning: already initialized constant FileUtils::OPT_TABLE
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/fileutils-1.4.1/lib/fileutils.rb:1626: warning: previous definition of OPT_TABLE was here
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/2.5.0/fileutils.rb:1555: warning: already initialized constant FileUtils::LOW_METHODS
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/fileutils-1.4.1/lib/fileutils.rb:1685: warning: previous definition of LOW_METHODS was here
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/2.5.0/fileutils.rb:1562: warning: already initialized constant FileUtils::METHODS
/Users/arakitakuro/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/fileutils-1.4.1/lib/fileutils.rb:1692: warning: previous definition of METHODS was here
=> Booting Puma
=> Rails 5.2.4.1 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.4 (ruby 2.5.1-p57), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
Exiting
Traceback (most recent call last):
	44: from bin/rails:3:in `<main>'
	43: from bin/rails:3:in `load'
以下略
```
# 原因
rails sしたままターミナルを閉じたのが原因でした。

# 解決方法
下記コマンドを入力し、出力されるPIDをコピー

```
lsof -i :3000 #PIDを確認

kill -QUIT PIDをペースト
```

これで解決しました。
mac,linux使いに教えてあげたいマイナーコマンド10選(command)


とりあえず一覧だけ

おすすめコマンド第五位:「code .」
おすすめコマンド第四位:「cd -」
おすすめコマンド第三位:「exa」
おすすめコマンド第二位:「nohup + 何か　+ &」
おすすめコマンド第一位:「Ctrl + R」

詳細は
http://www.minekawada.com/mac-linux-good-cmd.html
[npm-scripts] sass/scssの自動コンパイルとbrowser-sync の環境を久々に作ってみた [画像あり]

# cssの自動コンパイルとbrowser-sync の環境を久々に作ってみた

以前はglupを使っていましたが、最近はnpm-scriptsが主流ですよね。
最近たまたまHTMLを作成することがあったのでついでに記事にしてみました

ということで、今回はnpm-scriptsを使ってSass/Scssのコンパイルとブラウザ同期をいう
超基本的だけど、使えるタスクランナーを構築しました。

---

最終的に実行するとこんな感じになります。

htmlやcssが変更保存されると、自動でSass/Scssのコンパイルをして且つブラウザのリロードが走ります。

ちょっと画像では伝わりづらいですが、保存した時にブラウザが
自動でリロードがかかる瞬間はワクワクしますよね。

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344266/cca33a48-23b3-4a34-ae9b-460895e1dc82.gif)

---

node と npm はあらかじめインストールされている前提でいきます！

```
$ node -v
v12.16.1
$ npm -v
6.14.2
$
```

## npm 初期設定
まず作業ディレクトリにいって initコマンドを打ちましょう

```
$ npm init
$ ls
package.json
$
```

次に、使用するnpmモジュールをインストールしましょう

最後の --save-dev　はローカルインストールのことです。 
開発段階ではとりあえずつけておくのがいいでしょう。
今回使うのは以下になります。
サクッと消すことも可能なので、なにも考えずにインストールしてしまいましょうw

```
## ブラウザ同期
npm install browser-sync --save-dev
## Sass/Scss をcssに変換
npm install node-sass --save-dev
## ベンダープレィックスと圧縮を行う
npm install postcss-cli cssnano autoprefixer --save-dev
## 変更監視モジュール
npm install watch --save-dev
## 同時タスク実行
npm install npm-run-all --save-dev
```

## フォルダ構成
ディレクトリ構成 はこんな感じです。
(今思うと別にassetsフォルダはいらなかった...?)

```
./src/assets/images  ## 今回の記事では未使用
./src/assets/js      ## 今回の記事では未使用
./src/assets/html
./src/assets/css  ## ここはscssがコンパイルされたら配置される
./src/assets/scss
```

## package.jsonの設定

package.jsonがnpmを起動するときに鍵になります。
今回の設定ではscriptsのところだけをこのように変更しています。


```
(略)
  "scripts": {
    "all" : "run-p server watch:css",
    "css:scss": "node-sass src/assets/scss/style.scss -o src/assets/css --source-map src/assets/css",
    "css:postcss": "postcss src/assets/css/style.css -o src/assets/css/style.min.css",
    "watch:css": "watch 'run-s css:scss css:postcss' ./src/assets/scss",
    "server": "browser-sync start --server --files='src/assets/html/*.html, src/assets/css/*.css, src/assets/js/*.js' --startPath='src/assets/html'",
    "test": "echo 'npm run test....'"
  },
(略)
```

## postcss.config.js
postcss-cliを使用すうのに使用する定義ファイルです。
今回は他様のものを ~~パクって~~ 参考にさせていただきました。
package.jsonと同じディレクトリに配置しておけばOKです

```
$ cat ./postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['last 2 versions'],
      cascade: false
    }),
    require('cssnano')({
      preset: 'default',
    })
  ]
}
$
```

最終はこんな感じなります。

```
$find . -type f  | egrep -v '(node_modules|git)'
./package-lock.json
./package.json
./postcss.config.js
./src/assets/css/style.min.css.map ※コンパイル後作成される
./src/assets/css/style.min.css　　　※コンパイル後作成される
./src/assets/css/style.css.map　　　※コンパイル後作成される
./src/assets/css/style.css　　　　　 ※コンパイル後作成される
./src/assets/scss/style.scss
./src/assets/html/index.html
$
```

## 実行方法
package.jsonと同じ階層で下記を実行します。

```
## ブラウザsyncとコンパイル
npm run all

## 特定の作業のみを行いたい場合(例えばcssのコンパイル)
npm run watch:css
```

動画の右下のターミナルでは変更のたびに↓みたいのが出て、はじめて動いたときとかは
胸熱になるんですが、PC名とかフルパスがもろに表示されていたので出力を/dev/nullにしてごまかしていますw

```
[Browsersync] File event [change] : src/assets/css/style.min.css
```

### 最後に

以下サイトを参考にさせていただきました。
 [はじめてのbrowserSync](https://qiita.com/ta-ke-no-bu/items/e1972ff0f2ddfaf84b2b)
 [npm-scriptで開発環境を作ってみよう](https://olein-design.com/blog/build-webpage-by-npm-script)




それではよい、フロントエンド ライフを！
WindowsUpdate更新履歴チェックメモ

(※他サイトから拾い物なので、リンク切れや内容についてはわかりません。私的に便利メモ程度)

・更新プログラムのインストール履歴の時刻を知る方法
　コントロールパネルのセキュリティとメンテナンスからメンテナンスの信頼性履歴の表示で更新完了時刻(※再起動時間みたい？)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597117/f9253926-78a3-cbeb-5d14-bb1218a87f59.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597117/de6b1668-90e1-ec85-b70f-3c1708c1d993.png)

・イベントビューアー Windows ログ → Setup で開始時刻、再起動前の終了時刻


[【Powershell】Windows Update 一覧を取得(サンプル)](http://moriroom.my.coocan.jp/site1/?p=3290)
└Powershelでも日付と時間出力できちゃう。ちなみに一度でもインストールしていた履歴があると、、インストール済みとみなされてるかも。そこは要確認で。



[秘密のWindows Update for Businessショー](https://www.atmarkit.co.jp/ait/articles/1806/06/news010.html)
└Windowsの更新の設定Win1709~　更新延長の日数設定していると、定期のセキュリティパッチがあたらないとか。。バージョン指定のPCは要チェック！


[2020 年 2 月のセキュリティ更新プログラム (月例)](https://msrc-blog.microsoft.com/2020/02/11/202002-security-updates/)
└マイクロソフト公式　月例(毎月第２火曜　日本時間では第２水曜または第３水曜)の更新プログラムに何のパッチが配布されているかの確認

[Japan Security Team]
(https://msrc-blog.microsoft.com/category/jpsecurity/)
└上記同サイト　マイクロソフト公式　WindowsUpdateとはなんぞや的な基本をわかりやすく解説。

[初心者備忘録](https://www.ka-net.org/blog/?p=11757)
└自動更新がうまくいかないときは手動でWindowsカタログから！それをVBScriptで自動化に。
mysqlに接続

#mysql-connector-pythonを使う

```py
import mysql.connector

conn = mysql.connector.connect(host='127.0.0.1', user='root', password='')
cursor = conn.cursor()

cursor.execute('CREATE DATABASE test_mysql_database')

cursor.close()
conn.close()

conn = mysql.connector.connect(host='127.0.0.1', database='test_mysql_database')
cursor = conn.cursor()
cursor.execute('CREATE TABLE persons('
               'id int NOT NULL AUTO_INCREMENT,'
               'name VARCHAR(14) NOT NULL,'
               'PRIMARY KEY(id))')
cursor.execute('INSERT INTO persons(name) values("Mike")')
conn.commit()

cursor.execute('SELECT * FROM persons')
for row in cursor:
    print(row)

cursor.close()
conn.close()
```
出力：

```
(1, 'Mike')
```
find関数による文字列判定法

#背景
競プロやpaizaのスキルチェック問題などをやる中で、比較的出題率の高い問題（気のせい？）の「文字列Aの中に文字列Bが入ってるかを判定するプログラム」はこのアルゴリズムで解く！というのが無かったので備忘録として残しておこうと思います。

#前提
find関数を利用します。文字の比較にはcompare関数もありますが、compare関数が二つの文字列を比較して**どれだけ離れているか**を返すのに対し、find関数では二つの文字列を比較して**その文字が含まれていればその位置を返す**という文字が含まれていることを前提としているため、使いやすいと考えました。
（compare関数でも文字列の一部を使って比較することができるので、二つの文字列の離れている距離が0という結果を返せば使用できると思います。）

#find関数の仕様
>find関数は、stringクラスの関数で指定した文字列が先頭から検索してどこにあるのかを調べるために使います。指定した文字列が見つからなかった場合にはnposという値を返します。このnposは見つからなかったことを表し、数値的には「-1」となります。
[【C++入門】文字列を検索するfind関数(全検索、正規表現)](https://www.sejuku.net/blog/49318)

比較して見つかればその場所の数値を、見つからなければnpos(=-1)を返すというわけです。
⇒今回は見つかった場所の数字はどうでも良いので、返り値がnposであればfalse、それ以外であればtrueが返ってくることだけを利用します。

#実装
実装は単純で、nposとの比較を行いました。

```strcompare.c++
    str1="Qiita";
    str2="Qii";
    str3="Qui";

    if(str1.find(str2)!=std::string::npos){
        cout<<"true"<<endl;
    }
    //true
    //"Qii"が"Qiita"に入っていることの証明
    
    if(str1.find(str3)!=std::string::npos){
        cout<<"true"<<endl;
    }
    //false(表示されない)
    //"Qui"は"Qiita"に入っていないことの証明
```

簡単に比較できていることがわかります。
ちなみにstd::string::nposを-1に変更しても動きます。

#まとめ
私自身、今までの文字列の比較は文字列Aに文字列Bの一文字目が含まれていたらそこからfor文で回し続けて判定して途切れたら文字列Bの次の文字に戻るという奇怪なコードを書いてましたが、これを使えば綺麗なコードを書くことができると思います。