OmniAICreator/Qiita-1.07M huggingface dataset:
[React]バブリングについて

世の中の全エンジニアの方々、お疲れ様です。
Reactを勉強しており、勉強の中で学んだことをアウトプットしていきます。
今回はReactの***バブリング***と呼ばれる挙動についてです。

# バブリング
いきなりですが、以下のようなコンポーネントを作成したとします。
divタグにbuttonタグが2つネストしている状況です。

```JSX
export const Toolbar = () => {
  return (
    <div className="Toolbar" onClick={() => {
      alert('ツールバー！');
    }}>
      <button onClick={() => alert('再生！')}>
        動画を再生
      </button>
      <button onClick={() => alert('アップロード！')}>
        アップロード
      </button>
    </div>
  );
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805028/2557dd3d-9060-0271-d256-da2ae5a151f7.png)
画面上ではこのようになります。

では、「動画を再生」ボタンを押してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805028/1e5d0ec5-582e-7ad7-8902-15a4662e4b2b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805028/07dfbdf5-1b50-deb9-6dc0-25262489d635.png)
すると、このように「再生！」のアラートの後に「ツールバー！」のアラートまで出現しました。

さらに、「アップロード」ボタンでも同じ挙動が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805028/6c014e58-9367-d5cc-8e27-475fc93d2b8e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805028/fc9d63d9-7fe7-5eb1-64ee-6c7553430bb6.png)


この現象はReactのバブリングと呼ばれる仕組みに起因するもので、公式ドキュメントでは以下のように説明されています。

> イベントハンドラは、コンポーネントが持っている可能性のあるどの子が由来であってもイベントをキャッチします。このことをイベントがツリーを “バブリング (bubble)” または “伝播 (propagate)” する、と表現します。イベントは発生した場所から始まり、ツリーを上に向かって進んでいきます。

https://ja.react.dev/learn/responding-to-events

なるほど。
***子のイベントハンドラ（今回はonClickイベント）が発火すると親のイベントハンドラも発火。それが順々に上の階層につながっていく***のですね。

イメージ↓
<img width="200px" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3805028/2490d8be-eaff-5ceb-b372-08e3b7fc5daf.png">

以上、バブリングについて軽くまとめてみました。この仕様を理解していないと予期せぬ挙動の処理に追われることになってしまいますので、これからも理解を深めていきたいと思います！
ここまで読んでいただきありがとうございました！
今日の関数: XLOOKUP

用途: XLOOKUP 関数は、指定した範囲内で検索値を探し、対応する値を返すために使用されます。従来の VLOOKUP や HLOOKUP 関数の進化版で、より柔軟で強力な検索機能を提供します。

使用例:

=XLOOKUP("検索値", A1:A10, B1:B10, "見つからない場合の値", 0, 1)

この例では、範囲 A1:A10 で “検索値” を探し、対応する B1:B10 の値を返します。検索値が見つからない場合は、“見つからない場合の値” を返します。

メリット:

列の順序に依存せず、任意の範囲を検索できます。
完全一致、近似一致、ワイルドカード一致など、柔軟な検索オプションがあります。
上下左右どの方向にも検索可能です。
注意点:

XLOOKUP は Excel 2019 以降および Microsoft 365 で利用可能です。
検索範囲と戻り範囲のサイズが一致している必要があります。
git stash メモ

GUIに頼りきりですぐ忘れるので、メモ。

**作業中のファイルの退避**。ステージングしていない変更も含めて退避する。ブランチを移動したいときはこれ。
```bash
$ git stash -u
```

**直前に退避した作業の復旧**。stash一覧からは取り除かれる。
```bash
$ git stash pop
```

**特定の目的のパッチの作成**。これがかなり面倒。必要な部分 **以外だけ** ステージングし、名前を付けて退避する。
```bash
$ git stash -m 'パッチの説明'
```

**特定の目的のパッチの適用**。```git stash list``` で一覧から目的のパッチを探し、番号を指定して適用する。stash一覧には残す。
```bash
$ git stash apply n
```

**不要になったパッチの削除**。```git stash list``` で一覧から目的のパッチを探し、番号を指定して削除する。
```bash
$ git stash drop n
```
C# 12のCollection Expressionsでbyte[]の初期化がちょっと楽になった

C# 12 から導入されたCollection Expressionsは左辺の変数の型を考慮してくれるようなので、byte[]を宣言・初期化する時にとても便利だという話です。

次のような書き方はコンパイルエラーになります。これは、右辺の型がint[]と仮定されて、それをbyte[]へ代入しようとするためです。

`byte[] arr = new [] { 1, 2, 3 };`

次のようにする必要があるため、あんまり記載量が減っていなくて少し面倒でした。

`byte[] arr = new byte[] { 1, 2, 3 };`

Collection Expressionsを使うと、次の書き方ができます。

`byte[] arr = [ 1, 2, 3 ];`

だいぶすっきりした感じがします！この書き方の場合、左辺の型の初期化という扱いになるため、右辺に型を指定する必要がないのだと思います。

C#の文法であり .NETの実行バージョンに依存しないようなので、C# 12がデフォルトとなっている .NET 8はもちろん、言語バージョンを12.0以上に上げれば古い .NETでも使えるようです。

ちょっとしたことですが、とても便利だと思います。使っていきましょう！

便利だと思った側面だけを紹介しましたが、詳しく知りたい人はMSオフィシャルのドキュメントをどうぞ。[コレクション式 (コレクション リテラル) - C# reference | Microsoft Learn](https://learn.microsoft.com/ja-jp/dotnet/csharp/language-reference/operators/collection-expressions)
Amazon RDSのSlowQueryを確認する

# 概要
- Amazon RDSのSlowQueryの見方がわからんかったのでメモしておく
- Performance insightsでも確認できると思ってたけど長いクエリは途中で省略されてしまうのでそこでは確認できない

# 確認方法

1. Amazon RDS -> データベースから確認したいインスタンスを選択
1. 設定から発行されたログの一覧にスロークエリがあると思うのでClick→CloudWatch Logsに遷移
1. ログの中にクエリがあるのでそこで確認できる


Performance insightsで、AASのトップホストやユーザーが確認できるので、それをもってログを絞り込めると良いと思う
diskpartでディスククリア

## diskpart

Windowsの「ハードディスクパーティシンの作成とフォーマット」でハードディスクを見た時、いくつかのパーティションがあり、うち一つをクリアしたくてもできない、あるはディスク全体をクリアしたいという場合があります。ディスクを右クリックしてもクリアが表示しないということもあります。

ディスクのパーティションを含めて全部初期化したい時、diskpartを使います。

- 管理者モードでターミナルを起動
> diskpart

プロンプトが*DISKPART*となる
- ディスクのリスト
>DISKPART> list disk

- ディスクを選択
>DISKPART> select disk no.

- クリア
>DISKPART> clear
ネットワーク接続方式完全ガイド：有線と無線、どちらが適切か徹底比較！

#### 概要
ネットワーク接続には、有線接続と無線接続があります。それぞれの特徴と利点、デメリットを詳しく解説し、どちらが適切かを考えます。

---

#### 1. 有線接続

- **説明**: 有線接続は、物理的なケーブル（イーサネットケーブルなど）を使用してデバイスをネットワークに接続します。高速で安定した接続が特徴です。
- **特徴**: ケーブルによる接続で、信号の遅延や干渉が少なく、安定した通信を提供。
大容量のデータ転送にも対応できる。
セキュリティ面でも安心。
- **用途**: オフィスネットワーク、データセンター。

#### 2. 無線接続（Wi-Fi, Bluetooth, ZigBee）

- **Wi-Fi**
  - **説明**: 正式名称は「Wireless Fidelity」で、無線LANの国際標準規格のひとつです。 
Wi-Fiは、無線LAN技術を使ってデバイスをインターネットやLANに接続します。利便性が高く、家庭やオフィスで広く使用されています。
  - **特徴**: 高速で広範囲に通信可能。設置が容易だが、干渉や速度低下が発生しやすい。
  - **用途**: 家庭、カフェ、オフィス。

- **Bluetooth**
  - **説明**: Bluetoothは短距離無線通信技術で、主にデバイス間のペアリングに使用されます。
世界で仕様が統一されている標準規格のため、どこの国の製品でも通信することができます。
  - **特徴**: 範囲は限られるが、消費電力が低い。
  - **用途**: モバイルデバイス、ヘッドセット、周辺機器接続。

- **ZigBee**
  - **説明**: ZigBeeは、低消費電力で短距離通信を行う無線通信規格で、主にIoTデバイスに使用されています。
  - **特徴**: 消費電力が非常に低く、多数のデバイスを接続可能。
ライセンスフリーで低コスト。
  - **用途**: スマートホーム、産業用IoT。

---

#### 総括
有線接続は信頼性が高く、無線接続は利便性が高いです。Wi-Fiは日常的なネットワーク接続に最適で、BluetoothやZigBeeは特定のデバイス間通信に優れています。接続方式は、用途や環境に応じて最適なものを選択することが重要です。

---
iOSのブラウザで確認した時だけCSSが崩れてしまう

# なにが起きた？
PCのブラウザで確認すると正常なのに、iOSのどのブラウザで見てもキャッシュを削除してもスタイルが崩れている！(フォントサイズがおかしい)
CSSでfont-sizeを16pxに指定しても明らかにデカい！
![IMG_9277.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798584/49e4aa53-0ddf-c891-944c-9e56fd60f66c.jpeg)
> 画面中央5行はデフォルトの16pxなのだが明らかにデカくて画面からはみ出てしまっている。

# 解決
**結論: `親divの幅をデカくしていたのが原因だった。`
`親divのwidthを小さくしたら(iOSのCSSピクセルサイズに収まるサイズにしたら)解決した。`**
[参考](https://www.genz.jp/useful_information/iphone_size_quickreferencematrix/)

iOSには端末を縦向き、横向きにした時に自動的にフォントサイズを変化させる(小さい文字を拡大する)機能があるらしく、bodyやhtmlに`-webkit-text-size-adjust: 100%;`を指定してあげるとその機能を無視したサイズになるため思い通りのスタイルになるようだ。

ただし今回のケースでは、他のページや すぐ下のフォント(16px)は拡大されていないので根本的な解決にはならないと判断…。
ブラウザやプログラムと睨めっこしていた時、なんとなく画面を横スライドしたら画面が右にズレた。
(画面をピンチアウトしても縮小できなかったので、横幅サイズという視点は無くなっていた。)
ここでようやく気が付く…。
「遊び心に`<!DOGTYPE html>`ってタイトルに変えた時divサイズ変えたんだ…」
そうか、iOSの画面幅に応じてフォントサイズが変わる機能が働いてフォントがデカくなっていたんだ。

iPhoneのCSSピクセルサイズを調べて、大体これくらいなら大丈夫というサイズまで親divのwidthを小さくした(`width: 370px;`)
ちなみに元は`width: 700px;`だった。
![IMG_9278.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3798584/3d05a00e-8475-52b6-7a08-7920459800a5.jpeg)

うん、綺麗！

ちなみに画面を横にしても問題なかったので`-webkit-text-size-adjust: 100%;`は指定していません。
本当はとりあえず指定していた方がいいのかな？ちょっとそこら辺はわかりません。

プログラミングは灯台下暗しな問題が多々あり、毎度「もっと遠くから、いろんな視点から問題を見なくては」と思っています。思っているだけでできてはいません…。
qsort　timsort より高速な２つのソート　qsort20 と sqsort

#### 以前報告した２つのクイックソート ss18 と qs19 を改良したので報告します。
#### 主な変更点は、安全性のための変更と、再帰呼び出しへの書き換えです。
#### qsort20(qs20)(qs19を改良) は、従来のqsortに比べて 1.1～2 倍高速です。そして、安全です。
#### sqsort(ss21)(ss18を改良) は、timsort よりも 1.7～5 倍高速です。そして、安定・安全です。
　

以下では、
安定 とは、「キー値が同じ要素は、ソートの前後でその順序を維持する」こととします。
安全 とは、「悪意のある配列により、異常に長いソート時間を発生させることが不可能」
　　　　　　　　　なこととします。

qsort20・sqsort では「安全」を実現するために、
clock()関数を再現性のない乱数発生器として使用し、乱数を用いてピボットを決定します。
これにより、理論上の最悪計算時間$O(n^2)$は変化しませんが、
「悪意のある配列を作ることは不可能」となります。


ただし、qsort20 において、安全性の機能を発動するための
大域変数 _QS_RNDM の初期値は 0 です。
このため、_QS_RNDM=1; を実行するまで、この機能は発動しません。
なぜなら、この機能を発動すると、同じ内容の配列をソートしても、
ソート結果が異なることがあるからです。
この現象は、キー値が同じ要素を持つ配列で現れます。
そのため、プログラムが「安全性」を必要とする場合にのみ、
qsort20 を呼び出すプログラムのデバッグが終わったあとで、
_QS_RNDM=1; を追加して下さい。
追加の後、プログラムの動作が変わるようであれば、
プログラムに問題があることになります。


一方、sqsort では、常にこの機能が発動しています。
なぜなら、sqsort は「安定性」があるので、
キー値が同じ要素を持つ配列をソートしても、常にソート結果が同じだからです。
　

従来のqsortとtimsortを含めた４種類のソートを比較すると次の表のようになります。

| 　　　　 | timsort | sqsort　 | qsort20 | 従来qsort |
|:--------|:-------:|:--------:|:--------:|:--------:|
| 速さ　　 |   △    |    ◎     |    ◎    |    ○    |
| 作業領域 |   △    |    △    |    ◎    |    ◎    |
| 安定性　 |   ○     |    ○     |    ×     |    ×     |
| 安全性　 |   ◎     |    ○     |    ○     |    ×     |
| 大きさ　 |   ×     |    ○     |    ○     |    ◎     |


qsort20 のソースコード・ベンチマークプログラムは
　　　　https://github.com/kawamura1953/qsort20 　　にあります。

sqsort・timsort のソースコード・ベンチマークプログラムは
　　　　https://github.com/kawamura1953/sqsort 　　にあります。

　

以下に、上の４種類のベンチマークテストの一部を掲載します。
各行の最後の数値がソート１回あたりの処理時間(10μ秒単位)です 。
```
　　キー:同値なし 要素:1万個　要素サイズ:8,20,80,1000byte 
my_qsort d=-3 e=10000 s=8 R4000 M000:000:000:0: c=136763  547054643 T=3.75    94 
qsort20  d=-3 e=10000 s=8 R4000 M120:580:000:0: c=128053  512215278 T=3.35    84 
sqsort   d=-3 e=10000 s=8 R4000 M120:009:018:0: c=141431  565726225 T=3.19    80 
timsort  d=-3 e=10000 s=8 R4000 M000:000:000:0: c=120391  481564348 T=5.41   135 
 
my_qsort d=-3 e=10000 s=20 R3000 M000:000:000:0: c=136748  410244182 T=4.73  158 
qsort20  d=-3 e=10000 s=20 R3000 M120:580:000:0: c=128047  384143863 T=2.91   97 
sqsort   d=-3 e=10000 s=20 R3000 M120:009:018:0: c=141452  424357003 T=3.09  103 
timsort  d=-3 e=10000 s=20 R3000 M000:000:000:0: c=120392  361177167 T=10.73 358 
 
my_qsort d=-3 e=10000 s=80 R3000 M000:000:000:0: c=136748  410244182 T=3.62  121 
qsort20  d=-3 e=10000 s=80 R3000 M120:580:000:0: c=128047  384143863 T=3.20  107 
sqsort   d=-3 e=10000 s=80 R3000 M120:009:018:0: c=141420  424261003 T=3.36  112 
timsort  d=-3 e=10000 s=80 R3000 M000:000:000:0: c=120392  361177167 T=13.98 466 
 
my_qsort d=-3 e=10000 s=1000 R600 M000:000:000:0: c=136776   82066150 T=3.52   586 
qsort20  d=-3 e=10000 s=1000 R600 M120:580:000:0: c=128099   76859601 T=1.81   302 
sqsort   d=-3 e=10000 s=1000 R600 M120:009:018:0: c=141426   84856124 T=1.70   284 
timsort  d=-3 e=10000 s=1000 R600 M000:000:000:0: c=120391   72234833 T=12.81 2135 

 
```
MySQLの情報を確認して更新する手順とコマンド

## はじめに
DBの内容を変更したい時のメモです。
DBに接続できている前提で書きます。

## １．対象のテーブル、カラムを見つける。

#### 1.データベース一覧を見る。
```
SHOW DATABASES; 
```

#### 2.表示されたDBの中から今回修正したいテーブルを見る。
```
show tables from {DB名};
```
#### 3.カラムの設定などを見て確認する。
```
SHOW COLUMNS FROM {テーブル名} FROM {DB名};
```
#### 4.対象のカラムを確認できたらDBの中にはいる
```
USE {DB名};
```
'Database changed'と表示されればOK
#### 5.格納されているデータを確認する。
```
select * from {テーブル名};
```

## ２．対象のカラムに変更を加える
#### 1.トランザクションを張る
```
begin;
```
このコマンドを最初に打っておくことで、流したSQLが間違えてたときにやり直せる。
'Query OK,'のような表示が出たら次に進んで大丈夫。

#### 2.今回修正したい内容のSQLを流す。
```
UPDATE {テーブル名} SET {カラム名}={変更後の値} WHERE {条件式}
```
条件式を入力しないとそのカラム全てが変更されてしまうので注意。
#### 3.変更が反映されているかを確認するために再度格納されてるデータを見る。
```
select * from {テーブル名};
```
#### 4.変更が確認できていればコミット（保存）する
```
commit;
```
これで完了。
#### ※もし修正がうまくいっていない場合
```
rollback;
```
更新が理想通りできていなくてもロールバックすることで、流したSQL文を無かったことにできる。
UPDATE文を修正してまた流し直す。
from control import matlabをDebianで実行する

以下の記事の内容をDebianで実行してみました。

https://note.com/tomtom_0301/n/n9d7f5db75d4a

```python
from control import matlab
```
をとりあえず実行する必要がありますので、以下の記事を参考にして、仮想環境を作ります。

https://qiita.com/fiftystorm36/items/b2fd47cf32c7694adc2e

```
$ cd [project dir]
$ python3 -m venv newenv
$ source newenv/bin/activate
```

controlをインストールします。

```
$ pip install control
```

実行できました。
```
$ python3
Python 3.11.2 (main, Aug 26 2024, 07:20:54) [GCC 12.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> from control import matlab
>>> 
```
GPT-5とStrawberryが切り開くAIの未来

# Open AI社最新AIモデルとは？

**Open AI社**から<b>Strawberry技術を基盤とした新しいAIモデル</b>がリリースされると発表されました。
これまでもAI業界にかなり大きな影響を呼んでいますよね。
まず初めにこれまでOpen AI社が出してきたモデルを軽くまとめました。
|||
|:-:|:-:|
|年数 |モデル名|
|2022年 11月 30日|GPT-3.5 無料公開|
|2023年 3月  15日   | GPT-4 有料版として公開  |
|2023年 7月  10日  |Code Interpreter 有料ベータ版提供開始|
|2023年 9月  20日   |Dall-E3  発表　 |
|2023年 9月  25日   |GPT-4V  同年10月26日に公開 |
|2024年 2月  15日   |Soraを発表   |
|2024年 5月  13日   |GPT-4o発表、リリース   |
|2024年 7月  18日   |GPT-4o mini を発表、リリース|

これを見る限りOpen AI社は**約一年間隔**で新モデルをリリースしています。
そのため、**2024年末から2025年頭**にリリースされるのではないかと予想されています。

## Strawberry技術とは？

<b>【Open AIが開発した次世代の生成AI技術のコードネーム】</b>
これは9月末にリリースされる予定です。

Strawberryは<font color="red">**高度な推論能力に焦点を当てたモデル**</font>となっており自らのミスを学習して改善する点が革新的。
**→これにより過去のデータを基にするだけでなく解答を深く考察しパフォーマンスを向上させる**

基盤は**スタンフォード大学**が開発した**Self-Taught Reasoner（STaR）**
<font color="Red">**複雑な数理問題やプログラミングなどのタスクに優れている**</font>そうです。


**デメリット**としては<font color="red">**10秒から20秒**</font>考察に時間をかけて応答するようです。即応答してくれている他モデルと比較すると、少々遅く感じてしまうかもしれません。

これらを踏まえてうえで<b>GPT-5(orion)</b>についてご紹介させていただきます。

## 新モデル!!　GPT-5(orion)

開発状況として<b>2023年7月18日にGPT-5(orion)の商標出願</b>が行われ
**安全性テスト**も進められているようです。

GPT-5(orion)は、<font color="red">**汎用的で人間に近い会話能力を持つ**</font>とされています。
一方で、Strawberryは<font color="red">**問題解決や推論に特化したモデル**</font>であるとされており
それぞれ異なる特性を持つと考えられています。


前モデルである**GPT-4o**から**さらなる改善が加えられている**と考えられます。

>**改善例として考えられるもの**

:::note info
・ハルシネーションの削減
・長期記憶の改善
・推論能力の強化
・専門性、自己学習能力の向上
・複雑な文脈の理解
:::
これほどの技術向上であれば
Strawberry同様、かなり<font color="red">**高くなる**</font>のではないのでしょうか。
まだ詳細は発表されていませんが、今後どちらも**段階的に無料になる可能性**もあります。

## 最後に
AI技術の進化がビジネス競争力を強化する鍵となります。
私自身も最新の情報を取り入れ、成長していきたいと考えています。皆様のご意見やフィードバックをお待ちしています。
GitHub Actionsで自動デプロイを構築する

## アジェンダ
GitHub Actionsを使用して、コードの更新を自動的にステージング環境へデプロイする手順を簡単にまとめます。
このワークフローにより、`main`ブランチに変更がプッシュされた際に、サーバーへコードが自動展開されるようにします。

## ステップ 1: リポジトリシークレットの設定
まず、デプロイ先のリモートサーバーにアクセスするための機密情報（ホスト、ユーザー名、SSH鍵、ポート番号など）をGitHubリポジトリに設定します。

1. リポジトリページの`Settings`に移動。
2. `Secrets and variables`→`Actions`を選択。
3. 次のシークレットを追加します:
   - `SSH_HOST`: 接続先サーバーのIPアドレスやドメイン名
   - `SSH_USER`: サーバーにアクセスするためのユーザー名
   - `SSH_KEY`: リモートサーバーへの秘密鍵（OpenSSH形式をbase64エンコード）
   - `SSH_PORT`: SSHで使用するポート（通常は22）

### ステップ 2: GitHub Actions ワークフローの作成

次に、`deploy.yml`という名前のGitHub Actionsファイルを作成し、ステージング環境へ自動デプロイを設定します。

```yaml
name: Auto Deploy to Staging

on:
  push:
    branches:
      - main

jobs:
  deployment:
    name: Deploy to Server
    runs-on: ubuntu-latest
    steps:
      - name: SSH into server and deploy
        uses: appleboy/ssh-action@v0.1.7
        with:
          host: ${{ secrets.SSH_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          port: ${{ secrets.SSH_PORT }}
          script: |
            cd /var/www/html/myproject/
            git fetch --all
            git reset --hard origin/main
```

## ステップ 3: ワークフローの解説

1. `name`フィールドで、このワークフローの名称を指定しています。GitHub上で表示される名称です。
2. `on`フィールドでは、`main`ブランチにコードがプッシュされた場合にこのワークフローがトリガーされます。
3. `jobs`セクションでジョブを定義しています。`deployment`というジョブが`ubuntu-latest`という仮想環境で動作します。
4. `steps`では、`appleboy/ssh-action`を利用して、SSH経由でサーバーに接続し、`git fetch`と`git reset`を使用してリモートリポジトリから最新のコードを取得し、ステージング環境に反映させます。

## ステップ 4: サーバー設定

サーバー側では、Gitが正しくインストールされており、`/var/www/html/myproject/`ディレクトリがGitリポジトリとして設定されている必要があります。SSH公開鍵認証が有効で、適切なアクセス権限が設定されていることを確認してください。

## まとめ
この手順を使用して、コードの更新がリモートサーバーに自動で反映される仕組みを簡単に構築できます。デプロイに必要なコマンドはプロジェクトに応じて変更できるため、柔軟にカスタマイズしてください。
サイバーエージェントのプロトスプリントリーグに参加してみた　第1弾

# サイバーエージェントのプロトスプリントリーグに参加してみた

## はじめに
サイバーエージェントの**プロトスプリントリーグ**に参加させて頂きました！
そして最優秀賞を勝ち取ってきました！！


是非遊んで見てください！！((泣いて喜びますｗ

https://unityroom.com/games/chargecat

## 目次
1. [プロトスプリントリーグ」って何？](#プロトスプリントリーグ」って何？)
2. [学んだこと](#学んだこと)
3. [成長したこと](#成長したこと)
4. [参加する前と参加してみてどうだったか](#参加する前と参加してみてどうだったか)
5. [エンジニアとの交流](#エンジニアとの交流)
6. [自分のことを知ってもらえる](#自分のことを知ってもらえる)
7. [最後に](#最後に)

## 「プロトスプリントリーグ」って何？
**プロトスプリントリーグ**は、チームで1週間の事前準備期間と3日間の開発期間を合わせて**10日間**をかけてお題に沿ったゲームを開発するインターンシップです。現場で働いているサイバーエージェントのエンジニア社員のバックアップを受けながら、ゲームとしての総合的な完成度の高さを競います。
## 学んだこと
プロトスプリントリーグに参加して、短期間でのゲーム開発の難しさと面白さを実感しました。

- **チーム開発の進行管理**  
  限られた時間の中で、タスクを洗い出し、優先順位を決めて進める力が求められました。ブランチ戦略やコミットメッセージの書き方も徹底されており、プロジェクト管理の重要性を再認識しました。

- **技術的なスキルアップ**  
  DOTweenやUniTaskといった技術を活用し、短期間でシームレスなゲーム体験を作る技術を学びました。また、フェードやポストプロセスなどの視覚的な演出にも力を入れ、ゲームの完成度を高めるための工夫を凝らしました。

## 成長したこと
今回のリーグを通して、自分のスキルがどの程度通用するかを試す良い機会となりました。以下の点で特に成長を感じました。

- **短期間でのアウトプット力**  
  制限された時間内で、ゲームとしての完成度を高めるために、機能の優先順位をつける力が養われました。無駄を省き、必要な部分に集中して開発を進める力がついたと感じます。

- **コミュニケーション能力**  
  チームメンバーとのコミュニケーションが非常に重要でした。お互いの進捗を把握しながら、助け合いながら開発を進めることで、チーム全体の生産性を向上させることができました。

## 参加する前と参加してみてどうだったか
参加前は、3日間という短い期間でどこまでできるか不安でしたが、チームのメンバーと協力し合いながら進めていくことで、想像以上にスムーズに進みました。特に、事前の準備や企画がしっかりしていたことで、当日は集中して開発に取り組むことができたのが大きかったです。

## エンジニアとの交流
サイバーエージェントの現場で働くエンジニアとの交流も大きな収穫でした。メンターとして技術的なアドバイスをいただく場面も多く、普段の開発では得られない貴重なフィードバックをもらうことができました。

## 自分のことを知ってもらえる
このリーグに参加することで、自分のスキルや考え方を知ってもらえる機会となりました。プロジェクトの進行中に、自分の得意分野を活かしてチームに貢献できたことで、他のメンバーや社員に自分の強みをアピールできました。

## 最後に
プロトスプリントリーグは、短期間で集中してゲーム開発を行うという非常にハードな内容でしたが、振り返ってみると非常に有意義で、楽しさも多く感じました。エンジニア同士でのチーム開発の経験は、これまでにない充実感を得られるものでしたし、今後のキャリアにおいても大きな糧になると感じています。
人の指が10本でなく8本だったら

## 人の指が10本でなく8本だったら
10本(5本+5本)だから10進数を使うようになったのであれば
8本(4本+4本)だったら8進数を使うようになったはず。

### 8進数を使うようになっていれば
8進数を使うようになっていたら、コンピュータのバイトサイズは、どうなるだろうか?
やはり8ビット/バイトだろうか?
それとも8進数と整合性がある
- 6ビット(8進数2桁)/バイト
- 9ビット(8進数3桁)/バイト

になるのだろうか?

8ビット/バイトでない場合、CPUのワードサイズはどうなるだろうか?
- 12ビット(6ビット/バイト✕2バイト)
- 18ビット(6ビット/バイト✕3バイト、9ビット/バイト✕2バイト)
- 24ビット(6ビット/バイト✕4バイト)
- 36ビット(6ビット/バイト✕6バイト、9ビット/バイト✕4バイト)

### 浮動小数点
8進数なら 0.1 + 0.2 == 0.3 が成り立つ。

##
[CAIレシピ] Secure Agent環境の証明書入れ替え

## はじめに

次の記事ではCAIプロセスをSecure Agent実行環境にデプロイして実行する際に、証明書の検証をスキップするためにcurlコマンドの-kオプションを指定してました。

- [プロセス実行環境の切り替え(Secure Agent環境での実行)](https://qiita.com/shunsuzu/items/2afc72613d894b4d553e)

この記事では証明書の検証をおこなうために、カスタム証明書を作成・適用する手順を確認しています。

なお、この記事は次の記事の内容を理解していることを前提としています。

- [はじめてCAIを使う際に](https://qiita.com/shunsuzu/private/12b8dbd08a30efa0003a)
- [プロセスの作成と実行(匿名認証と基本認証)](https://qiita.com/shunsuzu/private/01d91caedb92bd7781ea)
- [プロセス実行環境の切り替え(Secure Agent環境での実行)](https://qiita.com/shunsuzu/private/2afc72613d894b4d553e)



## カスタム証明書の作成と適用手順

次のドキュメントでは、カスタム証明書を使用する際に必要となる、Process Serverサービスの基本的な構成や仕様について説明しています。
[Cloud Application Integration - Configuring the Java KeyStore and TrustStore for Use with Process Server on a Secure Agent to Enable HTTPS/TLS](https://knowledge.informatica.com/s/article/DOC-17440)

以下、Linux環境の利用を前提としたカスタム証明書の利用手順です。

* 注意事項
    * \_\_\_FQDN\_\_\_ の記載は全て、Secure Agent実行環境のFQDNに変更します。
    * 環境変数 AGENT_DIR として、Secure Agentインストール先のディレクトリパスを指定します。Secure Agentのインストールディレクトリが /opt/infa1/infaagent の場合、あらかじめ次のコマンドを実行します。
        * export AGENT_DIR=/opt/infa1/infaagent

1) キーストアの作成
    - keytool -genkey -dname "CN=\_\_\_FQDN\_\_\_, OU=Informatica, O=Informatica, L=RedwoodCity, ST=California, C=US" -alias \_\_\_FQDN\_\_\_ -keypass password -keystore ~/cai.keystore -storepass password -keyalg "RSA" -validity 1000 -keysize 2048
2) 公開鍵の作成
    - keytool -exportcert -alias \_\_\_FQDN\_\_\_ -storepass password -keystore ~/cai.keystore -file ~/\_\_\_FQDN\_\_\_.der
    - openssl x509 -inform der -in ~/\_\_\_FQDN\_\_\_.der -out ~/\_\_\_FQDN\_\_\_.pem
3) 秘密鍵のインポート（作成したキーストアより
    - keytool -importkeystore -srckeystore ~/cai.keystore -destkeystore ${AGENT_DIR}/apps/process-engine/conf/ae.keystore -deststoretype JKS -srcalias \_\_\_FQDN\_\_\_ -destalias \_\_\_FQDN\_\_\_ -srcstorepass password -deststorepass password
4) 公開鍵の配置
    - cp ~/\_\_\_FQDN\_\_\_.pem ${AGENT_DIR}/apps/process-engine/conf/certs/
5) Secure Agentの停止、OSの再起動
6) IICSにログイン後、管理者画面にてProcess Serverサービスの設定を変更
プロパティ key-alias、hostname を対象に、それぞれ \_\_\_FQDN\_\_\_ を指定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074553/26c85dd4-bb1e-d902-d11d-ac6796db9f62.png)
7) Secure Agentの起動

## 作成したカスタム証明書を信用する設定でcurlコマンドを実行する手順

作成したカスタム証明書を利用して、通信先のWEBサービスを信用するにはcurlコマンドの __--cacert__ オプションとして前述のstep2.で作成した公開鍵(pemファイル)を指定します。以下、コマンドの実行例です。
```
curl  --cacert  ~/___FQDN___.pem  https://___FQDN___:7443/process-engine/public/rt/recipe-psa-HelloWorld
```

## 参照

- [Qiita - IICS CAIの実装レシピ - マスターページ](https://qiita.com/shunsuzu/items/3d1971ef6e3b993516aa)
React 嫌いが React スキーになるまで

# はじめに

よしだあきらです（@guppy0356）でほどよく活動しています。
Rails バックエンドエンジニアとして活動しています。

# これから

スキルを見つめ直す期間が出来たのでずっと嫌いだった React に取り組もうと思います。
Udemy や MENTA などいろんな媒体がありますが、経験者を対象とした [JISOU](https://projisou.jp/) に参加して React に取り組もうと思っています。

# JISOU への期待

React を始めとして Next までフォローしてくれてるようなので期待しています。
また、私が嫌いになったきっかけである Redux はどうやら Next では使わない（revalidatePath があるらしい・・・！！）

# 未来について

## 近い未来

React / Next を使って CRUD ができる

## 少し遠い未来

SNS クローンサイトを作成できる

## 遠い未来

Atomic Design などフレームワークを正しく理解することができる
Hono やサーバーサイドでも TS を使うことができる

# きっといいことあるはず

NEXT の人口はかなり多いのでみんな苦しんで使ってるとは思えないんですよね。きっと React も Next も TS もいいことあるはず。頑張ります。
[Kotlin]Android Studioで「Files under the "build" folder are generated and should not be edited.」と出てきたので、原因を考える[初心者]

<h2>はじめに</h2>

こんにちは、mAgmAです。

今回も前回と同じくエラーの紹介になります。
さっさと解決して、次に進みましょう！

<h2>どんなエラー？</h2>
今回のエラーは<br>
""Files under the "build" folder are generated and should not be edited.""<br>
ということで、日本語訳すると、<br>
"「build」フォルダの下のファイルは生成されるため、編集しないでください。"<br>
とのことでした。

少し調べてみると、"build"フォルダは自動で作成されるもののために勝手に自分で編集するな、ということらしいです。

また、これに付随して以下のエラーも発生していたので紹介します。

```kotlin:ActivityMain.kt
"エラー元のコード"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"

"エラー文"
URI is not registered(Settings | Languages & Frameworks | Schemas and DTDs)
```
上記が3つ分発生していました。
いずれも、xmlnsの文に対してエラーが出ています。

これも調べてみると、xmlで自由に使えるタグをまとめるためにxmlnsを使って定義しようね、というものです。
なので、定義はされているはずなので本来エラーは出ないはず、なのですが…

<h2>解決法</h2>

解決策として、ツール再起動というものがあるのですが現実的じゃない…ということで、
キャッシュの削除で対応してみたいと思います。

開いているプロジェクトで
<ol>
<li>Build → Clean Project</li>
<li>File → Invalidate Caches.</li>
</ol>
これでエラーがなくなりました！！！ぱちぱち

<h2>まとめ</h2>

今回は様々な2つのエラーの解決を目指しました。
前回同様、システム面、環境構築面でのエラーなので、ちゃちゃっと解決して次に進みたいですね

では！
データベースのデッドロックについて学んだこと

# 背景
こんにちは。エンジニアのKennieです。
以前、SQLを学習中にトランザクションについて初めて知りました。その際に注意すべきデッドロックについて学んだので、ここにまとめてみます。

# トランザクションとテーブルロック

データベースは、データの整合性を保つため、トランザクション中のデータ操作にロックをかけます。

- **テーブルロック:**
    - トランザクションが特定のテーブル（例えば、customersテーブル）に対して書き込みを行う際、そのテーブルがロックされます。
- **ロックの効果:**
    - テーブルがロックされている間、他のトランザクションはそのテーブルに対して書き込みを行うことができません。
    - 例えば、トランザクションAがcustomersテーブルをロックしている場合、トランザクションBはそのテーブルにデータを追加したり、更新したりすることができません。
- **トランザクションの終了:**
    - トランザクションが正常に終了（コミット）または異常終了（ロールバック）すると、ロックは解除され、他のトランザクションがそのテーブルに対して操作を行えるようになります。

# デッドロックが発生する状況

テーブルロックの取得順序を誤ると、デッドロックが発生します。

以下に、簡単なデッドロックのシナリオを示します。

**デッドロックの例**

| 操作 | トランザクションA | トランザクションB |
| --- | --- | --- |
| 1 | `UPDATE customers SET age = 42 WHERE id = 1;`<br/>(customersテーブルをロック) |  |
| 2 |  | `UPDATE users SET age = 12 WHERE id = 1;`<br/>(usersテーブルをロック) |
| 3 | `UPDATE users SET age = 12 WHERE id = 1;`<br/>(usersテーブルのロック待ち) |  |
| 4 |  | `UPDATE customers SET age = 40 WHERE id = 1;`<br/>(customersテーブルのロック待ち) |

トランザクションAは`customers`テーブル、トランザクションBは`users`テーブルをロックした状態で、互いに相手のロックしているテーブルのロック待ち状態となり、デッドロックが発生します。

# デッドロックの解決策

- **一貫したロック順序の確立:** 
    - トランザクションがアクセスするリソースに対して優先順位を設定し、すべてのトランザクションがその優先順位に従ってロックを取得するようにします。
    - たとえば、`customers`テーブルが`users`テーブルよりも優先順位が高い場合、すべてのトランザクションは`customers`テーブルを先にロックします。

トランザクションがアクセスするリソース（テーブルや行など）のロック順序を統一することで、デッドロックの発生を防ぐことができます。


# 終わりに
これまでSQLでは主にINSERTやSELECTなどの基本的な操作しか行っていなかったため、実際のプロダクション環境でのロックの利用や、それに伴うリスクについて知ることができたのは役立ちました。今後プロダクションでデータベースを触ることがあれば気を付けて書きます！
NuxtLinkとuseFetchを併用したらハマった話

# 概要

Nuxt.js製のサイトにNuxtLinkを導入したら、CMSからuseFetchしてきているコンポーネントへの遷移時に問題が発生したので忘れないように記事に残す。

# 前提
- Nuxt3
- SSR構成

## どんなバグか？

記事リストをCMSから取得してくる場合、
下記のように該当するurlやidで一意にページを選択して取得できている状態が期待される。
![expected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303906/87b9d25d-78b9-d1ae-3c01-50c2bc003673.png)

<br />
しかし、NuxtLinkを導入後、同様のフローを試してみると下記のような挙動になってしまった。

![nuxtlink1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303906/2c213049-180d-9472-138f-063b214c0c54.png)

# 考えられる原因
NuxtLinkのおかげでページをロードせずに内部遷移できるようになったが、それによりuseFetchのキャッシュの扱いが変わった（というか正しく動くようになった）

useFetchは前回の実行のキャッシュを保存するため、同じコンポーネントからのフェッチが再度行われた際に同じデータを取ってくれば良いと考えるようになりキャッシュからデータを取得し、今回の事象が発生したと思われる。

# どう直したか？
下記のようにurlをkeyとして追加した。
調べると`useAsyncData`を利用して、`initialCache: false`を付与してそもそもキャッシュをさせないような対応も出てきたが、キャッシュの恩恵は受けたいのでこの方法は使わなかった。

```typescript
const route = useRoute()
const { url } = route.params

const { data } = await useFetch('/api/newt/getcontents', {
  key: url as string, // URLをID代わりに利用してキャッシュがこのURLごとに一意に認識されるように
  ~~~
  })
```

# まとめ
- 初めからaタグを使わずにNuxtLinkを使おう
    - 開発当時はNuxt初心者すぎてNuxtLinkの存在を知らなかったので...
- useFetchにkeyを付けよう
- 必要に応じてuseAsyncDataと使い分けよう
- ビルド時のみに起きる問題には気をつけよう
JavaでPaiza攻略 : 平方分割

## 平方分割
https://paiza.jp/works/mondai/query_primer/query_primer__square_division
Java初学者ですが、こちらの問題を頑張って解きました。
PythonやCでの解説記事はよく見かけるものの、Javaで攻略している記事をあまり見かけない為、記念に残しておこうと思います。

当初、テスト1と4は通るのに、テスト2と3がランタイムエラーになるため、その原因探しに苦しみました。
ブロックごとの計算におけるforループの記述に問題があったわけですが、
気づくまで大変時間がかかった。

### 感想
平方分割というアルゴリズムを初めて知ったので、物凄く勉強になりました。
当初、分割しただけじゃ計算量そこまで変わらないのでは〜？と思っておりましたが、
予め計算済みの配列を用意しておくことで、範囲内の計算をスキップ出来るわけですね。

#### 以下、問題なくパスしたコード。
``` Java:Main.java
import java.util.*;

public class Main{
    int[] array;    //元の配列
    int[] blocks;   //ブロックごとの最大値を格納
    int blockSize;
    
    public Main(int[] array){
        this.array = array;
        blockSize = (int)Math.sqrt(array.length);
        int blockCount = (array.length + blockSize -1)/blockSize;
        blocks = new int[blockCount];
        
        Arrays.fill(blocks, Integer.MIN_VALUE);
        
        //ブロックごとの最大値を計算
        for(int i=0; i<array.length; i++){
            blocks[i/blockSize] = Math.max(blocks[i/blockSize], array[i]);
        }
    }
    
    public int queryMax(int l, int r){
        int block_l = (l-1)/blockSize;
        int block_r = (r-1)/blockSize;
        int max = Integer.MIN_VALUE;
        
        //同じブロックの場合
        if(block_l == block_r){
            for(int i=l-1; i<=r-1; i++){
                max = Math.max(max, array[i]);
            }
        }else{
            //leftブロックを計算
            for(int i=l-1; i<(block_l+1)*blockSize && i<array.length; i++){
                max = Math.max(max, array[i]);
            }
            
            //中間ブロックを計算
            for(int i=block_l+1; i<block_r; i++){
                max = Math.max(max, blocks[i]);
            }
            
            //rightブロックを計算
            for(int i=block_r*blockSize; i<=r-1 && i<array.length; i++){
                max = Math.max(max, array[i]);
            }
        }
        
        return max;
    }
    
    public static void main(String... args){
        Scanner sc = new Scanner(System.in);
        int n = 10000;
        int k = sc.nextInt();
        
        int[] input = new int[n];
        for(int i=0; i<n; i++){
            input[i] = sc.nextInt();
        }
        
        Main m = new Main(input);
        
        for(int i=0; i<k; i++){
            int l = sc.nextInt();
            int r = sc.nextInt();
            System.out.println(m.queryMax(l, r));
        }
        
        sc.close();
    }
}
```
MNISTデータベース

手書きの数字をフィードフォワードニューラルネットワークに認識させてみる。

## MNISTデータベース
手書き数字のデータセットには、MNISTと呼ばれる有名なデータベースを使う。このデータセットはKerasを使って簡単に読み込むことができる。

```python
from keras.datasets import mnist
(x_train, y_train), (x_test, y_test) = mnist.load_data()
```

実行すると、60000個のトレーニング用データが`x_train`, `y_train`に、10000個のテストデータが`x_test`, `y_test`に格納される。

`x_train`は60000×28×28の配列変数で、各要素は0-255の値をとる整数である。i番目のデータは`x_train[i,:,:]`で取り出せる。

実際に`x_train`に格納された初めの3つの画像を表示する。

```python
import numpy as np
import matplotlib.pyplot as plt
from keras.datasets import mnist

(x_train, y_train), (x_test, y_test) = mnist.load_data()

plt.figure(1, figsize=(12, 3.2))
plt.subplots_adjust(wspace=0.5)
plt.gray()

for id in range(3):
    plt.subplot(1, 3, id + 1)
    img = x_train[id, :, :]
    plt.pcolor(255 - img)
    plt.text(24.5, 26, "%d" % y_train[id], color='cornflowerblue', fontsize=18)
    plt.xlim(0, 27)
    plt.ylim(27, 0)
    plt.grid('on', color='white')
plt.show()
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3850581/ae19a0fe-2419-f703-f640-d92334293f75.png)

目標データである`y_train`の値は画像の右下に青色の数字で表示している。
既存のスキーマからER図を作成する手順

## はじめに
この記事はMacにインストールされたMySQL WorkBenchでER図(EER図)を作成した手順のメモになります

## 前提
- MySQL WorkBenchをインストールしている
- MySQL WorkBenchとデータベースを接続している

## DBからデータを読み込む


タブをEER図の画面に切り替えた後、`Create EER Model from Dtabase`を選択する
データベースから EER モデルを作成する

![スクリーンショット 2024-09-19 10.32.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/a290f951-a618-c01f-f37a-acf1712539f8.png)

![スクリーンショット 2024-09-19 10.33.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/e5fe88ae-cd34-05d7-7bfd-61b352719242.png)

## DBに接続するための接続情報を設定する

以下の画面が表示されたら接続先のDBを設定できます。

![スクリーンショット 2024-09-19 10.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/0c1e33ed-99e6-f464-fd0e-be6f34a803a0.png)

- Stored Connection
すでに接続設定が作成されている場合はここで選択ができます
（接続設定が済んだら`Continue`で次に進みます）

## DBと接続し情報を取得する

`Continue`をクリックした後、以下の画面が表示されていれば接続が完了したことを示しています

![スクリーンショット 2024-09-19 11.07.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/c76f53e0-b921-8310-7355-2131e7774884.png)

## 読み込みたいスキーマを選択する

セレクトボックスから読み込みたいスキーマにチェックを入れることで、選択したスキーマを読み込むことができます

![スクリーンショット 2024-09-19 11.08.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/f700c187-3b1d-74c4-ef5d-ba59c78ab982.png)

`Continue`を押すことで読み込みを実行します。
以下の画面が表示されれば成功です

![スクリーンショット 2024-09-19 11.25.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/a99e198d-e70a-b403-fbd9-e619f579b324.png)

以降は特に問題がなければ、そのままの設定で次に進んでいきます

![スクリーンショット 2024-09-19 11.36.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/7782bb29-e134-ae20-33b7-946c2c27bdbc.png)

![スクリーンショット 2024-09-19 11.37.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/5642234f-bd86-8b62-7632-39782fd0644b.png)


![スクリーンショット 2024-09-19 11.37.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/3f4608b9-d948-5197-8805-4d5e681ff0fe.png)


![スクリーンショット 2024-09-19 11.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2765288/ad2952e6-b435-3abd-aae9-6d949f8b9544.png)
Laravelでデータベースのテーブルからモデルを作成する

## はじめに
この記事はMySQLに作成されたテーブルからマイグレーションファイルおよびモデルのファイルを生成する手順のメモになります

## データベースのテーブル構造からモデルファイルを自動生成する

Laravelの標準機能だけでは、データベースのスキーマからモデルファイルを自動生成することはできないため、外部ツールを使うことでデータベースの構造に基づいてモデルを自動生成できます。

### 外部ツールを使う方法（Reliese Laravel）

Reliese Laravelは、公式のツールではなく、コミュニティによって開発されたオープンソースのパッケージです。

## インストールと使用方法
以下の手順で`Reliese Laravel`を使用することができます

### ① インストール
```bash
composer require reliese/laravel
```
### ② 設定ファイルの導入
```
php artisan vendor:publish --provider="Reliese\Coders\CodersServiceProvider"
```
### ③ モデルの生成
```
php artisan code:models
```
一橋大入試「1000以下の素数は250個以下であることを示せ」をプログラミングで証明してみる

# はじめに

プログラミングをしている中で、「あれ大学入試ってプログラミングで解ける問題もあるのでは？」と思ったのがきっかけでした。
プログラミングで解けそうだと思った問題の1つに、2021年に一橋大学で出題された「**1000以下の素数は250個以下であることを示せ**」について、シンプルかつ良問といった内容で、様々なところから声が上がり有名になった問題がありました。
今回はその問題について、プログラミングで証明してみようと思います。
下記がこの問題について紹介されている記事になります。

▼問題紹介記事
https://stanyonline.com/hitotubashi-math-prime-number-2021/

# 実行環境

実行環境は下記の通りです。

|項目|内容|
|:-:|:-:|
|使用言語|Python3|
|実行環境|[paiza.io](https://paiza.io/ja/projects/new)|

今回は、ブラウザ上で簡易的に実行し、特に実行環境のツール選定はしていません。

# ソースコード

下記が作成したソースコードになります。

```count_prime.py
import time

# 数値N以下の素数をカウントする関数
def countPrime(N):
    
    count = 0
	
    for n in range(N+1):  
      if n <= 1:
        continue
      if n == 2:
        count += 1
        continue
		
      for i in range(2,n,1):
        if n % i == 0:
          break
        if i == n-1:
          count += 1
    
    return count

# 入力値抽出(今回は1000を入力)
number = int(input())

# 素数カウント/時間計測
start = time.perf_counter()
result = countPrime(number)
end = time.perf_counter()

# 出力
print(str(number)+'以下の素数は'+str(result)+'個です。') #1000以下の素数は168個です。
print('処理時間:' + str(end-start) + '秒') #処理時間:0.008200373500585556秒
```

# 結果
上記のソースコードのように、1000以下の素数は168個(250個以下)と求まり、
かつ**処理時間も0.0082秒**とほぼ時間がかかっていないことがわかりました！

# 最後に
一橋大学の数学は120分で5問(単純計算24分/問)の出題がされるので、このシステムを持っていったら、丸々1問解かなくて済むことから、1問に当てられる時間が6分増える(30分/問)計算になりますね。
実際、このソースコードを大学入試の解答欄に書いたら、採点官はどう思うのか、そして点を与えるのか気になるところです。
個人的には、今後プログラミングの需要も増加するので、「おおこの学生おもろいやん」って採点官側になって満点を取らせた方が日本の未来はよりよくなるんじゃないかとも思いますね:frowning2:
エラー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842203/bd72a43d-86cc-32ca-4395-de177ecd1a73.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3842203/3c38cace-fcc5-0957-8994-5071c3db3cb7.png)
React-admin の 日本語翻訳ファイルを公開しました


React-adminの日本語翻訳ファイルを公開しました。直訳せず、読みさすさとシンプルさを優先した意訳をしています。

:::note warn

※ これは2020-02-07に[個人ブログ](https://bicstone.me)で公開した記事を移植し、[MIT](https://github.com/bicstone/ra-language-japanese/blob/v5.2.0/LICENSE)で提供しています。情報は古い可能性があります。

:::

## react-admin

React-adminは、React + Redux + Redux-Saga + React-Query + MUI + React-Router + React Hook Formなどを活用した、管理サイトのために設計されたフロントエンドフレームワークです。

https://github.com/marmelab/react-admin

デモはこちらです。

https://marmelab.com/react-admin-demo/#/

管理サイトだけでなく、データ中心の会員制のサイトなどにも使えます。

実際に仕事でちょっとした会員制のWebサイトを短納期で作れました。シンプルで保守性の高いプログラムにできます。

## ra-language-japanese

デフォルトは英語ですが、フレームワーク自体が翻訳対応しており、翻訳キーと翻訳文字列を対にしたオブジェクトを渡すことで日本語化できます。

https://marmelab.com/react-admin/Translation.html#available-locales

日本では知名度が低いのか、最新の翻訳ファイルが見つけられませんでした。とてもお世話になっているので、少しでも貢献できれば。ということで翻訳を公開しました。

先程の公式ドキュメントからもリンクしています。

https://github.com/bicstone/ra-language-japanese

## インストール

### バージョン 4 ～ 5

```shell
npm install @bicstone/ra-language-japanese@latest
# or
yarn add @bicstone/ra-language-japanese@latest
# or
pnpm add @bicstone/ra-language-japanese@latest
```

### バージョン 2 ～ 3

```shell
npm install @bicstone/ra-language-japanese@3
# or
yarn add @bicstone/ra-language-japanese@3
# or
pnpm add @bicstone/ra-language-japanese@3
```

## 使用方法

React-admin v2系では、次のように使用できます。

```js
import japaneseMessages from '@bicstone/ra-language-japanese';

const messages = {
  ja: japaneseMessages
};
const i18nProvider = locale => messages\[locale\];

<Admin locale="ja" i18nProvider={i18nProvider}>
...
</Admin>
```

v3系以降では、フックが採用されているため、`ra-i18n-polyglot` をimportする必要があります。

```js
import japaneseMessages from '@bicstone/ra-language-japanese';
import polyglotI18nProvider from 'ra-i18n-polyglot';

const messages = {
  ja: japaneseMessages
};
const i18nProvider = polyglotI18nProvider(locale => messages\[locale\]);

<Admin locale="ja" i18nProvider={i18nProvider}>
...
</Admin>
```

## まとめ

もし、便利だと思ったらスター頂ければ幸いです。実はしばらくBacklogを使用しておらず、多くの方に使用していただいているという責任感で維持している状態です。反響があると、維持するモチベーションに繋がります。

よろしくお願いいたします。

https://github.com/bicstone/ra-language-japanese
異文化・フランスと日本１：寝るのこと

睡眠に関する記事（論文？）を読みました。日本とフランスの異文化について話したいと思います。（私は日本語の勉強中です）
面白いと思いました！

睡眠時間：
日本人なら７時間ぐらいが必要と言われます。フランスで寝る時間は8−9時間です。実は７時間は最短時間です。７時間以内は危ないと言われています。

昼寝の時間：
15-25分です。
睡眠サイクルの勉強についてはそれは一番いい時間です。
深い眠りに入る前に起きることです。浅い眠りです。
また,　コーヒーの成分はパワーナップの質を向上させます。
夜ご飯：
日本では夕飯をたくさん食べます。
つまり昼ごはんと同じ感じと言われました。
フランスで、夕飯は少しにすることです。
こんな言葉があります："Manger comme un roi le matin, comme un prince le midi, et comme un pauvre le soir" : 朝は王様のように食べて、昼は王子のように、夜は貧しい人のように食べる。
理由は寝る前に運動ができないから、たくさん食べると太ってしまうからです。

面白いですね！どうと思いますか？
detached HEADとは？？

## 初めに
git rebaseをした時に、git branchコマンドで自分の今いるブランチを確認すると　detached HEADと表示されている時ありますよね。そのdetached HEADとは何かについてまとめてみました。

## detached HEADとは
HEADがcommit IDを直接指し示している状態のことです。

そもそもgitのブランチとは、コミットを指す軽量なポインタに過ぎません。

コミットとコミットの間はどうなっているのかというと、コミットがコミットを指すことによって、結び付けられています。

なので、detached HEADは、過去のコミットIDを直接指定して、checkoutすると生じます。

解決策

```
git branch <ブランチ名>
```

を実行することで、ブランチの先頭にあるcommit IDをすれば直すことができます。

## 最後に
gitのブランチについての理解が足りてませんでした。ブランチってコミットを指してたんですね。勉強になりました。
iOSアプリケーションのペイウォール配置に関する考察


最近、東京でRevenueCatのShip-a-tonハッカソンに参加しました。このハッカソンの主な目標の一つは、アプリのどこかにRevenueCatのサブスクリプションペイウォールを実装することでした。様々なアプリケーションがこのペイウォールを異なる場所に配置しているため、私たちのチームは、アプリケーションのどこに配置するかという課題に直面しました。

私たちのアプリケーションは、AI駆動の東京アートギャラリーツアーガイドです。このアプリは、ユーザーの選択を利用して、カスタマイズされた展示説明とルートを含む個別のアートギャラリーツアーを作成します。

アプリケーションの基本的な流れは以下の通りです：
まず、ユーザーの現在の気分を評価するために、複数の画面でユーザーを迎えます。音、質感、色の選択肢を提供します。
これらの選択を行った後、ユーザーには東京のエリアを選択できるマップ画面が表示されます。その追加の選択を行った後、アプリのバックエンドは、ユーザーの選択とデータベースにある基本的な展示説明を使用して、定義されたエリア内の各ギャラリー展示のためのカスタムAI説明を生成します。AIはまた、各展示の関連性スコアを作成します。ユーザーの選択に関連しない展示はマップに追加されません。

このデータが処理されると、関連する各ギャラリーにクリッカブルなマップポイントを持つルートが表示されます。ユーザーはマップポイントをクリックして展示情報を表示したり、ルートコースを変更したりすることができます。

この流れを使用すると、ペイウォールに適した場所がいくつかあるように思われます。それらは：

1. ユーザーがカスタマイズの選択を始める前の最初の段階。

2. バックエンドが選択に基づいて新しいデータを生成している間。

3. カスタマイズされたデータが返された後の他の場所。

私たちのプロジェクトでは、サブスクリプションペイウォールを追加する最適な場所は#3、具体的にはユーザーがルートを編集したい時だと決定しました。この考えの背景には、ユーザーがAIで生成されたコンテンツを見て、アプリケーションと十分に対話できれば、アプリがもたらす価値を理解し、ペイウォールを通過する意欲を持つだろうということがあります。

現在、アプリケーションは初期バージョンですが、将来の開発に向けて多くのアイデアがあります。ペイウォールが少し遅い段階（AIのAPI呼び出しの後でさえ）に来るように見えるかもしれませんが、ユーザーの信頼と興味を獲得するために適切な場所だと考えています。

次のステップには、アプリケーションの新しいフェーズの構築と、ペイウォールのパフォーマンスを確認するためのユーザーインタラクションテストが含まれます。近い将来、結果についてさらに詳しく書きたいと思います！
paizaラーニング問題集「最安値を達成するには2」を解いてみた

https://paiza.jp/works/mondai/dp_primer/dp_primer_apples_step1

▼感想：

りんごn個をセット単独購入する場合の最安値と、
りんごn個をセット組合せ購入する場合の最安値を計算し、
両者を比較して安いほうを最終的な最安値とします。

セット単独購入
　- りんご2個a円セットのみ購入
　- りんご5個b円セットのみ購入

セット組合せ購入
　- りんご2個a円セットとりんご5個b円セットを組合せて購入

▼コード：
```py
########## 処理0(準備) インプット,リスト定義など ###########

import math

n,a,b = map(int,input().split())

dp = [0]*(1000+1)

########## 処理1 漸化式の定義、計算、出力 ##########

dp[0] = 0
dp[1] = 0

# apx_cost: セット単独購入、セット組合せ購入の金額のうち最安値になりうる候補の金額を格納するリスト
apx_cost = []

for i in range(2,n+1):

    ########## 処理1.1 セット単独購入の金額のうち、最安値を計算する ##########

    # ap2_num,ap5_num: りんご2個a円セット、りんご5個b円セットの購入数を格納する変数
    # ap25_cost: セット単独購入の金額のうち最安値を格納する変数
    ap2_num = math.ceil(i/2)
    ap5_num = math.ceil(i/5)
    ap25_cost = min(ap2_num*a,ap5_num*b)
    apx_cost.append(ap25_cost)

    ########## 処理1.2 セット組合せ購入の金額のうち、最安値になりうる候補の金額を計算する ##########
    
    for j in range(1,ap2_num+1):
        for k in range(1,ap5_num+1):
        
            # セット組合せのりんごの数がn個以上になった
            if j*2 + k*5 >= n:
            
                # ap25set_cost: セット組合せ購入の金額を格納する変数
                ap25set_cost = j*a + k*b

                # セット組合せ購入の金額が、セット単独購入の金額より安いならば
                if ap25set_cost < ap25_cost:
                    apx_cost.append(ap25set_cost)

    ########## 処理1.3 セット単独購入、セット組合せ購入の金額のうち最安値を計算する ##########
    
    dp[i] = min(apx_cost)
    apx_cost.clear()

print(dp[n])
```

▼その他：
コードを書き終わった後に気づきましたが、
漸化式になっていないですかね...
dp[n]をdp[n-1]を用いて計算していませんでした。
確認したいと思います。
paizaラーニング問題集「最安値を達成するには1」を解いてみた

https://paiza.jp/works/mondai/dp_primer/dp_primer_apples_step0

▼感想：

本問を基礎として、次以降の問題を解くことができればと思います。

▼コード：
```py
########## 処理0(準備) インプット,リスト定義など ###########

n,a,b = map(int,input().split())

dp = [0]*(1000+1)

########## 処理1 漸化式の定義、計算、出力 ##########

dp[0] = 0
dp[1] = a

for i in range(2,n+1):
    dp[i] = min(dp[i-1]+a,dp[i-2]+b)

print(dp[n])
```
ログイン情報って何故保持し続けられるのだろう？？

# はじめに
普段SNSや決済アプリ等を使用している時に、不意に再度ログインを求められる事ありませんか？
私はそんな時いつも「ログインするの面倒だな〜」「ずっとログイン状態で良いのに」と思っています。
そもそもどうやってログイン状態を保持しているのかをきちんと理解出来ていなかったので、そちらについて今回調査してみました！
間違いなどあれば忌憚なくご意見いただきたいです！

# ログイン状態を保持される仕組み
調べていると主に2つの認証方法がありました。
**セッション認証**と**トークン認証**という2つのやり方がありました。
これからそれら2つについて詳しく説明させていただきます！

## 1. セッション認証
セッション認証とは、ユーザーが一度ログインすると、そのログイン状態を**サーバー側**で保持し、一定期間その状態を維持する仕組みの事です。

### 処理の流れ
**1.ログイン時にセッションIDを発行**
ユーザーがログインをする際に、サーバーはユーザーに一意のセッションIDを作成します。
作成されたセッションIDはサーバー側に保存され、ユーザーのログイン状態やユーザー情報の追跡に使用します。

**2.クライアント側にセッションIDを保持**
作成されたセッションIDは、cookieとしてユーザーのブラウザに保存されます。
セッションIDには直接的なユーザー情報やログイン情報は含まれてません。

**3.次回のリクエストでセッションIDを送信**
ユーザーがアプリを開いたり、別ページに遷移する際のリクエストにセッションIDを含めます。
これによりサーバーはセッションIDを受け取り、ユーザー情報をユーザーにレスポンスします。

**4.セッションの維持**
これらのセッションIDが有効な間は、ユーザーログイン状態は保持され続けます。

## 2. トークン認証
トークン認証とは、ユーザーの認証情報をトークンとして管理する仕組みのことです。
REST APIやモバイルアプリで特に使用される認証方式です。

### 処理の流れ
**1.ログイン時にアクセストークンの発行**
ユーザーがログインすると、サーバーはそのユーザーに対してアクセストークンを発行します。
このアクセストークンは、ユーザーが認証済みであることを証明する一時的な鍵のようなものです。

**2.アクセストークンの保存**
アクセストークンはクライアント側（ブラウザやモバイルアプリ）に保存されます。
通常、トークンはローカルストレージ、またはセキュアストレージに保存されます。

**3.リクエスト時にトークンを送信**
ユーザーがサーバーにアクセスするたび、クライアントはこのアクセストークンをサーバーに送信します。サーバー側でそのトークンが有効であれば、ユーザーのリクエストを処理します。

**4.トークンの期限切れとリフレッシュトークン**
アクセストークンは通常短い有効期限を持っており、一定期間が経過すると期限が切れます。
しかし、ユーザーに再度ログインを要求しないために、リフレッシュトークンが併用されます。
リフレッシュトークンはアクセストークンよりも長い有効期限を持ち、アクセストークンの期限が切れた際に、サーバーに新しいアクセストークンを発行してもらうために使用します。

## 3.　セッション認証とトークン認証の違い
ここまで話を聞いていると「あれ？セッション認証とトークン認証ってやってること一緒じゃない？」という疑問を抱く方が出てくると思います。
2つの大きな違いとしましては、ユーザー情報の紐付けが行われているかです。

まず、セッションIDは、ユーザー情報と紐付けが行われています。
その為、紐付けされているユーザー情報を基に、そのユーザーがアクセス可能なリソースなのか判断を行っています。
つまり、**サーバーでユーザー情報を保持する必要がある**ということです。

一方で、アクセストークンは、ユーザー情報と紐付けが行われていません。
サーバーでは「～～というトークンなら、～～というリソースにアクセス可能」ということを事前に決めており、届いたアクセストークンを基に判断しているだけです。
つまり、**サーバーでユーザー情報を保持する必要がない**ということです。

# まとめ
セッション認証はステートフルな通信であり、トークン認証はステートレスな通信である。

セッション認証では、サーバーにセッションIDとユーザー情報を持たせておく必要があります。
その為、ユーザー数が増加することでサーバーの負荷が増加します。
一方で、トークン認証はトークンによる認証のみを行うので、サーバーにセッション認証のように情報を持つ必要がありません。
その為、ユーザー数が増加した際もサーバーの負荷が少なく済みます。
HTMLファイルのJavaScriptを外部ファイルに切り分ける方法

## アジェンダ
Web開発では、コードの管理や読みやすさを向上させるために、HTMLファイル内に書かれているJavaScriptコードを外部ファイルに切り分けることが推奨されています。この記事では、HTML内の`script`タグに直接書かれたJavaScriptを、外部ファイルとして切り分ける方法を簡単に解説します。

## インラインJavaScriptの問題点

例えば、以下のようにHTML内に直接JavaScriptコードが書かれているとします。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <button id="btn">クリックしてね</button>

    <script>
      document.getElementById('btn').addEventListener('click', function() {
        alert('ボタンがクリックされました');
      });
    </script>
  </body>
</html>
```

このコードは動作しますが、JavaScriptがHTMLファイルに直接書かれているため、可読性やメンテナンス性が低くなります。

## 外部ファイルを利用するメリット

- **可読性の向上**: HTMLとJavaScriptが分離されることで、コードの構造がよりシンプルで理解しやすくなります。
- **メンテナンス性の向上**: 複数のHTMLファイルで同じJavaScriptを使いたい場合、外部ファイルを参照するだけで済むため、コードの再利用が容易になります。
- **パフォーマンスの向上**: 外部JavaScriptファイルはキャッシュされるため、ページの読み込み速度が向上することがあります。

## 手順
### 1. 外部JavaScriptファイルを作成

まず、JavaScriptコードを外部ファイルに移すために、新しいJavaScriptファイルを作成します。ファイル名は`script.js`にしましょう。このファイルに以下のコードを記述します。

```js:script.js
document.getElementById('btn').addEventListener('click', function() {
  alert('ボタンがクリックされました');
});
```

### 2. HTMLファイルで外部ファイルを読み込む

次に、HTMLファイル内の`script`タグを修正して、外部のJavaScriptファイルを読み込むようにします。先ほどのインラインコードを削除し、`<script>`タグで`script.js`を参照します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <button id="btn">クリックしてね</button>

    <script src="./script.js"></script>
  </body>
</html>
```

### 3. `type="module"` を利用した外部JavaScriptの読み込み

モジュールを使用することで、JavaScriptファイル内でのスコープが制限され、グローバル変数の衝突を避けることができます。`type="module"` を使った外部JavaScriptファイルの読み込みは以下のようになります。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>ようこそ！</h1>
    <button id="btn">クリックしてね</button>

    <script src="./script.js" type="module"></script>
  </body>
</html>
```

このように `type="module"` を指定することで、以下のようなメリットがあります。

#### モジュールのメリット

- **スコープの分離**: モジュール内の変数や関数は、グローバルスコープに影響を与えません。これにより、他のスクリプトやモジュールとの名前の衝突を防ぎます。
- **トップレベルの`import`や`export`が利用可能**: モジュールファイルは他のモジュールをインポートすることができ、コードの再利用や構造化がしやすくなります。
- **遅延読み込み**: `type="module"` を使用すると、JavaScriptはデフォルトで「遅延読み込み」（defer）されます。これは、HTMLの解析が終わった後にスクリプトが実行されるため、ページのレンダリングが遅延しないというメリットがあります。

#### モジュールを使用したコード例

`script.js` ファイル内で、変数や関数をモジュールとして定義し、他のモジュールでそれらをインポートすることができます。

```js
// script.js
export function showMessage() {
  alert('ボタンがクリックされました');
}

document.getElementById('btn').addEventListener('click', showMessage);
```

上記のコードでは、`showMessage` 関数をエクスポートしています。これにより、他のJavaScriptモジュールからこの関数をインポートして利用することができます。

このように、`type="module"` を利用することで、JavaScriptのモダンな機能を活用しながら、より整理されたコード構造を持つことができます。

## まとめ

HTMLファイル内に直接書かれているJavaScriptコードは、外部ファイルに分割することで、管理やメンテナンスが容易になります。外部ファイルを使うことで、より整理されたコードを作成できるため、プロジェクトが大規模になった場合でも効率的に開発を進めることができます。
SQLite3覚書

# 概要
普段MySQL系ばかり触っています。それでも時々業務上でSQLiteを触ることになります。
そうすると、何が起こるかというと、

SQLite触ることになる→コマンド検索→慣れる→忘れる→SQLite触ることになる...

の無限ループです。
このループを断ち切るために自分がよく使うコマンドをまとめることにしました。

詳細は公式を見てください。https://www.sqlite.org/cli.html

# 前提
- 存在してるDBに対して操作を行う
- sqlite3がインストールされている

# コマンド
## DB接続
`sqlite3 {DBファイル名}`で接続します。接続できると`sqlite>`という表示が出ます。
```
$ sqlite3 ./test.db # 例
sqlite>
```

## テーブル確認
```
sqlite> .table
```

## テーブルスキーマ確認
`.schema {テーブル名}`でテーブルの作成情報を見ることができます。
```
sqlite> .schema users # 例
```
## インデックス名確認
```
sqlite> .indexes
```
または
```
sqlite> .indexes {テーブル名}
```
## 設定確認
```
sqlite> .show
# 実行結果
        echo: off
         eqp: off
     explain: auto
     headers: off
        mode: list
   nullvalue: ""
      output: stdout
colseparator: "|"
rowseparator: "\n"
       stats: off
       width: 
    filename: test.db
```
## 設定変更
### ヘッダ表示/非表示

```
sqlite> .headers on # 表示

sqlite> SELECT id, first_name, last_name FROM users;
id|first_name|last_name  # ←ヘッダが表示される
1|taro|yamada
2|hanako|tanaka
3|ichiro|suzuki

sqlite> .headers off # 非表示

sqlite> SELECT id, first_name, last_name FROM users;
1|taro|yamada      # ←ヘッダが表示されない
2|hanako|tanaka
3|ichiro|suzuki
```
### 出力モード変更
`.mode {モード}`で設定できます。columnくらいしか使用していませんでしたが、実はたくさんあるようです。
`ascii`,`box`,`csv`,`column`,`html`,`insert`,`json`,`line`,`list`(default),`markdown`,`quote`,`table`,`tabs`,`tcl`
#### columnモード
```
sqlite> .mode column
sqlite> SELECT id, first_name, last_name FROM users;
id  first_name  last_name
--  ----------  ---------
1   taro        yamada   
2   hanako      tanaka   
2   ichiro      suzuki   
```
#### jsonモード
```
sqlite> .mode json
sqlite> SELECT id, first_name, last_name FROM users;[{"id":"1","first_name":"taro","last_name":"yamada"},
{"id":"2","first_name":"hanako","last_name":"tanaka"},
{"id":"3","first_name":"ichiro","last_name":"suzuki"}]
```
#### markdownモード

```
sqlite> .mode markdown
sqlite> SELECT id, first_name, last_name FROM users;
| id | first_name | last_name |
|----|------------|-----------|
| 1  | taro       | yamada    |
| 2  | hanako     | tanaka    |
| 3  | ichiro     | suzuki    |
```

## ヘルプ表示
```
sqlite> .help
```
## DB切断
```
sqlite> .quit
```
または
```
sqlite> .exit
```

# おまけ
クエリ実行計画の確認する際、MySQLの場合は`EXPLAIN`をつけますが、SQLiteの場合は`EXPLAIN QUERY PLAN`を使用します。

# 最後に
公式ドキュメントやヘルプを見るともっといろいろできるんだろうとは思いますが、ひとまず自分がよく探すやつだけ記載してみました。
また使うことがあれば追記や別記事で書きたいと思います。
[Kotlin]「Pixel 6 API 34 is already running. If that is not the case, delete ~~~~.lock and try again.」が出た時の解決法。[初心者]

<h2>はじめに</h2>

こんにちは、mAgmAです。

Kotlinでタイマーを複数作動できてバックグラウンドで作動できるAndroidアプリを作っている最中ですが、絶賛つまづき中です（笑）
初めて触っていることもあってわからないことだらけですが、ひとつひとつ解決していきたいです！

さて本題ですが、エラーの解決法がわからないものがあったので、どうやって解決したか紹介していきたいと思います。

<h2>どんなエラー？</h2>

今回のエラーはAndroid Studioで仮想デバイス上にアプリを作動させたときに出たエラーになります。<br>

※~~~~部分はパス名になります。

```kotlin:ActivityMain.kt
Pixel 6 API 34 is already running.
If that is not the case, delete ~~~~.lock and try again.
```

<h2>解決法</h2>

2行目に書いてある通り、.lockと名のついたフォルダを削除しました。

<h2>終わりに</h2>

　新しい言語を始めると、必ず環境構築の段階でエラーがたくさん出てきます。
これらのエラーはプログラムを書く段階の前なので、もうめっちゃ萎えます。
これらのエラーを直して快適なプログラミングライフを過ごしましょう！

では！
PHP8.1 Enums 導入

PHP8.1のEnum導入方法を学習の為、アウトプットします
# 導入の経緯
今までプロジェクトではBenSampo/laravel-enumを使用してましたが、PHP8.1でEnumsが実装され、BenSampo/laravel-enumのリポジトリで

:::note info
「Using this library is no longer recommended, especially for new projects. PHP 8.1 supports enums natively.」
このライブラリの使用は、特に新しいプロジェクトでは推奨されなくなりました。PHP 8.1 は enum をネイティブにサポートします。
:::
と書かれていた為、PHP8.1のEnumsを導入することにしました
# 導入方法
enum と宣言して列挙型を宣言する
case を使って列挙する
~~~Fruit.php
<?php 

declare(strict_types=1);

enum SportsType: string
{
    case APPLE = 'apple';
    case ORANGE = 'orange';
    case LEMON = 'lemon';

    /**
     * @return string
     */
    public function description(): string
    {
        return match($this) {
            self::APPLE => '林檎',
            self::ORANGE => '蜜柑',
            self::LEMON => '檸檬',
        };
    }
}
~~~
# enums.phpを使用して日本語定義を行う方法
BenSampo/laravel-enumを使用していた時はlang/ja/enums.phpで日本語定義をしてました。
PHP8.1のEnumで日本語定義を行うために、今回はTrait/EnumDescription.phpを作成しました。
~~~EnumDescription.php
<?php

declare(strict_types=1);

trait EnumDescription
{
    public function description(): string
    {
        return __(sprintf('enums.%s.%s', self::class, $this->name));
    }
}
~~~
- `__(...)`: Laravelの翻訳関数です。ここでは、言語ファイルから文字列を取得するために使われます。
- `self::class`: 呼び出されたEnumのクラス名（例: `Enums/Fruit.php`）
- `$this->name`: Enumのケース名（例: `APPLE` や `ORANGE`）。
- `sprintf('enums.%s.%s', self::class, $this->name)` で、`'enums.Enums/Fruit.php.APPLE'` のようなキーを作成し、それに基づいて翻訳を取得します。
~~~Fruit.php
<?php 

use App\Trait\EnumDescription;

enum Fruit: string
{
    use EnumDescription;
    
    case APPLE = 'apple';
    case ORANGE = 'orange';
    case LEMON = 'lemon';
}
~~~
~~~enums.php
<?php

return [
    Enums\Fruit::class => [
        'APPLE' => '林檎',
        'ORANGE' => '蜜柑',
        'LEMON' => '檸檬',
    ],
];
~~~
# 使い方
Fruit::APPLE->description()で呼び出すと、林檎が出力されます。
Modelでcastをすると、$this->fruit->description()でも保存されている値に紐づく日本語が表示されます。
# まとめ
今回はEnumの記事を書きました。
EnumについてはPHP8.1から追加されているのをキャッチアップできておらず、知識の定着も兼ねてアウトプットすることにしました。
まだまだPHPにしても、Laravelにしても最新バージョンの機能を把握しきれていないので少なくとも自分が使う機能については把握したいと思います。
基本的なリモートサーバーとローカルサーバー

## アジェンダ
基本的なリモートサーバーとローカルサーバーの違いを簡単にまとめます。

## 1. **リモートサーバー (Remote Server)**

リモートサーバーは、物理的に自分がアクセスできる場所にない、遠隔地にあるサーバーです。通常はインターネットを通じてアクセスします。たとえば、AWSやGoogle Cloud、Herokuなどのクラウドサービスでホスティングされているサーバーがリモートサーバーに該当します。リモートサーバーは、次のような場合によく利用されます：

- ウェブサイトやアプリケーションを公開する。
- データベースやファイルを管理する。
- クラウドベースのアプリケーションを提供する。

## 2. **ローカルサーバー (Local Server)**

ローカルサーバーは、自分のコンピュータ上で直接稼働しているサーバーのことです。自分のPCやローカルネットワーク内にあるサーバーは「ローカルサーバー」と呼ばれます。開発者がコードをテストする際に、アプリケーションをローカル環境で動かすためにローカルサーバーを使うことが一般的です。次のようなシーンで使用されます：

- 開発やテストのために使う。
- 小規模な内部ネットワークでファイルやデータベースを共有する。

## 具体例

- **リモートサーバー**: 本番環境のウェブアプリをAWS EC2にデプロイして運用する。
- **ローカルサーバー**: 自分のPCでローカルに`localhost:3000`でアプリケーションを実行してテストする。

ローカルで動作を確認した後、リモートサーバーにデプロイして公開する、という流れが一般的です。