OmniAICreator/Qiita-1.07M huggingface dataset:
Swiperで自動スライドしてくれない

## HTML

```main.html
<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
```

## Swiper.js
```swiper.js
const swiper = new Swiper(".swiper", {
  loop: true,
  slidesPerView: 5,
  speed: 6000,
  allowTouchMove: false,
  autoplay: { //自動スクロール
    delay: 0,
  },
});
```

## 原因

swiper-wrapperクラスやswiperクラスにcssで```position: relative```を設定しているのを無くすと動くようになった。
おい！そこのお前、俺の質問にちゃんと答えてくれ

社内に、新しく入ってくるメンバーにいつも伝えていることを共有します。
面接でも、いつも思うことでもあります。

:::note warn
「おい！そこのお前、俺の質問に"ちゃんと"答えてくれ。」は、流石にこんな言葉遣いは普段してないです（笑）
:::

## 結論ファーストの徹底
まずは、とにかく結論から話してほしい。

その質問の回答が、「YES」なのか「NO」なのか、「できる」のか「できない」のか、「5人」なのか「10人」なのか。とにかく、答えがほしいんだ。

もちろん、答えに至るまでの「背景や過程」も大切だと思う。でも、今知りたいのは「背景」ではなく「答え」なんだ。答えを聞いた後に、その背景を知りたいんだ！

答えを聞かない間は、犯人がわからない状態で、謎解きミステリーのネタ晴らしを聞かされているような感覚である。え、結局誰？どっち？という状態で、聞き手はあなたの話を聞かないといけない。

すごくもどかしいのである。


## 質問を「英訳」した上で、答える
中学校の英会話みたいな答え方を意識して欲しい。

英語で “Do you~” と言える質問には、まずYESかNOで答えてほしい。
英語で “How many/long~” と言える質問には、数字で答えてほしい。

### 悪い例
:::note info
立食パーティー屋さんの予約サイトを作った時のコミュニケーション
:::

私「食事の人数は、10人分しか購入していないが、参加者が20名いるようなことはありえますか？」

回答者「食事は、参加人数の5掛け注文となります。ドリンクは、参加人数のと同数でないといけません。」

私「ありえるのか、ありえないのかどっちなんだ？」

回答者「ありえます、、」

このような例、実際の現場でもよくあるのではないか？

この質問は、`Is that possible~?`であり、YES or NOの回答が英文法的には正しい。

もちろん、回答者がくれた追加の情報は、それはそれでありがたい。でも、今聞きたいのは「YES or NO」なんだ。その後に、追加の情報をくれた方がありがたい。


## まとめ
小さなことですが、チームで仕事をしているとコミュニケーションというものは大切です。特に、要件まわりは少しズレると大きな齟齬となることが多いと思っています。

シンプルなのですが、意外とみんなできてない。本当にできてないんです！
そして、優秀なエンジニアさんは、ここら辺がとてもよくできています。

私自身も常々、意識するようにしています。

- 結論ファースト
- 英訳して答える

みんなも意識して欲しいなっ♡

## 宣伝
Organizationやってます。

https://qiita.com/organizations/raretech
【AWS-SCS】VPC DHCPオプション

## VPCのDHCPオプションとは？
 AWS-SCSの資格勉強中に理解が難しかった内容について、実際にハンズオンでやってみることにしました。

### VPCのDHCPオプション
 VPC作成時にEC2インスタンスなどのVPC内で作成したリソースが内・外部と通信ができるための仕組み
大きく分けて３つのサーバの設定が行われている。
・DNSサーバ
・NetBIOSサーバ
・NTPサーバ

### DHCPオプションには、２つのオプションセットが存在する。
・デフォルトDHCPオプションセット：各リージョンごとにデフォルトで存在するオプションセット
　
・カスタムDHCPオプションセット：ユーザ側で自由に変更ができるオプションセット
<font color="red">※どちらも適用されていないVPC内のリソースは、何にも通信ができない！</font>



それでは、AWSコンソール画面のどの部分にあたるのか説明していきます。

参考資料

https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/DHCPOptionSetConcepts.html

## 作業手順
1. カスタムDHCPオプションセットの作成
2. VPCにデフォルトで適用されているDHCPオプションセットからカスタムDHCPオプションセットへの変更

### 1. カスタムDHCPオプションセットの作成

・VPCコンソール画面にて、「DHCPオプションセット作成」押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898218/e4e753e9-b9b4-d283-42ac-9d234d26088e.png)

・DHCPオプションセット名：任意

・ドメイン名、ドメインネームサーバ（DNS）：Google Public DNSを使用IP：8.8.8.8、8.8.4.4
参考URL

https://blog.halpas.com/archives/2938


・NTPサーバ：下記の参考URLから任意のNTPサーバのIPアドレスを指定
参考URL

http://www.venus.dti.ne.jp/~yoshi-o/NTP/NTP-Table.html


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898218/b5aaadf8-3be7-e6cf-186a-fd26cc468eb1.png)

・カスタムDHCPオプションセットが作成されたのを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898218/c0b6a3d5-bd91-1987-68d8-13627c1b128c.png)

### 2. VPCにデフォルトで適用されているDHCPオプションセットからカスタムDHCPオプションセットへの変更


・自身で作成しているVPC画面から、「VPCの設定を編集」押下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898218/9e7b9d8d-76d3-c73d-16e0-d3d568170ac9.png)

・デフォルトのDHCPオプションセット→カスタムDHCPオプションセットへ変更する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898218/34dc6d3c-4396-2434-a262-be993706a37d.png)

・カスタムDHCPオプションセットに変更されたのを確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3898218/45c95af1-4806-47e3-be88-211c5642b6a2.png)

## さいごに
AWS-SCS演習問題で出題された「DHCPオプションセットにはどんな機能があるのか」に関して、ハンズオンでの知識習得が出来ました。
是非、間違い等がございましたら、コメントを頂けると嬉しいです
使用 vLLM で MiniCPM-o-2_6 をデプロイする



### はじめに

MiniCPM-o 2.6 は、OpenBMB が提供する高性能な言語モデルの一つです。本記事では、vLLM を使用して MiniCPM-o 2.6 を効率的にデプロイする方法を紹介します。vLLM は、大規模言語モデルの推論を高速化するためのライブラリで、特に GPU リソースを効率的に活用することができます。

### 前提条件

- CUDA がインストールされた Linux 環境
- Python 3.11
- conda または pyenv などの Python 環境管理ツール

### 手順

#### 1. 仮想環境の作成

まず、Python 3.11 の仮想環境を作成し、アクティベートします。

```bash
conda create -n vllm_openbmb python=3.11 -y
conda activate vllm_openbmb
```

#### 2. コードのクローン

vLLM のリポジトリをクローンし、MiniCPM-o 2.6 用のブランチに切り替えます。

```bash
git clone https://github.com/OpenBMB/vllm.git
cd vllm
git checkout minicpmo
```

#### 3. vLLM のインストール

クローンしたリポジトリから vLLM をインストールします。事前コンパイルされたバイナリを使用するために、環境変数 `VLLM_USE_PRECOMPILED` を設定します。

```bash
VLLM_USE_PRECOMPILED=1 pip install --editable .
```

#### 4. Flash-Attn のインストール

Flash-Attn は、Transformer モデルの注意力メカニズムを高速化するためのライブラリです。以下のコマンドでインストールします。

```bash
pip install flash-attn --no-build-isolation
```

#### 5. MiniCPM-o 2.6 の起動

vLLM を使用して MiniCPM-o 2.6 を起動します。以下のコマンドでは、4つの GPU を使用し、ポート 8000 でサーバーを起動します。

```bash
CUDA_VISIBLE_DEVICES=3,1,0,2 \
VLLM_WORKER_MULTIPROC_METHOD=spawn \
vllm serve openbmb/MiniCPM-o-2_6 --trust-remote-code --served-model-name gpt-4 --gpu-memory-utilization 0.98 --tensor-parallel-size 4 --port 8000 --api-key sk-123456
```

#### 6. Chatbox クライアントでのテスト

最後に、Chatbox クライアントを使用して、デプロイした MiniCPM-o 2.6 にアクセスし、テストを行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/8ecb467d-77d1-bcc4-b0f9-e75936c6f1ab.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3932781/d8c8dc91-800c-4035-11c2-51d7a454b0c7.png)


### 参考資料

- [MiniCPM-o GitHub リポジトリ](https://github.com/OpenBMB/MiniCPM-o?tab=readme-ov-file#efficient-inference-with-llamacpp-ollama-vllm)

### おわりに

以上が、vLLM を使用して MiniCPM-o 2.6 をデプロイする手順です。vLLM を活用することで、大規模言語モデルの推論を高速化し、リソースを効率的に利用することができます。ぜひ、実際に試してみてください。

---

**免責事項**: 本記事の内容は、執筆時点の情報に基づいています。最新の情報については、各公式ドキュメントやリポジトリを参照してください。
jQueryでJsonをGETする

## AjaxでJsonをGETする

```html:index.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<script>
		
/****************************/
// {"name":"John","age":13}
/****************************/

$.ajax({
    type: "GET",
    url: "http://localhost/jquery/http-get.json",
    dataType:"json",
})
  
//通信が成功した場合の処理
.done(function(data) {

var data_stringify = JSON.stringify(data);
var json = JSON.parse(data_stringify);

var name = json["name"];
var age = json["age"];

alert(name);
alert(age);

})
  
//通信がエラーになった場合の処理
.fail(function(err) { })
  
//通信状態に関係なく毎回実行される処理
.always(function() { })
		</script>
	</head>
	<body>
	</body>
</html>
```

```json:http-get.json
{"name":"John","age":13}
```
GoogleAppsScriptつかって翻訳する話

どうもAtsu1209です。
最近GASを勉強中なのでメモ程度にGASで翻訳する方法を書いていきます。

# GAS

```js:trans.gs
function trans(){
  let ss = SpreadsheetApp.openById("シートID");
  let sheet = ss.getSheetByName("シート1");

  for(let i = 1; i <= 5; i++){
    const text = sheet.getRange("A" + i).getValue();
    const val = sheet.getRange("B" + i);

    let trans = LanguageApp.translate(text,"en","ja");
    
    val.setValue(trans);
    
  }
}
```
`ss`はスプレッドシートID
`sheet`はシート名

for文でA1〜A5までの翻訳結果をB1〜B5に出力
`LanguageApp.translate`でGoogle翻訳を使う。

# getActiveSheet使わんの?
`getActiveSheet`を使ってスプレッドシートを取得してもいいんですが
なんか動かなかったので直接ID入れて取得しています。

**お わ り**
ChatGPT 4o with Canvasが使えなくなった？なくなった？

UIが変わったようです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/14d001f9-8520-5dfe-a39b-32582b246016.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/5d802b8a-e4c8-d82e-504e-19279088ae9e.png)
異常検知(Anomaly Detection)まとめ

当記事では異常検知のサーベイ論文([A Unifying Review
of Deep and Shallow Anomaly Detection](https://arxiv.org/abs/2009.11732))を元に異常検知について取りまとめました。



## 基本トピック
### 異常検知の概要
異常検知(Anomaly Detection)は正常(normal)な例からかけ離れた異常(anomaly)な例を検出するタスクであり、fail-safeやrobust designを議論する際によく出てきます。

```
・point anomalies
・conditional or contextual anomalies
・group or collective anomalies
・low-level sensory anomalies
・high-level semantic anomalie
```

検知する異常の種類については上記などが挙げられます。それぞれの意味については下図を元に掴むと良いと思います。

![anomaly_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936087/7c18793a-54db-64cb-bbc4-ca90b97b6e5e.png)
An illustration of the types of anomalies(異常検知サーベイ論文 Fig.2)

point anomaliesとgroup or collective anomaliesは左上の図から理解することができます。point anomaliesは一点だけが異常な場合、group or collective anomaliesはグループに属する何点かが異常な場合をそれぞれ指します。conditional or contextual anomaliesは左下の図から理解することができ、Conditionalはトレンド(時系列)の一点だけが異常な場合、contextualはそもそもトレンド全体が異常な場合をそれぞれ指します。

Low-levelとHigh-levelについてはDeepLearningの文脈でよく議論され、Low-levelは欠損や文字のtypoなどを指す一方で、High-levelはエッジのようなpixel-levelの変化に対応します。

また、異常検知はchallengingなタスクであり、このことは下記に起因します。

```
・正常な例のばらつきが多い
・異常な例のサンプルが少ない
・異常な例自体もばらつきが大きくmodelを作るのが難しい。
```


### 異常検知の式定義
データ空間$\mathcal{X} \in \mathbb{R}^{D}$における正常(normality)の分布を$\mathbb{P}^{+}$、$\mathbb{P}^{+}$に対応する確率密度関数(pdf; probability density function)の$p^{+}(\mathbf{x})$のように定義します。

このとき、データ空間上のデータ点$\mathbf{x} \in \mathcal{X}$を元に異常(anomaly)の集合を下記のように定義します。


```math
\mathcal{A} = \{ \mathbf{x} \in \mathcal{X} | p^{+}(\mathbf{x}) \leq \tau \}, \quad \tau \geq 0
```

上記の$\tau$は正常か異常かを判断する閾値(threshold)であり、p^{+}(\mathbf{x})$が十分に低ければ異常と判断すると解釈すれば良いです。以下、ここでの数式表記を元にpoint anomaliesなどを数式で表します。

#### point anomaliesの式定義
```math
\mathbf{x} \in \mathcal{A}
```

point anomaliesは異常の集合の$\mathcal{A}$を元に、上記のように定義することができます。

#### conditional or contextual anomalies
contextual anomaliesを取り扱うにあたっては、確率分布$\mathbb{P}^{+} \equiv \mathbb{P}^{+}_{X|T}$に対応する条件付き(conditional)の確率密度関数$p^{+}(\mathbf{x}|t)$を定義すれば良いです。

$t$は時系列(Time-series)に対応しており、文脈(contextual)を条件付き確率(conditional probability)の形式で表すと理解すれば良いと思います。



## 異常検知の分類
![anomaly_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936087/d153a6a4-5e1b-5de6-161a-e21ed5893011.png)
Anomaly detectionの手法①(異常検知サーベイ論文 Fig.1)

![anomaly_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3936087/cdedb012-1cc2-589b-dcde-5dd1c8596577.png)

Anomaly detectionの手法②(異常検知サーベイ論文 Fig.5)

異常検知の分類については上の2つの図を元に理解すると良いです。以下ではサーベイ論文の目次に対応して、「Probabilistic」、「Classification」、「Reconstruction」の順にそれぞれ確認します。


### Probabilistic Model

### Classification

### Reconstruction Model
Windows で一時的なアクセスブロック方法まとめ

ファイアウォールによって特定のIPやドメインへのアクセスがブロックされてしまった際の動作をチェックしたい時があり、自分用としてメモ。

# Edge, Chrome のデベロッパーツール（F12）で一時的にブロック

## 手順：
1. EdgeまたはChromeで F12キー を押して「デベロッパーツール」を開く
2. 「Network」タブ を開き、ページをリロード
3. ブロックしたいリクエストを右クリックして 「Block request domain」 を選択
4. 該当のドメインがブロックされ、再読み込みすると適用される。 解除したい場合は、「Unblock」 をクリック

# Windows「hosts」ファイルを編集（OS全体に影響）

## 手順
1. メモ帳を管理者として開く
2. C:\Windows\System32\drivers\etc\hosts を開く
3. ファイル末尾に「127.0.0.1 example.com」を追加
4. 保存後、コマンドプロンプトで「ipconfig /flushdns」を実行
5. 解除するときは、該当行を削除して保存
【ChatGPT】コンコルド効果の回避方法をPromptにしました。


　どうも、カーブミラーです。

　今回は、コンコルド効果の回避方法をPromptにしました。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像は✘✘✘。　あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　ではさっそく、【本題】です。

　今回は、
　　コンコルド効果の回避方法を
　　　Promptにしました。

　こちらの記事を参考にしています。
　　[“前向きな損切り”できてますか？　あなたを邪魔する『コンコルド効果』から抜け出す5つのステップ](https://studyhacker.net/concorde-effect)

　『コンコルド効果』とは
　　どんな効果のことなのでしょうか？
>（ChatGPT翻訳）
>コンコルド効果とは、過去に投じた時間や費用（サンクコスト）を惜しむあまり、これ以上続けても損失が拡大すると分かっていても投資や行動を止められない心理的傾向を指します。名前の由来は、商業的に失敗した超音速旅客機「コンコルド」の開発です。合理的な判断を妨げるこの効果を防ぐには、損切りや撤退基準の設定、ゼロベース思考の活用が有効です。

　リスクを恐れて
　　不合理な前進を
　　　してしまう心理的な傾向、
　　　　なのかな？

　それを回避するには
　　どうしたらいいのか？

　そこで
　　回避方法とスケジュールを
　　　教えてくれるPromptを
　　　　作成してみました。

　こちらがそのPrompt。
　　＊＊＊に問題を入力して、
　　　送信してください。
```Text:コンコルド効果の回避方法Prompt
問題「＊＊＊」を解決するための具体的な回避方法：  

1. 感情を切り離す: 問題について感情的な要素を分離し、具体的な課題を特定する。問題に関連するデータや事実を書き出し、感情に左右されずに分析する。  
2. 目標を明確化する: 問題の解決によって達成したい理想の状態を具体的に定義する。達成するための短期的および長期的な目標を設定する。  
3. 選択肢を整理する: 問題に対するすべての可能な解決策を洗い出し、それぞれの選択肢のメリットとデメリットを比較検討する。  
4. 小さな行動から始める: 問題の解決に向けて取り組む最初の小さな行動を決め、実行に移す。小さな成功体験を積み重ねることでモチベーションを維持する。  
5. 専門家や信頼できる人に相談する: 問題に対する客観的なアドバイスや視点を得るために、専門家や信頼できる人に相談し、意見を取り入れる。

総合的なスケジュールをお願いします。具体的な日数は不要です。
```

　ですが、
　　このPromptで出てくるのは
　　　参考程度のものです。

　　深堀りの必要が
　　　あるかと思います。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
【Django】Formに初期値を設定する方法


# DjangoのFormに初期値を設定する方法

https://www.nblog09.com/w/2019/05/18/django-form-initial/

DjangoのFormで初期値を設定する方法は複数ありますが、ここではセッションデータを活用し、画面表示時にフォームへ初期値をセットする例を示します。  
サッカーの管理システムを想定し、「PlayerSearchForm」や「TeamSearchForm」などで選手やチームを検索する際に初期値をセットするケースをイメージしてみてください。

---

## 利用例1（PlayerSearchFormの場合）

```python
def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    # セッションから検索条件を取得。見つからなければデフォルト値を設定。
    initial_data = self.request.session.get('player_search_data', {
        'injured': True,
        'loaned_out': False,  # たとえば「ケガ中の選手のみ表示」とか「期限付き移籍中の選手は表示しない」など
    })
    context['form'] = PlayerSearchForm(initial=initial_data)
    players = context['players']

    # 選手の入団日や契約満了日をフォーマット
    for player in players:
        player.formatted_join_date = (
            player.join_date.strftime('%Y/%-m/%-d') if player.join_date else None
        )
        player.formatted_end_date = (
            player.end_date.strftime('%Y/%-m/%-d') if player.end_date else None
        )

    return context
```

1. **セッションデータの取得**  
   `self.request.session.get('player_search_data', {...})` で、セッションに保存された検索条件を取得し、なければデフォルト値を用意します。  
2. **初期値をFormへ渡す**  
   `PlayerSearchForm(initial=initial_data)` のように、初期値をフォームインスタンスに設定します。  
3. **画面上での表示**  
   テンプレートでフォームを表示すると、指定した初期値がチェックボックスやテキストボックスに反映されます。

---

## 利用例2（TeamSearchFormの場合）

```python
def get_context_data(self, **kwargs):
    context = super().get_context_data(**kwargs)
    form_initial_data = {'name': self.request.session.get('name', '')}
    context['form'] = TeamSearchForm(initial=form_initial_data)  # 初期値をフォームに渡す
    return context
```

- セッションから `name` を取り出し、フォームの初期値として設定します。  
- たとえば、前回検索したチーム名をセッションに保存しておき、ページ再訪問時に同じチーム名を初期表示するように使えます。



## まとめ

Djangoでは、フォームに初期値を設定する方法がいくつかありますが、セッションと組み合わせることで「前回の検索条件を再度表示する」「デフォルトの検索条件をいつでも同じ状態で提供する」など、ユーザーにとって使い勝手の良いインタ
特徴量エンジニアリングにおけるエンコーディング手法の完全ガイド

データサイエンスや機械学習において、モデルのパフォーマンスを最大限に引き出すためには、適切な特徴量エンジニアリングが欠かせません。その中でも、カテゴリデータのエンコーディングは非常に重要なプロセスです。本記事では、カテゴリ変数を数値に変換するさまざまなエンコーディング手法をわかりやすく解説します。
※この記事は、ChatGPTの出力を基に作成しています。

---

### エンコーディング手法の種類

カテゴリ変数を数値化するエンコーディング手法は、以下のように分類されます。それぞれの手法には、利点と欠点があるため、目的やデータの性質に応じて選択することが重要です。

---

#### **1. ラベルエンコーディング (Label Encoding)**
カテゴリを整数値に変換するシンプルな方法です。

- **例**: `['赤', '青', '緑'] → [0, 1, 2]`
- **利点**: 簡単で実装が容易。
- **欠点**: カテゴリ間に順序関係が暗黙的に導入され、モデルに悪影響を与える可能性がある。

---

#### **2. ワンホットエンコーディング (One-Hot Encoding)**
カテゴリごとに新しい列を作成し、カテゴリが存在する場合に1、それ以外を0とします。

- **例**: `['赤', '青', '緑'] → [[1, 0, 0], [0, 1, 0], [0, 0, 1]]`
- **利点**: 順序のないカテゴリデータに適している。
- **欠点**: 次元数が増加する（カーディナリティの問題）。

---

#### **3. ターゲットエンコーディング (Target Encoding)**
カテゴリをターゲット変数（例えば、回帰の目的変数）の平均値で置き換えます。

- **例**: `カテゴリA → 平均ターゲット値 (例: 0.7)`
- **利点**: 高次元カテゴリデータに対応可能。
- **欠点**: データリークのリスクがあり、クロスバリデーションが必要。

---

#### **4. 頻度エンコーディング (Frequency Encoding)**
各カテゴリの出現頻度や割合で置き換える方法です。

- **例**: `['赤', '赤', '青'] → [2, 2, 1]`
- **利点**: データ分布の情報を保持。
- **欠点**: 高次元カテゴリデータでは区別が難しい場合がある。

---

#### **5. バイナリエンコーディング (Binary Encoding)**
カテゴリを整数に変換し、その値をバイナリ形式に変換してエンコードします。

- **例**: `['赤', '青', '緑'] → [001, 010, 011]`
- **利点**: ワンホットエンコーディングより次元数を削減できる。
- **欠点**: 解釈が難しい。

---

#### **6. エンベディング (Embedding)**
カテゴリ変数をディープラーニングの手法で学習し、密なベクトルとして表現します。

- **例**: `カテゴリ → ベクトル [0.1, 0.5, -0.3]`
- **利点**: 高次元データに対する表現力が高い。
- **欠点**: モデル学習が必要。

---

#### **7. オーダーエンコーディング (Ordinal Encoding)**
順序があるカテゴリ変数を、その順序に基づいて整数値に変換します。

- **例**: `['低', '中', '高'] → [1, 2, 3]`
- **利点**: 順序データを正確に表現可能。
- **欠点**: 順序の定義が適切でない場合、モデルに悪影響を与える。

---

#### **8. カウントエンコーディング (Count Encoding)**
各カテゴリの出現回数で置き換える方法です。

- **例**: `['赤', '青', '赤'] → [2, 1, 2]`
- **利点**: 実装が簡単。
- **欠点**: 頻度エンコーディングと同様に情報損失の可能性がある。

---

#### **9. ハッシュエンコーディング (Hashing Encoding)**
固定サイズのハッシュ関数を用いてカテゴリをエンコードします。

- **利点**: 高次元データにも対応可能。
- **欠点**: ハッシュ衝突のリスクがある。

---

#### **10. トークン化 (Tokenization)**
テキストデータを分割し、数値ベクトルに変換します（主に自然言語処理で使用）。

- **利点**: テキストデータの処理に適している。
- **欠点**: 前処理の複雑さ。

---

#### **11. ピボットエンコーディング (Pivot Encoding)**
複数の特徴量を組み合わせて新しいカテゴリ変数を生成します。

- **利点**: 相互作用を考慮できる。
- **欠点**: 計算コストが高くなる場合がある。

---

### まとめ

エンコーディング手法はデータの性質やモデルの要件によって選択する必要があります。以下を考慮して選択するとよいでしょう。

1. カテゴリ数（高次元かどうか）
2. 順序の有無
3. モデルの種類（線形モデルか非線形モデルか）
4. データリークのリスク

適切なエンコーディング手法を選び、データの情報を最大限活用しましょう。
【pygbag-builder】半自動でpygameをブラウザゲームにするモジュールを作ってみた

[![PyPI Downloads](https://static.pepy.tech/badge/pygbag-builder)](https://pepy.tech/projects/pygbag-builder)

https://github.com/prosamo/pygbag-builder

※この記事はREADMEの内容を日本語で書いたものです。

## はじめに
　以前公開した[こちらの記事](https://qiita.com/Prosamo/items/de12a90ba026b7517d2a)の手順を半自動化したので、紹介します。「半」自動化とした理由は、手順通りにユーザーに操作してもらう必要がある点と、複雑なプログラムだと、ソースコードの置換が、モジュールの機能のみでは、十分に行われない場合があるためです。（具体的にはlambdaを使ってwhileループを含む関数を呼び出す場合など）そもそもは手動で全てをやらなければならないわけなので、複雑なゲームの場合も、使わないよりマシではあります。

## 準備
### ファイル関係
　名前は何でもいいのでプロジェクト用のフォルダを作りましょう。そして、その中に必要なファイルを入れます。その際に、メインファイルを`main.py`にすることと、`main.py`のなかで、最初に呼び出されるmain関数を作っておくことだけ注意してください。メインのファイル以外には、特に制限はありません。以下は一例です。

 ```python:main.py
import pygame, sys
import module
pygame.init()
screen = pygame.display.set_mode((512, 512))
pygame.display.set_caption('template')
clock = pygame.time.Clock()

class Class:
    def __init__(self):
        pass
    def loop(self):
        while True:
            break
instance = Class()

def loop():
    while True:
        break


def main():
    color = 0
    while True:
        screen.fill((color, color, color))
        color = min(255, color+1)
        loop()
        instance.loop()
        module.loop()
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
        pygame.display.update()
        clock.tick(30)


if __name__ == '__main__':
    main()
```

```python:module.py
def loop():
    while True:
        break
```
### インストール
```sh
pip install pygbag-builder
```

これで準備完了です。

## 手順
### Step1
プロジェクト用のフォルダに移動してください。そこで以下のコマンドを使います
```
python -m pygbag_builder main_flow
```
これをすると、pygbagを使えるように、whileループを含む関数をasyncで定義し直したり、色々弄ったファイルが`pygbag_builder_build`というフォルダの中に生成されます。あと`pygbag.yml`っていうのも一緒に作ります。

### Step2
ここからはGitHub APIを使うので、トークンが必要になります。
GitHubのプロフィール欄からSettings → developer setting → Personal access tokenと進んで下さい

[Repository access] `All repositories`にチェック

[Permissions]
以下のPermissionの設定を`Read and Write`にする
- Actions
- Administration
- Contents
- Pages
- Webhooks
- Workflows 

これでトークンが取得できたと思うので次のコマンドを使ってください
```sh
python -m pygbag_builder make_repo
```
案内通りにトークン、ユーザー名、リポジトリ名を入力したら、リポジトリを作成してくれます。

:::note warn
処理のタイミング次第で、ワークフローのrunだけ上手くいかないことがあるので、その際は、もう一回こちらを実行してもらえればと思います。リポジトリが既に存在するためエラーが出ますが、特に影響はありません。もしくはGitHubのActionから直接`pygbag_build`をrunしてもいいです。
:::

### Step3
ワークフローのrunが完了したことを確認してから次のコマンドを実行してください。
```sh
python -m pygbag_builder set_page
```
また案内通りにトークン、ユーザー名、リポジトリ名を入力します。

　これで勝手にブランチをgh-pagesというのに設定してくれるので、ちょっと待てば、リポジトリのSettings→pagesからゲームのurlにアクセスできます。

## 最後に
　ここまで読んで下さりありがとうございました。pygbagがあんまり日本だと流行らなそうだと思ったので、そもそも海外の人向けに作ったモジュールではありますが、記事のネタとしては面白いかなと思ったので、公開しました。この記事を読んで、pygbagとか、このモジュールとか気になった人は、そんなに手間じゃないと思うので、試してみてもらえると嬉しいです。

　このくらいのシンプルなゲームならすぐ公開できると思います

 https://prosamo.github.io/tank-game/
【備忘録】.envファイルってなに？


## 1. `.env` ファイルとは
`.env`ファイルは、環境変数を定義するための設定ファイルです。開発環境やステージング、本番環境など、各種環境で異なる設定を簡単に管理するために使用されます。通常、以下のようにキーバリュー形式で定義されます。

```
KEY=value
DATABASE_URL=mysql://user:pass@localhost:3306/mydb
SECRET_KEY=your_secret_key
```

## 2. `.env` ファイルの用途
`.env`ファイルは、アプリケーションの設定や機密情報（APIキー、データベース接続情報など）を外部から管理するために利用されます。これにより、ソースコードを変更せずに環境設定を切り替えることができ、セキュリティリスクを軽減できます。

### 主な用途
- **APIキーやトークンの管理**：APIキーや認証トークンなどの機密情報をソースコードから分離し、外部に保存します。
- **環境依存の設定**：ローカル、ステージング、本番など異なる環境ごとに設定を切り替えます。
- **デプロイ時の設定**：環境変数を使って、デプロイ先の環境設定を簡単に適用します。

## 3. 環境変数の設定方法
### 3.1 ローカル環境での使用
ローカルで開発する場合、`.env`ファイルをプロジェクトのルートディレクトリに置きます。アプリケーションがこのファイルを読み込んで、設定された環境変数を使用します。

例：

```
# .envファイル
DATABASE_URL=mysql://user:password@localhost:3306/mydb
SECRET_KEY=supersecretkey
```

### 3.2 本番環境での使用
本番環境では、`.env`ファイルを使用することは推奨されません。代わりに、クラウドプロバイダやCI/CDツールで環境変数を管理します。

## 4. `.env` ファイルの読み込み
`.env`ファイルは、一般的には専用のライブラリを使ってアプリケーションに読み込ませます。

### 4.1 Pythonでの読み込み
Pythonでは、`python-dotenv`ライブラリを使用して`.env`ファイルを読み込みます。

```python
from dotenv import load_dotenv
import os

# .envファイルを読み込む
load_dotenv()

# 環境変数の取得
db_url = os.getenv('DATABASE_URL')
secret_key = os.getenv('SECRET_KEY')
```

### 4.2 Azure Functionsでの使用
Azure Functionsでは、ローカル開発時に`.env`ファイルを読み込むために`python-dotenv`を使うことが推奨されますが、本番環境ではAzure PortalやARMテンプレートで環境変数を設定します。

```python
from dotenv import load_dotenv
import os

# 環境変数を読み込む
load_dotenv()
```

## 5. 本番環境での環境変数設定
本番環境での環境変数は、`.env`ファイルを使わずにAzure PortalやCI/CDツールを利用して管理します。

### 5.1 Azure Portalの「Application Settings」から設定
Azure Functionsの本番環境で環境変数を設定する場合、Azure Portalから行います。

#### 手順
1. Azure Portalにログインし、Function Appを選択。
2. 左側のメニューから「構成」を選択。
3. 「アプリケーション設定」のタブで環境変数を追加、編集。

### 5.2 CI/CDツールでの設定
CI/CDパイプラインを利用して、デプロイ時に環境変数を自動的に設定します。たとえば、Azure DevOpsやGitHub Actionsを使用して、デプロイ先に適用します。

```yaml
# GitHub Actionsの例
jobs:
  deploy:
    steps:
      - name: Set environment variables
        run: echo "API_KEY=${{ secrets.API_KEY }}"
```

### 5.3 ARMテンプレートやBicepを使った設定
Azure Resource Manager (ARM) テンプレートやBicepファイルを使って、環境変数をデプロイ時に設定します。

```json
{
  "type": "Microsoft.Web/sites",
  "apiVersion": "2021-02-01",
  "name": "[variables('functionAppName')]",
  "properties": {
    "siteConfig": {
      "appSettings": [
        {
          "name": "API_KEY",
          "value": "[parameters('apiKey')]"
        }
      ]
    }
  }
}
```

### 5.4 Azure App Configurationの利用
Azure App Configurationを使って、環境設定や機密情報を集中管理できます。

#### 主な特徴
- 環境ごとに設定を分けることができる。
- バージョニングやキーのローテーションが容易。

## 6. セキュリティ上の注意点
`.env`ファイルには機密情報が含まれるため、以下の点に注意してください。

- **バージョン管理に含めない**：`.gitignore`に`.env`ファイルを追加し、リポジトリにプッシュしないようにします。
- **アクセス権の管理**：環境変数やAPIキーにアクセスできるユーザーやサービスを適切に制限します。
- **定期的なローテーション**：APIキーやパスワードは定期的に変更し、リスクを最小限に抑えます。

## 7. トラブルシューティング
- **環境変数が読み込まれない**：`load_dotenv()`が正しく呼び出されているか、`.env`ファイルが適切な場所にあるか確認します。
- **ローカルでは動作するが本番で動作しない**：本番環境では、`.env`ファイルを使わず、Azure PortalやCI/CDで環境変数が設定されているか確認します。
UIライブラリ（Vuetify・ElementPlusなど）でスタイルを正しく適用する方法


# UIライブラリのスタイル適用問題と対処法

UIライブラリ（VuetifyやElementPlusなど）を使用していると、想定どおりにスタイルが適用されずに困るケースがあります。ここでは、そうした問題に直面した際の対処法を紹介します。

## スタイルの適用問題

多くの場合、ライブラリが生成するHTML要素やクラス名が独自構造・スコープになっており、通常のCSS選択子だけではスタイルが上書きできないことが原因です。これにより、意図したデザインが反映されないという問題が発生します。

## 対処法

### 1. `:deep()` セレクタの使用

Vue.jsのスコープ付きCSS（`<style scoped>`）を使っている場合は、`:deep()` セレクタを利用すると、親コンポーネントから子コンポーネントの要素に対してスタイルを適用できます。ライブラリが生成する内部要素やクラスにもアプローチしやすくなります。

### 2. 開発者ツールの活用

ブラウザの開発者ツールを使用し、実際に適用されているクラス名や要素構造を確認します。ターゲットとなるクラスや要素を正確に把握した上でスタイルを上書きすることで、狙ったデザインを実現しやすくなります。

### 3. 詳細度の向上

CSSの詳細度（特異性）を上げることで、他のスタイル定義よりも優先して適用できるようにします。たとえば、セレクタの階層を深くする、ID指定を使うなどの方法がありますが、複雑になりすぎないよう注意が必要です。

## 実際の例

以下は、ElementPlusのセレクトボックスにカスタムスタイルを適用する例です。

```css
:deep(.el-select .el-input .el-select__caret.el-icon) {
  color: black;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: #9EA5F2;
  color: white;
  font-weight: normal;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  display: none;
}
```

- `:deep()` セレクタを使い、`el-select` 内部の特定要素へカラー変更を適用  
- `.el-select-dropdown.is-multiple .el-select-dropdown__item` などのクラスを直接指定してスタイルを上書き  

## まとめ

UIライブラリを導入すると、独自のクラス名や要素構造が挿入されるため、思い通りにスタイルを反映させるのが難しくなる場合があります。しかし、`:deep()` セレクタや詳細度調整、開発者ツールの活用などを組み合わせれば、自由度の高いデザインを実現することができます。実際のプロジェクトでは、検証ツールでクラス名や要素階層をよく確認しながら、最適な方法を探ってください。私もまだ模索中
[Python基礎] ネストされた辞書から特定のキーを使ってデータを取得する方法


# ネストされた辞書からデータへのアクセス方法

次のように、年と月をキーにしたネストされたPython辞書があります。ここでは、特定の月のデータへアクセスする方法を示します。

```python
data = {
    '2021': {
        '01': 'January data for 2021',
        '02': 'February data for 2021',
    },
    '2022': {
        '01': 'January data for 2022',
        '02': 'February data for 2022',
    }
}
```

## データへのアクセス

### 2021年1月のデータにアクセス
```python
print(data['2021']['01'])
```
実行結果：  
```
January data for 2021
```

### 2022年2月のデータにアクセス
```python
print(data['2022']['02'])
```
実行結果：  
```
February data for 2022
```

## まとめ
このように、ネストされた辞書を利用すると、年と月といった階層構造でデータを管理できます。正しいキー（年 → 月）の順でアクセスすることで、必要な情報を簡単に取り出すことが可能です。
【Python】正規表現を使って全角数字の有無をチェックする方法


# `check_zenkaku_digit` メソッド解説

https://udemy.benesse.co.jp/development/python-work/python-regular-expression.html


「正規表現の使いみちがよくわからない」という声を新人エンジニア聞くことがあります。ここでは、全角数字を含むかどうかを判定する関数を例に、正規表現の基本的な仕組みを解説します。

```python
import re

def check_zenkaku_digit(hankaku_number):
    return bool(re.search(r'[０-９]', hankaku_number))
```

## 1. `bool()` 関数

- **概要**: 任意のオブジェクトの真偽値を返す関数です。  
- **ポイント**: `None` や空文字列、空のリストは `False` として扱われ、その他は `True` として扱われます。

```python
print(bool(1))          # True
print(bool(0))          # False
print(bool('Hello'))    # True
print(bool(''))         # False
print(bool([]))         # False
print(bool([1, 2, 3]))  # True
```

## 2. `re.search()` 関数

- **概要**: 正規表現パターンを用いて、文字列の中から最初にマッチする部分文字列を探します。  
- **ポイント**: 一致が見つかるとマッチオブジェクトを返し、見つからない場合は `None` を返します。

```python
import re

check_pattern = r'abc'
text = '123abc456'
match = re.search(check_pattern, text)

if match:
    print('マッチしました:', match.group())  # マッチした部分を表示
else:
    print('マッチしませんでした')
```

#### 実行結果

```
マッチしました: abc
```

## 3. `r'[０-９]'` (正規表現パターン)

- **概要**: 全角数字（０から９）にマッチする正規表現パターンです。
- **ポイント**: `[]` を使った範囲指定で、連続する全角数字をカバーします。`r` は **生文字列 (raw string)** を意味し、エスケープシーケンスを無視します。

```python
import re

pattern = r'[０-９]'
text = '123４５６'
match = re.search(pattern, text)

if match:
    print('マッチしました:', match.group())
else:
    print('マッチしませんでした')
```

#### 実行結果

```
マッチしました: ４
```

---

## まとめ: `contains_zenkaku_digit` メソッド

上述した仕組みを組み合わせると、以下のようにして全角数字を検出できます。

```python
def contains_zenkaku_digit(hankaku_number):
    return bool(re.search(r'[０-９]', hankaku_number))
```

### 解説

1. `re.search(r'[０-９]', hankaku_number)`  
   - 文字列 `hankaku_number` 内に全角数字が含まれているかを検索します。  
   - 一致する文字があればマッチオブジェクト、なければ `None` を返します。

2. `bool()`  
   - `re.search()` の戻り値を真偽値に変換します。  
   - マッチオブジェクト ⇒ `True` 、 `None` ⇒ `False` 。

#### 使用例

```python
print(contains_zenkaku_digit('145'))     # False (全角数字なし)
print(contains_zenkaku_digit('１２５'))  # True  (全角数字あり)
```

これにより、文字列に全角数字が含まれているかどうかを簡単に判定できるようになります。
リストとイテレータの違い

曖昧になりがち
追記：iterableとiteratorの違いだとコメントでご指摘いただきました。ありがとうございます！

https://teratail.com/questions/183869

> ・リストは順番が決められたデータの集団を表すデータ構造
> ・イテレータはデータの集団に対し順番にアクセスしていくためのオブジェクト


## イテレータをリストに変換する目的
その後のコードでデータに容易にアクセスできるようにするため。Pythonのイテレータには特徴があり、それは一度しか要素にアクセスできないという点。


## イテレータのままでは以下のような制約がある
1. **一度しか走査できない**: イテレータは一度走査すると、その後再度要素を取り出すことができない。リストは複数回アクセスできるのに対し、イテレータは基本的に「一方向に走る列車」のようなもので、一度走り出すと後戻りできない。
2. **ランダムアクセスができない**: イテレータは通常、インデックスを使ってランダムにアクセスできない。例えば、`result_list[0]` のように特定のインデックスに直接アクセスすることができないため、ループで順に要素を取り出す必要がある。

コード例で考えると、`result_list[0].get('customer_id')` のような特定の検索結果にアクセスするためには、イテレータではなくリストの方が便利。リストに変換することで、ランダムアクセスや複数回のアクセスが可能になる。

要するに、 **イテレータをリストに変換することで、その後のコードで検索結果に繰り返しアクセスしやすくできる** 。
【ネットワーク】TCP/IP トランスポート層

# はじめに
こんにちは。アメリカで独学でエンジニアを目指している者です。
現在ネットワークについて学んでいるのですが、その中でも本日はTCP/IPのトランスポート層について見ていきたいと思います

## トランスポート層の役割
トランスポート層は、エンドホスト同士のアプリケーション間通信を制御する層です。IPアドレスだけでなく ポート番号 を用いることで、同じホスト上で動作している複数のアプリケーションを識別し、どのアプリケーション宛てのデータかを区別します。また、通信の信頼性やデータ転送の効率化などを実現するための機能を提供します。

  * ポート番号
  同一ホスト内で、複数のアプリケーションが同時に通信できるようにする識別子。例えば、HTTPはポート番号80、HTTPSは443を使用します。

  * 信頼性の確保 / フロー制御
  データの再送制御や、送信速度の調整などにより、ネットワークトラフィックを円滑にし、通信の信頼性を保ちます（主にTCPで提供）。

## トランスポート層の主要プロトコル
### TCP (Transmission Control Protocol)
TCPは、トランスポート層で信頼性の高い通信を実現する代表的なプロトコルです。主な特徴は以下のとおりです。
  1. コネクション型
  通信を始める前に、送信元と宛先の間で仮想的な通信路（コネクション）を確立します。

    * 3ウェイハンドシェイク (Three-way handshake)
      * SYNパケット → SYN+ACKパケット → ACKパケット
        この3往復によって通信相手が存在することを確認し、通信路を確立します。
  2. データの順序制御 / 再送制御
  送信したデータが正しい順番で受信されるようにシーケンス番号を割り振り、パケットが欠落・破損した場合には再送を行います。

  3. フロー制御 (Flow Control)
  受信側の処理能力に合わせて送信速度を調整し、パケットの損失やバッファ溢れを防ぎます。

  4. エラー検出
  TCPヘッダに含まれるチェックサムによって、データ破損を検出します。

TCPは信頼性が高い反面、コネクションの確立や再送処理などのオーバーヘッドが大きく、通信に遅延が生じやすいという特徴があります。Web通信やメール送信など、確実にデータを届けたい 場合に多く利用されます

### UDP (User Datagram Protocol)
UDPは、TCPと比べてより軽量かつシンプルなプロトコルです。主な特徴は以下のとおりです。

  1. コネクションレス型
  事前のコネクション確立を行わずに、データを「投げっぱなし」で送信します。

  2. 再送制御・順序制御が基本的にない
  TCPと異なり、パケットが届かなかったり、順番がずれたりしても自動的に修正は行われません。

  3. 低オーバーヘッド / 低遅延
  コネクションを張る手続きや再送制御がないため、処理が軽く、リアルタイム性が求められる通信に向いています。

UDPはリアルタイム性が重視される 音声通話（VoIP） や 動画配信、またはDNSの問い合わせなどで多用されます。多少のパケット損失があっても問題になりにくいケースで有効なプロトコルです。

# まとめ
TCP/IPの トランスポート層 は、アプリケーション間の通信制御を担う非常に重要な役割を果たしています。TCPとUDPという2つの代表的なプロトコルを使い分けることで、信頼性を求める通信・リアルタイム性を求める通信の両方に対応できるようになっています。
  * TCP : 信頼性重視、3ウェイハンドシェイクや再送制御などを行う
  * UDP : 軽量・低遅延重視、コネクションレスで再送制御を行わない
次回はアプリケーション層について記事にしようと思います。
The application could not be installed: INSTALL_FAILED_INSUFFICIENT_STORAGE The device needs more free storage to install the application

いつも忘れるのでメモ。

```
The application could not be installed: INSTALL_FAILED_INSUFFICIENT_STORAGE The device needs more free storage to install the application
```
というエラーはエミュレーターの内部ストレージがいっぱいになっている時に表示される。

## 解決法
下記のいずれかで対応可能。

### 1. Device Managaer > 該当のデバイスの3点リーダー > Wipe Data からエミュレーター内のデータを削除する

![wipeのコピー.tiff](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1274260/168ad164-7f6e-0915-b089-4a0acfc5c4d1.tiff)


ただしこの方法の場合はデータが全て消えるため、インストール済みのアプリなども消える点に注意


### 2. Device Managaer > 該当のデバイスの3点リーダー > Edit > internal storage: の値を変更する


![wipeのコピー2.tiff](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1274260/4c043207-3461-f33a-791e-d07733dc1c91.tiff)
![intのコピー.tiff](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1274260/11f09b4c-6a93-9856-4034-e582f3222a92.tiff)
【Django】クエリパラメータ：セッションの活用とURLの生成


# Djangoでのクエリパラメータの取得と生成

## クエリパラメータの取得

- `self.request.GET` を使用すると、URLのクエリパラメータ（`?` 以降の部分）を辞書形式で取得できます。
- たとえば、アクセスURLが `http://localhost/players/list/?name=MESSI` の場合、`name` パラメータは `MESSI` として取得されます。



## コード例

下記は、クエリパラメータが存在しない場合（初めてページにアクセスした時やセッションが切れている時）の処理を示す `PlayersListView` の `get` メソッド例です。

```python
from django.shortcuts import redirect
from django.urls import reverse
from django.http import HttpResponseRedirect
from django.views.generic import ListView
from django.utils.http import urlencode

class PlayersListView(ListView):
    template_name = 'players_list.html'
    model = Players
    context_object_name = 'players'
    paginate_by = 20

    def get(self, request, *args, **kwargs):
        # クエリパラメータが存在しない場合の処理
        if not self.request.GET:
            # セッションから検索データを取得
            player_search_data = self.request.session.get('player_search_data')
            if player_search_data:
                # 辞書型データをURLクエリ文字列に変換
                query_param = f"?{urlencode(player_search_data)}"
                # 名前付きURLパターン 'players_list' にクエリ文字列を付与してリダイレクト
                url = reverse('players_list') + query_param
                return HttpResponseRedirect(url)
            else:
                # セッションにデータがない場合、デフォルトのクエリパラメータを設定してリダイレクト
                default_search_query = "?team_id=1&position=Forward&retired=0"
                url = reverse('players_list') + default_search_query
                return HttpResponseRedirect(url)

        # クエリパラメータが存在する場合は、親クラスのgetメソッドを呼び出す
        return super().get(request, *args, **kwargs)
```

### 処理のポイント

1. **セッションから検索データを取得**  
   ```python
   player_search_data = self.request.session.get('player_search_data')
   ```

2. **`urlencode` を使ってクエリ文字列に変換**  
   ```python
   query_param = f"?{urlencode(player_search_data)}"
   ```
   - たとえば `{'name': 'Messi', 'team_id': 10}` といった辞書を `"name=Messi&team_id=10"` のようなクエリ文字列に変換します。

3. **`reverse` 関数を使ったURL生成**  
   ```python
   url = reverse('players_list') + query_param
   ```
   - 名前付きURLパターン `'players_list'` に対応するURLを取得し、クエリ文字列を付与します。

4. **`HttpResponseRedirect` でリダイレクト**  
   ```python
   return HttpResponseRedirect(url)
   ```
   - 生成したURLへリダイレクトします。


## まとめ

- **クエリパラメータ**を取得するには `self.request.GET` を活用し、セッションに保存した検索条件を `urlencode` でクエリ文字列に変換して再利用できます。  
- **`reverse` と組み合わせて URL を生成** し、リダイレクトを行うことで、ユーザーが前回使った検索条件を簡単に再現できます。  
- この仕組みによって、ユーザーが以前検索した条件を自動的に引き継いだり、デフォルトの検索条件を設定したりできます。
SVG アニメーションを表示する

### SVGアニメーションを表示する

#### PowerPointでSVGデータを作成する

```xml:sample1.svg
		<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
			<path d="M362 232 616 232 616 430 362 430ZM563.25 331 414.75 256.75 414.75 405.25Z" fill="yellow" fill-rule="evenodd"/>
			<path d="M563.25 331 414.75 256.75 414.75 405.25Z" fill="blue" fill-rule="evenodd"/>
			<path d="M563.25 331 414.75 405.25 414.75 256.75Z" stroke="" stroke-width="2" stroke-miterlimit="8" fill-rule="evenodd"/>
			<rect x="362" y="232" width="254" height="198" stroke="#042433" stroke-width="2" stroke-miterlimit="8" fill="none"/>
		</svg>
```

```xml:sample2.svg
		<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
			<text font-family="07NikumaruFont,07NikumaruFont_MSFontService,sans-serif" font-weight="400" font-size="57" fill="" transform="translate(312.904 147)">　日向坂46</text>
		</svg>
```

### HTMLとCSSを記述する

```index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      canvas {
        background: #eee;
        display: block;
        margin: 0 auto;
      }
	.logo svg{
	  width: 400px;
	  height: 100%;
	  stroke: blue;
	  fill: transparent;
	  animation-name:dash-animation;
	  animation-duration: 5s;
	  animation-iteration-count: infinite;
	}
	@keyframes dash-animation{
	  0%{
	    stroke-dasharray:0 50;
	    stroke: blue;
	    fill: white;
	  }
	  50%{
	    stroke-dasharray:50 0;
	    stroke: blue;
	    fill: beige;
	  }
	  100%{
	    stroke-dasharray:50 0;
	    fill: skyblue;
	    stroke: blue;
	  }
	}
    </style>
  </head>
  <body>

	<p class="logo">
		<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="250px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
			<path d="M362 232 616 232 616 430 362 430ZM563.25 331 414.75 256.75 414.75 405.25Z" fill="yellow" fill-rule="evenodd"/>
			<path d="M563.25 331 414.75 256.75 414.75 405.25Z" fill="blue" fill-rule="evenodd"/>
			<path d="M563.25 331 414.75 405.25 414.75 256.75Z" stroke="" stroke-width="2" stroke-miterlimit="8" fill-rule="evenodd"/>
			<rect x="362" y="232" width="254" height="198" stroke="#042433" stroke-width="2" stroke-miterlimit="8" fill="none"/>
			<text font-family="07NikumaruFont,07NikumaruFont_MSFontService,sans-serif" font-weight="400" font-size="57" fill="" transform="translate(312.904 147)">　日向坂46</text>
		</svg>
	</p>

  </body>
</html>

```
個人的な備忘録：バインド マウント(bind mount)を言語化するために記事としてアウトプットしてみた

## はじめに

バインド マウント(bind mount)は、LinuxやDockerでデータの共有や効率的なファイルアクセスを実現する便利な仕組みです。

:::note warn
**特にDockerではホストとコンテナ間でデータをやり取りする際に頻繁に利用されます。**
:::

本記事は、その内容を自分用の備忘録としてまとめたものです。***走り書き程度のメモとなりますが、何卒ご容赦ください。***

## 書こうと思ったきっかけ
概念自体はなんとなく理解していたものの、それを相手に伝えたり、自分の言葉で言語化して使うことができていないと感じました。

:::note info
***そのため、苦手なことや言語化が難しいことについては、積極的に記事としてアウトプットしていこうと思い、今回書くことにしました。***
:::

## バインド マウント(bind mount)とは？

バインド マウント(bind mount)とは、LinuxやDockerで使用されるファイルシステムの概念の1つで、特定のディレクトリやファイルを他の場所にマウントする仕組みです。

https://docs.docker.jp/get-started/06_bind_mounts.html#:~:text=%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%20%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%20bind%20mount%20%E3%81%AF,%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

これにより、同じデータに複数の場所からアクセスできるようになります。

## バインド マウント(bind mount)の仕組み

### 通常のマウント:
- ファイルシステム（例: USBデバイス）を特定のディレクトリに関連付けて使用します。
- 例: `/dev/sda1` を `/mnt/usb` にマウント。

### バインドマウント:
- 既存のディレクトリやファイルを、別の場所に「参照」としてマウントします。
- 実体は1つですが、異なるディレクトリから同じデータにアクセス可能。

## バインド マウント(bind mount)のメリット

- 共有データ:
  - 同じデータに複数のディレクトリからアクセスできる。
  - Dockerではホストとコンテナ間のデータ共有に便利。

- 柔軟性:
  - ディレクトリ構造を変更せずに、必要な場所にデータを参照可能。

- 高速:
  - シンボリックリンクよりも高速に動作。

## 実際に使ってみた
ここでは、LinuxとDockerでのバインド マウント(bind mount)の例を具体的に説明します。

### Linuxでの例

以下は、Desktopディレクトリを使用してディレクトリをバインドマウントする例です。

- 元のディレクトリを準備:

まず、Desktop上に元となるディレクトリとファイルを作成します。

```bash
mkdir ~/Desktop/original
echo "Hello, Bind Mount!" > ~/Desktop/original/example.txt
```

- 別のディレクトリにバインドマウント:

次に、バインド先となるディレクトリを作成し、マウントします。

```bash
mkdir ~/Desktop/bind-mount
sudo mount --bind ~/Desktop/original ~/Desktop/bind-mount
```

- 動作確認:
  - `~/Desktop/bind-mount/example.txt` を開くと、`~/Desktop/original/example.txt` と同じ内容が表示されます。
  - データをどちらで更新しても、変更は即座に反映されます。

**実際の検証結果**

```bash
[honda@HONDA-TEST ~]$ cat Desktop/bind-mount/example.txt 
Hello, Bind Mount!
Hello, Bind Mount!
Hello, Bind Mount!
[honda@HONDA-TEST ~]$ cat Desktop/original/example.txt 
Hello, Bind Mount!
Hello, Bind Mount!
Hello, Bind Mount!
```

- アンマウント:

バインドマウントを解除するには、以下のコマンドを実行します。

```bash
sudo umount ~/Desktop/bind-mount
```

### Dockerでの例
Dockerでもバインド マウント(bind mount)はよく使われます。以下はコンテナでホストディレクトリをバインドする例です。

```bash
docker run -d \
  --name my-container \
  -v /host/path:/container/path \
  ubuntu
```

- **`-v /host/path:/container/path`**:  
  - ホストの `/host/path` をコンテナ内の `/container/path` にバインドマウントします。  
  - コンテナ内で作業した内容はホストに反映され、逆も可能です。

### 注意点:
  - **削除の影響**:  
    実体データが1つなので、元のデータを削除するとバインド先からもアクセスできなくなります。
  - **パーミッション**:  
    マウント先でも元のディレクトリの権限が適用されます。
  - **コンテナでの注意**:  
    バインドマウントを使うとホスト側が影響を受けるため、誤操作に注意。

## まとめ
最後まで読んでいただき、ありがとうございました。***今回の記事では、自分の中でも曖昧だった知識を改めて整理し、言語化する形でまとめてみました。***

:::note alert
**本記事の内容はインターネット上の文献などを参考に作成していますが、あくまで個人の備忘録としての位置づけです。その点をご了承ください。**
:::

これからも分からないことに積極的に向き合い、アウトプットを通じて理解を深めていきたいと思います。
WSL+Docker+DevContainersによるフロントエンド開発環境の構築

# はじめに

フロントエンドの開発環境構築について紹介します。
チーム内での開発環境を統一するためにDockerを利用しています。
また、前提としてチームではWindowsPCを利用しています。
この記事では使用言語やフレームワーク、ライブラリなどは紹介しません。
※この記事の内容は[テックブログ](https://uniforce.co.jp/media/blog/9gxjde4s1h/)でも公開しています。

# フロントエンドの開発環境

## WSL + Docker + VSCode + DevContainers

### 準備

VSCodeの拡張機能である[Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)を使って開発環境を構築します。
Dockerコンテナを開発環境とすることで下記のようなメリットがあります。

- OSやNode.jsのバージョン違いによるトラブル防止
- ローカル環境にプロジェクトごとの必要なツールなどをインストールする必要がなくなる

Dockerfileおよびdocker-compose.ymlは下記のようになっています。

```docker:Dockerfile
FROM node:18-alpine

RUN mkdir -p /{プロジェクトディレクトリ名}/node_modules &&\\
chown -R node:node /{プロジェクトディレクトリ名} &&\\
apk add openssh &&\\
apk add git &&\\
apk add keychain

USER node

ENV HOST 0.0.0.0
EXPOSE 3000
```

```yaml:docker-compose.yml
version: '3.8'
services:
  development:
    container_name: {任意のコンテナ名前}
    build: .
    ports:
      - '3000:3000'
      - '6006:6006'
      - '24678:24678'
    working_dir: '/{プロジェクトディレクトリ名}'
    volumes:
      - .:/{プロジェクトディレクトリ名}:cached
      - node_modules_volume:/{プロジェクトディレクトリ名}/node_modules
    tty: true
volumes:
  node_modules_volume:
```
node_modulesのような容量が大きなディレクトリはマウントしているとDockerの動作が遅くなることがあります。
そのため、`npm install`したライブラリはVolumeに保存されるようにしています。

こうすることでDockerの動作も問題なくなり、LinterやFormatterなどの開発時に必要なライブラリも動作させることができます。
また、Dockerfileでインストールしているgitやkeychainについては、開発環境上でのGitコマンドやVSCodeで差分のあるファイルを検知するために利用しています。

### 環境構築の流れ

開発環境構築の流れは下記のようになります。
1. Dockerインストール
2. WSL2 + Ubuntuをインストールして有効化
3. WSL上にリポジトリをクローン
4. Dockerビルド
    - プロジェクトで利用するNode.jsのバージョンアップなどがあれば、Dockerfileを更新してDockerビルドをし直せば良い。
5. Gitなどの設定
6. プロジェクトの初期設定
    - .devcontainerファイルの作成や、Dockerコンテナ上での`npm install`、環境変数ファイルの配置など。

### 注意点

環境構築上での注意点などは下記のようなものがあります。
- WSL上へのGitクローンで128エラーで失敗することがある。
    - GitConfigでクローン先のディレクトリを信頼させることで解決する。
    - 詳細は弊社テックブログの[この記事](https://uniforce.co.jp/media/blog/h8ynsey1rpn/)の記事で解説しています。
- Docker環境とWindowsローカルで予期せぬGit差分が発生することがある。
    - 改行コードの違いによるもので、`.gitattributes`で改行コードを指定することで回避可能。
```bash
* text=auto eol=lf
*.sh text eol=lf
*.bat text eol=crlf
*.cmd text eol=crlf
*.ps1 text eol=crlf
```
- WSLへのメモリ割り当てが少なく、開発中にメモリ不足になることがある。
    - Windowsビルド20175以降ではWSLに割り当てられるメモリがWindowsの50%もしくは8GBの少ない方となる。
        - https://learn.microsoft.com/en-us/windows/wsl/wsl-config#main-wsl-settings
    - WSLへの割り当てメモリを指定することで解消。
        - Dockerコンテナで`free -h`で割り当てられているメモリを確認できる。
    - 下記の手順で割り当て可能
        1. `C:\\Users\\<yourUserName>\\`に`.wslconfig`を作成
        2. 割り当てるメモリを記載
           ```
           [wsl2]
           memory=24GB
           ```
        3. WSLを再起動(`wsl --shutdown`)

### おわりに
Dockerを利用した開発環境について紹介しました。
WSL上にGitクローンしているためSourcetreeを利用すると動作が重いなどの課題もありますが、チームとしては大きな問題なく開発出来ています。
今後も気持ちよく開発していけるように更に改善を重ねていきたいと考えています。
ここまで見ていただき、ありがとうございました。
map, filter, reduceについて Leetcodeを使って調べる!!!

## leetcode : 2635. Apply Transform Over Each Element in Array

### mapとは？
```typescript
const arr: number[] = [1, 2, 3, 4];


const mapped: number[] = arr.map(num => num * 2);

console.log(mapped);  // result: [2, 4, 6, 8]

```

### leetcode : 2635

```typescript
function map(arr: number[], fn: (n: number, i: number) => number): number[] {
    const result: number[] = [];
    for (let i =0; i<arr.length; i++){
        result.push(fn(arr[i],i))
    }
    
    return result;

};


const plusOne = (n: number): number => n + 1;
console.log(map([1, 2, 3], plusOne)); // result: [2, 3, 4]

const plusIndex = (n: number, i: number): number => n + i;
console.log(map([1, 2, 3], plusIndex)); // result: [1, 3, 5]

const constant = (): number => 42;
console.log(map([1, 2, 3], constant)); // result: [42, 42, 42]

```




### pythonの場合

```python
def map_function(arr, fn):
    return [fn(x, i) for i, x in enumerate(arr)]

def plus_one(n, i):
    return n + 1

result = map_function([1, 2, 3], plus_one)
print(result)  # result: [2, 3, 4]
```

### study!
関数を引数で使う場合は今までなかったので知らなかっだが、
この問題通して関数も引数使うことができると知りました。
なお、ラムダ式使うことで短くコード作成することができます。

[参考資料]
https://github.com/vgratsilev/LeetCode/tree/main/Problems/2635.%20Apply%20Transform%20Over%20Each%20Element%20in%20Array
https://leetcode.com/problems/apply-transform-over-each-element-in-array/?envType=study-plan-v2&envId=30-days-of-javascript

## leetcode : 2634. Filter Elements from Array

### filterとは?
```typescript
const arr: number[] = [1, 2, 3, 4, 5];

const filtered: number[] = arr.filter(num => num > 3);

console.log(filtered);  // result: [4, 5]
```

### leetcode : 2634

```typescript
type Fn = (n: number, i: number) => any

function filter(arr: number[], fn: Fn): number[] {

    const result: number[] = [];
    for(let i=0; i<arr.length; i++){
        if (fn(arr[i],i)){
            result.push(arr[i]);
        }
    }
    return result;
    
};

const greaterThan10 = (n: number): boolean => n > 10;

const arr = [0, 10, 20, 30];
console.log(filter(arr, greaterThan10)); 

```

### study!
ifでfilterする時引数として関数を使うことが可能です。

[参考資料]
https://leetcode.com/problems/filter-elements-from-array/description/?envType=study-plan-v2&envId=30-days-of-javascript





## leetcode : 2626. Array Reduce Transformation

### reduceとは?

```typescript
const arr: number[] = [1, 2, 3, 4];


const sum: number = arr.reduce((accum: number, curr: number) => accum + curr, 0);

console.log(sum);  // result: 10

```

### leetcode 2626

```typescript
type Fn = (accum: number, curr: number) => number

function reduce(nums: number[], fn: Fn, init: number): number {

    nums.forEach((number, i) => {
        init=fn(init,number)
    });
    return init
    
}

const nums1 = [1, 2, 3, 4];
const fn1 = (accum: number, curr: number): number => accum + curr;
const init1 = 0;

console.log(arrayReduce(nums1, fn1, init1)); 

```



[参考資料]
https://leetcode.com/problems/array-reduce-transformation/?envType=study-plan-v2&envId=30-days-of-javascript


## 最後に
日本語の勉強するために作成しておりますので、間違った日本語や内容がありましたらいつでもフィードバックいただければ幸いです。
Excelでの統計

# はじめに
Excelで統計の分析をする場合に、使用することが多い関数の情報をまとめておく。

# Excelの関数
## AVERAGEIF：条件指定による平均値算出

https://dekiru.net/article/4518/

## CORREL：相関係数算出

https://excelcamp.jp/media/function/9010/

## ABS：絶対値変換

https://excelcamp.jp/media/function/7389/

## T.TEST：独立サンプルt検定

https://dekiru.net/article/4597/

https://bellcurve.jp/statistics/course/23088.html?srsltid=AfmBOoqbmRs2EMfVJ25kFeQy5mm1ZwdHykwshhiWQYA32TZpNhS4kn20

## RANK：順位付け

https://azby.fmworld.net/lesson/excel-function/031/
コマンドプロンプトのコマンドをショートカットキーに登録




## CMDコマンドを登録する場合
例：フォルダを開く場合
```sh
cmd.exe /c start "" "C:\Users\YourName\Documents"
```
デスクトップなどからショートカットを新規で作成する。
リンク先は以下のようにすればいい。
C:\Windows\System32\cmd.exe /c start "" "C:\Users\YourName\Documents"


## PCロックの登録する場合
cmdで以下を実行すると画面ロックされる。これをショートカットキーに登録する。

```sh
rundll32.exe user32.dll,LockWorkStation
```

rundll32.exeのパスは以下

```sh
C:\Windows\System32
```

リンク先は以下のようにすればいい。
C:\Windows\System32\rundll32.exe user32.dll,LockWorkStation

デスクトップなどからショートカットを新規で作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384409/1bfb5bea-3aa3-778c-4f5a-be31fca6dc31.png)

アイコンを変更してもいい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384409/33a6f55d-a0b0-3189-ba9e-a84a2f9bdba6.png)
MAUI Tips - iPhone Simulatorでソフトウェアキーボードを表示する

# 概要
いつも忘れてしまうので・・・
iPhoneシミュレーターで動作確認する時に、
ソフトウェアキーボードを表示させる方法の備忘録。
→ 見た目の確認のため。

あ、.NET MAUIに限らない話です。


# 手順
シミュレーターが起動したら、メニューの「I/O」からKeyboardを選んで、
「Toggle Software Keyboard」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/c163d0c8-24e8-1a8a-4d6f-29ab178cf15f.png)

そうすると、ソフトウェアキーボードが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/bc74e856-3fd1-b25c-8175-55bb081dbce9.png)

# 困った時は
大人しくHelpで検索しましょう（笑）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/f1690646-ccb5-1c83-2f7d-82454a435a24.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/90e00e60-2bbf-6222-f5c3-bb2d45d4abb8.png)
Ajax通信 GET POST

# Ajax GET と POST

GET

```http-get.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<script>
function get()
{
	var xhr = new XMLHttpRequest();
	xhr.open("get", "http://localhost/ajax/http-get.php?data=HelloKitty");
	xhr.send();

	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4 && xhr.status === 200)
		{
			alert(xhr.responseText);
		}
	}
}

get();
		</script>
	</body>
</html>
```

```http-get.php
<?php
    $contents = $_GET["data"];

    echo $contents;
```

##

POST
```http-post.html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<script>
function post()
{
	var xhr = new XMLHttpRequest();

	xhr.open('POST', 'http://localhost/ajax/http-post.php');
	xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
	xhr.send( 'data=HelloKitty' );

	xhr.onreadystatechange = function(){
		if(xhr.readyState === 4 && xhr.status === 200)
		{
			alert(xhr.responseText);
		}
	}
}

post();
		</script>
	</body>
</html>
```

```http-get.php
<?php
    $contents = $_POST["data"];

    echo $contents;
```
Javaで「テキストフィールドの前景色/背景色の設定と背景の透明/非透明の切り替え」の動作を確認してみた。

# 概要

Javaで「テキストフィールドの前景色/背景色の設定と背景の透明/非透明の切り替え」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/tutorial/jtextfield/index3.html

# 実装

以下のファイルを作成しました。

```JSample3_2.java
import javax.swing.JFrame;
import javax.swing.JTextField;
import javax.swing.JPanel;
import java.awt.Container;
import java.awt.BorderLayout;
import java.awt.Color;

class JSample3_2 extends JFrame{
  public static void main(String args[]){
    JSample3_2 frame = new JSample3_2("MyTitle");
    frame.setVisible(true);
  }

  JSample3_2(String title){
    setTitle(title);
    setBounds(100, 100, 600, 400);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    JTextField text1 = new JTextField("Tokyo", 10);
    JTextField text2 = new JTextField("Osaka", 10);
    text2.setOpaque(false);

    JPanel p = new JPanel();
    p.add(text1);
    p.add(text2);

    Container contentPane = getContentPane();
    contentPane.add(p, BorderLayout.CENTER);
  }
}
```

以下のコマンドを実行しました。

```
$ javac JSample3_2.java 
$ java JSample3_2 
```

実行結果は以下の通りでした。

![Screenshot from 2025-01-20 10-29-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/80669a17-6ef2-8b45-b8b8-5225e82e9089.png)

# まとめ

何かの役に立てばと。