OmniAICreator/Qiita-1.07M huggingface dataset:
realpathの謎な挙動

※自ブログ (https://fujitatakesh.blogspot.com/2020/12/php-realpath.html) からの転載です。

これにハマっていました。

PHP の realpath、相対パスから実際のパスに直してくれる関数です。Classic ASP では Server.MapPath というのがありましたが、realpath では実在するもののみ返す性質があります。

さて、今回、謎な現象があったので調査しました。以下のように数か所に realpath を置き、いったい「何」がおきているのか調査します。

```PHP
<?php
echo 'Normal:'.realpath('').'<br>';
$cls = new stab();
$cls->main();

class stab {
  function __construct() {
    echo 'In constructor:'.realpath('').'<br>';
  }
  function main() {
    echo 'In class method:'.realpath('').'<br>';
  }
  function __destruct() {
    echo 'In destructor:'.realpath('').'<br>';
  }
}
~~~
realpath('') で現在の絶対パスを返してくれるわけですが、想定ではすべて同じものが返ってほしいです。ところが、上記のようにクラスインスタンス内では、ある場所だけ違うものが返されます。

その答えはデストラクタ。インスタンスが無くなって初期値がプログラムフォルダになっていることが考えられます。

```
Normal:C:\inetpub\sites\wwwroot
In constructor:C:\inetpub\sites\wwwroot
In class method:C:\inetpub\sites\wwwroot
In destructor:C:\Program Files (x86)\PHP\v7.1
```

デストラクタ内で使うときは、コンストラクタで予め親パスを変数に退避させておいて、realpath 使用時はくっつけてあげるのがよいでしょう。

---
コメントで返信いただいたとおり、スクリプトの終了時、かつクラスの終了時におきる現象で、インスタンス変数を必ず終了時にクリアすると正常な応答になりました。
拡張メソッドの第1引数にdynamic型が許されない理由

#ことのあらまし

HtmlHelperを拡張しようといろいろ試してるときに、ふと下記エラーが出た。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48302/1bcd5119-5318-43c7-a5f4-e2c99a3e055f.png)

HtmlHelperクラスには当たり前だがLabel()メソッドがある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48302/d0e8d36e-efb3-8b40-8f6d-e95933848d3e.png)

拡張メソッドとして認識されるそれがなぜ呼び出せないんやろなぁ、
と思っていたら別なところでもエラーが出ていた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48302/0ad54e0a-ffea-be20-f55a-5ee129791b51.png)

で、このメッセージで納得。
オーバーロードの関係でthisがつくべき第1引数の型がdynamicだと当たり前だけどどれを呼べばいいのかわからなくなるよね、
というお話でし…





…アレ？

いやいや、ヘルパーのラッパとして作った子はあくまで第2引数がdynamicだった。
しかも名前も変えて(LabelCustom())る。
主題のほうは自分で納得いく解が出たものの、これなんでだろう…

というわけで別記事に続く(予定)。


#ちなみに

この問題自体は下記で解決します。やったね。

```C#
// テストコード
string text = "適当な値";
dynamic dynamicObj = text;

//コンパイルエラー
@Html.Label(dynamicObj, htmlAttributes: new { @class = "control-label" })
//コンパイルOK
@Html.Label(dynamicObj.Value as string, htmlAttributes: new { @class = "control-label" })

```
Rails, Ruby, bundlerのバージョン管理

#はじめに
共同開発をする際に、各種環境をチームメンバーと合わせる必要があると思います。
僕もこの前Railsを用いて共同開発をする機会があり、その際「Rubyのバージョン変更ってどうやってやるんだっけ？」と少し手こずってしまいました。
Ruby, Rails, bundlerのバージョン管理にてまとめてみましたので、同じような悩みを抱えている方はぜひ参考にしてみてください。

記載に誤りやこっちのコードの方が良いよということがあればコメント欄にて教えてください！

#参考
https://qiita.com/satotaka/items/9c9a6ccc110b159b967b
https://github.com/rbenv/rbenv#upgrading-with-homebrew
https://qiita.com/YumaInaura/items/64e5721549e4927ce85f

#扱う対象
 - Ruby
 - Rails
 - bundler

#Rubyのバージョン管理
rbenvというRubyのバージョンを切り替えてくれるコマンドラインツールを使います。
インストールしていない方は便利ですので、インストールしておきましょう！

```
# rbenvがインストールされているかの確認（rbenvのバージョンがわかります）
$ rbenv -v

# rbenvをインストールする場合
$ brew install rbenv ruby-build
```

rbenvがインストールできたらrubyのバージョンを管理について、みていきましょう！

```
# 現在利用しているRubyのバージョンの確認
$ ruby -v

# インストール可能なrubyのバージョン確認
$ rbenv install --list

# 目的のバージョンをインストール(ruby 2.7.2をインストールする際の例です)
$ rbenv install 2.7.2

# PC全体で利用するバージョンを変更(ruby 2.7.2に変更する際の例です)
$ rbenv global 2.7.2


```


#Railsのバージョン管理
```
# Railsのインストール状況の確認
$ gem info -e rails

# 現在のディレクトリにおけるRailsのバージョン確認
$ rails -v

# railsをインストール(以下のコードはrails 5.2.4をインストールしたい場合の例です)
$ gem install rails -v 5.2.4

```

#Bundlerのバージョン管理
```
# bundlerのインストール状況の確認
$ gem list bundler

# 現在のディレクトリのbundlerのバージョン確認
$ bundle -v

# bundlerをインストール(以下のコードはbundler 2.1.4をインストールしたい場合の例です)
$ gem install bundler:2.1.4

```
CentOS7でkuromoji検索

#kuromojiで検索
kuromojiで語を検索するまでの手順を解説します。

#環境
virtualbox上のCentOS7
elasticsearch 6.8.13
kuromoji 6.8.13

#セッティングファイル
まずセッティングファイルを作ります。名前はkuromoji_setting.jsonとします。 辞書ファイルはあらかじめ/etc/elasticsearchの下に用意して置くこと。ここではtest.dicが辞書ファイルとして登録されています

```
{
  "settings": {
    "analysis": {
      "tokenizer": {
        "custom_kuromoji": {
          "type": "kuromoji_tokenizer",
          "user_dictionary": "/etc/elasticsearch/test.dic"
        }
      },
      "analyzer": {
        "my_kuromoji_analyzer": {
          "type": "custom",
          "tokenizer": "custom_kuromoji",
          "filter": [
            "custom_synonym"
          ]
        }
      },
      "filter": {
        "custom_synonym": {
          "type": "synonym",
          "synonyms_path" : "/etc/elasticsearch/custom_synonyms.txt"
        }
      }
    }
  }
}
```

#インデックスの作成
インデックスの名前はsampleとしてインデックスを作成します

```
curl -H "Content-Type: application/json" -X PUT 'http://localhost:9200/sample?pretty' -d @kuromoji_setting.json
```

#データ登録
今回はデータを大量に登録してみましょう。
データを一件登録する場合は以下です。

```
 curl -H "Content-Type: application/json" -XPOST 'localhost:9200/sample/type/?pretty' -d '
{
   "name": “あいうえお”
 }'
```
複数のファイルを登録する場合は以下のphpを実行します。test.txtには登録したい語のリストが語ごとに改行されて列挙してあります。

```
<?php
$filename = 'test.txt';
$txt = file($filename);

foreach($txt as $value){
    $value2 = trim($value);

    $system_str = 'curl -H "Content-Type: application/json" -XPOST \'localhost:9200/sample/type/?pretty\' -d \'{"name":"'."$value2".'"}\'';
    $common = system($system_str);
}
```

#検索
検索は以下のようなコマンドでできます。

```
curl -H "Content-Type: application/json" -XGET 'http://localhost:9200/sample/type/_search?pretty=true' -d '
{
  "query" : {
    "simple_query_string" : {
       "query": “あいうえお”
    }
  }
}
'
```

#感想
以上のような簡単な操作でkuromojiの検索が実行できます。ぜひやってみてください

#参考
https://colabmix.co.jp/tech-blog/elasticsearch-kuro-dictionary-synonym/
【Vue.js】v-onディレクティブの書き方・使い方

#はじめに
UIを実装する上でボタンをクリックすると文字の色や大きさが変化したり、要素の表示が切り替わったりなどさまざまな場合があると思います。
Vueでは、``v-onディレクティブ``に発火させたいタイミングのイベントと関数を書くだけでこのような処理を簡単に実装できます。
本記事では学習したv-onディレクティブの書き方と実装例を備忘のためにアウトプットしたいと思います。

#v-onの書き方


```html
<div v-on:イベント名="処理（関数）"></div>
```

省略して書くこともできます。

```html
<div @イベント名="処理（関数）"></div>
```

```html
<div id="app">
    <button v-on:click="count++">count++</button>
    <p>Count: {{ count }}</p>
</div>

<script>
const app = new Vue({
   el:'#app',
   data:{
      count:0,
   },
   methods:{
    plus:function(){
     this.count++
    }
   }
});
</script>
```
#指定可能なイベントハンドラ
v-onディレクティブで指定可能なイベントは実行されているブラウザがサポートしているものすべてとなります。
イベントについては[MDN web docs:イベントリファレンス](https://developer.mozilla.org/ja/docs/Web/Events)、ブラウザのサポート状況は[Can I use](https://caniuse.com/)で確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512863/7314cde6-9201-1bc6-d867-7ef0fa8fcd17.png)

#インラインメソッド
特別な $event変数を使うことでメソッドにDOMイベントを渡すことができます。


```html
<div id="app">
  <p>{{ message }}</p>
  <button @click="say('hello', $event)">hello</button>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'greeting'
  },
  methods: {
    say:function(message, event){
      console.log(event)
      this.message = message
    }
  }
})
</script>
```

#参照
[Vue.js Directives: v-on](https://v3.vuejs.org/api/directives.html#v-on)
[Vue.js EventHandling: Listening to Events](https://v3.vuejs.org/guide/events.html#listening-to-events)
プリザンターの項目を特定の条件で読み取り専用にする

本記事は [Pleasanter(プリザンター) Advent Calendar 2020](https://qiita.com/advent-calendar/2020/pleasanter) 9日目の記事です。

# 最新機能

今日もまたバージョンアップして、サーバスクリプトの新機能が利用できるようになりました。今日は少し地味な機能ではありますが、ワークフローなどを実現する上で重要な機能です。プリザンターの項目を特定の条件の時に読み取り専用にすることができるようになりました。

|製品|バージョン|
|---|---|
|.NET Framework版|0.50.203.*|
|.NET Core版|1.1.11.0|

※ CentOSなどのLinux環境で動作させるためには下記の追加のセットアップ手順が必要です。
https://pleasanter.net/fs/publishes/2396324

# サーバスクリプトの登録

テーブルの管理からサーバスクリプトタブを開き、下記のスクリプトを登録します。条件は画面表示前とします。

```javascript
// 条件は「画面表示の前」にチェック
// 状況が完了の場合に分類A/B/Cを読み取り専用にします。
if (model.Status === 900) {
    columns.ClassA.ReadOnly = true;
    columns.ClassB.ReadOnly = true;
    columns.ClassC.ReadOnly = true;
}
```

# 適用結果

登録したサーバスクリプトにより、完了したレコードの特定の項目を操作できないようにすることができました。クライアントサイドのJavaScriptで実装するより、かなり簡単に実装することができます。

![readony.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/78230/36718766-f2f8-8b4a-4ede-6bba52bbea4b.gif)


このサンプルは、デモ環境の「プロジェクト管理の例」の「WBS」テーブルでご確認いただけます。デモ環境は下記からご利用いただけます。
https://pleasanter.azurewebsites.net

今後も無料で使えるオープンソースのプリザンターの機能強化に取り組んでまいります。ぜひご期待ください！メリークリスマス！🎅
IntelliJとdocker-composeを使いローカル環境を汚さずにflask+postgresql環境を構築する

## 動機と概要

「[IntelliJ+Dockerでlocalを汚さず開発](https://qiita.com/darai0512/items/b3144e60c165d1810632)」を参考にさせていただき、IntelliJとdocker-composeを使いlocal環境を汚さずにflask + postgresql開発環境を作ってみたのでまとめてみました。

## 環境

| ソフトウェア                    | バージョン|
|:-------------------------------|------------:|
| Windows 10 Professional        | - |
| IntelliJ Ultimate              | 2020.3      | 
| docker desktop community       | 2.5.0.1     | 

## 前提条件

- docker for windowsがインストール済み
- IntelliJへ下記プラグインがインストール済み
 - dockerプラグイン
 - Pythonプラグイン
- docker hubへアカウント登録済み
- IntelliJにdocker for windowsの設定完了済み

## 作業概要

作業ですがざっくり下記になります。

1. dockerコマンドを使い、dockerのpythonイメージからflaskを含んだイメージの作成（※）
2. docker-composeのyamlファイルを作成
3. IntelliJのSDKに2で作成したyamlを指定
4. flask

docker-composeをご存知の方なら、
「1.と2.の手順を分ける必要はないのではないか？2.のdocker-composeにまとめれば良いじゃないか。」
と思われるかもしれませんが、IntelliJの仕様なのか、2.にまとめるとエラーを吐いてしまい実行できませんでした。

## 1. dockerコマンドを使い、dockerのpythonイメージからflaskを含んだイメージの作成

Dockerfileは以下。
pythonイメージにflaskをインストールするため、pipコマンドの実行と
pipへ渡すモジュールのリスト（requirements.txt）ファイルを作成。

```yaml:Dockerfile
FROM python:3

LABEL version="1.0"
LABEL description="Python Flask"

WORKDIR /usr/src/app
COPY requirements.txt ./
RUN pip install --no-cache-dir -r requirements.txt
```

```requirements.txt
# flask
flask
flask_sqlalchemy
# psycopg2 : postgresql driver
psycopg2-binary
psycopg2
```

上記ファイルを適当なフォルダに保存したら、コマンドプロンプトを起動して
フォルダ上で下記のdocker buildコマンドを実行し、flaskがインストールされた
pythonイメージを作成する。

```
> docker build -t <docker hubのアカウント名>/pythonflaskcheck .
```

## 2. docker-composeのyamlファイルを作成

適当なフォルダへ、下記のdocker-compose.ymlファイルを作成する。

```yaml:docker-compose.yml
version: '3'

services:

  db1:
    image: postgres:12.4-alpine
    container_name: 'flask_check_db'
    expose:
      - '5432'
    ports:
      - '5432:5432'
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=appdata

  python:
    image: <docker hubのアカウント名>/pythonflaskcheck
    container_name: 'flask_check_app'
    depends_on:
      - db1
    expose:
      - '5000'
    ports:
      - '5000:5000'
    stdin_open: true
    tty: true
    command: /bin/bash
```

## 3. IntelliJのSDKに2で作成したyamlを指定

File -> Project Structureをクリック。
※ 手順を飛ばしていますが、事前にIntelliJ上でpythonのプロジェクトを作成しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515611/9d9306b1-08d5-24aa-ebdd-db46da7e293a.png)

左ペインからProjectをクリック。
右ペイン上にProject SDKが表示されるので、
リストから Add SDK → Python SDK... をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515611/d565ee91-c99a-5ab2-3229-7c590771d194.png)
左ペインからDocker Composeをクリック。
Configuration file(s)に、2で作成したdocker-compose.ymlを指定する。
指定すると、Serviceのプルダウンに「db1」「python」がリストされるので、
「python」を選択し、OKボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515611/2edce44e-2171-b66c-f697-2530283df21e.png)
flaskの起動用pythonファイルを右クリックし、メニューから「Run」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515611/e9112f5f-bc3e-3d72-8d25-1630140b46e8.png)
あとはIntelliJが自動的にdocker-composeを実行して、2.で作成したdocker-compose.ymlをもとに
コンテナを起動し、flaskアプリケーションを起動してくれる。
CHIRIMEN HARDWARE コミュニティの紹介


この記事は [CHIRIMEN Open Hardware Advent Calendar 2020](https://qiita.com/advent-calendar/2020/chirimen_oh) 1 日目の記事です。
コミュニティの紹介をさせて頂きます。

### CHIRIMEN Open Hardware コミュニティの活動ついて
 さまざまなモノがネットワークで繋がることで、それらがコンピューティングにより連携し便利で効率的な社会となっていく IoT (Internet of Things) というコンセプトが広まっています。さらにこのネットワークコンピューティング環境を支えるオープンなインフラとして WWW を活用しようという WoT (Web of Things) というコンセプトが提唱されています。

CHIRIMEN コミュニティでは、ここでさらにヒトが重要な存在だと考えています。ヒトとモノがウェブを介して互いに協調しあえる環境が必要です。それはウェブブラウザを核に作られていくのはないかと考えます。

このような環境（プラットホーム）をオープンにデザインし、つくりあげていくことをめざしているのが CHIRIMEN コミュニティです。

### CHIRIMEN とは
CHIRIMEN とは、Web ブラウザからハードウェア制御を可能にしたプロトタイピング環境です。ブラウザの JavaScript からセンサーやアクチュエーターを制御できるため、デジタルのソフトとフィジカルなハードを同じプログラムで容易に連携できます。

### CHIRIMEN の語源 = 縮緬（織物）

![WebxReal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/d9585e6b-01b5-b462-7299-deda62951b29.png)


#### “Web” と “Real” を織り込んで、新しいモノを作っていく

センサーやアクチュエータを使ったIoTシステムを作ろうとすると、特別な知識 それも特定のデバイスやクラウドの製品に特化した知識がいくつも必要でした。それに対して CHIRIMEN は、一般的な Web アプリケーション構築の知識だけで、もっと簡単に IoT システムを作ることができます。これによって IoT システムのプロトタイピングや学習を効率よく進めることができます。

### 活動の柱
コミュニティでは、以下の主に３つの活動をしています。

#### オープンソースソフトウェア
主なオープンソースソフトウェアです。
- [chirimen: CHIRIMEN for Raspberry Pi](https://github.com/chirimen-oh/chirimen)
- [chirimen-micro-bit](https://github.com/chirimen-oh/chirimen-micro-bit)
- [chirimen-drivers](https://github.com/chirimen-oh/chirimen-drivers)
- [node-web-gpio](https://github.com/chirimen-oh/node-web-gpio)
- [node-web-i2c](https://github.com/chirimen-oh/node-web-i2c)


#### オープンソースハードウェア
主なオープンソースハードウェアです。

- [prot-hat](https://github.com/chirimen-oh/accessories/blob/master/forRaspberryPi3/prot-hat)
- [rpi3GpioTester](https://github.com/chirimen-oh/accessories/blob/master/forRaspberryPi3/rpi3GpioTester/)
- [Grove-adt7410](https://github.com/chirimen-oh/accessories/blob/master/grove/adt7410/)
- [Grove-s11059](https://github.com/chirimen-oh/accessories/blob/master/grove/s11059/)
- [RPi2SeinsmartRelayIF](https://github.com/chirimen-oh/accessories/blob/master/others/RPi2SeinsmartRelayIF/)
- [dcfan-guide](https://github.com/chirimen-oh/accessories/blob/master/others/dcfan-guide/)
- [neopixel_i2c_TH](https://github.com/chirimen-oh/accessories/blob/master/others/neopixel_i2c_TH/)


#### オープンなチュートリアルコンテンツの整備と、講習会
- [CHIRIMEN チュートリアル](https://tutorial.chirimen.org/)
- イベント活動は基本的に [connpass](https://chirimen-oh.connpass.com/) か以下の SNS を通じて告知しております。


### SNS へのアクセス
コミュニティ活動に興味を持たれた方は、いずれかの SNS を通じてコンタクトして頂ければ、誰かしら回答させて頂きます。

- [Twitter](https://twitter.com/chirimen_oh)
- [facebook Group](https://www.facebook.com/groups/chirimen)
- [Github](https://github.com/chirimen-oh)
- [slack invite](https://docs.google.com/forms/d/1GzkGfCcsRn4A6-uHPsLu2LszkqKcNJ3sFI4XRishHsE/viewform)
pythonでr文字列扱うのがめんどくさくなった

### 状況
r文字列扱うのが面倒になった
何型か考えるのも面倒臭い
言語はpython
### 解法
これで一発

```
df.text = df.text.apply(lambda x: x.encode("raw_unicode_escape").decode("unicode_escape"))
```
Dateでよく使うテクニック

# はじめに
JavascriptのDateはなんか癖があって使いづらいなー
Moment.js使っとこ:innocent:
って感じでコードを書いていましたが、この際、Dateもしっかり理解しておこうと思ってメモとして残しておきます。

# Dateを使う前に知っておきたいこと
## 月
Dateで月の扱い方をミスると別の月の情報を取得するので注意です。
例えば、`12月`のDateオブジェクトを生成するときは、`new Date('2020', '11')`のようにしてあげる必要があります。

`取得したい月 - 1`

## 曜日
`getDay()`を使うと曜日を取得できるのですが、月曜とかMonという値が取得できるわけではないので注意です。
`getDay()`は日曜から土曜までを0~6の値で返してくれます。
例えば、`getDay()`の値が`1`であれば月曜ということになります。
月とかMonというような文字列で取得したい場合は以下のようなコードを書きましょう！

```main.js
const dayOfWeek = ['日', '月', '火', '水', '木', '金', '土'];
const date = new Date(2020, 11); // 2020年12月1日のDateオブジェクトを生成
const i = date.getDay(); // 2020年12月1日は火曜なので2という値が返ってくる
console.log(dayOfWeek[i]); // コンソールに火と出力される
```

# テクニック
## 月末の取得
Dateの第三引数に`0`を渡して`getDate()`してあげると月末の日を取得できます。

```main.js
new Date(2020, 10, 0).getDate(); // 31 2020年10月の最終日
new Date(2020, 11, 0).getDate(); // 30 2020年11月の最終日
new Date(2020, 12, 0).getDate(); // 31 2020年12月の最終日
```

第三引数に`0`を渡すことによって`前の月の最終日`という意味になります。

## 指定した月の日と曜日を配列にする
配列に日と曜日のオブジェクトを月の日数分格納するには、まず、指定する月が何日あるのかをプログラムで書きます。
今回は2020年12月を例に作成します。

```main.js
let date = new Date(2020, 11);
let num = new Date(2020, 12, 0).getDate(); // 31
```
これで2020年12月が何日あるかわかりました。
次は日数分繰り返す処理を書きます。

```main.js
let date = new Date(2020, 11);
let num = new Date(2020, 12, 0).getDate(); // 31
for (let i = 0; i < num; i++) {

}
```
日数分繰り返すプログラムが書けたのであとは`日`と`曜日`のオブジェクトを配列に格納していきます。
`date.setDate(date.getDate() + 1)`で翌日を表します。

```main.js
const dayOfWeek = ["日", "月", "火", "水", "木", "金", "土"];
const dates = [];
let date = new Date(2020, 11);
let num = new Date(2020, 12, 0).getDate(); // 31
for (let i = 0; i < num; i++) {
  dates.push({
    date: date.getDate(), // 日
    dayOfWeek: dayOfWeek[date.getDay()], // 曜日
  });
  date.setDate(date.getDate() + 1); // 翌日
}
console.log(dates);
```

# おわりに
気が向いたらmoment.jsバージョンも書きます
Apple SiliconでNode.jsやAWSの環境を立ち上げる

Apple SiliconでNode.jsやAWSの環境を立ち上げるときに手間取ったところをまとめました。

##行った作業
- nvm / node.js
- aws-cli
- apache2

## はじめに
コンソールで作業をする前にコンソールにRosettaを有効化します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136933/d8bb0a6e-b719-9bcb-f6dd-32bf2c10d4c8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136933/58ddfebd-b7bf-4f19-d96f-a0bbbab2f250.png)

これをやらないと、インストールがうまくいきません。

### homebrewのインストール

[公式ページ](https://brew.sh/index_ja)に書いてあるとおりにインストールできます。

### nvmのインストール
[gitレポジトリ](https://github.com/nvm-sh/nvm)に書いてあるとおりにインストールできます。


### aws-cliのインストール
AWSに書いてあるとおりにインストールしてもだめでした。結果からすると、Pythonのパスが異なっているようです。

```
curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip"
unzip awscli-bundle.zip
sudo ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws
```

試行錯誤する途中でPythonのサイトを見ると、[Python3.9](https://www.python.org/downloads/release/python-391)は早くもApple Silicon対応版も公開されています！！ということで、これをインストールしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136933/3bd31fcb-7114-1644-8619-9ec63e6fe6ee.png)
スクリーンショット 2020-12-09 20.48.45

そして、順番にインストール
aws-cliを取得

```zsh
curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip"
sudo ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws
sudo /usr/local/bin/python3.9 awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws

```

無事に動作しました。

```bash
aws --version
aws-cli/1.18.192 Python/3.9.1 Darwin/20.1.0 botocore/1.19.32
```


## Apache2
この辺の記事を見ながら`/User/{username}/Sites`がlocalhostの設定をしたのですが、結局何をやってもターゲットのフォルダを参照してくれませんでした。

https://qiita.com/kid_drill/items/5c85917068490177b6ab

httpd.confのログを確認しても、原因がわからず最終手段でhttpd.confのDocumentRootを直接書き換えました。別の対策があったら教えて下さい。

```config
DocumentRoot "/Users/{username}/Sites/"
<Directory "/Users/{username}/Sites/">
AllowOverride All
Options Indexes MultiViews
Options +FollowSymLinks
Require all granted
</Directory>

#DocumentRoot "/Library/WebServer/Documents"
#<Directory "/Library/WebServer/Documents">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
#    Options FollowSymLinks Multiviews
#    MultiviewsMatch Any

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
#    AllowOverride None

    #
    # Controls who can get stuff from this server.
    #
#    Require all granted
#</Directory>
```
【初心者でもわかる】スクロールボックスの作り方と、スクロールバーの消し方

# どうも7noteです。スクロール関連のCSS

ページ内にスクロールできる要素の作り方です。

## スクロールボックスの作り方

**共通のHTML**

```index.html
<div class="box">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
```

### 縦向きスクロールボックス

```style.css
.box {
  width: 200px;                /* 横幅を200pxに指定 */
  height: 200px;               /* 横幅を200pxに指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-y: scroll;          /* 縦方向にスクロール可能にする */
}
```

![scroll-y.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/259d2db3-b52e-e80b-54ea-619260988e46.gif)


### 横向きスクロールボックス

```style.css
.box {
  width: 200px;                /* 横幅を200pxに指定 */
  height: 200px;               /* 横幅を200pxに指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-x: scroll;          /* 横方向にスクロール可能にする */
}
.box p {
  width: 400px;                /* 親要素よりも大きくする */
}
```


![scroll-x.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/7127eaa7-c054-8822-3463-a7c176e9883f.gif)


## スクロールバーを非表示にする

```style.css
.box {
  -ms-overflow-style: none;    /* IE, Edge 対応 */
  scrollbar-width: none;       /* Firefox 対応 */
}
.box::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}
```

![bar-none.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/c57cd944-e9a7-8e85-b9ab-dd596e4e3787.gif)


## まとめ

横スクロールさせる時は、中の要素のほうが大きくないと、自動的に文章が改行されてしまうので、子要素に横幅を指定します。
スクロールバーがでないと、スクロールできているかわかりにくかったりするのでUI的にはあまりよくないかもしれませんが、どうしても消したいときにはCSSで消せます。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
VSCodeからJetBrains系を使い始めたお話でもしようと思います

**この記事は[生産性向上のための環境整備2020 - 02 【PR】](https://qiita.com/advent-calendar/2020/lenovo_env_02)の16日目の記事です。**

プログラミングをするとき、皆様は何のエディタを使っていますか？

自分は今まではVSCodeで特に不満に思っていませんでした。

ですがDiscordで通話していたときに、相手がJetBrainsの良さを布教してきたので、
試しにかじってみたらその魅力にハマってしまったのでそのお話でもしようと思います。

# IDEの特徴

まずはJetBrains IDEの特徴から。これを見るだけでほしいと思ってしまうかもしれません。

特徴が多いですが、今回はその中から自分がこれがいい！というのをピックアップしました。

※JetBrains IDEほぼ全般で対応している機能を紹介していますが、Pythonが使い慣れているので[PyCharm](https://www.jetbrains.com/ja-jp/pycharm/)中心に説明していきます。

## Shift2回押せば基本何でもできる - どこでも検索

JetBrainsを使ってる人はだいたい使っているどこでも検索。

例えばこんな風に複雑なディレクトリでも、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111880/957b38db-4cba-f48a-2a36-942a2786c72d.png)

~~ちょっと前に作ってたやつですが放棄したやつなのはナイショ~~

幾つかのキーワードを入れるだけですぐに開けちゃいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111880/a4c19415-a5fd-3c1d-6168-fb599b369132.png)

## スペルミスだってへっちゃら - 名前変更機能(リファクタリング)

よし、コードができた！・・・あっ、スペルミスしてる！！でも、ちゃんと動いてるし直すの面倒！
・・・を一瞬で直してくれるスグレモノです。

例えばこんな風に、スペルミスをしていたとしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111880/4401bc3d-9034-c348-c089-b6c2a77180f3.png)

直したい関数名にカーソルを合わせてShift + F6を押してあげると名前変更が出てくるので直したい名前にしてリファクタリングするだけ。
ね？簡単でしょ？

![FPpHVMgEVS.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/111880/2de785d8-7320-322d-a513-6398522011b7.gif)

## 右手にも働き方改革を - ショートカットによる操作

マウス操作などで多忙な右手。そんな右手くんもJetBrains IDEは働き方改革のお手伝いをしてくれます。

JetBrains IDEはすべての操作をキーボードだけで完結することができ、マウスに触れる機会を少なくできる恩恵を得られます。

例えばプロジェクトのディレクトリを見たいのであれば`Alt + 1`で済みますし、プロジェクト(`Alt + 1`)上で`Alt + Insert`をすればすぐにファイルの作成だってできます。

ショートカットのチートシートは[pleiades.io](https://pleiades.io/)の下部にある「公式ショートカットキー一覧 PDF 日本語版」を参照すると見ることができるので、何ができるのかを御覧ください。

もちろん、設定(`Ctrl + Alt + S`)を弄れば自分にあったショートカットを自由に設定することだってできます。

[HHKB](https://www.pfu.fujitsu.com/direct/hhkb/)と組んだらもしかしたら最強かもしれない。（持っていないので憶測ですが）

# 価格とか

価格はツールで変わってきますが、少なくとも2種類以上のIDEを使うのであればAll Products Packがおすすめです。

> |製品|価格(年額、個人利用1年目)|
> |:-:|:----------------------:|
> |All Products Pack|28,700円|
> |IntelliJ IDEA Ultimate|17,200円|
> |PyCharm Professionalなど|10,300円|
> |WebStorm|6,800円|
> 引用: https://www.jetbrains.com/ja-jp/store/#personal?billing=yearly

嬉しいところは年間で継続契約していると更に安くなります。（3年以上契約する場合は一番オトク）

さらに、年間契約 or 月額12ヶ月連続契約していると永久フォールバックライセンス（簡単に言っちゃえば、契約時の最新バージョンがずっと使える）というものがもらえたりします。（個人利用、商用利用）
詳しい記事は下記URLをご覧ください。

https://sales.jetbrains.com/hc/ja/articles/207240845-%E6%B0%B8%E4%B9%85fallback%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E3%81%A8%E3%81%AF- 

# おわりに

とりあえず味見をしてみたい！という人はIntelliJ IDEA CommunityやPyCharm Community（無料版）を試してみるのもいいかもしれません。
他製品も30日間の評価版があるので試してみる価値は十分にあります。

是非ともJetBrainsの製品の良さを知ってもらえれば、と思います。
シンプルだけど動く背景のつくりかた(OpenSiv3D)

# シンプルだけど動く背景のつくりかた(OpenSiv3D)

![20201010-214325-161.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100088/f03279b0-e4d0-7277-0578-c8d491462b61.png)


こんばんは、ミツゴロウです。
今年10月に新作ゲーム「くらげみゅーじかる」を公開しました。
ダウンロードはこちら https://www.freem.ne.jp/win/game/24153

そのゲームで使われた背景の作り方を紹介します。

##どんな背景？

丸い泡玉がたくさん表示されて、それが下から上方向に直線移動していくものです。
![20200825-190346-083.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100088/0ae4ffdf-a839-c0f7-021e-82a49ee9c04a.png)

使用するテクスチャは泡玉1個だけです。この画像は、Photoshopで

円形に塗りつぶし→中身を範囲をぼかしてDelete

とすればすぐ作れます。
![Bubble.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100088/d8de0f48-d88b-be42-fb3e-4ea9ebf2d1a9.png)
↑ここに画像があるが、白一色なのでみえないね。クリックすれば見える。

##プログラム実装
※今回はQiita記事用に1ファイル内で収めていますが、実際の実装ではクラスごとにファイル分けすることをおススメします。

「泡玉」というオブジェクトを作るため、泡玉はクラスで書くといいでしょう。
泡玉はたくさんあるので、クラスをArrayに入れて使います。(数は固定)
コンストラクタでランダムな点に座標をセットします。大きさも1/16～1でランダム。
毎フレームUpdate関数を呼び出して、泡玉の座標を上に移動させていきます。画面外に出たら、画面の下にワープする処理も追加します。これにより、泡玉は画面内をずっと動き続けます。
画像描画はTextureAssetを使うことで、クラスを別ファイルに分けても描画関数を使うことができます。

###ソースコード

```C++:Main.cpp

# include <Siv3D.hpp> // OpenSiv3D v0.4.2

const int32 TEX_SIZE = 200; // テクスチャの画像サイズ
class Bubble
{
private:
	Vec2 pos;	// ポジション
	double size;	// 泡のサイズ

public:
	// コンストラクタ 初期配置をきめる
	Bubble() 
	{
		size = Random(0.25, 1.0) * Random(0.25, 1.0); // Random2個かいた方がサイズのバランスが良くなる
		pos = Vec2(Random(0 - size * TEX_SIZE / 2, 1280 + size * TEX_SIZE / 2), Random(0 - size * TEX_SIZE / 2, 720 + size * TEX_SIZE / 2));
	}

	// デストラクタ 今回は特に何もなし
	~Bubble()
	{
	}

	// 1フレームに1回呼び出す処理。ここでは移動処理
	void update()
	{
		pos.y -= 100.0 * size * Scene::DeltaTime();

		// 画面の一番上に完全に出たら、画面の一番下にワープ
		if (pos.y <= 0 - size * TEX_SIZE / 2)
		{
			// サイズとX座標も変えるとランダム性が高く見える
			size = Random(0.25, 1.0) * Random(0.25, 1.0);
			pos.x = Random(0 - size * TEX_SIZE / 2, 1280 + size * TEX_SIZE / 2);

			pos.y = 720 + size * TEX_SIZE / 2;
		}
	}

	// 画像描画
	void draw()
	{
		TextureAsset(U"tex1").scaled(size).drawAt(pos, HSV(240.0 - size * 80.0, 1.0, 1.0));
	}
};

void Main()
{
	// 画面サイズを1280*720にする　ただ単に自作ゲームのサイズに合わせているだけ
	Window::Resize(1280, 720);

	// 背景を暗いアオイロにする
	Scene::SetBackground(ColorF(0.125, 0.125, 0.25));

	// TextureAsset
	TextureAsset::Register(U"tex1", U"Bubble.png");

	// 泡玉はたくさん表示するのでArrayに入れる(120個がちょうどよい)
	Array<Bubble> bubble;
	bubble.resize(120);

	while (System::Update())
	{
		// すべてのbubbleに更新処理をする
		for (auto &i : bubble)
		{
			i.update();
		}

		// すべてのbubbleに描画処理をする
		for (auto &i : bubble)
		{
			i.draw();
		}
	}
}


```

出力画像(実際には動いている)
![20201209-203610-196.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100088/9226a05b-0305-87e6-ce51-b2f2e472818d.png)

##発展形

テクスチャを変えたり、移動のさせ方を変えるとバリエーションが増えます。いろいろ考えてみましょう。

例、テクスチャを星にした(回転もする)
![20200517-230510-491.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100088/040bdd10-a595-ba2f-f8b7-8ec6f8fb56aa.png)

例2、テクスチャ画像を横並びにした
![20201209-204444-707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100088/b28edb01-0ff0-f93e-abda-2dde918f188b.png)


##まとめ
テクスチャ画像1つでも、たくさん表示させて動かせば簡単に動く背景が作れます。
メニュー画面などに使う際はぜひご活用ください。
[Rails]migrateした際に発生した:An error has occurred, all later migrations canceled:エラーへの対処法

【前提】
Rails 6.0.3.1
ruby 2.6.3

現在、オリジナルアプリを製作中。
その際に発生してしまったAn error has occurred, all later migrations canceledに対するエラーの解決方法についてみた。

    20201020102544_create_bookmarks.rb. 
 
    add_index :bookmarks, [:following_id, :follower_id, :follow_id, :followed_id], unique: true

・20201020102544_create_bookmarks.rbファイル内に上記内容のカラムをunique制約をかける為に記述

    ターミナル.  
    % rails db:migrate

[![Image from Gyazo](https://i.gyazo.com/f4428be013ffbd831ea5c88565ba7fcb.png)](https://gyazo.com/f4428be013ffbd831ea5c88565ba7fcb)

・ターミナルにてrails db:migrate_をかけた所、上記のようにrails aborted!
StandardError: An error has occurred, all later migrations canceled:エラーが発生した。よく見てみるとIndex name 'index_bookmarks_on_following_id_and_follower_id_and_follow_id_and_followed_id' on table 'bookmarks' is too long; the limit is 64 charactersと記述されており文字制限を超えていますと指摘されている事が発覚。

    #before
    add_index :bookmarks, [:following_id, :follower_id, :follow_id, :followed_id], unique: true

    #after
    add_index :bookmarks, [:following_id, :follower_id, :follow_id, :followed_id], unique: true, name: 'bookmarks_index'

・上記のようにname: 'bookmarks_index'を追加して記述して再度rails db:migrateを実行すると復旧しました

※まとめ※
まさか、migrationファイルにも文字制限があるとは思いませんでした:joy:かなり基本的な事だけど、また一つ勉強になりました。誰かの参考になると嬉しいです:relieved:
iTerm2でProfileの変更ができなくなった時の設定変更

# 結論

画面内の赤枠の設定を 画面のように **NO** にすればOK!

![Preferences.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45574/170b6d0e-145b-5752-88f4-9499d20724e2.png)

（訳：制御シーケンスが現在のプロファイルを変更するのを防ぎますか？）

# 経緯


ある時のバージョンアップした後、
iTerm2で Profileの変更をコマンドで実行しようとしたら受け付けなくなりました。

コマンドでの設定変更ってこういうやつね

プロファイル名が utf-8の場合は

```bash
echo -ne "\033]1337;SetProfile=utf-8\a"
```

いつの日にかこれを使っても設定が変更できなくなりました。。。

# できなくなった理由

理由は明白

このコマンドを発行した後に、iTermの画面上部になにか二択を迫られて、適当に返事をしたのでした。
のちに、別のマシンで同じことをしたときに 何かを許諾するかというような選択肢が出てきたので、
**[agree]** を押下して 難を逃れました。

ゆえに、できなくなったマシンでも 設定が 許諾しないになっているから、許諾させればいいんだ。

# 設定変更を探す

冒頭の設定画面を表示するには以下の手順で遷移すればいい。

menu[iTerm2] -> Preference -> Advancedタブ

表示されたら、 **[current profile]** と検索窓に打ち込めばOK

![Preferences.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45574/4e6b4c34-2649-16fc-72f4-dfbb2bf9c5e1.png)

設定が NO になっていれば、コマンドでProfileの切り替えが出来る。

これで楽しい iTrem生活が出来るようになった！
わーい！！
HTML/CSSで日向坂46のロゴを描画する

##日向坂のロゴとは
これです！
![Qiita](https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Hinatazaka46_logo.svg/160px-Hinatazaka46_logo.svg.png "Qiita")

##結果
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="esafla" data-slug-hash="eYddvgm" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="eYddvgm">
  <span>See the Pen <a href="https://codepen.io/esafla/pen/eYddvgm">
  eYddvgm</a> by Esaki　Kota (<a href="https://codepen.io/esafla">@esafla</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

##こだわり点
###1.角度は46度！
ロゴを作るにあたって調べたところ、三角形の角度はこのようになっているそうなので、これに乗っ取って実装します。
![Qiita](https://love-koba.com/wp-content/uploads/2019/12/IMG_4081.jpg "Qiita")

```
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 207.10606275811px 200px;
}
```
三角形の辺の長さから角度を調整したのですが、もっとスマートな方法がありそうです。。。

##終わりに
普段cssを適当にやってしまいがちだったので、変な実装になっているかもしれません。
こんなやり方がいいよ！みたいなのがあればコメント待っています！
ES6にある「...」は展開と残余両方あって紛らわしい

例えば、下記の`listB`は展開されるけど、`listA`は展開されない。

```Javascript:
[ ...listA ] = [ ...listB ]
```

結果的に以下の書き方と一緒になる。

```Javascript:
listA = [ ...listB ]
```

じゃあ最初の書き方は何をしてるの？と言うと残余を取っている。

```Javascript:
const listB = [ 1, 2, 3, 4 ]
const [ a, b, ...listA ] = [ 0, ...listB ]
//a = 0, b = 1, listA = [ 2, 3, 4 ]
```

ここで左辺値は**残余を取ると右辺値が何であれ普通の配列として代入される**ようだ。
普通は気にしなくて良いが、`TypedArray`などを使用する場合は気をつけたい。
仮に`TypedArray`に対して分割代入したい場合は以下のようにすると良い。

```Javascript:
Object.assign(
  typedArray.subarray( destStart, destEnd ),
  [ ...iterable ].slice( srcStart, srcEnd )
)
```

[Object.assign() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

[TypedArray.prototype.subarray() - JavaScript | MDN](
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray)

#というわけで
「...」はiterableの展開と残余の代入の両方あるから気をつけようね。
Python入門１

機械学習の勉強の前にまずはPythonから勉強しました。
Pythonは人工知能ライブラリが充実している言語のようです。
例：scikit-learn、Tensorflow

●Pythonの統合開発環境
・PyCharm(パイチャーム)
・Jupyter Notebook(ジュピターノートブック) 
→起動時にデータをメモリに保持 + データ加工のログを残すことができるため
→データの前処理に適しているらしい

・テキストエディタの Atom(アトム) 
・Sublime Text(サブライムテキスト) 

●Pythonでプログラミングをする際に注意しないといけないこと
インデント
他の言語と異なりインデントでスペースやTABをごちゃ混ぜにするとすぐ怒ります・・・
※Pythonのコーディング規約（PEP8)によると、 インデントはスペース4つ分が望ましいそうです。

```py
>>> greet ="Hello"; //str型のgreetという変数を定義
>>> print(greet)
Hello
>>> print("greet") //変数を””で囲んでしまうと文字列と認識されてしまうよ
"greet"
>>> print(greet*2) //文字列に掛け算をすると乗数分出力される
HelloHello
>>> print(type(greet)) //変数の型を判別
<type 'str'>
```

・if文
条件式の末尾には:が必要
else ifではなくelif




・・・どんどん追加していきます
【AWS】【2020/12/09版】MacインスタンスCI/CDでの利用検証

# やりたかった夢
やったぜAWS上で、iOSアプリのリリースができるぜ！
AWSCodePipelineとかで、iOSアプリのビルドだ！
ついでに、ブランチごとの並行ビルドとかもできたら素敵だなっ！
夢ひろがりんぐ～

なので、CI/CDで利用することをベースに検証しました。

# TL;DR
頻繁なCI/CDだと毎日起動になってしまうので、価格が年間90万と高くなってしまう。
スポットで使えず（24時間の制約があるため）現状（2020/12/09）は厳しい

# Macインスンタンス構築時にハマった罠
## HDDの拡張
EBSを500Gとしたが、最初は32Gしかパーティションがきられておらず、コマンドにより、EBSのサイズまで自分で広げる必要あり
参考：[Macで外付けHDDから外付けHDDに直接ファイルをコピーする方法](https://qiita.com/swimmy/items/185c3854768af76c32f9)
 
# Pros Cons
メリデメ考察
## Pros
* AMI（イメージを取得できるため）バージョン切り替えが容易
 * Unityのような、１マシンで並行バージョンを想定していない開発環境でも、並行バージョン保持できる
* 通信環境は早い
* メンテナンスフリー
* AMIが取れるため、ビルド環境のロールバックが可能
* 旧バージョンのOSが使える

## Cons
* スペックの割に高すぎる1日約2500円　年間90万円
* 専有インスタンスの料金体系が、最低24時間〜なので、スポットで利用ができない
 * ビルドしてインスタンスは死ぬみたいな使い方はできない（常時起動みたいな形）
* 東京リージョンにインスタンスがないので、多少遅延がある
* スペックが低い
* Big Sur未対応（2020/12/09現在）
* Appleシリコンのマシンは存在しない
* EBSの容量以外のスペックアップ不可
* 各リージョンに最高台数が存在しており、専有したいときに取れない可能性がある

# 考慮しないといけなさそうなこと
## ソフトウェアライセンス
ソフトウェアライセンス関係の問題を解消する必要ありそう。
例：UnityProを仮想マシンにいれていいのか？

# Macインスタンスのユースケース
## CI/CDでの利用
一回EC2をたてると初日の2500円かかる。
並行でたてようと思うと台数×2500円が最低料金
2年間で購入と同じ額ぐらいにすると月4回未満ぐらいの利用が限度
月１～年１ぐらい更新のプロダクトなら、まぁ安くあげられるかもしれない。

## 旧バージョンとの互換チェック
現状の料金体系ならもっぱらこちらになりそう。

# 今後への期待
* とりあえず、専有権を時間単位にしてほしい。
 * ２４時間～はやめてほしい。
Dockerを用いてPython3系の環境をコンテナで起動してみた

#はじめに
今回は、DockerにてPython3系の環境を利用するまでの過程を確認したいと思います。

Python3系のイメージを入手してコンテナ起動まで見ていきます。

##補足:仮想環境構築パターン例

>-venv または virtualenv (読み方: バーチャルエンブ) を使う
>-pyenv (読み方: パイエンブ) を使う
>-Docker (読み方: ドッカー) または仮装環境を使う

参考記事は[こちら](https://note.com/w0o0ps/n/nf38491eb915d#0drew)

今回の手順で参考にした記事は[こちら](https://web-engine.hatenadiary.com/entry/20170906/1504624528)

##1.Docker for Mac をダウンロード
公式からダウンロードして起動する。
<https://docs.docker.com/docker-for-mac/install/>

以下のコマンドでバージョンを確認。
ダウンロード時点:2020/10/2

```
$ docker --version
Docker version 19.03.13, build 4484c46d9d
$ docker which
/usr/local/bin/docker
```

##2.公式イメージを入手
ターミナルにて以下のコマンドを実行していきます。

※今回は、Python3系の取得・起動まで行なっていきます。

```
$ sudo docker pull python:3.8
Password:
```

adminパスワードの入力を求められますので、入力してEnter。

```
Status: Downloaded newer image for python:3.8
docker.io/library/python:3.8
```

最後に上記の通り表示されてイメージを入手。

![スクリーンショット 2020-12-09 19.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/e767a285-bb46-7afb-0862-9d475df6b25e.png)


以下のコマンドでバージョンを確認。

```
$ docker images
REPOSITORY  TAG    ...
python      3.8    ...
```

##3.コンテナ起動
以下のコマンドでコンテナを作成し、ログインしていきます。

```
$ docker run -it --name test python:3.8 /bin/bash
```
実行すると、コンテナが起動しrootユーザでログインしています。
Docker for Macの方でも以下の通り確認できます。

![スクリーンショット 2020-12-09 19.41.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/70635501-394e-3d76-80f7-601680453ae4.png)

無事コンテナ起動できたので、実際にPython3系が入っているかも確認しておきます。

```
$ python --version
Python 3.8.6
```

pipも同梱されています。

```
$ pip --version
pip 20.3.1 from ・・・
```

###コンテナの起動と停止
`exit`でDocker環境を退出、さらにもう一度`exit`とすることでホスト環境へ戻ることができます。

使用したコンテナを、再度起動したい場合は以下の通り実行します。

```
$ docker start コンテナ名(もしくはコンテナID)
```

停止は以下の通りです。

```
$ docker stop コンテナ名(もしくはコンテナID)
```

再度起動したコンテナへのログインは以下の通りです。

```
$ docker exec -it コンテナ名　/bin/bash
```

##まとめ
今回は、DockerによるPython3系のイメージ入手、コンテナ起動、ログインまでを確認しました。

参考にさせて頂いた記事の作成者様ありがとうございました。

今後は、Docker Composeなどを用いた開発環境構築にも触れていきたいと思います。

ありがとうございました。
VSCodeのPlantUMLプラグインでER図を書いてみた


こんばんは、須原です。ベリサーブアドベントカレンダーの9日目です。
今日は、タイトルの通り、VSCodeのPlantUMLのプラグインでER図（Entity Relationship Diagram）を書いてみた、というお話です。

#なぜそんな話になったのか
普通にお仕事でデータ設計していて、普段はastah使ってるんですど、いろんな人にER図触ってもらおうと思ったときにおカネの問題がありました。なので他のツールがないかなーと思って探した結果VSCodeでいいんじゃね、となったということです。

#下準備とか前提とか（僕の環境）
Win10
VSCode
[PlantUMLプラグイン](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)

#ちょっと動かしてみる
[PlantUMLの本家](https://plantuml.com/ja/ie-diagram)からお借りしたサンプルを使って表示してみました。
![er_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529567/30cabba6-84e1-6e9e-807c-0cc6c22c63d1.png)
こんな感じ。本家の絵とほぼ同じものが出てくるんですね。
解説に書かれている通り↓Alt-Dで右画面が出ます。
>Preview Diagram, Press Alt-D to start PlantUML preview.

メジャーなER図の記法のうち[IE記法](https://it-koala.com/entity-relationship-diagram-1897#IE)となっているようです。IDEF1X記法に変えられたりするのかはちょっとわかりません。

#真面目に動かしてみる
真面目にとはいっても、お仕事の事例は使えませんので、ER図の例としてどこかに出ているものをPlantUMLで書く、としてみましょう。

[こちら](https://products.sint.co.jp/ober/blog/create-er-diagram#toc-6)の図１－２を書いてみます。

![er_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529567/7473390f-8f18-8695-c511-e87219528b1d.png)
こんなかんじですかね。いきなりデータ型含めちゃいました。
ちょっと物理モデル、データ型なし、も書いてみます。
![er_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529567/3abad431-e6e9-87f4-a040-9a8fe9adb37e.png)
日本人には日本語がわかりやすいですね。さっきリレーションのラベルを付け忘れたので、付けました。
リレーションのラベルはER図独自ではなく、[クラス図共通の設定項目](https://plantuml.com/ja/class-diagram)です。（前提として、PlantUMLにおいてER図はクラス図の拡張）

#まとめ
というわけで意外と簡単にER図が書けました。無償で使えるなんてすごい。なおこのプラグインのライセンスはMITです。
astahなどのモデリングツールはGUIでモデルを描けてとても良いのですが、あまりテキストを書くことに抵抗がない人はこういうのでもいいかもしれませんね。
マンガでわかる打ち出の小槌アンチパターン

![78BA214C-938F-4034-B20A-47FAF8286210.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/ff9c007b-733a-98cd-83d9-d831660ce025.png)
http://wiki.c2.com/?GoldenHammer

英語では黄金の金槌と名付けられています。工具店で勝ってきた最新工具は、まるでヒロイックファンタジーものに出てくる伝説の金のハンマーのように感じます。

便利でかっこいい道具を手にすると、用途を考えるより先に、つい人はそれを使ってみたい気持ちが勝ってしまうものです。慌てて手段を決める前に、問題をしっかり分析して、できるだけ相性のいい道具を選ぶのがプロの職業倫理ですね。

強力なツールや新しい方法論を学び使うことそれ自体は、とても良いことです。問題なのは、じっさいに使うフェーズではなく、実務に入る前に、それさえ使えば解決すると思考停止して選択する点です。

いわゆる「要はバランスおじさん」も、そう言っておけば複数の意見に分かれていても、すべてわかった人の立場を取れるだろうという、その思考停止が問題なんですよね。考える前に口に出すのではなく、じっくり考えて本当にバランスのいい選択をすることが大切です。
PHPを久方ぶりに書いてみて思ったこと

Hiro_Matsunoです。
申し訳ございません。
本日服用薬バラクルードの副作用が出てますのであえてコードは書かず２ヶ月で感じた所感を書いてみたいと思います。
今日は [PHP その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/php2 "PHP その2 Advent Calendar 2020")の９日目す。
#誠に持ってPHPerに復帰いたしました
正直ここ二年間は全くPHPに触れておりませんでした。
C#だったりRPAだったりADITLinuxのビルダーだったりECMA書いてたりJava書いてたりしていました。
そんな自分がようやくほぼ６年ぶりにPHPerとして戻ってきました。
ふぅ長かったです。
正直あのフレームワークが最後でした。
地獄のHTML5・jQuery・PHPが組み合わさっていろんなことを書いてたような気がします。
#今はどう思うかというと
正直何も変わってなくってホッとしました。
オレオレフレームワークだよと言われていましたが。
自分の相棒が帰ってきたような気がしています。
やっぱPHPっていいなぁと思いました。
というよりもECMAのおかげでJavascriptが急激に難しくなったのもあってか素直に書けるPHPが一番楽だと思います。
#PHP8すごそうなんだけど
そう言えばPHP8の情報を今集めてますが。
結構すごそうですね。
PHP7もそうだったんだけど急激に進化してくれるけど昔ながらのところは維持してくれるので一番嬉しく思っています。
正直いきなり難しく変わられてもどうにもなりませんからね。
本当にJavascriptは急激に難しくなりC化が激しい。
それよりはもともとCから派生しているPHPのほうが素直にコードが書けると思います。
CやC++の感じでかけるのが一番いいのかなと思います。
昔のフレームワークなんて怖くてもGithubにて出してますｗ。
率直に言うと一番データベース系にダイレクトに書けるのがPHPのいいところかなと思います。
でも、読み込み順でJavascriptに割り込まれるのは癪だけど。
HTML5で書くのも今は主流ですしバックエンドが何でも動いてしまうのがJavascriptの悪い癖ですね。
昔はjQueryでAjaxぽいぽいするフレームワーク作ってはそれがプライバシマークでお蔵入りとかありましたから。
６年前当時の先端が今では当たり前ですからね。
ほんと時代は怖いもんです。
#これからは
もちろんPHPerとしてもやってきますしC#やPythonなども書いていきます。
Javaはもう触りたくないです。
あとECMAも。
TypeScript覚えたいかな。
Laravelやりたいですね。
今度の自分開発はLaravelをバックエンドで書こうかな。
といったところです。

今日はありがとうございました。
またポエムになっちゃった😭。
Flutterのroute設定 その2

Flutterのroute設定について補足説明をします。

[前回](https://qiita.com/marialyn_peach/items/6502f8d6e45d693f9ead)はroute設定に`onGenerateRoute`を使いましたが、これを使わない方法もあります。
`MaterialApp`が`onGenerateRoute`または`routes`プロパティを持っていればroute設定ができるようです。
また`home`プロパティだけ持っていればアプリケーションを起動できますので、ページ遷移がない場合は`onGenerateRoute`と`routes`は不要です。

[参考資料](https://api.flutter.dev/flutter/material/MaterialApp/MaterialApp.html#:~:text=At%20least%20one%20of%20home,specifies%20an%20otherwise%20unsupported%20route.)

# `routes` と `onGenerateRoute`の違い
似たような働きをするプロパティですが、挙動は少しだけ異なります。また、それぞれの特徴を使って併用することも可能です。
アプリケーションからnaemd routeがpushされた際、まず`routes`テーブルが参照されます。このテーブルで解決できなかった際に`onGenerateRoute`に割り当てられたメソッドが呼ばれます。

また、`routes`による定義ではモーダル表示が使えません。モーダル表示を使う場合は`onGenerateRoute`を設定することになります。このやり方を下に実際のコードの例で示しています。


| | 型 | 特徴 |
|---|---|---|
|routes|`const Map<String, WidgetBuilder>`|先に呼ばれる|
|onGenerateRoute|`Route<dynamic> Function(RouteSettings settings)`|動的、モーダル表示が可能等|

## 実際のコードの例

```dart
MaterialApp(
  title: "Routing Demonstration",
  routes: {
    '/': (context) => HomePage(),
    '/second_page': (context) => SecondPage(),
  onGenerateRoute: (settings) {
    if (settings.name == '/third_page') {
      return MaterialPageRoute(
        builder: (context) => ThirdPage(),
        // モーダル表示
        fullscreenDialog: true,
      );
    }
  }
),
```
自前EDR その２

#概要

vistaにedrを構築する。
不審な自動起動項目を探すautorunsを入れた。

#環境

windows vista 32bit

#写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/f7aceab1-618e-9924-a355-1f6edd0c704e.jpeg)

#スタートアップに電卓を入れた。

タグloginで、optionsのHide windows entiters　のチェックをはずす。

以上。
Rails + PostgreSQLでArray型を使う

こんにちは。

この記事では、Rails + PostgreSQL で Array型のカラムを使用する方法を紹介します。
「Array型を使わずにテーブル分けろ」ってツッコミはしないでください。


## array型ってどういうの？

端的にいうと、
> １つのカラムに複数の値を格納できるデータ型

です。


例えば、librariesテーブルにbooksカラムというArray型のカラムを作成した場合、
「こころ」、「源氏物語」という複数の値を１つのカラムに保存することができます。

実際にデータを作ると以下のようになります。

```sql
postgres=# INSERT INTO libraries VALUES('books', ARRAY['こころ', '源氏物語']);
INSERT 0 1

postgres=# SELECT * FROM libraries ;
   name   | books
----------+---------
 東京図書館 | {こころ,源氏物語}
```

## Railsで使う方法


#### 1. migration

array型にするカラムに `array: true` オプションを付与します。

```ruby
class CreateLibraries < ActiveRecord::Migration[6.0]
  def change
    create_table :libraries do |t|
      t.string :name
      t.string :books, array: true, default: []

      t.timestamps
    end
  end
end
```

#### 2. Create

保存する値を配列で渡します。

```ruby
Library.create(name: "東京図書館", books: ["こころ", "源氏物語"])
```

#### 3. Show

カラムを参照すると、配列で値が返ってきます。

```ruby
library = Library.find_by(name: "東京図書館")
library.books
=> ["こころ", "源氏物語"]
```

#### 4. Query

調べてみると、Array型の検索が高機能だったので、ユースケースごとに紹介します。

ユースケースとしては以下の４つがあるとします。

- 「こころ」を蔵書した図書館を探したい
- 「こころ」と「源氏物語」の両方を蔵書した図書館を探したい
- 「こころ」と「源氏物語」のどちらかを蔵書した図書館を探したい
- ２冊以上の本を蔵書している図書館を探したい

順番に確認していきます。


__「こころ」を蔵書した図書館を探したい__

`=` を使用します。

```ruby
Library.where("'こころ' = ANY (books)")
```

__「こころ」と「源氏物語」の両方を蔵書した図書館を探したい__

`@>` を使用します。

```ruby
Library.where('books @> ARRAY[?]::varchar[]', ['こころ', '源氏物語'])
```

__「こころ」と「源氏物語」のどちらかを蔵書した図書館を探したい__

`&&` を使用します。

```ruby
Library.where('books && ARRAY[?]::varchar[]', ['こころ', '源氏物語'])
```

__２冊以上の本を蔵書している図書館を探したい__

`array_length` を使用します。

```ruby
Library.where("array_length(books, 1) >= 2")
```

## まとめ

いかがでしたでしょうか。
Array型を使用すれば、手軽に複数の値を１つのカラムに格納することができ、様々なユースケースに対応した検索をすることができます。
どうしても「１つのテーブルでまとめたい」という時はArray型を是非検討してみてください。

## 参考
- [PostgreSQLのあまり知られていない型3種](https://qiita.com/choplin/items/9d5e2ff8721fb9509bf8)
- [PostgreSQLで配列型のカラムを使ってみる](https://pasela.hatenablog.com/entry/20070301/postgresql)
- [8.14. 配列](https://www.postgresql.jp/document/8.3/html/arrays.html)
- [9.19. Array Functions and Operators](https://www.postgresql.org/docs/13/functions-array.html)
Railsでfacebook認証する

今回はRailsでdeviseとomniauthを用いてfacebookで認証する方法を書きたいと思います。
僕も認証出来るようになるまでに色んなソースを漁ったり、色んなミスをしたりして２日かかってしまいました…

そんな人が１人でも減るように、そして備忘録として残しておきます。

##一番大事なこと
誰かが書いた日本語のQiitaの記事とかブログを参考する前に一次情報のgithubのOmniAuth:Overviewを見ながら作るのが一番いいです。
というか、ここにほとんど全部書いています。
https://github.com/heartcombo/devise/wiki/OmniAuth:-Overview

こんな記事を書いておいて元も子もないですが、本当にこれが一番参考になりました。
僕も最初は英語読むの面倒だなと思って日本語で書かれた記事ばかり読んでいたのですが、全く上手くいかなかったです。
しかも信頼性の点でもやっぱりofficialな記事には劣るので、英語に抵抗がある人でも必ず読むべきだと思いました。

##僕がしたミスと対策について
①rails serverが立ち上がらない
・gitを入れていない人はrails new app名の後に-Gを忘れないようにしましょう。
必要なファイルが作成されなかったです…
・binファイルが変なところに移動していて立ち上がらないこともあったので、同じようなミスがあった時は一度確認してみてください。

②facebookでログインが上手くいっているのにsign upの画面にリダイレクトされてしまう
これは僕の場合は最初にデータベースに保存した情報と再びログインしようとしたときの情報が違っていたからで、古いデータを一度削除してからログインすると上手くいきました。

③アプリIDが有効ではないと表示されてしまう
これは上に挙げたOmniAuth: Overview通りにコーディングして、facebookアプリ側のcallbackのurlやアプリIDとSECRETに気をつければ直りました。

そのほかにもいろんなバグはありましたが、OmniAuth: Overviewを基本としてその都度バグをググって対処していきました。

##最後に
何回も口うるさく言ってしまいましたが、一次情報が如何に大事かと思い知るいい練習となったので、これからも英語から逃げることなく頑張ります。
Cloud MonitoringのUptime checks IPアドレスのファイアウォール許可ルールを(ほぼ)コピペで設定する

この記事は[Google Cloud Platform Advent Calendar 2020](https://qiita.com/advent-calendar/2020/gcp)の2日目の記事です。
1週間経っても空いていたので雑に埋めにきました。

Cloud MonitoringのUptime checksを利用すると、任意のURLやインスタンスの死活監視を設定することができるのは周知の事実だと思います。
ここで、インスタンスレベルの死活監視をしたいときにちょっとした問題があることは一度でも設定を行ったことがある方にはお馴染みですね。

インスタンスの監視を行うということは、当然VPCネットワークに設定したファイアウォールの影響を受けるということです。
つまり、Uptime checksのリクエストが送信されてくるsource IPアドレス範囲がわかっていて、それらを許可しないと正しい状態を知ることができません。
これを書きながら思いましたが、これはCloud ArmorでIPアドレス範囲を利用してBackendServiceを保護している場合にも同じことが言えそうですね。

キャプチャは省略しますが、Cloud MonitoringのUptime checksの画面には、そのIPアドレス範囲が記されたテキストファイルをダウンロードできるボタンが設置されています。
中身を抜粋すると次のようなテキストファイルです。

```uptime-source-ips.txt
{"ipAddress":"35.205.72.231","region":"EUROPE","location":"Belgium"},
{"ipAddress":"35.187.114.193","region":"EUROPE","location":"Belgium"},
{"ipAddress":"35.205.205.242","region":"EUROPE","location":"Belgium"},
{"ipAddress":"35.187.242.246","region":"ASIA_PACIFIC","location":"Singapore"},
{"ipAddress":"35.186.144.97","region":"ASIA_PACIFIC","location":"Singapore"},
{"ipAddress":"35.198.221.49","region":"ASIA_PACIFIC","location":"Singapore"},
{"ipAddress":"35.198.194.122","region":"ASIA_PACIFIC","location":"Singapore"},
...以下めっちゃたくさん続く
```

いやCIDRで指定できないんかい！
ヘルスチェックのsource IPアドレスはCIDRで2つ指定すれば終わるのに、これは違うんかい！

この記事は、ファイルさえあればあとはコマンドでなんとか設定できるのは理解しているんだけど、それを考えるのがめんどくさい人にたどり着いてもらうことが目的です。

`jq` コマンドがインストールされている環境を想定しています。
なお、筆者は fishシェルしか知りませんので、その他のシェルをお使いの方は適宜読み替えてください。

```bash
$ gcloud compute firewall-rules create allow-uptime-check-source \
  --network=<network> --allow=<protocol>:<port> \
  --source-ranges=(cat uptime-source-ips.txt | jq '.[].ipAddress' | tr -d '"' | tr '\n' ',')
```

ところで、このアドレスリストが常にUptime checksのIPアドレスであることは保証されているのだろうか。
例えばこれらのIPアドレスがいつか各リージョンで利用できる外部IPアドレスに変更される可能性があるのだとしたら...
APT had planned for dpkgって言われた時の対処法

#困ったので
W: APT had plannned for dpkgって言われた時はどうするか。
超訳：aptとdpkgの管理が矛盾してるから直しやがれ
その時は次の行に
Affected packages: hoge
って出ているはずなので、以下のようにする。

sudo dpkg --configure hoge
#公開鍵がないって言われたら
sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 公開鍵
#ポートが開いてなくて通らなかったら
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv-keys 公開鍵
これでいけるはず。（と信じたい）
#P.S.
他人のブログにわざわざ出張ってきて、ここでは書けないような汚い言葉を
コメント欄に並べていく阿呆がQiitaにいることを嘆く。
【TypeScript】type-challengesという型エラー解決の問題集が面白い

## TypeScriptの型の扱い方の学習法に悩む

ハピタスのスマホアプリ版ではReactNative/React(web view)を導入しており、
TypeScriptでの開発を採用しております(Reactは一部JavaScriptが混在)。

JavaScript(以下JS)の上位互換であるTypeScript(以下TS)、
業務で書きながら覚えることはもちろんなのですが、自分で学習する際にどのように学べばTS特有の型を含んだ型の扱いを理解できるようになるのか学習法に悩んでいました。

## type-challenges

何か手を動かしながら学べる物がないと色々探して、
[antfu(GitHub Profile)](https://github.com/antfu)さんという方が作成した
[type-challenges](https://github.com/type-challenges/type-challenges)という型のエラーを解決する問題集を提供しているリポジトリを見つけました。
TS公式にあるPlaygroundで実行しながらコードを書いて問題を解けるので、非常に手軽です。
自分の解答をissueに上げて共有したり、質問をすることもでき、作者や、他に取り組んでいる人たちでサポートし合う環境を目指しているようです。

実際にサンプル問題を解いてみます。

下記のように問題がレベル別にタグとなって表示されております。

実際にwarm-upのHello Worldという問題を解いてみます。

![スクリーンショット 2020-12-09 18.56.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/5338ea11-ff57-378d-d0df-00a67df021e2.png)

解きたい問題のタグを選択すると、問題文が表示されます。

解く際には、```Take the Challenge``` を選択します。

![スクリーンショット 2020-12-09 19.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/5478169d-ddd9-0c18-d541-ae1a98451fea.png)

Playgroundに記述されている```Test Case```のコードがエラーとなっているので
```Your Code Here```の解答を記述する箇所に、問題で提示される条件に合致するようにコードを修正し、```Test Case```のエラーが解消されればOKです。

![スクリーンショット 2020-12-09 19.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/1cf9f79f-d53c-8ffa-bb9a-9e174641b0a6.png)

今回の問題は```expected to be a string```なので
```any```を```string```にすればOKです。


![スクリーンショット 2020-12-09 19.19.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530688/f8d3f560-c2f2-25f5-6075-224a44b1361a.png)

エラーが解消されたので、この問題は解くことができました。

自分の解答を共有したい場合には、左下の```Share your Solutions``` からisuueの作成画面に行けるので、解答を記入してissueとして共有します。
不明点があれば質問を共有すれば誰かが答えてくれるかもしれません。

## 最後に
シンプルな問題からかなり入り組んだ問題まで用意されており、手を動かしてクイズ感覚で楽しんで取り組めます。

TSを書いてると型エラーに苦しめられることが多々あるので
業務以外にも、この問題集で手を動かしながら理解を深めていきたいです。

みなさんも是非挑戦してみてください。

最後まで読んで頂きありがとうございました。