OmniAICreator/Qiita-1.07M huggingface dataset:
つよつよエンジニアへの道：コードレビューをスムーズにする5つの方法

初めまして！
bravesoft株式会社でエンジニアをしている赤松と申します！
私は25卒入社なのでまだインターン生なのですが、早速実務をバリバリやっております💪
その中でいろいろなことを経験し学んだことがあったので、記事にしたためようとおもいます。:black_nib:

# コードレビューでの指摘は最低限にする努力をするべし！
## 背景
bravesoftに入社した後、最初に行った開発での出来事でした...

自分が出したPull Requestに大量のレビュー指摘が届いていました涙
また、修正をしてもレビュー指摘が依然あるような状態でした

レビュー指摘が多いような状態だと

* レビューイ　
  * 修正に多くの工数がかかり、開発が進まない（またシンプルに心が折れる涙）
* レビュアー
  * レビュー自体の負荷が大きくなり、他の業務に影響する

になってしまうので、双方にとって良くありません

そのような状態に直面した私がコードレビューでの指摘は最低限に抑えるための工夫をいくつか紹介しようと思います

## 1. コードを書き始める前にIssue上を立て、その段階でレビューをもらうべし

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 20
  FontWeight bold
}
</style>
center footer コーディング前に実装方針を書いたIssueの例
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934400/7d65d741-a4cc-2db8-28e4-aad558f39c7c.png>
@enduml
```

タスクをもらってすぐコーディングを開始してしまうと、実装方針が大きく外れていた場合に軌道修正が大きくなってしまいます。
特に新人の場合、実装方針が想定と異なることは多いでしょう。（僕もそのうちの一人です笑）
そこでいきなりコーディングをするのではなく、実装方針をissueに書き、その段階でレビューをもらうようにしました。
この工程を経てからコーディングを行うことで、方針が大きく逸れなくなるので、Pull Requestでの指摘が少なくできます！

## 2. Pull Requestは細かく切るべし
１つのPull Requestで大量に変更差分があると...
* レビュアー
  * レビュー範囲が広いので、１つのPull Requestのレビューにとても時間がかかる
  * 見落としが発生しやすくなる
* レビューイ　
  * フィードバックを得るまでの時間が長くなり、迅速な反映が難しくなる
  * マージコンフリクトが発生しやすく、修正作業が複雑化する

という問題が起きます

そのため、１つのPull Requestの変更差分を小さくするためにPull Requestを細かく切るようにしています！
どのくらいの粒度で細かくするかで迷ったら、1の段階でそれも相談するようにしています


## 3. Pull Requestテンプレートを活用し、必要な情報をレビュアーに提示するべし

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 20
  FontWeight bold
}
</style>
center footer Flutterプロジェクトで使用しているPull Requestテンプレート例
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3934400/0473b6cc-27b0-b768-73a7-adcf4b7a7b34.png>
@enduml
```

せっかく丹精込めて書いたコードをレビューしてもらうので、自分が実装で行った内容はしっかり提示するようにしています。情報を提示することで、自分が行った実装の品質を担保できます。
また、レビュアー側からしても情報が十分にあるとわざわざ手元でビルドして確認するような手間が省けます。

必要な情報の記述漏れがないように、毎回Githubのリポジトリを作成してすぐテンプレートを設定するようにしています！


## 4. Pull Requestの中にセルフレビュー項目を入れる
テンプレートの話の続きはなるのですが、私はテンプレートの中にセルフレビューの項目を入れるようにしています。

セルフレビューを設定する前はデバッグのためのロガーを消し忘れたり、warningが出たまま状態でレビューを依頼することが頻発しており、そのたびに指摘をいただいていました。

このようなケアレスミスが頻発すると、レビュアーはしょうもない指摘を繰り返すことになり、マージするのに時間がかかってしまいます。

このような問題を解消するべく、テンプレートの中にセルフレビューを入れるようにしました。こうすることでPull Requestを作成したときにセルフレビューする習慣が身につき、ケアレスミスを減らすことができました！

## 5. 指摘をもらったら、他の箇所でも同じことが起こっていないか確認するべし

1~4の工程を踏んでも指摘がくることはあります。

指摘の中でも同じような内容がコードの中で複数点在している場合があります。

このような場合、すべてのコードの箇所にコメントを入れてくれていることもありますが、レビュアーが見落としていたり「１か所だけコメントすればわかってくれるだろう」と思って他の箇所にはコメントがないこともあります。

これでレビューイが他の箇所を修正できていない場合、再度同じ内容の指摘をもらうこととなり、無駄が発生します。

これを解消するために、指摘をもらったら他の箇所でも同じことが起こっていないか確認するようにしています！

## まとめ
今回はインターンを通じて、コードレビューに関して私が学んだことをお話ししました。

1. **コーディング前に実装方針をレビューする**: Issueで実装方針を共有し、レビューを受けることで、最初から正しい方向に進むことができます
2. **Pull Requestを細かく切る**: 大量の変更を一度に提出するのではなく、小さな変更単位で提出することで、レビュアーの負荷を軽減し、迅速なフィードバックを得ることができます
3. **Pull Requestテンプレートの活用**: テンプレートを使って必要な情報を含めることで、レビュアーが効率的にレビューできる環境を整えます
4. **セルフレビュー項目を追加する**: 自分自身でレビューをする習慣をつけることで、ケアレスミスを減らし、レビューの質を向上させます
5. **指摘事項を他の箇所にも適用する**: 1つの指摘事項を他の類似箇所にも適用することで、同じ指摘が繰り返されることを防ぎます

これらのポイントを意識することで、コードレビューの効率が向上し、双方にとって有益なフィードバックのやり取りができるようになります。特に新人エンジニアにとっては有用な取り組みだと思いますので、是非参考にしてみてください！
Flutterで作成したiosアプリをapp storeにリリースしてみた

こんにちは。大学生Sです。
先日から開発していたwebアプリがいい感じになってきたので、app storeでもリリースしようということでその過程を記事に書いて見ることにしました。
作成しているwebアプリについては以下の記事で見れますのでぜひ。
[大学生が卒業旅行のために２週間でWebアプリをリリースした話.その１](https://qiita.com/ssgaolai/items/bf2b91d1e2f3f015efba)

# 前提
上記の記事で書いた通り、元々は**webアプリ**として開発していました。そのため、いくつかのコードがブラウザ上でのみ動作するものだったということがありました。そこはGPTに聞きながら修正しつつ、Xcodeで動作するようになったという状態です。

また、webサイト用のファビコンをアプリのアイコンとして使用するにはいくつかの手順を踏む必要がありました。まず、`pubspec.yaml`ファイルに以下を追加。
```
dev_dependencies:
  flutter_launcher_icons: ^0.10.0
  
flutter_icons:       
  android: true
  ios: true
  image_path: "images/app_icon.jpg" ←画像があるpathを指定
```

その後、terminal上で以下を実行
```
flutter pub run flutter_launcher_icons:main
```
これでアイコンが変更されているはずです。

他には、Webアプリのコードをレスポンシブ設計にしていなかったため、修正が必要でした。
アプリだとレスポンシブ設計にしていないと動作しないんですね...


# 手順
### 1. apple developer programに登録
apple developer programに登録します。個人・個人事業主として登録、または法人として登録が選択できます。私は個人・個人事業主として登録しました。個人・個人事業主として登録するためには**2ファクタ認証が可能なiphoneまたはipad**があればOKです。

申請してから時間がかかるようなので、早めに申請しましょう。実際、私は申請してから承認メールが来るまでに２日ほどかかりました

ちなみに登録には**年間$99**（12980円）かかります。大学生には痛い出費ですがアプリの収益でペイしてやるぞという意気込みで登録しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672991/88c5333c-1d10-ce99-d4db-42c4fb2433cf.png)

卒業旅行のために収益を上げようという目的で始めたアプリ開発なのに収益マイナスで終わったらどうしようという不安と共に購入。


### 2.apple store connectに登録
　apple developer programに承認された旨のメールと一緒に、apple store connectに登録してくださいというメールが来ました。
 
 app store connect上でapp storeにアプリを申請する際に必要になる**Bundle IDを設定します。**
 
　また、X code上でアプリ画面のスクリーンショットを行い、app storeに公開される際に必要となる情報を入力すればすぐに審査してもらうことができます。
 
 　X code上でやることがもう一つあって、`ios/Runner.xcodeproj`ファイルを開き、app store connectで登録したBundle IDを入力します。Signing&Capabilitiesの欄から**teamとBundle IDを入力**すればOKです。

### 3.app store connectに必要事項を記入
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672991/621178b6-f2c1-1de4-06ec-39132841c26b.png)

こんな感じで。プロモーション用テキストは簡潔に。キーワードは検索されそうなワードを書きます。
URLはXのアカウントやGithubを載せました。また、スクリーンショットも載せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672991/2a3f8a5f-ffe9-3b21-a99c-a99df82f2a77.png)

他にもアプリ情報やプライバシー、アプリの価格など設定しなければいけないところがいくつかあるので設定します。

:::note warn
初めてアプリを申請する方はデバイスを登録する必要があります。
apple developer programのCertificates, Identifiers & Profilesページからデバイスを登録します。よく分かりませんがこれでprofileをget!!
app storeに申請することができます。
:::

こんな感じの手順で申請することができました。
初心者がGPTや他のサイトを頼りに見よう見まねでやったため、抜けている手順やおかしいところなどあるかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3672991/e465329b-c756-9638-52ca-251054b41bf7.png)

申請が完了したらメールが届きます。App Store Connectに努力が伝わって嬉しいです。
承認された旨のメールが届くのが楽しみです。

## おわりに

とまあこんな感じで！初心者が！アプリ開発に着手して2ヶ月ほどで！
app storeにアプリを申請する段階まで漕ぎつけたのですから、自分としては満足しています。


**卒業旅行に行くために**という目的で始めたWebアプリ開発ですが、ここまでやることができて良かったです。


僕は大学4年間、ガクチカで言えるようなことがなにもなく、一時期やっていた就活ではバイトのことを話していました。しかし、この２ヶ月間**アプリ開発と研究室活動**の両立をして、大学生活の中で最も忙しい時期でした。忙しい時期でしたが、最も充実したともいえる２ヶ月間になりました。


エンジニアやプログラミングに詳しい方からしたら、簡単なアプリを作っただけじゃないかと思われるかもしれませんが、それでも僕にとってはとても貴重な経験になりました。

**一緒に開発してくれたMくんに感謝です。**

ここまで読んでいただきありがとうございました。




作成したアプリのweb版はこちらになります。アクセスしてみてくださいネ。
（広告収入が卒業旅行費用の資金になります。まだ収入はスズメの涙ほどしかありません涙）

https://groupwarikan.com


この記事を参考にしました↓

https://zenn.dev/moutend/articles/59bddeac3ff3d3
日本語(37)LLMの課題

LLM・LLM活用 Calendar 2024
https://qiita.com/advent-calendar/2024/large-language-model
Day 1 投稿記事です。

LLMの勉強中です。
日本語LLMの課題で、思いついたことを記録します。

英語のLLMは、有用なデータが大量にあり、かつ単語が分かれており、計算気処理が日本語に比較して簡単です。

# data
日本語および漢字データであれば、インドの知識を漢字にしたデータ、中国の漢字のデータ、日本語の古典など、日本語LLMを作成するために有用なデータを組織化できていないようにお聞きしています。

日本語情報処理のいろは。日本語（13）
https://qiita.com/kaizen_nagoya/items/5030f9c6165b523b7f82

## 文字コード、文字フォント
漢字データを電子化して利用するには、文字鏡フォントがある。

文字鏡フォント。追悼　古家 時雄。日本語（２）
https://qiita.com/kaizen_nagoya/items/64c2ff25271ea8ebf2b0

## 日本語語彙大系
日本語語彙大系　追悼：白井諭。Lisperへの敬意を込めて。
https://qiita.com/kaizen_nagoya/items/e41ed513c8686841399b

# 関連資料
追悼　白井諭　古家時雄　銀林純　清水吉男
https://qiita.com/kaizen_nagoya/items/8615a34ef6fd5b6a5ad9

機械学習で手書き漢字をどれくらい読み取れるか, AI(35) 日本語(４)
https://qiita.com/kaizen_nagoya/items/16e38841f022a278830f

日本語の仕様または設計があると嬉しい事例
https://qiita.com/kaizen_nagoya/items/7f8152eef4e68af2a06e
【超基礎】TypeScript、なんでプリミティブ型でメソッドが呼び出せるの？

## 前提
この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

https://typescriptbook.jp/

## 環境
記事内のコードは以下の環境で動作確認済みです。
- Node.js: v22.10.0
- TypeScript: Version 5.6.3

## プリミティブ型とは？
まずはプリミティブ型のおさらいからします
- number型やstring型をはじめとする基本の型
- **メソッドを持たない**
- 直接値を編集できず、再代入を必要とする

## なんでメソッドを呼び出せるの？
JavaScriptではプリミティブ型にメソッドを使った際、これをオブジェクトに変換する**ボックス化**という処理が自動で行われるため。
```typescript:自動ボックス化
const a:string = "hello";

console.log(a.length)// =>5 一時的にstring型のaがオブジェクトになる
```

↓JSでも手動でできるが、特に必要ではない
```typescript:明示的なボックス化
const a:string = "hello";

const aObj:String = Object(a);

console.log(aObj.length);
```


### ボックス化とは
- プリミティブ型の変数を対応する**ラッパーオブジェクト**に入れて、オブジェクト型とする処理
- C言語やC++では明示的に行う必要があるが、**JSでは自動**で行われる
- 自動ボックス化は**メソッドが使われるときのみ**一時的に行われ、すぐさま破棄される
:::note
ラッパーオブジェクトの「生成」から「破棄」までが自動ボックス化のプロセス
:::
```typescript:自動ボックス化後の変数の型
const a:string = "hello";

console.log(a.length) //=>5

console.log(typeof a)) //=>string "object"出ないことに注意
```

## ラッパーオブジェクトについて
- プリミティブ型の変数に対応するオブジェクト
- `ラッパーオブジェクト`⇦`プリミティブ`の代入は可能。逆はできない
- 型名は対応するプリミティブ型の最初の文字を大文字にしたもの
- null型やundefined型には無い
➡nullとundefinedはメソッドが使えない
:::note info
string　➡　String
number　➡　Number
boolean　➡　Boolean
symbol　➡　Symbol
bigint　  ➡　BigInt
:::


## まとめ
以上になります。なんとなく今後あやふやになりそうだったので記事にしてみました。


当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸
[初学者用] JavaScriptにおける標準入力

<h1>初学者のメモ</h1>
自分が忘れないようにするためのメモ書きです。
<br>今回は <b>JavaScript</b> における標準入力についてです。あくまで、自分の理解を残しておくものなので、未完成です。ご容赦ください。

<h1>標準入力とは</h1>
ユーザがキーボード上で入力した値をプログラムが受け取り、それをプログラムが実行する一連の処理のこと。
<br>厳密に辞書の定義を調べると以下のように書いてあります。

[weblio辞書より](https://www.weblio.jp/content/%E6%A8%99%E6%BA%96%E5%85%A5%E5%8A%9B)
**標準入力とは、UNIX環境でのキーボードに相当する装置のことである。**

ただ、今後は自分の解釈として、初めに書いた定義で考えていく。なお、知識に間違いがあれば、その都度更新する。

# 標準入力を受け取るコード(複数行のデータ)
```JavaScript:標準入力
process.stdin.resume();
process.stdin.setEncoding('utf8');

var lines = []; //linesに配列を代入
var reader = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
});
reader.on('line', (line) => {
    //1行ずつデータを取り出していく
    lines.push(line);
});
reader.on('close', () => {
    //ここから、入力に対する処理を書いていく
    console.log("hello " + lines[0]);
    console.log("hello " + lines[1]);
    console.log("hello " + lines[2]);
    //ここはfor文でも処理可能
});
```
上記のコードが、標準入力で複数行のデータを受け取った際のコードの書き方になります。このコードをいじるときは、**入力に対する処理の部分**を変更することが多いかもしれません。


# おわりに
今回は、Javascriptにおける標準入力についてのコードの書き方をまとめました。自分自身、言語自体の理解は進んできたものの、入力に対する処理などは少し違う分野だと感じました。これを乗り越えると、また新しい世界が開きそうなので頑張りたいと思います。

それでは、ばいなら～
***
2024.11.27 執筆
2024年にRUnixを初代プレステエミュレータのNO$PSX.EXEで起動

## はじめに
　近所のハードオフで初代プレイステーション（以降、初代プレステ）の本体を税込み330円で入手しました。
 
https://ja.wikipedia.org/wiki/PlayStation_(%E3%82%B2%E3%83%BC%E3%83%A0%E6%A9%9F)

　初代プレステでは、uCLinuxのRUnix（別名、PSX1Linux） が動作すると知っていたので、インターネット上の情報を参考にして、初代プレステのエミュレータのNO＄PSXを使って、RUnixのカーネルの起動を行いました。

https://problemkaputt.de/psx.htm


https://en.wikipedia.org/wiki/PSXLinux


　本稿の一部は、「東海道らぐオン・オフラインミーティング 2024-09-28」で発表しました。
 
https://tokaidolug.connpass.com/event/331111/
## 初代プレイステーションとは
　初代プレステは、ソニー・コンピュータエンタテインメント（略: SCE）が1994年12月3日に発売した家庭用ゲーム機です。
　CPUにMIPS R3000A ベースの32ビット RISCプロセッサ (R3051)を用い、メインメモリとして、2 MB EDO DRAMを搭載したゲーム機です。
## RUnixとは
　RUnixは初代プレステで動作するuCLinuxです。
　MIPS-NOMMUなので、kernelバージョン2.4.xのuClinuxが動作します。RS232 SIO経由のシリアルコンソールやプレイステーションのGPU経由の仮想コンソールが動作します。
　保存メディアとしてマルチプルメモリーカードを利用可能で、SL811を使って、USBキーボードやマウスを接続可能です。
　これらはWikipediaの情報で、実際に動作に成功した情報を見つけることができなかったので、噂の域をでません。
## RUnixの起動プロセス
　RUnixは次のように起動します。
１．シリアルポート経由でKernelをPlayStationにロード
２．ロードが終わると、Kernelが起動
３．マルチプルメモリーカードに保存してあるrootfsをマウントして起動
　これも、噂の域を出ません。
　なぜなら、メモリーカードのEXT2ファイルフォーマッタとrootfsのイメージファイルを内包する、psx-mcard.0.8.2.tar.gzがインターネット上から消失しているからです。
　したがって、現在確認できる起動プロセスは以下の様になります。
１．シリアルポート経由でKernelをPlayStationにロードする
２．ロードが終わると、Kernelが起動した後、rootfsが無くてKernel PANICで停止
## RUnixの情報サイトは現在2か所
　プレイステーション専門の情報交換サイトpsx.devを除いて、RUnixの情報がまとめっているサイトに以下のものがあります。
１．現存するRunixのソースファイルを活用し、メモリカードの読み（書き）をフルスクラッチで実現する試み

https://github.com/CodeAsm/PS1Linux

２．本体のRAMを2 MBから4 MBや8 MBに張り替えて、 uCLinx のPSPを参考に、 kernelとrootfsをRAMに展開して起動する試み

https://github.com/arkwise/blackroolinux
 
　1番目のサイトでは、RUnixのKernelからメモリカード上の情報の読みだしの実験を行っています。メモリカード上にルートファイルシステムを構築するには至っていません。
　2番目のサイトでは、難易度の高いハードウェアの改造を行っています。改造の様子は、youtubeで視聴可能で、RAMを取り除くときに基板のパターンを壊してしまい、パターンの修復作業も見ることができます。
　1番目のサイトの情報の再現実験を行います。
## RUnixのカーネル構築
　Ubuntu上でカーネル構築を行いました。
　githubのレポジトリをクローンした後に、batファイルを動作すると、カーネルが生成するようですが、私の実行環境のUbuntu上では、うまくいきませんでした。batファイルを参考に、手動でカーネルを生成しました。
　生成したカーネルを初代プレステで動作するファイルに変換すると、クローンしたディレクトリ以下のbinディレクトリに「kernel.exe」が生成します。
## NO＄PSXでRUixのKernelパニックを眺める
　NO＄PSXはwindows上で動作するプレイステーションのエミュレータです。
　今回利用しているレポジトリでは、NO＄PSX.EXEの動作するディレクトリ構成で、メモリカードイメージなどの必要なファイルが配置されています。
　　Ubuntu上でwineをインストールした後、デスクトップ環境のTerminal下で、クローンしたディレクトリに移動し、以下のコマンドを入力すると、NO＄PSX.EXEの起動後にRUnixが起動します。
```
$  wine ./tools/no\$psx/NO\$PSX.EXE bin/kernel.exe
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/e51361d9-5fd8-615e-3900-150a090d6977.png)
スロット1に8MBのメモリカードが挿入されており、ファイルアクセスを試みますが、ルートファイルシステムが見つからないので「Kernel panic」が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693019/f8a1a387-88b8-3a06-e3f8-8d3d101160f6.png)
## まとめ
　Github上のレポジトリの説明に従って、初代プレスト上で動作するRUnixのカーネルパニックを観察しました。
　ルートファイルシステムを作成して、ログインプロンプトの表示を実現したくなりました。
　残念ながら、プレイステーションの動作の仕組みを理解していないので、メモリカードにどのようにルートファイルシステムを保存したらよいかわかりません。メモリーカード上のファイルフォーマットを勉強しながら、ログインプロンプトの表示の実現を目指します。
Snowflakeのロール設計について（修正）

以前下記の投稿でパワポのロール設計イメージを貼りました。

https://qiita.com/a-kamiya/items/501b35248cfca178885e

SnowflakeのSEさんに見てもらったらスリムにできました。という話です。
イメージの前後比較です。

### 修正前
![スクリーンショット 2024-11-15 181646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3487310/3209cecd-0da0-f546-08ca-e854d8331ca3.png)
パワポ上で結構パンパンに詰まってました。

### 修正後
![スクリーンショット 2024-11-27 192841.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3487310/77216871-23db-e35d-5ba6-ded00f68cb7f.png)
一層減らすことができてスッキリしました。

# アドバイスいただいた内容
アクセスロールとして書かれている「test_user_role」「test_admin_role」は不要で、
DBロールがアクセスロールと考えてよいとのこと。
この2つを分けて作らないといけないと思い込んでいたのですが、一緒にしちゃってよいそうです。

あと、「DBロールはユーザーに直接アタッチできない」ということで、
なぜか「DBロールはシステム定義ロールにも直接アタッチできない」と勘違いしていたところがありました。
そのため一層余分に入れなくちゃいけないと思い込んだような気がします。
本から始める 面倒なことはChatGPTにやらせよう　by  からあげ

# ChatGPT 
Calendar 2024　
https://qiita.com/advent-calendar/2024/chatgpt
Day 11 投稿予定記事です。

本から始めるというのは、直接システムだけ触って始めるのではなく、
なにかマニュアル本的な何かで始めるという方法です。

お勧めは、

面倒なことはChatGPTにやらせよう
https://www.amazon.co.jp/dp/4065342902

サポートサイト: 面倒なことはChatGPTにやらせよう
https://let-chatgpt-do-the-troublesome-work.notion.site/ChatGPT-4b826218a1fb40ffa97c84518f0fff22

があるのが嬉しい。

関連記事は、

からあげ帝国　Calendar 2024
https://qiita.com/advent-calendar/2024/karaage

Day11 【松尾研LLMコミュニティ】面倒なことはLLMにやらせよう "Beginning LLM"　2024年10月17日
https://qiita.com/kaizen_nagoya/items/efdc23fbe67cdae2126e

著者は、いろいろな本を出されている。

人気ブロガーからあげ先生のとにかく楽しいAI自作教室 Kindle版
https://www.amazon.co.jp/dp/B08R632HML/

ゼロから始める情報発信: No Output, No Value
https://www.amazon.co.jp/dp/B09875G3GL/

Jetson Nano 超入門
https://www.amazon.co.jp/dp/B092LY4HN9/

ラズパイマガジン 2020年2月号
https://www.amazon.co.jp/dp/B083PWW8XD/
格安PS2/PS3コンポーネントケーブルを使って、初代プレステ用シリアルポートアダプタを作成する

## はじめに
　初代プレステで自作プログラムを動作させる方法として、メモリカードに保存してから動作させる方法を、2種類紹介しました。

http://

　これらの方法では、動作可能なプログラムのサイズが最大112 kBに制限されます。さらに大きなプログラムを動作する方法に、通信ケーブル出力端子を用いたファイル転送してから動作させる方法があります。
　本稿では、初代プレステの通信ケーブル出力端子はシリアルポートです。この端子と他のコンピュータと接続しやすいようにするためのシリアルポートアダプタの作り方を説明します。
　なお、本稿には、「東海道らぐの万鹿博覧会ライトニングトーク大会 in 大阪南港」の発表内容が含まれています。

  https://tokaidolug.connpass.com/event/334044/?utm_campaign=&utm_source=notifications&utm_medium=email&utm_content=title_link

## 予算が潤沢なら初代プレステ用対戦ケーブルSCPH-1040を流用
　シリアルポートに接続可能な周辺機器として、対戦ケーブルが販売されていました。このケーブルを使うと、2台の初代プレステ間で対戦対応のゲームを楽しむことができます。

https://ja.wikipedia.org/wiki/PlayStation_(%E3%82%B2%E3%83%BC%E3%83%A0%E6%A9%9F)#CITEREFQBQ2017

　中古市場で流通しており、2千円から5千円台で取引されています。本稿の目的のためには、入手したケーブルを切断してから利用することになります。
　2番ピンがGND、5番ピンがTXD、8番ピンがRXDになります。テスターでどのケーブルがどのピンに接続されているか確認しましょう。

https://thp.io/2020/psxserial.html

　ハードオフで330円で初代プレステを入手した私は、入手に躊躇してしまいます。別の方法で対処します。

## 初代プレステの通信ケーブル出力端子とAVマルチ出力端子
　wikipediaの各モデル比較を拡大して、今回使用したい通信ケーブル出力端子とAVマルチ出力端子を比較します。
　これらの形状は似ており、ピンの間隔は同じなのですが、ピンの数が異なります。通信ケーブル出力端子は8ピンでAVマルチ出力端子は12ピンです。

https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:PlayStation-Model-Backs.jpg

　マルチAVポートに接続可能なケーブルは、対戦ケーブルより安価に入手できますので、PS2/PS3対応のAVマルチ出力端子ケーブルからシリアルポートの端子を作成します。
　入手するケーブルは、RCAプラグが5個ついているコンポーネント出力のものです。このケーブルのAVマルチ入力端子側のコネクタに全てのピンがついています。RCAプラグが3個のものは必要なピンがついていないので、購入しないようにしましょう。
　海外からの購入に抵抗が無ければ、海外通販でAVマルチ入力端子側のコネクタのみのを購入してもよいかもしれません。ケーブルより加工の手間が省けます。

## AVマルチ入力端子を通信ケーブル入力端子に加工
　インターネット上に様々な加工法が掲載されていますが、コネクタの端っこの突起を生かしたいので、ここでは一方の端は残したまま加工します。
　はじめに、端子の外側のプラスチック部分を外します。筋に沿ってカッターナイフで切れ目を入れた後に、一方の切れ目のすき間を広げるように抉ると、プラスチック部分が2つに分かれます。
　次に、金属のシールド板を外します。
　3番目に、ピンとケーブルのはんだ付け部分をすべて外します。
　図の番号の12番のピン側から10番のピンのある所までプラスチックを削除します。その後、10番のピンと9番のピンを取り除きます。
　4番目に、金属シールド板を、加工したプラスチック部分を覆うように、加工します。
　5番目に、2番ピンがGND、5番ピンがTXD、8番ピンがRXDとなるように配線します。
　私は、ジャンプワイヤの一方の端がメスコネクタになる配線材を使いました。配線材は短い方がいいかもしれません。さらには、フェライトコアの利用も有効かもしれません。
　最後に、逆の手順で端子を組み立てます。
　金属シールドに力が加わって歪んでいる可能性が高いので、通信ケーブル出力端子に抜き刺ししやすいようにやすりで金属部分を削ります。削る量は、通信ケーブル出力端子に差し込みながら、調整します。

## おわりに
　初代プレステ用自作プログラムをシリアル通信で初代プレステ本体に転送する際の、通信ケーブル出力端子に接続可能なシリアルアダプタの作製法を紹介しました。
　2024年現在、使用する部品を入手するために、PS2/PS3用 コンポーネントAVケーブルを利用しました。うまく探すと、ハードオフで入手した初代プレステより安く入手できるかと思います。
 　プラスチック部分の加工には事務用のカッター、金属カバーの加工には百均で手に入る金属のこぎりと金属やすりを使いました。
　パソコンとの接続には、USB-TTLやArduino等を介してUSB接続します。
　手元にある機器を活用して接続できるかは、以下のurlを参照してください。

https://unirom.github.io/serial_psx_cable/
App Service Linux でサイドカーにSSHする方法

# はじめに

App Service Linux のサイドカーに SSH 接続する方法を紹介します。

## サンプル

https://github.com/georgeOsdDev/appservicesidecar-tips/tree/main/ssh_example

# 仕組み

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/87034cbb-ca90-cef2-456f-4869c94623a0.png)

`main` コンテナに対しては、App Service の[公式な手順](https://learn.microsoft.com/ja-jp/azure/app-service/configure-custom-container?tabs=debian&pivots=container-linux#enable-ssh)をセットアップしておくことで、Kudu 経由で WebSSH 接続することが可能です。
サイドカーと `main` コンテナは `localhost` でアクセス可能なため、適宜ポートを決めて ssh を待ち受けておくだけです。

## セットアップ

### `main` コンテナ側

[公式な手順](https://learn.microsoft.com/ja-jp/azure/app-service/configure-custom-container?tabs=debian&pivots=container-linux#enable-ssh)に従ってコンテナを構成する。

### `sidecar` コンテナ側

基本は `main` コンテナと同様に sshd が起動するようにセットアップします。ただし、`main` コンテナは Kudu から接続できるように `2222` ポートが固定で指定されています。そのため、`2222` ポート以外を開けておくようにします。パスワードは適宜変えても良いでしょう。
また、パスワード接続をやりたくなければ一般的なsshのお作法で鍵をセットアップするなどしておきましょう。


## 接続

セットアップした `main`、`sidecar` コンテナをそれぞれデプロイしたら、Kudu から webSSH にアクセスします。
ブラウザ上のコンソールはまず `main` コンテナに接続されます。
そこから、`sidecar` コンテナに対して `ssh` コマンドで接続します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/a7f9c31d-3e2a-9e39-02e7-6e2045ec6294.png)


Kudu NewUIについては以下を参照

- [Kudu サイトの使い方 (Tips 4 選) - Japan PaaS Support Team Blog](https://azure.github.io/jpazpaas/2022/11/28/How-to-use-Kudu-site.html#tips-2-new-ui-kudulite)
- [New KUDU UI for App Service on Linux(Preview) | Microsoft Community Hub](https://techcommunity.microsoft.com/blog/appsonazureblog/new-kudu-ui-for-app-service-on-linuxpreview/3212270)
エンジニア育成のカギ：「心理的安全性」を高める成長の促進

# はじめに

エンジニアリングチームにおいて、後輩の成長を支える仕組みを作ることは、プロダクトやサービスの成長に直結します。しかし、ただ技術的なスキルを教えるだけでは十分ではありません。その根底に必要なのが、「心理的安全性」を確保した環境です。本記事では、「心理的安全性」が育成に与える具体的な影響と、それを高めるための実践的なアプローチを掘り下げて解説します。

---

## 心理的安全性が育成に与える影響

心理的安全性が育成において重要視される理由は、以下の3つに集約されます：

1. **学びの加速**  
心理的安全性が高い環境では、後輩が自身の未熟さを認め、率直に質問や意見を表明できます。これにより、学びのプロセスが自然と加速します。

2. **信頼関係の構築**  
「安心して相談できる」と感じられる環境では、先輩やチームとの信頼関係が深まり、育成プロセスが円滑に進みます。

3. **創造性の発揮**  
後輩が失敗を恐れずチャレンジできる環境では、新しいアイデアや改善提案が生まれやすくなります。

これらは、エンジニア育成だけでなく、チーム全体のパフォーマンス向上にも寄与します。

---

## 心理的安全性を高める5つのアプローチ

ここからは、心理的安全性を高めるための具体的な方法を深掘りします。

### 1. **フィードバックの「質」と「タイミング」を工夫する**
後輩に対して適切なフィードバックを提供することは重要ですが、その伝え方やタイミング次第で逆効果になることもあります。

**良いフィードバックの特徴：**
- **具体的**：例えば「コードの変数名がわかりやすいね」と具体的な箇所を指摘する。
- **即時性**：フィードバックは可能な限り早く行い、記憶が鮮明なうちに改善ポイントを共有する。
- **バランス重視**：ポジティブな点と改善点をバランスよく伝える。

**悪いフィードバックの例：**
- 感情的に否定する（例：「こんなコードはダメだ！」）。
- 改善案を示さない（例：「直しておいて」だけで終わる）。

フィードバックの質を高めることで、後輩は「もっと聞きたい」「もっと成長したい」と感じるようになります。

---

### 2. **質問を引き出すコミュニケーション技術**
後輩が自発的に質問しやすい環境を作るためには、先輩が質問を引き出す工夫をする必要があります。

**具体例：**
- **オープンクエスチョン**を使う  
　「このコードを書く際にどんな点で悩んだ？」といった質問で、具体的な課題を引き出す。
  
- **リアクションをポジティブにする**  
　どんな質問でも「良い質問だね」と肯定的に受け止める。

- **沈黙を恐れない**  
　質問が出ない場面では、「無理に答えなくていいよ」と安心感を与える。

こうした工夫により、後輩は「どんな質問をしても良い」と感じ、積極的なコミュニケーションが促進されます。

---

### 3. **「心理的安全性」を可視化する仕組みを導入**
心理的安全性は目に見えないものですが、アンケートや定期的な1on1を活用して可視化できます。

**具体的なアクション：**
- **心理的安全性アンケート**を実施し、以下の質問を含める：  
　- チーム内で自由に意見を言えると感じるか？  
　- 質問や提案をした際に否定的な反応を受けたことがあるか？

- **1on1でのフォローアップ**  
　定期的に1on1を行い、後輩の不安や課題感を聞き取る。

こうした仕組みは、心理的安全性が低下している兆候を早期に発見し、改善するためのヒントを提供します。

---

### 4. **「失敗」を祝う文化を作る**
失敗は学びの機会であるというメッセージを明確に伝えましょう。

**具体例：**
- チーム内で「失敗から得られた教訓」を共有する会を定期的に開催する。
- 後輩が失敗した際には、まずその挑戦を評価し、「この経験から何を学べるか？」と前向きに話し合う。

「失敗しても責められない」と感じることで、後輩は安心して挑戦するようになります。

---

### 5. **ロールモデルとしての行動を示す**
心理的安全性を高めるリーダーシップは、先輩自身がその姿勢を示すことで効果を発揮します。

**具体例：**
- 先輩が自身の失敗や学びを率直に語る。
- チーム内で後輩を支援する姿勢を積極的に見せる。

リーダーが率先して心理的安全性を体現することで、後輩やチームメンバーはその価値を実感します。

---

## 結論：心理的安全性の高い環境で育つ後輩

心理的安全性を高めることは、エンジニアリングチーム全体の成長を促す鍵です。以下のポイントを再確認しましょう：

1. **フィードバックの質とタイミングを工夫する**  
2. **質問を引き出すコミュニケーション技術を活用する**  
3. **心理的安全性を可視化する仕組みを導入する**  
4. **失敗を祝う文化を作る**  
5. **ロールモデルとして行動を示す**

これらを実践することで、後輩エンジニアの成長を支えつつ、チーム全体の成果を引き上げることができるでしょう。
今更ながら全然知らなかったローカル環境を実機で見る方法（iPhone）

調べたら秒でできることだったので覚書として！

## 準備するもの
- Wi-Fi環境
- PCのIPアドレス
- スマホ
- いつも使っているブラウザ

## やり方（macとiPhoneを使って行いました）
1. PCとスマホを同じWi-Fiに接続する
2. PCのIPアドレスを調べる。
``システム設定>ネットワーク>接続しているWi-Fiの詳細...の下の方に記載``

3. スマホのブラウザにIPアドレス（000.000.00.00みたいな数字）とlocalhostのポート番号（5000など）を入力する。
下記のように入力します
``000.000.00.00:5000/hogehoge.html``
4. これだけで接続完了！！！！ 

----
本当に今更ながらなぜ知らなかったのかと悔やまれます。
自分のスマホが現状iPhone12miniなので、
小さめサイズでの実機確認ができるというのはかなり役立ちだと思いました！
これから多用していこうと思います。
IPv6の拡張ヘッダー

### 拡張ヘッダーは追加情報
>IPv6ではオプションとして、拡張ヘッダーという概念が導入されている。

>追加の情報が必要な場合に利用され、それぞれ効率良く符号化されている。

### 拡張ヘッダーの挿入位置
>図5-58に示す６種類の拡張ヘッダーが定義されている。それぞれの拡張ヘッダーはオプションであるが複数の拡張ヘッダーを用いる場合には、`必ず固定ヘッダーの直後に挿入`する必要があるほか、この`図の順番通りに並べる`ことが望ましい。

# 拡張ヘッダーの項目は符号化されている
>拡張ヘッダーの中には、固定フォーマットを持つものもあれば、可変長のオプションを含み、その`数も可変であるようなものも存在する。これらの項目は（type、lengh、value)の組で符号化`される

* 可変な項目は（type、lengh、value)の組で符号化されるのか
### Type
>Typeは１バイトのフィールドであり、`そのオプションが何であるか`を表す。Typeの値の上位2ビットでそのオプションの処理方法を知らないルーターに対して、何をすれば良いかを伝えられるようになっている。処理方法の選択肢は、`オプションを呼び飛ばす`、`パケットを破棄する`、`パケットを放棄してICMPパケットを返送する`、`パケットを放棄するが、マルチキャスト・アドレスへはICMPパケットを送信しない`。の4通りである。

### length
>1バイトのフィールドであり、`オプションの値の長さ`（０〜255バイト）を表す。

### Value
>`必要とされる何らかの情報`を最大255バイトで指定する。

# 拡張ヘッダー:ホップ・バイ・ホップ・オプションヘッダー
>経路上の全ルーターが確認すべき情報が格納される。現在のところ定義されているのは、64kBを超えるデータグラムに対応するためのオプションーつだけである。

### 固定ヘッダー内のペイロード長フィールドを０にする
>このヘッダーを利用する場合には、固定ヘッダー内のペイロード長フィールドを０に設定する。

## ホップ・バイ・ホップ・オプションヘッダーの構成
### 次に来るヘッダーの種類を示す
>ホップ・バイ・ホップ・ヘッダーも、他の拡張ヘッダーと同様、`次に来るヘッダーの種類を示す1バイト`から始まる。また、

### 拡張ヘッダーの長さ
>その次に続く1バイトで、その`ヘッダーの長さをバイト単位`で表す。ただし、必須である上位8バイトは、このバイト数には含めない。すべての拡張ヘッダーはこの形で始まる

### データグラムの大きさを定義
>次の2バイトは、このオプションが`データグラムの大きさを定義`していることと、その大きさが4バイトの数字で表してる。

### データグラムの大きさ
>最後の４バイトは、データグラムの大きさを表している。65,536バイトより小さいサイズは認められていないため、`サイズがこの値を下回る場合には、最初のルーターがそのパケットを破棄し、ICMP誤りメッセージを返送`する。この拡張へッダーを利用したデータグラムを`ジャンボグラム`と呼ぶ。

# まだ使われない、あて先オプション・ヘッダー
>あて先ホストでのみ解釈されれば良いフィールドに対して用いられる。IPv6の初期バージョンでは、8バイトの倍数になるようにこのヘッダーを`パディング`するためのnullオプションが定義されているのみで、未使用であった。このヘッダーは将来的にあて先オプションが必要になった場合に、`新しいルーティングやホストのソフトウェアが確実にそれらのオプションを扱える`ようにするために設けられている。

* あて先ホストでのみ解釈されれば良いフィールドとは？

### パディングとは？

>詰め物をすること、芯(しん)を入れること、芯、詰め物、(新聞・雑誌などの)埋めくさ、不必要な挿入句

https://ejje.weblio.jp/content/padding#goog_rewarded

# ルーティングヘッダー
>`あて先にたどり着くまでに経由すべきルーターのリストを保持`する。これは、IPv4のルーズ送信元ルーティングとよく似ており、リストに列挙されたルーターは必ずこの順序で訪問する必要があるが、`この間にリストにない他のルーターを経由することも`ある。ルーティング・ヘッダーのフォーマットを図5-60に示す。

### ルーティングタイプ・フィールド
>ヘッダーの残りの部分のフォーマットを表す。タイプ0の場合には、最初の語の後に32ビットの予約語が続き、さらにその後にIPv6のアドレスが続く。
>
* ルーズ送信元ルーティングとは？

https://qiita.com/masatom86650860/items/938a5f2b043bdc83990c
* 予約語とは？

https://qiita.com/masatom86650860/items/bc922da063a3825dc1d4

### 送信元ホストでフラグメントを行う　フラグメント・ヘッダー
>IPv4と同様の方法でフラグメント化を行う。ヘッダーは、データグラム識別子、グラグメント番号、その後にさらなるフラグメントが続くかどうかを表すビットの３つの情報を保持する。IPv6ではIPv4とは異なり、`送信元ホストでのみパケットのフラグメント化を行い、経路上のルーターでは行わない`。この変更は、もともとのIPの思想には大きく反するが、現在のIPv4の実情によく合致している。また、`ルーターの処理を単純にし、ルーティングの高速化することが可能`になる。

### 特定の受信者だけ読める　認証ヘッダー
>そのパケットを誰が送信したかを受信者が確認するために用いれている。暗号化セキュリティ・ペイロードを用いていることで、`パケットの内容を暗号化し、想定された受信者のみが読める`ようにすることができる。

https://bookplus.nikkei.com/atcl/catalog/23/03/16/00728/
文字列⇔値 の変換【備忘録】


# 文字列 ⇐ 値

文字列を数値に変換するには`ToString()`メソッドで変換できます
```c#
    double a = 3.14159;
    
    // b = "3.14159"
    string b = a.ToString();
```



# 文字列 ⇒ 値
`Parse()` メソッドで変更することができます
```c#:
    //例
    string a = "100"
    //a = 100
    int b = int.Parse(a);
```

 `TryParse()`メソッドを使えば戻り値として `成功時 → true` `失敗時 → false` を取得できます

```c#
    //例
    string[] values = {"200", "NULL", "hoge", "100.45"};
    int ans;
    
    foreach (string value in values)
    {
        bool flag = int.TryParse(value, out ans);

        if (flag)
        {
            Console.WriteLine($"値は{ans}です");
        }
        else
        {
            Console.WriteLine("変換されませんでした");
        }
    }
    //結果↓
    //値は200です
    //変換されませんでした
    //変換されませんでした
    //変換されませんでした
```

↓参考

https://learn.microsoft.com/ja-jp/dotnet/csharp/programming-guide/types/how-to-convert-a-string-to-a-number

https://learn.microsoft.com/ja-jp/dotnet/api/system.int32.parse?view=net-8.0

https://learn.microsoft.com/ja-jp/dotnet/api/system.int32.tryparse?view=net-8.0
[React] State

# 環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

# まとめ
## Stateとは
> コンポーネントのさまざまな視覚状態（例えば「初期状態」、「入力中状態」、「成功状態」）に対して表示したい UI を記述し、ユーザ入力に応じて state の変更をトリガします。

[state の管理](https://ja.react.dev/learn/managing-state)

つまり、
**`State`は、Reactコンポーネントがその内部で持つ動的なデータを管理するためのオブジェクト**
**`State`は、ユーザーの操作や外部からのイベントによって変更され、Stateの変更はコンポーネントの再描画を引き起こし、Reactの「動的」なUI更新を可能にする**

## なぜStateが必要なのか
1. 動的なUIの実現
1. 状態（State）の管理

## PropsとStateの違いは？
|特徴|`Props`|`State`|
|:--|:-:|:-:|
|変更可能性|読み取り専用（不変）|変更可能（可変）|
|管理場所|親コンポーネント|コンポーネント自身|
|データの流れ|親から子へ（単方向データフロー）|コンポーネント内部のみ|
|役割|外部データの受け渡し|内部状態の管理|
|更新方法|親コンポーネントで値を変更|`setState`や`useState`を使って変更|

# ソースコードの前に
## フォルダ構成
~~~:folda_structure
├── public/
│   ├── index.html
└── src/
│   ├── index.js(index.jsx)
│   └── App.js(App.jsx)
~~~

## index.html
~~~html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

~~~

## index.js
~~~jsx:index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
~~~

# ソースコード（App.js）
## Number
`num`: **State変数**
`setNum`: **State変数を更新するための関数（更新関数）**

~~~jsx:App.jsx
import { useState } from "react";

export const App = () => {
  const [num, setNum] = useState(0);
  const onClickCountUp = () => {
    setNum(num + 1);
  };
  return (
    <>
      <button onclick={onClickCountUp}>カウントアップ</button>
      <p>{num}</p>
    </>
  );
};
~~~

### 動作
- `num + 1`で、引数`num`を1つずつ増やす

## Boolean
`isShowFace`: **State変数**
`setIsShowFace`: **State変数を更新するための関数（更新関数）**

~~~jsx:App.jsx
import { useState } from "react";

export const App = () => {
  const [isShowFace, setIsShowFace] = useState(true);
  const onClickToggle = () => {
    setIsShowFace(!isShowFace);
  };
  return (
    <>
      <button onclick={onClickToggle}>on/off</button>
      {isShowFace && <p>＼(^o^)／ｵﾜﾀ</p>}
    </>
  );
};
~~~

### 動作
- `!isShowFace`で、引数`isShowFace`を反転させる
- `&&`で、引数`isShowFace`が`true`の時に`＼(^o^)／ｵﾜﾀ`が表示される

# イメージ
## Number
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/a8f74335-9113-0cfe-c967-96ad30c3b7e5.png)


## Boolean
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/630cbb3c-8a9d-6f7f-cb67-25c338986ba7.png)


# Tips
1. `boolean`を扱う変数には、`is` `has`などを変数の接頭語につける
e.g. `isShowFace`

# 参考リンク
- [state の管理](https://ja.react.dev/learn/managing-state)
- [コンポーネントの state](https://ja.legacy.reactjs.org/docs/faq-state.html)
- [モダンJavaScriptの基礎から始める挫折しないためのReact入門
](https://www.udemy.com/course/modern_javascipt_react_beginner)
「スパゲッティの長さは、一般的に約25cm。だれがいつ決めましたか。」AI先生に聞きました。(全て回答省略)

??? 短いのがありませんか。

https://www.google.com/search?q=%E3%82%B9%E3%83%91%E3%82%B2%E3%83%86%E3%82%A3+%E9%8D%8B%E3%81%8B%E3%82%89%E3%81%AF%E3%81%BF%E5%87%BA%E3%82%8B&rlz=1CAUHAM_enJP1105&oq=%E3%82%B9%E3%83%91%E3%82%B2%E3%83%86%E3%82%A3%E3%80%80%E9%8D%8B%E3%81%8B%E3%82%89%E3%81%AF%E3%81%BF%E5%87%BA%E3%82%8B&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIKCAEQABiABBiiBDIKCAIQABiABBiiBDIKCAMQABiABBiiBDIKCAQQABiABBiiBNIBCTE1NDE0ajBqN6gCCLACAQ&sourceid=chrome&ie=UTF-8

https://www.google.com/search?q=%E3%82%B9%E3%83%91%E3%82%B2%E3%83%83%E3%83%86%E3%82%A3+%E9%95%B7%E3%81%95&sca_esv=41165fec71bc817d&rlz=1CAUHAM_enJP1105&sxsrf=ADLYWIJ6Uj-2qBOX3brn3QeYtkKBv8xurQ%3A1732699596934&ei=zOVGZ5zYOMbn2roPrLPw2QU&ved=0ahUKEwic7uj_mPyJAxXGs1YBHawZPFsQ4dUDCA8&uact=5&oq=%E3%82%B9%E3%83%91%E3%82%B2%E3%83%83%E3%83%86%E3%82%A3+%E9%95%B7%E3%81%95&gs_lp=Egxnd3Mtd2l6LXNlcnAiGeOCueODkeOCsuODg-ODhuOCoyDplbfjgZUyBRAAGIAEMgYQABgHGB4yBRAAGIAEMgUQABiABDIGEAAYBBgeMggQABiABBiiBDIGEAAYBRgeMgYQABgFGB4yCBAAGAQYCBgeSIwvUOMBWOghcAB4ApABAJgByAOgAfMNqgEJMC42LjEuMC4xuAEDyAEA-AEBmAIFoALNB8ICBBAAGEfCAg0QABiABBixAxhDGIoFwgIKEAAYgAQYQxiKBcICBxAAGIAEGASYAwCIBgGQBgqSBwUwLjMuMqAHhh8&sclient=gws-wiz-serp

https://hashizumen.shop/blogs/noodle-note/pasta_spaghetti#:~:text=3%2D1%20%E3%82%B9%E3%83%91%E3%82%B2%E3%83%83%E3%83%86%E3%82%A3%E3%81%A8%E3%81%AF,2%E3%8E%9C%E7%A8%8B%E5%BA%A6%E3%81%AE%E3%83%91%E3%82%B9%E3%82%BF

# Gemini先生へ
回答省略

# ChatGPT先生へ
回答省略

# Copilot先生へ
回答省略

# 参考
・申し訳ありません。更新していません。以下、AIが３つない時代？でした。
・AI先生が、自動的に最新に更新する方法がありますか？
　アドバイスをいただけると幸いです。

https://qiita.com/mrrclb48z/items/85f6d38261a769af583e

https://qiita.com/mrrclb48z/items/910310f79c3ecd83dadd

https://qiita.com/mrrclb48z/items/cdaf9a431ff06507556f

# 教えて下さい。
・おすすめの　タグ　が何がいいですか。アドバイスをいただけると幸いです。
　??? AI先生に決めてもらう。
　??? 他のサイトで見ました。
Kintoneのリッチエディタを使って好きな形式でデータを表現したい

## 概要
- タイトルそのまま

## 方法
早速やり方を解説していこうと思います。

:::note warn
APIを利用して行うため、会社で行う場合は権限や許可をしっかりと確認してから行うようにしてください。
:::

ひとまず1行を変更するpythonのコードになります。あんまり得意ではないので参考程度に利用してください。
```python
def put_record(api_url, api_key,app_id,record_id,html_css):
    headers = {
        "X-Cybozu-API-Token": api_key,
        "Content-Type": "application/json; charset=UTF-8",
    }

    data = {
              "app": app_id,
              "id": record_id,
              "record": {
                "リッチエディター": {
                  "value": html_css
                }
              }
            }
    
    encoded_data = json.dumps(data, ensure_ascii=False).encode("utf-8")
    response = requests.put(api_url + "/k/v1/record.json?app="+app_id+"&id="+record_id, headers=headers, data=encoded_data)

    print("Response:", response.text)

if __name__ == "__main__":
    app_id = 
    record_id = 
    API_URL =""
    API_TOKEN=""
    html_css_ = """<div>hello</div>"""

    put_record(API_URL, API_TOKEN,app_id,record_id,html_css_)
```

リッチエディタにHTMLコンテンツを入れて送信すると、サニタイズされるもののテーブルやdivなどを利用して好きな形でデータを表現できます。APIなどの情報を直接入れてあげるだけで簡単なWebページ調にすることだってできます。

ただそれには一工夫が必要です。

後述する方法を利用しない場合、classを用いたcssの利用はできず、inline styleで利用する必要があります。
当たり前ですが、`htmlではないためサニタイズで存在しなかったことにされてしまうためです。`

手軽に試すだけであればinline styleでもよいですが、`量が増えると一度の送信コストも倍々ゲームになってしまう問題があります。`

そこで、Kintone側が用意しているカスタムCSS機能を利用します。

`アプリ > 歯車アイコン > 設定 > JavaScript/CSSでカスタマイズ`ここでcssを入れることで、classを利用した一般的なcssを利用することができます。

一つ注意すべき点としては、APIで指定したclass名はkintoneのプレフィックスとして`user-token-`が頭につきます。

message -> `user-token-message`といった具合です。

なので、カスタムCSSとして与えるcssにはすべて`user-token-`を付けて提供する必要があります。

## まとめ
リッチエディタの活用法が広がるので、おすすめです
LeetCodeをC#で解く1

アルゴリズムがよくわからないので、Easyからトライすることにした。

　217. Contains Duplicate
　https://leetcode.com/problems/contains-duplicate/description/

問題の概要：
整数配列に同じ値が少なくとも 2 回出現する場合はtrue、すべての要素が重複しない場合はfalseを返す。

回答：
for文のネストで配列内の総当たりをしようとしたが、時間制限でエラーになる。
他ユーザーの解法をチェック。

・配列をソートしてからforで処理する
ソートしておけば総当たりの必要がない。
Array.Sort(配列名)

・hashsetを用いた重複チェック
hashsetにいれると強制的に重複が排除されるので、配列内の重複チェックに使える。
hashset.count()と[配列].Length で比較

参考サイト
https://qiita.com/kohi7777/items/e6264c960fc2e6980596
https://www.rakuten-tarou.com/introduction-to-hashset-in-c/

【今回の学び】
配列で総当たりをすると、要素数が少ない場合は成功するが、要素数が多くなればなるほど厳しい。
当たり前だけど意識できていなかったので。
ルーズルーティングとストリクトルーティング

# ルーズ送信元ルーティングとは

# 静的経路制御と動的経路制御
>経路表の作成方法には，`静的経路制御（スタティックルーティング）`と`動的経路制御（ダイナミックルーティング）`があります。
　静的経路制御では，手作業で経路表を作成します。ネットワークの規模が大きくなると作業が困難になりますし，`更新があったり，経路でのルータにトラブル`があったりすると，その対応が不十分になる危険があります。
　動的経路制御は，ルータが経路制御アルゴリズムに基づいて`自動的に情報を収集し，経路表を更新する`方法です。静的経路制御と比べて、ルータに負荷がかかりますが、逐次改善ができること、経路の障害発生などに即応できる利点があります。

### ルーズルーティングとストリクトルーティング
>上述の「経路制御の例」のように`デフォルトルートを設定する制御方式をルーズルーティング`といいます。それに対して`経路表にない場合はキャンセルする方式をストリクトルーティング`といいます。

### ソースルーティング
>バケツリレーではなく、`送信元（ソース）で送信先までの中継ルータを指定する方式`をソースルーティングといいます。中継ルータの故障で接続できなくなる確率が高くなりますが、盗聴される危険性が排除されます。さらに、`送信先までの全経路を指定`するストリクト・ソース・ルーティング、`途中までを指定`するルーズ・ソース・ルーティングに区分されます。
　この経路情報は、ＩＰヘッダのオプション項目に記入されます

 https://www.kogures.com/hitoshi/webtext/nw-routing/index.html#:~:text=%E9%9D%99%E7%9A%84%E7%B5%8C%E8%B7%AF%E5%88%B6%E5%BE%A1%E3%81%A8,%E8%A8%98%E5%85%A5%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99

# 感想
これが求めていたものかは不明。
時間があればもっと調べたい。
予約語

予約語は以下のものです。
```
BEGIN    class    ensure   nil      self     when
END      def      false    not      super    while
alias    defined? for      or       then     yield
and      do       if       redo     true     __LINE__
begin    else     in       rescue   undef    __FILE__
break    elsif    module   retry    unless   __ENCODING__
case     end      next     return   until
```
`予約語はクラス名、変数名などに用いることはできません`。ただし`接頭辞$, @、@@が先頭についたものは予約語とは見なされません`。また、def のあとやメソッド呼び出しのピリオドのあとなどメソッド名であるとはっきり分かる場所ではメソッド名として用いることができます。

また、番号指定パラメータは変数名、def で定義するメソッド名に用いることはできません。
```
_1 _2 _3 _4 _5 _6 _7 _8 _9
```

https://docs.ruby-lang.org/ja/latest/doc/spec=2flexical.html#:~:text=%E4%BA%88%E7%B4%84%E8%AA%9E%E3%81%AF%E4%BB%A5%E4%B8%8B%E3%81%AE%E3%82%82%E3%81%AE%E3%81%A7%E3%81%99%E3%80%82,%E5%90%8D%E3%81%AB%E7%94%A8%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82

# 感想
予約語はクラス名、変数名などに用いることはできないもの
atcoder練習(2024.11.27)

# キーワード

# 問題
https://atcoder.jp/contests/abc377/tasks/abc377_c

## 問題文
縦Nマス、横NマスのN**2マスからなるマス目があります。
上からi行目(1≤i≤N)、左からj列目(1≤j≤N)のマスをマス(i,j)と呼ぶことにします。
それぞれのマスは、空マスであるかコマが置かれているかのどちらかです。
マス目には合計でM個のコマが置かれており、k番目(1≤k≤M)のコマはマス(ak​,bk​)に置かれています。
あなたは、すでに置かれているどのコマにも取られないように、いずれかの空マスに自分のコマを置きたいです。
マス(i,j)に置かれているコマは、次のどれかの条件を満たすコマを取ることができます。
マス(i+2,j+1)に置かれているマス(i+1,j+2)に置かれているマス(i−1,j+2)に置かれているマス(i−2,j+1)に置かれているマス(i−2,j−1)に置かれているマス(i−1,j−2)に置かれているマス(i+1,j−2)に置かれているマス(i+2,j−1)に置かれているただし、存在しないマスについての条件は常に満たされないものとします。
たとえば、マス(4,4)に置かれているコマは、以下の図で青く示されたマスに置かれているコマを取ることができます。
あなたがコマを置くことができるマスがいくつあるか求めてください。

## 制約
1≤N≤10**9
1≤M≤2×10**5
1≤ak​≤N,1≤bk​≤N (1≤k≤M)
(ak​,bk​)≠(al​,bl​) (1≤k<l≤M)
入力はすべて整数

## 入力
入力は以下の形式で標準入力から与えられる。
N M
a1​ b1​
a2​ b2​
⋮
aM​ bM​

## 出力
すでに置かれているコマに取られずに自分のコマを置くことができる空マスの個数を出力せよ。

## 入力例 1
8 6
1 4
2 1
3 8
4 5
5 2
8 3

## 出力例 1
38

すでに置かれているコマは、以下の図で青く示されたマスに置かれたコマを取ることができます。
よって、あなたがすでに置かれているコマに取られないように自分のコマを置くことができるマスは残りの 38 マスです。

## 入力例 2
1000000000 1
1 1

## 出力例 2
999999999999999997

10**18 マスのうち、置くことができないマスはマス (1,1),(2,3),(3,2) の 3 マスのみです。
答えが 2**32 以上になる場合があることに注意してください。

## 入力例 3
20 10
1 4
7 11
7 15
8 10
11 6
12 5
13 1
15 2
20 10
20 15

## 出力例 3
338


# 回答
```Python
n, m = map(int, input().split())
ab = [tuple(map(int, input().split())) for _ in range(m)]

l = []
result = []

for i in ab:
    l.append((i[0]+2, i[1]+1))
    l.append((i[0]+1, i[1]+2))
    l.append((i[0]-1, i[1]+2))
    l.append((i[0]-2, i[1]+1))
    l.append((i[0]-2, i[1]-1))
    l.append((i[0]-1, i[1]-2))
    l.append((i[0]+1, i[1]-2))
    l.append((i[0]+2, i[1]-1))

def get_unique_list(seq):
    seen = []
    return [x for x in seq if x not in seen and not seen.append(x)]

l = get_unique_list(l)

for i in l:
    if 1 <= i[0] <= n and 1 <= i[1] <= n:
        result.append(i)

filtered_result = [x for x in result if x not in ab]

k = get_unique_list(ab + filtered_result)

print(n*n - len(k))
```

# 参考
https://www.python.jp/train/tuple/index.html

https://note.nkmk.me/python-list-unique-duplicate/#_2
# 備考
- 供養です。一生懸命考えて書いたのにメモリ超過で不正解でした。もうこれしかわかりません。
- tupleが便利なことに気づきました。
- そもそもサンプルの答えでも+-2ぐらいの範囲で間違える。おそらくどこかで数え漏れだったり重複とかを考えている。でもアルゴリズム自体は間違ってない気がする。実行の仕様の問題？
- ゴリ押しではどうにもならないこともあるということですね。
-
Python 関連メモ

* timeit
```python
import timeit

def my_function():
    return [x*2 for x in range(1000)]

execution_time = timeit.timeit('my_function()', globals=globals(), number=1000)
print(f"実行時間: {execution_time} 秒")
```


timeit.timeit() は、文字列で渡されたコードを指定回数実行し、その実行にかかった時間を返します。
globals=globals() は、my_function() が現在のスクリプトで定義されていることを伝えます。

実行結果：
numberが指定した回数（デフォルトでは 1,000,000 回）実行され、その合計実行時間が返されます。
値下げ　 直近のAurora Serverless V2について

## はじめに
Amazon Aurora Serverless v2について直近の情報2つを踏まえて簡単に記事にしてみようかと思いました。
ひっそりと値下げされたように見える東京リージョン・大阪リージョンでのACUコストについても触れています。
https://aws.amazon.com/jp/rds/aurora/serverless/

## スケーリングについて
最近まで0.5ACUまでしかminはスケールできませんでしたが、アップデートにより0ACUまでスケールできるようになりました。

https://aws.amazon.com/jp/blogs/database/introducing-scaling-to-0-capacity-with-amazon-aurora-serverless-v2/

公式のドキュメントを一部抜粋して日本語にすると

> ACU が 0 の場合、Aurora Serverless v2 DB インスタンスは、一定期間の非アクティブ状態が続くと自動的に一時停止します。Aurora は、指定された期間内にユーザー アクティビティによって開始された接続がない場合、Aurora Serverless v2 インスタンスを一時停止します。一時停止期間中は、データベースの ACU が 0 であるため、コンピューティングの料金は発生しません。この間は、ストレージの料金が発生します。

使ってない時間のコストを削減することができるようになりました。

ただし、
>最初の接続が要求されると、データベースは自動的に再開し、アプリケーションの需要に合わせてスケーリングします。データベースが再開するまでに最大 15 秒かかることがあります。再開後は、データベースのコンピューティングに対して ACU ごとに 1 秒あたり課金されます。

ということで、
接続要求からの再開までには少し時間がかかる点には注意が必要ですね。
一時停止までの時間についてはトラフィックがなくなってから「300 秒 (5 分) から 86,400 秒 (24 時間) の間」で調整はできそうなのでユースケースに応じて調整する必要があります。

## コストについて
基本的には ACU単位/時間 での従量課金となり以下のような形態です。

|  |Aurora Standard (ACU 時間あたり)|Aurora I/O 最適化 (ACU 時間あたり)|
|---|---|---|
|Aurora キャパシティーユニット  |USD 0.15  |USD 0.20 |

これなんですが、最近までACU辺りの価格がそれぞれ

StandardがUSD 0.20, I/O 最適化がUSD 0.26

だった気がするので、
いつの間にか東京リージョンで値段が下がっているようです。
依然と比べ値下率20%↑ なのでありがたい話です。
（特にアナウンスがなさそうなんですが、いつ下がったんですかね？間違ってるかと思ってcalculate pricingも確認しましたが下がってました。）

※追記　やはり11/27に下がってました。

オンデマンドインスタンス比でみると
|  |db.t4g.medium|db.t4g.large|serverless v2|
|---|---|---|---|
|時間当たり料金  |USD 0.113  |USD 0.225 | USD 0.15 |

選びやすくなりましたね。
総じて「開発環境などの定期的に停止していて問題ない環境」にはとても選択しやすくなったのかなと思います。

## 開発環境向きサーバーとしてコストを抑えられると言ったけど…
実際、これまでに比べればコストは下げられるでしょう。
ただ最安、というわけではないので状況に合わせて選択するといいのかなと思います。
Serverlessのメリットはコストだけではなく、開発運用コストの低減も大きいので
・リザーブプロビジョン全コミット割引でコストを抑える
・オンデマンドプロビジョン*EventBridgeなどによる定期停止運用
・ServelessV2 0ACU運用
どれを選ぶかはあなた次第。試算はちゃんとしましょう

## 上記を踏まえて
基礎コストの低減と0ACU対応によって、serverlessV2が選びやすくなったと言えるかなと思います。
このアプデでserverlessV2民が増えるのかなと期待しています。
データローダからUpsertを行うサンプルbatファイル

データローダをバッチから起動するためのbatファイルを記述しました。

以下で説明されているような初期設定は実施済みの想定です。

[データローダをバッチモードで使用する際の設定手順](https://qiita.com/chanhly/items/395e4c9f37dd842dc7d5)

[データローダをバッチで自動化してみた](https://blog.logical.co.jp/entry/2020/06/12/090000)

[バッチを使用してデータローダーを自動で実行させる方法](https://tobem.jp/pardot_blog/salesforce/202311081506.html)


~~~bat:サンプルバッチ.bat
#echo off

rem #=======================
rem 1時間に1回、タスクスケジューラで本バッチを起動する。
rem インポート用CSVファイルが格納されていれば、データローダでUpsertを行う。
rem #=======================

rem #=======================
echo 変数宣言・メイン処理前の準備
rem #=======================

set LOADER_PATH="C:\Program Files (x86)\salesforce.com\Data Loader\v36\bin"
set BATCH_PATH="C:\DataLoaderBatch"
set CSV_PATH="C:\DataLoaderBatch\data"

rem 現在日時
set yy=%date:~0,4%
set mm=%date:~5,2%
set dd=%date:~8,2%
set time1=%time: =0%
set hh=%time1:~0,2%
set mi=%time1:~3,2%
set ss=%time1:~6,2%

rem データローダが実行されたかどうかを保持
set flag=0


rem #=======================
echo メイン処理
rem #=======================

echo ファイルが格納されているか確認
if( exist %CSV_PATH%\upsertData.csv

echo データローダ実行
rem (接続情報・操作内容等の必要な情報は、conf\process-conf.xml内の「process_conf_Upsert」部分に記載)
call %LOADER_PATH%\process.bat %BATCH_PATH%\conf process_conf_Upsert

rem データローダ実行後、原本とsuccess, errorファイルを適当なフォルダに移動する
rem 都度別のファイルとして保存されるよう、ファイル名にタイムスタンプを付与するなどの工夫が必要。
set dateTime=%yy%%mm%%dd%%hh%%mi%
move %CSV_PATH%\insertData.csv %BATCH_PATH%\log\insertData_%dateTime%.csv 
move %CSV_PATH%\success_insertData.csv %BATCH_PATH%\log\success_insertData_%dateTime%.csv
move %CSV_PATH%\error_insertData.csv %BATCH_PATH%\log\error_insertData_%dateTime%.csv

echo 処理終了

set /a flag+= 1
)

rem #=======================
rem 必要に応じて、溜まったログ等を掃除する処理を記述する
rem #=======================



rem #=======================
rem データローダが実行された場合、実行結果（ログファイル）を添付してメール送信する
rem #=======================
if %flag% GTR 0 (

echo メール送信
call %BATCH_PATH%\bin\send_LogMail.vbs
)


rem #=======================
echo バッチ終了
rem #=======================

rem pause

exit
~~~



メール送信が必要な場合は、こちらの記事を参考に作成してください。
[VBScriptで指定したファイルをメール送信するTips](https://tech-lab.sios.jp/archives/20277)
REST APIとは？？　～ステートフル、リソースについて解説～

実務ではMVCフレームワークを使ったアプリがメインですが、
先日Udemyの教材を見ながらGo言語でREST APIの構築を経験しました。

せっかく学習したのでブログにまとめてみたいと思います。
まずREST APIの説明の前にAPIについてご紹介します！

# APIとは？？
**APIとはソフトウェアの機能を共有することです。**

実際にAPIを使用する流れを見てみましょう。
例えば、あるサービスがユーザー情報を提供するAPIを公開していたとします。

## 1. リクエストを送信

APIに対してGETメソッドを使ってリクエストを送信します。

```cmd
GET /api/get-users/99
```

## 2. APIがプログラムを実行

APIが受け取ったリクエストに基づいてid = 99のユーザー情報をデータベースから取得し、jsonデータに変換します。

## 3. レスポンスデータを送信

```json
{
"id": "99",
"name": "山田太郎",
"email": "taro.yamada@example.com",
"profile_image": "https://example.com/images/taro.jpg"
}
```

APIが実行したプログラムからこのようなjsonデータが返されます。

このように１～３の

1. データの送信方法
2. 処理するプログラム
3. レスポンスデータ

これらをまとめてAPIといいます！


# REST APIとは？？

REST APIとはAPIを設計するアーキテクチャの１つです。
以下に特徴をご紹介します。

## 1.リソース指向

REST API はリソースを基に設計します。
そしてリソースごとにURLを割り当てて設計していきます。


:::note info
リソースとは？
REST APIのリソースとはデータや機能を表現する抽象的なもの。
例）ユーザー（users）記事(articles)、商品（products）
:::
### リソースの例

| リソース | 説明         | エンドポイント |
|----------|--------------|----------------|
| ユーザー | ユーザー情報 | /user          |
| 記事     | 投稿される記事 | /article       |



### URI、URL、エンドポイントってなんや？？

REST APIを進めるなかで、
馴染みのあるURLとは別にURI、エンドポイントという言葉が出てきて混乱します…
用語の整理をしてみました！

| **用語**       | **定義**                                                                                     | **例**                                 |
|----------------|---------------------------------------------------------------------------------------------|---------------------------------------|
| **URI**       | ほぼURLと認識してよい。URLやURN(リソースを識別する番号)を含む広い概念。                              | `https://api.example.com/users/123`   |
| **URL**       | URIの一部で、「リソースの場所」を示すもの。プロトコル、ドメイン、パス、クエリなどを含む具体的なアドレス。 | `https://api.example.com/users/123`   |
| **エンドポイント** | API設計において、リソースや機能にアクセスするための接続点。通常はURLのパス部分を指す。                | `/users/{id}`                         |


## 2.HTTPメソッド使い分け


REST APIは、URLに対して、
HTTPメソッドを使い分けてデータを操作します。

例えば、RESTではないAPIの場合は、Userというリソースに対して、
それぞれURLを使い分けて操作します。

| 操作   | エンドポイント         |
|--------|------------------------|
| 表示   | /user/get/99           |
| 作成   | /user/create/99        |
| 更新   | /user/update99         |
| 削除   | /user/delete/99        |

一方でRESTであるAPIはエンドポイントである`/users/{id}`に対して4つのHTTPメソッドを使い分けてリソースの操作を行います。

| HTTPメソッド | 処理                   |
|--------------|------------------------|
| GET          | リソースの取得         |
| POST         | 新しいリソースの作成   |
| PUT          | 既存リソースの更新     |
| DELETE       | リソースの削除         |


## 3.ステートレスである！

#### ステートレス・ステートフルとは？

ステート（状態）レス・フルの違いは、サーバーにログインユーザーの情報を保持しているかどうかの違いになります。


### ステートレス

サーバーはログインユーザーの情報を持たず、
各リクエストにログインユーザー情報を乗せて送信されます。
サーバーに状態を保持していないため、
処理がシンプルとなり高速なレスポンスが期待できます。

またサーバーに依存しない設計になっているためスケーラビリティ（負荷分散）が高いです。

#### デメリット

- クライアント側で状態を管理する必要があるため、実装が複雑になることがある。
- 各リクエストに必要情報を送信する必要があるため冗長性が増す。


### ステートフル

ログインしたユーザーの情報がサーバーに格納されます。
例えばショッピングサイトのカートに入っている、
商品の情報はサーバーのセッションに保持されます。

ユーザーはセッションが有効な時間内であれば、
カートに商品が入った状態から買い物を続けることが出来ます。

#### デメリット

上記のように連続的なユーザー体験を提供できますが、
サーバーに依存することになり障害がユーザーに影響を与えることがあります。


# まとめ🖊️

ご覧いただきありがとうございました！
何か気になる点や、おかしな点ありましたらお気軽にコメントください！
[Next.js] Dynamic Import を使用してSSRを回避する

## 問題、エラー

`@toast-ui/react-editor`や`Editor.js`などSSRを支援していないライブラリーを利用すると以下のエラーが発生します。

```
 ⨯ ReferenceError: Element is not defined
```

## 原因

### Next.js公式ドキュメント

**With no SSR**

To dynamically load a component on the client side, you can use the ssr option to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

```jsx
import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'),
 {  ssr: false,})
```

- Next.jsは基本的に各ページをpre-renderingする
- サーバーサイドから`window`みたいなブラウザーAPIを利用しているライブラリーやコンポーネントをpre-renderingしようとするからエラーが発生

## 対応

ダイナミックインポート(Dynamic Inport)を利用してインポートの際に、`{ssr: false}` を第二引数に渡すとSSRされず、React単体のようにクライアントでのみレンダリングされます。

```jsx
import dynamic from 'next/dynamic'
 
const Sample = dynamic(
  () => import('../components/Sample'),
  {
    ssr: false,
  }
)
 
export default function Page() {
  return (
    <div>
      <Sample />
    </div>
  )
}
```
## 参照

- https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic
Gitこわい②～トラブルシューティング～

# はじめに
Gitって初めて使うときすごく怖くないですか？
僕は怖かったです。
全ての操作がよく分からないし、他の人の作業の邪魔になるようなことをしてしまったらどうしよう・・・と毎日怯えていました。

そんな人のためにこの記事では、
「これができればGitが使いこなせる！」
とまではいかなくても、
**「Git、ちょっと怖くないかも！」**
と思えるように、
自分が実際に遭遇したトラブルや、よく遭遇するトラブルを元に、
その対処法を記載しこうと思います。
なお、Gitを利用するときの大まか流れは、[Gitこわい①](https://qiita.com/howanpin5525/items/d377222dc0da585558e2)をご覧ください。

# トラブル①：なんかブランチがぐちゃぐちゃになっちゃった！
### 対処法
作業ツリーやローカルのブランチはあなたのPCの中にしか存在しないので、
作業ツリーを変更したとしても、
ローカルブランチにコミットしたとしても、
ローカルブランチに別のブランチをマージしたとしても、
とにかくプッシュしない限りは、リモートブランチがぐちゃぐちゃになって、他の人に迷惑がかかって取り返しのつかないことになる...ということはないです。
（自分は最初、プルするときもマージするときもビクビク怯えていました。）

もし、「なんかマージしたら作業ツリーがぐちゃぐちゃになっちゃったよ～」というときは、
「この状態に戻したい！」というコミットを選んで、リセット（種類：ハード）を行えば、とりあえず元に戻ります。
ただし、作業ツリーの変更内容とローカルブランチにコミットした内容も消えてしまうので注意してください。

作業ツリーやローカルブランチに保存しておきたい変更内容がある場合は、
スタッシュしておくか、対象のファイルだけ別フォルダに保存してバックアップを取っておくと安心です。

また、リセット先のコミットを選ぶときは、リモートブランチの最新コミットよりも前のコミットは選ばない方がよいです。
プッシュしたときに先祖返りしてしまう可能性があるためです。

# トラブル②：detached headって出てきた！
「Gitを色々いじってたら、detached headって表示されちゃった！」ということが、
（特に最初のうちは）よくあります。
### 対処法
ありがちなのが、**「特定のコミットIDを直接指定してチェックアウトを行う」** という操作でdetached headになってしまうケースです。
チェックアウトは必ずブランチ単位で行うようにしましょう。

この状態で作業してコミットしていくと、ブランチが存在しない状態でコミットを積み重ねていくことになります。これは土台がない状態で石を積み上げているようなもので、せっかく積み重ねてきたコミットが無駄になってしまう可能性があります。

detached headになってしまったら、
ブランチを指定してチェックアウトを行えば元に戻ります。
作業ツリーに特に変更がない場合は、最新のコミットを指定してリセットしてもよいです。
detached headがどういう状態なのかという説明は、補足に記載しておきます。

# トラブル③作業中に他の人が作業中のリモートブランチにプッシュしちゃった！
### 対処法
これはトラブルでも何でもないのですが、最初のうちは焦りますよね。
自分がプッシュを行う前に、プルを行えば大丈夫です。
もし作業中の変更箇所と、他の人がプッシュした箇所が被ってしまっている場合は、
プルした後に競合を解決すればOKです。

# 補足：detached headとは
detached head状態を理解するには、逆にdetached headではない状態（正常な状態）を理解すると早いです。

**正常な状態**
headがブランチを指し、ブランチがコミットIDを指している状態です。
>head　→　ブランチ → コミットID

※headというのは、あなたの現在地を指すものです。
これに対して、detached headは以下のような状態です。

**detached headな状態**
headが直接コミットIDを指している状態です。
>head　→  コミットID

この状態でコミットを積み重ねてしまうと、積み重ねたコミットを記録するブランチがないため、ブランチを変更したタイミングで全てのコミットが無かったことになってしまいます。
コミットを行う際は、detached head状態になっていないことを確認するようにしましょう。
KiCadの便利なツール KiRI (査読レビューツール)

KiCadの設計データをレビューするときに便利なツールについてのメモ

KiCadの回路図とプリント基板図の差分について視覚化して査読レビュー時に役立つツールの所在について以下に記載する。

# ツール名
Kicad Revision Inspector (KiRI)

# 公開場所・インストール方法
https://github.com/leoheck/kiri

# 公開時のアナウンス
https://forum.kicad.info/t/previous-kdiff-is-kiri-now/32031

# 他の例
https://github.com/Gasman2014/KiCad-Diff
Gitこわい①～Git利用の基本的な流れ～

# はじめに
Gitって初めて使うときすごく怖くないですか？
僕は怖かったです。
全ての操作がよく分からないし、他の人の作業の邪魔になるようなことをしてしまったらどうしよう・・・と毎日怯えていました。

そんな人のために、
この記事では、Gitを利用して作業をする上での、大まかな流れをまとめてみました。
Gitを使っているけど正直何をしているのかよく分からない初心者の方や、
研修で一通り学んだけど知識の整理がついていない方など、
この記事が誰かの役に立てば幸いです。

# Git利用の流れ
Gitを利用して作業を行う際の、大まかな流れは以下の3ステップです。

**①リモート（みんなで共有している）の内容をローカル（自分のPC）にコピー**
↓
**②ローカルで作業**
↓
**③リモートにローカルの作業内容を反映**

それぞれのステップの具体的な内容は以下です。
### ①リモートの内容をローカルにコピー
リモート、つまりみんなで共有しているリポジトリと同じ環境を、ローカル環境（あなたのPC）に作ります。
>ローカルリポジトリの作成：リモートリポジトリをローカル環境にクローンする
↓
ローカルブランチの作成：リモートリポジトリのブランチと同じブランチをローカルに作成する

リモートリポジトリのブランチと同じブランチをローカルに作成し、まずはそのブランチに変更をコミットしていくことで、安全に作業を進めることができます。

### ②ローカル環境で作業を行い、ローカルブランチにコミットする
リモートと同じ環境ができたので、ローカルで作業をしていきます。
>作成したローカルブランチにチェックアウトした状態で、作業を行う
↓
変更したファイルをステージング（インデックス）に上げる
↓
コミット：ステージング（インデックス）に上がっているファイルをコミットする。コミットすると、ローカルブランチに変更が反映される。

もし仮に作業中ミスをしてしまったとしても、この時点ではリモートリポジトリに影響はありません。
（例）
ブランチA（リモート）
↓
ブランチA（ローカル）を作成
↓
ブランチA（ローカル）に変更内容をコミット
・・・この時点で、ブランチA（リモート）は何も変更されてない。

分からないことがあれば自分で調べたり、先輩に確認したりして解決しましょう。
とにかく、
「**よく分からないままプッシュ**」
だけはしないようにすれば、ひとまず安心です。


### ③リモートにローカルの作業内容を反映
作業が完了したら、リモートに作業内容を反映させましょう。
このとき、作業中に他の人がリモートブランチに変更を加えている可能性があります。
必ずプルを行い、リモートブランチの最新の状態をローカルブランチに取り込んでおきましょう。
>プッシュ：ローカルブランチをリモートにプッシュする。そうすると、ローカルブランチの変更がリモートブランチに反映される。

可能であればプッシュを行う前後に、同じブランチで作業をしている人に報告を行うとより安心です。
これが一連の流れです。

# おわりに
始めてGitを使うときは、
「なんか分からないことだらけだ！」
「なんかブランチがおかしくなった！」
ということが多々あると思います。
そんなときは慌てず、
自分が一連の流れの中の、どの段階の作業をしているのかを意識してみてください。

実務経験１年の自分が、実際に遭遇して困ったトラブルとその対策については、
Gitこわい②に記載しています。
よろしければ併せてご覧ください。