OmniAICreator/Qiita-1.07M huggingface dataset:
電験3種の合格者数の推移について

# はじめに
電気主任技術者試験は、電気関係の仕事をしている方にとってかなり認知度の高い試験である。
電験３種は、そのような試験の登竜門として存在する。合格の方法の一つに科目合格制度を活用するといった手もある。
これは、３年間しか有効ではない。そこで、今回は科目合格制度が導入された前後で合格率がどのように変化したのかを調査しグラフ化する。
#データセット
以下の公式ＨＰのデータを使用した。（昭和60年度から令和3年までのデータである。）

https://www.shiken.or.jp/chief/third/result/

# 人数の変化
まず、絶対値（受験人数）の推移を調査した。ところ以下のようなグラフになった。
![exam_data.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/f6bd4dc3-7ddc-77e4-50d5-b9565b1fbfb5.png)

科目合格制度が導入された平成7年（1995年）前後で受験申込者数が大幅に増加していることが分かる。これは、当時において新制度の導入により注目が高まったため、若しくは需要の増加のためといったことが考えられる。

# 割合の変化
次に、受験者数を受験申込者数で除した受験率、合格者数を受験者数で除した（全科目）合格率、科目合格者数を受験者数で除した（科目合格者数）についての推移を以下のようにグラフ化した。

![exam_data_ritu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/7711b252-37a7-3284-130d-2d01cb7f80ef.png)

これにより、新制度が導入された直後では、受験率と合格率が微増しているのが分かる。これは、試験が新方式により例年と比較して解きやすくなったことによるものと考えられる。

一方で、以降では、科目合格率は、急激に減少して合格率、受験率も一定水準に落ち着いた。したがって、CBT試験が採用された令和3年以降にももしかしたら同様な傾向がみられるかもしれない。

# まとめ

今回は、電験３種試験において科目合格制度が導入された前後における合格者数の推移等をグラフ化した。これにより、電験３種試験では新方式になる年度前後で問題の傾向や難易度が大幅に変化し受験者数が、変化する可能性がある。
ファイル名を変更(小文字->大文字)したのに、gitに追跡されない??

# はじめに
 `getData.php`を`GetData.php`にリネームしてpushしたのに、PRを確認するとファイル名が変わってない???　ローカルでは`GetData.php`になってるのに...
 今回はこの問題の解決方法を解説していきます。

# なぜgitはファイル名の更新を追跡してくれなかったのか？
Windowsのファイルシステム(NTFSやFAT)とmacOSのファイルシステム(HFS+やAPFS)は、デフォルトで大文字と小文字を区別しないようになっています。
- Windowsは先輩であるMS-DOSとの互換性を重視して、大文字と小文字を区別しない文化が引き継がれた。
- macOSは一般ユーザ向けの使いやすさを重視して、デフォルトで大文字と小文字を区別しない設定になっている。(変更可能)

このため、小文字から大文字に変更しただけのファイル名変更はGitが正しく認識できなかったみたいです。

また、localでは`GetData.php`のままだったのはmacOSが大文字小文字の情報を保持してくれるからみたいです。(ちょっと混乱する..)

# 解決方法
### ファイル名を変更する場合

```php
git mv /path/to/getData.php /path/to/GetData.php
```

### ディレクトリ名を変更する場合
ファイル名の変更と違い、ディレクトリはGitが直接追跡しないため、一旦違う名前にするのが良いようです。

```php
git mv app/ app_temp/ //ディレクトリを変更した、と認識させる
git mv app_temp/ App/ //GitがApp/を追跡できるようにする
```

# 最後に
参考になれば幸いです🍏
PythonでDNSヘルスチェックとTeams通知を実装する方法

# PythonでDNSヘルスチェックとTeams通知を実装する方法

このまとめでは、Pythonを使ってDNSフォワーダーの名前解決を監視し、エラーが発生した場合にMicrosoft Teamsへアダプティブカードで通知する方法を解説します。

---

## 🎯 **学んだポイントまとめ**

### **1. DNSヘルスチェックの仕組み**
- Pythonの`dns.resolver`を使って、指定したDNSフォワーダーに対する名前解決を行います。
- 名前解決失敗時に発生する`NXDOMAIN`や`Timeout`などのエラーを`try-except`でキャッチし、リストに格納します。

### **2. Teamsにモダンなアダプティブカードで通知**
- **Teamsのアダプティブカード**を使用し、見やすい形式でエラーメッセージを表示。
- カードには、エラーの詳細、環境情報、日時、さらなる詳細を確認するためのリンクボタンが含まれています。

---

## 💡 **実際の実装コード（簡略版）**

### **DNSヘルスチェック部分**
```python
import dns.resolver

try:
    resolver = dns.resolver.Resolver()
    resolver.nameservers = ['8.8.8.8']  # 例としてGoogleのDNSを使用
    answer = resolver.resolve('example.com', 'A')
    resolved_ips = [str(ip) for ip in answer]
    print("名前解決成功:", resolved_ips)
except dns.resolver.NXDOMAIN:
    print("NXDOMAINエラー：ドメインが存在しません")
except dns.resolver.Timeout:
    print("タイムアウトエラー")
except Exception as e:
    print(f"その他のエラー: {str(e)}")
```

### **Teamsへの投稿**

```python
import requests
import json
import os

TEAMS_WEBHOOK_URL = "YOUR_TEAMS_WEBHOOK_URL"

def send_teams_notification(title, message_text):
    headers = {'Content-Type': 'application/json'}
    
    # アダプティブカードのペイロードを作成
    adaptive_card_payload = {
        "type": "message",
        "attachments": [
            {
                "contentType": "application/vnd.microsoft.card.adaptive",
                "content": {
                    "type": "AdaptiveCard",
                    "version": "1.4",
                    "body": [
                        {
                            "type": "TextBlock",
                            "size": "Large",
                            "weight": "Bolder",
                            "text": title
                        },
                        {
                            "type": "TextBlock",
                            "text": message_text,
                            "wrap": True
                        },
                        {
                            "type": "FactSet",
                            "facts": [
                                {"title": "環境:", "value": os.getenv('STAGE', 'N/A')},
                                {"title": "日時:", "value": "現在日時をここに挿入"}
                            ]
                        }
                    ],
                    "actions": [
                        {
                            "type": "Action.OpenUrl",
                            "title": "詳細を確認",
                            "url": "https://monitoring.yourcompany.com/details"
                        }
                    ]
                }
            }
        ]
    }

    response = requests.post(TEAMS_WEBHOOK_URL, headers=headers, data=json.dumps(adaptive_card_payload))
    if response.status_code == 200:
        print("Teams通知に成功しました")
    else:
        print(f"Teams通知に失敗しました。ステータスコード: {response.status_code}")

```
[Django] AbstractUserの実装をカスタムユーザーに用いるとImproperlyConfiguredエラーが出る

# 環境
```
MacOS Sequoia Version 15.3
Python 3.12.8
Django 5.1.6
```

# エラー内容
```sh
$ python manage.py makemigrations        
Traceback (most recent call last):
  File "/Users/path-to-project-directory/.venv/lib/python3.12/site-packages/django/apps/config.py", line 235, in get_model
    return self.models[model_name.lower()]
           ~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^
KeyError: 'myuser'

During handling of the above exception, another exception occurred:

#（中略）

  File "/Users/path-to-project-directory/.venv/lib/python3.12/site-packages/django/contrib/auth/__init__.py", line 194, in get_user_model
    raise ImproperlyConfigured(
django.core.exceptions.ImproperlyConfigured: AUTH_USER_MODEL refers to model 'issuing.MyUser' that has not been installed
```
※ 今回作成したカスタムユーザーモデルの名前は `MyUser` です

# 経緯
　このエラーが出た経緯は次の通りです
- 拡張性の観点から、`AbstractBaseUser` を継承したカスタムユーザーを作成したかった[^3]
- しかし、実装の大部分は `AbstractUser` と被っている
- `AbstractUser` の公式の実装をベースに、必要な部分だけ改変することにした

　改変の内容は以下の通りです
- まず、`AbstractUser` と `UserManager` の実装をコピペした
- コピペしたコードに以下の変更を加えた
    - `AbstractUser` のクラス名を `MyUser` に変更
    - `UserManager` のクラス名を `MyUserManager` に変更
    - `AbstractUser` 内の `objects = UserManager()` を `objects = MyUserManager()` に変更
- `python manage.py makemigrasions` を実行した
- すると、上記のエラーが出た

# 解決策
　カスタムユーザークラス内の、`class Meta` の部分から、`abstract = True` の行を削除すると、解決しました。

```django/django/contrib/auth/models.py
class AbstractUser(AbstractBaseUser, PermissionsMixin):
    """
    An abstract base class implementing a fully featured User model with
    admin-compliant permissions.

    Username and password are required. Other fields are optional.
    """

    username_validator = UnicodeUsernameValidator()

    #（中略）

    EMAIL_FIELD = "email"
    USERNAME_FIELD = "username"
    REQUIRED_FIELDS = ["email"]

    class Meta:
        verbose_name = _("user")
        verbose_name_plural = _("users")
        abstract = True # ← この行を削除する

    #（後略）
```
 
# 補足
　Django のモデルに対して定義できる `Meta` クラスは、モデルに付加情報を与えることができます[^2]。よく用いられる項目として、以下のようなものがあります。
- `verbose_name `
- `verbose_name_plural`
- `ordering`

　ここで、`abstract` という項目もあり、この項目を `True` にすると、そのモデルは `Abstract base class` になります。`Abstract base class` には、以下のような特徴があり、同じ特徴を持ったモデルを複数個作成する場合に、便利な機能になっています[^1]。
- DB にテーブルが作成されない
- 他のモデルの基底クラスとして用いると、`Abstract base class` のフィールドが継承先にも追加される

`AbstractUser` は `Abstract base class` のため、テーブルとして使用したければ、`abstract=True` を削除する必要があったというわけでした。

[^1]: https://docs.djangoproject.com/en/5.1/topics/db/models/#abstract-base-classes
[^2]: https://docs.djangoproject.com/en/5.1/ref/models/options/
[^3]: https://docs.djangoproject.com/en/5.1/ref/models/options/
PlayStation2/OpenPS2Loader.ELF

PlayStation2のHomebrew(自家製ソフト)
OpenPS2Loaderの現状
PlayStation2のGAMEをCd/DVDなしで動かせるようにする
古くてディスクを読み取らなくなるマシンなのでこのようなソフトがあるようです。

私のはSCPH-37000LですがwebからFreeMcBoot(以後FMCB)のインストーラをダウンロードする。
2025年2月現在でVersion 1.966が最新でしょうか。

その前にFMCBが手元にある必要があります。
ヤフオクやAmazonでも売っていますが、友達から借りてください。

FMCBで色んなストレージにアクセスが可能にする

ところでPS2のFileの管理にはuLaunch.ELFを使います。
COPYやPASTE,RENAME,DELETE等を使い管理をします

uLaunch.ELF起動時の画面です
|-- mc0:/ MemoryCard slot1(8MB～128MBまで)
|-- mc1:/ MemoryCard slot2(8MB～128MB)
|-- hdd0:/ SCPH-20401(SONYの公式は40GBですが何種類かありますしHDDは他にも2TBまででSSDも可能のようです)
色んな方が載せ替えていますが厚型本体でHDDを載せるアダプターが必要
サードパーティーのネットワークアダプターも売っていますしHDD以外のドライブも使えるようです
新しい薄型の本体では今はHDDを使えません。
|-- mass:/ USB-MemoryStick等
    `-- cdfs:/ 通常のCDやDVD(OriginalGameのCD&DVDのDiscにpatchをあててコピーしたBackupDiscもココ)

WindowsでFMCBのインストーラをzip展開してから外付けUSBメモリー等に展開したファイルを移動させて、手元のFMCBでuLaunch.ELFを使いUSBにメモリーに移動させたFMCBのPackage内にあるインストーラ(FMCBInstaller.elf)を起動します
そこでインストーラに従いmc0.mc1.hdd0のどこかにFMCBをインストールします
mcなら(FMCB)フリーメモカブート
HDDなら(FHDB)フリーハードディスクブート

[<<注意>>]
この時だけ購入したFMCBが必要です。詳しくは検索してください。

その後はWindowsとかスマホで
PSX-PLACE という所から OPL(OpenPS2Loader.ELF)というフリーウェアをダウンロードします。

[2025年2月]
OpenPS2Loader.elf Version1.2.0.6beta
unofficialOpenPS2Loader.elf Version1.2.0
このあたりでしょうか。

このOPL(Version1.2.0.6beta)でメモリーカードスロットにMicroSDCard(MX4SIO)アダプターを付けて
Windowsで作成(ディスクイメージをexfatでフォーマットしたUSBストレージに入れる等)したGAMEのISOファイルの入ったストレージ
例えば、以前から可能だった

USBメモリー
HDD
SMB(Network経由)
に加えて
PS2の厚型(昔のタイプ)にあるiLink(iEEE1394)
どのPS2にもあるメモリーカードスロットからMX4SIOが追加されておりAmazonでもMX4SIOは購入が可能です

CDやDVDのドライブを使わずにゲームを起動させます。

最後に自分の理想のPS2LinuxのDiscDriveなしでの起動でしたがこの方法でも、うまく動きませんでした。

PSX-PLACEというサイトでは他にも多数のHomebrewがあります
基本的に
OpenSourceSoftware？
FreeSoftware？
ただしMX4SIOはハードウェアが必要です
無料でプレステの*.ELFのダウンロードや導入
自家製ゲームのダウンロードと実機でのプレイが可能

ネックはFreeMcBootが必要なくらいです。

詳しくはPSX-PLACEとかPS2-HOMEを検索してください。
SalesfroceインテグレーションユーザーのIPアドレスについて

SalesfroceインテグレーションユーザーのIPアドレスについて確認しました

参考記事

>ベストプラクティス: CRM Analytics (Tableau CRM) のインテグレーションユーザおよびセキュリティユーザの管理

https://help.salesforce.com/s/articleView?id=000384569&type=1


＞インテグレーションユーザプロファイルおよびセキュリティユーザプロファイルの IP 範囲制限と共に [すべての要求でログイン IP アドレスの制限を適用] ([設定] | [セキュリティのコントロール] | [セッションの設定] | [セキュアな接続 (HTTPS) が必要]) を有効にすると、内部プロセスがブロックされて、さまざまな問題が発生します。たとえば、アプリケーションの作成中やデータの管理中および他の製品エリアで IP 制限エラーが発生します。このセキュリティコントロールを有効にして、これらのプロファイルの IP 範囲を定義している場合、次の範囲も追加されていることを確認してください。
10.0.0.0/8 または 10.0.0.0 ～ 10.255.255.255

この内容からIP範囲は
10.0.0.0 ～ 10.255.255.255
で設定したほうがよさそうです
PHP学習メモ③

# 変数
変数とは「データの入れ物」

# 変数の宣言
変数を利用する前に
変数の名前とそこに格納できるデータの種類（データ型）を宣言しないといけない
例：＄msg　=　'YES'
YESという文字型をmsgという変数に格納

```ruby:
<?php
$msg = 'YES' ;
print $msg ; 
```
# 変数の命名規則
<table>
  <caption>変数の命名規則</caption>
  <thead>
    <tr>
      <th>No.</th> <th>規則</th> <th>良い例</th> <th>悪い例</th>
    </tr>
  </thead>
  <tr>
    <td> ① </td> <td>「＄名前」の形式</td><td> ＄name、＄msg </td><td> str、msg </td>
  </tr>
  <tr>
    <td> ② </td> <td>アンダースコア（ _ ）</td><td> ＄date、＄_name </td><td> ＄123、＄1date </td>
  </tr>
   <tr>
    <td> ③ </td> <td>アンダースコア（ _ ）と数値</td><td> ＄name_1、＄_msg2 </td><td>＄name-1</td>
  </tr>
   <tr>
    <td> ④ </td> <td>大文字　/　小文字</td><td> ＄val、＄Val </td><td> ー </td>
  </tr>
</table>

変数名に使う文字は、
**英数字、アンダースコア（　＿　）に限定する**　のが無難

予約語は混乱を招くので、利用しないほうがいい
×　＄if、＄for
予約語とはPHPであらかじめ意味が決められた単語のこと

# 可変変数
**変数名を変数の値によって決めることができる**　変数のこと
先頭に＄＄をつけると、変数名を別の変数の値で動的に決定できる

```ruby:
<?php
$x = 'title' ;
$title='PHP';
print $$x ; //結果:PHP 
```
ここでは ＄x の内容が評価された結果、＄titleと同じになる
したがって、「＄＄x」＝「＄｛＄x｝」

# 練習問題
<table>
  <caption>誤りはどれだ</caption>
  <thead>
    <tr>
      <th>①＄1data</th> <th>②＄HO＿F</th> <th>③＄文字列</th> <th>④＄IF</th> <th>⑤＄date-store</th>
    </tr>
  </thead>
  </table>
Swift学習：数値の比較演算

## 比較演算子
１．両辺が等しい：==
２．両辺が等しくない：!=
３．右辺が左辺よりも小さい：>
４．右辺が左辺以下：>=
５．右辺が左辺よりも大きい：<
６．右辺が左辺以上：<=

#### 記述例
```Swift
// 演算子（オペレーター）
let equal: Bool = 100 == 100
let notEqual: Bool = 100 != 100
let lessThan: Bool = 100 > 100
let lessThanOrEqual: Bool = 100 >= 100
let graterThan: Bool = 100 < 100
let greaterThanOrEqual: Bool = 100 <= 100
Swift学習：数値の計算

## 数値計算
#### 四則演算
１．足し算：+
２．引き算：-
３．掛け算：*
４．割り算：/

#### 記述例
```Swift
// 四則演算
let plus: Int = 1 + 1
let minus: Int = 1 - 1
let multiply: Int = 1 * 1
let divide: Int = 1 / 1
```
#### 剰余演算
割り算した際に発生する余りを算出する演算子：%

#### 記述例
```Swift
// 剰余演算
let surplus: Int = 10 % 3 // 余り１を算出
```

#### 注意点
計算する時はデータ型が同じでなければいけない

```Swift
// データ型が異なる定数
let integer: Int = 1
let double: Double = 0.5

let result: Double = inteher + doouble // コンパイルエラーが発生

let result: Double = Double(integer) + double // これは計算できる
【winscp】エラー：Received SSH2_MSG_CHANNEL_DATA for nonexistent channel 0の解決法(?)

## はじめに
結局根本的な原因の特定には至らなかったのですが、試してみて改善できたことを書き留めておきます。
このエラーの解決策がなかなか見つからず、日本語の記事も少なくてハマりました。

## 発生状況
ホスト(接続元)がwindows、クライアント(接続先)がLinux。
特定の接続先にドラックアンドドロップでファイルを転送した際に発生し、
セッションが途中で強制終了してしまう。

容量が小さいファイルは問題なくコピーできる。

## 解決策
**①対象ファイルをzip化してから転送**
圧縮して容量を小さくすれば回避できることがある。
接続先でunzipして展開すれば問題ない。

自分の場合はjarファイル(既に圧縮済み)で容量が大きすぎたので、
この回避策は使えず。

**②接続先の容量確認**
容量が少ないとこのエラーが起きることがあるらしい。
Linuxであれば以下のコマンドで確認できる
```
df -h
```

自分の場合、空き容量は十分にあったので、これでも解決せず。


**③転送元/転送先のパスを短くし、日本語を含めない**
自分の場合はこれで解決しました。

テスト用のモジュールを転送したかったので、
以下のようなディレクトリ構成にしていたのですが、
これがよくなかったみたいです。

【転送元】
```
|-username
| |-テスト用モジュール
|  |-検証
|  　|-module.jar
```
【転送先】
```
|-username
| |-テスト用モジュール
|  |-検証
```

パスが長いのがダメだったのか、日本語が含まれているのがダメだったのか、
以下のように修正したところ上手くいきました。

【転送元】
```
|-username
| |-temp
|  |-module.jar
```
【転送先】
```
|-username
| |-temp
```

## おわりに
この件に限らず、ディレクトリ名やファイル名に日本語を使うと、
エンコーディングの問題で思わぬエラーや不具合が起こることが多々あるようです。

今までは、
「なんでわざわざ英語で命名するんだ！日本語の方が分かりやすいのに💢」
とか思っていたのですが、こういった理由があったんですね（反省）。
ChatGPT先生へ「ChatGPTのログイン画面は何パターンありますか。」



# ChatGPT 先生へ
```
chatgptのログイン画面は何パターンありますか。
違いと、使い分けがあれば教えて下さい。
例)お帰りなさい
例)開始する
```
(回答抜粋)
>ChatGPTのログイン画面には主に 2パターン あります。
1.「お帰りなさい」パターン...
2.「開始する」パターン...

>2つの画面が必要な理由
1.ユーザー体験の向上...
2.セキュリティと認証の仕組み...
「お帰りなさい」は、端末に認証情報が保存されていることを前提としている。
「開始する」は、認証情報がない場合に適切なログインフローを提供する。
この2つのパターンにより、スムーズなユーザー体験とセキュリティが両立されています。
Swift学習：論理演算

## 倫理演算
真か偽を判定するプログラム（当たりとハズレみたいなもの）

#### 記述例
```Swift
// 論理積（かつ）
// 全ての論理式がtrueだと全体でtrueになる
// １つでもfalseがあると全体もfalseになる

let thisIsTrue: Bool = true && true // これはtrueになる
let thisIsFalse: Bool = true && false // これはfalseになる

// 論理和（または）
// 全ての論理式の中で１つでもtrueで全体でtrueになる

let thisIsTrue: Bool = true || false // これはtrueになる
let thisIsFalse: Bool = false || false // これは当然falseになる

// 否定
// 真と偽を逆にする

let isMyAccount: Bool = treu
let isNotMyAccount: Bool = !isMyAccount // isMyAccountはfalseになる
モジュールCommonJSとES Module

### まず、**CommonJS**って何？

CommonJSは、昔からNode.jsで使われてきたモジュールシステムだよ！要するに、JavaScriptがサーバーサイド（Node.js）でも使えるように作られたモジュールの仕組みなんだけど、**ESモジュール**が登場する前は、これが主流だったの！😎

### どんな違いがあるの？

#### 1. **モジュールのインポート/エクスポート方法**
- **CommonJS**：`require()`と`module.exports`を使う！
- **ESモジュール**：`import`と`export`を使う！

例：CommonJS
```javascript
// math.js
module.exports.add = (a, b) => a + b;

// main.js
const { add } = require('./math.js');
console.log(add(3, 2));  // 5
```

例：ESモジュール
```javascript
// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(3, 2));  // 5
```

#### 2. **同期 vs 非同期**
- **CommonJS**：**同期的**にモジュールを読み込む。`require()`で呼び出した瞬間に、そのモジュールが実行される！
- **ESモジュール**：**非同期**にモジュールを読み込むから、ブラウザで使うときもページの読み込みが速くなることがあるんだよ！

#### 3. **互換性**
- **CommonJS**は、主に**Node.js**用だから、サーバーサイドのコードでよく見かける！
- **ESモジュール**は、ブラウザでも使えるし、**新しいJavaScriptの標準**だから、これからはこっちを使うのが主流になっていくよ！

#### 4. **動作のタイミング**
- **CommonJS**：モジュールが最初に`require()`されるときに即座に実行される！だから、モジュールは1回しか読み込まれない！
- **ESモジュール**：`import`で読み込んだモジュールは、実行されるのは他の部分が必要なときだから、柔軟に読み込むことができるんだ！

### 結論！
- **CommonJS**は「昔のやり方」って感じで、サーバーサイドに特化したシンプルな仕組み！
- **ESモジュール**は「新しいやり方」で、ブラウザでもサーバーでも使えるし、**カッコよくて**未来に向かって進んでる感じ！🚀

どっちを使うかはプロジェクトによるけど、ESモジュールがメインになってきてるから、これからはこっち覚えておくのがベスト！👑
AI先生へ「【要望】このページの私の質問をMarkdown形式でリスト化して出力するボタンを追加して欲しい。」


```
私の質問をMarkdown形式でリスト化して出力して。Markdown形式でリストからアスタリスクは削除して。  1行目に、# 質問リスト　の文字を出力して。
```


```
私の質問をMarkdown形式でリスト化して出力して。
```
　(番号が表示されません。) 　
　私の今後必要コマンド???です。
・私の別ページでテスト

# ChatGPT 先生へ
【要望】このページの私の質問をMarkdown形式でリスト化して出力するボタンを追加して欲しい。

>現在、このインターフェースではボタンの追加はできませんが、以下にあなたの質問を Markdown 形式でリスト化しました。コピーしてお使いください。
>markdown
>＃ 質問一覧
>(省略)
もし、このリストを簡単に取得できるボタンが欲しい場合、ブラウザの拡張機能やスクリプトを活用すると便利かもしれません。

# 感想
人間の先生に、「私の質問をリスト化して出力して。」とは、言えませんね。(番号が表示されます。)
「私の質問をMarkdown形式でリスト化して出力して。」(番号が表示されません。)　　　　　　

無料使用で、多額のお金がかかっていて、動かないのは納得できます。
私の入力画面の要望が、**「人の手を加える事なく」AI先生が自動的に**私の気持ちをくみ取って画面対応してくれると、便利だと思いますが、ソレはソレで不気味です。

# ???　みなさまのアドバイスをいただけると幸いです。
**「回答の太文字だけをリスト化して出力して。」** に成功していません。
追番号を出力してもらえませんでした。

# 別件回答省略
chatgpt　の履歴を一括　削除する方法を教えて下さい。
chatgpt　の履歴の一部を削除する方法を教えて下さい。
上記を英語に翻訳して下さい。


# Gemini先生へ
(未)
TypeScriptのプロジェクトにhuskyをインストールする

## はじめに
今回はnpmを利用したインストール方法をまとめてみます

## 前提
PrettierとEslintの設定が終わっていること

## インストール
パッケージや設定をするためのコマンドを実行します

```
npm install --save-dev husky
npm install --save-dev lint-staged
npx husky init
```

## .husky/pre-commit の編集
生成された`pre-commit`を手動で編集します
※`npm test`はサンプルなので削除

```diff
- npm test
+ npx lint-staged
```

## package.jsonの編集
`.ts`と`.tsx`ファイルをチェックしたいので以下の設定を追記します

```package.json
    "lint-staged": {
      "*.{ts,tsx}": "prettier --write"
    }
  }
```

これで設定は完了です！
試しに適当なファイルをコミットしてみてください！


## おわりに
色々導入方法があったのですが2025年2月現在は上記で大丈夫そうでした
【JavaScript】変数はdeleteもletもできないが`eval(var)`だとdeleteできるがletできないけどできるようになる

[delete演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/delete)はオブジェクトのプロパティを削除する演算子です。

```js
const Employee = {
  firstname: 'Maria',
  lastname: 'Sanchez',
};

console.table(Employee);
 // {firstname: 'Maria', lastname: 'Sanchez' }

delete Employee.firstname; // true

console.table(Employee);
 // {lastname: 'Sanchez' }
```

プロパティ`firstname`が削除されました。

ところで変数は`delete`できません。

```js
var hoge = 1;
console.log(hoge); // 1

delete hoge; // false
console.log(hoge); // 1

let hoge = 2; // SyntaxError: Identifier 'hoge' has already been declared
```

なに当たり前だろうって？

実は当たり前ではない遷移がひとつ存在するんですよ。

```js
eval("var hoge=1;");
console.log(hoge); // 1

delete hoge; // true ←
console.log(hoge); // Uncaught ReferenceError: hoge is not defined
```

なんで？

`eval`で設定した変数については、`delete`で[削除することができます](https://nanto.asablo.jp/blog/2008/01/09/2552470)。

なお、この謎の記法が使えるのは`var`だけです。
`let`や`const`ではevalを抜けたところで変数が消滅します。

```js
eval("let   foo=1;");
console.log(foo); // Uncaught ReferenceError: foo is not defined

eval("const bar=1;");
console.log(bar); // Uncaught ReferenceError: bar is not defined
```

さて、これを使うと`var`で定義したはずの変数を`let`・`const`で上書きするという荒業が可能になります。

```js
eval("var x=1;");
const x = 2; // Uncaught SyntaxError: redeclaration of var x

delete x;
const x = 3; // x=3になる
```

`delete`してから`let`することで実質上書きとなります。
ただし、`delete`せずに直接上書きすることはできません。

とまあ今まではこういう動きだったのですが、どうせ削除して書き換えができるのなら最初から上書きできてもいいじゃん、というproposalが提出されました。

# [Make eval-introduced global vars redeclarable](https://github.com/tc39/proposal-redeclarable-global-eval-vars)

```js
eval("var x=1;");
const x = 2; // OK！

var y = 1;
const y = 2; // Uncaught SyntaxError: Identifier 'y' has already been declared
```

`var`されているはずの`ｘ`を直接上書きできてしまいました。
もちろん、`eval`を通さず直接`var`した変数はこれまでどおり再定義できないままです。

ということでこの機能、実はChrome・[Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1917139)・[Safari](https://github.com/WebKit/WebKit/pull/30121)いずれも既に実装されています。
従って、おそらく[最初のES2026になる](https://github.com/tc39/proposals/blob/main/finished-proposals.md)と思われます。

今後は`eval(var)`した変数を直接上書きできるようになりますね。


# 感想

ニッチすぎて使いどころがわかんねえ。
コミットメッセージのルールについて

## 一般的なコミットメッセージのフォーマット

開発の現場では、可読性が高く、変更内容を素早く把握できるコミットメッセージ が求められます。
特に、Gitのログを見たときに、何が変更されたのかを簡潔に理解できることが重要です。
**以下のような記述のルールがあるのでそれに即してコミットをする事を推奨します**

```php:templete
<タイプ>: <変更内容> (#<関連するIssue番号>)
```
### 具体例
```php:example
git commit -m "feat: ユーザーのプロフィール編集機能を追加 (#12)"
git commit -m "fix: ログイン時のバグ修正 (#34)"
git commit -m "chore: ESLint の設定を更新"
```
<BR>
<BR>


### よく使われるコミットタイプ
```php:detail type
タイプ	説明	例
feat:	新機能の追加	feat: ログイン画面にソーシャルログインを追加
fix:	バグ修正	fix: APIのリクエスト時にエラーが発生する問題を修正
refactor:	リファクタリング（動作に影響なし）	refactor: ユーザー認証ロジックを整理
chore:	設定ファイルの変更、ライブラリ更新	chore: eslint のルールを調整
docs:	ドキュメント修正	docs: READMEにセットアップ手順を追加
style:	コードのフォーマット修正（動作に影響なし）	style: prettier を適用
test:	テストコードの追加・修正	test: ユーザー登録APIのテストを追加
perf:	パフォーマンス改善	perf: 画像の遅延読み込みを実装
ci:	CI/CD関連の変更	ci: GitHub Actions のワークフローを修正
```


### フロントエンドなどの記述例
```php:Front-end type
編集する
git commit -m "feat: ダッシュボードのチャートを追加 (#15)"
git commit -m "fix: モーダルの表示が正しく機能しないバグを修正"
git commit -m "style: Tailwind CSSのクラスを整理"
バックエンド（Laravel, Node.jsなど）
```

### バックエンドなどの記述例
```php:Back-end type
git commit -m "feat: ユーザーのメール通知機能を追加"
git commit -m "fix: APIレスポンスのステータスコードを修正"
git commit -m "refactor: データベースのクエリ最適化"
```

### インフラ・CI/CDなどのなどの記述例
```php:CI/CD type
git commit -m "ci: Dockerコンテナの自動デプロイを設定"
git commit -m "chore: GitHub Actions のワークフロー修正"
```
仮説検定に必要なサンプルサイズを計算するパワーアナリシスとは何か？

パワーアナリシス（Power Analysis）は、統計的な仮説検定において、効果を見逃さないために必要な標本サイズを計算し、結果の信頼性と効率を高めるための重要な分析手法です。本記事では、パワーアナリシスが有効となるケースについて、MECE（Mutually Exclusive, Collectively Exhaustive）に整理しながらわかりやすく解説します。

---

## **1. パワーアナリシスとは？**

パワーアナリシスは、統計的な検定の設計段階で用いられる分析手法であり、以下の4つの要素を基に行われます：

- **検出力（Power）**：真に効果があるときに、それを正しく検出できる確率。一般的には80%（0.8）以上が望ましいとされます。
- **有意水準（Significance Level, α）**：帰無仮説が正しい場合に誤って棄却する確率。通常は5%（0.05）が使用されます。
- **効果量（Effect Size）**：効果の大きさを表す指標（Cohen's d、Pearson's rなど）。
- **標本サイズ（Sample Size, n）**：データ収集に必要なサンプルの数。

パワーアナリシスを適切に行うことで、標本不足による効果の見逃し（Type IIエラー）やリソースの無駄遣いを防ぐことができます。

---

## **2. パワーアナリシスが有効なケース（MECEに分類）**

パワーアナリシスは、統計的な観点から次のようなケースで有効です。

### **1. 効果の検出が重要なケース**
**目的**：真に効果がある場合に、それを見逃さないようにするための標本サイズを確保する。

#### 具体例
- **医療分野**：新薬の効果検証、手術方法の改良の評価。
- **マーケティング**：広告キャンペーンの効果測定、プロモーション施策の評価。
- **製品テスト**：新製品が従来製品より優れているかを調べる。

---

### **2. 過誤（第一種の過誤, 第二種の過誤）を最小化する必要があるケース**
**目的**：有意水準（第一種の過誤）や検出力（第二種の過誤）を考慮し、誤った結論を防ぐ。

#### 具体例
- **第一種の過誤の抑制**：製薬業界で新薬を誤って承認するリスクの管理。
- **第二種の過誤の抑制**：疫学研究における新しいリスク要因の見逃し防止。

---

### **3. リソースの効率的な配分が必要なケース**
**目的**：限られたリソースの中で適切な標本数を確保し、効率的な実験を行う。

#### 具体例
- **コスト制限がある実験**：実験動物や臨床試験被験者に制約がある場合。
- **データ収集が難しい分野**：遠隔地での自然科学調査、希少疾病の研究。

---

### **4. サンプル数不足による統計的な問題が懸念されるケース**
**目的**：標本サイズが小さすぎて結果が不安定になるのを防ぐ。

#### 具体例
- **小規模調査**：スタートアップ企業による顧客調査、小規模な教育実験。
- **信頼性の高い結果が求められる分野**：政策評価、国際的な製品承認試験。

---

### **5. 多重比較や複雑な統計モデルが必要なケース**
**目的**：複数の仮説を同時に検証する場合や複雑なモデルを適用する場合に、十分な標本サイズを確保する。

#### 具体例
- **多群比較**：複数の治療法を比較する臨床試験。
- **因果推論**：政策効果の分析、構造方程式モデリング。

---

### **6. 再現性や一般化が求められるケース**
**目的**：異なる集団や条件での再現性を確認し、結果の信頼性を高める。

#### 具体例
- **医学分野**：異なる人種や地域での臨床試験。
- **社会科学**：認知実験や行動研究での一般化可能な知見の獲得。

---

### **7. 初期の効果検証を行うパイロット研究**
**目的**：効果量の事前推定や、大規模研究の計画に向けた基礎データを得る。

#### 具体例
- **新製品開発**：プロトタイプの市場での反応調査。
- **新規治療法の初期試験**：臨床試験のフェーズ1、フェーズ2の小規模試験。

---

## **3. 実際のパワーアナリシスの計算方法**

パワーアナリシスは、専用のソフトウェアや統計ツールを使って計算されることが一般的です。

### **代表的なツール**
- **G*Power**：無料で使えるスタンドアロンソフトウェア。
- **Python**：`statsmodels` ライブラリを使用。
- **R**：`pwr` パッケージ。

### **Pythonによるサンプル計算例**
```python
from statsmodels.stats.power import TTestIndPower

# パラメータ設定
effect_size = 0.5  # 中程度の効果
alpha = 0.05  # 有意水準
power = 0.8  # 検出力

# 必要な標本サイズを計算
analysis = TTestIndPower()
sample_size = analysis.solve_power(effect_size=effect_size, alpha=alpha, power=power, alternative='two-sided')

print(f'必要な標本サイズ: {int(sample_size)}')
```

---

## **4. パワーアナリシスの利点**

1. **過小検出のリスクを防ぐ**：効果があるにもかかわらず見逃す可能性を減らします。
2. **リソースの無駄を削減**：必要以上のサンプル数を避け、効率的なデータ収集が可能に。
3. **信頼性の向上**：適切な標本サイズにより、結果の再現性と信頼性が高まります。

---

## **5. まとめ**

パワーアナリシスは、統計的な仮説検定を計画する上で不可欠なツールです。特に、効果の検出、過誤の制御、リソースの効率的な配分において重要な役割を果たします。パワーアナリシスを活用することで、実験や調査の精度と信頼性が向上し、無駄のない研究デザインを実現することができます。

これから統計分析を行う方は、ぜひパワーアナリシスを研究計画に取り入れてみてください！
PHP学習メモ②

# PHPの基本
①文字列を指定：前後に ' '、" "

②ファイル末尾の閉じタブ　?>　は省略すべき
└入力すると、もし空白があると出力画面のレイアウトが微妙にズレたりする

③PHPでは単純な値を出力できる
```ruby:
<?php~?>  の代わりに  <?=~?>
```
④文の区切りはセミコロン（;）

└文の終わりではなく、文と文の区切りを表す
⑤ブレークポイントいう行単位のみ使用可能な機能を使うために、複数の分を1行にまとめないが原則

```ruby:よくない例
print' NO ! <br />' ; print' YES ! ';
```

⑥PHPでは、命令の大文字/小文字を区別しない
└コードを読み返すときに、記述が読みにくいことは避けたい

```ruby:結果は同じ
PRINT' NO ! <br />';
pRinT' YES !';
```

⑦開発者のためのコメントは3種類ある
1.＜!--~--＞
└ブラウザ上にだけ表示されないが、PHPのコードは実行される
2. //　、＃
3. /* ~ */
3つの噴水の問題,2次関数の決定(その2/3)「共通テスト2025年数ⅠＡ・旧数ⅠＡ第２問〔１〕，数Ⅰ・旧数Ⅰ第３問〔２〕」を AI先生にmathjaxで聞いた。


・**mathjaxで、できませんでした。私の聞き方がわるいかも。**

:::note info
前　 [(その1/3)　sympy でやってみたい。 ](https://qiita.com/mrrclb48z/items/e76e93e16b7f0f03364f)
次　 [(その3/3)　作成未定]()
:::

# オリジナル
・問題文 テキスト ＜ 大学入試数学問題集成 様　
https://mathexamtest.web.fc2.com/2025/202510000/2025100000100mj.html#top-0103

(次の表示は途中省略しています。)
```python
<div class="qbody">
<p class="slevel"><a name="q-0103" 
id="q-0103"></a><span 
class="qnum">【２】</span></p>
(途中省略)
</menclose>
</math>　<math>
<msub><mi mathvariant="normal">P</mi><mn>3</mn></msub>
</math></p></div></div>
```


# ChatGPT先生へ
>(回答抜粋)
計算すると、大きな噴水の高さは **4 メートル** となります。
小さな噴水の高さ 1 メートルの 4 倍 なので、**答えは ②（4倍）** となります。
このように、放物線の性質を使って高さを求めることができます。

???残念でした。

# Gemini先生へ
>(回答抜粋)
...
この解説が、問題の理解に役立てば幸いです。
...
一緒に問題を解いていきましょう！


# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)


# いつもと違うおすすめです。
本棚にある技術書をもう一度読んでみよう

※この記事は生成AIによるものではないので文章が雑多です

主にジュニアの皆さん、技術書が本棚にたくさんありませんか？
そうですよね、私もあります。なんか技術書が揃ってくるとかっこいいですよね～。デキるエンジニアって感じがします。

技術書含めなんですけど、そういうインプットのタイミングってどういうときがいいんだろうか？って悩んでいた時期がありましたが、最近（完全に）理解しました。

# 技術書を買うタイミング
別に技術書でもUdemyでも何でもいいですけど。
私の場合、インプットするために何かを購入するときは以下のパターンが多かったです。

### ①業務で必要なケース
業務で必要だけど全く分からん言語やフレームワークその他の際にまずはお勉強から始めます。この場合は技術書よりもUdemyとかの方がやりやすいと思っています。

### ②さらに知識を深堀したいケース
ふわっとなんとなくは理解しているけど、それを他人に教えたりする必要があったときに知識の確度を高めたいときに読みます。QiitaやZennの記事を読み漁ってそれらを統合しながらでもよいかもしれないですが、書籍からの引用は安心感があります。

### ③キャリア上なにをやればいいか分からないケース
どういうキャリアにしていくか迷走しているときにやりがち。一度も使ったことがないし現時点で必要としていない言語や、そもそも技術関係ない資格勉強など。

# 効果的なタイミング
技術書にもよると思いますが、①>②>③の順番で効果があると思います。
やはりインプットとアウトプットが結びつくとより学習効果が高いですし、アウトプットに責任を持たなければならないとより精度の高いインプットができます。なので必要に迫られてから読む、というのは短期的な視点でインプットの効果を得るには必須になると思います。

私の愛読書であるワールドトリガー28巻にこんな名言があります。
> 目標達成の期限を決めなければ成功か失敗の判定を無限に先送りにすることができる

インプットに対しての目標がアウトプットであるなら、そもそもアウトプットの必要性がなければその目標は達成が難しくなりますね。


③については、想定したキャリアが現在地点から離れすぎている場合があり、インプットしたとしても難易度が高すぎてなにいってだこいつになることが多かったです（特にオライリー本は和訳の癖があったりするのでより顕著）。

私の愛読書であるワールドトリガー28巻にこんな名言があります。

> 「足踏み」に陥る人間は本人の認識よりも高すぎる壁に挑んでいる場合が多い

キャリアに迷って色んな方向性に手を出すのはよいですが、その具体的なインプットの視座が高すぎると、短期的にはあまり効果がないこともあるということですね。

# 本棚に眠っている本を読んでみよう
しかしながら私は①や③のパターンで買った書籍が多いです。特に③。
一通り目を通してよく分からん、おわりというケースが大半。

ですが、最近ふと昔買った本を読んでみると、新しい発見がありました。同じ内容でもそこから得られるものは変わっていました。
しかも成長してるという実感付き。嬉しい。自信にもなります。

なので昔読んだ本を是非もう一度読んでみてください。
特にリーダブルコードなんかは一度は読んだけど「ふむふむなるほど」って感じでそれっきりという人も多いのではないでしょうか（私はそうでした）。
新たな発見があると思いますよ、多分。

# 参考文献
https://amzn.asia/d/ftj5OWl
AIエージェントファーストなwebとllms.txtについて考える

# LLM時代のWebアクセシビリティ

ここ数年でLLMが情報を検索する時代になってしまいました。
ChatGPTなどのサービスに要求するだけでLLMが検索のためのクエリをバックエンドで生成することができます。
目的の達成を終了条件とするエージェントの普及もあり、現在ではOpenAI deep research等様々なサービスが公開されています。
サービスによってモデルの出力形式と推測量に特色があり、これからも増え続けていくでしょう。
Web制作側として、これらのサービスに対して有効な最適化は何があげられるでしょうか。


## AIエージェントファーストWeb
AIサービスが普及したことで、対AIサービスのSEOを考える時代が来ました。
工夫することでAIサービスからのユーザー流入が増えるのであれば喜ばしいことです。
例えば小売業は自社の製品が回答として選択されれば購入につながるかもしれません。

https://x.com/kenn/status/1883489685739307234

さすがに関数の呼び出しはまだ先...と思いつつClaudeはMCPなるプロトコルを定めているので遠くない可能性もあります。

https://docs.anthropic.com/ja/docs/build-with-claude/mcp

### 最適化として有効かもしれないもの
「モデルが検索エンジンAPIを呼び出す」あるいは「モデルがブラウザを操作する」という前提の下で有利になる可能性があるものをまとめました。

#### セマンティックなhtmlを使用する

metaタグやOpen Graph（OGP）を活用して、ページの内容を的確に伝えるとよさそうです。
description や og:title などを適切に設定することで、AIがページの要約を生成しやすくなる可能性があります。
Chromeのリーディングモードのように、mainタグを優先して取り込むこともありそうです。

#### テキスト主体のコンテンツを増やす
画像や動画のみに情報を埋め込むのではなく、テキストで要点をまとめると良いでしょう。
一部のモデルは画像を認識できますが、基本的にはテキスト情報の方がすっきりします。

#### CSRを控える
JavaScriptを実行する環境がない場合、コンテンツが表示されません。
ブラウザを操作するタイプであっても、人間ほど精密かつ高速な操作は行えないので動的すぎる要素は不利になりそうです。


## 弊害 

AI関連クローラー・サービスは、アクセスされるページにとっては迷惑な存在かもしれません。
アクセス過多による障害の恐れがあり、バックエンドとの通信が多いサービスほどダメージが大きいでしょう。

実際、クローラーによる過剰アクセス被害は無視できないようです。

https://x.com/mizchi/status/1883743506071683431

### 対策としてのllms.txt
llms.txtはrobots.txtのようなテキストファイルで、LLMがwebサイトの情報を把握するために使用されます。

クローラーをブロックしても、llms.txtさえ公開していれば学習・推論コンテキストに使用されるチャンスが生まれます。


https://llmstxt.org/

https://directory.llmstxt.cloud/

## まとめ

- LLM時代において、AIエージェントによるWeb情報の取得を考慮した最適化が重要になってきている
    - 特に 「CSRを控える」「構造化データを活用する」「メタデータの最適化」 などの工夫を行うことで、AIがより適切にサイトの情報を取得しやすくなる可能性がある
- 一方で、AIクローラーの過剰なアクセスがサイトに負担をかけるケースもあるため、llms.txt の活用 など、制御の仕組みを取り入れることも重要である
- これからのWebは 「人間だけでなくAIにも最適化された設計」 を意識する時代になっていくかもしれない

結局セマンティックWebの話になった気がします。
個人的にはあらゆる情報はマークダウンに集約されればいいと思っており、microsoft主動の[markitdown](https://github.com/microsoft/markitdown)もそこを目指していそうです。
マルチモーダルモデルへの画像・動画の入力はパフォーマンスが気になるのはもちろん、どうしてもファイルが大きくなりがちで情報の密度が薄い（？）のでモデル推論自体が高コストになります。


https://github.com/microsoft/markitdown

https://qiita.com/numekudi/items/0523f6c96b74e96b0d29

## おまけ

筋トレがてらアプリ作りました。
llms.txtのアーカイブを置けるアプリで、一部SSR対応したりSEO周りでいろいろ実験中です。

https://llmstextshub.primitive-ojisan.com
Fakerで画像を扱う方法

# １：ファクトリの生成
```
% php artisan make:factory ⚪︎⚪︎Factory
```

# ２：ダミーデータの日本語化
```/Applications/MAMP/htdocs/Laravel/EXP-alert/config/app.php
'fallback_locale' => 'ja_JP',
```

# ３：mmo/faker-images をインストール
```
% composer require --dev mmo/faker-images
```


# ４：Factory に組み込む
```
namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;
⭐️use Illuminate\Support\Str;
⭐️use Illuminate\Support\Facades\Storage;
⭐️use Mmo\Faker\PicsumProvider;
⭐️use Mmo\Faker\UnsplashProvider;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Item>
 */
class ItemFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition()
    {
        // `faker` に PicsumProvider を追加
        ⭐️$this->faker->addProvider(new PicsumProvider($this->faker));

        // 1️⃣ 一時ディレクトリに画像をダウンロード
        ⭐️$tempPath = $this->faker->picsum(null, 640, 480); // `null` で一時フォルダに保存

        ⭐️if (!$tempPath) {
            throw new \Exception("画像が生成されませんでした。ディレクトリの権限を確認してください。");
        }

        // 2️⃣ `storage/app/public/items/` に保存
        ⭐️$storagePath = 'items/' . Str::random(10) . '.jpg';
        ⭐️Storage::disk('public')->put($storagePath, file_get_contents($tempPath));

        return [
            'name' => $this->faker->word(),
            'expiration_type' => $this->faker->boolean(),
            'deadline' => $this->faker->date(),
            'comment' => $this->faker->realText(10),
            ⭐️'image_path' => $storagePath, // ✅ `storage/items/` に保存されたパス
            'user_id' => 1,
        ];
    }
}
```

# ５：seederでcallする
user_idがある場合は、Userも必ず行う
```/Applications/MAMP/htdocs/Laravel/EXP-alert/database/seeders/DatabaseSeeder.php
<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call([
            ⭐️UserSeeder::class,
            ItemSeeder::class,
        ]);


        // \App\Models\User::factory(10)->create();
        ⭐️\App\Models\Item::factory(2)->create();

        // \App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);
    }
}
```


# ６：php artisan migrate:fresh --seed
```
% php artisan migrate:fresh --seed
```
1️⃣ 全てのテーブルを削除（DROP TABLE）
2️⃣ データベースの最新マイグレーションを適用（migrate）
3️⃣ Seeder を実行して、テストデータを挿入（db:seed）
🎉【Socket.IO】超シンプルなリアルタイムチャットを作ってみよう！


## 🏗 コードの仕組み

### 1️⃣ HTML（チャット画面の作成）

```html
<body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" />
      <button>送信する</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      let socket = io();

      const form = document.getElementById("form");
      const input = document.getElementById("input");
      const messages = document.getElementById("messages");

      form.addEventListener("submit", function (e) {
        e.preventDefault();
        if (input.value) {
          socket.emit("chat message", input.value);
          input.value = "";
        }
      });

      socket.on("chat message", function (msg) {
        let item = document.createElement("li");
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
</body>
```

### 2️⃣ コードの解説

#### ✅ **`<ul id="messages"></ul>`**
メッセージの一覧を表示する部分！ `<li>` 要素が追加されていく。

#### ✅ **`<form>` & `<input>`**
ユーザーがメッセージを入力し、送信するためのフォーム。

#### ✅ **Socket.IOの読み込み**
```html
<script src="/socket.io/socket.io.js"></script>
```
👉 サーバーとのリアルタイム通信を可能にするライブラリを読み込む！

#### ✅ **JavaScriptの処理**

- **メッセージを送信**

```js
form.addEventListener("submit", function (e) {
  e.preventDefault(); // ページのリロードを防ぐ
  if (input.value) {
    socket.emit("chat message", input.value); // メッセージをサーバーへ送信！
    input.value = ""; // 入力欄をクリア
  }
});
```

- **メッセージを受信＆表示**

```js
socket.on("chat message", function (msg) {
  let item = document.createElement("li");
  item.textContent = msg; // メッセージをセット
  messages.appendChild(item); // リストに追加
  window.scrollTo(0, document.body.scrollHeight); // 最新メッセージを表示
});
```

---

## 🎯 **動作の流れ**
1. ユーザーがメッセージを入力し、「送信する」を押す
2. JavaScriptが `socket.emit("chat message", メッセージ)` でサーバーに送信
3. サーバーがメッセージを受け取り、他のユーザーに送信
4. クライアントが `socket.on("chat message", メッセージ)` で受信し、画面に表示！

---

## 🚀 **発展させるなら？**

✅ **ニックネーム機能**（誰が送ったかわかるように）
✅ **メッセージの日時表示** ⏰
✅ **オシャレなデザインにカスタマイズ** 🎨

Socket.IOを使えば、簡単にリアルタイムチャットを実装できるので、ぜひ試してみてね！😆🔥
RaspberryPiのGUIのマウスを使わずキーボードで動かせる

使用したラズパイ
RaspberryPi Model B+ 特殊な繋がりで譲り受けた初期型のRaspberryPiですがCPU 900MHzにClockUpして大切に使っています！
OS Raspbian GNU/Linux 11(bullseye)で試しました。

内容
GUI Mode時(startx)に、マウスを使うのがめんどくさいので、キーボードで動かせます。
方法は
sudo apt install keynav
だけです。

keynavはインストールするだけでよさそうです

startxコマンドでX-Windowsを起動させてキーボードの
上、下、左、右で使用するアイコンを選べるようになるので特別コマンドの発行はしなくてよいです。

マウスはなるべく使わなくてよくしたいので、導入しました。
Debianのソフトを探して見つけたのですが他のLinuxでも使えるかもしれませんね！
WSL2の再インストール方法

WSL2のインストールはWindows11の標準コマンドで可能だが、再インストールでこれまたハマったのでメモ。
``` :PowerShell（管理者権限）
$ wsl --install
```
経緯としては、ubuntuとRockyLinux9を共存させていたのだが、
RockyLinux9 を消そうと思い立ちこんなコマンドを打ってしまった。
```
$ wsl --uninstall RockyLinux9
```

確認ダイアログもでず、しばらく経ったのちに完了。
wslコマンドを試すと、
```
> ファイルにアクセスできません。
```

なんと、WSL自体がアンインストールされたようだ。驚愕。疲れている。
wsl --install コマンドを叩いても同様の結果で絶望する。

マイクロソフトコミュニティに行くと同じ現象の方と遭遇するが、散々な言われようで誹謗中傷までしていた様子。昔から相も変わらず役に立たないサイトだなと思うので、一旦閉鎖した方がいい。

[PowerShellでWSLコマンドを実行すると「ファイルにアクセスできません。」と表示される。](https://answers.microsoft.com/ja-jp/windows/forum/all/powershell%e3%81%a7wsl%e3%82%b3%e3%83%9e%e3%83%b3/6ab0ada3-8781-4d66-85d3-82633f5fec53)

本家のGit hubでも同じようなQAが載っていた。
[SSH接続からWindowsホストへのwsl.exeを開くと、「アクセスが拒否されました」](https://github.com/microsoft/WSL/issues/8072)

あ、つまり、最新版をダウンロードすればいいのでは？という結論にいたり、
最新版をダウンロードしてインストールするが無反応。。

[最新版 GitHub : microsoft / WSL](https://github.com/microsoft/WSL/releases/tag/2.4.10)

コマンドを叩いてみると、完全復活していました。
```
PS C:\> wsl -l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu (既定)
RockyLinux9

PS C:\> wsl --update
更新プログラムを確認しています。
Linux 用 Windows サブシステムの最新バージョンは既にインストールされています。
```
結論：不親切極まりないインストーラを配布しているマイクロソフトが全部悪い。

困っている方のご参考になれば幸いです。
Property Wrapperとは

SwiftUIで開発していくにあたって `@State`やら`@Binding`が沢山でてきて最初困惑しました。
これらの@○○はProperty Wrapperと呼ばれるものです。
Swift5.1から導入された、言語レベルの機能です。

...ということなので、SwiftUIが提供しているわけではないのです。
SwiftUIは、あくまで言語機能であるProperty Wrapperを利用して、
UIのための便利なプロパティラッパー（`@State`, `@Binding`, `@StateObject`, `@EnvironmentObject`, `@ObservedObject` etc...)を提供しているわけです。
UIKitでの開発時は、全く使用してなかったので私は勘違いしてました。苦笑

## Property Wrapperとは
ドキュメントは以下の通り。
https://docs.swift.org/swift-book/documentation/the-swift-programming-language/properties/#Property-Wrappers

> プロパティラッパーは、プロパティの保存方法を管理するコードと、プロパティを定義するコードとの間に、分離の層を追加します。

ちょっとわかりづらいので、具体例を。
温度を-50度〜50度の範囲に補正する処理があるとします。
普通に書いたら以下のようになります。
```swift
struct Temperature {
    private var _celsius: Int = 0

    init(celsius: Int) {
        self.celsius = celsius
    }
    
    var celsius: Int {
        get { _celsius } // setterで処理した値を取得
        set { _celsius = min(max(newValue, -50), 50) } //ここで-50度〜50度範囲内に補正
    }
}

var temp = Temperature(celsius: 100)
print(temp.celsius) // 50（範囲外なので上限に補正）
```

これをProperty Wrapperを使用して書いた場合こうなります。
```swift
@propertyWrapper
struct Clamped {
    private var value: Int = 0

    init(wrappedValue: Int) {
        self.wrappedValue = wrappedValue
    }

    // wrappedValueは、ラップされたプロパティの値にアクセスするためのプロパティで必須
    var wrappedValue: Int {
        get { value }
        set { value = min(max(newValue, -50), 50) }
    }
}
// ↑↑↑↑
// プロパティの保存方法を管理するコード

// -----分離-----

// ↓↓↓↓
// プロパティを定義するコード
struct Temperature {
    @Clamped var celsius: Int // celsiusプロパティにClampedラッパーを適用
}

var temp = Temperature(celsius: 100)
print(temp.celsius) // 50
```
- プロパティの保存方法を管理するコード（温度を-50~50に制御して保管する処理）
- プロパティを定義するコード：（実際に使用する箇所での定義）
ということで、上記の2つが確かに分離されているというわけです。

## メリット
1. **コードの重複を防ぐ**
同じロジックを複数のプロパティに適用したい場合、ラッパーを定義することで再利用できます。
2. **メンテナンス性の向上**
ロジックを１カ所で管理するため、修正や仕様変更が容易です。
3. **意図が明確になる**
適切な命名ができていれば、プロパティにどんな処理が適用されているかコードの意図が伝わりやすくなります。
4. **カプセル化により、単純なアクセスになる**
ロジックがラッパー内部に隠蔽されているため、内部の詳細な実装を意識せずに外部から単純なプロパティとして使用できます。

## まとめ
Property Wrapperは共通の振る舞いや制御をカプセル化し、複数の場所で簡単に再利用できるようになるというものでした。

よってSwiftUIが提供する`@State`などもこの仕組みを利用しているため、私たちは内部の詳細な実装を意識せずとも、`@State`をつけるだけで恩恵が受けられるというわけですね。
Reactで学習記録アプリを作った

# はじめに
Reactを使って学習記録一覧アプリを作成しました。
完成したもの
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/c61cc7fa-c62f-d08e-bd2e-1e81b98c0940.gif)

### 主な機能
1. 学習内容と学習時間を入力して表示
2. 登録ボタンを押下後、一覧で表示する、バリデーションあり
3. 登録をしたらフォームが初期化される
4. 学習時間の累計をみることができる

# 作成した際につまったこと
#### フォームに値を入力した後に、画面表示ってどうやる？ 
フォームに入力してもフォームに値がでてこない！
⇒useStateの理解不足、React入門動画のUseStateを2,3回見直して解決した

#### 一覧に表示するときは配列をmapで回して表示させればいいと思うんだけど…
配列のコピーでスプレッド構文使うまでは考えられた
⇒スプレッド構文でのオブジェクトの代入がわかっていなかった

#### 学習時間の累計時間ってどうやって計算しよう…
配列の要素ひとつずつとって足せばいいんだろうけど…
⇒reduceを理解する

https://qiita.com/asa129/items/7a9c792bf2ffa9831db7

#### NaNってNaNだろう

https://qiita.com/asa129/items/3bc5af7a3fe9e326c41f


# 最後に
* ガイドにそってアプリ作成を進めていく上で、自分がわかっていない箇所が浮き彫りになりました。
動画の見直し、検索⇒試行錯誤を行うことで理解度が段違いで向上したことを実感しました。（今まではただUdemy動画をみてわかった気になっていた）
* エラーに出会ったら、小出しにQiita記事を出すことも教えてもらいました（継続して出すことが大事）
* 試行錯誤をしてなんとかできたけど、もう少し早く解決したいです
* 早く解決するために質問したいけど、質問の内容を考えるのに時間がかかってしまいます
 （どうしたら聞き手が答えやすいように質問できるかなど考えてしまう）
⇒質問テンプレート記事を見返す

https://qiita.com/KNR109/items/550b52ff980c0c32bf2a

* コンポーネント化に挑戦してみたけど、どの部分を分割すればいいかわからずうまくいかなかったです。今後プログラムを通して身に着けていきたいです。


# 参考
#### React入門動画
https://www.udemy.com/course/modern_javascipt_react_beginner
#### GIF画像にして成果物をアピールしたいと思ったときに
https://qiita.com/YotaHamasaki/items/c7c517774ca0d392a8cc

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼

https://projisou.jp
Unityで2Dアクションをつくってみる(1) 

# はじめに
Unity初学者です。コーディングに関しても同様に(JavaScriptは3ヶ月ほど、C#に関しては初めてです)。
ふと思い立ってゲームを作りたいなーと思ったので、Unityを用いて作成を行います。
本記事では主に作成するものの概要や準備などの面を中心に書いていきます。
こういったことは苦手なので読みにくい文章になるかもですが、同じく初学者の方々の参考になれば幸いです。
# 作るものについて
作成するものは2D横スクロールアクションです。私が好きなゲームのタイプなので。
以下、とりあえず実装したい仕様の一覧(仮)です。
<details>
<summary>仕様一覧(仮)</summary>

- プレイヤー
  - 操作
    - 左右の移動
    - 左右へのダッシュ
    - 上方向へのジャンプ
    - 射撃(マウスカーソルの位置に向かって射撃を行う)
  - ステータス
    - HP(0になるとゲームオーバー)
- モンスター
  - スライム的なやつ
    -  ゆっくり移動するだけ
    -  当たるとダメージ
  - いのしし的なやつ
    - 普段はゆっくり移動する
    - プレイヤーを見つけると突進する
  - 遠距離攻撃を行う敵
    - 普段はめっちゃゆっくり動く
    - プレイヤーを見つけると遠距離攻撃を行う
- 環境要素
  - すり抜けられる床
    - 上から以外ならすり抜けできる
    - 上に乗った状態で下に入力するとすり抜けできる
  - ダメージを受ける床
    - 乗るとダメージを受ける
  - 水
    - 操作が変化する？かなんかやりたい
- アイテム
  - 回復アイテム
    - 触ると即時回復

</details>

これらを実装してプレイ画面を完成させた上で、スタート画面、クリア画面を簡易的に実装して一つのゲームの形にしていきます。

# 環境について
OSはMacOSです。
- UnityのEditer 本体 Unity 6(6000.0.35f1)
Unityの公式からダウンロード そんな難しくなかったので詳細は省略
以下を参考にUnity Hubのみ日本語化を行なっています
https://bizroad-svc.com/blog/unity-nihongoka/
Editerも日本語化できますが、個人的に非推奨だと思います。大体英語で説明しているところがほとんど(公式も含めて)ですし、何より日本語で書いてあっても専門用語はわからないし

- (C#のスクリプト編集用) VSCode バージョン: 1.96.4 (Universal)
コードエディターです。操作もしやすくて便利なのであったほうがいいと思います(無しでも一応ok?試したことはないので何とも言えないですが)
VSCodeのインストールはかなり前に行なったので申し訳ないですが詳しくは調べてください(すぐ出ると思います)
ただ、C#の導入については最近行なったばかりなので軽く
MacOSだとパスがずれてエラーが出るようなので、以下を参照して修正が必須です。
https://zenn.dev/unsoluble_sugar/articles/982e38df5ffbd9

# 事前にやっていること
### スクリプト作成
Piskelというサイトで簡単なドット絵を作成してプレイヤーや敵の画像(Sprite)を作成しています。
https://www.piskelapp.com/
絵は全然描かないですけど、自分の絵で動かしたかったので、せっかくなので書いています。ブラウザ上でちゃちゃっとかけます。
Unityの公式に無料のアセットがあるので、別にやんなくてもそっちで全然オーケーだと思います

### Unity Learnのチュートリアルゲーム作成
Unity Learnでチュートリアル用のを２つやって基本操作を学べたのでそれについて
一つ目は3Dの玉転がしゲームを作成するチュートリアルです。
https://learn.unity.com/project/bolt-roll-a-ball-tutorial?courseId=606c107eedbc2a0afb98ea50
日本語で読みやすく、Unityの基本操作について学びやすいと思います。
また、コードの記述を行う代わりにVisualScriptingという手法をとっています。この記事では使用しませんが、これもとっつきやすくて良かったと思います。

二つ目は2Dの見下ろしのアドベンチャーゲームを作成するチュートリアルです。
https://learn.unity.com/course/2d-beginner-adventure-game
初めてC#でコーディングを行いましたが、基本的なことから説明してくれているのでかなり勉強になりました。
あとは、2Dゲームの基本的な設計は一通り学べると思います。ただ、日本語ではないのとバージョン違いかなんかで、初学者目線一部わかりにくい部分もあると思います。Monobehaviorのスクリプトの作り方とか

# おわりに
Unity自体が初めましてなのと、こういった記事でまとめることに関してもほとんど経験がないこともあって、どうなるかわかりませんがなるべく詰まった部分や実装についてアウトプットができればいいなーと思っています。
とりあえず、記事を書いている時点でいくつか実装済みなのでそれについて記事が出せればいいなーと思います。
他の初学者の方にも参考になるように頑張りますのでよろしくお願いします！
PHP学習メモ①

# 環境の設定、事前準備
使用環境：Xampp、VSCode

PHPファイル名を「selfphp」（任意）とする

①PHPファイルの保管場所（★ローカル）
└　C¥xampp¥htdocs¥selefphp

![スクリーンショット 2025-02-07 213423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4004537/09cb91fd-6bfb-4b69-f8b3-72d3fd63342f.png)

Xamppは「Apache」、「MySQL」を「Start」する

![スクリーンショット 2025-02-07 213423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4004537/acd64aa9-ee54-1bb4-79ea-1896f770afef.png)



# 練習コード
VSCodeでまず「ht」と入力、選択しから「html:5」を押すと
PHPを始めるのに必要なコードが一気に入力される

```ruby:html:5の動作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHPの基本</title>
</head>
<body>
<?='こんにちは、世界！' ?><br />
<?='こんにちは、皆さん！' ?>
</body>
</html>
```
chap01という階層の直下に「hello.php」として保存

xamppのサーバーでの表示画面
http://localhost/selfphp/chap01/hello.php

![スクリーンショット 2025-02-07 213423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4004537/b6fac4af-3dcd-01d3-fd57-ddb6e0a3b99a.png)
Nextでdeployする時にどんなサーバーを使うべきか迷った話

<!-- title: Nextでdeployする時にどんなサーバーを使うべきか迷った話 -->
<!-- tags: Next, Versel, Netlify, Amplify, EC2 -->

個人ブログを開発していて、どのサーバーにデプロイするか迷ったので、まとめてみた。

## 1. Vercel

**メリット:**

- **Next.js との深い統合:** Next.js の開発元が提供しており、最適なパフォーマンスと機能を享受できます。
- **簡単なデプロイ:** Git リポジトリと連携し、コードのプッシュで自動的にビルド・デプロイが行われます。
- **サーバーレス関数のサポート:** API ルートや動的な機能を容易に実装できます。

**デメリット:**

- **無料プランの制限:** 無料プランでは商用利用が禁止されており、商用プロジェクトには有料プランの検討が必要です。
- **カスタマイズの制限:** サーバー環境の細かな設定や特定のミドルウェアの導入が制限される場合があります。

**適したサイトの種類:**

- **個人ブログ:** Next.js との深い統合により、ブログのパフォーマンスや機能性を最大限に引き出せます。
- **小規模なユーザー向けサイト:** 迅速なデプロイと自動スケーリングが求められるサイトに適しています。

---

## 2. Netlify

**メリット:**

- **簡単なデプロイ:** Git リポジトリと連携し、コードのプッシュで自動的にビルド・デプロイが行われます。
- **サーバーレス関数のサポート:** バックエンドの機能をサーバーレスで実装できます。
- **無料プランでの商用利用:** 個人や小規模プロジェクトであれば、無料プランでも商用利用が可能です。

**デメリット:**

- **CDN の配置:** CDN のエッジが国内にないため、日本からのアクセスでは他のサービスと比較して遅延が生じる可能性があります。
- **ビルド時間:** ビルド時間が他のサービスと比較して長くなる場合があります。

**適したサイトの種類:**

- **静的サイト:** 静的コンテンツを中心としたサイトに適しています。
- **Jamstack アーキテクチャのサイト:** サーバーレス関数を活用した動的機能を持つサイトに適しています。

---

## 3. Cloudflare Pages

**メリット:**

- **高速なコンテンツ配信:** グローバルなエッジネットワークにより、ユーザーに近い場所からコンテンツを提供します。
- **無料プランでの商用利用:** 商用プロジェクトでも無料で利用可能です。
- **無制限の帯域幅:** 大規模なトラフィックにも対応できます。

**デメリット:**

- **サーバーサイドレンダリング（SSR）の制限:** 現時点では、Next.js の SSR を完全にサポートしておらず、設定や制限に注意が必要です。
- **ビルド時間:** ビルド時間が他のサービスと比較して長くなる場合があります。

**適したサイトの種類:**

- **静的サイト:** 静的コンテンツを中心としたサイトに適しています。
- **グローバルなユーザー向けサイト:** 世界中のユーザーに高速なコンテンツ配信を提供したい場合に適しています。

---

## 4. AWS Amplify

**メリット:**

- **フルマネージドサービス:** 認証、API、ストレージなどのバックエンドサービスとシームレスに統合できます。
- **簡単なデプロイ:** Git リポジトリと連携し、自動デプロイが可能です。
- **SSR のサポート:** Next.js のサーバーサイドレンダリングをサポートしています。

**デメリット:**

- **学習コスト:** AWS の各種サービスとの連携には学習が必要です。
- **コスト管理:** 利用するサービスに応じてコストが変動するため、注意が必要です。

**適したサイトの種類:**

- **フルスタックアプリケーション:** バックエンドとフロントエンドを統合したアプリケーションに適しています。
- **大規模なユーザー向けサイト:** スケーラビリティと信頼性が求められるサイトに適しています。

---

## 5. AWS EC2

**メリット:**

- **高いカスタマイズ性:** サーバー環境を自由に設定でき、必要なミドルウェアやライブラリをインストール可能です。
- **柔軟なスケーリング:** オートスケーリング機能を使用して、トラフィックの増減に応じてインスタンス数を調整できます。
- **多様なインスタンスタイプ:** アプリケーションの要件に応じて、適切なインスタンスタイプを選択できます。

**デメリット:**

- **管理の負担:** サーバーのセットアップ、セキュリティパッチの適用、スケーリング設定など、運用管理の手間がかかります。
- **コスト管理の複雑さ:** インスタンスの稼働時間やリソース使用量に応じて課金されるため、コスト最適化が必要です。
- **デプロイの複雑さ:** デプロイプロセスの自動化や CI/CD パイプラインの構築には追加の設定が必要です。

**適したサイトの種類:**

- **カスタマイズ性が求められるサイト:** 特定のサーバー設定やミドルウェアが必要なアプリケーションに適しています。
- **高トラフィックサイト:** トラフィックの急増に対応するためのスケーリングが必要なサイトに適しています。
- **セキュリティ要件が高いサイト:** 独自のセキュリティ設定やネットワーク構成が必要な場合に適しています。

---

商用利用の予定が無いブログ利用だと、versel が適しているので、versel を採用しました！ご参考までに
エンジニアリングマネージャー向け職務経歴書テンプレート

# はじめに

エンジニアリングマネージャーとして転職活動を行う際、職務経歴書は自身の経験やスキルを効果的にアピールするための重要なツールです。本記事では、エンジニアリングマネージャー向けの職務経歴書テンプレートを紹介し、各項目のポイントを解説します。

---

## 1. 基本情報
まずは基本的な情報を記載します。連絡先や希望職種も明確にしましょう。

```markdown
- **氏名**: [氏名]  
- **連絡先**: [電話番号 / メールアドレス]  
- **LinkedIn / GitHub**: [URL（任意）]  
- **希望職種**: エンジニアリングマネージャー / テックリード / プロジェクトマネージャー
```

---

## 2. 職務要約
これまでのキャリアを簡潔にまとめます。経験年数、マネジメント経験、技術スタック、強みなどを3〜5行で記載します。

```markdown
**例:**  
10年以上のソフトウェア開発経験と5年以上のエンジニアリングマネジメント経験を持ち、主に大規模な決済プラットフォームやWebサービスの開発・運用を担当。アジャイル開発を取り入れたプロジェクト管理、技術戦略の立案、チームのスケールアップ、エンジニアの育成に強みを持つ。特にクロスファンクショナルチームとの連携や、プロジェクトのスケジュール管理、品質向上のためのプロセス改善に貢献。
```

---

## 3. スキルセット
具体的な技術スキルやマネジメントスキルをカテゴリごとに整理します。

```markdown
- **プログラミング言語**: Python, Java, PHP  
- **インフラ・クラウド**: AWS（EC2, S3, RDS, SES, Terraform, IaC）  
- **データベース**: MySQL, Oracle  
- **ツール・フレームワーク**: Docker, Kubernetes, Git, Jenkins, Jira, Confluence  
- **開発手法**: アジャイル（Scrum）、ウォーターフォール  
- **マネジメント**: プロジェクトマネジメント、ピープルマネジメント、1on1ミーティング、技術戦略の策定  
- **その他**: セキュリティ（PCIDSS準拠）、オンプレミスからクラウド移行、コスト削減施策
```

---

## 4. 職務経歴
過去の勤務先と担当した業務内容、実績を具体的に記載します。各プロジェクトでの役割や成果を明確にしましょう。

```markdown
**[会社名]**  
*エンジニアリングマネージャー / プロジェクトマネージャー*  
*[勤務期間]*  

**担当業務**:  
- [担当した具体的な業務内容を箇条書きで記載]  
- [例: クラウド移行プロジェクトのリード、アジャイル開発導入など]  

**実績**:  
- **[プロジェクト名]**: [成果や達成事項を具体的に記載]  
- **[数値成果]**: [KPIや数値で示せる成果を記載]  
```

---

## 5. プロジェクト実績
具体的なプロジェクトごとに、期間、概要、担当業務、成果を記載します。

```markdown
**1. [プロジェクト名]**  
- **期間**: [開始年月] ～ [終了年月]  
- **概要**: [プロジェクトの概要を簡潔に説明]  
- **担当業務**: [プロジェクト内での具体的な役割と責任]  
- **成果**: [達成した成果や改善点、具体的な数値]  

**2. [プロジェクト名]**  
- **期間**: [開始年月] ～ [終了年月]  
- **概要**: [プロジェクトの概要を簡潔に説明]  
- **担当業務**: [プロジェクト内での具体的な役割と責任]  
- **成果**: [達成した成果や改善点、具体的な数値]  
```

---

## 6. 学歴
最終学歴を記載します。

```markdown
[大学名] [学部/学科] [卒業年月]  
```

---

## 7. 資格・研修
取得した資格や参加した研修を記載します。技術系の資格があれば強調しましょう。

```markdown
- [資格名]（取得年月）  
- [資格名]（取得予定/取得年月）  
- [研修・セミナー参加履歴（任意）]  
```

---

## 8. 自己PR
自身の強みや志望動機、会社にどう貢献できるかを具体的に記載します。どのような問題を解決した経験があるか、どのようにチームやプロジェクトに貢献したかを述べると良いでしょう。

```markdown
**例:**  
私の強みは、技術力とマネジメント力を融合させたプロジェクト推進力です。特に、複雑なシステムの設計・運用において、エンジニア視点での課題解決と、マネジメント視点でのスケジュール管理・リスク管理を両立させることができます。エンジニアチームの育成にも力を入れており、自律したチーム作りを通じて組織全体の生産性向上に貢献してきました。貴社でも、技術戦略の立案からチームビルディングまで幅広く貢献したいと考えています。
```

---

## まとめ
エンジニアリングマネージャーとしての職務経歴書は、技術力だけでなくマネジメント力やプロジェクト推進力を強調することが重要です。このテンプレートを参考に、自身の経験を具体的かつ明確にアピールしましょう。
MQTT over WebSocket: ブラウザーで接続

こちらで設定した mosquitto のサーバーに接続する方法です。
[MQTT over WebSocket: localhost でのテスト](https://qiita.com/ekzemplaro/items/51c929024740de5e70f7)

## ページ

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MQTT WebSocket クライアント</title>
  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
</head>
<body>
  <h1>MQTT WebSocket クライアント</h1>
  <div id="status"></div>
  <script>
    // MQTT.js を使って接続
    const client = mqtt.connect('ws://127.0.0.1:8080'); // または 'ws://localhost:8083'

    client.on('connect', () => {
      document.getElementById('status').innerText = '接続成功！';
      console.log('MQTT 接続成功');
    });

    client.on('error', (err) => {
      document.getElementById('status').innerText = '接続失敗';
      console.error('MQTT 接続エラー:', err);
    });

    // メッセージの購読
    client.subscribe('example/testTopic', (err) => {
      if (!err) {
        client.publish('example/testTopic', 'Hello MQTT from Browser!');
      }
    });

    // メッセージを受け取ったときの処理
    client.on('message', (topic, message) => {
      console.log('メッセージ受信:', topic, message.toString());
    });
  </script>
<hr />
<p>Feb/10/2025</p>
</body>
</html>
```

サーバーの起動

```bash
http-server
```

サブスクライブ

```bash
mqtt sub -t 'example/testTopic' -h 'localhost' -p 8083 -v
```

ブラウザーで、 http://127.0.0.1:8081　にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8580dd1c-8093-3b51-960d-2f9bddd7c8e7.png)

```text
$ mqtt sub -t 'example/testTopic' -h 'localhost' -p 8083 -v
example/testTopic Hello MQTT from Browser!
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/165509bb-539f-eeed-5673-2724bd61cfe3.png)

コマンドラインで Publish

```bash
mqtt pub -t 'example/testTopic' -h 'localhost' -p 8083 -m 'Good Afternoon'
```

コンソールにメッセージが表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/2b8f4b51-3075-0390-6f71-2dc42854bf12.png)