OmniAICreator/Qiita-1.07M huggingface dataset:
【ChatGPT】で特定の人物に問題解決をお願いするPrompt


　どうも、カーブミラーです。

　今回は、特定の人物に問題解決をお願いするPromptを作成しました。

:::note info
本記事は、ChatGPT（有料版）
で行なっております。画像は
ありません。　あしからず。
:::
　まずは、ニュース。

　OpenAIのサム・アルトマンが
　　OpenAI o2に言及し、
　　　開発が進んでいる、とのこと。
　　　　[サム・アルトマンポスト](https://x.com/sama/status/1852781569775485117?t=cPB8JafDagnIGQ9d4a_owA&s=19)
DeepL翻訳
>O2はGPQAで105％を獲得したと聞いている。

　GPQAとは
　　高度な推論能力を
　　　評価するためのベンチマーク。
***
　さて、本題です。

　今回は、
　　とある記事からPromptをいただき、
　　　幅広く使えるようにしました。

　こちらが、そのもと記事です。
　　[お坊さんはChatGPTに取って代わられる？「元ヤンAI僧侶」が喝を入れる問答サービスも登場](https://jbpress.ismedia.jp/articles/-/84148)

　この記事の最初のページの
　　中間くらいに、下記のPromptがあり
```Text:ブッダならどう解決するか
ブッダならば、愛する者と死別する苦しみをどう解決しますか
```
　　　これをヒントに
　　　　特定の人物に問題解決を
　　　　　お願いするPromptを
　　　　　　作成しました。

　当然ながら、
　　ChatGPTが
　　　知っている人物でないと
　　　　いけません。

　架空の人物でも
　　OKなんですねぇ、これ😅

```Text:特定の人物に問題解決をお願いするPrompt
人物=✘✘✘
問題=✘✘✘

人物ならば、問題をどう解決しますか？
解決方法を示してください。
また、このことについての彼からのひと言もお願いします。
```

　出力は出しませんが、
　　試した人物と問題をあげます。

　人物=シェークスピア
　問題=愛する者と死別する苦しみ

　人物=松下幸之助
　問題=アイディアを磨くこと

　人物=ドン・キホーテ
　問題=強大な敵

　人物=セイラ・マス
　問題=兄との確執

　人物=ガンダム
　問題=ビームライフルの残弾があと一発

　最後のガンダムは、
　　搭乗者であるアムロ・レイのことを
　　　書いてきました😅

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
Pythonのgeneratorを使ってmassive dataを読み込んでみた。

---
# Pythonでジェネレータを利用して大規模CSVデータを効率的に読み込む方法

最近、20GBを超える複数のCSVファイルを取り扱う機会が増えてきました。しかし、Pythonでそれらのファイルをそのまま読み込むとメモリ負荷が非常に大きく（最大30GB程度）、処理時間も20分以上かかってしまう問題に直面していました。  
そんな中、**ジェネレータ**を利用することでメモリ使用量を7GBまで抑えることに成功し、処理時間も短縮できたので、その際に行ったことについて紹介していきます。

## CSVファイルの初期読み込み

まず最初に行ったのは、以下のようなコードでCSVファイル全体を一度に読み込む方法です。

```python
csv_file = "ファイルパス"

# 全体を一気に読み込む
df = pd.read_csv(csv_file)
df.head()
```

しかし、この方法では巨大なファイルを全てメモリ上にロードするため、メモリ消費が非常に大きく、特にメモリ容量が限られている環境では現実的ではありませんでした。

## ジェネレータとは？

### ジェネレータの基本

**ジェネレータ**は、Pythonにおける特殊な**イテレータ**です。通常の関数とは異なり、`yield`文を使って関数の実行を一時停止し、必要なときに再開する仕組みを持っています。これにより、関数が全ての結果を一度に返すのではなく、1つずつ結果を「生成」しながら返します。この特性により、大量のデータを一度に処理するのではなく、リアルタイムで処理ができ、メモリの使用効率が劇的に向上します。

### 通常の関数との違い

通常の関数は全ての計算が完了した後に結果を一度に返しますが、ジェネレータは`yield`を使うことで、計算の途中で一時停止し、その時点までの結果を返します。これにより、すべてのデータをメモリに保持する必要がなく、逐次的なデータ処理が可能になります。  
この特性は、特に大規模データのストリーミング処理や、ファイルの逐次読み込みといったリアルタイムデータ処理に非常に有効です。

## ジェネレータを使った大規模データの効率的な読み込み

### メモリ使用量の削減

従来のデータ処理では、全データを一度にメモリに読み込むため、メモリを大量に消費します。しかし、ジェネレータを使うことで、必要なデータをその都度生成し、1行ずつ処理できるため、メモリ使用量を大幅に削減できます。特に、数GBを超える大規模CSVファイルを扱う際には、この方法が非常に有効です。

### 実際のコード例

以下のコードでは、200,000行ずつCSVファイルを分割して読み込み、必要な処理を逐次行っています。ジェネレータを使ってファイルを分割読み込みすることで、メモリ使用量を抑えつつ処理することが可能です。

```python
import pandas as pd

csv_file = "ファイルパス"

# chunksizeを指定してジェネレータで分割読み込み
chunksize = 200000  # 一度に読み込む行数を設定
df_iter = pd.read_csv(csv_file, chunksize=chunksize)

chunks = []
for i, chunk in enumerate(df_iter):
    print(f"Chunk {i + 1}")
    print(chunk.head())  # 最初の5行を表示
    # 必要なデータ処理をここで行う
    chunks.append(chunk)

# リスト内のデータフレームを結合
df = pd.concat(chunks, ignore_index=True)

# データフレームの内容を表示
print(df.head())
```

### 結果

この方法を使った結果、メモリ消費を7GB程度に抑えることができ、さらに処理時間も20分から**7分**へと大幅に短縮することができました。

## まとめ

ジェネレータを使うことで、大規模データの処理が非常に効率的になりました。メモリ消費の削減に加え、処理時間の大幅な短縮も実現できました。今後、さらに高度なジェネレータの使い方や、分散データ処理についても学んでいき、また新たな知見が得られた際には共有していきたいと思います。

---
vercelからドメインの設定方法

## サーバーにデプロイ
初めに、vercelを使ってデプロイを行います。
## ドメインを取得
[お名前.com](https://www.onamae.com/)からドメインを購入します。

## お名前.com側でAレコードの設定
お名前.comドメインのお名前.com Naviから、DNSレコード設定を行います。

Aレコード（Address Record）は、DNS（ドメインネームシステム）設定の一部で、特定のドメイン名をIPアドレスに紐づける役割を持っています。簡単に言えば、インターネット上でウェブサイトの名前（例: www.example.com）を、コンピュータが理解できるIPアドレス（例: 192.168.1.1）に変換するための設定です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803295/cdf1afb2-ac55-ac84-37cf-a275138a01c8.png)

対象ドメインを設定し、DNSレコード設定を利用するから設定するを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803295/019145ec-83dd-f90e-fe57-7dbc328c73bc.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803295/b5f59077-b2f1-5539-fb78-7f543354ebfa.png)

設定内容:
ホスト名: 通常は「@」（ルートドメイン）や「www」などの値が入ります。
TYPE: 「A」を指定します。
VALUE: 紐づけるIPアドレス（例: 76.76.21.21）を入力します。
TTL（Time To Live）: レコードのキャッシュがどれくらい保持されるかを指定します。通常はデフォルトの3600秒で問題ありません。

## ネームサーバーの変更
ネームサーバーの変更が必要となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803295/5b0ef6e0-b49a-4624-9cdc-624d71f3ec52.png)

こちらより、vercelが提供している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3803295/3c6e57f0-70a9-8adf-67a4-fea0e62ed6d6.png)



## 1~2日かかる
パッケージマネージャーについて

新卒から開発を始めて数年。
今まで `yarn` や `npm` など、何となく使用してきました。

ここで一度きちんと理解したいと思い、
今回はパッケージマネージャーについて調べてみました。

# パッケージマネージャーとは
そもそもパッケージマネージャとは何でしょうか。

[こちらのサイト](https://www.hitachi-solutions.co.jp/sbom/blog/2023033101/)には下記の記述がありました。

> パッケージマネージャーとはその名のとおりパッケージを管理するソフトウェアやシステムのことです。一言でパッケージマネージャーと言っても色々ありますが、大まかには以下の二種類に分けられます。
>
> - OSレベルの機能やソフトウェアパッケージを管理するもの
> - ソフトウェア開発時に使用する機能部品や実行部品を管理するもの

二種類存在するとは知りませんでした。

冒頭に述べたような  `yarn` や `npm` は後者に該当するので、
今回はそちらについて取り上げます。

# パッケージマネージャの主な役割
パッケージマネージャーの主な役割についてみていきましょう。
## ①依存関係の管理
プロジェクトで利用するパッケージとその依存関係を追跡・解決します。

とあるパッケージを動作させるため、
別のパッケージが必要となる関係性のことを **依存関係** と呼びます。

この**依存関係**を把握して管理し、
必要に応じてインストールやバージョンアップなどを行います。

<br />

**パッケージマネージャ動作の仕組み**
([日立ソリューションズ](https://www.hitachi-solutions.co.jp/sbom/blog/2023033101/)より)

1. 設定ファイルを読み込み、必要なパッケージを調べる

2. 必要なパッケージが未取得であればインターネット上の公開リポジトリを参照して取得

3. 取得したパッケージにも設定ファイルがありこれを参照

4. 取得したパッケージの設定ファイルに記載されている必要なパッケージをリポジトリから取得

5. さらに取得したパッケージの設定ファイルを参照して…と必要なすべてのパッケージが揃うまで2.から4.を繰り返す

6. 最終的に必要なパッケージがすべて開発環境側に取得され、
  開発に利用できるようになり、また、ランタイムライブラリとしてアプリケーションに組み込まれる
  
  
## ②パッケージのインストール管理
指定したパッケージをローカル環境にインストールします。
特定のバージョンを指定しての導入も可能。

後述しますが、
`npm` の場合、`package.json` が設定ファイルになります。

この`package.json`にはいくつかのセクションが記載されています。
これらのうち、インストールに関するセクションは下記です。
- **dependencies** 
  実際のアプリケーション実行時に必要なもの
- **devDependencies**
  開発環境で使用するもの

それぞれに必要なパッケージやバージョンを記載し、
`npm install` コマンドを実行すると該当するパッケージが追加されます。

<br />

:::note
**バージョン形式について**

バージョンの指定は[セマンティックバージョニング](https://semver.org/lang/ja/)に基づいているようです。

`MAJOR.MINOR.PATCH`
- MAJOR: 後方互換性を壊す変更 
- MINOR: 機能追加（後方互換性あり）
- PATCH: バグ修正や微細な変更

:::
  
  
## ③スクリプトの実行
プロジェクト内で定義されたタスク（スクリプト）を簡単に実行できます。

`package.json` の `scripts`セクションにスクリプトを定義します。

```json
"scripts": {
  "start": "node server.js",
  "build": "webpack --mode production",
  "test": "jest"
}
```

上記の設定の場合、
`npm run start` をコマンド入力すると `"start"` に定義されたスクリプトが実行されます。

# JSの主なパッケージマネージャー
それではJSの主なパッケージマネージャーをみていきましょう。

**①npm (Node Package Manager)**
Node,jsのデフォルトパッケージマネージャー。

Node.jsに内蔵されているため、追加インストールの必要がない。

**②yarn (Yet Another Resource Negotiator)**
Facebookによって開発されたパッケージマネージャー。

セキュリティ面においてnpmよりも安全性を保持。
並行してパッケージをインストールするため、npmよりも高速。

**③pnpm (Performant npm)**
効率的なディスク仕様と高速なインストールを行うパッケージマネージャー。

パッケージをディスク上にあるフォルダ内にまとめて配置され、
各プロジェクトからハードリンクが張られるためでぃくす容量を節約可能。

# おわりに
今回でパッケージマネージャーがどのようなもので、
どのような動きをするのか知ることができました。

 `yarn` や `npm` は使用したことがありますが、
 `pnpm` はまだないので実際に使用し、
 速度等も計測してみたいなと思います。

 それでは。

# 参考文献
https://www.hitachi-solutions.co.jp/sbom/blog/2023033101/

https://zenn.dev/crebo_tech/articles/article-0001-20240724

https://note.com/dev_onecareer/n/n47a436e0dda7#c0c04fdb-1ea4-4b64-b501-ce8322e64f9c

https://qiita.com/error484/items/9891d0027ab27b84e19b
【JavaScript】カリー化って何？

以前JavaScriptの学習をしていた際、
`カリー化`というワードが出てきました。

初めは見間違いかと思い、日頃からスパイスカレーを食べすぎて
ついに目もカレーに侵食されたかと2度見をしても`カリー化`と記載されていました。

初めて目にしたワード。
しかもカレー。

これは詳しく知りたいと思い、
今回まとめていきます。

# カリー化とは
カリー化とは一体何でしょうか。

[こちらのサイト](https://ja.javascript.info/currying-partials)に下記のように記載されていました。

> カリー化は、関数を扱う際の上級テクニックです。これはJavaScriptだけでなく、他の言語でも使用されます。
> カリー化はf(a, b, c)として呼び出せる関数をf(a)(b)(c)のように呼び出せるようにする、関数の変形のことを指します。
> カリー化は関数を呼び出しません。ただ変形するだけです。

なるほど。
どのようなものかは理解できました。

では実際の例とメリット等をみていきましょう。

# 例
通常の関数は複数の引数を一度に受け取りますが、
カリー化された関数は引数を1つずつ受け取り、
そのたびに新しい関数を返します。

```js
// 通常の関数
function add(a, b) {
  return a + b;
}

console.log(add(2, 3)) // 5


// カリー化
function curriedAdd(a) {
  return function(b) {
    return a + b;
  };
}

const add2 = curriedAdd(2)
console.log(add2(3)) // 5
console.log(curriedAdd(2)(3)) // 5
```

<br />

下記の例では、
カリー化を使用することでフィルタリングの条件を柔軟に設定できます。

```js
function isInRange(min) {
  return function(max) {
    return function(value) {
      return value >= min && value <= max;
    };
  };
}

const isTeenager = isInRange(13)(19); // 13-19の範囲をチェック
console.log(isTeenager(15)); // true
console.log(isTeenager(25)); // false
```

# カリー化のメリット
カリー化には下記のようなメリットがあると思います。

## ①再利用性の向上
引数の一部を固定した関数を作成し、別の場所で使いまわすことができます。

```js
function multiply(a) {
  return function(b) {
    return a * b;
  };
}

const double = multiply(2); // 2倍にする関数
const triple = multiply(3); // 3倍にする関数

console.log([1, 2, 3].map(double)); // [2, 4, 6]
console.log([1, 2, 3].map(triple)); // [3, 6, 9]
```

## ②可読性と意図の明確化
大きな関数を部分的に分解し、処理を順序立てて書くことができます。
下記の例では、ドル記号を付与した値をフォーマットするという意図がより明確になります。

```js
// 通常の関数
function formatCurrency(amount, symbol) {
  return `${symbol}${amount}`;
}
console.log(formatCurrency(100, "$")); // $100

// カリー化された関数
function curriedFormatCurrency(symbol) {
  return function(amount) {
    return `${symbol}${amount}`;
  };
}
const formatUSD = curriedFormatCurrency("$");
console.log(formatUSD(100)); // $100
```

## ③関数型プログラミングに適合
関数型プログラミングでは、状態の変更を避け、
関数間での副作用を減らすことが推奨されています。
カリー化を使うと、状態を持たない関数を作りやすくなります。

# 終わりに
今回はカリー化の技術について学びました。

実務でも使用できそうな技術のため、
機会があれば積極的に使用したいと思います。

ちなみにカリー化の由来は、
論理学者のハスケル・カリーだそうです。

食べ物じゃなかったんですね、、、

それでは。

# 参考文献
https://ja.javascript.info/currying-partials

https://qiita.com/KDKTN/items/6a27c0e8efa66b1f7799

https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%AA%E3%83%BC%E5%8C%96
【JavaScript】Web Workerについて

今回は個人的に気になっていた技術である、
JavaScriptの`Web Worker`について調べてみました。

# Web Workerとは
Web Workerとは一体何でしょうか。

MDNには下記のように記載されていました。

> ウェブワーカーは、ウェブコンテンツがスクリプトをバックグラウンドのスレッドで実行するためのシンプルな手段です。ワーカースレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できます。さらに、fetch() や XMLHttpRequest など API を用いて、ネットワークリクエストを行うことができます。ワーカーが生成されると、それを作成した JavaScript コードが指定するイベントハンドラーにメッセージを投稿することで、そのコードにメッセージを送ることができます（逆も同様）。

なるほど。
バックグラウンドでタスクを実行できるのですね。

JavaScriptはシングルスレッドのプログラミング言語のため、
スクリプトやイベントハンドラが実行している間、
ブラウザはユーザーの入力に対して応答できません。

`Web Worker` を使用することで、
ユーザーインターフェースを停止させずに済むのです。

では実際の実装例を見てみましょう。

# 実装例
どのように使用するのかみていきましょう。

## 数値カウント
下記の例では `worker.js` にデータを送り、
それを用いた計算後の値を `main.js` に送っています。

```js: worker.js
self.onmessage = function(event) {
  const { countTo } = event.data;
  let sum = 0;

  for (let i = 1; i <= countTo; i++) {
    sum += i;
  }

  // メインスレッドに結果を送信
  self.postMessage(sum);
};

```

```js: main.js
// Workerを作成
const worker = new Worker('worker.js');

// Workerにデータを送信
worker.postMessage({ countTo: 100000000 }); // 1から100,000,000までの合計を計算

// Workerから結果を受け取る
worker.onmessage = function(event) {
  console.log('合計値:', event.data); // 合計値: 5000000050000000
};

// エラーハンドリング
worker.onerror = function(error) {
  console.error('エラー:', error.message);
};

```

## 配列のフィルタリング
下記では偶数のみのリストを作成して出力します。


```js: worker.js
self.onmessage = function(event) {
  const numbers = event.data;

  // 偶数だけをフィルタリング
  const evenNumbers = numbers.filter((num) => num % 2 === 0);

  // メインスレッドに結果を送信
  self.postMessage(evenNumbers);
};

```

```js: main.js
const worker = new Worker('worker.js');

// 大量のデータを用意
const largeArray = Array.from({ length: 10000000 }, (_, i) => i);

// Workerにデータを送信
worker.postMessage(largeArray);

// 結果を受け取る
worker.onmessage = function(event) {
  console.log('偶数リスト:', event.data); // リスト表示
};

// エラーハンドリング
worker.onerror = function(error) {
  console.error('エラー:', error.message);
};

```

# Web Workerの特徴
Web Workerには下記のような特徴があります。
## 独立性
 ワーカースレッドで実行されるコードは、ドキュメントのコンテンツにアクセスできません。
 また、メインスレッドや他のワーカースレッドと状態を共有することもできません。

## 非同期通信
  メインスレッドや他のワーカースレッドとの通信は非同期のイベントが使用されます。

## 値の複製
  `postMessage()` で渡される値は複製のため、受信先で値を変更しても元の値は変わりません。

# おわりに
Web Workerを使用することでマルチスレッド処理を実現し、
重たい処理でも高速に実行することができました。

いくつかの制限や使用方法に注意が必要ですが、
非常に役立つ技術だなと思いました。

今回は簡単な概要をさらいましたが、
またの機会により詳しく深堀りしたいなと思います。

それでは。

# 参考文献
https://developer.mozilla.org/ja/docs/Web/API/Web_Workers_API/Using_web_workers

https://qiita.com/irico/items/4a4049fbda7bfd654498#worker%E3%82%92%E7%B5%82%E4%BA%86%E3%81%97%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88

https://www.oreilly.co.jp/books/9784873119700/
【Android】WebViewで動画をフルスクリーン再生する方法まとめ

# はじめに
何かとよく利用するWebViewですが、Web上の動画をフルスクリーン再生しようとした際にデフォルトでは全画面再生ができないのはご存知でしょうか？
Web側の実装ではフルスクリーン再生できるように調整済みだったとしても、Androidアプリ側で別途修正が必要になります。
そこで、今回はフルスクリーン再生するための実装を簡単ではありますが備忘録的にまとめておこうと思います。

# フルスクリーン再生する方法
フルスクリーン再生する仕組みとしては、WebViewの上にフルスクリーン化したViewを乗せてあげるイメージになります。
以下がその実装になります。

```main.kt
binding.webView.webChromeClient = object : WebChromeClient() {
      override fun onShowCustomView(view: View?, callback: CustomViewCallback?) {
            super.onShowCustomView(view, callback)

            binding.webView.addView(
                    view, ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                    )
                )
            }
            
      override fun onHideCustomView() {
            super.onHideCustomView()

            binding.webView.removeAllViews()
      }
}
```
以上になります。
あとはやりたいことに合わせて画面を横にしてあげたり、ステータスバーを消してあげたりしてあげると良いかと思います。

# さいごに
もう気がつけば11月と本当にあっという間ですね、今年も残り僅かですが悔いのないよう邁進していきます！
【JavaScript】prototypeについて

今回はJavaScriptの`prototype`について調べてみました。

# prototypeとは
`prototype`とは何でしょうか。

MDNには下記の記載があります。
> プロトタイプは、JavaScript オブジェクトが他のものから機能を継承する仕組みです。

**継承**がキーワードです。

`prototype` はJavaScriptのすべてのオブジェクトが持つ特別なプロパティで、
オブジェクト間でプロパティやメソッドを共有するために使用されます。

# 特徴と例
`prototype` は下記のような特徴を持ちます。
### メモリ効率
メソッドを`prototype`に定義すると、各インスタンスにメソッドを共有します。
各インスタンス毎に同じメソッドを複製するよりも、メモリの使用量を削減できます。

```js
function User(name) {
    this.name = name;
}

// prototypeにメソッドを定義
User.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const user1 = new User("Alice");
const user2 = new User("Bob");

console.log(user1.sayHello === user2.sayHello); // true (共有されている)
```

### 動的な変更
プロトタイプは実行時に変更可能で、既存のオブジェクトにプロパティやメソッドを追加することができます。

```js
function Car() {
    this.wheels = 4;
}

// 後からメソッドを追加
Car.prototype.drive = function() {
    console.log("The car is driving.");
};

const car1 = new Car();
car1.drive(); // The car is driving
```

### プロトタイプチェーン
ブジェクトがプロパティやメソッドを探す際に、
オブジェクト自身のプロパティが見つからない場合、
そのオブジェクトの`prototype`を順にたどって探索する仕組みである**プロトタイプチェーン**があります。

1. オブジェクトのプロパティやメソッドを呼び出すとき、まずそのオブジェクト自身に該当するものがあるか探す
1. 該当するものが見つからない場合、そのオブジェクトの`[[Prototype]]` (`__proto__`) を辿り、次のレベルで探す
1. 全てのプロトタイプを辿っても見つからない場合、`undefined` が返される


<br />

下記の例では、`child.name` は`child` 自身に存在するため直接取得されます。
`child.greet()` は `child` に存在しないため、`child` の `__proto__` を辿り、`parent.greet` を見つけて呼び出します。

```js
// 親オブジェクトを作成
const parent = {
    greet: function() {
        console.log("Hello from parent!");
    }
};

// 子オブジェクトを作成し、parentをプロトタイプとして設定
const child = Object.create(parent);
child.name = "Child";

// プロパティとメソッドを呼び出す
console.log(child.name);   // Child（自分のプロパティ）
child.greet();             // Hello from parent!（プロトタイプから継承）

// プロトタイプチェーンの確認
console.log(child.__proto__ === parent); // true
```

# おわりに
こんかいは概要だけ浚ってまとめました。

メモリを効率化が図れるので、
使えるタイミングでは積極的に採用していきたいです。

それでは。

# 参考文献
https://techplay.jp/column/618

https://qiita.com/Yu-8chan/items/bb7d4a72125a39aeed7b

https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_prototypes
【PHP】Webフレームワーク「Symfony」の環境構築 Windows11編

# 対象読者
PHP製Webフレームワーク「Symfony」の環境構築をしたいひと



# 検証環境
|ソフトウェア|バージョン|
|-----------|---------|
|PHP        |8.0*     |
|Symfony    |5.0*     |


# Symfony公式サイトからダウンロード
まずは、下記のリンクから公式サイトへ移動しましょう。


https://symfony.com/

画面右上の、<b>Download</b>ボタンをクリックします。

![symfony1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/0e5a7537-5387-7574-8d07-bef6fbcd53e1.png)

赤枠部分の<b>386</b>または<b>amd64</b>のいずれかをクリックすると、EXEファイルがダウンロードされます。

![symfony2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/fa5f949e-ce2c-8716-fb57-d045d020ea4d.png)

# 環境変数を設定する
EXEファイルをダウンロード出来たら、環境編酢を設定しましょう。

EXEファイルの配置場所は、任意の場所に配置します。

参考までに、私の配置場所はこちらとなります。

Cドライブの直下に<b>Symfonyフォルダ</b>を作成して、このフォルダん赤にEXEファイルを配置しています。

```
C:\symfony
```

![パス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/d4149249-645b-d116-d695-14f2f4af3f1e.png)


# Symfonyのバージョン確認
バージョン確認は、コマンドプロンプトから確認できます。
```
symfony -V
```

 # プロジェクト作成

 いよいよ、プロジェクトの作成です。
 コマンドは、下記の通り入力します。

 ```
composer create-project symfony/website-skeleton hellosymfony
 ```

 :::note info
<b>プロジェクト名について</b>
プロジェクト名には、<b>ハイフン「−」は、付けないでください。</b>

symfony server:startコマンドを入力してEnterキーを押下すると、下記のエラー
「’symfony‘ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」が表示されてしまい。起動できません。

なので、ハイフン無しでプロジェクト名を作成しましょう。
（解決するのに2日かかった...）
:::

 # サーバ起動

 さてプロジェクトを作成出来たら、下記のコマンドで起動させてみましょう。

 ```
symfony server:start
 ```

下記の画面が表示出来たら完成です。
![welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/4c206109-47e3-5a78-0709-955da59455fb.png)

 以上です。

 # スペシャルサンクス

 https://qiita.com/sakamotonoe/items/0835b3bee38af8dfd7ca

 https://qiita.com/YoshitakaOkada/items/e14f00a8f4304e36a8de

 https://qiita.com/mako5656/items/85b18f8e8fb8cb622f2b

 https://qiita.com/nakamurashun0621/items/5d16a88b6f68b65f5e15

 https://qiita.com/tomcky/items/e30a08861fd2e7530a0d

 https://tech.quartetcom.co.jp/2017/12/05/installation-of-symfony4/

 https://symfony.com/doc/5.4/the-fast-track/ja/6-controller.html

https://symfony.com/legacy/doc/gentle-introduction/1_4/ja/04-the-basics-of-page-creation

https://tech.quartetcom.co.jp/2023/06/29/memo-app-symfony6/

https://blog.takeho.com/easily-implement-login-authentication-with-symfony4/

https://qiita.com/siroisitaka/items/256684dfa327fad7b819
【JavaScript】ラッパーオブジェクトについて

HTML5 プロフェッショナルッショナル認定試験の勉強をしていた際に「**ラッパーオブジェクト**」というワードが出てきました。

ワード自体は耳にしたことがありましたが、
実際にどのようなものなのか説明できるほどの知識がありませんでした。

そこで今回はこの**ラッパーオブジェクト**について調べてみました。

# ラッパーオブジェクトとは
まずは下記の例を見てください。
```js
// プリミティブ型の文字列
const str = "hello";

// 文字列に対してメソッドを呼び出す
console.log(str.toUpperCase()); // HELLO
```

プリミティブ型の値である文字列であるにも関わらず、
`String` オブジェクトのインスタンスメソッドである `toUpperCase()` メソッドを呼び出すことができます。



JavaScriptでは、プリミティブ型に対してプロパティアクセスをすると、
自動的に対応するラッパーオブジェクトに変換されます。

実際には下記のように動作しています。

```js
const temp = new String("hello"); // 一時的なラッパーオブジェクト
const result = temp.toUpperCase(); // ラッパーオブジェクトのメソッド使用
temp = null; // 一時オブジェクトは破棄
```

**※追記**

:::note warn
追記 (2024/12/08)

[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/Object)に記載があるように、
`BigInt()` や `Symbol()` コンストラクターは `new` を使用するとエラーが発生します。

これらのラッパーオブジェクトを作成するには、
下記のように `Object()` を使用するようです。

```js
const symbolObj = Object(Symbol("hoge"));
console.log(typeof symbolObj); // "object"
```

 `BigInt` や `Symbol` 以外にも使用できるのでラッパーオブジェクトを作成する場合は、`Object()` を使用するほうが一貫性があります。

:::

<br />

つまりラッパーオブジェクトとは、
プリミティブ型である値をオブジェクトとして扱えるようにするため、
自動的に生成されるオブジェクトのことのようです。

# ラッパーオブジェクトの種類
ラッパーオブジェクトは、プリミティブ型のうち 
`undefined` と `null` を除くすべてに用意されています。

| プリミティブ型 | ラッパーオブジェクト |
| ---- | ---- |
| 数値 | Number |
| 長整数 | BigInt |
| 文字列 | String |
| 論理値 | Boolean |
| シンボル | Symbol |


# まとめ
ラッパーオブジェクトについて詳しく知ることができました。

プリミティブ型の値にメソッドやプロパティを提供する便利な仕組みです。
ただし、プリミティブ型とラッパーオブジェクトの共同の違いがバグの原因になる可能性があるため、`new String()` や `new Number()` を使うのは一般的に推奨されていないようです。

きちんと理解し、正しく使っていきたいですね。

それでは。


# 参考文献
https://developer.mozilla.org/ja/docs/Glossary/Primitive

https://www.javadrive.jp/javascript/ini/index7.html

https://jsprimer.net/basic/wrapper-object/
【JavaScript】generatorについて

HTML5 プロフェッショナル認定試験の勉強をしていた際「**generator**」というワードが出てきました。

今まで聞いたことがなく、実際に使用したこともありませんでした。
そこで今回はその**generator**について調べてみました。

# generator とは
generatorとは一体何でしょうか。

MDNには下記のように記載されています。

> Generator オブジェクトはジェネレーター関数によって返され、反復可能プロトコルとイテレータープロトコルの両方に準拠しています。

どうもジェネレーター関数に返却されるようです。

<br />

そもそもジェネレーター関数とは何でしょうか？

## Generator関数
Generator関数には以下のような特徴があります。
1. **`function*` で定義される**
  通常の関数と異なり、`function*` という形式で関数を定義します。
2. **`yield` を使用する**
  Generator関数の中で使用され、値を外部に返しつつ関数の実行を一時停止します。
3. **イテレータを返す**
  Generator関数を呼び出すとイテレータオブジェクトが返却され、
  `next()` メソッドを使ってステップごとに実行を進めます。

<br />

では実際に使用例を見ていきましょう。

# 使用例

まずはシンプルな例を見てみましょう。
**generator**がどのような動きをするのかが分かると思います。

```js
function* testGenerator() {
  console.log("one");
  yield 1; // 1を返し、ここで停止

  console.log("two");
  yield 2; // 2を返し、ここで停止

  console.log("three");
  yield 3; // 3を返し、ここで停止

  console.log("終了");
}

const gen = myGenerator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }
```

**解説**
1. `gen.next()` を最初に呼ぶと `myGenerator`関数内の実行が開始されます。
  `yield 1` に到達すると`1` が返され、実行が一時停止します。
2. 次の `gen.next()` で前回の停止位置から再開し、次の `yield` に達するまで実行されます。
3. 全ての `yield` が実行されると `done: true` となり、Generator関数の実行が終了します。

<br />

次に実用例を見てみましょう。
下記の例では双方向のデータ通信の例を記載しています。
```js
function* bidirectionalGenerator() {
  const value1 = yield "最初の値を入力してください"; // 呼び出し元から値を受け取る
  console.log("入力された値:", value1);

  const value2 = yield "次の値を入力してください";
  console.log("入力された値:", value2);

  return "完了";
}

const gen = bidirectionalGenerator();
console.log(gen.next().value); // "最初の値を入力してください"
console.log(gen.next(42).value); // "次の値を入力してください" (value1 = 42)
console.log(gen.next(99).value); // 完了 (value2 = 99)
```

# まとめ
**generator** は実行を一時停止し、
次に再開する際に値やデータを渡すことができるため、
状態管理が必要なケースや大量のデータを扱う際に役立ちそうです。

実務にどう生かせるかはまだ分かりませんが、
機会があれば使っていきたいですね。

それでは。

# 参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function*

https://qiita.com/irico/items/f1d3f37597e35af6c6d2

https://qiita.com/kura07/items/d1a57ea64ef5c3de8528
Tips: ファイルの作成日時をファイル名のソート順と同じ順序になるように変換するRubyスクリプト

## この記事は何
タイトルの通り、ディレクトリ内のファイルの作成日時をファイル名のソート順と同じ順序になるように変換するRubyスクリプトを作成したので記事として残しておきます。

## スクリプト
以下の通りです。

```rb
require 'fileutils'

directory = '/path/to/directory'

files = Dir.glob(File.join(directory, '*')).sort

base_time = Time.now

files.each_with_index do |file, index|
  new_time = base_time + (index * 600) # 600 seconds = 10 minutes
  File.utime(new_time, new_time, file)
end

puts "Successfully updated creation dates for files in #{directory}"
```
【JavaScript】メモ化とは？

以前HTML5プロフェッショナル認定試験の勉強をしている際に**メモ化**というワードが出てきました。

その時に軽くだけ調べると
どうやら関数型プログラミングで使用されるもののようで。

今回はもう少し詳しく調べ、まとめてみました。

# メモ化とは

Wikipediaには下記のように記述されています。

> メモ化とは、プログラムの高速化のための最適化技法の一種であり、サブルーチン呼び出しの結果を後で再利用するために保持し、そのサブルーチン（関数）の呼び出しごとの再計算を防ぐ手法である。

> キャッシュはより広範な用語であり、メモ化はキャッシュの限定的な形態を指す用語である。

<br/>

なるほど。
**メモ化**はキャッシュに含まれるのですね。

では実際、どのように使用するのか見ていきましょう。

# メモ化の使用例
フィボナッチ数列の計算を例に見てみましょう。

:::note info
フィボナッチ数列とは、
隣り合う2つの数字の和が次の数字になるという法則を持つ数列です。

次の漸化式で定義されます。

```math
\begin{flalign}
  &\quad F_0 = 0& \\
  &\quad F_1 = 1& \\
  &\quad F_n = F_{n-1} + F_{n-2} \quad (n \geq 2)&
\end{flalign}
```

0 ～ 15項は次の通り
```
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, …
```
:::

## メモ化を使用しない場合
この場合、同じ`n`の値に対して何度も再帰的に計算を繰り返すため、
計算量が多くなってしまいます。
```js
function fibonacci(n) {
  if(n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(40));
```

## メモ化を使用する場合
`memo`というオブジェクトを使用し、
一度計算した結果をキャッシュしておき、
再度同じ引数で関数が呼ばれた場合にキャッシュから結果を取り出します。

```js
function fibonacci(n, memo = {}) {
  if(n in memo) return memo[n]; // キャッシュから結果を取得
  if(n <= 1) return n;

  // 計算結果をキャッシュ
  memo[n] = fibonacci(n - 1, memo) + fibonacci(n - 2, memo);

  return memo[n];
}

console.log(fibonacci(40));
```

## 時間の計測
[JavaScript Playground](https://playcode.io/javascript) で処理時間を比較してみました。

**■メモ化を使用しない場合**
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669971/9e395c4c-7265-3a6e-9385-a104e4d4dbd3.png">

**■メモ化を使用する場合**
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669971/2310be79-bfd3-3dfa-5720-81b53dc680ac.png">

環境等にも依存しますが、こう比べるとかなり違いますね。


# まとめ
計算コストの高い関数の実行結果をキャッシュして再利用することで、
パフォーマンスを向上させるテクニックのようです。

メモ化によって、同じ入力で関数が再度呼ばれたときにキャッシュされた結果を返すことで
計算時間を節約できるため、再帰関数や大規模データセットの処理でより有効そうですね。

ただし、キャッシュが大きくなるとメモリを多く消費するので
そこには注意が必要かと思います。

それでは。

# 参考文献
https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A2%E5%8C%96
【JavaScript】即時関数について

以前HTML5プロフェッショナル認定試験の勉強をしていた際に**即時関数**というものが出てきました。

今まで使用したことがなかったため、
今回は実際に使用方法等を調べてみました。

# 即時関数とは

MDNには下記のように記載されています。

> IIFE (Immediately Invoked Function Expression; 即時実行関数式) は定義されるとすぐに実行される JavaScript の関数です。

その名の通り即時実行される関数のことのようです。

実際の記述例も見てみましょう。

# 記述例
## 単純な記述例
通常の関数と異なり、関数定義を`()`で囲み、
その直後に再び`()`をつけて呼び出します。

```js
(function() {
  console.log("Hello, world.")
})();
```

この例では即時関数が定義された瞬間に実行され、
コンソールに「Hello, world.」と出力されます。

## 引数を渡す場合
即時関数は引数を受け取ることもできます。

```js
let name = "Kenny";

(function(userName){
  console.log(`Hello, ${name}`!);
})(name); // Hello, Kenny!
```

# 即時関数のメリット
## グローバルスコープの汚染を防ぐ
即時関数を使用すると、内部で使用される変数がグローバルスコープに影響を与えないようにできます。

```js
(function() {
  let scope = "local";
  console.log(scope); // local
})

console.log(scope); // Error: scope is not defined
```

グローバルスコープに多くの変数や関数を定義すると、
名前の競合や上書きのリスクが増え、バグが発生しやすくなります。

即時関数を使用すると変数や関数をローカルスコープに閉じ込められるため、グローバルスコープを汚染せずに済みます。

## 一度きりの初期化処理
即時関数はその場で一度だけ実行されるため、
一度きりの初期化処理に役立ちます。

```js
(function() {
  console.log("This runs only once.");
})();
```

実行後はメモリから解放されるため、
無駄なメモリ使用を防ぐこともできます。

# おわりに
いままで使用したことがなかったですが、
一度実行したらメモリが解放されるのは、
パフィーマンスに影響してくるので積極的に使用していきたいです。

それでは。


# 参考文献
https://developer.mozilla.org/ja/docs/Glossary/IIFE

https://qiita.com/katsukii/items/cfe9fd968ba0db603b1e

https://kenju.gitbooks.io/js_step-up-to-intermediate/content/content/part03/immediate_function.html
【JavaScript】bind()について

以前、HTML5プロフェッショナル認定試験の学習をしていた際`bind()`というものが出てきました。

存在は知っていましたが、実際に使用した経験がなかったため今回調べてみました。


# bind()とは
`bind()`とは一体何でしょうか。

MDNには下記のように記載されています。

> bind() メソッドは新しい関数を生成し、これは呼び出された際に this キーワードに指定された値が設定されます。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。

</br>

どうやら`bind()`は
- 新しい関数を生成する
- thisに関係する

ようです。

では実際、どのように使用するのか見ていきましょう。

# 使用例
例えば`bind()`を使用せずに関数内で`this`を参照する場合、挙動が意図と異なる場合がありますが、`bind()`を使用すれば解決します。

## `bind()` を使用しない場合
下記の例では、関数`greet`を`person.hello`に代入していますが、`greet()`を呼び出すと`this`が`person`オブジェクトを参照していないため`undefined`になります。
```js
const person = {
  name: "Kenny",
  hello: function(){
    console.log(`Hello, my name is ${this.name}`);
  }
};

const greet = person.hello;
greet(); // "Hello, my name is undifined"
```

## `bind()` を使用する場合
 一方、`bind()`を使用することで関数`hello`を`person`オブジェクトに結び付けることができます。
 これにより、`greet()`を実行したときに`this`が常に`person`オブジェクトを指すために`this.name`は`Kenny`となります。

 ```js
 const person = {
   name: "Kenny",
   hello: function() {
     console.log(`Hello, my name is ${this.name}`);
  }
};

const greet = person.hello.bind(person);
greet(); // "Hello, my name is Kenny"

 ```

 ## `bind()` の引数を指定する場合
 `bind()`は引数を取ることもできます。

次のように記述することで、
対象の関数の`this`の参照先を変更した関数を新たに生成することができます。

 `bind(thisArg, arg1, …, argN)`

 |引数|説明|
 |-|-|
 | 第一引数 | thisの参照先 |
 | 第二引数以降 | 関数で使用する引数 |

 下記は引数を指定する場合の例です。
 ```js
 function introduce(greeting, punctuation) {
   console.log(`${greeting}, my name is ${this.name}${punctuation}`);
 }

 const person = {name: "Kenny"};

 const bindIntroduce = introduce.bind(person, "Merhaba", "!");
 bindIntroduce(); // Merhaba, my name is Kenny!
 ```
 

# まとめ
`bind()`は意図したオブジェクトを`this`として使用できるようにするのですね。

メリットとしては下記のようなものがあげられるかなと思います。
- `this`の中身を固定できるので予期せぬ`this`の変更を防ぐことができる
- 設定を保持した関数を作成できるので再利用できる

それでは。


# 参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://qiita.com/saka212/items/6cf7015f3a4b76a93a12

https://zenn.dev/yyoshioka/articles/034d8b7cb9b94c
【JavaScript】クロージャについて

いままでJavaScriptの**クロージャ**について、何となくで使用していました。

きちんと理解したいと思い、今回まとめていきます。

# クロージャとは
そもそもクロージャとは何でしょうか。

> クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。言い換えれば、クロージャは関数にその外側のスコープにアクセスする機能を提供します。JavaScript では、クロージャは関数が作成されるたびに、関数作成時点で作成されます。
> 
>> MDN web docs より

。。。

なんだかよく分かりませんね。

実際にコードを見て理解を深めましょう。

# クロージャの例と解説
では実際のクロージャの例を確認し、
深堀していきましょう。

## コード例
通常の関数の場合、
呼び出される度に変数が初期化されてしまいます。

```js
function countUp() {
  let count = 0;

  count += 1;
  console.log(count);
}

countUp(); // 1
countUp(); // 1
countUp(); // 1
```

<br>
一方、下記はどうでしょうか。

```js
function countUp() {
  let count = 0;

  function add() { 
    count += 1;
    return count;
  }

  return add;
}

const counter = countUp();
counter(); // 1
counter(); // 2
counter(); // 3
```
変数`count`の値が、呼び出すたびに加算されていることがわかります。

関数内で特定の変数を参照し続けることで、
関数が状態を保つことのできる仕組み。
これが**クロージャ**です。

## コード解説
このコードでは、**クロージャ**の概念を利用して、関数内の変数を外部から直接アクセスできない形で保持しつつ、関数が実行される度にその変数を変更できるようにしています。

次のような流れで、`count`の値が保持されます。

1. **関数`countUp()`が呼び出される**
    `countUp()`が呼び出されると、まずローカル変数`count`が作成され、初期値0が代入される。
2. **関数`add()`が生成される**
    `countUp()`内で関数`add()`が定義されます。
    この関数`add()`は`count`を1増やして返す役割を持っているが、この時点で`count`への参照が保存される。
3. **クロージャが生成される**
    `countUp()`は`add()`を返す。
    このとき、`count`は通常であれば`countUp()`のローカル変数として破棄されるはずだが、`add()`が`count`を参照しているためメモリ上に残り続ける。
    これにより`add()`は`count`のスコープを閉じ込めた状態（クロージャ）となる。
4. **変数`counter`として`add()`が使用される**
    `const counter = countUp()`とすることで、`counter`は`add()`を参照するようになる。
    これにより、`counter()`が呼ばれる度に`count`は1増加し、最新の値を保持し続ける。

関数のスコープが単純に破棄されるのを防ぎ、参照がある限りスコープを保持します。

従って、クロージャを通じてアクセスされる変数は関数の呼び出し後もメモリ上に残り、再度呼び出されたときに同じ値にアクセスできるようになっています。

# まとめ
クロージャは、**関数が定義された時点でのスコープを閉じ込めた状態（=close）を保持するもの**のようです。

クロージャを使用することで、カプセル化によるデータの隠蔽や、状態の管理などで効果を発揮するのかなと思いました。

それでは。

# 参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

https://www.oreilly.co.jp/books/9784873119700/

https://zenn.dev/takiko/articles/5400a6b0c6bd7d
sailで作成したlaravel＋React＋Inertiaのプロジェクトをデプロイする①

## はじめに

 過去にdockerをサーバーで建ててみたり、
 静的なページを公開したり、していたのですが
 タイトルのプロジェクトをサーバーで立ちあげたいがなかなか動かない。。。

sailコマンドで作っているプロジェクトの記事がなかなか見つからなかったので
同じ境遇の方参考にしてもらえたらと思います。


## 事前準備

・自分の作ったプロジェクトを作る。好きに編集する。

・自分の作ったプロジェクトをgithubにpushする。
・クレジットカードをお手元に。

 ## 目次

  　
VPSを契約し、SSHで接続する。
サーバー内の整備
サーバーの中に入り、git cloneでプロジェクトを取り込む
sail up(docker)立ち上げ準備　←次回の記事
各エラーの対処について　　←次回の記事

※自分が今回やったやり方になります。
※2024年11月現在

## VPSを契約し、SSHで接続する。

今回はさくらのVPSでOSはUbuntuを使用しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832683/544cfd62-bf6e-2649-0277-b37ad403ddfd.png)
　
Ubuntuを使用したかったのと、安く済ませたかった理由から写真のような設定です。（場所はどこでもいいので安いところで）
※512MBプラン　月616円　

　
 パスワードを設定したら支払いを済ませてください。
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832683/0b4d1b49-dd93-69d4-4f05-b0f2a3c61b6b.png)

#### サーバーの中に入る。
　
 さくらのVPSのサーバーが稼働中になっているか確認する。
 なっていなかったら「起動する」を押下。
 
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832683/8ce5f0ba-84ad-50df-4400-e52581301654.png)

　
さくらのVPSの基本情報画面のホスト名をコピーする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832683/3e4dc800-451a-608c-0f1f-02bf30eb667e.png)

gitBashを立ちあげて
```
# ssh ユーザー名@ホスト名

ssh ubuntu@tk2-404-43440.vs.sakura.ne.jp
```

パスワード要求されるのでさくらのVPSで設定したパスワードを入れてサーバーの中に入る。

## サーバー内の整備

rootユーザーになる。
```
su -
もしくは
sudo su
```
```
apt -y update || exit 1
apt -y upgrade || exit 1
apt -y install apt-transport-https \
          ca-certificates \
          curl \
          software-properties-common
          curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -
```
## dockerを使用できるように
```
add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable"

apt -y update || exit 1

apt -y install docker-ce

DOCKER_COMPOSE_VERSION=$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep 'tag_name' | cut -d\" -f4)

sh -c "curl -L https://github.com/docker/compose/releases/download/${DOCKER_COMPOSE_VERSION}/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose"

chmod +x /usr/local/bin/docker-compose

systemctl enable docker

usermod -aG docker ubuntu
```
dockerが使えるか確認
```
docker
docker-compose
```

それぞれたくさん文字が出てきたら成功。
意味は割愛。

## サーバーの中に入り、git cloneでプロジェクトを取り込む
　
githubに送ったプロジェクトをサーバーに取り込む
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3832683/9baf04bb-22de-0117-1580-ac13031cabb3.png)

```
git clone githubのHTTPS
```

## sail up(docker)立ち上げ準備
　
dockerだけならこのまま
```
docker-compose up -d
```
でコンテナが立ち上がる。

sailコマンドの場合composeを使ってvendorファイルの作成が必須になる。

んでここからが本題。

何ですが長くなってしまったので次回の記事にしたいと思います。
めちゃめちゃエラーになります。( ´∀｀ )
Axiosを利用してCookieを送信する方法

# はじめに
Go(Echo) + Next.jsを用いてアプリを作成していたのですが、ブラウザをリロードするとAPI実行時に以下のようなエラーが発生し、その解決に時間がかかってしまったので、備忘録として記事を作成します。

```
"missing or malformed jwt"
```

# 原因
axiosにCookie情報を含めていなかったことが原因だと考えました。

# 解決方法

```
修正前
axios.get("http://localhost:8080/users");

修正後
axios.get(
        "http://localhost:8080/users",
        { withCredentials: true }
);
```
``withCredentials``をtrueにすることでAxiosにCookie情報を付与することができます。
Appleシリコンの世代間の進化を振り返って買い時を吟味する

Appleシリコン搭載のMacも4世代目が発表され，出荷まで1週間を切ったこのタイミング．そろそろこれまでのチップの進化の傾向が見えて来たのかなということと，個人的には直前の世代からの進化は毎回こんなもんかと少しがっかりするのですが，今回のM4は少し伸びが大きいかもしれないと感じたので，その直感は果たしてあっているのか，最初の世代から4世代かけてどのくらい進化しているのかというのを振り返ってみようという趣旨の記事です．

## 主なアプローチ
Geekbenchに登録されている結果をもとに，シングルスレッド性能，マルチスレッド性能，Apple Metalのベンチマークスコアをそれぞれ見ていきます．

https://www.geekbench.com/

注として，執筆時点の2024/11/3時点ではM4のMacは出荷前であり，Geekbenchのベンチマーク例も少ないので今後サンプル数が増えた後に変動する可能性があります．あくまでおおまかな進化の傾向と今後の展開を趣味として予測する程度と思ってみてください．


## シングルスレッド性能の世代間比較

![single_appleM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515814/72ee27d1-190c-d31a-8544-c9e0e9799bdf.png)


まずはシングルスレッド性能の比較から．横軸にAppleシリコンの世代，縦軸にGeekbenchのシングルスコアをプロットしています．色はUltra, Max, Proなどのグレードで色分けをしています．

前々から感じていたのですが，シングル性能は世代間の制約を強く受けると思っていました．すなわち，同一世代の中では，UltraやProといったハイグレードなCPUであってもシングル性能は無印チップと大差ないということです．それ以上に，世代間での進化の様子がみて取れると思います．

直前の世代同士での比較では，世代更新のたびに大体10-15%くらいの伸びのため，新チップ登場のたびに買い替えるメリットはそこまで大きくないと思って来ました．しかしこうしてみると，毎回コンスタントに性能進化しているため，初代のM1からM4への性能向上は50%程度あるので，これだとタスクによっては優位性を明らかに体感できる可能性があります．

## マルチスレッド性能の比較

![multi_appleM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515814/06c493d7-6823-af78-f0de-f4d5a17114cc.png)

今度はマルチ性能．横軸は先ほどと変わってCPUコア数，縦軸は変わらずマルチスレッドスコアになっています．世代によって色分けをしています．個人的に驚異的なのが，M4無印がM1 Maxの性能を超えて来たことです．今現在M1 Maxを使用していますが，なんの不自由もなく使えているので，M4無印の性能でも十分なのかなと思ってしまいます．

このグラフ上での傾きは概ねシングルスレッド性能に相当するので，この傾きが世代を経るごとに急になっていくのは前述のシングルスレッド性能の伸びがこのグラフからもみられるということです．厳密には，シングルスレッド性能はおそらく高性能コアの性能を計測しているものと思われますが，高効率コアも同様に進化を重ねていることがこのグラフの傾きの変化からも推測できます．

## グラフィック性能（Apple Metalスコア）の比較

![metal_appleM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515814/ae525e83-bfa8-8108-6bcd-13cf203f829b.png)

最後はグラフィック性能です．マルチ性能のグラフと似たように，横軸にGPUコア数，縦軸にMetalスコアをとっています．色分けも再度世代ごとです．数が多いので細かいチップの種類は書きません．このグラフでわかるのは，M1-M3までの世代は，GPUのコア数だけで性能がほぼ決まり，世代間の進化はあまりないことです．一方M4（紫色）ではその線から少し上にはみ出ており，今回のGPUチップはコアあたりの性能進化を遂げているものと想像できます．邪推ですが，M1-M3までは刷新といってもほぼ同じアーキテクチャだったものが，M4で本格的にメジャーアップデートしたのかもしれません．ただまだGeekbench上のサンプルが少ないので，これから出荷が本価格的に始まってデータ数が揃ってくると状況が変わるかもしれません．今後の動向に注目です．

## まとめ

Appleシリコンの性能について，世代間の性能進化をざっくり振り返ってみました．M4の性能進化がこれまでと少し違うかもしれないとうっすら感じていたのを，ある程度裏づける結果になったかなと思います．個人的にはMac miniの最小構成が自宅サブ機として非常に魅力的なので，その判断材料の一つになったかなとおもいますが，もう少し財布と相談したいと思います．
VercelでNext.jsとPrismaを使ったプロジェクトをデプロイする際のエラー解消方法

# VercelでNext.jsとPrismaを使ったプロジェクトをデプロイする際のエラー解消方法

VercelにNext.jsとPrismaを使用したプロジェクトをデプロイする際、エラーが発生することがあります。特にPrismaの設定が不十分だと、データベース接続エラーやビルドエラーが生じることが多いです。本記事では、こうしたエラーを解消するためのビルドコマンド設定方法について説明します。

## エラーの原因

Vercelでは、デフォルトの設定のままだとPrismaのスキーマが生成されず、デプロイ時にエラーが発生することがあります。この問題は、Prismaの生成コマンド（`prisma generate`）がビルドプロセス中に実行されないために起こります。

## 解決方法：ビルドコマンドの設定

Vercelのプロジェクト設定で、ビルド時にPrismaの生成処理が行われるようにビルドコマンドを変更することで、エラーを防止できます。

### 手順

1. **Vercelのダッシュボード**にアクセスし、該当プロジェクトを選択します。
2. 左側のメニューから**「Settings」**に進み、**「Build & Development Settings」**をクリックします。
3. **Build Command**（ビルドコマンド）の入力欄を以下のように設定します：

![スクリーンショット 2024-11-03 12.38.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3326256/a7d00481-5a55-66e2-c155-b014763ffed6.png)

```bash
   prisma generate && next build
```

- **`prisma generate`**：Prismaのクライアント生成コマンドです。これにより、Prismaがデータベースと正しく接続できるようになります。
- **`next build`**：Next.jsのビルドコマンドです。Prismaのクライアント生成後にビルドすることでエラーを回避します。

### 注意点
- **環境変数**：`DATABASE_URL`などのPrismaが必要とする環境変数を、Vercelの環境にも設定してください。これが不足しているとデータベース接続エラーが発生します。
- **Prismaの依存関係**：`prisma`パッケージやその関連ライブラリが最新バージョンでインストールされているかを確認しましょう。

### まとめ
上記の設定で、Vercelでのデプロイ時に発生するPrisma関連のエラーを解消することができます。PrismaとNext.jsの組み合わせでのデプロイ時のエラーに困っている方は、ぜひこの方法を試してみてください。
ffmpegで複数のVOBファイルを一つのmp4ファイルに変換するRubyスクリプトを実装する

## この記事は何
最近DVDに保存していた動画ファイルをmp4ファイルとして書き出す必要があったため、
スクリプトを作成しました。
この記事では記録のためスクリプトの実装を残しておきます。

## 環境
- Ruby: v3.2.2
- ffmpeg: v7.1
- マシン: MacBook Air M1, 2020

## 実装したRubyスクリプト
実装したスクリプトは以下の通りです。

```ruby:eport_dvd.rb
require 'fileutils'

# Get the output directory from command-line arguments
if ARGV.length != 1
  puts "Usage: ruby export_dvd.rb <file name>"
  exit 1
end

# Define the directory containing the VOB files
input_directory = "/path/to/input/directory"

output_directory = "path/to/output/directory"

# Ensure the output directory exists
FileUtils.mkdir_p(output_directory)

# Get all VOB files in the directory, excluding VIDEO_TS.VOB
vob_files = Dir.glob(File.join(input_directory, '*.VOB')).sort

# Create a temporary file list for ffmpeg
file_list = File.join(output_directory, 'file_list.txt')
File.open(file_list, 'w') do |f|
  vob_files.each do |vob_file|
    f.puts "file '#{vob_file}'"
  end
end

# Construct the output MP4 file name
output_file = File.join(output_directory, "#{ARGV[0]}.mp4")

# Call ffmpeg to concatenate the VOB files into a single MP4 file
command = "ffmpeg -f concat -safe 0 -i \"#{file_list}\" -b:v 1500k -r 30 -c:v h264_videotoolbox -pix_fmt yuv420p -strict -2 -acodec aac -ar 44100 \"#{output_file}\""
puts "Executing: #{command}"
system(command)

# Check if the conversion was successful
if $?.exitstatus != 0
  puts "Error concatenating VOB files to MP4"
else
  puts "Successfully concatenated VOB files to #{output_file}"
end

# Clean up the temporary file list
File.delete(file_list)
```

## 利用方法
`input_directory`には、VOBファイルが保存されているディレクトリを指定します。
DVDから直接書き出したい場合は`/Volumes/DVDボリューム名`のようなパスを指定することになると思います。
`output_directory`には指定したい書き出し先のパスを指定します。

`input_directory`と`output_directory`を指定した後、
以下のように実行することで、mp4への変換を行うことが可能です。

`ruby export_dvd.rb 書き出したいファイル名`

## ポイント
今回はffmpegでエンコードをする上でいくつかオプションを指定しています。
その中でも特に認識しておいたほうが良さそうな箇所について紹介します。

### -c:v h264_videotoolbox
この指定は、エンコーダーを`h264_videotoolbox`にするというオプションです。
`h264_videotoolbox`はMacで使えるハードウェアアクセラレーションのオプションです。
ハードウェアアクセラレーションを利用することで変換処理を高速化することが可能ですが、
画質などに影響の出る場合があるようです（細かい検証はしていません）
他の実行環境などを使っている場合は、適宜オプションの変更を行なってください。

他の環境で使えるオプションについてm紹介している記事があったのでよかったら参考にしてください。

https://qiita.com/CyberRex/items/960bbd0f348ad8dca544

### -pix_fmt yuv420p
こちらについてはMacのQuick Time Playerで実行可能にするため指定しているオプションです。
必要ない場合は外してください。

https://qiita.com/yohm/items/f84e848b6333aaa897e7
Windows11 DockerDesktopを一般ユーザとして使う

Windows11でDockerDesktopを一般ユーザとして使うために行ったことを備忘録として記しておきます。

# 背景
以前、貸与PCにて管理者としてインストールしているDockerDesktopを一般ユーザとして利用しており、都度、DockerDesktopを管理者権限で開いていたが、再起動したりDockerDesktopを落として再度DockerDesktopを起動するとエラーになりとても面倒で対応策を探していた。

## 前提条件
- PCを一般ユーザとして利用する必要がある
- ただし、管理者としてのアプリの実行や設定の変更は可能

# 対応内容
docker-usersグループに、対象の一般ユーザを追加する。

結論からいうと上記の内容で改善しました。手順としては以下になります。

1.コンピュータの管理を管理者権限で開く(検索窓にコンピュータの管理と打ち込むと出てきます)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490265/e5153171-19d1-ab71-b883-980af413dfcd.png)

2.ローカルユーザーとグループのグループを表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3490265/b4af191c-9ef6-cd6c-2dda-ee4c1e5becf4.png)

3.docker-usersをダブルクリックするとプロパティが開くので追加をクリック

4.対象のユーザを追加し変更を適用する

以上で一般ユーザとしてもDockerDesktopを利用できるようになります。

ちなみにPowerShellを管理者権限として実行し以下のコマンドを叩くことでもdocker-usersにユーザを追加できます。

~~~
net localgroup docker-users {ターゲットのユーザ名} /add
~~~

# 振り返り
Windowsの権限まわりって躓いたら一瞬で時間が溶けますね。今後も備忘録はしっかりと残していきたい所存です。
MacでISOイメージをDVDに書き込みたい

# はじめに
皆さん、OSを実機にインストールするために、ダウンロードしてきた ISOイメージ を DVD に書き込みたい、というのはよく（とは言わないまでもそれなりの頻度で）起きることかと思います[^longlongtimeago]。
[^longlongtimeago]: え、「OSをインストール？」「実機なんて使わねーよ」「そもそも光学ドライブなんてどこにあるんだよ」ですか。そういう時代かもしれませんね。でも、このまま突き進みますよ。そんな声を気にしていたら、○十歳超えて技術者とか名乗ってられませんから、、、

で、それを Mac でやろうとしたら少し苦労したのでここに書いておきます。macOS は Sequoia です。もちろん光学ドライブは外付けのものを買っている前提です。

# GUIで
できませんでした。

:::note warn
警告
コメントを受けて少々確認してみたのですが、必ず失敗する、というわけではありません。GUIから素直にディスクを作成できるISOイメージも存在します。ただし、感覚的にはGUIで成功するのは半分くらいです。ただ、再現性はあって「同じイメージでももう一度やれば成功する」ということはありませんでした。どのISOイメージができて、どのISOイメージができないかは、よく分かりません。同じOSであっても、CPUアーキテクチャが異なると片方はできるのにもう片方はできないとかあったりしますので。
少なくとも、この時に私がDVDに焼きたかったISOイメージは、GUIからはできませんでしたので、記事としては残しておきます。
:::

controlを押しながらISOイメージをクリックすると現れるメニューの中に「ディスクを作成...」というのが出てくるので、本来だったらこのGUIで（Macらしく）できるはずなのです。Macで読めないISOイメージは扱えないってことなのでしょうか。でも、別のOSだと読める方が奇跡ですよね。そして「OSを実機にインストールするために」って時には普通はmacOSではないOSが対象だと思うのですが、、、

# ターミナルから
（Macらしくはないですが）漢（おとこ）なら、ここはターミナルを使いましょう。

```
hdiutil burn your_path/ISO_IMAGE.iso
```
これでできます。書き込みたいISOイメージしか指定していませんが、外付けの光学ドライブに書き込んでくれました[^moredrive]。気になるなら、この前に
```
hdiutil burn -list
```
として、外付けの光学ドライブっぽいものが認識されているのを確認してもいいかもしれません。
[^moredrive]: 外付けの光学ドライブが1つだけだったので、自動的に判断してくれたのだと思います。でも、外付けの光学ドライブを複数付けている状況って、そうないような、、、

上記コマンドの経過は以下の通りです。
~~~
ディスクに書き込むデータを準備中
セッションを開いています
トラックを開いています
トラックを書き込み中
...............................................................................
トラックを閉じています
...............................................................................
セッションを閉じています
...............................................................................
ディスクの作成を終了中
ディスク作成の検証中…
検証中
...............................................................................
ディスク作成が完了しました
...............................................................................
hdiutil: burn: completed
~~~
この後、自動でディスクを排出してくれました。

ちなみに、できたディスクで（MacではないPCで）起動してインストール画面まで行くことは確認しています。（インストールはまだ決心がつかなくてしていませんが:sweat:）

# おことわり
この文章の内容は、筆者が所属している会社・団体とは一切関わりがありません。いわゆる「自主的な研究の成果の発表」というものです。
Vulkan日記その3: Raspberry Pi 5 + Nerves で Vulkanが動くっぽい

調べたところ，Raspberry Pi 5 + Nerves で Vulkan を動かすことが可能っぽいです．

- [Vulkan日記その1: HomebrewでVulkanをインストール](https://qiita.com/zacky1972/items/967d6ea213ee658bfa43)
- [Vulkan日記その2: デモンストレーション・プログラムを動かす](https://qiita.com/zacky1972/items/65ac97e850441958a7ea)

## Raspberry Pi 5 搭載の GPU で Vulkan が動く

https://www.raspberrypi.com/products/raspberry-pi-5/

> VideoCore VII GPU, supporting OpenGL ES 3.1, Vulkan 1.2

## NervesでGPUがMesa3Dの下で動く

Nerves Project の Frank Hunleth さんに直に質問

ZACKY:

> Can Nerves drive GPU on RasPi 5? The following page does not seem to include description of the GPU.
> https://hexdocs.pm/nerves_system_rpi5/readme.html

Frank Hunlethさん:

> Yes, the Linux drivers are enabled at https://github.com/nerves-project/nerves_system_rpi5/blob/main/linux-6.6.defconfig#L373-L374. 
> Everything I know that uses the GPU these days, uses it via Mesa3D. https://github.com/nerves-project/nerves_system_rpi5/blob/main/nerves_defconfig#L46-L48. 
> If you're asking about ML rather than graphics, then I'm not sure if it has the optimal configuration.

## Mesa3Dの下で Vulkan Runtime が動く 

https://docs.mesa3d.org/vulkan/index.html

## アーキテクチャ構成図

![Vulkan on Nerves](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55223/671653e4-5fcf-c774-4028-555486e7a343.png)

## まとめ

以上をまとめると，Raspberry Pi 5 上の Nerves で Vulkan を動かせるっぽいです．

[つづく](https://qiita.com/zacky1972/items/85bbcb135db4f90ad09e)
【無料】IntelliJ Idea Communityのインストール方法

# 記事作成背景
昔、IntelliJ ideaをインストールしたが、その後アンインストールして再度、このIDEが必要になったため備忘録として記載する。

#　環境
Windows11

# まずは公式サイトにアクセス！

公式サイトのこちら↓　をクリックしましょう。

https://www.jetbrains.com/ja-jp/idea/


# 公式サイトのダウンロードをクリック！
<b style:"color:red">ダウンロードボタン(赤枠)</b>は、①画面の真ん中付近と②メニューの右端のところにありますが、どちらでも良いです。


![intelliJ公式トップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/220fab11-1b4c-6b25-dc23-2cef407798c7.png)


# Comminity版を選択する
今回インストールするのは、無料版のCommunity版です。

ページトップにあるのは、Ultimate版(30日間無料トライアルの有料IDE)なので、スクロールを下に移動させ見ましょう。

![inteliJCommunityしただよ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/fa9a45f9-17f3-22f1-8f62-8e4c60172905.png)


すると、Community版が表示されました！
今回は、デフォルトのEXEファイルをインストールしてみることにしてみました。

![intellijCommunityダウンロードサイト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/891ba12a-521b-3b9e-4f71-25bee80b929d.png)

すると、Thank you ページが表示されてEXEファイルがダウンロードされます。
インストール時間は約3分くらいです。

![Tanks.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/4187934c-df75-cf23-83ec-d0bd4713506e.png)

# ウィザードに従ってインストールする。

![Intelli1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/2c925107-f5c1-4c94-71b6-a64a5df79b40.png)


![Intelli2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/df052d32-4808-c1ea-2602-fc14c9b76b23.png)

インストールオプション画面では、すべてチェックがデフォルトで外れています。
デスクトップにショートカットを作成したい場合は、install後にPATHを通したい場合はチェックを入れておきましょう。

![Intelli3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/5f95244d-52c9-12e2-20e7-6bf528e1f8b2.png)

特に変更する必要が無いので、「インストール」ボタンをクリック。

![Intelli4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/8256dc91-fb0a-3728-4153-eaf17b5e2e52.png)


![Intelli5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/8a7f06ea-0a45-729a-20c1-8b00b00be6fa.png)


![Intelli6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/7deab54c-a8dd-8581-66fb-36b8c3618cce.png)

デスクトップに配置されたIntelliJアイコンをクリックして起動してみましょう。
すると、Japanese(日本語)を使いますか？と表示されるので「次へ」を押しましょう。


![Intelli7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/02a3211e-33a1-db1c-a62c-78fe61a345de.png)

さいごに、設定のインポートについて①IntelliJ Ultimate版を使うか、②Visual Studio Codeをインポートするかを聞かれますが、特に使う必要が無ければ、すぐ下の<b>「インポートをスキップ」</b>を押して完了です。

![Intelli9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/9c44f3c5-7c82-5b72-8dbb-69e50c13c31b.png)

以上です。

# サンクスサイト

■IntelliJ IDEAインストール手順＜Windows向け＞

https://sukkiri.jp/technologies/ides/intellij-idea/intellij-idea-win.html
AWS VPCについて理解をまとめてみた

最近業務でAWSを触る機会が増えたので自分への備忘録として記事を書いておこうと思います。
今回は「VPC」についてです。


本記事は以下の書籍を参考にしています。
### 参考リンク
https://www.amazon.co.jp/AWS%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%83%BB%E4%BB%95%E7%B5%84%E3%81%BF%E3%83%BB%E9%87%8D%E8%A6%81%E7%94%A8%E8%AA%9E%E3%81%8C%E5%85%A8%E9%83%A8%E3%82%8F%E3%81%8B%E3%82%8B%E6%95%99%E7%A7%91%E6%9B%B8-%E8%A6%8B%E3%82%8B%E3%81%A0%E3%81%91%E5%9B%B3%E8%A7%A3-%E5%B7%9D%E7%95%91-%E5%85%89%E5%B9%B3-ebook/dp/B0B81PZY8H


## VPCとは何か？
AWSを利用する際にVPCというサービスをよく目にすると思うのですが、これは一言で言うと「AWS内に仮想ネットワークを構築できるサービス」です。

コンピューティングリソース（AWSの各サービス）を利用するためには、あらかじめネットワーク環境を構築しておく必要があります。
ここで利用されるのがVPCです。

構築した仮想ネットワークのIPアドレスを割り当てて、仮想的にそのアドレスにあるように配置します。
物理ネットワークの構築や設定を行わなくてよいのでシステム環境をオンデマンドで迅速に構築することができます。


## 構成要素について
VPCの主な構成要素として以下の6つ記載します。
（他にもこれは必須で覚えておく必要があるなどはご教示いただけるとありがたいです。）

* CIDRブロック
* サブネット
* インターネットゲートウェイ
* ルートテーブル
* セキュリティグループ
* ネットワークACL

### CIDRブロック
VPCはリージョン単位で作成され、その際にIPアドレス範囲がCIDR表記に従って割り当てられます。CIDRブロックは、ネットワーク内のアドレス範囲を指定する方法で、VPC内のIPアドレスは「xxx.xxx.xxx/16」から「xxx.xxx.xxx/28」の範囲で設定が可能です。

:::note warn
なお、以下のIPアドレスは予約済みのため、使用することができません
xxx.xxx.xxx.0
xxx.xxx.xxx.1
xxx.xxx.xxx.2
xxx.xxx.xxx.3
xxx.xxx.xxx.255
:::

### サブネット
サブネットはVPCのIPアドレスの範囲を分割したものです。（CIDRブロックにて割り当てた範囲をさらに分割したものです。）
一つのVPC内に複数のサブネットを作成し、それぞれ用途に応じてAWSの各サービスを構築をすることでアクセス制限など柔軟に設定することができます。

:::note info
サブネットには外部との接続を想定したパブリックサブネットと外部アクセスから保護する用途を想定したプライベートサブネットが存在します。
:::

### インターネットゲートウェイ
インターネットゲートウェイはVPCとインターネットの通信用途として設置されるものです。
インターネットゲートウェイを用いて実際に通信を行うには条件があり、通信元のリソースがパブリックIPアドレスを持っている必要があります。

### ルートテーブル
VPC内の通信には、指定されたCIDR形式のアドレス範囲を使ってルートを設定するルールが必要です。このルールのセットを「ルートテーブル」と呼びます。

VPC内の各サブネットは、必ず何かしらのルートテーブルに関連づける必要があります。

:::note info
1つのサブネットに複数のルートテーブルを関連づけることはできませんが、1つのルートテーブルに複数のサブネットを関連づけることは可能です。
:::

インバウンドやアウトバウンドのルート設定を適切に行うことで、VPC内外へのアクセスを細かく制御することが可能です。これにより、外部からの不要なアクセスをブロックしたり、内部リソースへの安全な接続を確保したりすることができます。


### セキュリティグループ
セキュリティグループは、ファイアウォールの役割を持ち、アクセスを許可するソースやプロトコル、ポートを指定してルールを作成します。AWSの各サービスに関連づけることで、特定のアクセスのみを許可し、ファイアウォールとして機能します。

:::note info
ファイアウォールとは
ネットワークやコンピューターを外部の不正アクセスや攻撃から守るためのセキュリティシステム
:::

### ネットワークACL
ネットワークACLは、セキュリティグループよりも広範囲でのアクセス制御が可能な設定項目です。
サブネットに関連づけられ、受信（インバウンド）と送信（アウトバウンド）両方のアクセスをサブネットレベルで制御できます。


## まとめ
今後は構築方法やVPCの各詳細など追記していきたいと思います。
GitHub Actionsをローカル環境で実行する「act」(KLabTechBook Vol.12)

この記事は2023年11月11日から開催された技術書典15にて頒布した「KLabTechBook Vol.12」に掲載したものです。
...
https://makiuchi-d.github.io/2024/11/03/klabtechbook12-act.ja.html