OmniAICreator/Qiita-1.07M huggingface dataset:
GitHub Actions × TerraformでAWSを自動管理！初心者でもできるCI/CDチュートリアル

<h3>背景：Infrastructure as Code（IaC）とCI/CDの重要性</h3>
<p>
近年、インフラ構成の自動化を目的とした<strong>Infrastructure as Code（IaC）</strong>の重要性が急速に高まっています。なかでも<strong>Terraform</strong>はクラウドベンダーに依存しない構成管理ツールとして注目されており、多くの企業で導入が進んでいます。一方、開発と運用の自動化を支えるCI/CDツールとしては<strong>GitHub Actions</strong>が非常に人気で、特にGitHubとシームレスに統合できる利点があります。
</p>
<p>
この2つを組み合わせることで、AWS上のインフラをコードベースで管理し、Git操作をトリガーに本番環境を自動構築・更新する仕組みが構築可能になります。
</p>

<h3>技術的背景と最近のトレンド</h3>
<ul>
  <li>GitHub Actionsは2020年以降、Qiitaでも関連記事が急増し、Terraformとの連携記事は特に保存数が多い傾向。</li>
  <li>TerraformはAWS公式の推奨ツールでもあり、従来のCloudFormationに比べて汎用性・可読性の面で評価されている。</li>
  <li>Terraform CloudやOpenTofuの登場などで選択肢が広がっているが、学習の第一歩としてGitHub Actionsの活用は依然王道。</li>
</ul>

<h3>よくある課題・エラーとその傾向</h3>
<ul>
  <li><strong>Terraformの状態管理</strong>：ローカル管理だと競合が起きやすく、CIとの相性が悪い。</li>
  <li><strong>AWS認証エラー</strong>：GitHub Actions上でAWSの認証情報を安全に扱う方法を理解していないと、権限不足のエラーが発生。</li>
  <li><strong>ActionsのYAML構文ミス</strong>：慣れないうちはインデントやコマンドの書き方でエラーが頻発。</li>
  <li><strong>Plan/Applyの分離</strong>：PRでPlan結果を確認してからApplyしたい、という運用が難しいケースも。</li>
</ul>

<h3>GitHub Actions + Terraformを使ったAWS構築の手順</h3>
<p>
以下は、GitHub Actions上でTerraformを使い、S3バケットを作成するシンプルな例です。
</p>

<pre><code># .github/workflows/terraform.yml
name: Terraform on AWS

on:
  push:
    branches:
      - main

jobs:
  terraform:
    name: 'Terraform Apply'
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: Setup Terraform
        uses: hashicorp/setup-terraform@v3

      - name: Terraform Init
        run: terraform init

      - name: Terraform Plan
        run: terraform plan

      - name: Terraform Apply
        run: terraform apply -auto-approve
</code></pre>

<p>
Terraformファイル（例：<code>main.tf</code>）はこんな感じです。
</p>

<pre><code># main.tf
provider "aws" {
  region = "ap-northeast-1"
}

resource "aws_s3_bucket" "example" {
  bucket = "my-example-bucket-123456"
  acl    = "private"
}
</code></pre>

<h3>ベストプラクティスと運用のポイント</h3>
<ul>
  <li><strong>ステート管理はリモート（S3＋DynamoDB）に切り替える</strong>：チーム開発やCI環境と相性が良い。</li>
  <li><strong>PRごとにplanのみ実行し、マージ後にapplyを実行するワークフロー</strong>を採用すると安全。</li>
  <li><strong>Secretsは必ずGitHubのSecretsに登録</strong>し、ワークフロー上にベタ書きしない。</li>
  <li><strong>applyの前にplan結果をSlack通知</strong>する連携もおすすめ。</li>
  <li><span style="color:red;">GitHub Actionsランナーに対するIAMロールの制限を忘れずに</span>。</li>
</ul>

<h3>まとめと今後の展望</h3>
<p>
GitHub ActionsとTerraformの組み合わせは、エンジニアにとって非常に強力な武器になります。特にAWS環境を扱う案件では、<strong>コードでのインフラ管理＋自動デプロイ</strong>は今後の必須スキルと言っても過言ではありません。
</p>
<p>
まずは小さなリソースから始め、<strong>Plan→Applyの分離運用</strong>や<strong>Slack連携・PR連動などの高度な自動化</strong>へと発展させていきましょう。公式ドキュメントやQiita記事と併せて、自分に合ったCI/CDパターンを構築してみてください。
</p>
<p>
今後は、<strong>Terraform Cloud</strong>や<strong>GitHub Actions Runnerのセルフホスト化</strong>、<strong>OpenTofuへの移行</strong>なども注目テーマとなるでしょう。
</p>
02入門ガイド：Reactクラスコンポーネントとpropsの使い方解説

# 2. コンポーネント

コンポーネントとは、HTML、CSS、JSをまとめて封装したコードの一部で、最終的には独自のタグとして表現されます。コンポーネントはそれぞれ独立したスコープ（作用域）を持ちます。

Reactのコンポーネントは大きく2種類に分けられます：
- 関数コンポーネント（推奨）
- クラスコンポーネント（旧式）

---

## 2.1 クラスコンポーネント

### 1. クラスコンポーネントの定義

Reactコンポーネントをクラスとして定義するには、組み込みの `Component` クラスを継承し、`render` メソッドを定義します：

```jsx
class Welcome extends React.Component {
  render() { // 自動的に呼ばれるレンダリングメソッド
    return <h1>私はクラスコンポーネントです</h1>;
  }
}

// 使用例
root.render(<Welcome></Welcome>); // 単一タグ、もしくは閉じタグどちらでも可
````

### 2. 間違いやすいポイント

```jsx
return <h1>私はクラスコンポーネントです</h1>; // 正しい

return
<h1>私はクラスコンポーネントです</h1>; // 間違い（この場合は括弧が必要）

return (
  <h1>私はクラスコンポーネントです</h1>
); // 正しい
```

### 3. Fragmentについて

```jsx
<>
  <h1>hello</h1>
  <p>hello</p>
</>
```

この空のタグはFragmentと呼ばれます。
React Fragmentは子要素をグループ化しますが、HTML構造に余計なノードを追加しません。

---

## 2.2 props

コンポーネントの属性は関数の引数のようなもので、外部からデータを受け取って異なる表示を可能にします。

* `props` はクラスコンポーネントに自動で付与される属性で、すべての属性の集合を表します。
* 属性は変更できません。外部から渡されるものであり、コンポーネント自身のデータではないため、変更権限がありません。
* 変更したい場合は、データソースを更新し、新しい属性を渡す必要があります。

### 基本例

```jsx
class Welcome extends React.Component {
  render() {
    let { name } = this.props;
    return <h1>hello， {name} </h1>;
  }
}

root.render(
  <>
    <Welcome name="山田" />
    <Welcome name="林" />
    <Welcome name="山下" />
    <Welcome name="松本" />
  </>
);
```

### ナビゲーションバーのハイライト例

```jsx
// propsは関数の引数のようなもの
class Navi extends React.Component {
  render() {
    let { number } = this.props;
    return (
      <ul>
        <li style={{ backgroundColor: number == 1 ? "red" : "" }}>ホーム</li>
        <li style={{ backgroundColor: number == 2 ? "red" : "" }}>製品</li>
        <li style={{ backgroundColor: number == 3 ? "red" : "" }}>ニュース</li>
        <li style={{ backgroundColor: number == 4 ? "red" : "" }}>私たち</li>
      </ul>
    );
  }
}

class Welcome extends React.Component {
  render() {
    let { name } = this.props;
    return <h1>hello， {name} </h1>;
  }
}

root.render(
  <>
    <Navi number="1" />
    <Navi number="2" />
    <Navi number="3" />
    <Navi number="4" />
  </>
);
```

---

## 2.3 `props.children`について

* コンポーネントタグ内に書いた内容は、`props.children` で取得できます。
* 1つの内容を渡した場合はオブジェクトとして返り、複数の内容を渡した場合は配列として返されます。

### 例

```jsx
class Welcome extends React.Component {
  render() {
    console.log(this.props);
    return (
      <>
        <h1>hello</h1>
        <h1>world</h1>
        {this.props.children}
      </>
    );
  }
}

root.render(
  <>
    <Welcome>
      <h1>追加のコンテンツです</h1>
      <p>12123</p>
      <div>
        <p>456</p>
      </div>
    </Welcome>
  </>
);
```

### 複数の内容を異なる場所にレンダリングしたい場合

コンポーネントタグ内の複数の内容を異なる場所に表示したい場合は、インデックスでアクセスします：

```jsx
class Welcome extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        {this.props.children[0]}
        <p>123</p>
        {this.props.children[1]}
        <h1>456</h1>
        {this.props.children[2]}
      </div>
    );
  }
}

root.render(
  <>
    <Welcome>
      <h1>コンポーネントタグ内に追加した内容</h1>
      <p>さらに追加</p>
      <a>React</a>
    </Welcome>
  </>
);
```
【Next.js】データフェッチ

## fetch 関数

- クライアント／サーバーの両方で使用可能。
- API などのリソースからデータを取得する。

```tsx
const res = await fetch('https://api.example.com/posts');
const data = await res.json();
```

## fetch のオプションによるデータフェッチ制御（SSG / SSR / ISR)
App Router では `fetch()` にオプションを渡すことで、SSG / SSR / ISR を制御できる。

### 1. SSG（`force-cache`）

```ts
const res = await fetch('https://api.example.com/posts', {
  cache: 'force-cache',
});
```

- キャッシュを利用してデータを取得


### 2. ISR（`revalidate`）

```ts
const res = await fetch('https://api.example.com/posts', {
  next: { revalidate: 60 }
});
```

- 60秒間キャッシュ → 期限切れ後にバックグラウンドで再取得


### 3. SSR（`no-store`）

```ts
const res = await fetch('https://api.example.com/posts', {
  cache: 'no-store'
});
```

- 毎リクエストで常に新しいデータを取得


## 並行データフェッチ

### 特徴

- 複数のデータソースを同時に取得し、パフォーマンスを向上
- 無駄な待機時間を減らして、レスポンス全体の高速化が可能

### ◼️ 方法① `Promise.all()` による並行取得

```ts
const [posts, users] = await Promise.all([
  fetchPosts(),
  fetchUsers()
]);
```

### ◼️ 方法② コンポーネント分割での並列取得

- Server Component を複数に分け、それぞれが個別にデータ取得
- App Router では自動的に並行フェッチとして最適化される


## ストリーミングデータフェッチ

### 特徴

- データ取得が完了していなくても UI の一部を先に表示可能
- 初期表示を高速化し、ユーザー体験を改善

### ◼️ 方法① `<Suspense />` を使用する（コンポーネント単位）

```tsx
import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>Posts</h1>
      <Suspense fallback={<div>Loading posts...</div>}>
        <Posts />
      </Suspense>
    </div>
  );
}
```

- **任意の位置に適用できる柔軟性**
- コンポーネントごとの遅延表示が可能

### ◼️ 方法② `loading.tsx` を使用する（セグメント単位）

```tsx
// app/posts/loading.tsx
export default function Loading() {
  return <p>Loading posts...</p>;
}
```

- **URL セグメント単位でローディング UI を自動適用**
- `page.tsx` の読み込み中に表示される
- `<Suspense>` と異なり、全体のローディングに使う
Material 3 Expressive入門：トークン設計をざっくり理解する	

## はじめに

Google I/O 2025で発表された「Material 3 Expressive」は、UIの感情的な表現をよりリッチかつ柔軟に実現する新しい設計思想です。  
本記事では、視覚的なデザインの紹介ではなく、**コードとしての「トークン設計」** にフォーカスし、開発者目線でそのポイントを整理します。

## Material 3 Expressiveとは？

Material 3 Expressiveは、Material Designの新たなスタイル体系で、以下のような特徴があります。

- UIの「表情」を表現するための豊富なデザイントークン
- より柔軟なカラーパレットと形状設計
- ユーザーの感情やデバイスに適応するアニメーション指針

## Material 3 Expressiveを使うメリット

- 色や形状をトークン単位で柔軟にカスタマイズできる  
- 感情表現豊かなUIをコードベースで定義しやすい  
- アプリ全体のトーンや雰囲気を一貫して保てる  

とはいえ、Jetpack Composeを使っている開発者にとって重要なのは、**実際にどのようにコードで扱えるのか**という点です。  
以下にその具体例を紹介します。

## 色トークンの基本構造

まずは色指定についてです。  
MaterialThemeから取得できる `colorScheme` がExpressive対応となり、従来よりも感情や意図を反映しやすい色設計が可能になっています。

```kotlin
val colors = MaterialTheme.colorScheme

Text(
  text = "注目要素",
  color = colors.primary
)

Box(
  modifier = Modifier
    .background(colors.surfaceVariant)
)
```

Expressiveでは `surfaceContainerHighest` や `onTertiaryContainer` など、**視覚的な階層や強調度に応じた**色名が拡充されています。

## 形状トークンのカスタマイズ

次に形状（Shape）のトークン設計です。  
角丸や切り欠きなどがあらかじめ定義され、再利用可能な形で提供されています。

```kotlin
val shapes = MaterialTheme.shapes

Card(
  shape = shapes.medium
) {
  Text("感情的なカード！")
}
```

さらに、Material 3 Expressiveでは以下のような表現も可能です。

- `extraSmall` / `extraLarge` などの豊富なサイズバリエーション  
- `roundedRectangle` のような明示的な形状指定  
- `cutCornerTopStart` のような部分的な形状調整  

カスタムも簡単に行えます。

```kotlin
val expressiveShape = RoundedCornerShape(
  topStart = 24.dp,
  bottomEnd = 8.dp
)

Surface(shape = expressiveShape) {
  Text("カスタムシェイプ！")
}
```

## カラーパレットを自作するには？

独自のトーンを持つアプリを開発したい場合は、トークンレベルでカラーパレットを定義することも可能です。

```kotlin
private val expressiveLightColors = lightColorScheme(
  primary = Color(0xFF8E24AA),
  onPrimary = Color.White,
  surfaceContainerHigh = Color(0xFFF8E8F5),
  surfaceContainerHighest = Color(0xFFF3E3F1)
)

MaterialTheme(
  colorScheme = expressiveLightColors,
  typography = Typography(),
  content = { AppContent() }
)
```

このようにカラーパレットをカスタマイズすることで、アプリ全体の雰囲気をより一貫性のあるものにできます。

## 関連リンク

- [Material 3 Design Tokens (official)](https://m3.material.io/)
- [Jetpack Compose Material 3](https://developer.android.com/jetpack/compose/themes/material3)

## おわりに

Material 3 Expressiveは、単なる見た目の刷新にとどまらず、**再利用可能なトークン設計によるUIの表現力向上**を目指す設計思想です。  
トークンを適切に定義し活用することで、UIの一貫性とメンテナンス性を大きく高められます。

UIをデザイナー任せにせず、開発者としても「表情あるUI」づくりに貢献してみてはいかがでしょうか？
個人メモ　sessionとcookieの使い分け

結論、sessionもcookieもユーザーのログイン情報を保持する時に、使用する

・session_idを作成する時、その裏側ではcookieが作成されている

・sessiomは永続的な機能を持っておらず、ブラウザを閉じるとsessiomは消滅する

・永続的にログイン状態を保持したい場合にcookieを使用する
【React初心者メモ】useEffectの使い方

## useEffectとは
useEffectは、副作用（データの取得・DOMの操作・イベントの登録/解除など）を扱うためのフックです。例えば、初期表示時の一度きりの処理、特定の状態が変化するたびに実行する処理、アンマウント時のクリーンアップ処理に役立ちます。

## 基本構文
第二引数である依存配列に渡された要素の変数（state, props）のいずれに変化があった場合のみ、第一引数であるuseEffect()に渡された副作用関数が実行されます。
```
//副作用関数を宣言
const callbackFunction = () => console.log('副作用関数が実行されました！')　

//useEffectの宣言
//第一引数：副作用関数　第二引数：副作用関数の実行タイミングを制御する依存配列
useEffect(callbackFunction, [依存する変数の配列])
```
## その他
### 空の依存配列
第二引数に空の依存配列[]を指定すると、初回レンタリング時のみ副作用関数が実行されます。
```
const callbackFunction = () => console.log('副作用関数が実行されました！')

useEffect(callbackFunction, [])
```

### クリーンアップ関数
副作用関数から返された関数をクリーンアップ関数と言います。
```
const callbackFunction = () => {
  console.log('副作用関数が実行されました！')
  return () => {
    alert('クリーンアップ関数が実行されました！')
  }
}

useEffect(callbackFunction, [])
```
【900本投稿記念】「記事投稿が怖かった」あの日から、少しだけ前に進めた気がするポエム

## 結構、大変だった

いつも読んでいただきありがとうございます！今回は900本目の投稿となりましたので、少し私の感想をまとめていこうと思います。

短い記事となりますが、今思っていることや感じていることを記録として残しておこうと思います。

:::note info
まず最初にここまで投稿を継続できたのには、「**自分自身を変えたかった**」と言う思いが強くあり、それは今でも変わらず。

**※記事投稿はどこまで言っても自分のために投稿しています。**
:::

しかしながら、記事をここまで投稿する上で、心境の変化としていろいろあったので、それを少しだけご紹介しようと思います。

## 自分の書いている記事が不安だった（これは、今も...）

まず最初に1本目の記事を投稿した時は私の書いている内容が正しいのかどうか、本当に世の中の役に立つのかすごく不安でした。

**記念すべき1本目（恥ずかしい）**

https://qiita.com/free-honda/items/487eddf565b4b6b4f330

技術に詳しい方々から「**それは間違っている！！**」と言われるのではないかと、ビクビクしながら投稿していました。

世の中にはたくさんの情報があり、その中には正誤が曖昧なものも存在します。

:::note warn
**自分の技術検証や勉強した内容をインターネット上に公開するのは、本当に勇気が必要でした...。**
:::

この「**怖い**」という気持ちは今でも残っていますが、それでもできる限り正しい情報を届けたいという思いから、技術検証や再現性の高い手順を記事としてまとめるように心がけています。

## 途中から楽しくなった

だいたい200本を超えたあたりから、過去に書いた技術検証と今の学びがつながる瞬間が増え、自分の扱える技術の幅が広がっていくのを実感し始めました。

**結構、頑張った記事**

https://qiita.com/free-honda/items/3929874af4c726696c6e

また、自分で書いた記事が「**技術資産**」となり、どこからでも検索して再現できるようになったことで、知識の再利用がしやすくなったことも大きなモチベーションにつながっています。

この辺のことは、過去の記事で紹介した「**アクティブリコール**」や「**学習方法**」についてまとめた内容も参考にしていただけると思います。

**私の学習方法です（これは今でも変わらず...継続中！！）**

https://qiita.com/free-honda/items/a335a692be29791a5dda

:::note warn
**今では、技術記事を書くことが楽しいと同時に、自分自身と交わした「***できる限り毎日投稿する***」という約束を守るための活動にもなっています。**
:::

最近は少し投稿頻度が減ってきていますが、時間を決めて投稿を継続していきたいと思っています！

## 嬉しかったこと

嬉しかったことのひとつは、自分ではあまり意識していなかった記事がGoogle検索で上位に表示され、「**この記事のおかげでエラーが解決しました！**」といった声をいただいたことです。

また、ITスクールの仲間が直面していたエラーや課題を記事としてまとめてフィードバックしていた時期もあり、その際に「***助かりました！***」と感謝の言葉をもらえたことも大きな励みになりました。

**受講生が Windows のブルースクリーンで困っていた時に書いた記事**

https://qiita.com/free-honda/items/f5b530ea4f101c77c34f

私はアイコンをペンギンに統一しているほどLinuxやオープンソースの思想が好きで、「**自分の身につけた技術をオープンにする**」ことに価値を感じています。

**ペンギンのアイコンについて語っている記事(笑)**

https://qiita.com/free-honda/items/69010ffdb979553394ec

過去にAWSやマニアックな技術を調べたときに情報が少なくて困った経験があるからこそ、「***本当に困っている誰か***」に届けば、それで満足です。


## 直近の目標について

ここまで心境の変化などをまとめてきましたが、直近の目標は「**1000本投稿！！🔥🔥**」です。今年中にあと100本、技術に関する学びや実践を記事として少しずつ積み上げていきたいと思っています。


:::note info
***はじめは「10本投稿しよう」、次に「100本」、「500本」、そして「1000本」と段階的に目標を立ててきました。積み上げた技術は確実に自分の資産となり、いつか自分を助けてくれると信じています。***
:::

ちなみに最近はnoteでも週に1本ほど、ポエムのような文章を投稿しています。もし興味があれば、そちらも読んでみてください...！（何気に頑張ってます！）

https://note.com/hon_hon333
【更新予定】react-hook-formの使い方 備忘録

# registerとController
## [register](https://react-hook-form.com/docs/useform/register)
HTMLタグの`<input/>`と`<select/>`に対してのみ使用する。
昨今のUIライブラリを利用する流れだと、あまりこちらは使わない（気がする）。

```typescript:使用例
import { useForm } from "react-hook-form"

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: "",
      category: "",
    },
  })

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input
        {...register("firstName", { required: true })}
        placeholder="First name"
      />
      
      <select {...register("category")}>
        <option value="A">Category A</option>
        <option value="B">Category B</option>
      </select>

      <input type="submit" />
    </form>
  )
}
```

## [Controller](https://react-hook-form.com/docs/usecontroller/controller)
[Ant Design](https://ant.design/)や[MUI](https://mui.com/)などの外部UIライブラリに対して、使用する場合に使う。
UIライブラリの利用が流行っているので、基本的にはこちらを使う。

```typescript:使用例
import ReactDatePicker from "react-datepicker"
import { useForm, Controller } from "react-hook-form"

type FormValues = {
  ReactDatepicker: string
}

function App() {
  const { handleSubmit, control } = useForm<FormValues>()

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
    
      <Controller
        control={control}
        name="ReactDatepicker"
        render={({ field: { onChange, onBlur, value, ref } }) => (
          <ReactDatePicker
            onChange={onChange} // send value to hook form
            onBlur={onBlur} // notify when input is touched/blur
            selected={value}
          />
        )}
      />

      <input type="submit" />
    </form>
  )
}
```

## 【外伝】 [shadcn/ui](https://www.shadcn.net/ja) を使う場合

`shadcn/ui`で`react-hook-form`を扱う場合、
`react-hook-form`ライブラリのラッパーコンポーネント`<Form>`が提供されています。

```typescript:使用例
const form = useForm()

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>ユーザーネーム</FormLabel>
      <FormControl>
        <Input placeholder="shadcn" {...field} />
      </FormControl>
      <FormDescription>これはあなたの公開表示名です。</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>
```

また、上記を使ってコンポーネント化した例もあるので、併せて確認したい。

https://zenn.dev/masatotezuka/articles/shacn-form-template


# 参考



https://qiita.com/yoshinyan/items/e2252305b9fb83e7cac2
Blenderでミラー反転するとUVはどうなる

## 建物のバリエーションを増やしたかったので一応確認してみました

### まずは単純な構造で試してみます
![Image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1165410/f346ce84-c495-4ee1-8afd-e5021f09dfdc.png)

### シームはこの通り
![Image02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1165410/3d96805b-936d-4bf5-bedc-320e860cc072.png)

### 反転前
![Image04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1165410/7e5a1966-ef2c-4e5d-9c72-6f9443cd8676.png)

### Y軸でミラー反転後（Ctrl+m、y）
![Image05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1165410/fcdb762a-a3da-45cc-8686-05c32d1a4d07.png)

靴下を裏返したように反転していますが、法線の向きはきちんと外側を向いています
なので、やりたかった建物で試してみます

### 反転前
![Image06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1165410/571d6bc6-8faa-4ade-a3bc-2fb6f8b075f9.png)

### Y軸でミラー反転後（Ctrl+m、y）
![Image07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1165410/658ab769-192f-4ffc-9e98-4870532f31b3.png)

このオブジェクトは、UVコピーしている部分もありますが、きちんと反転されているようです
左右を意識しないイメージなら使い回せそうです
.NET Aspireプロジェクトでもdotnet efコマンドが使いたい

.NET AspireでAppHostを起動している状態で、そのままWeb APIプロジェクトに対してdotnet efコマンドを叩こうとすると、当該プロジェクトを既にAppHostがロックしているためエラーになります

```
The process cannot access the file 'xxx.exe' because it is being used by another process. [xxx.csproj]
```

以下の手順を行えば回避が可能です。

# Web APIの停止  
まず、AspireのWeb画面からWeb APIを停止します

# PostgreSQLコンテナの接続情報を調べる
AspireのWeb画面から、コンテナの接続情報を調べます

# Connection Stringの設定
Web APIのProgram.csを書き換えて、AspireからConnectionStringが取れない場合は
手動設定したConnection Stringを参照するようにします

```
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseNpgsql(builder.Configuration.GetConnectionString("xxxxx")
        ?? "Host=localhost;Database=xxxxx;Port=xxxxx;Username=postgres;Password=xxxxx"));
```

# dotnet ef でやりたいことの実行
```
dotnet ef database update --project xxx --startup-project xxx --verbose
```

# Web APIの起動
AspireのWeb画面からWeb APIを起動します

もう少し、スマートな回避方法はないのでしょうか。。
【2週間・50時間】GCP PCAに合格した勉強法



こんにちは。  
今回は、**GCPのProfessional Cloud Architect（PCA）試験に2週間・約50時間で合格**した際の学習法や使用教材、振り返りをまとめます。

![PCA合格書.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4059572/a129abac-f385-4d96-9f2e-d5627f574459.png)



---

##  取得済の資格（学習バックグラウンド）

| 資格 | 備考 |
|------|------|
| 基本情報技術者試験 | IT基礎力 |
| AWS SAA | AWSの基礎〜中級知識 |
| GCP ACE | GCPの基礎レベルの業務設計 |

---

## :punch: PCA合格までに使った教材・勉強法

### 🔹 Udemy模擬試験集（模試4回分）

- セール時に購入
- 日本語訳に違和感がある部分もありますが、「設問タイプに慣れる」「解法の感覚を掴む」には◎
- 本番に近い問題の出方を模擬できるので、復習前提で繰り返し利用しました

### 🔹 CloudLicense

- PCA用の**問題集（約140問）＋模擬試験**が収録
- 特に模擬試験を**平均95％の正答率になるまで反復**
- PCAの試験は「知識暗記」というより**設計判断力とユースケース選定力が問われる**ため、この教材はかなり効果的でした

### 🔹 YouTube（軽く概要把握）

- 「GCP PCA 勉強法」や「PCA 試験対策」などで検索
- 正直、PCA向けの動画は少なく情報量も薄めなので、**最初の掴み・全体像の理解のみに使用**

---

## :writing_hand: 勉強時間とスケジュール感

- **学習期間**：2週間
- **総勉強時間**：約40〜50時間（平日2〜3時間、土日は5〜6時間ほど）

👉 もともとAWS SAAやGCP ACEを取得していたこともあり、PCA特有の設計視点・アーキテクチャ構成の深掘りに集中できました。

---

## ✅ 試験を通じて感じたこと

- PCAは**単なるサービス知識だけでなく、「要件に最適な構成は何か」を選ぶ問題が多い**
- 選択肢が微妙に正しそうに見えるので、「トレードオフの理解」が極めて重要
- 逆に、**しっかり理由まで覚えていれば消去法＋設計思考で突破可能**
- UdemyとCloudlicenseの両方がなければ危なかったと感じた。

---

## :eyes: 次の目標：AWS DVA（Developer Associate）

**理由**：
- 業務で **Lambda / RDS / API Gateway** をよく触るようになったため、設計・実装・運用面をより深く理解したい
- PCAの経験を通じて「単なる操作」ではなく「設計意図」を意識するクセがついたので、その流れでDVAも攻略予定

---

## :thumbsup: おわりに（同じように目指す人へ）

短期間でPCAを目指すのは正直ハードですが、  
-  事前にACEやSAAなどで基礎固め  
-  CloudLicenseで設計観点の定着  
-  模試を通じたアウトプット練習  

これらを繰り返せば、**本番でも十分戦えます**。

もし参考になったら「いいね」やコメントなどもらえると嬉しいです！  
同じくPCAを目指す方の助けになれば幸いです🙏
AivisSpeechを試す。

#  概要

音声合成ソフトで良いものがないかどうか探していたところ、AivisSpeechというものを見つける。

https://aivis-project.com/

2025年5月現在では、利用に関して特に値段もかからないとのことで、実際に利用を試していく。個人的にはページ下のAivisBuilderという、自身の声から合成音声を作る機器が気になるけど、まだ開発中らしい。

## 利用を試す。

まずは、上記の公式ページ内にあるDLをクリックし、自分の利用機器に合うインストーラを選択する。

![スクリーンショット 2025-06-01 16.56.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/b22d3726-a4d9-4b18-a06a-30956e6d5daa.png)

Macでは、信頼できないソフトウェアとされてしまっていた。仕方がないので以下の記事に基づきそのまま実行させた。

https://support.tsukaeru.net/ja-JP/support/solutions/articles/65000169427-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E7%AE%B1%E8%B5%B7%E5%8B%95%E6%99%82%E3%81%AB%E3%80%8C%E6%82%AA%E8%B3%AA%E3%81%AA%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%8B%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%81%9F%E3%82%81%E9%96%8B%E3%81%91%E3%81%BE%E3%81%9B%E3%82%93%E3%80%8D%E3%81%A8%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%EF%BC%88%E5%AF%BE%E8%B1%A1%EF%BC%9Amac%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%EF%BC%89

起動して少し待つと、ライセンス情報に関して同意しろと出るため、同意を行う。また、ソフトウェアの情報収集に関してについても聞かれる。

![スクリーンショット 2025-06-01 17.03.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/4be56c24-31b1-4410-ba50-5875cc06411a.png)


起動させると、以下のような画面になる。

![スクリーンショット 2025-06-01 17.04.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/645744a2-e89b-42dd-a6c4-70447348af13.png)

キャラの横にあるテキストボックスを押すと、設定が表示された。これは`Anneli`というキャラ（モデル）のようだ。また、もろもろパラメータが右に表示されている。

![スクリーンショット 2025-06-01 17.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/55154460-6573-4c20-a851-1e3007374c96.png)

このテキストに音声を入れて、下部にある再生ボタンを押すことで、音声が再生される。

![スクリーンショット 2025-06-01 17.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/344b08b6-c1a6-462c-bb0f-d7282bece546.png)

`+`の部分を押せば新たにテキストボックスを出せる。右横のゴミ箱でテキストボックスを消せる。このあたりは、VOICEBOXと同じなのかもしれない。

![スクリーンショット 2025-06-01 17.16.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/1fb0a92d-6dc3-4e45-bdf6-9355a09479f9.png)



# 他の音声を試したいと思ったら。

以下のAivisHubにて、他の音声モデルをDLすることができる。
試しに聞いてみると、どこかで聞いたことがありそうな音声がちらほら聞こえたりする。

https://hub.aivis-project.com/

![スクリーンショット 2025-06-01 17.14.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288524/7919db44-1292-45d7-a9e1-141f289a5efc.png)


# 参考。
すぐに何かビジネスなどで使うビジョンが見えないけど、これは使いやすい。他にも紹介していた記事があったので念の為記載。

https://note.com/yuki_tech/n/n5bdbbc95b61b#33ed3c89-26f7-42c5-886e-a276d907933f
pkがないモデルインスタンスをModelFormを使って更新する

# 前提
python:3.11
django:5.1


# 問題の概要
* 対象となるモデルクラス（社員モデル）：複合主キー制約を設定している & Primary keyがない
* django側に「更新」であることを気付いてもらうためModelFormにinstanceを渡したいが、社員モデルにprimary keyが設定されていないためエラーになる（通常instanceを渡せばdjangoが「更新」であることを認識してくれてpkのバリデーションを突破できる）
* ModelFormにinstanceを渡さないと、社員モデルの更新時にModelFormのバリデーションで複合主キー制約にひっかかり更新できない

# 実際のコード
```mst_staff.py
class MstStaff(models.Model)
    staff_code = models.CharField()
    section = models.CharField()

    class Meta:
        constraints = [models.UniequeConstraint(fields=['staff_code', 'section'], name='unieque_staff')

```

```form.py
class InputForm(forms.ModelForm):
    staff_code = models.CharField()
    section = models.CharField()

    class Meta:
        model = MstStaff
        fields = '__all__'
```

```views.py
class UpdateView(View):
    def post(self, request):
        form = InputForm(request.POST)

        if form.is_valid():
            # ここでバリデーションを突破できない
            # update処理（省略）
```

# 複合主キー制約に引っかかる直接の原因
full_cleanメソッドの***Model.validate_constraints()*** が呼び出されるため

# 解決策
ModelFormでfull_cleanメソッドをオーバーライドし、一意制約のバリデーションをスキップする
```form.py
class InputForm(forms.ModelForm):
    # ...既存コード
    # 以下を追加
    def full_clean(self):
        self.instance.full_clean = lambda *args, **kqargs: None
        super().full_clean()
```

# 解説
* Model バリデーション (Model.full_clean()) は、フォームバリデーションのステップ内でフォームの clean() メソッドが呼ばれたすぐ直後に実行されます [ModelFormの検証](https://docs.djangoproject.com/ja/5.2/topics/forms/modelforms/#:~:text=%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82-,Model%20%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3,-(Model.full_clean))
* full_cleanメソッドではModel.clean_fields()、Model.clean()、 Model.validate_unique() (validate_unique が True の場合)、そして Model.validate_constraints() (validate_constraints が True の場合) をこの順序で呼び出し、4 つ全てのステージでのエラーを含む message_dict 属性を持つ ValidationError を発生させます。 [full_clean()](https://docs.djangoproject.com/ja/5.2/ref/models/instances/#django.db.models.Model.full_clean:~:text=%5B%E3%82%BD%E3%83%BC%E3%82%B9%5D%C2%B6-,%E3%81%93%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AF,-%E3%80%81Model.clean_fields) 、 [Model.validate_unique()](https://docs.djangoproject.com/ja/5.2/ref/models/instances/#django.db.models.Model.validate_unique:~:text=%5B%E3%82%BD%E3%83%BC%E3%82%B9%5D%C2%B6-,%E3%81%93%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AF,-clean_fields()%20%E3%81%A8)

* その為、ModelFormクラスでfull_cleanメソッドを無効化して、解決しました

# 備考
* モデルクラスにpkをつければいいのでは？と言われると思いますが、システム要件的にそれは出来ず。。
* フォームで複合主キー制約のバリデーションが必要であれば、cleanメソッドを手動で追加すればいいと思います
Ollama をインストールしたからいろいろやってみる （ウェブ検索編）



自宅PCに Ollama をインストールしたので、Cline とか Web 検索とかやってみたいなーという事を考えた結果、めんどくさくなった記録です、

Ollama は公式のインストールスクリプトで WSL2 にインストールしただけです。

# 検索させたら賢くなるの？

手順が公式サイトにあります（あるけど、公式のドキュメントじゃない）が、

https://docs.openwebui.com/tutorials/web-search/searxng/

こちらの記事を参考にさせていただきました。感謝感謝でございます。　

https://qiita.com/RyoWakabayashi/items/95dea2b636039449f585


ベースはそのまま使わせていただきます。

```
git clone https://github.com/RyoWakabayashi/open-webui-container-for-jp.git
cd open-webui-container-for-jp/ollama-on-host
```

docker-compose.yml に以下を追加します。podmanで動かすのですが、私の環境（バージョン？）ではhost-gateway を使えないためWSLで `ip a s eth0` で出てくるアドレスを書いてます。さらに、`RAG_OLLAMA_BASE_URL` と `SEARXNG_QUERY_URL` もこのアドレスに書き換える必要がありました。

```yaml
    environment:
      OLLAMA_BASE_URL: http://172.31.9.137:11434
      WEBUI_AUTH: "False"
```

Ollama は、デフォルトだとlocalhostのみリッスンするので、0.0.0.0にしました。別ターミナルで起動。

```
export OLLAMA_HOST=0.0.0.0:11434
ollama serve
```

Open WebUI を起動します。

```
docker compose up -d
```

ブラウザから localhost:3000 にアクセスします。Open WebUI にアクセスできたら、左下の User をクリックして、設定→管理者設定→ウェブ検索から：

- ウェブ検索を有効化
- 検索エンジンを searxng にセット

この辺りは、環境変数で設定されてるのになぜ有効になっていないのかは不思議なところですが。

使ってみたところ、賢くなるというよりは検索結果を数行にまとめて教えてくれる感じでした。あと、丁寧に聞かないと検索ワードを間違えたりします。例えば「ある魔女が死ぬまでの放送開始日は？」と訪ねてみたところ、まどか☆マギカを一生懸命検索してました。契約してるのか？

ちょっと困ったのは Phi4 で試したら、Ollama側でエラーが発生して無限ループしたことです。エラーは `decode: cannot decode batches with this context (use llama_encode() instead)` でした。モデルを gemma3 にすると回避できました。

他にもエラーはあって、`searx.exceptions.SearxEngineTooManyRequestsException`というのがログに残ってました。

この辺でめんどくさくなってきたので終わりにします。ウェブ検索機能は直接使うよりエージェントでファクトチェックとかさせるときに使いたいかもですね。
Cline×Vibeコーディングで爆速で子供と遊ぶアプリを作る

## やったこと
KDDIアジャイル開発センターさんが技術書店18で出版している
KAG Tech Book— Vol.1 —を参考にやってみました。

本の内容がとても充実していて面白かったので、ぜひご覧になってください。

※手順は本に記載しているので本記事では手順は割愛します。
https://techbookfest.org/product/7YEcq5ZEqMrcn7syzVhcdQ?productVariantID=wF6srZpi5e0UeE47fFgKT6

## 成果物
踏切を上げ下げして、踏切を下げたのち電車が通る簡易的なアプリです。
Vercelにデプロイしました。
https://vibe-coding-test-rust.vercel.app/

※見切れや、電車の重なり等気になる点はありますが、
 Vibeコーディングを試したかったのでよしとします。

githubはこちらです。
https://github.com/iwasan0114/vibe-coding-test

## 感想
### 良かったこと
- 欲しかった機能自体は本に記載されていた手順を参考にほぼ１発で実装できました
- 物が出来上がるまでの時間が早すぎました
- エージェントが頑張って動いてくれているのがリアルタイムにコンソールで見れて愛着がわきました

### 今後努力が必要だと思ったこと
- 生成されたものをレビューする力
- 設計やテストのパターンを知る
- AIに任せる範囲と人が作業する範囲の明確化（全部AIに任せると結構費用かかりそう）

Vibeコーディングをやってみて、AIがメインでアプリやシステムを作る未来が近づいているのだなと感じました！
ただ、生成物をレビューすることやプロンプトへの入力においてエンジニアリング力が必要なのは生成AIを使っても変わらないので、今後もAI君に負けないように頑張りたいなと思いました。

あとは、物作りだけではなく、ビジネスにつなげる発想力を鍛えるのも今後はより大事にしていかないといけないと感じました！！


本記事の内容は筆者個人の調査・見解に基づくものであり、KDDIアジャイル開発センター社とはいかなる関係もございません。また、KDDIアジャイル開発センター社からの依頼や影響を受けたものではなく、第三者として公正な視点で執筆しております。

## 参考
[技術書店18](https://techbookfest.org/ "https://techbookfest.org/")
[KAG Tech Book -Vol1-](https://techbookfest.org/product/7YEcq5ZEqMrcn7syzVhcdQ?productVariantID=wF6srZpi5e0UeE47fFgKT6 "https://techbookfest.org/product/7YEcq5ZEqMrcn7syzVhcdQ?productVariantID=wF6srZpi5e0UeE47fFgKT6")
【ChatGPT】指定した動植物を進化経路を大元からたどるためのPromptです。


　どうも、カーブミラーです。

　今回は、指定した動植物を進化経路を大元からたどるためのPromptです。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はありません。あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　著作権法については
　　こちらを参照するのが
　　　良いのではないかと。

　文化庁レポートをもとにした
　　著作権法についての動画（約20分）
　　　[かいちのAI大学　【警告】ChatGPTの画像生成は危険です...【4o Image Generation】](https://youtu.be/8VLUnG-iyo0?si=rAfjMboqmNqppDGq)
***
　さっそく、【本題】です。

　今回は、
　　指定した動植物を
　　　進化経路を大元からたどる
　　　　ためのPromptです。

　これは生物学を勉強するために
　　使える、かもしれません😅

　たまたま
　　思い付いたことです。

　進化経路というと
　　系統樹の根元から
　　　枝葉までの流れです。

　でも
　　「“人間”の進化経路を教えて」だと
　　　人類史のことしか
　　　　出してくれません。

　そうではなく、
　　系統樹の根元から
　　　出してもらいたい。
***
　こちらがそのPromptです。
　　＊＊＊に動植物名を
　　　入力して送信してください。

```Text:指定動植物の進化経路Prompt
［＊＊＊］という生物種の地球上での系統樹の最初から進化経路を教えてください。

必要ならばWeb検索してください。
文章は最後まで出して。
箇条書きも最後まで出して。
```

　Web検索だからといって
　　完全には信用はできません。
　　　ハルシネーションの可能性は
　　　　どこにでもありますからね😅

　しかし、
　　調査の手掛かりにはなります。

　系統樹をたどっていくのは
　　図が見やすいですが
　　　それを探すのには
　　　　時間が掛かります。

　それならば
　　根元からたどっていけば、
　　　たどり着きやすいでしょう。

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
統計検定1級　2023　統計応用(理工学)　問5　解説

![img20250529_11020527.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/d6baa432-d0eb-4fd0-a8e6-6fce5915047d.jpeg)
![img20250529_11023555.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/30025296-bd2e-4c95-80ce-494cd0d86594.jpeg)
統計検定1級　2023　統計応用(理工学)　問4　解説

![img20250527_14282527.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/f56e66ce-4228-4ba0-adf2-25f6ecc9757e.jpeg)
![img20250527_14285325.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3576811/60d25409-fd18-4ee9-b027-d61b0a8ccae4.jpeg)
kintoneで #CONVERT! エラーが出て、自動計算フィールドが機能しなくなった話

## はじめに
kintoneの自動計算フィールドの値に応じて発火するカスタマイズがエラーで中断。  
単純に0除算エラーかと思いきや、最終的に `#CONVERT!` が原因だったという話です。
めっちゃ初歩オブ初歩な話かもしれませんが、自分の備忘録として。

## 発生状況
- 使用環境：kintone + gusuku Customine
- フィールド構成：文字列フィールド + 数値フィールド + 自動計算
- 現象：保存は可能、しかし計算フィールドが後続のフィールド含め全滅(泣)

## 最初に疑ったこと
- Customineの設定ミス
- 発火タイミング
- 権限やフィールド非表示設定
→ すべて異常なし

## gusuku上での調査：情報ダイアログで値を見てみた
- 正常なフィールドは数値や文字列として値が取得できる
- エラーが出ていたフィールド：
  - 詳細画面では `#CONVERT!`
  - 編集画面では **空白**
  - Customineの情報ダイアログでは **#N/A** ←こいつが悪いっぽい

## どうやらエラーはCustomineではなくkintone側だった
- 計算の内容は文字列に入っていた数値を計算フィールドに入れて他の計算で
数値として使えるようにするというもの
- ところが文字列フィールドに`null` や `"abc"` のような空白や文字列が……
→`#CONVERT!`やらのエラーを返していた

## 対応策
- まずCustomineの情報ダイアログを活用してエラーのフィールドの値を確認
→なんか`#N/A`表示されとるので以下2パターン検証
①kintone側のIF文の条件でフィールドの値が「#N/A」ならばとしてみる
→失敗。エラー解消せず。
②Customine側のif文で自動計算フィールドが`#N/A`ならの条件を追加
→結果、一部エラーの解消(回避？)に成功した模様
　※ただし、"#N/A" はkintone側で直接扱うのがかなり難しいので、  
　　事前に入力チェックで不正値を弾けるならその方が安全そう（´・ω・｀）

## まとめ
- 文字列は何でも受け入れちゃうから計算フィールドと併用すると思わぬ事故が発生する
- 詳細画面では`#CONVERT!`、編集画面では空白、Customineのダイアログでは
`#N/A`として出てくる

## おまけ：#CONVERT!なフィールドを絞り込む方法
- エラーのフィールドは、kintoneの一覧の絞り込み条件では **「空白」** として扱われる
- 手動で修正が必要なレコードを絞り込み可能なのは助かった……

## 次回予告？
エラーのもう一つの対応策を正規表現でエラーチェックでつぶした話を
書けたら書こうと思います。
学習方法・メモの取り方について

:::note warn
あくまでメモの取り方に対する
個人の考えです。ご承知おきください。
:::

# 紙に書く
## 向いている内容
- 自分の頭で覚えるべき内容（試験勉強等）
- 紙媒体からの学習
- 頻繁に更新されない内容
- メモ時間に余裕がない場合

## メリット
### 構成を考えなくていい
デジタルでメモを取ろうとすると、
どうしても書き方を考えてしまう。
整理したり、書き方を考えるのは後でもいい。
とにかく分からない部分を書き出して、
調べたものを書き足していくのには向いている。

その為、人間の頭の中からのアウトプット、インプットに向いている方法。

### 脳の処理工程がシンプル
例えば、紙媒体からデジタルにメモを取る場合、
紙から情報を取得、記憶
↓
情報を分別、処理（入力内容の思考）
↓
デバイスへの入力
↓
入力内容の確認
といった処理が必要。
この内、入力内容の思考とデバイスへの入力、
入力内容の確認を大幅に簡易化できる。

紙への記入は、
頭の中からそのまま出力したものにかなり近い。
確認の手間が省けるし、
出力の際に媒介するものや
目に映る余計なものが少ない程、
脳への負担は少なくなる。

その為、紙媒体からの学習には
やはり紙への記入が向いている。

### 目につきやすい
物理的な媒体である以上、
人間の目につきやすく、
ふとした時に手に取って確認しやすい。

## デメリット
### 整理、訂正の手間
情報の整理、訂正等に
デジタルより手間がかかる。

### 共有の手間
デジタルと比べ
直接的なデータの転送、共有ができない。

### 保管場所の確保
物理的な媒体である以上、
保管場所の確保が必要になる。

# デジタルメモ
## 向いている内容
- メモを見ながら作業すればいい内容
- PC、スマホでの作業内容
- 頻繁に更新が必要な内容
- 一度頭に入れた内容を整理してまとめる場合

## メリット
### 携帯性
データ自体は物理的な容積を持たず、
デバイス間でのデータの共有・転送が容易。

### 可変性
情報の整理・転送・更新・複製が容易。

### 作業するデバイス自体に保存可能
作業するデバイス自体に保存することで
手順確認しながらの作業や、
情報のコピー＆ペーストで効率的に
作業を進められる。

## デメリット
### 作成時の手間
他の方法よりメモ作成時に
考えること、やることが多く、
作業時間がかかる。
では、と。
構成を考えずに書くと情報整理に
他の数倍手間と時間がかかる。
時間に余裕を持って書けるなら
或いは良いかもしれない。

### 目につきにくくなりやすい
保存ディレクトリが深くなると
目につきにくくなるのは当然ながら、
浅いディレクトリに保存するのを繰り返すと
1画面上に表示されるファイルが多くなり、
視認性が悪くなる。
ファイル整理に個々人の工夫が必要。

# 録音・録画
## 向いている内容
- 講義や口頭のみでの説明
- 実験、実習記録

## メリット
### 記録可能な情報の種類
この方法でしか記録できないものがある。
口頭説明や講義、音や動きなど。

## デメリット
### 確認時間
音声データや映像データは
確認に時間がかかる。

### 許諾の手間
特に録画に関しては
必ず相手方に許諾を得る必要がある。

### データ容量
当然ながら、文書データよりも大幅に
容量を取られることを考慮しなければならない。
2次曲線の極座標表示とグラフ化

# はじめに
極座標表示とは、直交座標表示とは異なり半径と動径（角度）で点の情報を示すというものである。2次曲線や幾何学のような世界では重宝される。また、2体問題の場合、天体の運動は一般的に2次曲線で表すことができる。ところで、二次曲線は、極座標で表すと円、楕円、放物線、双曲線を1つの式に表すことができる。
そこで、今回は2次曲線の極座標表示を紹介して、それをプログラムで図示することで、曲線の性質を理解することを試みる。

![二次曲線の極座標表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/fc386af1-2ebd-4d21-a343-17f699375dc5.png)

# 直交座標と極座標の関係性

直交座標と、極座標は三平方の定理と三角関数によって密接に繋がっている。
```math
\begin{equation}
\left\{ \,
    \begin{aligned}
    & x=  r\cos\theta \\
    & y= r\sin\theta \\
    \end{aligned}
\right.
\end{equation}
```

つまり、


```math
\begin{equation}
\left\{ \,
    \begin{aligned}
    & r=\sqrt{x^2+y^2} \\
    & \theta= \tan^{-1}(\frac{y}{x})\\
    \end{aligned}
\right.
\end{equation}
```

上の関係式を上手く使いこなすことで、極座標と直交座標の変換ができる。

# 2次曲線の極座標表示
2次曲線の極座標表示は以下のように表すことができる。

```math
r=\frac{l}{1+\epsilon \cos\theta}
```

ただし、$\epsilon\ge0$は離心率、$l>0$は半長弦と呼ばれる。

離心率によって描く図形の種類が変わる。

具体的には、

$\epsilon=0$のとき、円
$0<\epsilon<1$のとき楕円
$\epsilon=1$のとき放物線
$\epsilon>1$のとき双曲線

を示す。


# プログラム
簡単のため、グラフの描写範囲を$0\le\epsilon\le2$と限定する。

```math
r=\frac{l}{1+\epsilon \cos\theta}
```

を$\epsilon$について解くと以下のようになる。

```math
\epsilon=\frac{\frac{l}{r}-1}{\cos \theta}
```

この式の$r,\theta$に以下の関連式を代入する。

```math
\begin{equation}
\left\{ \,
    \begin{aligned}
    & r=\sqrt{x^2+y^2} \\
    & \theta= \tan^{-1}(\frac{y}{x})\\
    \end{aligned}
\right.
\end{equation}
```

これをプログラムで再現することで、コンター図で2次曲線描写する。

```python epsilon_02.py
import numpy as np
import matplotlib.pyplot as plt
import japanize_matplotlib
import math

L=3
n = 1000
x = np.linspace(-L,L, n)
y= np.linspace(-L,L, n)
X, Y = np.meshgrid(x, y)
Z = np.zeros((n, n))
# 半長弦
l=1.0
for i in range(n):
  for k in range(n):
    r=(X[i][k]**2 + Y[i][k]**2)**0.5
    theta = np.angle(X[i][k]+1j*Y[i][k])
    #離心率
    epsilon=(l/r-1)/(math.cos(theta))
    #描写範囲の制限
    if 2>epsilon > 0:
        Z[i][k] = epsilon
    else:
        Z[i][k] = 0
plt.gca().set_aspect('equal', adjustable='box')
plt.contour(X, Y, Z, cmap='jet')
plt.colorbar(label="epsilon")
plt.xlabel("x")
plt.ylabel("y")
plt.savefig("二次曲線の極座標表示.png")
plt.show()
```
これを実行すると以下のようなコンター図が得られる。

![二次曲線の極座標表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/fc386af1-2ebd-4d21-a343-17f699375dc5.png)

まるで、天体の動きを表しているかのように美しく描写することができた。

# まとめ
今回は、Pythonを用いて、2次曲線を描写することを試みた。具体的には、たった1つの極座標表示の式を用いて、円、楕円、放物線、双曲線を描写することができ、それらの差異が離心率で現れることが分かった。極座標表示は、とっつきにくい分野ではあるが、直交座標表示と三角関数と三平方の定理で繋がっているので、変換方法を押さえておけば理解は深まる。

# 参考文献

https://manabitimes.jp/math/1113
池の周回



Paizaの条件分岐問題を解いて、剰余演算の大事さに気づかされた！
<br>

## 問題概要

京子ちゃんが1周 `N` メートルの円周を、毎ターン `K` メートル進んで `T` ターン後にスタート地点に戻るか判定する。

ポイントは、`T` ターンで進んだ合計距離（`K * T`）が `N` の倍数かどうか！


入力例：

    9 3 3

出力例：

    YES

<br>

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__complex_step6

<br><br><br>


## ❌ NG例
```js
const rl = require('readline').createInterface({input:process.stdin});


rl.once('line', (input) => {
   
   const [N, K, T] = input.split(' ').map(Number);
   
   
   if(N === K * T){
       console.log('YES');
   }
   
   else{
       console.log('NO');
   }


    rl.close();   
    
});
```
👉 「ちょうど1周分の距離」に限定しちゃうミス！

<br><br>

## ✅ OK例
```js
const rl = require('readline').createInterface({input:process.stdin});


rl.once('line', (input) => {
   
   const [N, K, T] = input.split(' ').map(Number);


   // Tターン後の移動距離の合計
   const total = K * T;
  

   // その合計が N の倍数かどうかで判定
   if( total % N === 0){
       console.log('YES');
   }
   
   else{
       console.log('NO');
   }


    rl.close();   
    
});
```
✏️ ポイント
- 各ターン、進む距離は常に `K`。

- Tターン後の合計距離は `K * T`。

- 円周長 `N` で割り切れる（`% N === 0`）と戻る。

- 余りの計算は `%`（剰余演算子）でやる。

👉 合計距離が N の倍数ならスタート地点に戻れると判定できる！

<br><br>

## 📝気づきメモ

- 僕は「`K * T === N`」だけを見て失敗。円周何周でもOKなんだよね。
- 大事なのは「割り切れるか」を剰余演算（`%`）で見ればいい。

<br><br><br>[僕の失敗談(´;ω;｀)と解決法🐈](https://paizabeginner.wordpress.com/2025/06/01/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9a%e6%b1%a0%e3%81%ae%e5%91%a8%e5%9b%9e/)
Smartyを利用する際PHP7以降では Smarty_Compiler.class.php を修正が必要。

Smartyを利用する際PHP7以降では Smarty_Compiler.class.php を下記の様に修正してください。
preg_replace()でのエラーが出ます。

```
        ここからコメントアウト
        /* replace special blocks by "{php}" */
        /*$source_content = preg_replace_callback($search.'e', "'"
                                       . $this->_quote_replace($this->left_delimiter) . 'php'
                                       . "' . str_repeat(\"\n\", substr_count('\\0', \"\n\")) .'"
                                       . $this->_quote_replace($this->right_delimiter)
                                       . "'"
                                       , $source_content);
        */
        ここまで
        下記追加
         $source_content = preg_replace_callback($search
                   , create_function ('$matches', "return '"
                       . $this->_quote_replace($this->left_delimiter) . 'php'
                       . "' . str_repeat(\"\n\", substr_count(\$matches[0], \"\n\")) .'"
                       . $this->_quote_replace($this->right_delimiter)
                       . "';")
                   , $source_content);
        追加ここまで

```
Source Treeでスタッシュができない場合の原因と対処

備忘録

## 事象
Source Treeのファイルステータスタブで変更ソースが存在しているのに、スタッシュボタンが押せない。
変更ソースは”application.css”のみ。
このソースは、Sass実装後に自動生成されたソースだった。

## 分析結果
ターミナルで```git status```コマンドを実行。
```terminal
>git status
On branch show-articles
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/assets/css/application.css

nothing added to commit but untracked files present (use "git add" to track)
```
解読すると、application.cssは未トラック状態ってこと。未トラック状態とは、ファイルが作成してから一度もgitにaddしてない＝gitの管理下に入っていない。よって、addもしくはコミットしないと認識できないということ。

以下ChatGPTより
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3722781/91f70c80-22e7-47dd-9cb4-cfa39b44f113.png)


## 原因
単純に、ファイルを一度もgitにコミットしていなかったから。
スタッシュはgit管理下のファイルしかできない。
今回の場合、Sassで実装しているプロジェクトだから、自動生成されるCSSファイルの管理は不要。

## 対策方法
CSSファイルをGitで認識しない（≒SourceTreeで認識しない）ようにする。
対策方法は別投稿参照。
[自動生成ファイルがSource Treeのファイル差分に出てきてしまう場合の対処法](https://qiita.com/hillii/items/f9af59f3b019f1865527)
JavaScriptのDOM操作：要素取得メソッドの違いと注意点まとめ 

# 初めに
JavaScriptでDOM操作をする上で避けて通れないのが「要素の取得」です。  
しかし、`getElementById` や `querySelector`、`getElementsByClassName` など、似たようなメソッドがたくさんあって混乱してしまいがちです。

本記事では、DOM要素の取得方法について、それぞれの違いや返り値の型、注意点を整理してまとめてみました。

特に、**「返り値の型がHTMLElementではない」** ことに関して、つまずきやすいポイントに触れていきます。

※勉強の備忘をかねているため、間違っている箇所や修正した方がいい箇所等ございましたら、教えていただけると幸いです。

---

## 🎯 この記事でわかること

- DOM要素を取得する主なメソッドの違い
- 各メソッドの返り値とその型
- 実際の使い分け

---

## 📌 主な要素取得メソッドとその違い

| メソッド名 | セレクタ形式 | 返り値の型 | 特徴 |
|------------|--------------|-------------|------|
| `getElementById` | `id名` | `HTMLElement` or `null` | 最も単純。IDは一意 |
| `getElementsByClassName` | `class名` | `HTMLCollection` | 複数要素。ライブコレクション |
| `getElementsByTagName` | `タグ名` | `HTMLCollection` | 同上 |
| `querySelector` | `CSSセレクタ` | `Element` or `null` | 最初の1つを取得 |
| `querySelectorAll` | `CSSセレクタ` | `NodeList` | 全ての一致要素。静的コレクション |

---

## 🔍 返り値の型に要注意！

### `HTMLCollection`と`NodeList`は配列ではない！

たとえば、`getElementsByClassName` や `getElementsByTagName` が返す `HTMLCollection` は**配列のように見えるけど配列ではない**ため、直接 `forEach` などは使えません。

```javascript
const items = document.getElementsByClassName('item');

// ❌ エラーになる
items.forEach(item => {
  console.log(item);
});

// ✅ 正しい方法（配列に変換する）
Array.from(items).forEach(item => {``
  console.log(item);
});
```

---

## :warning: ライブコレクションと静的コレクションの違い
`HTMLCollection`(getelements系)→`ライブコレクション`
`NodeList`(querySelectorAll)→`静的コレクション`

`HTMLCollection`は取得後に条件一致する要素が追加されたり、削除された場合、**自動で値が変更される。** (意図しない挙動になることがあるため、使用する際は注意が必要。)

`NodeList`(`querySelectorAll`で取得した場合)は取得後に条件一致する要素が追加されたり、削除された場合も、**値が変更されない。**


```
const list = document.getElementsByClassName('item');
const nodeList = document.querySelectorAll('.item');

const newDiv = document.createElement('div');
newDiv.className = 'item';
document.body.appendChild(newDiv);

console.log(list.length);     // ✅ 自動で増える
console.log(nodeList.length); // ❌ 増えない
```
メゾットの戻り値の型によって、挙動が若干違うことは頭の隅にとどめておきましょう。

---

## ✅ 使い分けのコツ

| やりたいこと | おすすめメソッド | 理由 |
|--------------|------------------|------|
| 特定のIDの要素を1つ取得したい | `getElementById` | 最もシンプルで高速。IDはHTML上で一意であるべき |
| 最初に一致した要素を柔軟に取得したい | `querySelector` | CSSセレクタで柔軟に指定可能。指定したクラス名に合致した最初の要素を1つ取得できる |
| 複数の要素をまとめて取得してループ処理したい | `querySelectorAll` | `forEach`が使える静的な`NodeList`で扱いやすい |
| クラス名やタグ名で複数要素を取得したい | `getElementsByClassName` / `getElementsByTagName` | ライブコレクションだが、注意して使えばOK。 |

## おわりに
私がjavascriptを学習する中で躓いたDOM操作のメゾットについてまとめてみました。

最後までお読みいただき、ありがとうございました！

## 参考

[MDNリファレンス:Documentオブジェクト](https://developer.mozilla.org/ja/docs/Web/API/Document)
minikubeをインストール

minikubeインストールするのにCPUとメモリーが大事です。
CPU最新、メモリーは最低でも16GBは積んでください。
自分はWSL2メモリー32GBでminikube立ち上げています。(Ubuntu24.04)

```
curl -o minikube -L https://storage.googleapis.com/minikube/releases/v1.34.0/minikube-linux-amd64

sudo install -o root -g root -m 0755 minikube /usr/local/bin/minikube

minikube version

```
dockerをユーザモードできないとダメなので修正

```
sudo groupadd docker
sudo usermod -a -G docker $USER
docker run hello-world
```
でユーザーモードでdocker使えるようにする。

```
minikube start --kubernetes-version=v1.31.4 --nodes 4 --driver docker
```

Done! kubectl is now configured to use "minikube" cluster and
"default" namespace by default

これがでれば成功です。

次回TiDBのインストールです。
💡ラベルエンコーディングとone-hotエンコーディングの使い分け

## はじめに
機械学習では、文字列や色といった「そのままでは数値処理できないデータ」を扱わなければいけない場面があることも多いでしょう。例えば「東京」「大阪」「福岡」などの都市名や「赤」「青」「緑」といった色を表すデータです。

こうしたデータを数値に変換する代表的な方法が以下の2つ。
- ラベルエンコーディング（Label Encoding）
- one-hotエンコーディング（One-Hot Encoding）

この記事では、それぞれの特徴や違い、どう使い分ければいいのかを初心者向けにわかりやすく解説します。

## ラベルエンコーディングとは？
簡単に説明すると、カテゴリごとに**整数ラベル**を割り当てる方法です。

色に対してラベルエンコーディングを行った例は以下の通りです。
```
from sklearn.preprocessing import LabelEncoder

colors = ['赤', '青', '緑', '赤', '青']
le = LabelEncoder()
encoded = le.fit_transform(colors)
print(encoded)  # [0 1 2 0 1]
```

### メリット
- データの次元が増えない
- 実装がシンプルで簡単

### デメリット
- モデルが**順序関係がある**と誤解する可能性がある


## one-hotエンコーディングとは？
簡単に説明すると、ダミー変数を用いたエンコーディング方法です。
色に対してone-hotエンコーディングを行った例は以下の通りです。
```
import pandas as pd

colors = ['赤', '青', '緑', '赤', '青']
df = pd.DataFrame({'color': colors})
one_hot = pd.get_dummies(df, columns=['color'])
print(one_hot)
```

### メリット
- 数値的な順序を持たないため、モデルが誤解しにくい

### デメリット
- カテゴリが多いと**次元（列数）が爆発的に増える**


## どう使い分ければいいのか
原則の使い分け

カテゴリに順序があるかどうかで使い分けるのが基本です。

| 条件                             | 適した手法               |
|----------------------------------|----------------------------|
| カテゴリに意味のある順序がある | ラベルエンコーディング   |
| カテゴリに順序がない             | One-Hotエンコーディング |


具体例

「評価（低・中・高）」のように意味のある順序 → ラベルエンコーディング

「色（赤・青・緑）」のように順序がない → one-hotエンコーディング


モデルごとの相性

モデルによって、どちらのエンコーディングが適しているかが異なります。

| モデル                           | 推奨される手法           | 補足                                   |
|----------------------------------|----------------------------|----------------------------------------|
| 決定木 / ランダムフォレスト     | ラベルでもOK             | 木構造は順序を誤解しにくい            |
| 線形回帰 / ロジスティック回帰   | One-Hot推奨              | 数値の大小が意味を持ってしまうため注意 |
| ニューラルネットワーク           | One-HotまたはEmbedding   | カテゴリ数やデータ量に応じて選択     |


## まとめ
カテゴリデータを前処理するときは、以下の2点を意識すると良いでしょう！
- このカテゴリに順序はあるのか？
- どのモデルを使う予定か？

この2点を押さえることで、モデルの精度や学習効率を大きく左右する前処理を、より適切に行うことができます。

この記事が、エンコーディング手法の選択に迷ったときの参考になれば嬉しいです！
server componetでnext-safe-actionを使ってみる

今回は、Next.jsのServer Component（app directory構成）で`next-safe-action`を使う実験をしてみました。

最近のNext.jsではServer Actionsが注目されていますが、Server Componentから直接`next-safe-action`を呼び出して、型安全な共通処理として使えるかどうか検証してみました。

## サンプルプロジェクト

* GitHubリポジトリ: [https://github.com/gosutesu/sample-next-safe-action](https://github.com/gosutesu/sample-next-safe-action)

特に`src/app/test/[name]/page-server-component.ts`で試しています。


## next-safe-actionとは？

`next-safe-action`は、Server Actionsを型安全かつ共通化して扱えるライブラリです。
zodと組み合わせてスキーマバリデーションを行い、Server ComponentやClient Componentから同一のインターフェースで呼び出すことができます。

公式リポジトリ: [https://github.com/TheEdoRan/next-safe-action](https://github.com/TheEdoRan/next-safe-action)


## Server Componentでの使い方

今回のサンプルでは、パラメータを受け取ってサーバーサイドで処理を行い、その結果をServer Componentで利用するというシンプルな構成です。

例えば、下記のように`src/app/test/[name]/page-server-component.ts`でActionを定義しました。

```typescript:src/app/test/[name]/page-server-component.ts
"use server";

import { actionClient } from "@/client/safe-client";
import { z } from "zod";

const Input = z.object({
  name: z.string().min(1, "Name is required"),
});

export type InputType = z.infer<typeof Input>;

export const testServerAction = actionClient
  .schema(Input)
  .action(async ({ parsedInput }) => {
    return { message: `Hello, ${parsedInput.name}` };
  });
```

Server Componentからの呼び出し例（`src/app/test/[name]/page-server-component.ts`）:

```tsx:src/app/test/[name]/page.tsx
import { testServerAction } from "./page-server-component";

type PageProps = {
  params: {
    name: string;
  };
};

export const Page = async ({params} : PageProps) => { 
  const sentence = await testServerAction({name: params.name});

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl font-bold mb-4">Test Page</h1>
      <p className="text-lg">This is a test page.</p>
        <p className="text-lg mt-4">{sentence?.data?.message}</p>
    </div>
  );
}
export default Page;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325856/98d1503f-bb46-4f4b-b990-7c9f39c17b80.png)


このように、Server Componentから直接Actionを呼び出し、バリデーションや型安全性を確保しつつ、共通化されたサーバーサイド処理を呼べることが分かりました。


## まとめ

### 所管
* Server Componentから`next-safe-action`を直接呼び出し、共通処理を安全に実行できることを確認しました。
* 画面描画時と画面操作時のサーバー側の処理の共通化の何かヒントになるかも？
* DB接続エラー処理とかまとめて書けそう
* アプリ側のアクセスログとかまとめてかけていいかんじ

### 課題
- 予期せぬサーバーサイドのエラーが起きた時って、画面描画時と画面操作時で同じでもいい？（アプリの要件次第かも）
- 処理が呼び出させる順番ってどうなっているんだろう
- 15系でのキャッシュとの関連ってどうなっているんだろう
- 予想通りの動きはしているが本当にできている？？


ここら辺の課題を解決していって今後のプロジェクトの改善をしていきたいなぁと思っている次第です

もし興味があればぜひ[サンプルプロジェクト](https://github.com/gosutesu/sample-next-safe-action)を試してみてください！
AWS-CLIでSSOログイン

# はじめに
AWSを個人で使い始め、約半年。半年前は毎日いろいろいじっていたけど、最近はご無沙汰。
なんでだろう。と思ったけど、要因の１つにログインがめんどくさいな。って思ったところ。

そこで、AWS-CLIだったらもう少し楽にログインできないかな？と思って、久々にAWSの世界にダイブ。
また直ぐに忘れるので、残します

# 前提
ユーザは「IAM Identity Center」で作成したのを使う。

https://qiita.com/tarosuke777000/items/7d67ca10194fcc4cd03e

# 初回設定
```
aws configure sso
```
```
$ aws configure sso
SSO session name (Recommended): なんでも ※１
SSO start URL [None]: 「IAM Identity Center」の「AWS access portal URL」※２
SSO region [None]: 「IAM Identity Center」のリージョン
SSO registration scopes [sso:account:access]:デフォルトママ
```
※１ 最初は「IAM Identity Center」で作ったユーザ名を指定していたけど、任意の文字列でも大丈夫だった。最終的には管理しやすい任意の文字列にした。
※２ 「IAM Identity Center」の「アイデンティティソース」の「AWS access portal URL」

で、あとは流れのままに。

プロファイル名を「default」で登録しておくと後が便利かも。

作成された情報は、「.aws/config」に格納されている感じ。
なので、あとから名称等を変更したい場合は直接編集しても大丈夫そう。

# そのあとの使い方
aws コマンド実行時に「--profile」を指定する。
※ default で作っておけば指定不要。

```
 --profile プロファイル名
```

# 初回設定後のログイン処理
```
aws sso login --profile プロファイル名
```
ブラウザが自動で立ち上がるので、「IAM Identity Center」で作ったユーザ名/パスワード等を使い、ログインする。

# ちょっと試す
```
aws s3 ls --profile プロファイル名
```
# 使い終わったら、ログアウト
```
aws sso logout --profile プロファイル名
```