OmniAICreator/Qiita-1.07M huggingface dataset:
Unity-C# における Inheritance（継承）とは？

# Unity C# における Inheritance（継承）とは？

## **Inheritance（継承）とは？**
C# における継承（Inheritance）は、**あるクラスが別のクラスの機能を引き継ぐ（再利用する）仕組み** です。継承を使うことで、コードの再利用性が向上し、オブジェクト指向プログラミングの基本である「共通の振る舞いを持つクラス」を作ることができます。

Unity では、例えば `MonoBehaviour` を継承することで、Unity の `Update()` や `Start()` などのメソッドを使用できるようになります。

---

## **基本的な継承の書き方**
```csharp
// 基本クラス（親クラス）
public class Animal
{
    public string name;
    public void Speak()
    {
        Debug.Log(name + " is making a sound.");
    }
}

// 派生クラス（子クラス）
public class Dog : Animal
{
    public void Bark()
    {
        Debug.Log(name + " is barking!");
    }
}

// 使い方
Dog myDog = new Dog();
myDog.name = "Buddy";
myDog.Speak(); // Buddy is making a sound.
myDog.Bark();  // Buddy is barking!
```

`Dog` クラスは `Animal` クラスを継承しているため、`Speak()` メソッドを使用できます。

---

## **Protected 修飾子**
### **`protected` とは？**
`protected` は、**そのクラス自身と、継承した子クラスからのみアクセスできるメンバー** を定義する修飾子です。

### **例**
```csharp
public class Animal
{
    protected string species = "Unknown";
    
    protected void DisplaySpecies()
    {
        Debug.Log("Species: " + species);
    }
}

public class Dog : Animal
{
    public void ShowInfo()
    {
        DisplaySpecies(); // 継承したクラスからはアクセス可能
    }
}

Dog myDog = new Dog();
myDog.ShowInfo(); // Species: Unknown
```

🚫 `myDog.species` には直接アクセスできません（`protected` は外部からアクセス不可）。

---

## **Override と Abstract（仮想メソッドと抽象メソッド）**

### **Override（オーバーライド）とは？**
`override` は、**親クラスのメソッドを子クラスで上書き（オーバーライド）する** ためのキーワードです。継承元のクラスで `virtual` キーワードを使ってメソッドを宣言し、子クラスで `override` することで、異なる振る舞いを実装できます。

### **例**
```csharp
public class Animal
{
    public virtual void Speak()
    {
        Debug.Log("Animal is making a sound.");
    }
}

public class Dog : Animal
{
    public override void Speak()
    {
        Debug.Log("Dog is barking!");
    }
}

Animal myAnimal = new Animal();
myAnimal.Speak(); // Animal is making a sound.

Dog myDog = new Dog();
myDog.Speak(); // Dog is barking!
```

✅ `virtual` を使うことで、子クラスで `override` してメソッドの動作を変更可能。

---

### **Abstract（抽象メソッドと抽象クラス）**
`abstract` は、**基底クラスで定義し、派生クラスで必ず実装しなければならないメソッド** を示すキーワードです。`abstract` メソッドは本体を持たず、子クラスで `override` して具体的な動作を実装する必要があります。

また、抽象メソッドを持つクラスは `abstract` キーワードを使って **抽象クラス** にする必要があります。

### **例**
```csharp
public abstract class Animal
{
    public abstract void Speak(); // 抽象メソッド（実装なし）
}

public class Dog : Animal
{
    public override void Speak()
    {
        Debug.Log("Dog is barking!");
    }
}

// Animal myAnimal = new Animal(); // エラー（抽象クラスは直接インスタンス化できない）
Dog myDog = new Dog();
myDog.Speak(); // Dog is barking!
```

✅ `abstract` を使うと、共通のインターフェースを定義でき、子クラスで必ず実装させることができる。

---

## **まとめ**
### **継承の重要なキーワードと使い方**
| キーワード | 役割 | 使い方 |
|------------|------|--------|
| `protected` | **継承したクラスからのみアクセス可能なメンバーを定義** | 親クラス内の変数やメソッドを子クラス専用にする |
| `override` | **親クラスの `virtual` メソッドを上書きする** | 子クラスで異なる動作を実装したいときに使う |
| `abstract` | **抽象クラスや抽象メソッドを定義し、子クラスで必ず実装させる** | 親クラスの機能を強制的に継承させたいときに使う |

継承を活用することで、共通の機能をまとめつつ、派生クラスごとに異なる動作を実装できます。特に `abstract` を使うことで設計の統一感を持たせることが可能です。
AWS BuilderCards 2nd Editionのルールをまとめてみた

## 目的
社内懇親会のため、AWS BuilderCardsのルールをまとめる機会がありました。

公式PDFをベースにしつつ、ボードゲームをよくプレイする身としてわかりやすいルールの解説を試みました。
この記事を読んで多くの人がAWS BuilderCardsに興味を持ってくれたら嬉しいです。

## 概要
あなたは新しく採用された IT アーキテクトです。
チームを作り、輝かしく、革新的な、クラウドネイティブなアプリケーションを構築することがあなたの仕事です。
AWS のサービスとオンプレミス環境を活用しながら、最適なアーキテクチャを設計しましょう。適切なAWSサービスを選び堅牢なアーキテクチャを作ることで、あなたの成功に繋がります。

さあ、この挑戦を受ける準備はできていますか？

## ゲームの勝利条件
「Well-Architected ポイント」を最も獲得した人が勝利します。
同点の場合、最も多くのビルダーカードを持っているプレイヤーとします。

## カードの内訳
3種類のカードがあります。
![スクリーンショット 2025-03-26 20.19.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405031/c81ab528-2a65-42b4-821b-31519251f879.png)

- スターターカード（各プレイヤーに10枚、色別）

- Well-Architectedカード（勝利ポイント。1点もしくは3点）
プレイ人数が2名の場合は2名アイコンのカード
プレイ人数が3名の場合は3名アイコンと2名アイコンのカード
プレイ人数が4名の場合はすべてのカード  を使います。

- ビルダーカード
AWSサービス、ツール、認定資格などが描かれたカード
「コストあり」と「コストなし」があります。分けておきましょう。

## プレイ準備
### プレイヤーにスターターカードを配布
プレイヤーごとに色を決め、それぞれの色のスターターカードを配ります。

### コンソール（旧名: マーケットプレイス）の作成
ビルダーカード（コストあり・コストなし）をそれぞれシャッフルし山札にします。
コストなしのカードから4枚、コストありのカードから1枚を場に出します。
同じカードが出た場合は重ね、新たなカードを引いて異なる5種類になるようにします。

次に、Well-Architectedカードを配置します。3点カードの上に1点カードを重ねます。

### 各プレイヤーのカードを配置
プレイヤーは、初期カードをシャッフルし、5枚を手札として配置します。
残りは山札（リソースパイル）とします。手札と山札は他プレイヤーに見せる必要がなく、捨て札は表向きにします。

最終的にこのような状態になっていれば準備完了です。
![スクリーンショット 2025-03-26 20.19.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405031/1adf06f4-9eb8-4545-a4ae-ddad5a663791.png)


## プレイ開始！
### 順番ぎめ
任意の方法で順番を決めます（最もAWSの認定資格を持っていない人からがおすすめです）

### プレイヤーターン
プレイヤーのターンでは3つのフェーズを行います。

### Phase1. ビルドフェーズ
手札のビルダーカードを使ってアーキテクチャを構築します。

スターターカードの除去
手札のビルダーカードがスターターカードより多い場合、1枚を場から取り除くことができます。
取り除いた場合、コンソールよりカードを取得することが可能です（クレジットの範囲内に限る）

カードの効果利用
一部のカードには追加効果があり、発動することができます。

### 主な効果一覧
![スクリーンショット 2025-03-26 20.20.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405031/3be0d836-b442-4a93-99e5-0da60d2af240.png)


以下、具体例を紹介します。

【カード単独の追加効果】
![スクリーンショット 2025-03-26 20.18.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405031/715da002-fa91-468d-b9e2-cb6770c1daa9.png)

【組み合わせ効果】
![スクリーンショット 2025-03-26 20.19.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405031/a053c992-63c6-4ab0-8cb7-e50a38b9c90b.png)


いずれも、効果を利用する際は、手札から公開する必要があります。

### Phase2. 獲得フェーズ
カードを1枚取得できます。
Phase1.で追加効果を発動した場合やスターターカードを取り除いた場合は、その分だけ獲得枚数が増えます。

取得できるカードは3つです。手札にあるクレジットの範囲内で取得可能です。
取得したカードは捨て札になります。
- コストなしのビルダーカード
- コストありのビルダーカード
- Well-Architected カード

コストなしカードで欲しいものがない場合、山札から運試しで1枚引くことができます。ただし、このカードを拒否することができません。

カードの取得後は山札よりビルダーカードを補充します。ビルダーカードのコスト有無で取得する山札が異なるので注意してください。

### Phase3. 終了フェーズ
手札と使用したカードをすべて捨て札にし、自分の山札より新しい手札（5枚）を引きます。
山札がなくなったら、捨て札をシャッフルして新しい山札を作ります。

## ゲームの終了
最後の Well-Architected カードが購入されたらゲーム終了です。
点数を数え、一番ポイントの多い人が勝者（Winner）です。

## 終わり
以上が解説となります！
PDFにあった独特の言い回しが好きだったので、なるべく残すようにしています。
エンジニアだったら絶対盛り上がると思います。ぜひプレイしてみてください！

## 参考URL
[BuilderCards Deckbuilding Game 2ndEdition(PDF）](https://pages.awscloud.com/rs/112-TZM-766/images/AWS-buildercards-rules_2024.pdf?version=1)
EKS ベストプラクティスについてまとめてみた

# EKS ベストプラクティスの概要

## はじめに
EKSは、マネージド型の Kubernetesサービスであり、セキュリティ、可用性、スケーラビリティを考慮した運用が求められます。EKSクラスタを適切に管理するためのベストプラクティスを紹介します。

## 主要なベストプラクティス

### 1. **クラスタのセキュリティ**
- **IAM と RBAC の適切な管理**
  - IAM ロールと Kubernetes の RBAC (Role-Based Access Control) を適切に設定。
  - 最小権限の原則を適用し、必要最小限の権限のみを付与。

- **ネットワークセキュリティの強化**
  - Private Subnet に EKS クラスタを配置し、外部アクセスを制限。
  - Security Group と Network Policy を活用して、適切な通信制御を実施。

- **シークレットの保護**
  - AWS Secrets Manager または Parameter Store を活用して、シークレットを安全に管理。
  - 環境変数として直接シークレット情報を設定しない。

### 2. **クラスタの運用管理**
- **ログとモニタリングの強化**
  - Amazon CloudWatch Logs や AWS X-Ray を活用し、EKS クラスターの可視化を強化。
  - Prometheus と Grafana を使用して、メトリクス監視を実装。

- **コスト管理とリソース最適化**
  - Cluster Autoscaler を活用し、必要なリソースのみを動的にスケール。
  - 適切なインスタンスタイプ (オンデマンド、スポットインスタンス) を選定し、コストを最適化。

### 3. **ネットワークと可用性の最適化**
- **VPC 設計の最適化**
  - VPC CNI プラグインの適切な設定を行い、パフォーマンスを向上。
  - ENI の制限を考慮し、Pod の IP 割り当て戦略を最適化。

- **マルチ AZ 構成の推奨**
  - ワーカーノードを複数のアベイラビリティゾーン (AZ) に分散配置。
  - Kubernetes の Pod Disruption Budget (PDB) を活用し、可用性を向上。

### 4. **アプリケーションのデプロイ戦略**
- **CI/CD パイプラインの導入**
  - AWS CodePipeline、ArgoCD、Flux などのツールを活用して、自動デプロイを実現。
  - GitOps を導入し、継続的なデプロイメントを実現。

- **適切な Pod スケジューリング**
  - Taints と Tolerations を活用して、適切なノードへの Pod 配置を制御。
  - Horizontal Pod Autoscaler (HPA) や Vertical Pod Autoscaler (VPA) を利用し、負荷に応じたスケーリングを実施。

## まとめ
EKSの運用において、セキュリティ、可用性、スケーラビリティを考慮した設計が重要です。紹介したベストプラクティスを活用し、安全かつ効率的なEKSクラスタ運用を実現しましょう。

---

### 参考リンク
- [AWS EKS Best Practices](https://docs.aws.amazon.com/ja_jp/eks/latest/best-practices/introduction.html)
HP作成備忘録：スマホでも快適に！横スクロールを防ぐレスポンシブ設計の基本をまとめてみた

## はじめに

スマホで確認した際に「横スクロールが発生して読みにくい」と感じたことがきっかけです。デザインを大きく変えずに対応できる方法を整理しようと思いました。

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

Webサイトをスマートフォンでも快適に閲覧できるようにするためには、レスポンシブ対応が欠かせません。

この記事では、ホンダ社労士事務所のサイトにおける、基本的なレスポンシブ設計の工夫をまとめます。

---

## スマホ対応しているポイントまとめ

### 1. `<meta name="viewport">` の指定
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```
スマホ画面の横幅に合わせてページが調整されるようになります。これにより、スマホでの横スクロールが不要になります。

---

### 2. 画像・入力欄に `width: 100%` を指定
```html
<img src="xxx" style="width: 100%; height: auto;" />
```
```css
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
}
```
画面サイズに応じて自動でサイズが調整され、スマホでも快適に閲覧・操作できます。

---

### 3. コンテンツの最大幅設定
```css
.container {
  max-width: 960px;
  margin: 0 auto;
}
```
PCでは最大幅を確保しつつ、スマホでは画面サイズに応じた中央寄せの表示が可能です。

---

### 4. 適度な余白で読みやすさを確保
```css
section {
  padding: 30px 20px;
}
main {
  padding: 40px 20px;
}
```
余白を設けることで、スマホでも窮屈に感じにくく、文章が読みやすくなります。

---

### 5. フォームやボタンのスマホ対応
```css
button {
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
}
```
指で操作しやすい大きさになっており、ユーザーの操作性を高めます。

---

## 補足：さらに高度なレスポンシブ対応をしたい場合

| 対応内容 | 方法 |
|----------|------|
| ナビゲーションをハンバーガーメニューにする | JavaScript + メディアクエリ |
| 2カラムをスマホで1カラムにする | `@media` クエリの活用 |
| テキストサイズを可変にする | `clamp()`、`%`、`em`、`vw` 単位などを活用 |

---

## まとめ

現状のHTML＋CSS構成では、以下のように基本的なレスポンシブ対応が整っています：

- スマホ画面でも要素が自然に配置される
- 入力欄やボタンが使いやすく設計されている
- 余白や幅の工夫により、読みやすさ・操作性を両立

CSSをさらに調整すれば、より洗練されたスマホ対応サイトへと発展させることも可能です。
「Module not found」でハマったあなたへ。Next.jsでエイリアスが効かない原因と解決法

## 🚨 突然の「Module not found」…それ、ちゃんと設定できてますか？

Next.jsで開発中、ファイルをインポートしようとしたら突如現れるこのエラー。

```
Module not found: Can't resolve '@/lib/profile'
```

エンジニアなら一度は見たことがあるこのエラーメッセージ。  
「なんでだよ！ファイルはあるじゃん！」と、心の中で叫んだ経験がある方も多いはず。

この記事では、このエラーの**本当の原因**と、**初心者でも5分でできる解決方法**を丁寧に解説します。

> 📌 対象読者：
> - Next.jsやReactを学習中の方  
> - エイリアスの設定に慣れていない方  
> - 「なんかよくわからないけどエラー出た」状態の方

---

## 🔍 エラーメッセージの正体を読み解く

まずはエラーメッセージをもう一度見てみましょう。

```
Module not found: Can't resolve '@/lib/profile'
```

これは端的に言うと、こういうことです：

> **「`@/lib/profile` ってパスにファイルがあると思ったけど、見つからないよ！」**

ファイルがないか、パスの書き方がおかしいか、  
あるいは**「@」の意味をNext.jsが理解できていない**可能性があります。

---

## 💡 よくある原因3選（ここでだいたい解決します）

### ✅ 原因1：ファイルが存在しない／パスが間違ってる

- `src/lib/profile.ts` は本当にありますか？
- ファイル名が `Profile.tsx` になっていませんか？（大文字・小文字に注意！）
- 拡張子が `.js` や `.ts`、`.tsx` で間違っていないか確認しましょう。

👀 ファイル名のスペルミスは、思った以上に多い原因です。

---

### ✅ 原因2：「@」エイリアスが未設定

`@/lib/profile` のように「@」を使ってパスを短く書くには、  
 **設定ファイルにエイリアスの定義** が必要です。

これがないと、Next.jsは「@ってどこ？」と困ってしまいます。

---

### ✅ 原因3：設定はしたけどVSCodeや開発サーバーが古いまま

設定を変更しても、VSCodeや開発サーバーが**変更を反映していない**ことがあります。  
設定後は以下を実行しましょう：

- VSCodeを再起動
- `npm run dev` を一度止めて再起動

---

## 🔧 解決方法：エイリアスを正しく設定しよう

TypeScriptの場合は、プロジェクトルートの `tsconfig.json` に以下の設定を追加します。

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

> ⚠️ `baseUrl` を `"."` にすることで、`@` が `src` を指すようになります。

JavaScriptの場合は `jsconfig.json` で同じように設定すればOKです。

---

## ✅ チェックリスト：設定できたか確認！

| チェックポイント | OK？ |
|------------------|------|
| `src/lib/profile.ts` が存在している | ✅ |
| ファイル名が完全一致（大文字小文字含む） | ✅ |
| `tsconfig.json` に `"paths"` が正しく記述されている | ✅ |
| 開発サーバーを再起動した | ✅ |

ここまでできていれば、エラーは消えているはずです！

---

## 🎁 絶対パスのススメ

エイリアスを使うと、こういったパスが…

```tsx
import { something } from "../../../../lib/profile";
```

こんなふうにスッキリ書けます👇

```tsx
import { something } from "@/lib/profile";
```

プロジェクトが大きくなるほど、この差は効いてきます。  
可読性も保守性も爆上がりです！

---

## 🙌 おわりに

エラーは「成長のチャンス」。  
たしかに最初は戸惑いますが、「なぜ起こったか」を知れば必ず強くなれます。

この記事が、あなたの「なんかよくわからんエラー地獄」からの脱出に役立てば嬉しいです。  
いいね・シェア・コメント大歓迎です！それでは、良い開発ライフを🏄‍♂️✨

---

🧑‍💻 React / Next.js まわりのTipsやトラブル解決記事を発信中！
【.NET8】Blazor向けの非常にプレーンなUIコンポーネントライブラリ作成支援ライブラリ

# 概要
この記事にたどり着いたということはきっともうBlazorについてある程度知っている方だと思いますので、Blazorに関する細かい説明は省きます。
Blazorでアプリを作る際に、基本的にはUIコンポーネントライブラリを使うと思うんです。2025年3月現在で選択肢に上がってくるライブラリってどんなのがありますか？自分は`Radzen.Blazor`か`MudBlazor`を使うことが多いです。
BlazorのUIコンポーネントライブラリを使っていて思うのは、「依存が激しい」ということです。自社プロダクトに採用する際、ちょっと手を出しづらいなって思っています。とくにRadzenはアップデートの頻度がかなり高く、ありがたい反面ついていくのが非常につらい。なので、最近はずっとBootstrapで基本のUIを作成し、ダイアログや通知のようなどうしてもC#のパワーが必要な部分だけRadzenを使用するみたいなことをやっています。

多分ですが自社プロダクトを開発する際には自社用のUIコンポーネント群を実装することが多いはずなんです。コンポーネント群を作る際に、Radzenなど依存がかなり大きいコンポーネントライブラリに頼らず、最低限の機能だけ提供してくれるライブラリがあればなぁという気持ちになります。

# 作ってみた
ないなら作れば良いということで実装を始めてみました。その名も`CSStack.PrimeBlazor`。私は普段、C#向けのライブラリを作る際に`CSStack`というシリーズとして作成していますので、頭に`CSStack`というのが入っています。
BlazorやRCLに関しては結構触っている方だと思っていますが、いろんな方の意見を取り入れながら成長させていきたいので、あえてオープンソースで開発することにしました。
リポジトリはこちら→ https://github.com/Uta-member/CSStack.PrimeBlazor

# 思想
やはりできる限り依存を減らして、気軽に導入していただけるようなライブラリにしたいなという思いが強いです。また、このパッケージは単体でBlazorに組み込むのではなく、あくまでもBlazorのUIコンポーネントライブラリの開発支援パッケージとして使っていただくことを想定しています。そのため、内部のクラスは抽象クラスになっていたり、本来はDIコンテナから取り出すようなインスタンスをパラメータで受け取っていたり、ちょっと変わったことをしています。

# 使い方
NuGetで`CSStack.PrimeBlazor`と検索していただき、プロジェクトにインストールしていただければと思います。
URLはこちら→ https://www.nuget.org/packages/CSStack.PrimeBlazor#readme-body-tab

詳しい実装方法などはプロジェクト内の`Readme`フォルダ内にそれぞれのコンポーネントに分けてマークダウンファイルを配置してありますので、そちらを参考にしていただければと思います。
現状、機能としてはまだダイアログと通知しかありませんが、今後どんどん増やしていく予定です。

# 今後の展望
## 機能面に関して
機能面に関しては以下のようなものを実装する予定です。
* Popup(特定のコンポーネントのアクションに応じて、近くに別のコンポーネントを表示する機能)
* Tooltip(特定のコンポーネントのアクションに対して、説明文を表示する機能)
* ContextMenu(右クリックメニュー)
* ThemeManager(CSSを入れ替えるなどしてアプリケーション全体のテーマを制御する機能)

## その他
* ドキュメントの充実
* 実際にBootstrapとCSStack.PrimeBlazorを使用したRCLの公開（同時に開発を進めているのですぐに出せるかと思います）
* .NET8より前のフレームワークにも対応（.NET5まで対応できるようにしようと考えています）
* アニメーションを簡単に扱えるパッケージを作りたい...（Blazorってアニメーション制御難しくないですか？）

# 最後に
Blazorをもっと盛り上げていつかはnode.js勢を追い抜きたいなっていう思いなので、まずはその基礎となるライブラリを充実させるために、できるだけスピード感を持って開発していこうと思っていますので、ぜひまずはたくさん使っていただけると幸いです。
また、普段から私はBlazorやMagicOnionなどC#に関する記事を投稿していますので、ぜひフォローいただけると励みになります。
ポエムみたいになっちゃいましたが、以上、RCL開発支援ツールの紹介でした。
AWS虎の巻　※随時更新します

# 便利資料の一覧
5年間AWSに関わってきた中で、非常に有用だと思ったドキュメントの関連リンクを紹介していきます。
## ブラックベルト一覧
ブラックベルトの一覧を下記ブログから確認することが可能となります。
※筆者様に感謝です。随時更新してくれているとのことです。

https://dev.classmethod.jp/articles/blackbelt-list/

## APIのアップデート一覧
AWS APIの直近アップデートを下記リンクのサイトで追うことができます。

https://awsapichanges.com/
## builders flash
コアな技術ブログからメジャーな技術ブログまで展開されており、キャッチアップやリサーチを実施する時に最適なサイトになります。

https://aws.amazon.com/jp/builders-flash/?awsf.filter-name=*all
HP作成備忘録：小さい入力欄にさようなら！フォームを横に広げる方法についてやってみた

## はじめに

自作したお問い合わせフォームを見たときに「なんだか入力欄が小さくて使いにくい」と感じたのがきっかけでした。

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

実際に他の人からも「***もっと広げた方が見やすいかも***」と言われ、シンプルなHTMLでもCSSを工夫するだけでフォームの使いやすさがぐっと上がることを体感しました。

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

Webサイトにお問い合わせフォームを設置したとき、「もっと入力欄を横に広げたい」「フォームが中央にあって狭く感じる…」と思ったことはありませんか？

今回は、ホンダ社労士事務所のような落ち着いたサイトを想定して、HTMLのフォームを横に広げて見やすく整える方法をご紹介します。

---

## 現在のHTML（シンプルなフォーム）

以下のようなフォームが用意されています：

```html
<form action="#" method="post">
  <label for="name">お名前：</label><br>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">メールアドレス：</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="message">お問い合わせ内容：</label><br>
  <textarea id="message" name="message" rows="5" required></textarea><br><br>

  <button type="submit">送信する</button>
</form>
```

このままだと、フォーム要素はブラウザの標準幅で表示され、横幅が短く感じてしまいます。

---

## 解決策：CSSで横幅を広げる

`contact.css` などのスタイルシートに以下のスタイルを追加しましょう：

```css
/* フォーム全体の最大幅を指定し、中央揃え */
form {
  max-width: 800px;
  margin: 0 auto;
}

/* 各入力欄を横いっぱいに広げる */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px;
  font-size: 16px;
  box-sizing: border-box;
}

/* 送信ボタンをスタイリッシュに */
button {
  background-color: #ffa726;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #ff9800;
}
```

---

## ポイント解説

- `form { max-width: 800px; margin: 0 auto; }`
  - フォームの最大幅を800pxに制限し、中央に配置します。

- `width: 100%;` + `box-sizing: border-box;`
  - パディングやボーダーの分を含めてちょうど100%になるため、横幅がはみ出すことがなくなります。

- `textarea` も同様に `width: 100%` を指定することで、入力エリアが広くなり、書きやすくなります。

- `button` はカラーや角丸を設定し、見た目を整えています。

---

## 完成イメージ

- フォーム全体がページ中央に
- 入力欄は横幅いっぱいに広がり、使いやすい
- スマートで信頼感のあるデザインに

---

## 応用編：さらに良くするには？

- ラベルと入力欄を横並びにして2カラムにする
- スマホ時は自動的に縦1列になるレスポンシブ対応
- 入力ミス時のバリデーション表示（「メールアドレスが正しくありません」など）

これらもCSSやJavaScriptで対応可能です。

---

## まとめ

| 設定したいこと           | CSSでの指定内容                         |
|--------------------------|------------------------------------------|
| フォームを横に広げる     | `max-width`, `margin: 0 auto`            |
| 入力欄を広げる           | `width: 100%`, `box-sizing: border-box`  |
| レスポンシブに対応させる | メディアクエリで調整可能               |

「使いやすいフォーム」は、ユーザーの信頼にもつながります。

見た目を整えるだけでなく、入力しやすさにも配慮したデザインを意識してみてください！
HP作成備忘録：ロゴにリンクをつけたいけど、リンクらしさは消したいときのCSSについて

## はじめに

Webサイトを制作していると、「ロゴやタイトルをクリックでトップページへ戻れるようにしたい」というニーズはよくあります。

:::note info
***一方で、「あまりリンクっぽく見せたくない」「でもリンクとしては機能させたい」というデザイン上の要望もあります。***
:::

この記事では、リンクとしての機能は維持しながら、自然な見た目を保つCSSの設定方法と、マウスホバー時の挙動の切り替えについて紹介します。

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

リンクをつけたことで下線や青い色が表示され、サイトの雰囲気に合わなくなったのをきっかけに、見た目と機能のバランスを考えるようになりました。

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

## HTMLの基本形

以下のように、`<h1>` 内にリンクを設けます：

```html
<h1><a href="index.html">ホンダ社労士事務所</a></h1>
```

## リンクらしさを消して自然に見せる

以下のCSSを `style.css` の末尾に追加することで、`<h1>` 内のリンクを通常のテキストのように見せることができます。

```css
/* h1内リンクを自然に見せる */
h1 a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  cursor: default; /* リンクらしさを消したい場合のみ */
}

h1 a:hover {
  text-decoration: none;
}
```

### 効果

- 下線がなくなり、リンク特有の青い色も解除されます
- `color: inherit` により、親要素（`h1`）の文字色をそのまま使います
- `cursor: default` により、マウスを乗せても「テキストのようなカーソル」に

## やっぱり「リンクっぽく」見せたい場合

あとから「やっぱりマウスを合わせたときにリンクっぽく見せたい」というケースもあります。

そんなときは `cursor` プロパティを `pointer` に変更するだけでOKです！

```css
/* h1内リンク：クリックできることを示す */
h1 a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer; /* ← 手のカーソルに */
}

h1 a:hover {
  text-decoration: none;
}
```

### 効果

- マウスを合わせると「手のひらカーソル」が表示され、操作できることが自然と伝わります
- それでも下線や色を使わないことで、デザインのバランスは保てます

## まとめ

| スタイル | 見た目 | 操作性 |
|----------|--------|--------|
| `cursor: default` | リンクらしさを完全に消す | やや控えめ |
| `cursor: pointer` | 見た目は自然、操作性は高い | おすすめ |

どちらを使うかは、サイトのトーンやユーザー体験に合わせて決めるのがベストです。

例えば「法律事務所のような落ち着いた雰囲気を保ちたい」ときは `cursor: default`、
「ユーザーが迷わず操作できるようにしたい」ときは `pointer` が適しています。

## 最後に

Webデザインでは「控えめに機能を見せる」ことが意外と重要です。

誠実で落ち着いた印象を保ちながら、ユーザーの利便性を損なわない工夫をしていきたいと思った次第でした...！
Reactの不要な再レンダリングを防ぐ

## はじめに
この記事はReactの不要な再レンダリングを防ぐ，`React.memo`、`useCallback` についての備忘録です．

## React.memo
React.memoは，コンポーネントをメモ化しておくことで不要な再レンダリングを防ぎます．
具体的には，`propsが変わらない限り，コンポーネントを再レンダリングしません`．

例：以下のコードでは，`Child2`コンポーネントがメモ化されています．
通常，stateが更新されると親が再レンダリングされ，子コンポーネントも再レンダリングされます．
そのため，countやtoggleが変更されたとき，`Child1`は再レンダリングされます．
一方で，メモ化された`Child2`はpropsであるcountが変更されない限り再レンダリングはされません．
`つまり，渡されているprops以外（ここではtoggle）が変化した時の親コンポーネントの再レンダリングによる，子コンポーネントの不要なレンダリングを防ぐことができます．`


```jsx
import React, { useState, memo } from "react";

const Child1 = ({ count }) => {
  console.log("メモされていないChild1が再レンダリングされました");
  return <div>カウント: {count}</div>;
};

const Child2 = memo(({ count }) => {
  console.log("メモ化されたChild2が再レンダリングされました");
  return <div>カウント: {count}</div>;
});
const Parent = () => {
  const [count, setCount] = useState(0);
  const [toggle, setToggle] = useState(false);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>カウント増加</button>
      <button onClick={() => setToggle(!toggle)}>トグル</button>
      <Child1 count={count} />
      <Child2 count={count} />
    </>
  );
};
```


## useCallback
useCallbackは関数をメモ化します．React.memoと使うことで不要な再レンダリングを防ぐことができます．
前提として，stateの更新等で再レンダリングされるときには，コンポーネント内の関数も再生成されます．
例：以下のコードでは，countが更新されるとき
countを更新→`Parent`が再レンダリング→`handleClick`の再生成
となります．そのため，`Child`コンポーネントをReact.memoでメモ化していても，渡されているpropsが変化しているので，`Child`コンポーネントは再レンダリングされます．

```jsx
import React, { useState, useCallback, memo } from 'react';

const Child = memo(({ onClick }) => {
  console.log('Childが再レンダリングされました');

  return (
    <div>
      <button onClick={onClick}>子のボタン</button>
    </div>
  );
});

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

  const handleClick = () => {
    console.log('子のボタンがクリックされました');
  }

  return (
    <div>
      <h2>カウント: {count}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>カウント増加</button>

      <Child onClick={handleClick} />
    </div>
  );
};
```

ここで，`useCallback`を使用し関数をメモ化しておくことで，再レンダリングを防ぐことができます．
以下のコードでは，`handleClick`を`useCallback`でメモ化しています．これにより，
countを更新 → `Parent`が再レンダリング → `handleClick`はメモ化されているので再生成されない．
となります．つまり，`Child`コンポーネントのpropsの変化を防いでいるため，結果，`Child`コンポーネントは再レンダリングされません．

```jsx
import React, { useState, useCallback, memo } from 'react';

const Child = memo(({ onClick }) => {
  console.log('Childが再レンダリングされました');

  return (
    <div>
      <button onClick={onClick}>子のボタン</button>
    </div>
  );
});

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

   // useCallback を使うことで、関数の参照が変わらなくなる
  const handleClick = useCallback(() => {
    console.log('子のボタンがクリックされました');
  }, []);

  return (
    <div>
      <h2>カウント: {count}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>カウント増加</button>

      <Child onClick={handleClick} />
    </div>
  );
};
```



## まとめ
- React.memoはコンポーネントをメモ化
- useCallbackは関数をメモ化


## おわりに
この記事は以下の記事を参考にさせていただいています．
- [React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする](https://qiita.com/soarflat/items/b9d3d17b8ab1f5dbfed2)
CSS とは

# CSSとは
Cascading Style Sheetsの略であるCSSは、HTMLだけでは実現しきれない豊かなデザインやレイアウトを可能にします。HTMLは基本的な構造を提供する一方で、CSSはフォントのスタイル、色、間隔、配置などの視覚的な要素をコントロールします。

↓HTMLとCSSの関係は以下がイメージしやすい。

![図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/2dcdfdfc-cd1d-4ae3-ab71-a3a6be96979b.png)

HTMLを使うことで、壁や窓、床などの部屋の基本構造を作ることができますが、それだけでは味気なく、まだ「デザイン」がありません。
CSSを使うことで、壁紙を貼ったり、照明を設置したり、家具を配置したりと、より魅力的なデザインに仕上げることができます。

**同様にデザインのないWEBページよりも、デザインされたWEBページのほうが訪れたくなりますよね!!**

# CSSの基本的な文法
CSSは以下のように**セレクタ**、**プロパティ**、**値**で構成される。
```sample.css
セレクタ {
  プロパティ: 値;
}
```
- **セレクタ**：どのHTML要素にスタイルを適用するかを指定する部分
- **プロパティ**：適用するスタイルの種類を指定する部分
- **値**：プロパティに対して設定する具体的な値

# タグを指定する

以下のようなHTML単体でページを表示させた場合

```sample.html
<p>これは青色の文字で表示される段落です。</p>
```
↓こうなる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/384b9571-36b6-4697-901c-f88d44ef0de2.png)

この`<p>`タグのテキストをデザインする、以下のCSSを適用すると

```sample.css
p {
  color: blue; /* 文字色を青にする */
}
```
↓文字が青くなる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3935725/8650cd5a-adf9-4cb5-bba3-b504cf2c63e9.png)

# クラス属性を指定する
前述のようにタグで指定するだけでなく、クラス属性で指定することもできる。以下のように`<p>`タグにクラス属性`blue-text`を付与する。

```sample.html
<p class="blue-text">これは青色の文字で表示される段落です。</p>
```

```sample.css
.blue-text {
    color: blue; /* 文字色を青にする */
}
```
このようにクラスを使用することで、特定の要素だけにスタイルを適用できる。
さらに、クラスを組み合わせて異なるデザインを適用することも可能で、例えば、font-large というクラスを追加し、フォントサイズを変更できる。

```sample.css
.font-large {
    font-size: 20px; /* フォントサイズを20pxにする */
}
```

```sample.html
<p class="blue-text font-large">この段落は青色で、フォントサイズが20pxになります。</p>
```

# まとめ
CSSは、HTMLで作成したウェブページのデザインやレイアウトを整えるための言語で、文字の色やサイズ、配置などの視覚的な要素を自由にカスタマイズできる。基本的な記述ルールとして、「セレクタ」「プロパティ」「値」の3つの要素から成り立っている。

タグ名で直接指定する方法のほか、クラスを利用して特定の要素だけにスタイルを適用したり、複数のスタイルを組み合わせたりできる。CSSを活用することで、より魅力的で使いやすいウェブページを作成できる。
HP作成備忘録：ナビゲーション強化！サイト名にHOMEリンクをつける実装を試してみた

## はじめに

Webサイトでは、訪問者がどのページにいてもすぐにトップページへ戻れる設計が求められます。

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

その中でも「サイト名（タイトル）をクリックして戻る」動きは非常に一般的で、ユーザビリティの基本要素といえます。

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

トップページへの導線が分かりづらかったため、より自然な形で戻れる方法としてタイトルをリンクにする実装を試したくなりました。

:::note warn
***Webサイトを使いやすくするために、「タイトルをクリックするとトップページに戻れる」という機能はとても便利です。***
:::

今回は、ホンダ社労士事務所サイトの全HTMLページにこの機能を追加する方法を紹介します。

---

## 修正内容

すべてのHTMLファイルの `<header>` 内にあるタイトルを、リンク付きに修正します。

### 変更前
```html
<h1>ホンダ社労士事務所</h1>
```

### 変更後
```html
<h1><a href="index.html">ホンダ社労士事務所</a></h1>
```

これにより、タイトル部分がクリック可能になり、どのページからでもトップページ（index.html）に戻れるようになります。

---

## 修正後のHTML例（全ページ共通）

以下のように `<header>` を書き換えます：

```html
<header>
  <h1><a href="index.html">ホンダ社労士事務所</a></h1>
  <nav>
    <a href="index.html">HOME</a>
    <a href="greeting.html">代表挨拶</a>
    <a href="office.html">事務所案内</a>
    <a href="services.html">サービス案内</a>
    <a href="pricing.html">料金案内</a>
    <a href="contact.html">お問い合わせ</a>
    <a href="support-a.html">就労支援A型</a>
  </nav>
</header>
```

---

## 見た目の調整（CSS追加）

タイトル部分がリンクになることで、文字の色や下線が気になる場合があります。

以下のCSSを `style.css` や各専用CSSに追加すると自然な見た目に仕上がります。

```css
h1 a {
  color: #ffffff;
  text-decoration: none;
}

h1 a:hover {
  text-decoration: underline;
}
```

---

## まとめ

- サイト上部の「ホンダ社労士事務所」の文字がリンクになり、いつでもトップページに戻れる
- 見た目は変えず、マウスホバーで下線が出るなど自然な操作感

:::note info
**このように、小さな改善でもユーザー体験の向上につながります。**
:::

今回の備忘録が、どなたかの技術的な助けになれば幸いです！
Quizletと生成AIを活用して、効果的な単語帳を自動生成する方法



---

##  **要件定義（Requirements）**

**目的：**  
英語例文を英語の語順に対応した日本語に区切って記載し、文法理解・英作文・TOEIC対策・暗記帳作成などに活用する単語帳を作成する。

**形式要件：**

- 各行に以下の形式で記述する：  
  **英語文, 日本語文（英語の語順に対応して意味を保ったまま区切り）**

- 日本語訳は **英語の語順に合わせてスラッシュ区切り（/）で構成する**。  
  （例：We encourage all departments to participate in digital training.  
  → 私たちは / 奨励している / すべての部署が / 参加することを / デジタルトレーニングに）

- 文の中心動詞（ターゲット表現）を必ず含む構文にする。

- 表現の使い方を理解しやすくするため、**日常的・ビジネス的・デジタル関連の文脈**を含む。

- スプレッドシートやCSV形式に変換しやすいように、**「英語文」「番号.日本語文」をカンマ区切りで1行に収める**。

---

##  **出力形式サンプル**

```
We encourage all departments to participate in digital training., 1.私たちは / 奨励している / すべての部署が / 参加することを / デジタルトレーニングに
```

---

##  **単語帳（例：5個）**

```
We encouraged all members to join the online seminar., 1.私たちは / 奨励した / すべてのメンバーが / 参加することを / オンラインセミナーに
We treat user data with strict confidentiality., 2.私たちは / 扱っている / ユーザーデータを / 厳格な機密性をもって
We established a team to lead the digital transformation., 3.私たちは / 設立した / チームを / 主導するための / デジタルトランスフォーメーションを
The data clearly relates user activity to conversion rates., 4.そのデータは / 明確に関係づけている / ユーザーの行動を / コンバージョン率に
We supplied the team with high-performance GPUs., 5.私たちは / 供給した / チームに / 高性能なGPUを
```

---

出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3759109/b73be0df-bb60-43d9-8968-645d50dc90be.png)
EKS Anywhereについて超簡単に要約

# EKS Anywhereとは？
私は、EKS AnywhereはECS Anywhere同様にEKSの拡張オプション機能のようなものだと思っておりました。
しかし、実態は

**オープンソースのKubernetesディストリビューション**

でした。つまり、インストールすることで無料で利用することができます。
詳細については、以下のドキュメントがわかりやすく記載されているため、是非読んでみてください。
https://aws.amazon.com/jp/builders-flash/202404/awsgeek-eks-anywhere/

## 補足
但し、EKS APIの中でもEKS Anywhereに直接関連するアクションは存在しておりました。
EKS Anywhereサブスクリプション管理を実施する際は、以下のAPIが必要なようですので、忘れずにIAMアクセス許可に追加しましょう。

- eks:CreateEksAnywhereSubscription
- eks:DeleteEksAnywhereSubscription
- eks:DescribeEksAnywhereSubscription
- eks:ListEksAnywhereSubscriptions
- eks:UpdateEksAnywhereSubscription
なぜ私は初期チームでのチーム開発に失敗したのか、その原因と今後に活かす方法



### **まずチーム開発はどのように行ったのか**

#### オンライン会議
- 顔出しはしない
- スモールトークは最低限にして、業務の会話がメインであった

#### タスクの分散
- 個人の事情を考慮せず定量的にタスクを分担した

---

### **どのような課題があったのか**

- メンバーの時間的余裕がない
- 精神的な余裕が不足している
- 初学者が多く、与えられた課題を完成させることが難しい
- 以上の理由により、チーム開発タスクの進捗が遅れていた

---

### **どのように解決した、どのような結果になったのか**

- 解決には至らず、メンバーが抜けてチームは解散となった
- メンバーが抜けることを予期できなかった
  - 予期できなかった原因として、コミュニケーション不足や相手の状況をおもんばかることがなかったことがあげられる

---

### **それを踏まえて今後同じ失敗をしないためには？**

#### 心理的に安全な環境を作る

**自分にとって心理的安全な環境とは**
- つまらないことでも気軽に話せる環境
- 自分の良い、悪い問わず状況を共有できる
- 相手も同様に気軽に状況を共有できる

**なぜこの環境が必要なのか**
- つまらない会話ができる環境は、つまらないアイディアも共有・試せる環境につながり、改善策の実施が容易になる
- 誰しも気持ちが落ち込んだり、家庭や個人事情で成果を出せない時がある。その際に素直に助けを求められる環境があれば、存続確率が上がる
- 助けを求められた側も関係性が深まったと感じ、次回以降助けを求めることが容易になる

---

### **オンラインツールでの会話時に気をつけること**

#### まず、コミュニケーションの比較を行う
**オンラインツール（チャットツール・動画会議ツール）の特徴**
- ローコンテクスト文化：
  - 文脈や背景の共有が少なく、言葉による表現重視
  - テキスト情報交換がメインであり、対面より情報量が少ない
    - 表情や背景情報の読み取りが難しい（例：モザイク背景）
  - 個人情報や状況共有（飲み会など）が難しい
  - 会議時間にシビアで雑談しづらい

**従来型コミュニケーション（オフィスワークなど）の特徴**
- ハイコンテクスト文化：
  - 言葉以外にも表現（表情・声色）や文脈、企業文化への依存度が高い
  - 会議前後の雑談や個人的な交流機会があるため情報量が単純に多い　

---

#### それを踏まえて、オンラインツールで気をつけるポイント

**全体的な話**
- ローコンテクスト部分を強化しつつ、意図的にハイコンテクスト要素（文脈、背景共有）を取り入れる
- 意思や意図を明確化して誤解を防ぐ、また意図的に背景を共有する

**自分からの発信**
- 率直で肯定的な表現を心掛ける：
  - 平易で短い言葉を使い論理構造を明確化する
  - 誤解を生まない表現（例：感嘆符などポジティブな感情付加）を活用する
    - 良くない例：「xxというタスクはyy日までです。提出がないですがなぜですか？」  
      → 否定的に捉えられる可能性があるため避ける
- 自分の状況（タスク進捗・特殊な事情）を開示する：
    - 普段からどうでもいいことを開示する　
  - 家族事情や体調不良なども含めてオープンにする
  - カメラを可能な限りオンにして情報量上げる

**対相手への対応**
- 相手を理解していない前提で早めに確認・質問する：
  - 言葉や文章定義確認：「xxというのはyyという解釈で間違っていませんか？」
  - 状況確認：「xxというタスク進捗はどうですか？困っていることはありませんか？」
- チーム全員が状況共有しやすい状態へ持っていく：
  - 自分から発信することで相手も発信しやすくする、はず、、　
  - 相手から発信された場合はまず肯定的に受け止める、解釈はその後　

---

### **最後に、根本的には技術力向上が不可欠**

当たり前だがチームを正常に稼働するには一定以上の技術力が必要 
- 全タスク量を１とすると、チームメンバー各々最低1/3以上の能力が必要。そうではない場合、調子が落ちた際には、目標達成が難しくなる
- 技術力が要求水準ギリギリでは相手を助けることが難しくなる
- 最速で個人の技術力向上することが結果的にチーム利益につながる

---
WordPressでトップページとその他のページでdivのクラスを出し分ける方法

WordPressサイトを作成する際に、トップページとそれ以外のページでデザインを変えたい場合があります。例えば、download.php内のdivタグに対して、

* トップページ → `background-pink-dot`
* その他のページ → `background-blue-dot`

といった形でクラスを変更したいとします。

# 実装方法

WordPressには、現在のページがトップページかどうかを判定できる関数 `is_front_page()` があります。この関数を利用して、クラスを出し分けることができます。

# コード例

```HTML
<div class="<?php echo is_front_page() ? 'background-pink-dot' : 'background-blue-dot'; ?>">
    <!-- ここにコンテンツを記述 -->
</div>
```

1\. `is_front_page()` は、現在のページがトップページかどうかを判定するWordPressの関数です。

* トップページの場合 → true を返す。
* それ以外のページ → false を返す。

2\. `<?php echo is_front_page() ? 'background-pink-dot' : 'background-blue-dot'; ?>` の部分で、条件によって適用するクラスを変更しています。


* `is_front_page()` が true の場合、クラスは `background-pink-dot`
* それ以外のページでは `background-blue-dot`

# 動作イメージ
| ページ | 適用されるクラス |
|:-:|:-:|
| トップページ  |  background-pink-dot |
| その他のページ  | background-blue-dot  |

# まとめ
この方法を使うことで、特定のページだけデザインを変更することができます。WordPressテーマをカスタマイズする際にぜひ活用してみてください！
HP作成備忘録：共通CSS＋トップページ専用CSSを使い分けるシンプルな方法を試してみた

## はじめに

Webサイト制作において、「全ページで共通のCSSを使いながら、トップページだけに追加のスタイルを適用したい」というケースはよくあります。

ここでは、`style.css` を共通スタイルとして使い、`index.css` をトップページ専用として読み込む方法を解説します。

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

Web制作の実務や学習の中で、「すべてのページに共通のスタイルを当てつつ、トップページにだけ特別な装飾を加えたい」というニーズが頻繁にありました。

:::note info
***このパターンはシンプルな構成でも十分に応用でき、CSS設計の第一歩としてもとても効果的です。***
:::

そのため、具体的な記述例と共にまとめてみることにしました。

---

## 今回やりたいこと

- `css/style.css` は **全ページ共通のベーススタイル** として使用
- `css/index.css` は **トップページ（index.html）専用の追加スタイル** として使用
- `index.html` では **両方を読み込む**

---

## HTMLでの書き方（index.html）

```html
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
```

このように、共通スタイル → トップページ専用スタイルの順で読み込むことで、`index.css` が上書き・追加の役割を果たします。

---

## 完全な index.html のサンプル

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ホンダ社労士事務所</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <header>
    <h1>ホンダ社労士事務所</h1>
    <nav>
      <a href="index.html">HOME</a>
      <a href="greeting.html">代表挨拶</a>
      <a href="office.html">事務所案内</a>
      <a href="services.html">サービス案内</a>
      <a href="pricing.html">料金案内</a>
      <a href="contact.html">お問い合わせ</a>
      <a href="support-a.html">就労支援A型</a>
    </nav>
  </header>

  <main class="container">
    <section>
      <h2>新着情報</h2>
      <p>ここに新着情報を表示します。</p>
    </section>
    <section>
      <h2>お知らせ</h2>
      <p><a href="info/20241226093859.html">2024.12.26 ホームページを開設いたしました</a></p>
    </section>
  </main>

  <footer>
    <p>&copy; ホンダ社労士事務所</p>
  </footer>
</body>
</html>
```

---

## CSSの構成例

## style.css（全体共通）

```css
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.8;
}

header, footer {
  background-color: #ffcc80;
  color: #fff;
  text-align: center;
  padding: 20px;
}

main {
  padding: 40px 20px;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-size: 24px;
}
```

## index.css（トップページ専用）

```css
section {
  margin-bottom: 40px;
  background-color: #fffdf9;
  padding: 30px 20px;
  border-radius: 8px;
  border: 1px solid #ffe0b2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

h2 {
  color: #ff8f00;
  border-left: 6px solid #ffb74d;
  padding-left: 12px;
  margin-top: 0;
  font-size: 20px;
}

nav {
  margin-top: 10px;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: #ffffff;
  background-color: #ffa726;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  display: inline-block;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #ff9800;
}
```

---

## 補足：他のページの場合は？

他のページ（例：services.html）では、以下のように記述して共通スタイル＋専用スタイルを使えます：

```html
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/services.css">
```

ページごとに柔軟にデザインをカスタマイズしたい場合におすすめです。

---

## まとめ

- 共通スタイルは `style.css` に記述
- トップページ専用の追加スタイルは `index.css` に記述
- 複数のCSSを順に読み込むことで、上書きや追加のスタイルが可能
アジャイルについて

## 概要
ソフトウェアやシステム開発において、短期間の反復（イテレーション）を繰り返しながら開発を進める手法。
※ agileは日本語にすると「俊敏な、機敏な」という意味

## メリット
#### １.仕様変更に強い
機能別に「計画」や「設計」を行うアジャイル開発は、仕様変更に対しても柔軟に対応することができます。顧客のフィードバックの後に仕様変更や要望の追加が発生しても、その内容を次のイテレーションに反映させることで対応可能です。
#### ２.早くリリースできる
ソフトウェアの各種機能をひとつの単位として、「計画」「設計」「実装」「テスト」という一連の工程を回し、リリースします。その際、ユーザーストーリーを取り込んだリリース計画を立てることによって、いち早くユーザーのニーズを満たしたプロダクトを提供することが可能となります。
#### ３.ユーザーの要望に寄り添った開発ができる
短いスパンで成果物をリリースするため、顧客は開発進捗を確認できて、開発チームはその都度フィードバックを得ることができます。そして、次のイテレーションに仕様変更や要望をタスクとして追加することによって、ユーザーの要望に最大限寄り添った開発を行うことができます。

## デメリット
#### １.全体のスケジュール管理が難しい
詳細な計画を最初に立てないため、スケジュールや進捗の把握が難しく、全体のコントロールが困難になることがあります。
#### ２.プロジェクトの方向性がブレやすい
仕様の変更を加えやすいメリットの反面、プロジェクト開始当初の目標、方向性を見失ってしまうことがあります。

## 代表的な手法
- スクラム
- カンバン
- リーンアジャイル
- エクストリームプログラミング（XP）

## ４つの価値基準
「アジャイルソフトウェア開発宣言」にて、アジャイルを実践する上での基本的な価値観である「4つの価値」が示されています。
#### １.「個人と対話」
プロセス、ツールよりも個人と対話。

#### ２.「実際に動く（働く）ソフトウェア」
広範囲で包括的なドキュメントよりも実際に動くソフトウェア。

#### ３.「顧客とのコラボレーション」
契約交渉よりも、顧客とのコラボレーション（利的協力）。

#### ４.「変化に対応」
計画に従うよりも、変化に対応。

## 12の原則
「アジャイルソフトウェア開発宣言」にて、アジャイル開発にどういった姿勢で臨み、どう行動すべきか、どんな目標を設定し、スケジュール感覚を持つのが大切かといった理想像が12つ示されています。
- 顧客満足を最優先して継続的に価値あるソフトウェア提供する。
- 要求変更を歓迎し、変化を味方につけて顧客の競争力を向上させる。
- 「動くソフトウェア」を2～3週間、2～3ヶ月と短い間隔でリリースする。
- ビジネスサイドと開発者は日々一緒にプロジェクトで働く。
- 意欲に満ちた人を集めてプロジェクトを構成し、メンバーを信頼する。
- 情報を伝える効率的で効果的な方法は対面で話をすること。
- 動くソフトウェアが進捗の最も重要な尺度になる。
- アジャイル･プロセスは持続可能な開発を促進する。一定のペースを維持する。
- 技術的な卓越性と優れた設計への欠かさない注意が機敏さを高める。
- シンプルさが本質。
- 最良のアーキテクチャ・要求・設計は、自己組織的なチームから生まれる。
- 定期的に振り返りをして、自分たちのやり方を最適に調整する。
ギャル「まだv0で消耗してるの？今どきはsame.newっしょ！」


「え、まだv0で消耗してるの？今どきのエンジニアなら **same.new** 使わなきゃヤバくない？」  

最近、開発現場では **[https://same.new/](https://same.new/)** が話題になってるって知ってた？  

レガシーな `v0` でイライラしながらコード書いてるなんて、マジで時代遅れ！  
今日は、**same.new** のメリットから、 `v0` からのスムーズな移行方法まで、イケてる開発を目指すアナタにわかりやすく解説しちゃうよ💖

<sup>
※本記事の筆者はv0・Vercelおよびsame.newとは一切関係ありません
<br />
※本記事は特定の技術・ツールの使用を推奨するものではなく、読者ご自身の判断と責任においてご利用ください。
</sup>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4042513/628c0805-6d27-410e-935b-6f573550048b.png)

---

## 🚀 same.newって何？  
ざっくり言うと、**same.new** は **v0** を完全に置き換える次世代ツール。従来の `v0` では難しかった柔軟性やパフォーマンスを一気に改善した、 **ハイパーイケてるコンポーネント管理** を実現してくれるの。

### 🔥 same.newのここがアツい！  
1. **爆速レンダリング**  
   - v0に比べてレンダリングがめっちゃ速い！アプリのパフォーマンスが向上して、ユーザーもストレスフリー💨  

2. **イケてるDX（Developer Experience）**  
   - コードがシンプルで読みやすく、複雑な設定が不要！  
   - ギャルでも理解できるわかりやすさ💁‍♀️  

3. **最新技術に完全対応**  
   - React 18? Server Components? ぜんぶ対応済みだから安心して移行できちゃう✨  

4. **拡張性バツグン**  
   - 独自コンポーネントのカスタムも楽勝。新しい仕様にも即対応できるから、未来もバッチリ。

---

## 😵 まだv0で消耗してるの？v0の問題点  
v0って正直、もう限界きてない？以下のポイントに心当たりあるなら、いますぐ `same.new` へ移行しよ？

### ❌ レガシー感満載  
- 古くなったコードベースにしがみついてると、技術的負債がヤバい。未来の自分が泣くよ？

### 🐢 パフォーマンスが遅い  
- コンポーネントの再レンダリングが遅すぎる。ユーザーは待ってくれないよ？  

### 🔧 メンテがつらい  
- v0独自のクセが強すぎて、保守するのに時間かかる。もう疲れた…。

---

## 📋 same.newへの移行ガイド  
「移行とかダルそう…」って思ってる？大丈夫、実はめっちゃ簡単だから順番に見てこう！

### 1. 環境を確認する
- まず、 `v0` に依存してるパッケージを確認しよう。  
  ```bash
  npm list | grep v0
  ```
  - 依存関係を洗い出して、 `same.new` に対応するパッケージを探すのがポイント。

### 2. same.newをインストール  
- 次に、 `same.new` をプロジェクトに導入。  
  ```bash
  npm install same.new
  ```
  - これだけで環境構築は完了。マジで爆速✨

### 3. コンポーネントの置き換え  
- v0のコンポーネントを、 `same.new` 方式に置き換えてくよ。  
例えば、v0のコードがこれだったら👇  
```jsx
import { OldButton } from 'v0';

function App() {
  return <OldButton label="クリックしてね" />;
}
```

same.newにすると、こうなる👇  
```jsx
import { NewButton } from 'same.new';

function App() {
  return <NewButton>クリックしてね</NewButton>;
}
```
- ね、簡単でしょ？💖

### 4. 動作確認  
- 置き換えたら、アプリがちゃんと動くか確認しよう。  
  ```bash
  npm run dev
  ```
- もしエラーが出たら、`same.new` の公式ドキュメントを参照しつつ対応すればOK。

---

## 📈 v0とsame.newの比較表  
「結局何が違うの？」って思うよね。違いを表でまとめたからチェックしてみて！

| 項目             | v0                        | same.new                     |
|------------------|---------------------------|-------------------------------|
| レンダリング速度 | 遅い（特に複雑なUI）       | 爆速（React 18最適化済み）   |
| DX（開発体験）   | 設定が複雑で手間がかかる     | シンプル＆直感的             |
| 保守性           | レガシー感強く、つらい…    | 最新仕様に対応でメンテ楽勝    |
| カスタム性       | 制限多め                   | 柔軟性バツグン                |
| 学習コスト       | 高い                       | 低い＆分かりやすい            |
| 未来性           | もう伸びしろないかも…      | 継続的に進化＆安心して使える |

---

## 💡 same.newを使いこなすTips  
1. **公式ドキュメントは常にチェック**  
   - 進化が早いから、常に最新情報を確認しよう！  

2. **TypeScriptと組み合わせる**  
   - same.newは型サポートが強力だから、TypeScriptとの相性バツグン！  

3. **レガシーコードは段階的に移行**  
   - 一気に移行しようとしないで、少しずつ置き換えるのがコツ。

---

## 🎤 まとめ：「same.newで未来に備えよ！」  
まだ `v0` で消耗してる場合じゃなくない？これからの開発は **same.new** でサクッとスマートに行こ💖

- **爆速レンダリング**でユーザーもハッピー！  
- **開発体験（DX）**が快適で、作業効率アップ！  
- **最新技術**に対応して未来も安心！  

**古い技術は捨てて、トレンドに乗っかるのがイマドキっしょ！？**
【初歩の初歩】プログラミング一歩目でもできる勉強効率化

## 対象者
この記事の対象者は以下のような人たちです。

- パソコン自体に慣れてないぜ！
- プログラミングの勉強を始めてみたぜ！
- ハンズオン形式の教材を進めていくぜ！
- 特にスキルはないけど効率的に進めていきたいぜ！

## 結論！

日本語入力は使わなくていいです！
だって...めんどくさいじゃん？

例えば、JavaScriptだと以下のようなコードをハンズオンなどで書かされますよね？

```JavaScript
console.log("私の名前は〇〇です。");
```
HTMLだとこんなんとか...
```html
<h1>タイトル
<div>
    <button>保存</button>
</div>
```

このような記述をすると日本語切り替えする必要があって効率が悪くなります。漢字変換ミスったりして変な手間がかかりますしね。
タイピングに慣れていないともっと時間がかかるので、動きを見たい時は英語で文字列を入力した方がいいです！
学びたい本質とは離れたところで時間を食うのは避けたいですしね。  


日本語のタイピングは実務でドキュメント整理したりQiita更新してたら嫌でも速くなるので気にせず英語のみ使ってください。



```JavaScript
console.log("I'm John.");
```

```html
<h1>title
<div>
    <button>save</button>
</div>
```
## 実は恩恵もあります

例えば変数名をつけたりするときに英語名をつけたり英語の略語を使うことがよくあります。
英語得意な人は始めからなんとなくわかっていると思うのですが、私のような一般人は英語そこまでできません。

なので、日頃の勉強で英語を使っていると変数名をつけるときに「あれ、これって英語でどう表現すればいいんだ...?」ってなることが少なくなります！  

(とはいえ調べることも結構あります...)

## 英語調べてたらもっと時間かかるよね？

はい。その通りです。
なので、バランスを見ながら自分で調整してください。
CISSPに合格したので勉強法をまとめる（Youtube/公式問題集を活用）

## はじめに
2025年3月にCISSP（Certified Information Systems Security Professional）に合格したので、忘れないうちにどのように勉強したかをまとめます。

公式トレーニングや公式ガイドブック無しで、英語のYoutube動画を自動翻訳を使いつつ勉強した点が少しユニークだと思うので、その点を中心に記載します。

## 紹介する勉強法をお勧めしたい方
以下のいずれかに該当する方は、本記事に記載の勉強法はお勧めできるかな？と考えています。
- お勧めする方
    - ある程度IT/セキュリティの知識や経験があるが、CISSPの各ドメインに何が含まれるか知らない人
    - 公式問題集を解いたけど、全体像が見えずに困っている人
    - 誤訳に備えて試験本番では英文もチラ見しようと思っている人

逆に以下に該当する方は向かない気がします
- お勧めしない方
    - 英語に強い拒否反応がある人
    - セキュリティやITの経験が無く、まったくゼロから勉強する人
    - 公式トレーニングを受けた人


## 自分のこと
CISSPの勉強開始時点では、以下のような状態でした。
- **準備期間**: 勉強開始が試験日の3週間前 ※これは遅すぎたと後ほど後悔
- **セキュリティの経験**: エンジニアやコンサルタントとして計6年ほど
- **保有資格**: 情報処理安全確保支援士
- **英語力**: TOEIC 700~800点ぐらい（推測）
- **その他**: Youtube Premiumに加入しており広告は表示されない **※紹介する勉強法においてこれは多分重要**


## 勉強で活用したYoutubeプレイリスト
[Destination Certification](https://destcert.com/)という所が出している
以下のYoutubeのプレイリストを活用しました。（Youtubeの自動翻訳機能を利用。詳細な活用法は次節記載）
- [CISSP MindMaps 2023](https://youtube.com/playlist?list=PLZKdGEfEyJhLd-pJhAD7dNbJyUgpqI4pu&si=YS3-ANZpu6r0DQze)

このプレイリストの動画の良いところは、↓の動画を再生すると表示されるような「マインドマップ」と呼ばれる各ドメインごとの主要なカテゴリの知識を体系的に教えてくれる点です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/hf5NwUSEkwA?si=TPi6MX3XPje0jQUo&amp;start=77" 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>

独学でCISSPの勉強をする上で、この動画は体系的に知識をインプットするために大変役立ちました。
公式のトレーニングを受けておらず、公式のガイドブックは高価でありしかも辞書的に使うことになると聞いていたので「わざわざ購入するのはなあ・・」と悩んでいた私にとって、この動画を見つけたことはラッキーでした。

## 勉強法
大まかに以下の順序で勉強しました。
1. 日本語版の公式問題集[1]の模擬試験の1つ通して実施し、現在の知識レベルを把握する※この時点での正答率は55%でした。（[余談1](#余談)）
1. 各ドメインごとに、次の順序で実施
    1. 上記のYoutubeのプレイリストから、1つのドメイン（例えばDomain.1)の動画を視聴 **※重要：Youtubeの自動翻訳機能を用いて日本語字幕を表示** （[余談2](#余談)）
    1. 動画を見ながら知らない言葉をメモ & 知らない内容であれば Web/生成AI を活用しながら自分なりに理解するまで調べる
    1. 日本語版の公式問題集の対応するドメインを実施 ※動画視聴後の私の正答率は 60%~80% ぐらいでした
    1. 公式問題集で間違えた問題の正解を確認して、必要に応じて Web/生成AI に質問 & メモ にまとめる 
1. 公式問題集の模擬試験の2つ目を90問解いた所で時間切れとなり、試験当日を迎える ※この模擬試験の90問の正答率は80%でした（[余談3](#余談)）

大まかな流れは以上で、上記の合計勉強時間は46時間でした。
せめて公式問題集の模擬試験は全てやり切りたかったというのが正直な感想です。


## 余談
1. 最初は問題集で間違えた問題を1つずつ振り返りつつNotionにメモしてみましたが、これでは到底間に合わない & 体系的な勉強が必要なことに気付きました
1. 最初は英語字幕で見ていましたが知らない単語を調べるのに時間がかかりました。途中でYoutubeの自動翻訳機能に気付いて、あまりにも綺麗な日本語に翻訳されるので感動しました（元の英語が綺麗なのだと理解）
1. 完全に準備が出来ていないという感想のまま試験当日を迎えたので、試験中はだいぶ難しいと感じながら回答していました。2025年3月時点ではCAT形式の試験であり、解いている感触としては100問で終わらずにどこまで追加質問があるかな・・という気持ちで解いていました。残り20分の状態で100問終了した時点で試験が予期せず終了したため、受かっているかとてもドキドキしながら結果の紙を受け取りました。

## 最後に
以上です。
これから勉強する方の参考になれば幸いです。また、私がどのように勉強したかを人に質問された際にはこの記事を渡そうと思います。

## 関連リンク
[1]  [ISC2の公式ページ参照ページ](https://japan.isc2.org/cissp_examination.html)
BigQueryのタイムトラベル機能を活用する

# はじめに
BigQueryには"タイムトラベル"という便利な機能があり、過去のデータを一定期間遡って参照できます。データの誤更新や削除が発生した場合でも、過去の状態を簡単に復元できるため、データ管理の柔軟性が向上します

# タイムトラベルとは？
BigQueryでは、テーブルの過去のスナップショットを最大7日間保持し、過去のデータにアクセスできます。これはBigQueryのストレージシステムによるもので、削除や上書きが発生しても、一定期間であれば復元が可能です。

### タイムトラベルの主な用途
* 誤って削除・更新したデータの復元
* 過去のデータ状態を分析する
* データの変更履歴を確認する

# タイムトラベルの基本的な使い方
### 過去のデータを取得する

過去のデータを参照するには、FOR SYSTEM_TIME AS OFを利用します。

```
SELECT *
FROM `your_project.your_dataset.your_table`
FOR SYSTEM_TIME AS OF TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 DAY);
```

このクエリは、1日前のデータを取得します。INTERVALの値を変更することで、異なる時間のデータを取得可能です。

# タイムトラベルを活用したデータ復元
誤ってデータを削除した場合、削除前のデータを復元できます。

### 例: 誤ってデータを削除した場合
```
DELETE FROM `your_project.your_dataset.your_table`
WHERE id = 123;
```
この場合、削除前のデータを復元するには、以下の手順を実施します。

1. 削除前のデータを取得する
     ```
    SELECT *
    FROM `your_project.your_dataset.your_table`
    FOR SYSTEM_TIME AS OF TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 HOUR)
    WHERE id = 123;
    ```
1. 削除前のデータを元のテーブルに挿入する
    ```
    INSERT INTO `your_project.your_dataset.your_table`
    SELECT *
    FROM `your_project.your_dataset.your_table`
    FOR SYSTEM_TIME AS OF TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 1 HOUR)
    WHERE id = 123;
    ```
これで、削除したデータを復元できます。

# タイムトラベルの制約
タイムトラベルには以下の制約があります。
* 最大7日前までしか遡れない
* パーティションテーブルの場合、パーティションが削除されるとデータも消える
* コストが発生する（タイムトラベルによるクエリも通常のクエリと同様に課金される）

# まとめ

BigQueryのタイムトラベル機能を使うことで、誤ったデータ操作を修正し、過去のデータを参照することができます。
CPU の創りかたを読んで CPU を実装してみた

## はじめに

4 年ほど前に「CPU の創りかた」という本を買いました。当時、まだ営業として働いていましたが、コンピューターサイエンスの基礎を勉強しようと思い、いくつか調べてこの本を買いました。
しかし当時は、買った本を読んでも内容を理解できず、そのまま放置していました。今回エンジニアとして働き始めて 1 年経ち、久々に読んだところ、
内容が理解できるようになっていたので、実際に IC チップで実装してみました。

## CPU の基本構成

以下は、本書の構成順に沿って、今回作成した CPU の基本構成をまとめたものです。

### 1. クロック & リセット

- クロック
- リセット

### 2. ROM

- Arduino UNO R4 minima を使って、ROM を代用

### 3. レジスタ

- 汎用レジスタ
- プログラムカウンタ

### 4. I / O

- LEDとトグルスイッチによる入出力

### 5. ALU

- 加算器

### 6. 命令デコーダ

- 命令デコーダ

## 実装の詳細

![IMG_2336.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386347/6ab59cda-7d3f-427e-8cf6-9a5181db1daa.jpeg)

### 使用したパーツ

以下パーツを秋葉原の秋月商店に実際に行って可能な限り揃え、不足したパーツは樫木総業の EC にて購入しました。

- Arduino UNO R4 minima
- IC チップ
  - 74HC14 x 1: シュミットトリガー・インバーター
  - 74HC163 x 4: 4 ビット同期カウンタ
  - 74HC153 x 2: 4 ビットマルチプレクサ
  - 74HC283 x 1: 4 ビット全加算器
  - 74HC74 x 1: D フリップフロップ
  - 74HC32 x 1: 2 入力 OR ゲート
  - 74HC10 x 1: 3 入力 NAND ゲート
- 抵抗 (まとめ買いのため、個数記載ない)
  - 100Ω
  - 1kΩ
  - 3.3kΩ
  - 10kΩ
  - 33kΩ
  - 100kΩ
- コンデンサ (まとめ買いのため、個数記載ない)
  - 10μF
  - 100μF
- そのほか
  - バレッドボード
  - バレッドボード用ジャンパーワイヤー
  - 自励式ブザー
  - タクトスイッチ
  - トグルスイッチ

## 得られた知見

1. CPU の基本動作の理解
   1. 理論では理解していた、ロジック IC の動作を実際に確認できた。
   2. フリップフロップを使って、データを保存する仕組みを理解できた。
2. CPU の基本的な全体像の理解
   1. クロックの役割
      1. クロックの信号を受け取り、その信号の周期に従って、フリップフロップなどの IC 回路の動作を制御する。
   2. リセットの役割
      1. リセット信号を受け取り、IC 回路の出力をリセットする。
   3. レジスタの役割
      1. フリップフロップとデータセレクタを使って、データを保存する方法。
   4. データセレクタの役割
      1. データセレクタは、データを選択的に読み取るための回路。フリップフロップ 1 つで 1 ビットのデータを保存する。データセレクタは、フリップフロップの出力を受け取るが、命令デコーダによって選択されたフリップフロップからのデータのみを出力する。
   5. プログラムカウンタの役割
      1. プログラムカウンタは、プログラムの実行順序を管理する。 カウンタは読み取る ROM のアドレスとなる。
   6. 命令デコーダの役割
      1. 命令デコーダは、命令コードの入力からデータセレクタやフリップフロップのロード信号を出力する。
   7. ALU
      1. 今回は全加算器を利用。命令デコーダに沿ってセレクタから出力された結果を使って、演算を行う。
   8. ROM
      1. 4 ビットのアドレスパスを受け取り、そのアドレスに対応するデータ(命令コードと Immediate データ)を 8 ビット出力する。
3. 基礎の電子回路の仕組みやデバッグの方法
   1. 実際にテスターを使った回路のデバッグの難しさ
   2. 中学理科レベルの電気の知識

## Arduino UNO R4 minima での実装

今回、Arduino UNO R4 minima は ROM として利用しています。
今回の ROM の役割は、4 ビットのアドレスパスを受け取り、そのアドレスに対応するデータ(命令コードと Immediate データ)を 8 ビット出力することです。

利用したコードは Github にて公開しています。
https://github.com/ZawaPaP/CPU-

## まとめ

実際の IC チップを使用した CPU の実装は、基礎の理論と実践の両方を学ぶことができる貴重な経験でした。これまで、Nand2Tetris などで基礎の CPU の仕組みを学んでいたのですが、実際に自分で作ってみると、
どのような回路を作ればよいか、どのように回路を組み立てればよいか、といったことを改めて復習し、理顔を深めることができました。


## 参考資料

CPU の創りかたは有名な本のため、さまざまな人が実装しています。インターネット上の記事を色々と参考にさせていただきました。
Unity-HasExitTimeとは？(AnimationControllerのTransition)

# Unity Animator TransitionのHasExitTimeとは？

## **HasExitTimeとは？**
`HasExitTime` は、**アニメーションの遷移（Transition）が、現在のアニメーションの再生時間に応じて自動的に発生するかどうか** を決めるオプションです。

---

## **HasExitTime = true の場合**
### **特徴**
- **現在のアニメーションが終わるまで待ってから遷移する**
- `Exit Time` の値に達したら、次のアニメーションに移行する
- **トリガーや条件なしで、アニメーションが終わったら自動で遷移する**

### **使いどころ**
- **攻撃モーションが終わったら自動で待機モーションに戻る**
- **アニメーションが必ず最後まで再生される必要がある場合**（例: フィニッシュアクション）

### **例**
アニメーション `Attack` から `Idle` に遷移するとき、`HasExitTime = true` なら `Attack` が最後まで再生されてから `Idle` に移行する。

---

## **HasExitTime = false の場合**
### **特徴**
- **アニメーションが最後まで再生されなくても、条件が満たされればすぐに遷移できる**
- `Bool`, `Trigger`, `Float` などの**パラメータを使って制御**できる
- `Exit Time` の値は無視される

### **使いどころ**
- **プレイヤーの操作に応じて自由にアニメーションを切り替えたい場合**
- **攻撃キャンセルやダメージを受けたときにすぐに次のアニメーションに切り替えたい場合**

### **例**
走る (`Run`) → 攻撃 (`Attack`) の遷移を `HasExitTime = false` にして、**ボタンを押した瞬間に即座に攻撃できるようにする。**

---

## **HasExitTime の使い分けまとめ**

| `HasExitTime` | 動作 | 使いどころ |
|--------------|------|------------|
| ✅ `true` | アニメーションが終わってから遷移 | 自動遷移が必要な場合（攻撃後にIdleなど） |
| ❌ `false` | 条件を満たしたら即遷移 | プレイヤーの操作やキャンセルが必要な場合 |

---

## **補足：Exit Time の値について**
- `Exit Time = 1.0` → **アニメーションが100%再生された後に遷移**
- `Exit Time = 0.5` → **50%再生されたら遷移**

`Exit Time` は **`HasExitTime = true` のときにのみ有効** なので、`HasExitTime = false` の場合は無視されます。

---

## **まとめ**
`HasExitTime` を適切に設定することで、スムーズなアニメーションの切り替えを実現できます。プレイヤーの操作が重要なアクションゲームでは `false`、シネマティックな演出を重視する場合は `true` を活用しましょう！
Windows Internal Database (WID) のセットアップなど基本的なお話

業務で WID について知る機会があったので、ざっくりな備忘録として残していきます。
もっと掘り下げた内容を見たいといった人には適していない記事かもしれないです。

## Windows Internal Database とは？
Windows Server に標準で組み込まれているミニマムなデータベースです。

ベースとなっているのは SQL Server ですが、通常の SQL Server として使用されることはなく、以下のサービスとアプリケーションで使用されます。

- Active Directory Rights Management Services (AD RMS)
- Windows Server Update Services
- Windows System Resource Manager
- Routing and Remote Access (RRAS)
- IP Address management (IPAM)
- Terminal Services (TermSrv)
- Active Directory Federation Services (ADFS)


## インストール

Windows Server のサーバー マネージャーから Windows Internal Database をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571352/9b17403e-cc66-44ea-b92e-3ad0a98357a3.png)

インストールが完了すると、C:\Windows\WID にインストールされてますね。
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571352/ff0440ab-12db-4236-8d92-37983a2d9c82.png)


## データベースへ接続する

SQL Server と同様に SSMS、sqlcmd コマンド ツールが使用できるようで、このあたりも SQL Server と変わらないですね。

サーバー名では名前付きパイプを使用する必要があり、Windows 認証と以下の接続文字列で接続します。
**np:\\.\pipe\MICROSOFT##WID\tsql\query** 
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571352/25346c76-24a5-4b3e-b95e-1882ebce0257.png)

@@VERSION で確認してみると、確かに SQL Server がベースとなっているのが確認できます。
この環境は Windows Server 2019 なのですが、思ったより古いバージョンの SQL Server が使用されていました。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3571352/a4048d3a-d445-43af-b0be-44ac3e00f56f.png)


sqlcmd では以下のように接続することが可能です。
```
sqlcmd -S **np:\\.\pipe\MICROSOFT##WID\tsql\query**
```

また、冒頭で記載している通り、SQL Server のように使用されることを想定していないので、ユーザー データベースの作成はサポートされていないようです。 (作成自体はできるっぽいけど WID を再起動するとエラーが起きるそう)