OmniAICreator/Qiita-1.07M huggingface dataset:
Reactの `useRef` とは？わかりやすく解説

# Reactの `useRef` とは？わかりやすく解説

React の `useRef` は、コンポーネント内で **「再レンダリングなしで値を保持する」** ためのフックです。  
`useState` と違い、値が変わってもコンポーネントが再レンダリングされません。

主な使い方は次の3つです。

1. **DOM（HTML要素）を直接操作する**  
2. **再レンダリングなしで値を更新する**  
3. **前回の値を記録する**  

---

## 1. DOM（HTML要素）を直接操作する

通常、React では **DOMを直接操作しない** のが基本ですが、  
`useRef` を使うと `input` や `button` などの要素を **直接触ることができます。**

### 📌 `useRef` で `input` に自動でフォーカスを当てる

```tsx
import { useRef, useEffect } from "react";

const AutoFocusInput = () => {
  const inputRef = useRef<HTMLInputElement>(null); // input要素の参照を作成

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus(); // コンポーネントが表示されたら自動でフォーカス
    }
  }, []);

  return <input ref={inputRef} type="text" placeholder="ここに入力" />;
};

export default AutoFocusInput;
```

✅ `ref={inputRef}` を `input` に設定すると、 `inputRef.current` で要素にアクセス可能！  
✅ `useEffect` を使って、画面表示時に `focus()` を実行 → `input` に自動でフォーカス！  

---

## 2. 再レンダリングなしで値を更新する

`useState` で値を管理すると、変更するたびに **再レンダリング** されますが、  
`useRef` なら **値を更新してもレンダリングは発生しません。**

### 📌 `useRef` でカウントを増やす（でも画面は変わらない）

```tsx
import { useRef, useState } from "react";

const Counter = () => {
  const countRef = useRef(0); // useRefでカウントを管理
  const [stateCount, setStateCount] = useState(0); // useStateでもカウントを管理

  const incrementRef = () => {
    countRef.current += 1; // useRefの値を更新（でも画面は更新されない）
    console.log("useRefのカウント:", countRef.current);
  };

  const incrementState = () => {
    setStateCount((prev) => prev + 1); // useStateで更新（画面も更新される）
  };

  return (
    <div>
      <p>useRefのカウント: {countRef.current}（画面には変化なし）</p>
      <button onClick={incrementRef}>useRefでカウント</button>

      <p>useStateのカウント: {stateCount}</p>
      <button onClick={incrementState}>useStateでカウント</button>
    </div>
  );
};

export default Counter;
```

✅ `useState` は **変更すると画面が更新される**  
✅ `useRef` は **変更しても画面に影響しない（再レンダリングなし）**  

---

## 3. 前回の値を記録する

「**前の値を覚えておきたい！**」ときにも `useRef` は便利です。

### 📌 `useRef` で「前回のカウント」を記録する

```tsx
import { useRef, useEffect, useState } from "react";

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef<number | null>(null); // useRefで前のカウントを記録

  useEffect(() => {
    prevCountRef.current = count; // useEffectのタイミングで前回の値を保存
  }, [count]);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <p>前回のカウント: {prevCountRef.current}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>カウントアップ</button>
    </div>
  );
};

export default PreviousValue;
```

✅ `prevCountRef.current` に **前回のカウントを記録！**  
✅ `useEffect` を使って、 `count` が変わるたびに `prevCountRef` に保存！  

---

## `useRef` を使うときの注意点

⚠️ `useRef` の `current` を変更しても、**再レンダリングは発生しない**  
⚠️ 画面に表示したいデータの管理には **`useState` を使うべき**  
⚠️ `useRef` の値はコンポーネントが **再描画されても保持される**（リセットされない）  

---

## `useRef` はどんなときに使う？

✅ **フォームの `input` にフォーカスを当てる**  
✅ **カウントやタイマーの値を再レンダリングなしで管理**  
✅ **前回の値を記録する**  
✅ **アニメーションや `setInterval` のIDを管理**  

---

## まとめ

🔹 `useRef` は **レンダリングに影響しない値** を保持するためのフック  
🔹 `DOM要素` へのアクセス、`前回の値を記録`、`再レンダリングなしの値管理` に使える  
🔹 `useState` とは違い、 **値を変更しても画面は更新されない！**  

`useRef` を適切に使えば、**パフォーマンスを向上** させたり、**無駄な再レンダリングを防ぐ** ことができます！
JavaScriptで最頻出の文字を抽出・カウントする方法

JavaScriptで最頻出の文字を抽出する方法。例によってmosyaの復習です。

### 問題
与えられた文字列に対して、最も頻繁に出現する文字とその回数を返す
関数 findMostFrequentChar を実装してください。
返り値は、以下のような**オブジェクト**として返してください。
```javascript
{ char: 'a', count: 2 }
```
入力例:
```javascript
findMostFrequentChar("abca");
```
出力例:
```javascript
{ char: 'a', count: 2 }
```
ただし、もし出現回数が同じ文字が複数ある場合は、最初に出現した文字を返してください。

### 前提知識
#### for...of ループ
```javascript
for (let 変数 of イテラブルオブジェクト) {
    // 繰り返し処理
}
```
イテラブルオブジェクト（配列、文字列など）から1つずつ取り出して変数に代入し、ループ処理を回すことができる。インデックス（i=1...）を使わないでより直感的に理解しやすいため、今回はこれを使う。
#### オブジェクトと配列の違い
- オブジェクト
キーと値がセットで格納されている。
キーは １．ドット記法 ２．ブラケット記法 の2パターンで設定できる。
**変数をキーとして使いたいときは、ブラケット記法を使う必要がある。**
値に配列をいれることも可能
```javascript
let obj = {name: "hanako", age: 25};
console.log(obj.name); // hanako

// キーに変数を設定する
const array = {};
let key = "キーです";
array[key] = "値です";
console.log(array); // {キーです: '値です'}
```

- 配列
要素を順番付けして格納する。
```javascript
const array = ["banana", "apple", "mikan"];
console.log(array[1]); // apple
```
#### 考え方
- 与えられた文字は一文字ずつに分解してループを回す
- 文字とその数を保存しておくオブジェクトが必要
- ループの中で最頻出の文字と番号を毎回更新する必要がある


#### 解答例
```javascript
function findMostFrequentChar(str) {

  const obj = {}; // 文字をインデックスに個数をカウント
  let maxCharacter = ''; // 最頻出の文字を格納する用
  var maxNumber = 0; // 最大値をカウントして格納する用
  for (let maxChar of str){
    if(!obj[maxChar]){
      obj[maxChar] = 0;
    }
    obj[maxChar] += 1;
    if(maxNumber < obj[maxChar]){
      maxCharacter = maxChar;
      maxNumber = obj[maxChar];
    }
  }
  return { char:maxCharacter, count:maxNumber };
}

console.log(findMostFrequentChar("abca")); // { char: 'a', count: 2 }
```

#### 所感
最初は一文もコードが思いつかず、半泣きになった問題。
けれどもChatGPT先生にしつこく質問して、自力で解けたのでめちゃくちゃうれしかったです。
React + TypeScript + Tailwind CSS セットアップ手順


## 1. プロジェクトの作成

まず、デスクトップに移動し、Vite を使用して React + TypeScript のプロジェクトを作成します。

```sh
cd ~/Desktop
npm create vite@latest my-project -- --template react-ts
```

## 2. 必要なパッケージのインストール

作成したプロジェクトディレクトリに移動し、必要な依存関係をインストールします。

```sh
cd my-project
npm install
npm install tailwindcss @tailwindcss/vite
```

## 3. Vite の設定 (`vite.config.ts`)

プロジェクトのルートディレクトリにある `vite.config.ts` を編集し、Tailwind CSS のプラグインを追加します。

```ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})
```

## 4. Tailwind CSS の設定 (`CSS` ファイル)

プロジェクトの CSS ファイル（例: `src/index.css` または `src/globals.css`）に以下を追加し、Tailwind CSS を適用します。

```css
@import "tailwindcss";
```

## 5. プロジェクトの起動

セットアップが完了したら、以下のコマンドで開発サーバーを起動できます。

```sh
npm run dev
```

これで、Vite + React + TypeScript + Tailwind CSS の環境が構築されました！
`Minisforum Space` が起動しなくなったときに読むもの

# 結論

`WMIC` という `Windowsコンポーネント` について、クリーンインストール時などには無効となっている場合があります

こちらのコンポーネントを有効にすれば解決します

# はじめに

結論を先に書いてしまったので、もう `はじめ` ではないですが…

## `Minisforum Space` とは？

`Minisforum` 製のPCにインストールされている …ことがある、マシンの電力消費やパフォーマンスをソフトウェア側から変更することができるアプリケーションです

## `Minisforum` とは？

中国は深圳に存在するPCハードウェアメーカーです

特にミニPCと呼ばれるような小さいサイズのPCを販売しており、ほかのミニPCでは実現が難しい、実現ができたとしてもかなり高額となるようなスペックの製品がラインナップとしてあげられます

https://www.minisforum.jp

## この記事を書いた背景

`lspctl.nvim` というプラグインを作成していた際に、 `Minisforum V3` が起動しない…といったことが発生しました (唐突な宣伝)

https://github.com/clxmochamalefic/lspctl.nvim

その際に `Windows` のクリーンインストールを実施しましたが、ドライバのインストールとともに本題にもある `Minisforum Space` のインストールを実施しましたが、こちらが起動しない…といったことが発生しました

私はこの子を気に入っており、個人的な開発から趣味のお絵描き、 `FF14` のプレイまで、なんでも実行しておりました

`Minisforum Space` を利用することで、「今充電できるような状態ではないけども、バッテリーをとにかくセーブしたい…！」といった状況にもある程度対応できる…のですが、このソフトウェアが `Windows` のクリーンインストールを実施した場合、うまく動作しません

# なにが原因だったか？

`Minisforum Space` は `WMIC.exe` というコンポーネントに依存していますが、現在の `Windows` はクリーンインストール時にこちらが有効にならないようです

このことは `reddit` にも相談があり、これが解決のトリガーとなってくれました

https://www.reddit.com/r/minisforum_v3/comments/1h29lnn/minisforum_space_not_running_anymore/

# どのように有効にするか？

再度の有効の方法は `Microsoft` 公式に記事が存在しますが、改めて記述します

公式の記事はこちらをご参照ください

https://techcommunity.microsoft.com/blog/windows-itpro-blog/how-to-install-wmic-feature-on-demand-on-windows-11/4189530

1. 設定アプリを開き、左側ペインより `システム` を選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507143/7998d57a-c412-4fe1-945c-ecb805f93165.png)
1. 画面をスクロールし、下から2番目にある `オプション機能` を選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507143/23d912c5-4b17-4286-bfc0-5b54ad5cd08f.png)
1. 画面上部にある `機能を表示` を押す
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507143/8da3c639-f849-4ecd-be5e-108745e29093.png)
1. オプション機能を検索するモーダルが表示されるので、そこで `WMIC` と入力し、表示されてきたものを選択してインストールする
    (今回の場合はすでにインストールされているので、表示されていません、すみません)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507143/4d2e25cd-50f1-411a-8820-08eb5faf9509.png)
1. インストールが完了したら、 `Minisforum Space` が起動するかを確認する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507143/1193a7ce-b3a6-4f23-b2fb-3419380835af.png)

# さいごに

… 本当にこれだけです

安くて小さいのはいいのですが、おそらくあまりサポート手厚くはないので…

ほかに困られている方の参考になれば幸いです
材料力学「はりの有限要素法について、たわみ近似式から、剛性要素行列までの過程を教えて下さい。」をAI先生に聞きました。


(勉強中)私の質問。
```
はりの有限要素法について、たわみ近似式から、剛性要素行列までの過程を教えて下さい。
```
```
上記をsympyのソースコードで教えて下さい。
```
```
上記のsympy を使って、片持ち梁について、節点力を入力して、節点変位を計算して下さい。結果も出力して下さい。
```

# ChatGPT先生へ
>(回答抜粋)

??? 以下を実行するとエラーがでます。
(勉強中)

```python
import sympy as sp

# 変数の定義
L, E, I = sp.symbols('L E I')

# Hermite 補間関数
x = sp.Symbol('x')
N1 = 1 - 3*(x/L)**2 + 2*(x/L)**3
N2 = x * (1 - 2*(x/L) + (x/L)**2)
N3 = 3*(x/L)**2 - 2*(x/L)**3
N4 = x * (-(x/L) + (x/L)**2)

# 形状関数の2階微分
B = sp.Matrix([sp.diff(N1, x, x), sp.diff(N2, x, x), sp.diff(N3, x, x), sp.diff(N4, x, x)])

# 剛性行列の計算
D = E * I
K_e = sp.integrate(D * (B * B.T), (x, 0, L))

# 節点力ベクトルの定義
F = sp.Matrix([sp.symbols('F1'), sp.symbols('M1'), 0, 0])  # 片持ち梁の自由端で力を受ける

# 変位ベクトルの計算
U = K_e.inv() * F

# 結果の表示
sp.pprint(U)
```

# Gemini先生へ

>(回答抜粋)

# copilot先生へ

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

#### wikipedia 


#### Qiita

＞曲げに対する剛性マトリックス

https://qiita.com/damyarou/items/aa7b23bafb44dabfa37f#%E6%9B%B2%E3%81%92%E3%81%AB%E5%AF%BE%E3%81%99%E3%82%8B%E5%89%9B%E6%80%A7%E3%83%9E%E3%83%88%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B9

#### Google検索
[Linux][command] メタキャラクタ_正規表現

# 一覧

| 正規表現 | 説明 |
|:--|:--|
| `.` | 任意の1文字（改行を除く） |
|  | **例:** `a.b` → `"acb"`, `"a1b"` にはマッチ、 `"ab"` にはマッチしない |
| `*` | 直前の文字の0回以上の繰り返し |
|  | **例:** `ba*` → `"b"`, `"ba"`, `"baa"`, `"baaa"` にマッチ |
| `+` | 直前の文字の1回以上の繰り返し |
|  | **例:** `ba+` → `"ba"`, `"baa"`, `"baaa"` にマッチ、 `"b"` にはマッチしない |
| `?` | 直前の文字の0回または1回の繰り返し |
|  | **例:** `ba?` → `"b"`, `"ba"` にマッチ、 `"baa"` にはマッチしない |
| `{n}` | 直前の文字の **n回** の繰り返し |
|  | **例:** `ba{2}` → `"baa"` にマッチ、 `"ba"`, `"baaa"` にはマッチしない |
| `^` | 行の先頭を指定 |
|  | **例:** `^Hello` → `"Hello world"` にはマッチ、 `"world Hello"` にはマッチしない |
| `$` | 行の末尾を指定 |
|  | **例:** `world$` → `"Hello world"` にはマッチ、 `"world Hello"` にはマッチしない |
| `{n,}` | 直前の文字の **n回以上** の繰り返し |
|  | **例:** `ba{2,}` → `"baa"`, `"baaa"`, `"baaaa"` にマッチ |
| `{n,m}` | 直前の文字の **n回以上m回以下** の繰り返し |
|  | **例:** `ba{1,3}` → `"ba"`, `"baa"`, `"baaa"` にマッチ、 `"b"`, `"baaaa"` にはマッチしない |
| `[]` | 文字クラス。指定した文字のいずれか1文字とマッチ |
|  | **例:** `[abc]` → `"a"`, `"b"`, `"c"` にマッチ、 `"d"` にはマッチしない |
| `[^]` | 否定の文字クラス。指定した文字以外の1文字とマッチ |
|  | **例:** `[^abc]` → `"d"`, `"e"`, `"f"` にマッチ、 `"a"`, `"b"`, `"c"` にはマッチしない |
| `\|` | OR（または）の意味で使い、`A\|B` は `A` または `B` にマッチ |
|  | **例:** `cat\|dog` → `"cat"`, `"dog"` にマッチ、 `"cats"`, `"dogs"` にはマッチしない |
| `\` | エスケープ文字。メタキャラクタを通常の文字として扱う |
|  | **例:** `\.` → `"."` にマッチ（通常の `.` は任意の1文字とマッチ） |

# Ping-t
- [3201_., *](https://mondai.ping-t.com/question_subjects/31/question_sessions/30521989/progressing_questions/467602312)

- [3574_., *](https://mondai.ping-t.com/question_subjects/31/question_sessions/31943721/progressing_questions/489464090)
- [3575_^, ., *]()
- [3577_grep -E '1234.'](https://mondai.ping-t.com/question_subjects/31/question_sessions/30890995/progressing_questions/473266332)
- [3581_grep -E 'bu?'](https://mondai.ping-t.com/question_subjects/31/question_sessions/31870469/progressing_questions/488372719)
- [3582_grep -E 'bu+'](https://mondai.ping-t.com/question_subjects/31/question_sessions/31870469/progressing_questions/488372709)
- [3706_grep -E '[0-9]+'](https://mondai.ping-t.com/question_subjects/31/question_sessions/32018863/progressing_questions/490569315)
- [3704_数量詞](https://mondai.ping-t.com/question_subjects/31/question_sessions/31375489/progressing_questions/480744513)
- [3513_[^]](https://mondai.ping-t.com/question_subjects/31/question_sessions/31913990/progressing_questions/489024890)
- [3573_|](https://mondai.ping-t.com/question_subjects/31/question_sessions/31869840/progressing_questions/488361805)
- [3579_|](https://mondai.ping-t.com/question_subjects/31/question_sessions/31069115/progressing_questions/476102907)
- [3580_sed 's/p....t/HOGE/g'](https://mondai.ping-t.com/question_subjects/31/question_sessions/32927143/progressing_questions/504391357)

pkill
- [39968_pkill](https://mondai.ping-t.com/question_subjects/31/question_sessions/32368296/progressing_questions/495929816)
LINE APIでグループLINEにメンションする方法

# 実は更新が入っていた
古い記事を見ていると**メンションは出来ない**と言われます。違います。

[公式リファレンス textV2](https://developers.line.biz/ja/reference/messaging-api/#text-message-v2)

これを見たら分かります。ここの説明は丁寧なので公式リファレンス見たことな人でも見やすいと思います。(ある程度の知識は必要かも…)

重要なことは`type`の`text`を`textV2`にすることです。忘れがち

あとは{お好きに}で指定してやるだけです
Reactの用語整理

| 用語 | 役割 | いつ実行されるか |
|:--|:--|:--|
Reactのレンダリング|仮想DOMの作成(実DOMへの更新はしないので画面に影響はあたえない）|useState, props の更新時
レンダー|コンポーネントの処理全体（ほぼレンダリングと同じ意味）|`return <JSX>` が呼ばれるとき
初回レンダリング|最初のマウント時のレンダリング|コンポーネントが最初に表示されるとき
再レンダリング|状態や props の変更で仮想DOMが作り直される|ステート更新 (setState) や props 変更時
コミット|実際のDOMを更新するフェーズ|仮想DOMと実際のDOMの差分を適用するとき
ブラウザのレンダリング（描画）|画面上に表示される|コミットフェーズ後、ブラウザが処理する



## React のレンダリング（仮想DOM の処理）
React の「レンダリング」は、仮想DOM（Virtual DOM）を作成・更新する処理のこと。

### React のレンダリングの流れ
1. 仮想DOMを作成
2. 前回の仮想DOMと比較（Diffing）
3. 変更があれば、実際のDOMに適用（コミットフェーズ）
4. ブラウザが画面に描画
- React のレンダリングは 「仮想DOMまでの処理」 を指す。
- React のレンダリング ＝ 画面に直接影響しない（仮想DOMの変更を計算するだけ）。

## ブラウザのレンダリング（実際の画面の描画）
React が commit フェーズで 実際のDOMを更新 すると今度はブラウザがレンダリング処理（描画）を行う。

### ブラウザのレンダリングの流れ
1. DOM の構築（HTML 解析）
2. CSS の適用（CSSOM）
3. レイアウト（Layout）：各要素のサイズ・位置を計算
4. ペイント（Paint）：画面にピクセルを描画
5. コンポジット（Composite）：各レイヤーを合成し、最終的な画面を描画
- この処理を「ブラウザのレンダリング（描画）」と言う
- React の「レンダリング」とは 別の処理
個人的備忘録：最新のリポジトリをローカルで編集する手順を、一通り体系的にまとめて記事としてアウトプットしてみた

## はじめに  
Git は、開発現場で欠かせないバージョン管理ツールです。

:::note info
**本記事では、リモートリポジトリのクローンから編集、コミット、プッシュまでの基本操作をわかりやすくまとめました。**
:::

これを押さえておけば、個人開発やチーム開発でもスムーズに作業を進められます。  

## 書こうと思ったきっかけ  
Git を使う機会が増える中で、「**リポジトリをクローンした後はどうすればいい？**」「**変更をリモートに反映するには？**」といった基本的な疑問を解決できるようにまとめました。

特に初心者がつまずきやすいポイントをシンプルに整理し、実際に使える知識として活用できるようにしています。

## リポジトリをクローンする（初回のみ）
リモートリポジトリ（GitHub, GitLab, Bitbucket など）をローカルにコピーするには、以下のコマンドを実行します。

```bash
git clone <リポジトリのURL>
```

例：

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

このコマンドを実行すると、ローカルに `repository` というフォルダが作成されます。

## 最新の変更を取得する
すでにローカルにリポジトリがある場合、最新の変更を取得するには以下のコマンドを実行します。

```bash
git pull origin main
```

※ ブランチ名が `main` でない場合は、`master` や `develop` など適切なものを指定してください。

## 編集する
ローカルのリポジトリ内でファイルを編集します。

```bash
cd repository
vim filename.py  # 例: Vimを使って編集
```

エディタ（VSCode, Vim, nano など）を使ってファイルを修正してください。

## 変更を確認する
変更を確認するには、以下のコマンドを実行します。

```bash
git status
```

## 変更をステージング（追加）
編集したファイルをステージングエリアに追加します。

```bash
git add filename.py
```

すべての変更を追加する場合：

```bash
git add .
```

## コミットする
変更を記録するために、コミットを作成します。

```bash
git commit -m "変更内容の説明"
```

例：

```bash
git commit -m "バグ修正: ユーザー認証の不具合を修正"
```

## リモートにプッシュ
編集内容をリモートリポジトリに反映させます。

```bash
git push origin main
```

## 他のブランチをチェックアウトして編集（必要に応じて）
別のブランチで作業したい場合は、ブランチを切り替えます。

```bash
git checkout feature-branch
```

新しいブランチを作成する場合：

```bash
git checkout -b new-feature
```

その後、編集・コミット・プッシュの手順を繰り返します。

## まとめ  
ここまで読んでいただきありがとうございました！***Git を使いこなせば、開発の効率が大きく向上します。***

:::note warn
**まずはこの流れをマスターし、慣れてきたらブランチの活用やコンフリクト解決にも挑戦してみてください。**
:::

**Git を味方につけて、快適な開発を楽しんでください！**
PMBOK原理・原則：適応性と回復力

PMBOKの原理・原則について、特に「適応性」と「回復力」をまとめた記事を投稿しました。
変化の激しい時代だからこそ、計画通りに進めることにこだわりすぎず、変化を受け入れ、失敗から学べるチーム作りが重要だと考えています。
少しでも現場で頑張る方々のヒントになれば幸いです。🍛

![マインドマップ (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/2b688559-bda1-4c08-ab81-6ed7dde0a6fa.png)

## 変化に適応し、回復力を持つ

![adaptability-resilience.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/b2e1ee34-cdf6-4af9-ae12-27fae61928e3.png)

プロジェクトマネジメントと聞くと、「スコープ管理」「品質管理」などの硬い話題が思い浮かぶかもしれません。たしかにPMBOKには様々な知識エリアが整理されていますが、近年重要視されているのが“原理・原則”という観点。そしてその中でも特に、**変化に対する適応性(Adaptability)と回復力(Resilience)** が注目を集めています。

しかし、単に「変化に対応しろ」「失敗しても立ち直れ」と言われても、現場では「言うは易く行うは難し」状態になりがち。そこで本記事では、リーダーや現場で頑張るエンジニアが少しでもモチベーションを得られるように、**実践的なヒント** を交えながら紹介します。

---

## 適応性(Adaptability)と回復力(Resilience)とは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/8360099b-6157-4e8e-a78f-3e3ec48fc879.png)

- **適応性(Adaptability)**  
  - 計画や要件が変化しても、柔軟に対応して進められる能力  
  - 新しい技術やツールに素早くキャッチアップする力  
  - 常に学習と改善を繰り返して、やり方を最適化していく姿勢  

- **回復力(Resilience)**  
  - トラブルや失敗が発生しても、立ち直りが早いこと  
  - チームメンバーやステークホルダーとの関係を保ちつつ、再度成功に向けて体制を立て直す力  
  - ストレスフルな環境下でも、冷静さを失わずに次の一手を打つための精神的・組織的な強さ  

PMBOKの新しいアプローチでは、これらの概念を「プロジェクト成功の土台」として位置付けています。計画どおりに進めるだけがプロマネではなく、**変化のうねりを上手く乗りこなし、チームとして成長していく** ことが重要です。

---

## 適応力と回復力がなぜ重要か？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/f26b8663-9438-46f4-8116-f064734b4169.png)

1. **テクノロジー・市場環境の変化が速い**  
2. **不確実性やリスクは消えない**  
3. **チームワークとモチベーション維持**  

変化が起きる前提で動くことが、むしろプロジェクトを成功させる鍵になります。

---

## 現場で使えるヒント：適応力を高めるには

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/d6ba4910-b91d-4f24-a245-e3bf5d72e871.png)

1. **「計画は変わるもの」と開き直る**  
2. **試作(Proof of Concept)やスプリントを回してみる**  
3. **メンバーの“横連携”を強化する**  

適応力を鍛えることで、変化に振り回されるのではなく、変化を活用できるようになります。

---

## 現場で使えるヒント：回復力を強化するには

![resilience-tips-adjusted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/0e4ed6ab-af6e-41f8-84b6-d1d5ed4e99e5.png)

1. **失敗を咎めず、共有する文化**  
2. **タスク依存・担当者依存を減らす**  
3. **チームの心理的安全性を高める**  

回復力のあるチームは、トラブルが起きても素早く立ち直り、持続的にパフォーマンスを発揮できます。

---

## 適応と回復を促すPMBOK的アプローチ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/2efc01fb-be8f-46f9-82ad-09d4ca0a4e14.png)

- **原則ベースで考える**  
- **柔軟なライフサイクル選択**  
- **ステークホルダーとの透明性**  

変化と不確実性は避けられないものとして受け止め、チーム全体で成長する機会に変えましょう。

---

## まとめ：変化を乗りこなし、失敗を糧にできるチームへ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/66446025-8f47-47ca-a8ec-91e94d424abb.png)

- **適応力を鍛えよう**  
- **回復力をつけよう**  
- **PMBOKの“原則”を活用しよう**  

変化の激しい時代でも、あなたのチームが強くしなやかにプロジェクトを成功に導けるよう、この記事が少しでも役立てば幸いです。
[Linux][quotation mark][command] 引用符_', ", `, echo

# 一覧
|引用符|説明|
|:--|:--|
|`'`|`''`で囲まれた部分を文字列と見なす|
|`"`|`""`で囲まれた部分を文字列と見なす (`$`, \`, `\`, `"`以外)<br>- `""`で囲まれた部分が変数であれば、変数を展開する<br>- コマンドは実行しない|
|`|` `` `で囲まれた部分をコマンドと見なす<br>- ` `` `で囲まれた部分が変数であれば、変数を展開する<br>- コマンドは実行する|
|`$`|変数|

# 使用例
## `"`
~~~terminal
$ echo "$DATE"
~~~
~~~terminal
$ echo $DATE
~~~
は同じ結果

## `"`
~~~terminal
$ echo "`date`"
~~~
~~~terminal
$ echo `date`
~~~
は同じ結果

# echoコマンド

~~~terminal
$ echo [オプション] [文字列]
~~~


| オプション | 由来 | 説明 |
|:--|:--|:--|
| (default) | echo | - 引数が文字列の場合は、そのまま表示し、末尾に改行を追加する<br>- 引数が変数`$`の場合は、変数を展開し、末尾に改行を追加する |
| `-n` | no newline | - 末尾の改行を追加しない |


# Ping-t
- [3446_'$DATE'](https://mondai.ping-t.com/question_subjects/31/question_sessions/31541108/progressing_questions/483298458)
- [3447_"$DATE"](https://mondai.ping-t.com/question_subjects/31/question_sessions/31600132/progressing_questions/484225489/edit?no_selection=false)
- [3448_\`$DATE\`](https://mondai.ping-t.com/question_subjects/31/question_sessions/30521989/progressing_questions/467602309)
- [3449_\\"$DATE\\"](https://mondai.ping-t.com/question_subjects/31/question_sessions/31375489/progressing_questions/480744517)
380. Insert Delete GetRandom O(1) 解答例　振り返り

# 問題の振り返り
LeetCode の Top Interview 150 について「380. Insert Delete GetRandom O(1)」の解答例から学んだことを共有したいと思います。

# 問題の概要
この問題はRamdamizedクラスの中身について、初期化、挿入、削除、ランダム取得の機能を書き加えるという内容でした。

# 参考にした解答例
```python:python

class RandomizedSet:

    def __init__(self):
        self.data_map = {}
        self.data = []

    def insert(self, val: int) -> bool:
        if val in self.data_map:
            return False
        
        self.data_map[val] = len(self.data)

        self.data.append(val)

        return True

    def remove(self, val: int) -> bool:
        if not val in self.data_map:
            return False
        
        last_elem_in_list = self.data[-1]
        index_of_elem_to_remove = self.data_map[val]

        self.data_map[last_elem_in_list] = index_of_elem_to_remove
        self.data[index_of_elem_to_remove] = last_elem_in_list

        self.data.pop()

        self.data_map.pop(val)
        return True

    def getRandom(self) -> int:
        return random.choice(self.data)


# Your RandomizedSet object will be instantiated and called as such:
# obj = RandomizedSet()
# param_1 = obj.insert(val)
# param_2 = obj.remove(val)
# param_3 = obj.getRandom()
```

# メイン
この問題を通して「なるほどな～」と思ったのは、処理時間をO(1)で収めるには辞書型とリスト型の両方を使わないといけないところです。辞書型とリスト型では計算量がO(1)で済む処理が異なり、これらをうまく組み合わせる必要があります。

たとえば、辞書型だけでランダムに要素を取得しようとすると次のような処理が必要です。

1 . 辞書型のキーをリストに変換する。
2 . リストからランダムなインデックスを選択する。
3 . 選択したインデックスに対応するキーをリストから取得する。
4 . 取得したキーに対応する値を辞書型から取得する。

この方法ではキーをリストに変換する処理時間O(n)の時間がかかり、getRandomをO(1)時間で実行することができません。

このような問題を回避するために辞書型とリスト型を使い分けることになります。

# removeの箇所について少し解説
次のような考え方をすると理解しやすいです。

1 . リスト型の末尾を消すときは処理時間がO(1)になる
2 . 消したい要素はリストの末尾に持ってくればいい
3 . 言い換えると、元からリストの最後にあった要素を消したい要素の位置に上書きし、2個存在する要素のうちリスト末尾にある方を消せばよい
4 . この処理に応じて辞書型では、元からリスト末尾にあった要素のインデックスを変える必要がある

# おわりに
今回の問題を通して以前よりも「それぞれの計算量を考えることは重要だ」と思うようになりました。今後もLeetCodeの解答例について解説などを共有していこうと思います。
Android 7.0「YouTube.comに切り替えてください」が、でました。

**「YouTube.comに切り替えてください お使いのYouTubeはバージョンが古く、このデバイス用のアップデートは提供されていません。代わりにブラウザでYouTube.comにアクセスしてください。」**

# 参照
#### 【YouTube】「YouTube.comに切り替えてください」が表示されてYouTubeアプリが使えない・開けない現象について
https://did2memo.net/2021/11/23/youtube-android-switch-to-youtube-com/
＞2025年2月4日現在、Android 7 搭載端末のユーザーの間でこのエラーが発生するケースが急増しています。
＞...強制的な移行が進行している模様です。
**Android 様は親切ですね。** 
そういう技があったか。です。更新が早ければ早いほど儲かる仕組みでした。

#### 「YouTube.com に切り替えてください」と表示されたときの対処法
https://note.com/50it/n/neafa8d6f91f9
＞この対策は個人的にはあまり意味がないと思っています。
＞今の端末には「今までどうもありがとう」と感謝しつつ、少し早めに新しい端末で新年度を迎えるのもアリかもしれません。

# m.youtube.com の感想
①不便になった。アイコンクリックで実行ができない。
②使えなくなったアプリの削除ができてもよさそう。
　システムアプリは削除できません。
③反応が遅くなった気がする。**動画をしないyoutube**
　無効な応答を受け取りました。
**④ミュートの解除がでます。**
⑤~~途中からの赤色のスライド?が表示できない。~~
⑥Android 7のメモ帳の文字からのリンクが使えない。同メッセージがでます。
⑦chromebookブラウザのurlは、m.youtube.comを考えた?事がありませんでした。


⑦通知がわかりません。
# chatgpt 先生へ
・聞いてみたものの...

YouTubeのurlの文字をm.youtube.com用のurlの文字に変換する方法を教えて下さい。

```python
import re

def convert_to_mobile_youtube(url: str) -> str:
    # ショートURL (youtu.be/...)
    match = re.match(r"https?://youtu\.be/(.+)", url)
    if match:
        return f"https://m.youtube.com/watch?v={match.group(1)}"
    
    # 通常のYouTube URL (www.youtube.com/...)
    url = url.replace("www.youtube.com", "m.youtube.com")
    
    return url

# テスト
urls = [
    "https://www.youtube.com/watch?v=ABCDEFG",
    "https://youtu.be/ABCDEFG",
    "https://www.youtube.com/c/ExampleChannel",
    "https://www.youtube.com/playlist?list=PL123456789",
    "https://www.youtube.com/shorts/ABCDEFG"
]

for u in urls:
    print(convert_to_mobile_youtube(u))
```
CreateExpoStackで1分以内にiOSアプリをビルドしてみた！

# やったこと

先日の記事で、スクラッチから作ったExpoのアプリを、<font color="yellow">**CreateExpoStack**</font>を使ってさらに爆速でビルドしてみた！🚅 💨
※ ReactNative v0.76以降の新アーキテクチャ対応済！！✨

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/45aa6df3-0194-4665-84e5-2eef576cf17d.png" alt="kiichi.png" width="300">


![9115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/9207958d-c5f4-4add-abc0-ece76dcec04b.png)


# 前提

1. MacOS 15.2 (Sequoia)
2. VS Code
3. Homebrew
4. [前回の記事]()の①,③（Xcode/bunのインストール）が完了している

# 手順

## 1. プロジェクトの作成（終）

[Create Expo Stack](https://rn.new/)という、面倒（それでも簡単だけど！）なExpoプロジェクトの初期セットアップを、ワンラインで完結させてくれる神ツール🎉！

```bash
$ bun create expo-stack {プロジェクト名} --expo-router --nativewind --supabase --bun
```

これだけで、nativewind・supabaseなど、Expoで必要なパッケージが入っている状態になってる！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1841759/a8da8d7e-3524-4445-a1d7-10a965524375.png)


### 🎉 おめでとうございます！🎊

## 2. ReactNativeの新アーキテクチャに対応させる

`app.json`の1レイヤー目に`"newArchEnabled": true`を挿入する。

これで、確実にReactNative v0.76以降の新アーキテクチャ（[詳細](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here)）を使えるようになる！

```json
{
  "expo": {
    "name": "expo-stack-poc",
    "slug": "expo-stack-poc",
    "version": "1.0.0",

    "newArchEnabled": true,
    "scheme": "expo-stack-poc",
    "~~~~": "~~~~"
  }
}
```

# studio CLOTOについて

私たち **studio CLOTO** は、【21世紀を「学び」で創る】ために[GROWTHEUM](https://growtheum.studio-cloto.jp/)などのサービス開発を進める駆け出しスタートアップです！

WebXR・ReactNativeなどの開発情報を今後も公開していく予定なので、ぜひフォローしてください！

https://x.com/studio_CLOTO

https://note.com/studio_cloto/n/n22575ed8f1c5

https://growtheum.studio-cloto.jp/
詩律者としてのエンジニアの働き方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2519192/8b58e4ef-bf7a-4551-b6d2-d152b1378135.png)


## はじめに

エンジニアは、論理的思考や技術力を駆使してシステムを構築し、問題を解決する存在です。しかし、それだけがエンジニアリングの本質ではないのではないでしょうか？

本記事では、「詩律者（しりつしゃ）」という新しい概念を用いながら、エンジニアが創造性を発揮し、より自由な働き方を実現する方法を探ります。

---

## 詩律者とは何か？

「詩律者」とは、感性と偶然を大切にし、詩や音楽、直感的な発想を通じて世界を理解し形作る存在です。

一般的なエンジニアが、**「論理と秩序によって世界を設計する者」** だとすれば、詩律者は **「感性と偶然を受け入れて世界を読み解く者」** です。

エンジニアの仕事は論理的で構造化されたものですが、時には直感や偶然の要素が重要になります。詩律者の視点を持つことで、以下のようなメリットが得られます。

- **創造的な発想が生まれやすくなる**
- **技術とアートの融合が促進される**
- **多様な価値観を取り入れた開発が可能になる**

---

## 詩律者としてのエンジニアの働き方

### 1. **コードを詩のように書く**

詩律者としてのエンジニアは、単なる動くコードではなく、美しいコードを書くことを目指します。

- **簡潔で明瞭な表現を心がける**（冗長なコードを避け、シンプルな構造を保つ）
- **リズムやリーダビリティを意識する**（可読性の高いコードは、詩のように流れる）
- **意図を明確にする**（コメントや関数名に「物語」を込める）

#### 例：詩的なコード

```typescript
// 美しいデータ処理の流れ
const transform = (data: string[]): string[] =>
  data
    .filter(word => word.length > 3) // 短い言葉を捨てる
    .map(word => word.toUpperCase()) // 強調する
    .sort(); // 秩序を与える
```

これは単なる処理ではなく、「短い言葉は省かれ、強調され、秩序が生まれる」という詩的な流れを持っています。

---

### 2. **偶然を活かした開発**

詩律者は偶然を尊重します。エンジニアリングにおいても、予期しないバグや仕様変更が、結果的に良いプロダクトを生むことがあります。

- **偶発的なバグを新しいアイデアとして捉える**
- **ユーザーの予期しない行動をヒントに機能を改善する**
- **ランダム性を取り入れたアルゴリズムを試す**（例：生成AI、プロシージャル生成）

#### 例：バグが生んだイノベーション

有名な例として、ポストイットの糊や3Mの透明フィルムなどは、開発中の「失敗」から生まれました。ソフトウェア開発でも、思いがけない動作が新たなUXの発見につながることがあります。

---

### 3. **インスピレーションを大切にする**

詩律者は、技術だけでなく、芸術や哲学からもインスピレーションを得ます。エンジニアも、以下のようなアプローチを取り入れることで新しい視点を得ることができます。

- **詩や小説を読む** → 異なる視点を得る
- **アートや音楽に触れる** → 創造性を刺激する
- **哲学を学ぶ** → 技術の本質的な意義を考える

特に、デザイン思考やユーザーエクスペリエンスの領域では、直感的なアプローチが重要になります。詩律者としてのエンジニアは、コードの背後にある「物語」を意識しながら開発を進めるのです。

---

## まとめ

詩律者の視点を持つことで、エンジニアの仕事はより創造的で楽しいものになります。

- **コードを詩のように書くことで、美しさと明瞭さを両立する**
- **偶然のエラーや変更をポジティブに捉え、イノベーションにつなげる**
- **技術だけでなく、芸術や哲学からもインスピレーションを得る**

論理と感性、計画と偶然。このバランスを取りながら、詩律者としてのエンジニアリングを楽しんでみませんか？

---

## おわりに

「エンジニア」と「詩律者」という二つの概念は、対立するものではなく、むしろ補完し合うものです。技術的な思考に加え、詩的な感性を持つことで、より深みのあるエンジニアリングが可能になるでしょう。

エンジニアリングの未来は、単なる技術力ではなく、感性と創造力によって切り拓かれるのかもしれません。
【備忘】C#(?)でリストの順番を意識しつつ並列化

:::note warn
C#やVBは今月（2025年2月）から触り始めたので、
変なところがあったらすみません。ご指摘等いただけると幸いです。
:::
## C#(?)でリストの順番を意識しつつ並列化
現場で.net系を使うことになった際、
「リストを並列処理⇒処理結果を元のリストと同じ順番でリスト化する方法」
を学んだので、備忘として残しておきます。

### やりたいこと
リストをfor文などでループし別リストを作成する処理を並列化（パフォーマンス改善）

### やったこと
・修正前コード例
~~~c#
using System.ComponentModel;

var listA = new List<int>();

// 1万件のリストを用意（実際は10万件くらい）
for (int i = 0; i < 10000; i++)
{
    listA.Add(i);
}

var startDate = DateTime.Now;

var listB = new List<int>();
for (int i = 0; i < listA.Count; i++)
{
    listB.Add(listA[i]);
}

var endDate = DateTime.Now;
Console.WriteLine("処理時間：" + (endDate - startDate).TotalMilliseconds + "ms");
~~~

・修正後コード例
~~~c#
（略）
// ポイント１：listAと同じだけのsizeを持つ、格納先listを作成
var listB = new List<int>(new int[listA.Count]);

var startDate = DateTime.Now;
// ポイント２：並列化し、indexに対応するところにデータを入れる
Parallel.ForEach(listA, (data, state, index) =>
{
    listB[Convert.ToInt32(index)] = listA[Convert.ToInt32(index)];
});
var endDate = DateTime.Now;
Console.WriteLine("処理時間：" + (endDate - startDate).TotalMilliseconds + "ms");
~~~

#### 以下コメントで頂いたもの
・1行で記載する方法
~~~c#
（略）
var startDate = DateTime.Now;
//お手軽な書き方(実質一行)
var listB = listA.AsParallel()
        .AsOrdered()  //順序を維持するよう指示
                      //.Select(data => data * 2)  //何か処理をした結果を渡したい場合はここに処理を書く
        .ToList();
var endDate = DateTime.Now;
Console.WriteLine("処理時間：" + (endDate - startDate).TotalMilliseconds + "ms");
~~~

・Zipで記載する方法
~~~c#
（略）
List<int> listB = [.. new int[listA.Count]];

var startDate = DateTime.Now;
listA.Zip(listA.Select((_, i) => i)).AsParallel().ForAll(data => listB[data.Second] = data.First);

var endDate = DateTime.Now;
Console.WriteLine("処理時間：" + (endDate - startDate).TotalMilliseconds + "ms");
~~~

・AsOrderedで記載する方法
~~~c#
（略）
var startDate = DateTime.Now;
List<int> listB = [];

// AsOrdered()を使い、順序を保持
listA.AsParallel().AsOrdered().ForAll(listB.Add);

var endDate = DateTime.Now;
Console.WriteLine("処理時間：" + (endDate - startDate).TotalMilliseconds + "ms");
~~~

### それぞれ実際に動かしてみた
＜修正前＞
　1回目：5.1387ms
　2回目：6.7196ms
　3回目：4.7355ms

＜修正後＞
　1回目：14.5718ms
　2回目：14.2512ms
　3回目：15.6844ms

＜1行＞
　1回目：16.1567ms
　2回目：15.0027ms
　3回目：14.1936ms

＜Zip＞
  1回目：20.1356ms
  2回目：18.8725ms
  3回目：20.6022ms

＜AsOrdered>
　1回目：12.4384ms
　2回目：13.1296ms
　3回目：13.9489ms

【補足】
ちなみに、修正後の方が遅くなったので、
試しに修正前後のループ箇所に "Thred.sleep(5)" を入れて実行してみた。
修正前：154720.268ms
修正後：9000.7618ms

### まとめ
並列化すれば絶対に早くなるわけでもないらしい。
並列化したら早くなるかは、実際に試して確認すべきみたいです。
（現場は1/3~1/4位の処理時間にはなった）
next/image, hostname "avatars.githubusercontent.com" is not configured under images

```bash
Error: Invalid src prop (https://avatars.githubusercontent.com/u/59593038?v=4) on next/image, hostname "avatars.githubusercontent.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
```

このエラーは、Next.js の next/image コンポーネントが`next.config.js`にホスト名 `avatars.githubusercontent.com`を許可されていないために発生している

### 解決方法
`next.config.js`にimages.domains を追加し、GitHub のアバターのホストを許可する。
```diff_jsx
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
+  images: {
+    domains: ["avatars.githubusercontent.com"],
+  },
};

export default nextConfig;
```

そのあとサーバーの再起動も行う
```bash
npm run dev
```
利益に貢献できるエンジニアを目指して

# 利益貢献できるエンジニアを目指して
# # 自己紹介

はじめまして。
Webエンジニアを目指している、masaと申します。

オーストラリア滞在中、シェアメイトや旅先で知り合った方がきっかけで、
システム開発に興味を持ち、プログラミングの学習を始めました。
現在は実務未経験です。

エンジニアコミュニティの発展、
そして、企業・お客様の利益に貢献できるよう、日々精進していきます。
何卒よろしくお願いします。

# Qiitaを始めた目的

Qiitaを始めた目的は、
・何かの理解に困っている方の理解のお手伝いをすること
・インプットした内容をアウトプットしてまとめること
です。

自分自身、エラーが発生した際、何度も先輩方の記事に救われました。

今度は自分もそういった何かに困った方達の一助になりたいと思い、始めました。

学習した内容を整理したいときや、
開発中に遭遇した課題やエラーの解決方法などを
定期的に共有していきたいと思います。

もし、私の投稿がお役に立てれば幸いです。

# 経歴
・1995年生まれ
・福島出身
・2017.3 都内文系大学卒
・2017.4 - 2023.3 金融機関勤務
　※経験職務 - 窓口業務 2年 / 融資業務 2年 / 営業 2年
・2023.4 - 2024.3 オーストラリア（ワーキングホリデー）
　※経験したお仕事
 　　日本食卸の会社にて、商品のピッキング・配送事務に従事。
   　　半年間で会社の業務フローの改善に貢献しました。
・2024.4 - 現在
　　家族の事情により、実家で生活中。隙間時間で仕事をしながら学習を継続中。

# 学習遍歴
・2024.4 - 8 プログラミングスクールKredo
・2024.9 - 現在 RecursionCSにて学習中

システム開発の一連の流れをチームで擬似体験できるスクールを選定しました。
その後、自力でコードがかけなかった課題を解決するためにRecursionCSにて学習を開始しました。

# 決意表明
自分が関わる人・チームの利益を増やすため、行動していきます。
そのために、学習と実践の継続を通じて貢献していきます。
Azure で料金を詳細に見る方法

ここ数日 B2pts (¥1.5/h くらい) しか使っていないのに、なんで 1 日で ¥100 以上かかるんだろうと不思議に思って調べようとしたものの、内訳を見る方法を見つけるのに時間がかかったのでメモ＆共有します。

ポータルの言語設定は英語です。


## 方法 1

https://portal.azure.com/ で詳しく調べたい subscription > コストのグラフの View Details > Group by の Meter > Granularity の Daily > Area から Table に変更

とすることで、細かく見ることができます。


## 方法 2

確定した請求明細から見る方法で、こちらの方法は直近5日程度を確認できません。

https://portal.azure.com/ で詳しく調べたい subscription > コストのグラフの View Details > View の Invoice details > Granularity の Daily で日毎のリソースごとで細かく見ることができます。

私の場合、E10 LRS Disk が一番費用がかかっていました。Group by の Resource を選んでみると、deallocate 済みの Windows インスタンスのディスクでした。イメージの作成時に `[smalldisk]` イメージを選べると知らなかった頃のです。削除しました。

英語設定＆画像がないので、伝わりにくいかもしれません。すみません。
GitHub Copilot for Eclipse（プレビュー）を使ってみた

# はじめに
インターネットサーフィンしていたら、以下記事を発見！

https://www.publickey1.jp/blog/25/copilot_for_eclipse.html

Eclipseユーザとして使ってみたかったので早速使ってみました。
恥ずかしながら、使うまでに色々詰まって一瞬諦めかけて解決した事を残します。

使ってみたい！あれ？インストールできない。やーめた。という方のご参考になれば幸いです

# Eclipseプラグイン
https://marketplace.eclipse.org/content/github-copilot

# 環境
Windows 11

# 使い勝手
https://forest.watch.impress.co.jp/docs/news/1662760.html

の記事を参考に操作してみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/c9d25f63-51d1-4574-8132-e89c2ab40075.png)

グレーで提案してくれる！

［Tab］キー を押下すると、コードが反映された！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/080ccfaf-0fe9-4c63-9573-a4d4e37155a5.png)

［ESC］キー　を押下すると、却下！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/da4f0e5a-5d29-4a8c-9ca8-09ee2eac6241.png)

［Ctrl］＋［→］キーを 押下すると、単語単位で反映！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/2fb3b6ba-b9b3-4db4-baed-ed2b80d9014a.png)

# インストール時にハマったこと
１．Eclipse Marketplace で GitHub Copilot で検索しても、出てこず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/c0cd2503-775e-42ea-8a17-762aa0d968f9.png)

使ってみたいのはこっち。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/a20e52ff-2031-428f-9276-320649fe4925.png)


＝＞ サイト側の以下アイコンをクリックして、Update Site URLを取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/7ddd40d3-956e-4069-b57a-a1a30106dd8f.png)

その後、Install New Software で、URLを貼り付けてインストール！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/8e8d8562-cbdb-4d80-a5ee-206686e07f26.png)

２．Eclipseのバージョンが古かった。
普段、STSを使っていて Version: 4.27.0.RELEASE だったので対象外でエラーになった。
```
Eclipse Versions: 2025-03 (4.35), 2024-12 (4.34), 2024-09 (4.33)
```
＝＞2024-12 (4.34) のEclipseをインストール

# 補足
右下にアイコンがあるので、そこでGitHubにログイン、有効、無効を設定可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206526/009fc7ec-e907-42db-8e0b-e948f77a3cee.png)
スライドや画面デザインで使うツールの個人的な覚書


あるきっかけから、ちゃんと画面デザインは目的とコスト天秤にかけて、どのイメージまでやるとか決めたほうがいいんだ...と思うようなった。要求整理/要件定義で進めていくポイントに合わせていい感じに使い分けたい。

久しぶりにそのことを思い出していたのだが、すっかり自分的な整理を忘れていたので覚書。

（途中からめんどうくさくなってきて　TBD ( To Be Defined, 後で書く）状態です）


# 手書き（ ラフ / スケッチ / ペーパーワイヤーフレーム）

・変にツールの使い方に目が言ってしまうことがあるので、まず手書きするのが最小限のスタート

## 使うツール

・紙とペン

## メリット
・最小限のコスト
・ツールの使い方とか覚えなくて良い
・アイデアと発想力で思うままにかける

## デメリット
・書き直しが面倒になる
・たいてい後で書き始めのものは読めないレベルにぐちゃる
　（とはいえ何度も書き直すのがブラッシュアップにつながる）
・他人と共有するのが写真を取ってアップロードして...とちょっとだけステップが増える
 
### 活用方法

・まずは自由に書く。参考に何も見ない。
・徐々に参考用の図をいくつか見繕って模写っぽくはじめる。直感的にアイデアがこの図の形っぽいんじゃね？を集めていく。
・アイデアフレームワークの図形パターンも眺めたりしながらも書く。
・プロダクト画面とかの用途なら、参考サイトのペルソナも自分なりに読み解いて、落とし込む。


# 低忠実度ワイヤーフレームと画面遷移図

・主だった要素のコメントもいれながら書きつつ、画面一覧とその遷移イメージを書く。

## 使うツール

・紙とペン
・もしくは使い慣れているデザインツール
　・個人的にはwhimsicalとかdraw.ioとか

## メリット

・画面遷移も合わさることで、チームが持っているイメージを合わせやすくなる。
　・単体の１画面だけだとイメージがつきずらいこともある。話に追いついていけてない人も巻き込みできる

## デメリット

・議論が細かいポイントに行ってしまうこともある。「その要素はこのXX画面なんでしょうか？」みたいな。

### 活用方法

・個々の画面のラフ図だけを書くわけじゃないので、いうたらラフ図（全体画面版）みたいな位置づけ
・他者とのすり合わせするほどではなくとも、一旦自分整理用に書くといい。
・場合によってはカスタマージャーニーマップや業務フロー図と合わせて使う。


# 高忠実度ワイヤーフレーム

・「高忠実度」と名前付けしたが、「中忠実度」と言ったほうがよいかもしれない。
・このフェーズ感では、画面におかれる要素を明確にコンポーネントレベルで書いたり、画面のどこを押すとどうなるのかというインタラクションもある程度明らかにする。
・デザイン的な要素（色とかサイズ感とか）はここでは着目しない。

## 使うツール

・使い慣れているデザインツール
　・個人的にはwhimsicalとかdraw.ioとか

 ## メリット

TBD

## デメリット

TBD

### 活用方法

TBD

# モックアップ

・ワイヤーフレームにデザイン用途を追加して、より実際の画面デザインのイメージの形にしていく
・よりユーザーのインタラクションをイメージして、場合によってはフォントのイメージ感やこんな画像イメージを置く、みたいな要素まで置く。

## 使うツール

・使い慣れているデザインツール
　・個人的にはFigmaとか

 ## メリット

TBD

## デメリット

TBD

### 活用方法

TBD

# プロトタイプ

・これまでの成果物をもとに、実際に画面インタラクション・アニメーションを再現できるツールに落とし込み、使い勝手を実際に検証する
・このフェーズではデザインは完成形ではないものの、ある程度の具体的な部分が出ている

## 使うツール

・使い慣れているデザインツール
　・個人的にはFigmaとか

 ## メリット

TBD

## デメリット

TBD

### 活用方法

・参考デザインをより深く探求しておく。
　・このフェーズでは様々な要求要件の解像度が上がっているタイミングで、解像度も高い。
　・これを具現化するためにゼロから考えるより、たいていすでに世の中に優れたものがある。
・ある程度画面はこうしたいというアイデアを持っている人や、後々画面について意見を言ってきそうな人にはこの段階でしっかり目に見てもらう。（どちらかというと感覚派の人はここで押さえる）
・場合によっては、より上流のプロダクトの目的、ユーザーペルソナ、ニーズを書いておきつつ、各画面について解説コメントも添える。（どちらかというとロジカルシンキング要素強めの人にはこれがあったほうがよい）
・デザイナーやUXに強い人もここで是非巻き込み見てもらう。
　・たいてい素人が作ったものなのでプロが色々指摘してくれる。
　・逆にこのフェーズより前にプロを巻き込むと、んーどうコメントすればいいだろうか...みたいになっちゃう気がするのでこのフェーズで巻き込むのが良い気がしている。

# デザインカンプ

・最終形として、デザイン性も完全に落とし込む。
・開発者に渡してお願いしますを完全に言える状態

## 使うツール

・使い慣れているデザインツール
　・個人的にはFigmaとか

 ## メリット

TBD

## デメリット

TBD

### 活用方法

・デザイン感性強いセンスの良い人には再度見てもらう。
　・すごく細かいボタンのデザイン、アイコンがどう思う、とかめちゃくちゃ細部もコメントくださいってする。
　　・参考になるし、このセンスのいい人を置き去りにすると出来上がった後に、すごく言いづらそうにコメントさせることになるので、実装前に見せる




# 参考記事

https://postd.cc/difference-between-wireframe-mockup-prototype/

https://blog.nijibox.jp/article/5elements_of_ux/

https://www.uxpin.com/studio/jp/blog-jp/%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97-vs-%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0-vs-%E3%83%A2%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%AE/

https://payproglobal.com/ja/%E5%9B%9E%E7%AD%94/saas-%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%81%A8%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AF/
読書メモ「言語化大全」

[「うまく言葉にできない」がなくなる 言語化大全](https://www.diamond.co.jp/book/9784478119266.html)を読んで個人的に大事だと思ったことを整理しました。  
この書籍は[IT エンジニア本大賞 2025](https://www.shoeisha.co.jp/campaign/award/result/) のビジネス書部門ベスト 10 に選出されています。

## 誰におすすめの書籍か

- 「うまく言葉にできない」と悩んでいる人
- 会議やプレゼンテーションで自分の考えを伝えきれないと感じている人
- 報告書やメールなど、文章作成に苦労している人

## 大事だと思ったこと

### CHAPTER2 「具体化力」を鍛える

#### 好きなことを具体的に語れるのは情報を豊富に持っているから

自分の趣味について饒舌になるのは情報があるからだったのか。  
言語化力を伸ばすには、あらゆる分野で「なぜ」を意識して情報を収集する。

#### ざっくり一言 → なぜ → たとえばで具体化する

感想を具体化するフレームワークとして使いやすそう。

#### 何も思いつかない時は思考のものさしを使う

1. メリット・デメリットは
2. ビフォー・アフターは
3. 類似点・相違点は
4. 誰におすすめか
5. どうやって、どんなふうに

個人的にブレインストーミングが苦手なので、フレームワークがあると考えやすい。  
AI に考えてもらう際のものさしとしても使えそう。

### CHAPTER3 「伝達力」を磨く

#### 1 つの文は 60〜70 文字で 1 つの意味だけ

一文一義とすることで、文章を構造的に捉えられるからわかりやすい。  
逆に一文が長いと、脳のメモリを使うのでわかりにくいだろう。

#### 話の流れがわかりやすい結論優先型

1. 結論
2. 理由
3. 具体例
4. まとめ

CHAPTER2 の「ざっくり一言 → なぜ → たとえば」と構造が同じ。  
自分の感想を具体化する際も相手に伝える際もわかりやすい型ということか。

#### 相手の興味を惹くために「魅力的な数字」に加工する

1g より 1000mg の方が視覚的にインパクトがある。

#### 相手の興味を惹くために「ベネフィット」を伝える

自分に関係ないものより自分ゴトとして考えられる情報の方に興味がわく。

### CHAPTER4 言語化で「自己実現」する

#### 指示が曖昧な場合は質問して食い違いを防ぐ

曖昧な指示しかしない人がいても「この人は言語化能力が低いんだな」と考えることができれば気は楽になりそう。

## まとめ

会議中などで言葉に詰まってしまうことがよくあるため、言語化能力を身につけたくてこの本を読みました。  
特に「ざっくり一言 → なぜ → たとえば」はすぐに実践できるフレームワークです。  
日常会話からこのフレームワークを使って言語能力を身につけていきます。
【Rails】authenticate メソッド

# はじめに
こんにちは。アメリカで独学でエンジニアを目指している者です。
現在 Railsチュートリアルを使用して勉強していますが、Ruby on Rails では、ユーザー認証機能を実装する際に、`has_secure_password` を使うことで手軽にパスワードのハッシュ化と認証処理を行えることがわかりました。本記事では、`has_secure_password` によって自動的に提供される `authenticate` メソッドの仕組みと具体的な使い方を解説します。

## has_secure_password とは？
`has_secure_password` は、Rails の `ActiveModel` に組み込まれたメソッドで、以下の機能を自動的に追加します。

* パスワードのハッシュ化: ユーザーが設定した平文パスワードを安全なハッシュ値に変換し、データベースに保存します。
* バリデーションの追加: パスワードの存在性や最小文字数のバリデーションが自動で追加され、セキュリティを強化します。
* 認証用メソッドの提供: `authenticate` メソッドにより、入力されたパスワードと保存されたハッシュ値を比較する仕組みを提供します。


## authenticate メソッドの基本動作
`authenticate` メソッドは、ユーザーが入力したパスワードを引数として受け取り、保存されているハッシュ化パスワードと比較します。具体的な動作は以下の通りです。

* 認証成功: 入力されたパスワードが正しい場合、メソッドはユーザーオブジェクト自身（self）を返します。
* 認証失敗: 入力されたパスワードが正しくない場合、false を返します。
この仕組みを利用することで、ログイン処理などのユーザー認証を簡潔に実装できます。

## モデル内での実装例
まずは、User モデルに has_secure_password を追加し、独自の認証用メソッドを作成する例です。
```ruby
class User < ApplicationRecord
  # パスワードのハッシュ化とバリデーションを追加
  has_secure_password

  # カスタム認証メソッド
  def verify_password(password)
    if authenticate(password)
      # 認証成功の場合、追加処理を行うことができます
      true
    else
      # 認証失敗の場合の処理
      false
    end
  end
end
```
この例では、`verify_password` メソッドを通して、内部的に `authenticate` を利用してパスワードの照合を行っています。必要に応じて、認証成功後の処理（ログ記録やセッション管理など）を追加できます。

## コントローラーでの利用例
次に、ログイン処理の中で authenticate メソッドを使用する例を紹介します。一般的なログイン処理では、ユーザーのメールアドレスでユーザーオブジェクトを検索し、入力されたパスワードで認証を行います。
```ruby
class SessionsController < ApplicationController
  def new
    # ログインフォームを表示するアクション
  end

  def create
    # ユーザーをメールアドレスで検索
    user = User.find_by(email: params[:email])
    
    # userオブジェクトが存在し、かつパスワードが正しいかを確認
    if user && user.authenticate(params[:password])
      # 認証成功: セッションにユーザーIDを保存してリダイレクト
      session[:user_id] = user.id
      redirect_to root_path, notice: 'ログインに成功しました。'
    else
      # 認証失敗: エラーメッセージを表示し再度ログインフォームへ
      flash.now[:alert] = 'メールアドレスまたはパスワードが正しくありません。'
      render :new
    end
  end

  def destroy
    # ログアウト処理
    session.delete(:user_id)
    redirect_to root_path, notice: 'ログアウトしました。'
  end
end

```
この例では、以下のポイントに注意してください。

* ユーザー検索: メールアドレスやユーザー名など一意の識別子でユーザーを検索します。
* 認証チェック: `user.authenticate(params[:password])` により、パスワードが正しいかどうかをチェックします。戻り値が `false` ではない場合は認証成功です。
* セッション管理: 認証成功時にはセッションにユーザーIDを保存し、以降のリクエストでログイン状態を保持します。

## セキュリティ上の考慮点
`has_secure_password` を利用する際の注意点として、以下のセキュリティ対策を考慮することが推奨されます。

* 強固なパスワードポリシー: 最小文字数、複雑性のあるパスワードの設定など、ユーザーに強固なパスワードを求めるバリデーションを追加する。
* パスワードリセット機能: ユーザーがパスワードを忘れた場合に備え、安全なパスワードリセットの仕組みを実装する。
* SSL/TLS の利用: ユーザーのパスワードやセッション情報がネットワーク上で盗聴されないように、必ず HTTPS を使用する。

## まとめ
`has_secure_password` と `authenticate` メソッドを利用することで、Ruby on Rails における認証機能の実装が非常に簡単かつ安全になります。

* モデル側でパスワードのハッシュ化やバリデーションが自動で行われるため、開発者は認証処理に集中できる。
* コントローラーでの実装例では、ユーザーのメールアドレスで検索した後、`authenticate` メソッドでパスワードの照合を行い、ログイン処理を完結させることができる。
ASP.NET の Table コントロールで colgroup と caption が消える現象とその対策


## はじめに

ASP.NET で `<table runat="server">` を使うと、ASP.NET 側で Table コントロールに変換されるため、HTML の標準要素である `<colgroup>` や `<caption>` がレンダリングされなくなる問題に直面しました。  
この記事では、その原因と、サーバー側での表示・非表示制御を維持しながら、HTML の記述をそのまま出力する方法についてまとめます。

## 問題の概要

ASP.NET の Table コントロールに変換されると、以下のようなコードの場合、  
`<colgroup>` や `<caption>` が出力されなくなってしまいます。

```html
<table id="myTable" runat="server" class="table">
    <colgroup>
        <col style="width:5%" />
        <col style="width:5%" />
        <col style="width:35%" />
        <col style="width:55%" />
    </colgroup>
    <caption>サンプルテーブル</caption>
    <tr id="TR001">
        <th>行ラベル１</th>
        <td>情報１−１</d>
        <td>情報１−２</td>
        <td>情報１−３</td>
    </tr>
    <!-- その他の行 -->
</table>
```

Table コントロールに変換されると、内部のレンダリング処理により `<colgroup>` と `<caption>` がサポートされず、最終的に HTML ソースに出力されません。

## 原因

ASP.NET の Table コントロールは、HTML 標準の `<colgroup>` や `<caption>` を扱えない仕様になっています。  
そのため、`runat="server"` を付与すると、これらの要素が変換処理で除外され、レンダリング結果に反映されなくなります。

## 解決策

この問題を回避するためには、テーブル全体をサーバーコントロールにしない方法があります。  
具体的には、テーブル全体を **asp:Panel** や **asp:PlaceHolder** でラップし、テーブル自体は通常の HTML として出力する方法です。  
こうすることで、`<colgroup>` や `<caption>` もそのままレンダリングされます。

### 対策例

#### ASPX 側

以下は、`asp:Panel` でラップした例です。

```html
<asp:Panel ID="panelTable" runat="server">
    <table id="myTable" class="table">
        <colgroup>
            <col style="width:5%" />
            <col style="width:5%" />
            <col style="width:35%" />
            <col style="width:55%" />
        </colgroup>
        <caption>サンプルテーブル</caption>
            <tr id="TR001">
                <th>行ラベル１</th>
                <td>情報１−１</d>
                <td>情報１−２</td>
                <td>情報１−３</td>
           </tr>
        <!-- その他の行 -->
    </table>
</asp:Panel>
```

#### コードビハインド (C#)

Panel の Visible プロパティを使って、テーブル全体の表示・非表示を制御します。

```csharp
// 表示する場合
panelTable.Visible = true;

// 非表示にする場合
panelTable.Visible = false;
```

## まとめ

ASP.NET の Table コントロールを使用すると、HTML の `<colgroup>` や `<caption>` がレンダリングされなくなる問題が発生します。  
今回の対策として、テーブル全体を `asp:Panel` でラップし、テーブルはプレーンな HTML として出力する方法を紹介しました。  
この方法なら、サーバーサイドでの表示・非表示制御はそのままに、HTML の記述内容（`<colgroup>` や `<caption>` など）も正しくレンダリングされます。
【AWS】セキュリティグループとネットワークACLの違いは？

# はじめに
AWSの勉強をしている中で、セキュリティグループとネットワークACLの違いをなかなか覚えられなかったので、備忘録として簡単に整理する。

# セキュリティグループとネットワークACL
### セキュリティグループ
- EC2などのインスタンスレベルで制御
- 許可する通信を設定する（デフォルトは全て拒否）
- リクエストに対するレスポンスは自動で許可（ステートフル）

### ネットワークACL
- サブネットレベルで制御
- 許可する通信と拒否する通信の両方を設定できる（デフォルトでは全て許可）
- リクエストもレスポンスも設定する必要がある（ステートレス）

# まとめ
通信の許可の設定については、実際に構築する上で理解していることが大切だと思うので、しっかり覚えられるようにしていきたい。
【AWS】AWSのコンテナ関係のサービス整理

# はじめに
AWSの勉強をしていて、コンテナ関係のサービスの理解があまりできていないので、備忘録として簡単に整理。

# コンテナとは
アプリケーションとその依存関係（ライブラリ、設定ファイルなど）をひとつにまとめたもの。開発から本番まで同一環境を再現可能で、開発・運用の効率化やコスト削減につながる。

# コンテナ関係の用語とAWSサービス

### コントロールプレーン
- 複数のコンテナを管理する
- ECSやEKS

### データプレーン
- 複数のコンテナが動く場所を用意する
- EC2やFargate

### EKS
- AWSでKubernetesを実行できるようにするマネージド型サービス

### ECS
- AWSが開発したコンテナ管理サービス
- EC2とFargateどちらにも対応している

### EC2
- ホストの管理が必要
- スペックを柔軟に選択できる
- コンテナイメージをキャッシュできるためFargateよりデプロイが速い

### Fargate
- ホストの管理が不要
- スペックが制限される

# まとめ
今回は簡単に整理しただけなので、これからさらに勉強して理解を深めていきたい。AWSに関わらずコンテナ関係の知識をさらにつけられるようにしたい。
【合格体験記】AWS クラウドプラクティショナー取得までの道のり

## 概要

- AWS Certified Cloud Practitionerに挑戦し、3週間で取得できたのでそれまでの道のりを執筆する
- 主に、合格するまでに実施したこと、注意点などを記述する

## 合格時の点数

821/1000点

![スクリーンショット 2025-02-15 093745.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728622/15f8e4a3-c431-45ee-9b2e-249c4b931f21.png)

## 受験前の理解レベル
- AWS実務経験1年
- S3、StepFunctionなどを実務で触れるレベルだが、体系的な知識は何も知らない状態
    - S3に格納できるデータ容量が制限なしということすら知らなかった
    - バケットとオブジェクトだけ知っている

## 教材
### 無料
- [AWS Cloud Practitioner Essentials(日本語)](https://explore.skillbuilder.aws/learn/courses/1875/aws-cloud-practitioner-essentials-ri-ben-yu/lessons)
    - 動画、テキスト、小テスト形式で理解する
    - コースの最後には、30問の理解度テストを受験可能
- [AWS Certified Cloud Practitioner Official Practice Question Set (CLF-C02- 日本語)](https://explore.skillbuilder.aws/learn/courses/16792/aws-certified-cloud-practitioner-official-practice-question-set-clf-c02-ri-ben-yu/lessons)
    - 全20問の模擬試験
- [AWS Cloud Quest: Cloud Practitioner (日本語)](https://explore.skillbuilder.aws/learn/courses/17553/aws-cloud-quest-cloud-practitioner-ri-ben-yu/lessons)
    - ゲームを通じて理解度を深める
    - AWSの技術を使って町の人の問題を解決する
    - 公式が用意したAWS環境を使って、実際にAWSを立ち上げて操作できるのでおススメ（自分の進捗度は10%ほどなので必須ではない）
- [CLF 模擬試験](https://apps.apple.com/jp/app/aws%E8%AA%8D%E5%AE%9A-%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%BC%E6%A8%A1%E6%93%AC%E8%A9%A6%E9%A8%93/id1509436492)
    - iPhoneアプリ
    - 練習問題、模擬試験は3つまで無料


### 有料
- [【CLF-C02版】この問題だけで合格可能！AWS 認定クラウドプラクティショナー 模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-4260/?couponCode=KEEPLEARNING)
    - 全65問の模擬試験が6回分あるのでかなり役立つ
    - やや難しめな印象


## 学習スケジュール

### 手順
- 問題集を解いてから、理解度の穴埋めとしてAWS公式の `e-learning` を実施（逆だったかもしれねぇ）
- Udemyで使用した[問題集](https://www.udemy.com/course/aws-4260/?couponCode=KEEPLEARNING)では、演習モード(一問一答)、試験モードがあるため、演習で理解度を深めることを念頭に置いて学習した
    - 誤った選択肢の説明もできるようにしておく

### スケジュール
- 勉強期間: 3週間
    - 平日: 2h
    - 休日: 3h

:::note info
仕事と並行して勉強時間を確保
:::

## 受験までにやるべきこと

### 試験の予約

- [ピアソンVUE](https://www.pearsonvue.com/jp/ja/aws.html)で試験の予約を行う
- 予約手続き中、自分の住所を英語で書く必要があるが、書き方は特に決められていない
- 何かわからないことがあったらピアソンVUE公式の[問い合わせ窓口](https://www.pearsonvue.com/jp/ja/test-takers/customer-service.html)で質問する



### 受験時に必要な持ち物

- 本人確認書類2点
    - ピアソンVUE公式の[本人確認書類について](https://www.pearsonvue.com/jp/ja/test-takers/tutorial/identification-1s.html)を参照
- 受験時には本人確認書類1点しか持ち込めないので注意（メモ用紙とペンは渡される）

:::note warn
当日は証明用で写真を撮るので、身だしなみは注意した方がいいかも
:::

### 当日
- 必ず15分前に到着する
- 早めに到着しても受験できた（自分は30分前に到着した）


## おわりに

- 最終的にはSAAとDVAに合格しておきたいので、次はSAAに挑戦します
- インフラ設計もできるバックエンドエンジニアってかっこいいよね


以上
SDKでCognitoにアクセス時に「Access Token does not have required scopes」エラーが出た

## はじめに
使用技術はフロントエンドではReact、バックエンドではGoを使用
Cognitoを使ってユーザーを登録し、Cognitoから取得したアクセストークンを使用してバックエンドで認証。
認証ができたらCognitoからユーザー情報を取得したかったが、そこで```Access Token does not have required scopes```とエラーが出た。

その時の解決方法の備忘録です。

## 結論
どうやらトークンに含まれている```scopes（スコープ）```が足りていないらしい。
必要なスコープを追加することで解決した。

今回使用したいCognitoのAPIは```GetUser```でここにアクセスして情報を取得するには```aws.cognito.signin.user.admin```というスコープが必要。

[公式ドキュメント](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUser.html)

![スクリーンショット 2025-02-15 10.23.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/45be49a7-705e-4c65-93c6-60fbea30783a.png)

## 解決方法

![スクリーンショット 2025-02-15 10.28.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/be341a72-99cd-4235-b040-e98c4e4e649b.png)

ユーザープール -> アプリケーションクライアント -> 任意のアプリケーションを選択 -> ログインページタグ -> 編集を押す

![スクリーンショット 2025-02-15 10.37.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3813857/7b5bd997-786c-4d52-bd3b-885218ecffc0.png)

マネージドログインページを編集画面に遷移し、画面を下にスクロールするとOpenID Connectのスコープというフィールドがあります。
トグルを開いて```aws.cognito.signin.user.admin```にチェックを入れる
変更を保存するを忘れずに。

これでトークンの中にスコープが含まれようになりますが、今回は一度フロントエンドで取得しバックエンドに渡しているので、フロントエンドにもスコープを定義してあげます。

フロントエンドの.envファイルにも同様にスコープを追加する。

```.env
VITE_COGNITO_SCOPE="email openid phone profile aws.cognito.signin.user.admin"
```

これでアクセストークンに必要なスコープが含まれ、無事にバックエンドからユーザー情報を取得できました！