OmniAICreator/Qiita-1.07M huggingface dataset:
【超初心者編】無料でNFTを売り出してみよう(番外編)トークンを買ってみる

これは[no plan inc.の Advent Calendar 2022](https://qiita.com/advent-calendar/2022/noplan_inc)の22日目の記事(4)です。

初心者さん向けに、無料でNFTを売り出しができるように連載している記事になります。
今回は番外編でトークンを買ってみるを書いてみたいと思います

# 無料でNFTを売り出してみよう
- [無料でNFTを売り出してみよう①MetaMaskウォレットをインストールする](https://qiita.com/okamu_/items/def8f67c44779863cf74)
- [無料でNFTを売り出してみよう②MetaMaskウォレットを設定する](https://qiita.com/okamu_/items/4a4bc2ac875cb7239439)
- [無料でNFTを売り出してみよう③OpenSeaでNFTを発行してみる](https://qiita.com/okamu_/items/a3663e6bef58045fd3d4)
- [無料でNFTを売り出してみよう(番外編)トークンを買ってみる](https://qiita.com/okamu_/items/43dce8fd6ea29c7ccf83) <- いまここ

# 何か買ってみる
いろいろな銘柄がありますが、今回日本語の記事ですので、JPYCという支払手段から何かの銘柄を購入してみのるはいかがでしょうか

## JPYCとは
> プリペイド型日本円ステーブルコイン「JPYC」を日本円で購入可能

と書いてあります。
([引用: JPYC公式サイト](https://jpyc.jp/))

> 現在、Polygon・Avalanche-C・Astar・Ethereum・Gnosis・ShidenネットワークのJPYCが購入可能です。
> 必須ではないですが、PolygonやAstarネットワークでの購入をオススメします。
> 有名なネットワークであるイーサリアムネットワークでもJPYCの購入は可能ですが、こちらは手数料がかなり高いのです。
> 例えば、イーサリアムネットワークでJPYCを受け取って、誰かにJPYCを送ったりする際、手数料として数千円かかることもあります。
> 逆にPolygonなどのネットワークであれば、1円程度です。そのため、PolygonやAstarネットワークでJPYCの受け取りをオススメします。※NFT売買プラットフォームであるOpenseaでは、イーサリアムネットワークとPolygonネットワークで取引されています。自身の用途に合ったネットワークを指定ください。


([引用: 【もう迷わない！】JPYCの購入手順を画像付けて、しっかり解説！！](https://blog.jpyc.jp/how-to-buy-jpyc-more))

こちらの引用先のJPYCblogサイトが参考になるかもしれません。
そこには、MetaMaskのアドレスを指定するやりかたが画像で載っています。

 
# \\\トークンを買えました//
- わーい
- ここまで来ればあなたは立派なクリプト民です！いろいろやってみましょう！

# no plan株式会社について
- no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援などを行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | ブロックチェーン実績](https://noplan-inc.com/blockchain)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
- [お問合せはこちら](https://noplan-inc.com/contact)
CSSについて

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はCSSについて説明します！

## CSSとは
Cascading Style Sheetsの略で、HTMLで表現された構造に色や大きさなどを指定して見た目を整えるための言語です。
CSSの基本構造は三つの要素から成り立ちます。

```css
p {
  color: red;
}
```

上記を例に説明します。
最初のpの部分は**セレクタ**と呼び、どの場所に対してスタイルを反映させるかを表します。
例では、p要素に対して、スタイルの反映を行います。

次にcolorの部分を**プロパティ**と呼び、どんな変更を加えるのかを表します。
例では、文字色を変えるということになります。

最後にredの部分を**値**とよび、プロパティで変更する値を指定します。
redと指定されているので、赤色になります。

### CSSの読み込み

1. linkタグで読み込む方法
基本的に、構造とデザインを分けて管理したいので、別ファイルで読み込むこの手法が採用されるケースが多いです。
`<link rel="stylesheet" href="hoge.css"` のように<head>タグの中で、ファイルを指定することで読み込ませます。

2. styleタグを使って読み込む方法
特定のページに絞って、スタイルを読み込ませたい時にこの手法が使われることが多いです。
styleタグを作って、その中に直接cssを記載することで読み込ませます。
```css
<style>
  p {
    color: blue;
    font-size: 10px;
  }
</style>
```
3. sytle属性を使用して読み込む方法
直接タグにstyleを指定します。
コードが読みづらくなり、また外部ファイルで共通設定したスタイルの設定よりも優先度が高くなるため、事故につながりやすいです。
`<p style="color: blue; font-size: 10px;">ハローワールド</p>`

### スタイルの優先順位
CSSは比較的自由に記載できるので、変更内容が被ってしまうケースがあります。

共通ファイルで下記のようにpで囲まれた文字を赤色にすると指定していたとしても、直接`<p style="color: blue;">hoge</p>`となっていれば、青色で表示されます。
```css
p {
  color: red;
}
```

この優先順位によって、事故が起こるケースもあるので、なぜか反映されないなどのケースに遭遇した時は
スタイルに優先順位があることを思い出しましょう。
 
# まとめ
以上、CSSについての説明でした！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

## 参考文献
[udemyメディア](https://udemy.benesse.co.jp/design/web-design/what-is-css.html)
Docker Desktopコンテナ自動起動の無効化

コンテナの名前を「wordpress-db-1」とします。

```bash
# コンテナの情報を表示して、再起動設定の前後３行の情報を抽出
% docker inspect wordpress-db-1 | grep -3 RestartPolicy
                    }
                ]
            },
            "RestartPolicy": {
                "Name": "always",    # 設定はここ
                "MaximumRetryCount": 0
            },
```

"Name":"always"は常に再起動という意味で、以下のコマンドで変更
```bash
# 再起動設定を変更
% docker update --restart=no wordpress-db-1
wordpress-db-1    # 正常に変更できた場合コンテナの名前が表示
```

変更されたかを設定情報で確認
```bash
% docker inspect wordpress-db-1 | grep -3 RestartPolicy
                    }
                ]
            },
            "RestartPolicy": {
                "Name": "no",
                "MaximumRetryCount": 0
            },

```

"Name"が"no"に変更されていることを確認
プログラミングの方法論から考えるユニットテスト

# はじめに

昨今、テストピラミッドなどの側面からユニットテストの重要性が説かれていますが、クラス間が密に結合している等で適切なユニットテストを書くのが難しいという状況に陥ることは多いのではないでしょうか。そのような状況は、**ユニットテストの解像度が低いために生まれる**と自分は考えます。

本記事では、**防御的プログラミングと契約プログラミング**という二種類のプログラミングの方法論を元にユニットテストを再考し、ユニットテストの解像度を高めることを目標とします。また、**ユニットテストのより良い書き方を模索している人**に本記事を読んでいただきたいです。


# 防御的プログラミングと契約プログラミングとは

防御的プログラミングと契約プログラミングとは次のようなプログラミングの方法論のことを指します。この二つの方法論については、[こちらの記事](https://yoshitaro-yoyo.hatenablog.com/entry/2022/08/07/On_Defensive_and_Contract_Programming)にわかりやすくまとめられているので、ぜひ参考にしてください。

- 防御的プログラミング
    - **与えられるデータを信用せずに**防御的にプログラミングする方法
- 契約プログラミング
    - **与えられるデータや返却するデータを厳密に定義する**契約のもとでプログラミングする方法

つまり、"a", "b", "c"という文字列を受け取って文字列を返却するようなメソッドをあるクラスが持つとき、**与えられるデータ**に着目すると、次のような実装の違いが生まれます[^1]<sup>,</sup>[^5]。2つのコードの差分はstringと"a"|"b"|"c"の部分で、後者の方が**厳密に**与えられるデータを定義しています。

```typescript:防御的プログラミング
class Sample {
    say (param: string) {
        if (!["a", "b", "c"].includes(param)) {
            return null;
        }
        return "d";
    }
}
```

```typescript:契約プログラミング
class Sample {
    say (param: "a"|"b"|"c") {
        return "d";
    }
}
```

# 防御的プログラミングと契約プログラミングの違い

防御的プログラミングと契約プログラミングの大きな違いとしては、契約プログラミングでは厳密な定義が要求されるということです。つまり、**アプリケーション側で制御できない部分**には契約プログラミングを適用することができず、この場合は**防御的プログラミングでなければなりません**。ただ、**防御的プログラミング**は契約プログラミングと比べると**冗長なコードになりがち**であるため、できるだけ契約プログラミングを採用したいところです[^2]。

この違いを踏まえると、次のような観点で実装するのが良いのではと自分は考えます。

- 防御的プログラミング
    - **アプリケーション側で制御できない限定的な部分**で利用
    - 例：リクエストの受け取りや外部APIとの接続部分など
- 契約プログラミング
    - **アプリケーション側で制御できる部分**で利用
    - 例：ビジネスロジックの処理や画面の生成など

したがって、適当な階層構造のアーキテクチャを想定した時、次のように実装することができます[^1]。

![スクリーンショット 2022-12-25 12.44.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331393/3d5848b2-ca34-ece1-f68d-c3f15e36782a.png)

# 防御的プログラミングと契約プログラミングのユニットテスト

ユニットテストの実装という観点では、テストの目的が異なります。つまり、防御的なプログラミングは正しく防御できているか、契約プログラミングでは正しく契約ができているか、という部分が目的になります。この目的をわかりやすくすると、次のようになります。

- 防御的プログラミング
    - **入力を適切に制御できているかを確かめるテスト**[^3]
    - **セキュリティ的な観点**で重要
- 契約プログラミング
    - **振る舞いが契約に従うかを確かめるテスト**
    - **実装者の観点**で重要

したがって、適当な階層構造のアーキテクチャを想定した時、次のようにテストを実装する必要があります[^1]。

![スクリーンショット 2022-12-25 12.52.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/331393/41395766-b71d-058b-be5a-80402ba2c3d0.png)

# 最後に

本記事では、防御的プログラミングと契約プログラミングによりユニットテストを再考しました。ユニットテストを様々な観点から考察するためのきっかけとなれば幸いです。

また、本来はテストコードについても紹介するべきでしたが、筆者の時間的な都合により割愛しました。時間のある際にこの記事の考えをもとにしたテストコードを別の記事にて書く予定です。

また、リファクタリングにおいて重要なユニットテストを新たな観点から再考した記事であるため、下記アドベントカレンダーに投稿させていただきました。

https://qiita.com/advent-calendar/2022/kaonavi


[^1]: あくまでもイメージです。
[^2]: DDDを採用している場合はドメインモデルを構築できるところも大きい利点でしょう。
[^3]: 適切に制御できているかを確かめる必要があるため、テストケースの数が多くなりがちです。
[^5]: TypeScriptでの例です。ユニオン型が説明するのに適していたため採用しました。
マーメイド#25 結局マーメイドってどうなんですか？

**ひとりマーメイド25日目**
**結局マーメイドってどうなんですか？**


# 概要
　ひとりマーメイドAdvent Calendarを通して嫌というほどマーメイドを書いたので、その中で感じたマーメイドの良いところと良くないところをまとめます。

↓↓前回の記事はこちら！！

https://qiita.com/hirokiwa/items/b4666c4feacb3457b5cc

# マーメイドの良いところ
## 1. テキストでダイアグラムを記述できる
　マーメイドの一番の良さはダイアグラムをテキストで記述できることです。筆者はこれまでドキュメントや資料を作成する際、図を挿入するために多くの時間を費やしてきました。GUIによる作図には多くの時間と労力が必要になります。しかしマーメイドはテキストによる記述を自動でレンダリングしてくれるため、圧倒的に時間を短縮することができます。特に何事もコードとコマンドで操作したがるエンジニアの皆さんにはぴったりのツールと言えるでしょう。
　またマーメイドはコードをレンダリングしてダイアグラムを描画しているため、再現性のある作図ができるというところも便利なポイントです。

## 2. スタイリングが充実している
　マーメイドはテキストレンダリング式の作図ツールでありながら、かなり自由にダイアグラムをスタイリングすることができます。色やフォント,テーマなどスタイリング要素が多くあるため、目的や好みに合わせて自由に変更することができます。さらにマーメイド全体の共通のスタイリングだけでなく、それぞれのダイアグラムに特有のスタイリングも用意されています。
　またスタイルの適用方法が充実しており、ディレクティブ, css, json など好みの方法を用いて自由にスタイルを定義することができます。

## 3. アップデートのスピード感がすごい
　マーメイドはまだまだ発展途上のツールであり、日々開発が進められています。現在も新たなダイアグラムの実装や文法の追加などがおこなわれており、ドキュメントの中でも一部これを理由に文法が不確定であると記載されています。筆者が Advent Calendar の執筆を進めている2週間の間だけでもドキュメントサイトが大幅アップデートされ、さらに公式エディタに新たなダイアグラムが追加されました。今後さらにツールが充実していくことが期待できます。

# マーメイドの良くないところ
## 1. エディタ間のバージョン格差
　マーメイドは公式エディタだけでなく、Notion や VSCode など様々な場所で記述することができます。しかしマーメイドのアップデートの勢いが凄まじいせいか、各エディタで使用されているレンダラーのバージョンが悉く異なっています。そのため、VSCode では レンダリングできたけど Notion では表示されないみたいなことがよく起こります。特に Qiita に埋め込まれているレンダラーはバージョンが古いためうまくダイアグラムが表示されないことが多く、筆者は何度もこのバージョン格差に悩まされました。

## 2. 情報が少ない
　これもまたアップデートが激しいためか、新しいダイアグラムほど情報が少ない傾向にあります。特に日本語の情報が非常に少ないことに加え、「マーメイド」というワードのSEOがあまり良くないことから情報収集には非常に苦労しました。
　また筆者はQiitaを執筆する上でマーメイドのドキュメントをかなり読み込みましたが、公式ドキュメントでさえほとんど情報が書かれていないダイアグラムもあります。さらに一部ドキュメントの内容と挙動が異なる場面もありました。そのため厳密な文法を完全に把握することは難しいように感じます。（日常使いに支障が出るほどではないので大丈夫ですが。）

## まとめ
　マーメイドは私たちが作図に費やす労力を大幅に軽減してくれます。また実際に触ってみるとサクサクダイアグラムが出来上がるので結構楽しかったりします。特に環境構築の必要もないので是非一度試していただければと思います。

https://mermaid.live/edit
【超初心者編】無料でNFTを売り出してみよう②MetaMaskウォレットを設定する

これは[no plan inc.の Advent Calendar 2022](https://qiita.com/advent-calendar/2022/noplan_inc)の22日目の記事(2)です。

初心者さん向けに、無料でNFTを売り出しができるように連載している記事になります。
今回は第二弾、MetaMaskというWeb上のウォレットを登録します。

# 無料でNFTを売り出してみよう
- [無料でNFTを売り出してみよう①MetaMaskウォレットをインストールする](https://qiita.com/okamu_/items/def8f67c44779863cf74)
- [無料でNFTを売り出してみよう②MetaMaskウォレットを設定する](https://qiita.com/okamu_/items/4a4bc2ac875cb7239439) <- いまここ
- [無料でNFTを売り出してみよう③OpenSeaでNFTを発行してみる](https://qiita.com/okamu_/items/a3663e6bef58045fd3d4)
- [無料でNFTを売り出してみよう(番外編)トークンを買ってみる](https://qiita.com/okamu_/items/43dce8fd6ea29c7ccf83)

# MetaMaskを起動して設定しよう
拡張のDLが終わったら早速設定してみましょう
まずは「MetaMask」とかかれたキツネのアイコンの拡張を押す or DL終了後にこのような画面が出てくるかと思います
このまま「Get started」しましょう

![Screenshot 2022-12-25 at 3.37.45 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c1aa7bf3-a232-e80f-6237-78fc7aa2a9c0.png)

MetaMaskの改善に協力するか選択します

![Screenshot 2022-12-25 at 3.38.04 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c2f02fbb-3b95-c2b8-47d3-b01dd450d091.png)
今回は初心者向けに新規作成しますので、「Create a wallet」を選択しましょう


![Screenshot 2022-12-25 at 3.38.14 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/b9981b62-5754-291f-3d23-3db1b9700686.png)
次に、このPCのMetaMaskの拡張を開くためのパスワードを設定しましょう


![Screenshot 2022-12-25 at 3.38.27 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/4f32c273-e3b1-cece-9a86-f1f5cc63b97f.png)

秘密鍵についての案内が流れます

![Screenshot 2022-12-25 at 3.39.42 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/2ece69c6-b8ac-7def-e28b-c11a57d2b867.png)

そして重要なリカバリーフレーズです
このリカバリーフレーズはぜっっったいに誰にも教えないでくださいね(念押し)
1Passwordアプリなどの、ちゃんとセキュアなところに保管しましょう

![Screenshot 2022-12-25 at 3.39.50 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/1152aa4a-8a56-db02-8c24-d21aa419f0f3.png)

次にこのフレーズをちゃんとメモったか確認が入ります
画像のように単語を順番通りに設定すればいいです
(ちなみにこの画像からシークレット抜こうとしても無駄ですw)

![Screenshot 2022-12-25 at 3.40.34 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/4f2e8289-9952-825a-484e-ab5e8118cd07.png)

正しく入力できたらMetaMaskアカウントの設定完了です！！

![Screenshot 2022-12-25 at 3.41.51 PM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c7cd0193-6ecb-b3fc-6d01-d8be7dcd7203.png)

# \\\設定できました//
- 次回は「[無料でNFTを売り出してみよう③OpenSeaでNFTを発行してみる](https://qiita.com/okamu_/items/a3663e6bef58045fd3d4)」です！

# no plan株式会社について
- no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援などを行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | ブロックチェーン実績](https://noplan-inc.com/blockchain)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
- [お問合せはこちら](https://noplan-inc.com/contact)
HTMLについて

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はHTMLについて説明します！

## HTMLとは
HyperText Markup Languageの略で、Webページの構造を記述するマークアップ言語です。
拡張子は.htmlです。
大枠の構造としては下記のような構造でできています。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>ハローワールド</p>
  </body>
</html>
```

一つ一つのこの`<h1>`のように不等号で囲まれたものを**タグ**と呼びます。
h1タグ、pタグのように呼びます。
タグは開始タグと終了タグがあり、終了タグにはバックスラッシュ(/)をつけることで終了を明示します。
(※中には終了タグを必要としないものもあります。)
開始タグから終了タグまでを**要素**と呼ぶので、こちらも覚えておきましょう。

また、一番上のDOCTIPEはタグではなくドキュメントタイプの宣言で、HTMLのバージョンを宣言するためのものです。
上記の例はHTML5での例です。

### 属性と属性値
要素には、属性を持たせることができます。
属性とは、要素の構成内容を追加したり、動作を調整するための追加の値です。

要素によって持たせられる属性が異なるので、[HTMLリファレンス](https://developer.mozilla.org/ja/docs/Web/HTML/Element)を参照して確認するのが良いです。
また、全てのHTML要素に使用できる[グローバル属性](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes)というのもあり、id, classが有名です。

`<p id="tag1">test</p>`

上記の例で言うと、p要素に付与されているid属性の属性値にはtag1が入っていると言う表現をします。


### インライン要素とブロックレベル要素
タグは、種類によって、インライン要素、ブロックレベル要素どちらかの性質を持っています。

インライン要素は文章の一部として扱われます。
ブロックレベル要素は文章を構成する一つの塊として認識されます。

注意すべきポイントは、
ブロックレベル要素の中にはインライン要素を配置できるが、
インライン要素の中にはブロックラベル要素を配置することはできません。
また、見かけ上、ブロック要素を使うと一般的なブラウザでは自動的に前後に改行が入ります。
 
# まとめ
以上、HTMLの基本についてのおさらいでした！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
Mastodonを自分色(not 比喩表現)にする。

# はじめに

先日、[自分専用のMastodonインスタンスをセットアップしました](https://qiita.com/YOCKOW/items/1ea2de3b2eaa6a2bc7a5)。
ただ、[自分の他のサイト](https://YOCKOW.jp/)は緑を基調とした色合いになってまして…せっかくだからMastodonも緑にしようと思ったわけでございます。


# 方法

GitHubで[差分](https://GitHub.com/YOCKOW/mastodon/compare/03b0f3a..7a4fb53)を見てもらえれば一目瞭然かと思いますが、一応解説をば。


## SCSSをいじる

app/javascript/styles というディレクトリに色々と入っていますが、色を規定しているのは次の3つのファイルのみです(筆者調
べ):

- app/javascript/styles/contrast/variables.scss
- app/javascript/styles/mastodon-light/variables.scss
- app/javascript/styles/mastodon/variables.scss

しかも、色は最大9色ぐらいしか定義されていないので(あとは関数で明るさをいじったりしているよう)、そこだけ自分の好きな色に変えれば大丈夫。たとえば緑っぽくしたければ、次のようにすればOK。

```scss
$classic-base-color: #222f22;
$classic-primary-color: #a7d6a7;
$classic-secondary-color: #dae8d9;
$classic-highlight-color: #50d354;
$ui-base-lighter-color: #b4cfb0;
$ui-primary-color: #9fed9b;
$dark-text-color: #455d44;
$action-button-color: #658460;
$light-text-color: #465d44;
```

## 画像をいじる

画像(PNG, SVG, ICO)も変える必要があります。単純に色合いだけを変えたいのであれば、画像編集ソフトで色回転をすればいいでしょう。色を変えた方がいいだろう画像は次のとおりです: 

- いろいろなアイコン: app/javascript/icons ディレクトリにある画像
- いわゆるファビコン: public/favicon.ico
- アバター(未設定のユーザー用): public/avatars/original/missing.png


# おわりに

色を変えるだけなら意外と簡単でしたね。
引き続きHappy Mastodon改造ライフをお楽しみください。
エンジニアの技術情報の発信について

この記事はフリューAdvent Calendar 2022の25日目の記事となります。

# はじめに

フリュー株式会社ピクトリンク事業部でエンジニアマネージャをしている佐々木です。
この1年で取り組んだエンジニアの技術情報の発信（技術発信）について書いていきます。

# きっかけ

エンジニアマネージャが集まる打ち合わせの場にて、
ここ数年エンジニア採用が難航しており、何か打ち手はないかという話になりました。
いろいろと現状分析している中で、

- 中途採用の面接時：「フリューさんにエンジニア組織があったんですね」
- 中途入社の社員から：「（入社してみたら）意外とちゃんと（技術的な取り組みを）やれてるじゃないですか」

というお言葉をいただくことがあり、まずは社外に（何でも良いので）技術発信を推進していかないとならないんだなあ・・という認識となったのがきっかけと言えるかなと。

# 上期の取り組み

推進するのであれば評価に直結させるのが効果があるだろうという発想で、
どの程度の技術発信をしたら評価する（目標を達成したとみなす）のか、目標設定のガイドラインを作成してみることにしました。
（※期初（4月）に目標を設定し、期末（9月）に目標の達成度を評価する）

### 目標設定のガイドライン

いざガイドラインを考えていくと、なかなか難しかったです。

- 例えば半年でQiitaに1件投稿したら充分なのか？2件？3件？
- それって新人とベテランでは、要求されるレベルは異なるのでは？
- 記事のテーマによっては、簡単に書けちゃうのもあるよね？

といったように、どの程度の発信をすると達成とみなすべきかがピンときませんでした。
ただ、その検討に時間を使っても結局はキメの問題になるだろうなと思い「まずはやってみる」のマインドで、下記のようなガイドラインを作成してみました。

#### ガイドライン
![技術発信.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221255/05b23583-8be1-f691-be05-90cd3e640f36.png)

#### 持ち点表
![持ち点表.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221255/26fcfccb-97f1-a9ba-3894-4026a1717e1a.png)

ポイントは以下です。

- 評価軸は職位（ベテラン〜新人）と発信媒体
- 記事投稿だけでなく、技術系のイベント登壇も評価対象
- Qiitaの記事1件投稿を基準(=1pt)として、他項目を重み付け ※重みはほぼ佐々木の主観
- 記事の質（テーマ選択等）はピンキリなので、佐々木が判断
    - 例えば、何らかの技術のチュートリアルをなぞっただけの記事は評価対象外など
    - 投稿数が多いとボトルネックになる懸念があったが「まずはやってみる」
- 例えば、新人であれば6ptで達成となるので、Qiitaの記事6件の投稿で目標達成となる、といった感じ

### 結果

目標設定者が全体の`10%程度`にとどまり、想定していたよりだいぶ少ない結果となりました。（目標設定する／しないは個人の裁量に委ねていました）

この結果を受けて振り返りをしたところ、以下のような課題が見えてきました。

- 採用につながることを目的としておいたため、自身の記事が拙いと良くないのではないか・対外的なアピールにならないのではないか、といった広報戦略的な点を気にしてしまった
- 評価だけだと動機付けにはならなかった、目的の説明や動機付けが弱かった

# 下期（10月〜）の取り組み

上期の反省点を活かして、下期は技術発信の取り組みの目的を見直すこととしました。

- 目的をスキルアップに変更
    - 自身のナレッジをアウトプットする／言語化することで、より学びを得る
    - （将来的には）技術の追究が当然であるという組織風土にしていくため
- エンジニア採用への効果は副次的なものとする（主目的としない）

すると、目標設定した人が`50%以上`になり、期末（3月）の結果が非常に楽しみな状態になりました！

# さいごに

12/25時点で既に記事投稿数は前期と比ぶべくもないほど多くなっており、非常に嬉しく思っています。
メンバーの記事を読んでいて、技術話って面白いなあと改めて感じています。

また、技術発信をすることが当たり前になってきたら、そのうちやってみたいなあと思っていたアドベントカレンダーを実施することができたことも大変嬉しく思っています。参加してくれたライターの方々に感謝を。また、やりたいなあという私のつぶやきを拾って実行に移してくれた某プロフェッショナルの方に最大の感謝を。
フォロー・フォロワー数の非同期化

フォロー機能の非同期化完了後、ユーザー詳細ページにて、他ユーザーをフォロー(or解除)した際、リロードしなければフォロワー数が変化せず、躓きメンターさんに教えていただいたので、自分メモとして記事にいたしました。
（初心者であるため、専門用語の誤用や読みにくい記事となっているかもしれませんが悪しからず）

# 初めに
まず、私が勘違いしていたこととして、フォローボタンを押すとusers/show画面が変わるため、usersディレクトリにcreate.js.erbを作成したり、users/showに記述してある<%#= link_to @user.followers.count, user_followers_path(@user.id) %> にremote:trueを追記しなければいけないと思っておりました。

しかし、ターミナルのログを確認すると、フォローボタンを押すと、サーバにはRelationshipsコントローラのcreateアクションが送られておりました。

そのため、フォロー機能の非同期化の際に作成したrelationships/create.js.erbに後述する内容を追記をしなければならないとメンターにご教授いただきました。

# id名を付けて識別化
ビューファイルにセレクタとなるidを記述します。(id="follow_count")
```java:users/show.html.erb
︙
<td>フォロワー</td>
<td id="follow_count">
  <%= render "users/follow_count", user: @user %>
</td>
︙
```

# 部分テンプレートの作成
フォロワー数を変動させたいため、部分テンプレートを作成します。
フォロー機能を非同期化させる際には、部分テンプレートに下記のようにremote:trueで非同期化しましたが、今回はフォローボタンを押した際にフォロワー数が変動すれば良いだけなので、remote:tureは必要ありません。
むしろ、フォロワー数をクリックすると、フォロワー一覧ページに遷移したいため、サーバにhtml（同期通信）で送る必要があります。
そのため、remote:tureは記述してはいけません。
```java:users/_follow.html.erb
<%= link_to "フォローする", user_relationships_path(user.id), remote: true, method: :post %>
```
```java:users/_follow_count.html.erb
<%= link_to user.followers.count, user_followers_path(user.id) %>
//フォロワー画面に遷移させたいため、サーバにはhtmlで送る必要がある。そのため、remote:true(非同期化)は必要ない。
```

# create.js.erb
上記で定めたid名、部分テンプレートをcreate.jsに記述します。
```java:relationships/create.js.erb
$("#follow").html("<%= j(render 'users/follow', user: @user) %>"); //フォロー機能の非同期化の際、記述
$("#follow_count").html("<%= j(render 'users/follow_count', user: @user) %>"); //追記

//要約
//$("#非同期通信で変動したいタグのid名").html("<%= j(render '非同期通信で変動したい部分テンプレート");
```

# 最後に
非同期通信した際に、変動させたい動的UIがある場合の大まかな流れとしては、下記のようになるかと思います。
①非同期ボタンをクリックした際にどのURL(コントローラアクション)がサーバに送られているか確認
②ビューページの変動させたいタグにid名(もしくはクラス名)を付属させ、部分テンプレートを作成
②非同期化の際、作成したcreate(destroy).js.erbにid名・部分テンプレートを記述
独学する時に気を付けること

この5か月勉強してきて、自分で勉強する時に気を付けようと思ったことをまとめておきます。

### 書籍
プログラミングの学習本は高価だからか？中古本がたくさん出回っているが、購入する際には、以下を確認。
#### ・新品未使用状態に近いか？
#### ・本の発行日はいつか？何版何刷か？
#### ・出版社のサイトに、版ごとの誤字脱字などの訂正箇所が記載されていないか？
#### ・今はもう使えない古い情報ではないか？

例えば、「スッキリわかるJava実践編」インプレス刊は、Java19に対応した内容が2022年12月5日に第3版 第4刷が発売となった。だが、2022年12月25日現在、ジュンク堂のような大型書店でさえも前の刷（Java17対応の本、18対応の本が混在）が販売されていたので、中古ではさらに古いものしか手に入らない可能性が高い。初心者の場合、テキストに書かれている内容が現在も有効な情報か否かの判断ができないので、最新版で勉強しておいたほうが良いのではないか、と思った。

### インターネット上の記事
困った時は検索エンジンで検索し、先輩方の書かれた記事を参考とさせていただいているが、その際には以下を確認。
#### ・いつ書かれた記事か？（10年前なのか、最近なのか）
#### ・自分の開発環境と同じ（か近い環境）を前提として書かれた記事か？

わからなくて検索をしていると、先輩（昔初心者だった）が質問や自問している記事がよくヒットするが、それを読んでもよくわからないことが多かった。私のような初心者の場合、
・少しでも環境が違うと混乱
・知識不足で説明の意味が理解できない
ので、まずは
・たくさんのコードを書いて慣れる
ようにしたい。

また、自問だけで解決済みになっていない記事もあったので、今後自分が「わからないことについて」記事を書くことがあれば、その後、必ず解決を書くようにし、自分の頭の整理と他の方の参考になるようにしたいと思った。
【超初心者編】無料でNFTを売り出してみよう①MetaMaskウォレットをインストールする

これは[no plan inc.の Advent Calendar 2022](https://qiita.com/advent-calendar/2022/noplan_inc)の22日目の記事(1)です。

初心者さん向けに、無料でNFTを売り出しができるように連載している記事になります。
今回は第一弾、MetaMaskというWeb上のウォレットをインストールします。

# 無料でNFTを売り出してみよう
- [無料でNFTを売り出してみよう①MetaMaskウォレットをインストールする](https://qiita.com/okamu_/items/def8f67c44779863cf74) <- いまここ
- [無料でNFTを売り出してみよう②MetaMaskウォレットを設定する](https://qiita.com/okamu_/items/4a4bc2ac875cb7239439)
- [無料でNFTを売り出してみよう③OpenSeaでNFTを発行してみる](https://qiita.com/okamu_/items/a3663e6bef58045fd3d4)
- [無料でNFTを売り出してみよう(番外編)トークンを買ってみる](https://qiita.com/okamu_/items/43dce8fd6ea29c7ccf83)

# ① MetaMaskとは？
NFTを発行する上で避けて通れないWebウォレットを先に作成をしないといけません。
代表的なWebウォレットとしてMetaMaskというものがありますので今回ご紹介します！

![dfb2c673-1243-4822-8aab-2186e08ef0b5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/7ffdc9dd-97f8-650d-de7b-4eae94232e21.jpeg)

> MetaMaskとは、イーサリアム系のトークンを保管するためのWeb上のウォレットです。
> 簡単に言うと「仮想通貨（暗号資産）専用の財布」で、イーサリアム（ETH）や、イーサリアムをベースに発行されたトークンを保管・管理することができます
> MetaMaskはイーサリアムのブロックチェーンと連動したサービスの決済に使用したり、
ブロックチェーンゲームなどと連携させることも可能です。
([引用: MetaMask(メタマスク)とは？使い方とログイン方法をアプリ版・PC版ごとに解説](https://fisco.jp/media/metamask-about/#:~:text=MetaMask%E3%81%AF%E3%80%81%E3%82%A4%E3%83%BC%E3%82%B5%E3%83%AA%E3%82%A2%E3%83%A0%E7%B3%BB%E3%81%AE,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82))

MetaMaskには、Webブラウザ（Google Chromeなど）の拡張機能として利用する「Web版」と、スマホなどにアプリをインストールして利用する「アプリ版」の2つのタイプがあります。

自分にとって使いやすい方を選んで使ってみてくださいね！

※現在、MetaMaskに対応しているブラウザはGoogleChrome、FireFox、Opera、Braveとなっております。

# ② MetaMaskの作成方法
MetaMaskの作成方法（Google Chromeでの拡張機能）をお伝えしていきます。
![f81fdc1a-5507-4f19-aad1-1f6dd949eb0a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/10650a84-191e-541b-d634-2279b5fb6655.jpeg)


MetaMaskの公式サイトにアクセスし「Download」をクリックすると、以下の画面に進むので「Chrome」を選択しましょう。
![47d2392c-a66d-4744-a0c3-a60a93f95703.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/c4f8b0fe-e003-fd95-1eb2-70fbc874fc14.jpeg)

Chromeを開いている方はChromeの拡張機能から直接DLすることも可能です。

![16f57981-5945-4130-a28f-9a98b5289e84.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62822/f2be2045-5952-95b8-1810-64115e1c9639.jpeg)
Chromeのウェブストアが表示されるので、「Chromeに追加」をクリック

 
# \\\インストールできました//
- 次回は「[無料でNFTを売り出してみよう②MetaMaskウォレットを設定する](https://qiita.com/okamu_/items/4a4bc2ac875cb7239439)」です！

# no plan株式会社について
- no plan株式会社は、ブロックチェーン技術、Webサイト開発、ネイティブアプリ開発、チーム育成、などWebサービス全般の開発から運用や教育、支援などを行っています。よくわからない、ふわふわしたノープラン状態でも大丈夫！ご一緒にプランを立てていきましょう！
- [no plan株式会社について](https://noplan-inc.com)
- [no plan株式会社 | ブロックチェーン実績](https://noplan-inc.com/blockchain)
- [no plan株式会社 | ブログ一覧](https://noplan-inc.com/blog)
- [お問合せはこちら](https://noplan-inc.com/contact)
【呆れるほどわかりやすい】JavaScript非同期処理（コールバック関数・Promise・async/await）について0から理解する

# JavaScriptにおける非同期処理についてPDF形式でまとめてみました。

はじめまして！正社員エンジニアとして今月12月からエンジニアとして働いている川北翔と申します。

<br>
<br>

今回は、JavaScriptの非同期処理について、エンジニアを目指している方や駆け出しエンジニアの方に挫折せずに非同期処理についての学習を行うことができるように、研修で自ら作成したPDFの資料を大幅に改良して、
<a href="https://www.icloud.com/iclouddrive/0a2btFFpL0NXYoHVIjOeKrxcg">
    JavaScriptにおける非同期処理について
</a>
としてPDF形式にまとめてみました。無料ですので、よろしければダウンロードしてご活用してみてください！

JavaScriptの非同期処理について、

:::note
<ul>
    <li><strong>どんな記事よりも詳しく・わかりやすく</li>
    <li><strong>できるだけ1スライド1要点</li>
    <li><strong>難しい言葉を使わず、わからない単語が出た場合は説明をいれることで、どんな方でも記事を読める</li>
</ul>
:::

を意識し、さまざまなWebサイトなどを参考に作成しました。

##  この資料について

### インデックス

![top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885241/b1a4d062-d665-7800-b1e7-5312bf6e9b5e.png)

### ファイル情報

**ファイル名**
非同期処理について

**作成日**
2022/12/25

**サイズ**
5.6 MB(画像はすべて圧縮していますが大きくなってしまいました)

**ページ数**
スライド116枚

***
<br>

## ダウンロード方法

<a href="https://www.icloud.com/iclouddrive/0a2btFFpL0NXYoHVIjOeKrxcg">
    <strong>こちら</strong>
</a>
をクリックすると下の画面が出てきます。「コピーをダウンロード」をクリックすることでダウンロードすることができます。

![スクリーンショット 2022-12-25 15.53.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885241/36e72831-c1cd-c149-41ed-941437d55abf.png)

## おねがい

私自身、まだまだ初心者です。なので記述に関して間違い等があった場合はTwitterなどで教えていただけると幸いです！

## Other

よろしければこちらの記事もお読みください！学習方法・学習ロードマップ・学習ツール・・独学方法・転職活動などについて私の体験をもとに作成しています！Vol.2がメインになります。

https://qiita.com/shokawakita0630/items/916fd076053979d91696

https://qiita.com/shokawakita0630/items/6f649bf908bf0cd59e2c

https://qiita.com/shokawakita0630/items/a0239c81f8b4ae4d5038
ダイソーのデジタルウォッチを分解する

これは[一人でダイソーのおもちゃを毎日分解する Advent Calendar 2022](https://qiita.com/advent-calendar/2022/daiso-toy-disassembly)の24日目（4日目）の記事です。

こんにちは、@tama_Udです。今回はダイソーで売っているデジタルウォッチ「ブループラネット D ミニ」を分解したいと思います。

## 分解する商品スペック
店: DAISO
価格： ¥300（税込¥330）
商品url: https://jp.daisonet.com/products/4549131767940
商品写真: （箱から出す前に撮り忘れたのでスキップ）

## 分解していく

### 商品を取り出す

取り出したところ
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/0f70f9d1-ece4-6064-baf2-32ed62d23b2a.jpeg>
ストップウォッチ、日付表示、バックライト（ブルー）機能がついています。

裏側
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/2087d902-a0b9-cc45-9369-4e6a98534b3d.jpeg>
ステンレス製のカバーがついています。

### 本体を開ける
さっそく分解していきましょう。背面のネジをプラスドライバーで4ヶ所外します。
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/e72ba32b-124c-d2df-173a-9f3e8c19d775.jpeg>
基盤、バネ、ボタン電池と絶縁体が見えます。黒い長方形はクッションでしょうか。
ステンレスカバーにも絶縁体らしいクッションが貼られています。

基盤と電池をまるっと取り外します。
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/32bf6c69-6c4a-b2df-58d0-3ecda32cf7a1.jpeg>

写真右上と右下のネジを二箇所外し（写真では右上はすでに外しています）、ボタン電池を取り出します。
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/acf7f64f-57c6-cb92-23da-f300438844dd.jpeg>

ボタン電池が外れたら液晶も取り外します。
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/1e4b0e88-9eed-aa4f-927a-dcc67ec5814f.jpeg>
（ドライバーの扱いが下手くそでネジ穴を潰してしまったのでボタン電池のカバーが外れきっていない状態）
青いのはコンデンサー、銀色の円柱は水晶振動子、黒いクッションは基盤の配線と液晶を繋ぐ導体になっているようです。
おもちゃみたいな時計にさえ水晶振動子が入っているのすごい。

### 観察してみる
液晶側のアップ
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/1d75b57b-94a5-5843-0820-d150863e3f51.jpeg>
これも両面基盤ですね。裏側（電池側）から電力を表側（液晶側）に引いてきているようです。
チップは液晶側にモールドされていて、そこに続く回路がうっすらと見えています。

ボタンが4隅についているのですが、押すと左右についている金属製の薄い板が基盤側面の導体に触れてスイッチするという、なんともシンプルな構造であることがわかります。

基盤とカバーも外してみましょう。
<img width=450 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622484/c31f21e1-dacb-4323-e306-f1fa8e5eb1b1.jpeg>
......先ほどネジ穴を潰してしまったので、ラジオペンチでネジごとぶち切ります。パワー。

電池周りなど観察してみると、どう考えても防水ではないので、普段使いにはちょっと怖いなという感想です。

## 終わりに
残すはあと1記事。
ちょっと大きめのものを分解したいんですが、間に合わなさそうなので気長にお待ちいただけると幸いです。

明日は@tama_Udさんの『[何か書く]()』です。お楽しみに！
テスト83

```vb
Option Explicit
'リストビュー関連

'ユーザーフォームを挿入
'ツールボックスで右クリック....〆(･ω･ )ﾒﾓ
'「コントロールの追加」ウィンドウの中から「Microsogt ListView,version 6」を選択
Private Sub CommandButton1_Click()

Dim i As Long
Dim tmp As String
Dim Select_flg As Boolean

Select_flg = False

With ListView1.ListItems

    For i = 1 To .Count
        'チェックボックスにチェックがついた行を取得
        If ListView1.ListItems(i).Checked = True Then
    
            MsgBox .Item(i).SubItems(1) & .Item(i).SubItems(2)
            Select_flg = True

        End If
        
        '選択されている場合
        If ListView1.ListItems(i).Selected = True Then
            'リストの値を取得
            tmp = tmp & .Item(i).SubItems(1) & .Item(i).SubItems(2) & vbCrLf
            Select_flg = True

        End If
      
    Next

End With

'選択チェック
If Select_flg = False Then

    MsgBox "値が選択されていません。", vbCritical, "未選択"
    Exit Sub
    
End If

MsgBox tmp

End Sub

Private Sub CommandButton2_Click()

'チェックボックスを一括選択(解除)
'ラベルをボタンの下に入れて(ユーザーからは見えない)、その値で判定
Dim i As Integer

Application.ScreenUpdating = False

With ListView1

    For i = 1 To .ListItems.Count
    
        If Me.フラグ.Caption = 0 Then
        
            .ListItems(i).Checked = True
        
        Else
        
            .ListItems(i).Checked = False
        
        End If
       
     Next i
     
End With



If Me.フラグ.Caption = 0 Then
 
     Me.フラグ.Caption = 1
 
 Else
 
     Me.フラグ.Caption = 0
 
 End If

Application.ScreenUpdating = True

End Sub


Private Sub ListView1_BeforeLabelEdit(Cancel As Integer)

End Sub

Private Sub UserForm_Initialize()

Dim Last_Row As Long
Dim sh As Worksheet
Dim i As Long

Set sh = ThisWorkbook.Sheets("リスト")


'最終行取得
Last_Row = sh.Cells(Rows.Count, 1).End(xlUp).Row

With ListView1
    '初期設定
    .View = lvwReport           '一覧表示
    .Gridlines = True           'グリッド線の追加
    .FullRowSelect = True       '選択を行全体に変更
    .AllowColumnReorder = True  '列幅の変更を許可
    .HideSelection = True      '選択の自動解除
    .LabelEdit = lvwManual          'ラベル編集不可
    
    .ColumnHeaders.Clear
    .ColumnHeaders.Add 1, "ckBox", "", 15 ', lvwColumnLeft
    .ColumnHeaders.Add 2, "No", "No", 25 ', lvwColumnLeft
    .ColumnHeaders.Add 3, "ItemCategory", "商品カテゴリコード", 80 ', lvwColumnCenter
    .ColumnHeaders.Add 4, "ItemCode", "商品コード", 80 ', lvwColumnCenter
    .ColumnHeaders.Add 5, "KanriCode", "管理コード", 80 ', lvwColumnCenter
    .ColumnHeaders.Add 6, "Price", "価格", 80 ', 'lvwColumnCenter
    
    'データ挿入
    For i = 2 To Last_Row
    
        With .ListItems.Add

             .SubItems(1) = sh.Cells(i, 1)
             .SubItems(2) = sh.Cells(i, 2)
             .SubItems(3) = sh.Cells(i, 3)
             .SubItems(4) = sh.Cells(i, 4)
             .SubItems(5) = sh.Cells(i, 5)
             
         End With
         
     Next i
     
     .SelectedItem.Selected = False
     
End With

Me.フラグ.Caption = 0

End Sub
Lambda がマウントする EFS エンドポイントの Posix ユーザの嵌り


Lambda 関数を作成して、EFS にファイルを書き込もうとしたら、エラーになってしまう。

ちなみに、読み込みは問題なくできる。

一例では、ユーザIDを、1000にしろとか、1001 にしろとかなっているが、エラーになってしまう。何が悪いのか、設定が悪いのか、と思って確認しても、特に悪いところがない。

原因は、root がオーナーのファイルシステムに書き込もうとしていたためであった。

読み込みはできるということは、AWS 特有のポリシとかではないのは明らか。

ユーザーID を　0 にしたところ、問題なく書き込みができた。

（参考）
https://aws.amazon.com/jp/premiumsupport/knowledge-center/efs-mount-with-lambda-function/
【トリビアのDelta Lake】#11 Pysparkで増分データ内の重複を削除する

データハンドリングにおいて、データの品質を高める意味でも「**重複データの削除**」は重要だと思います。

Deltaテーブルを更新する際、元データ側から取得する増分データは、理想的には重複のない、真の増分のみであるべき。
しかし、なんらかの事情で、その増分データ内に重複があった場合、まともにこれを既存Deltaテーブルに追加するとテーブル内に重複が生まれ、品質が落ちてしまいます。

過去にPandasでは実装していたのですが、これをPysparkでやるとどうなるのか。
結論、出来ることには出来たのですが、Pysparkの仕様上少し癖があり、結構ハマったので共有します。
このやり方がベストプラクティスなのかは不明なので、念のため、ご確認の上ご使用くださいませ。

# Pandasでやるには？
「Python データフレーム 重複削除」とググりますと、やはり情報量の多いPandasに関する方法が登場します。

https://note.nkmk.me/python-pandas-duplicated-drop-duplicates/

Pandasでは、重複行を見つける（抽出する）のには「duplicated()」関数、削除するのには「drop_duplicated()」関数を使うみたいです。
では、ここで公式ドキュメントを見てみましょう。 

https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.duplicated.html

これによると、duplicate関数は
```
DataFrame.duplicated(subset=None, keep='first')
```
とあるように、「subset」「keep」という2つの引数があることが分かりました。
subsetはデータ重複を判定する列を指定し、keepはどの重複を残すかを指定します。

https://note.nkmk.me/python-pandas-duplicated-drop-duplicates/

なので、上の条件で言えば、subset関数で重複を判断するカラムを選択（複数可）し、
keep引数をfirstに設定することで、重複のあるデータのうち一番上のデータを残すことが出来ます。

# Keep引数がPysparkには無い
じゃあ、PySparkでは？
PySparkにもPandasと同じく、dropDuplicates関数があります（drop以降をアンスコで繋いでいないという差はある）。

https://spark.apache.org/docs/3.1.2/api/python/reference/api/pyspark.sql.DataFrame.dropDuplicates.html

これを見ると、keep引数がない！
よって、重複があるデータのうちどれを残すべきか？PySparkでは、この関数だけでは指定できないことになります。

なので、対応策として考えるのは以下。

```python
from pyspark.sql.function import col,desc
incremental_sdf = spark.read.format("delta").load("incremental_delta")
drop_dupulicated_incremental_sdf = (
    incremental_sdf
    .orderBy(col(<更新日付カラム>).desc())
    .coalesce(1)
    .dropDuplicates([<重複判断カラム>])
)
```
やっていることは、Pandasではkeep引数でやってくれていたことを、PySparkではorderBy,coalease関数を組み合わせて代用するというもの。
データの新旧を、レコードが持つ更新日付カラムを降順に並び替えることで判断し、coalesce関数で一番上（つまり、最新データ）だけ残す。
あとはdropDuplicate関数で、最新データ以外を削除する。

あとは、ここで定義した重複のなくなった増分データ=dataframeで、Merge関数を用いて既存Deltaテーブルを更新し、要件を満たすことが出来ると思います。

マスターデータや、日によってレコードのステータスが変化するデータなどの分析において、もしかしたら使える技かもしれません。
Alibaba Cloud で料金未払いになった話

# あらすじ

Alibaba Cloud (国際サイト)で料金未払いになりました。
その後の話。

# 料金未払いになる条件

中国サイトではプリペイド方式だから発生しない料金未払い。
（プリペイド残高が枯渇したら従量課金のサービスは自動停止されます）
これは国際サイトでのみ発生します。
理由は簡単。クレジットカードの決済に失敗する場合があるからですね。
今回は登録していたクレジットカードが解約済みであった為、発生しました。
当然ですがクレジットカードの利用停止や限度額超過等、通常の決済失敗でも発生します。

# 発生するとどうなるのか

新規にサービスを利用できなくなります。
従量課金後払い(Pay as you go)の利用中サービスが停止されます。
しかし、料金前払いのECSインスタンス等のサービスは停止されません。

一番最後が重要ですね。すばらしい。
AWSでは料金未払いが発生するとAWSアカウント自体が概ね２ヶ月後に停止され、全てのサービスが停止されます。

# どうしてこうなった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/b1448a43-2818-d9b3-1986-45f6f94dd026.png)

KMSの消し忘れです。。
KMSは従量課金なので有効なクーポンが無くなると課金が発生しますが、登録クレジットカードは既に解約済みの為、未払いになったと。


# どうすればいいの？

新しいクレジットカードを登録して未払い料金を支払います。
`支払い管理` 画面の左側のペインから `支払方法` を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/228dc96b-d284-00fc-0e1f-90857e39d1cf.png)
既に登録されているクレジットカードが表示されます。
クレジットカードの有効期限が残っている状態で解約したからAliyunコンソール上ではステータスが有効になっていますが実際には使用できません。

`支払い方法を追加` をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/bae0fc95-3ad9-a415-81c0-450f52236b97.png)
新しいクレジットカード情報を入力して、 `送信` をクリックします。
支払方法が追加されました。

左側のペインから `請求書` を選択し、 `未払い` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/ebfa348d-8890-43ed-7ce6-009551c3292d.png)
未払い料金が表示されます。
これを選択して、新しく登録したクレジットカードで支払うをクリックすれば完了です。


# 未払い料金の支払い後どうなるの？

支払い後はサービスが即時利用可能となります。
それはいいとして、通知が色々届きました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/045e4e00-5303-f0ff-6597-7dd8c4876916.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96018/70a757e2-1ad1-3d74-8d13-a89512fc325b.png)
停止されていたサービスも再開されましたという内容です。
そう、課金されるということです。
料金未払い中もリソースの削除はできます。
もしも消し忘れたままの場合は再び課金されますから、リソース掃除後に支払いをするようにしましょう。

LedgerDBの表示がおかしい。
早々に消えていったサービスなのかな？？？
まぁこのあたりは中国ということで。


# まとめ

- 料金未払いで利用停止になっても料金前払い済みのサービスは継続利用可能
- 支払いを完了すると停止されていたサービスが再開するから支払い前に不要なリソースを削除しよう

Alibaba Cloud ではなかなか遭遇しない事象なのでブログにしてみました。
どなたかの参考に…　この記事はならない方が良いですね:-)
とある中国人のここまでの人生

アドベントカレンダー。

昨日クリスマスイブの忘年会にて、
アドベントカレンダーのカレンダー３で参加が可能であることを知り、
滑り込みエントリー！やったー！

自己紹介
---
中国の河北省生まれ。
初めて日本に来たのは、1歳半の時でした。
そこから小学校3年生に至るまで両親と日本で暮らしたり
中国の母親の実家に預けられたりという生活を送っていました。

記憶にあるのは小３の時に中国に住む私に母親が会いに来てくれて、
嬉しさとまた訪れるであろうお別れが悲しくて、母の顔を見た瞬間に号泣。
見かねた母が『一緒に日本に戻る？』と言ってくれて、
私の日本メインの人生が始まりました。

あそこで日本に来ることになっていなかったら、
全く違った人生になっていたんだろうなと思うと面白いなと感じます。


日本での高校受験
---
滑り止めなしで進学校の本命１本のみ受験し無事落ちる。
途方に暮れてやさぐれていた時に、
ひょんなきっかけで知り合った上海の男の子に影響を受けて、
親にお願いして上海の帰国子女向けの高校に進学します。
そこでは海外育ちの中国人、マカオ台湾香港籍の方、
日本からの留学生からなる国際部に所属をしていました。

理由は覚えていないのですが、
アメリカの大学に行きたいと考えていて、
当時は日本の大学も中国の大学もまともに受験対策をしていませんでした。


高校卒業後
---
結局親の期待を背負って医学部受験をします。
勉強を頑張った経験、なし！
スポーツを頑張った経験、なし！

生まれた環境が良くて小さい頃からたまたま二カ国語話せるが故に
自分は頭が良いんだと信じてやまなかったので、
ちょろと頑張れば医学部とか余裕やろと思っていましたが全然無理でした。


23歳、大学入学から卒業まで
---
医学部を目指して予備校に行ったり、
宅浪という名のニートをしたりで大学入学時は23歳。学部は理学部。
失恋を紛らわすために居酒屋さんのキャッチのアルバイトを始めたり、
いろんな人と関わっていろんな選択肢を持ちたい考えから
一人旅にはまっていました。

初めての一人旅で沖縄に行き、仲良くなった人と四国１周の旅をしようと、
前日から大分に滞在します。
大分である大学生と仲良くなり、後日その人が自転車でアメリア横断をしていることをFBで知り、
かっこよ！私もアメリカ行こ！と考えます。

25歳でアメリカにぷち留学し、
大きな出会いと別れがあって、日本に戻ってからは抜け殻状態。

このままではダメだと考え自分のルーツを知ろうと中国一周旅行に出たりもします。
大学の時の目標は、大手に就職をして沢山稼いでキラキラすることでした。


大学卒業後
---
大学を卒業し、とある会社に拾ってもらいました。

---
目の前の仕事を一生懸命頑張れば理想の人生が手に入ると思って
がむしゃらに仕事をしてきて現在6年目。
ふと立ち止まってみるとこのままで良いのかと疑問が生じるようになってきました。

それは目の前の仕事で満足のできる成果が出せていないからかもしれないし、
考えることから逃げてきた結果かもしれない。

いろんなきっかけと出会いがあり、
G'sの卒業生の友人（大学時代のキャッチのアルバイト仲間）の影響で
G’sに入って3ヶ月目ですが、
楽しくも、日々周りとの差に焦りながらも１歩ずつ進もうとしております。

これまでの人生、
私は人から影響を受けることが多くありました。
今回のG'sへの入学もそうですし、
優秀で愉快な同期たちやG'sの先生方やチューターの方たちから
これからいろんな影響を受けていくのだろうなと考えるとワクワクします。

以上です！

みなさんメリークリスマス！そして良いお年を。
nlohmann-json c++ ros


下記環境で`nlohmann-json3`ライブラリを使った際のメモ

```
ubuntu20.04
ros noetic
```

- install

```
sudo apt install nlohmann-json3-dev
```


- 1: 次のようなjsonオブジェクトを作成したい場合
```
{
  "pi": 3.141,
  "happy": true,
  "name": "Niels",
  "nothing": null,
  "answer": {
    "everything": 42
  },
  "list": [1, 0, 2],
  "object": {
    "currency": "USD",
    "value": 42.99
  }
}
```

`~.cpp`内追加内容

```xxx.cpp
// header & namespace
#include <nlohmann/json.hpp> 
using json = nlohmann::json;

// create json object
int main(int argc, char** argv)
{

  json j;
  j["pi"] = 3.141;
  j["happy"] = true;
  j["name"] = "Niels";
  j["nothing"] = nullptr;
  j["answer"]["everything"] = 42;  // 存在しないキーを指定するとobjectが構築される
  j["list"] = { 1, 0, 2 };         // [1,0,2]
  j["object"] = { {"currency", "USD"}, {"value", 42.99} };  // {"currentcy": "USD", "value": 42.99}

  std::cout << j << std::endl;  // coutに渡せば出力できる。
}
```

- 2: json文字列をcallback関数で受けてパースしたい

```xxx.cpp
#include <nlohmann/json.hpp> 
using json = nlohmann::json;

void callback(const std_msgs::StringConstPtr& msg)
{
    std::cout << "params callback: " << msg->data << std::endl;

    auto s = msg->data;
    json j = json::parse(s);

    std::cout << j << std::endl;
}
```

- ref

https://qiita.com/yohm/items/0f389ba5c5de4e2df9cf
Unityのシーン切り替え後にunity_SpecCube0によるskyboxの取得できない問題の解決メモ

# はじめに

Unityではシェーダー内で使える`unity_SpecCube0`という変数が用意されており、以下のような値が入ってきます。

> Reflection Probeの影響範囲内である場合にはReflection Probeによるキューブマップが入ってくる
それ以外の場合にはLighting WindowのEnvironment Reflectionで設定したキューブマップが入ってくる

https://light11.hatenadiary.com/entry/2018/07/08/212014

これを使うことでSkyboxのキューブマップを取得することが出来るのですが、初めに再生したシーン以外でこの値が取得されない問題が発生しました。

根本的な解決は出来なかったのですが、その際の状況をメモしておこうと思います。私自身シェーダーに詳しくないので、何か基本的な見落としなどがあるかもしれません。何かお気づきの方は是非ご指摘いただけると幸いです。

# 再現の流れ

1. `unity_SpecCube0`を使用したシェーダーを配置したシーンAを用意する
1. シーンAを再生し、正常に描画されることを確認
1. 別のシーンBを用意し、シーンAに遷移する処理（`SceneManager.LoadScene("Hoge")`）を用意する
1. シーンBを再生してシーンAに遷移すると、`unity_SpecCube0`が取得できていない状態となる

# 取得方法

[こちらの記事](https://light11.hatenadiary.com/entry/2018/05/06/230414)を参考に下記のように取得しました。

```.glsl
half3 reflDir = reflect(-worldViewDir, i.worldNormal);
// 用意されたマクロを使って取得
half4 refColor = UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, reflDir);
// もしくは下記
half4 refColor = UNITY_SAMPLE_TEXCUBE_LOD(unity_SpecCube0, reflDir, 0);
```

# 解決策

原因は分からなかったのですが、アクティブなEnvironment Reflectionが正常に設定できていないか、もしくは切り替わっていないのかと思いました。

これに対するダイレクトな解決方法は見つけられなかったため、シェーダーのプロパティから直接キューブマップ（Skybox）を参照する形でこの問題を回避しました。

[こちらの記事](https://3dcg-school.pro/unity-shader-cubemap-reflection/)のままなのですが、プロパティに参照を追加した上で

```
Properties
{
    _Cube("Cube", CUBE) = "" {}
}
```

シェーダー内で使える丈太に宣言をし、

```
UNITY_DECLARE_TEXCUBE(_Cube);
```

下記のように置き換えを行いました。

```
// 置き換え前
half4 refColor = UNITY_SAMPLE_TEXCUBE(unity_SpecCube0, reflDir);
// 置き換え後
half4 refColor = UNITY_SAMPLE_TEXCUBE(_Cube, reflDir);
```

Environmentに設定されたSkyboxを参照する場合と違ってSkyboxの変化には追従できないのですが、少なくとも正しく描画されるようになりました。

# 参考

https://qiita.com/uynet/items/f8b087d47f5cf316eb7e

https://light11.hatenadiary.com/entry/2018/05/06/230414

https://3dcg-school.pro/unity-shader-cubemap-reflection/
Nintendo Switch の microSDカードを選んだ時の技術的メモ

Nintendo Switch の microSDカードを選ぼうとしたときに、規格まわりの理解で詰まって調べたのでそれをメモしておきます。

# Nintendo Switch サポート での情報

- [Nintendo Switch サポート - microSDカードについて](https://www.nintendo.co.jp/support/switch/data_management/microsdcard/index.html)
    - microSDXCメモリーカード（容量：64GB～2TB）

こちらのページによると、microSDXCメモリーカード で 容量：64GB～2TB のものを選ぶように誘導されます。
書込メモリ性能で `UHS-II` を選択したくなるところですが、switch が対応するのは `UHS-I` までとのこと。(認識は出せるが性能が出ない)

```
UHS-I（Ultra High Speed Phase I）対応 - 読み込み速度 60~95MB/秒
UHS-II（Ultra High Speed Phase II）規格には対応しない。使用は可能だが読み込み速度は Phase I 相当になる。
```

一方で、書き込み速度は 95MB/秒 までは対応するので、上限に近い性能が出せるカードを選ぶのが良さそうです。`A2` 対応のものが書き込み速度が出そうなので、それを試みで購入してみます。

# 実際に製品を購入してみる。

`UHS-I` かつ `A2` までの性能ということなので、条件に合致する「Nextorage microSDXC UHS-I U3 V30 A2 G 256GB」という SDXC カードを購入して Nintendo switch に刺してみました。ちゃんと認識して読み書きできます。

SDXCカード自身のフォーマットは PC で実施してみたかったので、「UGREEN SDXCカード専用 カードリーダー Type-C UHS-II SD4.0 312MB/S高速」という製品を合わせて購入しました。

その SDXC カードの製品は、おおよそ以下のようなもののようです。（古いPCで計測したので不利な結果が出ているかもです）

![DiskSppedWithLong.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105739/27e321e0-11af-2820-acbc-9f8e3150a721.png)

シーケンシャルな読み書きについては Nintendo switch の公称最高速度に近しい値が出たので満足です。
switch でのゲームプレイ時のロードやセーブ時間が早くなるかどうかはこれから体験してみます。
制作続きと25日で強くなったまとめ

[【完走目指す】初心者が25日で強くなる Advent Calendar 2022](https://qiita.com/advent-calendar/2022/aruhitoganbaru)
25日目です

# 前回の続き
メダル落としを途中まで作りました。
今日は、メダルを落とす部分と、結果が出る部分を作りました。
# メダルを落とす
今まではボタンを押すと何かしら処理が行われるようにしていましたが、今回はキーボードのボタンを何か押すと動くように作ります。
最終的にAボタンを押すとメダルが出るようにしました。
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Medalsyoki : MonoBehaviour
{
    public GameObject Medalstop;
    public GameObject Medal;
    // Start is called before the first frame update
    void Start()
    {
        Medalstop.SetActive(true);

    }

    // Update is called once per frame
    void Update()

    {
        this.transform.Translate(0, -0.1f, 0);
        if (Input.GetKey(KeyCode .A)) 
        {
            Medalstop.SetActive(false);
        }
        if (this.transform.position.z < -12.5)
        {
            this.transform.position = new Vector3(0.25f, 20.79f, 12.79f);
            Medal.transform.position = new Vector3(0.15f, 22.71f, 12.8f);
        

    }
        
    }
   
}

```
メダルを運ぶ囲いを作って、それを動かしています。
囲いがある一定の位置まで進んだら、右端に戻るようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/d0157c03-d54a-44bc-b8ad-9c87a3162e76.png)
ボタンが押されたら、囲いは消えます。
囲いのスピードを速くしすぎると、すり抜けます。
自分も作っている最中はしょっちゅうすり抜けていたので注意が必要です。
# 当たり判定
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Atari : MonoBehaviour
{ public GameObject WinLose;
    // Start is called before the first frame update
    void Start()
    {
        WinLose.SetActive(false);
    }

    // Update is called once per frame
  
  
        public void OnCollisionEnter(Collision collision)
        {
            if (collision.gameObject.tag == "Medal")
            {
                WinLose.SetActive(true);
            }


        }
    }
```
たったこれだけです。
メダルが当たったら、画像を表示します。
画像は、こちらになります。
当たり
![当たり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/be7d197b-d1cf-71b2-801f-4cc9ec7122aa.png)
はずれ
![はずれ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/e2cc1a93-9db5-bfc8-9bc6-8ef8d36ab2e2.png)
これを表示させています。
その他いろいろ調整しました。
障害物は、たまにメダルが乗って動かなくなることがあるので細くして、位置を少しずらしました。

# 結果
こうなりました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">25記事用<br>メダル落とし <a href="https://t.co/kRY01HVSsX">pic.twitter.com/kRY01HVSsX</a></p>&mdash; ある暇な人 (@Aruhimanahito) <a href="https://twitter.com/Aruhimanahito/status/1606902127103991808?ref_src=twsrc%5Etfw">December 25, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
ちゃんと動いています

# 振り返り
C#については結構使いこなせるようになりました。
githubとかUnityの使いかたもよく理解できました。
いろいろなゲームを作ってみたけど、どれも一筋縄ではいかないものが多かったです。
ちなみに、失敗例は少ししか載せてません。大体乗せた数の5倍ほど失敗してました。
頭で考えてることがうまく実現できないこともあったけど、それでも最後までやり切れたものが多かったので個人的には大成功だと思っています。
ちなみに、記事を書くときは伝わりやすいように絵本のようにイラストや画像を多めに使ったつもりです。

以下はどうしてもできず没になったものです
・アイテムを集めるゲーム
・ライツアウト
・トランプ（ババ抜き）
これらはもっと勉強してから作りたいと思います。
# 最後に
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/476d9285-4829-5234-f27a-0065cd371c3d.png)
完走賞ゲットだぜ


25日目　終わり
Springの@Autowiredの方式

# @Autowiredとは

SpringのDIコンテナから、インスタンスを注入するための指定のこと。  
まずDIコンテナとSpringフレームワークの仕組みを知る必要がある。  

## DIコンテナとは

アプリ起動時にSpringフレームワークが特定のオブジェクトをインスタンス化しており、そのインスタンスを保管してある場所。  
次のアノテーションを付けたクラスがインスタンス化の対象。

- @Component
- @Controller
- @Service
- @Repository
- @RestController
- @ControllAdvice
- ManagedBean
- @Named

これらのアノテーションがついたクラスはコードのなかでnew()でインスタンス化することはなく、DIの仕組みによって呼び出し元クラスへ注入される。  
それが@Autowiredアノテーションを目印にして行われる。  

## 注入する方法

指定の場所により3種類の方法がある。  

|種類|場所|備考|
|:-|:-|:-|
|コンストラクタインジェクション|コンストラクタの前で指定|省略可能(後述)|
|セッターインジェクション|セッターメソッドの前で指定||
|フィールドインジェクション|変数の前で指定|非推奨とされている|

### コンストラクタインジェクション

```java
public class MemoController {
    //この方法のみ、finalと指定している。
    private final MemoService memoService;

    @Autowired
    public MemoController(MemoService memoService){
        this.memoService = memoService;
    }

}
```

### セッターインジェクション

```java
public class MemoController {
    private MemoService memoService;

    @Autowired
    public setMemoService(MemoService memoService){
        this.memoService = memoService;
    }

}
```

### フィールドインジェクション

```java
public class MemoController {
    @Autowired
    private MemoService memoService;

}
```

## どの方法を使用すべきか？

コンストラクタインジェクションが推奨される。この方法のみ、final指定で変更不可にできる。  
フィールドインジェクションの場合、変数の更新が可能なためそれができない。  
セッターインジェクションもメソッドのコール自体はできるので、呼び出し元のコンストラクタで1度のみ実行される方式がもっともよい。  

## 省略が可能

Spring Framework 5.0以降は、コンストラクタインジェクションのみ@Autowiredが省略できる。  

```java
public class MemoController {
    private final MemoService memoService;

    //コンストラクタインジェクションは、省略が可能。
    //@Autowired
    public MemoController(MemoService memoService){
        this.memoService = memoService;
    }

}
```
個人開発と私

# 0. 
　開発を進めてから、人生の一部に個人開発が組み込まれるようになった。業務中でも移動中でも「あの機能はどう実装すればいいか」「こんなデザインはどうか」「紹介文はもっと端的なほうがいいか」などと考えるようになった。なんだこれは。

　はじめてデプロイがうまくいった瞬間は覚えている。ローカルにだけあった情報が、全世界につながったとき。鳥肌がぶぉぉわわっと立って、少し涙が出た。自分の思念を具現化させるイメージ。実存の叙述。そんなかんじだった。なにより私はここでやっていっていいよ、と言われている気がした。

# 1. 
　これからの生活を考える。昨年できなかったのものが、今年はできるようになっていた。来年はもう少しさきのことがやれるはずだ。開発して終わりじゃだめで、今度はユーザー数を伸ばすとか収益を上げるとか、そういう道筋ができる。

　具体的な事柄を書けるようにしたい。固有名詞をもっと出せるようにして、その解決策とかも考えられるようにしよう。
[Win10][記憶域スペース] 記憶域スペースのディスクを交換する

# 概要
- Windows 10(Win10)の記憶域スペースのディスクがセクタ不良を起こしたので、予防のためディスクを交換する

# 環境
- 動作環境は以下の通り

| OS | バージョン|
| ---- | ---- |
| Windows Pro| 21H2|

# 発端
- 記憶域スペースで使用しているハードドライブが警告通知がたくさん鳴るようになった
- セクタ不良を修復すれば解決できると思ったが、記憶域スペースでのセクタ不良回復方法が確立しておらず、4年以上使用していたため交換することにした
![a11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/74fece1d-a5c2-be45-ee1d-e18b499517ec.png)

# 手順
1. [コントロールパネル] > [システムとセキュリティ] > [記憶域] に移動する
→ エラーが発生しているようだ
→ 記憶域スペースの[設定の変更]をクリックする（必要：管理者権限）
![a12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/a7da6b9f-d184-af4a-77ce-b795f0a10fde.png)

1. [物理ドライブ]から削除(取り出ししたい)対象のハードドライブの[削除の準備]をクリックする
![a15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/6e6181f7-2625-2634-f47f-58f22f6ced40.png)

1. 確認メッセージが表示されるので、[削除の準備]をクリックする
![a16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/119f9d83-5dab-d227-d348-db22c8ff6fdb.png)

1. [削除の準備中]が終わるまで待つ
→ 最初に実施するとコントロールパネル・エクスプローラの挙動が重くなる
→ 6TBの場合、削除の準備で7-8時間かかる
→ 実行中にコントロールパネルを閉じた場合は、[0.01%]で止まる。再度、管理者権限を付与して少し待つと進むので注意
![a17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/d7a98691-bc7b-3b32-9f4b-9f9cba278533.png)

1. 削除の準備完了後に [取り出し]をクリックする

1. 完了！

# ドライブの追加
1. 新しいハードドライブをPCに接続する
1. 同様に[ドライブの追加]をクリックし、ウィザードに従い追加する
![a22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/e28e0374-722e-17e9-43cf-8b706aa7fff2.png)

1. 交換完了！正常に動作してる模様

![a20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94366/317acede-0402-9d98-7534-3109e5ffa187.png)

# まとめ
- Windows のソフトウェアRAIDを使う時は記憶域スペースを使用しましょう！
Vue3 <script setup> 構文でpops/emitをTypescriptで書いてみた。

現在、Nuxt3, Vue3, TypeScriptsで開発をしております。

私は、今までのNuxtやVueを使っていたわけではなく、Nuxt3を初めて使い、初めてvueを書き始めたので、setup構文でpropsやemitを書く際、どのように受け渡しをするのか、初めは書き方がわからなかっため、初めてnuxtやvueを使ってるよという人のために書いていきます。

## そもそも,「props」とは？
一言で言うと、親コンポーネントの値を伝えるもの。

## そもそも,「emit」とは？
・親コンポーネントの関数を使えるようにするもの。
・子コンポーネントの値を親に伝えるもの。

ここまでの説明で、わからないことがある方は、一旦必要になるまで温めるか、props, emitに関して、もう少し理解を深めた方がいいかもしれません。
ここでは、書き方をメインしているので、理解が浅いままでは、今後応用する際、混乱してしまう可能性があります。
理解してコードを書くことはとても大切ですので、ある程度理解して、使う前段階で見ていただくといいかもしれません。

## 書き方を貼っていきます。
親コンポーネント
```
<script setup lang="ts">

const alertDo = ():  void => {
 alert('クリックされたよ。');
}

</script>

<template>
  <div class="btn-content">
  // ここで値を渡す。
    <Btn 
      // propsへ
      :icon="'dog'"
      :size="'mini'"
      // emitsへ
      @alertDooo="alertDo()"
    />
  </div>
</template>
```

子コンポーネント
```
<script setup lang="ts">
type Icon = 'dog' | 'panda' | 'rabbit' ;
type Size = 'mini' | 'normal' | 'big' ;

/**
 * Props
 */
const props = withDefaults(defineProps<{
  //　型定義
  size: Size
  icon: Icon
}>(), {
  // 初期値設定
  size: 'normal',
  icon: 'none',
});

/**
 * Emits
 */
interface Emits {
  // 関数名, 引数の型, 返り値の型
  (e: 'alertDooo', v: null): void;
}

const emits = defineEmits<Emits>();
// 以下のようにも書けます。
const emits = defineEmits<{
  (e: 'alertDooo', v: null): void;
}>()

// 使用時は、
// emits('alertDooo', 渡したい引数またここでは、null);
</script>
```


補足
```
const props = 
    withDefaults(
    defineProps<{}>(),
    {}
    );

withDefaultsヘルパーはデフォルト値の型チェックを行う。
型のみの場合は、以下のように書く。
defineProps<{
      size: Size
      icon: Icon
}>(),
```

emitsに引数を渡すことで、子コンポーネントの値を親に伝えることができます。
簡易的ですが、今回はここで終わりです。

propsとemitを使った親子3代バケツリレー、かつ孫でinputを使っていてその値を運ぶパターンを今度あげます。