OmniAICreator/Qiita-1.07M huggingface dataset:
【Git】git diff で変更した差分を確認する方法

以前こんなツイートをしました。使い方を何となくわかる人はいるかもしれないけどこれだけじゃあまりイメージがわかないですよね。なので今回は詳細を書きましたので参考にしてみてください。

普段はプログラミングについて発信しています。<a href="https://twitter.com/div_tomo?ref_src=twsrc^tfw" class="twitter-follow-button" data-lang="ja" data-show-count="false"> フォローする </a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【git diff コマンドの紹介】<br><br>コミットやステージに追加する前にどんな変更をしたのかを確認できるコマンドです。<br><br>▼git add する前の変更分を確認<br><br>&gt; git diff<br>&gt; git diff &lt;ファイル名&gt;<br><br>▼git add した後の変更分<br><br>&gt; git diff --staged<a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a></p>&mdash; Tomoya🧑‍💻エンジニア (@div_tomo) <a href="https://twitter.com/div_tomo/status/1696530128434831675?ref_src=twsrc%5Etfw">August 29, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 変更差分を確認する

差分を確認するには `git diff` コマンドを使用します。

### git add する前の変更分

> ＞_ コマンドライン
> 

```bash
> git diff
> git diff <ファイル名>
```

特定のファイルの差分を確認したい時は `git diff ファイル名` で特定ファイルを確認できます。

### git add した後の変更分

> ＞_ コマンドライン
> 

```bash
> git diff --staged
```

`—staged` はステージしたけどまだ、コミットしていない分の変更を確認できます。

# git diff コマンドの使用方法

```mermaid
flowchart LR

A[ワークツリー] <-- git diff --> B((ステージ)) <-- git diff --staged --> C((リポジトリ))
```

ワークツリーとステージの差分を確認するコマンドが `git diff` 

ステージとリポジトリの差分を確認するコマンドが `git diff —staged`

## 変更した差分を確認

> ＞_ コマンドライン
> 

```bash
> git diff
```

今は何も変更していないので何も表示されません。

今回は index.html ファイルに変更を加えます。変更した状態で`git diff` コマンドを実行してみましょう。

> ＞_ コマンドライン
> 

```bash
> git diff
**diff --git a/index.html b/index.html
index 3b4659f..9b03591 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,3 @@
 <h1>test</h1>
-<p>変更を追加</p>
\ No newline at end of file
+<p>変更を追加</p>^M
+<p>git diff</p>
\ No newline at end of file**
```

`+`  と表示されている箇所が変更された箇所になります。

この変更をステージに追加して、`git diff` コマンドを実行してみます。

> ＞_ コマンドライン
> 

```bash
> git add index.html

> git diff
```

ワークツリーとステージの間の変更差分なので `git add` した後に `git diff` をしても何も表示されません。

`git diff —staged` でステージとコミットの差分を確認してみます。

> ＞_ コマンドライン
> 

```bash
> git diff --staged
diff --git a/index.html b/index.html
index 3b4659f..9b03591 100644
--- a/index.html
+++ b/index.html
@@ -1,2 +1,3 @@
 <h1>test</h1>
-<p>変更を追加</p>
\ No newline at end of file
+<p>変更を追加</p>^M
+<p>git diff</p>
\ No newline at end of file
```

`+`  と表示されている箇所が変更された箇所になります。

次にコミットして、`git diff —staged` でステージとコミットの差分を確認していきます。

> ＞_ コマンドライン
> 

```bash
> git commit -m "git diff を追記しました"
[master 3d72b8e] git diff を追記しました
 1 file changed, 2 insertions(+), 1 deletion(-)

> git diff --staged
```

コミットした後なので、ステージとコミットの間には何の変更分も無いです。

実際に開発をする時は、なんの変更をしたかを確認してから git add , git commit する癖を付けましょう。
なんとかGWとENIはどうちがうんだろう？─インフラ素人がものすごく浅〜くまとめたメモ

AWSについて学ぶ中で気になっていたことの1つ。__「なんとかGWとENIはどうちがうんだろう？」__ この疑問について、関連する概念とともに、あらためて（ちょっとだけ）考えてみたときのメモです。

# まず、イメージ

なんとかGW（Gateway）はネットワーク同士を繋ぐもの。つまりIPアドレスの空間同士を繋ぐもの。だから制御がちょっと緩い：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/756aaee7-ba46-dc01-5883-ab9adcc70117.png)

👉　IGW（Internet Gateway）、NAT GW（NAT　Gateway）、DX GW（DirectConnect Gateway）、そしてゲートウェイ型VPCエンドポイントなど。

ENI（Elastic Network Interface）はいわゆるNICであり、特定（1つ）の機器をネットワークに繋ぐもの。つまりIPアドレスを機器（EC2など）に付与するもの。だから制御はよりしっかり：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50571/2fbd046b-69a6-be96-e4b1-3afe6b55ec3f.png)

👉　PrivateLinkや（結局は同じことだが）インターフェース型VPCエンドポイントなど。

GWはネットワーク同士を繋ぐ機器であるから、当然それ自体にもNICは繋がっているはず、したがってIPアドレスを持っているはずだが、それをAWSのユーザー開発者がルートテーブルやNACL（Network ACL）などの定義情報の中で直接利用することはない。例えばIGW（Internet Gateway）であれば `igw-*` という名称を利用して指定する。

# 少し細かく、箇条書きで

* __インターネット__ はネットワークの集合体（Internet = Inter Network）。パブリックIPアドレスというグローバルに一意性のあるアドレス同士で通信が行われる空間。
* インターネットを構成する各 __ネットワーク__ は、プライベートIPアドレスというそのネットワーク内でのみ有効で一意性のあるアドレス同志で通信が行われる空間。AWSでいえばVirtual Private Cloud（VPC）。
* __サブネット（Subnet）__ はネットワークの内を区画される。ネットワーク内で有効なプライベートIPアドレスのセットの中から、任意の数のアドレスのサブセットを切り出したものを割り当てられている。サブネットはネットワーク内の通信制御の効率化のための仕組み。
* __IPアドレス__ は Network Interface Card（NIC）ごとに存在。AWSでいえばElastic Network Interface（ENI）。
* __ENI__ はユーザー開発者が利用するEC2インスタンスやAWSが管理するマネージドサービスを構成する仮想マシンをはじめとする機器に接続され、当該の機器にIPアドレスを付与、IPアドレスを利用した通信の能力を与える。
* __ゲートウェイ__ は、ネットワーク同士を接続し、ネットワーク間の通信を実現する装置の総称。ネットワーク（≠サブネット）の境界に存在。ルーターもその一種。ネットワークAに属するパブリックIPアドレスαから、どこかにある別のネットワークBに属するパブリックIPアドレスへの通信を仲介。宛先IPアドレスに通信をするためにどのような経路（ルート）をとる必要があるかを理解。
* __経路__ は、ネットワークAのゲートウェイからネットワークBのゲートウェイへと直接繋がっていることもあれば、AとBの間に別のゲートウェイ（CやD）が入って間接的に繋がっていることもある。
* __ルートテーブル（RT）__ は経路の定義を行う。テーブルは各ゲートウェイが持つ。その定義内容は手動で設定されていることもあれば（静的ルーティング）、決められた方法に基づいて自動で設定されていることもある（動的ルーティング）。
* ルートテーブルに記述された経路情報により __「ある最終的な宛先にデータを送信するために、当座どのゲートウェイにデータを送信するべきか」__ が決定。データを受け取ったゲートウェイは、最終的な宛先が存在するネットワークにデータを送信するため、また別のゲートウェイ（Next Hop）にデータを送信する。
* 本来ゲートウェイの機器自体もまたIPアドレスを持っているが、 __AWSにおいて〜Gatewayを使用する場合それらのIPアドレスを直接指定することはなく、`igw-*`（Internet Gatewayの場合）のような名称で指定__ する。これはおそらく 〜Gatewayが可用性・信頼性のために冗長化されているため。
* __Internet Gateway（IGW）__ は、VPCの中と外（インターネット）のやり取りを仲介するゲートウェイ。
* __ゲートウェイ型VPCエンドポイント__ は、VPCの中とAWSのマネージドサービスが稼働するネットワークの間のやり取りを仲介するゲートウェイ。
* これらに対して、 __インターフェース型VPCエンドポイント__ は、LambdaをはじめとしたAWSが管理するVPCで稼働するAWSサービスに繋がるENI（NIC）をVPC内に配置したもの。
* また、 __PrivateLink__　は、NLBなどユーザー開発者のVPCで稼働するAWSサービスに繋がるENI（NIC）を別のVPC内に配置したもの。
* 〜ゲートウェイはネットワーク同士を繋ぐものだから、 __ネットワークの粒度、IPアドレスの集合体の粒度で通信を制御__ する。より細かな制御には Network ACL（NACL）などを用いる必要がある。
* 一方のENIは特定の機器に直接繋ぐものだから、 __個別の機器、そのIPの粒度で通信を制御__ する。

# よだん

AWSをはじめとしたクラウド基盤の隆盛にともなって、従来の「アプリエンジニア vs.　インフラエンジニア」構図は大部分無意味化してきた印象があります。ことクラウド基盤を利用してシステムを構築・運用するユーザー開発者の立場からするとそう感じられます。「アプリ」も「インフラ」も、クラウド基盤のおかげで随分簡単になってしまって、それぞれが今まで通り専門性（独自の領分）を維持できるほど知識の世界が広くない。

それでも ネットワーキングやセキュリティなど、特定分野についてはやはり「インフラ」的な専門性の香りが残っています。今回取り上げた〜GatewayとElastic Network Interface（ENI）の違いはまさにそうしたものの1つかなと。
こうしてまとめながらあらためて自身の知識不足と苦手意識をしみじみと感じています。
Linuxのコマンド一覧

# Linuxの説明
### ファイル
テキストファイルやバイナリファイル
### ディレクトリ
ファイルやディレクトリが入っているフォルダのようなもの

### Linuxの構造
ディレクトリが階層になっていて、各階層を移動することでそのディレクトリを作業場所としている。

### カレントディレクトリ
現在作業しているディレクトリ

### / ルートディレクトリ
最初のディレクトリ　、一番上の階層のディレクトリ



# 各種コマンド
## cd 
change directoryの略
今いるディレクトリから指定したディレクトリに移動する
## pwd
Present Working Directoryの略
現在作業中のディレクトリを表示する。
## ls
listの略
今いるディレクトリ内のファイルとディレクトリを一覧表示する
## mkdir
make directoryの略
ディレクトリを今いるディレクトリの中に作成する
## rmdir
remove directoryの略
指定したディレクトリを削除する
## cat
concatenateの略、訳:連結する
指定したファイルの中身を確認できる。
(ポイント)
表示しかできないので書き換えなどをするミスを防げる
## less
テキストファイルをページ単位で表示する、長いテキストなどのときに使う
## tail
ファイルの終わり部分を表示する。何も指定しないと10行表示する。
## touch
空ファイルの作成、タイムスタンプの更新。
## rm
removeの略
ファイル、ディレクトリの削除。
## mv
moveの略
ファイル、ディレクトリの移動
ファイル名の変更
## cp
copyの略
ファイルをコピーする
## ln
linkの略
ファイルやディレクトリにリンクを張る
リンクを張るとは
## find
ファイル、ディレクトリの検索
## chmod
change modeの略
所有者とグループ、それ以外に対してファイルに行える権限を変更する。

## chown
ファイル、ディレクトリの所有者を変更する

## ps
process statusの略
現在実行されているプロセスをリストとして表示する
## kill
ジョブやプロセスを修了させる プロセスのIDを指定する
ctrl+Cのような使い方ができる。
【競プロ】期待値系のDPの基本と典型パターン

# はじめに

期待値系のDPにどうしても慣れないので自分の感覚になじむように改めてまとめます
想定読者層は茶~青色くらいのAtCoderユーザです

# 期待値とは

まずは定義をwikipediaから引用してきました
```
確率論における期待値（きたいち、英: expected value）は確率変数を含む関数の実現値に確率の重みをつけた加重平均である[1]。  
```

ここで出てきたいくつかの用語の説明をします

## 確率変数

今回は競技プログラミングでの使用を想定しているので離散型確率変数を扱います
確率変数というのは確率的に何かしらの値をとる変数です。

たとえば偏りのないさいころの場合は確率変数 $X$ は $1,2,3,4,5,6$ のいずれかの値を取ります。
以上です。

それだけではあまり良さを感じられないので次に確率質量関数の説明をします。

## 確率質量関数

確率質量関数とは確率変数が取る値を引数にとり、その確率を返す関数です。
偏りのないさいころを例に確率質量関数 $f_X(x)$ は以下のような値を取ります。
$f_X(1)=f_X(2)=f_X(3)=f_X(4)=f_X(5)=f_X(6)=1/6$

これで期待値の説明をする準備が整いました。

# 期待値の定義の解釈

というわけで冒頭の文章さいころを例にしてを解釈します。
```
確率論における期待値（きたいち、英: expected value）は確率変数を含む関数の実現値に確率の重みをつけた加重平均である[1]。  
```

文章中の `確率変数を含む関数の実現値` とは　$1,2,3,4,5,6$ の値を指します。
確率の重みはそれぞれの値に対して1/6です。
つまり期待値は確率質量関数を用いて以下の式で定義されます

```math
\sum_{i=1}^{n} x_if_X(x_i)
```
ここで $x_i$ はi個目の確率変数が取りうる値とし、$x_n$ まであるとします。

というわけでさいころの場合の出た目の期待値 $E$ は以下のように求めます。

```math

\begin{align}
E &= x_1f_X(x_1)+x_2f_X(x_2)+x_3f_X(x_3)+x_4f_X(x_4)+x_5f_X(x_5)+x_6f_X(x_6) \\
&=1 \times \frac{1} {6} + 2 \times \frac{1} {6} + 3 \times \frac{1} {6} + 4 \times \frac{1} {6} + 5 \times \frac{1} {6} + 6 \times \frac{1} {6} \\
&= 3.5
\end{align}
```


プログラマ的には数式は理解しにくいかもしれないのでサンプルコードです。

```python
# 確率変数が取りうる値X
X=[1,2,3,4,5,6]
# X[i]を取る確率P
P=[1/6,1/6,1/6,1/6,1/6,1/6]

E=0
for i in range(len(X)):
  E+=X[i]*P[i]
```

上記のコードの形式であればさいころが偏り2の目が他の目の2倍の確率で出るようになった時は $P$ を適切に書き換えればよいことがわかりやすいです($sum(P)$ は1である必要があることに注意)


# すごろく系典型問題

上記で期待値とは何かを理解しましたが、だから問題が解けるというわけではありません。
そこで練習として以下の問題を考えましょう

## 問題
太郎君はすごろくをします。
最初太郎君は地点1におり、地点 $N$ につくまでサイコロを振ります。
太郎君が振るサイコロは $1,2,…,P$ の出目が一様ランダムに出るサイコロで、
地点 $x$ にいるときに自分の振ったサイコロの出目が $i$ であるとき、地点$min(x+i,N)$ に進みます。
地点Nにつくまでにサイコロを振る回数を求めてください

### 制約
制限時間 2s
```math
\begin{align}
&2 \leq N \leq 10^5\\
&1 \leq P \leq 10\\
\end{align}
```
## 解法

いくつかダメな方針を含めて方針を列挙してみます。

#### ダメそうな方針
サイコロのすべての出目を追う $\rightarrow$ 多分 $10^{10^4}$ くらいの計算が必要です。
$dp[i][j]$=i回サイコロを振って地点jにいるというDP $\rightarrow$ さいころをN回振る可能性があるので $O(N^2)$ です

#### なんとかなりそうな解法
前から$E[i]$ を地点iにいるときのサイコロを振った回数の期待値とし、$P[i]$ を地点Nを目指す過程でを地点iにとまる確率として地点1から遷移する $\rightarrow$ できます。結構大変です。

#### 素敵な解法
$E[i]$ を地点iにいるときのサイコロを振った回数の期待値とし、地点Nから遷移する


## 素敵な解法解説
というわけで問題は前からも解くことができますがゴール状態からDPの遷移を考えたほうが簡単です

サンプルとして$N=4,P=3$ を考えます
今回はある地点から地点Nにつくまでに振るさいころの期待値について考えます

### ゴールの1つ手前
1回サイコロを振ればゴールができます

### ゴールの2つ手前
1が出た場合のみ2回その他の場合1回
1が出る確率は1/3なので期待値は $2 \times \frac{1}{3}+1 \times \frac{2}{3} = \frac{4}{3} $

### ゴールの3つ手前
3が出た場合1回
2が出た場合2回
1が出た場合ゴールの2つ手前の期待値+1回
期待値は $1 \times \frac{1}{3} +2 \times \frac{1}{3} + (\frac{4}{3}+1) \times \frac{1}{3} = \frac{16}{9}$

上記より求める答えは $\frac{16}{9}$ となります。

つまり下記のような遷移で求めることができます

```math
E[i]=\sum_{k=1}^{P} E[i-k]/P
```

## 問題設定の追加

上記の問題からいくつか派生形のを考えていきます。
難易度が高いわりに説明が簡素なのでわからなくても気にしないでください。
また、既存の問題とかぶっているものが多い事にも注意が必要です

### 振り出しに戻るマスの追加
https://atcoder.jp/contests/abc189/tasks/abc189_f

* 1次式を持つDP
* 未知変数2分探索

### 目に0を含む

0が出る可能性がある場合には注意が必要です。
これはさいころの目の0以外が初めて出るまでの回数の期待値を求め1回ではなく0以外が初めて出る回数振ったとして0の目を除外します
ここで0以外の目が出る確率が$p$であるとき0以外の目が初めて出るまでにさいころを振る回数の期待値は$\frac{1}{1-p}$ です。導出はi回目に初めて事象が起きる確率を極限使って足し続ければできますが省略します
【対処法】ヨーロッパ形式の日付が入ったCSVファイルが正しく読めない！

# ヨーロッパ形式の日付が入ったCSVファイルを正しい形式に変換する方法
作成日がヨーロッパ形式になっていて、ツールによっては日付の自動変換された場合は、日が年になってしまうケースがあります。そういった場合の対応を紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/1f6acc07-eff4-40fe-2f6f-c0087eb77fd9.png)

日付を正しく表記し、時間を24時間表記にしたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/e30125d7-0df4-0bc9-eeee-c4e99b96e383.png)

## Excel

### Excelでおきる現象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/b0d19cc4-a855-28d3-4901-847cc0f4f20e.png)

### Excelでの対処法（一例）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/21578583-3057-b5f9-a2a5-690d3eb79f73.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/36d9ce1d-1f15-f312-ec75-9a7fe3f60ba0.png)


## Power BI

### Power BIでおきる現象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/13e8fb34-8db2-265d-bfa7-c4095ce7f384.png)

### Power BIでの対処法（一例）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/b0e8506d-cb50-5e12-4ce3-626aa74ff3f6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/da306453-9830-577e-6f6e-63ec8d5a56cf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/47890193-5ae2-9539-04d8-5337e5c6e12b.png)

## Tableau

### Tableau Desktopで起きる現象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/c28d1c0f-3eb1-b87c-38ca-34bbb60d60c9.png)

### Tableau Prepで起きる現象
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/55312ce8-31f8-578e-ff01-c7d251e15916.png)

### Tableau Prepでの対処法（一例）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/19456466-a40d-3c61-3d2d-035cbe324716.png)

## まとめ

日付の対応として、各ツールに特徴的な機能があります。各ツールを使いこなせばもっと良い方法が見つかると思いますが、今回は自分で整理できた方法の共有でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3531257/856e9108-95d4-6e59-a2c1-562e89619dc1.png)
GitHub ActionsでFTP(S)経由によるファイルアップロード



```yaml:.github/workflows/main.yml
on: push
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v3
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: sv14460.xserver.jp
        username: test@xs679698.xsrv.jp
        password: ${{ secrets.ftp_password }}
```

## 必須項目

https://github.com/marketplace/actions/ftp-deploy

### server

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/bf44f970-af38-b79f-ada7-df6f9f648a19.png)


### username

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/f54ea818-d53f-9184-0acf-74bbe1a638cf.png)

### password

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/fb79921d-b33b-29f3-ea09-a9a0f93b7811.png)


#### シークレットの設定方法

**Settings** > **Secrets and variables** > **Actions**から`New repository secret`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/4b1b9d4f-7360-728d-7b69-97d1c9575d53.png)

作成したパスワードを入力して`Add secret`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/2f41d312-dd4a-9378-f440-cda91edb4349.png)

# アップロード先のフォルダー

```yaml:.github/workflows/main.yml
on: push
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v3
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: sv14460.xserver.jp
        username: test@xs679698.xsrv.jp
        password: ${{ secrets.ftp_password }}
        server-dir: xs679698.xsrv.jp/public_html/
```

### server-dir
アップロード先のフォルダー (サーバー上)、末尾にスラッシュ`/`を付ける必要があります

# FTPS

`protocol: ftps`を追加

```yaml
on: push
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v3
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: sv14460.xserver.jp
        username: test@xs679698.xsrv.jp
        password: ${{ secrets.ftp_password }}
        protocol: ftps
        server-dir: xs679698.xsrv.jp/public_html/
```

# Exclude files

https://github.com/marketplace/actions/ftp-deploy#exclude-files

必要ならGitHub Actionsのワークフローファイルも除外しましょう

```yaml
on: push
name: 🚀 Deploy website on push
jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
    - name: 🚚 Get latest code
      uses: actions/checkout@v3
    
    - name: 📂 Sync files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: sv14460.xserver.jp
        username: test@xs679698.xsrv.jp
        password: ${{ secrets.ftp_password }}
        protocol: ftps
        server-dir: xs679698.xsrv.jp/public_html/
        exclude: |
          **/.git*
          **/.git*/**
          **/node_modules/**
          **/.github*
          **/.github*/**
```
SIGNATE Student Cup 2023【モデリング部門】：中古車の価格予測チャレンジ

# 本記事について

先日、SIGNATEで開催されていた「**SIGNATE Student Cup 2023【モデリング部門】：中古車の価格予測チャレンジ**」に参加しました。
コンペティションURL : https://signate.jp/competitions/1051#terms

結果は9位/379人（Goldメダル）でした。

チームメイトに恵まれ何とかGoldメダルを獲得できました。解法を公開したいと思います。
コンペ初心者で分からないところだらけでした。改善の余地が多々あると思うので、ぜひ参考までに見ていただければと思います。

# コンペティションの概要

中古自動車の情報(車種・走行距離など)をもとに、中古車の価格を予測するアルゴリズムを構築します。
また、名前の通り学生限定のコンペティションでした。

### 評価関数
MAPE（Mean Absolute Persentage Error 平均絶対パーセント誤差）でした。以下の式で求まります。
```math
\frac{100}{n} \Sigma_{i=1}^n \frac{y_i - \hat{y}_i}{y_i}
```
### データ
提供されたデータには以下のような情報が含まれていました。

- 車の状態に関するデータ
車の状態(excellent, fair, good)/走行距離/見た目の状態/年代 など

- 車のタイプに関するデータ
車種/製造社/シリンダーの数/燃料/ATorMT/大きさ/など

- 販売場所データ
販売地域/販売州



# 解法の概要
主な工夫点として以下二つを行いました
- 特徴量エンジニアリング
- 多峰性の考慮

予測アルゴリズムとしてはLightGBMを用いました。
内容を説明します。

## 特徴エンジニアリング

フォーラムや情報共有のSlackで議論されていた内容を導入しました。特に特別なことはしていません。

- カテゴリー変数のターゲットエンコーディング
- 表記ゆれの修正
- 販売地域を補完する
など

## 多峰性の考慮

中古車価格の分布をカーネル密度推定して描画したのが下の図です。
単純な正規分布でなく山が三つ程あることがわかります。
![price (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467847/a6e822c6-66c8-57e1-a4af-5f8665db2aeb.png)

単純にLightGBMで予測した結果を重ねると以下のようになります。
オレンジが予測値です。
![price_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467847/d40c69c5-2463-b1bd-d069-5288b8e0a07f.png)

多峰性を表現できていないことがわかります。
これをなるべく表現できるよう複数のモデルを組み合わせることを試しました。

以下の４つのモデルを作成しました

1. 全てのデータを使ったLightGBMモデル
1. 価格が12,000以下のデータのみで作ったLightGBMモデル (一つ目の山を表現したい)
1. 価格が10,000以上のデータのみで作ったLightGBMモデル(2つ目の山を表現したい)
1. 価格が25,000以上のデータのみで作ったLighGBMモデル(3つ目の山を表現したい)

1のモデルの結果をもとに、この4つのモデルを組み合わせました。
具体的には
- 1の予測結果が10,000未満
⇒1と2を7:3の割合で足し合わせる

- 1の予測結果が10,000以上12,000未満
⇒1の結果のみ

- 1の予測結果が12,000以上25,000未満
⇒1と3を6:4の割合で足し合わせる

- 1の予測結果が25,000以上
 ⇒1と4を6:4の割合で足し合わせる

足し合わせる際の割合は試してよかったものを使っただけです。

多峰性を考慮するという観点はよかったと思いますが、もっと良い方法があると思います。
GBDT系のモデルを二段階に重ねる（一段階目で価格の高低の2クラス分類を行い、2段階目にその予測確率を特徴量に加える）という解法を目にして、この方がスマートだなと感じました。
(参考URL：https://dena.ai/news/career-up-challenge/)

解法の説明は以上です。拙い説明に付き合っていただきありがとうございます。
何か参考になれば幸いです。
[Python / pipenv] pipenv lock -r が使えないとき

# 問題

```bash
$ pipenv lock -r --dev > requirements.txt
```

上記コマンドを実行したら、以下のように `-r` など無いと言われる。

`Error: No such option: -r`

# 対策

```bash
$ pipenv requirements --dev > requirements.txt
```

これで動く。


# 気付いたこと

この公式サイトにも、

https://pipenv-ja.readthedocs.io/ja/translate-ja/advanced.html

こっちにも、

https://fig.io/manual/pipenv/lock

`-r` オプションが書かれてるんだけどな...古いんだろうな....
VSCodeでFTP(S)経由によるファイル自動アップロード


# Extensions(`Ctrl + Shift + X`)から*natizyskunk.sftp*を入力し、*SFTP*をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/c8911a6c-2497-e392-84d4-dc4158516272.png)


https://marketplace.visualstudio.com/items?itemName=Natizyskunk.sftp

# `Ctrl + Shift + P`を推しftpと入力し、*SFTP: Config*を開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/40e94d21-2999-509f-9a71-4a54ca5cebd3.png)

# Configを書いて保存

```json
{
    "name": "My Server",
    "host": "sv14460.xserver.jp",
    "protocol": "ftp",
    "port": 21,
    "username": "test@xs679698.xsrv.jp",
    "password": "your password",
    "remotePath": "/xs679698.xsrv.jp/public_html/",
    "uploadOnSave": true
}
```

## 必須項目

https://github.com/Natizyskunk/vscode-sftp/wiki/Common-Configuration

### host
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/254d2227-a1b1-a717-6281-652275757abb.png)


### protocol
ftp

### port
21
https://www.xserver.ne.jp/manual/man_ftp_spec.php

### username
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/db572edb-00fb-07cf-e993-cdc0fcc00c81.png)


### password
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/3e0ad694-729d-3b85-4d3b-a6d21f5950b9.png)


### remotePath
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/a22d7b6c-52ac-9fc4-b113-c37a621191cb.png)


### uploadOnSave
`true`にすると保存時に自動アップロードされます

# ファイルを保存して自動アップロード

# FTPS

https://github.com/Natizyskunk/vscode-sftp/wiki/FTP(s)-only-Configuration

`"secure": true`に設定する

```json
{
    "name": "My Server",
    "host": "sv14460.xserver.jp",
    "protocol": "ftp",
    "port": 21,
    "secure": true,
    "username": "test@xs679698.xsrv.jp",
    "password": "your password",
    "remotePath": "/xs679698.xsrv.jp/public_html/",
    "uploadOnSave": true
}
```

# .vscode/と.git/を除外する

https://github.com/Natizyskunk/vscode-sftp/wiki/Common-Configuration#ignore

`.vscode\sftp.json`にパスワード記載してるなら除外しましょう

```json
{
    "name": "My Server",
    "host": "sv14460.xserver.jp",
    "protocol": "ftp",
    "port": 21,
    "secure": true,
    "username": "test@xs679698.xsrv.jp",
    "password": "your password",
    "remotePath": "/xs679698.xsrv.jp/public_html/",
    "uploadOnSave": true,
    "ignore": [
        ".vscode",
        ".git"
    ]
}
```
仮想環境を作成してローカルでcolaboratoryを使用する方法

googleのcolaboratoryを使用するときに、グーグルのサーバーでなく、ローカルのパソコンをサーバーとして使用したい時がある。その際、さまざまなモジュールをインストールすることがあるが、ローカルの環境を汚染したくないときにvenvを使用する。

以下は忘備録である。

# 手法

## 1.仮想環境の作成

以下はmyenvという名前で仮想環境を作成している。

```
python -m venv myenv
```

## 2. 仮想環境内に入る

```
myenv\Scripts\Activate.ps1
```

## 3. モジュールのインストール

```
pip install jupyter_http_over_ws
```

## 4. Jupyter ノートブックの起動

以下のコマンドを入力する。

```
jupyter notebook --NotebookApp.allow_origin='https://colab.research.google.com' --port=8888 --NotebookApp.port_retries=0
```

そして以下の`http://127.0.0.1:8888/tree?toke=...`をコピーする。

```
 Or copy and paste one of these URLs:
        http://localhost:8888/tree?token=何らかの文字列
        http://127.0.0.1:8888/tree?token=何らかの文字列
```

## 5.Colab からの接続

colabの接続ボタンをクリックし、「ローカルランタイムに接続」ボタンをクリックする。そして出現したウィンドウに先ほどコピーしたURLを張り付ける。

# 仮想環境に入るときに「このシステムではスクリプトの実行が無効になっているため、ファイル...」のエラーが出るとき

以下の記事を参考に、powershellを起動し必要なコマンドを入力する。

https://rainbow-engine.com/ps-script-execution-disabled/

# 参考文献
- https://rainbow-engine.com/ps-script-execution-disabled/
- https://research.google.com/colaboratory/local-runtimes.html?hl=ja
【 Vue.js 】トランジション

# トランジション

Vueには、状態の変化に応じてトランジションやアニメーションを扱うのに役立つ2つの組み込みコンポーネントがあります。

< transition >
要素を追加したときにふわっとフェードインさせたり、削除したときにふわっとフェードアウトさせたりすることができます。

要素やコンポーネントがDOMに挿入(enter)、削除(leave)されるときにアニメーションを適用するために提供されます。

< TransitionGroup >

リスト内にレンダリングされた要素およびコンポーネントがv-forで作成されたリスト内に挿入、削除、移動されるときに、アニメーションを適用するために設計された組み込みコンポーネントです。

# < transition >コンポーネント

< transition >は組み込みコンポーネントです。
どのコンポーネントのテンプレートでもそのまま使用することができます。デフォルトのスロットで渡された要素やコンポーネントに対して、アニメーションを適用します。


```js:App.vue
<template>
  <Navbar />
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">

    </transition>
  </router-view>
  <Footer />
</template>
```

# < TransitionGroup >

以下が<Transition>と異なる点です。

・デフォルトでは、ラッパーの要素はレンダリングされません。
・内部の要素は常にユニークなkey属性を設定する必要があります。
・CSSトランジションクラスはグループ/コンテナではなく、リストの個々の要素に適用されます。

参考文献

https://ja.vuejs.org/guide/built-ins/transition.html

https://ja.vuejs.org/guide/built-ins/transition-group.html
【SwiftUI】画像の解像度を下げる

# はじめに
画像の解像度を下げる方法を調べたので記事にしておきます。

# こんな感じになる
![simulator_screenshot_DF2EAC46-82BA-499E-A4D5-9B2D154544A7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1bafc622-9cc6-4182-f61f-25acfde467a4.png)

# 実装
```swift
import SwiftUI

struct ContentView: View {
    private let image = UIImage(named: "sample")!

    var body: some View {
        if let image = reduceResolution(of: image, scaleFactor: 0.1) {
            Image(uiImage: image)
                .resizable()
                .scaledToFit()
        }
    }

    func reduceResolution(of image: UIImage, scaleFactor: CGFloat) -> UIImage? {
        let newSize = CGSize(width: image.size.width * scaleFactor, height: image.size.height * scaleFactor)
        UIGraphicsBeginImageContextWithOptions(newSize, false, 1.0)
        image.draw(in: CGRect(origin: .zero, size: newSize))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage
    }
}
```

# おわり
モザイクアプリとか作れそうですね
Reactプロジェクトを作成する手順

### 関連ページ
https://qiita.com/raisack8/items/ade78eabd06b2073d738

# 1.プロジェクトの作成

```
npx create-react-app react-app
```

typescriptは以下
```
npx create-react-app --template typescript myapp
```

# 2.作業ディレクトリへ移動

```
cd react-app
```

# 3.tailwind使用

```react-app\public\index.html
 <script src="https://cdn.tailwindcss.com"></script>
```

https://tailwindcss.com/docs/installation

# 4.Material UI
```
npm install @mui/material @emotion/react @emotion/styled
```
https://mui.com/material-ui/getting-started/

ボタン使用例
```js
import * as React from 'react';
import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/32bc42cb-2934-de10-c4bd-62b47f3656e2.png)


インプット使用例
```js
import * as React from 'react';
import TextField from '@mui/material/TextField';

export default function FormPropsTextFields() {
  return (
      <div>
        <TextField
          id="outlined-password-input"
          label="Password"
          type="password"
          autoComplete="current-password"
        />
      </div>
  );
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/b95b86c2-d0d6-ab61-4c2f-6786cbcf2756.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/2fbd9c61-53fb-7bc5-f6df-f1e154da4272.png)

# 5.API通信

### GET

```js
const pushGetBtn=()=>{
  getMethod()
}

const getMethod=()=>{
  fetch('http://127.0.0.1:8000/api/',{method: 'GET'})
    .then((response) => response.json())
    .then((data) => {
      console.log('GET Seccess:', data);
  })
  .catch((error) => {
    console.error('GET Error:', error);
  });
}

```

```js
<Button variant="contained" onClick={()=>pushGetBtn()}>GET</Button>

```

### POST

```
npm install axios
```

```js
const pushPostBtn=()=>{
  postMethod()
}

const postMethod=async()=>{
  try {
    const data = {
      message: 'api meassage'
    };
    const response = await axios.post(
      'http://127.0.0.1:8000/api/get/', 
      data
      );
    console.log('GET Seccess:', response)
  } catch (error) {
    console.error('GET Error:', error);
  }
};
```
microshadesをQIIME2データに適用する

# microshadesとは
色覚異常 (CVD) を持つ人に適したカラーパレットはいくつかあるが、多数の色を同時に表示するマイクロバイオームデータには不十分であることが多い。
R パッケージであるmicroshadesでは、CVDでアクセス可能なマイクロバイオーム図を作成することができる。

CVDフレンドリーなカラーパレットを出すだけではなく、マイクロバイオームデータを分類群ごとにlegend内で分けることが可能。

下記のように、Phylumごとに細菌属を分けて、グラデーションで示すことができる。（[画像元](https://karstenslab.github.io/microshades/articles/microshades-GP.html)）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222325/ed13b76c-3499-9224-4c66-43cea5304883.png)

**論文**
[microshades: An R Package for Improving Color Accessibility and Organization of Microbiome Data](https://journals.asm.org/doi/10.1128/mra.00795-22)

**GitHub**
[microshades](https://github.com/KarstensLab/microshades)

## インストールとライブラリ読み込み

```R
# install microshades
remotes::install_github("KarstensLab/microshades")

# install phyloseq and speedyseq
BiocManager::install("phyloseq")

# Import libraries
library(phyloseq)
library(speedyseq)
library(dplyr)
library(ggplot2)
library(microshades)
library(qiime2R)
library(cowplot)
```

## データ入力と整形

selected_groupsに入れる細菌門は分類名の変更されている可能性があるため、
phyloseqの関数 `tax_table(physeq)` などで随時確認する。
group_level, subgroup_levelは適宜変更可能。こちらも `tax_table(physeq)`を見て表記揺れに注意する。
"PHYLUM", "Phylum", "phylum"など。phyloseqで読み込むと基本は"Phylum"になる。
top_n_subgroupsでsubgroupを何種類表示するか決められる。

```R
# Import data
physeq <- qza_to_phyloseq(
		features="table.qza",
		taxonomy="taxonomy_SILVA.qza",
		metadata ="metadata.txt"
		)

# Use microshades function prep_mdf to agglomerate, normalize, and melt the phyloseq object
mdf_prep <- prep_mdf(physeq)

# Create a color object for the specified data
# Check tax_table(physeq) 
color_obj_physeq <- create_color_dfs(
					mdf_prep, selected_groups = c("Firmicutes", "Bacteroidota", "Actinobacteriota", "Proteobacteria"), 
					top_n_subgroups = 4, 
					cvd = TRUE, 
					top_orientation = TRUE
					)

# Extract
mdf_physeq <- color_obj_physeq$mdf
cdf_physeq <- color_obj_physeq$cdf
```

## グラフの描画

凡例をPhylumごとに見出しと色分けをする場合は、`custom_legend`関数を用いる。
カスタムした凡例と棒グラフを組み合わせる場合は、`plot_grid`で組み合わせて表示する。

```r
plot_1 <- plot_microshades(mdf_physeq, cdf_physeq, group_label = "Phylum  Genus")

plot_diff <- plot_1 +
	scale_y_continuous(labels = scales::percent, expand = expansion(0)) +
	theme(
		legend.position = "none",
		axis.title.y = element_text(face = "bold"),
		axis.title.x = element_text(face = "bold"),
		axis.text.y = element_text(face = "bold")
		)

# Custom legend
custom_legend <-custom_legend(mdf_physeq, cdf_physeq, legend_text_size = 12)

# Combine plot and legend
plot_grid(plot_diff, custom_legend, rel_widths = c(1, .25))
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222325/24040ade-1423-8ab7-71cd-ea523b5836f9.png)
Semantic UI ReactのInputでファイルアップロードをしたいけど、ref経由でクリックできない

# 経緯

Semantic UI ReactのInputを使ってファイルアップロードを実装したら、なんかダサい、、

```jsx
import { Input } from "semantic-ui-react";

const Component = () => <Input type='file' />

export default Component;
```

　↓↓↓　こうなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495159/cdd57a68-4edc-01ed-369b-0b4689ba0d7c.png)

じゃあ、Inputは非表示にして、Buttonクリックしたらref経由でinputクリックしてファイル選択できるようにしよう

```jsx
import { useRef } from "react";
import { Button, Input } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    };

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            <Input type='file' ref={ref} style={{ display: 'none' }} />
        </>
    );
}

export default Component;
```

ボタンを押してみたが、エラー、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/495159/ee91efeb-9db8-1a3b-b9b9-8ee2624d8d7e.png)
"ref.current.click is not a function"なんて言われちゃいました

# 環境

| 名前 | バージョン |
|-|-|
| react | 18.2.0 |
| semantic-ui-react | 2.1.4 |

# 調査1. ref.current.clickが本当に関数ではないのかを調べる

参考にしたサイトでは使えていたので、参考と同じように、inputタグを使用してrefを使ってみる

```jsx
import { useRef } from "react";
import { Button, Input } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    }

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            {/* <Input type='file' ref={ref} style={{ display: 'none' }} /> */}
            <input type='file' ref={ref} style={{ display: 'none' }} />
        </>
    )
}

export default Component;
```

→問題なく動いたので、Inputのrefからではclickが実行できないよう

# 解決策1. Inputではなく、内部のinputに直接refを渡す

この記事でやったことを応用

https://qiita.com/moto-na/items/f26caa2413873b9bc754

```jsx
import { useRef } from "react";
import { Button, Input } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    }

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            <Input type='file' style={{ display: 'none' }}>
                <input ref={ref} />
            </Input>
        </>
    )
}

export default Component;
```

# 解決策2. HTMLのforとidの紐づけを利用する

```jsx
import { Input, Label } from "semantic-ui-react";

const Component = () => {
    return (
        <>
            <Label as='label' htmlFor='file-upload'>ファイルを選択</Label>
            <Input type='file' style={{ display: 'none' }} id='file-upload' />
        </>
    )
}

export default Component;
```

# 解決策3. 非表示なのでInputではなく、inputを使用する

```jsx
import { useRef } from "react";
import { Button } from "semantic-ui-react";

const Component = () => {
    const ref = useRef(null);

    const handleClick = () => {
        ref.current.click();
    }

    return (
        <>
            <Button onClick={handleClick}>ファイルを選択</Button>
            <input type='file' ref={ref} style={{ display: 'none' }} />
        </>
    )
}

export default Component;
```
JAVA×SQL②

# 課題
問題：JAVAでdelete文を実行せよ
使用ソフト：XAMPP、eclipse

~~~~~java

package DBA;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.Scanner;

public class DBA2  {
	public static void main(String[] args) throws SQLException {
	System.out.println("会社ID入力");
	Scanner s=new Scanner(System.in);
	int ID1=s.nextInt();
		
	String url="jdbc:mysql://localhost/JDBC";
	String user ="root";
	String password ="";
	Connection con = DriverManager.getConnection(url,user,password);
	PreparedStatement pstmt =con.prepareStatement
			("delete from worker where co_id=?");
	pstmt.setInt(1,ID1);
	int rows =pstmt.executeUpdate();
	if(rows>0) {
	System.out.println("削除成功");
    }else {
	System.out.println("削除失敗");
	}
}
}
~~~~~

本日の気付き：失敗した場合0になるため、IF文の要件は０以上にします。
本日の学び：標準入力からも問題なく可能、結びつけ方次第。
【CSS】scroll-behaviorの罠、スムーススクロールを有効にすると画面外のフォームエラーが表示されない

`scroll-behavior: smooth;` 便利ですよね。
これ一行で今までJavascriptで書いていたスムーススクロール処理が不要になりました。
めでたしめでたし



ん？

フォームがおかしい・・・

https://bananacoffee.github.io/scroll-behavior-test/

**画面外でsubmitボタンを押して、requiredやpatternのエラーに引っかかった時、なぜかヒント表示されない**

Firefoxのみうまくいく模様。
Edge、Chromeはダメ。
（当方Windowsなのでsavariは未検証）

スムーススクロール（`scroll-behavior: smooth;`）が発火するとヒントが消えちゃうってどんな罠だよ・・・

結局Javascriptでスムーススクロール書くしかないの？
それともバリデーションをコンポーネントで作れっていうこと？

ブラウザ側の対応待ちでいいのかしら・・・？
Vueの勉強⑤

最近投稿できない日々が続き久しぶりの投稿です。
日課まではいきませんが意識して投稿するようにすればと思っていましたがなかんか上手くいかないものですが頑張って続けて行こうと思います。

v-タグ　配列の削除と非表示について
```
const removeTodo = (index) => {
  todos.value.splice(index, 1);
};
```
splice
削除するコマンドらしいです。
要素を消すことができ配列に追加したものを削除できるようになりました。

```
<ul v-if="todos.length > 0">
```
v-ifは、条件の真偽によりその要素を表示するかしないかをコントロールできる。
if文ってことで良いのかなと、
また、v-showと似たものがあり、こちらは真偽の要素に関わらず表示させる
つまり条件をつけたいときはifを使うと解釈しました。
、、また勉強しときます。
length
配列を確認する際に使います。
合わせて条件式を入力すれば良いみたいです。


```
<ul v-if="todos.length === 0"> 
or
<ul v-else>
```

こちらは上記の入力に対しての偽だった時の処理文です。
どちらでも大丈夫ですがv-elseを使った方が簡単です。
codesandboxでEmmetを使う方法

codesandboxでEmmetが使えるという情報を聞き、試してみたがうまく行かない。
# こんな状態
例えばcodesandbox上で
```:emmet
header>nav
```
と入力して`tab`キーを押すと、
```html:html
<header>
    <nav></nav>
</header>
```
となってほしいところだが、
普通に`tab`文字が入力されるだけである。
# 解決策
Codesandboxで
1. Preferences > Editor > `Open VScode Settings`を開く
1. 「emmet」と検索し、Emmet: Trigger Expansion On Tab にチェックをつける

---
これでいい。
DBMS(DataBase Management System)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457284/300d1bf0-79ec-adb2-fc85-7cbd787dbffb.png)
１：同時実行制御
　複数のトランザクションが同時に同じデータに書き込むと、データに不整合が発生します。パソコンの文書ファイルを例に考えてみると、文書ファイルをファイルサーバに保存してみんなで共有しているとします。複数の人が文書ファイルを同時に更新したら、誰かが更新した文書ファイルを別の人が上書きしてしまって、最初の人の更新内容が消えてなくなってしまいます。データベースの場合も同じことが起こります。
　このような不整合を防ぐには、ロックをかけて別の人に使わせないようにします。データベースのロックには、共有ロックと占有ロックがあります。

①共有ロック
　読み込み時にかけるロックです。
　あるトランザクションが共有ロックをかけている場合、他のトランザクションが、さらに共有ロックをけることができます。他のトランザクションが占有ロックをかけることはできません。

②占有ロック（専有ロック）
　書き込み時にかけるロックです。
　あるトランザクションが占有ロックをかけている場合、他のトランザクションは共有ロックも占有ロックもかけることはできません。
【Postgre】スキーマの所有者を調べるSQLクエリ（nspname/nspowner/pg_namespace）

# 概要

PostgreSQLにて`"public"`スキーマの所有者(`owner of schema public`)がどのアカウントなのか知る方法を記載します。DBeaverからではパッと見、調べる方法がなさそうでしたので。。

# SQLクエリ

PostgreSQLのスキーマ情報は`pg_namespace`というシステムカタログテーブルに格納されています。
このテーブルをクエリしてスキーマ`"public"`の所有者を知ることができます。

```sql
SELECT nspname, pg_get_userbyid(nspowner) AS owner
FROM pg_namespace
WHERE nspname = 'public';
```

上記SQLでは、以下のことをおこなっています。
- `pg_namespace`カタログテーブルを使用→指定したスキーマの情報を取得
    - `nspname`(名前空間の名前)と`nspowner`(名前空間の所有者)は`pg_namespace`のカラム。ユーザーが直接操作するものではない。
    -  `pg_`で始まるスキーマは PostgreSQL のシステムが使用しているもの。
- `pg_get_userbyid`関数を使用→所有者のユーザー名を取得

上記で無事に所有者の名前を取得することができました。
【作成中】Subversion構築手順　(Ubuntu)

勉強がてら自宅に開発環境のようなものを作ってトレーニングしたいと思ったため、まずSubversionをサーバー機に入れてみることにする。

自宅のサーバー機には最初CentOS7を入れてみたが、今後の保守性を考えて、Ubuntuで試してみた。

参考にしたものは以下のサイト
https://note.com/kazuyama4vrc/n/n567986633ffb#753a25d6-b346-4038-884a-d2c18093bfef

一旦はここを参考にするとサービス起動までできた。

環境
Ubuntu
Laravel Bulk Insert の後に主キーを返す

## 概要

```php
$users = [];

foreach ($parameters as $parameter) {
    $users[] = User::create($parameter);
}

dump($users);
```

こんな感じで作ってしまうといざ大量のユーザーデータを挿入しようとするとメモリがいくつあっても足りません。

ということで一括挿入するコードに書き直します。

## Bulk Insert

```php
// Laravelは二重の配列を渡すと複数レコードを一括挿入できる
$data = [
    ['name' => 'Taylor', 'age' => 30],
    ['name' => 'Nuno', 'age' => 40],
];

User::insert($data);
```

https://readouble.com/laravel/10.x/ja/queries.html#insert-statements

insert関数の返り値はboolであり、挿入したレコードのIDを使いたい場合は使えません。

https://github.com/laravel/framework/blob/10.x/src/Illuminate/Database/Query/Builder.php#L3301-L3307

### 補足: insertGetId

https://readouble.com/laravel/10.x/ja/queries.html#auto-incrementing-ids

```php
$id = DB::table('users')->insertGetId(
    ['email' => 'john@example.com', 'votes' => 0]
);
```

公式で用意されてるじゃん！と思うんですが、一括挿入には対応していません。。
ということでひと工夫が必要です。

## Bulk Insert(挿入したレコードの主キーを返す)

```php
use App\Models\User;
use Illuminate\Support\Facades\DB;

$data = [
    ['name' => 'Taylor', 'age' => 30],
    ['name' => 'Nuno', 'age' => 40],
];

$userIds = DB::transaction(static function() use ($data): array {
    User::insert($data);
    $lastId = User::orderByDesc('id')->first()->id;

    return range($lastId - count($data) + 1, $lastId);
});
```

トランザクションで囲って、`User::insert($data);`で一括挿入しています。
これで途中に別のデータが差し込まれることを防ぎます。

最新のユーザーIDを取得して、開始の番号からの連番配列を作って返しています。
UUIDであれば前採番できるので、こういう工夫が要らなくて良いですね。

### 補足: DB::transaction(...) の結果はコールバック関数の返り値になる

https://readouble.com/laravel/10.x/ja/database.html#database-transactions

https://laravel.com/docs/10.x/database#database-transactions

特に公式ドキュメントには書かれてないですが、Tailorさんが言ってました。

https://twitter.com/taylorotwell/status/1002290256916418560?s=20

割と使うので公式に使い方を載っけて欲しいな。
Ubuntu Wallpapersのすべて

<p class="codepen" data-height="800" data-default-tab="result" data-slug-hash="WNLrvor" data-user="04" style="height: 800px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/04/pen/WNLrvor">
  Ubuntu Wallpapers</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

お気に入りの画像があれば、クリックしてみてください


以下のコマンドで壁紙ダウンロード可能です！

```bash
sudo apt-get update
sudo apt-get install -y ubuntu-wallpapers-* edgy-wallpapers feisty-wallpapers gutsy-wallpapers
ls /usr/share/backgrounds
ls /usr/share/gnome-background-properties
```

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Masonry_layout
Safariで画像が縦に伸びてしまう時の解決方法

## はじめに
先日、iPhoneで画面を確認した時に画像が縦に伸びるという事象が起きました。
Google Chrome（以下、Chrome）のデベロッパーツールでiPhoneでの見え方を確認した時には問題なかったのに...と焦ったので解決方法についてまとめようと思います。

## 事象
|Chrome（Windows）で見た時|Safari（iOS）で見た時|
|---|---|
|![スクリーンショット 2023-08-18 002132.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/d4b35d01-8c1b-856d-7b43-d8d6ed484416.jpeg)|![スクリーンショット 2023-08-18 002047.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2153171/0babdfea-a1d9-21a3-abb8-ccf110dbe761.jpeg)|

上記のように、Safariでは画像が縦に伸びてしまっている状態でした。

事象発生時に書いていたコードは以下のような感じです。
```HTML:index.html
	<div class="flex-container">
		<img src="./img/blue.png" alt="青の円">
		<img src="./img/green.png" alt="緑の円">
		<img src="./img/red.png" alt="赤の円">
	</div>
```
```CSS:style.css
.flex-container {
	display: flex;
	}
.flex-container img {
	width: 30%;
	height: auto;
}
```
内容としては以下。
- 親要素のdisplayプロパティにflexを指定し、画像を横並びに
- 子要素にimg（画像）を入れて、高さにautoを指定

## 原因
調べたところ、どうやらflexコンテナの子要素に直接img（画像）を入れると、iOSのSafariでは画像のアスペクト比が崩れて縦に伸びてしまうようです。

## 解決方法
解決方法はいくつかあるようです。

### 方法①：flexコンテナに対して`align-items: flex-start;`を指定する
```CSS:style.css
.flex-container {
	display: flex;
    align-items: flex-start;
}
```
これでflexアイテム（ここでは画像）がコンテナの開始位置から配置され、画像が伸びずに元の比率を保てます。

### 方法②：HTMLの構造を変える
```HTML:index.html
	<div class="flex-container">
		<div class="item"><img src="./img/blue.png" alt="青の円"></div>
		<div class="item"><img src="./img/green.png" alt="緑の円"></div>
		<div class="item"><img src="./img/red.png" alt="赤の円"></div>
	</div>
```
imgを`div`タグなどで囲み、画像をflexアイテムの子要素になるようにしてあげることでも解決できるようです。

## 参考リンク
[フレックスボックス - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox)
GoでWebアプリケーションを作る（2）ーHello, Worldを作る

こんにちは。

今日は「Hello, Worldを作る」についてです。

Go言語の実行方法とコンパイル方法を確認します。

# Goの実行

## Goを動かす

Go言語で作成されたソースコードの実行方法は2つあります。
ソースコードをコンパイル（`go build`）し、実行形式ファイル（.exe等）を実行する方法と、
ソースコードをスクリプト言語のように実行する`go run`コマンドを用いる方法です。

### 以下のコマンドを実行して、Goを動かしてみよう


```hello/main.go
package main

import "fmt"

func main() {
	fmt.Println("Hello, World!!")
}
```
#### 結果

```
:# TERMINAL 0

$ go run main.go
Hello, World!!
```

### 以下のコマンドを実行して、Goをコンパイルしてみよう。

```
$ go build main.go
$ ls
$ file ./main
$ ./main
```

#### 結果
```
:# TERMINAL 0

$ go build main.go
$ ls
main  main.go
$ file ./main
main: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), statically linked, Go BuildID=h4I-IJqcIkOGZEY8aOXG/Oavgb_mM-7UzeuwNWOCx/iNm526Mrqo9Tb59n0e8A/SZ9SbxL4eRIc7JGiMfDO, not stripped
$ ./main
Hello, World!!
```

おめでとうございます。これで、あなたもGopherの友達です。
記念にぬいぐるみのGopherを机に飾っても良いでしょう。

# クロスコンパイルの体験

きっと便利ツールを作ってお手元のWindowsで動かしたくなることもあるでしょう。

## 以下のコマンドを実行して、Goをコンパイルしてみましょう。

```
:# TERMINAL 0

$ GOOS=windows GOARCH=amd64 go build main.go
$ ls
$ file ./main.exe
```

### 結果
```
:# TERMINAL 0

$ GOOS=windows GOARCH=amd64 go build main.go
$ ls
main main.exe main.go
$ file ./main.exe
main.exe: PE32+ executable (console) x86-64 (stripped to external PDB), for MS Windows
```

クロスコンパイル時に指定する環境変数(`GOOS`, `GOARCH`)へ指定できる値は、`go tool dist list` というコマンドで確認できます。

今日は以上です。
ありがとうございました。

次のPart 3は「変数とその定義方法」です。
よろしくお願いいたします。
streamlit初期動作不良



# Python学習入門〜streamlitの導入〜

Pythonの学習入門としてUdemyなどを活用しながら独学することにした。
今日はその第一歩のエラーとその対処法まとめ。

# streamlitの導入

```terminal:エラー
streamlit hello
zsh: command not found: streamlit
```
1番苦手な環境構築でやはり躓いた。
調べてみるとフルパスで呼びたす必要があるようだ。

```terminal:対処法
 /Users/《ユーザー名》/Library/Python/《Pythonのバージョン》/bin/streamlit hello 
```

その後、無事streamlitを立ち上げることができたが、
やはりその起動で同じようなエラーが出現。

# streamlit立ち上げ

```terminal:エラー
===　streamlit内記述(main.py)　＝＝＝
import streamlit as st
st.title('Streamlit 入門1日目')

＝＝＝　ターミナル実行文　＝＝＝
stream run main.py
Warning: to view this Streamlit app on a browser, run it with the following
  command:
    streamlit run /Users/《ユーザー名》/《フォルダ名》/main.py [ARGUMENTS]
```

親切にも警告文で正しい表記について記述されており、そちらを参考に入力。
しかし、今度はまた導入時と同じ、コマンドが見つからないエラー。

ということで、両方ともフルパスにて実行し、見事成功。

```terminal:対処法
Users/《ユーザー名》/Library/Python/《Pythonのバージョン》/bin/streamlit run /Users/《ユーザー名》/《フォルダ名》/main.py
```

これで無事立ち上げまで完了。先が長い。

![スクリーンショット 2023-08-28 13.57.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538825/46ee93ad-eab1-75c9-50e1-9b3842733b6e.png)
【 Vue.js 】Vue Routerで404画面を作成

# はじめに
Vue.js3とLaravel10を使用してポートフォリオを制作しています。
Vue Routerを導入して簡単に404画面を作成しました。

# ルーティング

```js:src/router/routes.js
import NotFoundErrorPage from '../pages/errors/NotFoundErrorPage.vue';

const routes = [
    {
        path: "/:notFound(.*)",
        name: 'error.404',
        component: NotFoundErrorPage,
    },
];
```

"/:notFound(.*)"で存在しない全てのURLに対して、404エラー画像を出力します。

404 Not foundルートについての参考文献

https://v3.router.vuejs.org/ja/guide/essentials/dynamic-matching.html#%E3%81%99%E3%81%B8%E3%82%99%E3%81%A6%E3%82%AD%E3%83%A3%E3%83%83%E3%83%81%E3%81%99%E3%82%8B%E3%83%AB%E3%83%BC%E3%83%88-404-not-found-%E3%83%AB%E3%83%BC%E3%83%88

# vue画面(フロント)

フロント側の画面です。

```js:src/pages/errors/NotFoundErrorPage.vue
<template>
    <div class="container">
        <h1>404</h1>
        <p>Sorry, the page <code>{{ $route.params.notFound }}</code> you're looking for is not found</p>
        <router-link :to="{ name: 'recipes' }" class="text-blue-600">Back to your recipes</router-link>
    </div>
</template>
```

 <code>{{ $route.params.notFound }}</code>でこのページは存在していませんよ。という表示を行っています。

例えば

「aaaa」というページは存在しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/ac2ae28f-01ce-078b-6a95-a90bae2ec7f2.png)

「bbb」というページは存在しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784589/b61a5901-8306-c100-9ea0-ba511efad45a.png)

上記のように表示できます。
raspberrypiにfabricでminecraftのmod鯖を構築【備忘録】

この前raspberrypiにubuntu鯖22.04を入れてfabricなminecraftのmod鯖を構築したので備忘録です。
## 環境
<クライアント>
HP victus 16 ( windows11 )
<サーバー>
raspberrypi 4B 8GB
microSD 64GB
## ubuntuを焼く
raspberrypi imagerを利用し、ubuntuを焼きます。
https://www.raspberrypi.com/software/
こちらからダウンロードしてください。
### OSを選ぶ 
`OSを選ぶ`、`Other general-purpose OS`、`Ubuntu`、`Ubuntu Server 22.04.5LTS (64-bit)`を選択。
※debian系なら何でもおｋ。ただし64bitを選ぶと無難。
### ストレージを選ぶ
raspi専用のubuntuを焼くmicroSDを選択。最低32GB、推奨64GBです。

各自でカスタマイズオプションいじってください。
あとは`書き込む`を押す。

## java17とfabric鯖のjarファイルとftp鯖を入れる
以下1行ごとコピペでおｋです。
```bash:bash
#aptとapt-getのアプデ
sudo apt update; sudo apt upgrade
#java17のインスコ
sudo apt install openjdk-17-jdk -y
#再起動
sudo reboot now
#鯖用ディレクトリの作成
cd ~
mkdir mcserver
cd mcserver
```
以下のページのCLI downloadのコマンドをコピペしてください。
https://fabricmc.net/use/server/

あとは起動用のシェルスクリプトを作成します。
```bash:bash
#ダウンロードしたファイル名の確認。メモっといてください
dir
#お好きなエディタでどうぞ
sudo nano boot.sh
```
```nano:boot.sh
java -Xms4G -Xmx4G -jar server.jar nogui
```
### ファイルの保存
`Ctrl+O` `Enter` `Ctrl+X`の順に押す。
## 初回起動
```bash:bash
sh boot.sh
```
### Minecraft EULAに合意
```bash:bash
#vimでもお好きなほうをお使いください
sudo nano eula.txt
```
```nano:eula.txt
EULA = true
```

※このタイミングでserver.propertiesいじっときましょう。

### 再度起動
```bash:bash
sh boot.sh
```
これで起動は完了です。
mod入れたいよとかって方はftpでアクセスしてあげてクライアントからmodをうｐしてあげてください。

## エラー対処
・タイプミスを疑う
・エラーコード読んでください
Next.jsでのxml2jsの使い方

xml形式のレスポンスをNextで処理するためのパッケージとしてxml2jsがあります。Nextで使用する例がなかなか見つからず苦労したのでNextで使用する方法を紹介します。

# インストール
まず、以下のコマンドでxml2jsをインストールします。
```
npm i xml2js
```
次に、xml2jsを使用しますが、今回はNextのAppRouterを使用すること及びuseEffect内でAPIにリクエストを送信しxml形式のレスポンスを処理することを想定します。この場合は以下のようなコードとなります。
```
'use client';
・
・
・
import { useEffect, useState } from 'react';
import { parseString } from 'xml2js';
・
・
・
interface Article {
  userId: number;
  id: number;
  title: string;
  body: string;
}
・
・
・
const [articles, setArticles] = useState<Article[]>([]);
・
・
・
useEffect(() => {
    async function fetchData() {
      const url = API_URL; //API_URLを任意のものに変更してください。
      try {
        const response = await axios.get(url);
        console.log(response);
        const xmlData = response.data;
        parseString(xmlData, (err, result) => {
          if (err) {
            console.error('XMLの解析エラー:', err);
          } else {
            const parsedArticles = XML_RESPONSE //レスポンスの構造に応じてXML_RESPONSEを変更してください。
            setArticles(parsedArticles);
             }
        });
      } catch (error) {
        console.error('データの取得エラー:', error);
      }
    }
    fetchData();
  }, []);
・
・
・
```
【flutter】リストを使うには？

こんにちは。
今回は、リストを使う方法を紹介します。

# 方法
![スクリーンショット 2023-08-13 20.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/ce57fee2-1687-ea40-8538-b4c8b9db94e0.png)

まず、型を指定して宣言します。
次に、mapメソッドを使い、値を取得します。

mapメソッドは、次の書式で使用します。

map( ( 要素 ) => 式)

・要素 : 取り出した値を受けとる引数を指定します
・式：要素に対して行う処理




# 使用例
```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  MainApp({super.key});
  final List<Color> colorlist = [//型を指定して宣言
    Colors.blue,
    Colors.yellow,
    Colors.black,
    Colors.green,
    Colors.pink,
    Colors.orange,
    Colors.purple,
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink, 
          title: const Text("Flutter!!!!"), 
        ),
        body: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              ...colorlist.map(//...自分で作ったリスト名.map((e)=>)
                (e) => Container(
                  height: 200,
                  width: 200,
                  decoration: BoxDecoration(
                    color: e,//eをセット
                    shape: BoxShape.circle,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

```

# 実行例
![listgif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524120/48d3bd8a-bf73-52d1-a257-2870f846f600.gif)
Oracle Database 23c Beta/Free

# はじめに
Oracle Database 23cのBeta版・Free版のリンクをメモ代わりにまとめてみた。

# 1. Oracle Database 23c Beta
[Oracle Database 23c ベータ プログラムの概要](https://learn.oracle.com/ols/event/oracle-database-23c-beta-program-overview/89350/119896/185331)
- [Beta Program](https://blogs.oracle.com/database/post/oracle-database-23c-beta-program)に参加するためには、QRコードからフォームを入力することができる。

# 2. Oracle Database 23c Free
- [Oracle Database 23cの無料版が開発者に提供開始](https://www.oracle.com/news/announcement/oracle-database-23c-free-developer-release-2023-04-03/)
- [23c Free 製品ポータル](https://www.oracle.com/database/free/)
- [Oracle Database 23c Free 関連情報](https://go.oracle.com/LP=137202?elqCampaignId=468351)：Qiitaなどの技術ブログがまとまっている
- [マニュアル][1.3 Oracle Databaseオファリングごとに許可される機能、オプションおよび管理パック](https://docs.oracle.com/cd/F82042_01/dblic/Licensing-Information.html#GUID-F796455D-C7EF-4836-9F69-2BCCDA49B7BD)：Free版で利用できる/できない機能がマトリクス表でまとめられている
- [マニュアル][Oracle Database 23c Freeの概要](https://docs.oracle.com/cd/F82042_01/cncpt/introduction-to-oracle-database.html#GUID-A42A6EF0-20F8-4F4B-AFF7-09C100AE581E)


--以上--