OmniAICreator/Qiita-1.07M huggingface dataset:
【備忘録】初めてのiOSアプリ開発 第2回 @IBOutletってなに？

## <foo>@</foo>IBOutletとは？
・IBはインターフェースビルダー（Interface Builder）の略
・インターフェースビルダーとコードを接続するために使用されます。
・<foo>@</foo>IBOutletは、SwiftでiOSアプリケーションの開発時に使用される属性の一つ。


## インターフェースビルダーとは？
・Appleの統合開発環境（IDE）であるXcodeに組み込まれたツールの一つ。
・iOSやmacOSアプリケーションのユーザーインターフェース（UI）を視覚的に設計・構築するためのもの。
・インターフェースビルダーを使用することで、コードを書かずにUIを作成し、デザインすることが可能になります

### 具体的には、
StoryboardやXIB（ジブ）ファイルで作成したUIコンポーネントをコード内で操作できるようします。
## 概要
・宣言: <foo>@</foo>IBOutletはプロパティに付けて使用します。
・接続: StoryboardやXIBファイルで作成したUIコンポーネントをドラッグして、コード内の対応するプロパティに接続します。
・アクセス: 接続されたUIコンポーネントに対して、コード内でプロパティを介してアクセスできます。

### <foo>@</foo>IBOutletを使ってラベルとテキストフィールドを接続する例
◇Storyboard
・ラベルとテキストフィールドの追加： StoryboardにUILabelとUITextFieldをドラッグして追加します。

・ビューコントローラに接続： ラベルとテキストフィールドをビューコントローラのコードに接続します。

```swift:
import UIKit

class ViewController: UIViewController {

    // Storyboardから接続されたUILabel
    @IBOutlet weak var myLabel: UILabel!
    
    // Storyboardから接続されたUITextField
    @IBOutlet weak var myTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 接続されたUILabelとUITextFieldを使用
        myLabel.text = "Hello, World!"
        myTextField.placeholder = "Enter text here"
    }
}
```
### 接続手順
・Storyboardを開く: Xcodeでプロジェクトを開き、Storyboardを表示します。
・ビューコントローラを選択: ラベルやテキストフィールドが配置されているビューコントローラを選択します。
・接続の作成:
コードの<foo>@</foo>IBOutletプロパティを定義した部分を表示します。
StoryboardでUILabelやUITextFieldを選択し、Controlキーを押しながらコード内の対応するプロパティにドラッグします。
接続が作成されると、UIコンポーネントがコード内のプロパティにリンクされます。

## 役割と利点
コードとUIのリンク: <foo>@</foo>IBOutletを使用することで、StoryboardやXIBファイルでデザインされたUIとコードをシームレスに連携させることができます。
動的なUI操作: 接続されたUIコンポーネントをプログラムで操作することができるため、動的なUI変更が可能です。

## まとめ
<foo>@</foo>IBOutletは、SwiftでiOSアプリを開発する際に非常に重要な役割を果たし、UIコンポーネントとコードを簡単に接続し、操作することを可能にします。これにより、より直感的で効率的な開発が可能になります。

## 関連用語
|関連用語   |説明      　|    
|:--------------------------|:-------------------------|
|プロパティ|クラスや構造体に関連するデータや状態を表すために使用される変数や定数|
|XIBファイル（ジブファイル）|XML Interface Builderの略称。iOSアプリ開発で画面を構築するために使用されるXML形式のファイル|
|Storyboard|iOSアプリケーション開発においてUI（ユーザーインターフェース）を視覚的に設計するためのツール。アプリの画面や画面間の遷移を視覚的に配置し、構成することができます。XcodeというAppleの統合開発環境（IDE）で利用されます。|
|UIコンポーネント|ユーザーインターフェースコンポーネントの略アプリケーションのユーザーインターフェースを構成する要素|
|コンポーネント|ソフトウェアやシステムを構成する部品。再利用可能でコード単位として扱われます。|

## 参考サイト
https://appdev-room.com/swift-xib
【Pybulletサンプル解説】法線力と摩擦力を取得する【contactFriction.py】

お疲れ様です。秋並です。

Pybullet公式gitリポジトリのサンプルコードを解説するシリーズです（一覧は[こちら](https://qiita.com/akinami/items/7b433b60aeb5115ba4d7)）。

<br>

今回は、contactFriction.pyを解説します。（コードのリンクは[こちら](https://github.com/bulletphysics/bullet3/blob/master/examples/pybullet/examples/contactFriction.py)）

本コードを実行すると、法線力と摩擦力の合計値がターミナル上に表示されます。

![contactFriction.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2030125/3f9f67ac-2854-e8e7-3fca-8ea989e9ca93.gif)


# 使用している機能

`getContactPoints()` 関数を使用することで、「すべての接触点情報」を取得できます。
今回の場合は、「法線力」と「横方向摩擦力（法線ベクトルに対して垂直な方向の摩擦力）」を使用しています。

```python
pts = pybullet.getContactPoints()
```

返り値の`pts`にはすべての接触点情報が含まれているので、その中の一つの接触点における情報を`pt`とすると、以下の情報を取得可能です（今回使用している情報のみを記載）。

- `pt[9]`：法線力
- `pt[11]`：1つめの横方向摩擦力の方向ベクトル（[x,y,z]）
- `pt[10]`：1つめの横方向摩擦力の大きさ
- `pt[13]`：2つめの横方向摩擦力の方向ベクトル（[x,y,z]）
- `pt[12]`：2つめの横方向摩擦力の大きさ


# コメントをつけたサンプルコード
サンプルコードにコメントをつけたものが以下になります（もともとあった不要と思われるコメント等については削除しています）

```python
import pybullet as p
import pybullet_data

# GUIモードでPybulletに接続
p.connect(p.GUI)

# Pybulletに関連するデータの取得
p.setAdditionalSearchPath(pybullet_data.getDataPath())

# 最大座標系を使用しない設定
useMaximalCoordinates = False

# 床のモデルを生成
p.loadURDF("plane.urdf", useMaximalCoordinates=useMaximalCoordinates)

# 立方体のモデルを生成
p.loadURDF("cube.urdf", [0, 0, 1], useMaximalCoordinates=useMaximalCoordinates)

# 重力を(0, 3, -10)の方向に設定
p.setGravity(0, 3, -10)

while (1):
  # シミュレーションを1step分進める
  p.stepSimulation()

  # 接触点の情報を取得
  pts = p.getContactPoints()

  # 接触点の数を出力
  print("num pts=", len(pts))

  # 法線力の合計
  totalNormalForce = 0

  # 横方向摩擦力の合計
  totalLateralFrictionForce = [0, 0, 0]
  
  for pt in pts:

    # 法線力を足す
    totalNormalForce += pt[9]

    # x方向の横方向摩擦力の合計 += 1つ目の横方向摩擦力のx方向ベクトル * 1つ目の横方向摩擦力の大きさ + 2つ目の横方向摩擦力のx方向ベクトル * 2つ目の横方向摩擦力の大きさ
    totalLateralFrictionForce[0] += pt[11][0] * pt[10] + pt[13][0] * pt[12]

    # y方向の横方向摩擦力の合計 += 1つ目の横方向摩擦力のy方向ベクトル * 1つ目の横方向摩擦力の大きさ + 2つ目の横方向摩擦力のy方向ベクトル * 2つ目の横方向摩擦力の大きさ
    totalLateralFrictionForce[1] += pt[11][1] * pt[10] + pt[13][1] * pt[12]

    # z方向の横方向摩擦力の合計 += 1つ目の横方向摩擦力のz方向ベクトル * 1つ目の横方向摩擦力の大きさ + 2つ目の横方向摩擦力のz方向ベクトル * 2つ目の横方向摩擦力の大きさ
    totalLateralFrictionForce[2] += pt[11][2] * pt[10] + pt[13][2] * pt[12]

  # 合計の法線力、摩擦力を出力
  print("totalNormalForce=", totalNormalForce)
  print("totalLateralFrictionForce=", totalLateralFrictionForce)
```
C_TS452_2021 - SAP Certified Application Associate - SAP S/4HANA Sourcing and Procurement対策（2/100）

【2日目】
トピック1：企業構造とマスタデータ（2/11）

≪問題2≫
調達の組織構造の特徴はどれですか。
（３つ選択）
□保管場所キーは会社コード内で一意である必要がある。
□１つのプラントを複数のクライアントに割り当てることができる。
□１つの保管場所は１つのプラントにのみ属することができる。
□複数の保管場所を１つのプラントに割り当てることができる。
□１つプラントは１つの会社コードにのみ属することができる。

≪解答≫
□保管場所キーは会社コード内で一意である必要がある。
□１つのプラントを複数のクライアントに割り当てることができる。
■１つの保管場所は１つのプラントにのみ属することができる。
■複数の保管場所を１つのプラントに割り当てることができる。
■１つプラントは１つの会社コードにのみ属することができる。

≪解説≫
◆会社コード、プラント、保管場所の特徴と割当方法は以下のとおりです。
（1）会社コード
- 会社コードは、外部への報告が可能な財務会計の最小の組織ユニットであり、たとえば、企業グループ内の１つの会社など、独自の財務諸表を作成する独立した単位を表します。
- 会社コードは、クライアント内で一意の４桁の英数字で定義されます。
（2）プラント
- プラントとは、生産、調達、プラント保全、品目計画の視点から企業を細分化した、ロジスティクス内の組織ユニットであり、生産施設、地域の営業所、企業の本社、整備拠点のような企業内のさまざまなエンティティを表します。
- プラントは、クライアント内で一意の４桁の英数字で定義されます。
- １つのプラントは、１つの会社コードにしか割り当てることができませんが、複数のプラントを１つの会社コードに割り当てることができます。
（3）保管場所
- 保管場所とは、プラント内の在庫品目を区別するための組織ユニットであり、数量基準在庫管理がプラント内の保管場所レベルで行われます。また、実地棚卸もこのレベルで実行されます。
- 保管場所は、プラント内で一意の４桁の英数字で定義されます。したがって、プラントごとに同じ保管場所キーを使用することができます。
- 保管場所は、常に特定のプラントに属しますが、複数の保管場所を１つのプラントに割り当てることができます。
追加作業率について一年間計測してみたお話

# はじめに
仕様検討を行い、見積もりを行い、いざ開発をしてみたら「追加でこれもしなきゃいけなかったのか！」という経験のある方はいますか？

この追加作業は未然に防げるものなら防いでおきたいですよね。
ということで、追加作業が発生する要因は様々あるかと思いますが、
私は「コミュニケーション齟齬」「想定漏れ」という二点でこの一年間計測してみました。
諸事情により計測グラフの目盛りについては伏せています。


# 月別の追加作業率

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/aacf48b1-52dd-5300-2024-b85bb391a0b0.png)

<font color="Red">赤</font>：追加作業率が高かった月
<font color="Gold">黄</font>：追加作業率がやや高かった月
<font color="Blue">青</font>：追加作業率が低かった月

グラフの後半に赤が集中していますね。
プロジェクト背景としてはシステムの追加機能対応があった時期でした。

# 月別の追加作業時間

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/0442861e-11bb-1aad-2c6c-5af444df20da.png)

<font color="Red">赤</font>：追加作業時間が多かった月
<font color="Gold">黄</font>：追加作業時間がやや多かった月
<font color="Blue">青</font>：追加作業時間が少なかった月

こちらのグラフに関しては中盤と終盤に赤が表示されていますね。
綺麗に青→黄色→赤となっています。

赤の月はリリース期日の月でした。
その準備などを行っていた月が黄色になっていて、リリースが終わり比較的落ち着いている月が青になっていました。


# 所感
開発作業が進んでいくと想定しておくべきだった点や、外部に依存している実装箇所などが見えてきて、やっぱりこれもやらないといけない！という場面がしばしばありました。
想定外の事象を最初からゼロにすることは難しいと思っていて、大事なのは開発体験の良い環境が作れていることなのかなと感じています。
なぜならシステムの手入れがしやすい状態になっていれば、追加作業率が高くなったとしても追加作業時間は抑えることができるのではないかと考えているためです。

そのために今回は追加作業率と追加作業時間の計測を試験的に行ってみました。
追加作業率と追加作業時間が共に高い月もあれば、追加作業率は高いけど追加作業時間はそこまで高くないかなという月もありました。

そして追加作業時間を抑える取り組みの一つとして数か月前にテスト駆動開発を導入したので、今後も計測を行いどれくらい改善ができたのかを検証していきたいと思います。

# おわりに
一年間計測続いたことに驚きを隠せないです。
ESP32 D1 R32でWiFiを使った温湿度測定

## はじめに
以前、ESP32-DevKitCでWiFiを使った温湿度測定の記事を書きました。

https://qiita.com/_Moony/items/42d0cd9e1e794de15341

今回は、ESP32 D1 R32
<img width="400" alt="20240709_184243.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/65deb814-5946-15a8-a756-fc291f204459.jpeg">
を使い、同様な測定を行いました。

## やり方
- Aduino IDEをインストールします（新しいバージョンで大丈夫です）
- D1 R32のUSBドライバをインストールします
    ここでは、https://sparks.gogo.co.nz/ch340.html 
    の　**Windows CH340 Driver**　をインストールしました
ドライバの日付は08/08/2014でした
- マイコンボード（ESP32）や温湿度計（DHT11）のライブラリもインストールします
- ボードマネージャでESP32 Dev Moduleを選択します
- プログラムは「はじめに」の記事のものを使用しました
  
## 作成した回路
<img width="400" alt="20240709_191027.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729073/c065a1c7-3978-3702-0bf5-32744bfdbfa0.jpeg">

温湿度センサDHT11は次のように接続しました。

DHT11のVDDをESP32 D1 R32の5Vへ接続
DHT11のGNDをESP32 D1 R32のGNDへ接続
DHT11のSIGをESP32 D1 R32の14ピンへ接続

## 実行結果
STA、APモードいずれも以前の記事と同じ結果が得られました。

## 開発環境
- マイコンボード：ESP32 D1 R32

https://www.amazon.co.jp/Wemos-D1Mini%E7%94%A8Arduino%E7%94%A8UNOR3-D1-R32-ESP32WIFI%E3%83%AF%E3%82%A4%E3%83%A4%E3%83%AC%E3%82%B9Bluetooth%E9%96%8B%E7%99%BA%E3%83%9C%E3%83%BC%E3%83%89CH3404M%E3%83%A1%E3%83%A2%E3%83%AA1/dp/B09F3S7BKM/ref=pd_sbs_d_sccl_2_1/356-2597000-0321945?pd_rd_w=CVrrD&content-id=amzn1.sym.65c0961e-62b9-4981-b66f-4ededa9173bf&pf_rd_p=65c0961e-62b9-4981-b66f-4ededa9173bf&pf_rd_r=3J9RF8ZDC7YBRMZP9EFE&pd_rd_wg=FaLhE&pd_rd_r=0d0122b9-b92d-453e-855a-3f62ec825aa4&pd_rd_i=B09F3S7BKM&psc=1

- Ardiono IDEにおけるボードの設定：ESP32 Dev Module
- USBドライバ：CH341SER.INF 8/08/2014, 3.4.2014.08
- 温湿度センサ：DHT11
https://akizukidenshi.com/catalog/g/gM-15491/
- Ardiono IDE：ver. 2.3.2
- OS：Windows11

## 終わりに
何かのご参考になれば幸いです。

## 参考
- Arduino Uno形状でWi-Fi/Bluetoothが使える便利なESP32開発ボード！WeMos D1 R32(ESPDuino32)の基本的な使い方！

https://burariweb.info/electronic-work/wemos-d1-r32-basic-usage.html
GORMで特定のフィールドのみ選択(select)したとき、mapを使用してクエリ結果を取得する方法

# はじめに
GORMを使用してデータベースからデータを取得する際、しばしば特定のフィールドのみを選択したい場合があります。
通常、これはカスタム構造体を定義し、その構造体へスキャンすることでデータを取得しますが、カスタム構造体の定義がめんどくさい場合、簡易的にmapを使用することでも取得が可能です。

```go
type User struct {
    ID       uint
    Name     string
    Email    string
    Age      int
}

type Order struct {
    ID          uint
    UserID      uint
    ProductName string
    Quantity    int
    TotalPrice  float64
}

// mapを使用し、ここにスキャンする
var results []map[string]interface{}

// 2つのテーブルをjoinして特定のカラムを選択する
err := db.Table("users").
    Select("users.name, orders.total_price").
    Joins("JOIN orders ON orders.user_id = users.id").
    Scan(&results).Error
if err != nil {
    fmt.Printf("failed to execute query: %v", err)
}

// 結果の表示
for _, result := range results {
    fmt.Printf("Name: %v, Total Price: %v\n",
        result["name"],
        result["total_price"]
    )
}

```
エンジニア２年目！適切なコメントとは？ ～クリーンコードを書くために！～

こんにちは！
クリーンコードについて学習している
エンジニア２年生の元公務員エンジニアのガッキーです！

業務中に先輩から

- 「このコメントはコード見ればわかるから要らないよ」

- 「その意図ならコメントしてほしいなぁ」

１年目はこんなことを言われて、
どうしたらいいんだぁーーーっとよく混乱していました
記事として記録したいと思います！

# コメントについて意識すること🖊️

コメントを書く上で意識することは

**できるだけコードで表現して、表現できない場合だけコメントに残す**

ことだと考えています。

なぜならコメントを書いたところで実際の処理に影響しないからです。
実際のプログラムはコメントではなくコードが全てだからです。

さて、ここから具体的に悪いコメント・良いコメントを見ていきましょう！

# 悪いコメント😣

さっそく悪い・不要なコメントを見ていきましょう！

## 当たり前のことは書かない

ついついやってしまいがちなので、
頭に叩き込んでおきたいこと、

**当たり前のことはコメントしない**です。

以下の4つ例は
1. パッとみれば分かる
2. 意味がないコメント

なのでコードリーディングの妨げになってしまいます・・・

```php
// 10回ループさせる--(1)
for (var $i = 0; $i < 10; $i++) {
  echo $i
}

// 20歳以上の場合--(1)
if(age > 20){
  ...
}

// ステータスアップデート--(2)
function statusUpdate($user) {
}


// ユーザークラス--(2)
class Users(){
}
```

## 条件分岐の解説
続いて、これもよくやりがちなケースです。
条件分岐について、こまごまとコメントしてしまう・・・
以下の条件分岐２つもパッと見て理解できる条件ではないでしょうか。



```php
// 未成年かつメンバー会員の場合
if ($user->age < 18 && $user->is_member){

// 未成年以上かつメンバー会員の場合
} elseif ($user->age >= 18 && $user->is_member){

}
```

また上記の場合は、条件式を関数にして、
分かりやすい関数名をつけることで、
よりコードリーディングがスムーズになります。
true または false を返すboolean型の関数であれば
is has can を関数名の頭に付けることで直感的に理解できます。


```php
if (isMinorMember($user)){

}else{

}

// 未成年かつメンバー会員であるかを判定する
function isMinorMember($user) {
    return $user->age < 18 && $user->is_member;
}
```



# 良いコメント😄👌

さて、コメントするべきコードとは？

**コードでは表現できない、意図が伝わらないコード**

にコメントをすべきだと考えています。

- コードだけでは表現しきれない
- パッと見て意図が分からない
- 他のメンバーが後々なぜこのような処理をおこなっているのか確認しなければならない

このような場合にコメントをしたいものです。

```php
// 以下カラムは入力フォームが存在しないが、セットしないと保存時エラーとなる。--(1)
if ($userEntity->isNew()){

  // TODO:料金カテゴリ設定機能は未実装のため仮でその他を指定する。--(2)
  $userEntity->price_category = OTHER_PRICE;

  // 新規の場合は必ず一般ユーザーで登録する --(3)
  $userEntity->type = NORMAL_USER;
}
```

1. `$userEntity->isNew()`の条件だけでは、なぜこのような処理を行うのか分からないためコメントを追加。
2. TODO:として開発中のメモを記録します。TODOとすることで後々処理が必要と目印にもなります。
3. コメントなしだと仕様上の処理であることが理解できません。

## ドキュメントコメント

ドキュメントコメントはコードに対して説明や注釈を付けるための特別な形式のコメントです。

- 関数やメソッドの役割、引数、戻り値などを明確にすることで、コードの理解が容易になります。
- 型チェックが行われる。
- IDE(VSCode)補完されため早期エラーを確認できる。

このような目的で使用されます。
また各言語に特化したドキュメントコメントがあり、参考にPHPのドキュメントコメントを見てみましょう！

## PHPDoc


以下はPHPDocの具体例です。

```php
/**
 * 関数やクラスの内容を説明します。
 * 
 * @param 型・ネームスペース 対象の変数等 説明
 * @return 型 説明
 * @throws 型 説明
 */
```

実際のユースケースを確認してみましょう。
定義した関数のパラメータや戻り値について具体的に説明を記載します。


```php
/**
 * ユーザー編集画面から送信されてくるパラメーターを基にユーザー情報を編集する
 * 
 * @param \App\Model\Entity\User $entUser 変更するエンティティ
 * @param array $params 編集パラメーター
 * @throws \Exception 保存に失敗した場合
 * @return \App\Model\Entity\User
 */
public function editUser($entUser, $params){
    try {
        if ($tblUsers->save($entUser)) { 
            throw new \Exception('保存に失敗しました');
        }
        return $entUser;
    } catch (\Exception $e) {
        throw $e; // 例外を再スロー
    }
}
```
https://qiita.com/kouki_o9/items/49d34d347bde730f4a30


# まとめ🖊️

ご覧いただきありがとうございました！
コメントについては未だに書くべきものと書かないほうがいいものが混乱しますが、
リーダブルコードやクリーンコードを読み返して復習してモノにしていきたいです！

何か気になる点や、おかしな点ありましたらお気軽にコメントください！
【Servicenow】Washington DCリリース「Rich Content Editorで動画の自動再生・ループ再生の設定方法」

# はじめに
Washington DCバージョンアップに関して、Employee Center Proで新規追加された機能を紹介します。
参考ドキュメントは以下の通りです。
https://docs.servicenow.com/bundle/washingtondc-employee-service-management/page/product/employee-center/concept/content-providers.html

# 新機能概要
YouTube等の動画を使用して、Rich Contentやニュース記事を作成します。ビデオホスティングのURLパラメータと同様に機能させることで、コンテンツ管理者は動画の再生方法をカスタマイズできます。

# 前提条件
sn_cd.content_adminロール
[コンテンツプロバイダーとマッピングの構成手順](https://docs.servicenow.com/bundle/washingtondc-employee-service-management/page/product/employee-center/task/configure-content-provider.html)を完了

# 設定方法
1. ナビゲーターから[All > Content Publishing > Content Provider Configs] > [Content Rendering Parameters] に移動しCreate Newを選択します

2. フォームのフィールドに必要事項を入力し、Submitを押下します

| 項目 | 概要 |
|:--|:--|
| Provider mapping  | [コンテンツプロバイダーとマッピングの構成手順](https://docs.servicenow.com/bundle/washingtondc-employee-service-management/page/product/employee-center/task/configure-content-provider.html)で設定したコンテンツプロバイダーを選択します|
| Label  | Rich Content Editor上のPropertiesパネルで表示され、コンテンツ マネージャの要素(自動再生やループなど)を識別します|
| Type |Text、Check boxから選択します|
| Append this query parameter to content URL  |要素を制御するクエリパラメーター (autoplayやloopvideo等)を選択します|

# 各種画面
①Content Rendering Parameter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/8fa0a465-9fee-a3ee-f281-0d17e3ef71fe.png)

②Rich Content編集画面の一部（動画Proertiesパネル）
※①を実施することで編集画面上に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/cadc8347-3f04-fa05-7683-ebb954a38886.png)

:::note info
自動再生のテキストボックスに値を入力するとURL Sourceに パラメータが連結されます。 
:::

# 終わりに
小ネタになりましたが、Rich Content Editorで動画の自動再生・ループ再生の設定方法について紹介しました。
同ドキュメント内にあった、ビデオ認証（業員が資格情報を提供せずにプライベートビデオを表示できる機能）と利用可能なビデオのサムネイル表示については検証が完了次第紹介いたします。
【Go】Filter, Mapなどの便利関数を手軽に使いたい、そんなあなたへ

# はじめに
こんにちは、H×Hのセンリツ大好きエンジニアです。（同担OKです😉）
Goには、標準でFilterやMap、FindやFirstなどの関数が実装されていません。

しかし、ジェネリクスの登場によりこれらの便利な関数を実装できるようになりました。
そこで今回は、ジェネリクスを用いた便利関数がまとめられているライブラリである**samber/lo**をご紹介します😁

# 便利ライブラリ「samber/lo」

https://github.com/samber/lo?tab=readme-ov-file

> ✨ samber/lo is a Lodash-style Go library based on Go 1.18+ Generics.

Go 1.18から登場したジェネリクスを元にしたLodashスタイルのGoライブラリです。
Lodashとは、JavaScriptの便利な関数を提供しているライブラリのことで、samber/loはそのGo版になります。

名前の由来も紹介されており、Lodashのような短い名前かつGoパッケージで使われていないことが挙げられていました。

> Why this name?
> I wanted a short name, similar to "Lodash" and no Go package uses this name.

。。。どういう名前の由来？🤔


# 提供されている便利関数
では早速提供している関数を紹介します！
かなりの数ありますので、今回は個人的に使う頻度が高そうな関数に絞っています。

## Filter
まずは言わずもがな、スライスの中から条件に合致している要素だけを取り出すことができる関数です。
第１引数にスライスを渡し、第２引数に条件が合致するか判定する関数を渡してあげることで、Trueとなった要素のみが抽出され`even`に格納されます。
``` filter.go
even := lo.Filter([]int{1, 2, 3, 4}, func(x int, index int) bool {
    return x%2 == 0
})
// []int{2, 4}
```
## Map
スライスの型を異なる型に変換することができる関数です。
第１引数にスライスを渡し、第２引数に変換を行う関数を渡します。
``` map.go
import "github.com/samber/lo"

lo.Map([]int64{1, 2, 3, 4}, func(x int64, index int) string {
    return strconv.FormatInt(x, 10)
})
// []string{"1", "2", "3", "4"}
```

また、Map関数は`goroutine`で呼び出されますが、結果は毎回同じものになります。

## Ternary
JavaScriptの三項演算子みたいな書き方ができる関数です。
第一引数にbooleanで表される条件式、第２引数にはTrue時に返すもの、第３引数にはFalse時に返すものを渡します。

``` ternary.go
result := lo.Ternary(true, "a", "b")
// "a"

result := lo.Ternary(false, "a", "b")
// "b"
```

## Uniq
与えられたスライスの中から、重複を除去したものを返す関数になります。
``` uniq.go
uniqValues := lo.Uniq([]int{1, 2, 2, 1})
// []int{1, 2}
```

# おわりに
いかがでしたでしょうか？
今回ご紹介したもの以外で、まだまだ便利な関数が提供されていますので気になった方は是非公式のGitHubを覗いてみてください🫣

最後までご覧いただきありがとうございました！
以上、センリツでした。🤓

### 参考にしたサイト
- [[Go] samber/lo が便利なのは Find/Filter/Map だけじゃない！](https://zenn.dev/buyselltech/articles/202310112100)
- [Golang の Generics で使いたいものは大体 samber/lo にあった話](https://qiita.com/bubu_suke/items/697204af9816a2952596)
論文執筆の究極ガイド：成功のためのヒントと戦略

論文を書くことは、学生の学問的な旅の中で重要なマイルストーンです。これは、数年間の研究と学習の集大成であり、この期間中に習得した知識とスキルを具現化しています。しかし、そのプロセスは圧倒的で挑戦的であることが多いです。このガイドでは、論文執筆の複雑さをナビゲートし、成功を収めるための実践的なヒントと戦略を提供します。

1. 論文の目的を理解する
論文は、研究結果と議論を詳細に述べた学術文書です。以下の目的があります：

専攻分野の理解を示す。
独立した研究を行う能力を示す。
専門分野に新しい知識や洞察をもたらす。
2. 適切で管理しやすいテーマの選択
成功する論文のためには、適切なテーマを選ぶことが重要です。以下のヒントを参考にしてください：

興味と情熱： 本当に興味があるテーマを選ぶ。
関連性： 専攻分野に関連し、学術的な重要性を持つテーマを選ぶ。
管理のしやすさ： テーマが広すぎず、狭すぎず、徹底的に探求・分析できるものであることを確認する。
3. 徹底的なリサーチを行う
強力な論文は、広範かつ厳密なリサーチに基づいています。徹底的なリサーチを行うための手順は以下の通りです：

信頼できる資料： 学術書籍、論文、専門誌など、信頼できる情報源を使用する。
多角的な視点： 複数の視点からテーマを考察し、バランスの取れた議論を展開する。
最新の情報： 最新の研究やデータを取り入れ、現在の知見に基づいた論文を作成する。
4. 明確な構造を持つ
論文は、論理的で明確な構造を持つことが重要です。以下の要素を含めると良いでしょう：

序論： テーマの背景情報と研究目的を述べる。
文献レビュー： 既存の研究をレビューし、自身の研究の位置付けを明確にする。
研究方法： 使用した研究方法やデータ収集の手順を詳細に説明する。
結果： 研究結果を整理し、分かりやすく提示する。
考察： 結果の意義や解釈を述べ、結論へと導く。
結論： 研究の総括と今後の課題を述べる。
5. 専門家の助けを求める
論文執筆は孤独な作業になることが多いですが、専門家の助けを求めることも重要です。プロの論文執筆サービスを利用することで、以下のようなメリットがあります：

質の高いアドバイス： 経験豊富な専門家からのフィードバックやアドバイスを受けられる。
時間の節約： リサーチや執筆に費やす時間を節約できる。
ストレスの軽減： プロのサポートを受けることで、執筆に伴うストレスを軽減できる。
論文執筆のプロセスは挑戦的ですが、適切な戦略とサポートを活用することで成功を収めることができます。論文執筆に関する専門的なサポートが必要な場合は、ぜひ PhDFYのプロフェッショナル論文執筆サービス をご利用ください！
エンジニアのキャリアで大事なポイント

# はじめに
現在、「エンジニアの評価制度」に関わらせていただいているので、その中でエンジニアのキャリアとして大事なポイントをまとめました。
具体的な評価基準についてはここでは触れませんが、エンジニアの皆様の今後のキャリア設計の参考になれば幸いです。

:::note
弊社（株式会社Hajimari）は、主にWEB開発を行っております。
この記事に登場する「エンジニア」という言葉は、「WEB開発に携わるソフトウェアエンジニア」を指します。
:::

:::note warn
文章内で断言するような言い方をいくつかしていますが、あくまで私個人の意見です。ご了承ください。
:::

# エンジニアのキャリア
まず、エンジニアのキャリアは、大きく分けて２つあります。
・Individual Contributor
・Enginnering Manager

他にも、例えば自社サービスを抱えている企業であれば「Product Manager」のキャリアを設けるなど、企業によって差異がありますが、ここではこの２つに焦点を絞ります。

# Individual Contributor
Individual Contributor（以後、IC）は、一般的に「管理責任を負わない専門職」と定義されていますが、その役割は企業によって様々です。「スペシャリスト」という呼び方をしている企業もあります。

#### 技術に特化する
ICは、端的に言うと技術に特化する人です。「技術に特化」すると聞いて、どのようなことを思い浮かべますか？例えば、次のようなことを思い浮かべた人がいるかもしれません。
```
　・コードを書く
　・フロントエンド、バックエンド、インフラの技術を幅広く扱える
　・使用する言語やフレームワークを深く理解する
```

これらはある意味では正しいですが、「全て」ではないです。エンジニアがやるべきことの本質は「<font color="lighblue">技術を生かして、会社や世の中の問題を解決し、より良い環境を作ること</font>」です。例えば、法律に困ったときは弁護士や法律に詳しい人へアドバイスを聞きに行ったりしますよね。エンジニアも同じです。専門的な知識を生かして、問題を解決するのが大事な役割です。使用する言語やフレームワークの話は解決のための手段にすぎず、流行り廃りや環境によっても異なるので本質ではありません。

以上を踏まえて、ICとして本当に大事なのは次のポイントです。
```
　①問題の根幹を見抜き、解決策を検討できる
　②解決策を出すための土台となる、技術的な知識がある
　③人とコミュニケーションを取り、問題点のヒアリングや解決策を提案ができる
　④知識をアップデートし続けるための学習習慣を身につけている
```

#### 大事なのはコミュニケーション
上記のポイントについて一つひとつ書くと長くなるので、ここでは③についてだけ触れます。

一昔前と違い、「エンジニアもコミュニケーション能力が必要」という声はすでに世の中に浸透しているように思いますが、「技術に特化する」となった途端にそのことを忘れてしまう方がいます。

すべての技術は、求める人に届かないと意味がありません。どれだけ素晴らしい公園を作っても、使ってくれる人がいないと意味がないのです。技術を正しい形で正しいところへ届けるためには、「困っている当事者の話を聞く。」「解決策を相手の理解しやすい言葉で説明する。」といったコミュニケーションが必要不可欠です。特に大きいプロジェクトになるほど、期間や予算などの制約が増え、責任も大きくなるので、万が一にも認識の齟齬がないように関係者全員でしっかりコミュニケーションをとる必要があります。

コミュニケーションに苦手意識を感じているエンジニアの方は、今からでも苦手克服の努力してみてはいかがでしょうか。

# Enginnering Manager
Enginnering Manager（以後、EM）も会社によって様々な役割がありますが、概ね「エンジニアのマネジメントを行う役職」と定義されていることが多いです。

まず、EMではない、一般的なマネージャーの役割を一例ですが挙げてみます。

```
・社員の勤怠管理
・社員の育成
・新卒採用／中途採用
```

EMは、これらに「エンジニア」の文脈が加わります。エンジニアは専門的な知識を有しているので、適切に評価、育成するためには同じく専門的な知識が必要です。それを行うのがEMです。

#### エンジニアの価値を最大化する

EMの役割は、エンジニアの価値を最大化することです。エンジニアに限った話ではありませんが、人間は様々な要因でパフォーマンスが低下します。
```
・心と体の健康状態
・チーム内やクライアントとの人間関係
・使用するPCや座席の配置などの職場環境
・評価への不満
```

EMは、これらの問題を適切に解決する必要があるわけですが、マネジメント対象と同じエンジニア経験があるからこそできることがあります。例えば、私は以前に社内でエンジニアへ貸し出されてるマシンの「スペック見直し」を行ったのですが、これはエンジニアとして「マシンスペック不足によるパフォーマンス低下」の経験があったからこそ思い至った施策です。

#### エンジニアのための組織作り

ここまでに書いていたのはマネージャーの役割のなかでも、ヒューマンマネジメントの側面だけです。他にも大事な役割として「組織作り」があるので、その一例を挙げます。

```
・社内におけるエンジニア組織の役割の明確化
・エンジニア全体の技術スタックを鑑みて、より効果的なチーム編成を練る
・チーム内外のコミュニケーションの活性化
```

これらも全て、エンジニアの価値を最大化することが目的になります。エンジニアが十分に力を発揮すれば、あらゆる問題を解決し、業務の効率が上がる。それが会社の発展につながる、その信念を持って働くのがEMです。

# まとめ
ICとEMのどちらにおいても、エンジニアとしての本質（<font color="lighblue">技術を生かして、会社や世の中の問題を解決し、より良い環境を作ること</font>）は変わりません。それは、キャリアを重ね、実戦から離れても同じです。

少しでも会社や世の中がよくなるために、エンジニアが更なる進化、成長を遂げるために何かの参考になれば幸いです。


以上です。
Nextjsでプロジェクトを新規作成した時に初期状態からエラーが発生している



## 目次
- [バージョン](#バージョン)
- [状況](#状況)
- [原因](#原因)
- [解決方法](#解決方法)

## バージョン
- yarn 4.2.1
- Node v20.9.0
- Nextjs 14系
- TypeScript 5系　

## 状況
Nextjsでプロジェクトを新規作成した時に初期状態からエラーが発生している

- `page.tsx`や`layout.tsx`で
  - `import` の部分で「モジュール next/imageまたはそれに対応する型宣言が見つかりません。」
  - `return` の部分で「インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。」

## 原因
- node_modulesがない

## 解決方法
- `tsconfig.json` に以下の記述を追加する
  ```tsconfig.json
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }

.yarnrc.ymlファイルを作成して以下の記述を追加する
```.yarnrc.yml
nodeLinker: node-modules
```
その後
```
yarn install
```

するとnode_modulesが作成される


### 私はこの手順で解決しました
ubuntuでu-centerを動かす

# はじめに

ZED-F9Pを使う際に普段ubuntuに入れたROSから使うのですが、u-centerを使って設定を書き換えたりする度にWindowsを用意するのが面倒だったので、ubuntuでWindowsソフトを動かせるwine上にu-centerを入れて動かしてみました。

# wineのインストール

こちらの記事を参照してください。
サクラエディタをインストールしてGUIアプリの起動確認しておくこと。

[Ubuntu 22.04.2 LTSにWineをインストールする手順【初心者向け】](https://www.miraiserver.ne.jp/column/about_ubuntu-wine/)

# u-centerのインストール

以下のページのDownloadボタンを押して展開する。
https://www.u-blox.com/en/product/u-center

.exeファイルのあるディレクトリでwineにu-centerをインストールする。

```bash
wine u-center_v24.05.exe 
```



# USBデバイスをwineのWindowsで使えるようにする

.wine/dosdevices/にWindowsのCOMがあるので、/dev/以下のファイルをここにシンボリックリンクします。

```
$ ls .wine/dosdevices/
c:     com12  com16  com2   com23  com27  com30  com4   com7  d::
com1   com13  com17  com20  com24  com28  com31  com44  com8  z:
com10  com14  com18  com21  com25  com29  com32  com5   com9
com11  com15  com19  com22  com26  com3   com33  com6   d:
```

ZED-F9P受信機基板をUSBケーブルでPCに接続するとデフォルトでは`/dev/ttyACM0`に接続されるので、これをdosdevicesにないcom番号（ここでは適当に80）にシンボリックリンクを作成する。

```bash
sudo chmod 666 /dev/ttyACM0
ln -s /dev/ttyACM0 ~/.wine/dosdevices/com80
```

u-centerを起動し`Receiver`→`connection`から上記で設定したCOMポートを選択する。

![Screenshot from 2024-07-06 14-06-43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/444692eb-3b83-75a6-9bc6-160d29abac56.png)
Laravel11 vite + Tailwindの設定

# 目的
Laravel 11 で Vite と Tailwind の設定をします。

# 環境
```console
[momonga@momonga momonga]$ php artisan -V
Laravel Framework 11.14.0
[momonga@momonga momonga]$ node -v
v20.12.2
[momonga@momonga momonga]$ npm -v
10.5.0
```

# 参考
* [How to add Tailwind CSS to your Laravel 11 project](https://tailkit.com/blog/how-to-add-tailwind-css-to-your-laravel-project)

# 手順
### 1. viteとLaravelプラグインのインストール
Laravelインストール時にpackage.jsonも生成されるのでそのままインストールを実行します。
```console
[momonga@momonga momonga]$ npm install
```
一応package.jsonの中身を確認
```json:package.json
{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.6.4",
        "laravel-vite-plugin": "^1.0",
        "vite": "^5.0"
    }
}
```

### 2. Tailwind CSSと公式プラグインのインストール
Tailwind本体とプラグインをインストールします。
```console
[momonga@momonga momonga]$ npm install -D tailwindcss postcss autoprefixer
[momonga@momonga momonga]$ npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
```

### 3. 設定ファイル作成と編集
Tailwindの設定ファイルを生成します。
-pオプション: postcssの設定ファイルを生成
```console
[momonga@momonga momonga]$ npx tailwindcss init -p
```
tailfwind.config.js の編集内容
```js:tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    typography,
    forms,
    aspectRatio,
  ],
}
```

### 4. CSSにTailwindディレクティブを追加
```css:app.css
/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### 5. bladeに表示
```php:index.blade.php
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Laravel Project</title>

    <!-- Stylesheet -->
    @vite('resources/css/app.css')
</head>

<body>
    <!-- Your content -->
</body>

</html>
```
QiitaのトレンドをDiscordから確認できるOSSを作った【個人開発】

※この記事はこの記事の続き的な立ち位置に当たります

https://qiita.com/CinnamonSea2073/items/68abbce0c377a19beedb

# 読み飛ばしてください
おはようございます、しなもんです。

Qiita Engineer Festa 2024、楽しんでおられますでしょうか。

最近Qiitaのトレンドをよく確認するようになったり、好きなorganizationの記事を読んだりするのですが、
そんな記事を自動でdiscordに送ってくれたら、便利ですよね～（押しつけ）

そこで「**QiitaのトレンドをDiscordから簡単に確認できるBot**」を作りました。

# 概要

このプロジェクトは、Qiitaの人気記事（トレンド）を取得し、Discordから確認できるようにするBotです。
また、特定のユーザーやOrganizationが記事を投稿すると、Discordに通知する機能もあります。

オープンソースソフトウェア（OSS）として公開してみます。
OSS開発は初心者なのですが、Qiitaというエンジニアが集まる場所だからこそ
他の開発者も一緒に開発してほしいと考えました。

リポジトリはこれです。

https://github.com/CinnamonSea2073/qiita_supporter-bot

# 技術スタック

- 言語: Python 3.9
- フレームワーク: Pycord
- feedparser: RSSフェードの処理に使用
- pyyaml: Configファイルのロードに使用
- requests: HTTPリクエストの送信に使用

また、Docker上に構築しており、誰でも簡単にBotを構築できるようにしています。

# 機能の詳細

## Qiitaのトレンド記事の取得

1. `/trend today`コマンドを実行
2. トレンドのrssを取得し、提示する記事をリスト化
3. discordのembedにまとめ、応答

## 記事投稿の自動通知

1. Configファイルから監視するrssを読み込み
2. Configファイルで指定した時間おきにrssを取得、新しい記事があればリスト化
3. discordのembedにまとめ、Configファイルで指定したチャンネルに送信

# 開発プロセス

## 設計段階での考慮点

### Configファイルを前提とする機能設計
最終的に様々な方がセルフホストすることを考え、`yaml`でConfigファイルを用意する仕組みにしています。

### 型の厳格化
できるだけ型を指定するコードを書いて、トラブルが無いようにしています。

### オブジェクト指向の徹底
記事やConfigデータにモデルを用意してコードを書きました。

### Botのトラブルを最小化する仕組み
なるべくPycordの提供する機能に則って構築し、ネット接続遮断からの再接続などを自動で行われるようにしています。

## 実装中に直面した課題と解決策

### コンテナ内でConfigファイルを配置するパスが上手く指定できない
ルートからの絶対パスでゴリ押し配置しました...
いい案があれば教えてください。

### 記事投稿通知のテストが難しい
かなり前からプロジェクトを作成し、
私自信がたくさん記事を書くことでテストしまくりました。過酷。
~~テスト用RSSを用意すればよかったね~~

# OSSとしての公開

いままでOSSとして何かに取り組んだことはないんですが、
とりあえずGithubに関するQiitaの記事をたくさん読んで挑戦してみています。

コントリビュート待ってます！

# 今後の展望

- QiitaAPIと組み合わせて、いいね数やストック数も表示したい
https://github.com/CinnamonSea2073/qiita_supporter-bot/issues/2
- セルフホストが無理な方向けに、ダッシュボード上でConfigを設定してBotを使えるタイプのものも作りたい
- Slackなど他のチャットプラットフォームへの対応

# さいごに
暇を見つけてはがんばってつよつよbotにしたいと思います。
がんばります。

https://github.com/CinnamonSea2073/qiita_supporter-bot/tree/develop
周りから「ベロシティを上げてほしい」と言われたとき、耳を傾けてはいけない

## はじめに

◆この記事は何？
「ベロシティ」を使用する際の注意についての記事です。

## 先に結論
- スクラムチームのベロシティに求められるのは**安定**していること
- **外部から「ベロシティを上げてほしい」と言われたときは注意**が必要
- ベロシティ向上だけに意識がいくと悪い結果につながる可能性がある

## 良いベロシティとは安定していること

「ベロシティ」は、各スプリントで完成した仕事量のことです。

良いベロシティは安定しています。
これにより見積もりが容易になり、良好なスクラムの指標となります。

書籍『SCRUM BOOT CAMP THE BOOK』では次のように言及されています。

> ベロシティに求められるのは安定していることなんだ。
> 安定しているベロシティが好まれるのは、先のことを読めるからだけじゃない。ベロシティが安定しているのは、良いスクラムの特徴だからだ。
> プロダクトバックログの項目の見積もりに多少の誤差はつきものだし、加えてトラブルなんかもそれなりに起こるものだ。けれど、それにうまく対応できているからベロシティが安定している。つまり、スクラムチームの仕事の進め方が順調な証拠なんだ。

## ベロシティはどう変化するか？

ベロシティはあるポイントまで伸びて、あるポイントから安定期に入ります。

書籍『エッセンシャルスクラム』では次のように言及されています。

> チームのベロシティが日々着々と伸びていくだなんて、信じられるだろうか？
> （中略）ある一定のポイントまでは伸びる。しかし、いずれきっと安定期に到達する。

![ベロシティ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616496/dddf6a85-92d2-8d5b-99c4-dd2e148fe559.png)


※図は『エッセンシャルスクラム』を元に作成。

ベロシティが線形に伸び続けると考えるのは誤りです。
そうなれば時間とともに無限に増加してしまうからです。

## 周りから「ベロシティを上げて欲しい」と言われたとき、耳を傾けてはいけない

上位職から「ベロシティを上げて欲しい」と言われたときは注意が必要です。
「ベロシティを上げて欲しい」という外部からの作用は、悪い結果をもたらすことがあります。

書籍『SCRUM BOOT CAMP THE BOOK』では次のように言及されています。

> スクラムチームとしてはベロシティを安定させたいと思っていても、周りから上げて欲しいという声があがるかもしれない。だけど、その声に耳を傾けてはいけない。
> ベロシティを上げることに意識がいくと、別の悪影響が出てくる。それはベロシティを上げるように細工してしまうことなんだ。
> たとえ故意にするつもりはなくても、無意識にだ。
> (中略)
> でも、このような行為は、スクラムチームがどれぐらい実現できるのかをわからなくするので、この先の予測が信用できなくなってしまう。

例えば、次のような細工を無意識にやってしまうことがあります。
- 最初から多めに見積もる
- 手抜きをして完成を増やして、見かけのベロシティを増やす（＝技術的負債にもなる）


書籍『エッセンシャルスクラム』でも同様に指摘されています。
> チームの生産性をベロシティで判断してはならない。ベロシティをそんなふうに誤用すると、無駄の多い危険な振る舞いを促してしまう。

書籍『MORE EFFECTIVE AGILE』での指摘は次のとおりです。

> ベロシティを使ってチームのパフォーマンスを比較しようとしたことがあるリーダーによれば、そうした行為は有害である。
> (中略)結果として、チームのモラルと生産性が低下し、チームを比較するそもそもの目的とは逆の結果になる

このように「ベロシティを上げろ」と外部から言われたときは注意が必要です。

そのようなときは、まずは背景や理由を理解しようとすること、次にベロシティの役割について説明をするのが望ましいです。

## おわりに

この記事では、ベロシティの注意について紹介しました。

もし、周りから「ベロシティを上げて欲しい」と言われることがあれば、思い出していただけると幸いです。
エラーが起きた！さてどうする

# はじめに
メンバーにエラー解決方法について教える機会があったので改めて振り返っておきたいと思います。

# 原因はフロントエンド？バックエンド？それとも？

画面を操作したら動かない！という状況は往々にしてあるかと思います。
まず開発者ツールを開いてコンソールログにエラーが表示されているかを確認してみましょう。
コンソールログにエラーが出ている場合はフロントエンドの処理を見直してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/fb0f7258-b93d-ee8f-1bca-acc88e700880.png)


バックエンドについては開発者ツールのネットワークを確認して、エラーになっている箇所がないか確認してみましょう。赤字になっている箇所はエラーが発生しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889192/473e35b6-4042-51eb-0e56-06cf3345002e.png)


# 原因はフロントに違いない！

気になった箇所にconsole.logを仕込んで正しくデータを受け取れているのかを確認してみましょう。
個人的によく遭遇するエラーたちは、
- バックエンドから受け取ったオブジェクトが指定のプロパティを持っていない
- CORSエラーでそもそもバックエンドと疎通できていない
- 非同期処理が完了していなくて後続の処理が動いていない

が多いかなと思います。

# 原因はバックエンドに違いない！

私のチームではAWS Cloud Watchを利用しているので、エラーが発生しているファイルのロググループを確認しています。

バックエンドに関しては、
- フロントから正しいパラメータを受け取れていない
- そもそもバックエンドの実装に間違いがある
- データ形式が間違っていて値の参照ができていない

というエラーが多いかなと思います。

# いや！外部APIが原因だ！
例えば他チームが開発中のAPIを利用していたりすると、設定の抜け漏れや仕様漏れなどが原因で動かなくなったりすることもあります。詰まったらすぐ相談してみましょう。

# おわりに
原因箇所を特定するためにはシステムのコードや構成周りも理解しておく必要があるので最初は時間がかかりますが、慣れてきた頃にはシステムの理解度も上がっているということになりますね。
【Servicenow】Washington DCリリース「コンテンツ宛先の追加」

# はじめに
Washington DCバージョンアップに関して、Employee Center Proで新規追加された機能を紹介します。
参考ドキュメントは以下の通りです。
https://docs.servicenow.com/csh?topicname=ec-add-content-destination&version=washingtondc
# Employee Centerにおけるコンテンツとは
Employee Centerにおけるコンテンツとは、従業員向けに提供される情報やリソースです(例：ニュース記事、Rich Contents等)。
コンテンツは従業員の業務を支援し、必要な情報をタイムリーに提供するために作成されます。これらのコンテンツはContent Publishsingといったプラットフォームで管理することができます。Content Publishingにはニュース記事やRich Contents等のコンテンツ作成、編集、公開、削除の機能が含まれています。

# 新機能概要
 Content Destination※で公開期間を設定し、コンテンツ管理者が公開場所に基づいてコンテンツを使用できる期間を選択できるようになります。
※Content Destinationはコンテンツの一つであるニュース記事内にあるページ及びウィジェットインスタンスを定義します。ニュース記事ではデフォルトで以下のContent Destinationが提供されています。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/3318f5bc-2100-6278-9d1e-eba59c31dbf3.png)



# 設定方法
1. ナビゲーターから[All > Content Publishing > Re-usabale Components > Content Destinations] に移動しCreate Newを選択します
2. フォームのフィールドに必要事項を入力し、Submitを押下します

| 項目 | 概要 |
|:--|:--|
| Name  |  Content Destinationの名前<br>（例：全てのニュース、注目のニュース等）|
| コンテンツの場所  | コンテンツの公開場所を指定します|
| ページ  | コンテンツを公開するポータルのページを指定します|
| ウィジェットインスタンス  |ニュース記事を表示する従業員ポータルのウィジェットを指定します|
| Active  |コンテンツを公開計画で使用できるようにします|
| Refine duration  |ニュース記事を公開する期間を設定します|

:::note info
同じContent Publishing 内にあるContent TemplatesにもRefine durationがありますが、Content Destinationで設定された期間がContent Templatesの設定を上書きします。   
:::
# 各種画面
①Content Destination
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/3874f0cc-09da-ab71-43b6-42c09a7b3e1b.png)
②Content Template（ニュース記事）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/5d4b9e3f-78e2-1927-808d-a95d7092d045.png)
③ニュース記事
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471813/bebd09a2-0fac-0875-e201-2ee4859ea9f6.png)

# 終わりに
小ネタになりましたが、コンテンツの宛先ごとで公開期間を設定する方法について紹介しました。
ニュース記事にあるコンテンツごとで公開期間を設定したい際はご活用ください。
dockerコマンドとdocker composeコマンドの違い

## はじめに
dockerコマンドをdocker composeコマンドに書き換える際、少しだけ迷ったので記録として書いておきます。

## dockerコマンド
書き換え前
こちらは**コンテナ名**を指定する
```zsh
docker exec <コンテナ名> mkdir -p /aaa/bbb/ccc
```

## docker composeコマンド
書き換え後
こちらは**サービス名**を指定する
```zsh
docker compose exec <サービス名> mkdir -p /aaa/bbb/ccc
```
EclipseでleJOSを自在に操る

leJOSでJavaを実行するためには、Eclipseを使うのがいいでしょう。他のIDE環境でもできますが、プラグインがないので環境構築が大変です。IntelliJ IDEAにもプラグインが存在しますが、エラーを吐いてうまく動きませんでした。
## Eclipseの導入
### ダウンロード

![Eclipse](https://storage.googleapis.com/zenn-user-upload/a7c25ff6f1f7-20230914.png)
[Eclipse Downloads](https://www.eclipse.org/downloads/)
Eclipseをダウンロードしてください。

### インストール

インストーラーを開いたら、一番上の「Eclipse IDE for Java Developers」を選択します。
次の画面でインストール場所等の設定をします。特に設定を変える必要はありません。
ライセンスが出てくるので「Accept Now」で同意してください。
「INSTALL」が「LAUNCH」に変わったらインストール完了なので「LAUNCH」を押して起動してください。
ワークスペースも自由に設定してください。

## leJOSプラグイン
leJOSプラグインを入れることで格段とプログラムしやすくなります。
まずEclipseを開きます。
上のバーから「ヘルプ＞新規ソフトウェアのインストール…」を選択してください。
![NewSoftware](https://storage.googleapis.com/zenn-user-upload/a572372c445e-20230914.png)
「追加」を押すと上の画面が出てくるので「名前」を自由に設定してください。「leJOS」などにしておくと分かりやすくていいです。「ロケーション」には下記のURLを入れて「追加」を押してください。
```
https://lejos.sourceforge.io/tools/eclipse/plugin/ev3/
```
真ん中のボックスの「leJOS EV3 Support」の左のチェックボックスにチェックを入れて、右下の「次へ」を押すとインストールが始まります。
次へ進めていくとライセンスが出てくるので同意して完了してください。
![Authority](https://storage.googleapis.com/zenn-user-upload/60e3ff774c5d-20230914.png)
「オーソリティーの信頼」というウィンドウが出てきた場合は、「すべて選択」を押してから右下の「選択項目を信頼」を押してください。
右下でバーが進んでいるので、
これでプラグインの導入は完了です。Eclipseは閉じず、「Eclipseを再起動してください」というウィンドウが表示されてから指示に従って再起動してください。
## 接続設定
![Preference](https://storage.googleapis.com/zenn-user-upload/ac6a326b5c6c-20230914.png)
上のバーの「ウィンドウ＞設定」を開くと上のような画面が出てくるので、「leJOS」を選択し、「名前付きbrickへ接続」にチェックをいれて、「名前」の入力欄にIPアドレス「10.0.1.1」と入力します。そうしたら「適用して閉じる」で閉じて大丈夫です。
## プログラムの作成と実行
上のバーから「ファイル＞新規＞その他」を押してください。
「ウィザードを選択」というウィンドウ「leJOS＞LeJOS EV3 プロジェクト」を選択して次へ進みます。
![NewProject](https://storage.googleapis.com/zenn-user-upload/006e5775b7d7-20230914.png)
プロジェクト名はわかりやすいものに設定しておくといいと思います。「実行環境JREを使用」にチェックが入っていることを確認して、JREを「JavaSE-1.8」を選択してください。Java8を導入せずにJava7を導入した場合は、「JavaSE-1.7」を選択します。一通り設定できたら「完了」を押します。「次へ」ではありません。
左の欄にプロジェクト名が表示されていると思うので、右クリックして「新規＞クラス」を押してください。「名前」のところに自由なクラスの名前を入力してください。今回は「leJOS」と入力します。「どのメソッド・スタブを作成しますか？」という欄の一番上の`public static void main(String[] args)`のみをチェックしてください。それで完了します。
コードが表示されるので一度すべて消して下のコードをコピペしてください。
```java
package leJOS_test; //プロジェクト名

import lejos.hardware.Button;

public class leJOS //クラス名
{
    public static void main(String[] args)
    {
        //Hello World!!とev3の画面に表示する
        System.out.println("Hello World!!");
        //ボタンが押されるまで待機
        Button.waitForAnyPress();
    }
}
```
Ctrl+Sで上書き保存したら、プロジェクトを右クリックして「実行＞leJOS EV3 Program」を押してください。
EV3の画面に「Hello World!!」と表示されたら成功です。
Pythonのimportを理解する

# 読み飛ばしてください

Python、いいですよね。

Pythonを使うということは`import`もたくさん使うことになると思いますが、
かなり重要で理解が必要な機能の一部です。
単なるコードの再利用以上の意味を持っていて、結構いろいろ覚えておくといいことがあるので、
まとめてみました。

# importの基本

## モジュールとは何か

めちゃくちゃ基本から始めます。
Pythonにおいて、モジュールとは単にPythonファイル（.py）のことを言います。
モジュールには関数、クラス、変数などが含まれており、これらを他のPythonプログラムで再利用することができます。

## importの基本的な構文

最も基本的な`import`の構文はこれです。

```python
import モジュール名
```

これで、指定したモジュール全体をインポートすることができます。

# importのメカニズム

## Pythonがモジュールを探す仕組み

Pythonは以下の順序でモジュールを探します。

1. 現在のディレクトリ
2. PYTHONPATH環境変数で指定されたディレクトリ
3. Pythonの標準ライブラリのディレクトリ

## sys.pathの役割

`sys.path`は、Pythonがモジュールを探すディレクトリのリストです。`import sys`を行い、`print(sys.path)`を実行することで、現在の`sys.path`の内容を確認することができます。

# importの種類と使い方

## import文

```python
import math
```

この方法でインポートすると、`math.sin()`のように、モジュール名を接頭辞として使用する必要があります。

## from ... import文

```python
from math import sin, cos
```

この方法では、指定した関数や変数を直接使用できます（例：`sin(0)`）。
使うオブジェクトが絞られているなら、これを使う方が名前空間が汚染されないのでおすすめです。

## as キーワードを使った別名インポート

```python
import numpy as np
```

この方法で、長いモジュール名に短い別名をつけることができます。
この場合、`np.array()`のように自分で付けた別名で使用できるようになります。
便利なのでよく使います。

# パッケージとimport

## パッケージの構造

パッケージは、複数のモジュールをまとめて管理するための仕組みです。
pipとかでインストールするアレです。

よくモジュールとパッケージが混同されがちですが、実際には
**モジュールをまとめたものがパッケージなわけです。**

ディレクトリ構造を使って表現され、各ディレクトリには`__init__.py`ファイルが必要です。

## __init__.pyの役割

`__init__.py`ファイルは、そのディレクトリがPythonパッケージであることを示します。
また、パッケージのインポート時に実行されるコードを含むこともできます。
パッケージを作るわけでもない限り、あまり気にしたくても大丈夫なやつです。

# importのベストプラクティス

## 効率的なimportの書き方

### 必要なものだけをインポートする
必要最小限のインポートにすることで、名前空間の汚染を防ぎ、メモリ使用量を抑えることができます。
また、コードの可読性も向上します。
依存関係のエラーも減ると思います。

### `import *`の使用を避ける
`import *`を使用すると、どの名前がインポートされたのかが不明確になり、意図しない名前の上書きが発生する可能性があります。
普通に危険です。

## PEP 8のimportに関するガイドライン

### インポートは通常ファイルの先頭に置く
ファイルの先頭にインポートを置くことで、そのモジュールが依存している外部リソースを一目で確認できます。
また、循環インポートの問題を早期に発見しやすくなります。

### インポートは以下の順序で行う

  1. 標準ライブラリ
  2. サードパーティライブラリ
  3. ローカルアプリケーション/ライブラリ

この順序でインポートを行うことで、依存関係の優先順位が明確になります。
また、ローカルの変更が標準ライブラリやサードパーティライブラリのインポートに影響を与えることを防ぎます。
意外とやっていない人が多いので意識すると良いと思います。

# 最後に
Pythonのimportについてまとめました。

他にもいろいろ知りたい方は、こちらをどうぞ。

https://docs.python.org/ja/3/tutorial/modules.html
Slack File Upload

## PythonでSlackにファイルをアップロードする方法
WebClient#files_upload_v2()を使わずに画像をアップロードしたい場合の方法です。

```python:slackFileUpload.py
import pathlib
import requests
from slack_sdk import WebClient

file_id_list = list()
slack_file_list = list()

channel_ID = "XXXXXXXXXXX"
client = WebClient(token="xoxb-XXX")

# ファイルが置かれたディレクトリパス
file_path = pathlib.Path("d:/test_directory/")

# ここではPNGファイルのみを対象に
for file in file_path.glob("*.png"):
    # files_getUploadURLExternalでファイルID、アップロードURLを取得
    # ファイル名、ファイルサイズが必要
    res = client.files_getUploadURLExternal(
        filename = file.name,
        length = file.stat().st_size,
    )
    # ファイルIDリストに追加
    file_id_list.append(
        {"id": res["file_id"], "title": file.name}
    )
    # アップロードURLに対してファイルアップロード（バイナリ読み込み）
    filedata = {"file": open(str(file), "rb")}
    res = requests.post(res["upload_url"], files=filedata)

# ファイルアップロードが成功していれば処理を続ける（本当はファイルごとに確認が必要）
if res.ok:
    # ファイルIDリストを渡してアップロード確認（複数ファイル可）
    res = client.files_completeUploadExternal(
        files = file_id_list
    )
    for r in res["files"]:
        slack_file_list.append("<" + r["permalink"] + "|" + r["name"] + ">")
    # メッセージをポスト
    ret = client.chat_postMessage(
        channel = channel_ID,
        text = "".join(slack_file_list)
    )
```
Linuxコマンドのオプション`-`と`--`の違い / 例外

# はじめに
初心者のころ知りたかったこと・最近知ったことの2本立てです。


# Linux オプションの基本

Linuxコマンドのオプションについて、初心者のころ知りたかったこと。

「**`-`は短縮形、`--`は単語**」

例えば、`node -v`と`node --version`です。

![](https://r2.sizu.me/users/29404/post-images/kxmr6e651vkimk736c08.png)

どちらも同じコマンドで、node.jsのversionを確認します。

---

基本的には、短縮形のオプションでは`-`を使用します。

（`version`を `-v`, `install`を `-i` など）

逆に、単語まるまるのオプションでは`--`を使用します。

（`--version`, `--install` など）

なお、ざっくり`-`はUNIXオプション、`--`はGNUロングオプション等と呼ぶらしいです。

# Linux オプションの例外

最近知ったのですが、例外もそれなりにあります。

## `find -name`
`find`コマンドには、`-name`オプションがあります。
これは「接頭辞が`-`」なのに「単語のオプション」という点で例外です。

https://ja.manpages.org/find#:~:text=%2D-,name,-pattern

## `ps aux`

`ps`コマンドの `aux`オプションのような、ハイフンをつけないオプションもあります。
これはBSDオプションと言うようです。

https://ja.manpages.org/ps#:~:text=BSD%20%E6%9B%B8%E5%BC%8F%E3%82%92,ax%0Aps%C2%A0axu

https://note.com/usop/n/n0fc0058c229c

# おわりに

Linuxコマンドは一通り慣れたつもりでしたが、まだまだ知らないことは多いですね。
miniPC(Ryzen7 7735HS/メモリ32GB)+LM StudioでLLM(Llama-3-ELYZA-JP-8B-q4_k_m.gguf)が動いたという報告

# はじめに

こんにちは、朝から車両点検でJRが遅れてるなぁと思って乗り込んだら、次の駅で「踏切点検のため停車」を15分くらって朝から仕事に遅れました。ただやん（北浜）です。冷やし中華が美味しい時期になりましたね。

今回は、AMD環境下でローカルLLMが使えるLM Studioを使って日本語に特化した大規模言語モデル Llama-3-ELYZA-JP-8B-q4_k_m.ggufを動かす方法をご紹介します。

<font color="red">結論：動きました！</font>

LM Studio使わずにOllamaを使う大多数の方はこちらを参考にするといいかも・・・

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

# コトの発端

情報屋さんではない私ですが（なんならLLMに詳しいわけでもない）、なぜか大学生とChatbotを作るワークショップを企画するコトに・・・いやいや、なんでやねん。

適当に設計してGeminiとか既存の生成AIのAPI使って作ればよいかーなどと考える。でも、どうせなら資料とか読み込ませて学習させて、賢いの作りたいなぁ。（大学生相手だし）RAG（Retrieval-Augmented Generation）とかにもきちんと触れてやりたいよなぁなどいろいろごちゃごちゃ考えてました。

で、とりあえず生成AIをローカルで動かしてみたいなぁ！！となる。（結局はここから）

色々調べてわかったのは、LM Studioを使えば、LLMがどうやら動くっぽい！！おっしゃやってみるか！！！

※手持ちのGPUはメモリが8GBですし、Intel arc A770(16GB)買うにしても4万円・・・ちょっと高い・・・デスクトップはRyzen5 5600Gなので、メモリ64GBにしてGPU割り振り増やせば（増やせるのか？少なくともminiPCのBIOSの設定にはなかったので、デスクトップ側のBIOSを確認する必要あり）結構動くのではないか疑惑もありました。

# 「こいつ、動くぞ」※動いた

インストールの仕方は、以下を参考に。（ちゃんと追記します）

https://biztechdx.com/radeongpu%E3%81%A7llm%E3%82%92%E5%8B%95%E3%81%8B%E3%81%9B%E3%82%8Blm-studio%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F/

![スクリーンショット 2024-07-09 174327.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3834145/9200582e-3e15-6af1-edc5-05a782f5a334.png)

Llama-3-ELYZA-JP-8B-q4_k_m.ggufをダウンロードして使ってみました。

私「大阪について教えて」

>ELYZAさん
大阪は日本の近畿地方に位置する都市で、政令指定都市です。市域人口は約270万人を超え、全国第二位の規模を有しています。大阪には古代から「天下の台所」とも呼ばれるほどの食文化があり、たこ焼きやお好み焼きなどが代表的な食べ物として知られています。USJ(ユニバーサルスタジオジャパン)や海遊館などの人気テーマパークや水族館もあります。以上のような点から大阪は観光地としても非常に人気が高く、年間を通して多くの方が訪れています。

GPU Offload 4/32にしてみたところ、7.5tok/sでした。

参考までに、4070 Ti SUPERだと70tok/sくらい出るらしいです・・・速い・・・

なお、所詮はminiPCなので、Ryzen7 7735HSのGPUのメモリ割り当てはいじれなかったり、かゆいところに手が届かないのですが（外部ツールで書き換え等も出来るとは言われてます）もう少しいじってみたいと思います。

ただ、落ち着いて考えてみるとLlama-3-ELYZA-JP-8B-q4_k_m.ggufって8GBのグラボでも動くんじゃ？（たぶん動く）

ちなみに、GPU accelerationをオフにしたところ、9.34tok/sほどまであがりました。あれ、GPUアクセラレーション切った方が速度でるんだ・・・

嘘か誠か、RADEON 6600XT 8GBで試したところ7tok/sほどだったという報告もあるので、Ryzen7 7735HSが意外と良いのかも知れません）

# 結論（？）

「おら、難しいことはわかんねーけど、LLMをパソコンで動かしてみたいぞ！」<br>というモノ好きな方は、LM Studioを入れてみて、Gemma-2b-itくらい軽いモデルを動かしてみると良いかも知れません。このminiPCでGemma-2b-itを動かしてみたところ、15tok/s出ました。
[Mac] System File (usr, bin, local) について

# 目次
- [bin フォルダとは](#binフォルダとは)
- [usr フォルダとは](#usrフォルダとは)
- [usr/bin フォルダとは](#usr/binフォルダとは)
- [usr/local/bin フォルダとは](#usr/local/binフォルダとは)

# bin フォルダとは
macOSの`bin`はWindowsのそれと異なることを明確にする必要があります。（ゴミ箱ではありません。 ）`bin`は*バイナリ*の略で、アプリの実行可能なコマンドを`bin`ファイル形式で含むディレクトリを指します。たとえば、異なるアプリの設定ファイルやライセンス番号を変更するには、*admin*ユーザが`bin`フォルダにアクセスできます。

# usr フォルダとは
Usrは短縮形、*ユーザー*ではありません。*ユーザーの利用可能なプログラムとデータ*を示します。したがって、`Mac usr`フォルダは、さまざまな読み取り専用データ、ライブラリ、ドキュメント、バイナリなど、Macアプリが正常に機能するために必要ながら、Macユーザーがほとんど見る必要のないソフトウェアがすべて格納されています。

# usr/bin フォルダとは
実行可能プログラムの主な場所は、システムにプリインストールされている実行可能プログラムであるこのディレクトリです。システムのアップグレードに伴って変更されます。これには、ローカルにインストールされておらず、システムの起動や修復に必要のない、通常のユーザーが使用するほとんどのアプリのデータが含まれています。
 
# usr/local/bin フォルダとは
ユーザーが実行可能なアプリケーションを個別にビルドしてインストールする場合の既定のインストール場所です。システム更新プログラムによって同じ名前のファイルが上書きされることはありません。

# 参考リンク
- [Macでusr/local/binにアクセスする方法](Macでusr/local/binにアクセスする方法)
【CSS】カードレイアウトFlexboxで文字量合わせる方法

# はじめに

カードレイアウトを作成する際に、各カードの内容が異なるためにテキストの量がバラバラになることがあります。その結果、レイアウトが崩れてしまうことがあります。

この記事では、Flexboxを使って文字量が異なるカードのレイアウトを整える方法についてまとめます。

この記事が皆さんのお役に立てば嬉しいです！

![タイトルタイトル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3772961/5509e178-9821-46c8-2ad2-188757f09a9d.jpeg)


# 必要なコード解説
### HTML
```
<div class="container">
  <div class="card">
    <div class="card-picture">画像</div>
    <div class="card-content">
      <h2>カード1</h2>
      <p>短い文章</p>
      <p>短い文章</p>
    </div>
  </div>

  <div class="card">
    省略
  </div>
  ・
  ・
  ・
</div>
```

- 親要素```container```で囲み、その中に子要素```card```を作成して、カードレイアウトを作成していきます。

### CSS

```
.card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-content p {
  flex-grow: 1;
}
```

- ```.card-content```に```display: flex;```と```flex-direction: column;```を設定し、```flex-grow: 1;```を追加することで、**p要素**が余分なスペースを占有するようにします。

- ```.card-content```の```flex-grow: 1;```がカード全体の高さを均一に保つのに役立ちます。

- ```flex-grow```は、flexアイテムの幅や高さを伸ばすプロパティで、```display:flex;```と併用します。

# 全体のコード

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNqNPrp" data-pen-title="flex-grow" data-user="rei-dev99" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/rei-dev99/pen/WNqNPrp">
  flex-grow</a> by rei-dev99 (<a href="https://codepen.io/rei-dev99">@rei-dev99</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# おわりに
この記事がお役立ちになれば幸いです。
もし、この記事の内容に不備や改善点などがありましたら、ご指摘いただけると嬉しいです。

# おすすめの学習記事
Flexboxチートシート

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

Flexboxが理解できるゲーム(すごくおすすめ)

https://flexboxfroggy.com/#ja
【PostgreSQL】メタコマンド〜\copy〜

## 初めに

Qiita Engineer Festa 2024に参加中。完走目指してます。
他のメタコマンドについては以下から読んでください。

https://qiita.com/dai_chi/items/04f5339d54130f070671

## \copyとは

> フロントエンド（クライアント）コピーを行います。 これは[`COPY`](https://www.postgresql.jp/docs/15/sql-copy.html) SQLコマンドを実行する操作ですが、サーバで指定ファイルに対する読み込みまたは書き込みを行うのではなく、psqlがファイルの読み書きや、サーバとローカルファイルシステム間のデータ送信を行います。 この場合、ファイルへのアクセス権限はサーバではなくローカルユーザのものを使用するので、SQLのスーパーユーザ権限は必要ありません。
> 
> 
> `program`が指定された場合、`command`がpsqlにより実行され、`command`から、または、`command`へのデータはサーバとクライアント間を行き来します。 ここでも、実行権限はローカル側のユーザであり、サーバ側ではなく、SQLスーパーユーザ権限は必要とされません。
> 
> `\copy ... from stdin`では、データ行は、コマンドの発行源と同じところから、`\.`を読み取るまで、あるいは、ストリームがEOFに達するまで読み続けます。 このオプションは、SQLスクリプトファイルの内部でテーブルにデータを投入する場合に便利です。 `\copy ... to stdout`では、出力はpsqlコマンドの出力と同じところに送られますが、`COPY count`コマンドのステータスは表示されません(これはデータ行と混同してしまうかもしれないからです)。 コマンドの入力元や`\o`オプションに関わらず、psqlの標準入力や標準出力を読み書きするには、`from pstdin`あるいは`to pstdout`と書いてください。
> 
> このコマンドの構文はSQLの[`COPY`](https://www.postgresql.jp/docs/15/sql-copy.html)コマンドに似ています。 データの入力元と出力先以外のすべてのオプションは`COPY`と同じです。 このため`\copy`メタコマンドには特別な解析規則が適用されていることに注意してください。 他のほとんどのメタコマンドとは異なり、行の残り部分の全体は常に`\copy`の引数として解釈され、引数内の変数の置換や逆引用符の展開は行われません。
> 

[\copyについて](https://www.postgresql.jp/docs/15/app-psql.html#:~:text=%5Ccopy%20%7B%20table%20%5B%20(%20column_list%20)%20%5D%20%7D%20from%20%7B%20%27filename%27%20%7C%20program%20%27command%27%20%7C%20stdin%20%7C%20pstdin%20%7D%20%5B%20%5B%20with%20%5D%20(%20option%20%5B%2C%20...%5D%20)%20%5D%20%5B%20where%20condition%20%5D%0A%5Ccopy%20%7B%20table%20%5B%20(%20column_list%20)%20%5D%20%7C%20(%20query%20)%20%7D%20to%20%7B%20%27filename%27%20%7C%20program%20%27command%27%20%7C%20stdout%20%7C%20pstdout%20%7D%20%5B%20%5B%20with%20%5D%20(%20option%20%5B%2C%20...%5D%20)%20%5D)

## 試してみた

検証用のテーブルを作成しデータを投入する

```sql
CREATE TABLE employees (
    id SERIAL PRIMARY KEY,
    name TEXT,
    age INTEGER,
    department TEXT
);

INSERT INTO employees (name, age, department) VALUES
('John Doe', 30, 'HR'),
('Jane Smith', 25, 'IT'),
('Sam Brown', 35, 'Finance');
```

テーブルのデータをファイルにコピーする

```sql
postgres=# \copy employees TO 'employees.csv' WITH (FORMAT CSV, HEADER);
COPY 3
```

lessなどでファイルが作成されてデータもコピーされていることを確認する

一度テーブル内のデータを削除する

```sql
postgres=# delete from employees;
DELETE 3
postgres=# select * from employees;
 id | name | age | department 
----+------+-----+------------
(0 行)
```

ファイルのデータをテーブルにコピーする

```sql
postgres=# \copy employees FROM 'employees.csv' WITH (FORMAT CSV, HEADER);
COPY 3
```

selectで確認

```sql
postgres=# select * from employees;
 id |    name    | age | department 
----+------------+-----+------------
  1 | John Doe   |  30 | HR
  2 | Jane Smith |  25 | IT
  3 | Sam Brown  |  35 | Finance
(3 行)
```

## まとめ

データのdumpファイルを見てみるとcopyコマンドが使われているのもあって大量データのインポート・エクスポートに対してはcopyコマンドの方が効率良さそうです。
これについては別途具体的になぜ効率的なのかは調べたいですね。
学習で使用しているDockerコマンド




## docker composeコマンド



### 記述されたサービス定義を元にDockerイメージを作成
```bash
# Dockerfileとdocker-compose.ymlに記述されたサービス定義を元に
docker compose build
```

### コンテナ起動
```bash
docker compose up 
```

### コンテナとネットワークを削除
```bash
docker compose down
```

### 指定されたサービスでコンテナを生成し、その中でユーザーが指定したコマンドを実行

```docker
docker compose run [service名]  [command]
# 例
docker compose run web bundle install
```
### 実行中のコンテナでコマンドを実行
exec：実行者 

```bash
docker compose exec [service名] [command]

# web サービスで実行中のコンテナに対して bash シェルを開始
docker compose exec web bash

# 開発環境でのツールやサーバー起動スクリプトを実行 ※bin/devスクリプト
docker compose exec web bin/dev
```




参考
https://qiita.com/etaroid/items/88ec3a0e2d80d7cdf87a#docker-compose%E7%AE%A1%E7%90%86%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E4%B8%80%E8%A6%A7