OmniAICreator/Qiita-1.07M huggingface dataset:
【Vue.js】Prettierでいい感じにフォーマッタを有効にしたい

自身の備忘録としておいておきます。

ここ最近GoやらPHPやらバックエンドが多くフロントエンドに触っていなかったので、久しぶりにVueをやろうとのことで、ずっとやってなかったVue3にようやく着手しました。
その時にformatterってどうやるんだっけ？？って思って遊んでたので書き残します。

## Prettierとは

他にもPrettierについて説明されている方が多いと思うので、自分はさくっと記載します。

https://prettier.io/

コード保存時、いい感じにコード成型してくれる便利なやつ。フロントをメインにいろんな言語に対応していて、優しい子。

### 導入のメリット
* プロジェクトで定まったコーディングスタイルを定義できる
* 見た目がよくなる
* 個人的にストレス軽減する
    * 特にGitレビュー時など。diffあるから何変えたんだろうと思ったらスタイル変わってただけだったみたいな

## 本題

### なんでPrettier入れようと？
Vuetify3を導入していたんですが、「v-data-table-server使ったろ！とりま丸コピで持ってくりゃいいか」なんて考えて持ってきたところ、もともと前に適当にくっつけたformatterのせいで↓みたいになってました。

```vue:フォーマッタ前
<template>
  <v-data-table-server v-model:items-per-page="itemsPerPage" :headers="headers" :items="serverItems"
    :items-length="totalItems" :loading="loading" item-value="name" @update:options="loadItems"></v-data-table-server>
</template>

```

**うーん、長い**

多分以前まではめんどくさくなって途中でやめたんでしょうね。今回その代償を食らってる感じです。この機会にやっちゃいましょう。

ちなみにVuetifyドキュメントはこんな感じ↓↓

```vue
<template>
  <v-data-table-server
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="serverItems"
    :items-length="totalItems"
    :loading="loading"
    item-value="name"
    @update:options="loadItems"
  ></v-data-table-server>
</template>
```

こんな風に自動でキレイにしたいなぁ、と。
そりゃ毎回手動で改行すればいいっちゃいいんですが、横着なもので楽したいんです。

### prettierの導入

vscodeの拡張機能でprettierをinstallします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480626/a27d5cfc-e07d-dd0d-168c-95aa1ef47860.png)


ワークスペース上でnpm installします。

```sh
npm install --save-dev prettier
```

### setting.jsonの設定
ワークスペース単位なので、.vscode配下にsetting.jsonを配置してそこでprettierの設定を有効にします。

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.printWidth": 80
}
```

これで自動成型してくれました。

## おわり
私自身いろいろ設定いじっていたので、他の部分も影響してるかもですが、よければ参考程度に・・・。

#### おまけ
最近ようやくChat-GPT使い始めたのですが、想像以上でびびってます。今回のも全部ではないですが、少しChat-GPTで調べてます。

仕事取られないように頑張ります。
npm startで出るエラー「node: /lib64/libm.so.6: version `GLIBC...」

reactの環境構築中に出たエラーです。

npm start実行時に出てきました。

原因を調べるとOSのバージョンが古いと出るらしい？
サーバOSはCentOS7
何だったんだろう。

node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
nextcloud mixhostに実装後、Updateできない問題

# 結論
手動アップデートしかできなそう。
ファイルのダウンロードで、タイムアウトが出るがphp.iniでどうキャパシティ広げてもServerで来られる。
共有Serverの宿命らしい
以上

以下は参考になりません

# 作業メモ
まずは、不要なファイルがあるので消さないと以下のエラーが発生します

```
Initializing Current version is 28.0.4. Update to Nextcloud 28.0.6 available. (channel: "stable") Following file will be downloaded automatically: https://download.nextcloud.com/server/releases/nextcloud-28.0.6.zip Open changelog ↗ Retry update
Check for expected files The following extra files have been found:
cgi-bin
php.ini
error_log
output.log
```

該当ファイルを何処かに対比します

再実施すると、私のパターンではダウンロードでタイムアウト発生。
php.iniを削除しているのでニュートラルにもどってしまってます。


```
Downloading
Parsing response failed.
Show detailed response
<html><head><title>500 Internal Server Error</title></head><body>
<h2>Request Timeout</h2>
<p>This request takes too long to process, it is timed out by the server. If it should not be timed out, please contact administrator of this web site to increase 'Connection Timeout'.
</p>
</body></html>
```

どうあがいても、ダウンロードされないため、
/XXXXX/nextclouddata_????/updater-ocihxvgjxolm/downloads
ダウンロード中に直接該当ファイルを上書きアップロード

/XXXXX/nextclouddata_????/updater-ocihxvgjxolm/.step
を削除
文系SEが無料ツールでGifを作ってみた

# 前置き
Qiitaに投稿する一環でGifを載せたいと思い、無料ツールでGifを作成しました。
備忘録的にまとめたものになります。
作業も容易なため、さっとGifを作りたい方は参考にどうぞ。

# 1.ツールインストール

今回は、無料のScreen To Gifを使います。
下記リンク先からツールをインストールしてください。

[Screen To Gif-インストールリンク](https://www.screentogif.com/)

1 インストーラーをダウンロード
サイト上のインストーラーをクリックしてインストーラをDLします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/6da5eb6e-1ce7-1635-9c2d-b1759a5b06d6.png)


2 インストーラ起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/3d46b091-8458-170e-f4d8-4c264efbc318.png)

3 デフォルト画面で「次へ」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/f980ebcf-691c-9881-46f5-dfc4096dab10.png)

4 「インストール」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/024127a1-5cdf-13ad-5652-8fc641ddf9a6.png)

:::note info
「このデバイスに変更を加えることを許可しますか？」とダイアログが表示されるため「はい」を押してください。
インストールが始まります。
:::

5 インストールが終了したら「終了」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/a7876a11-799e-a7fa-26c2-a066ced651b7.png)

# 2.ツール起動
1 インストールしたツールをダブルクリックで起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/a75c271d-a574-27ed-23dc-f84b3ed6b056.png)

2 レコーダーを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/25aa9103-b1ee-f6c8-d3e8-50f65f3bd3b1.png)

3 ウィンドウが立ち上がる
※画面はデスクトップに表示させています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/2a8ff5a3-2672-f4db-8404-0079a08484bd.png)

4 録画
ウィンドウの枠内の動作を録画します。
GIfにしたい箇所を枠内に入れます。ウィンドウの幅はドラックして伸縮自在です。
画面右下の録画ボタンを選択すると録画開始です。


5 保存
停止すると録画が停止されエディター画面に移行します。
「名前を付けて保存」を選択
拡張子をgifにして保存する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/4fd8c480-298d-888c-92e3-9e8e7fb0329a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/1511f5b1-7026-f0b2-c113-6e652c668d88.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/b57df277-61f3-23fe-c0f6-e02d619c7748.png)

6 生成Gifファイルの確認
保存先にgifが保存されることを確認しファイルを開く

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596363/1c58bc34-e709-df60-7dae-97c1f159c0e3.gif)


無事にGifが生成されました！
以上で作業が終了です！ お疲れ様でした！
【Wordpress】ファイルマネージャーからプラグインを削除する方法

# 概要
久しぶりにwordpressにログインしようとしたら、以下のエラーで管理画面に入れず...なんじゃこりゃ！

> Warining require:(xxxxx/content/plugins/backwpup/vendor/composer/../../src/infrastructure/restore/restore.php): failed to open stream: no such file or directory in /xxx/public_html/wp-content/plugins/wordpress-popular-posts/vendor/composer/classloader.php on line 478
(以下省略)

ということで、プラグインのエラーでログインできない場合の対処方法を紹介します。

# 原因と対処方法
このエラーはbackwupというプラグインのバージョンが原因らしい。調べるとたくさん記事が出てきました。
大抵こういったエラーはプラグインの影響と考えて良いでしょう。

ということで、ファイルマネージャーから対応します。

大概のレンタルサーバでは、サーバーパネルのような機能があると思います。Xserverやお名前ドットコムを利用したことがありますが、どちらにも似た機能はあります。今回はブラウザからファイルマネージャにアクセスし、プラグインを無効化していきます。

## 手順
まず、対象レンタルサーバのサーバパネルのファイルマネージャにアクセスします。
次に、wordpressのプラグインがあるフォルダへ移動します。具体的には以下です。

> /ドメイン名/public_html/wp-content/plugins

Xserverだとこんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/17fbba85-9cc1-96f2-ced7-d4657e17c832.png)


この下に、インストールしたプラグインのフォルダが並んでいるはずです。
今回のエラーの原因である「backwup」を見つけたら、フォルダ名を「backwup-renamed」のように名前を変えます。

この状態でwordpress管理画面を更新すると、無事にログインできるようになります。
プラグインを削除して良い場合は、管理画面から削除しても良いですし、先ほどのファイルマネージャーから「backwup-renamed」を削除しても良いです。無効化だけしておきたい、と言う方はそのようにしてもOKだと思います。

まだユーザーがアクセスするページ自体は読み込まれていたのでよかったですが、
wordpressのプラグインはこういったエラーがあるから怖いですね...
marginとpaddingの使い分けまとめ（演習編）

## 概要
普段自分が行っている。marginとpaddingの使い分けの方法をまとめます。
記事は「[HTML編](https://qiita.com/moyashi_san_tarou/items/850f20d63de181b56604)」と「[CSS編](https://qiita.com/moyashi_san_tarou/items/0124dacda22f9b916d4f)」と「演習編」の3つから構成しています。

## HTML編までのindex.htmlの確認
CSS編で作成したHTMLは以下になります。
```index.html
<body>
  <div data-wrap="水色の大枠" style="background-color: aquamarine; padding: 52px 0 0 0;">
    <div data-wrap="タイトル">提供可能な各クレジットカードについて</div>
    <div data-wrap="概要" style="margin: 52px 0 0 0;">各クレジットカードによって提供されるサービスが異なります。以下のそれらをまとめました。</div>
    <div data-wrap="カードプランの大枠" style="display: flex;">
      <div data-wrap="茶色の枠" style="background-color: chocolate;">
        <div data-wrap="カード名">スタンダードカード</div>
        <div data-wrap="カード詳細">スタンダードカードは年会費無料でご利用いただけます。ご利用金額の0.5％がポイントとしてたまっていきます。</div>
      </div>
      <div data-wrap="茶色の枠" style="background-color: chocolate;">
        <div data-wrap="カード名">プレミアムカード</div>
        <div data-wrap="カード詳細">プレミアムカードは年会費10000円でご利用いただけます。ご利用金額の2.0％がポイントとしてたまっていきます。</div>
      </div>
    </div>
  </div>
</body>
```

## 演習内容
前回までで余白の使い分け方法は学んだため、今回は演習になります。
それぞれの完成図の余白を付けるにはmarginとpaddingのどちらをどの要素に当てればよいのか考えながら行ってみてください。

### 演習①
画像のピンクの部分の余白を取りたい場合
![スクリーンショット 2024-06-08 140403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3753383/0c368450-5fd5-d376-9179-6040ee7a9016.png)

<details><summary>答え</summary>

`<div data-wrap="水色の大枠" style="background-color: aquamarine; padding: 52px 0 0 0;">`
↓
`<div data-wrap="水色の大枠" style="background-color: aquamarine; padding: 52px 52px 52px 52px;">`
</details>

### 演習②
画像のピンクの部分の余白を取りたい場合
![スクリーンショット 2024-06-08 141441.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3753383/3db51620-f970-46b9-14cd-00eab86d0cc7.png)

<details><summary>答え</summary>

`<div data-wrap="カードプランの大枠" style="display: flex;">`
↓
`<div data-wrap="カードプランの大枠" style="display: flex; margin: 52px 0 0 0;">`
</details>

### 演習③
画像のピンクの部分の余白を取りたい場合
![スクリーンショット 2024-06-08 141821.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3753383/15b333c3-5b9d-2a2a-2059-7ca7c18de7a9.png)

<details><summary>答え</summary>

`<div data-wrap="茶色の枠" style="background-color: chocolate;">`
↓
`<div data-wrap="茶色の枠" style="background-color: chocolate; margin: 0 0 0 20px;">`
</details>

### 演習④
画像のピンクの部分の余白を取りたい場合
![スクリーンショット 2024-06-08 142406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3753383/b7e5e833-4ef1-8012-e897-bc0489d01d1f.png)

<details><summary>答え</summary>

`<div data-wrap="茶色の枠" style="background-color: chocolate;">`
↓
`<div data-wrap="茶色の枠" style="background-color: chocolate; padding: 20px 20px 20px 20px;">`
</details>
※スタンダードカードに関する余白ですが、プレミアムカードでも同様です。

### 演習⑤
画像のピンクの部分の余白を取りたい場合
![スクリーンショット 2024-06-08 142802.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3753383/abdf78cd-f848-0585-1fad-4b86c0f1b325.png)

<details><summary>答え</summary>

`<div data-wrap="カード詳細">スタンダードカードは年会費無料でご利用いただけます。ご利用金額の0.5％がポイントとしてたまっていきます。</div>`
↓
`<div data-wrap="カード詳細" style="margin: 20px 0 0 0;">スタンダードカードは年会費無料でご利用いただけます。ご利用金額の0.5％がポイントとしてたまっていきます。</div>`
</details>
※スタンダードカードに関する余白ですが、プレミアムカードでも同様です。
毎日3分の振り返りがスクラムを劇的に変える：私の体験談

## 1. はじめに
これまでに複数のプロジェクトでスクラムを経験してきましたが、最近新しい会社で実践していた方法がとても効果的だったのでシェアしたいと思います。今回は、毎日3分の振り返りを行うことでスプリント振り返りがどれだけ楽になるかについてお話しします。

## 2. 過去のスクラム経験
前の会社では、スクラムの一環としてスプリントごとに振り返りを行っていました。しかし、振り返りの際に「良かった点」や「悪かった点」を思い出して書くのがとても難しかったです。特にスプリントの最終日には忙しさがピークに達し、振り返りに十分な時間を割けないことが多々ありました。

## 3. 新しい取り組み
新しい会社では、毎日3分程度の時間を設けて、日々の振り返りを行っておりました。この方法では、毎日チーム全員が少しずつ振り返りを行い、日々の出来事や気づきを記録します。これにより、スプリントの終わりにまとめて振り返る必要がなくなり、振り返りが格段に楽だなと感じました。

## 4. 効果と感動ポイント
毎日少しずつ振り返りを行うことで、スプリント振り返りが非常に楽になりました。さらに、日々の小さな改善が積み重なり、チームのコミュニケーションも向上しました。この方法は、チーム全体のエンゲージメントを高め、継続的な改善を促進するのに非常に効果的でした。

## 5. 実践のポイント
この方法を実践するためには、毎日3分の時間を確保することが重要です。具体的な振り返り内容の例としては、成功したこと、課題、改善点などがあります。また、デジタルツールやホワイトボード(Miro, Notion, Github Project など)を活用して振り返りを記録することもおすすめです。

## 6. まとめ
日々の小さな振り返りがもたらす大きな効果について、実際に経験してみて非常に感動しました。この方法は、他のチームやプロジェクトでも試してみる価値があります。ぜひ、あなたのチームでも取り入れてみてください。
文系新卒1年目がエンジニアになって感じたこと

# はじめに
この記事では私文卒一年目の私がIT企業に入社しての所感を述べたいと思います。
これからエンジニアを目指すか迷っている方の指標になれば幸いです。
まず僕の入社前のスペックですが、プログラミングは大学の授業で触ったことがある程度でした。その時に楽しいと思えたのと、モノづくりや勉強は好きだったのでIT業界を志望しました。

# 入社前のイメージとギャップ

### ずっと勉強しないといけない？休日も？
これはその通りでした。
しかし、楽しいから自発的に勉強することはあっても、休日にしたくもない勉強をしなければならないという感じではないです。
何が言いたいかというと、ITの勉強が面白いと思えるなら何の問題もないですが、面白いと思えなければ、休日も勉強"させられている”気持ちになってしまうかもしれません。


### 理系が強そう。てか情報系には勝てんくね？
これは半分正解半分不正解でした。というのも、確かにアルゴリズムを組む場面などでは、やはり情報系の方の処理能力はすごいです。ですが、業務でアルゴリズムを組む場面って実はそうそうなく、結局ITの世界もコミュニケーション能力（≒社交性）がものすごく大切です。なので、意欲さえあれば全然埋めることが可能な差だと思いました。

### 頭使うの好きだから向いてそう
これもその通りでした。ほかの業種で働いたことがないので正確な比較はできませんが、頭を使う機会は他業種より多いのかと思います。
その限りではないですが、やっぱり受験数学やパズルが好きな人は大体IT向いてると思います。

# 結論
結論ですが、文系卒でITの世界に飛び込んで大正解でした。
IT業界に入って後悔していることは、視力が悪くなったことくらいです。それ以外はいいことづくしです。あと良いギャップは、マッチョな人が多いです（仕事中基本動かないので、その反動で趣味として筋トレしている人が多い）。
僕もちょっとマッチョになりました。気持ち程度タイピングが速くなりました。
Pythonエンジニア基礎認定試験を受けました

# はじめに
950で合格、勉強期間は1週間程度。
Pythonは未経験でしたが、他の言語経験はありました。
（どの言語も未経験の方はyoutubeの解説動画や書籍python1年生あたりから始めるのが良さそうです）

# 学習教材
【書籍】
Python チュートリアル 第4版
徹底攻略Python 3 エンジニア認定 [基礎試験] 問題集（以下、黒本）
【サイト】
[ExamApp](https://python-basic.com/)
[PRIME STUDY](https://study.prime-strategy.co.jp/)

# 学習方法
黒本を各章を1周、総仕上げ問題を解いた時点で9割正答できていたので、
あとはネット上の問題集をやっていました。
ExamAppは初級、中級、上級を2週。
PRIME STUDYは「第1回 Python 3 基礎 模擬試験を受験する」のみ1週。

ExamAppは1問ごとに解説が入る形式なので、間違いをすぐに確認できて勉強しやすかったです。
問題の解説にPythonチュートリアルの対応ページが記載されており、間違ったものはチュートリアルも読んで、より定着するようにしていました。

Pythonチュートリアル第4版自体は最初に軽く見た程度で、これ自体だけで勉強することはなかったです。
（翻訳本特有の読みづらさがあり、チュートリアルの字面だけでプログラム言語初学者が読むと辛いと思います）

# 今後
エンジニア認定実践試験、エンジニア認定データ分析試験の2つを取る予定。
Flutter ドロップダウンメニューのテンプレート

# ドロップダウンメニュー (PopupMenuButton)のテンプレート

「…」を押すと出てくるメニュー

これです↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2445746/c8a4a8b2-6483-5136-fd1e-61cba3b85df7.jpeg" width="200px">

コード

```dart
PopupMenuButton<String>(
                  onSelected: (String s){
                    switch(s){
                      case "del":
                        break;

                      case "edit":
                        break;
                    }
                      
                  },
                  
                  itemBuilder: (BuildContext context){
                    return [
                      const PopupMenuItem(value: "edit", child: ListTile(
                          leading: Icon(Icons.edit),
                          title: Text('編集'),
                        ),
                      ),
                      const PopupMenuItem(value: "del",  child: ListTile(
                          leading: Icon(Icons.delete),
                          title: Text('削除'),
                        ),),
                    ];
                  },
                )
```

--------

実際に実装したアプリ

https://play.google.com/store/apps/details?id=com.yoshiInAndroid.cols_todo
IT未経験2ヶ月でJavaSilver取得

## はじめに　
私がIT未経験からJava Silver取得のために行なった学習方法について、まとめました。
※資格を最短で取得することを目的とした学習方法になっています。

## 対象者
・とにかくJavaSilverを最短で取得したい方
・これからJavaの学習を始める方

## プロフィール
参考として、Javaの学習を始めた時のプロフィールについて記載します。

プログラミング歴：約3ヶ月
今まで学習した言語：HTML, CSS, JavaScript
Progateなどで学習している程度です:relaxed:

## 記事の内容
1\. 試験日までのスケジュール
2\. 学習方法
3\. 最後に

## 試験日までのスケジュール
学習期間：2ヶ月
1ヶ月目：基礎学習
2ヶ月目：試験対策

## 学習方法
1ヶ月目
1〜２週目　[スッキリわかるJava入門](https://www.amazon.co.jp/%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%8F%E3%81%8B%E3%82%8BJava%E5%85%A5%E9%96%80-%E7%AC%AC4%E7%89%88-%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%8F%E3%81%8B%E3%82%8B%E5%85%A5%E9%96%80%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E4%B8%AD%E5%B1%B1-%E6%B8%85%E5%96%AC/dp/4295017930)
・ひたすら読みます:scream:２〜３周は読みたいです。
・理解しながら読むより、何周もして覚えてるイメージです。

3〜４週目　[せかチャン【JavaSilver対策】おすすめ動画集](https://www.youtube.com/playlist?list=PLru8-xuz0YvwoVRzBTX5jUcavM4Q8gZi9)
・この動画集を最低でも２周は見ましょう。
・１周目はとにかく見る。２周目は要点を自分なりにまとめながら見ました。

この時点では、理解度30〜40％程度あれば十分だと思います。
2ヶ月目の試験勉強をしながら、理解度を高めていくイメージです。
- - -
2ヶ月目
1〜3週目　[徹底攻略Java SE 11 Silver問題集](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Silver%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-815/dp/4295007625)
・とにかく何周もやりましょう。1週間に３周はしたいです。
・３周目から間違えた問題にはマークをつけていきます。
・何周もしてくると問題の答えを覚えてしまうので、
なぜその答えになるのかを頭の中で答えられるようにしましょう。

4周目 マークをつけておいた問題＋黒本に付属の過去問
・ひたすら、マークのついた問題と黒本の過去問を周回します。

※2ヶ月目の学習に入ると、問題が難しすぎて本当に初めは全然わかりません。
そのため、1ヶ月目の基礎学習に戻った方がいいのではと思ったりするのですが、
騙されたと思って、解きまくってください。いつの間にか問題がわかるようになっています。

## 最後に
今回の学習方法の目的は最短でJaveSliverを取得することを目的としています。
そのため、細かい理解は不要だと思っています。資格を取る勉強方法となっています。
暗記に近いイメージです。それでもある程度のjavaの雰囲気だったり、
知識はつくと思いますので、資格取得＋今後の学習の糧には必ずなると思います。
vba エクセル　表の形維持　outlook  row１セル、複数セル混合で本文

## エクセルoutlook 
Sub CreateOutlookMail()
    Dim OutlookApp As Outlook.Application
    Dim OutlookMail As Outlook.MailItem
    Dim rngTo As Range
    Dim cell As Range
    Dim recipient As String
    Dim subject As String
    Dim htmlBody As String
    Dim rngBody1 As Range, rngBody2 As Range, rngBody3 As Range
    Dim cellBody As Range
    Dim rowCount As Long, colCount As Long
    Dim i As Long, j As Long

    ' Outlookアプリケーションを起動または取得
    On Error Resume Next
    Set OutlookApp = GetObject(, "Outlook.Application")
    If OutlookApp Is Nothing Then
        Set OutlookApp = CreateObject("Outlook.Application")
    End If
    On Error GoTo 0

    ' メールアイテムを作成
    Set OutlookMail = OutlookApp.CreateItem(olMailItem)

    ' 宛先範囲の指定
    Set rngTo = Range("A1:A10")

    ' 宛先の取得
    recipient = ""
    For Each cell In rngTo
        If cell.Value <> "" Then
            recipient = recipient & cell.Value & ";"
        Else
            Exit For
        End If
    Next cell

    ' 件名の取得
    subject = Range("B1").Value

    ' 本文の取得 (HTMLテーブル形式)
    htmlBody = "<html><body>"

    ' 範囲1: C1:D3
    Set rngBody1 = Range("C1:D3")
    htmlBody = htmlBody & "<table border='1'>"
    rowCount = rngBody1.Rows.Count
    colCount = rngBody1.Columns.Count
    For i = 1 To rowCount
        htmlBody = htmlBody & "<tr>"
        For j = 1 To colCount
            htmlBody = htmlBody & "<td>" & rngBody1.Cells(i, j).Value & "</td>"
        Next j
        htmlBody = htmlBody & "</tr>"
    Next i
    htmlBody = htmlBody & "</table><br>"

    ' 範囲2: C4
    Set rngBody2 = Range("C4")
    htmlBody = htmlBody & "<p>" & rngBody2.Value & "</p><br>"

    ' 範囲3: C5:D7
    Set rngBody3 = Range("C5:D7")
    htmlBody = htmlBody & "<table border='1'>"
    rowCount = rngBody3.Rows.Count
    colCount = rngBody3.Columns.Count
    For i = 1 To rowCount
        htmlBody = htmlBody & "<tr>"
        For j = 1 To colCount
            htmlBody = htmlBody & "<td>" & rngBody3.Cells(i, j).Value & "</td>"
        Next j
        htmlBody = htmlBody & "</tr>"
    Next i
    htmlBody = htmlBody & "</table>"

    htmlBody = htmlBody & "</body></html>"

    ' メールのプロパティを設定
    With OutlookMail
        .To = recipient
        .Subject = subject
        .HTMLBody = htmlBody
        .Display ' メールを表示
    End With

    ' オブジェクトを解放
    Set OutlookMail = Nothing
    Set OutlookApp = Nothing
End Sub
＜3：変数と宣言＞Progate学習修了者がJavaScriptPrimerを読んだら

# はじめに：
こんにちは。Satoです。
本稿では、Progate学習を修了した段階のプログラミング学習者が、JavaScriptPrimer（以下、Primerとします）を学習するとどうなるのかを記録したものです。基本的には自身のアウトプットを主眼に置いていますが、初学者が躓いた点とその解決方法も記載するつもりです。良かったら参考にしてみてください。
# 学習事項：
## 変数と宣言に関する概要
* 変数：文字列・数値等のデータに名前をつけることで、繰り返し利用可能にする機能
* 変数の宣言：JavaScriptの場合、const, let, varで宣言する
→varはバグを発生させやすいので、constやletを使った方が良い。
## [ES2015]const
constとは、再代入できない変数を宣言するキーワードのこと。
Cf：再代入の一例として、下記constの変数を”Kyoto”から"Tokyo"にすることが挙げられる。なお、constでこれをやるとエラーが発生してしまう。
~~~
// const 変数名 = 初期値;
const japanCapital = "Kyoto";
japanCapital = "Tokyo"; // => TypeError: invalid assignment to const 'japanCapital'
~~~
一般的に変数への再代入は、「変数の値は最初に定義した値と常に同じであるべき（参照透過性, referential transparency）」というルールに反する。従って、**変数の値を再代入する必要が無い場合は、constを積極的に利用しよう**。
## [ES2015]let
letは値の再代入が可能な変数を宣言したい場合に用いる。
使用例として、以下のようなfor文が挙げられるだろう。
~~~
let x = 0;
for (let i = 0; i < 9; i++) {
    x = x + i;
}
console.log(x);
// Expected output: "012345678"
~~~
## varとその問題点
結論から言うと、varはletの古いバージョンだから現在は使わない方が良い。
varの問題点は、同じ名前の変数を再定義できてしまうことだ。letやconstで同じ名前を再定義しようとすると、下記のような構文エラー（SyntaxError）が発生する。
~~~
// "y"という変数名で変数を定義
let y = 1;
// 同じ名前の変数"y"を定義するとSyntaxErrorとなる
let y = 2; // => SyntaxError: redeclaration of let y
~~~
他にもvarには「変数の巻き上げ」と呼ばれる意図しない挙動がある。letやconstは、そういった問題を改善させたものだと認識しておけば良い。詳しくは、「関数とスコープ」で取り扱うとのこと。
## 変数名に使える名前のルール
変数名の名前（識別子）には、以下のルールがある。
1. 半角アルファベット、_（アンダーバー）、$（ダラー）、数字が利用可能
2. 変数名は数字から開始できない
3. 予約語と被る名前（例：constやletなど）は利用できない

上記のルールに加えて、ひらがなや一部の漢字も変数名として利用可能ではある。しかし、全角の文字列が混在すると扱いにくいケースもあるので、利用するべきではない。
~~~
// 利用OKな変数名
let $; // OK: $も利用可能
let _title; // OK: _も利用可能
let jquery; // OK: 小文字アルファベットも利用可能
let NTT; // OK: 大文字アルファベットも利用可能
let es2015; // OK: 数字は先頭以外なら利用可能
let 日本語の変数名; // OK: ひらがなや一部の漢字も利用可能だが、推奨できない
~~~
~~~
// 利用NGな変数名
let 1st; // NG: 数字から始まっている
let 123; // NG: 数字のみで構成されている
let let; // NG: 'let'は変数宣言のために予約されているので利用不可
let if; // NG: 'if'はif文のために予約されているので利用不可
~~~
# 躓いた点：
特になし。
# 参考文献
azu・Suguru Inatomi「第一部: 基本文法　変数と宣言」『JavaScript Primer』
https://jsprimer.net/basic/variables/
BashでNo such file or directoryというエラーが出る

## GitBashで㏅移動した際にエラーが発生する事象について
やりたいこと
* GitHubにコミットをしたく、作成したアプリのディレクトリに移動したい
## 以下は自分のユーザ名に置き換えてください
* username
# 発生したエラー
```:GitBash
bash:cd:C:usernameOneDriveドキュメントTodoApp:No such file or directory
```
# エラーが発生したときのコマンド
```:GitBash
cd C:\Users\username\OneDrive\ドキュメント\TodoApp
```
* 原因：\が特殊な文字や機能として扱われていた
（エスケープシーケンス）
# 解決法
 ```:GitBash
 cd "C:\Users\username\OneDrive\ドキュメント\TodoApp"
 ```
 ```:GitBash
 cd  cd C:\\Users\\username\\OneDrive\\ドキュメント\\TodoApp
 ```
# さいごに
GitBashでディレクトリを移動するときにはパス（ディレクトリの）を表すときに""もしくは\\\をつける

こちらの記事が分かりやすかったです。
⇒https://jitaku.work/it/application/git/git-bash/change-directory/
インターネットプロトコルスイートの基本構造と主要プロトコル

## はじめに

インターネットプロトコルスイート（Internet Protocol Suite）は、インターネットやその他のコンピュータネットワークでデータを転送するために使用されるプロトコルのセットです。これらのプロトコルは、主に以下の4つの抽象層で構成されています：

1. **アプリケーション層（Application Layer）**
2. **トランスポート層（Transport Layer）**
3. **インターネット層（Internet Layer）**
4. **リンク層（Link Layer）**

この記事では、それぞれの層の概要と主要なプロトコルを紹介します。

## 1. アプリケーション層（Application Layer）

### 概要
アプリケーション層は、ネットワークアプリケーションとその通信を支援するプロトコルを定義します。この層のプロトコルは、ユーザーに直接サービスを提供します。

### 主要プロトコル
- **HTTP（Hypertext Transfer Protocol）**: Webページの転送を行うプロトコル。
- **HTTPS（HTTP Secure）**: HTTPにSSL/TLSを加えてセキュア通信を行うプロトコル。
- **FTP（File Transfer Protocol）**: ファイルの転送を行うプロトコル。
- **SMTP（Simple Mail Transfer Protocol）**: 電子メールの送信を行うプロトコル。
- **IMAP（Internet Message Access Protocol）**: 電子メールの取得を行うプロトコル。
- **DNS（Domain Name System）**: ドメイン名とIPアドレスの変換を行うプロトコル。

## 2. トランスポート層（Transport Layer）

### 概要
トランスポート層は、データのエンドツーエンドの通信を提供します。この層はデータの信頼性、順序制御、エラーチェックなどの機能を提供します。

### 主要プロトコル
- **TCP（Transmission Control Protocol）**: 信頼性の高いデータ転送を提供するプロトコル。データの順序制御とエラーチェックを行います。
- **UDP（User Datagram Protocol）**: 信頼性よりも速度を重視したデータ転送を提供するプロトコル。エラーチェックや順序制御は行いません。

## 3. インターネット層（Internet Layer）

### 概要
インターネット層は、データパケットを送信元から宛先までルーティングするための機能を提供します。この層はネットワーク間の通信を可能にします。

### 主要プロトコル
- **IP（Internet Protocol）**: データパケットのルーティングとアドレス指定を行うプロトコル。IPv4とIPv6があります。
- **ICMP（Internet Control Message Protocol）**: ネットワークデバイス間のエラーメッセージや診断メッセージを送信するプロトコル。
- **ARP（Address Resolution Protocol）**: IPアドレスを物理アドレス（MACアドレス）に変換するプロトコル。

## 4. リンク層（Link Layer）

### 概要
リンク層は、物理的なネットワークインターフェース間でデータを転送するためのプロトコルを提供します。この層は、ローカルネットワークの通信を扱います。

### 主要プロトコル
- **イーサネット（Ethernet）**: ローカルエリアネットワーク（LAN）で広く使用される通信プロトコル。
- **Wi-Fi（Wireless Fidelity）**: 無線LANで使用されるプロトコル。
- **PPP（Point-to-Point Protocol）**: ダイヤルアップ接続や専用線接続に使用されるプロトコル。

## インターネットプロトコルスイートの層構造

インターネットプロトコルスイートの各層は、以下の図のように重なり合っています：

```
アプリケーション層: HTTP, FTP, SMTP, DNS
トランスポート層:  TCP, UDP
インターネット層:  IP, ICMP, ARP
リンク層:          Ethernet, Wi-Fi, PPP
```
M1チップMacでDockerを利用したAmazonLInux-Node環境で詰まった話

## 発生状況
Windows利用者が作成したdockerfileをMacユーザーが利用したところ、エラーが発生した。

## 原因と解決法
自分はWindowsしか利用したことがないため、

```dosbatch
=> ERROR [web 11/12] RUN npm install                                                               0.1s
------
 > [web 11/12] RUN npm install:
0.112 rosetta error: failed to open elf at /lib64/ld-linux-x86-64.so.2
0.112
------
failed to solve: process "/bin/sh -c npm install" did not complete successfully: exit code: 133
```

これが何原因か特定まで時間がかかってしまった。

原因は、

```docker
RUN curl -fsSL https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-linux-x64.tar.xz | tar -xJ -C /usr/local --strip-components=1 --no-same-owner
```

`linux-x64.tar.xz`であった。要は、x86系用を引っ張ってきてしまったため、arm64系では動かない問題であった、、

`linux-arm64`に変更することで、Dockerの乗っている環境で正しく動作するバイナリをとってくることが可能である。

しかし、これは環境に依存してしまうため、Bestな方法としては次の通りである。

```docker
RUN yum -y install nodejs
```
単純に、yum or dnfでinstallしてやればCPUに合わせたものを引っ張ってきてくれる。

## 感想
Amazon Linuxではこれまで、

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html

このような感じで、いつもインストールしていたため、個別に入れる場合は別に`yum`や`dnf`でよいと知り驚いた、、、

バイナリで引っ張る必要があるという先入観が解決までの道筋を邪魔していた、、

また、ほかのインストールにも応用が利く内容だと思うので、今後の参考にしていきたいと思う。
Rails + Enumerize – ActiveRecordで データベースの値が nil が返ってくる

# 問題

たとえばこんなクラスがある時

```rb
class Example < ApplicationRecord
  extend Enumerize

  enumerize :name, in: %i[alice bob carol]
end
```

データベースの値が enumerize の定義に対して不正だと ( たとえば `exampmes.name` に `david` という値があると ) 

結果に nil が返ってくる


```rb
Examinee.find_by(name: 'david').name # nil
```

# 原因

Enumerize の挙動のようだ

モデルで enumerize の行を消したら元の値が返ってくるようになった


```rb
Examinee.find_by(name: 'david').name # david
```


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
Rubyで任意時刻のDatetimeインスタンスを作りたい/既存Datetimeインスタンスの値を変えたいときの便利な方法

例えば、2024-06-08 12:00:00を作りたい場合

```
# 今日は2024-06-08の場合
Time.current.change(hour: 12)

# 今日は2024-06-08ではない場合
Time.zone.parse('2024-06-08 12:00:00')
```

Rails API公式
https://apidock.com/rails/DateTime/change
Javaのソースファイルモードを使って最も浅いJDBCのサンプルを作ってみた

### サンプルコード

```jdbc.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

public class SqlConnect {
    public static void main(String[] args) throws Exception {
        Class.forName("com.mysql.cj.jdbc.Driver");
        final String jdbcId = "root";
        final String jdbcPass = "";
        final String jdbcUrl = "jdbc:mysql://127.0.0.1:3306/";
        Connection cn = DriverManager.getConnection(jdbcUrl, jdbcId, jdbcPass);
        PreparedStatement st = cn.prepareStatement("show databases");
        ResultSet rs = st.executeQuery();
        while( rs.next() )
        {
            System.out.println( rs.getString(1));
        }
        rs.close();
        st.close();
        cn.close();
    }
}
```

### 実行結果

```
$ java  -cp './*' jdbc.java
information_schema
mysql
performance_schema
sys
```

### ディレクトリ構成
ソースとJDBCドライバがあるだけ。
JDBCドライバはあらかじめダウンロードしておく必要がある。
クラスパスは指定せず、実行時に引数で指定している。
あと、ローカルホストでMySQLがデフォルトポートで起動している前提。

```
$ tree
.
├── jdbc.java
└── mysql-connector-java-8.4.0.jar

0 directories, 2 files
```

### Javaのバージョンはopenjdk21

```
$ java --version
openjdk 21.0.2 2024-01-16
OpenJDK Runtime Environment (build 21.0.2+13-Ubuntu-120.04.1)
OpenJDK 64-Bit Server VM (build 21.0.2+13-Ubuntu-120.04.1, mixed mode, sharing)
```

### 背景とユースケース

- Javaのソースファイルモードではスクリプト的にJavaが使える
- 普通はスクリプト的には使わないんだけど、ちょっとしたデータベース接続をしたい時って、JDCBドライバのポータビリティはすごい便利
- 環境依存しないでソースコードのまま実行できるってことで言えばGo言語も優れているんだけど、`go get github.com/go-sql-driver/mysql` などの形で外部リポジトリからのインポートがよくある導線
- 世の中には外部リポジトリからのインターネット経由でインストールできる環境ばかりとは限らないし、バージョンを固定したいケースだってある
- そう考えると「依存モジュールの物理ファイルをコピーするだけで」動作するJavaのライブラリ管理手法は強い
- あたらしい目のJavaなら以下の点でビルドツールに頼らずに気軽に実行できるというのは20年ぶりに触って感動した
    - クラスパスをワイルドカード指定できる
    - .javaソースを直接実行できる

### 次の展開

シェバンで実行ファイルとして動かせるとなお面白い。

### 困ったこと

Javaのソースファイルモードがいまいち良い名前ではないのでググりづらい。Javaのスクリプトモードと言いたいところだけど、JavaScriptとかぶりまくる。
CORSやっと分かった

## 最初からこう書いてくれたら分かるのに

色々記事や仕様を眺めた上で意味が分からなかったのだが、最近分かった。
「最初からこう書いてくれよ」
と思った結論があるので最初に書いておく。

***「そもそもブラウザは実行しているスクリプトの出どころのOriginを知っていて、そのスクリプトが自分以外(異なるOrigin)のリソースを叩こうとする挙動を(ブラウザが)嫌がるって話。」***

である。Originが何か、というのは色々な記事を眺めてどうせ皆分かっていると思うのでそちらに紹介を譲る。
(暇になったら追記する)
NotebookLMの調理方法


2024年6月6日にNotebookLMの日本語版が公開されて、一部界隈では話題となっています。NotebookLMとはなんぞや？それっておいしいの？というのを簡単にまとめてみました。

## NotebookLMとは

こちらがGoogleから公式にNotebookLMの日本語版が公開されたとアナウンスがあった記事です。

https://blog.google/intl/ja-jp/company-news/technology/notebooklm-google/

ざっくりベースでは、昨年サービスが発表されてしばらく英語圏でプレリリースされていたものがGAしたような扱いのようです。また、公式ページによるとNotebookLMという製品が開発された経緯は、下記の通り色々な資料を横断的にAIが理解してくれて人間のサポートをするためのツールといったところでしょうか。

>私たちが NotebookLM で目指してきたのは、複雑な資料を理解して精査し、情報から新しい類似性を見つけ、下書きなどをすばやく作成するのに役立つツールの開発です。研究論文や取材記録、仕事でのドキュメントなどの参照文献（ソース）をアップロードすると、NotebookLM がそれらの重要な資料を理解し、必要なサポートを提供します。

実際に、Google Gemini ProやClaude Opus、ChatGPTなど、この１年の間に様々なAIエンジンでファイルの読み込みやURLの参照がサポートされ、読み込んだ情報をRAGのような参考情報として使用し、より精度の高い回答を目指すといった流れのうちの一つではないかと推測されます。また参照できるものとしては、テキストやPDFのようなファイルだけでなく、スライドやドキュメント内の画像、グラフ、図についてもその情報を参照し、質問ができるようです。バックエンドのAIエンジンがマルチモーダルに対応したGemini 1.5 Proだからこういった様々なファイルやメディア形式へ対応しているようです。


## 使ってみよう

NotebookLMを個人で利用する場合はGoogleのアカウントがあれば今のところは使えそうです。企業向けではGoogle Workspaceなどの環境が必要になりそうです。

https://notebooklm.google/

画面を開いた後に、Try NotebookLM をクリックするだけ。簡単ですね。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620986/f636cc67-30c5-b853-b71f-d71a66ddb65f.png" width=75% height=75%>

初めて画面を開くと、下記のような画面が表示されるかと思いますので、とりあえず新しいノートブックをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620986/8025c315-6e03-07db-8bb9-3583f6d4e3d7.png" width=75% height=75%>


次に、アップロード元を指定してアップロードします。例えばPDFファイルをアップロードすれば、そのPDFファイルに書かれた内容をベースにAIと会話できますし、Google Drive からファイルを参照したり、テキストファイルなどを指定したりもできます。またURLなどを指定することもできますので、どこかのページに書かれている理解しがたい情報を参照させてAIに要約させるといったこともできます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620986/09b73920-6896-4e98-0a4e-e9d995119216.png" width=75% height=75%>

せっかくなので、今回はURLで試してみましょう。URLをクリックすると下記のようなダイアログが表示されURLを入力することができます。ここにURLを貼り付けるとそのURLの情報を参照してくれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620986/03908a52-7450-21c8-fe11-e35697d83b07.png" width=75% height=75%>

Gemini Proのコンテキストウィンドウは最大100万トークンありますので、よほどデカいファイルでない限りはだいたい最後まで解析できると思います。

ちょうどいいページがなかったので、今回はサンプルとしてこちらのページを読み込んでみました。

https://cloud.google.com/gemini/docs/discover/write-prompts?hl=ja

URLをセットすると、下記のように概要を表示してくれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620986/34eca46d-9b45-4425-ad34-5f02b3c52446.png" width=75% height=75%>

あとは必要そうなURLをポチポチ追加することで、自分専用のカスタムチャットくんが完成です。今回はGeminiのプロンプトガイドをひと通り読み込ませましたので、これを使うとガイドラインやプロンプトについて質問して自分の理解を深めたり、自分の作成したプロンプトがガイドラインに沿っているか確認できたりといったようにプロンプト作成を支援してくれるというわけです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620986/2b96a756-3c25-da04-bc7a-8bbb508dc239.png" width=75% height=75%>

あくまでも上記は一例ですが、例えば試験範囲のファイルやそのベースとなる技術について書かれているファイルを一緒に読み込ませると、読み込ませた情報を基にした試験問題や出題範囲の技術情報を出すようなこともできるでしょう。

また、英語の論文を読み込ませて日本語で回答させたり、読みにくい官公庁の資料を読ませて概要をさくっと把握するようなこともできるでしょう。

AI＋独自RAGは使い道が多くてとても役にたつ機能ではありますので、どんどん使っていきたいと思います。
PHP_XDEBUG_REMOTE_HOSTとPHP_XDEBUG_CLIENT_HOSTの違い

## まとめ

`PHP_XDEBUG_CLIENT_HOST`: Xdebug **2** ではこれ
`PHP_XDEBUG_REMOTE_HOST`: Xdebug **3** ではこれ

Xdebugが2から3へバージョンアップされた際に構成設定の名前が変更された

https://xdebug.org/docs/upgrade_guide/ja

他にも変更された項目がある
例)

- `xdebug.remote_autostart` → `xdebug.start_with_request`
- `xdebug.remote_log` → `xdebug.log`
- `xdebug.remote_port` → `xdebug.client_port`(デフォルト値も`9000`→`9003`)

## 背景

古めのプロジェクトで修正する際にハマった。
うまくいっている設定を使えばデバッグ出来るだろうと、Xdebug3の書き方で書いてたが止まらずハマった。

## あとがき

PHPStormの設定が優秀なのと先人達の作ってきた道を辿って、なんとなくXdebugを利用して問題なくデバッグ出来ていましたが、バージョンが違うと項目名も変わるなど少しXdebugの理解が深まりました。
【ChatGPT＋DALL-E3】Promptの流れ。


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

　今回は、人間とGPT-4（オムニ含む）とDALL-E3のあいだのPromptの流れをまとめました。

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

　X-Twitter のGrokに
　　画像生成機能が登場するらしい。

　ただし、
　　中身はMidjourneyらしい。
[ビッグニュース](https://x.com/Yue_0124/status/1798964488483532953?t=rs3oftnXYdwhwObL96egIw&s=03)

　たぶんですが、
　　有料ユーザーだけでしょうね😅
　　　私は無課金ユーザーですから
　　　　Grokも触れていませんし😸
***
　次は、SNSの問題に対すること。

　SNSで
　　誹謗中傷を受けたら
　　　参考にしてください。
[SNS上での誹謗中傷の証拠の残し方](https://x.com/hirochuu8/status/1798974790566293613?t=CfkyMtS0y-155wFlj7uNww&s=03)

　今のところ、
　　私には必要なし。
　　　でもこういうのは
　　　　いつどこでなるか
　　　　　わかりません。
　　　　　　災害と考えておきますか。
***
　さて、本題です。

　といっても
　　今回は、
　　　ユーザーと
　　　　GPT-4とDALL-E3の
　　　　　あいだの流れを
　　　　　　まとめただけです。

　まぁ、まとめたのは
　　ChatGPTさんですけどね😅
***
***ChatGPT***
あなた（日本人ユーザー）とGPT-4およびDALL-E 3との間のプロセスは以下の手順で進行します：

1. **ユーザーからのリクエスト**: あなたが日本語で特定の画像生成や質問についてリクエストします。

2. **GPT-4による解析と翻訳**: GPT-4はあなたのリクエストを解析し、必要に応じて内部で英語に翻訳します。この翻訳は特に、DALL-E 3に送るPromptが英語でなければならないために重要です。

3. **Promptの作成**: GPT-4は解析した内容を基に、詳細な英語の画像生成指示（Prompt）を作成します。

4. **DALL-E 3への送信**: 作成されたPromptはDALL-E 3に送られ、画像生成プロセスが開始されます。

5. **画像の生成**: DALL-E 3はPromptに基づいて画像を生成し、その画像はGPT-4を介してユーザーに提供されます。

6. **画像の説明と和訳**: 生成された画像についてGPT-4が説明を加える場合、その説明を英語から日本語に翻訳して、ユーザーに提供します。

7. **フィードバックと再生成**: もしユーザーが画像の修正や追加のリクエストを持っている場合、そのフィードバックに基づいてGPT-4は新たなPromptを作成し、再びDALL-E 3に送信して画像を生成します。このサイクルはユーザーが満足するまで続けられます。

この一連の手順を通じて、あなたのリクエストに応じた画像が生成され、必要に応じて言語の壁も乗り越えて対応されます。
***
　はい、想像どおりです。

　でも、
　　知ってるのと
　　　知らないとでは、
　　　　大きな差が生まれます。

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

　今回は、ここまで。
業務でMacを使う人にオススメしたいカスタマイズ

## はじめに
今まで開発現場でWindowsを使うことが多かったのですが、今はMacを使っています。
Macを使っているとWindowsにはない癖があったり、デフォルトだとかゆいところに手が届かないといったことがよくありました。

転職やSESで常駐先が変わるなどして、WindowsからMacに変わった人って結構いると思うので同じ境遇の人の手助けになればと思い、記事を書きました。

今までMacを使っていた人も新しい発見があるかもしれないので、見てみてください。

## PC音源を含めて録画・録音したい
デフォルトで入っているQuick Playerというアプリで録画してみたのですが、何故かPC音源が録音できず会議の音声などが録音できていませんでした。

Background Musicというアプリをインストールして、リモート会議の音声設定で「Background Music」を指定すれば、ちゃんと録音されるようになりました。

※たまに音声が聞こえないときがあるので、そのときはスピーカー設定を一旦もとに戻して、再度「Background Music」に切り替えたら直ります。

https://github.com/kyleneideck/BackgroundMusic

## デュアルディスプレイ表示でデスクトップPCのように使いたい
私が普段使っているのはMacBook Airなのですが、この機種だと通常デュアルディスプレイは使えません。

※2024/06現在の最新機種では使えるようです。

ネットで調べてみたところ、DisplayLink対応のアダプターとDisplayLink Managerというアプリを使えばデュアルディスプレイが使えるとのことで、実際にやってみたところ問題なくデュアルディスプレイ化できました。

https://www.synaptics.com/products/displaylink-graphics/downloads/macos

## Bluetoothデバイスでのスリープ解除を無効化したい
私はキーボードは有線、マウスはBluetoothで繋いでいます。
Macのデフォルトだと、Bluetoothデバイスを操作するとスリープが解除されてしまうため、Bluetoothマウスを少しでも動かすとスリープ解除されてしまうのでそれがストレスでした。

Bluesnoozeというアプリを使えば、Bluetoothデバイスでのスリープ解除を無効化することができます。

https://github.com/odlp/bluesnooze

## Windowsと同じキー操作を行いたい
* F5キーで更新
* マウスのサイドボタンで「戻る」「進む」

などWindowsだと特に設定しなくても実行できた操作がMacだとできませんでした。

Karabinerというアプリを使えばデバイス操作をカスタマイズすることができます。

https://karabiner-elements.pqrs.org/

## マウスのスクロールの初動が遅いのを直したい
Macのマウス操作では「加速度」というMac特有の設定があるようで、この設定のせいでマウスでスクロール操作しても最初がゆっくり、その後が早いというスクロール動作になります。
なんだか動きがもっさりしてるなと感じて、私にはストレスでした。

Linear Mouseというアプリを使えば、この加速度設定を無効にできました。

https://linearmouse.app/ja-JP/

## Finder上でアイコンを常に整列させたい
Finderのデフォルト設定だと、マウスでファイルをドラッグアンドドロップしたときなど、マウスの位置にファイルが配置されて、ファイルアイコンがバラバラで乱雑配置されてる状況が生まれます。

常に整列されてる状態にするには、Finderの環境設定で変更することができます。

https://support.apple.com/ja-jp/guide/mac-help/mchlp1745/mac#:~:text=%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E6%95%B4%E5%88%97%E3%81%99%E3%82%8B%3A%20%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3,%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

## さいごに
MacはWindowsに比べて、使いこなすのが難しいと感じました。
一方でアプリが豊富にあるので、自分好みにカスタマイズすればWindowsよりも作業効率があがると考えています。

今回は6つ紹介させて頂きましたが、他にも便利なカスタマイズはたくさんあると思います。
Macを使っていて、こういうことができたらいいなと思ったら、まずググってみましょう。
なにかしらやりたいことを実現できるアプリなり設定方法があることが多いです。

私があげたもの以外でもこれ便利だよっていうのがあったらコメントなどで教えて頂けると嬉しいです。
スクレイピングにおけるSeleniumとBeautifulSoupの使い分け

## Seleniumと Beautiful Soupのメリット・デメリット

スクレイピングにおいて、Seleniumと Beautiful Soupはそれぞれ長所と短所があります。
整理すると以下のようになります。

**Selenium**

メリット:
- ブラウザを自動化できるので、JavaScriptでレンダリングされたコンテンツを取得可能
- ユーザーの操作をシミュレートできる(クリック、スクロールなど)
- 動的なウェブサイトに対応できる

デメリット:
- パフォーマンスが比較的遅い
- ブラウザを起動する必要があるため、リソース消費が大きい
- ブラウザの自動化は複雑で、コードの保守性が低い可能性がある

**Beautiful Soup**

メリット:
- 静的なHTMLを解析するのに適している
- 軽量でパフォーマンスが高速
- HTMLの構造に基づいて要素を探索できる
- 正規表現で要素を抽出できる

デメリット:
- JavaScriptでレンダリングされたコンテンツを取得できない
- 動的なウェブサイトには対応できない
- HTMLの構造が複雑な場合、要素の抽出が難しくなる可能性がある

一般的には、静的なウェブサイトではBeautiful Soupを使い、動的なウェブサイトではSeleniumを使うのが適切です。また、両者を組み合わせて使うこともできます。例えば、SeleniumでページをレンダリングしてHTMLを取得し、その後Beautiful Soupで解析するなどです。
``` phthon
html = driver.page_source
```

要件やウェブサイトの性質に応じて、適切なツールを選択し、それぞれの長所と短所を意識しながらスクレイピングすることが重要です。

## Seleniumと Beautiful Soupの要素抽出コマンドの整理

**Selenium**

Seleniumでは、WebDriverを使ってブラウザを操作し、要素を特定します。
主な抽出方法は以下の通りです。

- `find_element(By.ID, 'id')`
  - 要素のidで特定する
- `find_elements(By.CLASS_NAME, 'className')`
  - 要素のクラス名で特定する
- `find_element(By.TAG_NAME, 'tagName')`
  - 要素のタグ名で特定する
- `find_element(By.XPATH, 'xpath')`
  - XPathで要素を特定する
- `find_element(By.CSS_SELECTOR, 'css_selector')`
  - CSS セレクターで要素を特定する

```python
# Seleniumの例
driver.get("https://example.com")
elem = driver.find_element(By.ID, "myElement")
elems = driver.find_elements(By.CLASS_NAME, "myClass")
```

**Beautiful Soup**

Beautiful Soupでは、HTMLやXMLの解析ツリーから要素を探索します。主な抽出方法は以下の通りです。

- `find(name, attrs, recursive, string, **kwargs)`
  - 指定した条件に合う最初の要素を取得する
- `find_all(name, attrs, recursive, string, limit, **kwargs)` 
  - 指定した条件に合うすべての要素をリストで取得する
- `select(selector)`
  - CSSセレクターに一致する要素を取得する
- `select_one(selector)` 
  - CSSセレクターに一致する最初の要素を取得する

```python
# Beautiful Soupの例
soup = BeautifulSoup(html_doc, 'html.parser')
elem = soup.find("div", {"id": "myElement"})
elems = soup.find_all("div", {"class": "myClass"})
elems = soup.select("div.myClass")
```

Seleniumは、ブラウザ操作を通して動的に要素を取得できますが、Beautiful Soupは静的なHTMLを解析するのが得意です。
要件に応じて適切なツールを使い分けましょう。
親子関係のWindow同士の値の渡し方

### 本記事の目的

言葉の定義：
GUIプログラミングにおいて、クラス単位で実装しています。

親クラスとは、GUIプログラムにおいて、親Windowを指します。
子クラスとは、GUIプログラムにおいて、子Windowを指します。

親子Windowにおいて、内部で値を渡す場面があるため、
親子関係のWindowで親Windowが持っているメンバー変数を子Windowに渡す場合の事例を示す
Pythonにおいて、実践で良く使う手法なので、覚えておいた方が良いと思います。

以下は、子供の血液型を判断する事例です。

```py
class Father:
    def __init__(self, blood_type) -> None:
        self.blood_type = blood_type

class Mother:
    def __init__(self, blood_type) -> None:
        self.blood_type = blood_type

class Child:
    # AB型は考慮しない
    keys = [
        ['A', 'B'],
        ['A', 'O'],
        ['B', 'O'],
        ['A', 'A'],
        ['B', 'B'],
        ['O', 'O']
    ]
    values = [
        ['A', 'B', 'AB', 'O'], # rule1
        ['A', 'O'],            # rule2
        ['B', 'O'],            # rule3
        ['A', 'O'],            # rule4
        ['B', 'O'],            # rule5
        ['O'] # rule6
    ]
    # 生殖ルール
    blood_dict = {tuple(k): v for k, v in zip(keys, values)}

    def __init__(self, father, mother) -> None:
        self.father = father
        self.mother = mother

    def get_blood_type(self):
        # 両親の血液型
        parents = tuple(sorted([self.father.blood_type, self.mother.blood_type]))
        # 生まれてくる子供の血液型
        child_blood_type = Child.blood_dict[parents]
        
        print(f'生まれた子供の血液型は{child_blood_type}')

class Main:
    def __init__(self) -> None:
        self.father = Father('B')
        self.mother = Mother('A')

    def born(self):
        child = Child(self.father, self.mother)
        child.get_blood_type()

ins = Main()
ins.born()

```
実行結果

```
生まれた子供の血液型は['A', 'B', 'AB', 'O']
```

親クラスから子供クラスへ渡す場合(self.father, self.motherを引数として渡す）


```py
class Main():

    def __init__(self) -> None:
        self.father = Father('B')
        self.mother = Mother('A')

    def born(self):
        child = Child(self.father, self.mother) #明示的に渡す
        child.get_blood_type()

```
子供クラス側は、引数で受け取る
```py
class Child():
    def __init__(self, father, mother) -> None:
        self.father = father
        self.mother = mother
```

引数がたくさんある場合は、
単にselfのみを渡して、使う側で、引き取るもののみ定義して使うのも良いかと思います。
```py
class MainWindow():
    def __init__(self) -> None:
        # GUIでほかに設定するパラメータが多くある場合
        self.hoge = HogeClass()
        self.buzz = BuzzClass()
        self.foo = FooClass()
        self.bar = BarClass()

    def ShowResults(self):
        child = ChildWindow(self) # selfのみ
        child.showSubWindow()
```
受けとるクラス
```py
class ChildWindow():
    def __init__(self, main_winodow_param) -> None:
        self.param_1 = main_winodow_param.param_1
        self.param_2 = main_winodow_param.param_2
    def ShowSubWindow():
        pass
```
質はともかく継続する

# 質はともかく継続する

サッカーの本田選手は毎朝5時に起きて英語の勉強をしているそうな。
その時に続けるコツの話として、やる気がない時とかもあるけど、質は悪くてもいいからやる事がコツだ、という感じの事を言ってました。
エンジニアには勉強がついてまわるので、参考になる考え方だなぁと感心しました。

そういえば晩御飯もそんな感じで作っていることに気がつきました。
平日は作り置きとか、冷凍とかですませてる。土日は唐揚げとか煮付けとかを作ってる。
質はともかく続けてます。

なにか新しい言語や技術を学ぶ時に、このマインドを大事にして行こうと思います。

という事で、qiitaに載せる記事も質はともかく継続していこう。
エンジニア特化部門の管理職が考えるプログラミング教育　Don't　think too much, run on local environment.

現在、某企業のエンジニア特化部門で管理職として働いていますZENDOCと申します。
私個人の取り組みで、社内の若手とプログラミングのトレーニングを始めており、伝えた内容をこちらにも残そうと書き始めました。
少しでも見たエンジニアの方の参考になれば幸いです。
1つの記事に対して、1つの考え方、背景・考え方等を記載する形で記載していこうと考えています。

## 考え方1
* Don't think too much, run on local environment.
考えすぎない。ローカル環境で動かしてみよう。

性分もあるとは思いますが、私自身、書籍を読込むだけの勉強が苦手で、『実現したいことを実装して動かそう、その上に知識を蓄えて、補完しよう。』の方針で一緒にプログラミングしてます。
書籍やWebページ見ただけでは、記載されているコード実装できるようにならないという見解です。
少しずつでも、プログラミング実装して、動かしましょう。試行錯誤した数だけ、スキルになると信じてます。
プログラミングを始めたら、まずは、"Hello World"標準出力で表示させてみましょう。プログラミングの実行手順/方法、どのメソッドに実装しないといけないか体感できます。わかなければ、まず自分で調べるというのが基本行動原則です。

もしローカル環境を壊したら、直すか作り直したらいいんです。
TestcontainersでOracle XE起動時にXEPDB1に初期化SQLを実行

# 背景
Testcontainersで```gvenzl/oracle-xe```を使用してdockerにOracle XEを起動する際、```SYS```としてデフォルトPDBの```XEPDB1```に初期化SQLを実行したい。

# やり方など
詳細は公式ドキュメント https://hub.docker.com/r/gvenzl/oracle-xe の Initialization scripts に解説がある。

まず、コンテナの機能で```/container-entrypoint-initdb.d``` ディレクトリ下へ ```*.sql``` を配置するとDB初期化時にこれらを実行する。次に、testcontainersの```withCopyFileToContainer```でホストのファイルをコンテナにコピーできる。なので、これらを組み合わせて使用する。またポイントとして```SYS``` ユーザでこれらSQLを実行する。なので、権限が必要な初期化処理はこれを利用する。

サンプルのソースコードは以下の通り。

```java
import org.testcontainers.junit.jupiter.Container;
import org.testcontainers.junit.jupiter.Testcontainers;
import org.testcontainers.containers.OracleContainer;
import org.testcontainers.utility.MountableFile;

  @Container
  @ServiceConnection
  static OracleContainer oracle = new OracleContainer("gvenzl/oracle-xe:21.3.0-slim-faststart")
      .withCopyFileToContainer(
          MountableFile.forClasspathResource("create_tablespace.sql"), "/container-entrypoint-initdb.d/init.sql");
```

```MountableFile.forClasspathResource```でクラスパス下のファイルを```/container-entrypoint-initdb.d/init.sql```というディレクトリ・ファイル名として配置している。以下はサンプルSQLとしてtablespaceを作成している。ポイントは```alter session```でPDBの```XEPDB1```に変更している。

```sql:src/main/resources/create_tablespace.sql
alter session set container = XEPDB1;

CREATE TABLESPACE TBS_DATA_01 DATAFILE '/opt/oracle/oradata/XE/tbsdata01.dbf' SIZE 250M;
```

# はまった点
```alter session set container = XEPDB1```をしないとPDBで実行しないので、あとで一般ユーザでアクセスすると存在しないエラーになってしまう。なので、初期化SQLが成功したのに何も実行されてないように見えてしまう。

```alter session... ``` 無し時の実行時のログを見ると、

```
STDOUT: CONTAINER: running /container-entrypoint-initdb.d/init.sql ...
（省略）
STDOUT: Completed: CREATE TABLESPACE TBS_DATA_01 DATAFILE '/opt/oracle/oradata/XE/tbsdata01.dbf' SIZE 250M
STDOUT: CREATE TABLESPACE TBS_DATA_01 DATAFILE '/opt/oracle/oradata/XE/tbsdata01.dbf' SIZE 250M

```

のように問題無く初期化SQLが実行されたように見えるが、テスト実行時に実際に使用する```XEPDB1```に作成したわけでは無い。なので、何も実行されてない、と勘違いしてしまった。oracleのCDPとPDBの関係を知っていれば何てこと無い話だが、普段あまり意識しない点なのではまってしまった。

以下は```alter session (略) XEPDB1```有りの実行時のログ。ログにも```XEPDB1```が含まれるのが分かる。

```
STDOUT: XEPDB1(3):Completed: CREATE TABLESPACE TBS_DATA_01 DATAFILE '/opt/oracle/oradata/XE/tbsdata01.dbf' SIZE 250M
STDOUT: XEPDB1(3):CREATE TABLESPACE TBS_DATA_01 DATAFILE '/opt/oracle/oradata/XE/tbsdata01.dbf' SIZE 250M

```
JDLA Generative AI Testの勉強メモ

試験日2024年6月8日(土)の「JDLA Generative AI Test 2024 #1」を受験しました．

この記事では，試験に向けて取り組んだ内容を勉強メモとして残しておきます．

# 試験に向けて取り組んだこと
* [公式サイト](https://www.jdla.org/certificate/generativeai/)を確認
* [こちら](https://cbt-s.com/examinee/examination/jdla)から試験申し込み
* <details>
  <summary>試験概要を確認</summary>
    <ul>
      <li>受験資格：どなたでも受験可能</li>
      <li>実施日程：2024年6月8日（土）10:00～23:59</li>
      <li>受験料：2,200円（10％消費税込）</li>
      <li>受験方法：IBT（CBTと異なり，自宅や会社等から受験可能）</li>
      <li>試験時間：20分</li>
      <li>出題形式：択一式/多肢選択式 19問 ・ 記述式 1問</li>
      <li>合格基準：非公開</li>
    </ul>
</details>

* [Generative AI Testの例題・過去問](https://www.jdla.org/certificate/generativeai/issues/)を解く
* [G検定（AI・人工知能）用語集](https://zero2one.jp/ai-word/)で知識習得

自分は，資格試験の勉強は本から入ることが多いのですが，
2024年5月時点では，公式テキストや問題集などの本が見当たりませんでした．
そのため，インターネット上にある情報のみを頼りにして，試験勉強しました．

# Generative AI Testの例題・過去問を解く
自分は最初に，[こちら](https://www.jdla.org/certificate/generativeai/issues/)に掲載されている例題・過去問を勉強しました．
生成AIの技術，生成AIの利活用，生成AIのリスクについて，各3問の問題と解答，解説が掲載されており，大変勉強になりました．

# G検定（AI・人工知能）用語集で知識習得
自分は主に，[G検定（AI・人工知能）用語集](https://zero2one.jp/ai-word/)を利用して，[Generative AI Test 2024#1 シラバス](https://www.jdla.org/certificate/generativeai/#toc7)に出てくる用語を一つひとつ確認していきました．
自分は，スプレッドシートに用語とその説明を書き込み，内容を覚えていきました．
※2例だけ残し，説明は消去しました

https://docs.google.com/spreadsheets/d/1J-pOd3dc8m6sUxvaTf4yIf5PmZA9HDAiCGRn1IxQ8Tg/edit?usp=sharing
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRkqe83TZA6jR0UJgJUmUV1e5OnQpzMs0k81sKrcP1RS9hpDNOTO_RfTwG4nrL7Li9nNQPOLwfgcvuc/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" height="700"></iframe>

# 結果
無事，合格しました．
今回の勉強によって，試験に合格する水準の知識を習得できました．
ただ，正答率100％を狙うには，上記勉強だけでは不十分であることもわかりました．

試験の合否と一緒に問題の解説が公開されていたので，解説を見て不足していた知識の習得につとめたと思います．
Nuxt3でToast UI Editorを使う方法

Toast UI EditorをNuxt２で使っていました
いい加減Nuxt3に引っ越さないといけないということだったのですが、
このToast UI Editor自体はVue2まででVue3をサポートしておりません。

普通ですとQuillとかtiptap、その他のエディタを使うべきですが
リソースやその他の制限によりどうしてもNuxt3で使いたいという要望があると思います。
またToastUIEditorには標準で表がついておりこれがなかなか優秀なのです。

以下Nuxt3で使えるようにしたメモです。

1. まずインストール
```
npm install @toast-ui/editor @toast-ui/editor/dist/toastui-editor.css
```

2. 次にcomponents/ToastEditor.vueを作成
```
<!-- components/ToastEditor.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

const props = defineProps({
  modelValue: {
    type: String,
    required: false,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue']);

const editor = ref(null);

onMounted(() => {
  const e = new Editor({
    el: editor.value,
    height: '500px',
    initialEditType: 'markdown',
    previewStyle: 'vertical',
    initialValue: props.modelValue,
    events: {
      change: () => emit('update:modelValue', e.getMarkdown()),
    },
  });
});
</script>

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

```

3. 使用方法
pages/index.vue
```
<!-- pages/index.vue -->
<script setup>
import { ref } from 'vue';
import ToastEditor from '~/components/ToastEditor.vue';

const content = ref('## Hello, Toast UI Editor!');
</script>

<template>
  <div>
    <h1>Toast UI Editor in Nuxt3</h1>
    <ToastEditor v-model="content" />
    <div>
      <h2>Output:</h2>
      <pre>{{ content }}</pre>
    </div>
  </div>
</template>

```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653035/55cc7ee0-edf9-4020-5194-bd0e78c62ec7.png)


以上
【Git】alias設定でコマンド時短🐶🍵

## はじめに
ショートカットは時短の第一歩

数秒だろうと、無駄な手間は省きたい。
そんな開発効率化の第一歩となれば幸いです。

### 記事対象者
下記のような人を対象にしています。

- プログラミング初心者（開発歴：１週間）

## エイリアス（alias）とは？
wikipediaより
>UNIXなどにおいてコマンドを別名で登録したもの。別名を登録するコマンド名。

長いコマンドや頻繁に使うオプションを毎回正確に全入力するのは大変です。
alias設定をすることで、別名として定義することが可能になります。

### 人が同時に記憶できる限界値は3~5単語
<dt>『マジカルナンバー 4±1』</dt>
心理学で提唱されている、人が同時に記憶できる短期記憶の限界値のこと。


人は3～5個の単語までしか覚えられないといわれています。

つまり3単語以上の入力が必要なら、何らかの調べる手間が発生しうるということです。

:::note warn
従来のマジカルナンバーは『７±２』説が主流だったが、
2001年に『４±１』説が提唱されている。
:::

## エイリアス設定をご紹介
1. `vi ~/.gitconfig`でalias設定ファイルを開く
2. alias設定を追加


```~/.gitconfig
[alias]
    st = status -s -b
    d = diff
    dc = diff --cached
    pr = remote prune

    # checkout
    co = checkout

    # commit
    cm = commit -a -m
    firstcm = commit --allow-empty -m \"空コミット\"

    # log
    l = log --oneline --graph --decorate
    lp = log --oneline -p

    # branch
    br = branch

    # diff
    dc = diff --cached
    dd = diff develop

    # reset
    rh = reset --hard HEAD
    rs = reset --soft HEAD
```

## 省略しないことも大事
- git merge
- git push

これらは入力誤爆するとリカバリーが大変です。

あえてalias設定はせず、全入力で目視確認しながら操作する方が安心といえます。

## おわりに
以上、Gitコマンドが少し使いやすくなるエイリアス紹介でした。

実際に触っていくと、
自分の好みが出てくると思うので、ぜひ色々とガチャガチャしてみてください。

手軽に自分なりの開発環境をカスタマイズしてる感覚があって楽しいですよ。

## 参考記事
- [Git の基本 - Git エイリアス](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-Git-%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9)

- [世の中のエンジニアのalias設定](https://qiita.com/reireias/items/d906ab086c3bc4c22147)
AWS Outposts

# はじめに

この記事はAWS SAA試験勉強のための、AWS Outpostsに関する知識のまとめです。


# AWS Outpostsとは

Amazon RDSデータベースなど、AWS のサービスをオンプレミス環境でも利用可能とするサービス。

# メリット

### ハイブリッドクラウド対応
AWS OutpostsはオンプレミスでAWSのサービスを利用できるため、クラウドとオンプレミスのシームレスな統合が可能です。
### 低遅延
データ処理をローカルで行うため、レイテンシーが低く、リアルタイムのアプリケーションに適しています。
### 一貫性のある環境 
オンプレミスとAWSクラウドの間で一貫した開発および運用環境を提供し、開発者の生産性を向上させます。
### セキュリティとコンプライアンス 
データをローカルに保持できるため、データ主権やコンプライアンスの要件を満たしやすくなります。
### フルマネージドサービス
AWSのサポートが受けられ、ハードウェアやソフトウェアの管理が簡素化されます。


# デメリット

### コスト 
導入および運用コストが高く、特に小規模な企業にとっては負担となる可能性があります。

### 物理的な設置要件
ハードウェアの設置スペースや電力、冷却設備が必要です。
### 依存性 
AWSのサービスに依存するため、AWSのエコシステム外の技術やプロバイダーとの互換性が制限される場合があります。
### 運用の複雑さ
ハイブリッド環境の運用には高度な知識とスキルが求められるため、管理が複雑になることがあります。
### 地域制約
一部の地域ではサービス提供が制限されている場合があります。