OmniAICreator/Qiita-1.07M huggingface dataset:
GitHub上で異なるブランチ／コミットのコードを比較する方法

# はじめに

GitHubでプルリクを作成する時にコードを比較する画面（ブランチ比較ビュー）が表示されますが、このように差分が見やすい画面で表示される方法を備忘録としてまとめてみました。

# ブランチの比較

* `/compare/`の後に、比較するブランチ名を`...`で区切って入れることでブランチの比較ビューを表示できます。

```
https://github.com/{GitHubアカウント名}/{リポジトリ名}/compare/{ブランチAの名称}...{ブランチBの名称}
```

* ベースリポジトリとフォークしたリポジトリ（＝別アカウントのリポジトリ）のブランチを比較する場合は、`{アカウント名}:{ブランチの名称}`の形式でブランチを指定します。
  * 例えば、`https://github.com/getify/You-Dont-Know-JS/compare/2nd-ed...THIS-IS-NOT-A-BACKUP:2nd-ed`のような形になります。

```
https://github.com/{GitHubアカウント名}/{リポジトリ名}/compare/{ブランチAの名称}...{アカウント名}:{ブランチBの名称}
```

# コミットの比較

* 同一ブランチの異なるコミットを比較する時は、`/compare/`の後に、比較するコミットIDを`..`で区切って入れることで比較できます。
  * ブランチの比較時は`...`で区切りましたが、コミットの場合は`..`で区切る点に注意が必要です。

```
// ブランチAのコミットID(1)とコミットID(2)の比較
https://github.com/{GitHubアカウント名}/{リポジトリ名}/compare/{コミットID(1)}..{コミットID(2)}
```

* 同一ブランチ内で「〇個前のコミット」と比較する時は、`/compare/`の後に、比較するコミットIDを`..`で区切って入れた後、「〇個前」の〇の数だけ「^」を付けることで比較できます。

```
// ブランチAのコミットID(1)と、コミットID(1)の1つ前のコミットの比較
https://github.com/{GitHubアカウント名}/{リポジトリ名}/compare/{コミットID(1)}..{コミットID(2)}^


// ブランチAのコミットID(1)と、コミットID(1)の3つ前のコミットの比較
https://github.com/{GitHubアカウント名}/{リポジトリ名}/compare/{コミットID(1)}..{コミットID(2)}^^^
```

* 「〇個前のコミット」は、以下のように`~N`で表現することも可能です。

```
// ブランチAのコミットID(1)と、コミットID(1)の3つ前のコミットの比較
https://github.com/{GitHubアカウント名}/{リポジトリ名}/compare/{コミットID(1)}..{コミットID(2)}~3
```

# まとめ

* 一番単純な「ブランチの比較」を覚えているだけでも、かなり役に立つと思います。
* コミットの比較については、「最新のコミット」と「最新からN個前のコミット」の比較は使うことがありそうだと感じました。
  * 過去のコミット同士で比較することは余りなさそうなので、私の使い方だと「最新 vs N個前のコミット」に限られそうです。

# 参考URL

* [コミットを比較する - GitHub Docs](https://docs.github.com/ja/pull-requests/committing-changes-to-your-project/viewing-and-comparing-commits/comparing-commits)
* [Githubでブランチ間の差分を見る簡単な方法](https://qiita.com/tokkun_ride/items/4628570be3e00bfd7717)
Vibe Codingの集大成と実践成果 - AIと共創したプロジェクト事例

## 🚀 Vibe Codingの成果：AI見積もり支援ツールを公開

これまでの記事で紹介してきた「Vibe Coding」という開発手法。
アイデアの整理から、プロンプト設計、設計レビュー、コード生成、改善のフィードバックまでをAIと共に行うワークフローです。

この一連のプロセスから生まれたのが、以下のプロダクトです。システム開発見積もり作業が多い方ぜひご参考ください。

👉 **[estimate.haposoft.com](https://estimate.haposoft.com)**

> ソフトウェア開発見積もりを、AIがサポート。
> 要件定義を書くだけで、構成図・Backend開発・Frontend開発・チーム構成・工数を自動算出。

👉　**スクリーンショット**

![Screenshot 2025-06-10 at 22.15.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086206/7ffebb95-7d84-4730-9e49-0e50315850b1.png)
![Screenshot 2025-06-10 at 22.15.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086206/e4364c0b-742a-4b36-8ebd-16101013a5de.png)


---

## ✅ 成果と実感した効果

### 1. プロトタイピングの爆速化

AIと協業することで、

* 「こういうツール作ってみたい」→ 実装の草案までが**数時間で完了**
* 「社内翻訳ツールが欲しい」→ **バイリンガルファイル変換ツール**をその日のうちに完成

アイデアが即形になるスピード感は、従来の開発では考えられないものでした。

---

### 2. SIer・受託開発における効率化

私は普段、オフショア開発の見積もり支援も行っていますが、

* 要件を日本語で読み解く
* ユースケースに分解
* 各画面・API・DB設計に分けてタスク整理
* スケジュール・体制案を立案

これらは非常に工数のかかる作業でした。

しかし、現在は、AIがこのプロセスを80%自動化。

* **構成図の自動生成**
* **役割ごとのタスク洗い出し**
* **ベロシティや体制の仮定によるスケジューリング**

従来かかっていた**数日間の見積もり業務が、半日以下に短縮**されました。

---

## 💡 おわりに：Vibe Codingは業務設計の新しい形

AIは「プログラミング支援」だけにとどまりません。

* 仕様策定
* 工数見積もり
* UI/UX検討
* テストケース設計

こうした“Thinking”そのものをAIと共有することで、チームの思考速度は飛躍的に向上します。

Vibe Codingとは、**人間が持つ業務知識 × AIの生成能力** を融合させる新しい開発スタイル。

これからもこの手法を進化させながら、いろんなプロダクトを創っていきたいと思います。
Object.freezeで再描画を防ぐ

今更ですが、Oject.freeze()を使用することで再描画を防ぐテクニックがあることを知ったのでメモします。
（Vueを想定したコードにしています）

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

```vuejs: 例
<template>
  <div>
    <p>名前: {{ human.name }}</p>
    <button @click="changeName">名前を変更？</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const human = ref(Object.freeze({
  name: '田中太郎',
  age: 25
}));

const changeName() {
  human.name = '田中次郎'; // ここでTypeError: Cannot assign to read only property 'name' of objectが発生
}
</script>
```

Object.freezze()で囲んだオブジェクトは凍結されます。
凍結されたオブジェクトは、プロパティの上書きや追加、削除をすることができなくなります。

Object.freeze()を使用したオブジェクトのプロパティの値を変更しようとした場合、TypeErrorが発生するようになります。
(ただ、MDNに以下の一文があったので、エラーが出ない（静かな）場合もある？)

>これを行おうとすると、静かに、あるいは TypeError 例外が発生し、失敗します（厳格モードの場合によく発生しますが、これに限ったことではありません）。


**値を固定することで、その値を使用している要素の再描画を防ぐ** わけですね。
例では小さいオブジェクトでしたが、実際はもっと大きなオブジェクトを固定しておくことが多いと思います。

>これに対する唯一の例外は、既存のプロパティの変更を防ぐ Object.freeze（）の使用です。これはリアクティブシステムが変更を 追跡 することができないことも意味します。

引用元：https://v2.ja.vuejs.org/v2/guide/instance

Vue2公式でも、このObject.freeze()によってリアクティブな追跡を防ぐ方法が紹介されていました。
ただ、Vue3が標準となった今はもっと良い書き方がありそうです。

こちらの記事では、Vue3のリアクティビティーAPIのshallowRef, trrigerRef, effectScopeが紹介されていました（掲載してくださった方ありがとうございます）。
https://speakerdeck.com/hal_spidernight/vue3no-bu-ta-miip-ndapahuomansutiyuningu2024?slide=17

それぞれ、
- ref()の浅いバージョンであるshallowRef
- shallowRefを強制発火させるtriggerRef
- watchやcomputedを監視して、一括で廃棄することもできるeffectScope

といった機能のようです。
こちらの方がObject.freeze()より柔軟に対応できそうなので、Vue3においてはリアクティビティーAPIを使用するのが今風の書き方なのかもしれませんね。

https://ja.vuejs.org/api/reactivity-advanced
ポケモンと一緒に開発(vscode-pokemon)



# vscode-pokemon とは？

vscode-pokemonとはポケモンをvscodeの画面内にスポーンさせて歩かせることのできる夢のような拡張機能です。

![スクリーンショット 2025-06-10 23.34.26.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4108044/9efcced8-0115-4978-b3d3-da49b15398fd.jpeg)


2025年6月現在、第一世代と第二世代の合計400匹の種類のポケモンをスポーンさせることができます。


## 拡張機能のインストールと使い方

VSCodeのExtensionsでvscode-pokemonと検索しましょう。



次のようなバナーが出ると思うので、+でポケモンを追加できます！
![スクリーンショット 2025-06-10 23.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4108044/f6d7e3e4-599d-4b34-95cf-1a2d23c268d1.png)

2025年6月現在、第二世代までのポケモンが追加されています。shift+command+pでコマンドパレットを開き、remove all pokemon を選択すれば全てのポケモンを消せます。


##  背景や大きさの変更
settingでpokemonと検索してThemeから背景を変えることができます。またポケモンの大きさも変えることができます。
![スクリーンショット 2025-06-10 23.48.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4108044/d32f3f83-4c04-4d63-bead-bb7a0fc44656.png)


##  これから追加されるであろう機能(第３世代,色違い,・・・)
この拡張機能のjakobhoeg氏によれば、**第三世代**ももうすぐ登場させるとのことです。楽しみですね。

またGit hubのIssuesにおいて一定確率で**色違い**のポケモンを出現させるという提案に対して
「I'll definitely aim to add this in a future release,thank you :) (今後のリリースで追加することを計画します。ありがとう)」とコメントしています。色違いが追加されるVSCodeで**ポケモン厳選**が可能になるかもしれません。






## 参考

https://github.com/jakobhoeg/vscode-pokemon
スクリプト改修の注意点

もうちょっとで脱初心者できそうな素人です。
今日はスクリプトの改修をやったので、振り返りを書きます。

# まずは指示書をよく理解する
しっかりと読み、疑問点があればすぐに上司に聞きます。
解釈が複数に分かれるようなところは、どちらの意味か確認します。

# ディレクトリにまとめておく
開発環境にもよりますが、編集するファイルをフォルダにまとめます。
自分のところはクラウドからローカルに落として編集という感じです。
バックアップフォルダ置いておくと素早くやり直しが聞くので、
フォルダ作ってコピーを入れておくとよいです。
ノーコード開発で一部だけスクリプトが必要な場合は、コピーしておきます。

# 改修箇所の洗い出し
何をどう編集するか、エクセルにすべて洗い出します。
これだけで成果物になるので仕事している感じが出ます。

# 成果物を急ぐ
作業が複数のファイルに及ぶこともありますが、簡単なものは先に仕上げて、納品物のフォルダを作って入れておきましょう。
上司に進捗報告求められた時、どこまで完成しているか言いやすいですし、手伝ってもらいやすいです。

# 設計をする
案件にも寄りますが、単に指示書通りに作業すればいいとも限りません。問題の洗い出しや、設計が十分でないこともあります。やっていく中で問題が出てきて、こういう改修をすればこうなる、という提案（相談）を上司にしないといけない場面があります。。
思いのほか改修する場所が広く、触ったことのない部分を仕上げないといけないとき、上司に聞かないとわからないこともあります。
新人には頭の痛い問題ですが、全体像を見通して、必死こいてやるしかないです

# ゲームのように楽しむ
メンタルの持ち方ですが、自分は対戦ゲーやってる感覚で仕事しています。
いい感じの時もあれば、眠い時・イライラする時などありますが、淡々とキャラクターを操作して、勝率のあがるムーブを続けていくだけです。
プログラミングはとても楽しいですが、あまり拘りすぎないほうが仕事としては続けられる気がします。

# 振り返りをどこかに書いておく。
上司は顧客との打ち合わせからプログラミングまでをこなすスーパーマンです。部下の面倒を見ている暇はありません。できることなら何でも上司と喋りたいところですが現実は許してくれません。こうやって書かないと何も成長できない気がしているので、アウトプットしています。

以上です。
明日も頑張ります。
【React Router】App.jsx(tsx)をルートに設定すると全ページにAppコンポーネントが反映されてしまう

## はじめに
今までのアプリ作成ではルートディレクトリのコードは`App.tsx(jsx)`コンポーネントに記載していました。
ですが、React Routerでルーティングを行った際に同様の方法でコードを記述したところ、全てのページに`App.tsx`のコンポーネント内容が反映されていました。

## 原因のコード
```react:App.tsx
import "./App.css";
import { BrowserRouter } from "react-router";
import { Router } from "./routing/Router";
import { Button } from "@chakra-ui/react";

export default function App() {
  return (
    <>
      <BrowserRouter>
        <Button>サンプル</Button>
        <Router />
      </BrowserRouter>
    </>
  );
}
```
上記で配置したButtonコンポーネントがルーティング先のコンポーネントでも表示されてしまっていました。

## 対処法
Home画面のようにルートパスに適用したいコンポーネントは`<App>`ではなく**ホーム画面用のコンポーネントを別途用意**する。
具体的には`<Home>`コンポーネントなど。

また、ルーティングするためのコンポーネント内で上記で設定した`<Home>`コンポーネントをルートパスに設定する。

```react:Home.tsx
import { Button } from "@chakra-ui/react";

export default function Home() {
  return (
    <>
        <Button>サンプル</Button>
    </>
  );
}
```

```react:Router.tsx
import { Route, Routes } from "react-router";
import { Register } from "../register";
import { Home } from "../Home";

export function Router() {
  return (
    <>
      <Routes>
        {/* Homeコンポーネントをルートディレクトリに設定 */}
        <Route path="/" element={<Home />} /> 
        <Route path="/cards" element={<Cards />} />
        <Route path="/cards/register" element={<Register />} />
        <Route path="/cards/:id" element={<IdPage />} />
      </Routes>
    </>
  );
}
```
上記のようにルーティングを設定することでホームディレクトリに特定のコンポーネントのみを表示できる。

## 最後に
ルーティングの基礎が理解できておらずかなり初歩の部分で詰まってしまいました...
皆さんは同じようにハマった際は上記のことを意識してすぐに対処してみてください。


## 参考資料

https://v5.reactrouter.com/web/api/BrowserRouter

https://zenn.dev/minntoko/articles/39d89c32cb0262
UVではできないこと

# UV
pythonのバージョン管理、および、pythonの仮装環境を構築することができるuvだが、いくつか欠点が見つかってきているため、共有する。

なお、今後も追記、修正していく予定。

# python2.XX系を利用できない
LLMやtorch,を用いたAIの開発、利用に関しては問題にはならないが、python2.x系を使用することができない。
過去のpython2系コードを利用する際に課題となる。
pyenvを利用することで回避することが可能。

# $ \beta $版である
uvのバージョンは日々細かくアップデートされていることが確認できる一方で、いまだに0.xxのバージョンである。
これは、ベータ版つまり試験版を意味する。開発において、環境構築の手戻りは避けるべき項目である。

# knowledge不足
当方の記事も多々参照され、ブックマークされている。正直、それほど多くの内容を記述しているわけではない。おそらく、他の情報が不足していることが要因であると考える。
knowledgeが不足しているため、不具合に遭遇した際に、解決策の発見に要する時間が長期化することが想定される。
先に述べた、$\beta$である点にも共通するが、実戦の開発に使用するには時期尚早であると言わざるを得ない。
【Rails】JavaScriptについて

# 記事概要
Ruby on RailsのJavaScriptについて、まとめる

# 前提
- Ruby on Railsでアプリケーションを作成している

# JavaScriptとは
https://qiita.com/likapantrip/items/eb0608e313c179fdc1d2

# 仕組み
## ImportMap
JavaScriptのファイルを読み込む仕組み

# 手順(ファイル作成)
1. `app/javascript`フォルダに、`[ファイル名].js`を手動作成する
1. `config/importmap.rb`を編集し、ファイルをインポート可能にする
    ```config/importmap.rb
    # 最終行に追記
    pin "[インポート名]", to: "[ファイル名].js"
    
    # memo.jsファイルをmemoとしてインポート可能にする
    pin "memo", to: "memo.js"
    ```
1. `app/javascript/application.js`を編集し、読み込んだファイルをアプリケーションで動作させられるように、設定を追加する
    ```app/javascript/application.js
    # 最終行に追記
    import "[2.で指定したインポート名]"
    
    # 上記で指定したインポート名で、インポートを行う
    import "memo"
    ```
1. 1.で作成したファイルが正常に読み込まれているかを確認する
    ```javascript
    function check (){
      console.log("jsファイルの読み込み完了")
    };
    
    window.addEventListener('turbo:load', check);
    window.addEventListener("turbo:render", check);
    ```

## 手順(ファイルの読み込み)
ファイルが保存されている場合でも、アプリにJavaScriptが読み込まれない場合がある
下記を実行すると正常に処理される可能性がある

1. ターミナル.appで下記を実行
    ```
    # アプリのディレクトリにいることを確認
    % pwd
    /~/[アプリ名]
    
    % rails assets:precompile
    % bin/importmap
    
    # 念の為サーバーも再起動し、ブラウザ画面で挙動を確認
    % rails s
    
    # 画面をリフレッシュした後、動作確認を行う
    ```

# Ruby on Railsまとめ
https://qiita.com/likapantrip/items/46b43c9d1309b6633f0a
html link　img

私がHTMLを学び始めたとき、まず画像のリンクと同じページ内のリンクについて学びました。画像リンクでは、画像をクリックすると他のページや外部のサイトに移動できるようにする方法を習得しました。たとえば、<a>タグの中に<img>タグを入れることで、画像をリンクとして使えることを知りました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content width="device-width,initial" scale="1.0" />
    <meta http-equiv="x-ua" -content-device compatible="ie-edge" />
    <title>Neews page</title>
  </head>
  <body>
    <h1>WELCOME TO MY WEBSITE</h1>
    <p>I m a cat lover</p>

    <a href="About.html"> <img src="./Image/cat.png" /></a>
    <hr>

    <a href="Contact.html">Contact</a>
  </body>
</html>
M1 MacBook Airのアップグレードが失敗し続けた原因は「システム日時のズレ」だった話（Error 1012）

# M1 MacBook Airのアップグレードが失敗し続けた原因は「システム日時のズレ」だった話（Error 1012）

## はじめに

macOSをアップグレードしようとした際、M1 MacBook Airで何度試してもアップグレードできず、様々な手段を試した結果、原因はシステムの日時ズレだったという話です。

この投稿では、自分がどのような手順で原因にたどり着いたかを記録しておきます。  
同じようにハマった方の助けになれば幸いです。

## 試してもダメだったこと

macOSのアップグレード（Ventura → Sequoia）を行おうとしましたが、以下の方法をいくつも試したもののすべて失敗しました。

システム設定からのソフトウェアアップデートはボタンが表示されているのにかかわらず、ダウンロードが即失敗。
App Storeからのインストール、ダウンロードで即止まってしまいました。  
セーフモードで再起動して試しても結果は変わらず、First Aidを実行しても「問題なし」
逆にセーフモードにするとシステム設定からアップデートが取得できません。ネットワークを確認してくださいと言われる始末。ネットつながってるのに
さらに、ターミナルからのアップグレードも試しましたが、エラーで止まりました。

この時点ではハードウェア容量もストレージも問題がなく、何が原因か全く分からない状態でした。

## 転機：エラー1012

手がかりになったのは、ターミナルでアップデートの一覧
```
softwareupdate -l
```
を確認した際に表示された「エラー1012」というコードでした。

このエラーについて調べてみると、証明書関連の問題や信頼性検証の失敗が原因で発生することがあると分かりました。  
この情報がきっかけで、ようやく問題の本質に近づくことができました。

## 真の原因：日時のズレ

現在の日時を確認したところ、システム時刻が大きくズレていることが分かりました。

このズレによって、macOSのインストーラが持つ署名や証明書の有効期限と合わなくなり、結果的に信頼性の検証に失敗してアップグレードできなくなっていたと推測しました。

## 解決と教訓

日時を正しく設定し直したところ、問題は解消され、無事アップグレードが完了しました。

この経験から得た教訓として、macOSのアップグレードで謎のエラーが出る場合、特にリカバリーモードから操作している際には、システムの日時も疑うべきだと学びました。

エラーコード1012が表示されたら、それは日時や証明書の検証に関する問題を示しているかもしれません。  
First Aidや再起動では解決しないときは、ログと日時を確認するのが突破口になることもあります。

## おわりに

自分の場合は、偶然表示されたエラーコードがヒントとなり、時計のズレにたどり着くことができました。

まさかそんな無関係ぽい部分が原因で、ここまで時間を無駄にするとは思っていませんでしたが、もし同じようにアップグレードでハマっている方がいたら、まず「時計」を確認してみてください。
【日記】Amazon Q CLIでゲームを作ってみる

Amazon Q CLIを導入し、ゲームを作ってみました。

# 経緯
もともと、[ゲームを作ろうキャンペーン](https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/)を見かけてやってみよう！と思っていたところに、[JAWS-UG横浜](https://jawsug-yokohama.connpass.com/event/355243/)でのイベント開催告知が届きまして。
折角だからここに参加しながら作りますか、という形ですね。

# 事前準備
[AWSの公式ドキュメント](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html)に従い、Amazon Q CLIをインストールします。

以下、自分の利用している端末はChromebookなので、まず[Googleの公式ドキュメント](https://support.google.com/chromebook/answer/9145439?hl=ja)でLinux環境をオンにします。

![Screenshot 2025-06-09 13.35.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103666/1da090f7-0ccd-452e-bb24-3b05c8b96cd6.png)

こちらのセットアップが終わり次第、GUIのないLinux環境なので、[zipファイルでのインストール手順](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing-ssh-setup-autocomplete.html)を実施します。

:::note warn
LinuxのCPUアーキテクチャの確認をしよう
:::

シンプルに自分が知らなかった＆新しいPC環境ということで詰まったのですが、以下のコマンドで確認してから該当バージョンに合わせたものを選びましょう。
```ruby:bash
uname -m
```
また、glibcのバージョンは以下コマンドで確認することができます。
```ruby:bash
ldd --version
```
![Screenshot 2025-06-10 22.19.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103666/af7413f5-46ce-4025-a397-bd6258509cd7.png)

無事インストール＆起動まで実施すると、ライセンスについて問われるので、今回はFreePlan(BuildersID)を選択。
ブラウザが起動するので、そこで認証を行います。
![Screenshot 2025-06-10 22.23.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103666/cfd4ce0e-08e8-492c-9ab6-3c8654f8ccef.png)
無事Amazon Qの文字が出て一安心。

:::note info
直近のアップデートでモデル選択もできるようになったようです。
:::

# いざ、ゲーム作り
入力したのは「倉庫番ゲームを作りたい」＋倉庫番ゲームの簡単なルール説明です。

![Screenshot 2025-06-09 19.39.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103666/8a4c3a27-138a-4f49-b8f9-cc83f9e1e42b.png)
pythonで作ってくれました。

加えて、「倉庫番ゲームをhtml,css,javascriptで作りたい」で指示を出しました。
![Screenshot 2025-06-10 22.51.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4103666/6e6d69ad-9f20-415d-96d4-8f702b52202e.png)

どちらも、wasdあるいは十字キーでプレイヤーを動かし、箱を動かして指定の場所に乗せるゲームが作成できました！！
…とは言うものの、見ての通りクリアできないステージが作成されたりしているので、適宜指示を出して訂正しているところです。

# やってみて思ったこと
日本語で指示出ししてすぐにコードが生成されること、まだまだ慣れませんが使いこなしていきたいですね。
今回はゲーム作成のキャンペーンという形で作成しましたが、今後はアプリなども作成して習熟していければと思います。
Power AutomateでSharePointリストの項目更新を実現

 # 概要
 掲題の件、Googleで検索しましたが、分かりやすいサンプルが見つかりませんでした。
  (Webページにコマーシャルの多さにびっくりしました。)

# 設計
（１）トリガー：メール受信
（２）目的：SharePointの既存リストの既存行のある列の値を更新する。
想定応用パターン：プロジェクト進捗管理みたいな項目が決まっていて、完了・未完了だけ後から更新するようなシーン。

説明を分かりやすくするため、シンプルな例を挙げさせていただきます。

- SharePoint Onlineサイトを用意し、リストを作る。
- itemName列, progress列を新規追加。ともに文字列型。
- itemName列に、適宜 item001, item002を入れる。progressは空いているまま。
- メール受信をトリガーとする。件名に項目名を記入。
- メール件名とSharePoint OnlineのリストのitemNameの値が一致すれば、progress列をdoneと更新。

# Power Automate開発手順

- "Outlook受信(v3)" トリガー
- "変数の初期化"プロセスを作る。トリガーのメール件名を変数xに格納。
- "複数項目の取得"プロセスを作る。SPOのURL,リストを記入。　フィルタに、itemName eq 'variables('x')'
- "項目の更新"を作る。(自動的にループを追加してくれる。)SPOのURL、リスト名を記入。重要：IDフィールドに「複数項目の取得」のIDを選択する。　（説明しづらいですが、マウスでリクックすると、右下に選択が表示され、その中からIDを選べば良い。）

# 補足
まずは特定の条件でリスト（テーブルみたいなもの）のIDを特定する。
そのIDをキーにテーブルを更新する。

以上です
Gemini APIで英作文のAI添削機能を実装！しかしサーバーエラーが...【英語学習アプリ開発#2】

## はじめに
こんにちは、〇〇です。個人開発中の英語学習アプリ『（仮）Re-Learn English』の開発進捗、第2回目です。
（前回の記事はこちら → [英語学習に挫折した自分のためのアプリ「Re-Learn English」をNext.js + Supabase + Geminiで開発中！【英語学習アプリ開発#1】](https://qiita.com/tama0931/items/7ac1d4da5dd8e788193d)）
前回はユーザー認証機能を実装しましたが、今回はついにアプリのコア機能である**「AIによる英作文添削機能」**の実装にチャレンジしました。しかし、そう簡単にはいきませんね...！
今回は、実装した機能の概要と、現在進行系でハマっているAPIエラーについて記録します。<br>

## 今回実装したこと
前回からの大きな進捗として、アプリの骨格と学習フローを整理しました。
ページ構成の見直し
ホーム画面 (/): ログイン後のダッシュボードとして機能。
学習ページ (/learn): クエスト一覧を表示する専用ページに。
問題ページ (/quests/[questId]): クエストIDに応じて、異なる種類の問題（リスニングやライティング）を表示。
サイドバーから各ページにスムーズに移動できるようになり、アプリらしい構造になりました。
AI添削機能のバックエンド実装
Next.js の API Routes を使い、/api/writing-feedback というエンドポイントを作成。
このAPIは、フロントエンドから受け取った英文を、GoogleのGemini APIに送信します。
Geminiには「あなたは優秀な英語の先生です」という役割（プロンプト）を与え、添削結果を必ずJSON形式で返すように指示しました。
AI添削機能のフロントエンド実装
日本語のお題に対して、ユーザーが英文を入力できるUIを作成。
「添削する」ボタンを押すと、バックエンドAPIにリクエストを送信し、返ってきた添削結果（修正案や解説）を画面に表示する機能を実装しました。
![クエスト一覧画面や、英作文問題の画面のスクリーンショットをここに貼る]
## 現在苦労していること：500 Internal Server Error
クエスト選択から問題表示までは完璧に動くようになりました！しかし、いざ「添削する」ボタンを押すと、無情にも500 Internal Server Errorが...。
![APIエラーが表示されている画面のスクリーンショットをここに貼る]
フロントエンド側で受け取っているのは「サーバー内部でエラーが起きた」という情報だけで、これだけでは原因が特定できません。
このようなバックエンド起因のエラーをデバッグする際は、ブラウザの開発者ツールだけでなく、Next.jsを動かしているターミナルのログを見ることが重要だと学びました。
## 次回のアクション
この 500 エラーを解決し、AI添削機能を完全に動かすことが次回の最優先タスクです。
【TODO 1】APIキーの再確認
.env.local に設定した GEMINI_API_KEY が正しいか？
サーバーを再起動して、環境変数が正しく読み込まれているか？
そもそも、キーの先頭に NEXT_PUBLIC_ が付いていないか？（付いているとサーバーサイドで読めない）
これらを見直すのが第一歩です。
【TODO 2】ターミナルの詳細なエラーログの分析
APIキーに問題がない場合、次に疑うべきは「Gemini APIとの通信内容」です。エラーを再現させた直後に、ターミナルに出力される詳細なエラーメッセージを読み解き、根本原因を特定します。
（例：SyntaxError: Unexpected token ... is not valid JSON のようなエラーが出ていれば、Geminiからの応答が想定外の形式だったことが分かります）
【TODO 3】Google Cloud Platformの設定確認
最終手段として、Google Cloud側でプロジェクトに対してAPIが有効になっているかなども確認します。
無事にAI先生が英文を添削してくれるようになったら、また進捗を報告します！
## 終わりに
個人開発は、このように一つ進んでは壁にぶつかり...の繰り返しですね。しかし、エラーの原因を仮説立てて一つずつ検証していく過程は、大変ながらも非常に学びが多く、面白いです。
もし「そのエラー、私もハマったよ！」「ここの設定を見直してみては？」といったアドバイスがあれば、ぜひコメントで教えていただけると嬉しいです。
最後までお読みいただき、ありがとうございました
家族との生活をアシストするDjango Webアプリ開発 ── データ系技術の検証環境を見据えて


# はじめに

日常の課題を解決しつつ、将来的にデータ系技術の検証環境として活用できるWebアプリをDjangoで構築した。  
本稿では、アプリ開発の目的、アーキテクチャ、構成方針を中心に整理する。  
詳細な実装については別記事にて紹介予定。

- GitHubリポジトリ：[family_life_project](https://github.com/ymiura0826/family_life_project)
- Webサイト：[family life](https://family-life.onrender.com/)

# 開発目的

## データ系技術の検証環境の構築

本業でデータエンジニアリング領域の業務に携わり始めたが、気軽に技術検証を行える環境がなかった。  
既存のオープンデータを扱うだけでは面白みに欠けるため、自らデータが生成される仕組みを持ったWebアプリを個人開発し、検証基盤とすることを考えた。

## 日常生活でのストレス軽減

- 乳児のミルク間隔を忘れがち  
- 買い忘れや家族間の伝達ミスが発生しやすい  
- 観光地やレストランの情報をメモし忘れて忘却する

こうした日常の小さな課題を、仕組みで解決することを目的とした。

# アーキテクチャ

本アプリは、無料かつ安定して運用できる構成と、将来的な技術検証に対応可能な拡張性を両立することを設計方針とした。

![family_life_システムアーキテクチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4097467/386aa92e-0438-40c7-869f-0351149fa934.png "システムアーキテクチャ")

## 使用技術と選定理由

### ■ [Django](https://www.djangoproject.com/)
- **概要**：PythonベースのWebフレームワーク。フォーム処理や認証機能を標準搭載したフルスタック構成。
- **選定理由**：Pythonの利用経験があり構造を理解しやすい。標準機能が充実しており学習コストが低い。

### ■ [Render](https://render.com/)
- **概要**：GitHub連携に対応し、簡単にWebアプリをデプロイできるPaaS。
- **選定理由**：無料枠で運用可能。情報が豊富で初心者にも扱いやすく、Supabaseとの親和性も高い。参考書籍に具体的なデプロイ手順が記載されていた点も決め手。

### ■ [Supabase](https://supabase.com/)
- **概要**：PostgreSQLベースのオープンソースBaaS。認証・リアルタイム通信なども提供。
- **選定理由**：PostgreSQLの検証環境として最適であり、Renderからの接続も容易。無料枠でも実用性は十分。

### ■ [LINE Messaging API](https://developers.line.biz/ja/services/messaging-api/)
- **概要**：LINE公式のメッセージ送信API。グループチャットへのPush通知にも対応。
- **選定理由**：LINEを日常的に使用しており、実用的な通知手段として最適。

なお、選定段階ではFlaskやHeroku、Firebase、LINE Notifyなども候補に挙がったが、継続性・実装容易性の観点から本構成を採用した。

# 構成方針とアプリ分割

アプリケーションは以下の設計方針に基づき構築した。

- 家族単位でのデータ共有を前提としたユーザー設計  
- Djangoアプリを機能単位（account／ikujikanri／shopping）に分割し、責務の明確化を実現  
- モデル、ビュー、通知処理の疎結合化による拡張性の確保  
- モバイルファースト・モバイルフレンドリーなUI設計

ChatGPTを活用し、以下の主要機能を実装した。

- **アカウント管理**：家族ごとの認証情報およびLINEグループIDの管理  
- **育児記録**：ミルク・排泄の登録および通知スケジュールへの自動連携 
- **買い物リスト**：テンプレート機能による項目管理と並び替え、通知との連携  
- **LINE通知**：[UptimeRobot](https://uptimerobot.com/)を利用し、定期実行処理の安定性を確保（Renderのスリープ対策）

ChatGPTとの協働開発で得られた知見や注意点、その他開発を進めるうえで躓いた点などは、別記事で整理予定である。

# データ系技術の検証と今後の展望

開発したアプリを起点としたデータを用いて、今後のは以下の技術検証を予定している。

- **Airbyte**：OSSベースのETL
- **dbt**：SQLベースでデータ変換とバージョン管理  
- **Prefect／Airflow**：ワークフロー管理・監視  
- **DataPlex／OpenMetadata**：メタデータ管理  
- **Kafka／Flink／Iceberg**：OSSベースのストリーミング基盤の構築

# 感想と振り返り

今回が初のフルスタック開発となったが、Djangoを用いて要件定義からデプロイまで一通り実施できた点は大きな収穫である。実装経験の乏しさを補う形で、設計から開発までの全体像を把握する良い機会となった。

一方で、UI設計の優先順位が後回しとなったことや、ChatGPTからの提案を鵜呑みにして外部サービスの仕様を十分に確認しなかった点は反省点であり、今後の改善対象としたい。

# 参考資料
※アフィリエイトリンクを含みます
- [Djangoのツボとコツがゼッタイにわかる本[第3版]](https://amzn.to/3Hua2Yz)  
　Djangoの概要からRenderへのデプロイ手順までを丁寧に解説。非常に実用的で参考になった。

- [いちばんやさしいGit&GitHubの教本 第3版](https://amzn.to/43EmOww)  
　図表が豊富で要点が整理されており、Git/GitHubを初めて扱う人にとってわかりやすい。

- [【GAS】LINEのgroupIDを返してくれるbot](https://qiita.com/enbanbunbun123/items/2504687e4b6c13a289db)  
　LINEグループ通知に必要なgroupID取得の自動化に役立った。

# 今後公開予定の記事

- Django×Render×Supabase構成ガイド  
- ChatGPTとの協働開発における注意点と改善策  
- データ系技術の導入と検証結果のまとめ
「私のPCでは動くんですけど…」：チーム開発の消耗を終わらせる「環境の処方箋」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/b3a3a289-5113-4336-b1da-2ad9f097a666.png)

「私のPCでは動くんですけど、もう一度試してもらえますか？」
チームの誰かがこの「名言」を口にしたとき、私は今日の午後が無駄になることを悟る。

ジュニア開発者は「自分だけが再現できない」バグを前に途方に暮れ、シニア開発者は環境問題のせいで同僚のデバッグに1時間を費やし、結局PHPのバージョン違いが原因だと気づく。プロジェクトマネージャーは、緊急のホットフィックスがなかなかマージされず、針の筵に座っている。

これは、私たちの技術チームで毎日演じられている、最もコストのかかるドラマだ。私たちはこれを**「環境による消耗」**と呼んでいる。

チームのテックリードとして、私はこの慢性疾患を「根治」するためにあらゆる方法を試してきた。手順書を統一し、全員がそれに従うようにした。結果はどうだったか？AさんのPCはM1チップ、BさんはIntel。CさんのHomebrewは古く、DさんはうっかりグローバルのNode.jsをアップグレードしてしまった…

環境の「エントロピー増大」は不可逆のようだ。些細な違いが積み重なり、やがて些細なバグで爆発し、私たちの最も貴重なリソース、すなわち開発者のフロー状態と時間を食い尽くす。

私たちはDockerを全プロジェクトで強制するような重量級の解決策も検討した。理論上は完璧な「Environment as Code」だが、我々のようなWeb開発が主で、迅速なイテレーションが求められるチームにとっては、その学習曲線、リソース消費、そしてmacOS上での不安定なパフォーマンスは、新たな苦痛をもたらした。一つの問題を解決するために、別の問題を生み出してしまったのだ。

私たちが必要としていたのは**「環境の処方箋」**だった。Dockerの「一貫性」という魂を持ちながら、ローカル開発に求められる「軽快さとシンプルさ」という肉体を持つもの。

長期間の模索と試行の末、私たちのmacOSベースのチームは、ついにその処方箋を見つけ出した。それが**Servbayチーム版**だ。
![日语.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/a5f5ce04-6466-429c-b550-95d65fd11a30.png)


それは、私たちのチームの協力モデルを根底から変えた。

環境の「セントラルキッチン」モデル
テックリードである私は、Servbay内で各プロジェクトの標準化された「環境スナップショット」を定義できる。例えば、「ECプロジェクトA」はPHP 8.2、PostgreSQL 15、Redisを使用し 、「公式サイトプロジェクトB」はNode.js 20とMySQL 8.0を使用する 、といった具合だ。そして、この設定をチームに共有する。

新メンバーの「ゼロコスト」オンボーディング
先週、新しい仲間が加わった。以前なら、彼が様々な環境をセットアップするのに丸一日かそれ以上かかっただろう。しかし今、プロセスはこうだ：Servbayをインストール -> 私のチームに参加 -> 終了。彼のServbayはチームの環境設定を自動的に同期し、必要なサービスとバージョンが瞬時に準備される。  彼は最初の1時間でコードを書き始めていた。


複数プロジェクトのシームレスな切り替え、相互干渉なし
私たちのチームは複数のクライアントプロジェクトを同時にメンテナンスしており、それぞれの技術スタックは異なる。Servbayを使えば、各開発者が自分のPCで何十ものプロジェクトを簡単に管理でき、各プロジェクトは独立したPHP、Node.jsバージョンとデータベースに紐付けることができ、互いに衝突しない。  これは以前では考えられなかったことだ。
![截屏2025-06-10 19.20.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4107514/daa9aab8-a37d-4c50-9395-b92a06b2be7f.png)


即時共有、アジャイルなコミュニケーション
同僚が機能を完成させ、UIデザイナーに効果を見せたいとき、もはやテストサーバーにデプロイする必要はない。Servbay v1.13.0に統合されたfrpやngrokを使えば、ワンクリックで公開リンクを生成し、ローカルサイトを直接共有できる。  この機敏性が、私たちのコミュニケーション効率を劇的に加速させた。

テックリードの価値は、優れたコードを書くだけでなく、チームのために「摩擦のない」ワークフローを構築することにある。

「私のPCでは動くんですけど」という言葉は、今や私たちのチームから消え去った。節約できた時間は、より創造的な仕事やコードのリファクタリング、あるいは単に早く帰宅するために使われている。
達人に学ぶDB設計(第2版)で学べること


筆者は正規化などなんとなくのDB設計については知っている程度で
DB設計についてあまり知識はありませんでした。
もう少しDB設計について体系的に学びたいと思い読みました。
個人的に学べたことを書いていこうと思います。

## 学べたこと
<br/>
達人に学ぶDB設計を通して学べたことがたくさんありました。

ネットの記事などを使って断片的に学ぶのでは得られなかったことが以下でした。

- 物理設計について
    - DB冗長構成
    - レプリケーション
    - バックアップ・リカバリ設計について
- クラウドにおけるDBの冗長構成について
- 論理設計とパフォーマンスについて
- インデックスの設計方針
    - インデックス以外のチューニング方法
- 論理設計のアンチパターン
- 気づきにくいグレーな設計の注意点と扱い方について

上記について、少しでも想像ができないのであればこの本を読む価値があると思います。
特に物理設計の話やインデックスなどのチューニング方法は
パフォーマンスの話であり、DB設計する上で考慮するべき内容だと思います。

## なぜその設計にしたのか語れるように
<br/>

AIが色々教えてくれる時代なのでなんとなくDB設計もできてしまうと思います。
しかし、この設計が最強みたいなものはなく、業務上の微妙な仕様の違いによって
適切なDB設計は変わることをこの本が教えてくれました。


<br/>


そうした適切な判断を最終的にするのは人間であり、
なぜその設計にしたかを語れる必要があると思います。

<br/>

もちろん、そうした設計は長年の経験から判断することも多いと思いますが
判断の基となるベースの知識をこの本は教えてくれていると思います。
長年ベストセラーとしてこれだけたくさんの人に読まれているのが何よりの証拠です。
<br/>
様々なエンジニアがこの本を読めばDB設計の基本的なことは
網羅的に理解できると言われる理由がわかります。
むしろ、読んでいてそこまで理解しなくて良いのではないかと思うかもしれないほどです。
9章だけは「これ理解する必要あるのか？」と疑問に思いました（笑）。
<br/>
AIが発達した今、なぜその設計にしたのかを
しっかり語れるようなエンジニアになっていきたいです。

## 達人に学ぶDB設計は難しいか？

何を難しいとするかで変わりますよね。
難しいと見えるものでも意外と紐解いていくと基本的な構造の組み合わせだったりします。

そういった意味では現役でエンジニアをやっている自分からすれば、
理解できないほど難しいものではなかったように思えます。
<br/>
むしろ、疑問がたくさん出てきてAIに聞きながら深掘りしていって楽しく読ませていただきました。
エンジニアとして開発などをする上ではこれといった正解がないため、アンチパターンと呼ばれるものを理解して致命的なエラーを防ぐ方法が効果的だと思います。
<br/>
そういった面では、アンチパターンから始まり、少し踏み込んだグレーな設計の話をしてくれたので、難しくも面白かったです。

## 特に印象に残ったところ
<br/>
ヒント句を使った実行計画の指示を与えてパフォーマンスを改善する箇所です。

実行計画の指示なんかエンジニアがやることあるのか？と思いました。
DBに任せた方が良くない？と。
<br/>
しかし、実際にはサービスを続けてデータが増えたことによって、
開発／検証環境と本番でデータ量が変わり、オプティマイザが
異なる実行計画を出してきて本番だけクエリがタイムアウトする
みたいなことが普通にあるらしいです。
<br/>
explainを実行することで、実行計画を確認することができるみたいです。
実行計画を確認して、フルスキャン走ってるなとか想定しているインデックス使われてねーなとか思うことがあるみたいです。
この辺で計算量の話が始まり、アルゴリズム全般の話が出てくると。
<br/>
データ構造やアルゴリズムが大事ということはRecursionという学習サイトをやっていたときに言われてました。
その時はピンとこなくて、大事だろうけど本当に大事なのか？と思うほどでした。
しかし、実際に実行計画からアルゴリズムの話が出てくるとなると、データ構造とアルゴリズムの話がサービスを運営していく上で大事だということが腑に落ちました。

## まとめ

<br/>

達人に学ぶDB設計を読んで学んだことを書いてみました。
読んでいると、当たり前に思えることが出来ていない設計が
世の中にはたくさんあるということがこの本から学べました。
<br/>

アンチパターンも学ぶことによって、業務で致命的なミスを防げたり
既存のDBを見るときもアンチパターンの存在を確認することで
より良い設計に修正することが出来ます。

<br/>

何より、DB設計の基礎を学んだことで業務で少しでも
自信を持って携われそうという自信が付きました。

DB設計を実務なしに完璧にできるようになることはないと思うので
こうした少しの自信をつけていくことが大切だと思います。
📚 LED点消灯を10分で制御させる（動画）　LM_1_GIF

##### QQQ :bow_tone1:３Q! 
##### [📚 LED点消灯を10分で制御させる　LM_1_SIM](https://qiita.com/zhb/items/b2d6463c66d6026c7057)   　:arrow_heading_up:

# 🎯 レッスン目的
　レッスン手順の実況感を感じる。
 
# マイコンリソースの利用
（下側の青色ピン：Pin76、Pin75）
![mcu_pin_map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659233/e83f8f51-b539-4086-9183-8df0cfbd3e36.png)

# プロジェクト生成
- 新規プロジェクト → RL78 → R5F104PL を選択
- LLVM ツールチェインを選び、Smart Configurator を有効化
 P7.5 → Output → 初期値：Low（LED1 Off）
 P7.6 → Output → 初期値：Low（LED2 Off）
 P13.7 → Input　（KEY）
 
![prjCreate_network_Smp18_color8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659233/74d7907c-8a5b-4909-86f2-0634c7133d4e.gif)

# デバッグ構成の作成
![sim_debug.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659233/96f098dd-2b42-4a14-8111-151cdc7fc5fa.gif)


# シミュレーターのデザイン
![sim_design.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659233/11a1cb52-0099-4347-9dc6-d8f600d9d4ea.gif)

# ソース実装 & 動作確認

![coding_chk_tiny.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3659233/d4a2bfe2-0c44-473d-945c-6d989da970b5.gif)

# ソースコード
```c
/***********************************************************************************************************************
 * Function Name: main
 * Description  : This function implements main function.
 * Arguments    : None
 * Return Value : None
 ***********************************************************************************************************************/
int main(void)
{
	R_MAIN_UserInit();
	/* Start user code. Do not edit comment generated here */
	while (1U)
	{
		// キーOnの場合
		if (P13_bit.no7)
		{
			// LED1点灯
			P7_bit.no5 = 1;

			// LED2消灯
			P7_bit.no6 = 0;

		}
		// キーOffの場合
		else
		{
			// LED1点灯
			P7_bit.no5 = 0;

			// LED2消灯
			P7_bit.no6 = 1;
		}

	}
	return 0U;
	/* End user code. Do not edit comment generated here */
}

```

##### [📚 LED点消灯を10分で制御させる　LM_1_SIM](https://qiita.com/zhb/items/b2d6463c66d6026c7057)　:arrow_heading_up:

##### QQQ :bow_tone1:３Q!
Macでバックスラッシュをwindowsと同じボタンで打つ方法

# 概要

MacのJIS配列キーボードでwindowsのように`\`を`_`(あるいは`ろ`)のボタンで入力できるようにする方法をまとめました。



## 1.karabinerをインストール
homebrewでインストール
```
brew install --cask karabiner-elements
```

あるいはWebサイトからインストール

https://karabiner-elements.pqrs.org



## 2.
karabiner-elementsを開き、Complex Modifications　→　Add your own ruleを押す。
テンプレート用のテキストが入っていると思いますが、全部消して次を挿入。

```
{
    "description": "New Rule (backslash)",
    "manipulators": [
        {
            "from": { "key_code": "international1" },
            "to": [
                {
                    "key_code": "international3",
                    "modifiers": ["option"]
                }
            ],
            "type": "basic"
        }
    ]
}
```

saveを押せば終わりです。

## 注意点
アンダースコア`_`はwindowsと同じようにshift+_で出せます。(もともとアンダースコア`_`は_あるいはshift+_で出せるようになっているのでアンダースコアの設定はいじらなくて大丈夫です。)


## 参照

https://qiita.com/to-fmak/items/b88fa41afc56d89c1bce
cloudfrontの設定で詰まったこと

# Custom SSL certificate - optional
certificate managerでリクエストしてステータス発行済みになっているのに全く出てこなかった。
理由はリクエストするリージョンをバージニア北部で行わなければならなかったらしい。
どういうこと？

route53の設定でエイリアスを正しく設定できてなかった

独自ドメインのサブドメインだと上手く表示できなかったが、ipv6をオフにしたからか再デプロイしたからかわからないがどっちかの影響でうまくできた。ipv6オフにしたら強制的に再デプロイだからむしろ一緒？
Cursorの@シンボルについての考察

## はじめに

現代の開発環境において、AIアシスタントを活用したコーディングが急速に普及しています。その中でも、CursorのAIペアプログラミング機能は特に注目を集めており、その核心となる機能の一つが「@シンボル」による**コンテキスト参照システム**です。

本記事では、Cursorの@シンボル機能について詳しく分析し、その実用性と開発効率への影響について考察します。

## @シンボルとは

Cursorの@シンボルは、チャット、Composer、Cmd Kなどの入力ボックスで`@`を入力することで利用できる**コンテキスト参照機能**です。`@`を入力すると、関連する候補がポップアップメニューで表示され、入力内容に基づいて自動的にフィルタリングされます。

この機能により、開発者はAIアシスタントに対して、プロジェクトの特定のファイル、フォルダ、コードスニペット、ドキュメントなどを明示的に参照させることができます。

## 利用可能な@シンボル一覧

Cursorでは以下の@シンボルが利用可能です：

### ファイル・フォルダ関連
- **@Files**: プロジェクト内の特定ファイルを参照
- **@Folders**: フォルダ全体を参照し、より広範なコンテキストを提供
- **@Code**: コードベースから特定のコードスニペットやシンボルを参照

### ドキュメント・外部リソース
- **@Docs**: ドキュメントやガイドにアクセス
- **@Web**: 外部のWebリソースやドキュメントを参照
- **@Link**: 特定のコードやドキュメントへのリンクを作成

### バージョン管理・変更履歴
- **@Git**: Git履歴や変更内容にアクセス
- **@Recent Changes**: 最近の変更内容を参照

### 作業履歴・設定
- **@Past Chats**: 過去のComposerセッションの要約を参照
- **@Notepads**: ノートパッドにアクセス
- **@Cursor Rules**: Cursorのルール設定を参照

### エラー・定義参照
- **@Lint Errors**: リントエラーを参照（Chatのみ）
- **@Definitions**: シンボル定義を検索（Cmd Kのみ）

### その他の特殊シンボル
- **# Files**: コンテキストにファイルを追加（参照なし）
- **/ Commands**: 開いているファイルやアクティブファイルをコンテキストに追加

## 操作方法と使い勝手

@シンボルの操作は直感的で効率的です：

1. **入力**: `@`を入力すると候補一覧が表示
2. **ナビゲーション**: 上下矢印キーで候補を選択
3. **決定**: Enterキーで選択を確定
4. **カテゴリ選択**: カテゴリ（例：Files）を選択すると、そのカテゴリ内で最も関連性の高い項目がフィルタリング表示

この操作性により、開発者は迅速かつ正確に必要なコンテキストを指定できます。

## 実用性の考察

### 1. コンテキストの精度向上

従来のAIアシスタントでは、開発者が「このファイルについて教えて」と言っても、AIは具体的にどのファイルを指しているのか分からない場合がありました。@シンボルにより、この曖昧性が解決され、AIがより正確で関連性の高い回答を提供できるようになりました。

### 2. 開発効率の向上

特に以下のような場面で効率が大幅に向上します：

- **コードレビュー**: `@Files`で特定ファイルを参照し、改善点を指摘
- **バグ修正**: `@Lint Errors`でエラー内容を直接参照し、修正案を取得
- **リファクタリング**: `@Code`で特定の関数やクラスを参照し、最適化を依頼
- **ドキュメント作成**: `@Docs`で既存ドキュメントを参照し、一貫性のある文書作成

### 3. 学習コストの軽減

新しいプロジェクトに参加した際、`@Folders`や`@Git`を活用することで、プロジェクトの構造や変更履歴を効率的に理解できます。これにより、新規参加者のオンボーディング時間を大幅に短縮できる可能性があります。

## 実践的な活用シーン

### シーン1: 新機能の実装
```
@Files src/components/UserProfile.tsx の実装を参考に、
@Files src/types/user.ts の型定義を使って、
新しいUserSettingsコンポーネントを作成してください。
```

### シーン2: バグ調査
```
@Lint Errors の内容と @Recent Changes を確認して、
最近のコミットが原因で発生しているエラーの修正方法を教えてください。
```

### シーン3: コードレビュー
```
@Code getUserData関数 の実装について、
パフォーマンスとセキュリティの観点から改善点を指摘してください。
```

## 制限事項と注意点

@シンボル機能は非常に強力ですが、以下の点に注意が必要です：

1. **機能の限定性**: 一部の@シンボルは特定のコンテキスト（ChatまたはCmd K）でのみ利用可能
2. **プロジェクト理解の必要性**: 効果的に活用するには、プロジェクト構造の理解が前提
3. **過度な依存のリスク**: AIに頼りすぎることで、自身のコード理解が浅くなる可能性

## 今後の発展可能性

Cursorの@シンボル機能は今後さらに進化する可能性があります：

- **より細かいコンテキスト指定**: 関数内の特定行や変数レベルでの参照
- **動的コンテキスト**: 実行時の状態やデバッグ情報の参照
- **チーム間での共有**: @シンボルを使ったコンテキストの共有機能
- **AI学習の最適化**: プロジェクト固有の@シンボル候補の提案

## まとめ

Cursorの@シンボル機能は、AIアシスタントとの対話において**コンテキストの明確性**と**作業効率の向上**をもたらす革新的な機能です。単なる便利機能を超えて、開発プロセス全体を変革する可能性を秘めています。

ただし、この機能を最大限活用するためには、開発者自身がプロジェクトの構造を理解し、適切な場面で適切な@シンボルを選択するスキルが重要です。AIとのペアプログラミングにおいて、@シンボルは人間とAIを繋ぐ重要な「インターフェース」として機能しているのです。

今後のCursorの発展と、@シンボル機能のさらなる進化に注目していきたいと思います。
取り扱いに注意が必要なメソッドをOptInしなければ使えないように制限する

取り扱いに注意の必要なメソッドがあったとします。
その注意喚起のため、コメントを書くだけでは対策として不十分です。

```kotlin
/**
 * このメソッドは取り扱いに注意が必要です
 */
fun sensitiveMethod() {
    // とっても注意が必要な処理
}
```

利用箇所には上記のコメントが現れませんので、実装者がソースコードを追って確認しなければ気づけません。実装者が気づけない場合、レビュワーが気づくのはさらに難易度が高く、見逃されてしまいかねません。ライブラリの場合はソースコードが利用者の手元にない可能性もあります。

```kotlin
fun hoge() {
    sensitiveMethod()
}
```

そんな場合に、アノテーションによるOptInを強制する手段がKotlinに用意されています。[`@RequiresOptIn`](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-requires-opt-in/)というアノテーションを付与したアノテーションを定義します。

```kotlin
@RequiresOptIn(level = RequiresOptIn.Level.ERROR)
@Retention(AnnotationRetention.BINARY)
@Target(AnnotationTarget.FUNCTION)
annotation class VerySensitiveApi
```

ここでは、levelを`ERROR`にしています。こうすると、OptInしていなければコンパイルエラーになります。エラーまでは不要で、警告を出したい場合は`WARNING`を指定します。
後はアノテーション共通ですが、[`@Retention`](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.annotation/-retention/)を`BINARY`にして、ライブラリになってもアノテーションが保持されるようにして、[`@Target`](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.annotation/-target/)で作成するアノテーションを付与する対象を指定します。これらは利用局面に応じて適宜変更してください。

これで、`VerySensitiveApi`というアノテーションを定義できました。あとは注意が必要なメソッドに、このアノテーションを付与します。

```kotlin
/**
 * このメソッドは取り扱いに注意が必要です
 */
@VerySensitiveApi
fun sensitiveMethod() {
    // とっても注意が必要な処理
}
```

そうすると、利用箇所では

```kotlin
fun foo() {
    sensitiveMethod()
}
```

と、単純に呼び出すとコンパイルエラーとなります。
利用するには以下のように、明示的に`@OptIn`アノテーションで利用を宣言しなければいけません。

```kotlin
@OptIn(VerySensitiveApi::class)
fun bar() {
    sensitiveMethod()
}
```

これで実装者は少なくともOptInが必要なメソッドであるとして気がつきドキュメントなどを調べるでしょうし、レビュワーも、アノテーションがついていることで気づきやすくなりますね。

また、`@RequiresOptIn`ではメッセージを指定することもできますので、

```kotlin
@RequiresOptIn(
    message = "このメソッドはとっても注意が必要なので、使うときは設計レビューを通して承認を受けてください。",
    level = RequiresOptIn.Level.ERROR,
)
@Retention(AnnotationRetention.BINARY)
@Target(AnnotationTarget.FUNCTION)
annotation class VerySensitiveApi
```

などと書いておくと、IDEでそのメッセージを確認したり、ビルド時のエラーログにもこのメッセージが表示されるようになるので、より詳細な情報を付与することもできます。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155171/314ad090-8426-4252-929c-1297b587b5c5.png)

---

以上です。
機械学習推薦システムとTikTok入門のカリキュラム(日記)


## 機械学習推薦システムとTikTok入門のカリキュラム案

ここでは、「機械学習推薦システム」の基礎を学びつつ、その知識が「女子高生のTikTok入門」にどう活かされているかを探るカリキュラムを提案します。

### 目的

* 機械学習、特に推薦システムの基本的な概念を理解する。
* TikTokの「おすすめ」フィードがどのような仕組みでパーソナライズされているかを学ぶ。
* 身近なサービスを通して、AI技術の活用例を体験的に理解する。

### 対象者

* 機械学習やデータサイエンスに興味がある方
* TikTokなどのSNSの仕組みに興味がある方
* 技術的な背景がなくても、新しいことを学ぶ意欲がある方

---

### カリキュラム内容

#### 1. 機械学習の基本をざっくり理解しよう！ (60分)

* **機械学習って何？**
    * コンピューターがデータから学ぶってどういうこと？
    * 私たちの周りのどこで使われている？（例：検索エンジンの予測、お買い物の「あなたへのおすすめ」）
* **「先生あり」と「先生なし」の学習**
    * **教師あり学習**: 正解を教えて学ぶ方法（例：スパムメールの分類）
    * **教師なし学習**: 正解がなくても自分でルールを見つける方法（例：似ているお客さんをグループ分けする）
    * 身近な例を交えて、それぞれの違いと使いどころを説明します。

---

#### 2. TikTokの「おすすめ」の秘密：推薦システムのしくみ (90分)

* **「おすすめ」フィードってどうやってできてるの？**
    * TikTokの「おすすめ」がなぜこんなに自分に合うのか？
    * コンテンツパーソナライズの重要性：なぜあなたにピッタリの動画が表示されるのかを解き明かします。
* **協力し合うAI：「協調フィルタリング」**
    * **ユーザーベースの推薦**: 「あなたと似た趣味の人」が見ている動画をおすすめする仕組み
    * **アイテムベースの推薦**: 「この動画が好きな人」が他にどんな動画を見ているかでおすすめする仕組み
    * 具体的な例を挙げながら、どのようにして動画が推薦されるのかを分かりやすく解説します。
* **「A/Bテスト」でより良い「おすすめ」を探る**
    * TikTokの開発チームがどうやって「もっと良いおすすめ」を見つけているのか？
    * A/Bテストの考え方と、それがユーザー体験の向上にどう役立っているかを紹介します。

---

#### 3. 言葉や感情を理解するAI：自然言語処理と感情分析 (60分)

* **コメントから気持ちを読み取るAI**
    * 動画のコメントから「ポジティブ」か「ネガティブ」かを見分ける仕組み
    * TikTokのコメント欄の傾向や、AIがどのようにユーザーの反応を分析しているかを紹介します。
* **動画の意味をAIが理解する？**
    * 動画の説明文やハッシュタグから、その動画がどんな内容なのかをAIがどうやって把握しているか。
    * 「関連動画」が表示される裏側にある、AIの言葉の理解力を解説します。

---
【Mac】statコマンドの使い方


`stat`コマンドを使用するとファイルのステータスが表示されます。

https://keith.github.io/xcode-man-pages/stat.1.html

## ファイルのサイズ、パーミッション、作成日時、アクセス日時など、各種プロパティを表示

```terminal
stat path/to/file
```

## より詳細に表示（Linux の stat に近い形式）

```terminal
stat -x path/to/file
```

## ファイルパーミッションを 8 進数のみで表示

```terminal
stat -f %Mp%Lp path/to/file
```

## ファイルの所有者とグループを表示

```terminal
stat -f "%Su %Sg" path/to/file
```

## ファイルのサイズをバイト単位で表示

```terminal
stat -f "%z %N" path/to/file
```
Azure Fundamentals（AZ-900）試験勉強メモ  

## 個人的に似ていてややこしいと思うところ

Azure Fundamentals（AZ-900）の試験勉強中に何だか似ていてややこしいなぁと思った部分についてまとめました！
分野？はバラバラですが許してください...

## 設計図シリーズ ~ イメージ/ARMテンプレート/Azure Blueprintの違い

### 1. イメージ（Image）とは？

Azureの「イメージ」とは、  
**仮想マシン（VM）の元になる設計図のようなもの**です。

- OS（WindowsやLinux）  
- そこにインストールされたアプリケーションや設定  
- 初期状態のデータや構成情報

がひとまとめになっていて、  
このイメージを使うことで、同じ環境のVMを何台でも簡単に作成できます。

#### イメージの種類

| 種類                     | 説明                                      |
|--------------------------|-------------------------------------------|
| マーケットプレースイメージ | Microsoftやパートナー提供の公式OSイメージ     |
| カスタムイメージ           | 自分で設定したOSやアプリを含むオリジナルイメージ |
| マネージドイメージ         | Azureが管理する使いやすく安全なイメージ        |

---

### 2. ARMテンプレート（Azure Resource Manager Template）とは？

ARMテンプレートは、  
**Azure上のリソースをまとめて作成・設定するための「設計図」**をJSON形式で書いたものです。

- 仮想マシン（VM）  
- 仮想ネットワーク（VNet）  
- ストレージアカウント  
- ネットワークセキュリティグループ（NSG）など  

複数のリソースを一括で自動的に展開できるため、インフラ構築の効率化に役立ちます。

#### イメージとの違い

| 項目       | イメージ (Image)               | ARMテンプレート               |
|------------|-------------------------------|------------------------------|
| 役割       | VMの中身（OSやアプリ）をまとめたテンプレート | Azureリソースの構成・配置を定義する設計図 |
| 作成対象   | 仮想マシンの環境                 | VMやネットワークなどの複数Azureリソース |
| 使い方     | 同じ環境のVMを複数台作成する    | 複数リソースをまとめて作成・設定する    |

---

### 3. Azure Blueprintとは？

Azure Blueprintは、  
**組織のセキュリティルールや標準設定を守りながら、Azureリソースの展開を自動化できる設計図のセット**です。

- ARMテンプレート  
- ポリシー（ルール）  
- ロールの割り当て（アクセス権）  

などをパッケージ化して、一括管理・適用できます。

#### ARMテンプレートやイメージとの違い

| 項目             | Azure Blueprint                    | ARMテンプレート               | イメージ                     |
|------------------|----------------------------------|------------------------------|-----------------------------|
| 目的             | ガバナンス（ルール）とリソース展開の自動化 | Azureリソースの構成・展開      | VMの中身（OSやソフト）      |
| 内容             | ARMテンプレート＋ポリシー＋アクセス管理 | リソース作成のJSON定義         | VMのOSやアプリのテンプレート |
| 適用単位         | サブスクリプションや管理グループ単位 | 単体のリソース展開             | 仮想マシン単体の作成         |
| 利用シーン例     | 組織標準を守るための環境一括展開    | インフラの一括デプロイ         | 同じVM環境を複数台作る時    |

---

### まとめ

| 用語             | 概要                                   | 例え                           |
|------------------|--------------------------------------|-------------------------------|
| イメージ         | VMの中身の設計図                      | 家具が揃った部屋の設計図       |
| ARMテンプレート  | Azureリソース全体の構成・展開設計図   | 住宅の間取り図・設計図         |
| Azure Blueprint  | ルールやガバナンスも含む環境全体の設計図 | 建築の設計図＋建築ルールのセット |



以上、全然違うけど何だか似ていると感じてしまう設計図シリーズでした〜！
Jetson NanoでOpenWEBUIからDeepSeekを動かす

SDカードでブートしてからのコマンドメモ

```
sudo apt update
sudo apt upgrade
sudo apt autoremove
sudo apt remove tensorrt
sudo apt install emacs
sudo apt install python3-pip
sudo apt install curl
sudo apt install clang
sudo apt install tk-dev
sudo apt install gfortran
sudo apt install sqlite3
sudo apt install libsqlite3-dev
sudo apt install libssl-dev
sudo apt install libbz2-dev
sudo apt install libglfw3
sudo apt install libglfw3-dev
sudo apt install liblzma-dev
sudo apt install libreadline-dev
sudo apt install libgdbm-dev
sudo apt install liblapack-dev


sudo pip3 install -U jetson-stats
sudo reboot
jtop

cd /usr/local/cuda/samples/
sudo make

tar zxvf sqlite-autoconf-3500000.tar.gz
cd sqlite-autoconf-3500000/
./configure --enable-fts5
make
sudo make install

tar zxvf Python-3.12.9.tgz
cd Python-3.12.9
./configure  --enable-optimizations --enable-shared
make
sudo make install

sudo snap install ollama
ollama ls
ollama run deepseek-r1:1.5b
>>>hello
>>>/bye
ollama ps

export LD_LIBRARY_PATH=/usr/local/lib
pip3 install --upgrade pip
pip3 install numpy==2.0.0
pip3 install open-webui
open-webui serve
```
[Swift]   switch文を簡単に解説！

Swiftで条件分岐をする方法として有名なのがif文ですが、実はもう一つ便利な方法があります。それがswitch文です。


switch文とは
---
switch文は、ある値に対して複数のパターンを照らし合わせて処理を分けるための構文です。簡単にいうと、

「この値が○○だったらこれをする。△△だったら別のことをする」
というように、選択肢ごとに処理を分けることができます。


基本の書き方
---
```swift
let number = 2

switch number {
case 1:
    print("1です")
case 2:
    print("2です")
case 3:
    print("3です")
default:
    print("1〜3以外です")
}
```

- switch の後に分岐したい値を書きます

- case には判定したい値を書きます

- default はどの case にも当てはまらなかったときの処理です

- 各 case の中で break を書く必要はないです


範囲を使ったパターンマッチ
---
数値の範囲に応じて処理を変えたいときも、switchは便利です!

```swift
let score = 85

switch score {
case 90...100:
    print("素晴らしい！")
case 70..<90:
    print("よくできました")
case 50..<70:
    print("もう少しがんばろう")
default:
    print("再チャレンジが必要です")
}
```
- 90...100 は 90〜100点までを含む範囲。

- 70..<90 は 70以上90未満。




文字列にも使えます！
---
文字列の値に応じた処理もできます。
```swift
let fruit = "りんご"

switch fruit {
case "りんご":
    print("赤くておいしい")
case "みかん":
    print("冬にぴったり")
case "バナナ":
    print("エネルギー補給に最高")
default:
    print("知らない果物です")
}
```


まとめ
---
| ポイント      | 説明                       |
| --------- | ------------------------ |
| `switch`文 | 値に応じた複数の分岐処理ができる         |
| `case`    | 条件に一致する値を判定する部分          |
| `default` | どの`case`にも一致しないときの処理（必須） |
| `break`   | Swiftでは不要（自動で止まる）        |

if文では長くなりがちな条件分岐をスッキリ書けるので、ぜひ活用してみてください！
ぜひ参考にしてみてください！👍
【備忘録】モックデータで削除処理のテストコードを書く

## やりたいこと
モックデータをセットした状態で、削除処理が実行出来るかテストコードを書きたい

## 実装
```App.spec.tsx
// 本番データはここのgetAllReocrds関数で取得してくる
import * as api from "../../utils/supabaseFunction";

jest.mock("../../utils/supabaseFunction");

describe("App", () => {
  test("削除ができること", async () => {
    // 初回データ
    // getAllRecordsで取得するデータをモックデータに置き換える
    (api.getAllRecords as jest.Mock)
    .mockResolvedValueOnce([
      { id: 1, title: "てすと", time: "333" },
      { id: 2, title: "てすと2", time: "444" },
    ]);

    // 削除処理
    // deleteRecordでモックデータを削除する
    (api.deleteRecord as jest.Mock).mockResolvedValue({});

    // 削除後データ（1番の要素がなくなる）
    (api.getAllRecords as jest.Mock)
      .mockResolvedValueOnce([
        { id: 2, title: "てすと2", time: "444" }
      ]);

    render(<App />);

    // 初期データの表示を待つ
    const deleteBtn = await screen.findByTestId("delete-button-1");
    expect(deleteBtn).toBeInTheDocument();

    // 削除ボタンをクリック
    await userEvent.click(deleteBtn);

    // 更新後の表示を確認
    const items = await screen.findAllByTestId("item");
    expect(items).toHaveLength(1);
    expect(items[0]).toHaveTextContent("てすと2");
  });
  ```

  ```App.tsx
  {records.map((item) => {
    return (
      <div key={item.id}>
        <p data-testid="item">{item.title}:{item.time}</p>
        <button 
          onClick={() => handleDelete(item.id)} 
          data-testid={`delete-button-${item.id}`}>
          ×
        </button>
      </div>
    )
  })}
 ```

 ## 詰まっていたところ
 モックデータで削除のテストをする際の流れを理解していなかった。
 初期データのモックデータを削除して、それで判定しようとしていた。  
 削除の関数を別で実行して、エラーが出ていなければモックを削除後のデータに置き換える考えが頭になかった。
Swift テキストファイル入力 標準入力 共通コード（2）


# はじめに

ファイルパス名が指定されたら、指定されたファイルからテキストを入力、
ファイルパス名が省略されたら、標準入力からテキストを入力する。

このように動作する **テキスト入力関数（その2）** を作成しました。

[前回記事](https://qiita.com/nak435/items/f8a7d8764e3b085cc7e1)との違いは、ファイル入力の場合は、標準入力`stdin`を再割り当てすることで、以降はどちらの場合も`readLine()`としたことです。
これにより、一括入力とは違い、巨大ファイルサイズにも使用できます。


<br>標準入力`stdin`のファイルへの再割り当ては、次のとおり`freopen`するだけ。

```swift
if let _ = freopen(filepath, "r", stdin) {
    while let line = readLine() {
        //line 処理
    }
} else {
    //ファイルオープンエラー
}
```

# テキストファイル入力 標準入力 共通関数（2）

今回は、イテレータ版のみです。

```swift
struct readTextFile: Sequence, IteratorProtocol, Sendable  {
    @usableFromInline
    internal var eof = false
    init(filepath: String?) throws {
        guard let filepath else { return }
        guard let _ = freopen(filepath, "r", stdin) else {
            throw NSError(
                domain: "MyErrorDomain",
                code: Int(errno),
                userInfo: [
                    NSLocalizedDescriptionKey: "readTextFile: \(String(cString: strerror(errno))): \(filepath)"
                ]
            )
        }
    }
    @inlinable
    public mutating func next() -> String? {
        if eof { return nil } 
        if let input = readLine() {
            return input
        }
        eof = true
        return nil
    }
}
```



## 使い方

上記関数を呼び出す例

```swift:test.swift
import Foundation
let test: () = {
    let arguments = CommandLine.arguments
    let filename: String? = arguments.count > 1 ? arguments[1] : nil
    do {
        for line in try readTextFile(filepath: filename) {
            print(line)
        }
    } catch {
        print(error.localizedDescription)
    }
}()
```

```shell:実行結果
% swiftc test.swift 

% ./test a.txt # filepath
123
ABC

% ./test <a.txt # stdin
123
ABC

% ./test b.txt # file missing    
readTextFile: No such file or directory: b.txt
```

## ちなみに、

AtCoder でも 問題なし。


![arcoder_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/49091d1b-2d58-412d-9ffc-edecdfef52b5.png)


<br><br>**以上**
【要注意】Cloudflareの標準 (Universal) SSL証明書が拒否され始めた

2025年4月15日、同一の秘密鍵の利用が15年を経過していることなどを理由に、対象の証明書が「次のリリース」のGoogle Chrome, Firefoxの信頼されるルート証明書のリストから削除されることになった。
https://www.sectigo.com/resource-library/enhancements-to-root-ca-and-hierarchies

第一弾の対象となるのが、Comodoの管理する"AAA Certificate Services"だ。
![IMG_3875.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41274/12075df8-83d7-444d-aeb3-4009c0f6cf27.jpeg)

聞き慣れないかもしれないが、なんとCloudflareで無料で提供される証明書のルートである。
5月に自動更新されたUniversal証明書も、このルート証明書に紐付く中間証明書によって発行されており、
現状、これを回避するには、月額200ドル以上のプランに加入して、自前のSSL証明書を持ち込むしかない状況だ。

既に、Firefoxの開発版では当該ルート証明書の信頼がされていないほか、
Pythonでお馴染みのcertifiの最新版でも信頼されていない。
そのため、Pythonを利用して作られたAPI連携などで、既に実害が発生している。
（原因不明のAPI疎通不良のため、SaaS会社に問い合わせたところ、本件が判明した）

このままだと、ある日時期リリースのChromeやFirefoxが正式版となった瞬間、
CloudflareのUniversal証明書を利用しているサービスは軒並み接続できなくなる恐れがあり、注意が必要。
既に、Cloudflareのコミュニティにも情報が上がっているが、現状Cloudflare側に動きはないため、今後の動向を注視する必要がありそうだ。
https://community.cloudflare.com/t/cloudflares-chain-root-ca-removed-from-todays-certifi-update/792978

EV SSL証明書の企業名表記がされなくなって久しい。見た目が変わらないならと各社の無料のSSL証明書に頼ることも増えているが、
こういうことがあると、やはり信頼できる証明書を独自で購入して管理も検討したい。
ローコードツールを業務に取り入れる際の課題

近年、**ローコードツール**の普及により、非エンジニアでも業務アプリケーションを開発できる環境が整ってきました。  
私も業務でローコードツールを導入した経験があり、その中で感じた**メリット**と**課題**を整理します。

---

## ✅ 感じたメリット

- **早く作れる**  
  UI・DB・ロジックまで数クリックで作成でき、開発スピードが圧倒的に速いです。

- **人件費を安くすませることができる**  
  高度なプログラミングスキルが不要なため、専門エンジニアに頼らず開発・運用が可能です。

---

## ⚠️ 感じた課題

### 1. フィールド（DBでいうカラム）を簡単に変えられると勘違いし、変えまくる  

「このフィールド、いらなくね？」  
「やっぱ名前変えよう」  
「いや、復活させるかも」  
…みたいな**軽率なノリ**で、GUI上からぽちぽちフィールドをいじり倒されます。

#### 💣 問題の根源：誰でも編集できてしまう「魔法のシステム」

システムがあたかも「誰でも自由に触れて簡単に作れる」ように見えてしまうため、  
本来は設計の意図や連携仕様を理解した上で修正すべき箇所も、**善意のぽちぽちで壊される**リスクがあります。

![みんな作れる.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470238/45b7972c-0671-41e2-9f4b-1721642139f6.jpeg)

> 🧙‍♂️「みんな、つくれる！」  
> 🤖「他のシステムの影響を考えなければ、の話ね」

---

GUIで簡単にフィールドの追加・変更ができるのは確かに便利ですが、  
**その“便利さ”がチーム全体の連携設計をぶち壊す爆弾にもなりかねません**。

---

#### 🧩 例えばこんな事故が起こる

- 他システムと連携していたフィールドを削除 → API連携エラー発生  
- 項目名を安易に変更 → バックエンドや帳票に影響  
- フィールドの意味を変えてしまい、分析結果がめちゃくちゃに

---

「誰でも触れる」は正義。  
でも「誰でも責任を取れる」わけではないというのが難しいところです。

---

### 2. データ量とREST APIの使用回数に制限がある  
- データが増えるとツール側の制限に引っかかることがある  
- APIの呼び出し回数制限で、**外部連携のボトルネック**になりやすい

---

### 3. アプリの項目情報を出力できない → 生成AIと相性が悪い（重要）  
アプリが持つフィールド一覧を**エクスポートできないツールが多く**、  
以下のような問題に直面します：

- アプリ構造を生成AIに渡せないため、自動化や生成効率が悪い  
- 特に**大規模アプリ（200項目超えなど）**は「ぽちぽち作業」が苦痛になる  
- 開発パイプラインへの統合が困難

これだと本末転倒ですね

---

### 4. 柔軟なカスタマイズがしにくい  
- 規定のUI／APIしか使えず、**細かいカスタマイズに限界**がある  
- デザイン調整や複雑な処理は力技になりがち

---

### 5. コードがレガシー化しやすい  
- モダン技術（React、TypeScript、Tailwindなど）が導入しにくい  
- ツール固有のスクリプトはブラックボックス化しやすく、**属人化のリスク**が高い

---

### 6. 結局システムの知識がいる  
- データベース設計、ブラウザのレンダリング手順、API制御など、  
  **基礎的なシステム設計スキルが不可欠**  
- 「ノーコード／ローコードだから誰でも使える」は幻想。  
  規模が大きくなるほど、技術的理解が求められます。

---

## 📝 まとめ

ローコードツールは非常に便利で、プロトタイピングや小規模開発には有効です。  
しかし、業務システムに本格的に取り入れるには、以下の点に注意が必要です：

- **簡単に作れるからこそ、設計の責任が重くなる**
- **拡張性・保守性・連携性を見越した設計が不可欠**
- **生成AIやCI/CDとの連携を意識した運用が重要**

「誰でも作れる」ではなく「誰でも壊せる」ことを肝に銘じながら、  
**正しい設計・運用方針のもとで活用することが鍵**だと感じています。

---

## 💬 おまけ：今後やってみたいこと

- フィールド定義をJSONで出力 → 生成AIでUI＋ロジックを自動作成  
- ローコードツールのUIをコードから直接操作できるプラグイン開発  
- モダンな設計（コンポーネント指向や設計思想）をローコードに取り入れる実験

---

ご意見・経験などがあれば、ぜひコメントで教えてください！

🧠 made with gpt-4o
Claude Codeをセットアップし，GitHub Actionsから使った際のError: Process completed with exit code 1.の解決方法

## エラー(Error: Process completed with exit code 1.)がでた背景

Claude CodeをGitHubのIssueなどから呼び出せるような設定はほぼ自動化されている。

[インストール方法](https://docs.anthropic.com/ja/docs/claude-code/getting-started)に従っtインストールしたあとにリポジトリを開いてclaudeを起動して以下のコマンドを実行する。

```shell
cd <repository>
claude
╭──────────────────────────────────────────────────────────────────────╮
│ > /install-github-app                                                │
╰──────────────────────────────────────────────────────────────────────╯
  /install-github-app
      Set up Claude GitHub Actions for a repository

```

すると`.github/workflows/claude.yml`が作成され，pull requestまで作成される。

あとはマージして`@claude`をメンションするだけだが，`Error: Process completed with exit code 1.`がでてうまく動かなかった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/52709e2b-379b-42f5-b91e-d5669db092ef.png)

---

## 解決方法

### GitHub側にClaudeのアプリを再インストールする

https://github.com/apps/claude からインストールすることができる。
もちろん再度`initial-github-app`をつかっても良いが。

### GitHub Actions Secretの値を差し替える

Claude CodeはGitHub Actions経由で呼び出されているが，この際にClaudeのAPIキーが必要。

ローカルのClaudeと同じAPIキーを使いたい場合には`claude.json`を探してそこにあるAPIキーを使えば良い。
自分の環境の場合にはホームディレクトリ直下にあった。

```shell
find ~/ -name "*claude.json"
/home/sigma/.claude.json
```

```.claude.json
  "primaryApiKey": "sk-ant-apixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
```

:::note info
おそらくClaude Codeインストール直後の初期セットアップを行ったディレクトリに`.claude.json`が作成されているような気がする。
:::

APIキーが取得できたら，GitHub Actions Secretsの`ANTHROPIC_API_KEY`を編集する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/8074b4cb-9434-4c39-9191-0be58a3ce2bb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/f109e607-db1e-4652-9955-9f1088516054.png)

---

上記を行ったところ，無事使用できるようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3718390/f270ac85-6b75-46a7-b09e-381df747b4e3.png)