OmniAICreator/Qiita-1.07M huggingface dataset:
Kerberos認証というものについて

MicrosoftのActive Directoryサービスを活用されている法人のユーザさんはとても多い。
Active Directoryは管理手法が非常に効率的でセキュリティにも強い特徴を持っている。

このActive Directoryではユーザがネットワークにログインする際の認証として、Kerberos認証が認証プロトコルとして採用されている。
では、このKerberos認証とはどういうものなのか。今回の投稿ではKerberos認証について触れていく。

## Kerberos認証に必要なデバイス

- クライアントホスト：リソースにアクセスしたいユーザ
- ドメインコントローラ：後述する
- ターゲットサーバ：リソースのホストとなるサーバ(例：ファイルサーバ、アプリケーションサーバ)

## Kerberos認証の仕組み

Kerberos認証の特徴として、まず先に挙げられるのがチケットベースによる認証だ。

クライアントから認証リクエストを受け取るホストとして、ドメインコントローラと呼ばれるものを用意する。
このドメインコントローラによって認証とチケット発行が行なわれる。

まずユーザがログインを試みる際、クライアントホストからドメインコントローラへ認証のリクエストが飛ばされる。
そのリクエストにはユーザのIDとパスワードが含まれており、ドメインコントローラはそれらの情報と資格情報を照らし合わせて確認を行なう。
照合が認められれば初期チケットが発行される。

発行された初期チケットはドメインコントローラからクライアントホストへレスポンスという形で送信される。
クライアントホストは初期チケットをメモリ内にキャッシュさせる。そこからアクセスしたいターゲットサーバがあればクライアントからドメインコントローラへ当該サービスチケットをリクエストして、ドメインコントローラはそのサービスチケットをクライアントへ返す。

そうしてクライアントはアクセスしたターゲットサーバに返却されたサービスチケットを提示してアクセスが可能になる。

## シングルサインオンの採用

一見すると、ユーザ側のアクションとしてはたった一度のログインで権限のある全てのターゲットサーバへのアクセスが可能なように見えるのだが、実際はアクセスのたびに認証によるサービスチケットが発行されてからのアクセス許可となっている。


この一度のログインで複数のサービスへのアクセスができる機能をシングルサインオンという。
サービスへのアクセスの度にいちいち認証のためのパスワード入力は億劫なのでユーザ目線としても嬉しい機能でサービス側もセキュリティ上の強化が果たせるため、利便性のあるものとなっている。

## ひとりごと
Amazon Prime Videoで配信されている恋愛リアリティ番組、バチェラー・ジャパン シーズン6を妻と二人でああだこうだ言いながら鑑賞している。

1日1エピソード、というルールを決めて現在はep.5を見終えたところ。あんなにいた女性陣が徐々に数人に絞り込まれている。

もう自分は恋愛市場から卒業できた人だから、かなりリラックスしてこの手のエンタメを堪能できている。
出演者は恋人探しとは別にもっと大きな野望を持ってこの企画に参加しているわけだから、プロレスじゃないけど、そのあたりはちゃんと割り引かないとケチばかりつけちゃうから要注意だ。
6/14 tecHub（IT交流会）を秋葉原で開催しました！

![image_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670233/160fa8c2-dd16-4b50-8365-177afd0aa4ea.png)


梅雨に入ったのでしょうか、今週は雨の日が多かったですね。
今月も秋葉原でIT交流会を開催しました！

**目次▼**
<INS>[2025年6月のtecHubを開催しました！](#2025年6月のtechubを開催しました)</INS>
<INS>[tecHubは毎月イベント開催しています！](#techubは毎月イベント開催しています)</INS>
<INS>[参加者の声](#参加者の声)</INS>
<INS>[Discord（tecHubコミュニティ）を運営しています](#discordtechubコミュニティを運営しています)</INS>
<INS>[次回の開催](#次回の開催)</INS>

<h3>2025年6月のtecHubを開催しました！</h3>

![image_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670233/eac7bc6e-a6a3-4e89-9d72-372a5d9c9aa1.png)

6/14にtecHubを秋葉原で開催しました。
参加者は54名となり、大盛況でした。

日付：6/14(土)　14:00～16:30
場所：LIFORK 秋葉原
参加者：54名
内容：IT交流会

<h3>tecHubは毎月イベント開催しています！</h3>

毎月60〜80名ほどの方が参加している人気のイベントです。

・3ヶ月に1度：トークセッションまたはLTと懇親会の2部構成イベント

・その他：リアルでIT交流会イベント

前回は、トークセッション＋懇親会でした。前半は「働き方」をテーマにプレゼンテーション・トークセッションを、後半は懇親会で自由に交流の時間を設けています。
トークセッションでは、外部ゲストを招くこともあります。

懇親会にはゲストも参加し、発表内容をさらに掘り下げてディスカッションすることも可能です！
色々な方が自由に意見・情報交換をできる場となっています。
<h3>参加者の声</h3>

![image_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670233/651c1837-0cc5-4a24-8b5f-10076efa429a.png)

今回も会社員やフリーランス、法人化と様々な働き方をしているITエンジニアが参加しました。
また、エンジニアへの転職を検討している人、Webデザインやシステム開発などの副業に興味を持つ人も参加していました。

「今後のキャリアアップをどうするか？」
「フリーランスの働き方は、実際どんな感じなのか？」
など、幅広い分野と色々なキャリアのトークは、異なる視点や考え方を知る機会になっていました。

参加者からは、
**「30代・異業種からSEに転職したところだったので、参考になる話が聞けて良かった」
「フリーランスのWebデザイナーの人と話せて良かった」
「同年代で違うキャリアを積んできた人の話は興味深かった」
「仕事の自信が経験の中で身に付いた話を聞けてよかった」**
などの声をいただいています。

tecHubは、ITエンジニアがより活躍し、理想のキャリアを切り拓けるようにコミュニティを運営します。
また、今後もイベントを毎月開催していきます。

<h3>Discord（tecHubコミュニティ）を運営しています</h3>

tecHubコミュニティでは、Discordにて次のサービスを提供しております。

■キャリアアップ
・キャリア相談／キャリアプランサポート
・スキルシート査定／レビュー
・転職・フリーランス転向サポート

■システム開発
・スペシャリストに技術相談

Discordの参加はこちらから。

https://discord.com/invite/9eFWdAzuf5

また、キャリアを考える方向けにITスクールのオンライン説明会を開催しています。
「未経験からIT業界に転職を考えている」
「新しいスキルを身につけたい」
今後の働き方を考えている方々が参加しています。

次回の開催は、以下の日程です。
日時：2025年6月18日(木) 20:00〜21:00
開催方法：オンライン配信
参加費：無料

https://tecup.connpass.com/event/355398/

connpassのページは、以下になります。
ウェビナーやオンラインイベントを順次更新していますので、気になったらチェックしてみてください。

https://tecup.connpass.com/

<h3>次回の開催</h3>

次回の開催は、以下の日程を予定しております。

日時：7/19(土)　14:00～16:30
場所：LIFORK大手町
内容：IT交流会
Claudeの契約の仕方次第で切り替えるのに時間がかかる話

Claude ProをAndroidの定期購入で契約すると実はWebから契約するよりもちょっと高い
Webからだと20ドルに対して、Androidの定期購入だと3400円になってる。

MAXプランに切り替えたいなと思い、Androidの定期購入でMAXプランを見てみるとWeb100ドルに対してAndroidは21,250円とドル円のレートがありえないのでWeb版にしようと思いAndroidの定期購入を切った。

そして、Web版でアップグレード画面を開くと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16612/4ee2b096-22fc-4bce-bead-85de215a5f23.png)

と表示されて変更できない。

実はAndroidの定期購入でプランに残り期間があるとWeb版からの更新ができない。

なので、アップグレードするにはAndroidの定期購入の期間が切れるまで待つ必要があるという罠
非エンジニアがClaude 4と数日で第２弾アプリのほぼ完成形まで進行した話

# 第２弾のアプリについて
こんばんは
先日第１弾のスピリットスキャナーというアプリを完成させてよろこんでたおじさんです。

今は予告していたように第２弾アプリを作っていて、もうすぐ完成しそうです。
そして無謀にもGoogle Play Consoleに登録しようとしてます。

今回のアプリは前回のものよりも色々挑戦しています。
とはいえ、ほぼClaudeだよりにはなります。

## 何を作ったのか
「魔法アイテム図鑑」は、日常のアイテムに魔法の力を見出すPWAアプリです。

### 主な機能

* 📸 カメラ撮影 & ファイルアップロード: スマホのカメラまたはフォトライブラリから画像を選択
* 🎭 AI魔法分析: アイテムを「魔法アイテム」として創造的に解釈
* 📚 コレクション機能: 発見したアイテムを図鑑として保存
* ⚡ PWA対応: ホーム画面追加、オフライン対応、アプリライクな体験
* 📱 レスポンシブデザイン: スマホ・タブレット・PCで快適に利用可能

### 技術的な特徴

* Next.js + TypeScriptによる高品質なコードベース
* HEIF/HEIC形式対応（iPhoneで撮影した画像も自動変換）
* Google Analytics連携でユーザー行動分析
* **TWA（Trusted Web Activities）** によるGoogle Play Store配布準備

### なぜこのアプリを作ったのか
単純に思いつきです笑
ダークソウルとかブラッドボーンとかフロム・ソフトウェアのゲームが好きで、あんな世界観を表現できるアプリがあったら面白いんじゃないかなという発想と、それに生成AIでどんな写真や画像でも認識してコメントをつけてくれたら面白いんじゃないかなっていうただそれだけでスタートしました。

あとは非エンジニアであってもやりたいアイデアさえあればこんなものが自分でも作れるっていうのを共有してみたくなりました。

## なにはともあれアプリを触ってほしいです
https://magic-item-encyclopedia.vercel.app/

初心者ゆえ至らないことも多々あると思いますが、贔屓目に見てください。

▼ 画面キャプチャはこんな感じ
![1000007872.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111946/d882431e-1274-4150-b72a-72067e18f567.jpeg)

▼ 鑑定するとこんな感じでAIがそれっぽい感じのテキストを返してくれます
![1000007873.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111946/88fe2d16-ee2a-47a1-93be-30e762aa4570.jpeg)

▼ 写真や物によってはレアやレジェンダリー級の写真が見つかります笑
![1000007875.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4111946/d4df6739-7df8-461e-9557-e925e57c3ead.jpeg)

iphoneのデフォルトの写真形式がHEICとかでうまくプレビュー表示できなかったりとかあったんですが、
jpeg変換したらよくね？なんてこちらから意見したりしてなんとか形になりました。

これからひとまずGoogleに申請する予定ですが、不具合とか見つけた方いらしたら嬉しいです。
たぶんiPhoneでも動きます。

## 次のアプリ
今度は教育アプリを作るつもりで今アイデアをClaudeに相談したものの、なかなか思うような挙動になりません。
第３弾は少し手こずりそうな予感です。

ではでは！

2025/6/17
誤字が散見されたんで修正しました、恥ずかしい
【SQL】JOINを再復習🤝

## はじめに
表題の通り、SQLのテーブル結合について復習ついでに初心者にもわかりやすく記載していますので、気になる方はよろしければ一読いただければと思います:grin:

## 目次

1. [JOINって何？](#-joinって何)
2. [INNER JOIN](#-inner-join)
3. [LEFT JOIN](#-left-join)
4. [RIGHT JOIN](#-right-join)
5. [まとめ](#-まとめ)

## 🪄 JOINって何？
JOINは、`複数のテーブルをくっつけて使いたいときに使うSQLの機能`です。

例えるなら
* 社員の情報（社員ID、名前）が入ったテーブルと、社員の給料情報（社員ID、給料）が入ったテーブルを共通情報である「社員ID」でくっつけて「名前＋給料」と1つの表にすることができます。


## 🪄 INNER JOIN
### 役割
* **共通部分だけを抽出！** 2つのテーブルの「共通部分」だけを取り出す。

### 特徴
* **両方のテーブルにマッチする行のみ**を結果として返します。
* どちらか一方のテーブルにしか存在しないデータは、結果セットには含まれません。

### ユースケース
* 注文データと顧客データがあり、実際に注文した顧客の情報だけを知りたい場合
* ユーザーと投稿があり、投稿があるユーザーの情報だけを抽出したい場合

### 例
「顧客テーブル」と「注文テーブル」から、注文実績のある顧客とその注文情報だけを取得したい場合
```js
SELECT *
FROM 顧客テーブル
INNER JOIN 注文テーブル ON 顧客テーブル.顧客ID = 注文テーブル.顧客ID;
```

## 🪄 LEFT JOIN
### 役割
* **左側のテーブルを「全網羅」！** 左側のテーブル（FROM句で最初に指定したテーブル）のデータを「網羅」したいときに使います。

### 特徴
* 左側のテーブルの全ての行を結果として返します。
* 右側のテーブルにマッチする行があれば、そのデータを結合します。
* 右側のテーブルにマッチする行がなければ、右側のカラムはNULLで埋められます。

### ユースケース
* 全ての顧客リストを表示し、注文実績がある顧客にはその注文情報も表示したいが、注文がなくても顧客情報は表示したい場合
* 全ての製品リストを表示し、売上があればその売上情報も表示したいが、売上がなくても製品情報は表示したい場合

### 例
「顧客テーブル」と「注文テーブル」から、全ての顧客情報（注文がなくても）と、もしあればその注文情報を取得したい場合

```js
SELECT *
FROM 顧客テーブル
LEFT JOIN 注文テーブル ON 顧客テーブル.顧客ID = 注文テーブル.顧客ID;
```

## 🪄 RIGHT JOIN
### 役割
* **右側のテーブルを「全網羅」！**
* LEFT JOINのちょうど逆です。右側のテーブル（JOIN句で後に指定したテーブル）のデータを「網羅」したいときに使います。
* 右側のテーブルを「主役」として、それに紐づく左側のテーブルの情報を付け加える。紐づく情報がなければNULLになる。

### 特徴
* 右側のテーブルの全ての行を結果として返します。
* 左側のテーブルにマッチする行があれば、そのデータを結合します。
* 左側のテーブルにマッチする行がなければ、左側のカラムはNULLで埋められます。

### ユースケース
* 全ての注文リストを表示し、紐づく顧客情報があれば表示したいが、何らかの理由で顧客情報が紐づいていない注文も表示したい場合。
* あまり多くはありませんが、データクレンジングなどで使うこともあります。

### 例
「顧客テーブル」と「注文テーブル」から、全ての注文情報（顧客情報が紐づいていなくても）と、もしあればその顧客情報を取得したい場合
```js
SELECT *
FROM 顧客テーブル
RIGHT JOIN 注文テーブル ON 顧客テーブル.顧客ID = 注文テーブル.顧客ID;
```

## 🎉 まとめ
| JOINの種類 | イメージ | 特徴 |
|-----------|-----------|-----------|
| INNER | 共通部分 | 両方のテーブルにマッチする行のみ |
| LEFT    | 左側を主役、右側を補足 | 左側のテーブルの全行 + マッチする右側の行（なければNULL） |
| RIGHT       | 右側を主役、左側を補足 | 右側のテーブルの全行 + マッチする左側の行（なければNULL） |
HTML/CSS/JS で簡単なドラッグアンドドロップ

# やりたいこと
- ドラッグアンドドロップでファイルを選択するフォームを実現する
- ファイルの簡単なプレビューを表示する

# やり方

## 仕様決め

- ドラッグアンドドロップでファイルを選択する
- 通常のファイルを選択からも選択できるようにする
- プレーンテキストファイルを読み込んで簡単なプレビューを表示する
  - ファイル名
  - ファイルサイズ
  - テキストの一行目
- 何かで使えそうなので、キャンセル・送信ボタンを添えておく

:::note
イメージは Teams のアナウンスのヘッダー画像選択画面です。
:::

## どん
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RNPBppV" data-pen-title="Untitled" data-user="higege-amdeker" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/higege-amdeker/pen/RNPBppV">
  Untitled</a> by higege-amdeker (<a href="https://codepen.io/higege-amdeker">@higege-amdeker</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

:::note
見栄えをよくするため Bootstrap 5 を使っています。
:::
macOSのいくつかの標準機能（および高機能版例）

こんにちは。
macOSの同梱標準機能のいくつかをまとめました。
また高機能版を導入すると、開発時などの効率が良いようです。


| 機能  | 標準（＝同梱）  | 高機能版例  |
| -------- | --------------- | --------- |
| ノート | Notes  | Obsidian・Ulysses  |
| テキストエディタ | TextEdit  | CotEditor・VSCode  |
| ブラウザ  | Safari  | Chrome・Brave  |
| ターミナル  | Terminal  | iTerm2・Warp  |
| アプリ導入  | App Store  | Homebrew  |
| コマンド導入  | (none)  | Homebrew  |
| ランチャー／検索 | Spotlight  | Alfred  |
| ウィンドウ整列  | Mission Control | Raycast |
| マウスカーソル強調  | シェイク（アクセシビリティ機能） | Medusa  |
| 画面拡大  | メタキー＋スクロール（アクセシビリティ機能） |  |
次元圧縮手法の備忘録


## PCA(Principal Component Analysis: 主成分解析)
データの分散を最大限に保持する線形次元圧縮手法。

各データ系列を平均で差をとり、各データ系列同士で共分散の和を計算し、n-1で割り正規化する。固有値分解をすることで、共分散行列を固有値と単位ベクトルのスカラー積で表す。固有値は分散の大きさを表し、分散が大きいほど２つのデータに差があることを示すので、固有値で閾値を持って、選択することで、分散の小さい（データ特性が近い、相関している）データ系列を削除し、次元圧縮することができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/7bfa3fae-a475-4da6-a6aa-fac60f017358.png)

引用：https://ibis.t.u-tokyo.ac.jp/suzuki/lecture/2014/dataanalysis/L9.pdf

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/36524367-2133-4e37-9787-a795f972cfbc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/cbc456a1-784e-4278-9a24-e85a12d8e855.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/afb28ab2-781a-435c-8b68-8eb4485b0d5c.png)


## t-SNE(t-Distributed Stochastic Neighbor Embedding)

高次元と低次元の2点間の差を表す確率分布の差が最小になるように低次元データ求めることで、局所構造を保持する非線形次元圧縮手法。

https://lvdmaaten.github.io/publications/papers/JMLR_2008.pdf

処理手順
1. 高次元の類似性の算出
  ユークリッド距離とガウス分布に基づく2点が近傍にある確率を計算
1. 低次元の類似性の算出
  低次元での2点の座標yi,yjを用いて、t分布（裾野の広い分布）に基づく2点が近傍にある確率を計算
1. KLダイバージェンスで二つの確率分布の差を計算し、最小にするように低次元データ（yi,yj）を決める
  

特徴
高次元データの局所的な構造を保ちながら、低次元へ圧縮している。

t分布
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/a263193b-58cd-473b-8312-4c74dc1b18d0.png)


## UMAP(Uniform Manifold Approximation and Projection)

2018年に提案された、データのトポロジーを保持しながら高速かつ高次元データの構造を表現する非線形次元圧縮手法。

https://arxiv.org/abs/1802.03426

ハイパーパラメータの調整により結果が大きく変わるため、ユーザーによる調整が必要。

UMAPもt-SNEと同様、高次元の確立分布と低次元の確立分布の差が最小になるように低次元のデータを決める。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/a2fcaa7c-a3f4-47f1-9146-47f67d54f901.png)

集合を数学的に表す方法
 - クリスプ集合・・・所属を0/1の2値で表現
 - ファジー集合・・・所属を0~1の実数で表現

UMAPでは、K近傍に属するかどうかをファジー集合で定義、

i集合に属する近さを表す式。この式を最適化する。
```math
v_{j|i} = \exp(\frac{-(r_{ij}-\rho_i)}{\sigma_{i}})
```

```math
r_{ij}・・・二点間の距離
```

```math
\rho_i・・・点iの最近傍の距離
```

```math
\sigma_{i}・・・点の密集度の調整変数
```

```math
\Sigma_j v_{ij} = log_2 kで二部探査で\sigma_{i}を求める
```

上記式をij, jiで計算し、対象化する。
低次元の分布はt分布で近似する。
高次元と低次元の分布を交差エントロピーで分布の差を計算し、最小化することで低次元のデータを算出する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/5c979aaf-41d8-4b40-a0c1-f915aae5ab54.png)
引用：https://kntty.hateblo.jp/entry/2020/12/14/070022

https://pair-code.github.io/understanding-umap/

## 参考文献

https://boritaso-blog.com/umap/

https://kntty.hateblo.jp/entry/2020/12/14/070022

https://kntty.hateblo.jp/entry/2020/12/14/070022
コピペからの脱却宣言

# はじめに
改めて、Reactを中心とした学習とアウトプットを本気で頑張るぞ、と思いこの記事を書きました。

# ちょっとした経歴
大学卒業後にWebデザインスクールでデザインとHTML/CSSを学習後、(新卒ではありませんが)現在の会社に未経験で入社。
実務は現状1年程度です。

# 現状
- React,TypeScriptを用いて画面実装は行なっているもののほぼコピペ
- JavaScriptも基本構文のみなんとなく理解しているレベルなのに「フレームワークなんて使っちゃっていいのか…」「TypeScriptもstringとかnumberとかはわかるけどジェネリクスはわからない」という状況。 
- useState,useEffect程度は知識としてありますがuseEffectに関しては何も見ずには正直書けない
- 現在参画しているプロジェクトの皆さんのコードを見て、viewModel, react-hook-formの書き方を把握しているレベル
-  Progate,Udemy,ドットインストール,書籍などをそのままこなして満足して知識が身についていない
- 誰にもできるタスクをこなす毎日で「このままでいいのか」という不安がつきまとう

# 学習を始めるきっかけ
コピペ作業が続き、今後のキャリアと現状を考えた時にUdemyや本での学習では一生基礎しかわからない、と不安や危機感を感じたため。

# 目標
- 短期：Reactを一から学習し直して、わからないを徹底的に潰す。 
- 中期：自分の実現したい機能や処理を実現させる！ 
- 長期：Reactで自分が欲しいサービスを実装する。LTに積極的に参加する！
【Next.js】next build時にTypeScriptのエラーを無視する方法


## はじめに

`next build`を実行した際にTypeScriptのエラーが存在する場合、ビルドは失敗します。

TypeScriptのエラーを無視してビルドする設定について記述します。

## 設定方法

`next.config.js`に以下を追記します。

```javascript
module.exports = {
  typescript: {
    ignoreBuildErrors: true,
  },
}
```

すると`next build`実行時にTypeScriptのエラーが存在してもビルドされるようになります。

## 参考

https://nextjs.org/docs/app/api-reference/config/next-config-js/typescript
[Kotlin] 'by'に対して has no method 'getValue'

# 事象
以下のような`by`を使ったコード
```Kotlin
val state by store.state.collectAsState()
```
`by`に対して
```shell-session
Type 'androidx.compose.runtime.State<com.studiomk.ktca.sample.counter.Counter.State>' has no method 'getValue(Nothing?, KProperty0<*>)', so it cannot serve as a delegate
```

# 解決方法
```kotlin
import androidx.compose.runtime.getValue
```
エラーそのままだが`by`は実際には`getValue`を呼び出している
paltに対応していないフォントで擬似プロポーショナル組

## はじめに

OpenTypeフォントには「palt（Proportional Alternate Widths）」という機能があります。これは、字形の左右の余白を調整し、いわゆるプロポーショナルな文字組を実現するための仕組みです。CSSでは`font-feature-settings: "palt"`として有効化します。

しかし、このpaltはすべてのフォントで使えるわけではありません。InDesignでは「オプティカルカーニング」という名称でプロポーショナルメトリクスを持たないフォントについても字形に基づいた詰め処理を提供しており、日常的に使用されていると認識しています。本記事ではWebページやCSS組版における代替案を2つ紹介します。

以下の例で使用しているのは「[Zen Kaku Gothic Antique](https://github.com/googlefonts/zen-kakugothic)」です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1550728/2a1b83c8-6296-48ac-bec4-4bf5dbfecab4.png)

あるフォントが提供しているOpenType機能を調べるには`otfinfo`コマンドが便利です。以下の通り、Zen Kaku Gothic Antiqueはpaltを提供していません。

```
$ docker run --rm --interactive --tty --mount type=bind,source=.,target=/workdir --workdir /workdir registry.gitlab.com/islandoftex/images/texlive:TL2024-historic otfinfo -f ZenKakuGothicAntique-Regular.ttf
aalt	Access All Alternates
case	Case-Sensitive Forms
ccmp	Glyph Composition/Decomposition
frac	Fractions
fwid	Full Widths
hwid	Half Widths
kern	Kerning
mark	Mark Positioning
mkmk	Mark to Mark Positioning
ordn	Ordinals
sups	Superscript
vert	Vertical Writing
vkna	Vertical Kana Alternates
vrt2	Vertical Alternates and Rotation
```

## Canvasで字形を解析して詰める

https://github.com/u1f992/optical-kerning

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1550728/9196450a-458e-4dcc-a4dd-80471603b0cb.png)

まず紹介するのは、Canvasを使用するアプローチです。1文字ずつ文字を描画して、ビットマップ画像を解析して字形（この実装では凸包）を取得し、詰め幅を得ます。テキストノードを個別の`span`要素に分け、それぞれに`letter-spacing`を適用することで文字間隔を調整します。

この方法は、字形そのものに基づいた詰め処理を行うため、比較的複雑な形状も扱えるのが特徴です。「チ」と句点「。」のようにアキが噛み合った文字同士なら、潜り込むような間隔で並べることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1550728/ed8276e0-e4f4-4c0f-b2ca-be4d7bb37e5a.png)

一方で、この処理をクライアント側でのスクリプト実行でおこなう場合、初回ロード時の処理負荷が高くなる課題もあります。画像サイズを小さくすれば負荷は軽減されますが、そのぶん形状の精度は下がります。対策として、上記の実装では、JSOM文字列で詰め量を文字ごとにキャッシュできるようにしてあります。またNode.js（JSDOM）でも使えるため、事前にサーバー上で詰め処理を適用したHTMLを生成できるようになっています。

## フォントファイルを加工してpaltを有効にする

https://github.com/u1f992/add-pseudo-palt

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1550728/639cdb63-97c4-4f61-81a4-691c8a39d234.png)

もうひとつの方法は、フォントファイルそのものを加工して、疑似paltを追加・有効化するというものです。具体的には、フォントのGPOSテーブルに細工しています。

```
$ docker run --rm --interactive --tty --mount type=bind,source=.,target=/workdir --workdir /workdir registry.gitlab.com/islandoftex/images/texlive:TL2024-historic otfinfo -f palt-0_5.ttf | grep palt
palt	Proportional Alternate Widths
```

この方法では、加工後のフォントファイルを一度生成すれば、OpenType機能に対応したすべてのアプリケーションでpalt機能を利用できるようになります。HTMLやCSSに特別な工夫を施す必要がなく、クライアント側での処理負荷も発生しません。

ただし、フォントファイルの改変および再配布には注意が必要です。また、この手法では、元の余白以上の詰めは起こらず、あくまで機械的な均等処理に留まります。
死因：イキリ電源パカパカ

# 地獄の幕開け

ノートパソコンの裏面のネジが、**外れていた**。  
――ただそれだけの、小さな、小さな出来事だった。

だが、それがすべての始まり。  
まさかそこから地獄が展開するとは、誰が予想できただろうか。

結論から言っておく。  
この記事はまだ**完結していない**。解決編ではない。  
そして、**ROMライターによる復旧記録を期待している人は回れ右**だ。

# イキった代償

事件は、ささいな「仕様変更」から始まった。

ノートパソコンを開け閉めするだけで、**電源ボタンが物理的に押される**ようになっていたのだ。  
ボタンがケースに干渉し、パカパカするたびに電源がON/OFFされるという謎機能が爆誕。

当然、普通なら即修理すべき案件だ。  
しかし、私はそれを**面白がってしまった**。

> 「馬鹿みたいだろｗ」  
> と、友人に見せながら、笑っていた――そのときまでは。

次の瞬間、パソコンは**沈黙**した。  
画面は映らず、ファンは全力で唸り、光るのはキーボードだけ。  
完全に、**死んだ**のだった。

## 機種

- **MSI GF63 Thin 10UC-629JP**

最低限のゲームができる、薄型でコスパ良いやつ。  
それが――死んだ。

## 症状

- ディスプレイ出力が来ない（＝画面真っ暗）
- ファンが全力で回り続けている（うるせえ）
- キーボードだけは点灯している（ここだけ元気）

電源は入る、ファンは回る、でも**何も映らない**。  
誰かのせいにしたいが自分の顔しか映らない

# 原因推察

この症状、どこかで見たことがある。

自作PCで**CPU補助電源を挿し忘れたときのアレ**と瓜二つなのだ。

PCの起動プロセスはだいたい共通していて、めっちゃざっくり言うとこんな感じ

1. CPU
2. BIOS読み込み
3. DRAM
4. VGA（GPUとか）
5. Boot

この順番でハードウェアに異常がないかチェックされながら進行する。  
この一連の流れを「**POST（Power On Self Test）**」と呼ぶ。

POSTのどこかでコケると、**ブートデバイスが選ばれず、OS起動には至らない**。

---

で、今回の状況を振り返る。

- ファン → 全力で回っている  
- ディスプレイ → 完全に無反応  
- キーボード → 元気に光散らかしている  

この時点で、**マザーボード全体が焼き尽くされたわけではなさそう**だと判断できる。  
電源ラインや組み込み系はまだ生きている気配がある。

しかし、**ファンに制御信号が行かず、最大電圧で回り続ける**というのはPOSTの初期段階、  
具体的には「CPU or BIOSが読めてない」時に起こりがちな現象。

---

つまり──  
> **BIOSチップが論理的に死んでるんじゃね？**

という結論に至った。

いや、マジで。  
電源パカパカしてただけなのに、  
**罪、重すぎませんか？？？？？**

# やったこと

さすがにBIOSチップを直接触った経験はない。  
なので、まずは「**ほんとにBIOSが死んでるのか？**」を確信するために、いろいろ試してみた。

やったことは主にこの2つ：

1. CMOSクリア  
2. M.2 SSDの確認

---

## CMOSクリア

CMOSクリアってなんぞ？という人のために、ざっくり解説。

CMOSとは、**Complementary Metal-Oxide Semiconductor（相補型金属酸化膜半導体）**の略。  
トランジスタ構造の一種……らしい。正直詳しくはよくわからん。

---

### CMOSに保存されているもの

- **BIOSの設定情報**  
  （ブート順・CPU設定・セキュリティ・ファン回転数など）  
- **時刻情報**  
  （Windowsの右下にあるアレ）

この時刻情報がズレてると、通信エラーや証明書エラー、ファイルの保存時刻が逝かれるんじゃ。
1970年1月1日によくタイムスリップしたことない？
時刻情報が吹っ飛んだとき、UNIX系だと1970年1月1日を起点としてるんからなんだよね

まぁWindowsの起点は1601年1月1日なんだけど
グレゴリオ暦の整合性とか、VMS系の影響とか、大人の事情があるらしい。

時刻リセットしてるときは覚悟決めてマザボ弄ろうな！！先生との約束だぞ

---

### CMOSは低消費電力型のRAM
  
CMOSは**電源が切れたら内容が消えるRAM**なんだけど、めちゃくちゃ低電力で動く。  
なので、常時電流を供給するために**ボタン電池（CR2032など）**が使われてる。

---

### つまり、CMOSクリアとは？

> 「ブートおかしいから、一回電池抜いて初期化しとくか」

ボタン電池を抜いてから電源ボタンを連打すると、**トランジスタが放電されて初期化**される。  
最近のマザボは全部がRAMってわけでもなく、一部はFlash ROMで保持されてるけど、  
それでも「おまじない」的に使われ続けているのがCMOSクリア。

昔からの名残で、「BIOS設定保存領域」＝CMOS って呼び続けられているわけ。

---

### で、結果どうなったかというと？

> **意味なかった**


 **知ってた！！！知ってたけども！！！**  
<br>
  **...私は……楽をしたかった！！！！**

---

## M.2 SSDの確認

次に疑ったのはストレージ。  
M.2 SSDをUSB化できるケースにぶっ挿して、他のPCで読み込めるかをチェック。

### 結果：

- **データは全部残ってた**  
- **別デバイスから普通にブートできた**

つまり、**SSDは無罪。**  
「メモリコントローラが死んでたらブートすらできんから……（1敗）」

---

### 小まとめ：

BIOS → 死亡疑惑濃厚  
CMOS → お祓いしても効果なし  
SSD → 生存確認済み  
残る道はひとつ……

**ROMライター、出番だ。**

# これからやること

いよいよ次のフェーズ――  
**ROMライター、出陣。**

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4115205/302b604b-406d-411c-99fa-e76547acde0d.png)

クソ雑魚駆け出し赤ちゃんが、なぜかROM焼きに手を出そうとしています。  
誰か止めてくれ

---

BIOSチップの型番特定は済んでいるので、あとは読み出して書き戻すだけ……  
のはずなんだけど、**ROMライターって意外と罠が多い。**

特にクリップミスや電圧設定ミスで、**BIOSチップを物理的に壊す可能性**もあるので、  
**本当にやる場合は自己責任でお願いします。**

私も一歩間違えば焼き殺しかねないので、記事にできるようがんばります……

誤りや指摘があればめっちゃありがたいです！！！
Personal Dashboard

Claude Codeを使って開発した最初の練習プロジェクト。
どうでもいい情報しかないけど、APIで気象情報を取ったり、システムの時刻を表示したりできるウェブアプリにはなった。

パーソナルダッシュボード
https://tamaden55.github.io/personal-dashboard/
高山慶Tips：エンジニアは引き算の美学を心得よ

高山慶と申します！

エンジニアと聞くと、「いかに多くの機能を実装するか」「どれだけ高度なことができるか」といった“足し算の世界”を想像する人が多いかもしれない。確かに技術を積み上げていく力は重要だ。しかし、本当に優れたエンジニアは、「引き算の美学」を理解している。

無駄をそぎ落とし、本質だけを残す。その姿勢こそが、洗練されたプロダクトを生み出し、結果としてユーザーにとって最も価値ある体験を提供するのだ。

## 便利 ≠ 複雑

私たちが普段使っているアプリやWebサービスの中で、「便利だ」と感じるものには共通点がある。それは「シンプルであること」だ。

たとえば、Googleのトップページ。機能的には検索バーとロゴがあるだけ。それでも世界中のユーザーが迷うことなく使える。逆に、ボタンやリンクが多すぎるサイトは、それだけでユーザーの思考を停止させてしまう。

これはシステム開発にも同じことが言える。クライアントから「こんな機能も欲しい」「あれもできたらいい」と要望が出たとき、すべてを鵜呑みにして実装するのは簡単だ。しかし、機能を詰め込みすぎると、ユーザーは混乱し、使われなくなる。

だからこそ、エンジニアは「本当にそれは必要か？」と問い続けるべきだ。

## 引き算は「勇気ある選択」

何かを削るという行為は、決して後ろ向きな判断ではない。むしろ「最も重要なものに集中する」という前向きな選択だ。

たとえば設計段階で、複数の機能候補が並んだとする。その中で、ユーザーが最も求めていることは何か、事業上のインパクトが大きいのはどれか──。そういった視点で選別し、「やらないことを決める」ことが、プロダクトの方向性を明確にする。

これは技術選定にも通じる。多機能で高度なフレームワークを選んだ結果、開発スピードが落ち、チームが混乱するのでは意味がない。必要最小限の技術で、最短距離で価値を届ける。引き算は、経験を積んだエンジニアほど自然に選ぶ戦略なのだ。

## コードも引き算で美しくなる

「少ないコードで同じ機能を実現する」ことに、美しさを感じたことがあるだろうか？

冗長なif文、ネストの深いロジック、何度も同じ処理を繰り返すスニペット。最初は動いていたとしても、保守性や可読性が損なわれ、あとで必ず自分や他の誰かが苦労することになる。

逆に、余計な処理を削り、関数を分割し、意味のある命名をするだけで、コードはぐっと読みやすくなる。「この人、気が利くな」と思わせるようなコードを書く人は、引き算の感覚を身につけている。

## 成熟したエンジニアは「削る」ことで信頼される

駆け出しのころは「何でもできます」「こんな機能もつけられます」とアピールしたくなる。だが、成熟したエンジニアは違う。

「その機能は、今回は不要です」
「この仕様は複雑になるので段階的にしましょう」
といった“提案型の削除”ができる人は、クライアントやチームから信頼される。

なぜなら、単に実装するだけではなく、プロダクトの成功を本気で考えていることが伝わるからだ。

---

## 終わりに：足すことは誰でもできる。削ることは、信念がいる。

エンジニアは、技術を積み重ねる職業であると同時に、「何をあえてやらないか」を判断する職業でもある。
だからこそ、機能を増やすときにはワクワクしつつも、それを“削る”ときにはもっと真剣であれ。

プロダクトもコードも、人の心も──
本質だけを残すことで、美しさと強さが際立つのだ。

「引き算の美学」。それを心得たとき、あなたは一段階上のエンジニアになる。
第4回] Javaでクリニック向け予約・問診アプリを一から作ってみる 〜管理者画面で予約情報を確認する〜

# ✅はじめに
こんにちは！
Javaで予約・問診アプリを一から作るシリーズ、第4回目です。
今回は、管理者用の画面で予約一覧を表示する機能を作っていきます。
（前回までの内容は、患者さんが予約を入れるところまで作りました！）

予約データが正しくデータベースに保存されているか確認できるように、一覧表示の画面を作成していきます💪

# 🎨管理者画面のUI設計
まずは管理者用の画面を簡単に作ります。
SwingのJTableを使って、予約データを表形式で表示できるようにしてみました。すごくシンプルなつくりなので、あくまで簡易版のイメージです。
今回のUIはこんな感じの作りです👇

・タイトル: 「予約一覧」
・表示: JTextAreaでデータをテキスト形式で表示
・スクロール対応: JScrollPaneでスクロールできるように
・データ: SQLiteに保存された予約データ

# 🛠️ コード全体
以下が今回のコードです👇
（Swingで画面を作り、JDBCでデータベースにアクセスしています）
```
package app;

import javax.swing.*;
import java.awt.*;
import java.sql.*;

public class ReservationViewer {

    public static void main(String[] args) {
        JFrame frame = new JFrame("予約一覧");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(600, 400);

        JTextArea textArea = new JTextArea();
        textArea.setEditable(false);
        JScrollPane scrollPane = new JScrollPane(textArea);
        frame.add(scrollPane, BorderLayout.CENTER);

        // DBからデータ取得
        try {
            String dbPath = "resources/db/reservation.db";  // 相対パスの場合
            Connection conn = DriverManager.getConnection("jdbc:sqlite:" + dbPath);
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery("SELECT * FROM Reservation");

            StringBuilder sb = new StringBuilder();
            while (rs.next()) {
                sb.append("ID: ").append(rs.getInt("id")).append("\n");
                sb.append("名前: ").append(rs.getString("name")).append("\n");
                sb.append("日付: ").append(rs.getString("date")).append("\n");
                sb.append("時間帯: ").append(rs.getString("time_slot")).append("\n");
                sb.append("症状: ").append(rs.getString("symptoms")).append("\n");
            }

            textArea.setText(sb.toString());
            rs.close();
            stmt.close();
            conn.close();
        } catch (Exception e) {
            e.printStackTrace();
            textArea.setText("データベースの読み込みに失敗しました。");
        }

        frame.setVisible(true);
    }
}
```

# 🏥 実行結果のイメージ
アプリを実行すると、こんな感じでデータが表示されます👇
![予約情報確認用フォーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/867423/5b21f869-1515-46c3-8c92-e9b62a894303.png)

# 💡 コードのポイント
・データベースへの接続
jdbc:sqlite:パスでSQLiteに接続しています。

・データの取得
SELECT * FROM Reservationで予約データを全件取得しています。

・JTextAreaに表示
取得したデータは文字列に整形して、JTextAreaに表示しています。

・スクロール対応
件数が増えても大丈夫なように、JScrollPaneでスクロールできるようにしています。

# 🗒️ おわりに
これで、管理者が予約データを簡単に確認できる画面ができました！
次回は、この予約データに対して、削除や更新の機能を追加したり、見やすい表形式（JTable）での表示にチャレンジしていく予定です！
Render.com を使ったアプリケーション公開方法

# はじめに
無料でアプリケーションを公開する方法がないか探していく中で、Render.com 上にアプリケーションを立ちあげる、という手段に落ち付いたので、アプリ公開の備忘を兼ねて作成しています。

# Render.com とは
Render.com は、Webアプリケーションやデータベースなどを簡単にデプロイ、ホスト、スケーリングできるクラウドプラットフォームです。
Render.com を利用すると、GitHub や GitLab などの Git リポジトリと連携してアプリケーションをデプロイできます。

# アプリ公開の手順

## 前提条件
  * Git リポジトリに公開したいアプリケーションのコードがあること（GitHub, GitLab, Bitbucketなど）
  * [Render.com](https://render.com/) のアカウントを所有していること
　* Flaskを用いたWebアプリを想定
## 手順詳細

#### 1\. Render.com にログインし、新規サービスを作成
1.  Render.com のダッシュボードにログイン
2.  ダッシュボードの右上にある「**New +**」ボタンをクリック
3.  作成したいサービスのタイプを選択
      * **Web Service**: バックエンドAPI、Webアプリケーション、フロントエンドアプリケーションなど、HTTP リクエストを受け付けるサービス
      * **Static Site**: HTML, CSS, JavaScript のみで構成される静的サイト
      * **Private Service**: 外部からアクセスできない内部サービス（バックエンドからのみアクセスされるAPIなど）
      * **Background Worker**: バックグラウンドで実行される非同期処理
      * **Cron Job**: 定期的に実行されるタスク
      * **Databases**: PostgreSQL, Redis など
      * **ClickHouse**: データウェアハウス
 今回は、Flaskを使ったWebアプリなので、**Web Service**を選択

#### 2\. Git リポジトリを接続

1.  選択したサービスタイプの設定画面で、「**Connect a repository**」セクションを見つける
2.  GitHub, GitLab, Bitbucket のいずれかを選択し、アカウントを連携
      * 初めて連携する場合は、Render.com に Git サービスの認証を許可する必要がある
3.  連携が完了したら、公開したい**リポジトリ**を選択
4.  次に、デプロイする**ブランチ**を選択

#### 3\. サービス設定の構成

リポジトリとブランチを選択すると、Render.com が自動的にプロジェクトを分析し、いくつかの設定を提案。必要に応じて以下の項目を設定・確認

  * **Name**: サービスの識別のための名前（例: `my-web-app`）
  * **Build Command**: アプリケーションをビルドするためのコマンド
      ```python
      pip install -r requirements.txt
      ```
  * **Start Command**: アプリケーションを起動するためのコマンド
      ```python
      gunicorn main:app
      # mainはファイル名 appはmain.py上の関数名
      ``` 
#### 4\. サービスを作成し、デプロイを開始

1.  すべての設定を確認したら、画面下部の「**DEploy Web Service**」をクリック
2.  デプロイの進行状況は、Render.com ダッシュボードのサービス詳細ページで確認できる

#### 5\. デプロイの確認

1.  デプロイが成功すると、ログの最後に「`Done`」のようなメッセージが表示される
2.  サービス詳細ページの上部に、公開されたアプリケーションのURLが表示される
3.  そのURLにアクセスして、アプリケーションが正常に動作しているか確認

# さいごに
無料でアプリが公開できるということで、Render.comを使ってみました。
DBに制約がある（確か、sqlite等のファイルは更新できなかったり、無料だと使えるDBにも制限がかかっている）などの不便な点はあるものの、簡単に公開できるアプリが無料で作成できるのは魅力的に感じました。
計算をはやくなる方法



## 【1】1〜100 を九九形式に変換（例：72 → 8×9）＋即座の素因数分解

```plaintext
例：  
36 = 6×6 = 2² × 3²  
56 = 7×8 = 2³ × 7  
99 = 9×11 = 3² × 11  
84 = 7×12 = 2² × 3 × 7  
100 = 10×10 = 2² × 5²  
```

九九形式の対応表（1〜100）と素因数分解一覧は必要なら一括出力可能。

---

## 【2】1〜10 までで割り切れるか判定（n: 1〜100）

```plaintext
割り算で余り0か（n % x == 0）を即判定：

例：
84 → 1〇, 2〇, 3〇, 4〇, 5×, 6〇, 7〇, 8〇, 9×, 10×
→ 84 は 2, 3, 4, 6, 7, 8 で割り切れる
```

---

## 【3】A = B ⇔ B = A（等式の対称性）

**等式は対称（対等）であり、左右を入れ替えても成立：**

```plaintext
例：7×3 = 21 ⇒ 21 = 7×3
    a + b = c ⇔ c = a + b
```

---

## 【4】加法定理の逆（逆方向の式変形）

```plaintext
cos(A+B) = cosAcosB − sinAsinB  
cosAcosB = ½[cos(A+B) + cos(A−B)] ← 加法定理の逆  
sinAcosB = ½[sin(A+B) + sin(A−B)] ← 加法定理の逆

逆変形は積→和の公式
```

---

## 【5】頻出：2乗・累乗・小数⇔分数

```plaintext
2乗：
1² = 1, 2² = 4, 3² = 9, ..., 10² = 100

累乗（頻出）：
2³ = 8, 2⁴ = 16, 3³ = 27, 5² = 25

小数↔分数：
0.5 = 1/2, 0.25 = 1/4, 0.75 = 3/4, 0.2 = 1/5
1.5 = 3/2, 0.333... = 1/3, 0.666... = 2/3
```

---

## 【6】さくらんぼ算（和と差で分解：足し算の補助）

```plaintext
7を「さくらんぼ」で 3 と 4 に分ける
→ 7 = 3 + 4  

13 → 10 + 3  
17 → 10 + 7  
15 → 7 + 8（対） など
```

---

## 【7】掛け算で10の倍数を作る（工夫例）

```plaintext
25 × 4 = 100  
5 × 2 = 10  
125 × 8 = 1000  
13 × 10 = 130  
```

---

## 【8】分配法則を活用して瞬時に暗算

```plaintext
13 × 11 = 13 × (10 + 1) = 130 + 13 = 143  
27 × 11 = 27 × (10 + 1) = 270 + 27 = 297  
```

---

## 【9】A² = (A + B)(A − B) + B² の確認

```plaintext
左辺：A²  
右辺：(A+B)(A−B) + B² = A² − B² + B² = A² ✔
よって恒等式
```

---

## 【10】√ の式変形（最速計算）

例：

$$
\sqrt{A^2 - B^2} \quad A=\frac{1}{\sqrt{2}},\ B=\frac{1}{\sqrt{8}}
$$

$$
\frac{1}{\sqrt{2}} = \sqrt{\frac{1}{2}},\quad \frac{1}{\sqrt{8}} = \sqrt{\frac{1}{8}} = \frac{1}{2\sqrt{2}}
$$

$$
\left(\frac{1}{\sqrt{2}}\right)^2 - \left(\frac{1}{2\sqrt{2}}\right)^2 = \frac{1}{2} - \frac{1}{8} = \frac{3}{8}
$$

$$
\sqrt{\frac{3}{8}} = \frac{\sqrt{6}}{4}
$$

---

## 【11】(133)/(171) は 171 − 133 = **38** の素因数分解

```plaintext
38 = 2 × 19  
→ 素因数分解：38 = 2 × 19
```

さらに、分数 133/171 を約分できるか？
→ 最大公約数 GCD(133,171) = 19

よって：

$$
\frac{133}{171} = \frac{7×19}{9×19} = \frac{7}{9}
$$

---
学習時間記録アプリを作成し終えたので振り返る

## 作成したもの
学習時間と学習時間を記録するアプリ  
- 登録・編集・削除が可能
 
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/683820/f971ae94-3eba-4f2f-9cd2-d35cb43a8c47.gif)

## 実装環境
- フロントエンド：React+ChakraUI+(Typescript)
- デプロイ環境：Firebase
- DB：supabase
- 他
  - GitHubActionsでCI/CD対応
  - react-hooks-tesling-libraryでテスト実施

## 学び+反省点
#### 学び
- TypeScriptの型指定に慣れてきた
- テストコードをたくさん書いたので、何を書くべきかや書き方を覚えてきた
- Firebase・CI/CDについて理解し、動かせるようになった

#### 反省点
- 見た目や構造
    - 動くものを作ることを最優先としたため、デザインやコンポーネント化などの考慮が後回しになった
    - 終盤で見た目を整えようとしたが、CSSあてづらい構造になっていて断念した
- テストについて
    - 最低限動いて欲しいパターンのみテストを実施した形となった。エラーパターンのテストなど実施していないテストも多く、いかに不具合をテスト実施時に潰せるようになるかが今後の課題
- 動作面
    - 非同期処理に関しての理解が甘く、とりあえずawaitで待機させようとする節があった。処理速度なども考え、最適な場面で非同期対応を行えるように実装してきたい

## 最後に
実装前にある程度デザインなど、設計を考える大切さを痛感した作成期間でした
次何か作る際は、反省点として上げた点を克服出来るよう進めていきたいです

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼

https://projisou.jp
SwiftUIのNavigationStackを簡単に説明してみた！

本記事では、NavigationStack の基本的な使い方を簡単に説明してみました！


 NavigationStackとは？
 ---
NavigationStack は、画面の遷移を階層構造で管理する新しいナビゲーションの仕組みです。

```swift
NavigationStack {
    List {
        NavigationLink("詳細へ", value: "詳細画面")
    }
    .navigationDestination(for: String.self) { value in
        Text("遷移先: \(value)")
    }
}
```
NavigationStackの基本構造
---
1. NavigationStack { ... }
ナビゲーションの起点になるビューです。

2. NavigationLink
リンクをタップすると遷移します。遷移先の情報（データ）を value として渡します。

3. navigationDestination(for:_: )
NavigationLink で渡された型に応じて、遷移先の画面を定義します。


まとめ
---
- NavigationStack は NavigationView の後継として、より柔軟で安全なナビゲーションを提供

- value と navigationDestination(for:) の組み合わせで、データ駆動の遷移が可能に



ぜひこの記事を参考にNavigationStackを使ってみてください！👍
Helmコマンドまとめ

## はじめに
Helmの基本的なコマンドをまとめました。
超初心者なのでまずは基本的な単語をおさらいします。

**chart**
アプリケーションをデプロイするために必要な、Kubernetesのリソース定義や設定ファイルが含まれます。
以下のような構成要素を持ちます。
- Chart.yaml: Chartのメタデータ（名前、バージョンなど）
- values.yaml: 設定値を定義するファイル
- templatesフォルダ: Kubernetesのマニフェスト（YAMLファイル）のテンプレート
- chartsフォルダ/: 依存関係のある他のChart

**Hub**
Helmのパッケージ（Chart）を検索・共有するためのリポジトリの集合体です。

**repositories**
Helm Chartを保存・管理する場所です。
- パブリックレポジトリ: 公式やコミュニティが提供するChartを公開
- プライベートレポジトリ: 独自のChartを管理し、アクセスを制限可能
- ローカルレポジトリ: 開発環境で使用するためのレポジトリ

## コマンド一覧

アプリケーションのインストール
```
helm install [release-name] [chart-name]
ex) helm install my-site bitnami/wordpress
```

アプリケーションのアップデート
```
helm upgrade [release-name] [chart-name]
ex) helm upgrade nginx-release bitnami/nginx

# chartのバージョンを指定
helm upgrade [release-name] [chart-name] --version 18.3.6
```

過去のリビジョン履歴を表示
```
helm history [release-name]
helm history my-site
```

過去のリビジョンに戻す
```
helm rollback [release-name] [revision-number]
```

アプリケーションのアンインストール
```
helm uninstall [release-name]
helm uninstall my-site
```

Helmのバージョン確認
```
helm version
```

Chart検索
```
# Hubからchartを検索
helm search hub [chart-name]

# repositoriesからchartを検索
helm search repo [chart-name]
```

Chart RepositoryをローカルのHelm環境に追加
```
helm repo add [repositories-name] [repositories-URL]
```

既存のrepositoriesを一覧表示
```
helm repo list
```

ローカルのrepositoriesを更新
```
helm repo update
```

インストールされているリリース（アプリケーション）の一覧表示
```
helm list
```
【Lean4】Lakeで立ち上げたプロジェクトをビルドする

` lake new [package_name] `
でプロジェクトを作成して
` cd [package_name] `
でフォルダを移動して
` lake build`
でたぶんデフォルトのプロジェクトがビルドされる。
ビルドされたファイルは、
` \build\bin\ `
にあるから、ターミナルから動かすと、
` Hello, world! `
と出てくれる。

本当はもっと高度なことがしたかったが、初歩の初歩で躓いて
ここまでしかできなかった。
Arduino UNO R4 MinimaでDCファンを動かす

Arduino UNO R4 MinimaでDCファンを動かしてみた。
回転速度も調整できるとPerplexityに教えてもらったので、本当にできるのか実践する。

# 使ったもの
- Arduino UNO R4 Minima
- [DCファン 5V 2ピン](https://akizukidenshi.com/catalog/g/g114358/)
- VS Code(PlatformIO)
- 抵抗（270Ω）
- ダイオード（1N4007C、逆起電力保護用）
- トランジスタ（S8050、ファンの電流を制御）
- ブレッドボード（接続用）

# 回路図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272113/fa3e9715-0b88-44ba-a4bb-84868334f59c.png)

# ソースコード
```
#include <Arduino.h>

int fanPin = 9;
int pwmValue = 0;

void setup()
{
  pinMode(fanPin, OUTPUT);
}

void loop()
{
  pwmValue = 0;
  analogWrite(fanPin, pwmValue);
  delay(5000);

  pwmValue = 128;
  analogWrite(fanPin, pwmValue);
  delay(5000);

  pwmValue = 255;
  analogWrite(fanPin, pwmValue);
  delay(5000);
}
```

# 仕組み
PWMをトランジスタのベースに入力することで、スイッチのオン、オフが繰り返されてファンに流れる平均電流が変わり回転数を制御できる。

# ハマったところ①
最初一通り実装したが動かなかった。上記で一度組んでみたがなぜかずっとファンが回り続けてしまう。本来であれば`analogWrite(fanPin, 0)`のところでファンが止まるはずだが、何秒待ってもファンが止まらない。
1日経ってもわからず苦戦していたが、ベースにPWMを印加しなくてもファンが回ることから、ピン配置が間違っているのではないかと考えた。ピン配置はえくぼ（ECB）で覚えていたが、どうやらこのS8050はEBCみたいで繋ぎ変えたところ、正しく動作した。

データシートも見ていたが読み解けず。結局、このトランジスタを使っている他の方が作った回路や説明を見て知った。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272113/1d455a63-872c-47af-a045-325783080944.png)

# ハマったところ②
ハマったところ①が解消してファンがPWMのDuty比によって回転したり、静止したりするようになったが、Dutyが100%の時にもっと回ってよさそうなのにあまり勢いがない。電流を測ってみるとそもそもベース電流が想定の3分の1ほどしか流れていなかった。
ベースの抵抗を小さくしても変わらずお手上げ状態だったが、Arduinoの仕様を確認してみると、今回使っているArduino Uno R4 Minimaは各I/Oピンの許容出力電流が8mAになっており、これによって流れないようになっていた様子。全出力端子の総和の許容出力電流も60mAになっていた。

参考にさせていただいた記事は[こちら](https://qiita.com/pbjpkas/items/859b273961d5d272b714)

https://qiita.com/pbjpkas/items/859b273961d5d272b714

# まとめ
今回、Arduinoを使ってDCファンを動かすというのをやってみて、想定とは違っていたが一応動かすことができた。
かなり学ぶことが多かったので、実施してよかったと思う。

再度、部品を選定して再挑戦したい！

# 以下、メモ
## フライバックダイオード
モーターのようなコイルに流れていた電流を急に遮断すると、コイルは流れていた電流を維持しようとして逆向きの高電圧（逆起電力）を発生させてしまう。
ダイオードを入れておくことでこの逆起電力を逃がすための道を作っている。そのため、ダイオードはモーターと並列につなぐが、カソード（マイナス）側をプラスの方に繋いでいる。

## トランジスタ
スイッチや電流の増幅器として利用される。
今回はArduinoのPWMで比較的大きな電流を制御するために利用している。
論文 How to Train Your Dragon: Quantum Neural Networks 読んだ

# 1. 発見

日課でキャルちゃんのX

https://x.com/tweetnakasho

を見ていていて気になる論文を見かけました。

タイトル「How to Train Your Dragon: Quantum Neural Networks」…なんという題名。

# 2. 本手法と通常のNeuralNetworkの違い

### 2.1. 一般的なニューラルネットワーク

一般的なニューラルネットワークは入力層から、出力層に向けて処理が流れます。
フィードバックを行うタイプもありますが、基本的には入力から出力へデータが流れる形となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121950/608ecbf1-5cc5-4d06-8351-c1b2215f67d1.png)

最も基本的な学習方法として誤差逆伝播（バックプロパゲーション）というものがあります。
簡単に言うと、あるウェイトの出力を計算して、教師データの正解と異なる場合はその差(誤差)を出力層→隠れ層→入力層と逆にたどって修正していきます。
しかしこの方法は、局所最小に陥るリスクや、多層化すると増大する計算コストが課題となります。

### 2.2. 本手法の平衡伝播

本論文が用いている手法は、推論方法と学習方法が上記に記載した、一般のニューラルネットワークと異なります。
推論時にイジングモデルでの平衡状態を用います。

簡単に説明すると入力に相当するノードにバイアスをかけ、ネットワークを平衡状態にします。そののち、出力層相当のスピンを読み取るというものです。

通常のNeuralNetworkのように順次計算されるわけではないので、バイアスで代替する形ですね。
頭いい！！

FreePhaseの図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121950/71a431b7-f5a8-4858-af40-150e595c9df1.png)

Nudged PhaseではOutputLayerに正解をBias(ナッジ)としてかけます。


### 2.3. なぜこれが量子アニーリングで有効なのか

量子アニーリング装置は、**高速に複数の低エネルギー状態をサンプリング**することができます。
また、平衡状態にもっていく際に、従来コンピュータでは局所解に陥る可能性がありますが、量子アニーリングは局所解から抜け出すことができます。

量子アニーリングを用いたサンプリングを活用する機械学習手法として、サンプリング結果から確率分布を求めて利用するボルツマンマシン機械学習もありましたが、時間がかかるうえに精度もいまいちでした。

そもそもボルツマン分布になっていないので後処理が必要だったが、本論文の手法は最適化を目的としたサンプリング結果を直接的に使用することができます。

また、工夫として「ドラゴン訓練」と呼ぶ手法を提案し、一度に $m$ 個の“間違った”低エネルギー状態（ドラゴンの頭）をまとめて切り落とす(誤った解として学習させる)ことを実現。従来のバックプロパゲーション（スケーリング指数 $z=0.78$）を上回る $z=1.01$ を達成しています。

**平衡伝播（Equilibrium Propagation）そのものは2017年**に発表されていましたが、あまりメジャーではなく、機械学習で有名なライブラリScikitLearnにも実装がありません。

**平衡伝播（Equilibrium Propagation）論文**

https://arxiv.org/pdf/1602.05179

理由は、平衡状態に持って行くのに時間がかかる、従来コンピュータは向かないという事があるからだと思います。

繰り返しになりますが、量子アニーリングを用いれば、そういった欠点をカバーして

- 学習の効率化・高速化
- 推論の高速化

を実現できる可能性があり、面白い手法だなと思いました。

ネットワークを介した処理が必要であること（Latencyが増える）から、トータル時間でみた高速化は現実的には難しいという欠点はありますが、推論時は繰り返しが不要になります。

量子アニーリングでは100回サンプリングすると、QPU_ACCESS_TIMEは52.568msです。

**通信状態や前処理、後処理は除かれています。**

一回当たりは0.5msとなり、AI推論としては十分高速と言えるのではないでしょうか。

# 3. 現時点の課題と発展

### 3.1. 現時点の課題

- **量子ビット数の少なさ**
    
    取り扱えるニューロン数が量子アニーラーのビット数に制限されるため、深いネットワークや大規模モデルへの適用には工夫が必要です。
    
    MNIST(手書き文字入力)をBINARY入力するとして、それだけで700qubit使います。
    

### 3.2. 発展の予定

量子アニーリングに即した工夫も色々できそうです。

- **論文に記載されている内容**
    - 完全コヒーレントアニーリングにおけるAmplitude Amplification（Grover 系手法）を組み込むことで、さらなるスケーリング指数の向上を目指す


# 4. 実装

手元に実装はありますが、まだ公開レベルにはなっておらず、ブラッシュアップ後、きがむいたらGithubにでもアップロードします。
「私、いい感じに実装したよ！」という人がいらっしゃったら共有してください（笑）
【AWS】AWS IAM Identity Center (AWS Single Sign-On)

AWS IAM Identity Centerは、AWSのマルチアカウント環境の認証の利便性を向上させるための、フェデレーションを活用したサービスです。AWSのユーザは、IAM Identity Centerで認証を済ませた後、追加の認証なしで各AWSアカウントにアクセスすることができます。
【超簡単】MicrosoftDocsのMCPを使ってみる


[Microsoftのドキュメント](https://learn.microsoft.com/ja-jp/)のMCPが公開されたそうなので実際に使ってみようと思います。

環境によっては超簡単です。

# リポジトリ
https://github.com/MicrosoftDocs/mcp?tab=readme-ov-file#-installation--getting-started

VSCode, VisualStudio, Cursor IDEで利用できます。

インストールされる方は上のリンクをクリックして次に進んでください。

# MCPをインストールする
今回はVSCodeにインストールします。
1. 「VS Code Install Microsoft Docs MCP」をクリックします

    ![スクリーンショット 2025-06-16 21.32.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/f9c1fcc2-fa1a-457c-9b17-6a2f1b8ba055.png)

1. 「Visual Studio Code.app」を開くをクリックします

    ![スクリーンショット 2025-06-16 21.39.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/57fe4ea2-f0bd-4349-b4bf-b2d7e02564e4.png)

1. VSCodeに遷移するので、サーバーのインストールをクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/5c2ebf50-c8dd-448f-b941-462681b8142f.png)



1. ユーザーの`settings.json`にmcpの記載が追加されます
    ![スクリーンショット 2025-06-16 21.42.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/2e1a12cc-88a9-4a15-b5cb-203b9c7c129d.png)

1. AgentModeに切り替えて、チャット欄のツールアイコンをクリックします
    ![スクリーンショット 2025-06-16 21.47.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/1503201e-59d1-4eb4-b066-eace446edd0e.png)

1. ツール一覧に`microsoft.docs.mcp`が追加されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/cfbcca38-3f1d-49b1-b8a7-84344135ed55.png)

これで準備完了です。ここまでクリックしかしてませんね。

# MCPを使ってみよう
早速試してみましょう。

試しにAppServiceの価格レベルについて聞いてみます。（[リンク](https://learn.microsoft.com/ja-jp/azure/app-service/overview-hosting-plans#pricing-tiers)）

![スクリーンショット 2025-06-16 21.53.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/13393890-4dc1-4576-9320-f83b992c15e5.png)

（なんかいい感じな気がするけど...）

実はこれ、MCP使えてません。

Copilotだけでここまで答えてくれるならMCPいらなくね？って思ったそこのあなた。
もう少しだけお時間ください。

明示的にMCPを利用するにはMCPサーバーの名前を先頭につければちゃんとMCPを使ってくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/02d8f078-e9f0-434b-ae45-16abe0a271b8.png)
続行をクリックして回答を待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/4412d8bf-53c8-426b-ba80-cff10e69b660.png)

（あれ？さっきとほぼ一緒じゃね？）

そう思い、この下書きを閉じようとしましたが！

![スクリーンショット 2025-06-16 22.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4086906/e58d5074-b3d4-4dea-acc4-914e26fe35f3.png)

下部の「公式ドキュメント」のリンクが、はじめに私が欲しかったサイトのリンクと完全一致していました！

他にもいくつか試しましたが、ドキュメントに記載がある内容は全てソースを返してくれました。

# まとめ
- VSCode, Cursorならインストールが超簡単
- MCPを使わなくてもいい感じな回答は返ってくるが、MCPを使うと痒いところに手が届きそう
- ソースを返してくれるため、信頼性が担保できる ←強い

Microsoftのドキュメントをよく利用される方は入れておいて損がなさそうです。
AWS Q CLIで懐かしのゲームを作ろう

## はじめに
こちらのキャンペーンに参加しました！

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

ゲームを作ろうということで、小さい頃にキッズゲームサイトでよく遊んだ「トイレに現れるうんちを素早くクリックして流すゲーム」を作りました。

## 動作環境

-  PC：MacBook Air (Intel, 2019)
- OS：macOS Sonoma 14.7.6
- プロセッサ：1.6GHz デュアルコア Intel Core i5
- メモリ：16GB
- シェル：zsh
- Amazon Q CLI バージョン：v1.12.0


## やったこと
### 1. 準備
[こちら](https://aws.amazon.com/jp/blogs/news/build-games-with-amazon-q-cli-and-score-a-t-shirt/)のステップバイステップガイド Step.1〜2に従ってAmazon Q Developer for CLIとPyGameのインストールを行いました。今回はHTML、JavaScript、CSSでゲームを作成したため、PyGameなどのゲームライブラリは使用しませんでした。
### 2. ゲームの作成開始
まずはゲームの大まかなイメージを入力します。
```aws:q chat
>次のゲームを作成してください:トイレにうんちが現れるので、クリックして蓋を閉めて流すゲーム
```
非常にシンプルなゲームが出来上がりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555290/1402b7d7-7d65-4f70-8bb3-e29f06053b4f.png" width=80%>


以下のような遊び方になっています。
- ゲーム開始ボタンを押すと30秒間のゲームがスタートする
- 水色の部分をクリックして蓋を閉める→流すボタンを押す の動作でうんちが流れ、スコアが加算される
- 数秒以内に蓋を閉めないと制限時間であってもゲームオーバー
- ゲーム終了ボタンでゲーム中もゲームを終えることができる

※一番最初のバージョンを残すのを忘れてしまったのですが、実際は蓋の当たり判定が非常に狭くてどこをクリックすればいいかわからなかったり、ゲーム開始・終了ボタンの色が薄くて見にくい等の問題が発生し、細かな修正が何度か必要な状態でした。
### 3. 音をつける
蓋を閉めて流すときに水音が流れるように指示しました。ただ、「水音をつけて」という指示で最初にAWS Qが取ってきた音が鳥の断末魔のようなもので、その後も音を水音に変更するように指示しましたが上手くいきませんでした。
音は結局自分でフリー素材の水音を用意し、それを使うように指示しました。
### 4. うんちのバリエーションを増やす
茶色のうんちのみ流れていましたが、うんちの種類、トイレの数、ルールを増やすことにしました。
-  うんちは茶色、黄金色、虹色の3種類がランダムに現れる
- トイレの数を3つにする
- 茶色＜黄金色＜虹色 の順番で現れて消える速度も早く、得点もこの順に1点、2点、3点と高くなる
- 10点稼ぐごとにスピードアップする
3種類のうんちの画像はこちらで用意したものを使うよう指示しました。
### 5. 完成
うんちゲームが完成しました！

https://youtu.be/sQ-WUHJ8JXY
## まとめ
Amazon Q Developer for CLIを使ってトイレのうんちを流すゲームを作成しました。JavaScript等の知識がなくても簡単なゲームが1時間程度で作成できました。
ただ、なぜAmazon Q側で用意された音や画像（このゲーム以外にも別のゲームを作ってみましたが、Amazon Q側で用意された画像の表示がうまくいきませんでした）が指示にそぐわないものとなってしまったのか等の分析は行えてないので、今後は上手くいかなかった部分の原因分析もしつつ、引き続きAmazon Q Developerを用いてゲームに機能を追加していきたいと思います。
vimコマンド基本コマンド一覧


## はじめに
vimに慣れたいので基本操作のメモを残しておきます。

## ✅ 公式チュートリアルで学ぶ
公式チュートリアルもおすすめします。
```
vimtutor  
```
英語が苦手な人はこちらで日本語版チュートリアルができます。
```
vimtutor ja
```

## ✅ Vimの基本操作フロー

```text
1. vim ファイル名    ← ファイルを開く
2. i                ← 編集（挿入）モードに入る
3. [編集する]
4. Esc              ← ノーマルモードに戻る
5. :w               ← 保存
6. :q               ← 終了（保存せず）
7. :wq または :x    ← 保存して終了
```

## ✅ モードの違い

| モード名    | 説明               |
| ------- | ---------------- |
| ノーマルモード | デフォルト。コマンドを実行できる |
| 挿入モード   | 文字を入力できる（`i`で入る） |
| コマンドモード | `:` で入る。保存や終了など  |


## ✅ 挿入・編集コマンド（ノーマルモードで）

| コマンド       | 説明                 |
| ---------- | ------------------ |
| `i`        | カーソルの前から挿入（insert） |
| `I`        | 行頭から挿入             |
| `a`        | カーソルの後ろから追加        |
| `A`        | 行末から追加             |
| `o`        | 下の行に新しい行を追加        |
| `O`        | 上の行に新しい行を追加        |
| `r`        | 1文字だけ上書きする         |
| `u`        | 1回の操作を元に戻す（undo）   |
| `Ctrl + r` | 取り消した操作を再実行（redo）  |


## ✅ 保存・終了系コマンド（ノーマルモードで `:` を押す）

| コマンド       | 説明                 |
| ---------- | ------------------ |
| `:w`       | 保存（write）          |
| `:q`       | 終了（quit）           |
| `:wq`      | 保存して終了             |
| `:x`       | `:wq`と同じ（変更があれば保存） |
| `:q!`      | 強制終了（保存しない）        |
| `:w ファイル名` | 別名で保存（上書き防止）       |



## ✅ 移動コマンド（ノーマルモードで）

| コマンド            | 説明                    |
| --------------- | --------------------- |
| `h` `j` `k` `l` | 左・下・上・右 に1文字移動        |
| `w`             | 次の単語へ進む               |
| `b`             | 前の単語に戻る               |
| `0`             | 行頭に移動                 |
| `^`             | 行の最初の文字へ              |
| `$`             | 行末に移動                 |
| `gg`            | ファイルの先頭へ              |
| `G`             | ファイルの最後へ              |
| `:数字`           | 指定した行番号へジャンプ（例：`:10`） |


## ✅ 削除・コピー・貼り付け

| コマンド | 説明            |
| ---- | ------------- |
| `x`  | 1文字削除         |
| `dd` | 1行削除          |
| `d$` | カーソルから行末まで削除  |
| `yy` | 1行コピー（ヤンク）    |
| `p`  | 貼り付け（カーソルの後に） |
| `P`  | 貼り付け（カーソルの前に） |


## ✅ 検索と置換

| コマンド        | 説明            |
| ----------- | ------------- |
| `/文字列`      | 文字列を下方向に検索    |
| `?文字列`      | 文字列を上方向に検索    |
| `n`         | 次を検索          |
| `N`         | 前を検索          |
| `:%s/旧/新/g` | ファイル全体で文字列を置換 |


## 最後に
少し使わないとすぐ忘れてしましますね笑
データサイエンティストが知っておきたい！データエンジニアリング入門書５選

# はじめに
筆者は、新卒でデータサイエンス関係の仕事に３年半携わったのち、２社目の現職でデータエンジニアリングに初めて触れ、本格的に取り組んでおります。

データエンジニアリングはデータサイエンスとは全く別世界で、周りが何を言っているか？さっぱりわからない時期がありました。
またデータアナリストロールでの入社だったことから、本業のデータ分析に加えデータエンジニアリングも並行して学習しないといけず、かなり苦労したのを覚えています。

現在入社して約１年半が経過し、徐々に知識がついてきたおかげか、ようやく周囲のエンジニアが話している内容にもついていけるようになりました。

しかし、試行錯誤の中で、「この本を初学者のうちに読んでおけばもっとキャッチアップ早かったな」という感覚にも陥りました。

今回は、かつての私と同じようなこれから本格的に取り組む人のために、データエンジニアリングの入門書を紹介をしていきます。

# 対象の読者
- データサイエンティストの方で、データエンジニアリングを急遽やることになった人
- これからデータエンジニアリングを始めるが、何をしたらいいかわからない人達


# 書籍の紹介
では書籍の紹介に移っていきます。
個人的な所感も含みますが、初学者はまず下記観点を抑えればいいと考えています。

- **データエンジニアリングの概要**
- **実装できるハンズオン教材**
- **データベースの設計**
- **メタデータに代表されるデータガバナンス**
- **データマネジメント**

上記5つの観点に沿った書籍を、それぞれ紹介していきます。

#### 実践的データ基盤への処方箋〜 ビジネス価値創出のためのデータ・システム・ヒトのノウハウ 
データエンジニアリングの全体像を掴むのに最適な１冊です。

https://gihyo.jp/book/2021/978-4-297-12445-8

「データ基盤てどう作ればいいの？」「データマートとデータウェアハウスの違いて何？」といった初学者のお悩みから、CDCやParquetファイル、スタースキーマの設計など本格的な用語も登場します。
データエンジニアリングで登場する単語が網羅的に押さえられており、初学者ではなくなった私ももう一度振り返るべき１冊になっています。

#### Google Cloudではじめる実践データエンジニアリング入門
具体的なGoogle Cloudの製品を題材とし、データエンジニアリングをハンズオン形式で学べる書籍です。

https://gihyo.jp/book/2025/978-4-297-14661-0

またデータエンジニアリングの資格である[Google CloudのProfessional Data Engineer](https://cloud.google.com/learn/certification/data-engineer?hl=ja)取得に向けた参考図書でもあります。

"Professional"という文言はついていますが、データエンジニアリングを行う際に必要な知識が詰まっており、これから始める人でも是非取っておきたい資格の１つです。
筆者も現職に入社して大体１年経ったころに取得できたため、取得を推奨します。

#### 実践的データモデリング入門
データベースの設計をする際に役立つ本です。

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

データモデリングという言葉が仰々しく聞こえますが、要するにデータベースの設計書になります。基本的な話概念の話を書籍の前半で触れ、後半では、具体の事例を用いながら設計図の書き方を知ることができます。

筆者もこの書籍でLTをやっているので、こちらも併せて見ていただけると幸いです。

https://speakerdeck.com/wakamatsu_takumu/detamoderingushi-jian-ru-men-ha20nian-jing-tutemose-tun-senai


#### ［エンジニアのための］データ分析基盤入門＜基本編＞　データ活用を促進する！ プラットフォーム＆データ品質の考え方  
データ分析基盤を軸に、メタデータやデータ品質などのデータガバナンスについても扱った書籍になります。

https://gihyo.jp/book/2024/978-4-297-14563-7

書籍の前半では「ストリーミング処理」や「ストレージ」など上に挙げた書籍の復習的な内容もありつつ、後半では「データカタログ」「セキュリティ」「データ品質管理」などガバナンス的な内容にもふれています。

#### DX時代のデータマネジメント大全 DX、データドリブン経営、データ利活用から理解する
データマネジメントという、組織や企業で実際にデータ利活用を進めるための考えを理解するための書籍です。

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

データマネジメントの知識として、[データマネジメント知識体系ガイド(通称DMBOK)](https://www.amazon.co.jp/%E3%83%87%E3%83%BC%E3%82%BF%E3%83%9E%E3%83%8D%E3%82%B8%E3%83%A1%E3%83%B3%E3%83%88%E7%9F%A5%E8%AD%98%E4%BD%93%E7%B3%BB%E3%82%AC%E3%82%A4%E3%83%89-%E7%AC%AC%E4%BA%8C%E7%89%88-DAMA-International/dp/4296100491)があるのですが、辞典のように分厚く、初学者にとってはかなりハードルが高いです。内容も抽象的なものが多く、実例を思い浮かべるのが困難です。
現職でも輪読会を実施しましたが、読了までに年単位でかかるものでした。

紹介した書籍は、ビジネスの実例に沿ってデータマネジメントを紹介していることから、頭に入りやすい構成となってます。また、データサイエンス的な活用例もみられ、親しみやすい内容です。

# おわりに
今回の記事では、私自身の経験をもとに、これからデータエンジニアリングを始めたいデータサイエンティスト向けの本５冊を紹介しました。

現職に入社する前の私は、データエンジニアリングについてAWSのS3しか実務でまともに扱ったことがなく、ものすごく苦労した記憶がありました。

データエンジニアリングはカバー範囲が広く、ここに紹介できなかった内容も含む可能性があります。ですが、紹介した本を読めば、大まかにデータエンジニアリングの領域をカバーでき、それ関連の議論にある程度はついていけると確信しています。

今回の記事が、これからデータエンジニアリングに触れる多くの人に届くことを願ってやまないです。
【正規表現】よく使う正規表現(初心者用問題付き)

## はじめに
業務仲間とアイスブレイクとして正規表現について話したのでメモとして残します
また、練習問題も作成したので是非とも解いてください

### 先読み・後読み
| 正規表現 | 意味 |
|:-:|:-:|
| (?=pattern)  | 肯定的先読み |
| (?!pattern)  | 否定的先読み |
| (?<=pattern) | 肯定的後読み |
| (?<!pattern) | 否定的後読み |

※後読みが直前、先読みが直後です

#### 具体例（肯定的先読み）
`「チョコ(?=レート)」で検索`
```text
チョコレート    -- この行の「チョコ」のみがヒットする
チョコケーキ
チョコアイス
アイスチョコ
ミントチョコ
```

#### 具体例（否定的先読み）
`「チョコ(?!ケーキ)」で検索`
```text
チョコレート    -- この行の「チョコ」がヒットする
チョコケーキ
チョコアイス    -- この行の「チョコ」がヒットする
アイスチョコ    -- この行の「チョコ」がヒットする
ミントチョコ    -- この行の「チョコ」がヒットする
```


#### 具体例（肯定的後読み）
`(?<=アイス)チョコ`
```text
チョコレート
チョコケーキ
チョコアイス
アイスチョコ    -- この行の「チョコ」のみがヒットする
ミントチョコ
```

#### 具体例（否定的後読み）
`(?<!アイス)チョコ`
```text
チョコレート    -- この行の「チョコ」がヒットする
チョコケーキ    -- この行の「チョコ」がヒットする
チョコアイス    -- この行の「チョコ」がヒットする
アイスチョコ
ミントチョコ    -- この行の「チョコ」がヒットする
```

「?」で始まり
「<」が後読み
「=」が肯定
「!」が否定
と覚えています

### エスケープシーケンス
- ¥n: 改行(Line Feed)
- ¥r: 復帰(Carriage Return) 行末から行頭に戻す復帰コード
    - windows環境では多くの場合「¥r¥n」で改行で
- ¥d: 数字([0-9])
- ¥w: 単語構成文字([A-Za-z0-9_])
- ¥s: 空白文字([¥t¥n¥f¥r])

## 練習問題
置換前と置換後を提示しますので、どのような正規表現を記載したら実現できるかを答えてください
### 問１ 行頭にある行番号等を消去したい

```置換前.txt
1位 公務員
2位 看護師
3位 歌手・俳優・声優などの芸能人
4位 教師・教員
5位 絵を描く職業(漫画家・イラストレーター・アニメーター)
6位 保育士・幼稚園教諭
7位 カウンセラーや臨床心理士
8位 デザイナー(ファッション・インテリアなど)
9位 学者・研究者
10位 会社員
```

```置換後.txt
公務員
看護師
歌手・俳優・声優などの芸能人
教師・教員
絵を描く職業(漫画家・イラストレーター・アニメーター)
保育士・幼稚園教諭
カウンセラーや臨床心理士
デザイナー(ファッション・インテリアなど)
学者・研究者
会社員
```

<details><summary>解答</summary>

```置換前正規表現.txt
^¥d+位¥s
```

```置換後正規表現.txt

```

</details>

### 問２ コンマ区切りになっている文を改行で分けたい

```置換前.txt
中国語(北京語・普通話),英語,ヒンディー語,スペイン語,アラビア語,ベンガル語,ポルトガル語,ロシア語,日本語,イツ語,中国語(広東語),ジャワ語,韓国語(朝鮮語),フランス語
```

```置換後.txt
中国語(北京語・普通話)
英語
ヒンディー語
スペイン語
アラビア語
ベンガル語
ポルトガル語
ロシア語
日本語
ドイツ語
中国語(広東語)
ジャワ語
韓国語(朝鮮語)
フランス語
```
<details><summary>解答</summary>


```置換前正規表現.txt
,
```

```置換後正規表現.txt
¥r¥n
```
</details>

### 問３ 年月日の形式を変更したい
```置換前.txt
2020年9月29日
2020年9月30日
2020年10月1日
2020年10月2日
```

```置換後.txt
2020/9/29
2020/9/30
2020/10/1
2020/10/2
```

<details><summary>解答</summary>


```置換前正規表現.txt
^(¥d{4})年(¥d{1,2})月(¥d{1,2})日$
```

```置換後正規表現.txt
¥1/¥2/¥3
```
</details>

## あとがき
先読み、後読みがとても便利なのでよく使っております。
おすすめの正規表現あれば教えてください。

## たまによく使う正規表現
### 前後のトリミング
```置換前正規表現.txt
^¥s*(.*?)¥s*$
```
```置換後正規表現.txt
¥1
```

```置換前.txt
1,a,100    
  2,b,200　　	
　　  3,c,300
 4,d,400  	 　　 
    5,e,500
```
※置換前.txtには全角スペースやタブも入っています。
```置換後.txt
1,a,100
2,b,200
3,c,300
4,d,400
5,e,500
```