OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio Code インストール方法(mac版)

#Visual Studio Code　インストール方法
>
名古屋市立大学芸術工学部情報環境デザイン学科ではプログラミングの講義(情報工学基礎、情報通信工学など)を始め、あらゆる講義でコードを記述する機会がありますのでコードを書く際に使用されるテキストエディタ「Visual Studio Code」を自分のPC環境にインストールすることを推奨します。


##目次

1. __Visual Studio Codeとは__
    1. VS Codeの特徴
    1. VS Codeのメリット・デメリット

2. __Visual Studio Code　インストール方法__
    

##Visual Studio Codeとは![1373_w1280.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728184/e834abd5-fb86-bdc6-d30b-04c1b3514949.jpeg)


__『Visual Studio Code（ビジュアル・スタジオ・コード）』__とは、文字を入力するために使用するテキストエディタと呼ばれる種類のソフトで、Microsoftが開発・提供をしています。

プログラミングにおいて、主にはプログラムのコードを書くために使用され、軽量かつ高機能なことから多くのエンジニアが愛用しています。

###VS Codeの特徴
Visual Studio Codeには次のような特徴があります。


▼VS Codeの特徴

:::note info
オープンソースなので誰でも無料で利用ができる
:::
:::note info
Windows・Mac・Linuxなどの幅広いOSで利用ができる
:::
:::note info
色付きでコードが見やすくなるハイライト機能がある
:::
:::note info
コードの自動補完機能があり、効率的なプログラミングができる
:::
:::note info
『拡張機能』という仕組みで機能を自由にカスタマイズできる
:::

###VS Codeのメリット・デメリット

▼VS Codeのメリット

:::note info
 軽量かつ高機能、標準で多くの言語をサポートしている
:::
:::note info
 拡張性が高く多くのプログラム開発に利用ができる
:::
:::note info
 利用者が多く、使用方法などについて多くの情報が得られる
:::

▼VS Codeのデメリット

:::note alert
作業目的にあわせたカスタマイズの難易度が高め
:::

とはいえネットには情報も豊富にあり、検索して情報収集をすることで目的に合わせて使用していくことも十分に可能となります。

##VS　Code　インストール方法


###ダウンロードする
![1374_w1280.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728184/31886e69-9071-b0f6-7e4e-ca607540f5ec.jpeg)

まずはMicrosoft公式サイトからVisual Studio Codeのインストーラーをダウンロードしてゆきます。

[ダウンロード先リンク](https://code.visualstudio.com/download)

###ダウンロードしたファイルを開く
画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックしてください。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_74438_cdf08fbf-738b-fc08-0344-c5c024fe328a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728184/02cb919b-be10-2c7a-91bd-1f587a5dbfed.png)

###アプリケーションフォルダに移動
ダウンロードフォルダにそれらしいアイコンが表示されたかと思いますが、まだ開かないでください。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_74438_cde806a2-fbac-e35e-7ee0-99df26d29abb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728184/5de2d3a2-2d4a-5d18-3a71-2105b8dffad4.png)

###認証ボタンを押す
この画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_74438_52a94581-1d06-5770-f0fe-3ee27f37821c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728184/13266485-1151-fcf7-0a43-b51cf0ca1b39.png)

これでインストール完了になります。

###VS Codeの初期画面
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_74438_0512ef54-41a2-3f48-705e-e29837512d20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728184/4ceffc22-8b33-8f03-78d5-da3b1131388b.png)
Apex Community (動画のアップロード)

# 概要　（Apex Communityとは）
学習の復習でApex-Communityというアプリを作りました。
このアプリは、最近話題のApexというゲームのコミュニティサイトです。
主にできることは、パーティーの募集(ランク、カジュアル、クラブの募集)、自慢プレイの動画投稿や面白かったプレイ動画投稿ができるアプリです。

https://apex-community-introduction.herokuapp.com/

[![Image from Gyazo](https://i.gyazo.com/13524aad20245dd0d4e01b1884b1fa82.jpg)](https://gyazo.com/13524aad20245dd0d4e01b1884b1fa82)

# 動画投稿の方法
今回実装にあたって大変だった動画投稿の方法を二つあるのでそれについて書きたいと思います。
一つ目が、CarrierWaveというgemを使って、動画投稿する方法です。

Gemfileに追加

```
gem 'carrierwave'
```
追加した後に

```
bundle install
```
```
rails g uploader best_movie #この部分の名前はなんでも良い

rails g AddBestMovieToVideos best_movie:string #この部分の名前はなんでも良い
```
今回は元から作ってあるデータベース（video)に関連させ作成

```
rails db:migrate
```

```app/model/video.rb
mount_uploader :best_movie, BestMovieUploader
```
```app/uploaders/best_movie_uploader.rb
def extension_whitelist
   %w(jpg jpeg gif png MOV wmv mp4)
end 
```
jpg jpeg gif pngは写真
MOV wmv mp4は動画のファイルになります。
実際容量の都合上mp４しか動画は再生されませんでした。
MOV wmvのファイルは音声だけでしか再生されませんでした。

# 二つ目の方法(ActiveStorage)
・Active Storage をインストール

```
$ rails active_storage:install
$ rails db:migrate
```
```/app/models/video.rb
has_one_attached :video 
```
:videoはファイルの呼び名で、用途に合わせて好きな名前をつけていいようです。（画像をアップロードするなら:imageなど)

# Viewの作成
```_form/html.erb
    <div class="form-group">
      <%= f.label :best_movie %>
      <%= f.file_field :best_movie, :accept => 'video/mp4', onchange: 'previewImage(preview)'  %> 　　　　　 #onchangeによってid=previewがJSファイルに渡される
      #video/mp4でmp４の動画ファイルしか選択できません
      <%= f.hidden_field :best_movie_cache %>
    </div>

    <div class='mt-3 mb-3'>
      <%= video_tag(@video.best_movie.url,
                    id: 'preview',
                    :controls => true, :autoplay => true, :muted => true,
                    size: '600x400') %>
    </div>
```
*プレビュー機能

```/javascripts/preview.js
function previewImage(id) {
  const target = this.event.target;
  const file = target.files[0];
  const reader = new FileReader();
  reader.onloadend = function () {
    preview.src = reader.result;
  };
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}
```

```app/uploaders/best_movie_uploader.rb
def default_url
    'https://i.gyazo.com/d9d7dc0d07a4eb756841bcc946afc915.mp4'
end
```
default_urlがないとプレビュー機能が実装されません。

＊動画のオプション
<a href="https://gyazo.com/b924fd26420d6bcecab2e55851e715db"><img src="https://i.gyazo.com/b924fd26420d6bcecab2e55851e715db.png" alt="Image from Gyazo" width="415"/></a>

https://railsdoc.com/page/video_tag


*完成イメージ
[![Image from Gyazo](https://i.gyazo.com/898af04af9df8cf17c842709e4c8b096.png)](https://gyazo.com/898af04af9df8cf17c842709e4c8b096)


#まとめ
今回二つの方法で動画のアップロードを試してみましたが、今回のアプリでは、一つ目の方法でCarrierWaveで実装しました。
理由としては、二つ目のActiveStorageは動画を再生したまま、一個前のページに戻りますと、そのページで動画の音だけが再生されてうるさかったのCarrierWaveの方法で実装しました。
CarrierWaveですと一個前のページに戻っても問題なかったです。

またherokuでデプロイした時、動画投稿して時間が経つと動画再生されなかったので、AWS S3でなどでストレージ管理をしないといけないらしいので、まだ実装できてないので、実装していきたいと思います。
二つ目のActive StorageだとAWSなどを使わずに保存できるらしいです。
ただ短い動画しかできません。

https://qiita.com/rainbow___0/items/0ffeb29afc7865eb65b5


最後に間違っている部分があれば教えてください。
この記事でApexをやっている方がいればこのアプリを使ってくださると幸いです。
この記事を読んでくださいりありがとうございます。
なでしこでmacOSの.DS_Storeを一括削除する

macOSユーザーが「rm」コマンドでもっとも削除しているファイル、それが「.DS_Store」と言っても過言ではありません。

.DS_Storeとは、macOSのフォルダでアイコンの位置や表示設定などのメタ情報を保存している隠しファイルです。

しかし、うっかりすると、Windowsユーザーにファイルを送る時に、フォルダごと圧縮したり、Gitで「git add フォルダ」すると、自動的に含まれてしまっていたりするので、「あ、この人、macユーザーなんだ」などと思われてしまうのです。

そこで、なでしこ３(Node.js版)の出番です！

数日前に、[GitHubからなでしこ３をインストールする方法](https://qiita.com/kujirahand/items/12b9dca1866768038b25)を書きましたが、パッケージマネージャーを使うともっと簡単にインストールできます。

# なでしこ3(Node.js)をmacOSにインストール

まずは、ターミナル.appを開いて、macOSに[Homebrew](https://brew.sh/index_ja)をインストールします。

続いて、nvmとNode.jsをインストールします。

```
$ brew install nvm
$ nvm install node
```
そして、なでしこをインストールします。

```
$ npm -g install nadesiko3
```

# なでしこ3で.DS_Storeを探して削除するプログラム

そして、なでしこのプログラムを作ります。以下は、カレントディレクトリ以下にある、`.DS_Store`を全部探して削除するプログラムです。以下のプログラムを「rm_dsstore.nako3」という名前で保存します。

```rm_dsstore.nako3
#!/usr/bin/env cnako3
PWD=作業フォルダ取得
「{PWD}/*.DS_Store」の全ファイル列挙
それを反復
　　エラー監視
　　　　対象をファイル削除。
　　　　「[削除] {対象}」を表示。
　　エラーならば
　　　　「[失敗] {対象}」を表示。
　　ここまで。
ここまで。
```

そして、実行権限を追加し、パスの通ったディレクトリにこのファイルをコピーしておきます。

```
$ chmod +x rm_dsstore.nako3
```

以上で作業完了です。

`.DS_Store`を削除したいディレクトリで以下のように実行すれば、そのフォルダ以下にある.DS_Storeが全部削除されます。

```
$ rm_dsstore.nako3
```

# なでしこを使わない場合

実際、なでしこを使わなくても、以下のコマンドを一発叩けば良いだけなのですが、やはり、なでしこ３で削除したいですよね？

```
$ find . -name '.DS_Store' -type f -ls -delete
```

# Windowsのthumbs.dbも同じ

ところで、macOSの`.DS_Store`に相当するのが、Windowsの「`thumbs.db`」でしょうか。上記なでしこのプログラムの「*.DS_Store」を「thumbs.db」に置き換えれば良いだけなので、簡単に対応可能です。

# 検索したら...

実はマイナビ連載でも似たような記事を書いていたようです。数行のプログラムは何度も頻繁に作られるのです。

- https://news.mynavi.jp/techplus/article/nadeshiko-28/
Elasticsearch + Kibana を docker で爆速起動する！

起動にかかった時間はたった2分！

```sh
$ docker pull nshou/elasticsearch-kibana
$ docker run -d -p 9200:9200 -p 5601:5601 nshou/elasticsearch-kibana
```

こちらのDocker Hubにお世話になりました。
https://hub.docker.com/r/nshou/elasticsearch-kibana/
Raspberry Piで無線⇒有線変換をする

Raspberryで無線ルーターを作ってみる記事を参考にして、無線⇒有線変換にトライしてみました。

* 引用文献　
[Raspberry Pi で無線ルータを自作する](https://qiita.com/hoto17296/items/2e638fa28597b18505cd "Qiita Home")

#ネットワーク構成図
今回は下記のような構成です。
![Screenshot from 2021-12-07 20-54-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680896/48735b2f-1343-57f2-bdf2-10c85be36d47.png)

Raspberry Piに対してリモート接続を無線経由で行うため、wlanのIPアドレスは静的にしてあります。

#環境
* Raspberry Pi Model B
* Raspbian (Buster)

#実施方法
手順は参考文献と同一ですが、下記の違いがあります。

* wlan0⇔eth0に書き換えている点
* Wifi APの設定を行なわない点

##Wifi側の固定IPアドレスの設定
今回はDNSサーバーを192.168.100.1(モバイルWimax),および8.8.8.8(Google)に指定しました。

```:/etc/dhcpcd.conf
# Example static IP configuration:
interface wlan0　#無線インターフェース
static ip_address=192.168.100.10/24　#固定IPアドレス
static ip6_address=fd51:42f8:caae:d92e::ff/64
static routers=192.168.100.1
static domain_name_servers=192.168.100.1 8.8.8.8
```
##Network Interfaceの設定 <引用文献 変更箇所はwlan⇒eth0>

```
$ sudo apt install dnsmasq
```

```:/etc/dhcpcd.conf
interface=eth0
dhcp-range=192.168.2.2,192.168.2.99,255.255.255.0,24h
```

```
$ sudo systemctl start dnsmasq
$ sudo systemctl enable dnsmasq
```

##ルーティングの設定 <引用文献 変更箇所はeth0⇒wlan0>

```:/etc/sysctl.conf
net.ipv4.ip_forward=1
```

```
sudo iptables -t nat -A  POSTROUTING -o wlan0 -j MASQUERADE
```

```
sudo sh -c "iptables-save > /etc/iptables.ipv4.nat"
```

```:/etc/rc.local
iptables-restore < /etc/iptables.ipv4.nat
```

##接続結果
Raspberry Piを再起動後、UbuntuPCから接続を実施した結果を下記に示します。
![Screenshot from 2021-12-07 22-28-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680896/2b509318-f9c3-e27d-ed02-ee3466131c2e.png)

インターネットにアクセスができました。

#謝辞
Raspberry Piを有線ルータ化することに苦心していましたが、無事解決できました。大変ありがとうございました。
割と最新のgitを試しに使ってみる(bin-wrappers)

# どうせなら最新版の git をゲットしよう

あなたのシステムには既にgitが入っているでしょう。しかしそれは最新版ではありません。どうせなら最新版をゲットしましょう。



## 必要なライブラリ・パッケージをインストール

Ubuntu 20.04.3 LTS の場合。

```sh:
sudo apt install dh-autoreconf libcurl4-gnutls-dev libexpat1-dev make gettext libz-dev libssl-dev libghc-zlib-dev
```

参考:
https://ubunlog.com/ja/git-instala-control-versiones-ubuntu-20-04/


## gitのソースを持ってきて、ビルド
```
git clone git@github.com:git/git.git
cd git
make
```
## システムのgitを活かしたままビルドしたのを試しに使ってみる

git/INSTALL (翻訳はコチラ https://kuma35.github.io/git-docs-ja/INSTALL.txt) に書いてあるとおり、

makeが終わればとりあえず使えるようになっています。
たとえば、path/to/git フォルダだとすると、 

```
path/to/git/bin-wrappers/git version
```

でとりあえず起動できます。あなたのリポジトリで上記のように打てば一応使えます。

ただし、効率がよろしくないそうなので、あなたの環境に(システムに影響を与えず、システムより優先して使えるようにする)入れるには、

##気に入ったので最新版を常用することにする

path/to/git フォルダで

```
make install
```

です。sudoは要りません。なぜなら `${HOME}/bin` (と `${HOME}/share` )にインストールするからです。 あなたの PATH の先頭に `${HOME}/bin` があるのを確認してください。

```
echo ${PATH}
```

そうなってない場合は .bash_profile 等で設定して、ログオフ/ログオンです。

さて、これで割と最新版が手に入りました。確認してみましょう。

```
git version
```

おめでとうございます。

:::note warn

手元の環境ではmanページはシステムの(古い)ままでした…

git/INSTALL に書いてあるようにデフォルトではドキュメントは一緒にインストールしません。

2.33ぐらいの翻訳(途中)のドキュメントはコチラ 
https://kuma35.github.io/git-docs-ja/index.html

:::
JavaScriptのstaticを理解する

## staticとは

**class内で使用できる、静的なメソッドを定義する際のキーワード**のことです。
以下にように、`Person.hello()`と直接呼ぶことができます。

```javascript
class Person {
  static hello() {
    console.log('hello');
  }
}

Person.hello(); // hello
```

このように、インスタンス化を行わずに使用できるメソッドを**静的メソッド**または**staticメソッド**と言います。

## thisは使用できない
インスタンス化を行っていないので、`Person`からインスタンスは生成されていません。
よってこの状態では**staticメソッドの中でthisを使用することはできません。**

```javascript
class Person {
  static hello() {
    console.log('hello ' + this);
  }
}

Person.hello();

```
出力結果↓

```
hello class Person {
  static hello() {
    console.log('hello ' + this);
  }
}
```
`this`にアクセスすると、クラスの表記自体が出力されます。
`Person`からインスタンス化を行っていないので、この`this`が参照する先のオブジェクトが`Person`クラスになっています。

## staticメソッドをコンストラクター関数で扱う
`static`メソッドはコンストラクター関数を使うと以下のように記述できます。

```javascript
function Person2(name, age) {
  this._name = name;
  this._age = age;
}

Person2.hello = function () {
  console.log('hello');
};

Person2.hello(); // hello
```

`Person`の`static`メソッドの`hello`が格納されたことになるので、`Person.hello()`で呼び出すことができます。

## class内のstaticメソッドの取り扱い

`class`を用いた場合には、コンストラクター関数に対してメソッドが追加されたものを`static`メソッドとして取り扱っています。

```javascript
class Person {
  constructor(name, age) {
    this._name = name;
    this._age = age;
  }

  static hello() {
    console.log('hello');
  }
}

const person = new Person('Taro', 20);
console.log(person.constructor === Person); // true
```

`person`の中身は以下のようになっています。
![スクリーンショット 2021-12-08 7.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999567/0f04380c-6022-ed5a-6467-19cba163cf7f.png)
`[[Prototype]]`の中に、`constructor`が追加されています。
こちらは先ほどのコンストラクター関数のことを指していて、`person.constructor === Person`とすると結果は`true`になります。

**`class`の場合も`constructor`は関数であり、`Person`とイコールになります。**
また、`person`内の`[[Prototype]]`の中の`constructor`に`hello`メソッドが格納されていることがわかります。

よって、**`constructor`関数に対して`hello`を追加したものが、`static`メソッド**ということになります。

## 参考資料
https://www.udemy.com/course/javascript-essence/
Python初心者がノンプロ研でPython学んでみた vol.4

こんにちは、な～です。ノンプロ研でPythonを学び始めました。その学びについての第4段です。今回は、組み込関数とオブジェクトについて学びました。

# 今回の内容
* 組み込み関数
* オブジェクトと組み込み型
* モジュール（Pythonの世界）

# 組み込み関数
関数とは、一連の処理の集まりに名前をつけたものと第2回目で学びました。関数にするメリットとしては、処理をひとまとめにできる点と、再利用しやすくなる点です。
今回の組み込み関数は、あらかじめPythonに用意されている関数の関数になります。
![20211201初心者講座Pythonコース-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208544/4dd19a9a-d39d-e5ae-6643-b3f33a6b55a6.png)
![20211201初心者講座Pythonコース-04 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208544/3ef20899-aeb8-bbcb-0d79-2dfbf736db56.png)

ただ、まだ私の中には全然入ってきていないようです💧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208544/4f524ac1-6a4d-7f8d-63d2-94148b15def1.png)
dictとかzipを利用して書けるようになりたいものです。まず写経しましょう。（写経とは、ノンプロ研内において、コードを入力することを言います。）

# オブジェクトと組み込み関数
オブジェクトとは、Pythonで扱うすべてのデータは、オブジェクト。
オブジェクトだからメソッドがあるということ。
![20211201初心者講座Pythonコース-04 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208544/2d9881ab-30ed-4cf8-c9d8-69842833ed4e.png)
文字列型のメソッド
![20211201初心者講座Pythonコース-04 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208544/1f0b5561-3bf2-52d9-988b-50501cd95f06.png)
ずっとピンときてなかったんだけど、全てはメソッドだったんだなと実感しました。VBAなら関数なんだよね。確か。きっと。違うかな？？
この他にもリスト型のメソッドと辞書型のメソッドの代表的なものを学びました。私はまだ、組み込み関数やメソッドを利用してプログラムを書くのが苦手なのでどんどん書かなくてはと思っています。

# モジュール
モジュールとは、Pythonの定義や文が入ったファイル
ファイル名は、モジュール名に「.py」でも、普段つかっているJupyterNotebookでは、「.jpynb」です。

![20211201初心者講座Pythonコース-04 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208544/03032d54-4a24-d969-316f-1e360017d228.png)
組み込み関数だけではありません。
インポートして使う、標準ライブラリや同梱ライブラリ
その他にも、インストールして使えるその他サードパーティー製のライブラリなどもあります。

Pythonではいろいろなライブラリを使うことで世界が広がりそうです。

# まとめ
今回は、組み込関数とオブジェクトについて学びました。宿題では、今回習ったことを使わずに回答してしまったところが多かったのでしっかり復習しなくちゃと思っています。
次はスクレイピング、楽しみですね✨

いつものようにツイートをまとめてあります。
[ノンプロ研 Python初心者講座第4回目 byな～](https://togetter.com/li/1811876)
C#でカノジョをつくる（7日目）

お疲れ様です。たなしょです。
今日はLINQを勉強したのですが、データの整形や加工をするための手段なので
ほとんど書くことがありません。
## イテレーターブロック
`yield`を付けることで列挙子が簡単に生成できる仕組みです。
列挙子は0から始まり1ずつ増加していく型というイメージを持っています。
あと列挙型は全要素分のメモリ領域を確保する必要がないこと特徴に上げられます。

## LINQ
C#の目玉機能ということで勉強するのを楽しみしてたのですが、蓋を開けたらデータ処理の方法だったので少しがっかりしました。
SQLの句のようなメソッド呼び出しデータを整形していきます。
正直一回で覚えられないのと現場で使ってみないとその効力が伝わりづらいのかなと思いました。
活用ケースとしては、DBからデータを取り出してそのデータを整形してviewに渡して画面に表示するなどが考えられます。
あとはデータセットを整形してCSVに出力したりですかね（Pythonのほうが便利なんじゃないかな...）
今回のカノジョを作るというテーマでC#を使ってるわけですが、たぶんLINQは使わないんじゃないかなと思いました。

LINQにはクエリ形式とメソッド形式と書き方が2種類あるそうです。

```c#
var dataA = new[]
 {
     new { Name = "A", Id = 1},
     new { Name = "B", Id = 2},
     new { Name = "C", Id = 3},
 };

 var dataB = new[]
 {
     new { Id = 1, value= 10},
     new { Id = 1, value= 20},
     new { Id = 2, value= 30},
     new { Id = 2, value= 40},
     new { Id = 2, value= 50},
     new { Id = 3, value= 60},
 };

 // query
 var i = from a in dataA
         join b in dataB on a.Id equals b.Id
         select new { a.Name, b.value };

 // method
 var i2 = dataA.Join(dataB,
     a => a.Id,
     b => b.Id,
     (a, b) => new
     {
         a.Name,
         b.value
     });
```

## 最後に
データ整形ならPythonのほうがわかりやすいかなと思いました。
LINQのソースコードを読むのは慣れが必要だと感じました（どの言語でもそうですが）。
AWS Step Functions を利用したCI フローについて

## はじめに
AWSにはAWS CodePipeline をはじめとして、CI/CD パイプラインを構築するためのツールが色々と揃っていますが、
今回、AWS Step Functions を利用して、デプロイフローを構築したところなかなかに使い勝手が良かったので、共有させていただきます。

## 構築したCI/CD パイプライン
構築したCI/CD パイプラインは次のような流れで実行されます。

1. Slackのショートカットからデプロイコマンドを実行
1. AWS chatbotからAWS Step Functionsを呼び出し
1. AWS Step Functionsでは、図のようにLambdaを実行して、CodeBuildを実行
1. CodeBuildが完了したら、deploy用のlambdaを呼び出す

**[イメージ図]**
![20211206-ci-cd-flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584011/555d547c-f3a4-4d77-c0e3-a7de24d12ef1.png)


## 実装内容の紹介

### SlackからAWS Chatbotを通じて、Step Functionsの呼び出し
Slackのワークフロービルダーを用いて、AWS Chatbotを通じてStep Functionsのステートマシーンの呼び出しを行うメッセージを送信できるようにしました。

下記のようなメッセージを最終的に呼び出します。
 
> @aws lambda invoke --payload {payload: ""} --function-name deploy-function --region ap-northeast-1
 
### AWS Step Functionsのフロー
Build Task => Deploy Task の２つのタスクだけをstatemachineに登録します。
 
### Build Task
Build TaskではAWS Lambdaを呼び出し、LambdaからCodebuildを呼び出します。

#### [AWS Lambdaの処理]
1. ParameterStoreから必要なparameterの取得
1. CodeBuildの呼び出し

#### [AWS CodeBuildの処理]
1. Dockerfileのビルド 
1. ECRにイメージの登録

State machineではCodeBuildの呼び出しまでしか行っていないので、waitForTaskTokenを利用してCodeBuildの処理完了まで処理を待つようにしました。
(waitの対応を行わないと、CodeBuildの呼び出しを行った時点で次のDeploy Taskが実行されます。)

**waitForTaskTokenを利用したwait対応**
1. Build Task のintegrationPatternにwaitForTaskTokenを設定
2. buildspec.ymlのpost_buildにsend-task-successを設定

こちらの対応を行うことで、CodeBuild完了までDeployTaskの実行を待つことができます。
 
### Deploy Task
Deploy TaskではAWS LambdaでtaskDefinitionの登録とfargateのserviceの更新を行います。

## Step Functionsを利用して良かったところ 
* 簡単にTaskを連携させるフローが組める
* Taskを追加することで、承認やe2eテストの処理を追加できる余地がある
 
## 今後、改善したいところ 
いったんCIフローを作成したのですが、まだまだ改善の余地はあるので少しずついいものにしていこうと思います。
直近では、下記のような改善を行おうと思っています。
 
1. AWS Step Functionsで直接CodeBuildを呼び出せるので、そちらを利用してみてコードをスッキリさせたい
1. e2eの自動テストを実行するTaskをフローに追加

## おわりに
[AWS Step Functions が AWS SDK 統合で 200 を超える AWS のサービスのサポートを追加](https://aws.amazon.com/jp/about-aws/whats-new/2021/09/aws-step-functions-200-aws-sdk-integration/)にもあるようにAWS Step Functionsはどんどん改善がされているので、キャッチアップしてCI/CDフローも改善していきたいと思います。
 
## 参考
* [AWS Step Functions が AWS SDK 統合で 200 を超える AWS のサービスのサポートを追加](https://aws.amazon.com/jp/about-aws/whats-new/2021/09/aws-step-functions-200-aws-sdk-integration/)
* [AWS Step FunctionsのCallback PatternsでCodeBuildをステートマシンに組み込んでみた](https://qiita.com/neronplex/items/02dfbdab6aa4cb3f2448)
numpyの学び（配列の中に配列を）

## はじめに
**「numpyでそんなことができたのか。。。」**
ある日バイト中に社員の方からコードを見てもらってるときに教えてもらったことが、僕の中であまりにも感動してしまったので、思わず記事にしてしまいました。
研究でしかpythonを使わず、`numpy`もそんなに使ってないとはいえ、少しは使えるようになってるかなと思ってた矢先の出来事でした。
python playerの人は知ってる方も多いかもしれませんが、興味本位で見てくだされば幸いです。

## np.zeros
`np.zeros`とか`np.ones`とか`np.empty`で初期化した配列を作れるのは、周知の事実ですがサイトとかみると
1次元配列・2次元配列でしか紹介されてないですよね。
こんな感じです。↓

```.py
import numpy as np
a = np.ones(5) #要素が5個の一次元配列
b = np.ones((4, 5)) #4×5の2次元配列
```

それでは、配列の中に配列を入れる場合にはどのように初期化するのでしょうか？
例えば、2次元配列の要素に2次元の要素を入れたいときとかです。(この場合は次元的には3次元になります。)
こんな感じの配列です。↓

```.py
[[[1,1],
 [2,2]],

 [[3,3],
 [4,4]]]
```

では、解法と行きましょう。<font color="gray">（出力結果が見やすいように、小さい配列にしてます）</font>

```.py
array = np.zeros((2, 2, 4, 4), order="C")
```

出力結果（この場合には次元は4次元になります。）

```.py
array([[[[0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.]],

        [[0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.]]],


       [[[0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.]],

        [[0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.],
         [0., 0., 0., 0.]]]])
```

無事`2×2`の配列の要素に`4×4`の配列を定義することができました！
ちなみに、`np.zeros`より`np.empty`の方が処理速度は早いです。

>* [処理速度参考サイト(NumPyのemptyで空（長さ0）の配列を作る)](https://helve-blog.com/posts/python/numpy-empty-array/)

**完**

## 終わりに
今回はnumpyの感動した出来事をまとめてみました。
「numpy...貴様そんなことができたのか！」
と僕の知識のなさをnumpyのせいにして終わりにしたいと思います。
誰かのお役に立てれば幸いです。
Drupalというキャリアについて（ポエム）

Drupalistのみなさんこんにちは :wink: Twitter放置しててすいません、スタジオウミの新田です。

コロナを期に北海道にUターンさせてもらって半年が経ちました。高校生のころからずっと夢見てた田舎暮らしが、まさかエンジニア3年目で実現できるとは。いい世の中になったものだなぁと思います。

いつも個人的メモも兼ねて技術ネタを投下してるんですが、今回はいい機会なのでDrupalのキャリアについて最近思ってることをつらつら書いてみました。記事の内容は個人の主観で、会社とは無関係なのであしからず。

## 未経験でDrupalはやめた方がいい
私はエンジニア未経験でいきなりDrupal専門会社に入ったのですが、これからエンジニアになろうとしている人はDrupalから始めないで、Ruby on RailsやLaravel、Symfonyなどコーディング主体のフレームワークから入る方がいいと思います。
その理由はDrupalはノーコード、ローコードが特徴なので、実際の開発では管理画面をいじっている時間が長く、コードを読んだり書いたりする力がつきにくいということです。さらにコーディングする場面でもhookという仕組みを使えばクラス構造などを考えなくてもなんとなく実装できてしまうので、オブジェクト志向プログラミングについてしっかり学んだり考えたりする機会が少ないです。（無いわけではないけど）
エンジニア未経験の人は地力をつけるためにもRoRなどのフレームワークを使って、読んで書いてレビューしてもらうという経験をたくさんしておいた方がいいと思います。なのでDrupal（他のCMSも？）避けるのがベターではないかと思います。

## Drupalに向いてる人
Drupalはむしろ、「コーディングはやり尽くした/飽きた」というベテランエンジニアに向いてるのではないでしょうか。ワークフローだとか権限だとか大規模ウェブサイトに関する全体的な視野を養いたい人にもいいかもしれません。
あとは、話し上手より聞き上手が向いてるんじゃないか？と個人的に思います。Drupalという**すでに出来上がってる巨大システム**を根気強く学ぶ姿勢が必要です。たいていの人は「勉強しても勉強しても付くのはDrupalのAPIの知識だけじゃねーかよ、ﾊﾞｯｷｬﾛｰ」という捨て台詞を残して去っていきますが。
さきほど読む力と書く力が付きにくいと書きましたが一定のレベルに達するとコアやコントリビュートモジュールを読む機会はたくさんあります。

## フロントエンドエンジニアの嘆き
以前辞めていったフロントエンドの方が言ってたんですけど、デカップルドじゃないDrupalのフロントエンドは特殊すぎて知識が他で流用できないので、キャリアパスとして微妙なんだそうです。デカップルドにしてReactとかイケイケフレームワークを使っていただくのが、フロントエンドのエンジニアを引きつけるには必要...ってこと!?

## Drupalエンジニア=安い人材?
よくDrupal開発会社のサイトにDrupalエンジニアは人件費が安いのでサイトも安く作れますと書いてることがあります。**Drupal以外で使えない知識しか身につかない上に給料も安いとはどういうことだ**。我断固抗議斯様風潮。

## なんで3年もDrupal続けたの
「最初の会社は1年でやめろ」っていう記事もよく（？）見かけますが、私は未経験で雇ってもらったから3年は働こうと思っていました。あとまだDrupalについて理解しつくしていないし、全然コントリビュートもできていないので、中途半端な状態で辞めるのもなんだかな〜と思ってここまで来ました。最近上司に「新田さんが辞めたら困る」って言ってもらったし、会社として教育費をペイできるところまで来たんじゃないのかな？と思っています。今後のことはまだわからないですが、お給料次第かな :wink: :star:なんちて。（圧）
技術的には、もっと大きくて複雑なサイトをやってみたいですね。

## この3年で最大の修羅場
それは某政府系サイトのリプレース案件。絶対ムリなスケジュールの中データ設計とバックエンドを任されてとにかく自分が何を開発してるのもよくわからないけどとにかく進めないといけないっていう状態で、ディレクターと殴り合ったりしてるうちに生理が3ヶ月止まりました :wink: 書いてて思ったけど今の会社とかDupralやめるとしたらこのときみたいにスケジュールが無理な案件来たら、かも。Drupalは短期間でサイト作れますをウリにしてるからその危険性は常にあるんですよね。

## Drupalのラーニングカーブ
この崖を登る価値があるかどうかは、あなただけが知っているのです...（心に直接語りかける）
![learning curve.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/c1b67a51-d8ae-d022-7d88-10aa50d88abc.gif)

## Drupalの将来性
日本でもDrupalを扱う会社が増えてるし、うちの会社でも扱う案件の規模が大きくなってきたので、Drupal界はまだまだこれから成長していきそうな雰囲気をひしひし感じています。Drupalが終わりそうだから転職するというパターンは考えなくてもよさそうです :wink: 

なんか最後のほうに行くにつれ適当になってしまいましたがｗ

それではみなさん、よいクリスマス&年末を :wink: :heart:
現在のカルチャーに影響を受けず西暦をDateTime型に変換する

タイ語環境の暦では「2020/7/15」は「15/7/2563」となるが、new DateTime(2020, 7, 15)のようにすると543年前の日付になってしまう。

# 西暦の2020, 7, 15をDateTime型に変換

```C#
DateTime date = CultureInfo.InvariantCulture.Calendar.ToDateTime(2020, 7, 15, 0, 0, 0, 0);
```

# 西暦の"2020/07/15"をDateTime型に変換

```C#
DateTime.TryParseExact("2020/07/15", @"yyyy\/MM\/dd", CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime date)
```
GithubのPullRequest作成時のコメントで気をつけていること


# はじめに
本記事は [ZOZO Advent Calendar 2021](https://qiita.com/advent-calendar/2021/zozo) の8日目の記事です。

## 概要
タイトルの通り、[GitHub](https://github.com/) のPull Request（以下、PR）のコメントを書くときに**個人的に**気をつけていることを記載した記事です。
チーム内でPRのコメントがわかりやすいと言って頂けたので、調子に乗って社外公開に踏み切りました。
※筆者はフロントエンジニアのため、フロントの実装に関する記載になります。

### 書いてあること
- PRの作成時のコメントで心がけていること

### 書いていないこと
- PRの作成方法や手順

# 内容

いつも記載している内容は下記の項目です。

![スクリーンショット 2021-12-07 21.33.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186755/de69fb36-25da-6a00-3d2c-d10745cafa55.png)

上記を記載する上で3点、気をつけていることがあります。

## その1：対応内容を知らない人が見てもわかるようにする

PRに記載している「概要」「対応したこと」「対応していないこと」について説明します。

### 「概要」
実装者以上にレビュアーが対応内容を把握しているケースはあまり多くないと思います。
どういう意図で実装されているかを伝えるため、対応を行う背景、方針などを記載します。画面のデザイン変更であれば、変更箇所をわかりやすくするため、変更前と後の画像を添付します。

例）
![変更前後比較の例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186755/a6b7201c-a4dd-743a-462e-a5439b0a5270.png)

### 「対応したこと」「対応していないこと」
大きなPull Requestよりも細かいPull Request派のため、この項目を追加しております。対応したことは、字のごとく実装した内容を記載します。対応していないことは、別PRに分ける場合はその旨を、事情があって実装をやめたものがあればなぜやめたのか記載しておきます。

## その2：レビュアーが困りそうなこと、疑問に思うことを予想して書く

PRに記載している「確認方法」「補足」について説明します。

### 「確認方法」
画面によっては、認証が必要だったり、特定の手順を踏まないと進めないページがあったりするため、リンクやページの遷移を記載します。


例）PCのZOZOTOWNの登録情報ページに遷移したい場合
`トップページ > ヘッダーの「ログイン」を押下 > ログイン情報を入力し、ログイン > ヘッダーのアカウント名様をホバーし、表示されたモーダルの「登録情報」を押下 > 表示`

### 「補足」
既存の実装やブラウザの仕様上など、理想の実装とは異なる実装をすることが多々あります。
背景やなぜ現状の実装になっているのか、を記載しておくと余分なコメントのやりとりが不要になります。

また、補足内容がコードと共に説明した方がわかりやすい場合は、コード部分にあらかじめコメントすることもあります。

![コードとともに補足コメントをする.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186755/9a1865fc-cc4c-e72f-405a-407b081f52a2.png)

## その3：省略できるところは省略する

PRに記載している「外部リンク」について説明します。

### 「外部リンク」
参照しているPRがある場合、すでに仕様書を作成している場合はそのURLを添付し、詳細はこちらをご確認ください、と記載します。
手を抜けるところは手を抜きます。

# まとめ
いかがでしたでしょうか？

その1〜3をまとめると、レビュアーや未来の実装者（自分も含む）に思いやりを持って、手を抜けるところは抜いて、必要な情報を記載しようといったところでしょうか。

少しでもお役に立てる部分があれば幸いです。

明日は [calorie - Qiita](https://qiita.com/calorie) さんの記事です。
明日もお楽しみに✨
アジャイル開発で使っているテストのテンプレートの紹介

1か月程度のアジャイル開発のプロジェクトで使っているテストのテンプレートを紹介します。過去に経験したウオーターフォール開発時のテンプレートに比べてとってもコンパクトでテストしてても特に困らないのでアジャイル開発って素敵です。

**◆テンプレート本体**
Googleスプレッドシートに全部まとめてます。テストに必要な情報がそこに全部入っているので見返すのも便利です。

**◆必須プロセスのチェックリスト**
「テスト設計の内容を開発メンバーに説明して合意を取りましたか？」等の確認を怠るとトラブルになりやすいプロセスはチェックリストにして必ず実施するようにしています。特に認識齟齬は自分だけでは気づけないので必ず開発メンバーに確認を取るようにしています。

**◆仕様書など開発資料へのリンク一覧**
テスト設計に必要な資料に素早くアクセス出来るようにしておきます。

**◆テスト環境などテスト実施に使用するリソース一覧**
開発チームによってテスト環境や使用するアカウントが異なっていたりするので、これも整理しておきます。

**◆チームメンバー一覧**
何か困ったときに相談できるメンバーの一覧です。

**◆リリース時期とテスト期間**
リリース時期と開発状況とテストの内容からテスト期間を決めていきます。大事なのは余裕を持ったテスト期間です。守れない期間を設定しても信用を落とすだけなので、正直に開発メンバーに相談して確実に実施可能なテスト期間を設定します。

**◆テスト要求とテスト要件の一覧**
テスト要求が開発プロダクトに求められる品質関連の要求で、それを詳細化・具体化したのがテスト要件です。テスト要件は開発メンバーにレビューしてもらい、テスト要件を全て満たせばテスト完了です。

**◆テストケース**
テスト要件に沿ってテストケースを作成します。またテストケースはテスト実施者がそれを読んでテスト実施可能な粒度で記述します。ちなみに「誰にでも分かるように書く」は最悪です。そんな冗長なテストケースを書く時間があったら自分でテストするか、適切な粒度の記述でテスト実施できるようにテスト実施者を教育します。

**◆テストケースの中間成果物**
組み合わせ表など、何を考えてどうテストケースを作成したのか後で見てわかるものを残しておきます。これがあるとテストケースのチェックや修正にも使えて便利です。

**◆不具合一覧**
アジャイル開発だからか開発メンバーが優秀だからか、一回のイテレーションで検出される不具合が10件程度なので、スプレッドシートでの管理で問題なしです。不具合もすぐ報告して対応も早いし、必要ならリモートで画面共有して不具合を説明するので、不具合情報の記述も必要最低限で済んでいます。

**◆不具合画像一覧**
不具合一覧のシートに画像情報も含めると見づらくなるので、画像は別シートに分けてリンク情報のみ不具合一覧に載せる形で運用してます。

**◆テンプレートまとめ**
ウオーターフォール開発時のテンプレートとの主な違いは必要最低限の記述で済ましていることですが、アジャイル開発から追加したものもあります。それは不具合に対して「後日再検討」ステータスを追加しています。その意味は現在のイテレーションでは修正せず、開発プロジェクトが一段落して全体的な改修を行う際に修正する不具合は「後日再検討」にしています。
Bigqueryでループ処理して取得したレコードを利用して次のデータを取得する

この記事は[PTA](https://qiita.com/wataru420/items/8968f1127d0af00aea99)で開催している[CyberAgent PTA Advent Calendar 2021](https://adventar.org/calendars/6450)、10日目の記事です。

去年のアドベントカレンダーはこちらです、
[CyberAgent PTA Advent Calendar 2020](https://adventar.org/calendars/5741)

みなさんは、あるレコードから取得した条件を元に別のテーブルのレコードを取得したいことはありますか？
例えば広告の場合、ある申込からその期間のログを取得したいというようなケースだ。
このような場合、すべてのログをJOINしてから集計すれば一見良さそうなのですが、日付パーティション等が使われていると、先にパーティションを確定する事ができず、最悪フルスキャンする事になります。

そこで今回はBigQuery ScriptingのWileを使って実現してみました。

``` sql
# 変数の宣言
DECLARE x INT64 DEFAULT 1;
DECLARE f,t DATE; 

# 申込ID
create temporary function ids() as (
    ['AD001','AD003']
);

# 結果格納用の一時テーブル
CREATE OR REPLACE TEMP TABLE _SESSION.ad_summery(
    dt DATE,
    order_id STRING,
    ad STRING,
    user_id STRING,
);

# ループ処理
# 申込IDの長さまで繰り返し広告ログを取得
WHILE x <= array_length(ids()) DO
SET f = (
SELECT from_dt FROM `order`
WHERE
    _PARTITIONDATE = CURRENT_DATE()-1
    AND order_id = ids()[ORDINAL(x)]
);
SET t = (
SELECT to_date FROM `order`
WHERE
    _PARTITIONDATE = CURRENT_DATE()-1
    AND order_id = ids()[ORDINAL(x)]
);

INSERT _SESSION.ad_summery (
  SELECT
    time,
    order_id STRING,
    ad STRING,
    user_id STRING,
  WHERE
    _PARTITIONDATE BETWEEN DATE_ADD(f, INTERVAL -1 DAY) AND t --パーティションは広めに取りたい
    AND time BETWEEN f AND t --期間内のログだけ取得したい
    AND order_id = ids()[ORDINAL(x)]
);
SET x = x + 1;
END WHILE;
# ループ処理終了

SELECT
*
FROM _SESSION.ad_summery
```

### 変数の宣言
はじめにループ処理で利用する変数を用意します。
ループのカウンターXと一時的に日付を格納するfとtを用意しました。

### 申込ID
次に実際に手動で指定する部分です。
クエリを発行する人がここをいじるだけで結果を取得できる状態を目指します。

### 結果格納用の一時テーブル
ループ内のデータをループ外の領域に保存する必要があります。
[一時テーブル](https://cloud.google.com/bigquery/docs/reference/standard-sql/scripting-concepts#temporary_tables)を利用してセッション期間中だけ存在する領域を生成します。

### ループ処理
ループ処理では上部で指定したIDの数だけループを行います。
必要な変数に値を格納していきます。（ここの処理が冗長なので、もっといい方法があったら教えてほしいです。）
そしてその変数を利用してInsert処理を行います。

### ループ処理終了
あとは生成した一時テーブルから必要な情報を取り出すだけです。


BigQuery Scripting、なかなか便利ですね！
yamlファイルを作ってpythonで使用してみる mshmura

## 目的

- yamlファイルの利用になれる

#### 注意点 
- yaml実務未経験者が書いているので、不備等あればご指摘いただければ幸いです。

## yamlファイル

```test.yaml
shop_type: fruits stand

## リスト
fruits_list:
  - "りんご"
  - "バナナ"
  - "みかん"

## 辞書型
fruits__price_dict:
  "りんご" : 100
  "バナナ" : 150
  "みかん" : 399

## 参照される側
shop_name: &test_ref "田中果物株式会社"
## 参照する側
shop_company_name: *test_ref

## 挿入(今回)

## あまり下記のような使い方はしないかもしれないが、思いついたので記載
# 更新前
staff_dict: &staff_dict
  staff1 : "吉田"
  staff2 : "井上"
  staff3 : "田中"

# 更新1回目
staff_dict_updated: &staff_dict_updated
  <<: *staff_dict
  staff2: "木下(name change)"
  staff4: "竹下(new staff)"

# 更新2回目
staff_dict_updated2: 
  <<: *staff_dict_updated
  staff3: "近藤(name change)"
  staff5: "佐々木(new staff)"

description: "\
  新鮮な野菜を扱っています。\
  とても安いです。\
  いらっしゃいませ。"

```

## 実行例

``` test.py
import yaml
with open('test.yaml','r') as f:
    shop_info = yaml.safe_load(f)

# 店のtypeを表示
print("店タイプ:  ",shop_info["shop_type"])

# 果物リストの2番目を表示
print("果物リストの２番目:  ",shop_info["fruits_list"][1])

# ミカンの価格を表示
print("ミカンの価格:  ",shop_info["fruits__price_dict"]["みかん"])

# 会社の名前を表示
print("会社名:  ", shop_info["shop_company_name"])

# 更新前のスタッフリストを表示
print("スタッフリスト:  ",shop_info["staff_dict"])

# 更新1回目のスタッフリストを表示
print("スタッフリスト更新1回目:  ",shop_info["staff_dict_updated"])

# 更新2回目のスタッフリストを表示
print("スタッフリスト更新2回目:  ",shop_info["staff_dict_updated2"])

# 店の説明
print("会社説明:  ",shop_info["description"])

```

## 実行結果

```
店タイプ:   fruits stand
果物リストの２番目:   バナナ
ミカンの価格:   399
会社名:   田中果物株式会社
スタッフリスト:   {'staff1': '吉田', 'staff2': '井上', 'staff3': '田中'}
スタッフリスト更新1回目:   {'staff1': '吉田', 'staff2': '木下(name change)', 'staff3': '田中', 'staff4': '竹下(new staff)'}
スタッフリスト更新2回目:   {'staff1': '吉田', 'staff2': '木下(name change)', 'staff3': '近藤(name change)', 'staff4': '竹下(new staff)', 'staff5': '佐々木(new staff)'}
会社説明:   新鮮な野菜を扱っています。とても安いです。いらっしゃいませ。

```
InfluxDBをGCPで動かす。

# はじめに

Prometheusの外部保存装置として、InfluxDBというソフトがあるので、それをGCPの一番安いインスタンスで動かして外部保存装置とする。

# GCPでインスタンスを立てる

GCPには、VMインスタンスというサービスがあるので、それを使用して、Ubuntuのマシーンを作る。
以下の条件だと、一か月7.11$ぐらいになる

|名称|設定|備考|
|--|--|--|
|リージョン|us-central1|アイオワ|
|シリーズ|E2||
|マシンタイプ|e2-micro|2 vCPU, 1GB|
|image|Ubuntu 20.04||

作成後、SSHでターミナルでアクセスを行いその環境下で作業を行う。

# SWAPの設定
デフォルトのままだと、InfluxDBがメモリを食いつぶす可能性があるため、
SWAPが使えるようにするため、SWAP機能を使用して、ディスクを使用し使えるメモリの量を以下のコマンドで増やす

```bash
sudo fallocate -l 1G /swap
sudo chmod 600 /swap 
sudo mkswap /swap
sudo swapon /swap
```

`/etc/fstab`に以下のテキストを追加して、再起動してもSWAPが有効にする

```
/swap none swap sw 0 0
```

# InfluxDBを起動

InfluxDBのサーバを立てるのに、コンテナを使用すると作業が行いやすいので、Podmanのインストールを行いその環境下でInfluxDBのコンテナを立ち上げる。

## Podmanのインストール

```bash
OS=xUbuntu_20.04
VERSION=1.22

echo "deb https://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/$OS/ /" > /etc/apt/sources.list.d/devel:kubic:libcontainers:stable.list
echo "deb http://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable:/cri-o:/$VERSION/$OS/ /" > /etc/apt/sources.list.d/devel:kubic:libcontainers:stable:cri-o:$VERSION.list

curl -L https://download.opensuse.org/repositories/devel:kubic:libcontainers:stable:cri-o:$VERSION/$OS/Release.key | apt-key add -
curl -L https://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/$OS/Release.key | apt-key add -

apt-get update
apt-get install podman
```
## InfuxDBの起動
influxdbの設定ファイルを以下の通り作成する。

```conf:influxdb.conf
[meta]
  dir = "/var/lib/influxdb/meta"

[data]
  dir = "/var/lib/influxdb/data"
  engine = "tsm1"
  wal-dir = "/var/lib/influxdb/wal"
  cache-max-memory-size = "512m"
  cache-snapshot-memory-size = "10m"
  compact-full-write-cold-duration = "1h"
  max-concurrent-compactions = 1
  compact-throughput = "12m"
  compact-throughput-burst = "12m"
  max-values-per-tag = 25000
  max-series-per-database = 250000
  max-index-log-file-size = "256k"
  series-id-set-cache-size = 25
[http]  
  # auth-enabled = true #認証できるユーザを作成したら有効にする
  max-body-size = 12500000
[logging]
  label = "error"
```

```bash
podman run --name=influxdb -p 8086:8086 -d -v $PWD/influxdb:/var/lib/influxdb -v $PWD/influxdb.conf:/etc/influxdb/influxdb.conf:ro influxdb:1.8.10
```

上の設定で、InfluxDBのサーバを作成完了する。

# サービスの公開について

firewallで8086ポートを開放するか、nginxなどのソフトで、8086へのリバースプロキシを設定することで、サービスを公開できる。

一応、以下のようにnginxのconfigファイルを作成することで作ることは可能である。

```conf:/etc/nginx/conf.d/https.conf
erver {
  listen  443 ssl;
  ssl_certificate /key/server.crt;
  ssl_certificate_key /key/server.key;
  location / {
     proxy_pass http://localhost:8080/;
  }
  location /api/v1/prom/ {
     proxy_pass http://localhost:8086/api/v1/prom/;
  }
}

```

上記ファイルで、3000ポートに割り振っているのはgrafanaを3000ポートで解放しているため、振り分けできるようにした。

# サービスを運用してみての感想

Prometheusから、InfluxDBサーバにむけてデータ送信する運用を試してたけど、
早いときで1日、持っても5日ぐらいと結構短い期間でInfluxDBによる負荷がかかりすぎて、InfluxDBのコンテナが落ちた。
設定次第では、落ちないように変更できるかもしれないが、InfluxDB側の設定では難しいので、
送信するPrometheusをいじって必要最低限しか送信しないほうが良いかもしれない。

また、これを実行してみるとDBサーバって意外に落ちることが分かってAWSやGCPのサービスであのように料金設定している理由に納得がいった。
M1 Pro搭載MacBook Proを触ってみた

#はじめに
HCB Advent Clendar 2021の7日目を担当するKimです。
名前と苗字から最後の文字を抜いているだけの日本人です。
知り合いに誘われて、qiitaに初投稿します。
今回は，先日届いた新型MacBook Proと今まで使っていた2019年モデルのMacBook Proと比較して，個人的に良かった所とイマイチな所を紹介したいと思います！
#目次
 1. MacBook Proのスペック比較
 1. 良かった所
    1. 物理キーの存在
    1. SafariやXcodeの動作が高速になった
    1. ディスプレイ接続時に暗転しなくなった
 1. イマイチな所
    1. Pythonライブラリが一部非対応
    1. PCゲームはまだWindowsの方がいい
    1. 使用感はあまり変わらない
 1. おわりに
 
#MacBook Proのスペック比較
|モデル|画面サイズ|CPU|GPU|メモリ|
|:--|:--:|:--:|:--:|:--:|
|MacBook Pro(2021)|14インチ|Apple M1 Pro 10コア|Apple M1 Pro 10コア|16GB<br>ユニファイドメモリ|
|MacBook Pro（2019）|13インチ|2.4 GHz クアッドコアIntel Core i5|Intel Iris Plus Graphics 655 1536 MB|8GB|
#良かった所
##物理キーの存在
2019モデルのMacBook Proから新型MacBook Proへの変更でタッチバーから物理キーに戻りました。
タッチバーはあまり好評ではなく、周囲のMac使いに聞いても、タッチバーへのポジティブな感想はあまり見かけませんでした。
僕も例に漏れず，siriの誤動作や照明や音量の調整が面倒くさかったのですが、物理キーに変更してボタンを押すという１アクションで調整できるようになって、作業中のちょっとしたストレスがなくなりました。
## SafariやXcodeの動作が高速になった
新型MacBook Proに変えて一番体感したのは、やはりブラウザやXcodeを起動・操作している時の速度が向上したことです。
ブラウザで言えば、僕はSafariとGoogle Chromeを使っていて、以前のMacBook ProだとSafariが少し早いかな？くらいの違いしかなかったのですが、M1Proを搭載したことで、明らかにSafariの方が起動とページ表示速度が速いように感じられました。
今後は英語ページの閲覧時以外はSafariを使うようになると思います。（英語翻訳の無料拡張機能来ませんかね←）
##ディスプレイ接続時に暗転しなくなった
これは地味に嬉しかったことで、僕が使っている接続端子の接触がよろしくないのか、以前のMacBook Proだとディスプレイを接続・切断したときに、画面が暗転していました。
これにより5秒ほど作業が止まってしまい、気分はYouTubeの広告スキップを待っている状態でした。
新型MacBook Proはディスプレイが切断してしまっても作業が止まることがなく、とても快適に作業できています。
#イマイチな所
##Pythonライブラリが一部非対応
これは買う前に調べておけということで僕が悪いです。orz
僕はpython3で作業することでありますが、「Numpy」や「Matplotlib」がまだインストールできないことをコンソール上で知った時は愕然としました。
個人作成のライブラリはインストールできたので、余計に居た堪れない気持ちに...
M1以降は機械学習が速くなったと聞きますが、自分の環境に適応できるか事前に調べておくことが大事ですね。

##PCゲームはまだWindowsの方がいい
M1Pro・MaxのGPUスペックがゲーミングPCのそれと負けず劣らずということを聞き、parallel社が出している「[Parallels Desktop 17 for Mac](https://www.parallels.com/jp/pd/general/?gclid=Cj0KCQiAqbyNBhC2ARIsALDwAsCmhhBXIiARs1PVRUFip7oALaqjNpbfNd4ayWLDylMS0WXIQFPN7hUaAmVKEALw_wcB)」を入れて、以前買っておいた「ダークソウル3」と「ペルソナ４ ゴールデン」を試しに起動してみました。
結果としては、「ダークソウル３」はモデリングが恐ろしいことになり、「ペルソナ４ ゴールデン」はかくつきと移動時の画面のぼやけがひどいという散々な結果でした。
PCハード周りの知識が皆無なため、M1 Proが悪いのか、Pallallesの仮想環境がゲームには適していないのかはわかりませんが、PCゲームはまだWindowsでやった方が良さそうです。（M1Maxだと正常に動作するかも？）
##使用感はあまり変わらない
ブラウザの動作速度の向上など良くなった点はあるものの、現状だと作業が爆速になったり、プログラミング言語を一瞬で理解できるような劇的な変化はなかったです。（それはそう）
今後、動画編集や本格的な機械学習をする際に、大きく違いを体感するかもしれませんが、少なくともネットサーフィンやコーディングをする程度ならM1で事足りるのかなと思います。
#おわりに
初めてな記事投稿で、どっちつかずな意見のオンパレードでしたが、少なくとも僕は新型MacBook Proにとても満足してます。
今回書いた内容が読んだ人の判断に0.1％でも役立ったのなら幸いです！
なぜ乱数のシード値は42なのか？

# 背景

乱数を固定するときシード値を設定するが、そのシード値にしばしば**42**を用いる。
しかし、なぜ42を用いるのか、が気になったので、調べてみた。

#### pythonで乱数を固定する例
```python:random.py
import numpy as np
np.random.seed(42)
# 一回目
print(np.random.randint(0, 1000, 10))
# -> [102 435 860 270 106  71 700  20 614 121]

# 二回目
np.random.seed(42)
print(np.random.randint(0, 1000, 10))
# -> [102 435 860 270 106  71 700  20 614 121]
```

ちなみに、42以外にも、1234や2021（西暦）も定番である。

#乱数とは

乱数とは、「ランダムに出力された数字」のことである。

例えば、ポケモンのゲームでは、同じ相手に同じ技を繰り出しても、毎回同じダメージになるとは限らない。

これは乱数を用いているからである。

[ポケモンのダメージ計算式](https://daichan-blog.com/archives/1219)は

>ダメージ数 = {(攻撃側のLv × 2 ÷ 5＋2) × わざの威力 × 攻撃or特攻の値 ÷ 防御or特防の値 ÷ 50＋2}× (85～100) ÷ 100

で表されるらしいが、(85～100)の項が乱数に相当する。
85から100の間をランダムな値を取ることで、ダメージがランダムに変動する。

この乱数によるダメージの変動が、ガチャのようなドキドキ感を演出するのである。

このように、乱数は様々な場面で応用されている。

#シード値とは

しかし、乱数を固定したい場合もある。

例えば機械学習モデルを作成し、精度を比較するとき。
様々なモデルを作成し、その精度を比較するとき、乱数によって精度がブレてしまっては比較ができない。
そこで乱数を固定することで、横比較を可能にする。

その固定に用いるのが、シード（seed）値である。
シード値を一定の値に固定することで、何回実施しても同じ乱数が出力されるようになり、統制が可能となる。

#乱数のシード値が42の理由

さて、本題である。
シード値で頻出の数字：42は、[ダグラス・アダムス](https://ja.wikipedia.org/wiki/%E3%83%80%E3%82%B0%E3%83%A9%E3%82%B9%E3%83%BB%E3%82%A2%E3%83%80%E3%83%A0%E3%82%BA)のSF小説「[銀河ヒッチハイク・ガイド](https://ja.wikipedia.org/wiki/%E9%8A%80%E6%B2%B3%E3%83%92%E3%83%83%E3%83%81%E3%83%8F%E3%82%A4%E3%82%AF%E3%83%BB%E3%82%AC%E3%82%A4%E3%83%89)」、から来ていると言われている。
実はこの小説、全世界で約1,600万部が売れている、らしい。

小説の終盤で、登場人物FookとLunkwillの子孫が、スーパーコンピュータDeep Thoughtと会話する、以下のシーンがある。


> [Seven and a half million years later…. Fook and Lunkwill are long gone, but their descendants continue what they started]
“All right,” said Deep Thought. “The Answer to the Great Question…”
“Yes..!”
“Of Life, the Universe and Everything…” said Deep Thought.
“Yes…!”
“Is…” said Deep Thought, and paused.
“Yes…!”
“Is…”
“Yes…!!!…?”
“Forty-two,” said Deep Thought, with infinite majesty and calm.”
―Douglas Adams, The Hitchhiker’s Guide to the Galaxy

和訳すると以下のようになる（筆者拙訳注意）

> [750万年後...。FookとLunkwillが亡くなってから長いが、彼らの子孫は、彼らが始めたことを続けていた。]
『わかった。』 Deep Thought は言った。
『その偉大なる質問への答えは...』
「やったぞ...」
『その生命・宇宙・森羅万象に対する偉大なる質問への答えは...』
「よし！」
『答えは...』Deep Thoughtは続けた。
「なんだ？」
「答えは！？」
『42』と、 Deep Thoughtは深い威厳と落ち着きで答えた。 

参考：https://medium.com/geekculture/the-story-behind-random-seed-42-in-machine-learning-b838c4ac290a

このシーンから、42という数字がミームとなっているのである。

#### YouTubeに映画版のそのシーンがありました

（Deep Thoughtの見た目と声が想像と違う...）

https://youtu.be/aboZctrHfK8

#悪魔の数字42

ちなみに、なぜ42という数字がこの小説で用いられたかは、ファンから多くの憶測が出ていた。

- 42を2進数で表すと101010になるから。 
- 光は水面で42度屈折することで虹ができるから。
- 光は陽子の直径を横切るのに$10^{42}$秒必要だから。
- ソフトカバー本の平均的な行数が42だから。
- 本に度々出てくるスポーツ、クリケットのルール数だから。

しかし、作者は後日、[42の理由](https://groups.google.com/g/alt.fan.douglas-adams/c/595nPukE-Jo/m/koaAJ3tPBtEJ?pli=1 )を明かしている。

曰く、

>“It was a joke. It had to be a number, an ordinary, smallish number, and I chose that one. I sat at my desk, stared into the garden and thought ‘42 will do!’ ”

和訳すると以下のようになる（筆者拙訳注意）

>ただの冗談だった。なんの変哲もない、小さい数字である必要があった。机に座り、庭を眺めていたら浮かんできたんだ。「42だ！」と。


なんやそれ。
BibTeXがフリーズするとき

# はじめに

修論を執筆中にBibTeXがフリーズして大変困ったので、解決策を共有します。

# 原因と解決策

私の環境では、ローマ数字の2「Ⅱ」がページ数などに含まれているとフリーズすることがわかりました。

とりあえず英数字で置換すると解決します。
【React × Typescript 】+ MaterialUI の環境構築


### create-react-appでReact×Typescriptのドキュメントを作成

```
npx create-react-app my-app --template typescript
```

### MaterialUIをインストールする

```
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
```
引用

> https://mui.com/getting-started/installation/



完成したpackage.json

```package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/style": "^0.8.0",
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.2.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.37",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.5.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

ここまでできたらあとはよしなに書いていけばMaterialUIが使えます。

---

### 注意点
> https://mui.com/

このTOPページのコマンド
`npm install @mui/material`
だけでは機能しない。



@emotion/react @emotion/styled　この２つが無いと以下のエラーが出ます。

```
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
```

簡単な問題ですが、よく見ないとつまずいてしまったため同じ問題にあたった方の助けになればうれしいです。
社内で自動化普及活動を始めて1年で思う事

◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

## はじめに。
私は社内でテスト自動化の推進を担当してます。

自動化とはどんなものなのかを社内へ周知し、活用してもらうことが主な仕事です。

２年前、他業種からゲームが好きだという理由だけで、ゲームのソフトウェアテストという全く違う業界へ飛び込みました。

そんな私が入社後初めて取り組んでいることが、この「テスト自動化」であり、それを「教える」ということです。


##私の初期ステータス

この記事を書く１年前の自分は「テスト自動化」という物の本質を何も知らない状態からの出発でした。

#####自動化　＝　全部自動でプログラムが処理してくれる

…いや、そこまではいかないが「人間の手以上に万能な物」だという考えはどこか頭の片隅にあったように感じます。
「AI」や「自動化」という言葉のイメージを限りなくプラスに受け取っていたのです。

##「テスト自動化」の現実

「テスト自動化」の活用方法は当初私が思っていたものとは違いました。

「全部自動でプログラムが処理してくれる」ものではなく、
リグレッションテストはもちろんのこと、テストケースをテストする過程で手間になる作業を自動化させるなど、作業を効率化するための手段（道具）であることがわかりました。

私の中の誤解が解けると同時に、同じように「テスト自動化」を誤解している人がどれほど社内にいるか気になったのです。

##社内のテスト自動化の認識
まず私は、”社内調査”で大きく以下のアンケートを実施しました。

><2021/1月 にアンケート>
>>・社内開発ツール（全体）の利用率
>・案件での利用率
>・プログラミングの知識　　その他…

社内のツール（全体）に対して何も知らない（わからない）と答えた人が全体の意外にも多数でした。
当時は人間の手で作業を求められる案件も多く、テスト自動化の導入への壁があったのも事実です。
なんとなくわかると答えた人でさえ、自動化といえば「効率化」するものという認識でした。

弊社では、自動化エンジニアが組んだ自動化スクリプトを、案件に所属するテストチームが受け取り使う体制をとっています。
つまりテストチームは自分達でスクリプトを組まないので、自動化についてやツールの操作方法について正しく認識している人が少数であることがアンケートで明確化されたのです。

社内の認識を変えるところから始めないといけない、私の仕事は簡単ではないな、と思った瞬間でした。



##まず取り組んだこと

私が一番必要だと思ったのは「知ってもらう」ことです。

弊社は私のように他業種から転職している人がとても多いのです。
そういう人へわかりやすく教えられるのは私にしかできない事だし、使命だと思いました。

そこでメンバーひとりひとりと連絡を取り、研修・勉強会の予定を組んでいきました。
内容は大きく分けて下の2つです。

・自動化の基礎の考え方
・開発ツールの使い方


##教えていて思ったこと・意識したこと
####1. とにかくわかりやすく伝える
「自動化」と一つ言っても多様な使い方があり、深く説明すると専門的な用語も多くなってしまいます。

あくまで自分の役目は「私のような初心者」にわかりやすく説明することです。

>・スライドは図を多くして、補足の事例説明などは口頭説明を交えて話す。
>・日々のお仕事と自動化をイメージしてもらえるように、例を持ち出して話す
>・もらった質問や疑問点を整理し、自身でスライドへFBする

当たり前なことのように感じますが、読み物としての資料はありましたが、それを人へ伝えるための資料は足りなかったのです。
難しい内容を誰にでもわかりやすくすることはとても大事なことだと実感しました。


私のような初心者にとって、苦手意識を感じている分野は不安も大きいです。

「わかっていて当然だ」とメンバーに要求するのではなく、目線を揃えて寄り添い、不安を取り除いてあげることが大事なのだと感じました。

私は研修の後に「いやだな」と思って終わってほしくはありません。
できれば、「難しかったけどやってよかったな」「導入を検討してみよう」と思ってもらえるように協力したいです。

教える事は、伝えたからそれで終わりではないのです。


####2. 教えるときには言葉だけではなく実際に見せて伝える
私も過去に経験がありますが、”わからない” となったときに ”どこでわからないのかがわからない” となりがちです。

口頭で教えてスッとわかる人もいれば、一定の場所で止まってしまう人ももちろんいます。
ちょっとしたことだったら口頭で十分なこともありそうですが、
例えば「▲○というボタンがどこのボタンの事なのかがわからない」といったとき、画面を一緒に見ながら教えてあげた方が伝わりやすい場合もあります。


####3. 自ら声をかける
相手に対して声をよくかけるように心掛けています。
学ぶ空間として、質問がしやすい雰囲気が大事だと思うからです。

人によっては、「どう質問していいかがわらない」や「わからないことが恥ずかしい」と感じていて自ら発信できない人もいます。

弊社には若い人が多く、大人しい人が多いです。
その人が声をかけることが苦手なら、私から声をかけて、少しでも話やすくなれば良いなと思っています。

安心感を持って接してもらえるようになること、それが自分の役目だと思ってます。


##1年間の活動を通して思うこと

2021年の1年間で、技術系社員全体の65％に対して研修を行ってきました。
![スクリーンショット 2021-12-09 113424.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290554/73bb2715-bb97-1627-b412-1a2bb5da8b3a.jpeg)
この研修・勉強会を受けたメンバーからは、
「以前より難しそうなイメージはなくなりました。」「取り組む際のハードルが下がった」「テスト自動化への認識が変わった」といったコメントをいただきました。


1年間でどれだけの人がテスト自動化についてベースが理解できたかは実際のところ目に見える成果としてわかることではありません。

正直、自分自身への達成感や、やった！という思いに未だ直結したことはまだ無いです。
社内浸透させるためには、まだまだ道のりが長いと思うことばかりです。

それでも、その後案件で活用したとの連絡や、質問などで声をかけてもらえると「活用してくれているんだな」と感じてとても嬉しい気持ちになります。
1人ひとりが自動化について正しい知識を身につけて、今後は活用していってもらいたいです。

そして私自身、活用していただくのに必要な協力はどんどんしていきたいと思います‼


##最後に
私の仕事は今も変わらず皆さんにテスト自動化を「知ってもらうこと」です。

>・とにかくわかりやすく伝える
>・教えるときには言葉だけではなく実際に見せて伝える
>・自ら声をかける

基本的なことですが、どんな教育の現場においても大事なことだと思います。
今後も、基本に忠実に邁進していきたいと思います。
RubyGems で ウエブフレームワーク を検索してみた 2021版

# はじめに
[前回の記事 - Qiita](https://qiita.com/superrino130/items/7a97cb38c6710066bfca) から1年以上が経過しています。
#　検索結果
|gem|2020-10|2021-12|
|:--:|:--:|:--:|
|Roda|3.37.0 - October 16, 2020|3.50.0 - November 12, 2021|
|Ruby on Rails|6.0.3.4 - October 07, 2020|7.0.0.rc1 - December 06, 2021|
|Scorched|1.0.1 - August 28, 2020|1.0.2 - January 27, 2021|
|Cuba|3.9.3 - August 11, 2020|<-|
|Sinatra|2.1.0 - September 04, 2020|<-|
|Pakyow|1.0.6 - September 03, 2020|<-|
|Rack::App|2.2.3 - June 15, 2020|?|
|Padrino|0.15.0 - May 15, 2020|0.15.1 - April 26, 2021|
|Syro|3.2.0 - February 28, 2020|3.2.1 - March 21, 2021|
|Hanami|2.0.0.alpha1 - January 30, 2019|2.0.0.alpha3 - November 09, 2021|
|Hobbit|0.6.1 - February 20, 2016|<-|
|Camping|2.1.532 - March 21, 2013|<-|
|Ramaze|2012.12.08 - December 08, 2012|<-|
|Hyperstack|-|?|
いつも使用してる`Sinatra`が気になります。

# まとめ
+ がんばれRuby
+ がんばれSinatra

参照したサイト
*[RubyGems.](https://rubygems.org/)*
*[Awesome Ruby : 素晴しい Ruby のライブラリ・ツール・フレームワーク・ソフトウェアの数々](https://qiita.com/hatai/items/62766145f2e24fa1c246#%E3%82%A6%E3%82%A7%E3%83%96%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF)*
React初学者がWEBアプリを作るための情報まとめ

# あらまし

2021/10～11でWEBアプリを作る機会があり、そこで初めて、Reactを実際に使ってみました。
その際に色々調べて、「この情報は最初から知っておきたかったな」というポイントがあったため、記事にまとめました。
同じような状況の人に役立てば嬉しいです。

# 作ったもの

すみませんが、自分一人の案件ではないためお見せできないです。
ざっくり言うと、食べログのようなサイトを作りました。

# 技術スタック

Reactは選択肢が多いようです。これはメリットなのだと思いますが、初見だと道に迷ってしまいました。
最終的には、Easyであることを優先して以下の様に決めました。

## React
[Create React App](https://create-react-app.dev/)を使いました。
Next.js も候補ではありますが、初学者であればCreate React Appをお勧めします。
初学者向けの情報はCreate React Appを使ったものが大半であるためです。

### React Router
ルーティング機能はReactとは分離されており、別途インポートする必要があります。
使ったのは[React Router](https://reactrouter.com/docs/en/v6/getting-started/overvieｍw)です。
現在のv6がリリースされていることに注意してください。

https://qiita.com/junjis0203/items/0096963aefb70f466c27

### React Hook Form
入力フォームの実装には[React Hook Form](https://react-hook-form.com/jp/)を使うと楽でした。
ReactではStateで状態を管理する必要があり、これが中々の苦です。
React Hook Formで済ませるのが楽です。

https://dev.classmethod.jp/articles/mui-v5-rhf-v7/

### 使わない | Redux
簡易なWEBアプリを作るなら、Reduxは一旦スルーして問題ないです。
React Hooksで十分でした。


## TypeScript
TypeScroptを全く知らない場合、残念ながら、ある程度の困難が待ち受けています。
しかし、それでも「最初からTypeScroptを使うべし」です。
その方が保守性が格段に上がり、継続的な開発がEasyになるからです。


## Material-UI (MUI)
MUIはコンポーネントライブラリです。
文字通りコンポーネント（UI部品）をまとめたライブラリで、ボタンや文字入力などの便利コンポーネントが一通り用意されています。
styled-componentsなどのスタイリングライブラリとは似て非なるものです。

https://mui.com/getting-started/usage/

もし、開発体制にデザイナーがいないのであれば、MUIは特におすすめです。
サイトの見た目を一定のクオリティにでき、使い方はVery Easyです。

v5 から使い方が少し変わってます。使う場合は公式のサンプルを参考にしてください。

## Firebase
バックエンドの処理は[Firebase](https://firebase.google.cn/?hl=ja)に任せました。
Firebaseは認証やDBなどを（ある程度無料で）提供してくれているGoogleのプラットフォームです。
以下の機能があります。（★は今回使ったもの）

- Authentication : 認証（ログイン、ログアウト、ユーザの管理）の機能★
- Cloud Firestore : NoSQL DB。公式がこちらを推している★
- Realtime Database : NoSQL DB。いつ使うべきなのかは謎
- Strage : 画像ファイルなどを保管する機能★
- Functions : 独自の機能はこれで自作する★
- Machine Learning : 機械学習の機能が使えるようですが未経験なため謎

認証やDBはWEBアプリを作る上でほぼ必須です。しかし、自分で作るとかなり大変です。
（Firebaseも大変だよ！と思うかもしれませんが、自分で作るともっと辛いのです。）
個人または少人数の開発であればFirebaseをお勧めします。

現在、FirebaseWeb SDK はv9 がリリースされていることに注意してください。

https://firebase.google.com/docs/web/modular-upgrade

### React Firebase Hooks
[React Firebase Hooks](https://github.com/csfrequency/react-firebase-hooks)を使うと、Firestoreからのデータ取得がすっきりと書けます。
ただ、更新系の処理は無いんですよね。（あるのかな……？）
ReactのStateについて十分理解していれば、必要ないかもしれません。

技術スタックは以上です。

# 勉強方法

大きく分けて、二つのハードルがあります。Reactと、Firebaseの二つです。

## Reactの勉強
最初はこの本で基礎を固めると良いです。（アフィリエイトはやってないです）

https://www.amazon.co.jp/dp/B09BV2HGN3/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

[公式チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を読んでも良いのですが、この本はトピックが明確なので理解しやすかったです。
「React難しそうだな」と感じている人にお勧めです。

基礎さえ分かってしまえば、あとは何とかなります。
WEB記事あさるもよし、他の本読むもよし、目的に応じて自由に動けるはずです。

## Firebaseの勉強
[公式の入門ガイド](https://firebase.google.com/docs/web/setup)がお勧めです。
躊躇するかもしれませんが、取りあえず始めてみることをお勧めします。

https://firebase.google.cn/?hl=ja


私自身、まだまだ勉強中ですので「こんなものがお勧めだよ！」という情報があればぜひ教えてください。
以上です。