OmniAICreator/Qiita-1.07M huggingface dataset:
《アルゴリズムを学ぶ》2.配列

# Overview
データアクセスや基本的なループ処理をまとめました。
[1.配列（リスト）の基本](#1-配列（リスト）の基本)
[2.配列のループ処理](#2-配列のループ処理)
[3.配列の基本操作](#3-配列の基本操作)
[4.配列の便利な処理](#4-配列の便利な処理)
[5.典型問題を解いてみる](#5-典型問題を解いてみる)

# 1. 配列（リスト）の基本
Pythonでは「配列」は list で扱う。
> [参考：《アルゴリズムを学ぶ》1.リスト](https://qiita.com/Midori_M/items/4418c94adadb9e2a46a2)

# 2. 配列のループ処理
### forループでの走査
```python
arr = [10, 20, 30, 40, 50]
for num in arr:
    print(num) # ループ内での操作を記述
```

### インデックス付きのループ（enumerate の利用）
```python
arr = [10, 20, 30, 40, 50]
for i, num in enumerate(arr):
    print(f"Index {i}: Value {num}")
```
出力
```
Index 0: Value 10
Index 1: Value 20
Index 2: Value 30
Index 3: Value 40
Index 4: Value 50
```

### whileループでの走査
```python
i = 0
while i < len(arr):
    print(arr[i])
    i += 1
```

# 3. 配列の基本操作
### 要素の追加
```python
arr.append(60)   # 末尾に追加
arr.insert(2, 25) # 2番目の位置に25を挿入
```

### 要素の削除
```python
arr.pop()        # 末尾の要素を削除
arr.pop(2)       # 2番目の要素を削除
arr.remove(30)   # 値が30の要素を削除
```

# 4. 配列の便利な処理
### リスト内包表記
リストを作成する際に for を使う代わりに簡潔に書くことがでる。
```python
squares = [x**2 for x in range(10)]  # [0, 1, 4, ..., 81]
evens = [x for x in arr if x % 2 == 0]  # 偶数のみ取得
```

# 5. 典型問題を解いてみる
### 例題1: 特定の要素の出力
**問題：N 個の整数配列 A が与えられ、X 以下の要素を全て出力せよ。**
> [参考：ABC342B - Filter](https://atcoder.jp/contests/abc342/tasks/abc342_b)
<details><summary> 回答　</summary>

```Python
N, X = map(int, input().split())
A = list(map(int, input().split()))

for num in A:
    if num <= X:
        print(num, end=" ")
```
</details>

### 例題2: 逆順の出力
**問題: N 個の整数配列 A が与えられ、それを逆順に出力せよ。**
> [参考：ABC339C - Reverse Array](https://atcoder.jp/contests/abc339/tasks/abc339_c)
<details><summary> 回答　</summary>

```Python
N = int(input())
A = list(map(int, input().split()))

print(*A[::-1])
```
</details>

### 例題3: 特定の要素のカウント
**問題: N 個の文字列が与えられ、その中から特定の条件を満たす文字列の数を数えよ。**
> [参考：ABC287B - Qualification Contest](https://atcoder.jp/contests/abc287/tasks/abc287_b)
<details><summary> 回答　</summary>

```Python
N = int(input())
S = [input() for _ in range(N)]

count = sum(1 for s in S if s.startswith("ABC"))
print(count)
```
</details>

### 例題4. 配列の動的更新
**問題: N 段の階段を 1 段または 2 段ずつ上る方法の数を求めよ（1,000,000,007で割った余りを出力）。**
> [参考：ABC129 C - Typical Stairs](https://atcoder.jp/contests/abc129/tasks/abc129_c)
<details><summary> 回答　</summary>

```Python
N, M = map(int, input().split())
broken = set(int(input()) for _ in range(M))

MOD = 10**9+7
dp = [0] * (N+1)
dp[0] = 1

for i in range(1, N+1):
    if i in broken:
        continue
    dp[i] = dp[i-1] + (dp[i-2] if i > 1 else 0)
    dp[i] %= MOD

print(dp[N])
```
</details>

### 例題5. リスト内包表記を用いた文字列のフィルタリング
**問題: 文字列 S が与えられ、連続する母音があるかどうかを判定せよ。**
> [参考：ABC344 A - Strings with Consecutive Vowels](https://atcoder.jp/contests/abc344/tasks/abc344_a)

<details><summary> 回答　</summary>

```Python
S = input()
vowels = {"a", "e", "i", "o", "u"}

# 連続する母音があるかをチェック
has_consecutive_vowel = any(S[i] in vowels and S[i+1] in vowels for i in range(len(S)-1))

print("Yes" if has_consecutive_vowel else "No")

```
</details>

# 6. リスト操作に関する詳細な解説
https://atcoder.jp/contests/APG4bPython/tasks/APG4bPython_k
GCPのVMにVS Codeでアクセスするための設定手順メモ

## 流れ
1) ローカルで鍵生成
2) 公開鍵をVMに登録
3) VSCodeの設定

### ローカルで鍵生成
コマンドプロンプトで`ssh-keygen`実行
鍵の保存先確認
パスフレーズ入力（空OK）
確認

### 公開鍵をVMに登録
生成されたxxx.pubの内容をコピーしてSSH認証鍵に貼り付け

### VSCodeのリモート接続config設定
```
Host <VM名>
    HostName <VMの外向き固定IP>
    User <鍵生成ローカルのユーザ名>
    IdentityFile <生成した鍵xxx>
    PasswordAuthentication no
    IdentitiesOnly yes
```
#0044（2024/02/11）pythonと不変性

# pyhonで不変性を担保する具体例

Pythonで不変性（イミュータビリティ）を担保する方法として、基本的な不変オブジェクト、`dataclass(frozen=True)`、および `namedtuple` を利用する方法を紹介します。


## 1. 基本的な不変オブジェクト

Pythonの組み込み型のうち、以下の型は不変です。ただし、変数に再代入は可能。

- 数値型 (`int`, `float` など)
- 文字列 (`str`)
- タプル (`tuple`)
- `frozenset`

例えば、以下のコードはそれぞれ不変オブジェクトであることを示しています。

```python
# 数値型は不変です
a = 42

# 文字列は不変です
text = "Hello, world!"
# 以下はエラーになります（TypeError: 'str' object does not support item assignment）
# text[0] = "h"

# タプルも不変です
numbers = (1, 2, 3)
# 以下はエラーになります（TypeError: 'tuple' object does not support item assignment）
# numbers[0] = 10

# frozensetも不変です
colors = frozenset(["red", "green", "blue"])
# 以下はエラーになります（AttributeError: 'frozenset' object has no attribute 'add'）
# colors.add("yellow")
```


## 2. dataclass(frozen=True) を用いた不変オブジェクト

Python 3.7以降では、dataclasses モジュールを使ってクラス定義を簡潔に行うことができます。frozen=True オプションを指定することで、インスタンス生成後の属性変更が禁止され、不変オブジェクトとなります。

``` python
from dataclasses import dataclass

@dataclass(frozen=True)
class ImmutablePoint:
    x: int
    y: int

# インスタンス生成
point = ImmutablePoint(1, 2)
print(point.x)  # 出力: 1

# 以下の行はエラーになります（FrozenInstanceError: cannot assign to field 'x'）
# point.x = 3
```

## 3. namedtuple を用いた不変オブジェクト
collections.namedtuple を使うと、簡単に不変のタプル型オブジェクトを作成できます。namedtuple で作成されたオブジェクトは、属性名でアクセスできる一方で、その内容は変更できません。

``` python
from collections import namedtuple

# Pointという名前のnamedtupleを定義
Point = namedtuple('Point', ['x', 'y'])

# インスタンス生成
pt = Point(1, 2)
print(pt.x)  # 出力: 1

# 以下の行はエラーになります（AttributeError: can't set attribute）
# pt.x = 3
```

# まとめ

- 基本的な不変オブジェクト
    - 数値、文字列、タプル、frozenset などは最初から不変であり、副作用を防ぐために利用できます。
- dataclass(frozen=True)
    - クラス定義時に frozen=True を指定することで、生成後に属性が変更されないようにでき、設計上の不変性を保つのに有用です。
- namedtuple
    - 簡単な不変のデータ構造が必要な場合、namedtuple を利用することで、タプルと同様の不変性と名前付きフィールドでのアクセスが可能になります。
個人的備忘録：.envファイルについて3時間言語化できなかったので、記事としてアウトプットしてみた

## はじめに
環境変数を管理する方法の一つとして、.env ファイルがあります。

:::note info
**アプリケーション開発において、APIキーやデータベースの接続情報など、環境ごとに異なる設定を安全に管理するために使われることが多いです。**
:::

今回は、.env ファイルについて整理してみました。

## 書こうと思ったきっかけ
プロジェクトごとに環境変数を設定するたびに、「**これをどう管理するのがベストなのか？**」と考えることがありました。

特に、Docker や AWS を扱うようになってから、環境ごとに設定を分ける機会が増えたため、.env ファイルの重要性を改めて見直すことになりました。

## .envファイルとは
.env ファイルは、環境変数を定義するためのテキストファイルで、一般的には以下のような形式で記述します。

```.env
DATABASE_URL=mysql://user:password@localhost:3306/db_name
SECRET_KEY=your_secret_key
DEBUG=True
```

各行は `キー=値` の形式で記述し、アプリケーションから環境変数として読み込めるようになっています。  

Python では `dotenv` パッケージ、Node.js では `dotenv` モジュールなどを使って、このファイルの値を簡単に読み込めます。

## .envファイルのメリット

- **環境ごとの設定を簡単に切り替えられる**  
開発環境、ステージング環境、本番環境ごとに異なる設定を `.env` ファイルにまとめておけば、簡単に切り替え可能です。

- **機密情報をコードに直接書かずに済む**  
APIキーやデータベースのパスワードなど、機密情報を `.env` に記述し、コードから環境変数として参照することでセキュリティを向上できます。

- **設定ファイルをシンプルに保てる**  
設定ファイル（例: `config.py` や `settings.js`）の中で環境変数を参照するだけにすれば、設定の管理がしやすくなります。

## .envファイルの注意点
.env ファイルを使う際には、以下の点に注意する必要があります。

**Git などのバージョン管理に含めない**  
`.env` ファイルは `.gitignore` に追加し、誤ってリモートリポジトリにプッシュしないようにします。  
代わりに `.env.example` などのテンプレートファイルを用意し、必要な変数の例を記載すると良いです。

**環境変数の管理方法を考慮する**  
ローカル環境では `.env` を使えますが、本番環境では `.env` を直接使わず、OSの環境変数や **AWS Secrets Manager**、**Parameter Store** などを利用するのも選択肢の一つです。

**改行や特殊文字に注意する**  
`.env` ファイルでは、値の中にスペースや特殊文字を含む場合、適切にエスケープする必要があります。

**例**

```.env
PASSWORD="P@ss word!"
```

## まとめ

実際に .env ファイルを活用することで、設定の管理が楽になり、環境ごとの切り替えもスムーズに行えるようになりました。

:::note warn
***また、`.gitignore` に `.env` を追加することで、重要な情報をリポジトリに含めないようにするのもポイントです。***
:::

特に Docker や CI/CD 環境で変数を管理する際に便利で、うまく運用すれば設定ミスを減らせると実感しました。
【C#】値渡しと参照渡し

値渡しと参照渡しとは、どちらも引数の渡し方の一種です。

各々の特徴は以下の通り

# 値渡し
対象の変数の値をコピーして引数として渡す方法

呼び出し先で引数の値が変わっても呼び出し元の変数は値が変わりません
```PassValue.cs
class PassValue
{
    public PassValue()
    {
        this.Execute();
    }

    private int num = 1;

    private void Execute() => this.Increment(this.num);

    private void Increment(int before)
    {
        before++;
        Console.WriteLine(before); // 出力：2
        Console.WriteLine(this.num); // 出力：1（呼び出し元の値は変わらない）
    }
}
```

# 参照渡し
対象の変数への参照を引数として渡す方法

変数の中身をコピーするわけではなく、変数の中身が置かれている場所を教えてあげるイメージです

こちらは呼び出し先で値が変わると呼び出し元の変数の値も変更されます

C#の実装では引数にキーワードをつけることで3種類の参照渡しが使用可能です

 ### 1. ref
 通常の参照渡しで、呼び出し元で呼び出し先の値変更が可能。
 引数で渡す前に値の初期化がされていることが必須で、メソッドコール時にも`ref`を記述する必要があります。

 ### 2. in
 読み取り専用の参照渡しで、"入力参照引数"という。
 メソッドコール時は`in`を記述しなくてもエラーにはならないが記述することが好ましいです。
 inを記述することによって、メソッド内で引数の値が変わらないことを保証します。
 
一見値渡しと同じ動きに見えますが、値のコピーを必要としないので大きいデータを扱う際はパフォーマンスの向上が見込めます。

### 3.out
メソッドから変数を渡す"出力引数"という。
メソッドコール時の初期化は不要で、メソッド内で初期化された変数を受け取ります。

`Dictionary<TKey, TValue>`の`TryGetValue()`等に使用されている手法で、メソッド内で変数を初期化したいケースや複数の返り値を渡したい際に有効です。

### 実装例

```PassReference.cs
class PassReference
{
    public PassReference()
    {
        // ref (引数で渡した値も変更される)
        int before = 1;
        this.UseRef(ref before);
        Console.WriteLine(before); // 出力：2
    
        // out (複数の返り値を受け取ることができる)
        before = 1;
        if (this.UseOut(before, out int outNum))
        {
            Console.WriteLine(outNum); // 出力：2
        }
        else
        {
            Console.WriteLine("数値が範囲外です");
        }
    }
    
    // refを使ったメソッド
    private void UseRef(ref int before)
    {
        before++;
    }
    
    //inを使ったメソッド
    private int UseIn(in int before)
    {
        return before++; // 値変更不可のためエラーになる
    }
    
    // outを使ったメソッド
    private bool UseOut(int before, out int incremented)
    {
        // インクリメント後の値の範囲チェックとインクリメント後の値を同時にreturn
        incremented = before + 1;
        return incremented > 0;
    }
}
```

# 参考
https://wa3.i-3-i.info/diff345programming.html

https://zenn.dev/leaf/articles/d08588c8deb93a
jQueryの .click() と .on("click") の違いを理解する

```jsx
jQuery("セレクタ").on("click", function() {
    // クリック時の処理
});
```

## **.on("click", function() { })**

### 特徴

1. 後から追加される要素（動的要素）にも対応する。（イベントデリゲーションが使える）
    
    ※イベントデリゲーションとは、親要素にイベントをバインドし、そのイベントが子要素に伝播（バブリング）する仕組みを利用することで、後から追加される要素にもイベントを適用できる手法。
    
2. 複数のイベントをまとめてバインドできる（例：on("mouseenter mouseleave", function() {})）

```jsx
jQuery("セレクタ").click(function() {
    // クリック時の処理
});
```

## .click(function() { })

### 特徴

1. 後から追加される要素には対応できない。
2. 記述が`.on("click", function() {})`より短くなるが、動的要素には適用できないため、基本的には`.on()`の使用が推奨される。
2. 
## **まとめ**

`.on("click", function(){})` の方が後から追加した要素にも対応できるので柔軟性が高い。
#0043（2024/02/11）ガード節

# ガード節（Guard Clause）とは？

ガード節は、関数やメソッドの冒頭で前提条件や入力の検証を行い、条件が満たされない場合に早期に処理を終了（または例外を発生）するためのテクニックです。  
これにより、ネストが深くなるのを防ぎ、コードの可読性や保守性を向上させることができます。



## ガード節のメリット

- **早期リターン**: 不適切な入力やエラー条件の場合、すぐに処理を中断できる。
- **コードの簡潔化**: 不必要な入れ子の if-else 構造を避け、ロジックを明確にする。
- **保守性向上**: 条件ごとのエラーハンドリングが分離され、修正や拡張が容易になる。


## Pythonでのガード節の例

以下は、入力値が適切でない場合にガード節を利用して早期にエラーを発生させる例です。


```python
class DataProcessor:
    def __init__(self, data):
        # ガード節: dataがNoneの場合はエラーを発生させる
        if data is None:
            raise ValueError("data cannot be None")
        self.data = data

    def process(self):
        # ガード節: dataが空の場合は早期に処理を終了する
        if not self.data:
            return "No data to process"

        # 主要な処理ロジック
        result = [d * 2 for d in self.data]
        return result

# 使用例
try:
    processor = DataProcessor(None)
except ValueError as e:
    print(e)  # "data cannot be None"

processor = DataProcessor([])
print(processor.process())  # "No data to process"

processor = DataProcessor([1, 2, 3])
print(processor.process())  # [2, 4, 6]
```

## TypeScriptでのガード節の例

TypeScriptでも同様に、コンストラクタやメソッドの最初にガード節を用いて入力値や状態をチェックします。

``` typescript
class DataProcessor {
  private data: number[];

  constructor(data: number[] | null) {
    // ガード節: dataがnullまたはundefinedの場合はエラーを投げる
    if (data === null || data === undefined) {
      throw new Error("data cannot be null or undefined");
    }
    this.data = data;
  }

  process(): number[] | string {
    // ガード節: dataが空の場合は早期に処理を終了する
    if (this.data.length === 0) {
      return "No data to process";
    }

    // 主要な処理ロジック
    const result = this.data.map(d => d * 2);
    return result;
  }
}

// 使用例
try {
  const processor1 = new DataProcessor(null);
} catch (error) {
  console.error(error.message); // "data cannot be null or undefined"
}

const processor2 = new DataProcessor([]);
console.log(processor2.process());  // "No data to process"

const processor3 = new DataProcessor([1, 2, 3]);
console.log(processor3.process());  // [2, 4, 6]
```
#0042（2024/02/11）memo「良いコード/悪いコードで学ぶ設計入門」第4章~変数の活用~

# 「良いコード/悪いコードで学ぶ設計入門」第4章~変数の活用~ を読んで
## アクティブリコール
- 変数は基本的に不変にする
    - スコープが小さい場合は可変でもOK
- インスタンス変数を書き換えるようなメソッドは書かない→値を返す
- 可変による副作用が発生する

## 再読
- インスタンス変数、引数も不変にせってい
- 再代入を許可しない（変数を意味があるスコープで設定）
- 副作用を起こさないというのは過信である
- ミューテーター（正しい状態変更のメソッド）
- カプセル化、リポジトリパターン
[自分用メモ]Dockerのアンインストール

 

# アンインストール手順

1. rootユーザに移行する

2. 実行中のコンテナを停止する

   ```
   docker stop $(docker ps -a -q)
   ```

   このコマンドは、実行中のすべてのコンテナを停止する

3. すべてのコンテナを削除する

   ```
   docker rm $(docker ps -a -q)
   ```

   このコマンドは、停止しているコンテナも含めて、すべてのコンテナを削除する

4. すべてのイメージを削除する

   ```
   docker rmi $(docker images -a -q)
   ```

   このコマンドは、すべてのイメージを削除する

5. すべてのボリュームを削除する

   ```
   docker volume prune
   ```

   このコマンドは、未使用のボリュームを削除する

6. Dockerのキャッシュをクリアする

   ```
   docker builder prune -a
   ```

   `-a` オプションを使用すると、すべてのキャッシュが削除される

     - キャッシュをクリアすると、次回のビルド時にキャッシュが利用できなくなるため、ビルド時間が長くなる可能性がある

7. Dockerエンジンを停止する

   ```
   sudo systemctl stop docker
   ```

8. Docker関連のパッケージをアンインストールする

   ```
   sudo yum remove docker-ce docker-ce-cli containerd.io
   ```

9. 不要な依存関係を削除する

   ```
   sudo yum autoremove
   ```

10. Docker関連のディレクトリを削除する

    ```
    sudo rm -rf /var/lib/docker
    sudo rm -rf /var/lib/containerd
    ```

    これらのディレクトリには、Docker のデータや設定ファイルが保存されている

11. Dockerグループを削除する

    ```
    sudo groupdel docker
    ```

12. 再起動

    システムを再起動し、Docker が完全にアンインストールされたことを確認する
LibreOfficeでPPTXファイルをPDFに変換する方法

# LibreOfficeをインストール

買い切りのMicrosoft officeは、Wordおよびエクセルしか買わなかったのでpowerpointはインストールされておらず、pptxをPDFに変換できなかったのです

LibreOfficeを使って、PPTXファイルをPDF形式に変換する方法をご紹介します。LibreOfficeは、Microsoft Officeと互換性があり、オープンソースのオフィススイートで、多くの機能を無料で提供しています。まずは、LibreOfficeをインストールする手順から見ていきましょう。

致し方ないのでLibreOfficeをインストールしましょう.

### LibreOfficeのインストール

**Wingetを使ってインストール**  

   まず、PowerShellを開きます。そして、以下のコマンドを入力してLibreOfficeをインストールします。
   
   ```powershell
   winget install LibreOffice
   ```
   
   このコマンドを実行すると、自動的に最新バージョンのLibreOfficeがダウンロードされ、インストールされます.

# CLIでの変換方法

LibreOfficeのインストールが完了したら、PPTXファイルをPDF形式に変換する準備が整いました。次に、具体的な手順をご紹介します。

**変換するPPTXファイルのパスを設定**  
   PowerShellを開き、以下のコマンドを実行します。

```powershell
$pptxPath = "C:\hoge.pptx"
$pdfPath = "C:\hoge.pdf"
Start-Process "C:\Program Files\LibreOffice\program\soffice.exe" -- "--headless --convert-to pdf $pptxPath --outdir $(Split-Path -Parent $pdfPath)"
```

このコマンドにより、指定したPPTXファイルがPDF形式に変換され、同じフォルダ内に保存されます。

# まとめ

LibreOfficeを使えば、簡単にPPTXファイルをPDF形式に変換することができます。オープンソースで無料提供されているため、多くのユーザーにとって便利なツールです。ぜひ試してみてください
[自分用メモ]Dockerイメージを他サーバに持ち込み、コンテナ構築

# Dockerイメージの作成～他サーバでインポート

## 作業手順

1. rootユーザに移行

2. Dockerイメージをtar化

   ```
   docker save <イメージ名> -o <tarファイル名>
   ```

   ※ここでは、AnsibleをインストールしたRocky Linux 9のイメージを扱うものとする

3. tarファイルの所有者を変更

   ```
   sudo chown vboxuser:vboxuser <tarファイル名>
   ```

4. scpなどでtarファイルを他サーバに転送

5. 転送先サーバーで`docker load`コマンドでtarファイルからイメージをインポート

   ```
   docker load -i <tarファイル名>
   ```

6. イメージが作成されているか確認

   ```
   docker images
   ```

      以下のように、作成したDockerイメージが表示されればOK

      ```
      [root@vbox ansibleDockerFile]# docker images
      REPOSITORY                TAG       IMAGE ID       CREATED       SIZE
      ansible-container-image   latest    c66c49dd6431   9 hours ago   921MB
      ```

# Dockerコンテナの構築

## 構築手順

1. コンテナを起動する

   Rocky Linux 9 の Docker イメージは、デフォルトで /bin/bash を実行するようにはなっていないため、コンテナ起動時に何も実行するコマンドを指定しないと、すぐに終了する。

   そのため、以下のコマンドでコンテナを起動する

   ```
   docker run -d --name ansible-container --net=host ansible-container-image sleep infinity
   ```

  `--net=host`で、ホストのネットワークを使うよう指定できる。
   `sleep infinity` は、コンテナ内で無限にスリープし続けるコマンドである。これによりコンテナが起動し続け、docker ps で確認できるようになる。


2. コンテナの起動状況を確認

   以下コマンドを実行

   ```
   docker ps
   ```

   結果、以下のようにansible-containerが表示されれば、コンテナの構築に成功している

   ```
   CONTAINER ID   IMAGE                     COMMAND            CREATED         STATUS         PORTS     NAMES
   44876981f384   ansible-container-image   "sleep infinity"   7 seconds ago   Up 7 seconds             ansible-container
   ```

3. コンテナにログインする

   ```
   docker exec -it ansible-container bash
   ```

4. Ansibleがインストールされているか確認

   ```
   ansible --version
   ```

   以下のようにAnsibleバージョンが表示されればOK

   ```
   ansible [core 2.14.17]
     config file = /etc/ansible/ansible.cfg
     configured module search path = ['/root/.ansible/plugins/modules', '/usr/share/ansible/plugins/modules']
     ansible python module location = /usr/lib/python3.9/site-packages/ansible
     ansible collection location = /root/.ansible/collections:/usr/share/ansible/collections
     executable location = /usr/bin/ansible
     python version = 3.9.21 (main, Dec  5 2024, 00:00:00) [GCC 11.5.0 20240719 (Red Hat 11.5.0-2)] (/usr/bin/python3)
     jinja version = 3.1.2
     libyaml = True
   ```

5. コンテナからログアウト

   ```
   exit
   ```

6. 持ち込んだtarファイルを削除

   ```
   rm <tarファイル名>
paizaラーニングレベルアップ問題集の【n行の出力】をやってみた。

paizaラーニングレベルアップ問題集の【n行の出力】をやってみました。
- - -
##### 問題
###### 1行または2行の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__n_line_step1
###### 数行の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__n_line_step2
###### 10行以内の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__n_line_step3
###### 1,000行以内の出力
https://paiza.jp/works/mondai/stdout_primer/stdout_primer__n_line_boss
- - -
4問とも同じコードです。

:::note warn
以下のサンプルでは入力値を直接ループ終了値として扱っている言語もありますが、皆様方におかれましては、コーディング規約に則り、入力値を変数で受ける等して頂けますと幸いです。
:::
- - -
##### C
```c
#include <stdio.h>

int main() {
	int n;
	scanf("%d", &n);
	for (int i = 1; i <= n; i++)
		printf("%d\n", i);
	return 0;
}
```
- - -
##### C++
```cpp
#include <iostream>
using namespace std;

int main() {
	int n;
	cin >> n;
	for (int i = 1; i <= n; i++)
		cout << i << endl;
	return 0;
}
```
- - -
##### C#
```cs
using System;

class Program
{
	public static void Main()
	{
		int n = int.Parse(Console.ReadLine());
		for (int i = 1; i <= n; i++) Console.WriteLine(i);
	}
}
```
- - -
##### Go
```go
package main
import "fmt"

func main() {
	var n int
	fmt.Scan(&n)
	for i := 1; i <= n; i++ {
		fmt.Println(i)
	}
}
```
- - -
##### Java
```java
import java.util.*;

public class Main {
	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
		int n = sc.nextInt();
		for (int i = 1; i <= n; i++)
			System.out.println(i);
		sc.close();
	}
}
```
- - -
##### JavaScript
```js
Array(Number(require("fs").readFileSync("/dev/stdin", "utf8"))).fill(1).map((i, j) => i + j).forEach((i) => console.log(i));
```
- - -
##### Kotlin
```kotlin
import java.util.*

fun main() {
	val sc = Scanner(System.`in`)
	for (i in 1..sc.nextInt()) {
		println(i)
	}
	sc.close()
}
```
- - -
##### PHP
```php
<?php
	$n = intval(trim(fgets(STDIN)));
	for ($i = 1; $i <= $n; $i++)
		echo $i . PHP_EOL;
?>
```
- - -
##### Perl
```pl
for (1..int(<STDIN>)) {
	print "$_$/";
}
```
- - -
##### Python3
```py
for i in range(1, int(input()) + 1):
	print(i)
```
- - -
##### Ruby
```rb
1.upto(gets.to_i) do |i|
	p i
end
```
- - -
##### Scala
```scala
import scala.io.StdIn._

object Main extends App{
	for (i <- 1 to readInt()) {
		println(i)
	}
}
```
- - -
##### Swift
```swift
for i in 1...Int(readLine()!)! {
	print(i)
}
```
秒で始めるpyxel（python環境必須）

何も分からん人向け
https://qiita.com/Hiroto_Aso/items/ddd87f81e42ed24a1f0c

```落ち物避けゲーム.py
import pyxel
import random

class App:
    def __init__(self):
        # ウィンドウの幅と高さの設定
        pyxel.init(160, 120, title="落ち物回避ゲーム")
        
        # プレイヤーの初期設定
        self.player_x = 75
        self.player_y = 110
        self.player_width = 10
        self.player_height = 5
        self.player_speed = 3

        # 敵（落ちブロック）のリスト
        self.enemies = []
        self.enemy_speed = 2  # 落下速度
        self.enemy_timer = 0  # 敵生成タイマー
        self.enemy_interval = 30  # 敵生成の間隔（フレーム数）

        pyxel.run(self.update, self.draw)

    def update(self):
        # プレイヤーの左右移動の処理
        if pyxel.btn(pyxel.KEY_LEFT):
            self.player_x = max(0, self.player_x - self.player_speed)
        if pyxel.btn(pyxel.KEY_RIGHT):
            self.player_x = min(pyxel.width - self.player_width, self.player_x + self.player_speed)

        # 敵生成タイマーの更新
        self.enemy_timer += 1
        if self.enemy_timer > self.enemy_interval:
            # 新しい敵を画面上部に生成
            enemy_x = random.randint(0, pyxel.width - 5)  # 敵の幅は5ピクセル
            enemy_y = 0
            self.enemies.append([enemy_x, enemy_y])
            self.enemy_timer = 0

        # すべての敵の位置を更新
        for enemy in self.enemies:
            enemy[1] += self.enemy_speed

        # 敵とプレイヤーとの衝突判定（単純な矩形同士の判定）
        for enemy in self.enemies:
            if (enemy[0] < self.player_x + self.player_width and enemy[0] + 5 > self.player_x and
                enemy[1] < self.player_y + self.player_height and enemy[1] + 5 > self.player_y):
                pyxel.quit()  # 衝突したらゲーム終了

        # 画面外に出た敵をリストから削除
        self.enemies = [enemy for enemy in self.enemies if enemy[1] < pyxel.height]

    def draw(self):
        pyxel.cls(0)
        # プレイヤーの描画
        pyxel.rect(self.player_x, self.player_y, self.player_width, self.player_height, 11)
        # 敵の描画
        for enemy in self.enemies:
            pyxel.rect(enemy[0], enemy[1], 5, 5, 8)
        # 説明テキストの表示
        pyxel.text(5, 5, "矢印キーで左右移動", 7)

if __name__ == "__main__":
    App() 
```



他のゲーム
https://kitao.github.io/pyxel/wasm/examples/10_platformer.html


https://qiita.com/kitao/items/eae53dd47c663b497352
Xbox Game Barでゲーム画面の録画中に表示されるウィジェットを別画面に逃がす方法 【複数モニター限定】

![ス.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231678/5a2244d8-e854-85df-8a13-2e44ab00b12e.jpeg)


・二台のモニターを用意する
・メインモニターでゲームを起動する
・サブモニターにタスクバーを表示する
タスクバー上で右クリック→タスクバーの設定→タスクバーの動作→「タスクバーを全てのディスプレイに表示する」にチェック入れる
・サブモニターのデスクトップ画面の何もない場所をクリックして、Win+Alt+G
・『キャプチャ』のウィンドウ右上にあるピン留めをクリックして有効にする
・録画したいゲーム画面をクリックしてアクティブにする
・サブモニターにある録画ボタンをクリック（またはホットキーから録画を開始）

以上の手順で、メインモニターのゲーム画面に録画中のウィジェットが表示されずにゲームが出来るようになる。
cscの作法 その556

# 概要
cscの作法、調べてみた。
練習問題やってみた。

# 練習問題
ドッキングウィンドウでコンテンツ間通信せよ。

# 方針
- Timer使う。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c27ee801-e066-34b6-5ca6-f3d9ca8092d2.png)

# サンプルコード

```
using System;
using System.Data;
using System.Linq;
using System.Windows.Forms;
using WeifenLuo.WinFormsUI.Docking;
using System.Drawing;
using System.Runtime.InteropServices;

namespace Dock
{
	public partial class Win1: WeifenLuo.WinFormsUI.Docking.DockContent {
		public TextBox bo1;
		public Win1() {
			bo1 = new TextBox();
			bo1.Text = "本日は晴天なり";
			bo1.Multiline = true;
			bo1.Font = new Font("ＭＳ Ｐゴシック", 12);
			bo1.Dock = DockStyle.Fill;
			Controls.AddRange(new Control[] {
				bo1
			});
		}
	}
	public partial class Win2: WeifenLuo.WinFormsUI.Docking.DockContent {
		public int state = 0;
		public Win2() {
			Button btn0 = new Button();
			btn0.Location = new Point(50, 50);
			btn0.Text = "send";
			btn0.Click += btn0_Click;
			Controls.AddRange(new Control[] {
				btn0
			});
		}
		void btn0_Click(object sender, System.EventArgs e) {
			state = 1;
		}
	}
	public partial class Win3: WeifenLuo.WinFormsUI.Docking.DockContent {
		public Win3() {
		}
	}
	public partial class Form1: Form {
		public Win2 left1;
		public Win2 right1;
		public Win1 bottom1;
		public Win1 center1;
		public Form1() {
			ClientSize = new Size(800, 600);
			Text = "dock";
			var dockPanel1 = new DockPanel();
			dockPanel1.ShowDocumentIcon = true;
			dockPanel1.Dock = DockStyle.Fill;
			dockPanel1.DocumentStyle = DocumentStyle.DockingWindow;
			Controls.Add(dockPanel1);
			left1 = new Win2();
			left1.TabText = "left1";
			left1.Show(dockPanel1, DockState.DockLeft);
			right1 = new Win2();
			right1.TabText = "right1";
			right1.Show(dockPanel1, DockState.DockRight);
			bottom1 = new Win1();
			bottom1.TabText = "bottom1";
			bottom1.Show(dockPanel1, DockState.DockBottom);
			center1 = new Win1();
			center1.TabText = "center1";
			center1.Show(dockPanel1, DockState.Document);
			dockPanel1.UpdateDockWindowZOrder(DockStyle.Left, true);
			Timer timer = new Timer {
				Interval = 1000
			};
			timer.Tick += timer_Tick;
			timer.Start();
		}
		private void timer_Tick(object sender, EventArgs e) {
			if (left1.state == 1)
			{
				bottom1.bo1.AppendText("left1 send\n");
				left1.state = 0;
			}
			if (right1.state == 1)
			{
				bottom1.bo1.AppendText("right1 send\n");
				right1.state = 0;
			}
		}
		[STAThread]
		public static void Main() {
			Application.Run(new Form1());
		}
	}
}






```

以上。
【JavaScript】グローバル変数を多用すると、コードの可読性や保守性が低下する

# **増えすぎたグローバル変数が引き起こす問題とその対策**

JavaScript でグローバル変数を多用すると、コードの可読性や保守性が低下するとよく言われます。 この記事では、**なぜグローバル変数が問題になるのか**、そして **どのように対策すべきか** を解説します。

---

## **1. 名前の衝突（Name Collision）のリスク**

グローバルスコープは **すべてのスクリプトやライブラリと共有** されているため、 同じ名前の変数や関数が意図せず上書きされるリスクがあります。

```js
var config = { theme: "dark" };
// 別のスクリプトで同じ変数名が定義されてしまう
var config = { theme: "light" };
console.log(config.theme); // "light"（意図しない変更）
```

このように、グローバル変数が多いと、**名前の競合による不具合** が発生しやすくなります。

---

## **2. 依存関係やスコープの曖昧化**

グローバル変数はどこからでもアクセスできるため、 **どこで定義され、どこで使われているのかが分かりづらく** なります。

```js
var userRole;

function setAdmin() {
    userRole = "admin";
}

function checkPermission() {
    if (userRole === "admin") {
        console.log("Access granted");
    }
}
```

このコードでは `userRole` の変更が **どこで行われるか追跡しにくい** ため、 バグの原因特定やデバッグが困難になります。

---

## **3. テストやモジュール化が難しくなる**

グローバル変数に依存したコードは、**単体テストやモジュール化がしにくい** です。

```js
// グローバル変数に依存
var apiUrl = "https://example.com/api";

function fetchData() {
    return fetch(apiUrl).then(res => res.json());
}
```

この場合、`apiUrl` の値を変更しないと、異なる API をテストすることができません。

**解決策：引数を使う**

```js
function fetchData(apiUrl) {
    return fetch(apiUrl).then(res => res.json());
}
```

✅ **こうすれば **``** のように変更でき、テストがしやすくなる！**

---

## **4. 可読性・保守性の低下**

グローバル変数を多用すると、どのファイルがどの変数に影響を与えているのか **把握しづらく** なります。

```js
var count = 0;
function increment() {
    count++;
}
function decrement() {
    count--;
}
```

✅ **モジュールスコープを使うと、影響範囲を限定できる！**

```js
(function() {
    let count = 0;
    function increment() { count++; }
    function decrement() { count--; }
})();
```

✅ **ES Modules を使うと、より明確に管理可能！**

```js
// counter.js
export let count = 0;
export function increment() { count++; }
export function decrement() { count--; }
```

```js
// main.js
import { count, increment, decrement } from "./counter.js";
increment();
console.log(count); // 1
```

---

## **5. 古い JavaScript の慣習が原因になることも**

昔の JavaScript（ES6 以前）は **モジュールシステムがなかった** ため、 グローバル変数を多用するのが一般的でした。

しかし、現在は **ES Modules（**``** / **``**）** や **即時関数（IIFE）** など、 スコープを適切に管理する方法が確立されています。

✅ **ES Modules（推奨）**

```js
// data.js
export const user = { name: "Alice" };
```

```js
// main.js
import { user } from "./data.js";
console.log(user.name);
```

✅ **即時実行関数（IIFE）でスコープを限定**

```js
(function() {
    var privateData = "Secret";
    console.log(privateData); // "Secret"
})();
console.log(privateData); // Error（外部からアクセス不可）
```

---

## **6. まとめ：グローバル変数はできるだけ避ける！**

✅ **グローバル変数が増えると…**

- 名前の衝突（Name Collision）リスクが高まる
- 依存関係が曖昧になり、デバッグが困難
- テストしにくく、モジュール化が難しくなる
- コードの可読性・保守性が低下する
- 昔の JavaScript の古い慣習に縛られがち

✅ **解決策**

- **ES Modules（**``** / **``**）を活用する**
- **即時実行関数（IIFE）でスコープを限定する**
- **オブジェクトやクラスを活用して変数を管理する**
- **依存関係を明示し、グローバルスコープを極力汚さない**

小規模なスクリプトで **1〜2 個のグローバル変数を使う程度なら問題ありません** が、 成長する可能性のあるプロジェクトでは **最初からスコープ管理を意識する** ことで、 保守性の高いコードを維持できる。
初めて参画するプロジェクトPM(PMO) 運用・保守の工程

こんにちは、小磯と申します。
プロジェクトの中にいくつかの工程があります。
その中にある運用・保守について纏めようと思います。
初めて業務を行うPM(PMO)の方へ参考になればと思います。


### 1.運用・保守
テストの結果問題がなければユーザーに納品・リリースとなり、開発・ベンダー側は運用・保守という立場に回る段階となります。
システムが正常に作動するかを定期的に確認し、トラブルが起きないようにすることを指します。
保守、メンテナンスの計画を立て、迅速に対応する体制を整えることが求められます。
保守の仕事は想定外のトラブル対応なども含まれるため、専門性が高く開発に近いといえます。


### 2.運用
システムがリリースされたあとも、継続的な管理とサポートが必要です。
保守運用工程では、システムの性能を監視し、問題が発生した場合には迅速に対応します。
運用中に発生するバグ修正、機能改善、セキュリティパッチの適用などが必要です。


### 3.保守
ユーザーの要望に応えるための機能追加やシステムのアップデートもこの段階で行われます。
システムにトラブルや不具合が発生した際に対応することに加え、アップデートなどシステム変更の必要が発生した場合の変更作業も含まれます。
システムが長期間にわたって安定して運用されるためには、効果的な保守運用が不可欠です。
システムの長期的な性能や信頼性を確保します。
ユーザーが使っていく中でバグまたは改善点が見つかることもありますので、逐一修正することになります。
ユーザー側は実際にシステムを使ってみて「問題点が見つかった」「使いにくい」「入力や表記が分かりづらい」といった要望が出てきたらしっかりと開発者に伝えましょう。


### まとめ
運用・保守工程はプロジェクトの中で最後の工程となり、次回更改まで利用するため重要な工程です。
ユーザからの問い合わせやサーバ監視に必要な手順書の更新、ユーザが利用するマニュアルも更新が必要になります。
システムのアップデートや障害対応はベンダーに作業日程を調整、ユーザーへ一時利用停止の案内をしないといけません。

他にもプロジェクトに関する記事を投稿しておりますのでお役に立てればと思います。
[プロジェクト ウォーターフォールとアジャイルの違い](https://qiita.com/pesysyon/items/e77b869b5c90b667680b)

[プロジェクト アジャイル開発の流れ（PMO）](https://qiita.com/pesysyon/items/81209de2a2fdc8c294d4)

[初めてプロジェクトに参画する方へプロジェクトとタスクの意味について](https://qiita.com/pesysyon/items/a7da021a7d596df5e5fd)

[初めて参画するプロジェクトPM(PMO) 要件定義の工程](https://qiita.com/pesysyon/items/cf40037f484b99e16621)

[初めて参画するプロジェクトPM(PMO) 基本設計の工程](https://qiita.com/pesysyon/items/c0b936f325244be7688d)

[初めて参画するプロジェクトPM(PMO) 詳細設計の工程](https://qiita.com/pesysyon/items/8e1182673b611414cb38)

[初めて参画するプロジェクトPM(PMO) 詳細設計の工程](https://qiita.com/pesysyon/items/8e1182673b611414cb38)

[初めて参画するプロジェクトPM(PMO) 構築の工程](https://qiita.com/pesysyon/items/1e4f96544420e3e7804e)

[ChatGPTへ自分の認識や対応が間違っていないか相談してみた（PMO・リリース工程）](https://qiita.com/pesysyon/items/bd54d1f74390df7f2e04)

以上、小磯でした。
Google Colaboratory をもっと使い倒さなければ．．．

# Googole Colaboratoryなら，すぐにプログラミングに集中できる！
Pythonでプログラミング学習をする時，環境構築に結構な時間を費やさないといけない．
　　pip install パッケージ
Pythonバージョン違いの仮想環境を作って，バージョン管理もしなくてはいけない．
正直，プロジェクトごとにスクリプトを読み込んで，そのような環境構築は勝手にやってほしい．
AIが自動的にプログラミング環境を構築してくれる将来が早く来てほしい．

そう，今は，Google Colabを利用しよう．
Google Driveは，15GBまでは，無料で使える！（ありがたい限りです）

![スクリーンショット 2025-02-08 8.47.12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1979979/08a84796-075e-95ad-d6a0-1c71c590641a.jpeg)

１．プロットに関するHint&Tips
２．画像処理
３．機械学習
４．ディープラーニング
５．LEGO Mindstorms

などに取り組んできました．
Kaggle，SIGNATEなどからサンプルデータをダウンロードして，積極的に利用していきたい．
埋め込んだインスタ記事が表示されない場合の解決法

インスタグラムでは、記事にある「埋め込み」をクリックすると以下のようなHTMLが表示され、これを貼り付けることで別のサイトに記事を埋め込めるようになっている。
```html
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/xxxxxx/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
<!-- 省略 -->
</blockquote>
<script async src="//www.instagram.com/embed.js"></script>
```

しかし、上記タグを貼り付けても、記事が表示されないことがよくある。
原因はJavaScriptのinstgrmオブジェクトがundefinedとなってしまうためであるが、これはscriptタグで外部から取得しているものなのでどうすることもできない。

解決策として、インスタ記事が表示されなかった場合にページをリロードするためのJavaScriptを追加するとよい。
※ instgrmオブジェクトが存在しない場合、URLに?k=0を付加してリロードしている

``` javascript
<script>
document.addEventListener("DOMContentLoaded", () => {
  if (typeof instgrm === "undefined") {
    const url = new URL(window.location.href);
    if (!url.searchParams.has('k')) {
      url.searchParams.set('k', '0');
      window.location.href = url.toString();
    }
  }
});
</script>
```

詳細は、以下にブログ記事としてまとめてあります。
https://ageo-soft.info/programming_languages/javascript/12631/
2025/2/11主にITとかセキュリティの記事

AIの脱獄(ジュエルブレイク)テストでDeepSeekは攻撃成功率が100%(2/9)
https://rocket-boys.co.jp/security-measures-lab/deepseek-jewelbreak-attack-100/

DeepSeekはブロックされているにもかかわらず、まだ危険です、専門家:それほど簡単ではありません(2/9)
https://voi.id/ja/teknologi/458420

２００万件情報漏えいか＝「ピューロランド」不正アクセス―サンリオ(2/7)
https://www.risktaisaku.com/articles/-/99746

米国 司法省 6,500万ドルの暗号通貨ハッキング・スキームでカナダ人男性を起訴(2/9)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2025/02/post-39895c.html

自分の氏名が犯罪に使われることも。流出したら消せない「個人情報」の守り方をネットセキュリティーの専門家に聞いた(2/9)
https://nordot.app/1261065351566295103

違法行為を助長する「ダークウェブ」とは何か？　その秘密と安全対策(2/9)
https://forbesjapan.com/articles/detail/76954

【JS/TS】Javascript/Typescriptで`null`や`undefined`撲滅！？(2/8)
https://zenn.dev/terusi/articles/abd692e1c2df69

カナダ CCCS 政府のセキュリティに関する方針と「ネットワークプロトコルの安全な設定に関するガイダンス 第3版（ITSP.40.062）」(2/9)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2025/02/post-df4c3d.html

イーロン・マスクのDOGEが、AIチャットボット「GSAi」を開発している(2/9)
https://wired.jp/article/doge-chatbot-ai-first-agenda/

ロボット工学、4年を形作る2025つのトレンド(2/9)
https://ja.futuroprossimo.it/2025/02/robotica-4-tendenze-che-plasmeranno-il-2025/

IBMの企業向けオープンソースAI「Granite」の勝算(2/8)
https://news.yahoo.co.jp/articles/c1dcf52b059c35680c057c49157b121f99e9b996

カスペルスキーは2024年を通してRobloxゲームで1600万件のサイバー攻撃を見つけました(2/9)
https://voi.id/ja/teknologi/458412

政府効率化省（DOGE）の機密財務記録へのアクセス　米連邦判事が阻止(2/9)
https://www.epochtimes.jp/2025/02/282084.html

電車の改札もクレカで　快適な移動へタッチ(2/9)
http://allatanys.jp/blogs/26122/
エモーショナル分析

死にたい死にたいって言うけど、津波が来たら死ぬ気で逃げる

これを例にしてエモーショナル分析をしていきます。

感情分析を数値化するためには、以下のように評価スケールを設定して、各部分の感情を点数化します。
ここでは、ポジティブな感情を0～100のスケールで評価し、ネガティブな感情も同様に点数化します。

:::note info
点数化のスケール
:::
| |  | 
|:-:|:-:|
|  ポジティブ感情:  | 0（全くない）〜 100（非常に高い）  |   
| ネガティブ感情:  |  0（全くない）〜 100（非常に高い）  |   





:::note info
文の分解とスコアリング
:::
「死にたい死にたい」というフレーズ

|  |  |
|:-:|:-:|
|  ネガティブ感情:  | 90（強い絶望感や自殺願望）  |
|  ポジティブ感情:  | 0（この部分にはポジティブな感情は含まれない）  |





「津波が来たら死ぬ気で逃げる」というフレーズ

|  |  |
|:-:|:-:|
|  ネガティブ感情:  | 30（危機的な状況に対する不安を含む）  |
| ポジティブ感情:   |  80（自己保存の意志や生きる意欲） |



全体の感情スコアリング
ネガティブ感情の合計:

| 1 | 2 |
|:-:|:-:|
|   「死にたい死にたい」|   → 90|
|  「津波が来たら死ぬ気で逃げる」 |   → 30|

- **総合**: 0 + 80 = 80  

---  

## 最終スコア  
- **ネガティブ感情**: 90  
- **ポジティブ感情**: 80  

### 感情のバランス  
- **感情バランススコア**:  
  - ネガティブ感情の強さ: 90  
  - ポジティブ感情の強さ: 80  

最終的に、ネガティブ感情がやや強く、全体的には深刻な感情状態にあるが、生存意欲が表れていることが示されます。  

---  

## 結論  
この分析により、文章の感情を定量的に評価しました。ネガティブな感情が高い一方で、ポジティブな感情も強く、複雑な心理状態を示しています。この結果を基に、より詳細な分析や理解が可能になります。
GithubPagesにSPAで公開する

GoogleAnalyticsの検証をしたく、ホスティングする必要が生じたので簡単に無料でできるGithuPagesを試してみます。
React×TypeScriptの環境で行っています。
Viteを利用しているので、適宜ビルドの出力先のディレクトリ名を読み替えてください。

## 手順
コマンド、package.jsonの修正内容はまとめて手順の後ろに記載しています。

1. Repositoryの作成（Public）
2. Reactプロジェクトに`gh-pages`をインストール
3. `package.json`にhomepageを追記
4. `package.json`のscriptに追記
4. `vite.config..ts`に追記
5. mainブランチにpush
6. デプロイ(ここで自動でブランチ作成される)
7. GitHubのリポジトリの設定（Pages）を変更

```terminal
npm install gh-pages --save-dev
```
  
```package.json 
"homepage": "https://<github_userName>.github.io/<repository_name>"
```

```package.json
"script": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist" // {dist | build} ビルド出力先に読み替え必要
}
```

```vite.config.ts
export default defineConfig({
  plugins: [react()],
  base: '/<repository_name>/'
})
```

```terminal
npm run deploy
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2779836/0ebe4b31-d7ee-d601-09ea-b6ba69c8c676.png)





## 追加設定
`React Router`などのルーティングライブラリを使用している場合は、追加の設定が必要になります。
basenameをGithubPagesと一致させてあげます。

## GithubActionを用いた自動デプロイ
プロジェクトルートに`.github/workflows/deploy.yml`を作成

```.github/workflows/deploy.yml
name: vite-app-deploy
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: npm
      - name: Install dependencies
        run : npm install
      - name: Build project
        run : npm run build
      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with: 
          branch: gh-pages
          folder: dist
          clean : true
```

Repositoryの
設定 > Actions > General > Workflow permissions
を`Read and write permissions`にｈ
JavaScriptで「HTMLファイルに直接JavaScriptのコードを記述する」の動作を確認してみた。

# 概要

JavaScriptで「HTMLファイルに直接JavaScriptのコードを記述する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/javascript/before/index2.html

# 実装

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

```sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript サンプル</title>
</head>
<body>

<p>
この下に JavaScript を使って文字列を出力します。
</p>

<script>
document.write("<p>JavaScriptのテスト</p>");
</script>

</body>
</html>
```

ブラウザでの実行結果は以下の通りです。

![Screenshot from 2025-02-11 03-18-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/5090860b-6fa7-a4f3-f869-eefb3eabef26.png)

# まとめ

何かの役に立てばと。
【GPT-3.5】「これは乱数列です。3,<?>」←最初に渡す数字で結果に偏りが出るか？

~~今更GPT-3.5です~~

gpt-3.5-turbo-instructを使って次にくるトークンを予測させて遊んでいたら、ふと思いついたネタです。

`"これは0〜9の乱数列です。 3, "`の続きを予想させるのですが、このとき最初に渡す数字(ここでは3)を変化させると結果に偏りが生まれるか？という実験です。

# 問題設定
プロンプト
`"The following is a random sequence of numbers with a lower limit of 0 and an upper limit of 9.\n\n3, "`

今は仮で3にしていますが、実際は0〜9を順番に入れてモデルに渡します。
それぞれ100回予測させて集計します。

# やってみた
```python
from collections import Counter
import seaborn as sns
import pandas as pd
import matplotlib.pyplot as plt
import openai
import tqdm.auto as tqdm

openai.api_key = "..."

# 入力28トークン・出力1トークン -> 1000回実行すると$0.044かかる(たぶん)
def random_number_by_gpt(n=0):

    response = openai.Completion.create(
        model="gpt-3.5-turbo-instruct",
        prompt=f"The following is a random sequence of numbers with a lower limit of 0 and an upper limit of 9.\n\n{n}, ",
        max_tokens=1,
    )

    try:
        generated_number = int(response.choices[0].text)
    except ValueError:
        generated_number = None

    return generated_number

# ------------------------------

# 予測させる
response_numbers = []
for n in tqdm.tqdm(range(10)):
    response_numbers_inner = []
    for _ in tqdm.tqdm(range(100)):
        response_numbers_inner.append(random_number_by_gpt(n))
    response_numbers.append(response_numbers_inner)

# 集計とプロット
frequency_counts = [Counter(numbers) for numbers in response_numbers]

frequency_df = pd.DataFrame(frequency_counts).fillna(0).sort_index(axis=1)
frequency_df = frequency_df.T
frequency_df = frequency_df.iloc[::-1]

plt.figure(figsize=(10, 8))
sns.heatmap(frequency_df, annot=True, cmap="YlGnBu", fmt=".0f")
plt.title("Frequency Counts Heatmap")
plt.xlabel("Starting Number")
plt.ylabel("Generated Number")
plt.show()

```

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2316693/50d11a5e-46f6-b719-b57d-3080fb58e523.png)

- 最初に渡された数字とその隣はほぼ出さない
- 4,5個くらい離れた数字をよく出す
- 7->2と3->7が異常に出やすい
 
ということになりました。
本当にランダムならば、最初に渡された数字に関わらず等確率で出力されるはずです。
まあ等確率なわけないとは予想していましたが、ここまではっきりだとは……
今回の範囲だと、渡された数字と同じ数字は1回も出力していませんね。

# 今後の課題(？)
- GPT-4だとどうなのか？
- もっと値の範囲を増やすとどうなるのか？
**お金持ちの方、頼みました！！**
Windows環境でのGitインストール注意点

久々にgitインストールしようとしたら忘れていたので。
個人的な備忘録です。

# 初期ブランチの名前

新しいリポジトリのブランチのデフォルト名を`main`にしておきたいときはここを変更しておく

![screenshot01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3938733/41c63afe-6fb2-dd15-5018-c81e534b566a.png)

:::note info
**余談**
masterからmainにかわった理由は下記を参照
[デフォルトのブランチ名がmasterからmainになった理由](https://zenn.dev/toshiokun/articles/837d4005b7339b)
:::

# 改行コードの扱い

チェックアウト時に改行コードを変換せず、コミット時に`CR+LF`を`LF`に変換する

![screenshot03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3938733/4a08b32e-e572-1808-37ce-1dfb446e8d55.png)

:::note warn
**注意**
デフォルトは1つ目。
ただしこれだとチェックアウト時に`LF`が`CR+LF`に変換されてしまうので、

- Dockerやビルドツールなど`LF`想定のところでエラーが発生する
- Linux系サーバにアップロードする際、`CR+LF`ファイルが混入する

などなどが起きてしまうことも。
:::

# その他参考

https://qiita.com/HyunwookPark/items/d399f6959fc922a15ee1

https://qiita.com/yKanazawa/items/0d8c8a3158ee2d9e8f91

https://qiita.com/uggds/items/00a1974ec4f115616580
Apollo ClientのfetchPolicyを考える

# はじめに
現在の開発では、API 通信に REST API ではなく GraphQL を使用しており、そのデータ取得には Apollo Client（以下 AC）を利用しています。

AC にはデータ取得時に `fetchPolicy` を設定できる機能があり、毎回ネットワークにアクセスしてデータを取得するのか、それともキャッシュを利用するのかなどを制御できます([公式Doc](https://www.apollographql.com/docs/react/data/queries))。
私自身、開発の際に `fetchPolicy` を意識していませんでしたが、その結果として「データを更新したのに最新データが反映されない」といった軽微なバグが発生することがありました。一方で、`fetchPolicy` を適切に設定することで、パフォーマンスの向上にもつながることがわかりました。

本記事では、AC の `fetchPolicy` について簡単にまとめていきます。

# そもそもfetchPolicyって？
`fetchPolicy` とは、AC が GraphQL のデータを どのように取得するか を制御するための設定です。

例えば、

- キャッシュがあればそれを使うのか？

- 毎回ネットワークから取得するのか？

- キャッシュとネットワークの両方を使うのか？

といった動作を決めることができます。

# fetchPolicyの種類と使い方

fetchPolicyには6つの種類があります
| fetchPolicy         | 説明                                          |
| ------------------- | ------------------------------------------- |
| `cache-first`       | デフォルト。キャッシュがあればキャッシュを優先し、なければネットワークから取得 |
| `cache-and-network` | キャッシュを すぐに返しつつ、並行してネットワークから最新データを取得     |
| `network-only`      | 常にネットワークからデータを取得し、キャッシュを使用しない               |
| `cache-only`        | キャッシュのデータのみを使用し、ネットワークリクエストを行わない            |
| `no-cache`          | 常にネットワークからデータを取得し、キャッシュには保存しない              |
| `standby`           | クエリは実行せず、後で明示的に実行されるまで待機                    |


という風になっています。個人的に一番したの`standby`は使用したことがないので、あまり使い所はわかっていません。

## cache-first（デフォルト）
``` tsx
  const { data, loading, error } = useQuery(GET_USERS, {
    fetchPolicy: "cache-first",
  });
```

- 初回リクエスト時: ネットワークからデータを取得し、キャッシュに保存。

- 2回目以降: キャッシュがある場合はそれを利用し、ネットワークリクエストは行わない。

パフォーマンスには最適だが、最新のデータを取得しづらい...。`refetch`を頻繁に使うケースとかはあまり使わない
ユーザーのプロフィール画像とかはこれが最適

## cache-and-network
``` tsx
const { data, loading, error } = useQuery(GET_USERS, {
  fetchPolicy: "cache-and-network",
});
```
- キャッシュにデータがあれば すぐに表示 する
- 並行して ネットワークリクエストを実行し、最新データが取得できたら UI を更新

これは結構便利、`refetch`の際はこちらを設定することが多い。

## network-only
``` tsx
const { data, loading, error } = useQuery(GET_USERS, {
  fetchPolicy: "network-only",
});
```
- 常にネットワークから取得し、キャッシュを使わない
- 最新のデータが保証されるが、ネットワークエラー時に表示できるデータがない

常に最新のデータが保証されて欲しい時はこちらを使うことが多い。ダッシュボードではこの設定してる

## cache-only
``` tsx
const { data, loading, error } = useQuery(GET_USERS, {
  fetchPolicy: "cache-only",
});
```
- キャッシュがあれば表示、なければ何もしない（エラー）
- ネットワークリクエストを行わない ため、オフライン時などに有用

この設定を使ったことがない。オフラインアプリや事前にキャッシュ読み込ませたい時などに使えそう

## no-cache
``` tsx
const { data, loading, error } = useQuery(GET_USERS, {
  fetchPolicy: "no-cache",
});
```
- 常にネットワークから取得するが、キャッシュには保存しない
- キャッシュ汚染を防げるが、毎回 API を叩くので効率は悪い

今の所開発でキャッシュに保存したくないという場面がないので使ったことがない。一回限りの検索とか、一時的なデータ取得の時は便利そう

# `network-only`と`no-cache`の違いって？
`network-only` と `no-cache` の違いは、最初はあまり明確に理解できてなかったのですが、
例えば、`network-only` は 毎回ネットワークから最新のデータを取得し、取得したデータはキャッシュに保存されます。そのため、同じデータ (A) を別のコンポーネントや処理で再度取得する場合、キャッシュに保存されたデータを利用できます。
一方、`no-cache` は 毎回ネットワークからデータを取得し、取得したデータをキャッシュに保存しません。そのため、同じ A のデータを別の場所で取得しようとすると、再度ネットワークリクエストが発生します。

このように、`network-only` は最新データを取得しつつキャッシュを活用できるのに対し、`no-cache` は 常にネットワークリクエストを発生させ、キャッシュを一切使用しない という違いがありそうです。

# まとめ
意識しなくても開発は進めることはできますが、`fetchPolicy` を適切に設定することで パフォーマンスの最適化や軽微なバグの防止 につながります。
さまざまな設定を試しながら、どのような挙動をするのかを確認し、楽しみながら開発を進めるといいかもです！
GenAIと共に歩むF5資格試験の道: Day1 〜 目標設定と基礎固め

初めてF5資格試験に挑戦するにあたり、**目標設定**と**基礎固め**の第一歩として、ChatGPTのサポートを活用してタスクを具体化しました。ここでは、Day1の取り組み内容とその振り返りを共有します。

---

## 目標設定と計画

F5資格試験に向けた勉強の全体像を把握するため、まずは以下のステップで計画を立てました。

- **試験の選定:**  
  ChatGPT *o3-mini* に相談し、どの試験に挑むか検討しました。

- **暫定的な目標設定:**  
  半年を見据えた大目標を設定し、さらにWeekly、Daily、そして各タスクレベルにブレークダウンする計画を立てました。  
  ※ ここでは、ChatGPT *o3-mini-high* に自分の技術経歴を伝えて作成依頼。

- **コミュニティへの参加:**  
  DevCentralへの登録、BIG‑IP Next Academy、F5 Community MVPへの参加申請も同時に実施。実際の技術情報やフィードバックを得るため、コミュニティの活用は非常に有意義です。

---

## Day1のタスク内容

ChatGPTから提案されたDay1のタスクは以下の通りです。

```yaml:title=Day1タスク
Day1: 2月10日（月）
目標: F5の全体像とF5製品の概要を理解する
タスク:
  - F5公式サイト（[https://www.f5.com/ja_jp/](https://www.f5.com/ja_jp/)）にアクセスし、製品概要ページをざっと確認する
  - DevCentralの「Getting Started」または「Introduction to F5」系の記事を1本読む
  - 重要な用語（BIG‑IP、TMOS、LTM、iRulesなど）のリストを作成し、簡単な定義をメモする
```

---

## 実際に行ったアクション

### 1. DevCentral記事の読破

- **「Getting Started on DevCentral」**  
  F5製品の全体像をつかむため、まずこちらの記事を読んで基本情報を把握しました。

- **「Getting Started with BIG‑IP Next: Fundamentals」**  
  より詳細な技術情報に触れるため、こちらの記事も併せて読み、理解を深めました。

記事中の不明点は、その都度ChatGPT *o3-mini-high* に質問することで、疑問を解消しながら学習を進めました。

### 2. 用語集の作成

記事内で頻出する専門用語について、下記のように自分なりに整理し、簡単な定義をメモしました。

- **BIG‑IP:**  
  F5の主要製品で、アプリケーションデリバリやロードバランシング機能を提供するハードウェア/ソフトウェア製品。

- **TMOS:**  
  BIG‑IPのオペレーティングシステム。高いパフォーマンスと柔軟な制御が特徴。

- **LTM:**  
  Local Traffic Managerの略で、トラフィックの負荷分散を担当する機能。

- **iRules:**  
  トラフィック処理をカスタマイズするためのスクリプト言語。シンプルな記述で複雑な制御が可能。

---

## 振り返りと今後の展望

Day1では、F5の全体像や製品概要に関する基礎知識を着実に押さえることができました。ChatGPTの助言のおかげで、タスクの具体化や不明点の解消がスムーズに進み、今後の学習の土台が築かれたと感じています。

**今後の予定:**

- **Day2:**  
  F5公式ドキュメントやDevCentralの記事を活用し、BIG‑IPのアーキテクチャの基本構成と主要コンポーネントの役割を図解と共に整理する予定です。

- **資格取得に向けた継続学習:**  
  初期のF5‑101/201教材で基礎を固めた後、週ごとの計画に沿って仮想環境でのハンズオン実践や模擬試験を取り入れ、体系的な知識の定着と実践力の向上を目指します。

---

## まとめ

今回のDay1では、F5製品に関する基礎知識の収集と、試験勉強の全体像を整理することができました。ChatGPTのサポートを受けつつ、具体的なタスクに落とし込むことで、学習のモチベーションを高めることができました。今後もこの調子で、一歩一歩確実に前進していきたいと思います。

皆さんも、自分に合った学習方法やツールを活用して、ぜひ目標に向かってチャレンジしてみてください！

[参考リンク: F5公式サイト](https://www.f5.com/ja_jp/)  
[参考リンク: DevCentral](https://devcentral.f5.com/)

---

以上、Day1の振り返りでした。次回の更新もお楽しみに！
MacからラズパイにSSHで接続する

# はじめに

こんにちは、エンジニアのkeitaMaxです。

先日初めてラズパイを購入しました。

その際に、MacからラズパイにSSHで接続をしたいと思い調べたことを記事にしたいと思います。

# ラズパイの設定

ラズパイの設定をします。

https://raspi-school.com/ssh/

上記の記事通りに進めていきます。

僕はラズパイでアカウント作成まで行っていたので、[Raspberry Pi ConfigurationからSSHを有効化]から行いました。

ラズパイアイコン → 設定 → Raspberry Pi の設定 

をクリックして設定を開きます。

Interfacesタブを開き、SSHをオンにします。

その後、ターミナルを開き以下のコマンドを打ちます。

```
sudo raspi-config
```

これで準備完了です。

# mac

ラズパイが接続しているWi-Fiに接続をし、ターミナルで以下のコマンドを打ちます。

ちなみにラズパイのユーザ名とパスワードは

ユーザ名：`test`
パスワード：`pass`

にしました。

```
ssh test@raspberrypi.local
```

その後、設定したパスワードの`pass`を入力すれば完了で、もうアクセスができます。

# おわりに

Macからいじれるのは嬉しいです。設定もめちゃくちゃ簡単なのでありがたいです。

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://raspi-school.com/ssh/
pipenv install にて古いプロジェクトをインストールしようとしたときにエラーが発生することがある

# はじめに

pipenv で jaconv をインストールすると、以下のようなエラーが発生してインストールできないことがある。 Ubuntu 24.04 LTS で発生を確認。

> ERROR: Could not build wheels for jaconv, which is required to install pyproject.toml-based projects

こちらが再現性はないが、解決することがあったので忘れないように手順だけをメモする。

# 詳細条件

- asdf でインストールした Python 3.10.16 および Python 3.11.11 にて確認
- pipenv 2024.4.1 にて確認

# 解決手順

pipenv install を行うとエラーになるが、そのあと `pipenv run pip install --upgrade pip "setuptools<69" wheel` を１度実行すると、同一の Python バージョンではたとえ `pipenv --rm` を行って再インストールを行っても正常にインストールができるようになる。 
また、古い setup.py を持つプロジェクトに対して発生するので、install_layout が廃止された setuptools のバージョン 69 未満 ("setuptools<69") を指定している。
初めてのLT登壇を振り返ってみた

# 概要
渋谷で毎月開催しているイベントにて登壇させていただきました。
このイベントは公開当日にLT枠が埋まる位大人気のイベントです。
その時の振り返りをレポートします。
- 日時
  - 2024年11月21日 18:00 - 20:00
- 場所
  - WeWork 渋谷スクランブルスクエア
- イベントURL

https://metaps.connpass.com/event/332969/
- 登壇スライド

https://speakerdeck.com/dochin2635/sugudekiru-yun-song-ye-deyatutemitaye-wu-xiao-lu-hua-3xuan

# 気づき
- リアクションを取ってもらうことが難しい
- 登壇で頭がいっぱいになる（脳のリソースがない）
- PCの操作が手間に感じた
- 10分という時間管理が難しい
- 聞き手の大切さ
聞いてない人ばかりだと自信が持てなくなる
逆に、表情の良い人がいると安心する

# 良かったこと
- カンペなし、スライドのみ
- 声が聞き取りやすかった
- 周囲の様子を感じられたこと
- 10分以内に終われたこと
- 登壇後、声をかけてもらえたこと

# 反省点
- 自動化して効率化の話題だが、その後の効果説明がなかった
- 気持ちに余裕を持ちたい
- PCを操作しない（クリッカーを使う）
- スライドの雛形

# 最後に
初LT登壇は緊張して相手に伝わっているのか、ずっと不安でした。
登壇が終わった後、

「よくできてたよ！」
「勉強になったよ！」

と言ってもらえて嬉しかったです。
登壇者以上に聞き手の表情やリアクションが大切なんだなと感じました。

やっておいた方が良いことは、自分のキャッチコピーを決めて発表することです。
登壇内容は忘れても、自分のことを覚えてもらえる確率が上がります。
自分を知ってもらうのは大切です。

最後に、
登壇の場を設けていただきました株式会社メタップスホールディングスの皆様、本当にありがとうございました。

# おまけ
今月同じイベントで２回目の登壇をさせていただきます。
もしよろしければ、参加いただけると幸いです。

https://metaps.connpass.com/event/341943/