OmniAICreator/Qiita-1.07M huggingface dataset:
Djangoで作ったWebアプリをデプロイした際に起きた、gunicornが理由の500番台エラーの解消

<h1>はじめに</h1>

ロリポップマネージドクラウドを利用し、djangoで作ったアプリをデプロイした際に５００番代のエラーが起きた。

結論から言うと、**gunicorn** が起動していないことが原因だった。

解決法は難しくないが、勉強にもなったので忘備録として残したい。

<h1>エラー解決手順</h1>

まず、デプロイに関しては
[[Python] Django を使用したWebアプリの作成](https://support.mc.lolipop.jp/hc/ja/articles/360011824713--Python-Django-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9FWeb%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E4%BD%9C%E6%88%90)
こちらのロリポップ公式が書いてくれている記事を参考にすれば、そこまで問題はなかった。

ただ、この記事の **7. 起動コマンドの変更** という章に、起動コマンドとして

``/var/app/shared/bin/gunicorn --bind=0.0.0.0:8080 --chdir=/var/app/current app.wsgi:application``

と書かれているが、このappの部分は自分の**wsgi.py**や**settings.py**を含んでいるフォルダ名を書く必要がある。

自分はこれに気付かずエラーが起きていた。

<h1>おわりに</h1>

Gunicornはwebサーバ（Nginxなど）とwebアプリを仲介する役割を持つ。

今回はこのGunicornが起動していないことでエラーが起きていた。初歩的なミスだったが、似たような状況の人の参考になれば嬉しい。
どれかにピンときたらエンジニアになろう！

# どんな人が向いてますか？
エンジニアにどんな人が向いてますか？
と聞かれます。
エンジニアには誰でもなれます。
ただ30年みてきて伸びてるエンジニアの特徴があります。

![インスタスライド_202301281.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/b9c36715-1421-d0b3-6720-20b7a41fbf21.gif)


# 特徴１
コンピュータとか機械とかガジェットが大好き
→　新しいスマホが大好きだたっり、Appleのアナウンスとか夜中みちゃう人

# 特徴2
新しいものが大好き
→　ChatGPTが出たらそればっかり調べたり、新しい技術が出るとすぐに食いついちゃう人

# 特徴3
考えるのが大好き
→　ニュースとか読んだりした時、そのまま受け取らず自分なりの解釈をしてしまう、ひろゆき的な人

# 特徴4
困った人を助けたい
→　分からない事があって困ってる人がいたら、自分が忙しくても関わって一緒に解決、ヒーローな人

# 特徴5
集中力が高い
→　ゲームや趣味等でやり始めると自分が納得するまで時間を忘れてやり込める人

# まとめ
エンジニアに向いてる人

ーコンピュータとか機械とかガジェットが大好き
ー新しいものが大好き
ー考えるのが大好き
ー困った人を助けたい
ー集中力が高い

# 最後に
未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
PowerShellでローカルネットワーク内のPCから情報を取得する

## はじめに
社内ネットワークの大量のPCからスペックなどの情報を取得する際にいろいろと調べたので覚え書きです。PowerShellで[Get-WmiObject](https://learn.microsoft.com/ja-JP/powershell/module/microsoft.powershell.management/get-wmiobject?view=powershell-5.1)コマンドを使用し取得します。

PC名またはIPが分かる状態を前提にしています。テスト時のOSはWindows10, 11です。
`-computername <PC名またはIP>`を省略すると自身の情報を取得します。


## コンピュータ名
```powershell
(Get-WmiObject Win32_ComputerSystem -computername "PC名").Name
# 結果:
# PC名
```

## モデル
```powershell
(Get-WmiObject Win32_ComputerSystem -computername "PC名").Model
# 結果:
# B460M
```

## マザーボード
```powershell
(Get-WmiObject Win32_BaseBoard -computername "PC名").Manufacturer
(Get-WmiObject Win32_BaseBoard -computername "PC名").Product
# 結果:
# MouseComputer
# B460M
```

## IPアドレス
```powershell
(Get-WmiObject Win32_NetworkAdapterConfiguration -computername "PC名").IPAddress
# 結果:
# XXX.XXX.XXX.XXX
```

結果表示だけ見るとIPアドレスがStringで1つだけ返ってきている風ですが実際はリスト（Object[]）だったりします。
```powershell
(Get-WmiObject Win32_NetworkAdapterConfiguration -computername "PC名").IPAddress.GetType().Name
# 結果:
# Object[]
```

この場合は何番目に入っているか分からないので、`foreach`で取り出してみます。
```powershell
foreach ($ip in ((Get-WmiObject Win32_NetworkAdapterConfiguration -computername "PC名").IPAddress)) {
	if ($ip -ne $null) {
		$IPAddress = $ip
	}
}
echo $IPAddress
# 結果:
# XXX.XXX.XXX.XXX
```

## OS
```powershell
(Get-WmiObject Win32_OperatingSystem -computername "PC名").Caption
# 結果:
# Microsoft Windows 11 Home
```

## CPU
```powershell
(Get-WmiObject Win32_Processor -computername "PC名").Name
# 結果:
# Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
```

## RAM
```powershell
[int](((Get-WmiObject Win32_ComputerSystem -computername "PC名").TotalPhysicalMemory)/1GB)
# 結果:
# 32
```

```powershell
$Capacitys = (Get-WmiObject Win32_PhysicalMemory -computername "PC名").Capacity
for ($i = 0; $i -lt $Capacitys.length; $i++) {
	$Capacitys[$i] = [int]($Capacitys[$i]/1GB)
}
echo $Capacitys
# 結果:
# 16
# 16
```

## グラフィックカード
```powershell
(Get-WmiObject Win32_VideoController -computername "PC名").name
# 結果:
# NVIDIA GeForce RTX 3060
```

## ネットワークアダプタ
```powershell
(Get-WmiObject Win32_NetworkAdapter -Filter "NetConnectionStatus = 2" -computername "PC名").Name
# 結果:
# Intel(R) Ethernet Connection (12) I219-V
```

## ローカルディスク
```powershell
Get-WmiObject Win32_LogicalDisk -Filter "DriveType = 3" -computername "PC名"
<# 結果:
DeviceID     : C:
DriveType    : 3
ProviderName :
FreeSpace    : 171501187072
Size         : 510781288448
VolumeName   : Windows

DeviceID     : D:
DriveType    : 3
ProviderName :
FreeSpace    : 955082768384
Size         : 2000382062592
VolumeName   :
#>
```

```powershell
$LocalDisk = Get-WmiObject Win32_LogicalDisk -Filter "DriveType = 3" -computername "PC名"

if ($LocalDisk.GetType().Name -ne "Object[]"){
	$LocalDisk = @($LocalDisk)
}

for ($i = 0; $i -lt $LocalDisk.length; $i++) {
	$LocalDisk[$i] = ($LocalDisk[$i].DeviceID + " " + [int]($LocalDisk[$i].FreeSpace/1GB) + " GB/" + [int]($LocalDisk[$i].Size/1GB) + " GB")
}

echo $LocalDisk
# 結果:
# C: 160 GB/476 GB
# D: 889 GB/1863 GB
```


:point_down:以上を使いやすいように関数にまとめたものはこちら！:point_down:

https://gist.github.com/akasaki1211/f2b2cf5c58991b6d205f4e03c6735d8a
[Rails7]kaminariを実装するときに起きたエラーと対処法

# エラー1つ目
https://qiita.com/mmaumtjgj/items/771deb2f3da3eecb4f54

こちらの記事を参考にpagenate機能を実装しようとしていたところ、undefined method `page' for #<User::ActiveRecord_Relation...というエラーがでてしまい、ググって直してみたが直らなかった。そこで再起動してみたら、行けた。
kaminariを実装するときは再起動をしましょう。

# エラー2つ目
先ほどの記事の

    def index
     @boards = Board.all.includes(:user).order(created_at: :desc).page(params[:page])
    end

のところでこのまま実装するとページネーションができなかったが、

    includes(:user)

を消したら行けた。理由は分からない。
for文の条件式に、count()等のサイズを取得するメソッドを使用すると処理速度が遅くなる

# 概要
for文を書いた際、静的解析で何故か指摘されたので、PHPの公式リファレンスを見ていたら、条件式の部分に`count()`メソッド等のサイズを取得するメソッドを記述しない方が良いと記載がありました。条件式の部分に、配列のサイズを取得するメソッドを使用すると毎回サイズを取得する為、速度が遅くなるみたいです。この件は初めて知る内容だったので、備忘録も兼ねて記事にまとめました。

# 従来の書き方
for文でループ処理を書く際、条件式の部分に`count()`等のメソッド使い、配列等の最大値を取得するメソッド記述しているかと思われます。
私も、今まででしたら１行でもコードを減らして書きたい派なので、下記の記述でfor文を書いていました。
`（下記に参考式）`
```php
# for文の定義
for (初期値; 条件式; 増減式)｛
    # 処理
}
 
# 一般的なfor文の書き方
$test = [
    0 => 'aaa',
    1 => 'bbb',
    2 => 'ccc',
];

# count()メソッドを使い配列の最大値を取得
for($i = 0; $i < count($test); ++$i) {
    # 処理
}
```

この書き方は、繰り返し処理が発生する度に、条件式を毎回読み込む処理が発生する為、処理速度が落ちるそうです。
上記の問題を解決する為には、下記の記述で問題は解消されます。

## パターン１の書き方
```php
$test = [
    0 => 'aaa',
    1 => 'bbb',
    2 => 'ccc',
];

$countMax = count($test)
for($i = 0; $i < $countMax; ++$i) {
    # 処理
}
```

## パターン2の書き方
```php
$test = [
    0 => 'aaa',
    1 => 'bbb',
    2 => 'ccc',
];

for($i = 0, $size = count($test); $i < $size; ++$i) {
    # 処理
}
```
公式リファレンスでは、パターン2の書き方が推奨されています。
個人的は、パターン1で書く方がfor文も見やすいので、オススメかとは思います。


# 感想
今回の件を知った時は、目から鱗状態でした。公式のドキュメントやリファレンスを見ると思わぬ発見があるので、今後も目を通していきたいと思います。


# 参考資料
- [[PHP 公式リファレンス] for文 ](https://www.php.net/manual/ja/control-structures.for.php)
php.iniの設定を変更して同時接続可能数を増やす

## 同時接続可能数を増やすには？
webアプリの同時接続可能数を増やすには、コードの最適化をしてデータベースアクセス回数を減らしたり、AWSを使用している場合であれば、スペックの高いインスタンスを使ったり、ロードバランサーを導入したり、コンテナ技術を使用してアプリケーションをコンテナ化するなど様々なアプローチが考えられますが、今回はphpの設定ファイルの内容を変更することで多少なりとも、同時接続可能数を向上させる方法について書いていきたいと思います。

## php.iniの変更するべき設定
- max_execution_time
スクリプトの最大実行時間を設定できる
- max_input_time
PHPスクリプトが入力を受け付ける最大時間を設定できる
- memory_limit
PHPスクリプトが使用できる最大メモリ量を設定できる
- post_max_size
PHPが受け取ることができる最大POSTデータサイズを設定できる
- upload_max_filexize
PHPがアップロードできる最大ファイルサイズを設定できる
- max_file_uploads
PHPがアップロードできる最大ファイル数を設定できる
- max_input_vars
PHPが受け入れることができる最大入力変数数を設定できる
- max_input_nesting_level
PHPが受け入れることができる最大入力階層数を設定できる
- max_children
PHP-FPMの最大プロセス数を設定できる


これらの設定を変更すると多少なりとも同時接続数を増やすことができるかもしれません。
また設定を変更する前にテストして、適切な値を調べておくことをおすすめします。
それから、アプリによってはこれらの設定を変えても、同時接続数の向上につながらない場合もあるっぽいです。
【Unity】知っていればよかった神技術！！　- Immersal編 -

![immersal2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3118254/0312f6c8-0d03-8306-fe9f-0d18ba4efef3.png)

# はじめに
僕は、都内の某私立<font color="red">文系</font>大学生の１年生です。
UnityとC#でARコンテンツ開発を主として活動しており、サブでWebアプリ開発も行っています。僕についての紹介はこちらから！
https://qiita.com/RyuseiItoh/items/80cc0f3c419b0d5a5e6b

# immersalってな～にっ！！
こちらの記事に簡潔にまとめたのでよかったら見て欲しいですっ！！
https://qiita.com/RyuseiItoh/items/0f92434eccd141ce7ee4
## Immersalとは！
なんて読むの～って方もいるかと思いますがImmersalは**イマ―サル**って読みます！！
**いったい何者！！**
ざっくりいうと「**ARクラウドサービス**」というものです！
現在では、スウェーデンの大企業であるヘキサゴンが提供しているアプリケーションです！
以前は、フィンランドのImmersal社が運営していたのですが買収されてしまいました！


### ざっくり解説！
このアプリケーションは簡単に言うと、
**「部屋をデータ化して取り組み開発することができるものです！」**
この説明ではあんまりわかんないかなと思うので例を挙げちゃいます！

Immersalアプリで部屋の写真をある規則にのっとって撮りまくります！！
それで、解析に出しデータをUnityに取り組み開発することで、
部屋の中に好きなキャラクターなどを表示することができるのです！！

　　　　　　　　　　　　　　　　〇この動画をご覧ください！
<iframe width="560" height="315" src="https://www.youtube.com/embed/h3XCgbu7PcM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

お判りいただけましたか！！
このように簡単に**夢のような開発**が出来てしまうんです！！

# もっと簡潔に教えて！！
そんな声にお応えしてざっくりフロー書いちゃいます！！

**①アプリインストール　→　②写真撮る　→　③写真を解析に出す
　→　④Unityに取り込む　→　⑤開発　→　⑥ビルド**

こちらです！！簡単でしょう！！

### ①アプリのインストール
こちらからダウンロードできます！<font color ="red">※スマホ用です！！</font>
**iOS**
https://apps.apple.com/jp/app/immersal/id1361141085

**Android**
https://play.google.com/store/apps/details?id=com.immersal.sdk.mapper&hl=ja&gl=US&pli=1

### ②写真撮影方法
こちらの記事から確認できます！
https://xn--rlimmersal-d23izgyguq.gitbook.io/sdk/tutorials/how-to-map

日本語じゃなく、わかりにくいので説明入れます！！

１、先ず部屋の隅っこに立ちます！
２、次にスマホアプリ内で写真を１枚とります！
３、上下にスマホを移動させて上１枚＋真ん中１枚＋下１枚の写真撮ります！！
４、１つの場所で計３枚写真を撮ったら、少しだけ横に動いて同じことを繰り返します！
<font color ="red">※ここで注意！！</font>
上下に写真を撮っていくとき、移動して写真を撮るとき、前とった写真と同じ風景が映っていないとエラーになります！！少しずつスマホを動かして取りましょう！！

５、１周その調子で撮りまくります！

### ③写真を解析に出す！
先ほど撮った写真を、解析に出します！！

アプリ内右下の線に丸が刺さっているような絵が３つあるボタンを押すと
下に**Submit for Map Construction**というボタンがあるのでそこを押します！
<font color ="red">※ここで注意！！</font>
全ての写真が撮影画面の上に表示してある「**In Queue**」から「**Uploaded images**」に移行したことを確認してから行ってください！！
するとサーバー上で解析が始まり、Webサイト上でデータが貰えます！！

こちらのURLから飛べます！！
https://developers.immersal.com/
このサイトで自分が出したデータを取得してUnityに取り込みます！！

取り込み方は長くなってしまうのでもし、
**いいねとストックが多かったら今度別途記事書こうと思います！！**



# おわりに
皆さんいつも最後までお読みいただきありがとうございます！
昨日の記事のビュワーが多くてとても嬉しかったです！！

今回は<font color ="green">**Immersal**</font>の技術の紹介や使い方について書きました！！
僕自身現在この技術を使ってハッカソン開発行っているので
わからないことがあればコメントとか<font color ="blue">**Twitter**</font>で気軽に聞いてください！！

是非<font color ="red">**フォロー**</font>と<font color ="red">**いいね！**</font>をしてくださると喜びます！！
それでは皆さん！！また明日！！
M5Stack: New Relic にメトリクスを送信する

## 概要

M5Stack でセンサーから取得した値を、テレメトリデータプラットフォームである [New Relic](https://newrelic.com/) に送信します。収集したデータをもとに、ダッシュボードで閲覧、閾値をもとにアラートしたり、API で取得して活用することができます。一人で使用するなら毎月 100 GB まで、13 ヵ月間のデータを無料で保存できます。

## Metric API

New Relic にメトリクスを送信するための各種 SDK やエージェントが存在しますが、以下の WebAPI を呼ぶのがシンプルです。

[Report metrics via the Metric API](https://docs.newrelic.com/docs/data-apis/ingest-apis/metric-api/report-metrics-metric-api/)

curl で呼ぶ場合の例

```shell
NEW_RELIC_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
METRICS_NAME=test
METRICS_VALUE=30
NAME=test
curl -X POST "https://metric-api.newrelic.com/metric/v1" \
    -H "Api-Key: ${NEW_RELIC_API_KEY}" \
    -H "Content-Type: application/json" \
    --data "[
        {
            \"metrics\":[
                {
                    \"name\": \"${METRICS_NAME}\",
                    \"type\": \"gauge\",
                    \"value\": ${METRICS_VALUE},
                    \"timestamp\": $(date +%s),
                    \"attributes\": {\"name\": \"${NAME}\"}
                }
            ]
        }
    ]"
```

## 実装例

送信処理

```c
#include <Arduino.h>
#include <HTTPClient.h>

#define NEW_RELIC_API_KEY "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

void sendMetrics(time_t timestamp, const char *metricsName, float metricsValue, const char*name)
{
  HTTPClient http;
  char body[128];

  http.begin("https://metric-api.newrelic.com/metric/v1");
  http.addHeader("Content-Type", "application/json");
  http.addHeader("Api-Key", NEW_RELIC_API_KEY);
  sprintf(body,
    "[{\"metrics\": [{\"name\": \"%s\", \"type\": \"gauge\", \"value\": %f, \"timestamp\": %ld, \"attributes\": {\"name\": \"%s\"}}]}]",
    metricsName, metricsValue, timestamp, name
  );
  http.POST(String(body));
  http.end();
}
```

センサーデータを取得して送信する場合の例

```c
#include <SHT3X.h>
#include <QMP6988.h>

void loop()
{
  SHT3X sht30;
  QMP6988 qmp6988;
  time_t ts = time(nullptr);

  if (sht30.get() != 0 || !qmp6988.init()) return;
  float temperature = sht30.cTemp;
  float humidity = sht30.humidity;
  float pressure = qmp6988.calcPressure() / 100;

  sendMetrics(ts, "temperature", temperature, "M5Stack-test");
  sendMetrics(ts, "humidity", humidity, "M5Stack-test");
  sendMetrics(ts, "pressure", pressure, "M5Stack-test");

  delay(30000);
}
```

## 閲覧

New Relic のダッシュボードで、以下のように表示できました！

![ダッシュボード](https://hirose-public.s3-ap-northeast-1.amazonaws.com/qiita/2023/01/27/23c66d92-c1a8-4f99-8386-ac709944066f.png)

クエリ例)

```
SELECT min(temperature), max(temperature) FROM Metric WHERE name = 'M5Stack-test' SINCE 1 DAY AGO TIMESERIES
```
VirtualBoxでUbuntuを起動する際に発生したエラーの解消方法

最近VirtualBoxとUbuntuで遊ぼうとした際に下記エラーが発生しました。

```
Not in a hypervisor partition (HVP=0) (VERR_NEM_NOT_AVAILABLE).

VT-x is disabled in the BIOS for all CPU modes (VERR_VMX_MSR_ALL_VMX_DISABLED).

終了コード : E_FAIL (0x80004005)
コンポーネント: ConsoleWrap
インターフェース: IConsole {872da645-4a9b-1727-bee2-5585105b9eed}
```

どうやらBIOSが仮想化を無効しているので、有効にしてください。といったエラーのようです。
BIOS設定画面はPC起動時に、F2又はDELを連打してると開けます。

![IMG_7735.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2280983/b03f08ae-2dfd-2356-ad33-018219fef072.png)

上記の画像にある
**Intel Virtualization Technology**を**Disabled → Enabled**に変更してあげれば解消されるようです。
PCによってBIOS設定画面が違うため、くまなく探してみてください。
Git 使い方

前職で使っていたバージョン管理は、SVN。
「バージョン管理＝サーバーサイドのゴリゴリプログラミングをする人のため」と思っていたが、
インフラ側でもAnsibleなどのLaC業務を行う上で、Gitが必要だと知ったので、備忘録。



## コマンド

### ブランチ
```
$ git brach ← 存在するブランチを一時表示する

$ git brach　ブランチ名 ← 現在のブランチを元に新規ブランチを作成する

$ git checkout ← 指定したブランチに移動する

## 上記の２つのコマンドをオプション「-b」で１発
$ git brach -b ブランチ名← 新規ブランチを作成し、そのブランチに移動する

$ git add yuzo.html ← yuzo.htmlをステージする

## -mオプションでコミットメッセージ
$ git commit -m "バグ改修" ← コミットメッセージを添えてコミットする

$ git checkout master ← masterブランチに移動する


## オプションをつけてより短いコマンド


```
### マージ(Merge)

Merge
→新規に作成したブランチでの編集内容を元のブランチ（Master）に合流させること（ブランチを統合する）

Mergeの手順（ブランチBをブランチAにマージする場合）

①ブランチAに移動（チェックアウト）する
②ブランチBを選んでマージする

```
$ git checkout ブランチA ←　まずはマージコミットを作りたいブランチAに移動する

$ git merge ブランチB　　←　マージしたいブランチBを指定してマージする

```

### Push

push
→ ローカルリポジトリで起きた変更を、リモートリポジトリに反映(GitHub上にアップロードするイメージ)

pushしたいブランチをonにしてpushする

```
$ git push リモートリポジトリ名　ブランチ名　← ローカルリポジトリで行った変更をリモートリポジトリにプッシュする

## 今回の自分のケースでは
$ git push origin master   ←リモートリポジトリ名がなぜoriginという名前なのかの件は、後述
```


## Pull
初めてのQiita記事作成　完全初心者用

# はじめに
現在29歳、去年からpythonの勉強を始め、普段はVScodeを用いてプログラミングをしています。
エンジニアになるには「GitHub」と「Qiita」を使ったほうがいいよ、というアドバイスを受けて登録をしたのですが、**完全初心者のためおそらく初心者向けに書いてあるであろう記事も分からない**始末なので、忘備録として自分の言葉で記事にしてみようと思いました。

# 記事作成画面
#### ◯エディタとプレビュー
始めて記事を書こうとした時にまず思ったことは、「なぜ画面が2つに分裂しているのか？」
とりあえず左側に文章を打ってみると右側に同じ文字が出てきたので、**左側**は記事を**書く**場所、**右側**は記事を**確認**する場所とわかりました。

エディタ：記事を書く場所
プレビュー：記事を確認する場所
#### ◯スライドモード
スライドモードにチェックを入れると確認画面がスライド形式に、、、使いづらいのでここのチェックは入れないことにします。
#### ◯同時スクロール
同時スクロールは左側をスクロールすると右側もスクロールしてくれる便利な機能なので、チェックを入れたままにします。

# Markdown（マークダウン記法）
さて、画面構成がわかったところで記事を書いてみようとすると
**Markdown記法で書いて共有してみましょう**のサンプル文字が、、、
ここでまた初見殺しの単語が出てきました。

とりあえずGoogle先生に聞いてみると、マークダウン記法とは
簡単に言うと**文章を手軽に装飾できる記法**ということらしいです。
ちなみに反対のマークアップ言語とはHTMLなどWEBページを作成するための言語を指し、見出しや段落、太字などをするにも
プログラミングのような書き方をしなければなりません。（なのでマークアップ言語で書いても同じことができます）

マークダウン記法ではもっと簡単にそれらを描けるようにしてくれているのです！
とりあえずここでは個人的によく使うであろうものを書いていきたいと思います。

# 見出し
タイトルや見出しは文章の前に **`#`** を付けます。付けられるのは1〜6までです。

```.tst:エディタ
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
###### 見出し6
```
#### `プレビュー`
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

# 太字
文字を太くするには **で囲みます。
```.tst:エディタ
**太字**
```
#### `プレビュー`
**太字**

# 文字の背景をグレーにする
文字の背景をグレーにするには 「`」で囲みます。
```.tst:エディタ
`グレー`
```
#### `プレビュー`
`グレー`

# 文字の色を変える
文字の色を変えるのはどうやらマークアップ記法でしかできないみたいです。
HTMLの書き方でやってみます。
```.tst:エディタ
<font color="Red">赤</font>
<font color="Green">緑</font>
```
#### `プレビュー`
<font color="Red">赤</font>
<font color="Green">緑</font>

# 文字を黒で囲む
「```」で囲むと文字を黒の枠で囲むことができます。コードの記載に使うようですね。
またその横に続けて「.tst：タイトル」と書くことで、タイトルをつけられます。
```.tst:エディタ
```.tst:タイトル
文字を黒で囲む
```　　　　
```
#### `プレビュー`
```.tst:タイトル
文字を黒で囲む
```

# リンク
[リンク名]（URL）と書きます。
```.tst:エディタ
[私のyoutubeチャンネル](https://www.youtube.com/channel/UC6OS7hNgpVwMJ93b3ee3oIw)
```
#### `プレビュー`
[私のyoutubeチャンネル](https://www.youtube.com/channel/UC6OS7hNgpVwMJ93b3ee3oIw)
※チャンネル登録よろしくお願いします:bow_tone1::bow_tone1::bow_tone1:

# 引用
```.tst:エディタ
>　で引用にできます。
>>で二重引用にできます。
```
#### `プレビュー`
>　で引用にできます。
>>で二重引用にできます。

# 画像
### ファイルから挿入
右上の画像ボタンを押すと、画像の挿入ができます。
![IMG_6031（小）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120604/5b87b88b-e212-a4c7-9049-b1ea667d90ec.png)
画像のサイズを変えたいときは、https：〜の部分を下記のようにsrcに代入し、最後のwidthに縮尺を％を用いて代入します。
```.tst:エディタ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120604/5b87b88b-e212-a4c7-9049-b1ea667d90ec.png" width=5%>
```
#### `プレビュー`
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120604/5b87b88b-e212-a4c7-9049-b1ea667d90ec.png" width=5%>

### Web上の画像
Web上の画像を表示させる場合は、画像のURLを代入してください
```.tst:エディタ
![ラーメン](https://www.news-postseven.com/uploads/2020/05/19/seven2018_furanotomikawa.jpg)
```
#### `プレビュー`
![ラーメン](https://www.news-postseven.com/uploads/2020/05/19/seven2018_furanotomikawa.jpg)

# おわりに
これでとりあえず簡単な記事は書くことが出来そうです！！
今度はコードを紹介する時の書き方なんかを学んでいきたいと思います。
[Rails]実務のコードは膨大すぎて大変だった。全体のコードの把握するためのコツとは。


## 実務のコードは膨大すぎて大変だった！
Railsで下記のサービスを作ったことはありますが、やはり、実務としてのコードは膨大すぎて、初めて実務に入った時は大変な思いをしました。

https://qiita.com/parkon_hhs/items/98304bc5112f0e0f6faf

私だけがわからなかったことかもしれませんが、膨大なコードを把握するために知っておくといい項目をいくつかまとめてみようかと思います。

## 環境
- Rails 
- VSCode
- macOS

## Railsのコードの動きの把握
最初にRailsのコードの把握するコツを紹介します。
#### どこにも定義されてないメソッドについて
例えば`post_controller.rb`に定義されてないのに使われているメソッドがありますね。
それは主に`modelで定義されたメソッド`か`gem専用のメソッド`の可能性が高いです。

まずは`post_controller.rb`なので、`model/post.rb`を調べてみましょう。モデルメソッドがコントローラーで使われているかもしれません。
そして初心者なので、全てのgemを把握しているわけではないので、モデルメソッドではない場合はGoogle検索してみましょう。

メソッドがどこに定義されているかをVScodeで検索する方法としては下記の虫眼鏡アイコンか、`command`+`shift`+`f`になります。
この検索機能を利用して、どこで定義されたのか、他ではどういうふうに使われているのかが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/21976d39-e341-a8a2-0278-891e39459d83.png)


ちなみに、Javascirptではお馴染みの`go to definition`(`F12`キー)はrailsではデフォルトではないようで下記の記事に沿って設定を行うと`F12キー`でメソッドジャンプができるようになります。

https://qiita.com/parkon_hhs/items/30396c1befc250e30a6d

そしてRailsはDBのテーブルごとに役割がわかりやすく分けられているので、
VSCodeで`command`+'P'でファイルの検索すると、作業効率が上がります。

## viewで話からないメソッドは`helper`と`decorater`を見てみよう！
viewでもどこに定義されているかわからないメソッドがあります。
その時は`helper`ファイルと`decorate`ファイルを確認しましょう。
詳しい説明は下記の記事を読んでいただければなと思います。

https://qiita.com/yukiyoshimura/items/f0763e187008aca46fb4

https://qiita.com/mmaumtjgj/items/50c8ac82ca5583cac254


## `schema.rb`ファイルを読んでみよう！
上にもお話ししましたが、テーブルごとに役割が分かれているので、`Schema.rb`ファイルを読んでみると、大体の動きがわかります。
## `routes.rb`ファイルも読んでみよう！
`routes.rb`ファイルは学習でも結構慣れてきたと思いますが、私にとっては全体の動きを把握するために結構読んでました。


## 最後に
Railsはとても便利ですが、その分、省略されすぎていてむしろわかりにくくなる！というのが駆け出しエンジニアの私が感じたことです。
自動importよりReactみたいにimportを明記してくれればわかりやすいなと思ったりもしますが、慣れてくるとサービス全体の動きが把握しやすいフレームワークだと思います。

この記事はここまでにしたいと思います。
ご指摘や、その他のコードの動きの把握のコツがございましたら、教えてください。
お名前どっとこむをつかったときのレコードの設定

Route53、S3、ACM（SSL証明書）という構成、かつ、独自ドメインをお名前どっとこむで取っていたときのレコードの構成というか、設定内容。




![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628630/5b07ab33-a299-4813-c7f0-021ba7c2be52.png)


Cloudfront(OAIまたはOAC)を使うときは、AレコードにCloudfrontを登録します。その場合はS3バケット名の情報はRoute53側には必要なし。




～～～～～～～～～～～～～～
ぐぐって、いろんなサイトの手順をみているうちに、「あれ？どこになにをコピペしたっけ？？なんでこれ証明されてるんだっけ？？」となったので、整理。

図を描くだけでわりと満足しちゃったので、一旦ここまで。

わたしと同じく、インフラ初心者さんに届いたらいいな。。

気が向いたら追記します。
No <domain> elements in <domain-config> [NetworkSecurityConfig]エラーが発生した時の話

Android Studioで**Build Variant**を`release`に切り替えて、エミュレーターで試しに実行してみようとしたところ次のようなエラーが発生しました。


```shell
Error: No <domain> elements in <domain-config> [NetworkSecurityConfig]
    <domain-config cleartextTrafficPermitted="false">
     ~~~~~~~~~~~~~

   Explanation for issues of type "NetworkSecurityConfig":
   Ensures that a <network-security-config> file, which is pointed to by an
   android:networkSecurityConfig attribute in the manifest file, is valid
```

**src/debug/xml/network_security_config.xml**を次のように用意していました。

```xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>
```

ところが、**src/release/xml/network_security_config.xml**は作成していたものの、`<domain />`を`<domain-config />`に追加していませんでした。

なので、同じように`<domain includeSubdomains="true">10.0.2.2</domain>`を追加したところ上記のエラーは消えました。
まろやかWEB拍手 for WordPressをPHP8に対応させる方法

:::note warn
注意

「[まろやかWEB拍手 for WordPress](http://maroyaka.xyz/wp_mwc/comment-page-4/)」の利用規約によると：

> 改造は自由ですが自己責任で行ってください。尚、改造に関するサポートは行いません。
> スクリプトの再配布は要相談といたします。改造したスクリプトを配布したい場合などは作者に予めご一報下さい。

とあるので、この記事では修正方法のみに言及して、修正したスクリプトは配布しません。
:::

## より簡潔な書き方

[【WordPress】まろやかWEB拍手 for WordPressをPHP8に対応させる方法 ](https://note.com/387tsukiha/n/n35aef54f7fed)

こちらでアロー関数を使って簡潔に書く方法が紹介されています。私が変数を使ったのに特段の意味はないので、こちらの解決でよいと思います。それはそれとして、資料として下記の記述は残しておきます。(2023/2/20)

## 原因

[WordPressのサポートフォーラム](https://ja.wordpress.org/support/topic/%E3%81%93%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E9%87%8D%E5%A4%A7%E3%81%AA%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/)でも話題に出ていますが、widget.phpに含まれる[create_function](https://www.php.net/manual/ja/function.create-function.php)が原因です。これを無名関数に書き換えればＯＫです。

## 対策

「widget.php」をテキストエディタ等で開き、「create_function」で検索してみましょう。まずは173行目。

~~~php:widget.php
add_action('widgets_init', create_function('', 'return register_widget("MaroyakaWebClapRankingWidget");'));
~~~

これを、次の2行に書き換えます：

~~~php:widget.php
$dice2000_func1 = function() { return register_widget("MaroyakaWebClapRankingWidget"); };
add_action('widgets_init', $dice2000_func1);
~~~

もう1ヶ所、ファイルの最後（上記の修正をする前は272行目、修正後だと273行目）。

~~~php:widget.php
add_action('widgets_init', create_function('', 'return register_widget("MaroyakaWebClapWidget");'));
~~~

これを、次の2行に書き換えます：

~~~php:widget.php
$dice2000_func2 = function() { return register_widget("MaroyakaWebClapWidget"); };
add_action('widgets_init', $dice2000_func2);
~~~

dice2000というのは、万が一にも変数名が被るとマズいので、絶対に被らない要素として入れてあります。

## 解説

phpはぼんやりとしか分からないので、phpのマニュアル見て考えました。

~~~php:sample.php
//create_functionの使い方
$newfunc = create_function('$a,$b', 'return "ln($a) + ln($b) = " . log($a * $b);');
//無名関数
$newfunc = function($a,$b) { return "ln($a) + ln($b) = " . log($a * $b); };
//ということは……
//$newfunc = create_function('変数', '処理');
//$newfunc = function(変数) { 処理 };
//だから…
$hogehoge = create_function('', 'return register_widget("MaroyakaWebClapRankingWidget");');
//これは引数無しの関数になると
$hogehoge = function() { return register_widget("MaroyakaWebClapRankingWidget"); };
~~~
[Ruby&VSCode]のメソッドジャンプの設定方法

## はじめに
Javascript＆VSCodeでのお馴染みの`Go to definition`（`F12`キー）機能ですが、Rubyではデフォルトではない機能ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/372a17e4-a88a-f7cd-6cbf-87d9815ddf15.png)

初めて実務でRailsのコードを読んだ時、メソッドを一つ一つ検索するのが面倒で、調べたら設定方法がありました。
現在はうまく活用できて作業効率アップにつながった機能ですね。

それでは、ご紹介したいと思います。

## 設定方法

1. VSCodeの拡張機能(Extensions)アイコンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/8d1dcf41-dbe2-6dee-6fd5-d3539e509940.png)
2. `Ruby by Peng Lv`を検索し、インストール
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/65ec95ab-3522-ad62-a507-811376a07961.png)
3. VSCode内で`command`+`shift`+`p`で`Open Setting(UI)`を検索
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/71aa1d45-4aae-5118-a4dc-906a37337c30.png)
4. Open Setting(JSON)ボタンを押して、JSONファイルを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350392/f0411fe4-f674-661d-f269-ce64c3f814dd.png)
5. 下記のコードを追加
  
```JSON
{
    "ruby.useLanguageServer": true,
    "ruby.intellisense": "rubyLocate"
}
```
 
6.VSCodeの再起動 

これで設定完了です。
Rubyのメソッドをクリックして、`F12キー`を押すとメソッドジャンプができます。


以上です。
MotionBuilder が非アクティブ時でもアニメーションの更新をさせる


# 背景
mocopi の MotionBuilder Plugin のページには以下の注意書きがある。
> MotionBuilder 2022/2023を使用している場合は、必ず最前面に表示させてください。他の画面が前面にあると、モーションが動きません。

https://www.sony.net/Products/mocopi-dev/jp/documents/ReceiverPlugin/MotionBuilder/MoveAvatar.html#step3

MotionBuilder が非アクティブになるとデフォルトではアイドル状態になり、アニメーション、モーションの更新が止まる。同じ PC で Unity, UE の操作などでMotionBuilder が非アクティブな状態になることが多ので、バックグラウンドでも更新させたい。

# 方法
System > Always refresh viewer を有効にすることで非アクティブ時も常に更新させることができる。
また、Save User Settings を押すことで保存できる

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081963/d7138cbd-82ca-4f2c-c8d3-2e26fe14786c.png)


https://help.autodesk.com/view/MOBPRO/2023/ENU/?guid=GUID-49241A0A-F330-49B1-A041-1113A478F5BB#GUID-49241A0A-F330-49B1-A041-1113A478F5BB__GUID-E5F1A0B6-1D08-47BE-BF12-5B469AA29F68

MotionBuilder 2023 ドキュメント
ChatGPTが作った全ての欠番が探せるSQLクエリを読み解く

# はじめに

業務で欠番を探す必要がありクエリを作ったのですが、ふとChatGPTにクエリを作ってもらったらどうなるか試してみました。

# クエリの紹介
table_nameのidから欠番をすべて取得するクエリです。
id最大値までの中ですべての欠番を取得します。


ChatGPTによって生成されたクエリ(修正済み)
```sql
WITH cte AS(
    SELECT
        MIN(id) AS min_id,
        MAX(id) AS max_id
    FROM
        table_name
)
SELECT
    min_id + i - 1 AS missing_id
FROM
    cte,
    generate_series(min_id, max_id) AS i
    LEFT JOIN
        table_name
    ON  i = table_name.id
WHERE
    table_name.id IS NULL
;
```

僕の考えたクエリ
```sql
SELECT
    i
FROM
    generate_series(最小値, 最大値) AS i
    LEFT JOIN
        publishers
    ON  i = publishers.id
WHERE
    publishers.id IS NULL
;
```

ChatGPTのほうが最小値、最大値を動的に設定できます。
クエリは比較しやすいように一部記述を修正しています。

# クエリ解説

## with句

```sql
WITH cte AS(
    SELECT
        MIN(id) AS min_id,
        MAX(id) AS max_id
    FROM
        table_name
)
```
一時的な最小値と最大値のテーブルを作成しています。
これにより自分の作ったクエリのように最大値と最小値をgenerate_seriesにセットする必要がありません。
MAX(), MIN()をそのままgenerate_seriesに設定すればいいと思うかもですが、SELECT句でしか使えないのでエラーが出ます。

## 謎の-1
`min_id + i`だと結果が1ずれるので-1で修正しました。
そもそもmin_idつけなければよかったのでは？と記事を書きながら思ってます。
```sql
SELECT
    min_id + i - 1 AS missing_id
```


## generate_series()
```sql
generate_series(min_id, max_id) AS i
```
postgre特有の関数、連番を作成することができる。
第3引数で連番を飛ばすことができる。
```
generate_series ( start integer, stop integer [, step integer ] )
```
https://www.postgresql.org/docs/15/functions-srf.html

## FROM句で複数のテーブルを指定
```sql
FROM
    cte,
    generate_series(min_id, max_id) AS i
```
これは今回知ったことですが、FROM句はカンマ区切りで複数テーブルを指定できて内部結合ができるようです。
JOIN句よりも前からある書き方らしい？




generate_seriesによって生成された連番テーブル欠番のあるテーブルを


# さいごに
ChatGPTでとりあえず動くクエリが作れるのはすごいなと思いました。(今更)
【Zsh】過去の日付を取得する方法

## 1日前の日付を取得

1日前の日時を取得するには以下のように実行する。

```zsh
date -v-1d
```

```zsh
$ date
2022年 9月25日 日曜日 19時34分06秒 JST

$ date -v-1d
2022年 9月24日 土曜日 19時34分13秒 JST
```
iOS16で画面レイアウトを縦から横にする

# iOS16以前で縦から横への変更

```swift:HogeController.swift
UIDevice.current.setValue(UIInterfaceOrientation.landscapeRight.rawValue, forKey: "orientation")
```
的な感じでやっていたのですが、iOS16のシミュレータで効かなくなったようなので変更することにしました。

# iOS16向け対応
AppDelegate と レイアウトを変更したい画面のViewController に修正を追加しました。
ViewControllerでは画面表示前でいいかと思ったので、とりあえずviewDidLoadに入れてみました。

```swift:AppDelegate.swift
var orientation: UIInterfaceOrientationMask = .portrait
func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
    return orientation
}
```

```swift:HogeViewController.swift
override func viewDidLoad() {
    if #available(iOS 16.0, *) {
        (UIApplication.shared.delegate as? AppDelegate)?.orientation = .landscapeRight
                                
        let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
        windowScene?.requestGeometryUpdate(.iOS(interfaceOrientations: .landscapeRight))
        setNeedsUpdateOfSupportedInterfaceOrientations()
    }else{
        UIDevice.current.setValue(UIInterfaceOrientation.landscapeRight.rawValue, forKey: "orientation")
    }
} 
```
PostgreSQLを起動しようとしたらエラーが出た。Error: Failure while executing;

自分のメモ用として作成しました。
同じようなエラーが起きた方は是非参考にしてみてください。


## 環境
M1 MacbookAir

## エラーの内容

ターミナルを開いて、Postgresqlを開こうとしたら以下のエラーが発生した。

```
Failure while executing; `/bin/launchctl bootstrap gui/502　/~~/ .postgresql@14.plist` exited with 5.
```

Bootstrapと書いてあり、身に覚えのないエラーだった。

##　解決策

とりあえずPostgreSQLを停止させてみようと思い、停止後に再度起動した所。

```
% brew services stop postgresql@14
==> Successfully stopped `postgresql@14` (label: homebrew.mxcl.postgresql@14)

% brew services start postgresql@14
==> Successfully started `postgresql@14` (label: homebrew.mxcl.postgresql@14)
```

どうやらうまく行ったようでした。
前回起動したときに停止をさせないでおいたことが原因なのかなと思いました。
皆さんも参考までに。
「Building Arrow C++」してみる

# 概要
「[Building Arrow C++](https://arrow.apache.org/docs/dev/developers/cpp/building.html) 」に従い、とりあえずビルドしてみたメモです。

（CMakeやNinjaを利用しているようですが、これを書いている時点で、これらについてよくわかってないです！）

# 環境

```
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Ubuntu 22.04.1 LTS"
```

OSをインストールしただけで何もしてない状態です

# 実行したコマンド

ドキュメントに書いてあるコマンドを実行しただけですが、書いていきます。

```
$ sudo apt-get install \
     build-essential \
     cmake
```

ドキュメントにはないですが `ninja-build` も必要なのでインストールします。
（最新のドキュメントだと `ninja-build` もインストールするように修正されています: 2023/02/09 追記）

```
$ sudo apt-get install ninja-build
```

あとはドキュメントの通り実行していきます。

```
$ git clone https://github.com/apache/arrow.git
$ cd arrow/cpp
```

ドキュメントにある `--preset ninja-debug-minimal` でビルドしてみます。

```
$ mkdir build
$ cd build
$ cmake .. --preset ninja-debug-minimal
（出力省略）
```

```
（さっき `mkdir` して `cd` した `build` ディレクトリ内で）
$ cmake --build .
（出力省略）
```

ドキュメントにある `tree` コマンドで確認する場合はインストールしてから確認します。

```
$ sudo apt-get install tree
```

```
$ tree debug/
debug/
├── libarrow.so -> libarrow.so.1100
├── libarrow.so.1100 -> libarrow.so.1100.0.0
└── libarrow.so.1100.0.0

0 directories, 3 files
```

とりあえずビルドてきたっぽい？
ドキュメントの「Manual configuration」以降は、後で読む！

# Running unit tests

https://arrow.apache.org/docs/dev/developers/cpp/development.html

↑にあるテストの実行ができるか試してみます。

cloneした直後に `cd` した `arrow/cpp` にて。

```
$ mkdir build_tests
$ cd build_tests
$ cmake .. --preset ninja-debug-minimal -DARROW_BUILD_TESTS=ON
$ cmake --build .
$ ctest -j16 --output-on-failure
（出力省略。もりもりテストが実行されてるっぽかった）
```

# まとめ
よくわかってないまま、とりあえずビルドできたっぽいところまでのメモでした。

# 補足1

`ninja-build` がないとエラーになります。

```
$ cmake .. --preset ninja-debug-minimal
Preset CMake variables:

  ARROW_BUILD_INTEGRATION="OFF"
  ARROW_BUILD_STATIC="OFF"
  ARROW_BUILD_TESTS="OFF"
  ARROW_EXTRA_ERROR_CONTEXT="ON"
  ARROW_WITH_RE2="OFF"
  ARROW_WITH_UTF8PROC="OFF"
  CMAKE_BUILD_TYPE="Debug"

-- Building using CMake version: 3.22.1
CMake Error: CMake was unable to find a build program corresponding to "Ninja".  CMAKE_MAKE_PROGRAM is not set.  You probably need to select a different build tool.
CMake Error: CMAKE_C_COMPILER not set, after EnableLanguage
CMake Error: CMAKE_CXX_COMPILER not set, after EnableLanguage
-- Configuring incomplete, errors occurred!
See also "/home/xxx/arrow/cpp/build/CMakeFiles/CMakeOutput.log".
```

# 補足2

`tree` コマンドがないとエラーが出ます。

```
$ tree debug/
Command 'tree' not found, but can be installed with:
snap install tree  # version 1.8.0+pkg-3fd6, or
apt  install tree  # version 2.0.2-1
See 'snap info tree' for additional versions.
```
Mysql2::Error: Table 'users' already exists schema.rb

# エラー内容
ユーザー管理機能を実装していた時のこと。
テーブルを作成後に、`rails db:migrate`実行時に
`Mysql2::Error: Table 'users' already exists`とエラー表示される。

# 仮説1
調べたところ↓
https://qiita.com/TAKE1219/items/fbc9578226771427fcdd

usersテーブルは既に存在しているよ！とエラーが出ている様子。
また、原因としてdatabase.ymlの 
`encoding: utf8mb4`を `encoding: utf8`へ修正する必要がある。

修正して再度
~~~
rails db:migrate
~~~

↓

~~~
Mysql2::Error: Table 'users' already exists
~~~
の表示・・・

`rails db:migrate:status`でmigrationファイルの確認。
~~~
Status  Migration ID    Migration Name
-------------------------------------------
down    000000000000    Devise create users
~~~

特に問題なさそう。。。

SQL文でテーブル内を確認するも、特に問題も無さそう・・・

# 仮説2

色々ネットを物色していたところ
↓この記事を発見
https://qiita.com/k0kubun/items/491a9d9f2745335566e3

`schema.rb`ファイルを確認。
何故か、前回作成していたアプリのデータベースが記述されている。
`schema.rb`ファイル内の記述を削除して、
~~~
rails db:migrate
~~~

すると

~~~
Status     Migration ID     Migration Name
-------------------------------------------------
  up       000000000000     Devise create users
~~~

無事、`migrate`出来ました〜〜〜〜〜♪

# まとめ

今回は、`schema.rb`ファイルが原因でした。
なぜ、前回のアプリ内容が記述されていたかは謎なので
分かるかた居れば教えて下さい。。。。
【第1回】React勉強_20230127～

# 1章 Next.jsとTypeScriptによるモダン開発
## 1.1 Next.jsとTypeScript
- Next.jsとは
    - オープンソースのWebアプリケーションフレームワーク
    - Reactをベースに開発されている。フロントエンドだけではなく、一部のサーバー機能(例えば、サーバーサイドレンダリング機能)も持つ
- Next.jsとReactの構成の違い
    - 従来型Reactアプリケーション
        - クライアントサイド：Reactアプリケーション
        - サーバーサイド：APIサーバー+データベース
    - Next.jsアプリケーション
        - クライアントサイド：Reactアプリケーション
            - サーバーサイド：**APIルート+SSR/KSSG+APIサーバー**＋データベース<br>※Next.js：APIルート、SSR/KSSG、Reactアプリケーション
- TypeScript
    - JavaScriptを拡張するAltJSの1つ。JavaScriptに静的型付け機能などを追加している
    - 現時点でのモダンフロントエンド開発のプログラミング言語のデファクトスタンダード

 ## 1.2 フロントエンド開発の変遷
- MVCフレームワークからSPAへ
    - 従来はMVC全てをサーバサイドで行っていた。HTMLもサーバサイドレンダリングで作成する
    - 一方、SPAではAPIでサーバーサイドとフロントエンド間をJson形式のデータをやり取りしている
    - フロントエンドにMVC/MVVMのアーキテクチャが導入されたJavaScriptライブラリが多く出現した。その中の一つがReact
- Reactの特徴
    - 仮想DOM
    - 宣言的UI
    - 単一方向のデータ受け渡し
    - コンポーネント指向・関数コンポーネント
    - Fluxアーキテクチャとの親和性
- Fluxアーキテクチャ
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379161/daf37a97-cccc-a404-bbbc-3f5b7c6f0be8.png)
    - データ取得：Viewに必要な状態はStoreから取得する（Store→View）
    - データ更新：状態の更新はActionをDispatcherに渡し、DispatcherがActionの内容に応じてStoreを更新する
- SSR(Server Side Rendering)
    - 仮想DOMのレンダリングを行う
    - サーバー側でレンダリングするためにNode.jsの環境がサーバに必要
- SSG(Static Site Generation)
    - 事前に静的ファイルを生成し、デプロイする仕組み
    - SSRのデメリットを解決するために利用される
    - 動的コンテンツの生成には不向き
- Next.js特徴
    - Reactフレームワーク
    - SPA/SSR/SSGの切り替えが容易
    - 簡単なページルーティング
    - TypeScriptベース
    - デプロイが容易
    - 学習コストが少ない
    - webpackの設定の隠蔽
    - ディレクトリベースの自動ルーティング
    - コードの分割・統合
- Next.js全体像

| 分類 | 機能 | 備考 |
|:-:|:-:|:-:|
| UIコンポーネント実装 | 宣言的UI | Reactの機能範囲  |
|  | Virtual DOM | Reactの機能範囲 |
|  | UIテスト | Reactの機能範囲 |
|  | TypeScriptサポート | Reactの機能範囲 |
| サーバサイド実装 | ファイルシステムルーティング |  |
|  | APIルート |  |
|  | SSR/SSG |  |
|  | ISRによるビルド短縮 |  |
| 開発環境サポート | 環境変数 |  |
|  | 高速リロード |  |
|  | ESLint |  |
|  | 簡易Webpackビルド |  |
| Webアプリのデプロイ | IE11含むブラウザサポート |  |
| | 画像最適化 |  |
| | フォント最適化 |  |
| | 国際化対応 |  |
| | Vercelへの簡易デプロイ |  |

 ## 1.3 モダンフロントエンド開発の設計思想
- コンポーネント指向
    - 再利用可能な部品(コンポーネント)を組み合わせてUIを構築する
    - コンポーネントをアプリケーションに依存しない抽象的な部品とする
- コンポーネントの状態管理
    - コンポーネントが持つデータを状態として管理する
    - props
        - コンポーネントの外側から受け取る値。単一方向データフロー構造を持つ
    - state
        - コンポーネント内部で保持するデータ。外部からアクセス不可
        - stateの影響範囲は、保持しているコンポーネントおよび配下のコンポーネント
- コンポーネント間のデータの受け渡し
    - 親→子はpropsでデータを渡し
    - 子→親はpropsにコールバック関数の引数として渡す
    - 上記以外でcontextを用いたデータのやり取りがある。ただし、グローバルでのアクセスとなるため、多用はコードの可読性を下げる
    - propsとcontextを適切に使い分けることが重要
- Atomic Design

| 要素 | 説明 | 例 |
|:-:|:-|:-|
| Atoms | UIの最小単位 | ボタン |
| Molecules | 1つ以上のAtomを組み合わせて作成される要素 | 検索フォーム |
| Organisms | 1つ以上のMoleculesを組み合わせて作成される要素 | ヘッダー |
| Templates | Organismsを組み合わせて1つの画面として成り立つもの |  |
| Pages | Templateにデータが組み込まれたもの |  |
- Hydration
    - SSR/SSGで事前生成されたHTMLをReactコンポーネントに復元すること
    - HydrationにはJavaScriptの読み込みが必要で、ReactDOMモジュールのhydrate()というAPIで提供されている
***
# 学習記録

- 学習日/学習時間
    - 2023/1/27（1h40m）
    - 2023/1/28（1h30m）
    - 2023/1/29（20m）
WordPress6.1の新機能や変更点について

最近WordPress6.1を触る機会があり、久しぶりのWordPress案件だったので、
備忘録がてら6.1の新機能や変更点などをまとめてみたいと思います。

# WordPress6.1について

2022年11月1日にリリースされました。
その他のバージョンやリリース日については、下記リンクからご確認下さい。

https://ja.wordpress.org/download/releases/

サーバー要件については、以下の推奨になります。

・PHP 7.4以上
・MySQL 5.7以上、またはMariaDB 10.3以上

## WordPress6.1のダウンロード

下記リンクから、WordPressをダウンロードできます。
因みに現在はマイナーアップデートの「WordPress6.1.1」が最新のバージョンです。

https://ja.wordpress.org/download/

## WordPress6.1の新機能

#### エンドユーザー向け
・10種類のユニークなスタイルバリエーションで構成されたデフォルトテーマ
・より多くのブロックにさらに多くのデザインツールを追加
・テンプレートのエクスペリエンスとテンプレートオプションを拡張、改良
・より直感的なドキュメント設定
・ヘッダーとフッターのパターンを全テーマに追加
・引用とリストブロックを改良し、インナーブロックをサポート
・様々なブロックのプレースホルダーをより崩れにくく改良
・新しいモーダルインターフェイスと環境設定の改善
・ナビゲーションブロックの自動選択とフォールバック機能、メニュー管理の簡素化
・ワンクリックですべてのインナーブロックにロック設定を適用
・ブロックテーマの検出機能の向上
・アクセシビリティに関する更新
・パフォーマンスに関する更新

#### 開発者向け
・あらゆるテーマを更にパワーアップできる外観ツールへのオプトイン
・スタイルシステムの新しいイテレーション
・あらゆる投稿タイプにスターターパターンを追加
・新しい制約付きオプションやレイアウトオプションの無効化機能など、レイアウトオプションの進化
・コンテンツロックパターンを追加し、キュレーションの選択肢を強化
・クエリーループブロックのサポートを拡張
・クラシックテーマでブロックベースのテンプレートパーツを使用可能に
・theme.json データのフィルタリング
・Fluid タイポグラフィによるレスポンシブ性の向上
・ボタン、見出し、キャプションなど、ブロック内の要素を theme.json でスタイル設定可能に

以上、ブロックエディタに関しては、思ってる以上に使いやすくなった印象です。
個人的に気になっていた、WebPに自動変換する機能はどうやら先送りのようです…
今後もアップデートについては、注目していこうと思います。
zsh: command not found: yarnを解決

# [概要]
next.jsの環境をセットアップしようと思い、
``` yarn create next-app```を実行したらエラーにぶつかった

## ぶつかったエラー
zsh: command not found: yarn

翻訳・意味
yarnコマンドが使えないとのこと


## 原因
そういえば、yarnを使うのは初めてだった(^^;;



## やったこと
1.```npm install -g yarn```でyarnをインストール
2.```yarn -v```でインストールされてるか確認する



## 結果
無事インストールされ、next.jsの環境をセットアップできた
Scanline Seedfillによるペイント関数

Scanline Seedfillによるペイント関数です。
指定された背景色の部分を指定された色で塗りつぶします。
python3で書かれています。グラフィックスの部分はpygameを使っています。

```scanline.py
#!/usr/bin/python3
from pygame.locals import *
import pygame
import sys
import os
import random
MAXX=399
MAXY=399
buff=[]
pygame.init()    # Pygameを初期化
screen = pygame.display.set_mode((MAXX+1,MAXY+1))    # 画面を作成
pygame.display.set_caption("paint(scanline seedfill)" )    # タイトルを作成

def point(p):
    return(screen.get_at(p)[:3])

def scanline(lx,rx,y,bc):
  global buff
  while(lx<=rx):
    while (lx<rx):
      if point((lx,y))==bc: break
      lx+=1
    if point((lx,y))!=bc: break
    while(lx<=rx):
      if point((lx,y))!=bc: break
      lx+=1
    buff.append((lx-1,y))

def paint(p,bc,pc):
  global buff
  col=point(p)
  if col != bc:
      return
  buff=[p]
  while buff:
    (p,buff)=(buff[0],buff[1:])
    (lx,y)=p
    rx=lx

    if point(p)!=bc:
      continue

    while ( rx<MAXX ):
      if point((rx+1,y))!=bc: break
      rx=rx+1

    while ( lx>0 ):
      if point((lx-1,y))!=bc: break
      lx=lx-1

    for i in range(lx,rx+1):
      screen.set_at((i,y),pc)

    if y-1 >= 0:
      scanline(lx,rx,y-1,bc)
    if y+1 <= MAXY:
      scanline(lx,rx,y+1,bc)

def waitkey():
    while True:
        for event in pygame.event.get():
            if event.type == QUIT:
                sys.exit(0)
            if event.type == KEYDOWN:  # キーを押したとき
                k=pygame.key.name(event.key)
                return(k)

def main():
    screen.fill((0,0,0)) # clear screen

    for x in range(120):
      screen.fill((255,255,255),(random.randrange(0,400),random.randrange(0,400),50,50))
    pygame.display.update()
    bc=screen.get_at((3,4))[:3] # (3,4)における背景色の取得
    paint((3,4),bc,(0,255,0)) # (3,4)から背景色bcで、緑(0,255,0)をペイント
    pygame.display.update()
    key=waitkey()
    pygame.quit()
    sys.exit()

if __name__=='__main__':
    main()
```
UbuntsからWindowsのCドライブを操作する方法

# UbuntsからWindowsのCドライブを操作する方法

## 発端
UbuntsからWindowsのCドライブを操作したかったため

## 結論
マウントする

## 方法
```
/mnt/c
```
:::note info
CドライブのUserファイルの自分のディレクトリを操作したい場合は
```
/mnt/c/Users/ディレクトリ名とする。
```
:::
S3＋Route53

## 前提
- 前回作成したS3バケットを利用
- 独自ドメインをお名前どっとこむで取得済み

## やりたいこと
S3とRoute53を連携、お名前どっとこむで取得した独自ドメインでサイトにアクセスできるようにする。

## 手順
1. Route53でホストゾーンを作成
1. Aレコードを作成。
1. Route53ホストゾーンで作成されたNSレコードをお名前どっとこむのDNS情報に設定
1. 設定後しばらく待つと、独自ドメイン（HTTP）でサイトが表示されるようになる。


## 設定メモ
＜Route53 Aレコードの設定値＞
```
Name：空。ただし、サブドメインを利用している場合は入力。その場合、S3バケット名も一致させる。
Type A IPv4
Alias 有効化
Alias Target S3バケットを選択
```

＜Route53 NSレコード＞
お名前どっとこむにコピペするとき、末尾のドットはいれない。

## 注意点
上記設定がすべて完了したら、
- S3バケット名が含まれるURL
- 独自ドメイン（HTTP）


どちらからもアクセスできるようになる。

この状態でS3バケットのブロックパブリックアクセスを<B>オン</B>にすると、上記2つのURLのどちらからも閲覧できなくなる。

再度ブロックパブリックアクセスを<B>オフ</B>にすると、
- S3バケット名が含まれるURL　←閲覧できる
- 独自ドメイン（HTTP）　←閲覧できないまま

上記の状態になった。
Route53のAレコードを再設定（とはいえ同じ値）すると、独自ドメイン（HTTP）のほうも閲覧できるようになった。
dnfとyumの違い

この2つはRed Hat系のLinuxディストリビューションで使われている“RPMパッケージ”を扱うためのパッケージ管理コマンド。yumの後に生まれたのがdnf。

どちらも/usr/bin/dnf-3を呼び出しているため、基本的には一緒と捉えてよさそう
/usr/bin/dnf-3の実態はpythonスクリプト


▼redhat8.5で確認

```
[root@test-host ~]# more /etc/redhat-release
Red Hat Enterprise Linux release 8.5 (Ootpa)
[root@test-host ~]# which yum
/usr/bin/yum
[root@test-host ~]# which dnf
/usr/bin/dnf
[root@test-host ~]# ls -l /usr/bin/yum /usr/bin/dnf
lrwxrwxrwx. 1 root root 5  9月 13  2021 /usr/bin/dnf -> dnf-3
lrwxrwxrwx. 1 root root 5  9月 13  2021 /usr/bin/yum -> dnf-3
[root@test-host ~]# ls -l /usr/bin/dnf-3
-rwxr-xr-x. 1 root root 1954  9月 13  2021 /usr/bin/dnf-3
```
pythonで3次元球内に一様に分布する点の座標とその原点からの距離を求める。

単位球内に一様に分布する点の座標(x,y,z)は、次の３つの一様乱数
```math
\begin{equation}
\begin{cases}
\theta & (-1\leq \theta\leq 1) \\
\phi & (0\leq \phi\leq 2\pi) \\
r & (0 \leq r \leq 1)

\end{cases}
\end{equation}
```

を用いて以下のように求められます。
```math
\begin{equation}
\begin{cases}
x = r^{\frac{1}{3}}\sqrt{1-\theta^{2}}\cos\phi \\
y = r^{\frac{1}{3}}\sqrt{1-\theta^{2}}\sin\phi \\
z = r^{\frac{1}{3}}\theta

\end{cases}
\end{equation}
```
これをpythonで実装すると以下のようになります。

```python
import numpy as np

xl=[]
yl=[]
zl=[]

for i in range(5000):
    theta = np.random.uniform(-1, 1)
    phi = np.random.uniform(0, 2*np.pi)
    r = np.random.uniform(0, 1)
    x=r**(1/3)*(1-theta**2)*np.cos(phi)
    y=r**(1/3)*(1-theta**2)*np.sin(phi)
    z=r**(1/3)*theta
    xl.append(x)
    yl.append(y)
    zl.append(z)
```
３次元の散布図は以下のコードで描くことができます。
```python
import matplotlib.pyplot as plt

fig = plt.figure()
ax = fig.add_subplot(projection='3d')
ax.set_xlabel("x")
ax.set_ylabel("y")
ax.set_zlabel("z")
ax.scatter(xl, yl, zl, s=1)
plt.show()
```
![スクリーンショット 2023-01-27 21.59.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3114183/7430ab66-b489-b281-bfe1-feba4f2bf4e5.png)

次のようにして球内に分布する点の距離のリストを得ることができます。

```python
distance=[]
for i in range(len(xl)):
    dis = np.sqrt(xl[i]**2 + yl[i]**2 + zl[i]**2)
    distance.append(dis) 

dist = 1000
distlist = list(map(lambda x: x *dist , distance))
```


## 参考

https://tapioca.hatenablog.jp/entry/2017/02/19/015556
【Mac M1】Stable Diffusionをローカル環境で実行する方法(brew/python/venv)

# 概要
* 以下環境のPCでStable Diffusionを動かすことができたので、その構築手順を残します。
    * brew/python/venv だけなので多分一番楽の構築手順かなと思います
    * ちなみにIntelチップのMacも持っているのですが、そちらではうまくできませんでした...

## Mac
* 機種ID：MacBookPro18,3
* macOS：Monterey
* チップ：Apple M1 Pro
* メモリ：16GB

## 参考記事
* 以下の記事が一番簡潔で実行しやすい手順だと思います。今回もこちらに沿って実施しました。
    * [【簡単】Stable Diffusionを「M1/M2」の「MacBook」で動かす方法](https://manablog.org/stable-diffusion-mac-m1/)

# 手順
①Homebrewのインストール
②python3のインストール
③リポジトリのクローン
④バーチャル環境の構築
⑤学習済みモデルのダウンロード
⑥Stable Diffusionの実行

## ①Homebrewのインストール

* 以下コマンドでまずはHomebrewが入っているか確認できます。
    * Homebrewとは、ソフトウェアの導入をシンプルに行うことができるパッケージ管理システム。

```terminal
$ brew --version
Homebrew 3.6.20
Homebrew/homebrew-core (git revision 2f7330fe49b; last commit 2023-01-26)
```

* 自分の場合は3.6.20でupdateしていました。
* updateする方は以下のコマンドを実行してください。

```terminal
$ brew update
```

* まだインストールされていない場合は、公式サイトの[Homebrew](https://brew.sh/index_ja)の指示に従ってインストールしてください

## ②python3のインストール

* 続いて、以下コマンドでPythonが入っているか確認できます。

```terminal
$ python3 -V
Python 3.10.9
```

* 自分の場合は3.10.9でupdateしていました。
* まだインストールされていない方は、以下のコマンドを実行してください。
    * Pythonのバージョンは3.10以上が必須らしいです。

```terminal
$ brew install python
```

* 自分の場合は3.10.9でupdateしていました。

## ③リポジトリのクローン

* Stable DiffusionをGitからクローンしてきます。
    * クローンする際は、リポジトリを管理している所定のディレクトリで行うと良いと思います。

```terminal
$ git clone -b apple-silicon-mps-support https://github.com/bfirsh/stable-diffusion.git
$ cd stable-diffusion
$ mkdir -p models/ldm/stable-diffusion-v1/
```

* 一番最後のディレクトリを作成したのは、この後必要ファイルを格納するためです。

## ④バーチャル環境の構築
* Stable Diffsionディレクトリ直下で、以下コマンドによりvirtualenvをインストールしvenvを作ります。これらのソフトウェア（ライブラリ）が仮想環境を構築するのに必要になります。

```terminal
$ python3 -m pip install virtualenv
$ python3 -m virtualenv venv
```

* 下記コマンドでバーチャル環境を実行できます。

```terminal
$ source venv/bin/activate
```

* プロンプトが変わったことを確認できると思います。頭に(venv) とついているはずです。
* venvの状態で以下を実行します。以下により指定されたライブラリがインストールされますが、venv環境下で行った方がほかパッケージの相性やアップデートによる影響が少ないので、venvで行なっています。

```terminal
$ pip3 install -r requirements.txt
```

## ⑤学習済みモデルのダウンロード
* Stable Diffusionの実行には、学習済みモデルをダウンロードする必要があります。
    * アカウント登録や同意確認が必要という記事が多いですが、2023/1/26時点では、アカウントの登録など不要のよう？
* 「[Hugging Face](https://huggingface.co/CompVis/stable-diffusion-v-1-4-original)」のサイトに行き、「Download the weights」から「sd-v1-4.ckpt」をダウンロードします。
* そのファイルを「models/ldm/stable-diffusion-v1/model.ckpt」のディレクトリに設置します。
    * 4.27GBあるのでダウンロードは少し時間がかかります

## ⑥Stable Diffusionの実行
* これで準備は整いました。以下を実行してみましょう。

```terminal
$ python3 scripts/txt2img.py --n_samples 1 --n_iter 1 --plms --prompt "beautiful galaxy"
```

* デフォルトの512x512であれば１枚2分くらいで終わります。
* 他にもパラメータを付けることができますので、詳細調べてみると面白いかもしれません。
    * 一度に何枚出力するか、画像サイズをどうするか、等を決めることができます。
    * 参考：[Stable Diffusion txt2imgのパラメータ一覧](https://www.premium-tsubu-hero.net/stable-diffusion-txt2img-parameters/)


## [Errno 2] No such file or directoryエラー
* 自分の場合は以下のエラーが表示されましたので、その解決方法も記します。

```terminal
FileNotFoundError: [Errno 2] No such file or directory: 'models/ldm/stable-diffusion-v1/model.ckpt'
```

* こちらも上記参考記事に記載がありましたが、先ほどダウンロードしたファイル名を変えてあげれば解決します。


> 変更前：models/ldm/stable-diffusion-v1/sd-v1-4.ckpt
変更後：models/ldm/stable-diffusion-v1/model.ckpt


Enjoy!!
JavaScriptのasync/awaitとPromiseチェーンのthen()について

```sample.vue
//省略
<script>
export default {
    //省略
    methods: {    
        method1(){
            this.$axios.$get('URL1',{params: {param1: param1, param2: param2})
            .then(response => {
                //　最初の処理
                this.item1 = response.item1
                this.item2 = response.item2
                //if文も可能
                if(response.data != null){
                    this.data = response.data
                }
                return this.$axios.$get('URL2');
            })
            .then(secondResponse => {
                // 2つ目の処理
                return this.$axios.$get('URL3');
            })
            .then(thirdResponse => {
                // 3つ目の処理
            })
            .catch(error => {
                this.message = error
                //errorも複数行可能
            })
            .finally(() => {
                //hogehoge
            })
        }
    }
}
</script>

<script>
export default {
    //省略
    methods: {   
    // async awaitを使用する場合
    async getData(){
        try{
            const response = await this.$axios.$get('URL',{params: {param1: param1, param2: param2})
            if(response != null){
                this.item1 = response.item1
                this.item2 = response.item2
            }
        } catch (error) {
        // handle the error
      }
    async getSomeData() {
      try {
        const [response1, response2] = await Promise.all([
          this.$axios.$get('/api/v1/example/1'),
          this.$axios.$get('/api/v1/example/2')
        ]);
        console.log(response1)
        console.log(response2)
      } catch (error) {
        // handle the error
      }
    }
   }
}
</script>
S3ウェブサイトホスティング

## 前提
ドメインはお名前どっとこむで取得したものを利用。

## やりたいこと
S3ウェブサイトホスティングでサイトを表示する。

## 手順
割愛。

## 設定値メモ

＜S3バケット　アクセスポリシー＞
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::(バケット名)/*"
        }
    ]
}
```

＜S3ブロックパブリックアクセス＞
オフ

## 注意点
- S3バケット名はドメイン名と完全一致にすること（例：xxxx.com）。ただし、現時点では独自ドメインは利用していない。



以降の記事で、Route53やCloudFrontと接続させる予定。
エンジニアインターン8日目

今日は自社のアプリのテストを行った。はじめはテストエンジニアとして雇われたが今日初めてテストエンジニアらしいことをした。アプリを使っていく中でいろんなパターンを想定してテストを行った。先輩エンジニアがスプレッドシートにやることをまとめていただいて業務を行っていく中で困ったところはほとんどなかった。インターンが終わり、渋谷で開催されたエンジニア交流会に参加した。自分はエンジニアで活躍している方々の話を聞きたかったため参加した。社員のエンジニアさんや新卒のエンジニアさん、フリーランスエンジニアまでいろんなところで活躍されているエンジニアからお話を聞くことができた。その中でもフリーランスエンジニアさんから話を聞けてとても良かった。自分は大学生のうちにフリーランスエンジニアとして活躍したいという目標があるためとてもためになる話を聞くことができた。最後に参加したエンジニアさんとSNSを交換した。みなさんが口を揃えて自分に[よかったら自分の会社にインターンきて！]と誘っていただいた。とても嬉しくエンジニアを目指しててよかったと思った。これからも交流会や勉強会などのイベントに積極的に参加して繋がりを作ろう！と思った。
【第0回】React勉強

# はじめに
- 学習内容
    - TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発
- 開始日
    - 2023/1/27
- 目標
    - 1日1h以上勉強
    - React Webアプリケーション開発の基礎を習得する