OmniAICreator/Qiita-1.07M huggingface dataset:
[JS]if文の省略形が、場合によっては三項演算子より手軽な件

# 1.一般的なif文のサンプル
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="riotam4" data-slug-hash="aeOYEd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="三項演算子より手軽なif()">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/aeOYEd/">
  三項演算子より手軽なif()</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```javascript:一般的なif文
      if(this.input !== ''){
         alert('入力を確認。')
      }
```

# 2.三項演算子のサンプル
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="zgGWRG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="三項演算子より手軽なif(三項演算子)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/zgGWRG/">
  三項演算子より手軽なif(三項演算子)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```javascript:三項演算子で書いたif文
this.input !== '' ? alert('入力を確認。') : ''
```

## 注意
if文の中で処理したいことが、複数行になる場合は使えない。

# 3.if文省略形のサンプル
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="html,result" data-user="riotam4" data-slug-hash="GVJxQy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="三項演算子より手軽なif(ワンライナー)">
  <span>See the Pen <a href="https://codepen.io/riotam4/pen/GVJxQy/">
  三項演算子より手軽なif(ワンライナー)</a> by riotam (<a href="https://codepen.io/riotam4">@riotam4</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```javascript:if文省略形で書いたもの
if(this.input !== '') alert('入力を確認。')
```

## 注意
2行目以降は、if文を出ているという扱いになるので、注意。

# つかいどころ
- ifの中身を複数行書くなら、1. 一択。
- 1行で書けるなら2. でも書ける。
- さらに、falseで何も処理しないなら、3. でも書ける。
知っておくべき最低限のMarkdown記法

GitのReadmeやQiita等で使用されているMarkdown記法。
就職先のプロジェクト管理ツールがMarkdown記法なので、入社前に少しでも覚えておくと楽だよとアドバイスもらったので、どうせなら自分が見やすい理解しやすいようにQiitaにまとめようと思い記事にしています。

Markdown記法については多くの記事がありますがあえて自分の手でまとめています。

# Markdown記法の何を覚えればいいの？
正直、エンジニアがプロジェクト管理の中で使用するMarkdown記法ってどんなものがあるのかまったく想像がつきません。
なので、エンジニア歴4年の我が家のメンター様(旦那)にアドバイスをもらい、よく使いそうなもののリストを作ります。

入社前の限られた時間ですべてのMarkdown記法を覚えることは不可能ですからね。
似たような境遇の方がいらっしゃったら、参考にしていただければと思います。

# 入社前に知っておくべきMarkdown記法
- 見出し
- 箇条書き
- 表
- リンク
- 引用
- コード
- テキスト装飾

このあたりをおさえておけば一先ずは乗り切れるのではないでしょうか。
上記以外のMarkdown記法については、使用する際に調べるので問題ないと判断しました。

## 見出し
`#` を先頭に記述することで「見出し」にすることができます。
Markdown記法ではh1～h6まで記載可能です。

```
# 見出し１(h1)
## 見出し２(h2)
### 見出し３(h3)
#### 見出し４(h4)
##### 見出し５(h5)
###### 見出し６(h6)
```

## 箇条書き
`-` を先頭に記述することで箇条書きにできます。

- テキスト１
 - テキスト２

```
- テキスト１
　- テキスト２
```

## テーブル(表)
`|---|---|` で区切って記述すればテーブル表記になります。
`:---` で左揃え、`:---:` で中央揃え、`---:` で右揃えになります。
特に指定しなければ左揃えになります。

|りんご|ごりら|らっぱ|
|:---|:---:|---:|
|パイナップル|ルビィ|イルカ|
|柿|キムチ鍋|ベルギー|
|イカスミ|みんみんぜみ|みみずく|

```
|りんご|ごりら|らっぱ|
|:---|:---:|---:|
|パイナップル|ルビィ|イルカ|
|柿|キムチ鍋|ベルギー|
|イカスミ|みんみんぜみ|みみずく|
```

## リンク
`[リンク名](URL)`でリンク表記になります。

[Google](https://www.google.com)

```
[Google](https://www.google.com)
```

## 引用
`>` を先頭に記述することで引用表記になります。
> テキスト１
>> テキスト２

```
> テキスト１
>> テキスト２
```

## コード
[```]を上下段に記述することでコード表記になります。

```
console.log(hoge)
```

## テキスト装飾
Markdown記法ではテキストを装飾する記述がいくつかあります。

- *テキスト*
- **テキスト**
- ***テキスト***
- ~~テキスト~~
- <font color="red">テキスト</font>
- `テキスト`

```
*テキスト*
**テキスト**
***テキスト***
~~テキスト~~
<font color="red">テキスト</font>
`テキスト`
```

# まとめ
入社前に最低限知っておいた方がよさそうなMarkdown記法をまとめてみました。
QiitaではじめてMarkdown記法というものの存在を知ったレベルなので、本当に基礎中の基礎をまとめたような感じです。

業務で使用する中で頻繁に使用するような記法が出てきたら追記しようと思います。
また、間違え等あればご指摘いただけると幸いです。
【初心者向け】BlockchainをGolangで実装する

###【初心者向け】BlockchainをGolangで実装*する

####想定レベル
* pythonを多少触れる人
* Html,CSS,JSを触れる人
* ブロックチェーンの基礎が分かってる人

---

####達成目標
* Goを学ぶ（Goで立てる）
* BlockChainをコードから学ぶ（可視化する）

---

####タイムスケジュール
|時間|内容|
|:--|:--|
|13:30 - |開場・受付開始|
|14:00 - 14:05 |オープニング|
|14:05 - 14:30 |自己紹介 全員|
|14:30- 16:00 |Goでブロックチェーンの実装を行う|
|16:00 - 16:30 |成果発表(フリートーク）|
|16:30 - 16:40 |クロージング (アンケート)|

---

####資料
『WEBbench事前資料１』<a href="https://www.slideshare.net/ssusereffcf2/go-140023958">![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160422/c115de79-505e-5aae-38a2-b0b1be4cee92.png)</a>
『事前資料２』<a href="https://www.slideshare.net/ssusereffcf2/414-140662464">![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160422/bc65fc85-53c2-9bc3-9387-132bc0fae8ab.png)</a>
[『ブロックチェーンオンライン学習サイト作ったので紹介』](https://qiita.com/kubocchi/items/46761fa1416817489a25)

---

####メモメモ
#####事前１=Goをインストール=
まず、Goとは、、、
Google社によって開発されたシンプルな言語（プログラマーの生産性を向上するために作られた）
特徴として、表現力豊かにコードを簡潔に記述することが可能で、軽量な並列処理でマルチコアやネットワーク化された複雑なシステムを構築するのに向いている言語。

■手順
Homebrewをinstallしているので、以下実行。

~~~terminal.view
$ brew install go
〜インストールだらだら〜
$ go version
go version go1.12.7 darwin/amd64
~~~
install完了。gRPCの関係上go 1.6以上をinstallすること。（最新版をinstallしてればよい。）

#####事前2=gRPCをインストール=
まず、gRPCとは、、、
Googleによって開発されたRPC (Remote Procedure Call) を実現するためにプロトコルの1つ。
特徴としてProtocol Buffers を使ってデータをシリアライズし、高速な通信を実現できる。

■手順
以下実行

~~~terminal.view
$ go get -u google.golang.org/grpc
~~~

Go用のprotocをinstall＆PATHを通す。

~~~terminal.view
$ go get -u github.com/golang/protobuf/protoc-gen-go
$ export PATH=$PATH:$GOPATH/bin
~~~

サーバを立ち上げるために、まずblockchain.protを ~~/go/prot配下に作成。

~~~blackchain.prot
syntax = "proto3";

package proto;

// The blockchain service definition
service Blockchain {
    // Sends a AddBlockRequest Return AddBlockResponse
    rpc AddBlock(AddBlockRequest) returns (AddBlockResponse) {}
    rpc GetBlockChain(GetBlockchainRequest) returns (GetBlockchainResponse) {}
}

// The request AddBlockRequest containing the data
message AddBlockRequest {
    string data = 1;
}

// The request AddBlockResponse containing the hash
message AddBlockResponse {
    string hash = 1;
}

message GetBlockchainRequest {}

message Block {
    string hash = 1;
    string prevBlockHash = 2;
    string data = 3;
}
 
message GetBlockchainResponse {
    repeated Block blocks = 1;
}
~~~

protoコマンドがinstallされてないので、

~~~terminal.view
$ brew install protobuf
~~~

blockchain.protをコンパイル

~~~terminal.view
protoc --go_out=plugins=grpc:. prot/blockchain.prot
~~~
【Windows】GithubとTortoiseGitのSSH設定

新しいデバイス買うたびに設定しているのですが、いつも忘れるので忘備録を兼ねて投稿します。

# GitHub設定

## 0.Git for WindowsとTortoiseGitをインストール
Chocolateyを使うと便利です。

````
cinst -y git tortoisegit
````

## 1.GitBashでSSHキーを作成する

コマンドプロンプトではなくGitBashを使うので注意(念のため)

````
ssh-keygen -t rsa -b 4096 -C "メールアドレス"
````

ファイル名->そのままでOK
パスフレーズを設定する
ユーザープロファイルの箇所に公開鍵(id_rsa.pub)と秘密鍵(id_rsa)が作成される

````
# GitBash
ls ~/.ssh/
# コマンドプロンプト
dir %USERPROFILE%\.ssh
````

## 2.公開鍵の中身をコピーしてGitHubにアップロードする
````
clip < ~/.ssh/id_rsa.pub
````

## 3.Web画面よりGithubにSSHを設定する
## 4.コマンドラインで接続できるか確認する

````
ssh -T git@github.com
````

# TortoiseGitの設定
## 5.TortoiseGitと同じ箇所にあるputtygenを起動する
C:\Program Files\TortoiseGit\bin
**puttygenは最新である必要がある**

## 6.ファイルよりid_rsaを読み込みキーフレーズを入力し、ppk方式で保存する

## 7.ppkファイルはGit Clone時にPutty認証のロードの箇所で設定する

## Gitの設定を行う
````
git config --global user.name "First-name Family-name"
git config --global user.email "username@example.com"
````

finish!
SATySFi の可変参照を使って自動で番号を振る

#### はじめに
とりあえず動くものを書きました、という姿勢の軽薄な記事です。

#### 環境
- Mac OS X Mojave 10.14.5
- SATySFi 0.0.3

#### 目的
SATySFi で期末試験の問題を組版したい。
そのために、大問用のコマンド
`+question`: inline-text → block-text → block-text
と小問用のコマンド
`+qitem`: inline-text → block-text
を用意し、本文中で次のように書けるようにする。

```
+question{次の各主張の真偽を述べよ（答えのみでよい）。}<
  +qitem {
    ところで、カルタゴは滅ぼされるべきである。
  }
  +qitem {
    それにつけても、カルタゴは滅ぼされるべきである。
  }
  +qitem {
    とはいえ、カルタゴは滅ぼされるべきである。
  }
>
```
結果として、次のように出力されるようにしたい。
![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88291/1c6456c5-c95d-bc21-4aa2-fef5863c208e.png)

ポイントは、大問と小問の番号を自動で振ること。
LaTeX ならカウンターを使うところだが、SATySFi ではどうすればいいのだろうか。

### 解決
可変参照 (The SATySFibook 3.2.3; p.57) を使って実現する。

プリアンブルに次のように書いておくと、上の通りのことができる。
なお、パッケージは stdjabook を使っている。

```exam.saty
let-mutable question-number <- 0
let-mutable qitem-number <- 0

let-inline ctx \q-num it = 
  let size = get-font-size ctx in
  let ctx-enlarge = set-font-size (size *' 1.5) ctx in
    read-inline ctx-enlarge {〔#it;〕}

let-block +question lead bt =
  let () = question-number <- !question-number + 1 in
  let () = qitem-number <- 0 in
  let it-num = embed-string (arabic !question-number) in
 '<
  +pn {
    \q-num{ #it-num; } #lead;
  }
  #bt;
>

let-block ctx +qitem ib-body =
  let () = qitem-number <- !qitem-number + 1 in
  let size = get-font-size ctx in
  let it-num = embed-string (arabic !qitem-number) in
  let ib-head = read-inline ctx { (#it-num;) } in
  let ib-indent = inline-skip ((size *' 0.88) *' 1.5) in
  let ib-sep = inline-skip ((size *' 0.88) *' 0.5) in
    line-break true true ctx
      (ib-indent ++ ib-head ++ ib-sep ++ (read-inline ctx ib-body) ++ inline-fil)
```

#### 簡単なコメント
最初の 2 行で、大問用の「カウンター」 `question-number` と小問用の「カウンター」 `qitem-number` を用意している。
4〜7行目は大問番号の整形用のコマンド `\q-num` の定義。
9〜18行目が大問用コマンド `\question` の定義で、最初に `question-number` に 1 を足し、`qitem-number` をリセットしている。The SATySFibook p.82 にある `+section` の実装も参考にした。
20行目から最後までが小問用コマンド `+qitem` の定義。


#### 参考文献
Takashi Suwa, The SATySFibook v1, https://booth.pm/ja/items/1127224
【VBA】WEBページを開く

#Excel VBAでWEBページを開く方法
　VBAでURLの分かっているWEBページを開く方法をまとめます。
【参考】http://officetanaka.net/excel/vba/tips/tips42.htm#extension02

##■InternetExplorerを指定して開く方法
```vb
Sub OpenWebPage()
  Dim URL As String
  Dim IE As Object
  Set IE = CreateObject("InternetExplorer.Application")
  URL = "https://www.google.com/"
  With IE
    .Navigate (URL)
    .Visible = True
  End With
  Set IE = Nothing
End Sub
```
CreateObject関数でIEを制御します。
もしくは**EXPLORER.EXE**を使用して開く方法もあります⇩。

```vb
Sub OpenWebPage()
  Shell "EXPLORER.EXE https://www.google.com/"
End Sub
```
ここで、**C:\Program Files\Internet Explorer**にはデフォルトでPathが通っていないため、

```vb
  Shell "IEXPLORER.EXE https://www.google.com/"
```
とするとエラーとなります。そこで、エクスプローラ（**EXPLORER.EXE**）を使用して開くという方法をとっています。引数にURLを指定してエクスプローラを実行するとIEでページが表示される仕様となっています。

##■ExcelのHyperlinkを使う方法
```vb
Sub OpenWebPage()
  Range("A1").Hyperlinks(1).Follow NewWindow:=True
End Sub
```
⇧はセル（この場合はA1）にハイパーリンクが設定されている場合に有効です。ハイパーリンクが用意されていない場合は、⇩のようにハイパーリンクを作ることもできます。

```vb
Sub OpenWebPage()
  ActiveSheet.Hyperlinks.Add( Anchor:=Range("A1"), _
    Address:="https://www.google.com/", _
    TextToDisplay:="Google").Follow
End Sub
LIFULL FabのイベントでArduinoのLチカやってみた

株式会社LIFULLのファブリケーションスペース[LIFULL Fab](https://fab.lifull.com/)で[半蔵門.ino 第1回 手ぶらで入門！Arduino初心者向け電子工作ワークショップ](https://hanzomon-ino.peatix.com/)というイベントが開催され、私も電子工作に少し興味があったので参加してきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127762/0ce73adf-0ae4-0f97-d275-d4985d8a47e2.png)

3Dプリンタで整形した鮫くんに、Arduinoで「音に合わせて点灯する」機能を付けるというワークショップです。詳しくは[動画](https://www.youtube.com/watch?v=EitR7KfvU0g)を見てください。

## キットを作ってみる

はんだ付けするのかと思ってわくわくしたのですが、今回はお手軽に「ブレッドボードに各モジュールを差し込んでいく」形で実装しました。

![iOS の画像 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127762/998384fb-d559-7bb3-976d-681c9dc93029.jpeg)

配線が出ていてサイバーな感じがするサメです。ちなみにこのサメのボディは、講師の太田さんが自宅の3Dプリンタで作成したものらしいです。（電子工作ファンって自宅に3Dプリンタ持ってるものなんですか？）

## Arduino言語による実装

元々は「音がしたときに目が光る」仕様だったのですが、勝手に「通常時に目が光ってる。音がしたときにビックリして目を閉じる（光を消す）」ような仕様に改造しました。

今回Arduinoでビックリしたのが、[公式サイト](https://www.arduino.cc/)に簡易的なIDEなどが用意され、自分でコンパイラや開発ツールを用意する必要がないということです。

```cpp
class LedController {
  public:
    LedController();
    void high();
    void middle();
    void low();
};

void LedController::LedController() {
  pinMode(8, OUTPUT);
  pinMode(9, OUTPUT);
}

void LedController::high() {
  digitalWrite(8, HIGH);
  digitalWrite(9, HIGH);
}

void LedController::middle() {
  // オンオフを繰り返して擬似的に暗くする
  digitalWrite(8, HIGH);
  digitalWrite(9, HIGH);
  digitalWrite(8, LOW);
  digitalWrite(9, LOW);
}

void LedController::low() {
  digitalWrite(8, LOW);
  digitalWrite(9, LOW);
}

double sound = 0;
int t = 0;
int count = 0;
LedController ledCont = LedController();

void setup() {
  Serial.begin(9600);
}

void loop() {
  // 音を検知する
  sound = analogRead(0);

  if (sound > 365) {
    // 音が消灯する
    ledCont.low();
    delay(100);
    t = 0;
  } else {
    // 最初はやや暗く、一定時間以上経つと強く光らせる
    if (t <= 200) {
      ledCont.middle();
    } else {
      ledCont.high();
    }
    if(t <= 1000) t++;
  }
}
```

Arduinoでは[C/C++風のArduino言語](https://pspunch.com/pd/article/arduino_is_c.html)と呼ばれるものを使って実装していきます。

`main` 関数が無いのが不思議だったのですが、[こちらの記事](https://pspunch.com/pd/article/arduino_is_c.html)にもある通り、「for文で永久に `loop` 関数を呼び出し続ける」形になっています。大抵の組み込み系プログラミングではこの形で実装されると思うので、うまくプログラミングの敷居を低くしていますね。

「オンオフを繰り返して明るさを調節する」のは[PWMと呼ばれるやり方](http://jkoba.net/prototyping/arduino/led_brightness.html)だそうです。

本当は「LEDの状態をグローバル変数に持って、それに応じてメインのループでLEDの点灯処理をさせる。一定以上の音量の場合に割り込み処理を発生させてLEDの状態変数を書き換える」ような実装にしたかったのですが、そこまで手が回りませんでした（実際できるか分かりません…）。そうすれば、各メソッドの中でduty比を変えるために `delay` を行っても音を検知する処理に即時に反応できると思ったので。

※実は私は電子工作は初めてですが、偶然ファミコンの自作ソフトを作ろうとしていたことがあるので、組み込み系のプログラミングっぽいものは多少やったことがあります。


## まとめと宣伝

電子工作の経験があまり無い私でも、簡単にサメくんを作ることができました。Arduinoを使えば簡単にいろいろ作れちゃいそうですね。

[LIFULL Fab](https://fab.lifull.com/)ではこのようなイベントを今後も行っていくつもりだそうです。ぜひ[Peatix](https://peatix.com/group/2043200)や[Facebook](https://www.facebook.com/lifullfab/)でチェックしてみてください。
git add､git commitの保存先と取消コマンドについて

取り消し実践してみました｡

###addの取り消し
`$git reset`

add消えます｡
2回addしていたとしたら､`$git reset`で､1回目も2回目も両方のaddが取り消しされます｡



###commitの取り消し
`$git reset HEAD^`
｢HEAD^ ｣ の意味は｢直前のコミット｣という意味です｡
※このコマンドでaddもすべて消します｡
indexは空になります｡

###補足→ add(ステージング)､commitの理解
【add】
addの保存先､状態等を調べると､"WorkingTree"や"作業ディレクトリ""index"
という単語が出てきますが､これについて｡

(ステージング前)
WorkingTreeや
作業ディレクトリと呼びます

(ステージング後)
index

【commit】
ローカルリポジトリへ保存
ローカルリポジトリとは:自分のPC内のディレクトリやファイルの履歴を管理する場所

【ついでにpush】
リモートリポジトリへ保存
リモートリポジトリとは:ネット上にファイルをアップロードした状態で､ネット上でファイル履歴を管理する場所

【まとめ】
"add"と"commit"までは自分のPC内でのできごとです｡






参考
http://www-creators.com/archives/1282
GPSカー その14

#概要

GPSで自動走行する、コンテストがある。
実機を借りて、アプリから操作する部門が今年は無いらしい。
実機を作ってみた。
目標まで、自動運転してみた。

#結果

東から、目標まで、OK
西から、目標まで、OK
南から、目標まで、OK
北から、目標まで、NG

#原因

回転の計算で330度とかなると、おかしくなる。

#対策

330度なら-30度、-330度なるなら30度と計算するようにした。

以上。
GitHubのリポジトリをGoogle Driveにcloneする方法メモ

## はじめに
GitHubリポジトリをGoogle Driveの指定フォルダにCloneする方法で少し迷ったのでメモしておきます。
おおまかな流れは以下のとおり。

<!-- toc -->

- [手順](#手順)
  * [Google ColabのNotebook上でGoogle Driveをマウントする](#Google-ColabのNotebook上でGoogle-Driveをマウントする)
  * [Google ColabのNotebook上でGit Cloneする](#Google-ColabのNotebook上でGit-Cloneする)
- [まとめ](#まとめ)

<!-- tocstop -->



## 手順
### Google ColabのNotebook上でGoogle Driveをマウントする

なんでもいいのでGoogle Colabのノートブックを作成するか、既存のてきとうなノートブックを開きます。
マウントするためだけのノートブックなので、ほんとにてきとうで良いです。

作成したノートブック上で以下のようなコードをし実行ます。

```python:
from google.colab import drive
drive.mount('/content/gdrive')
```

あとは表示されるリンクをクリックし、認証して、表示されたキーをノートブックに戻って打ち込めばOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391281/67dfdb26-c918-1d9e-5766-2f0f993aec34.png)

これで、とりあえずGoogle DriveがGoogle Colabにマウントできました。やったね。

### Google ColabのNotebook上でGit Cloneする
基本的にはただGit Cloneするコマンドを実行するだけです。
が、微妙に書き換えないといけないところがあります。
私はこの「微妙に書き換えないといけないとこ」が良くわからずマジで時間を無駄にしました。しにたい。

ポイントとしては以下の通りです。

- Git Cloneするリンクに、自分のGitアカウントをGitパスワードを含める
- ローカルリポジトルを作るディレクトリはGoogle ColabにマウントしたGoogle Driveを指定

この二つを踏まえたGit Clone用コマンドは以下のような感じです。
わかってると思いますが、<>はいらないです。

```shell

!git clone  https://<自分のGitアカウント>:<Gitパスワード>@github.com/<Gitアカウント>/<リポジトリ>.git "gdrive/My Drive/<ローカルリポジトリを作るディレクトリ>"
```
あとは、新しいセルを作成してコマンドを実行すればGoole Drive上にローカルリポジトリを作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391281/3a23b3ca-8478-aa2f-4c17-907fd20699f3.png)

やったね！

## まとめ

これ

- Git Cloneするリンクに、自分のGitアカウントをGitパスワードを含める
- ローカルリポジトルを作るディレクトリはGoogle ColabにマウントしたGoogle Driveを指定
好きな言語にプログラムを翻訳してくれるサービスRonriBoxをリリースしました

プログラムを好きなプログラミング言語に翻訳してくれるサービス[RonriBox](https://ronribox.com)をリリースしました。
[解説動画](https://youtu.be/vfnlQ6VrweI)
(※解説動画の最後では約7分で2019年までのうるう年を表示するプログラムを作り、JavaScript Python3.x Kotlin Go Java C C++ PHP Swift C# Rubyの11言語に翻訳します)

概要と、どのような原理で動いているのかを簡単に解説いたします。

# 概要
プログラムの構文は言語によって異なります。

```c
/*C*/
#include <stdio.h>

int main(int argc, char* args[])
{
   puts("Hello World!");
   return 0;
}
```

```c#

//C#
class HelloWorld {
  static void Main(string[] args) {    
    System.Console.WriteLine("Hello World!");
  }
}
```

```golang

//Go
package main
import "fmt"

func main() {
 fmt.Println("Hello World!")
}
```
しかしうまくモデルを抽出することで論理構造は共通化できます。

![スライド1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466693/dbc251cb-5002-a0a8-b2e7-a9e87c05ce01.png)

抽出した論理構造を"モデル"という単位でRonriBoxに保存します。

![スライド2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466693/bbacbcba-1800-097b-25af-37f865f619db.png)

最後に好きな言語を設定して使いたいモデルを呼び出します。すると目的の言語でプログラムのソースコードが出力されます。

![スライド3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466693/1c33b5e1-d993-50dc-da2f-afe55aadbf45.png)

これがRonriBoxの主な機能です。

# 原理
この機能を実現するためにRonriBoxには、プログラミング言語によって翻訳を変えるテンプレートエンジンが搭載されています。

## 言語による翻訳の切り替え

RonriBoxは選択された言語によって適応するテンプレートを変えます。

![スライド4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466693/4896d123-c375-0589-eb7c-fe97a4ccaf01.png)

この機能を使って翻訳を切り替えています。

## テンプレートによるモデルの再利用

もう一つ大切な機能として、テンプレートの中で他のテンプレートを呼び出すことができます。

![スライド5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/466693/d32f6504-682c-22a9-8d68-a51687f45d1f.png)

これによってモデルは再利用可能な部品となります。
モデルはプログラミング言語間の構文の違いを吸収し、論理的になんらかの機能を抽象化したものになります。
これらを組み合わせて大きなプログラムを構成していきます。

説明をすごく端折っていますがRonriBoxの動作する原理は以上の組み合わせで成り立っています。
私が作ったサンプルのモデルがいくつかあります。

[forのモデル](https://ronribox.com/yas/for)
[ifのモデル](https://ronribox.com/yas/if)

これらはそれぞれfor文やif文を抽象化しています。
他にも私の作ったモデル(※これを必ず使う必要はありません)に興味がある方は以下のガイドをご一読ください。
[チュートリアル (日本語)](https://ronribox.com/yas/Tutorial_jp)
[言語ガイド (日本語)](https://ronribox.com/yas/LanguageGuide_jp)

# 技術的なこと
サービスはVue.js + Laravel + MySQL + Vuetifyで作られています。
技術的な検証に1か月ぐらいかかりましたが、サービス自体は3日で製作いたしました。

# 最後に大切なこと
現在プログラマーの職を探しています。
特に札幌市内でご興味のある方がいらっしゃいましたら、ご連絡ください。
よろしければ履歴書を送らさせていただきます。よろしくお願いいたします。
npmコマンドでタブ補完する方法

## 概要

bashrcに```eval "`npm completion`"```と書くと、npmコマンドでタブ補完できるようになった。

## 確認環境

* ubuntu18
* bash

## 実施内容

```bash
echo 'eval "`npm completion`"' >> ~/.bashrc
. ~/.bashrc
```

## 参考URL

https://github.com/npm/npm/issues/8030
https://docs.npmjs.com/cli/completion

## 補足

* WSL環境でも動作OKでした。
* zshでもできるみたいです。
* マニュアルだと`npm completion >> ~/.bashrc`となってますが、そこそこ行数があります。evalしたほうがbashrcの見通しが良くて個人的に好きです。

```bash
$ npm completion | wc -l
57
```

## 最後に

これで`npm run build`とか手打ちしなくてよくなりました!
地味に便利。
AtCoderを始めて１か月経過

#注意
単なる雑談。有用なことは書かないので了解願う。

#1オリジン問題
慣れないPythonながらなんとか茶色になった。時間制限の中で書くのに慣れず相変わらずしょうもないミスをしてDまで解けないことが多い。
そんな中、問題の性質として配列操作が多く、問題ではiが1～Nで定義されているが単純に以下のように処理すると0オリジンになってしまう。
iが直接意味を持つため、1オリジン化しないと処理出来ない。

```python
a = list(map(int,input().split())
for i in range(1,n+1): # 1 to n
    if( i%3==0 ):
        ans += a[i-1] # 0オリジンアクセス
```

このベース変換はソース上に無限に増えていくので非常に煩わしくバグの原因になる。（というかなった）
というわけで配列の方を1オリジン化することにした。

```python
a = [0]
a.extend( list(map(int,input().split()) )
for i in range(1,n+1): # 1 to n
    if( i%3==0 ):
        ans += a[i] # 1オリジンアクセス
```

例ではextendでやったが、先頭に[0]をinsertしても同じである。
メモリ再配置がどのみち起きるので、どちらでもよいと思う。
これによって、添え字の-1を忘れるなどのミスが消えた。
Pythonの文字列をまとめてリスト化出来てしまう高機能さが、逆に処理しにくくしていた例である。

アルゴリズムの実装では、添え字操作がメインになるので、+1や-1を繰り返していると何がなんだかわからなくなってしまう。
だったら分かるような状態を無理矢理にでも作ればよい。
Unityで斜方投射の物理実験（2/3）球の跳ね返りの物理実験

# きっかけ
Unityで物理シミュレーションができることを知ったので挑戦してみることに。
実験するにあたってUnityの基本的なことにも触れられたし、
やったこと忘れそうなのでメモ残しておくために投稿

# 環境
Unity 2019.1.10f1 (64-bit)

# 世話になったサイト
　このサイトの説明が超丁寧だったのですごい分かりやすかった
　https://ekulabo.com/tutorial-input

# 手順（概要）
そもそもUnity素人故、段階を分けて試す
1. Unityを起動する       ※済
2. 球の自然落下の物理実験 ※済
3. 球の跳ね返りの物理実験 ←イマココ
4. 球の斜方投射の物理実験

# 3. 球の跳ね返りの物理実験
基本的な話だけど地面を作る。
球作るときと同じ要領で
3D Object > plane
![コメント 2019-07-20 223641.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/d544628a-9ec9-6456-cb47-9c45e2316a83.gif)

地面ができた。これで安心。
ん？めり込んでる。
よく見たら、Sphereの位置情報（position)は（0,0,0）。地面のpositionも(0,0,0)なので
当然こうなるっぽい。
![コメント 2019-07-20 223913.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/279492a4-8271-897f-510e-0c5d253d30ac.gif)

試しにこの状態で「再生」ボタンを押すと、球がふんわりと地面上にせりあがってきた。
なるほど。再生したら物理法則にしたがうのね。
![コメント 2019-07-20 223945.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a0d2d6aa-069f-7b0c-a6c4-cd84fd032afe.gif)

このままだと具合悪いし、そもそも自然落下の実験なので
Sphereのpositionを(0,3,0)にしてやる。
球は宙に浮いた。
![コメント 2019-07-20 223821.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/d424b98f-a463-02be-d0ee-82312d5b384c.gif)

調べによるとposion近くの歯車アイコンをクリックしてResetを押すと位置情報が初期化できるようだ。
![コメント 2019-07-20 223854.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/e90ed9f5-eb5c-f8c9-fbd4-24e0d1f3cb09.gif)

ちなみに、静止画しか用意していないので見せようがないが
この状態で再生ボタンをおすと、自然落下はするし地面に落ちるが全く跳ねない。
地面と球には跳ね返り係数が設定されていないから。どこまでも物理法則にこだわるなぁ…さすがだ。

そんなわけで地面とたまに跳ね返り係数を与える。
Projectウィンドウ上で右クリック > Create > Physic Material クリック
![コメント 2019-07-20 224214.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/8a79af55-7857-769d-e30e-d12c23ea1d1c.gif)

地面跳ねるようなアイコンが出てきた。名前は「Bounce」としておこう。
![コメント 2019-07-20 224242.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3139c6dd-c4e5-c9c0-a511-311587319a7c.gif)

Bouncenessが跳ね返り係数になる。
0～1まで設定できる。今回は0.5を設定。
![コメント 2019-07-20 224258.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ce560f04-43e9-422c-ccdd-35eb8146ac4b.gif)

PlaneのMesh Collider > Materialに「Bounce」を設定。
これで跳ね返るぞー！

…と、我慢できず早速再生ボタンを押したら、跳ね返りが妙に弱い。。。
調べたところSphereにも跳ね返り係数を与えた方がよさそうだ。
どうりで卵の衝撃テストのCMみたいな結果になると思った…
![コメント 2019-07-20 224425.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/54412057-4089-30f9-dbe2-3a69f5402c4f.gif)

そんなわけでSphereにも「Bounce」を付与。
Sphere Collider > Materialに「Bounce」を設定。
![コメント 2019-07-20 224511.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1681e529-9203-6888-4a5d-f2f86597a804.gif)

再度、再生ボタンをクリック。
むちゃくちゃ跳ね返ることは無かったけど、
ようやく自然な跳ね返りが実現できた。

この記事、gif動画くらいあげられないと全然ピンとこないなぁ…なんかいい方法ないものか。。。

～続く～
テンプレートクラスを同一のものとして扱う

#テンプレートクラスをまとめたい
テンプレートクラスのテンプレート引数が違くても、中身は大体同じだから同じものとして扱いたい！ということがまれにあります。
例えば

```c++
template<typename T>
class A{
private:
	T _variable;
public:
	A(T variable) : _variable(variable){}
	void print(){
		std::cout << _variable << std::endl;
	}
}
```

こんなテンプレートクラスがあったとして、**print()**はテンプレート引数が何であれ出力するだけなので

```c++
std::vector<A> vec;

int main(){
	vec.push_back(A(1));
	vec.push_back(A("hello"));
	vec.push_back(A(5.0));

	for(auto v : vec)v.print();
}
```

みたいなことをしたくても**vector**のテンプレート引数**A**が不完全なのでコンパイルできません。

#解決手段
こういうときはクラス継承と仮想関数を使います。

```c++
class A{
public:
	virtual ~A(){}
	virtual void print() = 0;
}

template<typename T>
class B : public A{
private:
	T _variable;
public:
	B(T variable) : _variable(variable){}
	virtual ~B(){}
	virtual void print() override{
		std::cout << _variable << std::endl;
	}
}


std::vector<A*> vec;

int main(){
	vec.push_back(new B(1));
	vec.push_back(new B("hello"));
	vec.push_back(new (5.0));

	for(auto v : vec)v->print();
}
```

思いついてみれば簡単なことかもしれませんが、「テンプレートクラス」という要素に惑わされて頭を抱えるときもあると思いますので参考程度に。
公式の方法でFirestoreでCodable #firebase #firestore #codable

FirebaseのNoSQLであるFirestoreはiOS上で利用する場合、基本的に `NSDictionary` 型でやり取りしていました。

例としては

```swift
// Documentの追加
let data = ["key": "value"]
let ref = Firestore.firestore().collection("hoge").addDocument(data: data) { error in
    if error == nil {
        let documentID = ref.documentID
        // something todo
    }
}
```

```swift
// Documentの取得
let documentID = ...
Firestore.firestore().collection("hoge").document(documentID).getDocuments { (snapshot, error) in
    guard let data = snapshot?.data() else { return }
    let value = data["key"]
    // something todo
}
```

こんな感じだったかと思います。

## Codable
Swiftには4から`Codable`という機能が導入されました。
FirestoreがJSON形式の`Data`型でやり取りしてくれたら`Codable`が利用出来るのになと何度考えた事か...
そこで[alickbass/CodableFirebase](https://github.com/alickbass/CodableFirebase)というライブラリを利用していた方も多かったのでは？
そんな中、公式の方法でCodableが利用出来る様になっていました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">お？もしかしてFirestoreにCodable公式サポート入った？ | Firestore swift Codable support by Hui-Wu · Pull Request #3198 · firebase/firebase-ios-sdk <a href="https://t.co/ft1reNeOaN">https://t.co/ft1reNeOaN</a></p>&mdash; かっくん@iOSDCでDark mode (@fromkk) <a href="https://twitter.com/fromkk/status/1141345708567482369?ref_src=twsrc%5Etfw">June 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まだ、公式のCocoaPodsには登録されて無い様なので、利用する方法としては@yimajoさんのTweetを参考するのが良さそうです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">FirestoreをSwiftで使う時、データの型をマッピングするのは標準の&#39;FirebaseFirestoreSwift&#39;で良いんすよ。cocoapodsには登録されていないから`pod &#39;FirebaseFirestoreSwift&#39;, :git =&gt; &#39;<a href="https://t.co/3qHwF2ploK">https://t.co/3qHwF2ploK</a>&#39;, :branch =&gt; &#39;master&#39;`ってやればいい</p>&mdash; y.imajô (@yimajo) <a href="https://twitter.com/yimajo/status/1145366319501471744?ref_src=twsrc%5Etfw">June 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Podfileに

```
pod 'Firebase/Core'
pod 'Firebase/Firestore'
pod 'FirebaseFirestoreSwift', '~> 0.2'
```

として`pod install`でインストールが完了です。

### 2019/10/25追記

コメントにてGitの指定が必要なくなった旨を共有頂いたので編集しました。

2019/10/25追記終わり

## 使い方

使い方は

`import FirebaseFirestoreSwift` を記述して、エンコーダーは`let encoder = Firestore.Encoder()`、デコーダーは`let decoder = Firestore.Decoder()`を利用します。

後は`JSONEncoder/Decoder`などと同様に利用する事が可能です。
[alickbass/CodableFirebase](https://github.com/alickbass/CodableFirebase)を利用していた方は

```diff
- import CodableFirebase
+ import FirebaseFirestoreSwift
```

```diff
- let decoder = FirestoreDecoder()
+ let decoder = Firestore.Decoder()
```

```diff
- let encoder = FirestoreEncoder()
+ let encoder = Firestore.Encoder()
```

の修正だけで良いので移行が簡単に可能です。

# まとめ

個人的には利用する外部ライブラリが多いと依存が増えたり、アプリのサイズや起動時間に影響が出るのでなるべく控え、それでも利用しないといけない場合は、ある程度メンテが活発で公式にサポートがある物を選びたいなと思っていました。
今回は公式でサポートが増えたのがとても良いなと思いました。
また、これまで出来ないと思っていた事が出来る様になるのも嬉しいですね。
ESLint v6.1.0

前 [v6.0.0] | 次 [v6.2.0](https://qiita.com/mysticatea/items/a66dd2d11b01aa5ce080)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">ESLint v6.1.0 has been released: <a href="https://t.co/BrbYcpEsvN">https://t.co/BrbYcpEsvN</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/1152788551400075264?ref_src=twsrc%5Etfw">July 21, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint `6.1.0` がリリースされました。
今回はバグ修正のみです。警告の数が増える可能性のあるバグ修正があるため、ESLint の Semantic Versioning Policy に従ってマイナーバージョンが上がっています。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

特になし。

# 💡 新しいルール

特になし。

# 🔧 オプションが追加されたルール

特になし。

# ✒️ `eslint --fix` をサポートしたルール

特になし。

# ⚠️ 非推奨になったルール

特になし。

[v6.0.0]: http://qiita.com/mysticatea/items/274347ff9473b26b575a
[#99999]: https://github.com/eslint/eslint/issues/99999
[xxxx]: http://eslint.org/docs/rules/xxxx
面接で聞かれたこと(未経験からエンジニアを目指す方へ)

#はじめに
私は20代後半で未経験からエンジニアを目指し、現在WEBエンジニアとして働いています！
おそらくこの記事をご覧いただいている方も、未経験からエンジニアを目指す方だと思います。
そんな方の為に、面接で聞かれた内容を整理して残しておこうと思います！:muscle:

#面接で聞かれた内容
聞かれた内容のうち、聞かれる頻度が高い内容を以下にまとめました！
私自身が聞かれたこともそうですし、周囲の友人からヒヤリングもしました。
その中でも頻出だと思われる質問集です。

##①自己紹介をしてください
面接の１番はじめに聞かれる内容としてこちらが多いです。
自己紹介の内容に関しては**1分ほどで話せる内容をあらかじめ練習しておいた方が良い**でしょう。
暗記とまでは言いませんが、スラスラ言葉が出てくるくらいには練習が必要です、。
面接の１番最初に聞かれるのですが、まだおそらくあなたは緊張がピークな状態だと思います。
だからこそ自己紹介に関しては良いスタートダッシュが切れるようにしっかり対策しましょう。
自己紹介の内容としては、名前を言った後に
●自身の強み
●前職の仕事内容と、自分自身で果たした成果
●趣味や特技
など、自分をアピール出来る内容を簡潔に伝えれば良いでしょう。

##②なぜ未経験からエンジニアを目指そうと思ったのか
必ず聞かれます。
考えてみれば当然ですが、企業側には未経験でエンジニアを雇うリスクがあります。
エンジニアは大変だけど、この人は本当にやっていけるのか？
軽い気持ちでエンジニアを目指していないか？
など。**エンジニアになるにあたって、あなたがどれだけの覚悟を持っているか判断するための質問**です。
もちろん、「リモートも出来るから」とか「力作業が嫌だから」とか企業側にマイナスのイメージを与えるような返答は絶対にダメです。

##③将来どんな存在になっていたいですか
こちらは聞かれ方が様々です。
例えば「１０年後２０年後にどのような人物になっていたいですか」や「人生のゴールとしてどのような存在を目指しますか」など。
この質問に関しては、エンジニアとしてどうなっていたいかをしっかりと答えられれば良いでしょう。
企業側は、**あなたが今後も長くエンジニアとして活躍する気があるのか**をこの質問で判断したいのです。
例えば２０年後に、「海外に行ってリモートワークして暮らしたい」なんて言ったら「エンジニアをなめているな」と思われるだけですよね。
あなたが企業もしくはIT業界に対してどのような存在になっていたいか、を答える必要があるのです。

##④なぜ◯◯系のエンジニアになろうと思ったのですか？
私の場合はWEB系なのでなぜWEBを目指そうと思ったのか聞かれました。
もちろんエンジニアといっても様々なエンジニアがいます。
その中で選んでいるからには、本当に興味があって選んできているのか。
それともとりあえずエンジニアになりたくて受けにきているだけかを見極めたいのでしょう。
受ける企業に関して**どのような事業内容なのかしっかり把握して、自分がそこで働くイメージをもっておくことが大切**です。

##⑤どのように勉強されていましたか？
学習の仕方を聞くことで、**自発的に学習できていたか、そして継続して学習できていたのか**を判断したいと思われます。
●1日平均何時間勉強していたか
●アウトプットはしていたか
●スクール生の場合はスクール内での学習の仕方
●活用した学習サイトや技術書など
はスラスラ答えられるようにしましょう。
特に私が困ったのは、「アウトプットはしていたか」です。
ポートフォリオ用のしっかりしたサイトは作成していましたが、それ以外のアウトプット(Qiita投稿など)は皆無だったので、
うまく答えることができませんでした。
企業によっては「Qiita等に投稿してますか？」と、情報発信自体しているかを聞かれたことも。

##⑥フロントエンドとバックエンドどちらが得意ですか
企業の採用条件によっては「フロントのみ募集」など、限定しているところも多いです。
もちろん採用条件を読んでから応募しているはずなので、フロント募集しているのに「バックエンドです！」なんて見当違いな返答はしないように注意しましょう。
そもそもまだプログラミングを業務として行ったことがないのに、絶対フロント！や絶対バック！て自分で判断するのは時期尚早な気がします。
しっかり両方の良いところや興味のあるところを見つけて、どちらを任されても良いや！くらいでちょうどいいかと思います。

##⑦弊社の事業内容はご存知ですか
企業に興味があるかどうかを判断する質問です。
面接前に必ずHPなどで事業内容を確認しておきましょう。
代表の方やCTOの方のお名前や、創業年、福利厚生などまである程度頭に入れておくべきです。
これは企業を受ける際の最低限のマナーだと私は思います。

##⑧逆に何か質問はありますか
"逆質問"と呼ばれるものですね。一通り企業側からの質問が終わった際に、必ず聞かれます。
そのため、**あらかじめ逆質問の内容を３〜５つほど考えておきましょう。**

●入社後の取り組むべき仕事内容
●エンジニアの方の1日の働き方
●事業内容に関する詳しい説明(もちろんHPなどで事前に確認した上での不明点の質問)

などが逆質問の例です。
HPに書いてある内容は質問しないようにしてください。確認不足だと思われます。
公開されていない内容で、聞いてみたい内容のみです！

##その他
頻度は高くないけれど、聞かれた内容を箇条書きでまとめておきます。

●ポートフォリオについて、機能面などの説明をしてください
●前職と比べて収入が下がるけど大丈夫ですか
●わからないことがあった時にどのように解決していましたか
●周りにエンジニアとして働いている人はいますか
●最近読んだ技術書は何ですか
●興味のあるアプリケーションなどはありますか

#さいごに
面接する上で大切だと思うことは
**●しっかりと自己分析をすること。自分の強み弱み、将来設計などを明確にしておくこと。**
**●受ける企業の情報はしっかりと事前に確認しておくこと。**
です！
人によっては「準備しなくていいや！」と言っている方がいますが、
そういった方はとことん選考に落ちています。
何事もしっかり準備することが大切ですし、面接を甘くみてはいけません。
Nuxt.jsで同じ見た目だけど見出し要素のレベルだけ変えたいときのコンポーネント

# やりたいこと
コンポーネントを作っていく時に、DOMの組み立て方から、 `<div>` として振舞ってほしかったり `<span>` として振舞って欲しかったりと、HTMLタグのみ変えたいという事が希にあります。

同じように、同じ見た目だけど見出し要素のレベルだけ変えたい( `<h1>` にしたり `<h3>` にしたり）という事もあります。

これを実現するために、以下の機能を持った `<HeadText>` コンポーネントを用意します。

- 使う側から見出しのテキストを指定できる
- 使う側から見出しレベルを指定できる
- 指定された見出しレベルに応じて、見出し要素 `<h1>` とか `<h2>` とか... が出力される

# 利用するもの
Vue で予約されている `<component>要素` と、その `is属性` を利用した、 [動的コンポーネントの機能](https://v1-jp.vuejs.org/guide/components.html#動的コンポーネント) を使います。

`is属性` はコンポーネントの切り替えの例をよく見ていましたが、 `<h1>` `<h2>` ... といったHTMLの要素も利用できるようです。

今回は、 `headTagByHeadLebel()` という関数を作り、受け取った値を `h` の後に文字列連結する事で、見出し要素を柔軟に出し分けられるようにしました。

※このサンプルではTypeScriptを利用しています

# 作ったコンポーネント
```vuejs:~/components/HeadText.vue
<template>
  <component
    :is="headTagByHeadLevel({level})"
  >
    {{ text }}
  </component>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

export interface HeadTextProps {
  text: string;
  level?: string;
}

@Component
export default class HeadText<HeadTextProps> extends Vue {
  @Prop()
  public text!: string;
  @Prop({
    default: '1'
  })
  public level?: string;

  public headTagByHeadLevel({ level }) {
    return `h${level}`;
  }
}
</script>
```

上記にstyleを書いてあげれば、コンポーネントとしては完成です。

こうすることで、このコンポーネントを使う側（親）は以下のようなシンプルな記述でこのコンポーネントを利用して、要素を切り替えられます。

```vue:~/pages/index.vue
<template>
  <div class="container">
    <section>
      <h1>HeadTextコンポーネント</h1>
      <HeadText text="ここはh1で指定" level="1" />
      <HeadText text="ここはh2で指定" level="2" />
      <HeadText text="ここはh3で指定" level="3" />
      <HeadText text="ここはh4で指定" level="4" />
      <HeadText text="ここはh5で指定" level="5" />
      <HeadText text="ここは指定なし" />
    </section>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

import HeadText from '../components/HeadText.vue';

@Component({
  components: {
    HeadText
  }
})
export default class indexPage extends Vue {}
</script>
```

スタイルを設定し、表示確認をしてみます。

<img width="771" alt="スクリーンショット 2019-07-20 22.15.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38510/e6c93a95-8a11-3308-52d8-2662953b2da9.png">

見た目は同じで、きちんとHTMLタグが切り替わっている事が確認できました。（見出しを `h1` にしちゃったので `h1` が2つという状態になってますが...）

# さいごに
今回は見出し要素の出し分けでしたが、冒頭のような `<div>` `<span>` の切り替えであれば、同じようにそれぞれ動的にバインドされた関数で、判定してあげて要素を返してあげるとよさそうです。

今回試したものについて、 github に置きましたので、載せておきます。
https://github.com/aktuehr/learn-nuxt
ターミナルの入力補完

## はじめに
mac標準搭載のterminalで，ディレクトリに移動したいとき，ファイルの中身を見たいときに，わざわざディレクトリ名やファイル名を入力するのは，面倒．．．

```
hogehoge$ ls 
Applications	Documents	Dropbox		Movies		Pictures
Desktop		Downloads	Library		Music		Public

hogehoge$ cd Applica......（めんどくさ）
```

そんなときに便利なのが，bash-completionというパッケージ
Homebrewを利用してインストールします．

Homebrewがわからない人は，他の記事で書くので，そこを見て参考にしてもらえればと思います．


## bash-completionのインストール
brewを使ってインストールします．

```
brew install bash-completion
```

インストールし終わったら, .bash_profileにbash-completionを読み込むように設定しないといけません．

.bash_profileについても他の記事で書きます．

```
vi ~/.bash_profile
```
で，.bash_profileを開いたら，

```
if [ -f $(brew --prefix)/etc/bash_completion ]; then
  . $(brew --prefix)/etc/bash_completion
fi
```
このコードを.bash_profileに入れます．
ターミナルを再起動すれば，Tabキーを押すとファイル名や，文字を補完してくれます．

```
hogehoge$ ls 
Applications	Documents	Dropbox		Movies		Pictures
Desktop		Downloads	Library		Music		Public

hogehoge$ cd A (Tabキー押す！)
```

```
hogehoge$ ls 
Applications	Documents	Dropbox		Movies		Pictures
Desktop		Downloads	Library		Music		Public

hogehoge$ cd Applications (こんな感じになる．)
```
thephpleague/oauth2-serverのexamplesのコードがなぜLeague\OAuth2をロードできるのか？

autoloadの設定が下記のようになっているから

```json
"autoload": {
        "psr-4": {
            "OAuth2ServerExamples\\": "src/",
            "League\\OAuth2\\Server\\": "../src/"
        }
    }
```
Unityで斜方投射の物理実験（1/3）Unity起動～球の自然落下

# きっかけ
Unityで物理シミュレーションができることを知ったので挑戦してみることに。
実験するにあたってUnityの基本的なことにも触れられたし、
やったこと忘れそうなのでメモ残しておくために投稿

# 環境
Unity 2019.1.10f1 (64-bit)

# 世話になったサイト
　このサイトの説明が超丁寧だったのですごい分かりやすかった
　https://ekulabo.com/tutorial-input

# 手順（概要）
そもそもUnity素人故、段階を分けて試す
1. Unityを起動する
2. 球の自然落下の物理実験
3. 球の跳ね返りの物理実験
4. 球の斜方投射の物理実験

# 1. Unityを起動する
「Unity 2019.1.10f1 (64-bit)」アイコンをダブルクリック。

Unity Hub画面が出るので[新規作成]クリック
![コメント 2019-07-20 221332.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/cee762bd-2c8c-0e74-ae86-93e01c089635.gif)

物理実験ってことで[3D]を選択して[作成]クリック
名前：Oblique prediction（斜方投射を英語にしただけ）
![コメント 2019-07-20 221631.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/b5d93753-ff15-7639-4a8d-358e230307f1.gif)

メイン画面に出た。
![コメント 2019-07-20 222531.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/93b08bde-b178-24e7-d87c-887c6e4a79af.gif)

# 2. 球の自然落下の物理実験
画面の見方の確認。
Console：ログか何か出してるようなら出てくる
Scene：作業場。Unityはゲームエンジンなので複数画面を持つゲーム作るならその数だけSceneを作ることになる。ちなみに物理シミュレーションは場面転換とか無いので、今見えてる１つのSceneだけで十分
Games：実際にユーザがゲームをしているときに見えている画面。今回の用途だとそこまで重要な感じはしない。
Hierarchy：Sceneで使用するオブジェクトの情報がここに置かれている
Project：Sceneやらライブラリやらスクリプトやら、このプロジェクトの構成要素がおいてある。
Inspetor：オブジェクトを選択したときに表れるプロパティ情報

![コメント 2019-07-20 222531.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/93b08bde-b178-24e7-d87c-887c6e4a79af.gif)

まずは自然落下を試すための球を用意する。
Hierarchyで右クリック > 3D Object > Sphere
![コメント 2019-07-20 222754.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/81f9a8df-4a35-4558-73c6-c80ce2f6b208.gif)

球が出た。。。！
Game画面では、MainCameraから見える球の様子がわかる
![コメント 2019-07-20 222819.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1fbff606-a1ff-9f63-c12b-05e37fba343a.gif)

自然落下させるために、球に物理演算コンポーネント（Rigidbody）を付与する
Inspector最下部にある[Add Component]クリック
Physic > Rigidbody をクリック。
![コメント 2019-07-20 223004.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/70ea4b23-35e0-6bf2-1536-90fe41a1ec89.gif)

Rigidbody誕生！
なんか色々属性があるぞ…！おいおい調べていこう。
Rigidbodyの下側にあるInfo欄は今の球の物理情報かな…？
![コメント 2019-07-20 223420.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a1a73f20-84ed-dcb1-7ca2-82676a9bc366.gif)

この状態で画面上部の再生ボタンをクリック！
gif動画でお見せできないのが残念だけど、クリック後２～３秒ほど固まったのち、自然落下を始めた。
それに合わせてInfo欄の情報が目まぐるしく変わっていく。
![コメント 2019-07-20 223454.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/64422493-73bf-f62a-3b4c-bf7f41ad0548.gif)

よく考えたらこの世界、地面がないのでそれこそ奈落の底まで落ちていく。
しばらくぼんやりみていたが、カメラから見切れたものの
Info欄ではグイグイ速度を増していく。
ちなみにこの世界、空気抵抗も設定していないのでそれこそとんでもない速度で落ちていく。
なんだかシュールだ…
![コメント 2019-07-20 223516.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9774d3e5-2884-94dd-af1b-ff52c37f2035.gif)

# 次回へ続く
思ったよりも長い話になってきた。
続きは別の記事にしよう。
【自分用メモ】Progate 1日目

# 学習コース Command Line 基礎編


## コース概要
UNIXコマンドの必要最低限の基礎知識を学ぶ


### 学んだこと
- 「touch」はファイルを作成するためのコマンド
- オプション「-r」を加えるとディレクトリを操作できる
Railsを支えるRESTについて

**この記事はWIPです**

Ruby on Rails というフレームワークはRESTというソフトウェアのアーキテクチャスタイルにとても影響を受けたWebアプリケーションフレームワークです。RailsがRESTfulに作られているお陰で僕らはRailsエンジニアは普段RESTを大きく意識することなく、(ある程度)RESTfulなWebアプリケーションやWebAPIを作れていると思います。


RESTって何という方は[こちら](https://en.wikipedia.org/wiki/Representational_state_transfer)


簡素に書くと、Webアプリケーションの構造論の一つで、Webが大成した理由の一つ。ロイ・フィールディングって天才が考えて2000年に論文として発表しました。

日本だと[山本陽平]([http://yohei-y.blogspot.com/](http://yohei-y.blogspot.com/))さん、[@tkawa](https://twitter.com/tkawa)さんとかがREST界隈で有名だと思います。

## ROA(リソース指向アーキテクチャ)

RESTには4つの原則があって、この原則を守るアーキテクチャをROA(リソース指向アーキテクチャ)という。

1. アドレス可能性(Addressability)
   - サーバーが提供できる情報がすべてリソースとして公開され、一意のURIが割り当てられていること
   - URIは構造的であり、予測可能であることが望ましい
2. ステートレス性(Stateless)
   - クライアントはリクエストごとに必要な情報をすべて送信する 
   - サーバーはクライアントのタイムアウト状態に配慮しない 
   - アプリケーションサーバーが複数ある場合は、ステートレス性によってクライアントからのリクエストを受け取りアプリケーションサーバーがリクエストごとに異なっても問題なくなる 
   - サーバーにはクライアントの状態(state)を保存しない設計
     - ログイン機能等のために一部をstatefulにしている
3. 接続性(Connectability)
   - 情報の内部に、別の情報や(その情報の別の)状態へのリンクを含めることができること。
4. 統一インターフェース(Uniform Interface)
   - リソースに対する操作(HTTPメソッド)を統一すること
     - すべてのWebが操作を抽象化することで、互換性を保つことができる(という思想だった。)



ROAに則ることでRESTfulなWebアプリケーション, APIが作ることが可能になる。



## RailsとREST

RailsアプリケーションにおいてRESTは、構成するコンポーネント (弊社でいうOfficeやUserなど) を「*リソース*」としてモデル化し、これらをCRUDやHTTPメソッドで操作可能にすることに利用されています。(Railsガイドから抜粋)

RailsがRESTfulなフレームワークとして成り立っているお陰で僕らはルーティングどうしようかなと悩まずに名前空間だけを決めることで最適なルーティングを即座に作ることができています( `resources :books` みたいな記述でCRUD操作ができるルーティングが一瞬でできますよね？)。これはRailsの[CoC](https://postd.cc/rails-doctrine/#convention-over-configuration)という考え方によるものだと思っていて、本当に最高だと思う :laughing::raised_hands:



ちなみにRailsはメジャーバージョンが2になったころにRESTfulルーティングを取り入れたよう。そして今も現役でRESTfulなフレームワークです:raised_hands: ​[参考](https://thoughtbot.com/upcase/videos/rest#what-is-rest)



## Railsアプリケーション/API == RESTfulなのか?

Railsのルーティングは前述の通り本当にすごくて、開発者が意識することなくRESTfulなルーティングを作ることを可能としてくれます。しかし僕らが開発するRails wayに則ったRailsアプリケーション/APIは、Railsが提供してくれたルーティングどおりRESTfulなものでしょうか。


答えはYESでもあり、NOでもある思います。

Rails wayに則って開発しているのになぜNOと思うことがあるのかというと、例えば ......


書くの飽きた( ˘ω˘ )


## 悩みどころ
ムズカシイなと思うところは `/books/1` というパスに対するリクエストでbook_idが1番のリソースを削除したかった時に、このアプリケーションではbookリソースの削除を論理削除で実現していた時に、HTTPメソッドを `DELETE` とするか `PATCH` とするかです。内部処理的には論理削除フラグを立てるためにUPDATEのSQL文が実行されているので `PATCH` と思うのですが、このリクエストでは利用者は book_id1番を削除するという意思を持ってリクエストを送ってくるので `DELETE` を使うべきなのかなといつも悩みます。


いろんな人に質問してみて一番しっくり来たのは、そのリソースと/books/1のURIとのマッピングがなくなるのであれば、それはDELETE。その論理削除した後も/books/1が見れるのであれば、それはPATCHを使うべきという話でした。


## 参考

[RESTful Webサービス](https://www.amazon.co.jp/dp/4873113539/ref=cm_sw_r_tw_dp_U_x_xVZkDbXPJSAR2 )

[Webを支える技術](https://www.amazon.co.jp/dp/4774142042/ref=cm_sw_r_tw_dp_U_x_tSZkDbJDEGJMX )

[REST API Tutorial](https://restfulapi.net/http-methods/)

[RESTful #とは RailsスタイルからRESTを学ぼう](https://www.slideshare.net/tkawa1/learning-rest-from-rails-style)

[リソース指向アーキテクチャ(ROA)とは何なのか](https://qiita.com/NagaokaKenichi/items/0f3a55e422d5cc9f1b9c)
ActiveRecordからMySQLにDateTime型のオブジェクト入れた時にマイクロ秒が000000になる理由

MySQL5.6系からマイクロ秒に対応しているが、Railsからマイグレする時だとマイクロ秒のオプションを明示的に書かないとDateTime(0)でマイグレーションしてるみたいで値のマイクロ秒以下はすべて `000000` として永続化される。

https://dev.mysql.com/doc/refman/5.6/en/fractional-seconds.html


DB側でマイクロ秒単位まで正しく永続化したい場合はマイグレーションする際に `limit` 句を渡してあげること。

```ruby
# tests テーブルにカラム追加
t.datetime :hoged_at, limit: 6
t.datetime :fugaed_at

# SHOW CREATE TABLE tests;の結果
`hoged_at` datetime(6) DEFAULT NULL,
`fugaed_at` datetime DEFAULT NULL,

[1] pry(main)> t = Time.parse('2019-07-21 10:00:00.123456')
=> 2019-07-21 10:00:00 +0900
[2] pry(main)> Test.create(hoged_at: t, fugaed_at: t)
2019/07/21 10:34:43   Test Create (0.5ms)  INSERT INTO `tests` (`hoged_at`, `fugaed_at`, `created_at`, `updated_at`) VALUES ('2019-07-21 10:00:00.123456', '2019-07-21 10:00:00', '2019-07-21 10:34:43', '2019-07-21 10:34:43') /* host: 
=> #<Test:0x00007f7fc252dfe8
 id: 2,
 hoged_at: Sun, 21 Jul 2019 10:00:00 JST +09:00,
 fugaed_at: Sun, 21 Jul 2019 10:00:00 JST +09:00,
 created_at: Sun, 21 Jul 2019 10:34:43 JST +09:00,
 updated_at: Sun, 21 Jul 2019 10:34:43 JST +09:00>
[3] pry(main)> Test.find(2).hoged_at.usec
2019/07/21 10:35:03   Test Load (0.5ms)  SELECT  `tests`.* FROM `tests` WHERE `tests`.`id` = 2 LIMIT 1
=> 123456
[4] pry(main)> Test.find(2).fugaed_at.usec
2019/07/21 10:35:11   Test Load (0.5ms)  SELECT  `tests`.* FROM `tests` WHERE `tests`.`id` = 2 LIMIT 1
=> 0
```
【Rails】submit後のredirect_toが動かない時の対処法

##ことの始まり
あるサイトのコピーを作って勉強していた時のこと。
以下の画面でform_withを使って入力画面を作っている。
それぞれの項目に入力したら下書き保存ボタンを押してDBにデータを保存。
その後redirect_toを使って画面遷移したが、なぜか画面遷移ができない...
![スクリーンショット 2019-07-21 11.24.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375365/b9db4266-6238-2348-1f20-b56ed84ff5c5.png)
###前提条件
webpacker使ってます
###エラーが出たコード
```_form.html.slim
= form_with model: @work do |f|
//  入力項目
　　= f.submit "下書きを保存", class: "btn btn-outline-primary", id: "draft", name: "draft"
```
下書き保存のボタンを押すとworks_controller.rbが実行される

```works_controller.rb
  def create
    work = current_user.work.new( post_work )
    work.save
    redirect_to user_url( current_user )　#ここの部分でエラー出た
  end
```

###エラー内容
Uncaught ReferenceError: Turbolinks is not defined
###原因
turbolinksがないぞって言われてる

そもそもredirect_toってturbolinksと関係あるのかという疑問が浮かんできたので
色々調べてみた。

form_withはデフォルトでajaxを使ってformを送信している。
そのajaxを使ってformを送信すると
送信先のコントローラーで実行されるredirect_toの挙動にturbolinksが関わってくる。

```works_controller.rb
  def create
    work = current_user.work.new( post_work )
    work.save
    redirect_to user_url( current_user )　#こいつの挙動が少し変わる
  end
```
##解決方法
###turbolinksを導入する

ターミナル

```ターミナル
yarn add turbolinks
```
```application.js
import Turbolinks from "turbolinks";
Turbolinks.start();
```

###formでajaxを使わない
local: trueを追加することでajaxをオフにする


```_form.html.slim
= form_with model: @work, local: true do |f|
```
これで解決した

##終わりに
間違い等や他に良い解決方法がありましたらコメントでご指摘いただけると幸いです。

ちなみにコピーしてたサイトです。
UIとか綺麗すぎて一目惚れしました。
[RESUME](https://www.resume.id/)
そしてコピー難しすぎて代わりにWeb日記を作っています。
RESUMEの作者さん偉大。
JavaScript練習問題

JavaScriptの練習問題を自分なりの解釈を加えながら解いていこうと思います。

##問題
```javascript
var items = [
  { name: 'じゃがいも', price: 50, count: 3 },
  { name: 'にんじん', price: 60, count: 1 },
  { name: '豚肉', price: 200, count: 1 },
  { name: '玉ねぎ', price: 50, count: 2 }
];

// targetPriceより小計の高額な商品を出力
function higherPrice (targetPrice) {
  // ここにソースコードを追記しましょう
}

higherPrice(120);
```
変数itemsは商品の金額と個数を表しています。
関数higherPriceを編集し、商品ごとの小計（単価 * 個数）が引数targetPriceを超えたものの名前をコンソールに出力するようにしてください。




##回答
```javascript
var items = [
  { name: 'じゃがいも', price: 50, count: 3 },
  { name: 'にんじん', price: 60, count: 1 },
  { name: '豚肉', price: 200, count: 1 },
  { name: '玉ねぎ', price: 50, count: 2 }
];

// targetPriceより小計の高額な商品を出力
function higherPrice (targetPrice) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].price * items[i].count > targetPrice) {
      console.log(items[i].name);    
    }
  }
}

higherPrice(120);
```
###考え方
1.targetPriceとitemsそれぞれを比べて値段が高いかを比べる必要があるため、まずはitemsの値をそれぞれ取得する処理を書きます。

```javascript

function higherPrice (targetPrice) { 
//higherPriceという関数名を宣言しtargetPrice（この場合は１２０）を渡している。
  for (var i = 0; i < items.length; i++){
//varという変数に０を渡して、配列itemsの要素の数をlengthで取得しその数よりiが大きくなるまでこの処理を繰り返す。
//今回は配列itemsの要素は４つなので、処理が4回繰り返される。
//i++はiに処理が終わったのち１を足すという意味で、この場合i=0から始まり、i=3になるまで繰り返される。

    console.log(items[i].price * items[i].count);
//i番目のitemsのprice（単価）と、i番目のitemsのcount(個数)をかけた金額と比べるため、その値を取得する。
}
```

２.上記処理でitemsの要素それぞれの小計（単価 * 個数）を取得することができたので、あとはそれがtargetPriceより大きい場合だけコンソールに出力するという条件を書いてあげればいいわけですね。

```javascript
function higherPrice (targetPrice) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].price * items[i].count > targetPrice) {
//if文の条件式の部分に、小計（単価 *　個数)がtargetPriceより大きい場合と記載する。
      console.log(items[i].name);    
//条件に当てはまる時にどんな処理をしたいかをここに書く。
//問題はtargetPriceより大きい場合には、その名前をコンソールに出力しなさいと記載されている
//そのため、条件式に対しtrueのi個目の名前をコンソールに出力する処理を記載している。
    }
  }
}

```

こんな感じで、まずどんな処理を繰り返したいのかを考えた後にどんな条件かを考えるとわかりやすいと思います。

##まとめ
簡単な問題ですが、コードを作るときの考え方を記載しました。
この考え方は難しい問題でも使えると思うので慣れないうちは一つ一つの処理を解決していってそれを最後に合わせるってイメージを持つと良いと思います。
「A VirtualBox machine with the name 'homestead-7' already exists. Please use another name or delete the machine with the existing name, and try again.」が出た時の対処法

## 問題

`vagrant up`しようとすると以下のエラーが発生

```
A VirtualBox machine with the name 'homestead-7' already exists.
Please use another name or delete the machine with the existing
name, and try again.
```

日本語に直すと
「homestead-7という名前の仮想マシン名が既に存在するので他の名前を使うか、既に存在する名前の仮想マシンを削除するかをして、再び試してください」
とのこと

## 解決策
### ①`vagrant global-status --prune`
上記のコマンドでVagrantの環境を確認する

```
$ vagrant global-status --prune
id       name        provider   state    directory
------------------------------------------------------------------------------
cd2734f  default     virtualbox saved    /Users/userName/MyVagrant/MyCentOS
dba0fa1  default     virtualbox poweroff /Users/userName/vagrant/ubuntu64_18
bdf825c  homestead-7 virtualbox poweroff /Users/userName/Homestead

The above shows information about all known Vagrant environments
on this machine. This data is cached and may not be completely
up-to-date (use "vagrant global-status --prune" to prune invalid
entries). To interact with any of the machines, you can go to that
directory and run Vagrant, or you can use the ID directly with
Vagrant commands from any directory. For example:
"vagrant destroy 1a2b3c4d"
```

確認した後にエラーが出た名前のもの（今回はhomestead-7）を削除する。この後に`vagrant up`をしてやる。これで解決しない場合は②を

### ②`vagrant box list`でboxごと削除
上記のコマンドでboxの一覧を表示し、エラーが出た名前のboxを削除し、boxを再度追加。再度`vagrant up`する。これで解決しない場合は③を

### ③`vboxmanage list vms`
上記のコマンドで仮想マシン一覧を表示

```
"homestead-7" {f9c95eed-b1ce-426d-ab90-e03f19b6d29f}
```

`VBoxManage unregistervm f9c95eed-b1ce-426d-ab90-e03f19b6d29f --delete`で削除したのちに`vagrant up`を行う。（僕は①、②を行っても解決しなかったのですが、この③の方法で解決しました）

## 参考

- [vagrant upで A VirtualBox machine already exists.とでる解決方法](https://qiita.com/pugiemonn/items/92f234b7894bd4709f72)
- [同名のvmがあって起動できないといわれたら](https://qiita.com/you-me/items/73f1afc9e8d00d891e1d)
- [A VirtualBox machine with the name 'homestead' already exists
](https://stackoverflow.com/questions/26993903/a-virtualbox-machine-with-the-name-homestead-already-exists)