OmniAICreator/Qiita-1.07M huggingface dataset:
RSpecのDefine negated matcherが地味に便利

RSpecのDefine negated matcherが地味に便利でした。
特にマッチャ合成式を書くときに便利です。

## マッチャ合成式（Compound Matcher Expressions）とは

andやorを使って、マッチャをつなげて書くことができます。
https://rspec.info/blog/2014/01/new-in-rspec-3-composable-matchers/

### 例
適当ですが、Shopというモデルのインスタンスメソッド `receive_order` を実行した結果、CustomerモデルとOrderモデルのレコードが作成されることを確かめるテストがあるとします。

```ruby
it 'customerとorderを作る' do
  expect { shop.receive_order }.to change(Customer, :count).by(1)
  expect { shop.receive_order }.to change(Order, :count).by(1)
end
```
　
上記は、マッチャ合成式を使うと以下のように書くことができます。
無駄な繰り返しが無くなって、コード量が減ります。 👏

```ruby
it 'customerとorderを作る' do
  expect { shop.receive_order }.to change(Customer, :count).by(1)
    .and change(Order, :count).by(1)
end
```

## Define negated matcherとは

マッチャの否定形を作ることができます。

https://relishapp.com/rspec/rspec-expectations/docs/define-negated-matcher

## Define negated matcherの何が便利か
### 使用例

先ほどの`receive_order`のテストで、Productモデルのレコードは作られないこともテストしたいとします。
このように書くと、テストは失敗します。

```ruby
it 'customerとorderを作るがproductは作らない' do
  expect { shop.receive_order }.not_to change(Product, :count)
    .and change(Customer, :count).by(1)
    .and change(Order, :count).by(1)
end

# NotImplementedError:
#   `expect(...).not_to matcher.and matcher` is not supported, since it creates a bit of an ambiguity. Instead, define negated versions of whatever matchers you wish to negate with `RSpec::Matchers.define_negated_matcher` and use `expect(...).to matcher.and matcher`.
```

マッチャ合成式を使っている時にnotは使えないみたいです…
テストを分割すればエラーになりませんが、できれば１つにまとめて、すっきりとさせたい気持ちがあります。

```ruby
it 'customerとorderを作る' do
  expect { shop.receive_order }.to change(Customer, :count).by(1)
    .and change(Order, :count).by(1)
end

it 'productは作らない' do
  expect { shop.receive_order }.not_to change(Product, :count)
end
```

ここでDefine negated matcherを使います。
下記のようにchangeの否定系のマッチャを定義します。

```ruby
# 第一引数に定義する否定系のマッチャ
# 第二引数に否定系にしたい既存のマッチャ
RSpec::Matchers.define_negated_matcher :not_change, :change
```

定義する場所は、マッチャを使いたいテストがあるspecファイルの先頭や`spec/support`に`matchers.rb`など好きなファイル名で作成すると良いと思います。

上で定義したchangeの否定系のマッチャを使えば、先ほどのテストは以下のように書くことができます。

```ruby
it 'customerとorderを作るがproductは作らない' do
  expect { shop.receive_order }.to not_change(Product, :count)
    .and change(Customer, :count).by(1)
    .and change(Order, :count).by(1)
end

# もちろん and の後にも書ける

it 'customerとorderを作るがproductは作らない' do
  expect { shop.receive_order }.to change(Customer, :count).by(1)
    .and change(Order, :count).by(1)
    .and not_change(Product, :count)
end
```

以上、Define negated matcherが便利だと思った話でした。🍵
rsync でディレクトリごとコピーする際に気をつけること~ディレクトリの中身をぶちまけないために

# 結論
```NG1.sh
rsync -r from_dir/from_file/ to_dir/
```
元ディレクトリのパスにケツスラッシュをつけると、from_dir　はコピーされず、from_dir以下にあるフォルダ、ファイルがto_dir以下にコピーされる

```result

├── from_dir
│   ├── from_1.txt
│   └── from_2.txt
└── to_dir
    ├── from_1.txt
    └── from_2.txt
```

そのため、

```OK1.sh
rsync -r from_dir/from_file to_dir to_dir/
```
のようにケツスラッシュをなくすか、

```OK2.sh
rsync -r from_dir/from_file/ to_dir to_dir/from_dir
```
のように、ケツスラッシュをつけた上でコピー後に保存したいdirの名前を明示的に書く必要がある（この場合はto_dirの方のケツスラッシュはつけてもつけなくてもOK

```expected_results
.
├── from_dir
│   ├── from_1.txt
│   └── from_2.txt
└── to_dir
    └── from_dir
        ├── from_1.txt
        └── from_2.txt
```

# 前書き
リモートでscpを使うのはもうやめた方がいいという話があるそうです。

また、スパコンにデータをコピーする際に途中でkill されたので、途中から実行することができる（ディレクトリを同期できる）scp ではなくrsyncを使ってみました

その結果rsync のディレクトリ指定の罠にハマって、コピーしたい元フォルダ以下のファイルを全てスパコンにぶちまけることになったので備忘録


scp とrsync の比較(引用)[^1]

| path 指定| scp | rsync |
|:-:|:-:|:-:|
| from/files_dir/ dest/  | NG  | NG  |
| from/files_dir dest/  | NG  | OK  |
| from/files_dir/ dest/files_dir  | OK  | OK  |
| from/files_dir dest/files_dir  | OK  | NG  |
| from/files_dir/ dest/files_dir  | OK  | OK  |
| from/files_dir dest/files_dir/  | OK  | NG  |



[^1]: 引用元　http://oretachino.hatenablog.com/entry/2014/12/11/003815
Raspberry PiとDocker ComposeでDLNA機能付きNASを秒速で構築する

# やったこと
Raspberry Pi 3とUSB HDDを使ってLAN上にNASを立てた。

これまでもDockerを使わずに同じ事をやっていたが、ラズパイに色々な機能を付けたり消したりして遊んでいるうちに環境が汚れてくるのが気になりはじめた。そこでRaspbian Busterへのアップグレードを機に環境を一から作り直して、Docker Composeで管理することにした。

### メリット
* 環境が汚れないので、他のサービスも自由に立てたり消したりできる
* Raspberry Pi自体をバックアップする際に、SDカードのダンプ(8GB)を取る必要が無くなった(仮にトラブったとしてもdocker-compose.ymlから秒速で復元できるので)

## 下準備
* Raspbianをセットアップし、コマンドが打てる状態にする
* `sudo apt update` `sudo apt full-upgrade`
* 外付けハードディスクをブート時に自動でマウントするよう設定する(今回は`/mnt/hdd1`へマウントした)
* [Docker Composeを導入する](https://qiita.com/hoshi621/items/7906274326ef3013a73d)

## サービスを立ち上げる

1.  以下のdocker-composeを使って`docker-compose up -d`する
2.  `\\[Raspberry Piの名前]\share`にネットワークからアクセスできることを確認する
3.  `\\[Raspberry Piの名前]\share\media`にDLNAで再生したい動画ファイルを突っ込む
4.  おわり


```docker:docker-compose.yml
version: '3.4'

services:
  minidlna:
    image: cytomich/rpi-docker-minidlna
    container_name: minidlna
    volumes:
      - /mnt/hdd1/media:/media:z
    environment:
      - MINIDLNA_MEDIA_DIR=/media
      - MINIDLNA_PORT=8200
      - MINIDLNA_FRIENDLY_NAME=NASpi
    network_mode: "host"
    restart: always
      
  samba:
    image: dperson/samba
    container_name: samba
    networks:
      - default
    ports:
      - "137:137/udp"
      - "138:138/udp"
      - "139:139/tcp"
      - "445:445/tcp"
    read_only: true
    tmpfs:
      - /tmp
    restart: always
    stdin_open: true
    tty: true
    volumes:
      - /mnt/hdd1:/mnt/share:z
    command: '-s share;/mnt/share;yes;no;yes'

```

# 結果
パフォーマンスは良好です。DLNA機能についても、数百kbpsのMP4程度なら問題なく再生できました。あくまでRaspberry Piなので過信は禁物ですが、もう少しなら余裕がありそうです。

`docker-compose.yml`をカスタマイズして、自分だけの最強ホームサーバーを作り上げましょう！

# 参考にしたもの
* [Docker上 で samba を動かしてファイル共有する](https://qiita.com/nikola-f/items/ee3d443f84128b0202a7)
* [Raspberry Piにdockerとdocker-composeを入れてみた](https://qiita.com/hoshi621/items/7906274326ef3013a73d)
* https://github.com/cytomich/rpi-docker-minidlna
JavaScript基本文法

##関数宣言
function 関数名(仮引数,仮引数,....){
  処理;
  処理;
  return 返り値;
  (return以降の処理は実行されない)
}
###呼び出し
関数名(実引数,実引数,...);


##関数式           ↓無名関数
const 定数名 = function(仮引数,仮引数,....){
  処理;
  処理;
  return 返り値;
  (return以降の処理は実行されない)
};

###呼び出し
定数名(実引数,実引数,...);
CustomVisionのモデルで推論(Jetson Nano)

# はじめに
Jetson NanoでCustomVisionのモデルを動かします。
[この記事](https://medium.com/microsoftazure/running-a-gpu-enabled-azure-custom-vision-docker-container-on-a-nvidia-jetson-nano-db8747b00b4f)をある程度参考にやっていきます。

# 環境
- JetPack4.4

# Jetson Nanoのセットアップ

[この記事](https://qiita.com/yosiiii/private/7ac2d64ce2fd28c43754)などを参考にセットアップを済ませましょう。GUIのままでも推論はできたのでCUIに切り替えなくても大丈夫です。

# CustomVisionモデルのダウンロード

[ここ](https://docs.microsoft.com/ja-jp/azure/cognitive-services/custom-vision-service/export-your-model)を参考にモデルをエクスポートします。

まずCustomVisionで以下のどれかのドメインで学習します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685335/4e6a8784-487f-09e8-fc05-8dd0dfe927cc.png)

学習が終わったらCustomVisionのPerformanceタブ→Exportを押して**Docker**の**Linux**でエクスポート、ダウンロードします。
![export.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685335/b252dc0d-0b9f-4ae0-aac3-e19215062cc9.png)
エクスポートしたモデルのzipファイルを```scp```などでNanoに持ってきて展開します。

```
unzip CustomVision.zip -d customvision
```

展開した```customvision```フォルダの中に、DockerFileがあると思います。それを以下のように編集します(python3-opencvいらないかも)。

```Dockerfile:Dockerfile
FROM nvcr.io/nvidia/l4t-tensorflow:r32.4.4-tf2.3-py3
RUN apt-get update -y
RUN DEBIAN_FRONTEND=noninteractive apt-get install -y python3-opencv
RUN pip3 install flask pillow
COPY app /app
# Expose the port
EXPOSE 80
# Set the working directory
WORKDIR /app
# Run the flask server for the endpoints
CMD python3 -u app.py
```

Tensorflow2.3が入っているみたいです。[ここ](https://ngc.nvidia.com/catalog/containers/nvidia:l4t-tensorflow)を参考に、Tensorflow1.15でも入れられそうです。ビルドに思ったより時間はかかりませんでした。

```
docker build . -t mycustomvision
```

ビルドができたらコンテナを起動します。

```
docker run -p 127.0.0.1:80:80 -d mycustomvision
```

コンテナ一覧を表示すると、起動しているのがわかります。

```
$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
10548014b918        mycustomvision      "/bin/sh -c 'python3…"   2 hours ago         Up 2 hours          127.0.0.1:80->80/tcp   sleepy_elgamal
```

# 推論
PythonでPOSTして推論してみます。

```python:inference.py
import json
import requests

file = "./test.png"

with open(file,"rb") as f:
    data = f.read()

url = "http://127.0.0.1/image"
files = {"imageData":data}

response = requests.post(url,files=files)
results = json.loads(response.content)
print(results)
```

↓結果

```
$ python3 inference.py
{'created': '2020-11-05T14:58:32.073106', 'id': '', 'iteration': '', 'predictions': [{'boundingBox': {'height': 0.16035638, 'left': 0.738249, 'top': 0.41299437, 'width': 0.05781723}, 'probability': 0.91550273, 'tagId': 0, 'tagName': '1'}], 'project': ''}
```

ちゃんと結果が得られました。

# おわりに
お疲れさまでした。
もともとのDockerfileではTensorflow2.0.0が指定されていましたが、2.3.0でも大丈夫なのかどうかはわかりません。とりあえず正しそうに推論ができているのでよしとします。

間違い等ありましたらご指摘よろしくお願いします。
ruby 満員電車の乗車率

#rubyで満員電車の乗車率を求める
一般的な通勤電車では、一両辺りの乗車定員は140人ほどと言われています。

一両に乗車した人数が入力として与えられるので、

一両辺りの乗車定員を140人としたときの乗車率を出力してください。


ただし、乗車率（%）は以下で求めることができます。

（乗車人数）/（乗車定員）× 100
###入力される値
入力は以下のフォーマットで与えられます

n

・nは一両に乗車した人数
###期待する出力
乗車率xを求め、

x%

（%は半角）のように出力してください。

ただし、乗車率は小数点以下を切り捨てて出力してください。
###条件
すべてのテストケースにおいて、以下の条件をみたします。

0 ≤ n ≤ 400
###入力例1
200
###出力例1
142%
#結論
```java:
n = gets.to_f
t = 140
s = n / t * 100
print s.floor
print "%"
```
#ポイントはto_fメソッドとfloorメソッド
##to_fメソッドは小数点を表示させるメソッド。逆にfloorメソッドは小数点以下を切り捨てるメソッドなので今回のような計算式にはこの二点が必要不可欠になる
#以上
MySQLを起動する際のERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

#エラー内容
MySQLを起動させようと思い、以下のコマンドを入力しパスワードを打ち込むとエラーが・・・

```
$mysql -u root -p
Enter password: 

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

パスワードは間違っていないはず・・・。

#解決方法
起動する際に最初に以下コマンドを打ち込むのを失念していました。
凡ミスですね。

```
$mysql.server start
Starting MySQL
. SUCCESS! 
```

再度トライ！

```
$mysql -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 2
Server version: 5.7.32 Homebrew

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>
```

無事起動できました！
Electron パッケージ化する時にハマったこと。Cannot find module '...'


# ハマった内容
ローカルでは正常動作するのに、パッケージ化して作成した実行ファイルだと下記エラーがでてしまう。
`Error: Cannot find module '...' `

# 解決方法
```
作成中アプリルート/
　├ node_modules/
　├ src/
　│　├ index.html
　│　├ index.css
　│　├ main.js
　│　├ package-lock.json
　│　└ package.json
　├ package-lock.json
　└ package.json
```
自分が作成していたアプリは上記のようなディレクトリ構成で、作成中アプリのルートディレクトリで必要なNodeモジュールを `npm install xxx`でインストールしていた。

それを /src（ソースパス）と同じディレクトリ内で必要なNodeモジュールをインストールすることでエラーがでなくなった！！！

参考リンクの回答では、下記のようにNodeモジュールのインストールする先を変えているみたい。
><dl>
  <dt>作成中アプリのルートディレクトリ</dt>
  <dd>devDependencies</dd>
  <dt>/src</dt>
  <dd>dependencies</dd>
</dl>
>[node.js - Include node_modules while packaging Electron desktop app? - Stack Overflow](https://stackoverflow.com/questions/36967397/include-node-modules-while-packaging-electron-desktop-app)

# 原因

```自分が使用していたOSX用のパッケージ化コマンド
npx electron-packager ./src FirstApp --platform=darwin --arch=x64 --overwrite --icon=src/icon/osx/app.icns
```
> `electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]`
> [electron-packagerドキュメント](https://github.com/electron/electron-packager)

<sourcedir>で指定したソースディレクトリ配下が .app内の`Contents/Resources/app/`内にパッケージングされて **作成中アプリのルートディレクトリでインストールした /node_modulesがパッケージ化した時に含まれないため**

# 参考
* [Node.js - electronでパッケージングして作成したアプリが動かない（エラー：Cannot find module）｜teratail](https://teratail.com/questions/165271)
* [electron-packagerでビルド対象のソースパスにpackage.jsonとnode_modulesが無いとエラーになる - †でおきしブログ†](https://deokisi.hateblo.jp/entry/2019/06/06/080852)
* [electron-packager FAQ Why isn't the relative path in my app code working?](https://github.com/electron/electron-packager/blob/master/docs/faq.md#why-isnt-the-relative-path-in-my-app-code-working)
Reactでaxiosを使ってJSONPのデータを取得する

# JSONP
クライアントが提供するAPIがJSONPしかなかった。
レスポンスのコールバック関数名が固定だったのだけれど、その時の実装方法が意外とインターネットに書かれてなくて厄介だったのでメモ。

## npm
`npm i axios`
- [axios  -  npm](https://www.npmjs.com/package/axios)
`npm i axios-jsonp`
- [axios-jsonp  -  npm](https://www.npmjs.com/package/axios-jsonp)


## JSONPレスポンス
```jsonp
callback({
 "title": "test",
 "text": "sample"
})
```

## サンプルコード
``` js
import React from 'react'
import axios from 'axios'
import axiosJsonpAdapter from 'axios-jsonp'

const App = () => {
  //グローバルなwindowオブジェクトにコールバック関数を登録する
  window.callback = json => console.log(json)

  React.useEffect(()=>{
    axios.get('http://hogehoge/getjsonp', {
      adapter: axiosJsonpAdapter
    })
  },[])
}

export default App

```

## ポイント
リクエストが完了した時点で、JSONP内で指定されている関数名が実行されるが、コード内で関数が定義されていないと`callback is not defined`というエラーになってしまう。
その関数はグローバルな必要があるため、windowオブジェクトにコールバック関数を登録している。

### 参考
- [axiosでサクっとJSONP - Qiita](https://qiita.com/dojyorin/items/f2b56e0d1346d31a9be3)
- [jQuery -  jQueryのajax処理にて、クロスドメインのデータ取得時に起こるエラーについて｜teratail](https://teratail.com/questions/18958)
- [Promise.allでjsonpデータを取得しようとすると、callbackが未定義扱いされてしまう](https://teratail.com/questions/67454)
Org モードの #+ から始まるキーワードの値の取り出し方

# はじめに

.org ファイルを HTML ファイルにエクスポートしたりする時に、`#+TITLE: ...` や `#+TOC: ...` みたいな記述をすると、エクスポートされる HTML のファイルのタイトルを設定できたり、目次を挿入できたりする機能があります。

Jekyll の Markdown ファイルの [Front Matter](https://jekyllrb-ja.github.io/docs/front-matter/) みたいな感じで、この機能を使って自分で勝手に作ったキーワードで、エクスポート時の挙動をカスタマイズできたりすると良いなと思い、`ox.el` を中心にソースを読みました。読んだ結果、キーワードの取り出し方がわかったので備忘録として記事にしておきます。

# `#+KEYWORD:`

`#+` から始まる文字列は、ソースを読む限りキーワードと命名されているっぽいです。なので、読み方わかってませんでしたが、`#+TITLE: ` はタイトルキーワードと読めばいいんですね。余談でした。

# org-element

`ox.el` のソースを読んでいたら、`org-element.el` の機能を使っている箇所が多々あり、キーワードを処理している部分も `org-element.el` にあるっぽい感じでした。

`org-element.el` は Org モードのパーサらしくて、Org 文書をパースするコマンドの他、Org Element API という形でバース後のオブジェクトの操作をいろいろ提供しているようです。（とは言え、パースされてできるオブジェクトはS式なので、なんとでも触れる）

ググったら[ドキュメント](https://orgmode.org/worg/dev/org-element-api.html)も見つかりました。

Org モードでいろんなことができるようになりそうなので、これは覚えておこうと思いました。

# 自分で適当に作ったキーワードの値を取りだす

下記のような感じの .org ファイル（ `/tmp/test.org` ）があったとします。

```org
#+TITLE: Org モードの #+ から始まるキーワードの値の取り出し方
#+MYKEYWORD: 私のキーワード

* 私のキーワードのテスト
  取れるかな？ 
```

以下のようなコードを書くと、`("私のキーワード")` という値が取得できます。

```emacs-lisp
(with-current-buffer (find-file-noselect "/tmp/test.org")
  (org-element-map (org-element-parse-buffer) 'keyword
    (lambda (kwd)
      (when (equal (org-element-property :key kwd) "MYKEYWORD")
        (org-element-property :value kwd)))))
```

# まとめ

この仕組みを使えば、Front Matter 的なことは実現できそうです。

副産物として `org-element` というパッケージの存在を知れたのですが、こちらの方が実りがあった気がします。
Org モードの AST（S式）と AST の操作ができるようになるので、Emacs と真面目に付き合うなら色々捗りそうです。

以上。
monaca(JS)でAndroid版湯婆婆を実装してみる

#はじめに

この記事は[Nemesis](https://qiita.com/Nemesis)さんの[Javaで湯婆婆を実装してみる](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)をリスペクト(?)して書いた記事になります。

僕も湯婆婆に名前を奪われようと思います。

※私はこれまで湯婆婆を知りませんでした。ラーメンババアは知ってるけど。

#今回使う物

今回は「monaca」というクラウド上でスマホアプリの開発ができるサービスを使用します。

使う言語はみんな大好きJavaScriptです。

#湯婆婆のレギュレーション

湯婆婆の流れは、

「名前を聞かれる」
↓
「名前を褒める」
↓
「名前から１文字ランダムに取得」
↓
「発表」
↓
「バグる時はバグる」（※今回は割愛）
という流れになります。

簡単だね。

#ソースコード

今回は即席で書いたので、汚いです。

```js:main.js
let playername
let newNames
let newName
function yubaba_send(){
  playername=document.getElementById("name").value
  document.getElementById("yubaba").innerHTML="<h2>フン。"+playername+"というのかい。贅沢な名だねぇ。</h2><br>"
  newNames=playername.split('');
  newName=newNames[Math.floor( Math.random() * newNames.length )]
  document.getElementById("yubaba").innerHTML+="<h1>今からお前の名前は"+newName+"だ。いいかい、"+newName+"だよ。分かったら返事をするんだ、"+newName+"!!</h1>"
}
```

```html:index.html
<!--body以外は割愛-->
<body>
  <div id="yubaba">
    <h2>契約書だよ。そこに名前を書きな。</h2>
    <input type="text" id="name" value="名無し"><br>
    <input type="button" value="湯婆婆に送信"onclick="yubaba_send()"><br>
  </div>
  
  <script src="script/main.js"></script>
</body>
```
#実行結果
![Screenshot_2020-11-05-23-55-10-504_mobi.monaca.debugger.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/485b4583-cdfb-49ef-2636-9185d83844ea.jpeg)

![Screenshot_2020-11-05-23-55-20-760_mobi.monaca.debugger.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515312/43c1203b-c07b-612f-e3bd-f18e417aa1a4.jpeg)

バッチリ動きましたね。
#参考記事
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
Numpy1.19.4のエラー RuntimeError: The current Numpy installation fails to pass a sanity check due to a bug in the windows runtime.

[2020.1.25追記]
Numpy1.19.5がリリースされ，`pip install numpy`でこちらがインストールされるようになったようです．コメントで教えていただきました．ありがとうございます！

Numpyを使おうとしたら見慣れないエラーに遭遇しました．意外とあっさり解決できましたが，遭遇する方が多そうなので一応残しておきます．

# 環境
- Windows10
- Python 3.8.2
- Numpy 1.19.4

# エラー

```sh
RuntimeError: The current Numpy installation ('C:\\Users\\ ... \\venv\\lib\\site-packages\\numpy\\__init__.py') fails to pass a sanity check due to a bug in the windows runtime. See this issue for more information: https://tinyurl.com/y3dm3h86
```

# 解決法

調べてみるとStackOverFlowに[同じエラーについての質問](https://stackoverflow.com/questions/64654805/how-do-you-fix-runtimeerror-package-fails-to-pass-a-sanity-check-for-numpy-an)がありました．~~これによると，つい最近リリースされた[Numpy 1.19.4](https://github.com/numpy/numpy/releases)が原因のようです．~~

コメントで教えて頂いたのですが，正しくはWindows側に原因があるそうです．１月末に修正される予定のようですが，それまではNumpy1.19.4を避けるのが一番簡単そうです．

回避するには単純にNumpyのバージョンをひとつ下げます．

```sh
pip install numpy==1.19.3
```
サーブレットの変更内容が反映されない時の対処

#環境
pleiades 2020 all in oneのEclipseを使用
OSはwindows10
ブラウザはEclipse内部ブラウザとchrome


#現象
*サーブレットでHTMLを変更してブラウザを再読込してみ変更が反映されない*

#原因と対処
Tomcatのreloadableの値がデフォルトが'false'になっているので'true'に変更する
Eclipseのエクスプローラーからserver.xmlをエディタで開く。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668402/81ace312-f01f-a7e2-f3c2-feda115ceecd.png)

```
// 156行目あたり
<Context docBase="TodoServlet" path="/TodoServlet" reloadable="false" source="org.eclipse.jst.jee.server:TodoServlet"/></Host>
// reloadable="true"に変更する
```

変更後、サーバーを再起動すると
1. HTMLの変更
2. `ページ再読み込み`

の流れでちゃんと変更が反映されるようになります。

###コンソールに出るメッセージ

```
情報: このコンテキストの再ロードが完了しました
```
というメッセージが表示されるようになるので、表示されていれば成功！！

#コメント
Eclipseなら、毎回`実行`→`サーバー再起動`とすれば反映されますが、F5でサクッと確認したいときには便利な設定くらいなものです。
非同期処理について・JavaScript

# JavaScriptの非同期処理について
+ 非同期処理とは（同期処理と非同期処理の違い）
+ JavaScriptの言語的な特徴と生じる問題
+ 非同期JavaScript(Asynchronous JavaScript)で解決する

## 非同期処理とは（同期処理と非同期処理の違い）。
タスクの処理方式には、同期処理と非同期処理の2タイプがあります。
**同期処理**は、タスクを順番に一つずつ処理していく方式であり、あるタスクが実行されている時は、他のタスクは実行されません。実行中のタスクの処理が終了してから次のタスクの実行に移ります。
**非同期処理**は、複数のタスクを同時に処理する方式です。同期処理では、前のタスクの実行が終わるまでタスクは実行の順番を待たなければいけませんが、非同期処理では、同時に複数のタスクが実行されるので処理の時間が短縮されます。

## JavaScriptの言語的な特徴と生じる問題
JavaScriptは、同時に複数の処理を行うマルチスレッドではなく、一度に１つの処理しか行えないシングルスレッドのプログラム言語です。複数の処理を同時に行えないシングルスレッドの言語で、サーバーとやり取りする処理などを行うと、メインのタスクが中断されるのでプログラムの利便性が損なわれてしまいます。例えば、APIでサーバーにデータを要求するという処理を行うと、その処理が終わるまで他の処理が中断されるので、それまでウェブページが更新されなくなるなど不具合が発生してしまいます。

##非同期JavaScript(Asynchronous JavaScript)で解決する
上で挙げたような不具合は、非同期JavaScriptで解決出来ます。callbacksやPromise、async/awaitなどを使うことで、シングルスレッドのJavaScriptでも非同期的なタスク処理が可能で、処理時間が長いタスクの終了を待たずに別のタスクを実行することが出来ます。

##参照
[非同期処理を理解する](https://buildersbox.corp-sansan.com/entry/2020/02/12/110000)
[Understanding Asynchronous JavaScript](https://blog.bitsrc.io/understanding-asynchronous-javascript-the-event-loop-74cd408419ff)
background-imageにレイヤーを重ねる方法について。

WEBサイトのコーティングをしてると、「background-imageにレイヤーを重ねる」なんてよくやります。たまにやると「あれ？なんだったけなぁ」なんて思ったりして時間を取られてしまうのでこの気にまとめてみました。

## いろいろなやり方がある

調べてみると何通りかのやり方があります。

① 親要素にbackground-image、子要素にレイヤー
② linear-gradientを使う
③ positionを使って2つの要素を重ねる

だいたいこのパターンの記事が引っかかるかと思います。僕自、初学者の頃は③を使っていましたが正直メリットが感じられずｗ、今は①か②を使ってます。

今回はこの①②に焦点を絞ってそれぞれメリットデメリットを書いて行こうと思います。

## コード比較

#### ① まずはベースとして何もない状態。

```html:html
<div class="bgImage1">
  特に何もせず、イメージの中にテキストを配置しただけ<br>
  イメージの色の調整をしていないので、<br>
  文字がイメージと同化し非常に見えづらい。
</div>
```

```css:css
/* 特に何もせず、イメージの中にテキストを配置しただけ */
.bgImage1{
  background-image: url(../img/image_1.jpeg);
}
```

表示した画面がこちら↓

![スクリーンショット 2020-11-05 23.20.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/4f4e9eec-e780-6389-db09-54413160c874.png)

書いてある通り文字が後ろのイメージと同化してみづらいですよね。

#### ② 親要素に半透明な子要素(レイヤー)を重ねるパターン

```html:html
<div class="bgImage2"> 
  <div class="bgImage2__rayer"> 
    親要素に半透明な子要素(レイヤー)を重ねるパターン<br>
    単色の場合はこれがベストかも。<br>
    ただし、デメリットとして「子」の分だけ要素数が増える。
  </div>
</div>
```

```css:css
/* 親要素に半透明な子要素(レイヤー)を重ねるパターン */
.bgImage2{
  background-image: url(../img/image_1.jpeg);
}
.bgImage2__rayer{
  background-color: rgba(255, 255, 255, 0.5);
}
```

![スクリーンショット 2020-11-05 23.23.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/f1dc9318-0212-2404-97a5-c937a972cd5d.png)

白いマスクがかかったので文字は見やすくなりました。
HTMLの要素数が子の分、増えCSSも追加したのでコードが増えました。
ただ<font color="red">人によっては分かりやすいコード</font>かも知れませんね！僕は嫌いですｗ

#### ③ 1つの要素にイメージとレイヤーをまとめて書くパターン

```html:html
<div class="bgImage3">
  ２番目と結果は一緒だが、コーティングに必要な要素数は１つだけ。cssも1行。<br>
  htmlはすっきりするが、cssは少しややこしい。<br>
  また「linear-gradient」はグラデーションを作るための値なのでcssの意味的に単色を扱う場合は微妙なところ。
</div>
```

```css:css
.bgImage3{
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../img/image_1.jpeg);
}
```

![スクリーンショット 2020-11-05 23.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/c287bb5f-1eb5-ca9a-8c19-96018f3fdf4e.png)

結果は②と同じ、CSSは少しだけややこしくなりますが、HTML、CSSともコード量が減りました。
ただ「linear-gradient」はグラデーションを作るための値なのでcssの意味的に単色を扱う場合は微妙なところ。多分ここで拒否反応出す人いるかも。
正直好みなので絶対はありませんが、僕の場合は<font color="red">コード量が減る</font>のでこちらお勧めです。

#### おまけ

上記でお勧めした単色での「linear-gradient」ですが、本来はグラデーションのレイヤーをかけるのに使います。やっぱこれを使うとお洒落になるし、仮に単色でもコード量が減るならいいかなって思います。
何度も言いますが正直好みです。それと現場のルールによりますので一概にこれが正解とは言い切れないですね！

グラデーションの表示とコードはこちら↓

![スクリーンショット 2020-11-05 23.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/539f1e48-595a-ea4f-0d3b-ebd8bd943490.png)

```html:html
<div class="bgImage4">
  前者にもある通り、グラデーションのレイヤーをかける場合は「linear-gradient」一択だろう。<br>
  グラデーションをかけた方がおしゃれ感あるし、仮にグラデーション使わなかったとしてもhtmlの記述が減るなら単色で使っても問題ないと思う。<br>
  正直好みと、現場のルールによりますので一概にこれが正解とは言い切れないですね！
</div>
```

```css:css
.bgImage4{
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), url(../img/image_1.jpeg);
  color: white;
}
```

最後までありがとうございました。こんなことで長々と書いてしまいましたが今後も技術的なことは書いていきたいと思います。何かあればコメントお願いします。
C++で失敗したこと

C++で試して失敗したことを淡々と・・・


#1.std::begin(),std::end()は動的に確保した配列では使えない
Visual Studio2017 ver15.9.28

```C++:
#include <iostream>
#include <iterator>
#include <algorithm>
int main()
{
	//これはOK
	int array_int[6];
	std::for_each(std::begin(array_int), std::end(array_int), [&](int& x){x = num++; });
	std::for_each(std::begin(array_int), std::end(array_int), [](int x) {std::cout << x << std::endl; });
	auto ite1 = std::begin(array_int);

	//これはNG
	int *array_p = new int[6];
	std::for_each(std::begin(array_p), std::end(array_p), [&](int& x){x = num++; });
	std::for_each(std::begin(array_p), std::end(array_p), [](int x) {std::cout << x << std::endl; });
	auto ite2 = std::begin(array_p);
	delete[] array_p;
}

```

オーバーロードされた関数"std::begin"のインスタンスが引数リストと一致しません
といわれてだめ。動的配列でも使えればよかったのにorz



#2.文字列リテラルに文字リテラルを+で連結
例は「aaa' '」を出力したいだけです。

```C++:
#include <iostream>
#include <string>
int main()
{
	//これはOK
	std::string str1 = "aaa\' ";
	str1 += '\'';
	std::wstring wstr1 = L"aaa\' ";
	wstr1 += '\'';
	std::cout << str1 << std::endl;
	std::wcout << wstr1 << std::endl;


	//これはNG
	std::string str2 = "aaa\' " + '\'';
	std::wstring wstr2 = L"aaa\' " + L'\'';
	std::cout << str2 << std::endl;
	std::wcout << wstr2 << std::endl;
}

```

コンパイルエラーとはならずにNG側では訳のわからない文字列になります。
いくつもの文字列を連結するときにやらかしました。
そして意味不明な文字列になってどこでやらかしたのかわからなくなるというorz
Rails erbでの記号<% %>について

# <% %> / <%= %>ってなんだ

課題をこなしてく中で、しれっと出てきた「<%= %>」が分からず少し調べてみたノートがまとまっていたので、備忘録として残しておきます。

Railsの.erbという形式のファイルでは、<% %> <%= %>と囲むことで、HTMLファイルにRubyのコードを埋め込めるらしいです。
（erb = Embedded Ruby (=埋め込みRuby)の略）。

例えば、下記のコードを入力すると、

+ <% %>　：変数の定義などに使用する
+ <%= %>　：変数の値などに使用する

```ruby:top.html.erb

<% language = "Ruby" %>
 <P><%= language %>を学ぶ</P>

```

↓結果

localhost:3001

![スクリーンショット 2020-11-05 23.20.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664818/4d10b855-8cf6-d9f4-7565-602d1df40af9.png)

となります。
また、「<% language = "Ruby" %>」の変数の定義は、アクションで定義することが一般的です。

```ruby:controller
 def top
   @language = Ruby
 end
```

```ruby:top.html.erb

 <%= @language %>

```
※アクションで定義したviewの変数に「＠」をつけることを忘れないように！

# <%= form_for %>の使い方

```ruby:top.html.erb

  <%= form_for ('モデルクラスのインスタンス') do |f| %>
        フォーム内容記入
  <% end %>

```

↓　コードに直すと

```ruby:top.html.erb

  <%= form_for (@user) do |f| %>
     <% f.text_field :name %>
     <% f.submit %>
  <% end %>

```

という感じです。

```ruby:top.html.erb

  <form class="top">
    <input name="">
  </form>

```

という形でもかけますが、<%= form_for %>のほうが短く書けますし、セキュリティーも高まるのでおすすめです。


## 参考記事

もっと詳しく<% %>について書いていただいてる方がいました。ありがとうございます。
[Railsのerbで使われる記号の意味](https://shinkufencer.hateblo.jp/entry/2018/12/27/000000)
WebdriverIO で Edge (EdgeHTML v18) を動かす方法

# ターゲットブラウザ

Edgeは２種類ありますが、今回動かしたのはレガシー版のEdgeHTMLです。
[新Microsoft Edge登場、レガシー版とChromium版の見分け方は？ | マイナビニュース](https://news.mynavi.jp/article/20200117-954759/)

# 動いた方法

## ①MicrosoftWebDriver.exeをインストールします
[WebDriver - Microsoft Edge Developer](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/)を参考に、コマンドプロンプトを管理者権限で開き、以下のコマンドを実行します。

```bash
DISM.exe /Online /Add-Capability /CapabilityName:Microsoft.WebDriver~~~~0.0.1.0
```

インストールが完了すると「C:\Windows\System32\MicrosoftWebDriver.exe」に実行ファイルが作成されます。

## ②selenium-standaloneの引数にMicrosoftWebDriver.exeを指定します

フルのサンプルコードはこちらです。
https://github.com/proyuki02/webdriverio-edgehtml-example

```typescript:edge.wdio.conf.ts
import { Config } from "webdriverio";
import { config as defaultConfig } from "./default.wdio.conf";

const drivers = {
  MicrosoftEdge: {
    binary: "C:\\Windows\\System32\\MicrosoftWebDriver.exe",
  },
};

const config: Config = {
  ...defaultConfig,

  capabilities: [
    {
      maxInstances: 1,
      browserName: "MicrosoftEdge",
    },
  ],
  services: [
    [
      "selenium-standalone",
      {
        installArgs: { drivers },
        args: { drivers },
      },
    ],
  ],
};

export { config };
```

# proxyを通す方法

テスト実行前にEdgeを開いてproxyを設定しておけば、それが使用されます。

ちなみに、capabilitiesにproxyを設定しても、WebDriverがサポートしてないのでダメっぽいです。
[WebDriver (EdgeHTML) - Microsoft Edge Development | Microsoft Docs](https://docs.microsoft.com/en-us/microsoft-edge/webdriver)
scala-stewardを導入して気づいたこと

# はじめに
Webアプリケーションの開発をする時に、各種ライブラリを使うことは今では必須のことです。一方で、各ライブラリはそれぞれ頻度は異なるもののバグ修正やセキュリティ対応のようなメンテナンスが日々行われており、それぞれの対応ごとに新しいバージョンが公開されます。そして、この更新情報をキャッチアップし続けていくことはそれなりの工数を必要とします。そのため、これらの更新を人間に代わって行ってくれるソリューションはいくつかあります。例えば、[Dependabot](https://dependabot.com/)がそれですが、DependabotはScalaに対応されていないため、Scalaで開発をする場合には、その他のソリューションが必要となります。

# scala-stewardとは
https://github.com/scala-steward-org/scala-steward
scala-stewardは、Scalaのsbtプロジェクトが依存するライブラリの更新があれば、アップデートするPRを自動作成してくれます。github-actionを利用することで、privateなレポジトリに対して定期実行をしてくれるbotとして動作させることができます。この記事では、scala-stewardを導入してみて、気づいたことをいくつか紹介したいと思います。

# scalafmtの更新はするけど、フォーマットはしてくれない
https://github.com/scalameta/scalafmt
Scalaの有名なフォーマッタライブラリですが、このバージョンが上がった時も、scala-stewardは教えてくれます。しかし、scalafmtのデフォルトのルールが変わって、フォーマットを適用し直す必要があっても、scala-stewardはそこまではしてくれません。あくまで、バージョンを更新するPRを作るのみです。これは、フォーマットがかかっていないコミットに、CIでエラーとする設定をしている場合には、とても不親切に感じます。これについてはコミュニティの中でも、以下のIssueの中で議論がされている通り、そもそもフォーマットまでをすべきかどうか意見が分かれている状況でした。
https://github.com/scala-steward-org/scala-steward/issues/1056
最近、以下のPRでこのIssueが対応され、現在ではconfigで選択可能となりました。
https://github.com/scala-steward-org/scala-steward/pull/1673

# バイナリ互換を考慮してくれない
例えば、akkaや、akka-httpは、それらに依存するライブラリ間で同じバージョンに依存している必要があります。しかし、scala-stewardは、そういった互換性を考慮してくれません。従って、こういった互換性の検知の仕組みがない場合には、うっかりPRをマージしてしまう危険性があります。これについては、以下に、Issueが上がっているため、将来対応される可能性がありますが、現時点で使用する場合には注意が必要です。
https://github.com/scala-steward-org/scala-steward/issues/815
なお、こういった互換性を気にする必要のあるライブラリはscala-stewardが無視するような設定が可能です。詳細は[ドキュメント](https://github.com/scala-steward-org/scala-steward/blob/master/docs/repo-specific-configuration.md)を参考にしてください。

# コメントに反応してしまう
以下のようなコメントを残しておいたりしていると、それに反応してしまいます。

```sh
- "com.typesafe.akka" %% "akka-http-spray-json" % akkaHttpVersion, // remove this line when akka-management will support akka-http 10.1.12
+ "com.typesafe.akka" %% "akka-http-spray-json" % akkaHttpVersion, // remove this line when akka-management will support akka-http 10.2.0
```
こちらもIssueには上がっているので、将来対応される可能性がありますが、コメントにバージョンを記載する場合は注意が必要です。
https://github.com/scala-steward-org/scala-steward/issues/1651

# まとめ
実際に使ってみて、こうした考慮する点はあるもののライブラリの更新情報を自前で追いかける必要がなくなり、とても快適になりました。是非、導入してみることをお勧めします。
gasとlinebotで湯婆婆を実装してみた

##概要
今日のQiitaの記事ランキングをみていたら湯婆婆が座巻していたので自分も実装してみました。
Nemesisさんの下記記事参照です
https://qiita.com/Nemesis/items/c7192a7c510788d2cba2

##湯婆婆bot
botはこちらのurlから追加できます
https://lin.ee/qU7EpOf

##内容
内容としてはまず最初の挨拶メッセージで湯婆婆に
『契約書だよ。そこに名前を書きな。』と言われます

素直に名前を返すと一文字になった自分の新しい名前が返ってくるというものです

##コード

```javascript:湯婆婆.js
//LINE Messaging APIのチャネルアクセストークン
const CHANNEL_ACCESS_TOKEN = "チャンネルトークン";
const LINE_ENDPOINT = 'https://api.line.me/v2/bot/message/reply';
//LINE Messaging APIからPOST送信を受けたときに起動する
// e はJSON文字列
function doPost(e){
  if (typeof e === "undefined"){
    //eがundefinedの場合動作を終了する
    return;
  } 

  //JSON文字列をパース(解析)し、変数jsonに格納する
  var json = JSON.parse(e.postData.contents);
  var event = JSON.parse(e.postData.contents).events[0];
  //受信したメッセージ情報を変数に格納する
  var replyToken　= json.events[0].replyToken; //reply token
  var messageId = json.events[0].message.id; //メッセージID
  var messageType = json.events[0].message.type; //メッセージタイプ
  var userId = event.source.userId;
  
  //返信するためのトークン取得
  var replyToken = json.events[0].replyToken;
  var nameOrigin = json.events[0].message.text;
  var length = nameOrigin.length;
  var rundomNum = Math.floor(Math.random()*length);
  var name = json.events[0].message.text.slice(rundomNum -1,rundomNum);
  var message = "フン。" +  nameOrigin +"というのかい。贅沢な名だねぇ。"
  var message2 = "今からお前の名前は " + name + "だ。いいかい、" + name + " だよ。分かったら返事をするんだ、 " + name + "!!";
  UrlFetchApp.fetch(LINE_ENDPOINT, {
      'headers': {
        'Content-Type': 'application/json; charset=UTF-8',
        'Authorization': 'Bearer ' + CHANNEL_ACCESS_TOKEN,
      },
      'method': 'post',
      'payload': JSON.stringify({
        'replyToken': replyToken,
        'messages': [
          {
          'type': 'text',
          'text': message,
          },
          {
          'type': 'text',
          'text': message2,
          },
                    ],
      }),
    });
}
```

##コードの詳細
内容としてはユーザーが入力した内容の文字数の長さを取得し、
その長さの範囲内で乱数を一個生成します
その(乱数-1,乱数)を範囲として文字列をスライスします
そうしたら新しい名前の出来上がりです！

##最後に
特に自分が始めたわけではないので呼びかけをしてもいいものなのかはわからないですが、是非他の方法で実装した他の記事を読んでみたいので開発のご検討と記事の作成をお願いします！

##最後に2
現在私は個人事業主として下記のサイトの事業を取り進めております。(サイトはまだ作成して間もないのでまだガタガタです、、)
ホテルの自動チェックインのラインでの実装や、rpaの制作をメインに進めています。
作業の自動化等にご興味があれば是非ご連絡ください。何卒よろしくお願いいたします。
https://senren.work/
material-tableの日本語Localization

[material-table](https://github.com/mbrn/material-table)のローカライズ方法は、[ここ](https://material-table.com/#/docs/features/localization)に記載されています。
日本語について定義を作ってみたのでメモ。

### 確認環境

```
typescript: 4.0.3
material-table: 1.69.1
@material-ui/core: 4.11.0
```

### 定義

```typescript
import { Localization } from "material-table";

const localizationJapanese: Localization = {
  error: "エラー",
  body: {
    emptyDataSourceMessage: "表示するレコードがありません。",
    filterRow: {
      filterPlaceHolder: "",
      filterTooltip: "フィルター",
    },
    editRow: {
      saveTooltip: "保存",
      cancelTooltip: "キャンセル",
      deleteText: "この行を削除しますか？",
    },
    addTooltip: "追加",
    deleteTooltip: "削除",
    editTooltip: "編集",
  },
  header: {
    actions: "アクション",
  },
  grouping: {
    groupedBy: "グループ化:",
    placeholder: "ヘッダーをドラッグ ...",
  },
  pagination: {
    firstTooltip: "最初のページ",
    firstAriaLabel: "最初のページ",
    previousTooltip: "前のページ",
    previousAriaLabel: "前のページ",
    nextTooltip: "次のページ",
    nextAriaLabel: "次のページ",
    labelDisplayedRows: "{from}-{to} 全{count}件",
    labelRowsPerPage: "ページあたりの行数:",
    lastTooltip: "最後のページ",
    lastAriaLabel: "最後のページ",
    labelRowsSelect: "行",
  },
  toolbar: {
    addRemoveColumns: "列の追加、削除",
    nRowsSelected: "{0} 行選択",
    showColumnsTitle: "列の表示",
    showColumnsAriaLabel: "列の表示",
    exportTitle: "出力",
    exportAriaLabel: "出力",
    exportCSVName: "CSV出力",
    exportPDFName: "PDF出力",
    searchTooltip: "検索",
    searchPlaceholder: "検索",
    searchAriaLabel: "検索",
    clearSearchAriaLabel: "クリア",
  },
};
```

### 使用イメージ

```typescript
const MyTable = () => {
  return (
    <div style={{ maxWidth: "100%" }}>
      <MaterialTable
        title="Custom Edit Component Preview"
        columns={[
          {
            title: "Name",
            field: "name",
          },
          { title: "Surname", field: "surname" },
          { title: "Birth Year", field: "birthYear", type: "numeric" },
          {
            title: "Birth Place",
            field: "birthCity",
            lookup: { 34: "İstanbul", 63: "Şanlıurfa" },
          },
        ]}
        data={[
          { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
          {
            name: "Zerya Betül",
            surname: "Baran",
            birthYear: 2017,
            birthCity: 34,
          },
        ]}
        localization={localizationJapanese}
      />
    </div>
  );
};
```
superは単に親クラスのメソッドを呼び出すものではない

## はじめに
ruby gold取得に向けて勉強中superについて自分の中での理解が変わり共有したいと思いました。

## 本題
まず初めに以下のコードを実行するとどのような結果が出力されるでしょう？

```ruby

module M
  def foo
    super
    puts "M#foo"
  end
end

class C2
  def foo
    puts "C2#foo"
  end
end

class C < C2
  def foo
    super
    puts "C#foo"
  end
  include M
end

C.new.foo
```

選択肢1
>
C2#foo
C#foo

選択肢2
>
C2#foo
M#foo
C#foo

選択肢3
>エラーが表示される


僕はずっと１と思ってました。
ちなみに正解は `選択肢2`
きちんと理解して正解した方はもうこれ以上見なくて大丈夫です。
ここまで見てくださってありがとうございます。

まず、僕がどのようにして選択肢1を選んだのか

「Cクラスのfooメソッドやな、ふむふむ」
「お、superか。てことは親クラスのfooを見ればいいんやな」
「なるほど、答えは1や！」

こんな感じです。
モジュールをincludeしたところで呼ばれないと思っていました。

superクラスについて学んでいきましょう。
まず初めに[リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/doc/spec=2fcall.html#super)に書いてあるsuperについて簡単に
>super は現在のメソッドがオーバーライドしているメソッドを呼び出します

なるほど、スーパークラスのメソッドを呼び出すわけではなさそうです。
ではancestorsメソッドを使用してみます。

```ruby
## 省略

class C < C2
  def foo
    super
    puts "C#foo"
  end
  include M
  self.ancestors #=> [C, M, C2, Object, Kernel, BasicObject]
end

C.new.foo
```

ancestorsは簡単に説明するとメソッドの探索順位がわかるメソッドです。
例えばfooメソッドを実行した時Cのfooメソッドを探し、なければMのfoo...と探索していきます。

ここでもう一度問題のコードを見ていきます。

```ruby
module M
  def foo
    super # C2のfooを参照する
    puts "M#foo"
  end
end

class C2
  def foo
    puts "C2#foo"
  end
end

class C < C2
  def foo
    super # Mのfooを参照する
    puts "C#foo"
  end
  include M
  self.ancestors #=> [C, M, C2, Object, Kernel, BasicObject]
end

C.new.foo
#=> C2#foo
#=> M#foo
#=> C#foo
```

## 結論
- superの記述があると次のメソッドの探索が行われる
- 親クラスのメソッドを探索するわけではない


## おわりに
資格勉強していると結構理解が深まるので実務経験が浅い方は勉強してみてもいいのではないでしょうか？
データ取得ライブラリ「React Query」のススメ

## はじめに

今日のアプリケーションではデータの取得は複雑になりました。
リトライやキャッシュ、ローディングの表示など色々考える必要があります。
今回ご紹介する「React Query」では、そういった問題を解決し、
よりアプリケーションにフォーカスして実装できるようになります。

## 機能

- キャッシュ
- ポーリング（一定周期ごとにデータの再取得）
- ページネーション
- リトライ
- 並列実行
- Typescriptサポート

## インストール方法

```javascript
npm i react-query
```

## 基本的な使い方

React QueryはフックAPIを通して利用します。 
useQuery関数には、キャッシュのキー、データの取得方法を設定します。
実行すると、data: 取得したデータ、isLoading: ローディング中かどうかが取得できます。  


```jsx:pages/qiita.js
import { useQuery } from 'react-query'

export default function Qiita() {
  const { data, isLoading } = useQuery('qiita', () => 
    fetch('https://qiita.com/api/v2/items?query=react%3Aquery')
        .then(x => x.json()))

  return (
    <>
    <h1>記事</h1>
    {!isLoading ? 
      (<ul>
        {data.map(x => <li key={x.title}>{x.title}</li>)}
      </ul>) : 'Loading...'}
    </>
  )
}
```

上記を実行すると以下のように表示されます。
![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39308/19853f59-7774-5b8e-d2bb-919d5b18c2f7.gif)


## ポーリング

一定周期でデータの問い合わせを行いたい場合も、オプションを設定するだけです。
Next.jsのAPIルートを使って、ランダムな数値を返すAPIを用意しました。

```javascript
export default (req, res) => {
  res.statusCode = 200
  res.json({ value: Math.random() })
}
```

UI側は以下のようなコードとなります。

```jsx:pages/random.js
import { useQuery } from 'react-query'

export default function Random() {
  const { data, isLoading } = useQuery('random', () => 
    fetch('http://localhost:3000/api/hello').then(x => x.json()),
    {
      refetchInterval: 500,
      staleTime: 0
    })

  return (
    <>
    <h1>Random</h1>
    {!isLoading ? 
      (<>Value: {data.value}</>) : 'Loading...'}
    </>
  )
}
```
![random.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39308/dad0abee-5b2a-5087-33ee-19be3edbfbbc.gif)

## デバッグ時について

その他にも、ウィンドウにフォーカス時にデータの再取得を行ってくれたり、便利な機能があります。
開発時には不要だよという方は無効にしておくとよいと思います。

```jsx
const { data, isLoading } = useQuery('qiita', () => 
    fetch('https://qiita.com/api/v2/items?query=react%3Aquery').then(x => x.json()),
    {
      refetchOnWindowFocus: false
    })
```

## さいごに

公式ドキュメント見ると、SWRなどの比較もあるので参考にしてみてください。
https://react-query.tanstack.com/docs/comparison

また、今回書いたコードは以下にあげておきました。
https://github.com/msp0310/react-query-example

## 参考
- React-Query
  https://react-query.tanstack.com/

- React-Query(Github)
  https://github.com/tannerlinsley/react-query
Rubyの復習2

<h1>本投稿について</h1>
前回の[Rubyの復習1](https://qiita.com/naoto911/items/f46b35f84cc80f59cac3)の続きです。
"目的"と"教材"は[Rubyの復習1](https://qiita.com/naoto911/items/f46b35f84cc80f59cac3)を参照ください。

---
<h1>①用語のメモ</h1>
<h3>○オーバーライド</h3>
・親クラスから子クラスへ継承した際のメソッドの上書き処理のこと
・同じ名前のメソッドでも子クラスが優先される

<h3>○RoboCop</h3>
・"Rubyの規約を守れているか?" 自動で判定してくれるソフト
・目的は,規約やめちゃめちゃ多いため,人力で処理したら日が暮れるため

<h3>○オブジェクト</h3>
・数値,処理などの総称
・ruby内の1集合体はすべてオブジェクトと呼ばれる
・クラス → メソッド →　値　の順に階層が進む

<h3>○破壊的な編集</h3>
・値の書き換え等の結果を保存すること
・コードでは "!" を末尾につける
・これをしないと格納した値が元の値に戻ってしまう

<h3>○式展開</h3>
・文字列を出力する中に変数を含ませた場合の書き方の種類

```ruby:qiita.rb
name = 'naoto'
puts "my name is #{name}"
```
・#{name}のところが式展開
・大事なのは <font color="Red">ダブルコーテーション("")</font> で囲むこと
・これを実行すると,以下のように表示される

```ruby:qiita.rb
my name is naoto
```

<h3>○動的型付け</h3>
・型指定がいらない記法のこと
・通常のprogramingでは変数宣言時に型を記述して値を格納する
・rubyではいきなり値を格納できる

<h3>○リテラル</h3>
・rubyで直接記述できるもの
・ex)数字,文字,配列,ハッシュ など

<h3>○カプセル化</h3>
・クラス外からのメソッドへのアクセスを禁止する保護作用のこと
・オブジェクト指向の概念の一つ

<h1>②モジュール</h1>
・定数はクラスを1つの集合として定義すること
・デュエマで例えると,定数がカード,クラスがパック,モジュールがボックスに相当

・モジュール間での継承はできない
・インスタンス作成不可
⇨インスタンスメソッドが使えないのでselfが必要 
(self.メソッド名として処理を記述することで
インスタンス名.メソッド名 ⇨ モジュール名.メソッド名 と書き換えるイメージ)

```ruby:qiita.rb
module Driver
 def self.run
   puts 'Run'
 end
 def self.stop
    puts 'Stop'
 end 
end

Driver.run
Driver.stop
```
---

<h1>③例外処理</h1>
・エラー起きそうな処理とその対応を記載して処理を中断する
・begin ~ end 内に"中断後の処理"と"メッセージ"を書く

```ruby:qiita.rb
puts '--- Please enter an integar. ---'
i = gets.to_i
    
begin 
    puts 10/i
rescue  => ex
    puts 'Error!'
    puts ex.message
    puts ex.class
ensure
    puts 'end'
    
end
```
【解説】
・begin~end
・この中の最後のエラー発生箇所までflowが進む
・rescue => ex
⇨ここにエラーが起きた時の処理を記載
・ensure
⇨例外の発生有無に関係なく最後に実行する処理を記載

---
Rでポアソン混合モデル (変分推論) 


# 記事の目的
ポアソン混合モデルのギブスサンプリングをRで実装します。
参考：[ベイズ推論による機械学習入門](https://www.amazon.co.jp/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%A2%E3%83%83%E3%83%97%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%99%E3%82%A4%E3%82%BA%E6%8E%A8%E8%AB%96%E3%81%AB%E3%82%88%E3%82%8B%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E5%85%A5%E9%96%80-KS%E6%83%85%E5%A0%B1%E7%A7%91%E5%AD%A6%E5%B0%82%E9%96%80%E6%9B%B8-%E9%A0%88%E5%B1%B1-%E6%95%A6%E5%BF%97/dp/4061538322)

# 目次
[0. ライブラリ](#0-ライブラリ)
[1. モデルの説明](#1-モデルの説明)
[2. 推定する分布](#2-推定する分布)
[3. パラメータ初期値設定](#3-パラメータ初期値設定)
[4. 事後分布](#4-事後分布)
[5. 確認](#5-確認)

#0. ライブラリ
```R:
library(dplyr)
library(mvtnorm)
library(MCMCpack)
library(gganimate)
set.seed(100)

```

#1. モデルの説明

![IMG_0179.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/6ed0e599-b047-9067-6d62-848a5c9453b4.jpeg)


#2. 推定する分布
50が平均のポアソン分布と、80が平均のポアソン分布が1:3の割合で混合しているモデルです。

```R:
N <- 1000
s.true  <- rmultinom(N, 1, c(1/4, 3/4)) %>% apply(2, which.max)
X <- append(rpois(N, 50)[s.true==1], rpois(N, 80)[s.true==2])
NULL %>% ggplot(aes(x=X)) + geom_histogram(position = "identity", alpha=0.7)
N <- length(X)
```
>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/38d3728a-ed2b-7ee5-ee79-b143390ff04b.png)


#3. パラメータの初期値設定
```R:
#ハイパーパラメータ設定
K <- 2
alpha0 <- rep(1/K, K)
a0 <- rep(1, K)
b0 <- rep(1, K)
#パラメータ初期値設定
s <- rep(1:K, N)[1:N]
alpha <- rdirichlet(1, runif(2, 0,1))
a <- runif(K, 0,50)
b <- runif(K, 0,50)
s.Data1 <- data.frame(s, iter=rep(0, N))
```

#4. 事後分布
```R:
max.iter <- 30
eata0 <- matrix(NA, nrow = N, ncol=K)
eata <- matrix(NA, nrow = N, ncol=K)
for(t in 1:max.iter){
  #q(s)の更新
  for(i in 1:N){
    for(k in 1:K){
      eata0[i,k] <- (X[i]*(digamma(a[k])-log(b[k])) - (a[k]/b[k]) + (digamma(alpha[k])-digamma(sum(alpha))) ) %>% exp()
    }
    eata[i, ] <- eata0[i, ]/sum(eata0[i,])
    s[i] <- rmultinom(1, 3, eata[i, ]) %>% apply(2, which.max)
  }
  s.Data2 <- data.frame(s, iter=rep(t, N))
  s.Data1 <- rbind(s.Data1, s.Data2)
  #q(lambda)のサンプリング
  for(k in 1:K){
    a[k] <- sum(X*eata[,k]) + a0[k]
    b[k] <- sum(eata[,k]) + b0[k]
  }
  #q(pi)のサンプリング
  for(k in 1:k){
    alpha[k] <- sum(eata[,k]) + alpha0[k]
  }
}
```

#5. 確認

```R:
s.Data <- s.Data1 %>% filter(iter==0|iter==5|iter==15|iter==20|iter==25|iter==30)
s.Data <- data.frame(X=rep(X, 6), s.Data)
s.Data$s <- s.Data$s %>% as.factor()
s.Data %>% ggplot(aes(x=X, fill=s)) + geom_histogram(position = "identity", alpha=0.7) +
  transition_states(iter, transition_length = 2, state_length = 1)
```
>
![a8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/775500/05da743c-c6a7-a1ff-147a-038d1cd698c8.gif)
複数ファイルの行数が知りたいくて　コマンドで取得してみた

コーディングしていると、、、

みんなどれくらいの大きさのファイル作成してるのかな？
既存のファイルはどれくらいの大きさなのかな？
各ファイルの行数知りたい。

あると思います。

勉強も兼ねて、コマンドで取得してみることにしました！

##実行環境##
windows10に　WSLを利用してLinux(Ubuntu)をインストールしてコマンドしました。


##行取得##
wcコマンドを使います
以下のように
wc　対象ファイル　と記載すると

```
$ wc *.txt
 13  13  38 t01.txt
 38  33 106 t02.txt
  4   3   7 t03.txt
 21  18  43 t04.txt
 75  33 116 t05Service.txt
 18  16  35 t06Service.txt
148  14 171 t07Service.txt
317 130 516 total
```

カレントディレクトリに存在するtxtファイルの情報の取得ができます。
取得した情報は項目ごとに表示されています。

```
行数 単語数 ファイル容量（バイト数)   ファイル名称
13   13     38                t01.txt
...
...
317　130 　　516 　　　　　total　ここは合計
```

このままだと余分な情報が多いので
-l オプションで行数のみ取得

```
~/work$ wc *.txt -l
 13 t01.txt
 38 t02.txt
  4 t03.txt
 21 t04.txt
 75 t05Service.txt
 18 t06Service.txt
148 t07Service.txt
317 total
```

行数とファイル名のみなのでだいぶ見やすくなりました。
##行数順に表示。##
wcコマンド　パイプ'|'　sortコマンドを使用しました。

```
$ wc *.txt -l | sort
  4 t03.txt
 13 t01.txt
 18 t06Service.txt
 21 t04.txt
 38 t02.txt
 75 t05Service.txt
148 t07Service.txt
317 total
```

いい感じにファイル行数順に並びました。

次は　「***Service.txt」ファイルだけ取得してみます。

```
$  wc *Service.txt -l | sort
 18 t06Service.txt
 75 t05Service.txt
148 t07Service.txt
241 total
```
やった！サービスファイルの行数のみ取得できました。

・・・:relaxed:


##今度は、平均を表示！##

まず　TOTAL　の行が邪魔なので削除します。

sedコマンドを使用しました。
これはアドレス部に$を指定すると最後の行を表すのでそれに対してd（削除）を実行します。

```
$ wc *.txt -l | sort | sed '$d'
  4 t03.txt
 13 t01.txt
 18 t06Service.txt
 21 t04.txt
 38 t02.txt
 75 t05Service.txt
148 t07Service.txt
```
消えました！
更に 
awkコマンドで平均の表示を行います。

```
$ wc *.txt -l | sort | sed '$d' |  awk '{n += $1}{i +=1 }; END{print int(n/i) }'
45
```
上記のコマンドから平均行数「45」が取得できました！！:rolling_eyes:

因みに　awk　が何をしているかというと。。。

```
　　　1行毎に　行数をｎにプラス　　iに+1　　　　　全行終わったら　　　表示　　少数点切り捨て（n÷i）
awk 　　　　　　'{n += $1}　　{i +=1 }; 　　END　　　　　　　{print　 int(n/i) }'
```

みたいな感じです



##wcコマンドのオプションは以下のようなのがあります。##

```
-l
ファイルの行数を表示する。

-c
ファイルのバイト数を表示する。

-m
ファイルの文字数を表示する。

-L
最も長い行のバイト数を表示する。

-w
ファイルの単語数を表示する。
```


##使用しませんでしたが、以下のようなコマンドでファイル数を調べることができるようです。##

```
$ ls -1 | wc -l

lsコマンドのオプションは「-1(数字の1)」
wcコマンドのオプションは「ｌ（アルファベットのLの小文字）」
```

参考
[テキストの最後の行だけ消したい時、どうやればいい？](https://qiita.com/richmikan@github/items/4317efffdfd57dc24cf7)

[awkについてメモ]
(https://qiita.com/SYutaka/items/b6aadfa279c516a3b90b)
Rustで指定ディレクトリ内の全てのファイルのパスを取得する

## サンプルコード

```Rust
use std::error::Error;
use std::fs;
use std::path;

pub fn read_dir(path: &str) -> Result<Vec<path::PathBuf>, Box<dyn Error>> {
    let dir = fs::read_dir(path)?;
    let mut files: Vec<path::PathBuf> = Vec::new();
    for item in dir.into_iter() {
        files.push(item?.path());
    }
    Ok(files)
}
```

## ポイント

```rust
let dir = fs::read_dir(path)?;
```

このときdirはOk(std::fs::ReadDir)型
https://doc.rust-lang.org/std/fs/struct.ReadDir.html
into_iter()によりイテレータとし、パスを順次取得できる

```rust

for item in dir.into_iter() {
    files.push(item?.path());
}
```

ここでitemはstd::fs::DirEntry型
https://doc.rust-lang.org/std/fs/struct.DirEntry.html
path()によりstd::path::PathBuf型でパスを取り出せる
SudachiPyの正規化処理だけ使いたい

SudachiPyと正規化処理を揃えたかったので、該当処理だけ抜き出しました。

```python
from sudachipy import dictionary
from sudachipy.utf8inputtextbuilder import UTF8InputTextBuilder

dictionary = dictionary.Dictionary()
input_text_plugins = dictionary.input_text_plugins
grammar = dictionary.grammar

def normalize(text):
    builder = UTF8InputTextBuilder(text, grammar)
    for plugin in input_text_plugins:
        plugin.rewrite(builder)
    return builder.get_text()

if __name__ == '__main__':
    print(normalize('ＡBＣ12３')) # -> abc123
```
[ドメイン駆動設計] オニオンアーキテクチャでのフォルダ構造

#目的

　DDDはドメイン層がコアとなるので、オニオンアーキテクチャ等のドメイン層を中心に持つアーキテクチャがイメージしやすい。そして、このアーキテクチャを考慮したフォルダ構成を適用することで、このアーキテクチャを反映した実装も行いやすいと考えられる。そこで、この記事ではフォルダ構造を提案する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415097/e459cf6c-66f8-b72b-630d-8c49fd3c8b2c.png" width="450">

#フォルダ構造

```
┳ app  ┳ presentation ━━┳ REST API
┃      ┃                ┗ SUB
┃      ┠ infrastructure ┳ repository(実装: domain.repository)
┃      ┃                ┗ PUB (実装: application.PUB)
┃      ┠ application ━━ ┳ usecase1
┃      ┃                ┠ usecase2
┃      ┃                ┗ PUB(インターフェース)
┃      ┗ domain ━━━━━━━━┳ models　┳ root-entity1 ┳ child-value-object1
┃                       ┠         ┃            　┗ child-value-object2
┃                       ┠         ┗ root-entity2 ┳ child-value-object1
┃                       ┠                        ┗ child-value-object2
┃                       ┠ services
┃                       ┠ factory
┃                       ┗ repository(インターフェース)
┗ tests
```

# 考慮した内容

## 層をフォルダ単位で分ける

図に従って、presentation, infrastructure, application, domainでフォルダを分けた。層をフォルダ単位で分けることで、内側の層のロジック呼び出しが1つ外の層からだけ呼ばれていることを把握しやすくなる。また、それぞれの層の役割が考慮しやすくなる。

## presentation層はコントローラー群

このサービスへのリクエストコントローラーを集めることで、どこからapplication層のロジックが呼ばれるか分かりやすくなる。

## infrastructure層はアダプター群

外へのリクエストを行うアダプターを管理する場所で、application層やdomain層で用意したインターフェースの実装が集まる。

## application層とdomain層を分ける

appilication層とdomain層を明確に分けることで、ドメインモデル貧血症を防ぎやすい

## domain.serviceとdomain.modelを分ける

ドメイン層に含まれるモデルとサービスを分けることで、ドメインオブジェクトが持つべきルールと複数のドメインオブジェクトにまたがる処理の境界が明確になり、ドメインモデル貧血症を防ぎやすい

## domain.modelをroot entity名で区切る

domain.modelは集約毎のルートエンティティを最上位のフォルダとして持ち、その中に集約内の子ドメインオブジェクトを入れていくことで、集約が把握しやすくなる。

##testsフォルダはappの外

図内のTestsはユースケースが意図通りに実装できているかの確認のためのテストであり、これはappの外のフォルダに配置している
[Swift] textFieldの値が変更されたタイミングを取得

textFieldの値を更新するタイミングを取得したい、、、
textViewには値が更新するたびに呼ばれるメッソド`textViewDidChange(_:)`がありますが、textFieldにはないです。
自分で実装する必要があります

## 実装

`viewDidLoad`内に以下を記述。
これで、値が変更するたびに、`textFieldDidChange`が呼ばれるようになります。


```swift

textField.addTarget(self, action: #selector(textFieldDidChange), for: .editingChanged)
```
あとは`textFieldDidChange`を記述して終わりです。
`#selector`を使う際はメソッドの先頭に`@objc`をつけましょう


```swift

    @objc func textFieldDidChange(sender: UITextField) {
        //任意の処理
    }   
```




## 参考

https://stackoverflow.com/questions/28394933/how-do-i-check-when-a-uitextfield-changes