OmniAICreator/Qiita-1.07M huggingface dataset:
twitcasting.tv へ ffmpeg から配信

とりま、執筆時点で有効な忘備録
気が向けば、体裁を整えるかねぇ(笑)
```shell:映像ファイルの配信
ffmpeg -v error -re -i "配信したい映像ファイル.mkv" -c:v libx264 -pix_fmt yuv420p -c:a aac -strict experimental -f flv "RTMP URL/ストリームキー"
```
```shell:3kHzを60秒間配信(映像はテストパターン)
ffmpeg -v error -re -f lavfi -i smptehdbars=1920x1080:d=60,format=yuv420p -f lavfi -i sine=frequency=3000:d=60 -c:v libx264 -pix_fmt yuv420p -r:v 24 -c:a aac -strict experimental -f flv "RTMP URL/ストリームキー"
```
```shell:ジャケ写を高さ720px固定に変換しつつ、aac_he で rtmp にぶっ込むワンライナー
ffmpeg -re -loop 1 -i "サムネイル.jpeg" -i "音源.wav" -c:a libfdk_aac -profile:a aac_he_v2 -b:a 48k -c:v libx264 -pix_fmt yuv420p -r:v 24 -vf scale=-2:720 -strict experimental -shortest -crf 28 -g 48 -keyint_min 24 -sc_threshold 12 -f flv "RTMP URL/ストリームキー"
```
![ツイキャス連携設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152444/fe0edd77-9d83-952e-84f9-21983a69647b.png)
共通なのは映像の送り出しには必ず libx264 が必要な事
msmpeg4 とはではツイキャスが受け取ってくれん😢
キーフレームが2秒～6秒にせんと、webブラウザの通知設定しおると、たぁ～んと出てきんさるけぇ、適宜通知を殺すか何なりと😱
音声は mp4 なヤツなら aac_he とかでも大丈夫っぽい♪
RTMP URL の末尾に「&pass=*」と書かれているのは録画を見る際に必要な合言葉をここで記述できる→日本語は未確認🤣
batファイルをぽちっとするだけでPython仮想環境(venv)に入らせたい

# <strong>やりたいことは題名の通り。</strong>
Pythonの仮想環境を丸ごと配布して、モジュールのインストールとか諸々をすっ飛ばしてPythonを実行させたい。

具体的な流れは以下の通り。
***
Venvで作成した環境(フォルダ)を丸ごと配布する。
※フォルダ内にactivateさせる為のbatファイルとps1ファイルをぶち込んでおく。
↓
配布先でデスクトップ等にbatファイルのショートカットを作成させる。
↓
batファイル　ぽちっ
↓
勝手に仮想環境に入って、勝手にコマンド実行して、Pythonファイルを実行してくれた！
***

以上のようなことはやりたい。

~~...「Pythonって単語だけ知ってる！」みたいな人が会社にいたので、
「ライブラリ インストールとか無理だろ...」と諦めたのが発端です~~

***
独り言は程々にしておきまして、必要なものは以下の4つ。
・作ったVenv環境
（環境構築の方法はGoogle先生に聞けば一発なので割愛）
・batファイル（powershell起動→ps1ファイルを実行させるのに必要）
・ps1ファイル（venvに必要な「activate」だったり「deactivate」を記述）
・配布したいpythonのファイル（今回は"hello world"するだけ）
***


# venv環境構築
Google先生や先人に丸投げするので割愛します。
ファイル構成については重要な部分のみ公開。
最初に中身だけ公開

VENV ファイル構成
├Include
├Lib
├program
│&emsp;&emsp;├venv_activate.ps1
│&emsp;&emsp;├ps1_execute.bat
│&emsp;&emsp;└test.py
│
└Scripts
&emsp;└初期のまま


# batファイル
```bat:ps1_execute.bat
echo "hello world"
powershell -ExecutionPolicy RemoteSigned ./venv_activate.ps1
echo "goodbye world"

pause
```
中身についての説明
1行目,3行目はテキトーな文言
2行目は「指定したps1ファイルをps1を実行可能なポリシーである[RemotoSigned]で起動させます！」ってことです。

会社でパソコンを配布されていたりするとps1ファイルを実行させようとしても、powershellのポリシーに引っ掛かる可能性があります。なので、そのポリシーを一時的に変更させます。
この手法だとプログラム終了後は[Restricted]というps1を実行できないポリシーに戻す事ができます。

# ps1ファイル
```ps1:venv_activate.ps1
cd ..
cd scripts
.\activate
cd ..

cd .\program
python .\test.py
cd ..
cd scripts
deactivate
```
大事なのは[.\activate]と[deactivate]の2つのコマンドです。
それ以外はディレクトリ移動してるだけなので、そこは自分の環境に合わせて書き換えてください。
自分は[scripts]と[program]という2つのディレクトリを跨ぐ必要があるので、cdコマンドを書いています。
※[python ~~.py]は自分で作成したファイル名に合わせた変更を忘れないように・・・

# test.py
```python:test.py
print("hello world")
```

これで以上です。うまくいけば[hello world]と表示されて終了です。

ちゃんとactivateされてるか不安という方はvenv環境にインストールをしていないモジュールをファイル内でインポートを試してみては・・・？
例えば、pandasをインストールせずに
上記と同じような流れで以下ファイルを実行すると
エラーを表示します。
```python:test.py
import pandas
print("hello world")
```
仮想環境にインストールしていないので、「そんなライブラリはありませんけど！！？？」ってpythonから怒られるはずです。

#　最後に
これでデスクトップにbatファイルのショートカットを作成すると
ショートカットをダブルクリックするだけでvenv内のpythonファイルを実行してくれます。
これより最適な方法はあるとは思いますが...

これが初めて書いた記事なので見辛いかとは思いますが、
何卒ご容赦を・・・
RuboCopをGitHub Actionsで実行したときに発生したエラーについて

# 何が起きたか

以下の2つのファイルを用意してGitHub ActionsでRuboCopを実行した。

```yml:.github/workflows/rubocop.yml
name: RuboCop

on: push

jobs:
  rubocop:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: ruby/setup-ruby@v1
        with:
          ruby-version: .ruby-version
          bundler-cache: true
      - run: bundle exec rubocop
```

```yml:.rubocop.yml
require:
  - rubocop-factory_bot
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec
  - rubocop-rspec_rails

AllCops:
  Exclude:
    - 'bin/**/*'
    - 'db/migrate/*'
    - 'db/schema.rb'
  NewCops: enable

RSpec/NestedGroups:
  Max: 4

Style/Documentation:
  Enabled: false
```

すると次のようなエラーが発生して、RuboCopを実行することができなかった。

```
Unable to find gem rubocop-discourse; is the gem installed? Gem::MissingSpecError
```

# 解決法
vendor/bundle配下をRuboCopの対象から外す。

```diff_yaml:.rubocop.yml
require:
  - rubocop-factory_bot
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec
  - rubocop-rspec_rails

AllCops:
  Exclude:
    - 'bin/**/*'
    - 'db/migrate/*'
    - 'db/schema.rb'
+   - 'vendor/bundle/**/*'
  NewCops: enable

RSpec/NestedGroups:
  Max: 4

Style/Documentation:
  Enabled: false
```

# 解説
ruby/setup-rubyを使うと`bundle install`する前に`bundle config --local deployment true`が実行される。

https://github.com/ruby/setup-ruby?tab=readme-ov-file#caching-bundle-install-automatically

すると`bundle install`は`bundle install --deployment`と同じ動作をする。このときGemはvendor/bundle配下にインストールされる。

https://bundler.io/man/bundle-install.1.html#DEPLOYMENT-MODE

このリポジトリではRuby on Railsを入れていて、その依存関係としてGemfile.lockに記載されていたmini_mimeというGemもインストールされた。するとRuboCop実行時にこのGemに含まれている.rubocop.ymlが読み込まれる。

https://github.com/discourse/mini_mime/blob/9e77375f2aad5fb6176f786cf5b64d9be75f319b/.rubocop.yml

```yml:.rubocop.yml
inherit_gem:
  rubocop-discourse: default.yml
inherit_mode:
  merge:
    - Exclude
```

`inherit_gem`により外部のGemに含まれる.rubocop.ymlの設定が引き継がれるようになる。しかしrubocop-discourse GemはGemfile.lockに記載されておらずインストールされていないため、冒頭のエラーが発生した。

https://docs.rubocop.org/rubocop/configuration.html#inheriting-configuration-from-a-dependency-gem

# 参考
https://hene.dev/blog/2024/07/22/check-the-quality-of-the-developed-gem-by-running-rubocop-and-rspec-with-github-actions

https://github.com/rubocop/rubocop/issues/9832
ITストラテジストに受験に向けてやること

<h2>ITストラテジスト合格したい</h2>
前回合格できなかった

午後Ⅰが免除になっているうちに合格したい

なので、直近の振り返りと今回の勉強での取り組み方の工夫をする

<h2>直近の振り返り</h2>
ST　午前Ⅱは合格、午後Ⅰ50点で落ちた

PM　午前Ⅱは合格、午後Ⅰ50点で落ちた

午後Ⅰが5割しか取れていないせいで受かってないので、午後Ⅱは採点されていない
→書いた論文が正しいのか間違ってるのかすらわかっていない

午後Ⅰがボトルネックである

勉強中でも午後Ⅰの過去問が5割程度しか取れないことがよくあった
→時間不足取り組み不足でそのまま試験へ→結果がそのまま出てしまった

また、試験時間ギリギリまで回答を考えていたので、スピードも上げていく必要がある

<h2>工夫すること</h2>

・午後Ⅰを徹底的に対策する
午前問題はなんだかんだ合格ラインに乗れている
アクティブリコールをやって、午前問題はなんとかする
午後Ⅰで落ちているので、午後Ⅰを中心にして試験に臨む
過去問を中心にして、午後Ⅰ突破をマストにしたい

・過去問時点で7割は取れるようにする
試験前で5割の状態で試験にもっていかない
取り組む時間を作る捻出する

・なんで5割しか取れていないのか原因を理解する
問題文が読めてないのか、設問の意図が取れてないのか、答え方が悪いのか、答えが上手く見つけられてないのか・・・
原因を理解して対処する
原因が理解できていないとどんな努力をしたらいいのかどんな対策がブレて点数がついてこない

・文章を読む習慣をつける
文字を普段読まないので、午後Ⅰの文章を読むのに時間がかかっている
実際に試験でも時間ギリギリで厳しかった
文章を読む基礎力や構成を理解する力が足りず何回も読み直しをしてしまっている
読書週間を1日10分からでもつける

・午後Ⅰの過去問を一日2問解くようにする
実戦でも2問解くことになるし、集中力や時間的に2問くらいがギリギリだと思っている
優先順位を上げて2問解いて、午後ⅠのPDCAサイクルをぐるぐる回したい
過去問が枯渇しそうであれば、畑違いではあるもののPMの過去問をやることも考える
IPAで同じような問題の出し方ではあるので、一定の効果はあると考えている

いろいろ書いたが、ITストラテジスト合格できるように頑張っていきたい
ChromebookのLinux（penguin、Debian系）にChromiumをインストールして、VSCodeの拡張機能を使う

## WindowsのVSCodeで使えた拡張機能が使えない？

### 関連記事
https://qiita.com/tomot7/items/baa0fc7f59023a22ab07

以前VSCodeの中でブラウザを開くことができる拡張機能を紹介したのですが、これをChromebookで導入したところ、下記画像のようなエラーが発生してブラウザが立ち上がりませんでした。

![Screenshot 2025-01-08 23.22.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124676/43146cc4-cce0-7b4f-5a80-9aac6fc5f595.png)

結論から言うと、Linuxにブラウザがインストールされていなかった（あるいは拡張機能の設定で、ブラウザパスが通っていなかった※）ことが原因でした。

[※browse-liteで使用するブラウザパスを指定する方法](https://github.com/antfu/vscode-browse-lite/issues/12#issuecomment-903167605)

今回の記事では、Linux（Debian系）にChromiumをインストールして、browse-liteが使えるようにセッティングするところまでを行います。

## 作業手順
### 1.Chromiumをインストールする
Linuxで下記コマンドを実行して、インストールします。
```
sudo apt install chromium
```

下記コマンドを実行して、パスがたくさん出てくればインストールできています。
```
dpkg -L chromium
```

### 2.browse-liteにChromiumのパスを設定する
VSCcodeでbrowse-liteの設定を開いて、「Chrome Executable」の項目を探します。
（下記画像の赤く塗ってある部分です。）

![Screenshot 2025-01-08 23.41.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124676/3b691d47-59d2-79f7-434b-e2784ce2ec1b.png)

「Chrome Executable」に`/usr/bin/chromium`を記入します。

![Screenshot 2025-01-08 23.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124676/2adc4081-447e-0a10-a303-822725dfbbb7.png)

### 3.browse-liteのタブを再起動する
設定タブやすでに開いているbrowse-liteタブがあったら、一旦閉じてから再度立ち上げると、browse-liteが使えるようになります。

![Screenshot 2025-01-08 23.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124676/a5431c3f-77c3-7464-f75c-c17cd04c8148.png)

## まとめ
かなりニッチな内容だと思いますが、お役に立てば幸いです。
（今回Chromiumを使用していますが、これは私のChromebookのプロセッサがARM64で、Chromeのインストールが大変そうだったという理由です。x64プロセッサであれば、Chromeをインストールして実行することもできると思います。）
WindowsにインストールしたApache 2.4で、POSTの内容をログに出力する

## 環境

- Windows 11
- Apatch 2.4（Cドラ直下に配置）

## 設定方法

1. `C:\Apache24\conf\httpd.conf`をVSCodeで開き、以下のように修正

    ``` diff_conf
    # LoadModule dumpio_module modules/mod_dumpio.so
    + LoadModule dumpio_module modules/mod_dumpio.so
    + DumpIOInput On
    + DumpIOOutput On
    
    ~中略~
    
    # LogLevel warn
    + LogLevel debug dumpio:trace7
    ```

2. 「タスクマネージャー > サービス」からApatch 2.4を探してプロセスを再起動する
3. VSCodeとかでBashを起動する
4. `dumpio`モジュールがロードされているかチェック
    （`httpd`が見つからないと言われたら、`bin`ディレクトリで`./httpd`にして実行）
    ```
    # httpd -M | grep dumpio
    dumpio_module (shared)
    ```
5. 文法チェック
    ```
    # httpd -t
    Syntax OK
    ```
6. POST系の通信を行う
7. `logs/error.log`を確認すると、`dumpio_out`の後にパラメータが書かれた行がたくさんしゅつりょくされてるはず

## 参考

- [HTTP POST でデータを送って中身を確認したい ](https://qiita.com/edapo/items/61589f496e7c7169c9d0)
- [Apache 2.4でPOSTの内容をログに出力するときは"LogLevel debug"だけじゃ出てこない](https://qiita.com/whywaita/items/fa6f83f4f62fc431bf55)
- [Apacheでmod_dumpioを使い、POSTデータをロギングする方法について](https://blog.denet.co.jp/apache_mod_dumpio/)
【AWS DynamoDB PartiQL Tips】JSONのフィールド名にドットが入っている場合の対処方法

# はじめに
　AWS DynamoDBのSQL互換のPartiQLを使って、DynamoDB内のJSONフィールドにドットが含まれる場合の対処方法を紹介する。PartiQLの詳細については以下を[こちらの記事](https://qiita.com/y-mae/items/1edf5809ce40d75779fb)を参照。

# 動作確認環境
* Windows 10 64bit
* [NoSQL Workbench](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/workbench.html)

# 前提

　JSONオブジェクトに以下のようにドット(.)が含まれている場合のフィールド名の指定方法について述べる。本来、ドットがフィールド名に入るのは、命名規則上良くない。なぜなら、階層を表すのにドットを使うため。命名規則を変えた方が良いが、既存のリソースを変更できない場合には、回避策として今回紹介する方法を参考にしてほしい。

```json:JSONオブジェクト例
{
   "timestamp": "1735080692440"
   "serial.no": "00001"
   "payload": {
     "sensor.value": "100"
   }
}
```

# 方法

　JSONフィールド名を```"```（ダブルクォーテーション）で囲う。階層になっている場合は、それぞれのフィールド名を```"```で囲う（例："filed1"."filed2"）。フィールド名に対応する値は、```'```（シングルクォーテーション）で囲う。


```sql:PartiQL例（timestampの降順で、JSONデータを抽出）
SELECT "timestamp", "payload"."sensor.value" FROM DynamoDBTable WHERE "serial.no" = '00001' ORDER BY "timestamp" DESC
``` 

# まとめ

　AWS DynamoDBのSQL互換のPartiQLを使って、DynamoDB内のJSONフィールドにドットが含まれる場合の対処方法を紹介した。本来は、JSONの命名規則を変更した方が良いが、どうしても変更できない場合は、今回紹介した方法で対処可能である。

# 参考

https://qiita.com/y-mae/items/1edf5809ce40d75779fb

https://qiita.com/beeeyan/items/9cc93c3526d7a53c63d0

https://stackoverflow.com/questions/74079770/new-to-partiql-what-is-wrong-with-this-select-statement
venvを用いてAWS Lambdaで使用できるレイヤーを作成する方法

1. Python仮想環境を作成する
まず、プロジェクトディレクトリに移動し、仮想環境（venv）を作成します。

```bash
mkdir lambda_layer
cd lambda_layer
python3 -m venv venv
```

2. 仮想環境を有効化する
次に、仮想環境をアクティブにします。これにより、ライブラリを仮想環境内にインストールできるようになります。

・Linux/Macの場合:
```bash
source venv/bin/activate
```
・Windowsの場合:
```bash
.\venv\Scripts\activate
```

3. 必要なパッケージをインストールする
requestsライブラリを仮想環境内にインストールします。

```bash
pip install requests
```

4. 必要なファイルをパッケージ化する
Lambdaレイヤーは、Pythonライブラリをpythonディレクトリに配置する必要があります。以下のコマンドを実行し、仮想環境のlibディレクトリ内から必要なファイルをコピーします。

```bash
mkdir -p python
cp -r venv/lib/python3.*/site-packages/* python/
```

5. Windowsの場合、フォルダを開いて対象のファイルをZip化する

6. Lambda上でレイヤーを作成する際に、先程作成したZipファイルをあげてレイヤー完成
インスタンス化のインスタンスって何？ロボットで完全解説！

「インスタンス化って聞いたけど、インスタンスって結局何なの？」  
プログラミングを学び始めた人が最初に感じる疑問のひとつですよね。  

今回は **ロボットの例え** を使って、インスタンスやインスタンス化について詳しく解説していきます！  


## インスタンスって何？ 
プログラミングでは、「**インスタンス**」は **「クラス」** という設計図を元に作られた **具体的なモノ** のことです。  
例えばロボット工場をイメージしてみましょう。  

### クラス（設計図）  
  ロボットを作るための「設計図」のことです。この設計図には、ロボットが「何ができるか」「どんな特徴を持つか」が書かれています。

### インスタンス（実体）  
  実際に工場で組み立てられたロボットそのものです。同じ設計図を使っても、それぞれのロボットには違う名前や動作を設定できます。

### インスタンス化（組み立て作業）  
  設計図を使って、ロボットを実際に組み立てるプロセスのことを「インスタンス化」と呼びます。


## ロボット工場の具体例  

### 1. 設計図（クラス）を作る  
   例えば、以下のような設計図を用意します。  
   このロボットは「名前」と「あいさつ機能」を持っています。

   ```python
   class Robot:
       def __init__(self, name):
           self.name = name  # ロボットの名前を設定

       def greet(self):
           print(f"こんにちは！私はロボット「{self.name}」です！")
   ```
:::note info
   **ポイント**：  
   - クラスはあくまで「設計図」なので、このままではロボットを動かすことはできません。  
   - 実際にロボットを作るには「インスタンス化」が必要です。 
:::
 
### 2. ロボットを組み立てる（インスタンス化）  
   次に、この設計図を元にロボットを作ります。これが「インスタンス化」です。  

   ```python
   robot1 = Robot("アイボ")  # 1体目のロボットを作成
   robot2 = Robot("ペッパー")  # 2体目のロボットを作成
   ```

:::note warn
   **ここで何が起きている？**  
   - `Robot("アイボ")` を実行すると、クラスの `__init__` メソッド（初期化メソッド）が呼ばれます。  
   - このとき、`name="アイボ"` が設定され、「アイボ」という名前を持つロボット（インスタンス）が完成します。
:::
\_\_init__ メソッド（初期化メソッド) については、以下の記事を参照してください。

https://qiita.com/masaya8028/items/724a8543fe5a80d60a9d

Pythonのクラスのselfの使い方については、以下の記事を参照してください。

https://qiita.com/masaya8028/items/58e8eb123be77068643b

### 3. ロボットを動かす（インスタンスの利用）  
   作ったロボットを使ってみましょう。

   ```python
   robot1.greet()  # → こんにちは！私はロボット「アイボ」です！
   robot2.greet()  # → こんにちは！私はロボット「ペッパー」です！
   ```

   ここでは、それぞれのインスタンス（`robot1`、`robot2`）が動作しています。


## インスタンス化を3つのステップで理解しよう！

### 1. 設計図を用意する  
   - クラスとして、ロボットの名前や機能を定義します。  
   - 例: 「名前を覚える」「あいさつする」機能など。  

### 2. インスタンスを作る  
   - クラス（設計図）を使って実際にロボットを作成します。  
   - 例: 「アイボ」という名前のロボットを作る。  

### 3. インスタンスを使う  
   - 作成したインスタンスを操作して、ロボットを動かします。  
   - 例: 「あいさつする」機能を呼び出す。  


## 💡 インスタンス化のポイント  
### 同じ設計図から異なるロボットを作れる  
例えば、アイボとペッパーは同じ `Robot` クラスを使って作られていますが、それぞれ名前が異なります。
  
### インスタンスごとに独立したデータを持てる  
`robot1`（アイボ）の名前を変更しても、`robot2`（ペッパー）には影響を与えません。

## もう少し複雑な例

ロボットにさらに「歩数を記録する機能」を追加してみます。

```python
class Robot:
    def __init__(self, name):
        self.name = name  # 名前
        self.steps = 0    # 歩数

    def walk(self, steps):
        self.steps += steps
        print(f"{self.name}は{steps}歩歩きました。合計: {self.steps}歩")
```

これを使うと、ロボットごとに歩数を記録できます。

```python
robot1 = Robot("アイボ")
robot2 = Robot("ペッパー")

robot1.walk(10)  # → アイボは10歩歩きました。合計: 10歩
robot2.walk(5)   # → ペッパーは5歩歩きました。合計: 5歩
robot1.walk(3)   # → アイボは3歩歩きました。合計: 13歩
```

## まとめ：インスタンス化をマスターしよう！

- **クラス** はロボットの設計図、**インスタンス** は具体的なロボット。  
- **インスタンス化** とは、設計図からロボットを作るプロセス。  
- インスタンスごとに独立したデータや機能を持たせることができる。  


これで「インスタンス化」が何をしているのか、しっかり理解できましたね！  
ロボットをどんどん作りながら、プログラミングを楽しんでください！✨
Taliwindで要素を真ん中寄せ


### 要素を真ん中に寄せたい時、下記のコードで実現できます。
①要素を**flex**に設定
②縦軸と横軸を中心に設定(**items-center justify-center**)
③flexの高さの最小を画面の高さに設定(**min-h-screen**)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308275/972b9462-f1e0-4a5a-b369-bb57cb573dc2.png)

```
  return (
    <div className = "flex items-center justify-center bg-gray-700  min-h-screen ">
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
      <Card >
        <CardContent>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
          <p>テストだよ</p>
        </CardContent>
      </Card>
    </div>
  );
```
Docusaurus の scaffold で作成した Project で Docs 機能を廃止し Blog 機能のみ使用するように変更する


## はじめに

Docusaurus の Project を簡単に始める方法として scaffold を使用する方法が推奨されています。
Scaffold で作成した Project には Docs, Blog 機能やトップページ等多くの機能が組み込まれています。

Docusaurus を単にブログ管理のために使用したい場合は `blog` 以外の機能を廃止したほうがスッキリするのでドキュメント管理のためだけに使用する方法を記載しておきます。

## scaffold 直後の構成

`npx create-docusaurus@latest my-website classic` 等で作成した直後の Project 構成は以下のようになっています。

```sh
> tree -L 2 -I node_modules/
.
├── README.md
├── blog
│   ├── 2019-05-28-first-blog-post.md
│   ├── 2019-05-29-long-blog-post.md
│   ├── 2021-08-01-mdx-blog-post.mdx
│   ├── 2021-08-26-welcome
│   ├── authors.yml
│   └── tags.yml
├── docs
│   ├── intro.md
│   ├── tutorial-basics
│   └── tutorial-extras
├── docusaurus.config.ts
├── package-lock.json
├── package.json
├── sidebars.ts
├── src
│   ├── components
│   ├── css
│   └── pages
├── static
│   └── img
└── tsconfig.json
```

## `docs` ディレクトリの削除 及び 設定の変更

不要となる `docs` ディレクトリを削除'します。

```sh
rm -rf docs
```

及び `src/pages/index.tsx` を削除します。

```sh
rm src/pages/index.tsx
```

`docusaurus.config.ts` 内の `docs` に関する設定を削除するとともに、 `blog` に `routeBasePath: "/",` を追加します。

```diff_typescript:docusaurus.config.ts
const config: Config = {
  // 他設定 ...
  presets: [
    [
      'classic',
      {
+       docs: false,
-       docs: {
-         routeBasePath: "/",
-         sidebarPath: './sidebars.ts',
-         // Please change this to your repo.
-         // Remove this to remove the "edit this page" links.
-         editUrl:
-           'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-       },
        blog: {
+         routeBasePath: '/',
          showReadingTime: true,
          feedOptions: {
            type: ['rss', 'atom'],
            xslt: true,
          },
          // Please change this to your repo.
          // Remove this to remove the "edit this page" links.
          editUrl:
            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
          // Useful options to enforce blogging best practices
          onInlineTags: 'warn',
          onInlineAuthors: 'warn',
          onUntruncatedBlogPosts: 'warn',
        },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
```

ここまで対応すれば `/` へアクセスした際に blog 以下のコンテンツが表示されるようになります。

## Ref

https://docusaurus.io/docs/blog#blog-only-mode
猪熊祐斗の学習メモ：エンジニアが最速で知識をインプットする方法

# エンジニアが最速で知識をインプットする方法

エンジニアとして効率的に学び続けることは、技術の進化が速い業界において非常に重要です。本記事では、エンジニアが最速で知識をインプットするための具体的な方法を紹介します。

---

## 1. ゴールを明確にする

新しい知識をインプットする際には、以下のような目的を明確にします。

- **具体的な目標を設定**: 例: 「Reactを使ってシンプルなWebアプリを作成する」
- **実践と結びつける**: 学んだ内容をすぐにアウトプットできるプロジェクトを準備します。

---

## 2. 高速で全体像を把握する

### ドキュメントや公式サイトの活用
公式ドキュメントやリファレンスは、最も信頼できる情報源です。全体像を把握するために、以下の手順を踏みましょう。

1. **目次を確認する**: 必要なトピックを見極める。
2. **概要ページを読む**: 詳細は後回しにして全体の流れを理解する。

#### 例: React公式ドキュメント
```plaintext
1. Getting Started
2. Main Concepts
3. Advanced Guides
```

### 動画教材で概要を掴む
YouTubeやUdemyの短い動画コースを利用して、視覚的に全体像を理解します。

---

## 3. 小さな単位で深掘りする

学習を効率化するには、以下のようにトピックを細分化して取り組むのが有効です。

- **学ぶトピックを分割**:
  - 基本的な文法（例: JavaScriptなら変数、関数、条件分岐）
  - より高度な概念（例: 非同期処理、デザインパターン）
- **ひとつの単位を集中して学ぶ**: 例: 「1時間でPromiseを理解する」

---

## 4. 実践ベースの学習

「手を動かす」ことは、知識を定着させる最速の方法です。

### ハンズオンプロジェクト
- **チュートリアルを活用**: 公式のチュートリアルやGitHubのリポジトリをフォークして試す。
- **小さなアプリを作成**: 例: ToDoアプリ、簡単なAPI連携

#### サンプルコード例
```javascript
// 簡単なAPI連携の例
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
```

---

## 5. インプットとアウトプットの比率を最適化する

知識を定着させるためには、アウトプットが欠かせません。

### 効果的なアウトプットの方法
- **ブログを書く**: 学んだことを整理して公開。
- **チームでシェア**: 同僚に説明することで理解が深まる。
- **質問に答える**: Stack Overflowや技術フォーラムで他人の質問に答える。

---

## 6. リソースの選び方

### 信頼性の高いリソース
- **公式ドキュメント**: 最優先。
- **エンジニア向け本**: 例: 『Clean Code』や『You Don’t Know JS』
- **オンラインコース**: UdemyやPluralsightで評価の高いコースを選ぶ。

### 短期間で成果を出すためのリソース
- **ニュースレターやポッドキャスト**: 業界のトレンドを把握。
- **技術ブログ**: MediumやQiitaで最新情報をチェック。

---

## 7. 定期的な復習

忘却曲線を克服するために、定期的に復習を行いましょう。

### 効果的な復習方法
- **スケジュールを立てる**: 1日後、1週間後、1か月後に復習。
- **フラッシュカードを利用**: AnkiやQuizletで重要なポイントを反復。

---

## 8. 知識を広げるためのコミュニティ参加

同じ分野のエンジニアと交流することで、最新の情報や実践的な知識を得られます。

### コミュニティ例
- **Meetup**: ローカルの勉強会。
- **オンラインフォーラム**: RedditやHacker News。
- **OSSへの貢献**: GitHubでプロジェクトに参加。

---

## まとめ

エンジニアが最速で知識をインプットするためには、効率的な学習方法とアウトプットのバランスが鍵となります。目標を明確にし、実践を重視しながら信頼できるリソースを活用することで、短期間で大きな成果を得ることができます。今日からぜひ実践してみてください！
【Zed】スニペットを登録する方法

## 設定ファイルを作成する

コマンドパレットで`snippets: configure snippets`を実行します。

![スクリーンショット 2025-01-28 22.52.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/1b790f84-2d87-5074-9947-28d77cde03d1.png)

スニペットを登録する言語を選択します。

![スクリーンショット 2025-01-28 22.54.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/87a40358-d14c-c50f-13a7-0e866404b2d1.png)

`TSX`を選択した場合には`~/.config/zed/snippets/tsx.json`が開きます。

## スニペットを記述する

`tsx.json`にスニペットを記述します。

```jsonc:tsx.json
{
  "React Client Component": {
    "prefix": "rcc",
    "body": [
      "${1:'use client'}",
      "",
      "type ${2:Props} = {",
      "\t$3",
      "}",
      "",
      "export function ${4:ClientComponent}({$5}: ${2:Props}) {",
      "\t$6",
      "\treturn (",
      "\t\t$0",
      "\t)",
      "}"
    ],
    "description": "React Client Component"
  },
  "Log to the console": {
    "prefix": "log",
    "body": ["console.${2|log,error,table|}($1)", "$0"],
    "description": "Log to the console"
  }
}

```

- `$1`,`$2`...`$0`：Tabを押下すると1,2...0の順番でカーソルが移動
- `${4:ClientComponent}`：デフォルト値
- `console.${2|log,error,table|}`：`||`で括られた値から選択

## 動作

![画面収録 2025-01-28 23.40.11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/3b3800b4-3117-481f-1ae8-ed42ddee3154.gif)

![画面収録 2025-01-28 23.40.41.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/54a46294-ee8d-170c-26b3-1060093524db.gif)

## 参考

https://zed.dev/docs/snippets
【リーダブルコード】初心者エンジニアが読み解く「短いコード」を書くためのポイント - 第13章

こんばんは。マル太です！

前回は、リーダブルコードの第12章「コードに思いを込める」についてまとめました。

今回は、第13章「短いコードを書く」について、Qiitaにアウトプットしていきます。
<br>

# なぜ短いコードを書くべきなのか？
長いコードは、読みにくく、理解しづらいものです。

まるで、長い文章を読むのが大変なように、コードも長すぎると、どこで何が起きているのか把握するのが難しくなります。

結果として、バグを見つけるのが難しくなったり、修正に時間がかかったり、他のエンジニアと協力して作業するのが大変になったりします。

短いコードを書けば、それ自体がよくできたプレゼン資料のように見せることができます。
<br>

# 短いコードを書くためのヒント

**1.必要最低限の機能だけを実装する**

YAGNI原則 (You Ain't Gonna Need It / 今必要なものだけを作る) を意識しましょう。

将来必要になるかもしれない機能を、事前に実装する必要はありません。

本当に必要な機能だけを実装することで、コードの肥大化を防ぎ、可読性と保守性を高めることができます。

無駄な機能は、コードを複雑化させ、可読性を低下させるだけでなく、バグの温床にもなりかねません。
<br>

**2.質問と要求を分割する**
複雑な問題を解決する際には、問題を小さなタスクに分割し、それぞれを独立して解決していくことが重要です。

例として、店舗検索システムの場合、

質問：ユーザーは何を知りたいのか？
・ユーザーの現在地に近い店舗は？
・特定の条件（営業時間、取扱商品など）に合致する店舗は？

要求：システムは何をすべきか？
・店舗データの取得
・位置情報の取得
・条件に合致する店舗の絞り込み
・検索結果の表示

のように分割することができます。

このように、質問と要求を明確に分けることで、問題を整理し、より効果的に解決することができます。

例：キャッシュを追加する
キャッシュ機能を追加する際にも、既存のコードに影響を与えないよう、独立したモジュールとして実装することで、コードの可読性を維持することができます。

※キャッシュって？
キャッシュとは、一度行った処理の結果を保存しておき、2回目以降は保存した結果を利用することで、処理を高速化する仕組みです。

例：掛け算の結果をキャッシュする

```ruby:Python
# キャッシュ用の辞書
cache = {}

def multiply(x, y):
  """
  2つの数値を掛け算する関数
  """
  key = (x, y)  # キーとしてタプル(x, y)を使う
  if key in cache:
    print("キャッシュから取得")
    return cache[key]
  else:
    print("計算を実行")
    result = x * y
    cache[key] = result
    return result

# 実行例
print(multiply(2, 3))  # 計算を実行、出力: 6
print(multiply(4, 5))  # 計算を実行、出力: 20
print(multiply(2, 3))  # キャッシュから取得、出力: 6 
```

<br>

**3.コードは小さく保つ**
コードを小さく保つための具体的な方法として、以下のようなものがあります。

行数を減らす
・関数を小さくする
・ネストを浅くする
・コメントを効果的に使う
・重複を避ける
<br>

**4. 身近なライブラリを活用する**
既存のライブラリやフレームワークを活用することで、コードの記述量を減らし、可読性を向上させることができます。

例：Pythonのリストとセット
Pythonでは、リストやセットなどの組み込みデータ構造を活用することで、効率的にデータを処理することができます。

```ruby:Python
# 重複した要素を含むリスト
my_list = [1, 2, 2, 3, 4, 4, 5]

# リストをセットに変換して重複要素を削除
my_set = set(my_list)

# セットをリストに戻す
new_list = list(my_set)

print(new_list)  # 出力: [1, 2, 3, 4, 5]
```
解説：

リストは要素の重複を許容しますが、セットは重複を許容しません。
この性質を利用して、リストをセットに変換することで、重複した要素を削除することができます。
<br>

※ライブラリの再利用はなぜいいことなのか
ライブラリを再利用することで、

・開発効率が向上する
・コードの品質が向上する (バグが減る、可読性が向上する)
・他の開発者との連携がスムーズになる
といったメリットがあります。
<br>

**5.コーディングするよりもUnixツールボックスを使う**
Unixツールボックスなどの既存のツールを活用することで、複雑な処理を簡潔に記述することができます。

例えば、、、

・`grep` コマンドを使えば、ファイルから特定の文字列を含む行を抽出することができます。
・`sed` や `awk` などのコマンドを使えば、コードのインデントを修正したり、不要な空白を削除したりすることができます。

※Unixツールボックスって？
Unixツールボックスとは、Unix系OS (Linux, macOSなど) に標準で搭載されている、コマンドラインツール群のことです。コードの自動生成や整形など、プログラミングにも活用できます。


<br>


# まとめ
短いコードを書くことは、コードの可読性、保守性、そして信頼性を向上させるために非常に重要です。

今回紹介したヒントを参考に、簡潔で分かりやすいコードを記述しましょう。

次回は、第14章「テストと読みやすさ」についてまとめます。
macOSシステム設定：開発用に必ずインストールするベストアプリ


開発環境を整えるために、macOSにインストールしておきたいベストアプリを紹介します。これらのアプリは、コードの記述からデザイン、デバッグ、ファイル管理まで、さまざまな場面で活躍します。

---

## 開発環境構築

- **Android Studio**  
  Android アプリを開発するための公式 IDE。エミュレーターや豊富なツールセットが特徴です。  
  [オフィシャル](https://developer.android.com/studio?hl=ja)

- **Docker**  
  コンテナベースの仮想化ツール。開発環境の構築やデプロイに役立ちます。  
  [オフィシャル](https://docs.docker.com/desktop/setup/install/mac-install/)

- **Xcode**  
  macOS/iOS アプリ開発用の公式 IDE。Swift や Objective-C を使った開発に最適です。  
  [オフィシャル](https://developer.apple.com/download/all/?q=Xcode)

- **Visual Studio Code**  
  軽量かつ拡張性の高いコードエディタ。多くのプログラミング言語をサポートしています。  
  [オフィシャル](https://code.visualstudio.com)

- **Sublime Text**  
  シンプルで高速なコードエディタ。豊富なカスタマイズオプションが魅力です。  
  [オフィシャル](https://www.sublimetext.com/download)

---

## デザイン・ドキュメント作成

- **Adobe Photoshop**  
  デザイン作業や画像編集の定番ツール。開発者向けにもアイコンやUI素材の作成に役立ちます。  
  [オフィシャル](https://www.adobe.com)

- **draw.io**  
  フローチャートやUML図などの作成に便利なオンラインツール。効率的に設計を可視化できます。  
  [オフィシャル](https://www.drawio.com)

---

## ファイル管理・転送

- **ForkLift**  
  高機能なファイル管理ツール。FTP/SFTPやクラウドストレージにも対応しています。  
  [オフィシャル](https://binarynights.com)

- **Path Finder**  
  Finder の代替となる高度なファイルマネージャ。タブ管理やシェル統合が可能です。  
  [オフィシャル](https://cocoatech.io)

- **Transmit**  
  ファイル転送に特化したアプリ。FTP、SFTP、Amazon S3など幅広く対応しています。  
  [オフィシャル](https://panic.com/jp/transmit/)

---

## テスト・APIクライアント

- **Insomnia**  
  RESTやGraphQLのテストに役立つAPIクライアント。シンプルなUIで操作が直感的です。  
  [オフィシャル](https://insomnia.rest/download)

---

## その他便利ツール

- **Google Chrome**  
  開発者ツールが充実しているブラウザ。Web開発に欠かせません。  
  [オフィシャル](https://www.google.com/chrome/)

- **CotEditor**  
  軽量なテキストエディタ。シンプルな日本語対応でちょっとした編集に便利です。  
  [App Store](https://apps.apple.com/jp/app/coteditor/id1024640650?mt=12)

---

## まとめ

これらのアプリは、開発環境の構築や効率的な作業を支える重要なツールです。用途に応じてインストールして、快適な開発ライフを送りましょう！
PythonでExcelファイルから特定のデータを抽出しリストにまとめる方法

### はじめに
PythonでExcelファイルを操作する際、`openpyxl`ライブラリを使用することが一般的です。今回は、Excelファイル内の特定の列（例えば、日付）のデータを抽出してリストにまとめる方法について解説します。具体的には、メールの受信日時などを含む列から日付を抽出する実装を紹介します。

#### 1. `openpyxl`ライブラリを使用したExcelファイルの読み込み
まず、`openpyxl`ライブラリを使ってExcelファイルを開き、必要な列のデータを取得します。例えば、次のコードは、2行目以降（ヘッダー行を除く）のデータを順番に処理します。

```python
import openpyxl

# Excelファイルの読み込み
wb = openpyxl.load_workbook("emails.xlsx")
sheet = wb.active

# 2行目からのデータを抽出
dates = [row[2] for row in sheet.iter_rows(min_row=2, values_only=True) if row[2]]
```

#### 2. データの抽出について
```python
dates = [row[2] for row in sheet.iter_rows(min_row=2, values_only=True) if row[2]]
```

##### 1. sheet.iter_rows(min_row=2, values_only=True)
sheet.iter_rows(min_row=2, values_only=True) は、openpyxlライブラリを使ってExcelシートを操作する際のメソッドです。
min_row=2 は、2行目からデータを読み始めるという意味です。つまり、1行目（ヘッダー行）を除いて、2行目からデータを取得します。
values_only=True は、セルの値のみを取得するというオプションです。これにより、セルのオブジェクトそのものではなく、セルに格納されているデータ（例えば文字列、数値、日付など）がリストとして取得されます。
##### 2. for row in sheet.iter_rows(...)
for row in sheet.iter_rows(...) は、2行目以降の各行を1行ずつループします。各行はリスト形式で取得され、row という変数に格納されます。
row は、行の各セルの値を含んだタプルになります。
##### 3. row[2]
row[2] は、各行の3列目のデータを指します。インデックスが0から始まるため、row[2] は「3列目」のデータを取得することになります。
ここで取得しているのは、メールの日時が格納されている列（Excelシートの「Date」列）です。
##### 4. if row[2]
if row[2] は、row[2] に値が存在するかどうかを確認しています。もし3列目に値が入っていれば、その値（日時）をリストに追加します。
空のセル（値がないセル）や None が入っている場合は、その行はスキップされます。
##### 5. リスト内包表記
[row[2] for row in sheet.iter_rows(min_row=2, values_only=True) if row[2]] はリスト内包表記という形式で書かれており、sheet.iter_rows(...) で取得した各行について、3列目（row[2]）の値が存在する場合に、その値をリスト dates に格納する処理です。

#### ３. 結果として得られるリスト
この処理が成功すると、`dates` というリストには、指定した列の日付データが格納されます。例えば、以下のようなExcelデータがある場合：

| Subject      | From          | Date                | Body         |
|--------------|---------------|---------------------|--------------|
| メール1       | example1@gmail.com | Wed, 01 Jan 2025 10:16:39 GMT | メール本文1 |
| メール2       | example2@gmail.com | Thu, 02 Jan 2025 11:20:41 GMT | メール本文2 |
| メール3       | example3@gmail.com | None                | メール本文3 |

この場合、`dates` リストには次のように日付が格納されます：

```python
dates = [
    "Wed, 01 Jan 2025 10:16:39 GMT",
    "Thu, 02 Jan 2025 11:20:41 GMT"
]
```

`None` が含まれている行はスキップされ、リストには実際の日時のみが含まれます。

#### ４. VBAで行った場合
VBAではこんなにコードを書かなければいけないところをPythonでは1行で行うことができる
```VBA
Sub GetDatesFromExcel()
    Dim ws As Worksheet
    Dim lastRow As Long
    Dim i As Long
    Dim dates As Collection
    Dim cellValue As Variant
    
    ' シートの設定（例: "Sheet1"）
    Set ws = ThisWorkbook.Sheets("Sheet1")
    
    ' 最終行の取得
    lastRow = ws.Cells(ws.Rows.Count, 1).End(xlUp).Row
    
    ' 日付を格納するコレクションの初期化
    Set dates = New Collection
    
    ' 2行目から最終行までループ
    For i = 2 To lastRow
        ' 3列目（列C）の値を取得
        cellValue = ws.Cells(i, 3).Value
        
        ' セルの値が空でない場合、コレクションに追加
        If Not IsEmpty(cellValue) Then
            dates.Add cellValue
        End If
    Next i
    
    ' 結果の表示（デバッグ用）
    For Each date In dates
        Debug.Print date
    Next date
End Sub

```

#### まとめ
`openpyxl`を使うことで、Excelファイルから簡単に特定のデータを抽出し、リストとして扱うことができます。この技術は、データ解析やメールの受信日時管理など、さまざまな場面で活用できます。

今回紹介した方法を参考に、Excelファイルを操作する際に特定の列を効率よく抽出し、データを整理することができるようになります。
macOSシステム設定：必ずインストールするマストアプリ

macOS を快適に使うためにインストールしておきたいアプリを厳選して紹介します。生産性向上やシステム管理、プログラミングなど、幅広い用途で役立つアプリをまとめました。

---

## セキュリティ・広告ブロック

### **AdGuard for Safari**
Safari 用の広告ブロッカーです。煩わしい広告やトラッキングをブロックして、安全で快適なブラウジングを実現します。

[App Store](https://apps.apple.com/jp/app/adguard-for-safari/id1440147259?mt=12)

---

## 生産性向上ツール

### **Alfred**
アプリランチャーとして有名な Alfred は、Spotlight を強化したような便利ツールです。カスタマイズ可能なショートカットで作業効率を爆上げできます。

[オフィシャル](https://www.alfredapp.com)

### **Clipy**
クリップボード管理ツール。コピー履歴をさかのぼれるので、作業効率が大幅に向上します。

[オフィシャル](https://clipy-app.com)

### **MenubarX**
メニューバーにウェブアプリやカスタム Web ページを表示できるアプリ。タスク管理や情報確認に便利です。

[オフィシャル](https://menubarx.app)

---

## メンテナンス・システム管理

### **AppCleaner**
アプリを完全にアンインストールできるツール。関連ファイルも一緒に削除してくれます。

[オフィシャル](https://freemacsoft.net/appcleaner/)

### **BuhoCleaner**
システムクリーンアップツール。キャッシュや不要なファイルを簡単に削除できます。

[オフィシャル](https://www.drbuho.com/jp)

### **TimeMachineEditor**
Time Machine のバックアップスケジュールを自由にカスタマイズできます。

[オフィシャル](https://tclementdev.com/timemachineeditor/)

---

## ブラウザ・入力ツール

### **Firefox**
軽快でプライバシーに配慮したブラウザ。Google Chrome の代替としても人気です。

[オフィシャル](https://www.mozilla.org/ja/firefox/)

### **Google 日本語入力**
高精度な日本語入力システム。快適なタイピングを提供してくれます。

[オフィシャル](https://www.google.co.jp/ime/)

---

## ファイル管理・圧縮ツール

### **Keka**
軽量でシンプルな圧縮・解凍ツール。幅広いフォーマットに対応しています。

[オフィシャル](http://www.keka.io/ja/)

---

## Officeスイート・クラウドストレージ

### **Microsoft Office**
Word、Excel、PowerPoint の定番オフィスツール。仕事で必要不可欠です。

- [Word (App Store)](https://apps.apple.com/jp/app/microsoft-word/id462054704?mt=12)  
- [Excel (App Store)](https://apps.apple.com/jp/app/microsoft-excel/id462058435?mt=12)  
- [PowerPoint (App Store)](https://apps.apple.com/jp/app/microsoft-powerpoint/id462062816?mt=12)

### **OneDrive**
Microsoft のクラウドストレージ。ファイル共有やバックアップに便利です。

[App Store](https://apps.apple.com/jp/app/onedrive/id823766827?mt=12)

---

## コミュニケーション

### **Zoom**
リモート会議の定番ツール。高品質なビデオ通話が可能です。

[オフィシャル](https://zoom.us/download)

---

## プログラミング関連

### **⌘かな**
Caps Lock キーを「英数」「かな」切り替えキーに変更できる便利ツール。プログラマーにおすすめです。

[オフィシャル](https://ei-kana.appspot.com)

---

## AIアシスタント

### **ChatGPT**
AI を使って文章生成や質問解決ができるアプリ。仕事や学習の補助に最適です。

[オフィシャル](https://openai.com/ja-JP/)

---

## まとめ

これらのアプリは、macOS を最大限活用するためのマストアイテムです。ぜひ、自分の作業スタイルに合わせてインストールしてみてください！

---
GitHubでのOrganizationsの通知は会社のメールに送ってほしい

# はじめに

タイトルの通りですが、「会社のGitHub Organizationsに参加したけど何かあったときの通知が個人のメールアドレスに送られてくる！会社のメールアドレスに送ってほしい！」という時の対処方法です。

ちなみに↓の記事とほぼ同じ内容ですが... 一応、自分でも記録を残しておきます。

https://dev.classmethod.jp/articles/separate-github-notification-email-addresses-for-each-organizations/

# 通知のカスタマイズ

通知先のメールアドレスは予めGitHubに設定しておきます。
ちなみに設定画面は自分のアイコンをクリックして`Setting`を開き、左にある`Emails`タブです。ここからメールアドレスを追加し、認証まで完了したらいよいよ本題です。

自分のアイコンをクリックして`Setting`を開き、左の`Notifications`タブから`Default notifications email`の中にある`Custom routing`を押します。

![スクリーンショット 2025-01-28 22.32.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760224/33d789a5-10a6-8f20-6ae0-a6c10c14e893.png)

その画面で`Add new route`を押し、どのOrganizationsに対してどのメールアドレスを割り当てるのか選択します。

![スクリーンショット 2025-01-28 23.07.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760224/7297b7df-af92-f3e5-b240-31ffa98e0f0b.png)


以上です！
【リーダブルコード】初心者エンジニアが読み解く「コードに思いを込める」極意 - 第12章

こんにちは。マル太です！

前回は、リーダブルコードの第11章「一度に一つのことを」についてまとめました。

今回は、第12章「コードに思いを込める」について、Qiitaにアウトプットしていきます。
<br>

# コードに思いを込めるってどういうこと？
コードは、ただ単にコンピュータに指示を与えるためのものではありません。

他の開発者、そして未来の自分自身に、意図や目的を伝えるためのコミュニケーションツールでもあります。

「コードに思いを込める」とは、コードを理解しやすく、メンテナンスしやすく、そして再利用しやすいように、丁寧に記述することだと、著者は述べています。
<br>

# コードに思いを込めるための具体的な方法
<br>

**1.ロジックを明確に説明する**
コードを書く前に、まず「何をしたいのか」「なぜそうするのか」を明確にしましょう。

そして、そのロジックをコードで表現する際には、コメントや適切な命名規則などを活用し、理解しやすさを心がけましょう。

※例
```ruby:Java
// ユーザーの年齢が20歳以上かどうかを確認する
if (user.age >= 20) {
  // 20歳以上のユーザーにのみ表示するコンテンツ
}
```
<br>

**2.ライブラリを知る**
既存のライブラリやフレームワークを活用することで、
コードの記述量を減らし、可読性を向上させることができます。

ただし、ライブラリを使用する際は、その機能や使用方法をしっかりと理解しておくことが重要です。
<br>

**3.この手法を大きな問題に適用する**
複雑な問題を解決する際には、「解決策を言葉で説明する」という手法が有効です。

まず、問題を解決するための手順を、言葉で明確に説明してみましょう。

そして、その説明を基に、コードを記述していくことで、より理解しやすく、保守性の高いコードを作成することができます。
<br>

**①解決策を言葉で説明する**
複雑な処理をコードで記述する前に、
まずは自分の頭の中で、その処理内容を簡単な言葉で説明してみましょう。
言葉で説明することで、ロジックの矛盾や改善点に気づくことができます。

**②手法を再帰的に適用する**
大きな問題を解決する際には、問題を小さな部分に分割し、
それぞれの部分に対して先ほどの「解決策を言葉で説明する」という手法を適用していくことが有効です。

（ちなみに、上記の①と②はコードを書く以外にも、仕事や私生活の問題解決の際にも役立ちそうだなと思いました。）
<br>

# まとめ
コードに思いを込めることで、他の開発者とのコミュニケーションを円滑にし、開発効率を向上させることができます。

今回紹介した方法を参考に、可読性が高く、メンテナンスしやすいコードを書けるようになりたいものです。

次回は、第13章「短いコードを書く」についてまとめます。
組み込む向けフォントが高すぎる問題

はい、miku_JK_Jbです

今回は組み込み向けフォントが高すぎる問題について話をしていこう。

なんだかんだで久しぶりのブログ更新だな。

 

最初にモリサワに組み込みフォントの見積もり依頼を出した時の詳細を見ていこう

 

見積もりを作成する際に聞いた質問した内容はこんな感じ

・自作OSにフォントの組み込みは可能か？

・ライセンスの条件はどんな感じか？

・使用許可やライセンス費用はいくらか？

ちなみに後で記述するモリヤにも同様の質問を送った。

 

結果は無残にも個人には無理とのことだった

具体的にはこのような回答だった


・システムフォントとしての利用については、法人契約のみとなり、契約対象は法人となる。
・個人契約可能なものに「Morisawa App Tools」というプランがある
・ただし、利用範囲がアプリ・ゲームに限定されたものになる。
・費用は1書体550,000円／1アプリになります。
 

いや待て待て、制限付きで55万は高すぎだろ（笑）

あれれ～「アタシ高校生なんですYO☆」って遠回しに「安くしてね？？」って書いたんだけどな～

 

まあいいや、次はモリヤに見積もり依頼を出したので見ていこう

見積もりを作成する際に聞いた質問した内容はモリサワの時と一緒なのでスキップ

 

モリヤの結果は学割を適用して55万円

いや、厳しいって。


ちなみに学割を使わないと75万円になるよ

 

マジでフォント高すぎだろ（笑）
 

もうフォントはNotoSansでいいや。

UIを自由に変更できるOSなら、UIのフォントもユーザーが自由に変更できるようにすると良いよな。

あーでも、ライセンス的にクッソ面倒くさそうだな。

まあ、じっくりと考えていくか


ということで以上miku_JK_Jbでした
環境構築の自動化スクリプトを作成

## プロジェクトでの開発時に必要なコマンドを自動化するスクリプトを作成

こんにちは、
皆さんはプロジェクトで開発に入る際、環境構築を一番最初に行うと思いますが、
2回目以降はいくつかコマンドを叩いてローカル環境を構築して開発作業に入っているんじゃないかと思います。
今回はDockerを立ち上げてコンテナからアプリを起動する際の一連のコマンドを自動化するスクリプトを紹介します。

今回自動化を行う工程は以下になります。

1. プロジェクトディレクトリに移動
2. VScodeを起動
3. Dockerデスクトップを起動
4. フロントエンドを別ターミナル（iTerm2）で起動
5. docker compose up を実行

たったこれだけですが、毎回ぽちぽちとコマンドを叩いたりしていると割と非効率だと感じていましたので、自動化します。

```
#!/bin/zsh

#------------------------------------
# スクリプト開始
#------------------------------------
echo "=== スクリプト開始 ==="

# 1. プロジェクトディレクトリへ移動
echo "[INFO] cd $PROJECT_DIR"
cd "$PROJECT_DIR" || {
  echo "[ERROR] ディレクトリ移動に失敗: $PROJECT_DIR"
  exit 1
}

# VSCode を起動（不要であれば削除してOK）
echo "[INFO] VSCode を起動します..."
code .

# 2. Docker Desktop を起動
echo "[INFO] Docker Desktop を起動します..."
open -a "$DOCKER_APP_PATH"

# Docker デーモンが使えるようになるまで待機
echo "[INFO] Docker が起動するのを待機中..."
while ! docker system info >/dev/null 2>&1; do
  echo "  ...起動待ち..."
  sleep 3
done
echo "[INFO] Docker が起動しました。"

# 3. フロントエンドを別ターミナルウィンドウ (iTerm2) で起動
echo "[INFO] フロントエンドを iTerm2 で起動します..."
osascript -e '
tell application "iTerm"
  create window with default profile
  tell current session of current window
    write text "cd '"$FRONTEND_DIR"' && npm run start"
  end tell
  activate
end tell
'

# 4. docker compose up (ログ表示)
echo "[INFO] docker compose up (ログ表示) を開始します。"
echo "[INFO] 終了するには Ctrl + C を押してください。"
docker compose up  # -d オプションを付けず、ログを表示し続ける

# ここに到達するのは、docker compose を Ctrl + C で停止した後
echo "=== スクリプト終了 ==="
exit 0
```

$PROJECT_DIR
$DOCKER_APP_PATH
$FRONTEND_DIR
は適宜ご自身のプロジェクトのディレクトリやパスを設定してください。

$DOCKER_APP_PATHについて
Docker Desktop を Mac にインストールした場合、多くの環境では /Applications/Docker.app に配置されます。もし場所が異なるかもしれない場合や確実にパスを確認したい場合は、下記の方法を試してください。

 Spotlight (mdfind) を使う
```
mdfind "kMDItemFSName == 'Docker.app'"
```
find コマンドを使う
```
sudo find / -name "Docker.app" -print 2>/dev/null
```

以上です。
初めてこういった自動化スクリプトを作成してみましたが、1回ごとの時間短縮幅はそこまで大きくないです。ただ、毎日これを積み重ねていくと結構な時間を効率化できると思います。
せっかくエンジニアをしている以上、効率化できるところはどんどんやっていこうと思い、記事にしました。
Deepseek R1 AIチャット：次世代推論モデルの革新

## はじめに

https://seekchat.org/
最近、AIチャットボットの世界で注目を集めているDeepseek R1をご紹介します。このモデルは、高度な推論能力と自然な会話機能を組み合わせた革新的なオープンソースAIです。

## Deepseek R1の主な特徴

### 1. 高度な推論エンジン
- 最先端の推論アルゴリズムを活用
- リアルタイムでの複雑な問題解決能力
- 適応型学習パターンの実装

### 2. 自然言語処理の卓越性
- コンテキストを理解した会話が可能
- マルチ言語サポート
- 感情分析と意味理解の統合

### 3. 知識統合システム
- 広範な知識ベースへのアクセス
- ドメイン横断的な専門知識
- 継続的な学習と更新

## 活用シーン

### 研究・分析
研究者やアナリストにとって、Deepseek R1は強力な支援ツールとなります。文献レビュー、データ解釈、研究方法論のガイダンスなど、幅広い支援が可能です。

### コンテンツ作成
ブログ記事や技術文書の作成、SEO最適化、文章構造の推奨など、コンテンツクリエイターの作業効率を大幅に向上させます。

### プログラミング支援
開発者向けに、コードレビュー、バグ検出、アルゴリズム設計のサポートを提供します。

## 技術仕様

- トランスフォーマーベースのアーキテクチャ
- 最適化された推論パイプライン
- 低レイテンシーの応答時間
- スケーラブルな展開オプション

## まとめ

Deepseek R1は、高度な推論能力と使いやすさを兼ね備えた次世代AIチャットボットです。研究、開発、ビジネスなど、様々な分野での活用が期待されています。

## 参考リンク
- 公式サイト: [Deepseek](https://www.deepseek.com/)
- デモ体験: [Try Deepseek R1](https://www.deepseek.com/)

#AI #DeepseekR1 #機械学習 #自然言語処理

注：この記事は2025年1月時点の情報に基づいています。最新の機能や仕様については、公式サイトでご確認ください。

この記事は、技術的な詳細と実用的な応用例のバランスを取りながら、読者が Deepseek R1 の価値を理解できるように構成しています。
.NETでmTLS通信

こんにちは。

テックリードのTerukiです。
今開発している機能で、mTLS通信を行う必要が出てきたので.NETでどうやるのか備忘も兼ねて記事にします。

だいぶニッチな気がしますが調べてもあまり情報が出てこなかったので今後誰かの役に立てば良いなと。

# mTLSとは

知っとるわい！という人はスルーで大丈夫です。

>相互TLS認証（略してmTLS）は、相互認証方式です。 mTLSは、ネットワーク接続の両端にいる当事者がお互いに正しい秘密鍵を持っていることを確認することで、彼らが主張する人物であることを保証します。各自のTLS証明書内の情報に従って、追加の検証が行われます。

https://www.cloudflare.com/ja-jp/learning/access-management/what-is-mutual-tls/

私はサーバだけでなくクライアント側も証明書を使って相互に認証し合ったら安全だねというざっくり理解です。

# .NETでのmTLS

mTLS通信をするにはHttpClientにクライアント証明書を読ませる必要があります。

クライアント証明書を読ませるにはHttpMessageHandlerをいじります。

## HttpClientを直接使用

```cs
var handler = new SocketsHttpHandler();

var cert = X509Certificate2.CreateFromPem("---BEGIN CERTIFICATE-(略)", "---BEGIN PRIVATE KEY-(略)");

handler.SslOptions.ClientCertificates = [ cert ];

if (OperatingSystem.IsWindows()) {
    cert = X509CertificateLoader.LoadPkcs12(cert.Export(X509ContentType.Pfx), null);
}

var httpClient = new HttpClient(handler);
```

.NET 5からpemファイルを直接読み込むことができるようになっているので非常に便利です。

ただし、Windowsの場合pemから読み込んだX509Certificate2を使うと下記のエラーが出るので一旦PFXに変換してあげる必要があります。悲しい。

>Authentication failed because the platform does not support ephemeral keys.

サーバ環境でWindowsを使わないのであればWindowsの分岐部分を#if DEBUG等で囲んでも良さそうです。

## Generic Host
今日の.NET開発ではASP.NET CoreなどのGeneric Hostを使ったものが多いと思うのでそのやり方も。こちらのほうがメインかも。

```cs
services.AddHttpClient<HogeHogeService>()
    .ConfigurePrimaryHttpMessageHandler(() => new SocketsHttpHandler()) // .NET 9ではデフォルトでSocketsHttpClientなのでこの行は不要
    .ConfigurePrimaryHttpMessageHandler((handler, serviceProvider) => {

        if (handler is not SocketsHttpHandler socketsHttpHandler) {
            throw new InvalidOperationException("何かがおかしいです");
        }
        
        var cert = X509Certificate2.CreateFromPem("---BEGIN CERTIFICATE-(略)", "---BEGIN PRIVATE KEY-(略)");
        
        handler.SslOptions.ClientCertificates = [ cert ];
        
        if (OperatingSystem.IsWindows()) {
            cert = X509CertificateLoader.LoadPkcs12(cert.Export(X509ContentType.Pfx), null);
        }
    });
```

.NET 8まではAddHttpClientでDIに追加されたHttpClientのHandlerはHttpClientHandlerという古いものなのでSocketsHttpHandlerに差し替えます。
.NET 9では記載不要です。

もし、HttpClientHandlerが必要な場合は上記のコードを少しいじれば実現可能です。

使う場合は下記の通り。
コンストラクタインジェクションで設定済みのHttpClientを使えます。

```cs
public class HogeHogeService(HttpClient HttpClient) {
    public async Task DoAsync() {
        await HttpClient.SendAsync(/* 略 */).ConfigureAwait(false);
    }
}
```

## macOS 15でエラーになる

>The specified item is no longer valid. It may have been deleted from the keychain.

Macで動かした時にこんな感じのエラーが出た場合は、インストールしているSDKをアップデートすると解消します。

.NET 6の場合は6.0.34、.NET 8の場合は8.0.10以降で解消します。

https://github.com/dotnet/announcements/issues/324

# おわりに
Windowsでしか起きない問題やMacで起きる問題などで思ったより躓きました。

記事を見返すとmTLS通信の記事というよりは単にクライアント証明書の設定方法記事な気がしますがこれで動くので気にしないことにします

誰かの役に立てば幸いです。

では。


# Oh my teethについて
Oh my teethでは未来の歯科体験を創るために日々活動しています。

Techチームではより良いユーザー体験を提供するべく、Webフロントエンドからバックエンド、スマホアプリに機械学習モデルなど、さまざまなプロダクトを開発しています。

一緒に未来の歯科体験を創りませんか？興味がある方は是非こちらを確認してください。

https://oh.careers/

カジュアル面談も可能なので気軽に応募してみてください！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192685/0138b492-e02b-852e-61fa-fc065b53d285.png" width="450" />
プリンシプルオブプログラミング3回目-OCP-

# 2.6 OPC (Open-Closed Principle)
別名、開閉原則ともいわれており、有名な設計原則のSOLIDのOがこれである。

:::note info
変更や拡張に対して開いていて(変更がしやすく)、かつ
変更に対して閉じている(他の部分が影響を受けにくい)
:::

## 
変更時のコストを抑えられる。

## 何を心掛ければいいのか？
そもそもこの開閉原則は、SOLIDのSである単一責任原則を満たしていないと、
破られてしまうことが多い。

そのため、まずは単一責務、データとそのデータを必要とする処理をまとめた
カプセル化を行うことをスタートとしたうえで、必要に応じてインターフェイスなどを
用いて変動から保護するという方法をとることが望ましい。
GRASPのポリモーフィズムや変動からの保護のパターンがまさにそれである。

以下の記事を参照。

https://qiita.com/Kudo_panda/items/dae612b05505d3cb03e3

### 注意事項 -Design By Contract-
ただし、その際にインターフェイスを用いた場合には、
契約による設計を意識したインターフェイス設計を行わないといけない。
何も考えずに、事前事後条件などを設定したインターフェイス設計では、
正しく、ポリモーフィズムは成立しない。

:::note info
事前条件として必要な、引数の型は、正しく指定されているのか？
:::

:::note info
事後条件としての戻り値の型は、どの具体でも適用可能な型として抽象化されているのか？　投げる例外の種類はどうなっているのか？
:::

などを考慮し、どのオーバーライドした実装要素と置き換えても、ポリモーフィズムが成立するように、リスコフの置換原則を満たしているかのチェックを随時しないといけない。

そのためには、インターフェイスの事前事後不変条件をすべて満たしていることをチェックする必要があるし、そのようなインターフェイスをボトムアップ式に設計しないといけない。

## DRY原則をあえて破りOCPを満たしたい場合

## 他のものとの関係性
アプリケーションアーキテクチャの領域だけでなく、他の領域においてもこの設計原則が、適用されるケースがあるので、いくつか紹介したいと思う。

### サービス設計×OCP
まずはアプリケーションアーキテクチャ領域における、もっとマクロなサービスレベルのお話し。
あるサービスBに依存した、他のサービスAが下図のようにあるとする。

![スクリーンショット (167).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2781175/70db49ac-199c-7cb4-fd3c-3d47ecab96da.png)

この時、当たり前な話だが、サービスに入った変更は、なるべくならサービスAにまで影響しないでほしい。
そのために、非同期的な通信設計にするなど様々な方法があるが、
結局は【修正時の変更を対象のコンテキスト境界内に封じ込めることでコストを抑える】
という思考に集約される。

### データアーキテクチャ×OCP
データアーキテクチャにおいても、この開閉原則は重要である。
あるサブジェクトの変更が、他のサブジェクトに影響しないように設計することが求められる。

### 組織設計×OCP
コミュニティ検出入門：クラスタリングからLouvain法まで

## はじめに
ネットワーク分析において、コミュニティ検出は重要なタスクの1つです。本記事では、コミュニティ検出の基礎から実践的な実装まで、Google Colabを使って学んでいきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/42246356-4708-3ada-d9da-d0d96f037b75.png)

## 目次
1. コミュニティ検出とは
2. モジュラリティの概念
3. Louvain法の実装と可視化
4. 実データでの分析例

## 1. コミュニティ検出とは

コミュニティ検出とは、ネットワーク内で密接に結合したノードのグループを見つけ出す手法です。例えば：
- SNSでの友人グループの特定
- 論文の引用ネットワークにおける研究分野の分類
- 製品の推薦システムにおける類似商品のグルーピング

## 2. モジュラリティの概念

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/92be9621-5d7e-cead-1123-425e3ac60db4.png)


モジュラリティ（Q）は、コミュニティ分割の品質を評価する指標です：

```python
import networkx as nx
import numpy as np
import matplotlib.pyplot as plt
from community import community_louvain

# モジュラリティの計算
def calculate_modularity(G, communities):
    Q = 0
    m = G.number_of_edges()
    
    for community in set(communities.values()):
        nodes_in_community = [n for n in G.nodes() if communities[n] == community]
        subgraph = G.subgraph(nodes_in_community)
        
        internal_edges = subgraph.number_of_edges()
        total_degree = sum(dict(G.degree(nodes_in_community)).values())
        
        Q += (internal_edges/m) - (total_degree/(2*m))**2
        
    return Q

# サンプルネットワークの作成
G = nx.karate_club_graph()
```

## 3. Louvain法の実装と可視化

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/f4b1908b-6549-a71b-517a-67b4c50726d5.png)

Louvain法は、モジュラリティの最適化に基づくコミュニティ検出アルゴリズムです：

```python
# 必要なライブラリのインストール
!pip install python-louvain
!pip install networkx matplotlib
import networkx as nx
from community import community_louvain  # ←ここを変更
import matplotlib.pyplot as plt

# Louvain法によるコミュニティ検出
def detect_communities(G):
    communities = community_louvain.best_partition(G)
    return communities

# 可視化関数
def visualize_communities(G, communities):
    plt.figure(figsize=(10, 10))
    pos = nx.spring_layout(G)
    
    # ノードの描画
    nx.draw_networkx_nodes(G, pos,
                          node_color=list(communities.values()),
                          cmap=plt.cm.rainbow,
                          node_size=500)
    
    # エッジの描画
    nx.draw_networkx_edges(G, pos, alpha=0.5)
    
    plt.title("detect_communities")
    plt.axis('off')
    plt.show()

# 実行例
G = nx.karate_club_graph()
communities = detect_communities(G)
visualize_communities(G, communities)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/65f5d373-40dd-2bf6-5b1f-f0aba95defeb.png)

Louvain法による検出結果の解釈

赤グループ：中心的なノードを含む密なコミュニティ（ハブ構造）
紫グループ：中程度の密度を持つ中間的コミュニティ
水色グループ：比較的小規模な周辺コミュニティ
黄緑グループ：独立性の高い小規模コミュニティ

特徴：

コミュニティ間のエッジは疎
各色のグループ内は密な接続
中心（赤）から周辺（他色）への階層的構造

## まとめ

本記事では、以下の内容を学びました：
- コミュニティ検出の基本概念
- モジュラリティによる評価方法
- Louvain法の実装と可視化
pythonコードで”for”を使わない書き方

# ちょこっと業務を簡略化したい
　この記事では、ちょこっと効率化させたいことをプログラミングやツールをつかって解決していきます
ちょこっと削減した時間を、もっと人生楽しくなることに使いましょう！

# 本日のお題ちょっと変わって
## ✨コードを効率化✨

forを使わず、１行で単語に句読点を打つ方法
外国語勉強の単語練習や法律文書や契約書等誤字がないか確認する時に使えます

```python:python
df['日本語'].apply(lambda x: "、".join(str(x).split()) if not pd.isna(x) else "").tolist()
```

-- output

```text:text
こんにちは、世界、おはよう
```


-- input
データフレームになっている
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636287/4929b4b0-1548-22fb-c892-d2f3bd4192e3.png" width=30%>


# 徹底解説🔍


```python:python
df['日本語'].apply(lambda x: "、".join(str(x).split()) if not pd.isna(x) else "").tolist()
```

### **1. `df['日本語']`**
- `df` は Pandas のデータフレーム。  
- `df['日本語']` は「日本語」という列を選択する方法。  
  ※ 列名が日本語であっても問題なく利用できます。

---

### **2. `.apply(lambda x: ...)`**
- `apply()` メソッドは、シリーズ（`df['日本語']`）の各要素に対して任意の関数を適用します。  
- `lambda x: ...` は匿名関数（ラムダ関数）で、シリーズの各要素 `x` に対して次の処理を行います。

---

### **3. `"、".join(str(x).split())`**
#### **処理の内容**
- `str(x)`: 要素 `x` を文字列に変換します。  
- `.split()`: 空白（スペース）で文字列を分割します。  
  - 例） `"こんにちは 世界"` → `["こんにちは", "世界"]`
- `"、".join(...)`: 分割された単語を「、」で結合します。  
  - 例） `["こんにちは", "世界"]` → `"こんにちは、世界"`

---

### **4. `if not pd.isna(x) else ""`**
- `pd.isna(x)`: 要素 `x` が NaN かどうかを判定します。  
- NaN の場合は空文字 `""` を返します。  
- そうでなければ前述の結合処理（`"、".join(...)`）が行われます。

---

### **5. `.tolist()`**
- シリーズの要素をリストに変換します。  
  - 例）`["こんにちは、世界", "おはよう"]`

---

### **6. `all_chinese_text = "、".join(chinese_strings)`**
- `chinese_strings` リストの各要素をさらに「、」で結合します。  
  - 例）`["こんにちは、世界", "おはよう"]` → `"こんにちは、世界、おはよう"`

---

### **7. `print(all_chinese_text)`**
- 最終結果を出力します。  
  - 出力例：  
    ```
    こんにちは、世界、おはよう
    ```



# 最後に
このコードはシンプルな処理ですが、特に大量データの処理において for 文を使った逐次処理よりも効率的です。Pandasのベクトル化された操作を活用することで、GPUリソースを使わない場面でも高速なデータ変換が可能となります。大量の文字列データを扱うシステムや、効率的なデータ前処理が求められるビジネス環境で非常に有用です