OmniAICreator/Qiita-1.07M huggingface dataset:
Implementing SAFe®受講して、資格取得しました


### はじめに
Implementing SAFe®受講して、無事にSPC（SAFe Practice Consultants）試験に合格しました。この資格を取得すると、大規模アジャイルフレームワークSAFeについて知見を得て、人に教えることができます。

私自身、SPC資格を持つメンバーが立ち上げたSAFe案件にスクラムマスターとして１年半ほど参画していました。全てのプラクティスを実践できているわけではないですが、3ヶ月後にPI計画やI&Aを顧客と共に実践していました。最近では他の案件でもSAFeでの案件推進の要望も多くいただいており、アジャイル・スクラムを学んで仕事をしていく中で、SAFeをより理解しておくことで参画できる案件に広がりが持てそうと考え今回受講することにしました。

もっとSAFeをより知りたいという好奇心から受講を決めたものの、Implementing SAFe®という５日間がっつりした講義を受講し、しっかりとした資格試験準備が必要だったので、なかなか大変でした。
記憶が新しいうちに記事に残しておきます。

### Implementing SAFe®とは
Implementing SAFe®は、国際的な認定資格である SPC（SAFe Practice Consultants）取得に向けたトレーニングコースです。このコースでは、SAFe®導入について最も幅広いレベルの知見を得ることができます。

期間は5日間、9時から17時半まで。みっちり講義とディスカッションがあり、途中でちょっと業務チャットを処理しようかと思ってましたが、全然余裕なしでした。スピードも早くついていくのがやっとという内容でした。

ちなみに私はこちらの研修を受講しました。SAFe6.0の内容です。
https://www.nttdata.com/jp/ja/trends/event/2024/120901/

SAI講師の日本人講師と中国人講師（日本語同時通訳）での開催でした。

### 資格試験について
試験概要はこちらを参照ください。
https://support.scaledagile.com/s/article/Exam-Details-Implementing-SAFe-SAFe-Practice-Consultant-6-0?language=ja

研修から30日以内以内に無料で資格試験を受けられますが、
再試験料が$250（25年1月現在）とお高いのでほぼ一発勝負の覚悟で学び直してから試験に臨みました。

ちょうど年末年始があったので、こんなことをやりました。
* 各Lesson内容をまとめ直し理解が足りてないところを調べつつ理解
* プラクティステストは合格するまで３回実施、テスト時の画面の挙動を把握
* 出題頻度が上記試験概要に載っているので、出題頻度が高いLessonを重点的に確認
* コアバリューやリーンアジャイル原則など重要なポイントを何度も頭の中で反芻して説明できるようにする（年末年始の帰省の新幹線で唱える、子供と公園で遊びながら唱える）
* 以下リンクのBIG PICTUREやSAFeの構成では全体像が示されており、各ポイントリンク先に飛べて説明が読めるので、ひとつずつ確認
https://scaledagileframework.com/ja/


### さいごに
SAFe案件の引き合いが増えているという状況を鑑みて、従来型の階層構造ではユーザニーズあったタイミングでのバリュー提供が本当に難しく各企業が動き始めていることを感じます。
本当にSAFeを実現するには、空気をよまず、粘り強くこのフレームワークを実践し続ける必要があるかと思うのですが、大変困難で、結構道のりは長いなと思います。

また数年後私はどのようにシステム開発の現場を感じているのか気になるところで、どんな変化があるでしょうか。そんな思いもあって、記事にさせていただきました。読んでいただきありがとうございました！
良く使う短いコードをすぐに呼び出すコードスニペット

良く使うコードを簡単に呼び出すコードスニペットという機能を知りました。

![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2743575/d38341be-da26-5c9d-58ee-e6b29568df33.png)


VScodeやCrusorですと、「ファイル　→　ユーザー設定　→　スニペットの構成」と選択すると、コードの種類選択プルダウンが出てきます。コードを選択か入力するとJSON形式の画面が表示されます。

下記の形式で入力します。

```jsx
{
  "スニペット名": {
    "prefix": "呼び出すためのショートカット",
    "body": [
      "出力されるコードの1行目",
      "出力されるコードの2行目",
      "..."
    ],
    "description": "スニペットの説明（任意）"
  }
}

```

### 各要素の説明

1. **`スニペット名`**
    - スニペットの名前（管理用）。
    - VS Codeのスニペットリストで表示されます。
2. **`prefix`**
    - このショートカットを入力するとスニペットが呼び出されます。
3. **`body`**
    - 展開されるコードやテキストを配列形式で記述します。
    - 1行が1つの文字列として記述され、複数行の場合は改行を含む形で入力します。
4. **`description`**
    - スニペットの説明（オプション）。
    - ショートカット入力時にツールチップで表示されます。


以前書いたmatplotlibの文字化け対処コードもスニペットで呼び出せるように設定しました。

https://qiita.com/Noble_Laurel031212/items/4bf8d6654019d5ac3570

手打ちで入力が大変な時は生成AIを使いましょう。コード形式と登録したいコードを入れて、JSON形式のスニペットに書き換えてくださいと入力すると、変換してくれます。
MkDocsで拡張CSSを読み込ませるのにハマった話

## ハマった内容

拡張のCSSを定義しても読み込まないと思ったら、定義位置が違うことにず～～～～～～～～～っと気が付かずにハマってました。

同じような方がいれば、これを見て気が付いてもらえればと。。。

## 定義位置間違いの内容

### ×：設定していた内容

```yaml:mkdocs.yml
theme:
  name: 'material'
  # --- ( 省略 ) ---
  extra_css:
    - css/extra.css
```

### ○：正しい内容

```yaml:mkdocs.yml
theme:
  name: 'material'
  # --- ( 省略 ) ---

extra_css: # ←theme配下ではない点に注意
  - css/extra.css
```

## 補足

`mkdocs-with-pdf`でPDF作成時も拡張CSSを読み込んでくれることも確認済み！
PDF出力時に見出しのスタイル変更する場合は、`templates/styles.scss`で上書きできます。

## 参考サイト

https://squidfunk.github.io/mkdocs-material/customization/#additional-css

https://github.com/orzih/mkdocs-with-pdf?tab=readme-ov-file#-and-more
アクセストークンを使ってgithubのレポジトリをcloneする

## 何で困ったか
アクセストークンを使用して`git clone` や `git pull` などを行なっていて、
新たにcloneしようとした時、あれ？どうやれば良かったっけ？となってしまったので、
備忘録的に操作内容をメモしておきます。

## やり方
- githubのSettings > Developer settings > Personal access token > Tokens(Classic)
に進む
- Generate new tokenをクリック
- 必要なスコープを選択してトークンを生成
- トークンをコピーしておく
- 以下のコマンドで`git clone` を行う

```bash
git clone https://ghp_YourAccessTokenHere@github.com/username/repository.git
```

## アクセストークンをキャッシュしておきたい場合
```bash
git config --global credentials.helper store
```

を行うと、一度認証を行なっていれば次回以降は自動的に認証情報が利用できる。

## 言わずもがなの注意
アクセストークンをURLに埋め込んでcloneする場合、第三者にトークンが漏れないように注意してください。
期限付きのトークンにしておくであったり、不要になったら無効化するなどするのが好ましいです。
Go言語の変数定義

## はじめに
Go言語の変数定義の仕方にはいくつか方法があります。
Goを学び始めると、変数定義の方法の柔軟性にとても驚きます。
## 単独変数の定義
### 初期値なし変数
- 定義：`変数宣言（var）変数名 変数型`
- 例：
```Golang
var s string
```
### 初期値あり変数
- 定義：`var 変数名 変数型 = 値`
- 例：
```Golang
var s string = "Golang is fun and simple"
var i int = 10
```
初期値ありの場合、値から変数を予測できるため（型推論：type inference）、変数宣言と変数名を省略可能です。
- 定義：`変数名 := 値`
- 例：
```Golang
line := "Golang is fun and simple" // stringだと推論してくれる
num := 10 // intだと推論してくれる
```
## 複数変数の定義
### 初期値なしの場合
- 定義：`var 変数名1, 変数名2,...変数名n 変数型`
- 例：
```Golang
var num1, num2, num3 int
```
### 初期値ありの場合
- 定義：`var 変数名1, 変数名2,...変数名n 変数型 = 値1, 値2,...値n`
- 例：
```Golang
var num1, num2 num3 int = 2, 3, 5
```
- エラー例：
```Golang
var num1, num2, num3 int = 10
```
複数変数でも、型推論のおかげでvarと変数型を省略できます。その場合も、型推論用の`:=`を用います。
- 例：
```Golang
num1, num2, num3 := 2, 3, 5
```
## 複数型の変数をまとめて定義
- 定義：
var (
　　変数名1 変数型 = 値
　　変数名2 変数型
　　変数名3 := 値
　　変数名４, 変数名５ 変数型 = 値
　　変数名６, 変数名７ 変数型
　　変数名８, 変数名９　:= 値
)

- 例：
```Golang
var (
      num1         int     = 2
      line1        string
      line2               := "Golang"
      num2, num3   int     = 3, 5
      line3, line4 string
      num4, num5          := 7, 11
    )
```
## 初期値なし変数のデフォルト値
未初期化の変数は、型に応じたゼロ値で初期化される。
### デフォルト値：
- 文字列は空文字列 `""`
- 整数は `0`
- ブール値は `false`
【備忘録】RESTfull APIについてまとめてみた。

## 参考記事
https://ramble.impl.co.jp/2886/

https://www.infraexpert.com/study/sdn09.html#google_vignette

https://udemy.benesse.co.jp/development/restful-api.html

https://apidog.com/jp/blog/restful-api-overview/

## APIとは
API（Application Programming Interface）とは、プログラムやアプリケーションの機能を外部から利用するためのインターフェース。外部のプログラムやアプリケーションは、APIを呼び出すことで、必要な機能を利用することができる。APIを利用することで、開発者は他のプログラムやアプリケーションとデータをやり取りしたり、機能を利用したりすることができる。

APIは、Webアプリケーション、モバイルアプリケーション、デスクトップアプリケーションなど、様々な種類のアプリケーションで使用され、プログラミング言語やプラットフォームに依存しないため、異なるシステム間での情報交換にも利用される。

## RESTとは
REST(Representational State Transfer)は、Webアーキテクチャのスタイルの1つで、Web上のリソースを表現し、アクセスするための設計原則の集合体。RESTは、HTTPプロトコルに基づき、Webの性質に合わせたシンプルな設計が特徴。

## RESTful APIとは
RESTful APIは、RESTの原則に従って設計されたAPIで、プログラムやアプリケーションの機能を外部から利用するためのインターフェース。

> 1. 完璧な REST は REST API と呼び、そうではない場合は RESTful API と呼ぶ。
> 2. REST 原則に従わないものは REST という言葉を使わず、HTTP API などと呼ぶべきである。
> 3. RESTful の -ful は「満たす」を意味するので、RESTful API は REST の原則を満たすべきだ。
> [RESTful Webサービス – O’REILLY](https://www.amazon.co.jp/dp/4873113539?ref_=cm_sw_r_cp_ud_dp_V3Q7XMR8AENYHQTE80XR)

## RESTの4つの設計原則
RESTの原則は、大きく以下の4つに集約できる。※より詳細に分類する場合は6つの原則と言える

#### 原則1: ステートレスなクライアント/サーバプロトコル
HTTPメッセージの全てがリクエストを理解するための必要な情報を含んでいることから、HTTP通信を行うクライアントもサーバもメッセージ間におけるセッションの状態を記憶している必要がない
※ステートレスと表現しているが、実際にはCookieなどを使用し、セッション状態を管理している

#### 原則2: リソースを一意なURIにより識別される
RESTfulなシステムでは全てのリソースはURI(Uniform Resource Identifeier)で表現されるユニークなアドレスを持つ

#### 原則3: HTTPメソッドで操作方法を表現した統一されたインターフェース
リソースを操作するメソッドは、HTTPで定義されている"GET"、"POST"、"PUT"、"DELETE"などを使用する。つまり、情報を操作する命令体系があらかじめ定義されている。

#### 原則4: アプリケーション情報と状態遷移の両方を扱えるハイパーメディアの仕様
リソースを様々な形式(HTML、XML、JSON、バイナリ)で表現できるようにする。また、関連するデータはハイパーメディア(リンク)としてデータに含めることができる
【TryHackMe】Windows Fundamentals 1：Walkthrough

# 概要

TryHackMe「Windows Fundamentals 1」のWalkthroughです。

https://tryhackme.com/r/room/windowsfundamentals1xbx

# Task2

## **Q1**.*What encryption can you enable on Pro that you can't enable in Home?*

**A**.**BitLocker**

# Task3

## **Q1**.*Which selection will hide/disable the Search box?*

`Search`->`Hidden`から検索ボックスの表示を設定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/4946414a-b2ff-8e95-5bfa-a31a0a3e67dc.png)

**A**.**Hidden**

## **Q2**.*Which selection will hide/disable the Task View button?*

`Show Task View button`から表示設定を出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/9963c3e0-a461-20e5-a6f5-6fe9599570b3.png)

**A**.**Show Task View button**

## **Q3**.*Besides Clock and Network, what other icon is visible in the Notification Area?*

**Hint**.*Try right-clicking the icon*

**A**.**Action Center**

# Task4

## **Q1**.*What is the meaning of NTFS?*

**A**.**New Technology File System**

# Task5

## **Q1**.*What is the system variable for the Windows folder?*

**A**.**%windir%**

# Task6

## **Q1**.*What is the name of the other user account?*

`lusrmgr.msc`からユーザーを確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/0a8e0b6f-582e-e3f5-7383-c5c141db08b0.png)

**A**.**tryhackmebilly**

## **Q2**.*What groups is this user a member of?*

アカウントのプロパティから`Member Of`でグループを確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/3c57c018-6e01-993f-290b-66f1c5f425c9.png)

**A**.**Remote Desktop Users,Users**

## **Q3**.*What built-in account is for guest access to the computer?*

`Guest`アカウントが存在します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/ce832d98-8b83-e083-7cca-cb6fb02ca8f3.png)

**A**.**Guest**

## **Q4**.*What is the account description?*

`tryhackmebilly`アカウントのdescriptionを確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/7ee3ff93-6d40-ca08-95ff-485b3e592e87.png)

**A**.**window$Fun1!**

# Task7

## **Q1**.*What does UAC mean?*

**A**.**User Account Control**

# Task8

## **Q1**.*In the Control Panel, change the view to Small icons. What is the last setting in the Control Panel view?*

`Control Panel`を開き表示設定を`Small icons`にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/d6ec08e3-e69d-c876-1e73-d96aa995e0b7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/b29df887-b8f7-5d7c-f94b-591b3e181af2.png)

**A**.**Windows Defender Firewall**

# Task9

## **Q1**.*What is the keyboard shortcut to open Task Manager?*

**A**.**Ctrl+Shift+Esc**
【Ruby・Rails】インストールしたジェムがどこにインストールされているかを確認

# はじめに
* Rails でアプリを開発したものの、初歩的な話として『**gem がどこにインストールされて使えるのか**』というのが分かっていなかったため調査
* 私の場合は Docker を使用しております
    * 人によっては差分があるかもしれませんので参考程度にご覧ください

# gem の概要から

https://pikawaka.com/ruby/how-gem-works

* "ライブラリ"は個人がイチから実装しようとしたら大変な処理を簡単に利用できるした完成済みの提供されているコード
* "gem" は Rails で最初からインストールされている標準搭載のライブラリではない別途インストールが必要なライブラリ

# インストールされた gem は何処へ？

https://imaizumimr.hatenablog.com/entry/2021/01/01/190349

私が今まで理解していなかった疑問なのですが、「Gemfile に書いてインストールした gem はどこに保存されている」のでしょうか？

## ジェムのインストール先の確認

```bash:コマンド1
docker compose exec web bash
gem environment gemdir
```

(画像1：コマンド1 - 実行結果例)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/717e6d74-2958-60ea-b7dc-3181cc536376.png)

## 実際にどんな gem がインストールされているか
* 私の場合、下記のコマンド2を実行した所 784 個のジェムが確認できました
* ここから Web アプリが読み込んで使用しているのだと理解

```bash:コマンド2
cd /usr/local/bundle/gems
ls -l
```

(画像2：コマンド2 - 実行結果例)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3518714/5ebbcb19-5021-94ce-e557-b0c597334c32.png)


---
### 参考資料

https://pikawaka.com/ruby/how-gem-works

https://imaizumimr.hatenablog.com/entry/2021/01/01/190349
Reactで初めてのアプリ制作「学習記録アプリ」振り返り

## はじめに
React + JavaScriptで機能のみで構成された学習記録アプリを作成しました。
1/4にJISOUというプログラミングコーチングにジョインしてから、このような流れで初めてアプリケーションを作りました。

1. udemyでインプット（1-3日）
1. gitやviteなどの環境構築（2日）
1. アプリの制作（10日）

![B1ByypmbA.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977506/85442117-466b-1cf9-d5a7-86cbb22eff6e.gif)
こんな感じで、スタイル無しの機能だけで構成されたシンプルなアプリケーションです。

## 気付き・学び
私はWEBから入ったので、関数型プログラミングの思想に最初は馴染めず抵抗があり理解に苦労しました。

しかし、「REACTってfigmaのコンポーネントの概念と近しいものがあるな」、と気がついて以降、少しずつ仲良くなれるかもなと思い始めました。

そもそもコンポーネント化することの必要性はいつもfigmaを触っていて痛感しているので、これは誰かと大きなシステムを作り上げるために最適化された言語なんだろうな、と感じています。

## 苦労した点
技術的側面だとstateの扱いやレンダリングの概念、JSの省略記法や論理演算子など、とにかく関数ベースの書き方が難しくて馴染みがなく難しく感じました。何度もudemyのチュートリアルを視聴しても動かなかったり分からなかったり....。そういう場合はMDNを読んでうまく理解できなかった概念をAIに要約してもらい、メモをとってアウトプットし、余裕がある日はそれをQiitaの記事にまとめたりしていました。

また、AIを使う塩梅については常に悩み続けていました。
最初は何がわからないかもわからないから、キャンバスでコードを出してAIと壁打ちしながら作っていました。

しかし、補助輪なしじゃ歩けない状況に陥っていることに気が付き、AIとの向き合い方を考えることに。
またAIに書いてもらったコードを流用してもエラーが起きた時に対応できず、結局全部書き直しました。でも結果として、それのが良かったと思います。
#### AIに労力を委譲するのはいいけど、能力を委譲させるのは良くない

これは肝に銘じた方が良さそうです。。！

なので、最終的にコード一行一行を「何のためにこのコードを書いたのか」が、きちんと自分の中で腹落ちしたらOKとするようにして次に進みました。

とはいえMDNを読んでうまく理解できなかった概念をAIに要約してもらったりなどはとても有用だったので、プログラミング学習においてAIとはうまく付き合えることが大事だと思います。


## 成長を感じた点
- 少しずつエンジニアっぽいマインドセットをインプットしている
- うまくいかなかったらまず仮説を立ててから検証を心がけるように
- その日学習したことはなるべくメモをとってまとめるようにした

まだ初めて十日目なので引き続きやってこうと思います 🙌


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

https://projisou.jp
【TryHackMe】Lo-Fi：Walkthrough

# 概要

TryHackMe「Lo-Fi」のWalkthroughです。

https://tryhackme.com/r/room/lofi

# Task1

## **Q1**.*Climb the filesystem to find the flag!*

ポートスキャンを実行します。

```
$ nmap -Pn -T4 -sVC -A -p- 10.10.174.194 -oN nmap_result
PORT      STATE    SERVICE VERSION
22/tcp    open     ssh     OpenSSH 8.2p1 Ubuntu 4ubuntu0.4 (Ubuntu Linux; protocol 2.0)
| ssh-hostkey: 
|   3072 a5:97:85:99:30:80:e2:7b:02:b1:ac:c9:65:e1:9d:05 (RSA)
|   256 e8:dc:f6:8d:84:fa:ab:0d:80:77:23:47:78:f4:31:ad (ECDSA)
|_  256 24:82:a1:9c:a6:3b:38:58:52:c2:21:13:25:86:55:f8 (ED25519)
80/tcp    open     http    Apache httpd 2.2.22 ((Ubuntu))
|_http-title: Lo-Fi Music
|_http-server-header: Apache/2.2.22 (Ubuntu)
```

ポートの稼働状況が分かりました。

|ポート|サービス|バージョン|
|:-:|:-:|:-:|
|22|ssh|OpenSSH 8.2p1|
|80|http|Apache/2.2.22|

`80`番ポートにアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/b6281538-2cce-ba15-ccb2-dcbf197e4ee9.png)

`Discography`のリンクをクリックすると`?page=`で指定されたファイルが読み込まれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/7606226b-7161-1b0c-78f6-9d95837649ae.png)

LFIが出来そうです。
`?page=../../../../../../etc/passwd`のようにすると`/etc/passwd`ファイルを読み込めました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/bc28c296-a5c4-a3aa-6470-bed96c7140f2.png)

`?page=../../../../../../flag.txt`でフラグを入手できました。

![2025-01-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3005822/7525cdab-4617-16f1-1fb6-81092e41f27d.png)

**A**.**flag{e4478e0eab69bd642b8238765dcb7d18}**
S3の論理削除されたファイルをaws-sdk-rubyから復旧する

# 背景

S3のバケットのバージョニングが有効になっている場合、バケット内のファイルを削除すると論理削除されたことになる。論理削除されたファイルなのでリカバリもできる。
S3の論理削除は、保存されたファイルの最新のバージョンとして削除マーカーを付け加えることで実現している。よって、この最後の削除マーカーを削除すれば、ファイルが復旧する。
その削除マーカーをRubyで消す処理のメモをここに残す。

# バージョン

```
aws-sdk-s3 (1.156.0)
```

# 注意点

最新のファイルとその一個前の新しいファイルが両方とも削除マーカーになっていることもあったので、ここに記した手順は常に完全なものでないため注意。どんなバージョンデータがあるかはS3の使い方によるため、そこは個別に判断する必要がある。

# 処理

```rb
# s3:ListBucketVersions などの普通のWEBサーバーでは使わない権限が必要になるはずなので、
# 作業するときは適切な権限のあるキー・トークンが必要になる
Aws.config.update({ credentials: Aws::Credentials.new('キー','トークン') })
resource = Aws::S3::Resource.new(region: 'リージョン名（ex. ap-northeast-1）')
s3_bucket = resource.bucket('バケット名')

# ファイル名までのパス
file_name = 'dir1/dir2/some_file.pdf'

# 対象ファイルの全バージョンを取得する
data = s3_bucket.object_versions(prefix: file_name).map(&:data)
# 最新のバージョンを取得する
last_datum = data.filter { _1.is_latest }.first

if data.count == 0
  puts "[WARN] データが見つかりませんでした: #{file_name}"
elsif last_datum.class == Aws::S3::Types::ObjectVersion
  # 最新のファイルが ObjectVersion だったらファイルは有効なので復旧する必要はない
  puts "既に復旧が終わっています: #{file_name}"
elsif last_datum.class == Aws::S3::Types::DeleteMarkerEntry
  # 最新のバージョンが削除マーカーのとき
  # 削除マーカーを削除する
  s3_bucket.object(file_name).delete(version_id: last_datum.version_id)
  puts "復旧しました: #{file_name}"
else
  puts "[WARN] 想定外のデータです: #{file_name}"
end
```
#0020（2024/01/20）DHCPサーバとは

# DHCPサーバとは？

**DHCPサーバ**（Dynamic Host Configuration Protocolサーバ）は、ネットワーク内のデバイス（クライアント）に対して、IPアドレスやその他のネットワーク設定を自動的に割り当てる役割を持つサーバです。手動で設定する必要をなくし、ネットワーク管理を簡素化します。

---

## **DHCPサーバの主な役割**

1. **IPアドレスの動的割り当て**
   - クライアントデバイス（PC、スマートフォン、プリンタなど）がネットワークに接続する際、利用可能なIPアドレスを自動的に割り当てます。
   - 手動で設定する必要がなく、効率的にアドレスを管理できます。

2. **ネットワーク設定の配布**
   - IPアドレスに加え、以下の情報も自動的に配布します:
     - サブネットマスク
     - デフォルトゲートウェイ
     - DNSサーバアドレス
     - その他オプション（例: NTPサーバ、ドメイン名）

3. **アドレスのリース管理**
   - IPアドレスをクライアントに一時的にリース（貸与）します。
   - リース期間が終了すると、アドレスを回収して再利用可能にします。

---

## **DHCPサーバのメリット**

- **手動設定の削減:** ネットワーク管理者がデバイスごとにIPアドレスを設定する手間を省けます。
- **効率的なアドレス利用:** 使用していないアドレスを他のデバイスに再割り当てすることで、アドレス空間を最適化します。
- **柔軟性:** ネットワークに新しいデバイスを簡単に追加可能。
- **設定ミスの防止:** 手動入力時のエラーを防ぎ、ネットワークの安定性を向上させます。

---

## **DHCPの仕組み**

1. **DHCP Discover (発見):**
   - クライアントがネットワークに接続し、DHCPサーバを探します。
   - ブロードキャストメッセージを送信。

2. **DHCP Offer (提案):**
   - DHCPサーバが利用可能なIPアドレスと設定情報を提案します。

3. **DHCP Request (要求):**
   - クライアントが提案された設定をリクエストします。

4. **DHCP Acknowledgement (確認):**
   - DHCPサーバがリクエストを承認し、設定をクライアントに送信。

---

## **利用例**

- **家庭用ネットワーク:** Wi-FiルータがDHCPサーバとして機能し、スマートフォンやPCにIPアドレスを割り当て。
- **企業ネットワーク:** 大規模なネットワーク環境でのIPアドレス管理を効率化。
- **IoT環境:** 多数のIoTデバイスに対して自動設定を提供。

---

## **注意点**

- **IPアドレス競合:** 他の手動設定デバイスとIPアドレスが競合しないように、DHCPサーバの設定で静的IPアドレスの範囲を予約する必要があります。
- **セキュリティ:** 不正なデバイスへのIPアドレス提供を防ぐために、フィルタリングや認証を設定することが推奨されます。

---

## **関連技術**

- **DNS:** ホスト名とIPアドレスを関連付けるサービス。DHCPと連携して動作。
- **NAT:** DHCPで割り当てられたプライベートIPアドレスを、インターネットアクセス用に変換。

---

DHCPサーバは、ネットワークの規模を問わず、効率的なIPアドレス管理と運用の簡素化を実現する重要な技術です。
材料力学「オイラー座屈(Buckling)を教えて下さい。」をAI先生に聞きました。sympyで。


**オイラー座屈を教えて下さい。**
**オイラー座屈の計算式を証明して下さい。**
**オイラー座屈の証明を微分方程式で教えて下さい。**
**オイラー座屈の証明を微分方程式で、sympyのソースコードで教えて下さい。**

# Gemini先生へ

>(回答抜粋)
...証明の難しさ
オイラー座屈の証明は、数学的に厳密に行うためには、以下の知識が必要です。
・微分方程式: 常微分方程式の解法、特に境界値問題
・変分法: 関数の極値問題を扱う数学の分野
・行列: 固有値問題を解くための行列の理論
...

```python
from sympy import *

# 変数の定義
x = symbols('x')
w = Function('w')(x)
E, I, P, L = symbols('E I P L', positive=True)

# 微分方程式の定義
diffeq = Eq(E*w.diff(x, x) + P*w, 0)
print(diffeq)

# 一般解
sol = dsolve(diffeq, w)
print(sol)

# 境界条件を適用
C1 = symbols('C1')
C2 = symbols('C2')
sol = sol.subs(w.subs(x, 0), 0).subs(w.subs(x, L), 0)
print(sol)

# 座屈荷重を求める
from sympy.solvers import solve
eq = sol.args[1].args[1]
sol_P = solve(eq, P)
print(sol_P)
```
>このコードを実行すると、以下の様な結果が得られます。

```
Eq(E*Derivative(w(x), (x, 2)) + P*w(x), 0)
Eq(w(x), (C1*sin(sqrt(P/E)*x))/sqrt(P/E) + C2*cos(sqrt(P/E)*x))
Eq(0, C2) & Eq(0, C1*sin(sqrt(P/E)*L)/sqrt(P/E))
[Eq(P, E*pi**2*n**2/L**2)]  # nは任意の整数
```
私のvscodeの結果
```
Eq(E*Derivative(w(x), (x, 2)) + P*w(x), 0)
Eq(w(x), C1*sin(sqrt(P)*x/sqrt(E)) + C2*cos(sqrt(P)*x/sqrt(E)))
Eq(w(x), C1*sin(sqrt(P)*x/sqrt(E)) + C2*cos(sqrt(P)*x/sqrt(E)))
[pi**2*E/(4*x**2), 9*pi**2*E/(4*x**2)]
```
# ChatGPT先生へ

# copilot先生へ

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

#### wikipedia 
＞Plate buckling
＞支配方程式

https://en.wikipedia.org/wiki/Buckling

https://ja.wikipedia.org/wiki/座屈#圧縮荷重を受ける長柱の曲げ座屈応力

#### Qiita

https://qiita.com/mrrclb48z/items/c3274daf5f7a99cfe027

#### Google検索
【Laravel10】`Model::withTrashed()->firstOrNew()->restore()->save()`でINSERTされない。

どういうこと？

有効であるか論理削除されているか存在しないかいずれかわからない状態のレコードがあるけど、事前の状態に関わらず有効にして保存したい。

というわけでこんなかんじのクエリを実行したわけですよ。

```php:だめ
class Hoge extends Model{
    use SoftDeletes;
}

$model = Hoge::withTrashed()->firstOrNew(['id'=>999]);

$model->foo = 'bar';
$model->restore();
$model->save();
```

これ、論理削除されたレコードがあれば論理削除が解除されてきちんと有効になりますが、存在しないレコードはINSERTされません。

なんで？？？？？？

エラーは出ないし`restore()`も`save()`もtrueを返してくるから正しく動いたと勘違いするじゃないですか。


正解はこうです。

```php:OK
$model = Hoge::withTrashed()->firstOrNew(['id'=>999]);

$model->foo = 'bar';
$model->save();
$model->restore();
```

そんなんわかるか！

`save()`は保存時に元のデータと保存するデータで差分があるかをチェックし、差があるときだけ更新します。

`restore()`すると削除フラグを消してデータを保存し、その差分をリセットします。
困ったことに、まだDB上に存在しないレコードだった場合は、差分をリセットするけどデータの保存はしません。
そのせいで、`save()`したときに差分がないから保存しないと判断されてしまいました。

ということで試していませんが、順番を変える以外にも`firstOrNew()`のかわりに`firstOrCreate()`を使うと正しく動くと思います。

`firstOrNew()`はレコードが存在しなければ作成する、ただしDBには保存しない。
`firstOrCreate()`はレコードが存在しなければ作成し、DBに保存まで行う。
なので最初に`firstOrCreate()`しておけば、`restore()`時には既にレコードが存在するから更新してくれるというわけです。

# まとめ

`restore()`がエラーを出さないのが悪い。
Copilot演習シナリオ：プロジェクト計画の立案

#### Copilot 無料版用 MS-4004
https://learn.microsoft.com/ja-jp/training/paths/empower-workforce-copilot-use-cases/
***
この演習では、Microsoft.com/copilot の Business Chat (旧称 Bing の Microsoft Copilot) を使用して、ネットワーク セキュリティ製品をインストールするプロジェクト計画を作成します。 

## 演習シナリオ
あなたは、太陽ネットワーク㈱ の ネットワークエンジニアとして、Paloalto Networks社のPA-54457 ネットワーク セキュリティ製品の仕様を調査済です。 太陽ネットワーク㈱ が現在使用中の製品をはるかに超える高度なセキュリティ保護を提供する機能に期待して、この製品を導入する予定です。 ただし、企業ネットワークが複雑であることを考慮し、実践に向けてのガイダンスを提供するプロジェクト計画を作成する必要があります。 そのため、ネットワーク セキュリティ コンポーネントのインストールに関する [ITIL](https://www.axelos.com/certifications/itil-service-management/)ならびに[PMBOK](https://www.pmi-japan.org/)のガイドラインに基づいて、Copilot にプロジェクト計画の作成を依頼します。 次に、Copilot で製品仕様レポートを分析、その要件をプロジェクト計画に組み込みます。
###### 補足1 ITIL
Information Technology Infrastructure Library（ITIL）とは、ITサービスマネジメントにおけるベストプラクティス（成功事例）をまとめた書籍群。1989年にイギリス政府のCCTA[1]によって公表された。ITILの読み方は「アイティル」、「アイティーアイエル」などがある。ITサービス全体においてデファクトスタンダードとなりつつあり、重要な位置付けとなっている
###### 補足2 PMBOK
PMBOK（Project Management Body of Knowledge、頭字語として「ピンボック」と読まれることがある）は、「プロジェクトマネジメント知識体系ガイド」（英語: A Guide to the Project Management Body of Knowledge、略称： PMBOK Guide、PMBOKガイド）の略語である。PMBOKガイドは、プロジェクトマネジメント協会 (PMI) が発行している。

## 演習手順
- Microsoft Edge で、次の URL を入力して Microsoft Bing に移動します: https://bing.com
- Microsoft Bing ホーム ページのページ上部に表示されるタブのリストで、[Copilot] を選択します。 これにより、Microsoft Copilot が開きます。
- これで、Copilot を使用する準備が整いました。 次のプロンプトを入力します。このプロンプトは、Copilot が Microsoft Copilot の Web コンテンツ プラグインを介してパブリック Web データにアクセスしてするように指示します。プロンプト フィールドの下隅にある [送信] 矢印を選択します: 
~~~
私は太陽ネットワーク㈱の情報システム部でネットワークエンジニアをしています。
新しいネットワーク セキュリティ製品を企業ネットワークにインストールするためのプロジェクト計画を作成してください。
この計画は、ネットワーク セキュリティ製品をインストールするための、最新のITILガイドラインに基づいてください。
~~~
- Copilot が作成したプロジェクト計画を確認しますが、PMBOK規格に必要な領域をすべて網羅していないため、満足できません。 
次のプロンプトを入力して、特に関心のある領域を含めて計画を修正します。 
~~~
これは良いスタートでしたが、重要なエリアが不足しているように思います。
既存のリストにPMBOKの観点から不足している情報があれば追加してください。
~~~
- 修正されたプロジェクト計画を確認します。 幅広いトピックをカバーできたことに満足したため、今度は、Paloalto Networks社のPA-54457 セキュリティ製品の製品仕様の情報を使用して 計画を更新するように Copilot に依頼します。
次のプロンプトを入力して、特に関心のある領域を含めて計画を修正します。  
~~~
このバージョンは良くなりました。
Paloalto Networks社のPA-5445 セキュリティ製品の製品仕様を確認し、この製品仕様の情報を使用してプロジェクト計画を更新してください。
可用性担保に関するベストプラクティス情報があれば、ネットワーク設計に高可用性構成を取り入れるよう修正してください。
~~~
- Copilot が製品仕様の機能をプロジェクト計画にどのように挿入したかを確認します。 
これは良いように見えますが、プロジェクト計画には具体的な詳細が欠けていると感じます。 
この問題に対処するには、次のプロンプトを入力します: 
~~~
後少しです。レポートの各項目を複数の詳細な手順に分割してください。
~~~
- 結果を確認します。 
- プロジェクト計画が作成されたので、それを Word ドキュメントに保存する必要があります。
- Copilot の最後の回答の下部にある下矢印アイコン ([エクスポート]) を選択して、回答の内容をエクスポートします。 ドロップダウン メニューが表示され、応答をエクスポートするファイルの種類を選択できます。 [Word] を選択します。 新しい Word ドキュメントは PC のローカルの [ダウンロード] フォルダーに保存されます。

この演習はこれで終了です。
みなさまの実業務にそって応用してみましょう。

##### 以上。
LWCでsessionStorageを使用する

sessionStorageの詳しい説明は[こちら](https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage)。

セッションストレージを使用することで、URLパラメータを使用せずに遷移先のページに値を受け渡すことができます。入力データの一時保存にも使用できます。

## セッションストレージにデータを保存する

`sessionStorage.setItem("key", "value");`を使用します。

```javascript
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class SampleSetSessionStorage extends NavigationMixin(LightningElement) {
    handleClick() {
        sessionStorage.setItem("sample", JSON.stringify({ message: "サンプルテキスト", timestamp: new Date().toISOString() }));
        
        this[NavigationMixin.Navigate]({
            type: "comm__namedPage",
            attributes: {
                name: "Page2__c",
            },
        });
    }
}
```

保存した値はブラウザの開発者ツールから確認できます。
![スクリーンショット 2025-01-20 19.08.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125621/2da107a4-0e4e-a910-8936-ef4f62397850.png)

## セッションストレージからデータを取り出す

`let data = sessionStorage.getItem("key");`でデータを取得します。
`sessionStorage.removeItem("key");`でデータを削除します。

```javascript
import { LightningElement } from 'lwc';

export default class SampleGetSessionStorage extends LightningElement {
    data;

    connectedCallback() {
        const item = sessionStorage.getItem("sample");
        if (item) {
            this.data = JSON.parse(item);
            sessionStorage.removeItem("sample");
        }
    }
}
```

## 参考

- [Window: sessionStorage プロパティ - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage)
９日目 streamlitでSQLを見えるように

はい、まとめて記事を出力します。

# ChromaDBを使って初めてのドキュメント管理アプリを作ってみた！

## はじめに
こんにちは！今回は、ChromaDBとStreamlitを使って、マークダウンファイルを管理・検索できるアプリケーションを作ってみました。ベクトルデータベースの勉強を兼ねて、実践的なアプリケーションを作る過程で学んだことを共有したいと思います。

## 🌟 完成したもの
- マークダウンファイルのアップロード（単一/フォルダ一括）
- ドキュメントの全文検索
- コレクション管理
- 埋め込みベクトルの可視化
- SQLiteデータの直接閲覧

## 🔧 使用した技術
- Python 3.x
- ChromaDB：ベクトルデータベース
- Streamlit：Web UI作成
- Pandas：データ処理
- SQLite3：データベース操作

## 💡 アプリケーションの特徴
### 1. シンプルなUI
```python
menu = st.sidebar.selectbox(
    "メニュー",
    ["コレクション", "ドキュメント", "SQLite", "ベクトル"]
)
```
サイドバーで4つの主要機能に簡単にアクセスできます。

### 2. 柔軟なファイルアップロード
```python
if upload_type == "フォルダ一括":
    folder_path = st.text_input(
        "マークダウンファイルが含まれるディレクトリのパスを入力",
        placeholder="/path/to/markdown/files",
        help="指定したディレクトリ内のすべての.mdファイルが処理されます"
    )
```
フォルダ内の全マークダウンファイルを一括処理できます。

### 3. メタデータの自動付与
```python
metadata = {
    "category": "ドキュメント",
    "file_name": filename,
    "upload_date": pd.Timestamp.now().strftime("%Y-%m-%d %H:%M:%S")
}
```
ファイル名や日時を自動で記録します。

## 🎓 学んだこと
### 1. ChromaDBの基本
- PersistentClientを使用したデータの永続化
- コレクションによるドキュメント管理
- 埋め込みベクトルの扱い方

### 2. Streamlitのテクニック
- キャッシュを使用したデータベース接続
- 動的なUIの構築
- データフレームの表示とフィルタリング

### 3. エラーハンドリング
```python
try:
    with open(file_path, 'r', encoding='utf-8') as f:
        content = f.read()
except Exception as e:
    st.error(f"ファイル {file} の読み込みに失敗しました: {str(e)}")
```
適切なエラーメッセージで使いやすさを向上。

## 🔍 ハマったポイントと解決策
1. **ChromaDBのバージョン対応**
   - v0.6.0で一部APIが変更
   - ドキュメントを参照しながら最新の書き方に対応

2. **大量ファイルの処理**
   - メモリ使用量に注意
   - ファイル読み込みを逐次処理に変更

3. **UIの使いやすさ**
   - フィードバックを明確に
   - 処理状況の可視化

## 📝 今後の改善点
1. 検索機能の強化
   - 類似度検索の実装
   - メタデータによるフィルタリング

2. パフォーマンスの最適化
   - 大規模データセット対応
   - 処理の非同期化

## まとめ
ChromaDBとStreamlitを組み合わせることで、手軽にドキュメント管理システムを構築できました。ベクトルデータベースの基本的な使い方を学びながら、実用的なアプリケーションを作れたのは良い経験になりました。
ServiceNow 新規でテーブルカラムを増やした時にフォームセクション（フォームレイアウト）に新しいカラムを表示させないようにする

# 背景
テーブルカラムは基本的にデータを格納するために作成すると思いますが、
必ずしも人が入力するだけの項目ではないときもありますよね。
 ex）
　・システム的にフローで自動でデータが入ってくるカラム
　・将来的に使う可能性があり、いまはユーザーに見せたくないもの
 　など

以前、お客様と会話する中でそんな話があり、以下のコミュニティがすべてではありますが、解決策がありました。
[How to stop new fields from being automatically added to form layouts](https://www.servicenow.com/community/developer-articles/how-to-stop-new-fields-from-being-automatically-added-to-form/ta-p/2317624)


# 結論
ServiceNowはデフォルト(※1）で以下のビジネスルールがアクティブになっており、カラムを追加すると自動的にフォームレイアウトに追加される仕様になっています。

**Business Rule「Add New Column To Form Section」**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3989988/c96dd403-98e0-eb03-42f6-73e2bf9278b4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3989988/c68133aa-0987-37dd-76a5-47cbd8d79604.png)

背景に記載したような作業を多く行うときは、このビジネスルールを非アクティブにさえしてしまえば、
あとからフォームレイアウトを修正する手間は省けます。

# 注意点
・※1 Xanaduバージョン時点の情報です
・OOTBのBusiness Ruleなので、実際に設定を変える際はステークホルダー間での合意を前提としてください。
・インスタンス全体の設定になるため、アクティブ／非アクティブ化だけでは「このテーブルだけはフォームレイアウトにデフォルトで入らないようにする」などの細かい設定はできないです。仮に非アクティブ化したらすべてのテーブルにおいてカラムを追加する際にフォームレイアウトへの追加はされなくなります。

以上
配列（Array）データ構造の詳細解説

## 配列の基本概念

配列は、同じデータ型の要素を連続したメモリ空間に格納する最も基本的なデータ構造である。各要素には添字（インデックス）を使ってアクセスすることができる。

## 特徴と性能

- インデックスによる直接アクセス（O(1)の時間複雑度）
- 連続したメモリ空間による効率的なメモリ使用
- 固定サイズ（静的配列）または可変サイズ（動的配列）
- キャッシュの局所性が高く、高速な要素走査が可能

## 主な操作と時間計算量

| **操作**                | **時間計算量** | **説明**                                 |
| ----------------------- | -------------- | ---------------------------------------- |
| 要素へのアクセス        | O(1)           | インデックスを使用した直接アクセス       |
| 要素の挿入（末尾）      | O(1)           | 動的配列の場合、再配置が必要な場合はO(n) |
| 要素の挿入（先頭/中間） | O(n)           | 後続要素のシフトが必要                   |
| 要素の削除（末尾）      | O(1)           | 最後の要素の削除                         |
| 要素の削除（先頭/中間） | O(n)           | 後続要素のシフトが必要                   |
| 配列の探索              | O(n)           | 線形探索の場合                           |

## 配列の種類

### 1. 静的配列

サイズが固定された配列で、宣言時にメモリが確保される。

### Rubyでの実装例

```ruby
# 固定サイズの配列作成
array = Array.new(5).freeze

# 要素の追加
array[0] = 1
array[1] = 2
array[2] = 3

# 要素へのアクセス
puts array[1]  # 2を出力

# 配列の走査
array.each { |element| puts element }

# 配列のメソッドを使用した操作
array.push(4)        # 実行時にエラーになる
array.unshift(0)     # 実行時にエラーになる
array.pop            # 実行時にエラーになる
array.shift          # 実行時にエラーになる
array.insert(2, 10)  # 実行時にエラーになる
```

### 2. 動的配列

サイズが可変の配列で、要素数に応じて自動的にメモリが再割り当てされる。

### Rubyでの実装例

```ruby
# 動的配列の操作
array = []
array << 1          # 末尾に追加（push演算子）
array.concat([2,3]) # 複数要素の追加
array.delete_at(1)  # インデックス1の要素を削除

# 配列の変換と処理
mapped = array.map { |x| x * 2 }    # 各要素を2倍
filtered = array.select { |x| x > 2} # 2より大きい要素を抽出
```

## メリットとデメリット

### メリット

- 要素への高速なアクセス（O(1)）
- メモリ効率が良い（連続したメモリ空間）
- キャッシュの局所性による高速な走査
- 実装が単純で理解しやすい

### デメリット

- 固定サイズの場合、サイズ変更が不可能
- 要素の挿入・削除が非効率（O(n)）
- メモリの事前確保が必要
- 連続したメモリ空間が必要

## 一般的な使用例

- 行列演算や画像処理（多次元配列）
- 固定長データの格納（ユーザーIDリストなど）
- バッファやキャッシュの実装
- データベースのインデックス構造

## 参照
[^1] [^2] [^3] [^4] [^5] [^6] [^7] [^8] [^9]
[^1]: [https://note.com/enjoy_program/n/n4ad7f652bc6f](https://note.com/enjoy_program/n/n4ad7f652bc6f)
[^2]: [https://amprime.hatenablog.com/entry/2023/09/19/233345](https://amprime.hatenablog.com/entry/2023/09/19/233345)
[^3]: [https://ja.wikibooks.org/wiki/C言語/配列](https://ja.wikibooks.org/wiki/C%E8%A8%80%E8%AA%9E/%E9%85%8D%E5%88%97)
[^4]: [https://ja.wikibooks.org/wiki/配列](https://ja.wikibooks.org/wiki/%E9%85%8D%E5%88%97)
[^5]: [https://ja.wikipedia.org/wiki/配列](https://ja.wikipedia.org/wiki/%E9%85%8D%E5%88%97)
[^6]: [https://www.foresight.jp/fe/column/data-structure/](https://www.foresight.jp/fe/column/data-structure/)
[^7]: [https://zenn.dev/brainyblog/articles/data-structures-beginners-guide](https://zenn.dev/brainyblog/articles/data-structures-beginners-guide)
[^8]: [https://zenn.dev/taka_noiri/scraps/eb90a399de0cb6](https://zenn.dev/taka_noiri/scraps/eb90a399de0cb6)
[^9]: [https://ja.wikibooks.org/wiki/プログラミング/配列](https://ja.wikibooks.org/wiki/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0/%E9%85%8D%E5%88%97)
Reactで入力フォームを使うときの基本まとめ

Reactで入力フォームを使うときの基本について、簡単にまとめました。

## 大まかな流れ

1. Stateを用意
1. 入力イベントの紐付け
1. ボタンやフォーム送信イベントを設定
1. クリアボタンの追加やリセット機能
1. バリデーションの追加


## Stateを用意
Reactでは、フォームの入力内容を`useState`で状態を管理している

### **基本のコード例**
```javascript
import React, { useState } from "react";

const Example = () => {
  const [text, setText] = useState(""); // 入力値を管理する状態

  const handleChange = (e) => {
    setText(e.target.value); // 入力値を状態に反映
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        placeholder="ここに入力"
      />
      <p>あなたの入力: {text}</p>
    </div>
  );
};

export default Example;
```

- **`useState`の使い方**
  - `useState("")`で初期値を空文字に設定
  - `text`は現在の入力値
  - `setText`で`text`を更新
- **動き**
  - 入力が変わると、`handleChange`が呼ばれる
  - 新しい値が`text`に保存され、画面に反映される


## 入力イベントの紐付け

### `onChange`
- `onChange`は、フォームの内容が変わったときに実行される「イベント」のこと
- 文字を入力したり、選択肢を選んだりすると`onChange`が動く

### **基本の仕組み**
```javascript
<input
  type="text" // テキスト入力欄
  value={value} // 入力欄に表示する値を設定
  onChange={(e) => setValue(e.target.value)} // 入力が変わるたびに状態を更新
/>
```
- `value`: 入力欄に表示される内容
- `onChange`: 入力内容が変わるたびに呼び出される関数
- `e.target.value`: 入力された値を取得する


### e.target.value
`e.target.value`はフォームに入力された内容（値）を取得する方法


- **`e`って何？**
  - `e`は「イベントオブジェクト」
  - Reactでは、入力やクリックなどのイベントが発生すると、自動的にこの`e`が関数に渡される

- **`e.target`って何？**
  - `e.target`は、イベントが発生した要素（HTML要素）を指す
  - たとえば、`<input>`で文字を入力した場合、`e.target`はその`<input>`要素

- **`e.target.value`って何？**
  - `e.target.value`は、`<input>`の現在の値（ユーザーが入力した文字）を取得する

### **図解**
```javascript
<input type="text" value="React" />
```
- ユーザーが「React」と入力している場合、
  - `e.target`: `<input>`要素そのもの
  - `e.target.value`: "React"

---

### **e.target.valueの使い方**
```javascript
const handleChange = (e) => {
  console.log(e.target.value); // 入力された値をコンソールに表示
};

<input
  type="text"
  onChange={handleChange} // 入力が変わるたびにhandleChangeを実行
/>
```
- 入力欄に「こんにちは」と入力したら、コンソールに「こんにちは」と表示される


### **コード例**
```javascript
import React, { useState } from "react";

const Greeting = () => {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力してください"
      />
      <p>こんにちは、{name}さん！</p>
    </div>
  );
};

export default Greeting;
```

- 入力した名前がそのまま表示される
- `onChange={(e) => setName(e.target.value)}`で、入力内容を状態に保存



## ポイントまとめ
1. **`value`と`onChange`はセットで使う**
   - `value`で表示する内容を設定
   - `onChange`で入力内容を状態に保存

2. **`e.target.value`を使う**
   - 入力された値を取得するには、`e.target.value`を使う

3. **状態（useState）で値を管理する**
   - 入力内容は必ず`useState`
物理アドレス空間外にアクセスするとどうなるのか

# はじめに
- 仮想化はOSにより提供される。物理アドレス空間よりとても広いアドレス空間 (仮想アドレス空間)が使用可能になるためメモリ外にもアドレスを割り振ることができ、嬉しい。
- アドレスマップというものがある。アドレス空間のうちこの領域はこう使う、と予め決められていることがある。今回使用するCora Z7-07Sボードに搭載されているZynq SoCでも同様で、以下のような区分けがされている。

![Screenshot_2025-01-20_18-00-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531876/3fd6a934-398d-69ea-657e-5424c4eef002.png)

# 疑問
Cora Z7-07Sボード上にDDR3メモリは512MBの容量があるとのこと。
一方でアドレスマップではDDRに1GB分のアドレス空間が割り当てられている。
OSが介在し仮想化が働くならその余剰分もうまくsdカードなどメモリ外の記憶媒体にも割り当てることが出来る。
もし、OS無しの環境下で512MB分ある物理アドレス空間の外にアクセスするとどんな扱いを受けるのだろうか。

# 検証
まずはVIVADOでVITISに持ち込むxsaファイル (bitstream)の用意。
ZynqのPS部分だけを使用するためブロック図はとても簡潔。
![Screenshot_2025-01-20_17-31-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531876/4aa41349-e75a-e085-2fce-51dabf4c1360.png)
周辺機器を使用しないため制約ファイルも必用ない。PSからのUART通信で挙動を確認する。
ここの具体的な手順はFPGAプログラミング大全 Xilinx編を参考にされたし。

次にVITISでPS上で動作させる.cを作成する。
プロジェクトを作成するとlscript.ldが自動生成されている。リンカスクリプトにはアドレス空間のどこをどう使うかの区分けが書かれている。本来は見づらいが、画像のようにVITISが見やすく表示してくれていた。
![Screenshot_2025-01-20_17-50-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531876/85d50ed9-0394-ecd1-7249-00e718bbdf7b.png)
`ps7_ddr_0`はアドレスマップに記載されている`0010_0000~3FFF_FFFF`の半分の領域を示している。`ps7_ram_0` `ps7_ram_1`はアドレス空間の上位下位に比較的小さく確保されている。ユーザーが使うような領域ではなさそうなので放置。

`ps7_ddr_0`に`.text`や`.data`セクションが配置されているのでこの領域にプログラムが保存されているとわかる。 (.text領域の始まる開始アドレスなどはリンカが走るまで分からない。設定しようと思えば出来るのだろうか。)

`ps7_ddr_0`にはDDRに割かれた1GB分のアドレス空間の半分が割り当てられている。つまり512MBで、これはCora Z7-07Sに搭載されているDDR3メモリの大きさに等しい。
プログラムからアクセスできるアドレスをこのリンカスクリプトでうまく制限している？
本当に仮想化の働かないOS不在の環境下で安全にプログラムを動作させることができるのだろうか。

VITISがVIVADOで宣言したシステムに応じて`xparameters.h`を用意してくれる。この中にアドレス空間の上限下限が記載されているため活用する。.c内で物理アドレスの外へ書き込むプログラムを作成した。
```c
#define XPAR_PS7_DDR_0_BASEADDRESS 0x100000
#define XPAR_PS7_DDR_0_HIGHADDRESS 0x20000000
```

```c
#include "xparameters.h"
#include "xil_printf.h"
#define OUT_OF_DDR *((volatile unsigned char *) XPAR_PS7_DDR_0_HIGHADDRESS)
int main(void){
    OUT_OF_DDR = 'A';
    xil_printf("%c\r\n", OUT_OF_DDR);
    return 0;
}
```
512MB領域の丁度外側1byteの位置にAを書き込んで読み出すという処理。
ビルド (コンパイル)は成功。リンカが領域外アクセスにエラーを出すものと思っていたため驚いた。
実行する。

`OUT_OF_DDR = 'A'`すると`xil_exception.c`内の無限ループに案内された。
CPU側から例外として扱われた。

# 結論
OSの無い環境下で物理アドレス空間の外にアクセスすると例外として処理される。

# 参考
Zynq-7000 SoC テクニカルリファレンス マニュアル https://docs.amd.com/v/u/ja-JP/ug585-Zynq-7000-TRM
Copilot演習シナリオ：課題解決アプローチ

#### Copilot 無料版用
***
この演習では、Microsoft.com/copilot の Business Chat (旧称 Bing の Microsoft Copilot) を使用して、発生している問題から課題を設定し、複数のフレームワークを用いた課題解決アプローチを生成してみます。 

## 演習シナリオ
あなたは製造業で品質管理業務に従事しています。業務上、繰り返し発生する問題について解決策を模索している状態です。

- Microsoft Bing ホーム ページのページ上部に表示されるタブのリストで、[Copilot] を選択します。 これにより、Microsoft Copilot が開きます。
- これで、Copilot を使用する準備が整いました。 次のプロンプトを入力します。このプロンプトは、Copilot が Microsoft Copilot の Web コンテンツ プラグインを介してパブリック Web データにアクセスしてするように指示します。
- プロンプトは後日見直した際に内容がわかりやすいよう、4つの項目に分類して記載しています。
1. 背景　
1. 命令　
1. 入力　""" """で囲む
1. 出力
- プロンプト フィールドの下隅にある [送信] 矢印を選択します: 
~~~
#背景 
私は顧客に常駐しているITエンジニアです。
業務の課題解決を提案するコンサルタントを兼ねています。
顧客とのヒアリング結果から、業務問題を整理する必要があります。 
#命令 
発生している現象を整理してください。 
その現象から推測できる潜在的な問題を示唆してください。 
各項目に対し、その推測にいたった過程を３段落で記載してください。
#入力 
""" 
各種ノウハウが組織内共有にとどまり、全社に展開できていない。 
""" 
#出力 
・現象の整理。 
・潜在的な問題の推測を箇条書きで簡潔に記載、できるかぎりたくさん生成。 
・推測にいたった過程を各項目あたり3ポイントで記載。 
~~~
- 主な問題が出力に記載したとおりに生成されます。
- 問題は一覧化することが出来ましたが、課題整理のためロジカルシンキングのフレームワークを活用したいと考えました。
フレームワークを指定して課題解決へのアプローチ手法を生成してみます。
<span style="color: red">ロジカルシンキングフレームワークについては本演習では詳細な説明を実施しません。</span>
次のプロンプトを実行します。
~~~
この分析結果すべてを、演繹法を用いて再分析してください。
出力形式は演繹法の解説に適したものを選択してください。
出力冒頭に、演繹法の説明を簡潔に、1行で記載してください。
~~~
別のフレームワークを試してみます。 
~~~
この分析結果すべてを、帰納法を用いて再分析してください。
出力形式は帰納法の解説に適したものを選択してください。
出力冒頭に、帰納法の説明を簡潔に、1行で記載してください。
~~~
別のフレームワークを試してみます。 
~~~
この分析結果すべてを、制約理論を用いて再分析してください。
出力形式は制約理論の解説に適したものを選択してください。
出力冒頭に、成約理論の説明を簡潔に、1行で記載してください。
~~~
- 制約理論の生成結果を用いて　次のステップに進みます。
- 問題を解決するための具体的な施策を生成してみます。
次のプロンプトを実行します。
~~~
分析結果を修正します。
改善策ごとに短期的施策（３か月以内に実行可能なもの）と
中期的施策（1年以内に実行可能なもの）を3ポイントで追加してください。
~~~
施策のアイデアが追加されました。
この生成結果をもとに、見えている問題の解決につなげる活動を始めてください。


この演習はこれで終了です。
みなさまの実業務にそって応用してみましょう。

##### 以上。
エンジニア間最強コミュニケーション術 - コールドリーディングについて -

エンジニアの世界では、技術力だけでなく、スムーズなコミュニケーションがプロジェクトの成否を左右することがあります。特に、意見のすれ違いや認識の違いが原因で生じる問題を防ぐためには、相手の気持ちや考えを素早く察知し、適切に対応するスキルが必要です。その中でも、**コールドリーディング**という手法は、エンジニア間のコミュニケーションにおいて意外な力を発揮します。

## コールドリーディングとは？

コールドリーディングとは、相手の情報を事前に知らなくても、相手の心理や状況を理解し、信頼関係を構築するためのテクニックです。この手法は占い師やカウンセラーの世界で知られていますが、実は日常的なコミュニケーションやビジネスシーンでも活用できます。

エンジニアの現場では、こんな場面で役立ちます：

- コードレビューや設計議論で相手の意図を正確に把握する。
- チーム内で意見が分かれた際に妥協点を見つける。
- 他職種（例えば、営業やマーケティング）とのミーティングで共通認識を築く。

## 私の成功体験

:::note info
ここからは、実体験を元にお話しします。
:::

数年前、ある大規模なウェブアプリケーションのプロジェクトに参加していたときのことです。フロントエンドとバックエンドのエンジニア間で、API設計について意見が分かれ、議論が堂々巡りしていました。私はフロントエンド担当で、相手のバックエンドエンジニアとは技術的な用語の認識が微妙にずれており、議論がかみ合いませんでした。

そこで、コールドリーディングの一部を試してみました。

1. **オープンクエスチョンを投げる**
   - 「具体的には、どういうデータ構造を想定していますか？」と問いかけ、相手の考えを引き出す。

2. **共感を示す**
   - 「確かに、その方法だとデータ量が減らせて効率的ですね。」と、相手の提案の一部を肯定。

3. **曖昧な発言を観察する**
   - 相手が「なんとなく不安」と言った際、その不安の理由を掘り下げて共有点を探しました。

結果的に、相手が重要視していたパフォーマンス要件と、私が重視していた保守性の両方を満たす方法を見つけることができました。これにより、プロジェクトは予定通り進行し、リリース後も好評を博しました。

## 失敗体験と学び

:::note
成功ばかりではありません。失敗から学ぶことも大切です。
:::

別のプロジェクトでのこと。新しく入ったエンジニアがあまり発言せず、コミュニケーションが難しい状況でした。私はコールドリーディングを駆使して彼の本音を引き出そうと試みましたが、逆効果でした。

そのエンジニアは、私の「大丈夫？困っていることがある？」という質問を圧力と感じたようで、さらに殻に閉じこもってしまいました。このとき、**相手の状態に合わせて手法を調整する重要性**を痛感しました。

後日、彼のペースに合わせて、雑談から徐々に距離を縮めることで信頼関係を構築し、スムーズにコミュニケーションが取れるようになりました。

## コールドリーディングの基本テクニック

以下のテクニックを意識することで、エンジニア間のコミュニケーションは大きく改善します。

1. **観察力を磨く**
   - 相手の表情、仕草、トーンに注意を払う。

2. **曖昧な言葉を利用する**
   - 「多分」「おそらく」といった曖昧な表現を使い、相手が自由に解釈できる余地を残す。

3. **共感の一言を忘れない**
   - 「わかります、それは重要ですよね。」という一言で、相手との心理的距離が縮まります。

4. **柔軟に対応する**
   - 相手の反応を見てアプローチを変えることを恐れない。

## まとめ

コールドリーディングは、心理学的要素を含んだ高度なコミュニケーションスキルですが、少しずつ実践することで確実に成果が出ます。エンジニアの現場では、コードを書くこと以上に人間関係が重要になる瞬間があります。その際、この手法を活用すれば、プロジェクトがより円滑に進むだけでなく、チーム全体の信頼感も高まります。

ぜひ一度試してみてください！
リモートワーク時代のエンジニアの働き方改革：成功事例と教訓

# リモートワーク時代のエンジニアの働き方改革：成功事例と教訓

リモートワークが主流となった現在、多くのエンジニアが新しい働き方を模索しています。この記事では、リモートワークでの成功体験と失敗体験を交えながら、効率的で快適な働き方を実現するためのポイントをお伝えします。

---

## 💡 リモートワーク成功のカギ

### 1. **明確なスケジュール管理**

リモートワークでは、自分のペースで働ける反面、スケジュール管理が曖昧になることがあります。成功体験のひとつとして、以下の方法が有効でした。

:::note info
**成功体験：朝のルーティン確立**
毎朝決まった時間に起き、通勤時間の代わりに15分間の散歩を習慣化。これにより、心身のリズムが整い、集中力が向上しました。
:::

#### おすすめツール
- Google Calendar
- Notion
- Todoist

リモートワークを快適に進めるためには、タスクの優先順位をしっかりと設定し、時間を区切ることが重要です。

### 2. **コミュニケーションの質を向上**

リモートでは対面での会話が減るため、情報共有が滞りがちです。成功事例として、**毎日のスタンドアップミーティング**を導入したチームがありました。

:::note info
**成功体験：オンライン朝会の活用**
15分間の朝会で、各自のタスクや進捗を共有。短い時間でもチームの一体感が高まり、問題の早期発見につながりました。
:::

#### 工夫ポイント
- 話しすぎを防ぐため、タイムキーパーを設定。
- 必要に応じて、テキストでの情報共有も並行して行う。
- ビデオ会議の頻度を増やしすぎないよう、チームの負担を考慮。

### 3. **効率的な作業環境の整備**

作業効率を最大化するためには、快適な作業環境を整えることが重要です。

:::note info
**成功体験：デュアルモニターと高機能チェア**
デュアルモニターを導入し、タスク間の切り替えをスムーズに。さらに、長時間の作業でも疲れにくいチェアに投資したことで、作業効率が向上しました。
:::

#### おすすめの設備
- デュアルモニター
- 高品質のノイズキャンセリングヘッドホン
- 人間工学に基づいた椅子と机

---

## 🚩 リモートワークの落とし穴

### 1. **オンとオフの境界が曖昧になる**

仕事とプライベートの区別がつかなくなり、結果的に生産性が低下するケースがあります。

:::note
**失敗体験：つい夜遅くまで作業**
仕事が終わった後も「もう少しだけ」と作業を続け、睡眠時間が削減。翌日のパフォーマンスに悪影響を及ぼしました。
:::

#### 解決策
- 仕事用デスクを設ける。
- 勤務終了時間にアラームを設定。
- 休憩時間を定期的に取り入れる。

### 2. **孤独感の増加**

オフィスの雑談や同僚との対話がないことで、モチベーションが低下する場合も。

:::note
**失敗体験：孤独感からモチベーション低下**
リモートワーク開始当初、業務に集中しすぎて人と話さなくなり、徐々にやる気が低下。
:::

#### 解決策
- バーチャルランチやカジュアルな雑談タイムを設ける。
- SlackやTeamsの雑談チャンネルを活用。
- 1対1の定期ミーティングを増やして、孤立を防ぐ。

### 3. **情報共有の遅延**

リモートでは、対面での会話がない分、情報伝達が遅れることがあります。

:::note
**失敗体験：重要な決定事項の遅延**
会議資料が十分に共有されておらず、プロジェクトの開始が遅れた。
:::

#### 解決策
- 会議後に必ず議事録を共有。
- チャットツールでの即時確認を心がける。
- コラボレーションツールを活用して進捗を見える化する。

---

## 🛠️ リモートワークを快適にするツール

- **Slack / Teams**: チームコミュニケーションに必須。
- **Zoom / Google Meet**: 質の高いビデオ会議を実現。
- **Asana / Jira**: プロジェクト管理ツール。
- **Krisp**: ノイズキャンセリングツール。
- **Notion / Evernote**: 情報整理とメモ管理に便利。
- **Toggl**: 作業時間のトラッキング。

---

## 🌟 まとめ

リモートワーク時代における働き方の改革は、一人ひとりの工夫次第で快適なものになります。成功体験と失敗体験を参考に、自分に合ったスタイルを見つけてください。自分のペースで働きながらも、チームとつながりを保つことで、リモートワークの可能性を最大限に引き出しましょう。

皆さんのリモートワークライフが充実したものになりますように！

---

## 📝 あなたの体験をシェアしよう

この記事を読んで「自分もこんな体験があった！」と思った方は、ぜひコメントやフィードバックをお寄せください。あなたの体験が、他のエンジニアにとって新たなヒントになるかもしれません！
[Salesforce] サイトゲストユーザーのデバッグモードを有効化する。

ブラウザの開発者ツールで簡単にLWCをデバッグできるようになる[デバッグモード](https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/aura_debug_mode.htm)ですが、サイトゲストユーザーのデバッグモードをONにするには一手間必要です。

:::note warn
**本番環境でのデバッグモード有効化は注意してください。**
JavaScript コードは縮小されないため、パフォーマンスが低下します。また、一部の警告やエラーがコンソールに詳細に表示されてしまいます。さらに、スマートフォンのChrome、Edgeでサイトが表示されないという不具合があるようです。
:::

## 通常のユーザーの設定方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125621/38136c91-d403-6537-0c8f-4cffce7a5222.png)

通常のユーザーは「設定 > デバッグモード」から設定可能です。ですが、一覧にサイトゲストユーザーが表示されないため、この画面からサイトゲストユーザーにデバッグモードを設定することはできません。

## サイトゲストユーザーの設定方法

### 1. サイトゲストユーザーのSFIDを取得する。

下記のSOQLを実行してサイトゲストユーザーのSFIDを取得します。

```sql
SELECT Id, Name, UserPreferencesUserDebugModePref FROM User WHERE Profile.UserLicense.Name = 'Guest User License'

```

![soql.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125621/7e4ed65c-b0f3-df66-5514-7b3effc6c237.png)

:::note info
**UIでSFIDを確認する方法**
「ビルダー > 設定 > 全般 > XXXプロファイル」からプロファイル詳細画面に遷移し、「このプロファイルに属するユーザーの参照」ボタンをクリックしてサイトゲストユーザーの詳細ページに遷移してSFIDを確認することも可能です。

![builder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125621/84c1f577-6541-cd52-de67-cfd3a753b963.png)
:::

### 2. Apexでサイトゲストユーザーをアップデートする

下記のApexのuserIdをサイトゲストユーザーのIDに変更し、開発者コンソールのAnonymous Windowなどで実行します。オフにする場合はfalseを設定します。

```apex
Id userId = '005XXXXXXXXXXXXXXX';
update new User(Id = userId, UserPreferencesUserDebugModePref = true);
```

以上の手順でサイトゲストユーザーでもデバッグ可能になります。

![スクリーンショット 2025-01-20 18.27.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125621/55c8c5c0-deec-a91b-d617-7ef41afa23fe.png)

UserPreferencesUserDebugModePrefについては、[公式ドキュメント](https://developer.salesforce.com/docs/atlas.ja-jp.object_reference.meta/object_reference/sforce_api_objects_user.htm)を参照してください。

## 参考

- [Lightning コンポーネントのデバッグモードの有効化](https://help.salesforce.com/s/articleView?id=sf.aura_debug_mode.htm&type=5)
- [User | Salesforce プラットフォームのオブジェクトリファレンス](https://developer.salesforce.com/docs/atlas.ja-jp.object_reference.meta/object_reference/sforce_api_objects_user.htm)
Reactの魅力を現在学習中の僕がざっくりまとめてみた。

## はじめに
こんにちは、今回は今最も人気のフレームワークの一つである**React**について、まとめてみました。
プログラミング学習経験がまだ３ヶ月の僕が学んでみて、「なるほど〜」「ここ難しいな」と思った部分を中心に書きましたので、ぜひご覧ください。

※なお、記事内容と事実が違う可能性もありますので、ご了承ください。

## そもそもReactとは？
Reactの特徴はざっくり言うと、以下の二つです！

・効率的に作りやすい・運用しやすい
・シンプルに求人数多い

Reactは、Facebookによって開発され、現在では多くの企業や開発者によって使用されています。
その理由の一つは、**とても速く動き、コードを何度も使い回すことができる**からです。
これにより、効率的に作業を進められます。（後で詳しく説明します！）

## Reactの魅力

### コンポーネントベースのアーキテクチャ
Reactの特徴の一つは「コンポーネントベース」の設計です。

**大きなプログラムを小さな部品（コンポーネント）に分けることができます。**
※レゴみたいなイメージなので、なんか楽しい。
このおかげで、コードを再利用しやすく、修正や追加も簡単になります。

### バーチャルDOMの概念
ReactはバーチャルDOMという仕組みを採用しています。

バーチャルDOMは、**実際のDOM操作を最小限に抑え、プログラムが素早く画面の変化を反映できます。**
これにより、効率的なUIの更新が可能となり、ウェブサイトが速く動き、使いやすくなります。

イメージこんな感じ
```
1. Reactが仮想のDOMを用意（実際のDOMをコピーしたもの）
2. 仮想のDOMと実際のDOMの差分をチェック
3. HTMLに対して、差分したものだけ、JavaScriptが実際のDOMヘ適用するよう処理
```

全体を更新というよりは、変更した部分のみ更新されるから、効率的ってこと。

### ライブラリが充実している
Reactを使うと、多くの便利なツールやライブラリ（例えば、ReduxやReact Routerなど）を利用できるので、基本なんでもできます。

## 学習時につまづきやすいポイント

### stateの管理に注意
Reactでは、**コンポーネントが持つ状態（state）を管理することが重要**です。

例えば、ボタンをクリックしたときにカウントを増やすアプリを考えてみましょう。
この場合、カウントの値をステートとして管理します。
ステートを変更する際には、`setState関数`を使います。
直接`state`を変更するのではなく、`setState関数`を使うことでReactが変更を検知し、画面を適切に再描画します。

<details><summary>サンプルコード</summary>

```
function Counter() {
  // カウントの値をステートとして宣言
  const [count, setCount] = useState(0);

  // ボタンがクリックされた時にカウントを増やす関数
  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={incrementCount}>カウントを増やす</button>
    </div>
  );
}
```

</details>


この例では、`useStateフック`を使ってカウントの`state`を宣言し、`setCount関数`でカウントを更新しています。ボタンがクリックされると、カウントが増える仕組みです。

**常に最新の状態として持たせたいデータは何か？を考えることが重要！**

### コンポーネントの再利用

Reactでは、**コンポーネントを再利用すること**が推奨されています。

例えば、同じデザインのボタンを複数の場所で使いたい場合、一つのボタンコンポーネントを作成して再利用できます。
これにより、コードの重複を避け、保守が楽になります。

<details><summary>サンプルコード</summary>

```
// 共通のボタンコンポーネントを作成
function CustomButton({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}
```

</details>

このボタンコンポーネントを他のコンポーネントで再利用する例です。

<details><summary>サンプルコード</summary>

```
import CustomButton from './CustomButton';

function App() {
  const handleClick = () => {
    alert('ボタンがクリックされました');
  };

  return (
    <div>
      <h1>コンポーネントの再利用の例</h1>
      <CustomButton label="クリックしてください" onClick={handleClick} />
    </div>
  );
}
```

</details>


この例では、`CustomButtonコンポーネント`を`Appコンポーネント`内で再利用しています。ラベルとクリックイベントを`props`として渡すことで、再利用しやすいコンポーネントを作成できます。

**コンポーネント間でどう`props`を受渡してるのかを常に把握しながら書いていくのが、難しい...**

## 最後に
以上、Reactについてざっくりとした説明でした！
まだ学習中かつ慣れない部分もありますが、とにかく触ってみて理解してみることが今は重要なので、まだまだ精進します。

ここまで読んでいただきありがとうございました！！
統計検定1級　2024　数理　問1　解説

![１級数理問1P1(2024年).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/d4d8f03c-ad1e-e25d-c75a-8877bdfeca30.jpeg)
![1級数理問1P2(2024年).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/10c081a5-afb2-7086-bbfa-cf0fc00752cb.jpeg)
![1級数理問1P3(2024年).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/e5a8a6af-7797-dd4e-6594-828cb826ac51.jpeg)
【Rails】名前空間でルーティングをグループ化する

# はじめに
ルーティング設定時に名前空間（namespace）でコントローラをグループ化する作業を記録します。

### 環境
- Rails6.1.7
- Ruby2.7.8

# 設定例
```config/routes.rb
Rails.application.routes.draw do
  namespace :hoge do
    resources :fugas do
      collection do
        get 'piyo'
        post 'hogera'
      end
      member do
        get 'hogehoge'
      end
    end
  end
end
```

### ルーティングの結果
```
_pathヘルパー        ｜HTTP Verb｜ パス                           ｜　コントローラ#アクション　
piyo_hoge_fugas     ｜ GET   ｜ /hoge/fugas/piyo(.:format)        ｜ hoge/fugas#piyo
hogera_hoge_fugas   ｜ POST  ｜ /hoge/fugas/hogera(.:format)      ｜ hoge/fugas#hogera
hogehoge_hoge_fugas ｜ GET   ｜ /hoge/fugas/:id/hogehoge(.:format)｜ hoge/fugas#piyo
hoge_fugas 　　　　　｜ GET   ｜ /hoge/fugas(.:format) 　　　　　　 ｜ hoge/fugas#index
           　　　　　｜ POST  ｜ /hoge/fugas(.:format) 　　　　　　 ｜ hoge/fugas#create
new_hoge_fuga       ｜ GET   ｜ /hoge/fugas/new(.:format)         ｜ hoge/fugas#new
edit_hoge_fuga      ｜ GET   ｜ /hoge/fugas/:id/edit(.:format)    ｜ hoge/fugas#edit
hoge_fuga           ｜ GET   ｜ /hoge/fugas/:id(.:format)         ｜ hoge/fugas#show
                    ｜ PATCH ｜ /hoge/fugas/:id(.:format)         ｜ hoge/fugas#update
                    ｜ PUT   ｜ /hoge/fugas/:id(.:format)         ｜ hoge/fugas#update
                    ｜ DELETE｜ /hoge/fugas/:id(.:format)         ｜ hoge/fugas#destroy
```

- namespace
    - メソッド名や変数名などが衝突しないようにするための機能
- resourcesルーティング
  - 各HTTPメソッドとコントローラ内のアクションを指すURLに対応づけられる
  - アクションごとにDB上の特定のCRUD操作に対応づけられる


-  collectionルーティング
    - idが付与されない
```
# 指定例
resources :users do
  collection do
    get 'hoge'
  end
end
```
```
# パス
/users/hoge
```

- memberルーティング
    - idが付与される
    - コントローラ内でparams[:id]という形で受け取ることができる
```
# 指定例
resources :users do
  member do
    get 'hoge'
  end
end
```
```
# パス
/users/:id/hoge
```

### 補足
コントローラファイルにおいては、下記のようにルーティングを反映した書き方ができます。

- コントローラディレクトリの構造
```
app
 ├─controllers
　　　　 └─  hoge
 　　　　　 　　└─ fugas_controller.rb
```
- コントローラファイル
```controllers/hoge/fugas_controller.rb
class Hoge::FugasController < ApplicationController
  def new
  end
end
```


# おわりに
config/routes.rbに書くと煩雑になる場合には、下記のように名前空間ごとに分ける書き方もできます。
```
config
 └─ routes
     ├─ hoge.rb
     ├─　# namespaceごとに分けてファイルを作成 
```
```config/routes/hoge.rb
Rails.application.routes.draw do
  # ルーティングを設定する
end
```