OmniAICreator/Qiita-1.07M huggingface dataset:
動画や音声データから「あー」「えー」を秒で消す【adobe premire pro】

ブログはコツコツ書いてるのですが、やっぱりこの熱い想いは伝わりにくいよなーと思って始めたポッドキャスト配信。

:::note warn
青春ビジネスマンラジオ🌸人生がちょっと明るくなる、心が燃えるラジオです。
働くアナタに、ぜひ聞いてほしい。
https://www.youtube.com/@novelworks/podcasts
:::



いくらデジタルに慣れているといっても本業は「システム開発」なので、メディアコンテンツ作成には不慣れな集団。
話す側も慣れていないので、「あー」「えー」「えっとー」という俗に言う「フィラー音声」がめちゃくちゃ入り、カットしたり繋いだりの編集にまぁ時間のかかること。

そんなとき、ふと昔見た記事を思い出した。
https://www.itmedia.co.jp/news/articles/2311/15/news082.html

まさにこれやん！と思ったんですが、この手のものって日本語に対応してなかったり精度が悪く使い物にならないパターンが多い。

なので、期待半分で実際に試してみました。

---

### 環境
PCスペックは以下の通り。

OS：Windows 11 Pro
プロセッサー：インテル® Core™ Ultra 5 プロセッサー 125H ※Intel® AI Boost
メモリ：16GB
ストレージ：512GB PCIe Gen4 NVMe TLC M.2 SSD

そこまで良いスペックではないので、そもそもPremiere Proが起動できるかなーと心配。

# 実際に使った感想

## 動作
懸念していた「そもそもPremiere Proが起動するのか」は無事クリア！
書き出しも、３０分の音声データは数十秒だったので全く問題なしでした。
動画ではないので、編集時もモタつきはなかったものの、またにフリーズしたか？は何度かありましたが、許容範囲内でした。

## 設定は簡単

使い方は公式のチュートリアルで十分わかりやすかったので割愛。
https://www.adobe.com/jp/learn/premiere-pro/web/jp-1min-feature-transcribe?locale=ja&learnIn=1

音声データを読み込む。
読み込んだら、左側のメニューに「文字起こし」メニューが出てくるのでポチー。

３０分くらいの音声データですが、１０分くらいかかったかな。
このあたりはPCのスペックが大きく影響すると思います。

実際文字起こしした部分を選択すると、その部分の音声が再生できるようになります。

文字起こしが完了すると、フロートアイコンに「フィラーワード」「語感」がでてきます。

▼実際に文字起こしした画面。[・・・]となっている所が実際は「えー」「あー」と言ってます。
![スクリーンショット 2025-04-24 141354.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129605/ddb03f98-c063-40ef-ab09-5f53276cd5aa.png)


## 「フィラーワード」と「語感」の違い
フィラーワードは、「あー」「えー」という部分なんですが、実際に書き出した文字と音声を聞きくらべると「えー」の箇所が「語感」として認識されていました。

なので、どっちに割り振られているかは、「えー」の長さとか声量によるかなと感じます。
今回流し込んだ音声は、ほとんど「語感」に割り振られていました。



## 精度
最初特に設定を変更せず文字起こしを行うと、「フィラー音声」の識別は５０％くらいな感じがしました。結構残ってるじゃん～残念、という感じ。

ただ、文字起こしオプションで、抽出の長さの時間を調整できます。
https://cgworld.jp/regular/202402-tipsnote.html

デフォルト値は「0.75」だったんですが、これを「0.3」ほどにすると、ほとんどの「フィラー音声」は切り取られました。

ただ、話をする中で「一呼吸おく」シーンって結構多いんですが、ここも漏れなく認識されてしまうので、実際に「フィラーワード」と「語感」を削除する際は、一括削除ではなく、選択して削除するか、一括削除して余白を入れるか、というひと手間は必要だなと感じました。
（0.5でも、若干残ってるなって感じは否めないでした。もう少し微調整したらうまくいくかも）

部分削除もできるので語感を多少残したい場合は、聞きながら部分削除していくのが良さそうです。

▼0.4にした場合。[・・・]の箇所が増えて、音声で聞くとほぼフィラーは消えています
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129605/81910d98-ed49-4802-9ee3-b092ed6d318a.png)

▼フィラー（語間）を消した後の音声データ。
ぶつぶつに切れてるのがフィラーを消した証拠です。これ手動でやるのは気が遠くなる…
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129605/2a6b1c4e-01c0-46b5-96c7-eda759f4c3e3.png)




# まとめ
かなり使えるな！（流石adobeや）という感じ。精度はかなり高いです。
今までこのフィラー音声の削除に数時間かかっていたんですが、テストで試してみたのも数分だったので作業効率は各段に上がった感じがします。それだけでも月額数千円払う価値はありますね。

また文字起こししたデータでキャプションの自動作成もできるので、動画作成も割と簡単にできるのでは？と期待値が膨らみました。

この短縮された時間で、もっと楽しく濃厚なコンテンツ配信を行っていきたいです💛
CSSを学ぼうシリーズその1(全5回)：Gridレイアウト便利だぞ

## よくあるが実装をミスする要件の１つ

* エリアの幅：メニューに**必要な最小幅**を与えて、コンテンツエリアに残り幅を全て与える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10225/116a52f8-45f6-4618-b07e-4a78e60eb197.png)



----
## やってしまいがちな実装方法

* px や % 指定でがんばる
  最もやってほしくないアンチパターン
  ブラウザの拡大率やウィンドウサイズを変えただけで破綻する
  デザインの変更にも弱い
* CSSのcalcでがんばる
  px や % と本質は変わらない
  ネックは**最適幅**
* JSで幅を測って動的にstyleをあてる
  大袈裟だし、JSの役割って？
  ブラウザの拡大率やウィンドウサイズの変更を考え出すと実装は厄介

----
## CSSの役割・・・とわ？

* レイアウトや装飾はCSSで実現したいし、そうあるべき

----
## 実は素直に実現できる
* それがGridレイアウト

----
## Gridレイアウトとは
* 画面をGrid（格子）に割る
* **縦横の分割サイズを柔軟に指定できる**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10225/79ed245c-c3ee-48cc-9afc-f774553e4120.png)


----
## ポイントは「auto」「fr」という単位

* auto：内容に応じた最適サイズ
* fr：残ったサイズの割合
* width: 100vw; と共に使うことが多い

----
## サンプル

```css
.main-grid {
  width: 100vw;
  height: 100vh; /*ヘッダやフッタを固定したいならこれも指定するとよい*/
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
}
.header {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
.menu {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.content {
  grid-row: 2 / 3;
  gird-column: 2 / 3;
}
```

----
## 使いどころ

* 一番外側のレイアウト
* 静的なレイアウト：必要な領域の数が決まっている

----
## 別解：Flowレイアウト

* Flowレイアウトで似たようなことは出来るらしい
* が、HTMLタグを入れ子にする必要がない分、Gridレイアウトの方が便利
  試行錯誤しやすく、また変更に強い

----
## 最後に
* 知っているだけで便利に使えます
* 大事な姿勢：「こう出来たらいいのに」と感じたら生成AIに聞いてみよう
BedrockのLLM-as-a-Judgeを使用したRAG評価の仕組み（取得のみ）

# 内容
Amazon Bedrockでは構築したRAGシステムをLLMを使用して評価する仕組みがあります。

https://aws.amazon.com/jp/blogs/news/new-rag-evaluation-and-llm-as-a-judge-capabilities-in-amazon-bedrock/

RAGの評価ジョブを作成する際には、以下の2つの評価タイプを選択できます。

* 取得のみ：検索結果のみを評価する
* 取得と生成：検索結果と生成された回答を評価する

https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/evaluation-kb.html

今回は「取得のみ」の方を見てみます。なお、具体的な設定方法は本記事では割愛させて頂きます。

# 仕組み

## ⓪評価用データセットの準備

![rag71.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/76704711-8599-4a1e-b6c4-f1754ef60f6e.png)

評価用データセットはプロンプト（質問）と正解データの組合せです。[こちら](https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/knowledge-base-evaluation-prompt-retrieve.html)に記載の通りJSONL形式で作成してS3に保存しておきます。注意点として[こちら](https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/model-evaluation-security-cors.html)に記載の通り、S3バケットのCORSアクセス許可の設定が必要です。下記は評価用データセットの例です。

```json
{"conversationTurns":[{"prompt":{"content":[{"text":"貴社の製品に推奨されるサービス間隔はどれくらいですか?"}]},{"referenceResponses":[{"content":[{"text":"当社製品の推奨サービス間隔は2年です。"}]}]}]}
```

## ①関連情報の取得
![rag72.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/2ce837a7-7d4f-4812-b308-496ea74662fd.png)


評価用データセット内のプロンプト情報（上記だと`貴社の製品に推奨されるサービス間隔はどれくらいですか?`）を使用してナレッジベースのベクトルDBから関連情報を取得します。

## ②評価者モデルの呼び出し
![rag73.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/86765f30-1e4c-4e0d-b99b-ec0dfc914e9f.png)


取得した関連情報、評価表データセットのプロンプト、正解データを使用して[評価者モデル用のプロンプト](https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/knowledge-base-evaluation-prompt-retrieve.html)を作成します。このプロンプトを使用して評価者モデルを呼び出します。

## ③評価結果の取得
![rag70.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/b7511f3f-cd38-48e7-99c1-ba7704e07193.png)

評価者モデルが評価した結果をS3バケットに保存します。

# 取得結果の確認

「取得のみ」タイプの評価では品質に関する下記2つの[メトリクス](https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/knowledge-base-eval-llm-results.html#kb-eval-metrics-retrieve-generate)が取得可能です。

* コンテキストの関連性：取得情報がプロンプト（質問）にどれほど関連しているか評価
* コンテキストカバレッジ：取得情報が正解データどれだけ網羅しているかを評価

これらのスコアは全会話の平均値になります。今回はテスト用に20個のデータを用意しましたが会話毎のスコアも確認することが可能です。

![rag75.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/9979932f-ae3b-407d-a8a9-eae3b177f5c1.png)


評価者モデルをClaude 3 Haiku（紫）からClaude 3 Sonnet（水色）に変更して評価を2回実施し結果を比較しまひた。Sonnetの方が、関連性はやや下がりましたが、コンテキストカバレッジが改善されたことが分かります。

![rag76.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523652/be56f68e-2d47-4a17-a04f-0987cc505dce.png)
ESP-IDFの「IDF_PATH」の設定で詰まった時のメモ

VSCodeでESP-IDF拡張機能を使っていたときに、bashから idf.py を起動しようとすると「idf.pyが見つからない」と言われることがあったので、その時のメモです。

結論から言うと「VSCode拡張機能」では以下のように設定がされているが、コマンドラインから使用するときは自分でPATHを設定する必要があるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112853/f0705ce9-5b3f-4329-bc18-9cdd9b4178e5.png)

では、Ubuntuの .bashrc になんて書けばいいのでしょうか？
直観的には .bashrc などに「IDF_PATH」を設定してあげて、そのパスの「export.sh」を呼び出して、諸々の設定をしてもらえばいいと思うのだが、単純に設定しただけでは駄目でした。
色々とググった結果、以下のようにしました。
（ESP-IDF は $HOME/esp/v5.4.1/esp-idf に入っている前提）

```shell
# esp-idf
export IDF_PATH="$HOME/esp/v5.4.1/esp-idf"
export IDF_PATH_FORCE=1
source $IDF_PATH/export.sh
```

「export IDF_PATH_FORCE=1」は、すでに IDF_PATH が設定されている環境でも、強制的にそのパスを使いたいときに使います。

ESP-IDF の export.sh は、デフォルトで「既に IDF_PATH が設定されている場合は、再設定しない」ようになっています。
これは複数バージョンの ESP-IDF を切り替えて使うときに便利ですが、逆に 古い設定が残っていると上書きされず、想定外のバージョンが使われてしまうことがあります。

IDF_PATH_FORCE=1 をセットすることで、意図したパスを確実に使えるようになります。

もし、複数ESP-IDF環境を持っていた場合
```shell
# v4.4.6, v5.4.1 の2つを持っていたとした例
$HOME/esp/
├── v4.4.6/
│   └── esp-idf/
├── v5.4.1/
│   └── esp-idf/
```

.bashrc に以下を追記して、

```shell
# ESP-IDF バージョン切り替え関数
idf_use() {
    local ver=$1
    export IDF_PATH="$HOME/esp/$ver/esp-idf"
    export IDF_PATH_FORCE=1
    source "$IDF_PATH/export.sh"
    echo "Switched to ESP-IDF $ver"
}
```

bash から以下のように呼び出すと、IDFのバージョンを切り替えて使用できます。

```shell
idf_use v5.4.1   # 5.4.1 に切り替え
idf_use v4.4.6   # 4.4.6 に切り替え
```

とりあえず、備忘録。
【超初心者】初めてのNext.js～プロジェクト作成やディレクトリ構造について～

# はじめに

普段はPHPを触っているWEBエンジニアです。
初めてNext.jsに触れる機会があり、基礎の基礎を学んだため、忘れないように書いておきます。

# 環境
Windows11
Node.jsインスト済み

# 新規プロジェクト作成

下記コマンドを実行すると、カレントディレクトリに新規プロジェクトが作成されます！✨
※`@latest`で最新バージョンを指定しています

``` bash
npx create-next-app@latest プロジェクト名
```

色々質問されますが、`App Router`のみYesを選択した前提で話を進めていきます！

※App Routerとは：Next.js13から利用可能なルーティングシステム。ディレクトリ構造がそのままルーティング構成となる。

# 起動コマンド

``` bash
npm run dev
```


# プロジェクト構成

```
プロジェクト名/
├── .next/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── .gitignore
├── next.config.js
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json

```

### 各ディレクトリ・ファイルについて

* app/
メインの開発場所。ページの画面やレイアウト、スタイルなどを作っていく。
App Routerのルート。
    * layout.tsx：アプリ全体のレイアウト
    * page.tsx ：トップページ
    * global.css：全体に適用されるcss
    ※必要に応じて、ページごとのスタイルを分離したい場合は `page.module.css` を作成する

* public/
画像やアイコンなど、ブラウザから直接アクセスできる静的ファイルを入れる場所

* node_modules/
npmでインストールしたパッケージが入っている

* package.json
使用しているパッケージや、実行可能なスクリプト（例：`npm run dev`）などが書かれている

# 終わりに
今後追記していこうと思います！
間違っていることがあれば優しく教えていただけると嬉しいです！😊
【Rails】pry-rails(Gem)について

# 記事概要
Ruby on Railsのpry-rails(Gem)について、まとめる

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

# pry-railsとは
デバッグツールに属し、作業の際にバグの有無を確認したり、処理を止めてソースコードが正しいかを確認できるもの

# エラー画面
[![Image from Gyazo](https://i.gyazo.com/c8aa0de67996e597ea9d6b30a49727cc.png)](https://gyazo.com/c8aa0de67996e597ea9d6b30a49727cc)

# Gemのインストール手順
https://qiita.com/likapantrip/items/d7317b9ece36b58dffd6#手順

# Gemfileの記述
https://qiita.com/likapantrip/items/c8718db9a4e72b7c6ad0#pry-rails

# 手順(検証)
1. Railsの処理を一時停止したい場所に`binding.pry`を記述する
1. ローカルサーバーを起動する
1. ブラウザで、`binding.pry`を含む処理を実行する
1. ブラウザのロードアイコンが回っている状態になる
1. `binding.pry`が存在する箇所で処理が停止し、コンソールが起動している
1. irbのように対話可能であるため、検証を行う
    - `params`と入力することで、送信したパラメーターが確認できる
    - `exit`と入力すると、コンソールが終了する
1. 検証完了後、`binding.pry`を削除する

# Ruby on Railsまとめ
https://qiita.com/likapantrip/items/46b43c9d1309b6633f0a
Security and Performance Superbadge Unit

https://trailhead.salesforce.com/content/learn/superbadges/superbadge-security-performance-sbu

# 曲の再生トラッキングをサポート

特別な設定で Developer Edition 組織にサインアップします。
曲の再生データを保存するには、再生トラッカーを追加します。  
(コンテンツに記載されているとおり、Play Tracker に読み込まれたデータは一切チェックされません。)


:::note alert
We can't find the 'Play Tracker' object created according to the provided ERD


提供されたERDに従って作成された「Play Tracker」オブジェクトが見つかりません
:::

:::note alert
We can't find the expected relationship for Song in the Big Object 'Play Tracker'.
:::

:::note alert
We can't find the proper fields on the Big Object 'Play Tracker'.
:::

全部の項目を登録したけどエラーは変わらないですね。
何が違うんだろうね。

全部の項目を必須にする？


:::note alert
We couldn't find the expected indexing on the Big Object 'Play Tracker'.
:::

:::note alert
We can't find the big object 'Play Tracker' in a deployed status.
:::




# チケット販売データを取り込む
パフォーマンス データを接続して、バンドの可視性とレポートを提供します。

:::note alert
We can't find the data source 'Performances' with the proper settings.


適切な設定のデータ ソース「パフォーマンス」が見つかりません。
:::

:::note alert
We can't find the object 'Performances' with the proper deployment status or report settings.


適切な展開ステータスまたはレポート設定を持つオブジェクト「パフォーマンス」が見つかりません。
:::






# ファンメンバーのプライバシーを強化

個人情報（PII）を含むフィールドを識別するためのデータ分類を追加します。個人データが安全かつ匿名化されていることを確認します。

:::note alert
We can't find the proper PII settings for the Birthdate field on Contact.

連絡先の生年月日フィールドに適切な PII 設定が見つかりません。
:::

:::note alert
We can't find the proper PII settings for the Email field on Contact.
:::


:::note alert
We can't find the proper settings for the Fan Number field ('Fan_Number__c') on Contact.
:::


# クイズ　理解の範囲外です。

B とCらしいが理解はできん
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/3d64df76-3c68-43db-ad49-192c50c20400.png)

DとAみたいだけど、？？？？何のこと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/35a92cb3-b419-4052-ae4c-af19c6e4382c.png)

B?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/a417853a-c8d1-480e-b0bf-760a0dd9013b.png)
個人的備忘録：GitHub Actionsで行うNext.jsの「本番・開発」ビルドの自動化メモ

## はじめに

本記事では、GitHub Actions を使って Next.js アプリをビルドするステップの内容について解説します。

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

特に、環境変数を条件によって切り替えながらビルドする構成に焦点を当てて自分へ解説しています。

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

受講しているITスクールのハッカソンの開発の一環でこのようなビルド処理を組み込んだため、忘れないように備忘録として記事にまとめています。

:::note warn
***チームメンバーの方に作成いただいたものが素晴らしかったので、自分も忘れないようにまとめています。***
:::

チームメンバーの方、本当にありがとうございました。

## 解説

以下は、GitHub Actions の中で実行される Next.js のビルドステップです。

```yaml
- name: Build Next.js
  working-directory: frontend
  run: |
    NEXT_PUBLIC_API_URL="${{ github.event_name != 'pull_request' && secrets.PROD_API_URL || secrets.DEV_API_URL }}" \
    NEXT_PUBLIC_ADMIN_PIN="${{ secrets.ADMIN_PIN }}" \
    NODE_ENV="${{ github.event_name != 'pull_request' && 'production' || 'development' }}" \
    npm run build
```

### ポイント
- `frontend` ディレクトリで `npm run build` を実行。
- PR（pull_request）の場合は `DEV_API_URL` と `development` モード、
  それ以外は `PROD_API_URL` と `production` モードに切り替える。
- 環境変数 `NEXT_PUBLIC_ADMIN_PIN` も secrets から注入。

これにより、環境に応じた設定で自動的に適切なビルドが行われます。

## まとめ

このように GitHub Actions 上で環境に応じたビルドを行うことで、本番環境と開発環境を明確に切り分けられ、セキュアかつ効率的なCI/CDの実現につながります。

**ハッカソン開発では特にスピードが求められるため、こうした自動化の工夫がとても役立ちました...！**
ChatGPTを使用したアプリ開発記【「いいね」ボタンの実装】

## 「いいね」ボタンの実装

```react
import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('');
  const [posts, setPosts] = useState([]);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() === '') return;

    const now = new Date();
    const formattedTime = now.toLocaleString('ja-JP', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });


    const newPost = {
      text: text,
      time: formattedTime,
      likes: 0
    };

    setPosts([newPost, ...posts])
    setText('');
  };

//投稿の「いいね」ボタンが押されたときに呼び出される関数。
  const handleLike = (index) => {

//現在の投稿一覧をコピー（状態を直接変更しないため）。
    const updatedPosts = [...posts];

//指定した投稿（インデックス）のlikesを1増やす。
    updatedPosts[index].likes += 1;
    
//状態を更新して、再描画を促す。
    setPosts(updatedPosts);
  }

  return (
    <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
      <h1>SNS</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="今なにしてる?"
          rows="4"
          cols="50"
          style={{ display: 'block', width: '100%', marginBottom: '1rem' }}
        />
        <button type="submit">投稿する</button>
      </form>

      <div style={{ marginTop: '2rem' }}>
        <h2>投稿一覧</h2>
        {posts.map((post, index) => (
          <div key={index} style={{ padding: '1rem', borderBottom: '1px solid #ccc' }}>
            <div style={{ fontSize: '0.8rem', color: '#666' }}>{post.time}</div>
            <div>{post.text}</div>

//「いいね」ボタン。クリックすると handeLike(index) が呼ばれる。
//post.likes が現在の「いいね数」。
            <button onClick ={() => handleLike(index)}>❤️ いいね ({post.likes})</button>
          </div>
        ))}
      </div>
    </div >
  );
}

export default App;

```

![スクリーンショット 2025-04-30 12.36.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1058366/a0c4d474-e783-4571-992b-2e41afe33456.png)
DI(Dependency Injection)を依存性注入と訳してはいけない。

Dependency Injection(以下、DI)とは、「クラスやモジュールが必要とする外部リソース（オブジェクトやサービス）を、自ら生成せずに外部から受け取る設計パターン」です。

DIは、日本語では「依存性の注入」「依存性注入」と訳されています。

ところで、日本語で依存性とはどういう意味でしょうか。

・依存（いそん）
他の人や物に頼ること、または論理的に他の要素によって規定される関係を指します。
例：「あるサービスの動作はネットワークに依存する」→ネットワークがなければ動作しないことを意味します 

・性（せい）
名詞を作る接尾語のひとつで、「…の性質」「…の傾向」を表します。
例：「可能性」「危険性」「可読性」などの語で使われます

つまり依存性とは、「ある対象が他の対象に頼る性質や傾向」のこと。例えば、化学反応の「濃度依存性」は「濃度によって反応速度などが変化する性質」を指します  

DIでは、あるクラスやモジュールが外部から受け取るのは、明確なリソース(オブジェクトやサービス)です。依存性という意味にある性質や傾向ではありませんし、そもそも性質というのは注入される側が持っていて、注入される内容によって何かが変化するということです。

これらを考えると日本語の意味としての依存性は、DIにおけるdependencyの概念とはまったく異なるものです。

適切な語訳としては「依存関係」です。

実際DIは、「依存関係を注入する」と説明されることが多々あります。

誤った概念を持つ用語を思考停止で使い続けるのはやめ、以後、DI=依存関係の注入です。
個人的備忘録：Next.js × fetch で実装するシンプルなログイン機能の記録メモ

## はじめに

本記事では、Next.js環境でのログイン処理の実装例として、`handleUserLogin` 関数のコードについて解説します。

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

ユーザーがログインフォームを送信した際に、バックエンド（FastAPI）と連携し、認証処理を行う役割を担っています。

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

受講しているITスクールのハッカソンの開発の一環で作成したログイン機能について、自分自身の備忘録として、またチーム内での共有のために記事としてまとめました。

**実際のコード**

https://github.com/2025SpringTeamA/frontend/blob/main/src/app/login/page.tsx

## コード解説

### ログイン処理の流れ
```tsx
const handleUserLogin = async (e: React.FormEvent) => {
  e.preventDefault();

  try {
    const res = await fetch("http://localhost:8000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email,
        password,
      }),
    });

    if (res.ok) {
      const data = await res.json();
      console.log("ログイン成功:", data);
      router.push("/home");
    } else {
      const error = await res.json();
      alert(error.detail || "ログインに失敗しました");
    }
  } catch (err) {
    console.error("通信エラー:", err);
    alert("通信エラーが発生しました");
  }
};
```

### 解説

#### 1. フォーム送信のキャンセル
`e.preventDefault()` によって、フォーム送信によるページリロードを防ぎ、SPAらしい挙動にしています。

#### 2. fetchによるAPIリクエスト
- `POST` メソッドで `http://localhost:8000/login` にリクエストを送信。
- リクエストボディには `email` と `password` をJSON形式で含めています。

#### 3. レスポンスの処理
- レスポンスが成功 (`res.ok`) の場合、データを取得して `/home` に遷移。
- 失敗した場合は、エラーメッセージをアラートで表示します。

#### 4. エラー処理
- ネットワーク障害やCORSの問題などで `fetch` 自体が失敗したときのエラーハンドリングを `catch` 節で対応しています。

## 本番デプロイに向けた修正

- 本番環境ではAPIのURLを `.env` に定義し、次のように利用するのが望ましいです：
```tsx
fetch(`${process.env.NEXT_PUBLIC_API_URL}/login`, {...})
```
- JWTトークンの保存やユーザー情報の状態管理など、認証後の処理も別途追加が必要になります。

## まとめ

この関数は、Next.jsでのログイン処理の基本形であり、API連携、エラー対応、ページ遷移など一連の流れを備えて設計してみました...！

ログイン成功後の処理（トークン保存やユーザー状態の管理）も含めて、より実践的なアプリケーションへと発展させていきます。
[ERC4521] ERC20コントラクトが安全にERC721形式のNFTを送付する仕組みを理解しよう！

# はじめに

『DApps開発入門』という本や色々記事を書いているかるでねです。

https://amzn.asia/d/gxvJ0Pw

今回は、**ERC20**コントラクトが安全に**ERC721**トークンを送付する仕組みを提案している**ERC4521**についてまとめていきます！

:::note info
以下にまとめられているものを翻訳・要約・補足しながらまとめていきます。
:::

https://eips.ethereum.org/EIPS/eip-4521

他にも様々なEIPについてまとめています。

https://cardene.notion.site/ERC-EIP-2a03fa3ea33d43baa9ed82288f98d4a9?pvs=4

# 概要

**ERC721**はEthereumブロックチェーン上でユニークなデジタル資産（NFT）を扱う標準規格です。
NFTを別のアドレスに送付するための`transferFrom()`や、移動先がコントラクトの場合に安全性を検証する`safeTransferFrom()`といった関数が用意されています。
しかし、**ERC20**という同じ価値を持つトークンを扱う規格で使用されている`transfer()`関数は定義されていません。
**ERC20**の`transfer()`は多くのコントラクトやウォレットがトークン送信の基本機能として期待しているため、このままだとNFTを**ERC20**向けのシステムで扱う時に互換性の問題が生じます。
**ERC4521**では、既存の仕組みと後方互換性を保ちつつ、NFTにも同名の`transfer()`関数を追加する方法を示しています。

## 動機

**ERC4521**の背景には二つの課題があります。  

- **誤送信によるロックリスクへの対処**  

**ERC20**用コントラクトやウォレットが`transfer()`のみをサポートしている場合、NFTを誤って送信すると取り出せなくなる可能性があります。
  NFTにも同じ`transfer()`を用意することで、こうした誤送信時のロックリスクを軽減できます。  

- **コントラクト実装の簡素化**  

開発者が**ERC20**トークンとNFTで異なる関数を実装・管理する必要があると、コントラクトが複雑になります。
どちらにも対応する共通の`transfer()`を使えるようにすることで、実装の手間を減らし、開発効率を向上させることができます。

# 仕様

**ERC4521**の`transfer`インターフェースは、**ERC20**に準拠する必要があります。
また、`transfer`関数の実行時には`Transfer`イベントを発行させる必要があります。

```js
function transfer(address to， uint256 tokenId) external returns (bool success);
```

# 補足

**ERC20**の`transfer`関数をそのまま実装することでNFT用に別途複雑な処理を追加せずに済みます。
具体的には、**ERC20**では「送信する量（`amount`）」を受け取る引数を、NFT用には「送信する識別子（`tokenId`）」に置き換えるだけです。
このように関数名やシグネチャをほぼ共通化することで、開発者は新たに別関数を実装せず、既存の`transfer`呼び出しのままNFTを扱えるようになります。結果としてコードの行数が減り、可読性や保守性が向上します。

# 参考実装

```js
function transfer(address to, uint256 tokenId) public virtual returns (bool success) {
        require(msg.sender == ownerOf[tokenId], "NOT_OWNER");

        unchecked {
            balanceOf[msg.sender]--; 
        
            balanceOf[to]++;
        }
        
        delete getApproved[tokenId];
        
        ownerOf[tokenId] = to;
        
        emit Transfer(msg.sender, to, tokenId); 
        
        success = true;
}
```

# セキュリティ

**ERC20**と同じインターフェイスを実装する場合、`transfer`関数は成功時に必ず`bool`型の戻り値を返す必要があります。
これを省略すると、既存の**ERC20**互換コントラクトが失敗と判断し、NFTが送金先でロックされたまま取り出せなくなる恐れがあります。

## `safeTransfer`との併用  
`safeTransfer()`系の関数は受け取り側コントラクトが正しく実装されていることを確認できる仕組みを持つため、ロックのリスクを軽減できます。
しかし、全てのシステムが`safeTransfer()`を利用するわけではないため、`transfer()`にも必須の戻り値を含めておくことで安全性が向上します。

# 引用

Ross Campbell (@z0r0z), "ERC-4521: 721/20-compatible transfer [DRAFT]," Ethereum Improvement Proposals, no. 4521, December 2021. [Online serial]. Available: https://eips.ethereum.org/EIPS/eip-4521.

# 最後に

今回は「**ERC20**コントラクトが安全に**ERC721**トークンを送付する仕組みを提案している**ERC4521**」についてまとめてきました！
いかがだったでしょうか？

質問などがある方は以下のTwitterのDMなどからお気軽に質問してください！

[Twitter @cardene777](https://twitter.com/cardene777)

他の媒体でも情報発信しているのでぜひ他も見ていってください！

https://chaldene.net/

https://zenn.dev/heku

https://cardene.substack.com/

https://mirror.xyz/0xcE77b9fCd390847627c84359fC1Bc02fC78f0e58

https://cardene.notion.site/ERC-EIP-2a03fa3ea33d43baa9ed82288f98d4a9?pvs=4
個人的備忘録：FastAPIと連携したユーザー登録処理をNext.jsで実装してみたメモ

## はじめに

本記事では、Next.jsとTailwind CSSを使用して構築されたユーザー登録フォームのコードについて解説します。

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

クライアントコンポーネントとして動作し、APIへの登録リクエストを行う機能を備えています。

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

受講しているITスクールのハッカソンの開発の一環で作成した登録機能のコードです。後で再利用したり、チーム内で共有できるようにするため、備忘録として記事にまとめました。

**実際のコード**

https://github.com/2025SpringTeamA/frontend/blob/main/src/app/register/page.tsx

## コード解説

### 全体構成
- "use client"：クライアント側で動作することを明示。
- `useState`：フォーム入力（ユーザー名・メールアドレス・パスワード）を管理。
- `useRouter`：登録成功時に `/home` へリダイレクト。
- `fetch`：FastAPIなどのバックエンドに対し、`POST` リクエストでユーザー情報を送信。
- `Tailwind CSS`：各コンポーネントの装飾やレイアウトに使用。

### 1. 状態管理
```tsx
const [userName, setUserName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
```
各入力項目の状態を保持し、変更されるたびに更新されます。

### 2. ルーター遷移
```tsx
const router = useRouter();
```
登録成功後に `/home` ページへ遷移するために使用されます。

### 3. 登録処理
```tsx
const res = await fetch("http://localhost:8000/register", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email, password }),
});
```
- `fetch` 関数でAPIに非同期リクエストを送信。
- 成功時はレスポンスデータを受け取り、`/home` に遷移。
- 失敗時はエラー内容をアラート表示。

※ 現状 `userName` はフォームにあるがAPIに送信されていないため、必要であれば `body` に含める修正が必要です。

### 4. UI構成
- `<form>` 内にそれぞれの `<input>` 要素を配置し、スタイルはTailwind CSSで整えられています。
- 戻るリンク (`<Link>`) と登録ボタン (`<button>`) が並列で表示されており、UXにも配慮された設計です。

## まとめ

この登録フォームは、Next.jsとTailwind CSSによるシンプルながら実用的な実装例です。状態管理・API通信・ページ遷移・UIの整備など、フロントエンドの基本的な要素を含んでおり、今後の開発にも応用できるベースとなります。

### おまけ:実際のコード

```src/app/register/page.tsx
"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function Register() {
  const [userName, setUserName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const router = useRouter();

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      const res = await fetch("http://localhost:8000/register", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });

      if (res.ok) {
        const data = await res.json();
        console.log("登録成功:", data);
        router.push("/home");
      } else {
        const error = await res.json();
        console.error("登録失敗:", error);
        alert(error.detail || "登録に失敗しました");
      }
    } catch (err) {
      console.error("通信エラー:", err);
      alert("通信エラーが発生しました");
    }
  };

・・・（省略）
```
git サブモジュールの追加・削除・更新

## 説明の前提

親レポジトリ：サブモジュールを取り込む方
子レポジトリ：サブモジュール側
gitlink : サブモジュールのディレクトリ(正確にはポインタ。ディレクトリの方が伝わりやすいと思う。正確性とかよりも、今回は理解のしやすさを優先)

サブモジュールをプロジェクトに初回追加したい人は、**サブモジュールの初回追加** へ

## 初回セットアップ(git clone 直後)

```bash
# リポジトリをクローン
git clone https://github.com/you/project.git
cd project

# サブモジュールを初期化して取得（再帰的にネストも含める）
git submodule update --init --recursive
```

## サブモジュールを「リモートの最新」に追随させる
### すべてのサブモジュールを一括で更新したいとき

```bash
# 追跡対象ブランチ（多くは main/master）をフェッチしてチェックアウト
git submodule update --remote --merge   # or --rebase
# （--recursive を付ければネストもまとめて）
git submodule update --remote --merge --recursive
```

- `--remote` … `.gitmodules` に記載された `branch = <name>` の先をフェッチ
- `--merge` / `--rebase` … 取得した最新コミットへ移動する方法
       - **merge**: fast-forward なら FF、衝突があればマージ
    - **rebase**: サブモジュール側でローカル開発している場合はこちら

### サブモジュールを個別に更新したいとき
```bash
# 例: libs/mylib サブモジュールを開く
cd libs/mylib
git checkout main            # 追跡ブランチへ
git pull --ff-only origin main
cd ../..                     # 親に戻る
```
- サブモジュールは独立した Git リポジトリ。cd して普通に git pull しても OK。
- ブランチ未指定で git submodule update を実行すると、親リポジトリが保持している “固定コミット” に戻るので注意。

### 親リポジトリに「更新結果」を確定させる
1.  **親リポジトリのインデックス**には、サブモジュールの「コミット ID」(gitlink) が記録されています。
2. サブモジュール側で新しい HEAD に移動したら、その gitlink が変わります。
3. 親リポジトリでコミットしてプッシュすることで、チーム全員が同じコミットを参照できます。
```bash
# 変更されたサブモジュール参照をステージ
git add path/to/submodule
# or まとめて
git add .

# コミット
git commit -m "Update submodule(s) to latest upstream"

# プッシュ
git push origin main
```

### クローン済みの他メンバーが追従する手順
```bash
git pull                                    # 親リポジトリを更新
git submodule update --init --recursive     # 参照コミットへチェックアウト
```

### Tips
- サブモジュール内でさらにサブモジュールを含む場合は、すべてに `--recursive` を付与
- サブモジュールの追随ブランチを変更したい場合は、`.gitmodules` に `branch = <name>` を追加
- 全 submodule で同じコマンドを実行（テストなど）したい場合は、git submodule foreach 'cmd …'
- サブモジュールをローカル開発した後、Upstream に派生 PR を出す。つまり、サブモジュール内で新ブランチ→親リポジトリでは gitlink だけ更新

### troubles
| 症状                               | 原因                                    | 解決                                    |
| -------------------------------- | ------------------------------------- | ------------------------------------- |
| `detached HEAD` と表示される           | 親リポジトリが固定コミットを指しており、ブランチにいない          | `git checkout <branch>` でブランチへ移動      |
| `fatal: reference is not a tree` | 親リポジトリの gitlink がリモートに存在しないコミットを指している | リモート URL 誤設定／force-push 巻き戻しの確認       |
| 更新後に大量の差分が出る                     | `.gitattributes` や行末設定の不一致            | `.gitattributes` をサブモジュール側にも適用し、再コミット |

## サブモジュールを更新したくないのに、更新してしまった場合

サブモジュール内部でローカル変更を捨てるのがおすすめ。
`cd path/to/submodule<br>git reset --hard HEAD && git clean -fd`

## サブモジュールの初回追加

### 1. サブモジュールの設定
#### Private repo を追加したい

`git submodule add git@github.com:your-username/news.git path/to/news`

#### Public repo を追加したい

`git submodule add https://github.com:your-username/news path/to/news`

### 2. 親レポジトリでサブモジュールの追加したことをコミット

`git commit -m "プライベートリポジトリ news をサブモジュールとして追加"`
Nx 利用時、FrourioNext の OpenAPI 生成でエラーが出る場合の回避方法


FrourioNextをNx環境で導入してみたところ、OpenAPI 生成がうまく動作しなかった。この記事では、初期構築の手順から、発生したエラー内容、そして最終的に力技での回避方法までをまとめます。

---

## ✅ 初期構築

```bash
npx create-nx-workspace@latest --pm pnpm
✔ Where would you like to create your workspace? · org
✔ Which stack do you want to use? · none
✔ Would you like to use Prettier for code formatting? · No
✔ Which CI provider would you like to use? · skip
✔ Would you like remote caching to make your build faster? · skip

cd org
npx nx add @nx/next
npx nx g @nx/next:app apps/frourio-app
✔ Which stylesheet format would you like to use? · css
✔ Which linter would you like to use? · none
✔ What unit test runner should be used? · none
✔ Which E2E test runner would you like to use? · none
✔ Would you like to use the App Router (recommended)? · Yes
✔ Would you like to use the `src/` directory? · Yes
```

必要な依存関係を追加：

```bash
pnpm add next zod
pnpm add @frourio/next npm-run-all --save-dev
```

`package.json` にスクリプトを追加：

```json
{
  "scripts": {
    "dev": "run-p dev:*",
    "dev:next": "nx dev frourio-app",
    "dev:frourio": "cd apps/frourio-app && frourio-next --watch",
    "build:openapi": "cd apps/frourio-app && frourio-next-openapi --output=./public/openapi.json"
  }
}
```

---

## 💥 エラー発生

`pnpm build:openapi` を実行すると、以下のエラーが発生：

```
File '.../frourio.ts' is not listed within the file list of project ''. Projects must list all files or use an 'include' pattern.
Cannot find global type 'Array'.
Option 'customConditions' can only be used when 'moduleResolution' is set to 'node16', 'nodenext', or 'bundler'.
Composite projects may not disable incremental compilation.
```

### 試したこと

- `ts-node` / `@types/node` を追加  
  → グローバル型のエラーは消えたが、残りの問題は解決せず

```bash
pnpm add -D ts-node @types/node
```

- `moduleResolution: bundler` に変更  
  → `customConditions` エラーとトレードオフ発生
- `customConditions: ["development"]` を削除  
  → 一部解決

しかし、`frourio.ts` が `project` に含まれていない旨のエラーがしつこく残る。

---

## 🛠 最終的な解決方法（力技）

どうにもならず、Nx環境でなければ動作したので、**シンプルなNext環境初期構築時に作成されるのtsconfig.jsonを借りて解決**しました。

```bash
npx create-next-app@latest next-app
```

作成された `tsconfig.json` を `apps/frourio-app/tsconfig.json` に一時的に上書きすると、`pnpm build:openapi` が成功：

```json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```

> 💡 `pnpm build:openapi` の前に `tsconfig.json` を差し替え、実行後に元に戻すスクリプトを書いてもよい。

---

## 📝 まとめ

- Nx + FrourioNext の組み合わせでは `tsconfig` 周りに注意
- `ts-node`, `@types/node` の導入は必須
- `File is not listed within the file list of project` のエラーは tsconfig の include や構成そのものが原因？

---

この構成が安定して使えるかどうかは今後次第ですが、同じように詰まった方の参考になれば幸いです。
令和7年4月の終わりに思うこと

｢4月の終わりに思うこと｣

新しい機能を加えるのに、4ヶ月もかかってしまいました。

1年の1/3です。
また、モデルを学習させて
実験する時期がやってきた訳です。

___
この4ヶ月、世界ではAIに関する沢山のニュース、論文等ご飛び交っていました。
SEGAも、強化学習における、"環境のサンプリング"に関する案を出すなど、
様々な会社が独自のAIを、
今の私のように温めていると見ています。

となると、
新時代の幕開けが、やってきます。
会社一つ一つが独自のAIを発表するのです。
各会社は競合するでしょうか？
それとも
各会社は個性を持つのでしょうか？

そんな時代が、もうすぐ来ると思います。

それに私たちはどう備えるか。
私は、堂々と横目で見ながら、ノウハウだけメモして
過ぎ去りますけどね、笑


___

明日に備えて
皆で頑張っていきましょう。

きっと、紛争のない世界を目ざして…
個人的備忘録：Tailwind × framer-motion × API連携で、さぶちゃんを動かしてみた

## はじめに

この記事では、Next.jsでクライアントサイドのAPI通信とアニメーションを組み合わせた実装例を紹介します。主に以下の機能が含まれています：

- framer-motionを使ったアニメーション付き画像の表示
- Tailwind CSSによる画面デザイン

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

このコードは、クライアントサイドで動作するコンポーネントとして構成されています。

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

受講しているITスクールのハッカソンの開発の一環として、クライアントサイドでAPIを呼び出す処理とアニメーションを連動させたコンポーネントを作成しました。自分自身の備忘録として、今後の再利用や他のプロジェクトにも活用できるように記事としてまとめています。

## 実装内容の概要

```tsx
"use client";

import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";

export default function Home() {
  const [message, setMessage] = useState("Loading...");

  useEffect(() => {
    fetch(`${process.env.NEXT_PUBLIC_API_URL}/`)
      .then((res) => res.json())
      .then((data) => setMessage(data.message))
      .catch(() => setMessage("Error fetching message from FastAPI."));
  }, []);

  return (
    <main className="relative flex flex-col items-center justify-center min-h-screen bg-white text-black p-8 gap-10 overflow-hidden">
      <motion.img
        src="/images/sabuchan.png"
        alt="弾けるさぶちゃん"
        className="w-[200px] h-auto absolute z-0"
        initial={{ x: 400, y: -400, scale: 1, opacity: 1 }}
        animate={{
          x: [400, -400, 0, 0],
          y: [-400, 400, -100, -100],
          scale: [1, 1, 1, 2, 0],
          opacity: [1, 1, 1, 1, 0],
        }}
        transition={{
          duration: 6,
          ease: "easeInOut",
          times: [0, 0.4, 0.7, 0.85, 1],
        }}
      />
    </main>
  );
}
```

**実際のさぶちゃん**

![Screenshot 2025-05-01 at 6.01.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/e1dfbaa1-eedf-4819-b84b-cbb815f98cec.png)

## まとめ

このコンポーネントは、Next.jsのApp Routerで使えるクライアントコンポーネントであり、以下の特徴があります：

- APIから受け取ったデータを画面に表示（今回は`message`）
- framer-motionでロゴに動きをつけて視覚的に印象的な演出を実現

ハッカソンなど短期集中開発の中でも、遊び心と機能性を両立したコンポーネントとして活用できるかと思います...！
Geminiでトランペットを使う魔法少女を描いてみた。

# 概要

Geminiでトランペットを使う魔法少女を描いてみました。

# 実装

プロンプトと実行結果は以下の通りでした。

```
光のトランペットを使う魔法少女を描いてください。
```

![光のトランペットを使う魔法少女_20250501.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/98194f53-f324-4e9c-9ce2-60f4a1123dcb.png)


```
闇のトランペットを使う魔法少女を描いてください。
```

![闇のトランペットを使う魔法少女_20250501.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/eab2d073-13f6-4cf3-97df-f17db90c36b6.png)


```
聖なるトランペットを使う魔法少女を描いてください。
```

![聖なるトランペットを使う魔法少女_20250501.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/701b89fb-e268-4f75-9478-5f778476b3af.png)

# まとめ

聖の子は可愛い。
何かの役に立てばと。
個人的備忘録：Gitでローカル作業だけしておき、あとからまとめてpushする運用メモ

## はじめに

Gitを使ったチームや個人での開発において、コミットとプッシュのタイミングは非常に重要です。

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

この記事では「コミットだけしておき、あとでまとめてmainブランチにプッシュする」方法が問題ないのかどうかを整理し、実際の活用方法と注意点を紹介します。

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

受講しているITスクールのハッカソンでチーム開発を進めている中、Gitの操作で「**今はコミットだけしておいて、後からまとめてmainにプッシュしてもいいのか？**」という疑問が生まれました。実際の開発でよくある状況でもあるため、忘れないようにこの記事にまとめることにしました。

## コミットだけして後でまとめてプッシュするのは問題ない？

結論としては、問題ありません。むしろ以下のようなケースでは、まとめてプッシュするのが理にかなっています。

### こんな場合に有効
- 複数ファイルを編集したあとに一括で反映したいとき
- ローカルで動作確認・検証が済んだあとで安定した状態をプッシュしたいとき

### まとめてコミット・プッシュの基本的な流れ
```bash
# すべての変更をステージング
git add .

# コミット
git commit -m "ユーザー登録フォームをFastAPIの/registerエンドポイントに接続するよう修正"

# mainブランチにまとめてプッシュ
git push origin main
```

## 補足：細かくコミット・分岐したほうがよいケース

ただし以下のようなケースでは、目的ごとに細かくコミット・ブランチを分けることが推奨されます。

| ケース | 対応方法 |
|--------|-----------|
| 他人と同時に開発している | 小まめなコミットやPR単位での管理が望ましい |
| バグ修正と新機能開発が混在している | それぞれ別コミットに分けると履歴が明確になる |
| デプロイ前に段階的な確認が必要 | ステップごとにコミットを分けるとトラブルシュートが楽になる |

## まとめ

ハッカソンや個人開発では、ローカルで複数の修正をまとめてコミット→後から一括でmainにプッシュするワークフローはとても実用的です。

ただし、チーム開発や運用フェーズに入ると、目的やタスクごとにコミットを細分化したり、ブランチを切ったりする運用がより効果的だと思います...！
【Rails】_[部分テンプレート名].html.erbについて

# 記事概要
Ruby on Railsの部分テンプレートについて、まとめる

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

# 基本情報
## ファイルパス
app/views/[コントローラー名]/_部分テンプレート名.html.erb
app/views/shared/_部分テンプレート名.html.erb

## 記載方法
[[アクション名].html.erb](https://qiita.com/likapantrip/items/41e40c774daa310711de)を、参照

# まとめ
## form_withメソッド
1. ビューファイルの`form_with`メソッドを確認し、切り取る
    ```erb
    <h3>投稿する</h3>
    <%= form_with(model: @tweet, local: true) do |f| %>
      <!-- 処理 -->
    <% end %>
    ```
1. ビューファイルから切り取ったコードを、部分テンプレート`_form.html.erb`に貼り付ける
    ```erb
    <%= form_with(model: @tweet, local: true) do |f| %>
      <!-- 処理 -->
    <% end %>
    ```
1. modelオプションの変数から、`@`を削除する
    ```erb
    <%= form_with(model: tweet, local: true) do |f| %>
      <!-- 処理 -->
    <% end %>
    ```
1. ビューファイルに`render`メソッドを追加する
    ```erb
    <h3>投稿する</h3>
    <%= render partial: "form", locals: { tweet: @tweet } %>
    ```
    - 部分テンプレートだと、`model: tweet`になっている
    - `locals: { tweet: @tweet }`と記述することで、`@tweet → tweet`と読み替えることができる

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

# ビュー
https://qiita.com/likapantrip/items/7773987cdd641ea3aad9
usersテーブル作成 (実務未経験状態でLaravelを使用した共同開発　タスク1)

## 0.背景
本記事は、前回の記事「実務未経験状態でLaravelを使用した共同開発」で取り組んだタスクのうち、usersテーブルの作成とシーダーによるテストデータ登録に関する実装内容の詳細をまとめたもの。

https://qiita.com/ashi__mo/items/9abff3c5227660dcddba

## 1.タスクの見積もり
##### 期間
・１週間
##### 理由
テーブル設計やSeeder作成はおおよそイメージできていたものの、以下の点を考慮し、余裕を持った見積もりとしました。
・初の共同開発という環境でのタスク対応であること
・Git操作やブランチ運用に不慣れな点の確認作業
・Laravelのマイグレーション・シーダーに関する操作確認
・テストケースの作成・確認時間の確保
・PR提出後のレビュー対応時間の見積もり
##### 実績
・仕様作成完了、テストケース確認：１日
・PR完了：２日
・マージ完了：３日（PR修正なし）
## 2.実装内容
①usersテーブル作成
・Laravelの初期マイグレーションファイル（create_users_table.php）に softDeletes() を追加し、論理削除に対応。
②テストデータ登録用シーダー作成
#### users テーブルに以下ルールで2件のレコードを登録：
・name：6文字のランダムな文字列
・email：name + @sample.com 形式
・password：文字列 'password' を Hash::make で暗号化
※ for文を活用し、登録件数を容易に変更できる構成としています。
③UserモデルにsoftDeletes追加
・Illuminate\Database\Eloquent\SoftDeletes をuse句で取り込み、モデルにトレイトを適用。
## 3.テスト実施内容
・usersテーブルにdeleted_atカラムがあることを確認
・シーダー実行後、usersテーブルにレコードが正しく追加されることを確認
・登録データに対して論理削除が有効であることを確認

## 4.本実装に関して
・可読性：仕様の理解を補助するため、要所にコメントを記載し、第三者が読んでも意図がわかるように意識。
・再利用性：Seederの構成やモデルの記述についても、他の機能や環境に転用しやすい形で記述。
・再利用性：テストデータ登録数を柔軟に変更できるようfor文とランダム値を活用し、今後の再利用や追加開発への対応を想定。
yukicoder NO.241 出席番号(1) 解法

## 初めに
初稿です。見づらかったら申し訳ないです。
自分は競技プログラミング初心者で、今年の一月から始めました。なので、分からないところも沢山あります。

意見あればコメントよろしくお願いします。

そもそもこの解法自体が間違ってたらごめんなさい。本当に。ホンマに。その場合はなんかどうにかします。なんかこういう考え方いいよね～ぐらいに思ってください。

## 問題の概要
[NO.241 出席番号(1)](https://yukicoder.me/problems/no/241)

N人の生徒に対し、それぞれの生徒が嫌いな数字にならずに、0~N-1を一回ずつ割り振るとき、どのような割り振り方が存在するか一つ挙げよ。なければ-1を出力せよ。

## 自分の解法

N=1のとき、その生徒の嫌いな数字が0のとき、-1を出力し、それ以外は0を出力すれば良いので、Nが2以上の時を考えます。

まずリストに、何の数字が嫌いかと何番目の生徒(何番目に出力する生徒)かという二つの情報を一緒に記憶します。

次に、何の数字が嫌いかという部分でこのリストを昇順にソートします。次に、このリストに、その生徒に割り振る数字をN-1,N-2,...,1,0と順番に入れます。ここで、今割り振られた数字と生徒の嫌いな数字が被るのは高々一つのみです。もし、無ければ、そのまま生徒の順番に注意して出力しましょう。

下が何故高々一回かのイメージ図です。(N=8の時のとある例であり、●が生徒の嫌いな数字で、星がその生徒に割り振られた数字です。)(手書き&直撮りで見にくかったら申し訳ないです。)


![PXL_20250430_173850960.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4015936/623bcc89-4e55-4364-9b3b-1546e39e65a6.jpeg)


もし、一回被ったときは次の操作を一回行えばよいです。

その割り振られた数字が嫌いな数字と**被った生徒**の割り振られた数字と、その**被った生徒**と嫌いな数字が異なる生徒いずれか一人の割り振られた数字を交換する。


![PXL_20250430_173916187.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4015936/ca970b6c-1b37-4138-92ca-d4f9a82c69aa.jpeg)



ここで、**被った生徒**と嫌いな数字が異なる生徒がいない、言い換えれば、生徒の嫌いな数字が全て一致し、かつその数字が0以上N-1以下である場合、必ず誰かしらは、嫌いな数字と当たってしまうので-1を出力します。
それ以外は順番に注意して出力しましょう。

[コードテスト](https://yukicoder.me/submissions/1081172)

このコードでAC通りました。

私のコード下部の二つのwhile文は、**被った生徒**と嫌いな数字が異なる生徒を探すものです。ここは、全ての生徒について、調べればよいのでこれにこだわる必要はありません

計算量は最初のソートがネックとなり**O(NlogN)で十分高速**です。
VScode Cursorで記載内容やファイル名でファイルを検索しよう

## 概要

VScodeやCursorでファイル検索をする方法を簡単にまとめる。

## 前提

- 筆者のPCはMac、そのためショートカットなどはMacに準拠したものとなる
- 添付するスクショはCursorとなる

## ケース別検索方法

### ファイル名の一部からファイルを検索して表示したい

「ファイル名がなんとなく思い出せる」「拡張子だけわかる」みたいな場合に使いやすい。
「ファイル名の一部」は拡張子や断片的なファイル名でもOK、入力に応じてリニアに検索結果をサジェスト表示してくれるので完全入力する必要はない。
手順を下記に記載する。

1. 「command」+「p」を押下
1. 開いた入力欄にファイル名の一部を入力
1. ヒットしたものを選択してEnterを押下

イメージ↓

![CleanShot 2025-05-01 at 01.38.04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/5446f80a-e812-4228-bb95-92ba19cc2497.gif)

### 記載内容からファイルを検索して表示したい

クラス名や特定の変数名などでファイルを検索したい場合もある。その場合は下記の様にサイドバーでの検索を使うと良い。
大文字小文字考慮、完全一致、正規表現などの指定方法もできる。

1. 「control」+「command」+「f」を押下
1. 開いたサイドバーの入力欄に検索内容を記述

※ちなみに開いたサイドバーは「command」+「b」を押下することで閉じる事ができる。

イメージ↓（`class ExampleTest`と記載されているファイルを見つけたい場合）

![CleanShot 2025-05-01 at 01.46.00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6eed10f7-471b-4efd-935c-b59da1416331.gif)

### 記載内容からファイルを検索して表示したい（ターミナルでgrepコマンド使用）

エディタだとフレームワーク構成コードまで検索を行ってくれない場合がある。（おそらく検索対象範囲の設定をエディタ側で施せば検索できるが常時大量の検索範囲が設定されていると検索がもたつきそう）
その場合はターミナルを使ってフレームワーク構成コードのディレクトリまで移動してgrepで検索すると良い。
詳細は下記の記事に記載した。

https://qiita.com/miriwo/items/f6f5b83bdc0504e4f52d

### AIに頼む（Cursorのみ）

Cursor限定ではあるがサイドバーのチャット欄で「〇〇のファイルを探して」とお願いすると探索してくれる。
手順を下記に記載する。

1. 「command」+「l」を押下
1. チャット欄に探してほしいファイルの手がかりを入力してEnterを押下
1. 結果のファイルをクリック

イメージ↓（`class ExampleTest`と記載されているファイルを見つけたい場合）

![CleanShot 2025-05-01 at 01.54.04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/280a9554-9787-4765-a3b3-90738dab0464.gif)
【25年春】応用情報技術者試験午前分からない用語まとめ

2025年秋の応用情報技術者試験を受験しました。
結果としては、午前不合格となりました。（午前難しかったです・・・）

今回、午前試験を受けて、初見の問題だったり、忘れている用語や知らない単語を含んだ問題が何問か出てきました。
（不勉強なだけなところもありますが・・・）

次回以降で出題された際に解答できないのは癪なので、再出題に備えて1度振り返ってみます。

#### DMAコントローラー（#9）
DMAはDirect Memory Accessの略。
メモリとメモリ間で高速にデータ転送を行うための機構で、大量の連続したアドレス上のデータ転送を行う場合は、DMAコントローラを使用することでCPUの負荷低減やデータ転送スループット工場といったメリットが得られる。
https://edn.itmedia.co.jp/edn/articles/2311/13/news012.html
#### Swagger（#17）
REST APIの設計に利用するツールセットのこと。
https://www.aeyescan.jp/blog/openapi/#toc2
#### ワイドカラム（#24）
キーバリュー型の「値」の部分が1つ以上のカラム（列）になったもの。
列指向といわれることもあり、データはRDBの用に管理される。
カラムにネスト構造を持たせられるものもあり、検索や集計処理を得意としている。
特徴としては以下が挙げられる。
・各行に同じ列がなくてもよい
・列を動的に追加できる
・すべての列に値がない状態も許容される
https://x-tech.pasona.co.jp/media/detail.html?p=9063
https://qiita.com/AkitsuguHirano/items/980de403cc7fe6c941e3#nosql
#### OCSP（#38）
Online Certificate Status Protocolの略。
公開鍵の証明書の失効状態を取得する通信プロトコル。
OCSPを使うことで、有効期限より前に失効している証明書を速やかに確認することが可能。
https://www.designet.co.jp/faq/term/?id=T0NTUA
#### セキュリティ・クリアランス（制度）（#39）
国家における情報保全措置の一環として、政府が保有する安全保障上重要な情報として指定された情報に対して、アクセスする必要がある者のうち、情報を漏らすおそれがないという信頼性を確認する制度。
https://www.cas.go.jp/jp/seisaku/keizai_anzen_hosyo_sc/dai10/sankou.pdf
#### OSコマンドインジェクション（#42）
入力値の中に紛れ込ませたOSコマンドを、Webアプリケーションがシェルに渡してしまうことで成立する攻撃。
対策としては下記が挙げられる。
・OSコマンドを呼び出せる関数・メソッドを使わない
・シェルの呼び出し機能がある関数を使わない
https://www.shadan-kun.com/blog/measure/2873/
#### ストレッチング（#43）
パスワードを補完する際にハッシュ化を繰り返すこと。
パスワードが短い場合でも割り出しを困難にするための措置で、攻撃者はハッシュ力原文を割り出す操作をパスワード記録時と同回数繰り返さなければ元のパスワードにたどり着くことができない。
#### デザインレビュー（#45）
システムの開発過程において、設計内容を吟味・確認することです。システムの問題点を開発の各局面で早期に発見して、最終的に高い品質のシステムを実現すること。
https://www.bohyoh.com/ITEE/SDD/2009A/SDD2009AA45.html
#### ブルーグリーンデプロイメント（#46）
現状の本番環境（ブルー）とは別に新しい本番環境（グリーン）を構築した上で、ロードバランサーの接続先を切り替えるなどして新しい本番環境をリリースする運用方法のこと。
https://xtech.nikkei.com/atcl/nxt/keyword/18/00002/070800077/

#### カオスエンジニアリング（#49）
カオスエンジニアリングは、システムが本番環境における不安定な状態に耐える能力へ自信を持つためにシステム上で実験を行う訓練方法のこと。
カオスエンジニアリングでは、下記５つの原則に沿って行うことが推奨されている。
・定常状態における振る舞いの仮説を立てる
・実世界の事象は多様である
・本番環境で検証を実行する
・継続的に実行する検証の自動化
・影響範囲を局所化する
https://www.ctc-g.co.jp/report/column/chaos-engineering/
#### Activity-Based Costing（#64）
活動基準原価計算の略。
製品にかかる間接費をより明確に把握するだけでなく、実態に基づいた価格設定を行うためにも役立つため、特に製造業や建設業などで利用されている計算方法。
##### 計算方法
活動1にかかった費用 × 活動でかかった時間のうち製品1にかかった時間 ÷ 活動1へかかった時間 = その活動の原価
#### フリーミアム（#70）
「基本的サービスや商品を無料で提供するフリー」と「より高度なサービスや商品を有料で提供するプレミアム」をあわせて収益を確保するビジネスモデルのこと。
Web上のフリーミアムとして「無料ユーザー95%」「有料ユーザー5％」でもビジネスとして成立する5％ルールが有名である。
https://www.kaonavi.jp/dictionary/freemium/
#### コンピテンシーモデル（#72）
仕事で成果を上げる従業員の行動に見られる特性を洗い出し、「理想の社員像」を策定すること。
https://www.dodadsj.com/content/200918_competency-model/

#### 移動平均法（#74）
データの短期的な変動を平滑化し、長期的なトレンドを把握するのに役立つ。
メリットとして、データの短期的なノイズを除去し、長期的なトレンドを明確にすることが挙げられる。
デメリットとしては、外的要因による一時的な変動に敏感であるため、予測精度の低下する可能性がある。
#### 指数平滑法（#74）
過去のデータに重みを加え、最新のデータを重視する手法。
メリットは過去のデータを効果的に活用し、トレンドや季節変動を考慮できる点。
デメリットは過去のデータに依存するため、急激な市場変化には対応しきれない点。
https://book.st-hakky.com/data-science/demand-forecasting-methods/

以上です。
次は受かりたいので、もう少し勉強の仕方を見直して臨みたいと思います。
競プロ日記#25/04/30

# アルゴ式-[接線の傾き (1)](https://algo-method.com/tasks/582)
- 接戦の傾きの定義から

```
int main() {
    int a,b,c,k;
    cin >> a >> b >> c >> k;
    cout << (2 * a * k) + b << endl;
}
```
# アルゴ式-[接線の傾き (2)](https://algo-method.com/tasks/676)
- 2項係数を使うとNK^N-1だけ残ることに気付けるかどうか
- long long にしないと

```


using Graph = vector<vector<int>>;

int main() {
    int N,k;
    cin >> N >> k;
    long long ans = N * pow(k,N-1);
    cout << ans << endl;
}
```

# アルゴ式-[導関数](https://algo-method.com/tasks/677)
- 導関数を求める
- 無性に数3やりたくなる
```
int main() {
    int N;
    cin >> N;
    for (int i = 0; i <= N; i++) {\
        int a;
        cin >> a;
        if (i == 0){
            continue;
        }
        cout << a * i << " ";
    }
    cout << endl;
}
```
【C#】WebView2テスト


### 環境
- Windows 11 バージョン24H2(26100.3915)
- .NET Framework 4.7.2
- メモ帳

### NuGetからWebView2のDLLを準備

https://www.nuget.org/packages/Microsoft.Web.WebView2

1. `About` > `Download package`
2. `.nupkg`を`.zip`に書き換えて展開
3. `lib`とか`build`の中にDLLがいる
4. `C:\Windows\Microsoft.NET\Framework\v4.0.30319`に以下のDLLをコピーする
* Microsoft.Web.WebView2.Core.dll
* Microsoft.Web.WebView2.WinForms.dll
* WebView2Loader.dll

### csを書く
```C#:WebView2_App.cs
using System;
using System.Windows.Forms;
using Microsoft.Web.WebView2.WinForms;
using Microsoft.Web.WebView2.Core;

class WebViewForm : Form
{
    private WebView2 webView;

    public WebViewForm()
    {
        this.Width = 1000;
        this.Height = 700;

        webView = new WebView2();
        webView.Dock = DockStyle.Fill;
        this.Controls.Add(webView);

        this.Load += async (s, e) =>
        {
            await webView.EnsureCoreWebView2Async();
            webView.CoreWebView2.Navigate("http://www.yamauchifumito.com/#");

            // ページ読み込み
            webView.CoreWebView2.NavigationCompleted += async (sender, args) =>
            {
                // 何か処理
            };
        };
    }

    [STAThread]
    static void Main()
    {
        Application.EnableVisualStyles();
        Application.Run(new WebViewForm());
    }
}

```

### ビルドする
```bash:build.bat
@echo off
setlocal

set CSC=%WINDIR%\Microsoft.NET\Framework\v4.0.30319\csc.exe

set OUT=webview_app.exe

%CSC% /target:winexe /out:%OUT% ^
    /reference:"Microsoft.Web.WebView2.WinForms.dll" ^
    /reference:"Microsoft.Web.WebView2.Core.dll" ^
    /reference:"System.Windows.Forms.dll" ^
    /reference:"System.Drawing.dll" ^
    webview.cs

if exist %OUT% (
    echo.
    echo === ビルドできてるよ ===
) else (
    echo.
    echo !!! ビルドできてないよ !!!
)
endlocal
pause
```
【初心者】バージョン管理システムとGit・GitHubの操作

前回　[[初心者]Git GitHubについて・環境構築](https://qiita.com/sugichan-0306/items/dec0e50ec75d9a9498c3)

# バージョン管理システムの種類
バージョン管理システムとは、ソースコードやドキュメントなどのファイルの変更履歴を記録・管理する仕組みです。
バージョン管理システムには中央サーバーがすべての履歴やファイルを管理する **集中型** と開発者ごとにリポジトリを持つ **分散型** があります。Gitは後者の分散型に当たります。
<br>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073103/982812be-0faf-4cd5-9719-34a2c4d3f69d.png)

# ブランチ（branch）
ブランチとは簡単に言うと**自分の作業スペース**です。
なぜ、ブランチを作るのかというと本体（`main`）に直接コードの書き換えを行うと壊してしまう可能性があるからです。
もし、作業用のブランチでバグなどが発生してもそれは自分の作業スペースでのみの問題なので、`main`や他の作業者に影響が出ません。
後の項目でブランチの作成コマンド等を紹介します。

# Git・GitHubの操作
Gitは分散型のバージョン管理システムです。前項の知識を踏まえながらGit・GitHubの操作についてまとめます。
## 基本操作
- `git clone`
    GitHub上のリポジトリをローカル環境に複製するコマンドです。
    ```bash
    cd [作業ディレクトリのパス]
    git clone [リポジトリのURL]
    ```
    [URL]にはGitHubのリポジトリにある<>CodeからURLをコピーして接続します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073103/8cf284cb-73c8-40c0-a6b5-77f6d9f935e7.png)
<br>

- `git init`
    ローカルリポジトリを初期化するコマンドです。`.git`という隠しフォルダが作られることで、フォルダ内のファイル変更がGitによって記録・追跡されるようになります。
<br> 

- `git branch`
    今いるブランチを確認するコマンドです。実行するとブランチの一覧が表示され、今いるブランチには`*`がつきます。
    ```
    git branch
    ```
    コマンドの後ろにブランチ名をつけると前項で説明したブランチの作成コマンドになります。
    ```
    git branch ブランチ名
    ```
    このコマンドはブランチが作られただけで作成したブランチに移動はしません。また、ブランチ名には命名規則がありますがここでは説明しません。気になる人は調べてみましょう。
<br>

- `git checkout`
    **ブランチ作成とそのブランチに切り替える**コマンドです。`git branch`よりもよく使われます。
    ```bash
    git checkout -b ブランチ名
    ```
<br>

- `git add`
    指定したファイルをワーク釣りからインデックスに登録するコマンドです。わかりやすく言うと、ローカルリポジトリに保存する前に、 **「どの変更を保存するかを選ぶ」** 作業です。
    ```bash
    git add ファイル名         #指定したファイルを追加
    git add .                 #カレントディレクトリ以下のすべての変更を追加
    git add folder/           #特定のフォルダ内の変更を追加
    ```
<br>

- `git commit`
    インデックスに登録されたファイルをローカルリポジトリに **記録＝コミット** をするコマンドです。実行する際には`-m` でコメントを記述する必要があります。
    ```bash
    git commit -m "変更内容の説明"
    ```
<br>

- `git push`
    ローカルリポジトリに記録した変更を、リモートリポジトリ(GitHub)に送るコマンドです。
    ※初回のみ「.git」ファイルをリモートリポジトリに以下を実行します。
    ```bash
    git remote add origin [URL]
    ```
<br>
   2回目以降は以下コマンドでリモートリポジトリにファイルをアップロードできます。 
   
```bash
git push origin main
``` 
    
`origin`:リモートリポジトリの名前（通常はorigin）
`main`:送信したいブランチ名（通常はmainかmaster）
<br>

- **プルリクエスト**
    GitHub上でソースコードの変更をリポジトリの管理者やレビュアーに対して通知して`main`に反映（マージ）を依頼する機能です。`git push`を行った後にプルリクエストを送ることができ、管理者やレビュアーには変更内容やコードの差分などが通知されます。
<br>

- `git pull`
    リモートリポジトリの最新の状態をローカルに取り込むコマンドです。
    ```bash
    git pull origin main
    ```
    自動的にGitHubから最新のmainをダウンロードし、ローカルに合体されます。
<br>

- **コンフリクト（衝突）**
    同じ場所を複数人で同時に変更したとき、どれを採用すればいいのかわからなくなる状態です。コンフリクトが発生したら発生しているブランチの編集内容を確認し、修正した後に再度マージすることで解消させます。

# まとめ
バージョン管理システムについてとGit・GitHubの操作についてまとめました。これらを使うことで、Git・GitHubを使った開発を一通り行うことができます。GitHubを使いこなせるとチームでの開発効率が上がります。また、就活時のアピールにもなるのでぜひ活用していきましょう！