OmniAICreator/Qiita-1.07M huggingface dataset:
Laravelでmigrate出来なかった(できた)

# どうしたの
[こちらの記事](https://beiznotes.org/making-task-list-with-laravel55-1/)を参考にさせていただきながらLaravelのチュートリアルを進めている最中、migrateをしようとしたところ

```terminal:terminal
SQLSTATE[HY000] [2054] The server requested authentication 
method unknown to the client 
(SQL: select * from info rmation_schema.tables where 
table_schema = homestead and table_name = migrations)
```

というエラーが出て困ったので、その解決ログ。
環境は以下の通り。
- macOS Mojave 10.14.5
- MySQL 8.0.16 
- Laravel 5.5.46(環境の違いが怖かったので上記記事と同じバージョン)

# 原因
どうやらMySQL8.0.4以降は認証方式が従来のものから変更されているらしく、それが原因みたい([こちらの記事を参考にさせて頂きました](https://qiita.com/ucan-lab/items/3ae911b7e13287a5b917))  
という訳で認証方式を変更する。

まずmysqlにログインしてから(参考記事の通りだとrootでログイン、各環境に合わせてください)

```terminal:terminal
$ mysql -uroot
```

以下のコマンドで対象ユーザの認証方式を変更する。

```terminal:terminal
mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '';
```

今回はユーザ名が"root"、ホスト名が"localhost"、パスワードが""(空文字列またはnull)だったので上記で変更できた。より一般的には

```terminal:terminal
mysql> ALTER USER 'username'@'hostname' IDENTIFIED WITH mysql_native_password BY 'password';
```

で変更できるみたい(間違ってたらごめんなさい)。

ユーザー名は以下で確認しましょう。

```terminal:terminal
mysql> SELECT user, host, plugin FROM mysql.user;

+------------------+-----------+-----------------------+
| user             | host      | plugin                |
+------------------+-----------+-----------------------+
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | mysql_native_password |
+------------------+-----------+-----------------------+
```

これを見るとroot以外の認証方式がcaching_sha2_passwordという形式になってるのが分かりますね。それとうまくrootの認証方式を変更できていることもわかります。


上記の通り変更してから、

```terminal:terminal
mysql> exit;
```

でMySQLからログアウトする。その後もう一度migrateを行う。

```terminal:terminal
$ php artisan migrate
```

すると

```terminal:terminal
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
Migrating: 2019_07_11_151815_create_tasks_table
Migrated:  2019_07_11_151815_create_tasks_table
```

できた！！
最後にちゃんと上記の通りtableが作成されているか確認しておきましょう。

```terminal:terminal
$ mysql -uroot
mysql> show tables from homestead ;
+---------------------+
| Tables_in_homestead |
+---------------------+
| migrations          |
| password_resets     |
| tasks               |
| users               |
+---------------------+

```

いい感じですね。


# まとめ
環境構築で死ぬのが怖くてLaravelのバージョンを上げられません(こわい)。
ところで認証方式を変更しちゃうの、セキュリティ的にどうなんでしょうという気がします。要調査という感じですね。ひとまず解決できて安心です。
TECH ~Day17~

本日も前回に引き続きrailsの周回学習を行いました。
本日は一つトラブルが起こってしまい作業が大幅にロスしてしまいました。

最初の段階の作業を行っていたのですが、コードを色々と書き始める前にコントローラの作成をしようとカリキュラム通りにターミナルに向かってコマンドを打ち込んだ際に一行目一つ見慣れないエラーが表示され、僕ではそのエラーの意味が全くわからなったのでメンターの方を呼び、相談したところ、メンターの方も原因がわからないということで、完全に詰んだ状態になってしまい、そこから作業を進めることが全くできなくなってしまいました。

結局原因を探し続けるよりももう一度新しくデータを作って進めたほうが効率がいいということになり、言われた通り作り直すことにしました。

その原因として私自身が思うのは、1回目に作ったとき、実は途中の段階でコードやターミナルでのコマンド作業は合っていたはずなのですがどこかのタイミングでミスをしてしまったようでブラウザでの表示がされなくなってしいました。そこではやくメンターの方に相談すればよかったのですが私はなぜかブラウザでのチェックができない状態でコードの作成のみを行い、結果的にコードは完成状態にはしたのですが、ブラウザでの表示は全く見れない状態で終わってしまったので、もしかするとその時のデータがまだどこかに残っていたせいで2回目の作成の際に何か誤作動に繋がってしまったのかもしれないと思いました。
もしもそうだったとしたら悪いのはすべて私なのでこれからはそれも反省点にしてこれからは何かおかしいなと思った際にはすぐにメンターの方に相談するようにしようと思います。
NanoPi (SBC)を利用するときのシステム偽造防止法

# はじめに
独自のハードウエアを作った場合とは異なり、RPi, NanoPi等既製品のSBCを使って商品を作ろる場合、ハードウエアを購入し、不正コピーしたソフトウエアを載せることで模造品が容易に作れます。RSA暗号を用いて模造品を無効化する方法を考えたので紹介します。

# 模造品の弊害

 - 粗悪な模造品をユーザーは正規品と区別できずクレームが発生する
 - ソフトウエア資産を不正に使用される
 - 模造品が流通することで正規品の売り上げが下がる

# これまでの模造品排除法
## アリババ式
子機から親機に秘密の暗号 - 例えば「開けゴマ」を送るものです。自動車のキーレスエントリーはこの方法です。アリババのようにこの通信を傍受し同じことを言えば(replay攻撃）容易に解けてしまいます。

## 秘密鍵式
DESのように暗号化装置を用意し通信を暗号化します。親機子機間の通信は「温度をよこせ」「湿度をよこせ」「照度をよこせ」のように単純で一定パターンの事が多いでしょう。これを盗聴すると暗号文に規則性があり対応関係を類推されてしまいます。

# 偽造困難な方法

SBCの応用について子基板があり何らかの通信手段で子基板のCPUと通信していると思います。もしそうでなければこれだけのために子基板をつけI2C等で通信します。

子基板のCPUはLast FuseもしくはSecurity Fuseと呼ばれるものを切ることによってROMの実行は可能ですが、読み出し不可になるものとします。

あらかじめRSAの暗号Key Pair (K1, K2)をつくり、NanoPi側に公開鍵K1を保存し、子基板のCPUに秘密鍵K2を保存します。

通信開始時にそれとは別のKey Pair (K3, K4)を作り公開鍵K3をK1で暗号化し子基板に送り秘密鍵K4を保存します。子基板はK2でこれを復号化し保存したうえK3で暗号化しNanoPiに送ります。

NanoPiはこれをK4で復号化しK3に等しいことを確認したときだけ正規の子基板と認証します。確認できなければエラーを吐いて実行停止します。

以降の通信はNanoPiからは平文で送信し子基板からはK3で暗号化して応答します。一定時間、もしくは一定データー量通信した後、上記鍵交換を再度行うことにしてもいいです。

NanoPiからの送信をK1で暗号化しても構いませんがよりCPU Timeを使いK2を推察する機会が増えます。

以上でK2が漏洩しない限り複製は困難と思われますが、念のため子機はResetされてもn秒間以上K3を受け入れないようにします。

# 結論
これにより総当たりを試みてもnの2 ^ Key長 以上かかり実用的に推察は困難で且つ子基板の非力なCPUでも実用的な暗号化が可能になります。
Swift：CGFloatを文字列で初期化する

```Swift
extension CGFloat {
    init?(_ text: String) {
        guard let double = Double(text) else { return nil }
        self = CGFloat(double)
    }
}

let value = CGFloat("1.2345") ?? 0.0
```

CGFloatはよく使うのにも関わらず文字列から直接生成するやつがなくて不便だったので拡張した．
素人がガウス過程回帰を勉強する（１）

#素人がガウス過程回帰を勉強する（１）

次のページを見てもよくわからないので、少しずつ勉強してます。
でも余りにも素人なので、gpyの使い方の前にpandas、numpyを勉強した方が良いと感じた。

http://statmodeling.hatenablog.com/entry/how-to-use-GPy

スクリプトは、このＨＰを参考にわからないところをちょっと追加しています。

```Python
#モジュールのインポート
import GPy
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt

#Gpy の設定　ＲＢＦカーネルでinput_dim では次元を必ず設定する。
#variance　は分散。
#lengthscaleはまだよくわからない.
#この数値を大きくすると線が結果のy_simの変化が小さくなる。
#小さいとy-simの変化が大きい（苦笑）

kernel = GPy.kern.RBF(input_dim=1, variance=1, lengthscale=0.2)

#ここで、x_simに-1から1までの乱数を１００個作っている

np.random.seed(seed=123)
N_sim = 100
x_sim = np.linspace(-1, 1, N_sim)

#これはnumpyをリスト（ベクトル）に直している？
#元のＨＰの文章：GPyの関数の多くは、引数のshapeが(データ点の数, 1)である必要があります。そこで[:, None]を加えてその形にしています。
#x_sim.T（転置）でも同じ結果になると思うが、違うのか？

x_sim = x_sim[:, None]

#muに100個の0を作成。numpyで。
mu = np.zeros(N_sim)

#Gpyで共分散行列を作成
# 元のＨＰの文章：kernelオブジェクトに対しK関数を使うと分散共分散行列を作成できます。

cov = kernel.K(x_sim, x_sim)

#np.random.multivariate_normal()関数は,
#指定された平均(mu)と共分散行列(cov)から、ランダム（sizeの個数）に作成する関数

y_sim = np.random.multivariate_normal(mu, cov, size=20)

#グラフ作成
fig = plt.figure()
ax = fig.add_subplot(1,1,1)
for i in range(20):
    ax.plot(x_sim[:], y_sim[i,:])
fig.savefig('output/fig1.png')

```
とりあえず最初のスクリプトは、理解できました。
わからないのは、lengthscaleとガウス過程回帰の関係。

lengthscale = 0.2
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336017/4947f0e4-f7c0-f9c8-69bc-72ea361d12e6.png)

lengthscale = 0.5
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336017/299cac58-ab01-1d73-40ae-3bf24c0e3aab.png)

lengthscale = 1.0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336017/aa807620-da9c-aa59-bef7-8e8e9ad6087e.png)
【Go】導入する前に知っておきたい10ぐらいのこと(その１比較編)

# はじめに
Go言語をプロジェクトで採用するための比較検討や、資料を読み漁りました。
誰かの一助となり少しでもGoを採用することが増えればと思い記事を書いていきます。
1記事に10まで書くと分量が多いので分割します。

**また、あくまで個人的な意見であり、この記事により不幸な事故が起きても責任は負えません。**

# 他の言語との比較
APIサーバやバッチを作るのに向いているが画面の描画は苦手気味
大規模開発でも、書きやすい(Googleが作ってるし)

## Goは何が優れているのか
1. Ruby,Node.js,PHP に比べて基本的な実行速度が早い
2. Windows Mac Linuxで動くバイナリをビルド、実行できる。
 これにより、Goのバージョンアップ時にアプリサーバ全部にyum update みたいなことをしなくて済む
3. linterとformatterが付属しているのでコーディング規約の宗教論争になりにくい。
4. c言語を内部的に実行できる(cgo)
5. 半年に1度メジャーバージョンアップがくる(コミュニティが活発)
6. 書き方が簡単(c,Java,PHPを知ってる人ならとっつきやすい)
7. 標準のテストツールが付属している。
8. 並列処理に強い
9. ~~Gopherがかわいい~~

## 何が劣っているのか
1. 標準ライブラリが最低限しかない。ただし標準以外のライブラリは充実してるので困ることは少ない
2. 画面の描画が弱い
3. Hot reloadに一手間必要
4. 書けるエンジニアが少ない
5. エンジニアの単価が高い
6. エラー処理が独特で多言語から来た人に慣れが必要(今後tryが実装される話はある。)

# 終わりに
Goは慣れると運用が楽である(体験談)
インストールも簡単でvscodeを使えばエディターも充実している(体験談)
PHP5.3をリプレイスしたら、サーバの負荷が半分以下になってスカスカになったよ（体験談）
書ける人を採用したり、委託するのは難しい(体験談)

つまり、何が言いたいかというと、みんなGo使おうよ。
TECH ~Day16~

前日に中間試験を終えて、個人的に散々な結果に終わってしまったということもあり、今日からまた学習に力を入れていかなければいけないと、改めて力が入りました。

テックのメンターの方と一旦相談し、中間試験の結果からここからどのような学習スタイルにしていくのが一番いいのか話しました。
相談した結果的にここからは以前行ったrailsアプリケーションの「pictweet」をもう一度一から作るという学習方法を進めていただきました。周回することによってrailsでアプリケーションを作る際の大まかな流れを覚えられるためであるという風に教えていただきました。
それを聞いた時には私自身もまだ一度だけ前にカリキュラム通りに作っただけのため、実際に自分で一つアプリを作れと言われたとしたら全くまだ体に染み付いていないので混乱だらけになってしまうと思います。

それから私は今日からまたrailsの以前作成したアプリケーションを周回して学習し始めました。

以前作成したにも関わらず、最初の初期設定の段階の記憶がほとんど忘れており、やはり繰り返しやらなければ覚えられないと実感しました。
なるはや Vue SPA入門：Vue Router

Vue CLI3 で作成した SPA（Single Page Application）プロジェクト上で、段階的に Vue.js を学んで行きましょう。

[目次はこちら](https://qiita.com/tsubo/items/24df49ef2f1ba87984d1)

今回は Vue Router 編です。

## 前提事項

[ファイル構成編](https://qiita.com/tsubo/items/579daa4f1b45f13b8175) が完了していること。 

## ページの追加

### src/views/SandBox.vue 作成

```vue:SandBox.vue
<template>
  <div class="sandbox">
    <h1>SandBox</h1>
  </div>
</template>
```

### src/router.js の修正

```js:router.js
// ...
// SandBox コンポーネントのインポート
import Sandbox from './views/SandBox.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    // ...
    {
      // sandbox パスの追加
      path: '/sandbox',
      name: 'sandbox',
      component: Sandbox,
    },
  ],
})
```

### src/App.vue の修正

```vue:App.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <!-- "/sandbox" へのリンクを追加 -->
      <router-link to="/sandbox">Sandbox</router-link> |
      <router-link to="/about">About</router-link>
    </div>

    <!-- Vue Router で遷移したページが router-view に表示されます -->
    <router-view />
  </div>
</template>

<style>
  /* ... */
</style>
```



## 動作確認

画面トップのメニューで`Sandbox`をクリックして画面遷移が出来れば完了です。

## 次回

[単一ファイルコンポーネント](https://qiita.com/tsubo/items/6822cfb3f4369976db65)
Ruby on Railsを業務で入門する際に参考にした情報 (2019年7月時点)

# はじめに
4月ごろから業務でRailsを使っていますが、社内にRails経験者はおろか、Ruby経験者も居なかったので、Web上や本で参考にした情報を記載します。
なお、個人的には前からRubyに興味があったので、Ruby入門本読んだり、Railsチュートリアルを触ったりはしていました。
なので、完全に新規学習というわけではありません。

# 入門情報

### プロを目指す人のためのRuby入門
[書籍](https://amzn.to/2K52YSN)
こちらは書籍になります。
Rubyやってみたいなあと思って検索したところ、ネットでこちらの本の評価がよかったので、買って読んでみました。
Rubyは自由度が高く色んな書き方ができますが、状況に応じてどう書くのがよいか記載されているのが参考になりました。
毎章、学んだ知識を使った例題プログラムの実装解説があるので、実際に手を動かしながらRubyの基礎文法を身につけられたと思います。

### 現場で使える Ruby on Rails 5速習実践ガイド
[書籍](https://amzn.to/2XEj4KZ)
こちらも書籍です。
タスク管理アプリを実際に作りながら、Railsの作法を学んでいくことができます。
現場でと銘打っていることもあり、チーム開発でのGitの使い方やマイグレーション、リファクタリングについても学べる1冊です。

### [Railsチュートリアル](https://railstutorial.jp/)
「Rails 入門」で調べるとまずこれに行き着くのではないでしょうか
Twitterライクなアプリを実装しながら、Railsについて学習できます。
Railsの仕組みもそうですが、Web開発で注意すべきセキュリティ面など基本の知識についても学ぶことができます。
自分は1周しかしていないですが、何周か取り組んで、より学習を深めていくのもいいかもしれません。

# リファレンス

### [プログラミング言語 Ruby リファレンスマニュアル](https://docs.ruby-lang.org/ja/)
リファレンスにいくつかサイトがありますが、自分の場合、Ruby自体の書き方やAPIがわからない時はこちらを参照しています。

### [Ruby on Rails ガイド](https://railsguides.jp/)
Railsの基本機能の概要や使い方を知りたい時によく参照しています。
最初はActive Recordなど用語自体もわからなかったため、開発で分からないことがあった時は、こちらのサイトをよく見ていました。

### [Ruby on Railsドキュメント (v4.2.1)](http://railsdoc.com/)
もう少し細かいAPIの使い方はこちらで確認しています。
現行のRails5ではなく、4対応なので、そこは少し注意です。

# Gem関連

### [RubyGems](https://rubygems.org/)
RailsでのライブラリはGemと言いますが、こちらで検索できます。

### [bootstrap-rubygem](https://github.com/twbs/bootstrap-rubygem)
RailsでCSSフレームワークのBootstrapを使うためのGemになります。
最新のBootstrap4を適用できます。

### [devise](https://github.com/plataformatec/devise)
認証用ライブラリです。ログイン認証はこちらを使われている方が多い印象です。

# 開発参考記事

### [使えるRSpec入門・その1「RSpecの基本的な構文や便利な機能を理解する」](https://qiita.com/jnchito/items/42193d066bd61c740612)
プロを目指す人のためのRuby入門著者の方の記事になります。
RSpecとはテストフレームワークで、構文や機能について確認したい時に参考にさせて頂いていました。


### [RailsでMVCを意識してシンプルにCSV出力](https://qiita.com/necojackarc/items/39e0f0c438363f7084db)
Railsでは、CSV出力はシンプルに実装できます。
自分も実装する際に、こちらの記事を参考にさせて頂きました。

# 最後に
今後も役に立った情報があれば、随時更新していきます。
皆さんからもぜひ役立った情報などあれば教えていただければと思います。
【イベント開催リポート】TECH::Survivorもくもく会 #2 ｢皆でQiitaを書く！」｢C++難しすぎ｣ ｢資格はなんだかんだ有用だと思う｣ ｢Cでテトリス｣ ｢ドットインストールでJavaScript｣ 他

# はじめに
こちらは2019/7/13に開催したTECH::Survivorのもくもく会のレポートです。

今回は「Qiitaを1記事書く！」という課題を出し、皆で記事をもくもく書く。
後は雑談や相談。
残っている自分の仕事を片付けている人もいました。

夜はビールを飲みながら、ごくごく会。

## 会場
場所は渋谷、会場はこちらを使わせていただきました。

andworks
https://www.xandwork.com/shibuya

## TECH::Survivorとは？
TECH::Survivor、我々はエンジニアのキャリアを考え、ゆるーく繋がるコミュニティです。
http://techsurvivor.top

# 話題
- 意外と皆Qiitaのアカウントを持っている
  - が、記事を書いたことがない人が多い

- C++難しすぎ
  - C#の仕事を始めたら、C#から呼び出されるC++のライブラリを改修することに
  - ポインタや低水準なレイヤを意識しなければならない
  - C#からも呼び出せるように書き方を考えなければならない
  - 開き直って、C++がっつりやって競技プログラミングでもやってみては？

- 資格はなんだかんだ有用だと思う
  - SES事業の会社に務めているが、上長や現場から資格習得を求められる
  - 未経験で入社し最初から開発の案件でラッキーだと思いつつもキャッチアップがキツい
  - 会社からの要求もそうだし、案件についていくためにも資格の勉強は有用だと感じている
 
- C言語でテトリスを作っている
  - 勉強がてら作ってみる
  - Macでは使えないライブラリがあるため、代わりのライブラリを探している
  - C言語も他言語と同じく標準ライブラリだけでなく、追加のライブラリを多用するのが普通

- ドットインストールでJavaScriptをやっている
  - 未経験から入って将来的にはフロントエンドエンジニアになりたい
  - プログラムに慣れる意味でもJavaScriptは有用だと思う
  - HTML/CSSとの関係性が深く、それらを復習するのにもJavaScriptの学習は有用だと思う

- 勉強がてら、言語処理100本ノックをやってみる
http://www.cl.ecei.tohoku.ac.jp/nlp100/

# 記事
当日、参加者の皆さんで書いた記事はこちらになります！

## テストコードの書き方はわかったけどテストケースってどうやって挙げたらいいの？
https://qiita.com/tan3_sugarless/items/7bd89c92bfaac1e852e0

## 意識低い系フロントエンド勉強法
https://qiita.com/neet_se/items/b44d7e5a3665f7715093

## パチンコ業界からの未経験IT転職
https://qiita.com/kyai_se/items/01f1a4dbe8d0119e33c6

## 言語処理100本ノック(4本目で無事撃沈)
https://qiita.com/seno0x00/items/e74c7ae1880d10d65efc

## IntteliJ インストール + HelloWorld(mac) 
https://qiita.com/nakayamenotu/items/64ff7b37767198ab652f

## Javaの学習に使用した書籍
https://qiita.com/nakayamenotu/items/513dc29307054354e08d

## JS　３択問題作成でのまとめ
https://qiita.com/SHIROU3923/items/cdca3ca22755e4c912d9

# 終わりに
TECH::Survivorは定期的にもくもく会やキャリア相談をやっています。
お気軽にお立ち寄りください。
共同開発時のGithubの使い方について

Githubの基本的な使い方を個人的にメモしております。

## 開発中のローカルブランチにpullしたいとき

```terminal

!!!作業途中のものでcommit出来るものがあればcommitしておく

git checkout master
# masterブランチへ移動

git pull origin master　もしくは git pull upstream master
# git pullでmasterを最新の状態に。共同作業をしてupstreamでpullしている場合は、upstreamのコマンドを

git checkout 開発用ブランチ
# 開発用ブランチへ移動

git merge origin master　　# originはfork元の人のmasterなのでやらなくてもOK
# mergeコマンドでmasterの内容を取り込む

# リモートからローカルへの反映が終了
```



##本家をgit pullしたい時

1 現在の登録の確認

```
git remote -v
```

2 ローカルのmasterに移動し、ローカルリポジトリ（Desktop)の更新をする


```
git pull upstream master
```

3 自分のリモートリポジトリにpushする


##ブランチを切る

１　New　Branch　をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397779/0fdecf92-ce58-93de-18a7-2b7d5519e0a9.png)

２　ブランチ名を入力してCreate Branchをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397779/9e6f5c49-aa8e-d6d3-70f3-ba8e3cb2dc4a.png)


##Githubでプロジェクトを削除する
誤って全然関係ない方のgitをforkしてしまったときなど・・・

- 削除したいプロジェクトを選択
- Settingsを選択
- 一番下のDelete this repositoryをクリック
- 確認画面が出てくるので、プロジェクト名を入力して削除



##おまけ
###pullした時にMigrationErrorが出た場合

bundle exec rake db:migrate をするの忘れてる
高機能なIDE「IntelliJ IDEA」をインストールする。

# IntelliJ IDEAをインストールする

## あらすじ
最近、私はあるIDEについてよく耳にします。
それは「IntelliJ IDEA」です。
このIDEは、「ReSharper」等のコーディング支援ツールを開発する
Jetbrainsという会社（2000年設立）が開発した開発環境です。

このIDEのメリットを一言で表すと
**「VSの様な高性能なコーディング支援機能を、ほぼ全ての言語、またフレームワークが扱える」**という所だと思っています。
※筆者はこのIDEをインストールしたばかりで、これから使用していこうと思ってます。





## インストール手順

### 準備するもの
- WindowsPC（筆者はWindows10を使用）
- ブラウザソフト（筆者はGoogleChromeを使用）
- IntelliJ IDEA Communityのインストーラ（次の手順にて詳細を記述します。）
※お急ぎの方はこちら⇩⇩
[インストーラをダウンロードする。](https://www.jetbrains.com/idea/download/#section=windows)

### IntelliJ IDEAのインストーラをダウンロードする。。

ブラウザを起動し
⇩⇩をクリックする。すると、IntelliJ IDEAの公式ホームページが表示される。
[IntelliJ IDEAホームページ](https://www.jetbrains.com/idea/download/#section=windows)

以下の通り表示されればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/c7d1d2d2-8387-5ba7-ad00-4a110be8ad56.png)

「DOWNLOAD」ボタンをクリックすると、インストーラのダウンロードが開始される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/01625747-15e8-676c-4fec-c103e5c3a4ae.png)

以上でインストールの準備は完了！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/3e9a7463-6735-efdc-082f-8284938e34bd.png)


### IntelliJ IDEAをPCにインストールする。

ダウンロードしたインストーラを実行する。
すると以下のようにインストールウィザードが開始される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/805af3df-8d6a-d249-65cd-bafd29a4f75c.png)

今回は無料の「Community」というバージョンのIntelliJ IDEAをインストールする。
「Next」ボタンをクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/77578361-cb88-db76-1219-d066516f11f5.png)

この画面にて、インストール先ディレクトリの設定が可能です。
既定で表示されているディレクトリパスで問題なければ「Next」ボタンをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/d8c15042-2ac5-a737-0c9e-352653f29ef4.png)

この画面にて、インストールオプションの設定が可能です。
特に設定しなくてもいいです。
設定がし終わったら「Next」ボタンをクリックすると、インストールが開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/f35339ef-dd33-267a-6d10-10fb029dcbe9.png)

インストールが正常に完了すると、以下のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/450687/99b2ce04-6252-1ae7-24a9-13818a5aa638.png)

お疲れ様です！
今後は、IntelliJを使用した感想や、機能の紹介などについての記事を書いていこうと思っています。
Windows10でUEFIファームウェア(BIOS)を呼び出す手順

# F2やDelで起動してもBIOS画面に入れない
多分FastBoot的なアレです。のでWindowsから終了オプションでBIOS呼びましょう。

# 呼び出しかた
通常起動後に「スタート＞アプリ＞設定＞更新とセキュリティ＞回復＞今すぐ再起動」
再起動後に「オプションの選択＞トラブルシューティング＞詳細オプション＞UEFIファームウェアの設定」

コントロールパネルからではたどり着けず難儀したのでメモとして残しておきました。
#Window10の設定まわりの散らかりようはなんとかならんのかなぁ。検索窓も役に立たないし。
HTML の 要素 の 透過率 を 設定する

# 目的
- HTMLファイルの要素の透過率を設定する方法をまとめる。

# 押さえるポイント
- 透過率を変更する方法はopacityとrgbaの2種類が存在する
- opacityはプロパティとして透過率を設定する→要素に記載されているテキストまで透過させてしまう
- rgbaは色のカラーコードのように背景色を設定するついでに透過率を設定する→要素に記載されている文字は透過させない

# opacityの書き方の例(テキストも透過させてしまう)
- 透過率は0.0～1.0の数字で指定する
- 0.0が透明
- 1.0が不透明
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  opacity: 0.0～1.0の数字で指定;
}
```

# opacityのより具体的な例
- h1要素の透過率を0.5に設定する。
- 背景色は既に黒となっている。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  opacity: 0.5;
}

```

# rgbaの書き方の例(テキストを透過させない)
- 透過率は0.0～1.0の数字で指定する
- 0.0が透明
- 1.0が不透明
- background-colorプロパティ色指定方法などでrgbaで指定する(r:red g:green b:blue a:alphaの略)
※rgbでの色指定は赤、緑、青(色の三原色)の割合(1～255)を用いて色を指定する方法である
※カラーコードは16進数で色を設定する
※rgbは10進数で色を設定する
※カラーコードの16進数はrgb値を元に作られている

``` css
要素の名前かクラス名 {
  background-color: rgba(1～255の赤の割合, 1～255の緑の割合, 1～255の青の割合, 0.0～1.0の透過率);
```

# rgbaのより具体的な例
- h1要素の透過率を0.5に設定する。
- 背景色を黒に設定する。
- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  background-color: rgba(255, 255, 255, 0.5);
}
```
HTML の 要素 に 背景画像 を 設定する

# 目的
- HTMLファイルの要素に背景画像を設定する方法をまとめる。

# 押さえるポイント
- 背景画像を設定したい要素に対してCSSでbackground-imageプロパティで画像を設定する。
- 画像サイズと画面サイズが一致していないと表示が乱れてしまう。(画面サイズ>画像サイズとなると画面サイズを埋めるように設定した背景画像が繰り返し表示されてしまう。)
- 表示画面全体を覆うように表示させたい場合はCSS でbackground-sizeプロパティでcoverを指定することにより繰り返し表示を防ぐことができる。
- 基本的にbackground-imageプロパティと一緒にbackground-sizeプロパティも指定することがセオリー

# 書き方の例
- 下記にCSSファイルの内容を記載する。
※要素の名前かクラス名は実際に背景画像を入れた要素の名前かクラス名を記入する。
※背景画像のURL(ファイルパス)はurlの文字に続き括弧の中に記載する。

``` css
要素の名前かクラス名 {
  background-image: url(画像のURLがパス記入);
  background-size: cover;
}
```

# より具体的な例
- h1要素にweb画像を背景として設定する。
画像はいたすとやの[https://www.irasutoya.com/2017/03/blog-post_74.html](https://www.irasutoya.com/2017/03/blog-post_74.html)とする
- p要素にローカル環境にある画像を背景として設定する。
ローカル環境の画像ファイル名は「teat.JPEG」とする。
ローカル環境の画像ファイルとHTMLファイルとの階層関係を下記に記載する。

```
# HTMLファイルとローカル画像ファイルのフォルダ階層関係

HTMLファイル
photoフォルダ
    ↪︎test.JPEG
```

- 下記にHTMLファイルの内容を記載する。

``` html
<h1>おはようございます。</h1>
<p>これは日本の朝の挨拶です</p>
```

- 下記にCSSファイルの内容を記載する。

``` css
h1 {
  background-image: url(https://www.irasutoya.com/2017/03/blog-post_74.html);
  background-size: cover;
}

p {
  background-image: url(./photo/test.JPEG);
  background-size: cover;
}
```
HTML の ブロック要素 を 横方向の中央に配置する設定 ～CSS margin: 0 auto;～

# 目的
- HTMLファイルのブロック要素を左右の幅を均等に配置する設定方法をまとめる。

# 押さえるポイント
- marginプロパティの余白指定を応用する。
- 画面上下の幅を均等に設定することは出来ない。
- marginプロパティにて横方向の余白をautoとして指定する。

# 書き方の例
- 下記にCSSファイルの内容を記載する。

``` css
要素の名前かクラス名 {
  margin: 0 auto;
}
```

※具体的な例が思い浮かばなかったため今回は記載しない。
ツイッターで自動検索して自動ファボするスクリプト

#ツイッターで自動検索して自動ファボするスクリプト

こちら、[Node.jsでTwitter検索から100件を超えるツイートを取得したい](https://qiita.com/ryo-a/items/53fe9eadcf719b817c9a)を参考に改造しました。@ryo-aさんありがとうございます。

```javascript
var twitter = require('twitter');


//変更すべき設定
var client = new twitter({
    consumer_key: '',
    consumer_secret: '',
    access_token_key: '',
    access_token_secret: ''
});
searchTweet('検索するワード');

function searchTweet(queryArg, nextResultsMaxIdArg = null) {
  client.get('search/tweets', { q: queryArg, count: 10, max_id: nextResultsMaxIdArg }, (error, searchData, response) => {
    for (item in searchData.statuses) {
      let tweet = searchData.statuses[item];
      console.log('@' + tweet.user.screen_name+' : '+tweet.text);
// ここからファボするスクリプト
      let param = ({id: tweet.id_str})
      client.post('favorites/create', param, (err, response) => {
          if(err) {
              console.log(err[0].message);
          } else {
              console.log('■ いいねしました！')
              const username = response.user.screen_name;
              const favoritedTweetId = response.id_str;
              console.log(`■ Favorited: https://twitter.com/${username}/status/${favoritedTweetId}`);
          }
      });
// ここまで
    }

    if (searchData.search_metadata == undefined) {
      console.log('---- Complete (no metadata) ----');
      return 0;
    }
    else if (searchData.search_metadata.next_results) {
      let maxId = searchData.search_metadata.next_results.match(/\?max_id=(\d*)/);

      if (maxId[1] == null) {
        return 0;
      }

      console.log('---- next:' + maxId[1] + ' ----');
      searchTweet(queryArg, maxId[1]);
    }
    else {
      console.log('---- Complete ----');
      return 0;
    }
  });
}
```
maxIdというのがなんのためにあるのか、なぜそれをsearchTweet()の属性に入れてるのかわからない。おそらくcount数に達したら終わりにするよう利用しているみたいです。誰か教えてください:bow_tone1:


<br>
###追記
####注意:warning:
このスクリプトをささやかに使用していたら、ファボするコードのところ、`console.log(err[0].message`でエラーが出るようになった。エラー内容を調査したいがもしかしたらツイッター側のしかけ（機能ロック）されたのかもしれない。これ以上流すとアカBANされそうで非常にヨロシクないので諦めて別の方法を探すことにする。

<br>
つづく



<br>
###つづき
どうやらこのエラーのようだ。
Error: HTTP Error: 429 Too Many Requests
コンソールを眺めてエラーが出始めたらすぐにCtrl+Cで止めるが良い。あんまり出しているとペナルティがあるかどうかわからない。

”API v1.1で、リソースごとに決められたアプリケーションの速度制限を使い果たしたためにリクエストが処理できなかった場合に返されます。API v1.1 の速度制限を参照してください。”
[Twitter 開発者 ドキュメント日本語訳](http://westplain.sakuraweb.com/translate/twitter/API-Overview/Error-Codes-and-Responses.cgi)
[WebAPIを設計するうえでの利用制限(Rate Limit)について調べた](https://qiita.com/yuji_saito/items/2834ab921d9d4f0639a8)
background-size: 100% 100%; で背景画像 (svg) が縦横いっぱいに広がらない問題

## tl:dr

svg ファイルを開き、svg タグに対して

```xml
<svg preserveAspectRatio="none" ....>....</svg>
```

と `preserveAspectRatio` 属性を指定してあげると、できる。

## 文脈

`background-image` で指定した画像を、 `background-size: 100% 100%;`でアスペクト比無視して要素いっぱいに広げたかったんだが言うことを聞いてくれなかった。
指定していた画像が svg だったので、もしかしてこのせいかと思ったらそうだったのでメモ。

## 解説

そもそも svg 画像の表示領域（viewport）は `viewBox`という属性によって決まっていて、これを元にアスペクト比をどうするのかを決めるらしい。（`viewbox`属性に関しては勉強不足なので詳しい説明は割愛）

また、svg には `preserveAspectRatio` という属性があって、この属性のデフォルト値が「（ざっくり言うと）アスペクト比は固定する！」と指定している。
そのため、svg 画像に対して css でアスペクト比を維持しないようにしても、そもそも svg に「アスペクト比を維持しなくてもいいよ」と指定してあげないと柔軟に縦横に変形してくれないようです。


## 参考

- http://www.fujipro-inc.com/2017/05/31/4785.html
- https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

## あとがき

svg まだまだ知らないことだらけです。がんばります。
VirtualBoxの仮想マシンの時計がずれるのを防ぐ

MacBookPro のVirtualBox でUbuntu を動かしているが、気がつくと10分も時計が遅れている。あまりにずれが大きすぎてnptd でも補正できないようだ。
以下のようにしたら解決できた。


VirtualBoxを動かしているホスト(今回はMacBookPro)で

```
VBoxManage guestproperty set  仮想マシン名 "/VirtualBox/GuestAdd/VBoxService/--timesync-set-threshold" 1000
```
この後にゲストの仮想マシンをリブートする



仮想マシン名は以下のようにして確認できる

```
VBoxManage list vms
"ubuntu1804" {61a76010-42af-40be-9cee-193fea719515}
```

例

```
VBoxManage guestproperty set  "ubuntu1804" "/VirtualBox/GuestAdd/VBoxService/--timesync-set-threshold" 1000
```
CATCHしたまま黙ってる悪い子は居ねが～

失敗してるはずなのに失敗にならないジョブがあったので調べてみたら、ストアドプロシージャの中でCATCHしたまま何もしてなかった...

他にも無いか探すのに使ったクエリ

```sql
SELECT
	*
FROM
	sys.sql_modules
WHERE
	definition LIKE '%CATCH%'
	AND definition NOT LIKE '%CATCH%RAISERROR%'
```

SQL Server 2012 以上なら、`THROW`が使えたはずなので、そちらも併せて確認したほうが良いかも。
FILEZILLAでさくらインターネットVPSをSFTPプロトコルで導通

#FileZilla側設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140071/21869257-3d08-56fb-bcda-5fd522a6bcc6.png)


プロトコル　は　SFTPを選びます。
ホスト　は　さくらVPSのIPを指定します。
ポート　は　設定したポート番号を入力します。
ユーザ　は　TERATERM経由等で設定したユーザを入力します。
パスワードは　TERATERM経由等で設定したパスワードを入力します。

自分のユーザ以外は見えないので注意。(DDDは不可)
HOME-XXX
　　 -DDD
docker-composeでPHPのLAMP環境作ったけど、apt-getでmysqliがインストールされなくドハマりしたのでメモ


#はじめに
dockerの勉強がてら、docker-composeでPHPのLAMP環境を作成。

ただ、`mysqli`パッケージがインストールされていなかったので、コンテナに入って`apt-get`でインストールを試みました。

しかし、エラーが出てインストールができない。。

まさしく、こんな感じでした  。
https://askubuntu.com/questions/1128673/cannot-install-php7-3-mysqli

パッケージ名を調べたり、色々とコマンドを試すも、全くインストールされない。
mysqliを入れたいだけなのに。。

#解決方法
と数時間どハマりして、ふと、「あ、Dockerfileを修正したら。。」ということに気がついたので修正。

```php:Dockerfile
FROM php:7.2-fpm

# install composer
RUN cd /usr/bin && curl -s http://getcomposer.org/installer | php && ln -s /usr/bin/composer.phar /usr/bin/composer
RUN apt-get update \
&& apt-get install -y \
git \
zip \
unzip \
vim

RUN apt-get update \
    && apt-get install -y libpq-dev \
    && docker-php-ext-install pdo_mysql pdo_pgsql mysqli

WORKDIR /var/www/html
```

`docker-php-ext-install`でPHPの拡張モジュールを指定できるよう。

mysqliを追加してみた。

#Dockerfileの変更を反映

```
docker-compose up -d --build
```

Dockerfileの変更を反映させるには`--build`をつける。

無事、インストール完了。

#念の為、インストールされたか確認

コンテナに入って

```php
docker exec -it app bash
```

確認

```php
php -r "phpinfo();" | grep mysqli
```

出力結果

```php
mysqli
mysqli.allow_local_infile => Off => Off
mysqli.allow_persistent => On => On
mysqli.default_host => no value => no value
mysqli.default_port => 3306 => 3306
mysqli.default_pw => no value => no value
mysqli.default_socket => no value => no value
mysqli.default_user => no value => no value
mysqli.max_links => Unlimited => Unlimited
mysqli.max_persistent => Unlimited => Unlimited
mysqli.reconnect => Off => Off
mysqli.rollback_on_cached_plink => Off => Off
API Extensions => mysqli,pdo_mysql
```

無事、インストールされたことが確認できました〜

ちなみに指定できるExtensionのリストは下記
https://gist.github.com/chronon/95911d21928cff786e306c23e7d1d3f3

```
| bcmath |
|:--|
| bz2 |
| calendar |
| ctype |
| curl |
| dba |
| dom |
| enchant |
| exif |
| fileinfo |
| filter |
| ftp |
| gd |
| gettext |
| gmp |
| hash |
| iconv |
| imap |
| interbase |
| intl |
| json |
| ldap |
| mbstring |
| mcrypt |
| mysqli |
| oci8 |
| odbc |
| opcache |
| pcntl |
| pdo |
| pdo_dblib |
| pdo_firebird |
| pdo_mysql |
| pdo_oci |
| pdo_odbc |
| pdo_pgsql |
| pdo_sqlite |
| pgsql |
| phar |
| posix |
| pspell |
| readline |
| recode |
| reflection |
| session |
| shmop |
| simplexml |
| snmp |
| soap |
| sockets |
| spl |
| standard |
| sysvmsg |
| sysvsem |
| sysvshm |
| tidy |
| tokenizer |
| wddx |
| xml |
| xmlreader |
| xmlrpc |
| xmlwriter |
| xsl |
| zip |
```
RDSの設定をミスして、予想以上の請求が発生した話をしよう

これは、僕が友人と「Owntime」というサービスで作っていた時に起こった出来事です。DBを含めて、インフラ周りの設定をしていたのですが、

`そこで重大なミスを犯してしまったのです！！！！！！！！！（貧乏人にとっては）`

少しだけ「Owntime」の説明をしたあとに、どのような設定ミスをしたのか描きたいと思います。

## Owntimeとは

[Owntime説明ページ](https://owntime.io/signup)

時間を管理して、理想の時間の使い方に近づけるサポートをするサービスです。

具体的な機能としては
・自分の理想の時間配分を登録する
・現実の時間配分を登録する
・集計する
・理想と現実の差から、生活を変えるヒントを得る
などがあります。

## どのような設定をしたのか

僕たちは、DBにAmazon RDS for MySQLを使っていて、それの設定をやっていたところ、

![RDS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191211/043886a5-a5b4-83fe-42ef-268c743e7b0a.png)

このような画面になり、僕は`本番環境用 - MySQL`だと思って`2つ目の選択肢`を、`全てデフォルトで`作成してしまったのです。

その後意気揚々とアプリをローンチし、ローンチの嬉しさに浸っていた時、
AWSからメールが届いたのです。

そしてその2行目には、
Total: $316.57

What?? Kidding me??

なんと本番稼働用のデフォルトは、
- `MultiA-Z`
- `プロビジョンドあり`
- `r5.x2large（8vCPU・64GiB）`

のやつだったのです！（そこに書いてある..）

ちなみに

`プロビジョンドIOPS` : データ転送のパフォーマンスが最適化されている
`MultiAZ` : データの耐久性を高めるために、2つ物理ゾーンにプラリマリーとレプリケイトしたDBを配置して、冗長化を行なってくれるもの。

ユーザーがまだ少ない時は、もっとスペック低めのやつで十分で、もし変えたくなったら、比較的簡単に変更できます。

完全に自分の責任なのですが、これは完全に自己資金でやってる自分にとっては、とてもショックを受けて、1、2日は悔しさで、涙が止まりませんでした。

## 結論

エンジニアでもビジネスマンでも、レファレンス、仕様書、料金表はちゃんと読みましょうということです。当たり前です。
[statik] Goで静的ファイルもバイナリに内包してデプロイする

# Intro
Goでアプリケーションを作っている場合、ビルドしたバイナリを配布するだけで簡単にアプリケーションをデプロイできます。

ただ、Goファイルでない静的ファイルなども一緒にリリースしたいといったユースケースの場合、バイナリとは別にファイルも一緒にリリースする必要があり、ひと手間増えてしまいます。

例えば `toml` などで記述したアプリケーションの設定ファイルも一緒にリリースしたいといったユースケースなどが想像できます。

そんな時 [statik](https://github.com/rakyll/statik) を使えばバイナリにファイルを同梱してワンバイナリでリリースしたいという誰もがやりたいことを簡単に実現することができます。

## Usage
基本的には本家の `README` を参考にしてみてください。
https://github.com/rakyll/statik

以降は少しイメージを膨らませるためのサンプルソースになります。


```
$ go get github.com/rakyll/statik
```

例えば、下記のような環境毎に設定ファイルがあるケース

```
conf
├── develop
│   └── app.toml
├── staging
│   └── app.toml
└── production
    └── app.toml
```

```conf/develop/app.toml
[s3]
bucket = "your_bucket_name"
region = "ap-northeast-1"
endpoint = "http://dev.xxx.jp"
```

Goバイナリに含めたいファイルディレクトリを指定して以下を実行します

```
$ statik -src=/path/to/your/project/conf
```

`statik.go` という `.go` ファイルが出来上がります。

```
statik
└── statik.go
```

中身は以下のようなイメージです。

```statik/statik.go
// Code generated by statik. DO NOT EDIT.

// Package statik contains static assets.
package statik

import (
	"github.com/rakyll/statik/fs"
)

func init() {
	data := "\x03\x04\..."
	fs.Register(data)
}
```

アプリケーションから下記のようなイメージで読み込んで使用します。

```
import (
	"path/filepath"

	"github.com/BurntSushi/toml"
	"github.com/rakyll/statik/fs"

  _ "./statik" // TODO: Replace with the absolute import path
)

type Config struct {
	S3  S3 `toml:"s3"`
}

type S3 struct {
	Region   string `toml:"region"`
	Bucket   string `toml:"bucket"`
	Endpoint string `toml:"endpoint"`
}

func New() (*Config, error) {
	conf := &Config{}

	e := "develop" // ← 環境変数なりで動的に変える。サンプルコードなので簡易的に
	fPath := filepath.Join("/", e, "app.toml")
	fileSystem, err := fs.New()
	if err != nil {
		return nil, err
	}

	f, err := fileSystem.Open(fPath)
	if err != nil {
		return nil, err
	}
	defer f.Close()

	_, err = toml.DecodeReader(f, conf)
	if err != nil {
		return nil, err
	}

	return conf, nil
}
```

`.go` ファイルとして出力されているので、buildしてしまえば一つのバイナリを配布するだけでデプロイすることが出来ます。便利。

あでゅ。
jq コマンドで配列を CSV 形式などへ変換

こんにちは。
jq コマンドを使って、配列を CSV 形式などへ変換しました。separator をコンマ、タブ、空白の場合を行いました。

```console
$ echo '[1.0, 2.0]' | jq -r '.|@csv'
1,2
$ echo '[1.0, 2.0]' | jq -r '.|@tsv'
1	2
$ echo '[1.0, 2.0]' | jq -r '.|@tsv' | tr '\t' ' '
1 2
```
意識低い系フロントエンド勉強法

# はじめに
[@neet_se](https://twitter.com/neet_se)といいます。
普段はフリーランスエンジニアみたいなニートをしています。

今までJavaでバックエンドを作ったりインフラを構築する仕事がメインでしたが、最近ガッツリとフロントエンド開発に携わることになったため、今回はそこで得たナレッジをシェアしたいと思います。

# やりたいこと
タイトルの通り、いかにコストを書けずにフロントエンド開発に必要なスキルを習得するか、です。
フロントエンドは地味に覚えることが多いです。
React、Vueなどのライブラリ、AngularJSやNext、NuxtなどのFWなど色々ありますし、流行り廃りが激しいといいます。

そこで怠け者な私が、いかに楽にフロントエンド開発に必要な技術を習得するかを考えてみました。
完全に初心者向けではなく、既にある程度勉強が進んでいる方、あるいは経験がある方向けです。

ちなみに現在の私のスペックはこんな感じです。

- HTML/CSSは中学生の頃、ちょろっと触ってた
- JavaScriptは基本文法は大体知ってる
- Reactを1ヶ月ぐらい触ってた
- 最近、VueやNuxtを触りだした

# STEP 1 ざっと関連技術の書籍や記事を読んでみる
本当にざっと読むでよいのです。
無理に理解したり暗記する必要はありません。

そして私は意識低い系、そんなに頭の出来もよくないのです。
ざっと眺めるように全体的に読んでいきます。

本を選ぶポイントは｢AmazonやGoogle、Qiitaなどで評判のいい、よく目にするもの｣です。
ぶっちゃけた話、本をあれこれ選んでる暇があったら勉強したほうが良いですし、現在は教材の質も量も揃ってきていると思うので、どれを読んでも大して変わりません。

現在、私はVueを使っているのでこちらを読んでみました。

## 速習Vue.js 速習シリーズ
Kindle Unlimitedだと無料で読めます。
いつも新しいジャンルを開拓するときはKindle Unlimitedで何か一冊読んでから、普通の技術書を買うことにしています。
https://www.amazon.co.jp/dp/B07BS62Z94

## 基礎から学ぶ Vue.js
有名な猫本です。
完全にゼロからの人にはキツいと思うのですが、ある程度の開発経験とフロントエンドの知識があったら普通に読めます。(全てを理解、暗記できるとは言っていない)
https://www.amazon.co.jp/dp/B07D9BYHMZ

# STEP 2 テンプレートを買う
## envato market
envato marketというテンプレートを売っているサイトが有名です。

こちらではWordpressのテーマだけでなく、ReactやVue、その他フレームワークで作られたテンプレートがたくさん売られています。
高いものでも3000円いかないぐらいで買えます。
技術書一冊買うのと同じ値段ぐらいでお手頃。

https://themeforest.net/

使い方はこちらとか。
https://nomadicwood.com/archives/3256

## 動かして改造して遊ぶ
購入したら、ローカルで環境構築して動かせるようにして遊びます。
大体はダウンロードして解凍したら既にプロジェクトとしてできているので、後はnpm installとかして必要なパッケージを入れて環境構築完了。
エディタとかIDEでプロジェクトを開いたら開発を開始できます。

テーマはこれとかいい感じ。
https://themeforest.net/item/pragmatic-vuejs-admin-template/21775201

デモとして動いている実物も見れます。
https://pragmatic.ddmweb.it/

# おわりに
いかがでしたでしょうか？

今回は意識が非常に低いフロントエンドの勉強法を紹介してみました。
確かに基本は大事だし、ちゃんと勉強するべきだと思います。

しかし、私は意識低い系…大体こんな感じで仕事をしています。

よろしかったらシェアしたり何か感想をください。
あなたのアウトプットが誰かのインプットの助けになると思います！

私の運営しているコミュニティTECH::Survivorは無料で参加できます。
月１程度でオフ会も行っていますので、もしご興味がありましたら参加してみてください。

http://techsurvivor.top
テストコードの書き方はわかったけどテストケースってどうやって挙げたらいいの？

## はじめに

炭山水です。こんばんわ。

テストって必ずする or 必ずテストコードは書くと思いますが、身近な例で「JUnitの使い方とかPHPUnitの使い方とかはわかってもいざテストケースってどんなのやったらいいかよくわからない」という声をききまして筆を執りました。

ガチなテスト論は専門書に譲るとして、本記事ではその触りというかイントロダクション的なことをお話ししようと思います。

ちなみにQiita初投稿です。本日参加したTech::Survivorのもくもく会で「Qiitaを何かしら1記事投稿すること」が課題だったのでそれ用に書いたものですｗ

TECH::Survivor
エンジニアに成長機会を提供することを目的に作られたオンラインコミュニティの勉強会アカウントです。
https://techsurvivor.connpass.com/participation/

## 対象読者とお話しする範囲

最近プログラマとしてお仕事始めたり、勉強し始めたりした人を想定しています。
※ テストってそういえばちゃんと考えたことなかったなって人も。。。読んでね？

だいたいこういう状況かなと思います。

- JUnitとかのテストコードの書き方自体はわかった
- で、どんなテストケース(パターン)挙げればいいの？


お話しする範囲ですが、テストの種類とか大きいところから話すと長くなるので、↑の状況を想定して「とあるメソッドにどういうテストを書いたら良いか」というユニットテストを例にして、具体的なやり方をお話しします。

## おさらい：そもそもシステムとは

すっごいざっくりいうと、システムって、システムに何かを入力すると何かが出てくるものです。極論すべてがこれです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298785/304b543e-871b-0dff-e9a1-cc072545446a.png)

なので、これもだいぶ極論ですが、テストって何をするものかというと「入力に対して、出力が意図したものとなっているかを確認する」となります。

図でいえば、炭と山水を入力したら「私は炭山水です」と出力されればOKですし、エラーが出たり「私は山水炭です」って出てきたらNGです。

これを想定されるすべてのパターンで行います。

## 仕様の確認

では実際にやっていきましょう。まずはテストするメソッドの仕様から。

例としてこんな仕様のメソッドを作れと言われているとします。
なんとなくですが、とある管理画面の閲覧権限チェックとかそんなのを想定です。

- アクセスしたユーザーのユーザーIDとページに許可されたユーザーIDを比較
- 許可されたユーザーIDに、アクセスしたユーザーIDが含まれるときはtrue、含まれないときはfalseを返す
- アクセスユーザーIDがEmptyの時はfalse

## 仕様を入力と出力の形に整理する

仕様を把握したら、仕様を入力と出力に分け、それぞれ個別の要素のパターンを洗い出します。とにかく全部書いてください。

値の種類についてはほんとは「同値試験」とか「境界値試験」とかあるのですがここはいったん組み合わせについてのみ話すことにします。値の種類の分け方についてはとりあえずフィーリングで読んでもらって、同値とか境界値については調べてみてください。

単体テストなので、運用上ありうるデータかどうかは、愚直に全部書くのがコツです。増やしたところで大してめんどくさくないですし、そもそも運用上ありうるデータかどうかはこのメソッドの関知するところはないためです。

ここでサボって後からテスト不足が発覚する方がめんどくさいです。

### 入力 : メソッドの引数
| 項目 | パターン | 
|:-----------|:------------|
| アクセスユーザーID | null,空文字,あり | 
| アクセス許可ユーザーIDリスト | null,空リスト,アクセスユーザー含む/含まない,リストにnullを含む/含まない, リストに空文字を含む/含まない| 

### 出力 : メソッドの返り値
| 項目 | パターン | 
|:-----------|:------------|
| 結果 | true,false | 

## 入出力パターンをテスト項目として整理

さて、では入力と出力(期待値ともいう)を組み合わせて実際のテストケースに起こしていきましょう。

コツとしては、これも愚直にやることです。まず入力の組み合わせパターンを列挙していって全部書きます。

どうせユニットテストのパラメータなんてコピペで増やせるのでガンガンやってしまいましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298785/1e4345cb-77a1-5f5e-1860-b12321ed9cba.png)

図のようにディシジョンテーブルってやつで整理すると楽です。

入力のところに組み合わせを〇で書いていって、出力のところは入力値を見てあるべき結果に〇を打つという形で書いていきます。

なお、図のテーブルは書きかけです。。。

## テストコード実装

結構ノリで書いてるので動かなかったらゴメンナサイ。
テストフレームワークは各自ご利用のもので脳内変換してください。

```java
static Stream<Arguments> checkPermissionProvider(){
    return Stream.of(
        Arguments.of(null,null,false),
        Arguments.of(null,CollectionUtils.emptyList(),false),
        //
        // ディシジョンテーブルのパターンを書いていくだけ
        //
    );
}

@ParameterisedTest
@MethodSource("checkPermissionProvider")
void checkPermissionTest(String userId, List<String> allowIds, boolean result){

    //
    // テスト対象メソッド呼んだりアサーション書いたり
    //
}
```

## おわりに

どうでしょうか？いきなりIDEを開いてテストどうしようかなとうんうんうなるより、機械的にガシガシテストがかけるの実感できますでしょうか？

特にテストコードはもうディシジョンテーブルの内容を、1ケース目のコピペで増やすだけです。

なお、余談ですが、ここでテストパターンが複雑で、そんな機械的に書けないぞ？？ってってなったら、たぶんそのメソッドが責任を持ちすぎています。設計を見直しましょうね。
Windowsで快適開発環境を目指すまとめページ

Windowsで快適な開発環境を構築することを目標として、記事にまとめていこうと思います。
興味のある方は下記からどうぞ！
少しでも参考になれば幸いです。

* [VSCode + DockerでWindowsのLinux(コマンド)開発環境を構築してみる](https://qiita.com/kamina/items/9aeb038545515851d8d0)
* [Windowsの新しいターミナルソフト「Windows Terminal」を使ってみた](https://qiita.com/kamina/items/ee2654ed195d96cfc152)
* [WSLのUbuntu 18.04でMySQL 5.7をセットアップ](https://qiita.com/kamina/items/35169738c57978b669c0)
言語処理100本ノック(4本目で無事撃沈)

#はじめに
この記事は[TECH::Survivor](https://techsurvivor.connpass.com/event/138294/)で開かれたもくもく会の記事です。

## 課題内容
今回の課題内容はこちら

### Qiitaの記事を書こう！内容は問わない！

とはいえ、生き残るためには[二段階認証](https://qiita.com/seno0x00/items/81c435550d847e31e282)ついて調べました（キリッ）だけだとマサカリぶん投げられて乙ってしまうので、[こんなお題](http://www.cl.ecei.tohoku.ac.jp/nlp100/)を[主催様](https://twitter.com/shiraponsu)から賜りましたので、やっていこうと思います

### 言語処理100本ノックとは
言語処理100本ノックは，実践的な課題に取り組みながら，プログラミング，データ分析，研究のスキルを楽しく習得することを目指した問題集です（原文ママ）

要は、実戦形式でプログラミングガシガシ書いて僕のような園児ニアからGAFA行くようなレベルのつよつよエンジニアを作るための基礎を作るためにノックしていくよ！というものです。

###推奨言語pythonの開発環境Jupyter

[主催様](https://twitter.com/shiraponsu)に[Jupyter](https://jupyter.org/install.html)なる開発環境も紹介されたので、早速[こちらの記事](https://techacademy.jp/magazine/17430)を読みながらインストールします。

#### 導入

インストール後、Jupyterの下のLaunchをクリックします

![スクリーンショット 2019-07-13 13.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94048/52dcc8b3-e28b-d40b-2b21-8737aae48be7.png)

するとJupyter Notebook（下のブラウザ）が立ち上がります

![スクリーンショット 2019-07-13 12.59.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94048/67c81f9f-b2b6-a6f7-d9a5-3c82c18d73b3.png)

画面右上のNewからPython3をクリックしたら、次の画面が立ち上がります
![スクリーンショット 2019-07-13 13.06.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94048/55040cda-e4d4-99a8-ece1-bc33a0c9d570.png)

### 世界に挨拶する

せっかくなのでJupyter世界に挨拶してみます。
こんにちはー

![スクリーンショット 2019-07-13 13.11.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94048/21b5189d-1874-6db3-12f3-349d05954d91.png)

ちゃんと挨拶が返ってきました。

### 折れ線グラフを書く

挨拶が返ってきたので折れ線グラフなどを書いてみます

![スクリーンショット 2019-07-13 13.36.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94048/656f35b3-3cec-16cc-59f0-4eb09e1e7aed.png)

めちゃくちゃいい加減な折れ線グラフが作れたところでノック受けたいと思います

### 100本ノック開始！

さあ、[言語処理100本ノック](http://www.cl.ecei.tohoku.ac.jp/nlp100/)をするぞ！

![スクリーンショット 2019-07-13 16.38.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94048/feac0d5f-d8c9-46eb-e3d1-9193e6cbdad5.png)

###無事ボコボコにされました。是非も無し

03.円周率までは解けたんだ……次の04.元素記号のやつなんだよこれorz

python何もわからん状態になって4本目（0番からスタートしてなので実質5本目）でK.O.されました。
これはお金出してプログラミング習ったほうがいいんですかねえ……

### まとめ（あとポエム的な何か）
・Jupyterというpythonにとって便利な開発環境がある
・言語処理100本ノックで滅多打ちにされることは自分が無能であるということが知れる良い機会になる
・ググる能力は大事
・ググる能力が無い人間から淘汰される（気がする）

それにしても、自分のプログラミングレベルの低さには我ながら呆れる。
毎日書いてないからとしか言いようがない。コードを書かない仕事をやっていたので
逃げていた部分も大いにあるが、これじゃあいつまで経っても底辺のままで終わる
せっかく上京したんだし、金も時間も惜しまずに食わず嫌いせずにプログラムを書いていこう
………あくまでも生活に無理のかからない範囲で

あ、余談ですが午前中に[このページの写経](https://petitetech.com/c_block_puzzle/c_block_puzzle2.html)してました
ただ、MAC環境で書くとコンソール環境の違いで四角が重なって見てくれが悪くなるので
課題の記事としてはお蔵入りとしました。次は勉強がてらテトリス作成します


###４問目以降を解いた記事はこちらから
[4問目](https://qiita.com/seno0x00/items/935fd3c776cdd6bf66c0)
Visual Studio 2019 Xamarin環境構築時にAndroidSDKセットアップでつまづいた話 ＆ ファイアウォール/プロキシ設定を見直してみよう

#はじめに
`Visual Studio 2019` `バージョン16.1.6` にて `Xamarin`による`Android`アプリ開発環境を構築しましたが、`Android SDK`関連の環境構築が行えないトラブルに遭遇しました。結果的には`Visual Studio 2019` `バージョン16.0.3`を再インストールすることでトラブルを回避することができました。
　※2019/07/09リリースのバージョン`16.1.6`までの話のため、それ以降のバージョンは対応済みの可能性があります

プロキシが結果的には絡んでいたように思いますが、自社側のプロキシ/ファイアウォール関連設定が問題だと思っていたため、トラブル解決まで多くの時間を要してしまいました。

環境によっては、プロキシ/ファイアウォールでトラブルが発生してしまうこともあるかと思います。まずは下方記載の **ファイアウォール/プロキシ周辺を見直してみよう** を参考にネットワークセキュリティ周辺を見直してみることが早期解決への糸口になるかもしれません。

#何が発生していたか
+ Android SDK Manager
  + Android SDK が選択/ダウンロードできない(Android8.1 Oreo表示はあるが必要な全ファイルがインストールされていない)
  + Android ツールが選択/ダウンロードできない
  + `Offline mode`の表示があり、Android SDK情報がリポジトリから取得できていない
![ASDK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246506/54c1f27e-92b3-f8fd-c6e2-e3068802723d.png)
+ Android Device Manager
  + プロセッサ/OSの選択肢がない  
![Device Manager_New Device.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246506/7872a31a-fe49-aaa4-bd0c-f98d960f2551.png)
  + Android Device Managerが死ぬ(プロセッサ/OSコンボボックスをさわったのちのキャンセル押下後など)
![基本デバイス選択後.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/246506/797a7594-2d96-582f-46ac-8e9effecb9f1.png)

#対策
+ バージョンが`16.1.X`であればアンインストール後、`16.0.X`のインストールを行う
  + 同僚が`16.0.3`のオフラインインストールを作成し保持していてくれて、それをインストールしました。 
+ [Microsoftの回答：06月12日 10:04](https://developercommunity.visualstudio.com/content/problem/600284/xamarinandroid-sdk-manager-offline-mode-after-upgr.html)にあるようにバグFIXしているようなので更新を待ちましょう。
  + 2019/07/09 現在のバージョン`16.1.6`では未対応

#トラブル理由
下記リンクにあるように`Visual Studio 2019`バージョン`16.1.X`系のバグです。
[Xamarin.Android SDK manager offline mode after upgrading VS2019](https://developercommunity.visualstudio.com/content/problem/600284/xamarinandroid-sdk-manager-offline-mode-after-upgr.html)

ただ、上記リンク先の環境は `Windows10 Pro` + `16.1.X`のようですが、社内でトラブル発生した環境は `Windows7 Pro` + `16.1.6`です。OSによらず、PCやネットワーク環境しだいでトラブルが発生するようです。なお自宅の `Windows10 Pro` + `16.1.6`ではトラブル再現しませんでした。

#つまづいたときに見ると役に立つかもしれないこと
##ログをのぞいてみよう
下記ディレクトリにXamarin関連のログが記録されます。
`C:\Users\<user.name>\AppData\Local\Xamarin\Logs\16.0`

私の環境ではトラブル発生時に下記ログが記録されていました。

```2019-07-10_11-41-13.9452.Ide.log
Xamarin.VisualStudio.Android.Setup.AndroidSdkSetup|Error|0|リモート 
サーバーがエラーを返しました: (407) プロキシ認証が必要です
```

##ファイアウォール/プロキシ周辺を見直してみよう
社内などでファイアウォールやプロキシ サーバーなどのセキュリティ対策を取っている場合には、下記サイトを参考に解放すべきドメイン等を見直してみましょう。
https://docs.microsoft.com/ja-jp/xamarin/get-started/installation/firewall
https://docs.microsoft.com/ja-jp/visualstudio/install/install-and-use-visual-studio-behind-a-firewall-or-proxy-server?view=vs-2019

#おわりに
社内は認証プロキシ環境のため、社内プロキシ/ファイアウォール関連のトラブルかと思いきや、`Visual Studio 2019`の上位バージョンによるバグが原因でした。

上述したように社内は認証プロキシ環境なため、インストール時にネットワークセキュリティ絡みで手間取ることが多いです。ただ今回はどうやらマイクロソフトのバグで手間取りました。マイクロソフトも`16.1.X`系でのバグを認めているようなのでプロキシ絡みのバグが16.1.X`系に入り込んだと推察しているのですが…はたして…

少しでも本情報がお役に立てれば幸いです。


#環境
+ Visual Studio 2019 Version `16.1.6`:問題発生したバージョン
+ Visual Studio 2019 Version `16.0.3`:問題発生していないバージョン
  + 他グレードVisual Studio(e.g. VC2017,VS2013)は未インストール
+ Xamarin 
+ Android Studio
  + 未インストール
+ Windows7 Pro
パチンコ業界からの未経験IT転職

#はじめに
私は大学卒業後、パチンコ業界に新卒で就職後、未経験でIT業界に転職をした。
未経験からSESに入って1年目の駆け出しエンジニアではあるものの、
主に現在パチンコ業界で働いていて、IT転職するか悩んでいる人向けに記事を書いていこうと思う。

#なぜ私がパチンコ業界に入り、ITに転職することにしたのか
新卒でパチンコ業界に入ったが、学生時代からパチンコを打っていたかというとそうではない。
パチンコ業界に就職して、パチンコを初めて打った口である。
（当時流行っていたソーシャルゲームのガチャにけっこう有り金を突っ込んでいたため、ガチャに近いパチンコにハマるのは時間の問題であった。）

そんな私がなぜ新卒でパチンコ業界に入ったかというと、
・学生時代のアルバイト経験をもとに接客が向いていると分かったから。
・当時は経営に興味があり、大きなお金を動かす経験が若くしてできるチャンスがあったから。
・お給料が良かったから。

実際に働いてみてどうだったかというと、
・学生時代のアルバイト経験をもとに接客が向いていると分かったから。
→実際接客するのは楽しい。クレーム対応が他の業界より多いものの、それ以上に常連のお客様と接する時間が私のモチベーションになっていた。
・当時は経営に興味があり、大きなお金を動かす経験が若くしてできるチャンスがあったから。
→そこの地位に上り詰めるには相当の努力が必要。もちろん、営業にあたっての知識が必要になるが、それ以外にも上司と部下に気に入られるとか、仕事を中心になって回すために残業しまくるとか、そういった要素の努力が求められる。
・お給料が良かったから。
→実際とても良かった。店長に上がれなかったら、一生平社員のままで給料が横ばいなので詰む。
店長の枠も多いわけではない。実力主義の世界。

あくまで個人的な意見だが、この業界に携わると仕事のために（単に好きだから）パチスロを打つ機会が増える可能性が高い。また多くの人が勝つための立ち回りが実行できないと思うので出費と時間の浪費具合が上がると思う。

他にメリット　デメリットを挙げると、
・パチンコ業界で働いた経験は転職活動においては不利。接客経験や部下を動かす経験がアピールできるものの、転職市場ではあまり評価されない傾向が強いと感じた。
→３０代で店長に上がれなかったら終わりなので、早めに将来の方向性は見極めた方が良い。
・業界自体は落ち目だが、そもそもの市場規模が大きいのと様々な利権が絡み合っていたり、マイナスイメージはあってもパチスロの需要は絶えないので業界自体は安泰だと考えている
→福利厚生を削ったり、給与がある程度下がることはあるかもしれないが、ある意味安定している業界だと考えている
・基本シフト勤務なので、生活リズムが安定しない。
→辞めた理由の一つ。慣れればいけると考えていたが、それが10年以上続くと考えたら無理だった。シフト制で回しているので、深夜の２時に家について寝て、次の日の朝早起きして働くことが定期的に起こる。新台入れ替えの時は、閉店後入れ替え作業を開店時間ギリギリまで行って、そのまま早番でその日の営業を迎えるということもあった（通し勤務）。店長職になると、設定を組むなど、店長にしか行えない作業が閉店後に発生するため、出世しても深夜勤務がほぼ毎日必須という事態になり得る。
・社員が休みを取りづらい
→社員に休みを回すために常にギリギリの人数でシフトを回していた。休んだら周りに迷惑をかけるという理由で、体調が悪かろうが出勤していた。有給を使ったことがなかった。アルバイトの採用やアルバイトさんに出勤日についての交渉を頑張っていたにも関わらず、状況が改善されなかったのだから、改善の余地はあるが難しい問題なのだろう。

ITに転職した理由は
・元々ゲームが好きでプログラミングに興味があった（適性があった）
・ITの人手不足と言われている中で、転職しやすい業界であった
・給料が上がりやすい
・手に職ついて、将来の安定につながる
・お盆休み、年末年始が取れるから

実際にITに転職してどうだったかというと
・元々ゲームが好きでプログラミングに興味があった（適性があった）
→実際プログラミングをしてみて、自分にあっていると感じた。
・ITの人手不足と言われている中で、転職しやすい業界であった
→転職前の学習は必須だが、そこを乗り越えたら未経験でも転職できるのではないだろうか
・給料が上がりやすい
→入社当初は給料が低めに抑えられていたものの、昇給スピードがかなり早い
・手に職ついて、将来の安定につながる
→今SESの会社に所属して１年目のペーペーではあるが、就職やフリーランス、起業と様々な選択肢が現実的なものとして見え始めている。
・お盆休み、年末年始が取れるから
→実際、普通に有給が取れます。連休があるし、体調が悪い時は素直に休める。そんなことが当たり前じゃない環境にいた私にとっては、ただただ最高だった。

#転職するにあたって私がしたこと
まず転職する前にプログラミングに適性があるかを知った方がいいと考え、
現職で働きながら、勉強し転職活動を行なった。

具体的には、
・まず知人友人にIT業界で実際に働いている人に話を聞きに行った
→IT業界に入った後も、現場での立ち回り方など聞かせてもらっているような仲
・何の言語でもいいのでプログラミングの勉強をすること
→私の場合はJavaの勉強をして、Javaの資格（Java SE 7/8 Bronze）を取った。
Javaの資格は転職時の面接で評価されて役に立ったし、転職後の現場を決める面談でも役に立った。一石二鳥。

自分がプログラミングに適性があると分かった後の選択肢として、
・貯金があるならプログラミングスクールに入るのもあり
・職業訓練を受ける
→お金もらいながら勉強できるのでありだと思う。

私の場合は、大きな貯蓄があったわけではなかったので、働きながら転職活動をし、SESに就職することにした。

#まとめ
IT業界に入って１年目ですが、転職してみて悔いはないです。
大学卒業後、右往左往しましたが、やっとこのタイミングでやりたい仕事が見つかってよかった。
将来に不安があったり、今いる環境に不満があったら、一度転職活動をしてみるべきだと思います。私自身転職までの過程がとても辛かったけど、その頑張りの実りはあるはずです。
ハイアンドローゲームのアニメーションメモ

```index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ハイアンドローゲーム</title>
  
</head>
<link rel="stylesheet" href="style.css">
<body>
  <div class="container">
    <div class="dealer">
      <div class="card">1</div>
    </div>
    <div class="controls">
      <div class="btn" id="higher">HIGHER</div>
      <div id="result">result</div>
      <div class="btn" id="lower">LOWER</div>
    </div>
    <div class="player">
      <div id="wrapper"><!--カードの回転を表裏まとめておこないたいためにwrapperで囲む.
      それからjsで後々処理するのでidをつける-->
        <div class="card card-back">?</div>
        <div class="card card-front">5</div><!--カードを回転させるには裏表が必要-->
      </div>
      

    </div>
  </div>
<script src="main.js"></script>
</body>
</html>
```

```style.css
body {
    background: #088A4B;
    font-family: Arial, sans-serif;
    font-size: 22px;
  }
  
  .container {
    width: 300px;
    margin: 100px auto;
    font-weight: bold;
    text-align: center;
  }
  
  .dealer,
  .player {
    width: 50px;
    height: 70px;
  }
  
  .controls {
    width: 200px;
    height: 70px;
    position: relative;
  }
  
  .dealer,
  .controls,
  .player {
    float: left;
  }
  
  #result {
    line-height: 70px;
    color: #f1c40f;
  }
  
  .btn {
    cursor: pointer;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: green;
    border: 5px solid #fff;
    font-size: 14px;
    color: #fff;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
    line-height: 70px;
    position: absolute;
    /*100 - 40 = 60*/
    left: 60px;
  }
  
  #higher {
    top: -85px;
  }
  
  #lower {
    top: 70px;
  }
  
  .card {
    width: 50px;
    height: 70px;
    background: #fff;
    border-radius: 5px;
    line-height: 70px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2);
    
  }
  
  .card-back {
    background: #f1c40f;
    color: #fff;
    }
#wrapper:active { /*クリックしている間の処理*/
    transform: rotateY(180deg);　/*180度回転*/
}

.card-front {
    transform: rotateY(180deg); /* :の後ろは必ず1文字開ける */
}
#wrapper{
    position: relative;
    transform-style: preserve-3d; /* 子要素も含め同じ空間で回転する*/
    transition: 0.3s;
}
.card-back,
.card-front{
position:absolute;　/*2枚のカードを重ねる。*/
top:0;
left:0;
user-select: none;
backface-visibility: hidden;/*回転するときの要素のチラつきを防ぐ*/
}

.player{
    perspective:100px;
}
/*カードがクリックしているあいだ0.3秒で裏表ひっくりかえる*/


```
git-flowを用いた開発フロー

#ターゲット
・Gitを学び始めた駆け出しエンジニアの方
・Gitブランチングってなに？って方
・git-flowを勉強する必要がある方

#はじめに
Gitとは、ソフトウェア開発をするエンジニアにとって、必要不可欠の**バージョン管理システム**です。

参考：
・[Git公式ドキュメント（日本語版）](https://git-scm.com/book/ja/v2)
・[【絶対理解できる】Gitとは？特徴やできることまとめ！](https://www.sejuku.net/blog/5756)
・[【Git入門】ブランチ(branch)とは？メリットや使い方を解説！](https://www.sejuku.net/blog/71071)

しかし、チーム開発をする際には特に**ブランチの運用ルール**を定める必要があります。
ルールなしに運用すると、チームメンバーがそれぞれ無秩序に開発を進めリポジトリの整合性が取れなくなり、開発が止まってしまいます。

この問題に対処するために考え出されたのが**ブランチモデル**です。
Gitのブランチモデルには、
・git-flow
・GitHub Flow
・GitLab Flow
・GitFeature Flow
など数種類存在します。

今回はその中でも、git-flowについて紹介します。

#git-flowとは？
git-flowは、オランダのエンジニア**Vincent Driessen**氏が提唱した**「A successful Git branching model」**というブランチモデルを導入するためのプラグインです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365320/2ef6c78b-b6db-f848-bd5f-8d9fb1fd1ee4.png" width=60%>

参考：
・[git-flow cheatsheet（日本語版）](https://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html)
git-flowには５種類のブランチがあります。


**・masterブランチ**
直接コミットせず、マージを行うだけのブランチ。
**・developブランチ**
開発の中心となるブランチ。masterブランチから切る。masterブランチ同様、直接コミットせず、developブランチから切ったfeatureブランチをマージしていく。
**・featureブランチ**
実際に各機能を開発するブランチ。developブランチから切り、作業が終わったらdevelopブランチにマージする。基本的にはマージ完了後に削除する。
**・releaseブランチ**
ソフトウェアをリリースするために使うブランチ。developブランチから切り、ここではリリース作業のみを行う。
**・hotfixブランチ**
ソフトウェアのリリース時に発覚した緊急の不具合を修正するためのブランチ。masterブランチから切る。

#git-flowの開発フロー
**1. git-flowインストール（Mac）**
Homebrewでパッケージをインストール。

```
brew install git-flow
```

・インストール参考（Windows、Linux）
[git-flowのインストールとブランチ運用前のリポジトリ準備 (1/2)](https://www.atmarkit.co.jp/ait/articles/1311/28/news042.html)

**2. ローカルリポジトリの初期化**
 
```
$ git flow init
```

**3. ブランチの状況を確認**

```
$ git branch
```

```:結果
* develop
  master
```

**4. featureブランチを切る**
ここでは「sample」というブランチ名にする。developブランチから切られる。

```
$ git flow feature start sample
```

**5. 作成したfeatureブランチ（sample）上で開発する**

**6. 開発が終わったら、featureブランチ（sample）をdevelopブランチにマージする**

```
$ git add .
$ git commit -m "hogehoge"      
$ git flow feature finish sample
```
３つ目のコマンドで、マージ・sampleブランチの削除・developブランチへの移動をしてくれる。

**7. ローカルのdevelopブランチをリモートにプッシュする**

```
$ git push origin develop
```

**8. GitHubでプルリクエストを出して、レビューしてもらう**

**9. GitHub上でマージしたら、再度developブランチからfeatureブランチを切り、次の開発を進める。**

#※ おまけ
**・他の人により更新されたリモートのdevelopブランチを、ローカルのdevelopブランチに反映する場合（随時）**

```
$ git checkout develop
$ git pull origin develop
```

**・開発したfeatureブランチ（sample）をリモートへプッシュする場合**
 
```
$ git flow feature publish sample
```
**・他の人が開発したfeatureブランチ（sample）をローカルにプルする場合**

```
$ git flow feature track sample
```

#さいごに
以上でおわりです。
git-flowを採用しているベンチャーも多いので、駆け出しエンジニアの方も勉強しておいて損はないと思います。
一方、git-flowは少々煩雑で、メンバーが運用できるようになるまでの初期コストが高いともいわれています。そのため、よりシンプルなブランチ運用モデルであるGitHub FlowやGitFeature Flowも勉強することをオススメします。（僕も勉強します）

#参考文献
・[git-flowの使い方 - SMART 開発者のためのウェブマガジン](https://rfs.jp/server/git/03git/howto-git-flow.html)
・[git-flowのインストールとブランチ運用前のリポジトリ準備 (1/2)](https://www.atmarkit.co.jp/ait/articles/1311/28/news042.html)
・[git-flow cheatsheet（日本語版）](https://danielkummer.github.io/git-flow-cheatsheet/index.ja_JP.html)