OmniAICreator/Qiita-1.07M huggingface dataset:
いつQiita書いてるんですか？の問いに対して

# はじめに：掲題の問いへの答え
業務時間外、特に平日夜や休日に書くことが多いです。

朝？寝てます。

みなさんはいつ書いてますか？よろしければこのコメント欄、X、はてブのコメントなどで教えてください！

## この記事で書いていること　※読み切るまでの所要時間：2分
- なぜ業務時間中に記事を書かないのか？
- 業務時間中に執筆するのはどんなときか？

# 改めて、はじめに
昨年私は弊社内で最もQiitaの記事を書いた人だったらしいです。[^といっても]

だからなのかは定かではありませんが、ときどき掲題の質問をされます。

何度も訊かれる質問への回答はテンプレ化がセオリー、ということで本記事を書きます。
もう回答は済んじゃいましたけど、もう少し書き進めるのでお時間ある方はあと1分半ほどお付き合いください。

なお、弊社は業務時間中に記事執筆をすることがしっかりと認められています。
工数マスタにも「記事執筆」という項目があります。

なのになぜ業務時間中に書かないのか？
業務多忙？「本業やってない」的な後ろめたさ？

いやいや、そんなことはないです。

・・・いやちょっとだけ嘘です。業務に関しては時期によっては忙しいこともあります。

だけど、わりと暇な時期でもいわゆる業務時間中に書くことはあまりないなあと。
その理由をちょっと書き連ねてみます。

[^といっても]:といっても月に1回程度のペースですが。ゆるーくながーくがモットーなので、目標を低めに設定しています。そして今年はすでに[多くの同僚が多くの良記事を書いている](https://qiita.com/organizations/works-hi)ので、執筆数ランキング選外であること必至です。喜ばしいですね。


# なぜ業務時間中に記事を書かないのか？

## ぼーっとしてるときに書きたいことが湧いてくるから

ふと書きたい内容がほんと文字通り"降ってくる"ことってありますよね。

子供のお迎えに向かう自転車に乗りながら、
お風呂でぼーっとしながら、
読書しながら、
ごはん食べてながらテレビ見ながら。

あるいは、あのテーマで書きたいなーとふんわり考えていたトピックについて、なんか突然にぶわっと構成が湧いてきたりとか。
構成までいかずとも、1セクション分くらい、わーーーっと頭の中でできあがったりとか。

業務時間中は目の前のタスクに思考ががっちり捕らわれているので、こういうことが起こる余地がありません。

そして降ったり湧いたりしたらすぐにまとめたい！となるので、自ずと業務時間外になります。

ちなみにこの現象、ぼーっとしているときに活発になるデフォルト・モード・ネットワークという神経活動が影響してきるらしいです。科学的に分析されているんですねえ。

https://www.nikkei.com/nstyle-article/DGXZQOLM150R80V10C22A6000000/


## まとまって考えたり書いたりする時間を作るため

業務時間中はミーティングもあるし、そうじゃない時間もやるべきお仕事は一応そこそこにあります。
そしてその間にもSlackで多くのトピックを投げたり追ったり眺めたりするため、記事執筆のための集中できる時間は多くは取れません。

一方、記事を書くのは(私は)どんなに短くても2-3時間はかかります。

- 書きたいテーマについての構成を考える
- 一気に頭の中で作られたセクションを推敲したりセクション同士を組み合わせる
- 湧いてきた構成に文章を乗せて肉付けする

このあたりを、あまり時間や諸タスクを気にせずじっくりやるのは、やはり夜や休日が私は合っています。


# 業務時間中に執筆することもある

## 勉強会などのための資料として

チーム内で毎週持ち回りで勉強会をしており、自分の番が来たときにたまにQiitaの記事ベースで発表することがあります。
業務ドメインや社内ソースの話を深く書くことはできませんが、一般的な話や業務の話を汎化させたものをQiitaでまとめつつ、「じゃあ実際のソースコードで見てみましょう」と事例に移ると、記事も書けて業務フォーカスもできて一挙両得です。

業務時間内に開催する勉強会の資料作成の範疇ということで、業務時間内に執筆することがあります。


## 学んだことのアウトプット先として
業務時間中に学んだことが汎用性の高い内容だった場合、手元のサクラエディタではなくQiitaでばーーーーっとまとめることは時々あります。[^掲載場所の使い分け]

でもそれを落ち着いて見返して公開するのはやはり夜か休日です。

[^掲載場所の使い分け]:以前はなんでも社内wikiにまとめていましたが、どこに載せるのが最適かを最近は少し意識するようになりました。


## 降ってきたとき

あーこれ書きたいんだった！
みたいなのがとりわけ休憩時間中とかに落ちてきたりするので、それは忘れないうちにメモしておきます。
こういうとき業務時間内の執筆が公認でよかったーーー！と思います。


# おわりに：書きたいと思ったときに書けばいいんじゃない？

に尽きるとおもいます。

ついでに自己学習に関して言えば、文章を書くことが目的ではなく、アウトプットすることが目的なので、なにも文章じゃなくてもいいと思います。

スライドにするもよし、図解するもよし、ラジオ的に喋るもよし、なにか実物を作るもよし。

好きな時間に、好きなようにアウトプットするのが1番だと思います！
Qiita 自動更新系記事集


https://qiita.com/Qiita/items/b5c1550c969776b65b9b

https://qiita.com/koki_develop/items/9d7f2ffeafb36cf59a77

https://qiita.com/Qiita/items/616e8f6d4f69bd582ab5

https://qiita.com/naruqiita/items/b34c6dcb46825b8e0c07

https://qiita.com/Seiri/items/b22a79d04eae4a401067

https://qiita.com/kai_kou/items/180a91fd88dbbbd746f6

https://qiita.com/koki_develop/items/b6cfc81906990b3a3e72

https://qiita.com/naruqiita/items/f87aa7781b311682df87

発見次第追加します
初心者向け　git branch の作り方「とりあえずブランチ切って開発して」と言われた時

# git branchについて

git branchは基本的に個人開発で使うことは少ない機能です。
グループで開発している時に、他のメンバーと編集内容が衝突したりしないために使用します。

とりあえず、本記事は題意の通り「とりあえずブランチ切って開発して」と言われた時に、まず何をするべきなのか解説します。

まずは、あなたがやるべき流れとしては、編集を依頼されたコードを`git clone`した後、

```tex
git branch `name` # ブランチを作成
git checkout `name`   #ブランチを切り替え
```
:::note info
切り替わったブランチでコードを編集する
編集完了次第、次のコマンドに進む
:::
```tex
git add
git commit -m 'comment'   # commentは好きなものにしてください
git push --set-upstream origin `name`
```

こんな感じです。
おそらく「とりあえずブランチ切って」と言われた際に、何かの機能開発ややってほしいことを依頼されていませんか？
その機能を開発するために現状のgithubのコードをクローンして、クローンしたコードを自分用の`branch`で編集したのち、チームのリーダーがその変更に納得すれば、その変更を元のコードに合体させるという流れになります。

以降、この編集の続きが`git merge`や`pull request`になったりすると思うので、その辺に関しては、とりあえずgit branchをした後、コードの編集が完了次第、依頼者に相談すると良いと思います。
【初心者必見】学びたい言語や技術のロードマップをAIで作成する

# はじめに

[Roadmap AI](https://roadmap.sh/ai) というサービスを使えば、自分が学びたい言語や技術をAIで作成することができます。初心者の方など、何から手をつけていけばいいか分からない人にはおすすめです！

https://roadmap.sh/ai

# 実際に作成してみる

試しに今回は`Zig`というプログラミング言語のロードマップを作ってみたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/77508877-14a2-88a4-0496-e8e7f253dc80.png)

以下のようなロードマップが作成できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/08190125-ce37-47ac-4fc8-c90b9bec8030.png)

ちなみに、有名な言語や技術だと、Officialのロードマップが用意されているものもあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/afa8186e-0be9-9f8e-d27d-9ea42314d52a.png)

GoのOfficialのロードマップは以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/6d9270bf-323b-4286-ebb2-63d704809552.png)

言語や技術以外にも作成できます。試しにプロダクトマネージャになるためのロードマップも作ってみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/871ac20c-0fba-942e-f13c-10f825f66ae2.png)

ちなみに`Edit in Editor`をクリックすると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/b291129c-5c73-8744-9931-7a135204f7d2.png)

自分好みに編集することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/ab5cebd5-d565-0928-44c0-5d02df34ccdd.png)

# おわりに

AIなので、完璧なロードマップは作成できませんが、参考程度に使ってみてはどうでしょうか？
ABC360参加記録　by Python

# リアルタイムに解けた問題

## [A - A Healthy Breakfast](https://atcoder.jp/contests/abc360/tasks/abc360_a)

### 問題文

高橋くんは、朝食にご飯、味噌汁、サラダを１皿づつ食べます。

高橋くんの家のテーブルは細長いので、３皿を横一列に並べました。並べ方は文字列$S$によって与えられ、左から$i$番目の皿は$S_{i}$が<font color="Red">`R`</font>ならご飯、$S_{i}$が<font color="Red">`M`</font>なら味噌汁、$S_{i}$が<font color="Red">`S`</font>ならサラダです。

ご飯の皿が味噌汁の皿より左にあるかどうかを判定してください。


### 制約
- $|S|=3$
- $S$には<font color="Red">`R`</font><font color="Red">`M`</font><font color="Red">`S`</font>が１文字づつ含まれる。

### アルゴリズム
ご飯の皿が味噌汁の皿より左にあるのは、１皿目がご飯であるときか、最後の皿が味噌汁のときかである。あとはif文を用いたこの条件を満たす時Yesを出力する。

### ソースコード
``` python
S = input()

if S[0] == 'R':
  print('Yes')
  exit()

if S[2] == 'M':
  print('Yes')
  exit()

print('No')
```

## [B - Vertical Reading](https://atcoder.jp/contests/abc360/tasks/abc360_b)

### 問題文
英小文字からなる文字列$S$と$T$が与えられます。

以下の条件を満たす$1 \leq c \leq w < |S|$となる整数の組$c$と$w$が存在するか判定してください。ただし、$|S|$は、文字列$S$の長さを表します。ここで、$w$は$|S|$**未満**である必要があることに注意してください。
- $S$を先頭から$w$文字毎に区切った、長さが$c$以上の文字列の$c$文字目を順番に連結した文字列が$T$と一致する

### 制約
- $S$と$T$は英小文字からなる文字列
- $1 \leq |T|$ <font color="Red">$\leq$</font> $|S| \leq 100$

### アルゴリズム
分割文字数$w$が、文字列$S$より大きくなるまでループを回す。
ループごとに、文字列$w$づつに分割し、for文でループを回す。分割した各要素が、$i$以上の長さであれば、各要素の$i$番目を取得し、連結。これが文字列$T$と一致すればYesを出力する。

### ソースコード
``` python
S, T = input().split()

w = 1

while w < len(S):
  listS = [list(S[i: i+w]) for i in range(0, len(S), w)]
  for i in range(w):
    comb = []
    for s in listS:
      if len(s) >= i+1:
        comb.append(s[i])
    
    if T == ''.join(comb):
      print('Yes')
      exit()
  w += 1

print('No')
```
会話だけで理解するDOM

# 会話だけで理解するDOM

### **子供**: 「ねえねえ、エンジニアさん。最近みんながDOMってやつを使ってウェブサイト作ってるって聞いたんだけど、そんなの本当に必要なの？普通のプログラミング言語じゃダメなの？」

**エンジニア**: 「おや、鋭い質問だね。確かに普通のプログラミング言語でもUIは操作できるけど、DOMには特別な利点があるんだ」

### **子供**: 「へぇ、そうなの？でも僕には全然特別に見えないけどな。何が良いっていうの？他の言語じゃできないことでもあるの？」

**エンジニア**: 「いい視点だね。DOMの特徴をいくつか挙げてみよう。

1. ウェブ標準との整合性：DOMはウェブ標準の一部だから、全てのブラウザで一貫して動作するんだ。
2. リアルタイム操作：ページ全体を再読み込みせずに内容を変更できる。
3. HTMLとの直接的な連携：HTMLの構造を直接反映しているから、要素の操作が直感的。
4. ブラウザAPIとの統合：他のブラウザAPIと密接に連携できる。

これらの特徴は、特にウェブ環境では他の言語やツールよりも有利に働くんだ」

### **子供**: 「ふーん。でも、なんでそれが有利に働くの？具体的にどういうところが便利なの？」

**エンジニア**: 「いい質問だね。具体的に説明すると：

1. ブラウザ互換性：DOMはウェブ標準だから、異なるブラウザでも同じように動作するんだ。これは他の言語では難しいことが多いんだよ。

2. パフォーマンス：ページ全体を再読み込みせずに部分的に更新できるから、ユーザー体験が向上するんだ。例えば、SNSのタイムラインを更新する時に、ページ全体をリロードせずに新しい投稿だけを表示できるんだよ。

3. 開発効率：HTMLの構造を直接操作できるから、ウェブページの構造とJavaScriptのコードの関係が分かりやすくなる。これにより、開発者がコードを書きやすく、メンテナンスもしやすくなるんだ。

4. 拡張性：他のブラウザAPIと連携しやすいから、例えばAjaxを使ったデータの非同期読み込みや、ローカルストレージを使ったデータの保存など、より高度な機能を簡単に実装できるんだ。

これらの利点は、特にウェブアプリケーションの開発で重要になるんだよ」

### **子供**: 「ふーん。でもそれって、結局JavaScriptでやってることと同じじゃないの？DOMとJavaScriptって何が違うの？」

**エンジニア**: 「鋭いね！DOMとJavaScriptは確かに密接な関係にあるけど、別物なんだ。DOMはウェブページの構造を表現するためのインターフェース（API）で、JavaScriptはそのDOMを操作するためのプログラミング言語なんだ。

例えば、こんなコードを見てみよう：

```javascript
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    document.getElementById('output').textContent = 'クリックされました';
});
```

この中で、`document.getElementById()`はDOMのメソッドで、`addEventListener`はJavaScriptのメソッドだ。DOMがウェブページの'何を'（構造）を定義して、JavaScriptが'どのように'（操作方法）を定義しているんだ」

### **子供**: 「へぇ、そうなんだ。でも、そんなの面倒くさくない？普通にHTMLファイルを書き換えれば済む話じゃないの？」

**エンジニア**: 「なるほど、そう思うかもしれないね。でも、DOMを使うことで動的なウェブページが作れるんだ。例えば、ユーザーの操作に応じてリアルタイムで内容を更新したり、サーバーからデータを取得して表示したりできる。HTMLファイルを直接書き換えるだけじゃ、こういった動的な操作は難しいんだ」

### **子供**: 「ふーん。でも、そんなの本当に速いの？大量のDOM操作をしたら、ウェブサイトが重くなっちゃわないの？」

**エンジニア**: 「鋭い指摘だね！確かに、大量のDOM操作は性能に影響を与える可能性があるんだ。だからこそ、効率的なDOM操作が重要なんだ。例えば：

1. DOMの更新をまとめて行う
2. 仮想DOMを使用する（ReactやVueなどのフレームワークで採用されている）
3. ドキュメントフラグメントを使用する

これらの技術を使えば、DOM操作の効率を大幅に改善できるんだ」

### **子供**: 「へぇ、なんだか複雑そうだね。結局、DOMって本当に必要なの？もっと簡単な方法はないの？」

**エンジニア**: 「確かに複雑に感じるかもしれないね。でも、現代のウェブ開発においてDOMは非常に重要なんだ。より簡単に扱えるようにするために、さまざまなライブラリやフレームワークが開発されているよ。例えば、jQueryやReact、Vueなどだね。これらは、DOM操作をより簡単で効率的にしてくれるんだ」

### **子供**: 「なるほど...。でも、そんなに便利なら、なんでみんながDOMのことで苦労してるの？」

**エンジニア**: 「いい質問だね。DOMは確かに強力だけど、正しく使いこなすには経験が必要なんだ。大規模なアプリケーションになると、DOM操作の最適化が課題になることもある。でも、それはDOMの欠点というより、複雑なウェブアプリケーションを作る上での課題といえるね。適切に使えば、DOMは非常に効果的なツールなんだ」

### **子供**: 「ふーん、なんだか難しそうだけど、ちょっと興味が出てきたかも。もっと詳しく教えてよ」

**エンジニア**: 「それは素晴らしいね！DOMについて詳しく知りたいなんて、君は本当に賢い子だ。もっと深く学びたいことがあれば、どんどん質問してね。君の鋭い視点が、きっとウェブ開発の新しい可能性を開くかもしれないよ」

## 終わり
【Flutter】html/parser.dartでparseすると<tr> <td>のタグがすべて消える

# 起こった現象
html/parser.dartをすると<tr> <td>などのタグがすべて消えるという現象が起こったので原因と解決策についてまとめておく。
現象が起こったのは下のようなhtmlである。
```html
<tbody>
 <tr>
     <th>
     </th>
     ....中略....
 </tr>
</tbody>
```
上のHTMLをparserに通すと、タグがすべて消えるという現象に悩まされた。

# 解決策
\<tbody\>からスタートするのが想定されていないらしい。\<table\>タグを外に着けることで解決できた。

```html
<table>
    <tbody>
     <tr>
         <th>
         </th>
         ....中略....
     </tr>
    </tbody>
</table>
```
p5.js用のライブラリ「p5.animS」を使って描画の軌跡のアニメーションを手軽に実現（まずは軽いお試しから）

リニューアルされたばかりの以下の p5.js のサイトで、[関連ライブラリの一覧](https://p5js.org/libraries/)を見ていた時に気になった「p5.animS」というライブラリに関する記事です。

●p5.js
　https://p5js.org/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7026b58e-6028-df70-4774-25d36e007953.png)

このライブラリを使うと、例えば円や線などを描画する際に、その輪郭の軌跡を徐々に描画するアニメーションなどといったものを簡単に実現できるようでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/866fd83b-b40d-bb63-8e22-c1ed3a84650f.png)

それが楽しそうだったのと、現時点で Web検索しても公式以外の解説が出てこないようだったので、まずは「p5.animS」を軽く試してみて内容を記事化したというのが、この記事です。

## p5.animS
### p5.animS の公式サイト
以下が p5.animS の公式サイトです。

●p5.animS - animates p5.js shapes
　https://wixette.github.io/p5.animS/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/04064087-6470-46f4-9d81-4e2e2de70370.png)

### 公式サンプル
p5.animS の公式サイトを見ていくと、最初に以下の公式サンプルが示されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6b7d151b-c24f-8578-bd53-883810d234e5.png)

これは、円の輪郭を描画する軌跡のアニメーションです。

### 公式サンプルに少しだけ手を加えてみる。
上記の公式サンプルに手を加えてみます。

#### p5.animS の circle() の仕様を確認
その前に、p5.animS の circle() の仕様を確認してみます。

以下のリファレンスを見ると、5つの引数の意味が書いてあります。
 
●p5.animS - animates p5.js shapes
　https://wixette.github.io/p5.animS/#reference

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a3ba5c40-c995-7597-8976-c4ef97740402.png)

書き出してみると、以下となるようです。

1. id： それぞれを識別するためのユニークな文字列の ID
1. アニメーションの描画時間（ここで指定する数字はフレーム数）
1. 円の中心の x座標
1. 円の中心の y座標
1. 円の半径

通常の円の描画に、ID と アニメーションの描画時間を付け加えたような形です。

#### 手を加えたものを作って動作確認
それでは、公式サンプルに手を加えたものを作ってみます。

以下が実装した内容です。

```javascript
function setup() {
  createCanvas(550, 450);
  colorMode(HSB, 360, 100, 100, 1);
}

function draw() {
  background(190, 30, 100);
  noFill();

  stroke(0, 0, 100);
  strokeWeight(5);
  animS.circle("c1", 60, width * 0.4, height * 0.5, width * 0.5);

  stroke(320, 0, 100);
  strokeWeight(5);
  animS.circle("c2", 100, width * 0.7, height * 0.5, width * 0.3);
}

function mouseClicked() {
  animS.reset();
}
```

これを動作させたところ、以下のように想定通りのアニメーションが行われるのを確認できました。

https://x.com/youtoy/status/1807751588288843983

このようなアニメーションを手軽に実現できて良い感じでした！

## 自由な形状を作る仕組み
今回、とりあえず円の描画を試しましたが、他に線や三角形、矩形などの図形も簡単に扱えるようです。

それ以外にも以下を見ると、配列の配列（入れ子になった配列）を用いることで、より自由な形状の軌跡を扱えるようです。
（x座標・y座標の組を配列にする以外に、6つの要素を持つ配列を使うことでベジエ曲線も指定できるようです）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/23c345ee-61fe-e69d-6093-ee8d4d64165a.png)
GAS(Google Apps Script)を使用してみる

## GASとは
GoogleドキュメントやGoogleスライド、Googleスプレッドシート等のオフィスソフトや
Google翻訳、GoogleMap、Youtube等のGoogle社製のソフトウェアをJavaScriptを用いて改造したり、それらから情報をスクレイピングしたりすることができるツール。
関数ごとに実行、トリガーを作成することによる定期実行等、機能が多く、少量のコードで実装ができるため、初心者でも安心して使用することができる。

## GASを使用し、簡単なアプリを作成する
GASを使用し、1分間に1回、指定したメールアドレスに「Hello World!」というタイトルで本文「Test」のメールを送信するアプリを作成してみましょう。

### 1. GASファイルを作成する
Google Driveを開き、好きなフォルダ内で右クリックをし、「その他」→「Google Apps Script」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3820079/19320968-8035-5281-c533-c1b94c37768c.png)
画像のようにプロジェクトが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3820079/b08e946d-139a-e72f-1c70-2eb1b0f8f0b9.png)

### 2.コードを書き、実行する
以下の内容を「コード.gs」にコピペしてください。
(ファイル名はコード.gsから編集しても大丈夫です。)
```javascript
function sendGmail() {
  //Gmailを送信する。
  const to = "*********************@gmail.com";
  const subject = "Hello World!";
  const body = "Test";
  GmailApp.sendEmail(to, subject, body);
}
```
Ctrl(Cmd)+Sで保存し、Ctrl+Rで実行が可能です。
初めて実行する時は以下のように承認を求められます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3820079/558066a3-9d10-dabe-63b1-ca35450cba95.png)

1. 「権限を確認」
1. 　アカウントをクリック
1. 　左下にある「詳細」
1. 「プロジェクト名(安全でないページ)に移動」
1. 「許可」
これでコードを実行できるようになる
実際に実行し、指定したメールアドレスにメールが送信されていることを確認する。

### 3.トリガーを設定する
トリガーを設定することにより、定期実行が可能になる。
画像のトリガーをクリックし、「トリガーを追加」でトリガーの設定ができる。トリガーは複数つけることができる。
![スクリーンショット 2024-07-01 21.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3820079/6986a91a-8e52-0fe3-f58b-7fc52bc7e636.png)


ここでは「時間主導型」のトリガーを選択し、
「分ベースのタイマー」→「1分おき」を選択し保存することで毎分Gmailを指定したメールアドレスに送信することできる。
仮説検定の帰無仮説について簡単にまとめてみた

## 1. 帰無仮説とは？

帰無仮説（きむかせつ、Null Hypothesis）とは、統計学において仮説検定を行う際に設定される仮説の一つで、「効果がない」「差がない」「関係がない」といった状態を表します。検定の目的は、この帰無仮説が正しいかどうかをデータを使って検証することです。

### 具体例
新薬の効果を検証する場合、次のように設定します：
- **帰無仮説（H₀）**：新薬には効果がない（治療グループとコントロールグループの間に有意な差がない）。
- **代替仮説（H₁）**：新薬には効果がある（治療グループとコントロールグループの間に有意な差がある）。

## 2. 仮説検定の手順

1. **帰無仮説の設定**：効果や差がない状態を仮定します。
2. **代替仮説の設定**：帰無仮説が正しくない場合の仮説を設定します。
3. **データ収集**：実験や観察によってデータを収集します。
4. **検定統計量の計算**：データを基に検定統計量を計算します（例：t値、χ²値）。
5. **p値の計算**：検定統計量に基づいてp値を計算します。
6. **帰無仮説の棄却または採択**：p値が事前に設定した有意水準（通常0.05）以下であれば、帰無仮説を棄却し、代替仮説を支持します。

## 3. p値とは？

p値（p-value）は、仮説検定において、観測されたデータが帰無仮説の下でどの程度珍しいかを示す確率です。具体的には、観測されたデータまたはそれより極端なデータが帰無仮説が正しい場合に観測される確率を表します。

#### p値の解釈
- **p値が低い**（通常0.05未満）：観測されたデータは帰無仮説の下では珍しい→帰無仮説を棄却する。
- **p値が高い**（通常0.05以上）：観測されたデータは帰無仮説の下でもよくある→帰無仮説を採択する。

#### 数式での表現
例えば、t検定を使用する場合、p値は次のように計算されます：
$$
p = P(T \geq t_{\text{obs}} | H_0)
$$
ここで、\( t_{\text{obs}} \)は観測されたt値、\( H_0 \)は帰無仮説を示します。

## 4. 具体例：新薬の効果を検証する

### ステップ1：帰無仮説と代替仮説の設定
- **帰無仮説（H₀）**：新薬には効果がない。
- **代替仮説（H₁）**：新薬には効果がある。

### ステップ2：データ収集
治療グループとコントロールグループに分けて、新薬の効果を測定します。

### ステップ3：検定統計量の計算
例えば、t検定を使用して、2つのグループの平均値の差を計算します。
$$
t = \frac{\bar{X_1} - \bar{X_2}}{s_p \sqrt{\frac{1}{n_1} + \frac{1}{n_2}}}
$$
ここで、\( \bar{X_1} \)と\( \bar{X_2} \)はそれぞれのグループの平均値、\( s_p \)はプールされた標準偏差、\( n_1 \)と\( n_2 \)は各グループのサンプルサイズです。

### ステップ4：p値の計算
観測されたt値に基づいてp値を計算します。仮にp値が0.03であれば、帰無仮説が正しい場合に観測されたデータが起こる確率が3%であることを示します。

### ステップ5：帰無仮説の棄却または採択
通常の有意水準（0.05）と比較し、p値がこれより低い（この場合は0.03）ため、帰無仮説を棄却し、新薬には効果があると結論づけます。

## 5. 効果の大きさについて

帰無仮説の棄却が効果の大きさを意味するわけではありません。効果の大きさ（効果量）を評価するためには、例えば次のような指標を使用します：
- **平均差**
- **標準化効果量**（Cohen's d など）
- **相関係数**

これらの指標を使用して、観測された効果の実質的な大きさを評価します。

## まとめ

帰無仮説とp値は統計的検定の基本概念です。帰無仮説は「効果がない」「差がない」という仮定を示し、p値は観測されたデータがこの仮定の下でどの程度珍しいかを示します。仮説検定の手順を理解し、p値を正しく解釈することで、データに基づく結論を導くことができます。
Fortran で Welcome to AtCoder を解いてみた

[Qiita Engineer Festa 2024（キータ・エンジニア・フェスタ 2024） - Qiita](https://qiita.com/official-campaigns/engineer-festa/2024)
において、約1ヶ月で38記事という大量の記事の投稿を要求されることがわかった。
そこで、あまりコストをかけずに記事数を稼ぐ方法を考えた結果、「Welcome to AtCoder を様々な言語で解く」ことを思いついた。
単に解くだけでなく、使用する言語仕様の解説を入れれば、記事として一応成立するだろう。

# Welcome to AtCoder

[PracticeA - Welcome to AtCoder](https://atcoder.jp/contests/abs/tasks/practice_1)

Welcome to AtCoder では、以下の形式で整数 $a$, $b$, $c$ および文字列 $s$ が入力として与えられる。

```text
a
b c
s
```

この入力をもとに、与えられた整数の和 $sum = a + b + c$ および文字列 $s$ を、以下の形式で出力することが求められる。

```text
sum s
```

# 今回用いた Fortran の機能

[Fortran 入門](https://www.nag-j.co.jp/fortran/index.html)

## プログラムの構造

[Fortran 入門: プログラムの書き方についての規則](https://www.nag-j.co.jp/fortran/FI_3.html#_3)

Fortran のプログラムは、以下のような構造で書くことができる。

```fortran
program main
  ! 変数宣言 (宣言部：0行以上)
  ! 実行するプログラム (実行部：0行以上)
end program main
```

実行するプログラムを書いた後、再び変数宣言を書くことはできない。
`program` や `main` は省略できる組み合わせがあるが、ここでは紹介しない。

## 変数の宣言

[Fortran 入門: 定数と変数](https://www.nag-j.co.jp/fortran/FI_4.html#_4)

宣言部の最初に

```fortran
implicit none
```

と書くことで、暗黙の変数宣言を無効にし、宣言されていない変数名が使用されたらコンパイルエラーになるようにできる。

```fortran
型名 変数名
```

で変数を宣言できる。「変数名」はコンマで区切って複数指定できる。

```fortran
integer 変数名
```

で整数型の変数を宣言できる。

```fortran
character(文字数) 変数名
```

で、「文字数」文字の文字列型の変数を宣言できる。

## 数値の加算

[Fortran 入門: 演算、代入](https://www.nag-j.co.jp/fortran/FI_5.html#_5)

`a + b` のように `+` 演算子を用いることで、数値 `a` と `b` の和を求めることができる。

## 標準入出力

[Fortran 入門: 入力と出力](https://www.nag-j.co.jp/fortran/FI_6.html#_6)
[Fortran 入門: 文字列操作](https://www.nag-j.co.jp/fortran/FI_13.html#_13)
[Fortran 入門: データ入出力](https://www.nag-j.co.jp/fortran/FI_14.html#_14)

```fortran
read *, 数値型変数
```

により、標準入力から数値を1個読み込むことができる。
「数値型変数」をコンマ区切りで複数指定すると、それぞれに複数の数値を一気に読み込むことができる。

```fortran
read '(a)', 文字列型変数
```

により、標準入力から文字列を1行読み込むことができる。
読み込んだ結果の文字列に改行文字は含まれないが、文字列変数の長さに対して読み込んだ文字列が短い場合は残りの部分が空白文字で埋められる。

```fortran
print 書式指定文字列, データ
```

により、標準出力に1行 (指定したデータ + 改行文字) 出力できる。
書式指定文字列は、以下の要素をカンマで区切り、全体を `()` で囲んだ文字列である。
「対応するデータ」が「あり」の要素では、それぞれ「データ」の前から順に使用する。

|書式|意味|対応するデータ|
|:-:|---|:-:|
|`i0`|数値を1個、値に合った幅で出力する|あり|
|`数x`|空白を「数」個出力する|なし|
|`a`|文字列1個を、値に合った幅で出力する|あり|

(今回使用したもののみを紹介した)

```fortran
trim(文字列)
```

により、「文字列」の右端で連続する空白を取り除いた文字列を得ることができる。

# 提出コード

```fortran
program main
  implicit none
  integer a, b, c
  character(1024) s
  read *, a, b, c
  read '(a)', s
  print '(i0, 1x, a)', a + b + c, trim(s)
end program main
```

:::note alert
このコードは、文字列 $s$ が空白文字で終わる場合に間違った出力をする**嘘解法**である。
:::

[提出 #55125977 - AtCoder Beginners Selection](https://atcoder.jp/contests/abs/submissions/55125977)
学びをプロンプトとしてアウトプットする勉強法で、インプットを活用しやすくする

## はじめに

◆この記事は何？
アウトプットの方法を提案する記事です。

◆対象は？
アウトプットに悩む方

◆この記事のねらい
アウトプットの選択肢を広げる

## 先に結論
- アウトプットの選択肢を増やすと良い
- **学びをプロンプトで表現する**
- 今後も活用できるアウトプットになる

## アウトプットの方法

アウトプット方法は多様です。私はQiitaへの投稿を続けています。しかし、Qiitaでは表現しづらい学びもあると気づきました。

例えば、書籍で学んだ内容をそのままQiitaに書くと記事の価値が下がると考えています。
私は途中で断念した記事もあります。効率的な学びのため、Qiita以外の方法も必要です。

## 学びをプロンプトにする

この課題を解決するため、学んだ内容をプロンプト（生成AIの入力）として表現する方法を提案します。

例えば、私は[『秒で伝わる文章術』](https://amzn.asia/d/06bCce4G)という本を読んで次の内容を学びました。

> 読み手ファーストな文章を書く上で、最も重要なこと。それは「とにかく短く書くこと」です。

そして、書籍の内容をもとに作成したのが次のプロンプトです。

書籍の内容を踏まえながら、「短く書くことに特化したレビュー」のためのプロンプトを作成しました。

```
# 命令書: 
あなたはプロの編集者です。 

以下の制約条件とレビュー観点をもとに、入力文をレビューした結果を出力してください。 

# 制約条件: 
- 文章単位で、改善できる文章を指摘して、改善案を出力する。
    - 出力例
        - 改善できる文章
            - {元の文章}
        - 改善案
            - {改善提案された文章}
        - 改善理由
            - {改善提案する理由}
- 文章の構成は変更しない。
- 引用箇所には変更を加えない。

# レビュー観点
1. 読みやすい日本語にするために文をできるだけ短くする
2. シンプルでわかりやすい日本語にする
3. 誤字脱字があれば訂正する
4. 短い文にするために過剰に丁寧な日本語があれば改善する

# 入力文： 


# 出力文：

```

また、プロンプトをSNSでもアウトプットしました。

https://x.com/mkt_hanada/status/1807749012797444427

その結果、アウトプットの選択肢を増やすことができました。

## プロンプトにすると何が嬉しいか？

プロンプトの形式にしておくと、後から活用しやすいです。
「使える状態」で保存できるのが素晴らしいです。

実際、私はこのプロンプトを記事を書く際に多用しています。

学びをプロンプトで表現するアウトプットは、インプットを活用しやすくなります。

## おわりに

この記事では、「プロンプトをつくる」アウトプット方法について紹介しました。

手軽にアウトプットができ、その後も有効活用しやすい方法だと思います。

アウトプットに悩んでいる人の参考になれば幸いです。
SAA試験の体験記(合格しました)

## はじめに
SAAの試験を受けて合格したので勉強方法と合格までにやったことを記そうと思います。

## 経歴
仕事ではフロント、バックエンドメインでCloudWatchや開発で多少lambda等を触ったことがある程度でした。
知識としてはEC2、lambda等の代表的なサービスは知っているぐらいです。それと、大学の研究でAWSをがっつりではないですが使ったことはありました。
AWSの資格は試験前は1つも持っていませんでした。

## SAAの結果
試験結果は以下の通りです。
想定していた問題より、難しめの問題が出てきており、落ちたかもしれないと思ってましたが無事合格できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1328154/8d3782cb-8e7b-cd4b-776d-8f3a25494001.png)

## 勉強方法
試験までにどのように勉強してきたかというとポイントとしては4つです。
- ping-tで問題を解く
- 要点をまとめておく
- 主要なサービスを実際に触ってみる
- 空いた時間は有効活用
私は試験のために参考書を買ったり、Udemyで講座を受講したりといった課金はしていません。上記の方法でお金をかけずに合格しました。1つ1つ詳しく見ていきたいと思います。

### ping-tで問題を解く
ping-tという無料でSAAの問題を解けるサイトがあります。
このサイトで問題を解く前に、[AWS認定資格 WEB問題集＆徹底解説](https://aws-exam.net/clf/)というサイトで問題を解いていましたが有料になったのでping-tに乗り換えました。
ただ、AWS認定資格 WEB問題集＆徹底解説を解いてから、期間が結構空いたので、ほぼping-tだけの問題知識で臨みました。
それほど、ping-tは素晴らしいサイトです。（ping-tのスパイではありません。）
それぞれのサービスごとの問題や、実際の試験に即した問題があります。

https://mondai.ping-t.com/g

私は、それぞれのサービスごとの問題と試験レベル】Well-Architected Frameworkに基づいた設計の問題をすべて解きました。
解いた後、間違えたところを正解するまで解きなおしました。
模擬試験の問題もありましたが、それは時間がなくて解いてないです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1328154/6dc349dd-5909-8a1e-25e2-bc277c1c5f23.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1328154/b0a070e0-d743-4ba9-63b1-2bbeeb142101.png)

### 要点をまとめておく
ping-tで参考を押すと、サービスの解説が書いてあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1328154/f210cec6-2754-c73d-7a80-743973ad2f92.png)

私はこれを参考に自分なりに、それぞれのサービスについてメモし、まとめました。
いつでも、サービスについて見返すことができ、試験前の復習にもなりました。

### 主要なサービスを実際に触ってみる
実際に、AWSのサービスを触ってみることも理解につながります。
主要なEC2やVPC(ネットワークACL、セキュリティグループ)、RDS、CloudWatch等を一通り触ってみました。

特にVPCについて理解が深まったサイトは以下です。1からサービスの全体像を把握することができました。ありがとうございます。

https://qiita.com/c60evaporator/items/b9e645b96afa3a34f41e#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

### 空いた時間は有効活用
お昼や、休憩時間にSAAの試験対策動画を見たりしました。
Youtubeで検索すれば、サービスの説明動画や試験問題の動画がやまほど出てくるのでそれを時間があるときに見ました。
こういった隙間時間の活用がAWSのサービス理解につながったと思います。

## 必要なマインド
SAA試験はしっかりと勉強すれば合格できます。
試験に臨むとき、個人的に意識しているマインドがあります。

**最後の最後まであきらめないことです。**

途中で手を抜いて、落ちたら後悔しか残りません。
高い受験料払って本気で資格ほしいのならば、諦めないで進み続けてください。

## 終わりに
この体験記が誰かの役に立ったり、心に響けば幸いです。
以上が私のSAA試験の体験記でした。
GPU・複数マシン操作で使用するコマンド

# 初めに記事の対象者
大学生が書く大学生向け記事になります。
大学の研究室に配属されてすぐ、自分たちのサーバー・GPUを使って計算しないといけない...ということがあると思います。
その時に、使うと便利なコマンドの紹介です。
# 使うコマンド関係
```terminal
nvidia-smi
```
まず初めのコマンドは、現在使用しているnvidia系のマシンの詳細を確認するコマンドです。
もし、このコマンドで逐次確認したい場合は以下のようにすることで毎秒、nvidia-smiを実行し続けることができます。
```terminal
watch -n 1 nvidia-smi
```
:::note info
この操作を止める場合は、`ctrl+c`で止めます。
:::
---
次に紹介するコマンドは、複数マシンを使用している場合に、複数マシンの使用状況を一覧で確認する方法です。
```terminal
cluster-smi
```
[cluster-smiに関する記事](https://qiita.com/tttamaki/items/d51dbd195641acf98433)
ちなみに、こちらは勝手に随時、更新されてしまうので、先ほどメモしたように`ctrl+c`で中断することができます。

このコマンドはcluster-smiの一覧ではなく、一部だけ見たい場合は以下ように入れると指定のサーバーのもののみ確認し続けることができます。サーバー名はIPアドレスでも可能です。
```terminal
cluster-smi -n <サーバー名>
```
---
最後に紹介するコマンドは、他のマシンの通信状況を確認したい場合に実施するコマンドです。
ちなみにこのコマンドを実行すれば、通信したいマシンのIPアドレスも確認できます。
```terminal
ping <サーバー名> 
```
こちらも詳細については他の記事で紹介されています。
[pingの使い方について](https://qiita.com/EkaTaro3/items/4c13b5bed593bbd424aa)

---

いずれも他に追加のオプションなどがあります。

`command -option'って感じで、optionのところに何か付け足したりすると色々追加で表示できたりするので、何かしたいことがある場合は、そのコマンドにオプションとか付け足して調べてみてください。
【Python】タプル

タプル（tuple）は、Pythonの基本的なデータ構造の1つで、複数の要素をグループ化するために使用されます。リストと似ていますが、タプルは変更不可能（イミュータブル）であるという重要な特徴があります。
# タプルの作成
```python
# 丸括弧を使用して作成
fruits = ('apple', 'banana', 'orange')
print(fruits)  # 出力: ('apple', 'banana', 'orange')

# カンマを使用して作成（丸括弧は省略可能）
coordinates = 3, 4
print(coordinates)  # 出力: (3, 4)

# 1要素のタプルを作成する場合は、最後にカンマが必要
single_item = ('solo',)
print(single_item)  # 出力: ('solo',)
```
# タプルへのアクセス
```python
fruits = ('apple', 'banana', 'orange')

# インデックスを使用して要素にアクセス
print(fruits[0])  # 出力: apple
print(fruits[-1])  # 出力: orange

# スライシングを使用して部分タプルを取得
print(fruits[1:])  # 出力: ('banana', 'orange')
```
# タプルの特徴: イミュータブル（変更不可）
```python
coordinates = (3, 4)
# coordinates[0] = 5  # これはエラーになります
# TypeError: 'tuple' object does not support item assignment

# タプル全体を新しいタプルで置き換えることは可能
coordinates = (5, 6)
print(coordinates)  # 出力: (5, 6)
```
# タプルの展開（アンパッキング）
```python
# 複数の変数に値を代入
x, y = (10, 20)
print(x)  # 出力: 10
print(y)  # 出力: 20

# 余った要素を別のタプルに格納
first, *rest = (1, 2, 3, 4, 5)
print(first)  # 出力: 1
print(rest)   # 出力: [2, 3, 4, 5]
```
# タプルの使用例
```python
# 関数から複数の値を返す
def get_dimensions():
    return (1920, 1080)

width, height = get_dimensions()
print(f"Width: {width}, Height: {height}")
# 出力: Width: 1920, Height: 1080

# 辞書のキーとしてタプルを使用
locations = {
    (35.6895, 139.6917): "Tokyo",
    (40.7128, -74.0060): "New York"
}
print(locations[(35.6895, 139.6917)])  # 出力: Tokyo
```
# タプルの利点
- イミュータブルなので、データの整合性を保つのに役立ちます
- リストよりも少しだけ高速です（特に大きなデータの場合）
- 辞書のキーとして使用できます（リストは使用できません）
- コードの意図を明確にします（データが変更されないことを示す）
```python
# タプルを使って関数の戻り値の意図を明確にする
def get_user_info():
    return ("Alice", 30, "alice@example.com")

name, age, email = get_user_info()
print(f"Name: {name}, Age: {age}, Email: {email}")
# 出力: Name: Alice, Age: 30, Email: alice@example.com
```
# タプルとリストの変換
```python
# リストをタプルに変換
my_list = [1, 2, 3]
my_tuple = tuple(my_list)
print(my_tuple)  # 出力: (1, 2, 3)

# タプルをリストに変換
back_to_list = list(my_tuple)
print(back_to_list)  # 出力: [1, 2, 3]
```
タプルは、変更されるべきでないデータの集合を表現するのに適しています。例えば、座標、RGB色値、ユーザーの基本情報など、一度設定されたら変更されないデータを扱う際に便利です。
######
参考)　[東京工業大学情報理工学院 Python早見表](https://chokkan.github.io/python/index.html)
【Python】集合

集合（set）とは、重複のない要素の集まりです。数学の集合と同じような概念で、順序は持ちません。Pythonでは、集合を使って、ユニークな要素の管理や、複数のデータの共通部分や差分を簡単に求めることができます。
以下に、集合の基本的な使い方を説明します：
# 集合の作成
```python
# 波括弧を使用して作成
fruits = {'apple', 'banana', 'orange'}
print(fruits)  # 出力: {'orange', 'banana', 'apple'}

# set()関数を使用して作成
numbers = set([1, 2, 3, 4, 5])
print(numbers)  # 出力: {1, 2, 3, 4, 5}
```
# 要素の追加と削除
```python
fruits = {'apple', 'banana'}

# 要素の追加
fruits.add('orange')
print(fruits)  # 出力: {'apple', 'banana', 'orange'}

# 要素の削除
fruits.remove('banana')
print(fruits)  # 出力: {'apple', 'orange'}
```
# 集合演算
```python
set1 = {1, 2, 3, 4, 5}
set2 = {4, 5, 6, 7, 8}

# 和集合 (union)
print(set1 | set2)  # 出力: {1, 2, 3, 4, 5, 6, 7, 8}

# 積集合 (intersection)
print(set1 & set2)  # 出力: {4, 5}

# 差集合 (difference)
print(set1 - set2)  # 出力: {1, 2, 3}
```
# 集合の特徴
```python
# 重複は自動的に削除される
numbers = {1, 2, 2, 3, 3, 4}
print(numbers)  # 出力: {1, 2, 3, 4}

# 順序は保証されない
fruits = {'apple', 'banana', 'orange'}

print(fruits)  # 出力は実行ごとに異なる可能性がある
```
集合は、特にデータの重複を除去したり、複数のデータの共通部分や差分を求めたりする場合に非常に便利です。また、要素の存在確認も高速に行えるため、大量のデータを扱う際にも効率的です。
######
参考)　[東京工業大学情報理工学院 Python早見表](https://chokkan.github.io/python/index.html)
[Mac] [Eclipse]「Spring スターター・プロジェクト」作成でエラー

# 環境

- MacBook Pro 2019 (Intel Mac)
- macOS Monterey 12.6 

- Eclipse 2023-12 (4.30.0)  Intel Mac 最終版

https://willbrains.jp/index.html#/pleiades_distros2023.html




# 新規プロジェクト作成


<img width="300" alt="scr 2024-07-01 15.41.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/514fed62-04c6-43fd-e700-f68e4b06b2fd.png" />

新規に「Spring スターター・プロジェクト」を作成すると、しばらくして、エラーが発生した。

<img width="300" alt="scr 2024-07-01 15.50.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/13971580-081b-166f-2efc-13e51f097997.png" />

↑これを見ただけでは理由が分からない。

<img width="300" alt="scr 2024-07-01 16.41.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/aa3c3893-56c4-9902-b6cf-790996fd266f.png" />


画面下部の「マーカー」タブを見ると、「Gradleエラー」だと分かる。
さらに詳細メッセージを見ると、以下の内容であった。

```text
The supplied phased action failed with an exception.
Could not resolve all dependencies for configuration ':compileClasspath'.
Failed to calculate the value of task ':compileJava' property 'javaCompiler'.
Cannot find a Java installation on your machine matching this tasks requirements: {languageVersion=21, vendor=any, implementation=vendor-specific} for MAC_OS on x86_64.
No locally installed toolchains match and toolchain download repositories have not been configured.
```

# Java関係のエラーらしい

以下のフォルダにある、EclipseにバンドルされているJavaを確認する。

```terminal
$ ls /Applications/Eclipse_2023-12.app/Contents/java

11	17	21	8
```

[Pleiades All in One](https://willbrains.jp)サイトの案内のとおり、4バージョンがある。

![scr 2024-07-01 16.03.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/abc5cbf8-9aa7-5a1c-7c85-93d135dc198b.png)

今回は、先のエラーメッセージ`requirements: languageVersion=21`に従い、JDK21を使用することにする。パスは、以下とおり。

```terminal
$ /Applications/Eclipse_2023-12.app/Contents/java/21/Home/bin/java --version

openjdk 21.0.2 2024-01-16 LTS
OpenJDK Runtime Environment Temurin-21.0.2+13 (build 21.0.2+13-LTS)
OpenJDK 64-Bit Server VM Temurin-21.0.2+13 (build 21.0.2+13-LTS, mixed mode)
```

# Java VM の設定 

↑上のパスを、Eclipse の Info.plist に追加する。

（テキストエディタならなんでもよく）Eclipse自身でも編集できるが、ここはVSCodeで編集した。

```terminal
$ code /Applications/Eclipse_2023-12.app/Contents/Info.plist
```

![scr 2024-07-01 15.48.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/f6fee1ea-1775-c59d-d995-f8f48f35ee74.png)

66行目に次の一文を追加する。

```xml
<string>-vm</string><string>/Applications/Eclipse_2023-12.app/Contents/java/21/Home/bin/java</string>
```

![scr 2024-07-01 15.49.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/aae37699-d7eb-fb92-da81-ea31067c1884.png)

忘れずに「保存」する。


# Eclipse 再起動

Eclipseを一度終了し、再起動すると、自動的に復旧してくれるようで、
無事に「Spring スターター・プロジェクト」が作成されました。

<img width="300" alt="scr 2024-07-01 16.24.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/88914477-c196-88d2-805c-2d230f11773c.png" />


# おしまい

今回は Java VM を設定するという対策でしたが、
「Gradleエラー」でも他の要因のエラーもあると思われるので、この記事は、その中の一要因として まとめました。
Llama-3-ELYZA-JP-8B on Ollama on EC2（g5.xlarge）がなかなか

こちらの記事を参考にLlama-3-ELYZA-JP-8Bを動かしてみました。

https://qiita.com/s3kzk/items/3cebb8d306fb46cabe9f

私の手元にはMacがないので、EC2で試してみました。

## 環境

AMI：Deep Learning Base OSS Nvidia Driver GPU AMI (Ubuntu 22.04)
インスタンスタイプ：g5.xlarge
ストレージ：100GiB　※ウィザードの初期値は65GiBですが足りなくなるので増やしました

## 構築手順

セッションマネージャーで接続し、「ubuntu」ユーザーに切り替えたうえで実行していきます。

1. Ollamaをインストール

    コマンド一発です。

    ```shell
    curl -fsSL https://ollama.com/install.sh | sh
    ```

1. モデルを取得

    Hugging Faceで公開されているモデルを取得します。

    https://huggingface.co/elyza/Llama-3-ELYZA-JP-8B-GGUF

    取得に必要なGit LFSをインストールします。

    ```shell
    sudo apt update
    sudo apt install -y git-lfs
    ```

    モデルを取得します。

    ```shell
    git lfs install
    git clone https://huggingface.co/elyza/Llama-3-ELYZA-JP-8B-GGUF
    ```

1. 「Modelfile」を作成

    参考元の投稿と1行目だけちょっと違います

    ```text:Modelfile
    FROM ./Llama-3-ELYZA-JP-8B-GGUF/Llama-3-ELYZA-JP-8B-q4_k_m.gguf
    TEMPLATE """{{ if .System }}
system

    
    {{ .System }}
{{ end }}{{ if .Prompt }}
user

    
    {{ .Prompt }}
{{ end }}
assistant

    
    {{ .Response }}
"""
    PARAMETER stop "
"
    PARAMETER stop "
"
    PARAMETER stop "
"
    PARAMETER stop "<|reserved_special_token"
    ```

1. Ollamaモデルを作成

    ```shell
    ollama create elyza:jp8b -f Modelfile
    ```

1. Ollamaを起動

    ```shell
    ollama run elyza:jp8b
    ```

## 動画

動画を撮影してみました。字がちっちゃくてごめんなさい

<iframe width="560" height="315" src="https://www.youtube.com/embed/D-APgFbMv7o?si=gMzkLSw2D5pGqxTB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

なかなかな速さで生成されていると思います。

## インスタンスの料金

G5.xlargeインスタンスと100GiBストレージをオンデマンドインスタンスで月額742.38ドルです。（1ドル150円として111,357円です）

決して非現実的な金額ではないような気がしなくもない、ですね。

https://calculator.aws/#/estimate?id=73ee2e5e9dc5287e0823094b603c5236bda531e2
mkcertで、ローカル環境をHTTPSにする

## はじめに
ローカル環境で開発を進める中で、HTTPS環境でないと動かない関数やAPIに出くわすことがあったり、本番環境と同じHTTPS環境で検証したいこともあると思います。

ということで、タイトルのとおり、mkcertを使ってローカル環境をHTTPSにしてみます。

## mkcert インストール
```zsh
brew install mkcert

# Firefoxを使う場合はこれも必要みたい
brew install ncc
```

## 自己認証局作成
```zsh
mkcert --install

# CAが作られた場所が分かるコマンド
mkcert -CAROOT
```

## サーバー証明書作成
```zsh
mkcert localhost
```

## WEBサーバーに証明書を設定する

あとは、apacheやnginxに作った証明書を適用する

## 参考
- https://github.com/FiloSottile/mkcert#installation
- https://qiita.com/k_kind/items/b87777efa3d29dcc4467
pip installで起きたFatal error in launcher: Unable to create process usingの解決法

# はじめに
エラーの経緯は中々ないとは思うが、
同じようなエラーに出くわした際、お役に立てれば:relieved:



# エラーの経緯



1. すでに実装されているスクリプトをzipファイルにて、ダウンロード

2. フォルダ内にあるバッチファイルを叩く
```python
ModuleNotFoundError: No module named packagename
```


４．仮想環境に入り、pip install packagename


```python
(venv) PS C:\Users\user_name\Desktop\project_name> pip install requests

Fatal error in launcher: Unable to create process using '"C:\Users\user_name\Desktop\project_name\venv\Scripts\python.exe"  "C:\Users\user_name\Desktop\project_name\venv\Scripts\pip.exe" install requests': The system cannot find the file specified.
```




# 解決方法

##### 1. 仮想環境(venv/ フォルダ)を削除

https://qiita.com/hrmc/items/264857074b0c26dfeeaf
##### 2. 仮想環境を新規作成する。
```python
python -m venv venv
```
##### 3. 仮想環境に入る。
```python
./venv/Scripts/activate (Windowsの場合)
```
##### 4. インストールを行う。
```python
pip install pacakgename
```
【3か月目】英語学習日記

# 🌟 英語学習日記 🌟

私の英語学習が始まってから3か月が経ちました。今回は、私が使用しているツールやリソース、そして学習方法をシェアします。

---

## 📚 使用しているツールとリソース

### 🎥 YouTubeとNetflix
- **YouTube**：私の興味がある海外のエンジニアの情報発信やVtuber（hololive English）を視聴。
  - 英語学習を通じて初めてhololiveを見るようになり、とても面白いです。
- **Netflix**：英語字幕を利用して映画やドラマを鑑賞。日本アニメの英語吹替も見ました。
  - 作品名を挙げだすときりがないですが、Netflixでは日常会話やスラングにも多く触れられます。
- **Mate Translate**：この拡張機能を使って、YouTubeやその他のコンテンツを翻訳しながら学習しています。英単語に対してダブルクリックするだけで翻訳できるので、学習効率がとても良いです。

### 📖 ターゲット1900とAnki
- **ターゲット1900**：受験にも対応した頻出単語集。効率的に単語力を強化。
  - 寝起きに15分ほど使用。
- **Anki**：SRS（スペース・リピティション・システム）を利用した復習アプリ。忘却曲線に基づいた効果的な復習が可能。
  - 隙間時間にひたすら活用。

### 📝 Duolingo
- **Duolingo**：ゲーム感覚で文法や基本的な表現を学習。リスニングやスピーキングの練習も可能。
  - 毎日1時間くらい学習。

---

## 🚀 学習の進捗
- **リスニング**：YouTubeやNetflixの動画視聴時に体感3割わかるぐらいから6割くらいわかる状態になった気がします。
  - 見る作品やジャンルによってバラつきがあるので、一概には言えませんが、成長を感じます。
- **リーディング**：字幕があれば何とか理解できるレベルになったと思います。
  - Vtuberなどを見ている影響でスラングが大体わかるようになった気がします。
- **スピーキング**：話す機会がなく、なんとも言えません。
  - 単語がわからず、言いたいことを言語化できないことが多いですが、練習を続けます。

---

## 💡 最後に

英語学習は一朝一夕には身につかないものですが、適切なツールを使い、継続的に学習することで、必ず成果が出ると信じています。これからも頑張っていきますので、同じように英語を学んでいる方々も一緒に頑張りましょう！また、成長を感じた際には、日記を更新します！

---

以上が私の英語学習日記です。参考になれば幸いです！
#プログラミング #Javascript #nodejs # 最大等の端値取得時、ソートとreduceの速度差

**本内容を利用した場合の一切の責任を私は負いません。**

ソートは内部関数だから速そうと思って使ってたけど、reduceは対象値以外の処理を捨てるなら速そう。
で、計ってみた。
考えてみればreduceの処理量はO(n)だか。
ソートは内部アルゴリズムにもよるけど、少なくともこれよりは多いはず。
ま、それを内部でするかスクリプトでするかが一番大事なとこなんだけど(笑)
なにげにreduceは元の配列を変更しないのも良いとこ。

# バージョン
- OS  
OS 名:                  Microsoft Windows 10 Home  
OS バージョン:          10.0.19045 N/A ビルド 19045
システムの種類:         x64-based PC
- node.js
node-v20.9.0-win-x64.zip

#ソース
```javascript:a.js
function aa() {
    let total;

    // console.time("elap3");
    total = 0;

    for (let indexA = 0; indexA < 10; indexA++) {
        for (let index = 0; index < 1000 * 1000; index++) {
            let c = index & 0xff;
            total += c & 1;
        }
    }

    // console.timeEnd("elap3")
    // console.log(total);
    return;
}

const SIZE = 1000;
var datas = [];

for (let index = 0; index < SIZE; index++) {
    datas.push(
        {
            "value": Math.random()
        }
    );
}

for (const data of datas) {
    // console.log(data["value"]);
}

console.time("elap1");
var resultReduce = datas.reduce(
    (cur, acc) => {
        aa();
        if (cur["value"] > acc["value"]) {
            acc = cur;
        }

        return acc;
    },
    0
);
console.timeEnd("elap1")
console.log(resultReduce["value"]);

for (let index = 0; index < 10; index++) {
    // console.log(datas[index]["value"]);
}

console.time("elap2");
datas.sort(
    (a, b) => {
        aa();
        return b["value"] - a["value"];
    }
);
console.timeEnd("elap2")
console.log(datas[0]["value"]);

for (let index = 0; index < 10; index++) {
    // console.log(datas[index]["value"]);
}
```

# 出力
```text:node.js
elap1: 5979.81005859375 ms
elap1: 5.980s
0.9993377285469689
elap2: 52072.816162109375 ms
elap2: 52.073s
0.9993377285469689
```
Rails：PR前のセルフレビューチェックリスト メモ

## 内容
- Rubocopに引っかからない部分をチェックする

## 動作環境
- ruby 3.3.0
- Rails 7.1.3.3

## 使用しているもの
- haml-rails gem

## チェックリスト

#### link_toの書き方（haml）

- 悪い例
```ruby
= link_to user_path(user), class: 'text-decoration-none' do
  = user.name
```

- 良い例
```ruby
= link_to user.name, user_path(user), class: 'text-decoration-none'  
```

**理由**

- リンク内がテキストだけであるというケースは、１行で書いた方が見やすい。リーダブルである
- なるべくインデントない方が見やすい


#### パーシャルでインスタンス変数を使用しない
https://qiita.com/MrTT/items/811fae89b31f4e588388

#### PRのタイトル、コメントは適切か？

- そのPRで自分がどんな実装をしたのか？
- なぜそのコードを記述したのか？

などを正確に記述できているか？
リクエストの拒否をちょっとエコにした

目的は、何度も拒否することになるIPをアプリケーションに到達する前にネットワークレベルで拒否したいということです。
※ Laravelはあまり関係ない。

指定した時間枠内に指定した回数以上のリクエストが行われた場合に、そのIPアドレスからのリクエスト拒否する。
```php
Route::get('/test', static fn() => 'Hello Hell')->middleware('throttle.custom:10, 1');
```

これだけだと、常にLaravelで拒否し続けなければならないのでOSレベルで拒否をすることで、ちょっとだけエコにする。

設定が簡単そうだったのでfail2banを利用することにした。
まずは、ログを産む
```php
namespace App\Http\Middleware;

use Illuminate\Http\Exceptions\HttpResponseException;
use Illuminate\Routing\Middleware\ThrottleRequests;
use Illuminate\Http\Exceptions\ThrottleRequestsException;

class TooManyRequests extends ThrottleRequests
{
    protected function buildException($request, $key, $maxAttempts, $responseCallback = null) {
        $retryAfter = $this->getTimeUntilNextRetry($key);
		// ログの出力は適当 config/logging.phpの設定も割愛
        \Illuminate\Support\Facades\Log::channel('too_many_requests')->info("Too many requests for IP {$request->ip()}");
        $headers = $this->getHeaders(
            $maxAttempts,
            $this->calculateRemainingAttempts($key, $maxAttempts, $retryAfter),
            $retryAfter
        );

        return is_callable($responseCallback)
            ? new HttpResponseException($responseCallback($request, $headers))
            : new ThrottleRequestsException('Too Many Attempts.', null, $headers);
    }
}
```

アプリケーションで拒否されている状態でもリクエストをしてくればIPを残すようにする。

後は、しつこくリクエストしてきた者を処す。

/usr/local/etc/fail2ban/jail.local
```sh
[laravel-too-many-requests]
enabled = true
filter = laravel-too-many-requests
logpath = /laravel-path/storage/logs/too_many_requests.log
bantime = 300
findtime = 600
maxretry = 10
action = iptables-multiport[name=NoAuthFailures, port="http,https", protocol=tcp]
```

10分間に10回ログ残してきたら5分BANする（雑）

/usr/local/etc/fail2ban/filter.d/laravel-too-many-requests.conf
```sh
[Definition]
failregex = .*Too many requests for IP <HOST>  $
ignoreregex =
```

準備は整ったのでfail2banを再起動して /testでF5を連打する！

```sh
# fail2ban-client status laravel-too-many-requests
Status for the jail: laravel-too-many-requests
|- Filter
|  |- Currently failed:	1
|  |- Total failed:	29
|  `- File list:	/laravel-path/storage/logs/too_many_requests.log
`- Actions
   |- Currently banned:	1
   |- Total banned:	1
   `- Banned IP list:	xxx.xxx.xxx.xxx
```

BANされた。これでアプリケーションが頑張る前にネットワークレベルで拒否されるようになった。

エコい
4次方程式 x4-2x3+3x2-2x+1=0を解け「2023 九州大学 前期 【1】」をChatGPTとsympyとWolframAlpha でやってみたい。

# オリジナル
・YUUU0123 様 (0:00〜9:25)

https://youtu.be/eJeN-W1twco

・大学入試数学問題集成 様＞ 前期【1】　テキスト

https://mathexamtest.web.fc2.com/2023/202310842/2023108420100mj.html

# ChatGPT-3.5先生へ。(1回目) 解
・回答は英語です。
　はじめから、「日本語で」を追加してもいいです。
・ページのソースを表示です。MathMLです。
　省略しようと思いましたが、大学入試数学問題集成 様 の全文から必要部分の抜粋です。
```
<div class="qbody">
<p class="slevel"><a name="q-0101" 
id="q-0101"></a><span 
class="qnum">【１】</span>　以下の問いに答えよ．</p>
<a name="s-0101" id="s-0101"></a><p class="s1level"><span 
class="shomon1">(1)</span>　<math>
<mn>4</mn><mspace width=".2em"></mspace>
</math>次方程式<math>
<mspace width=".2em"></mspace><mrow><msup><mi>x</mi>
<mn>4</mn></msup><mo>-</mo><mn>2</mn>
<mo>&it;</mo><msup><mi>x</mi><mn>3</mn></msup>
<mo>+</mo><mn>3</mn><mo>&it;</mo><msup><mi>x</mi>
<mn>2</mn></msup><mo>-</mo><mn>2</mn><mo>&it;</mo>
<mi>x</mi><mo>+</mo><mn>1</mn><mo>=</mo>
<mn>0</mn></mrow><mspace width=".2em"></mspace>
</math>を解け．
</p>
</div>
</div>
```
回答省略(英語です)
```
日本語で
```
・(抜粋)　sympyのソースコードがでました。
・私が追加しています。
```python
# from sympy import symbols, solve
from sympy import *

x = symbols('x')
expr = x**4 - 2*x**3 + 3*x**2 - 2*x + 1
roots = solve(expr, x)
roots
print("#",roots)
plot(expr,
     aspect_ratio=(1.0,1.0),xlim=(-4,4),ylim=(-1,4))
# [1/2 - sqrt(3)*I/2, 1/2 + sqrt(3)*I/2]
```

![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109698/4eefbc85-3646-9e6f-00a0-d66e8a871466.png)


# ChatGPT-3.5先生へ。(2回目) 増減表
```
x**4 - 2*x**3 + 3*x**2 - 2*x + 1
増減表をMarkdown形式でお願いします。```
```
あきらめました。

# WolframAlpha で
・グラフがでます。

https://www.wolframalpha.com/input?i=x4-2x3%2B3x2-2x%2B1%3D0&lang=ja

https://www.wolframalpha.com/input?i=x4-2x3%2B3x2-2x%2B1+%E6%9C%80%E5%B0%8F%E5%80%A4&lang=ja

最小値
x = 1/2 のとき, min{x^4 - 2 x^3 + 3 x^2 - 2 x + 1} = 9/16

・chatGPT先生へ

```
x4-2x3+3x2-2x+1 はx=1/2で左右対称ですか
```
回答省略

# sympyで(オリジナル 様の方法で)
???勉強中です。因数定理。相反方程式??? 

# いつもの? sympyの実行環境と 参考のおすすめです。
[(テンプレート)](https://qiita.com/mrrclb48z/items/00dd08b0317069be9342)

・以下ができたら、助かります。指定と全部です

https://qiita.com/mrrclb48z/items/555d85face87552c34fb

https://qiita.com/mrrclb48z/items/5f57eac92aaca30e85c0

# いつもと違うおすすめです。

https://qiita.com/mrrclb48z/items/f98d7ea0f664768790ed
【python】PDFファイルの文章をテキストファイルに変換してみた

# はじめに
pythonプログラムを使ってサーバー上のPDFファイルを読み取り、テキストファイルに読み込む必要性が出てきたので、調査しました。

## pdfminer.sixのパッケージインストール
PDFを読み込むライブラリとして、「pdfminer.six」パッケージをインストールします。

pipコマンドを使います。

```
$ pip install pdfminer.six 
```

## 実装したソースコード
LAParamsオブジェクトを作成し、extract_text()のオプションを指定し、抽出結果をテキストファイルにするため、codecsライブ来を使います。

```python
from pdfminer.layout import LAParams
from io import BytesIO
from urllib import request
from pdfminer.high_level import extract_text
import codecs

url = "https://flora-inc.co.jp/score/%E4%BB%A4%E5%92%8C5%E5%B9%B4%E5%BA%A6%E3%83%95%E3%83%AD%E3%83%BC%E3%83%A9IT%E9%83%A8%E9%96%80%E6%94%AF%E6%8F%B4%E5%AE%9F%E7%B8%BE.pdf"

result_file = "flora_report.txt"

laparams = LAParams(
    line_overlap=0.5,
    char_margin=2,
    line_margin=0.5,
    word_margin=0.1,
    boxes_flow=0.5,
    detect_vertical=False,
    all_texts=True
)

with request.urlopen(url) as res:
    f = BytesIO(res.read())
    for i in range(0,1):
      text = extract_text(f, laparams=laparams, page_numbers=[i])
      print(text,file=codecs.open(result_file,'a','utf-8'))

```

## 出力した結果

PDFファイルをテキストファイルに出力した結果です。

```
【令和 5 年度フローラ IT 部門支援実績報告】 

1. 研修における支援内容 

研修生として本年度は５名の方が入社し研修を受けていた、支援として研修専属での指導係

を配置し、相談や質問などをしやすい環境を確立している。 

提携先企業様から提供されているカリキュラムを基に、研修を進めていくという流れになっ

ている。 

分からないをそのままにせず、分かるまできちんと教えられる様な体制作りを職員・指導係・

受講者での連携をし、解決するようにしている。 

今年度の内６年度までに３名が研修を終えて業務研修に移行していて、その内の一人は実務

チームとして活躍している。 

2. 業務研修について 

業務研修は、実業務にも対応できる様に設立しました、支援としては業務研修でのチーム作

業にて、一つの課題に対して自分達で作り考える力、複数言語に対応できる力、実業務に特

化した作業など、戦力になるように支援しています。 

今までには無かった実務レベルの研修を受けてもらい、業務に移行できる様に考えられて

います。 

3. 実業務チーム支援内容 

実業務チームは、弊社提携先企業様からの受諾案件や共同開発案件など、報酬の発生する業

務を受け持っている。 

提携先企業からの発注を受けチーム全体で会議をし、チーム参加メンバーで結論を決め出来

るのか出来ないのかを判断し、自主性を最優先に決断をしながら進めていく事にしている。 

やると決まると職員と提携先企業との連携にて協議し、支援内容などを提携先企業と決め

ていく。 

実業務にかかる実務支援は提携先企業の側から、環境を提供して頂き相談など連携しやす

い環境が構築されている。 

4.IT 部門業務実績 

Web ホームページ作成案件：4 件 

システム開発案件：21 件 
```
 
# 最後に
PDFファイルから有用なデータを得て、データ分析に活用しようと思います。
はじめて技術イベントに登壇した学びと所感

今回magicpodさんのイベント[モバイルアプリ開発における良いテストコードの考え方 \- connpass](https://trident-qa.connpass.com/event/320151/)にスピーカーとして参加させていただきました。このような機会は初めてであり、感じることも多かったのでまとめます。


## 経緯
Kotlin Festに出していた不採択のproposalをmagicpodさんに見つけていただき、ありがたいことにお声を掛けていただきました。


## 学び
アウトプットをすることで、自分も学びを得ることができます。その点今回身を持って体験しました。

個人でQiitaなどに技術記事を書く場合、気軽にできると思います。しかし所属の名前を出し、かつ来ていただける方もたくさんなので、気合を入れました。

特に正確さは重要になります。しかしテスト関係のトピックはいろいろな解釈があるし、これという明確な正解のやり方もないので、難しいところです。なので正確性や客観性を担保できるよう、多くのドキュメント、サンプル、書籍を読みました。その中で自分の中ではっきりしていなかった知識に輪郭を与えることができたと思います。


## テーマについて
テーマを選ぶのはなかなか大変なことだと思います。定められた時間を守りつつ、ある程度そのテーマを網羅しないといけません。テーマを1つのissueにしぼる一方で、変な絞り方をしても対象者を限定してしまいます。

今回はKotlin/AndroidでTDDをすること、というようにTDDを絞りました。結果的に悪くはなかったと思います。

ただプレゼンの性質上TDDを実践しながら紹介するということをしたため、短い時間の中で本当に簡素な実施例しか示せなかったのは残念なところです。実施サンプルを考えるのは悩みどころでした。

最初はもっと複雑なサンプルを用意していたのですが、時間の都合上泣く泣く削らざるを得ませんでした。ViewModelの例を紹介したい、flowのテストも紹介したい、といろいろ紹介したいことがあるなかで、引き算する作業でした。


## プレゼン資料について
今回はコードサンプルを作るのが難しかったところで、正確を帰するためにいろいろなサンプルを見たり記事を調べたりしないといけませんでした。レビューしてくれる人がいればもっと楽ができたかもしれません。レビュアーが用意できる環境であれば、ぜひ募っていきたいところです。

またプレゼンで完結することが重要だと思いました。今回は追加の例を含めたコードサンプルを作ったり、補足の記事を書きましたが、そこまでやる必要があったかというと疑問です。当日になって発表しながら気づきましたが、プレゼンを聞く方々の多数はプレゼンを聴いて終わりとなるはずです。

そもそもいろいろなリンクを気になってたどってくれる方はプレゼンを特に気に入ってくれた方であり、そうするためにもプレゼンに全集中するべきでした。

ただ、Speaker Deckなどに上げたスライドは多くの方が見に来ます。当日参加できなかった人や見返しに来てくださる方も多いと思います。スライドに関しては本番で発言しないことも載せておくのもよいでしょう(発言する部分だけ赤文字にするなども良いと思います)。また、発表にはいかずスライドだけ見るという方のために、スライドだけで完結していることが望ましいと思います。

スライドではコードの部分にアニメーションを使っています。こちらkeynoteでもpowerpointでも簡単に作ることができます。前者ではmagic move、後者では画面切り替えを使います。アニメーションを使うとプレゼンが見やすくなります。一方スライドだけあとから見る方に対しても違和感なく見ていただけるよう、配慮していました。

また今回短い時間ということもあり目次など端折った部分があります。このあたり定型にとらわれないようにする必要がると思います。


## 本番について
それなりに発表はうまくいきました。しかしQ&Aやパネルディスカッションはあまり用意できていなかったので、詰まったり、噛んだりするところがあり、見苦しかったと思います。

エンジニア等で登壇するのであれば、登壇者は当然話し手のプロではないので、話し方に特化して鍛えたりする必要はないと思います。登壇の場数を増やすか、普段の業務の中で意識してみるくらいで良いと思います。

ただ練習する場合は動画を取って客観的に見てみることもできます。

またpower pointには「発表者モード」があり、話すことをメモに追加しておくとそれを見ながら話していけるので、プレゼンで詰まることは少なくなると思います。


## 興味を引き付ける工夫
他の登壇者さんで、キャッチーなタイトルを付けておられる方がいて、反応も良くて、いいなと思いました。

センスが良ければ効果は大きいので、挑戦していきたいところです。


## おわりに
最後に、大変でしたが良い経験になりました。主催者のmagicpodさんや聴いてくれた方々には感謝です。
また、自分でセッションを経験し大変さがわかったので、イベントで登壇される方々にはそれだけでリスペクトしかないです。イベントへの望み方も変わってくると思いました。

稚拙な発表だったため次の機会があるかは分かりませんが、今後も積極的にアウトプットする機会を求めていきたいと思います。
useDeferredValueの挙動を確認していく

今日は[useDeferredValue](https://ja.react.dev/reference/react/useDeferredValue)を学んでいきます。

---

- deferred : 日本人が発音するカタカナ英語では「ディファード」と読むようです。
  - 意味 : 延期する，先送りする，遅らせる

> useDeferredValue は、UI の一部の更新を遅延させるための React フックです。

なるほど。
ユーザーの入力操作をスムーズに保ちながら、UIの更新やレンダリングが高負荷になる場面ですね！では早速内容に入ってきましょう！

### useDeferredValue(value, initialValue?) 

#### 引数

- value
    - 遅延させたい値
- initialValue : 省略可能
    - コンポーネントの初回レンダーに使用する値
        - 省略された場合、初回レンダー時には遅延を行いません。

#### 返り値 

 - currentValue
     - 初回レンダー時
         - 最初に渡した値と同じものが返る
     - 更新時
         - まずは古い値で再レンダー(返り値は古い値)し、次に新しい値で`バックグラウンド`で再レンダー（返り値は更新後の値）を試みます。

:::note info
バックグラウンド？
低優先度の作業を後回しにして、ユーザーインターフェースの応答性を維持する手法です。
useDeferredValueを使うことで、明示的に低優先度の作業を指定できます。
これにより、高優先度のユーザーインターフェース(ユーザーの入力など)の更新が優先され、低優先度の更新は後回しにされます。
:::

### 使用法 

```jsx
// 高負荷なコンポーネント
const ExpensiveComponent = memo(function ExpensiveComponent({ value }) {
  const items = Array.from({ length: 20000 }, (_, i) => (
    <div key={i}>{value}</div>
  ));
  return <div>{items}</div>;
});

export default function App() {
  const [inputValue, setInputValue] = useState('');
  const deferredValue = useDeferredValue(inputValue);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <label>
        Type :
        <input value={inputValue} onChange={handleChange} />
      </label>
      <p>遅延なし : {inputValue}</p>
      <p>遅延あり : {deferredValue}</p>
      <ExpensiveComponent value={deferredValue} />
    </div>
  );
}
```

![ezgif-1-d8c974bea3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129861/481fad81-fe0f-9260-b85e-04a916c1f027.gif)

ストレスなくTypeはできている同時に、優先度の低いレンダリングはいい感じに遅延してくれていることが確認できました。


参考 :

[Reactの2種類の新フック「useTransition」と「useDeferredValue」を最速で理解する（プレビュー版）](https://qiita.com/uhyo/items/6be96c278c71b0ddb39b)
データベースの中身を修正したら詰まった話【CakePHP】

皆さんはCakePHPでデータベースのカラムなどを追加したり、削除しようとして、原因不明なエラーが出たことはありませんか？

Formヘルパーとマイグレーションファイルを使ってデータベースを更新していたら遭遇した問題を、備忘録として書き記しておこうと思います。

:::note info
動作環境
CakePHP 3.10
PHP 8.3.4
:::

# 先に結論
急いでいる方向けに、先に何をしたか書きます。

`bin/cake migrations migrate`をする前に
```
bin/cake cache clear_all
```
で、CakePHPのキャッシュ削除をする

## 原因

中身更新前のマイグレーションファイルの内容がキャッシュに残っており、それを参照してCakePHPがデータベースに`save()`しようとしていたようです。

## 起こるまでの経緯

<details><summary>↓↓↓興味がある方は、どうぞ↓↓↓</summary>

:::note warn
出てくる関数名などはフィクションです。
:::


### 第一話 初動

最初の仕様でデータベースとテーブルを作成し、`bin/cake bake migration Hoge`でマイグレーションファイルを作り、`bin/cake migrations migrate`で正しく中身を更新、値も入力ページやseedファイルから保存できました。

### 第二話 変更

その後、保存する値が増えたり減ったりと、仕様が変わりました。
その仕様に伴い、上で作成済のマイグレーションファイルの中身を変更し、再度`bin/cake migrations migrate`をし、データベースの内容更新が問題なく終わりました。**seedファイルでの初期値保存も、上手く行きました。**

### 第三話 異変

よし！次は入力ページから新しく内容を保存しよう！
すると
```
SQLSTATE[42S22]: Column not found: 1054 Unknown column 'hoge' in 'field list'
```
消したはずのカラムが見当たらないとエラーメッセージ。
エラーメッセージをコピペして検索して出てきた内容を試しても、どれも意味がなく…。

そりゃ検索して出てきた内容はどれも「カラム名や関数名合ってる？」といった内容なので、「無いはずの物を見当たらない！」と言われている場合の対処法ではなかったので、当たり前。

マイグレーションファイルで値の内容は更新できる様子だったので、仕方なくもう一度`hoge`というカラムを追加し、初期値を`null`にして値を更新させず、放置していました。

### 第四話 錯綜

不必要なカラムは、`null`にして放置すれば最悪なんとかなりました。
問題は、新たに追加したカラムが保存されないことです。
追加したカラムに入力ページから値を保存させようとすると、
```
SQLSTATE[HY000]: General error: 1364 Field 'fuga' doesn't have a default value
```
というエラーメッセージが。
デフォルトの値が無いと書かれています。

確かに、`fuga`は`null`を許容せず、デフォルトも`null`でした。このエラーメッセージが出るのも頷けます。
問題は、入れた値が入らない点です。
実験的にデフォルト値を設定すると、何度入力ページから保存しても、そのデフォルト値が入ってきています。

### 第五話 整理

現状を整理してみようと思います。

1. 消したはずのカラムが保存されようとしている
1. データベース内を確認しても、消したカラムは見当たらない
1. 新たに追加したカラムがきちんと保存されない
1. `seed`ファイル経由では、新たなカラムも正しく保存されている

つまり、**データベースには問題はないが、CakePHPから保存しようとした値が、正しく保存されない**ということです。

### 第六話 解明

CakePHPだけがおかしいなら、CakePHPを元に戻せばいいわけです。
そう、つまりは**キャッシュの削除**です。
```
bin/cake migrations rollback
bin/cake cache clear_all
bin/cake migrations migrate
```
マイグレーションファイルを落とし、キャッシュ削除してから再度実行した結果、上手くいきました。
思わぬところで一日使ってしまいました。

</details>

## 最後に

自分自身もまだ社会人なりたてで、色んなところで詰まってQiitaの記事を漁ったり、コードの書き方を忘れて検索することばかりです。
お互い、頑張りましょう。(何様)

同じような状況で詰まっている人の助けになれたのなら、幸いです。