OmniAICreator/Qiita-1.07M huggingface dataset:
Goの環境設定 in AWS Cloud9

# 環境
- AWS Cloud9(シンガポールリージョンのEC2上で動作）
- Amazon Linux2
- bash

# やること
1. goenvで任意のバージョンのgoをインストール
2. GOPATHの設定
3. 最新安定版のgo1.11.2(2018/11/21現在 https://golang.org/dl/ ）をインストール
4. depのインストール

# 手順
通常のLinux環境での手順と変わらない
## まずはLinux環境のアップデートを行う
Amazon Linux2はRHEL系なので`yum`

```shell

$ sudo yum -y update
```
## goenvの設定
### goenvとは
goのバージョン管理ツールで、任意のバージョンのgoを環境にインストールし、使い分けることができるようになる
たとえば、プロジェクトごとに異なるバージョンのgoを使用する際にとても便利
goenvと同様に、pythonにはpyenv, rubyにはrbenvがある
### goenvのインストール
goenvは複数ある（作っている人が違うものが複数ある）が、今回は下記のリポジトリからインストールする
[syndbg/goenv](https://github.com/syndbg/goenv)

```shell

$ git clone https://github.com/syndbg/goenv.git ~/.goenv
```

### パスを通す

```shell

# ~/.bashrcに追記する
export GOENV_ROOT=$HOME/.goenv
export PATH=$GOENV_ROOT/bin:$PATH
eval "$(goenv init -)"
```
### 設定を読み込ませる
```shell

$ source ~/.bashrc
```

### テスト
```shell

$ goenv -v
goenv 1.23.0
```
バージョンが表示されればOK

## goのインストール
インストールできるバージョンリストを確認する

```shell

$ goenv install -l
Available versions:
  1.2.2
  1.3.0
  1.3.1
  ...
  1.11.2
```

### go1.11.2 をインストール
```shell

$ goenv install 1.11.2
```

### 使用できるgoのバージョンを確認
Amazon Linuxにはもともとgoがインストールされているのでプリインストールのgoと1.11.2の両方が使えるようになっているはず

```shell

$ goenv versions
* system (set by /home/ec2-user/.goenv/version)
  1.11.2
```

### 使用するバージョンを1.11.2にする
```shell

$ goenv global 1.11.2
$ goenv rehash
```

### テスト
goのバージョンを確認してgo1.11.2になっていればOK

```shell

$ go version
go1.11.2 linux/amd64
```

## GOPATHの設定
### GOPATHを`~/.bashrc`にて設定する
```shell

# ~/.bashrcに追記する
export GOPATH=$HOME/environment/go
PATH=$PATH:$GOPATH/bin
```

### ディレクトリの作成
```shell

$ mkdir -p $GOPATH/src/
$ cd $GOPATH/src/
# これでディレクトリに移動できればOK!
```

## depのインストール
depとは、go公式のパッケージマネジャー
### インストール
```shell

$ go get -u github.com/golang/dep/cmd/dep
```

### テスト
depのヘルプが表示されればOK!

```shell
$ dep help
Dep is a tool for managing dependencies for Go projects

Usage: "dep [command]"

Commands:

  init     Set up a new Go project, or migrate an existing one
  status   Report the status of the project's dependencies
  ensure   Ensure a dependency is safely vendored in the project
  version  Show the dep version information
  check    Check if imports, Gopkg.toml, and Gopkg.lock are in sync

Examples:
  dep init                               set up a new project
  dep ensure                             install the project's dependencies
  dep ensure -update                     update the locked versions of all dependencies
  dep ensure -add github.com/pkg/errors  add a dependency to the project

Use "dep help [command]" for more information about a command.
```

#　できるようになったこと
1. `$GOPATH/src`以下でgitのプロジェクトを作成してgoアプリケーションの開発ができます
2. depでgoのパッケージ管理ができるようになります
Railsチュートリアル [第7章〜第8章] ユーザー登録でRouting Errorになる

[Railsチュートリアル 5.1（第4版）](https://railstutorial.jp/?version=5.1)でユーザー登録しようとするとRouting Errorになる。

# 事象
No route matches [POST] "/signup"
![FireShot Capture 9 - Action Controller_ Exception caught_ - https___c4f654647d084bcebf4c1035ed4.png](https://qiita-image-store.s3.amazonaws.com/0/277359/14e6b11a-a05e-2bd3-4aad-c4bbb210781b.png)

# 原因
routesファイルに`post '/signup',  to: 'users#create'`がなかったため。
第8章のリスト8.2の記載どおりに修正してしまった。

リスト 7.26: ユーザー登録のルーティングにPOSTリクエストを追加する

```ruby:config/routes.rb
Rails.application.routes.draw do
  root 'static_pages#home'
  get  '/help',    to: 'static_pages#help'
  get  '/about',   to: 'static_pages#about'
  get  '/contact', to: 'static_pages#contact'
  get  '/signup',  to: 'users#new'
  post '/signup',  to: 'users#create'
  resources :users
end
```

リスト 8.2: リソースを追加して標準的なRESTfulアクションをgetできるようにする

```ruby:config/routes.rb
Rails.application.routes.draw do
  root   'static_pages#home'
  get    '/help',    to: 'static_pages#help'
  get    '/about',   to: 'static_pages#about'
  get    '/contact', to: 'static_pages#contact'
  get    '/signup',  to: 'users#new'
  get    '/login',   to: 'sessions#new'
  post   '/login',   to: 'sessions#create'
  delete '/logout',  to: 'sessions#destroy'
  resources :users
end
```

# 対応
下記のとおりに修正した。

```ruby:config/routes.rb
Rails.application.routes.draw do
  root   'static_pages#home'
  get    '/help',    to: 'static_pages#help'
  get    '/about',   to: 'static_pages#about'
  get    '/contact', to: 'static_pages#contact'
  get    '/signup',  to: 'users#new'
  post   '/signup',  to: 'users#create'
  get    '/login',   to: 'sessions#new'
  post   '/login',   to: 'sessions#create'
  delete '/logout',  to: 'sessions#destroy'
  resources :users
end
```
爆速ショートカット集

[前のアカウント](https://qiita.com/KEITAsuzuki33)が二段階認証がどーのこーのでログインできなくなってしまったので、新しいアカウントを作成しました。
はじめの投稿はパソコンの爆速？ショートカットキーをメモ書き程度に載せていきたいと思います！
macベースでのショートカットをメインで書いていきますが、windowsの方にもわかるように善処します！

##ブラウザ関連

|ショートカット|機能|
|:----------------|:------------------|
| command(winはcontrol) + t| 新しいタブを開く |
| command(control) + r|画面リロード | 
| command(control) + w|今いるタブを削除 |
| command(control) + shift + t| 消したタブを復活 | 
|command(control) + l|url入力欄を選択| 
|command(control) + d|ブックマーク登録|
|command(control) + urlクリック|新しいタブでそのページを開く| 
|control + tab|タブを右に進める|
|control + tab + shift|タブを左に進める| 
|command(control) + f|ページ内検索|

こんな感じですかね。
消したタブを復活させるcommand(control) + shift + tは個人的にすごく役立つと思ってるので是非使ってください。
あとリファレンスとかを読んでる時にはcommand(control) + fが非常に便利です。

###ブラウザとは
ブラウザってなんか来たことあるけど説明はできない人向けに解説します。
すっげー噛み砕いて説明すると、ブラウザとはwebページを画面に表示させるためのツールです。
エンジニア職とかでない限りこんな感じの認識でいいと思います。
主に使われているブラウザは
chrome, safari, firefox, Microsoft Edge, Internet Exploreです
![blowser.png](https://qiita-image-store.s3.amazonaws.com/0/318540/15baf5c6-f903-4979-e4c7-3819348b2d7c.png)
こんな感じのアイコンです。

##いろんなソフトウェアに共通しているコマンド
ここではoffice製品やエディタ等の色々なソフトウェアに共通しているコマンドを紹介していきます。
まあ上で紹介したやつも結構共通して使われてますけどね。

|ショートカット|機能|
|:----------------|:------------------|
|command(control) + s|新規保存 or 上書き保存|
|command(control) + a|全選択|
|command(control) + c|コピー|
|command(control) + x|切り取り|
|command(control) + v|貼り付け|
|command(control) + z|戻る|
|command(control) + y or command(control) + shift + z|進む|
|command(control) + p|印刷プレビュー表示|
|command(control) + n|新規作成|
|command(control) + tab| アプリ切り替え|
|command(control) + ,(コンマ)|環境設定を開く|

こんな感じですかね。ここは結構聞いたことのあるショートカットが多いと思います。

##終わりに
ショートカットを覚えるのは大変と思うかもしれませんが、使っていく内に覚えてしまいます。
なのではじめは慣れないかもしれませんが、ちょっとずつ覚えていって業務の効率化を計りましょう！
Linuxコマンド自分用メモ

###ソフトウェアのアップデート
```
sudo apt update
sudo apt upgrade
```
apt-getとかaptitudeは使うべきでないっぽい。
https://debian-handbook.info/browse/ja-JP/stable/sect.apt-get.html

###ZIPファイルに圧縮・展開
```
zip -ry9 hoge.zip hoge
unzip hoge.zip
```
r:再帰的に圧縮
y:シンボリックリンクを辿らない
9:0-9で圧縮率
tarコマンドは面倒。
aliasでdotar、untarとして登録するか。
コンピュータの時計のずれを確認する

こんにちは。
コンピュータの時計（現在時刻）がどれだけずれているのか簡単に確認してみました[^1]。

```console
$ env LANG=en_US.UTF-8 date -u "+%a, %d %b %G %T %Z"; curl -s --head http://www.google.co.jp | grep '^Date' | cut -b 7-
Wed, 21 Nov 2018 14:51:38 UTC
Wed, 21 Nov 2018 14:51:38 GMT
```

* また、情報通信研究機構 (NICT) から時刻を取得すると[^2] [^3]、

```
$ utime="$(wget -q https://ntp-a1.nict.go.jp/cgi-bin/jst -O - | sed -n 4p | cut -d. -f1)"
$ if [ "$(uname)" = "Darwin" ]; then
>   env LANG=en_US.UTF-8 date -u -r "$utime" "+%a, %d %b %G %T %Z"
> elif [ "$(expr substr $(uname -s) 1 5)" = "Linux" ]; then
>   env LANG=en_US.UTF-8 date -u -d @"$utime" "+%a, %d %b %G %T %Z"
> fi
Wed, 21 Nov 2018 14:51:38 UTC
```

[^1]: 「[日本標準時のサイト（情報通信研究機構）](http://www.nict.go.jp/JST/JST5.html)」の表示を見に行くと、よりしっかり確認ができます。
[^2]: 参考：「[ntpを使わずに時刻を合わせるワンライナー（Proxy環境下でも安心）](https://qiita.com/pankona/items/258fed78c168918a8ad2)」
[^3]: この方法は終了となりました：「[http/httpsを利用した時刻配信の終了に向けて](https://jjy.nict.go.jp/httphttps-index.html)」（情報通信研究機構)）
docker-composeのclientのversionが古いと言われる

# 環境

* Windows10 Pro 64bit
* docker for windows
* Linuxコンテナモード(使われるコンテナイメージもLinuxコンテナだったはず)

# 問題

`docker-compose up`した時に下記のエラーが発生しました。
![キャプチャx.PNG](https://qiita-image-store.s3.amazonaws.com/0/145628/66316df0-1171-055f-c01a-8fd9df400ce8.png)

エラー文だけ
> ERROR: client version 1.22 is too old. Minimum supported API version is 1.24, please upgrade your client to a newer version

直訳すれば
> clientのversion1.22は古すぎます。
> 現在サポートされている最も古いバージョンは1.24です。
> clientをより新しいものにupgradeしてください。

てな感じだと思いますが、**少なくとも現時点(2018/11/21)時点でのdocker-composeの最新バージョンは1.23.1の模様です。**
(docker for windowsのinstall時にcomposeも入りますが、手動でupdateかけたら1.23.1になりました)

![キャプチャa.PNG](https://qiita-image-store.s3.amazonaws.com/0/145628/83276d42-4cb4-3276-4161-e260c26e5483.png)

# workAround

### issueやstackOverFlowで情報収集
* [ERROR: client version 1.22 is too old. Minimum supported API version is 1.24, please upgrade your client to a newer version](https://github.com/laradock/laradock/issues/1059)
* [How to update docker-compose version on windows 10](https://stackoverflow.com/questions/51535490/how-to-update-docker-compose-version-on-windows-10)
* [How to update docker-compose on Docker for Windows?](https://stackoverflow.com/questions/49554462/how-to-update-docker-compose-on-docker-for-windows)

とりあえず、`docker-compose.yml`の`version`を変更したら回避できた、という意見が多いようです。
特に「`2→2.1`への変更」がよく報告されています。

### とりあえずdocker-compose.ymlのversionを`2→2.1`に変えてみる

![キャプチャy.PNG](https://qiita-image-store.s3.amazonaws.com/0/145628/3cc9b048-6256-03a5-3810-a5c337ba3a3e.png)

これで無事に`docker-compose up`できました。

# 所感

* 原因がわかんないのでもう少し調べてみたいです。
* 最初のエラーで言われる`client`は`docker engine`そのものではなく、`docker-compose`だと解釈しました。
* `compose fileのversion`と`docker-composeクライアントのバージョン`の関係？
TensorFlowの定数を使って1 + 1の計算をやってみた

## 計算に必要なもの
### 定数
はじめに定義したら値の変更ができない
**tf.constant**で定義する

### セッション
実際の計算結果を得るためには**tf.Session**クラスのインスタンスが必要
生成したセッションのrunメソッドに計算したいノードを指定して実行する

## 実際の計算例
実際にTensorFlowを使い、簡単な計算

x = 1
y = 1
z = x + y
z = 2(出力)

を実行してみます

####1. Tensorflowライブラリのインポート
~~~Python
import tensorflow as tf
~~~

####2. 定数の定義
~~~Python
x = constant(1, name='x')
y = constant(1, name='y')
z = x + y 
~~~

####3. 計算を実行
~~~Python
with tf.Session() as sess:
      print(sess.run(z))
~~~

#### 出力結果
~~~Python
2
~~~

1 + 1が計算されていることを確認
Flutterを始める前に知ってほしい、Flutterの価値観とFlutterが大切にしているもの

この記事は[全部俺 Advent Calendar 2018](https://adventar.org/calendars/3702)の11日目の記事です。
[Flutter Values](https://github.com/flutter/flutter/wiki/Values)の翻訳記事です。

# Flutter's core values
## モバイル開発で一番いいやり方の構築(Build the best way to develop for mobile.)

> This tells us what we are creating. It helps narrow our focus.

何を作っているのかを開発者に示し、焦点を絞ることを手助けする。

> The best way to develop for mobile is a productive way of developing.

モバイル開発で一番いいやり方は、開発における生産的なやり方だ。

> The best way to develop for mobile creates beautiful applications.

モバイル開発で一番いいやり方は、美しいアプリケーションを作成できる。

> The best way to develop for mobile creates fast applications.

モバイル開発で一番いいやり方は、実行速度の速いアプリケーションを作成できる。

> The best way to develop for mobile enables developers to create applications fast.

モバイル開発で一番いいやり方は、アプリケーション開発速度を高めることができる。

> The best way to develop for mobile is extensible, so that we are not a barrier to developers.

モバイル開発で一番いいやり方は、拡張性があるので、開発者の障壁になることはない。


つまり、一番イケてるモバイル開発方法（Flutter）は、以下の価値観を大切にします！ということです。最高ですね。

- 本当に欲しい機能のみの開発(焦点を絞った開発)
- 見た目がイケてるアプリケーションの作成
- 実行速度が速いアプリケーションの作成
- 実装速度が速いアプリケーションの作成
- 拡張性

## まずユーザーを大切にする。それ以外のことは全部それからついてくる。(Focus on the user and all else will follow.)

Flutterにとってのユーザーは開発者で、開発者のユーザーはFlutterのエンドユーザーになります。
Flutterは、Flutterアプリケーション開発者のユーザー = エンドユーザーを最も大切にし、Flutterアプリケーション開発者をその次に大切にします。

エンドユーザーを大切にするために、以下のものを大切にします。

- 利用しやすさ
- 高いパフォーマンス
- 安定性
- ネイティブ再現度
- ユーザープラットフォーム同士の互換性
- ローエンド端末のサポート

Flutterアプリケーション開発者を大切にするために、以下のものを大切にします。

- 楽しさ
- 迅速なイテレーションサイクルによる生産的な開発体験
- 使いやすくてシンプルで信頼性が高い、どうやって使うのか予想がつくAPIの提供
- 基盤プラットフォームへのフルアクセス権限の提供

誰であろうと、ユーザーを尊敬し、大切にします。

## まとめと所感
Flutterが開発者体験を優先しているのはFlutterに触っていてひしひしと感じているところなので、それがにじみ出ている価値観だったのは納得です。
ただ、（当たり前のことですが、）明確にエンドユーザーを優先すると記載されていることには少し驚きました。
つまり、エンドユーザーにとっての利益と開発者にとっての利益が真正面からぶつかって折り合いがつかなかった場合、Flutterコミュニティはエンドユーザーの利益を優先するということでもあります。
Flutterが開発者の体験を向上させるのも、全てはエンドユーザーのためなのかもしれません。
[FlutterリポジトリのStyle guide](https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo)にも、Flutterの思想がにじみ出ているので、興味のある方は一読をおすすめします。
テストファーストや単一責任の原則などのプログラミング一般原則から、迅速なドキュメンテーションやドキュメントに何を含めるべきかなど、Flutter開発者以外が見ても役に立つ思想が網羅的に記載されていると思います。
CentOS7 + Python3.6 + Djangoの構築

#概要

VM上のCentOS7にpython3とDjangoを入れようとした際に、参考にしたものをまとめてみる。
rootで作業。　
それ以外で作業する場合は、sudoを追加。

#Python3をインストール

```
# これはできないかもしれない。できなかったらスルー
yum install -y https://centos7.iuscommunity.org/ius-release.rpm

yum install -y python36u python36u-libs python36u-devel python36u-pip
```

ここでyum installでエラーになったので、updateしてみる

```
yum update
```
やはりここでもエラーになった。

調べてみると、yumのデータベースが壊れている可能性があるので、以下を実行。

```
yum clean
```

これでinstallできるようになったので、再度実行する。

```
yum install -y https://centos7.iuscommunity.org/ius-release.rpm

yum install -y python36u python36u-libs python36u-devel python36u-pip
```


pythonを確認する。
ちなみにcenOS7 にはpython2が入っているので、python3の確認方法はこう。

```
$python3.6

Python 3.6.4 (default, Dec 19 2017, 14:48:12)

[GCC 4.8.5 20150623 (Red Hat 4.8.5-16)] on linux

Type "help", "copyright", "credits" or "license" for more information.

    >>>


# ちなみにpython2だと

$python

Python 2.7.5 (default, Aug  4 2017, 00:39:18)

[GCC 4.8.5 20150623 (Red Hat 4.8.5-16)] on linux2

Type "help", "copyright", "credits" or "license" for more information.

>>>
```

python2系は使わないし、常にpython3.6で起動するのが面倒なので、通常使うpythonのバージョンを2系から3.6に切り替える。


```
ln -s /bin/python3.6 /bin/python3
unlink /bin/python
ln -s /bin/python3 /bin/python
ln -s /bin/pip3.6 /bin/pip
```

切り替えができたか確認する。

```
$python

Python 3.6.4 (default, Dec 19 2017, 14:48:12)

[GCC 4.8.5 20150623 (Red Hat 4.8.5-16)] on linux

Type "help", "copyright", "credits" or "license" for more information.

>>>
```

無事に切り替わった。

#Djangoのインストール

```
pip　install　django

#Djangoが入ったかどうかを確認する(django + tabキーでdjango-adminが出れば問題なし)
django-admin　startproject sample
```

これで完了。

あとはDockerなり、Daemonで起動すれば終わり。


#参考にしたサイト

CentOS 7 + python3 + Djangoの本番環境を動かしてみる
https://qiita.com/tinaba/items/01bc72c100f97438a36e

№2846 yum rpm エラーで出来ません
https://centossrv.com/bbshtml/webpatio/2846.shtml

Python3系に置き換える
http://gamsj2015.hatenablog.com/entry/2018/02/18/110419
「DevOpsとそのちょっと外側とNoOps（仮）」というタイトルでLTしてきた話

「[NoOps Meetup Tokyo #3](https://noops.connpass.com/event/109683/)」というミートアップで「[DevOpsとそのちょっと外側とNoOps（仮）](https://speakerdeck.com/amemolee/devopstotiyotutowai-ce-tonoops)」をさせていただいたので、せっかくなのでせっかくなので、その内容を起こして置きたいと思います。

# スライド
[![DevOpsとそのちょっと外側とNoOps（仮）](https://speakerd.s3.amazonaws.com/presentations/7efd6148a98a4159ba8bdfd9545013c9/slide_0.jpg)](https://speakerdeck.com/amemolee/devopstotiyotutowai-ce-tonoops)


# 内容書き起こし
* 本日のテーマ
@amemoleeでgithubとかskypeとか登録している。今はアイコンのカエルがロゴになっている[@enegaeru](https://www.enegaeru.com/)(エネがえる)というサービスに従事していてそのサービスを背景にお話する。

* 今日の話すところ
DevOpsのちょっと外側というのは、DevOps以外の技術外の部分、このあたり。具体的には次のスライドにあるとおり。

* ローンチイベントまででひとサイクル
プレスリリースがテーマ。弊社サービスも、この思想をイケてる思想として、乗っかっている。作りたいものもぶれないし、お客様がホントに喜ぶ部分を狙った開発ができる。

* そして集客につながる
実際さまざまな企業さんが、きっちりとPR活動までを行われており、それを追従すべきというのも思想としてある。開発した人がローンチからPRまでを”リード”することが弊チームではデファクトとなっている。開発した人がPRまで行うのが自然な流れとなっている。

* しかしひとは限られている
私達の組織では6人体制で事業と開発を回しています。お客様数で表現すると、100社強のお客様がお使いのサービス。PRは専門ではないため、多少ネガティブにはなる。

* とはいえPRも強く意識している
技術外の苦手な部分もやる必要があるので、時間や脳内シェアを開けている。意識をしたDevOpsバランスとなっている。

* まずは技術を使ったDevOps
技術的時間的、心理的な障壁を減らし、苦手なPRにも注力できるように進めた。ソース管理はもちろんgitとイシュー、ビルドやデプロイは codeベースでやっている、無停止も意識したいのでサーバーレスなしくみに乗っかっている、blue-greenデプロイはできている。　

* そして少しづつNoOpsを入れて時間ができた
少し時間ができ、PRのための時間に割り振ることができた。

* さらに考えて、よい形を見つけた
チーム全体のイベントにのっけるという策。営業メンバ手動のイベントに、サイトリニューアルと、DevOps案件をすべて合わせてみた。

* そうすると以外と結果がでた。
チームを巻き込んでPRが行えた。アウトプットできた。PRが無事に実現できた。これだなと感じた。

* DevOps以外の外側の時間が増えた
DevOps以外の部分を効率化することで、DevOps以外の時間が更に持てた。私にとってはNoOpsになった。

* ということで結論とするならば
勢いと巻き込みに成功すると、きれいなPRまでが行えた。なので日時と事前の雰囲気作りがとても大事だと感じた。
さらには、DevOps以外の外側の部分は、もっともっと突き詰めていくのがよいのではないかと思った。

このような機会を頂き大変ありがとうございました。ビアバッシュが楽しかったです。

以上
Vue.js UIフレームワークに学ぶコンポーネントの作り方

※非デザイナ出身のエンジニア向けです。

#UI フレームワークの数々
webデザイナ不在のプロジェクトではエンジニアの皆様はbootstrapのようなCSSフレームワークを使って構築することが多いとおもいます。

vue.js向けにも
bootstrapをもとにした[bootstrap-vue](https://bootstrap-vue.js.org)や
bulmaをもとにした[beefy](https://buefy.github.io)などがあります

マテリアルデザインに準拠し、日本語ローカライズも進んでいる[Vuetify](https://vuetifyjs.com/ja/)
そしてフルスクラッチで多機能な[element-ui](https://element.eleme.io/#/en-US)

いずれも使用頻度の高い入力フォームやテーブル、モーダルダイヤログなどを
コンポーネント単位で簡単に実装できます。


#elementのソースを見る
必要な部品単位で利用することができ、
CSSデザインのカスタマイズも容易なelement-uiを元に設計を見てみましょう

よく使われるボタンコンポーネントの例です。
[element-ui button](https://element.eleme.io/#/en-US/component/button)
ドキュメントはこのようになっており、
size, typeなどの各属性値を設定することで汎用的に多機能なボタンコンポーネントになっています。

```html:qiita.html
<el-button size="small" type="success">小さい正常系のボタン</el-button>
```


それを実現するソースをみてみましょう
https://github.com/ElemeFE/element/blob/dev/packages/button/src/button.vue

テンプレート部

```html:qiita.html
<template>
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
```

js部

```javascript

  export default {
    name: 'ElButton',

    inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },

    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: String,
      icon: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },

    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },

    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
```

propsの設定がドキュメントどおりにバリデートしてあり、型定義されています。
computedを使って、デフォルトサイズを[form](https://element.eleme.io/#/en-US/component/form)単位でのサイズ設定を可能にしてあります。
loadingがtrueならdisabled状態になり、loadingコンポーネントを呼び出しています。

このようにuiフレームワークには汎用性の高いコンポーネントを作る際に参考になるノウハウが詰まっています。

今回は時間の都合で最もシンプルなボタンの例だけでしたが、date-pickerなど高機能なUIでは
vueのmixinの利用方法や、共通部分の分離と再利用など実践的で複雑な内容を学ぶことができます。

先週末から体調不良で予定の1/3ほどの内容しか書けていませんが、今年のvue.jsアドベントカレンダー
なんとか日付が変わる前に投稿できました。
【React Hooks】useReducer + useContextでグローバルなストアを扱う

## TL;DR
useReducer単体だと、グローバルなストアを扱う事が現状出来ないので
useContextと併用して、なるべくシンプルに、グローバルなストアを扱う**react-reduxライクなアーキテクチャ**を実現してみる

## こんな感じ
```jsx:store.js
import React, {useReducer} from 'react'
import reducer from './reducer'

const initialState = {
  count : 0
}

const Store = React.createContext()

const Provider = ({children}) => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return <Store.Provider value={{state, dispatch}}>{children}</Store.Provider>
}

export { Store, Provider }
```

```js:reducer.js
const reducer = (state = {}, action) => {
  switch(action.type) {
    case 'INCREMENT':
     return {
       ...state,
       count : count + 1
     }
    case 'DECREMENT':
     return {
       ...state,
       count : count - 1
     }
    default:
      return state
  }
}

export default reducer
```
```jsx:index.js
import React, { useContext } from 'react'
import { render } from 'react-dom'

import { Provider, Store } from './store'

const Counter = () => {
  const {state, dispatch} = useContext(Store)  
  return (
   <>
    count : {state.count}
    <div>
     <button onClick={() => dispatch({ type : 'INCREMENT' })}>increment</button>
     <button onClick={() => dispatch({ type : 'DECREMENT' })}>decrement</button>
    </div>
   </>
  )
}

const App = () => (
  <Provider>
   <Counter />
  </Provider>
)

render(
  <App />,
  document.getElementById('root')
)
```
**シンプル!**

 - `connect`関数っぽい書き方ではないけど、ちゃんとコンポーネントとグローバルストアをconnectしてくれる
 - `useContext(Store)`が、**自分が当初から欲していた幻の**`useGlobal`(もしくは`useStore`)に当たる
   - **『コレだ!』感**
 - redux-sagaの様な、hooksと非同期処理を良しなに取り持ってくれる、デファクトなミドルウェアは多分まだ固まりきっていないので、非同期なactionは割り切って書かない想定(な構成)

 
[**参考サイト**](https://medium.com/maxime-heckel/rebuilding-redux-with-hooks-and-context-e16b59faf51c) (~~ていうかほぼ丸々引y(ry~~)
Raspberry PiでopenFrameworksを動かす方法

インターネット上に転がっている記事は少し古いのか
そのままでは動作しなかったため、動くまでの方法をまとめ


## Raspbian を SDカード に書き込んで起動
今回は、Raspbian Stretch Lite（2018-11-13）を使いました。
Raspberry Piは2を使用しています。


## とりあえず apt-get をアップデート

```
$ sudo apt-get update
$ sudo apt-get upgrade -y
$ sudo dpkg --configure -a
```


## git をインストール

```
$ sudo apt-get install git -y
```


## openFrameworks（0.10.1）をgitでダウンロード

```
$ cd ~/
$ git clone --depth=1 https://github.com/openFrameworks/openFrameworks.git
```


## openFrameworksをインストール

```
$ cd ~/openFrameworks/scripts/linux/debian
$ sudo ./install_dependencies.sh
$ yes | sudo ./install_dependencies.sh
$ yes | sudo ./install_codecs.sh

$ cd ~/openFrameworks/scripts/linux/
$ yes | sudo ./download_libs.sh

$ make Release -C ~/openFrameworks/libs/openFrameworksCompiled/project
```

ここまで来たら準備完了
shell scriptの実行でいろいろ聞かれるためyesをパイプで渡します。
make Releaseで30分くらいかかりました・・・


## サンプルを動かしてみる

```
$ cd ~/openFrameworks/examples/graphics/polygonExample/
$ cp ~/openFrameworks/scripts/templates/linuxarmv6l/Makefile ./
$ make
$ make run
```

makeも時間かかる・・・
MacBook Pro の設定  ~windowsユーザの場合~

windowsユーザが、何もわからない状態でMacBookの設定をしたので、忘れないように備忘録。

ちなみに、諸事情あって英字配列キーボードです。

# やりたかったこと
* 英日切り替えを簡単にしたい
* ターミナルをそこそこの見た目にしたい
* windowのサイズを変更したい
* FunctionKey を普通に使いたい


## 英日切り替えを簡単にしたい

Google IME を使う前提だと、この方法が一番良さそうだった。
「Caps lock + Space」 でtoggleで変更ができるようになった。
http://www.ringo-bito.com/entry/google-ime-install

## ターミナルをそこそこの見た目にしたい

デフォルトは真っ白でダサいので、それっぽいテーマを使うと良い。
以下を参照。
https://qiita.com/kinchiki/items/57e9391128d07819c321

## windowのサイズを変更したい
windowsでは、「windowsキー　+ カーソルキー」で、windowのサイズを4分割に変更してきれいに配置できる。
これを使いたかったので、有料だが「BetterSnapTool」をインストールした。

https://pc-karuma.net/mac-app-bettersnaptool/

普通に設定しただけでは、ホバーしなければいけないので、ショートカットキーを以下のように指定した。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/133144/e82f561a-255a-d52a-4af5-3a0d144ac821.png)

## FunctionKey を普通に使いたい
JetBrains製品を使うことが多いので、ショートカットでFunctionKeyを使いたい。
https://support.apple.com/ja-jp/HT204436

# MacBook すげーってなったこと
* トラックパッド使いやすい
    * マウスいらないなってなった
    * ただし、指3つドラッグは必須
* ショートカットはカスタマイズしたほうがよさそう
    * https://qiita.com/yuusuke510/items/11cc201c6a2aa8bb42a8
駆け出しエンジニアと共有したいプログラミング学習１２のコツ

#0.はじめに
Progateなどのおかげでプログラミングのハードルがとても下がりましたね！
一方で、Progateから先に進めない、モチベーションがうまく続かない人も多いと思います。
駆け出しエンジニア/初心者プログラマーの筆者が、プログラミング学習の上達やモチベーション維持のために、実際にやってみてよかったこと、教えてもらったことをまとめます。

#1.問題解決編
##英語で検索する＆英語で質問する
日本語でググってもググっても出てこない場合は、英語でググりましょう。**情報ソースが倍**になります。[プログラマーのためのググる技術](https://wayohoo.com/programming/google-search-technology-for-programmers.html)では、英語でぐぐる技術を紹介していますので、英語が苦手な人もご安心を。

さらに、どうしても検索しても出てこない場合は、[stackoverflow](https://stackoverflow.com/)など、英語のプログラミング技術に関するナレッジコミュニティで英語で質問してみることも非常に有効です。**Microsoftなど公式なサポートを行っているところもあり**ます。夜に頑張ってどうしてもダメだった場合、投稿して目覚めると地球の裏側から回答がきていたり、なんてこともあります。

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/133230/343c5806-39a4-cc84-3006-fbc5e55301b6.png">

##コードで検索する
[GitHubのコード検索 : プログラマにとっての宝の山](https://postd.cc/github-code-advances-search-programmers-goldmine/)で紹介されていますが、うまくいかないときはコードでググることも有効です。
Githubには**良質なコードが沢山アップされている**ので、プログラミングに詰まった際は、コードで検索してみましょう。上手な書き方も学べますよ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/133230/e5ad6a69-15eb-cd8f-e28e-f5c3d79dad6c.png)


##Chromeでのデベロッパーツールを学ぶ
初心者プログラマーが意外と勉強していないのが、デバッグの仕方やデバッグツールの使い方です。[Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能](https://www.buildinsider.net/web/chromedevtools/01)などを参考にすると、**バグを見つけるスピードが向上**します。

##メンターをつける
検索の仕方がわからない、デバッグの仕方もわからない、そんな人はお金はかかりますが、メンターをつけるほうが近道かも知れません。たとえば、[MENTA](https://menta.work/)では、メンターとなってくれる現役のエンジニアの方がたくさんいます。

##本を買う
WEBで検索するとなんでも出てくる時代ですが、ある程度勉強が進んだら本屋さんに行ってみてください。本は体系立てられてまとめられているので、紙の本を開いて、**自分の学んだことを俯瞰する**ことも振り返りやスキルチェックとして有効です。

##Udemy動画で学ぶ
本での学習があわない人は動画学習がおすすめです。例えば[Udemy](https://www.udemy.com/)では、良質なプログラミングの講座がセール中であれば1200円で購入することが可能です。

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/133230/950484ba-7cc4-6fe2-759b-2228af224a54.png">

#2.モチベーション維持＆スキルアップ編
##Twitterで学びを記録する、仲間とつながる
何事も仲間がいるとモチベーション続きます。ハッシュタグ#100dayofcodeや#プログラミング初心者と繋がりたいなど で検索＆投稿することで、**世界中のプログラミング仲間**を作ることができます。

##もくもく会に参加する、ハッカソンに参加する
人と合うことがモチベーションにつながる場合は、IT系の勉強会に参加しましょう。[Techplay](https://techplay.jp/)で検索すると毎日のようになにか勉強会が開催されています。

また、ハッカソンはの参加はたくさんの学びがあるのでぜひおすすめです。
- 短い期間でプロダクトを作りあげることができ楽しく達成感がある
- チームメンバーと自分のスキルとのギャップを知ることができる
- チームでの開発を経験できる
- APIパートナーなど、企業が親切にサポートしてくれる
プログラミング初心者も、画像集めや企画のアイディア出しなど、プロジェクトマネジメント、発表資料作成など、得意分野を活かせばチームに貢献できます。

##Qiitaに学びを投稿する
**教えること、書くこと**は記憶の定着や学びの整理に非常に有効です。学びをQiitaに記事を投稿することで、人に説明できるレベルまで到達したことを確認しましょう。
参考: [エンジニアは全員技術記事を書くことを習慣化した方がいいぞ](https://qiita.com/HiromuMasuda0228/items/a71dea7ef4d77a30b118)

##ゲームを作る
ゲームはプログラミングの基礎やアルゴリズムを楽しく学ぶ非常に有効な手段です。
ある程度のことを学んだらゲームづくりに挑戦しましょう。
◯☓ゲーム、オセロ、テトリス、ブロック崩し、マインスイーパーなど、簡単なものから挑戦することがおすすめです。

##Paizaでスキルチェックをする
[Paiza](https://paiza.jp/challenges/info)（パイザ）のプログラミングスキルチェックは、 コードを書いて書類選考なしで面接可能な求人がわかる、 IT/Webエンジニア、プログラマのための転職サービスです。 
プログラミングスキルチェックを受けることで、「自分のスキルが他社で通用するのか」を判定してくれます。ある程度プログラミングの学習が進んだら、やってみると面白いです。
対応言語も Java、PHP、Ruby、Python2、Python3、Perl、C、C++、C#、JavaScript、Objective-C、Scala、Go、Swift と幅広く対応しています。

##アプリを作ってみる！
どんなに簡単でもアプリを作ってみると、フィードバックをもらうことができます。Daiさんの[DAINOTE](https://note.mu/daikawai)など、簡単にアプリを作れるチュートリアルを公開しているので、まずは小さなオリジナルアプリから作ってみるとモチベーションが高まります!

##オンラインサロンに入会する
※後日公開
Power BIで使うファイルをSharePointの何処に置くべきか

この記事は[Microsoft Power BI Advent Calendar 2018](https://qiita.com/advent-calendar/2018/powerbi)に参加しています。

SharePointにはファイルの置き場所が3種類ある。

**1. ドキュメントライブラリー
2. リストの添付ファイル
3. 複数行テキスト内にファイルを挿入**

これらのどれに置けば、**効果的にPower BIと連携できるか**を考える。

考えてみたものの、先に結論から言ってしまうと**ドキュメントライブラリーしか選択肢が無い。**

他の二つと比べても余りに差が大きい。
#ドキュメントライブラリーとそれ以外、何が違うのか
細かい理由も多々あるが、一番大きな差は**「目的のファイルを特定することができるか」**という点に尽きる。

ドキュメントライブラリーは必ず**1ファイル1レコード**の形式でファイルが保持される。
しかしリストや複数行テキストの場合、**1アイテムの中に複数のファイルが存在**出来る。

それらを踏まえると、必要なファイルを取り出すにはそれぞれ以下の工程が必要となる。

- **ドキュメントライブラリー**
    1. ファイル名、もしくは列の値が目的に合致したファイルを読み出す。
- **リスト、複数行テキスト**
    1. タイトル名、もしくは列の値が目的に合致したアイテムを探し
    2. その中の添付ファイル or 複数行テキストから目的のファイルを探す。

**ドキュメントライブラリーは特定まで僅かな工程で済むのに対し、リストや複数行テキストは複数の工程を跨ぐ必要がある。**

しかも、そこからファイルの特定に使える情報はファイル名のみ。
複数のファイルから特定の日時に更新されたファイルを読み出す等の動作は出来ない。

これ以上書くとキリがないぐらい出てくるので
今回の内容は**「Power BIで使うファイルをドキュメントライブラリーにどう置くべきか」**とさせて下さい。

#ドキュメント ライブラリーにどう置くべきか
ドキュメントライブラリーの利用法は大抵この2パターンに収束する。

**1. 列でプロパティを付けてファイルを管理
2. フォルダを作ってファイル管理**

Power BIでの読み出し以外にも言及しますが、どちらにもメリット・デメリットが存在するので解説します。

##1. 列でプロパティを付けてファイルを管理
![image.png](https://qiita-image-store.s3.amazonaws.com/0/313502/dfa88b0f-ebf6-f7ad-3daa-36340a5aeff1.png)
###メリット
- 目的のファイルを見つけるため、**ファイルに紐づいた列のプロパティを利用できる。**
    - Power BIでも列のプロパティを利用することで常に最新のファイルを読み出したり、読み込むファイルを切り替える等、高度な運用が可能になる。
- 階層が存在しないため、**列を自由に組み合わせて業務に合致した効率的なビューを作ることができる。**

###デメリット
- **ファイルを読み出す手軽な方法が無い。**
    - ファイルの読み出しを行うために、ある程度Power Queryを弄る必要がある。
- 列が増えるとプロパティを入力するのが面倒。

##2. フォルダを作ってファイル管理
![image.png](https://qiita-image-store.s3.amazonaws.com/0/313502/900961d9-6009-4cb2-4996-2050493915cb.png)
###メリット
- **ファイルを読み出す手軽な方法がある。**
    - Power BIに繋いですぐファイルを読み出せる程度に楽。
- 決まったファイルを決まったフォルダに入れるだけでよく、**列のプロパティを入力する必要が無い。**

###デメリット
- 読み出しに使えるのがファイル名やフォルダ名、更新日時などの**デフォルトで用意されている列のプロパティのみ**となる。
    - フォルダ名やファイル名にルールを設定する必要が出てくるなど、柔軟な運用が難しい。
- 目的のファイルを見つけるため、**フォルダ階層を潜って行く必要がある。**

##比較
||列で管理|フォルダで管理|
|:-:|:-:|:-:|
|扱いの手軽さ|×|〇|
|運用の柔軟性|〇|×|
|一覧性|〇|×|

**手軽さ or それ以外の全て**

#それぞれをどう使うべきか
##1. 列で管理
**SharePointやOffice365の機能をフル活用したいならコレ。**
SharePointにアップロードした後も、内容の更新や後から探して閲覧する必要がある物に向いている。
Flowとの組み合わせで、Power BIが読み出すファイルを動的に変更する等の芸当も出来る。
しかし月々売上ファイルを溜めていくような運用は、列の設定が少し面倒かも。
~~その程度を面倒臭がる人がSharePointを使えるのか非常に疑問だけど~~

- 例
    - 計画、実績関係のファイル
    - 日次、月次業務の最終成果物
    - 会議の議事録

##2. フォルダを作ってファイル管理
**手軽さしか必要ないならコレ。**
SharePointにアップロードするが、内容の更新や後から探して閲覧する必要が無い物に向いている。
月々売上ファイルを溜めていくような運用もフォルダに当月分のファイルを入れるだけで終わる。
しかし読み出すファイルの定義が変わった場合、フォルダ階層ごと再設計が必要になったり柔軟性が死ぬ。

- 例
    - 予算関係のファイル
    - 日次、月次業務で使われるその場限りの中間成果物
    - Power BIで読み出すマスター情報

#まとめ
**向き不向きを理解して使いましょう。**
~~別にそこまで考えなくても列で管理だけで業務の9割は要件が満たされる~~

なお、**今回書いた内容を実際にSharePointでやるにはどうしたら良いか**は以下の記事にまとめてあります。
[Power BIでSharePointのデータを利用する](https://qiita.com/Yellow11/items/39336e331c397bd94d2a)

**なんでフォルダだとPower BIで手軽に読み出せるのか**
**なんで列で管理した場合にファイルを読み出す手軽な方法が無いのか**
これらを疑問に思った方は是非ご覧ください。
CSセミナー003 一文字を受け取るオートマトン

さて、正規言語について一気に説明するために非決定性オートマトンというものを導入します。これは複数のオートマトンが同時並行的に動作するオートマトンです。複数のオートマトンを扱うためにクラスを使います。クラスの基本的な使い方については「Kuinでクロージャ」という記事をご覧ください。

さて、ある特定の一文字を認識する有限オートマトンを考えます。これは３つの状態で実現できます。初期状態と受理状態（指定した文字１文字を受け取った状態）とその他の状態の３つです。

[ソースコードへのリンク](https://github.com/haruo-wakakusa/kuin-course/tree/master/cs0/cs003)

`automaton.kn`がオートマトンの本体で、`test_onechar.kn`がテストコードです。`automaton.kn`は回を重ねるごとにコードが追加されていきます。Kuinエディタで`test_onechar.kn`を実行すると一文字を認識するオートマトンのテストを行います。

```test_onechar.kn
func runAutomaton(automaton: \automaton@Automaton, str: []char): bool
	var a: \automaton@Automaton :: automaton.clone()
	for i(0, ^str - 1)
		do a.put(str[i])
	end for
	ret a.isAccepted()
end func

func check(str: []char)
	var res: []char ::
	|@runAutomaton(\automaton@makeOneChar('く'), str) ?("受理", "拒否")
	do cui@print("入力=\"\{str}\", 結果=\{res}\n")
end func

func main()
	do @check("")
	do @check("く")
	do @check("くい")
	do @check("い")
end func
```

`\automaton@makeOneChar`関数で一文字を認識するオートマトンを生成することができます。このテストコードでは、「く」を認識するオートマトンを生成し、４つの場合についてテストしています。テスト結果は以下の通りです。
![001.png](https://qiita-image-store.s3.amazonaws.com/0/64229/ed709630-d62a-1280-2c98-e851d632f7c7.png)
心動いたエンジニアの記事集

# はじめに
社内のコミュニティサイトで、今年のエンジニア流行語大賞という話題がありました。
「jsonという気味の悪い拡張子」、「AIとは最小二乗法の三次元版」、「今後必要になるプログラム言語」等などあがっていたのですが、そんな中で一人のエンジニアが発言しました。

「今年のエンジニアで流行った言葉って、そういうあざけりみたいなものばかりなんですね。むなしいですね。」

言われてハッとしました。

技術知識のない人への揶揄、汚い言葉での批判、攻撃的なコメント、、、思い返すとエンジニア関連の記事やコメントでよく見た気がします。そして、そんな記事を追っていた自分。。。
エンジニアはそんな人ばかり、だとしたら悲しいですよね。

でも実際はそうじゃない。エンジニアっていいもんだ。
そう思えるような記事に出会えました。
そしてそんな記事を他のエンジニアにも読んでほしい。

それがこの記事を書いた動機です。

* この記事もよかったよ、等あればコメントください
* 時折更新していきたいです
* Qiitaに書くなという批判は正直あると思いますし、運営が消すならしかたないと思ってます。でも自分からは消したくない。。。

# 記事集
* [枯れ果てた開発者の心のバケツ](https://qiita.com/rana_kualu/items/a033d3df87e022d0c456)
  * 攻撃的なコメントでエンジニアの心のバケツを枯れさせる人がいる一方で、感謝することでエンジニアの心のバケツを満たす人もいます。後者でありたいです。

* [「できない理由を考えるクセ、つけないで」 注目集めるロボット開発者が訴えるわけ](https://www.buzzfeed.com/jp/seiichirokuchiki/ory-and-banda)
  * 難しいからできないではなく、難しいからこそ乗り越えていきたい。
  * 仕事をしてるとどうしてもリスクの懸念で出来ることばかりに行ってしまいがちです。しかし、出来るかも分からない困難を乗り越えて世の中を良くしていくことこそ、本来エンジニアが目指すべきことなのでは、と感じさせてくれました

* [新卒からの質問をソシャゲっぽい仕組みにしたら捗った話](https://qiita.com/y-tsuna/items/fced3a9515c8f585ca50)
  * 和気あいあいとした職場の雰囲気の伝わってくる記事です
  * 仕組みややり方を工夫すれば仕事はもっと楽しくなる、と気づかせてくれました

* [小学校にプログラミング授業をお届けする](https://qiita.com/cocoakamen/items/4380d8151c7c44033907)
  * 大人達から惨憺たる評価だった教材のシステムが、ふたを開けてみれば、大好評。
  * 子供受けしそうな題材やかわいいキャラなんかなくても、プログラミング自体が楽しいものだし、それを伝えたい。そういう思いがあったからネガティブな評価でも乗り越えていけたんだろうなと感じました

* [「マルス」が主役『プロジェクトX 挑戦者たち 100万座席への苦闘』](https://news.mynavi.jp/article/railmovie-54/)
  * プロジェクトは破綻しかけ、いがみ合う顧客とエンジニア。。。そんな苦境を打開し、プロジェクト成功するまでの話です
      * どんなに関係が悪くなっても、人と人とは理解しあえるし、関係は修復できる。そう思いました。  
  * もう少し中身に触れている記事はこちら。[プロジェクトXに出てきた尾関さんのリーダーシップが凄まじかった](https://www.ideaxidea.com/archives/2013/12/ozeki_x.html)
  * プロジェクトXは他にもいろいろありそうですね
Nuxt.jsを試す

下記を参考に，TypeScript版のテンプレートでNuxt.jsを試す．

https://qiita.com/HeRo/items/1734719fb6587db7fa84

```sh
npm install -g @vue/cli @vue/cli-init
vue init nuxt-community/typescript-template my-project # ウィザードは適当に回答
cd my-project
npm install
npm run dev 
# ここでCLIで示されたURLを開く
```

動いた．

<img width="920" alt="スクリーンショット 2018-12-11 22.58.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/198108/3b60570c-e01d-65e4-f016-66d69a6d0531.png">
Mistel Barocco MD650L & MD600メモ

# 概要
- 2019 3/12追記：MD650Lのロープロファイルのスイッチはスムースさがイマイチなのと、ちょっと音がうるさかったので、MD600 RGBのSilent Redにした
- ErgoDox EZをSilent Redスイッチで使っていて、キーボード自体は素晴らしく文句も全くないのだが、仕事の関係でMacBook Proのキーボードを使うことも多くなり、キーボードを切り替える際の脳のコストが辛くなってきたので、配置が同じスプリットタイプのものにしようと思いこちらにした。
- MechanicalKeyboards.comで購入

# MD600メモ
- MD600は右が主なのでPCには右から接続する
- 右ctrlをfnにして（fnはRWinになるらしい）、Karabiner-ElementsでMD600を繋いだときだけ、opt（ALT）とcmd（RWinとLWinのこと）を入れ替える
- LEDの設定はPn + F4などで変更

# MD650Lメモ
- MD650Lは右が主なのでPCには右から接続する
- 右側が使えないときは、右のmicroUSBを抜いてつなぎ直す
- 右ctrlをfnにして（fnはRWinになるらしい）、Karabiner-ElementsでMD650Lを繋いだときだけ、opt（ALT）とcmd（RWinとLWinのこと）を入れ替えるようにする

# MD650L関連リンク
[超小型な分離キーボードの新境地。ロープロ仕様に生まれ変わった、MISTEL「MD650L」を試す](http://www.gdm.or.jp/review/2018/0719/269597)
https://blog.hotolab.net/entry/md650l
https://sekailab.com/wp/2018/10/15/mistel-barocco-md650l-case/
https://qiita.com/hakaicode/items/6243b43d2af6cfb05a29

# MD600関連リンク
[MiSTEL Barocco MD600 Setting（これわかりやすい）](https://qiita.com/hakaicode/items/8569e58ce61385ff5fa5)
[かな入力使いのMistel Barocco設定](http://blog.zxm.jp/2017/10/post-7602/)
https://qiita.com/Takuan_Oishii/items/0f7a0d278980265b69a5
http://www.archisite.co.jp/wp-content/uploads/2016/09/Barocco-Manual.pdf
http://www.gdm.or.jp/review/2016/0926/178898/
http://musikirin.com/archives/130
RailsのAjaxの苦手意識を消したい

#初めに
RailsのAjaxやら非同期やらが難しそうでなかなか手が出せずにいたけどそろそろ勉強してみる


#とりあえず投稿文字の反映をさせる

```ruby
rails g controller words index 
```

でとりあえずコントローラーをつくる

indexに

```ruby:index.html.erb
<h1 id="word"></h1>
<%= form_with url: '/words/post' do |f| %>
    <%= f.text_field :word %>
    <%= f.submit %>
<% end %>
```

と書く。

form_withはデフォルトで非同期通信を行ってくれるらしいのでこのままで大丈夫。

urlをアクション名で指定したかったがうまくできなかったので/words/postを書いている。

そのあとwords_controller.rbに

```ruby:words_controller.rb
class WordsController < ApplicationController
  
  def index
  end

  def post
    @word = params[:word]
  end 
  
end
```


と書く

postにparams[:word]が送られてそれを@wordに入れている。

この時にviewsに書いてあるpost.js.erbが実行されるらしい。

ということで@wordを表示するためのコードをpost.js.erbに書く


```javascript:post.js.erb
$('#word').html("<%= @word %>");
```


よくわからないがidがwordとなっているものの中身を<%= @word %>にするというコード

これで実行すると入力した文字が画面に表示されることになる。


#検索結果の表示


つぎにAjaxでの検索結果の表示を実装したいと思う。


とりあえず

```
rails g model user name:string age:integer
rails g controller users 
```

をしてモデルとコントローラーを作る。


検索するためにデモのデータが必要になるから

Gemfileに

```
gem 'faker'
```

してbundle install

そのあと

db/seedに

```ruby:db/seeds.rb

100.times do 
    user = User.new(name: Faker::Name.first_name, age: rand(100))
    user.save 
    if user.save
        puts "#{user.name}を作成"
    end 
end 
```

とすると100件のサンプルデータが作成できる。


コントローラーに検索結果を表示するためのindexを検索する際のアクションsearchを設定する

```ruby:users_controller.rb
class UsersController < ApplicationController

    def index 
    end 

    def search
        @user = User.where 'name like ?', '%' + params[:name] + '%'
        @user = @user.to_json.html_safe
    end 
    
end
```

searchは@user に検索結果を入れてそのあとjsonの型式にしている。
なんでこれが必要かはよくわからないけど必要なよう。
html_safeはHTML形式のコードをそのまま出力するために必要。



さっきと同じように非同期でsearchアクションを行うとsearch.js.erbが実行されるので検索結果を表示するコードをsearch.js.erbに書きます。

```javascript:search.js.erb
var user = <%= @user %>
var result = ''
user.forEach(function(e){
    result += '<li>' + e.name + ':  ' + e.age + '</li>'
});
$('#result').html(result);
```

user に　@user　を入れてそれをforEachで繰り返し処理しています。
resultに<li>taro 18</li>みたいな感じで値を入れていきます。


index.html.erbは

```ruby:index.html.erb
<%= form_with url: '/users/search' do |f| %>
    <%= f.text_field :name %>
    <%= f.submit %>
<% end %>

<table id="result"></table>
```

こんな感じです。

検索結果がvar resultに入れられて$('#result').html(result)でidがresultのところに検索結果が入っているresultを入れるという感じ。


#最後に

まだほんとに基本中の基本しかわからないのでこれから知識を増やしていきたい。
何か間違っているところがあればご指摘いただければと思います。
京急を止めるIoT

ポキオ（@pokiiio）です。
[enebular Advent Calendar 2018](https://qiita.com/advent-calendar/2018/enebular)の12日目を担当させていただきます。


![ポキオ enebular Advent Calendar 2018](https://lh3.googleusercontent.com/jKN1MH6Qj_5WJgIkvPs6-axBBJvcQzFuUCA9gY6TnK0-zF2ilRh19ehGNCYLnRr2AOW7UV1GQ619URuuoDqkVP-GDGDE3FQaqQoVMG2rimohZvS9cM9Axb-ZwB3YEsCdgmI0BVzQuGE=s600 "ポキオ enebular Advent Calendar 2018")




# tl;dr

ウイングアークフォーラム2018で発表した内容です。
https://speakerdeck.com/pokiiio/jing-ji-wozhi-meruiot

私は京急が好きなんですが、（中略）、なかなか止まらないので、自分で運行情報を書き換えられるような運行情報ページをenebularのNode-REDで作ってみました。


# 電車は止めてはいけません

ダメです。


![ポキオ enebular Advent Calendar 2018](https://lh3.googleusercontent.com/rwDskixI-I2nrKvFTmxa_9kQpZIOfTYWcQU02EgNxVpnrhD5GNw28J1Q4mrrMGyJp8MB_ARykBj-qEXUmL605eWiM0xU_lGISr5x0Is8IGc7VGQTqmkEd_74yfALszY5fRjAgQaLnwg=s600 "ポキオ enebular Advent Calendar 2018")


結構エイヤで作ったのでアレですが、ポイントだけかいつまんで説明します。


## 運行情報データはFirebaseで

嬉しいことに、enebularで使われているNode-REDにはFirebaseノードが標準搭載されていので、これを使わせていただきました。データの読み書きだけでなく、データに変化があったときに、それをトリガーとして別のノードを発火できるので便利です。

## 運行情報ページはHTTPノードで

HTTPリクエストがあったら、Firebaseに運行情報を問い合わせて、その情報をもとにHTMLをダイナミックに作成して、HTTPレスポンスとして返します。


## 運行情報データに変更があったときはツイート

鉄道会社のTwitterアカウントでありがちな、運行情報に変化があったときのツイート投稿を、先程のFirebaseノードで実現しています。自分からポーリングしなくていいので、楽ちんですね。


## One more thing...

このフローをherokuにデプロイして運用しているのですが、herokuは一定時間アクセスがないとアプリが休止状態に入ってしまいます。それを防ぐために、自分自身の運行情報ページを定期的にGETするようにしています。


# さてさて

相変わらずな内容ですみませんでした（笑）
ご乗車ありがとうございました。
脱Excelへの一歩　全ての結合セルを解除する

# はじめに
Excelで作られたIPアドレス管理表をDBに投げ込むのに、下記の上の表ように結合されてたりするといろいろと面倒なもの
![image.png](https://qiita-image-store.s3.amazonaws.com/0/106778/67aa77f3-9e6d-17c7-ffbb-d3df6dd9ec7a.png)
ということで、下表のようなワークブック内の各シートの結合セルを解除し、解除された各セルに同じ値を入れるマクロを作成しました

# マクロの内容
```vb
Option Explicit

Sub releaseMerge()
    Dim ws As Worksheet
    Dim r As Range
    For Each ws In Worksheets
        For Each r In ws.UsedRange    
            If r.MergeCells = True Then
                Dim v As String, rc As String            
                ' 結合セルの値を取得
                v = r.Text
                ' セル範囲を取得
                rc = r.MergeArea.Address(False, False)
                ' 結合セルを解除
                r.MergeArea.UnMerge
                ' 解除した各セルに値を入れる
                ws.Range(rc).Value = v
            End If    
        Next
    Next
End Sub
```
これでDBへのインポートが捗るはず

# 終わりに
今年は我が社にも自動化、RPAの波が。。。
まだまだExcelが全盛の会社も多いはず。効率化の一助になれば幸いです
座標変換と、その簡便なロボティクス的記法

## 座標変換
高校数学まででは、XYZ座標系が唯一存在するだけで、複数の座標系を行き来するような問題は少ないです。しかし、現実にはそのような問題は多発します。例えば、多数のロボットが同時に存在し、それぞれがロボット自身に固定された座標系を持っている場合を考えます。一つのロボットが対象物体を観測し、その物体が他のロボットから見てどこにあるか？という問題を考えると、共通の点を複数の座標系で表すような数学が必要となります。

上記のような座標系自体の交換を行うためには、座標変換と呼ばれるテクニックが有用です。特にロボティクスにおいては極めて多発する基礎的な問題であるため、順運動学として知られる計算方法と、簡便な計算記法が普及しています。この記法を、以下のPDFのリンクに解説しました。

[PDF](https://drive.google.com/file/d/1wfEig0LcPl41VWGIQ_Uo7zzTw7AJAeax/view)

この表現方法のメリットは以下です。

- 1つの座標系変換を1つの行列（同次変換行列）で表す
- 座標系変換では必ずどの座標系での話をしているのかを明記することが肝要であるため、変換行列には上下に座標系を添字として明記する。
- 座標変換行列の結合を、あたかも約分のように扱うことができるため直感的である。
- 座標変換行列の逆行列は、座標系変換の逆変換となり、更に逆元の表記は添字を上下反転した形として表されるため直感的である。


## yukicoder No.760 Where am I moved to? での実際的な適用
[yukicoder No.760 Where am I moved to?](https://yukicoder.me/problems/no/760)の難しいポイントは、どの座標系の話をしているのか混乱する点だと思います。この表記を使うと、簡単に機械的に解くことができます。解説は[PDF](https://drive.google.com/file/d/1wfEig0LcPl41VWGIQ_Uo7zzTw7AJAeax/view)の下の方に書かれています。
ChainerのSequentialについて

Chainerには4.0からSequentialという機能が導入されています。
これは

```
h1 = L1.(x)
h2 = L2.(h1)
...
```

のような層が連続的に重なったネットワークを簡単に記述する機能です。
Kerasを知っている人は、それを思い浮かべるといいかもしれません。

公式のソースコードを一部引用して説明すると、

```
Model(chainer.Chain):
    def __init__(self, n_in, n_hidden, n_out):
        super(Model, self).__init__()
        with self.init_scope():
            self.L1 = L.Linear(n_in, n_hidden)
            self.L2 = L.Linear(n_hidden, n_hidden)
            self.L3 = L.Linear(n_hidden, n_out)
    def __call__(x):
        h1 = F.relu(self.L1(x))
        h2 = F.relu(self.L1(h1))
        return F.relu(self.L1(h2))
   
model = Model(in,hidden,out)
```

というネットワークが

```
from chainer import Sequential

model = Sequential(
    L.Linear(n_in, n_hidden),
    F.relu,
    L.Linear(n_hidden, n_hidden),
    F.relu,
    L.Linear(n_hidden, n_out)
)
```

として書けます。

Sequential同士は加算によりつなぐこともできます。

```
from chainer import Sequential
model_A = Sequential(L.Linear(10, 10), F.relu)
model_B = Sequential(L.Linear(10, 10), F.sigmoid)
model_C = model_A + model_B
```

max_poolingのような引数が必要な関数はpythonのpartialを用いることで使用できます。

```
from functools import partial

model = Sequential(
    L.Convolution2D(None, 64, 3, 1, 1),
    partial(F.max_pooling_2d, ksize=2)
)
```

最初に固定のネットワークを指定するのではなく、生成した後にappendで層を順番にすることでネットワークを構築できます。

```
model = Sequential()
model.append(L.Linear(n_in, n_hidden))
model.append(F.relu)
model.append(L.Linear(n_hidden, n_hidden))
model.append(F.relu)
model.append(L.Linear(n_hidden, n_out))
```

引数にリストを渡すことでネットワークを構築することもできます。

```
layers = []
layers += [L.Convolution2D(64, 64, ksize=3, pad=1)]
layers += [L.Convolution2D(64, 64, ksize=3, pad=1)]
layers += [L.Convolution2D(64, 64, ksize=3, pad=1)]
...
model = Sequential(*layers)
```

この方法を使うことで数値が入力された配列からネットワークを構築することもできます。

```
lns = [512, 512, 512,256,128,64]
in_layer = 512

layers = []
for ln in lns:
    layers += [L.Convolution2D(in_layer, ln, ksize=3, pad=1),partial(F.relu)]
    in_layer = ln
model = Sequential(*layers)
```

公式のサンプルを使用しつつ、Sequentialの使い方について説明しました。
複雑なネットワークはこの方法では記述できないですが、
簡単なネットワークやネットワークの一部はSequentialを用いると短く記述できます。
[Python]マンデルブロ集合の描画

#はじめに
Pythonでマンデルブロ集合を描いてみました．
#マンデルブロ集合とは
次の漸化式

```math
\left\{
\begin{array}{ll}
z_{n+1}=z^2_{n}+c\\
z_{0}=0
\end{array}
\right.
```
で定義される複素数列$z_n$が$n\rightarrow\infty$で無限大に発散しないときの複素数$c$全体が作る集合のことをマンデルブロ集合と言います．
#Mandelbrot.py
```python:Mandelbrot.py
import numpy
from numba import autojit
import matplotlib.pyplot as plt

@autojit
def mandelbrot(Re, Im, max_iter):
    c = complex(Re, Im)
    z = 0.0j

    for i in range(max_iter):
        z = z*z + c
        if(z.real*z.real + z.imag*z.imag) >= 4:
            return i
    return max_iter

columns = 3000
rows = 3000

result = numpy.zeros([rows, columns])
for row_index, Re in enumerate(numpy.linspace(-2, 1, num=rows)):
    for column_index, Im in enumerate(numpy.linspace(-1, 1, num=columns)):
        result[row_index, column_index] = mandelbrot(Re, Im , 100)

plt.figure(dpi=120)
plt.imshow(result.T, cmap='bone', interpolation='bilinear', extent=[-2, 1, -1, 1])
plt.xticks(color='None')
plt.yticks(color='None')
plt.tick_params(length=0)
plt.show()
```
#実行結果
![Mandelbrot.png](https://qiita-image-store.s3.amazonaws.com/0/318558/17421750-7c1d-af41-4e76-5ed2069a3660.png "マンデルブロ集合")
#おわりに
とても面白い図形です．ぜひ描いてみてください！
Vue.js アプリケーションで起こる謎のエラーの原因が VSCode の拡張機能だった話

# 発端

仕事場で Vue.js を使ったアプリケーションを開発するため、環境構築を行っていた時のこと。
ドキュメントにある環境構築の手引きは、リポジトリを clone してきて、`yarn` でパッケージを落とし、`yarn mock` でモック環境が手元で走ることを確認すれば OK というもの。普通にやればミスるはずがないような環境構築で、開発担当が数名いる中、何故か自分の環境だけうまく動かない。

![error.png](https://qiita-image-store.s3.amazonaws.com/0/163084/b391110f-44eb-7415-06da-429dd7fac37a.png)

最初の数度は問題なく動作するのだが、何回かビルドを繰り返すと、Webpack が作った index.js で TypeError という謎の状況に。ビルドは通るのに画面が真っ白。
思わぬところでコケて混乱し、時間を浪費してしまう羽目に。

# 原因を探る

その後、Mac で同じように環境を作ると、同じように数度ビルドしたところで同じエラーが発生することを確認。
また、元の環境で PC の再起動をかけると、問題なく動作するようになることもわかった。しかしこれも何回かビルドしているうちにエラーが再発してしまう。

再起動で直ったところを見ると、もしかしてポートが取られているのではと思い、確認したところ…

![port.png](https://qiita-image-store.s3.amazonaws.com/0/163084/689104b3-88f9-818d-6439-9636a58b561b.png)

元のアプリは 9000 番ポートで走らせる設定なので、どうやらこれが原因らしい。
コマンドプロンプトから `taskkill /F /PID 1544` でプロセスをキルしてみると、無事動作するようになった。
それと同時に、コード編集に使っていた VSCode からエラーが。

![taskkill.png](https://qiita-image-store.s3.amazonaws.com/0/163084/c4a7748e-239b-796e-21cf-841091a40017.png)

拡張機能のホストが死んだ…？
不思議に思いググってみると、VSCode の GitHub にてこんな Issue を発見。

[code itself is listening on port 9000 · Issue #58045 · Microsoft/vscode · GitHub](https://github.com/Microsoft/vscode/issues/58045)

「PHP の拡張機能入れて xdebug 走らせると 9000 番ポートが埋まっててエラー起きるんだけど」「VSCode の問題じゃなくて拡張機能の問題だからそっちに問い合わせてね！」というものだが、最後のコメントに

> I had similar issue, i started disabling extensions that I suspect they caused the issue, and it happened to be the `Swagger Viewer` plugin. Check if u have this plugin enabled, or if there another plugin that could have caused this issue.

ここでようやく、エラーが起きたときのブラウザのタブに "Swagger Preview" と出ていたことに気付く。
VSCode の設定から Swagger Preview の設定を確認すると…

![swagger.png](https://qiita-image-store.s3.amazonaws.com/0/163084/91d0b2aa-35e9-85f2-1b51-3ed9e5d100c3.png)

あ　り　ま　し　た　:tada:

# まとめ

- Vue.js のアプリ開発で、ビルドは通るのに画面が真っ白という謎エラーが発生
- 原因は VSCode の拡張機能が使うポートとコンフリクトしていたため
  - Swagger の拡張機能を使っていたのは自分だけだった
  - 設定を共有する拡張機能も使っていたので Mac でも同じようにエラーが起きていた

よく考えたらタブのタイトルが大ヒントだったわけですが、あまりに予期せぬところでエラーが発生したので慌ててしまい、時間を無駄にしまくってしまいました…。
VSCode の拡張機能が使うポートが思わぬコンフリクトを起こす場合がある、という話でした。みなさんもお気をつけください…。
PowerAppsのリストアプリで添付ファイルの画像を表示する方法

#作るもの
今回はSharePoint Onlineのカスタムリストを前提としたPowerAppsのリストアプリおよび、カスタムリストのカスタムフォームにおいて、添付ファイルの画像を表示する方法を紹介します。
これまではリストに添付ファイルの画像URL用列を用意し、そこにMicrosoft Flowを利用してURLを入れるという方法がよくつかわれていたと思いますが、今回の方法では、Flowを経由することなく、単純なギャラリーの応用で表示が可能です。

出発地点はこのような、タイトルと添付ファイルだけのカスタムリストにします。
![customlist1.PNG](https://qiita-image-store.s3.amazonaws.com/0/202779/4241adb9-2224-9f67-4398-aeff57a3c67c.png)
これを基にして、画像を表示させたサンプルは以下のとおりです。

![result.png](https://qiita-image-store.s3.amazonaws.com/0/202779/ce64de6a-4cf0-7122-b53d-11811af53007.png)

方法はすべて共通ですが、それぞれ見ていきます。

#フォームでの画像表示
まずはPowerAppsでSharePointリストのフォームをカスタマイズします。
方法は単純で、フォームに空のギャラリーコントロールを1つ追加してください。その際のアイテムを以下のように設定します。(2019/03/20修正）

```Gallery1.Items
DataCardValueN.Attachments　(日本語サイトだと最後は 添付ファイル です)
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/1574cd02-3448-db2b-ea4b-1ac10106722c.png)

※Nは利用しているフォームによって異なります。Attachments_DataCardの中を見てみてください。

また、ギャラリーコントロールには、メディア>画像を追加し、その画像のImageプロパティを以下のように指定します。


```Image.Image
ThisItem.Value
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/935c8191-1c81-85af-06af-8ee8e5e4380f.png)


以上で完了です。

#リストに表示させる方法
リストアプリにあるギャラリー（行）の中にも、これらの画像を表示することができます。リストアイテムの一覧の各行に、添付ファイルの画像サムネイルを表示させるイメージです。
これにもギャラリーを利用します。

ギャラリーを選択した状態で、ギャラリーを追加してください。
その際のItemsは以下を設定します。

```Gallery2.Items
ThisItem.Attachments (日本語サイトだと最後は 添付ファイル です)
```
ここでは、親のギャラリーの各アイテムの添付ファイル群を、子ギャラリーのアイテムに設定しています。
![ListApp2.PNG](https://qiita-image-store.s3.amazonaws.com/0/202779/62e99218-eff3-6f05-4e4f-f7443a1f612a.png)

リストのEdit formに表示する際には、SharePointリストのフォームと同様の手続きで表示可能です。
**[追記]**
上の画面でいうと、EditScreen, DetailScreenのほうに追加したギャラリーのItemsには、

```
BrowseGallery1.Selected.Attachments (日本語サイトだと最後は 添付ファイル です)
``` 
を設定することで表示可能です。
![listdetail.PNG](https://qiita-image-store.s3.amazonaws.com/0/202779/119cf26b-206e-0164-6af2-c23f6b591df7.png)


以上、簡単ですが便利なリストのカスタマイズ方法でした！このように、アイテムの中で複数の子アイテムがあるような場合には、フォームやギャラリーにさらにギャラリーを追加することでうまく表示させてあげることができます。
今年を振り返って

# 今年を振り返って
社内で「アドベントカレンダーをやろう！」とい動きに参加して、今年を振り返ってみます。
また、前期と後期という区切りをもって振り返っていきますよ。

## 前期
### 起こったできごと
- いつの間にかこの社会とこの業界3年目突入
- チームに新たな風（18新卒）が参戦
- 保守業務に加えて、社内ツールの開発業務を実施
    - この社内ツール開発で、テスト駆動開発を少しだけ経験
    - 最初はTDDの良さをあまりわからなかったが、実装した機能に対して動作の正確性を担保できるところがすごいとわかった　
    - Rspec / RoR
- MyPCを初めて組む！！
    - 毎日快適なライフをありがとう

### 後悔していること
- 二年目のこが、新卒のこに対して教えていたりするところをもっと積極的に手助けすべきだった
    - 自身が困っていたときのことを活かせたはずなのにできなかったことをすごく反省しています。。
- もっと、能動的に動けたはず。今あるタスクに甘えてしまい、それだけをこなすことしかしていなかった
    - 他のタスクや改善できることに目を向けて作業すべきだった

### まとめ
前期全体を通してみると、反省点が多かった前期でした。特に、新卒の指導面や普段の業務に関しては取り組み方を変える必要があります。
良かった点としては、TDDについて触れれたことと、システムを理解するための方法を自分なりに得ることができたということ。あと、経理処理。

## 後期
### 起こったできごと
- 1年半ほどいたチームを離れて新たなチームに！
    - 自分に新たな風がふく
- 主に使用していた言語が ruby → php に変更！
    - なれない言語に悪戦苦闘。。
    - ただフレームワークにおいては、そこまで迷うことなく触れた気がする
- プライベートだと、今までプレイヤーして参加していたTRPGで、シナリオを自作してGMとしてプレイした。

### 困ったこと
- 新しいチームの温度感がわからず困惑。。
    - 同じ拠点内のチームではありましたが、実際にチームに入ったあとは見えるとこも増えて、どうすればいいんだろうと結構なった。。
    - ただ、メンバーのみなさんが親身に接してくれたのでわりとすぐに馴染めた（きがする）
    - チームの皆さんにはとても感謝しております！ありがとうございます。
- 対クライアントとのやり取りが大幅に増えて、MTGなど緊張する場面が増えた
- PRのレビューがなかなか通らない...
    - 自分の知識と技術のなさに泣いた
    - ただ、自身の解釈のもと実装を進めることができていたので、指摘点を鵜呑みにしてそれだけを対応するなどはほとんどなかった（細かな指摘以外）

### まとめ
今年度で見るとまだ中盤の後期ですが、個人的に変わったことも多く、関わる人も増え刺激的でした。
主要言語もphpに変わり、「あー、なぜそのデータ型ではいってくるんだ。。」というような現象に四苦八苦。
ただ、苦しいことばかりではなく、前のチームで学んだことが役にたったり、新しく触る技術が多かったりと面白いと感じる場面もありました。
これからも、わからないことが多々あると思いますが精進していきます。

## 今後について
いろいろな資格にチャレンジしていきます！目の前の控えている AWSソリューションアーキテクト アソシエイト を合格目指してがんばります。
最近は、テストの自動化などもちょこっと触ったりしているのでそちらも、中途半端に終わらずにやり抜こうと思います。

## 最後に
振り返ると自分自身の悪いところが目立った一年だったなと反省しております。
来年同じことを繰り返さないように、この振り返りを活かして行きたいと思います！
あまりまとまりのなく拙いでしたが、ここまで読んでいただきありがとうございました！
【Ruby】コマンドライン引数

## はじめに
### コマンドライン引数とは
- `コマンドライン`から入力した`引数`。
    - `コマンドライン`は、`キーボードだけで操作する画面`（ターミナル）。
    - `引数`は`プログラムや関数に渡す値`。

コマンドでいうと
`$ruby enshu.rb 5`
の
`5`の部分！！

### やってみた
- コマンドライン引数として数値を与えた時に、`偶数`か`奇数`かを判定するプログラムを実装

#### 検証
```
def check(x) <= コマンドライン引数で与えた引数が入る（メソッドを呼び出す側で指定した実引数）
    if x % 2 == 0 <= メソッド定義側で記述した仮引数
        puts "偶数です"
    else
        puts "奇数です"
    end
end
puts check(ARGV[0].to_i) <= ARGVの配列オブジェクトから、Rubyスクリプト実行時に渡された引数が参照できる
```
#### 結果
```
user$ ruby enshu.rb 4
偶数です

user$ ruby enshu.rb 5
奇数です
```

### 注意
- コマンドライン引数で渡した引数は全て文字列になる。

#### 検証
```
p ARGV[0] + ARGV[1]
```

#### 結果
```
user$ ruby enshu.rb 5 6
"56"
```
コマンドライン引数で渡した5と6が足し算されずにくっついただけになる。

そのため、`ARGV[0]`で引数を参照する場合は、`to_i`をつけてあげる必要がある。

- to_i（integer）は文字列を数値に変換するメソッド