OmniAICreator/Qiita-1.07M huggingface dataset:
GASエディタでJSDocを書いてみる

たまには遊んでみようかと思い記事をφ(❐_❐✧

## そもそもGASってJSDoc書けるのって知ってる?
例えば下記のような`fizzBuzz`をしてくれる関数があったとします。
コメント部分がJSDocですね。
ちなみにChatGPTに作らせました。

```js
/**
 * 1から指定された数までの数値に対して、フィズバズルールに基づいた文字列を返す。
 * 3の倍数の場合は"Fizz"を、5の倍数の場合は"Buzz"を、3と5の両方の倍数の場合は"FizzBuzz"を返す。
 * それ以外の場合は、その数値を文字列として返す。
 *
 * @param {number} num - フィズバズルールを適用する最大の数値
 * @returns {string[]} - フィズバズルールに基づいた文字列の配列
 */
function fizzBuzz(num) {
  const result = [];
  for (let i = 1; i <= num; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      result.push("FizzBuzz");
    } else if (i % 3 === 0) {
      result.push("Fizz");
    } else if (i % 5 === 0) {
      result.push("Buzz");
    } else {
      result.push(i.toString());
    }
  }
  return result;
}
```

この関数を作った状態で`fizzBuzz`を呼び出すと下記のような形で、
補完 + 引数の型と返り値の型が表示されます。

![スクリーンショット 2023-04-14 0.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/e328863d-5744-ee1e-1123-c3c3c8a00e97.png)

GASエディタを使う場合、とても重宝します。
(VSCodeとかでゴリゴリ書いてる人にとっては当たり前でしょう

ちなみに、ライブラリとしてデプロイするとこんな画面が自動で生成されます。
（正直見辛いので使ってない）
![スクリーンショット 2023-04-14 1.07.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/3e0626a4-cc49-ef86-d317-f4db034b839c.png)



## ちょっと遊んでみよう

変数に対してもJSDocで型を呼び出せますが、
その前にJSDocを使わない状態だとどうなるのか

### constの場合
代入された値が表示されます

![スクリーンショット 2023-04-14 0.39.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/7af8dcaf-8636-6c57-b76e-b7aab615c7ac.png)


### letの場合
型で表示されます

![スクリーンショット 2023-04-14 0.40.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/4150e5b9-8883-4604-d0a2-f49708e5bced.png)

### 少しいじめてみましょう

typeを使えば型を定義することも可能です。
さっきは`const`を使うと値そのものが表示されていましたが、
今はtypeで指定した型`string`になっていますね

![スクリーンショット 2023-04-14 0.42.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/544126a7-4da0-7209-e748-cbd63df57f8d.png)


じゃあ次、別の型を入れたらどうなるのか

まず、型を与える前
`const age = 12;`に対して、ドット演算子を使うと、当然ながら`number`に対してのプロトタイプチェーンが呼び出されます

![スクリーンショット 2023-04-14 0.44.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/c70d488d-953c-ccfc-e4d8-c823246ea220.png)

そして、`string`を与えてみると、、、
`string`に対してのプロトタイプチェーンが表示されます。

当然、`string`って言ってるのに`number`じゃないぞ！！
なんて言ってくれません。

![スクリーンショット 2023-04-14 0.47.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/8baaaca4-3b99-4c81-440f-0a42bd8cbd59.png)

とはいえ、こんな使い方も当然できるので、
GASエディタだけでGASを記載している人はぜひ、伝わりやすいスクリプトを書いていただけるといいのかなと思います。

![スクリーンショット 2023-04-14 0.48.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/44c9cbd0-79c9-fc3f-70d0-a402858b36de.png)

## まとめ

いかがでしたでしょうか。
まぁ私は普段TypeScriptとclasp使って作ってるのでアレですが、
GASをGoogle提供のエディタで書いている方は初心者の方が多いイメージなので、
ちょっとした小話でした。

## 余談

F1キーや右クリックからコマンドパレットが呼び出せますが、
ハイコントラストの切り替えがありました。

![スクリーンショット 2023-04-14 0.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/cd3d7f8e-6cc9-f418-9fde-99d6e3ce8d3f.png)

微妙(笑)
ちなみに隣のファイルやライブラリペインの色は変わらない。

![スクリーンショット 2023-04-14 0.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565925/10925c59-df78-4886-a548-286841f14220.png)
classを<div>でつけるか、<h>や<p>などでつけるか迷ったときの考え方

初Qiitaの投稿です。

ジーズアカデミーでプログラミングを学び始めて、2日目の私ですが
Progateなどでは知ることができなかった学びがあったので、備忘録として記載します。
こんなに大切なことなのに、説明してある物を見つけられませんでした。
もっと早く知っておければ、学習を楽しく進められたのにな…と今では思います。

divの理解こそが初学者の熟練度を左右するような気がしています…
<h2>前提

結論をお伝えする前に初心者はとにかくコードを書く量が大切です。
（完全にジーズの影響です笑）

初心者はたくさんの知識を詰め込んだとしても、コードを書けるようにはなりません。
本で勉強している時間があるなら、とにかく実際に書いてみる。
これが早期上達の鉄則だと、学びながらひしひしと感じています。笑

<h2>結論

もったいぶらず結論から言います！
初心者は迷ったら＜div class＞を使ったほうが良いと思います。

理由は初心者は使い分けができないからです。

<h2>divの性質

divは元祖のタグです。
国で言うところのローマです。（すべての道はローマに通ずる的な…と先生が言ってました。）
人で言うところの新生児です。
ミスタードーナツでいうオールドファッションです。

何が言いたいかというと、divには「何も」ついていないんです。
（それゆえ非常に柔軟に使える。）

<h2>他のタグと比較で考える

例えば＜p＞や＜h2＞タグはhtmlしか書いていないのに、自動で既にcssがついているんです。
他のタグも同様です。

人で言うところの小学生です。
ミスタードーナツで言うチョコレートオールドファッションです。

お持ち帰りでドーナツにデコレーションをしたいのに、チョコレートがかかっていたらやりづらいですよね？

コードでも勝手にcssがついていることによって、cssで多くの調整をしたいときにとても不便になります。
もちろん、慣れている方にとっては正反対で非常に便利なものです。

ただ多くのタグを見慣れていない私達初心者にとっては、それぞれのタグがどんなcssがくっついているのか、
そんなの覚えてられません。

<h2>まとめ

初心者はとにかく言語に慣れるために、コードの量を書きまくる。
→書きまくるために、最も柔軟な＜div class＞を使いまくりましょう、という話です！

追伸　使い分けなどは今後の学習で学んだら、記事を書こうと思います。
全パターン網羅する方法２（順番が異なるものを別のものとして数える場合）

[「前回の記事（全パターン網羅する方法）」](https://qiita.com/takenori_ohashi/items/4631d3bc7fa4a9cf5171)では、
list から決められた個数を選んだ時の全パターン網羅について説明しました。

前回の記事では、
順番が異なるものを同じものとして数えていませんでしたが、
今回の記事では、
順番が異なるものを別のものとして数える方法について説明します。

まず、違いについて具体例をあげて簡単に説明します。
`test_list = ["a", "b", "c"]`という list があり、ここから2つを選ぶ場合、
順番が異なるものを同じものとするならば（前回の記事の内容）、
`('a', 'b'), ('a', 'c')`の2パターンだけです。
順番が異なるものを別のものとするならば（今回の記事の内容）、
`('a', 'b'), ('a', 'c'), ('b', 'a'), ('b', 'c'), ('c', 'a'), ('c', 'b')`の6パターンです。

これを踏まえて、具体的なコードを使って説明します。
```python
# 必要なモジュールをインポート
import itertools

# このlistの全並び順を網羅する
test_list = ["a", "b", "c", "d", "e", "f"]

# test_list から2個選んだ場合の全パターン検索（順番違いは同じとみなす）
all_pattern_no_sequence = list(itertools.combinations(test_list, 2))
print("test_list から2個選んだ場合の全パターン数（順番違いは同じとみなす） -> ", len(all_pattern_no_sequence))
print(all_pattern_no_sequence)
print()

# test_list から2個選んだ場合の全パターン検索（順番違いは別のものとみなす）
all_pattern_sequence = list(itertools.permutations(test_list, 2))
print("test_list から2個選んだ場合の全パターン数（順番違いは別のものとみなす） -> ", len(all_pattern_sequence))
print(all_pattern_sequence)
```

前回説明したように、「順番違いは同じものとみなす全パターン網羅」には
`itertools.combinations()`関数を使います。
そして「順番違いは別のものとみなす全パターン網羅」には
`itertools.permutations()`関数を使います。

この2つの関数を使って、対象 list から2つを選んだ場合の全パターン網羅を行った場合の
実行結果は以下の通りです。

```python
test_list から2個選んだ場合の全パターン数（順番違いは同じとみなす） ->  15
[('a', 'b'), ('a', 'c'), ('a', 'd'), ('a', 'e'), ('a', 'f'), ('b', 'c'), ('b', 'd'), ('b', 'e'), ('b', 'f'), ('c', 'd'), ('c', 'e'), ('c', 'f'), ('d', 'e'), ('d', 'f'), ('e', 'f')]

test_list から2個選んだ場合の全パターン数（順番違いは別のものとみなす） ->  30
[('a', 'b'), ('a', 'c'), ('a', 'd'), ('a', 'e'), ('a', 'f'), ('b', 'a'), ('b', 'c'), ('b', 'd'), ('b', 'e'), ('b', 'f'), ('c', 'a'), ('c', 'b'), ('c', 'd'), ('c', 'e'), ('c', 'f'), ('d', 'a'), ('d', 'b'), ('d', 'c'), ('d', 'e'), ('d', 'f'), ('e', 'a'), ('e', 'b'), ('e', 'c'), ('e', 'd'), ('e', 'f'), ('f', 'a'), ('f', 'b'), ('f', 'c'), ('f', 'd'), ('f', 'e')]
```
文学部卒社会人が大学院で人工知能研究に挑戦〜3日目〜


## 本日の講義内容
本日は講義なし

## 本日の学習内容＆時間

**復習・自習**
- Python
    - 関数
    - for文
- 数学
    - 線形代数（ベクトル・行列の入門レベル）

計：約3時間

Pythonの学習はGoogleCorabを使い自分でコードを書くようにしています。また数学の学習における、計算も極力、手計算とPythonの双方で確認したりしています。
答え合わせや行き詰まった時にはChatGPTが教えてくれるので助かります。ただ自分の身にならないとしょうがないので、活用はしつつも如何に自分のものにするのかを意識しながら学習を進める必要を実感しています。上級者の方は良い学習法があればぜひ教えてください。

明日は授業２コマ、復習が大変そうだ。。。
それでは！
【ビボーロク】flutterをWin11にインストールする方法

# はじめに

今さっきインストールをやってきて、記憶が新しいうちにインストール方法をメモしておきます()

# インストール

windowsとMacやLinuxではインストールの方法が異なります。

## 1. ZipファイルをDLして解凍

https://docs.flutter.dev/get-started/install/windows

上のサイトのflutter_windiws_x.x.x-stable.zipをクリックしてダウンロードします。

DLが終わった後、いつも通りZIPを解凍します。

> 解凍完了後、ディレクトリ名を簡単にしてわかりやすい場所に移動することをおすすめします。

## 2. 環境変数の設定

Windowsメニューから環境変数の設定を開き、システム環境変数から解凍したフォルダまでのパスを指定

私は変数を

変数名: FLUTTER_BIN
パス: C:\Users\xxx\flutter\

にしてます。

変数名は任意ですが、ヘンテコにするとあとで詰みます...

そしてユーザー変数からPath -> 編集
%FLUTTER_BIN%\binを追加

そしてPowershell等を開いてflutter -hで動けばOKです。


それでは良きFlutterライフを👍

# 余談

私のPJ&Twitterもよろしく

https://github.com/nknighta/V


https://twitter.com/ama_dev_1
要素をスクロールした時に固定する

# 目的

サイト全体の背景色を変えてみたんだけどかわいくないからやめました。
今日はマイページでも作ろうと思います。
マイページを2カラム構成にして、左に自分の情報、右にレコードを表示するようにします。
画面を下にスクロールしても、右の情報は固定されるようにすることが目的です。

# 今回やること

今回の目標は以下の2つ。
* マイページのhtmlをかく
* マイページのCSSをかく


# 環境
* windows 10
* ruby 3.0.4
* rails 6
* Bootstrap 5.0.2


# いざ出陣

### html
chatGPTに要件伝えて書いてもらいました。
何回か別chat作って聞くと、どんどん良くなっていってびっくりした。
別chatなのに？良いとか悪いとか言ってないのに？なんで？

```html:app\views\users\index.html.erb
<%= stylesheet_link_tag 'index', :media => "all" %>
<div class="container">
    <div class="left-card">
        <h2>My Information</h2>
        <p>Some information about myself goes here.</p>
        <p>Some more information goes here.</p>
        <p>Even more information goes here.</p>
        <p>my email address is <%= @user.email %> and my user ID is <%= @user.id %>.</p>
        <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
    </div>
    <div class="right-cards">
        <div class="community-card">
            <h2>Community 1</h2>
            <p>Some information about this community goes here.</p>
        </div>
        <div class="community-card">
            <h2>Community 2</h2>
            <p>Some information about this community goes here.</p>
        </div>
        <div class="community-card">
            <h2>Community 3</h2>
            <p>Some information about this community goes here.</p>
        </div>
        <div class="community-card">
            <h2>Community 4</h2>
            <p>Some information about this community goes here.</p>
        </div>
        <div class="community-card">
            <h2>Community 5</h2>
            <p>Some information about this community goes here.</p>
        </div>
        <div class="community-card">
            <h2>Community 6</h2>
            <p>Some information about this community goes here.</p>
        </div>
    </div>
</div>
```

### CSS
CSSは長いので、固定する指定の部分だけ。
```css:app\assets\stylesheets\index.css
/* Left card styles */
.left-card {
	background-color: #fff;
	border: 1px solid #ccc;
	padding: 20px;
	width: 30%;
    height: min-content;
	position: sticky;
	top: 20px;
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/33c5719b-c9e2-c404-e71b-0cc45a9542bf.png)
↓スクロール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/693325/cec0f022-113c-b9c6-be14-0d49d317979c.png)

そうそう、そーゆーこと！

# 余談
ミドルバックの勉強したくて始めたのに、フロントばっかやってて草なんですが。
来週はやろうね、僕。
Java SE11 Silver取得までの記録

少し遅いですが、本日からJava SE11 Silver取得するまで記録をつけます。
今行っている勉強法は、スッキリわかるJava入門第3版に収録されている章末を解き、分からないところはYouTubeや参考書を頼りに解決しています。
目標は7月中にSilverを取得します。
毎日１時間勉強をしたいな思っています。少し少ないように感じますが、勉強をしすぎてJavaが嫌になったら本末転倒だと感じたので１時間の積み重ねで取り組んでいきます。

本日の勉強内容は、「第５章　メソッド」の問題を解きました。トータルで３回目でした。まだまだ理解が浅いところもありましたが、２回目よりはわかる部分も増えてきてるのでポジティブに捉えて頑張ります。オーバーロードについては、ある程度理解できましたが、戻り値を必要としたプログラミングはまだ理解できていないので明日はそこを重点的に行っていきます。
ハッシュ値を確認するバッチファイルを作成

1. はじめに
多くのソフトウェアをダウンロードする際に、ハッシュ値が同時に公開されているが、これまでそれについて深く考えたことはなかった。実際、ハッシュ値の確認方法すら知らなかった。

2. ハッシュ値の確認方法の調査
しかし、調査を行うと、ハッシュ値の確認方法が意外と簡単であることが分かった。

3. SHA-256ハッシュ値確認バッチファイルの作成
バッチファイルの学習を兼ねて、SHA-256ハッシュ値を確認できるバッチファイルを作成した。

4. 遅延環境変数
　　遅延環境変数（enabledelayedexpansion）について、デメリットもあるみたいなので調査。

```bat:SHA-256ハッシュ値確認バッチファイル
@echo off
setlocal enabledelayedexpansion

REM ユーザーにファイル名の入力を促す
echo ファイル名を入力してください:
set /p "filename="

REM 入力されたファイル名が存在するかどうかを確認する
if not exist "%filename%" (
    echo Error: File not found: %filename%
    pause
    exit /b 1
)

REM certutilコマンドを使用して、入力されたファイルのSHA-256ハッシュを計算する
REM findコマンドを使って、"hash"という文字列を含まない行だけを抽出し、ハッシュ値を取得する
for /f "tokens=*" %%a in ('certutil -hashfile "%filename%" SHA256 ^| find /v "hash"') do (
    set "hash_value=%%a"
)

REM 計算されたSHA-256ハッシュ値を表示する
echo SHA-256ハッシュ値: %hash_value%

endlocal

REM 結果を表示したままにするために、一時停止する
pause


```
Rust初学者がReqwestの使い方でハマってしまったので備忘録

# Reqwest公式の説明は初学者を混乱させる

組み込み機器に近い産業PCにAPIを作る必要があってRustを学び始めた者です。
actix-web上でreqwestを使う場面が出てきて実装しようと思ったらコンパイラに怒られまくりました。
Rust初学者がハマってしまうところがあったので備忘録として書きます。
かなり試行錯誤と勘違いがあった（pythonのrequestsと同じような使い方だと思っていた）ので初学者を対象に情報共有をします。

## 公式さんよ、前提を教えてくれよ

reqwest公式の説明から下記の書き方をやりがちですが、これは動きません。
なぜならreqwestは<strong>非同期処理(async main()みたいなやつ)がデフォルト</strong>に変更したからです！！

https://docs.rs/reqwest/latest/reqwest/

:::note warn
警告
下記のコードは動きません！！
:::

``` rust
//うごきません！！

fn main(){
    let body = reqwest::get("https://www.rust-lang.org")
        .await?
        .text()
        .await?;

    println!("body = {:?}", body);
}
```

## 前提条件
まず最初に公式通りのコードを使いたい場合はreqwestと共にtokioが必要になります。
通常通りに同期処理で使いたい場合はCorgo.tomlに"features = ["blocking"]"を追加する必要があります。

```Cargo.toml
[package]
name = "reqwest-practice"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
reqwest = { version = "*", features = ["blocking"] }
tokio = { version = "*", features = ["full"] }
```


#### 通常の同期処理で使いたい場合

```rust

fn main() {
    let url = "https://www.rust-lang.org";
    let rc = reqwest::blocking::get(url).unwrap(); //同期処理にするためreqwest::blockingから呼び出す。
    let contents = rc.text().unwrap();
    println!("{}", contents);
}

```



### 公式のドキュメントで説明されている非同期処理の場合
tokioを使う必要があります。その説明がないのでRust初学者の鬼門です。

```rust

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let url = "https://www.rust-lang.org";
    let contents = reqwest::get(url).await?.text().await?;
    println!("{:?}", contents);
    Ok(())
}

```


### 非同期処理で関数を分割した場合
```rust

async fn sub() -> Result<(), Box<dyn std::error::Error>> {
    let url = "https://www.rust-lang.org";
    let contents = reqwest::get(url).await?.text().await?;
    println!("{:?}", contents);
    Ok(())
}

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    sub().await?;
    Ok(())
}
```

### actix_webでreqwestを利用した場合
自分が必要だったので備忘録的に残しておきます。

```rust
use actix_web::{get, post, web, App, HttpResponse, HttpServer, Responder};

async fn sub() -> Result<String, reqwest::Error> {
    let url = "https://www.rust-lang.org";
    let contents = reqwest::get(url).await?.text().await?;
    println!("{:?}", contents);
    Ok(contents)
}

#[get("/")]
async fn hello() -> impl Responder {
    sub().await.unwrap();
    HttpResponse::Ok().body("Hello world!")
}

#[post("/echo")]
async fn echo(req_body: String) -> impl Responder {
    HttpResponse::Ok().body(req_body)
}

async fn manual_hello() -> impl Responder {
    HttpResponse::Ok().body("Hey there!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(hello)
            .service(echo)
            .route("/hey", web::get().to(manual_hello))
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}
```


```rust
async fn main()-> std::io::Result<()>
```
Rust初学者のため、上記のコードになぜ戻り値が入ってくるのか、理屈がわかっていなかったりします。

2024/07/27　追記
[?]で記述したい場合にResult型で自動的にError排出する際に必要だから。
【Swift】NSObjectって何者？少しだけ詳しく調べてみた

## 概要
iOSアプリの開発をしていて分からないコードを調べると、よく**NSObject**というものを継承したクラスを目にします。

今までは特に気にすることなく写していましたが、ふとこのNSObjectが何者で、どんな働きをするのかが気になったので、少し調べてみましたのでまとめます。

筆者はSwift歴1年でObjective-Cの知識は全くありません。
そのため間違った理解をしている可能性があります。もし間違いを発見しましたら、指摘していただけると幸いです。

## NSObjectとは
そもそもNSObjectとは何でしょう。
Appleの公式ドキュメントでは、以下のように説明されています。

> The root class of most Objective-C class hierarchies, from which subclasses inherit a basic interface to the runtime system and the ability to behave as Objective-C objects.
>
> 訳：ほとんどのObjective-Cのクラス階層のルートクラスで、サブクラスはランタイムシステムへの基本的なインターフェースとObjective-Cのオブジェクトとして動作する能力を継承するものである。
引用: [Apple公式Document - NSObject](https://developer.apple.com/documentation/objectivec/nsobject)

ざっくり説明すると、__NSObjectとはObjective-Cのルートクラスのことです。__

Cocoaフレームワークのオブジェクトのほとんど全てが、このNSObjectを継承しています。全てのオブジェクトの元になるので、ルートクラスです。

### そもそもNSって何？
本題とは関係ないのですが、Objective-Cのクラス名の冒頭には「NS」がつきがちです。
このNSとは何なのでしょう。

これはスティーブ・ジョブズがAppleを追放された後に作ったNext社という会社の、NextStepという製品の開発にObjective-Cが使われたからです。
__NS = NextStepだったんですね。__

## 使用用途は？
### Objective-CのAPIを使用する必要がある場合
SwiftでObjective-Cで書かれたライブラリやフレームワークを使用する場合は、NSObjectを継承する必要があります。

NSObjectを継承することで、Objective-Cとの互換性を持たせることができます。
__NSObjectはSwiftとObjective-Cとを繋ぐ架け橋というわけです。__
    
### KVC(Key Value Cording)を使用する場合（曖昧）
KVCとは、オブジェクトの属性値に対して、プロパティや変数から間接的にアクセスする方法です。

Objective-Cは動的型付け言語で、ランタイム時の柔軟性が特徴です。
__NSObjectを継承することで、この柔軟性をSwiftも享受することができます。__

この柔軟性のおかげでKVCが実現できるらしいです（？）。
そしてこのKVCという技術が開発の際によく使うIBOutletなどに使われているっぽいです。

もう少し詳しく知りたい方は👉[NSObjectについてちょっと深堀りしてみた
](https://qiita.com/frosted_bird/items/88060208d9545ea8ec4b)

## まとめ
NSObjectはObjective-C時代の産物なので、どうやら自分で新しくコードを書くときはできるだけ使わない方が良いらしいです。

とはいえ、開発をしているとどうしても使用しなければいけない場面もあると思います。その際にNSObjectがどういった働き、役割をしているのか知っていれば安心して使えます。

個人的には、とりあえず**NSObjectはSwiftとObjective-Cを繋ぐ架け橋**、という認識でいれば間違いなのかなと思います。

最後まで読んでいただきありがとうございました！😊


## 参考記事
👇かなり参考になりました。

https://qiita.com/frosted_bird/items/88060208d9545ea8ec4b

https://qiita.com/coret/items/7f93bab5f628cff88851

https://qiita.com/ysn/items/fdf183ce9c7a87d279cb

https://www.sejuku.net/blog/33085

https://developer.apple.com/documentation/objectivec/nsobject

https://developer.apple.com/library/archive/documentation/General/Conceptual/DevPedia-CocoaCore/RootClass.html
Readyforのリターン用にTシャツ画像を自動生成してみた

# Readyforのリターン用に多色のTシャツ画像を自動で作ってみた



## 概要 
Readyforでリターン用の画像は一枚しか入れられません。例えば、こんな感じの画像です。これは４つの画像からできているのでこれを一枚にするワンライナー作りましたという記事です。


このコマンドとコマンドパラメータはchatGPTに教えてもらいました。いくつかの候補を上げてもらうのがとても便利。

## コード書く前に何をしたいか考えてみる。

欲しい画像（そしてできた画像）はこんな感じです。

![OUT.2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178143/86c03c9a-b6f2-e4cb-5c7b-ddb49be0381d.jpeg)


これは４つの画像の合成でできています。文字の表と裏の画像と、Tシャツの表と裏の画像４枚からできています。リターンにTシャツの色を豊富に用意するとなると、合成を手作業で行うのは大変です。手でやっていられないので、自動化を考えました。


考え方は至って簡単です。４つの画像を用意して、それを横に並べればいいでしょう。どの色でも同じ配列になるように画像のサイズを合わせておきます。画像は余白を考慮して座標を指定すればいいでしょう。

そこまで考えてchatGPTに「画像を横並びにするLinuxコマンドはない？」、「convertを使って複数の画像の位置を指定して合成するには？」などと聞くと方法を幾つかを教えてくれました。１時間ぐらいでできた作業ですが、google検索で探すよりはは手っ取り早い感じです。


実際に見ていきます。

imagemagick社のconvertを用います。システムに入っていない方はMacなら

```bash
brew install imagemagick
```

でインストールできます[1](https://ultrabem-branch3.com/informatics/commands_mac/convert_mac)。

### 1. Tシャツの画像の準備

UP-Tなどで独自のデザインでTシャツを作れますが、使ったサイトでは表と裏は一枚ずつしか出てこないです。

サイトのカートで色見本を試すことができます。WEBサイトで編集して編集済みのTシャツのサイズと色を選び、プレビューで表示した後、なるべく枠が残らないギリギリで画面キャプチャーしました。

- Macだと`システム環境設定`→`キーボード`→`ショートカット`→`スクリーンショット`にキーボードショートカットの記載があります。

- Winだと例えば[【パソコン】スクリーンショットの撮影と保存先の設定](https://windowsfaq.net/windows/setting/how-to-take-a-screenshot/)



用意した画像はこんな感じになります。スクリーンショットのファイル拡張子はpngとします。

![サックス表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178143/6ce775a8-dd9d-758c-e04f-af361d7069e2.png)


![サックス裏.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178143/9e92afe3-e08e-f9b4-7390-5fc3b9b915b8.png)




### 2. Tシャツのサイズを幅を全部一定にします。

私の環境では幅1700pxぐらいでキャプチャーされたのですが、計算を簡単にするため例えば1500pxにリサイズします。

```bash
cd 対象のディレクトリ
ls *.png | awk '{print "convert " $1 " -resize 1500x " $1 ".jpg"}' | bash -C
```

### 3. 裏の文字と表の文字を作ります。

![up.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178143/91491d5e-ccff-f880-51e7-8c56e3e0b909.jpeg)
![down.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178143/fff60025-81d8-eca9-0a19-b1bacf4d616a.jpeg)


単にkeynoteで表示して画面キャプチャーしただけです。

これもリサイズします。150px幅にしました。

```bash
 convert -resize 150x up.png up.jpg
 convert -resize 150x down.png down.jpg
```



### 4. 次に横一列に並べます

imagemagickのconvertを使って文字”表"とTシャツの表と文字”裏"とTシャツの裏を一列に並べます。オフセットを100x100pxにします。背景も白にします。

```bash
ls *png.jpg |
xargs -n2 |
awk '{ 
    print "convert -size 3500x1700 xc:none \\( up.jpg -geometry +100+100 \\) -composite \\( " $1 " -geometry +250+100 \\) -composite \\( down.jpg -geometry +1750+100 \\) -composite \\( " $2 "  -geometry +1900+100 \\) -composite  -background white -flatten OUT." ++i ".jpg"
}' |
bash -C
```

ポイントは表と裏のTシャツの２枚の画像を使って生成しますが、これを`xargs -n2`で２つ区切りの行に変換することです。

convertのオプションですが、最終画像のサイズを`-size`オプションで、各画像の位置を`-geometory`と`-composite`オプションで指定しています。また背景を白にするため、`-background white -flatten`オプションを指定しています。

出力ファイル名はOUT.x.jpgです。xは数字です。最後に`bash -C`で実行します。



実際には、パイプを一段ずつ足していってデバックするのがいいと思います。言わずもがなですが。



そうするとこんな感じの絵が各種の色で作られましたとさ。

![OUT.8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178143/5af17e3f-bf99-cbd8-5c74-571ca1adee43.jpeg)


めでたしめでたし。
Git Actions を使用して Python コードを Cloud Run 上にデプロイ

以下は、Git Actions を使用して Python コードを Cloud Run 上にデプロイするための手順です。

## GCP でプロジェクトを作成します。

## Cloud Run サービスを作成します。

## Cloud Run サービスにデプロイするために使用する Dockerfile を作成します。例えば、以下のようになります。

```dockerfile:dockerfile
# Dockerfile

# Use the official Python image
FROM python:3.9-slim-buster

# Copy the application directory to the container
COPY . /app

# Set the working directory
WORKDIR /app

# Install dependencies
RUN pip install --no-cache-dir -r requirements.txt

# Expose the port
EXPOSE 8080

# Start the application
CMD ["python", "app.py"]
```
## GCP の認証情報を設定します。以下の手順で実行します。
GCP コンソールにログインします。
「IAM & 管理」 > 「サービス アカウント」を選択します。
「新しいサービス アカウント」をクリックし、適切な権限を与えたサービス アカウントを作成します。
サービス アカウントを選択し、JSON 形式の認証情報ファイルをダウンロードします。
作成した Dockerfile を GCR にプッシュします。以下の手順で実行します。
Cloud Shell を開始します。
gcloud auth configure-docker コマンドを実行して Docker の認証情報を設定します。
docker build -t gcr.io/[PROJECT-ID]/[IMAGE-NAME] . コマンドを実行して Docker イメージをビルドします。
docker push gcr.io/[PROJECT-ID]/[IMAGE-NAME] コマンドを実行して Docker イメージを GCR にプッシュします。

## Git リポジトリでの設定について以下の手順で説明します。

ソースコードと Dockerfile を Git リポジトリに追加します。

GitHub でリポジトリを作成します。

Cloud Run にデプロイするために使用するサービス アカウントのキーを保存します。以下の手順で保存します。

GCP コンソールにログインします。
「IAM & 管理」 > 「サービス アカウント」を選択します。
使用するサービス アカウントを選択し、「鍵の作成」をクリックします。
JSON 形式の鍵を作成し、ダウンロードします。
GitHub のリポジトリの「Settings」 > 「Secrets」を開き、保存したサービス アカウントのキーを追加します。以下の手順で追加します。
「New repository secret」をクリックします。
Name に GCP_SA_KEY を入力します。
Value に保存したサービス アカウントのキーを貼り付けます。
.github/workflows/main.yml を作成し、以下の内容を追加します。
```yaml:main.yaml
yaml

name: Deploy to Cloud Run

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: Set up Cloud SDK
      uses: google-github-actions/setup-gcloud@v0.4.0
      with:
        project_id: [PROJECT-ID]
        service_account_key: ${{ secrets.GCP_SA_KEY }}
        export_default_credentials: true

    - name: Build and deploy to Cloud Run
      run: |
        gcloud builds submit --tag gcr.io/[PROJECT-ID]/[IMAGE-NAME] .
        gcloud run deploy [SERVICE-NAME] --image gcr.io/[PROJECT-ID]/[IMAGE-NAME] --platform managed --region [REGION]
```
上記の YAML ファイルでは、以下の内容を実行します。

main ブランチに push された場合にジョブがトリガーされます。
Google Cloud SDK をセットアップし、サービス アカウントのキーを使用して認証します。
Docker イメージをビルドし、GCR にプッシュします。
Cloud Run にデプロイします。
各項目で使用する値は、自分のプロジェクトに合わせて適宜変更してください。
Jsonデータからtableを生成する。

Jsonデータからtableを生成する方法について調べてみた。

参考になりそうなもの。

https://qiita.com/kunihiro9216/items/15339509604d66fdb961









<!DOCTYPE html>
<html>
<head>
  <title>table</title>
  <meta charset="UTF-8">
<style>
table{
 border-collapse: separate;
 border-spacing: 0px 5px;
 margin: 0 auto;
}
td,th{
 padding: 10px;
}
th{
 background: #10a0e0;
 color: #fff;
}
td{
 background: #f1fafe;
}

td:nth-child(3) {
width:10em;
    background-color: #db3ba3;
    text-align:right;
    color: #fff;
}

</style>
</head>
<body>
<table>
 <tr><th>項目A</th><td>A-1</td><td>A-2</td><td>A-3</td><td>A-4</td></tr>
 <tr><th>項目B</th><td>B-1</td><td>B-2</td><td>B-3</td><td>B-4</td></tr>
 <tr><th>項目C</th><td>C-1</td><td>C-2</td><td>C-3</td><td>C-4</td></tr>
 <tr><th>項目D</th><td>D-1</td><td>D-2</td><td>D-3</td><td>D-4</td></tr>
</table>
</body>
</html>
setIntervalでstateの値を扱うときに気を付けること

株式会社ココロファン - エンジニアリング事業部所属のhazamaです。
サイト制作・運用業務をメインに行っています。

Reactでタイマーアプリを作っている時に`useState`と`setInterval`を使用したところ、
`state`が更新されない事象に嵌りました。

## その時のコード
```js
import React, { useEffect, useState } from 'react'

export const Timer = () => {
  const [time, setTime] = useState(60)
  
  useEffect(() => {
    const count = setInterval(() => {
      setTime(time - 1)
    }, 1000)
    
    return () => clearInterval(count)
  }, [])
  
  return <div>あと {time}秒</div>
}
```
特に真新しいものはありませんが、`setInterval`メソッドを使用して1秒ずつ`time`を減らすだけの
単純なコードですが、こちらを実行するとタイマーは59秒から変わりません。
`setInterval`がちゃんと動いていないのかと思いましたが、`console.log`を仕込んだら1秒ずつ出力されている。
つまり`setInterval`は動いているけど、`state`の値が更新されていないということがわかりました。

## 原因
どうやらクロージャーの問題のようです。
`setInterval`のコールバック関数がクロージャーを作成し、その中で`useState`の値を参照している場合、`setInterval`が
実行された時点での`useState`の値が固定されてしまうようです。
なるほど、先程のコードの場合`time`の初期値は60になっているので、`setTime`に渡されるのは59になってしまうと・・・。

## 解消を試みる 
 原因がわかったので、`useState`の値を直接参照するのはやめ`prveState`（以下では`prevTime`と命名）で
更新される前の値を参照し減算するようにしました。
```js
import React, { useEffect, useState } from 'react'

export const Timer = () => {
  const [time, setTime] = useState(60)
  
  useEffect(() => {
    const count = setInterval(() => {
      setTime(prevTime => prevTime - 1)
    }, 1000)
    
    return () => clearInterval(count)
  }, [])
  
  return <div>あと {time}秒</div>
}
```
結果はちゃんと動くようになりました！！！が、そもそも基本的な見落としがあります。
`useEffect`内で`time`を参照しているにもかかわらず、第二引数にて何も指定していません。
第二引数の依存配列に`time`を参照するようにすれば動くようになります。普通にこっちの方がシンプルでいいですね。
```js
import React, { useEffect, useState } from 'react'

export const Timer = () => {
  const [time, setTime] = useState(60)
  
  useEffect(() => {
    const count = setInterval(() => {
      setTime(time - 1)
    }, 1000)
    
    return () => clearInterval(count)
  }, [time])
  
  return <div>あと {time}秒</div>
}
```
これで解決と思っていたら、マイナス秒に突入していきました。。。
今度は`clearInterval`が動いていない。
`setInterval` によるタイマーの更新処理が非同期で実行されているらしく、値が即座に反映されないことから
今回のようにマイナス秒に突入してしまうことがあるみたいです。

## 解消を試みる（2回目）
調査したところ、`setTime`の引数として新しい値を計算する関数を渡すると常に最新の値を基として更新が行われるようです。
以下のように修正してみました。結果はマイナス秒に突入するこもなくなく、無事解消できました！
```js
import React, { useEffect, useState } from 'react';

export const Timer = () => {
  const [time, setTime] = useState(60);

  useEffect(() => {
    const intervalId = setInterval(() => 
      time === 0 ? clearInterval(intervalId) : setTime(time - 1), 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, [time]);

  return <div>あと {time}秒</div>;
};
```
## 最後に
コードの量としては大したことないのですが、ここに至るまでに大分時間がかかりました。
1つ知見を得られたのは良かったのですが、それにしても嵌りました。
まだまだReact初級者なので、こういった嵌ったことがあれば記事にしてきたいと思います。
Rust研究：QRコード生成

仕事中に天啓のように閃いたポエムやちょっとしたメモ書きをささっとスマホに移動したい。
そんなことってありませんか？

今回はそんなときに重宝する（かもしれない）、テキストの QR コードをコマンドラインに表示するツールを Rust で作ってみました。

qrcode と thiserror のクレートを使用します。

```rust
// main.rs

use qrcode::QrCode;
use std::io::Read;

fn main () {
    if let Err(e) = process() {
        eprintln!("[Error] {}", e);
    }
}

fn process() -> Result<(), MyError> {

    let mut message = String::from("");

    // メッセージの取得
    let args:Vec<String> = std::env::args().collect();
    if args.len() > 1 {
        // コマンドライン引数からメッセージ取得
        message = String::from(&args[1]);
    } else {
        // 標準入力からメッセージを取得
        std::io::stdin().read_to_string(&mut message)?;        
    }

    // メッセージ中の改行コードを半角の空白に変換
    let message = message
        .replace("\r\n", " ")
        .replace("\n", " ");

    if message == "" {
        return Err(MyError::ArgumentError);
    }

    println!("message = {}", message);

    // QRコード生成
    let code = QrCode::new(message)?;

    // QRコードの文字列化
    let s = code.render()
        .light_color('■') // 全角の四角
        .dark_color('　') // 全角の空白
        .build();

    // QRコードの表示
    println!("{}", s);
    Ok(())
}

#[derive(thiserror::Error, Debug)]
enum MyError {
    #[error("give your message at command-line or via stdin")]
    ArgumentError,

    #[error("IOError({0})")]
    IOError(#[from] std::io::Error),

    #[error("QrError({0})")]
    QrError(#[from] qrcode::types::QrError),
}
```

実行例です。
コマンドライン引数に QR コードにしたいテキストを指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960096/c5f6dca8-d1d5-2197-3fce-0a738f153133.png)

もしくは、次のようにコマンドに標準入力でテキストを渡してあげます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2960096/ad9efa08-fdd1-0906-9256-0325fc356abf.png)

スマホのQRコードリーダアプリで読みだせます。

注意事項です。

* コマンドラインのフォントの前景色と背景色の組み合わせによってはうまく読みだせないことがありますので、その場合は適宜コマンドラインのプロパティ設定などで変更してみてください。
* また、QRコードにするメッセージの中で使用している文字によっては QR コードリーダで読みだしたときに化けることがあるようですのでご注意下さい。（般若心経のお経は見事に化けました）

今回はいわゆる一発芸でしたが、こういうしょうもないコマンドが案外長く使われたりします。
アウトガスによる基板の不良

どうもお久しぶりです。
最近は、お陰様でいろんな方からちょこちょこお仕事を
もらうようになりました。
ありがたやありがたや＼(^o^)／

そこでQiitaの記事がサボりがちになっていたのですが・・・

最近ちょっとした問題が発生したので記事にしてみました！

## 梱包材や接着剤には気をつけろ！！

題目の意味が全くわからないと思いますが最近車載系の基板に不良が発生しました！
アナログ出力に大きな誤差が出るようになってしまったのです・・・

やっぱりアナログ回路は奥が深いな(-_-;)
あんまりやりたくね～笑

原因を調べると梱包材や接着剤から発生するアウトガスが基板内に侵入し、
電子部品の抵抗値を上げていたのです！！(*_*)
通りで出力に誤差が出るわけだ・・・

通常基板は保護のために絶縁コーティング剤を塗るのですが、
アウトガスは余裕でそのコーティングを通り抜けます！！

皆さんの梱包材や接着剤にはそのようなリスクがあることも
頭に入れて使用されてくださいねー！(^^)
ChatGPTでYoutubeのゆっくり解説風動画自動生成してみた

## 経緯
最近話題のChatGPTのAPIを用いて、私も便利ツールを作ってみました。

テーマは、Youtube動画の自動生成です。
生成するのは、ゆっくり解説動画のようなイメージです。

様々な方がChatGPTの使い方を考案しており、Twitterを眺めていると無限にアイデアが流れてきます。そんな中、私もテーマをもとにyoutubeの台本を作れたら便利だなと思いました。

ですが、台本を作らせて動画は自分で自分で編集して、、、みたいな作業は面倒だなと思ったので、キーワードを入力→動画生成ができたら楽だなと思い、実際に作ってみました。

台本をChatGPTに自動生成してもらって、それをもとにpythonで動画を生成するシステムです。

前置きはともかく、完成したものの動作をご紹介します。

## 操作方法

1. 動画のテーマとなるタイトルを打ち込む
2. エンター
3. 動画完成

以上です。現状はコマンドラインからしか動作しませんが、いずれUIもつけようと思っています。

試しに、”ギリシャ神話のアポロン” というテーマで動画を生成してもらいました。

以下、生成された動画です。ダサいですが、サムネも背景画像を自動生成しています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/y1YfalASlkE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
この他にも”企業のリーダーシップとその成功のためのポイント”みたいなタイトルや、”イルカの驚くべき生態”のようなタイトルでも作ってみました。Youtubeの方にあげていますのでぜひ確認してください。
タイトルもChatGPTで”youtubeで人気が出そうなビジネス動画のタイトルの例を100個ほどあげてください”みたいにするとたくさん出てくるのでそこから作りたいものを選べます。(もはや人間がやる作業は決断だけ?)

動画内の文章ですが、冒頭部分だけは用意したものを使用する処理をしています。

語り手の女の子はdreamlike-art/dreamlike-anime-1.0というモデルで吟遊詩人の女の子を生成し、うまく行ったものを保存して使用しています。

左に表示されている画像は、章ごとの内容に合わせて、DALLEのAPIで画像を自動生成しています。

## システムの流れ

システムの流れを説明します。

1. タイトルを入力
2. タイトルをもとにChatGPTでYoutubeの台本の構成を出力
3. 構成をもとにChatGPTで本文を生成
4. 本文をフォーマットしてpython内で扱えるようにする。
5. 本文の読み上げ音声をVOICEVOXで作成
6. DALL・Eで構成ごとのイメージ画像を作成
7. 背景・字幕・口パク少女・イメージ画像を合わせた動画を作成
8. 動画と音声を合成
9. すべての動画をつなぎ合わせる。
10. サムネ画像生成

事前に用意しておく必要があるのは、以下です。

- 動画始まりの定型句。（これはなくてもできますが、揃えたいので、、）
- 少女の画像（口開け、口閉じの二枚）
- 効果音
- 背景画像
- そして、うまくいきそうなタイトルを考えておく(これも自動化予定)
   

## 作ってみて苦労したところ

- 出力のフォーマットを整えること
    - テストの結果、以下のように出力にブレがあることがわかりました。（実はまだあるかも、、）
        - 様々なjson code snipet
        
        ```python
        ```json
        
        \`\`\`json
        
        \\`\\`\\`json
        ```
        
        - そもそも```jsonがないjson形式。
        - json形式でないただのテキスト形式
            - (例)こんにちは、では早速、、
        - 謎テキスト形式
            - (例)名前：こんにちは、私の名前は・・・(全角コロン入)
  - これらの出力に対応した文字列抽出のプログラムを書く必要がありました。
- 日本語は生成精度が低い
    - 動画の文章にあった画像をDALL・Eで生成しているのですが、日本語で入力すると本当に意味のわからない画像が生成されます。
    - 一度英語になおしてから入力するとちゃんとした画像が出力されることが多いです。
- 画像生成の倫理コード
    - DALL・E APIを用いて背景の画像を生成する際に、OpenAIによって健全でないと判断されたものはリジェクトされます。
        - (例)シマウマのyoutube台本のときに”シマウマの繁殖と育児”がリジェクトされた
    - リジェクトされたとき用の適当な画像を用意して代用しました。
- 動画の処理が面倒
    - ChatGPT関係ないですが、動画処理は同じ拡張子のファイルでもコーデックが違ったりするとうまく処理できなくて大変ですね。

まだ、文章の流れや、動画のクオリティに改善の余地ありですが、タイトルだけでここまで動画を自動で作ってくれることに未来を感じました。
## 課題とやってみたいこと
- 最初に章構成を生成→章ごとの本文生成、という処理を行っているため、章ごとのつながりがおかしくなることがあります。そのあたりをうまくやってくれるプロンプトを考えたいです。
- 単純に口パクが２枚の絵を切り替えているだけなので味気ないです。もっと動かしたいです。
- Youtubeのコメント返しもやらせてみたい。(いずれはすべての工程をやらせて人間がやるのは確認作業？)

## おわりに
まだ、文章の流れや、動画のクオリティに改善の余地ありですが、タイトルだけでここまで動画を自動で作ってくれることに未来を感じました。そのうち自動生成されたものとそうでないものの違いがわからなくなりそうです。

youtube, twitterの登録お願いします。

## youtube

https://www.youtube.com/@user-np3ku4wk1t

## twitter

<a href="https://twitter.com/yunoko_gpt?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @yunoko_gpt</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Visual Studio Code に python で追加したライブラリを認識させる方法

1. 場所を見つける
    ~~~
    $ python3
    >>> import hoge
    >>> print(hoge.__file__)
    /Users/[yourdir]/foo/bar/hoge/__init__.py
    ~~~
2. Visual Studio Codeの設定より [Code] > [基本設定] > [設定] を選択する。
3. [設定の検索]に extra path と入力する。
3. [項目の追加]を クリックし、1.のhogeのあるパスを設定する。
この場合は、/Users/[yourdir]/foo/bar/ の部分となる。
3. 以上
Rails Model：テーブルからデータを抽出する

## 環境

| Tool           | Version     |
|:---------------|:------------|
| MacOS(Ventura) | 13.0        |
| Docker         |             |
| Ruby           | 2.6.4       |
| Rails          | 6.0         |

## 操作
Dockerコンテナを起動し、Webコンテナにログインする
```terminal:Dockerコンテナを起動する
$ docker-compose up -d
```

Dockerコンテナを起動後にWebコンテナにログインする
```terminal:Webコンテナにログイン
$ docker-compose exec web bash
```

rails consoleでRailsアプリケーションの対話モードに入る
```terminal:対話モードへ
$ rails c
```

ORMのコマンドでモデルを操作する
```terminal:モデルのテーブルのカラムを抽出する例
$ StaffMember.all
```

### ActiveRecordで生SQLを使いたいとき
複雑なクエリを書く際には積極活用したい
```rb:ActiveRecord::Base.connectionメソッドを使う
$ ActiveRecord::Base.connection.select_all("select * from staff_members where email ilike '%@google.com'").to_hash
# "@google.com"ドメインのみを抽出
```
【Swift】マルチモジュール構成でBundle.moduleがエラーになる

# はじめに
最近、個人開発プロジェクトにマルチモジュール構成を取り入れました。
ローカルファイルを取得しようとしたらエラーが出たので原因と解決方法を記録しておきます。

# エラー
![スクリーンショット 2023-04-13 21.45.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e144379d-dd4c-6d64-4848-2589e173aac9.png)

Bundleにmoduleがないらしいです。
そんなことはないはずなんですがね。。。

```swift
import Foundation

public struct Core {
    public init() {
        if let sample = Bundle.module.url(forResource: "sample", withExtension: "html"),
           let htmlString = try? String(contentsOf: sample) {
            print(htmlString)
        }
    }
}
```

# 解決策
原因はPackage.swiftでresourceを定義していないことでした

```diff_swift:Package
// swift-tools-version: 5.7
// The swift-tools-version declares the minimum version of Swift required to build this package.

import PackageDescription

let package = Package(
    name: "Core",
    products: [
        // Products define the executables and libraries a package produces, and make them visible to other packages.
        .library(
            name: "Core",
            targets: ["Core"]),
    ],
    dependencies: [
        // Dependencies declare other packages that this package depends on.
        // .package(url: /* package url */, from: "1.0.0"),
    ],
    targets: [
        // Targets are the basic building blocks of a package. A target can define a module or a test suite.
        // Targets can depend on other targets in this package, and on products in packages this package depends on.
        .target(
            name: "Core",
            dependencies: [],
+           resources: [.process("sample.html")]),
        .testTarget(
            name: "CoreTests",
            dependencies: ["Core"]),
    ]
)
```

# おわり
以下の記事に助けられました笑

https://developer.apple.com/forums/thread/650158
[AWS Q&A 365][Fargate]AWSのよくある問題の毎日5選 #28

# 1. AWS Fargateとは何ですか？
AWS Fargateは、Amazon Elastic Container Service（ECS）とAmazon Elastic Kubernetes Service（EKS）の両方で動作するコンテナ向けのサーバーレス・コンピューティング・エンジンです。開発者は、基盤となるインフラストラクチャを気にせずにコンテナを実行できます。

# 2. AWS Fargate用の仮想プライベートクラウドを作成するにはどうすればよいですか？
AWS Fargate用の仮想プライベートクラウドを作成するには、AWSアカウントにサインアップし、管理者ユーザーを作成し、VPCを作成する必要があります。AWS Management ConsoleまたはAWS CLIを使用してVPCを作成および管理できます。

# 3. AWS Fargateにおけるクラスターとサービスの違いは何ですか？
クラスターは、AWS Fargateにおけるタスクとサービスの論理的なグループです。サービスはクラスターで実行されるワークロードであり、実行中のタスク数を維持する責任があります。サービスは、需要の変化に対応してスケーリングを行うことができます。

# 4. AWS Copilotを使用してアプリケーションをデプロイするにはどうすればよいですか？
AWS Copilotを使用してアプリケーションをデプロイするには、まずAWS Copilot CLIをインストールする必要があります。インストール後、CLIを使用してアプリケーションを作成および管理し、新しい環境の作成、コードのデプロイ、サービスの更新などを行うことができます。

# 5. AWS Fargateにおけるサービスオートスケーリングとは何ですか？
サービスオートスケーリングは、AWS Fargateの機能の1つで、需要に応じてサービスで実行されるタスクの実行数を自動的に調整します。CPU使用率やリクエスト数などのさまざまなメトリックに基づいて、スケーリングをアップまたはダウンするように設定できます。サービスオートスケーリングは、アプリケーションが常に利用可能で、ユーザーのリクエストに応答するようにするために役立ちます。
【Android】%sみたいな可変リソースの使い方

いつもいつも忘れるのでメモ


例：「氏名：xx様」
xx様の部分を可変にしたい


```string.xml
<string name="name">氏名：%s様</string>
```


```MainFragment.kt
getString(R.string.name, "佐藤")
```

こんな感じで第一引数に該当のstringリソースを指定し、第二引数に入れたい文字列を入れると「氏名：佐藤様」と表示される


ちなみにxml側から設定する場合はこんな感じ
```main.xml
<layout>
    <data>
        <variable
            name="memberName"
            type="String"/>
    <data>

    <TextView
        android:id="@+id/text_name"
        android:width="wrap_content"
        android:height="wrap_content"
        android:text="@{String.format(@string/name, viewModel.memberName)"
　/>
```

`android:text="@{String.format(@string/name, viewModel.memberName)"`のような形で、　コードから使用する形と同じく第一引数に該当のストリングリソース、第二引数に入れたい文字列を指定します。

今回みたいにデータバインディングを使う想定ならば、外からAPIでもらってきたデータなどを入れることができます。

AndroidStudioを起動せずに記憶に頼って書いたのでおかしいところがあったらすみません。
[AWS Q&A 365][Fargate]Daily Five Common Questions #28

# 1. What is AWS Fargate? 
AWS Fargate is a serverless compute engine for containers that works with both Amazon Elastic Container Service (ECS) and Amazon Elastic Kubernetes Service (EKS). It allows developers to run containers without worrying about the underlying infrastructure. 

# 2. How do I create a virtual private cloud for AWS Fargate? 
To create a virtual private cloud for AWS Fargate, you need to sign up for an AWS account, create an administrative user, and then create a VPC. You can use the AWS Management Console or the AWS CLI to create and manage your VPC. 

# 3. What is the difference between a cluster and a service in AWS Fargate? 
A cluster is a logical grouping of tasks and services in AWS Fargate. A service is a workload that runs on a cluster and is responsible for maintaining a desired number of running tasks. Services can be scaled up or down to meet changing demand. 

# 4. How do I deploy my application using AWS Copilot? 
To deploy your application using AWS Copilot, you need to first install the AWS Copilot CLI. Once installed, you can use the CLI to create and manage your application, including creating a new environment, deploying your code, and updating your service. 

# 5. What is service auto scaling in AWS Fargate? 
Service auto scaling is a feature in AWS Fargate that automatically adjusts the number of running tasks in a service based on demand. It can be configured to scale up or down based on a variety of metrics, such as CPU usage or request count. Service auto scaling can help ensure that your application is always available and responsive to user requests.
Linuxでスワップ領域を作成する方法

Linuxシステムで物理メモリが足りなくなったとき、スワップ領域が役立ちます。スワップ領域は、ディスク上の一部を仮想メモリとして使用することで、システムのメモリ容量を拡張します。この記事では、スワップ領域を作成する方法を説明します。

## 前提: スワップ領域の確認
まず、現在のスワップ領域の状況を確認しましょう。以下のコマンドを実行して、スワップ領域の情報を表示します。
```
$ free -h
```
または
```
$ swapon --show
```
これにより、現在のスワップ領域のサイズや場所が表示されます。すでに十分なスワップ領域がある場合は、これ以上の操作は不要です。

## ステップ1: スワップファイルの作成
まず、ddコマンドを使用して、スワップファイルを作成します。以下のコマンドを実行してください。
```
$ sudo dd if=/dev/zero of=/swapfile bs=1M count=1024
```
このコマンドは、/dev/zeroからゼロバイトのデータを読み取り、/swapfileに書き込むことで、1GB（1024MB）のスワップファイルを作成します。
仮にスワップを2GB追加したい場合は、1024を2048(1024 * 2 = 2048MB)に変更すれば良いです。
## ステップ2: スワップファイルのアクセス権限の変更
次に、スワップファイルのアクセス権限を変更します。スワップファイルは、セキュリティ上の理由から他のユーザーにアクセスされないようにする必要があります。以下のコマンドを実行して、アクセス権限を変更します。
```
$ sudo chmod 600 /swapfile
```
## ステップ3: スワップファイルをスワップ領域として設定
次に、mkswapコマンドを使用して、スワップファイルをスワップ領域として設定します。以下のコマンドを実行してください。
```
$ sudo mkswap /swapfile
```
## ステップ4: スワップファイルの有効化
作成したスワップファイルをシステムに有効化させるには、swaponコマンドを使用します。以下のコマンドを実行して、システムにスワップファイルを使用するように指示します。
```
$ sudo swapon /swapfile
```
## ステップ5: スワップファイルの永続化
システム起動時にスワップファイルが自動的に有効化されるように、/etc/fstabファイルにエントリを追加します。以下のコマンドを実行して、エントリを追加します。
```
$ echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
```
<font color="Red">スワップファイルの永続化は重要なので絶対行ってください。</font>スワップファイルが永続化できていないと、サーバを再起動した際などにメモリ不足に気づかずアプリのクラッシュやデータの損失などが発生する可能性があります。

## 最終確認
最後に、新しく作成されたスワップ領域が正しく設定されているか確認しましょう。再度以下のコマンドを実行して、スワップ領域の情報を表示します。
```
$ free -h
```
または
```
$ swapon --show
```
これで、のスワップ領域が作成され、システムがそれを使用するように設定されました。今回の操作により、システムのメモリ容量が拡張され、より多くのアプリケーションやプロセスを同時に実行できるようになります。
ABC 297 備忘録

##  概要
　今回はABC297（2023年4月9日21:00 ~ 22:40）の参加記録について自分の実装と感想を記していこうと思う。

## A問題
https://atcoder.jp/contests/abc297/tasks/abc297_a

### ポイント
- 直前のクリック時間を記録しておく
- 1回目のクリックだけは直前のクリックがないので、別の処理を行う
- 条件を満たした時点でプログラムを終了させる
### 自分の実装

```Python:ABC_297_A.py
N, D = map(int,input().split())

T = list(map(int,input().split()))

ans = -1

last_click = 0

i = 1

for present_click in T:
    if i == 1:
        last_click = present_click
    elif present_click - last_click <= D:
        print(present_click)
        exit()
    last_click = present_click
    i += 1

print(-1)
```
## B問題
https://atcoder.jp/contests/abc297/tasks/abc297_b

### ポイント
- リストで入力文字列を格納
- 格納した文字列をインデックスで各々条件分岐で判断

### 自分の実装
```Python:ABC_297_B.py
S = list(input())

B_index = []

K_index = []

R_index = []

for i in range(8):
    if S[i] == 'B':
        B_index.append(i+1)
    elif S[i] == 'K':
        K_index.append(i+1)
    elif S[i] == 'R':
        R_index.append(i+1)
        
if B_index[0] % 2 == B_index[1] %2 or K_index[0] < R_index[0] or K_index[0] > R_index[1]:
    print('No')
    exit()
else:
    print('Yes')
```

## C問題
https://atcoder.jp/contests/abc297/tasks/abc297_c

### ポイント
- 列ごとに`T`の文字が連続している箇所があるかどうかを確認
- 連続箇所があった直後の場合の`T`を巻き込まないようにするために`bool`で直前の文字列の変換の有無を判断

### 自分の実装
```Python:ABC_297_C.py
H, W = map(int,input().split())

S = list(input() for i in range(H))

new_S = []

changed = False

for line in S:
    last_letter = ''
    new_S_line = []
    for i in range(W):
        if changed == False and last_letter == 'T' and line[i] == 'T':
            new_S_line[-1] = 'P'
            new_S_line.append('C')
            changed = True
        else:
            new_S_line.append(line[i])
            changed = False
            last_letter = line[i]
    new_S.append(''.join(new_S_line))

for new_line in new_S:
    print(new_line)

```

## D問題
https://atcoder.jp/contests/abc297/tasks/abc297_d

### ポイント
- 問題文通りに従って逐一割り算をすると計算量がオーバーするので、割る回数を割り算の商と余りを考えることで短縮

### 自分の実装
```Python:ABC_297_D.py
import math

A, B = map(int,input().split())

ans = 0

if A < B:
    A, B = B, A
while B>0:
    ans += A//B
    A%=B
    A, B = B, A

print(ans-1)
```

## 自分の感想
　今回はC問題までしか解けなかった。D問題は記事に書いた通りの簡潔な方法が時間内に思いつかなかった。互いの数字の最大公約数で割ってやればフィボナッチ数となるはずだと考えてごちゃごちゃやってみたがうまくいかなかった。
ChatGPTを使ってアプリを開発してみる3 - 機能実装編

# はじめに
ChatGPTについて学んでおいたほうがいいよねってことで、ChatGPTを使ってアプリを開発していこうという企画の三つ目の記事です。
実装をどこまでChatGPTに任せられるか？というのをテーマに、ChatGPTを使って実装していこうと思います。

# アプリ作成手順一覧
目指すのは、ChatGPTなどを使ったアプリの高速開発をすることなので、やり方を確立させるべく現状考えている手順を書いていきます。
今回の記事は実装部分を書いていきます。
* アプリの方向性決定
* 要件定義
* 設計
* 実装 ⇦今回の記事
* 単体テスト
* 結合テスト
* システムテスト
* リリース

# アプリ実装に必要なもの
前回の記事にも書きましたが、アプリの実装に必要なもの一覧です。
今回は「各機能の実装」から書いていきます。

```
開発環境のセットアップ

Flutterのインストールと設定
開発用エディタ（例：Visual Studio Code）のインストールと設定
エミュレータや実機でのデバッグ環境の構築
アプリの基本構造の作成

アプリの全体構造を定義するためのコードを作成
各画面の遷移を実装
デザインテーマや共通スタイルの設定
ローカルデータベースの設定

SQLiteを利用したデータベースの構築
ユーザープロファイル、プログレスデータ
データに関するテーブルとスキーマを作成

各機能の実装　⇦ ここから実装していく
画面の作成

テストとデバッグ
各機能のユニットテストを作成
エミュレータや実機でのデバッグとテストを実施
```

# 実装

## 各機能の実装
全ての機能について、記事を書くのは長くなりそうなので、機能のうちの一つである迷路をする機能をChatGPTを使って実装できるか？という内容で試していきます。

```プロンプト.txt
迷路画面のUIのコード例を出してくれますか？
```

```ChatGPT.txt
...
サンプルコード省略
...
この例では、迷路のサイズが10x10であることを仮定し、GridView.builderを使って
各セルを描画しています。セルは四角形で、背景色と境界線が設定されています。
これはシンプルな例であり、実際の迷路ゲームでは、セルの状態（通路、壁、
スタート、ゴール）に応じてセルの描画を変更する必要があります。
また、迷路の操作やユーザーの進捗管理など、機能を追加する必要があります。
```

出てきたのが下記です。

![Simulator Screen Shot - iPhone 14 - 2023-04-08 at 20.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/4359709e-d3dc-4fc0-c934-4988a9010ea4.png)

こちらのコードではChatGPTの言うように以下の点が書かれてないです。
* セルの状態（通路、壁、スタート、ゴール）に応じてセルの描画を変更する必要がある
* 迷路の操作やユーザーの進捗管理など、機能を追加する必要があります

なので、上の二つもお願いしました。

```プロンプト.txt
ではセルの状態も加えてください
```

![Simulator Screen Shot - iPhone 14 - 2023-04-08 at 21.06.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/342f13ba-3acf-0d2a-93a4-3254318f7d2b.png)

迷路っぽくなってきました。
（今更ですが、迷路作るならUnityの方がよかったっぽい）

続いて、迷路の操作も実装してもらいました。

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/5c453649-1f56-933b-f25d-e9f8d766e184.gif)

青色が現在表示なのですがカーソルの場所と合ってないので修正してもらおうと思い、色々試したのですが、納得のいく作りになりませんでしたー。
修正のお願いを重ねると、全く違うものになったりしてなかなかできません。

一旦、今までの要件を整理して、下記のようにお願いしてみました。

```プロンプト.txt
直感的に操作できるように、ボタンではなく、タップで動かせるようにしたいです。
以下の動作に従ってください。
・現在位置のセルをタップし、指を動かすとその方向に現在位置が移動する
・現在位置のセル以外をタップし、指を動かしても現在位置は移動しない
・各セルには通路、壁、スタート、ゴールの種類があり、種類によって色を変える
```

これをしても、うまく修正できませんでした。
なので、一旦シンプルに現在の問題である現在位置の取得にフォーカスしてみました。

```プロンプト.txt
onPanUpdateのタイミングで現在のセルの位置を取得するメソッドを追加できますか？
```

![maze.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/f54d338b-7adc-dbcd-b768-927209425c83.gif)

良い感じになりましたが、壁を通り抜けてしまうので、自分で調整しました。

![sg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2475427/269e2d8c-b4cb-4abb-59f5-94bdb7eac815.gif)

とりあえず迷路っぽくなりましたが、面白くしていくにはブラッシュアップしていく必要がありますね。
一旦この記事はここまでにしようと思います。

# おわりに
実際の機能を実装してもらうには結構大変ですね。
バグも多かったり、修正を依頼すると断片的なコードを出してきたり、全部のコードを出してもらうこともできますが時間がかかります。。。
画像とテキストを含む横並びのカードの高さを揃える方法（display: flex;使用）

# 横並びカードの文字数によって高さがばらつく
Webサイトやアプリケーションのデザインにおいて、画像とテキストを含むカードはよく使用されます。しかし、テキストの長さが異なる場合、カードの高さが揃わず、見栄えが悪くなることがあります。

この記事では、CSSのflexboxを使用して、画像とテキストを含む横並びのカードの高さを揃える方法を紹介します。
![スクリーンショット 2023-04-13 212748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437234/f29b03da-c56e-bec2-7320-9966eca86d79.png)

## HTMLの構造
まずは、以下のようなHTMLの構造を持つカードを考えます。

```HTML
<div class="caed-wrapper">
    <div class="card">
      <img src="image.jpg" alt="画像">
      <div class="card-content">
        <h2>タイトル</h2>
        <p class="card-text">テキスト</p>
        <p>カテゴリ</p>
      </div>
    </div>
</div>
```
上記の例では、画像とテキストを含むカードを表すdiv要素に.cardクラスを付け、テキストを含む要素を表すdiv要素に.card-contentクラスを付けています。

## CSSの設定
次に、カードの高さを揃えるために、以下のようなCSSの設定を行います。

```css
.card-wrapper {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  width: 150px;
}

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

.card-text {
  flex-grow: 1; 
}
```
上記の例では、.card-wrapperにdisplay: flex;を設定して、カードを包む親要素をフレックスコンテナに設定します。

.cardにdisplay: flex;を設定して、画像とテキストを含む要素をフレックスアイテムに設定します。
カードにflexを設定することでデフォルトのalign-items: stretch;が作用するので、これで高さを合わせることができます。

.card-contentにflex: 1 1 auto;を設定して、テキスト部分をフレックスアイテムとして設定します。
flex-direction: column;を設定して、テキストを縦並びに配置します。

.card-content下端の「カテゴリ」の表示位置を揃えたいため、.card-textにfrex-grow: 1;を設定して、テキストの余白を埋めて高さを揃えます。

## 完成したHTMLとCSS
最終的に、以下のようなHTMLとCSSになります。


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYPJvZB" data-user="weboscar1164" 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/weboscar1164/pen/eYPJvZB">
  Untitled</a> by junichi sugihara (<a href="https://codepen.io/weboscar1164">@weboscar1164</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
以上のように、CSSのflexboxを使用することで、画像とテキストを含む横並びのカードの高さを揃えることができます。
ChatGPT(OpenAI社製)を用いた原稿生成システム「AIフルオートライター」のご案内

プロダクションオリエンタ合同会社と申します。

自然言語処理技術 ChatGPT(OpenAI社製)を連結させて、自動的に簡単に早く記事・文章（最大２０章、２万文字程度）を生成することができるシステム「AIフルオートライター」の優先代理店契約をこの度、結びました。日本では、数社のみです。

 

【「AIフルオートライター」の画期的な内容・特徴】

１， 自然な文章

２， 短時間で大量の執筆（スタンダードプラン：１２章、１万文字程度）

３， 情報の精度が高い、今後もさらに高速で進化し続ける

４， 指示が簡単

５， 安価（サブスクで、月々の料金が安価）

 

【すぐにでも必要とされる職種】

AIフルオートライターは、様々な職種で活用されることがあります。

以下は、AIフルオートライターをすぐにでも必要とすると思われる10の職種です。


1. ニュース記事のライター

2. 商品説明文の作成者

3. マーケティング担当者

4. ウェブコンテンツライター

5. IT系の技術文章ライター

6. 経済学、ビジネス、金融分野の研究者

7. 保険業界のライター

8. 教育関連雑誌編集者

9. 物流業界の専門家

10. 政府機関の文書作成者

　　　　⇑

この職種以外にも、

AI技術を用いたビジネスを検討中の会社の方、

医者、弁護士、工事現場関係者、政治家の事務所関係者、その他様々な職種でご活用ください。


【説明資料】

https://ex-pa.jp/it/vr6/Vij


【実際の使用映像】

https://youtu.be/Jy8mHhQjcLg


お問い合わせは、プロダクションオリエンタ合同会社宛ご連絡をお願いいたします。
メアド　hhhdddsss110402@gmail.com
社内の会話についていくための用語の調べ方

この記事は「新人プログラマ応援 - みんなで新人を育てよう！」イベントの参加記事です。

https://qiita.com/official-events/4967800652a001e13ebb

# はじめに

OJTでチームの一員になり、いざ会議や話し合いに参加！...するも、**知らない言葉だらけでなんの話か分からない**...
新人のときは、話に出てきた単語をひたすらググるので精一杯でした。

本記事では、会議についていくために個人的に心掛けていたことをまとめてみました。

#  社内用語？一般的な技術用語？

分からない単語があったら、まずは上記のどちらであるかを確認します。
**優先すべきは社内用語**です。一般的な用語はプライベートの時間でも調べられますが、**社内用語を知るには業務中に先輩や上司に聞くしかありません**。

社内用語のうまい調べ方は会社/組織によってまちまちだと思うので、この記事では一般的な技術用語を調べる場合に焦点を当てます。

:::note info
以下いくつか例が出てきますが、知らない用語があっても雰囲気をつかんでいただければ大丈夫です！
:::

# つづりと読み方を紐づける

会議の話し合いでは単語を耳で聞きますが、議事録を読む場合は文字を目にします。
**単語のつづりと読み方を両方確認しましょう**！

せっかく事前に議事録を読んだのに、「**会議で話していることと関係があると気づけなかった**」となってしまうのはもったいないです。

```:先週の議事録
# 新規サービス技術選定
- Webサーバー候補
    - Apache
    - Nginx
...
```

```:会議
 先輩「チームにとって過去の経験が活かせる 『エンジンエックス』 が良いと思ったのですがいかがでしょうか？」
```

同様に、略称も確認しておきたいです（例： `k8s` = `Kubernetes（クバネティス）` [^num]）。

## 一般名詞をもじった名前のソフト/ツール

このパターンは**技術用語と気づけないので特に要注意です**！初めのうちは、横文字が出てきたら「もしかして技術用語？」と疑ってかかるくらいでちょうどよいかもしれません。

```
「あっ、Kubernetesのマニフェスト管理には『カスタマイズ』が必要です！」
```

（※マニフェストをプロジェクト専用に修正（customize）するのではなく、[Kustomize](https://kustomize.io/) というツールで管理しているという意味だった）

# 類義語、対義語も確認する

新しい単語を聞いたときは、同じ意味の単語もおさえておきましょう。人によって言い方が異なるので、「**言葉は違うけど実は同じ話だった**」という場合があります（例： `NAPT (ナプト)` と `IPマスカレード`）[^napt]。

また、勉強会で新しい技術を学んだときは、その対義語も確認しましょう。というのも、新しい技術の対義語は**現在広く使われている技術**である場合が多いからです （`スマホ` が発表された当時、みんなの手元にあったのは `ガラケー` でした！）。
業務の中では、対義語の方に多く出会うかもしれません [^new]。

(例)
|勉強会で出てきた単語|対義語|
|-|-|
|マイクロサービス|モノリス|
|イベントソーシング|ステートソーシング|

# おわりに

以上、会議に出てくる用語の調べ方の紹介でした。話の内容がつかめたら、どんどん意見を出していきましょう！
さらに、単語を知っていれば検索/質問するときもスムーズに進められるでしょう。

「他にもこんな方法があるよ」等ありましたらコメントいただけるとありがたいです！

# 関連記事

以前書いた `新人プログラマ応援` 記事

https://qiita.com/Syuparn/items/c0d3776dcccfd0f7083f

[^num]: ヌメロニム(numeronym)という省略方法です。 (`Kubernetes = k + 8文字 + s = k8s`)
[^napt]: 「IPマスカレード」は元々NAPTのLinux実装の名前だったようです（記事を書いてるときに初めて知りました） https://e-words.jp/w/NAPT.html
[^new]: さらに言うと、「新しい技術をつかっていない=直さないとダメ」というわけでもありません。どんなものにも長所と短所があるので...