OmniAICreator/Qiita-1.07M huggingface dataset:
Vimエディタのゆるくて実用的な使い方 ～置換編～

# はじめに

[Vim エディタ][Vim]は**汎用テキストエディタ**です。使い方を覚えると便利です。

今回は**置換編**です。

尚、面倒なので [Vim] の基本的な使い方は書きません。😆

# 具体的な利用シーン

- Java のフィールド定義から getter を作成する
- DDLからテーブル名だけを抜き出す
- ID一覧のプレフィックスをまとめて変更する

# 正規表現による置換をやってみる

Java で以下の用にフィールドだけを実装したとします。

```java
public class Person {
  private String id;
  private String name;
  private int age;
  private Map<String, String> meta;
}
```

各フィールドの getter を作成したいのですが、単純な getter であれば [Eclipse] 等の IDE で簡単に生成できます。
なので、今回は return の前に null チェックをする仕様にしてみます。

上記フィールド定義をコピーして Vim に張り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/20099a5b-9967-b806-dfb7-10c33d426673.png)

以下のコマンドを入力して、
```:vimコマンド
:%s/.*private \(.*\) \([^ ]\+\);$/public \1 get\u\2() {\r  assert(\2 != null);\r  return \2;\r}\r/g
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/af9b9117-0a12-4ea8-3b53-2448d5011377.png)
実行すると、

getter を生成できましたー！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/94016d5b-8573-32a3-4173-0c1cdc6ea960.png)

コマンドを概説するとこんな感じです。

- `.*private \(.*\) \([^ ]\+\);$` を `public \1 get\u\2() {\r  return \2;\r}\r` に置換してください、という命令です。
- `\1` は`\(` と `\)` で囲った1番目にマッチした文字列、`\2` は2番目にマッチした文字列、になります。
- `\u` は後続文字列の先頭を大文字にする、という指示になります。
  - 参考: https://qiita.com/kiri__n/items/b3cd0535378938ce2d59

# 矩形選択範囲置換をやってみる

以下のようにプレフィックスが `EID-` のID一覧があるとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/f7013e76-1c10-82c8-b653-79cb2e685191.png)

このプレフィックスを `EMP-` に変えたいです。

以下の様に矩形選択して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/9e82c159-c0f6-b93e-4de0-c4513f2d1cbb.png)

キーボードの `c` を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/1a3acbcc-31ef-5631-6e66-846b7ffe07ff.png)

`EMP` を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/936446ae-d6aa-d5d1-425e-dda9709d75b5.png)

キーボードの `Esc` を押すと、
置換できましたー！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/d8bce704-59ac-5e27-c744-2e6032e6c279.png)

# まとめ

[Vim] エディタはサクサク動いてくれるのでちょっとしたテキストの加工に適していると思います。私はログの加工でよく使ってます。

ツールの選択肢の1つとして参考になればと思います。😀


[Vim]:https://www.vim.org/
enebularでnode-red その8

# 概要
enebularでnode-redやってみる。
練習問題やってみた。

# 練習問題
websocketで、chatを作れ。

# フロー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/de2e4126-8e72-260c-ee54-8f0ed744d98a.png)


```
[{"id":"a3cc8311.624988","type":"websocket in","z":"51e5f3dfc3ba1f13","name":"","server":"862118c716ba3fa6","client":"","x":160,"y":120,"wires":[["54493aa8.591264"]]},{"id":"54493aa8.591264","type":"function","z":"51e5f3dfc3ba1f13","name":"","func":"delete msg._session;\nreturn msg;\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":120,"wires":[["bd61bb46.61a2d8","8b1b936ba9496384"]]},{"id":"bd61bb46.61a2d8","type":"websocket out","z":"51e5f3dfc3ba1f13","name":"","server":"862118c716ba3fa6","client":"","x":540,"y":120,"wires":[]},{"id":"940713f0.af888","type":"http in","z":"51e5f3dfc3ba1f13","name":"","url":"/chat","method":"get","upload":false,"swaggerDoc":"","x":178,"y":188,"wires":[["930606f8.e42ed8"]]},{"id":"930606f8.e42ed8","type":"template","z":"51e5f3dfc3ba1f13","name":"chat html","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!doctype html>\n<html>\n\t<head>\n\t</head>\n\t<body>\n\t<h1>chat</h1>\n\t<form name=\"publish\">\n\t\t<input type=\"text\" name=\"message\" maxlength=\"50\"/>\n\t\t<input type=\"submit\" value=\"Send\"/>\n\t</form>\n\t<div id=\"messages\"></div>\n\t<script>\nlet url = 'wss://{{req.headers.host}}/pub';\nlet socket = new WebSocket(url);\ndocument.forms.publish.onsubmit = function() {\n\tlet outgoingMessage = this.message.value;\n\tsocket.send(outgoingMessage);\n\tthis.message.value = '';\n\treturn false;\n};\nsocket.onmessage = function(event) {\n\tlet incomingMessage = event.data;\n\tshowMessage(incomingMessage);\n};\nsocket.onclose = event => alert(`Closed ${event.code}`);\nsocket.onopen = event => alert(`open`);\nsocket.onerror = event => alert(`err`);\nfunction showMessage(message) {\n\tlet messageElem = document.createElement('div');\n\tmessageElem.textContent = message;\n\tdocument.getElementById('messages').appendChild(messageElem);\n}\nshowMessage(\"incomingMessage\");\n</script>\n\t</body>\n</html>\n\n","x":344,"y":188,"wires":[["6074165e.fc8278"]]},{"id":"6074165e.fc8278","type":"http response","z":"51e5f3dfc3ba1f13","name":"","x":487,"y":188,"wires":[]},{"id":"8b1b936ba9496384","type":"debug","z":"51e5f3dfc3ba1f13","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":570,"y":40,"wires":[]},{"id":"862118c716ba3fa6","type":"websocket-listener","path":"/pub","wholemsg":"false"}]
```

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/3b7e0df9-03ae-f478-b78c-c660d6698482.png)

以上。
GA4 まとめメモ

# GA4  (Googleアナリティクス4プロパティ)

アプリとウェブでまたがっているユーザを分析できる
データストリーム(WEB+スマホ)
管理画面で、User・IDGoogle・デバイスIDの3つの識別情報を組み合わせた設定で可能

## ユーザー行動の予測
指標→予測可能でいくつかの可能性を予測できる
レポート作成する事により、ユーザー行動の予想ができる

## プライバシーを重視したデータ収集ができる
アカウントのデータ設定を制御する機能
データを広告のパーソナライズに使用するかどうかを選択する機能
Analyticsからデータを削除する機能

## データ計測の設定がしやすい
管理→プロパティ→データストリーム→ウェブタグ→ウェブ ストリームの詳細→拡張計測機能→⚙
各データを収集するか設定できる

## 各イベント単位で分析できる
レポート→エンゲージメント→イベント
イベント名ごとにパフォーマンスを確認できる
イベントとイベントの比較もできる

### 初期イベント
ページビュー数（page_view）
アプリ表示（user_engagement）アプリがフォアグラウンド表示されている、ウェブページが 1 秒以上フォーカスされているとき。
初回訪問（first_visit）
訪問回数（session_start）
スクロール（scroll）※ページの90％までスクロールした場合に計測される
クリック数（click）※外部へのリンクをクリックした場合に計測される
サイト内検索（view_search_result）
ファイルのダウンロード数（file_download）
ユーザーが購入を完了したとき（purchase）

### 自動的に収集されるイベント
https://support.google.com/analytics/answer/9234069

### 推進イベント
https://support.google.com/analytics/answer/9267735

## BigQueryとの連携が無料でできる
Googleが提供する分析用に収集した膨大なデータを蓄積しておく倉庫のようなシステム
生のログデータを取得できる

## GTM(Googleタグマネージャ)を設定
コードをサイトに埋め込む
[Flutter] Riverpodの注意点（ref.read編）

　
　
こんにちわ　いせきです。

今回はRiverpodを書いていく中で一つ注意点を発見したので共有したいと思います。

それは、
#### ref.read は build メソッドの中で使わないこと

です。では具体的にみてみましょう。

# サンプルコード

見つけやすいように改行しています。

```dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_blog_app/notifier/home_screen_notifier.dart';
import 'package:riverpod_blog_app/state/home_screen_state.dart';

class HomeScreen extends ConsumerWidget {
  const HomeScreen({required this.title, Key? key}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.watch(homeScreenStateProvider).counter;


    //この記載は避けるべき
    final increment = ref.read(homeScreenNotifierProvider).increment;


    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        //onPressed: increment,

        //この記載はOK
        onPressed: ref.read(homeScreenNotifierProvider).increment;


        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

```


# 解説

公式を読んでみると、こう書いています。

```
悪い使用例であり、追跡困難なバグの要因になり得ます。

このような ref.read の使い方は、次のような考え方がもとになっていることが多いと思われます。 「プロバ
イダが公開する値が変わることはない。だから ref.read の使用は安全である」。 しかし、そのプロバイダは
今は値が変わることがないかもしれませんが、明日も同じことが言えるとは保証できません。 その点でこの推測
には問題があると言えます。

ソフトウェアに変更はつきものです。そして将来、絶対に変わらないと考えられていた値が、変わる必要に迫ら
れることは十分あり得ることです。 そしてもしこの値の取得に ref.read が使われていたら、その時にはコー
ドを振り返り ref.read が使われているところをすべて ref.watch に変更する必要があります。これはエラ
ーを招くおそれがありますし、変更し忘れる箇所がいくつか出てくる可能性もあります。
```

ここを解説すると、

<b><b>`ref.read`はbuildメソッド内では使わないようにする。</b></b>
<b>理由</b>
<b>・`ref.read`はProviderが公開する値が変わることはないが、ずっと変わらないと言える保証がないから。</b>
<b>・絶対変わらないとされていた値が変わることは十分にあるから。</b>



# 最後に
僕は知らずに複数使う場合はbuildメソッド内に書いていましたが、レビューをしてもらう中でダメだということを教えてもらいました。便利にしていると思っていたことが逆効果になってしまう可能性があることはとても驚きですね。しっかりとドキュメントを読まないとなと改めて思いました。。。



# 参考文献

https://riverpod.dev/ja/docs/concepts/reading/#%E9%87%8D%E8%A6%81-refread-%E3%81%AF-build-%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AE%E4%B8%AD%E3%81%A7%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84
たのしいコンピュータ

##はじめに
おはようございます。ネタ記事職人です。

みなさんいつも使っているコンピュータ、

これが0と1で動いている！

これは何となく皆さん知ってますよね？？

ただ今回は皆さんにちゃーんと理解してもらうために簡単な覚え方をレクチャーします！

##ステップ1

坊や良い子だ寝んねしな
（日本昔ばなし）

こんな文章があるとします。
そしてこれを（0,0,0）とします

（0,0,0）は文章で言うと

#####坊や/良い子だ/寝んねしな

の3つのパーツになります。

〜〜〜〜〜〜

例えば（1,0,0）のように最初の「坊や」の部分が1に変更された場合

嬢ちゃん/良い子だ/寝んねしな

のようになるわけです。

コンピュータの世界では1と0は反対、二律背反の関係なので、対義語とおんなじような感覚ですね。

同じように

（0,1,1）＝
坊や/悪い子や/まだ寝んな

（1,0,1）＝
嬢ちゃん/良い子や/まだ寝んな

みたいな感じですね。

他の文章でも試してみましょう。

##ステップ2

負けないで/もう少し/最後まで/走り抜けて
（ZARDの負けないで）

これを（0,0,0,0）としましょう

それでは問題。（1,1,1,1）が来たらどうなるでしょうか？？


答えは、

負けろ　結構たくさん　最初から　走るなよ

でした！！！

###ステップ3（応用）

これは文章以外にも応用できます

例えば

「新大阪」

これを（0,0,0）として

（0,1,1）に変えてみると

「新小平」

になります

（新小平は武蔵野線に実在する駅です）

##おわりに

このようになんとなくコンピュータの仕組みがわかったと思います！ぜひみなさんもこの覚え方をしてみてくださいね！
Instance DoubleでMock化してMock化したインスタンスに値を設定

#概要

外部サービスをMock化して、Mock化したインスタンスに値を設定したいんだけど、瞬時に思いつかず色々調べた結果エラーメッセージに答えがあった話

エラーメッセージはちゃんと読まないとね(反省)

## 内容

```
target = External.new
target.name = "dummy"
```

これをMockしたかったので

```
let(:external_mock) { instance_double(External) }
allow(External).to receive(:new).and_return(external_mock)
allow(external_mock).to receive(:name)
```

こう書いたら

```
#<InstanceDouble(External) (anonymous)> received unexpected message :name= with ("xxxx")
```

怒られた。

```name```で値を設定するときはどうすれば良いんだろうと思っていたら調べていたら、結局エラーメッセージが答えを与えてくれた

```:name=```と書いてあるじゃないか。


```
let(:external_mock) { instance_double(External) }
allow(External).to receive(:new).and_return(external_mock)
allow(trello_card_mock).to receive(:name=)
```

のように```receive(:name)```を```receive(:name=)```と書いたら通りました。
Power BI Desktopでサンプルレポート作ってみた

こんにちは。
現在PL-900の試験対策中ですが、模擬試験を見てると意外とケーススタディ的な問題が多く、実際触ってみないとなかなか理解が進まないな・・・ということで、今回はネットでPower BIのハンズオンができそうなサイトを検索し、お試しでPower BI Desktopを使ってサンプルレポート的なものを作ってみました。

私が学習した動画はこちらになります。

https://www.youtube.com/watch?v=e3alvLCbBtY

データベース未使用で、サンプルのEXCELデータを取り込んでレポートを作るスタイルなので、プログラミングできない方でも全く問題ありません。

# 準備するもの
ブラウザで「Power BI」と検索し、マイクロソフトのサイトからPower BI Desktopをダウンロードし、インストールしておくこと。※すでにインストール済みの方はこの作業は不要。
アプリがインストールされたらこんな初期画面が開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/940c0de3-2161-0610-0a0f-eb08fc0b802b.png)

# レポート作成
細かい説明は上記のYoutube動画でご理解いただけると思いますので割愛させていただきます。
ここでは、どんな流れでレポートを作成するのか、ざっくり説明をさせていただきます。

①データを取得する
赤い丸印で囲ってあるところから元ネタとなるデータを取得できるので、今回の場合でいうと「Excelブック」を選択します。CSVファイルの場合は、「テキスト/CSV」になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/b5750a14-2e91-25b5-1c02-3b1b1a2692d8.png)

②データ取込確認
データ取得後、左ツリーの赤い丸印の「データ」をクリックすると、先ほど取り込んだデータがすでにテーブル形式で保存されています。
このままの状態でももちろんレポート作成は可能なのですが、さらにテーブルに計算式などの結果をあらかじめ作っておきたい場合は、リボンメニューの「新しいメジャー」や「新しい列」をクリックすると列を追加することが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/a71a162a-3b81-2e63-ddfd-75e8f7eae942.png)


③モデルの確認
データを取得後に、左ツリーの赤い丸印で囲ってある「モデル」をクリックすると、自動的にリレーションシップが張られた状態になっています。
さらにテーブル間のリレーションを追加・変更も可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/09a25c9a-cb05-e1ff-502e-1276ffbcb0b0.png)

④レポートの作成
①～③の作業が終わったらいよいよレポート作成です。
まずは視覚化フィールドでどのグラフで表示するか選択し、さらに右側のフィールドで表示させたい項目を選ぶと下記のようなグラフ表示になります。
グラフは好きなだけ追加できますし、表示領域の大きさやビジュアル的なところまで、好きなようにカスタマイズできます。
ビジュアル的なところで言うとセンスが分かれるかもしれません(笑)
また、レポートに表示する項目が足りなければ、②の作業に戻ってテーブルに項目を追加すればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/96ad89f6-5ec0-fdbd-1f48-80986bd95800.png)

# まとめ

最後まで動画どおりにレポートを作成すると、こんな感じで見栄えのよいレポートが出来上がり！
動画再生時間は１時間程度で、ゆっくり見返しながら学習を進めても１日あれば完成すると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2885406/8a7d36b4-dcc9-7f5f-54a2-08ef48cec4f3.png)

ここまでお読みいただきありがとうございました。
BIツールは使ったことないけど、EXCELは少しぐらいなら使ったことあるよ！っていう方であれば難なく使いこなせると思います。みんなでスキルアップしていきましょう！！
2022年の振り返り〜インターン編〜

# 目次
[1.はじめに](#1-はじめに)
[2.自己紹介](#2-自己紹介)
[3.参加した・しているインターン一覧](#3-参加した・しているインターン一覧)
[4.それぞれのインターンについて](#4-それぞれのインターンについて)



# 1.はじめに
2022年はインターンに参加する機会が何回かあったので参加して感じたことや成長できた点について書きます！

# 2. 自己紹介
軽く自己紹介をします。
- 大学3年生
- 経済学部
- 趣味は散歩、ゲーム（FPS）、アニメ、映画
 
# 3. 参加した・しているインターン一覧
参加した・しているインターンの期間と内容を紹介していきます！

#### LightBlue Technology 
期間：2021年10月 ~ 
内容：フロントエンド 就業型

#### サイバーエージェント 「Tech JOB Lite」
期間：2022年3月~ 2週間　
内容：フロントエンドエンジニア　就業型
#### パーソルキャリア　「Sprinters」
期間：2022年6月　5日間
内容：デザインスプリントを用いてのプロトタイプ作成
#### CARTA HOLDINGS 「Treasure」
期間：2022年8月３週間
内容：フロントエンド、バックエンド　講義・チーム開発
#### マネーフォワード 
期間：2022年9月~
内容：フロントエンド・バックエンド　就業型

# 4. それぞれのインターンについて
それぞれのインターンに参加したきっかけとインターンを通して得たものについて書いていきます！
### LightBlue Technology 
##### きっかけ
きっかけはもうちょっとシステムぽいのをつくりたいという思いでした。
大学1年生から2年生の夏頃まではWEBサイト制作をメインにやっていたのでメインはマークアップで少しJSを使うぐらいでした。そのおかげでCSSを使ってゴリゴリにスタイリングすることには慣れてきたのですが、どうしてもWEBサイト制作は静的な要素が大きいので自分で考えてつくったところを触ってもらえているという実感が薄くなっていました。日に日にもっと自分がつくったものが使われているという実感が欲しいという思いが強くなりWEBサービスをつくる経験ができる環境に入る必要があるという考えに至りました。
大学2年生の夏頃にAIに興味があったというのもあり、画像認識を使ってシステムをつくるハッカソンのインターンを募集していたLightBlue Technologyに応募しました。初めて画像認識を使ってシステムをつくるという経験ができとても新鮮でした。そして、参加後に長期インターン生として参加してみないかというお話をいただき、フロントエンドエンジニアとして長期インターンが始まりました。

##### インターンを通して得たもの
インターンを通して得たものはユーザー視点と技術的な挑戦です。
つくるものは工場の方が使うような画像認識のサービスのフロントエンド部分でした。UI・UXについては社員の方と一緒に相談しながら決定していく感じで自分の意見やアイデアもしっかりと聞いてくださり、サービスに反映していただいたので今まで以上にどのようなシステムだったらユーザーは嬉しいのか、便利と感じてくれるのかを考えながら実装をするようになりました。技術スタックにおいても現状、社内では使われていないけど導入してみたいものがあるというのを導入メリットや経験をもとに相談するとすぐにやらせてくれるような環境だったので新しいことにもどんどん挑戦していきたいと思えるようになりました。

### パーソルキャリア　「Sprinters」
編集中
TypeScriptを知ろう。 ー 2. TypeScriptの利点

# はじめに

部署の新人からよくこんな話を聞きました。

* `TypeScript`って難しそうで環境作る時には`JavaScript`を選んじゃいます
* 型って何ですか？
* `JavaScript`と何が違うんですか？

`TypeScript`は絶対に使っていきたいので、
部署の新人向けにTypeScript勉強会を開催しました。
その時のメモをこちらにも公開します。

同じような悩みを抱えた方の負担が少しでも解消されれば幸いです。

<font color="red">※私もTypeScriptの勉強を始めてまだ日が浅いので色々ご容赦ください...</font>

前回の記事の続きとなっております。

https://qiita.com/doyaseizin/private/e6191ed4294b625c7e9c

## なんでTypeScriptを使うの？

大きく分けて3つの利点があります。

1. 静的型付け
1. 型推論
1. Null 安全性

### 1. 静的型付けってなぁに？

実はJavaScriptにも動的型付けといって型は存在しています。

次を実行してnodeJSの環境に入って試してみよう

```
$ docker run -it node:19-alpine3.16 sh
/ # node
```

```bash
> let hoge = 'あいうえお'
> undefined
> typeof hoge
'string'
> hoge = 123
123
> typeof hoge
'number'
> .exit
```

stringで定義したhogeが、123を代入するとnumberの型に変化していますね

次に同じことをTypeScriptでやってみます。

[TypeScript Playground](https://www.typescriptlang.org/play)を使って試してみます。

```typescript
let hoge: string = "あいうえお"

hoge = 123;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/71c29018-3ec4-ca2e-64b5-ae2a36a81eae.png)

文字列に対して数字を入れようとしたのでエラーになりましたね！
これが静的型付けです。
この型付けによって予期しない代入を防ぐことができます。


型の付け方には大きく2つあります。

* プリミティブ型
    * Boolean
        * true or false
        * 真偽値を扱うデータ型。
        * 型名は boolean
    * Number型
        * 数値を扱うためのデータ型。
        * 型名は number
    * BigInt型
        * number型では表現できない大きな数値（ 253 以上）を扱う型。
        * 型名は bigint
    * String型
        * 文字列を扱うためのデータ型。
        * 型名は string
    * Symbol型
        * 「シンボル値」という固有の識別子を表現する値の型。
        * 型名は symbol
    * Null型
        * 何のデータも含まれない状態を明示的に表す値。
        * 型名は null
    * Undefined型
        * 「未定義」であることを表す値。
        * 型名は undefined
* リテラル型
    * 「文字通りの」という意味です。
    * 特定のものだけを指定するときに使います。
    * 次の例でイメージしてください。

```typescript
// リテラル型
// ポチしか入らない変数
let my_dog: 'Pochi' = 'Pochi';
// 犬か猫しか入らない
let my_pet: 'dog' | 'cat' = 'dog';
```

また、エイリアスとインターフェースというものも使うことができます。

```typescript
// エイリアス
type TypeHoge = {
  name: string,
  age: number
}

let user_1: TypeHoge = {
  name: '木村太郎',
  age: 50
};

// インターフェース
interface InterfaceHoge {
  age: number;
}

// インターフェースは再代入が可能
interface InterfaceHoge {
  name: string;
}

let user_2: InterfaceHoge = {
  name: '木村太郎',
  age: 50
};
```
### 2. 型推論ってなぁに？

とても簡単です。
わざわざ型を書かなくてもTypeScriptがいい感じに推論してくれる機能です。

例を見てみましょう

```typescript
let hoge = 2 + 2;
hoge = 'テスト';
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/001f7bfc-23f5-de94-500b-180d97ae93ac.png)

hogeには2+2としか指定していませんが、きちんとnumber型と認識し、テストという文字列が代入されるのをブロックしていますね
TypeScriptで書く上で、全てに型を書く必要はなく、このようにTypeScriptがいい感じに推論してくれる。
これが型の推論です。

### 3. null安全性

プログラミングをしていて一番多いバグは`NULL`アクセスと言われています。
Rubyなら`nil`に対する`NoMethodError`ですね。

TypeScriptはこの`NULL`アクセスエラーになる可能性があるのであればコンパイルの段階でチェックしてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/9c8800f3-964d-f255-54a7-f63c2fb87728.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2985550/1964528c-96e9-faf8-f846-dfc96d0d0bf9.png)

VScodeを使っていれば、リアルタイムにこのように指摘してくれます。

VimやEmacsではなかなか難しいと思うので、TypeScriptを書くならばVScodeを使いましょう。
ハッカソンで作成したプロダクトにLINEを使用した話

　認知症フレンドリーテックハッカソンに参加した際に、プロダクトのコア技術にLINEを使用しました。認知症フレンドリーテックハッカソンに参加した際の感想は[こちら](https://qiita.com/shinfrom/items/70f170308c0a55d5fb841)をご覧ください。

　今回私たちは、なかまのなかまというプロダクトを作成しました。このプロダクトは、もしもの際の為に地域とのゆるいつながりで、支え、支えられる仕組みを作るためのものです。
　LINEによる入力情報と、push通知、ビーコンを利用した位置情報を利用して、地域資源情報と組み合わせて、ユーザーと地域の出会い直し（繋がりづくり）から、”もしもの備え”を支援するプロダクトです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/808c8cc3-407d-f5ed-a4de-ababe4c1d268.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/1a793178-8bc1-44ff-f8c2-3dd0ee324b3c.png)
### なぜLINEを使用したか
　今回はユーザーとして高齢者、またこれから高齢者になる人を想定しましたので、分かりやすいインターフェースとして、通信のデファクトスタンダードであるLINEを使用しました。また、LINEは通信のデファクトスタンダードであり、60代後半の人でも6～7割以上の人が毎日LINEを使用しているというデータもあります。SNSではLINEのみ使用可というユーザーも多いと言われています。
　さらに、自分が見守りが必要な年齢になったときに新しいことを覚えるのは大変なので、比較的若いときから使い続けているLINEを使用するのが良いと考えました。
　技術的なことをいうと、Mssaging APIだけでなく、LINE Beaconや、LIFFの機能もあるので、全体をLINEの機能で実装できるのではないかと考えました。イベントトリガー用のビーコンにLINE Beaconを選択したのは、スマートホン用の専用アプリを作成する必要がなく、LINEの機能の一つなので、LINEとの相性が良いはずだと考えたからです。
### LINE BEaconの利用例
　LINE Beaconの実装は、まずはラズベリーパイで動作確認を行い、その後ESP32というマイコンで行いました。実際の流れを下記に示しました。
◆LINE側の作業
・ビーコン受信用にLINE公式アプリを作成する
・公式アプリのチャンネル設定を行なう
・ビーコン用に公式アプリと紐づけたビーコン用のHWIDを発行する
◆デバイスに対しての処理
・ESP32をビーコンにするために、プログラムを書き込む（発行したHWIDを利用する）
◆クラウドでの処理
・クラウド側はenebularで作成、HWIDを利用して場所を把握する
・利用者がビーコンの範囲内に入るとpush通知をするように設定する
　実際の実装方法については、ネット上に良記事がたくさんあるので、今回は割愛します。今回の実装では、ビーコンの受信範囲、アドバタイジングの間隔など細かい設定を作成できませんでしたので、これからの課題です。

　ビーコン用のデバイスに関しては、自分で作成することが面倒であれば、[このようなもの](https://beacon.theshop.jp/items/6617930)もありますので、購入を検討されてもよいかもしれません。クラウド側はenebularで実装していますので、動作確認を行うだけであればシンプルなフローで動作させることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244155/301e251e-15a8-c626-5f40-fb2674854102.png)
### プロダクトにLINEを使用しての感想
　LINEを利用することでスピーディに実装することができました。誰かと話すようなイメージで分かりやすいインターフェースの作成に可能性を感じました。ビーコンについてはまだまだ未知数のことが多いですが、早めに実装して使用した感想を集めていきたいと考えています。
　互助の精神でゆるい見守り環境をLINEを使用して実装することでライフプラットフォームとしてのLINEに可能性を感じました。
### これからの野望（個人的な希望）
　まずは概念実証(PoC)ができる状態まで開発を進めていきたいと考えています。そこからワークショップや勉強会等を行うことで市民開発者を増やし、地域の人と一緒に作り上げていきたいと考えています。
　LINEを利用したゆるいつながりを作成することで、見守りだけでなく、行政DX、防災、ヘルスケアにつなげていくことができると良いと考えています。
### 参考情報
[LINEでここまでできる！最新APIで実現できる16の活用事例](https://cxupdates.dentsudigital.co.jp/article/16-examples-of-line-applications-that-can-be-realized-with-the-latest-api)
[LINE Developpers LINE Beacon](https://developers.line.biz/ja/docs/partner-docs/line-beacon/)
[なかまのなかま](https://protopedia.net/prototype/3380)
SageMaker studio リネージの見方（RMSE編）

sagemakerでは色々なもの（入力アーティファクト、アクション、出力アーティファクトとか）のリネージ検査ができるのですが
まだ理解に時間かかるので、今回はハイパーパラメーターとRMSEだけに絞ります。

ただ、リネージの情報量が多すぎて、何がどこにあるか調べるまで凄く時間かかりました。
「これはここを見ればいいんだよ」と親切に教えてくれる人が近くにいない人の役に立てば幸いです。

パイプラインは[公式ハンズオン（abalone pipeline）](https://docs.aws.amazon.com/ja_jp/sagemaker/latest/dg/define-pipeline.html)を使いました

# TL ; DR
・ハイパーパラメーターはどこで見れるの？
　⇒PipelineのTrainのInputのところ
・RMSEはどこで見れるの？
　⇒PipelineのTrainのOutputのところ



# ハイパーパラメーター
画面左のペインでHomeにあるPipelineでパイプライン一覧を表示
見たいパイプラインを選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1683167/3b4cf1c4-d99e-2e52-5381-d8aea6e073d3.png)

実験（Execution）一覧が表示されるので
見たい実験を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1683167/8ea8c1b3-ebb7-0e67-08bf-b5242c5f7212.png)

Graphでパイプライン全体が表示されるので（最初は表示されるまで時間かかる）
Train（モデルの訓練をしてるステップ）を選ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1683167/7c9bb475-ea12-8574-c683-8f23151619a5.png)

InputにHyperParametersとして表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1683167/7485324f-ad11-ead3-b8ac-d7f1cbaf46f6.png)



# RMSE
Outputにtrain、validそれぞれのRMSEが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1683167/2b7066a3-c818-c4c8-cd49-6a15d78d301b.png)



# 参考
[Amazon SageMaker Pipelines を実際に使ってみた【後編】[re:Invent 2020]](https://qiita.com/knt078/items/5b862d4539e7fa1c16df)
[Amazon SageMaker Studioのアーキテクチャ](https://qiita.com/ishidahra/items/41132cb9ff1f2b838236)
[新しくなった Amazon SageMaker Experiments で実験管理](https://qiita.com/mariohcat/items/9fde1b04c0ecf439d427)
ぼくがテストを書く理由

この記事は株式会社ビットキー Advent Calendar 2022 24日目の記事です。
ソフトウェアエンジニアの @tshiraki が担当します。

## はじめに
おはようございます。みなさんテストコード書いてますか。

最近、ふと自分がなんのためにテストを書いているのか考えることがありました。それについて、この機会に色々と書いてみようと思います。ついでに最後のほうで、テストで工夫していることを少しだけ紹介したいと思います。

## なぜテストコードを書くのか
テストに対する向き合い方は、自社サービス、OSS、受託開発など、対象や立場によって大きく変わるので、ここでは自社サービスのテストコードを書くことを考えることにします。そしてテストコードと言ったときにまず単体テストを思い浮かべることが多いと思うので、まずは単体テストについて考えてみます。

そもそもサービスを提供するためには、テストをする必要があります。当たり前ですね。そして単体テストだけでは、一般に品質を保証することはできません。品質保証に踏み込むとテーマが変わってしまうためこの投稿では大きく触れませんが、テストコードを書いても書かなくても結局テストをする必要があるということです。

では、なぜ書くのか。

これを考えるには、書かなかったらどうなるかを想像しながら考えると分かりやすいです。

### 未来の自分とチームメンバーのため
そもそも自社サービスの開発は、一度作ってリリースしたものに対して継続的に変更することが多いです。そしてその変更は、未来の自分やチームメンバーがすることになります。そのときに、過去に作られたコード、つまり自分が書いたコードにテストがないと、変更の危険度が跳ね上がります。

結果、リリース直前に問題が発覚して徹夜するとか、リリース後に問題が発生して計画を変更して対応して、遅れを取り戻すために徹夜するとか、大事な何かを諦めるとか、そういうことに繋がります。つまり自分がテストを書かないことによって、未来の自分やチームメンバーの身に起きるリスクが上がる、ということです。

テストを書くと、そういったリスクを少しでも減らすことができて、自分だけでなく周囲も守ることに繋がります。

### サービスの成長速度を上げるため
これについてはOSSのIssue解決のシーンから想像すると分かりやすいかもしれません。そこでは、テストコードは破壊から身を守るために存在しているやつ、というだけではなく、解決のための重要なヒントになりえます。

そもそも、そのリポジトリを深く理解をしているとは言えない人たちが貢献してくれようとしている場面で、テストがないと原因を特定しにいくことすら難しかったりします。つまりOSSの場合、テストがないとリポジトリが成長しづらかったり、場合によってはそのまま成長を止めたりします。

これをそのまま自社サービスにそのまま置き換えてみると、テストがあれば、ジョインしたばかりでドメイン知識がまだ浅い人が早く戦力になりやすいということです。

### 今の自分のため
テストの対象や粒度、やり方や習熟度などにもよりますが、そもそもテストを書いたほうが開発が早く完了することが多いです。テストを書くコストとのトレードオフの話を読んだり聞いたりすることがありますが、それは何か大事なことを忘れている気がします。

冒頭で書いたように、テストコードは書いても書かなくても、テストはします。そのときに様々なケースに対して手でぽちぽちしたりcURLで実行しながら動作を確認して、必要があれば修正して、という手順を繰り返すより、テストコードを用意して通してから最後に動かして確認するほうが結局早かったりします。

書くと工数がかかるから書かないというのは極端で、そうではなく、少なくとも書かずにぽちぽちするより効率よく検証できるのであれば、書くべきだと思います。

## 結合テストやE2Eテストについて
前述したように、単体テストでは一連の動作は保証できません。もっと大きな粒度である結合テストやE2Eテストであれば、単体テストで確認したモジュールを組み合わせた動作を検証することができます。それにも関わらず、結合テスト以上のテストコードを記述する話に触れる機会は、単体テストに比べてとても少ないです。

これはシンプルに、単体テストのほうが効率がいいからだと思っています。書くのが大変なだけでなく、実行に時間がかかって開発体験としては微妙だったり、環境維持や実行にお金がかかるということもあります。

逆に言えば、それらの問題が解消するのであれば、手を出す価値があると思います。これについて、最近取り組んでいるやり方を紹介したいと思います。

### 結合テスト
結合テストというと粒度が色々あるので、ここではクリーンアーキテクチャでいう、Usecase (Interactor) をテストすることを考えてみます。その層では、実行から結果を得るまでの過程に、複数の処理や永続層とのやり取りなどが含まれます。

そのときに、多くの処理をモックにしてしまうと、結局Interactor単体の振る舞いだけを検証することになり、その中の処理を含めた結合テストとは言えなくなります。

そのため、単体テスト感覚でテストは記述するものの、極力モックに頼らない、ということをしました。データベース、ストレージ、Pub/Sub、検索エンジンなど、可能な限り本物を使うように、ローカルでコンテナを起動し、そこに繋げて実行する、という形です。

すべてローカルなのでお金はかかりませんし、テスト実行前にコンテナを起動しておくだけで、単体テストと同様に気軽に何度も実行できます。複数回の実行や、並行して実行される他のテストの影響を受けづらくするため、テスト実行ごとにデータベースのスキーマを作る工夫などもしています。

### E2Eテスト
上記のようにモックに頼らずにテストを実行することができる環境を一度整えると、外部から呼び出す場合のテストも簡単に書けます。この場合、例えばiOSアプリからバックエンドのAPIを呼ぶケースの場合、Swiftのテストコードで外から見たテストを書いておけば、それをそのままAPI仕様書として渡せたりもします。

とはいえ記述効率は単体テストに比べると当然落ちるので、できるからといってこれだけに頼らず、単体テストを基本とした上での追加の選択肢というバランスがいいかなと思います。

最近はそんな感じで、様々なシーンにおけるベストを日々探っている状況です。

## まとめ
テストは書いて当然という人もいれば、あまり書けていない人や普段は意識していない人もいるかと思います。

今回は自分がなんで書くのかを考えてみて、自分や身近な人のためという理解をしてみたらしっくりきたので、こんな内容を書きました。誰かのためって考えると前向きになったり丁寧な仕事ができたりすることってありますよね。

成長速度とかの話は、テストコードを記述するコストを誰かに説明するときのヒントにでもなればうれしいです。

それでは良いクリスマスイヴを。

お読みいただきありがとうございました。
明日は株式会社ビットキーAdvent Calendar 2022 最終日です。VPoEの山本 @kanhigh@github の投稿です。

お楽しみに！
【Seeed UG 2022】micro:bit の傾きで LEDテープの色の色相を変化させる（Groveシールドなどを利用）

## はじめに
こちらは、[Seeed UG Advent Calendar 2022](https://qiita.com/advent-calendar/2022/seeed_ug) の 23日目の記事です。

具体的な内容は、以下の動画の通りで、少し補足すると、micro:bit の傾きを LEDテープの色の色相に対応させるという内容です。実装としては、micro:bit の x方向の傾きの値を、LEDテープの色に対応させるようなことを行っています。

https://twitter.com/youtoy/status/1606484164282576898

## 利用した Seeed製品
この中で利用している Seeed製品は、以下となります。

●micro:bit用GroveシールドV2.0 - Seeed Studio

https://jp.seeedstudio.com/Grove-Shield-for-micro-bit-v2-0.html

●Grove RGB LED テープ 防水 (WS2813 - 30 LED/m - 1m) - Seeed Studio

https://jp.seeedstudio.com/Grove-WS2813-RGB-LED-Strip-Waterproof-30-LED-m-1m.html

自分は、上記の製品を個別に買った形ではなく、以下のキットになっているものを買いました。

●micro:bit Grove 入門キット - Seeedウィキ（日本語版）

https://wiki.seeedstudio.com/jp/Grove-Inventor-Kit-for-microbit/

## プログラム
MakeCode で実装した内容は、以下のとおりです。

![今回のプログラム](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c674e069-ebc2-b520-f025-0f302a950b89.png)

ここから、少し実装した内容の補足を書きます。

### 拡張機能： pxt-neopixel
上記のプログラムでは、LEDテープを扱う部分で、以下の拡張機能を用いています。

●neopixel 0.7.5 (microsoft/pxt-neopixel)

https://makecode.microbit.org/pkg/microsoft/pxt-neopixel

今回使っている「micro:bit用Groveシールド・LED テープ」と、この拡張機能の組み合わせは、簡単に LEDテープを扱える組み合わせなので、個人的にすごくオススメです。

### 実装について
#### LEDテープの接続
LEDテープと Groveシールドは、Groveコネクタでの接続です。
Groveシールドに、Grove接続をするためのコネクタは複数ありますが、P0 が含まれるコネクタを使っています。

#### 「最初だけ」の部分
「最初だけ」のブロック内の実装について、少し補足します。

4つのブロックのうち最初の 2つは、拡張機能「pxt-neopixel」のブロックを使っています。
自分が今回使っている LEDテープの LED の数 30個を指定して、その中の 10個だけを使うということをやるための変数も指定しています。

その後の2つは、この後に使うフラグ的な変数の設定と、視覚的に micro:bit のプログラムの処理が開始されたことが分かるようにする、micro:bit本体上の LED を光らせる処理です。

#### ボタンを押した時の処理
今回、micro:bit上のボタンを押した時の処理を、以下のように実装しました。

- Aボタンを押す： フラグ的な変数を有効化する
- Bボタンを押す： LEDテープ全てを消灯、フラグ的な変数をリセット
- A・Bボタンを同時押し： 全ての LED をレインボーパターンで点灯

上記のフラグ的な変数を有効化した場合の処理は、この後に補足する「ずっと」の中の処理に関わってきます。

#### 「ずっと」の部分
上で書いていた「フラグ的な変数」が有効化された場合、30個の LED のうちの 10個を HSL を使った色指定で点灯させるようにしています。

また、HSL の中の色相の値は、micro:bit　の x方向の傾きによって動的に変化するようにしました。その際、傾きの値がとる範囲と色相の値の範囲が異なるため、この部分は値をマップする処理を入れています。

## 余談
昨年の Seeed UG のアドベントカレンダー用の記事でも、「micro:bit と Grove」という方向の内容で記事を書いていたというのが、検索して分かりました。

●【Seeed UG 2021】 micro:bit と Groveモジュールの話（2021年12月） - Qiita
　https://qiita.com/youtoy/items/25f9167f56343492b457
エスプレッソマシン支払いシステム作った話（サーバ・ウェブ編）

この記事は[NAIST Advent Calendar 2022](https://qiita.com/advent-calendar/2022/naist) 24日目の記事です。

# 前書き
僕はこのエスプレッソマシンとその他のコーヒー関係の会計を担当しています。もちろん残高のチャージとかも僕が担当しています。
この支払いシステムはQRコードの認識だけでは成り立ちません。認証と残高の調整等を行うサーバ、またQRコードを表示するなどのインターフェースも必要となります。

もちろん前の記事で実装したものよりは実装が簡単であり、技術的にすごいとは言えないですが、書いていこうかなと思っています。また、自分はFirebaseをプロダクトで使用するのは初めてだったので、結構めちゃくちゃな設計をしていたりしますが、大目に見てください....

# 何で実装するか
## サーバ
NAISTの中の適当なサーバにバックエンドを置いて運用するのも検討しましたが、手続き的に面倒なので外部にサーバを置くことにしました。しかし、VPSなどは月額料金が高く、マシンで取れる利益よりサーバ代が高いかもしれない問題と維持保守が難しい問題がありました。そこで導入すると決めたのがFirebaseです。

Firebaseはサーバを自前で構築する必要がなく、APIを通してデータベースの操作、認証そしてホスティングなど、ウェブサービス運用に必要な様々なものを提供してくれるサービスです。無料枠もかなり大きく、身内+α程度しか使わないシステムはこれで十分かと思いました。

## フロントエンド
最初はiOSとAndroidの専用アプリを製作するのも考えていましたが、App Store(iOS)にアプリを出すだけで年間99ドルが必要なことがわかりました。Androidのデベロッパーアカウントは持っているので追加的な支払いなしに公開はできたのですが、自分含めiOS機種をメインで使っている人が何人かいたのでAndroidのみにするのもできませんでした。

そこで選んだのがWebフロントエンドです。フレームワークとして選んだのは学部時代から使ってきてある程度慣れているNuxt.jsを使用することにしました。また、Vuetifyを使ってUIをそれっぽくしています。Firebase Hostingでホスティングしています。

# 実装方法
## サーバ
### 利用サービス
データベースはRealtime Databaseを使用しています。Firestoreのほうが高機能なのはわかっていますが、実装がしやすいとの理由で自分がWebクライアントに取り掛かる前からshirunariさんが先にRealtime Databaseを使うのを前提としてハード側の実装を進めてきました。自分もそれに合わせてRealtime Databseを使ってシステムに必要な他のデータを保持する実装を進めてきました。

また、認証はFirebase Authenticationを使用しています。Firebase Authenticationを利用することにより、Realtime Databaseのアクセス制限をAuthentication情報で行うことが可能となり、セキュリティ設定を簡単に行うことができました。ただ、UIDが長かったのでどうしても認証情報が長くなり、QRコードが大きくなったことからpuiさんが実装で結構苦労してました...

支払いの処理や会員登録などの処理はFirebase Functionsで行っています。これらの操作は、Realtime Databseのルール設定だけでは望むようなセキュリティが確保できず、Functionsで行うことにしました。

使用したFirebaseのサービスは以上です。

## Functionsで実装した機能
Functionsでは、認証プロセス等を行っています。すべての事項について述べることはできませんが、認証プロセスについて簡単な説明を行いたいと思います。

認証は、UID、認証コード、支払額の情報をHTTPS経由で受け取り、UIDの会員情報の認証コードと一致するかを確かめます。その後、残高を減らし、ボタンを押す許可を出す仕組みです。認証コードは認証に成功するとFunctionsで更新し、同じQRコードを支払にに使うことはできません。

## フロントエンド
FirebaseのクライアントAPIを用い、JavaScriptでデータベースからの読み込み、書き込みを行っています。使い方は非常に簡単で、データベースとのデータのやり取りに関してはあまり悩んでいませんでした。

ウェブページはメインページ、QRコードページ、アカウント情報、お問い合わせなどで構成されています。それぞれは複数のhtmlファイルで分けず、SPA(Single Page Application)で書き出し、Firebase APIを用いたやり取りによりJavascriptで表示を変更しています。

表示されるQRコードは`UID,認証コード,支払い額`のテキスト情報を持っています。上述の通り、認証コードは支払いが行われるたびに変更され、ユーザが直接更新することも可能です。そのため、QRコードだけを保持して他人が使おうとしても認証エラーが発生する仕組みになっており、ある程度セキュリティを確保しています。

![IMG_8905.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487309/77d79690-0c8b-a543-1361-228571a2f4bb.jpeg)

実際のQRコード画面です。1カップ、2カップのボタンを押すと後ろの支払額が変更されます。Refreshを押すと認証コードが更新されます。

# 改善したいところ
## 管理者ページ
まだ管理者ページを作成していません。今はFirebase RealtimeDatabaseのページで直接値をいじっています。改善したいところですがなくても困らないから正直やる気が出ません...

## 支払い履歴の記録
今の実装だと支払額をUIDのユーザから減らすだけなので、支払履歴が残りません。そのため、支払の取り消しをするためには直接値をいじる必要があります。後に追加していきたいと思います。

# 終わりに
残念ながら、セキュリティ上の都合で公開できるところは非常に限られ、FirebaseとNuxt.jsでサーバとウェブフロントエンドを実装したとしか公開できません。しかし、NAISTのみなさんなら、体験することは可能です。体験の申請などは随時受け付けています。使ってみたい方はご連絡ください。
【AWS】公式AMI所有者ID一覧

# 公式が提供しているAMIを使いたい
AMIを選択する際、各Linuxディストリビューターが提供しているAMIを使いたいので一覧にしてみた。
[Classmethodさん](https://dev.classmethod.jp/articles/amazon-ec2-console-verified-provider-label-public-amis/)の記事のとおり、「検証済みプロバイダー = 公式」ではないので所有者IDは確認した方が良いです。

# 所有者ID一覧

| OS, Distribution | 所有者 ID     |
|:-----------------|:------------ |
| RockyLinux       | 792107900819 |
| RedHat           | 309956199498 |
| Fedora           | 125523088429 |
| CentOS Stream    | 125523088429 |
| CentOS           | 125523088429 |
| AlmaLinux        | 764336703387 |
| OracleLinux      | 131827586825 |
| Ubuntu           | 099720109477 |
| Debian           | 136693071363 |
| openSUSE         | 679593333241 |
| WindowsServer    | 801119661308 |
gnuplotで欠損データが有るとき，うまく読み込めない

欠損データが有るとき，データをうまく読み込めません．

#### 解決法1 #で埋める
欠損データを#で埋めると，gnuplotでスルーしてくれる

#### 解決法2 
```
set datafile missing NaN
```
これで処理できるかも．
#### 解決法3 タブで区切ってますよ，と教えてやる
```
set datafile separator "\t"
```
これを入れてやると，空白のデータは空白と認識し，他の列の値を参照されるといったズレが解消できるかもしれない．
【Unity】オブジェクト間に線を引く、オブジェクト間の角度・距離を表示

当記事のソースコードは以下のサイト様を参考にしております。
サイト名：「Unityを使った3Dゲームの作り方(かめくめ)」
URL：https://gametukurikata.com/basic/calculateangle
##
### 初めに
Unityにて**オブジェクト間の角度、距離の表示方法**について調べる機会があり、上手く実装出来たので、**参考記事から変更した点**などを記録しておきます。
(初めてのUnityスクリプト、数年ぶりのC#で苦戦しました。)

## 完成形
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627544/310108f7-e64c-59a5-4b59-1dd0ee92980b.png)

上図のとおり、二つのオブジェクト間の角度、距離を表示することができました。
Unity上での設定やソースコード全文につきましては、冒頭にも記載した[参考記事](https://gametukurikata.com/basic/calculateangle)を参照ください:bow_tone2:。

## 変更した点
### オブジェクト間ラインの色
~~~md:ライン色変更
Handles.color = Color.black;
Handles.DrawLine(baseObj.position, fromObj.position);
Handles.DrawLine(baseObj.position, toObj.position);
~~~
上記コマンドにて、色を変更することが出来ました。
一方で、それぞれ異なるライン色にしたい場合は、Handles.DrawLineの前に、都度Handles.colorで色を指定する必要がありそうです。
### 小数点桁数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627544/acab1375-035b-ab9f-1423-236bd0934303.png)
上図に表示されているような少数第四位までの精度は必要なかったので、少数第一位に変更しました。

~~~md:桁数変更
Handles.Label(baseObj.position + Vector3.back * 0.5f, "<color=#ffffff>" + angle.ToString("F1") + "°" + "</color>", gUIStyle);
~~~

C#の基本のような内容ですが、
ToString()の引数に"F1"を追記することにより、少数第一位に変更できました。

## 最後に
久しぶりの投稿です。
簡易な内容となりましたが、初めてのUnityスクリプトでC#を触ってみました。
ここ最近、プログラム関連で学ぶ機会が多く、インプットは増えているがアウトプットが少ない状態だったので記事化してみました。
アウトプットすることによって新しく得られることもあると思うので、頑張って定期的に投稿していきたいと思います。
この記事が少しでも役に立てたら幸いです。
それではまた次回:laughing:！
カスタム表示ラベルの設定方法

カスタム表示ラベルは、Apex クラス、Visualforce ページ、Lightning ページ、または Lightning コンポーネントからアクセスできるカスタムテキスト値です。設定した後にクラスの親子関係など関わらず直接使用することが可能です。この記事ではカスタム表示ラベルの設定方法と使用方法を紹介します。

## 1.カスタム表示ラベルの設定方法
設定画面を開いてカスタムを検索欄に入力しカスタム表示ラベルを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/9b716038-6771-78bd-53ea-0e23a32d2770.png)
新規カスタム表示ラベルを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/0a9a82bb-a1e1-04eb-171d-b39ba9f9c6c8.png)
簡単な説明、名前、値などを入力し保存ボタンを押しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/690d869c-4194-8d63-a019-9643fa68796a.png)
無事に新規作成しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/9b540619-3a1c-c207-ac89-35823b1a7dff.png)

## 2.カスタム表示ラベルの使用方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/7709db56-7957-362d-11e5-b03c9b3424ca.png)

ここでは試しに開発者コンソールでApexでの使い方を確かめましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/975c8dc7-915a-37bf-9fde-669b63aac1e9.png)

Open Execute Anonymous Windowをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/b87597ff-3d6d-6df4-2207-472433cc3278.png)
Apexコードで呼び出し確認してみよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/008b9374-198c-6c2b-49a2-f990a8a9153f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/e23851cc-e067-5cd5-7b52-8c0c2b16e2a8.png)
実行した後にDebug onlyにチェックし値を確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2705822/f38ec336-2198-1bc6-723d-cfa41c22ad11.png)

## まとめ
この記事はカスタム表示ラベルの設定方法をメイン記載する記事となります。カスタム表示ラベルは設定した後にsalesforceの色んな所に直接呼び出して使えるので頻繫に使える値が存在すれば、それを設定し簡単に扱えるようになります。
Apache SolrとElasticsearchのクエリ構文の違いについてまとめてみた

:::note info
この記事は[TLB Enjoy Developers Advent Calendar 2022](https://qiita.com/advent-calendar/2022/tlb-enjoy) の23日目の記事です。
:::

# はじめに

全文検索エンジンというとApache SolrとElasticsearchをよく耳にしますが
クエリ構文の違いをサンプルで比較するような記事があまりなかったので書いてみました。


# この記事を読むとわかること
ざっくりApache SolrとElasticsearchで検索クエリはこんな感じで違うんだ〜となります。



# そもそもApache SolrとElasticsearchとは
どちらもLuceneライブラリをベースとしたオープンソースの検索エンジンです。
大量のデータのインデックス作成、検索、分析に使用することができます。


# 何が違うのか
いろいろ違いはありますが、主な違いの一つとして挙げられるのがクエリの構文です。
ElasticsearchはJSONベースのクエリ構文を採用しており、全文検索、フィルタリング、集計など、さまざまな検索条件を指定することができます。
一方、Apache Solrは「Lucene Query Syntax」と呼ばれる、検索ライブラリ「Lucene」をベースとしたクエリ構文を採用しています。
Elasticsearchの構文と似ていますが、Googleなどの従来の検索エンジンに慣れ親しんでいるユーザーにとっては、より馴染みやすい構文と言えるかもしれません。



# クエリのサンプルで比較してみます
同じ内容で検索する時、Apache SolrとElasticsearchでどう違うのかサンプルで比較しています。


### 全文検索
titleでキーワード「はらぺこあおむし」を検索する場合

```text:Solr
q=title:はらぺこあおむし
```

```json:Elasticsearch
{
  "query": {
    "match": {
      "title": "はらぺこあおむし"
    }
  }
}
```




### 範囲検索

priceの値を「100以上200以下」で検索する場合

```text:Solr
q=price:[100 TO 200]
```

```json:Elasticsearch

{
  "query": {
    "range": {
      "price": {
        "gte": 100,
        "lte": 200
      }
    }
  }
}
```

### 並べ替え検索
priceを「昇順」、date_publishedを「降順」でソートする場合

```text:Solr
q=*:*&sort=price asc, date_published desc
```

```json:Elasticsearch

{
  "query": {
    "match_all": {}
  },
  "sort": [
    { "price": "asc" },
    { "date_published": "desc" }
  ]
}
```




### フィルター検索

titleに「はらぺこあおむし」というキーワードを含み、priceが「100〜200」のデータを検索したい場合

```text:Solr
q=title:はらぺこあおむし&fq=price:[100 TO 200]
```

```json:Elasticsearch

{
  "query": {
    "bool": {
      "must": {
        "match": {
          "title": "はらぺこあおむし"
        }
      },
      "filter": {
        "range": {
          "price": {
            "gte": 100,
            "lte": 200
          }
        }
      }
    }
  }
}
```


### 複合検索


title「はらぺこあおむし」というキーワードを含み、
priceが「100〜200」、
categoryに「novel」を含まない、
authorが「エリック・カール」または「eric carle」のデータを検索したい場合

```text:Solr
q=title:はらぺこあおむし AND price:[100 TO 200] AND NOT category:novel AND (author:エリック・カール OR author:eric carle)
```

```json:Elasticsearch
{
  "query": {
    "bool": {
      "must": [
        { "match": { "title": "はらぺこあおむし" } },
        { "range": { "price": { "gte": 100, "lte": 200 } } }
      ],
      "must_not": {
        "match": { "category": "novel" }
      },
      "should": [
        { "match": { "author": "エリック・カール" } },
        { "match": { "author": "eric carle" } }
      ]
    }
  }
}
```


# 終わりに
あっという間に年末ですね。
クリスマスが近いのでクリスマスっぽい絵本探したら「はらぺこあおむし」になりました。
明日24日クリスマスイブは@kdr250さんの記事です!
【数理統計学】統計検定にも出る最小分散不偏推定量（MVUE）とは？


# はじめに
今学期の授業で学んだ最小分散不偏推定量（Minimum Variance Unbiased Estimator, MVUE）について復習がてら紹介してみようと思います。

MVUEは点推定の一種でその名の通り統計推定の中でも特に望ましいとされている最小分散性（Minimum Variance）と不偏性（unbiasedness）を持った推定量（Estimator）になります。

> *不偏性とは、とある推定量の期待値が母数と等しくなる性質です$（E(Y) = θ, where Y = u(X_{1},X_{2},...,X_{n}）$。
> *最小分散性とは、とある推定量の分散がどの不偏推定量の分散よりも小さいか同等になっている性質です

なぜこのような推定量を求めようとするのかというと日々我々が使っている平均や最尤推定量（[こちらの記事参照](https://ai-trend.jp/basic-study/estimator/maximum-likelihood-estimation/)）なども最適な点推定ではなく、不偏性や最小分散性を有していない事があるからです。

また世の中には不偏性のみを満たしている不偏推定量は無数にあります。つまり、不偏性という基準だけでは望ましい推定ができないのです。



**例）正規分布に従う確率変数の最尤推定が時に不偏性を保持していない例を紹介します。**

$X_{i}$ が正規分布, $N(μ, σ^2)$に従う確率変数のとき、
```math
\hat{μ} = \frac{Σ X_{i}}{n} = \bar{X}\\
\hat{σ^2} = \frac{Σ(X_{i}-\bar{X})^2}{n}
```
が$μ$と$σ^2$の最尤推定になります。このとき

```math
E(\bar{X}) = μ
```

となりμの最尤推定 = μで、不偏性を保持しているとわかりますが、$\hat{σ^2}$ はそうはいきません。

```math
\begin{align}

\hat{σ^2} = \frac{1}{n} \sum_{i=1}^{n}(x_{i}-\bar{x})^2
    &= \frac{1}{n} \sum_{i=1}^{n} 
        \bigl
            (x_{i}^2-2x_{i}\bar{x}+\bar{x}^2 
        \bigr)\\
    &= \frac{1}{n} \sum_{i=1}^{n}x_{i}^2 - \bar{x}^2\\
\end{align}
```
となるため、最尤推定の期待値は
```math
\begin{align}
E(\hat{σ}^2) 
    &= E \bigl( 
            \frac{1}{n} \sum_{i=1}^{n}x_{i}^2 - \bar{x}^2 
         \bigr)\\
    &= \frac{(n-1)σ^2}{n}\\
\end{align}
```
より、$ E(\hat{σ}^2) \neq σ^2 $ となるので、$ σ^2 $ の最尤推定は不偏性を保持していない事がわかります。この通り、良いと言われている最尤推定なども時として不偏性を保持しておらず、ベストな推定量とは言えない事がわかります。

# MVUEの求め方
上記の通り、頻繁に利用されている身近な推定量も不十分であることがわかっているため、世の中の推定量のうち，不偏性で分散値が最小となる推定量を得ることを最良としようという考えの下、MVUEを求めることが重要とされています。

それでは実際にMVUEを求めるにはどうするのでしょうか。
MVUEを求める方法はいくつかありますが、ここでは不偏推定量がクラメール・ラオの不等式（Rao–Cramer Lower Bound, CRLB）の等式を満たす有効推定量（efficient estimator）であることを示す代表的な方法を述べたいと思います。



### クラメール・ラオの不等式

とある$X_1, X_2, ..., X_n$が、確率関数$f(x; \theta)$によって発生する確率分布に従うとします。また$u(X_1,X_2,...,X_n)$を$k(\theta)$の不偏推定量とします（$Y$ は $k(θ)$ の不偏推定量です）

```math
X_{1},X_{2},...,X_{n} \sim^{iid} f(x;\theta) \\
Y = u(X_{1},X_{2},...,X_{n}) \\
E(Y) = E[u(X_{1},X_{2},...,X_{n})] = k(\theta)
``` 


この時、**クラメール・ラオの不等式（CRLB）** は
```math
Var(Y)\geqq\frac{[k'(\theta)]^2}
    {nI_X(\theta)} 
```
で定義されます。
なお$I_X$ は一般的にフィッシャー情報量（Fisher's Information）と言われており、以下で説明しています。
CRLBはいくつかの条件を満たす必要がありますが[（Wikipedia参照）](https://bit.ly/3YVta6e)不偏推定量の分散の下限を示すもので、等号成立のとき不偏推定量 $Y$ の分散は他のどの推定量の分散よりも小さいと考えられるため、$Y$ は有効推定量となり、最小分散性を満たすと言われています。

つまり、不偏推定量（$Y = u(X_{1},X_{2},...,X_{n})$）がCRLBの等式成立を満たすとき、$Y$ は不偏性も最小分散性のどちらとも満たす **MVUE** であると言えます。これがMVUEの一つの求め方になります。

### （付録）フィッシャー情報量

フィッシャー情報量とは以下の通りに定義されているもので、スコア関数（Score function, $U(X;\theta)$）の2次モーメント（=スコア関数の分散）の期待値と同等になります[（モーメントについて）](https://www.momoyama-usagi.com/entry/math-stat-moment)。最尤推定を求める際の関数と非常に似ています。

```math
\begin{align}
I &= E
    \left[
        \left(
            \frac{\partial}{\partial\theta}
            log \it f(X; \theta)
        \right)^2
    \right] \\
  &= E
    \bigl[
        U(X;\theta)^2
    \bigr] 

\end{align}
```



**以下参考記事

https://online.stat.psu.edu/stat415/lesson/1/1.3

https://ai-trend.jp/basic-study/estimator/cramer-rao/
Discord jsの最小構成(メモ)

最近またDiscord jsにハマり出したのでメモとしてコードを貼っておきます

discord jsをインストールするコマンド：
```powershell
npm install discord.js
```

dotenvをインストールするコマンド：
```powershell
npm install dotenv
```

bot本体
```index.js
const { Client, GatewayIntentBits } = require("discord.js");
require('dotenv').config();

const GatewayIntents = [GatewayIntentBits.MessageContent];

const client = new Client({
    intents: GatewayIntents,
});

client.on("ready",(client)=>{
   console.log("Ready!"); 
});

client.login(process.env.TOKEN);

```
AtCoder青になりました


レーティング推移
---  
現在は、水色ですね。青色に戻れそうにありません。
![SharedScreenshot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2334893/bdd5a855-6535-b264-8961-425c4c55cfb9.jpeg)

やったこと
---
2年11月~3年9月まで、約10ヶ月停滞していました。この停滞期にやったことを書きます。
・ABC(AtCoder Beginner Contest)に毎回欠かさず参加し、本番で取り組んで解けなかった問題を復習する。この期間には、すべて参加していました。
・ARC(AtCoder Regular Contest)に参加しない。ABCよりも難しい問題が出題されるかつ解説を見ても天才だな～と思い復習しても身についていない感じがしていました。

やったことはこれだけです。毎回参加することが重要です。ARCでレートが下がると、どうしようもない感が強くモチベーションにも関わるので、不参加にしてました。
印象に残っている問題は、黄パフォを出したABC267のF問題で、ダブリング + 木の直径を組み合わせた問題です。どちらの要素もコンテスト中に解けなくて復習したものだったので、とても嬉しかったです。
・参考(木の直径)
maspyさんの木の直径のツイートです。調べて記事を読んでもよくわからなっかった中で、このツイートに出会いました。一番わかりやすかったです。
https://twitter.com/maspy_stars/status/1377819629922361344


最後に
---
AtCoderのコンテストには今後も出る予定です！青色は絶対無理だと思っていましたが、ゆるゆるとコンテストに参加し続けていれば、何とかなるもんですね。就活でも、とてもお世話になりました。
最後まで読んでいただきありがとうございました。
Neural Networkの中にあるDownsamplingについての論文まとめ（画像認識向け）

Neural networkを普通にやっていると、途中でPoolingという名前で、StrideをしてDownsamplingしてるけど、案外その辺適当だよね？　ってことで、ちょっと調べてみた。

そもそも、Downsamplingってのは、周波数解析の人は必ず最初に勉強する[標本化定理](https://ja.wikipedia.org/wiki/%E6%A8%99%E6%9C%AC%E5%8C%96%E5%AE%9A%E7%90%86)的に、まず高周波領域捨ててから、やろうよって思うのだけれども、そんなことはしてないし、どうなんだよ、と。

で、実際、ResizingのLibraryは案外適当に実装されているから、小さい絵にしてから学習するなら気を付けなよって論文が出ていたりする。
[On buggy resizing libraries and surprising subtleties in fid calculation](https://arxiv.org/pdf/2104.11222v1.pdf)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/730426/48b3a8af-ae14-f05b-7a48-70ab62577781.png)
[新しいバージョン](https://arxiv.org/pdf/2104.11222v3.pdf)では、実際GANで問題が出る的なことも言っている。

特に何も考えないでDownsamplingをすると（strideをすると）[折り返し雑音](https://ja.wikipedia.org/wiki/%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E9%9B%91%E9%9F%B3)alisaingというものが起きる。
なので、取り敢えずaliasingが乗らない処理をDNNに入れてみたら、攻撃に強くなって、Robustになって、Generalizeするらしい。
[Making convolutional networks shift-invariant again](http://proceedings.mlr.press/v97/zhang19a/zhang19a.pdf)(Adobe 2019)
[FrequencyLowCut Pooling--Plug & Play against Catastrophic Overfitting](https://arxiv.org/pdf/2204.00491.pdf)(2022)
[Blending anti-aliasing into vision transformer](https://proceedings.neurips.cc/paper/2021/file/2b3bf3eee2475e03885a110e9acaab61-Paper.pdf)(2021)

そもそも、学習でlow-pass filter見つけられているのかも？　っていう実験をしている人もいる。
[Impact of aliasing on generalization in deep convolutional networks](https://openaccess.thecvf.com/content/ICCV2021/papers/Vasconcelos_Impact_of_Aliasing_on_Generalization_in_Deep_Convolutional_Networks_ICCV_2021_paper.pdf)(Google 2021)
[How convolutional neural networks deal with aliasing](https://arxiv.org/pdf/2102.07757.pdf)(2021)

基本、low-pass filterあった方が見たことないデータに強くなるし、計算量的に邪魔になるもんでもなし、入れときゃ良さそう。

で、ここへ来て、そもそもDownsamplingをattentionとかみたいにcontext-awareにしたらよくなるってのも出てきた。
[Delving deeper into anti-aliasing in ConvNets](https://arxiv.org/pdf/2008.09604.pdf)(UC Davis, NVIDIA, 2020)
[UniNet: Unified architecture search with convolution, transformer, and MLP](https://arxiv.org/pdf/2207.05420.pdf)(CUHK, SenseTime, 2022)
UniNetは、Conv、Transformer、MLPを混ぜ混ぜした最強モデルの見つけ方とか言ってるわりに実験的にはConvのDownsamplingが精度のボトルネックとか言い出してて、どういうことよって感じ。

まあ、別に突然こんな話が出て来たわけではもちろんなく（そもそも、anti-aliasing処理のないdownamplingなんて周波数解析屋さんからしたら気持ち悪いわけで）poolingの処理に学習を入れようってのは前からいっぱいある
[Detail-preserving pooling in deep networks](https://openaccess.thecvf.com/content_cvpr_2018/papers/Saeedan_Detail-Preserving_Pooling_in_CVPR_2018_paper.pdf)(2018)
[LIP: local importance-based pooling](https://openaccess.thecvf.com/content_ICCV_2019/papers/Gao_LIP_Local_Importance-Based_Pooling_ICCV_2019_paper.pdf)(2019)
[Carafe++: Unified content-aware reassembly of features](https://arxiv.org/pdf/2012.04733.pdf)(2020)

そもそも、絵を大きくしたり小さくしたりっていう話なので、超解像屋さんたちはもっといろいろ語っているんじゃないかと。
Azure Administrator(AZ-104)：Azure での ID とガバナンスの管理「AD DSとAzure ADの比較」

Microsoft Learnを用いたMicrosoft Azure Administrator(AZ-104)の試験内容をまとめる投稿です。
この投稿ではMicrosoft Learnで学ぶ内容をできるだけ簡潔にまとめております。
Azureの勉強を一から始め、AZ-900取得後の資格としてAZ-104取得を目指している方の参考になれば幸いです。
※AZ-900の内容は本投稿では省略しております。再度復習したい方は下記をご参照ください。
[Azure Fundamentals(AZ-900)：試験合格に向けた学習内容のまとめ](https://qiita.com/fsd-jume/items/e4ec76959adb547ac5e8)

## 今回の学習内容
**◆「AD DSとAzure ADの比較」**
◇対応するMicrosoft Learn ラーニングパス
[AZ-104:Azure での ID とガバナンスの管理](https://learn.microsoft.com/ja-jp/training/paths/az-104-manage-identities-governance/)
◇対応するモジュール
[Active Directory Domain Services と Azure Active Directory を比較する](https://learn.microsoft.com/ja-jp/training/modules/configure-azure-active-directory/4-compare-active-directory-domain-services)

※前回の投稿は下記から確認できます。
[Azure Administrator(AZ-104)：Azure での ID とガバナンスの管理「Azure ADの概念」](https://qiita.com/fsd-jume/items/49c85b3e38544a2de18d)

## AD DSとAzure ADの比較
### Active Directory Domain Services(AD DS)
・物理/仮想サーバに対するWindows ServerベースのADのデプロイ
・ネットワーク上の情報が保存され、その情報の検索や利用が簡単にできるサービス
　(情報の例：名前やパスワードなどのユーザアカウント情報)

### AD DSとAzure ADの比較
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851723/11f5f4af-6dcd-3a2c-f57d-c6b7ba072c45.png)

## 次の学習内容
**◆Azure ADのエディション**

https://qiita.com/fsd-jume/items/02297c7277ceabba4dac

## 学習内容をまとめたページの一覧

https://qiita.com/fsd-jume/items/6eda24728c9c03c36bc3
Outlook for Web で署名が設定できないor不定期に勝手にリセットされる件の解消方法

【事象】
・Outlook for Web で署名が設定できないと後輩に相談を受けた。
・正常に設定できていた自分のアカウントも、気付いたら勝手にリセット（空）されていた。

とうとう自分にも実害が出始めたので、いろいろ試してみたところ単純な原因っぽかったので備忘録を。

どうやら署名の名称が、アルファベットと数字以外の文字列を許容していないようです。
"標準署名"のような日本語名ではなく、"default"にして登録を試みたところ、普通に登録できました。

【入力例】
![default.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3079192/3b788517-758e-3c32-d771-cd48619850b6.png)

そんな単純なことある？と思いましたが、ググってもこの不具合は割と多数報告されてるみたいで、
明確な解決方法も提示されていないようでしたので、一応メモっておきます。署名が入らないのは地味にかなり困るので。。
Tailwind CSSでもピクセルコーディング

この記事はReact(もしくはVue)を使うことを前提として話をしています。WordPressや単なるHTMLなどを用いるWeb制作などでピクセルコーディングをする際、Tailwind CSSは全くお勧めできませんのでその点はご留意ください。

# JIT modeはなるべく使わない

Tailwind CSSには[Just-in-Time Mode](https://v2.tailwindcss.com/docs/just-in-time-mode)というものがあり、任意の値を設定できます。

```react
const Component = () => {
  return (
    <h1 className="text-[1.9rem]">Hello world!</h1>
    // font-size: 1.9rem; に変換される
  );
};
```

Tailwind CSSがデフォルトで提供しているサイズの値は、
例えば`w-1`なら`width: 0.25rem`, `w-2`なら`width: 0.5rem`というように0.25rem倍されて使用されます。しかしデザイナーさんにXDなどでデザインをもらってコーディングをする際、正確な値を指定したい場合にこれらの提供済みのユーティリティークラスでは対応できないことの方が多いと思います。
なので通常、細かい値を設定したいときは逐一カギ括弧[]を使っていくと思うのですが、私の場合**それをしません**。それには以下の理由があります。

- 提供されているサイズとカギ括弧で指定した値が混ざって可読性が下がるから
- JIT modeで書くときタイピングをするのが面倒だから

そこで私はなるべくJIT modeを使わずにピクセルコーディングをできるように、**`width: 10px`と表したいなら`w-10`と記述すればいい**ようにしました。`tailwind.config.js`は以下のようになります。
また注意点として、`1rem` = `10px`となるように設定してあります。

```js:tailwind.config.js
const pixels = new Set([0, 1, 2, 3, 10]); // 新しいピクセルを追加するときはこの配列に
const remsMap = {};
pixels.forEach((px) => {
  remsMap[px] = `${px / 10}rem`;
});

module.exports = {
  // ...
  theme: {
    spacing: {
      ...remsMap,
      auto: 'auto',
      initial: 'initial',
    },
    fontSize: remsMap,
    // ...
  },
  // ...
}
```

こうすることで、すでに登録済みのピクセルは他のプロパティでもすぐに指定することができます。
だんだん登録済みにピクセルが増えていくことで、"Tailwind"という言葉通りスタイリングは追い風になっていきます。XDに書いてあるピクセルをそのまま`w-10`のように指定すればいいとなれば、迷いがなくなってとても作業が楽になり、可読性も上がります。

ぜひ参考になればと思います。ありがとうございました。
【初心者向け】クラスのimport/exportで生じたバグ修正（not defined / outside a module）

TypeScriptでexportしようとした時に生じたバグの修正メモ。

## ReferenceError: exports is not defined

### 【処方箋】tsconfig.jsonのmodulesをes6以降にする
```json:config.json
{
   "module": "ESNext or ES6", 
}
```
exportの書き方が、CommonJSとESmodulesによって違う事によって生じるバグ。
TypeScriptの設定ファイルを修正しましょう。

## Uncaught SyntaxError: Cannot use import statement outside a module

### 【処方箋】HTMLのscriptタグのタイプ属性をmoduleに設定する
```HTML:index.html
  <script src="test2.js" type="module"></script>
```
モジュールとして利用する場合は、HTML側での指示が必要です。

> 【参考】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#attr-type