OmniAICreator/Qiita-1.07M huggingface dataset:
古いバージョンのUnityをインストールする

#はじめに
 研究室では，自宅で作成するUnityのバージョンと大学のUnityのバージョンが異なることに起因するエラーを避けるために，インストールするUnityのバージョンを指定しています．インストールするUnityバージョンは，年に1，3月ごろに回見直されます．
また，このインストール手順はOculus Questにてデバックすることを前提にAndroidデバッグをできる環境を整えます．

#手順
Unityのインストールや，管理はUnity Hubが必要です．よって最初にUnity Hubをインストールし，次にUnityの指定バージョンをインストールします．

#Unity Hubのインストール
Unity Hubは[ここ](https://unity3d.com/jp/get-unity/download)からインストールします．今回は，世代が古いUnityをインストールするため，Unity Hubをダウンロードを選択します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2142992/680ca0cb-7efa-b482-e27d-78858b6dd708.png)

次にダウンロードされたUnityHubSetup.exeを起動する．その後，同意する(A)→インストールを押すとダウンロードされる．
初回起動時は「Windowsセキュリティの重要な警告」が出ることがあるので「アクセスを許可する(A)」を押す．

#Unityのインストール
最初に，UnityHubの右インストールタブに移動し，青いインストールボタンを押す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2142992/5efcd8c7-3cf7-ca4e-0107-edc587a3319f.png)

ここで，複数世代のUnityが表示されており，ここに目的のUnityバージョンがあれば選択しインストールする．なければ[ダウンロードアーカイブ](https://unity3d.com/get-unity/download/archive)を押す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2142992/37c73e4a-19b0-a46d-8c16-0e0821d79080.png)

そこで，目的のUnityバージョンを探しUnity Hubのボタンを押す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2142992/127d8689-6c8c-6c1a-b848-2cba438f3840.png)

「Unityバージョンを加える」の画面に遷移するので，必ず「Android Build Support」にチェックを入れて右下のINSTALLを押す．

Finish

#おわりに
これらにより，古いバージョンのUnityのインストール手順は以上です．
「新たなレモンサワーが見つかる！出逢える！」LINE Botで製作開始vol.1

**現在、大好きなレモンサワーを起点にしたユーザーと飲食店をつなげるアプリを企画中です。**

<img width="600" alt="イメージ初期.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2049267/5f279a1f-02e7-477e-50f7-11697bb4b9d2.gif">

1か月ほど前にnote記事にしましたので、是非ご覧ください。

https://note.com/tanakahiroki0128/n/nedfa1acffe5b

と意気込んで企画したは良いものの、スケールを大きくし過ぎたことで絶賛迷走中ですので、企画を身の丈にあったものに修正中！

まずは、第1段階のステップとして、

:::note info
・ユーザーがレモンサワーの情報を投稿できる
・投稿されて蓄積されたレモンサワーの情報からお近くのお店を探せる
・投稿されたレモンサワー情報を集約するWEBサイト
:::

の3点を表現できるものをLINE Botで作ろうと思います。


##プロダクトイメージ
<img width="600" alt="レモンサワーイメージ.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2049267/19d2e929-0c96-30f3-7b5a-9fc817b6a87e.gif">

必要な機能としては、
<img width="600" alt="作成イメージ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2049267/60cadf5c-10a4-22ba-5dac-4c8a4949d5b8.png">

を想定しています。


まずはこちらを参考に、起点となるオウム返しLINE Botを作成します。

https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d


##環境
Visual Studio Code v1.60.2
Node.js v16.10.0
npm v7.21.1
ngrok 2.3.40

##コード・結果
<details><summary><font color="red">**コード（クリックで表示）**</font></summary><div>

```js
'use strict';

const express = require('express');
const line = require('@line/bot-sdk');

const PORT = process.env.PORT || 3000;

// Messaging APIを利用するための鍵を設定します。
const config = {
  channelSecret: 'チャネルシークレット',
  channelAccessToken: 'チャネルアクセストークン'
};

const client = new line.Client(config);

async function handleEvent(event) {
  if (event.type !== 'message' || event.message.type !== 'text') {
    return Promise.resolve(null);
  }
  // ユーザーにリプライメッセージを送ります。
  return client.replyMessage(event.replyToken, {
    type: 'text', // テキストメッセージ
    text: event.message.text // ← ここに入れた言葉が実際に返信されます
    // event.message.text には、受信したメッセージが入っているので、それをそのまま返信しています
    // ここを 'テスト' のように書き換えると、何を受信しても「テスト」と返すようになります
  });
}

// ここ以降は理解しなくてOKです
const app = express();
app.get('/', (req, res) => res.send('Hello LINE BOT! (HTTP GET)'));
app.post('/webhook', line.middleware(config), (req, res) => {

  if (req.body.events.length === 0) {
    res.send('Hello LINE BOT! (HTTP POST)');
    console.log('検証イベントを受信しました！');
    return;
  } else {
    console.log('受信しました:', req.body.events);
  }

  Promise.all(req.body.events.map(handleEvent)).then((result) => res.json(result));
});

app.listen(PORT);
console.log(`ポート${PORT}番でExpressサーバーを実行中です…`);
```

</div></details>

<iframe width="560" height="315" src="https://www.youtube.com/embed/JWVx2MLuDlw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

レイアウトは仮ですが、LINE Official Account Managerからリッチメニューも設定してみました。
レモンサワーWEBサイトはこれからの着手ですので、一旦自身のTwitterに遷移させています。
参考：[【公式】リッチメニューの活用法 作成から設定方法まで解説]
(https://www.linebiz.com/jp/column/technique/20180731-01/)

##次のステップ
<font color="red">**LIFFを使いこなせるようになること！**</font>

参考：[LIFFアプリを作ってみよう（#1 基礎編）]
(https://qiita.com/bow_arrow/items/ecba2bcad7ecbe0df745)
参考：[LINE BotのUI機能まとめ（リッチメニュー・Flex Message・LIFFの活用方法）]
(https://blog.yuu26.com/line-bot-ui/)

LIFFを理解して、LINE Botに組み込んでいきます！
また記事にて報告させていただきますね！
プログラミングほぼ未経験社員がRPAツールSikuliXを使ってみた感想

この記事は、NTTコムウェア[NTTコムウェアAdvent Calendar 2021](https://qiita.com/advent-calendar/2021/nttcomware) 11日目の記事です。
#はじめに
ＮＴＴコムウェアの増田です。普段はシステム開発現場にてシステム実装方式（主にインフラ周り）のサポート業務をしています。ただ、これまでの開発経験でプログラミングをほぼやってこなかった為、コーディング知識が低いコンプレックスを持っていました。今回は、そんなプログラミングほぼ未経験の私が業務自動化で使われるRPAツール”sikuliX”を使い、動かす事ができたのか記事にしてみました。プログラミングに自信がないけど自動化に興味ある方に読んでいただければ幸いです。
#RPAツールを使おうとした背景
コロナの影響でリモートワークが中心となった事に伴い、一人で仕事する機会が増えました。ある日に自分の仕事を振り返った所、頭をそこまで使わなくてもよい作業の割合が結構多くを占めている事に気づきました。それを契機に、やらなくていい作業は辞めたりしましたが、どうしてもやらないといけない作業は引き続きやっていた為、自動化できないものかと考えていたのがこの営みのきっかけとなります。

#SikuliXを選んだ理由
SikuliX（シクリエックス）は、自動UI操作ツールです。
SikuliX IDEを使って、Webアプリケーションの自動UI試験等を行うことができます。（他にもいろいろ）
操作したい箇所の画面のスクリーンショットを取っていくコード記述方法の為、感覚的に実装していくことができます。
つまり、プログラミングの経験がない私でも使えるのでは？と思いこのツールを選びました。
#SikuliXの動作環境について
仕事で使っているPC（OS Windows10）を動作環境として設定しました。
肝心のSikuliX本体は、以下サイトから"sikulixide-2.0.X.jar"をダウンロードしてデスクトップに格納しただけで環境準備できました。
・ダウンロードサイト
https://raiman.github.io/SikuliX1/downloads.html

:::note warn
注意
事前にJavaをインストールしておく必要があります。
私が作業環境としている会社のPCには幸いデフォルトでJDKが入ってた為JDKインストールは不要でした。
:::

#実際にやってみた
"頭を使わなくてもよい作業"として"ブラウザを操作する作業"が多かった事から、今回は手始めにブラウザを立ち上げてページを表示する挙動を自動化する事にしました。
デスクトップに置いた"sikulixide-2.0.5.jar"をダブルクリックで起動すると以下画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2363184/6faca5b2-9dfb-814e-08d7-51878d03911d.png)

左の領域がコード記述用、右の領域が実行結果表示用になります。
さっそく、yahooのサイトを起動するコードを記述してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2363184/9e42c6d9-f02c-56fa-2326-c32dfd8768a9.png)

コードの内容は、以下の通り
1(行目)：デスクトップにあるGoogleChromeのアイコンを探してクリック
2(行目)：ブラウザの新規タブ作成のアイコンを探してクリック
3(行目)：新規ブラウザ画面のURLバーを探してクリック
4(行目)：yahooサイトのURLを(3行目でしていたURLバーに)張り付け
5(行目)：エンターキーを押下

探す画像の設定は、メニューにある「スクリーンショットを録る」を選択すると探したい画像をキャプチャできます。そしてコードができたところで、実際に動作するかドキドキしながら「実行ボタン」を押下。
動いた！結果しか載せられずエビデンスを示せず残念ですが動いてくれました。

![ブラウザ画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2363184/3e5dd855-d5dd-35c0-a202-b225e4d5cdde.png)


もう少し気の利いたコードにすると以下の画面のようになるそうです。どの処理を実行しているか、エラー発生原因が何かまでハンドリングできるようにするともっと良いと後輩からアドバイスいただきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2363184/e7451e35-0c8e-3d36-d0bc-ff3311b40d50.png)


#やってみた感想
冒頭で述べた通りスクリーンショットと、基本操作```click()　paste()　type()```だけで実装できた事もあり、もっと踏みこんだ実装をしたい気持ちになりました。
プログラミング苦手意識とかも気にならない程に感覚的で面白かったです。
また、この手のツールは開発環境を整えるのがメンドーだったりしますが、それもなく簡易にできた事も良い点だと思いました。
今回はブラウザ操作だけで終わってしまいましたが、OFFICEやメーラーとも連携させる事も出来るようなので、今後も自動化できる作業を頭を使いながらツールを利用してムダな作業を減らしていきたいと思います。
#参考サイト
https://valmore.work/setup-sikulix-2-0-4/
【Rails】ActiveRecordで合計(sum)した列に列名(AS句)をつけたい【GROUP BY】

# はじめに
久々にRailsを弄っているがちょっと詰まったので。

# 環境
Ruby 2.6.6
Rails 6.0.4.1
MySQL 14.14

# やりたかったこと
適当な例として、商品名,販売価格,販売日を持つ売上テーブルがある。
中身はこんな感じ。

```markdown:売上テーブル中身
select name,money,date from sales;

えんぴつ,300,2021-11-01
消しゴム,100,2021-11-01
ボールペン,400,2021-11-03
A4用紙,500,2021-11-03
ものさし,400,2021-11-03
万年筆,8000,2021-11-04
替え芯,500,2021-11-04
```

これを販売日ごとに売上金を合計(sum)して、その集計した列に名前をAS句で別名をつけたかった。

普通にActiveRecordで集計すると列名に応じて自動で集計列が命名される。

```ruby:日付ごとに売上金を集計するActiveRecord
@sale = Sale.select("date").group("date").sum("money")
```


```sql:実際に発行されるSQL
  SELECT SUM(`sales`.`money`) AS sum_money, 
         `sales`.`date`       AS sales_date 
    FROM `sales` 
GROUP BY `sales`.`date`
```

このASとなっている所を手動で設定したかったが、中々上手くいかなかった。

# 結論
調べてみたらselectメソッドにそのままSQL文を書くらしい。ええ・・・

```ruby:日付ごとに売上金を集計するActiveRecord(AS句で列名を指定)
@sale = Sale.select("sum(money) as total_money, date").group("date")
```

```sql:実際に発行されるSQL
  SELECT SUM(`sales`.`money`) AS total_money, 
         `sales`.`date`
    FROM `sales` 
GROUP BY `sales`.`date`
```

CASE文とかも同様の方法で使えるらしい。

# おわりに
railsはなるべく素のSQL文を書かないようにしていたのでちょっと違和感。

# 参考
https://railsguides.jp/active_record_querying.html
Power QueryのM言語でテーブルから行番号と列名を使って値を取得する

テーブルから値を取得する方法。

以下のとおり。

```PowerQuery:テーブル→リスト（列）→値
let
    table = どこかで作ったテーブル
    list = table[column],  //`column`は列名で、日本語だろうが、間にスペースがあろうが、ダブルクォーテーションで囲う必要はない
    value = list{#}        //`#`は行番号で、0から始まる数字（プレビューは1からなのでずれる）
in
    value
```

```PowerQuery:テーブル→レコード（行）→値
let
    table = どこかで作ったテーブル
    record = table{#},        //`#`は同上
    value = record[column] //`column`は同上
in
    value
```

図で書くとこんな感じ:

```math
\begin{matrix}
     &    &  \begin{matrix}テーブル\\ table \end{matrix}  & & \\
     & {\LARGE ↙} & & {\LARGE ↘} & \\
    \begin{matrix}リスト\\ table[column] \end{matrix} & & & &     \begin{matrix}レコード\\ table\{\#\} \end{matrix}\\
    & {\LARGE ↘} & & {\LARGE ↙} &\\
    & &\begin{matrix}値\\ table[column]\{\#\}\\ table\{\#\}[column] \end{matrix} & &\\
\end{matrix}
```

また、ある列に関する条件が合致する行がひとつの場合は以下で行を取得可能:

```PowerQuery:テーブル->行
let
    table = どこかで作ったテーブル
    record = table{[column1="ある値1", column2="ある値2"]}
in
    record
```
【Ruby】「A && B && C」のリファクタリング


https://medium.com/@bennet.preimess/write-better-code-by-using-patterns-b850c301f27

でこんなリファクタリングの仕方ができると知ったので、
Rubyで書き換えてみた。


##JS
**before**

```javascript
if (card == "valid" && tries <= 3 && balance <= 3000) {
    withdrawMoney();
}
```

**after**

```javascript
function canGetMoney() {
    if (card != "valid") return false;
    if (tries > 3) return false;
    if (balance > 3000) return false;
    return true;
}
if (canGetMoney()) {
    withdrawMoney();
}
```

##Ruby

**before**

```ruby
if card == "valid" && tries <= 3 && balance <= 3000
   withdraw_money
end
```

**after**

```ruby
def can_get_money
  return false if card != "valid"
  return false if tries > 3
  return false if balance > 3000
  true
end

withdraw_money if can_get_money
```
コンソールアプリケーションだけどTkinterのダイアログを使う

# このわがままさんめ。でも出来るよ、Tkinterならね。

画面用意するほどじゃないんだけどファイルパスを手打ちなんてしたくないし規定の場所なんてものを作って動かしたりしてるとそのうち何をどうやって動かしていいのかわからなくなったりしてその度にいちいちコード読み返さなきゃいけなくなったりで大変。

処理自体はコンソールでいいんだけどファイルを選ぶのだけはダイアログを使いたい。

そういったケースが結構多いのでそのやり方について。（ダウンロードしてきたCSVを処理したいとかね、いつもファイル名とか場所がころころ変わるとかね）

## どうやっても出てくるメインウィンドウを何とかする

Tkinterを初期化すれば必ずメインウィンドウが出てきます。<br>
出てくるものは仕方が無いので最小化して隠します。<br>
隠したうえでダイアログを開くのですが、コンソール画面の裏側にダイアログが出ると軽くパニックになります。下手をするとスクリプトを強制終了されかねない。<br>
なので最前面に出てくるように指定をします。

*ウィンドウを最小化する*

```python
root.state("iconic")
```

*最前面に表示する*

```python
root.wm_attributes("-topmost", True)
```

後はダイアログを開いて、ファイルが選択されるなりダイアログが閉じられたタイミングでメインウィンドウを終了して、取得パスを返してやります。

なんだかほんのりダーティー風味な感じもしますけれどもこれで大丈夫！

もしも気に食わんって場合はデータクラスに保存してやる等すれば良いかと思いますよ。

## コード

```python
import tkinter as tk
import tkinter.filedialog as filedialog

# ファイル選択するためだけのクラス
class DirectDialog:
    def __init__(self, root, kw={}, **kwargs):
        root.wm_attributes("-topmost", True)
        root.state("iconic")
        self.root = root

    def ascFile(self, **kwargs):
        path = filedialog.askopenfilename(**kwargs)
        self.root.destroy()
        return path


# 呼び出し用ファンクション
def ascFile(**kwargs):
    root = tk.Tk()
    dd = DirectDialog(root)
    filepath = dd.ascFile(**kwargs)
    root.mainloop()
    return filepath


if __name__ == "__main__":
    print("普通のコンソールアプリケーション")
    print("ファイルの選択をGUIで行いたい")
    print("テキストファイルを選んでね")

    # ここでファイルを選びたいのでファンクションを呼び出す。
    # パラメータはaskopenfilenameのものがすべて適用可能（と思う）
    filepath = ascFile(title="ファイル選択してね", filetype=[("テキストファイル", "*.txt")])

    # ファイルが選ばれなかった場合 "" が返るのでチェックする。
    if filepath != "":
        print("選んだファイルはコレですね", filepath)
    else:
        print("ファイル選択してくれないのね")
```

さて、どうでしょうか。<br>
便利な人には便利ですね！

わたしにも無茶苦茶便利です。みんなでニコニコ楽々業務です。

さあ、どんどん手を抜いていこう。
では良き楽々素敵なPythonライフを！
railsアプリの新規作成〜TOPページの作成

###環境
cloud9
Ruby２.６.３

###※rubyのバージョン確認方法
```
$ ruby -v
```

#この記事の目標
ruby on rails で新規アプリケーションを作成し、TOPページまで作成する


#１　アプリケーションの新規作成

newコマンドで新規作成

``` 
$ rails new アプリケーション名
```

カレントディレクトリを新規作成したアプリケーションフォルダに移動

```
$ cd アプリケーション名
```
ブラウザを起動して下記画像が出ていれば新規アプリケーションの作成に成功

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309717/d1f372fb-6e40-4c2d-ce1e-30f413f8e069.png" width="50%">

#２コントローラー作成

トップページ用にコントローラを作成します。
コントロー名は必ず複数形にします。（例　◯homes ×home)

```
rails g controller コントローラー名
```

#3作成したコントローラーにアクションを作成

トップページ用アクションを記述します。

```ruby:コントローラ名.controller.rb
def top
end
```

#4ビューファイルの作成
アクションに対応するビューファイルを作成します。
viewフォルダの下に「アクション名.html.erb」フォルダを作成しブラウザに表示する内容を記述

```html:アクション名(上記の場合top).html.erb
<h1>ここはトップページです。<h1>
```

ruby on railsではブラウザにどのビューを呼び出すか、コントローラーのアクションで判断します。
上記の場合はtopアクションに対しtop.html.erbが結びついてブラウザに呼び出されます。
※この段階ではブラウザで呼び出してもまだ表示できません。

#5ルーティングの設定
４で作成したビューファイルを呼び出すにはルーティングでコントローラを呼び出す必要があります。
　ルーティング→コントローラ→ビュー

```ruby:config/routes.rb
get 'アクション名' => 'コントローラ名#アクション名'

#ルートパスの場合
root to:'コントローラ名#アクション名'
```

ブラウザで呼び出す際
・「/アクション名」 
・ルートパスの場合「/」
を指定して呼び出しましょう。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2309717/be99e045-4c41-1fcf-53c8-e55000dbec14.png" width="50%">

ビューに記述した内容がブラウザで表示できていれば完成！
単体テストのススメ

###  はじめに
テストケースを作ったことがない、「単体テストやった？どういう観点で？」と聞かれてハッキリ答えられない、そんな人が周りに増えてきたので覚え書き程度で書いていきます。

###  単体テストとは
コーディングしたプログラムが正常に動作するのかを確認するためにあるテストのことです。
実装する機能についてロジックミスがないかどうかを条件分岐ごとに調整することで、問題なく機能するかを確認します。

テストは単体テストだけではなく、他に結合テスト、総合テストがあります。
* 結合テスト:他の機能や他サービスと連携・連動が正しく出来るか
* 総合テスト:システム全体を適して想定する要件を満たしているか

これらは単体テストとは目的や観点が異なりますが、単体テスト同様サービスの開発においては非常に重要な役割を担います。

### Webサイト・アプリなどの画面における単体テストの作り方
基本的にサービスに対して、画面設計書をもとにチェックすべきことを網羅しながらテストケースを作成していきます。
下図は画面設計書の例です。

私が、画面における単体テストのテストケースを作成する際に気を付けている点は主に以下のことになります。
1. 画面仕様
2. バリデーションチェック
3. インプット・アウトプット

単体テストには上の３つの観点で考える画面上のテストとは別に
サーバサイドにおけるAPIの動作のテストも重要です。
APIのテストについては次回説明したいと思います。

#### 1.　画面仕様
要件通りに動作・レイアウト出来ているかを確認するテストケースです。
例えば設計書通りにアイコンやテキスト、数値をはじめとする画面アイテムが配置されているか、
そのフォーマットが一致しているかなどを確認します。
画面アイテムに関しては大きく分けて、4つのチェック観点があると思います。

・レイアウト
・形式
・アクション
・エラー

* レイアウト
設計書と見比べて、アイコン画像やヘッダ画像がレイアウトの指示通りか、ズレや不具合がないかを確認します。
また、画面アイテムの文言が一致しているか、初期値が設計書と同じになっているか確認します。
上図においてテスト結果としてはNG、修正が必要と言えます。

* 形式
使用する画面アイテムの形式が設計通りになっているかを確認します。
画面表示項目の形式(日付であればYYY/MM/DDなのか、YY年MM月DD日なのか)が設計書通りであるかを確認します。

* アクション
画面アイテム上のボタンなどからの遷移やソート、ダイアログ・モーダル表示が正しいかを確認します。
また、Ajaxなどを利用している場合は、アクション時に動的処理を実施できているかの確認も忘れないようにしましょう。

* エラー
エラー発生時の動作チェックに関しては、アクションでのチェック観点と類似します。
まず、エラーが発生した時の画面やモーダル、エラーコード、エラーメッセージが設計書通りになっているか。
同時に、エラーが発生した時、ユーザに次の操作の誘導や回避方法などが示されていることや、
「エラー発生時に再操作ができない」、「画面が閉じられない」などのデッドロック状態にならないことも確認してください。

#### 2. バリデーションチェック
入力欄などに対する入力内容や記述内容が要件を満たしているか、妥当性を確認することを指します。
バリデーションチェックはアプリケーションの想定しない誤入力を避け、脆弱性を補完するために必要な要素です。
特に入力フォームなどで、悪意のある人間からの攻撃を防ぐことに大きな意味合いがあります。

バリデーションチェックにもいくつか種類があり、未入力チェック、文字列長チェック、型チェックなどがあります。
単体テストでは主に以下のバリデーションについて確認します。
　1. 数値、文字列の長さが適切であるか
　2. 日付や日時が想定した形式(YY/MM/DDなのか、西暦・和暦なのか等)であるか
　3. 最小・最大、また想定した範囲での数値が選択されているか
　4. 検索形式(前方一致、全文一致)が、設計通りになっているか
　5. 入力値の過不足に対して、補完・エラーが発生する仕様になっているか
その他、サービスや要件、端末やブラウザごとにテストをする必要があります。

#### 3. インプット・アウトプット
インプット ・アウトプットの形式が設計書の指定の形式になっているか確認します。
インプットであれば、フォームにおけるユーザ入力、選択アクション、
ファイルのインポート、カメラの起動による写真等設計書の想定通りであるかを確認します。
アウトプットであれば、画面表示・遷移・モーダル・ダイアログ表示、
データの抽出の際の形式(CSV,TSV,TXTなど)が想定通りであるかを確認します。
また、この際インプット・アウトプット両者において
ファイルの項目名や項目名の定義が一致しているかを確認することも行います。

### 単体テストケース作成の為のチェックシート導入
私は以上のようなことに気を付けながら、
アプリケーションやサービスをチェックする単体テストを作成しています。
単体テストを作る経験を積む中で共通する項目などをまとめ、チェックシートを作りました。
![2021y12m09d_185303050.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/975583/2cc6f4eb-4b33-0e1b-6a5d-d6284195b43f.jpeg)

上図は私が、テストケースを作成する際に注意する点を項目ごとにまとめたチェックシートです。
このようなチェックシートがあることで、作成時見落としを減らせる上、
経験を積んでいない人にもある程度大枠でテストケースの注意点を共有できます。

### おわりに
単体テストにおいてテスターが共通認識をもつことは、手動テスト・自動テストどちらでも重要です。
チェックシートの作成やテスト対象の論理的・網羅的理解はその手段と言えます。
また質の高いテストケースを作ることがテストにおいて無駄をなくすことに繋がり、
サービスの品質の担保にも繋がります。

その一方で、単体テストの実施を自動でするか手動でするかの選択については、テスト設計者や実装者が判断します。
コストや期限などの状況、リソースの状態に応じて決定されるため、
単体テストを自動化する場合は、別の注意点や観点が必要になります。。
次回はAPIのテストとともに、この自動化についても説明できればと思います。
matplotlibの様々な方法に関する本とその切り抜き

表題のとおりです．

書籍は全て英語ですが，無料で[公開](https://github.com/rougier/scientific-visualization-book)されています．

また，個人的な切り抜きが以下になります．
1. [個人のお気に入り (9 pages)](https://drive.google.com/file/d/1Xd7Ga9oXIxvohkGzCkuw0-yJBwBcSVL3/view?usp=sharing)
2. [MatplotlibのQuick start (8 pages)](https://drive.google.com/file/d/1YCwKnkWX0k-PwakVcU3pjuufI_cGQCN2/view?usp=sharing)

個人のお気に入りに存在するFigureの作成方法は以下を参考にしてください．
1. [Figure 2.7](https://github.com/rougier/scientific-visualization-book/blob/master/code/coordinates/transforms-hist.py)
2. [Figure 5.2](https://github.com/rougier/scientific-visualization-book/blob/master/code/colors/color-wheel.py)
3. [Figure 6.3](https://github.com/rougier/scientific-visualization-book/blob/master/code/rules/rule-3.py)
4. [Figure 8.10](https://github.com/rougier/scientific-visualization-book/blob/master/code/layout/standard-layout-2.py)
5. [Figure 9.1](https://github.com/rougier/scientific-visualization-book/blob/master/code/ornaments/bessel-functions.py)
6. [Figure 9.8](https://github.com/rougier/scientific-visualization-book/blob/master/code/ornaments/annotation-zoom.py)

特に色の分布に関しては有用なのでここに掲載しておきます．
![color-wheel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355593/e420e305-b5dd-3286-f9a9-9f99fdc4d4e1.png)
Elixirでobserver.start() したときにエラーが出たので対応した時の話(wxWidgets 3.1.5の時

## 始めに
皆さん、ErlangのObserverを使用されていますか！
私は好きでよく見たり、検証の時などは開いてみたりしてチェックしたりと好きで使っています。
今回は`observer.start()`してエラーが出たときの対処をしたのですが日本語の記事は検索能力が低かったのか見つからなかったので記載していこうと思います

## 環境
macOS Catalina
wxWidgets 3.1.5

## ERROR: Could not find 'wxe_driver.so' のエラーが出る
`iex`を起動して`observer.start()`をしてみたところ下記のようなエラーが出力されました。

```
{:error,
 {{:load_driver, 'No driver found'},
  [
    {:wxe_server, :start, 1, [file: 'wxe_server.erl', line: 65]},
    {:wx, :new, 1, [file: 'wx.erl', line: 115]},
    {:observer_wx, :init, 1, [file: 'observer_wx.erl', line: 107]},
    {:wx_object, :init_it, 6, [file: 'wx_object.erl', line: 404]},
    {:proc_lib, :init_p_do_apply, 3, [file: 'proc_lib.erl', line: 226]}
  ]}}
```
検索すると[こちらの記事](https://qiita.com/zumin/items/49d8f623573b97987389)のように出てきます。
あまり使わない環境なので入れてなかったか、ごめんなさいと思いながら  `brew install wxwidgets`を実行し、asdf で Erlangを入れ直しました。


## それでも止まらぬエラー
入れ直しましたが、それでもエラーの結果は変わりません。
なんでだろうなーっと思いながらErlangのインストール時のログを読んでみると下記のように記載されていました

```
 * wx             : wxWidgets was not compiled with --enable-compat28, wx will NOT be useable
 * Can not link the wx driver, wx will NOT be useable
```

`--enable-compat28 ` のオプションが指定されていないと使用できないようなのでオプション指定する必要がありそうです。
[asdf-erlangのIssue](https://github.com/asdf-vm/asdf-erlang/issues/95#issuecomment-499455885)に、`brew edit`でwxWidgetsのインストール時のargsを書き換えて、`--enable-compat28`のオプションを追加すればイケるっという記載があります。
これで勝ったな！っと思い実行していきます。

## それでもエラーは変わらない
実際に `--enable-compat28` を追加して`brew install`をし直しますが、それでもエラーは変わりません。
なんなら、`wxWidgets was not compiled with --enable-compat28, wx will NOT be useable` の表示も消えません。
そんなことある！？っと思いながら、なんでだろうななんでだろうなーっと思っていたら、[ElixirForumに答え](https://elixirforum.com/t/observer-start-broken-after-updating-wxwidgets/36983/3)は載っておりました

```
brew upgrade wxmac --build-from-source
```

どうやら、オプションで明示的にソースからビルドしようねっという指定が必要のようです。
実際に私が実行したコマンドは`brew reinstall wxmac --build-from-source`でしたが、こちらで問題なく`observer.start()`できるようになりました。
`wxwidgets`と`wxmac`の違いは名前指定の指定ぐらいなのでここでは気にする必要はありません。

## 結論
ElixirForum は本当に参考になるので毎回ありがとうございます！！
EPSONのメールプリントで設定可能な情報

# 困ったこと
<!-- 発端や概要を記載 -->
私はスマホから情報を登録すれば、封筒の宛名を全自動でプリントしてくれるシステムの開発に着手している者です。

・自宅のプリンターでネットワーク越しからファイルを印刷したい！
・Google クラウドプリントっての便利そうだけどサービス終了してる！
・プリンター各社が出している機能の「メールプリント」機能を使えば自宅外からでも印刷ができそう。（GASで印刷自動化も夢じゃない...）
・封筒を印刷したいんだけど、プリント設定ってどこまで調整できるの？？
上記の疑問に直面したが調べても見つからなかったので実際にメールプリント対応機種を購入してみました。


<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 結論
__工夫しないと、封筒は印刷できなさそう！__
To be continue...

・ログインURL
https://www.epsonconnect.com/user/


・メニュー画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623093/077663f1-c4c4-bcb0-8198-2e6ea8b496b5.png)

・プリント設定画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623093/9c94705b-8c7c-98af-6dce-ebe324b9e5b8.png)

文書用紙サイズの選択肢
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623093/4cef5368-f0dc-9c40-6aec-71d8ff00aec1.png)

写真用紙サイズの選択肢
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623093/6f88055b-0c3a-e965-23c8-1dcd664f3f3f.png)

# Tips
・グレースケール印刷
@print.epsonconnect.comの前に「=+bk」を挿入する
例：「******=+bk@print.epsonconnect.com」

・メールプリント対応拡張子
Microsoft Word（doc, docx）
Microsoft Excel（xls, xlsx）
Microsoft PowerPoint（ppt, pptx）
PDF
JPEG
BMP
GIF
PNG
TIFF


<a id="#Chapter2"></a>
# プリンター選定
__EPSON一択！__
最もコスパが高いのは「EW-052A」　約8800円~1万円(※2021年12月調べ)

選定理由は以下。
各社で機能名が異なるが「メールプリント」機能を備えたプリンターを探しました。
プリンターの選定基準は、”安くてメールプリント 機能が使える”もの＝コスパ

[EPSON 対応機種一覧](https://faq2.epson.jp/web/Detail.aspx?id=50064)
[Brother 対応機種一覧](https://faq.brother.co.jp/app/answers/detail/a_id/13166/~/%E3%80%90%E3%82%A4%E3%83%B3%E3%82%AF%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88-%E3%83%97%E3%83%AA%E3%83%B3%E3%82%BF%E3%83%BC%E3%80%91e%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%97%E3%83%AA%E3%83%B3%E3%83%88%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
[HP 対応機種について](https://jp.ext.hp.com/printers/personal/inkjet/app/eprint/)※1
[Canon 対応機種について](https://cweb.canon.jp/e-support/products/mp/170612mailprintend.html)※2


※1 HPの「メールプリント」対応機種は各種製品の仕様を自分で確認して探さないといけないようなので却下
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623093/8c568112-a2cc-1c5f-9eb9-fb5da2584e1a.png)
[引用](https://jp.ext.hp.com/printers/personal/inkjet/app/eprint/)

※2 Canonのメールプリントサービスはすでに終了しているようだ。
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623093/09f612f8-cf8e-3459-3557-4d10f2f5abd4.png)[引用](https://cweb.canon.jp/e-support/products/mp/170612mailprintend.html)



他にも候補があるかもしれないが、EPSONとBrotherにターゲットを絞りました。
Brotherの対応機種を調べてみると2019年以降の製品しか見つからない。さらに、プリンターごとにメールプリント機能を利用するための設定方法が異なるみたいでした。対してEPSONは2012年くらい？の製品からメールプリントに対応した機種を出しており、メールプリント設定もどの機種を購入してもEpson connectというサービスで同じように設定できるという点で、EPSON一択となりました。

さらに、「メールプリント」対応機種ごとにAmazonで価格を調査した結果、「EW-052A」という機種が、メールプリントに対応しており、比較的最近製造されている、価格としても最低8800円と1万円を切る程度(※2021年12月調べ)でした。

私が実際に購入したものは、中古で「EP-881　AB」(元値3万円?)が安く売っていたのでそちらを購入しました。


# 参考
https://www.epsonconnect.com/faq/ja/
【Jbuilder】ハッシュはarray!が使えない


- ```@user_infos```がハッシュの場合、

```json
@user_infos =
{
  "name": "kato",
  "age": 20,
  "birthday": "2001/1/1"
}
```


```ruby
json.name @user_infos[:name]
json.age @user_infos[:age]
json.birthday @user_infos[:birthday]
```

JSONレスポンス

```json
{
  "name": "kato",
  "age": 20,
  "birthday": "2001/1/1"
}
```

- ```@user_infos```が配列のときみたいに```array!```でやってみたができなかった。
- ```array!```でやって部分テンプレートを使いたかったけどハッシュの場合はそういうのできないのかな...
Tensorによる音声認識の精度は本当に高い？Web Speech APIと比較してみた


# はじめに

新しく生まれ変わった。Google Pixel 6。
Google 初のプロセッサー「Google Tensor」を搭載。
このTensorを用いて可能なことの一つに、高精度な音声認識があげられます。

この音声認識の精度はどれくらい高いのか、検証してみました。
比較対象は、[Web Speech APIを用いて実装した音声認識できるWebページ](https://itanium-r.github.io/retranser/)を他のAndroid端末でGoogle Chromeを用いて開いたものです。

# Web Speech APIとは
## 概要
Web Speech API は、Webアプリで音声データを扱い、音声認識や音声合成を可能にする機能です。
ただし、試験的な機能であり、使用できるブラウザが限られています。

参考：

https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

Google Chromeでこの機能を用いる場合、サーバーベースの認識エンジンを用いるようです。Googleのサーバで処理されるものだと見られるので、Google音声入力などの類似サービスと同様の認識精度であると考えられます。

参考：

https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API

## デモ

Google Chromeなど、Web Speech APIを利用可能なブラウザの開発者モードのコンソールにて、以下のコードを実行すると、発話内容をAlert表示してくれます。

```js
const recognition = new webkitSpeechRecognition();
recognition.onresult = function(event){
  if(event.results.length > 0){
    alert(event.results[0][0].transcript);
  }
  recognition.stop();
}

recognition.start();
```

# 比較
## 用いた端末
今回の比較は、以下の２台で行いました
- OPPO A73 (Web Speech API on Chromeにて音声認識、左)
- Google Pixel 6 Pro (レコーダーアプリにて音声認識、右)
![DSC_0001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450462/377adde2-6e7b-4350-60bc-bd8df935a2e6.jpeg)
端末を２台並べ、スピーカーからの音声ないし私が発話した音声を音声認識させて比較しました。

それでは、検証結果を以下に記していきます。
誤認識を太字で示しています(誤変換を除く)。


## 英語(？)編

### 原音声の発話内容
Please change here for the Saikyo line, the Shonan Shinjuku line, and the Tokyo Rinkai Kosoku Tetsudo Rinkai line.

### Web Speech APIによる音声認識
please change here for the **cycle** like the **show not show up in** line and the Tokyo **rig**

### Tensorによる音声認識
Please change here for the **cycle** line, the **Shona** Shinjuku line, and the Tokyo Rinkai kosokutinto **Rican** line.

### 評価
英語とそれに紛れ込む英語話者の話す日本の路線名という、機械には認識しづらそうなこちらの車内放送音声。YouTubeにあった録音音声をスピーカーで流し、そちらを音声認識させました。
双方、やはり日本の路線名を英語話者が話す部分について苦戦していました。埼京線はサイクル線と認識されました。東京臨海高速鉄道りんかい線についてはWeb Speech APIは歯が立たず、Tensorはおしい、といった感じでした。湘南新宿ラインについてはTensorの圧勝でした。
全体的には、Web Speech APIでは訳のわからない認識結果でしたが、Tensorはある程度は伝わる認識結果となり、精度の高さが見受けられました。


## 日本語 アニメのワンシーン編

### 原音声の発話内容
「千尋というのかい？」
「はい。」
「贅沢な名だね。」
「今からお前の名前は千だ。いいかい、千だよ。分かったら返事をするんだ、千！」
（『千と千尋の神隠し（スタジオジブリ）』より）

### Web Speech APIによる音声認識
ちひろというの会ハイ贅沢な名だね今からお前の名はせんだいい回線だよ分かったら返事をするんだ線

### Tensorによる音声認識
千尋というのかいはい贅沢ななだね。今からお前の名は千だいい回線だよ。わかったら返事をするんだ。千。

### 評価
こちらは今作品の音声をそのまま聴かせる場合はBGMが大きいからかうまくいかなかったため、私が読み上げたも音声を使用し検証しました。
双方、ひらがなに直すとミスなしでした。漢字への誤変換などが見受けられますが、この点もTensorの方が誤りが少なく優秀だということがわかりました。


## 日本語 YouTube LiVEのワンシーン編

### 原音声の発話内容
本日、ソライロリポートを送りましたか？　送った、送っていない、この後送るから、お選びください。
（『ウェザーニュースLiVE（2021/11/16放送分）』より）

### Web Speech APIによる音声認識
**分か**りましたか**分か**った送っていないこの後お**風呂**からお選びください

### Tensorによる音声認識
本日、空色**リゾ**ートを送りましたか？送った送っていない。この後送るからお選びください。

### 評価
YouTube LiVEで放送された音声をスピーカーから流し、そちらを音声認識させて検証しました。
今回、Web Speech APIは散々な結果に。対してTensorはほぼ完璧に認識できていました。
Tensorのすごいところが、「送りましたか？」という問いかけ（実際の音声では語尾が上がっている）に対してしっかり「？」をつけているところ。疑問や問いかけまでも認識できてしまう、さすがGoogleの最新技術が詰まっているだけあるな、と感心しました。

# おわりに
Tensorの優秀さを確認できたところで、筆を置かせていただきます。
この精度なら、会議の議事録作成機としても十分使えそうですね。

音声認識以外も、すごい機能のつまったPixel 6シリーズ。
まだ持ってない方は、是非お買い求めになることを強くお勧めします。
【LeetCode】アルゴリズム体操 1154. Day of the Year

# <a href="https://leetcode.com/problems/day-of-the-year/">LeetCode - Day of the Year</a>

#### 問題文
>Given a string date representing a Gregorian calendar date formatted as YYYY-MM-DD, return the day number of the year.


#### だいたいの日本語訳
引数：`String date`
戻り値：int型の日数

「YYYY-MM-DD」の形でString型の日付を渡すから、その年の何日目かを計算しておくれやす。

## 解答
```java:Solution.java
class Solution {
    public int dayOfYear(String date) {
        int[] days = {0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31};
        int year = Integer.parseInt(date.substring(0, 4));
        int month = Integer.parseInt(date.substring(5, 7));
        int day = Integer.parseInt(date.substring(8, 10));
        // うるう年かつ3月以降の場合：1、その他：0
        int ans = year % 4 == 0 && month > 2 ? 1 : 0;
        
        for (int i = 0; i < month; i++) {
            ans += days[i];
        }
        
        ans += day;
        return ans;
    }
}
```
## 実行結果
|Title   |RunTime |Memory   |
|--------|--------|---------|
|解答    |8ms     |39.5MB   |

## ひとこと
うるう年は4年ごと！かつ3月以降なのを忘れずに！うるう年と聞くと「流星の絆」を思い出します。
【統計・幾何分布】ポケモンカードパックVMAXクライマックスの最高レアリティを全種集めるには119万円かかる

# やりたいこと
現在発売されているポケモンカードパックには一定の確率で各レアリティのカードが封入されている。
筆者の調査では1箱の当たり枠の封入率はこんな感じらしい

|CHR|SR|CSR|UR|
|---|--|---|--|
|100%|50%|100%|10%|

参考
https://twitter.com/pokecachan/status/1466527343904583681?s=20

最高レアリティのURのカードは10BOX買って一枚当たる程度らしい。
URの中でも人気の高いピカチュウVMAXはこんな感じ。
![1ac3a950bba440008dbe6d760fc835a7.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2337375/15df0056-31b5-d51e-f17a-dc1f9e60a61d.jpeg)
ゴージャスですね。VMAXクライマックスにはURのカードが8種類収録されているようです。


本記事では全てのURを収集するにはBOXを何箱買えばいいのか統計を用いて考えてみる。

金に物を言わせて全部当たるまで大量買いしてもサンプル数1の結果しか得られないが、確率を使って計算することでもう少し賢く検証できるはず。
全てのURを入手するまでに開けるBOXの数はもちろん運次第だが目安の数は統計的に期待値として得ることができる。

# 方法

k種類のURカードを獲得した時点からk+1種類目のURカードを獲得するまでに開封するBOXの数は幾何分布に従う。

#### 幾何分布とは
成功確率p(0<p<1)の独立なベルヌーイ試行を繰り返した時、初めて成功するまでの失敗回数Xが従う確率分布。

```math 
P(X=x)=p(1-p)^{x}
```
幾何分布の期待値は確率母関数を用いて求めることができる。
幾何分布の確率母関数は

```math 
\begin{align}
G(s) &= E[s^{X}]\\
&=\sum_{x=0}^{\infty}s^{x}p(1-p)^{x}\\
&=\frac{p}{1-(1-p)s}\\
\end{align}
```
確率母関数のs微分は、

```math 
G'(s)= \frac{p(1-p)}{\{1-(1-p)s\}^2}
```
ここで

```math
G'(s) = E[Xs^{X}]
```
であるので、

```math 
E[X] = G'(1) = \frac{1-p}{p}
```

として期待値が得られる。つまりk種類目がでてからk+1種類目がでるまでに開けるBOX数は

```math 
E[X]+1 = \frac{1}{p}
```

さらにk種類のURを持っている時、次に開けるBOXに未入手のURが封入されている確率pは

```math 
p=\frac{10}{100} \times \frac{8-k}{8}
```
と表される。

以上より全8種のURを集めるまでに開封するBOX数の期待値は

```math 
\sum_{k=0}^{7}E[X_k] = \sum_{k=0}^{7}\frac{1}{p} = \sum_{k=0}^{7}\frac{1}{\frac{10}{100} \times \frac{8-k}{8}} \simeq 217
```
# 結論
全てのURを集めるためにはだいたい217BOXくらい買う必要がある。
1BOXあたり定価で5500円なので
金額にして**約119万円**ほどかかりそうだ。

# おわりに
よかったらLGTM、ストックよろしくお願いいたします。モチベが上がります
新しい記事を出す際などはツイッターでも通知しますのでよかったら下記からフォローお願いいたします。
https://twitter.com/JuFi969696
[OIDC] GitHub ActionsでGCPにTerraformを使ってデプロイする際はバージョンに注意

OpenID Connect (OIDC) の設定をしているときにハマったので掲載。

Terraformを使ってGoogle CloudリソースのデプロイをしているGitHub Actionsの設定ファイルに、OIDCを使って認証情報を取得しようとした際にこのようなエラーが出た。

```bash
Error: google: error getting credentials using GOOGLE_APPLICATION_CREDENTIALS
environment variable: unknown credential type: "external_account"
```

解決策：terraform-provider-googleのバージョンを3.61.0以上に上げる必要があった。

```terraform
terraform {
  required_providers {
    google = {
      source  = "hashicorp/google"
      version = "~> 3.61.0"
    }
  }
}
```

https://cloud.google.com/iam/docs/using-workload-identity-federation#terraform
AutifyのJSステップを書いてみる

本記事は[ベリサーブ Advent Calendar 2021のカレンダー | Advent Calendar 2021 - Qiita](https://qiita.com/advent-calendar/2021/veriserve)の8日目です。

前日は@Toru-ymgc さんの[UI Automation PowerShell ExtensionsとPesterを使って、電卓アプリのテストを自動化してみた]
(https://qiita.com/Toru-ymgc/items/701b734a5e53831a1a5b)でした。

今日はAutifyのJSステップとデータパターンを組み合わせてテストを作ってみたので、その方法をご紹介します。
Autifyはコーディング未経験者でも簡単にテストが作れますが、かゆいところに手を届かせようとするとJSステップを用いるのが良さそうです。
といっても、私はJSはほぼ未経験なので、とても簡単なテストになっています。
もっとこう書いたほうがいいよ、などがあればぜひ教えてください。

# はじめに

## 環境について
Autifyを使用するには下記を準備する必要があります。

- Autifyのユーザー
- Google Chromeと拡張機能「Autify Recorder」

これらについては公式ページが詳しく書いていますので、[ユーザー登録と環境セットアップ](https://autify.zendesk.com/hc/ja/articles/900003243946-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E7%99%BB%E9%8C%B2%E3%81%A8%E7%92%B0%E5%A2%83%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)をご確認いただくのが良いと思います。

また今回のテスト対象は[HOTEL PLANISPHERE](https://hotel.testplanisphere.dev/ja/)を使わせていただきます。
HOTEL PLANISPHEREはホテル予約サイトで、予約画面は下記になっています。
![Autify_テスト対象画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121319/1554a307-bc66-a565-d249-028f9b31c213.png)



## 実装するテストケースとデータ

下記はざっくりした手順です。

1. お得な特典付きプランのこのプランで予約を押下する
2. 宿泊日を設定
3. 宿泊日数を設定
4. 人数を設定
5. **朝食バイキングを選択する/しない**
6. 名前を入力
7. **確認の連絡を選択し、選択によっては連絡先を入力**
8. 予約内容を確認するを押下する
9. 合計金額が入力項目に沿っているかを確認する

データは下記を準備しました。
![Autify_データ登録.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121319/34baa01c-b437-81bd-175d-ff975bfeb183.png)


Autifyでのテストの実装やデータの登録については以前[Autifyでテスト自動化を試してみる](https://qiita.com/YamaAri/items/3f43ef80d5b32152c43d)で記載しましたので、不明な方はそちらをご参照ください。

今回は太字の部分をJSで実装していきます。
シナリオ全体はだいたいこんな感じになります。
![Autify_テストケース全体.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121319/eda10487-03f8-4930-ead4-5933de7d68c8.png)



# 実装

## 朝食バイキングを選択する/しない

データの朝食がありなら、追加プランの朝食バイキングにチェックを入れる。
（データの朝食がなしなら、なにもしない）

```朝食.js
function(morning){
  /* 要素の取得 */
  var element  = document.getElementById('breakfast');

  /* データと値を比較して、一致すればチェック入れる */
  if (morning == "あり"){
    element.click();
  }
}
```

morningという引数にはデータの朝食から値をとってくるように設定をしています。
Autify上の画面だと下記のようになります。

![Autify_朝食.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121319/d23aaff0-ed69-15e0-956c-e2d8f928d822.png)



## 確認の連絡を選択し、選択によっては連絡先を入力


```確認.js
function(select_contact, adress, tell){
  /* 各要素の取得 */
  var contact  = document.getElementById('contact');
  var email = document.getElementById('email');
  var phonenumber = document.getElementById('tel');


  /* データとってきて、値と一致すればその値をプルダウンに入れる *
  * 電話番号やメールアドレスを入力 */
  if (select_contact == "希望しない"){
    contact.options[1].selected = true;
  }else if(select_contact == "メールでのご連絡"){
    contact.options[2].selected = true;
    email.value = adress;
  }else if(select_contact == "電話でのご連絡"){
    contact.options[3].selected = true;
    phonenumber.value = tell;
  }
}
```

select_contactにはデータの連絡から、addressにはデータのメールアドレスから、tellにはデータの電話番号から、値をとってくるように設定をしています。
Autify上の画面だと下記のようになります。
![Autify_プルダウン.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/121319/1b84ea1d-5af4-5b27-4d18-afe4ecda8da2.png)

以上でテストを回せばパスするはずです！
Ubuntu 20.04.1 LTS に LAMP環境を構築する

# OSを最新に
参考サイト

https://qiita.com/masoo/items/8ebc51a6a9f32417d4a3

```
sudo apt update
#sudo apt upgrade
sudo apt dist-upgrade
```

# apache2のインストール
参考サイト

https://qiita.com/sakkuntyo/items/03742bad0f57a4f46b07

```
sudo apt install apache2
```

# apacheの要塞化

.htaccessが使えるようにし，ディレクトリリスティングを無効にする

```:デフォルト
<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>
```

```:.htaccess有効，ディレクトリリスティング無効
<Directory /var/www/>
        # .htaccess の有効化
        AllowOverride All
        # ファイル一覧出力の禁止
        Options -Indexes

        #Options Indexes FollowSymLinks
        #AllowOverride None
        Require all granted
</Directory>
```



# MariaDBのインストール
参考サイト

https://qiita.com/nanbuwks/items/6768bc73661bdba43af9

↑このサイトの後半に書いてあるphpmyadminのインストール方法は参考にしてはダメです。
もし`<いいえ>`を選択してしまったら，`sudo apt --purge remove phpmyadmin`でリカバリーを。


```
sudo apt install mariadb-client mariadb-server
sudo mysql -u root -p

MariaDB> create user 'user'@'localhost' identified by 'pass';
MariaDB> create database database_name;
MariaDB> grant all on database_name.* to 'user'@'localhost';
MariaDB> quit
```

# phpmyadminのインストール
参考サイト

https://penpen-dev.com/blog/phpmyadmin-ubuntu/

```
sudo apt install phpmyadmin
```
apacheを選択
`<はい>`で進む

```
sudo vi /etc/apache2/conf-available/phpmyadmin.conf
```

編集内容

```
Include /etc/phpmyadmin/apache.conf

<Directory /usr/share/phpmyadmin>
Order deny,allow
</Directory>
```

最後に

```
sudo a2enconf phpmyadmin.conf
sudo service apache2 restart
```

# phpmyadminを自分だけに

参考サイト

https://heppoko-room.net/archives/1593

```
sudo vim /etc/apache2/conf-available/phpmyadmin.conf
```
編集内容（ループバックの指定を忘れないこと）

```:/etc/apache2/conf-available/phpmyadmin.conf
# phpMyAdmin configuration
Include /etc/phpmyadmin/apache.conf

<Directory /usr/share/phpmyadmin>
Order deny,allow
Deny from all
Allow from [許可したいIP]
Allow from 127.0.0.1
</Directory>
```

# sshを自分だけに

```:/etc/hosts.deny
sshd: all
```

```:/etc/hosts.allow 
sshd: [許可したいIP]
```

# 開発中のWebを自分だけに

※　.htaccessは，各ディレクトリに必要

```:.htaccess
order deny,allow
deny from all
allow from 許可IPアドレス
allow from 許可IPアドレス
```


以上です。
久しぶりにサーバー建てたら，忘れてたので自分の備忘録がわりに。
Microsoft Bing Maps APIを使ってみる

地図×kintoneということで、OpenStreetMapやGoogle Mapsとの連携はよく目にしますが、Microsoftが提供しているサービス「Bing Map API」とkintoneの連携があまりなかったので、調べてサンプルを作ってみました。

### Bing Mapsの Document
- [Bing Maps Documentation](https://docs.microsoft.com/ja-jp/bingmaps/)


## 「kintoneカスタマイズビュー」での完成イメージ
- レコード一覧（カスタマイズビュー）
![2021k1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100494/2d5c834e-828b-d0bf-8301-f22ff1b031ca.png)

- レコード詳細
![2021k2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100494/b30f3a82-655c-8172-587e-af2ea6599635.png)

## 主な仕様
- カスタマイズビュー機能を使って、左ペインに地図、右ペインにリストを作成
- 緯度経度の座標を元に地図を描画する 縮尺、[Tileはランダム](https://docs.microsoft.com/en-us/bingmaps/v8-web-control/map-control-api/maptypeid-enumeration)
- Nameのリンクをクリックすると地図が変わる
- 右ペインの矢印（→）アイコンをクリックするとレコードの詳細に移動する
- レコード追加/編集画面で、緯度経度値などを変更できる
- レコード詳細画面で地図を描画する
- PC版のChrome, Firefoxのみ確認済

## ソースコードなど
簡素ではありますが、ソースコード、データ、手順などはGitHubにて公開

https://github.com/maptomo/kintone-bingmaps



## 参考情報
- [いろいろな日本百選の経緯度数値データ](http://100sen.cyber-ninja.jp/)
- [XLsoft CorporationによるBing Map site](https://www.xlsoft.com/jp/products/bing_maps/index.html)
- [Bing Map Site](https://www.bing.com/maps)
- [Bing Map の料金（ライセンス）](https://www.xlsoft.com/jp/products/bing_maps/license.html)
Amazon VPC Network Access Analyzer がリリースされました！

**この記事は株式会社ナレッジコミュニケーションが運営する [クラウドAI by ナレコム Advent Calendar 2021](https://qiita.com/advent-calendar/2021/knowcom-cloudai) の14日目にあたる記事になります。**

#はじめに
AWS re:Invent 2021 にてAmazon VPC Network Access Analyzer がリリースされると発表がありました！
今回はこちらの新機能について紹介してきます！
 [公式アナウンス情報 - 新機能 – Amazon VPC Network Access Analyzer](https://aws.amazon.com/jp/blogs/news/new-amazon-vpc-network-access-analyzer/)

#そもそもVPCとは？
Virtual Private Cloud の略で、 AWS アカウント専用の仮想ネットワークを構築できるサービスのことです。
今回発表された新機能 Network Access Analyzer はVPC の機能の1つとなります。

#新機能 Network Access Analyzer とは？
AWSのリソースに対して、意図しないネットワーク接続がないか検証する機能です。
ネットワークへのアクセス要件を指定することで、指定した要件を満たさない可能性のあるネットワークパスを特定することができます。
![naa_findings_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578416/ee189bc5-1858-54ee-a4bc-f909b2fedf69.png)

#新機能 Network Access Analyzer の特徴
・セキュリティ要件に適さないネットワークアクセスを特定できる
・AWS上のネットワーク構成がコンプライアンスを満たしているか検証できる

#新機能 Network Access Analyzer のユースケース
この新機能は以下のような要件を満たしているか確認するのに役立ちます。
・ネットワークの分離ができているか？ - 本番環境と検証環境のネットワークが分離しているかなど
・インターネットアクセスは制限されているか？ - インターネットから接続できるリソースは正当かなど
・適切なネットワーク制御がされているか？- ファイアウォールやNATなどの適切なネットワーク制御があるかなど
・リソースへのアクセス経路は適切か？ - 特定のポート、プロトコル、IPからの接続に絞られているかなど

#新機能 Network Access Analyzer の料金（2021/12/13時点）
利用料金は分析対象となるENI（elastic network interfaces ）の数に応じて決まります。
東京リージョンの場合は、ENI 1つにつき約0.2円かかります。

■料金例
前提：Network Access Analyzerを使用して5つのネットワーク評価を実行し、それぞれのネットワーク評価につき1000のENIを分析したとする。
利用料金：5 [ネットワーク評価] x 1000 [ENI]  x 約0.2円 = 約1000円

#おわりに
Network Access Analyzer はネットワーク構築後に、ネットワーク構成が要件通りに設計されているか確認するのに非常に有効的ですね！
【Jbuilder】あるカラムのみ返したい



- ```@user```の```name```だけ出力したい。

```ruby
json.user_infos do
  json.user @user.name
end
```

```json
{
  "user_infos": {
    "name": "kato"
  }
}
```

- ```@user```だと```id``` ```name``` ```age```などがすべて出力されてしまう。

```ruby
json.user_infos do
  json.user @user
end
```

```json
{
  "user_infos": {
    "user": {
      "id": 1,
      "name": "kato",
      "age": 20,
      "created_at": "2020-08-23T16:46:01.380+09:00",
      "updated_at": "2021-11-02T18:34:16.043+09:00"
    }
  }
}
```
ARM? RISC-V? x86? 用語がごっちゃになっている人のためのCPUアーキテクチャの全体図

# はじめに

コンピュータアーキテクチャを勉強しようと思っているのですが，ちょくちょく聞くARMやx86，RISC-Vなどが全体的にどういった立ち位置なのかみたいなのがわからなかったので調べた結果を簡単にまとめてみました．

# 全体図

全体的な見取り図としては以下の通り．

```
CISC(Complex Instruction Set Computer)
   └── x86，x86-64（x64またはamd64と呼ばれることも）
        └── Intel社
              └── Xeon、Core、Pentium、Celeronなど
        └── AMD社
              └── Ryzen、Athlon、Optelonなど

RISC(Reduced Instruction Set Computer) 
   └── arm
        └── ARM社
              └── ARMv7(32bit)
              └── ARMv8
                    └── AArch32(32bit)（LinuxではAArch32をarmと表記）
                    └── AArch64(64bit)（LinuxではAArch64をarm64と表記）
   └── RISC-V
        └── カリフォルニア大学バークレー校
```

## 命令セットアーキテクチャ
- CPUの命令セットアーキテクチャの種類は大きく分けてCISCとRISCの２種類
- RISCは命令体系が簡単なアーキテクチャで，CISCは命令体型が複雑なCPUアーキテクチャ

## CISC
### 32bitと64bit
- CISCには32bitのx86と，x86を64bitに拡張させたx86-64（x64またはamd64と呼ばれることも）という二つのCPUアーキテクチャがある
- 今のx86は大体が64bitだが，32bit用のアプリケーションにも対応しているものがほとんど

https://blog.future.ad.jp/small-talk-about-it-001-why-is-amd64-even-though-the-intel-cpu

### x86のアーキテクチャを採用している企業
- x86のアーキテクチャを採用している企業には有名どころとしてはIntel社とAMD社がある

#### x86の有名な商品名
- Intel社が製造しているx86のCPUはXeon、Coreなどの商品名が有名
- AMD社が製造しているx86のCPUはRyzenなどの商品名が有名

## RISC
- RISCにはarmとRISC-Vの２種類がある

### arm
- armはARM社がライセンス権を持っているので，armのアーキテクチャを採用するCPUを作る場合はARM社にライセンス料を支払う必要がある
- armにはバージョンがあり，前のバージョンはARMv7(32bit)，今のバージョンはARMv8でこちらはAArch32(32bit)とAArch64(64bit)の２種類がある
- LinuxではAArch32のアーキテクチャをarmと表記し，AArch64をarm64と表記している

### RISC-V
- 最近になってカリフォルニア大学バークレー校が開発したRISC-Vというアーキテクチャが出現し，こちらはarmと違ってライセンス料を支払う必要がないので，armからRISC-Vに企業が徐々に移るのではないかと一部では言われている

## x86 vs arm
- PCではほとんどx86が使われているが，PC以外のIoTやルータ，家電などではarmがよく使われている
- また，スマホもほぼarmが使われている

# 最後に

頭の中で用語がごっちゃになっていたのはCPUアーキテクチャの用語の中にも色々な階層があったからなんですね．今回整理してみて頭がスッキリしました．

# 参考

https://beyondjapan.com/blog/2021/01/cpu_architecture/

https://www.wakuwakubank.com/posts/809-it-cpu-x86-x64-arm/

https://8vivid.net/list-cpu-soc/
Prologを使ってみた

#オンライン環境

https://www.swi-prolog.org/

SWI-Prologサイトの「Try SWI-Prolog online」をクリックする。
直接リンクは下記。

https://swish.swi-prolog.org/

#初めに

左ウィンドウ（New tab）
Create a [Program] [Notebook] here
の[Program]をクリックし、以下のプログラムをコピペする。

```prolog
人間(ソクラテス).
死ぬ(X) :- 人間(X).
```

右下ウィンドウ（?-）に以下の問い合わせをコピペ。
[Run!]ボタン、或いはCtrl+Enterで実行する。

```prolog
死ぬ(ソクラテス).
```

右上ウィンドウにtrueと表示されるはず。

#次に

左ウィンドウに以下のプログラムをコピペする。

```prolog
grandchild(X, Z) :- child(X, Y), child(Y, Z).

child(nobuyasu, ieyasu).
child(hideyasu, ieyasu).
child(hidetada, ieyasu).
child(tadateru, ieyasu).
child(yoshinao, ieyasu).
child(yorinobu, ieyasu).
child(yorihusa, ieyasu).

child(iemitsu, hidetada).
child(tadanaga, hidetada).
child(masako, hidetada).
child(masayuki, hidetada).
child(mitsusada, yorinobu).
```

右下ウィンドウ（?-）で問い合わせてみる。

```prolog
grandchild(iemitsu, ieyasu).
```

更に右下ウィンドウ（?-）で問い合わせてみる。

```prolog
grandchild(X, ieyasu).
```

```prolog
X = iemitsu
```

と右上ウィンドウに1件だけ表示される。
[Next][10]ボタンなどをクリックすると残りが表示される。

```prolog
X = iemitsu
X = tadanaga
X = masako
X = masayuki
X = mitsusada
```

#参考
- https://magazine.rubyist.net/articles/0021/0021-Legwork.html
- https://qiita.com/Yappii_111/items/9991b666511632cc79bb
git resetを使ってコミットログをきれいに保つ

こんにちは、最近ジムで追い込みすぎて毎日どこかしらが筋肉痛の[mu-suke](https://twitter.com/chelsea08ym)です。
この記事は[株式会社Diverse Advent Calendar2021](https://qiita.com/advent-calendar/2021/diverse) 、10日目の記事です。


## これはなに？
今回は、コミットログをきれいにすることでレビューのしやすさや、ブランチの可読性を高めるよという話をしたいと思います。

## 🏁この記事のゴール
以下の理解を得ることをゴールとします。

- コミットログをきれいにする方法
- コミットログをきれいに保つ理由


## ダメな例
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316760/509efc9e-d973-e7b7-e3de-168f9f152fc5.png" width=700 alt="before画像" />

まずアドバイスを受ける前の状態です。
以下のような手順で動作確認を行いました。
1. dev環境にデプロイするためにリモートブランチにプロダクトとは関係のないテスト用コードをpush
2. github actionsの手動実行をしてdev環境にデプロイ
3. dev環境で問題なく試せたのでテスト用コードをrevert


手順2までは問題なく、ポイントとなるのは手順3です。
これではプロダクトに関係のないコミットログが残ってしまい、レビュアーはこの部分のコミットを意識しなくてはなりません。
本来見てほしいプルリクの内容以外のところを意識しなくてはならないのでこのコミットログは正しいとは言えません。

## git resetでコミットログから消去する
そこでgit resetの出番です。

`git reset --hard commitID`をすることでコミット自体をなかったことにするので、コミットログがきれいになります。

git resetを使ってみた結果がこちらになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316760/c5fbfc6a-3747-d942-e153-fc3b81c8aef0.png" width=700 alt="after画像" />


## 🚨注意
### git resetの危険性
git resetはコミット自体をなかったことにするので共同作業者がいる場合は**オススメされていません。**
が、今回のケースでは共同作業者がいない、自分だけが作業する環境だったため使用しました。

mainとかでこれをやるとブランチを切っている人はもれなくコンフリクトが起こるので気をつけましょう

### 何でもかんでもきれいにすれば良いわけではない
今回はプロダクトに関係のない、テスト用のコードをpushしたかったのでresetを用いてコミットログから削除しましたが、プロダクトの都合(やっぱりこの機能はなくそう　等)の時は実装した痕跡が必要な場合もあるのでrevertすることをオススメします。

## まとめ
git resetでプロダクトに不要なコミットをなくすことでレビュアーがレビューしやすいような状態、かつきれいなブランチにすることができました。

よく言われていることですが、何かを解決する手段として銀の弾丸なんてなくて、必ずトレードオフがあるので状況に応じてどちらが適しているかを判断する力をつけることが大事なんだと考えています。

ではまた！


## 参考記事
↓resetの使い方を理解する上で参考になった記事

https://qiita.com/shuntaro_tamura/items/db1aef9cf9d78db50ffe

↓resetとrevertを理解する上で参考になった記事

https://qiita.com/Sammy_U/items/e37c7242544fd1da81be

↓記事を書く上でかなり参考になった記事

https://qiita.com/MinoDriven/items/6718b5e70e3fb321ff9b
一人前のエンジニアになるためにもっと早くからやれば良かったなと思うこと

# 対象読者
この記事は「もっと成長したい！」だとか、「もっとチームに貢献したい！」と思っている
若手のエンジニアに向けた記事となっております。
もし貴方がつよつよエンジニア様でしたら、補足などコメント下さいmm

# この記事を執筆しようと思ったきっかけ
当社では主に新卒で入社するエンジニアを対象にした
一人前になるまでのスキルマップ（通称一人前マップ）が存在します。

同じように独自のスキルマップを活用されている会社も多々あると思いますが、
このようなスキルマップは技術面に対する納得感は高いものの、
そこに言語化されていない行動やスタンスに関する変化も存在するのではないでしょうか？

そこで去年までは半人前だった私が一人前になって、
実際に変わったなと思うことをまとめてみました。

そしてこれらの内容は「スキルに関係なく、すぐやろうと思えばできること」だと思うので、
自分自身もっと早くからこれらを意識してやっていれば、
もっと早く一人前になれたのではないかという自分自信の反省も込めて執筆しております。
それでは行ってみましょう！

# 変わったなと思うこと
振り返ると、`設計→実装→プロダクト全体`という各フェーズに分類できたので、
それぞれにおいて幾つか変わったな、もっと早くからやればよかったなと思う点を述べます。

## 設計フェーズ
### 要件やデザインの背景/意図を理解してから設計するようになった
半人前👶：要件通りに動かすためには？という観点だけで設計をする
一人前👨：例えばデザイナーにコンポーネントに持たせる責務やプロパティを直接確認しに行く

**この結果どうなった？**
PdM / デザイナー / エンジニア間の認識齟齬が減り、結果として手戻りも激減し、
プロダクトの品質向上につながったと思います。
（具体が気になる方は昨日の当社のデザイナーが執筆した記事を閲覧ください！）

### プロダクトの戦略を同時に理解できるように努めるようになった
半人前👶：（繰り返し）要件通りに動かすためには？という観点だけで設計をする
一人前👨：今後このプロダクトは類似した機能Bも開発したいって話だから、次にそれを実装しやすいように機能Aを作る

**この結果どうなった？**
プロダクトの大まかな戦略や、方針に関する理解が以前よりすっと入ってくるようになりました。
また、先に拡張される機能を予測しながら設計をすることで、後続の機能開発がスムーズに！

## 実装フェーズ
### 過去のコードを盲信しなくなった
半人前👶：今回の実装箇所に似たのが既存であるから真似しよう！
一人前👨：既存のを参考にしつつ、もっと良い書き方はないかな？を探すところから始めよう！

**この結果どうなった？**
これは既存のコードを否定したいわけではなく、技術というのは移り変わりの激しいものなので、
過去のベストプラクティスは今となっては推奨されていないケースがあります。
そこで、都度新しいベストプラクティスを調べて、あればそれに則ることで、
結果として実装が早くなったり、コードが読みやすくなったりすることがあるなと思います。
（過去のコードとの整合性を取るのが大事な場面もあると思うので、ケースバイケースですが）

### 目が良くなった
半人前👶：数pxのずれや、文字の大きさ/色/高さが気にならない
一人前👨：パッと見ただけで「あれ、なんかここずれてない？」と気付けるようになった

**この結果どうなった？**
デザインレビューにおける差し戻しが格段に少なくなりました。
実装以外にも過去の自分のプレゼン資料を見ると直したい点を山程見つけられるようになりましたｗ

## プロダクト全体
### 自分で要件を追加/変更するようになった
半人前👶：言われたものを言われたとおりに作る
一人前👨：「今より良いUXに出来ないか？」を考えながら実装し、あれば提案まで行う

**この結果どうなった？**
以前は要件を決めるmtgに参加しても「ここの要件って実装的に可能ですか？」と、
技術的な可否を問われることが多かったのですが、
今は「○○さん的にここの要件どう思います？」と要件に関する意見を求められるようになりました。

### 他社のアプリの仕様/デザインが気になるようになった
半人前👶：何気なくTwitterを見たり、Facebookを見たり。
一人前👨：他社のアプリに盗める良い点がないか、逆に注意するべき悪い点はないか？を探すようになる

**この結果どうなった？**
先述の要件を決めるmtgにおけるアウトプットの質が向上したなと感じます。
アウトプットの質はインプットの質に直結しているなと実感できます。

### 色んなチーム/色んな職種の人に絡みに行くようになった
半人前👶：自分のチームのことで手一杯で、スター付き以外のチャンネルはメンションがないと見ない...
一人前👨：何か別チームがここら辺の機能触るって言ってたけど、最近俺も触ったから絡みに行こうっと

**この結果どうなった？**
別チームからレビューを頼まれる機会が多くなったり、
純粋に感謝される事が増えた気がします。

# 最後に
いかがでしたでしょうか？
読んでみて、「いやいや提案なんて技術レベルが高くないうちは無理でしょw」とか思う人とかいますか？

一理あると思いますが、鶏が先か卵が先か的な話かなと思っており、
技術レベルが上った結果、行動が変わることもあり、
一方で行動を変えた結果、技術レベルが上がることも同様にあると思っています。

特に（僕もそうですが）若手のエンジニアは
明日起きたら、技術レベルがいきなり上がっているというのはありえない話ですが、
今日から行動を180度変えるのは無理ではない話だと思っていますので、一緒に頑張りましょう！

この記事が皆さんの「今日から少しだけでも行動を変えてみよう！」というモチベーション向上の助けに少しでもなれたら幸いです。
それでは皆さん良いクリスマス/年末を！🎄🎍
JavaScriptではプロパティ名にキーワードが使える

言われてみればそうだねと思う人も多いと思いますが、JavaScriptではオブジェクトのプロパティ名に予約キーワードを使えます。

```js:動く
const obj = {};
obj.if = 1;
console.log(obj.if); // 1
```

他の言語だと、例えばPythonだと使えません。

```python:動かない
class A:
  pass
obj = A()
obj.if = 1 # SyntaxError: invalid syntax
```

他にも使えない言語の方が多い気がします。

ただしJavaScriptでも変数や関数の宣言時の識別子としては使えません。

```js:動かない
const if = 1;    // SyntaxError: Unexpected token 'if'
function for() {
  return 2;
} // SyntaxError: Unexpected token 'for'
```

当然オブジェクトのプロパティにしてしまえば使えます。

```js:動く
const if_ = 1;
function for_() {
  return 2;
}

const obj = { if: if_, for: for_ };
console.log(obj.if, obj.for()); // 1 2
```

さらにいうとclass構文のメンバー定義はローカル変数・ローカル関数宣言っぽいですがあくまでオブジェクトのプロパティなのでキーワードが使えます。

```js:動く
class A {
  if = 1;
  for() {
    return 2;
  }
}
const obj = A();
console.log(obj.if, obj.for()); // 1 2
```

# 雑記
JavaScriptはオブジェクトを辞書型のように扱うという特徴があります。

```js:オブジェクトを辞書型のように扱っている例
const obj = { prop: 1 };  // 辞書っぽいオブジェクト作成
obj['prop'] === obj.prop; // []を使った辞書っぽいプロパティアクセス
```

この特徴はあまり注目されていないような気がしますが、私は非常に重要な特徴だと思ってます。JavaScriptの好きなところ3選には絶対入りますね。
この特徴が現れているのが今回のネタでもあります。
LaravelのModelでコンストラクタを使う

結論

```php:App/Models/User.php
/**
 * Create a new Eloquent model instance.
 *
 * @param  array  $attributes
 * @return void
 */
public function __construct($attributes = [])
{
    parent::__construct($attributes);
    # 他の処理
}
```

# 参考
https://laracasts.com/discuss/channels/eloquent/factories-on-laravel-52-not-working-as-expected?page=1&replyId=345303

https://github.com/laravel/framework/blob/8.x/src/Illuminate/Database/Eloquent/Model.php#L204-L213