OmniAICreator/Qiita-1.07M huggingface dataset:
3/14に開催されたJAWS-UG札幌で初LTしてきました!

# はじめに
2025年3月14日(金)にJAWS-UG札幌が開催され、参加&初LTしてきました。
拙い説明や資料ではありましたが、聞いてくださった方々や運営の方々、ありがとうございました！

今回、初めての社外LTということで、せっかくなので記録として残しておこうと思います。
LTやってみたいけど、迷っている方の参考になれば幸いです。

#### ↓参加したJAWS-UG札幌

https://jawsug-sapporo.connpass.com/event/343883/

#### ↓登壇資料

<script defer class="speakerdeck-embed" data-id="07a5e37b3f2049798d6b2e8d4024dc5c" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

# まとめ
### 「やらぬ後悔よりやる後悔」

私は、LTへの応募を考えていた時、以下のような不安がありました。(マイナス思考)
- コミュニケーションが得意でない自分が、知らない人の前で発表することができるのか...
- 自分が発表できる内容なんて、たかが知れているし、誰の役にも立たない...
- 経験豊富な方たちの中で、自分なんかが...

ただこのままでは何も変ないと思い、以下にマインドを変えてみました。
- 人前で発表する練習の機会として捉える
- アウトプットを通じて自身の理解を深める
- 経験を得ることに主眼を置く

本来は、他の聞き手のことなども考えるべきですが、卑屈になってても前に進まないので、いっそ自己中になって割り切りましたw

そして実際に発表したところ、とても緊張はしたのですが、やって良かったと思ってます！
確かに、発表後にあーすればよかった、とか後悔があるのも事実です。しかし、終わったら達成感もありますし、なにより次への挑戦に繋がったと思ってます。

### 迷ってる人は、やって後悔するのが良いと思います！ぜひ、後悔して次に活かしましょう！

### お近くのJAWS-UGに参加いただければ、初心者だろうが温かく迎えてもらえます！
---
#### ※以下からは、アウトプットを初めてLTまでの流れや心境を残しておきます。

# 1. 勉強会(JAWS-UG札幌)参加開始
元々AWSに興味があり、認定資格をちまちまと勉強していました。JAWS-UGのことも知っていましたが、参加には至っていませんでした。

去年の10月頃、期も変わるタイミングで、本業の方ではモチベーションを維持できず、何か新しいこと勉強したいなーと漠然と考えていました。

その一歩として、生成AIなどを調べはじめ、せっかくだからアウトプットしようと思い、Qiitaに投稿を始めました。

11月頃、Qiita投稿にも少し慣れたので、次の段階として、オンラインだけでは無く、リアルな勉強会に参加してみようと考えました。正直、業務だけでは「井の中の蛙大海を知らず」状態だったので、もっと視野を広げたいなーと思っていました。

そこでたまたま下記のJAWS-UG札幌を勉強会が目に入り、参加させていただきました。

https://jawsug-sapporo.connpass.com/event/330317/

# 2. LTに応募
そこからJAWS-UG札幌の勉強会に数回参加させていただく中で、せっかくだからLTにも挑戦したいなと思い始めました。何か崇高な目的があったわけではないのですが、年が明けて2025年の目標とかを考えているうちに、ふと挑戦したくなりましたw

しかし、まとめにも書きましたが、コミュ障のせいでとてつもなく腰が重い！
丁度、今回参加したJAWS-UGがLTを募集していまして、数回、参加した感じとしては、誰でもウェルカム！という良い雰囲気だったので、思い切ってLTに応募してみることにしました。

この時点で、あまりLTネタは考えてなかったですw

# 3. LT準備
### ネタを考える(2/15~2/28頃)
ネタを考えましたが、本業がフロントエンドということもあり、なかなか語れるねたがないぞ...となり、悩みましたが。個人で気になって勉強していたAmplify系をネタにすることにしました。

### 資料を作り始める(3/9~3/13頃)
幸い、Qiitaにネタは投稿済みだったので、一から調べるというよりは、ブラッシュアップする感じでした。ただこれが意外と難しく、結構葛藤がありました。まだ会社の人に見せるならある程度、どんな人たちか、どのような情報を求めているか。が予測つきますが、社外となると塩梅が難しい...

#### 資料作りの難しさ
資料作成中、以下のような困りごとがありました。
- 話したいことを全部書いていくとパワポがすごい枚数になる...
- 情報の粒度を何処まで細かくするか、荒くするか
- 自己紹介、何書けばええねん

#### 意識したこと
上記を踏まえて、以下を意識して資料を準備するようにしました。
- 先人たちの資料を漁って参考にする
- 何を伝えたいのか、テーマを絞る
- 資料に情報を入れ過ぎない
- 絵や図を多用して、情報を抽象化する

:::note info
#### Tips：社内でまずは発表してみる
今回は、発表の要領や時間間隔を掴むために、プロジェクトの中で発表させてもらい下記を得られました。
- 発表の時間感覚をつかめる
- フィードバックを得られる

まだ慣れていない方やある程度チーム内で発表できる雰囲気があるなら、ぜひやってみる良いと思います！
:::

# 4. Let's 登壇！
めちゃくちゃ緊張して、手汗がすごかったですが、無事に乗り越えました！

### 反省点
- 資料にまとまりがなかった&発表の落としどころが弱く、結局何が言いたかったのか分かりにくい
- 資料を見ながら話し過ぎていたので、もう少し聞き手見ながら話せればよかったです。


これらの反省点は、次回に活かして、またどこかで再チャレンジしたいと思います！

# 5. 最後に
今回の登壇を通じて、非常に貴重な経験をさせていただきました!
改めてありがとうございました！

懇親会でも様々な方とお話させていただき、また１つ知見が広がりました。なかなか他のSEの方とお酒を飲みながら話すってないんですよね...懇親会も込みで、とても楽しかったです！

いつか自分のアウトプットが他の誰かの助けになると信じて、これからもアウトプットを心がけていきたいと思います!

--- 

尚、私は懇親会で知りましたが、札幌にも初心者支部があったようです。
(先にそっちで挑戦すればよかったかも...)

AWS関連でLTしてみたいけど、なかなか勇気がきっけかけが無い方は、こちらから参加してみてはいかがでしょうか。

https://awsbeginners-sapporo.connpass.com/event/
初心者がFlutterでアプリを作成する際に利用したライブラリ, サイト

# はじめに
友人から「ホーム画面のウィジェットでタイムラップを記録できるストップウォッチみたいなアプリが欲しい」と言われたので1人月ほどで作成してみました。Flutter初心者です。

最初はReact Nativeで作成しようと思いましたが、「CSSの設定がOSによって違いすぎる」「求めているライブラリが少なすぎる」などの理由で今回は「ライブラリが多そう」、「ネイティブよりは早く実装できそう」という理由でFlutterで作成しました。
※React Nativeのほうがビルド。ホットリロードなどの観点から見れば良かったです。Expoすごく便利。Flutterでも使えるようにしてほしい。

今回作ったアプリはこんな感じです。
ウィジェットに記録した時間を一覧で確認,編集ができる かつ 統計情報を管理できるアプリです。

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848371/7f278246-2466-44bd-908f-e7fa152a5836.gif)

作成はしたものの、次回改修するときに絶対諸々忘れそうなので、備忘録がてら、作成に当たり利用したサイト。ライブラリをざっくり書き出していきます。

※Flutterライブラリ[home_widget]は利用していません。widget自体の処理はネイティブで実装して、データのやり取りはmethod channel利用してFlutter側で処理しています。

## 【サイト】

### pub.dev
https://pub.dev/

Flutter 公式ライブラリリポジトリ。

ライブラリを探すときは基本ここで探す。

ただし、ここに書いている情報が全てではないので、githubを見るなり、Qiita記事を読みながら実装していく。

### flutter awesome

https://flutterawesome.com/

Flutterに関するライブラリ、ツールなどをまとめたサイト。
ライブラリだけでなく、仕様などの記事も掲載されているので近況を確認しやすい。

### flutter gems

https://fluttergems.dev/

Flutterライブラリのカテゴリー別インデックスサイト。
pub.devで探しにくい場合に役立つ。
各ライブラリのサンプル画像がカテゴリ別に確認できるため、非常に利用しやすい。

## 【ライブラリ】

### icons_plus

https://pub.dev/packages/icons_plus

様々なアイコンを提供するライブラリ。
アイコンに統一感が欲しかったので、ライブラリでテーマ管理。

### modal_bottom_sheet

https://pub.dev/packages/modal_bottom_sheet

ボトムシートを簡単に表示できるライブラリ。
標準のものよりはこっちのほうが使いやすく、改修しやすと記載があったので、こちらを採用。
何が使いやすいかはあまり深く考えず、利用してます。

### hive

https://pub.dev/packages/hive

軽量なNoSQLデータベース。
データベースと入っているが、DB領域ではなくSharedPreferencesに登録されるらしい。
設定項目などはhive形式で管理するのが良さそう。
データを蓄積して表示する系のものには向いてない。

### fl_chart

https://pub.dev/packages/fl_chart

グラフを描画するためのライブラリ。
Flutterでグラフを表示するならこれが一番いい。
折れ線、円、線形など様々なグラフに対応していてUIもアニメーションがデフォルトで動作するから見栄えがすごくいい。

### Drift

https://pub.dev/packages/drift

永続化のためのORMライブラリ。
AndroidでいうところのRoom DB。
FlutterでORMを利用するならDrift一択なのかもしれない。
SQ Liteも存在はするが、個人的にはSQLを書きたくはないのでDB利用するのならDrift一択。


### drift_flutter

https://pub.dev/packages/drift_flutter

DriftをFlutterで利用するためのライブラリ。
実はDriftだけでは動かない。
他にsqlite3_flutter_libs, path_provider, path, drift_dev, build_runnerも必要になる。

こちらの方の記事が参考になりましたので、利用する場合はこちらご残照ください。
https://qiita.com/team7_403_poppin/items/b6eb8a15ef716834f2e5


### sqlite3_flutter_libs

https://pub.dev/packages/sqlite3_flutter_libs

sqlite3を利用するために必要なライブラリ。
Drift用

### path_provider

https://pub.dev/packages/path_provider

デバイスのファイルシステム上の一般的なディレクトリへのパスを取得するためのライブラリ。
Drift用

### path

https://pub.dev/packages/path

パス操作を簡潔にするライブラリ。
Drift用

### card_swiper

https://pub.dev/packages/card_swiper

カード型のスワイプUIを提供するライブラリ。
スワイパー系のライブラリで一番早く爆速で実装できた。
いい感じに横並びさせたいときはこれを使うと良き。

### intl

https://pub.dev/packages/intl

多言語化のためのライブラリ。
言語というより、今回はDatetime型を利用するために導入。

### slide_switcher
https://pub.dev/packages/slide_switcher

スライド式のスイッチUIを提供するライブラリ。
tabほどではないが、ボダンを切り替えて表示する系のUIとして便利。
このライブラリはpub.devでは見つけられなくてflutter gemsで発見した。


# 最後に
Androidの知識があったのでなんとか作成にこじつけることができましたが、かなり大変と感じました。
あと、作成にはAIアシスタントガッツリ利用しました。
知見のない言語で開発するときに大変頼りになる存在です。もうAIアシスタント無しでは開発無理と言っても過言でないかもしれない…
Gemini以外でも無料でAIアシスタント使えるようにしてほしいと願望をこぼしておきます。

最後に、コミケアプリとか作ってみたい…(言うだけならタダ)
GETとPOSTどっち使えばええねんに決着をつけたい

# はじめに
タイトル通り、GETとPOSTどっちやねん問題に決着つけたいです。
なんとなくではずっと理解してるけど、たまに「これはGETでええんか？こっちは情報更新行ってるからPOSTか？」と悩んでしまいます。
だから、今日はっきりと書き記してもう今後迷わないように決着をつけようと思います。

# 前提事項
PUTやらDELETEやら他にもいろいろあるけど、今回はGETとPOSTに限定します。
また、二つの細かい違いというよりは、「使い分け」の部分に焦点を置きます。

# 結論
結論から書くと、下記の通り私は認識しました。

- GET
  - リソースの取得のみ行う場合
  - パラメータに機密情報が含まれない場合
- POST
  - パラメータに機密情報が含まれる場合
  - 情報の登録や更新を行う場合
  - 送るデータ量が多い場合
    (GETはURLにパラメーターを含むため、2048文字が限界。POSTは制限なし)

#### 何が機密情報なのか
基本的に、名前や電話番号、パスワードの個人情報がそうです。
商品IDなどは単なる物を対象にしたIDなので該当しませんが、個人IDは個人を特定するものなので該当します。

# なぜ迷うのか
そもそもなぜ迷うのかと言うと、どっちを使っても技術的にはある程度同じことができてしまうからです。
キャッシュがどうとか言われてもいまいちピンとこないし、とりあえずPOSTにしとけばええんちゃうとなってしまいます。
リソースの取得はGETと言われても、じゃあ取得してかつ情報の更新も少し行う時はどっちがいいのともなります。例えば、リソースを取得したときに取得日時を登録する時とかです。
だから、定義をしっかりと確認し、メリットデメリットをしっかり理解することが、正しく使い分けるために必要です。

# 定義
HTTPメソッドは、RFCという文書で定義されています。
要点を抜粋してみます。

### GET
>The GET method requests transfer of a current selected representation for the target resource.

「GETメソッドは、webサーバー上のリソースに対して、現在の状態の転送のリクエストを要求する。」と書いてます。

>When information retrieval is performed with a mechanism that constructs a target URI from user-provided information, such as the query fields of a form using GET, potentially sensitive data might be provided that would not be appropriate for disclosure within a URI (see Section 17.9). In some cases, the data can be filtered or transformed such that it would not reveal such information. In others, particularly when there is no benefit from caching a response, using the POST method (Section 9.3.3) instead of GET can transmit such information in the request content rather than within the target URI.

ここでは、機密情報のことについて書いてます。
URIに含むには適していないデータが含まれる場合があり、その場合はデータのフィルタリングや変換でデータを変えるか、キャッシュするメリットがない場合はPOSTを使うと書いてます。

＃おわりに
今回は、何気なく使ってたHTTPのメソッドの定義を確認しました。
他にも何気なく使ってるけど理解は曖昧なものなどあると思うので、しっかり公式定義を確認することを大事にしていきたいと思います。

間違ってるところなどあればご指摘いただけると幸いです🙇‍♂️
連載 [第3回] :ベトナムのエンジニアは優秀なのに、なぜプロジェクトは失敗するのか？

連載 [第3回] :ベトナムオフショア開発の成功術：正しく理解して成功へ！
### **ベトナムのエンジニアは優秀なのに、なぜプロジェクトは失敗するのか？**  

こんにちは、バイナリテックのイサムです！  
本シリーズでは、日本企業がベトナムのオフショア開発を成功させるためのポイントを深掘りしています。  
今回は、「ベトナムのエンジニアは優秀なのに、なぜプロジェクトが失敗するのか？」というテーマでお話ししたいと思います。  

---  

## **ベトナムのエンジニアは本当に優秀なのか？**  
結論から言うと、**ベトナムのエンジニアは確かに優秀**です。  
私自身、多くのベトナムの開発チームと仕事をしてきましたが、技術力の高いエンジニアが多いと感じています。  

彼らの強みは以下のような点にあります。  
✅ **アルゴリズムやプログラミングスキルが高い**  
✅ **最新の技術を積極的に学ぶ姿勢がある**  
✅ **コミュニティでの情報共有が活発**  

特に、若いエンジニアが多く、新しい技術に対する適応力が高い点は大きな魅力です。  
では、なぜそんな優秀なエンジニアがいるのに、日本企業のオフショア開発プロジェクトがうまくいかないのでしょうか？  

---  

## **プロジェクトが失敗する3つの原因**  

### **1️⃣ 日本側の要件定義が不明確**  
オフショア開発で最も多い失敗要因の一つが、「要件の曖昧さ」です。  
日本の企業文化では、**「察する文化」** が根付いており、言葉にしなくても意図を汲み取ることが期待されることがあります。  

しかし、ベトナムのエンジニアは **明確な指示や要件がないと動きづらい** 傾向があります。  
例えば、以下のような状況が頻繁に発生します。  

❌ 「この機能は大体こんな感じで作っておいて」→ **仕様の認識ズレが発生**  
❌ 「適当に調整しておいて」→ **期待した品質にならない**  

解決策として、日本側が**仕様をより明確にドキュメント化し、具体的なアウトプットのイメージを共有する**ことが重要です。  

---

### **2️⃣ コミュニケーションのギャップ**  
言語の壁や文化の違いが、プロジェクトの進行に影響を与えることは少なくありません。  
特に、ベトナムのエンジニアは**日本人に対して「ノー」と言いづらい**傾向があります。  

例えば、こんなやり取りが起こりがちです。  

🗣 日本側：「この機能、2週間でできる？」  
👨‍💻 ベトナム側：「できます！（実は厳しい…）」  

ベトナムのエンジニアは「期待に応えたい」という思いが強いため、**無理なスケジュールでも「できる」と答えてしまう**ことがあります。  
その結果、納期直前に「やっぱりできませんでした」となり、プロジェクトが炎上するケースも…。  

解決策としては、  
✅ **「本当にできるのか？」を掘り下げて確認する**  
✅ **進捗をこまめにチェックし、小さなマイルストーンを設定する**  
などの工夫が必要です。  

---

### **3️⃣ 品質管理の甘さ**  
「とりあえず動けばOK」という考え方が、日本とベトナムでは異なることも、プロジェクト失敗の一因です。  
ベトナムの開発現場では、**単体テストやコードレビューの重要性が日本ほど浸透していない**ことがあります。  

そのため、納品されたコードを確認すると…  

⚠ **バグが多い**  
⚠ **リファクタリングがされていない**  
⚠ **仕様と微妙にズレている**  

といった問題が発生しやすいです。  
これを防ぐためには、  
✅ **テストやレビューの基準をしっかり定める**  
✅ **品質管理を意識した開発プロセスを導入する（例：CI/CDの活用）**  
ことが重要です。  

---  

## **まとめ：成功するためのポイント**  
ここまでのポイントを整理すると、**プロジェクトを成功させるためには、以下の3つが重要**です。  

🔹 **要件をできるだけ明確にし、ドキュメント化する**  
🔹 **進捗管理を徹底し、無理なスケジュールを防ぐ**  
🔹 **品質管理の文化を根付かせる**  

ベトナムのエンジニアは優秀ですが、**日本と異なる文化や考え方を理解し、適切なマネジメントをすることが成功のカギ**です。  

次回の記事では、「成功するプロジェクトのマネジメント手法」について、より具体的なテクニックを紹介していきます！  

**「ベトナムオフショア開発のリアル」シリーズ、引き続きよろしくお願いします！**  
それでは、また次回！ 🚀
AWS Secrets Manager

## Secrets Managerとは
AWSが提供する機密情報（APIキーやデータベース認証情報など）を安全に保存、管理、アクセスできるマネージドサービス

## 機能
### 機密情報を都度取得
アプリケーションが必要なときに機密情報を取得することができ、これにより機密情報をローカルで保持する必要がなくなります

### 自動ローテーション
機密情報のローテーション（定期的な更新）を自動化でき、セキュリティリスクを低減します。Lambda関数を使用してカスタマイズ可能なローテーションポリシーも設定できます。

### 様々な機密情報を格納可能
機密情報、最大4096バイトのテキストをJSON形式で格納可能です
- データベース認証情報
- APIキー
- セキュリティトークン
- SSH鍵ペア
- TLS/SSL証明書
- AWSアクセスキー
- ユーザー認証情報
- サーバー名
- ポート番号
- IPアドレス

## まとめ
AWS Secrets Managerは、機密情報を安全に保存、管理し、必要なときにアプリケーションがアクセスできるマネージドサービスです。自動ローテーションや柔軟な情報格納が可能で、セキュリティを強化し、運用の効率化を実現します
AlmaLinuxブート用USBメモリを作る

# 環境
- Windows11PC
- USBメモリ(IOSが10GBくらいあるので16GB以上推奨）

# IOSイメージダウンロード
AlmaLinux OS 9.5 DVD ISOをダウンロードする。
サイズが大きいのでしばらく待つ。

https://almalinux.org/ja/get-almalinux/

# USBメモリの初期化（フォーマット）
rufusを使って初期化するのが楽で良さそう。
中身消えても良いことを確認の上で実施しましょう。

https://rufus.ie/ja/

rufus.exeをダウンロードして起動。
以下の通り設定。
| rufusの設定項目 | 設定 |
|:-|:-|
| デバイス | 初期化したいUSBメモリを選択 |
| ブートの種類 | ディスクまたはISOイメージ<br>ISOイメージを選択する |
| その他 | デフォルトのままで特に変更不要 |

設定できたら「スタート」を押してISOイメージモードで書き込み開始。
「このイメージはSyslinux 6.04 を使用しますが・・・」と表示されたら「はい」を選択。
データが消去される旨のメッセージは「OK」を選択。

完了するまでしばらく放置。

できたら取り出して終わりです。
【ローコードのSKE】多国語対応の手順

SKEには日本語・英語・中国語の３種類の言語を搭載しており、ログイン時に選択可能です。SKEで設定したメニューとリポジトリ定義でこの多国語機能を生かしたい場合どうすればよいか、今回はこの多国語対応のやり方を説明します。

## 言語XMLファイル
ske.warファイルをtomcatに配備した後、myApp/WEB-INF/efw/i18nフォルダに自動的に以下のようにファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/3c894d76-967e-4aec-a51d-2d2bd789479d.png)

１つファイルを開きます。ske頭文字がつけられているエントリーキーは、SKEシステム用の文字列です。これを参考して自分のアプリ用の文字列を登録したい場合、専用の頭文字を付けるキーを３つの言語ファイルに登録すればよいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/128050f6-bec5-4a98-a537-55fecd0a2fe9.png)

また、ほかの言語を追加したい場合、その言語のXMLを作成してi18nフォルダにおいて、efw.propertiesのefw.skeleton.languagesにその新しい言語を登録すれば利用できます。
## エントリーキーの利用箇所
### １、メニュー定義のタイトル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/b8792467-22a0-4139-8ce7-037a69a2ed11.png)
### リポジトリ定義の各タイトル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/45d6d263-f1c5-4134-ae5d-b5d33227a458.png)
・・・
### リポジトリ定義のボタン確認メッセージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/be6f516b-c100-4dcb-96cf-57e496579f25.png)

### リポジトリ定義のフォーマット
列挙型フォーマットに表示文字列の部分はエントリーキーで登録できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/5bde883c-f20f-4b4a-83c9-588feab75a7d.png)

### リポジトリ定義のリソース
リソースに表示文字列はエントリーキーで登録できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/b253eebd-f069-4c05-bfcf-b4ae7dff11d0.png)

### リポジトリ定義のアドオンの表示文字列
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476221/b72b400f-b4cd-410b-91f7-6fa8a0552d43.png)


以上の各表示文字列をエントリーキーで書き直して、それらエントリーキーを各言語XMLファイルに揃えて登録すれば、システムが多国語対応になります。

https://github.com/efwGrp/ske
React Router v5→v6,v7での変更点#1　SwitchとRoutes

こんにちは。

学習していたReactの動画教材の中では、画面遷移を実装する方法としてReact Routerのv5が使われていました。
ですが、動画公開時からReact Routerのアップデートが行われた影響で、v5の記法そのままでは実装できない部分がありました。

そのため備忘録の意味も込めてReact Router v5からv6, v7で記法が変更になった部分をまとめてみようと思います。

今回は**Switch**と**Routes**です。


## ページのルーティングを設定する方法
### v5の場合
React Router v5では、ページのルーティングを設定する際には`Switch`が使われていました。
```javascript:React Router v5
import { BrowserRouter, Link, Switch, Route, Routes } from 'react-router-dom';

import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

export default function App() {

  return (
    <BrowserRouter>
      <div className="App">
          <Link to='/'>Home</Link>
          <br />
          <Link to='/page1'>Page1</Link>
          <br />
          <Link to='/page2'>Page2</Link>
      </div>
      <Switch>
        <Route path='/page1'>
          <Page1 />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}
```
ですが、React Routerのv6,v7では上記の方法で記述しようとするとエラーが発生します。
```
Uncaught SyntaxError: 
The requested module '<foldername>' does not provide an export named 'Switch'
```
要約すると「Switchのモジュールは現在非対応です」と書いてありまs。

### v6以降の場合
v6以降では`<Switch>`の代わりとして`<Routes>`を使うことが推奨されています。
実際に記述すると以下のようになりました。
```javascript:React Router v6以降
import { BrowserRouter, Link, Routes, Route } from "react-router-dom";

import { Home } from "./Home";
import { Page1 } from "./Page1";
import { Page2 } from "./Page2";

function App() {
  return (
    <>
      <BrowserRouter>
        <div className="App">
          <Link to="">Home</Link>
          <br />
          <Link to="page1">Page1</Link>
          <br />
          <Link to="page2">Page2</Link>
        </div>
        <Routes>
          <Route path="" element={<Home />}></Route>
          <Route path="page1" element={<Page1 />}></Route>
          <Route path="page2" element={<Page2 />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}
```
`<Routes>`を使ったルーティングにおいては`<Route>`の書き方にも変化が生じました。

従来の`<Switch>`を用いた場合の`<Route>`ではルーティング対象のコンポーネントは`<Route>`タグで囲むことで実装しました。
```javascript:v5のRouteの実装方法
<Route path='/page1'>
  <Page1 />
</Route>
```
一方で、v6以降では**element属性としてコンポーネントを登録する**方法で実装します。
```javascript:v6以降のRouteの実装方法
<Route path="page1" element={<Page1 />}></Route>
```

### 参考：v6以降で特定のパスの下層パスへのリンクを実装したい場合
次のようなサイト構造があったとします。
```
TOP
　- Page1
    　- detailA
    　- detailB
　- Page2 
```
このようにRouteで特定のパスの配下に実際に遷移するルーティングを実装したい場合、**親フォルダと並列で子フォルダの`<Route>`を実装する**必要があります。
```
<Route path="page1" element={<Page1 />}></Route>
<Route path="page1/detailA" element={<Page1DetailA />}></Route>
<Route path="page1/detailB" element={<Page1DetailB />}></Route>
<Route path="page2" element={<Page2 />}></Route>
```
※一部資料では`<Route>`を入れ子構造にすると親子関係を実装できるという文献もありましたが、この方法だと遷移は実現できませんでした。

<br>


参考

https://zenn.dev/everyday_newbie/scraps/37e2ac522ea6c6

## 結論
慣れてしまえばそれほど難しくはない実感でした。
今後は`<Route>`を使うようにしましょう。

### 参考文献

https://zenn.dev/kazu1/articles/2c7883e6de22a9

https://dev.classmethod.jp/articles/react-router-5to6/

https://kinsta.com/jp/knowledgebase/attempted-import-error-switch-is-not-exported-from-react-router-dom/

https://qiita.com/shotaqiita/items/4ac114cba5869a664fb4
OpenMediaVault導入後にWi-Fiを使いたい

# 環境
- Raspberry Pi 4 model B 8G
- SDカード 64GB
- 外付けHDD 500GB

# OSのインストール
1\. [Raspberry Pi Imager](https://www.raspberrypi.com/software/)のインストール
2\. 「Raspberry Pi OS (Legacy 64-bit) Lite」のインストール
　※OpenMediaVaultはFullバージョンに対応していない

# OpenMediaVaultのインストール
1\. パッケージ情報を更新
　`sudo apt update`
2\. システム上のパッケージを更新
　`sudo apt upgrade`
 3\. OpenMediaVaultをインストール:
　`sudo wget -O - https://github.com/OpenMediaVault-Plugin-Developers/installScript/raw/master/install | sudo bash`

# OMV側のネットワークインターフェース設定を変更する
1\. `sudo omv-firstaid`
2\. `1. Configure network interface`を選択
3\. `wlan0`を選択
4\. Wi-Fiの設定

# 参考
[OpenMediaVaultのインストール](https://www.youtube.com/watch?v=8uXtosrf53k)
[Wi-Fiの設定](https://lambda-tonight.hatenadiary.jp/entry/2021/01/02/220625)
C#(asp.net)でDapperを利用してみる

# C#(asp.net)でDapperを利用してみる

[C#(asp) docker環境でmigrationを利用する](https://qiita.com/ziima/items/7b557d71fce7debac6ec)の続き

## table of contents

1. 依存関係を設定する
1. Program.csをスコープを設定する
1. データを利用する

## 1. 依存関係を設定する

```terminal
% dotnet add package Dapper
% dotnet add package System.Data.SqlClient
% dotnet add package Npgsql
% dotnet add package Microsoft.Data.SqlClient
```

```WebApi.csproj
<PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Dapper" Version="2.1.66" />
    <PackageReference Include="Microsoft.Data.SqlClient" Version="6.0.1" />
    <PackageReference Include="Npgsql" Version="9.0.3" />
    <PackageReference Include="System.Data.SqlClient" Version="4.9.0" />
  </ItemGroup>
</ProjectGroup>
```

## 2. Program.csをスコープを設定する

```Program.cs
using System.Data;
using Microsoft.Data.SqlClient;
using Microsoft.Extensions.DependencyInjection;
using Npgsql;

builder.Services.AddScoped<IDbConnection>(provider =>
{
    var connectionString = "Server=postgresql_container;Port=5432;Database=example;User Id=example;Password=example;";
    return new NpgsqlConnection(connectionString);
});
```

## 3. データを利用する

```Repository.cs
using System.Data;
using Dapper;

namespace BugReport.Repository
{
    public class BugReportRepository
    {
        private readonly IDbConnection _connection;

        public BugReportRepository(IDbConnection connection)
        {
            _connection = connection;
        }

        public BugReportModel? GetOneById(int id)
        {
            return _connection.QueryFirstOrDefault<BugReportModel>("SELECT id, uuid, title FROM bug_report WHERE id = @id", new { id = id });
        }
    }
    public class BugReportModel
    {
        public int id { get; set; }
        public Guid uuid { get; set; }
        public string title { get; set; }
    }
}

```

定義したRepositoryのScopeを定義する。

```Program.cs
using BugReport.Repository;

builder.Services.AddScoped<BugReportRepository>();
```
Qiita の記事を Astro の Content Layer で扱う astro-qiita-loader のご紹介

## はじめに

Astro v5 から導入された [Content Layer](https://astro.build/blog/future-of-astro-content-layer/) により、外部コンテンツが Astro 上でより簡単に扱えるようになりました。

[astro-qiita-loader](https://github.com/t0yohei/astro-qiita-loader) は、[Qiita の API](https://qiita.com/api/v2/docs) から取得した記事を Astro の Content Layer で扱えるようにするローダーです。これにより、Qiita の記事を他のコンテンツと同じように統一的に管理・表示することが可能になります。

## インストール方法

npm やその他のパッケージ管理ツールを利用して簡単にインストールできます。

```shell
npm install astro-qiita-loader
```

## 使用方法

### 1. 設定ファイルの作成

まず、`src/content/config.ts` に以下のような設定を記述します。

```typescript
import { qiitaLoader } from "astro-qiita-loader";

export const collections = {
  qiitas: qiitaLoader({
    url: "https://qiita.com/api/v2/items",
    authToken: "your_qiita_api_token", // オプション
  }),
};
```

#### authToken の設定について

authToken の設定はオプションです。
Qiita の API には以下の制限があるため、用途に応じて authToken オプションを設定してください。

- アクセストークンあり：1000回/時
- アクセストークンなし：60回/時

アクセストークンは以下の url から発行可能です。
https://qiita.com/settings/tokens/new

### 2. コンポーネントでの使用

Astroコンポーネントで次のように使用できます。

```tsx
---
import { getCollection } from "astro:content";

const qiitas = await getCollection("qiitas");
---

<ul>
  {qiitas.map((qiita) => (
    <li>
      <a href={qiita.data.url} target="_blank" rel="noopener">
        {qiita.title}
      </a>
    </li>
  ))}
</ul>
```

以上の実装で、Qiita の記事を Astro の Content Layer で扱えるようになります。

## 実装サンプル

astro-qiita-loader の実装サンプルと Demo ページを公開しています。
実際に利用する際は是非ご参考にください。

- [実装サンプル](https://github.com/t0yohei/astro-qiita-loader/tree/main/demo)
- [Demo ページ](https://astro-qiita-loader-demo.netlify.app/)

## おまけ

Qiita の記事を Content Layer で扱うもう一つの方法として、Qiita の RSS フィードを [@ascorbic/feed-loader](https://github.com/ascorbic/astro-loaders/tree/main/packages/feed) を用いて利用するやり方があります。

このやり方は他の RSS フィードと同様のライブラリを用いることができるという利点がある一方、[Qiita の RSS フィードの制約により新着 4 件しか記事を取得できない](https://github.com/increments/qiita-discussions/discussions/204)というデメリットがあります。

feed-loader を利用するやり方については、[Astro の Content Layer を使って Zenn や Qiita に投稿した記事をブログ一覧に表示する](https://zenn.dev/t0yohei/articles/8597400a205b1a) という記事で紹介しておりますので気になる方はそちらもご覧ください。

## まとめ

astro-qiita-loader を使用することで、以下のメリットが得られます。

1. Qiita と Astro のコンテンツを統一的に管理
2. Content Layer の強力な機能を活用可能
3. 簡単な設定で導入可能

Astro でブログを構築している方で、Qiita の記事も合わせて表示したい場合は、ぜひ astro-qiita-loader を試してみてください。

## 参考リンク

- [astro-qiita-loader GitHub](https://github.com/t0yohei/astro-qiita-loader/blob/main/README-ja.md)
- [Astro Content Collections 公式ドキュメント](https://docs.astro.build/ja/guides/content-collections/)
プログラム入門：プログラミング初心者向け！Go言語でFizzBuzzを作ってみた

## はじめに

FizzBuzzは、プログラミングの基本的な課題の一つとして知られています。

この記事では、Go言語を使ってFizzBuzzを実装し、その基本的な考え方を解説します。

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

Go言語を学び始めたばかりの方が基本的な構文や制御フローに慣れるための題材として、FizzBuzzは非常に適しています。

特に、`for`ループや`if`文の使い方を学ぶのに最適な例であり、シンプルながらも実際のプログラミングに必要な考え方を学べます。

## FizzBuzzとは？

FizzBuzzのルールは以下の通りです。

1. 1から指定した数（例：100）までの数字を順に出力する。
2. その数が3で割り切れる場合は"Fizz"と表示する。
3. その数が5で割り切れる場合は"Buzz"と表示する。
4. その数が3と5の両方で割り切れる場合は"FizzBuzz"と表示する。
5. それ以外の場合はその数をそのまま表示する。

## Go言語での実装

以下にGo言語でFizzBuzzを実装するコードを示します。

```fizzbuzz.go
package main

import "fmt"

func main() {
    for i := 1; i <= 100; i++ {
        if i%3 == 0 && i%5 == 0 {
            fmt.Println("FizzBuzz")
        } else if i%3 == 0 {
            fmt.Println("Fizz")
        } else if i%5 == 0 {
            fmt.Println("Buzz")
        } else {
            fmt.Println(i)
        }
    }
}
```

## コードの解説

1. `for`ループを使って1から100までの数を順番に処理します。
2. `if`文を使って条件分岐を行います。
   - `i%3 == 0 && i%5 == 0` の場合は "FizzBuzz" を出力。
   - `i%3 == 0` の場合は "Fizz" を出力。
   - `i%5 == 0` の場合は "Buzz" を出力。
   - それ以外の場合は数値そのものを出力。

## 実行方法

このプログラムを実行するには、Goがインストールされている環境で以下の手順を行います。

1. 任意のディレクトリに`fizzbuzz.go`という名前でファイルを作成し、上記のコードを記述します。
2. ターミナルまたはコマンドプロンプトを開き、ファイルのあるディレクトリに移動します。
3. 以下のコマンドを実行します。

```sh
go run fizzbuzz.go
```

これにより、FizzBuzzの出力がターミナル上に表示されます。

**実際のターミナル画面**

![Screenshot 2025-03-16 at 19.46.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/aa2f1478-b004-41cf-8189-9710516a8acc.png)

## まとめ

Go言語を使ったFizzBuzzの実装はシンプルで、基本的な制御構文（`for`ループ、`if`文）を理解するのに適しています。Goのシンプルな構文を活かして、短く明快なコードを書くことができます。

:::note info
***次のステップとして、関数化してより汎用的なFizzBuzzを作成することも考えられます。***
:::

例えば、数の範囲を変更できるように関数を作るのも良い練習になります。

**ぜひGo言語でのFizzBuzzを試してみてください！**
FTPサーバーを触ってみる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/e23f5eb5-7273-4b80-8ac0-a44a508b6901.png)

こんにちは！ 
Linux環境でFTPサーバーの構築を試してみました。その手順と結果を共有します！

# FTPとは
FTP（File Transfer Protocol）は、ネットワーク上でファイルを転送するための通信プロトコルの一つです。主にサーバーとクライアント間でファイルのアップロードやダウンロードを行う際に使用されます。

# FTPの仕組み
通信には 2つのポート を使用します。

##### コマンド（制御）接続（ポート 21）
ユーザー認証やコマンドの送受信を行う。
##### データ接続（ポート 20 または動的なポート）
ファイルの送受信に使われる。

# FTPの通信モード
FTPには アクティブモード と パッシブモード の2つの通信モードがあります。
##### アクティブモード
クライアントがサーバーにポート21で接続し、データ転送用のポートを通知。
サーバーがポート20を使ってクライアントの指定ポートに接続し、データ転送を行う。
##### パッシブモード
クライアントがサーバーにポート21で接続し、「パッシブモードを使用する」ことを要求。
サーバーが転送用のランダムなポートを開放し、クライアントに通知。
クライアントが通知されたポートに接続し、データ転送を行う。

# 実際にLinuxに試してみる
では、FTPを実際にローカル環境で試していきたいと思います。
今回は、ローカルで作成した下記のHTMLをFTPで移動して、WEBサーバにて表示されるようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/b5eb4934-68a8-4219-bf87-a4fa2baca9a5.png)
### **前提条件**

- Ubuntuサーバーが動作している
- Apache（Webサーバー）がインストールされている
- `192.168.～.～` をUbuntuサーバーのIPとする

## 1. FTPサーバーのインストール

まずはvsftpdをインストールします。
```bash
sudo apt update
sudo apt install -y vsftpd
```
## 2. 設定ファイルの編集

FTPの設定をカスタマイズするために、/etc/vsftpd.confを編集します。 
権限の設定やどのファイルを共有のサーバーとするかの設定を書いています。
```ini
local_enable=YES
write_enable=YES
allow_writeable_chroot=YES
local_root=/var/www/html
force_dot_files=YES
```

## 3. FTP接続の確認
クライアントからFTP接続を試みます。
ローカルからは以下をエクスプローラーに入力することで接続できます。
```
ftp:<IPアドレス>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/80cc425f-9092-4c34-ad6b-01bae487baf7.png)

ここで認証情報を入力することでファイルサーバーにログインできました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/5c166029-52b8-4617-83f3-66379f766533.png)

ここにHTMLファイルを格納してみます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/0ba6fe05-e8d3-410b-82a7-b5361aa6b500.png)

これでブラウザをアクセスしてみます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1812041/a6bfaaf4-b488-4937-8528-803781cf33df.png)

## まとめ
以上で、UbuntuにFTPサーバーを導入し、`/var/www/html`配下のファイルを直接操作できるように設定しました。今回はセキュリティを全く考慮していません。
必要に応じてSSL/TLSの設定や、SFTPの導入も検討してください。
Iterator Helpers へ自作メソッドを追加（length, includes）

こんにちは。
Iterator Helpers のおかげで、簡潔かつメモリ効率も良く書けるようになりましたので、自作メソッドも追加しました（```length()```、```includes()```）。

https://qiita.com/silane1001/items/d98d3b71e6a4a1154f51


#### length
```js
Iterator.prototype.length = function() {
  let count = 0;
  this.forEach(_ => count++);
  return count;
};
```
#### includes
```js
Iterator.prototype.includes = function(item) {
  return this.some(v => v === item);
}
```
エディタが node_modules を認識しない？コンテナ開発でハマる罠と最速リカバリー術

22歳の大学生です、2025/4月から就職してエンジニアをやります

- サッカー好き
    - 国内サッカー：柏レイソルサポーター
    - 海外サッカー：プレミア、セリエを観戦 Roma推し
- ラノベが欲しい
- 昇降デスクも欲しい
- 電動シェーバーの快適さに驚いている

最近はNest.js × Next.jsで個人開発を進めています
やらなきゃいけないことがたくさん、、、

## 本記事のあらすじ
個人開発を進めているプロダクトで起きたことです。
以下のように、node_modulesをボリュームにマウントしています。

※docker-compose.yml
```
service:
  nestjs:
    build:
      context: ./api
      dockerfile: Dockerfile
    volumes:
      - ./api/nest-api:/app
      - nestjs_node_modules:/app/node_modules
    ports:
      - '3000:3000'
    networks:
      - app-networks

networks:
  app-networks:
    driver: bridge

volumes:
    nestjs_node_modules:
```
volumes:の項目で、nestjsのディレクトリとnode_modulesをそれぞれボリュームにマウントしています。

## node_nodulesをボリュームにマウントすると、、、
すると、エディタでは以下の画像のように表示されてしまいます。
![スクリーンショット 2025-03-16 19.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566879/001c5788-9798-479a-9b93-83b747f19f73.png)

**見て欲しいのは1行目にある赤い波線の箇所です。**
エディタからは、**モジュールまたはそれに対する型宣言が見つからない**と言われてしまいました。
画像のファイルは、エントリポイントであるmain.tsですがあくまで一例です。
他のどのファイルを見ても同じ出力がされてしまいます。

::: note warn
アプリケーション自体は問題なく動きます。リクエストに対してレスポンスも返してくれました。あくまでエディタが問題を示してくれています。
:::

## 解決策
結論、Dev Containsersという拡張機能に頼ることにしました。
簡単に言うと、VSCodeごとコンテナの中に突っ込んじゃおうぜ、みたいな感じです。
コンテナに入ると、ボリュームを参照できるため、エディタ側からの問題出力も改善されるということです。

以下の記事を参考にしました。
[VSCode&Docker Volumeにおけるnode_modules問題を解決する](https://zenn.dev/yumemi_inc/articles/3d327557af3554)

### セッティングについて
![スクリーンショット 2025-03-16 19.24.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3566879/c1138784-d97b-4f9b-a7d0-2b958a13c233.png)
この拡張機能をVSCodeからインストールしてください。

その後、使いたいプロジェクトのルートディレクトリに以下のディレクトリとファイルを作成してください。
- .devcontainerディレクトリ
- ./.devcontainer/.devcontainer.jsonファイル

この.devcontainer.jsonにもろもろの設定をするわけですが、僕は以下のように書きました。
```
{
    //適当なプロダクト名を
    "name": "〇〇",

    //このファイルからdocker-compose.ymlまでの相対パス
    "dockerComposeFile": "../docker-compose.yml",

    //入りたいコンテナのサービス名
    "service": "nestjs",

    //コンテナのワーキングディレクトリ
    "workspaceFolder": "/app"
}
```

その後、左下のアイコンから、「コンテナで再度開く」を選択してください。
VSCodeごとコンテナに入り、ワーキングディレクトリを開きながら、マウントされたnode_modulesをエディタが読み込みながら作業を進めることができます。

## 終わりに
僕は最近エンジニアのポッドキャストを聞くことにハマっています。
以下のポッドキャストが面白かったのでぜひ。
Apple podcastから聴くことができます。

Stirpe凄えってなります。

https://podcasts.apple.com/jp/podcast/103-%E6%B1%BA%E6%B8%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0stripe%E5%B0%82%E7%94%A8%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E9%9C%80%E8%A6%81%E3%81%8C%E6%80%A5%E5%A2%97-%E5%88%86%E6%9E%90%E3%83%87%E3%83%BC%E3%82%BF%E5%8F%8E%E9%9B%86%E3%81%AE%E5%B9%85%E3%82%82%E5%BA%83%E3%81%84-%E8%B5%B7%E6%A5%AD%E7%89%A9%E8%AA%9E/id1679672794?i=1000691371052
セキュリティの基本的な単語

## 初めに
セキュリティ分野を学習するための基本的な知識をまとめた。

## 1. セキュリティの基礎概念
・機密性 (Confidentiality): 情報が許可された人だけにアクセスできるように保護すること。
・完全性 (Integrity): 情報が不正に変更されていないことを保証すること。
・可用性 (Availability): 必要なときに情報やサービスが利用できること。

## 2. セキュリティ脅威
・SQLインジェクション: ユーザーの入力欄に悪意あるSQL文を注入し、データベースを不正に操作する攻撃手法。
・クロスサイトスクリプティング (XSS): Webページに悪意のあるスクリプトを埋め込み、他のユーザーのブラウザ上でそのスクリプトを実行させる攻撃。
・クロスサイトリクエストフォージェリ (CSRF): ユーザーが意図しない操作を別のサイトに対して実行させる攻撃。
・DoS（サービス妨害）攻撃: サービスを過負荷にして、正常に機能しなくさせる攻撃。
・DDoS（分散サービス妨害）攻撃: 複数のコンピュータを使って、ターゲットに過剰なトラフィックを送る攻撃。
## 3. セキュリティ対策
・認証と認可
　・認証 (Authentication): ユーザーが誰であるかを確認するプロセス（例: ユーザー名とパスワード）。
　・認可 (Authorization): 認証されたユーザーがどのリソースにアクセスできるかを制限するプロセス（例: アクセス制御リスト）。
・暗号化: 情報を可読な形から、第三者には解読できない形に変換する技術。
　・対称鍵暗号（例: AES）：同じ鍵で暗号化と復号を行う。
　・公開鍵暗号（例: RSA）：異なる鍵で暗号化と復号を行う。
・ファイアウォール: 外部からの不正アクセスを防ぐため、ネットワークにおけるトラフィックを制御する装置。
・IDS/IPS (侵入検知・防止システム): ネットワークやシステムへの不正侵入を検出し、または防止するためのシステム。

## 4. セキュリティの脆弱性
・バッファオーバーフロー: メモリに予期しないデータを書き込むことによって、プログラムが誤動作し、攻撃者がコードを実行することができる脆弱性。
・セッションハイジャック: ユーザーのセッションを乗っ取り、不正アクセスを行う攻撃。
・不適切な入力検証: ユーザー入力を適切に検証せず、そのまま使用することによって発生する脆弱性（SQLインジェクション、XSSなど）。
・不十分なパスワード管理: パスワードが短すぎたり、辞書攻撃に弱かったり、平文で保存されている場合、攻撃者に悪用される可能性がある。

## 5. セキュアなプログラミング技法
・プリペアドステートメント: SQLインジェクションを防ぐために、ユーザー入力をパラメータとして渡し、クエリの構造を変えないようにする技法。
・エスケープ処理: ユーザー入力に含まれる特殊文字（例: <, >, ', "）を適切に処理して、XSS攻撃を防ぐ方法。
・最小権限の原則: ユーザーやシステムには、その業務を遂行するために必要な最低限の権限しか与えない。

## 6. セキュリティツール
・Wireshark: ネットワークのパケットをキャプチャして、通信内容を解析するツール。
・Burp Suite: Webアプリケーションの脆弱性をテストするための統合ツール。XSSやSQLインジェクションなどを試すことができる。
・Nmap: ネットワークスキャニングツールで、ネットワーク上のデバイスを発見し、サービスや脆弱性を検査する。

## 7. セキュリティの脅威分析フレームワーク
・STRIDE: 脅威分析のフレームワーク。スプーフィング、改ざん、情報漏洩、否認、サービス妨害、権限昇格の6つのカテゴリを基に脅威を分類。
・DREAD: 脅威のリスク評価フレームワーク。脅威の「Damage（被害）」「Reproducibility（再現性）」「Exploitability（攻撃可能性）」「Affected users（影響を受けるユーザー数）」「Discoverability（発見の容易さ）」の5つの要素で評価する。
React、TypeScriptで学習記録アプリを作成

# 実践内容

React/TypeScriptで学習記録アプリを作成しました。

#### 成果物はこちら
アプリ

https://restudy-record.web.app/

github

https://github.com/wws225/study-record

 
 

バックエンドのDBにsupabase、ホスティングにfirebaseなどのツールを活用しています。
また、jestでテストプログラムの実装、git actionsでci/cdの実装、makeコマンドでfirebaseデプロイ自動化なども実施。
 
 
TypeScriptははじめて使いましたが、オブジェクト指向の概念はC#の経験で定着していたので取っつきやすく、今までの開発経験が活きているように感じました。


# 課題

css周りは実装するためにほぼすべてを調べている状態で、簡単なことしか実装していないので、まだまだ学習が足りていないと感じました。
chakraやそれ以外のライブラリも活用しつつ、もっと経験を積んでいきます。


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

https://projisou.jp
Stratoshark使ってみた

# とりあえず
画面キャプチャだけ。

![stratoshark0316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230865/2e1fb418-d2d8-4550-aeb2-53f4784810c3.png)

何が見えるか？→どういうことに使えるか？、というのは、他の方からの情報なども見ながら考えてみます。

↓目次（仮）
* はじめに
* システム構成
* 環境構築手順
* テスト（キャプチャ実施）
* GUIで見てみる（Stratoshark）
* 考察
Qiitaにおけるコードブロックの種類と見た目

※数が多いため随時更新

Qiitaでコードブロックの見た目を変えたいというときがあります（僕だけか）
コードブロックの見た目を変えると見た目にも華やかになり、人に見られやすくなり、他と差が付き、羊界隈が繁栄します（魔界化とも呼ぶ）。

Codeの種類を何に指定しようと**見た目には表れません**ので、気にせず好きに指定してみようという(編集リクでこれはSlimではないと言われたが無視した)

表示コードは```Git Clone https:hogehoge.com```とします。
何かありましたらリクエストかコメント


参考Link

https://qiita.com/kohki_takatama/items/b71da2996e487a9211bd

https://qiita.com/TETSURO1999/items/eeb1ce80e69fb11ed7ed

# a行

## abap
全体が薄くなる(Pale White)
```abap
Git Clone https://hogehoge.com
```

##abl
https以降が色違いに
```abl
Git Clone https://hogehoge.com
```

## actionscript
緑色。
```actionscript
Git Clone https://hogehoge.com
```

## ada
スラッシュだけ赤。
```ada
Git Clone https://hogehoge.com
```

## apex
ノーコメント。
```apex
Git Clone https://hogehoge.com
```

※未記載は変化なし
VisualStudioCodeでJestのデバッグ構成を設定する

# ■はじめに

Jestでテストを実行するにあたって、テストコードとアプリケーション側のコードをデバッグしたかったため、VSCodeでデバッグする構成を作りました。

# ■Jestのデバッグ構成設定

![スクリーンショット 2025-03-16 18.38.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/5f3c046c-5d3b-4087-a314-250619df41db.png)

VSCodeで「command + ,」を押すと、設定画面が表示されるので、「settings」で検索します。

そうすると、「settings.jsonで編集」というリンクが表示されるのでクリックします。

![スクリーンショット 2025-03-16 18.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/9c3d2a89-34fb-407e-b86f-8aaaf25f510e.png)

```json
// デバッグ構成
"launch": {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "[Jest] 全てのテストを実行",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": ["--runInBand"],
            "console": "externalTerminal",
            "internalConsoleOptions": "neverOpen",
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "[Jest] 現在のファイルを実行",
            "program": "${workspaceFolder}/node_modules/.bin/jest",
            "args": ["--runTestsByPath", "${relativeFile}", "--config", "jest.config.ts"],
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "windows": {
                "program": "${workspaceFolder}/node_modules/jest/bin/jest"
            }
        }
    ]
},
```

settings.jsonにデバッグ構成のコードを貼り付けます。

# ■VSCodeでテストコードをデバッグしてみる

![スクリーンショット 2025-03-16 18.46.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/a927bd8a-efd2-4238-8e37-c7ec08b39d25.png)

先ほど設定したデバッグ構成は、VSCodeの虫マーク内に表示されます。

今回は「現在のファイルを実行」というデバッグ構成で実行してみます。

「全てのテストを実行」の場合は、文字通り全てのテストが実行されます

![スクリーンショット 2025-03-16 18.49.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/d6e4d0e9-b432-4a88-9bc0-95c49965771b.jpeg)

テストファイルを開いて、デバッグしたいコードの左側をクリックすると、赤丸が表示されます。

この赤丸をつけた部分がブレークポイントで処理が止まる部分になります。

赤丸をつけた状態で、左上の緑三角マークをクリックすると、現在開いているファイル（`OtherUtils.test.ts`）が実行されて、赤丸をつけたコードで処理が止まります。

サイドバーや変数名にhoverすることで、ブレークポイント時点での変数の中身や引数を確認することができます。
JavaScriptのレキシカル環境とは？クロージャとの関係も添えて..

## はじめに

JavaScriptの学習中に出会った　**「レキシカル環境（Lexical Environment）」** という概念を自分なりにメモしておきます🤗

これが理解できると、スコープやクロージャの仕組みが割とスッと腑に落ちる。

## 目次

1. [そもそもレキシカル環境って何？](#-そもそもレキシカル環境って何)
2. [レキシカル環境の仕組み](#-レキシカル環境の仕組み)
3. [具体例で理解する！](#-具体例で理解する)
4. [レキシカル環境とクロージャの関係](#-レキシカル環境とクロージャの関係)
5. [まとめ](#-まとめ)
6. [参考文献](#-参考文献)

## 🧷 そもそもレキシカル環境って何？
JavaScript では 変数や関数がどこで使えるのか（スコープ） を管理する仕組みがある。

それが **レキシカル環境（Lexical Environment）**。

💡 「レキシカル（Lexical）」 とは、「コードを書いたときの構造に基づく」という意味。

つまり、**コードを書いたときの位置（構造）によって、変数がどこで使えるか決まる** ということ！

## 🧷 レキシカル環境の仕組み
レキシカル環境は、以下のような構成になっている。

### 1. 環境レコード（Environment Record）
* 変数や関数の定義を記録する場所。
* 例えば `let x = 10;` を書くと、`x: 10` が保存される。

### 2. 外部レキシカル環境（Outer Lexical Environment）
* 外側のスコープ（親の環境）への参照を持っている。
* 変数が見つからないと、親の環境を探しに行く。

## 🧷 具体例で理解する！
```js
function outer() {
  let a = 10; // outer のレキシカル環境に保存

  function inner() {
    let b = 20; // inner のレキシカル環境に保存
    console.log(a); // inner には 'a' はないので outer を探す
  }

  inner();
}

outer();
```
#### 🔍 実行の流れ
1. `outer` が呼ばれる → `a = 10` が `outer` のレキシカル環境に保存
2. `inner` が呼ばれる → `b = 20` が `inner` のレキシカル環境に保存
3. `inner` の console.log(a) の a を探す
    * `inner` の環境には a がない
    * `outer` の環境を探しに行き、`a = 10` を見つける！
4. `10` が表示される 🎉

このように、**スコープの構造に従って変数を探す仕組み**が レキシカル環境 ！

## 🧷 レキシカル環境とクロージャの関係
レキシカル環境の概念を理解すると、**クロージャ**の仕組みが簡単に理解できる。

### 💡 クロージャとは？</b>
クロージャとは 関数が **「外側の関数の変数」を覚えていて、あとで使える仕組み** のこと。

```js
function createCounter() {
  let count = 0; // 外側の関数の変数

  return function() {
    count++; // 内側の関数が外側の変数を覚えている！
    console.log(count);
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2
counter(); // 3
```
#### 🔍 仕組みを分解すると…
1. `createCounter` が呼ばれる → `count = 0` を保存
2. `createCounter` は 内側の関数を返す
3. `counter()` を実行すると `count` にアクセスできる！
4. `count` は毎回増えていく（リセットされない）

つまり、**「関数が外の変数を覚えていて、あとで使える」** ＝ クロージャ！

### 💡 クロージャの活用例</b>

#### ① データの隠蔽（プライベート変数）
```js
function createSecret(secret) {
  return function() {
    console.log(`秘密は: ${secret}`);
  };
}

const mySecret = createSecret("好きな食べ物はラーメン！");
mySecret(); // → "秘密は: 好きな食べ物はラーメン！"
```
🔹 `secret` は `createSecret` の外ではアクセスできない！
🔹 関数の外から隠したいデータ を持たせるのに便利！

#### ② イベントリスナーとクロージャ
```js
function setupButton() {
  let count = 0;
  document.getElementById("myButton").addEventListener("click", function() {
    count++;
    console.log(`ボタンが ${count} 回クリックされました！`);
  });
}

setupButton();
```
🔹 クリックするたびに `count` が増える！
🔹 `setupButton()` を実行した後も、クロージャで `count` を記憶している！

## 🚀 まとめ
### ✅ レキシカル環境とは？

* 変数や関数のスコープを管理する仕組み
* コードの 書かれた位置（レキシカルスコープ） によってスコープが決まる

### ✅ レキシカル環境の構成

* 環境レコード（変数・関数の保存場所）
* 外部レキシカル環境への参照（親スコープを探す仕組み）

### ✅ クロージャとは？

* 関数が外の変数を記憶して、あとで使える仕組み！
* データの隠蔽やイベント管理に活用できる！

レキシカル環境とクロージャの関係が理解できれば、JavaScriptのスコープに関する理解が深まった！🚀✨

## 💫 参考文献
* [JavaScript レキシカルスコープとは？](https://zenn.dev/forge422/articles/f0ff40c2de7660)
* [クロージャ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures)
Unity6で半透明のマテリアルを作る（URP）

「透明になっても、カメラの位置によっては表示されない」ということが起こったので、解決法の忘備録。

# 状況
オセロで置ける位置を示す、半透明のハイライトを置きたい。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521926/e417218b-5efe-4edf-93fb-ae1335ea698c.png" width="400">

# 手順
1. サーフェスタイプを「Transparent」にする
2. ベースマップのAlphaを調整する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521926/2e0ebff7-f5cc-493e-80fd-0903b161d701.png" width="400">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521926/0a7bfe82-68eb-4e82-bd17-a33dfef44466.png" width="400">

なぜか手前中央しか表示されないため、以下のことをする。
3. 下にある詳細オプションの「ソート優先度」を**1以上**にする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521926/13eb6d30-202c-4f1e-943d-eea0c43831f9.png" width="400">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3521926/2acab361-699a-43ed-85fc-d06c51ca0fbc.png" width="400">

できた。
電波法を説明します①[微弱無線]

電波って難しですね。ただ、皆さん無線なしでは生活困難です。Wi-FiやBluetoothは結構理解している人がいますが、使うことは出来ても作れる人は一握りです。特に法律についてはわかっていなく、ある政府系の機関に関わる方の報告書を拝見した時、明らかに違法と思われる使い方でした。これではまずいと思い、電波法について投稿します。範囲が広すぎるので不定期にアップします。1回目は、電波法の区分として「微弱無線」です。

 電波法に3つに分けられます。
 ➀微弱無線
 ➁特定小電力無線(特小）
 ➂免許無線

微弱は読んで字のごとくパワーが低い無線機です。ここは専門的になりますが3mの距離での電界強度で周波数により変わります。ただ、デバイスの入手性や他の無線機との混信回避が必要で、一番パワーが出せてリーズナブルな315MHzが使われています。パワーは500uV/mが最大値です。500uV/mと言われてもわかりずらいですよね?ここで出てくるのが特性インピーダンスです。この辺りの説明だけで1回終わるので、そこは無視して、50Ωでは0.2nW位になります。この辺については多くの説明がありますので、そちらを参照してくださ。
 では、実際の通信距離はいくらか!、で、これも単純ではありません。厄介なのが受信機の性能とアンテナに依存します。アンテナについての説明だけで10回はできますが、そこは無視します。一般的な使い方としては1～2m、がんばっても10mが限界です。恐らく、まじめに作ればもっと飛ぶことも不可能ではありませんが、現実的な使い方として3m以下です。
 説明が長くなりましたが、「微弱」は電波法の取得がいらない無線装置です。3m以下で使えるシステムとしてはクレーンなどのリモコンがあります。私が小さいときのある雑誌の付録で、音声を飛ばすものがありました。ただ、ほとんど飛びませんが、付録としては十分です。データも送れますが、兎に角、安定性が悪く、「安かろう」の製品です。個人的には微弱は推奨しません。ある案件でユーザが微弱が届かないため対策の依頼を受けました。対策で多少の改良はできたのですが、どうしてもだめな条件が解消されず、次回開発は特小を提案し、2つ返事で了解いただきました。
微弱は電波法の規制がないため、作って直ぐ電波を出しても構いません。ところが、微弱の多くがパワーが出すぎていて、違法状態です。恐らく、10m以上飛ぶという製品は違法の可能性が高いです。そのため、一般財団法人テレコムエンジニアリングセンター(通称TELEC)では、微弱の認定試験も行っています。試験のパスしたものは性能証明ラベルを貼ることができます。このラベルがあれば安心ですが、元々認証不要な規格なので、どれだけの製品が試験を受けているか、疑問が残ります。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4037430/a274c9ff-6983-434b-9978-11af0936f990.png)
微弱の規格については総務省のHPから参照できますので、URLを貼り付けます。
 https://www.tele.soumu.go.jp/j/ref/material/rule/

 話が長くなるので、今回はここまで。
 詳しく聞きたい方は質問してください。
 次回は特小です。
stancl/tenancyのテスト作成

# TestCase
下記でテナントschemaの削除までできる
```
<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
use App\Models\Tenant;
use Illuminate\Support\Facades\DB;
use App\Models\User;
use Tests\TestMiddleware\SimulateNetworkIssues;

abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;

    protected $tenancy = false;
    protected $currentTenant;

    public function setUp(): void
    {
        parent::setUp();

        if ($this->tenancy) {
            $this->initializeTenancy();
            $this->initializeUser();
        }
    }

    protected function tearDown(): void
    {
        if ($this->tenancy && $this->currentTenant) {
            // テナント接続を終了
            tenancy()->end();
            
            // テナントを削除（これによりスキーマも削除される）
            $this->currentTenant->delete();
        }
        
        parent::tearDown();
    }

    public function initializeTenancy()
    {
        $this->currentTenant = Tenant::create();
        tenancy()->initialize($this->currentTenant);
        $tenant = $this->currentTenant;
    }

    public function initializeUser()
    {
        User::factory()->create();
    }
}
```

# Feature

下記と
```
protected $tenancy = true;
```

下記
```
$tenant = Tenant::first();
```
でテナントのテストをする

中央ドメインのテストはまだやってないのでわからない
Cloud Run functionsでFilestore への書き込みがうまくいかなかった

# Cloud Run で Firestore への書き込みがうまくいかなかった話について調べてみた

## 背景
- GCSのバケットに対するファイル更新をトリガーにfilestoreへそのファイルを保存したかった。
- 簡単にトリガーを設定できるCloud run functionsを利用したかった。
- filestoreへの書き込みは下記の制約があり、permisson deniedエラーによって失敗していたことが調べていてわかった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3550845/26507d15-911d-4a00-9ae1-28c197c7e955.png)

https://cloud.google.com/run/docs/configuring/services/nfs-volume-mounts?hl=ja

## 試したこと
- サービスアカウントの問題？
    - Cloud Run functionsを実行するサービスアカウントにfilestoreへの管理者権限付けたが、変わらず権限エラーが発生
- やはりベースイメージにroot権限がない？
     https://cloud.google.com/run/docs/configuring/services/runtime-base-images?hl=ja
     →　調べてみた。
     
## 調べてみた結果

### 1. Cloud runのドキュメントに実行ユーザーの記載があるか確認
[コンテナランタイムの契約](https://cloud.google.com/run/docs/container-contract?hl=ja#user-id)
→　特に記載なし

実際に、実行ユーザを見てみる。

```python
def get_os_info(request):
    """
    OS レベルの情報を取得する。

    Returns:
        OS 情報を含む文字列。
    """

    try:
        # UID と GID を取得 
        uid = os.getuid()
        gid = os.getgid()

        # id コマンドを実行
        id_output = subprocess.check_output(["id"], text=True, stderr=subprocess.STDOUT)

        # root 権限のチェック 
        is_root = os.geteuid() == 0

        result = (
            f"UID: {uid}\n"
            f"GID: {gid}\n"
            f"id command output:\n{id_output}\n"
            f"Is root (unreliable): {is_root}\n"
        )
        return result

    except Exception as e:
        return f"Error: {e}"

```
実行結果
```
UID: 33
GID: 33
id command output:
uid=33(www-data) gid=33(www-data) groups=33(www-data)
Is root (unreliable): False
```

→　やはり、最小権限原則からもroot権限で実行されていない。


### 2. Cloud Build (Cloud Run のビルドに使うやつ) のデフォルト ユーザー

Cloud BuildでCloud Run で使うコンテナイメージをビルドするのに使うやつ。Cloud Build のデフォルトの動きに関するドキュメントには、こう書いてある。

* **デフォルトのサービスアカウント:** 特に何も指定しないと、Cloud Build はデフォルトのサービスアカウントを使ってビルドする。

[Cloud Build のデフォルトのサービス アカウント](https://cloud.google.com/build/docs/securing-builds/configure-user-specified-service-accounts?hl=ja)

→　可能性は低いが、このアカウントにfilestoreの書き込み権限がないから、コンテナも影響している？
　→　build用のサービスアカウントに権限を付与しても相変わらず権限エラーで書き込み失敗。



## まとめ

調査結果ではCloud Run Functions で自動的にビルドされるコンテナは、デフォルトで **root 権限がないユーザー** で動いており、ユーザ側でroot権限をもつイメージでビルドするように指定する方法は見つからなかった。
※ほかの方法をご存じの方がいらっしゃいましたら、是非コメントご教示いただけますと幸いです。

## Filestore への書き込みを実現するには

cloud run functionsでなく、カスタムイメージを通じてCloud Runをデプロイする必要がある。
詳細は下記をご覧ください。
[GCS バケット更新をトリガーに Filestore へ書き込む Cloud Run 構築 (Terraform)](https://qiita.com/inuk4i/items/99ca53ff8b090644940c)
【応用情報技術者試験】ストラテジ系

# new article body
# ストラテジ系

## 企業活動
### 会計　財務
- 変動費率
  - 売り上げに対する変動費の割合

### 業務分析・データ利活用
- 特性要因図
  - 現れた特性とそれに影響を及ぼしたと思われる要因の関係を体系的にあらわした図
- パレード図
  - 分析対象のｎ項目値を大きい順に並べた棒グラフと累積構成比をあらわす折れ線グラフを組みあわせた複合グラフ

### 経営・組織論
- コンティンジェンシー理論
  - フィードラーの理論
  - 以下の3つの変数から生じる状況によって効果的なリーダーシップのスタイルは変化するという理論
- PM理論
  - リーダーシップのスタイルについて目的達成能力と、集団維持能力の２つに焦点を当てた理論
- ハーシー＆ブランチャードのSL理論
  - 部下の成熟度の度合いという状況的要因に依存する
- 

## 技術戦略マネジメント
### 技術開発戦略の立案

- バックキャスティング
  - 未来のある時点に目標を設定し、そこを起点に現在を振り返ることで、目標達成の耐えに現在するべきことを考える方法

デジカメ
イメージうきゃな
cdrrom

## 経営戦略マネジメント

### 経営戦略手法
- アゾマフのマトリクス
  - 縦軸に市場、横軸に製品をとり、それぞれに既存、新規の区分を設け4象限（市場浸透、製品開発、市場開拓、多角化のマトリクスにしたもの）

### ビジネス戦略と目標、評価
- バランススコアカード
  - **バランス・スコアカード（Balanced Scorecard, BSC）** は、企業の業績を多角的に評価するフレームワーク。
  - **財務指標だけでなく、非財務指標（顧客、業務プロセス、学習・成長）も考慮**し、組織全体の戦略を明確化する。
- フィージビリティスタディ
  - 新規ビジネスの立ち上げ前に市場調査、技術面、資金面、動向調査などを行い実現可能性を事前に調査、検証すること

### マーケティング
- ROAS(広告費用対効果)
  - 広告費に対してどれだけ売り上げがあったか
  - ROAS(%) = 広告経由での売り上げ /　広告費　* 100

## システム企画

### システム化計画
- IRR(internal rate return)
  - 投資により将来得られるキャッシュフローの現在価値と投資額の現在価値とが等しくなる割引率を求め、投資に見込まれる内部収益率が本来得るべき利回りよりも大きいかどうかで投資の可否を判断する
- NPV(net preent value)
  - 投資により得られるキャッシュフローを現在価値に換算し、そこから投資額を引いた正味現在価値をもとめ、その額が０を上回っているかで投資の可否を判断する
- PBP(pay back period)
  - 投資した資金をどれくらいの機関で回収できるかをキャッシュフローベースで算定し、それを組織内の基準と比較することで投資の有効性を判断する方法
- ROI(return of inetiment)
  - 投資額に対する利益の割合で投資効果を評価する手法

### 要件定義

- トレーサビリティ
  - 製品やサービスのライフサイクルで現状に至るまでのプロセスや変更の履歴を追跡する能力
  - 

## システム戦略
### 情報システム戦略

- ROI(returun on investment: 投資利益比率)
  - 投資期間内に得られる効果金額を投資額で割ったもの
  - 投資金額に対してのどれほど効率的に利益を生み出しているかの指標
  - ROI = 利益 / 投資金額 *100

### ソリューションビジネス
- BRP（bussiness proces reenginiering）
  - 企業改革において既存の組織やビジネスのルールを抜本的に皆負い業務フロー、管理機構、情報システムを再構築する手法のこと
- ERP（enterprise resource planning）
  - 企業の経営資源を有効に活用して経営の効率を向上させるために基幹業務を部門ごとでなく統合的に管理するための業務システムのこと
- SLA（erice level agreement）
  - 発注者とITアウトソーシングの提供者との間でサービスの品質について合意した文書
- SOA(service oriented architecture)
  - サービス指向アーキテクチャ
  - ソフトウェアで実現されていた機能を独立したサービスとして設計し、それらを組み合わせることでシステムを構築する設計思想

## ビジネスインダストリ

### e-ビジネス
- アグリケーションサービス
  - 複数の企業が提供するオンラインサービスを集約し複数サイトにまたがるデータを一括して比較表示できるようにしたサービス
  - 例：複数の銀行口座、証券口座に分散している資産、利用履歴をまとめて表示するサービス

- ギグエコノミー
  - 企業に雇用されるのではなく、インターネットを通じてマッチングサイトした単発の仕事でお金を稼ぐ稼ぎ方やその働き方によってなり立っている経済圏

### 産業機器
-  **エネルギーハーベスティング**

- **概要**
  - **エネルギーハーベスティング（Energy Harvesting）** とは、**周囲の環境から微弱なエネルギーを収集（harvest）し、電力に変換する技術**の総称。
  - 日本語では **「環境発電技術」** とも呼ばれる。

---

- **利用例**
  - **圧力発電**：ヒトやモノが移動する際の**圧力を利用した電力床**
  - **電磁波回収**：放送波や無線LANなどの**電磁波を回収し、電力を取り出す**
  - **温度差発電**：**体温で発電するウェアラブル端末**

## 法務
### 労働関連・取引関連法規
- **下請法（下請代金支払遅延等防止法）**

  -  **概要**
    - **下請法** は、親事業者（発注者）が **下請事業者（受注者）に対する不当な取引** を防ぐための法律。
    - **下請事業者への優越的地位の乱用を禁止**。

---

  - **親事業者の義務**
    - **発注時の明確な書面交付**：
      - **① 下請事業者の給付内容**
      - **② 下請代金の額**
      - **③ 支払期日**
      - **④ 支払方法**
    - これらの情報を記載した **発注書面を直ちに交付することを義務化**。


- 労働者派遣法
  - 派遣先事業主の講ずべき措置
    - 派遣先管理台帳台帳の作成
    - 派遣先責任者の選任
    - 派遣労働者を指揮命令するものや、その他関係者への派遣契約内容の周知
  - 派遣元事業主の講ずべき措置
    - 希望、能力に応じた就業の機会や教育訓練機会の確保
    - 労働条件の向上、その他雇用の安定板を図り福祉を増進する
【Oracle】はじめてのPL/SQL

## はじめに

最近、アサインされたプロジェクトでOracle DBを使用することになりました。
筆者はそれまでの経験ではDB2のみを扱っていたため、Oracle DB特有のPL/SQLを学ぶ必要がありました。
そこで、学んだ内容を備忘録として残すことにしました。
これからPL/SQLを学ぶ方の参考になれば幸いです。

## PL/SQLとは？

PL/SQL（Procedural Language for SQL）は、Oracle Database専用のプログラミング言語です。SQL（Structured Query Language）はデータベース操作のための言語ですが、PL/SQLはSQLの拡張として、プログラミング的な機能を追加しています。具体的には、条件分岐やループ処理、エラーハンドリングなど、データベース操作をより柔軟かつ効率的に行うための手段を提供します。

PL/SQLを使うことで、データベース内で直接処理を行うことができ、パフォーマンスの向上や、アプリケーション側の負担を減らすことができます。

## PL/SQLの基本構文

PL/SQLの基本的な構文は以下のようになります。

```sql
DECLARE
    -- 変数宣言
BEGIN
    -- 実行するSQL文やPL/SQLの処理
    NULL; -- 何も実行しない場合
EXCEPTION
    -- エラーハンドリング
    WHEN OTHERS THEN
        -- エラー処理
        NULL;
END;
```

### 1. DECLARE
`DECLARE`ブロックでは、PL/SQLで使用する変数を宣言します。この部分は任意で、必要な場合にのみ使用します。

### 2. BEGIN ... END
`BEGIN`から`END`の間に実行したい処理を記述します。ここではSQL文やPL/SQLの制御構造（条件分岐やループなど）を使って処理を行います。

### 3. EXCEPTION
`EXCEPTION`ブロックは、エラーハンドリングを行う部分です。PL/SQLの処理中にエラーが発生した場合に、どのように処理をするかを記述します。例えば、エラー発生時に通知を出すなどです。

## 実際にPL/SQLを使ってみよう

それでは、簡単なPL/SQLのサンプルを実行してみましょう。以下のコードは、データベース内に格納されている社員情報を処理する例です。

### サンプルコード

```sql
DECLARE
    v_employee_name VARCHAR2(100);
    v_employee_salary NUMBER;
BEGIN
    -- 社員IDを指定して社員名と給与を取得
    SELECT employee_name, salary
    INTO v_employee_name, v_employee_salary
    FROM employees
    WHERE employee_id = 100;

    -- 結果を表示
    DBMS_OUTPUT.PUT_LINE('社員名: ' || v_employee_name);
    DBMS_OUTPUT.PUT_LINE('給与: ' || v_employee_salary);
    
EXCEPTION
    WHEN NO_DATA_FOUND THEN
        DBMS_OUTPUT.PUT_LINE('指定した社員IDのデータは見つかりませんでした');
    WHEN OTHERS THEN
        DBMS_OUTPUT.PUT_LINE('エラーが発生しました');
END;
```

### 説明

1. **DECLAREブロック**：`v_employee_name`と`v_employee_salary`という変数を宣言します。これらに社員名と給与を格納します。
2. **BEGIN ... ENDブロック**：
   - `SELECT INTO`文を使って、社員IDが100の社員の名前と給与を変数に格納します。
   - `DBMS_OUTPUT.PUT_LINE`を使って、結果を画面に表示します。
3. **EXCEPTIONブロック**：
   - `NO_DATA_FOUND`エラーを捕捉し、データが見つからなかった場合にメッセージを表示します。
   - `OTHERS`で、その他のエラーを捕捉します。

### 実行方法

1. SQL*PlusやOracle SQL Developerなどのツールを使用して、上記のコードを実行します。
2. `DBMS_OUTPUT`を有効にすることで、コンソールに結果が表示されます。（コマンド`SET SERVEROUTPUT ON` で有効化されます）

## まとめ

PL/SQLは、SQLを拡張してデータベース内での処理を効率よく行うための強力なツールです。基本的な構文を覚えることで、Oracle DBの処理をより柔軟に操作できるようになります。最初は簡単なコードから始め、徐々に複雑な処理に挑戦していくことをお勧めします。

実際には、PL/SQLパッケージという構造を用いてリソースを管理していくようなので、そちらについては以下の記事をぜひご確認ください。

https://qiita.com/K_S_707/items/b63641641d0ad4c07c0d

---