OmniAICreator/Qiita-1.07M huggingface dataset:
【AWS】Amplifyのクイックスタートガイドやってみた

業務でさくっとバックエンド機能（認証、データベース、Lambda、API）を構築する必要があり、AWS Amplifyを使うのが良さそう。ということで、まずはスタートガイドで触ってみました。

https://docs.amplify.aws/angular/start/quickstart/

その時のメモをここに残しておこうと思います。

## GitHubにリポジトリを作成
いろいろなフロントエンドフレームワークのスターターテンプレートが用意されており、その中から今回は「Angular」を選択しました。

https://github.com/aws-samples/amplify-angular-template

## Amplifyへデプロイ
早速、デプロイを行います。

![スクリーンショット 2024-06-23 11.13.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733390/a66d4ee4-2924-e601-92ac-e94f86d794ac.png)

GitHubリポジトリと連携することで、簡単にデプロイができます。便利。

今回はデフォルト設定でデプロイしました。
GitHubとの連携も自動で行ってくれるので、ローカルで修正し、pushするだけで自動で再ビルドされるのは楽ちんでいいですね。

ただ、デプロイに意外と時間がかかるなーという印象（約6分ほど）。

デプロイが正常に完了すると、Amplifyコンソールの画面は下記のようになります。
![スクリーンショット 2024-06-23 11.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733390/57becca3-df1d-b003-3dfc-258a653a506b.png)

デプロイしたサイトへアクセスしてみると、下記サンプルtodosアプリが表示できます。
![スクリーンショット 2024-06-23 11.58.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733390/be00eb7e-79c4-f2e2-f228-6cd1ceddae10.png)

### デプロイ失敗
デプロイ時にちょっとつまづいた点を共有します。

#### 【エラ−①】Node.jsのバージョンが古い
初回のデプロイ時にデプロイが失敗。

![スクリーンショット 2024-06-23 11.36.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733390/c1be42ab-4c52-ded4-1a7b-092dea0cb254.png)

デプロイログを見ると、下記メッセージが。
```
2024-06-23T02:33:05.418Z [WARNING]: Node.js version v18.18.2 detected.

The Angular CLI requires a minimum Node.js version of v18.19.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.
```
Amplifyのビルドイメージはデフォルトの「Amazon Linux 2023」を使ったのですが、ここにインストールされているNode.jsのバージョンが古いとのこと。

なので、「ホスティング > ビルドの設定 > ライブパッケージの更新」から、今回必要なNode.jsのバージョン パッケージを追加することで解決できました。

![スクリーンショット 2024-06-23 11.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3733390/0af0b567-b33a-8265-0752-0844710e92b0.png)

#### 【エラ−②】Angularのバンドルサイズのバジェット超過
クイックスタートガイドを進めていくと、その中で認証機能の実装を行うのですが、その実装が終わった後に、二度目のデプロイを行った際にエラーが。

```
bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 19.21 kB with a total of 1.02 MB.
```
これはAmplify関係ないのですが、`angular.json`で指定しているバンドルのバジェットサイズを超えたためエラーとなりました。

なので、`angular.json`を下記のようにバンドルサイズを上げるよう修正し、GitHubへpushするとデプロイが正常に完了しました。

```diff:angular.json
"production": {
  "budgets": [
    {
      "type": "initial",
-     "maximumWarning": "500kb",
+     "maximumWarning": "2mb",
-     "maximumError": "1mb"
+     "maximumError": "3mb"
    },
    {
      "type": "anyComponentStyle",
      "maximumWarning": "2kb",
      "maximumError": "4kb"
    }
  ],
  "outputHashing": "all"
},
```


## ローカル環境の設定
### `amplify_outputs.json`のダウンロード
`amplify_outputs.json`ファイルには、バックエンドのエンドポイント情報、公開可能なAPIキー、認証フロー情報などが含まれています。

Amplifyクライアントライブラリは、このoutputsファイルを使用してAmplifyバックエンドに接続します。

ここらへんの設定も、`amplify_outputs.json`ファイルで行えるので楽でいいですね。

## 最後に
一通り、AWS Amplifyのクイックスタートガイドをやってみましたが、さくっとバックエンドを構築したい場合に、とても便利なサービスであることがわかりました。

まだ、細かいところまで追えてませんが、ざっと全体感をつかめました。

今後、詳細についても、少しずつキャッチアップしていこうと思います。
EC2へのSSHが切れるのはメモリ不足かもしれない

### 起きたこと
EC2にSSHして作業していたら、急に応答が来なくなり、SSHが繋がらなくなった。
インスタンスを再起動するとまた接続できるようになるものの、しばらくするとやっぱり落ちる。
こんなことが頻発していて困っていたので原因を調べた。

### 原因と対応
LinuxではOOM Killerというのがメモリ不足になった際にプロセスをkillしてメモリを解放しようとするらしく、それで重要なプロセスが殺されていたという結論に至った。

対策として
- スワップ領域を確保した
- VSCodeのgit監視を止めた

以上をしたらSSH接続が切れることは無くなった。
EC2を無料枠で利用していたりすると特にメモリ不足が起きやすいと思うので、EC2の応答が急になくなる場合はこれを疑うのがよさそうです。
セットアップや規則を明確にする第二のReadme、「Developers.md」を書いてみた。

# 読み飛ばしてください
おはようございます、しなもんです。

OSS開発をたくさんやる中で、明確にしときたい規則ってありますよね。
コミットメッセージやコーディングルールなどです。
他にも、新しい開発者のためにセットアップの方法なども書いてあるべきです。

そんなところで、先日とあるOSSであるものを見かけました。「DEVELOPERS.md」です。
つまり「開発者向け情報」が書かれたmdファイルです。

これを読んでいるとファイルの必要性をかなり感じたので、
分析しつつ自分なりに書いてみて、あわよくば普及していければと思います。

# とりあえず分析してみた
今回参考にしてみるファイル

https://github.com/angular/angular.js/blob/master/DEVELOPERS.md

Angularとは、Google主導で開発がされているOSSなJavascriptフレームワークです。

さっそく読んでみます。

## 1. 目次
目次が記述されています。リンクが付いていて飛びやすくなっています。助かります。
> ・Development Setup
・Running Tests
・Coding Rules
・Commit Message Guidelines
・Writing Documentation

## 2. Development Setup
開発セットアップについて記述されています。
`git`,`node`,`yarn`,`grunt`といった様々な方法で開発環境をセットアップする方法について説明しています。
依存関係のインストール、リポジトリのフォーク、ビルド、開発サーバーの実行について書いています。

## 3. Running Tests
テスト方法が記述されています。
コンソールをポチポチするだけでテストが回るようにたくさん書いてくれています。

## 4. Coding Rules
まず、階層についてや文字数、テストの規則について記述されています。
一般ルールとGoogleのJavaScriptスタイルガイドのルール（例外あり）の二つから構成されています。
> ・コードは1行100文字を超えないようにする
・すべての機能やバグ修正は、1つ以上のテスト（specs）を使ってテストする必要がある

などがあります。

## 5. Git Commit Guidelines
Gitのコミットメッセージのフォーマットに関するガイドラインを説明しています。
プロジェクトの履歴を見やすくし、変更ログを生成するためにいろいろ書いています。

コミットの種類についての明確化や、サブジェクトについての説明があります。
>・命令形、現在形を使用する（例："change"）
・最初の文字を大文字にしない
・最後にドット（.）をつけない

この辺は私もよく迷うというか多分混ざってしまっているので、明確になっていると助かります。

## 6. Writing Documentation
AngularJSプロジェクトで使用されているjsdocの概要について説明されています。
ブロックタグの紹介や独自のタグ、一般的なマークダウンの規則などがあります。
jsdocというのは、VSCodeとかで便利な奴です。

## 調査まとめ
開発者がプロジェクトに貢献するまでの流れに必要なことがたくさん書いてあるという印象です。
こういうのがあると、新規開発者が増えそうですし、書いている自らもルールが分かりやすくなってコードを書きやすくなる気がします。

では私も書いてみます。

# 実際に書いてみる
調査したファイルを踏襲して書いてみます。
## 1. 目次
目次を書きます。
以下のようにすると見出しに飛べるようになります。
```html
* [見出し](#見出し名)

## <a name="見出し名"> 見出し
```
## 2. Development Setup
今回書いているのはDockerで簡単に起動できるものなので、適当にその旨を記述します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/84ce5ed6-768a-a72d-5050-718054badd15.png)

0から起動するところまでを書いていきます。

## 3. Running Tests
テストの項目は省略します。
（テストする規則が整っていなかったので）

## 4. Coding Rules
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/9ed1e0e0-b737-b21d-32e3-7e363377288a.png)
規則を書きました。
pep8を引用することで規約を明確にしています。

## 5. Git Commit Guidelines
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927831/4d4be6bf-609c-1202-6183-93ce113e16c1.png)
angular.js/DEVELOPERS.mdを参考に書いてみました。

## 6. Writing Documentation
ほとんどをCoding Rulesに記述してしまったので省略します。

# まとめ
Developers.mdを書きました。
開発者にやさしいリポジトリっていいですよね。多分。
OSSでたまに見かけるガイドラインですが、さらに普及すればいいなと思いました。

ちなみに、今回書いたものはここにあります

https://github.com/GenshinStatus/Genshin-Discordbot/blob/master/Developers.md

是非参考にして書いてみてください...！

# 参考
https://github.com/angular/angular.js/blob/master/DEVELOPERS.md

https://zenn.dev/kumamoto/scraps/4d36c9029c6172

https://qiita.com/tadnakam/items/5d1280559eb75b29847c

https://pep8-ja.readthedocs.io/ja/latest/
CAELinux2020をwindows11にインストールをする

2021年11月にWindows11をリリースされました。最近、 Windows11対応のパソコンを買いましたので、 VirtualBox6.1.30を用いてCAELinux2020の環境設定をし、Windows11でも同様の動作ができていました。  
  
パソコンは、ゲーミングノートパソコンです。スペックを参考として記載します。

- OS:windows11 home
- CPU:第11世代iCore7
- メモリ：16GB
- SSD:512GB
- GPU:GeForceRTX3050(VRAM4GB) /CPU内蔵  
    

## １．環境構築

### １．１　VirtualBoxのインストール

(1)Oracleのホームページから VirtualBox6.1.30をダウンロードします。  
　URL:[https://www.virtualbox.org/wiki/Downloads](https://www.virtualbox.org/wiki/Downloads)  
(2)VirtualBoxを画面の指示をしたがってインストールします。  
　英語で問い合わせが出てきますが、"Next"、"続ける"で進めてしまいます。

## １．２　VirtualBoxへのCAELinux2020Liteのインストール

当サイトの記事と同様の操作で環境を構築します。(リンクは[こちら](h）  
ディプレイ設定のGraphics Controllerは、バージョンの変更によりVMSVGAが動くかと思いましたがSalomeMecaを使用すると操作中に異常終了が頻発するため、VBoxVGAでしか動作しませんでした。
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/f510763d-a580-c5f0-bc63-2aef6f61b693.png)


## ２．テスト動作

CAELinux内にあるSalomeMeca2019が動作するか確認をしました。  
OpenCAE勉強会でトレーニングを受けた丸棒の引張りを解析したデータを使用しました。

(1)CAELinux起動時の画面

![2021-11-26-31-1-1024x576.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/b35f8eb3-3175-2c05-decd-7c2c1947ff51.png)

(1) Asterの画面

![2021-11-26-32-1024x576.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/e8b0bab3-dc3c-b4cf-753c-a97a7d6031da.png)


(2)解析後の変形画面  
引っ張りにより棒に絞りが発生してるのがわかります。

![hippari.0044.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/95365be5-51bb-b997-14cc-12e7251747a2.png)
ctrl + r で検索しやすいようにpecoの導入

# pecoのインストールと設定手順

1. `/tmp`ディレクトリに移動します。
    ```sh
    cd /tmp
    ```

2. pecoのバイナリをダウンロードします。
    ```sh
    wget https://github.com/peco/peco/releases/download/v0.5.3/peco_linux_amd64.tar.gz
    ```

3. ダウンロードしたアーカイブを解凍します。
    ```sh
    tar -zxvf peco_linux_amd64.tar.gz
    ```

4. 解凍したディレクトリに移動します。
    ```sh
    cd peco_linux_amd64/
    ```

5. `peco`バイナリをシステムの`/usr/local/bin`ディレクトリにコピーします。
    ```sh
    sudo cp peco /usr/local/bin/
    ```

6. `~/.bashrc`ファイルを編集します。
    ```sh
    vi ~/.bashrc
    ```

7. 以下の内容をファイルの一番下に追加します。
    ```sh
    peco-select-history() {
        declare l=$(HISTTIMEFORMAT= history | \
                    sort -k1,1nr | \
                    perl -ne 'BEGIN { my @lines = (); } s/^\s*\d+\s*//; $in=$_;
                            if (!(grep {$in eq $_} @lines)) { push(@lines, $in); print $in; }' |\
                    peco --query "$READLINE_LINE")
        READLINE_LINE="$l"
        READLINE_POINT=${#l}
    }
    bind -x '"\C-r": peco-select-history'
    ```

8. `~/.bashrc`を再読み込みして変更を反映させます。
    ```sh
    source ~/.bashrc
    ```

9. `Ctrl + r`を押して、pecoが起動しコマンド履歴が表示されるか確認します。

![スクリーンショット 2024-06-23 21.07.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542333/771ed2f1-e9e5-c013-0067-22cd26a64190.png)


以上の手順を実行すれば、Cloud9環境にpecoを導入し、`Ctrl + r`でコマンド履歴を検索できるようになります。
丸棒の伝熱解析

知り合いの技術士の方から、丸棒の伝熱解析と実験をして結果を比較したのでブログにしてほしいというリクエストがありましたので、いただいた資料から要点を作成しました。  
使用ソフト：Salome-Meca 2018 for Windows  

## １．解析概要

丸棒の下端をバーナーで加熱したときの丸棒任意位置の温度を推定します。  
棒は、アルミ、SUSの2種類の材料を使用しました。

## ２．解析モデル

![model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/dc2d3e16-1abd-2b61-e978-73241aca908e.png)



### ２．１　モデル寸法

φ4mm(0.004m) x 1m  
アルミ熱伝導率：237 W/m・K(AL1010)  
SUS熱伝導率：19W/m・K(SUS304)  
温度測定位置：熱源から0.1m位置

### ２．２　拘束条件

１）棒下端面 ：熱源  
　 温度は測定データを入力(詳細は上図）  
２）棒側面：熱伝達率　  
　1 W/m2・K、10W/m2・K  
　機械便覧のデータより自然対流を上下限を狙って入力しました。  
３）棒上端面：20℃（常温）  
　解析コマンドファイルは、提供いただいたものを使用し、モデルは別途作成しました。

## ３．解析結果

### ３．１　アルミ棒の解析結果

１）自然対流１W/m2・K　151.6℃、  
２）自然対流１0W/m2・K　126.4℃  
＜自然対流 １W/m2・K＞

![1mk1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/12f07d3d-8620-5ec3-2941-367fa7c3408c.png)

![1mk1kakudai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/e8e89792-3b37-1a53-f822-0afae34d27f9.png)


＜自然対流 １0W/m2・K＞

![2mk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/d6fc7d26-f198-d30c-0d11-b35b1b50c5b9.png)


＜自然対流１W/m2・K時の温度変化＞  
棒下端付近の温度が上昇していくのが見て取れます。

https://youtu.be/9OC1A33cpEs

### ３．２　SUS棒の解析結果

１）自然対流１W/m2・K　40.2℃、  
２）自然対流１0W/m2・K　26.3℃  
＜自然対流 １W/m2・K＞

![画像7](https://assets.st-note.com/production/uploads/images/37358697/picture_pc_93dafe916cb835afef43e53b04a8ec75.jpg)

＜自然対流 １0W/m2・K＞

![画像8](https://assets.st-note.com/production/uploads/images/37358713/picture_pc_f51c589819f3779671ec15aca3a2db42.jpg)

## ４．実測との比較

### ４．１　実測概要

![実験](https://assets.st-note.com/production/uploads/images/37294227/picture_pc_4a6739d3cd030420776c85cb6ee495bc.png?width=800)

上図に示す通り、丸棒をバーナーで加熱して、温度センサを配置して測定してます。機材は以下に示す通り、身近にあるものを使用しています。  
１）バーナー：家庭用コンロ  
２）丸棒：ホームセンターにて調達  
３）Thermometer：Amazonにて調達  
　　温度センサはK熱電対（-200～1372℃）を選定しました。

### ４．２　アルミ棒の測定結果

![comp2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/889b5386-6573-76fd-ce1f-4ec9256dab24.png)


アルミ棒の測定値（最高温度）：150.1℃  
測定値は、アルミ棒の熱伝達率が１W/m2・Kのとき解析結果と同レベルでした。

### **４．３　SUS棒の測定結果**


![comp1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782081/455a886c-e64f-acc1-eb35-1aa486a63881.png)


SUS棒の測定値（最高温度）：40.8℃  
測定値は、アルミ棒と同様に熱伝達率が１W/m2・Kのとき解析結果と同レベルでした。

## ５．まとめ

今回、伝熱解析を行った結果、適切な熱伝達率を設定することで、測定値を予測できることがわかりました。また、2種類の材料を用いても同様の傾向があるため、再現性はあるものと推定します。  
熱伝達率を文献で書かれている上下限での設定をすることで、任意位置での温度をある範囲で推定できると考えます。  
貴重な情報を提供いただきました技術士様にはこの場を持ちましてお礼申し上げます。ありがとうございました。

＜参考資料＞  
*.med：メッシュファイル、*comm：コマンドファイル  
代表でアルミ棒、熱伝達率1 W/m2・Kの条件を記載します
Kotlinで変数の範囲を強制する



# 実践
早速ですが実践です。



```
    var x = 2
    var y = 11    
    
    println(x.coerceIn(0, 10))   // 2
    println(y.coerceIn(0, 10))   // 10
```

**coerceIn**という関数の引数内で範囲を指定することで、その範囲を外れた場合 指定した範囲に矯正してくれるというものです。
coerceInを変換すると　 ”強制する”というそのまま出てきますので、わかりやすいです。
```
    var y = 11   
    var x = 2

    if(x < 0){
        x = 0
    } else if(x > 10 ){
        x = 10
    }

    if(y < 0){
        y = 0
    } else if(y > 10 ){
        y = 10
    }
    
    println(x.coerceIn(0, 10))
    println(y.coerceIn(0, 10))
```
　このように書いていたものが　かなり縮めて書くことができますね。


# 実践２
下限だけの範囲、上限だけの範囲を指定することもできます。

```
    var x = 2
    var y = 11
    var z = -1
    
    println(x.coerceAtLeast(0))   // 2
    println(y.coerceAtLeast(0))   // 11
    println(z.coerceAtLeast(0))   // 0
    
    println(x.coerceAtMost(10))   // 2
    println(y.coerceAtMost(10))   // 10
    println(z.coerceAtMost(10))   // -1
```

下限のみを指定する場合は　**coerceAtLeast**
上限のみを指定する場合は　**coerceAtMost**



 # 参考
 
 https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.ranges/coerce-in.html
LaravelとMySQLを使ってCRUDアプリケーションを作成

# はじめに
こんにちは、Webエンジニアの岩田史門([@SI_Monxy](https://x.com/SI_Monxy))です！
今回はLaravelとMySQLを使ったCRUDアプリケーションの作り方について記事を書いてみました！
改善点や修正点があれば、コメントにてやさしくご指導いただけると嬉しいです！

# 概要
この記事では、LaravelとMySQLを使用してCRUD（Create, Read, Update, Delete）機能を備えたウェブアプリケーションを構築する方法について説明します。LaravelはPHPで書かれた人気のあるフレームワークであり、MySQLは広く使用されているリレーショナルデータベース管理システムです。

# 環境の準備
まずはじめに、Laravelプロジェクトをセットアップし、MySQLデータベースに接続する必要があります。以下の手順に従って進めてください。

## Laravelプロジェクトの作成

``` bash
laravel new crud-app
cd crud-app
```
## MySQLデータベースの設定
.envファイルでMySQLの設定を行います。

``` env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password
```

## データベースマイグレーション
マイグレーションを使用してデータベーステーブルを作成します。

``` bash
php artisan migrate
```

# CRUD機能の実装
次に、CRUD機能を実装します。以下に各操作に対する基本的な手順とサンプルコードを示します。

## データの作成 (Create)
新しいデータを作成するためのフォームと処理を作成します。

### フォームの表示（resources/views/create.blade.php）

``` html
<form method="POST" action="{{ route('items.store') }}">
    @csrf
    <input type="text" name="name" placeholder="商品名">
    <button type="submit">作成</button>
</form>
```

### コントローラの処理（app/Http/Controllers/ItemController.php）

``` php
public function store(Request $request)
{
    Item::create([
        'name' => $request->input('name')
    ]);

    return redirect()->route('items.index');
}
```

## データの表示 (Read)
データを取得して表示する処理を実装します。

### ビュー（resources/views/index.blade.php）

``` html
@foreach ($items as $item)
    <p>{{ $item->name }}</p>
@endforeach
```

### コントローラの処理（app/Http/Controllers/ItemController.php）

``` php
public function index()
{
    $items = Item::all();
    return view('index', compact('items'));
}
```

## データの更新 (Update)
既存のデータを更新するためのフォームと処理を作成します。

### フォームの表示（resources/views/edit.blade.php）

``` html
<form method="POST" action="{{ route('items.update', $item->id) }}">
    @csrf
    @method('PUT')
    <input type="text" name="name" value="{{ $item->name }}">
    <button type="submit">更新</button>
</form>
```

### コントローラの処理（app/Http/Controllers/ItemController.php）

``` php
public function update(Request $request, $id)
{
    $item = Item::findOrFail($id);
    $item->update([
        'name' => $request->input('name')
    ]);

    return redirect()->route('items.index');
}
``` 
## データの削除 (Delete)
データを削除する処理を実装します。

### 削除ボタンの設置（resources/views/index.blade.php）

``` html
<form method="POST" action="{{ route('items.destroy', $item->id) }}">
    @csrf
    @method('DELETE')
    <button type="submit">削除</button>
</form>
```

### コントローラの処理（app/Http/Controllers/ItemController.php）

``` php
public function destroy($id)
{
    $item = Item::findOrFail($id);
    $item->delete();

    return redirect()->route('items.index');
}
```

# まとめ
以上で、LaravelとMySQLを使用してCRUD機能を持つ基本的なウェブアプリケーションを作成する方法について説明しました。これにより、データの作成、読み取り、更新、削除といった基本的な操作を実行することができます。

# 参考
- [Laravel 公式ドキュメント](https://laravel.com/docs/11.x)
- [MySQL 公式ドキュメント](https://dev.mysql.com/doc/)
systemdはrcファイルを読まない

## 結論
systemdのサービスはシェル環境とは独立した環境で実行される。

そのためrcファイルの内容に依存したコマンドを実行しようとすると203エラーが出る。

そこでsystemdのサービス実行時に必要な設定を入れることで解決する。

## 備忘録

ここからは蛇足なんですが、私がハマったことを書いておきます。
ある日、systemdでサーバを自動起動しようと思い、ユニットファイルを書きました。
```
[Unit]
Description=hogehoge
After=network.target

[Service]
Type=simple
WorkingDirectory=/path/to/dir/
ExecStart=some_command
Restart=always

[Install]
WantedBy=multi-user.target
```
しかしstatusを見ると
```
ExecStart=some_command (code=exited, status=203/EXEC)
```
と実行できていませんでした。
コマンドを手打ちする分には実行できるのになんでだろな〜？とハマっていました。

原因は`ExecStart`のコマンドが環境変数に依存していたためでした。
```bash
export SOME_VAR="xxx"
```
`~/.bashrc`にこのように書いてあっても、サービスファイルのExecStartが実行される環境は別なので、この設定を読まないのですね。

#### 対応1
`-l`オプションでシェルを起動してやれば動きます。
```
ExecStart=/bin/bash -lc 'some_command'
```
しかし、`~/.bashrc`に依存するので、`~/.bashrc`を変更する際の影響範囲が大きくなります。

#### 対応2
設定も含めたシェルスクリプトを作ってそれを`ExecStart`に渡してやります。
これなら前述した問題はクリアできます。
```bash
#!/bin/bash

export SOME_VAR="xxx"

some_command
```
PyCaretの時系列モデル　indexの型について

# はじめに
Signateのアップル 引越し需要予測（SOTA）にチャレンジしていて、出たエラーについてメモです。

https://signate.jp/competitions/269

PyCaretの　time_series　を使った際に、型が異なる旨のエラーが出て困った。という内容です。

# 具体的な内容
・時系列モデルを利用するときには、indexにdatetimeを指定するのが通常
　※2024-06-23のような形式
・PyCaretに投入する手前で、indexにdatetime型の日付データを設定
・trainデータで、モデル作成はできる
・testデータで、予測しようとすると**型が異なる旨のエラー**が発生
　datetime型 vs period型

このときまで、**period型**なるものを知らなかったのですが、どうやらPyCaret側で処理したモデルは自動的にperiod型がindexに設定されるようです・・・。
よって、testデータのdatetime型と異なるというエラーが発生していました。

※Period型については、こちらの記事が詳しいです。

https://qiita.com/adamist521/items/dfd2b9836169fe916b25

※info()を見ると、Dtypeはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/dd4204f5-d4e0-ffd8-2e17-e409df14c767.png)


# 解決方法
train,test共に、indexのdatetime型をperiod型に変換するだけ！

```Python
train['datetime'] = pd.to_datetime(train['datetime']).dt.to_period('D')
train.set_index('datetime', inplace=True)

test['datetime'] = pd.to_datetime(test['datetime']).dt.to_period('D')
test.set_index('datetime', inplace=True)
```

参考：period型のindex
見た目は、datetime型かperiod型かわかりませんね・・・👹
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/c8c3d720-e6f1-cb45-ef6f-ce6f8926e2d0.png)


今回は、以上です！
【初心者向け】サクラエディタをインストールしてみた

## はじめに
Windowsで活躍する多機能メモツールのサクラエディタですが、いまだに自分のpcにインストールをしていなかったので今回はその手順を一緒にご覧いただけるようキャプチャを撮って説明していきたいと思います！


## インストールはこちらから
https://sakura-editor.github.io/

### 1. リンク先にあるページから
"インストール、パッケージダウンロード"を選択 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/7d499afb-b039-cf57-860d-e4d9a072c8db.png)

### 2. 今回はサクラエディタのパッケージダウンロードなので
上から3つ目の*installer.zip*ファイルを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/bd571aa3-9499-b613-fb4f-09ac03b28b69.png)

### 3. インストールが完了したらダウンロードファイルを右クリック、
"すべて展開"を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/0ca398cf-7681-ed61-a015-72e89a836ae4.png)

### 4. 下記ウィンドウが表示されたら、*sakura_install*から始まるセットアップを起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/09e53298-1296-eec2-32c8-118b2837e470.png)

### 5. 必要に応じてヘルプファイルと[keywordファイル](https://sakura-editor.github.io/help/HLP000105.html)をインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/c9b7fec7-dd7b-e14c-546e-a2f9ab8133a2.png)

### 6. 確認を進めて最後にセットアップの完了が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/9b93d827-0351-dd27-75fe-26e98315a057.png)

### 7. サクラエディタインストール完了!!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3787081/797794f7-a1ab-e0c7-b11d-a46e7c64302d.png)


## 最後に
自分が最初にサクラエディタを使った時は正直、「なんだこのかわいげのないメモツール！」と思っていたのですが、業務で使って行くうちにその便利さに驚いて今回は自分のpcにもインストールしようと思い、この記事を作成しました。
それまでwebのドキュメントツールを使っていたのですが、自分のpcが古いこともあって起動は遅いし、反応も鈍いしで散々でしたが、それらの悩みはこのインストールですべて解決しました！
次回はその便利ツールについてまとめてみようと思います。
最後までご覧いただきありがとうございます！
オンライン会議のコツ

# 想定読者
- オンライン会議の司会を務めているが漫然とやっている人
- 司会者としてオンライン会議の方法を見直したい人
- 参加者としてオンライン会議への臨み方を見直したい人

# 本記事のゴール
- オンライン会議の司会のコツを知る
- オンライン会議の参加のコツを知る

# オンライン会議の課題
- ツールの使い方を間違える
- 気が散る・集中力が下がりやすい(例：通知や別作業に気が向いてしまう)
- カメラオフだと、参加者が何をしているか分からない
- ファシリテーションの質が悪い
- 表情やしぐさなどのコミュニケーションの手がかりがない
- しゃべらない人の存在を忘れやすい

# オンライン会議が向いている/いない会議
- 議論を必要とする会議がオンラインで、かつ人数が多いと向いていない。複雑になってしまう。
- 進捗会議は向いている。マネージャーがチームメイトから一方向に進捗を会議することが多いため。
- 課題解決のためのミーティングは向いていない。

 
# 効果的なオンライン会議の方法
## 司会者目線
### カメラはオンにしよう
-  カメラオンにすることで、考えや感情などのメッセージが視覚的な情報によって追加される。それにより、コミュニケーションが促進される。
例：深呼吸や姿勢の変化によって「発言したい」というメッセージが暗に伝わる

- チームの多数派がカメラオンにすることに抵抗感がある場合は？
    - まずは、**会議以外の1 on 1などでカメラオン**にするよう仕向ける。それにより、カメラオンによるコミュニケーションの質の向上を実感してもらえる。その結果、大人数の会議でのカメラオンにも抵抗感が減ると期待される。
    - **会議開始前の会話を利用する**。開始前に、カメラに写っている当人の周囲にあるもについて尋ねる。それにより、カメラオンでの会議が暗黙のルールになり、カメラオンへのストレスが減ると期待される。

### アプリがモバイルかPCかは、会議の結果に影響する点に気を付けよう
- オンライン会議のツールは、モバイルまたはPCがある。
- PCを使っており、参加者が机に着席しているなら、カメラオンにしてもらう。
- 参加者が移動中でモバイルから参加しているなら、あまり集中していない、議論に参加できないことを考えよう。
- 資料を使うなら、モバイルからの参加者が資料をダウンロードできるように時間をとろう。
- 参加者に議論をしてほしいか？
→してほしいなら、PCから参加するよう依頼しよう。
- 参加者に集中してほしいか？
→してほしいなら、PCから参加するよう依頼しよう。

### オンライン特有のファシリテーションのコツ
#### 参加者が情報や意見を言うまでの待ち時間を長めにとる
- 対面会議では発言しようとしている様子が姿勢や表情で分かる。だがオンライン&カメラオフだと分からない。やや長めに待つことで、確実に参加者からインプットをもらおう。
#### 名前を呼び、疑問を投げかける
例：田中さん、この問題についてどう思われますか？ 
漠然とみんなに問うよりも、集中力が上がることが期待される。

#### 疑問や情報提供の依頼は具体的に
- 質問ありますか？コメントありますか？などの漠然とした質問よりも返答を得やすいため。
#### 会話のフィードバックループを促進する
- 会話におけるフィードバックループが対面よりもオンライン会議では困難になる。フィードバックループとは、相手の反応を見て、少しずつ話す内容や話し方を調整するループのことだろう。
- そのため、多めに質問を投げたり、決定事項について共通認識を持てているかを質問して確認していくのがよい。

#### アクションアイテムはオンラインのホワイトボードに記載する。
見える化することで確認できる。


### 会議での発言のしやすさを高めるコツ
- 会話へ参加してほしいという期待を伝える
例：「田中さんには○○の件について、皆の前で意見をいただきたい」と伝えておく
- 参加者が発言する時間を確保する。他の人の発言によってかぶせられないようにする。
- オンラインでも**ホワイトボード**を使おう。
    - そのためにツールを見つける。そして、使いこなせるように練習する
    - 視覚的な資料がないと集中力が落ちるという点でも、ある方がよい。
- オンライン会議のアプリの挙手の機能を活用する。
挙手によって意見をきこう。
- 他のツールも使う。
積極的にツールを探して、良いものは取り入れてみよう。
例：投票ツール

### 参加者に会議への集中力を高めてもらうコツ
- 参加者に対し、アジェンダを見るように伝える

- 話が脱線したら、今の会話がアジェンダに関連するかを質問する
    - 同僚から同僚への質問なら上手く本筋に戻せる
    - 地位の違いやお互いが知らない人の場合、質問しづらいかもしれない。その時は、リーダーやファシリテーターにプライベートチャットで、その懸念を伝える
- 2人だけでできる会話はオンライン会議外で行う
- "あとでみるリスト"をホワイトボードに用意しておく
    - オンラインのホワイトボードやスライドで、空白のページを作成する。そこのタイトルを"あとでみるリスト"とする。
    - 重要だが会議のアジェンダに関係のない話題が出た場合に、その話題を記載する。
    - ただし、必ず会議の終わりに、それらの問題をどう議論や解決するかを話し合う。というのも、後で扱われると分かっているからこそ、その話題をスキップして不安なく本筋に戻れるため。

## 参加者目線
### 気を散らすものを遠ざけておこう
- スマホは機内モードにする
- PCの通知はオフにする
- そして、会議に貢献できるよう議論に集中しよう
### 場所を選ぼう
- 移動しながら参加するか、デスクに座って参加するか。
議論への参加の必要性などをもとに選ぼう。

### ネットワークや音声品質の動作確認をしよう
- 故障してつながらないと、会議に参加できなくなってしまうため。

# 参考資料
[LinkedIn Learning "Leading Virtual Meetings"](https://www.linkedin.com/learning/leading-virtual-meetings/welcome-to-leading-virtual-meetings?u=2154233)

[LinkedIn Learning 生産的なミーティングをするコツ](https://www.linkedin.com/learning/managing-meetings-2)
[備忘録]　読んだネットの記事　(テクノロジー)

# 備忘録
"産業用ネットワーク機能をソフト化し、サーバ上でのロボット制御に成功"
https://monoist.itmedia.co.jp/mn/articles/2406/04/news062.html

[備忘録]
- 産業用ネットワーク機能をソフト化する技術を開発
- 産業ロボットをサーバ上で遠隔制御
- 産業用ネットワーク機能の入れ替え
- 制御機能をプロトコルドライバレイヤー
    - 制御機能レイヤー
    - 管理ドライバレイヤーに分離
- クラウド上のサーバリソースを活用して産業用ロボットを制御する

"HoloLens 2と生成AIで現場作業者支援の新たな姿を見せたマイクロソフト"
https://monoist.itmedia.co.jp/mn/articles/2404/26/news110.html

[備忘録]
- MR技術による製造現場支援に生成AIの音声サポートを搭載
- ホロレンズを使って作業マニュアルなど3D映像で表示
    - 現実世界のオブジェクトに3Dコンテンツを重ね合わせてガイドを行う
- 従来ではベテラン作業者が遠隔で支援を行っていた
    - 生成AIによって瞬時に答えを生成してテキストおよび音声で作業者に伝える
- Fabricの製造データソリューションであればコンテキスト化されたデータに迅速にアクセスすることが可能
- 生産監督者がチャットで素早くデータを参照して品質問題を数分で特定することが可能
- 要望を伝えたら3Dデータが素早く出力される

"DJIが無人航空機のレベル3および3.5の飛行申請に必要な情報の提供を発表"
https://monoist.itmedia.co.jp/mn/articles/2405/23/news100.html

[備忘録]
- 国土交通省への飛行許可や承認申請に必要な情報を製品ユーザーに提供
- 提供する情報には機体の初期故障期間に関する証明方法
    - 製造者が保証する落下距離
ReactにVitestを追加してテスト環境を整備する方法

どうもこんにちは、たくびーです。
今回はReactプロジェクトにvitestを導入したので備忘録として残したいと思います。

# Vitest導入方法

## パッケージインストール

まずは必要なパッケージをインストールします。以下のコマンドを実行してください。

```zsh
npm install -D vitest jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event
```

## ファイル追加

次に、テストのセットアップ用ファイルを追加します。`vitest-setup.ts`というファイルを作成し、以下の内容を追加してください。

```ts:vitest-setup.ts
import '@testing-library/jest-dom/vitest';
```

## 設定追加

続いて、Viteの設定ファイル（`vite.config.ts`）にテスト関連の設定を追加します。

```ts:vite.config.ts
/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    // ビルド設定
  },
  server: {
    // サーバー設定
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./vitest-setup.ts'],
  },
});
```

さらに、`tsconfig.ts`にも設定を追加します。

```ts:tsconfig.ts
{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "types": [
      "vitest/globals",
    ],
    "moduleResolution": "bundler",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2020",
    "useDefineForClassFields": true
  },
  "include": [
    "src",
    "./vitest-setup.ts",
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}
```

(オプション) 日付のテストを行う場合は、以下のパッケージもインストールしてください。

```zsh
npm install -D jest-date-mock
```

## テストの書き方

以下はテストのサンプルです。`sample.tsx`ファイルを作成し、次の内容を追加します。

```tsx:sample.tsx
import { render, screen } from '@testing-library/react';
import { SomeComponent } from './components/SomeComponent';

describe('このファイルのテストの説明', () => {
  test('テストケースについて', () => {
    render(<SomeComponent />);
    const element = screen.getByText('確認したい文字列');
    expect(element).toBeInTheDocument();
  });
});
```

## テストの実行

以下のコマンドでテストを実行します。

```zsh
npm run test
```

# カバレッジの出し方

## パッケージのインストール

カバレッジを出すためのパッケージをインストールします。

```zsh
npm i -D @vitest/coverage-v8
```

## package.jsonにスクリプトを記載

`package.json`にカバレッジを出力するためのスクリプトを追加します。

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest run",
    "coverage": "vitest run --coverage"
  }
}
```

## カバレッジの出力

以下のコマンドでカバレッジを出力します。

```zsh
npm run coverage
```

実行後、`coverage`ディレクトリが作成され、詳細なカバレッジレポートを確認することができます。

# 参考

- [Qiita: Vitest導入方法](https://qiita.com/b-yuko/items/f1041b2f820a49c8db46)
- [GeekFeed: React Vitest](https://www.geekfeed.co.jp/geekblog/react-vitest)
- [Vitest公式ガイド](https://vitest.dev/guide/)
- [Vitest GitHubリポジトリ](https://github.com/vitest-dev/vitest/tree/main/examples/react)
- [Testing Library公式ドキュメント](https://testing-library.com/docs/react-testing-library/setup)
Laravelのモデルとマイグレーションを利用してデータベースを操作してみた

# はじめに
こんにちは、Webエンジニアの岩田史門([@SI_Monxy](https://x.com/SI_Monxy))です！
今回はLaravelのモデルとマイグレーションを利用したデータベース操作について記事を書いてみました！
改善点や修正点があれば、コメントにて優しくご指導いただけると嬉しいです！

# 概要
Laravelにおけるモデル（Model）とマイグレーション（Migration）は、データベース操作を効率的に行うための重要な要素です。本記事では、これらの基本的な使い方と操作方法について解説します。

# モデルとは何か？
モデルはLaravelにおいてデータベースとのやり取りを担当するクラスです。各モデルは単一のデータベーステーブルに関連付けられ、そのテーブルのデータを操作するためのメソッドを提供します。

# モデルの作成
まず初めに、以下のArtisanコマンドを使用して新しいモデルを作成します。

``` bash
php artisan make:model Product
```
これにより、app/Models/Product.php というファイルが生成されます。この中に Product モデルのクラスが定義されます。

# モデルの基本的な操作
例えば、Product モデルが products テーブルに関連付けられている場合、以下のようにしてデータを操作できます。

``` php
use App\Models\Product;

// レコードの取得
$products = Product::all();

// 特定の条件でのレコードの取得
$product = Product::where('id', 1)->first();

// 新しいレコードの作成
$newProduct = new Product;
$newProduct->name = 'New Product';
$newProduct->price = 1000;
$newProduct->save();

// レコードの更新
$product->price = 1200;
$product->save();

// レコードの削除
$product->delete();
```

# マイグレーションとは何か？
マイグレーションは、データベースのスキーマを定義し、データベースのバージョン管理を行うための仕組みです。マイグレーションを使うことで、テーブルの作成や変更を簡単に行うことができます。

# マイグレーションの作成
新しいマイグレーションファイルを作成するには、以下のArtisanコマンドを使用します。

``` bash
php artisan make:migration create_products_table
```
これにより、database/migrations フォルダに新しいマイグレーションファイルが作成されます。

# マイグレーションファイルの記述例
例えば、products テーブルを作成するマイグレーションファイルは次のようになります。

``` php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateProductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('price');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('products');
    }
}
```
# マイグレーションの実行
マイグレーションを実行するには、以下のArtisanコマンドを使用します。

``` bash
php artisan migrate
```

これにより、定義したテーブルがデータベースに作成されます。

# まとめ
この記事では、Laravelにおけるモデルとマイグレーションの基本的な使い方と操作方法について解説しました。初心者でもわかりやすく、実際のサンプルコードを交えて説明しました。

# 参考
- [Laravel Official Documentation](https://laravel.com/docs/11.x)
Windows11でもMacのようにライブ変換がしたい

# はじめに
Macだとデフォルトで使用できるライブ変換の機能を、Windows11でもできるようにならないかと思い記事を作成しました（Windows10だと近いことができていたのにWindows11になってからできなくなったとお思いの方も見ていただければと思います）。
Macほど使い勝手はよくありませんが、近いことはできるようになります。

# やりかた
右クリックでIMEオプションを開いて設定をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/da95c26b-46b2-c6da-d914-931e1d64146d.png)

全般をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/9aea7504-0e52-aaea-0555-98f11bc93bc6.png)

以前のバージョンのMicrosoft IMEを使うのトグルをオンにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/c4e8de33-3539-26f2-ba97-3ed79fc370a7.png)

OKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/01483b53-278f-8710-b025-ea5aa1fe651c.png)

再度IMEオプションを開いてプロパティをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/d37c4a53-6fb9-793b-3e55-5f753298ab8c.png)

詳細設定をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/9e7cf70e-5b6a-8595-6f48-975634440c58.png)

上のタブで変換をクリックして、自動変換を行うときのみ変換文字列の長さで短めを選択して適用ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/1013e7d9-87a0-3a6e-20f2-a35af91c09ec.png)

以上で設定は完了です。
何か文字列を打っていただければ比較的早いタイミングでライブ変換の機能が働いていることを確認できるかと思います。
PHPの配列操作と便利な関数を解説

# はじめに
こんにちは、Webエンジニアの岩田史門([@SI_Monxy](https://x.com/SI_Monxy))です！
今回はPHPの配列操作と便利な関数について記事を書いてみました！
改善点や修正点があれば、コメントにてやさしくご指導いただけると嬉しいです！

# 概要
PHPの配列は強力で柔軟性があり、さまざまな方法で操作することができます。この記事では、PHPの配列操作の基本と、よく使われる便利な関数について紹介します。

# 配列の基本操作
## 配列の作成
PHPでは、配列を作成するためにarray関数や短縮構文[]を使用します。

``` php
// array()関数を使った配列の作成
$fruits = array("Apple", "Banana", "Orange");

// 短縮構文を使った配列の作成
$fruits = ["Apple", "Banana", "Orange"];
```

## 配列への要素追加
[]を使って配列に要素を追加することができます。

``` php
$fruits[] = "Grape";
```

## 配列の要素へのアクセス
配列の要素にはインデックスを使ってアクセスします。

``` php
echo $fruits[0]; // "Apple"
```

## 配列の要素の変更
配列の要素はインデックスを指定して変更できます。

``` php
$fruits[1] = "Strawberry";
```

## 配列の削除
unset関数を使って配列の要素を削除します。

``` php
unset($fruits[2]);
```

# よく使われる便利な関数
## 配列の長さを取得する : count
count関数を使って配列の要素数を取得できます。

``` php
$num_fruits = count($fruits);
echo $num_fruits; // 3
```

## 配列の結合 : array_merge
array_merge関数を使って複数の配列を結合します。

``` php
$vegetables = ["Carrot", "Tomato"];
$food = array_merge($fruits, $vegetables);
print_r($food);
// Array ( [0] => Apple [1] => Strawberry [2] => Grape [3] => Carrot [4] => Tomato )
```

## 配列のソート : sort と rsort
sort関数を使って配列を昇順にソートし、rsort関数を使って降順にソートします。

``` php
sort($fruits);
print_r($fruits); // Array ( [0] => Apple [1] => Grape [2] => Strawberry )

rsort($fruits);
print_r($fruits); // Array ( [0] => Strawberry [1] => Grape [2] => Apple )
```

## 配列の検索 : in_array と array_search
in_array関数を使って配列に特定の値が含まれているかを確認し、array_search関数を使って値のインデックスを取得します。

``` php
if (in_array("Apple", $fruits)) {
    echo "Apple is in the array";
}

$index = array_search("Grape", $fruits);
echo $index; // 1
``` 
## 配列のフィルタリング : array_filter
array_filter関数を使って配列の要素をフィルタリングします。

``` php
$numbers = [1, 2, 3, 4, 5, 6];
$even_numbers = array_filter($numbers, function($num) {
    return $num % 2 == 0;
});
print_r($even_numbers); // Array ( [1] => 2 [3] => 4 [5] => 6 )
```
## 配列のマッピング : array_map
array_map関数を使って配列の各要素に対して関数を適用します。

``` php

$squared_numbers = array_map(function($num) {
    return $num * $num;
}, $numbers);
print_r($squared_numbers); // Array ( [0] => 1 [1] => 4 [2] => 9 [3] => 16 [4] => 25 [5] => 36 )
```

## 配列のキーと値の交換 : array_flip
array_flip関数を使って配列のキーと値を交換します。

``` php
$flipped = array_flip($fruits);
print_r($flipped);
// Array ( [Strawberry] => 0 [Grape] => 1 [Apple] => 2 )
```

## 配列の値をユニークにする : array_unique
array_unique関数を使って配列の重複する値を削除します。

``` php
$numbers = [1, 2, 2, 3, 4, 4, 5];
$unique_numbers = array_unique($numbers);
print_r($unique_numbers); // Array ( [0] => 1 [1] => 2 [3] => 3 [4] => 4 [6] => 5 )
``` 

# まとめ
PHPの配列操作には、さまざまな便利な関数が用意されています。これらの基本操作と便利な関数を使いこなすことで、効率的に配列を操作することができます！

# 参考
- [PHP公式マニュアル](https://www.php.net/manual/ja/)
- [w3schools - PHP Tutorial](https://www.w3schools.com/php/)
【Pybulletサンプル解説】オブジェクトのテクスチャを動的に変更する【changeTexture.py】

お疲れ様です。秋並です。

Pybullet公式gitリポジトリのサンプルコードを解説するシリーズです（一覧は[こちら](https://qiita.com/akinami/items/7b433b60aeb5115ba4d7)）。

<br>

今回は、changeTexture.pyを解説します。（コードのリンクは[こちら](https://github.com/bulletphysics/bullet3/blob/master/examples/pybullet/examples/changeTexture.py)）

本コードを実行すると、テクスチャがリアルタイムで更新される様子を確認できます。

![changeTexture.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2030125/8f609c6e-2ed3-7115-dd0d-4b9bb6f30582.gif)


# 使用している機能
本コードは、以下の機能を使用して「テクスチャの変更」を実現しています。
- テクスチャの変更

## テクスチャの変更

pybulletでは、`changeTexture`関数を使用することで「テクスチャの変更」をすることができます。

```python
pybullet.changeTexture(texUid, pixels, width, height)
```
- `texUid`：テクスチャのID
- `pixels`：テクスチャのピクセルデータを格納したリスト
    - リストの長さは`width * height * 3`
- `width`：テクスチャの幅
- `height`：テクスチャの高さ

サンプルコードでは、1ステップごとに半透明な床のテクスチャを変更することで、半透明な床が動いているような動きをシミュレーションしています。

# コメントをつけたサンプルコード
サンプルコードにコメントをつけたものが以下になります（もともとあった不要と思われるコメント等については削除しています）

```python
import pybullet as p
import time
import pybullet_data

# PybulletをGUIモードで接続
p.connect(p.GUI)

# Pybulletに関するデータのパスを取得
p.setAdditionalSearchPath(pybullet_data.getDataPath())

# 床を異なる位置に生成
planeUidA = p.loadURDF("plane_transparent.urdf", [0, 0, 0])
planeUid = p.loadURDF("plane_transparent.urdf", [0, 0, -1])

# テクスチャをロード
texUid = p.loadTexture("tex256.png")

# 床を半透明に設定
p.changeVisualShape(planeUidA, -1, rgbaColor=[1, 1, 1, 0.5])
p.changeVisualShape(planeUid, -1, rgbaColor=[1, 1, 1, 0.5])

# 片方の床にテクスチャを適用
p.changeVisualShape(planeUid, -1, textureUniqueId=texUid)

# 床のサイズを定義
width = 256
height = 256

# 床の各ピクセルにおける色を白色で初期化
pixels = [255] * width * height * 3
colorR = 0
colorG = 0
colorB = 0

blue = 0

# ログの記録を開始
logId = p.startStateLogging(p.STATE_LOGGING_PROFILE_TIMINGS, "renderbench.json")

# 100000回のループを開始し、各ステップでピクセルの値を更新し、テクスチャに反映
for i in range(100000):

  # シミュレーションを1ステップ進める
  p.stepSimulation()
  for i in range(width):
    for j in range(height):
    
      # 各ピクセル（RGB）を設定
      pixels[(i + j * width) * 3 + 0] = i # RGBのR（赤色）を設定
      pixels[(i + j * width) * 3 + 1] = (j + blue) % 256 # RGBのG（緑色）を設定
      pixels[(i + j * width) * 3 + 2] = blue # RGBのB（青色）を設定
      
  blue = blue + 1

  # テクスチャを変更
  p.changeTexture(texUid, pixels, width, height)

  # レンダリング時間を計測（計測開始）
  start = time.time()

  # カメラから画像を取得
  p.getCameraImage(300, 300, renderer=p.ER_BULLET_HARDWARE_OPENGL)

  # レンダリング時間を計測（計測終了）
  end = time.time()

  # レンダリング時間を表示
  print("rendering duration")
  print(end - start)

# ログの記録を停止
p.stopStateLogging(logId)
```
PyTorch：訓練モードと推論モードでモデルの挙動を変える

# self.trainingを使う
nn.Moduleを継承して作ったクラスのインスタンスはtraining属性を持っている。training属性は訓練モードであれば「True」、推論モードであれば「False」になる。

```python
import torch
import torch.nn as nn

# nn.Moduleを継承してクラスを定義
class Network(nn.Module):
    pass

# Networkクラスのインスタンスを作成
model = Network()
```

↓訓練モードであれば「True」が出力される。
```python
model.train()
print(model.training)
# 出力: True
```

↓推論モードであれば「False」が出力される。
```python
model.eval()
print(model.training)
# 出力: False
```
これを使えば訓練モードと推論モードでモデルの挙動を変えることが出来る。特に意味はないが推論モードのときだけニューラルネットワークの出力を1000倍するようにしてみる。

```python
# ニューラルネットワークを定義
class Network(nn.Module):
    def __init__(self):
        super().__init__()
        self.fc1 = nn.Linear(5, 10)
        self.fc2 = nn.Linear(10, 1)
        self.activation = nn.ReLU()

    def forward(self, x):
        out = self.fc1(x)
        out = self.activation(out)
        # 訓練時と推論時で条件分岐
        if self.training:
            out = self.fc2(out)
        else:
            out = self.fc2(out)*1000
        return out

model = Network()

# モデルへの入力を適当に乱数で作成
input = torch.randn(5).view(1, -1)
```

↓訓練モードのときは「-0.3638」が出力される。
```python
model.train()
print(model(input))
# 出力: tensor([[-0.3638]], grad_fn=<AddmmBackward0>)
```

↓推論モードのときは「-363.7650」が出力される。推論モードのときだけ出力が1000倍されている。
```python
model.eval()
print(model(input))
# 出力: tensor([[-363.7650]], grad_fn=<MulBackward0>)
```
Laravelのルーティングを基本と応用に分けて解説してみた

# はじめに
こんにちは、Webエンジニアの岩田史門([@SI_Monxy](https://x.com/SI_Monxy))です！
今回はLaravelのルーティングについて記事を書いてみました！
改善点や修正点があれば、コメントにて優しくご指導いただけると嬉しいです！！

# 概要
Laravelは、非常に強力で柔軟なルーティングシステムを提供しています。ここでは、Laravelのルーティングについて基本から応用までをサンプルコードと共に解説します。

# 基本編
## ルートの定義
Laravelでは、ルートは routes/web.php ファイルに定義します。以下は基本的なルートの定義方法です。

``` php
Route::get('/', function () {
    return view('welcome');
});
```
この例では、/ にアクセスすると welcome ビューが表示されます。

## HTTPメソッドとルーティング
Laravelは、GET、POST、PUT、DELETEなどのHTTPメソッドに対するルートを定義することができます。

``` php
Route::get('/hello', function () {
    return 'Hello, World!';
});

Route::post('/submit', function () {
    return 'Form submitted';
});
```
## ルートパラメータ
ルートパラメータを使用すると、URLの一部を変数として取得できます。

``` php
Route::get('/user/{id}', function ($id) {
    return 'User ID: ' . $id;
});
```

## オプションパラメータ
ルートパラメータをオプションにすることもできます。

``` php
Route::get('/user/{name?}', function ($name = 'Guest') {
    return 'User Name: ' . $name;
});
```

# 応用編
## ルートグループ
共通のミドルウェアや名前空間を持つルートをグループ化できます。

``` php
Route::prefix('admin')->group(function () {
    Route::get('/dashboard', function () {
        return 'Admin Dashboard';
    });

    Route::get('/users', function () {
        return 'Admin Users';
    });
});
```
## 名前付きルート
名前付きルートは、ルートに名前を付けて、URL生成やリダイレクトで使用できます。

``` php
Route::get('/profile', function () {
    return 'User Profile';
})->name('profile');

// 使用例
$url = route('profile');
return redirect()->route('profile');
```

## ルートモデルバインディング
Laravelのルートモデルバインディングを使うと、モデルを自動的にルートに注入することができます。

``` php
// モデルバインディングなし
Route::get('/user/{id}', function ($id) {
    $user = App\Models\User::findOrFail($id);
    return $user;
});

// モデルバインディングあり
Route::get('/user/{user}', function (App\Models\User $user) {
    return $user;
});
```

## ミドルウェア
ミドルウェアを使って、ルートに特定の条件を追加することができます。例えば、認証が必要なルートを定義する場合です。

``` php
Route::get('/dashboard', function () {
    return 'Dashboard';
})->middleware('auth');
```

## サブドメインルーティング
Laravelでは、サブドメインに対するルートも簡単に定義できます。

``` php
Route::domain('{account}.example.com')->group(function () {
    Route::get('user/{id}', function ($account, $id) {
        return 'Account: ' . $account . ' - User ID: ' . $id;
    });
});
```

# まとめ
Laravelのルーティングシステムは非常に強力で、シンプルなものから高度なものまで様々なルート定義をサポートしています。基本を押さえた上で、応用的な機能を使いこなして、より複雑なアプリケーションを構築していきましょう。

# 参考
- [Laravel 公式ドキュメント - ルーティング](https://laravel.com/docs/11.x/routing)
- [Laravel 公式ドキュメント - ミドルウェア](https://laravel.com/docs/11.x/middleware)
st_word



```python

import streamlit as st
import docx
from io import BytesIO
import pandas as pd

def main():

    # Streamlitアプリケーション
    st.title("word出力")

    # Documentオブジェクトを作成
    doc = docx.Document()


    # 1ページ目
    with st.expander('1ページ目', expanded=True):
        page1_title = 'サンプルドキュメント'
        page1_body = st.text_area("ここに入力してください:", height=100, key='page1_body')

        # ドキュメントの内容を追加
        doc.add_heading(page1_title, 0)
        doc.add_paragraph(page1_body)

    # 2ページ目
    with st.expander('2ページ目', expanded=True):
        page2_title = 'サンプルドキュメント'
        page2_body = st.text_area("ここに入力してください:", height=100, key='page2_body')

        doc.add_heading('セクション1', level=1)
        doc.add_paragraph('ここにセクション1の内容が入ります。')
        doc.add_heading('セクション2', level=1)
        doc.add_paragraph('ここにセクション2の内容が入ります。')

    # バイナリストリームへの保存
    bio = BytesIO()
    doc.save(bio)

    # ストリームの位置を先頭に戻す
    bio.seek(0)

    # ダウンロードボタンの表示
    st.download_button(
        label="Wordファイルをダウンロード",
        data=bio.getvalue(),
        file_name="prepared_document.docx",
        mime="application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    )


    # サンプルデータを作成
    data = {
        '名前': ['Alice', 'Bob', 'Charlie', 'David'],
        '年齢': [25, 30, 35, 40],
        '職業': [
            'エンジニア', 
            'デザイナー', 
            'マネージャー', 
            'アナリスト'
        ],
        '備考': [
            '長い文章の例として、このセルにはとても長い文章を入れています。この文章は通常のセルの内容よりもはるかに長いため、テーブルの表示がどのように変わるかを確認するのに役立ちます。',
            '',  # 2行目は空白
            '',  # 3行目は空白
            ''   # 4行目は空白
        ]
    }

    # Pandasデータフレームに変換
    df = pd.DataFrame(data)

    # タイトルを表示
    st.title('サンプルテーブル')

    # データフレームをテーブルとして表示
    st.table(df)
        



if __name__ == '__main__':
    main()


```
LT会勇気出して初登壇申し込んでみる

# はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）
今回は新卒2年目の自分が勇気を出してLT会に登壇登録したので、そこまでの経緯をお話ししたいと思います！

https://increments.connpass.com/event/317283/

↑登壇予定のLTです。
2024年6月27日（木）12:00-13:00に開催されるので宜しければ参加していただけると幸いです🥹

# LT会登壇までの経緯
### 初めてのLT会（初登壇）
まず初めてのLT会は、社内向けのイベントでした。
弊社は対外的にはLT会を開催しておりませんが、毎月の交流イベントとして催しがあり、4月の交流会がLT会でした。

社内向け＆非エンジニアの方も参加されるとのことだったので、社会人2年目になりたての自分にとっては参加しやすかったのもあり、思い切って登壇してみました。
（自分のテーマは生成AIを用いた自作サイトの高速開発でした😇）
その日のLT会には計5名登壇し、参加人数も100名を超えていたのでそれなりの盛り上がりだったと思います。

結果としては自分なりに好感触だったとは思いますが、如何せん弊社内でしたので温かいムードが元からあったのではと気になりました🧐（めちゃくちゃありがたかったです）
また、LT会で登壇すること自体初めてだったのですが思ったより楽しく発表する事ができたこともハードルが下がって良かったです。

これがきっかけで、LT会が他にもあれば参加してみたいと思うようになりました。

### 2回目のLT会（視聴のみ）
2回目は、2024年6月8日（土）に行われたGo Conference 2024でした。

https://gocon.jp/2024/

このイベントは、Go言語が好きな方々が集まりGoに関する様々な発表や企業ブースを回れるといったもので、最後の方に1人当たり5分のLT会がありました。
正直、5分という短い時間で次々とLTが行われたのですが、その日最も頭にスッと入ってくる内容でした。
（自分がまだ初学者というのもありますが😔）

短い時間で集中して聴けるという事がこんなにも理解に影響するのかと内心とても驚きましたが、それと同時に自分でも発表してみたいという思いが湧いてきました。
また、LTに登壇することによりコミュニティを盛り上げようという意思が見えたのも自分が憧れる要因でした。

### Qiita Enginner Festa2024

https://qiita.com/official-campaigns/engineer-festa/2024

この記事を書いてる真っ最中に開催されているQiitaのお祭りです。
初めは記事投稿を期限内に38回行うことで景品が貰えると聞き、景品目当てで参加することにしました。（今でも変わりませんが、38記事投稿はとてもハードですね🥵）

お祭りに参加しているのもあり、日に日にアウトプットする機会が増えたので自分の中でもこの内容を発表してみたい思いがだんだんと強くなってきました。
そんな時に、お祭り内のあるイベントに目が止まりました。
それが、今回登壇することになった「Qiita Engineer Festa 2024 〜初登壇応援！はじめてのLT〜」でした。

タイトルにもあるとおり、初めてのLTを応援してくれるイベントとのことでしたので、これなら自分にもチャンスがあるかなと思いました。
そこで登壇に申し込もうとしたのですが、審査制とのことでしたので生半可な発表内容だと落ちちゃうかもなあ。。。と心配でした。
そこで、自分が投稿した中で最もリアクションの多かった「TypeScript(Next.js)のCIをGitHub Actionsで構築してみる！」をLT会のテーマにして応募しました。

https://qiita.com/Senritsu420/items/f51a7eff81a8c1372302

結果は見事、合格しました！
嬉しすぎます！🥳

以上の経緯から、今回こちらのLT会に参加させていただく運びとなりました！

# おわりに
この記事を書きながら発表資料も書いているのですが、なかなかにハードワークだと気付きました。。。（木曜日本番＆1日1記事ペースで投稿しないとイベント完走できなさそう🥶）
ですが、両方実りのあるものにしたいのでこれからも頑張って作り上げていこうと思います！

また、再度告知にはなりますが自分の発表を聞いても良いよ〜って方は是非ご参加いただければと思います！よろしくお願いいたします🙇

https://increments.connpass.com/event/317283/

登壇登録の順番的に、発表順が最後になってしまいますが精一杯良いものを発表できるように頑張ります！

最後までご覧いただきありがとうございました！
以上、センリツでした。🤓
PHPの変数とデータ型についてまとめてみた

# はじめに
こんにちは、Webエンジニアの岩田史門([@SI_Monxy](https://x.com/SI_Monxy))です！
今回はPHPの変数とデータ型について記事を書いてみました！
改善点や修正点があれば、コメントにて優しくご指導いただけると嬉しいです！！

# 概要
PHPはサーバーサイドのスクリプト言語で、Web開発において非常に広く使用されています。本記事では、PHPの変数とデータ型、基本的な操作について初心者向けに詳しく解説します。

# 変数の基本
PHPで変数を定義するには、ドル記号（$）を使用します。変数名は英数字とアンダースコア（_）を使用できますが、数字で始めることはできません。

## 変数の宣言と代入
```php
<?php
$name = "John Doe";
$age = 30;
$is_student = true;
?>
```
上記の例では、$name、$age、および$is_studentという3つの変数を宣言し、それぞれに文字列、整数、ブール値を代入しています。

# PHPのデータ型
PHPには主に以下のデータ型があります：

- 文字列（String）
- 整数（Integer）
- 浮動小数点数（Float / Double）
- ブール値（Boolean）
- 配列（Array）
- オブジェクト（Object）
- NULL

## 文字列（String）
文字列は、ダブルクオート（"）またはシングルクオート（'）で囲みます。

``` php
<?php
$message = "Hello, World!";
?>
``` 

## 整数（Integer）
整数は、小数点を持たない数値です。

```php
<?php
$number = 42;
?>
```
## 浮動小数点数（Float / Double）
浮動小数点数は、小数点を含む数値です。

``` php
<?php
$pi = 3.14;
?>
```

## ブール値（Boolean）
ブール値は、true または false のどちらかです。

``` php
<?php
$is_admin = true;
?>
```

## 配列（Array）
配列は、複数の値を1つの変数に格納できるデータ型です。

``` php
<?php
$colors = array("red", "green", "blue");
?>
```
## オブジェクト（Object）
オブジェクトは、クラスのインスタンスです。クラスを定義し、それを基にオブジェクトを作成します。
``` php
<?php
class Car {
    public $color;
    public function __construct($color) {
        $this->color = $color;
    }
}

$myCar = new Car("red");
?>
```

## NULL
NULLは、変数が値を持たないことを表します。

``` php 
<?php
$var = NULL;
?>
```

# データ型の基本操作
## 文字列操作
``` php
<?php
$name = "John";
$greeting = "Hello, " . $name;
echo $greeting; // 出力: Hello, John
?>
```

## 数値操作
``` php
<?php
$a = 5;
$b = 3;
$sum = $a + $b;
echo $sum; // 出力: 8
?>
```
## 配列操作
``` php
<?php
$fruits = array("apple", "banana", "cherry");
echo $fruits[1]; // 出力: banana
?>
```
# 型のキャスト
PHPでは変数の型を明示的に変換することができます。

```php
<?php
$var = "10";
$int_var = (int)$var;
echo $int_var; // 出力: 10
?>
```
# 変数のスコープ
変数のスコープは、変数が使用可能な範囲を指します。

PHPには主に3つのスコープがあります：
- ローカル
- グローバル
- 静的

## ローカルスコープ
関数内部で定義された変数はローカルスコープを持ちます。

```php
<?php
function myFunction() {
    $localVar = "I'm local";
    echo $localVar;
}
myFunction();
// echo $localVar; // エラー: 変数が未定義
?>
```

## グローバルスコープ
関数外で定義された変数はグローバルスコープを持ちます。

``` php
<?php
$globalVar = "I'm global";

function myFunction() {
    global $globalVar;
    echo $globalVar;
}
myFunction(); // 出力: I'm global
?>
```

## 静的スコープ
静的変数は関数が終了してもその値を保持します。

``` php
<?php
function myFunction() {
    static $count = 0;
    $count++;
    echo $count;
}
myFunction(); // 出力: 1
myFunction(); // 出力: 2
?>
``` 
# まとめ
PHPの変数とデータ型は、Web開発における基本的な要素です。この記事では、変数の宣言、データ型、基本操作、型のキャスト、変数のスコープについて解説しました。これらの知識は、PHPでのプログラミングにおいて非常に重要です。

# 参考
- [PHP公式マニュアル](https://www.php.net/manual/ja/)
- [w3schools - PHP Tutorial](https://www.w3schools.com/php/)
【Laravel】プロジェクト事前準備④～PHPデバッグ環境構築（PHP Debug）

# PHP Debug
　Xdebugと通信し、VSCode上で視覚的なPHPのデバッグを実現するための拡張機能です。
# 前提条件
PHP（XAMPP）・Composer・Xdebugのインストールが完了していること。
以下の記事の続きです。
**PHP（XAMPP）**

https://qiita.com/moko_san/items/b3b7d6000db68735aa14

**Composer**

https://qiita.com/moko_san/items/6b69d408d2ba0eccdb88

**Xdebug**

https://qiita.com/moko_san/items/baee8f277eb29889a71c

# 1. PHP Debugのインストール
### ① VSCodeで「PHP Debug」をインストールする
**(1) VSCodeを起動し、アクティビティバー[拡張機能] > [PHP Debug]を検索する**
![PHPDebug01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/7b5fdf01-09a6-4cae-2c2a-d4afe708b312.png)
**(2) 「PHP Debug」の[インストール]からインストールする**
※作者が「Xdebug」のものを選択すること！
![PHPDebug02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/76b6e005-5eed-ccbb-f8a6-e2173dddaea7.png)
### ② デバッグ動作確認
**(1) テスト用PHPファイルを作成する**
```PHP:C:\xampptest\test.php
<?php
   $message = "PHPデバッグのテストです";
   echo $message;
?>
```
**(2) (1)ファイルの親ディレクトリをVSCodeで開き、(1)ファイルを選択する**
![PHPDebug03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/1da17278-9dc0-3e9e-1906-ea9de05077df.png)
**(3) アクティビティバー[実行とデバッグ] > [すべての自動デバッグ構成を表示]
　　を押下する**
  ![PHPDebug04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/3aa2f17e-6b11-34cb-f444-46751657bda1.png)
**(4) 検索窓で選択パネルが開くので[構成追加…]を選択**
　→これにより.vscode/launch.jsonが作成されます。
![PHPDebug05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/2ce20145-ab4c-6fac-4a04-963e9ba55b1d.png)
**(5) launch.jsonの内容を確認する**
　以下赤枠の内容が記述されていることを確認します。
![PHPDebug06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/7e156d7b-40f8-d034-2b63-153287dc5cf6.png)
**(5) (1)ファイル内にブレークポイントを置く**
![PHPDebug07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/da01b7da-1be9-bf40-4c16-1ccf8440ae31.png)
**(6) アクティビティバー[実行とデバッグ] > [実行どデバッグ]項目で
　[Listen for Xdebug]を選択**
![PHPDebug08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/e7fc7b91-c4bd-9dcd-9fc3-207090f6a6b7.png)
**(7) XAMPPでApache - [Start] しApacheを起動する**
![PHPDebug09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/ea5a8760-894a-1e62-9b5c-85e7748768ca.png)
**(8) [実行どデバッグ]項目 > [▷] を選択し、デバッグを開始する**
　→★バーが現れ、デバッグの各操作（ステップイン・アウト、デバッグ停止など）が可能
 　になります。
![PHPDebug10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/29e19f5e-477f-4e1e-a929-d3f9800e1488.png)
**(9) ブラウザで(1)ファイルへアクセスし、ブレークポイントで止まることを確認します。**
　　※私はファイル名を「test.php」としたので、「http://localhost/test.php」
　　　にアクセスしました。
![PHPDebug11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/af35b59c-2d27-6756-9887-3eb3b71817c8.png)
この状態のままサイドバー[変数]、[ウォッチ式]項目などで変数```$message```の中身
（2行目で代入した内容）を確認することができます。
また、コード内で変数```$message```の上にホバーしても確認することできます。
![PHPDebug12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846445/ae55762a-3da3-043c-aac6-832214fac943.png)

以上で、PHP開発環境構築（デバッグ）は完了です。

# 参考
https://n-archives.net/articles/vscode/php-debug-with-xampp-xdebug-vscode/2-vscode.html