OmniAICreator/Qiita-1.07M huggingface dataset:
フロントエンド入門：ID・クラス・タグ、どれが勝つ？CSSの優先順位を解説して記事にしてみた

## はじめに

CSS（Cascading Style Sheets）には、複数のスタイルが適用される要素がある場合、どのスタイルを優先して適用するかを決定する「優先度（Specificity）」のルールがあります。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

CSSの記述方法によっては、思った通りのデザインにならないことがあります。特に、異なるセレクタが同じ要素に適用されたときに、どのスタイルが優先されるのかを理解することは重要です。

## 書こうと思ったきっかけ

あるプロジェクトでCSSのスタイルが思ったように適用されず、デザインが崩れる問題が発生しました。

:::note warn
**調べてみると、CSSの優先度（Specificity）によって期待とは異なるスタイルが適用されていたのが原因でした。**
:::

この経験を踏まえ、CSSの優先度の仕組みを分かりやすくまとめておこうと思い、この記事を書きました。

## CSSの優先度とは？

CSSには、スタイルの競合を解決するための優先度（Specificity）というルールがあります。

今回は以下のCSSを例に、優先度の考え方を解説します。

```css
<style>
  img {
    width: 600px;
  }
  .cats {
    width: 200px;
  }
  #my_cat {
    width: 50px;
  }
</style>
```

## セレクタの優先度

CSSのセレクタは、以下のルールに基づいて優先度が決まります。

- **IDセレクタ (`#id`)** → **優先度 100**
- **クラスセレクタ (`.class`)、属性セレクタ (`[attr]`)** → **優先度 10**
- **タグセレクタ (`element`)** → **優先度 1**

上記のルールに基づき、CSSの優先度を比較すると、以下の順番になります。

| セレクタ | 優先度 | 適用されるスタイル |
|----------|------|----------------|
| `#my_cat { width: 50px; }` | 100 | IDセレクタが最優先 |
| `.cats { width: 200px; }` | 10 | クラスセレクタ |
| `img { width: 600px; }` | 1 | タグセレクタ |

## 実際に適用されるスタイル

以下のようなHTMLがある場合、各画像の `width` の値はどうなるでしょうか？

```html
<img src="cat1.jpg" alt="Cat 1">
<img class="cats" src="cat2.jpg" alt="Cat 2">
<img id="my_cat" class="cats" src="cat3.jpg" alt="Cat 3">
```

### 各要素への適用結果

1. `<img src="cat1.jpg">` → `width: 600px;` （`img` タグのデフォルトスタイルが適用）
2. `<img class="cats" src="cat2.jpg">` → `width: 200px;` （クラスセレクタ `.cats` が `img` タグの `600px` を上書き）
3. `<img id="my_cat" class="cats" src="cat3.jpg">` → `width: 50px;` （IDセレクタ `#my_cat` が `.cats` の `200px` を上書き）

## まとめ

- **優先度のルール** → IDセレクタ > クラスセレクタ > タグセレクタ
- **具体的な優先度の数値** → `#id (100) > .class (10) > element (1)`
- **より優先度の高いスタイルが適用される**

CSSを記述する際には、どのスタイルが適用されるかをしっかり理解し、意図したデザインが反映されるように設計してみてください！
NotebookLMの議事録生成は業務で使えるのか？

# はじめに

こんにちは！
サッカー選手から転身してSEをしている[@よしき](https://x.com/YoshikiSasajima/)です！

議事録って、結局「誰が」「何を」「いつまでにやるか」が決まらないと意味がない。でも、実際には曖昧な議事録が多すぎる…。
そんなときに見つけたのが、GoogleのNotebookLM。これが、自分の資料を学習させるだけで、「決定事項」や「ネクストアクション」をしっかり記録してくれるのが衝撃でした。
今回は、実際にNotebookLMを使ってみたSEの視点から、このツールの可能性を共有したいと思います。


# NotebookLMとは？

Googleが提供する「自分専用AIアシスタント」。アップロードしたドキュメントやGoogleドライブ内の資料を学習させ、それをもとに質問に答えたり、要約したり、議事録を作成してくれるツールです。

主な機能は以下の通りです。

- ドキュメントの要約
- ドキュメントに基づいた質疑応答
- 議事録やメモの生成
- ネクストアクションやタスクの抽出
- 複数のドキュメントを横断して情報検索
- マインドマップの生成

https://support.google.com/notebooklm/answer/15724458?hl=ja

---

# 他の議事録ツールと何が違うのか？

### 決定事項が明確！

他の議事録ツールは、「○○について検討した」「○○について議論した」という曖昧な表現が多いですが、NotebookLMは「○○について、○○を実行することで決定した」といった、**実行すべき行動を明確に記載**してくれます。

プロジェクトを円滑に進めるために「何が決まったのか」を明確にするのは超重要。SEをやっている自分にはかなり刺さりました。




# NotebookLMの便利なポイント

### Googleドライブとの連携ができる

Googleドライブに保管されたドキュメントやスライドのリンクを貼るだけで、簡単にNotebookLMのソースとして使用できます。
毎回ファイルをアップロードする手間がないのが嬉しい。

![スクリーンショット 2025-03-21 8.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/cc8d18cb-b637-4840-8b1f-4c1ddc387a1a.png)

### 音声データもそのまま取り込める

通常、議事録作成ツールは録画データを文字起こししてから使いますが、NotebookLMは音声データを直接ソースとしてアップロードが可能です。
**録音→議事録作成が一気通貫でできる**のは大きな強みです。


# 少し変わった機能

### マインドマップの生成
今までの打ち合わせ録画データを都度ソースに追加しておけば、現状のプロジェクト全体の状態をマインドマップで確認することも可能です。個人的にはあまり使っていませんが、こういった機能を搭載しているツールは他ではあまり見かけたことがないので、紹介してみました！

![NotebookLM Mind Map (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/fd44a2c8-80de-4b88-8b1a-6f01c1456d4b.png)




# 便利な使い方

### 自分仕様の議事録テンプレを使う

事前に議事録のフォーマットやルールをテキストファイルにまとめてソースに追加。
「このフォーマットで議事録を作成して」と指示すれば、**自分のルールに合った議事録を生成**できます。
お客さん指定の議事録フォーマットに合わせなくてはいけない場面などでも活用できそうですね。


（例）
```
以下のルールに従い議事録を生成してください。

# 出力条件
- タイトル：議題が多い場合は大→中→小のようにネストすること。
- 解決：複数の解決案が出た場合は複数記載すること。
- 結論：結論の決め手も記載すること。タスクが発生した場合は、誰が、いつまでに、何をするかを明確に記載すること。

# 出力形式
{議事録タイトル}
目次
- {目次内容}

セッション内容
- {大タイトル}
    - {中タイトル}
        - {小タイトル}
            - 課題：
                - {課題内容}
            - 解決：
                - {解決}
            - 結論：
                - {結論}

```

サッカーのミーティングの文字起こしファイルから生成された議事録がこちら↓
見事、指定したフォーマットに従って議事録を生成してくれました👏


![スクリーンショット 2025-03-21 8.45.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/88041259-dbeb-450d-a90a-7202a5fe1f82.png)



# 毎回音声データを追加しておくと…

「ネクストアクションを教えて」と聞くだけで、前回のミーティング内容からやるべきタスクをリストアップしてくれます。

特に気に入っているのは、タスクの背景や関連するソースへのリンクが自動で埋め込まれるところです。例えば、「なぜこのタスクが生まれたのか？」といった経緯を確認したい場合でも、そのままリンクをクリックすれば、議論の元になった資料や音声ソースをすぐに確認できます。

単なるタスク管理ではなく、文脈まで辿れるのが非常に便利だと感じました。

![スクリーンショット 2025-03-21 8.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1256101/78310937-6568-44ee-8ec3-e94b4d68cd79.png)


# 今後に期待したいこと

### ソースファイル上限の緩和

- 現状は**300ファイルまで**しかソースに登録できません。
- 長期のプロジェクトや大規模案件だと資料や会議録が増えるので、上限がもう少し緩和されると助かります！

### スプレッドシートは未対応（今後に期待）

仕様書などをGoogleスプレッドシートで管理しているケースが多いのですが、これが現在2025年3月21日時点ではNotebookLMで扱えません。
ここが対応されたら、さらに使えるシーンが増えると感じています。



# まとめ

NotebookLMは、議事録作成における **「決定事項が曖昧になる問題」** を解決してくれる優れたツールです。

プロジェクトマネジメントやSEの業務で「誰が」「何を」「いつまでにやるか」をしっかり明記しておきたい人には、かなりおすすめです。

今後のアップデートにも期待しつつ、議事録ツール選びで悩んでいる方は、ぜひ一度試してみてください！
Power BI ダッシュボードの使い方

# はじめに

こんにちは！
記事をご覧いただきありがとうございます。
本記事では、Power BIのダッシュボード機能ついて解説します。

ぜひ最後までご覧ください！

# 目次
4.  [ダッシュボードとは？](#ダッシュボードとは)
1. [ダッシュボードの使い方](#ダッシュボードの使い方)
4.  [最後に](#最後に)


# ダッシュボードとは？
Power BI の ダッシュボード とは、複数のレポートやデータソースから重要な情報を1ページにまとめて可視化する機能です。
レポート とは異なり、ダッシュボードは 1ページの固定ビュー であり、ユーザーが自由にフィルターを適用することはできません。

# ダッシュボードの主な機能
Power BI のダッシュボードでは以下の様々な機能があります。

#### ピン留め
レポートやビジュアルをダッシュボードに「ピン留め」して表示
グラフやカードを固定して、重要な情報を一目で確認可能

#### Q&A 機能
自然言語クエリ を使ってダッシュボードのデータを検索
例：「今月の売上を表示」「地域ごとの売上合計を教えて」
ダッシュボード上に Q&A タイルを追加して即座にデータ分析が可能
#### タイルのカスタマイズ
ダッシュボードの タイル はサイズ変更やタイトル編集が可能
画像やテキストを追加して、カスタムダッシュボードを作成できる
#### アラート設定
KPI カードなどのビジュアルに対して「閾値アラート」を設定
例：「売上が100万円を超えたら通知する」
Power BI サービス上で設定し、メール通知を受け取ることができる
#### 共有とアクセス管理
個人 / 組織内での共有（Power BI サービスの共有機能）
行レベルのアクセス制御（RLS） により特定のユーザーに制限


# ダッシュボードの使い方
### ① ダッシュボードの作成
- Power BI サービス にログイン
- レポートを開く
- ピン留めしたいビジュアル を選択し「ダッシュボードにピン留め」をクリック
- 新しいダッシュボード を作成、または既存のダッシュボードに追加
### ② タイルのカスタマイズ
- タイルをドラッグ＆ドロップで並び替え
- 「編集」からタイルのタイトルや説明を変更
- 画像や動画、テキストボックスを追加してデザインを調整
### ③ 共有と公開
- 「共有」ボタン をクリック
- ユーザーのメールアドレスを入力し、権限を設定
- 「Power BI アプリ」に公開 することで、組織内で利用可能に`なる

# 最後に
本記事では Power BI のダッシュボード機能について説明しました。
ダッシュボードの共有やアクセス管理、ワークスペースの権限設定、Power BI アプリの公開方法などは、実際に操作しながら学ぶことでより理解を深めることができると思います。
最後まで読んでいただきありがとうございました。
フロントエンド入門：CSSが反映されない原因はid指定ミスだったので、まとめてみた

## はじめに

Webページを作成していると、「CSSのスタイルが適用されない」という問題に遭遇することがあります。

:::note warn
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

この記事では、ある具体的なケースを例にとり、問題の原因とその修正方法を解説します。

## 書こうと思ったきっかけ

今回、CSSのセレクタが適用されないという問題に直面しました。原因を調査すると、`id` の指定方法のミスが原因であることが判明しました。同じような問題に悩んでいる方がいるかもしれないと思い、記事にまとめることにしました。

## HTMLのCSSセレクタ適用ミスと修正方法

## **問題のコード**
以下のHTMLとCSSのコードを見てみましょう。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 600px;
    }
    .cats {
      width: 200px;
    }
    my_cat {
      width: 50px;
    }
  </style>
</head>
<body>
  <h1>ああああ</h1>
  <h2>ああああ</h2>
  <h3>ああああ</h3>
  <p>ああああ</p>
  <a href="file:///Users/hondaakiratarou/Desktop/VScode/practice.html">2ページ目</a>
  <img src="image/Screenshot.png" alt="">
  <img src="image/Screenshot.png" class="cats">
  <img src="image/Screenshot.png" class="cats" id="my_cat">
</body>
</html>
```

上記のコードでは、`my_cat` というセレクタを指定して `width: 50px;` にしていますが、このスタイルが適用されません。

## **問題の原因**

```css
my_cat {
  width: 50px;
}
```

この `my_cat` は **HTMLのタグ名** に対するセレクタとして解釈されます。しかし、`my_cat` というタグはHTMLには存在しません。そのため、スタイルが適用されないのです。

## **修正方法**

この問題を解決するには、以下のいずれかの方法を使用します。

### **① idセレクタを使用する（推奨）**
`id="my_cat"` に対して適用するには、`#my_cat` を使うのが正しい方法です。

#### **修正後のCSS**
```css
#my_cat {
  width: 50px;
}
```

#### **修正後のHTML**
```html
<img src="image/Screenshot.png" class="cats" id="my_cat">
```

### **② classセレクタを使用する**
複数の要素に同じスタイルを適用する場合は、`class` を使うのも一つの方法です。

#### **修正後のCSS**
```css
.small-cat {
  width: 50px;
}
```

#### **修正後のHTML**
```html
<img src="image/Screenshot.png" class="cats small-cat">
```

### **③ タグ名として使用する（非推奨）**
もし `my_cat` をカスタムタグとして使用したい場合は、Web Components を作成する必要があります。ただし、通常のCSS適用の目的では、`id` または `class` を使う方が簡単で適切です。

## まとめ

CSSセレクタが適用されない場合、以下のポイントを確認してみてください。

- **HTMLのタグ名とCSSのセレクタが合っているか？**
- **idにスタイルを適用する場合は `#id名` を使用しているか？**
- **classにスタイルを適用する場合は `.class名` を使用しているか？**

今回のケースでは、`#my_cat { width: 50px; }` に修正することで、スタイルが正しく適用されるようになります。
【Vuex】actionsの引数 { commit } とcontextオブジェクトの理解

# 1. はじめに
Vuexを使用するなかで、「アクションはミューテーションをコミットするもの」という認識でactionsの引数に`{ commit }`と書いていました。
しかし、actionsの引数に取られている`{ commit }`が何なのか正確にわかっていなかったので調べてみました。

この記事では、`{ commit }`が何か説明します。

```javascript
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
```


# 2. actionsの引数 { commit } の正体
調べてみると以下のことがわかりました。

actionsの引数は`context` オブジェクトを受け取ります。
`context` オブジェクトは以下のプロパティを持ちます。
つまり、**{ commit } は`context` オブジェクトのcommit関数を分割代入を使用して記述したもの**です。

これを完全に理解するために、`context` オブジェクトと分割代入について調べたのでまとめていこうと思います。

```
{
  state,      // `store.state` と同じ or モジュール内にあれば現在のVuexモジュールのstate
  rootState,  // モジュール内からルートのstateにアクセスするために使用（ルートでは使われない）
  commit,     // `store.commit` と同じ。mutationsを呼ぶための関数。
  dispatch,   // `store.dispatch` と同じ。他のactionsを呼ぶための関数。
  getters,    // `store.getters` と同じ or モジュール内にあれば現在のVuexモジュールのgetter
  rootGetters // モジュール内からルートのgettersにアクセスするために使用（ルートでは使われない）
}
```

参考：

https://vuex.vuejs.org/ja/api/#mutations

https://vuex.vuejs.org/ja/guide/actions.html


# 3. contextオブジェクト
Vuexの`context`オブジェクトは、actions内で利用できるオブジェクトで、Vuexのいくつかのプロパティやメソッドにアクセスできるものです。

context.commit を呼び出すことでミューテーションをコミットできる、
context.state や context.getters で、ステートやゲッターにアクセスできるということです。

**action関数の第1引数にはこのcontextオブジェクトが渡されます。**

例えば、以下のincrementActionでは、
`context.commit('increment')`を使用してミューテーションを呼び出しています。

```javascript
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAction (context) {
      context.commit('increment')
    }
  }
})
```

上記は context オブジェクト全体を受け取る典型的な書き方ですが、contextオブジェクトは先述したように複数のプロパティを持っているため、必要なものだけを分割代入で取得することが多いです。


:::note info
Vuex において引数としてcontextオブジェクトを受け取るのはactionsのみです。
mutationsは同期的にstateを直接変更するため、常に第1引数にstateを受け取り、
gettersは、ステートの値を計算・加工して取得するための関数なので、第1引数にstate、第2引数に他のgetters を受け取ります。
:::

# 4. 分割代入を使う場合
上記の例を、分割代入を使用すると以下のようになります。
commitだけを使うときに、context.commitと書かずに済むのでこの書き方がよく使われるということです。

```javascript
actions: {
  incrementAction ({ commit }) {
    commit('increment')
  }
}
```

:::note info
分割代入とは
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式のこと
:::

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring

<details open><summary>分割代入の例</summary>

```javascript
const user = { name:'Taro', age: 15, country: 'Japan' };
console.log(name); // ReferenceError: name is not defined
const { name } = user; // name を変数として取り出
console.log(name); // "Taro"
```
</details>


# 最後に
1つのことをアウトプットしようとしたことで、副次的にその他のわかっていなかったことに対しても理解を深めることができました。
調べてみると全く知らなかった知識を得られる機会になるので、小さな疑問も逃さず解消していきたいです。
最後までお読みいただきありがとうございました！
フロントエンド入門：HTMLタグの基本！ html・head・body の使い方を体系的にまとめてみた

## はじめに

Webページを作成する際に不可欠なHTMLの基本タグである`html`、`head`、`body`について解説します。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

これらのタグは、Webページの構造を決定し、適切に使用することで、ページの見た目や動作を正しく制御できます。

## 書こうと思ったきっかけ

最近、HTMLを学び始めた方から「HTMLの基本構造について詳しく知りたい」という質問を受けることが増えました。

:::note warn
特に`head`と`body`の役割や違いについて混乱することが多いようです。（私も学び始めは混乱していました...）
:::

そこで、HTMLの基本的な構造を整理し、分かりやすく説明する記事を書こうと思いました。

## `html` タグ

`html` タグは、全てのHTMLコードを包む格納タグです。HTMLドキュメントは、この`html`タグで閉じなければなりません。

**例:**
```html
<!DOCTYPE html>
<html>
    ...
</html>
```

`<html>` タグの中に、Webページの情報を含む`head`タグと、実際のページ内容を表示する`body`タグが入ります。

## `head` タグ

`head` タグは、Webページのメタ情報を含む部分です。ページ内容そのものは表示されませんが、次のような情報を含めることができます。

- **ドキュメントのタイトル** (`<title>`) 
- **キャラクターセット** (`<meta>`)
- **スタイルシート (CSS)** (`<link>`)
- **JavaScriptスクリプト** (`<script>`)

**例:**
```html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMLの基本構造</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>
```

## `body` タグ

`body` タグは、ページに実際に表示されるコンテンツを含む部分です。文章や画像、リンク、フォームなどが入ります。

**例:**
```html
<body>
    <h1>ようこそ！</h1>
    <p>HTMLの基本構造を学びましょう。</p>
    <img src="image.jpg" alt="画像">
</body>
```

## `html` `head` `body`タグの関係

HTMLドキュメントは、次のような構成で作られます。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>HTMLの基本構造を学びましょう。</p>
</body>
</html>
```

## まとめ

`html`、`head`、`body`タグは、HTMLドキュメントの基本構造を形成する重要な要素です。

- `html`タグは全体を包む
- `head`タグはメタ情報や設定を含む
- `body`タグはページの内容を表示する

これらの基本を理解することで、HTMLをより効果的に使えるようになります。ぜひ実際に手を動かして試してみてください！
【Chrome拡張機能開発】ChromeのWebサイトの表示が崩れる

# はじめに
私は最近、作ってみたい拡張機能があり拡張機能の開発をしています。
昨日まで正常に表示されていた Google Chrome の Web ページが、今朝 PC を開くと、↓のように崩れて表示されていました。

![スクリーンショット 2025-03-21 8.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585181/89dd36bd-d876-4602-bc6d-397a9f08dbd2.png)

# 解決策
最初に見つけた解決法は、アカウントをログアウトするというものでした。すると、Webサイトのレイアウトが崩れることなく表示されました。

つまり、私のアカウントに問題があることが分かりました。
同時に開発していた拡張機能が悪さしているのではないかと気づき、拡張機能を外した所、正常なページが表示されました。

1. 悪さをしていた拡張機能
![スクリーンショット 2025-03-21 8.42.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585181/9454c2f3-f4c3-4522-9244-ef1b95a58808.png)

2. 正常に表示された Qiita の Webページ
![スクリーンショット 2025-03-21 8.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/585181/fee70227-69b9-434a-a36d-42947afa1fef.png)

# 原因
拡張機能のmanifestファイルとcssファイルが原因でした。

### 修正前
```json:manifest.json
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
    "css": ["styles.css"]
  }
]
```

```css:styles.css
body {
    font-family: sans-serif;
    width: 400px;
}
```
manifestのcontent_scriptsでcssファイルを設定している為、全てのWebページにcssの設定(bodyの幅が400pxに固定される)が反映されています。

### 修正後
manifest.jsonのcontent_scripts内のcssに関する記述を削除
```json:manifest.json
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["popup.js"]
  }
]
```
popup.html でのみ cssの設定を有効にしたいので、以下のコードを popup.html に追加

```<link rel="stylesheet" href="styles.css">```

```html:popup.html
<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="styles.css">
    ...
  </head>
...  
</html>
```

# おわりに
同じような問題に遭遇している人がいるかもしれないと思い記事を書きました。

そのような方の助けになれば幸いです。

いいねしてくれると喜びます！！

ここまで読んでいただきありがとうございました〜
フロントエンド入門：<!DOCTYPE html> の本当の役割について調べてみたら面白かったのでまとめてみた

## はじめに

`<!DOCTYPE html>` は、HTML ドキュメントの最初に記述される宣言であり、Web ブラウザに対して HTML のバージョンを明示する役割を持ちます。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

本記事では、その役割や歴史について詳しく解説します。

## 書こうと思ったきっかけ

Web 開発において、`<!DOCTYPE html>` の記述は基本的なものですが、その重要性を意識していない方も多いかもしれません。

:::note warn
***特に、HTML5 では DOCTYPE の記述が簡素化されたため、なぜ必要なのか疑問に思うこともあるでしょう。***
:::

本記事では、その意義を改めて整理し、理解を深めることを目的としています。

## `<!DOCTYPE html>` の役割

1. **HTML のバージョンを指定する**
   - `<!DOCTYPE html>` は HTML5 の文書型宣言であり、HTML5 に準拠していることをブラウザに伝えます。
   - 以前の HTML4 や XHTML では異なる `DOCTYPE` 宣言が必要でしたが、HTML5 では `<!DOCTYPE html>` だけで済みます。

2. **標準モードの適用**
   - `DOCTYPE` 宣言が適切に記述されていない場合、ブラウザは「互換モード」や「クイークスモード（Quirks Mode）」でレンダリングすることがあります。
   - `<!DOCTYPE html>` を記述することで、「標準モード（Standards Mode）」が適用され、HTML5 の仕様に準拠した適切な描画が行われます。

## 以前の HTML における DOCTYPE 宣言との違い

### HTML 4.01 の DOCTYPE 例
```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```
このように、HTML4 では DOCTYPE 宣言が長く、DTD（Document Type Definition）を指定する必要がありました。

### XHTML 1.0 の DOCTYPE 例
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```
XHTML では XML のルールに基づき、より厳密な文法が求められていました。

## HTML5 でのシンプルな DOCTYPE
HTML5 では、よりシンプルな形で宣言できるようになりました。
```html
<!DOCTYPE html>
```
このシンプルな宣言によって、ブラウザは自動的に HTML5 の標準モードでレンダリングを行います。

## まとめ
- `<!DOCTYPE html>` は HTML5 の標準的な宣言方法であり、ブラウザに HTML5 を適用するために必要です。
- 以前の HTML4 や XHTML では複雑な DOCTYPE 宣言が必要だったが、HTML5 では簡潔になった。
- DOCTYPE を適切に指定することで、ブラウザの標準モードを適用し、正しい表示が保証される。

Web ページを作成する際は、必ず `<!DOCTYPE html>` を記述し、正しくレンダリングされるようにしてみてください！
フロントエンド入門：HTML・CSS・JavaScriptの違いを体系的にまとめてみた

## **はじめに**
Webサイトを作成する際、よく使われる技術としてHTML、CSS、JavaScriptがあります。

:::note info
**個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。**
:::

それぞれの役割を理解することで、より効果的にWebページを作成・管理することができます。

## **書こうと思ったきっかけ**
Web開発を始めたばかりの方にとって、HTML、CSS、JavaScriptの違いが分かりにくいことが多いと感じました。

そこで、それぞれの役割を簡潔にまとめた記事を作成し、初心者の方でも理解しやすいようにしたいと思いました。

## **1. HTML（HyperText Markup Language）**
HTMLは、Webページの構造を定義するマークアップ言語です。文章の見出しや段落、リンク、画像、表など、ページの基本的な要素を記述する役割を持ちます。

### **特徴**
- Webページの骨組みを作る
- タグ（例：`<h1>`、`<p>`、`<a>`）を使って要素を定義する
- 単体ではデザインや動的な動作は含まれない

### **例**
```html
<!DOCTYPE html>
<html>
<head>
    <title>HTMLの例</title>
</head>
<body>
    <h1>これは見出しです</h1>
    <p>これは段落です。</p>
</body>
</html>
```

## **2. CSS（Cascading Style Sheets）**
CSSは、HTMLで作成したページのデザインやレイアウトを指定するスタイルシート言語です。文字の色や背景色、フォントの種類、レイアウトなどを設定できます。

### **特徴**
- Webページのデザインを整える
- クラスやIDを使用して特定の要素を装飾可能
- HTMLと組み合わせて使用する

### **例**
```css
body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}
h1 {
    color: navy;
    text-align: center;
}
p {
    font-size: 16px;
}
```

## **3. JavaScript（JS）**
JavaScriptは、Webページに動的な動作を追加するプログラミング言語です。ユーザーの操作に応じた反応をしたり、アニメーションを加えたり、フォームの入力チェックを行うことができます。

### **特徴**
- Webページに動的な要素を追加する
- ユーザーの操作（クリック、入力など）に応じて動作を変えられる
- HTML・CSSと組み合わせてインタラクティブなWebサイトを作成可能

### **例**
```javascript
document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("button").addEventListener("click", function() {
        alert("ボタンがクリックされました！");
    });
});
```

## **まとめ**
| 言語  | 役割 |
|------|------|
| HTML | Webページの構造を作る |
| CSS | Webページのデザインを整える |
| JavaScript | Webページに動的な動作を追加する |

この3つを適切に組み合わせることで、魅力的で使いやすいWebサイトを作成できます。それぞれの特性を理解し、活用してみてください！
SCSSの@use、@forwardについて理解する 

# importの問題点

![スタイルファイル参照構造.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/53c2b211-9d39-4b0c-8fd1-ea4616f9bf94.png)
`@import`の問題点として、以下の図のようにtopコンポーネントでこれまで定義されてきたセレクタ、変数、関数などの情報を含んだ`styles.scss`を`@import`で宣言すると、`styles.scss`で定義したものがtopコンポーネント以外に反映されてしまうことになり、ほかのコンポーネントに影響を与えてしまう。**というのも`@import`で宣言したものはグローバル(プロジェクト全体)に適用されるという特性があるからである**。
例えば以下のような構成になっているとする。

```styles.scss
.button {
  background-color: blue;
  color: white;
}
```

```top.component.scss
@import "../styles.scss"; 

.top-button {
  @extend .button;
}
```

上記のコードのように、`top.component.scss`内で`@import "../styles.scss"; `を宣言している場合、`import`で宣言したものはグローバル(プロジェクト全体)に適用される特性上、`app.component.scss`などの他のコンポーネントにも`.button`クラスが存在すると、`styles.scss`の影響で意図しないスタイル変更が起こる可能性がある。
そのような問題点を解決するのが↓

# useの特性
`@use`を使用するコードの例を以下に示す。
```styles.scss
.button {
  background-color:  blue;
  color: white;
}
```

```top.component.scss
@use "../styles.scss" as styles;

.top-button {
  @extend styles.button; /* stylesの.buttonであることを明示 */
}
```

`top.component.scss`内でstyles.scssを`@use`を用いてインポートし、`as`句を使用してstylesという名前の名前空間を付与している。
`@import`とは異なり、`@use`でインポートしたスタイルはグローバルなスコープではなく、指定した名前空間の中の限られたスコープに限定されるため、ほかのコンポーネントのスタイルに影響を与えない。

↓以下のようなイメージ。
![useの図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/b45ad1ee-7017-4c3f-b7ae-e29834dc3f31.png)

しかし、以下のように`@use`はスコープを分離するため、`styles.scss` から `sample2.scss`の機能を直接利用できない。

![forwardの図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/99a0b9b8-de3f-43b1-b86e-2f1771de7f50.png)


その問題点を解決するのが↓

# forwardの特性

`@forward`の使用例を以下に示す。


```sample2.scss
$primary-color: blue;

@mixin button-style {
  background-color: $primary-color;
  color: white;
}
```

```sample1.scss
@forward 'sample2'; // sample2.scss の内容を転送
```

```styles.scss
@use 'sample1'; // sample1.scss を使用

.button {
  @include sample1.button-style; // sample2.scss の mixin を間接的に使用
}
```

`styles.scss`では`@use 'sample1'`を記述し、`sample1.scss`を通じて `sample2.scss`の`button-style`を使用可能にする。これにより`styles.scss`では`sample2.scss`を直接`@use`せずに`button-style`を適用できる。`@forward`により不要な`@use`を減らせるのが利点。
イメージは以下の通り↓
![forward解決の図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/8e76a5d5-b25e-43da-9e6d-4fc5890c53cf.png)
【試験対策】標的型攻撃とは？手口・被害・対策を徹底解説！

✅ はじめに
標的型攻撃 は、特定の企業や組織を狙って巧妙に仕掛けられるサイバー攻撃の一種です。
機密情報の窃取やシステム破壊 を目的とし、一度侵入を許すと 長期間にわたって被害を受ける こともあります。

応用情報技術者試験でも、標的型攻撃の手法や対策が問われることがあるため、しっかり押さえておきましょう！

本記事では、
✅ 標的型攻撃とは？
✅ どのような手口で攻撃されるのか？
✅ 攻撃による被害の実例
✅ 具体的な対策方法
✅ 試験での出題ポイント
を解説します。

⸻

📌 標的型攻撃とは？
🔹 攻撃の概要
標的型攻撃（Advanced Persistent Threat: APT） とは、特定の企業・組織を狙い、
長期間にわたって執拗に攻撃を仕掛ける手法 です。

目的は、
	•	機密情報（企業の研究データ、顧客情報、軍事機密など）の窃取
	•	システム破壊・業務妨害（サイバーテロ）
	•	身代金要求（ランサムウェアを組み合わせた攻撃）
など、高度な攻撃技術 を駆使しながら段階的に侵入し、目的を達成しようとします。

🔹 一般的なサイバー攻撃との違い
| 項目 | 標的型攻撃 | 一般的なサイバー攻撃 |
|:-:|:-:|:-:|
| 攻撃対象 | 特定の企業・組織  | 不特定多数 |
| 攻撃の継続性  | 長期間（数か月～数年）  | 短期間  |
| 手口の巧妙さ  | 偽メール、マルウェア、内部関係者の利用  | フィッシング詐欺、ウイルス  |
|攻撃の目的   | 機密情報の窃取、業務妨害  | ランダムな金銭詐取  |

⸻
📌 標的型攻撃の手口
標的型攻撃は 「侵入 → 内部拡散 → 機密情報窃取」 という流れで行われます。

🔹 攻撃の主な手法
| 手法 | 詳細 |
|:-:|:-:|
| フィッシングメール（標的型メール攻撃）  | 信頼できる人物になりすました偽メールを送り、マルウェアを開かせる  |
| 水飲み場（ウォーターホール）攻撃  | 標的がよく利用するWebサイトを改ざんし、そこからマルウェアを感染させる |
|ソフトウェアの脆弱性悪用| 未修正の脆弱性を狙い、システムに侵入  | 
|内部関係者の不正利用  |従業員を買収し、内部ネットワークから攻撃を実行
| USBメモリ攻撃  |感染したUSBを利用させ、マルウェアを侵入させる |   

最近は 「標的型メール＋ゼロデイ攻撃（脆弱性悪用）」 の組み合わせが増えており、特に 政府機関や大企業 が狙われています。

⸻
📌 標的型攻撃の被害事例
🔹 実際の攻撃事例
✅ 1. 大手企業の情報漏えい事件
	•	手口:
取引先になりすました標的型メールを送り、添付ファイルを開かせてマルウェアを実行。
	•	結果:
数百万件の顧客情報が流出 し、企業の信用が大きく損なわれた。

✅ 2. 政府機関へのサイバースパイ攻撃
	•	手口:
外交関連の職員を狙った標的型メールを送り、端末を遠隔操作できるマルウェアを感染させた。
	•	結果:
機密文書が国外に流出 し、国家安全保障上の問題に発展。

⸻
📌 具体的な対策方法
標的型攻撃は 単一の対策では防げない ため、多層的な防御が必要です。
🔹 1. メール対策（標的型メールを防ぐ）
✅ メールフィルタリングを強化
	•	添付ファイルの自動スキャン を導入し、不審なファイルを開かせない
	•	URLリンクの安全性を事前にチェック するツールを導入

✅ 従業員のセキュリティ意識を向上
	•	「怪しいメールは開かない」「リンクをクリックしない」 などの訓練を実施

🔹 2. 脆弱性対策
✅ ソフトウェア・OSを最新状態に保つ
	•	ゼロデイ攻撃を防ぐために、定期的なセキュリティパッチ適用を徹底
	•	不要なサービス・ポートは無効化 して、攻撃の隙を減らす

🔹 3. 内部ネットワークの監視
✅ 異常な通信や挙動を検知する仕組みを導入
	•	EDR（Endpoint Detection and Response） を活用し、異常な動きをリアルタイムで検知
	•	SIEM（Security Information and Event Management） を使ってログ監視を強化

🔹 4. 最小権限の原則を徹底
✅ 全員が管理者権限を持たないようにする
	•	機密データへのアクセス権限を厳格に管理 し、不必要なユーザーに権限を与えない

✅ 多要素認証（MFA）の導入
	•	パスワードだけではなく、ワンタイムパスワードや生体認証を併用 し、認証を強化

⸻
📌 試験での出題ポイント
✅ 記述問題の対策
試験では、「標的型攻撃の手口・影響・対策」を説明できるかが問われます。
以下のような問題が出る可能性が高い ので、事前に練習しておきましょう。

Q1. 標的型攻撃の特徴と代表的な手口を説明せよ。
解答例:
標的型攻撃は、特定の企業や組織を狙い、長期間にわたって機密情報の窃取や業務妨害を行う攻撃手法である。
代表的な手口として、フィッシングメールによるマルウェア感染や、ウォーターホール攻撃によるWebサイトの改ざん などがある。

Q2. 標的型攻撃を防ぐための具体的な対策を2つ挙げ、それぞれの理由を説明せよ。
解答例:
	1.	メールフィルタリングの強化
	•	標的型攻撃の多くは偽メールを利用するため、不審な添付ファイルやリンクを自動でブロックすることで感染リスクを低減できる。
	2.	脆弱性管理の徹底
	•	ゼロデイ攻撃を防ぐため、OSやソフトウェアを常に最新の状態に保つことが重要である。

⸻
✅ まとめ
	•	標的型攻撃は「特定の組織を狙う」高度なサイバー攻撃
	•	「標的型メール」「ウォーターホール」「脆弱性攻撃」が主な手口
	•	対策は「メール対策」「脆弱性管理」「ネットワーク監視」「最小権限の徹底」
	•	試験では「手口・被害・対策」をセットで理解し、記述問題に備える！
wslでelixir その169

# 概要
wsl(wsl2じゃない)で、elixirやってみた。
練習問題やってみた。

# 練習問題
Livebookの、kino.jsで、podcastを動作させよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/e460a0d7-8e00-45b5-bc7e-3d2f824bc320.png)

# サンプルコード

```
defmodule KinoHTML.Podcast do
  use Kino.JS
	def new(url) do
		Kino.JS.new(__MODULE__, url)
	end
	asset "main.js" do
		"""
		export async function init(ctx, url) {
    await ctx.importJS("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js")
    await ctx.importJS("https://static.sekandocdn.net/static/feednami/feednami-client-v1.1.js")    
      ctx.root.innerHTML = `
        <div class="playlist"></div>
			`;
  $(function () {
    feednami.load(url).then((feed) => {
      writeEpisodes(feed);
    });
  });
  function writeEpisodes(res) {
    var myarray = res.entries;
    var newhtml = "";
    for (var i = 0; myarray.length > i; i++) 
    {
      newhtml += '<div class="episode">';
      try 
      {
        newhtml += "<h3>" + myarray[i].content.title.content + "</h3>";
      } 
      catch (err) 
      {
        if (typeof myarray[i].title == "array") 
        {
          var thistitle = myarray[i].title[0];
        } 
        else 
        {
          thistitle = myarray[i].title;
        }
        newhtml += "<h3>" + thistitle + "</h3>";
      }
      newhtml += '<div class="player">';
      newhtml += '<div class="timeline"><div class="playerprogress"><div class="scrubber"></div></div></div>';
      newhtml += '<div class="controls col-xs-12 text-center">';
      newhtml += '<div style="margin-left: 7%;" class="previous col-xs-2 glyphicon glyphicon-step-backward text-center" title="next newer episode"></div>';
      newhtml += '<div class="skipback flip glyphicon glyphicon-repeat col-xs-2 text-center" title="back 15 seconds"></div>';
      newhtml += '<div class="play col-xs-2 glyphicon glyphicon-play text-center" title="play"></div>';
      newhtml += '<div class="skipforward glyphicon glyphicon-repeat col-xs-2 text-center" title="forward 30 seconds"></div>';
      newhtml += '<div class="next col-xs-2 glyphicon glyphicon-step-forward text-center" title="next older episode"></div>';
      newhtml += "</div>";
      newhtml += '<audio controls="controls" autobuffer="autobuffer" >';
      newhtml += '<source src="' + myarray[i].enclosures[0].url + '" type="audio/mpeg">';
      newhtml += "Your browser does not support the audio element.";
      newhtml += "</audio>";
      newhtml += "</div>";
      newhtml += '<p class="publishingnotes">Published: ' + myarray[i].pubDate + "</p>";
      newhtml += '<p class="shownotes">Show Notes: ' + myarray[i].description + "</p>";
      newhtml += "</div>";
    }
    $(".playlist").html(newhtml);
    loadepisodes();
  }
}
    """
  end
end

KinoHTML.Podcast.new("https://www.tsujileaks.com/?feed=podcast")

```

以上。
HP 1810-24G (J9803A) スイッチの初期化に関する失敗談と解決


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806193/b0fb6557-fee7-4adb-aba0-d883906d69db.png)

HP 1810-24G スイッチの初期化に関して、公式説明書にも明確な手順が記載されていないため、試行錯誤した経験を共有します。（半日棒に振りました。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806193/72d4429e-f73b-446d-b312-3aaca62f0178.png)

上記のように

:::note info
192.169.2.5(/24の適当なIP)
255.255.255.0
:::

でPCのネットワークセグメントを設定し、スイッチのResetボタン（スクショ⓹）を押したのにも関わらず、pingが192.169.2.10（スイッチの初期IP）に通りませんでした。


## 初期化手順の解決方法
**ポイントはReset とClearの同時押し、、、。**

1. **Reset** ボタンと **Clear** ボタンを同時に約10秒間押し続ける。
2. **Reset** ボタンのみを離す。
3. 数秒後、**Clear** ボタンを離す。
4. スイッチが再起動し、初期化が完了する。
5. ping で192.168.2.10で疎通確認。

**成功！！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806193/427db5ca-11df-4913-933f-ab2812766c16.png)

初期化後、スイッチはデフォルトのIPアドレス `192.168.2.10` に設定されます。このアドレスにPCを接続し、Webブラウザから管理画面にアクセスできます。

## まとめ

HP 1810-24G スイッチの初期化手順は、公式マニュアルに明確に記載されていない場合があります。そのため、上記の手順を参考にして初期化を試みることが有効です。同様の問題に直面した方の参考になれば幸いです。
そして公式ドキュメントももっと親切であることを願うばかりです。（わざと隠してる？笑）
LinuC学習 part6

# 1.02.2 基本的なファイル管理の実行

lsコマンド
ディレクトリーの内容を表示します。

オプション
-a	. (ドット) で始まるエントリーを含め、 ディレクトリー内のすべてのエントリーをリストします。 (ドット) で現行作業行を指定します。
-R	すべてのサブディレクトリーを再帰的にリストします。
-1	強制的に 1 行あたり 1 エントリーの出力フォーマットにします。 出力フォーマットが端末装置に転送されない場合は、このフラグがデフォルトの設定です。

https://www.ibm.com/docs/ja/aix/7.2?topic=l-ls-command

https://linuc.org/study/samples/1344/

# 1.03.4 正規表現を使用したテキストファイルの検索

grepコマンド
> Pattern パラメーターで指定されたパターンを検索し、一致する各行を標準出力に書き出します。パターンは、ed コマンドまたは egrep コマンドのスタイルの正規表現に限定されます。 grep コマンドは、コンパクトな決定論的でないアルゴリズムを使います。

grepコマンドで利用できる主な正規表現は以下です。

^        …    行頭に一致
$        …    行末に一致
.        …    任意の1文字に一致
*        …    直前の文字・パターンの0回以上に一致

https://www.ibm.com/docs/ja/aix/7.1?topic=g-grep-command

https://linuc.org/study/samples/1346/

# 1.03.2 フィルタを使ったテキストストリームの処理

> 「sort」は、テキストファイルを“行単位で並べ替える”コマンドです。他のコマンドの実行結果を並べ替える場合にも使用できます。また、空白やカンマ区切りのデータに対し、並べ替えに使用するフィールドを指定することも可能です。

オプション
-R	--random-sort	キーのランダムハッシュ順に並べ替える

https://atmarkit.itmedia.co.jp/ait/articles/1611/09/news020.html

https://linuc.org/study/samples/1352/

# 1.02.4 ファイルの配置と検索

>/bin        一般ユーザ向け、特にシングルユーザモードで必要なコマンドの配置ディレクトリ
/sbin       主にシステム管理者が扱うコマンドの配置ディレクトリ
/tmp        一時ファイルの配置ディレクトリ
/usr        アプリケーションのライブラリや実行ファイルが配置されるディレクトリ
/var        変更が発生するシステムのログやスプールの配置ディレクトリ
/rootはrootユーザのホームディレクトリ
システムのルートディレクトリは「/」

https://linuc.org/study/samples/2428/

# 1.01.3 ブートプロセスとsystemd

>poweroff.target   …システムを停止します
rescue.target  …レスキューモード（シングルユーザモード相当）にシステムを切り替えます。
multi-user.target  …非グラフィカルなインタフェースで複数ユーザがシステムを利用できる状態に切り替えます
graphical.target   …グラフィカルなインタフェースで複数ユーザがシステムを利用できる状態に切り替えます
reboot.target   …システムを再起動します

>isolateサブコマンドを実行すると、現在のターゲットを変更します。
get-defaultサブコマンドは、OS起動時のターゲット（デフォルトターゲット）を確認するための
コマンド
defaultサブコマンドは、現在のターゲットをデフォルトターゲットに切り替えるために利用
set-defaultサブコマンドは、OS起動時のsystemdのターゲットを変更するコマンド

https://man.kusakata.com/man/systemctl.1.html

https://linuc.org/study/samples/1170/

# 1.02.3 ハードリンクとシンボリックリンク

>シンボリックリンクはリンク元の実体の場所を情報としてもっています。
その情報を元に、リンク元のファイルやディレクトリを参照しています。
そのため、ファイルやディレクトリの移動によりリンク元の実体の場所が変わってしまうと参照ができなくなってしまいます。

https://linuc.org/study/samples/2424/

# 1.01.4 プロセスの生成、監視、終了

>コマンド（プログラム）の末尾に「&」をつけて実行すると、バックグラウンドでコマンドを実行します。
バックグラウンドでコマンドを実行することで、あるコマンドが実行されている間も同じシェルで作業を行うことが出来ます。

https://linuc.org/study/samples/1350/

# 1.04.4 RPMパッケージ管理

>apt-getコマンドはパッケージのインストール、アップデート、削除を行います。
また、apt-cacheコマンドはaptのパッケージキャッシュの操作を行います。
「apt-get check」
パッケージキャッシュの更新の有無、壊れた依存関係を診断します。
「apt-cache search <パッケージ名>」
指定されたパッケージを検索します。
パッケージ名は正規表現を指定することが可能で、指定された正規表現により利用可能なパッケージの全文検索を行います。

https://linuc.org/study/samples/1207/

# 1.05.3 ファイルシステムの作成と管理、マウント

>/etc/fstabには、デバイスをマウントポイントにマウントするため設定を記載します。
1番目のフィールドには、デバイス名を記述します。ラベル名、UUIDを記述することも可能です。
2番目のフィールドは、マウントされるマウントポイントを記述します。
3番目のフィールドは、ファイルシステムのタイプを記述します。
4番目のフィールド：マウントオプション
5番目のフィールドは、dumpコマンドが対象のファイルシステムをダンプするのか、しないのかを決めるための項目です。
6番目のフィールドはfsckオプションです。システム起動時にファイルシステムのチェックを実施する順番を指定します。

https://linuc.org/study/samples/2412/

# 1.02.1 ファイルの所有者とパーミッション

SUID
文字表記でu+sで有効にできる

https://e-words.jp/w/SUID.html

https://linuc.org/study/samples/2415/
最短経路問題（ダイクストラ法）の演習

インターネットのルーティングなどのときに使う最短経路問題を解く方法（ダイクストラ法）のPythonでの実装

tracerouteをした時に表示される、インターネットのホストを経由するなどの最短経路を求める問題。

大学の時にクラスメイトに「高校の時分、このプログラムを作ったぞ」と言われ、長年簡単に解けると思っていたけれど、随分手子摺ったので、演習問題としてここに掲載しておきます。「共通一次試験で900点取ったぞ」と言われ、悔しいがそいつは優秀だった。

Qiitaの@gomagoma000さんの、コードを少しアレンジしたものです。概念的に理解したものの、オリジナルが素晴らしくよくできていて、改良の余地がありませんでした。動作する形にして掲載しておきます。何でこんなに良くできているのに、オリジナルの方にいいねが少ないのだろうか。真価の解る人があまりいないのだろうか。

https://qiita.com/gomagoma000/items/edd3ff714e4d964c670c

例えば、ポイントnからポイントmへのコストと、ポイントmからポイントnへのコストが非対称な場合も記述できます。

```shortest_path_problem.py
#!/usr/bin/python3
import heapq

net = {
    'p0':{'p1':2,'p2':4,'p5':8},
    'p1':{'p0':2,'p2':3,'p4':5},
    'p2':{'p0':4,'p3':7},
    'p3':{'p2':7,'p4':6},
    'p4':{'p1':5,'p3':6,'p5':11},
    'p5':{'p0':8,'p4':11}
}    

def dijkstra(net, start, end):
    que = [(0, start, [])]
    seen = set()
    _min = {start: 0}
    while que:
        (cost, node, path) = heapq.heappop(que)
        if node not in seen:
            seen.add(node)
            path = path + [node]
            if node == end:
                return cost, path

            for next_node, next_cost in net[node].items():
                prev_cost = _min.get(next_node, False)
                next_cost += cost
                if prev_cost is False or next_cost < prev_cost:
                    heapq.heappush(que, (next_cost, next_node, path))
                    _min[next_node] = next_cost

    return float("inf"), []


def main():
    points = ['p'+str(i) for i in range(len(net))]
    for start in points:
        for end in points:
            if start != end:
              cost, path = dijkstra(net, start, end)
              print(f"{start} to {end} : cost={cost}, route={path}")

if __name__=='__main__':
    main()
    exit(0)
```
terraformで既存EC2にアラート設定してみた

## 概要
近々、大量にアラートを設定することになりそうなのでバチンと一発でできる方法がないか探してみました。
検証したところ、terraformでできたので記載します。

### 前提
windows11を利用した場合の手順になります。

## 手順
### terraformダウンロード
- terraformを下記ページからダウンロードする
※OSによって異なるので、自分が利用しているものを選択する

https://developer.hashicorp.com/terraform/install?product_intent=terraform

- ダウンロードしたものをzipファイルを解凍する
- 解答してできたフォルダの中にあるterraform.exeをパスを通す場所に移動する
![スクリーンショット 2025-03-21 044142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882356/26800ebb-5d2f-4ad7-90ed-1068378370ca.png)
- 今回は以下場所に設置しました
**C:\Users\[ユーザー名]\terraform**
※terraformのフォルダはなかったので、作成しました
　tarraformの中にterraform.exeが入ってます。

### 環境変数設定
- 環境変数を設定しパスを通します
- スタートボタンをクリックし、**env**と検索する
システム環境変数の編集がでてくるので、クリック
![スクリーンショット 2025-03-21 044855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882356/dc16f365-c0d8-4d65-82c3-d12697d10218.png)
- 以下画面になるので、**環境変数**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882356/283147d6-86bf-484f-a581-6f9a7baa8f5d.png)
- ユーザー環境変数のPathをダブルクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882356/ba616810-4989-487f-beb0-39fff56a91b2.png)
- 新規をクリックし**terraform**を設置したパスを入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882356/99864200-5cbc-486a-b880-076cca6e01bf.png)
- 動作確認をするためにpowershellを開き、以下コマンドを入力
```
terraform --version
```
成功すると以下のように表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882356/013a09e1-406f-40ca-9abe-f8e6acae703b.png)

### terraformを動かしてみる
- terraform用のフォルダを作成し、適当な.tfに以下内容を入力する
- 自分はec2-alarm.tfというファイル名にしました
```
# 既知のインスタンスIDをリストで定義
locals {
  instance_ids = [
    "[インスタンスIDを入力する場所]",
    # 必要なだけインスタンスIDを追加してください
  ]
}

# 各インスタンスに同じCloudWatchアラームを設定
resource "aws_cloudwatch_metric_alarm" "ec2_cpu_alarm" {
  for_each = toset(local.instance_ids)
  
  alarm_name          = "[${each.value}]CPUUtilization-High-90%"
  comparison_operator = "GreaterThanOrEqualToThreshold"
  evaluation_periods  = 2
  metric_name         = "CPUUtilization"
  namespace           = "AWS/EC2"
  period              = 300
  statistic           = "Average"
  threshold           = 90
  alarm_description   = "EC2 CPU使用率が90%を超過 (${each.value})"
  alarm_actions       = ["[通知をしたいSNSのARNを入力する]"]
  
  dimensions = {
    InstanceId = each.value
  }
}
```
:::note
補足
alarm_name          = "[${each.value}]CPUUtilization-High-90%"
${each.value}の部分はインタンスIDが入ります
:::

- provider.tfファイルを作成し、以下内容を入力する

```
provider aws{
    access_key = "[アクセスキーを入力する場所]"
    secret_key = "[シークレットアクセスキーを入力する場所]"
    region = "ap-northeast-1"
}
```
- terraform用に作成したフォルダで、powershellを実行する
- 以下コマンドを実行する
```
#初期設定をする
terraform init

#作成できるものの確認をする
terraform plan

#作成する 
#作成されるものが表示されたあと問題なければyesと入力する
terraform apply

```

### できあがったものを確認する
AWSコンソールにログインし、CloudWatchを確認するとアラートが作成されてます。
今回の場合ですと、東京リージョンに作成されているはずです。

:::note
アラートが不要になった場合は、以下コマンドで削除できます。
terraform destroy
削除の確認が入りますので、問題ない場合はyesと入力してください。
:::

## まとめ
アラートを複数作成する方法を記載しました。

同じ環境にEC2が100台ある場合インスタンスIDを入力してあげたら、バチンと100個アラートが作成されます。

これの応用で、別アラートを設定することも可能なのでいけそうだなと思った人は色々やってみてください。
競プロ日記#25/03/21

# アルゴ式-[含まれない数](https://algo-method.com/tasks/598)
- 片側の配列からもう片方の配列の要素を取り除くように実装。
- たかだかB.(i)の要素を削除したいだけなのに実装がかなり面倒だった。
```
for (int i = 0;i < M;i++){
    A.erase(std::remove(A.begin(), A.end(), B.at(i)), A.end());
}
```
- eraseとremoveを組み合わせるという面倒さ

# アルゴ式-[中央値](https://algo-method.com/tasks/501)
- 浮動小数点に関して小数点以下2桁まで出力するために以下
```
// 浮動小数出力に対応する (小数点以下 2 桁まで出す)
cout << fixed << setprecision(2);
```
- 中央値を求めるために昇順にソートして偶奇で場合分け
```
sort(A.begin(),A.end());
 // 浮動小数出力に対応する (小数点以下 2 桁まで出す)
cout << fixed << setprecision(2);

if (N % 2 == 0){
    cout << (A.at(N / 2 - 1) + A.at(N / 2)) / 2 << endl;
}else{
    cout << A.at((N - 1) / 2) << endl;
}
```

# アルゴ式-[フラグ状態を整数値にする (1)](https://algo-method.com/tasks/1143Z8cd)
- (pow(2, F))で求められるはずなのだがこのままだと例えばFが20の場合などに1.04858e+06と出力されて値としては同値なのだが表記が違うせいでWAになる
→static_cast\<int\>でキャストする

```
double F;
cin >> F;

cout << static_cast<int>(pow(2, F)) << endl;
```
これに関しては以下の記事を参考にさせてもらった。
[競プロでc++のpowを使ったときの話](https://qiita.com/ShibuKazu/items/0b94290c8160038b3bec)
PHPで「foreach文で配列要素の値を変更する」の動作を確認してみた。

# 概要

PHPで「foreach文で配列要素の値を変更する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/php/for/index10.html

# 実装

以下のファイルを作成しました。

```sample.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<p>PHPのテストです。</p>

<p>
<?php
$pricelist = array(80, 100, 120);

foreach ($pricelist as &$value){
  $value *= 1.05;
}
unset($value);

foreach ($pricelist as $value){
  print $value.'<br />';
}
?>
</p>

</body>
</html>
```

以下のコマンドを実行しました。

```
$ php sample.php 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<p>PHPのテストです。</p>

<p>
84<br />105<br />126<br /></p>

</body>
</html>
```

# まとめ

何かの役に立てばと。
obsidianのcssclassesでカスタムCSSのフォントを適用させる

フロントマターのcssclassesに値を書くと `.view-content` 直下のdivにその名前でクラスが追加される

`cssclasses`に`変更したいやつ`を追加した結果:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18902/db962e9b-68b5-4fd6-9819-e6a9defea923.png)

```html
<div class="
  markdown-source-view 
  cm-s-obsidian 
  mod-cm6 
  node-insert-event 
  is-live-preview 
  is-folding 
  show-properties 
  変更したいやつ"
  style="">
```

そして、Obsidianの`Vaultフォルダ/.obsidian/snippets` に自作cssファイルを置いて設定から有効にしておくと、カスタムCSSを適用できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18902/e1b310c8-ad95-4755-936f-5dace742ead2.png)

なのでそれらを組み合わせると例えば歌詞のページはそれっぽくフォントを変えたり無限大にいろいろできるんだけど、なぜか`font-family`は適用されなくて困った。

## CSS

最終的には以下のように書くと適用できた。
かなり雑なのでよろしくあれすること。

```css
.変更したいやつ,
.変更したいやつ .cm-scroller {
    font-family: "HGP創英角ﾎﾟｯﾌﾟ体" !important;
    
    /* 適用できてるか分かりやすくするテスト */
    color: red;
    font-size: 30px;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18902/af89f77b-ebfc-454e-88e7-1d3a21ef8fd0.png)

## Googleフォント

Googleフォントも使える

https://fonts.google.com/specimen/Cherry+Bomb+One

```css
/* @import を先頭に書く */
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

.変更したいやつ,
.変更したいやつ .cm-scroller {
    font-family: "Cherry Bomb One" !important;
    
    /* 適用できてるか分かりやすくするテスト */
    color: orange;
    font-size: 30px;
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18902/8a5f7254-5f30-47ff-80a5-1e38ebd21bff.png)
【Excel】VBAで環境依存文字で項番を割り振る方法

## Excel VBAで丸数字を自動で振る方法（ChrW関数）

### 0. 背景
VBA開発依頼の資料（サンプル）の項番に丸数字が使われていた・・・:sob:
### 1. はじめに
　Excelで①、②、③…のような **丸数字** を連番として振る方法の覚書き。
　VBAの `ChrW関数` を使うことで、ユニコードから丸数字など環境依存文字を呼び出せる。

### 2. 丸数字の文字コード
丸数字はUnicodeの **U+2460** から始まる。
`ChrW関数`を使うと、以下のように対応する文字を取得できる。

#### 例：①～⑤のUnicode・コード対応表
| 数字 | Unicode | ChrW関数 (16進数)|
|------|---------|----------|
| ①   | U+2460  | ChrW(&H2460) |
| ②   | U+2461  | ChrW(&H2461) |
| ③   | U+2462  | ChrW(&H2462) |
| ④   | U+2463  | ChrW(&H2463) |
| ⑤   | U+2464  | ChrW(&H2464) |

※ 10進数表記でコードを書きたい場合は、`"&H"`を除くこと
※ Unicodeの調べ方：[Unicodeの文字コード確認ツール](https://www.tagindex.com/tool/unicode-code.html#google_vignette)

### 3. VBAで丸数字を振る

#### 例：A1セルから連番の丸数字を振る
```vba
Sub 丸数字を振る()
    Dim i As Integer
    For i = 0 To 19 ' 20個の丸数字を振る
        Range("A" & i + 1).Value = ChrW(&H2460 + i) 
    Next i
End Sub
```
### 4. 注意点
- **環境依存文字のため、フォントによっては表示されない場合があru
- *
  - 例：MS Pゴシック、メイリオでは正常表示されるが、一部のフォントでは"□"になる。
- **丸数字は20（⑳, U+2473）までしかないため、それ以上の数値は別の方法が必要。**
  - 21以上の番号を付けたい場合は、通常の数字を使うのが無難・・・

### 5. まとめ
　`ChrW関数`を使えば、Excel VBAで簡単に **①、②、③…のような環境依存文字** を呼び出すことができる。
 フォントや、丸数字は"20"までしかないなどの制約があるので、必要に差し迫られたとき以外は使わないほうがいいと思われる・・・
Salesforce Lightning Web Components を用いた官公需情報検索コンポーネント

## 概要

官公需情報ポータルは、政府機関や地方自治体の入札情報を検索できるサイトです。 このポータルが提供するAPIを利用することで、幅広く入札情報を取得できるようです。[官公需情報ポータルサイト](https://www.kkj.go.jp/s/)  [e-Gov APIカタログ](https://api-catalog.e-gov.go.jp/info/en/apicatalog/view/67)

このAPIを利用し、Salesforce上で官公需情報を検索および表示するLWCコンポーネントを作成してみました。主な機能として、キーワード検索機能、取得した情報の一覧表示、詳細のダイアログ表示ができます。


## 環境要件

- Salesforce組織（Developer Edition、Sandbox、Productionなど）
- Lightning Web Components (LWC) に対応したSalesforce環境(sfコマンド、VSCode等)


## インストール手順

1. リポジトリのクローン

    ```bash
    git clone https://github.com/rtoki/gov-kkjsearch-lwc.git
    cd gov-kkjsearch-lwc
    ```


2. Salesforce CLI (sf) のインストールとログイン

    ```bash
    sf login org
    ```

3. コンポーネントのデプロイ

    ```bash
    sf project deploy start
    ```

    もしくは

    ```bash
    sf force:source:push
    ```

4. コンポーネントの追加

    - コンポーネントを対象のLightningページに追加


## 使い方

1. LWCコンポーネントを任意のLightningページに配置
2. 検索バーにキーワードを入力し、検索ボタンをクリック
3. APIを通じて取得した官公需情報が一覧表示される
3. クリックすると、詳細がダイアログ表示される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261905/78d5002b-f0a2-429e-b6a9-38aec7ab81f3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261905/bc77bbf9-e23d-46bb-8c56-cb29544f36f9.png)




## 参考情報

- 官公需情報ポータル:  [官公需情報ポータルサイト](https://www.kkj.go.jp/s/)
- Salesforce Lightning Web Components (LWC) ドキュメント:  [Trailhead](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics)
- Salesforce CLI (sf):  [Trailhead](https://trailhead.salesforce.com/ja/content/learn/trails/build-lightning-web-components)
Microsoft365環境のOutlook on the Webでリダイレクトループする問題

# 結論
管理者/閲覧者ロールのつけすぎです。

# やったこと
- Cookieクリア
- シークレットタブで開く
- 違うブラウザで開く
- 違うPCで開く

いずれも解決しませんでした。

# 原因
ロールのつけすぎでした。(確か検証目的で50以上つけてた気がする…)

# 対策
グローバル管理者だけにすると問題は解消しました。
数十個もロールをつけるとバグるっぽいです。
全天球のノーマルマップを作成する(1) - SkySphere normal map 

全天球用のノーマルマップを作成する方法をザックリ共有します。

こちらの動画で動いている背景は１枚絵を球に貼り付けただけのものですが、
結構いい感じに立体感があります。
<iframe width="560" height="315" src="https://www.youtube.com/embed/4eUxq2Ggpcg?si=Jm5Sc-BbzoKh5fpm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

この動画には、下のようなnormal mapが使用されています。
<a href="https://assetstore.unity.com/packages/vfx/shaders/88-constellations-procedural-sky-314028"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/554614ad-d11f-4c3f-9475-6d8cfbb6349e.png"></a>

まずはFullScreen shaderGraph を作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/d1a205a9-d475-4632-bcad-e795a8b24379.png)

こちらのFullScreen shaderGraph、AssetStoreに用意されたものがございます。
<a href="https://assetstore.unity.com/packages/tools/utilities/modeltobump-171138"><img src="https://assetstorev1-prd-cdn.unity3d.com/package-screenshot/77ea4adc-d3d7-4edf-9ef2-112db1e64e8c.webp"></a>

URPFullScreenRenderer AssetのPassMaterialにFullscreenNormalMaterialをセットし、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/28053eb8-f2b6-4bd3-a13c-878b91307074.png)

Project Settings＞Graphics>Scriptable Render Pipeline Assetに
URPFullScreen AssetをセットするとGame画面がノーマルマップになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/1349a63d-e847-4204-a0aa-bafb041cdbed.png)

次に、Package ManagerからRecordrをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/43a0ac82-abea-448d-a29e-86ff9ef4a62d.png)

+Add RecorderにImage Sequenceを追加し、
Sourceを360 Viewに変更します。
Record in Stereoのチェックを外したら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/3de77cad-135c-43b5-8d2b-9e301c491115.png)

Start Recordingボタンを押すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/5270bb00-5b09-4c4e-87de-02fbe10dda1c.png)

全天球のノーマルマップが出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59911/554614ad-d11f-4c3f-9475-6d8cfbb6349e.png)

以上、全天球ノーマルマップを得ることができました。
【随時更新（たぶん）】Tailwind CSSでやらかした凡ミスとか集

# ここで書くこと
慣れてない人が[Tailwind CSS]( https://tailwindcss.com/ )を使ってみて、ここミスったとかをメモっていきます。はずかしいけど。

# 凡ミス集

## インストールうまくいかない
以下を参照：
 - [Windows11のWSL環境でTailwind CSS（v4.0.14）を動かそうとしたらハマったので殴り書きのメモを残しておく]( https://qiita.com/shirokurotaitsu/items/732d2782048859a5a672 )

## クラスが反映されねぇ
```shell
$ npx tailwindcss -i input.css -o output.css --watch
```
でのCSSビルドを忘れていました（ﾆｯｺﾘ

※パスオプションとかは適宜。
お前ら、戻るんかい…(WindowsのAero Shakeについて)

# あ、ウインドウが消えていく…

ウインドウをドラッグしている時、急に
![qiita_3_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3773395/e74d05b2-c461-47c4-8fe5-e9252fca7887.jpeg)
え？おいおい…
![qiita_3_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3773395/c2cc6948-9792-4ae7-a165-21e31a49911c.jpeg)
と、それ以外のウインドウが全て最小化されてしまい煩わしい思いをしたこと、あると思います。

この機能、Aero Shake(エアロシェイク)というらしいです。
そんなおしゃれな名前はもったいないので、今日からこの機能の名前はWindow Shaka Shakaに変更します(個人的に)。

## もう一度シャカシャカすると元に戻せる！？
本題はここからです。
ウインドウが最小化されてしまった状態でもう一度シャカると…
![qiita_3_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3773395/ace04cdf-bad4-483b-a885-3f5c8749132c.jpeg)
お！
![qiita_3_4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3773395/8fa7d149-4337-4bc3-b28d-8180b803a7e4.jpeg)
戻りました。
今までのチマチマ閉じたウインドウを開きなおしとった苦労はなんやったんや…

という発見の共有でした。
これで開いてるウインドウを急に隠さないといけない時も安心ですね。
俺はそんな時ないですけど。

## 無効にするには

設定画面から変更するならココ。

![qiita_3_5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3773395/35decc0e-c089-4efb-bb33-6b60955fbda4.jpeg)

ただ、それやとその下3つの設定も勝手にOFFになってしまいます。
ということで、このshakashakaだけOFFにしたいときはレジストリをいじればOKです。

コマンドプロンプトを管理者として実行して以下のコマンドを実行してください。

`reg add "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v DisallowShaking /t REG_DWORD /d 1 /f`

戻したい(有効にしたい)ときはこちらを。

`reg add "HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v DisallowShaking /t REG_DWORD /d 0 /f`

以上です。

### ちなみに
この機能はWindows7から実装されてるらしく、Windows11ではデフォルトが無効になっているっぽいですね。
クレームが多かったんかな。

また、この機能はWindows Aeroっていうテーマの1つらしい。
詳しくは以下のサイトにて。

#### 参照
[Windows Aero - Wikipedia](https://ja.wikipedia.org/wiki/Windows_Aero)
Reactの再レンダリングされる条件

## はじめに
この記事はReactの再レンダリングされる基本的な条件について簡単にまとめたものです．

## 再レンダリングされる条件
- stateの更新
- 親コンポーネントの再レンダリング
- contextの変化

## stateの更新
stateが更新されるとコンポーネントが再レンダリングされます．
例：以下のコードでは，ボタンをクリックすることでcountが更新されることで，`Counter`が再レンダリングされます．

```jsx
const Counter = () => {
  console.log("Counterが再レンダリングされました");

  // `count` を管理する state
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>カウント: {count}</h2>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
};
```

## 親コンポーネントの再レンダリング
親コンポーネントが再レンダリングされると子コンポーネントも再レンダリングされます．
例：以下のコードでは，ボタンクリックでcountが更新されることで`Parent`が再レンダリングされます．それにより，`Child`も再レンダリングされます．

```jsx
const Child = () => {
  console.log("Childが再レンダリングされました");
  return <div>子コンポーネント</div>;
};

const Parent = () => {
  console.log("Parentが再レンダリングされました");

  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>カウント: {count}</h2>
      <button onClick={() => setCount(count + 1)}>増やす</button>
      <Child />
    </div>
  );
};
```
### よくある勘違い
子コンポーネントが再レンダリング条件として，`propsが更新されること`と耳にしますが，これは．親コンポーネントが再レンダリングされているからです．

```jsx
const Child = ({value}) => {
  console.log("Childが再レンダリングされました");
  return <div>子コンポーネント</div>;
};

const Parent = () => {
  console.log("Parentが再レンダリングされました");

  const [count, setCount] = useState(0);
  const [value, setValue] = useState(0);
  

  return (
    <div>
      <h2>カウント: {count}</h2>
      <button onClick={() => setCount(count + 1)}>増やす</button>
      <Child value={value} /> // propsが更新されるかどうかは関係なく再レンダリング
    </div>
  );
};
```

## contextの変化
Context.Providerのvalueが変化すると，Providerのコンポーネントが再レンダリングされます．

```jsx
// `Context` の作成
const CountContext = createContext(null);

// `Child1` で `count` を更新する
const Child1 = () => {
  console.log("Child1が再レンダリングされました");
  const { setCount } = useContext(CountContext);

  return (
    <div>
      <h2>Child1</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>カウントを増やす</button>
    </div>
  );
};
// `Child2` も `count` を参照する
const Child2 = () => {
  console.log("Child2が再レンダリングされました");
  const { count } = useContext(CountContext);

  return (
    <div>
      <h2>Child2</h2>
      <p>カウント: {count}</p>
    </div>
  );
};

// `Parent` で `Context` を管理
const Parent = () => {
  console.log("Parentが再レンダリングされました");

  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <h1>Parent</h1>
      <Child1 />
      <Child2 />
    </CountContext.Provider>
  );
};


```
2025/3/21　応用技術進捗どうですか①

## 進捗１月～３月 応用技術過去問道場 午前
●<strong>１月</strong>
![bandicam 2025-03-21 00-01-57-200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3740433/3992f566-771e-468c-8548-f8c783b4af0e.jpeg)


●<strong>2月</strong>

![bandicam 2025-03-21 00-01-52-159.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3740433/f6ba7b5e-5382-4cd0-94ce-3d9f4c5fc697.jpeg)

●<strong>3月</strong>
![bandicam 2025-03-21 00-01-47-698.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3740433/003f946a-e446-498b-94a3-bebb0fb4b9a8.jpeg)

うーん、全体は40%なんで、ダメかもしれない(笑)

## 進捗１月～３月 応用技術過去問道場 午後

![bandicam 2025-03-21 00-02-40-214.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3740433/11f132c0-485a-494a-bf2c-b3d351598818.jpeg)

うーむ、受かる気がしないね！だめかもしれん

## 現在の手ごたえ
なんかあれですね。昔と違って年行ってから記憶力が低下して覚えられない…

計算問題とアルゴリズムが特に苦手で、こんな計算高校以来なんだよなぁ…

その次サービスマネジメント系の単語暗記が…

後データベースもよくわからん、正規化さっぱり

１か月前でこの状態だからもうダメかも