OmniAICreator/Qiita-1.07M huggingface dataset:
【Xcode】Target Membershipにチェックされているのに Cannot find 'load' in scope と出る

## 遭遇したエラー

先日 SwiftUIのチュートリアルの学習をしていた時に、今回のエラーに遭遇しました。

観光名所リストを作る際に必要なJSONファイルを`ModelData.swift` から呼びだすために
`var landmarks:[Landmark] = load(landmarkData.json)`
と打ち込むと、

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/409f4587-a024-f3fa-313c-bf170598bfd5.png width=400>

`Cannnot find 'load' scope.` と表示されて Build に失敗しました。

↓今回学習したチュートリアル

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

↓今回作成したアプリを動作させたものです(アプリアイコンは自作です)

https://youtube.com/shorts/LlOMSTF12kY?feature=share


## 試してみたこと

1. JSON ファイルを一旦削除して、もう一度プロジェクト内にコピーする
1. 手元の Xcode のバージョンがチュートリアルより古かったためバージョンを引き上げ
    1. チュートリアルには 15 or later と記載されていた
    1. <img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/0e459d9d-ef95-ee58-2e57-d6e9edb07a46.png width=300>
    1. 手元では 14 になっていたので引き上げ
    1. <img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/106ab7a9-2635-6173-539e-d1ddb4b3b7cc.png width=300>
1. エラーが起きたコードをチュートリアルからコピペ
1. ディレクトリを変えて JSON 再配置
    1. 
1. 一度プロジェクトを Clean してから再 Build
1. Target Membershipにチェックマークがついているか確認
    1. <img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/8b1b64a1-091a-6d70-984c-a3aaa0b848ad.png width=300>
1. そもそもプロジェクト内にコピーされているかを再確認
    1. クリック拡大表示推奨
    1. <img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/b21b8788-b96c-4d54-92e0-b4b6fc8ffe2c.png width=300>

しかし、どれを試してもビルドが通ることはありませんでした。

## 解決した方法
これらの方法を諦めて、JSONファイルをプロジェクトに追加する前の状態が保存されたブランチから新しくブランチを切り出して、再び最初からやり直しました。

すると

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/7d7160c3-0288-a774-e68f-dbd1b3898a03.png width=400>

エラーが消滅し、Build に成功しました。

なぜそうなったのか、先ほど Build に失敗したブランチと今回成功したブランチのコードをGithub 上で比べてみましたが、`ModelData.swift` でもプロジェクトファイルにも特に違いがありませんdした。

## 結論
どんなにコードを眺めても、プロジェクト設定を見ても原因がわからないときは、**思い切って状態を巻き戻すか新しくプロジェクトを作ってやり直した方がいいかも**しれません。

## 別で見つけた課題
２つ目の名所の詳細画面で本来は戻るボタンが < Landmarks となるはずが、なぜかこの画面だけ Back となってしまってます。
また後ほど、修正予定です。

| 問題の画面 | 他の名所画面 |
|---|---|
|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/8c30af41-8854-72d3-dc1a-2071ab37258a.png width=300>|<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2747809/8ef693f8-3020-239e-c385-e037aec925df.png width=300>|
ECSデプロイ時サービスのタスクログにフォーマットエラーが出たときの対処法 exec /usr/bin/sh: exec format error

Dockerfile.prodからイメージをビルドしてECRにプッシュしてデプロイを行なっていたところ、ECSのサービスのタスクログにexec /usr/bin/sh: exec format errorが出ました。

```
(初回のみ)
$ docker buildx create --use
$ docker image inspect イメージID
```
でイメージのアーキテクチャを確認するとDockerイメージのアーキテクチャがarm64であることが確認できました。一方、ECSのホスト環境がx86_64である場合、この互換性の問題が原因で「exec format error」が発生しているようでした。

結論としてDockerfile.prodで--platform=linux/x86_64を指定することで解決できました。

```Dockerfile.prod
# ベースイメージの指定
# FROM ruby:3.3.0 としていたものを下記に変更
FROM --platform=linux/x86_64 ruby:3.3.0

# 環境変数の設定
ENV LANG C.UTF-8
ENV TZ Asia/Tokyo
ENV RAILS_ENV=production

# アプリケーションディレクトリの作成
RUN mkdir /myapp
WORKDIR /myapp

# GemfileとGemfile.lockをコピー
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock

# Bundlerのバグを処理
RUN gem update --system && \
    bundle update --bundler && \
    bundle install

# アプリケーションのソースコードをコピー
COPY . /myapp

# 必要なディレクトリの作成
RUN mkdir -p tmp/sockets tmp/pids

# ボリュームの設定
VOLUME /myapp/public
VOLUME /myapp/tmp

# エントリーポイントスクリプトをコピーし、実行可能にする
COPY entrypoint.prod.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.prod.sh

# エントリーポイントとポートの設定
ENTRYPOINT ["entrypoint.prod.sh"]
EXPOSE 3000

```

```entrypoint.prod.sh
#!/bin/bash
set -ex

echo "Start entrypoint.prod.sh"

echo "Removing old server PID file if it exists..."
rm -f /myapp/tmp/pids/server.pid

# データベースの作成は、既に存在する場合に失敗する可能性があるため、エラーを無視するオプションを追加します
echo "Creating database (if it doesn't exist)..."
bundle exec rails db:create RAILS_ENV=production --trace || echo "Database creation failed, but continuing..."

echo "Running database migrations..."
bundle exec rails db:migrate RAILS_ENV=production --trace

# データベースシード処理が失敗した場合もエラーを無視するオプションを追加します
echo "Seeding the database..."
bundle exec rails db:seed RAILS_ENV=production --trace || echo "Database seeding failed, but continuing..."

echo "Starting Rails server with Puma..."
bundle exec puma -C config/puma.rb

# コマンドライン引数で指定されたコマンドを実行
exec "$@"

```

その他にもビルド時にプラットフォームを指定する方法でも解決できました。
```
$ docker buildx build --platform linux/amd64 -t イメージ名 .
```
拡張関数

よく使いそうな関数をまとめる
```kotlin
val set = setOf("A", "B", "C", "D")
val numbers = listOf(0, 1, 2, 3, 4)
val animals = listOf("fox", "bear", "wolf", "cat", "")
val japanese = setOf("くじら", "タイ", "蟹", "イルカ")
```
### Map

コレクションの各要素へ自分で指定した関数を処理させて、新しいコレクションを返す。

```kotlin
val mapList = numbers.map { it * 2 }
println(mapList) //[0, 2, 4, 6, 8]
```
### Zip

２つのコレクションからペアを作成する

```kotlin
val zipList = numbers.zip(animals)
println(zipList) // [(0, fox), (1, bear), (2, wolf), (3, cat), (4, )]
```
### Associate

コレクションをMapに変換する

```kotlin
val associations = animals.associateWith { it.length }
println(associations) //  {fox=3, bear=4, wolf=4, cat=3, =0}
```
### Flatten

ネストされたコレクションの単一リストを返す

```kotlin
val flattenedset = listOf(animals, japanese).flatten()
println(flattenedset) // [fox, bear, wolf, cat, , くじら, タイ, 蟹, イルカ]
```

### Filter

条件に合致する新しいリストを返す

```kotlin
val divide = numbers.filter { it % 2 == 0 }
println(divide) // [0, 2, 4]
```
### partition

条件に合致するリスト、合致しないリストをそれぞれ返す。￥

```kotlin
val (even, odd) = numbers.partition { it % 2 == 0 }
println(even) // [0, 2, 4]
println(odd) // [1, 3]
```
### any

条件に合致する要素があればtrueを返す

```kotlin
val any4 = numbers.any { it == 4 }
println(any4) // true
```
### groupBy

既存のコレクションを指定されたキーにもづいてグループ化して新しいMapを返す

```kotlin
val groupedBy = animals.groupBy { it.first().uppercase() } // java.util.NoSuchElementException: Char sequence is empty.


val groupedBy = countrys.groupBy { it.first().uppercase() }
println(groupedBy) // {R=[russia], C=[canada, China], A=[america], B=[brazil]}
```

#### 参考
[Kotlin Collection関数をマスター](https://speakerdeck.com/masayukisuda/kotlin-collectionguan-shu-womasuta)
OSS-DB Silver 受験体験記

## はじめに
少しでもアウトプットの経験を積もうとQiitaのアカウントを作ってみたものの何を書けば良いのか思いつかなったので、手始めに今月(2024/06)合格したばかりの**OSS-DB Silver**の受験体験記を書いてみることにしました。何かしらこれから受験する方の参考になれば嬉しいです。

## OSS-DB Silver(とgold) の試験概要（公式サイト）

https://oss-db.jp/outline

:::note
公式サイトでは「主にPostgreSQLなどのオープンソースデータベース」が試験の対象とされていますが、試験内容から見るに、OSS-DBは**オープンソースデータベースの試験というよりもPostgreSQLの試験**だと言って良いです。
:::

## 当時のスペック
- 文系出身の２年目エンジニアで実務経験はちょうど１年（テスト・簡単なコード修正や機能追加等）
- 受験勉強前は簡単なSQLを書くことができる程度のスキルしか持っておらず、DB運用周りの知識経験はない
- DB（PostgreSQL）に関する業務経験は、既存コードのSQLを読んだり簡単なSQLを書いたりするくらい

## OSS-DB Silver受験目的
今後より難易度の高い業務やDB運用に関わることを考えると当然OSS-DB Silverより上の知識が必要になりますし、今年に入ってからは業務内でもパフォーマンスを考えたSQLを書くことを考える場面があったことから、DBに関する知識不足を痛感していました。
専門書を読んでも理解進まないのでどうやって勉強しよう…と方法を模索していたそんな時にOSS-DB試験の存在を知り、調べてみるとSilverはレベル的にも自分のステップアップにちょうど良いと分かったので受験を決めました。

## 勉強方法

参考書にあるPostgreSQLに関する基礎知識が定着してきたと思えるまで、参考書や解説動画でのインプットと、問題集でのアウトプットを繰り返しました。
**「運用管理」、「開発/SQL」のSQL部分の配点が高い**ので、確実に取れるよう勉強時間の比重は高くしていますが、基本的にどの分野でもまんべんなく得点できるように勉強しました。

私が勉強に使用した教材は以下の通りです。

#### 1　OSS教科書

OSS-DB Silverの参考書（認定教材）です。解説がわかりやすかったため私はこの教材を中心に勉強しました。

https://www.shoeisha.co.jp/book/detail/9784798180311

私の場合は、最初にざっと読んで概要をつかみ、その後問題を解きながらわからない箇所を復習していました。
ただ、後々振り返ると、最初に本全体を一周読もうとする前に、読み進めて難しいと感じた部分は解説動画（後述します）を見て勉強したほうが効率良かったのではないかと感じています。
問題は模試も含めて150問ほどあり、試験直前まで繰り返し解きました。（最終的に9割ほど理解して正解できる状態になりました）
なお、教材内のサンプルを見て実機で動かしながら勉強することができるようになっているので、ご自身のPCで開発環境を整えて実際に動かしながら読み進めることをお勧めします。定着が早くなります。

#### 2　技術解説セミナーアーカイブ動画 (YouTube)

試験実施元のLPI-JAPANが過去に開催したOSS-DB silver技術解説セミナーのアーカイブ動画です。

https://www.youtube.com/playlist?list=PLAsEyLm5aGOAGTLHkzcQM7liQD87cobcm

先述の通り、私は運用周りの知識経験がなく試験勉強中にも苦手意識を感じていたため、運用管理部分のセミナーを中心に視聴しました。こちらのセミナーを見たことで躓いていた部分の理解が進んだので、本で難しいと感じた部分は、早いうちから動画を見ておけば良かったと思いました。

#### 3 　公式サンプル問題

試験実施元のLPI-JAPANが出しているサンプル問題です。すべて合わせると300問ほどあるのではないかと思います。

https://oss-db.jp/measures/sample

OSS-DB教科書の問題だけでは少し問題演習量が物足りないと感じたため、こちらを１周しました。同じ問題ばかり解いていると、その問題集の傾向に順応しすぎてしまう可能性もあるので、試験対策的には複数の問題集を解いてみるのも良いと個人的には思います。
ただ、例題の解説は懇切丁寧というほどでもないので、公式サンプルよりも丁寧な解説の問題集を求める方は、（有料にはなりますが）他の体験記等でも紹介されている[Ping-t](https://mondai.ping-t.com/g)等を利用されるのが良いかと思います。別の試験対策でPing-tを利用したことがありますが、解説はかなり詳しいです。

## 受験結果

**合格(82点/100点)**
| セクション名 | 正答率 |
|:-:|:-:|
|  一般知識 | 87%  |
| 運用管理  | 80%  |
| 開発/SQL  | 81%  |

## 受験した感想

#### 勉強開始前の想定よりも難しかった

他の合格体験記等を見て、勉強にはそこまで時間がかからないのでは、と思っていましたが、実際に勉強を始めてみると、正直勉強前の想定よりも難しく感じました。
というのも、私の場合はSQL以外にDBの知識がほとんどなく、開発/SQLのセクション以外はほぼ1からの勉強になってしまったためです。（開発/SQLのセクションでも知らなかったことが結構ありました）。関数やコマンド等の知識暗記にも思いのほか苦戦しました。
自分のDBに関する知識・経験を踏まえて試験日程を設定することをおすすめします。

#### SQLの入門書をマスターした後のステップアップに最適

OSS-DB Silverは、SQL入門書をマスターしてPostgreSQLを使う(or使う予定のある)人が、専門書を読み進めて勉強することができるような基礎知識を増やすために最適だと思います。（SQLの完全初心者は先にSQLの入門書で勉強したほうが良いです。）
今回OSS-DB Silver取得のために勉強したことで、明らかにDB(PostgreSQL)に関する知識はつきましたし、これまで理解が難しいと感じていた専門書も読み進めることができるようになりました。
DBに限りませんが、入門書と専門書の間を埋める技術書って案外少なかったりするので、OSS-DB Silverの勉強をその位置づけにすることができ、非常に良かったと思っています。

## おわりに
私はOSS-DBの試験を知ったのが１年目の終わりだったので仕方ないですが、もっと早く知ってれば１年目に受けたかったです。
これから実務や専門書等でDBのスキルを伸ばし、いつかは上位資格であるOSS-DB goldも取れたら良いな、と考えています。
pklを使ってみた　その3

個人的「質はともかく継続する」23日目です

## pklを使ってみた　その3

クラスを作成することもできるようです。

```pkl
class parent {
    name: String
    money: Float
    flag: Boolean
    city: String
}

child: parent = new {
    name = "文字型"
    money = 160.13
    flag = false
    city = "東京"
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/97ce23e7-f541-294e-07b9-76b85f8d979b.png)


継承も出来るようです。

```pkl
class parent {
    city: String
    name: String
    money: Float
    flag: Boolean
}

child: parent = new {
    city = "東京"
    name = "文字型"
    money = 160.13
    flag = false
}

child2: parent = (child) {
    city = "大阪"
}

child3: parent = (child) {
    city = "福岡"
}
```

child2,3はcity以外はchildから継承されてますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45303/d6f07462-0fa0-6110-020e-6d948a051bcc.png)

## まとめ

クラスがあることで、さらに使う場所がありそうな気がしてきました。
【ChatGPT＋DALL-E3】【Dream Machine】の動画を作るために、パノラマ画像を四分割する。


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

　今回は、Dream Machineの動画用に、パノラマ画像を生成したので、それを四分割します。

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

　さっそく本題です。

　動画撮るなら
　　どんなシーンを
　　　撮りますか？

　Apple Vision Proが
　　日本で販売されましたが
　　　60万円なんて出せません😭

　いや、そういう話ではなく、
　　ああいうVRデバイスが
　　　登場したのですから、
　　　　当然ながら、
　　　　　それ用のコンテンツが
　　　　　　必要になりますよね。

　まぁ、すぐには
　　使えませんけど。

　とにかく、
　　それっぽいことを
　　　やりたいな、と考えたわけで。

　全周囲を見られたら良くない？と
　　Dream Machineで
　　　やろうと思ったのでした。

　Keyframe機能を
　　使えばいいのだから
　　　分割して渡していけば
　　　　いいだろう、と
　　　　　考えたわけです。

　ということで
　　パノラマ画像を四分割します。
***
　では、
　　やり方です。

　とはいえ、
　　パノラマ画像は
　　　みなさんのお好きにどうぞ。
　　　　アスペクト比を横長（16:9）で
　　　　　作成してください。

　今回、私はこれを用意しました。
![1719716254167.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/7aeed165-88e8-d4b6-e0d1-031e89e73ed9.jpeg)

　手順です。
　
　❶GPT-4oであることを確認
　❷元動画をアップロード
　❸Prompt入力
```Text:
これをCodeInterpreterで四等分にしてください。
```
　❹送信
　❺四つのダウンロードリンクが表示
　❻ダウンロード

　もちろんですが
　　確認してくださいね😅

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

　今回は、ここまで。
LealfetでクリックしたらJavaScriptを動作させたい！

## またもやLeafletの記事です。
さて、今回は、Leafletのマーカーやオブジェクト等をクリックした際に、JavaScriptの関数を動作させたい！となったときに見る記事です。
↑？？？？

## なんで必要になったか
わたしが開発している、[アメダス天気Viewer](https://nanka.cloudfree.jp/webapps/amedas/)という<font color="888888">(ウェザ◯ニュ◯スのパクリみたいな)</font>アプリで、アメダス観測点をクリックした際に、グラフを描画する機能をつけようと思ったところが始まりでした。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637649/68ee2fd3-6457-43bc-d24c-b427ed599a3c.png)


## どうするか。
実は結構簡単で、マーカーオブジェクトとかに、

```javascript
circle.on('click', function(e) { createGraph(element[0], e);});
```

とつけるだけで動作が実現できます。

`circle`というのは、

```javascript
var circle = L.marker(amedas_latlng, …
```

のように、オブジェクトを宣言した変数です。

```javascript
circle.on('click', function(e) { createGraph(element[0], e);});
```

さっきのこれであれば、クリックしたときに、`createGraph()`という関数を実行できます。
ここまでで以上です。

次に引数の便利な使い方を書きますね。

引数の`element[0]`というのは何番目の観測点か、
`e`というのはこの下で解説します。

## `e`とはなんぞか
`e`はとても便利なもので、そのオブジェクトのプロパティを持ってきてくれます。
まあ実演したほうが早いので実演します。

```javascript
circle.on('click', function(e) { createGraph(element[0], e);});
circle.kjName = element[1]['kjName']; //(中身の例は「大阪」)
circle.knName = element[1]['knName']; //(中身の例は「オオサカ」)
```
じつは先程の続きはこうなっていて、
`circle.kjName`とかいう変なプロパティをつけられていることがわかります。

そして、引数の渡し先の関数を見てみると、

```javascript
function createGraph(stationID, e) {
console.log('createGraph('+stationID+', '+e.target.kjName+'('+e.target.knName+')'+')');
```

`element[0]`が`stationID`という引数に、`e`はそのまま渡されています。
そして、その下には…！

<b>`e.target.kjName`</b>

ありました！`kjName`！

そして、このconsole.logの出力は…！

```javascript
createGraph(62078, 大阪(オオサカ))
```

### じつはこの`e`は…
じつはこの`e`というのは、
```javascript
circle.kjName = "大阪";
```
とつけたプロパティが
```javascript
e.target.kjName //(出力⇛「大阪」)
```
というので取り出せるのです！

これで、Leafletの点をクリックしたときに、その点にあった動作を可能にできます。
今回の例では、その点のグラフを作成すると言ったように、LeafletとJavaScriptを連動させることができました！

## わからなければ
わからなければ、いったん`e`を`console.log`かなんかで出力して実態を探ってみてください。
そうすればどこにプロパティが来ているのか、また他の情報も探ることができて面白いですよ！

以上です。
Amazonの字幕（ttml2）をテキストファイルに変換する

### ソース

```ttml2text.rb
require 'nokogiri'

doc = Nokogiri::parse($stdin.read)

doc.css('p').each do |node|
  line = node.xpath('.//text()').map do |e|
    words = e.text
    words.strip!
    words if words.length > 0
  end.compact.join(" ")
  puts line
end
```

### 使い方

```lang:bash
ruby ttml2text.rb < インプットttml2 > アウトプット.txt
```

### ソース解説

- Amazonプライムの字幕データはHTMLっぽいXML
- pタグが字幕データそのものなので、`css('p')` で字幕ノードを取得
- 細かいメタデータを削除したいので、 `xpath('.//text()')` でテキストノードを取得
- 空白のテキストノードを削除してつなげる
- brとかで区切られたテキストノードは空白でつなげる

### ttml2の見つけ方

devtoolsのフィルタ機能で`ttml2`でフィルタする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53489/a153c3f9-207b-69a4-e4de-a994fbdaca19.png)

あとは名前欄をダブルクリックすればダウンロードが始まる（Chromeの場合）。
SES面談のコツ（経験者向け）

## 前書き

私はIT業界で3年ほどSESエンジニアとして仕事をしています。
最近、現場変更にあたって面談を受ける機会が多く、改めて気づきがあったので記事にしました。
特に大事だと思った点について2つに分けてお話ししたいと思います。

## 1.準備

客先での面談に挑むにあたり、一番大事なのが事前準備です。
準備をしているかどうかによって面談での受け答えの速さと質に大きく影響します。

#### 1.1 案件の情報にしっかり目を通す
・どんなシステムをさわるのか？
・使う言語やツールは？
・担当する仕事内容は？

#### 1.2 自己紹介のカンペを作る
さきほど調べた案件情報を踏まえて、自己紹介でアピールする内容をリストアップしていきます。

例えば、
・金融機関でのシステムを触る
→「（経歴書を見ながら）XX番の案件で同じ金融機関のシステムで保守を行っていました。」

・Javaを使う
→「（経歴書を見ながら）XX番の案件でJavaを使って開発を行っていました。」

・基本設計から担当
→経験があれば、「（経歴書を見ながら）XX番の案件で基本設計から携わっておりました。」
→経験が無ければ、「経験はないのですが、チャレンジしたいと思っております。」

そして、上記だけでは自己紹介としてあまりに短いのでどの案件でも共通の自己紹介を最初に入れます。
ただし、長くなりすぎてもダメなので注意しましょう。

例：「業界4年目で、詳細設計から単体テストまでの経験があります。得意な言語はJavaとPHPで、それぞれ2年ほど経験があります。Git,SVNやDockerも使えます。5~6名でのチーム開発も行ったことがあります。コミュニケーションが得意です。」

また、本番で自己紹介の前の案件説明で新しい情報が入ってきた場合、それに対するアピールも臨機応変に盛り込めるとなおよしです！

#### 1.3 逆質問を考えておく

だいたい最後に、質問がないか聞かれます。
この際に、一言目から特にありませんと答えると、受け身な印象を残してしまうので、とりあえず1つか2つはテンプレートでもいいので質問しましょう。

・現場での服装は？
・勤務時間は？
・現状のメンバー規模は？
・現場の雰囲気は？
・参画までに勉強しておいた方がいいことは？
などなど


## 2.面談中に気を付けること

#### 2.1 挨拶をする、敬語を使う

一応向こうも客なので最低限のビジネスマナーを守る必要があります。
特に、常駐先の外部の人間と関わることがある案件だと、これができないと落とされる可能性が高くなります。

・お世話になります
・よろしくお願いします
・ありがとうございます
など

#### 2.2 笑顔を見せる

ずっと無表情だと、一緒に働きにくそうだと思われる可能性があるので、要所要所で笑顔を入れるようにした方がいいですね。

#### 2.3 結論から話す

質問された際に、だらだらと話し始めると結局何がいいたいのか伝わりません。
ただし、簡潔すぎてもダメで結論＋補足を意識しましょう。

例：「リーダー経験はどれぐらいありますか？」

NG「～の案件では、～をしていて、メンバーが～人いて～、～の案件では～」
NG「あります（もしくは、ないです）」

OK「合計で半年ほど経験があります。～の案件では～」

#### 2.4 単価の話はしない

単価いくらぐらいでますか？とかは聞かない方がいいです。
面談ではあくまで案件情報の理解と、自分のアピールに集中しましょう。
[Ruby] メモリと見るshallow copy

最近勉強して出てきた`shallow copy`について、まとめてみます。
新米エンジニアなので、誤りがあったらご指摘ください:santa:

# shallow copyとは
かなりざっくり「**外見は別物だけど、中身は一緒だよ**」というコピー<br>
- **aオブジェクト**と、それをコピーしてできた**bオブジェクト**があった場合...

    1. aオブジェクトとbオブジェクトは、別々の`object_id`だよ(**外見は別物**)<br>
    2. aオブジェクトとbオブジェクトが指してるオブジェクト(配列の要素など)の参照先は一緒だよ(**中身は一緒**)

<br>
というコピーのこと。

Rubyだと、`clone`や`dup`で`shallow copy`ができます。


文字だけだと何を言っているか分かりにくいので、次にいきましょう。

# 見てみよう
※分かりやすくするために、`object_id`をメモリの番地としています。(`object_id`は適当です）

#### 1. `shallow copy`元と、`copy`先の`object_id`は別々ある(外見は別物)
```
a = ["a", "b", "c"]
b = a.clone

# 外見は別物
p a.object_id  # 60
p b.object_id  # 80
```

![スクリーンショット 2024-06-30 10.30.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658691/a601ae3e-8784-cebd-76d5-280a00e83561.png)

#### 2.  `shallow copy`元と、`copy`先が指してるオブジェクトの参照先は一緒(中身は一緒)
```
a = ["a", "b", "c"]
b = a.clone

# 外見は別物
p a.object_id  # 60
p b.object_id  # 80

# 中身の参照先は一緒
p a[0].object_id  # 10
p b[0].object_id  # 10

p a[1].object_id  # 20
p b[1].object_id  # 20

p a[2].object_id  # 30
p b[2].object_id  # 30
```

![スクリーンショット 2024-06-30 10.33.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658691/f6a18106-5528-bc23-ec68-de7305a2d154.png)


# 外見が違うと
外見が違う(`object_id`が異なる)ので、aオブジェクトに対する変更(外見に対する変更)は、bオブジェクトに影響を及ぼしません。
<br>
- aオブジェクトに要素`"d"`を追加する
```
a = ["a", "b", "c"]
b = a.clone

a.push("d")

p a  # ["a", "b", "c", "d"]
p b  # ["a", "b", "c"]

p a[3].object_id  # 40
```

![スクリーンショット 2024-06-30 10.47.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658691/532a45cb-c375-a583-27ac-d4beb8161da5.png)
<br>
- aオブジェクトの`[0]`要素の参照先を変更する
```
a = ["a", "b", "c"]
b = ary.clone

a[0] = "d"  # 破壊的な変更ではなく、参照先の変更なので、新しいオブジェクトが作られる

p a  # ["d", "b", "c"]
p b  # ["a", "b", "c"]

p a[0].object_id  # 40
```

![スクリーンショット 2024-06-30 10.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658691/beb97ff0-074b-5361-8977-b154f08c270f.png)


# 中身が一緒なので
こんなことが起こります。
#### 参照先に破壊的な変更を加えると、両方とも変わる

```
a = ["a", "b", "c"]
b = ary.clone

# 参照先に破壊的変更を加える
a[0].upcase!

p a  # ["A", "b", "c"]
p b  # ["A", "b", "c"]
```

![スクリーンショット 2024-06-30 10.35.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658691/a1a55ec9-9a35-47ba-6e42-7462ac63b0b4.png)


# そもそも`=`と`clone`の違い
ここで、`=`の挙動も見て、`clone`との違いを確認しましょう。
```
a = ['a','b','c']
b = a  # aが参照しているのと同じメモリ番地にある['a', 'b', 'c']を、bも参照するようになる

p a.object_id  # 60
p b.object_id  # 60
```

![スクリーンショット 2024-06-30 11.08.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2658691/a309c2f9-d9f9-ba00-6cbc-2c0436b50eb1.png)




## 参考
### shallow copyについて

https://docs.ruby-lang.org/ja/latest/method/Object/i/clone.html

https://qiita.com/oyrarumakan/items/5cfcac1b8e67184641f1

<br>

### メモリ？番地？参照？という方へ

https://qiita.com/yusuke_blog1026/items/7261ccaf23214dacb37b

https://zenn.dev/mesi/articles/d57f717dac5c14

https://magazine.rubyist.net/articles/0032/0032-CallByValueAndCallByReference.html
Livebook で合字 ligature リガチャーを楽しむ

## はじめに

Livebook 0.13.0 から合字 = ligature = リガチャーが使えるようになりました

合字とは複数の文字を一つの文字に合成した文字のことです

つまり `|>` を一文字の横三角にすることです

論より RUN なのでやってみましょう

## 設定

Livebook の左メニュー "Settings" を開き、最下段 "User settings" の "Code editor" 内にある "Render ligatures" を ON にしましょう

:::note info
デフォルトは OFF です
:::

![スクリーンショット 2024-06-30 10.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/35a74736-8366-068b-3cba-a98921963476.png)

## 実践

新しいノートブックを開いて `|>` と入力してみましょう

![ligature.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0b8f2067-3f67-b60f-9a57-6b64c5260ec8.gif)

見事に1文字の横三角になりました

ON にしているとこんな感じになります

![スクリーンショット 2024-06-30 11.02.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/ba81ae98-9812-8286-815b-cc3ce57e0d59.png)

![スクリーンショット 2024-06-30 11.03.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/78e2986a-7386-9b08-aa08-dfa871b1ed27.png)

## 対応しているリガチャー

Livebook で使っているのは JetBrains Mono フォントです

このフォントで対応している合字が使えます

"等幅リガチャー" のところに表示されているのが合字の一覧になります

https://www.jetbrains.com/ja-jp/lp/mono/

リガチャー OFF の場合

![スクリーンショット 2024-06-30 11.20.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/7bdb1240-4cce-63bf-fe6d-ef5117b38a7b.png)

リガチャー ON の場合

![スクリーンショット 2024-06-30 11.17.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/6e43e3a6-5b45-c3e3-fb5e-081c0969ab2b.png)

## まとめ

リガチャーを使うことで、コードが少しスッキリしてカッコよく見えます

ただし、リガチャーを知らない人には分かりにくくなるため、使いどころは気をつけましょう
LeafletのremoveLayer()でつまづいたこと。

## LeafletのremoveLayer()とは？
`removeLayer()`とは、Leafletという地図ライブラリから、マーカーやポリゴン、その他もろもろを消すときに使うものです。
`map.removeLayer(レイヤーの名前)`という形で使います。

## つまづき① レイヤーの名前…？
さて、2年前の私、震度分布図を開発しよう！と言って、Leafletの沼へ沈んでいったのですが、
あれ？マーカーを消さないといけないんだけど、どうやって消すんだろう？と、思い立って調べてみることにしました。

そうしたら、`map.removeLayer(レイヤーの名前)`でできますよ～って感じのものが、調べて10分くらいしたら出てきたので、ほーん、やってみようではないか。と思い立ち実装してみることにしました。

:::note alert
ちょっと当時の感覚が出てきたので愚痴りますが、
なんかLeafletのレイヤー削除周りの解説って少なくないですか？
ん？わたしの検索能力が低い…？
:::

そして、ん？レイヤーの名前？というところにつまづいて、
その時私は`pane`、つまり重ね順をコントロールするやつをちょうど実装した後だったので、**レイヤーの名前か…。paneの名前で行けるやろ**とかいうノリでpaneの名前をぶち込みました。

**もちろんレイヤーは消えません。**

なぜなら、paneはただのスペースであり、マーカーやポリゴンのようなオブジェクトではないからです。

結論から言ってしまうと、レイヤーの名前とは
```javascript
var shindoLayer = L.layerGroup();
```
の<b>`shindoLayer`</b>の部分であったり、
```javascript
var shingen_icon = L.marker(lnglat, { icon: shingenIcon, pane: "shingen" }).addTo(map);
```
の<b>`shingen_icon`</b>の部分、つまりオブジェクトの変数名だったのです。

それを知った私、なーんだ簡単じゃない。とすぐさま改修に移りますが、ここでもエラーは出ます。
次に移ります。

## つまづき② なぞのundefinedError
さて、`removeLayer(レイヤーの名前)`のレイヤーの名前がわかった私ですが、
```javascript
QuakeSelect() {
    map.removeLayer(shingen_icon);

    var shingen_icon = L.marker(lnglat,…
}
```
としていたんですね。

さあて、これで解決だ！残念だったなLeaflet、お前が私に抗うには100年早かったなとかいう謎の自信を胸に、いざ実行させてみました。

:::note alert
Uncaught ReferenceError: shingen_icon is not defined
:::

うーん。だめですね。

なんで？
それは簡単でした。

:::note info
関数を実行するときに`shingen_icon`が定義されていないから！
:::

そんならどうすんの？と思った私は次のステップへ

## つまづき③ 先に定義するも…
前の解決策は簡単ですね。
なぜなら、定義されていないのであれば、先に定義しておいてあげたらいいだけですので。
よって、
```javascript
QuakeSelect() {
    var shingen_icon;
    map.removeLayer(shingen_icon);

    shingen_icon = L.marker(lnglat,…
}
```
こうなります。
先に定義しておいたらエラーとはなりません。

**しかし**、エラーとはなりませんが**マーカーは削除されません。**
なぜなら、`QuakeSelect()`が実行されるごとに、`shingen_icon`が定義されてしまっているので、前に`QuakeSelect()`を実行したときにのshingen_iconとは別物になってしまっているからです。

## やっと解決
```javascript
var shingen_icon;
QuakeSelect() {
    map.removeLayer(shingen_icon);

    shingen_icon = L.marker(lnglat,…
}
```

そして解決策は、関数が実行される前に変数を作っておくことで、マーカーを削除できるようになりました。
これなら、再定義されませんので、前のマーカーを消すことができます。

## まとめ
よって、Leafletでのマーカーやポリゴン等、オブジェクトの消し方は、

**① 消す関数の外側に、アイコンを定義する変数をおいておく**
**② そして、消す**

でした。

以上です。
何を書きたかったのでしょうか。
ファイル操作の基礎：閉じたファイルオブジェクトと再オープン時のエラー


# 閉じたファイルオブジェクトに対する操作

以下のコードは、ファイルを書き込み用に開き、テキストを書き込む処理です。
最後にファイルを閉じる操作を入れないと、ファイルを開くために確保したメモリが解放されなかったり、整合性と排他制御の問題からファイル操作が正常に行われなかったりします。

```ruby
# File.openでファイルを開き、File.closeで閉じる
file = File.open("example.txt", "w")
file.puts "Hello, world!"
file.close

# もしくはブロックで囲むことで、勝手にファイルが閉じられる
File.open("example.txt", "w").do |file|
  file.puts "Hello, world!"
end
```

ここまでは問題ないですが、一度ファイルを閉じた後に対象のファイルオブジェクトを再利用しようとすると、当然怒られます。

```ruby
file = File.open("example.txt", "w")
file.write("Hello, world!")
file.close

begin
  file.read
rescue IOError => e
  puts "Error: #{e.message}"
end

# Error: closed stream

# File.openに先程のファイルオブジェクトのパスに指定した場合も
# 閉じたファイルオブジェクトを再利用しているのでエラー
begin
  file = File.open(file.path, "r")
rescue IOError => e
  puts "Error: #{e.message}"
end

# Error: closed stream
```

# 解決法

閉じたファイルを操作したいなら、閉じたファイルオブジェクトは使わず、ファイルパスから新しいファイルオブジェクトを再生成することで、エラーを回避できます。

```ruby
file = File.open("example.txt", "w")
file.write("Hello, world!")
file.close

begin
  new_file = File.open("example.txt", "r")
  content = new_file.read
  puts content
  new_file.close
rescue IOError => e
  puts "Error: #{e.message}"
end
```

# 一時ファイルオブジェクトとの挙動の違い

ちなみに Tempfile クラスで作成した一時ファイルオブジェクトの場合は少し挙動が異なります。

```ruby
require 'tempfile'

temp_file = Tempfile.new("example")
temp_file.write("Hello, Tempfile!")
temp_file.close

begin
  new_temp_file = File.open(temp_file.path, "r")
  content = new_temp_file.read
  puts content
  new_temp_file.close
rescue IOError => e
  puts "Error: #{e.message}"
end
```

一時ファイルを閉じた後で再度操作するには、新しいファイルオブジェクトを作成するのは同じですが、Tempfile の場合、閉じた一時ファイルオブジェクトからでもファイルパスを参照できます。
よって、そのパスから File.open で再度ファイルオブジェクトを作成できます。

# まとめ

基本は必要なファイル操作を実施してから、最後にファイルを閉じるべきだと思います。
ただ、どうしても再度ファイル操作が必要になる場合は、閉じたファイルオブジェクトを再利用せずに、新しいファイルオブジェクトを作成することで、エラーを回避できそうです。
Llama-3-ELYZA-JP-8Bをwslで動かす

## 前提
wsl上でDockerが動作し、ollamaとopen-webuiがインストール済みであること
- Windows 11
- Ubuntu 22.04
- DockerはLinux版 version 27.0.2, build 912c1dd
- ollamaとopen-webuiは[こちら](https://qiita.com/kiyotaman/items/cf405a654cee1f21641f)を参考に入れてあること
- ollama version 0.1.48

### Docker上で動くollamaのコンテナIDを特定する
```$ docker container ps```
で出てくるコンテナIDを使う
```$ docker container exec -it <コンテナID> bash```
でDockerの中に入る
### Docker内でELYZAのモデルファイルを取得する
[リンク先](https://huggingface.co/elyza/Llama-3-ELYZA-JP-8B-GGUF/tree/main)のggufファイルをwgetか何かでダウンロードしてくる

### モデルファイルを作成する
ダウンロードしてきたggufファイルと同じディレクトリで以下の内容のModelfileを作成する
```
FROM ./Llama-3-ELYZA-JP-8B-q4_k_m.gguf
TEMPLATE """{{ if .System }}
system


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


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


{{ .Response }}
"""
PARAMETER stop "
"
PARAMETER stop "
"
PARAMETER stop "
"
PARAMETER stop "<|reserved_special_token"
```
### モデルを生成する
```#ollama create elyza:jp8b -f Modelfile```

### 動作テスト
```#ollama run elyza:jp8b```
プロンプトが出てくれば勝利。/byeで抜けて大丈夫。

ここまでやればDockerを抜けて、open-webuiをリロードし、ELYZAモデルが追加されているはず。

# 参考
https://qiita.com/s3kzk/items/3cebb8d306fb46cabe9f

https://qiita.com/kiyotaman/items/cf405a654cee1f21641f
WindowsでショートカットへドロップしたファイルをLinuxへアップロードする方法

## はじめに

Linuxへ一つだけファイルをアップロードするのに、scpコマンドを書くのも、クライアントを起動するのも面倒な人(自分)向け

ファイル(or フォルダ)をドラッグアンドドロップだけでサーバーへ転送する、ショートカットファイルの作り方です

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276579/3121f080-1d2f-1851-9b13-40adbbf05e8f.png)

* 要git-bash(gitインストールすると入ってます)

https://github.com/murasuke/drop-to-upload-shortcut

## 仕組み

* シェルスクリプトを実行するバッチファイル(`run_upload_sh.bat`)を作る
  * バッチファイルからドロップされたファイルパス(%1)引数につけて、シェルスクリプトを実行する
* 引数で渡したファイルをサーバーに転送するシェルスクリプト(`upload-drop-files.sh`)を作る
  * 引数のパスの区切り文字が異なるので置換する(\⇒/)
  * パスがディレクトリの場合は、tarで圧縮してからサーバーにアップロードして解凍する
  * ファイルの場合はそのままアップロードする
  * アップロード先はログインユーザーのhome(~/)ディレクトリ
  * ファイルのアップロードは[scpではなくsshへリダイレクト](https://qiita.com/murasuke/items/3140ed29d913df837c66)する手法を利用
* バッチファイルのショートカットを作成する
  * ショートカット上でファイルをドロップすると、ドロップされたファイルパスが引数に渡されて実行される(Windowsの仕組み上)

## 作成するファイルと手順

### バッチファイル(run_upload_sh.bat)

* 引き渡されたファイルのフルパスは`%1`にセットされている
* base.exeを呼び出し、アップロードシェルスクリプトを実行する

```bat
@echo off
set scriptPath=./upload-drop-files.sh

"C:\Program Files\Git\bin\bash.exe" -c "%scriptPath% \"%1\"
```

### シェルスクリプト(upload-drop-files.sh)

* ssh経由でファイルをパイプして、ログイン先のホームディレクトリに保存
* `SSH_PARAM`(ssh接続用引数)は適宜書き換えてください
  * 鍵ファイルを利用する場合は、`-i *****.pem user@server`のような感じ
  * `.ssh/config`に設定済みの場合は、設定した名前

パスからファイル名などを取り出す方法については
[こちら(ファイルパスからファイル名や拡張子を自由に取り出す)](https://zariganitosh.hatenablog.jp/entry/20100921/get_file_name_ext_dir)をご参照ください

```sh
#!/bin/bash

# ssh接続用引数(-i *****.pem user@server)
SSH_PARAM=xxxxxx

ARG=${1//\\//} # パスの区切り文字を置換(\⇒/)

if [ -d "$1" ]; then
    # 引数がディレクトリの場合、圧縮してからアップロード(解凍も行う)
    UPD_PATH=${ARG%/} # パスの最後の'/'を削除(あってもなくても動作するように)
    DIR_NAME=${UPD_PATH##*/} # パスの最後のディレクトリ名

    echo "Upload '$UPD_PATH' directory to '~/$DIR_NAME'"
    tar -zcf - -C "$UPD_PATH/.." $DIR_NAME | ssh $SSH_PARAM "tar zxf - -C ~/"
else
    # 引数がファイルの場合、sshにパイプで渡してそのまま保存
    echo "Upload '$ARG' file to '~/${ARG##*/}'"
    cat $1 | ssh $SSH_PARAM "cat > ~/${ARG##*/}"
fi
```

### 設定手順

* シェルスクリプトのssh接続用文字列を適宜変更する
* 上記２つのファイルを任意の同一フォルダに保存
* バッチファイルのショートカットをデスクトップに作成する(デスクトップに右クリックでドロップして作成）
* 以上

### 使い方

ショートカットにファイル、フォルダをドロップすれば、sshでログインしたユーザーのホームディレクトリにアップロードされます（既に存在している場合、警告なしで上書きします）
SCRUM BOOT CAMP THE BOOK を読んで#1

こんにちは。Shaulaです。会社でアジャイル関連の部署に配属されましたので、勉強のため[SCRUM BOOT CAMP THE BOOK](https://www.shoeisha.co.jp/book/detail/9784798167282)を読みました。そのまとめとして記事を投稿します。  
今回は基礎編。用語がたくさん登場したので文章量多めです。

# アジャイル開発とは？

- 一度に全てではなく、少しずつ動作するものを作って届けて評価を受けることを繰り返す
- 利用者の反応や関係者からのFBを受けながら作っているもの自体や計画を調整する
- ステークホルダは目的達成のためにお互い協力する
- <font color="Red">アジャイルとは単一の開発手法ではなく、似たような開発手法に共通した価値観と行動原則つけられた名前である</font>

# [参考]スクラムガイド

[https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf)

# 開発の主な手法

- スクラム
- エクストリームプログラミング
- カンバン

# スクラム

主な特徴

- 短い時間（＝タイムボックス）に区切って作業を進める
- 透明性の担保　＊現在の状況や問題点を常に明らかにする
- 検査をする　＊定期的に進捗状況や進め方に関する問題点を確認する
- 5つのイベント、3つのロール、3つの成果物がある

## イベント

1. スプリント

    概要：開発の固定の期間
    
    - 最大１ヶ月（期間の長さが変わってはいけない）
    - 他のイベントのコンテナ（＝入れ物になる）

2. スプリントプランニング

    概要：計画を立てる。2つのトピックについて話す
    - トピック1「何を達成するか」
        - POは何がほしいのか、Devはどこまでできるのか、について話す
        - プロダクトバックログリファインメントを行う
    - トピック2「Devがどのようにしてプロダクトバックログを達成するか」
        - スプリントバックログを作成する

3. デイリースクラム

    - 朝会とも呼ばれる
    - 3つの質問：昨日やったことは？今日やったことは？今起きている問題は？
    - ただし、問題解決の場ではない
4. スプリントレビュー

    - 主催はPO
    - ステークホルダーに対して成果物をデモする
    - 完成しなかったバックログ、問題点、進捗について議論する
5. スプリントレトロスペクティブ
    
    - うまく仕事を進められるように改善を繰り返す
    - 人、関係、ツール、プロセスの観点でうまくいったこと、今後の改善点を整理する
    - 一度にたくさんのことを変えようとしない

## ロール

1. プロダクトオーナー（PO）
    
    概要：プロダクトの価値を最大化する
    
    仕事：プロダクトバックログの管理と更新、バックログ項目が完成しているかの確認、予算の管理
    
2. 開発チーム（Dev）
    
    概要：モノを作る、3〜9人のチーム
    
    - 機能横断的なチーム
    - 自己組織化（仕事の進め方は外部から指示されず、全体で責任を持って作業を進める）
3. スクラムマスター（SM、ScM）
    - フレームワーク、仕組みがうまく回るようにする
    - マネージャーや管理者ではない
    - スクラムの外部からの妨害から、POやDevを守る

以上3つのロールを合わせてスクラムチームと呼ぶ

## 作成物

1. プロダクトバックログ
    
    実現したいことをリストにして並び替えたもの
    
    - 順序は価値、リスク、必要性によって決定
    - 常にメンテナンスして最新に保つ
        - 項目を追加削除、定期的に見積もりをする
    - ユーザーストーリーという形式で書かれることが多い
2. スプリントバックログ
    - プロダクトバックログを具体的な作業に落とし込む
3. インクリメント
    - これまでのスプリントの成果＋今スプリントの成果
    - リリースするか否かに関係なく検査可能でなければいけない

# 完成の定義

- 何を持って完成とするのかを意識合わせする。例：コードレビュー、ユニットテスト、ドキュメント、デプロイなど

# ５つの価値基準

- 確約
- 勇気
- 集中
- 公開
- 尊敬

# 疑問点
1 予算を確保するのって誰がやるんだろう？PO？  
2 スプリントバックログの1つの作業の大きさってどんなもん？

# 感想
アジャイルやスクラムは資格勉強で言葉を知っているにとどまっていたので、基礎編を読むことで「へぇ、そうなんだ」となる点が非常に多かった。とくに、アジャイルは価値観と行動原則煮に付けられた名前であるという点が非常に印象に残った。ということはシステム開発に限らず、同様のイベントを行ったり価値観の元に動く組織自体を「アジャイルな組織」と言えるってことなのかなぁ。この辺りはまだまだ勉強が必要そう。  

# 参考文献
> 西村 直人, 永瀬 美穂, 吉羽 龍太郎. (2020). *SCRUM BOOT CAMP THE BOOK【増補改訂版】 スクラムチームではじめるアジャイル開発*. 翔泳社. [https://www.shoeisha.co.jp/book/detail/9784798167282](https://www.shoeisha.co.jp/book/detail/9784798167282)
【Python】リスト、Numpy配列、Series、DataFrame間のデータ変換

# はじめに
Pythonを使っていると、リスト、Numpy配列、Series、DataFrameのを行ったり来たりしながら作業を進めることが多いかと思います💡

問題は、リストをDataFrameにしたい！　とか、Numpy配列をSeriesにしたい！　とか、それぞれの変換方法が忘れがちなことです・・・・。

今日は、いつも困ったときに参考にさせて頂いているサイトをご紹介します。

# データ変換図
https://punhundon-lifeshift.com/python_list_numpy_series_dataframe_convert


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3091004/f7dc6c23-abbd-6df2-7cb4-bf71641bb1d9.png)


この図が素晴らしいです！
一発で、変換するときの方法を知ることができるので、よく参考にしています。

さらに具体的なコードも知りたい方は、リンク先に丁寧な解説があるのでぜひ✨

# 終わりに
ChatGPTに聞けば一発かもしれませんが、図を見ればコードのイメージが沸く人は、こっちでもいいかと思います💡
[Xcode]低速通信のテストのやり方

今日は低速通信テストの設定方法からやり方まで備忘録として残します。
以前、通信エラー画面の改修作業を行なった時に、いざテストと思った矢先に実機がないことに気付きました。
その際に擬似的にネット通信環境を悪くさせテストを行うやり方を習得したので、その方法をまとめます。

## 設定方法

まず初めに今のXcodeのバージョンを確認をします。
そしてAppleDevelopで「Additional Tools for Xcode」と検索しダウンロードを行います。
※私は15.3で利用してましたので、下記をダウンロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1789173/ed3e31c5-1192-fead-4dc3-aeb9c22c7d90.png)

次に進んでいくと「Hardware」→「Network Link Conditioner」と続くので、順にクリックしダウンロードを行います。
![スクリーンショット 2024-06-30 10.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1789173/820ce228-f960-3662-1127-6b0f7acd5382.png)
  ↓
  ↓
  ↓
![スクリーンショット 2024-06-30 10.15.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1789173/ee3211af-6b6d-78bc-8b40-1b76205a5752.png)
最後に設定画面を開くと「Network Link Conditioner」が追加されてます。
ここで「Profile」で通信の速度を擬似的に設定をすることが可能になります。
![スクリーンショット 2024-06-30 10.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1789173/1875fcdc-f88b-d198-6b3a-ba430ba4506f.png)

## まとめ
この設定自体ほとんど時間がかかりませんでした。
シミュレーターでテストを行うのもこれで完了できるので、やっておけばいざという時に役立ちます。

今日は以上です。
インプットから即アプリ作成を実施

週末に2日ほどJavascriptとReactの基礎を勉強した後、
学んだことのアウトプットとして簡単な学習記録一覧のアプリを作成しました。

今回は作成する中で難しかった部分などを共有していきたいと思います。

# 使用したツール
- React 
- Javascript
- VSCode
- Vite

# 作成したアプリの内容
アプリの内容を簡単にご紹介します。
①学習内容と学習時間をユーザーが入力できるようにする。
![スクリーンショット 2024-06-30 10.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/c902eff1-07a9-31f5-78ea-7baf817f4a7d.png)

②そして入力した内容が、入力ボックス下へ表示されるようにします。
![スクリーンショット 2024-06-30 10.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/56486d6c-c5cc-151f-ad0e-77568c7de060.png)

③最後に登録ボタンを押すと、学習記録として一覧表示されるようになります。
![スクリーンショット 2024-06-30 10.30.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/672fffe1-2657-9734-5915-b17351431b67.png)

④ボタンの下には登録した勉強時間の合計を表示させています。
![スクリーンショット 2024-06-30 10.30.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/b1f8b94b-6f6b-c3d6-46d6-8b62d9c1d36e.png)


⑤入力ボックスが空の時にはエラーが表示されます。
![スクリーンショット 2024-06-30 10.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3825671/b9ca32c8-1e23-abc0-df55-54542f62fc2c.png)

# 作成中につまづいた部分
### オブジェクトの理解が曖昧
インプットをしているときはすんなり理解できるのですが、いざ手を動かすときに「どうだったっけ？」と思ってしまうのがオブジェクトだとわかりました。
オブジェクトを変数に代入するなどはわかるのですが、実際にその代入された変数から値を取り出して使うという形になると理解が曖昧で使いこなせないのです。

今回はmapやreduce関数で配列の中にあるオブジェクトから中身を取り出して画面表示させています。
ただ、こういう場合に「オブジェクトから意図した値をどう取り出すんだろう」となり色々調べていました。
オブジェクトや配列の部分に関しては、自分なりに調べて一度他の記事にまとめていきたいと思います。

### 結局公式ドキュメントを最初に見るべきかも
上記のように今回reduce関数を使用しているのですが、初めて使う関数だったのでWebサイトで情報を探していました。
すると、あるサイトに以下のコードが紹介されていました。

```
配列.reduce(function(累積値, 要素) { })
```

上記のコードを使ってみて、画面を見ると全然動かない。。。という結果になってしまいました。

その後、[公式ドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) (公式といえないかもですが)をみてみると、
以下のように紹介されていました。

```
const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10
```
違いはどこかというと初期値の部分です。
前のサイトでは初期値の設定がされておらず、わかるまで少し時間がかかってしまいました。
初期値0を設定して修正をしてみると、すんなりうまくいき解決できました。

他のサイトは公式サイトよりもわかりやすいという利点があるので、今後の流れとしてはまずは公式ドキュメントを参考にして、他のサイトは公式ドキュメントの参考としていきたいと思います。

# さいごに

今回アプリを作ってみて、実際にインプットしたことを早速活かせるので「すごく楽しい」と思いながら進めることができました。
今まではインプットした後何もせず放置していたので、いかに自分の理解を確かめる機会を作っていなかったかということが改めてわかりました。

インプットを数日でささっと終わらせてその後すぐにアウトプットをするというのは、どの勉強法にも通じると思うので今後他の勉強にも応用して実践を重ねていきます。

# JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

https://projisou.jp/
Laravelのuniqueバリデーションで新規登録と更新で挙動を変える

## やりたいこと

Laravelバリデーションのuniqueについて、新規登録時と更新時で挙動を変えたい。
詳細は下記。

## 対象
- 会社テーブル（companies）の会社名カラム（name）

## 条件
- 新規登録時
    - すでに登録されている会社名と同じものは登録できないようにする
    - 論理削除されたものは対象外
- 更新時
    - すでに登録されている会社名と同じものは登録できないようにする
    - 論理削除されたものは対象外
    - 自分自身（今更新しようとしているデータ）はunique除外
        - 会社名以外の項目を更新した時にバリデーションがかかると更新ができないため

## 実装
カスタムリクエストで書いていきます。

app/Http/Requests/CompanyRequest.php
```php
// rulesメソッドだけ抜き取り
public function rules()
{
    $companyId = (int)$this->route('company');
    return [
        'name' => ['required', Rule::unique('companies')->ignore($companyId)->whereNull('deleted_at')],
        'post_code' => ['required'],
        'address' => ['required'],
    ];
}
```
`$this->route('company')`の`company`は、ルーティングで設定しているルートパラメータの値です。

routes/web.php
```php
Route::resource('/company', CompanyController::class)->except('show');
```
上記の場合、リソースコントローラーを使用しているので、ルートパラメータは`company`となります。

※リソースコントローラーについては下記をご確認ください。
https://readouble.com/laravel/9.x/ja/controllers.html

論理削除されたものを対象外にするのは、`->whereNull('deleted_at')`の部分。

以上！
自分用のメモですが、誰かの参考になれば幸いです。
firebase.jsのキー情報をGithubにpushしてしまったときの非公開方法

個人開発をしている過程で、firebase.jsのアクセスキー情報を
Githubに公開してしまっていることに気づき、対処したときの流れです。

webアプリはGithubからNetlifyでビルドして公開しています。
キー情報のみ非公開にしてビルドする時にかなり詰まったので備忘録。

私は独学でNext.jsを使って個人開発をしているのですが、「キー情報を公開してはいけない」
っていう認識がそもそも抜けていて、何も考えずにGithubにpushしていましたw

その状態で初めて完成したwebアプリを無事に公開！やったー

Githubにもコードちゃんと反映できてる！

え、でもGithubにfirebaseのアクセスキーとかそのまま載せてるな・・・？

これってセキュリティ的にいいんだっけ、もしかしてやばい・・・？

え、しかもGithubからもセキュリティのところでなんか言われてるー！

firebase.jsのアクセスキーとかもろもろ非公開にしなきゃ！ってなりました。



あせあせしながらwebで検索していると↓この記事に遭遇

https://qiita.com/KOBA-RYOTA/items/f62bb0e0f422092e5fff

これ読んで、キー情報だけ非公開にする方法を理解しました。

内容を要約すると
**「.env」っていう隠しファイル作ってこの中にキーを格納**
**変数として設定して、firebase.jsで変数名を記述すれば直接キーを記述しなくてよくなる！**
**そして.envは.gitinoreファイルでgithubにpushされないように設定すればよい！**

なるほどー！！これだ！ってなりました。

スクール通っていた時に.envファイル作成する手順は踏んでいたのですが、
とりあえずこれ作っておいて、みたいに教材に書かれていたので、意味は全くわかっていませんでしたが、
今回で.envの意味がやっとわかりました。

**次からは外部に出したくないキー等は.envファイルに入れる癖をつける**

そして記事に書いている通りに.envに

`REACT_APP_FIREBASE_API_KEY=xxxxxxx`

などのキー情報をつらつらと書いて保存！
.gitinoreにも.envを読み込まないように記述して、gitにpush！
Netlifyでビルド開始！

・・・エラー・・・・・・・・
環境変数が定義されてないよ！って怒られました。

原因は以下でした。

①「.env」ファイルに追加した「`REACT_APP_`」はReactの記述。
私はNext.jsで作ってたから「`NEXT_PUBLIC_`」を先頭につけないといけない

②「next.config.mjs」に以下のコードを記述
環境変数の前に「process.env.」を先頭につけることが重要。これがないと読み込まない。


```jsx
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  env: {
    NEXT_PUBLIC_FIREBASE_API_KEY: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN:
      process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    NEXT_PUBLIC_FIREBASE_PROJECT_ID:
      process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID:
      process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
    NEXT_PUBLIC_FIREBASE_APP_ID: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID:
      process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
  },
  output: "export",
};

export default nextConfig;
```

③「firebase.js」を以下のように変更
ここでも環境変数の前に「process.env.」を先頭につけることが重要。


```jsx
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

```

この記述でビルドが上手く行きました。あーよかった。


それから、Githubに公開したfirebase.jsのコードを削除できないか検索
なんか問い合わせないとむりっぽい・・・めんどう・・・、そんな時↓

https://zenn.dev/giba/articles/7eb5e4c4446769

この記事見つけて、新しいリポジトリ作ってそっちにコードを移動(個人開発だからできたことかも)

古いリポジトリの履歴からアクセスキーが見えてしまっていたので、非公開に設定

これで無事にアクセスキー非公開にしてGithubからも見えなくすることができました！

最後の新しいリポジトリに移動させるのは個人開発だからできたことかもしれませんが、
「.env」ファイルでキーを管理する記述は実務でも使う方法(のはず)なので、これからは機密情報の取り扱いは気をつけようと思います。
Databricksジョブのチュートリアルが追加されていました

気づいたら追加されていました。**ジョブ**にアクセスすると、**チュートリアルをロード**のボタンが。

![Screenshot 2024-06-30 at 9.24.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/5cdebbf4-271a-a62d-abdd-6763fc6cca94.png)

クリックすると**サンプルジョブを作成**に変わるのでもう一度クリックします。
![Screenshot 2024-06-30 at 9.25.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/98825f0f-aaef-9190-e988-4092cfadbd38.png)

ジョブが作成され、チュートリアルがスタートします。
![Screenshot 2024-06-30 at 9.26.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/23f4c3c1-507b-5237-428f-509c7d0fe64f.png)


指示に従ってタスクを追加します。
![Screenshot 2024-06-30 at 9.27.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/a5e64ada-0f27-1c66-6a3e-552422cbaad9.png)
![Screenshot 2024-06-30 at 9.27.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/0a9f9644-8386-b846-a2e6-a24a83cba84a.png)

ジョブができたのでスケジュールを設定します。
![Screenshot 2024-06-30 at 9.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/770dcb03-ad94-33d9-56ca-eb3899bceca4.png)
![Screenshot 2024-06-30 at 9.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/4beeaa85-f205-5cb0-616e-1db0f570273f.png)
![Screenshot 2024-06-30 at 9.29.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/84427368-e290-ec59-d6be-b4c8e187c39c.png)

スケジュールの設定は後でできますので、ここでは手動でジョブを起動します。
![Screenshot 2024-06-30 at 9.29.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/29f5509a-47ac-bbee-9612-c1d23aa28cda.png)

これでチュートリアルは完了です。
![Screenshot 2024-06-30 at 9.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/e314c91f-dba4-f78b-86e1-41814a9669c4.png)

是非お試しください！

### はじめてのDatabricks

[はじめてのDatabricks](https://qiita.com/taka_yayoi/items/8dc72d083edb879a5e5d)

### Databricks無料トライアル

[Databricks無料トライアル](https://databricks.com/jp/try-databricks)
【Android】Gradle8から有効になったR8を無効にする方法

# はじめに
Gradle8がリリースされたのが約1年ほど前ですが、Gradle8よりR8がデフォルトで有効になり、今でも8以降に上げると大体不具合の温床になり得るのがR8の設定かと思います。
主にライブラリが干渉することでクラッシュしたりするわけですが、その度プロガードに設定を追加したりして中々しんどいですよね。
そこで一時的にR8の設定を無効にする方法を備忘録的にまとめておこうと思います。

# R8とは？
R8はGradleのビルドシステムの一つで、Android用のProGuardの後継ツールになります。
アプリケーションのサイズを削減し、最適化するためのコードシュリンカーとオブフスケーターになります。

# R8を無効化する方法
無効化する方法は簡単で、gradle.propertiesに以下を追記するだけです。

```gradle.properties
android.enableR8.fullMode=false
```

設定は以上になります。
他にもGradle8より追加になったパラメータがあるので、ご自身のプロジェクトに設定がマッチしているかは確認してもらえればと思います。

https://developer.android.com/build/releases/past-releases/agp-8-0-0-release-notes?hl=ja#default-changes

# さいごに
6月ももうおしまいですね、今年も残り半分ですが後悔のないよう駆け抜けます！
MT7628のSPI

MT7628のspiのコードはmediatek/mtk_spi_v2.cなのですが、遅かったのでちょっと見てみました。

MT7621とMT7628はMT7620以前のチップとは互換がなくなっているようです。

MT7620以前がmtk_spi_v1でMT7621,7628がmtk_spi_v2です。私が作ったMT7620のFIFOサポートはmtk_spi_v3としてあります。

spiのクロックがデフォルトで設定されていたのでdtsの値を見るようにしました。

また読み書きがバイトアクセスになっていたのですが、8ワード(32バイト)単位でのアクセスが出来るようなので、読み込みだけその機能を使うようにしました。

https://github.com/ZRouter/freebsd-src/commit/b0efa0f0cd83e62f29ce879b5023d27c71dc99e9

8Mの読み込みが12秒くらいだったのが3秒台まで高速化できました。

MT7620のFIFOバージョン(v3)より早いようです。

MT7628はCS0とCS1で二つのデバイスが接続できるのですが、mtk_spi_v2は一本しかサポートしていません。CS1が引き出せる基板があったので、いつか対応したいと思います。

![MT7628_SPI.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/7636ac9d-2d0c-6a46-25f1-dc850da2a810.png)
Goのsql.Openは必ずしも接続を確立しない

## はじめに
タイトルのとおり、sql.Openは必ずしも接続を確立しないようです。

https://pkg.go.dev/database/sql#Open

> Open may just validate its arguments without creating a connection to the database. To verify that the data source name is valid, call DB.Ping.

DeepL翻訳
> Openは、データベースへの接続を作成せずに引数を検証するだけかもしれません。データ・ソース名が有効かどうかを確認するには、DB.Ping を呼び出します。

なので、DBの接続を確実にチェックしたいなら、Ping()を使います。

ヘルスチェックするときにも使えそう。

```go
package main

import (
	"database/sql"
	"fmt"
	"os"

	_ "github.com/go-sql-driver/mysql"
)

var (
	dbUser     = os.Getenv("DB_USER")
	dbPassword = os.Getenv("DB_PASSWORD")
	dbDatabase = os.Getenv("DB_NAME")
	dbConn     = fmt.Sprintf("%s:%s@tcp(127.0.0.1:3306)/%s?parseTime=true", dbUser, dbPassword, dbDatabase)
)

func main() {
	db, err := sql.Open("mysql", dbConn)
	if err != nil {
		fmt.Println("fail to connect DB")
		return
	}

	if err := db.Ping(); err != nil {
		fmt.Println("fail to ping DB")
		return
	}
}
```

## 参考図書
- [Go言語 100Tips ありがちなミスを把握し、実装を最適化する](https://www.amazon.co.jp/Go%E8%A8%80%E8%AA%9E-100Tips-%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A1%E3%81%AA%E3%83%9F%E3%82%B9%E3%82%92%E6%8A%8A%E6%8F%A1%E3%81%97%E3%80%81%E5%AE%9F%E8%A3%85%E3%82%92%E6%9C%80%E9%81%A9%E5%8C%96%E3%81%99%E3%82%8B-impress-gear/dp/4295017531)
無料で使えるsvgアイコン


以下は無料で提供されているアイコンたち！

## **FontAwesome**:
   - URL: [https://fontawesome.com/](https://fontawesome.com/)
   - 詳細: FontAwesomeには広範なSVGアイコンセットがあります。無料版と有料版がありますが、無料版でも多くのアイコンが利用可能です。

## **Flaticon**:
   - URL: [https://www.flaticon.com/](https://www.flaticon.com/)
   - 詳細: 多種多様なSVGアイコンが無料でダウンロードできます。検索機能も充実しています。

## **Icons8**:
   - URL: [https://icons8.com/icons](https://icons8.com/icons)
   - 詳細: 数千種類のSVGアイコンを無料でダウンロードできます。カテゴリごとに整理されており、さまざまなスタイルのアイコンが揃っています。

## **Heroicons**:
   - URL: [https://heroicons.com/](https://heroicons.com/)
   - 詳細: シンプルでモダンなデザインのSVGアイコンセットです。無料で使用可能で、GitHubから直接ダウンロードできます。

## **Material Icons**:
   - URL: [https://material.io/resources/icons/](https://material.io/resources/icons/)
   - 詳細: Googleが提供するMaterial Designのアイコンセットです。多くのSVGアイコンが無料で利用可能です。
（Windows）DockerDesktopのダウンロード方法

# はじめに
本記事ではWindowsでDockerDesktopをダウンロードする方法を解説しています。とりあえずDockerDesktopをダウンロードして使いたいという方は参考にしてみてください。

# ダウンロード方法
以下のサイトにアクセスしてDocker Desktop for Windows - x86_64をクリック(exeファイルがダウンロードされるはずです)
https://docs.docker.com/desktop/install/windows-install/

ダウンロードされたexeファイルを実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/c3434e29-1bc3-de1e-2635-26a8097c3ae2.png)

OKをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/402cf366-083e-308f-5552-3be00e2be34a.png)

closeをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/8a4da3b4-ebf5-d68c-ebd2-ac5e38543207.png)

DockerDesktopを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/b0241758-c51b-7d14-b8df-0a4be329846e.png)

Acceptをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/ec09ace2-00d0-2eda-f69a-973d0d6bd546.png)

サインアップをクリックしてアカウントを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/b55520b9-511a-a59e-2bdf-12dab2fe2837.png)

以下の画面が表示されれば作業完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/68184fd3-f4e9-c082-e3a7-2cf6b85b7734.png)
【laravel / データベース】チャットアプリの場合


チャットアプリを作成する場合のデータベース構造を考える。

# 必要なテーブルと設計

## 1. **Users (ユーザー情報)**
   - id: ユーザーID (主キー)
   - name: ユーザー名
   - email: メールアドレス
   - password: パスワードハッシュなど
   - created_at: 登録日時
   - updated_at: 更新日時

2. **Chats (チャットルーム)**
   - id: チャットルームID (主キー)
   - name: チャットルーム名 (オプション)
   - created_at: 作成日時
   - updated_at: 更新日時

3. **Messages (メッセージ)**
   - id: メッセージID (主キー)
   - chat_id: チャットルームID (外部キー)
   - user_id: ユーザーID (外部キー)
   - content: メッセージの内容
   - created_at: 送信日時
   - updated_at: 更新日時
【HTML / CSS】divとspanについて

## はじめに
学習したことを自分用の参考書のようにまとめていきます。

## divとspanについて

どちらも明確な使用目的がなく、囲った範囲をひとつのまとまりにするとき使います。
なので基本的には自由に使用できます。

ですが、まとめ方に下記のような違いがあります
- divタグ: 囲った文章全体を一つのまとまりとするブロック要素
- spanタグ: 文章内の一部分だけをまとめて指定するインライン要素

https://qiita.com/riu-414/items/52a60c050c26ed573c1f

## さいごに
いかがだったでしょうか。

他にもいろいろな記事を書いているのでぜひ読んでいただけたら嬉しいです。
【Laravel】JSONを返すAPI作成


静的なJSONを返すAPI作成の練習。

# ルーティングの定義
routes/api.phpに記述

```
Route::get('/static-json', [StaticJsonController::class, 'getStaticJson']);
```

# コントローラー
```
class StaticJsonController extends Controller
{
    public function getStaticJson()
    {
        return response()->json([
            'message' => 'これは静的なJSONレスポンスです',
            'data' => [
                'key1' => 'value1',
                'key2' => 'value2',
                // 必要に応じて他のデータを追加
            ]
        ]);
    }
}
```
学校のchromebookでVScodeDesktopを使う方法！

# 学校のchromebookでVScodeDesktopを使う方法！
### 今回は学校のchromebookでVScodeDesktopを使う方法解説したいと思います。
##### 前提条件
・【絶対】wifiに繋がっていること
・【絶対】家にchromebookを持ち帰ってる
・【絶対】家にchromebookではないPC、スマホのどちらかある
##### やり方
・最初にchromebookを開きます（？）
・次にwifiを繋ぎます（？）
・その次、GoogleChromeでgithub.com に接続
githubアカウントがない場合 1
githubアカウントがある場合 2
分からない場合 1

1

・ChromeBookではないPC、又はスマホを用意
・そいつを開き、github.comにアクセス
・どっかにNew Accountがあるのでそこから手順に従います(分からない場合、github アカウント作成と調べてください)
・そしたら2にGO！

2

・どっかにLoginってやつがあると思うので、そこをタップし、手順に従って下さい（分からない場合、github ログインと調べて下さい）
・Login出来たらリポリトジを作成（分からない場合、github リポジトリ作成）
・その次、テキトーにFileをアップロード（分からない場合、 github リポジトリ ファイルアップロード）
・<>codeからcodespacesを選択
・+をタップ
・終わり
JavaScriptの闇 初心者向け

JavaScriptの闇という言葉を聞いたことがあるでしょうか。
JavaScriptは一部書き方を他のPython等の言語と同じように書いてしまうと後で致命的なバグの原因になることがあります。
そんなJavaScriptの闇の一例を紹介します。

## varの欠陥
JavaScriptは変数を宣言する時にvarかletを使用します。
```javascript
var hoge = "hoge";
let hoge = "hoge";
```
2015年以前はverしか選択肢がありませんでした。そんなvarにはかなりの欠陥があります。

以下のようなコードがあったとします。
```javascript
var greeting = "Hello";
if(true){
    var greeting = "Bye";
}
console.log(greeting);
```
この時、コンソールに表示される文字列は「Hello」でなければいけません。
それは、if文内で宣言されている変数は、そのif文内でしか参照できないよう、変数のスコープが発生するからです。

しかし、これを実際に実行してみると、コンソールには「Bye」が表示されてしまいます。
これにより、グローバル変数であるgreetingがif文内の変数であるgreetingに上書きされてしまいます。
変数を宣言する場合はletを用いましょう。


## 型の自動変換
JavaScriptもPython等と同様に型を自動で決めます。
以下のようなコードがあります。
```javascript
console.log(1+1);
console.log("1+1");
console.log("1"+1);
console.log("1"-1);
```
この時コンソールにはどう表示されるでしょうか。
本来ならエラーが発生します。1つずつ見ると以下のようになるはずです。
```
2
1+1
error
error
```
ですが、JavaScriptでは
```
2
1+1
11
0
```
となります。

```javascript
console.log("1"+1);
```
これの"1"は文字列で、1は数字のはずです。しかし、自動で型変換が行われることで、
両方文字列になります。結果("1"+"1")となり、11と表示されます。

```javascript
console.log("1"-1);
```
こっちの場合は逆で、型変換によって文字列だったはずの"1"が数字の1になります。
結果(1-1)となり、0と表示されます。


## 等価演算子
一般的な言語の等価演算子は==です。
JavaScriptには等価演算子が2つあり、片方が==
もう片方が===で、こっちは正確には**厳密等価演算子**と呼ばれます。
以下のようなコードがあったとします。
```javascript
console.log(true);
console.log(0 == 0);
console.log(1 > 0);
```
これらはすべてコンソールにはtrueと表示されます。
以下の場合も考えてみましょう
```javascript
console.log(0 == "0");
console.log(1 == true);
console.log("1" == true);
```
これでもtrueになってしまいます。
両辺で型が異なるのにtrueとなります。

そこで厳密等価演算子を使用すると
```javascript
console.log(0 === "0");
console.log(1 === true);
console.log("1" === true);
```
すべてfalseになります。

等価演算子を用いる時は厳密等価演算子を使用しましょう。
文字列と数字など、型の違うもの同士を比較し、trueと表示させたいのなら、
以下のようにキャストを行いましょう。
```javascript
console.log(Strint(1) === "1");
console.log(1 === Number("1"));
```

以上JavaScriptの闇の一例でした。
【jQuery/JS/TS】DOMの取得方法


# クラス追加と削除

## jQuery

```
$('#myElement').addClass('myClass');
$('#myElement').removeClass('myClass');
```

## javascript
```
element.classList.add('myClass');
element.classList.remove('myClass');
```

# クラスのつけ外し

## jQuery
```
$('#myElement').toggleClass('myClass');
```

## javascript
```
element.classList.replace('oldClass', '');
```