OmniAICreator/Qiita-1.07M huggingface dataset:
vsCodeでRepositoryを簡単に切り替える方法

## はじめに
仕事で複数レポジトリを扱っているので、常にvscodeをいくつか開いて開発を行っていました。それがとっても面倒.. 
そこでウィンドウをレポジトリごとに開かなくてもレポジトリの切り替えができるように設定しました。
こんな感じで切り替えできます。
![chnage_repository.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3919187/f8a2ab14-a57f-cab6-e1a0-297ef92d47db.gif)


## 導入と設定
1. まずvscode-workspace-switcherをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3919187/6ff30a60-3649-800f-7aa0-94fbe5cbb067.png)

2. Visual Studio Codeのsetting.jsonに任意のpathを参照用に設定しておく
   ````bash
    "vscodeWorkspaceSwitcher.paths":["/Users/araiWorks/WORK_DIR/"],
   ````

3. 追加したいrepositoryをVSCodeで開いて、File → Save WorkSpace as... で先ほど設定したpathにworkspaceを保存する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3919187/631ce0b9-f297-81e5-662f-2dfb6e3c9541.png)

4. vscodeの左バーに"W"が追加されるので、クリックしたときに追加したレポジトリが表示されていれば設定完了です！他のレポジトリも同じpath (ex. /Users/araiWorks/WORK_DIR/) にworkspaceを追加すれば切り替えできるようになります。

## さらにウィンドウの色をbranchごとに設定
1. Peacockをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3919187/66b7ce08-71cc-5163-b692-8c961842fc3b.png)

2. Shift + Command + P でコマンドパレットを開き、Peacockと打つと色設定ができるメニューが出てくるので、好きな色を設定する 
4. この色設定はレポジトリごとに設定されるので、好きな色を設定していくだけ!

私はいつも Surprise Me with a Rondom Colorを選んでいい感じの色になるまで繰り返します。

## 最後に
ウィンドウひとつでRepository切り替えが簡単にできるので、快適です。
参考になれば幸いです。

## 参考
https://qiita.com/canonrock16/items/9b7b7a5b19ecf15c7188

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

https://marketplace.visualstudio.com/items?itemName=sadesyllas.vscode-workspace-switcher
#4.初めてのGo言語

# はじめに
こんにちは～nayaaaaです。
今回はGoを使ってHello,worldの出力をさせてみたので復習としてブログに書いてみました。
筆者がGo初心者なので内容は初心者向けの内容になります。

# 実行環境
OS：AmazonLinux2
Go：go1.23.2

# Goの環境を設定する

👇こちらで最新版のリンクをコピー

https://go.dev/dl/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3904736/b683a025-1339-c8e1-c77c-0ae98c117185.png)

私の環境がLinuxなのでLinuxの最新バージョンをコピーしてwgetなどでダウンロードします。

```
$ wget https://go.dev/dl/go1.23.2.linux-amd64.tar.gz
$ tar -zxf go1.23.2.linux-amd64.tar.gz
```
ダウンロードして展開をします。ちなみに今回は`go1.23.2`を使用しています。
```
$ sudo mv go /usr/local/go1.23.2
$ sudo ln -s /usr/local/go1.23.2 /usr/local/go
```
ファイルを別名で（バージョンを末尾につけて）移動してシンボリックリンクの設定を行います。

これによって以下のような構成になります。
```
usr/
├── local
    ├── go -> /usr/local/go1.23.2
    ├── go1.23.2/

```
こうすることで別バージョンのGoが混在する環境でもリンクを切り替えるだけで変更することが可能です。
```
$ /usr/local/go/bin/go version
go version go1.23.2 linux/amd64
```
最後にバージョン確認して完了。

- 環境変数への設定

コマンド実行時にフルパスを指定しなくてもいいように設定します。
```
$ vi ~/.bash_profile
#以下を追記
PATH="/usr/local/go/bin:$PATH"
```
以下のコマンドで手動で再起動した状態に更新します。
```
$ . .bash_profile
```
- GOPATHの設定

Goは外部のライブラリを使用する際には環境変数`GOPATH`を読み込んで使用するらしく、
こちらの設定をしない場合は、一部のGoのツールを使用することができないそうなので、
新規でGoライブラリの保管場所を作成して、その場所をGOPATHとして設定していきます。

```
$ mkdir ~/go
```
```
$ vi ~/.bash_profile
#以下を追記
GOPATH="$HOME/go"
export GOPATH
```
```
$ env | grep GOPATH
GOPATH=/home/ユーザ名/go
```
# goファイルの作成
- hello.goの作成
```
$ vi hello.go
```
```
package main                                                      

import (
    "fmt"                                                         
)

func main() {
        fmt.Println("Hello,world")
```

`package`で 読み込むパッケージ名を指定（基本はmainを指定）。Goはこの`package`宣言から始まるルールがあります。
次に`import` で外部のパッケージや使用するライブラリの指定をします。
`func`で変数の定義をおこない、`fmt.Println`でコマンドに必要なライブラリを指定してメッセージを出力します。
※外部のパッケージやライブラリを読み込んでコマンドを実行する際は最初の文字を大文字にする決まりがあるみたいです。
例
　× fmt.println
　○ fmt.Println

```
$ go run hello.go
Hello,world
```
# まとめ
今回は「スターティングGo言語」という技術書を参考にして作成してみました。
あまりプログラミング言語に触れる機会がなかったので、実際触ってみると意外に楽しいなぁって感じました。
サービスのプロセスチェックのスクリプトもGoで作成してみたのでいつかブログに書きたいと思います。
以上、ありがとうございました～

参考

https://www.amazon.co.jp/%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0Go%E8%A8%80%E8%AA%9E-CodeZine-BOOKS-%E6%9D%BE%E5%B0%BE-%E6%84%9B%E8%B3%80/dp/4798142417

👆まだ読んでいる途中なのですが初心者～中上級者向けに執筆されているらしくGo初心者の私でもとても読みやすい内容となっております。
Markdown AIとは何か？

# Markdown AIって？
Markdown AIとは、Markdwon記法を使って、簡単にホームページを作成できるサイト制作プラットフォームです。
また、AIの導入も簡単に行えて、AIモデルの選択やプロンプトを入力してAIをカスタマイズ、ボタンひとつでAIをサイト内に組み込むこともできます。
つまり要約すると**Markdwon記法で簡単にサイト作れて、AI導入もすぐできるぜ！** ってツールです。
なので、よくイメージされるAIが自動でサイトを作ってくれるツールではありません。

**公式ツール：**
![logo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/5bae979d-50d3-23d6-1d8f-ba87b34c3686.png)

# 実際は何ができるの？
サイトが作れるってどのくらいのクオリティで！？が疑問だと思いますが、現在のMarkdown AIはこんな感じです！

【1分でできる性格診断】
https://mdown.ai/content/6e91471b-83fc-449b-8e6c-e83bdfcf43f7

【古き良きブラクラ】
https://mdown.ai/content/a3913e0b-8916-4974-b7cb-c7aae9acc940

【Markdwon AIの詳しい使い方はこちら】
https://qiita.com/mdown_ai_jpn/items/d3e281565c876a0bd64f

Markodwn AIの特徴として、

**・使用料が無料**
**・Markdown記法でサイトが作れる**
**・AI実装が簡単にできる**
**・AIを独自にカスタマイズできる**
**・面倒なサーバー設定が全く要らずにボタンひとつでサイトを公開**

が強みとなっています。

また、プロフェッショナルな人が触れば、HTML/CSSでの装飾やJavaScriptも使えるので、もっとハイクオリティで個性的なサイトを作れる可能性を秘めています！
初心者の方でも、ChatGPTなど生成AIを使用すれば満足できるサイトや簡単なアプリが作れるので是非試してみて下さい！
下記のURLは、実際にChatGPTを使って**30分程度**で作った性格診断ツールの制作手順を書いた記事なので参考にしてみて下さい。

【**Markdown AIで性格診断ツールを作ってみた！**】
https://qiita.com/mdown_ai_jpn/items/077b032faed17063b8b4

# 今後のアップデートについて
今後のアップデート予定は、**拡張Markdown**や**画像生成AI**の導入を目指して、日々開発を行なっています！

拡張Markdownは、**ユーザー自身でMarkdown記方をカスタマイズ/追加できる機能**で、Markdonw記法だけでハイクオリティな装飾できるように開発を進めています。
この機能は将来的にはサイトの装飾だけでなくコードを変数として収めて、Markodwn記法だけでアプリを開発できるような想定をしています。

画像生成AIは、Markdwon AI内だけで画像生成が完結することを目指しています。また、将来的には装飾に使う画像をプロンプト入力するだけで生成して、サイトに反映できることを計画しています。

![UPDATE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/ba450969-216a-1983-f75d-3794e86da4fb.png)


## 総額15万円の懸賞アイテムが当たる！
その未来への一歩として現在、Qittaで2024/10/15 〜 2024/11/25の期間中に、 **「Markdwon AIの記事を作成すると総額15万円の懸賞アイテムが当たる」**  イベントが開催中です。
プロフェッショナルな方はもちろん、プログラミング経験がない方も是非参加して、ご意見をお聞かせください！
Qittaで2024/10/15 〜 2024/11/25の期間でMarkdwon AIのイベント開催中です！
https://qiita.com/official-events/6914e7e898953881ef94

# 今後のMarkdown AIは？
今後も続々とアップデートを予定していて、**誰もが簡単にウェブサイトやアプリを作成し、運営できる未来**を目指して、Markdown AIは引き続き進化を続けていきます!

![prtimes_img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3921729/671d88ea-2d56-4218-ad92-6d22b5dac8a4.png)
[AWS SAA] AWS初心者のElastic Beanstalkまとめ

# AWS Elastic Beanstalkとは
Webアプリの環境を自動で構成してくれるマネージドサービス

## どのようなことをしてくれる？
- 各種リソースの配置
- アプリケーションの導入
- バージョン管理
- 負荷分散

## メリット
1. 迅速なデプロイが可能
迅速なアプリケーションの使用が可能

2. 生産性の向上
インフラ準備、負荷分散、モニタリングなどを代わりにしてくれるので、エンジニアは重要な部分の開発に時間を使うことができ、生産性の向上につながる

3. Auto Scalingによるコスト管理
コスト管理と安定した稼働を実現

## デプロイポリシー
### All at Once
バージョン変更時に、すべてのインスタンスのアプリケーションを同時に新しいバージョンへ変えることができる

### Rolling
指定したインスタンスのアプリケーションを新しいバージョンに変えて、問題がなければ全てのインスタンスのアプリケーションを変更する

## 学習元引用
https://youtu.be/HRgunIPhI-0?si=MsAo0Giwa-rTiPBy

## 最後に
ここまで読んでくださりありがとうございました。
引用元の動画をはとても分かりやすかったため、一度見てみてください。
PowerApps ThisRecordの注意点

# 元データ

Parent_table
|product_id |product_name|
|---|---|
|1  |商品A|
|2  |商品B|

Child_table
|id |product_id |year |sales |delete_flg
|---|---|---|---|---|
|1   |1|2024  |100|0|
|2   |1           |2025  |200|0|
|3   |1           |2026  |300|0|
|4   |2           |2024  |10|0|
|5   |2           |2025  |20|0|
|6   |2           |2026  |30|0|

Target_table
|product_id |product_name|
|---|---|
|2  |商品B|


# ThisRecordの使用
```
Clear(Child_table_col);
ForAll(Target_table,

    ForAll(Filter(Child_table,product_id = ThisRecord.product_id),
        Collect(Child_table_col,ThisRecord);
    );

    UpdateIf(
        Child_table
        product_id = ThisRecord.product_id
        ,
        {

            delete_flg: 1
        }
    );
    
    Patch(
         Child_table,
         LookUp(Child_table,product_id= ThisRecord.product_id),
         {
            delete_flg: 1
        }
    );
);
```
# 問題点

1.上記のように実装すると、Child_table_colはChild_tableのデータがすべて格納されます。
原因は、Filter(Child_table,product_id = ThisRecord.product_id)のThisRecord.product_idがChild_table自分のproduct_idと認識されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368087/3f1800f4-7f00-3ee5-3a2a-6f3cfeaf18bf.png)

2.Child_tableのdelete_flgがすべて1に更新されます。
原因は、ThisRecord.product_idはUpdateIfのChild_tableが認識されています

3.Child_tableのdelete_flgがすべて1に更新されます。
原因は、ThisRecord.product_idはUpdateIfのChild_tableが認識されています

# 改善方法
```
Clear(Child_table_col);
ForAll(Target_table,

    ForAll(Filter(Child_table As B,B.product_id = Target_table[@product_id]),
        Collect(Child_table_col,ThisRecord);
    );

    UpdateIf(
        Child_table As C
        C.product_id = Target_table[@product_id]
        ,
        {

            delete_flg: 1
        }
    );
    
    Patch(
         Child_table As D,
          LookUp(Child_table,D.product_id= Target_table[@product_id]),
         {
            delete_flg: 1
        }
    );
);
```



# 参考サイト
https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-patch

https://zezeze.hateblo.jp/entry/2021/01/27/203719
ilasmでstack machine その34

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
ilasmで数9を4個つかって1から15までの数を表す式を実装せよ。

# サンプルコード

```

.assembly extern mscorlib {}
.assembly d94 {}
.method static void main() {
.entrypoint
d1:
	ldc.i4	9
	ldc.i4	9
	sub
	ldc.i4	9
	ldc.i4	9
	div
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d2:
	ldc.i4	9
	ldc.i4	9
	div
	ldc.i4	9
	ldc.i4	9
	div
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d3:
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	add
	ldc.i4	9
	div
	call	void [mscorlib] System.Console::WriteLine(int32)
d4:
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	div
	ldc.i4	9
	pop 
	dup
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d5:
	ldc.i4	9
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	div
	dup
	add
	sub
	call	void [mscorlib] System.Console::WriteLine(int32)
d6:
	ldc.i4	9
	dup
	ldc.i4	9
	add
	ldc.i4	9
	add
	ldc.i4	9
	div
	sub
	call	void [mscorlib] System.Console::WriteLine(int32)
d7:
	ldc.i4	9
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	div
	sub
	call	void [mscorlib] System.Console::WriteLine(int32)
d8:
	ldc.i4	9
	ldc.i4	9
	ldc.i4	9
	div
	sub
	ldc.i4	9
	pop
	call	void [mscorlib] System.Console::WriteLine(int32)
d9:
	ldc.i4	9
	ldc.i4	9
	sub
	ldc.i4	9
	mul
	ldc.i4	9
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d10:
	ldc.i4	9
	ldc.i4	9
	div
	ldc.i4	9
	add
	ldc.i4	9
	pop
	call	void [mscorlib] System.Console::WriteLine(int32)
d11:
	ldc.i4	9
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	div
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d12:
	ldc.i4	9
	dup
	ldc.i4	9
	ldc.i4	9
	add
	add
	ldc.i4	9
	div
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d13:
	ldc.i4	9
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	div
	dup
	add
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d14:
	ldc.i4	9
	dup
	ldc.i4	9
	ldc.i4	9
	add
	ldc.i4	9
	div
	dup
	add
	sub
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
d15:
	ldc.i4	9
	dup
	dup
	ldc.i4	9
	add
	ldc.i4	9
	add
	ldc.i4	9
	div
	sub
	add
	call	void [mscorlib] System.Console::WriteLine(int32)
	ret
}


```

# 実行結果

```
>d94
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

```

以上
【ChatGPT＋DALL-E3】ふたつの画像と人物のPromptから新たな画像を生成します。


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

　今回は、ふたつの画像と人物のPromptから新たな画像を生成します。

:::note info
本記事は、ChatGPT（有料版）
＋DALL-E3で行なっております。
画像はあります。　あしからず。
:::
　まずは、ニュース。

　iOS 18.2ベータ版で
　　Apple Intelligenceに
　　　「ChatGPT Plusに
　　　　アップグレード」
　　　　　オプションが追加。
　[Gigazineサイトニュース](https://gigazine.net/news/20241105-ios-apple-intelligence-chatgpt-plus/?utm_source=x&utm_medium=sns&utm_campaign=x_post&utm_content=20241105-ios-apple-intelligence-chatgpt-plus)
***
　次に、
　　音楽生成AIのSunoですが、
　　　10月末にiOSアプリが
　　　　登場しました。

　　ようやく今日、
　　　Android版が登場。

　　現在は、
　　　ウェイトリスト登録中です。

　　[Suno公式ポスト](https://x.com/sunomusic/status/1853931935875072441?t=FoYn1b7-OTlCASLOhZMSVw&s=19)
***
　次は、
　　ChatGPT の表示について、です。

　最近、
　　こういう青い縦線が出てきます。
![Screenshot_20241105-224458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/9000b870-b21f-64fd-adb7-3d2ee2a54caa.png)

　何かと思って、コピペしたら、
　　先頭に、“>”が付いていました。

　これは
　　Markdown形式での引用符です。

　これまで
　　ふつうに出力するか
　　　コードブロックに出力するか
　　　　でした。

　ChatGPTによると、
　　内容に応じて
　　　形式を選んでいる、とか。

　おそらく、
　　OpenAI開発者側で
　　　変更されたのでしょう。

　でも、
　　統一されたわけでもありません。
　　　ほかの方法でも出てきますから。
　　　　そこは注意が必要ですね。
***
　さて、本題です。

　今回は、
　　背景や服装などの情報として
　　　画像をアップロード。
　　　　それをPromptで指定した人物に
　　　　　着せて立たせます。

　とはいえ、
　　ChatGPTでの
　　　画像解析になりますので、
　　　　その精度には限りがあります。

　　その点は、
　　　留意しておいてください。

　　けっして、
　　　同じにはなりません。

　　あくまでも
　　　同じ雰囲気になる程度の
　　　　ものですので。
***
　まずは、
　　画像をごらんください。

　アップロードする画像は
　　二枚ともフリー素材です。
![_street_in_summer_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/71d955f4-e422-14c8-ab73-bc2eae6dad14.jpeg)
![young-girl-grey-sweater-posing-outdoors.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/7d7f3768-e73c-eb4a-a8ef-4c4d023bb5c2.jpeg)

　ここから
　　背景と服装の画像を
　　　解析して、情報を得ます。

　そうして
　　Promptに書かれた人物に
　　　服装を着せて、
　　　　背景の前に立たせます。

　出来上がったのが、こちら。
![1730859104164.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/b7fb2583-e4d0-0e2f-b93e-f016d98684c3.jpeg)

　そうしてできたPromptを
　　ChatGPTとのやり取りで
　　　変えていけば、
　　　　これまでと同じように
　　　　　イメージに近付きます。
***
　では、手順です。

　❶GPT-4o（GPT-4o miniでも）で
　　　あることを確認。
　❷背景と服装の画像をアップロード。
　❸以下のPromptを入力。
　　　＊＊＊は人物情報。
　　　スタイルやアスペクト比は
　　　　ご自由に変更してください。
```Text:背景・服装画像と人物Promptから描画するPrompt
背景画像と服装画像です。[＊＊＊]にこの服装を着せて、背景の前に立たせてください。フォトリアル。アスペクト比は1:1で描画。
```
　❹送信。

　Promptが出来上がれば、
　　あとはいつもどおりに
　　　やり取りして、
　　　　完成させていきます。

　ただし、
　　生成を重ねていくと
　　　服装などが変わっていきます。
　　　　これは仕方ない部分ですね😅

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

　今回は、ここまで。
paizaラーニング問題集「部外者をはじけ」を解いてみた

https://paiza.jp/works/mondai/b_rank_skillcheck_archive/finding_putliers_99

▼考え方

この問題を解くために私が考えた内容1.～3.を以下に示します。

1. 検出したN人のうち任意の2人を選び、2人の座標から直線の方程式を求めます。その直線と、2人以外の人の座標との距離を求めます。距離が2m以上であれば部外者(変数bugai)として情報を保持します。最終的に部外者が最も少ない情報を出力します。

2. 題意より、部外者が1人も存在しなかった場合は文字列noneを出力して処理を終了します。

3. 処理上は検出したN人の番号は0～N-1としているため、(題意に合わせN人の番号を1～Nとするために)出力するときに+1します。

▼コード
```py
########## 処理0(準備) モジュールインポート,インプット,リストや変数定義 ###########

# copy: リストbugaiをリストmin_bugaiへコピーするためのモジュール
import copy

N = int(input())

# xy: 検出したN人の座標を格納するリスト
xy = [list(map(float,input().split(" "))) for i in range(N)]

# bugai: 直線と距離が2m以上離れた人の番号を格納するリスト
bugai = []*(N-2)

# min_bugai: bugaiの要素数が最も少ないものを格納するリスト
min_bugai = [0]*(N)

########## 処理1 任意の2人の座標を結ぶ直線および、その直線と,2人以外の人の座標との距離を求める ###########

# 考え方1.
for i in range(N):

    for j in range(i+1,N):
        
        a = xy[j][1] - xy[i][1]
        b = xy[j][0] - xy[i][0]
        c = b*xy[i][1] - a*xy[i][0]
        
        for k in range(N):
            
            if k != i and k != j:
            
                d = abs(a*xy[k][0]-b*xy[k][1]+c) / (a**2+b**2)**0.5
                
                if d >= 2:
                    bugai.append(k)

        # 考え方2.
        if len(bugai) == 0:
            print("none")
            exit()
            
        elif len(bugai) < len(min_bugai):
            min_bugai = copy.deepcopy(bugai)
            
        bugai = []*(N-2)

# 考え方3.
[print(i+1) for i in min_bugai]
```
エンジニアのタスク管理方法（Trello)

## はじめに
エンジニアには仕事が多い。
期限も守らなければならない。それに加えて、個人のスキルアップを定期的に行わなければ、スマホのアプリの更新と同様、世の中に置いて行かれてしまう。
とかくエンジニアにはやることが多いので、タスク管理は必須である。

## GTD理論とは（Getting Things Done）

GTD（Getting Things Done）とは「ナレッジワーカー（知識労働者ないし頭脳労働者）の仕事術」と呼ばれ、「次に何をやるか」という予定やスケジュールの管理、作業する上でのモチベーションを損なわないための体制作りなどが含まれる。

- 収集：頭の中にある「やらなければならないこと」「気になっていること（問題）」を紙などに書き出す
- 処理：書き出した内容を、手順に添って、分類しリスト化する
- 整理：リストを自身がスケジュール管理に使っているツール（PDAやシステム手帳など）に入れ込む
- 見直し：自分の状況や状態でそれらが可能かどうか見直し、検討する
- 実行：リストアップした「出来ること」を順次片付ける


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208635/c311a035-d552-def6-e9ea-bc7da5bf1a8f.png)

このように、Trelloでタスク管理を行うと、今何をすべきなのか明確になる。
FastAPIプロジェクトのユニットテスト

前回の記事にあるディレクトリ構成でプロジェクトを作っている前提
https://qiita.com/yuki-alost/items/1275885310a808440463


## インポートパス設定

プロジェクトルートに `pyproject.toml` を設置して以下の内容を記載
   ```toml
   [tool.pytest.ini_options]
   pythonpath = "src"
   testpaths = ["tests",]
   ```

これにより `src` 以下の相対パスで `import` 文が書けるようになる

## pytest導入

以下を実行

  - `pipenv install -d pytest`
  - `pipenv install -d pytest-mock`
  - `pipenv install -d httpx`

    標準の `unittest` モジュールよりも高機能なのでこちらの使用を推奨
    ついでにHTTPリクエストの実行に必要なモジュールもインストール

## ディレクトリ構成

API以外のテストも実装することを想定し、ディレクトリを分けておく

   ```plaintext
     + [project-root]
        +-- src
             +-- 略
        +-- tests
             +-- api
                  +-- conftest.py  # api下のテストケースにのみ適用したいfixture
                  +-- foo_test.py
                  +-- bar_test.py
             +-- controller
                  +-- .gitkeep
             +-- models
                  +-- .gitkeep
             +-- conftest.py  # 全テストケースに適用したいfixture (空でも良い)
        +-- Pipfile
        +-- pyproject.toml
   ```

## fixture構築

`fixture` を `conftest.py` に実装していく
  - `fixture` はテストの前処理/後処理に関する記法
  - `xUnit` 系の `setUp/tearDown` の仕組みに相当する


以下、APIのテスト用サーバの起動を `tests/api/conftest.py` に実装する

別プロセスで `uvicorn` を起動する実装とした

```python
import multiprocessing
import os
import pytest
import uvicorn

from fastapi import FastAPI

from api.foo import foo_router
from api.bar import bar_router


def open_test_server(port: str):
    app = FastAPI()
    app.include_router(foo_router)
    app.include_router(bar_router)
    uvicorn.run(app, host='0.0.0.0', port=port)

@pytest.fixture(scope='module', autouse=True)
def setup_module():
    port = os.getenv('TEST_PORT', '8000')
    server_process = multiprocessing.Process(target=open_test_server, args=(port, ))
    server_process.start()
    yield
    server_process.terminate()
    server_process.join()
```

`scope` を `module` としたが、テストケース間での汚染を排除するなら `function` が妥当
テストケースごとに都度プロセスが起動/終了する負荷を嫌うなら `module` で良い


## テストケース実装

```python
import httpx
import os


TEST_HOST: str = 'localhost'
TEST_PORT: str = os.getenv('TEST_PORT', '8000')
TEST_SERVER: str = f'http://{TEST_HOST}:{TEST_PORT}'


def test_foo():
    api_path = '/foo'
    response = httpx.get(f'{TEST_SERVER}{api_path}')
    assert response.status_code == 200

def test_foo_create():
    api_path = '/foo/create'
    response = httpx.get(f'{TEST_SERVER}{api_path}')
    assert response.status_code == 200

def test_foo_update():
    api_path = '/foo/update'
    response = httpx.get(f'{TEST_SERVER}{api_path}')
    assert response.status_code == 200

```

## テスト実行

  - `pipenv run pytest`
ブラウザ版Blueskyから数字を非表示にする【Stylus】


:::note warn
スマホアプリ版の表示をコントロールするお話ではありません。
PCでもスマホでも「ブラウザ」で見る場合のお話です。
:::

数字を非表示にする機能がないので、CSSで編集してみましょう。

## 必要: StylusなどのカスタムCSS拡張機能

必要なものは以下です。
- **拡張機能が導入できるブラウザ**
    - PCなら通常のChromeなどでOK
    - スマホ版Chromeは拡張機能が使えないため、Firefoxなどが必要
- **Stylus**など「カスタムCSS」で検索して出てくる拡張機能。

過去の記事で「導入～簡単な手順」を書いています。参考にして下さい。

https://qiita.com/BoEo_stms/items/7ecafb4fd4f5aae06076


# 表示を変更したあとのBluesky

**プロフィール**
![プロフィール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660037/e0863dc7-195f-9a9f-0786-13e77346f94e.png)

**ポスト**
![ポスト](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660037/45bf635d-466a-add8-0c5e-1b87f4182ee0.png)

- プロフィールの「フォロワー/フォロー数」
- 各種ポストの「リポスト数/いいね数」

これらが非表示になります。



## Stylusなどにコピペするコード

**指定先:** ドメイン上のURL▼　`bsky.app`

```css
/* TL上の「リポスト数」 */
div[data-testid="repostCount"],
/* TL上の「いいね数」 */
div[data-testid="likeCount"],

/* ポスト単体ページの「リポスト数」 */
div[data-testid="repostCount-expanded"] > span:first-child,
/* ポスト単体ページの「いいね数」 */
div[data-testid="likeCount-expanded"] > span:first-child,

/* プロフィールの「フォロワー数」 */
a[href$="followers"] > span:first-child,
/* プロフィールの「フォロー数」 */
a[href$="follows"] > span:first-child,

{display: none;}
```

ここは表示でも構わない、という個所は個別に消してください。

:::note warn
**CSSの基本ルール**
- 各指定の区切りに 「`,`」が必要です。読点ですね。
    ※最後の行には不要です。
- `/* */`で囲まれた部分はただのコメント文です。消しても大丈夫。
:::

Blueskyのトップページにて、拡張機能をクリックし「新規作成」すれば、
自然とBlueskyのURL全体に適用できるはずです。

（※適用先が自分のプロフィールページのURLになってしまっていないか、要チェック）

　

スマホで拡張機能を編集するのはやや大変ですが、コピペを上手く使ってやり遂げて下さい。
健闘を祈ります！
2024-11-06 共有記事ログ

# 概要
現職の開発部のメンバーに共有した記事のログ

# 技術系
## [初心者エンジニア必見！Dockerコマンドチートシート&トラブルシューティング&ベストプラクティス](https://qiita.com/K3n_to_n17/items/f61650cf4b9cbba298fd)
頻出Dockerコマンドについての記事です
基本的なことから、トラブルシューティングについてまで細かく書いてあるので困ったら参考にできそうな内容が多くあったので共有します！


# マネジメント系
## [チームに無能がいなくなる『メンバー全員で公式ドキュメントを読みあわせる』に感銘をうけた話。](https://qiita.com/haihaikazuma/items/fa9f04af7e3f2f688c21)
公式ドキュメントを全員で読むことによるメリットをあげた記事です
たしかに新しい技術を取り入れる際には知識の偏りをなくすためにこう言った機会を設けた方が良いのかもと思いました


# その他
## [技術書の電子書籍を PDF/EPUB で配信しているサイトまとめ](https://qiita.com/tommy_aka_jps/items/9b3a8fb1939033003119)
電子書籍をPDFでダウンロードできるサイト紹介記事です
経費購入系書籍はこういうもので購入でにれば電子書籍でも問題にならないのかなと思ったりしました
規約的に会社購入が認められているかはわかりませんが…


# 共有するほどではないけど興味があったもので読んだもの
* [転職ドラフトの提示年収伸び率推定 - 提示年収はインフレに勝てているのか](https://made.livesense.co.jp/entry/2024/10/25/080000)
    * インフレによって給与据え置きでも実質減の現実が辛い
* [踏み台EC2を無くすためにAmazon Aurora MySQLのRDS Data APIとCloudShellを使ってみた](https://qiita.com/generokenken/items/4eb5cfd61d4585b2dcea)
    * RDS Data API をうまく使えば良い感じにログを取れそうかも
* [VScodeからNeovimに乗り換えた感想](https://tech.itandi.co.jp/entry/2024/10/25/190000)
    * GUI開発でないならもっとVimが活きる
* [エンジニアリング組織論への招待のすすめ](https://qiita.com/yoshiichn/items/88c9b71d757d769b637b)
    * 読んでみたい
* [Terraformを利用していなかった過去の自分へ送る](https://zenn.dev/primenumber/articles/3ec264003c47e2)
    * CFnとどっちが良いのだろうか
* [ターミナルがダサいとモテない。mermaid を表示するぞ編（NeoVim + AstroNvim v4）](https://blog.grasys.io/post/yusukeh/terminal-mermaid/)
    * これはあまり魅力を感じない
* [オープンソースのライセンスを理解する](https://qiita.com/The_Past_of_Dice/items/ef438420542667bed92e)
    * ライセンスはあまり気にしてこなかったけど、一度ちゃんと見直しても良さそう
* [Pythonのisと==の違い](https://qiita.com/zhao-xy/items/0b3fb1388ad36920ea3c)
    * どの言語にも似ているが異なる機能はあるもの。似た機能を見つけたときはその差分をちゃんと調べる必要がある
* [ウェブ・セキュリティ基礎試験(徳丸試験)受験のすゝめ](https://qiita.com/tagami_tanaka_tashimo/items/e2739aa31b086f8b142f)
    * 気になるし受けてみようかな
* [転職が「成功するかどうか」は、たったひとつの自己分析で決まる。](https://qiita.com/haihaikazuma/items/40055b32f616300376a5)
    * 幸福度のバランス、たしかに大事。自分も改めて考え直そうかなと思っと
* [高校中退ニートがセキュリティコンサルになるまで](https://qiita.com/yamada_sec/items/28c091ee7eed3f9240e1)
    * コンサル系は資格あった方が強いし儲かりそう
* [みせてやるよ本気！月10冊読むエンジニアの最強読書術](https://qiita.com/Sicut_study/items/4fd125c31fa33db622dd)
    * タイパ意識するなら速読を身につけるのも一つかも
* [開発経験なし12時間労働だった私が8ヶ月でExcel職人から自社フルスタックエンジニアに転職した話](https://qiita.com/AK_React/items/42805e50afbd9862b6a2)
    * 前半部分は読む必要なし。後半の転職準備の部分には価値あり
* [シニアなエンジニアの振る舞いとリーダーシップについて](https://qiita.com/yokoto/items/31c28b333bf97904eac9)
    * エンジニアのスペシャリストよりもマネージメントができるエンジニアの方が評価されるらしい
* [AIによるコードレビュー "PR-Agent" を導入した効果と課題について](https://inside.dmm.com/articles/introduce-pr-agent-to-monorepo/)
    * AI Code Review の使い方の参考になりそう
* [OpenAIを使った自動コードレビューの導入](https://qiita.com/aosan/items/1b1e091dbf22ce30b2e7)
    * AI Code Review のプロンプトの参考になりそう 
* [ソフトウェア職人たれ！クラフトマンシップの世界](https://zenn.dev/fukurou_labo/articles/4698941ba39198)
    * 誇りや拘りを持てってことかな？イマイチ理解できなかった…
* [GitHub Immutable Actionsのご紹介](https://techblog.ap-com.co.jp/entry/2024/10/30/154345)
    * もう少し情報が出回ったらちゃんと調べてみる
* [JavaScriptで作る！ミニ言語のインタプリタ（７）〜静的型検査を実装する（１）〜](https://zenn.dev/nextbeat/articles/35f8ba71fc0e06)
    * パーサーを実装すれば、本格的な言語として成り立ちそうで面白い
ilasmでstack machine その33

# 概要
ilasmでstack machineやってみた。
練習問題やってみた。

# 練習問題
ilasmで湯婆婆を書け。

# サンプルコード

```
.assembly extern mscorlib {}
.assembly yuba {}
.method public static void main() cil managed {
.maxstack 16
.entrypoint
.locals init (class [mscorlib]System.Random r, string str)
	ldstr "契約書\r\n"
	call void [mscorlib]System.Console::WriteLine(string)
	ldstr "甲は油屋当主として、乙を油屋に雇用することを契約し、\r\n"
	call void [mscorlib]System.Console::WriteLine(string)
	ldstr "労働に伴う対価の支払いを右の通り、約定する。\r\n"
	call void [mscorlib]System.Console::WriteLine(string)
	ldstr "なお、一日の労働の対価は金百円とする。\r\n"
	call void [mscorlib]System.Console::WriteLine(string)
	ldstr "甲　油屋当主　湯婆婆\r\n"
	call void [mscorlib]System.Console::WriteLine(string)
	ldstr "乙\r\n"
	call void [mscorlib]System.Console::WriteLine(string)
	ldstr "契約書だよ。そこに名前を書きな。"
	call void [mscorlib]System.Console::WriteLine(string)
	call string [mscorlib]System.Console::ReadLine()
	dup
	dup
	stloc str
	ldstr "フン。"
	call void [mscorlib]System.Console::Write(string)
	call void [mscorlib]System.Console::Write(string)
	ldstr "というのかい。贅沢な名だねぇ。"
	call void [mscorlib]System.Console::WriteLine(string)
	newobj instance void [mscorlib]System.Random::.ctor()
	ldc.i4 2
	callvirt instance int32 [mscorlib]System.Random::Next(int32)
	ldloc str
	callvirt instance int32 [mscorlib]System.String::get_Length()
	rem
	ldc.i4 1
	callvirt instance string [mscorlib]System.String::Substring(int32, int32)
	dup
	dup
	ldstr "今からお前の名前は"
	call void [mscorlib]System.Console::Write(string)
	call void [mscorlib]System.Console::Write(string)
	ldstr "だ。いいかい、"
	call void [mscorlib]System.Console::Write(string)
	call void [mscorlib]System.Console::Write(string)
	ldstr "だよ。分かったら返事をするんだ、"
	call void [mscorlib]System.Console::Write(string)
	call void [mscorlib]System.Console::Write(string)
	ldstr "!!"
	call void [mscorlib]System.Console::WriteLine(string)
	ret
}




```

# 実行結果

```
>yuba
契約書

甲は油屋当主として、乙を油屋に雇用することを契約し、

労働に伴う対価の支払いを右の通り、約定する。

なお、一日の労働の対価は金百円とする。

甲　油屋当主　湯婆婆

乙

契約書だよ。そこに名前を書きな。
腹美恵子
フン。腹美恵子というのかい。贅沢な名だねぇ。
今からお前の名前は美だ。いいかい、美だよ。分かったら返事をするんだ、美!!

```

以上
TalkingAvatarで動画制作が劇的に変わった体験談

最近、動画制作の現場で話題になっているAIツール「TalkingAvatar」を使ってみました。従来の動画制作の常識を覆すような体験だったので、その感想を共有したいと思います。

## 従来の動画制作の課題

以前から、教育コンテンツやマーケティング動画の制作には多くの時間と労力が必要でした。特に：
- ナレーション収録の手配と調整
- 口パクの同期作業
- 修正依頼への対応
これらの作業が大きな課題でした。

## 驚きの使用体験

TalkingAvatar
https://www.talkingavatar.ai 
を実際に使ってみて、以下の点に特に感動しました：

### 1. 驚くほど簡単な操作性
- テキストを入力するだけで、自然な音声と口の動きが自動生成
- 修正も文字の編集だけで完了
- 直感的なインターフェースで専門知識不要

### 2. プロ級の音声品質
- 90言語以上に対応した自然な音声
- わずか1文での音声クローニング機能
- 感情やトーンの細かい調整が可能

### 3. 精密なリップシンク
- 人間のような自然な口の動き
- 複数話者での会話シーンにも対応
- 表情の自然な変化

## 実際の活用シーン

eラーニング教材の制作では、以下のような手順で利用しています：

1. 講義内容をテキストで入力
2. 最適なアバターと音声を選択
3. 自動生成された動画を確認
4. 必要に応じて微調整

たったこれだけのステップで、プロフェッショナルな印象の動画が完成します。

## 改善への期待

さらなる進化を期待したい点としては：
- アバターの種類の拡充
- より細かい感情表現の調整機能
- 動作やジェスチャーのカスタマイズ機能

## まとめ

TalkingAvatarは、動画制作のワークフローを根本から変えるポテンシャルを持っています。特に教育コンテンツやマーケティング動画の制作者にとって、作業効率を大幅に向上させることができる心強いツールです。無料プランでも十分に機能を試すことができるので、興味のある方はぜひ試してみることをお勧めします。
【C言語】構造体

## 構造体
**用途 : データを個体毎にまとめて扱う**
### 構造体の宣言
- Cの場合
```C
struct 構造体名
{
    型　変数名1;
    型　変数名2;
        .
        .
        .
};
struct 構造体名　変数名;
```

- C++の場合
```C
struct 構造体名
{
    型　変数名1;
    型　変数名2;
        .
        .
        .
};
構造体名　変数名;
```

- C#の場合
```C#
struct 構造体名
{
    public 型　変数名1;
    public 型　変数名2;
        .
        .
        .
}
構造体名　変数名;
```

#### 命名規則
構造体名は**アッパーキャメルケース**が推奨される。
※アッパーキャメルケース
　単語の先頭を大文字にしてつなげる表記方法（**キャメルケース**）の分類のひとつ。
　**最初の文字を大文字**にしたキャメルケースのこと。

### 構造体の定義
- 1つずつ値を定義する場合
```C
変数名.変数名1 = 値;
```
※構造体の中(メンバ)を指定する場合、
　繋ぐために`.(ドット)`を用いる

- まとめて定義する場合
```C
変数名 = { 値1, 値2,... };
```
Google がサポートする Java ランタイムと作成済み SpringBoot の jar を使用して Cloud Run にアプリケーションをデプロイする方法

gradle bootjar で作成済みの jar を使って、コンテナイメージの作成からサービスのデプロイまでを gcloud run deploy で行う方法についてまとめます。

Dockerfile を使って Docker Hub からイメージを呼び込むと Google のサポート外のランタイム環境になってしまうのは [Google のサポートを受けられるように Python アプリをデプロイする方法](https://qiita.com/mushufushu/items/8ee9215e7e01ba74f9a8)で書いたことと同様です。

# 前提条件
SpringBoot の jar ファイル作成済みであること
※この記事では gradle bootjar コマンドを使用して jar を出力しています。

# 1 デプロイ用のワークディレクトリを作成
```
mkdir deploy
cd deploy
```
# 2 jar ファイルを配置
cp などで deploy 配下に持ってくる。

# 3 ビルダーと Java のランタイムの固定
同階層に project.toml を作成し、以下を記述。Java17 環境を例としています。

```
[build]
builder = "gcr.io/buildpacks/builder:google-22"

[[build.env]]
name = "GOOGLE_RUNTIME_VERSION"
value = "17"
```

Google の[ビルダー](https://cloud.google.com/docs/buildpacks/builders?hl=ja)は指定しないと常に latest が使用されます。latest の指し示すビルダーが古い Java のバージョンをサポートしなくなるとデプロイできなくなる可能性があるため、ここでは固定しています。

# 4 ソースからのデプロイを実行

ここまでで deploy 配下が以下のようになっている
```
/xxx.jar (SpringBoot の jar ファイル)
/project.toml
```

**ソースからデプロイを実行する**
・application.yaml に SpringBoot の起動環境プロファイルを持っている場合、--set-env-vars で SPRING_PROFILES_ACTIVE の環境変数を与えることでプロファイルの切り替えが行えます。
・JavaVM の引数を追加する場合、同様に --set-env-vars で JAVA_TOOL_OPTIONS に設定します。[リファレンス](https://cloud.google.com/run/docs/tips/java?hl=ja#optimization-compiler)
```
gcloud run deploy [サービス名] \\
--source . 
--set-env-vars SPRING_PROFILES_ACTIVE="production",JAVA_TOOL_OPTIONS="-XX:MaxRAM=256m -XX:+PrintNMTStatistics"
```
他のオプションについては[リファレンス](https://cloud.google.com/sdk/gcloud/reference/run/deploy) を参考に

Artifact Registory に置かれるイメージと Run のサービスをタグで紐づけすると管理しやすくなります。
[タグの付け方](https://qiita.com/mushufushu/items/8ee9215e7e01ba74f9a8#5-artifact-registry-%E3%81%AB%E4%B8%8A%E3%81%8C%E3%81%A3%E3%81%9F%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%97%E3%81%9F%E3%82%82%E3%81%AE%E3%81%A8%E5%90%8C%E3%81%98%E3%82%BF%E3%82%B0%E3%82%92%E4%BB%98%E4%B8%8E%E3%81%97%E3%81%A6%E3%81%8A%E3%81%8F)

# 参考
ランタイムサポート期限
https://cloud.google.com/run/docs/runtime-support?hl=ja
flutterでapk fileを用いた実機テストを行う

flutter で android の実機テストを行いたいと思ったときのメモです。

# やりたいこと
flutter をbuildしたapk fileを各個人のandroidにいれてアプリを使えるようにする.
adbも考えましたが手軽なapkにしました。

## 環境
flutter 3.24.0
fvm 3.1.4
実機デバイス OPPO Reno5 A
Android version 12

## apk fileのbuild
プロジェクト直下(USBでdebugする際に`fvm flutter run`をする場所)
```
$fvm flutter build apk
```
これで自動的にリリースbuildされます。

c.f. 
デバッグモードのAPKを生成
```
fvm flutter build apk --debug
```

プロファイルモードのAPKを生成
```
flutter build apk --profile
```

特定のABI(Application Binary Interface)向けのAPKを生成
```
flutter build apk --target-platform android-arm,android-arm64,android-x64
```
(参考にしたサイト : https://qiita.com/syun2000/items/759690851d6dbd93ff21)

これによりapk fileが生成されます。
生成したapkファイルの場所
`build/app/outputs/flutter-apk/app-release.apk`
このapkファイルをPCからダウンロードします。

## androidへのapkファイルの転送
メールでもslackでも送れました。

## androidでのapkファイルを使ったインストール

使ったもの : ファイルマネージャー(実機にあるもともとのアプリ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/ba20a76a-f825-995c-594c-84eac0c68a2f.png)

このアプリを用いて、buildしたファイルをタップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/4ee2efa8-e94e-ab9f-6e4b-dcf10f7f9be6.png)

このような警告が出てくるので、設定をタップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/c526b796-617a-ed3e-e7f9-07df6f1da0c5.png)

このソースからのアプリを許可するに許可して、インストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/4e6cf25a-3117-6383-f4d6-a5fbcf9ab1d8.png)

終わったあと、アプリのスキャンを求められるのでスキャンをします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/bd34b490-139d-08f6-f532-9f90f144e3f9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/fd666f28-b7c6-d32b-5bce-9c6d0a322f65.png)

スキャンが通ったら、インストールします。
![screenshot_2024-11-06-10-01-13-90_3d73e98b1ad3bd2575f7a56513d89a0c_720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/5ba8fb84-c900-1703-4630-82fac12e1cdd.jpeg)

終わったら、開くを押すとアプリが作動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/c0f3622d-7a86-ecbb-4a42-eabeccd7d9bf.png)

このようにアプリのアイコンが表示されれば成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479415/153068a6-24bc-0f28-455b-aa13d5999347.png)


### 終わりに
Google play serviceのテストの難化によりアプリのリリースが厳しくなったため友人に試してもらうときにこのような方法があるなと思いました。

一例となれば幸いです。
CakePHP 5でコマンドを作成する方法：HelloCommandの実装

CakePHP 5でコマンドを作成するには、`Command`クラスを継承したカスタムコマンドを作成し、`bin/cake`コマンドで実行できるようにします。以下に、CakePHP 5でカスタムコマンドを作成する手順を示します。

### 手順

1. **コマンドの作成**  
   コマンドファイルは、`src/Command`ディレクトリに作成します。

   例として、「HelloCommand」というシンプルなコマンドを作成してみます。

   ```bash
   src/Command/HelloCommand.php
   ```

2. **コマンドクラスの作成**  
   以下のように、`HelloCommand`クラスを作成します。

   ```php
   <?php
   declare(strict_types=1);

   namespace App\Command;

   use Cake\Console\Arguments;
   use Cake\Console\Command;
   use Cake\Console\ConsoleIo;

   class HelloCommand extends Command
   {
       /**
        * コマンドの実行内容を定義します。
        *
        * @param \Cake\Console\Arguments $args 引数オブジェクト
        * @param \Cake\Console\ConsoleIo $io コンソール出力用オブジェクト
        * @return void
        */
       public function execute(Arguments $args, ConsoleIo $io): void
       {
           $io->out('Hello, CakePHP 5!');
       }
   }
   ```

   - `execute`メソッドの中に、コマンドが実行された際の処理を記述します。この例では、`Hello, CakePHP 5!`というメッセージを表示します。

3. **コマンドの実行**
   ターミナルから以下のコマンドで実行します。

   ```bash
   bin/cake hello
   ```

   実行すると、以下のように出力されます。

   ```
   Hello, CakePHP 5!
   ```

### コマンドのオプションや引数の追加

引数やオプションを追加する場合、`execute`メソッドの中で`Arguments`オブジェクトを使用して取得します。

```php
public function execute(Arguments $args, ConsoleIo $io): void
{
    $name = $args->getArgument('name') ?? 'CakePHP 5';
    $io->out("Hello, {$name}!");
}
```

### 注意点
- コマンド名をカスタマイズするには、クラス名を適切に変更してください。
- コマンド実行時の例外やエラーハンドリングを`try-catch`構文で追加すると、エラー時の処理が明確になります。

これで、CakePHP 5でコマンドの作成ができるようになります。
初めてのCakePHP：Linux上でのアプリケーション開発手順

CakePHPのアプリをLinuxで作成する手順は以下の通りです。必要な環境を整え、アプリケーションを作成し、設定を行います。

### 1. 必要なソフトウェアのインストール

#### a. PHPのインストール
CakePHPはPHPフレームワークですので、まずPHPをインストールします。PHP 7.2以上を推奨します。

```bash
sudo apt update
sudo apt install php php-cli php-mbstring php-xml php-mysql php-zip php-curl php-intl
```

#### b. Composerのインストール
ComposerはPHPのパッケージ管理ツールで、CakePHPのインストールに必要です。

```bash
sudo apt install curl
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
```

#### c. Webサーバーのインストール
ApacheまたはNginxをインストールします。ここではApacheを例にします。

```bash
sudo apt install apache2 libapache2-mod-php
```

#### d. データベースのインストール
MySQLまたはMariaDBをインストールします。以下はMySQLのインストールコマンドです。

```bash
sudo apt install mysql-server
```

### 2. CakePHPのインストール

Composerを使用してCakePHPをインストールします。プロジェクト用のディレクトリを作成し、その中にCakePHPをインストールします。

```bash
mkdir my_cakephp_app
cd my_cakephp_app
composer create-project --prefer-dist cakephp/app .
```

### 3. データベースの設定

MySQLに接続し、データベースを作成します。

```bash
mysql -u root -p
```

次に、以下のSQLコマンドを実行します。

```sql
CREATE DATABASE my_cakephp_db;
GRANT ALL PRIVILEGES ON my_cakephp_db.* TO 'your_username'@'localhost' IDENTIFIED BY 'your_password';
FLUSH PRIVILEGES;
EXIT;
```

### 4. アプリケーションの設定

`config/app.php`を開き、データベース接続情報を設定します。

```php
'Datasources' => [
    'default' => [
        'driver' => 'Cake\Database\Driver\Mysql',
        'host' => 'localhost',
        'username' => 'your_username',
        'password' => 'your_password',
        'database' => 'my_cakephp_db',
        'encoding' => 'utf8',
        'timezone' => 'UTC',
        'cacheMetadata' => true,
        'quoteIdentifiers' => false,
    ],
],
```

### 5. パーミッションの設定

Webサーバーが正しく動作するように、`tmp`と`logs`ディレクトリに適切なパーミッションを設定します。

```bash
chmod -R 755 tmp
chmod -R 755 logs
```

### 6. Apacheの設定

ApacheがCakePHPアプリを正しく処理できるように、設定ファイルを作成します。

```bash
sudo nano /etc/apache2/sites-available/my_cakephp_app.conf
```

以下の内容を追加します。

```apache
<VirtualHost *:80>
    ServerName my_cakephp_app.local
    DocumentRoot /path/to/my_cakephp_app/webroot

    <Directory /path/to/my_cakephp_app/webroot>
        AllowOverride All
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
```

設定を有効にし、Apacheを再起動します。

```bash
sudo a2ensite my_cakephp_app
sudo systemctl restart apache2
```

### 7. ブラウザでのアクセス

`http://my_cakephp_app.local`にアクセスして、CakePHPの初期画面が表示されれば成功です。ホストファイルにエントリを追加して、`my_cakephp_app.local`を`127.0.0.1`にマッピングする必要があります。

```bash
sudo nano /etc/hosts
```

以下の行を追加します。

```
127.0.0.1 my_cakephp_app.local
```

### 8. アプリケーションの開発

これでCakePHPの環境が整いました。次は、コントローラー、モデル、ビューを作成してアプリケーションの開発を行っていきます。

### まとめ

以上が、LinuxでCakePHPアプリを作成する手順です。必要なソフトウェアをインストールし、データベースを設定し、Apacheの設定を行ってアプリケーションを構築できます。各ステップに沿って進めていくことで、CakePHPアプリの開発が可能になります。
SessionスコープのBeanを利用しようとしたらハマった話

# はじめに
SessionスコープのBeanを利用したかったので、`@SessionScope`を使った実装をしたところ、デッドループが発生してしまったので、その原因と解決方法を調べた際の記録です。

# SessionスコープのBeanを利用したかったが、デッドループが発生
SessionスコープのBeanを利用して、そのSession中で有効なBean（例えば、ECサイトのショッピングカート）を作るため、`@Component`と`@SessionScope`を付与したクラス（仮に「Cart」クラスとします。）を作成しました。
そして、セッション開始時にCartクラスが持つカートの中の商品を表すリスト`itemList`を初期化するため、`HttpSessionListener`において`ArrayList`を生成して初期化をしようとしました。
ところが、その初期化をする処理が何度も呼び出され（`HttpSessionListener`の`sessionCreated`が何度も呼び出され）、デッドループが発生してしまいました。

# 原因はプロキシ？
ここでかなりハマって色々と調べてみると、原因はSessionスコープのBeanをラップするプロキシが関係しているのでは、ということが分かりました。
SessionスコープのBeanをインジェクションするときに、実際のCartクラスのインスタンスが注入されるのではなく、それをラップするプロキシが注入されます。
そして、プロキシを介してCartクラスが呼び出されます。
その際、セッション内でまだ完全に初期化されていないCartクラスを呼び出すと、プロキシはCartの生成を行います。
その状態でCartクラスを参照する処理が行われると、まだCartクラスが完全に初期化されていないため、プロキシが再度Cartを生成し、ということを繰り返してしまい、デッドループに陥る、という仕組みのようです。
まだ理解が浅いですが、上記がデッドループの原因と考えられます。

# 解決策
セッションスコープを使用せず、HttpSessionに直接Cartインスタンスを格納します。
具体的には、ユーザが最初にアクセスするページのコントローラにおいて、Cartがセッションに格納されていなければ（初回のアクセスであれば）、新しくCartをnewし、それをHttpSessionの`setAttribute()`メソッドを用いてセッションに格納します。
これで、Springのプロキシを使用しなくて良いため、デッドループが解消されます。

# おわりに
Springのスコープ管理がなかなか掴めません…セッションスコープのBeanなので、セッション開始時に初期化した方がきれいかなと思い、最初の方法で進めたかったのですが、最終的にコントローラにベタ書きすることになりました。
もし他に良い方法があれば、ご教示いただきたいです。
【2024年版】Spring Bootとは

## はじめに

* 設定の簡略化: Spring Bootは設定ファイルの量を減らし、開発者が多くの設定を行う必要がない。

* 迅速な開発: 組み込みのHTTPサーバーをサポートし、スタンドアロンアプリケーションの開発が容易。

* コーディング量の削減: 冗長なコードを記述することなく処理の実装が可能。

* 自動化された設定: Bean定義やXML設定が自動化され、開発のハードルが下がる。

* 依存性管理の簡便さ: MavenやGradleを用いた依存性の管理が簡単で、スターターパッケージが提供される。

## Spring Bootの概要

* 開発言語: Javaを使用。

* リリース年: 2014年にリリース。

* 開発元: Pivotal Software（現在はVMwareが所有）。

* 主な特徴: スタンドアロンで実行可能なアプリケーションの作成、豊富な自動設定、組み込みHTTPサーバーのサポート。

* 用途: Webアプリケーション開発、RESTfulサービス、マイクロサービスアーキテクチャ、クラウドベースアプリケーション。

## Spring Bootの歴史 

* リリース背景: Spring Frameworkの初期設定の煩雑さを解消するために登場。

* アプローチ: 「設定より規約」のアプローチを採用し、デフォルトの設定を自動化。

* 受け入れ: Javaコミュニティに広く受け入れられ、WebアプリケーションやRESTfulサービスの開発において重要な役割を果たす。

* アップデート: 性能の向上、新機能の追加、セキュリティの強化が行われている。

## Spring Bootの具体的な事例 

* Netflix: Spring Boot 3を採用し、技術的な複雑さの低減や開発者の生産性向上を実現。

* eBay: コードの量を減らし、開発プロセスを単純化することで効率性と保守性を向上。

* Trivago: ウェブアプリケーション開発の時間を短縮し、効率を高めるためにSpring bootを採用。

## Spring BootとSpring Frameworkの違い

* 目的: Spring Frameworkはエンタープライズアプリケーション開発を支援するためのフレームワーク。

* 自動構成: Spring bootは自動構成機能が豊富で、プロジェクトの初期セットアップを簡素化。

* 組み込みサーバー: Spring bootは組み込みサーバーのサポートにより、独立したアプリケーションとして簡単に実行可能。

* 適用範囲: Spring Frameworkは大規模でより複雑なアプリケーションの開発に有用。

## Spring Bootのデメリット 

* カスタマイズの難しさ: 内部の動作原理を理解していないとカスタマイズが困難。

* メモリ使用量: アプリケーションのメモリ使用量が大きくなる場合がある。

* デバッグの複雑さ: 自動設定により、問題の特定と解決が困難になることがある。





https://qiita.com/ASHITSUBO/items/6c2aa8dd55043781c6b4

https://qiita.com/yuusuke_s/items/4f542a2ae19951e7b8e2
6個のボールを3つの箱に入れる方法は8C2通り

$6$個のボールを$3$つの箱に入れる方法は$_8C_2$通りになります。
($0$個でもOKで、ボールは区別せず、箱は区別する場合)

一見すると$3$や$6$と関係ない$2$や$8$が現れるので違和感がありますが、
これは$1$列に並んだ$6$個のボールを$2$枚の板を使って仕切ることと同じであり、
$6$個のボールと$2$枚の板を一列に並べることです。

最初に箱は区別する場合と書きましたが、板になったら区別しません。
$2$枚の板の順番を入れ替えても$3$つに分けたボールの数には影響しないからです。

ボールと板を合わせた$8$つを並べるために、$2$枚の板をそれぞれ何番目に置くかを考えます。

準備として、置く場所を作ります。
($□$は何も置いていない場所です。)
$□□□□□□□□$

まず、板を$1$枚置きます。
$□□□□丨□□□$

置き方は$8$通りです。

次に、$2$枚目の板を置きます。
$□□丨□丨□□□$

空いている$7$箇所のうちの$1$つに置いたので、$7$通りの置き方があるので、$2$枚の板の置き方は$8×7=56$通りあります。

上の例では、$5$番目に置いた後に$3$番目に置きましたが、
板が区別できない場合は、$3$番目に置いた後に$5$番目に置いても同じです。

なので、$2$で割ると、$8×7÷2=28$通りになります。
($8×7$は$_8P_2$であり、$÷2$の$2$は、正確には$_2P_2$または$2!$です。したがって、$\frac{_8P_2}{_2P_2}=_8C_2=28$です。)

板の置き場所が決まったら残った所にボールを置きます。
$○○丨○丨○○○$

これは$6$箇所に$6$個のボールを置くので$1$通りです。

ちなみに$_8C_2$の$2$と$8$はどこから来たかというと、
$2=3-1$ (つまり板の枚数)
$8=6+3-1$ (つまりボールと板の個数の和)
でした。

また、$_8C_2=_8C_6$でもあります。($6=8-2$です。)
(計算すると、$\frac{8×7}{2×1}=\frac{8×7×6×5×4×3}{6×5×4×3×2×1}$で、共通部分を約分すると同じになります。)

まとめると、$6$個のボールを$3$つの箱に分けて入れる組み合わせは、
$ _{6+3-1}C _{3-1}$または$ _{6+3-1}C _{6}$の$28$通りです。
【CSS】非表示になっているセレクタのデータを取得する  visibility: hiddenとposition: absoluteを組み合わせる

要素が見えなくなり、レイアウト上のスペースも取らないという効果を得られます。これにはいくつかのメリットがあります。

# 要素を非表示にしながら、スペースを開けない
display: none;とは違い、要素自体はDOMに残るため、JavaScriptでサイズを取得したり、後から簡単に表示したり操作できる
サーバ側の処理にアクセス制御は必須


## HTTPプロトコルの特徴
- ステートレス
  文脈を持たない
  ＝毎回のリクエストに必要な情報全てが詰め込まれる

----
## 画面仕様によるアクセス制御は信用できない
- ブラウザからのリクエストとは限らない
- ログインしないとこの画面には到達できないから、このリクエストも送信できない・・・と考えてはならない！
- アプリが想定しない順序でリクエストを送る手段はいくらでもある
  curlコマンド／Postman／開発者ツール／負荷ツール　など・・・

----
## HTTP通信を安全に実装する際の考え方
- 全リクエストが「**信用できない**」と考える
- リソース単位でアクセス可否を設計する
  - 認証なしでアクセス可能（ログイン画面など）
  - 認証されていないとアクセスできない（ほとんどのリソースはこれ）

----
## 実装面では、１カ所で認証するべき
- たいていのフレームワークに、全リクエストで統一的に処理を仕込む手段が提供されている
- たいていのフレームワークに、認証を実現する手段が提供されている

----
## 認証済みかどうかだけでは不足
- 同じサービスの他人の情報を覗こうとしていないか、チェックが必要
- サーバ側で保持する情報と照合して、許可されるデータのみクライアントに返す

----
## 応用・パラメータも同様
- リクエストに載ってくる全てのパラメータは**信用できない**
- 必須かどうか／フォーマット／長さ／改行有無／不正な文字（非可視文字）など
- セキュリティホールとなることもある

----

## 余談・WebSocketについて
- 毎回必要な情報を全て送るのは非効率
- WebSocketは一度接続したらずっと接続している
  → 接続時に安全を確認したら、基本ずっと安全

----

## 最後に
- HTTPリクエストはブラウザを前提と**しません**
- 全リクエストを**信用できない**と考えよう
- リソース単位でアクセス可否を設計しよう
What is Microsoft Defender?

In today’s digital-first world, cybersecurity is crucial for businesses of every size. The rise in cyber threats (from phishing and malware to sophisticated ransomware) has put companies under constant risk. Microsoft Defender is a security solution tailored to meet these challenges, providing advanced, layered protection for companies looking to secure their data, employees, and operations. In this blog, we’ll explore how Microsoft Defender strengthens your security landscape and how each of its tools contributes to protecting your organization.

Organizations worldwide face an ever-growing range of cybersecurity challenges, from phishing scams and malware to complex targeted attacks. Traditional security tools often struggle to keep up with the dynamic of these threats. A bunch of companies also lack the expertise and resources needed to maintain a proactive security stance. Without comprehensive, integrated solutions, vulnerabilities can go undetected until it's too late. Microsoft Defender was created to address these gaps, providing organizations with tools to strengthen their defenses across endpoints, identities, applications, and data.

Microsoft Defender is a multi-layered, integrated security solution designed to cover a wide array of potential threat vectors. It combines endpoint detection and response, advanced threat protection, and cloud-native capabilities to create a seamless protection environment. Built to work cohesively across the Microsoft ecosystem and beyond, Defender provides threat intelligence and AI-powered analytics to help businesses stay ahead of even the most advanced attacks.
![sentinel-xdr-usx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3928175/527755a3-abae-1bda-7520-a3db9fef510c.png)



Consider a medium-sized company that recently adopted Microsoft Defender for Endpoint. Within weeks, Defender identified a previously undetected phishing campaign that had successfully infiltrated the organization’s email accounts. Using Defender’s automated response capabilities, the security team was able to isolate affected devices and prevent the spread of malicious content. Defender’s machine learning-driven alerts also revealed insights into how the attackers had attempted lateral movement. This visibility allowed the team to proactively close vulnerabilities, ultimately reducing the risk of future incidents.

Microsoft Defender provides a comprehensive security solution that adapts to modern threats and scales with the needs of today’s organizations. By integrating threat detection, incident response, and analytics across endpoints, identities, and cloud environments, Microsoft Defender offers a robust and reliable defense against cyber threats. For organizations looking to bolster their cybersecurity, adopting Microsoft Defender could be a crucial step in strengthening their security posture.

Is your organization ready to take the next step in cybersecurity? Explore Microsoft Defender’s features, start a free trial, or reach out to a Microsoft security specialist to learn how Defender can enhance your organization’s defense against modern threats.
Akamai EdgeWorkersのFlexible compositionでEdgeWorkerをライブラリ化する

## EdgeWorkers間でのコード共有
Akamai EdgeWorkersを利用してAkamai CDNのEdgeサーバー上でJavascriptを動かすことで、従来のCDN設定だけでは難しかった動的な処理を実現するケースが急増しています。

複数のEdgeWorkersを利用するケースも多いのですが、たとえば認証処理など複数のEdgeWorkers間で同じ処理を実行したい場合には各EdgeWorkersに同じコードを含める必要がありました。
これがデメリットだったのですが新機能 Flexible composition によってこのデメリットを解消できるようになりました。具体的には別のEdgeWorkersをライブラリとして呼び出すことができるようになりました。

## EdgeWorkersとは
EdgeWorkersでは、エッジで駆動するリクエスト/レスポンスのイベントハンドラを提供し、 JavaScriptで書いたコードを実行できます。クライアントの近くのEdgeサーバーで処理を行うためレイテンシーが小さく、世界中に数十万台のサーバーが配置され、自動で分散駆動するためスケーリングを気にしなくてよいというメリットがあります。

参考: [EdgeWorkers:Akamaiのエッジサーバー上でJavascriptで書いたコードが実行可能に](https://www.akamai.com/ja/blog/developers/edgeworker)

## Flexible compositionの利用方法
以下の手順でFlexible compositionを利用できます
1. ChildのEdgeWorkers (ライブラリとなるEdgeWorkers)を作成する
2. ParentのEdgeWorkers (呼び出し元のEdgeWorkers)を作成する

[こちらのページ](https://qiita.com/tkmts/items/f8407b91bf73fe292750)に、キャンペーンでの広告表示のためアクセス元の国の言語の情報をCookieに持たせる処理のサンプルがあります。
ここでは、この処理をFlexible compositionを使って実装してみます。

### 1. ChildのEdgeWorkersを作成する
まずはChildのEdgeWorkersを作成します。

main.js
```javascript
import { SetCookie } from 'cookies'

// キャンペーンの広告表示用の言語情報を持ったSetCookieオブジェクトを返すfunction
export function getCampaignCookie(request) {
  let value = 'en'
  if (request.userLocation.country === 'JP') {
      value = 'ja'
  } else if ( request.userLocation.country === 'ES' ||
              request.userLocation.continent === 'SA') {
      if (request.userLocation.country !== 'BR') {
          value = 'es'
      }
  }

  const cookie = new SetCookie()
  cookie.name = 'campaign_lang'
  cookie.value = value
  cookie.path = '/'
  cookie.maxAge = 30 * 24 * 60 * 60
  return cookie
}

// Not used
export function onClientRequest() {
}
```
コードバンドルを作成したらStagingまたはProductionにActivateします。Parentより先にActivateが完了している必要があります。


### 2. ParentのEdgeWorkersを作成する
次に、ParentのEdgeWorkersを作成します。
bundle.jsonに依存関係としてChildのEdgeWorkersを登録します


bundle.json
```json
{
    "edgeworker-version": "0.0.1",
    "description" : "Flexible Composition Example",
    "dependencies": {
        "utilities": {
            "edgeWorkerId": 1, // 上記で作成したChildのEdgeWorkerのIDを指定する
            "version": "active"
        }
    }
}
```
main.js
```javascript
import * as utilities from 'utilities' // from ‘dependenciesに定義した名前’ でimport

export function onClientResponse(request, response) {
    response.setHeader('Set-Cookie', utilities.getCampaignCookie(request).toHeader())
}
```
Parentも作成が終わったらStagingまたはProductionにActivateします。

### EdgeWorkersを呼び出すよう設定
CDNの設定からParentのEdgeWorkersを呼び出します。
![ew.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2911525/34e97ab2-99ec-14b4-bb30-3614820000b7.png)


## おわりに
今回のサンプルは非常に簡単なものですが、EdgeWorkersをライブラリ化できることが確認できました。
チーム開発を行う際などに大きな効果を発揮するFlexible compositionをぜひ活用ください。
HHKB Proffecional Type S 無刻印　英字配列　macショートカットまとめ

| ショートカットキー | 説明                                      |
|--------------------|-------------------------------------------|
| **移動系**         |                                           |
| Ctrl + f          | カーソルを右へ移動                         |
| Ctrl + b          | カーソルを左へ移動                         |
| Ctrl + p          | カーソルを上へ移動                         |
| Ctrl + n          | カーソルを下へ移動                         |
| Ctrl + a          | カーソルを行頭へ移動                       |
| Ctrl + e          | カーソルを行末へ移動                       |
| Ctrl + t          | カーソルの左右1文字ずつを入替              |
| **削除・貼付系**   |                                           |
| Ctrl + d          | カーソル右側の1文字を削除                   |
| Ctrl + h          | カーソル左側の1文字を削除                   |
| Ctrl + k          | カーソル右側の文字から行末／段落末まで削除  |
| Ctrl + y          | Ctrl + kで削除した文字列を貼り付け          |
| Ctrl + o          | カーソル下段に空行を挿入                   |
Vite を初めて触った時に調べたことまとめ

## 概要

Vite で Vue.js 3 (TypeScript) の新規プロジェクトを作成した際に Vite について調べたことを記載します｡

## Vite とは

"ヴィート" と発音する｡

JavaScript のビルドツール｡
従来のビルドツール (webpack や Rollup､ Parcel) より高速にビルドできる｡

従来のビルドツールは全てをビルドするが､ Vite は必要な分だけビルドする｡

webpack がデファクトスタンダードだが､次世代のビルドツールとして Turbopack と共に注目されている｡

## 特徴

- npm の依存関係の解決と事前バンドル
- Hot Module Replacement
- TypeScript をサポート (トランスパイルのみ)
- 様々なフレームワークをサポート

### Hot Module Replacement (HMR)

HMR 機能を備えたフレームワークは､ API を活用して､ページを再読み込みしたり､アプリケーションの状態を損失することなくコードの変更を反映できる｡
この機能によって､開発の生産性が向上する｡

## CLI

ref: [コマンドラインインターフェイス | Vite](https://ja.vite.dev/guide/cli.html#%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%88%E3%82%99%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9)

### 開発サーバー

`vite`

Vite 開発サーバーをカレントディレクトリで起動する｡
`vite dev` と `vite serve` は `vite` のエイリアス｡
つまり `vite` と叩いたときと同じ挙動をする｡

詳しくは[こちら](https://ja.vite.dev/guide/cli.html#%E9%96%8B%E7%99%BA%E3%82%B5%E3%83%BC%E3%83%8F%E3%82%99%E3%83%BC)

### ビルド

`vite build`

プロダクション用にビルドする｡

## index.html とプロジェクトルート

Vite プロジェクトでは､ `index.html` は `public` 直下ではなく､プロジェクトルート直下にある｡
これは意図的なもので､ Vite プロジェクトは `index.html` をソースコードの一部として扱っており､アプリケーションのエントリーポイントとなっていることを明示するためだと思われる｡

## create-vite

よく使われるフレームワークのテンプレートを元に､プロジェクトを素早く開始するためのツール｡
例えば､ vue-ts をテンプレートとして指定すると､ TypeScript の Vue.js のプロジェクトをテンプレートから生成することが出来る｡


```bash
npx create-vite <project> --template <template>
```

`<project>` を `.`とするとカレントディレクトリにプロジェクトを作成する｡

## 設定まわり

ref: [Vite の設定 | Vite](https://ja.vite.dev/config/#configuring-vite)

コマンドラインから `vite` を実行すると､ Vite はプロジェクトルート無いの `vite.config.js` または `vite.config.ts` という設定ファイルを自動的に解決しようとする｡

## その他

### vite-env.d.ts

環境変数に型を定義するときに用いる｡

## 参考資料

- [Vite 公式ドキュメント](https://ja.vite.dev/guide/)