OmniAICreator/Qiita-1.07M huggingface dataset:
グラデーションの上に画像と文字を表示

# グラデーションの上に画像と文字を表示
学習した内容のアウトプットをしてこなかったので、
まずはメモ程度の内容からの投稿です。

## やりたいこと
以下のような画像があるとして、矢印で示した要素で表現したい。
(SAMPLEの部分もテキストでいいのでは？というのもあるが、
本来の画像ではこのSAMPLEの部分がロゴマークだったので。。。)
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88249/5f3b0f36-9a2f-e195-8895-1be43f9ab54c.png)

## どのように書いたか
```sample.html
<div class="header-banner">
  <p class="title-en">subtitle</p>
  <p class="title-jp">メインタイトル</p>
</div>
```

```style.css
.header-banner {
  position: relative;
  max-width: 800px;
  width: 100%;
  height: 75%;
  margin: auto;
  margin-bottom: 8px;
  padding: 50px 0 50px 0;
  z-index: 0;
  background: url(logo.png), linear-gradient(45deg, #edbdc5, #872434);
  background-repeat: no-repeat;
  background-position: 5% 10%;
  background-size: contain; 
}
  .header-banner:before {
    content: "";
    display: block; 
}
  .header-banner p {
    text-align: center;
    color: white;
    transform: translate(-50%, -50%);
    text-shadow: 4px 4px 5px #000000;
    z-index: 2;
    width: 100%; 
}
  .header-banner p.title-en {
    font-size: 2.5vmin;
    position: absolute;
    top: 25%;
    left: 50%;
    margin: 0;
    padding: 0; 
}
  .header-banner p.title-jp {
    font-weight: bold;
    font-size: 6vmin;
    position: absolute;
    top: 65%;
    left: 50%;
    margin: 0;
    padding: 0; 
}
```

## 今回のポイント
グラデーションの前面に画像を配置するには工夫が必要です。

```gradationAndPic.css
background: url(表示対象画像), linear-gradient(グラデーション方向, 開始色, 終了色);
```
まずはここまで。

## 参考
[CSSのグラデーション（linear-gradient）の使い方を総まとめ！](https://saruwakakun.com/html-css/basic/linear-radial-gradient)
[MDN](https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient)
postgresのいつも忘れるテーブル操作SQLのtips

随時更新していきたい。

## テーブルに外部キーとなるカラムを新規追加する

```sql
CREATE TABLE work_statuses(
    id serial primary key,
    value varchar(255) not null
);

INSERT INTO work_statuses(value) VALUES ('Wanted');
INSERT INTO work_statuses(value) VALUES ('Ordering');
INSERT INTO work_statuses(value) VALUES ('Done');
INSERT INTO work_statuses(value) VALUES ('Abort');

ALTER TABLE works add column work_status_id integer not null default 1,
    ADD CONSTRAINT works_work_status_id_fkey
    FOREIGN KEY(work_status_id) REFERENCES work_statuses(id) ON DELETE CASCADE;
```
worksテーブルに新たに作成したwork_statusesの関連をつける場合のSQL。
work_status_idカラムを新規で追加し、not nullとdefaultをつける場合、上記のように記述することで1行で記述することが可能。

# おわりに
随時、際どい忘れそうなSQLを書いた場合、追加していく。
Jenkins ふんわり概要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/c51cdde4-4675-0276-b0ea-3d5b6c26fa6c.png)

# はじめに
JenkinsにてRuby on Railsアプリケーションのテスト、デプロイの自動化を実施しました。
そのときに勉強になったことをまとめたいと思います。
ここでは、Jenkinsとは何か、何ができるかについてまとめました。

#### 関連リンク
関連リンクを下記に載せておくので、必要であれば参考にしてください。。

* EC2 で Jenkins 構築する時にやったこと (Railsアプリケーション)
    * https://qiita.com/syukan3/items/cd3b10e469f22147d537
* Jenkins + Backlog + ElasticBeanstalk 連携
    * https://qiita.com/syukan3/items/dd9c8bd0219043343c82

# Jenkinsとは
__Javaで書かれたオープンソースの継続的インテグレーションツール。__

## Java 
Javaをインストールしていないと動作しませんのでご注意ください。

## 継続的インテグレーションツール
__ソフトウェア開発において短期間で品質管理を行う手法。__
コンパイル・テスト・デプロイといったソフトウェア開発のサイクル（ビルド）を頻繁に繰り返し実行することで、問題の早期発見や開発の効率化などが
__CI（Continuous Integration）と表記__されることもあります。

# Jenkinsで何ができるか

__ソフトウェアのビルド、検証、サーバへのインストール等の一連作業を自動化__する事ができる。
作業の開始は手動でも命令可能だが、__イベントをトリガとして__、例えばバージョン管理システムにおけるコミット、cronのような時刻に基づいたスケジューリング、他のビルドの完了、特定のビルドURLによるリクエストといった__様々な方法で起動することができる__。(Wikiより)

個別の具体例となりますが、以下の表のトリガーを実施するとアクション①が自動で実行され、アクション①にエラーがなければアクション②が実行されるというような作業を自動化することができます。

| トリガー | アクション① | アクション② |
|:-:|:-:|:-:|
| Git Commit | テスト | デプロイ |

# まとめ
簡単にですが、Jenkinsについてまとめさせていただきました。
具体的な使用例については、その会社のノウハウとして扱われることも多く、参考になる例を見つけるのが難しいです。
個人的にも勉強中なので、色々と学んでいけたらなと思います。

# 参考
* Jenkins
    * https://jenkins.io/
* Jenkinsをインストールして使ってみよう［Mac／Linux／Windows］
    * https://www.buildinsider.net/enterprise/jenkins/001
* Wikipedia
    * https://ja.wikipedia.org/wiki/Jenkins

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
Qiitaのストック消化を助けるためのTampermonkeyスクリプト

Qiitaにはよい記事がどんどん登場してきますね。そんな良記事すべてに目を通せたら理想的ですが、時間的な余裕がなくて、「ストックしておいて後で読もう」となることも多いはず。そうして溜まっていくストックたち、どれを読んだか分からなくなり、ストック消化へのモチベーションの低下……。ストックというかスタックと化した未読の山を抱えている私みたいな方も多いのではないでしょうか。

せめてストックごとに「読んだ/読んでない」のチェックをつけられたら、ストック未読消化も少しは捗るのではないかと思いました。

そんなわけでTampermonkeyの力を借りてスクリプトを作りました。

![ss01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235258/6b3207de-1fd4-75c7-320d-fed5651eab2b.png)

導入すると、あなたの[ストックのページ](https://qiita.com/stock)にボタンが追加されます。クリックすると、緑色と灰色が切り替わるだけのボタンです。状態はlocalStorageに記録されますので、タブやブラウザを閉じても保持されます。このフラグをどのように扱うかは貴方次第です。私の場合は単純に読んだ記事にチェックをつける運用にしています。

またストックした記事のページにも同様のボタンが表示されます。

画面幅が小さい場合
![ss02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235258/a044e07b-f793-02de-c2f0-554575c36eaa.png)
画面幅が大きい場合
![ss03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235258/d5fcb545-1170-e219-3f67-25664e8549b7.png)

## インストール方法

1. お使いのブラウザに対応した[Tampermonkey](http://www.tampermonkey.net/)をインストールします
2. スクリプトの URL([https://github.com/chromia/qiita-stock-readflag/raw/master/qiita-stock-readflag.user.js](https://github.com/chromia/qiita-stock-readflag/raw/master/qiita-stock-readflag.user.js))にアクセスし、Tampermonkey 用のユーザースクリプトをインストールします。

以上です。感想などありましたら是非コメントください。

## ソースコード

https://github.com/chromia/qiita-stock-readflag
GoogleのAI対策。自分のｗｅｂ記事が、他人から見てどこにあるか。

googleで、自分のIPアドレスで検索していると、人工知能が働いて、自分の書いた記事やブログが、他人から見てどのような検索順位にあるか、解りません。そこで、他の端末からどのように見えているかを、chromeの拡張機能である、フリーのプロキシ拡張機能を使って、調べます。

ここでは、「<a href="https://chrome.google.com/webstore/detail/betternet-unlimited-free/gjknjjomckknofjidppipffbpoekiipm?utm_source=chrome-ntp-icon"> Betternet Unlimited Free VPN Proxy </a>」を、使います。

chrome ウェブストアで、「betternet unlimited free」と、検索して、インストールします。
操作方法は、適当に検索してください。一杯でてきます。

インストール後、起動して、コネクトして、「<a href="https://www.ugtop.com/spill.shtml"> 確認くん </a>」で、ホスト名や、IPアドレスの、確認をしてください。
github actions rspec


### 成果物

```yml:.github/workflows/ruby.yml
name: Ruby

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest

    services:
      postgres:
        image: postgres:10.3
        ports: ["5432:5432"]
        options: --health-cmd pg_isready --health-interval 10s --health-timeout 5s --health-retries 5
    steps:
    - uses: actions/checkout@v1
    - name: Set up Ruby 2.5
      uses: actions/setup-ruby@v1
      with:
        ruby-version: 2.5
    - name: Install PostgreSQL client
      run: |
        sudo apt-get -yqq install libpq-dev dialog apt-utils
    - name: Build App
      env:
        RAILS_ENV: test
        DATABASE_URL: postgresql://postgres@localhost:5432/postgres?encoding=utf8&pool=5&timeout=5000
      run: |
        gem install bundler:1.16.1
        cd docker/api/api
        bundle install --quiet --jobs 4 --retry 3
        bin/rails db:migrate:reset RAILS_ENV=test
    - name: Build and test with Rspc
      env:
        RAILS_ENV: test
        DATABASE_URL: postgresql://postgres@localhost:5432/postgres?encoding=utf8&pool=5&timeout=5000
      run: |
        cd docker/api/api
        bundle exec rspec
```

```yml:config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password:
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

development:
  <<: *default
  database: myApi_development

test:
  <<: *default
  database: postgres_test
  url: <%= ENV['DATABASE_URL'].gsub('?', '_test?' ) %>

production:
  <<: *default
  database: myApi_production
  username: myApi
  password: <%= ENV['MYAPI_DATABASE_PASSWORD'] %>
  url: <%= ENV['DATABASE_URL'] %>
```

----
### はまった

#### エラー1
PG::ConnectionBad: could not translate host name "postgres" to address: Temporary failure in name resolution

#### 役に立った
https://stackoverflow.com/a/20722229
> postgresql://[user[:password]@][netloc][:port][/dbname][?param1=value1&...]

stackoverflowを見る限り、localhostにしておけばいいっぽい。
てことで、これでなおった


```
before
      env:
        RAILS_ENV: test
        DATABASE_URL: postgresql://postgres@postgres:5432/postgres?encoding=utf8&pool=5&timeout=5000
----------
after
      env:
        RAILS_ENV: test
        DATABASE_URL: postgresql://postgres@localhost:5432/postgres?encoding=utf8&pool=5&timeout=5000
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253014/35b5f9c8-f3f2-1801-b55d-bae7f04c98d7.png)

----
#### エラー2
Could not locate Gemfile

#### 解決策
Gemfileが存在するdirectoryに移動する

```
        cd docker/api/api
```

#### エラ-3

---


### 戦闘
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253014/c71a8d96-ca1e-8245-1fb4-d2fbc470ae2e.png)

エラーですぎ。うれしい。エラーでないと死ぬ
OSが本番環境と違うと思った。とりあえずOK
https://rocky-plateau-44026.herokuapp.com/
https://github.com/kajirikajiri/rails-api
JavaFXでルートノードから下位ノードに向かって辿る 〜道順は知ってるんだけど〜

現在、JavaFXを使用してアプリを作成しているのですが、動的にノード(コンポーネント)を削除や追加する必要が出てきました。
しかし、ルートノードから下位ノードに向かってノードを辿っていく情報がほとんど無く、試行錯誤した方法を記載します。(ひとまず、調べたコンポーネントのみ記します)

**環境**
OS : macOS X Catalina
統合開発環境 : Eclipse 2019-12
Java : AdoptOpenJDK 11.0.5
JavaFX : 11.0.2
SceneBuilder : 11.0

```text:NodeTree
1: AnchorPane ←ルートノード ①
2: ┣━━━ MenuBar
3: ┣━┳━ AnchorPane　②
4: ┃ ┗━┳━ SplitPane ←Horizontal(左右分割)　③
5: ┃   ┣━━━ AnchorPane
6: ┃   ┗━━━ PieChart　④
7: ┗━━━ AnchorPane
```

① ⇢ ② ⇢ ③ ⇢ ④ の順にノードを辿っていきます。

```java:sample.java
 1: public Scene setPieChart(Stage stage) {
 2:		Scene scene = stage.getScene();
 3:		AnchorPane ap2 = (AnchorPane)this.scene.getRoot(); ①
 4:		AnchorPane ap3 = (AnchorPane)ap2.getChildren().get(1); ②
 5:		SplitPane spHorizontal = (SplitPane)ap3.getChildren().get(0); ③
 6:		ObservableList<?> ol = (ObservableList<?>) spHorizontal.getItems(); ③
 7:		PieChart pieChart = (PieChart)ol.get(1); ④
 8:
 9:		return scene;
10: }
```

注意点として、SplitPaneの子ノードを取得しようとした場合、5行目のように`getItems()`で`ObservableList<?>型のオブジェクト`を取得します。
この例で言うと、`ObservableList<?>型のオブジェクト`の中には0番目の要素に`NodeTreeの②のAnchorPane`、1番目の要素に`PieChart`がセットされています。なので、sample.javaの7行目でol.get(1)しているのはそのためです。

あともうひとつ、これは動作上の注意点なのですが、PieChartの親ノードをAnchorPaneなどのコンテナにすると、描画したグラフがウィンドウのリサイズに合わせて拡大縮小されなくなります。そのため、SplitPaneの直下にPieChartを配置しています。

他に引っかかりそうなところとしては`ScrollPane`があります。
具体的に、ScrollPaneの子ノードがAnchorPaneとするとAnchorPaneの取得方法は以下のようになります。

```java:sample2.java
 1:	AnchorPane anchorPane = (AnchorPane) scrollPane.contentProperty().get();

```

とりあえず調べたところはここまでです。
また、開発しているときに調べる必要が出てきた場合には追記していこうと思います。

自分の備忘録も兼ねてですが、皆さんのお役に立てば幸いです。
cscの作法 その33 DrawLine

#概要

cscの作法、調べてみた。
練習問題やってみた。

#練習問題

マウスで線を描け。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1167fbf1-0352-5ea7-41c1-66f078efb87f.png)


#サンプルコード


```
using System;
using System.Windows.Forms;
using System.Drawing;

class form1: Form {
	int px = 0;
	int py = 0;
	Bitmap bmp;
	form1() {
		Text = "oe";
		ClientSize = new Size(300, 300);
		bmp = new Bitmap(300, 300);
		this.MouseMove += new MouseEventHandler(mouseMove);
		this.MouseDown += new MouseEventHandler(mouseDown);
	}
	void mouseDown(object sender, MouseEventArgs e) {
		if (e.Button == MouseButtons.Left)
		{
			px = e.X;
			py = e.Y;
		}
	} 
	void mouseMove(object sender, MouseEventArgs e) {
		if (e.Button == MouseButtons.Left)
		{
			Text = "mouse: (" + e.X + ", " + e.Y + ")";
			Graphics g = Graphics.FromImage(bmp);
			Pen p0 = new Pen(Color.Red);
			p0.Width = 3;
			g.DrawLine(p0, px, py, e.X, e.Y);
			px = e.X;
			py = e.Y;
			Invalidate();
		}
	}
	protected override void OnPaint(PaintEventArgs e) {
		Graphics g = e.Graphics;
		g.DrawImage(bmp, 0, 0);
		base.OnPaint(e);
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}





```

以上。
cscの作法 その32 ニューラルネットワーク

#概要

cscの作法、調べてみた。
tensorflow.jsでxorを学習して、バイアスとウェイトを取り出して、c#で推論してみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/1aa63d1f-e5ef-985e-d917-a144654fb1c5.png)

#サンプルコード


```
using System;
using System.Windows.Forms;
using System.Drawing;

class form1: Form {
	form1() {
		Text = "nn";
		ClientSize = new Size(200, 200);
		double[][] w1 = {
			new double[] {-0.8971094, 1.4029436, -1.3633214, -0.775598, 1.2531579, 1.0529767, 1.3460118, -1.5597397},
			new double[] {1.57735, -1.1888924, 1.6184694, -0.5399966, -0.9783241, 0.9480417, 0.9573314, -1.1738404}
		};
		double[] b1 = {0.428151, 0.7863605, 0.8015493, 0.8869765, 0.6552361, 0.3099377, 0.1825127, 0.0495548};
		double[][] w2 = {
			new double[] {-1.7588012},
			new double[] {-1.5193572},
			new double[] {-1.1239196},
			new double[] {0.8726832},
			new double[] {-1.7272931},
			new double[] {1.4907871},
			new double[] {1.1091278},
			new double[] {-0.9800876}
		};
		double[] b2 = {0.1271933};
		string res = "";
		for (int i = 0; i < 4; i++)
		{
			int k;
			int l;
			double[] x = {0, 0};
			double[] y = {0};
			double[] h = {0, 0, 0, 0, 0, 0, 0, 0};
			if (i == 0)
			{
				x[0] = 1.0;
				x[1] = 0;
				res += "1, 0 = ";
			}
			if (i == 1)
			{
				x[0] = 0;
				x[1] = 1.0;
				res += "0, 1 = ";
			}
			if (i == 2)
			{
				x[0] = 1.0;
				x[1] = 1.0;
				res += "1, 1 = ";
			}
			if (i == 3)
			{
				x[0] = 0;
				x[1] = 0;
				res += "0, 0 = ";
			}
			for (k = 0; k < 2; k++)
			{
				for (l = 0; l < 8; l++)
				{
					h[l] += x[k] * w1[k][l];
				}
			}
			for (l = 0; l < 8; l++)
			{
				h[l] += b1[l];
				h[l] = tanh(h[l]);
			}
			for (k = 0; k < 8; k++)
			{
				for (l = 0; l < 1; l++)
				{
					y[l] += h[k] * w2[k][l];
				}
			}
			for (k = 0; k < 1; k++)
			{
				y[k] += b2[k];
				y[k] = sigmoid(y[k]);
			}
			res += y[0].ToString() + "\r\n";
		}
		MessageBox.Show(res);
	}
	double tanh(double x) {
		double a = Math.Exp(x);
		double b = Math.Exp(-x);
		return (a - b) / (a + b);
	}
	double sigmoid(double x) {
		return 1.0 / (1.0 + Math.Exp(-x));
	}
	[STAThread]
	public static void Main() {
		Application.Run(new form1());
	}
}




```

以上。
初心者によるプログラミング学習ログ 203日目

# 100日チャレンジの203日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

203日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>203日目<br><br>udemyでgit、webサイトコーディング、css+メディアクエリ<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a><a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1213212252381171712?ref_src=twsrc%5Etfw">January 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Simulinkで機械学習モデルを使いたい

# はじめに
Simulinkでガウス過程回帰モデルを用いたいと思ったのですが，少しハマったのでメモ．

# やりたいこと
オフラインで，fitrgpコマンドで作成したガウス過程回帰モデルを作成した．
このモデルをMATLAB function ブロック内で用いて，変数Yを推定したい．

# 解決方法
1) XからYを予測するガウス過程回帰モデルを作成したら，`saveCompactModel`でモデルを保存する．

```matlab:gpr_predict.m
gprMdl = fitrgp(X, Y);
saveCompactModel(gprMdl, 'GPRModel');
```
2) (Simulink内 MATLAB Function blockにおいて）loadCompactModelでモデルを呼び出して`predict`でYを計算する．

```matlab:predict_Y
gprMdl = loadCompactModel('GPRModel');
Y = predict(gprMdl, X_online);
```

公式のページは以下を参照．
[機械学習モデルの予測をコマンド ラインで行うコードの生成](https://jp.mathworks.com/help/stats/code-generation-for-prediction-of-machine-learning-model-at-command-line.html)


# ハマった方法
普通にmat ファイル形式でsave(gprMdl, 'GPRModel')とやると，Simulinkでは扱えない形式になってしまう．
具体的には，以下のエラーが出てくる．
> 調整不可プロパティをもつクラスは外部関数からの出力としてサポートされません

なんのことやら，という感じ．

データストアメモリを用いてもグローバル変数にしようとしても，だめだった．
サポートされているデータ型しか受け付けないらしい．

以前Simulinkで困ったときに，コード生成に対応しているかどうかが重要だったような・・・という記憶を頼りに調べたら上のサイトを見つけることができ，無事に解決したが，小一時間程度要してしまった．


Simulinkを用いるときにはコード生成に対応しているかどうかをチェックする癖をつけないと，また同じような問題にトラップされそう・・・
今後も気をつけよう（自戒）．
Dockerが本番環境使用に厳しい理由


Dockerはとてもシンプルで動作も軽いため開発/テスト/デモ環境などで使用している方も多いと思います。しかし本番環境ではどうでしょうか。
Webサーバーのようにいくつも稼働させて、何台かダウンしてもOKのような環境では有効だと思いますが、そのような用途ばかりではありませんよね。


Dockerをモノリシックな本番環境で利用できるか検証した際、気になった点をメモしましたので、一例としてご参考いただければと。



# 理由その１．MACアドレスが固定できない。

Dockerは非常にインターフェース周りで柔軟な構成が簡単に組めることが魅力ですが、まだまだ改善の余地があります。

Dockerはインターフェースが一つの時は以下のようにMACを指定できます。

```
docker run -itd --name hoge -p 8060:8080 --network=net1 --mac-address 00:00:00:00:00:31 --ip 172.19.0.6
```

しかしながら、**2つ以上インターフェースがある場合**、MACを指定できません。起動後、後から追加/変更する場合もMACの指定はできません。docker network connect コマンドオプションにはMACを指定するオプションがないためです。(ここではコマンドで説明しましたが、composeを使用しても同様だと思います。)

```
docker network connect --ip 172.20.0.6 net2
```

本番で仮想環境を利用する際、MACを固定することは意外に重要です。
例えばMACアドレスがNodeを識別する方法として利用されている場合、コンテナが昨日と違うMACアドレスで起動してしまうとインストールされているアプリケーションがライセンスされたノードで起動していないと判断して停止する場合もありえます。

よって、以下のような条件の環境ではDockerは本番に不向きと言えそうです。

- **インターフェースを複数利用する。**
- **MACアドレスを利用している。**




# 理由その２．仮想ネットワークルーティング機能が弱い。

皆さんご存知の通り、Dockerで -p コマンドを使ってポートフォワードを行うことができます。(dockerではpublishと呼ばれているようです）

これは内部的にはホストの`iptables`を利用しています。そのためiptablesの機能的、パフォーマンス的限界がDockerのネットワーキングの限界になります。

以下、パフォーマンステストをした際、気になった点をまとめました。

　

- **パケットロスが見られる。**

今回のテストにおいて、ポートフォワードされないパケットが見られました。こちらはテスト環境に依存するかもしれませんので、一例として「そういうことがあった」ぐらいに気に留めてもらえればと思います。ここでもこれ以上、詳しく触れません。

　


- **-pコマンドを利用してportをマップする機能は若干不安定。**

まずは簡単に機能の説明を。
ご存知の通り、Dockerでは `-p <ホストのポート>:<コンテナのポート>`のように指定してpublishすることができます。

```
docker run -p 80:8080 nginx
```
上記の例ではホストの80ポート宛てのパケットはnginxが稼働しているコンテナの8080ポートにフォワードされます。


実はこの設定は`-p 13000-15999:13000-15999`のように範囲を指定して大量のポートをマッピングすることができます。

このポートのレンジが数百程度であればよいのですが、数千を超えてくると**Dockerがメモリを食い尽くしてコマンドが失敗します**。
(簡単に再現しますので、お手持ちのDockerで是非試してみてください。メモリ無くなりますが。。。)

理由は以下のような点が挙げられます。

1. iptablesへ1ポートづつマッピングを追加している
2. 1ポートのマッピングにつき、一定量のメモリを確保するプロセスが起動する

　
よって、**メディアサーバー、UC、TURN、P2P**など大量のポートをサービスに使用する場合、ではDockerは現在の所、不向きと言えるかもしれません。



回避策としては以下のようなものがあります。

回避策1.メモリを食い尽くす挙動を止める。
回避策2.大量のポートをマップする場合はpublish機能は使わない。host networkを使う。


回避策1はStackOverflowなどで有志が設定いじって回避しようと頑張っていますが、やり方によって副作用があるかもしれませんのでお勧めしません。

回避策2については、私の師でもあるDocker Captain、Bret Fisherに訊いたところ、このように使うなと言われました。
ホスト<->複数コンテナでの柔軟なポートマッピングがそもそもしたいんですけど。。。

コミュニティに対してはネットワーク周りの改善してくれと今後も言っていく予定です。

お手軽な仮想スイッチやルーターの機能があればいいな～。


 
　
何かフィードバックありましたら是非よろしくお願いします。
今後も気になった点はアップデートしていく予定です。
JavaScriptでfor文（foreach）内でのgetElementsByClassNameの使用法

##はじめに
趣味で作っているツイッタークローンにおいて、ツイート一覧にマスオーバーさせると背景色が変化するjsの処理を書きたかった。

##JSをあてるPHPファイル

3行目のtweetcardが対象のclass名です。
<font color="red">注）実際は生のphpファイルではなくテンプレートエンジンのbladeを使用しています。


```home.php
@if ($posts)
  @foreach($posts as $post)
    <div class="card tweetcard">
      <div class="card-body alert tweet">
        {{ $post->name }}
        {{ $post->created_at }}
        <br>
        {{ $post->content }}
      </div>
    </div>
```
##間違った書きかた
```samle.js
const tweetcard = document.getElementsByClassName('tweetcard');

  //クリックイベントで背景色を変える
  tweetcard.addEventListener('mouseenter', () => {
      tweetcard.style.backgroundColor  = "#e6ecf0";
  }, false);

}
  //クリックイベントで背景色を戻す
  tweetcard.addEventListener('mouseleave', () => {
      tweetcard.style.backgroundColor = "white";
  }, false);
}
```

エラーが出ました。
リファレンスを確認してみます。下記抜粋。

 >getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の<font color="red">配列風オブジェクト</font>を返します。　引用元：MDN web docs

getElementsByClassNameで取得した要素は配列だったのですね！

__だったらfor分で回してあげればいいですね。__

##正しい書き方
```samle.js
const tweetcard = document.getElementsByClassName('tweetcard');

//mouseenter
for(let i = 0; i < tweetcard.length; i++){

  //クリックイベントで背景色を変える
  tweetcard[i].addEventListener('mouseenter', () => {
      tweetcard[i].style.backgroundColor  = "#e6ecf0";
  }, false);

}
//mouseenter
for(let i = 0; i < tweetcard.length; i++){

  //クリックイベントで背景色を戻す
  tweetcard[i].addEventListener('mouseleave', () => {
      tweetcard[i].style.backgroundColor = "white";
  }, false);
}
```

これでマウスをかざした領域の背景色が変更され、マウスを外せば背景色が元に戻るようになりました。

##参考
[MDN web docs](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName)
matplotlibで、2軸、3軸でグラフを描画する


matplotlibでy軸を複数持たせる方法です。
ax2 = ax1.***twinx()***
で複数の軸を持つことが出来ます。


# テスト用データ
``` python
x=[0,1,2,3]
y1=[1,2,3,4]
y2=[10,25,30,45]
y3=[150,200,350,400]
```

# 2軸でプロット
### ソース
``` python
import matplotlib.pyplot as plt

fig, ax1 = plt.subplots( )
ax1.plot(x,y1 ,"b-")
ax1.set_ylabel("y1")

ax2 = ax1.twinx()

ax2.plot(x,y2  ,"r-")
ax2.set_ylabel("y2")

plt.show()

``` 
### 結果
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/e2fa5aa0-ab0a-ed94-621a-07f0623709d8.png)

### 参考
[Different scales on the same axes](https://matplotlib.org/gallery/subplots_axes_and_figures/fahrenheit_celsius_scales.html#sphx-glr-gallery-subplots-axes-and-figures-fahrenheit-celsius-scales-py)


# 3軸でプロット
### ソース
``` python
import matplotlib

fig, ax1 = plt.subplots( )
ax1.plot(x,y1 ,"b-")
ax1.set_ylabel("y1")

ax2 = ax1.twinx()
ax3 = ax1.twinx()

ax2.plot(x,y2  ,"r-")
ax2.set_ylabel("y2")

ax3.plot(x,y3  ,"c-")
ax3.set_ylabel("y3")

ax3.spines["right"].set_position(("axes", 1.2))


plt.show()
```
### 結果
![ダウンロード (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/ecf32c64-0d3d-b601-14e3-8617ef20ea83.png)

### 参考
[Multiple Yaxis With Spines]
(https://matplotlib.org/3.1.0/gallery/ticks_and_spines/multiple_yaxis_with_spines.html)
vscode 重い

# 直し方
1. vscodeで `cmd + ,` or `ctrl + ,`
1. `auto save`を検索
2. 一番上に出てくるセレクトボックスを選択
1. `afterDelay`->`onFocusChange`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253014/15493dff-2e67-215c-ce77-a9fba22b8edb.png)

# やったこと
## 修正後
エディターからフォーカスが外れたら自動保存にした。
`例` 編集中のvscode以外のウィンドウをクリックした場合に自動保存。
## 修正前
1秒ごとに自動保存していた。
`例` エディターで文字入力後、１秒経過すると保存

# 原因(自分の場合)
dockerでnuxtを立ち上げていた
ファイルをvscodeで編集していた
vscodeの自動保存が有効だった
一文字編集する度に自動保存が実行される->nuxtがhotreloadする->更新しまくって遅い
Fragment内で端末の戻るボタンを押した際の制御を行う

自分が作っているアプリで端末の戻るボタンを制御する必要があり、Android Developers の公式リファレンスに簡単に制御する方法が載っていたのでその備忘録。

#実装
基本的に[こちら](https://developer.android.com/guide/navigation/navigation-custom-back)に書かれているのですが、以下の手順を行ます。

1.  Fragment 内で `activity` から `onBackPressedDispatcher` のインスタンスを取得

2.  `onBackPressedDispatcher#addCallback` に `LifecycleOwner` と `OnBackPressedCallback` を渡す。


```kotlin
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        activity?.onBackPressedDispatcher?.addCallback(this, object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                // ここで戻るボタンがタップされた時の処理を行う。
            }
        })
    }
```

#終わりに
AndroidX が出る前は端末の戻るボタンを制御する際は結構めんどくさかったのですが、今は Fragment からも操作できるようになっていてとても簡単だなと思いました。
相変わらず Android が進化していて開発していてとても楽しいです。☺️
AWS Cloud9に繋がらなくなった場合の対処


Cloud９を使用していてenvironmentに接続しようとしたら「connecting...」と表示されたまま繋がらなくなった。
ブラウザのポップアップブロックの設定やキャッシュ・Cookieの削除などいろいろやってみたが下記の対処をやったら直った。

##前提
Cloud9の開発環境作成後の状態（“Create environment”実行後）
使用ブラウザ：Google Chrome

##対処法
インスタンスを一旦停止する。

＜停止方法＞
サービス　→　コンピューティングの「EC2」をクリック
<img width="1137" alt="スクリーンショット 2020-01-04 2.10.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517641/550306d2-ab24-e3d5-66c6-3c89cccd50ae.png">

インスタンス　→　インスタンス　→　対象のインスタンスにチェックを入れる
アクション　→　インスタンスの状態　→　停止
<img width="960" alt="スクリーンショット 2020-01-04 2.09.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517641/89bd5bd3-fe69-1533-73fa-dc59f0280a31.png">
CRUDとは

# CRUDとは
- Create
- Read
- Update
- Delete

データベースを使ったWebシステムで用いられる最低限の機能

# Create
**入力画面**

- 入力欄を用意
- 入力された値を$_POSTで取得し、INSERT文に埋め込む

# Read

**一覧画面**

- SELECT文でデータを取得
- 取得したデータをループで出力

**詳細画面**

- URLパラメータを使用する
- SELECT文にidを埋め込む
- idにフィルターをかける(例.0以上であること、数字であること)

**ページネーション**

- URLパラメータを使用する
- ○件目から△個データを取得するSELECT文を用意
    - `SELECT * FROM tables LIMIT ◯,△;`

# Update

**編集画面**

- 編集画面のファイルとUPDATE文記載のファイルを用意
- 編集画面のファイル
    - SELECT文にidを埋め込む
    - idにフィルターをかける
    - 入力欄にデータを出力する
- UPDATE文記載のファイル
    - UPDATE文にidと更新データを埋め込む

# Delete

- URLパラメータを使用する
- DELETE文にidを埋め込む
bazelでcarthageで入れたframeworkをimportする

Carthageのframeworkの直下にBUILDを置くと便利そう。

```python:Carthage/Build/iOS/BUILD

package(default_visibility = ["//visibility:public"])

load(
    "@build_bazel_rules_apple//apple:apple.bzl",
    "apple_dynamic_framework_import",
    "apple_static_framework_import",
)

apple_dynamic_framework_import(
  name = "Closures",
  framework_imports = glob(["Closures.framework/**"]),
)

```

こんな感じ。visibilityをpublicにしないとアプリのBUILDから参照できないので注意
あとはアプリ側のBUILDはこんな感じ

```BUILD
swift_library(
    name = "Sources",
    srcs = glob(["*.swift"]),
    data = [
        "Base.lproj/LaunchScreen.storyboard",
        "Base.lproj/Main.storyboard",
    ],
    deps = [
        "//Carthage/Build/iOS:Closures"
    ]
)
```
『アジャイル開発とスクラム』（翔泳社）レビュー

<!-- # 『アジャイル開発とスクラム』を読んで -->
本記事では、[『アジャイル開発とスクラム 顧客・技術・経営をつなぐ協調的ソフトウェア開発マネジメント』（翔泳社）](https://www.amazon.co.jp/dp/B00DIM66P0/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)の内容と、個人的な所感をまとめました。

私自身、過去に３ヶ月程、アジャイル開発の一種であるスクラムの開発チームとして活動した経験があり、現在アサインされているプロジェクトでもアジャイル開発を取り入れています。本書を読むことによって、**アジャイル開発とスクラムの関係性**や、**アジャイル開発を取り入れることの意義**について、改めて勉強することができました。これからアジャイル開発について学びたい人にとって、オススメできる一冊だと思います。

## 内容
本書は以下の３部で構成されています。

第１部： アジャイル開発とスクラムの解説
第２部： アジャイル開発を導入したプロジェクトの事例と、現場の方々へのインタビュー
第３部： アジャイル開発とスクラムの意味

第１部では、**アジャイル開発とスクラムの関係性**や、**スクラムにおけるメンバーの役割・手法群（プラクティス）**について説明しています。第１部を読むことによって、**アジャイル開発の全体像**や**スクラムの利点**について大まかに理解することができると思います。もし、他の書籍でアジャイル開発について勉強されたことのある方であれば、読み流していただいても差し支えないでしょう。

第２部では、**リクルート、楽天及び富士通のアジャイル開発での実際の取り組み**を紹介しています。従来のウォーターフォール型の開発では解決が難しい課題（**スピードが求められる開発**や、**要件が不確実な状況での開発**）に対して、**アジャイル開発を取り入れることによって解決した事例**が書かれており、今後チームにアジャイル開発を導入していきたいという人にとって、興味深い内容であると思います。

第３部では、**アジャイル開発とスクラムの持つ意味**について考察しています。ソフトウェア開発を行うためのアジャイル開発という視点だけではなく、知的創造活動のためのアジャイル開発という視点を提示していて、**アジャイル開発やスクラムに取り入られているテクニックについてより深い知見を得る**ことができます。

## 印象深かったこと
- アジャイル開発は『アジャイルソフトウェア開発宣言』で記された価値観を持つ開発方法の総称
- アジャイル開発が浸透した背景には、**ビジネスの変化の速さに対応するため**
    - **市場投入のスピードを上げること**と、**要求の優先順位に対応する柔軟性**が必要となった
- スクラムはアジャイル開発の一つの方法論であり、世界で最も浸透している手法（採用されているアジャイル方法論のうち52%がスクラム）
- アジャイル開発では、**ビジネス側（顧客）とIT側（開発）のゴールを共有することが可能**
    - 従来の手法では、ビジネス側はシステムによる費用対効果を上げること、IT側は契約を満たすことがゴールとなっており、両社間で綱引きが起こってしまう
    - アジャイル開発では、ビジネス側とIT側が一つのチームとなって、**ビジネス価値の向上**・**顧客満足**・**市場創造**が共同のゴールとなる
- **タイムボックス**の重要性
    - タスクのマネジメントが容易となり、無理な計画を立てることがなくなる

## 所感
アジャイル開発を学ぶための入門書としては、とても読みやすい良書であると思います。
内容に関しては、一冊を通して**従来のウォーターフォール型の開発とアジャイル開発を対比して書かれている**ため、取り上げられる課題が想像がしやすくなっていると感じました。さらに、知識としてのアジャイル開発だけでなく、**「なぜアジャイル開発で行うのか」といった一歩進んだ知見**も得ることができました。
また、文章に関してもアジャイル開発に関する書籍は、英語の書籍を翻訳しているものが多く、初心者にとって読み辛さを感じるものもある中で、本書は日本人が執筆し日本人向けに書かれているので、**文章的な読みにくさは全く感じませんでした**。
しかし、一方で**スクラムの具体的なテクニックに関する記述が乏しい**と感じました。そのため、具体的なテクニックについて勉強したい人にとっては少し物足りなく感じるかもしれません。具体的なテクニックを知りたいという方は、『アジャイルサムライ』や『エッセンシャルスクラム』などを読んで、知識を補完する必要があります。
本書の位置付けとしては、アジャイル開発とスクラムについて体系的に学ぶことができる初歩的な入門書であると思います。
Dockerデーモンを再起動すると、起動中の変更済みコンテナの中身はリセットされるのか

ゼロからDocker imageを作成する場合、検索しても出てこなかったので、自分の備忘録のためにもまとめておく

## 確認したかったこと
**コンテナ内で実装した追加機能をホスト側にマウントしていなかった場合に、デーモンの再起動をしたらコンテナは削除され、設定はリセットされてしまうのか**

これだけ


## 実施したこと
* `Redmine ver.4.0.4`のDokcer imageを作成する(設定ファイルのホストマウントなし)
* バッチでガントチャートの折りたたみ表示を追加する
* Dockerデーモンを再起動する

```
# systemctl restart docker
```

## 結果

コンテナは削除されず、停止された状態でデーモンが再起動する
そのため、コンテナの中で編集したことは削除されない

とりあえずで立てたコンテナがあるマシンメンテのナンスもこれで安心？

マシンの再起動をしても生きているかの確認をしたら、追記したい
vagrant homestead.yamlでマウントエラー

vagrantのlaravel/homesteadで開発環境を練習しようとしていますが、現在エラーがでています。
解決方法がわからないので、ご教授お願い致します。

エラーはvagrant upした時に
homestead: Unable to mount one of your folders. Please check your folders in Homestead.yaml
のエラーがでます。
homestead.yamlは
ip: "192.168.80.10"
memory: 2048
cpus: 2
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/code/Laravel
      to: /home/vagrant/code/Laravel

sites:
    - map: homestead.app
      to: /home/vagrant/code/Laravel/public

databases:
    - homestead

features:

です。
pcはmacです。
何か解決方法ございましたら、ご教授お願いします。
composerのライブラリ達にいつもあてたいパッチがあるならワンシェルにしておこう

LaravelでRFCに軽く違反してるメアドにメール送ろうとしたら、Swift_RfcComplianceExceptionが発生して送れなかったんですよ。
原因は下記だったんですが、vendor配下って普通git管理しないじゃないですか。
https://stackoverflow.com/questions/1490042/swift-mailer-error-swift-rfccomplianceexception-on-an-email-that-actually-work
だから、リリースする時は`composer install`したらパッチをあててやんなきゃいけなくて面倒ですよね。
そういう時は、patchファイルを用意して、patchコマンドを実行ってのもいいですが、なんかサクッと実行したいので、1つのshにするのがおすすめ！

```bash:$PROJECT_ROOT/vendor.patch.sh
#!/bin/bash
patch app/vendor/swiftmailer/swiftmailer/lib/classes/Swift/Mime/Headers/MailboxHeader.php <<'PATCH'
355,357c355,357
<             throw new Swift_RfcComplianceException(
<                 'Address in mailbox given ['.$address.'] does not comply with RFC 2822, 3.6.2.'
<             );
---
> //            throw new Swift_RfcComplianceException(
> //                'Address in mailbox given ['.$address.'] does not comply with RFC 2822, 3.6.2.'
> //            );
PATCH

# 他にpatchが増えたら追記しよう
```

邪魔にならなく控え目でいいでしょ？
CKA + CKAD 合格体験記

## はじめに

以前より興味のあったKubernetesの勉強も兼ねてCKAとCKADを取得しました。

業務ではKubernetesは使ったことはなく、勉強前まではDocker周りをいい感じにしてくれるツールくらいの認識しかなかったのですが、Kubernetesの基本を体系的に学習でき、良い機会になりました。

## 勉強方法

### Kubernetes完全ガイド
他の合格記の方も書かれていますが、こちらの書籍はオススメです。

[Kubernetes完全ガイド](https://www.amazon.co.jp/dp/4295004804)
(2020/01/04現在Kindle Unlimited対象なので、利用者は無料で読めるようです)

こちらの書籍ではコードでKubernetesのマニフェストファイルが紹介されているのですが、試せるものは全て手で書きながら学習しました。
環境はdocker for macに付属しているKubernetesです。
メトリクスやRBAC, NetworkPolicyなど、一部工夫しないと動かないものや、そもそも動作しない等もありますが、そこはスルーしました。
また試験外のこともコンテンツも多いのですが、とても勉強になりますし、試験関係なくKubernetesの初学者にもオススメできると思います。

### Kubernetes The Hard Way Vagrant

CKAの方ではクラスタの管理も出るので、自前でKubernetesクラスタを作成するチュートリアルである[Kubernetes The Hard Way](https://github.com/kelseyhightower/kubernetes-the-hard-way)を行いました。ただ、GCPのプロジェクトの用意が面倒だったので、[Vagrantバージョン](https://github.com/kenfdev/kubernetes-the-hard-way-vagrant)の方を進めました。
初期設定のままだと、API Serverの応答が帰ってこないことが多かったので、masterのメモリ量を増やすことをオススメします。(デフォルトは512MB, 1GBあると安定動作しました)
CKADを取得を目的とする方は、こちらの守備範囲ではないので、やらなくても大丈夫だと思います。

### CKAD-exercises

CKAの受験後、CKADを受けるまでに、[CKAD-exercises](https://github.com/dgkanatsios/CKAD-exercises)を１周しました。
問題文を見てコマンド・マニフェストを書く → 答えを見る　を繰り返して、手を動かすことを重視しました。CKADの受験日前日にこのエクササイズを行ったのですが、このおかげでコマンドが割とスラスラ書けるようになったので、やってよかったと思います。

## Tips

### 雛形作成のコマンド

試験では作成するリソースの量が多いので、ぱっと雛形作成をできると時間短縮になりました。
`kubectl run/create --dry-run -o yaml` で 雛形は簡単に作れます。
特に以下のコマンドはいつでも打てるようになっておくとよいと思います。

```
# Pod
kubectl run $NAME --image=$IMAGE --restart=Never --dry-run -o yaml > pod.yaml
# Deployment
kubectl create deployment $NAME --image=$IMAGE --dry-run -o yaml > deploy.yaml
# Job
kubectl create job $NAME --image=$IMAGE --dry-run -o yaml > job.yaml
# CronJob
kubectl create cronjob $NAME --image=$IMAGE --schedule="* * * * *"  --dry-run -o yaml > cj.yaml
# Service(clusteripはnodeport, loadbalancerなども選べる)
kubectl create service clusterip $NAME --tcp=$PORT:$TARGET_PORT --dry-run -o yaml
```

### JP付きと付かないものの違い

CKA-JPとCKADを受けましたが、どちらも試験問題は多言語対応であり、試験中のチャットが日本語か英語かの違いしかありませんでした。
Linux Foundationのサイバーマンデーセールでは、JPが付いてないもののみだったので、セールを狙う + 英語が読めるのであれば、JPなしで良いと思います。(私はCKA-JPを申し込んだ後にサイバーマンデーセールを知ってCKADを申し込みました……)

## 最後に

CKA 82% CKAD 96% で合格することができました。(合格ラインはCKA 74% CKAD 66%)
合格はできましたが、まだまだ勉強不足だと感じました。（特にCKAの方)
これからも精進していこうと思います。
この記事を読んだ方のお役に立てれば幸いです！

![CKA_Certificate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476941/ace33ec6-959d-c712-8c1d-290a5754875f.png)
![CKAD_Certificate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/476941/3f058ae2-a925-741c-1ed1-255737e9e839.png)
【JavaScript】JavaScript、その前に〜ECMAScriptとは？

# ECMAScriptとは？
読み方は``エクマスクリプト``です。

## 誕生の理由
まず、JavaScriptは``旧Netscape Communications社(1998年、AOLにより買収)``が開発したプログラミング言語です。自社ブラウザである``Netscape Navigator``における使用が想定されていました。

その手軽さから急速に普及していきましたが、登場初期は各ブラウザベンダーによる独自拡張が行われ、ブラウザ間の互換性が極めて低い状態でした。(これは``ブラウザ戦争``と呼ばれています。ちなみに、Microsoft社による拡張は``JScript``と呼ばれています。)

そのため、旧Netscape Communications社は外部団体に標準仕様の策定を依頼しました。その団体が``Ecma International``です。

そしてEcma Internationalにより標準化された仕様が``ECMAScript``です。

## バージョンアップ
引用はこちらの記事からです。仕様策定の流れなども分かりやすく説明されています。
>[ECMAScript](https://jsprimer.net/basic/ecmascript/)

ECMAScriptは、Ecma Internationalにて``ECMA-262``という規格番号で標準化されています。また、拡張機能として``ECMA-357``、``ECMA-402``、``ECMA-404``という規格も存在します。

そして、仕様の更新が「標準」として承認される度に``新しいEdition``がリリースされます。

ただ、最新のECMAScriptの仕様は[GitHub](https://github.com/tc39/ecma262)に公開され、日々更新されています。

>このように更新ごとにバージョン番号を付けずに、常に最新版を公開する仕様のことをLiving Standardと呼びます。

>ECMAScriptはLiving Standardですが、これに加えてECMAScript 2017のようにバージョン番号をつけたものも公開されています。 このバージョン付きECMAScriptは、毎年決まった時期のドラフトを元にしたスナップショットのようなものです。

``Living Standard``は、ブラウザの変化に柔軟に対応するためなんですね。

>ブラウザなどに実際にJavaScriptとして実装される際には、Living StandardのECMAScriptを参照しています。 これは、ブラウザ自体も日々更新されるものであり、決まった時期にしかリリースされないバージョン付きよりもLiving Standardの方が適当であるためです。

ECMAScript2015の策定までは時間がかかっていましたが、ECMAScript2016からは策定プロセスを改善し、リリースまでの間隔も早くなっているそうです。

## 呼び名の違い
ECMAScript2015(ES6)を元に説明します。

ECMAScript2015とES6は同じ仕様を指しています。
どうして数字部分が違うのか気になりました。

### 呼び名の由来
ECMAScript2015の``2015``は仕様の``発行年``を表しています。仕様の名称に年号を使うようになったのは、ECMAScript2015からです。

ES6の``6``は規格の``Edition``を表しています。ES6は``ECMA-262 6th Edition``の口語的な略称です。

### どちらが正しいのか
現在も両方の呼び方が使われていますが、推奨されている呼び方は``ECMAScript2015``もしくは``ES2015``だそうです。

>[Some ECMAScript Explanations and Stories for Dave](http://www.wirfs-brock.com/allen/posts/778)

# Mozillaについて
現在、Netscape関連の資産・権利は、AOLにより設立された非営利団体``Mozilla Foundation``に引き継がれています。

そのため、``Mozilla``の公式サイトでもある[MDN Web Docs](https://developer.mozilla.org/ja/)は、JavaScriptのリファレンスとして真っ先に挙げられています。

# 参考リンク
- [JavaScript](https://ja.wikipedia.org/wiki/JavaScript)
- [ECMAScript](https://ja.wikipedia.org/wiki/ECMAScript)
- [JavaScriptが辿った変遷](https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f)
- [JavaScriptの歴史をざっくりまとめたよ!](https://qiita.com/DeployCat/items/c900a6f62862954d62e0)
- [JavaScript 言語情報](https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources)
Haskellことはじめ 型について

著書 *Haskell ～教養としての関数型プログラミング～*をテキストとして学んでいますがHaskellはガチで初学なので自分の解釈が異なっている場合があるかもしれません。

#### 型を学ぶ
オブジェクト指向畑の住人からすると`型`と言えば`クラス`を連想しますが、先入観をあまり持たずに進めていきます。


- 型を調べる

```
# 文字Aの型を調べる
Prelude> :type 'A'
'A' :: Char

# 文字列TESTの型を調べる
Prelude> :type "TEST"
"TEST" :: [Char]

# 数値1の型を調べる
Prelude> :type 1
1 :: Num p => p
```

- 型宣言  
構文：`変数名::型` または `変数1, 変数2, 変数3 :: 型`  
使用例

```
car :: String
price :: Integer
country, prefecture, city :: String
# カスタム演算子の型定義は括弧で囲む
(+*) :: Integer -> Integer -> Integer
```

- 型セーフな関数定義

```sample.hs
-- BMIを返す関数を定義

-- 型宣言
-- 身長と体重を引数にBMI値を返す
bmi :: Double -> Double -> Double
-- bmi = undefined
bmi = \h -> \w -> w / (h / 100) ^ 2

-- 身長、体重を引数に肥満かどうかを返す
isObese :: Double -> Double -> Bool
-- isObese = undefined
isObese = \h -> \w -> bmi h w >= 25
```

実行結果

```
*Main> bmi 172 60
20.281233098972418

*Main> bmi 172 59
19.94321254732288

*Main> bmi 172 70
23.661438615467823

*Main> bmi 172 80
27.041644131963228

*Main> isObese 172 70
False

*Main> isObese 172 80
True
```

- モジュールの読み込み  
コンソールから  
構文：  
1つ目：`:module 名前空間.モジュール名`   
2つ目以降：`:module + 名前空間.モジュール名`  

ソースファイルから  
`import 名前空間.モジュール名 (関数1, 関数2)` 
`import qualified 名前空間.モジュール名 as エイリアス名`

```sample.hs
-- Maybe型の戻り値Just型またはNothing型から値を取り出す
import Data.Maybe (fromMaybe)
```

実行

```
# 第一引数はデフォルト値を指定
Prelude Data.Maybe> fromMaybe 0 (Just 8)
8
Prelude Data.Maybe> fromMaybe 0 Nothing
0
```
[Data.Maybeリファレンス](http://hackage.haskell.org/package/base-4.12.0.0/docs/Data-Maybe.html)
Qiita初心者によるQiita書き方のメモ

#概要
Qiitaの記事なんか書きたいな～。じゃあ早速やってみようのノリでQiitaの書き方(Markdown記法)のお勉強。

#参考記事
@cloversoft様　「Qiita初心者の投稿方法備忘録」
https://qiita.com/cloversoft/items/0f12f3a739312d35cb8f
とてもわかりやすい記事です。ありがとうございます！

@Qiita様　「Markdown記法 チートシート」
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
ありがとうございます！

#早速Qiita(Markdown)の書き方

###その１　黒枠のやつ
```
ここに黒枠の中身が映ってるよー
```
####書き方
(shift + @)を三つ続ける
 ここに黒枠の中身が映ってるよー
(shift + @)を三つ続ける

###その２　引用
>ここでは引用の中身だよー
>ここでは引用の中身だよー

####書き方
[>]ここでは引用の中身だよー
[>]ここでは引用の中身だよー
↑[]は外して！

###その３　リンク
https://qiita.com
[タイトルを付けて](https://qiita.com)
<a href="https://qiita.com" target="_blank">別ウィンドウで開きたい</a>

####書き方
```
httpa://qiita.com
[タイトルを付けて](https://qiita.com)
<a href="https://qiita.com" target="_blank">別ウィンドウで開きたい</a>
```

###その４　コードの挿入
```C++:main.cpp
#include<iostream>
int main() {
 cout << "Hello Qiita!" << endl;
 return 0;
}
```

####書き方
(shift + @)を三つ続ける + 「言語名:ファイル名」(コードの左上に映りコードに色がのる)
～～コード
～～コード
(shift + @)を三つ続ける

###その５　強調
あいうえお
__あいうえお__
**あいうえお**

####書き方
```
あいうえお
__あいうえお__
**あいうえお**
```
###その６　打ち消し線
~~あいうえおかきくけこさしすせそ~~

####書き方
```
~~あいうえおかきくけこさしすせそ~~
```
###その７　リスト
これはHTMLの記法を使った方が早そう
<dl>
 <dt>リンゴ</dt>
 <dd>ゴリラ</dd>
 <dd>ラッパ</dd>
 <dt>パンツ</dt>
 <dd>翼君の<strong>積み木</strong>の家<dd>
 <dd>襟<dd>
</dl>

####書き方
```
<dl>
 <dt>リンゴ</dt>
 <dd>ゴリラ</dd>
 <dd>ラッパ</dd>
 <dt>パンツ</dt>
 <dd>翼君の<strong>積み木</strong>の家<dd>
 <dd>襟<dd>
</dl>
```

#あとがき
文字を打つのが遅いしタイプミスもいっぱいするし大変だ笑
これからQiitaの記事たくさん書いていくぞ!
Rubyでよく使うライブラリ

Rails
MVCフレームワーク
https://github.com/rails/rails

Jbuilder
JSONのDSL
https://github.com/rails/jbuilder

Spring
パフォーマンス向上
起動されたRailsプロセスのコピーを保持し、次回の起動時に起動プロセスの一部を完全にスキップする
https://github.com/rails/spring

Bootsnap
パフォーマンス向上
Railsの個々のファイルの読込を高速化
https://github.com/Shopify/bootsnap
https://github.com/Shopify/bootsnap/blob/master/README.jp.md

Sidekiq
非同期処理ライブラリ
バックグラウンド処理をシンプルで効率的にする
https://github.com/mperham/sidekiq

Puma
HTTPサーバー
Rails 5から標準となった
https://github.com/puma/puma

Unicorn
HTTPサーバー
Pumaよりパフォーマンスがよさそう
https://github.com/defunkt/unicorn

Rack
HTTPサーバーのラッパー？
https://github.com/rack/rack

Sidekiq-Cron
SidekiqをCron式でスケジューリングするアドオン
https://github.com/ondrejbartas/sidekiq-cron

Mysql2
MySQLクライアント
https://github.com/brianmario/mysql2

rubocop
コードアナライザー&フォーマッター
https://github.com/rubocop-hq/rubocop

RSpec
BDDテストフレームワーク
https://github.com/rspec/rspec

rspec-rails
RSpecのRails版
https://github.com/rspec/rspec-rails

factory_bot
テストデータをDBにかんたんに登録するライブラリ？
https://github.com/thoughtbot/factory_bot

faker
テスト用のフェイクデータ生成ライブラリ
https://github.com/faker-ruby/faker
Railチュートリアルの感想（9.1.1 記憶トークンと暗号化まで）

Ruby on Railsチュートリアルを9章の途中まで進めています。
ここまでで特に疑問になった点を記事にしました。

## いろいろな記述方法を紹介している

「9.1.1 記憶トークンと暗号化」ではクラスメソッドの書き方が紹介されます。

```ruby
class Hoge
  def Hoge.fuga
    # なにかする
  end
end
```

演習問題では更に2つの記述方法が紹介されます。

```ruby
class Hoge
  def self.fuga
    # なにかする
  end
end
```

```ruby
class Hoge
  class << self
    def fuga
      # なにかする
    end
  end
end
```

これらはどれも同じ動作をする記述として紹介されていますが、
「どの記述が正解なのか」はチュートリアルの中では明言されていません。

## Rubyのコーディング規約

では、Rubyの開発現場ではどうやってコードを書いているのか。
例えば、コーディング規約はあるのか。
ぐぐってみると、公式としてのコーディング規約は存在しないようです。

また、この記事で述べられてますが、まつもとゆきひろ氏はコーディング規約には否定的なようです。
https://blog-ja.sideci.com/entry/2018/03/02/120636
>まつもと : コーディング規約を決めてくれないと仕事できないよ！っていうような人もいて、「君、本当に仕事してる？（笑）それは自分で考えようよ」と思っちゃう。ただ、インデントの幅とかスペースかタブかみたいな話は、修正するとdiffが大量に出てくるのでそれは事前に考えておいたほうがいいと思いますね。

氏のブログの古い記事にはコーディングスタイルに触れたものがありました。
これが受け継がれて各開発現場のコーディング規約の基になっているのではと思います。
https://matz.rubyist.net/20041006.html
また、この記事には当時の勤務先だった会社のコーディング規約へのリンクがあり、
その規約ではクラスメソッドには self. を用いるルールになっていました。
一例として参考にできそうです。
https://shugo.net/ruby-codeconv/codeconv.html

## まとめ

チュートリアルではWebサイトを作成しながら、Rubyの記法を少しづつ紹介しています。
それらは開発現場によっては禁じられていたり、人によって書き方が違っているかも知れません。
柔軟に対応できるように、チュートリアルを進めながらRubyの言語仕様を細かく把握しておく必要があると思いました。
sudo kill -9でプロセスを強制終了する

半沢直樹のスピンオフ「[半沢直樹イヤー記念・エピソードゼロ 狙われた半沢直樹のパスワード](https://www.tbs.co.jp/hanzawa_naoki/)」で不正プログラムを止めるために`sudo kill -9`が発動していました。
実際に上記のコマンドを打つと、Linux上でプロセスを強制終了できます。

```bash:bash
$ sudo kill -9 <プロセスID>
```

実際にhttpdを題材にやってみましょう。
まずは`ps`コマンドでプロセスの状態を確認します。

```bash:bash
ec2-user:~/environment $ ps aux | grep httpd
root      4740  0.0  2.1 418668 21736 ?        Ss   15:11   0:00 /usr/sbin/httpd
apache    4749  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4750  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4810  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4831  0.0  1.4 656452 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4852  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
```

次に`kill`コマンドでプロセスIDを指定して強制的に停止します。
今回は上記のうち、プロセスIDが4749のものを止めてみます。
その後`ps`コマンドを打って確認すると、4749がいなくなっていることが分かります。

```bash:bash
ec2-user:~/environment $ sudo kill -9 4749
ec2-user:~/environment $ ps aux | grep httpd
root      4740  0.0  2.1 418668 21736 ?        Ss   15:11   0:00 /usr/sbin/httpd
apache    4750  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4810  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4831  0.0  1.4 656452 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4852  0.0  1.4 459780 14332 ?        Sl   15:11   0:00 /usr/sbin/httpd
apache    4952  0.0  1.4 459780 14332 ?        Sl   15:13   0:00 /usr/sbin/httpd
```

以上のように `sudo kill -9` ではLinuxのプロセスを強制停止できます。

# おまけ
2020年4月から始まる「半沢直樹」第2期の原作になるであろう『ロスジェネの逆襲』は、新興IT企業を取り巻くストーリーですので、技術的にも面白い展開が見られるかも知れませんね。
安全確保支援士の勉強で利用した問題集やサイトのまとめ

2019年秋の安全確保支援士の試験で合格する事ができたので使った参考書やサイトのまとめになります。

#午前Ⅰ試験
######・IPAの過去問
<font color="red">**[おすすめ度：必須]**</font>
過去3年分合計6回分の過去問を間違えなくなるまでやれば十分です。
解説がない為、解説が必要な場合は、問題集を購入したほうが良いですが、YouTubeや他の情報処理試験関連のサイトにも解説がありますのでそちらを参考にしても問題ありません。
➡ https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_mondai.html

#午前Ⅱ試験
######・情報処理安全確保支援士過去問道場
<font color="red">**[おすすめ度：必須]**</font>
スマホやPCから利用できる無料のオンライン問題集のサイトで、間違った問題だけをやり直すなど機能も豊富です。
過去5年分合計10回分の過去問を間違えなくなるまでやれば十分です。
➡ https://www.sc-siken.com/sckakomon.php

#午後Ⅰ・Ⅱ試験
######・IPAの過去問
<font color="red">**[おすすめ度：必須]**</font>
結局、午後試験もIPAの過去問をやりこむのが合格への一番への近道です。
ただ、IPAの過去問は解答の解説がありません。
➡ https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_mondai.html

######・情報処理教科書安全確保支援士（通称上原本）
<font color="red">**[おすすめ度：必須]**</font>
試験範囲に必要な情報としては、説明も細かくこの1冊で十分です。わからない言葉があれば辞書感覚で調べる事も出来ます。
➡ https://www.amazon.co.jp/dp/4798163848/ref=cm_sw_em_r_mt_dp_U_MQ0dEbVQ84532

######・ポケットスタディ 情報処理安全確保支援士
<font color="red">**[おすすめ度：3回以上受験しても合格できない場合]**</font>
午後問題の解答の書き方に特化した参考書です。問題のパターンから解答をパターンを導き出す方法など少し裏技的なものですが、IPA独自の解答の記載方法を学ぶ事ができます。
➡ https://www.amazon.co.jp/dp/479804931X/ref=cm_sw_em_r_mt_dp_U_eS0dEbQ2V0NPD

######・情報処理安全確保支援士「専門知識+午後問題」の重点対策
<font color="red">**[おすすめ度：必須]**</font>
午後問題の解答の詳細な解説がされています。分野ごとに章立てされており、自分の不得意分野、試験出題頻度の低い分野など自分で選んで勉強する事が出来ます。
➡ https://www.amazon.co.jp/dp/4865751831/ref=cm_sw_em_r_mt_dp_U_zT0dEb64ZMNVB

######・情報処理安全確保支援士パーフェクトラーニング過去問題集
<font color="red">**[おすすめ度：重点対策で物足りないと感じた場合]**</font>
掲載されてる過去問は紙面4回分PDFで18回分もあり、問題数、解答の解説数は一番多いです。ただし、IPAと解答が違う場合(間違っていないが言い回しが違う等)がありますの、少し注意が必要です。
➡ https://www.amazon.co.jp/dp/4297109530/ref=cm_sw_em_r_mt_dp_U_oW0dEbGF62YQC

#午後Ⅱの勉強方法について
午後Ⅱの問題文は長文の為、1問解くのに1時間以上かかる場合があります。しかし、解くのに必要な知識は、午後Ⅰと変わりません。その為、午後Ⅱの問題を解くより午後Ⅰの問題を多く解くほうが勉強の効率が良いと思います。

ただし、何度かは午後Ⅱも解いてください。どのくらいの長文で、読むのにどのくらいかかるとか、何文字くらいの解答を求めれているのかなどは確認してください。

私が思う午後の最短の合格方法は、ひたすら午後Ⅰをやる事です。
午後Ⅰ問題を多く解くと、解答のパターンがわかってきますので、過去5年分ぐらいの午後Ⅰの問題と解答を暗記するくらいやりこめば、自然と十分合格できる知識が身につくと思います。
Pillowの最新版7.0.0だとpytorchのtransformが死にます.

タイトルのままでです.

pillowの最新版 7.0.0 にアップグレードしてpytorchのtransformが含まれているコードを動かすと以下のようになります.

```
  File "train.py", line 6, in <module>
    from utils.datasets import *
  File "/home/jun/Desktop/work_space/sportip/hogehoge/utils/datasets.py", line 12, in <module>
    import torchvision.transforms as transforms
  File "/home/jun/.local/share/virtualenvs/hogehoge-IBQiZg8J/lib/python3.6/site-packages/torchvision/__init__.py", line 4, in <module>
    from torchvision import datasets
  File "/home/jun/.local/share/virtualenvs/hogehoge-IBQiZg8J/lib/python3.6/site-packages/torchvision/datasets/__init__.py", line 9, in <module>
    from .fakedata import FakeData
  File "/home/jun/.local/share/virtualenvs/hogehoge-IBQiZg8J/lib/python3.6/site-packages/torchvision/datasets/fakedata.py", line 3, in <module>
    from .. import transforms
  File "/home/jun/.local/share/virtualenvs/hogehoge-IBQiZg8J/lib/python3.6/site-packages/torchvision/transforms/__init__.py", line 1, in <module>
    from .transforms import *
  File "/home/jun/.local/share/virtualenvs/hogehoge-IBQiZg8J/lib/python3.6/site-packages/torchvision/transforms/transforms.py", line 17, in <module>
    from . import functional as F
  File "/home/jun/.local/share/virtualenvs/hogehoge-IBQiZg8J/lib/python3.6/site-packages/torchvision/transforms/functional.py", line 5, in <module>
    from PIL import Image, ImageOps, ImageEnhance, PILLOW_VERSION
ImportError: cannot import name 'PILLOW_VERSION'
```

これの原因は 2020年にリリースされた pillow バージョン7.0.0 のせいです.

https://pypi.org/project/Pillow/7.0.0/

これを回避するためにはpillowのインストール時に前のバージョンを指定すればいいです.

```
pipenv install pillow==6.2.1
```
【Nuxt.js】カスタムディレクティブ基礎編：とりあえず使ってみよう！

# 前置き
<img width="620" alt="スクリーンショット 2020-01-03 18.42.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/99e68ca5-2a8c-092c-39d8-01c12b495704.png">

Vue.jsのカスタムディレクティブをNuxt.jsで！
ローカルverとグローバルverで、
どちらでも使いやすく簡単な例で紹介。
今回は背景色を変えるだけです。

…とはいえfilterはよく使われますが
実際こちらはなかなか見かけませんね。
カスタムディレクティブの良い使い方があれば
教えていただけると嬉しいです…😀

**※併用する場合**
同じディレクティブ名にしてしまうと
ローカルに記載された方が優先されます。
名前は分けましょう！

# ローカルver
directivesで命名した物を
v-{{ name }}で記載するだけ！
今回はdiv全体に背景色をつけるため
divにv-bgを指定しております。

```index.vue
<template>
  <div v-bg>
    <p>divで囲った部分の背景が変わる</p>
  </div>
</template>

<script>
export default {
 directives: {
   'bg': {
     bind(el, binding, vnode) {
       el.style.backgroundColor = 'lightgreen';
     }
   }
 },
}
</script>
```

# グローバルver(JSファイル)
**◾️パターン1**
・/pluginsにjsファイルを追加
・nuxt.config.jsのpluginsに記載
・template内にv-{{ name }}を書くだけ！

```bash:file
pages/
--| index.vue

plugins/
--| bg.js

nuxt.config.js
```


```bg.js
import Vue from 'vue'

Vue.directive('bg', {
 bind(el, binding, vnode) {
   el.style.backgroundColor = 'lightgreen';
 }
})
```

```nuxt.config.js
plugins: [
   '~plugins/background.js'
 ],
```

```index.vue
<template>
  <div v-bg>
    <p>divで囲った部分の背景が変わる</p>
  </div>
</template>
◾️パターン2-1
jsで直接値の指定はせず、
使用箇所で好きな値を指定できます。
```

```bg.js

// 変更前
el.style.backgroundColor = 'green';

// 変更後
el.style.backgroundColor = binding.value;
```

```index.vue
// 変更前
<div v-bg>

// 変更後
<div v-bg="'green'">
```

**◾️パターン2-2**
<img width="760" alt="スクリーンショット 2020-01-03 19.04.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/88ccb6d7-b468-9bec-deeb-007983a2c2ec.png">
argを使用した場合です。
argはpropsのようなイメージですね。
いくつもデータを渡せます♪
https://jp.vuejs.org/v2/guide/custom-directive.html#ディレクティブフック引数

```bg.js
import Vue from 'vue'

Vue.directive('bg', {
 bind(el, binding, vnode) {
   // バインドされたargが文字列backgroundだった場合の処理
   if (binding.arg === 'background') {
     el.style.backgroundColor = binding.value;
   // そうでない場合の処理
   } else {
     el.style.color = binding.value;
   }
 }
})
```

```index.vue
<template>
  <div>
    // argは:background部分
    <div v-bg:background="'lightgreen'">
      <p>背景が変わる</p>
    </div>
    <div v-bg:color="'green'">
      <p>文字色が変わる</p>
    </div>
  </div>
</template>
```

**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab
深さ優先探索

深さ優先探索
ノードからノードへ下へ降りていき、突き当たったら分岐点まで戻り、
また未開のノードへと降りていくアルゴリズム。
再帰を使ってコードを書きました。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497312/71a41975-46c0-c2e8-dbb8-30a32fbe1a4b.png)
具体例として上記の木に対して深さ優先探索をしました。

```Python3
#python3
#sys.setrecursionlimit(10000) #再帰の回数上限変更 (デフォルト1000回)

# 各ノードから,どのノードにエッジ(枝)が伸びているか調べてリスト化する (隣接リスト)
edge = [[1, 2], [0, 3, 4], [0, 5], [1], [1], [2]]

def dfs(now, before=-1):#before:一つ前に通ったノード
    if before==-1:
        print(now)
    for c in edge[now]: #c:子
        if not c ==before: #無限ループを防ぐ
            print(c)
            dfs(c, now) #再帰

dfs(0)
```
出力結果

```
0
1
3
4
2
5
```
ありがとうございました。
GitHub Pages でReact Appを公開

# はじめに

`create-react-app`で作成したアプリを`GitHub Pages`で公開してみます。

# リポジトリの作成

```sh
$ yarn create react-app myapp --template typescript
$ cd myapp
```

```sh
$ git commit -m "first commit"
$ git remote add origin git@github.com:pure-adachi/myapp.git
$ git push -u origin master
```

# `gh-pages`でデプロイ

## `gh-pages`インストール

```sh
$ yarn add -D gh-pages
```

```json:package.json
  // ...
  "homepage": "http://pure-adachi.github.io/myapp",
  "scripts": {
    // ...
    "deploy": "yarn build && gh-pages -d build"
  },
```

## デプロイ

```sh
$ yarn deploy
```

何度かパスワードを聞かれました。

コミット&プッシュせずに、更には`master`ブランチですがデプロイ出来ました。

自動で`gh-pages`ブランチが作成されて、`GitHub Pages`のブランチ設定も行われます。

`-b`オプションでブランチの指定が出来ますが、`Github Pages`で配信可能なブランチは`master`か`gh-pages`なので
デフォルトの`gh-pages`ブランチを使うことにしました。

![スクリーンショット 2020-01-03 22.34.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304414/aa791a46-726e-d0c2-e272-cae9b97ddf58.png)

http://pure-adachi.github.io/myapp にアクセスすると動作が確認出来ました。

![スクリーンショット 2020-01-03 22.34.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304414/0cce50f8-251a-bcdf-a074-10f36d0734d8.png)


# 終わりに

簡単に出来ましたね

# 参考文献

- [GitHub ページを React でつくる (基礎編) - Qiita](https://qiita.com/KoheiShingaiHQ/items/b4bf8dd47a99e5d14caf)
- [GitHub PagesにReactアプリをデプロイする方法 - Qiita](https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf)
- [GITHUB.IO(GITHUB-PAGES)でMASTER以外のブランチをホストしたい - GITHUB.IO](https://sin-tanaka.github.io/blog/github.iogithub-pages%E3%81%A7master%E4%BB%A5%E5%A4%96%E3%81%AE%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92%E3%83%9B%E3%82%B9%E3%83%88%E3%81%97%E3%81%9F%E3%81%84/)