OmniAICreator/Qiita-1.07M huggingface dataset:
[PHPUNIT]setupメソッド使用時のよくあるエラー

laravelのphpunitでsetUp()メソッドを定義したところ、エラーが出て詰まったので共有します。

#現状
```php:.php
class ...Test extends \TestCase
{
    public function setUp()
    {
       ...
    }
}
```

#エラー文
```
PHP Fatal error:  Declaration of W3\Controllers\...Test::setUp() must be compatible with Illuminate\Foundation\Testing\TestCase::setUp(): void in
```
作成したテストのsetUp()の返り値と自動で作成されるIlluminate\Foundation\Testing\TestCase
のsetUp()の返り値が違うことでした。

#解決策
```php:.php
class ...Test extends \TestCase
{
    public function setUp():void
    {
       ...
    }
}
```
上記のようにsetup()に:voidを追記することで、実行できるようになります。

##会社の紹介
私は現在、[株式会社ダイアログ](https://www.dialog-inc.com/)という物流×ITの会社に勤務しております。
2020年11月現在、エンジニアの募集はしていませんが、他にも様々な職種を募集しているので、[Wantedly](https://www.wantedly.com/companies/company_3244501)のページをご覧ください。
TransformのHandleについての覚書

#Transformのハンドル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/6d571e7c-9e2f-b556-d5bb-d45aea3ab717.png)

たまに見かける十字のロケーターみたいなやつ。
これをトランスフォームノードは必ず持っています。

これを何に使用するかは正直わかっていないんですが、モデラーだったら中心に対するスナップ（頂点スナップ移動なの対象となる）なんかで使ったりしますね。
必ずしも中心にあるものではなく、このハンドル自身がオブジェクトから相対的な位置情報を持ってます。

## 変更、確認
Transformのプロパティ内、Displayから

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/1ecf9c84-5a38-ef02-2fd7-97855d77ac0b.png)

- DisplayHandle = ハンドルを表示/非表示
- SelectionHandle = オブジェクトのワールド座標からの相対座標（フリーズすると0,0,0地点がピボット位置と同じになる）

直感的に動かしたい場合はF8などでcompornent SelectionModeに変更し、
上のメニュー内(デフォルトでは閉じられてるので開いて)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367001/772d2d9c-e996-8519-9937-8d49fe8f537c.png)
ハンドルに似た十字のマークを押すとビューポート内で選択が可能になる。
あとはマニピュレータで移動できます。
LaravelのKernel.phpのscheduleメソッド内でcommandを使ってハマった件

## PHPとLaravelのバージョン

- Laravel Framework 5.7.28
- PHP 7.3.11

## 出ていたエラー
```
ERROR: Aborted. {"exception":"[object] (Symfony\\Component\\Console\\Exception\\RuntimeException(code: 0): Aborted. at /home/hoge/hoge/hoge_api/vendor/symfony/console/Helper/QuestionHelper.php:135)
```

```
 {"exception":"[object] (Symfony\\Component\\Console\\Exception\\CommandNotFoundException(code: 0): Command \"hoge\" is not defined.
```

## 書いていたコード

app/Console/Kernal.php

```
    protected function schedule(Schedule $schedule)
    {
        $schedule->command('hoge')->cron('* * * * *');
    }
```

app/Console/Commands/Hoge.php

```
   /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'command:hoge';

```

## 解決策
下記が叩かれていてそんなものないよ、と怒られていたので

```
'/usr/bin/php' 'artisan' hoge 
```

command:を付ける

```
    protected function schedule(Schedule $schedule)
    {
        $schedule->command('command:hoge')->cron('* * * * *');
    }
```

そうすると下記が叩かれるようになります。

```
'/usr/bin/php' 'artisan' command:hoge
```
PHPを深くまでしろう part1~言語構造編~

# はじめに

最近、同年代の最強エンジニア方からいろいろなアドバイスを頂いているのですがその中で言語の言語仕様そのものについて深く知ることが重要と言われてから自分がよくPHPを使用しているので今一度PHPについて深く勉強しようとした記録です。

# 言語構造

PHPでよく使うechoやprintなどは関数ではなく言語構造と言われているのですが、そのことについて全然違いを理解していなかったので調べてみました。

```php

if (式) {
}
```
上記のif文は()の中に式をいれることにより条件に一致する場合は{}の中が実行されます。

```php

if (1 === 1) {
    echo 'ok';
}
// とか
if ($result = 'hello') {
    echo 'ok';
}
```
など、他にも沢山の方法があります。
()の中には式を入れるのですが、式とはどういったことを指すの言葉なのでしょうか？
簡潔にいうと、
> PHPにおける式とは、値を持つものすべてのこと

このことを踏まえて、最初の話に戻るのですが、echoは言語構造なので()の中に使うとエラーが起きてしまいます。
なら、printはとなるのですがprintは関数の振る舞いをする言語構造になるのでエラーが起きません。

```php

if (print('hello')) {
    echo 'world';
}
// hellowolrdと出力される

```
print()を実行した後、返り値で1が返ってくるのでhellowolrdが出力されます。
このように他にも言語構造では返り値が返ってくるものがあります。
また、言語構造はif文やwhile文など制御構造に近しい部分があるみたいです。

関数のように決まった形である

```php

hello();
```
とかではなく

```php

echo 'hello';

echo('hello');
```
~~のように両方の方法で呼び出せる~~
@tadsanさんからご指摘を頂きました

```php
echo 1, 2, PHP_EOL; // 記述的にok

echo (1, 2, PHP_EOL); // エラーが出力される
```
``echo()``は式のグルーピングをしているということです


# さいごに

自分が普段何気なく使用しているものを深く知ることが、一つ抜き出たエンジニアになれるのではないかと思っているので今後もこのような記事をアップしていきます。
まだまだ、全然理解できていな部分もありますが言語仕様を知ると今までとは違う視点で見ることが出来るので、とにかく楽しいです(笑)
レンタルサーバーのPHPのセッション時間を伸ばす

#目的
レンタルサーバーmixhost上でのセッション時間を伸ばす
php.iniのsession.gc_maxlifetimeを伸ばしたが変化なし

#参考
[セッションの有効期間とか設定とか挙動とかを調べました](http://pentan.info/php/session_gc.html)
[]()

#仮説
セッションファイルはレンタルサーバーの共有フォルダにありそうなので他のユーザのアクセスで消される可能性がある
※下記の記事より仮説は正しそう
[https://webmaster.chielog.com/php/161.html](https://webmaster.chielog.com/php/161.html)

#やったこと
セッション時間設定の延長(php.iniのsession.gc_maxlifetime)とともに、セッションファイルの保存場所を変更した
MultiPHP INI Editorに設定(session.save_path)があるので変更

#結果
セッション時間が延長された
【Nuxt.js】Vuex基礎編②stateを複数使ってみよう

🎈 この記事はWP専用です
https://wp.me/pc9NHC-en

#前置き
今回は前回の基礎編に続き、
stateが複数ある場合の書き方です✍️
基礎編でVuexの基本的な解説はしています！
また基礎編のコードに追記するので
そちらを確認しながらやってみてください🌟

Vuex基礎編はこちら
https://note.com/aliz/n/n497914c981c8



#やりたいこと
![picture_pc_f55edca4f826019fede322e05e15c0ba.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/9b221dce-6bf7-a326-8ffb-3b3253e283eb.gif)

基礎編のカウンターを2つに増やします！
これだけ！！！



#NGパターン
![picture_pc_18c865e53858c3abb3d3d4560c782d23.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/4d59a658-f397-8404-4eca-40000f8f648d.gif)

まずはNGパターンから。
まずはstateにsubCounterを追加。
mutationsなどにも同様に
subCounterについて追記します✍️

が！
これだと後述したsubCounterに
全てがまとまってしまいます。。。

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-en
VScodeのソース管理（SourceControl）の件数が大量に検出される

#問題
VScodeを開くと、ソース管理件数がいきなり増えている（厳密に言えばいきなりではない）
＊画像１
![スクリーンショット 2020-11-26 15.35.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/b144dade-de05-5f1a-a8ac-fb336edf8f1d.png)

#原因（仮説）
Desktopで管理していたファイルをDocuments(書類)に移動。
その時に、一番上の階層（Desktop）に.gitファイルが入っていたため、移動以降の変更全てがVScode（.git）に反映されてしまった。

#実現したい事
VScodeのソース管理の項目上で大量に反映されてしまっている、保留中の解除又は削除をしたい。

#解決までにした事
Gitの基本を読む（公式ドキュメントで調査）
→Documentsの中の .git　を削除することにする。
＊画像2
![スクリーンショット 2020-11-26 16.42.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/b35f7177-c252-9ffb-38ae-cf03b6682c10.png)

解決！！

//以下追記
.gitを削除したはずがまだ、保留中が残ってしまいました。
＊画像3
![スクリーンショット 2020-11-26 16.51.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/528f8be9-c7b8-f2ba-e495-1e5c1a1e7929.png)
なので、右上の数字を右クリックし、すべての変更を破棄。
途中までは保留がなくなりOKと思っていたのですが、あやふやなまま作業を行うのはだめだと思い一旦ストップ！

//再追記
＊画像4
![スクリーンショット 2020-11-26 17.44.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/eb4a3093-a02a-dcc5-cb60-8c8b20e0aaeb.png)
上記の内容は、［ソース管理］にコミットされていない変更の数
コミットとは、修正内容をローカルリポジトリに反映すること。
今回は、コミット！

以前、すべての変更を破棄で保留件数を少なくしていましたが、変更と共にファイルの変更内容が消えてしまいます。。。
＊画像5
![スクリーンショット 2020-11-26 18.39.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/a6792097-7163-519e-ec96-75c53383555a.png)

はいを押す。
ここで、Permissionエラーになってしまい、やむなく以前行った、すべての変更を破棄にすることに。

すると、ソース管理の保留件数はなくなったものの、このような左側のファイルがずらりと表示されてしまいます。
＊画像6
![スクリーンショット 2020-11-26 18.59.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/9268b2b5-1a5f-a861-eef8-abaaa6fa6a95.png)



↑原因は .git の管理化でなくなった為このように表示されているのではないかと思い
新たにフォルダsource_vscodeを作成し、上記の該当ファイルを移動することに

＊画像7
![スクリーンショット 2020-11-27 9.43.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/9c504ef5-efa7-6129-fcab-2888c16769ad.png)

移動後、このような画面になりました。
下記のファイルは、コミットせずにすべての変更を破棄にいたしました。
＊画像8
![スクリーンショット 2020-11-27 9.34.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/c3659c81-a53e-8f51-014c-6435a45cc9cb.png)

最終的にこのような感じになりました。
＊画像9
![スクリーンショット 2020-11-27 9.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/474793/4d80fd19-0d9d-18cc-5ae0-38c9b38e99c1.png)


＊画像6の、はっきりした原因がわからずにいますが、```.git```とvscodeが関係している事は分かりましたので、再度見直します！

何かお気づきの際は、アドバイスなどいただけるとありがたいです！
よろしくお願いいたします！



[VSCodeのSourceControlが５kと表示された時の対処法と今後の対策](https://qiita.com/kouki-iwahara/items/9f53f4f1fc273a954764)　

[Visual Studio CodeでGitを利用する (1/3)](https://www.atmarkit.co.jp/ait/articles/1507/21/news017.html)

//参考にさせていただきました。感謝いたします。
既存プロジェクトへのRidgepole導入


## 導入手順

`Gemfile`

```rb
gem 'ridgepole'
```

`db/config.yml`

```rb
development:
  adapter:  mysql2
  encoding: utf8
  database: xxxx_development
  pool:     5
  username: root
  timeout:  5000
  host:     127.0.0.1
  port:     3306

test:
  adapter:  mysql2
  encoding: utf8
  database: xxxx_test
  pool:     5
  username: root
  timeout:  5000
  host:     127.0.0.1
  port:     3306
```

- スキーマファイル出力

```
bundle exec ridgepole -c db/config.yml --export -o db/Schemafile
```

## マイグレーションの適用

- diff／差分表示

```rb
bundle exec ridgepole --diff db/config.yml db/Schemafile
```

- プレビュー

```rb
bundle exec ridgepole --config db/config.yml --file db/Schemafile --apply --dry-run
----------
Apply `db/Schemafile` (dry-run)
No change
```

- 実適用

```rb
bundle exec ridgepole --config db/config.yml --file db/Schemafile --apply
----------
Apply `db/Schemafile`
No change
```
Dockerfileでビルド時に外部から変数を注入して、ファイルに書き込みたい

# 目的

 - Dockerfileでビルド時に外部から変数を注入して、ファイルに書き込みたい


## ARGとENVを用いる

```sh:Dockerfile
FROM alpine
ARG TEST
ENV TEST ${TEST}
RUN echo "TEST eq ${TEST}" > /test

```

```yml:docker-compose.yml
version: "3"

services:
  testweb:
    build: 
      context: .
      dockerfile: ./Dockerfile
      args:
        - TEST="aaa"
    tty: true
```

```
$ docker-compose up --build -d && docker ps
Building testweb
Step 1/4 : FROM alpine
 ---> d6e46aa2470d
Step 2/4 : ARG TEST
 ---> Using cache
 ---> 7a550663ef1a
Step 3/4 : ENV TEST ${TEST}
 ---> Using cache
 ---> 63c05c3ea630
Step 4/4 : RUN echo "TEST eq ${TEST}" > /test
 ---> Using cache
 ---> 8e0906c4cb26

Successfully built 8e0906c4cb26
Successfully tagged test2_testweb:latest
Starting test2_testweb_1 ... done
CONTAINER ID   IMAGE           COMMAND     CREATED          STATUS                  PORTS     NAMES
e4726f3e8e02   test2_testweb   "/bin/sh"   11 seconds ago   Up Less than a second             test2_testweb_1

$ docker exec -it e4 sh
/ # cat /test
TEST eq aaa
```

# Ref

[Dockerfile リファレンス — Docker-docs-ja 1.11.0 ドキュメント](http://docs.docker.jp/v1.11/engine/reference/builder.html)
IBM Cloud: VPC address prefixの切り替えスクリプト・サンプル

#はじめに
[IBM Cloud: VPC Custom Routesを利用したAZまたぎのHA環境の構成例(VPC外部からのアクセス）](https://qiita.com/testnin2/items/956df8a8790a0f3b7208)という記事を書いたが、このprefix変更を障害時に手動で行うわけにはいかないので、自動実行できるように切り替えのスクリプトを書いてみた。

#スクリプトサンプル

`ibmcloud_apikey`というファイルにAPI Keyを記載しておく。

```shell:vpcprefixswitch.sh
#!/bin/sh
#Usage example: ./vpcrouteswitch.sh jp-tok-1
export LANG=C

VPC_ID=r022-85621b2c-a349-4ae6-87e3-767ddeac7298
PREFIX_CIDR=192.168.10.0/28
PREFIX_NAME=cidr-192-168-10-0-28
ZONE_NAME=$1

#Check
if [ $# -ne 1 ]; then
  echo "Sorry, we had a problem there!"
  exit 1
fi

#Login
ibmcloud login -a cloud.ibm.com --apikey @ibmcloud_apikey -r jp-tok

#LIST EXISTING ROUTE
PREFIX_IDS=$(ibmcloud is vpc-address-prefixes ${VPC_ID} | grep ${PREFIX_CIDR} | awk '{print $1}')
echo ${PREFIX_IDS}

#DELETE ROUTES
ibmcloud is vpc-address-prefix-delete ${VPC_ID} $(echo ${PREFIX_IDS}) -f


#CREATE NEW ROUTES
ibmcloud is vpc-address-prefix-create ${PREFIX_NAME} ${VPC_ID} ${ZONE_NAME} ${PREFIX_CIDR}
```

#実行例

```jp-tok-1にPrefixを切り替えたい時
# ./vpcprefixswitch.sh jp-tok-2
```
キャッシュとクッキーの違い（メモ）

###共通点と違い
<dl>
  <dt>共通点</dt>
  <dd> どちらもブラウザ訪問後に<strong>情報を一時的に保存する</strong>ことができる。 </dd>
  <dt>違い</dt>
  <dd> 保存する<strong>情報の内容</strong>が違う </dd>
  <dt></dt>
  <dd> <strong></strong></dd>
  <dt></dt>
  <dd> <strong></strong></dd>
</dl>

###それぞれが扱う情報
<dl>
  <dt>キャッシュ</dt>
  <dd>訪れた<strong>ウェブページの情報</strong>を一時的に保存する。
これにより訪れるページの読み込みが速くなる。</dd>
  <dt>クッキー</dt>
  <dd>ページに訪れた<strong>ユーザーの情報</strong>を一時的に保存する。
例えば、一度パスワードを打ってログインしたサイトに再度訪れてもログイン状態になっているのはクッキーのおかげ。 </dd>
</dl>

####キャッシュのデメリットを覚えておこう
1. ウェブページの最新情報反映について。キャッシュデータはキャッシュした時点のデータなのでウェブページの更新があっても最新のものに切り替わらないため一度古いキャッシュを削除する必要がある。
2. キャッシュによってPCやスマホの容量が食われてしまうことがあるので注意が必要。

###参考記事
https://time-space.kddi.com/ict-keywords/20191210/2798

####余談
react native でsimulatorを使いながら開発を進めていた際に、何度かキャッシュを削除することでエラーが直ることがありました。
リモートでPuppeteerを起動してローカルのブラウザを操作する

VSCodeのリモート開発機能が便利すぎて、手元のMac上でWebサーバーやDocker、VMなどを稼働させる機会がめっきり減りました。

このままMacはデスクトップアプリケーションを動かすだけのシンクライアントにしようと考えてます。そして各種開発ツールのARM対応が進行中のM1をもう買っちゃう！

その中で解決したかった課題のひとつが、`headlessではないPuppeteer`をどうするかでした。ブラウザGUIを普通に起動しておき、自動操縦の過程を見たり、フロントエンドをデバッグしたいことがあります。

開発サーバー上でで Node.js + Puppeteer を動かして、ローカル(Mac)のブラウザを操作する方法です。

# SSHポートフォワードで解決

何の変哲もない方法ですが、

1. リモートデバッグポートを開いてブラウザを起動する。
2. リモートデバッグポートへのトンネルを掘って開発サーバーに接続する。
3. 開発サーバーからトンネルを経由してブラウザを操作する。

![index_js_—_puppeteer-local-chromium__SSH__devport__と_新しいタブ_と_miyanaga_—__Applications_Chromium_app_Contents_MacOS_Chromium__—__Applications_Chromium_app_Contents_MacOS_Chromium_—_Chromium_Helper__Renderer__◂_Chromium_--remote-debugging-port.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35178/1867520e-db16-a02b-e934-c75ef258ba7b.png)

## 具体的には

`~/.ssh/config`で開発サーバー接続時にポート`19222`のリモートトンネルを掘っておきます。

```ssh

Host dev
  RemoteForward 19222 localhost:19222
```

次に Chrome や Chromium を `--remote-debugging-port 19222` で起動します。

```sh
/Applications/Chromium.app/Contents/MacOS/Chromium --remote-debugging-port=19222
```

サーバー上で Puppeteer を使います。このとき、 `launch` ではなく `connect` でローカルのブラウザに接続します。

```javascript
const Puppeteer = require('puppeteer-core')

async function main() {
  const browser = await Puppeteer.connect({
    browserURL: 'http://localhost:19222',
  })
  const page = await browser.newPage()
  await page.goto('https://www.ideamans.com/')
}

main()
```

予定通り動いたよというレポートと、自分用メモでした。
ECRリポジトリから最新のタグを取得する

# 目的

- ECRリポジトリに保存されたDockerイメージの最新のタグを取得する

# 使うもの

- AWS CLI

## 手法
`--query` を利用してAWS CLIの結果をフィルタ、抽出できます。

```
aws ecr describe-images --repository-name 【リポジトリ名】 \
  --query "reverse(sort_by(imageDetails[*], &imagePushedAt))[0].imageTags[0]" \
  | sed -e 's/"//g'
```


`--query` は [JMESPath](https://jmespath.org/tutorial.html) の文法が使えます。

上記の例では、リポジトリのイメージ一覧を取得して、imagePushedAt（日付）で降順ソートを行い、1つ目の imageTagsを取得します。

配列になっているので、そのままでは以下のように扱いづらいため、imagePushedAt[0] で値だけ取り出します。

```
# imageTags で取得
[
    "005d6f6"
]

# imageTags[0] で取得
"005d6f6"
```

最後に `sed` でダブルクォートを取り除き、再利用可能にします。

# 参考

[AWS CLI からのコマンド出力の制御 - AWS Command Line Interface](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-usage-output.html#cli-usage-output-filter)
> --query オプションを使用して出力をフィルタリングする方法
> AWS CLI は、--query オプションによって、組み込みの JSON ベースの出力フィルタリング機能を提供します。--query パラメータは、JMESPath の仕様に準拠している文字列を受け入れます。

[JMESPath — JMESPath](https://jmespath.org/)
Windows開発環境2020 - VScode/Docker/WSL2

# WSL2
要件はバージョン 1903 以降、 ビルド 18362 以上。

## 手順 1 - Linux 用 Windows サブシステムを有効にする
管理者として PowerShell を開き、以下を実行します。

```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

## 手順 2: 仮想マシンの機能を有効にする
管理者として PowerShell を開き、以下を実行します。

```
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
終わったらPC再起動

## 手順 3 - Linux カーネル更新プログラム パッケージをダウンロードする
以下をインストール
- [x64 マシン用 WSL2 Linux カーネル更新プログラム パッケージ](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi)

## 手順 4 - WSL 2 を既定のバージョンとして設定する
管理者として PowerShell を開き、以下を実行します。

```
wsl --set-default-version 2
```

## 手順 5 - 選択した Linux ディストリビューションをインストールする
[Microsoft Store](https://aka.ms/wslstore) を開き、希望する Linux ディストリビューションを選択します。基本Ubuntuで良いかと。

## 手順 6 - 新しいディストリビューションを設定する
新しくインストールした Linux ディストリビューションを初めて起動すると、コンソール ウィンドウが開き、ファイルが圧縮解除されて初期設定が走ります。途中でユーザー名とパスワードを決めてくれと言われますので入力。

# Docker Desktop
前提としてWindows 10 ProであればHyper-Vの有効化が必須。
HomeであればUEFIから設定かも。詳しくは管理者に聞いてください。

## インストール
下記からDocker Desktop Windows版 をダウンロード

- [Docker Desktop for Mac and Windows | Docker](https://www.docker.com/products/docker-desktop)

ダウンロードが出来たらインストーラーを実行します。
**必ず「Enable WSL 2 Windows Features」にチェックが入っている事を確認**してインストールしてください。

# 開発環境導入
ここからWSL2上で開発環境を構築していきます。
PowerShellで `wsl` コマンドを打つ事でWSL2に切り替えできます。

### 最新の状態に更新
まずは最新にしておきましょう

```
sudo apt update && sudo apt upgrade -y
```

### nvmをインストール
インストール

```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.0/install.sh | bash
```

インストール出来たか確認するためターミナルを閉じて再度WSLに入ってから下記を叩く

```
command -v nvm
```
`nvm`と返ってきたらインストール完了

### Node.jsをインストール
安定版(LTS)をインストール

```
nvm install node --lts
```
確認します

```
$node -v
v14.15.1
```

### yarnをインストール
[公式ドキュメント通り](https://yarnpkg.com/en/docs/install#linux-tab)にインストールします

```
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install -y yarn
```
確認します

```
$ yarn -v 
1.22.5
```
同時に入る古いNodejsを削除しておく

```
sudo apt purge -f libuv1 nodejs
```
PyTorchで自作の損失関数を使う

# はじめに
PyTorchで自作の損失関数の書き方、使い方を説明します。私が使っているPython, PyTorchの環境は以下の通りです。

### 動作環境
Python 3.7.9
torch 1.6.0+cu101

# PyTorch標準の損失関数に倣った書き方
PyTorchに元々ある__torch.nn.MSELoss__や__torch.nn.CrossEntropyLoss__等に倣った書き方です。クラスとして損失関数を定義します。

```python
class CustomLoss(nn.Module):
    def __init__(self):
        super().__init__()
        # 初期化処理
        # self.param = ... 

    def forward(self, outputs, targets):
        '''
        outputs: 予測結果(ネットワークの出力)
　　　　 targets: 正解
        '''
        # 損失の計算
        # loss = ...
        return loss
```

### 使い方
PyTorch標準の損失関数と同じ使い方です。

```python
'''
model: ネットワーク
inputs: ネットワークの入力
targets: 正解
'''
criterion = CustomLoss()
outputs = model(inputs)
loss = criterion(outputs, targets)
loss.backward()
```

# 単純な書き方
単純に関数として定義しても大丈夫です。

```python
def CustomLoss(outputs, targets):
    '''
    outputs: 予測結果
　  targets: 正解
    '''
    # 損失の計算
    # loss = ...
    return loss
```

### 使い方

```python
'''
model: ネットワーク
inputs: ネットワークの入力
targets: 正解
'''
outputs = model(inputs)
loss = CustomLoss(outputs, targets)
loss.backward()
```

# backward(誤差逆伝播)に関する疑問
誤差逆伝播に使う勾配はどうなってるの？自作の損失関数の勾配は計算しなくていいの？という疑問のある人向けの説明です。

結論から言うと、__自分で勾配を計算する必要はありません。ライブラリが自動的に計算してくれます。__

PyTorchのforwardとbackwardについて詳しく紹介しているサイトがありましたので、掲載しておきます。
Pytorchの基礎 forwardとbackwardを理解する
https://zenn.dev/hirayuki/articles/bbc0eec8cd816c183408

具体例を見ていきましょう。
入力を二乗する関数を作ってtensorを入力してみます。

```python
import torch

def squring(x):
    return x**2

x = torch.tensor(1.0, requires_grad=True)
out = squring(x)
print(out)
# tensor(1., grad_fn=<PowBackward0>)
```
入力するtensorの引数__requires_grad=True__としておくことで、backwardをした際に勾配が自動的に計算されます。

それでは、backwardをして勾配を自動的に計算させましょう。自動的に計算された勾配は、入力したtensorの__x.grad__に格納されています。

```python
out.backward()
print(x.grad)
# tensor(2.)
```
$x^2$の微分$2x$の結果が__x.grad__に計算されていることがわかります。
このようにPyTorchでは、勾配は自動的に計算されるので、自分で計算する必要はないわけです。

# 参考資料
Pytorchの基礎 forwardとbackwardを理解する
https://zenn.dev/hirayuki/articles/bbc0eec8cd816c183408
レイトレーシング(BVH)で point query(最近傍交差点) を求めるメモ

与えられた点から, 最近傍のメッシュ(surface)の交点を求めたい.
形状処理や, 物理シミュレーションなどに役立ちます.

最近傍点を求める方法(k-d tree など)は他にもいくつかありますが,
昨今ではレイトレーシング(BVH のカスタム探索)で行うのが, 任意ポリゴンに適用できたりしてナウでヤングそうです(基本 `O(logN)` で処理できるので効率がよい).

Embree では point query として実装されています.

## 方法

アルゴリズムを簡潔に解説したのははなさそう...?

基本は, ray tracing の場合(位置 + 方向)と同じです.

トラバース用の stack を BVH の depth + いくらかぶん確保しておく.

* 位置 + radius で BVH をトラバースする
  * Sphere + BBOX(cube) の交差判定 
* ヒットする可能性のある BVH node に当たったら 点と geometry(e.g. triangle)との交差判定をする.
  * 形状が triangle の場合, 求め方は以下など 
  * https://www.geometrictools.com/Documentation/DistancePoint3Triangle3.pdf
  * https://www.iquilezles.org/www/articles/triangledistance/triangledistance.htm
  * (distance だけの場合)
  * distance と, 実際の交点位置も求めるにはもうちょっとややこしい(=> 後述) 
* 残りのヒットする可能性のある BVH node をトラバース

実装としては Embree or 以下が参考になるでしょう.

https://github.com/ingowald/closestSurfacePointQueries

## 点と三角形の最短距離

高校数学のベクトルで習うかな!?

3D Distance from a Point to a Triangle
http://cs.swan.ac.uk/~csmark/PDFS/1995_3D_distance_point_to_triangle

点を三角形の平面に射影したときに, 三角形内にあれば, 射影点(点から平面の垂線方向に進んで平面と交差する点)が最短距離 + 方向ベクトルとなる.

その外の場合. 三角形の辺か頂点のどこかが最短距離とその方向ベクトルとなる.
基本 6 パターンある.

## GPU(RT core) では...?

http://www.sci.utah.edu/~wald/Publications/2019/rtxPointQueries/rtxPointQueries.pdf

現状(2020/11), RT core(HW raytracing core)自体には直接には point query や, BVH traverse をカスタムに行うのは無い.

レイは任意の方向で, tmax を小さくしてトラバースさせる. 交差判定はカスタムカーネルで.
ただし完全にうまく行く保証はないので, なにかしら対策は必要.

## その他

* nanoflann: https://github.com/jlblancoc/nanoflann
  * k-d tree を構築して k-NN 探索を行う.
[javascript] switchを用いて３つ以上の条件分岐を行う。

この記事ではrails5.2.3を使用しています

<h1>概要</h1>
jsで条件分岐する際にswitchの使用方法で引っかかったので備忘録

<h1>if else との違いは？</h1>
こちらの記事で分かりやすく紹介されています。
https://qiita.com/taai/items/90cd190764f6dfcf6abd




<h1>解説</h1>


```ruby:switch文の基本書式

switch(式){
  case 条件１:
    条件1に当てはまる場合の処理
    break;
  case　条件２:
    条件2に当てはまる場合の処理
    break;
  default どのcaseにも当てはまらない場合:
    どのcaseにも当てはまらない場合の処理
}
```

```ruby
switch(式){
・・・
}
```
ここの式と条件が一致した場合に指定した処理が行われます。
条件は上から順に読み込まれ、最初にヒットした条件の処理が実行されます。

例えば

```ruby
let a = "あ"

switch(a){
  case "あ":
    console.log(0)
    break;
  case "い":
    console.log(1)
    break;
  case "あ":
    console.log(2)
    break;
  default:
    console.log(3)
}

>> 0
```
条件に一致した最初のcaseが実行されました。
３つ目のcaseにも一致する条件がありますが、実行されるのは最初にヒットした１件のみなのでその後の処理は実行されません。

<h2>様々な条件の指定方法</h2>
こんな使い方もできます。

```ruby
let a = [1, 2, 3, 4, 5]

switch(true){
  case a.length == 4:
    console.log(0)
    break;
  case a.length == 5:
    console.log(1)
    break;
  default:
    console.log(2)
}

>> 1
```
こうすると、細かい条件指定ができます。
参考記事にはさらに応用的な使い方も紹介されているので、確認してみてください。

<h1>参考

https://www.javadrive.jp/javascript/if/index4.html
jestのテストコード側で特定の例外を発生させて、機能側でその例外をキャッチ

## js、tsの例外キャッチについて
javaみたいに直接例外の名前を指定して、

```java:anime-suko.java
} catch (IOException ioe) {
```
みたいに指定できない。

普通、js、tsで例外処理を書くときは、こんな感じになる

```typescript:anime-suko.ts
try {
    //いろいろ
} catch (err) {
    console.error(err);
}
```

だけど、処理によっては、特定の例外をキャッチさせたいときがある。

## 方法
**●機能側のコード**
➡機能側で例外をキャッチするには、こうなる

```typescript:anime-suko.ts
try {
    //いろいろ
} catch (err) {
    if (err.message === 'GoneException') {
        //なんかいろいろ
    }
}
```
**●テストコード**
➡以下のように、mockImplementation()を使うことで、モック関数のデフォルトの実装を定義できる。今回は、2回目の処理呼び出しの際に例外を発生させるようにしている。
公式ドキュメントはこちら
https://jsprimer.net/basic/error-try-catch/


```typescript:anime-suko.test.ts
await jest
    .spyOn(pushModule, 'pushParams')
    .mockReturnValueOnce(Promise.resolve())
    .mockImplementation(() => {
      throw new Error('GoneException')
    })
```

## 感想
自分はjavaは研修以外で勉強してないので、javaだとテストコードの書き方分からん。JUnitを用いたテストの流れは見たことあるけど、jestに比べるとめっちゃ面倒で分かりにくい気がするンゴ。。。

javascriptだと、nodeを考えると便利なモジュールを使いまくって、テストコードも書きやすいし、何か実装で困ったら、このモジュール使ったらええやんみたいに解決できることが多い。
README.org

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# qiita\_links

1.  [環境設定](https://qiita.com/lynd2299/private/0761188cd259b580b611)

2.  [第7回ノート](https://qiita.com/lynd2299/items/b39fcde343a9efa119f2)

3.  [第8回ノート](https://qiita.com/lynd2299/items/d941f7a96128fc0febdf)

4.  [第9回ノート](https://qiita.com/lynd2299/items/d890579c98682eb95d30)

5.  [第10回ノート](https://qiita.com/lynd2299/items/ec3a81a1e86439d22fdf)

6.  [第11回ノート](https://qiita.com/lynd2299/items/8e878baffbe95f6c6d54)


# extra

-   [Roman Numerals](https://qiita.com/lynd2299/items/0b4c0e4664692163695a)
-   [Google Recruit](https://qiita.com/lynd2299/items/f396a4890e07267a5e1f)



------
 - **source** ~/multiscalesim_toku/grad_members_20f/members/lynd2299/README.org
VBAで知っておくべき小技&設定

VBAでソースコードを書いたり、デバッグする際に便利な小技&設定をご紹介します。

**Option Explicitを宣言セクションに記載する**
**Option Explicitを自動入力する**
**イミディエイトウィンドウで、小さくテストをする**

# Option Explicitを宣言セクションに記載する
Option Explicitは、使う変数の宣言を必須にする命令文です。Option Explicitを記載することで、宣言していない変数を使えなくなります。
変数の宣言を必須にすることで、変数のタイピングミスがあった時に「変数が定義されていません」というエラーメッセージが表示されるので、タイピングミスに気づくことができます。Option Explicitを記載していないと、エラーメッセージが表示されないので、ミスの箇所の特定が難しくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262601/eebd72bf-38f9-067d-11ab-ff07b42f2519.png)

# Option Explicitを自動入力する
Option Explicitを毎回記載するのは手間なので、自動入力するよう設定を変更します。
ヘッダーメニューの　ツール -> オプション でオプションポップアップを開き、編集タブを選択します。
「変数の宣言を強制する」にチェックを入れると、新規でVBAを作る際にOption Explicitが自動で記載されます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262601/22e81174-9c92-06ff-2bea-4b85040a2e2b.png)

# イミディエイトウィンドウで、小さくテストをする
ソースコードは右上のコードウィンドウにいきなり記載するのではなく、イミディエイトウィンドウに入力してソースコードの正しさを検証してから、コードウィンドウ記載することをお勧めします。
いきなりコードウィンドウに記載するとバグが発生した際に、他の関数などと複合している状況のため、バグの発生場所の特定に時間がかかってしまいます。
イミディエイトウィンドウで小さくテストをして、正しいソースコードだけをコードウィンドウに記載することで、デバッグの時間を減らすことができます。

イミディエイトウィンドウには、「?」に続いて、テストしたいソースコードを入力し、Enterを押すと、結果が表示されます。
以下の事例では、A1セルにaが入っている状態で、a1のValueを確認しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262601/62597445-626a-599f-6b99-88ff2fb04f13.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262601/f488675d-2c90-1dc3-ad8e-1a59990abd62.png)

イミディエイトで表示できるのは変数ひとつだけです。複数の変数や配列をそのまま表示することはできません。複数の変数や配列の中身を表示したいときは、Join関数を使うと良いです。

```vb
?Join(Split("東京,大阪,名古屋",","),"*")
結果:'東京*大阪*名古屋
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262601/c5ade4a5-34d9-7eed-ded9-4a99a4808f40.png)
[個人開発]GoToイート地図検索ブラウザアプリ

# どういうもの？
・GoToイートキャンペーンに加盟している店舗を地図ベースで確認することができるブラウザアプリ
・「食べログ」、「ぐるなび」、「ホットペッパー」に登録されている店舗を統括
・コロナウイルスの流行で特に甚大な影響を受けている個人店舗を掲載（有名チェーン店は除く）
https://kanjimap.jp

# 表示画面
![Image from iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/908870/af40ab60-da94-317c-889e-6ad376210657.png)

# 機能一覧
・GPSの利用
・「たべろぐ」、「ぐるなび」、「ホットペッパー」毎に、マーカ制御
・Zoomレベルによるマーカ表示数制御
・PWAの対応
・駅名検索による表示画面の遷移

# 技術スタック
・OpenStreetMap
・leaflet
・jquery
・非同期通信
・MySQL
・PHP
・PWA
・GPS
・AutoComplete
・スクレイピング
・Python
・Perl
・タイルサーバ構築

# こだわったところ
・タイルサーバ構築と高速化
・マーカー制御と軽量化
・通信量の低減化

# 開発者の戯言
GoToイートが開始してすぐに計画、開発を進めました。リリースは11月の中旬です。大体1ヵ月半程度となっています。
正直、GoToイートはもっと続くものだと思っていましたが思ったよりも寿命を早く迎えてしまったことをとても残念に思っています。発端は感染症なので仕方ありませんが。。。
あとは開発するスピードが遅かったのもあります。このサービスの開発は2人で行いましたが、2人ともはWeb系ではなく組み込み系の人です。そのため、初めて使った言語（Perl、PHP、javascript）とかMySQLも初めてでしたし、大規模データの扱いも大変でした。
デザインに関しては、bootstrapとawesomefontに頑張ってもらいましたが、デザイナーさんは必要だなぁと再認識しました。スマホで手軽に使えることをベースに作っていったので、画面サイズの大きいPCだと使いづらいかなぁとかはありますし。そこまで手が回らなかったのもあります。
現行ではまだまだ粗削りの部分が数多くありますが、今回開発した地図系ベースで色々なジャンルを抑えていきたいという気持ちがありますので、フィードバックがあると大変嬉しく思います。
今後は、システムの方にフォーカスしたものを投稿していく予定ですので、興味があればどうぞよろしくお願い致します。
Google Recruit

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# Google Recruit


## 講義ページリンク

[Google recruit problem, exp and prime](https://qiita.com/daddygongon/items/ba94b0f2a73990fc6a07)


## 課題

ネイピア数(200桁)に出現する10桁の整数のうち一番初めに登場する素数を求める


## 方法

-   先頭から順番に10文字ずつ切り取って素数判定する


## 解答例

```ruby:"google_recruit.rb"
#!/usr/bin/env ruby
# frozen_string_literal: true

napier = File.read('napier.txt').delete('.')
digit_num = 10

def prime?(n)
  false if n == 1
  2.upto(Math.sqrt(n).to_i) do |i|
    return false if (n % i).zero?
  end
  true
end

(0..napier.length - digit_num).each do |i|
  n = napier.slice(i, digit_num).to_i
  if prime?(n)
    puts n
    break
  end
end
```

```:"napier.txt"
2.7182818284590452353602874713526624977572470936999595749669676277240766303535475945713821785251664274274663919320030599218174135966290435729003342952605956307381323286279434907632338298807531952510190
```

出力

    > ruby google_recruit.rb
    7427466391


# NOTE

-   prime?は(この問題では心配ないが)1はfalseになることを忘れないようにする
    -   中身はほとんど講義ページと同じ
-   配列のスライスは `.slice(pos, size)` でposから長さsizeで切り出す事ができる



------
 - **source** ~/multiscalesim_toku/grad_members_20f/members/lynd2299/google_recruit.org
Denoでshebangを使って実行する

JavaScrptでもTypeScriptでも、
`#!/usr/bin/env -S deno run`でOK！

```js:hello.js
#!/usr/bin/env -S deno run
console.log('hello deno!');
```

```js:hello.ts
#!/usr/bin/env -S deno run
const message: string = 'hello deno!'
console.log(message);
```

`deno run`で実行する仕様なので、
`#!/usr/bin/env node`と同じ感覚で
`#!/usr/bin/env deno`と書いてもダメなんですねー。

```
error: Found argument './hello.js' which wasn't expected, or isn't valid in this context

USAGE:
    deno [OPTIONS] [SUBCOMMAND]

For more information try --help
```

`#!/usr/bin/env deno run`でも叱られます。
シェバンにオプションを渡すときは`-S`が必要。

```
/usr/bin/env: ‘deno run’: No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines
```

参考
https://stackoverflow.com/questions/63043929/how-do-i-invoke-deno-from-a-shell-script

## 追記）拡張子について

僕はシェバン付けてコマンドとして実行する場合も、ファイルの拡張子は付ける派なのですが、
拡張子を省略した場合は、DenoではJavaScriptと見なされるようです。
現状、TypeScriptと認識させたい場合は、`.ts`拡張子はしっかり付けるのが安全です。

TypeScriptでも拡張子を省略したいという需要はあるようで、ここで議論されています。
https://github.com/denoland/deno/issues/5088
【Unity】キー入力でオブジェクトを移動させる（自分用）

```

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class inputmoov : MonoBehaviour
{
    public float speed = 3f;//インスペクターで動くスピードを帰れる・

    void Start()
    {

    }

    void Update()
    {
        float moveX = Input.GetAxis("Horizontal");//⇦⇨キーの入力
        float moveY = Input.GetAxis("Vertical");//↑↓の入力

        moveX *= Time.deltaTime * speed;
        moveY *= Time.deltaTime * speed;

        transform.position += new Vector3(moveX, 0, moveY);//動かしたい方向の軸に先程の変数を入れる

    }
}

```

このスクリプトを動かしたいオブジェクトにアタッチ。
終了。
Wordpressの「予期しないエラー」でテーマが選べない場合の対処法


# 環境
CentOS8、MariaDB 10.3.17、PHP 7.4.13、apache 2.4.37、SELINUX=enforcing

# 問題
Wordpressのテーマを変更しようとして、「新規追加」ボタンを押すと、エラーが出てテーマを選択できない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/a0e20fd7-9e75-1fda-29c6-c9ca3034b6ab.png)

# 原因
そもそも自分が操作しているクライアントPCとは繋がっており、ファイアーウォールとかではない。ということでSELinuxのログを見ると`denied`の文字が大量に出てる。

```
# aureport --avc

AVC Report
===============================================================
# date time comm subj syscall class permission obj result event
===============================================================
1. 11/25/2020 19:00:36 ? system_u:system_r:system_dbusd_t:s0-s0:c0.c1023 0 (null) (null) (null) unset 141
2. 11/25/2020 19:34:17 php-fpm system_u:system_r:httpd_t:s0 0 tcp_socket name_connect system_u:object_r:http_port_t:s0 denied 226
...
```

[RedHatのドキュメント](https://access.redhat.com/documentation/en-us/reference_architectures/2017/html/configuring_a_red_hat_jboss_eap_7_cluster/creating_the_environment)によると、SELinuxをdisableにしていない場合、SELinuxはApacheが外部ネットワークと通信するのを許可しない。なので、テーマだけでなくプラグインの追加とか、外部ネットワークとの通信が発生する処理なら全て同じエラーが発生する。

> 4.4.2. Security-Enhanced Linux
This reference environment has been set up and tested with Security-Enhanced Linux (SELinux) enabled in ENFORCING mode. Once again, please refer to the Red Hat documentation on SELinux for further details on using and configuring this feature. For any other operating system, consult the respective documentation for security and firewall solutions to ensure that maximum security is maintained while the ports required by your application are opened.
>
When enabled in ENFORCING mode, by default, SELinux prevents Apache web server from establishing network connections. On the machine hosting Apache web server, configure SELinux it to allow httpd network connections:
>
```
# /usr/sbin/setsebool httpd_can_network_connect 1
```

# 対処法
ということで、上記のコマンドでSELinuxにApacheの外部ネットワークとの通信を許可させる。
めでたく解決。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/0ea9ce00-fbdb-ee2c-87fe-d0d93dd66e9a.png)
mac VSCode で Verilog コンパイル

## brew で icarus-verilogインストール

```
brew install icarus-verilog
```
これで```iverilog```コマンドが使えるようになる。
以下の形式でコマンドライン上でコンパイルできるらしい。
```iverilog -o [出力ファイル名] -s [トップモジュール名] [.vファイルの羅列]```



## VSCode で Verilog コンパイル
### エクステンションを入れる。
https://github.com/leafvmaple/vscode-verilog
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/2557a6c8-dc2f-d77d-7cf0-696b3fda902e.png)
ビビッドな黄緑でわかりやすい

### コンパイル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/c1e24298-3b8f-9869-ec4c-a562318dfd3d.png)
右上の黄緑のマークを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/7f5cebce-a6a4-d440-5aa5-f715fe5a49f6.png)

できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/8cbcf768-d980-ccd7-45b6-a97ca12f8e76.png)

### 例
#### コンパイルエラーの時

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/ad191b0c-bd75-84b0-ec70-7a52a61ce88b.png)

#### テストベンチコンパイルした時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279062/dbc54a0e-93eb-f1f6-d005-2d3462685f7f.png)
LinuxにDockerをInstallするAnsible-Galaxy

<!-- # LinuxにDockerをInstallするAnsible-Galaxy -->

[Linux](https://scrapbox.io/yumenomatayume/Linux)に[Docker](https://scrapbox.io/yumenomatayume/Docker)をインストールするたびに、

「ubuntu docker install」
「centos docker install」

などをググって、Docker公式サイトより手動でインストールしていました。

毎回インストールするのは手間なので、自動化したいと思っていた矢先、
[OSS](https://scrapbox.io/yumenomatayume/OSS)で素晴らしいansible-galaxyを見つけましたので、紹介したいと思います。

## 使用するansible-galaxy

Ansible Galaxy: [https://galaxy.ansible.com/geerlingguy/docker](https://galaxy.ansible.com/geerlingguy/docker)
GitHub: [https://github.com/geerlingguy/ansible-role-docker](https://github.com/geerlingguy/ansible-role-docker)

## Ansible Playbookを書いてみる

VirtualBox上にUbuntu20.04のVMを作成します。
[Vagrant](https://scrapbox.io/yumenomatayume/Vagrant)を用いて、Provisioning Toolとして[Ansible](https://scrapbox.io/yumenomatayume/Ansible)を使用し、そのPlaybookでDockerをインストールします。

### Vagrantfileを作成する

以下の`Vagrantfile`を作成します。  
IPアドレスは`192.168.0.3/24`としてあります。

```Vagrantfile
# -*- mode: ruby -*-
# vi: set ft=ruby :

VAGRANTFILE_API_VERSION = "2"

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|

  config.vm.define "ansible-docker" do |node|
    node.vm.box = "bento/ubuntu-20.04"
    node.vm.hostname = "ansible-docker"
    node.vm.network "private", ip: "192.168.0.3", netmask: "255.255.255.0"
    node.vm.provider "virtualbox" do |vb|
      vb.memory = "1024"
    end
  end

  config.vm.provision "ansible" do |ansible|
    ansible.playbook = "./install_docker.yml"
    ansible.inventory_path = "./inventory.ini"
    ansible.limit = 'all'
  end
end
```

### roleをインストールする

rolesディレクトリを作成して、その中に今回使用するroleをインストールします。

```bash
mkdir roles
ansible-galaxy install geerlingguy.docker -p roles/
```

### InventoryとPlaybookを作る

`inventory.ini`

```ini
[ansible-docker]
192.168.0.3
```

`install_docker.yml`

```yaml
---
hosts: all
  roles:
    role: geerlingguy.docker
    become: yes
```

## Playbookを実行する

ディレクトリ構造は以下のようになっています。

```console
.
├── Vagrantfile
├── install_docker.yml
├── inventory.ini
└── roles
     └── geerlingguy.docker
         ├── LICENSE
         ├── README.md
         ├── defaults
         │   └── main.yml
         ├── handlers
         │   └── main.yml
         ├── meta
         │   └── main.yml
         ├── molecule
         │   └── default
         │       ├── converge.yml
         │       └── molecule.yml
         └── tasks
             ├── docker-compose.yml
             ├── docker-users.yml
             ├── main.yml
             ├── setup-Debian.yml
             └── setup-RedHat.yml
```

以下のコマンドでVM作成します。(ホストOSでAnsible実行環境が整備されている必要があります。)

```bash
vagrant up
```

`docker`,`docker-compose`がインストールされていることを確認できます。

```console
vagrant@ansible-docker:~$ sudo docker -v
Docker version 19.03.12, build 48a66213fe
vagrant@ansible-docker:~$ sudo docker-compose -v
docker-compose version 1.26.0, build d4451659
```
bash を使った集合演算 (set operation)


　`pinfo` コマンド素敵だなぁと思いつつ、`info coreutils` を読んだ時に知った話。つまり、これ [coreutils のマニュアルの 8.3.6](https://www.gnu.org/software/coreutils/manual/html_node/Set-operations.html) の話。

## 集合演算

| 集合 | 要素 |
|:-:|:-:|
| A | `seq 1 3` (1 2 3) |
| B | `seq 3 5` (3 4 5) |

### 和集合

`-u` オプションの有無で重複の有無を調整できる。

```
$ sort -u -n  <(seq 1 3) <(seq 3 5)
1
2
3
4
5
```

### 積集合

要素の重複ありで和集合を取った後で、重複がある行だけ出力する。

```
$ sort -n <(seq 1 3) <(seq 3 5) | uniq -d
3
```

### A に含まれない B の要素

予め A の要素を2回出現させることで、B だけの要素が1回しか出現しないようにしている。

```
$ sort -n <(seq 1 3) <(seq 1 3) <(seq 3 5) | uniq -u
4
5
```

集合Aが集合Bの要素を全て含有する場合に限り、差集合 (A - B) として定義できる（はず）。

### 集合の XOR

重複する要素は2回出現するので、それを取り除いて表示しているだけ。

```
$ sort -n  <(seq 1 3) <(seq 3 5) | uniq -u
1
2
4
5
```

## これが何の役に立つのか？

　分からない。そもそも趣味で勉強した時に偶々知っただけの話なので。

　一応、業務では以下の用途で使ったことがある。

* 未使用のIPアドレス一覧を、IPアドレス一覧から取得する
C言語で型のサイズを勘違いしてた話

# ことの起こり
昔（25年位前？）、C言語を習い始めたばかりくらいのときに

|型|サイズ(bit)|
|---|---|
|int|16 or 32（実装による）|
|short|16|
|long|32|

みたいな記述がよくあったと記憶しています。
なんとなくそのままの感覚でプログラム組んでたけど、今更ながら認識が間違ってることに気付いてしまったのでメモ。

## そもそも
変数のサイズが重要な場合は `int32_t` とか `UINT16` みたいな型を定義したりとかして使うんで、あまり深く考えてませんでした。

## きっかけ
昔の誰かが作ったプログラム（今となっては経緯の分からないもの）の移植中に `UINT32` が 64bit のサイズになってるのに気付いて確認したところ、、

```C
typedef unsigned long UINT32;
```

みたいなところがありまして、これを環境に合わせて書き直せばいいんですけれども、感覚的に「これ正しくね？（32bit の表現として）」と思ってしまって、感覚と現実が合わなかったので一応確認したのです。

# 実際に確認してみた

確認用のプログラム

```C:testSize.c
#include <stdio.h>

int main(){
	printf("size of:\n");
	printf(" int:                %zu\n", sizeof(int));
	printf(" short:              %zu\n", sizeof(short));
	printf(" long:               %zu\n", sizeof(long));
	printf(" long long:          %zu\n", sizeof(long long));
	printf(" unsigned int:       %zu\n", sizeof(unsigned int));
	printf(" unsigned short:     %zu\n", sizeof(unsigned short));
	printf(" unsigned long:      %zu\n", sizeof(unsigned long));
	printf(" unsigned long long: %zu\n", sizeof(unsigned long long));

	return 0;
}
```

うーん、わざわざここに載せるほどのものでもないですね。。

## 実行結果
### Raspberry Pi 3 Model A+

```shell
$ ./testSize
size of:
 int:                4
 short:              2
 long:               4
 long long:          8
 unsigned int:       4
 unsigned short:     2
 unsigned long:      4
 unsigned long long: 8
```

これこれ。私の期待してた結果です。

### Debian 10.6.0 < Virtual Box 6.1 < WIndows10

こっちが私の感覚と現実の違ってしまった環境。

```shell
$ ./testSize
size of:
 int:                4
 short:              2
 long:               8
 long long:          8
 unsigned int:       4
 unsigned short:     2
 unsigned long:      8
 unsigned long long: 8
```

あ、`long` がやっぱり 64bit なのね。
`long long` が 128bit になったりもしないのかぁ、、 

# 結論
ただそれだけです。

`long` も実装によってサイズが違うのね。
`short` が 16bit 以外の実装環境もあるのかな？
ってか、そもそも規定がどうなってるのかきちんと調べろって話よね。。

昔の記憶だけでやってると思わぬところで勘違いしてしまってることありますね。。
[vue.js] クリックすると編集可能に切り替え、入力した後、input value を取得する(v-if/v-show $refs)

参考先「1」でinput実装したけど、更新されたinput値はどうやって取得するかは苦戦した！ 

v-ifを使う時に、```$refs```でinput valueなどを取得したいのに、undefined になっていることがよくあります！(```$refs.input```まで値出ているけど、```$refs.input.XXX```にすると、undefinedになった)

色々調べて、原因はわかった、参考先「2」より

>ref の登録タイミングに関する重要な注意事項として、参照自体は、render 関数の結果として作成されているため、最初の描画においてそれらにアクセスすることができません。それらはまだ存在しておらず、$refs はリアクティブではなく、従ってデータバインディングのためにテンプレートでそれを使用すべきではありません。

のためです！
下記の方法で一応、編集モードからテキストモードに切り替えると、更新されたinput値を取得できた！

*** IDを付与して、document.getElementById('post_wgt').innerTextでvalueをgetします　***


```
<template>
 <div id="app">
  <div class="text" id="post_wgt" v-if="!edit" v-text="value" v-on:click="edit = true"></div>
  <b-inform-input v-if="edit" type="text" ref="input"
          v-model="value" v-on:blur="edit = false"  v-focus></div>
  <b-button @click="onSave()" variant="outline-info" >保存</b-button>
</template>
<script>

export default {
  data () {
    return {
      edit: false
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  },
  methods: {
    onSave () {
      this.$nextTick(() => {
       console.log(document.getElementById('post_wgt').innerText)
      )}
    }
  }
}

</script>

```
参考先：
[1、[vue]クリックすると編集可能に切り替わるテキスト](https://qiita.com/huigo/items/5a1eb5ade1bce13c098e)
[2、vue.js(ref)](https://jp.vuejs.org/v2/api/index.html)
Ubuntu20.04にPowershellをインストールする

## インストール
```
sudo snap install powershell --classic
```

## 使う
- pwsh で使う
 
```
yuta:~/powershell $ pwsh
PowerShell 7.1.0
Copyright (c) Microsoft Corporation.

https://aka.ms/powershell
Type 'help' to get help.

PS /home/yuta/powershell> Get-ChildItem

    Directory: /home/yuta/powershell

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-----          2020/11/11    10:08       68242798 powershell_7.1.0-1.ubuntu.20.04_amd64.deb

PS /home/yuta/powershell> 
```
リンクを別タブで開かせる際、target="_blank"だけだと危険らしい

# はじめに
webアプリケーション作成時に、リンクを別タブで開かせたいと思ってググってみたところ、`target="_blank"`だけの記述では危険だという記事がヒットした。

# リンクを別タブで開かせる基本的な記述

```html
<a href="リンク先" target="_blank">別タブで開く</a>
```

aタグでリンクを別タブで開かせたいときの基本的な記述。これだけでリンクを別タブで開かせることができる。しかしこれだけだと危険性があるらしい。

# セキュリティ面とパフォーマンス面で問題がある
`target="_blank"`だけの記述では、セキュリティ面とパフォーマンス面で問題があると、googleのデベロッパーサイトで指摘されている。

- [googleデベロッパーサイト](https://developers.google.com/web/tools/lighthouse/audits/noopener?hl=ja)

具体的な問題内容と対策についてまとめてくれている日本語記事があったのでこちらも参考に

- [実はヤバい？危険な「別タブで開く（target="_blank"）」](https://wwg.co.jp/blog/3807)
- [「別タブで開く」リンク(target="_blank")は脆弱性あり？](https://webtan.impress.co.jp/e/2020/03/13/35510)

# 対策方法
上のリンク先でも紹介されているが、`target="_blank"`と併用して`rel="noopener"`または`rel="noreferrer"`を記述することが推奨されている。

```html
<!-- 記述例 -->
<a href="リンク先" target="_blank" rel="noopener">別タブで開く</a>
```

`rel="noopener"`、`rel="noreferrer"`はどちらもリンク先からリンク元が参照できなくなるようにする。
これでリンク先からリンク元情報を抜き取られたり操作されなくなる。

# さいごに
今回は個人的なwebアプリケーションの中で別タブリンクを貼りたかったので大きく影響のある話ではなかったが、これからwebアプリを開発していくにあたって頭に入れておいたほうが良さそうな内容だと思った。
XplentyでJOIN処理を高速化する方法


正しいJoinタイプを選択することでデータ統合のパフォーマンスを向上させることができることをご存知でしたか？[Pig はいくつかの異なるアルゴリズム](https://pig.apache.org/docs/latest/perf.html#specialized-joins)を持っており、データセットのもつ特性に応じて最適な方法で結合処理を行うことができ、ジョブの実行時間を大幅に節約することができます。

XplentyのJoinコンポーネントでは、Pigで利用可能なのJoinタイプのうち、以下のタイプを指定することが可能です。

#Replicated Join
**どういう場合に使う？**
データセットがメモリに収まるほど小さい場合。

**どう動作するか?**
Replicated joinは、小さなデータセットを分散されたキャッシュ（すべてのクラスタマシンで利用可能なスペース）にコピーし、メモリにロードします。各マッパーは大きなデータセットが分割されたデータを処理し、より小さい方のデータセットの中から一致するレコードを探します。データはメモリ上で扱われ、MapReduceのマップ側で処理されるため、この操作はデフォルトの結合よりもはるかに高速に動作します。内部および外部結合の両方が利用可能で、小さい方のデータセットはjoinの右側にセットする必要があります。

**制約**
Replicated joinを使用するためには、どのくらい小さいサイズのデータセットまで可能かは明確ではありません。[Pigのドキュメント](https://pig.apache.org/docs/r0.17.0/perf.html#replicated-joins)によると、プロセス全体で1GBのメモリが必要な場合、最大100MBまでのリレーション(ジョイン先のデータ)が利用可能です。データをロードするのに十分なメモリがない場合、ランタイムエラーが発生します。
XplentyでReplicated joinを指定する場合、InnerもしくはLeft joinのみ利用可能です。

#Skewed Join
**どういう場合に使う？**
あるキーの値が他の値よりもはるかに多くの部分を占めており、データが大きすぎてメモリに収まりきらない場合。（キーの値が均等に分散されておらず、特定のキーの値に偏っている場合）

**どう動作するか?**
Standard joinsは、プロセス間でキー値を分割することで、異なるreducer間で並列に実行されます。特定のキーに対して多くのデータがある場合、データは各reducerに均等に分散されず、いずれかのreducerが大部分のデータを処理して「スタック」してしまいます。Skewed joinはこうした場合に対処するのに利用します。ヒストグラムを計算して、どのキーが最も多くを占めているかをチェックし、最適なパフォーマンスを得るためにそれぞれのreducerへデータを分割します。

**制約**
Skewed joinは内部と外部の両方の結合をサポートしていますが、2つの入力データのみになります。 2つ以上のテーブル間の結合は、さらに別の結合に分ける必要がります。また、pig.skwedjoin.reduce.memusageというJavaパラメータがあり、これはこの結合を実行するためにReducerが利用できるヒープ率を指定します。低い値を設定すると、より多くのReducerが使用されることを意味しますが、それらの間でデータをコピーするためのコストが増加します。Pigの開発者はこの値を0.1-0.4の間に設定すると良いパフォーマンスが得られると主張していますが、理想的な値を見つけるためには検証する必要があります。

#Default
**どういう場合に使う？**
上記のいずれかのケースに当てはまらない場合。

**どう動作するか?**
Joinは、特定のキーで2つの入力データセットからのレコードを一緒に一致させます。例えば、CRMからのレコードとERPからのレコードをメールアドレスなどのキーで結合することで、複数の別々のデータセットではなく、すべての顧客情報を同じデータセットにまとめることができます。外部結合も可能で、その場合、相手側で一致していないレコードも、欠落しているフィールドにNull値がセットされ含まれることになります。

Pigはマップフェーズですべての結合対象の入力データセット（2つ以上）を読み込み、各レコードのソースに注釈を付けます。結合キーをシャッフルキーとして使用し、同じキーを持つ行をグループ化します。各キー値に対して、左側の入力データセット（または複数の入力データセット）からのすべてのレコードがキャッシュされます（１つのキー値に対して複数のレコードが存在する可能性があります）。そして、右側の入力データセットがキャッシュされたレコードと掛け合わされ、出力レコードが生成されます。つまり、1対多の結合では、結合のパフォーマンスを向上させるために、キー値あたりのレコード数が多い入力データセットを常に右側に配置する必要があります。

**制約**
すべてのPigのjoinは等結合であり、join演算子には等号比較(equals/not equals)のみが使用できることを意味します。Pigはシータ（非等号）結合をサポートしておらず、MapReduceでの実装は困難です。シータ結合が必要な場合は、Cross-joinを実行してからフィルタを使用してください。

join演算子はNULLに関してはSQL標準に従って機能します - NULLキーを持つすべての行は内部結合で無視されます。したがって、無駄なレコードの処理を減らしパフォーマンスを向上させるために、内部結合処理の前にNULLキーをフィルタリングし除外してください。Null値は外部結合では保持されますが、ジョイン先のレコードに結合されることはありません。

#JOIN時のフィールド名に関する注意点
結合対象の入力データセットに同じフィールド名が含まれている場合、フィールド名の前に自動的にデータセット名が不可されます。（例：sample_input_data1::customer_id）。このような場合、ジョブ実行時にエラーを引き起こす可能性があるため、後続処理でセレクトコンポーネントを使用し、フィールドの列名を修正したり、結合処理の前に、同じ値を含むフィールドを削除するようにしてください。

#まとめ
データ統合のパフォーマンスは、正しい結合タイプを選択し使用することで向上します。片方のデータセットのサイズが小さい場合はReplicated join、特定のキーが非常に一般的な場合はSkewed Joinをお使いください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/3426cad8-98dc-0a5a-73df-170347ce5b5a.png)
【Python】GoogleColaboratory実行中のセッション切れを防止する策

個人的にスクレイピングする機会が多く、取得データの件数が多いとスクレイピング中にGoogleColaboratoryがセッション切れを起こして、イライラしてたので、対策をしたかった。

そもそもGoogleColaboratoryの仕様としては
・新しいインスタンスを起動してから12時間経過する
・セッションが切れてから90分経過する
と、インスタンスの状態がすべてクリアされてしまいます。

ただ実際はインターネットの接続状況なども含めると30分ほどでセッションが切れてしまうこともあり、実質実行中常に張り付いていないといけない状態・・・

さすがに効率が悪いので、対策を考える。

セッション切れを防止するということは常にブラウザが起動している状態を維持すれば良い
↓
つまりリロードすればよい
↓
定期的にリロードするプログラムを組めばOK

という感じで調べたところ、どうやらChromeのデベロッパーツールで定期的にリロードするコードを書けば良さそう。

Consoleウィンドウで
```function ClickConnect(){
  console.log("60sごとに再接続");
  document.querySelector("colab-connect-button").click()
}
setInterval(ClickConnect,1000*60);
```

これを入力して実行することで、60秒ごとに再接続してくれます。
無用なセッション切れも防げるので、この手間は惜しまずやりたいですね。

>参考記事
>https://flat-kids.net/2020/07/28/google-colab-%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E5%88%87%E3%82%8C%E3%82%92%E9%98%B2%E6%AD%A2%E3%81%99%E3%82%8B/
[C#の基礎] インターフェースの話 (2) 抽象クラスとの違い

* インターフェース: 実装クラスに複数適用可能、実装本体を記述できない(*)
* 抽象クラス: 実装クラスに複数適用できない、実装本体を記述できる

\*) 最近はデフォルト実装を記述できる言語もある。C#では ~~どうだろう~~ 8.0 (.NET Core 3.0) から利用可能。

どちらも利用者クラスにおいて実装インターフェースや抽象クラスと置き換え可能(リスコフの置換原則)。なので適当なFactory で生成したオブジェクトを定義したインターフェースや抽象クラス扱いできる。

### 例

インターフェース は以下が許される

```csharp
public interface IFoo{
  void DoFoo();
}
public interface IBar{
  void DoBar();
}

public class FooService: IFoo, IBar{
  public void DoFoo(){
  }
  public void DoBar(){
  }
}
```

一方抽象クラスはは以下が許されない

```csharp
public abstract class AbstractFoo{
  public abstract  void DoFoo();
}
public abstract class AbstractBar{
  public abstract void DoBar();
}

public class FooService: AbstractFoo, AbstractBar{
  public void DoFoo(){
  }
  public void DoBar(){
  }
}
```

### 使い分け

複数インターフェースを実装する局面も IDisposable を付けるとか意外はほとんどないし、実際抽象クラスだけでどうにかなる場合も多いので明確な使い分け指針があるわけでもない。

ただDI使う場合Containerへの登録等でインターフェースを定義する必要がある場合が多いかも。
【CakePHP】フォーム内のhiddenに配列を設定し、コントローラーで受け取る方法

##実現したかったこと

hiddenに配列をもたせて、コントローラー側で取得する。

##改善前

```php:cakeのビュー側					
<?php echo $this->Form->hidden('hoge',array('value' => 1)); ?>
<?php echo $this->Form->hidden('hoge',array('value' => 2)); ?>
<?php echo $this->Form->hidden('hoge',array('value' => 3)); ?>
```
クロムの検証ツールで覗いてみる

```html
<input type="hidden" name="hoge" value="1">
<input type="hidden" name="hoge" value="2">
<input type="hidden" name="hoge" value="3">
```

よし、いい感じ。

コントローラー側で受け取れているか見てみる。

```php:コントローラー側のアクションの中で実行

print_r($this->request->getData("hoge"));
exit;
```

```:画面出力結果
3
```

なんでやねん(笑)

```:自分が期待してた（欲しかった）結果
Array ( [0] => 1 [1] => 2 [2] => 3 )
```

##修正した箇所

```php:cakeのビュー側					
<?php echo $this->Form->hidden('hoge[]',array('value' => 1)); ?>
<?php echo $this->Form->hidden('hoge[]',array('value' => 2)); ?>
<?php echo $this->Form->hidden('hoge[]',array('value' => 3)); ?>
```

のようにhogeの後ろに[]をつけてあげれば期待通りの配列が取得できました。


## 終わりに
解決出来てよかったですが、なんで改善前の記述だと「3」が返ってくるのか、いまいちわからないのが現状です。。。
railsで7つのアクション以外のルーティングする場合（member,collection)


自分がcollection,memberを忘れていたので備忘録として。


railsで7つのアクション以外のルーティングをする場合

そもそも、、、７つのアクションとは
---
何か投稿するといった内容をイメージすると

index  →　一覧表示
show 　→　詳細表示
new　　→　新規投稿
create	→　新規投稿を保存
edit　　→　投稿を編集
update	→　投稿を更新
destroy	　→　投稿を削除


これらは

```ruby

resources :コントローラー名

````
でルーティングができるので便利です。
アクションを限定したいときはonly,で設定します。



７つのアクション以外のルーティングを設定したいときはどうするのか
--

方法としては２つあって
１つは

```ruby

collection do
   get（アクションに応じたHTTPメソッド） 'アクション名'
end
```

もう１つは

```ruby

member do
  get（アクションに応じたHTTPメソッド） 'アクション名'
end

```

この２つの違いはURIパターンに
:idが含まれるかどうか、です。

rails routes でURIパターンを確認し、

```
/tweets/search(.:format)  
```
であればcollectionを


```
 /tweets/:id/search(.:format) 
```
であればmember を使います。

HTTPメソッドもrails routes を実行すればわかりますが、
基本的にはgetが多いイメージです。。

get：何か出力を要求
post:データを送る　という感覚です。
EC2で自動デプロイが反映されなくなったときの対処法

# はじめに
## 現象
いつもどおり自動デプロイしたはずがまったく反映されない

## やってみて
EC2インスタンスがおかしいのかなと思って再起動してみたら無事解決。
再起動に必要なコマンドを備忘します。

# 手順
## EC2インスタンスを再起動
AWSコンソールからEC2インスタンスを再起動します。

## DBを起動させる
EC2を再起動するとDBが停止状態になるので起動させます。
（私はMariaDBを使用しています）

**確認コマンド**

```:ターミナル(EC2)
$ sudo systemctl status mariadb
```

**結果**

```:ターミナル(EC2)
● mariadb.service - MariaDB database server
   Loaded: loaded (/usr/lib/systemd/system/mariadb.service; disabled; vendor preset: disabled)
   Active: inactive (dead)
```
死んじゃってるのが確認できます。

<br>

**DB起動コマンド**

```:ターミナル(EC2)
$ sudo systemctl start mariadb
```
これで確認するとActiveになっているはずです。


## Nginxを起動させる

同じようにNginxも起動させます。

**Nginx起動コマンド**

```:ターミナル(EC2)
$ sudo systemctl start nginx
```

## 改めて自動デプロイを行う

これが本当に正解なのかわからないところがありますが（１度目の自動デプロイの内容をEC2が読み込めているなら、Unicornの起動だけでいいような気がします）

とりあえず自動デプロイを行えばEC2に反映されますし、Unicornも起動されるのでもう一度コマンドを打ちます。

```:ターミナル(ローカル)
% bundle exec cap production deploy
```

これにて一件落着です。


# おわりに

![スクリーンショット 2020-11-26 12.34.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771826/3bf614a5-28d4-acc6-2bad-ca9d6e3c46ed.png)

本当にこの画面が嫌いです。

✔︎
今日から毎日更新していく

##なぜ？
いい加減、アウトプットをしていかないといけないなと焦り始めた。
勉強、アウトプットする習慣をつける

##効果、目的
- 業務を行っていて、何がわかって何がわかるのかがわからない。
- 成長速度に満足いかない。インプット過多になりがちで記憶の定着が遅い
- 目に見えるものがないので、記事を更新していくことで見せれる状態にする

##始めようとおもったきっかけ
プログラミングスクール、業務を行っていて
いつかははじめなきゃと思っていたが、なかなか気後れする部分があり
始められなかった。
完璧な記事を投稿しなくてはと、完璧主義な部分がでてしまっていた。

しかし、つい先日以下の記事を拝見させていただいた。
[Qiitaの記事を毎日投稿する](https://qiita.com/miriwo/items/681ff186f4d6f9057135)
と、いう記事です。
引用させていただくと、
>毎日投稿することを重視し、コマンド一行でもいいからとにかく記事を書く。

この部分が自分の中で刺さりました。
１行なら絶対できるし、やるしかないと思い
未熟かつスキル不足ながら、記事投稿を始めたいと思います。