OmniAICreator/Qiita-1.07M huggingface dataset:
RaspberryPi 3B+を802.11acでアクセスポイント化

ドングル等を使わずにラズパイ3B+のネットワークアダプターをそのまま使ってアクセスポイントを構築する。構築方法はRaspberryPiの公式ドキュメントで**[ブリッジ構成](https://github.com/raspberrypi/documentation/blob/master/configuration/wireless/access-point-bridged.md)**と**[ルータ構成](https://github.com/raspberrypi/documentation/blob/master/configuration/wireless/access-point-routed.md)**の２通りが説明されているが、今回はラズパイ3B+にIPアドレスでアクセスでき、拡張性も高いルータ構成で構築する。

基本的に上記の公式ドキュメントのままに進めていくが、ドキュメントでは通信が802.11gになっているので、802.11acで通信するように変更する。

```/etc/hostapd/hostapd.conf
interface=wlan0
driver=nl80211
logger_syslog=-1
logger_syslog_level=2
logger_stdout=-1
logger_stdout_level=2
ctrl_interface=/var/run/hostapd
ctrl_interface_group=0
ssid=YOURSSID
country_code=JP
ieee80211d=1
hw_mode=a
channel=40
beacon_int=100
dtim_period=2
max_num_sta=255
rts_threshold=-1
fragm_threshold=-1
preamble=1
macaddr_acl=0
auth_algs=1
ignore_broadcast_ssid=0
wmm_enabled=1
ieee80211n=1
ht_capab=[MAX-AMSDU-3839][HT40-][SHORT-GI-20][SHORT-GI-40][DSSS_CCK-40]
require_ht=1
ieee80211ac=1
vht_capab=[MAX-MPDU-3895][SHORT-GI-80][SU-BEAMFORMEE]
vht_oper_chwidth=0
eapol_key_index_workaround=0
eap_server=0
own_ip_addr=127.0.0.1
wpa=2
wpa_passphrase=YOURPASSPHRASE
wpa_key_mgmt=WPA-PSK
rsn_pairwise=CCMP
```

あとは、速度テスト用にiperf3をインストールして検証。

```
sudo apt install -y iperf3
```

```
（ラズパイ側はサーバとして起動する）
$ iperf3 -s
```

```
（クライアント側はラズパイに接続して速度チェック）
Connecting to host 192.168.4.1, port 5201
[  5] local 192.168.4.50 port 50747 connected to 192.168.4.1 port 5201
[ ID] Interval           Transfer     Bitrate
[  5]   0.00-1.00   sec  10.4 MBytes  87.1 Mbits/sec                  
[  5]   1.00-2.00   sec  10.7 MBytes  89.8 Mbits/sec                  
[  5]   2.00-3.00   sec  10.8 MBytes  90.2 Mbits/sec                  
[  5]   3.00-4.00   sec  10.8 MBytes  90.6 Mbits/sec                  
[  5]   4.00-5.00   sec  10.2 MBytes  85.9 Mbits/sec                  
[  5]   5.00-6.00   sec  11.0 MBytes  92.6 Mbits/sec                  
[  5]   6.00-7.00   sec  10.0 MBytes  84.1 Mbits/sec                  
[  5]   7.00-8.00   sec  10.2 MBytes  85.9 Mbits/sec                  
[  5]   8.00-9.00   sec  10.7 MBytes  89.7 Mbits/sec                  
[  5]   9.00-10.00  sec  10.8 MBytes  90.8 Mbits/sec                  
- - - - - - - - - - - - - - - - - - - - - - - - -
[ ID] Interval           Transfer     Bitrate
[  5]   0.00-10.00  sec   106 MBytes  88.7 Mbits/sec                  sender
[  5]   0.00-10.03  sec   106 MBytes  88.4 Mbits/sec                  receiver
```

およそ90Mb/s出ているので、実運用でも使えるレベル。

##参考文献
[Setting up a Raspberry Pi as a routed wireless access point](https://github.com/raspberrypi/documentation/blob/master/configuration/wireless/access-point-routed.md)
[Raspberry Pi 向け CentOS にて稼働している Wi-Fi AP を、屋外でも使用できる 5GHz 帯に対応させる方法 (hostapd)](https://www.sgv417.jp/~makopi/blog/archives/3188) - まこぴかっと
box-sizingプロパティについて

##はじめに
box-sizingプロパティについて、初心者向けに備忘録としてまとめてみました。

##何の為に指定するのか
box-sizingを指定する事でボックスの高さ（height）と幅（width）の算出方法を変更することが出来ます。
borderやpaddingを設定した際にボックス全体のサイズが変わってしまい、レイアウトが崩れたりするのを防ぎます。

##記述方法
> box-sizing: 値;

値には下記を指定します。
・ **content-box**  ：ボックスサイズにborderとpaddingを含めません。初期値。
・ **border-box**  ：ボックスサイズにborderとpaddingを含めます。
・ inherit：親要素の値を継承します。

### content-box
borderとpaddingの分だけ、ボックスの幅と高さが指定した200pxよりも大きくなります。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="poci" data-slug-hash="vYNMzvb" data-preview="true" 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="vYNMzvb">
  <span>See the Pen <a href="https://codepen.io/poci/pen/vYNMzvb">
  vYNMzvb</a> by trym-endo (<a href="https://codepen.io/poci">@poci</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### border-box
borderとpaddingに関わらず、ボックスの幅、高さ共に指定した通り200pxになっています。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="result" data-user="poci" data-slug-hash="KKdYXEe" data-preview="true" 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="KKdYXEe">
  <span>See the Pen <a href="https://codepen.io/poci/pen/KKdYXEe">
  KKdYXEe</a> by trym-endo (<a href="https://codepen.io/poci">@poci</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


##全体に適用するとどのようなメリットがあるのか
CSSで全要素にbox-sizing:border-box;を指定する事で、paddingやborderに関わらず要素全体の幅は指定したwidthの値となる為、計算の手間が省けます。

### ユニバーサルセレクタ(*)で指定する場合
```css
* {
  box-sizing: border-box;
}
```
### bodyに指定して子要素に継承する場合
※box-sizingは子要素に引き継がれない為、inheritで継承する必要があります。

```css

body{
  box-sizing: border-box;
}
body *{
  box-sizing: inherit;
}
```

##まとめ
あらかじめページ内の全要素にbox-sizing:border-box;を指定しておくと、paddingやborderによってボックス要素のサイズが変化する事がない為、コーディングがしやすくなるメリットがあります。
"Could not find a storyboard named ‘Main’ in bundle NSBundle"に遭遇した時


### 環境
- macOS Catalina 10.15.4
- Xcode11.4
- TargetSDK iOS13.4

### いつ遭遇したか
iOSアプリを作る際に、最初に表示したい画面の名前を変えたかったので、`Main.storyboard`のファイル名を`Sample.storyboard`に変えてビルドすると、画面が描画されずに

```
Could not find a storyboard named ‘Main’ in bundle NSBundle
```
と表示されてクラッシュした。

**[Could not find a storyboard named 'Main' in bundle NSBundle 対処方法](https://qiita.com/kakipo/items/f93cc2bdc8b36b67adbb)**を参考に、info,plistの`Main storyboard file base name`を消したり、`Sample`に変えても効果なし。

## 解決方法
Xcode全体に`Main`で検索をかけてみると、info.plist内にもう一箇所Storyboardの名前を指定している箇所を見つけた。
![スクリーンショット 2020-05-27 0.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/439025/8b5f2183-e01c-f98e-5f0c-cd03a959f1d4.png)
Application Scene Manifest
↓
Scene Configuration
↓
Application Session Role
↓
Item 0 (Default Configuration)
↓
Storyboard Name

これが`Main`になっていたので、`Sample`に変更すると、無事にビルドできた。
ファイル名変えるだけなのにこんなトラップがあるとは...
docker run のときに指定する -p と –-expose の違い

# dockerコンテナ起動時にポートを指定する引数 -p と --expose の違いは？

https://docs.docker.com/engine/reference/commandline/run/#publish-or-expose-port--p---expose

# 結論
違いは指定されたポートを**晒す先**

## -p (--publish):ホストに晒してホスト側からの接続を許可する
Mysqlのコンテナを立てて各種DBツールから `localhost:3306` として繋ぎたい場合、
`docker run ~~ -p 3306:3306 ~~ mysql`
と公開するポートを指定する必要がある。

このとき、ホスト側ですでに`3306`ポートが利用中の場合は起動に失敗する。
そんなときは`~~ -p 3316:3306 ~~` などにしてホスト側のポート番号を変えてあげればよい。

## --expose:同一dockerネットワーク内に晒して、同一ネットワーク内からの接続を許可する
同一dockerネットワーク内に存在するPHP-FPMコンテナから3306ポートを使ってMySQLに接続したい場合に利用する。
※もっとも、MySQLなどは`Dockerfile`内で`EXPOSE`されているため、指定は不要
　→ https://github.com/docker-library/mysql/blob/bc6e37a2bed792b1c4fc6ab1ec3ce316e6a5f061/8.0/Dockerfile#L84

# 感想
気になって調べたけど、docker run のタイミングで `--expose` 指定するケースが思い浮かばなかった。
（大体、Dockerfile内で`EXPOSE`が書かれているため）

あと、MySQLのDockerイメージは`33060`ポートも指定してたのね、知らなかった。
→ (さっきと同じリンク）https://github.com/docker-library/mysql/blob/bc6e37a2bed792b1c4fc6ab1ec3ce316e6a5f061/8.0/Dockerfile#L84
Dockerを使用したRails開発 ダウンロード編(仮想環境の準備 Mac用) 

##初めに
この度はRails5でテストアプリ開発のため仮想環境を「Docker」で準備し制作を進めることにしました。
Dockerを使用するのがはじめてだったので忘却録をこちらに記録します。

#マシンスペック
・macOS Catalina
・バージョン 10.15.4
・iMac(retina 4K, 21.5-inch,2019)
・プロセッサ 3 GHz 6コアIntel Core i5
・メモリ 8GB

##Dockerのダウンロード

①Dockerのサイトをブラウザで開き、アカウントを取得してください。

(公式サイト)
<img width="1306" alt="Docker_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262991/b456e596-de70-67ca-0845-9b81418e32d4.png">
https://www.docker.com


(アカウント取得先アドレス)
https://hub.docker.com/signup

①Dockerのインストール
<img width="1314" alt="Docker_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262991/7280ce73-3f26-2189-0037-9caf96de5d57.png">
https://www.docker.com/get-started
こちらの「Mac」を選択してインストールしてください。

ダウンロード後は、ドラックアンドドロップで「Applications」に保存します。

③バージョン番号を確認する

「ターミナル」を使用して以下のコマンドを入力してください。

```docker version ```
<img width="452" alt="Docker_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262991/91f897da-9232-2c74-01ef-19e2f3030b29.png">


```docker-compose version```
<img width="390" alt="Docker_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262991/099f7cef-f057-5286-84c8-9793d4044e52.png">


以上がDockerのダウンロードでした。
WSL 2 デビューするときの初期設定

# はじめに

こんにちは。今回 MacBook Pro を新調したのですが、最近 Windows の最新動向が気になるので、 Windows も使えるようにしたいと思い、[Bootcamp](https://support.apple.com/ja-jp/HT201468) をセットアップすることにしました。その際、とても詳しくて役に立ったのはこの記事です :heart_eyes:

> https://ascii.jp/elem/000/004/011/4011143/

Mac で Windowsが使えるようになったその勢いで、[Windows Insider Program](https://insider.windows.com/ja-jp/getting-started/) にも登録し、話題の WSL 2 をいち早く試すことにしました :v:

> 今回は MacBook Pro 13 (macOS 10.15.4) + Bootcamp + Windows 10 Home の組み合わせですが、純正の Windows 端末でもやることは同じだと思いますのでご参考になさってください。

# 今回のゴール

WSL 2 で VS Code を起動し、SFDX コマンドを実行するまでをゴールとします :golf:

# 最初にやること

Windows にログインし、WSL 2 をインストールします。管理者モードの Powershell からコマンドをいくつか実行するだけです。

```sh
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
wsl --set-default-version 2
```

その後、Ubuntu の LTS をインストールして、Linux の世界へ Go :airplane:

> https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

# ターミナルのプロンプトを整える

ターミナルのデザインは大事ですね。コーディングするときのモチベーションにかかわります。

私は時刻や改行を入れたい派なので、次の例のように `~/.bashrc` と `~/.bash_profile` を作成します。

```sh:~/.bashrc
export PS1=$'\n''\D{%Y.%m.%d} \A $ \W\[\033[31m\]\[\033[00m\]'$'\n> '
```

```sh:~/.bash_profile
test -r ~/.bashrc && . ~/.bashrc
```

# 開発環境を整える

余談ですが、どうやら Git は最初から Linux 内にインストールされている模様。

```sh
wsl
git --version
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/8f9df997-c3ab-b898-a44c-b38f1269a8fd.png)

## Node.js

Node.js LTS のインストールには nvm がおすすめ。

> https://docs.microsoft.com/ja-jp/windows/nodejs/setup-on-wsl2

```sh
sudo apt-get install curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install --lts
nvm ls
node -v
npm -v
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/cf457772-6e5f-3a63-e69e-c0e2b7b66e5a.png)

## Salesforce CLI

npm 経由で Salesforce CLI をインストールします。

```sh
npm install --global sfdx-cli
sfdx force
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/3178eb8b-aab7-9a35-20a3-d9408434e629.png)

## Visual Studio Code

VS Code と WSL 用の拡張機能をインストールします。Linux 内ではなく Windows 内にインストールする点に注意です。

> - https://code.visualstudio.com/
> - https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

# 結果発表

VS Code を起動 :point_right: 左隅の `><` の緑色アイコンをクリック :point_right: `Remote-WSL: New Window` をクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/26c83110-dbc1-15d2-cd43-5e8f1d812a67.png)

左隅に `WSL: Ubuntu` が光ってること、ターミナルが `1: bash` になってることを確認できますか？ sfdx コマンドを実行できたら無事ゴールです :tada:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/72dfe988-e9f0-38bb-d6e0-5fcd77b11a0e.png)

# おまけ

エクスプローラーで見たいときは、アドレス欄に `\\wsl$\Ubuntu\home\takahito` などと入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212555/fd5933c8-e4c4-e99e-aa28-4b9b2f8dfa89.png)

これで開発生産性がますます向上しそうです。それではまた。 Happy Coding!!
【後編】Mask R-CNNで発生したエラー「UserWarning: An input could not be retrieved. It could be because a worker has died」を解決してみた。

#エラーの原因特定まで

[【前編】Mask R-CNNで発生したエラー「UserWarning: An input could not be retrieved. It could be because a worker has died」を解決してみた。]
(https://qiita.com/skperfarming/items/68cdec8ad8672837bd38)

前編ではエラーの発生とその原因を探りました。
後編では実際にちゃんと学習できる実装を紹介します。

#DOWNLOAD/SETUP/IMPORT

```nucleus_train.py
# Mount drive
from google.colab import drive
drive.mount('/content/drive/')
%tensorflow_version 1.x
```

google driveをマウントします。
tensorflowのバージョンも前のものを指定しましょう。

```nucleus_train.py
# Change directory to project folder
%cd "/content/drive/My Drive/DeepLearning2/Mask_RCNN"
!python setup.py install
```
setup.pyがあるディレクトリを指定して、セットアップをします。


```nucleus_train.py
import os
import sys
import random
import math
import re
import time
import numpy as np
import tensorflow as tf
import matplotlib
import matplotlib.pyplot as plt
import matplotlib.patches as patches

# Root directory of the project
ROOT_DIR = os.path.abspath("../../")

# Import Mask RCNN
sys.path.append(ROOT_DIR)  # To find local version of the library
from mrcnn import utils
from mrcnn import visualize
from mrcnn.visualize import display_images
import mrcnn.model as modellib
from mrcnn.model import log

from samples.nucleus import nucleus

%matplotlib inline 

# Directory to save logs and trained model
LOGS_DIR = os.path.join(ROOT_DIR, "logs")
```
おなじみのいろいろをimportしたりします。
多分、他のipynbのものをコピーしただけです。

#学習まで

```nucleus_train.py
!mkdir "/content/datasets"
!cp "/content/drive/My Drive/DeepLearning2/Mask_RCNN/datasets/nucleus/stage1_train.zip" "/content/datasets"
!mkdir "/content/datasets/stage1_train"
!unzip /content/datasets/stage1_train.zip -d /content/datasets/stage1_train
```
content直下にdatasetsというフォルダを作成
→その中にzipを格納
→datasets直下に解凍したデータを入れるフォルダを作成
→zipを解凍して、作成したフォルダに格納

```nucleus_train.py
%cd "/content/drive/My Drive/DeepLearning2/Mask_RCNN/samples/nucleus/"
!python3 nucleus.py train --dataset=/content/datasets/ --subset=train --weights="/content/drive/My Drive/DeepLearning2/resnet50_weights_tf_dim_ordering_tf_kernels_notop.h5"
```
ディレクトリをnucleus.pyがあるところまで移動
→学習開始するコマンドを実行！


#エラー解決

前編で述べていたエラーは出ることなく、Epoch40まで学習を進めることができました。
途中でセッションが切れてしまったりした場合、以下のように指定することで途中から学習を再開することができます。

```nucleus_train.py
!python3 nucleus.py train --dataset=/content/datasets/ --subset=train --weights=last
```


無事学習を進めることができました！
改善点等あればコメントを下さい～
RaspberryPI起動と同時にDockerイメージを起動

#目的
Flatの環境またDockerの環境が構築されている場合、RaspberyPiを起動した後、Dockerの特定イメージを自動で起動させる方法について話をしたいと思います。

#1./etc/rc.localについて
OSが起動された後、何か実行したい処理をここに追加します。

#2.既存のrc.localの中身を確認します。
「cat」コマンドでファイルの中身を確認します。
ここに処理を追加する場合は「exit 0」の前に追加します。
「exit 0」の後ろに追加した場合は正常に実行されません。

```bash
pi@raspberrypi:~ $ cat /etc/rc.local
#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

# Print the IP address
_IP=$(hostname -I) || true
if [ "$_IP" ]; then
  printf "My IP address is %s\n" "$_IP"
fi
exit 0
```

#3.Dockerイメージを起動するコマンドを追加します。
Dockerイメージを起動するコマンドの形式は下記の通りです。
行の末に「&」を必ず入れて置きましょう。
→追加した処理が正しく終わらないとOSの起動が止まっている可能性があります。

```bash
例）/usr/bin/docker start docker-image-name &
```
コマンドを追加したrc.localファイルの中身です。

```bash
pi@raspberrypi:~ $ cat /etc/rc.local
#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

# Print the IP address
_IP=$(hostname -I) || true
if [ "$_IP" ]; then
  printf "My IP address is %s\n" "$_IP"
fi
/usr/bin/docker start LAMP &
exit 0
```
※前回Flatの環境で構築したLAMP環境のDockerイメージ名です。
前回記事：[Flatを利用してLAMP環境構築](https://qiita.com/neomi/items/ae59a506dc6ddc5fba2e)

#4.RaspberryPIを再起動します。
下記のコマンドを実行するとRaspberryPIが再起動されます。

```bash
pi@raspberrypi:~ $ sudo reboot
```

#5.Flat環境へログインします。
①下記のアドレスをブラウザから入力してアクセスします。

```bash
http://[Raspberry PIのIPアドレス]:9000
または（モニターと直接繋がっている場合、下記のアドレスを利用してもOK）
http://localhost:9000
```
②アカウントは[admin/設定したパスワード]を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/11b3525f-3004-24eb-d12a-db80674d2933.png)
③Flatの初期画面です。「Containers」メニューを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/8a533a18-151b-1d89-3a1b-c52550daa9b0.png)
④下記のLAMPというDockerイメージは起動されていますが、
OSMCというDockerイメージは起動されてないことが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162336/214ecfaf-659f-adac-fbf7-d2f64415c2f4.png)

#6.その他
Dockerイメージを起動した後、Dockerイメージの中にあるコマンドを実行したい場合、
以下の形式で「/etc/rc.local」ファイルに追加します。

★注意事項★
Dockerイメージの起動コマンドの後に追加してください。

```bash
/usr/bin/docker exec LAMP /usr/bin/python /home/pi/mail.py &
```
※pythonコマンドでmail.pyプログラムを起動する例です。


#終わりに
今までRaspberryPIを再起動したらFlatの画面でDockerのイメージを毎回起動ボタンを押さないとDockerが起動されなかったですが、これからは再起動すると自動でDockerイメージが起動されるようになりました。
少し役に立ちましたか？次回は上記の「mail.py」について紹介したいと思います。
お休みなさい。＾＾＆
[Python]04章-04 いろいろなデータ構造（リストの参照）

#[Python]04章-04 リストの参照
ここでは、新たな知識を説明するというより、リストの特徴を知ってほしいという意味で「参照」について述べていきたいと思います。

##オブジェクトの参照
まずは参照について確認していきます。
**Python Console**に以下のコードを入力してください。

```.py
>>>Lx = [8, 6, 5, 9, 7]
>>>Ly = Lx
>>>Ly
[8, 6, 5, 9, 7]
```

この状態で、以下のコードを入力してください。

```.py
>>>Ly[4] = 1000
>>>Ly
[8, 6, 5, 9, 1000]
```

ここまではわかるかと思います。
簡単に説明すると、**Lx**という変数に[8, 6, 5, 9, 7]というリストを代入し、Lyに代入してから、Ly[4]に1000を代入して、中身を確認しています。
もちろん、Lyを表示すると、[8, 6, 5, 9, **1000**]となります。

では、この状態で、**Lx**を表示してみましょう。すると以下のようになります。

```.py
>>>Lx
[8, 6, 5, 9, 1000]
```

先ほど、**Ly**のリストの要素を変えたはずなのに、**Lx**も変わっていることが確認できたかと思います。

この舞台裏を見ていきたいと思います。

まず、

```.py
>>>Lx = [8, 6, 5, 9, 7]
```
についてですが、Lxにリストを代入しています。
ここで重要なのが、[02章の「変数」](https://qiita.com/ko0821/items/8355b4e192aa76a0e8ae#%E5%A4%89%E6%95%B0%E9%87%8D%E8%A6%81)の時にも説明した通り、**変数はタグである**という旨を話しました。

今回も、リストの[8, 6, 5, 9, 7]に**Lx**というタグを付けていることは02章で説明したことと同じです。図で説明すると以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/81257a7b-d3db-0786-4cc9-55bd79f54bb1.png)

では、次に

```.py
>>>Ly = Lx
>>>Ly
[8, 6, 5, 9, 7]
```

について見ていきます。
ここで、**Ly = Lx**についてなのですが、この代入が行われると、**変数Lxが参照しているものを変数Lyも参照しなさい**という意味になります。

すると以下のように図で表せると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/b41631a4-c34c-9b16-626e-54141c5f60be.png)

**Lx**と**Ly**は同じリストを**参照**しているということになります。
そのため、Lyを出力すると、[8, 6, 5, 9, 7]が出力されるのです。

ではその状態で、

```.py
>>>Ly[4] = 1000
>>>Ly
[8, 6, 5, 9, 1000]
```

について説明します。

Lyが参照している実体は[8, 6, 5, 9, 7]であるため、Ly[4]=1000とすると、実体[8, 6, 5, 9, 7]に対しての動作となり、[8, 6, 5, 9, **1000**]となります。

そのため、以下のような図で表せます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/602679/55307855-0e3d-7f90-dd6d-e33d49ad4e5a.png)

そのような状態で、**Lx**と入力すると、

```.py
>>>Lx
[8, 6, 5, 9, 1000]
```

となり、**Ly**と参照している実体が**Lx**も同じなので、**Lx**の出力結果も変わってくるのです。

このリストの参照に限らず、今後参照についてはいろいろなところで登場します。一般的に**オブジェクトの参照**と言ったりします。

<font color=orange>（※）</font>この参照という概念については、Java言語を習得された方はご存じかと思われます。「配列」においても同じ事象があったかと思います。

##今後の変数に対する表現について
今までは「値を**x**という変数に代入する」といった「代入」で説明していきました。
これからは「変数**x**とが実体（オブジェクト）を参照している」と表現したり、「変数**x**とが示している」といった表現も利用していきます。

##ガーベージコレクション
今まで変数**Lx**と**Ly**によって、リスト（オブジェクト）が参照され、それを参照することで、実体であるリストの中身を確認できました。

では、上記の状況を踏まえ、**Python Console**から以下のコードを入力してください。

```.py
>>>Lx = 10
>>>Ly = ['Japan', 'Canada']
```

ここで何が言いたいかというと、実体であるリスト[8, 6, 5, 9, 1000]はどうなってしまうのかということです。

変数**Lx**と**Ly**には別の実体を参照したため、実体であるリスト[8, 6, 5, 9, 1000]にたどり着けない状態となっています。

このままですと、コンピュータのメモリがいっぱいになってしまいます。
これを避けるために、Pythonでは「ゴミデータ」と判別し、実体であるリスト[8, 6, 5, 9, 1000]を削除します。

これを**ガーベージコレクション**といいます。

##最後に
今回はリストの特徴について述べていきました。
正直な話、「参照」については実務で使うことはないのですが、どのPython書籍にも掲載されている事項となります。

今後、基本情報技術者試験でPythonを選択しようと考えている人は出題される可能性が高いので、ぜひ覚えておきましょう。


###[【目次リンク】へ戻る](https://qiita.com/ko0821/items/379e8bd9e6ea01089419)
Denoの自作モジュールをGitHubから読み込む

## はじめに

最近、Deno v1.0がリリースされ、話題になっていたので、少し触ってみました。
その中で、自分で作った小さいモジュールをDenoで使おうとしたときにやったことをメモします。

## Denoとは

ザックリと説明しますと、Node.jsの作者さんが、Node.jsに関する10の反省点を踏まえて設計した新しいJavaScript/TypeScriptランタイムになります。
[10 Things I Regret About Node.js - Ryan Dahl - JSConf EU - YouTube](https://youtu.be/M3BM9TB-8yA?t=1)

TypeScriptをデフォルトでサポートし、フラグで許可しない限りネットワークや環境変数のアクセスができないセキュアな仕組みが特徴です。

今回のは自作モジュールの配信の話が主体なので細かい説明については割愛しますが、入門の際にわかりやすくて参考にさせていただいた記事があるので、紹介させてください。
[Denoとはなにか - 実際につかってみる](https://qiita.com/azukiazusa/items/8238c0c68ed525377883)

## Denoのモジュールについて

Denoのモジュールは、公式が配信する[Standard Library](https://deno.land/std)とユーザーが作成した[Third Party Modules](https://deno.land/x)の2つがあります。

Third Party Modulesは、公式サイトのリポジトリにある[database.json](https://github.com/denoland/deno_website2/blob/master/database.json)を編集してプルリクを出せば公式サイトから読み込めるようになります。
ですが、正直ここに載せるまでもないけど使いたい小さな自作モジュールがあったりしませんか？
その場合、GitHubにあげるだけで使えます。

## 本題

まず、使いたいモジュールを自分のリポジトリにプッシュします（ここでは、[私が作った簡単なモジュール](https://github.com/windchime-yk/deno-util)を例に使います）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197494/0124fb1c-75f0-7162-4385-35f926a5178d.png)

次に、使いたいTypeScriptファイルまで移動し、そのURLをコピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197494/9c898233-f031-d57a-4da4-892f68f8f591.png)

最後に、そのURLの中にある`blob`を`raw`に書き換え、`import`に利用してください。

```typescript
import { extractObjectValue } from 'https://github.com/windchime-yk/deno-util/raw/master/mod.ts'
```

もし`raw`に書き換えないと、HTMLが読み込まれてエラーを吐きます。

以上の手順で、GitHubからDenoモジュールを読み込むことができます。
それでは皆様、よいDenoライフをー。
【C#】 ファイルの作成・書き込みのやり方。



##自己紹介
こんにちは。tetraです。
最近C#の学習を始めました。C#歴2ヶ月目の新卒エンジニアです。
仕事中にファイルの扱い方が分からなくて時間をかなり使ったのでチートシートとして作成します。

##ファイル作成
例えば、a.txtというファイルを作りたい場合以下のように書くことができます。

```MakeFile_a.cs
using System;
using System.IO;
class Test
{
    public static void Main()
    {
        using (FileStream fs = File.Create("./a.txt")) ;
    }
}
```

また、ファイルを他から参照することも可能です。

```MakeFile_a2.cs
public static void Main()
{
    string path = "./a.txt"
    using (FileStream fs = File.Create(path)) ;
}
```


##ファイル書き込み
ファイルの書き込みは、上書き保存タイプと追記タイプがあります。

###上書き保存

```overwrite.cs
using System;
using System.IO;
using System.Text;

class Test
{
    static void Main()
    {
        string arg = "hello";
        Encoding enc = Encoding.GetEncoding("Shift_JIS");
        using (StreamWriter writer = new StreamWriter("./a.txt", false, enc))
        {
            writer.WriteLine(arg);
        }
    }
}
```

###追記タイプ

変わるところは
using (StreamWriter writer = new StreamWriter("./a.txt", **true**, enc))
です。

```add.cs
using System;
using System.IO;
using System.Text;

class Sample
{
    static void Main()
    {
        string arg = "world";
        Encoding enc = Encoding.GetEncoding("Shift_JIS");
        using (StreamWriter writer = new StreamWriter("./a.txt", true, enc))
        {
            writer.WriteLine(arg);
        }
    }
}
```
##いかがでしょうか？
いかがでしょうか。経験が浅いため至らぬところがまだまだあります。
もし間違い等に気がつきましたら、コメント又は[tetra](https://twitter.com/_T_E_T_R_A_)までお知らせください。
bashでevalを使って変数内の文字列を評価・連結して実行する

# 目的
- bashでevalを使って変数内の文字列を評価して実行する
- bashでevalを使って変数内の文字列を連結して実行する

# 環境
- bash

# evalの使用例
同ディレクトリ内に、以下2つのtxtファイルを格納した状態とします。

```text:hoge.txt
hoge hoge
```

```text:fuga.txt
fuga fuga
```

evalを使って、単純な文字列ではなく、文字列を評価・連結します。
evalの基本的な機能の説明は割愛します。

```bash:example.sh
#!/bin/bash

value='hoge'

#文字列としてコマンドを変数に格納
#bash内の関数に文字列としてコマンドを与えるケースや、
#ファイルから文字列としてコマンドを読み込むケースを想定
cmd='grep $value hoge.txt'

echo $cmd
#出力 -> grep $value hoge.txt
#echoの場合、コマンドは実行されない. 変数は展開されずに、文字列として出力される

eval $cmd
#出力 -> hoge hoge
#evalの場合、変数が展開され、コマンド実行される
```
```text:実行結果
$ ./example.sh
grep $value hoge.txt
hoge hoge
```

## 文字列内の変数を評価してechoで出力
```bash:success.sh
#!/bin/bash

#同ディレクトリ内のtxtファイルにgrepを実行し,検索パターンが見つかった場合,メッセージを出力する関数.
#第一引数に検索パターン,第二引数に出力するメッセージを渡す
grep_text() {
	for txt_file in $(ls . | grep ".txt$"); do
		grep_result=$(grep $1 $txt_file)
		if [ $? -eq 0 ]; then
			eval echo $2
		fi
	done
}

query='hoge'
#関数内で使用している変数を出力メッセージに含める
message='検索対象が見つかりました. 見つかったファイル名:$txt_file'
grep_text $query "${message}"

query='fuga'
message='検索対象が見つかりました. 見つかった文:$grep_result'
grep_text $query "${message}"
```

```text:実行結果
$ ./success.sh
検索対象が見つかりました. 見つかったファイル名:hoge.txt
検索対象が見つかりました. 見つかった文:fuga fuga
```

以下のように、evalを使わない場合、文字列内の変数が評価されません。

```bash:failed.sh
#!/bin/bash

grep_text() {
	for txt_file in $(ls . | grep ".txt$"); do
		grep_result=$(grep $1 $txt_file)
		if [ $? -eq 0 ]; then
			#evalを使わない場合
			echo $2
		fi
	done
}

query='hoge'
message='検索対象が見つかりました. 見つかったファイル名:$txt_file'
grep_text $query "${message}"

query='fuga'
message='検索対象が見つかりました. 見つかった文:$grep_result'
grep_text $query "${message}"
```

```text:実行結果
$ ./fail.sh
検索対象が見つかりました. 見つかったファイル名:$txt_file
検索対象が見つかりました. 見つかった文:$grep_result
```

## 文字列内のコマンドを評価して実行
```bash:cmd.sh
#!/bin/bash

grep_text() {
	for txt_file in $(ls | grep ".txt$"); do
		#引数で渡されたgrepを実行
		grep_result=$(eval $1)
		#検索パターンが見つかった場合,メッセージを出力
		if [ -n "$grep_result" ]; then
			echo "検索対象が見つかりました. 見つかった文:$grep_result"
		fi
	done
}

cmd='grep "hoge" $txt_file'
echo $cmd
grep_text "$cmd"

cmd='grep "fuga" $txt_file'
echo $cmd
grep_text "$cmd"
```

```text:実行結果
$ ./cmd.sh
grep "hoge" $txt_file
検索対象が見つかりました. 見つかった文:hoge hoge
grep "fuga" $txt_file
検索対象が見つかりました. 見つかった文:fuga fuga
```
ESP32 で アクセスポイント ＋ WebServer

検証用のミニマムコードです。

「スケッチ例」-「WebServer」-「HelloServer」を改造しました。
"HelloServer" は、WiFi のクライアントで動作しますが、WiFiのAPモードに変更しています。

# 環境

- Arduino 1.8.10 for Linux
- esp32 by Espressif System Version 1.0.3
- WEMOS LOLIN32

# コード

```

#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "ESP32";
const char* password = "11111111";
WebServer server(80);
void handleRoot() {
  server.send(200, "text/plain", "hello ESP32 Web Server");
}
void handleNotFound() {
  String message = "File Not Found\n\nURI: ";
  message += server.uri();
  server.send(404, "text/plain", message);
}
void setup(void) {
  Serial.begin(115200);
  WiFi.softAP(ssid,password);
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.on("/inline", []() {
    server.send(200, "text/plain", "this works as well");
  });
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}
void loop(void) {
  server.handleClient();
}
```

はじめに投稿したコードは以下のようにヘンな括弧が入っていてバグってました。Sorry!

```
void handleNotFound() {
  String message = "File Not Found\n\nURI: ";
  message += server.uri();
  }
  server.send(404, "text/plain", message);
}
```
MBDynの使い方（コマンド設定）

#雑談
MBDynをインストール後どのように扱うかの備忘録です。
環境はUbuntuを想定。
MBDynというツールを使う人がもしかしたら日本にもいるかもしれないので公開しておきます。

ちなみに他の記事のようにコードもかっこよく書きたかったので今回からちゃんと書こうと思います。

#パスを通す
まずMBDynをどの場所でも使うには環境変数を設定してパスを通す必要があります。
そこで環境変数を設定する必要があります。
デフォルトで'MBDyn'コマンドは'/usr/local/mbdyn/bin'にあります。
そのため以下のコマンドでシェルがコマンドを実行する際にコマンドを検索する場所に上の場所を追加しておきます。

```ruby:PATH.rb
export PATH=$PATH:/usr/local/mbdyn/bin
```

#bashの設定ファイル変更
しかしこれでは一時的な変更にしかならずbashを終了するとすべての設定は消えてしまいます。
そのためbashの設定ファイルを変更します。

```ruby:PATHvim.rb
vim ~/.bashrc
```
開いたファイルに上のexportコマンドを追加しておきます。

以上でおそらく次から'MBDyn'を使えるようになっています。
Nvidiaのドライバをオフィシャルサイトからインストールする

## 概要

runファイルからインストールしたほうが何かといいと聞きましたが、公式サイトからrunファイルを落としてきて、で、どうするの？
ってなりましたので、色々調べて備忘録としてここに残しておきます。


あとで泣かないためにまずここでどのバージョンをインストールすればいいかあたりをつけときましょう。
https://qiita.com/chin_self_driving_car/items/f00af2dbd022b65c9068


https://qiita.com/yukoba/items/4733e8602fa4acabcc35 

ここも参考にしました。ありがとうございます。

##Nvidia ドライバインストール


```bash
sudo apt-get install build-essential gcc-multilib dkms
```
```
vim /etc/modprobe.d/blacklist-nouveau.conf
```


vim でここに書き込みます。
```/etc/modprobe.d/blacklist-nouveau.conf
blacklist nouveau
options nouveau modeset=0
```

```
sudo update-initramfs -u && sudo reboot
```

```
sudo systemctl stop gdm
```

```
sudo chmod +x NVIDIA-Linux-x86_64-418.56.run
sudo ./NVIDIA-Linux-x86_64-418.56.run　--dkms -s
```

```
nvidia-smi
```


## CUDAもインストールする
さらに、CUDAも行ってみます。

https://developer.nvidia.com/cuda-downloads?target_os=Linux&target_arch=x86_64&target_distro=Ubuntu&target_version=1804&target_type=runfilelocal

に行き、またrunファイルをインストールします。

```
wget http://developer.download.nvidia.com/compute/cuda/10.2/Prod/local_installers/cuda_10.2.89_440.33.01_linux.run
sudo sh cuda_10.2.89_440.33.01_linux.run
```

```
sudo sh cuda_10.2.89_440.33.01_linux.run
```


##最後にcuDNN
FireBaseをWordpressと連携してみた

WordPress上で運営している資格学習サイト、<a href="https://www.qualification-master.work/
">資格のいろは</a>にFireBaseを連携してみたところ、無事動作を確認しユーザの管理が出来るようになったのでここで共有しておきたいと思います。

<h2>FireBaseとは</h2>

FireBaseはGoogleによって提供されているデータベースシステムで、アプリ開発からWebサービスの運用にまで様々な用途があります。

リアルタイムでのデータの同期や読み取り書き込み、認証等様々な事が実現可能で、それでいて個人で運用する分においては殆ど無料で利用することが出来るため費用も抑えることが出来て使い勝手が良いです。

機能は多岐に渡るのですが、筆者が使用した機能は以下の通りです。

<h3>Authentication</h3>

アカウントの認証機能ですね。

Googleアカウントとの連携をはじめ都市、SNSやメールアカウント、電話番号による認証を利用することが出来ます。

Wordpress内でのユーザ登録制にすれば良いかなと最初考えていたのですが、Xserverの容量的に将来オーバーフローするのが嫌だったこともありこちらを利用するに至りました。

<h3>DataBase</h3>

ユーザのデータを保持する目的で利用しています。

階層がコレクション>ドキュメント>フィールドとなっており、データ型を自由に決めることが出来るNoSQLでのデータ管理となっています。

1Gまで無料で利用することが可能です。

<h3>FireStore</h3>

リアルタイムで同期できるデータベースで、ネットワークの遅延やインターネット接続に関係なく接続することが可能です。

<h2>FireBaseを使うに至った理由</h2>

資格学習サイトを作りこむにあたって、ユーザ毎に学習進捗率を保存する事は必至でした。

最初はWordPress内で登録できるユーザ情報にそれぞれの進捗率を保持させようとしたのですが、そもそもどのようにデータが格納されているのか、定義をすればよいかが分からず二の足を踏んでいる状態でした。

また、先ほど触れた通り容量の問題もあったので・・・

<h3>FireBaseを使ってどう変わったか</h3>

FireBaseを使用してみて改めて、外部にデータを送り、DOM操作によりWordPress内のテキストを変換してやれば簡単に進捗率を表記できるため驚きました。

データの型や構造を自分で決めることが出来た点も魅力的で一定容量までなら無料で使用できるので開発コストが低い点も非常に嬉しいですね。

それなりにドキュメントが用意されており、技術的に躓いた場合でも参照できる、というのも嬉しいポイントでした。

<h3>FireBaseをWordPressに載せる際に苦労した点</h3>

WordPress上でFireBaseを動作させる際、ヘッダ部にJavaScriptでFireBaseを呼び出す記述を書いてやればよいのですが、始め中々連携がうまくいかずにてこずってしまいました。

WordPressのテーマによっては高速化のためにJavaScriptを圧縮するものもあり、その関係で動作に不具合が起きていたようです。

テーマやプラグインでJavaScriptを始めコードに影響を与えるものがある場合要注意です。

<h3>FireBaseの良かった点</h3>

実際に使用してみて、思うような動作を実現することが出来、現在は簿記3級やITパスポートの独学用サイトを作ることが出来ました。

ユーザが以前解いた問題や日時を記録することで、再度ページを訪問した際に何処を復習すべきかが一目瞭然になっています。

<a href="https://www.qualification-master.work/nissyoboki/3kyu-n/self-study-support-n3">簿記3級のページ</a>

![self-study-support-n3-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315920/9d21017f-53d7-7a0c-248f-d2140bdfee4b.png)

このようにユーザを囲い込めるような機能を比較的容易に(と言っても数か月はかかりましたが)実現可能なので、Wordpress上でシステムを構築したい方は是非とも利用してみて下さい。

<h2>まとめ</h2>

是非とも一度、FireBaseを触ってみて頂きたく思います。
vue-click-outsideライブラリを使って、特定の要素以外をクリックした時にイベントを発火させる

### はじめに
今回は、もうそのままタイトル通りになります。vue-click-outsideライブラリを使用したら、要素以外をクリックした時にイベントを発火させることが簡単に実装できました。今後も使う場面が多そう？かなと思い、メモとして残させていただきます。

####1.vue-click-outsideライブラリをインストール
```
$ npm install vue-click-outside
```

#### 2.実際のコード（例）
```vuejs:Hoge.vue
<template>
    <div>
      <button
        v-click-outside="onOutsideClick"
        @click="onClick">
        クリック
      </button>
      {{ message }}
    </div>
</template>

<script>
// vue-click-outsideライブラリをインポートする
import ClickOutside from 'vue-click-outside'

export default {
  data() {
    return {
      message: ''
    }
  },

  methods: {
    // クリックボタンの要素外を押した時に発火する
    onOutsideClick() {
      this.message = 'クリックボタン以外を押したよ！'
    },

    // クリックボタンを押した時に発火する
    onClick () {
      this.message = 'クリックボタンを押したよ！'
    },
  },

  /*
    directivesオプションを使用して、ローカルディレクティブに登録することで、
    ライブラリの機能を使用することができる
  */
  directives: {
    ClickOutside
  }
}
</script>
```
簡単な説明になってしまいますが、コメントアウトで残しました。
ぜひ、確認をお願いします:bow_tone1:

#### 3.ブラウザで確認
<img width="435" alt="スクリーンショット 2020-05-26 23.16.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507371/579f0a36-85c9-e7ee-d7cd-6ec1481c2d3d.png">

<img width="435" alt="スクリーンショット 2020-05-26 23.15.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507371/ea944c5e-cde0-918a-86ee-2060a25e9934.png">

クリックボタンを押すと、「クリックボタンを押したよ！」というメッセージが表示されます。また、クリックボタンの要素外を押すと「クリックボタン以外を押したよ！」と表示されるので、今回のライブラリが機能していることが確認できました。
はい、以上になります。:writing_hand:

### おわりに
今回のコードのような実装はしないと思いますが、vue-click-outsideライブラリを使用したら、他でも使える場面が多くあると思います。
もしみなさまも使う機会がありましたら、ぜひ使ってみてください。また、今回の内容で誤り等ありましたら、お手数ですが教えていただけるとありがたいです。よろしくお願いいたします。


### 参考資料
[github　vue-click-outside](http://...)
Markdownでカラーコードの色見本を表示するTips

プロダクトのブランドカラーに関する情報をMarkdownでドキュメント化するときなどに、カラーコードだけではなく色見本が見れたほうが視覚的に分かりやすかったりします。

この投稿では、Markdownでカラーコードの色見本を画像で表示する方法を紹介します。

## Markdownでカラーコードの見本を表示する方法

https://placeholder.com/ というダミー画像をURLで指定して生成できるサービスを使います。


```markdown
![](https://via.placeholder.com/16/c7e7f6/FFFFFF/?text=%20) `#c7e7f6`
![](https://via.placeholder.com/16/abdbf1/FFFFFF/?text=%20) `#abdbf1`
![](https://via.placeholder.com/16/6ec1e9/FFFFFF/?text=%20) `#6ec1e9`
![](https://via.placeholder.com/16/47b1e1/FFFFFF/?text=%20) `#47b1e1`
![](https://via.placeholder.com/16/0093d6/FFFFFF/?text=%20) `#0093d6`
![](https://via.placeholder.com/16/221816/FFFFFF/?text=%20) `#221816`
```

↓ 例えばGitHubではこのように表示されます:

<img width="651" alt="test.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/0ff9d242-1883-4f89-86ff-3e97f295a58f.png">


Qiitaだと、コードで書いたカラーコードは`#c7e7f6`のように自動で色見本がつく親切設計なので、Qiitaでは不要なテクニックですが、GitHubのREADME.mdやIssue、Qiita:Team以外の社内ナレッジ共有ツール、Markdownに対応した課題管理ツールなどでご活用ください。

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです:relieved:→[Twitter@suin](https://twitter.com/suin)
関数に可変長引数を使いたい

##はじめに
可変長引数を使った関数について、備忘録を兼ねて記載しておく

##概要
Goでは、「...」を使うことで
・関数の定義に可変長引数を使うこと
・その関数にスライスを渡すこと　が可能


##可変長引数を使って任意個数の引数をとる関数を定義する
型の前に「...」を記載した（`変数名 ...型`）を引数の定義を使うことで、
任意の個数の引数をとる関数を定義することができる。

```sample.go
func sample(s string, i ...int){
      //処理（もちろん、iはスライスなので、rangeを使うことも可能）
}

func main(){
    sample("Hello", 1, 2, 3, 4)
}
```

つまり、関数定義で使う「...」には、渡ってきた可変長引数の値を 変数名x（[]T型）のスライスにまとめる効果がある。

#####制約事項
可変長引数は、「引数の末尾に１つだけ」定義することができる。
→　可変長引数は、**最後に１つだけしか書けない**

##スライスを可変長引数として渡す
変数名の後に「...」を記載した（`変数名...`）を使って、スライスを可変長引数にして渡すことが可能

```sample.go
func sample(s string, i ...int){
      //処理（もちろん、iはスライスなので、rangeを使うことも可能）
}

func main(){
    sl := []int{1, 2, 3, 4}
    sample("Hello", sl...)
}
```
つまり、引数のスライスに「...」を使うと、スライスを可変長引数に展開する効果がある

##まとめ
型の**前**に「...」を記載した（`変数名 ...型`） には、可変長引数をスライスにまとめる
変数名の**後**に「...」を記載した（`変数名...`） には、スライスを可変長引数に展開する
効果がある

##参照
- 翔泳社 スターティングGo言語　https://www.shoeisha.co.jp/book/detail/9784798142418
ProcessingでVJ素材を作るブログ　第七回 立方体を回す。( i )

今回のイメージはこれ。

<img width="622" alt="スクリーンショット 2020-05-10 22.37.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632724/8bd69c7b-b7c0-b220-34af-4874534bb9db.png">

少し時間が経ってしまった。
さて、何かとつっかかるというかふに落ちなかったところをまとめたので、
そろそろ動画を作成していきたい。
今回想定しているのは、以下の通り。
・上の画像のそれぞれ立方体がX軸方向に何回転
・少し止まる。
・逆方向に何回転
・少し止まる。
のループ（ループ自体はVJソフトでなんとかするので、とりあえず上記の動作を一通り）

もう少し具体的に書くと、
・３D空間を作成
・立方体を９つ書く
・Z軸方向に回転（rotate()で行けるかな）
・一時停止処理が必要

である。
次回ソースコードを書いていく。
[rails] Sorceryを使ってログインしているかによって、表示を変える方法


オリジナルアプリ作成中の者です。
ナビバーをログインしているかによって、表示の切り替えをしたいと考えました。
CSSフレームワークはBootstrapを使用中です。

```ruby:ナビバー作成中

      <%= link_to "Yes, we can", root_path, id: "logo", class: "navbar-brand" %>
        <ul class="navbar-nav ">
          <% if logged_in? %>
            <li class="nav-item text-center">
              <%= link_to "Log out", logout_path, class: "nav-link" %>
            </li> 
          <% else %>
            <li class="nav-item text-center">
              <%= link_to "Sign up", signup_path, class: "nav-link" %>
            </li>
            <li class="nav-item text-center">
              <%= link_to "Log in", login_path, class: "nav-link" %>
            </li>
          <% end %>   
        </ul>


```

コード汚くてすいません。
if or elseの分岐で簡単に作れますね。
ポイントとしては、ログインしている場合は、**logged_in?**を使用すること

ちなみに、以下でもいけるみたいです。

```ruby
<% if current_user %>
```

以下のAPI Summaryを参照しました。

>[Sorcery Github](https://github.com/Sorcery/sorcery)
モックAPIサーバーにPrismが良かったので使ってみた



# Prismとは
Prism (https://stoplight.io/open-source/prism/) は、OpenAPIの記述に基づいてランダムなダミーレスポンスを返してくれるAPIモックツールです。

# 何が良いのか？
### **設計通り** のレスポンスが、**自動**で生成されて返却される
これは圧倒的なアドバンテージではないでしょうか？
もし自力でAPIのモックを用意しようとする場合、フロントエンド単体で完結させようとしたら以下のようになると思います。

 - APIの仕様書を見てレスポンスのスキーマを確認し
 - スキーマに基づいてそれっぽいダミーデータをチマチマと書いて
 - アプリケーション内にレスポンスを返す用のjsonファイルを作ったりして
 - ダミーデータを使う時とそうでない時で、HTTP通信部分のソースを書き換えて
 - 実際にダミーを取ってきてみたらスキーマ通りでないものだったからダミーデータを作り直して
 - 動くようになった頃にはAPIの仕様変更が起きたからまたダミーデータを作り直して
 ....

フロントエンド開発側としてはダミーでちゃちゃっと試したいはずなのに、そうはいかなさそうです。

これに対して、APIの仕様書通りに自動でダミーデータを作ってくれるのであれば、上記の大半の作業が不要になります。


# Prism VS In-memory-web-api
私が現在開発で使っているAngularは、公式でIn-memory-web-api(https://github.com/angular/in-memory-web-api) があり、それを使っても擬似的にAPIサーバーとしてHTTP通信部分の開発をすることができます。

どちらを導入する方が望ましいか、以下の観点にて検討をしました。
 -  モックAPI/実APIの切り替え容易性
 -  APIの修正、拡張に伴うダミーデータ周りの修正容易性


##### モックAPI/実APIの切り替え容易性


・ In-memory-web-apiの場合
公式ドキュメント(https://angular.jp/tutorial/toh-pt6) でも、モックを使う場合にはモジュールを利用する部分で使うソースコードを切り替えるように書かれています。

``` 
HttpClientModule,

// The HttpClientInMemoryWebApiModule module intercepts HTTP requests
// and returns simulated server responses.
// Remove it when a real server is ready to receive requests.
HttpClientInMemoryWebApiModule.forRoot(
  InMemoryDataService, { dataEncapsulation: false }
)
```
ローカルの時はInMemoryWebApiModuleを使うようにして、修正してgitに上げる時にはここはコメントアウトして...と気にかけなければならないわけですね。

・ Prismの場合 
Prismと実APIの違いは、リクエストを送るAPIだけです。Prismは `localhost:4010` がデフォルトでモックサーバーとして動くので、フロントエンド側はAPIのrootURLを環境変数で切り替えられるようにすれば、ソースコードの修正なくコマンドの切り替えだけで済みます。


##### APIの修正、拡張に伴うダミーデータ周りの修正容易性
・ In-memory-web-apiの場合
これはあくまでHTTP通信部分を擬似的にやってくれているだけですので、ダミーデータは自分自身で書く必要があります。したがって、前述のチマチマ自分でダミーを作る作業とは大きく変わりません。
 
・ Prismの場合 
ダミーデータを修正するという必要が全くありません。なぜならOpenAPIに書いてある通りのものが自動生成されるのですから。


### 判定：Prismの圧勝


# 導入方法
ここまで大いに持ち上げてきたPrism、使うのが手間だったら結局考えものですが、Prismを動かすという部分に関して言えば非常に簡単です。

## 前提条件
 - docker / docker-composeがクライアント端末に入っていること  
環境を汚す事なく、OpenAPIを使っているどのアプリケーションにもそのまま持ってこれるため、CLIによるクライアント端末へのインストールではなくdockerコンテナを立てるのが良いと思います。
 - OpenAPI v2 or v3で書かれたAPIドキュメントがあること  
 これが無いことにはやりようがありませんが、APIのドキュメント化にもってこいですし、Prism関係なくともあるべきだと思います。


### 手順
#### 1. Prismを動かすコンテナ用にdocker-compose.yamlを作成  
中身は以下の通りです。

```
version: '3'
 
services:   
 prism:
   image: "stoplight/prism:3.3.4"
   ports:
     - "4010:4010"
   volumes:
     - "[path_to_your_opeapi.yaml]/:/tmp"
   command: "mock -h 0.0.0.0 -d /tmp/openapi.yaml"
```


####  2. コンテナの起動

> $ docker-compose up

終わりです。openapi.yamlが正しく記述できているなら、ログにもAPI一覧が表示されるかと思います。
> $ docker-compose logs

```
prism_1  | [7:11:08 AM] › [CLI] ℹ  info      GET        http://0.0.0.0:4010/hoge
prism_1  | [7:11:08 AM] › [CLI] ℹ  info      GET        http://0.0.0.0:4010/fuga
```

あとは実際にこのAPIを叩いてみると、無事にそれっぽいレスポンスが返ってくるのが確認できるでしょう。

> $ curl localhost:4010/hoge

# 終わりに
フロントエンド開発の救世主となるPrismですが、実際APIの品質向上にも有用そうです。
Prismが **OpenAPIの記述にしたがってランダムなデータ** を作るので、設計漏れだったデータがフロントエンドに返ってくることもあるためです。
数値の桁数、文字制限....などなど、手動では見逃しがちなものもランダムに生成してくれます。もちろんランダムなので、網羅的にそういった条件のチェックができるわけでは無いので頼りきりはできませんが、開発フェーズにおいては、パターンを気にしながら手動で作るよりも良いデータが生成されるのではないでしょうか？
【備忘録】GitHubにコードをpushしたい！

GitHubにコードをpushするとき、検索して一番はじめに出てきたやり方だとうまくいかず、そのあといろんなサイトをめぐり歩いてやっとpushできるようになりました。
忘れないように(、そして、忘れても参照できるように)残しておこうと思います。

::

今回は [Pythonひよっこが『 言語処理100本ノック 2020 』に挑戦【17-19】](https://qiita.com/tulip_rabbit/items/f122dc22d263b37df03b)で作成したコードをGitHubにpushしてみます。


1.該当ファイル"NLP100_17_19.ipynb"をaddする

```
git add NLP100_17_19.ipynb 
```


2.任意のコメント(わたしは ver.1.0 )を設定してコミット

```
git commit -m "ver.1.0"
```

3.

```
git remote set-url origin https://[アカウント名]@github.com/[アカウント名]/[リポジトリ名]
```

ここがはじめに見たやり方とちがうところでした。
URLの中に、 [アカウント名]@ をつけています。これを入れることでエラーが出なくなりました。

4.

```
git push origin master
```

これでpush完了です。

::

GitHubのページでちゃんと追加されていることを確認しました。

おしまい！
Route 53のレコードをタブ区切りで出力するワンライナー

必要になったので書きました。必要なものは[AWS CLI v2](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-linux.html#cliv2-linux-install)と[jq v1.6](https://stedolan.github.io/jq/)です。

```sh
aws route53 list-resource-record-sets --hosted-zone-id ZXXXXXXXXXXXX | \
  jq '.ResourceRecordSets [] | if has("ResourceRecords") then [.Name, .Type, .TTL, ([.ResourceRecords[] .Value] | join(","))] else [.Name, .Type, -1, (.AliasTarget .DNSName)] end | @tsv' -r
```

1レコードに複数の値があるもの（TXTレコードとかMXレコードとか）はカンマ区切りで横に並びます。

## 出力例
```
example.com.	MX	3600	1 aspmx.l.google.com,5 alt1.aspmx.l.google.com,5 alt2.aspmx.l.google.com,10 aspmx2.googlemail.com,10 aspmx3.googlemail.com
example.com.	NS	172800	ns-1411.awsdns-99.org.,ns-999.awsdns-99.net.,ns-9999.awsdns-99.co.uk.,ns-999.awsdns-99.com.
dev1.example.com.	A	300	203.0.113.1
dev2.example.com.	A	-1	dualstack.alb-name-999999999.ap-northeast-1.elb.amazonaws.com.
```

対応できないレコードなどありましたらご指摘ください。
Ruby カレンダー作成問題 解いてみた（解答例あり)

# はじめに

『プロを目指す人のためのRuby入門』通称チェリー本を学習後、
インプットしたものを手を動かして実践してみたいなと思ったら、作者の記事を見つけました。
[「アウトプットのネタに困ったらこれ！？Ruby初心者向けのプログラミング問題を集めてみた（全10問）」](https://blog.jnito.com/entry/2019/05/03/121235)

他の問題も解いています。
[一問目](https://qiita.com/u_nayama/items/389b229bd569fdfc1874)：カレンダー作成問題（たのしいRuby　練習問題）
[二問目](https://qiita.com/u_nayama/items/6009dcfe148e15ad9e1b)：カラオケマシン作成問題
[三問目](https://qiita.com/u_nayama/items/7be7e6c5661d93272de8)：ビンゴカード作成問題
[四問目](https://qiita.com/u_nayama/items/82edf9500c0cdfc263f7)：ボーナスドリンク問題
[五問目](https://qiita.com/u_nayama/items/53c2a4b58840dbccaaf9)：電話帳作成問題

ここに載っている一問目
>「たのしいRuby」に載っている、オーソドックスなカレンダー作成問題です。
>DateクラスのAPIさえわかれば、あとは基礎的なプログラミング知識だけでコードが書けると思います。
>>Date クラスを使って、今月の１日と月末の日付と曜日を求め、次のような形式でカレンダーを表示させてください

こんな感じにするのが目標

```
     May 2020      
Su Mo Tu We Th Fr Sa
                1  2
 3  4  5  6  7  8  9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 
```

調べたところ色々な回答を見つけることができましたが、自分の回答はこんな感じになりました。

```ruby
require 'date'

  def monthly_calendar(this_day = Date.today) #実行日の日付
    # 実行月の1日を抜きだす
    first_day = Date.new(this_day.year,this_day.month,1)
    # 月の最初の週の日曜日(カレンダー上で左上)に該当する日を抜き出す
    start_day = first_day - first_day.strftime('%w').to_i

    # month year
    puts this_day.strftime('%B %Y').center(21)
    # weekdays
    puts "\sSu\sMo\sTu\sWe\sTh\sFr\sSa"
    # days
    while start_day.month <= first_day.month

      if start_day.month != first_day.month
        print "\s\s\s"
      elsif start_day.strftime('%u') == "6"
        print "\s" + start_day.strftime('%e') + "\n"
      else
        print "\s" + start_day.strftime('%e')
      end

      start_day += 1
    end

  end

puts monthly_calendar
```

引数に年と月だけ渡してみてもその月のカレンダーを表示することができました。

```ruby
puts monthly_calendar(Date.new(1995,8)) #任意の月で指定もできる
```
```
     August 1995     
 Su Mo Tu We Th Fr Sa
        1  2  3  4  5
  6  7  8  9 10 11 12
 13 14 15 16 17 18 19
 20 21 22 23 24 25 26
 27 28 29 30 31
```
< 1995-08-01 >という日付で値が渡されるようです。


---
何か改善点等あればお教えください。
CSS hover でアイコンが変わるボタン

ボタンのホバーエフェクトを試行錯誤していたところ、なかなかいい表現かもと思ったので、書きました。

アイコン付きのボタンをホバーすると、アイコンが変わる、というものです。

## デモの様子
![hover_effected_btn.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54055/ded25519-7cc5-0ddc-f696-32e0538c0954.gif)

[実際のデモはこちら](https://codepen.io/sezemiadmin/full/JjYVQwR)

## 使ったアイコン

- [Material Icons](https://material.io/resources/icons/)

CodePen 用に CDN 経由で使えるものを選択しただけなので、もちろん他でも :ok: です。

## ポイント

- ボタン要素の `::after` にアイコンを指定

```css
a.button-with-icons::after {
  font-family: 'Material Icons';
  content: '\e038';
  /* 中略 */
}
```

- ボタン要素の `:hover` の `::after` にもアイコンを指定

```css
a.button-with-icons:hover::after {
  font-family: 'Material Icons';
  content: '\e87d';
}
```

デモで書いたコードは [こちら](https://codepen.io/sezemiadmin/pen/JjYVQwR) です。
「NDI HX Camera」を使ってiPhoneをMacのWebカメラにする


# 3行で
1. iPhoneに「NDI HX Camera」アプリをインストール
* MacにNDI Virtual Inputをインストール
* ※Optionalかつ自己責任※ ZoomやSkype for Businessのcodesignを外す

（EpocCamが動かずカッとなってやったのだが、3.をやったらEpocCamも使えるようになった。EpocCamは悪くなかった。）

# 手順
## iPhoneで「NDI HX Camera」アプリを動かす
### 1. アプリのインストール
これです　→　https://apps.apple.com/jp/app/ndi-hx-camera/id1477266080
元価格は知りませんが有料アプリだそうで、2020年5月末まで無料とのことです。

### 2.起動
画面下部の中央に「NDI」と書かれたボタンがあります。これが青くなっていればOKです。
<img width="500" alt="IMG_3113141CB384-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60348/bd6f00e5-12dd-77e8-7ca3-8d1288e9c227.jpeg">


### 3. Macと接続
iPhoneをLightningケーブルで直接つなぐか、同じローカルネットワークに接続します。
私の環境では、有線・無線どちらも利用可能でした。

## MacでNDI Virtual Inputをセットアップ
### 1. NDI Toolsのダウンロード
公式サイトのダウンロードページ（[https://ndi.tv/tools/](https://ndi.tv/tools/)）よりNDI Tools for Macをダウンロードして展開します。

少し下にスクロールしたこのボタン↓

![スクリーンショット 2020-05-26 22.40.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60348/35db2ac8-d55d-a073-77d7-e3db0000434c.png)

からのこれです↓
![スクリーンショット 2020-05-26 22.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60348/1e469ebb-db42-eac0-44c4-57f2fea13678.png)

名前やメールアドレス等の入力を求められたあと、ダウンロード可能になります。
NDI DriverとNDI Toolsの2つがダウンロード可能になりますが、NDI Toolsのみで大丈夫です。

「NewTekNDIToolsForMacOS.dmg」というファイルが取得できますので展開します。

### 2. NDI Virtual Inputのインストール

NewTekNDIToolsForMacOS.dmgの中には複数の.pkgファイルが入っています。
今回必要なのはNewTekNDIVirtualInput.pkgのみです。NewTekNDIVirtualInput.pkgを開いてNDI Virtual Inputをインストールします。
インストールの最後に再起動を求められます。

### 3. NDI Virtual Inputのセットアップ
Mac再起動後、 アプリケーションフォルダにある「NDI Virtual Input」を開きます。
メニューバーに「NDI」というアイコンが表示されます。ここをクリックすると、利用可能なカメラのリストが現れますので、「NDI HX Camera」を動かしているiPhoneを選択します。

## Webカメラとして利用する
この段階で仮想カメラデバイスとしては有効になっており、「NDI Video」という名前のカメラを選択すればiPhoneをWebカメラとして利用できます。

ただし、私の環境（macOS Catalina 10.15.4）だとこのままではZoom(5.0.2)やSkype for Business(16.28.175)で使えませんでした。
セキュリティ上の理由により、仮想カメラソフトウェアの利用が制限されているようです。
（2020/09/14追記：その後、Zoomでは下記操作なしに仮想カメラを利用できるようになりました。バージョン5.2.3で確認しています）

ここでは、セキュリティ条件を緩和してとにかくカメラを動作させる方法を紹介します。使用される場合はみなさんの自己責任のもとお願いいたします。

XcodeのCommand Line Toolsをインストールしていない場合はインストールします：

```bash
$ xcode-select --install
```

仮想カメラを利用したいアプリのcodesignをはずします。以下はZoomの例です：

```bash
$ codesign --remove-signature /Applications/zoom.us.app/
```

Skype for Businessで上記コマンドを実行するにはsudoが必要でした。

# 以上
「ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する」チュートリアルのハマりポイント

下記を進めるに当たって詰まったこと

[ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する](https://blog.cloud-acct.com/posts/blog-contentful-api)


# １、ESLintのエラー
記事の通りindex.vueなどを編集し、最初にyarn devしてlocalhostを立ち上げると怒られた
原因はESLintと呼ばれる整形ツールのルール違反だった。
スペースの存在、空白行などかなり厳しいが、エラー文に該当行と内容が書かれているので一つずつチェックして潰していけばエラーは解消された。

# ２、v-imgが使えない
記事内にある、アイキャッチ画像表示のためのv-imgタグが表示されなかった。
しょうがないのでimgタグで代用。

※追記
v-imgはUIフレームワークVuetifyのコンポーネントでした。
https://vuetifyjs.com/ja/components/images/

Nuxtセットアップ時にVuetifyを選択しなかったため表示されなかった模様。

# 3、netlifyにデプロイするとエラー
記事内ではGitbucketですが、Githubを利用してNetlifyにデプロイすると404やnotfoundエラー。
### buildコマンド&distが設定されているか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274063/26deae45-a93d-9259-b123-082413ee866c.png)

上記のように、buildコマンドにyarn generateが設定されているか確認したあと、コマンドを叩く。
オブジェクト指向はゲームづくりに向かない その１

**「オブジェクト指向はゲームづくりに向かない」**
という話を、何回かに分けて書きたいと思います。

多くのエンジニアは、オブジェクト指向プログラミングを学んで、現場で実践していると思います。
しかし、オブジェクト指向でゲームを設計していると、必ず突き当たる問題があります。

この連載では、その問題点を紹介し、解決策を提示したいと思います。

第一回は、「向かない点 その１ クラス継承には柔軟性がない」です。


## 向かない点 その１ クラス継承には柔軟性がない

オブジェクト指向言語には、継承という仕組みがあります。
コードを上手に再利用するために存在するこの機能。
これでゲームを設計すると、どんな感じになるでしょうか？

例として、見下ろし視点のアクションゲームを作っている、と想像してください。

ゲーム開発の場合、最初からすべての仕様が決まっていることはまずありません。
作っては試し、機能を追加して、また試す・・・を繰り返して、より面白いゲームとなる様に作っていくのが、通常です。

### 開発初期

まず開発の初期段階では、プレイヤーと敵がいて、動かして攻撃ができる、程度を作ることになるでしょう。
この時点でのクラス図は、こんな感じでしょうか。

![inheritance1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227302/681d5ef8-bcc9-9c6a-61f4-1eb383d6057e.png)

ベースクラスとして `GameObject` を作り、位置（とそれに関わるロジック）を持たせる様にします。
`GameObject`の子クラスとして、プレイヤーを示す`Player`と、敵を示す`Enemy`を作ります。
それぞれ、入力制御と、AIを持ちます。

これで、単純な敵とプレイヤーの動きが実装でき、戦えるようになりました。

### １ヶ月後

さて、開発が始まって１ヶ月が経ちました。ここで企画から「空を飛ぶ敵を作りたい」という要望が来たとします。
空を飛ぶ敵の要件は

- 障害物の上を通れる
- プレイヤーの物理攻撃は当たらない
- アイテムをドロップする際は、周囲の通れる場所にドロップする。

だったとします。
ここでプログラマーは考えます。ほぼ`Enemy`と同じ動きだけど、一部特殊な動きになる。`Enemy`を継承した`FlyingEnemy`クラスを作ろう、と。
そしてクラス図はこうなります。

![inheritance2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227302/e808b7e1-5bb5-5e68-ea98-8a8d51a5951a.png)

（この時点で、ある程度熟練したプログラマなら、いやいやいや・・これはないでしょって思うかも知れませんが、わかりやすい例として提示してますので！）

`FlyingEnemy`に、空を飛ぶ敵特有の機能を実装しました。
これで、空を飛ぶ敵の完成です。めでたしめでたし。

### ２ヶ月後

さらに１ヶ月が経過しました。
するとまた、企画かこんな要望が来ました。
「羽のアイテムを使うとプレイヤーは空を飛べるようにしたい」
要件としては、

- プレイヤーは羽のアイテムを使うと空を飛ぶことができる
- 空を飛んでいる間、障害物の上を通れる
- 敵の物理攻撃は当たらない

さて、どうしましょう。
（アイテムを使う、という機能はもう実装してある事とします）

素直に実装すると、

![inheritance3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227302/52dcd6ed-563c-8ce6-3369-41678df96e3b.png)

こうでしょうか。
`Player`クラスに、「飛んでいる時は物理攻撃が当たらない」という機能を実装しました。
同じ機能が`FlyingEnemy`と`Player`２つに存在することになってしまいました。
この機能に修正が入った場合、２つの箇所に同じ修正を入れなければなりません。
新しく入ったプログラマーが、このことを知らずに、`FlyingEnemy`だけを修正してしまう、なんてことが起こってしまう恐れがあります。
あまり良くないですね。

では、共通部分はベースクラスに持っていくのが良いでしょうか？

![inheritance4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227302/d1fe4ce6-e03e-07c0-5625-2eb60d585eec.png)

一応、クラスの継承の機能をうまく使っている様にはなっています。
しかし、既に`FlyingEnemy`で動いていたコードを、ベースクラスに持っていくことで、エンバグのリスクが大きくなります。
（今回の例は単純化しているので、簡単そうに見えますが、実際のソースはもっと複雑に入り組んでいるものです）

そして、「飛ぶ」ということに関連する機能が、`GameObject`と`FlyingEnemy`に分散してしまっていることも、わかりにくいですね。

どっちのやり方も微妙です。スッキリしませんね。
とはいえ、今からクラス設計を１から見直すというのは、デバッグも１からやり直すことになるので、不可能です。

### クラス継承の問題点

このように、クラス継承による設計には「途中から継承構造を変えるのが難しい」という問題点があります。
もし、最初からすべての仕様が決まっているのなら、そのとおりの素直な継承構造を作れば、大丈夫でしょう。
しかし、そんなことはゲーム開発ではあり得ません。

この問題を解決するには、どうしたら良いのでしょうか？
解決策は少し後に取っておいて、次回は、「向かない点その２ データの依存関係が見えない」を書いてみたいと思います。


参考記事：
http://whats-in-a-game.com/implementation-inheritance-is-evil/
https://codeburst.io/inheritance-is-evil-stop-using-it-6c4f1caf5117