OmniAICreator/Qiita-1.07M huggingface dataset:
ツールを活用して効率的な文書作成をしよう

# ◆この記事の目的
テクニカルライティングに活用できる便利なツールを知る

# 目次
▼[執筆ツール](#執筆ツール)
▼[構成検討支援ツール](#構成検討支援ツール)
▼[構成支援ツール](#構成支援ツール)

# ▼執筆ツール
## テキストエディター
OSに標準で搭載されているツール。
動作が軽量で、検索や置換など必要な機能は十分に装備している。しかし、作図はできない。

例）メモ帳（Windows）　
　　テキストエディット（Mac）
  
## ワープロ
文書作成専用の定番ツール。
作図や作表機能があるが、データサイズが大きくなると動作が重くなる。大量ページには向いていない。

例）Microsoft Word

## レイアウトツール
元々は印刷用のデータ作成ツール。
データサイズが大きくなっても動作が安定。PCが変わってもレイアウトは崩れない。

例）Adobe InDesign
　　Adobe FrameMaker

# ▼構成検討支援ツール
## アウトラインプロセッサー
項目の順序や階層関係を検討する際に使用するツール。
文書の骨格を作ることができる。

例）Nami2000
　　Microsoft Word
　　Mindjet MindManager

## マインドマッピングツール
考えたことをビジュアル化させるツール。
書きべき事柄を整理することに特化。書き方を習得する必要がある。第三者と共有する目的には適さない。

例）FreeMind
　　Mindjet MindManager

# ▼構成支援ツール
## オンライン校正ツール
PDFに校正結果を書き込むツール。
従来は人の経験に頼っていた領域が、ツールの力で効率的に作業可能となった。

例）Adobe Acrobat

## 校正支援ツール
誤字脱字、用語辞書との不整合などを抽出するツール。

例）ジャストシステム Just Right!

# ▼参考文献
[日本語スタイルガイド（第3版）](https://jtca.org/learn-tc/publication/guide_jsg/)
【1分解説】webサイトとwebアプリって何が違うん？

# 【1分解説】webサイトとwebアプリって何が違うん？

「Webサイト」と「Webアプリ」って何が違うの？ 🤔  
なんとなく知ってるけど説明できない…そんなあなたへ！  

**✅ この記事を読めば、サクッと理解できます！**  

---

## 💡 Webサイトって何？  
**Webサイト** には **ホームページ** などが含まれます。  
**「読むだけ」** のものが多く、基本的にユーザーは内容を変更できません。  

### **🔹 例えばこんなもの**
- 企業の公式サイト  
- ニュースサイト  
- ブログ記事  

> **💡 ポイント：**  
> Webサイトは「📖 本」のようなもの。  
> 読むことはできても、書き換えることはできない！  

---

## 💡 Webアプリって何？  
**Webアプリ** には **Instagram** や **YouTube** などが含まれます。  
**「操作して変化する」** のが特徴で、ユーザーの行動によって画面が変わります！  

### **🔹 例えばこんなもの**
- Instagram（投稿・コメントができる）  
- YouTube（動画をアップロードできる）  
- Gmail（メールを送受信できる） 

> **💡 ポイント：**  
> Webアプリは「🎮 ゲーム」のようなもの。  
> ボタンを押したり、スティックを動かすと画面が変わる！  

---

## まとめ：WebサイトとWebアプリの違い
|  | Webサイト | Webアプリ |
|---|---|---|
| **特徴** | 読むだけ📖 | 操作できる🎮 |
| **例** | 企業のHP・ブログ | Instagram・YouTube |
| **イメージ** | 本📚 | ゲーム🎮 |

**✅ これだけ覚えよう！**
👉 **Webサイト** = 本のようなもの（内容は変えられない）  
👉 **Webアプリ** = ゲームのようなもの（操作できる）
Karabiner-Elementsで「Windowsキー＋数字キー」のショートカットを再現する方法

Karabiner-Elementsは、Macでキーボードの挙動を自由にカスタマイズできるツールです。このツールを活用して、Windowsの「Windowsキー＋数字キー」のようなショートカットをMacでお手軽ｎ再現します。以下に具体的な手順を解説します。

---

### **手順**

#### **1. Karabiner-Elementsのインストール**
まず、Karabiner-Elementsを公式サイトからダウンロードしてインストールします。インストール後、必要な権限（例: 入力監視）を付与してください。

---

#### **2. Complex Modificationsの設定**

1. Karabiner-Elementsを開き、「Complex Modifications」タブに移動します。
![スクリーンショット 2025-02-08 10.23.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995511/d5f173c7-f6b5-a250-bef7-cd9fd6825053.png)

2. 「Add your own rule」をクリックし、以下のコードをコピペします。

```json
{
    "title": "Ctrl-7 to open Google Chrome",
    "rules": [
        {
            "description": "Ctrl-7 to launch Google Chrome",
            "manipulators": [
                {
                    "type": "basic",
                    "from": {
                        "key_code": "7",
                        "modifiers": {
                            "mandatory": ["control"]
                        }
                    },
                    "to": [
                        {
                            "shell_command": "open -a 'Google Chrome'"
                        }
                    ]
                }
            ]
        }
    ]
}
```
![スクリーンショット 2025-02-08 10.23.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3995511/b8178ee4-df80-50d1-7ee8-a8a87ea5e8d8.png)

Saveを押します。
ちなみにこのコードは「Ctrl + 7」を押すとGoogle Chromeを起動する設定です。実際に動作を確認して終了です。



#### **4. その他の応用**
Karabiner-Elementsでは、さらに複雑な動作も設定可能です。例えば、「Chromeを開いた後に新しいタブを自動で開く」といった操作も実現できます。以下はその設定例です。

```json
{
    "description": "ctrl-6 to chrome and open new tab",
    "manipulators": [
        {
            "from": {
                "key_code": "6",
                "modifiers": { "mandatory": ["control"] }
            },
            "to": [
                { "shell_command": "open -a 'Google Chrome'" },
                { "shell_command": "osascript -e 'tell application \"Google Chrome\" to tell front window to make new tab'" }
            ],
            "type": "basic"
        }
    ]
}
```

この設定により、「Ctrl + 6」を押すとGoogle Chromeが起動し、新しいタブが自動的に作成されます。

---

### **応用方法**
このような設定は、ChatGPTなどのAIツールを利用して希望する動作内容を入力することで、簡単に作成できます。
必ず動作チェックは必要ですが。

---

### **参考文献**
1. [Qiita: Karabiner-Elementsでショートカット設定](https://qiita.com/yohm/items/de35f3874fd0e679ccdf)
keycloakのリバースプロキシの設定

# はじめに
Keycloakのリバースプロキシの設定でハマったので備忘録として記載する。

## 取ろうとした構成図
![aws_keycloak.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3656226/7b96ca86-f706-d744-5fa0-a2c13f4f7b4b.png)

AWS上に上記の構成で、quay.io/keycloak/keycloak:26.1.0を使用しkeycloakコンテナを立てた。
ALBがDNSを持っており、そのDNSの特定パスにアクセスした場合、ALBの
裏のKeycloakにアクセスできる構成。この場合ALBはリバースプロキシの役割をしている。

この構成で、
| 変数名                        | 値   | 説明                                                 |
|------------------------------|------|------------------------------------------------------|
| KC_BOOTSTRAP_ADMIN_USERNAME  | 任意の値  | adminのid                                           |
| KC_BOOTSTRAP_ADMIN_PASSWORD  | 任意の値  | adminのパスワード                                   |
| KC_HEALTH_ENABLED            | true | ヘルスチェックを許可orしない。9000番port、デフォルトでは/healthでヘルスチェックしている。 |

の環境変数を設定しECSタスクを起動したところ、mixed contentでエラーになった。
この理由としては、ECS自体が前にALBの存在を知らず、レスポンスのロケーションにhttpでのECSのipを載せてしまう。ゆえにmixed Contentsでブロックされてしまうからである....(下記図のようになる)

![aws_keycloak_error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3656226/c2035ef8-20d6-394d-5a90-ebc3c4644593.png)

初めにドキュメントを見て、あまりよくわからなかったため、

ネット上で色々と検索したところ、
https://sabiz.hateblo.jp/entry/2023/03/24/071754
や
https://stackoverflow.com/questions/55044623/mixed-content-error-because-of-keycloak-default-login-redirection
に
```
PROXY_ADDRESS_FORWARDING=true
```
や
```
KC_PROXY=passthrough
```
のような設定があったため、入れてみてもうまくkeycloakがリバースプロキシを処理してくれていなかった。

最終的にドキュメントを血眼になって読み込むと、上記の環境変数は無くなっており、
[Keycloakの公式ドキュメント](https://www.keycloak.org/server/hostname)に、
```
hostname=任意のurl
hostname-backchannel-dynamic=true
```
とすると、うまく動くと記載があった。直接
[useing proxy](https://www.keycloak.org/server/reverseproxy)に記載はなく、Port to be proxied項目の遷移後のページに記載があったため、一度軽く見ただけでは見つからなかった...


英語を忌避せずにしっかりドキュメントと向き合おうねというお話でした。
フロントの世界の発展は早いから2~3年前の記事は参考にならないね。

この記事も数年経てば役に立たなくなることでしょうが、それまでに誰かの参考になれば！
モダンの「数値入力」の困った仕様について ※2025年3月4日現在

この記事の内容は2025年3月4日時点での仕様です。
今後のバージョンアップなどにより変更される可能性があります。
作成バージョンは以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/465d6cf7-5371-45b5-a689-a8860303759a.png)

## モダンの「数値入力」について
PowerAppsStudioの設定でモダンコントロールをオンにすると、新しい外観のコントロールを使用することができます。その中に数値入力するための「数値入力」コントロールがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/f67088cb-406a-4dda-da4b-2c93f874a695.png)
↑このようなコントロールで、右側の上下ボタンで数値を変更することができるようになっています。

SharePointリストをデータソースとして、モダンコントロールのフォームを追加した際も、数値列があると「数値入力」コントロールが自動的に追加されます。

ボタンを配置してOnSelectプロパティに```SubmitForm(Form1)```として、ボタンを押下するとリストに保存することができますが、この際に数値だけが保存されないことが多々あり、少し悩んでいました。

検証して分かったこととしては、

## ※フォームの場合
**「数値入力」コントロールのフィールドを編集して、カーソルがフィールドに残った状態で、SubmitFormボタンを一瞬押しても、編集した数値がリストに保存されない**ということでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/279642f1-8ccc-d4b1-02e3-422f5810e6e5.png)
↑この状態ではボタンを一瞬押すだけでは編集した数値が保存されない

これは、ボタンを押した際にフィールドが確定されて、離した際に送信されるためのようです。
ボタンを押して離すのが一瞬だと、入力した値が確定されていない状態で送信されるので、編集された値が保存されないのではないかと思います。

ちなみに「テキスト入力」（TextInputCanvas）では大丈夫でした。


### ▼ではフォームを使用しない場合はどうか
## ※Notifyの場合
これはフォームのSubmitFormと同じでした。

![NumberInputの挙動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/907e9dc2-79ea-4957-af79-e24ae73ec062.gif)
「123」と入れてボタンを押して、1秒くらいで離した場合は、ちゃんと反映されています。
「456」と入れてボタンを押して、0.5秒くらいで離した場合は、編集前の値が取得されていることが分かりますね。

## ※Patchの場合
ボタンのOnSelectプロパティに```Patch(testlist,Default(testlist),{user_ID:NumberInput.Value})```
として、ボタンを押下するとこれまた保存されるときと保存されない時があります。
フォームの時は空白で保存されていましたが、こちらは行自体が追加されません。

ボタンを押して離す時間が一瞬だと、入力が確定されるだけで保存されません。
ボタンを押して、一瞬間をおいて離すときちんと保存されます。

おかしな現象はそれだけではなくて、
例えば123と入力しているフィールドを1234に編集してカーソルを残したままボタンを押します。
すると、123と編集前の数値が保存されてしまう。
これもボタンを押して離す間を空けるとちゃんと1234と保存されます。

## ※Collectの場合
結論から言うと、Collect関数の場合は大丈夫でした。
```Collect(testlist,{user_ID:NumberInput.Value})```
で、何度も試してみましたが、特に異常はありませんでした。

ただ、フォームとPatchの動作が不安定なので、今の状態では使用するのに不安が残ります。

## 予想
恐らくですが、この仕様は「テキスト入力」の「出力のトリガー(TriggerOutput)」の初期値「Forcus Out」がそのまま使われているのではないかと思います。
「テキスト入力」ではこの設定を3種類設定することができますが、「数値の入力」にはありません。
▼試しにOnChangeプロパティに
```
Notify(NumberInput1.Value,NotificationType.Warning)
```
として試したところ
「テキスト入力」の「Forcus out」と同じ挙動になりました。

できれば「keypress」にされるか「出力のトリガー」の設定が「数値入力」にも実装されることを願います。

## ※対策
失敗： ~~Select関数で別のコントロールを選択してからSubmitFormする~~
失敗： ~~Select関数で別のコントロールのボタンでSubmitFormする~~

成功：タイマーコントロールでSubimitFormを〇秒遅らせる

結果タイマーコントロールで遅らせて送信したところ、編集した内容をきちんと送信することができました。

フォーカスが外れてから送信することで、編集した内容が反映されたのだと思います。
Durationプロパティをどれくらいまで小さくできるか検証したのですが、60ミリ秒まではOKで50ミリ秒では不安定でした。
ただ、ボタンを離してタイマーが動作するまでにも遅延はあると思いますので、ギリギリを攻めてもあまり意味はありません。
実用上100ミリ秒に設定しておけば、安定して取得できるのではないかと思います。

ふと、モダンの「ボタン」に「DelayOutput」プロパティがあれば、「タイマー」を使う必要がないと思ったのですが、残念ながら有りませんでした。

現状有効な対策はタイマーだけだと思うのですが、そこまでしてモダンコントロールの「数値入力」コントロールを使うかというところですね。
Pythonで「逐次近似法」を使って方程式を解くプログラムを作成してみた

# はじめに
こんにちは！今回はPythonで「逐次近似法(Successive Approximation Method」を使って2次方程式の解を求めてプログラムを紹介します。
# 逐次近似法とは？
逐次近似法(Successive Approximation Method)とは、非線形方程式の解を近似的に求める方法の1つです。最初に適当な初期値を設定し、その値を用いて繰り返し計算することで、解に収束していくことを期待します。数値計算の分野で、反復的に解を求める手法としてよく用いられます。
# 実装コード
以下のプログラムでは、2次方程式
```math
ax^2+bx+c=0
```
の解を2つ異なる方法で求めます。

1.解の公式を使って厳密な解を計算する
→  (solution_of_quadratic_equation 関数)
2.逐次近似法を使って数値的な解を求める
→  (successive_approximations 関数)
```py:SAM.py
from decimal import Decimal

def solution_of_quadratic_equation(a, b, c):
    """ 2次方程式の解を公式を使って求める関数 """
    a = Decimal(a)
    b = Decimal(b)
    c = Decimal(c)
    tmp = (b**2 - 4*a*c).sqrt()
    alpha_ = (-b + tmp) / (2*a)
    beta_ = (-b - tmp) / (2*a)
    return alpha_, beta_

def successive_approximations(a, b, c, x0=0):
    """ 逐次近似法で解を求める関数 """
    a = Decimal(a)
    b = Decimal(b)
    c = Decimal(c)
    return ((-b*x0 - c) / a).sqrt()

```
# 使用例
実際に2次方程式
```math
2x^2+x+2=0
```
を解いてみます。
```py:SAM.py
# 定数項を設定
a = 2
b = 1
c = -2

# 厳密解を計算
alpha_, beta_ = solution_of_quadratic_equation(a, b, c)
print(f"alpha_ = {alpha_}")
print(f"beta_ = {beta_}\n")

# 逐次近似法で解を求める
x_n = -2  # 初期値
for i in range(1, 11):
    x_n = successive_approximations(a, b, c, x_n)
    print(f"x{i} = {x_n}")

```
# 実行結果
```
alpha_ = 0.780776406404415137455352464
beta_ = -1.280776406404415137455352464

x1 = 1.414213562373095048801688724
x2 = 0.5411961001461969843997232055
x3 = 0.8540503204887294624286786226
x4 = 0.7569510154267812783126517302
x5 = 0.7883682466250206356313743134
x6 = 0.7783417480050069125832678413
x7 = 0.7815555808754080822646207510
x8 = 0.7805268794617491959905184153
x9 = 0.7808562993721222468273037687
x10 = 0.7807508247283116873507841482
```
# コードの説明
### solution_of_quadratic_equation
2次方程式の解の公式を使用して厳密解を計算しています。Decimal型を使うことで高精度な計算が可能です。
### successive_approximations
初期値x0を設定し、逐次近似法を繰り返して解に収束する様子を観察します。
実行結果を見ると、初期値から始まり10回程度の反復で真の解x=1に収束していることが確認できます。
# まとめ
今回のプログラムでは、2次方程式の解を逐次近似法で求める方法を紹介しました。逐次近似法は非線形方程式の近似解を求める際に非常に有用で、数字だけでなく物理や工学の分野でもよく使われてます。最後まで読んでくださり、ありがとうございました。もし改善点や質問があれば、ぜひコメントしてください！
機械学習で用いられる学習法の紹介

# 紹介する学習法
+ 重み減衰
+ ドロップアウト
+ アーリーストッピング

# 重み減衰
訓練誤差を最小化する際、パラメータに関する正則化項を加えて最小化を行うこと。例としてL1正則化やL2正則化があげられる。これによって単純に汎化誤差を最小にすることで生じる過学習を回避できる。

# ドロップアウト
ニューラルネット内のユニットについて学習する際に、毎回すべてのユニットを学習させる代わりに一部のユニットが欠けたニューラルネットを用いて学習させる方法。学習の度に欠けるユニットを選び、推論をするときは全部のユニットを用いて行う。これによって汎化性能が改善する。

# アーリーストッピング
訓練誤差のみが改善するようになる前の段階で学習を止める方法。学習が進みすぎると過学習が起きてしまうため、「これ以上学習を進めたら汎化誤差は小さくならない」という時点を見つけ、その範囲内で学習させる。
数式にして考えるとアーリーストッピングは重み減衰の一種であるととらえることもできる。
気になる方は[これならわかる深層学習入門](https://www.kspub.co.jp/book/detail/1538283.html)を読んでみてください！
Windows11のコンテキストメニューをWindows10のように戻す

Windows10のコンテキストメニューのほうが使いやすい（個人の感想）。

## Shiftキーを押しながら右クリック
以上です。

####  参考にしたサイト
* [Qiita投稿テンプレート](https://qiita.com/sakekasunuts/items/3486865ec2d4f2e459e6)
* [Windows11のコンテキストメニューを旧仕様に戻す方法](https://qiita.com/www-tacos/items/d23b24f5af8687f2db88)
HTML属性とJavaScript内のクォートエスケープでつまずいた話

最近つまづいたことをChatGPTさんにまとめてもらいました。

## はじめに

Web開発において、HTML属性やJavaScriptのコード内で特定の文字（特にクォートや特殊文字）を適切にエスケープすることは非常に重要です。動的に生成したJavaScriptコードやHTMLを使用する際に、エスケープが必要になる場面が多々あります。

本記事では、**シングルクォート（'）** と**ダブルクォート（"）** のエスケープ方法について、HTML属性内とJavaScript内での処理方法を説明します。

## 1. HTML内でエスケープしなくてよい場合

基本的に、HTMLタグのコンテンツ部分においてはエスケープを気にしなくても問題ないことが多いです。特に、`<li>`タグや`<div>`タグなどの通常のHTMLタグの中では、クォートをそのまま含めることができます。

#### 例：`<li>`タグ内

```HTML
<ul>
  <li class="sendJson" data-json="{'name': 'John', 'age': '30'}">Item 1</li>
  <li class="sendJson" data-json="{'name': 'Jane', 'age': '25'}">Item 2</li>
</ul>
```

この場合、`<li>`タグ内の`data-json`属性はそのまま動作します。属性値としての`'`（シングルクォート）は、HTMLでは特に問題なく動作しますので、エスケープする必要はありません。

## 2. HTML属性内でエスケープが必要な場合

HTML属性（例: `<a href="...">`）内で文字列にクォートを含む場合、適切にエスケープしないと構文エラーや予期しない動作が発生する可能性があります。ここでは、クォートをエスケープする方法について説明します。

- **ダブルクォート（"）** は`&quot;`を使用してエスケープ
- **シングルクォート（'）** は`&#39;`を使用してエスケープ

#### 例：HTML属性にエスケープした文字列を挿入する

```JavaScript
let jsonString = `{"name": "John", "age": "30"}`;

// ダブルクォートをエスケープ
jsonString = jsonString.replace(/"/g, "&quot;");

// シングルクォートをエスケープ
jsonString = jsonString.replace(/'/g, "&#39;");

// エスケープしたjsonStringを<a>タグのhrefに渡す
document.getElementById("myLink").setAttribute("href", `javascript: handleClick('${jsonString}');`);
```

## 3. JavaScript内でのエスケープ

JavaScript内で文字列にクォートを含む場合もエスケープが必要です。特に、文字列内で**シングルクォート（'）** や**ダブルクォート（"）** を使用する場合には、バックスラッシュ（`\`）でエスケープします。

- **ダブルクォート（"）** は`\`でエスケープ
- **シングルクォート（'）** は`\`でエスケープ

#### 例：JavaScript内でエスケープ

```JavaScript
let jsonString = `{"name": "John", "age": "30"}`;

// ダブルクォートをエスケープ
jsonString = jsonString.replace(/"/g, '\\"');

// シングルクォートをエスケープ
jsonString = jsonString.replace(/'/g, "\\'");

// エスケープしたjsonStringをJavaScript関数に渡す
handleClick(jsonString);
```

## 4. `replace()`メソッドについて

`replace()`メソッドを使用して文字列のエスケープを行う際、**正規表現** を用いて置換を行います。`replace()`メソッドはデフォルトで最初の一致部分しか置換しませんが、`g`フラグ（グローバル検索）をつけることで文字列内のすべての一致部分を置換できます。

```JavaScript
let text = 'This is "quote" and \'single quote\'';
text = text.replace(/"/g, '&quot;'); // ダブルクォートをエスケープ
text = text.replace(/'/g, '&#39;'); // シングルクォートをエスケープ
console.log(text);  // 出力: This is &quot;quote&quot; and &#39;single quote&#39;
```

## 5. 実践例

動的に生成した文字列をHTML属性に挿入する際の実践的な例を示します。

```JavaScript
let jsonString = `{"name": "John", "age": "30"}`;

// エスケープ処理
jsonString = jsonString.replace(/"/g, "&quot;");
jsonString = jsonString.replace(/'/g, "&#39;");

// <a>タグのhref属性に設定
let link = `<a href="javascript: handleClick('${jsonString}');">発行</a>`;
document.getElementById("container").innerHTML = link;
```

このように、文字列を適切にエスケープしてHTML属性やJavaScriptで使うことで、構文エラーを回避し、正しく動作するコードを作成できます。

:::note warn

javascript: プロトコルを直接 href 属性に設定する手法は、近年のセキュリティやアクセシビリティの観点からは推奨されない場合がある。代わりに、イベントハンドラを利用するなどの方法を使うとよいみたい。

:::


## まとめ

- **HTML属性内**でクォートを含む場合は、**ダブルクォート** （`"`)は`&quot;`、**シングルクォート** （`'`)は`&#39;`でエスケープします。
- **JavaScript内**でクォートを含む場合は、**バックスラッシュ（`\`）** でエスケープします。
- 文字列を動的に扱う際には、**`replace()`** メソッドを使ってエスケープ処理を行うことが重要です。

これらのエスケープ処理を適切に行うことで、予期しないエラーを防ぎ、正常に動作するコードを作成できます。

---
さきに\<li>内でなんとなくできてしまったあとに、\<a href="...">内でつまづきました。最初に\<a href="...">からやってたら、たぶんもっと早く気づいたんだろなあ。他の部分が悪さしてるのかと思って他を入念に調べちゃった。
Reactのfilter()でTodoを削除したら全部消えた話

# 前提
恥ずかしながら勉強していてなぜか「？」と思ったので、まとめてみる。

:::note warn
あらかじめ記載しておきますが、初学者視点で自分の頭で理解できるようにまとめたものです。認識の違いや、理解の甘さ等、多々あると思いますが、あくまで自分のイメージの話です。しっくり来たのでまとめさせてもらいました。ご了承ください。
:::

# 問題
Todoリストに削除ボタンが付いている。削除ボタンが押されたとき、todoを削除したい。
HTMLで以下のようなコードを書いた。
buttonタグが押された場合、DeleteTodo関数が動くというものだ。
しかし、buttonタグを押したとき、すべてのTodoリストが削除されてしまう

```HTML
<ul>
    {TodoDates.map((todo) =>(
        <li key={todo.id}>
          <input type="text" value={todo.todo} onChange={(e) => ChangeTodo(e,todo.id)} disabled = {todo.check}/>
          <input type="checkbox" onChange={() => CheckTodo(todo.id,todo.check)} />
          <button onClick={(e) => DeleteTodo(e,todo.id) }>削除</button>
        </li>
        ))
        }
</ul>
```


以下が、DeleteTodo関数である。

```typescript
  const DeleteTodo = ((e:React.MouseEvent<HTMLButtonElement>,id:number) => {
    console.log('削除ボタンが押されました')
    const NewTodo = TodoDates.filter((todo) => {
      todo.id !== id   //todo.idとidが揃わないやつだけ残すということ       
    })
    TodoDataFunction(NewTodo)        
  })
```

# 原因
以下の部分が原因だった。
filterのコールバック関数のブロック{}を使うと、returnを省略できないため、意図したフィルタリングが機能しなかった。

```typescript
    const NewTodo = TodoDates.filter((todo) => {
      todo.id !== id   //これだけではリターンされない       
    })
```

# 解決策

returnを明示
```typescript
    const NewTodo = TodoDates.filter((todo) => {
      return todo.id !== id   //todo.idとidが揃わないやつだけ残すということ       
    })
```

また、単純なfilter文であれば、returnを省略できる以下のような形でもよいだろう
```typescript
const NewTodo = TodoDates.filter(todo => todo.id !== id)
```
# まとめ
✅️filter() で {}（ブロック構文）を使う場合は return を明示する
✅️シンプルな条件なら () を使えば return を省略できる
✅️自分は基礎がまだまだのようだ
2. ユーザー管理の基本

## **2.1 ユーザーモデルの理解**
###  ユーザーモデルの確認
**`app/Models/User.php`**
```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    protected $hidden = [
        'password',
        'remember_token',
    ];
}
```

---

## **2.2 ユーザーテーブルの作成**
###  マイグレーションの確認
**`database/migrations/xxxx_xx_xx_xxxxxx_create_users_table.php`**
```php
public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}
```

###  マイグレーションの実行
```bash
php artisan migrate
```

---

## **2.3 ユーザー登録・更新・削除**
###  ユーザー登録
```php
use App\Models\User;

User::create([
    'name' => 'Test User',
    'email' => 'test@example.com',
    'password' => bcrypt('password123'),
]);
```

###  ユーザーの取得
```php
$user = User::find(1);
```

###  ユーザーの更新
```php
$user->update(['name' => 'Updated Name']);
```

###  ユーザーの削除
```php
$user->delete();
```

---

## **2.4 認証の導入**
###  Laravel Breezeの導入
```bash
composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate
```

###  ルートにアクセス
- `http://127.0.0.1:8000/login`
- `http://127.0.0.1:8000/register`

---

## **2.5 認証のカスタマイズ**
###  ログインユーザー情報の取得
```php
use Illuminate\Support\Facades\Auth;

$user = Auth::user();
```

###  認証ミドルウェアの使用
```php
Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware('auth');
```

---

## **2.6 役割（Roles）と権限（Permissions）の管理**
###  Spatieの導入
```bash
composer require spatie/laravel-permission
php artisan migrate
```

###  ロールと権限の追加
```php
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;

$role = Role::create(['name' => 'admin']);
$permission = Permission::create(['name' => 'edit articles']);

$role->givePermissionTo($permission);
```

###  ユーザーにロールを付与
```php
$user->assignRole('admin');
```

###  認可の使用（Blade）
```blade
@can('edit articles')
    <button>記事を編集</button>
@endcan
```

---

## **2.7 まとめ**
- **ユーザーモデルとデータベースの操作** を理解。
- **Laravel Breezeを使った認証の実装**。
- **ミドルウェアで認証済みユーザーのみアクセス可能にする**。
- **Spatieを使ったロールと権限の管理**。

---

次のステップでは、**パスワードリセット・メール認証・API認証（Sanctum）** について学ぼう！
Laravelの基礎


## 1. Laravelとは何か？
###  Laravelの概要
- LaravelはPHPで動く**MVC（Model-View-Controller）アーキテクチャ**のフレームワーク。
- **ルーティング・認証・Eloquent ORM（データベース操作）・Blade（テンプレートエンジン）**などが標準搭載。
- Webアプリを開発するための**効率的なツール群**を提供。
- **バージョン管理**がしっかりしており、定期的なアップデートが行われる。

###  Laravelの特徴
1. **MVCアーキテクチャ**  
   - アプリケーションの構造が整理されており、コードが読みやすい。
2. **Eloquent ORM**  
   - データベースの操作がシンプル。
3. **Bladeテンプレートエンジン**  
   - HTMLとPHPを分けて記述でき、コードの可読性が向上。
4. **強力な認証機能**  
   - 標準でユーザー認証が組み込まれている（Jetstream / Breeze）。
5. **ルーティングが簡単**  
   - `web.php` にルートを書くことでURLを設定可能。

---

## 2. Laravelのインストールとセットアップ
###  必要な環境
Laravel 11を動かすために、以下の環境を準備する：
1. **PHP 8.2以上**
2. **Composer（PHPのパッケージ管理ツール）**
3. **Node.js & npm（フロントエンドビルド用）**
4. **データベース（MySQL / PostgreSQL / SQLite など）**
5. **Webサーバー（Nginx / Apache）**

###  Laravelのインストール
1. **Composerでインストール**
   ```bash
   composer create-project --prefer-dist laravel/laravel myapp
   ```
   `myapp` の部分を好きなプロジェクト名に変更。

2. **ディレクトリに移動**
   ```bash
   cd myapp
   ```

3. **開発サーバーを起動**
   ```bash
   php artisan serve
   ```
   → `http://127.0.0.1:8000` にアクセスしてLaravelの初期画面が表示されればOK。

---

## 3. Laravelのディレクトリ構造
###  よく使うディレクトリ
```
myapp/
├── app/           # アプリケーションの主要なコード（モデル、コントローラなど）
│   ├── Http/
│   │   ├── Controllers/  # コントローラの格納場所
│   │   └── Middleware/   # ミドルウェアの格納場所
│   ├── Models/      # Eloquent ORMのモデル
│   └── Providers/   # Laravelのサービスプロバイダ
├── bootstrap/      # アプリのブートストラップ設定
├── config/         # 各種設定ファイル
├── database/       # マイグレーションやシードデータ
├── public/         # 公開ディレクトリ（index.phpやアセットファイル）
├── resources/      # Bladeテンプレート、CSS、JS
├── routes/         # ルーティングファイル（`web.php`, `api.php` など）
├── storage/        # ログ、キャッシュ、ファイルの保存場所
├── tests/          # テストファイル
└── vendor/         # Composerで管理するパッケージ
```

---

## 4. Artisanコマンドの使い方
###  よく使うArtisanコマンド
| コマンド | 説明 |
|---------|------|
| `php artisan serve` | 開発用サーバーを起動 |
| `php artisan make:controller ExampleController` | コントローラを作成 |
| `php artisan make:model Example` | モデルを作成 |
| `php artisan make:migration create_example_table` | マイグレーションを作成 |
| `php artisan migrate` | データベースのマイグレーションを実行 |
| `php artisan route:list` | 登録されているルート一覧を表示 |

---

## 5. .env設定と環境変数の理解
###  `.env` の例
```env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:xxxxxxx=
APP_DEBUG=true
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=my_database
DB_USERNAME=root
DB_PASSWORD=
```

###  変更の適用
`.env` を変更したら、設定をクリアする：
```bash
php artisan config:clear
```

---

## まとめ
これで、Laravelの基本が理解できた！  
次のステップでは、**ユーザー管理の基本（データベースと認証）** に進もう。
【Salesforce】@futureとは？

SalesforceのApexには非同期処理を実装するための `@future` アノテーションがあります。本記事では `@future` の基本的な使い方や特徴、注意点について解説します。

## @futureとは？

`@future` は、Apexのメソッドを非同期に実行するためのアノテーションです。時間のかかる処理や、DMLの制約を回避する際に利用されます。

### 特徴
- **非同期実行**：トランザクションの終了後にSalesforceが実行
- **DML操作可能**：ただし、トランザクションが異なる
- **Webコールアウト可能**：`callout=true` を指定することで、外部APIを呼び出せる
- **静的メソッドでのみ使用可能**

## @futureの基本的な使い方

以下のコードは `@future` を使ってアカウント名を非同期で更新する例です。

## コールアウトを含む@futureメソッド

外部APIを呼び出す場合は、`callout=true` を指定します。

``` Apex
public class FutureCalloutExample {
    @future(callout=true)
    public static void doCallout() {
        Http http = new Http();
        HttpRequest request = new HttpRequest();
        request.setEndpoint('https://api.example.com/data');
        request.setMethod('GET');
        HttpResponse response = http.send(request);
        System.debug(response.getBody());
    }
}
```

## @futureの制約

`@future` メソッドを使用する際には、以下の点に注意が必要です。

- **メソッドは静的である必要がある**
- **戻り値を持てない（voidである必要がある）**
- **パラメータはプリミティブ型またはリストのみ**（`SObject` を直接渡せない）
- **同一トランザクションで最大50回までしか呼び出せない**
- **`@future` メソッドから他の `@future` メソッドを呼び出せない**（ネスト不可）
- **トランザクション完了後に処理されるため、即時実行が保証されない**

## いつ@futureを使うべきか？

### **`@future` を使うケース**
- **DML制限を回避したいとき**
- **Web APIコールアウトを非同期で実行したいとき**
- **時間のかかる処理を非同期で実行したいとき**

### **`@future` を避けるべきケース**
- **即時実行が必要な場合**（非同期のため、処理順が保証されない）
- **複雑な非同期制御が必要な場合**（`Queueable` の方が適している）
- **連続的な非同期処理が必要な場合**（`@future` メソッドから別の `@future` メソッドは呼べない）

## まとめ
sObjectやオブジェクトを引数として取ることはできませんので、そこは注意が必要ですね。

`@future` も、使用する際にはガバナ制約やトランザクションの影響を考慮する必要があります。

もしより柔軟な非同期処理を行いたい場合は、`@Queueable` や `Apexバッチ` も検討すると良いと思います。

参考
https://developer.salesforce.com/docs/atlas.ja-jp.apexcode.meta/apexcode/apex_classes_annotation_future.htm
paizaラーニングレベルアップ問題集の「掛け算」をやってみた。

paizaラーニングレベルアップ問題集の[掛け算](https://paiza.jp/works/mondai/d_rank_skillcheck_sample/multiplication)をやってみました。

- - -
##### 問題
https://paiza.jp/works/mondai/d_rank_skillcheck_sample/multiplication
- - -
以下のコードでは、受け取った入力値を直接オペランド（被演算子）として扱っています。速さを競う競技プログラミングや、短さを競うコードゴルフの時は構いませんが、通常は、入力値を一旦変数に格納する等、コーディング規約に従って頂ければと思います。
- - -
###### C
```c
#include <stdio.h>

int main() {
	int a;
	scanf("%d", &a);
	int b;
	scanf("%d", &b);
	printf("%d\n", a * b);
	return 0;
}
```
- - -
###### C++
```cpp
#include <iostream>
using namespace std;

int main() {
	int a;
	cin >> a;
	int b;
	cin >> b;
	cout << a * b << endl;
	return 0;
}
```
- - -
###### C#
```cs
using System;

class Program
{
	public static void Main()
	{
		Console.WriteLine(int.Parse(Console.ReadLine()) * int.Parse(Console.ReadLine()));
	}
}
```
- - -
###### Go
```go
package main
import "fmt"

func main() {
	var a int
	fmt.Scan(&a)
	var b int
	fmt.Scan(&b)
	fmt.Println(a * b)
}
```
- - -
###### Java
```java
import java.util.*;

public class Main {
	public static void main(String[] args) {
		Scanner sc = new Scanner(System.in);
		System.out.println(sc.nextInt() * sc.nextInt());
		sc.close();
	}
}
```
- - -
###### JavaScript
```js
const [a, b] = require("fs").readFileSync("/dev/stdin", "utf8").trim().split('\n').map(Number);
console.log(a * b)
```
- - -
###### Kotlin
```kotlin
fun main() {
	println(readLine()!!.toInt() * readLine()!!.toInt())
}
```
- - -
###### PHP
```php
<?php
	echo fgets(STDIN) * fgets(STDIN), PHP_EOL;
?>
```
- - -
###### Perl
```pl
print <STDIN> * <STDIN>, $/;
```
- - -
###### Python3
```py
print(int(input()) * int(input()))
```
- - -
###### Ruby
```rb
p gets.to_i * gets.to_i
```
- - -
###### Scala
```scala
import scala.io.StdIn._

object Main extends App{
	println(readInt() * readInt())
}
```
- - -
###### Swift
```swift
print(Int(readLine()!)! * Int(readLine()!)!)
```
- - -
##### その他のDランク見本・過去問題
2024年7月19日～8月29日に行われた[paiza×Qiitaコラボキャンペーン](https://qiita.com/official-events/9ab96aa95d62fe3cbdd7)で投稿した記事です。
###### [足し算](https://paiza.jp/works/mondai/d_rank_skillcheck_sample/addition)
- [paizaラーニングレベルアップ問題集の「足し算」を色々な言語でやってみた](https://qiita.com/anonymously115/items/6bb4c92b759877326c5c)
###### [一番小さい値](https://paiza.jp/works/mondai/d_rank_skillcheck_sample/min_num)
- [paizaラーニングレベルアップ問題集の「一番小さい値」を色々な言語でやってみた](https://qiita.com/anonymously115/items/b24232cc65eba889cbd4)
###### [文字の一致](https://paiza.jp/works/mondai/d_rank_skillcheck_sample/diff_str)
- [paizaラーニングレベルアップ問題集の「文字の一致」を色々な言語でやってみた](https://qiita.com/anonymously115/items/60f979d22f4ceacc6125)
###### [Eメールアドレス](https://paiza.jp/works/mondai/d_rank_skillcheck_archive/email_address)
- [paizaラーニングレベルアップ問題集の「Eメールアドレス」を色々な言語でやってみた](https://qiita.com/anonymously115/items/df5ad65b69a2645c58e2)
###### [N倍の文字列](https://paiza.jp/works/mondai/d_rank_skillcheck_archive/square)
- [paizaラーニングレベルアップ問題集の「N倍の文字列」を色々な言語でやってみた](https://qiita.com/anonymously115/items/df5ad65b69a2645c58e2)
windowsにOracle Instant Clientを導入する

# 概要
ODBCを使って、データベースアクセスするために、Oracle Instant Clientを導入します。

# 対象読者
Oracle Instant ClientをWindowsに導入したい方

# 環境
名称|バージョン|説明
---|----|------
Windows|10|クライアントのOS
Oracle instant client  |21.9|Oracle Databaseにアクセスするためのツール
A5:SQL|2.20.1|SQLのGUIクライアント　Oracle instant clientを導入できたことを確認するためにつかう




# 前提
・Oracle Databaseを構築済みであること

# 手順

## ダウンロード

### Oracle 公式からダウンロードして解凍する
https://www.oracle.com/jp/database/technologies/instant-client/winx64-64-downloads.html
・以下２点をダウンロードします。
Basicパッケージ
<b>ODBC パッケージ</b>

・Cドライブ直下に「Oracle」フォルダを作成します。
　以下「C:\Oracle」とする

・「C:\Oracle」にダウンロードしたzipを移動させる

・basicとodbcの２つのzipファイルを解凍する。
　「C:\Oracle」直下に「instantclient_21_9１」フォルダが作成されていることを確認。


### MicroSoftから　Visual Studio Redistributableをダウンロード

Microsoft Visual Studio 2017 Redistributable　x64をダウンロード
https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170

ダウンロードしたファイル（.exe形式）は「C:\Oracle」直下に配置する

### 確認
・C:\Oracle\instantclient_21_9 が存在しファイルが存在していること
・C:\Oracle\VC_redist.x64.exe　が存在していること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/052fe4ef-7330-85a0-4806-9840b3a8c822.png)




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/57cf0ae8-e78c-eca8-dd0c-872b93413dd1.png)


## システム変数を設定する

システム変数名|値
--------|---
TNS_ADMIN|C:\Oracle\instantclient_21_9
NLS_LANG|JAPANESE_JAPAN.JA 16SJISTILDE
Path|C:\Oracle\instantclient_21_9

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/af067a4a-cd16-a960-b234-582bde53bb73.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/dac336af-e736-b350-50f3-285978c3a7f5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8d16c570-4694-70ee-4aef-f170b5ca8a14.png)


※
TNS＝Transparent Network Substrate接続　Oracleデータベースと通信するための通信層。
NLS=National Language Support


## インストール

C:\Oracle\instantclient_21_9\odbc_install.exe　を実行する

初回実行時のスクショ取れなかったので、２回目以降のスクショ残しておきます＞＜


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/40a0ec6d-cd73-ec66-0c67-f8983beb2794.png)

## A5:SQLで確認
ODBCを選択し、Oracle Databaseにアクセスできることを確認　

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/cca36651-9bb3-6b36-762d-d46bb335c6a6.png)




参考　インストール前の状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0e29586e-8117-0552-c9b0-40477b0198f2.png)




# 一言
自分は初見でやったときは、以下の点で手間どりました。
・ODBCの追加忘れ
・環境変数のNLS_LANGの設定


todo アンインストール方法も調べておく

# 参考

下の記事がとても参考になりました

https://blog.denet.co.jp/windows-server2019-oracle-instantclient/



A5:SQL ODBC設定方法
https://a5m2.mmatsubara.com/tips/oracle_instant_client/
PHPで「文字列の中で変数展開する」の動作を確認してみた。

# 概要

PHPで「文字列の中で変数展開する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/php/string/index5.html

# 実装

以下のファイルを作成しました。

```sample.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<p>
<?php
$name = "高橋";
echo "私の名前は{$name}です<br>";
echo '私の名前は{$name}です';
?>
</p>

</body>
</html>
```

以下のコマンドを実行しました。

```
$ php sample.php 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPテスト</title>
</head>
<body>

<p>
私の名前は高橋です<br>私の名前は{$name}です</p>

</body>
</html>
```

# まとめ

何かの役に立てばと。
SharePoint の 選択肢列が複数選択可能なときの Power Apps の表示制御


Power Apps でデータの入力をするアプリを作成する際、SharePoint の選択肢列で選択した値を踏まえ、別の項目について、表示非表示を切り替えたいという場合があると思います。

この際、以下のようにすることで実現できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4c2f5d5b-999a-1f5f-3d2d-dc1376d43368.png)

しかし、SharePoint の選択肢列が複数選択可能な場合はこの式では上手く動作しません。

そのため、以下のようにしてみました。しかし、こちらの場合もうまく動作しませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/bf86675e-770b-77e7-db93-461216863368.png)

※"選択肢 1"を選んでいるが表示されない

最終的には、以下のようにすることで表示されました。SharePoint の選択肢列で複数選択可能にしている場合、テーブル型になるため、そのテーブル内の Value 列に、該当の選択肢があるか LookUp で探して、その結果が空かどうかで判定しています。!IsBlank なので、からではない場合、つまり選択されている場合という意味になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0d145b7f-f804-b150-11df-0ca9ebcc2d95.png)

```
!IsBlank(LookUp(DataCardValue10_1.SelectedItems, Value = "選択肢 1"))
```
Laravel x Docker x pgAdmin接続メモ

# 自分用メモ
これで合ってんのか分らんが、とりあえず繋がる要素は揃ってるっぽいので
自分用のメモとして忘れないうちにメモ残す。

# 環境
|  | バージョン |
| ---- | ---- |
|Docker| 27.1.2|
|PHP| 8.2.26 |
|Composer| 2.8.4|
|psql (PostgreSQL)| 15.10 |
|Ubuntu| 15.10-1|

# .env
```.env
# pgAdmin4 server作成時設定
DB_CONNECTION=pgsql
DB_HOST=pgsql
DB_PORT=5432
DB_DATABASE=databaseName
DB_USERNAME=postgres
DB_PASSWORD=password

# pgAdmin4ログイン用
PGADMIN_EMAIL=
PGADMIN_PASSWORD=
```

# docker-compose.yml
#### services内に追記
```docker-compose.yml
pgadmin4:
        image: dpage/pgadmin4:8.11
        ports:
            - 8888:80
        volumes:
            - pgadmin4_data:/var/lib/pgadmin
        environment:
            PGADMIN_DEFAULT_EMAIL: '${PGADMIN_EMAIL}'
            PGADMIN_DEFAULT_PASSWORD: '${PGADMIN_PASSWORD}'
        networks:
            - sail
```

#### 最下部に追記
```docker-compose.yml
volumes:
    sail-pgsql:
        driver: local
    pgadmin4_data:
        driver: local
```


# コマンド
#### DB選択(Laravelプロジェクト作成する時にインストール済みならパス)
```
sail php artisan sail:install

 ┌ Which services would you like to install? ───────────────────┐
 │ pgsql                                                        │
 └──────────────────────────────────────────────────────────────┘
```

#### image追加
```
docker pull dpage/pgadmin4
```
https://hub.docker.com/r/dpage/pgadmin4/




#### pgsql接続
```terminal
# dockerコンテナに入る
docker compose exec laravel.test bash

# パッケージのアップデート PostgreSQL Clientのインストール
apt-get update && apt-get install -y postgresql-client  ※ 必要？


# DB接続確認
psql -h pgsql -U postgres -d databeseName
# DB_PASSWORD入力
Password for user postgres:
# 接続済み状態
psql (17.2 (Ubuntu 17.2-1.pgdg22.04+1), server 15.7 (Debian 15.7-1.pgdg120+1))

```

#### dockerビルド
```terminal
docker compose build --no-cache
```


#### マイグレーションコマンド実行
```terminal
php artisan migrate
```


# pgAdmin4設定
１．http://localhost:8888にアクセス

**.envファイルに設定したPGADMIN_EMAILとPGADMIN_PASSWORDを入力**

![スクリーンショット 2024-12-14 203659.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634951/8a1cb000-1709-e215-0957-bcd3507ba621.png)


<br></br>
２－１．サーバー新規作成

![スクリーンショット 2024-12-14 203604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634951/0390ec57-1f19-42ca-7dd6-97745cf0ed05.png)
<br></br>
２－２．Nameを入力（自由でOK）

![スクリーンショット 2024-12-14 203618.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634951/bbbfb9b5-e2ce-7886-1f6d-029978306ee2.png)

<br></br>
２－３．.envで設定した値を入力して保存

![スクリーンショット 2024-12-14 203633.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3634951/fbab3e08-123d-757d-6017-9a71ed870f00.png)

<br></br>
３．左のServersをクリックすると作成したサーバーが確認できる！



# 最後に
接続値確認コマンド
```terminal
DB接続確認の中でのみ有効？
\conninfo
```

間違っている部分があると思うので、要修正
DatabricksノートブックにおけるExcelダウンロードのサポート

こちらのアップデートです。

https://docs.databricks.com/ja/release-notes/product/2025/february.html#download-as-excel-is-now-supported-in-notebooks-connected-to-sql-warehouses

**SQLウェアハウスに接続されているノートブックでExcelのダウンロードがサポートされました。**

> SQLウェアハウスに接続されているノートブックでは、表データを含むセルの結果をExcelファイルとしてダウンロードできるようになりました。[結果のダウンロード](https://docs.databricks.com/ja/notebooks/notebook-outputs.html#download-full-results)をご覧ください。

タイトルにあるように、この機能を使うにはノートブックが **(サーバレス)SQLウェアハウス** に接続されている必要があることにご注意ください。

ノートブックをサーバレスSQLウェアハウスに接続します。

![Screenshot 2025-02-08 at 6.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/5d9a8432-fab4-4a6d-d859-196f543a502c.png)

サンプルデータにクエリーします。

```sql
SELECT * FROM samples.nyctaxi.trips LIMIT 10
```

メニューにExcelのオプションが表示されます。

![Screenshot 2025-02-08 at 6.47.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/5e69a306-9b55-2bec-22a4-bda9cb143c9c.png)

データをExcelファイルとしてダウンロードすることができました。

![Screenshot 2025-02-08 at 6.48.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/ea1fec74-8af1-ee10-0133-f57e4b69f7fb.png)


### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
why vim? 魅力と簡単な使い方を初心者向けに解説

## 初めに

実は今記事もvimで書いてます（きもい
vim操作とマークダウンの練習を同時にできるという思いからです（きもい

最初はとっつきにくく、操作方法がわからないvim
▼こんないじられvimですが、使えると強そう

https://www.youtube.com/watch?v=P7LNU9HYr7M

本記事では、初心者向けにVimの最低限の操作を解説します。

---
## Vimの必要性

なぜVimを学ぶべきか？

- **軽量で高速**：ターミナル上で快適に動作し、リモートサーバーの編集にも最適、マウスもいらん
- **カスタマイズ性が高い**：自分好みに拡張できる
- **vimでしかできない環境があるかもしれない**：サーバの構築などでvimしか使えない or vim使えるとめっちゃ早い業務がある
-- **なんか強そう**:まぁこれが一番です、強い人にあやかります

最初は難しく感じるかもしれませんが、
慣れればとんでもないパフォーマンスが出る印象です

---
## 脳死で覚えたいVimコマンド

以下のコマンドは最低限覚えておくと便利です。

### 1. Vimの起動と終了
```sh
vim ファイル名  # Vimを開く
:w  # ファイルを保存する
:q  # Vimを終了する
:wq  # 保存して終了
:q!  # 保存せずに終了
```

### 2. 基本操作
```sh
i  # 挿入モード（編集開始）
ESC  # ノーマルモード（通常操作）に戻る
x  # 1文字削除
dd  # 1行削除
u  # 操作を元に戻す（Undo）
CTRL + r  # やり直す（Redo）
```

### 3. 移動コマンド　※最初はここをまず覚えたい※
```sh
h  # 左に移動
l  # 右に移動
j  # 下に移動
k  # 上に移動
G  # ファイルの最後に移動
gg  # ファイルの先頭に移動
```

### 4. 検索と置換
```sh
/単語  # 単語を検索
n  # 次の検索結果へ
N  # 前の検索結果へ
:%s/置換前/置換後/g  # ファイル全体の文字列を置換
```

### 5. コピー・ペースト
```sh
yy  # 1行コピー
yw  # 単語コピー
p  # ペースト（貼り付け）
```

これらの基本コマンドを覚えるだけで、Vimの操作が快適になります。

---

## まとめ

Vimは最初こそ難しいですが、最低限のコマンドを覚えるだけで強力なエディタになります。本記事で紹介した基本操作を練習しながら、Vimを使いこなしていきましょう。

---

## 参考資料
- [vimtutor](https://vimtutor)
- [知識0から始めるVim講座 - Qiita](https://qiita.com)
- [vimtutorで速習Vim](https://vimtutor)
- [【vim入門】vimtutorはいいぞ](https://vim入門)
- [Vim Adventures（ゲーム感覚でVimを学べる）](https://vim-adventures.com)
Ubuntu環境でGitLab Pagesの設定メモ

## 前提条件

すでにGitLab Runnerが設定されていることを前提としています。
GitLab Runnerの設定メモは↓にあります。

https://qiita.com/meto/items/32326bf41f6c6607c11a

## やることリスト

1. ドメインの準備
1. 証明書の準備
1. GitLab設定の変更

## ドメインの準備

私はAWSのEC2上に作成していて、ドメインはRoute53で管理しています。
まず、Route53でEC2のグローバルIPに対して以下の2つレコード（仮のドメインです）を追加します。

- pages.example.com
- *.pages.example.com

ちなみに、GitLab本体は`gitlab.example.com`（仮の...）で設定しています。

## 証明書の準備

Let's Encryptの無料証明書を利用していますが、これはLegoという証明書の発行・更新するツールを使って管理しています。

```shell
sudo lego --accept-tos \
    --email="hogehoge@example.com" \
    --domains="pages.example.com" \
    --domains="*.pages.example.com" \
    -dns="route53" \
    --path="/opt/lego/letsencrypt" \
    run
```

ちなみにGitLab自体はIP制限をしているので、Let's Encryptからの確認はRoute53によるドメインでの認証にしています。

https://go-acme.github.io/lego/dns/route53/

作成した証明書はGitLab側が参照するディレクトリにシンボリックリンクを作成します。
※パスは適宜調整してもらえればと。

```shell
sudo ln -sf /opt/lego/letsencrypt/certificates/pages.example.com.key /etc/gitlab/ssl/pages.example.com.key
sudo ln -sf /opt/lego/letsencrypt/certificates/pages.example.com.crt /etc/gitlab/ssl/pages.example.com.crt
```

※補足と言うかGitLabの設定でPagesの証明書のパスを指定できるけど、デフォルトがドメイン名になっているので名前を変更する際は設定ファイルで変更してください。

## GitLab設定の変更

GitLabの設定ファイルを編集してPagesの設定を有効化します

```shell
sudo vi /etc/gitlab/gitlab.rb
```
↓ 設定する項目
```text
pages_external_url "https://pages.example.com/"
gitlab_pages['enable'] = true
gitlab_pages['redirect_http'] = true
gitlab_pages['dir'] = "/var/opt/gitlab/gitlab-pages"
gitlab_pages['log_directory'] = "/var/log/gitlab/gitlab-pages"
```

※証明書のパスを変更する場合は`gitlab_pages['cert']`と`gitlab_pages['cert_key']`も変更が必要です

設定の反映 ※2分ぐらいかかった

```shell
sudo gitlab-ctl reconfigure
```

ステータス確認

```shell
sudo gitlab-ctl status
```

ログ確認
```shell
sudo gitlab-ctl tail
```

## GitLab Pagesの動作確認

適当に空のプロジェクトを作成して、publicディレクトリにindex.htmlを作成する`.gitlab-ci.yml`をプロジェクトのルートに配置してプッシュすると、パイプラインが実行されてhtmlが生成されます。

```yaml: gitlab-ci.yml
stages:
  - deploy

pages:
  stage: deploy
  script:
    - mkdir -p public
    - echo "<h1>Hello GitLab Pages!</h1>" > public/index.html
  artifacts:
    paths:
      - public
```

メニュー→デプロイ→Pagesから用意されているURLのリンクをクリックすると画面が確認できます。

↓こんな感じで表示されていれば完成で

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/284278/33708f72-9d3f-55f8-8b92-601da63066ac.png)


## ついでに

証明書が期限切れそうになったら自動で更新するシェルを作成してcronで適当にチェックしておくようにしましょう。

```shell
#!/bin/bash

# pages: 30日未満の場合は更新実行
/usr/local/bin/lego --accept-tos \
        --email="hogehoge@example.com" \
        --domains="pages.example.com" \
        --domains="*.pages.example.com" \
        --dns="route53" \
        --path="/opt/lego/letsencrypt" \
        renew  \
        --days 30 \
        --renew-hook "gitlab-ctl restart nginx && gitlab-ctl reconfigure"
```
ReactにおけるLocalStorage SessionStorage Cookieの違いと使い分け

# はじめに
ウェブブラウザのクライアント側には、データを保存するために3つの主要な仕組みがあります。Reactにおける役割で見ていきます。

- ***SessionStorage***
- ***LocalStorage***
- ***Cookies***

# LocalStorage
- ***データの有効期限は永続的***
- アクセス方式は```window.localStorage```
- データサイズは5MBほど
- ***クライアントのみ送受信***
- ***JSで簡単に取得可能（httpOnly不可）***
- ***セッションとは関連付けられないため、異なるタブ間でデータが共有***

# SessionStorage
- ***ウェブブラウザのタブが開かれている間だけデータを保存する仕組み***
- ***データの有効期限はセッション中のみでタブを閉じると削除***
- アクセス方式は```window.sessionStorage```
- データサイズは5MBほど
- ***クライアントのみ送受信***
- ***JSで簡単に取得可能（httpOnly不可）***

# Cookie
- ***ブラウザとサーバー間で共有可能***
- ***有効期限を設定することができ、指定した有効期限までデータが保持される***
- アクセス方式は```document.cookie```
- データサイズは4KBほど
- ***サーバーとの送信はリクエストごとに自動送信***
- ***httpOnly設定でJSからアクセス不可（より安全）***

# どの方法を使用するか
以下は参考資料のZennから引用します。

> 引用　https://zenn.dev/simsim/articles/3f3e043dd750e8
SessionStorage：一時的なデータの保存に適しており、ページ間での情報の共有が不要な場合に選択されます。
LocalStorage：永続的なデータの保存が必要で、異なるタブ間でデータの共有が必要な場合に選択されます。
Cookies：有効期限を設定して永続的なデータの保存と、異なるセッションや異なるドメイン間でデータの共有が必要な場合に選択されます。


# localStorageの使用用途
以下が使用用途になるみたいです。

- ***ログイン情報の保存（JWT トークンのキャッシュなど）***
- ***ユーザー設定の永続化（ダークモード、言語設定など）***
- ***ブラウザを閉じてもデータを保持したいとき***

```js
// データの保存
localStorage.setItem('theme', 'Ohtani');

// データの取得
const theme = localStorage.getItem('theme');

// データの削除
localStorage.removeItem('theme');
```

# SessionStorageの使用用途
- ***一時的なデータの保存（フォーム入力の一時保存など）***
- ***タブごとに異なるデータを管理したい場合***
- ***ログインセッション情報の管理***

```js
// データの保存
sessionStorage.setItem('username', 'Messi');

// データの取得
const username = sessionStorage.getItem('username');

// データの削除
sessionStorage.removeItem('username');
```

# Cookieの使用用途
***ブラウザとサーバーの両方で管理できるデータ***で、セキュリティを考慮したデータの保存***に向きみたいです。

- ***認証情報の保存（httpOnly, Secure設定）***
- ***サーバー側とデータの共有***
- ***セッション管理（ログインセッションなど）***

```js
// データの保存（有効期限1日）
document.cookie = "user=ohtani; max-age=86400; path=/";

// データの取得
const cookies = document.cookie.split('; ').find(row => row.startsWith('user=')).split('=')[1];

// データの削除（有効期限を過去に設定）
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
```


# まとめると
***データを長期間保持したい*** → ```localStorage```
***セッションが終了したら削除したい*** → ```sessionStorage```
***サーバーとのデータ連携やセキュリティが必要*** → ```cookie```

# 資料

https://zenn.dev/simsim/articles/3f3e043dd750e8

- ***ChatGPT***
React nativeとExpoの構成でLottieアニメーションの組み込み法を解説

# Lottieとは

Lottieは、Adobe After Effectsで作成されたアニメーションをiOS、Android、web、React Native、Reactなどのアプリで再生できるようにするライブラリです。Bodymovinと呼ばれるAfter Effectsのプラグインを用いてアニメーションをJSON形式でエクスポートし、そのJSONファイルをLottieが読み込むことでアプリ内にて再生できます。

LottieはAirbnbが開発し、コミュニティに公開しています。スケーラブルで動的なアニメーションを簡単に実装できるため、UI/UXの向上に役立つツールとして多くの開発者に利用されています。

## アニメーションを探す

まず初めに自分が使用したいlottieアニメーションをLottiefileで探します　無料　有償どちらのアニメーションもあります。

https://lottiefiles.com/jp/



## ライブラリをインストールする

Expo React native Lottie用の公式ページ　利用方法などはここを参照

https://docs.expo.dev/versions/latest/sdk/lottie/

Expo用のLottie Reactライブラリをインストール

```
npx expo install lottie-react-native
```
Lottie React Native　ライブラリリポジトリ　READMEを参照

https://github.com/lottie-react-native/lottie-react-native#usage

### ディレクトリ構成

```
/ ━ app ━ index.jsx
  ┣ assets ━ bay.json(好きなアニメーションに適宜入れ替え)
```

### コード
```React
import React from "react";
import LottieView from "lottie-react-native";

export default function Animation() {
    return (
        <LottieView
            source={require("../assets/bay.json")}
            style={{width: "100%", height: "100%"}}
            autoPlay
            loop
        />
    );
}
```

## Lottie公式ドキュメント

https://airbnb.io/lottie/#/
エンジニアにロマンが必要な原因

# エンジニアにロマンがなければ、ただのロボットになる  
こんにちは、しゅんです。  
今回は3回目のポエムになります。「エンジニアとロマン」について書きます。
**～技術と夢、その間にあるロマンの力～**

---
ある日、友人と話していたときにこんなやり取りがありました：


僕：「ネットでこんなすごいプロジェクトがシェアされてたよ！」  
友人A：「めっちゃロマンあるよね！」  
友人B：「いや、何のために作ったのか理解できない」  
僕と友人A：「ロマンですよ、ロマン！」  
友人B：「ロマン？何言ってるのか全然わからない」  

---

このやり取りで僕は気づきました。エンジニアにとってロマンとは、ただの空想や非現実的な話ではなく、**技術を突き動かす原動力**だということを。もしロマンがなければ、エンジニアはただのロボットになり、新しい未来を切り拓くことができません。

---

## 1. ロマンがなければアイデアは枯渇する  

ロマンを持たないエンジニアは、次第に現状の最適化や既存技術の改善にとどまります。確かに効率化は大事ですが、それだけでは技術の成長には限界があります。ロマンがないと、**探索フェーズ (Exploratory Phase)** で新しい発想やアイデアを生み出すことができません。  

AIの例を挙げるなら、初期のディープラーニング研究もそうでした。当時、多くの専門家が「そんな方法で機械が学べるわけがない」と否定していたにもかかわらず、研究者たちはロマンを抱き続けました。結果、現代のAIブームを実現したのです。

> **ロマンは、枠を超えて新しい可能性を見つけるための種**です。

---

## 2. ロマンがないとエンジニアは「ただのロボット」になる  

ロマンがなければ、エンジニアはやがて指示されたことだけをこなす存在、つまり「タスク自動化されたロボット」と同じになってしまいます。以下は、ロマンが失われたエンジニアの典型的な時系列パターンです：

---

### **フェーズ1: アイデアの枯渇 (初期停滞)**  
- ロマンがないと、興味が限定的になり、ただ目の前のタスクを効率よくこなすことが目的化します。  
- 「なぜこれをやるのか？」という本質的な問いを持たず、与えられた仕様に沿って開発するだけになります。

---

### **フェーズ2: 効率化に偏りすぎる (中期リスク)**  
- 現状の技術を改良する「エクスプロイトフェーズ (Exploit Phase)」に入りますが、ロマンがないため新しい発見やブレイクスルーがなくなります。  
- 結果、**技術的負債 (Technical Debt)** が積み重なり、いつしか古いシステムの維持に追われるようになります。

---

### **フェーズ3: ロボット化 (最終衰退期)**  
- 完全にロマンが失われると、ただの「指示待ちのエンジニア」と化します。これが進むと**技術の飽和点 (Technological Saturation Point)** に達し、競争力を失います。  
- **例:** 古い産業用機器が、AI搭載の最新ロボットに取って代わられるように、ロマンのないエンジニアも新しい世代に追い越されるのです。

---

## 3. ロマンがあると未来が見える  

一方で、ロマンを持つエンジニアは常に次のステージを見据えています。たとえ失敗しても、「その先の未来」に希望を見出し、新しい技術革新への準備ができています。これは**探索と効率化のバランス**を取れるエンジニアにしかできないことです。

**例:** ソニーの初代ウォークマンは、ただのオーディオデバイスではなく、「どこでも音楽を楽しむ未来」というロマンから生まれました。このような挑戦を続ける企業は、変化の激しい市場の中でも生き残り続けます。

---

## 4. ロマンがチームを動かす  

エンジニアリングのプロジェクトは、1人の力だけでは成功しません。チーム全体が同じビジョンを持ち、共通の目的に向かって進む必要があります。そのビジョンこそが**ロマン**です。  

もしリーダーが「効率化しろ」としか言わなければ、チームはただの作業集団になります。しかし、「この技術で世界を変えるんだ」というロマンを共有できれば、メンバーは自発的に動き出し、困難に直面しても前進し続けます。

---

## まとめ：エンジニアは夢を見続けるべきだ  

エンジニアにとってロマンとは、技術を超えて未来を見据える力です。ロマンがなければ、どんなに優れた技術者でも限界が訪れます。ただのロボットのようにタスクをこなすだけになり、次世代の技術には追いつけません。  

でも、ロマンがあれば、どんなに厳しい状況でも何度でも挑戦できます。だからこそ僕はこう思うのです：

**「ロマンですよ、ロマン！」**  

---

**最後に一言**  
周囲が「それ、現実的じゃない」と言っても、あなたが「すごい！」と思える感覚を大切にしてください。それこそがロマンの始まりであり、あなたを次の未来に導くカギなのです。

もし、たまたまこの記事を見つけて「自分はエンジニアじゃないから関係ない」と思う方がいたら、ぜひ考えてみてください。このロマンの考え方は、他のどんな場面でもきっと役立ちます。

単純な子供の頃に抱いた夢や妄想話でもいいので、それを心のどこかに置いて、忘れずにお互いに頑張りましょう。

いつも最後まで読んでいただき、ありがとうございました！
【ポケポケ】コインのイライラを解消する案


## はじまり

コイントスで裏が**あり得ないくらい連続で出る**と非常にイライラしてしまう。

これはよろしくない。

カジュアル層を狙いにしているならば、無駄にイライラさせてはならない。

そこで私は考えた。

## 運値

運値というものを導入する。

コインで表がでると運値が+1され、
裏がでると-1される。

運値が0のとき、表裏の割合は5:5である。
これが+1されるたびに、4:6、3:7、…と変化する。
また-1も同様である。

この値は試合が終了しても、次の試合に引き継ぎられる。

## 何がよいのか

運値を導入することで、極端な不運に対するストレスが軽減される。

例えば、通常のコイントスでは10回連続で裏が出ることもあるが、
運値を導入すれば、その確率は大幅に低減される。

これは、プレイヤーの心理的負担を減らし、ゲームをより快適にする。

また、試合をまたいで運値が引き継がれることで、
「前の試合では不運だったが、次の試合では少し運が向いてくる」
という期待感を持たせることができる。

これにより、プレイヤーのモチベーションを維持しやすくなる。

## 最後に一言

カスミナーフしろ！
[ESP-IDF] Task watchdog got triggered. ~~ task_wdt:  - IDLE1 (CPU 1) エラーの原因と修正方法

# 環境

- VSCode
- ESP-IDF（VSCodeプラグイン）v5.4
- ESP32-WROOM-32E

# 発生したエラー

```shell
E (20414) task_wdt: Task watchdog got triggered. The following tasks/users did not reset the watchdog in time:
E (20414) task_wdt:  - IDLE1 (CPU 1)
E (20414) task_wdt: Tasks currently running:
E (20414) task_wdt: CPU 0: IDLE0
E (20414) task_wdt: CPU 1: liftoff_task
E (20414) task_wdt: Print CPU 1 backtrace
```

# コードで行っていたこと

1. マルチコア利用
    CPU0 と CPU1 にそれぞれタスクを割り振り、並列処理を実現しています

2. 高頻度ループ:
    CPU1 上の liftoff_detection_task では、センサーの高速サンプリング（1000Hz）を行うため、高頻度でループする処理を実装していました

3. ウォッチドッグのリセット
    各タスク内で esp_task_wdt_reset() を呼び出し、ウォッチドッグにフィードを送るようにしていましたが、CPU1 の特定タスクが常に実行状態となっていたため、システム自動生成のアイドルタスク（IDLE1）に実行機会が与えられず、結果的にウォッチドッグがタイムアウトしていました
# エラーの原因
ESP-IDF では、各 CPU に以下のようなタスクが自動的に生成されます。

**IDLE タスク**
CPU0 → IDLE0
CPU1 → IDLE1

これらは、システム上で実行可能なユーザタスクが存在しないときや、全タスクがブロック状態の場合に自動的に実行される低優先度タスクです。

問題となった点は、CPU1 上で高頻度のループ処理を実行するタスク（liftoff_detection_task）が常に CPU を占有してしまい、低優先度の IDLE1 に実行機会が与えられなかったことです。
その結果、IDLE1 はウォッチドッグに定期的なリセット（フィード）を送ることができず、WDT がタイムアウトしエラーを出力しました。

# 解決方法
## 1. ループ処理に適切な遅延処理を入れる
高頻度ループに`vTaskDelay()`や`taskYIELD()`を入れ、CPUを他のタスクに譲るようにします。
```c++
while(1) {
    // 処理
    vTaskDelay(pdMS_TO_TICKS(1)); 
}
```

## 2. アイドルタスクのウォッチドック監視を無効にする
ESP-IDFの設定で、アイドルタスクに対するウォッチドック監視を無効にします。
`sdkconfig`ファイルの

- `CONFIG_ESP_TASK_WDT_CHECK_IDLE_TASK_CPU0`
- `CONFIG_ESP_TASK_WDT_CHECK_IDLE_TASK_CPU1`

の値を変更します。

VSCodeのプラグインの場合、`SDK Configuration Editor`から設定を変更することが可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871960/7df09787-58fb-ef98-3441-de1096c2d1b6.png)

写真の、

- Watch CPU0 Idle Task
- Watch CPU1 Idle Task

のチェックを外し、`Save`ボタンを押せば設定を変更できます。

# おわりに
公式ドキュメントを読んでもピンとこなかったので、ChatGPT o3-mini-highに聞いたら教えてくれました...
助かりました...

# 参考サイト
https://docs.espressif.com/projects/esp-idf/en/v4.2.3/esp32/get-started/vscode-setup.html
KiCad回路図　ERC/DRCエラー対処法まとめ

# 始めに
KiCadのERC/DRCでのエラー/警告の対処法を備忘録としてまとめます。
随時追加予定です。

# エラー
## Error: ピンのタイプ 電源出力 と 電源出力 が接続されています

![Frame 237.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871960/83411ca7-238e-0a22-3659-c10e62c2f57f.png)

自分で作ったシンボルなどでよく起こります。

### 原因
接続されているピンのエレクトリカルタイプが「電源出力」である者同士を接続していることによるエラーです。

例えば、上の写真では、GNDのエレクトリカルタイプは「電源出力」です。ICのGNDのエレクトリカルタイプも「電源出力」になっています。

### 解決方法
ICなどのVCC、VDD、GNDなどは電源供給を受けるものなので、エレクトリカルタイプを「電源入力」にします。バッテリーなど、電源を出力するピンのエレクトリカルタイプは「電源出力」にします。

https://zenn.dev/bbled/books/kicad7_led_panel/viewer/sec6

## Error: 電源入力ピンが電源出力ピンによって駆動されていない

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871960/48a563a3-2c47-1715-48a4-742d96fd6e39.png)

### 原因
ICなどのエレクトリカルタイプが「電源入力」のピンの接続先が、エレクトリカルタイプが電源出力でないときにおこるエラーです。
上の図では、ICの3V3は電源入力ピンですが、接続されている+3.3Vが電源出力ではありません。

### 解決方法
この場合は、「PWR_FLAG」を追加するとエラーを直すことが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2871960/74e63af5-7a42-f70f-54db-c71e826a66c0.png)



# 参考にしたサイト等
https://zenn.dev/bbled/books/kicad7_led_panel/viewer/sec6