OmniAICreator/Qiita-1.07M huggingface dataset:
Flask アプリのPythonanywhereへのデプロイ

いろいろなWEBの記事や投稿動画をいくら読んでも、成功しなかった、「Flask アプリのPythonanywhereへのデプロイ」がChatGPT4.0の助けで成功したので、簡単に報告します。ブログラミング技術のないぼくでもできたので、このこと自体が報告価値があると思います（なによりとても嬉しかった）。

（１）短いFlaskファイルは手動でPythonanywhereにアップロードすれば、容易。
    　　　初期画面のCreate a new siteでスタート直後、メインファイル名を、デフォルトのflask_app.pyのままにするなら、アップロードしたファイル名をかきかえればよい。あるいは、最初の手順で、例 app.py としてしまってもいい。
       
（２）大きなファイルは、大変でしたが、ChatGPT4.0にしつこく質問していけば、ぼくでもできました。
　　要点は、
　　１．　/home/（pythonanywhereのユーザー名）/（haikusns：今回アプリのフォルダ）/（app.py：今回アプリの中心のファイル）　の構造を保持する。具体的には、ファイル群push後、pythonanywhereのFilesの一部を削除したりして、整える。
  
　　２．Gitからのpushは、$ git clone https://{gitユーザー名}:{gitパスワード}@github.com/（gitユーザー名）/haikusns.git　　でOK。
  
　　３．/home/（pythonanywhereのユーザー名）/haikusns　で、python3.10 -m venv venv　と仮想環境をつくり
　　　　　　　　source venv/bin/activate
    　　　　そこに　haikusnsの仮想環境に以下の3つ（flask,markupsafe,tinydb: 今回のhaikusnsには必要だった）のインストール
            (venv) 01:12 ~/haikusns (main)$ pip install flask tinydb
            (venv) 01:27 ~/haikusns (main)$ pip install markupsafe
            
　　４．WEB画面のWSGI設定ファイルを次のように書き換える
　# This file contains the WSGI configuration required to serve up your
　# web application at http://（pythonanywhereのユーザー）.pythonanywhere.com/

import sys

　# add your project directory to the sys.path
project_home = '/home/（pythonanywhereのユーザー名）/haikusns'
if project_home not in sys.path:
    sys.path.append(project_home)

　# import flask app but need to call it "application" for WSGI to work
from app import app as application  # noqa

　　５．自分アップロードしたapp.py ファイルの、Markupのインポート行を修正。

　# Before
from flask import request, Markup

　# After
from flask import request
from markupsafe import Markup

　　６．reload

  デプロイされたサイトは、https://kojikoji.pythonanywhere.com/

  関連記事は、こちら　https://qiita.com/tkoji3744/items/08b71054dfba4f93f2c4
【Ruby】ループ処理について掘り下げて考えた

## 自己紹介
はじめまして、はる（[@lemonade_37](https://twitter.com/lemonade_37)）と申します。完全異業種からのエンジニア転職を目指して学習をしています。

## 概要
自分は完全未経験であり、Rubyで初めてプログラミングを学んだため、「繰り返し」と言う概念が当たり前にある前提で`each`文などの説明が始まり、 ???🧐??? となりました。
通っていたスクール内で技術面談等を利用したり、さまざまな技術記事を見たりして、
自分が理解できるまで掘り下げて考えたものをまとめました。

## 注意
私は前職が完全異業種であり、英語も苦手で、スクールに入って初めてプログラミングに触れました。
そんな自分が理解しづらかった部分を、同じように初めてプログラミングの概念に触れた人に向けてまとめました。
自分の復習も兼ねて、超超噛み砕いて書いているため、周りくどい書き方になっている箇所もあるかと思います。

また、初学者のため、間違っている箇所もあるかもしれませんのでその際は教えて頂けると嬉しいです🙇

　　
## ループ処理（繰り返し）とは
Ruby公式リファレンス内で探したのですが、「繰り返し」の概念自体を解説しているページは見つからなかったので自分の言葉で説明します。
一旦`each`や`for`などの細かいコードの使い方は置いておいて、

ループ処理とは、**繰り返す**ことです。
手作業で1つ1つやると大変なことも、ループ処理を使えば楽にできます。

お店の商品の値段の一覧のグループがあったとします。その値段の全ての、消費税込みの値段が知りたいとします。
`値段 * 1.1`をすべての値段に1回ずつ実行するのは面倒だし大変です。
そこで、下記のようにループ処理を使えば、すべての値段にまとめて同じ計算を実行できます。
```ruby
commodities = [250, 80, 500, 580, 300, 560]

commodities.each do |commodity|
  puts commodity * 1.1
end
```
```
出力：
275.0
88.0
550.0
638.0
330.0
616.0
```

自分のようにプログラミングの概念がわからないのに、
`each`はこうで…`while`はこうで…似たようなの色々出てくるけど何がどう違うの🤯
というところから入ってしまうとつまづくので、
ループ処理はプログラミングの醍醐味で、たくさん繰り返す処理を楽に実行できるものなんだな、と先に理解しておくと良いと思います。


## 噛み砕いて考える
スクールの講師の方に技術面談で質問し、下記のようなイメージで考えるよ良いと口頭で教えていただいたのがとてもわかりやすかったため、図にしました。
`for`文や`each`文の詳しい説明は割愛しますが、どちらも
**「配列の要素を1つずつ順番に取り出して、その取り出したものに対して繰り返し同じ処理をする」**
という動きをします。

![IMG_1200.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471604/2d785ddc-fabe-3ad8-680b-c9cbc14cedb7.jpeg)

　　
- 図の例で言うと、配列`[1, 2, 3]`の値`1`、`2`、`3`が順番に配列から取り出されて、変数`i`に代入されます。
その後、1回のループごとに`print i * 2`が実行され、**そのループの時代入されている`i`の値を2倍した値**が主力されています。
　　
- ループ文の`|i|`の部分で使われている`i`などの変数は、ループ処理の中で、ループする配列やハッシュなどの値を1つずつループごとに代入しています。これはループ内のみで一時的に使われる変数です。
　　
- ループ内でしか使われないため、名前は**なんでも良い**です。試しに他の文字に変えてみても動作することが確認できます。（本来こんなふうにはしませんが）
    ```ruby
    [1, 2, 3].each do |abcd|
      print abcd
    end
    #=> 123
    
    [1, 2, 3].each do |x|
      print x
    end
    #=> 123
    
    [1, 2, 3].each do |xyyyyyyyyxyxyxyxyxyyyxyx|
      print xyyyyyyyyxyxyxyxyxyyyxyx
    end
    #=> 123
    ```
 　
- では`i`とは何かというと、慣習でよく使われるものです。本来、アプリ内でループ処理を使う際には、`i`ではなく、そのループを表す意味のある語句にした方が、読みやすいコードになります。
慣習として、配列など複数の値を持つものは**複数形**で命名し、ループ処理の変数はその**単数系**にすることが多いです。
    ```ruby
    cats = ["Persian", "Scottish Fold", "American Shorthair", "Russian Blu"]
    
    cats.each do |cat|
      puts "猫種：#{cat}"
    end
    ```
    ```
    出力：
    猫種：Persian
    猫種：Scottish Fold
    猫種：American Shorthair
    猫種：Russian Blu
    ```

## まとめ
- ループ処理とは、同じことをたくさん繰り返す処理を、楽に実行できるもの
- ループ処理で出てくる`|i|`や`i`などは、ループ内のみで一時的に使われる変数
- ループ内で使われる変数名は**なんでも良い**が、**慣習として**ループする配列名（英語の複数形）の単数形にすることが多い。

　　
Rubyのループ処理の各メソッドについては、下記記事でまとめました。

https://qiita.com/lemonade_37/items/229976b5c7b250d6cd6b

ここまで読んでいただきありがとうございました！🙇

:::note
@scivolaさんより[`for`と`each`の違いについて詳しくわかりやすくコメント](https://qiita.com/lemonade_37/items/0660f9ee6ca2dc09d42d#comment-dac8b0a71beb9bf41877)いただきました。
詳しく知りたい方はぜひコメントまで読んでいただけると幸いです。
:::


## 参考記事

- [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 繰り返し処理](https://wa3.i-3-i.info/word15413.html)
- [「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ループ](https://wa3.i-3-i.info/word15413.html)
乃木坂46でクラスのカプセル化を勉強する

乃木坂46でクラスのカプセル化を勉強します。
まずソースコードを例示します。


```python
class Nogizaka46:



  # コンストラクタ
  def __init__(self,name,div="3期生です"):
    self.name = name
    # アクセス制限を指定
    self.__div = div


  # getter Div
  # メンバーの期別をgetter(getDiv関数)で返す。
  @property
  def getDiv(self):
    return self.__div
  # getter name
  
  # メンバーの名前をgetter(getName関数)で返す。
  @property
  def getName(self):
    return self.name
  
  #期別判定のsetter関数(setDiv関数)で設定し、期別で判定する
  @getDiv.setter
  def setDiv(self,div1):
    if div1 >= 3 and div1 < 6:
      self.__div = str(div1) + "期生です"
    else:
      self.__div = "乃木坂46の現役メンバーではありません"

# インスタンスを名前を付けて呼び出し、setterで期を代入し、結果を表示
mem1 = Nogizaka46("梅澤美波")
mem1.setDiv = 3
name1 = mem1.getName
div1= mem1.getDiv
print(f'{name1}は{div1}')

mem2 = Nogizaka46("中西アルノ")
name2 = mem2.getName
mem2.setDiv = 5
div2= mem2.getDiv
print(f'{name2}は{div2}')

mem3 = Nogizaka46("桜井玲香")
name3 = mem3.getName
mem3.setDiv = 1
div3= mem3.getDiv
print(f'{name3}は{div3}')

mem4 = Nogizaka46("岩本蓮加")
name4 = mem4.getName
div4= mem4.getDiv
print(f'{name4}は{div4}')
```

実行した結果は下記の通りです。

![sample.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/d279ecc9-26e0-6961-1b09-1e5329df757d.jpeg)
【git】gitでよく使うコマンド

こんにちは～昨日は体調を崩していたので、今日まとめて投稿します！
最近チーム開発でgitをよく使うのですが、その時に多用しているコマンドを今回はまとめてみました:grin:

## 基本的なコマンド

ブランチ移動
```terminal:ターミナル
$ git checkout ブランチ名　　
```
ブランチ作成
```terminal:ターミナル
$ git checkout -b 新しいブランチ名　　
```
ブランチ確認
```terminal:ターミナル
$ git branch　　
```
空コミット
```terminal:ターミナル
$ git commit --allow-empty -m "コメント"
```

## ブランチの削除コマンド
ローカルブランチ削除
```terminal:ターミナル
$ git branch -D ローカルのブランチ名　
```
リモートブランチ削除
```terminal:ターミナル
$ git push origin --delete リモートのブランチ名　
```
## リモートの最新のブランチをローカルに反映
リモートの最新のブランチを反映(リモートに反映させたブランチに移動後)
```terminal:ターミナル
$ git pull origin リモートのブランチ名
```
自分のブランチにも反映(自分のブランチへ移動後)
```terminal:ターミナル
$ git merge origin/リモートのブランチ名
```
リモートに自分のブランチ反映
```terminal:ターミナル
$ git push origin　自分のブランチ名
```

## gitのコミット情報確認
```terminal:ターミナル
$ git status
```

## git reset
コミットのみ取り消し
```terminal:ターミナル
$ git reset --soft
```
コミットとindexを取り消し
```terminal:ターミナル
$ git reset --mixed
```
コミット、index、作業ツリーすべて取り消し
```terminal:ターミナル
$ git reset --hard
```
【ChatGPT有＋DALL-E3】でコラージュアートワークしてみた。


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

　今回は、コラージュアートワークを描いてみます。ご存知でしょうか？

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

　まずは、ニュース。

　小さなことですが、
　　Web版のChatGPTの
　　　入力枠が、入力した分だけ
　　　　縦に伸びるようになりました。

　これまでは、
　　三行四行の中で
　　　書かなければならず、
　　　　長文の編集も、大変でした。

　これからは、
　　メガプロンプトも
　　　編集しやすくなりますね。

　もちろん、
　　メモ帳・エディタ等を
　　　ご利用の方には
　　　　関係ない話かも(汗)
***
　次のニュース。

　ChatGPTのアプリですが、
　　ロングタップして
　　　出てくるメニューですが、
　　　　項目が追加されています。

　一番下です。

　iPhone版は、“Listen”
　Android版は、“Lead out loud”

　これは
　　ChatGPTが出力した文章を
　　　読んでくれるものです。

　音声系は、
　　今まで、
　　　音声入力と音声会話だけで、
　　　　出力された文章を読む
　　　　　音声出力は
　　　　　　ありませんでした。

　まぁ、この機能は
　　運転中には、
　　　使わない方がいいかなw

　音声会話しながら
　　運転している人も多いらしいので
　　　そういう人は
　　　　気を付けてください（マジで）
***
　さて、
　　本題です。

　たいした内容じゃないです。
　　いつもかw

　今回は、
　　DALL-E3で描く
　　　対象物についてです。

　たいていの方は
　　男なら、理想の女性
　　女なら、理想の男性
　　　というのが、多いです。

　それらは
　　男なら、リアル
　　女なら、アニメ・イラスト系が
　　　多い気がします。

　それを
　　発表する場所が
　　　SNSにあります。

　私はだいたいが
　　実験作品のアップを
　　　していますw

　・リアル系
　・スーパードルフィー（球体人形）
　・フィギュア
　・アニメ・イラスト系　など。

　そこに
　　新たな項目が
　　　増えました。

　“コラージュアートワーク”です。

　説明は、
　　Google SGEに
　　　してもらいます。
***
***GoogleSGE***
コラージュアートワークとは、写真や絵などを切り抜き、画用紙などに貼って作品を作る創作技法です。写真、新聞や雑誌の切り抜き、絵画、布、時には糸くずや葉っぱなど、さまざまな素材を組み合わせて表現します。
﻿
コラージュは、20世紀初頭のキュビズム期に導入され、ダダやシュルレアリスムなどの作家たちにとって重要な意味を担う技法として、特に重要視されるようになりました。
﻿
コラージュは、好きなアイテムを選んで、自分なりの表現方法で再構築していくことで、想像力が鍛えられる表現遊びです。また、自由な自己表現ができ、デザインを学ぶきっかけにもなります。
﻿
コラージュは、フランス語の動詞「coller」に由来する用語で、「糊で貼り付ける」という意味があります。﻿
***

　大道芸で、
　　“切り絵細工”というものが
　　　ありますね。

　あれは、
　　一枚の紙を
　　　ハサミで切っていって
　　　　黒の台紙の上に載せて
　　　　　表現しています。

　それに対して、
　　コラージュアートワークは
　　　新聞記事のスクラップを
　　　　カラフルにした感じが
　　　　　あります。私的にw

　でも、
　　それは人間の創作なので
　　　芸術作品でもあります。
***
　そこで、
　　そうした作品を
　　　コピーさせていただき、
　　　　自分なりのアレンジを
　　　　　加えました。

　アレンジ前が
　　こちら。
![1707965648564.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/75314796-f597-6db0-524d-4f5ae008371d.jpeg)

　アレンジ後が
　　こちらです。
![1707965661650.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/c82efad2-6c04-5e90-a7a9-08e944a01a65.jpeg)

　ごらんのように
　　“飛び出す絵本”、
　　　“Popup Book”の要素を
　　　　組み込みました。
　
　コピー時に
　　新聞紙が消えてしまいましたが
　　　いい感じです。

　もう少し
　　やってみないと
　　　コラージュアートワークっぽく
　　　　ないかな？

　こんなことで
　　みなさんの
　　　創作意欲を
　　　　引き出せれば
　　　　　幸いです。

　今回は、ここまで。
Sorbet, tapiocaを導入して、Ruby On Railsで型チェックを行う。

<h1>環境</h1>
<ul>
<li>WSL2</li>
<li>Rails 7.1.3</li>
<li>ruby 3.2.2</li>
<li>sorbet (0.5.11255)</li>
<li>sorbet-runtime (0.5.11255)</li>
<li>tapioca (0.12.0)</li>
</ul>

<h1>目的</h1>
<p>Sorbet, tapiocaを導入して、Ruby On Railsで型チェックをできるようにする。</p>

<h1>注意</h1>
<p>tapiocaを使ってRBIファイルを生成する。sorbet-railsはサポートが終了するので使用しない。</p>
<h4><a href="https://github.com/chanzuckerberg/sorbet-rails/blob/master/README.md">sorbet-railsレポジトリ</a></h4>
<p>This repository is no longer maintained and will be sunset. The Sorbet community has endorsed the Tapioca gem for generating RBI's, including those for Rails. Please consider migrating over!</p>


<h1>手順</h1>
<h3>テストページを作ってrailsを起動する</h3>
<p>railsプロジェクトを作成し、アプリを起動する。デフォルトページ（http://localhost:3000/）にアクセスして、無事にアプリが起動していることを確認する。</p>

```shell
> rails my_sorbet
> cd my_sorbet
> rails server
```

<h3>テストページを作ってみる</h3>
<p>下記のようにファイルを設定して、「rails server」でアプリを起動して、http://localhost:3000/tests にアクセスすれば、テストページが表示されるはず。</p>

```routes.rb
get "tests", to: "tests#home", as: "tests"
```

```controller/tests_controller.rb
class TestsController < ApplicationController
    def home()
        #特に何も書かなくていい
    end
end
```

```views/tests/home.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>Test Page</title>
</head>
<body>
  <h4>ここはテストページです。。。<h4>
</body>
</html>
```

<h3>Sorbet, tapiocaをインストール</h3>
<p>下記のコマンドでSorbet, tapiocaをインストールする。</p>
<p>Sorbetの初期の設定はエラーを無視しているので、下記のようにエラーはないはず。</p>

```Gemfile
#Gemfile
gem 'sorbet', :group => :development
gem 'sorbet-runtime'
gem 'tapioca', require: false, :group => [:development, :test]
```
```shell
> bundle exec srb
[help output]

> bundle exec srb typecheck -e 'puts "Hello, world!"'
No errors! Great job.

> bundle exec ruby -e 'puts(require "sorbet-runtime")'
true
```

```shell
> bundle exec tapioca init
```

```shell
> bundle exec srb tc
No errors! Great job.
```

<h3>静的型チェックをして、エラーを検出してみる</h3>
<p>型のエラーをつくり、正確に検出してくれるかどうかを確かめる。</p>
<p>下記は、Symbol型が入るべきところにString型が入っているので、エラーが検出される。</p>

```controller/tests_controller.rb
# typed: true

class TestsController < ApplicationController
  extend T::Sig

  def home
    log_env({timeout_len: 7777}, :timeout_len) # 正確な型となっている
    log_env({timeout_len: 7777}, 'timeout_len') # 型が違反している
  end

  sig {params(env: T::Hash[Symbol, Integer], key: Symbol).void}
  def log_env(env, key)
    puts "LOG: #{key} => #{env[key]}"
  end
end
```

```shell
> bundle exec srb tc
...Expected Symbol but found String("timeout_len")...
...log_env({timeout_len: 2000}, 'timeout_len')
...
```

<h1>参考</h1>
<ul>
<li><a href="https://sorbet.org/docs/adopting">Sorbet 公式</a></li>
<li><a href="https://github.com/chanzuckerberg/sorbet-rails/blob/master/README.md">sorbet-railsレポジトリ</a></li>
</ul>
plunkerでtateno その2

# 概要
plunkerでtatenoやってみた。
走る人、やってみた。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/4af357cb-7f52-73f3-6359-0092033f62b5.png)

# サンプルコード

```

game = new Game();
game.fps(10);
game.start();
var foo = new Sprite(85, 102, "lib/hito.png", 6, 5);
foo.x(20);
foo.y(130);
foo.frame(10);
foo.enterframe = function() {
  foo.frame(foo.frame() + 1);
  if (foo.frame() > 29) 
    foo.frame(0);
  foo.x(foo.x() + 1);
};




```

# 成果物

https://embed.plnkr.co/plunk/xsHD7mTbZ36HoZXn

以上。
cscの作法 その456

# 概要
cscの作法、調べてみた。
DxLibDotNet.dll、使ってみた。
練習問題やってみた。

# 練習問題
背景を透過させよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/91a72d0e-94ce-ec13-0a04-3420bad4c64f.png)

# サンプルコード

```
using System;
using System.Windows.Forms;
using System.Drawing;
using DxLibDLL;

namespace WindowsFormsApp1
{
	public partial class Form1: Form {
		int png;
		public Form1() {
			this.FormClosed += new System.Windows.Forms.FormClosedEventHandler(this.Form1_FormClosed);
			this.Shown += new System.EventHandler(this.Form1_Shown);
			DX.SetOutApplicationLogValidFlag(DX.FALSE);
			DX.SetUserWindow(Handle);
			DX.DxLib_Init();
			DX.SetDrawScreen(DX.DX_SCREEN_BACK);
			png = DX.LoadGraph("circledock.png");
		}
		public void MainLoop() {
			DX.ClearDrawScreen();
			DX.DrawBox(0, 0, Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, DX.GetColor(1, 1, 1), DX.TRUE);
			DX.DrawGraph(20, 20, png, DX.TRUE);
			DX.ScreenFlip();
			if (DX.CheckHitKey(DX.KEY_INPUT_ESCAPE) != 0) 
			{
				Close();
			}
		}
		private void Form1_FormClosed(object sender, FormClosedEventArgs e) {
			DX.DxLib_End();
		}
		private void Form1_Shown(object sender, EventArgs e) {
			FormBorderStyle = FormBorderStyle.None;
			TransparencyKey = Color.FromArgb(1, 1, 1);
		}
	}
	static class Program {
		[STAThread]
		static void Main() {
			Application.EnableVisualStyles();
			Application.SetCompatibleTextRenderingDefault(false);
			Form1 form = new Form1();
			form.Show();
			while(form.Created) 
			{
				form.MainLoop();
				Application.DoEvents();
			}
		}
	}
}





```

以上。
plunkerでtateno

# 概要
plunkerでtatenoやってみた。
モグラ叩き、やってみた。

# 参考にしたページ

http://tatenosystem.com/product_jquery_ie_game_engine

# 写真


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/7ca8fd93-a1c5-cb18-644b-ba4e26b8c601.png)

# サンプルコード

```

var t1 = "lib/mogu_tan1.png";
var t2 = "lib/mogu_tan2.png";
var t3 = "lib/mogu_tan3.png";

window.onload = function() {
	game = new Game();
	game.fps(30);
	game.preload(t1);
	game.preload(t2);
	game.preload(t3);
	game.start();
	var aLabel = new Label("score", 10, 10);
	aLabel.size(20);
	var flg = 0;
	var score = 0;
	var count = 0;
	var count2 = 0;
	var kan = Math.random() * 35;
	function main() {
		setTimeout(function() {
			if (flg == 0) 
			{
				count++;
				count2++;
				aLabel.label("time: " + Math.floor(count / 10) + " score: " + score);
				if (count2 > kan)
				{
					var mogura = new Sprite(120, 120, t2, 1, 1);
					mogura.x(Math.random() * 380);
					mogura.y(Math.random() * 330 + 50);
					mogura.jq.click(function() {
						mogura.x(-100);
						score++;
					});
					kan = Math.random() * 25;
					count2 = 0;
				}
				if (Math.floor(count / 10) == 11)
				{
					alert("game over");
					flg = 1;
				}
				main();
			}
		}, 100);
	}
	main();
}




```

# 成果物

https://embed.plnkr.co/plunk/S2lWR2mEzP2PrAeG

以上。
Nuxt3 の fetch / $fetch / useFetch の違い

# まとめ

- useFetchは setup / middleware だけで使う
- `$fetch`  はユーザー行動に応じて利用する用途
- `fetch` は `$fetch` とは別物で、`fetch` はもう使わなくて良さそう

# 警告

setup / middleware 以外で useFetch を使った時に、console で以下が警告がされる

>[nuxt] [useFetch] Component is already mounted, please use $fetch instead. 
>See https://nuxt.com/docs/getting-started/data-fetching

たとえば次のように、ボタンを押した時などに useFetch を使うと警告される

```vue
<script setup lang="ts">
function fetchTODO() {
  useFetch('https://jsonplaceholder.typicode.com/todos/1')
}
</script>

<template>
  <div>
    <button @click="fetchTODO">Fetch</button>
  </div>
</template>
```


# ドキュメント

useFetch は setup や middleware で使うもののようだ

> [useFetch](https://nuxt.com/docs/api/composables/use-fetch) is the most straightforward way to handle data fetching in a component setup function.

`$fetch` は ユーザーのインタラクション(操作とか) に応じてリクエストするのに合っているっぽい

> [$fetch](https://nuxt.com/docs/api/utils/dollarfetch) is great to make network requests based on user interaction.

https://nuxt.com/docs/getting-started/data-fetching


# $fetch とは何なのか

- `fetch` と `$fetch` は別物のようだ
- `$fetch` は `ofetch` のエイリアスらしい

>Nuxt includes the ofetch library, and is auto-imported as the $fetch alias globally across your application. It's what useFetch uses behind the scenes.

https://nuxt.com/docs/getting-started/data-fetching#fetch 

なおかつ今見返してみると fetch の例は Nuxt のドキュメントにはない気がした (前にあったのかどうかも分からない)

# $fetch  と fetch の違いを試してみる

## $fetch の場合

`$fetch` は戻りの値をそのまま受け取れるので template で使いやすくなっている

```vue
<script setup lang="ts">
let data = ref()

async function fetchTODO() {
  data.value = await $fetch('https://jsonplaceholder.typicode.com/todos/1')
}
</script>

<template>
  <div>
    <button @click="fetchTODO">Fetch</button>
  </div>

  <div>
    {{ data }}
  </div>
</template>

```

## fetch の場合

template でレスポンスの値を使うには、次のように then で処理する必要があったと思う
(書くのが大変)

```vue
<script setup lang="ts">
const result = ref()

async function fetchTODO() {
  await fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((res) => {
      return (result.value = res.json())
    })
    .then((jsonResponseData) => {
      result.value = jsonResponseData
    })
}
</script>

<template>
  <div>
    <button @click="fetchTODO">Fetch</button>
  </div>

  <div>
    {{ result }}
  </div>
</template>
```

# では useFetch はどんな時に使ったら良いのか？

ユースケースはまだよく分かっていない。(自分が)


# 関連

Nuxt3 – useFetch / useAsyncData / fetch – リクエスト対象のURLやパラメータを変えて再リクエスト出来るのか？
https://github.com/YumaInaura/YumaInaura/issues/3525

# チャットメンバー募集


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

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


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
sedコマンドによる文字列の追記

Linuxでファイル内の特定の文字列の後に任意の文字列の行を追加するには、`sed`コマンドを使う方法が便利です。ここでは基本的な使用方法を説明します。

例として、ファイル内の「特定の文字列」の後に「任意の文字列」を追加したい場合のコマンドは以下のようになります。

```sh
sed -i '/特定の文字列/a 任意の文字列' ファイル名
```

- `-i` オプションはファイルを直接編集するために使用します。
- `/特定の文字列/` で特定の文字列を検索します。
- `a` コマンドは指定したパターンにマッチする行の後に新しい行を追加します。
- `任意の文字列` は追加したい内容です。
- `ファイル名` は操作したいファイルの名前です。

例えば、ファイル `example.txt` の中で「Hello」の行の後に「World」を追加したい場合、次のコマンドを使います。

```sh
sed -i '/Hello/a World' example.txt
```

このコマンドは `example.txt` ファイル内のすべての「Hello」の行の後に「World」を追加します。

`sed` コマンドは非常に強力で柔軟なツールですが、使用する際はファイルをバックアップすることをお勧めします。特に `-i` オプションを使う場合は、元のファイルが直接変更されるため、誤って内容を失うリスクがあります。
Dockerハンズオン入門

# dockerとは
コンテナ型の仮想環境を提供するプラットフォームです。従来の仮想化技術に比べて軽量性と速度で優れており、1台のサーバーで複数のアプリケーション環境を効率的に構築できるのが特徴です。

詳しい説明は以下です
> https://qiita.com/etaroid/items/b1024c7d200a75b992fc

 # 今回やること
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082298/e653859a-a5b1-2079-61b0-fa32c9564a7e.png)
Dockerfileを作成し、コンテナを立ち上げるまでの流れを一通り行います


# よくわからないけどとりあえずやってみよう!!
1. Dockerのインストール
個人的にはMac環境をお薦めしますが、windowsでも問題なく動作します
> https://www.docker.com/ja-jp/

windowsでWSLのエラーがある場合
再起動
windows updateしてみてください

2. 任意のフォルダ作成、フォルダ内にDockerfile,example.pyを作成
今回はpython環境をdockerで作り、実行します
Dockerfileの例
```example.py
print("Hello, World!")
```

3. Dockerfileからイメージ作成
exampleというdockerイメージをdockerfileから作成します
ターミナルを開き以下のコマンドを入力します
`docker build ./ -t example` 
作成したイメージを確認
`docker images`
イメージがうまく作成されてると確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1082298/9491b4a6-362d-9ce8-d637-7dd9ed39009d.png)

4. イメージからコンテナを作成
先ほど作成したexampleイメージからコンテナを作成します
`docker run example`
Hello Worldと出力されたら無事完了です
仮訳: announcing freenginx.org

# 初めに

- 私は翻訳については初心者です
- 自分自身の理解を目的とした翻訳であり、正確性について一切保証しません
- 翻訳にはDeepLを活用していますがそれそのままではありません

# 翻訳対象

https://mailman.nginx.org/pipermail/nginx-devel/2024-February/K5IC6VYO2PB7N4HRP2FUQIBIBCGP4WAU.html

# 本文

> As you probably know, F5 closed Moscow office in 2022, and I no
> longer work for F5 since then.  Still, we’ve reached an agreement
> that I will maintain my role in nginx development as a volunteer.
> And for almost two years I was working on improving nginx and
> making it better for everyone, for free.

知っての通り、F5は2022年にモスクワオフィスを閉鎖し、私はそれ以来F5では働いていません。私がボランティアとしてnginxの開発における役割を担うことで合意をしていました。そしてこの約2年、無償で、nginxをより良くするためにかつどうしてきました。

> Unfortunately, some new non-technical management at F5 recently
> decided that they know better how to run open source projects.  In
> particular, they decided to interfere with security policy nginx
> uses for years, ignoring both the policy and developers’ position.

残念ながら、F5の新たな非技術系である経営陣は、OSSプロジェクトの運営に関して自分たちのほうが詳しいと錯覚したようです。特に、nginxが長年使い続けてきたセキュリティポリシーへの干渉は、セキュリティポリシーポリシーと、そして開発者の立場を無視するものでした。

> That’s quite understandable: they own the project, and can do
> anything with it, including doing marketing-motivated actions,
> ignoring developers position and community.  Still, this
> contradicts our agreement.  And, more importantly, I no longer able
> to control which changes are made in nginx within F5, and no longer
> see nginx as a free and open source project developed and
> maintained for the public good.

これは非常に理解できることで、F5はnginxプロジェクトを保有しているのであり、なんだってできるわけです。マーケティングのための活動であるとか、開発者とコミュニティを無視することだってできます。それでも、こうした行いはnginxコミュニティとの合意に反しているのです。そして、もっと重要なのは、私はすでにF5内でnginxに加えられる変更について、制御できない状態にあり、もはやnginxは公共の利益のために開発保守される自由なOSSプロジェクトとは呼べないということです。

> As such, starting from today, I will no longer participate in nginx
> development as run by F5.  Instead, I’m starting an alternative
> project, which is going to be run by developers, and not corporate
> entities:
>
>http://freenginx.org/

そういうわけで、本日より、私はF5が運営するnginx開発に関わらないこととします。かわりに、私は企業ではなく、開発者によって運営される別のプロジェクトを立ち上げます。

http://freenginx.org/

> The goal is to keep nginx development free from arbitrary corporate
> actions.  Help and contributions are welcome.  Hope it will be
> beneficial for everyone.

目標はnginxの開発を企業の恣意的な行動から自由に保つことです。 支援や貢献は大歓迎です。 皆さんのためになることを願っています。

# 訳注

- F5とはF5 Networksのこと
    - ref: [NGINX、F5による買収を正式発表。F5のロードバランサとNGINXのプロキシなどにより総合的なアプリケーションサービスを提供 － Publickey](https://www.publickey1.jp/blog/19/nginxf5f5nginx.html)
- >F5 closed Moscow office in 2022
    - もちろん2022年ロシアのウクライナ侵攻の影響によるもの。nginxのOSS開発者はロシア国内にいた。
    - ref: [F5、NGINXの開発チームをロシア国外へ移転させたことを報告。開発を立て直しリリースサイクルも元通りに － Publickey](https://www.publickey1.jp/blog/22/f5nginx.html)
MySQLのデータファイル構成

## 概要

MySQLは、世界で最も広く使用されているリレーショナルデータベース管理システム（RDBMS）の一つです。その強力な機能、柔軟性、オープンソースである点が多くの開発者や企業に選ばれる理由です。MySQLの性能と効率を最大限に引き出すためには、データファイル構成を理解することが重要です。この記事では、MySQLの主要なデータファイルとその役割について解説します。

## データファイルとは？

MySQLでは、データの保存、管理、検索に様々なファイルが使用されます。これらのファイルはデータベースの物理的な構成要素であり、ディスク上に存在します。主なファイルタイプには、テーブルスペースファイル、ログファイル、その他補助ファイルなどがあります。

## テーブルスペースファイル

テーブルスペースファイルは、データベースのテーブルデータを格納するファイルです。MySQLには、InnoDB、MyISAM、NDBなど、複数のストレージエンジンがあり、それぞれ異なるテーブルスペースファイルフォーマットを使用します。

### InnoDB

* **専用テーブルスペースファイル（.ibdファイル）:** 各InnoDBテーブルは、データとインデックスを1つの.ibdファイルに格納します。
* **共有テーブルスペースファイル（ibdataファイル）:** システムテーブルスペースのデータファイルで、テーブルのメタデータやUndoログなどを格納します。

### MyISAM

* **データファイル（.MYDファイル）:** テーブルデータを格納します。
* **インデックスファイル（.MYIファイル）:** テーブルのインデックス情報を格納します。

### NDB

* **NDBクラスタデータファイル:** NDBクラスタで使用されるデータファイル。

## ログファイル

ログファイルは、データベースの操作に関する情報を記録するファイルです。主なログファイルには、スロークエリログ、一般クエリログ、エラーログ、バイナリログなどがあります。

* **スロークエリログ（slow_log）:** 実行時間が指定時間を超えるクエリを記録します。
* **一般クエリログ（general_log）:** すべてのデータベース操作を記録します。
* **エラーログ（Error Log）:** サーバーの起動と停止時の情報、稼働中に発生した障害や異常な状況を記録します。
* **バイナリログ（Binary Log）:** データベースの変更を記録し、データ復旧、レプリケーション、監査に使用されます。

## その他補助ファイル

* 設定ファイル
* ロックファイル
* 統計情報ファイル

## まとめ

MySQLのデータファイル構成を理解することは、データベースの性能と効率を最大限に引き出すために重要です。この記事では、MySQLの主要なデータファイルとその役割について解説しました。

**詳細説明を省略したファイル**

* **SDIファイル:** MyISAMエンジンのテーブルメタデータを格納しますが、InnoDBエンジンが主流となった現在ではあまり重要ではありません。詳細はMySQL公式ドキュメントを参照してください。
* **frmファイル:** テーブル構造の定義情報を保存しますが、.ibdファイルにも同様の情報が含まれているため、詳細な説明は省略しました。詳細はMySQL公式ドキュメントを参照してください。

**補足説明ファイル**

* **undoログファイル:** トランザクションのロールバックに使用されます。詳細は専門的な内容となるため、基本的な説明に留めました。詳細はMySQL公式ドキュメントを参照してください。
* **redoログファイル:** データベースの復旧に使用されます。詳細は専門的な内容となるため、基本的な説明に留めました。詳細はMySQL公式ドキュメントを参照してください。

## 詳細を知りたい場合は

これらのファイルに関する詳細は、以下の方法で確認できます。

* **MySQL公式ドキュメント** (https://dev.mysql.com/doc/refman/8.0/en/)
laravelでService Repositoryの概念で実装してみた感想

## 結論
SeriviceとRepositoryのlaravelへの導入方法は
いろんなサイトで紹介されているので、それぞれ試してみましたが
自分自身でコーディングしてみた感想としては
laravelのeloquentを使いたいならrepositoryは不要な気がします。
大規模なDBとかの経験がないだけなのかもしれないが。

Repositoryの導入途中で「あれ？リレーションはどうすんだ？」
「eager loadingつかえんのか？」とみていくと
`with`とか`withTrashed`とか自前で実装しないといけないことに気づいた。

laravelのリレーションとかeager loadingとかの便利機能を使いつつ
SQL文を直接クエリで書きたいくらいのレベルでは
Repositoryは機能が重すぎる。

以下で十分。ViewはInertiajsを想定。
#### Controller
requestのバリデーションとresponseの行先のみ指定。
```php:Controller.php
private: $someService;
public function __construct(SomeServiceInterface $someService)
{
    $this->someService = $someService;
}
public function store(StoreRequest $request)
{
    try {
        $this->someService->create($request->all());
        return redirect()->route('posts.index')->with(['message' => '追加しました。']);
    } catch (Throwable $e) {
        return redirect()->back()->with(['error' => $error_message]);
    }
}
```
#### Service
業務処理の実体。 
interfaceは型を厳密にしたいときやメソッドの公開を限定的にしたい場合。

```php:app/Services/SomeService.php
class SomeService implements SomeServiceInterface
{
    public function create(array $data): ?Model
    {
        DB::beginTransaction();
        try {
            $post = new Post($data);
            $post->save();
            DB::commit();
            return $post;
        } catch(Throwable $e) {
            DB::rollBack();
            return null;
        }
    }
}

```
#### Model
DBのテーブルのラッパー。
laravelのeloquentの便利機能を使いたいならこれで十分。

### View
応答データ。webならblade、vue、react。apiならjson。
新人エンジニアが環境変数と.envなどについて調べたのでメモ

# 環境変数とは
環境変数とは、その名の通り、コンピュータやプログラムが動く環境を設定するための変数です。
# 環境変数の種類
Web開発初心者だと、「環境変数＝.env　に書くもの」というイメージがあるかもしれません（私だけ？）が、実情はだいぶ違いました。
## .envに書かない環境変数
OSレベルで設定されている環境変数や、フレームワークのデフォルト設定など、開発者が自ら設定しなくて良い環境変数があります。これらは、外部の設定に依存しているので、セキュリティ上問題がないため、敢えて隠しファイルに記入しなくても良いとも言えます。
## .envに書く環境変数
開発物の秘密情報や、プロジェクト固有の設定など、.envに書くべき環境変数もあります。

.envは、ソースコードから分離しているため、外部に漏らしたくない情報を管理するのに適しています。例えば、DBのパスワードやAPIキーがその例です。DBパスワードが流出して、自社の大切なデータが奪われてしまったり、有料のAPIを無断で利用されたりするリスクを防ぐことができます。

また、開発環境と本番環境でDBを切り替える場合なども、.envで設定しておくと便利です。

ちなみに、ソースコードの中に定義されている環境変数はハードコードと呼ばれ、envファイルに集約することが望ましいようです。pythonの静的解析チェックツールのRuffでも指摘されます。
# 【おまけ】python開発におけるdotenvとdirenv
初めて携わった開発ではdotenv、これから携わる開発ではdirenvが使われていたので、簡単に違いを調べてみました。
## python-dotenv
プログラミング言語のフレームワークには、.envの情報を扱うパッケージが用意されているようです。python-dotenvは、pythonにおけるそれ。公式ドキュメント（ https://pypi.org/project/python-dotenv/ ） には、”Python-dotenv reads key-value pairs from a `.env` file and can set them as environment variables.”と書いてあるように、キーとバリューのペアを、プログラム内で読み込むために用いられます。

【使い方】

①読み込みメソッドである`load_dotenv`をimportする

**from dotenv import load_dotenv**

②`load_dotenv()`でファイルパスを取得する

同じ階層にある場合は、パスは不要です。別フォルダの場合は下記のように、osライブラリを用います。

**import　os
env_path = os.path.join(os.path.dirname(__file__),**パス**)
load_dotenv(env_path)**

③変数を取り出す

変数　＝**os.environ.get（環境変数のキー）**


## direnv
一言で言うと、フォルダごとに違う環境変数を読み込むときに便利なツールです。フォルダ内に.envrcというファイルを作っておくと、.envrcより下の階層に入った時にだけ、自動的に環境変数が読み込まれ、外の階層に出ると、自動的にunloadしてくれます。複数プロジェクトを扱っている時に、便利な機能のようです。

使い方は、下記サイトを参考にしました。

https://qiita.com/kompiro/items/5fc46089247a56243a62

https://blog.p1ass.com/posts/direnv-dotenv/
NonStopServerでのテーブル一覧取得

# NonStopServer テーブル一覧を取得する方法
## 目次
1. NonStopServerって何？
1. NonStopServerに接続
1. mxci起動
1. schema接続
1. 一覧取得SQL実行

## 1. NonStopServerって何？
見ていただいた方々、NonStopServerって何？って思いますよね？
私も、今の現場に入るまで、NonStopServerって何？って思ってました！
簡単に言いますと、HewlettPackard(HP社)が提供、販売している無停止コンピュータのシリーズです。
所謂、オンプレです。クラウドではありません。
詳しくは、こちらの記事をご覧ください↓
http://tinyurl.com/26eb5m2k

## 2. NonStopServerに接続
本題に入ります。
まずは、NonStopServerに接続しないと始まりません！
しかし、NonStopServerは、かなり高額です。
そのため、個人での導入は出来ません不可能です( ﾉД`)ｼｸｼｸ…。
試したい場合は、どこか導入された企業に入るか、現場での体験しかありませんので、ご了承くださいペコリ(o_ _)o))

### 接続方法
現場や、企業によって異なりますが、
私の現場では、TeraTermを使って、接続してました。

簡単な手順ですが、接続方法です。
1. TeraTermから、ログイン
1. Guardian設置サーバーに接続
1. TACLに接続
1. logon _**UserName**_
1. password _**input-password**_

_**UserName, input_password**_ の部分は、
ご自身のモノに置き換えてください。

これで、つながってるはず…。
繋がらない場合は、現場のリーダーさんとかに聞いてください。

## 2. mxci起動

接続したGuardianから、mxciに接続します。

:::note warn
**ご注意**
接続できない場合は、mxciに接続できない可能性があります。
その場合は、この手順では、出来ません。ご了承ください。
:::

1. \\SERVER $DATASC.USER 1> OSH
    接続できたら、以下のメッセージが出力されるはず...。

    ```log.
   : Starting bash shell 
    ```
2. mxci に接続
    以下のコマンドをGuardianから、Linuxベースになったコマンドラインへ入力
    ```cmd.
    : mxci
    ```
    以下のメッセージが出力されたら成功です！
    ```log.
    Hewlett Packard Enterprise NonStop(TM) SQL/MX Concersational Interface 3.5.1
    (c) Copyright 2003-2017 Hewlett Packard Enterprise Development LP.
    >>
    ```

## 3. schema接続

以下のコマンドを入力して、接続するSCHEMAを設定する
```cmd.
>> SET SCHEMA CATALOG.SCHEMA;
```
以下のログが出たら成功！
```log.
: --- SQL operation complete.
```

## 4. 一覧取得SQL実行
3.で設定したSCHEMAのテーブル一覧を取得するSQLはこちら!!

```sql
    GET ALL TABLES;
```

以上です。
閲覧いただきありがとうございました。
MiniAPI(八)：Log

この記事では、ログに関してよく使われるいくつかのポイントについて簡単に説明します。ログについては、後ほどサードパーティのログプロバイダーに重点を置いて説明します。
MiniAPIでは、メソッドやコンストラクター内で、フレームワークが自動的に注入したログのタイプを取得することができます。以下のようにします：
```C#
app.MapGet("/test", (ILogger<Program> logger) =>{
    logger.LogInformation(new EventId(1234), "Information");    
    return "ok";
});

public class LogDemoService{
    private readonly ILogger<LogDemoService> _logger;
    public LogDemoService(ILogger<LogDemoService> logger)
    {
        _logger = logger;
    }

    public void Demo01()
    {
        _logger.LogInformation("demo01");
    }
}
```
ログのレベル：
```C#
public enum LogLevel
{
    Trace,        
    Debug,
    Information,        
    Warning,
    Error,        
    Critical,
    None
}
```
Trace = 0、Debug = 1、Information = 2、Warning = 3、Error = 4、Critical = 5、None = 6。各ログレベルに対応するメソッド：LogTrace()、LogDebug()、LogInformation()、LogWarning()、LogError()、LogCritical()。
ログ設定：
ASPNETCORE_ENVIRONMENT環境変数が異なる値に設定されている場合、asp.net coreは異なる設定ファイルを読み込みます。Visual Studioで開発している場合、この変数は通常「Development」です。開発環境のログ設定はappsettings.Development.jsonです。
```json
"Logging": {
    "LogLevel": {
      "Default": "Debug",
      "Microsoft.AspNetCore": "Warning"
    }
}
```
本番環境のログ設定はappsettings.jsonです。
```json
"Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
}
```
Loggingの最初のレベルは通常、ログプロバイダーです。組み込みのプロバイダーには以下があります：
- コンソール
- デバッグ
- EventSource
- EventLog
- AzureAppServicesFile
- AzureAppServicesBlob
- ApplicationInsights

例えば、コンソールプロバイダーの設定は以下の通りです。IncludeScopesは、ログ出力時にスコープ情報を含めるかどうか、LogLevelは異なるカテゴリのログ出力レベルです。たとえば、デフォルトではInformation以上のレベルがコンソールに出力され、Microsoft.AspNetCoreはWarning以上のレベルが出力されます。自分の開発機能の低いレベルのログを重点的に出力するために、この設定を利用することができます。
```json
"Logging": {
    "Console": {
      "IncludeScopes": true,
      "LogLevel": {
        "Microsoft.AspNetCore": "Warning",
        "Default": "Information",
        "MiniAPICourse.Services": "Debug"
      }
    }
}
```
ログ設定に直接LogLevelを書く場合は、すべてのログプロバイダーに適用されます。例えばappsettings.Development.jsonとappsettings.jsonの設定方法です。
ログカテゴリー：
サービスコンテナからログを取得する際には、現在のクラス名、例えばLogDemoServiceを付ける必要があります。これが現在のログのカテゴリーで、この_loggerを使用するすべての出力にこのタイプの名前が付くことになります。
```C#
private readonly ILogger<LogDemoService> _logger;
```
![alt 画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRBmibewmWrCeyFjRW75abI3iblSbSM1qryuWtSWAbn4GNfTgKpYCMojRxkr4lVTiakUHYnWDDv6icPb5g/640?wx_fmt=png)
上の画像にあるタイプの後ろの[0]は、ログイベントIDであり、ログを出力する際にIDを指定できます。

(Translated by GPT)

元のリンク：https://mp.weixin.qq.com/s?__biz=MzA3NDM1MzIyMQ==&mid=2247484864&idx=1&sn=f37c2be0b2cb8cfe406e6f92d881945a&chksm=9f005aeaa877d3fcdac0f744c7d46ea5dc76f1605f4d6cf1131c5591a320cbf9baf1ae7b500d&token=2050451386&lang=zh_CN#rd
MiniAPI(七)：Middleware

HTTPプロトコルでは、クライアントからリクエストが発行され、サーバーが結果を応答して戻すというプロセスがあります。このリクエストの往復をリクエストパイプラインと抽象化すると、ミドルウェアはこのパイプライン上のバルブであり、流量の出入りと中断を制御します。各リクエストはミドルウェアのフィルタリングを受け、不適切なリクエストを除外し、適切なリクエストを通過させます。たとえば、ユーザー認証では、権限付与されたユーザーのみが通過し、権限のないユーザーは門外にとどまります。
![alt 画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRCdaup72zaaWq80wgaJcqUCxsbbzVgibyCekMBOyGbNsHOs2picfU1KaDLhngBKFZDEsX0aKSkj6ngQ/640?wx_fmt=png)
ミドルウェアの定義は非常にシンプルです：
```csharp
var builder = WebApplication.CreateBuilder();
var app = builder.Build();
app.Use(async (context, next) =>{
    //各種操作
    await next.Invoke();
});
app.MapGet("/test", () => "context");app.Run();
```
パラメータcontextを通して情報を取得し、通過させるか中断させるか判断します。もちろん、一部のミドルウェアは常に中断せず、リクエストの情報を収集するだけであり、たとえば監視のように、情報を収集するだけです。

ミドルウェアには順序があることが重要な特徴の一つであり、先に来たものが後になるように、実質的なリクエストチェーン上で、ミドルウェアはキュー内の要素のように機能します。最初にリクエストを受け取ったミドルウェアが最後にレスポンスを返すことになり、この特徴に注意する必要があります。特に、二つ以上のミドルウェアが依存関係にある場合は、前後の順序を正しく設定しなければなりません。そうでないと効果がないです。公式ドキュメントでは、公式ミドルウェアの使用順序に関するいくつかの提案が出されており、重要視されることを願っています。
```csharp
var builder = WebApplication.CreateBuilder();
var app = builder.Build();
app.Use(async (context, next) => {
    Console.WriteLine("{0}、第1のミドルウェアー前", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.FFFFFFF"));
    await next.Invoke();
    Console.WriteLine("{0}、第1のミドルウェアー後", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.FFFFFFF"));
});
app.Use(async (context, next) => {
    Console.WriteLine("{0}、第2のミドルウェアー前", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.FFFFFFF"));
    await next.Invoke();
    Console.WriteLine("{0}、第2のミドルウェアー後", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.FFFFFFF"));
});
app.MapGet("/test", () => "ok");app.Run();
```
結果は以下の通り：
![alt 画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRCdaup72zaaWq80wgaJcqUCibAvb8pe7zNc0laD7PHicV2NLHOVWtL2uomHmDIfpeEXsTwkibsIwe5Zg/640?wx_fmt=png)
カスタムミドルウェアタイプ
```csharp
public class ThirdMiddleware{
    private readonly RequestDelegate _next;

    public ThirdMiddleware(RequestDelegate next){
        _next = next;
    }

    public async Task InvokeAsync(HttpContext context){
        Console.WriteLine("{0}、第3のミドルウェアー前", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.FFFFFFF"));
        await _next(context);
        Console.WriteLine("{0}、第3のミドルウェアー後", DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss.FFFFFFF"));
    }
}

public static class ThirdMiddlewareExtensions{
    public static void UseThird(this WebApplication app){
        app.UseMiddleware<ThirdMiddleware>();
    }
}
```
利用は非常にシンプルです。以下の拡張メソッドを呼び出すだけで済みます。
```csharp
app.UseThird();
```
結果
![alt 画像](https://mmbiz.qpic.cn/mmbiz_png/4CAA63nvHRCdaup72zaaWq80wgaJcqUCAALOkusu1hf1N9MmgRWibBwiblutugcrYWtf8EH27UJ7yEXT8msn7ngg/640?wx_fmt=png)

(Translated by GPT)

元のリンク：https://mp.weixin.qq.com/s?__biz=MzA3NDM1MzIyMQ==&mid=2247484852&idx=1&sn=f14f0f510f2212101bc1f7d43fbf71c2&chksm=9f005a9ea877d388d0e2fd5f5fd749cf93f514f16bc9985249d1f495d1f834e67da1ec9ccea5&token=2050451386&lang=zh_CN#rd
Nextjs13(AppRouter)+TailwindCSSでNotoSansJPを使う方法

# 追加するコード

```diff_typescript
//layout.tsx

+ import { Noto_Sans_JP } from "next/font/google";


+ const notoSansJP = Noto_Sans_JP({
+  subsets: ["latin"],
+  variable: "--font-noto-sans-jp",
+ });


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" 
+    className={`${notoSansJP.className}`}
    >
        {/* 省略 */}
    </html>
  );
}

```
# 手順
・layout.tsxを開く
・Noto_Sans_JPを"next/font/google"からimport
・subsetsとvariableを設定
・htmlタグのclassNameに.classNameを入れる

# コピペ用
```typescript
import { Noto_Sans_JP } from "next/font/google";
```
```typescript
const notoSansJP = Noto_Sans_JP({
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
});
```
```typescript
className={`${notoSansJP.className}`}
```
---
###### 補足
`※classNameを{}で囲っているのはhtmlタグに他のoptionを追加する時のため。`
```typescript:例
className={`${notoSansJP.className} bg-black`}
```
UbuntuServerの公開鍵認証ログインの手順まとめ

## 公開鍵・秘密鍵の作成

以前に公開鍵と秘密鍵を作ったことがあってどこにあるかわかる人はここは飛ばしてよい。

ターミナル(PowerShellなど)の公開鍵を保存したい場所で以下のコマンドを実行。
※ssh_key_20240215は例なので設定したい鍵の名前を入力してください。

```
ssh-keygen -b 4096 -t rsa -f ssh_key_20240215
```

パスワードの入力（passphrase）を求められるのでパスワードを設定します。
※打った文字は表示されません。仕様です。

作ったディレクトリ内でディレクトリ内のファイル一覧を表示してkeynameとkeyname.pubが生成されてたらおっけいです。


## ログイン方法

必要な場合はVPN接続ができる状態にしておきます。
VPN接続についてはポータル内の配布物->学内システム操作マニュアル->VPNの利用方法からwindowsとMacと適切なほうを参照して設定しましょう。

公開鍵（.pubついてるほう）をServer管理者へ送信してください。
※秘密鍵は誰にも教えないこと。

Serverへの公開鍵の登録が終わったら
ターミナルの公開鍵・秘密鍵を保存したディレクトリ内で以下のコマンドを実行します。
※xxx.xxx.xxx.xxxに指定されたIPアドレスを入力してください。

```
ssh username@xxx.xxx.xxx.xxx -i .\keyname
```

username:Serverに登録されてるユーザーネーム
keyname:先ほど設定した鍵の名前

パスワードを入力してなんか聞かれたらyesを入力しましょう。

Welcome to Ubuntu ~~~がでてきたら接続成功です。
おつかれさまでした。
WindowsでMacと同じようなカーソル移動ショートカットを使いたい

普段Macを使用している大学院生です。
最近ゲーミングPCを購入したのですが、Windowsのショートカットが使いにくかったためMacと同様の配置にしてみました。
# AutoHotKeyを使う
AytoHotKeyでは自分用のコマンドを作成できます。
概要と導入方法はこれ見たらわかります。
<a href="https://qiita.com/chr/items/47f50e36703d3bb20371" target="_blank" rel="noopener noreferrer">[Qiita] Windows10へAutoHotkeyの導入（キーマップの変更）</a>

### カーソル移動ショートカット
今回作成したカーソル移動コマンドは以下の４つです。Macの⌘をCtrl、OptionをAltで同様のコマンドを作成しました。

| 操作     | コマンド          | 
| :--------------: | :---------------: | 
| 行端に移動       | Ctrl + →(←) | 
| 先頭・末尾に移動 | Ctrl + ↑(↓) | 
| 単語ごとに移動   | Alt + →(←)  | 
| 段落の先頭に移動 | Alt + ↑(↓)  | 

また、これらのコマンドをShiftを押しながら入力することで、範囲選択を行うこともできます。

### その他のコマンド
追加で、私が普段Macで使っている以下の3つコマンドも作成しました。

| 操作     | コマンド          | 
| :--------------: | :---------------: | 
| ブラウザのタブ移動       | Ctrl + Alt + →(←) | 
|  ブラウザページのUndo、Redo  |  Ctrl + Shift + [ ( ] )  |
| "もとに戻す"のやり直し(Redo) | Ctrl + Shift + Z | 

以下スクリプトです。
こいつをメモ帳に張り付けて.ahkで保存し、AutoHotKeyで実行すると使えるようになります。

```:cursor\movement.ahk
;macと同じカーソル移動を実現するスクリプト
;^はCtrl、+はShift、!はalt



;「Ctrl + →(←)」で行端に移動するスクリプト

^Right::
SendInput, {End}
return

^+Right::
SendInput, +{End}
return

^Left::
SendInput, {Home}
return

^+Left::
SendInput, +{Home}
return


;「Ctrl + ↑(↓)」で先頭・末尾に移動するスクリプト

^Up::
SendInput, ^{Home}
return

^+Up::
SendInput, ^+{Home}
return

^Down::
SendInput, ^{End}
return

^+Down::
SendInput, ^+{End}
return


; 「Alt + →(←)」で単語ごとに移動するスクリプト

!Left::
    SendInput, ^{Left}
return

+!Left::
    SendInput, ^+{Left}
return

!Right::
    SendInput, ^{Right}
return

+!Right::
    SendInput, ^+{Right}
return


;「Alt + ↑(↓)」で段落の先頭に移動するスクリプト

!Up::
    SendInput, ^{Up}
return

+!Up::
    SendInput, ^+{Up}
return

!Down::
    SendInput, ^{Down}
return

+!Down::
    SendInput, ^+{Down}
return



; ブラウザのタブ移動:「Ctrl + Alt + →(←)」

^!Left::
    SendInput, ^+{Tab}
return

^!Right::
    SendInput, ^{Tab}
return


; ブラウザページのUndo、Redo:「Ctrl + Shift + [(])」

^+[::
    SendInput, !{Left}
return

^+]::
    SendInput, !{Right}
return


; 元に戻す(Ctrl + z)のやり直しを「Ctrl + Shift + Z」で行うスクリプト
^+z::
SendInput, ^{y}
return

```
No 'Access-Control-Allow-Origin' header is present on the requested resource.


+ [Implementation Pardot Tracking and ConsensAPI Call on Lightning Web Runtime Template in Experience Cloud](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007Z9vTr)

:::note
I checked CORS in Salesforce Setting, and I added to 'https:XXXXX.com'

Maybe CORS Errors seemed to disapear.
:::

+ [CORS error moving bot to new environment](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007X8wh0)

:::note alert
Access to XMLHttpRequest at 'https://sandboxname.sandbox.my.salesforce-sites.com/embeddedService/sidebarApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT&guestUserLang=en-US&eswConfigDeveloperName=Purl_Pages_Helper' from origin 'https://testenvironment2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:::

:::note
I think you need to configure settings to add response headers as shown below.
Can you add settings to the web server?
 
```
Access-Control-Allow-Origin: https://testenvironment2.com
```

:::


# SAP

+ [SAP Hybris Web to Lead CORs error](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ZC7UV)

:::note alert
Access to XMLHttpRequest at '
https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8&orgId=0000000000000'
from origin '
https://xyz.com.au
' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
:::

+ [What does same origin policy mean when trying to submit a Web to lead form via AJAX? [closed]](https://salesforce.stackexchange.com/questions/335060/what-does-same-origin-policy-mean-when-trying-to-submit-a-web-to-lead-form-via-a)

どうすれば修正できますか?
ドメイン B のサーバーの所有者/コントローラーのみ。salesforce.com がこれらのサーバーを運用しており、CORS を許可するとセキュリティ/プライバシーのリスクがあると判断したため、Web-to-Lead ではこのアクセスを許可しません。使用しているドメインを変更しても問題は解決しません。

これを修正することはできないため、別の解決策は、管理するプロキシ サーバーを使用することです。これは、開発しているのと同じサイトである場合もあれば、ヘッダーを追加してAccess-Control-Allow-Originそのサービスが処理のためにリクエストを salesforce.com のサーバーに転送することによって CORS を特別に許可するプロキシである場合もあります。
enumの使用方法

### **enumとは？**

enum（enumeration: 列挙）は、名前を整数の定数に割り当てるのに使われるデータ型です。(列挙型というみたいです。)

名前は言語の定数として振る舞う識別子なので、整数を直に扱う場合よりもプログラムの読みやすさとメンテナンス性が向上します。

例：:publicを0、:draftを1として、0や1で状態を定義できる

### 使い方

例として、article(記事)というモデルにstatus(状態)というカラムを作成し、それをenumを使って表します。

デフォルトで0(draft)になるように設定してます。

### カラム作成

```ruby
class CreateArticles < ActiveRecord::Migration[6.0]
  def change
    create_table :articles do |t|
      # 他のカラムの定義
      t.integer :status, default: 0

      t.timestamps
    end
  end
end
```

### modelでenumの設定

記事が、下書き中、公開、非公開といった感じで状態分けしてます。

```ruby
class Article < ApplicationRecord
  enum status: { draft: 0, public: 1, private: 2 }
end
```

ハッシュ以外にも配列で定義することも可能です。

### 使用例

```ruby
# Articleを作成して保存する
article = Article.new(status: :draft)
article.save

# 作成したArticleの状態を確認する
article.status
=> "draft"

# 状態を変更して保存する
article.public!
article.save

# 状態が変更されたことを確認する
article.status
=> "public"

# 番号から状態を取得する
Article.statuses[0]
=> "draft"

Article.statuses[1]
=> "public"

Article.statuses[2]
=> "private"

```

### 日本語化することも可能

例えば、config/locales/ja.ymlというファイルを作成し、以下のように定義します。

```ruby
ja:
  enums:
    article:
      status:
        draft: "下書き"
        public: "公開"
        private: "非公開"
```

このように定義することで、Articleモデルのstatus列に対して、draftが”下書き”、publicが”公開”、privateが”非公開”という日本語の表現が適用されます。

例えば、以下のようにビューファイルで設定し、@article_statusが:draftの場合、ビューで表示される内容は`状態: 下書き`のようになります。
```ruby
<p>
  状態: <%= t("enums.article.status.#{ @article_status }") %>
</p>
```
フルリモートの開発チームが実践する、生産性を爆上げする朝会の秘訣

## はじめに
私は現在、金属加工の商取引プラットフォーム「Mitsuri」の開発チームでプロダクトマネージャー（PdM）を務めています。

Mitsuriチームでは、アジャイル開発の手法の一つであるスクラムを採用しており、毎朝全員で進捗を共有するデイリースクラム（以下、朝会）を行っています。

タイトルにもあるのですが、弊社はフルリモート勤務制を取っており、実際に顔を合わせるのは月に一度程度で、それも任意で集まる時となっています。

今回は、そんなフルリモートのチームで行っている朝会の内容について紹介したいと思います。

## 朝会の目的
朝会の主な目的は、
チーム全員が朝会後、スムーズに作業に取り掛かれるような状態となることです。

## 環境について
朝会の際は、Slackのハドルに集まります。

カメラを入れるかは任意ですが、入れている人は基本いないです。

タスクはAsanaのボードを使用してカンバン形式で管理しています。
以下のようなセクションを設けています。

- アイデア・バグ報告
- 議論したい
- TODO
- 品質改善
- 対応中
- 対応済
- やらない

スクラムマスターが画面共有で、Asanaのボードを映しながら朝会を進行していきます。

## 朝会で話し合う内容について

### 1. 新しく発生したイシュー
「アイデア・バグ報告」にはCSチームからのバグ報告や、チーム内で提起されたアイデアなどが上がってきます。
これらのタスクについて、全員で内容を共有し確認します。

確認したらスクラムマスターが、そのタスクを別のセクションに振り分けて行きます。

もう少し議論したいものは「議論したい」、対応することが決定したものは「TODO」、すぐ着手し始めるものは「対応中」、不必要と判断したものは「やらない」に移動します。

「議論したい」は、週一回の開発、CS、マーケ等のチームが集まる全体定例で、もう少し深掘ります。

日にもよりますが朝会では、大体いつも1〜4個のタスクを確認しています。


### 2. 今日のタスク
各自が今日取り組むタスクと、その目標についてざっくりと共有します。
これにより1日のゴールを明確にします。


### 3. 現在困っていること
- 今なにで困っているのか
- それはどうすれば解消できるのか
- 解消不可能な場合どうするか
などを話し合います。

すぐに解決できなさそうな場合は、朝会終了後に個々で話します。


## 少しの雑談時間を設ける
一般的にアジャイル開発で行われる朝会は、1日1回、15分程度のミーティングと言われています。
弊社はメンバーがフルリモート勤務のため、さらに+15分程度の雑談時間を設けています。
これによって、メンバー間のコミュニケーションを促進し、日々の業務をスムーズに進めることを目指しています。

## おわりに
Mitsuriチームでは、この朝会を半年間続けており、その間にクリティカルなタスクの遅れが発生することはありませんでした。

朝会は油断すると形骸化してしまうことがありますが、目的意識を持って取り組むことで、生産性を飛躍的に高めることができると思います。
チームにとっての最適解もさまざまですので、色々と試行錯誤するのも一つの楽しみだと思います。

この記事が皆さんの参考になれば幸いです。
【React】App.jsの構成

# App.jsの構成
`App.js`は、多くのReactプロジェクトで使用されるエントリーポイントの1つです。通常、`App.js`はReactアプリケーションの最上位のコンポーネントとして機能し、その中に他のコンポーネントを含むことができます。

`App.js`の構成はプロジェクトによって異なりますが、一般的には次のような構成になることがあります：

1\. **必要なモジュールのインポート**
- `react`や`react-dom`などのReact関連のモジュールをインポートします。
```jsx
import React from 'react';
```

2\. **コンポーネントの定義**
- `App`コンポーネントを定義します。これは通常、`class`または`function`として定義されます。
```jsx
function App() {
  return (
    <div>
      {/* 他のコンポーネントを含める */}
    </div>
  );
}
```

3\. **他のコンポーネントのインポートと配置``
- `App`コンポーネント内で他の必要なコンポーネントをインポートし、配置します。
```jsx
import Header from './Header';
import MainContent from './MainContent';
import Footer from './Footer';
```

4\. `App`コンポーネントのエクスポート:
- `App`コンポーネントをエクスポートして、他のファイルで使用できるようにします。
```jsx
export default App;
```

# まとめ
`App.js`は通常、アプリケーション全体のレイアウトや構造を定義し、他のコンポーネントを組み合わせてUIを構築するための場所です。各コンポーネントは独自の役割を果たし、それらを`App.js`内で組み合わせることで完全なReactアプリケーションが形成されます。
【React】propsとは

# propsとは
`props`は、Reactコンポーネントに渡されるデータの受け渡しメカニズムです。`props`を使用することで、親コンポーネントから子コンポーネントにデータを渡すことができます。`props`は読み取り専用であり、子コンポーネント内で変更することはできません。

`props`はJavaScriptのオブジェクトとしてコンポーネントに渡され、コンポーネント内の`this.props`を通じてアクセスされます。`props`は、コンポーネントのインスタンス化時に指定され、そのコンポーネントが描画される際にそのまま使用されます。

# 使用方法
以下は、propsを使用して親コンポーネントから子コンポーネントにデータを渡す例です：
```jsx
import React from 'react';

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}
```
上記の例では、`ParentComponent`が`ChildComponent`に`message`という名前の`props`を渡しています。`ChildComponent`内では、`props.message`を使用して渡されたデータにアクセスし、それを表示しています。

# まとめ
`props`は、コンポーネント間でデータを受け渡すための重要なメカニズムです。親コンポーネントから子コンポーネントへのデータの受け渡しや、コンポーネントの動的な構築に使用されます。
【React】コンポーネントとは

# コンポーネントとは
コンポーネントは、UIを構築するための再利用可能なビルディングブロックです。コンポーネントは、UIの一部を表し、独自の状態を管理し、必要に応じてレンダリングされます。Reactでは、コンポーネントを使用してUIを階層的に構築し、複雑なUIをより小さな部分に分割して管理することができます。

Reactのコンポーネントには、以下の2つの主要なタイプがあります：

1\. **クラスコンポーネント**
- クラスコンポーネントは、React.Componentクラスを継承して作成されます。
- `render()` メソッド内でUIを定義し、`this.state` を使用して状態を管理します。
- ライフサイクルメソッド（例：`componentDidMount`、`componentDidUpdate`）を使用して、コンポーネントのライフサイクルイベントに応答します。
```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}
```
2\. 関数コンポーネント:
- 関数コンポーネントは、単純なJavaScript関数を使用して作成されます。React Hooksを使用することで、関数コンポーネントでも状態やライフサイクルの機能を利用できます。
- 関数コンポーネントは `return` 文で UI を返します。
```jsx
import React from 'react';

function MyComponent() {
  return <div>Hello, World!</div>;
}
```
コンポーネントは、ユーザーインターフェースのさまざまな部分を表すために使用されます。例えば、ヘッダー、フッター、ナビゲーションメニュー、ボタン、フォームなど、UI内のどんな機能的な部分もコンポーネントとして表現することができます。これにより、コードの再利用性が向上し、メンテナンスが容易になります。
【React】stateとは

# stateとは
`state`は、Reactコンポーネント内で管理される内部の状態を表します。`state`は、コンポーネントの動的なデータを保持し、そのデータの変更に応じてUIが更新されるようにします。Reactの`state`は、コンポーネントが自身の状態を管理し、状態に基づいてUIを変更する際に非常に役立ちます。

`state`は、Reactのクラスコンポーネントや、React Hooksを使用して関数コンポーネントで管理されることができます。`state`は以下の特徴を持ちます：

1\. **コンポーネント固有の状態** : `state`は、それが定義されたコンポーネント内でのみアクセス可能です。他のコンポーネントからは直接アクセスできません。

2\. **可変性** : `state`は変更可能なデータです。コンポーネント内の`state`が変更されると、Reactは自動的にUIを再レンダリングして変更を反映します。

3\. **this.setState()メソッド** : `state`を更新するためには、`this.setState()` メソッドを使用します。このメソッドを使用して新しい状態を指定し、Reactにその変更を適用するように指示します。

# 使用方法
例えば、以下のようにしてstateを定義することができます：
```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}
```
上記の例では、`state`に`count`というプロパティを持つオブジェクトが定義されています。`render`メソッド内では、`state.count`の値が表示され、ボタンがクリックされると`count`の値がインクリメントされるように`setState`メソッドが呼び出されます。これにより、ボタンがクリックされるたびにUIが更新され、新しい値が表示されます。
【React】handleClick メソッドとonClickメソッドの違い

# handleClickメソッドとonClickメソッドの違い
`handleClick` メソッドと `onClick` メソッドは以下の違いがあります。

1\. **handleClick メソッド**
- `handleClick` メソッドは、Reactコンポーネント内に定義されるJavaScript関数です。
- 通常、UIイベント（例：クリック）が発生したときに呼び出されます。
- これは単なるJavaScript関数であり、Reactに特有の機能ではありません。

2\. **onClick メソッド**
- `onClick` メソッドは、Reactの要素（例：ボタン）に設定されるプロパティ（属性）です。
- これは、要素がクリックされたときに実行される関数を指定するための特別な属性です。
- `onClick` メソッドには通常、`handleClick` メソッドや他の関数が渡されます。

例えば、以下のコードでは、onClick メソッドに handleClick メソッドが渡されています。
```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}
```
この例では、`handleClick` メソッドがボタンがクリックされたときに実行されますが、実際に呼び出されるのは `onClick` メソッドです。`onClick` メソッドは、ボタンがクリックされたときに `handleClick` メソッドを呼び出すためのものです。
【React】handleClickメソッドとは

# handleClickメソッドとは
Reactでよく見られる命名規則の1つが、イベントハンドラー関数に `handle` という接頭辞を付けることです。例えば、ボタンがクリックされたときの処理を行う関数を `handleClick` と命名することがあります。

`handleClick` メソッドは、通常、クリックイベントなどのUIイベントが発生したときに呼び出される関数です。これはReactコンポーネント内に定義され、そのコンポーネントが持つ状態を更新したり、他のコンポーネントとのやり取りを行ったりするために使用されます。

例えば、以下のようなコードでは、ボタンがクリックされたときに `handleClick` メソッドが呼び出されます。
```jsx
import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}
```
この例では、`handleClick` メソッドはボタンがクリックされたときに `console.log` を使用してコンソールにメッセージを出力します。実際のアプリケーションでは、通常、`handleClick` メソッド内でより複雑なロジックが実行され、コンポーネントの状態を変更したり、他のコンポーネントとのやり取りを行ったりします。