OmniAICreator/Qiita-1.07M huggingface dataset:
為替レートをExcelに記入するマクロ

こんな「通貨一覧」ワークシートを作り、ボタンを押すと
![excel1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/a04c29e1-a14e-5464-054a-822dec150972.png)

こんな感じでレートが入るようにする。
![excel2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311544/08fc26dc-d44e-9db2-4933-cb4804a0523d.png)


マクロのコードは下記のようなかたち。
Open Exchange Rates( https://openexchangerates.org/ )からAPIキーを取得し、「設定」ワークシートのA1にAPIキーが書かれているものとする。
レート取得のボタンを押すとCommandButton1_click()が呼び出される。

```vb

Public Sub CommandButton1_Click()

	Dim jpnRate As Single
	Dim url, response As String
	Dim setting, rate As Worksheet
	Dim xmlHttp As Object
	Dim x As Integer

	Set setting = Worksheets("設定")
	Set rate = Worksheets("通貨一覧")

	If Not setting.Range("A1").Value = "" Then


	    url = "https://openexchangerates.org/api/latest.json?app_id=" & setting.Range("A1").Value
	    Set xmlHttp = CreateObject("MSXML2.XMLHTTP")
	    With xmlHttp
	        .Open "GET", url, False
	        .SetRequestHeader "Content-Type", "application/x-www-form-urlencoded"
	        .Send
	    End With

	    Dim jsonObj As Object
	    Set jsonObj = JsonConverter.ParseJson(xmlHttp.ResponseText)
	    NumRows = rate.Range("B2", rate.Range("B2").End(xlDown)).Rows.Count
	    rate.Range("B2").Select

	    For x = 2 To NumRows
	        'セルに書かれている通貨からレートを算出して記入
	        rate.Cells(x, 3).Value = jsonObj("rates")("JPY") / jsonObj("rates")(rate.Cells(x, 2).Value)
	    Next

	Else
	    msg = MsgBox("APIキーが設定されていません。" & vbCrLf & "Webサイトに移動しますか？", vbYesNo, "レート取得エラー")
	    If msg = vbYes Then
	        CreateObject("Wscript.Shell").Run ("https://openexchangerates.org")
	    End If
	End If

End Sub
```

JsonConverter.ParseJsonを使っているので、他の人の記事( https://qiita.com/emesh/items/0834a5ad373d2ade6a93 とか )を参考に。
node.js npm startエラーで実行できない

# npm start　の実行エラー
以下の資料を基に実行していますが、
ch2 - 6 npmでローカルにサーバを起動する箇所でエラーがでます。
https://paper.dropbox.com/doc/ch2-web-MSZhptwaAfXOZ8OTiTeTx

素人なのでエラー原因がわからず進まない状況です。
npmなどのバージョンの影響なのでしょうか。。
ご教授願います。

実行環境
windows10 64bit
npmのバージョンは6.9.0 
nodeのバージョンはv10.16.3 
## エラー表示
スクリプトやnpmエラーとなります。

```ruby:filename.rb
npm ERR! missing script: build;
npm ERR!
npm ERR! Did you mean this?
npm ERR!     build

npm ERR! A complete log of this run can be found in:
npm ERR!     
```


```ruby:filename.rb
 -------------------------------------
[Browsersync] Serving files from: dist/
[Browsersync] Watching files...
```
HDDのMBR領域を削除する

#はじめに
　HDDのクローンを作成し、古い方のHDDを外付けHDDをとして再利用しようとしたら、GRUBが生きていて困った話

##①概要
　HDDからSSDへ換装した際、残ったHDDを外付けHDDとして再利用しようと試みた。
　SSDのWin10からexFATでHDDフォーマットしてWin10とubuntuで共有できるようにした。
　共有外付けHDDの作成自体は成功したかに見えた。が、外付けを接続したままPCを再起動すると、[Grub Rescue]が起動してOSが起動出来ない。
　調べてみると、フォーマットだけではHDDに残っているGRUBが削除されずに残っている。そのためBIOS起動順で優先の高いUSBにから起動に行くが、ブートローダーに記載されている領域にはOSの入ったパーティションが存在しないためこのような事態になる。
　そこで、GRUBを削除しようと試みた。

##②手順
　結論から言うと、HDDの先頭をゼロ埋めしてMBRを消す。
　MBRはHDDの先頭セクタなので、バイトサイズは512　カウントは1　(以下ウィキ参照)
　https://ja.wikipedia.org/wiki/マスターブートレコード
　消した後に再度Win10でフォーマット。

　で、消すコマンドがこれ↓

```shell-session
dd if=/dev/zero of=/dev/● bs=512 count=1
```
　●は消去したいデバイス名

　HDDのデバイス名を調べるには、以下のコマンドかUbuntuのユーティリティから[ディスク]を選択。
　(ディスクユーティリティから調べたほうが分かりやすかった)

```shell-session
:~$ sudo fdisk -l

ディスク /dev/loop0: 42.8 MiB, 44879872 バイト, 87656 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト
〜
〜
ディスク /dev/sda: 894.3 GiB, 960197124096 バイト, 1875385008 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 512 バイト
I/O サイズ (最小 / 推奨): 512 バイト / 512 バイト
ディスクラベルのタイプ: dos
ディスク識別子: 0xed928d4c

デバイス   起動  開始位置   最後から    セクタ サイズ Id タイプ
/dev/sda1  *         2048   18661374  18659327   8.9G  7 HPFS/NTFS/exFAT
/dev/sda2        18661376  264234943 245573568 117.1G  7 HPFS/NTFS/exFAT
/dev/sda3       264234945  878634943 614399999   293G  7 HPFS/NTFS/exFAT
/dev/sda4       878636993 1113010175 234373183 111.8G  f W95 拡張領域 (LBA)
/dev/sda5       878637056 1113010175 234373120 111.8G 83 Linux
〜
〜
ディスク /dev/sdb: 931.5 GiB, 1000204886016 バイト, 1953525168 セクタ
単位: セクタ (1 * 512 = 512 バイト)
セクタサイズ (論理 / 物理): 512 バイト / 4096 バイト
I/O サイズ (最小 / 推奨): 4096 バイト / 4096 バイト
ディスクラベルのタイプ: dos
ディスク識別子: 0x60daf3ec

デバイス   起動 開始位置   最後から     セクタ サイズ Id タイプ
/dev/sdb1           2048 1953521663 1953519616 931.5G  7 HPFS/NTFS/exFAT
```


##③おまけ
　はじめはHDD全体をゼロ埋めしようかとも思った。(そういった記事が多かったから。)
　でも、以下のページではじめのセクタだけゼロ埋めしてブートローダーを無効化していたので試してみたらいけた。
　http://t07mk2.blog66.fc2.com/blog-entry-101.html
　手順にも書いたがMBRはサイズ512バイトって規定されてるからそこだけゼロ埋めすればいいってこと。
HTML4からHTML5への変化

###はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているやっきーです。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#HTMLとは
HyperText Markup Languageの略で、webページを構成するために使用する言語である。
webページの文章構造をタグを用いて記述する。タグによって、見出し用の大きな文字を表示したり、写真を挿入したりすることができる。

#HTMLのバージョンについて
HTML４やHTML5といったHTMLのバージョンを管理しているのはWorld Wide Web Consortium（W3C）という組織である。HTML4は1997年12月18日に、HTML5は2014年10月28日にそれぞれ勧告された。

#HTML5で出来るようになったこと
###動画、音声の挿入が出来るようになった
HTML4では、動画はFlashなどのプラグインを用いて挿入するのが一般的だったが、HTML5では```<video>```タグで動画を挿入することが可能になった。
しかし、いまだにHTML5に対応していないブラウザを使用している場合、動画を再生することができない。そのような場合のために、videoタグの間にpタグの文章を記述するとよい。

```html
<video src="testmovie.mp4">
<p>ブラウザがvideoタグをサポートしていません。</p>
</video>
```

###タグの種類が大幅に増加した
HTML4の時に比べて、文書構造に合わせたタグが追加されたため、コードの意味が理解しやすくなった。以前では、divタグを用いてidやclassで意味を持たせていたが、タグのみで意味がわかるようになるため、コードがすっきりと見えるようになった。
#####新たに追加されたタグの例

+ ```<header>``` ヘッダであることを示す。主にコンテンツの最上部で用いる
* ```<footer>``` フッタであることを示す。主にコンテンツの最下部で用いる。
- ```<nav>``` ナビゲーションであることを示す。
- ```<article>``` 記事であることを示す。

###webアプリケーションが作りやすくなった
HTML5では、API(Application Programming Interface)が追加され、様々な機能が提供されるようになった。これにより、作成できるアプリケーションの幅が広がった。
#####APIを活用することで作成できる機能の例

+ ドラッグ&ドロップ
* 位置情報の取得
- webアプリケーションをオフラインで使用できるようにする


##参考文献
[【3分でわかる】HTML5とは？初心者向けに超わかりやすく説明してみた](https://www.sejuku.net/blog/6093)
[HTML 4との違い、HTML5で可能になること](http://www.htmq.com/html5/002.shtml)
[Java] 例外インスタンス

#例外インスタンスの利用
````java
try{
} catch(Exception e) {
    System.out.println(e.getMessage());
}
```

####例外インスタンスが必ず備えているメソッド
|メソッド  |意味|
|---|---|
|String getMessage()  |エラーメッセージの取得。  |
|void printStackTrace()  |スタックトレースの内容を画面に表示。  |
e.g. `e.printStackTrace();`
pythonのfstringを１分でまとめた。個人的メモ

![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)

## pythonには、f stringというものがある。
Python3.6から導入された、文字列整形シンタックスだ。

pythonコードの実行結果を、文字列に変換出来る。
つまり、以下のように、文字列を結合したり、

```python
name = "Eric"
age = 74
print(f"Hello, {name}. You are {age}.")
# => Hello, Eric. You are 74.
```
計算結果を、文字列にエレガントに変換したり出来る。

```python
print(f"{2 * 37}")
# => 74
```

javascriptのtemplate literalと同じだね。

完
機械学習の可視化ライブラリYellowbrickを日本語対応させる

## Yellowbrickとは
モデルの選択、ハイパラメーターの調整を簡単にするために、Scikit-Learn API（厳密にはMatplotlib）を拡張したものです。

回帰モデルの可視化、分類モデルの可視化などを数行でできるようになります。

詳細：https://www.scikit-yb.org/en/latest/

今回は日本語対応させるだけなので、実際の使い方などは別の機会にします。

## そのまま使うと起こる問題点

これはMatplotlibなどを使うと起きることと同じことですが、デフォルトのフォントでは日本語がないので、追加する必要があります。

そのまま使うと下のようなエラーが出るはずです。

> /usr/local/var/pyenv/versions/3.7.3/lib/python3.7/site-packages/matplotlib/backends/backend_agg.py:211: RuntimeWarning: Glyph 12452 missing from current font.

エラー文にもあるように、matplotlibにフォントがないよって言っているので、そっちの方のフォントを変更すれば問題ないです。

## フォントの変更

matplotlibのフォントの変更方法はこちらを参考にしました。
https://qiita.com/yniji/items/3fac25c2ffa316990d0c

```python
from matplotlib import rcParams
rcParams['font.family'] = 'sans-serif'
rcParams['font.sans-serif'] = ['Hiragino Maru Gothic Pro', 'Yu Gothic', 'Meirio', 'Takao', 'IPAexGothic', 'IPAPGothic', 'VL PGothic', 'Noto Sans CJK JP']
```

これでグラフ上でも日本語が表示されすようになります。

Yellowbrickに関する記事があんまりないので、今後使い方など書けるようにしたいです。
vue init と vue createの違い

どちらでプロジェクトを作成すれば分からなかったので調べてみました。大した内容じゃないです。

# vue init と vue createの違い(位置づけ)

- vue initはvue-cliの2.0系から使えますが、vue createはvue-cliの3.0系からしか使えません。
- vue initはvue-cliの3.0系でも使えますが、公式ドキュメント([Creating a Project | Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html#vue-create))ではvue createを使ってプロジェクトを作成しています。よって、公式の推奨はvue createのようです。
- 2019年9月時点では、vue initを用いたプロジェクト作成の情報が多いようです。

|  |vue-cli 2.0系  |vue-cli 3.0系  |公式推奨|情報量|
|---|---|---|---|---|
|vue init  |○利用可能  |○利用可能  |○非推奨ではない |○多い|
|vue create  |×利用不可  |○利用可能  |◎推奨 |△そこそこ|

こうみると、どちらを使うか迷います。

- [vue-cli 3系への移行と新規Vue.jsプロジェクト作成とビルド方向まとめ | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-](https://designsupply-web.com/knowledgeside/4639/)
- [Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート) - Qiita](https://qiita.com/Junpei_Takagi/items/603d44f7885bd6519de2)
- [Vue.js｜Vue CLIで新規プロジェクト構築 - わくわくBank](https://www.wakuwakubank.com/posts/496-vuejs-cli-basic/)

# vue init と vue createの違い(機能

- ファイル構造が2.0系と3.0系で変わっていますが、どちらかしか出来ない事、というのは今のところなさそうです。
- 2.0系だとtypescriptを使う時に lang=ts みたいに書かないといけなかったですが、3.0系だとプロジェクト作成時にtypescriptを選択できるようです。
- よって、typescript勢からの情報発信は、3.0系を使ったものが多くなると予想されます。

# firebaseへのデプロイ

vue initはindex.htmlにfirebaseのSDKを張り付ける、という行為が必要でしたが([Vue.js初心者お勉強-その2- firebase編 - Qiita](https://qiita.com/teraco/items/656d86ebae3392afd0ff))、vue createで作成したら不要でした。

- [Vue CLI 3.0でつくるwebアプリをfirebaseでホスティングする - Nyle Engineering Blog - Medium](https://medium.com/nyle-engineering-blog/vue-cli-3-0%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8Bweb%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92firebase%E3%81%A7%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%99%E3%82%8B-9a14cf3013c1)

ただ、記事によってはfirebaseconfigを設定してたりするので、私が知らないことがまだあるのかもしれません。

- [VueとFirebase Authenticationを使用してGoogleログインを試す - Qiita](https://qiita.com/teradatk/items/2b6079ce0719847d8980)
- [vue-cli3系を使ってvue.jsアプリケーションで環境変数を扱う - もふもふ技術部](https://tech.mof-mof.co.jp/blog/vue-cli3-env.html)
- [Vue.jsでFirebaseのFirestoreにアクセスしてデータを取得する - もふもふ技術部](https://tech.mof-mof.co.jp/blog/vue-firestore.html)
- [Vue.js + Firestoreでデータを取得してラーメン一覧を表示する - もふもふ技術部](https://tech.mof-mof.co.jp/blog/vue-firestore-ramens.html)

# 次にやることメモ

私はfirebstoreからのデータの読み出し・書き出しがしたいだけなので、vue initでもvue createでも拘りはない(できればvue createでやった方がいいと思うが。)

なので、写経元のWebサイトに従ってどちらを使うかを決めていこうと思っている。

- [Cloud Firestore を使ってみる  |  Firebase](https://firebase.google.com/docs/firestore/quickstart?hl=ja)
- [Firebase Cloud Firestoreを使ってみる - Qiita](https://qiita.com/bathtimefish/items/164d2b0cd268f209db9b)
MySQLで使用パーティションの実行計画をとるメモ

sqlのチューニングで実行計画をとりたいときは
EXPLAINをよく使うと思いますが、テーブルの使用パーティションを確認する際は

```EXPLAIN PARTITIONS {クエリ}```

で使用しているpartitions情報を取得できます。



```explain select * from user_hoge_log where start >= UNIX_TIMESTAMP('2019-09-01');```

|id|	select_type|	table|	partitions|	type|	possible_keys|	key|	key_len|	ref|	rows|	filtered|	Extra|
|---|---|---|---|---|---|---|---|---|---|---|---|
|1|	SIMPLE|	user_hoge_log|	p0,p1,p2,p3|	ALL|	NULL|	NULL|	NULL|	NULL|	2611|	33.33|	Using| where|

※パーティション化されていないテーブルで```EXPLAIN PARTITIONS```を使用すると、
エラーは発生しませんが、partitionsカラムの値は常に NULL となります。


ちなみに試してみたところ、

MySQL5.6では```partitions```指定は明示的に必要でしたが、
MySQL5.7では```partitions```指定はなしでもpartitions項目は表示されたのでデフォルトでオンのようです。
【Laravel】モジュール化

# モジュール化したい
毎回 laravel 環境を一から構築するのは良いけど、全機能のモデル、ビュー、コントローラーが単一のディレクトリにごちゃ混ぜになるので機能単位での移植・流用は何かと手間。
でも、プロフィール編集とかユーザー管理とか決まりきった機能は簡単に移植したり流用したい。
なので・・・
# モジュール化パッケージを探す
パッケージスト( https://packagist.org/ )は、composer でインストールできるパッケージのリスト。
ここに行って Laravel をモジュール化するためのパッケージを "laravel module" で検索して、現時点で一番上に出てきたのをインストールしてみる。
（玉石混交で、Laravelバージョンにも依ったりするのでインストールしてみて動かない場合は、あきらめてアンインストールして2番目の候補をインストールしてみる。）
# インストール
https://packagist.org/packages/nwidart/laravel-modules が出てきた。
詳細ページを見ると、インストール方法や設定方法が記載されているので、それに従って作業して行く。
**インストール**
Composerを使ってインストールするには、次のコマンドを実行する。

```shell
composer require nwidart/laravel-modules
```
パッケージは自動的にサービスプロバイダーとエイリアスを登録する。
オプションで、次を実行してパッケージの構成ファイルを公開する。

```shell
php artisan vendor:publish --provider="Nwidart\Modules\LaravelModulesServiceProvider"
```
**オートローディング**
デフォルトではモジュールクラスは自動的にロードされない。psr-4 を使ってモジュールを自動ロードする。
例：
composer.json

```shell
{
  "autoload": {
    "psr-4": {
      "App\\": "app/",
      "Modules\\": "Modules/"
    }
  }
}
```
ヒント：設定した後で composer dump-autoload を実行することを忘れないこと。
**ドキュメンテーション**
インストール手順と完全なドキュメントは https://nwidart.com/laravel-modules/ にある（英語）。
# インストールすると・・・
artisan に module というコマンドが追加される。

```shell
php artisan module:make [モジュール名]
```
を実行するとモジュールがスコフォールド（足場組み）される。
resources/web.php に特に記載しなくても モジュール名 のプリフィクスを付けると
自動的にモジュール内部のルーターやコントローラーが使用される。

# モジュール内でのマイグレーション
Modules/モジュール/Database/Migrations の下にマイグレーションファイルを置く。
記述方法はモジュールと言っても、users とかと変わらない。
ただし、モジュール内部のものは以下のコマンドでマイグレーションする。

```
php artisan module:migrate Bookmark
```


# メリデメ
**メリット**

- モジュール単位で管理するので機能のオンオフが容易
- コントローラーやビューなどがモジュールディレクトリ以下で管理できるので分かりやすい。

**デメリット**

- モジュール単位で M(?)VC を持つので冗長になりがち。
- ビューもモジュール単位で個別に持つので統一感を持たせるには注意が必要(※1)

※1 Bootstrap などを使って統一感を図ったり、全体で共通のモジュールを作って、その共通レイアウトを
各モジュールビューで参照したりすれば統一感はとれそう。
怠惰でもモチベーションを持続させる

# モチベーションの維持って大変
やる気はあってもモチベがなければ行動することはできません。
意識だけ高い系にならないように、モチベーションの管理が必要ですよね。


とっても耳が痛い話ですが、勉強会で色んな人にモチベ維持の方法を聞いてみたのでまとめてみます。

お手軽度と効果については独断と偏見です。
人によって感じ方はだいぶ違うと思うので、自分にあった方法を見つけるのが吉かと思います

## とにかく手につける
お手軽度 : :star::star:
効果 : :muscle::muscle::muscle:
めんどくさい～～と思っても、一度手をつけ始めてしまえば集中してできる。という理論
最初だけでいいからとにかく心を消すことが重要らしいです。

## もくもく会に参加する
お手軽度 : :star::star:
効果 : :muscle::muscle::muscle::muscle:
家にいるとYouTubeだのNetflixだのスプラトゥーンだの誘惑が多すぎて進まん！！
という人にはもくもく会がオススメです。
同士に囲まれた中で流石にYouTube見れないですよね。

## LT会などの勉強会に参加する
お手軽度 : :star::star::star:
効果 : :muscle::muscle::muscle::muscle:
色んな人の話を聞いていると否が応でもモチベーションが上がります
「1回勉強会行けば3日はモチベ持続する」との金言。
3日毎に勉強会に行けば無限のモチベーションを得られる最強のライフハック。

## アウトプットする
お手軽度 : :star::star::star:
効果 : :muscle::muscle::muscle::muscle::muscle:
褒められないと続けられない。誰かに見てほしい。
承認欲求は最高のガソリン。
自分の成果をアウトプットすることにデメリットは一つもありません。

## ライバルを作る
お手軽度 : :star:
効果 : :muscle::muscle::muscle:
スコア付されるのが好き。順位で競い合うのが好き。
という競争心豊かな人はだれかしらライバルを作るのが良いらしいです。
QiitaやTwitterで仮想的を定めて勝手に対抗心を燃やしていきましょう。
相手からも意識されるようになれば更に燃え上がるかも。

## これからやることを宣言する
お手軽度 : :star::star::star::star::star:
効果 : :muscle:
自分を追い込まないとできない人向けです。
Twitterでちょろっとつぶやくだけ。
全くやる気なくても「やるぞ」っていうだけで少し気力湧いてくる。


## そもそもモチベに左右されないマインドを持つ
お手軽度 : :star:
効果 : :muscle::muscle::muscle::muscle::muscle:
モチベが無くても続けられる仕組みづくりってことですね。
難しいですが、ハマれば理想です。

* ルーティンワークにする
    * 何時からどのくらいやる。を毎日（辛くても）続ける
    * いつの間にか体が慣れて普通にできるようになる（らしい）
* ハードルを下げる
    * 手順や準備時間を減らす
        * 開発に必要なツールを一気に立ち上げられるようにする？
        * 面倒はどんどん自動化
        * ゲーム起動したはいいものの初期ロード時間長くてやめちゃうみたいな経験ありますよね
    * 低いノルマを課す
        * 例）Qiitaの記事10行書く
        * 例）10ステップコード書く
        * 終わったらやめていい！という気持ちでやるので集中しやすい
        * 将来的にはノルマをだんだん増やしていきたい

が考えられます。

# あとがき
きっとすごいエンジニアはこんなことをせずともコードを書き始めるんだろうなぁと思いつつ。
僕はアウトプットが一番難易度と効果のバランスが良いと思っているので、これからも続けていきたいと思います。

「私はこんな方法でモチベ維持してるよ！」
「いや、このやり方はこうしたほうが良いんじゃない？」
などなどありましたら教えて欲しいです！:bow:
読んでくださりありがとうございました！
React + Redux を出来るだけ簡潔に説明する

# 背景・動機

一年前くらいに、現職で運営しているWEBアプリケーションをReact + Reduxでリプレイスしました。
その後、色々あってReact + Reduxの知見を持っているのが自分だけになってしまい、導入当初、理解に苦労した部分を一緒に働く仲間に共有したいと思ったので投稿します。

---

# React とは

- Facebookが開発しているJSのライブラリ。それまでjQueryやBootstrapなどが担ってきたUIを構築するためのもの。
- コンポーネントと呼ばれるUIの部品を組み合わせてページを作る。（→コンポーネント≒自作のHTMLタグ）
- SPAと呼ばれる仕組みのアプリケーションを構築することができる。（やらなくてもいい）
- Reduxと呼ばれる状態管理のフレームワークと連携できる。（やらなくてもいい）
- JSで作られておりブラウザで動く。サーバ不要。でもデータベースとか必要なので大抵APIサーバが必要。
- 類似のフレームワークにAngular、Vue、Flutterなど。
- ReactNativeというライブラリがあり、React(JS)のコードをネイティブアプリにコンパイルしてくれる。

---

# トレンド

https://trends.google.co.jp/trends/explore/TIMESERIES/1569982200?hl=ja&tz=-540&cat=13&date=today+5-y,today+5-y,today+5-y,today+5-y&geo=,,,&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fg%2F11f03_rzbg&sni=3

---

# 言葉の解説

用語 | 説明
---- | ----
SPA | シングルページアプリケーション。<br>最初の1回目のみサーバにアクセスし、その後のページ遷移はダウンロードしたJSが行う。
React | Facebookが開発しているJSのライブラリ。<br>コンポーネントというUIの部品を組み合わせることで画面を構築する。
Redux | Fluxというデザインパターンに沿ってデータを管理するフレームワーク。<br>Storeと呼ばれる巨大なJSONを持っており、これに変更を加えることで自動的に見た目が変更される。<br>Reactと合わせて使われることが多い。

---

# 従来のWebアプリケーションとの違い

---

## 基本的な仕組み

**従来のWebアプリケーションの流れ**

1. ブラウザがサーバにリクエストを投げる。
2. サーバはHTMLや静的リソースをレスポンスする。
3. ユーザがページ遷移すると再度ブラウザがサーバにリクエストを投げる。

```
// ページA
Browser -- HTTP Request --> Server
Browser <- HTTP Response -- Server
// ページB
Browser -- HTTP Request --> Server --> DB
Browser <- HTTP Response -- Server <-- DB
// ページC
Browser -- HTTP Request --> Server
Browser <- HTTP Response -- Server
```

---

## 基本的な仕組み

**React + Redux**

1. ブラウザがサーバにリクエストを投げる。
2. サーバはHTMLや静的リソースをレスポンスする。
3. ユーザがページ遷移すると、JSがブラウザ上でページを構築。
4. 必要な時のみサーバにアクセスして情報を取得。

```
// ページA
Browser -- HTTP Request --> Server
Browser <- HTTP Response -- Server
// ページB
Browser --- JS
Browser <-- JS
// ページC
Browser --- JS -- HTTP Request --> Server --> DB
Browser <-- JS <- HTTP Response -- Server <-- DB
```

---

## どういったメリットがあるのか

- （リクエスト内容にもよるが）毎回サーバにアクセスしないので高速、サーバへの負荷も低い。
- 基本的に非同期通信のため、体感的に高速に感じる。
- サーバサイド言語が動作する環境が不要なため、サーバの運用コストがかからない。
- CloudFront+S3等でアプリを配信できるので安価。

---

## Flux について

**従来の MVC アプリケーション**

1. HTTP Request はパースされ Controller に渡される。
2. Controller はリクエストに従って Model 等を用意しデータを処理し View に表示する。
3. ユーザは表示された View から次のリクエストをする。

```
   Model
   ↓   ↑
View   Controller
   ↓   ↑
   User
```

---

## Flux について

**React + Redux**

1. ユーザが何らかの操作をしたときに Action を発行する
2. Action は Reducer に渡され、Action のタイプごとに処理される。
3. Reducer は Action と現在の Store を受け取り、次の Store を作成する。
4. Store が変更されると View が自動的に変更される。

```
Store ---------.
  ↑            |
Reducer        |
  ↑            |
Action(Creator)|
  ↑            |
View <---------’
↑  ↓
User
```

---

## どういったメリットがあるのか

- データに対する処理が Reducer に集約されるので、見通しが良い。
- データを変更するメソッドは純粋な関数で書けるので、参照透過でテストがしやすい。

---

## コンポーネントとは

- ボタンなどの画面を構成する UI のパーツ。
- 独自の HTML タグを作成するイメージ。

```jsx
class App extends React.Component {
  render() {
    return <Title label="Hello World!" />;
  }
}
class Title extends React.Component {
  render() {
    return <h1>{this.props.label}</h1>;
  }
}
React.render(<App />, document.getElementById('app'));
```

---

# 最後に

- SPA, React, Redux それぞれの言葉の定義を整理してみました。
- React + Redux を始めるにあたり、覚えるべき用語が多く混乱する人も多いと思います。
- 本記事が理解の助けとなればと思います。
超シンプルなタイマーを作る-03　作成編

# 手を抜きます
めんどくさくなって更新が滞っていました。
ちょっと細々と記録するのは向いてないみたいなので、今後は写真中心にざっくりとしたメモみたいな感じで記録していきます。

# 動作確認
動きました。
![E2FF022F-A74E-46F8-A034-1A1660A7DAF0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467163/43e96a3d-eb1a-bc9a-4439-300fcbd10644.jpeg)

# 設計
回路図と実体配線図を作成。
回路図はこちらのサイトをほぼ丸パクリ。

『ＬＭ５５５・簡単なタイマー回路』
http://bbradio.sakura.ne.jp/555_02/555_02.html

なので回路図は書いてません。
![B15B7280-343A-47F9-999C-28170B6D6F48.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467163/5c3316b9-f2a0-a962-c486-23716df9b686.jpeg)

実体配線図はさすがに描きました。
Amazonでやっすいユニバーサル基板を大量に買ったので、ネットで拾ったExcelの実体配線図用シートをアレンジして使用。
![9DCD22E9-A0B6-4BED-A7D1-C7B688CF18B5.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467163/20ac22b4-95a9-b49e-e115-e398ba879770.jpeg)

# 組み立て
組み立てました。
あとから可変抵抗やスイッチを変更したり、組み立て中に微妙に配置を変えたりしたので、実体配線図とは少し異なります。
はんだ付けも少しは慣れてきました。
![DCA071E5-C4E1-4926-A89B-8EED50D946C0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467163/2f356afd-7f8a-b97e-7fcd-161596bfed99.jpeg)
![A99BA58B-C81A-46D0-BC31-B453415AF566.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467163/a81cfc9e-9037-4e4d-523e-c0216e99647d.jpeg)
![A8312BF7-1CC8-4453-B0A9-FD5C813A3ED5.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467163/bfcef1bd-b34b-b2fd-5454-d004bdf73eb2.jpeg)

# あとがき
8月中に終わらせる予定が、夏休みや連休が続いて、時間が確保できなかった…
でもひとまず完成させられたので、めでたしめでたし。
やっぱり工作に時間がかかるので、今後は早々に工作に取りかかって時間を確保するようにしたい。
【Linux】grep,sedコマンドと正規表現

## はじめに
Linuxのgrep,sedコマンドとそれに関連する正規表現について初歩的なことを学んだので，それをまとめる．
 

## grepコマンド

* 指定したファイルから文字列を検索するコマンド
* 検索一致した行全体を表示する
書式：`grep [オプション] 検索対象文字列　ファイル名`

#### オプションの紹介
* `-i` : 大文字小文字を区別せず検索
* `-n` : 検索一致した行番号も表示
* `-v` : 検索一致しなかった行を表示


## sedコマンド
* ファイル内の文字列置換や特定の項目の表示などの操作を行うためのコマンド
* sedは「Stream Editor」の略であり，非対話型エディタ
* 指定したファイルをコマンドに従って操作して標準出力する

###  対話型エディタと非対話型エディタについて
 * 非対話型エディタの実行手順
       1. シャルから編集コマンドを引数として与えて，sedコマンド実行
       2. sedコマンドは編集対象のテキストに対して，与えられた編集コマンドに対応する編集操作を行う
       3. 編集後のテキストを，sedコマンドが標準出力に出力
      
 * 対話型エディタの実行手順
       1. エディタを開き，バッファ内で編集
       2. 編集終了後，ファイルに保存

###基本書式: `sed スクリプト　対象ファイル`

```bash
sed 1d file
```

### ◆スクリプトの書式について
 * 例1. アドレス+コマンド（ex.`1d`→`1`がアドレス，`d`がコマンド）
 * 例2. コマンド+引数+フラグ(ex.`'s/aa/bb/g'`→`s`がコマンド，`/aa/bb/`が引数，`g`がプラグ)


###◆コマンドの種類
* `d` : 行を削除するコマンド
* `p` : 行を表示するコマンド 
* `s` : 行を置換するコマンド(ex. `sed 's/置換前文字列/置換後文字列/フラグ' file` : フラグは省略可能 )


```bash
# 1行目を削除
sed 1d text.txt
# 「りんご」を「apple」に置換して標準出力
sed 's/りんご/apple/p' text.txt

```
### ◆アドレスの指定について
アドレスを指定することはファイル内の行を指定するようなもの．
アドレスの指定には，`m,n`で「m行～n行まで」の範囲を指定できる．また，`$`で最終行を指定できる．（ex.`sed 1,5d file` ： 1行目から5行目まで削除）
なお，正規表現でアドレスの指定ができる．その際にはスラッシュで囲む．

### ◆pコマンド実行時のパターンスペースの自動出力について
sed 1p file を入力すると，以下のように1行目が2回出力される．

1行目表示
1行目表示
2行目表示
3行目表示
・・・略・・・

これはパターンスペースが自動出力されているのが原因．sedコマンドが行を読み込むとパターンスペースという場所にいったんコピーする．その後，編集コマンドをパターンスペースに実行してからパターンの内容を出力する．以下，そのフロー．

$ sed 1p file
1. 1行目を読み込んでパターンスペースにコピー
2. 「1p」コマンドを実行し，1行目を出力
3. パターンスペースを出力
4. 次の行を読み込んでパターンスペースにコピーして出力
5. 4の繰り返し

### ◆置換時の区切り文字の変更
  sコマンドによって，「/（スラッシュ）」自体の置換を行う際は，「\」(注1)を付けてエスケープする（\/と記述）．

(注1)．区切り文字は「/」に限定されているわけではない．「？」，「！」でも区切り文字としては使用できる.これはsコマンドの直後の文字が区切り文字として認識されるため，どんな文字でもかまわない．

## 正規表現
* 通常の文字列表記を使用せず検索を行うときに利用される文字列表現
* 正規表現とは，条件に合致する文字列集合を表現するための記法
* 通常，正規表現の部分はシングルクォートで囲んで指定する

### 基本正規表現の種類（よく使われそうなもの)

* `.` : 任意の1文字にマッチ
* `^` : 行の先頭を意味する（ex.`^etc`→行の先頭が「etc」であるという意味）
* `$` : 行末を意味する（ex.`jp$`→行の末尾が「jp」であるという意味）
* `\` : 直後のメタ文字を打ち消す（ex.`\.`→.(ドット) そのものを意味する）
* `[]`: []の中に含まれる，いずれかの一文字
* `[^ ]` :[ ]の中に含まれない，いずれかの1文字
* `*` : 直前の文字が0回以上の繰り返しを表現(ex.`ca*r`→cr,car,caar,caaaar,...などを表現) 

#### 拡張正規表現
* `+` :  直前の文字の1回以上の繰り返しを意味する
* `? `:  0回または1回の繰り返しを意味する
* `{m,n}` : {}というメタ文字の利用．m回以上,n回以下の繰り返しを意味する

##所感
grep,sedコマンドにはここで取り上げた以外のオプションやコマンドが予想以上に存在していることに驚いた．正規表現とコマンド操作はまだまだ未熟であるから早く慣れたい．

## 参考文献
[sedでこういう時はどう書く?](https://qiita.com/hirohiro77/items/7fe2f68781c41777e507)

新しいLinuxの教科書
技術書典7に一般参加してみた

2019年9月22日（日）に開催された技術書典7の参加レポートです。


# 技術書典とは
公式サイトに記載されている内容を引用させていただきます。
https://techbookfest.org/
> 新しい技術に出会えるお祭りです。
技術書典は、いろんな技術の普及を手伝いたいとの想いではじまりました。
技術書を中心として出展者はノウハウを詰め込み、来場者はこの場にしかないおもしろい技術書をさがし求める、技術に関わる人のための場として『技術書典』を開催します。


# 技術書典7に参加するまで
Unityやデザイン関連の本が欲しかったため参加しました。

#### 一般入場
一般入場は**11：00～13：00のみ有料**となっていたのですが、私は無料の時間帯に入場したため、チケットの購入は行いませんでした。

有料時間帯のチケット価格は以下の通りです。
Web販売価格：1,000円（9月10日10:00から販売開始）
会場販売価格：2,000円

技術書典6から、混雑を緩和するために有料時間帯を設けているようですね。どうしても欲しい本がある方は、有料時間帯に行くと良さそうです！

#### サークルをチェック
技術書典7には**約640のサークルが参加**していました！会場では混雑が予想されるため、事前にどのサークルがどのような本を出すかを調べて、スムーズにお目当ての場所までたどり着けるようにしました。


# 技術書典7 当日

#### 会場
会場は、**池袋サンシャインシティ 展示ホールC/D**でした。無料の時間帯に行ったため、受付などの手続きはありませんでした。

しかし、入場口が分からず少しの間うろうろすることになったため、こういった情報はTwitterで調べておくべきだったと後悔しました…。

うろうろしながら入場口（展示ホールD）に着いた時には待機列は殆ど無く、すんなりと入場できました。しかし、そこからブースに入るまでに長い待機列があり、30分ほど待つことになりました。想像以上の人数！

#### 各サークルへGO
ブースに入れたら、まず一番のお目当てであるUnityの本を買いに向かいました。想像以上の人数で売り切れていないか心配でしたが、無事にゲットできました！嬉しい！
その後は他に欲しい本を買いつつ、展示ホールDをぐるっと一周し、展示ホールCへ。
展示ホールCに行くには、スタッフの案内の元に階段を上がる必要があったため、激混み！という感じではありませんでした。ここでも欲しい本を買いつつ一周。様々な本があり、目移りしてしまいました。


# 戦利品
こちらが今回の戦利品です！
![技術書典7_戦利品.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463664/76eae256-ff87-5e0e-ff3a-c4a6855c80f2.png)
欲しかった本は全て購入できたので大満足です！

#### 戦利品リスト
- Unityでつくるデータベースの本
    - サークル名：ほたらいず
    - http://hotarise.info
- MAURUN
    - サークル名：まうはまうまう
    - https://www.pixiv.net/fanbox/creator/69213/post/548305
    - https://youtu.be/9yx-3RXG8rI
    - https://twitter.com/i/moments/1170671775362846720
- IT実務のアンチパターン　コミュニケーション編
    - サークル名：足跡出版
    - 	https://blog.mtb-production.info/entry/2018/11/17/210000
    - 	https://blog.mtb-production.info/entry/2019/03/06/211710
- デザイナーはどうやって作るか
    - サークル名：足跡出版
    - https://blog.mtb-production.info/
- フリーフォントだけで作る同人誌デザイン
    - サークル名：chipcodesign
    - https://note.mu/chipcodesign
    - https://amzn.to/2NyF3Nc
    - https://chipcodesign.booth.pm/


# 所感
会場を見て回った印象としては、AWSやGoが熱かったように思います。技術書も沢山ありましたし、購入される方も多くいました。中にはGopherくんのTシャツを着ている方も！
他には、SQLが賑わっていましたね。このあたりが最近の人気なのではないでしょうか。


# 最後に
技術系のイベントに参加するのは初めてだったのですが、様々な本を見ることができてとても楽しかったです！是非、次回も参加したいと思います！
redashでのmongoクエリの書き方

sort

```
{
	"collection": "hoge",
	"aggregate": [
		{
			"$group": {
				"_id": "$name",
				"count": {
					"$sum": 1
				},
				"first": {
					"$min": "$date"
				}
			}
		},
{
   "$sort": [{
       "name": "first",
       "direction": -1
   }]
}
	]
}
```
Git Bashの使い方忘れてる件について リポジトリの削除。

いや、マジで。
真面目に書いてるQiitaのユーザーすげぇわ。
モチベ、向上心高いっていうか・・・
やっぱ、日常的に勉強してるから。もち米が大量に収穫できるんだろう。

検索して求めてる知識と違ったら、
「こういう知識が欲しかった」と書いていってくれると
私自身の課題につながり、あなたに情報提供できるため非常に助かります。
よろしければ、コメント投稿をお願いいたします。

前回の続き。
（前回・インストールからやり直し）https://qiita.com/syo1syo/items/a81a70ccefbccbd9998b
クローンしてupしたろ？　そこからだ。

一度切ったり、作業変更した奴は該当フォルダでまたgit bush hereで開きなさい。
アカウント設定とかその辺の確認も忘れないように。

前回アップロードしたデータを消します。

```
ユーザー名＠～ディレクトリ名／ディレクトリ名（master）
$ rm -rf ファイル名
$ git add -A
$ git commit -m  "消したメモ"
$ git push
```

$ rm -rf ファイル名でフォルダ消してる。
あとはそれを
前回のやり方で反映させてるだけ。

おわり。

とりあえずここでいったん止める。
疲れたし。


意外にみられている・・・
やっぱモチベーションすごい。おれも見習いたい
MacでPlantUMLを簡単に編集するための環境導入編 - その１

こんにちは。てくぽこです。

[以前の記事](https://qiita.com/tekupoko3/items/bd4f8ede0355d3a7f8c2)にて,
UMLダイアグラムをテキストから自動で作成してくれる「[PlantUML](http://plantuml.com/ja/)」と、手軽に実行できる環境としてWebサービスの[PlantText](https://planttext.com)をご紹介しました。  


これはデモンストレーション用としては大変手軽なのですが、
一方では【Reflesh】を実行しない限りテキスト変更が反映されないので、初心者のうちは
「文法誤りに気づく→訂正する」
というPDCAを回しにくい部分もあると思います。  

~~正直こんなところで文法覚える手間なんかあまりかけたくない~~


というわけで、ここから２回の記事に分けて、
「PlantUMLテキストを<u>**編集しながらリアルタイムでプレビューしてくれる**</u>」
ローカル環境の導入についてご紹介できればと思います。

## 完成形
![PlantUML_PyCharm_Test1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402376/7e85dc1e-72ea-fb24-a02d-18fd4311df22.gif)

こんな風に、打ったそばから作図されていきます。気持ちいい。
次の例では更に管理者を追加しています。
テキストベースなのでコピペも利くし、**変更に対して既存シンボルの配置を自動で修正してくれる**のが大きい。
UML図を描くためにいちいちシンボルの配置を気にする必要がなく、純粋にオブジェクト構成と論理構造に集中できます。

![PlantUML_PyCharm_Test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402376/2b2a3cfc-f3cc-a706-a376-06dbd3185c19.gif)



文法誤りがあればすぐエラー出してくれるし、文法さえ合っていればすぐ図を出力してくれるので、
PlantUMLに習熟しやすい環境と言えるでしょう。


## 導入の流れ
- Homebrewをインストール：本記事
- Graphvizをインストール：本記事
- PyCharmをインストール：次回の記事
- PyCharm内でパッケージをインストール：次回の記事

ローカル実行環境にはPyCharmを用います。  
他にもAtom実行環境なども試してみましたが、2019.09.19時点ではうまく動作しませんでした[^1]。  
[^1]: Atom用PlantUMLプラグインの開発が停止している模様。Atom側のアップデートに追いついていなかった。


## 実行環境
- macOS Mojave ver.10.14.6（18G95）
- Homebrew 2.1.11
- Graphviz 2.40.1 (20161225.0304)
- PyCharm 2019.2.2 (Community Edition)

## Homebrewをインストール
公式サイトはこちらです。  
[macOS 用パッケージマネージャー — Homebrew](https://brew.sh/index_ja)
まず、上記サイトにアクセスし、下記画像内の赤線で示したスクリプトをコピーします。
<img width="1435" alt="スクリーンショット_2019-09-24_22_29_39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402376/a6e74b55-3df5-7969-42cc-e76a9c8edb8c.png">
ターミナルを開き、コピーしたコマンドを実行することで、Homebrewのインストールを開始します。

詳細手順はこちらの記事を参考にさせていただきました。
[macOSにHomebrewをインストール - Qiita](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)

#### 確認

インストール完了後は、ターミナルに`brew -v`と入力し、インストールしたHomebrewのバージョンを確認します。

```
$ brew -v
Homebrew 2.1.11
```

## Graphvizをインストール
公式サイトはこちらです。  
[Graphviz - Graph Visualization Software](http://www.graphviz.org/)

Homebrewをインストールした後、ターミナルで以下のコマンドを入力します。

```
$ brew install graphviz
```

詳細手順は下記のサイトを参考にさせていただきました。
[テキストデータをグラフ画像に変換するツール「Graphviz」ことはじめ ｜ DevelopersIO](https://dev.classmethod.jp/tool/graphviz-beginner/)

#### 確認
```
$ dot -V
dot - graphviz version 2.40.1 (20161225.0304)
```
graphvizはDOT言語というものを使用してグラフを描画するソフトです。
ターミナルにそのまま`dot -V`と入力するとgraphvizのバージョンが表示されます。
今回はあくまでPlantUMLでのUML図作成を目的としていますので、
DOT言語についてはここでは触れません。


## 次回に続く

今回はPyCharmでPlantUMLのリアルタイムプレビュー環境を導入するため、
まずHomebrewとgraphvizのインストールについて紹介しました。
インストール手順の説明は初心者にはなかなかハードル高いです。。。
参考サイト様ありがとうございます…。  

次回はPyCharm本体のインストールと、PlantUMLに関連するPyCharmパッケージ類の導入です。


## 参考サイト
- [PyCharmでPlantUMLを使用する方法 - 知的好奇心](https://intellectual-curiosity.tokyo/2018/12/15/pycharm%E3%81%A7plantuml%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)
- [macOSにHomebrewをインストール - Qiita](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)
- [テキストデータをグラフ画像に変換するツール「Graphviz」ことはじめ ｜ DevelopersIO](https://dev.classmethod.jp/tool/graphviz-beginner/)
Xcodeのアップデートが空き容量不足で出来ない！

Xcodeのアップデートが来た
ディスクは20GB以上空き容量があるのに「空き容量が足りない」エラーで進めない:frowning2:

ブラウザのキャッシュとか色々消したけど全然解決せず・・・

でたらめにサイズの大きいフォルダを調べて行ったらXcode自体に怪しげな集まり発見！
早速ネットで消していいか調べてみると・・・

[Xcode関連の不要ファイルを削除してディスクスペースを節約](https://qiita.com/shingohry/items/14dc021d4b27bdbfbb3d)
[[Xcode 8.2] 年末なので Xcode まわりの不要ファイルを一掃してみた](https://dev.classmethod.jp/smartphone/remove-xcode8-related-unnecessary-files/)

・~/Library/Developer/Xcode/Archives
iOSアプリのArchiveをしたときのファイルがここに残っているそうで、見事に消してもよさそう！

一気に13GBも復活です:v_tone1:

無事アップデートが進みました
?: < I'm Elvis演算子

# Elvis演算子とは

```kotlin
?:
```

Kotlinで変数がnullの場合に代替物を使いたい時に使う。

# 使い方

https://kotlinlang.org/docs/reference/null-safety.html#elvis-operator から引用

```kotlin
val l: Int = if (b != null) b.length else -1
```

↑みたいなnullチェックをしなくても

```kotlin
val l = b?.length ?: -1
```

で書けて便利。

```?: SomeException()```みたいにデータ取得時の例外出力時に使ったりします。

# Why Elvis演算子？

公式にはしれっとElvis演算子とだけ書かれていてなぜそんな命名なのかは名言ないですが、
右に90度回転させるとエルヴィス・プレスリーのようなリーゼント頭に見えるから、だと思われます。
強烈な印象は学習を促進させるので良いですね。

https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%AB%E3%83%B4%E3%82%A3%E3%82%B9%E3%83%BB%E3%83%97%E3%83%AC%E3%82%B9%E3%83%AA%E3%83%BC
bashで文字列の前後の空白を除去する関数を作る

```bash:functions.sh
trim_string() {
    # Usage: trim_string "   example   string    "
    : "${1#"${1%%[![:space:]]*}"}"
    : "${_%"${_##*[![:space:]]}"}"
    printf '%s\n' "$_"
}
```

## 使う

```
source function.sh
trim_string " test  "
```
盗まれた自転車を探すために pythonを初めてみた（day 1）

#初期設定
- 大宮駅前への引っ越し早々、派手な自転車が盗まれた。
- ![mybike.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76212/d36195f6-5f49-a774-e220-dfa4f8e557df.png)
　（実はさいたま市自転車盗難相当多いらしい…）
- 結構派手だし、国内乗ってる人皆無なので市民の元気玉があれば見つかるんじゃないかな？って見立て。
- そういうときに有効なのってtwitterじゃね？
- botとか作れればなんか情報集まるかな？
- どのあたりの人からレスが有ったとか、レスあった時間帯とか、からbotの最適化ってできるんじゃね？
- あれ、けど俺プログラミングしたことない。
- Web業界にいたから、うすーく概要知ってるだけ。
- ググればなんとかなるだろ。気分転換に始めてみる。
- 持ち物は盗まれた自転車とMacBookPro2016。

##見立て
- なんとなく…python？名前しか知らないけど機械学習とかできそうだし。
- よし、pythonやってみよ！

#pythonのセットアップ

##参考にしたページ
pythonのセットアップ：https://prog-8.com/docs/python-env
エディタAtomの日本語化：https://qiita.com/shimon_haga/items/59bf7d62a03b0c6d9c67
フォントの導入：https://orizuru.io/blog/dev-efficiency/font-01/

##pythonのセットアップ
###ターミナルで叩いたコマンド
- python --version
- brew -v（前職でHomebrewはインストールしてた）
- pyenv -v（前職でpyenvもインストールしてた）
- pyenv install --list
- pyenv install 3.6.5
- pyenv versions
- pyenv global 3.6.5
- python --version

これでpythonの準備は完了。
なんとなくテキストエディタも入れてテンション上げてみる。Atomにしよう。

##Atomのセットアップ
###Atomのインストール
- https://atom.io/ にアクセス
- macOS用のインストーラーダウンロード
- インストール完了

###Atomのセットアップ
####日本語化
https://qiita.com/shimon_haga/items/59bf7d62a03b0c6d9c67
- Package > Setting View > Install package で japanese を検索。
- Japanese Manu ってのをインストールしました。
- 即反映されるから気持ちいいね！

####フォントもいい感じのプロポーショナルフォント化
https://qiita.com/shimon_haga/items/59bf7d62a03b0c6d9c67
- Cicaのgithubページの中段「ダウンロード」をクリック。
- Cica_v5.0.1_with_emoji.zipをダウンロード。
- ダウンロードしたZipファイルをダブルクリックし、解凍。
- Font Book.appを開き、フォントファイルをドラックしてインストール完了。
- 今度はAtomの環境設定 > エディタ設定の中段のフォントの欄に「Cica」と入力
- 即反映。こっちもすぐ変わるから気持ちいいね！

#次の見立て
早々にpython経由でtwitterにツイートしたいなぁ
あ、twitterアカウント作らなきゃ
テストダブルをなんとなく理解する

## 意味

[Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%B9%E3%83%88%E3%83%80%E3%83%96%E3%83%AB)を確認すると次の意味らしい

> テストダブル (Test Double) とは、ソフトウェアテストにおいて、テスト対象が依存
> しているコンポーネントを置き換える代用品のこと。ダブルは代役、影武者を意味する。

## 種類

そのテストダブルにも種類がある、どんなテストをするかでダブルの種類も違ってくる。
そんなに種類は多くないんですが覚えられないのでまとめます。

| 種類     | 役割                                                         | 具体例 |
| :------ | :------------------------------------------------------------ | :------------ |
| スタブ   | テスト対象が依存コンポーネントを呼び出したときに取得できる値を用意する。 | 依存コンポーネントから取得できる値が変化したとき、<br>テスト対象の挙動がどう変化するか確認するテスト|
| モック   | テスト対象が依存コンポーネントを呼び出したときに与えた値を記録する。 | テスト対象が依存コンポーネントに入力した内容を検証するテスト
| スパイ   | テスト対象が依存コンポーネントを呼び出したときに取得できる値を用意し、<br>さらに呼び出したときに与えた値を記録する。（スタブとモックの機能を持つ） | テスト対象が既に実装された依存コンポーネントを呼び出した値や回数を検証するテスト |　
| フェイク | 実際のコンポーネント同様の動作をする。<br>テストを実行するための軽量化されたコンポーネントのこと | データベースを使用するテストの場合、膨大な時間がかかる場合がある。<br>フェイクとして同機能をインメモリデータベースで実装しテストを高速化する。|
| ダミー   | テストするメソッドには関係ないが、コンパイルを通すために必要なコンポーネント | テストに関係はないがコンストラクタに与える値が足りない、その値を埋めるために作成する。 |

## 参考記事

- [Android テスト全書](https://peaks.cc/android_testing)
- [Wikipedia - テストダブル](https://ja.wikipedia.org/wiki/%E3%83%86%E3%82%B9%E3%83%88%E3%83%80%E3%83%96%E3%83%AB)
- [martinfowler.com - TestDouble](https://martinfowler.com/bliki/TestDouble.html)
- [martinfowler.com - InMemoryTestDatabase](https://martinfowler.com/bliki/InMemoryTestDatabase.html)
Git Bashの使い方忘れてる件について インストール～リポジトリクローンとpushまで。

1年ぶりにGit Bashでgit hub使おうとしたら
使い方完全に忘れてた為作成、そして更新。

# 背景
誤記による罠も多く、以外とハマったので自分用にメモとして残した。
端末交換で実施したらできなかったので修正する。

## 更新時点での環境
windows 10 pro
およびubuntu for windows

# 手順説明

ではインストールからGit bashでGit hubにアップロードするところまで。
進めていきたいと思う。

//は私のコメント
$はコマンド
#はコマンドレスポンスとする。

## インストール
GitBash https://gitforwindows.org/
　　手順：https://eng-entrance.com/git-install

こちらはGitBashが開かない場合にこちらをインストールします。
Mingw64 http://sourceforge.net/projects/mingw/
　　手順：https://text.baldanders.info/remark/2018/03/mingw-w64/
次へをクリックしていくだけでできます。

## ユーザー登録
こちらも感覚で出来ますが、手順を記載します。
登録方法・・・https://github.co.jp/
手順・・・https://proengineer.internous.co.jp/content/columnfeature/7103


``` :昔の話
windowsでのインストール手順でgit bashをDLして使うって書いているけど
gitbash使うにはMingw64も必要だよって、どこも書いてなくて困った。
（現在は不要の認識です。）

エンジニアにとってはmingw64使ってる意識というか、入ってて当たり前になっているのかも。
参考
https://www.granfairs.com/blog/staff/gitbash-setting-shortcut
```

## 2.開く
gitで使いたいフォルダで右クリックでGit Bash Hereする。
![結果.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492033/b68bea08-834f-9ec2-4cdb-e800912e690a.jpeg)


## 3、使う
いきなりGitクローンしたいところだが、慎重に行こう。

まずはbush画面を開く。
windowsに対してはパワーシェル。
ubuntuはそのままターミナルを開けばいい。

#### アカウント設定
``` :bush画面
//いまのユーザー情報確認。これ入力したら最後の2行に「user.xxx=これだよ。」って出る
ユーザー名＠～ディレクトリ名
$ git config --list
//色々出てくる
//リストの下側、「user.name=""」「user.email=""」に値が入っているか（そもそも存在するか確認）
//リストを終了する
$ q

//そもそも、アカウントリンクされてませんでした。
ユーザー名＠～ディレクトリ名
$ git config --global user.name "Gitユーザー名"
$ git config --global user.email "メールアドレス"
//ダブルクォーテーションの中身を変える。

//ユーザー情報の切り替わりを確認
ユーザー名＠～ディレクトリ名
$ git config --list
#user.name=username 
#user.email=user@gmail.com

//終了する
$ q
``` 
#### SSH接続
だいぶ前にSSH接続が簡単になったらしいのでSSH接続するのが楽なようです。
複数のSSHキーで接続が可能になっているのでSSH接続するとかなり楽かもしれません。

``` :bush画面
//ユーザーディレクトリに移動
$ cd ./home
#～～～git@github.com: Permission denied (publickey).

//git接続を確認
$ ssh -T git@github.com

//sshを保存しているﾃﾞｨﾚｸﾄﾘに移動
$ cd .ssh


//keyを作成する。
$ ssh-keygen -t id_rsa 
#Enter file in which to save the key (/home/user.ssh/id_rsa):
#Enter passphrase (empty for no passphrase):パスフレーズを入力
#Enter same passphrase again:パスフレーズを再入力

//（ID・passはフリーで可、指定したらメモ）

//そうするとid_rsa.pub、id_rsaができるのでlsで確認
$ ls

//ファイルを確認したらcat、右クリックで中身をコピー
cat id_rsa.pub
```
gitの「https://github.com/settings/keys 」にアクセスし
「new ssh key」を選択。
わかりやすくタイトルを書いて、コピーした内容を「key」のテキストボックスに貼り付け
保存して完了。

あとは、ホームディレクトリで以下コマンドで完了。
```
//念のため状況確認
$ git remote -v
#origin    https://xxxxx.com/xxxxxxx (fetch)　　//こういう結果が出る
#origin    https://xxxxx.com/xxxxxxx (push)　　//こういう結果が出る
//問題なければ
$ git clone リポジトリのSSH
```
で完了です。


その後の操作をざっと説明すると以下です。

```
ユーザー名＠～ディレクトリ名／ディレクトリ名（master）
$ git add　コピペしたファイル名
$ git commit -m "めもなん？"
$ git push
//処理コメント・・・gitページ確認
```
つまり
```
1,git add ファイル名
でアップロードするデータ選ぶ
2,git commit　-m "どういう更新"　このファイルでupするよ。
3,git push　アップロードするね。
```
ってことですね。
ファイルを選ばずに更新したものだけUPしたりいろいろできるので
試してみるといいです。

#おわりに

使えるようになっておきたいgit remote。
https://www.sejuku.net/blog/71492
Qiita:Teamの記事をダウンロードして Markdown + 画像 にする

## はじめに…

ふだんQiita:Team使ってます（使わせていただいております）が、たまーにQiita:Teamが見れない人にその内容を共有する必要があります。そのたびにコピペとかも疲れるので記事をまるっとダウンロードできるスクリプトをPythonで書きました。

## コード

それほど説明する必要もないかと思いますがコード内の ★★★ の箇所はご自身の環境にあわせて書き換えてください。
item_id はQiita:Teamの記事のURLの最後の部分のハッシュみたいな文字列です（`https://qiita.com/567000/items/dde495d6a8ad1c25fa43`の`dde495d6a8ad1c25fa43`の部分）。

URLはご自身の環境のURL。 Bearer はご自身のアカウントでトークンを発行してください。

Pythonを実行すると、`itemid` のフォルダが出来てその中に .md と 画像一式 が格納されますのでそこから先はお好きなように！！ そのまま渡しても良いですし、PDFにしてもよいですし。

```Python
itemid = '★★★'

import urllib.request
import json
import re
import os

## 格納先フォルダ作成
dirname = 'qiita_' + itemid
os.makedirs(dirname, exist_ok=True)

## Qiita:Team
url = 'https://★★★.qiita.com/api/v2/items/' + itemid
headers = {
    'Content-type': 'application/json',
    'Authorization': 'Bearer ★★★'
}
req = urllib.request.Request(url,headers=headers)
with urllib.request.urlopen(req) as res:
    body_str = res.read()
    body = json.loads(body_str)
    body = body["body"]

## 画像のパスを書き換えて md を保存
re_body = re.sub(r'!\[.*\]\(.*/(.*?)\)', r'![](\1)', body, flags=re.MULTILINE)
with open( dirname + '/' + itemid + '.md', 'w', encoding='utf-8') as f:
    f.write(re_body)

# 画像ファイルをダウンロードする
images = re.findall(r'!\[.*\]\((.*?)\)', body)
for image in images:
    image_url = image
    image_file = re.sub(r'.*/(.*?)', r'\1', image, flags=re.MULTILINE)

    req = urllib.request.Request(image_url,headers=headers)
    with urllib.request.urlopen(req) as res:
        with open(dirname + '/' + image_file, mode="wb") as f:
            f.write(res.read())
```

## 補足

md + 画像 の組み合わせしか対応していません。他に何かファイルが埋めこまれているとうまくいかないと思いますので……ご自身でご対応くださいませ。
S3バケットのクロスアカウントアクセス

##概要

アカウントAで作成したS3バケットのオブジェクトを、アカウントBから取得する方法です。（クロスアカウントというらしい）
方法（こちらを[参照](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cross-account-access-s3/)）は以下のようにいくつかあるようです。

1. リソースベースのポリシーと AWS Identity and Access Management (IAM) ポリシー (S3 バケットオブジェクトへのプログラムによるアクセス専用)
2. リソースベースのアクセスコントロールリスト (ACL) と IAM ポリシー (S3 バケットオブジェクトへのプログラムによるアクセス専用)
3. クロスアカウント IAM ロール (S3 バケットオブジェクトへのプログラムおよびコンソールによるアクセス)

本記事では1のリソースベースのポリシーとIAMポリシーでアクセス許可をする手順を記載します。


##実行環境

AWSアカウント 2つ必要
AWS S3

##手順


### 1. アカウントAでバケットを作成する

アカウントAで、アカウントBがアクセスできるバケットを作成する。
既存のバケットを参照したい場合は作成する必要はありません。

### 2. アカウントBでアカウントAのバケットにアクセスするためのポリシーを作成する

ポリシーは以下のようにします。今回は簡単なバケット内データ取得のみを付与してみます。（GetObject、ListBucket）

```:ポリシー(JSON)
{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Effect": "Allow",
           "Action": [
               "s3:GetObject",
               "s3:ListBucket"
           ],
           "Resource": [
               "arn:aws:s3:::accountA.test.bucket",
               "arn:aws:s3:::accountA.test.bucket/*"
           ]
       }
   ]
}

```


### 3. アカウントBでユーザを作成する

2で作成したポリシーを付与したユーザを作成します。
細かいことは書きませんが、作成は以下のようになります。

- アカウントBからアカウントAバケットのアクセスはプログラムからのアクセスのみとしたいので、作成時に選択する「AWSアクセスの種類を選択」は「プログラムによるアクセス」を選択します。

- 2で作成したポリシーをアタッチ

作成時にcredential情報が作成されますが、プログラムからのアクセスする場合に利用するので取得しておく。


### 4. アカウントAで作成したバケットにポリシーを設定する

accountBuserは3で作成したユーザです。

```:S3バケットポリシー
{
   "Version": "2012-10-17",
   "Statement": [
       {
           "Effect": "Allow",
           "Principal": {
               "AWS": "arn:aws:iam::120912091209:user/accountBuser"
           },
           "Action": [
               "s3:GetObject",
               "s3:ListBucket"
           ],
           "Resource": [
               "arn:aws:s3:::accountA.test.bucket",
               "arn:aws:s3:::accountA.test.bucket/*"
           ]
       }
   ]
}
```

以上でアカウントBからアカウントAのS3バケットにアクセスする準備は完了となります。
あとはプログラムから取得できるか試してみてください。

### おまけ

一応Python Boto3で簡単にアクセスを試すと以下のようになります。

```python:アクセスプログラム.py
import boto3

session = boto3.session.Session(aws_access_key_id='アカウントBのアクセスキー',
                                aws_secret_access_key='アカウントBのシークレットキー',
                                region_name='ap-northeast-1')
s3client = session.client('s3')
response = s3client.list_objects(Bucket='アカウントAのバケット',
                                 Prefix='バケットのオブジェクト')
print(response)

```



##参考

Amazon S3 バケット内のオブジェクトへのクロスアカウントアクセスを提供するには、どうしたらいいですか?
https://aws.amazon.com/jp/premiumsupport/knowledge-center/cross-account-access-s3/



以上　:slight_smile:
AWSサービス、セキュリティ、アイデンティティ、コンプライアンス

# セキュリティ、アイデンティティ、コンプライアンス

セキュリティ、アイデンティティ、コンプライアンスについての備忘録
サービスの概要・特徴・料金などを簡潔（できれば）に記載します。

## AWS Identity and Access Management (IAM)

### 概要
AWSリソースをセキュアに操作するために、認証・認可の仕組を提供するマネージドサービス

### 特徴
* 各AWSリソースに対して別々のアクセス権限をユーザー毎に付与できる
* 多要素認証(MFA)の提供
* 一時的な認証トークンを用いた権限の委任することができる
* 他のIDプロバイダーで認証されたユーザーにAWSリソースへの一時的なアクセス許可
* 本サービスの利用は、無料

### IDと認証情報の管理
* ルートユーザー
  * アクセスキーを持たない
  * AWSリソース全てに完全なアクセス権を持つ為、通常用途に用いないことを推奨
  * IAMユーザーを作成する
* アクセスキー
  * 手動で取り消すまで有効
  * プログラムにハードコードしない、Githubあげない
  * 共有しないようにする
  * IAMロールを利用することを推奨
* IAMユーザー
  * 認証情報をユーザー毎に管理することが可能となりセキュリティを強化できる
  * 協力なパスワードポリシー設定を推奨
* MFAの有効化
  * ルートユーザーや権限の強いユーザーには設定することを推奨
  * MFAデバイスも厳重に管理する
  * 万が一！！デバイスを紛失・盗難・不具合など発生したら Eメールアドレス・電話番号で認証しアカウント情報を更新する

### アクセス権限の管理
* AWS管理ポリシー、AWSにより事前定義された管理ポリシーで、サービス・ジョブ切り口で設定されている
* 最小限のアクセス権限から開始し、必要に応じてアクセス権限を追加する 
* IAMグループ（IAMユーザーの集合）を利用して、管理コストを抑える

### 権限の委任
* IAMロール、AWSサービスやアプリケーション等のエンティティに対してAWSリソースの操作権限を付与するための仕組
* EC2インスタンスで実行するアプリケーションに対してIAMロールを使用する
* IDフェデレーションによる一元管理

### IDと権限のライフサイクル管理
* AWS アカウントのアクティビティの監視
* AWSリソースの操作ログとして AWS CloudTrail
* IAM認証情報レポート（Credential Report）を活用し、不要な認証情報を削除する
* IAMユーザーパスワード、アクセスキーのローテーションを定期的に実施する

## Amazon Cognito

## 概要
ウェブアプリケーションおよびモバイルアプリに素早く簡単にユーザーのサインアップ/サインインおよびアクセスコントロールの機能を追加できる

## 特徴

* SAML 2.0 によるエンタープライズ ID プロバイダーを使用したサインインをサポート
* Facebook、Google、Amazon などのソーシャル ID プロバイダーのサインインをサポート
* Oauth 2.0、SAML 2.0、OpenID Connect などの ID およびアクセス管理標準をサポート


## Amazon GuardDuty

## 概要
悪意のある操作や不正な動作を継続的にモニタリングする脅威検出サービス

## 特徴

* 機械学習、異常検出、および統合された脅威インテリジェンスを使用することで、潜在的な脅威を識別し、優先順位を付ける
* AWS CloudTrail、Amazon VPC フローログ、DNS ログなど、複数の AWS データソースにわたる数千億のイベントを分析
* AWS CloudWatch イベントと統合することで、GuardDuty アラートは実用的

## Amazon Inspector

## 概要
自動化されたセキュリティ評価サービス

## 特徴

* 自動的にアプリケーションを評価し、露出、脆弱性、ベストプラクティスからの逸脱がないかどうかを確認できる
* 評価の実行後、重大性の順に結果を表示した詳細なリストが Amazon Inspector によって作成される
* Amazon EC2 インスタンスへの意図しないネットワークアクセスや、EC2 インスタンス上の脆弱性をチェックできる


## Amazon Macie
## AWS Artifact
## AWS Certificate Manager

## 概要
AWS のサービスとお客様の内部接続リソースで使用するパブリックとプライベートの Secure Sockets Layer/Transport Layer Security (SSL/TLS) 証明書のプロビジョニング、管理、デプロイ

## 特徴

* Elastic Load Balancing、Amazon CloudFront ディストリビューション、Amazon API Gateway の API など ACM に統合された AWS リソースでデプロイできる
* AWS Certificate Manager でプロビジョニングされたパブリック証明書やプライベート証明書は、無料
* マネージド型証明書


## AWS CloudHSM

## 概要
マネージド型ハードウェアセキュリティモジュール (HSM)

## 特徴


## AWS Directory Service
## AWS Firewall Manager

## AWS Key Management Service(AWS KMS)

## 概要
キーを簡単に作成・管理し、幅広い AWS のサービスやアプリケーションで暗号化の使用を制御できる

## 特徴

* 完全マネージド型
* AWS KMS は AWS サービスと統合されている
* サービスに格納されているデータの暗号化と、それを復号するキーへのアクセスを制御する


## AWS Resource Access Manager
## AWS Secrets Manager
## AWS Security Hub
## AWS Shield

## 概要
マネージド型の分散サービス妨害 (DDoS) に対する保護サービス

## 特徴

* ネットワークおよびトランスポートレイヤーの DDoS 攻撃を防御
* スタンダードとアドバンストの 2 つの階層

## AWS Single Sign-On
## AWS WAF
【備忘録】ざっくりメール差出ドメインの真正性チェックとSPF

前回、Office365で大量にメール送受信する場合の制限について[【備忘録】Office365のメール流量制限まとめ](https://qiita.com/hisssa0102/items/fd58c1aac56733dc673b)まとめてみた。ECとか、大量にメールを送信するようなシステムの場合には流量制限は要考慮。

今回はこの件はおいといて。

Office365のドメインセットアップする中で、DNSに必ずこのレコードを登録している。

>v=spf1 include:spf.protection.outlook.com -all"

Office365でなくても、以下のようなにIPで登録しているはず。

>"v=spf1 +ip4:202.0.0.11 +ip4:202.0.0.12 -all"

流量制限を考慮しなきゃいけないほど大量に送信しない場合でも、こいつをいれておかないと受け手側で「このメール怪しいんですけど～」と判定されてしまう。

備忘録兼ねて、SPFについてまとめてみた。


#SPFって何？

ざっくり、「メールの差出人のドメインが、正しいサーバーから送信されているよ」というチェックして、偽のメールは偽のメールとして処理するためのしくみ。

1.メールの送信元が、この記述にあるIPアドレスから送信されているかチェック
2.メールをサーバーが受信したら、メールの差出元のIPアドレスを、SPFのIPアドレスを比較
3-1.SPFの範囲から送信していれば正しいメールとして処理。

3-2.SPFの範囲でなければ怪しいメールとして処理する。何も言わずに削除したり、迷惑メールとして処理されたり、宛先に届くけど怪しいメールですフラグが立ったりする。

・・・という感じ。


#登録しないとどうなるの？

メールを詐称して送信することは結構簡単にできてしまう。取引先を騙るメールがたくさん届いたら、どう思いますか？

あなたの組織のメールドメインのアドレスからスパムメールを送信され、先方に届いちゃったら、会社の信用問題になってしまいかねない。
スパムメールを送信する人を止めることはできない。となると自衛するしかない。そのための手段の１つがSPF。

きちんと登録しましょう。


#記述ルールは面倒

記述には厳密なルールがある。正しい記述ルールは今回割愛するけど私が参考にしているのはここ
>[間違いから学ぶSPFレコードの正しい書き方](https://salt.iajapan.org/wpmu/anti_spam/admin/operation/information/spf_i01/#20)

ページそのものは少々古いけど、間違えた記述例をもとにどう書いてあるかわかりやすい。


とはいえ、人手でチェックしても抜け漏れはあるかもしれない。チェックツールを使って確実なものにしておくべき。このサイトだと記述ルールに沿っているか、きっちりチェックしてくれる。おススメ。
>https://mxtoolbox.com/spf.aspx

#まとめ

複数のメール送信元サービスを使う場合（たとえば、Office365とバルクメール送信システムとか、ECサイト用のメールサーバーとか）は必要最小限のレコードを追加しなきゃいけない。きっちりチェックして、正しいレコードを設定しましょう。
Railsのnilチェックの方針

### なんのための方針か
Railsでサービスを開発していると、nilチェックの仕方もルール化できると効率が上がるためチームとして決めると良い。
毎回どこまでチェックすべきか考えると効率が悪い。

### 方針
1. 各入力がnilableかどうか考える
2. nilableの入力は、nilのパターンでどうするか仕様を考える
    1. デフォルトの値を使う→conversion method(to_sとかto_iとか)
    2. 処理をスキップする
3. nilableじゃない入力はnilパターンは想定しない。想定外パターンは落としたほうが発見しやすい

### 解説
1で入力とは、

- 引数
- has_many, belongs_toなどのassociation
- カラムの値

nilableとはnilになる可能性があるかどうか

- 引数はnilableだと考えておいたほうが良い
- associationはhas_manyの場合はnilableではない
- belongs_toはrails5以降はniableではない(optional: trueをつけない限り)
- カラムの値は必須じゃないものはnilable

### まとめ
nilチェックというとnilのパターンを消したくなるんだけれど、Railsの開発においてはnilは日常茶飯事なので、nilのパターンを意識するということが大事だと思います。
docker-composeで一部コンテナを削除する方法

# 経緯

あ…ありのまま 今　起こった事を話すぜ！

忌引休暇から明けて出社して、

`docker-compose ps`を叩いたら2つあったコンテナが3つになってたんだ…

な…　何を言っているのか　わからねーと思うが　

おれも　何をされたのか　わからなかった…

頭がどうにかなりそうだった…　チームメンバーがうっかり間違えたとか

そんなチャチなもんじゃあ　断じてねえ

もっと恐ろしいものの片鱗を　味わったぜ…

# いらないコンテナを消しましょう

## docker-compose psで現状確認。

```shell-session
[root@localhost docker-hackmd]# docker-compose ps
              Name                            Command               State            Ports         
---------------------------------------------------------------------------------------------------
b46aca5a4971_docker-hackmd_app_1   /usr/local/bin/docker-entr ...   Exit 0                         
docker-hackmd_app_1                /usr/local/bin/docker-entr ...   Up       0.0.0.0:3000->3000/tcp
docker-hackmd_database_1           docker-entrypoint.sh postgres    Up       5432/tcp              
```
b46aca5a4971がいらない子ですね。

## docker-compose rm で停止中のコンテナを削除する

事前にコンテナを停止させておかないと消えません。ご注意を。
＃コマンド忘れたけどdocker stop \<ID\>とかで止まらないかな…？

```shell-session
[root@localhost docker-hackmd]# docker-compose rm 
Going to remove b46aca5a4971_docker-hackmd_app_1
Are you sure? [yN] y
Removing b46aca5a4971_docker-hackmd_app_1 ... done
```
## 結果

はい、消えましたね。めでたしめでたし。

```shell-session
[root@localhost docker-hackmd]# docker ps 
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                    NAMES
fcba703cfd58        hackmdio/hackmd:1.2.0   "/usr/local/bin/do..."   6 days ago          Up 4 days           0.0.0.0:3000->3000/tcp   docker-hackmd_app_1
ee296c6ccfc2        postgres:9.6-alpine     "docker-entrypoint..."   6 weeks ago         Up 4 days           5432/tcp                 docker-hackmd_database_1
```
AndroidアプリのJava/Kotlinコンパイル時オプションを指定する

Android アプリを Gradle でビルドする際に `-Xlint:deprecation` や `-Xlint:unchecked` などのコンパイルオプションを指定するメモ。JavaとKotlinで指定方法が異なるため注意。

```groovy:build.gradle
allprojects {
    gradle.projectsEvaluated {
        
        // Javaコンパイル時
        tasks.withType(JavaCompile) {
            options.compilerArgs << "-Xlint:unchecked" << "-Xlint:deprecation"
        }

        // Kotlinコンパイル時
        tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
            kotlinOptions {
                freeCompilerArgs = [
                        "-Xjavac-arguments='-Xlint:unchecked -Xlint:deprecation'"
                ]
            }
        }
    }
}
```
NanoPiの初回電源投入をスマートに行うために

# はじめに
NanoPi、Raspberry Piの類を購入してまず最初にするのはmicroSDにimage fileを焼き、電源を投入することです。このときのIP Addressは大抵dynamic (dhcp)になっていて普通はどこに設定されるかわかりません。そこで、山勘でsshを繋いだり、シリアルターミナルを繋いだりするのですが、あまりスマートではないですね。ここに示すのはこの問題をさっと解決するショートハックです。

# 摘要
购买NanoPi或Raspberry Pi时，要做的第一件事是在microSD上刻录图像文件并将其打开。 此时的IP地址通常是动态的（dhcp），通常不知道它的设置位置。 因此，通过直觉连接ssh或连接串行终端，但是它不是那么聪明。 这是一个简短的技巧，可以快速解决此问题。

# 手順
 普通にImageをmicroSDに焼きます。[etcher](https://www.balena.io/etcher)が便利です。
 焼き上がったmicroSDを稼働中のLinux Machineに挿しMountします。 
Windows / MacOSをお使いでしたら[こちら](https://qiita.com/tomoya0x00/items/c2ae13370131115bbe36)を参照の上ext4のR/Wができるようにしてください。

``` shell
mkdir /a
mount /dev/sda2 /a
cd /a/etc/network
```
interfacesのeth0のエントリーを下記の通り書き換えます。

``` interfaces
allow-hotplug eth0
iface eth0 inet static
  address 192.168.254.90
  netmask 255.255.255.0
  gateway         192.168.254.1
  dns-nameservers 192.168.254.1
```
そうです。普通の固定IPの設定です。
書けたらumountします。

``` shell
cd /
umount /a
```
microSDを抜きます。

# 立ち上げ

Target MachineにmicroSDをさし、ethernetを繋いで電源投入します。
別のマシンからsshで繋ぐだけです。
Error: Invalid credentials provided.  や Error ID: unauthorized のエラー解決法

久しぶりにアプリをHerokuにデプロイをしようと、ログインをしようとしたところ、思わぬエラーにはまった件について。


# エラー現象
ログインができない。
※メールアドレスおよびパスワードはちゃんと合っていました。

```
$ heroku login --interactive 　　　<!--Herokuへのログインコマンド-->
 ›   Warning: heroku update available from 7.26.2 to 7.29.0.
heroku: Enter your login credentials
Email: j270549a@gmail.com
Password: ************
 ›   Error: Invalid credentials provided.
 ›
 ›   Error ID: unauthorized

```

エラー文の内容でググって、＜参考記事＞にある記事を参考にしました。

```
›   Error: Invalid credentials provided.
 ›
 ›   Error ID: unauthorized

```

# 解決方法

記事に書いてある通り、以下のような、ログインコマンドを実行すると、以下のような入力待ちの画面になる。

```
heroku login    <!--上記とは別のHerokuログインコマンド-->
 ›   Warning: heroku update available from 7.26.2 to 7.29.0.
heroku: Press any key to open up the browser to login or q to exit: 
```

そして、入力待ちの状態で、一回Enterキーを押すと、以下のような「ログインできた」というHerokuのWebページが表示される。
https://gyazo.com/d44303451cc6387c818de55412055789

そして、ターミナルの方では、ログインが完了したようになった。

```
Opening browser to https://cli-auth.heroku.com/auth/browser/acc08e55-afef-41bd-830c-2c7570fc5665
Logging in... done
Logged in as j270549a@gmail.com
```

その後に、デプロイコマンドを実行すると、

```
$ git push heroku master
```
無地にデプロイができるようになりました。
https://gyazo.com/48579cabcce6fb41413f0b5f49fafb18


＜参考記事＞
・https://stackoverflow.com/questions/52082083/unable-to-log-in-to-heroku-through-cli/52105929