OmniAICreator/Qiita-1.07M huggingface dataset:
Effective Java(第3版) 項目9 try-finally よりも try-with-resources を選ぶ

クローズしなければならない資源に対しては、Java7で導入された try-with-resources を使用するべき、という内容です。

# 記載内容
結論としては、クローズが必要な資源を使用する場合、try-with-resourcesを使用するべき。

## try-finally の欠点
Java6以前は、資源の適切なクローズを保証するだったが、以下の欠点がある

* 間違えやすい(2007時点でJavaライブラリ内の3分の2が間違えているほど)
* finally内で発生した例外が最初に発生した例外を隠してしまう

## try-with-resources の利点
try-finally の問題が一挙に解決している。
* 資源はAutoCloseableインタフェースを実装する必要が有る
* closeで例外が発生しても、最初の例外が優先される。getSuppressedメソッドで、closeで発生した例外も取得可能
* catch節を記載することも可能

# 考察
既に try-with-resources のメリットが広く認識されており、特に問題ないと思います。

著者が間違えたというJava puzzlersのコードは以下の様なものです。

```java
InputStream in = null;
OutputStream out = null;
try {
    in = new FileInputStream(src);
    out = new FileOutputStream(dest);
    byte[] buf = new byte[1024];
    int n;
    while ((n = in.read(buf)) > 0)
        out.write(buf, 0, n);
} finally {
    if (in != null) {
        try {
            in.close();
        } catch (IOException e) {} // クローズエラーに対して出来ることはない
    }
    if (out != null) {
        try {
            out.close();
        } catch (IOException e) {} // クローズエラーに対して出来ることはない
    }
} 
```

何を間違えているか明示されていませんので確実ではないですが、
メインのIO処理で例外が発生せず、クローズで例外が出た場合、
その例外が握りつぶされることが問題なのかと思います。

確かに、try-with-resourcesなしで、これを綺麗に書くのは難しいですね・・・
[Unity]No active UnityEngine.XR.ARSubsystems.XRSessionSubsystem is available というエラーの対処方法[AR Foundation]

# 解決したい問題

Unity2020で新規にARFoundationを使ったプロジェクトを作成したとき、または、Unity2019から2020へバージョンアップしたときなどに、XCodeで実行した時に

```No active UnityEngine.XR.ARSubsystems.XRSessionSubsystem is available```


というエラーが出るときがある。

# 対処方法


Fileメニュー -> Build Settings... でBuild Settingsウィンドウを開いたら、
Player SettingsボタンでPlayer Settingsウィンドウを開き、
XR Plugin Managementの項で、「Initialize XR on Startup」と「ARKit」にチェックを入れる。

![スクリーンショット 2021-05-09 14.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20722/27d80545-5775-f3eb-4bee-590bbbdbc2fc.png)
トラブル事案｜Minecraftのインストールでinvalid driveの表示

![001.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/b42d14e1-4930-51e6-b95d-f6f32ecd6524.png)

* 本稿は次のサイト記事を踏襲するものです

http://www.magicvox.net/archive/2012/07051716/

# 症状
* PCへJAVA版のマイクラ（Minecraft）をインストールしようとしたところ、`invalid drive D:`というエラーが表示され、インストールができませんでした。なお、インストールしようとしたPCはWindows10で、独自にドライブの構成などをイジっていたものです（←たぶんコレが原因）
* いくつかのサイトを参照しながら、結果的に上記のサイト「[アプリケーションの再インストール時に "error1327 invalid drive X:" が発生する](http://www.magicvox.net/archive/2012/07051716/)」の方法で解決に至りました。
* インストーラーのセットアップで、インストール先を選択する画面がありますが、ココでドライブを任意のものへ設定しても解決しませんでした。

![002.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/a0d7099b-5d6d-8be6-b2f5-10ed66cc2925.png)





# 解決策
事前準備）マイクラJAVA版のインストーラーがダウンロード済み
１）Winのcmd（コマンドプロンプト）を起動（`winキー + R`→`cmd`を入力しエンター）
２）cmdに`subst D: C:\`を入力しエンター
３）マイクラをインストール
４）cmdに`subst D: /D`を入力しエンター

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283603/aa0a29cf-100d-185f-8095-8545abd947c9.png)


# 参考サイト

https://www.epicgames.com/help/en-US/epic-games-store-c73/launcher-support-c82/what-do-i-do-if-i-receive-the-error-invalid-drive-when-installing-the-epic-games-launcher-a6564

https://docs.microsoft.com/ja-jp/windows-server/administration/windows-commands/subst

https://www.overclock.net/threads/invalid-drive-d-when-installing-application.1211018/
Ruby/OpenCVでスプラトゥーン2の戦況を可視化する索敵補助ツール作ってみた

# はじめに
本ツールは、 https://qiita.com/Kazuma_Kikuya/items/4767afe581c94b0c16f1 の別実装です
(画像処理をやったことがなかったのですが、元記事には解析に必要な要点がまとめられており、本ツールを作る上で非常に参考になりました。)

元記事はスタンドアローン型でしたが、本ツールはサーバ/クライアント型で構成しています。
サーバ/クライアント型にしたことで、1人が画像解析した結果をwebページ経由で味方全員に提供できるようになりました。


# 概要
switchから取り込んだ画像をPCで解析し、解析結果をwebsocket経由で送信して、webページ上でイベントに合わせてなんらかをする、というツールです。
websocket経由で送信することで、通知の受信が用意になりました。

下記図にある、 `通知受信用WEBアプリ(client)` はheroku上で動いています。

![スクリーンショット 2021-05-09 13.51.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42642/3c6f3398-2918-ff5a-5bd1-e8782fdc48dc.png)


```
switch -> 解析用アプリ:
解析用アプリ-> 解析用アプリ: 画像解析
解析用アプリ-> 解析用アプリ: イベントデータの生成
解析用アプリ -> redis : イベントデータの送信
redis -> 通知受信用WEBアプリ(client): 
通知受信用WEBアプリ(client) -> ブラウザ: 
ブラウザ -> ブラウザ: 音を鳴らす
```

# 機能の説明
本ツールでは、webページを開いているだけで通知を受け取れるので、リグマやっているときの味方にこのURLを共有しておくと味方に情報を伝えることができます。

元記事から機能をだいぶ削っていて、敵復活時点のみ音を出すようにしています。生存時間を表示する機能は実装予定です。

# おわりに
詳細な実装に関することは http://blog.jiikko.com/152 に日記みたいな感じで書いています。

ガチマッチで本ツールを使っている動画をアップロードしました。
https://www.youtube.com/watch?v=QFrYSWYJ3lw

`通知受信用WEBアプリ` のソースコードは公開しています。
https://github.com/splaspla-hacker/splatoon2_enemy_visualizer_frontend
画像解析のソースコードは準備中です。


以上。
Linuxの基本コマンド

linuxのコマンドを学習したのでまとめます。
＜lsコマンド＞
　　ファイルやディレクトリの参照。
　　→ls [オプション][ファイル]
　[オプション]
　　-a 隠しファイルも含めて出力。
　　-l 長形式で出力。
　　-t 最終更新時間によってソートをして出力。
　　-r 逆順のソートをして出力。
　[ファイル]
　　ファイルやディレクトリを指定した場合、指定したデイレクトリ内にあるファイルやディレクトリを表示する。
　　・ワイルドカードを使った絞り込み
　　　* 任意の文字列を示す。（何文字入ってもok）
　　　? 一個につき一文字を示す。（文字数がわかっている場合に使用する）

＜cpコマンド＞
　　ファイルのコピー
　　→cp [オプション][コピー元ファイル][コピー先ファイル]
　　例）　cp a-file b-file aファイルをbファイルへコピーする。
　[オプション]
　　-i 処理の確認。（上書きの確認）
　　-r ディレクトリのコピー。（ディレクトリ内にある全てのディレクトリやファイルもコピーされる）
　　-p コピー元ファイルの情報を保存。（所有者や属性、更新日時など）
　　・コピー先ファイルが存在しないファイルの場合は新たにファイルが作成される。コピー先ファイルが既に存在する場合は上書きされる。

＜mvコマンド＞
　　ファイルの移動
　　→mv [オプション][移動元ファイル][移動先ファイル]
　　例）　mv a-file b-file aファイルをbファイルへ移動する。
　[オプション]
　　-i　実行前に確認。
　　-f　確認なしに強制実行。
　　・移動先のファイルがない場合は移動元のファイル名が変更される。（ディレクトリの場合も同様）

＜rmコマンド＞
　　ファイルの削除
　　→rm　[オプション][ファイル名] 
　　例）rm a-file aファイルを削除
　[オプション]
　　-i 実行前に確認。
　　-f　確認なしに強制実行。
　　-r ディレクトリの削除。（ディレクトリを削除するとディレクトリ内にあるディレクトリやファイルも削除される）
transition　と　transformの関係を理解してみる

``transition``　と　``transform``　の関係性を理解するのに苦労したので
理解の仕方を投稿します。

アニメーションを勉強したとき、
``animation`` ``@keyframes`` そして、``transition``　と　``transform``　の４個の言葉が出てきました


今回は、``transition``　と　``transform``　はどんな役割なのか？を書いていきます

##``transition``　と　``transform``

``transition``　と　``transform``　はセットで覚えた方が良い。
役割としては、『変更前』と『変更後』の中間を補完する役割があります

![transition.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/e1bffacc-87c4-4ce2-3c03-2d57989fb373.png)


###``transition``の種類

``・transition-duration`` 変化が始まって終わるまでの時間を指定
``・transition-property``　変化が適用されるｃｓｓのプロパティを指定
``・transition-timing-function``　変化の度合いを指定
``・transition-delay``　変化が始まる時間を指定
``・transition``　上記４つのプロパティを一括で指定

``transition``で、アニメーション時間、開始前後の時間、アニメーション回数などを決めるプロパティ

###``transform``の種類

``translate()`` 移動
``rotate()`` 回転
``scale()`` 移動
``skew()`` 傾斜
``perspective()`` 遠近感
``transform-origin``変形する基点を設定するプロパティ
``transform-style``2D・3Dの表示を設定するプロパティ
``perspective``遠近感を設定するプロパティ
``perspective-origin``遠近感の基点を設定するプロパティ

``transform``　で、変形を設定する役割を決めるプロパティ

###ボタンをアニメーション

ボタンを``hover``したとき、アニメーションするcodeを書いてみます。

```html
 <button class="button">button</button>
```
```css
.button {
  cursor: pointer;
  outline: none;
  font-size: 30px;
  width: 200px;
  height: 100px;
  background: pink;
  color: white;
  border-radius: 10px/10px;
  box-shadow: 10px 10px 10px #706b6b;

  transition-property: transform, background, box-shadow, color; ※
  transition-duration: 2s;　※
}

.button:hover {
  box-shadow: 3px 3px 3px #8a7070;
  transform: scale(.5);　※
  background: red;　※
  color: #8a7070;　※
}
```
codepenでの記述↓↓↓

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="swan2pink" data-slug-hash="ExWjgwz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExWjgwz">
  <span>See the Pen <a href="https://codepen.io/swan2pink/pen/ExWjgwz">
  ExWjgwz</a> by トモゑ☛Web作成の37🌺 (<a href="https://codepen.io/swan2pink">@swan2pink</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

変更前に``transition``　を設定する
変更後に``transform``　を設定する

##まとめ


``transition``　は変更前に設定する
``transform``　変更後を設定する

紛らわしいプロパティですが、引き続き理解していきたいと思います
今回は以上です
ありがとうございます！！
【M1必見】Docker を使ってデータ解析環境を構築する

## なぜDocker を使うのか
　結論から言うと、PCが汚れるのを防ぐため。HOSTコンピューター（自分が普段使うコンピュータ）に様々なパッケージを入れると、手間がかかるし、アンインストールしてもキャッシュが残ったりして、ストレージが少なくなってしまう。Dockerのコンテナを使い仮想環境を構築して、その中に様々なパッケージをインストールすることで、HOSTコンピュータに負荷をかけることなく、データ解析、分析が可能になる。さらに、インストールしたパッケージ同士がエラーを起こした際に、対応しやすいという利点もある。それに加えて、Dockerfileを共有することで、同じ環境が他の人でもコマンド一つで構築できてしまうという利点もある。

## Dockerfile を作成する
Dockerfileを作成する方法はいくらでもあるが、個人的には、https://code.visualstudio.com/
を使うことをお勧めする

```docker:dockerfile
# ubuntuをベースに docker image を作成する
FROM ubuntu:latest
# メンテナンスなどによく使われるコマンドをインストールする(-yはパッケージをインストールする際に必要なおまじない)
RUN apt-get update && apt-get install -y wget vim sudo
# WORKDIR でインストールする場所を決める
WORKDIR <Anacondaをインストールする場所、推奨は「/opt」>
RUN wget https://repo.continuum.io/archive/Anaconda3-2020.11-Linux-x86_64.sh　<- インストールしたいAnacondaのバージョン
```
Anacondaのバージョンなどについては、
https://repo.anaconda.com/archive/
を参照するといい。ubuntuに対応しているのは、「Anaconda3-2019.10-Linux-x86_64.sh」のように、「Linux-x86」が入っているもの

```docker:dockerfile
# anacondaインストーラーを起動し、anaconda3をインストールする
# -b : バッチファイル的に動かすときに使用する（必須）
# -p path :anacodna3をどこに置くかを指定する（デフォルトでは、root/anacodna3となる。メンテがめんどいので、optの下においた）
RUN sh Anaconda3-2020.11-Linux-x86_64.sh -p /opt/anaconda3 -b

# ENVで環境変数を設定する。以下は"python"のためのパス
ENV PATH /opt/anaconda3/bin:$PATH

# "jypyter", "lab" :jupyterlabをデフォルトで起動させるコマンド。
# "--ip=0.0.0.0" :ローカルでjupyterlabを使うときに必要なコマンド
# "--LabApp.token=''" :本来ならjupyterlabを起動させた際にパスワードを入れる必要があるがこう書くことでそれを防ぐ
CMD ["jupyter", "lab", "--ip=0.0.0.0", "--allow-root", "--LabApp.token=''"]
```

## Dockerfileを用いて、"docker image"を作成する
```terminal:terminal
username@MacBook-Pro ~ % cd <Dockerfileを保存した場所>
# Dockerfileがあるかどうかを確認する
username@MacBook-Pro docker_file % ls
>>> Dockerfile
# "docker build"を使って構築する（" . " はカレントディレクトリを指すので忘れずに）
username@MacBook-Pro docker_file % docker build --platform linux/amd64 .
```
上記と同じコマンドを入力すれば、docker imageを作成できる。

**【重要】M1Macを使用している方は、必ず「--platform linux/amd64」を付けて入力する**

付けないとエラーになる

## ターミナルでDockerfileを起動させる
```terminal:terminal
# "docker iamges" を使い、起動したい "docker image" があるかどうかを確認する
username@MacBook-Pro ~ % docker iamges
>>>
REPOSITORY       TAG           IMAGE ID         CREATED       SIZE
<none>           <none>        dge767nb2v62h    2 days ago    3.66GB

# "docker run" を使い "docker image" を起動させる
# "-p 8888:8888" はポートを設定するためのオプションなので必須。もし以前に8888を使用したことがあるのであれば、任意のもの(-p 1234:8888)を設定する。
username@MacBook-Pro ~ % docker run -p 8888:8888 dge767nb2v62h
```
起動させると勝手にJupyterLabが起動するので、Googleで「localhost:8888」と検索するとJupyterlabに入ることができる。入れることを確認できたら、完了。

## さらにライブラリを追加したいとき
先ほど作成したDockerfileに以下のコマンドと追加したいライブラリを入力すればいい。追記する場所は、CMDの上あたりでいい。

```dockerfile
RUN pip install --upgrade pip
RUN pip install <ライブラリの名前>
```

## 【補足】AWSでdockerを使用する
ここのセクションではAWSにdockerをインストールして、自分のPCにマウントさせることで、自分のPCのメモリなどを使わずデータ分析を行う方法を紹介する。**あらかじめAWSアカウント作成後、AWSインスタンスを作成しておくこと!** 詳しくは、こちら( https://aws.amazon.com/jp/register-flow/)
cloudready　を　linux で準備


linuxで

　unzip cloudready-free-89.3.3-64bit.zip

それから

 **dd if=./cloudready-free-89.3.3-64bit.bin of=/dev/sdb bs=16k**

それから
これを　USBポートにつけるだけで起動しますね
##インスタントラーメンのように手軽い


![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211097/8ea06dc5-9d80-590e-f319-bd52bccccbf7.png)
Goを書くときの個人用メモ

## よく参照する公式ドキュメント

[Package fmt](https://golang.org/pkg/fmt/)
- fmt.Printf()で出力する時に型に応じて、表記方法が違うため確認したり

## pkg ディレクトリについて

外部パッケージなどが置かれているキャッシュ
以下のコマンドで削除できる

```go clean -modcache```

## Testの事前処理

```go:test.go
//テストの事前処理を書く
func TestMain(m *testing.M) {
    println("before all...")

    code := m.Run()

    println("after all...")

    os.Exit(code)
}
```

### 構造体の宣言いろいろ
[Go言語(golang) 構造体の定義と使い方](https://golang.hateblo.jp/entry/golang-how-to-use-struct)

```go:test.go

func TestValidation(t *testing.T) {

	t.Run("テストケース", func(t *testing.T) {
		// structを定義及び代入、スライスにする
		test_case := []struct {
			from    string
			to      string
			expected error
		}{
			{"20200101", "20200102", nil},
			{"20200101", "20191229", errors.New(fmt.Sprintf("date from(%s) is not before than to (%s).", "20200529", "20200601"))},
		}
		for _, v := range test_case {
			actual := Validation(v.from, v.to)
			if actual != v.expected {
				if actual != nil {
                     // error同士だと比較できないので(error).Error()->stringで比較する
					if actual.Error() != v.expected.Error() {
						t.Errorf("There is unexpected result: actual(%s), expected(%s) startdate(%s) endDate(%s)", actual, v.expected, v.from, v.to)
					}
				} else {
					t.Errorf("There is unexpected result: actual(%s), expected(%s) startdate(%s) endDate(%s)", actual, v.expected, v.from, v.to)
				}
			}

		}

	})

}


```

https://zenn.dev/hsaki/books/golang-io-package/viewer/file

```go:index.go
f, err := os.Create("write.txt")
if err != nil {
	fmt.Println("cannot open the file")
}
 defer f.Close()
 defer func(){
	err := f.Close()
	if err != nil {
		fmt.Println(err)
	}
 }

// 以下write処理等を書く
```
PhpStromでリモートのコミットを打ち消したい。

リモートに間違ってパスワードが記載されたファイルをPushしてしまった。

コミット履歴はリモート上に残るが、コミットは無かったことにしたい。

コミットログは「add password」で、こいつを打ち消します。

![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/80f20eab-a613-7c73-11a9-ae2fcd0647ac.jpeg)

ローカルのコミット履歴から、「add password」を選択してRevert Commitを選択
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/14fcca44-a73e-6cc6-2e62-753bb7832bb6.jpeg)

打ち消しのコミットが作成されました。

間違ってパスワードが記載されたファイルもなくなってる。

これでリモートにpushしてあげればOK。
『幸せなら手をたたこう』のアルゴリズム

https://www.uta-net.com/song/6041/

>幸せなら手をたたこう
>幸せなら手をたたこう
>幸せなら態度でしめそうよ
>ほら　みんなで手をたたこう

![tewotatakou.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464218/594cd5ab-1b10-17b1-cd7e-60a062a16aa7.png)


大人になってから童謡を聴くと、新しい発見があっておもしろい。

https://note.com/anpanda_44075/n/n2217fc529646
Laravelのクエリスコープを試してみた


クエリスコープを使用するとクエリの使い回しができます。例えばCMSを構築していてほとんどのクエリに対して公開済みの記事を取得する制約を付けている場合、クエリスコープを使用することで自動的にこの制約を追加することができます。

Laravelのクエリスコープには、「グローバルスコープ」と「ローカルスコープ」の2種類あります。グローバルスコープはEloquentモデルを使用すると自動的に条件が追加され、ローカルスコープはあらかじめクエリを作成しておき条件を追加したいときに呼び出すことで使用できます。

https://readouble.com/laravel/8.x/ja/eloquent.html#query-scopes

## 事前準備

作成した記事の中から``published = 1``の記事を取得する条件をグローバルスコープ・ローカルスコープを用いて使用してみます。その準備として``articles``テーブルに``published``カラムを追加し``published = 1``のレコードを作成しておきます。

|id|use_id|title|slug|body|published|created_at|updated_at|
|:-----------|:------------:|:------------:|:---:|:---:|:---:|:---:|:---:|
1|1|My first article|First article|My first article is edited|0|2021-05-01 00:48:03|2021-05-01 04:02:55|
2|2|Jack's article|Jack's article|This article is made by Jack|1|2021-05-01 00:48:43|2021-05-01 


## ローカルスコープ

``published = 1``の条件をローカルスコープを使用して追加してみます。

### ローカルスコープ定義

モデルにスコープを定義します。命名規約はメソッド名に``scope``を付けることです。

```php:Article.php
public function scopePublished($query)
{
    return $query->where('published', 1);
}
```

### ローカルスコープの利用

定義したスコープ名から``scope``プレフィックスを取り除いたメソッド名で呼び出せます。

```php:ArticlesController.php
public function index()
{
    $articles = Article::published()->with('tags')->get();
    return view('articles.index', ['articles' => $articles]);
}
```

発行されたsqlにはきちんと``"published" = 1``が追加されています。

```
select * from "articles" where "published" = 1
```

## グローバルスコープ

今度はグローバルスコープを用いて条件を追加してみます。

### グローバルスコープの作成

``Illuminate\Database\Eloquent\Scope``インターフェースの``apply``メソッドを実装するクラスを作ります。

```php:PublishedScope.php
<?php

namespace App\Scopes;

use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Scope;

class PublishedScope implements Scope
{
    /**
     * 指定のEloquentクエリビルダにスコープを適用
     *
     * @param  \Illuminate\Database\Eloquent\Builder  $builder
     * @param  \Illuminate\Database\Eloquent\Model  $model
     * @return void
     */
    public function apply(Builder $builder, Model $model)
    {
        $builder->where('published', '=', 1);
    }
}
```

### グローバルスコープの適用

モデルの``booted``メソッドをオーバーライドして``addGlobalScope``メソッドを呼び出します。

```php:Article.php
protected static function booted()
{
    static::addGlobalScope(new PublishedScope);
}
```

ローカルスコープと違い特に何も指定しなくても、``Article`` Eloquent モデルを使用したクエリには``published = 1``が追加されます。

```php:ArticlesController.php
public function index()
{
    $articles = Article::with('tags')->get();
    return view('articles.index', ['articles' => $articles]);
}
```



### グローバルスコープの削除

あるケースではグローバルスコープのクエリを使用したくないということがあると思います。その場合は``withoutGlobalScope``メソッドを使用することでグローバルスコープを削除できます。

```php:ArticlesController.php
use App\Scopes\PublishedScope;

public function index()
{
    $articles = Article::withoutGlobalScope(PublishedScope::class)->with('tags')->get();
    return view('articles.index', ['articles' => $articles]);
}
```
子コンポーネントから親コンポーネントにデータを引き渡す。


コンポーネントの親子関係
-

ある任意のコンポーネントを取り込み利用した場合に、そのコンポーネント自体を子、利用した先は親という関係になります。

>https://noumenon-th.net/programming/2019/02/22/component/

 
#####今回の子コンポーネントの親への受け渡しという事柄についてはその本質は子コンポーネントのタイミングで自由に親コンポーネントのメソッドを発火できるという方がフィットします。そうなってくるとデータを送るというのは付随したものでイベントのみを行うということがメインのテーマとなる。つまり親コンポーネントに仕込んである式を実行するということになる。[親のイベントを発火させるトリガーになる]別の言い方をすれば$emitはカスタムイベントを自由に作れるということになる。

|$emit|第１引数|第2引数|
|--|--|--|
|$emit|渡すデータの名前（emit名）|データの値(自身)|

引き受け側の親の方へ属性を書いて「$event」を記述するとこの＄event自身がデータになる。


```vuejs
<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber v-bind:total-number="number" v-on:my-click = "number = $event">></LikeNumber>
  <LikeNumber v-bind:total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>
```


```vuejs
<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: ["totalNumber"],
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.$emit("my-click", this.totalNumber + 1)
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>
```
![20210509-134014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/ddc7687e-212b-92f2-a564-adc1c73e3e91.png)

メソッドで引き受ける
-

```vuejs:App.vue(親コンポーネント)
<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber v-bind:total-number="number" @my-click = "incrementNumber">></LikeNumber>
  <LikeNumber v-bind:total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader
  },
  methods: {
    incrementNumber(value) {
      this.number = value
    }
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>
```


```vuejs:LikeNumber.vue(子コンポーネント)
<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: ["totalNumber"],
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.$emit("my-click", this.totalNumber + 1)
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>
```

```vuejs:App.vue(L5)
<LikeNumber v-bind:total-number="number" @my-click = "incrementNumber">
```

```vuejs:App.vue(L20)
  methods: {
    incrementNumber(value) {
      this.number = value
    }
```
incrementNumberの引数をvalueとすることによって、LikeNumber（子コンポーネント）の第２引数を指定していることになる。
bottomLayoutGuide 非推奨の修正 ( Objective-C )

# Xcodeの bottomLayoutGuide の警告内容

Xcode ( Objective-C ) で下記の警告が発生しました。

![スクリーンショット 2021-05-09 10.40.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1189425/bb5eb2aa-2d84-46f3-94e6-a043c0735522.png)

![スクリーンショット 2021-05-09 10.39.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1189425/2edc2d18-e1e2-8b3b-264e-34f0bb53cbb0.png)

（ 警告メッセージ原文 ）
'bottomLayoutGuide' is deprecated: first deprecated in iOS 11.0 - Use 
view.safeAreaLayoutGuide.bottomAnchor instead of 
bottomLayoutGuide.topAnchor

どうやら、
bottomLayoutGuide がiOS11.0で非推奨になったようです。
bottomLayoutGuide.topAnchor の代わりに
view.safeAreaLayoutGuide.bottomAnchor を使用してください
との事ですので、
下記の内容の通りに修正しました。


# プログラム修正内容


```perl:&#x20(&#x20Objective-C&#x20)

        /* toItem:self.bottomLayoutGuide ( iOS 11.0 非推奨 ) */ 
        toItem:self.view.safeAreaLayoutGuide.bottomAnchor

```


以上
JSの勉強でタイマーカウントライブラリを作成してみた！

# JSの勉強でタイマーカウントライブラリを作成してみた！

## 概要

今まで何となくで書いていたJS。最近になってようやくモチベーションも少し上がってきたので新しく何かやってみようと思いました。
そこで、初めてライブラリを作成してみようと発起。
とりあえずは簡単なライブラリで挑戦ということで、サンプルとかでありそうなタイマーカウントのライブラリを作成してみました！


## 使い方
今回のはjqueryなしでもいけます。なので基本的にはどの環境でもいけるのではないかと思われます。

### HTML
HTML側ではjsの読み込みと、カウンターの表示用のタグしか記述しておりません。
見た目はまったく装飾していないので、ご自身のサイトで使用する場合はCSSでお好きなように装飾してください。

```index.html
<!DOCTYPE html>
<html>

<head>
  <title>setTimerCount.js</title>
  <script src="./assets/js/setTimerCount.js"></script>
  <script src="./assets/js/index.js"></script>

</head>

<body>
  <div class="contents">
    <div class="inner">
      <div>
        <p id="timer_count_set1"></p>
      </div>
    </div>
  </div>
</body>

</html>
```

### JS

#### setTimerCount.js

これが本体側のJSファイルになります。
ここは基本的にいじる必要はありません。

```setTimerCount.js
let TimerSetCounter = (function () { });

TimerSetCounter.prototype = {
  getDefaultOptions: function (options) {
    let defaultOptions = {};
    if (options) {
      defaultOptions = options;
    } else {
      defaultOptions = {
        max_count: 100,
        count_separate: 1000,
        finish_method: function () {

        },
      };
    }
    return defaultOptions;
  },
  countTimerSet: function (targetEle, options) {
    this.countTimer(targetEle, options);
  },
  countTimer: function (targetEle, options) {
    const option = this.getDefaultOptions(options);
    const target = document.getElementById(targetEle);
    let max_count = option.max_count;
    let timer_id = 0;
    const countDown = () => {
      timer_id = setTimeout(countDown, option.count_separate);
      if (max_count >= 1) {
        max_count--;
      } else {
        this.countFinished(option);
        clearTimeout(timer_id);
      }

      target.textContent = max_count;

      return max_count;
    }
    current_timer = countDown();
    return current_timer;
  },
  countFinished: function (options) {
    const option = this.getDefaultOptions(options);
    if (option.finish_method) {
      option.finish_method();
    }

  }

};
```

#### index.js

これが呼び出し側のJSになります。
オプションをほんの少しだけですが使用できるようにしてありますので、ご利用くださいませ。

```index.js
window.onload = function () {

  const timerSetCounter1 = new TimerSetCounter();
  const options = {
    max_count: 10,
    count_separate: 1000,
    finish_method: function () {
      console.log('終了');
    },
  };
  timerSetCounter1.countTimerSet('timer_count_set1', options);

};
```

```
finish_method: function () {
      console.log('終了');
    },
```

この部分でカウンターが0になったら何か任意で処理ができるようにしてあります。
「finish_method」の中身は今はconsole.logしか書いてありませんが、何かしたい処理を書いてください。
例）Domの操作とか

## 最後に

コードが汚くて申し訳ないです。。
一応動くと思いますので良かったら使ってやってください！
[Python] 動的計画法 ABC200D

#[ABC200D](https://atcoder.jp/contests/abc200/tasks/abc200_d)

動的計画法の実装を工夫すると、時間計算量は$O(MN^2) (M=200)$となる。

dpの定義：

$dp[r][s]=和の余りがrとなる正整数の集合がs$


```python:サンプルコード
M=200
n=int(input())
A=[*map(lambda x:int(x)%M,input().split())]
# dpを 辞書型 { 余り:{正整数} } に初期化
from collections import *
dp = defaultdict(set)
dp[0] = set()
for i in range(M):
  for d in dp.copy():
    dd = dp[d]
    for j in range(n):
      # jがdp[d]にあればパス
      if j in dd: continue
      r = (d+A[j])%M
      s = dd | {j} # ddにjを追加
      # dp[r]がdp[d]ならパス
      if s==dp[r]: continue
      # dp[r]がすでにあれば回答、なければsを登録
      if dp[r]:
        print('Yes')
        B = [i+1 for i in dp[r]]
        C = [i+1 for i in s]
        print(len(B),*B)
        print(len(C),*C)
        exit()
      dp[r]=s
print('No')
```

公式解説では[**鳩ノ巣原理**](http://www.mathlion.jp/article/ar129.html)を前提としたbit全探索が紹介されている。
個人的には、設計は出来たものの、DPなどの実装技術がまったく不足しており、技術力を鍛錬する必要がある。
手を動かして学ぶHTTP入門

何気なく、ブラウザに、https://example.com と入力するとサイトの内容が表示されますが、
どういう仕組みでできているのか、説明するのは意外と難しいものです。

その仕組みを手を動かして体験するのが、この記事の目的です。


## HTTP通信してみる

ブラウザで隠蔽化されているHTTPの仕組みをコマンドラインを使って体験していきます。

telnetコマンドを使って、HTTP通信をしてみます。（※https://のサイトには使えません）
入ってない場合は、`brew install telnet` で入れてください。


まず、ドメイン名 + ポート番号を指定して通信開始します。電話で例えると、相手の電話番号を入力して通話ボタンを押した状態です。

```
telnet www.example.com 80
```

次のような文字が表示されます。相手が受話器を取った状態です。

```
Trying 93.184.216.34...

Connected to www.example.com.
Escape character is '^]'.
```

次のように入力してください。
電話で例えると、用件（`GET`）、日本語で（`HTTP/1.1`）、〇〇さん（`HOST: www.example.com`）という内容を伝えています。

何語で、〇〇さんに、どんな要件があるというのをコンピューター的に書くと次のようになり、これを**リクエストヘッダー**と言います。

```
GET / HTTP/1.1
HOST: www.example.com
```


そして、Enterを2回押すと、次のように表示されます。
電話で例えると、質問に対する回答です。

```
HTTP/1.1 200 OK
Age: 470364
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Sun, 09 May 2021 03:44:33 GMT
Etag: "3147526947+ident"
Expires: Sun, 16 May 2021 03:44:33 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (oxr/8310)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 1256

<!doctype html>
<html>
<head>
    <title>Example Domain</title>
~~ 中略 ~~
</body>
</html>
```

1行目は、
電話で例えると日本語（`HTTP/1.1`）、回答できるよ（`200 ok`) という内容です。

```
HTTP/1.1 200 OK
```

2行目からは、回答した時刻（Date）など、回答の文字数（Content-Length）などが書いてあります。

```
Age: 470364
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Sun, 09 May 2021 03:44:33 GMT
Etag: "3147526947+ident"
Expires: Sun, 16 May 2021 03:44:33 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (oxr/8310)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 1256
```

1行改行して、回答内容（HTML）が書いてあります。

```
<!doctype html>
<html>
<head>
    <title>Example Domain</title>
~~ 中略 ~~
</body>
</html>
```


## ブラウザのリクエストヘッダーを見る

次に、ブラウザが送信しているリクエストヘッダーを見てみる（GoogleChromeでは、開発者ツール > Network）と、`telnet`で送信したリクエストヘッダー以外にも多くの情報を送信していることが分かります。

例えば、`User-Agent`を使って、PCかモバイルを検出して別の情報を返すこともできます。

![スクリーンショット 2021-05-09 13.43.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142797/0325c1bf-a85d-91ee-89e8-0b15078a4ee9.png)


## まとめ

Webブラウザ（電話をかける人）と、Webサーバー（電話を受ける人）は、このような、取り決めに従って通信しています。この取り決めを HTTP（Hyper Text Transfer Protocol）と言います。
typeCの仕組みについて調べてみる

## 勉強前イメージ

表裏関係なく使えるけど、
表裏関係あるmicro-Bから比べればピンの数が半分になる感じするけど、
なんで表裏関係なく使えるんだろう

## 調査

### まずUSB typeCについて

macやスマホ、最新のiphoneにも採用されている以下のようなケーブルである
裏表関係なく接続できるようになりました。

![tanshi_usb_typec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/1c6fa4ca-2646-fffb-afa4-8852ad9713e8.png)

### micro-Bと比較でピン数の比較

- micro-Bのピン数

以下の画像にあるように、5ピンです。

![1# typeCの仕組みについて調べてみる - diagrams.net - Google Chrom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/0696a54d-88ea-78e8-f5d0-8df196f527b3.png)


- USB typeCのピン数

以下の画像のように片側12ピン、両面合わせて24ピンです。

![2# typeCの仕組みについて調べてみる - diagrams.net - Google Chrom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/b6bb1a01-eb81-4859-b3c6-fe42cf674151.png)


### 表裏関係なく使える理由

表裏使える理由としては、どちらの面を使用してもピンの配列が変わらないからです。
詳細なピンの情報は以下になりますが、どちらの面でもピンが流す情報は変わりません。

![3USB超入門(3)USB Type-Cとは？[RATOC] - Google Chrome 2021.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/ec9276d3-23b7-af5b-95d6-1facc9362a3a.png)

[画像はこちらから](https://www.ratocsystems.com/products/feature/usb31/03.html)

## 勉強後イメージ

あんまり物理的な詳しいことはわかってないけど、
micro-B → typeC になってもピン数は多くなってるし、
typeCのどちらの面でさしても同じものを流すから両面使えるってことはわかった。

## 参考

- [USB Type-C とは？](https://www.ratocsystems.com/products/feature/usb31/03.html)
- [USBコネクタの形状と種類。TypeA/B/C、Mini/Micro 規格の解説と一覧](https://uzurea.net/usb-type-complate-list/)
RealtimeDatabase読み込み・書き込みメソッド

Firestoreでは、小さいデータを頻繁に読み書きする用途にコスト的に向いておらず、~~googleが推奨していない方の~~RealtimeDatabaseを使用することになったため、読み書きメソッドについて記録する。

## 共通知識
* Jsonツリーのデータベース構造になっている。
* 常に対象パスのサブツリーにもアクセス(R/W)する。

## 読み込み

### onメソッド
* 第一引数にvalueを設定すると、データベースが追加される度に差分の読み込みを実行する。
* 更新が発生した場合は、オブジェクト全体の再取得が実行される。
* スナップショットにはキー名やバリュー等が格納される。
* データが無くなった場合はnullを返す。

#### childイベント(第一引数)

* child_added：子要素が追加に対してリッスンする。更新に対しては同期しない。<br/>
 スナップショットには、新しい子を含むデータが渡される。
* child_changed：子要素の変更に対してリッスンする。<br/>
子ノードの子孫に対する変更もリッスン対象となる。<br/>
 スナップショットには、更新された子を含むデータが渡される。
* child_removed：子要素の削除に対してリッスンする。<br/>
直接の子のみがリッスン対象となる。<br/>
 スナップショットには、更新された子を含むデータが渡される。
* child_moved：項目順変更に対して同期を行う。<br/>原因となった child_changed イベントに後続する。


#### 参考
本記事は本家のYOUTUBEチャンネルを参考に作成しています。

https://www.youtube.com/channel/UCP4bf6IHJJQehibu6ai__cg


### getメソッド
* 一度だけ読み込みを行う。
* 変更イベントの監視なし
* データベースサーバーからデータを取得する。
* なんらかの理由で値を返せない場合は、クライアントがローカルキャッシュを調べ、それでも値が見つからなければエラーを返す。
* 必要以上に使用すると、帯域幅の使用が増加し、パフォーマンスの低下する場合があるが、リアルタイム リスナーを使用することで回避することが可能。



### onceメソッド
* 一度だけ読み込みを行う。
* 変更イベントのイベント監視あり
* 更新された値の確認は行わない。
* ローカルキャッシュからデータを取得できる。
* 頻繁な変更やアクティブなリッスンを行うことは想定していないデータ読み込みに対して有効。


## 書き込み
### 共通事項
* 共通の内容として、nullを指定すると削除することができる。
* 第二引数にerrorが格納され、成功・失敗を判定することができる。

### setメソッド
* 特定の参照に保存できる。
* 指定パスにある既存のデータが置換される。
* 子ノードも置換されるため、階層化されたパスの場合は指定パス以下全てデータを書き込むデータを与える必要がある。つまり誤ってルートパスのみに書き込んだらツリーの内容が全て消える。


### pushメソッド
* リストへのデータ追加用メソッド。
* push() によって生成されアイテムは自動的に時系列で並べ替えられる。
* 追加した要素の子ノードに一意の ID が生成される。
* 第二引数にerrorを返す。

### updataメソッド
* 指定パスを更新できる。
* 置換ではないため、親要素をupdateしても子ノードは消えない。
* 原子性が保証され、すべての更新が成功するか、すべての更新が失敗するかのどちらかとなる。

### transactionメソッド
* 同時変更によって破損する可能性があるデータを操作する場合に使用する。
* 書き込みはupdateが実行される。

## 削除
### removeメソッド
* 特記事項なし
* 書き込みメソッドでも代替できる。

## 参考
FireBase本家

https://firebase.google.com/docs/database/web/read-and-write
propsをオブジェクトで指定する


```vuejs
<template>
<div>
  <LikeHeader></LikeHeader>
  <h2>{{ number }}</h2>
  <LikeNumber></LikeNumber>
  <LikeNumber :total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader: LikeHeader
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>
```

```vuejs
<template>
<div>
  <p>いいね({{ halfNumber }})</p>
  <button @click="increment">+1</button>
</div>
</template>

<script>
export default {
  props: {
    totalNumber: {
      type: Number,
      default: 10
    }
  },
  computed: {
    halfNumber() {
      return this.totalNumber / 2;
    }
  },
  methods: {
    increment(){
      this.number += 1;
      }
    }
};
</script>

<style scoped>
  div{
    border:1px solid red;
  }
</style>
```

```
  props: {
    totalNumber: {
      type: Number, /型の指定/
      default: 10   /うまくいいかない場合に取る値を設定/
    }
```

![20210509-130435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/6ee425b0-975a-9aa6-f08f-6bef5a4b7b75.png)


今回は<LikeNumber></LikeNumber>にtotalNumberの属性指定がないのでdefault値１０が使用されている。

あとこれ以外に
required: trueもよく使われてこれについては親要素に属性を絶対指定しないといけなくなる。
＊defailtとは共存できない。
＊typeというのはバリデーションと呼ばれ意図しないエラーが怒らないように抑制をかけている
初心者Webエンジニア備忘録

#Qiitaはじめました
こんにちは。
グチコと申します。
自分のインプットした情報をアウトプットし、身に付けるためにQiitaを始めました。
勉強した内容をアウトプットの場としてブログのような形で発信していきたいと思います！




#自己紹介
2021年4月からWeb言語の勉強を始めました。
文系の大学卒でITとは関係ない仕事をしておりましたが、
Webエンジニアに興味を持ち独学で勉強を始めました。
現在、24歳で販売業からWebエンジニアを目指し独学で勉強中です。
###趣味
- セルフでジェルネイルをすること
- NETFLIX・youtubeを見ること
- おいしいものを食べること

###性格
- 最後まであきらめずやり抜く
- 相手を理解しようとする
- 誰かのためにという強い気持ちを持っている

自己紹介は以上になります♪
仕事終わりや、休日に勉強する時間を設け少しずつ進めています。
わからないことも多いですが、自分のスキルアップのためにコツコツ頑張ります！



#現在学んでいること
- HTML
- CSS
- Java

#学んでいるツール
- Progate
- udemy

2のサイトを活用し、3言語を学んでいます。
#これからやっていくこと
学んだ言語を基にホームページを作っていきたいと思います。
経過をQiitaに更新していこうと思います。

#最後に
はじめての投稿は以上で終わります。
これから勉強を進めて、スキルアップに努めていきます！
不定期の更新になりますが、よろしくお願いします。
YouCompleteMe+ROS

## YouCompleteMeを使ってROSの補完をする

YouCompleteMeはコード補完のためのVimプラグイン。インストールなどに関してはここでは省きますが自分は[こちら](https://qiita.com/TsutomuNakamura/items/2fc8aa6c0feaf31c86e4)を参考にさせていただきました。
ROSの補完どうすんだっけなというメモのために記事書いておこうと思います。

## 環境
- ubuntu 18.04
- ROS Melodic

## ROSの補完
### .ycm_extra_conf.pyの設定
自分はここから拝借しました。
https://github.com/kgreenek/vim-ros-ycm
ここのycm_extra_conf.pyのパスをvimrcに通しておくことで読まれます。
(自分はホームの.vimフォルダ以下にconfigディレクトリ作ってそこに置いてます)

```
let g:ycm_global_ycm_extra_conf = '$HOME/.vim/config/.ycm_extra_conf.py'
```

### compile_commands.jsonの用意
実際に補完させるためにcompile_commands.jsonを用意します。ROSのワークスペースを作成し、以下オプションつけてビルドします。

```
catkin config --install -DCMAKE_EXPORT_COMPILE_COMMANDS=ON -DCMAKE_BUILD_TYPE=RelWithDebInfo  
catkin build
```

そうするとワークスペース/build/ROSパッケージ以下にcompile_commands.jsonが生成されます。これを該当のROSパッケージのディレクトリに置きます(自分はシンボリックリンクを貼ってますがこれ毎回やんないといけないのかな…)。
これでおそらく補完ができるようになると思います。実際にROSパッケージのディレクトリを開いてvimでコードを開いてみます。


![Screenshot from 2021-05-09 12-48-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60952/2b41e3f3-4d00-b886-2e19-82b77bf1905c.png)
【Vue.js】v-ifとv-showを使いこなそう

#はじめに
v-ifとv-showの違いと使い分けについて学習したので、
その内容を自分の備忘録もかねて整理して記事にします。

#v-ifとv-showについて
v-if,v-showについてそれぞれ簡単に説明します。

どちらも特定の要素を条件に応じて描画したい場合に使用され、
ディレクティブの式が真を返す場合のみに描画されます。

※ディレクティブ
　Vue.jsでは、標準のHTMLに対して独自の属性を追加することで、
　属性値の式に変化に応じてDOM操作を行います。
　この特別な属性のことをディレクティブと呼び、
　属性名にはデフォルトで「v-」という接頭辞がつきます。

#v-ifとv-showの違い
さて、ここから本題です。
これらの違いは大きく分けて2つあります。

1. v-ifは要素の描画コントロールをJavaScriptで行うが、
   v-showはJavaScriptでなく、cssのdisplayプロパティで行う
2. v-ifはv-elseやv-else-ifのような分岐処理を使用することができるが、
   v-showはできない

#v-ifとv-showの使い分け
では、前述の違いを踏まえてこれらをどう使い分けていくか。
違い②で説明したようにv-showは複数の分岐処理は使えないので、
そのような実装をしたい場合はv-if一択でしょう。

ここでは違い①に焦点を当てます。

要素の描画コントロールについて、
v-ifはJavaScriptで式の結果に応じてDOM要素を追加または削除するのに対して、
v-showはスタイルの操作、つまりdisplayプロパティの値を変更することで実現します。

一般的にスタイルの操作よりもDOM操作の方がレンダリングコストが高く、
この観点から「切り替えの頻度が高い場合」はv-showの使用が推奨されます。

#参考資料
・Vue.js公式ドキュメント
　https://jp.vuejs.org/v2/guide/conditional.html
・書籍「Vue.js入門 基礎から実践アプリケーション開発まで」
・書籍「たった1日で基本が身に付く！ Vue.js 超入門」
プログラミング初心者に最初に学習させるべき言語

初投稿です。プログラミング初心者が最初に学ぶべき言語は何？って100人のプログラマーに聞いたら20以上の言語が返ってくると思います。そんな答えの無い論争に終止符を打ちます。
#結論
processing
 https://processing.org/
#processing is 何
processing、聞きなれない言語だと思います。簡単に言うと、クリエイティブコーディングを掲げたAltJavaです。processingで書かれたコードはjavaに埋め込まれて動きます。

公式サイトからダウンロードしてインストールするだけで環境構築終わり。エディタとセットになっているのでエディタを起動したらもうコーディングできます。
<img width="400" alt="画像" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428335/235ddd03-f6fd-31b5-503c-ab34e0b6617e.png">


##クリエイティブコーディングとは
「楽に、楽しく書こう」という概念です。一行のコードでウィンドウを作ったり、図形を書いたりできます。コード例を挙げるのでクリエイティブコーディングがどんなものか感じ取ってください。これをそのままprocessingにコピペすれば動きます。

400×400のウィンドウを出す。

```
size(400,400);
```
画面の中心に半径50の円を描画する。

```
size(400,300);
ellipse(height/2,width/2,100,100);
```

右に移動する円を描画する。

```
void setup(){
  //最初に一度だけ実行
  size(400, 400);
}
void draw() {
  //描画のたびに実行
  background(0,0,0);//背景を塗りつぶす
  ellipse(frameCount, width/2, 100, 100);
}

```
正直プログラミング既修者からしたらいろいろ突っ込みたくなるような仕様だと思います。それもこれもjavaのコードに埋め込んでいる＝"実質マクロ"だから起こることですが、書く量を極限まで減らしているのは事実です。
#そもそも初心者向け言語に必要な条件とは
結論から話したので、今度は理由を話します。独断と偏見が多分に含まれているので異論は認めます。以下のような条件が、初心者が最初に学ぶべきプログラミング言語の条件だと思います。
###環境構築が簡単
プログラミング初心者は9割パソコン初心者なので、パスを通すとかコマンドプロントを操作するとか、あるいは複数のソフトを正しくインストールするとか、そういうことはできません。そこが難しくて萎えてしまうと、どの言語が～とか以前の問題です。
###楽しい
HelloWorldとコンソールに表示できても、殆どの人は「だから何？」っていう感じだと思います。初心者でパソコンが自分の命令の通りに動くことに快感を覚える人は異常です。
そこで、図形を表示したりアニメーションを作ったりすると、楽しいと感じてくれる可能性が高いのです。
###おまじないが少ない
書く量が多いと、タイピング速度が遅いのでストレスが溜まるし、覚えることも多いので、萎える確率が上がる。出来るだけ書く量が少ない方がいい。
if式やfor inがあると、三項演算子やfor(;;)などを使わなくて済むのでそういうのも重要。
###乗り換えやすい
そもそもプログラミング言語は何をしたいかによって選ぶものなので、乗換前提で考えるべき。Cベースの記法がベター。
###情報量
ググって解決しないのは萎える原因になる。
###エラーチェック
基本的にはコンパイラが全部エラーを教えてくれるのが理想。そう考えると静的型付け言語の方が良い。
#これらを満たす言語とは
表にしました

|     |情報量|言語仕様|環境構築|楽しさ|総合点|
|----------|---|----|----|---|---|
|Processing|〇  |△   |〇   |〇  |3.5|
|P5.js     |〇  |△   |〇   |〇  |3.5|
|TypeScript|〇  |〇   |△   |△  |3  |
|JavaScript|〇  |△   |〇   |△  |3  |
|C++       |〇  |〇   |△   |△  |3  |
|Kotlin    |△  |〇   |×   |〇  |2.5|
|C#        |△  |△   |△   |△ |2 |
|Python    |〇  |×   |×   |△  |1.5|
|Java      |〇  |×   |×   |△  |1.5|
|Rust      |×  |〇   |×   |×  |1  |

言語仕様は、おまじない、直感的な記法、コンパイラチェック、乗り換えやすさを総合的に考慮して採点。
楽しさは、初心者が楽しく学習できる環境があるかどうかで採点。Kotlinが〇なのはOPENrndr、C++が△なのはDXlibraryというライブラリの存在を考慮してのこと。
P5.jsっていうのは聞きなれない言語かもしれないけど、JavaScript版Processingだと思ってくれれば良い。
というわけでProcessingかP5.jsが優勝候補なんだけど、どっちにも弱点がある。共通の弱点として、埋め込みで動いているので、外側がブラックボックスになっている。
Processingは中身がJavaなので直感的で便利な記法が全くと言って良いほど使えない。一方でP5.jsは中身がJSなので動的型付けである。
自分は動的型付けが大嫌いなので僅差でProcessingの優勝。
#こんなクソみたいな言語使ってられるか！！！
その通り。あくまでも初心者が最初に学ぶべき言語としては良いけれど、ある程度プログラミングのことが分かっている人にとってはクソ言語である。
だからこそある程度プログラミングのことが分かってきたら他の言語に乗り換えてほしい。乗り換え先は何をしたいかによって選ぶことになるけれど、おすすめの言語を挙げておく。
###Rust
+最速
+パソコンの低レイヤにも触れる
-情報量とライブラリが少ない
###C# 
+Unityが使える
+クロスプラットフォーム開発が超簡単
+CやC++のライブラリが使用可能
-欲しい情報が古い情報に埋もれてる
###Kotlin
+最高に書きやすい
+Javaのライブラリが使用可能
+OPENrndr(Processingより高機能なクリエイティブコーディングライブラリ)
###Typescript
+ブラウザで動く
###Python
+最高の資産(機械学習など)
---最低最悪の言語仕様

#終わり
初心者には乗換前提でProcessingをお勧めしてください。
「大数の法則」シミュレーション

東京大学出版会から出版されている「[統計学入門(基礎統計学Ⅰ)](https://www.amazon.co.jp/%E7%B5%B1%E8%A8%88%E5%AD%A6%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E7%B5%B1%E8%A8%88%E5%AD%A6%E2%85%A0-%E6%9D%B1%E4%BA%AC%E5%A4%A7%E5%AD%A6%E6%95%99%E9%A4%8A%E5%AD%A6%E9%83%A8%E7%B5%B1%E8%A8%88%E5%AD%A6%E6%95%99%E5%AE%A4/dp/4130420658)」で解説されている「大数の法則」について、コンピューター・シミュレーションしている結果が掲載されています。どのようなシミュレーションをしたのか自分でも試してみたので結果を記載しておきます。

### ■ Pythonサンプルコード
```
# 統計学入門(東京大学出版会)の「大数の法則」シミュレーション
# [0,1)の乱数を発生させ、0.4未満なら成功(1)、0.4以上なら失敗(0)とする。
# (ベルヌーイ試行)
# 試行回数が増えた時に0.4に確率収束するかシミュレーションする。
import numpy as np

n = 20000
x, y , r = np.array([]), np.array([]), np.array([])

for i in range(n):
    r = np.append(r, (1 if np.random.rand(1)<0.4 else 0))
    if i%100 == 0:
        x = np.append(x, i)
        y = np.append(y, r.mean())

fig, ax = plt.subplots()
ax.set_title('Law of large numbers - Simulation', fontsize = 14)
ax.set_xlabel('Number of trials')
ax.set_ylabel('Probability')
ax.set_ylim(0.35, 0.45)
ax.grid()
plt.plot(x, y)
plt.show()
```
### ■ 結果
#### ＜１回目＞
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693077/987d4924-2eb9-f20a-4e41-4a10dcdb6ff3.png)
#### ＜２回目＞
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693077/e1ace6da-a4f9-c219-f70a-a5fcb7164123.png)
#### ＜３回目＞
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693077/66e091cc-39c7-7081-1664-a54315cbe1cc.png)
#### ＜４回目＞
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693077/a493dc47-8e1d-df71-134c-6f1fe8d879a4.png)

### ■ まとめ
1回目～3回目は試行回数が増加するにつれて、確かに収束しているのが見て取れます。
4回目は、まだ収束には至っていないようですが、この法則は試行回数を増やすと観測された値が理論上の期待値近傍に近づく「確率が高くなる」という意味なのでそのようになっていないケースということですね。それが「確率収束」の意味するところだと理解しました。
GoogleColaboratoryでDrive内のファイル・モジュールのインポートがなぜかできないときの対処法

GoogleColaboratoryで機械学習の勉強をしているときに、
**「さっきまで読み込めていたはずなのに、、、Drive内の他のファイルに記述しているモジュールが急に読み込めなくなった・・・」**
そんなテンションだだ萎えの状況に陥ることがしばしばありました。

原因・理由は分からないのですが、解決方法は見つけたので簡単に記入しておきます。

メニューバーのランタイムより、**『ランタイムを出荷時設定にリセット』**を押して下さい。
![スクリーンショット (136)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108046/df3a3924-062b-9b2f-2f4c-83f03a701975.jpeg)
以上で解決しました。
ランタイムをリセットしない限り、変数の設定とか、読み込んだものとか諸々が残ってしまっていて、モジュールを読み込むときにそれがなんか悪さをするのかな～と勝手に想像しています。
合っているかは分かりませんが。。。

他、何か重要な設定をしている場合、それも消えてしまう可能性はあるのでそちらはご注意ください。
【Go】構造体のスライスからCSV生成

# はじめに
GoでCSVの生成をしたいときに縛りが緩い汎用的な処理が欲しかったので、構造体のスライスを突っ込めば良いだけの処理を作成しました。
#成果物
```golang:file.go
package file

import (
	"encoding/csv"
	"fmt"
	"os"
	"reflect"
	"strconv"
)

func GenerateCSV(i interface{}, fileName string) {
	reflectType := reflect.TypeOf(i)
	reflectTypeElem := reflectType.Elem()

	if reflectType.Kind() != reflect.Slice || reflectTypeElem.Kind() != reflect.Struct {
		fmt.Println("構造体のスライスのみ使えます")
		return
	}

	name := fmt.Sprintf("/tmp/%s.csv", fileName)
	f, err := os.Create(name)
	if err != nil {
		panic(err)
	}
	defer f.Close()

	writer := csv.NewWriter(f)
	writer.Write(buildHeader(reflectTypeElem))

	reflectValue := reflect.Indirect(reflect.ValueOf(i))
	for index := 0; index < reflectValue.Len(); index++ {
		record := reflectValue.Index(index)
		writer.Write(buildBody(record))
	}
	writer.Flush()

	fmt.Printf("CSVが生成されました。 %s\n", name)
}

func buildHeader(rt reflect.Type) []string {
	header := []string{}
	for i := 0; i < rt.NumField(); i++ {
		rs := rt.Field(i)
		header = append(header, rs.Tag.Get("json"))
	}
	return header
}

func buildBody(rv reflect.Value) []string {
	body := []string{}
	for i := 0; i < rv.Type().NumField(); i++ {
		v := rv.Field(i)

		switch v.Kind() {
		case reflect.Int:
			body = append(body, strconv.FormatInt(v.Int(), 10))
		case reflect.String:
			body = append(body, v.String())
		default:
			body = append(body, "") // 例外でもOK。お好みで。
		}
	}
	return body
}
```

#使用例
```golang:main.go
type Hoge struct {
	ID   int    `json:"id"`
	Name string `json:"name"`
}
type HogeList []Hoge

func test() {
	hoges := HogeList{
		Hoge{
			ID:   1,
			Name: "name1",
		},
		Hoge{
			ID:   2,
			Name: "name2",
		},
	}

	fileName := "hoge"
	file.GenerateCSV(hoges, fileName)
}
```

#実行結果
```csv:hoge.csv
id,name
1,name1
2,name2
```

#感想
理想はGenerateCSVの引数型をinterfaceではなく縛ることで確認処理を辞めたかったのですが、気軽に使えることを優先してこのような形に落ち着きました。

reflect周りがもう少しスッキリできるかも？と思いつつ今回は一旦ここまでにしようかと思います。

#参考
https://qiita.com/suin/items/bb9d817af5ccedb18be9
Macでデュアルディスプレイの際にカーソルの移動が面倒



![スクリーンショット 2021-05-09 12.01.57.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550742/d0c58f17-2153-3e47-d0ae-4f8bacd43111.jpeg)

## 問題

Macでデュアルディスプレイで作業している際，カーソルの移動をトラックパッドやマウスで行うの面倒

## 解決

https://apps.apple.com/jp/app/screenjump/id631940883?mt=12
をインストールすると，

```
fn + control
```
で移動してくれる．
railsテスト入門

# この記事の目的

railsでテストを書き始める際にそもそもテストってなんなのかからわかるようにする

# そもそもテストとは？

「Rails チュートリアル　【初心者向け】　テストを10分でおさらいしよう！」
https://qiita.com/duka/items/2d724ea2226984cb544f

ちゃんとコードが動いているのかチェックするもの。下記に分けれる。

- 単体テスト
- 機能テスト
- 統合テスト

# railsでのテストの流れ

- testディレクトリにテストを記述
- `rails test`コマンドでテスト

## 例

```ruby:test/models/article_test.rb
require 'test_helper'

class ArticleTest < ActiveSupport::TestCase
test "the truth" do
  assert true
end
end
```

- test_helperは全testに共通する処理で基本全てのtestに記述する
- testはtest+"内容"で定義する。
- assertはtestする内容を定義して結果を返す処理

## assertの種類

「利用可能なアサーション」
https://railsguides.jp/testing.html#%E5%88%A9%E7%94%A8%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%A2%E3%82%B5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3
VContainer入門

# VContainerとは
[VContainer](https://github.com/hadashiA/VContainer)はUnity用のDIコンテナです。
同様のライブラリとしては[Zenject](https://github.com/modesttree/Zenject)が有名ですがVContainerはよりシンプルなAPIでわかりやすく使い始められます。


# 環境
記事中のソースコードは以下の環境で試しています。

- Unity2020.3.0f1
- VContainer 1.8.6




# 目次

__[VContainer入門(1) - IContainerBuilderとIObjectResolver](https://qiita.com/sakano/items/3a009019e279024fda19)__
VContainerの基本要素となる`IContainerBuilder`と`IObjectResolver`について説明しています。


__[VContainer入門(2) - LifetimeScope](https://qiita.com/sakano/items/e38306a8204c531a40c1)__
VcontainerをUnityで使うときに便利な`LifetimeScope`について説明しています。
(1)と(2)を読めばVContainerをなんとなく使えるようになります。


__[VContainer入門(3) - 基本的なRegister](https://qiita.com/sakano/items/74891c424243c410ad02)__
__[VContainer入門(4) - MonoBehaviourのRegister](https://qiita.com/sakano/items/7951049b18b8a4a0e3dd)__
VContainerの様々なRegister関連のメソッドを紹介してます。

__[VContainer入門(5) - EntryPoint](https://qiita.com/sakano/items/872a9e4cdf14be0f0c61)__
MonoBehaviourへの依存が減らせるEntryPointについて紹介しています。

__[VContainer入門(6) - LifetimeScopeの親子関係](https://qiita.com/sakano/items/fbb63867750ec6ac6d0f)__
LifetimeScopeに階層構造を持たせる方法を紹介しています。

残りはこれから書く予定
__VContainer入門(7) - Inject__
__VContainer入門(8) - コード生成__
__VContainer入門(0) - UnityでのDIコンテナ__




# 宣伝
株式会社SynamonではVContainerを使いながらVRアプリを開発しています。
エンジニアも募集しているので興味がある方はご応募ください。
[株式会社Synamon](https://synamon.jp/)
Maps SDK for Android でダークテーマ

Maps SDK for Android でダークテーマにするにはどうすればいいのか。

```googleMap.setMapColorScheme(MapColorScheme.DARK)```

以上！

なお、`MapColorScheme.LIGHT` なら通常の色、`MapColorScheme.FOLLOW_SYSTEM` ならシステム設定に従います。

2024年6月25日からこれが使えるようになりました。

https://developers.google.com/android/guides/releases?hl=ja#june_25_2024

ChatGPT先生に聞いても古い情報を教えてくるので注意しましょう！

---

以下、「Maps SDK for Android でダークテーマ（のようなもの）」と題していた古い情報です。

# はじめに

Maps SDK for Android でダークテーマにするにはどうすればいいのか。

**オプションで darkMode みたいなものが無いのか** 探したけど見つかりませんでした。

公式ドキュメントの中も、Qiitaの中も探したけれど見つからないのに、

探すのをやめたとき、見つかることもよくある話で、 **スタイル設定** でできることに気づきました。

# やりかた

公式ドキュメントを読んでね。

https://developers.google.com/maps/documentation/android-sdk/styling?hl=ja

# やりかた（ベータ版）

「Maps SDK for Android v.3.1.0 **ベータ版**」 では、「クラウドベースの地図のスタイル機能」が使えるようです。

https://developers.google.com/maps/documentation/android-sdk/cloud-based-map-styling?hl=ja

アプリのアップデートよりも短期間に地図のスタイルを変える場合に有効ですが、そんなケースがあるんでしょうか・・・。ベータ版だし、あまり積極的に使いたくない感じです。

# スタイル詳細

ダークモード相当のJSONスタイルは2つ見つけられました。

１つ目は、公式ドキュメントの中にあるサンプルのリソースです。

![from_document.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104360/b5e4c1a8-226b-3b26-dd9e-f7989bbdf01f.png)

駅が真っ暗で「駅っぽさ」が無くなってしまいます。


２つ目は、公式ドキュメントからリンクがある Maps Platform Styling Wizard で作ったスタイルです。

![from_wizard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104360/f7890077-5988-2ebb-217a-d7fc91db739f.png)


駅はそのままですが、比較してみると「中央線」の文字が見やすくなっています。（個人の感想です）


一方、Google謹製のMapアプリを見てみましょう

![maps.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104360/eec903e7-09fe-3706-239a-eca9a0c14067.png)

圧倒的に見やすいですね！
駅もちゃんとしているし、謎に悪目立ちしてたオレンジの文字もいい感じになってます。

これを参考にJSONスタイルをぽちぽち作っていけば、オリジナルアプリでも同じ表示にできるんでしょうか。しかし、膨大なオプションが存在し、やってられません。

![2021-05-09 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104360/41afdeb3-dfdd-a999-f839-622221220ed0.png)


# まとめ

- Maps SDK for Android に、darkMode みたいなオプションは無いが、スタイルを当てることでダークモードが可能
- サンプルのダークモードスタイルはちょっと微妙
- 自力でスタイルJSONを作るのは非現実的
- 視認性の高いダークモードスタイルJSON、どっかにありませんか？
各変数と定数の基本

#ローカル変数
##記述例
```ruby
def hoge
  foobar = 1  #ローカル変数の宣言
end          #定義の終わり
```
##実行範囲（スコープ）
宣言した位置から定義の終わりまで。
ブロックが手続きオブジェクト化された場合はオブジェクトが消滅するまで。
##寿命
ブロックの終わりまで。
##代入
宣言された同メソッド内で代入可
##参照
宣言された同メソッド内で参照可能


#インスタンス変数
##記述例
```ruby
class hoge
  def initialize
    @foobar = 1   #インスタンス変数の宣言
  end
end
```
##実行範囲（スコープ）
特定のオブジェクトに所属（インスタンスに対して1つ）
##寿命
インスタンスが生成されて削除されるまで。
##代入
所属オブジェクト外からは、attr_accessor、attr_writerで代入可能

##参照
初期化前の返り値はnil
クラス、サブクラスのメソッドから参照可
attr_accessor、attr_readerで所属オブジェクト外から参照可能


#クラス変数
##記述例
```ruby
class hoge
  @@foo = 1          # クラス変数の宣言
  def bar
    puts @@foo　    　# => 1
  end
end

p @@foo                # NameError
p hoge.bar            # => 1

class hoge2
  p @@foo            # NameError
end

class hoge2 < hoge
  p @@foo            # => 1
end
```
##実行範囲（スコープ）
宣言場所の最も内側のクラス、モジュールのボディまで。（クラスに対して1つ）

##寿命
プログラムの開始から終了まで。

##代入
再代入可能
クラスの特異メソッド、インスタンスメソッドから代入可能
継承クラス(サブクラス)、インスタンスメソッドから代入可能


##参照
クラス外から直接参照は不可
クラスの特異メソッド、インスタンスメソッドから参照可能
継承クラス（サブクラス）、インスタンスメソッド（クラス内のメソッド）から参照可能


#グローバル変数
##記述例
```ruby
$foobar
```
##実行範囲（スコープ）
全てのプロジェクト

##寿命
アプリケーションの開始から終了まで。

##代入
変数名が重複すると値が書き変わる
宣言の必要はない
##参照
プログラムのどこからでも参照可能
初期化前の返り値はnil

#組み込み変数

##実行範囲（スコープ）
文法解析上はグローバル変数として扱われる。ただし、実際のスコープは必ずしもグローバルと同じ扱いとは限らない

#擬似変数
##記述例
```ruby
self
nil
true
false
_FILE_
_LINE_
_ENCODING_
```
##代入
擬似変数の値を変更することは出来ない。

#定数
##記述例
```ruby
FOOBAR
```
##実行範囲（スコープ）
クラス定義の外で定義された定数はObjectに所属
クラス定義はクラスオブジェクトの生成を行う
クラス定義は名前がクラス名である定数にクラスオブジェクトを代入する
クラス名を参照することは、定数を参照している

##寿命

##代入
定数の定義と初期化は代入よって行われる
メソッドの中で定義は出来ない
定義済みの定数に再代入を行うと警告が出る
定義されていない定数にアクセスすると例外が発生する
##参照
定数が定義されたクラス、モジュール定義の中、継承クラス、モジュールをインクルードしているクラス、モジュールから参照可能
クラスorモジュールで定義された定数を外部から参照するためには::演算子を使う

一覧表
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/764488/0080e2e2-7a4e-9fda-afc6-bde37cebed11.png)

埋められなかった部分は勉強不足です。
気がついた時点で埋めていこうと思います。

参考元
[Ruby 3.0.0 リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/doc/spec=2fvariables.html)
[オブジェクト指向でなぜつくるのか？ 第二版/著者：平澤章]