OmniAICreator/Qiita-1.07M huggingface dataset:
【React】stateを使ってみる ~ ReactHooks/useState ~

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## 

クリックすると数字が増えていくというやつです。

~~~jsx:index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Counter = () => {
  const [count, setCount] = useState(0);

  return(
    <div>
       <p>count: {count}</p>
       {/* onClick={} の中に関数を書くとその関数が実行されます。*/}
       <button onClick={() => setCount(count + 1) }>click!</button>   
    </div>
  );
}

ReactDOM.render(
    <Counter />,
  document.getElementById('root')
);
~~~

![スクリーンショット 2020-11-29 0.54.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/ef49939f-1409-a03a-b1eb-7a846c5cf44e.png)

表示成功(静止画を表示してますがクリックすると数が増えました)

## まとめ

- ファイルの先頭に import React, { useState } from 'react'; を書くと useStateが使えるようになる。
ラズパイでARM入門（2. レジスタと基本的な算術演算）

前回：[1. イントロダクション](https://qiita.com/GoodOldLandLine/items/6d0297eae3d89127f06c) 次回：[3. メモリ、アドレス、ロード・ストア](https://qiita.com/GoodOldLandLine/items/0b850a8b09c088d7d31d)
[目次（記事一覧）](https://qiita.com/GoodOldLandLine/items/bb17122fee602d1aedb9)

※この記事は[Roger Ferrer Ibáñez](https://rofi.roger-ferrer.org)さんのブログ[ARM assembler in Raspberry Pi – Chapter 2](https://thinkingeek.com/2013/01/10/arm-assembler-raspberry-pi-chapter-2/)の翻訳です。

# レジスタ
根本的に、コンピューターのプロセッサーはパワフルな計算機に他なりません。計算は、*レジスタ*と呼ばれる非常に小さなメモリに格納されている値を使用してのみ実行できます。Raspberry PiのARMプロセッサーには、16個の整数レジスタと、32個の浮動小数点レジスタがあります。プロセッサーはこれらのレジスタを使って、整数計算や浮動小数点計算を実行します。浮動小数点レジスタは後々の記事にとっておき今は整数レジスタの説明をしましょう。

ARMの16個の整数レジスタには`r0`から`r15`までの名前が与えられています。1つのレジスタは32ビットを保持できます。もちろんこれらの32ビットは自由にエンコードできます。とはいえ、整数計算を実行する命令は2の補数でエンコードされていることを想定しているため、整数は2の補数で表すと便利です。したがって、ここからは特に明記されていない限り、レジスタが含む整数値は2の補数でエンコードされているとみなします。

レジスタの`r0`から`r15`はすべてが同じように使用されるわけではありませんが、今のところは気にしないようにします。記事で行われることは問題ないと思ってください。

# 基本的な算術計算

ほとんどのプロセッサーは、整数レジスタを使って基本的な算術計算を実行できます。ARMプロセッサーもしかりです。例えば2つのレジスタの足し算ができます。第１章のサンプルコードを作り直ししてみましょう。

```:sum01.s
/* -- sum01.s */
.global main

main:
    mov r1, #3      /* r1 ← 3 */
    mov r2, #4      /* r2 ← 4 */
    add r0, r1, r2  /* r0 ← r1 + r2 */
    bx lr
```

このプログラムをコンパイルして実行すると、予想どおり、エラーコードは7になります。

```
$ ./sum01 ; echo $?
7
```

命令中に2回レジスタ(`r0`)を使っても問題ありません。

```:sum02.s
/* -- sum02.s */
.global main

main:
    mov r0, #3      /* r0 ← 3 */
    mov r1, #4      /* r1 ← 4 */
    add r0, r0, r1  /* r0 ← r0 + r1 */
    bx lr
```

予想通り、

```
$ ./sum02 ; echo $?
7
```
となります。

今日はここまで。


次回：[3. メモリ、アドレス、ロード・ストア](https://qiita.com/GoodOldLandLine/items/0b850a8b09c088d7d31d)
PowerApps、チェックボックスで選択アイテムに一括処理をする

# 概要
PowerAppsのギャラリーにて、アイテムにチェックボックスをつけ、チェックをつけたアイテムに対して一括処理を行いたい場合の方法について調べてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/971a608a-a072-57c9-d823-9ce399465006.png)


# 方法
チェックをつけたアイテムを一括削除する場合を例にします。
ギャラリーのItemsには以下のようなFoodListコレクションが入ってるとします。
`{Id:1, FoodName:"炒飯"},{Id:2, FoodName:"餃子"}`
Id列などレコードを特定できる一意のデータが入っていることが前提です。

削除ボタンのOnSelectで以下の関数を入力します。

```
ForAll(
    Filter(Gallery1.AllItems, Checkbox1.Value = true) As A,
    RemoveIf(FoodList,Id = A.Id)
)
```

ForAllでギャラリーコントロールのうちチェックが入っているアイテムを一行ずつ参照し、RemoveIfでIdで比較して元のコレクションから削除処理を行います。
ポイントは「As演算子」でギャラリーコントロールのコレクションをAに変換している点です。
ThisRecordを使用してRemoveIf(FoodList,Id = ThisRecord.Id)としてもうまくいきませんでした。
左のIdがThisRecordのId(省略形)かFoodListのIdかが区別できないことが原因のようです。SQLと同じですね。
今後のアップデートで変わるかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293667/d4299bb9-e280-48c2-b466-8ca08c68422f.png)


今回は削除のアクションを行う例ですが、他のアクションにも応用できると思います。

# 他の方法
他の方法としては、削除用のコレクションを作成しておき、チェックボックスのOnCheckでThisItemを削除リストに追加。
削除ボタンに以下のような関数を入れ、コレクションに対してRemoveIf関数で削除リストと比較して削除する方法です。
先程の方法より少し手間がかかります。

```
If(IsEmpty(DeleteList),
    Notify("削除するアイテムがありません。",NotificationType.Information),
    RemoveIf(FoodList,ThisRecord in DeleteList);Clear(DeleteList);
)
```
後は、OnCheckが働かない状況ではこの方法は使えません。
例えば、全てにチェック/解除のようなボタンを用意し、別のコントロールからチェックの状態を制御する場合です。
※PowerAppsでそんな要件ないと思いますが・・
ラズパイでARM入門（目次）

※この記事は[Roger Ferrer Ibáñez](https://rofi.roger-ferrer.org)さんのブログ[ARM assembler in Raspberry Pi](https://thinkingeek.com/arm-assembler-raspberry-pi/)の翻訳です。

<details><summary>訳者前書き</summary><div>

スマホのプロセッサーはArmで、WindowsはArmに対応し、スパコン富嶽のCPUはArm、AppleはArmプロセッサーを開発した...
Armの時代が来そうですね

Armに興味を持ちあわよくば何かに役立つのではないかと思い
**Armを学習したい**
そう考えた人もいるのではないでしょうか。

ところが私がArmの学習をしようと思ったときは日本語のウェブサイトにはあまり良い記事がありませんでした。
Armで文字を書いて表示させるなどの記事はあってもそれよりもっと踏み込んだ内容の解説となるとまず見つかりせんでした。

そんな中見つけたのが[ARM assembler in Raspberry Pi](https://thinkingeek.com/arm-assembler-raspberry-pi/)というブログです。
英語のブログですがArmを書きラズベリーパイ上で実行していく方法がアセンブリ言語初心者でもわかるように丁寧に解説されています。

あとで私自身が何度も読み返すために、さらにはArmを学習したいと思っている日本語ネイティブの方々の学習ハードルを下げる一助となるためにそのブログの記事を日本語化したいと考えました。

そこでブログの記事を作成された[Roger Ferrer Ibáñez](https://rofi.roger-ferrer.org)さんに翻訳許可の申請とQiitaでの公開の旨をメールでお伝えしたところ快く承諾してくださいました。
Roger Ferrer Ibáñezさんにはこの場を借りてお礼申し上げます。

※訳者はCやPythonなどの知識はありますが、アセンブリ言語の知識は皆無です。誤りを見つけた場合はコメント欄にお願いします。
</div></details>

# 目次
1. [イントロダクション](https://qiita.com/GoodOldLandLine/items/6d0297eae3d89127f06c)
2. [レジスタと基本的な算術演算](https://qiita.com/GoodOldLandLine/items/e65a8e6d368db65ff3e7)
3. [メモリ、アドレス、ロード・ストア](https://qiita.com/GoodOldLandLine/items/0b850a8b09c088d7d31d)
4. [GNU デバッガ (GDB)](https://qiita.com/GoodOldLandLine/items/4dc4309b49e677d4740c)
5. [分岐命令](https://qiita.com/GoodOldLandLine/items/a547cd98cb7d4eb5087f)
6. [制御構造（if文 while文）](https://qiita.com/GoodOldLandLine/items/bea06ca1f380c26d482f)
7. [インデクシングモード](https://qiita.com/GoodOldLandLine/items/75d96355d19b76d8586f)
8. [配列と構造体、その他のインデクシングモード](https://qiita.com/GoodOldLandLine/items/6d3ad4b1f315366c21de)
9. [関数その１](https://qiita.com/GoodOldLandLine/items/2a63dafa7192ca45d0e2)
10. [関数その２、スタック](https://qiita.com/GoodOldLandLine/items/6eb2bb7c4f66d329814d)
11. 条件付き実行制御
12. 繰り返しとステータスレジスタ
13. 浮動小数点数
14. 行列の乗算
15. 整数の除算
16. スイッチ制御構造
17. 関数にデータを渡す
18. ローカルデータとフレームポインタ
19. オペレーティングシステム
20. 間接呼び出し
21. サブワードのデータ
22. Thumb命令セット
23. ネストされた関数
24. トランポリン
25. 整数SIMD
26. リンク入門
27. ダイナミックリンク

※リンクになっていないところは翻訳途中ですm(_ _)m
ターミナル基本コマンド



下の表にターミナルのコマンドをまとめておきます。

|コマンド|説明|例|
|:---|:---|:---|
|echo<文字列>|画面に文字列を出力する|$ echo hello|
|man<コマンド名>|コマンドのマニュアルページを表示する|$ man echo|
|^C|トラブル脱出用||
|^A|入力行の冒頭にカーソルを移動する||
|^E|入力行の末尾にカーソルを移動する||
|^U|入力行の内容をすべて削除する||
|Option-クリック|クリックした場所にカーソルを移動する||
|上矢印キー&下矢印キー|コマンドの履歴を前後に移動する||
|clear または ^L|画面の内容を消す|$ clear|
|exit または ^D|ターミナルを終了する|$ exit|

|コマンド|説明|例|
|:---|:---|:---|
|>|出力をファイル名にリダイレクトする|$ echo foo > foo.txt|
|>>|出力をファイル名に「追加」する|$ echo bar >> foo.txt|
|cat<ファイル>|ファイルの中身を画面に表示する|$ cat hello.txt|
|diff <f1> <f2>|ファイル1とファイル2の相違点を表示する|$ diff foo.txt bar.txt|
|ls|ファイルやディレクトリのリストを表示する|$ ls hello.txt|
|ls -l|ロングフォーム表示する|$ ls -l hello.txt|
|ls -rtl|最終更新時刻の逆順でロングフォーム表示する|$ ls -rtl|
|ls -a|隠しファイル/ディレクトリもすべて表示する|$ ls -a|
|touch <ファイル>|空のファイルを作成する|$ touch foo|
|mv <旧> <新>|ファイル名を旧から新に変更する|$ mv foo bar|
|cp <旧> <新>|旧ファイルを新ファイルにコピーする|$ mv foo bar|
|rm <ファイル>|ファイルを削除する|$ rm foo|
|rm -f <ファイル>|ファイルを確認なしで強制削除する|$ rm -f bar|

#参考文献
Ruby on Rails チュートリアル
前提知識シリーズ 開発基礎編 コマンドライン
https://railstutorial.jp/
Gitでブランチをまとめて消すシンプルな方法

Gitで特定の名前のブランチ群をまとめて消したい時があります。xargsやgrepを使う方法もありますが、ここではgitコマンドのみでできるシンプルな方法をまとめます。

## 確認環境
- MacBook Pro (16-inch 2019)
- macOS Catalina 10.15.6

## 方法
例えば名前の頭に`develop/`のついたブランチを消したいとします。
その場合、以下をコマンドラインで実行します。

```sh
git branch -D `git branch --list 'develop/*'`
```

これの原理は簡単で、まず消したいブランチを名前で絞り込み(`git branch --list 'develop/*'`)、それを削除コマンド(`git branch -D <削除対象>`)へ送っています。

## より安全な手順

上記コマンドをそのまま実行すると、もし絞り込みの指定でミスっていた場合、必要なブランチを消してしまう可能性があります。
まずは以下のコマンドを単独で実行して、表示されたブランチを確認し、

```sh
git branch --list 'develop/*' # 削除対象を確認
```

それらが消えてよければ、実際の削除に進むのが良いと思います。

```sh
git branch -D `git branch --list 'develop/*'` # 実際の削除
```

以上です。

## 参考
Can you delete multiple branches in one command with Git?
https://stackoverflow.com/a/47304256
Muralの無料版を使い続ける方法

Muralの無料ユーザでは、30日が過ぎると次のような画面が表示され使用できなくなってしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73918/61bec486-75d4-fbc8-4b5b-701f995bfe1a.png)

しかし、この画面はユーザアカウントが凍結したのではなく、あくまでワークスペースが凍結した状態。そのため、ワークスペースを削除し新たなワークスペースを作成するとMural自体は使い続けることができる。
ただし、削除したワークスペースにあったボードの情報は**全て消えてしまう**ので、消えて困る方はちゃんと「SEE PLAN OPTIONS」を押して支払いをし、ワークスペースの使用を延長しましょう。
もちろん、開発チームで使う・研修で使用するなど、継続して使用するのであれば支払いをするのが良いだろう。
ファシリテーター権限を2名以上付けたい場合も、有償になるはず。

とはいえ、使用方法を練習している最中で期限が切れてしまって困ることもある。
その場合、下記の手順でワークスペースを削除する。
「Account Settings」の「WORKSPACES」の画面を表示し、「MANAGE」ボタンを押す。
下の方の「Delete Workspace」を押すと次のようなダイアログが表示されるので、「DELETE WORKSPACE」を選択。
これで、ワークスペースが削除され、新たなワークスペースを作ることができるようになる。
Rails + Next.js + Firebase Authentication で認証付きアプリを作成する

本稿は [Ateam Finergy Inc. Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ateam-finergy) の 5 日目の記事です。本稿では Rails + Next.js + Firebase Authentication を使ってサンプルアプリを作成します。

- ソースはこちら：https://github.com/kmgk/rails-next-firebaseauth-sample
- デモページ：https://rails-next-firebaseauth-sample-private.vercel.app/

## 動機

[firebase authentication はいいぞという記事](https://mizchi.dev/202008172159-firebase-authentication)を見かけて、最近触り始めた Next.js と Rails を使って素振りしてみるかと思ったのがきっかけです。ちなみに firebase は flutter でモバイルアプリを開発していたときに使ったことがありますが、そのときはバックエンドを完全に firebase に任せっきりだったので、認証部分だけ使うというのは初めてです。

## firebase プロジェクトを作成する

firebase プロジェクトを作成して、自分が使いたいプロバイダを有効にします。また、この少し下に認証済みドメインを設定する場所があるので、適宜設定してください。

![firebase authenticationのプロバイダを有効にする](https://i.gyazo.com/73556a7ad7e42096ede7425ba524623b.png)

また、トップページから web アプリを作成し、Firebase SDK snippet が参照できる状態にしておきます。これは Rails 側でも Next.js 側でも使います。

## バックエンド(Rails)の実装

認証に関して Rails でやることは、Next.js から送られてきた jwt を検証するだけです。
Firebase Admin SDK を使用すると簡単に jwt を検証することができるのですが、残念ながら Ruby はサポートされていません。
しかし[検証部分を Ruby で実装されている方](https://qiita.com/otakky/items/b7582202f5cde8f2dd21)がいたのでありがたく使わせてもらいました。

トークンは `Authorization` ヘッダーに `Bearer ${token}` という形で送られてくるので、そのトークンを検証することになります。この検証を認証が必要な操作の前に行い、token の検証に失敗すると 401 Unauthorized を返すようにします。具体的な実装は `app/controllers/concerns/api/v1/firebase_auth_concern.rb` にあります。

```ruby
def authenticate_token_by_firebase
  # Authorization: Token ${token} or Bearer ${token}がない場合スキップされる
  authenticate_with_http_token do |token, _|
    # tokenを検証する。
  end
  { error: 'token invalid' }
end
```

## フロントエンド(Next.js)の実装

Next.js で firebase を使う方法は詳しい記事がたくさんあると思うのでそちらを参考にしてもらって、ここではトークンを送るところのコードだけ載せます。ここでは axios を使用しています。

```ts
const currentUser = auth.currentUser;
// トークンを取得
const token = await currentUser.getIdToken(true);
// Authorization: Bearerヘッダでトークンを送信する
const config = { headers: { authorization: `Bearer ${token}` } };
try {
  await axios.get('/users/new', config);
} catch (error) {
  console.log(error);
}
```

また、ここには書いていませんが現在ログイン済みかどうかを判断するために、[react-firebase-hooks](https://www.npmjs.com/package/react-firebase-hooks)を使用しています。非常に使い勝手がよかったので(auth しか使っていませんが)ぜひ使ってみてください。

## 最後に

本当はもっと解説しようかと思っていたのですが、調べていたら Next.js 側も Rails 側にもほとんど実装されているものが存在していたので結局それらの切り貼りをしただけになってしまいました。せっかく作ったので半分供養みたいな形で記事にしました。
firebase authentication は本当に楽だったのでこれからも個人で開発するときは使っていこうかなと思います。

## 参考記事

- [Ruby で Firebase の id トークンを認証に使ってみる - Qiita](https://qiita.com/otakky/items/b7582202f5cde8f2dd21)
- [next.js + vercel + firebase authentication で JWT の検証を行う + Graphql - mizdev](https://github.com/mizchi/next-boilerplate-20200727)
- [ちょっとでもセキュリティに自信がないなら、 Firebase Authentication を検討しよう - mizdev](https://mizchi.dev/202008172159-firebase-authentication)
デコレーターによるメソッド実行時間計測 in Django

メソッドの実行時間を測定するのに、毎回メソッドの開始と終わりの時刻を計測して
差分を計算するのは手間ではないですか？

なので、**デコレーター**で実現してみました。

## デコレーター
```python
import time
def measure_runtime(method):
    def wrapper(*args, **kw):
        # 始点タイム
        ts = time.time()

        # methodの実行
        rt = method(*args, **kw)

        # 終点タイム
        te = time.time()

        # 差分の表示
        print ('%s  %2.2f ms' % (method.__name__, (te - ts) * 1000))

        return rt
    return wrapper
```

単純に、メソッドの前後でunix時間を取得して差分を表示させているだけのプログラムになります。
logに吐き出したい場合は、`print` をloggerに変更しまししょう。

## メソッドに追加
では、実際にメソッドにデコレーターを付けてみましょう。
viewの各メソッドに追加した例です。

```python
@measure_runtime
def index(request):
    ...
    return render(request, 'sample/index.html')

@measure_runtime
def detail(request, question_id):
    ...
    return render(request, 'sample/detail.html')
```

## 計測
ビルトインサーバーを立ち上げ、index,detailページにアクセスしてみましょう。

```shell
$> python manage.py runserver
...
index  17.64 ms
detail  10.99 ms
```

各ページに掛かった秒数が表示されました。
一回作ってしまえば、どこにでも付けられるのでお勧めです。
初学者向け Visual Studio Code でGo言語の超初期設定をした話(プラグインのインストール自動フォーマット)

#はじめに
Goを始めるということでVSCodeの設定をしたのでメモ書きとして置いときます。
どなたかの参考になれば幸いです。

**お品書き**
・Go言語を使えるようにする
・フォーマットの設定
#前提
OS：Windows10
Goのインストールは完了していること
VSCodeのインストール、基本的な設定が完了していること

#プラグインのインストール
VSCodeにGoのプラグインを入れます。

Extensions(Ctrl + Shift + X) を開いて、"Go" と検索する。
"Go"というプラグインをインストールする。

![vscode.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916003/7ad4267c-e93b-2a4b-31d1-8ec98125dbb3.jpeg)

**拡張機能依存パッケージのインストール**
VSCodeでコマンドパレット(Ctrl + Shift + P)を開いて```GO:Install/Update Tools```で検索する。
![vscode7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916003/df9a4c8c-94ba-ed44-a42b-939b4aaa5659.jpeg)

すべてにチェックを入れてインストールする。
![vscode8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916003/ddbefcc5-d147-6e0e-ff05-b73e5c937f17.jpeg)

All tools successfully installed. You are ready to Go :).
が出力されればOK！
![vscode9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916003/0a834016-92a4-f7dc-3e4a-50659c9a6785.jpeg)



以下、自動フォーマットの設定
#自動フォーマットの設定

setting.json を開く。
＊setting.jsonは(Ctrl + ,)で開ける。
検索タブに"setting.json"と入れ、[JSON]の"Edit in setting.json"を押下する。
![vscode6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916003/a35dd7f7-c127-74eb-ed96-14c625ca4514.jpeg)

setting.jsonに下記を追加する。

```json
{
"[go]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": false,
        "editor.formatOnSave": true,
        "editor.formatOnPaste": false,
        "editor.formatOnType": false
    },
    "go.formatTool": "goreturns",
    "go.formatFlags": [
        "-w"
    ],
    "go.lintTool": "golint",
    "go.lintOnSave": "package",
    "go.vetOnSave": "package",
    "go.buildOnSave": "package",
    "go.testOnSave": false,
    "go.gocodeAutoBuild": true,
    "go.installDependenciesWhenBuilding": true,
}

```
もしこんなポップアップが出てきたらインストールしてもらって大丈夫です。
コマンドが利用できんのでインストールしてね 的な意味
![vscode5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916003/d6fd595a-9748-6f41-eddc-26340ddbd4ff.jpeg)


これで自動フォーマットの設定ができた。

#最後に
今回、VSCodeでGoの設定をしてみたが、会社で使っているNetBeans以外使わない私にとっていい勉強になった。
ここらへんもスラスラ触れるようになりたいものだ。

#参考文献
Go言語のためのVisual Studio Codeの設定方法
https://casualdevelopers.com/tech-tips/how-to-setup-vscode-with-golang/
ansibleでubuntu 18.04 nvidia-driver 455+docker+pyenv環境を構築する

自宅GPUサーバーをSSDで構築し直しするので、ついでにansible化してみた。

下記を行うansibleを作り、自宅GPUサーバーの環境構築を自動化してみた。
AWSでも同じ構築ができる。。。かな。

- nvidia-driver 445を入れる
- dockerとnvidia-docker2を入れる
- pyenvを入れ、自由なpythonをインストールできるようにする

https://github.com/notfolder/ml-ansible
【React】配列を繰り返し処理で回して props に渡してみる



# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。


## 配列を繰り返し処理で回して props に渡してみる

defaultPropsを使ってpropsに値が入らなかった時のデフォルトも設定してみました。

~~~jsx:index.js
import React from 'react';
import ReactDOM from 'react-dom';

// User に入れる用のデータ
const profiles = [
  { name: '太郎', age: 10 },
  { age: 30 },
  { name: '花子', age: 25 },
  { name: '太郎' },
]

const User = (props) => {
  return (
    <p>私の名前は{props.name}で、年齢は{props.age}です。</p>
  )
};

// 値がなかった時のデフォルトを設定
User.defaultProps = {
  name: '名無し',
  age: 20
};

const Users = () => {
  return (
    <div>
      // map を使って profiles から User を繰り返し処理で出力
      {profiles.map((profile) => {
        return <User name={profile.name} age={profile.age}/>
      })}
    </div>
  )
};

ReactDOM.render(
    <Users />,
  document.getElementById('root')
);

~~~

![スクリーンショット 2020-11-29 0.28.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/cc6be7fb-e5de-f5e1-1be2-89ae5a7b7460.png)

表示成功
Arduino環境(M5Paper)にLuaを突っ込む

# 概要
Arduino環境で開発できるメモリたっぷりなマイコン(例えばESP32)に手軽にLua突っ込んで俺環境を構築したいときに見るもの。

すでに有志がLua環境なりMicroPythonなり用意しているのは知っているが、独自機能つけたり、組み込み言語のあれこれを習得したくてやっている。
(LuaはFlashAirで使い慣れていたのもあって、使いたい)

とりあえず筆者はM5Paperのためにやっている。

# 動くようにする手順
## Luaのsourceをダウンロードする
https://www.lua.org/

## ビルドできるようにする
Makefileが使えない。
ので、lua-5.4.1/srcの中身を一旦全て、スケッチフォルダ直下に突っ込む。
これで一旦全部がビルド対象になる。

## ビルドエラー対処
lua.c(スタンドアロン), luac.c(コンパイラ)は不要なので消す。
OS系関数が存在しないため、loslib.cを消す。

linit.cで、

```
  {LUA_OSLIBNAME, luaopen_os},
```

を削って、OSライブラリを読み込まないようにする。

## 実行
こんな感じで実行する

```cpp:lua.ino
#define LUA_32BITS
#include "lua.hpp"

void setup() {
  Serial.begin(115200);
  Serial.println("Start...");

  char buff[256] = "print(\"Hello World\")\nprint(1+1)";
  int error;
  lua_State *L = luaL_newstate();
  luaL_openlibs(L);

  error = luaL_loadbuffer(L, buff, strlen(buff), "line") || lua_pcall(L,0,0,0);
  if(error){
    Serial.println(lua_tostring(L,-1));
    lua_pop(L,1);
  }
  lua_close(L);

  Serial.println("Done");
}

void loop() {

}
```

buffに突っ込まれているのが、Luaコードである。

```lua:buff
print("Hello World")
print(1+1)
```

# 実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191114/92a50e2f-155b-abe2-a876-5ac0f86ee9c4.png)

ちなみにこれでこのくらい

```
最大6553600バイトのフラッシュメモリのうち、スケッチが407705バイト（6%）を使っています。
最大4521984バイトのRAMのうち、グローバル変数が15428バイト（0%）を使っていて、ローカル変数で4506556バイト使うことができます。
```

# 感想
Luaってすげえ。移植性がすごい

# 補足
さすがにスケッチフォルダが散らかって嫌ですよね。

Document/libraries/lua-5.4.1というフォルダを掘って、そこに上記の変更を加えたlua-5.4.1/srcの中身を突っ込んでおくと、Arduinoがライブラリとして認識するのでビルド対象となり、スケッチと同じフォルダに入れなくて良くなります。

要るのかよくわかりませんが、library.propertiesは以下です。

```library.properties
name=lua-5.4.1
version=5.4.1
author=
maintainer=
sentence=
paragraph=
category=
url=
architectures=
includes=lua.hpp
depends=
```

# 参考文献
Programming in Lua プログラミング言語Lua公式解説書
http://asciimw.jp/search/mode/item/cd/A0904200
[PHP]クラスメソッド

#PHPクラスメソッド
##コンストラクタを活用
$countの初期値を0として、コンストラクタ内でクラスプロパティ$countの値に1を足すことで、生成されたインスタンスの数（メニュー数）を数えることができる
![1468306056981.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/ffb3bc07-282a-22e3-c67e-2c01adb21c7c.png)
![1467970306991.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/ba168247-322a-cc8e-f27d-f5468cb271a8.png)
#self
クラスの中で使うとそのクラス自身のことを指し示し、「self::$クラスプロパティ名」のように使う
![1467970318544.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/c24483f9-fa3a-4b22-4bc8-5fe1667ff185.png)
![1468306046915.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/2be6e604-8190-1cf8-c15b-516a9e68535f.png)
#クラスメソッド
個々のインスタンスのデータに関係ない処理を行いたい時には「クラスメソッド」を用いる。クラスメソッドは「static」を用いて定義し、「クラス名::クラスメソッド名」のように呼び出す
![1467685129795.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/f58c46ee-53b0-7e2d-9880-d44c4dc15f82.png)
![1468306069777.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/89f7734b-515f-9752-f18b-ea0da836d5fe.png)
#以上！
駆け出しエンジニア の学習記録　1日目Git,GitHub 前編　

<h1>初めに</h1>
この学習記録は自分用にメモを取ったものをそのまま羅列しているだけですので予めご了承ください。


<h1>メモ</h1>
git はスナップショット　
gitはコミットをたどることで以前の状態に戻せる
ローカルは3つのエリアに分かれている

ローカルリポジトリ
↓    ↑git commit  スナップショットを記録
ステージ
↓　　↑git add 　コミットする変更を準備
ワークツリー

ステージの概念ががややこしい。
分かりやすいURL↓↓
https://kray.jp/blog/expound-git-add/


<h1>使用したLinuxコマンド</h1>
ecoh 書きたい文字 >> ファイル名
.（ファイル名）　隠れフォルダ
mv ファイル 移動先ディレクトリ
mkdir ディレクトリを作成
touch ファイルを作成　
--global PC全体に設定


git init で.gitディレクトリ作成される
.gitディレクトリにほとんどのファイルが入る
コミット数は大きい番号ほど前（親コミット）
*バージョン管理するべきではない情報を.gitignoreに書く


<h1>使用したgitコマンド</h1>
・git diff ワークツリーとステージとの差分表示
・git diff --staged ステージとリポジトリとの差分表示
・git log commitの履歴を確認 
・git log commit  -p <ファイル名> ファイルの変更差分　
・git log commit　 -n <コミット数> 表示するコミット数を制限
・git rm <ファイル名＞　or -r<ディレクトリ名> ファイルごと削除
・git rm --cached<ファイル名> リポジトリからだけ消してファイルは残る
・git mv <元のファイル名> <新しいファイル名＞　ワークツリーとステージのファイル名を変更
・git config gitを設定　
・git config --gloabal alias.<エイリアス名> <元のコマンド名>
・git reset HEAD <ファイル名＞　ステージの変更をなかったことに
・git checkout -- <ファイル名> ワークツリー内の変更をなかったことに
【React】 props を使ってみる

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## props を使ってみる

~~~jsx:index.js
import React from 'react';
import ReactDOM from 'react-dom';

const User = (props) => {
  return (
    <p>私の名前は{props.name}です。</p>
  )
};

ReactDOM.render(
    <User name={'太郎'} />,
  document.getElementById('root')
);

~~~


![スクリーンショット 2020-11-29 0.00.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/510ed00a-ded1-2364-fed9-16f89be08a61.png)

表示成功


## まとめ

- コンポーネントの引数に props と入れる。

- コンポーネントの中では props.hoge という形で props の値が取り出せる。

- コンポーネントへの渡し方は `\<Hoge hoge={値} />`
【React】component を作る

# はじめに
React を習得するまでの軌跡をメモっていく備忘録的な記事です。
https://qiita.com/u_query/items/51b4140a450ee5d51dcc の続きです

##  component を表示してみる

create-react-appで作ったデフォルトのファイルは中身は全部消して一から作ります。

~~~jsx:index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <p>Hello, World</p>
  )
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

~~~


![スクリーンショット 2020-11-28 23.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/adac2c85-f0ea-7e2a-aab2-ce1d9cb5c832.png)

表示成功

## まとめ

とりあえずファイルの先頭で以下の2行を書けば React が動く。

~~~jsx
import React from 'react';
import ReactDOM from 'react-dom';
~~~

ReactDOM.renderメソッドを使って第一引数にコンポーネント、第二引数にdocument.getElementById('root')を入れる。

~~~jsx
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
~~~

コンポーネントは以下のように定義をする。
returnの中に JSX を書いていき、ブラウザにはこの部分が表示される。

~~~jsx
const App = () => {
  return (
    <p>Hello, World</p>
  )
};
~~~
[Python]演算誤差 ARC109B

#[ARC109B](https://atcoder.jp/contests/arc109/tasks/arc109_b)

長さ n+1 の丸太を買って、短い方から丸太を作れるだけ作った後、残りの丸太を買うのが最適です。この「作れるだけ作った」ときにいくつの丸太が作れるかを求めるためには、$1 + \dots + k \leq n+1$ を満たす最大の整数 k を求めれば良いです。

私は、$1 + \dots + k = k(1+k)/2$ であることを使って、 $k(1+k)/2 \leq n+1$ を満たす最大の $k = \frac{-1+\sqrt{8n+9}}{2}$ を実装し提出しましたが、ルート演算誤差のために1ケースWAでした。本問の内容であれば、10進数の小数型Decimalを用いることで対応可能だと思われます。

```python:サンプルコード
from decimal import Decimal

n = int(input())
 
k = int((-1 + Decimal(8*n+9)**Decimal(0.5))/2)
 
print(n-k+1)
```

誤差を確実に回避するために、二分探索をすることで求めることができます。
30代からのプログラミング勉強　4日目【HTML/CSS入門編】

## はじめに…
編集リクエストやご指摘のコメントをいただきありがとうございます。
正直「誰も見ていないっしょ！」というノリで自分用復習メモ兼学習意欲継続の為のルーティンとして始めた事だったので驚きました。

そもそも書き方があまり分かっていないのでお見苦しくなってしまう事も多々あるかとは思いますが、気になる点があればご指導頂けると幸いです。

## 学習内容
引き続きUdemy講座です。もっと時間が欲しい…

### HTML/CSS

```html:領域
<div></div>
```

タグ自体は意味を持たない。領域を区別（**div**ision）するためのタグ…らしい。

```html:クラス
<div class="クラス名"></div>
```

グローバル属性。上記の様に書く事で区別するためのグループ名をつける事が出来る。

```css:余白の一括指定
div {
  margin: 長さ;
}
```

上記の様にすると、上下左右の余白を任意の絶対値や相対値で一括指定できる。`auto`と入力するとウィンドウサイズに合わせて自動で調整される設定になる。

```css:余白の個別指定
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
```

この様に入力する事で上下左右それぞれ個別に余白を指定する事も可能。

```css:余白のショートハンドプロパティ
div {
  margin: 10px 20px 30px 40px;
  /*
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    と同じ
  */
}
```

`上` `右` `下` `左` の順でショートハンドプロパティでも書ける。
また、`上` `下`、`左` `右`において同値の場合は後半の記述を省略できる。

```css:余白（内側）
div {
  padding: 長さ;
}
```

内側の余白が設定出来る。幅の指定の仕方はmarginと共通。

```css:背景色
div {
  background-color: カラーコード;
}
```

RGB（`rgb(0, 0, 0)`）やHEX（`#000000`）など指定出来る他、`white`や`black`などの色の名前も使える。

```css:枠線
div {
  border: 長さ;
}
```

線のタイプ、線の色も指定が可能。

## 所感
少しづつ覚えることが増えてきたがまだまだ初歩の段階なので復習しつつ身に付けよう。
CSSの記述真っ赤だし見やすい書き方を調べようと思います。

追記：taiy様より編集リクエストいただき格段に見やすくなりました。ありがとうございます。自分だけでも見やすく書ける様にならなくては…
RSpecを実行すると、 Lock wait timeout exceeded; try restarting transaction mysqlというエラーがでる

ある日、RSpecのテストの実行中に、Ctrl+Cでキャンセルし、再びテストを走らせた。すると、いつまでたっても処理が止まったままだったのでそのまま放置していたら以下のようなエラーが出ました。

```
Lock wait timeout exceeded; try restarting transaction mysql
```

# なぜこうなったのか
おそらく、MySQLのトランザクション（システムスペックは自動でテストデータのトランザクション処理をしてくれる）がコミットされる前にCtrl+Cでキャンセルしてしまったからだと思いますが、はっきりした原因は不明です（超ピンポイントでCtrl+Cを押してしまったため発生した？）

# 解決策
①mysqlに```mysql -u root -p``` でログインする。
②```SHOW ENGINE INNODB STATUS```を実行し、**TRANSACTIONS**の部分を確認する。

```
TRANSACTIONS
------------
Trx id counter 60949
Purge done for trx's n:o < 60941 undo n:o < 0 state: running but idle
History list length 4
LIST OF TRANSACTIONS FOR EACH SESSION:
---TRANSACTION 421573119466232, not started
0 lock struct(s), heap size 1136, 0 row lock(s)
---TRANSACTION 60934, ACTIVE 151 sec
7 lock struct(s), heap size 1136, 4 row lock(s), undo log entries 6
MySQL thread id 3, OS thread handle 140097739974400, query id 78 172.20.0.3 kiyo
Trx read view will not see trx with id >= 60934, sees < 60934
```

③すると、151秒コミットされないままのトランザクションがありました！
thread id 3　とあるのでこのプロセスを kill 3 で削除します。

④再度実行したら、RSpecが無事実行されるようになりました。

おそらくそう起こるエラーではないですが、同じ状況になった方の手助けになれば幸いです！

# 参考
[トランザクションを強制的に終了させる](https://hhelibex.hatenablog.jp/entry/20110329/1301421815)
[rakeタスクでDBのレコードが更新出来なかった時の解決法](https://qiita.com/tatsuyard/items/8ae3d2f43df0a36d3872)

# 最後まで読んでいただきありがとうございます！
何かご指摘などございましたら、コメントいただけると嬉しいです！
Qiita記事のコメント欄を内容直下に移動するユーザースクリプト

コメント欄を記事内容直下に移動し、スクロールの手間を減らします。
[greasemonkey](https://www.greasespot.net/) や [tampermonkey](https://www.tampermonkey.net/) でご利用ください。


ページ読み込み直後に一瞬カクつくのは仕様です。（ある程度スクロールしないとコメントが表示されないため、最下部までスクロールさせて戻しています）

コメントの確認を目的としていたので、移動後のコメント入力欄が問題なく動作するかは未確認です。

```js
// ==UserScript==
// @name         Qiita記事のコメント欄移動
// @version      1.0
// @match        *://qiita.com/*/items/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const scrollX = window.scrollX;
    const scrollY = window.scrollY;
    scrollTo(0, document.getElementsByTagName('body')[0].scrollHeight);
    setTimeout(function() { scrollTo(scrollX, scrollY); }, 50);

    const mo = new MutationObserver(function() {
        const comment = document.getElementById('comments');
        const userInfo = document.getElementsByClassName('ai-Container');
        if (comment && userInfo.length) {
            userInfo[0].parentElement.insertBefore(comment, userInfo[0]);
            mo.disconnect();
        }
    });
    mo.observe(document.getElementsByClassName('p-items')[0], {childList: true, subtree: true});
})();
```
Railsで、現在時刻・日時を表示させる方法

#はじめに
　Rubyでは標準ライブラリなど、様々なものがあるが、その中で、日付についてのものがあり、現在制作中のアプリに日付を表示させようと思い、ここにいたる。

##Rubyでは…

```ruby
require 'date'
```
を記述することで、そのライブラリを使用できる。

##Railsでは…
　調べが足りないので、定かではないが、デフォルトで使用できるみたい。私は、上記の記述を書いた覚えがないが、日時を表示できた。


###現在の時刻

```ruby
Time.now
#=>2020-11-28 23:33:32 +0900
```

###今日の日付
```ruby
Date.today
#=>2020-11-28
```

##最後に
　どこの記述されているのか、わからないが使える機能がたくさん出てきた。Railsは便利だが、ブラックボックスな部分が私にはまだまだあり、難しい。開いたことのないファイルがたくさんある…
　表示方法を変えたいなぁ…`ja.yml`あたりをいじればいいのかなぁ…
【React】環境構築から起動まで

# はじめに

React を習得するまでの軌跡をメモっていく備忘録的な記事です。

## 環境構築
yarn は installしておく

~~~
$ yarn global add create-react-app
~~~

## React アプリに必要なファイル群を作成

~~~
$ create-react-app sample_app
~~~

## アプリの起動

~~~
sample_app $ yarn start
~~~

localhost:3000 にアクセスすると...

![スクリーンショット 2020-11-28 23.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559794/16ea085f-d0d0-a93a-e23a-6d5c1689e586.png)

表示成功
要素の重なりを作るCSS。

諸学者向けの話ですが、要素と要素の重なりを使ったWEBデザインを紹介したいと思います。
イメージ的には以下です。

![要素の重なりのイメージ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/33a72267-c7b0-67ea-bd4f-421de489e7f4.png)

ちょっと分かりづらいですが真ん中のボーダーと右側の青丸が重なってボーダーが突き向けているが分かるでしょうか？

こう言った、要素と要素が重なりをもつデザインは結構見かけます。

## positionを使う（王道パターン）
重なりのデザインと言ったらほぼこれ一択です。

```html:html
<article>
  <time datetime="2018-08-01">1 AUG</time>  
  <h2>海岸のデコレーション</h2>
  <p>CATEGORY: 海と海岸と空</p>
</article>
```

```css:css
article {
  width: 500px;
  position: relative;
}
time {
  background: #0097d8;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}
h2 {
  border-bottom: solid 2px #aaa;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
```

ポイントはarticleの`position: relative;`とtimeの`position: absolute;`です。
大雑把ですがpositionの説明を以下に図解化しました。

![positionの図解](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/7a3b8ae2-0560-fb8f-0110-858276af1046.png)

今回の場合はarticle要素の位置を起点とし、`top: 0;` `right: 0;`つまり右端にtimeが設置されるようにしました。

![positionを使用した例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/8789fdd1-9887-6ea8-35ab-aa29a65aca6f.png)

これが例えばtimeの中の`top: 0;`の値を`top: 10px;`に変えたとしましょう。

![要素のポジションを自由自在に変えられる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/9f1f9f5a-8f0f-e56d-55b1-e9507d4fe5c7.png)

結果をこんな感じです。`top`,`bottom`,`left`,`right`の値を変更することで<font color="red">**自由自在にポジションを変えられます。**</font>

## floatを使う（変化球パターン）
ちょっと変則的な使い方をします。floatの要素の回り込みの性質を利用したやり方です。正直あんまりおすすめのしないやり方で、今回の場合は<font color="red">**たまたま要素の重なりっぽいデザインになった**</font>ような感じです。

```css:css
article {
  width: 500px;
}
time {
  background: #0097d8;
  color: #fff;
  padding: 20px;
  border-radius: 50%;
  float: right;
}
h2 {
  border-bottom: solid 2px #aaa;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
```

メリットをあげるとすればコードが非常にシンプルなところでしょうか。これはこれで良いのですが正直褒められたような使い方ではないですね😅
ちなみにこれをさっきみたくボーダーの中心付近に配置したい場合は、timeに`margin-top: 10px;`を追加すれば調整が可能です。

![マージンで位置の調整ができる](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/72cacf98-af64-68fa-2895-1aace153251b.png)

## 終わりに
今回は要素同士の重なりを作るCSSを紹介しました。またfloatのように通常の目的とは異なる使い方を知った時にはすごい斬新だなって思いました。皆さんも是非参考にして下さい。
Java　ArrayListクラス　使い方

# はじめに
学習用のメモになります。

#ArrayListとは？
ArrayListは複数の要素を入れるための入れ物ようなもの

#ArrayListと配列の違い
* `配列`には格納できる要素の大きさが決まっています。その為、`あらかじめ決めた大きさ`を超える要素を格納すると、IndexOutOfBoundsExceptionエラーが発生します。
* `ArrayList`は要素数の大きさが決まっていません。要素数の上限値を気にせず、どんどん値を追加できます。

#ArrayListを使う

```
import java.util.*;

public class Main {
    public static void main(String[] args) {
        ArrayList<String> team = new ArrayList<String>();

        team.add("勇者");
        team.add("魔法使い");
        for (String member : team) {
            System.out.println(member);
        }
    }
}
```

##ArrayListを作成
```
import java.util.*;

ArrayList<String> team = new ArrayList<String>();
```

##ArrayListの要素を追加
```
team.add("勇者");
team.add("魔法使い");
```
`add`で要素を追加

##ArrayListの要素をループする
```
for (String member : team) {
    System.out.println(member);
}
```

##ArrayListの要素を出力
```
System.out.println(team.get(0));
```
`get`で要素を出力

##ArrayListのサイズを出力
```
System.out.println(team.size());
```
`size`で要素の長さを出力

##ArrayListの要素の更新
```
team.set(1, "忍者");
```

`set`で追加

##ArrayListの要素の削除
```
team.remove(1);
```
`remove`で削除
クラスカルのアルゴリズム

# クラスカルのアルゴリズムとは

最小全域木を構成するためのアルゴリズム
Union-Findを用いて実装することが多い

# なぜUnion-FInd?
Union-Findの以下の特性が最小全域木を構成する上で適している

* 内部的に木構造で実装される<br>
→　一つの集合内部では連結性および閉路がないことが担保される
* 一般的な実装の場合,同一の集合内部で結合は起こらない<br>
→　一般的な実装の場合、異なる祖先を持つグループ同士の結合を行うため
* 一つのノードが複数の集合には属さない<br>
→　結合を行ったときに閉路ができないことが担保される

# 執筆途中
Chatwork に Node.js + TypeScript でメッセージを通知する

## スクリプト

ちょっとしたツールを作成していて Chatwork 通知が必要になりましたため、作成しました。

```typescript
import { escape } from 'querystring';
import fetch from 'isomorphic-unfetch'

export async function notify(
  api_token: string,
  room_id: string,
  message: string,
  self_unread?: 0 | 1
): Promise<Response> {
  return await fetch(`https://api.chatwork.com/v2/rooms/${room_id}/messages`, {
    method: 'POST',
    headers: {
      'X-ChatWorkToken': api_token,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `body=${escape(message)}&self_unread=${
      typeof self_unread === 'undefined' ? 1 : self_unread
    }`,
  });
}
```

下記のライブラリのインストールが必要です。

```bash
# yarn の場合
$ yarn add querystring isomorphic-unfetch

# npm の場合
$ npm install querystring isomorphic-unfetch
```

`querystring.escape`で投稿するメッセージURLパーセントエンコードしています。
これがないと投稿内容にURLで使用できない文字が混ざった際に投稿が失敗します。

また、`isomorphic-unfetch`はブラウザ（`window.fetch`）、サーバー（`node-fetch`）両方で動く`fetch API`を提供してくれるため使用しています。

## 使い方

```typescript
async function main() {
  await notify(
    process.env.CHATWORK_API_TOKEN,
    process.env.CHATWORK_ROOM_ID,
    "テストメッセージです。"
  );
}
main();
```

## Chatwork API

詳しい仕様は公式ドキュメントをご確認ください。

- https://developer.chatwork.com/ja/endpoint_rooms.html#POST-rooms-room_id-messages
"export 'createRouter' was not found in 'vue-router' の解決法

#はじめに
Vue3で作成したプロジェクトでvue-routerを使おうとしたが、なぜかうまくいかず:confused:

調べてもあまり情報がなかったのでここに記録することに決めた！

#Vue3でvue-routerを入れると、、

```console
npm install vue-router
```


```javascript:main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';

import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue';
import UsersList from './components/users/UsersList.vue';


const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/teams', component: TeamsList },
        { path: '/users', component: UsersList },
    ]
})

const app = createApp(App)

app.use(router);

app.mount('#app');
```

```console
 WARNING  Compiled with 2 warnings                                                          23:00:16

 warning  in ./src/main.js

"export 'createRouter' was not found in 'vue-router'

 warning  in ./src/main.js

"export 'createWebHistory' was not found in 'vue-router'


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.11.20:8080/
```

**`vue-router`がありませんよ！！っと言われる。。なんで？？！**


#Vue3ではvue-routerも新しくしないとダメ
https://github.com/vuejs/vue-router-next

https://next.router.vuejs.org/installation.html#direct-download-cdn

これらの公式ドキュメントを見ると

```console
npm install vue-router@next
```

**「@next」がついてる！**
どうやら今のところはこのコマンドで入れないといけないようです。。。
知らんかったーーーー。エラーメッセージ とかつけといてくれよ。。。
Reactを学んだ(3) ~React Router~

# React Router

- SPAを実現してくれる。
- `<BrowseRouter/>`と`<Link/>`と`<Route/>`を同時に使う。
- `yarn add react-router-dom`から始める。


## `<BrowserRouter />`


- こんな感じで導入する。
- 遷移の履歴が`historyオブジェクト`の中に蓄積されるようだ。

```src/index.js
import { BrowserRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, document.getElementById('root')
);
```


## `<Link to="/about">About</Link>`

- 公式ドキュメントは[こちら](https://reactrouter.com/web/api/Link)
- stateが肝っぽい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/465e3f92-5edc-fa59-d0ed-272d9774633e.png)

- 現在地を元に次の行き先を決めるためにはcallback関数を渡せば良いらしい。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534442/b3fa3ee0-b3fe-a74e-e1ac-25925ddf2495.png)


## `<Route />`

- This is a component which is going to decide which components are rendered based on the current URL path.
- ブラウザが指定するURLがpath=XXXにマッチした場合のみ、指定されたコンポーネントを描画してくれる。
- 以下のように使用する

```jsx
import { Link } from 'react-router-dom'

<div>
  <Route exact path='/' render={() => (   // exactを付けないと前方一致は全て当てはまってしまう...
                                          // propsを渡す必要があるならば、render=にcallback関数形式でコンポーネントを指定する
    <ListContacts
      onDeleteContact={this.removeContact}
      contacts={this.state.contacts}
    />
  )} />

  <Route path='/create' component={CreateContact}/>   // propsを渡す必要がなければ、component=XXXで指定できる
</div>

```

- また、以下のように`history.push('/xxx')`により、ページのリダイレクトが可能である。

```jsx


<Route path='/create' render={({ history }) => (  // 第一引数はhistroyオブジェクトが渡されるらしい(?)
  <CreateContact
    onCreateContact={(contact) => {
      this.createContact(contact)
      history.push('/')              // history.push('/xxx')を指定する
    }}
  />
)}/>
```
Unityから音が出ない時の解決方法

すごく単純ですが、Unityから音が出ない時の解決方法です。

![MuteAudioがオンで音が再生されない2_trim.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126821/2e6c3b43-0b0e-5d2e-ceae-375840aeb5f4.png)

「Mute Audio」が有効になっていると、Unityから音がでなくなります。
Projectビューから.mp3ファイルなどを選択し、ヒエラルキービューで再生ボタンを押すと再生されるので、スクリプトが原因かな？と勘違いしたりして、地味に問題に気付くまでに時間がかかりました。


これが有効な際にスクリプトでログを表示したら便利かなと思ったのですが、~~スクリプトで制御する方法はざっと調べたところなさそうでした。~~


2022年1月23日追記
以下のようなスクリプトで、ミュートになっていた場合に自動でミュートを無効にして音が出るようになります。

```
void Start()
{
    if (UnityEditor.EditorUtility.audioMasterMute)
    {
        Debug.LogWarning("「MuteAudio」が有効になっていました。自動で無効にします。");
        UnityEditor.EditorUtility.audioMasterMute = false;
    }
}
```
転載⇒周六分享：移行实战 

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓転載↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
https://www.notion.so/18a6771830f84d5bb2e8a2a72cb23bc0


### １．Project説明

当公司的组织结构发生很大变化的时候（比如说集团公司的下属分公司的建立，合并，注销，或者收购，公司内部部门的合并，撤销），这样的变化会影响到salesforce系统的role，现有的salesforce系统role就会随着公司的部门的变化一起变化，与之相关的sharing rule，public group等等也会相应变化，还有user和role的关联

实际状况：User：7000，role：800，sharing rule：300

**解决方案：将Role、sharing rule全部删除，然后将整理过后的Role,sharing rule重新导入**

**（DataLoad・Ant）**，**然后重新做user和role的匹配**

**不同的项目有不同的解决方案，在掌握知识的基础上，提出最佳解决方案**
AmazonLinux node.js/typescriptのインストール手順

typescriptを始めたくてAmazonLinuxにnode.jsとtypescriptをインストールしてみた。
まずはcurlでリポジトリを追加してyumでnode.jsをインストールする。

```
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs
```

これでLTSの14.x版がインストールされる。
次にnpmでtypescriptをインストールする。

```
sudo npm install -g typescript
```

これでtscが使えるようになり、typescriptのコンパイルができるようになった。
SUIDを使って、読み取り権限のないファイルを読み込みたい

## やりたいこと

Linux上で、あるユーザにプログラムを実行させたい。プログラムでは別のファイルを読み込む必要があるのだが、読み込むファイルの内容は実行ユーザには見せずに秘密にしたい。そんな都合の良い事って一体できるのかしら。

## 今回試してみる例

* 登場するユーザ
    * mario : 各ファイルの所有者
    * koopa : 実行ファイルを実行するユーザ。秘密ファイルにはアクセスさせたくない

実行ファイルと秘密にしたいファイルが、以下のように格納されているとする。

```
.
├── load_secret  # 実行ファイル。秘密にしたいファイルをReadする
└── secret
    └── file.txt # 秘密にしたいファイル
```

``secret/``ディレクトリは以下のようなパーミッションになっており、``mario``しかアクセスできない。

```
# ls -l | grep " secret"
drwxr-x--- 1 mario mario     4096 Nov 28 12:48 secret
```

## 実行ファイルにSUID（またはSGID）を付与すれば可能

とりあえずは結論。
実行ファイルのパーミッションが以下の状態になればOK。これをSUID(Set User ID)という。

```
# ls -l | grep " load_"
-rwsr-xr-x 1 mario mario 14832832 Nov 28 12:48 load_secret
```

ポイントは、ファイル所有者の実行権限が「s」となっているところ。このシンボルがついている場合、どのユーザが実行しても必ずファイルの所有者（本例では``mario``）の権限で実行される。そのため、例えば以下のように``koopa``になって実行しても、直接はアクセスできない`secret/file.txt`を読み取ることができる。

```
# su koopa
$ ./load_secret
(secret/file.txtを読み取り、プログラムは無事に終了する)
```

パーミッションの「s」は例えば、`chmod`コマンドで以下のようにすれば付与可能

```
# ls -l | grep " load_"
-rwxr-xr-x 1 mario mario 14832832 Nov 28 12:48 load_secret
# chmod u+s load_secret
# ls -l | grep " load_"
-rwsr-xr-x 1 mario mario 14832832 Nov 28 12:48 load_secret
```

参考までに、「s」はグループに対しても付与可能。これをSGID(Set Group ID)という。
SGIDの場合は、任意のユーザがグループ権限でファイルを実行する設定となる。

```
# ls -l | grep " load_"
-rwxr-xr-x 1 mario mario 14832832 Nov 28 12:48 load_secret
# chmod g+s load_secret
# ls -l | grep " load_"
-rwxr-sr-x 1 mario mario 14832832 Nov 28 12:48 load_secret
```

## 動作確認

本当にできるのか実際に試してみる。
まず、`secret/file.txt`の中身は以下。

```txt:secret/file.txt
Wa-hoo!
Oh yeah!
Mario time!
```

続いて`load_secret`だが、今回は下記のようなPythonでコードを書いてバイナリを作ることにする。（バージョンは3系を利用）

```python:load_secret.py
#!/usr/bin/env python
# -*- coding:utf-8 -*-

if __name__ == '__main__':
  with open("./secret/file.txt", "r") as f:
    file_str = f.read()
    print(file_str) # ファイルの中身表示（秘密だから実際はやらないだろうが…）
```

Pythonスクリプトのバイナリ化は「pyinstaller」というのでできるらしいのでこれを利用する。

* pyinstallerの参考サイト
    * https://qiita.com/hirohiro77/items/466e411fa41f144c8b2a

pyinstallerをインストールして、バイナリファイルを作成
※便宜上、プロンプトの()内に現在のユーザ名を記載

```
$(mario) pip install pyinstaller
$(mario) pyinstaller load_secret.py --onefile
```

バイナリファイルは`./dist`配下にできるので、カレントにコピー

```
$(mario) cp ./dist/load_secret .
```

SUIDの権限を付与

```
$(mario) chmod u+s load_secret
$(mario) ls -l | grep " load_"
-rwsr-xr-x 1 mario mario 14832832 Nov 28 12:48 load_secret
```

`koopa`になって実行すると、直接は見れないファイルを読み込めることを確認！

```
# su koopa
$(koopa) ./load_secret
Wa-hoo!
Oh yeah!
Mario time!
```
MySQLの基本的なコマンドについて(No.1)

備忘録

内容は以下の通り

+ バージョン確認
* データベース(以下DB)作成 ・削除
* テーブル作成・削除


##バージョン確認

サーバサイド言語でMySQLを利用する場合、バージョンを指定することがよくある
そして、どのバージョンをインストールしたかをよく忘れるので、覚えておくと便利なコマンド

_ログイン前と後でコマンドが変わる(どちらも結果はほとんど同じ)_

**ログイン前**

```
$ mysql --version
```
**ログイン後**

```
mysql> select version();
```

MySQL(他のDBでもそうだが)ではDBを作成し、その中にテーブルを作成して、データを管理する。
アプリケーションは複数のテーブルを用い、データを管理し、その複数のテーブルをまとめて管理する単位をDBと呼ぶ。

##DB作成
**まずはDBにログインする**

```
$ mysql -u root -p
```
上記はrootユーザでログインするコマンド
パスワードを求められるので入力(rootユーザはデフォルトで作成されている)

**DBを作成する**

```
mysql> CREATE DATABASE DB名 default character set utf8;
```
日本語のデータを扱う場合は
`default character set utf8`
を必ず記述する(ここは日本なので思考停止でDB作成時に入力する)
全角と半角はどちらでも構わないが末尾には`;`を必ず入力する(SQLの終端記号)

**DB一覧を表示**

```
mysql> show databases;
```
複数のアプリを作るとDBも複数作っていくので、このコマンドで一覧を表示して確認する。
また、DBを作成した後に、正しく作成されているかの確認の意味でも一覧表示してみる。(一覧表示なので複数形になっている点に注意)

**DBの削除**
間違ってDBを作成してしまった場合の対処方法

```
mysql> DROP DATABASE DB名;
```
※確認無しに即削除になるので、テーブルを作成したデータベースを削除する際は最新の注意を払うこと。

##テーブルの作成
テーブルはDBの中に作成するので、以下の手順で作成する。

1. DBの選択
2. テーブルの作成
3. テーブル一覧の出力(確認のため)
4. テーブルの定義情報を出力

**データベースの選択**

```
mysql> USE DB名
```
このコマンドでDBを選択して、次のコマンドでこのDBの中にテーブルを作成する。

**テーブル作成**

```
mysql> CREATE TABLE DB名.テーブル名(
        カラム名1 データ型 制約,
        カラム名2 データ型 制約,
       );
```
DB名と制約は省略可です。
ファイルにSQLコードを記述して、まとめてSQLを実行する場合、DB名を選択できないので、DB名を省略するとエラーになってしまう。
故に、基本的にDB名は記述する癖をつけておいたほうが間違いがない。

例えば、次のようなテーブルを仮定して実行してみる

テーブル名:user

| id|name | age | created_at|
|:-:|:-:|:-:| :-: |
|整数型| 文字型  |整数型   | ﾀｲﾑｽﾀﾝﾌﾟ
|主キー| null禁止|  null禁止|null禁止|
|自動連番   | 最大100文字  |   |

```
mysql> CREATE TABLE DB名.user(
          id int auto_increment not null primary key,  
          name varchar(100) not null,
          age int not null,
          created_at timestamp not null 
          current_timestamp
       );
```
主キーとなるidはレコード追加時に自動で採番すると便利なので、オートインクリメントにしておく
タイムスタンプとはレコード追加日時を記録するためのデータ型


**テーブル一覧の出力**
作成したテーブルを一覧として出力するコマンド

```
mysql> show tables;
```

DB一覧の出力と同様に複数形になっている点に注意

**テーブルの定義情報を出力**
カラム名やデータ型、制約を確認することはよくあるため、覚えておくと便利

```
mysql> describe テーブル名
```
ディスクリブが説明という意味なので覚えやすい


**テーブルの削除**
テーブル定義を間違えた場合、作り直すがその際に実行するコマンド

```
mysql> DROP DB名.テーブル名
```

おしまい
（xlwing使用）空白があるテキストファイル（数行）を読み込んで、excelに貼り付ける mshmura


xlwing　使用


テキストファイルの中身

```test.txt
テスト　test      t3    USD   44
te  55   99     gbe   99
```

pythonファイル

```hello.py

def import_txt_split():

    # ブックの読み込み
    wb = xw.Book.caller()

    # シートの読み込み
    sht = wb.sheets['Sheet1']

    # テキストファイルの読み込み
    f = open('test.txt', 'r',encoding='UTF-8')

    # 各行をリストで取得
    datalist = f.readlines()

    # 空白を取り除く
    s = [i.split() for i in datalist]

    # 1行ずつ、リストをペッと貼り付ける
    for num,i in enumerate(s):
        sht.cells(num+1,1).value = i

    # テキストファイルを閉じる
    f.close()
```

VBA側

```
Sub import_text()
    RunPython ("import hello; hello.import_txt_split()")
End Sub
```

このVBAをボタンにマクロ登録。クリック

結果

![qita1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191921/13176969-c570-f95d-0589-60582c16302d.png)


上記の方法以外に、pandasのdataframeに貼り付けて、A1セルにぺっと貼り付ける方法でも出来た
MacでDjango(Python3)環境を構築してみた

#はじめに
今回は、Python/DjangoでWebアプリを作る目的で、
Macにて環境構築をしていく過程を確認していきます。

参考記事
<https://qiita.com/M-Yamashii/items/bfc45596c2913a7571dc>

目標
『Macにインストール済みのエディタ「VSCode」にて、
　Python3/Djangoプロジェクトを実行できる仮想環境を構築』

#1.Djangoをインストール
早速Djangoをインストールしていくのですが、
その前に、以下2点を確認します。

1.homebrewがインストールされているか
　していなければ、以下を先に確認のうえ実施していきます。

　『MacでHomebrewをインストールしてみた』
　<https://qiita.com/kosments/items/bf8edd9743596c2366e4>

2."1"が完了していたら、pipenvがインストールされているか
　していなければ、ターミナルを開き、以下のコマンドを実行

```
$ brew install pipenv
```
インストールが開始するのでしばらく待機。。。

完了したらDjangoをインストールしていきます。
以下のコマンドを実行します。

```
$ pipenv install django
Installing django...
Adding django to Pipfile's [packages]...
✔ Installation Succeeded 
```

#2.Python3の仮想環境を作成する
①Documents等の任意のフォルダに新規フォルダを作成します。
　例：/Users/Documents/django_test
　フォルダ名：django_test

　②cdコマンドで作成したディレクトリに移動します。

```
$ cd /Users/Documents/django_test
```

　③以下のコマンドを実行し、仮想環境を作成します。

```
$ python3 -m venv env
```

#3.VSCodeにて
①VSCodeを立ち上げて、「開く」から作成したフォルダを開きます。

②F1(またはfn+F1)を押して、"Python Select Interpreter"を検索して選択。

③ディレクトリを選択する画面が出るので、作成した仮想環境(今回の場合「./env/bin/python」)を選択。
 ※青くなっているところは無視します
![スクリーンショット 2020-11-26 19.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/a0b7c21e-0a94-f750-9b17-93172e526f86.png)

④VSCode画面左下部(青いバー)に指定した環境が表示されているか確認。
　(今回の場合「Python 3.8.3 64-bit('env')」)

⑤VSCodeにてターミナルを開き、以下のコマンドを実行し、仮想環境を利用できるようにします。

```
$ source env/bin/activate
```

これで、VSCode上で、作成しておいた仮想環境にて、Djangoを利用できるようになります。
「4」にて、プロジェクトを作成し、ブラウザ上でアクセスするところまで、確認しておきます。

#4.VSCode上でプロジェクトを作成
①引き続き、VSCodeのターミナルにて以下のコマンドを実行。

```
$ django-admin startproject test_project
```

　※django-adminが「command not found」となる場合は、以下のどちらかもしくは両方を確認した後、上記のコマンドを再度、実行します。

　1.「$ pip install django」を実行

　2.「$ python -m」コマンドを利用し、django-admin.pyがあるフォルダを探す。
　　該当ファイルが仮想環境に保管されていることを確認します。

仮想環境に「test_project」フォルダが作成されていることを確認します。

②ブラウザでアクセスを試します。
　まずは以下のコマンドで作成したフォルダに移動します。

```
$ cd ./test_project
```

 次に、以下のコマンドを実行します。

```
$ python manage.py runserver
```

　次に、ブラウザ上で、以下のURLにアクセスします。

　<http://127.0.0.1:8000/>

　以下の画面になることを確認します。

![スクリーンショット 2020-11-28 22.36.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/3459cb56-9b47-8fe2-d8d2-0ce6b9925111.png)

今回は、これで以上です。

#まとめ
今回は、MacにてDjango環境の構築過程を確認しました。
参考にさせて頂いた記事の作成者様ありがとうございました。

引き続きPython/Djangoを触っていきたいと思います。
ありがとうございました。
ゼミDB設計（自分メモ用）

データベース設計の手順
①ER図→②データベース設置or選択→③テーブル作成、値挿入

データベースの設計からやってく。

<h2>はじめに</h2>
ゼミではPostgresを使っていて、ゼミ用ユーザー名からアクセスして作成したパスで
**ゼミサーバの中の自分用データベースが使える。**
そしてそのデータベースの中でリレーション組んでいく（テーブル設計）イメージで。。

<h3>１、ゼミサーバに繋げる</h3>
```ssh ユーザ名@ggg.ggg.jp```
コマンド入力後、パスワード聞かれるからパスワードを入力。

<h3>２、Postgresを使う</h3>
```psql -U ユーザ名```
また、パスワード聞かれるから入力。
※ただしこれはメールで送られてきてる方のパスワードなので注意

これで無事使える状態になっているはず。
<h3>３、データベース操作のコマンド</h3>
×
既存のデータベースに移動
```use データベース名;```

新しいデータベースを作成
```create database データベース名;```
これから、useで移動できる。

これでデータベース切り替えたりして、本番用とお試し用を使い分けてテストする。

<h3>4、テーブル操作のコマンド</h3>
・テーブルの作成
```create table テーブル名;```

・テーブル一覧の確認
```#dt```
これで各リレーションの確認が可能

・テーブルの詳細確認
```\d テーブル名;```
これでそのテーブルのカラム名の一覧や、作った様子の確認ができる
```describe テーブル名;```　→これではできなかった

・カラムを作成し、値を入れていく
```insert into テーブル名 (カラム名１、カラム名２…）
改行して
values ('値１'、'値２'…）;```

削除する場合
```delete from テーブル名　where　カラム名='値の詳細';```
開発環境で「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」を確認する方法

こんにちは、株式会社ベストティーチャーで元気に働く たわら です。

「どの html 要素にどの CSS が当たっていて、そのファイルはどこに格納されているのか？」と思うことがあります。例えば、あるフォームにてエラーメッセージを表示するときに、別のページのフォームのエラーメッセージをいい感じに参考にしたい場合などです。

こんな 無料会員登録 画面（！）があったとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606292/395e42d0-4697-ecc6-3717-e3896e13d2ae.png)

こんないい感じのエラーメッセージを出してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606292/4211c5e8-c267-f7f7-8ce5-b87f3d256898.png)

```
ボク「これってどのCSSが当たっているんだろう？？？」
先輩「開発者ツールを見よう！」
```

まずは、調べたい部分にカーソルを合わせて、右クリックをしてポップアップの検証を開きます（Chromeの場合）。そしてElementsタブのなかのStylesタブを確認します。そこでCSSのファイルを確認することができます。開発環境であれば、どのファイルの何行目のコードに記述があるかを確認できます。便利ですね。

![Best_Teacher.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606292/9ef97a14-5029-5b68-489c-4f992f800ee4.png)

## 最後に
リポジトリにはじめてさわる際などに役立つかもしれません！
[GitHub]revertコマンドとresetコマンドの違いについて！[初心者]

#はじめに
以前、アプリ開発に取り組んでいるときに、直前にコミットした操作に誤りが見つかり、コミットを取り消したいということがあったのですが...
どうやってコミットの履歴を消すのか分かりませんでした。
ネットで調べていくと、GitHubのコマンドには、``revertコマンド``と``resetコマンド``というものがあることを発見。
しかしよくよく説明を読むにつれて、これらのコマンドを使用する際は、落とし穴にはまる危険性が高い、と思いました。

備忘録も兼ねてアウトプットします！！

#revertコマンドについて
反対の内容で新規コミットを作成し、過去のコミットを打ち消すためのコマンドです。
新しくコミットを追加しているだけであり、既存コミットの履歴がGitHub上から消えることはありません。
よって、後述する``resetコマンド``と比較すると、安全なコマンドと言えるでしょう。

#使用方法
通常は以下のコマンドを打ち込むと、自動コミットという流れになります。
コマンド入力後に自動でエディタが開くので、コミットメッセージを併せて入力する形です。

````ruby:
$ git revert <commit> -e
````

または

````ruby:
$ git revert <commit> --edit
````

逆に、新規コミットしない方法もあります。

````ruby:
$ git revert <commit> -n
````

または

````ruby:
$ git revert <commit> --no-edit
````

コミットメッセージなしで``revert``できます。

#resetコマンドについて
``revertコマンド``と違い、現在のHEADを指定された状態にリセットするコマンドです。
指定したコミット以降に行われた処理を全て元の状態に戻します。
しかし、その戻したということ自体、コミットログには一切記録が残りません。
よって、チーム開発などで使用することは、極めてリスキーなコマンドです。

#使用方法

直前のコミットを元の状態に戻すとき

````ruby:
$ git reset --hard HEAD^
````

n個前のコミットまで戻すとき

````ruby:
$ git reset ---hard HEAD~n
````

##resetコマンドのオプション
上記で使用している``--hard``を含め、いくつかのオプションが存在します。

| オプション名 |インデックス | ワーキングツリー|
|:-----------|------------|------------|
|  --mixed(デフォルト)   |  リセット   | リセットされない	      |
| --soft    | リセットされない	    | リセットされない	   |
|   --hard   |リセット   |  リセット      |

#おわりに
GitHubでコミットやプッシュのミスに気がついた時は、かなり焦ることが多いですよね。
そんな万が一の際に、慌てふためくことのないように、こういったイレギュラーな処理にも慣れていきたいと思いました。