OmniAICreator/Qiita-1.07M huggingface dataset:
インターネットとTCP/IPの成り立ちと関係性について

# 1. ネットワークとインターネットの違い

「インターネット」という言葉はしばしば「Web」と混同されがちであるが、実際にはより広い意味を持つ。インターネットとは、TCP/IPという共通の通信規格で接続された複数のネットワークが集まった巨大なネットワークの集合体を指す。対して「ネットワーク」とは、例えば家庭内LANや大学内の閉じられたシステムなど、比較的限定された範囲で通信する仕組みである。

つまり、個別のネットワーク同士がTCP/IPでつながることで、初めて「インターネット」と呼べる状態になる。

# 2. TCP/IPの誕生と進化

1970年代、アメリカ国防総省の研究プロジェクトARPANETをきっかけに、異なるシステム間でも通信できる共通プロトコルの必要性が高まり、TCP（Transmission Control Protocol）が考案された。最初はこのTCPが信頼性の確保から経路の選択までをすべて担う設計であった。

しかし、すべての責務を一つのプロトコルに押し込めるのは効率が悪く、1981年にはTCPとIP（Internet Protocol）に分割される。この分離によって、IPは「どこに送るか」（経路選択＝ルーティング）を担当し、TCPは「どう確実に届けるか」（信頼性のある通信）を担うようになった。

このようにして構成されたTCP/IPモデルは、「アプリケーション層」「トランスポート層」「インターネット層」「ネットワークインターフェイス層」という4層構造を持ち、現在でも通信の基本となっている。

# 3. DNSとWebの登場

1983年、ARPANETがTCP/IPに正式移行したことがインターネットの始まりとされる。そして1984年にはDNS（Domain Name System）が導入された。

DNSは、人間にとって扱いにくいIPアドレスの代わりに、「example.com」のようなドメイン名を使って通信先を指定できる仕組みである。これはWebが登場する前から、大学や企業のローカルネットワークなどでの通信に活用されていた。

その後1991年、ティム・バーナーズ＝リーによってWWW（World Wide Web）が発明される。Webとは、HTTPという新たな通信プロトコルを用いて、インターネット上に分散した情報を相互にリンクし、閲覧できるようにしたシステムである。

# 4. Webとインターネットの関係

Webはあくまでインターネット上で動作する一つのアプリケーションにすぎない。HTTPやHTML、CSS、JavaScriptなど、Webを構成する技術はインターネット上でドキュメントをやり取りするために設計されている。

したがって、インターネットが存在するからといって、Webが必ず存在するわけではない。逆に、Webを利用するには、インターネットの接続環境と、TCP/IP、DNSなどの基盤があって初めて成立する。

# 5. ローカルネットワークとTCP/IP

では、インターネットがなかった時代、ローカルネットワークではどのような通信規格が使われていたのか。実際には、企業や大学などの組織ごとに独自の通信プロトコル（DECnetやIPX/SPXなど）を使っていた。

しかし、インターネットの拡大に伴い、これらのローカルネットワークでもTCP/IPの採用が進んでいく。なぜなら、TCP/IPを使うことで他のネットワークとの相互接続が可能になり、結果的に利便性が飛躍的に高まったからである。

# 補足メモ

ルーティングとは：IPアドレスに基づいてデータをどの経路で届けるかを決定する処理のこと。

DNSはWeb専用の仕組みではなく、すべてのTCP/IP通信において名前解決の役割を果たす。

TCP/IPモデルはOSI参照モデルの影響も受けつつ独自に進化してきたが、現代では実用的な基盤として標準になっている。

Web（WWW）は、インターネットの上で提供される多くのサービスの中の1つであり、メール（SMTP, POP3, IMAP）、ファイル転送（FTP）などと並ぶアプリケーション層のプロトコルの1つ。
Viteで始める高速Web開発 | 第5章: ビルドとデプロイ

## はじめに
第4章でViteの開発機能を活用しました。今回は、アプリを本番環境用にビルドし、Vercelにデプロイします。これでToDoリストを世界に公開できます。

## 目標
- Viteで本番用ビルドを作成する  
- ビルド結果をプレビューする  
- Vercelにデプロイする  

## 本番用ビルドの作成
Viteでアプリをビルドするには、以下のコマンドを使用：
```bash
npm run build
```
- `dist/`フォルダに最適化されたファイル（HTML、JS、CSS）が生成。
- Rollupがコードをバンドルし、不要な部分を削除。

### ビルド設定の調整
`vite.config.js`で出力オプションをカスタマイズ可能：
```javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist', // 出力先（デフォルト）
    minify: 'esbuild', // 圧縮方式
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // ベンダーコードを分離
        },
      },
    },
  },
});
```
- `manualChunks`で大きなライブラリを別ファイルに分割。

## ビルド結果のプレビュー
ローカルで本番環境をシミュレート：
```bash
npm run preview
```
`http://localhost:4173`で確認。ToDoリストが動作するかテストしてください。

## Vercelへのデプロイ
VercelはViteとの相性が良く、簡単にデプロイできます。

### 1. Vercel CLIのインストール
```bash
npm install -g vercel
```

### 2. デプロイ手順
1. `my-vite-react`フォルダでログイン：
   ```bash
   vercel login
   ```
2. 初回デプロイ：
   ```bash
   vercel
   ```
   - プロジェクト名や設定を聞かれます（デフォルトでOK）。
   - `.vercelignore`で不要なファイルを除外（例: `node_modules`）。
3. 本番デプロイ：
   ```bash
   vercel --prod
   ```
完了後、URL（例: `https://my-vite-react.vercel.app`）が提供されます。

### 3. 環境変数の設定
Vercelで環境変数を追加：
1. Vercelダッシュボードにアクセス。
2. プロジェクト > Settings > Environment Variables。
3. 以下を追加：
   ```
   VITE_APP_TITLE=私のToDoアプリ
   ```

ローカルの`.env`と一致させ、再デプロイ：
```bash
vercel --prod
```

## 動作確認
デプロイしたURLにアクセスし、ToDoリストが正しく表示・動作するか確認。タイトルが「私のToDoアプリ」になっているかもチェック。

## デプロイTips
- **カスタムドメイン**: Vercelで独自ドメインを設定可能。
- **自動デプロイ**: GitHubと連携すると、プッシュごとに自動更新。
- **プレビュー**: `vercel`コマンドで本番前のプレビューURLを生成。

## 次回予告
第6章では、Viteをバックエンドと連携させ、APIからデータを取得する方法を学びます。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！
今すぐ始められる！初心者向けC#＆WinForm講座でプログラミングの世界へ🚀💻

みなさん、こんにちは！　韓国在住のsanaです:blush:

今日は、プログラミング初心者の方にぴったりな3つのC#・プログラミングを学べる講座をご紹介します！💡

どれも分かりやすく、実践的な内容ばかりなので、興味があれば、ぜひチェックしてみてください！😊


:one:　WinFormを使ったアプリ開発-基本編💻🎨

WinFormを使って実際にアプリケーションを作成する方法を学べます！初心者でも理解しやすく、手を動かしながら学ぶので、すぐに実力がつくこと間違いなしです！✨

https://u.inf.run/4ck9Czo

:two:　C#の基礎をマスターして、実務に役立つスキルを身につけよう！📚🖥

C#初心者に最適！たった10分で基本が学べて、今すぐにでも実践に活かせる内容が盛りだくさん！

https://u.inf.run/3DZkBSj

:three:　ゲーム開発にも役立つC#プログラミングを学ぼう！🎮🖱

ゲーム開発に興味がある方必見！C#を使って、ゲームの基本的なプログラムを作成できるようになります。初心者でも楽しく学べる内容なので、これからゲーム開発を始めたい方にぴったりです！🎮

https://u.inf.run/42zol6d


どうでしたか？😊　気になるコースがあれば、リンクから詳細をチェックしてみてください✨

これからも色々なプログラミング講座を紹介していくので、お楽しみに！📝

ファイティン～！
Ansibleで空ファイルを作成する方法

# はじめに

Ansible-Playbookで空ファイルを作成するタスクを作成する際に、少しつまずいたところがあるのでアウトプットとして記載します。

# 試したこと

空ファイルを新規作成しようとして以下のタスクを実行しましたが、パスが存在しないというエラーが発生しました。

```yml
- name: add new file
  ansible.builtin.file:
    path: "/test/path/newfile.txt"
    state: file
    mode: "0644"
```

```console
FAILED! => {"changed": false, "msg": "file (/test/path/newfile.txt) is absent, cannot continue", "path": "/test/path/newfile.txt", "state": "absent"}
```

# 結論

`state: file`ではなく`state: touch`を使用します。

```yml
- name: add new file
  ansible.builtin.file:
    path: "/test/path/newfile.txt"
    state: touch
    mode: "0644"
```

# 概要

`state: file`はファイルの情報取得やパーミッション・所有者・ユーザーグループの変更などに使うもので、新規作成には`state: touch`を使用します。

```yml
- name: add new file
  ansible.builtin.file:
    path: "/test/path/newfile.txt"
    state: touch
    mode: "0644"

- name: change file permission
  ansible.builtin.file:
    path: "/test/path/newfile.txt"
    state: file # デフォルトがstate: fileなので指定しなくても可
    mode: "0755"
```

他にも、ディレクトリの作成には`state:directory`、ファイル・ディレクトリ削除は`state: absent`を使用します。

# 最後に

Github Copilotでの回答が、`state: file`でファイルが存在しない場合にファイルを新規作成するというものでしたが、調査したところ新規作成はできないようです。(https://docs.ansible.com/ansible/latest/collections/ansible/builtin/file_module.html)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/164a67d9-dea8-42b4-8f6e-27a3ea9d8ac5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2472147/d07c1855-62fa-4f53-98d9-2cccee36860d.png)

`If file, even with other options (such as mode), the file will be modified if it exists but will NOT be created if it does not exist.`

ファイル作成が上手くいかないと悩んでいる方の参考になれば良いなと思います。
PDF暗号化ツール: PDFVEIL

# はじめに

何かのツールを作ってみたかったので、興味があったPDFに関連するツールを作ってみました。
PDFをAESで暗号化・復号することができるCLIツールです。今度拡張を重ねてより使いやすくし、最終的にはWindowデスクトップアプリ版もリリースしたいと考えているので、興味ある方はぜひ一緒に開発しましょう!
この記事は随時更新していきます。

https://github.com/Saku0512/pdfveil

# 現時点で実装している機能

- PDF暗号化
暗号化には`AES-GCM`を使って暗号化しています。
デフォルトでメタデータも含めて暗号化するようになっている。
暗号化後のファイルは`.veil`で保存されます。
- PDF復号
暗号化された`VEILファイル`を復号する。
メタデータも暗号化している場合は、復号時にメタデータを表示するようになっている。

# インストール方法

現時点では[debファイル](https://github.com/Saku0512/pdfveil/releases/download/v0.1/pdfveil_0.1.0-1_all.deb)での配布になります。
以下のコマンドでも取得できます。
```bash
wget https://github.com/Saku0512/pdfveil/releases/download/v0.1/pdfveil_0.1.0-1_all.deb
```

`dpkg`を用いてインストールしてください。
```bash
sudo dpkg -i pdfveil_0.1.0-1_all.deb
sudo apt install -f
```

# 使用方法

```bash
pdfveil {encrypt, decrypt} {input.pdf, input.veil} [--password password] [--output output] [--force] [--remove] [--no-encrypt-metadata]
```
基本的には
```bash
pdfveil {encrypt, decrypt} input.pdf
```
で使用できます。

以下オプションの説明です。
| オプション | 説明 |
| ------ | ----- |
| --password, -p | オプションでパスワードを指定します。 <br/> 省略時はプロンプトで要求します。 |
| --output, -o | 保存ファイル名を指定します。 <br/> 省略時は入力ファイルと同じファイル名になります。 |
| --force, -f | 出力ファイルと同じファイルがあった場合に強制上書きします。 |
| --remove | 処理後に入力ファイルを削除します。 |
| --no-encrypt-metadata | メタデータを暗号化しません。 <br/> 暗号化時にのみ有効です。 |

# テスト

このプロジェクトではテストコードを用意してあります。
`pytest`を用いたテストで機能を保証しています。
コントリビュートする際は、こちらのテストコードの作成もお願いします。

# おわりに

開発期間は約3日間ですが、今年の一つの目標であったツールを開発を達成できたので良かったです。ただ、現状開発者目線からみても使いづらいことや使用用途が限られているので、今後拡張していけたらと思っています。
興味がある方はぜひ一緒に開発しましょう。
Amazon Linux2 サーバーにVSCodeからSSH接続できなくなった場合の対応

# 概要
VSCodeからAmazon Linux2サーバーにSSH接続しているが、突然SSH接続できなくなったため、
SSH接続できない状態を回避する
回避方法としては以下を実施する
・Ver1.99からのバージョンダウン
・自動更新の無効化

:::note
補足
Ver1.99の次のバージョンがVer1.100になっていました(99⇒100)
バージョンの数え方にはお気をつけください

Ver1.100
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/d9f18277-ce03-45ee-9cb6-df7c7db60ce4.png)

Ver1.99
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/9279fa77-8ffc-4658-a78b-c5ca64e90b67.png)

Ver1.98
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/58a8b1ee-8915-4c84-bc16-a6616e840d45.png)

:::

# SSH接続できない原因
VSCodeのバージョンが「1.99」に自動更新され、SSH接続からAmazon Linuxが除外されたため

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/c58432cc-11a8-4589-8939-30ce51975bbd.png)

# 回避方法
##### 1\. VSCode(Ver1.99)のアンインストール
VSCodeを終了させてからVSCodeをアンインストールする

##### 2\. VSCode(Ver1.99より前のバージョン)のインストール
私の場合は、手元にVer1.98があったのでこちらをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/ebce4544-7770-417a-802c-d3546268eaba.png)

##### 3\. VSCodeの自動アップデートを無効化

インストールしたVSCodeを起動し[ファイル]-[ユーザー設定]-[設定]をクリック
検索ウインドウに[Update:Mode]を入力

Update: Modeの設定値が[default]になっているのでプルダウンから[none]を選択
・変更前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/cd44c888-4ce0-40fe-ae77-3f5752ba2e59.png)

・変更後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/13c648b8-5137-4b32-9825-71c78e6906ae.png)

[none]選択後に設定を有効にするためVSCodeを再起動するポップアップが表示されるので、
[再起動]をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4050047/58f9e491-d43b-4b04-9417-3b96b7c2ed1d.png)


##### 4\. 動作確認
・設定が維持されていること
・バージョンが自動更新されていないこと
・SSH接続ができること


:::note warn
注意事項
自動更新を無効化せずにVSCodeを終了してしまうと最新バージョンへのアップデートが実行されるためバージョンダウンしたVSCodeを起動させたら速やかに自動更新の無効化を設定しておくこと
【Next.js】next-sitemap でサイトマップを自動生成する方法

初めまして、ただの大学院生のわだです。
インプットだけでなくアウトプットも大事だなと最近思いはじめました。
実案件で詰まったところの解決方法を記事にしていきたいと思います。

Next.js で静的サイトを作っていると、SEO 対策として sitemap.xml を作成・出力したくなることがあります。

ですが、CMS を使っていたり、大規模なサイトになってくると、自分でサイトマップを管理・生成するのはだんだん面倒になってきますよね。

そこで今回は、実際の案件で導入した方法をもとに、next-sitemap を使って ビルド時に自動でサイトマップを生成する方法 を紹介します。

## 🎯 この記事でわかること
	•	next-sitemap の導入方法
	•	サイトマップと robots.txt の自動生成
	•	next export にも対応した設定方法

## ✅ 使用環境
	•	Node.js v20.18.1
	•	Next.js v15.03
	•	next-sitemap v4.2.3
	•	静的サイト出力（next export）

## 🔧 パッケージのインストール

まずは next-sitemap を開発依存として追加します。

    npm install --save-dev next-sitemap

## ✍️ next-sitemap.config.js を作成

    module.exports = {
      siteUrl: "https://example.com/", //サイトurl
      generateRobotsTxt: true, // robots.txt も自動生成する場合
      exclude: ["/404"],       // 除外したいページがあればここに記載
    };

## ⚙️ package.json にスクリプトを追加

    {
      "scripts": {
        "build": "next build",
        "postbuild": "next-sitemap"
      }
    }
postbuild スクリプトは、ビルドの後に自動で next-sitemap を実行してくれます。

## 🚀 ビルドしてみる

    npm run build
すると public/ ディレクトリに以下のファイルが生成されます。
	•	public/sitemap.xml
	•	public/robots.txt

## 📝 まとめ
	•	next-sitemap を使うと簡単に sitemap.xml を生成できる
	•	postbuild を使えばcmsなどでページが自動追加されても対応可能
	•	SEO 対策におすすめ

## 💬 コメント歓迎！

ご質問や補足があればコメントいただけると嬉しいです！
個人的備忘録：突然のHYPERVISOR_ERRORに備えるために知っておきたいことを整理してみた

## はじめに
受講しているITスクールの方が開発作業中に Windows のブルースクリーン（Stop code: `HYPERVISOR_ERROR`）に遭遇し、大きく作業を中断されてしまったことがありました。

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

この記事ではその体験を踏まえ、ブルースクリーンの原因や対処法についてまとめています。

## 書こうと思ったきっかけ
突然のブルースクリーンにより、保存していなかった作業が失われてしまい非常に困ったという話を聞きました。同様のトラブルに直面した人の参考になればと思い、記録として残すことにしました。

## ブルースクリーンメモ（Stop code: HYPERVISOR_ERROR）

ある日、仮想環境を操作中に突然ブルースクリーンが表示され、以下のエラーが表示されました：

**Stop code:** `HYPERVISOR_ERROR`

このエラーは、Hyper-Vなどの仮想化機能が正しく動作していない場合に発生することがあります。原因としては以下のようなものが考えられます：

- BIOS設定で仮想化支援機能（Intel VT-xやAMD-V）が無効
- ハードウェアの互換性問題
- 仮想化ソフトウェアやドライバの不具合
- Windowsアップデートやドライバー更新後の競合

### 対処方法
- BIOSで仮想化支援を有効にする
- Hyper-Vの有効/無効を切り替えてみる
- ドライバの更新やロールバックを試す
- Windows Updateや関連ソフトウェアの再インストール

ブルースクリーンが発生したときは、画面のエラーコードを写真で保存しておくと、後から調査やサポートに役立ちます。

## まとめ
- ブルースクリーンは突然発生するため、日頃からバックアップや復旧手順の準備が大切。
- 仮想化機能を使用している環境では、BIOS設定やドライバの整合性にも注意が必要。
- エラー内容を記録し、再発防止に向けた調査と対策を積極的に行うことが重要です。

## 参考文献

https://licensecounter.jp/engineer-voice/blog/articles/20240701_kiso_hyper-v_1_install.html

https://www.buffalo.jp/topics/trouble/detail/recovery_0040.html
ScrollablePositionedListを使ってみた

## はじめに
Flutterには、任意の位置までスクロール可能なListViewがありません。
他の言語のListViewだとscrollToで任意の位置までスクロール出来るから、同じようにやりたいと思って探してみると、この[scrollable\_positioned\_list](https://pub.dev/packages/scrollable_positioned_list)というパッケージを見つけました。
備忘録程度に書き残しておこうと思います。

## 使い方
### scrollTo
いくつか機能のあるパッケージですが、まずはscrollTo、これが一番やりたかった。
indexで指定したリスト位置までスクロールできる。
ピクセル等の指定ではないので、任意のアイテムを表示したいときに使いやすい。

```dart
itemScrollController.scrollTo(
  index: 150,
  duration: Duration(seconds: 2),
  curve: Curves.easeInOutCubic);
```

### jumpTo
スクロールではなく、特定の位置までジャンプさせることも可能。
こちらも、ピクセル等ではなく、indexで指定したリスト位置までジャンプする。

```dart
itemScrollController.jumpTo(index: 150);
```
Viteで始める高速Web開発 | 第4章: Viteの開発機能を活用

## はじめに
第3章でReactとViteを使ってToDoリストを作りました。今回は、Viteの開発機能をさらに掘り下げ、Hot Module Replacement（HMR）、プラグイン、環境変数を活用します。これで開発効率がさらに上がります。

## 目標
- HMRの動作を理解する  
- Viteプラグインを追加する  
- 環境変数を使って設定を管理する  

## Hot Module Replacement（HMR）
HMRは、コードを変更した際にページ全体をリロードせず、変更部分だけを即座に反映する機能です。Viteではデフォルトで有効になっています。

### HMRのテスト
`src/App.jsx`の`<h1>`を以下に変更：
```jsx
<h1>ToDoリスト (Vite HMRテスト)</h1>
```
保存すると、ブラウザが即座に更新されます。ToDoリストの状態も保持されたままです。

## プラグインの追加
Viteはプラグインで機能を拡張できます。例として、`@vitejs/plugin-legacy`を追加し、古いブラウザをサポートします。

### 1. インストール
```bash
npm install @vitejs/plugin-legacy --save-dev
```

### 2. vite.config.jsの設定
`vite.config.js`を更新：
```javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    react(),
    legacy({
      targets: ['IE >= 11'], // サポートするブラウザ
    }),
  ],
});
```

### 3. ビルド確認
```bash
npm run build
```
`dist/`にポリフィル付きのファイルが生成され、古いブラウザでも動作します。

## 環境変数の活用
環境変数で設定を管理すると、開発と本番環境を簡単に切り替えられます。

### 1. 環境変数の設定
`my-vite-react`フォルダに`.env`ファイルを作成：
```
VITE_API_URL=http://localhost:5000
VITE_APP_TITLE=私のToDoアプリ
```

### 2. App.jsxで使用
`src/App.jsx`を更新：
```jsx
import { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const addTodo = (e) => {
    e.preventDefault();
    if (input) {
      setTodos([...todos, { id: Date.now(), text: input }]);
      setInput('');
    }
  };

  return (
    <div className="App">
      <header>
        <h1>{import.meta.env.VITE_APP_TITLE}</h1>
      </header>
      <main>
        <form onSubmit={addTodo}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="タスクを入力"
          />
          <button type="submit">追加</button>
        </form>
        <ul>
          {todos.map((todo) => (
            <li key={todo.id}>{todo.text}</li>
          ))}
        </ul>
      </main>
    </div>
  );
}

export default App;
```
- `import.meta.env`で環境変数にアクセス。
- `VITE_`プレフィックスが必須。

### 3. 動作確認
`npm run dev`で起動し、タイトルが「私のToDoアプリ」に変わるか確認。

## 開発Tips
- **複数環境**: `.env.development`や`.env.production`で環境ごとに設定を分離。
- **デバッグ**: `console.log(import.meta.env)`で利用可能な変数を確認。

## 次回予告
第5章では、Viteで本番用ビルドを行い、アプリをデプロイする方法を学びます。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！
Eコマース向け3Dスキャンサービス：これまでにない方法で製品を展示

デジタル時代において、Eコマース業界の進化は目覚ましく、日々新たな技術が登場しています。従来の静止画像から、現在の動画やライブ配信まで、販売者はより効果的でリアルな商品プレゼンテーションを追求し続けてきました。その中で、近年注目されているのが「3Dスキャンサービス」です。これは単なるトレンドではなく、消費者体験を向上させ、商品の魅力を最大限に引き出す革新的なソリューションとなっています。

## なぜEコマースに3D表示が必要なのか？

従来の2D画像では、商品を限られた角度からしか見せることができず、消費者にとって形状や質感、サイズ感などを正確に把握するのが困難でした。マルチアングルの画像や高解像度の動画によってある程度は補えますが、特にジュエリー、インテリア雑貨、ハンドメイド商品など、細部の魅力が重要なアイテムにおいては十分ではありません。

3Dスキャンサービスは、実物をスキャンし、高精度の3Dモデルを生成することで、Webページ上に立体的な商品を再現します。ユーザーはモデルを360度回転させたり、拡大して細部を確認したりでき、まるで商品を実際に手に取って見ているかのようなインタラクティブな体験が可能になります。

## 3Dスキャンがもたらす商品展示の革新

3Dスキャン技術は、現実の物体をデジタル空間にリアルに再現します。スキャンプロセスには、実物の取り込み、3Dモデリング、ポストプロセス、そしてオンラインでの表示が含まれます。写真撮影とは異なり、3Dスキャンでは形状や曲面、質感、模様、陰影までも精密に再現されます。

![0c0a267fd584db56fdda0059da37e302.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3824290/008b83bf-2aaf-4abd-bf23-19d86bca400f.png)

https://www.revopoint3d.jp/

例えば、繊細な陶器の花瓶を考えてみましょう。写真では表面の凹凸や滑らかなカーブを伝えるのが難しいですが、3D表示であれば、それらのディテールを手に取るように観察できます。

## どのようなEコマース分野に適しているか？

あらゆるジャンルの商品に応用できますが、特に次のようなカテゴリーに効果的です：

- **ファッションアクセサリー**：時計、眼鏡、ジュエリーなど、形が複雑で細部にこだわりのある商品
- **家具・インテリア**：空間内でのサイズ感やスタイルとの相性を確認しやすくなります
- **工芸品・雑貨**：唯一無二の形状や質感をリアルに伝える必要がある商品
- **文創・コレクターアイテム**：オンライン展示やアーカイブとしても活用可能

## コンバージョン率とユーザー体験の向上

3D表示を取り入れた商品ページでは、ユーザーの滞在時間が長くなり、操作のインタラクションも増加する傾向があります。ある調査によると、3Dモデル付きの商品ページのコンバージョン率は、従来の画像ページと比べて最大1.5倍に達することもあります。

また、商品を正確に把握できることで、購入後の「思っていたのと違う」といった認識のズレによる返品・交換のリスクも軽減されます。

## 導入のハードルが低くなっている

かつては、3Dスキャン技術は高価で複雑なプロセスが必要でしたが、現在では中小規模の事業者でも利用しやすくなっています。専門業者に依頼してスキャンとモデリングを行うこともできますし、比較的安価な機材を使って自分でスキャンする選択肢もあります。

さらに、ShopifyやWooCommerce、楽天市場や淘宝（タオバオ）など、多くのECプラットフォームが3Dモデル表示に対応し始めており、技術的な導入障壁もどんどん下がっています。

## 長期的なブランド価値への貢献

3Dスキャンを取り入れることは、単なる一時的な売上向上にとどまりません。ユーザー体験や商品へのこだわりを示すことで、信頼できるブランドイメージを形成する重要な要素となります。

さらに、作成された3Dモデルは、バーチャル展示会や製品紹介ビデオ、AR・VRコンテンツなど、様々なチャネルで再活用できます。ひとつのモデルから複数のマーケティング展開が可能となり、投資価値の高いコンテンツ資産になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3824290/4dc06082-5e48-4928-a02c-2e9b7dd04716.png)

## 未来への展望：拡がる応用の可能性

AI生成コンテンツ（AIGC）やメタバース技術の進化により、3Dモデルの活用シーンはさらに広がっていくでしょう。たとえば、家具の3DモデルをARで自宅に投影したり、アクセサリーを仮想的に試着したりする体験が、近い将来には当たり前になるかもしれません。

消費者がよりインタラクティブに商品と接することで、購買決定までのプロセスが短縮され、購買体験自体がエンターテインメントとしての側面を持つようになるでしょう。

## 結びに

3Dスキャンサービスは、Eコマースにおける商品展示のあり方を根本から変えようとしています。競争が激化するオンライン市場において、よりリアルで魅力的な商品体験を提供できる企業が、ユーザーからの信頼と支持を勝ち取ることになるでしょう。

今こそ、この革新的な技術を導入し、未来のショッピング体験を共に創造していくタイミングです。
文献不安を解消！研究に役立つ16の文献管理ツール（AI機能付き）で読解から執筆まで効率アップ！



今日は、私が論文執筆（そして現在のコンテンツ制作や研究）で発見した「秘密兵器」を惜しみなく共有します。特に強力なAIアシスタントを中心に、論文執筆の効率を爆上げするツールを紹介します！

---

### 一、文献管理・読解：「大海原からの針探し」に別れを

**[SumiNote](https://suminote.com/)（超推奨！）**  
最近発見した文献読解の革命ツール！複数のPDF文献をアップロードするだけで、数分で要約・研究方法・結論を整理。全ての情報が元文献の該当箇所と紐付いており、AIの誤情報リスクなし。文献レビューや分野動向の把握に最適。   
**Zotero / Mendeley**  
無料文献管理ツール。ブラウザ拡張で文献情報を自動収集、引用リスト生成機能も。  
**Connected Papers**  
キーペーパーを入力すると関連文献マップを生成。研究トレンドを可視化。  
**Google Scholar / Semantic Scholar**  
AI駆動の文献検索エンジン。スマートな要約と関連論文推薦機能。  

---

### 二、会議記録・共同作業：思考の火花を逃さない

**[moosy.ai](https://moosy.ai/)（効率化の切り札！）**  
会議中にAIが議論を自動記録。構造化されたノートとアクションアイテムを生成。指導教員のアドバイスやチームのアイデアをキャッチ。  
**Tencent Docs / Google Docs**  
オンライン共同編集ツール。リアルタイム修正とバージョン管理が可能。  
**Overleaf**  
LaTeXユーザー向けオンライン編集プラットフォーム。テンプレート豊富。  

---

### 三、執筆支援：表現をスムーズに

**Grammarly**  
英語の文法チェックから文体改善まで。非ネイティブに最適。  
**QuillBot**  
AIリライトツール。表現の多様化と重複回避を支援。  
**DeepL翻訳**  
自然な翻訳品質で外国語文献の理解をサポート。  

---

### 四、プレゼン・コミュニケーション：研究成果を光らせる

**[flowprompter.app](https://flowprompter.app/)（プレゼン神器！）**  
透明型テレプロンプター。原稿を自然に読み上げつつカメラ目線を維持。  
**芦笋デモ（ルーサンデモ）**  
画面録画＋解説動画作成ツール。研究方法のビジュアル化に最適。  
**白瓜面接（シロウリメンセツ）**  
音声/画像認識機能でオンライン議論をサポート。国際会議での情報整理に。  
**Canva**  
デザイン未経験でも美しいプレゼン資料を作成。  

---

### 五、スキルアップ：分野特化型ツール

**[SayUp.net](https://sayup.net/)（日本語学習者向け）**  
発音練習・誤答分析機能付き無料学習サイト。日本語文献研究に必須。  
**B站/YouTube**  
SPSS・Pythonなど専門ソフトのチュートリアル動画が豊富。  

---

### まとめ

論文執筆は困難な作業ですが、適切なツールを使えば劇的に効率化できます。SumiNote（文献分析）、moosy.ai（会議記録）、flowprompter.app（プレゼン）などのAIツールを駆使し、創造的な思考にリソースを集中させましょう。ツールはあくまで補助輪ですが、これらの「デジタル相棒」が研究生活を確実にラクにします。卒業論文/投稿論文の完成を心から応援しています！
LinuxでDjangoのバージョンをすぐに確認するコマンド

## Djangoのバージョン確認したいとき

Python で `import django` して `print(django.get_version())` とか書くの面倒くさい…  
そんなときに **一行で Django のバージョンを確認する方法**があったので共有させていただきます。

---

## ✅ 方法

terminal（ターミナル）で以下のコマンドを打つだけ👇

```bash
python3 -m django --version
```

---

## 🖨️ 実行結果（例）

```text
5.1.7
```

---

## 🧠 補足

- Ubuntu では `python` が `python3` にリンクされていない場合があるため、`python3` を使おう
- Django がインストールされていない場合は `ModuleNotFoundError` になるので注意！

---

## ✅ まとめ

| やりたいこと | コマンド |
|--------------|----------|
| Djangoのバージョン確認 | `python3 -m django --version` |

1行で終わるから、毎回 `python` 起動 → import → print... の手間いらず！
Pythonで「おしり曲面」を描画する。

pythonで、「おしり曲面」を描画します。
おっぱい曲面の方程式の自然対数を取ると、尻のような形状の曲面になります。今、「尻」という下品な言葉を使ってしまいましたが、「お尻」とすると上品に、「おみ尻」とすると更に上品に、「おみお尻」とするとますます上品になってくるでしょう。

`pyqt5`と、`opengl`のインストールが必要です。

出典は以下より。

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13116367118

#### コード

`python oshiri.py`で実行してください。

```oshiri.py
from PyQt5.QtWidgets import QApplication,QWidget
import pyqtgraph.opengl as gl
from math import * 

def bust(x,y):
    return 1/8* (6*exp(-((2/3*abs(x) - 1)**2 + (2/3 *y)**2) - 1/3*(2/3*y + 1/2)**3)+ 2/3 *exp(-2.818**11*((abs(2/3*x) - 1)**2+ (2/3 *y)**2)**2) + 2/3*y - (2/3*x)**4)

def draw_oshiri(x, y, distance,pxl=2):

    app = QApplication([])
    w = gl.GLViewWidget()
    w.resize(600,400)
    w.opts['distance'] = distance
    w.show()
    w.setWindowTitle('Oshiri')

    p=[ [ xp,yp,log(abs(bust(xp,yp)))] for xp in x for yp in y ]

    plt=gl.GLScatterPlotItem(pos=p,color=(1,1,1,1),size=pxl)
    w.addItem(plt)

    app.exec_()

def linspace(a,b,n):
    return [ a+i*((b-a)/n) for i in range(n+1)]

def main():
    nx=100
    ny=50
    x=linspace(-3.0,3.0,nx)
    y=linspace(-3.0,3.0,ny)
    draw_oshiri(x,y,10,pxl=2)

if __name__=='__main__':
    main()
```

ただ、おっぱい曲面の自然対数を取るだけでは関数のドメインエラーが出てしまうので、まず絶対値(abs)を取ることが必要でした。負の数の自然対数は取れないので。

#### 実行結果

![screenshot-2025-04-01 22-44-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315399/d128f0c1-978c-4d01-8adf-9e1fda6f1b90.png)

おしりに見えなくもないが、ちょっと違いますね。まあこんなものでしょう。

僕の使っていいよ。

下品なことを書いてしまいましたが、改心するので、ちょっと待っててください。お許しを。
AIニュース：MidJourney v7発表、Llama口碑崩壊、Microsoft Copilotの進化

AI技術は日々進化を続け、業界に新たな革命をもたらしています。

最近では、特に「MidJourney v7の発表」「Llamaの期待外れな反響」「Microsoft Copilotの進化」といったトピックが注目されています。

本記事では、これらのニュースを詳しく解説し、それぞれの影響や背景についても深堀りします。

「今無料」おすすめの生成AIツール

https://ai.tencho-ex.com/



# 1. MidJourney v7の発表
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4028918/d1f1e50c-164d-4004-9a5f-37e0a8a1c2f2.png)

MidJourneyは、ユーザーが自然言語を使って画像を生成できる人気のAIツールです。MidJourney v7は、前バージョンから大きな進化を遂げ、多くの新機能と改善点が追加されました。この新バージョンは、特に画像生成の精度と処理速度の向上が注目されています。

## 新機能と改善点
画像解像度の向上: MidJourney v7では、生成される画像の解像度が大幅に向上しました。これにより、画像がさらに細かく、鮮明になり、プロフェッショナルな仕上がりが期待できます。特にアートやデザインの分野では、その精度の向上が高く評価されています。

生成速度の改善: より高速に画像を生成できるようになり、ユーザーの待機時間が短縮されました。これにより、クリエイティブなプロジェクトでスムーズなワークフローが実現します。

インターフェースの改良: 新しいUIは、直感的に操作しやすく、初心者でも扱いやすい設計に変更されました。また、複雑なコマンドを簡単に操作できるように改善されています。

## ユーザーの反応と評価
新しいバージョンに対して、ユーザーの反応は概ね好評です。特に、画像の品質向上と生成速度の改善に対する期待が大きいです。しかし、一部では、新しい機能に対する学習曲線が高く感じられ、初めて使うユーザーには取っつきにくい部分もあるようです。具体的には、AIの命令や調整がより精密に要求されるため、熟練したユーザーにとっては新機能を使いこなすための試行錯誤が必要です。

# 2. Llamaの口碑崩壊
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4028918/36083a98-0074-4b0f-887e-3058b9816418.png)

Llamaは、AI技術の中でも特に注目されていた自然言語処理（NLP）ツールです。しかし、リリース後、その口碑は急速に崩れました。Llamaが初めに発表された時には、非常に高い期待が寄せられていましたが、実際にはその性能が期待を裏切る結果となりました。

## 期待外れだった理由
Llamaは、自然言語処理における最先端技術を搭載し、人間に近い応答を生成することを目指していました。しかし、以下の問題がユーザーの不満を引き起こしました。

精度の低さ: Llamaの応答がしばしば不正確であったり、曖昧だったりすることが問題となりました。他のAIツール（例えば、GPT系統）と比較して、文脈を正確に理解しきれない場面が多く見られました。

遅い処理速度: Llamaの処理速度が遅く、リアルタイムでの応答に遅延が発生することがありました。特に大規模なデータセットを扱う際に、パフォーマンスが低下する点がユーザーから指摘されています。

不完全なデータセット: Llamaの学習データセットに不完全な部分があり、そのため特定のトピックや文脈に対して不十分な知識しか持っていないことが多かったです。この欠陥は、特に専門的な分野で顕著に表れました。

## ユーザーからの批判と問題点
ユーザーからの批判は主に性能に関するもので、SNSやレビューサイトでは「期待外れ」や「他のツールに比べて使い物にならない」といった声が広がっています。特に、Llamaがリリースされた時点では、競合他社のツールが既に高い精度を誇っていたため、Llamaの性能不足が浮き彫りになった形です。開発チームはこれらのフィードバックを受け、改善を約束していますが、現段階では大きな進展が見られていません。

# 3. Microsoft Copilotの進化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4028918/fc81b6cf-2243-4ff8-af67-929f74e4df19.png)

Microsoft Copilotは、Microsoft 365の製品群に組み込まれたAIアシスタントで、ユーザーの作業を支援するツールです。最近では、このCopilotがさらに進化し、業務の効率化を支援する新機能が追加されました。

## 新しい機能と活用事例
高度な文書生成: Copilotは、WordやExcelなどのMicrosoft 365製品に組み込まれ、ユーザーの指示に基づいてレポートやプレゼンテーションを自動で作成できる機能を搭載しました。これにより、文章作成やデータ分析の作業を大幅に短縮できます。

データ分析支援: ExcelやPower BIとの連携により、大量のデータを迅速に分析し、意味のあるインサイトを抽出する機能が強化されました。ユーザーは、複雑な数式やグラフを簡単に作成できるようになり、データに基づく意思決定をより迅速に行えるようになっています。

会話型インターフェース: Copilotは、従来のコマンドベースの操作に加えて、ユーザーと会話を通じて指示を与えることができる機能を実装しました。これにより、より自然な操作が可能となり、業務のスムーズな進行が実現しました。

## Microsoft Copilotがもたらす未来の展望
Microsoft Copilotは、単なるアシスタントツールにとどまらず、業務のパートナーとして活躍できるよう進化しています。特に、Copilotが提供する文書作成支援やデータ分析機能は、特に企業の業務効率化に大きな影響を与えるでしょう。また、AIの進化により、さらに多くの機能が追加されることが予想され、Microsoft 365のユーザーにとってはますます欠かせないツールとなるでしょう。

# まとめ
本記事では、AI分野での最近の注目ニュース「MidJourney v7の発表」「Llamaの口碑崩壊」「Microsoft Copilotの進化」について詳しく解説しました。それぞれのツールやサービスには、明確な利点とともに改善点が存在し、今後の進展が非常に楽しみです。これらの情報をもとに、AI技術の進化に対する理解を深め、未来の可能性について考えていきましょう。
【SQL】hashアルゴリズム

# はじめに

こんにちは。アメリカに住みながら独学でエンジニアを目指しているTairaです。
現在、SQLを勉強しており、その中でも内部結合や外部結合などを学習しています。
これらの結合では、Nested Loops、Hash、Sort Merge といったアルゴリズムが採用されることがあります。
本記事では、その中でもhashについて解説していきます。

## ハッシュアルゴリズムとは？

RDBMS（リレーショナルデータベース管理システム）でテーブルを結合する際に使われる代表的な手法のひとつに「ハッシュ結合（Hash Join）」があります。特に**等値結合（equi-join）**において高いパフォーマンスを発揮するこのアルゴリズムは、Nested LoopsやSort-Merge と並ぶ重要な結合戦略のひとつです。

---

### ハッシュ結合の基本手順

1. **小さいテーブルAをフルスキャンする**
2. **Aの結合キーをハッシュ化し、ハッシュテーブルを作成する**
3. **大きいテーブルBをフルスキャンし、Bのキーを使ってハッシュテーブルに照合、一致するレコードを返す**

この手順によって、大量のデータから効率的に一致する行を検索できます。

---

### なぜ小さいテーブルから処理するのか？

ハッシュテーブルは一時的に**DBMSのワーキングメモリ**に保存されます。そのため、ハッシュ化されるテーブルが小さいほど、
- メモリ使用量が少なく済む
- ディスクI/Oが発生せず高速に照合できる

といったメリットがあります。

---

### ハッシュ結合の特徴と制約

-  **メモリ使用量が多い**：Nested Loopsと比べ、ハッシュテーブルを保持するために大きなメモリを必要とする。
-  **ディスクI/Oのリスク**：ハッシュテーブルがメモリに収まらない場合はストレージにスピル（退避）され、処理が遅くなる。
-  **等値結合専用**：ハッシュ値は元の値の順序を保持しないため、範囲条件などの結合には利用できない。

---

### ハッシュ結合が有効なケース

-  **Nested Loopsで適切な駆動表が存在しない場合**
-  **小さいテーブルを駆動表にできても、内部表のヒット件数が多い場合**
-  **内部表にインデックスが存在しない、または作成できない場合**

これらのケースでは、ハッシュ結合を使うことでパフォーマンスを大幅に改善できることがあります。

---

### まとめ

ハッシュ結合は、大量データを高速に結合できる強力な手法ですが、**十分なメモリの確保**や**等値結合であること**など、適用条件を意識することが重要です。Nested LoopsやSort-Mergeとの使い分けを理解し、実行計画を読み解く力をつけることで、より効率的なSQLチューニングが可能になります。
Viteで始める高速Web開発 | 第2章: プロジェクト構造と仕組み

## はじめに
第1章でViteの基本と初期設定を学びました。今回は、Viteのプロジェクト構造を詳しく見て、その仕組みを理解します。Reactを使った簡単なページを作りながら、Viteの特徴を体験します。

## 目標
- Viteのプロジェクト構造を把握する  
- 開発サーバーとビルドプロセスの仕組みを知る  
- 簡単なページを作成する  

## Viteのプロジェクト構造
Viteプロジェクトのデフォルト構造は以下の通り：
```
my-vite-app/
  ├── node_modules/       # 依存関係
  ├── public/            # 静的ファイル
  │   └── vite.svg       # サンプル画像
  ├── src/               # ソースコード
  │   ├── App.jsx        # メインコンポーネント
  │   ├── main.jsx       # アプリのエントリー
  │   └── index.css      # グローバルスタイル
  ├── index.html         # HTMLテンプレート
  ├── package.json       # 依存関係とスクリプト
  ├── vite.config.js     # Vite設定ファイル
```
- **`index.html`**: アプリの基盤。`<script type="module">`で`main.jsx`を読み込み。
- **`src/main.jsx`**: Reactを初期化し、`App.jsx`をレンダリング。
- **`vite.config.js`**: サーバーやビルドの設定をカスタマイズ。

## Viteの仕組み
### 開発サーバー
Viteは、ブラウザのネイティブES Modulesを活用します。従来のツール（例: Webpack）のように開発時に全てをバンドルせず、必要なモジュールだけをオンデマンドで提供。これにより、起動と更新が高速です。

試しに`src/App.jsx`を編集し保存すると、Hot Module Replacement（HMR）で即座に反映されます。

### ビルドプロセス
本番用ビルドでは、Rollupが使われます。コマンドは：
```bash
npm run build
```
生成された`dist/`フォルダには、最適化されたファイルが出力されます。プレビューするには：
```bash
npm run preview
```

## vite.config.jsの基本設定
`vite.config.js`を開き、簡単なカスタマイズを試します：
```javascript
export default {
  server: {
    port: 3000, // デフォルトポートを変更
  },
  base: '/my-app/', // 本番時のベースパス
};
```
`npm run dev`を再実行すると、`http://localhost:3000`で動作します。

## 簡単なページの作成
`src/App.jsx`を以下に更新して、シンプルなページを作ります：
```jsx
import './App.css';

function App() {
  return (
    <div className="App">
      <header>
        <h1>Viteで作るページ</h1>
      </header>
      <main>
        <p>こんにちは、Viteの世界へようこそ！</p>
      </main>
      <footer>
        <p>© 2025 Vite入門</p>
      </footer>
    </div>
  );
}

export default App;
```

`src/App.css`を更新：
```css
.App {
  text-align: center;
  font-family: Arial, sans-serif;
}

header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

main {
  padding: 20px;
}

footer {
  background-color: #f1f1f1;
  padding: 10px;
}
```

## 動作確認
`npm run dev`で起動し、`http://localhost:3000`を確認。ヘッダー、本文、フッターが表示されれば成功です。

## 次回予告
第3章では、ViteでReactを本格的に使い、動的なUIを作ります。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！
組込み機器におけるアプリケーション起動までの流れの概要

経緯
組込み機器の場合、電源ONしたら自動的にアプリケーションが起動すると思われるが、その仕組みがわからなかったため以下の質問をした。（アプリケーション自体の記述方法が特殊なものなのかが知りたかったため、main関数が呼ばれると思っていいのかを聞いている。）

質問：「組込み機器の場合、OSが自動的にプログラムを起動する必要があると思われますが、起動されるプログラムは普通にmain関数が最初に呼ばれるのでしょうか？」

以下はChatGPTの回答。

---

組込み機器におけるプログラムの起動方法について説明します。

組込みシステムでは、一般的なコンピュータのようにオペレーティングシステム（OS）がすべての管理を行うわけではなく、特にリアルタイムオペレーティングシステム（RTOS）やノンOS環境では、プログラムの起動の仕組みが少し異なります。具体的に、起動時に最初に呼ばれる関数は、一般的には `main` 関数ではなく、システムの設計によりますが、以下のような流れになります。

### 組込み機器のプログラム起動手順

1. **ブートローダ**  
   最初に組込み機器が起動すると、**ブートローダ**（Bootloader）が実行されます。ブートローダは、ハードウェアの初期化を行い、その後、実行可能なプログラム（OSやアプリケーション）をメモリにロードして実行します。

2. **システムの初期化**  
   ブートローダがプログラムをロードした後、プログラムの初期化が行われます。この初期化は、ハードウェアや周辺機器の設定、クロックの設定、メモリの管理などを含みます。

3. **エントリーポイント**  
   プログラムが開始する際、特にリアルタイムOS（RTOS）やノンOS（bare-metal）環境では、最初に呼ばれる関数は `main` ではなく、システム固有のエントリーポイントであることが一般的です。このエントリーポイントは、OSやハードウェアに依存します。例えば、RTOSを使用する場合は、最初にOSの初期化関数が呼ばれ、その後タスクの管理が始まります。

4. **`main` 関数の呼び出し（OSが存在する場合）**  
   OSが存在する場合、OSの初期化が完了した後に `main` 関数が呼ばれるのが一般的です。OSがプログラムの制御を渡すとき、`main` がその実行の最初の関数となります。特に、POSIX互換のOSやRTOSが搭載されている組込みシステムでは、最初にOSがロードされ、タスクやスレッドが作成され、その後にアプリケーションのコードが `main` 関数から始まります。

5. **ノンOS環境（bare-metal）**  
   ノンOS環境やRTOSが使われていないシステム（bare-metal環境）では、OSの管理がないため、アプリケーションは直接ハードウェアとやり取りします。この場合、最初に呼ばれる関数は、スタートアップコード（スタートアップファイル）であり、`main` 関数はその後に呼ばれます。スタートアップコードは、システムの初期化（メモリの設定、割り込みの設定、スタックの設定など）を行います。

### 起動時の流れ（概要）

1. **ブートローダ** が起動し、ハードウェアを初期化。
2. 必要なプログラムをメモリにロード。
3. システム初期化関数が実行され、ハードウェアの設定が行われる。
4. OSがあれば、OSのカーネルが初期化され、タスクやスレッドを管理開始。
5. **`main` 関数** が呼ばれる（OSがある場合）。
6. ノンOS環境では、スタートアップコードが実行された後、`main` が呼ばれる。

### まとめ

- **OSがある場合**: 最初に呼ばれるのは `main` 関数ですが、それまでにOSの初期化が行われます。
- **RTOSやノンOSの場合**: 最初に呼ばれる関数は `main` ではなく、システム初期化用のコードやエントリーポイントとなることが多いです。
- **ブートローダ** がシステムを起動し、最初に実行されるプログラムはブートローダの設定に依存します。

組込みシステムでは、特にハードウェアやOSがシンプルであるため、`main` 関数が呼ばれる前に多くのシステム初期化が必要になります。そのため、`main` は多くの場合、ハードウェアが準備できた後に実行されるコードの一部となります。
Viteで始める高速Web開発 | 第1章: Viteの紹介と初期設定

## はじめに
Viteは、現代のWeb開発を高速化するための次世代ビルドツールです。ReactやVueなどのフレームワークと相性が良く、開発体験を劇的に向上させます。このシリーズでは、Viteの基本から応用までを学び、実践的なアプリを作ります。  
第1章では、Viteの概要とプロジェクトの初期設定を紹介します。

## 目標
- Viteとは何かを理解する  
- ViteとCreate React App（CRA）の違いを知る  
- 最初のViteプロジェクトを立ち上げる  

## Viteとは？
Viteは、Evan You（Vue.jsの作者）によって開発されたビルドツールです。特徴は以下の通り：
- **高速な開発サーバー**: ネイティブES Modulesを活用し、バンドルせずに即座に動作。
- **効率的なビルド**: Rollupを使って本番用のコードを最適化。
- **柔軟性**: React、Vue、Svelteなど多様なフレームワークに対応。

## ViteとCreate React Appの比較
| 特徴              | Vite                | Create React App     |
|-------------------|---------------------|----------------------|
| 開発サーバーの速度 | 非常に高速（HMR対応） | 遅め（Webpack依存）  |
| ビルドツール      | Rollup             | Webpack             |
| 設定の簡単さ      | 最小限で済む        | 複雑な設定が必要     |
| ES Modules        | ネイティブ対応      | ポリフィルが必要     |

Viteは、特に開発時のスピードとシンプルさに優れています。

## 必要なツール
- **Node.jsとnpm**: 最新版を公式サイトからインストール。
- **エディタ**: VS Codeを推奨。
- **ターミナル**: コマンド操作用。

インストール後、バージョンを確認：
```bash
node -v
npm -v
```

## Viteプロジェクトの作成
Viteでプロジェクトを始めるのは簡単です。以下のコマンドを実行：
```bash
npm create vite@latest
```
指示に従い、以下を選択：
- プロジェクト名: `my-vite-app`
- フレームワーク: `React`
- バリアント: `JavaScript`（または`TypeScript`）

プロジェクトフォルダに移動し、依存関係をインストール：
```bash
cd my-vite-app
npm install
```

## プロジェクトの起動
開発サーバーを起動：
```bash
npm run dev
```
`http://localhost:5173`にアクセスすると、Viteのデフォルトページが表示されます。  
「Vite + React」のロゴとカウンターが見えたら成功です！

## プロジェクト構造
生成されたフォルダは以下の通り：
```
my-vite-app/
  ├── node_modules/
  ├── public/
  │   └── vite.svg
  ├── src/
  │   ├── App.jsx
  │   ├── main.jsx
  │   └── index.css
  ├── index.html
  ├── package.json
  ├── vite.config.js
```
- `index.html`: アプリのエントリーポイント。
- `src/main.jsx`: Reactの初期化。
- `vite.config.js`: Viteの設定ファイル。

## 次回予告
第2章では、Viteのプロジェクト構造とその仕組みを詳しく見ていきます。お楽しみに！

---

この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！
React.Fragment・`<></>`とは


## はじめに

Reactを使用してコンポーネントを作成する際、複数の子要素を一つの親要素でラップする必要があります。しかし、不要なDOMノードを増やしたくない場合、**フラグメント (Fragment)** を利用することで、追加のDOM要素を作成せずに子要素をグループ化できます。Reactでは、`React.Fragment`とその短縮記法である`<></>`を使用してフラグメントを作成できます。本記事では、これら二つの違いと使い分けについて詳しく解説します。

## React.Fragmentとは

`React.Fragment`は、複数の子要素を一つの親要素で包みつつ、実際のDOMには余分なノードを追加しないためのコンポーネントです。これにより、無意味な`<div>`やその他の要素を挿入せずに、クリーンなDOM構造を保つことができます。

### 使用例

```jsx
import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>タイトル</h1>
      <p>コンテンツ</p>
    </React.Fragment>
  );
}

export default MyComponent;
```

上記のコードでは、`<h1>`と`<p>`が`React.Fragment`でラップされていますが、実際のDOMには`React.Fragment`に対応する要素は追加されません。

## 短縮記法：`<></>`

`React.Fragment`をより簡潔に記述するための短縮記法が`<></>`です。これにより、コードの可読性が向上します。

### 使用例

```jsx
import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>タイトル</h1>
      <p>コンテンツ</p>
    </>
  );
}

export default MyComponent;
```

短縮記法でも、`React.Fragment`と同様に動作し、DOMに余分なノードを追加しません。

## React.Fragmentと`<></>`の違い

### 1. 属性（props）の使用

`React.Fragment`は属性（props）を受け取ることができますが、短縮記法の`<></>`は**属性を指定できません**。

#### キー属性の使用

リストをレンダリングする際、各フラグメントに`key`属性を指定したい場合があります。この場合、短縮記法では`key`を指定できないため、`React.Fragment`を使用する必要があります。

```jsx
// 正しい例
import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <React.Fragment key={item.id}>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

export default ItemList;
```

```jsx
// エラーになる例
function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </>
      ))}
    </ul>
  );
}
```

上記のエラー例では、`key`属性を指定していないため、Reactはリストアイテムの差分を正しく認識できません。

### 2. 開発者ツールでの表示

`React.Fragment`を使用すると、React開発者ツールで`<React.Fragment>`として明示的に表示されます。一方、短縮記法のフラグメントは匿名の要素として表示されるため、デバッグ時に識別しづらい場合があります。

### 3. ネストしたフラグメント

特定の状況では、フラグメントをネストする必要があるかもしれません。この場合でも、`React.Fragment`と短縮記法は同様に動作します。ただし、属性を持たせたい場合は`React.Fragment`を使用します。

## まとめ

- **共通点**:
  - どちらも複数の子要素をラップし、DOMに余分なノードを追加しない。
- **`React.Fragment`の特徴**:
  - 属性（props）を指定できる（`key`属性など）。
  - 開発者ツールで名前付きで表示される。
- **短縮記法`<></>`の特徴**:
  - コードを簡潔に記述できる。
  - 属性を指定できない。

## 使い分けのポイント

- **属性が不要な場合**:
  - 短縮記法`<></>`を使用してコードを簡潔に。
- **`key`属性や他の属性が必要な場合**:
  - `React.Fragment`を使用する。

## 参考情報

- [React公式ドキュメント - フラグメント](https://ja.reactjs.org/docs/fragments.html)
- [React公式ドキュメント - フラグメントの短縮記法](https://ja.reactjs.org/docs/fragments.html#short-syntax)
旧帝非情報理系がエンジニア就職するまでの道のり vol.01

### 現在の状況

・大阪大学理系の非情報系学科　新3回生
・授業ではC言語でソートアルゴリズムを実装したくらい（課題はほぼChatGPTにやらせてた）
・独学でUdemyのWebdeveloperBootCamp2023を受講中
・html,css,javascriptの文法を理解したレベル
・AtcoderのB問題を悩んだら、なんとか解けるレベル
・ITパスポート合格


### エンジニア就職を目指すまでの流れ
・大学受験までは情報系に進みたいと思っていたが、入試で失敗をして第２志望学科へ。２年に上がる時のコース選択でも単位を一つ落としたことにより、人工知能系ではなく、機械系コースへ進学。授業は数学と力学ばかりで全く面白くなく、院で研究するモチベが湧かず、学部就職を考える。

・ソフトウェアエンジニアでの就職を考えるも、現在の技術力では学歴ポテンシャル採用で大手SIerに就職するくらいしか選択肢がなさそう。新卒はソフトウェアエンジニアとしてキャリアをスタートしたいと考え、情報の院に進学することで猶予期間を延ばして、その間にインターンして、いろんな企業を経験しながら開発経験を積もう！

・就職に焦って勢いで応募したインターンの説明会に参加し、流れで面接を受けることに。

・コーディングテスト全くできなかったけど、これから死ぬ気で頑張るという条件つきで、メガベンチャーの長期インターンに合格？？？　　←イマココ


### これから
自分のような、ただの初心者を有給でインターンとして拾ってくれるなんて、この企業は優しすぎる。元々、この企業は、自分の好きな企業ランキングトップクラスの企業だったので、無給でもなんでも働かせてくださいという気持ち。

とりあえず、インターンが始まるまで1ヶ月弱あるので、やっておけと言われたrailstutorialを毎日死ぬ気で勉強していく。その過程をここにできるだけ投稿していくことで、自分のやる気継続に繋がるといいな。
AWS × Linux × Nginx：環境構築とシンボリックリンク・権限の整理メモ

## 目的
AWSにLinuxとNginxを導入して、Webアプリの環境構築をしていく中で、
「権限設定どうだっけ？」「シンボリックリンクってどう使うんだっけ？」と迷うことがよくある。

この記事では、自分自身の理解を深め、再利用できるように設計・権限周りを整理しておく。

---

## ディレクトリ構成の基本

### プロジェクトフォルダの置き場所

- 実際のプロジェクトコードは、`~/` 以下（例：`/home/ubuntu/web/your-project`）に置くのが一般的。
- 公開用フォルダ（Nginxのドキュメントルート）は `/var/www/` 以下。

### なぜ2つに分けるのか？

- **公開エリアと管理エリアを分離**するため。
- 公開用の `/var/www/your-project` には、実際のプロジェクトの中身を置かず、**シンボリックリンクを貼る**のが基本。

```bash
sudo ln -s /home/ubuntu/web/your-project/public /var/www/your-project
```

これで `/var/www/your-project` を Nginx が root として扱い、実態は `~/web/your-project/public` にある。

### シンボリックリンクのメリット

- 本体を動かさずに切り替えが可能
- デプロイのたびに `/var/www/your-project` の中身を削除・コピーする必要がない
- 複数のバージョンを切り替えるのも簡単（例：v1, v2, v3 に切り替え）

---

## クライアントリクエストの流れと Nginx の役割

- クライアントから HTTP リクエストが来る
- Nginx がリクエスト内容を見て適切なファイル or 処理へ振り分ける
- **静的サイトならそのままファイルを返す**
- **動的サイト（PHPなど）は php-fpm へ処理を渡す**

---

## 静的サイト（HTML/CSS/JS）の Nginx 設定例

```
server {
    listen 80;
    server_name example.com;
    root /var/www/your-project;

    location / {
        try_files $uri $uri/ =404;
    }
}
```

→ 静的ファイルをそのまま Nginx が `www-data` ユーザーとして読み取って返す。

---

## 動的サイト（PHP）の場合

```
server {
    listen 80;
    server_name example.com;
    root /var/www/your-project;

    index index.php;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
    }
}
```

---

## php-fpm と Nginx の関係

- Nginx は `.php` ファイルを直接処理できない。
- `fastcgi_pass` を使って php-fpm に処理をバトンパスする。
- PHP-FPM 側が `.php` ファイルを読み取り・実行して、結果（HTML）を Nginx に返す。

つまり、**ファイルの読み取りが必要なのは php-fpm 側のユーザー（`www-data`）**。

---

## 権限の整理

### `ls -l` の見方（例）

```bash
-rw-r--r-- 1 ubuntu ubuntu 1234 Apr 8  index.php
```

- 所有者：`ubuntu`
- 所有グループ：`ubuntu`
- その他：読み取り可能

この場合、`www-data`（その他ユーザー）としては、**読み取りはできるが、ディレクトリの移動には実行権限も必要**。

権限については以下の記事で詳しく触れた。
https://qiita.com/TechCraft/items/82ea8a4e1719592434d1

### フォルダに必要な権限

- フォルダは「実行（`x`）権限」がないと中に入れない（読み取りできない）
```bash
chmod o+x /home/ubuntu/web/your-project
```
docker system pruneしてもストレージが空かないときの対処法【備忘録】

## 結論

WSLを使ってる場合は`docker system purne`するだけだと本体ストレージに反映されないので、仮想ディスク（vhdx）を圧縮する必要がある！

## 実行環境
- Windows 11
- WSL2（Hyper-V付き）
- Docker Desktop

## 前提
- `docker system prune`等で不要なイメージなどを削除済み。

## 1. 容量圧迫しているファイルを探す

まずは、ストレージを圧迫しているファイルを特定します。DiskInfoが個人的に見やすかったです。

https://forest.watch.impress.co.jp/library/software/diskinfo/

ここで、容量を大きく使っているファイルが .vhdx だった場合は、仮想ディスクが圧縮されていないことが原因です。

僕の場合はここにありました↓
`C:\Users\ユーザー名\AppData\Local\Docker\wsl\disk\docker_data.vhdx`


## 2. Docker DesktopとWSL2を停止する

WSL2やDocker Desktopが起動していると圧縮に失敗するので、事前に停止しておきます。

Docker Desktopはアプリから停止します。
左下の三点リーダーアイコン＞Quit Docker Desktopで停止できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3535910/12301f2a-4b35-43dc-b200-b095105adce2.png)

WSL2はPowerShellから`wsl --shutdown`を実行します。


## 3．Optimize-VHDで圧縮を行う

PowerShellを**管理者権限**で実行します。

コンソールを開いたら、下記のように`Optimize-VHD`コマンドを実行します。
> Optimize-VHD は、WSL2で使用されている .vhdx 仮想ディスクの空き領域を圧縮するためのPowerShellコマンドです。

圧縮対象のパスには、1で見つけたファイルのフルパスをメモっておいて貼り付けてください。

```powershell
PS > Optimize-VHD {圧縮対象のパス} -Mode Full
```
このコマンドを実行すると対象の仮想ディスクが圧縮されます。

実際にDiskInfoでもう一度確認してみると、80GBもストレージを開けることに成功しました！
User Access Fundamentals Superbadge Unit



https://trailhead.salesforce.com/content/learn/superbadges/superbadge_object_access_sbu

+ 組織全体のデフォルトを通じてレコード アクセスを確立します。
+ プロファイルとそのア​​クセスを作成および変更します。
+ 標準オブジェクトとカスタム オブジェクトへのアクセスを管理します。
+ 権限セットと権限セット グループを作成します。


# マーケティング統合ユーザー設定

マーケティング統合ユーザーのカスタム プロファイルと名前付きユーザー レコードを作成します。次に、カスタムの一括メール オブジェクトを作成し、組織全体の共有設定を設定します。

何もしないで検証ボタンをクリックする



:::note alert
We can't find the 'Marketing Email Integration User' profile. Make sure it's the only profile with this label and it has a description.
:::


descriptionに適当に入力したら解消した




:::note alert
We can't find the expected Login IP Range for the 'Marketing Email Integration User' profile.
:::

Save this IP Range even though it does not cover my current IP addressにチェックいれて強制的に保存


:::note alert
We can't find a user with the 'Marketing Email Integration User' profile and a username that includes 'marketingintegrationuser'.
:::


:::note alert
We can't find the 'Bulk_Mail__c' custom object.
:::

:::note alert
We can't find the expected organization-wide sharing settings for the 'Bulk_Mail__c' custom object.


「Bulk_Mail__c」カスタム オブジェクトに期待される組織全体の共有設定が見つかりません。
:::

あああ、設定完了のメールが届く前にチェックしたらエラーになった


# マーケティング統合ユーザーアクセス

要件に基づいて、統合ユーザーのアクセス ソリューションを作成します。


何もしないで検証ボタンをクリックする

:::note alert
We can't find the 'Marketing_Email_Integration_User' permission set. Make sure it has a description.
:::



# 追加のユーザーアクセス

バルク メール オブジェクトのフィールドへの追加のユーザー アクセスを許可するアクセス ソリューションを作成します。次に、要件に従ってこの新しいソリューションを他のソリューションとバンドルし、グループ割り当てを可能にします。

何もしないで検証ボタンをクリックする

:::note alert
We can't find the 'Bulk_Mail_Read_Access' permission set. Make sure it has a description.
:::

:::note alert
We can't find the 'All_Users' permission set group. Make sure it has a description.
:::
複数項目取得後の配列からフィルター後、1件のみ取得する方法

### 【PowerAutomate】関連する２つのリストをループループしながら処理したい時
ループないでループを実行するとパフォーマンスが非常に悪いので
先に両方取得しておいて、DataAをループしながらDataBからフィルターする方法がよい。

DataBから1件のみ取得したい場合は first 関数を利用すればよい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/79f36572-06e2-4770-ae8d-23bd21bbb9d9.png)

compose実施で、1件のみ取得する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/e5de0cae-9421-4ac4-b763-e4dce862fd1f.png)

以上。
JCL学習

JCLとは
--
JCL = Job Control Languageの略
IBMのメインフレームでジョブバッチをOSに指示・制御する言語

### 基本構文
```
// Job名 JOB パラメータ
// ステップ名 EXEC PGM=プログラム名
// DD名 DD パラメータ
```
## 解説

### // Job名 JOB パラメータ
・**//**：IDフィールド。※IDフィールドとは表で言う項番のこと(覚える必要なし)
**// で書き始めると覚える**

・**Job名**：JOBの名前。好きに付与してOK。
**実行する内容がわかりやすい名前にする(アップグレードならAPGなど)**

・**JOB**：JOBであると命令する。

・**パラメータ**：MASGCLASS=AやNOTIFY=&SYSUIDなどを用途に合わせて記載内容が変わる。
**JOBステートメントのよく使う書き方まとめ(ChatGPTから引用)**
|目的|記述例|説明|
|:--|--|:--|
|出力先指定|MSGCLASS=A|出力の分類クラス|
|完了通知|NOTIFY=&SYSUID|自分に通知を飛ばす|
|メッセージ制御|MSGLEVEL=(1,1)|出力量を調整|
|テスト実行|TYPRUN=SCAN|処理せず構文確認|
|メモリ指定|REGION=4M|実行時メモリ量を指定|

JOBステートメント(例)
// TSET1(Job名) JOB MSGCLASS=A,NOTIFY=&SYSUID

### // ステップ名 EXEC PGM=プログラム名
・**ステップ名**：実行するステップの名前。好きに付与してOK。(最大8文字まで)

・**EXEC**：EXECであると命令する。

・**PGM=プログラム名**：実行したいプログラム名
**よく使うEXECのプログラム一覧(ChatGPTから引用)**
|プログラム名|内容・用途|
|:--|:--|
|IEFBR14|何もしないダミープログラム（よく初期化やファイル作成時に使う）|
|IEBGENER|ファイルコピー・印刷出力・データ複製など|
|IEBCOPY|PDS（ライブラリ）のコピー、バックアップなど|
|IEHLIST|ディレクトリ一覧やボリューム一覧の取得|
|IEHPROGM|データセット削除、無効化などの管理操作|
|IDCAMS|VSAMデータセットの操作、削除、定義など|
|SORT|ソートユーティリティ（DFSORTなど）|
|IKJEFT01|TSO コマンドの実行やCLIST/REXXの起動|
|DSNUTILB|DB2ユーティリティバッチ用（バックアップやロード）|
|DFSRRC00|IMSアプリケーションやユーティリティの実行|
rails g controllerを実行するとエラーが出た時の対処法

rails g controllerを使用するとエラーが出たのでその時の対処法

実行したコマンド
`rails g controller homes`

エラー内容
`initialize': Rails::Application is abstract, you cannot instantiate it directly. (RuntimeError)`

解決方法
gemfile内を変更する
変更前：　gem 'spring'
変更後：　gem 'spring', '4.2.1'

最新バージョンでエラーが発生していたようなので、
バージョンを落とすことでエラーを回避できました。
archlinux beepを鳴らす方法

その昔、PC-9801用に'GAR SOUND SYSTEM'というFM音源ドライバを作ったことがありました。タイマ割り込みを利用してMMLで記述された曲を鳴らすというものでした。遅くてリアルタイムゲームの使い物にならなかったので、ASCII-netに発表したものの、御蔵入りにしました。linux用に改良版を又作りたかったのですが、Linuxのサウンドシステムは難しいので、pulseaudioで、音声ファイルを鳴らす方法を書いておきます。

僕のパソコンはラップトップで、物理的にbeep音が鳴らないので、`paplay`で代用します。

```
 paplay /usr/share/sounds/freedesktop/stereo/complete.oga
```

物理的にbeepが付いている場合は、以下の方法で、udevルールを変更すると鳴るようになると思います。

まず、beepをインストールします。

```
sudo pacman -S beep
```

/etc/udev/rules.d/70-pcspkr-beep.rulesというファイルを作成し、以下の内容を記述します

```
ACTION=="add", SUBSYSTEM=="input", ATTRS{name}=="PC Speaker", ENV{DEVNAME}!="", TAG+="uaccess"
```

設定を反映させます

```
sudo udevadm control --reload
```

再度モジュールをリロードします

```
sudo rmmod pcspkr && sudo modprobe pcspkr
```

beepを鳴らします。

```
beep
```
【Cursor】言語設定で日本語が出てこないときこうする

# 目標

- Cursorインストール後、英語いやいや勢が表示言語を日本語に変える
- なぜか言語設定一覧に日本語がない方もこの記事で解決します

# Configure Display Languageから変更

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/853e1e49-eba6-4a25-82fb-d93d5a93cddf.png)

VSCodeと同様、エディタが開いたら「`Ctrl + SHift + P`」（Macなら、`Command + Shift + P`）で、コマンドパレットを開けます。

「Language」など打ってあげると、「Configure Display Language」を選択すると、言語選択ができるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/91dd1878-e259-4f76-8472-8d3e92a73ba2.png)

あれ？

にほんごは？

# 拡張機能で日本語を追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/0af9989a-202c-4975-b1c1-8114b216e843.png)

もう一度「`Ctrl + SHift + P`」（Macなら、`Command + Shift + P`）で、コマンドパレットを開き、「install extensions」など打って、拡張機能のインストールへ向かいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/9cef90f5-7581-48f7-b2fd-2a8f0dd1b184.png)

左側になじみの雰囲気で拡張機能一覧が出てくるので、ここで「japanese」など打って、「Japanese Language Pack for Visual Studio Code」をインストールしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/3cadab44-7c47-4176-bb42-7386dd2bc1c3.png)

さらにもう一度「`Ctrl + SHift + P`」（Macなら、`Command + Shift + P`）で、コマンドパレットを開き、「language」など打つと、「日本語（ja）」が追加されています。

# 再起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518330/9122f843-07ec-4141-b33f-058e12fd8dab.png)

ミッションコンプリート！

（おわり）

# 参考

https://cursorpractice.com/en/cursor-tutorials/faq/language-settings
PowerAutomateのフィルダークエリ（Filter Query）で変数利用時の注意点

### PowerAutomateでリストあるいはライブラリからデータを検索する手順：

１．変数を初期化
    変数の初期化を設定する。
    文字列型の場合は値に「''」を設定する。
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/ec9b12a3-fa6d-4498-8987-9e50a429aafd.png)



２．Get Itemsを設定する
    Site Address*：取得先Sharepointのアドレスを指定
    List Name*：データ取得対象のリスト名を指定する。
    Filter Query：クエリを指定する。
    Top Count：取得の最大件数設定する。
    
    ※変数をfilter queryに代入するには、変数をシングルコーテーションでかまして代入する必要があり。
    　シングルコーテーションで囲まないと「column xxx does not exists」のエラーが発生します。
    ※件数が多いとエラーが発生するようなので、取得件数を制限する。
    
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159211/50b25e3f-51e3-4fa9-9b32-5d7beb60e368.png)
[C++]動的配列のコピー

経緯
動的配列を扱うArrayクラスを作成中。=を演算子オーバーロードすることで、メンバ配列m_arrayに別オブジェクトのm_arrayをコピーできるようにしたい。（蛇足ですが、動的配列を扱う標準のクラステンプレートとしてvectorがあるので、動的配列を使いたい場合はそれを使えば良いと思います。）


質問：「このコードに問題はありますか？
例えば、newに失敗した場合の処理はしなくてよいのでしょうか？」
```cpp
template <typename TYPE>
  Array<TYPE>::operator=(const Array& other)
{
    TYPE* array = new TYPE[other.m_size];
    delete[] m_array;
    m_array = array;
    m_size = other.m_size;
    std::copy(other.m_array, other.m_array + m_size, m_array);
}
```
以下はChatGPTの回答。

----

このコードは基本的に動作すると思われますが、いくつかの重要な点を考慮すると、改善が可能です。特に「`new` に失敗した場合」については、エラーハンドリングを追加するのが望ましいです。

### 問題点と改善点

1. **`new` の失敗時の処理**  
   `new` 演算子が失敗した場合、`std::bad_alloc` 例外が投げられます。C++ では、`new` が失敗すると、メモリ確保に失敗したことを示す `std::bad_alloc` という例外がスローされます。しかし、`new` 演算子が失敗したときにメモリリークを防ぐために、例外処理を適切に行うことが重要です。

   現在のコードでは、`new` でメモリを確保した後、`delete[]` を使って古いメモリを解放していますが、`new` が失敗した場合に例外が発生するため、`delete[]` の行が実行されることはありません。

   しかし、`new` 演算子の失敗時に例外をキャッチして、メモリリークを防ぐ方法もあります。次のように、例外処理を使ってより安全にメモリ管理を行うことができます。

2. **メモリリークを防ぐための改善案**
   もし `new` によってメモリ確保に失敗した場合、以前確保したメモリ（`m_array`）が解放されない可能性があります。これを防ぐために、`new` を使ってメモリを確保する前に、現在のメモリを保存しておいて、失敗した場合に古いメモリを解放するという方法を取るのが良いです。

   また、`std::copy` は確保されたメモリに値をコピーしますが、もしメモリ確保に失敗した場合は、最初にメモリを解放しないと、メモリリークの原因になることもあります。

3. **例外処理を使った改善**
   C++では、メモリ確保時に失敗した場合に例外が発生しますが、`std::nothrow` や `try-catch` を使ってエラーハンドリングを行うことができます。

### 改善案

以下は改善したコード例です：

```cpp
template <typename TYPE>
Array<TYPE>& Array<TYPE>::operator=(const Array& other) {
    if (this != &other) {  // 自己代入のチェック
        TYPE* array = nullptr;
        try {
            array = new TYPE[other.m_size];  // メモリ確保
        } catch (const std::bad_alloc& e) {
            // メモリ確保に失敗した場合の処理
            std::cerr << "Memory allocation failed: " << e.what() << std::endl;
            throw;  // 例外を再スローして呼び出し元で処理
        }

        delete[] m_array;  // 古いメモリを解放
        m_array = array;
        m_size = other.m_size;
        std::copy(other.m_array, other.m_array + m_size, m_array);
    }
    return *this;
}
```

### 主な変更点
1. **`try-catch` ブロック**:  
   メモリ確保時 (`new`) に失敗する可能性があるため、`try-catch` で例外処理を行っています。`std::bad_alloc` 例外がスローされた場合に適切にエラーメッセージを表示し、再スローして呼び出し元にエラーを伝えます。

2. **自己代入のチェック**:  
   `if (this != &other)` のチェックを追加して、自己代入（`a = a;` など）を防いでいます。これを行わないと、メモリを解放した後に元のメモリをコピーしようとして不正な動作をする可能性があります。

3. **エラーハンドリング**:  
   メモリ確保に失敗した場合にエラーメッセージを表示し、再度例外を投げることで、呼び出し元で処理できるようにしています。

### まとめ

- メモリ確保が失敗した場合の処理を行うことは重要です。C++ では、`new` 演算子が失敗すると `std::bad_alloc` がスローされますので、適切な例外処理を追加することが推奨されます。
- 自己代入のチェックやエラーハンドリングのために、改善されたコードを実装することが、安全で堅牢なコードを書くために重要です。
実務経験有料サービス

# 実務経験に近い体験ができる有料サービス


## 🎯 ゴール：実際の仕事に近い体験を積む

- **もっと幅広い業務フローを体験したい**
- **仕様読み取り、設計、実装、テストまでの一連の流れを強化したい**
- **チーム開発の流れを身につけたい**

---

## 💎 有料・実務体験型教材・サービス

### 1. **TechTrain（テックトレイン）**
- 実際の企業のエンジニアが作成した「実務課題」が豊富
- React、Node.js、Spring Bootなどフレームワーク付きでの課題あり
- メンターに質問・レビューしてもらえる
- 月額制（¥3,278～）  
🔗 [https://techtrain.dev/](https://techtrain.dev/)

### 2. **COACHTECH（コーチテック）実務特化スクール**
- 案件ベースの学習スタイル
- チーム開発・GitHub運用・レビューの実践を重視
- LaravelやVue.jsでWeb系が多い
- 完全に「実務を再現した教材」で好評  
🔗 [https://coachtech.site/](https://coachtech.site/)

### 3. **N予備校「Webアプリコース」**
- ドキュメント読解 → 設計 → 実装 → テスト → Git運用まで含む
- 書籍「現場で使える〜」系と連携していて再現度高め
- 月額制でコスパ良（¥1,100/月）  
🔗 [https://www.nnn.ed.nico/curriculum](https://www.nnn.ed.nico/curriculum)

### 4. **MENTA（メンターサービス）で業務レベルの指導を受ける**
- 実際の現役エンジニアに「業務体験のような課題を出してほしい」と依頼できる
- 価格はピンキリ（¥5,000～¥30,000/月）だけど、個別対応なので実務と近い
- フリーランス案件風の模擬演習も可能  
🔗 [https://menta.work/](https://menta.work/)

---

## 🧠 おすすめの取り組み方（自己学習でも実務体験ぽく）

- **自分で仕様書を作る → 設計 → 実装 → 自分でレビュー**
    - ChatGPTをレビュワーとして使うのもかなり効果的
- **GitHubに模擬プロジェクトを立てる**
    - READMEに仕様書を書く
    - Issueを分けて管理
    - Pull Requestを模倣する

---

## ✨ 補足：今後の成長戦略

就職されたということは、今後は「自走できるエンジニア」になるフェーズですね。以下の力があると強いです：

- 要件整理・読み取り力
- 設計力（どういう構造にする？フローは？）
- Git運用＆チーム開発
- テスト・デバッグ力
- コードレビューを受ける/する力

このあたりを「実務体験教材」で補強しておくと、グンと信頼されるようになります。

---