OmniAICreator/Qiita-1.07M huggingface dataset:
python研修の振り返り①

python研修を終えたので、その備忘録としてメモ書きをしていきたい。
混乱しやすいところを中心に書きます。
誤りなどがあれば指摘いただければと思います。

#演算子 

```python:演算子.py
8/2 #割り算
5//4 #商
10%4 #余り
---
4
1
2
```

#インデックス
pythonのインデックスは

```
 0, 1, 2, 3, 4, 5,
-6,-5,-4,-3,-2,-1
```

で示される。

```python:index.py
"python"[0]
----
"p"
```
一文字目のpが指定されている。

```python:index.py
"python"[-1]
----
"n"
```
引数を-1と指定すると最後尾の"n"が返される。

#スライス

```python:スライス.py
"apple"[2:4]
----
"pl"
```
文字列[開始地点:終了地点]で文字列をスライスすることができる。開始地点のインデックス番号は含むが、終了地点のインデックス番号は含まないのがややこしいと感じた。

#zipを使って辞書を作成

```python:words.py
list_1 = [1,2,3]
list_2 = ["APPLE", "ORANGE", "WOWOW"]
dict(zip(list_1, list_2))
----
{1: 'APPLE', 2: 'ORANGE', 3: 'WOWOW'}
```

#ループ

```python:words.py
words = {1:"a", 2:"b", 3:"c", 4:"d", 5:"e"}
```
辞書型のwordsを作成

```python:for.py
for x in words:
  print(x)
----
1
2
3
4
5
```

```python:for.key().py
for x in words.keys():
  print(x)
----
1
2
3
4
5
```

辞書の後にkey()で辞書のキー部分を取り出すことができる。

```python:for.values().py
for x in words.values():
  print(x)
----
a
b
c
d
e
```
一方でvalue()を指定すると辞書のバリュー部分を抽出することができる。

```python:for.items().py
for key, value in words.items():
  print(key, value)
----
1 a
2 b
3 c
4 d
5 e
```
items()をwordsに追加し、key,valueとすることで辞書内で対応するペアを抽出することができる。

#関数
以下が関数の最もベーシックな型。

```python:def.py
def plus(a, b):
  return a+b

plus(10, 10)
----
20
```

〜以下怪しい範囲〜
args → 複数の引数を受け取ることができる

```args.py
def greeting(*args):
  for arg in args:
    print(arg)

greeting("hello", "Moimoi", "kon")
----
hello
Moimoi
kon
```

t=[]のようにひとまずリストでまとめてからでも、*argsで受け取ることができる

```args2.py
def greeting(*args):
  for arg in args:
    print(arg)

t = ["hello", "Moimoi", "kon"]
greeting(*t)
----
hello
Moimoi
kon
```

kwargs → 複数のキーワード引数を辞書化する

```kwargs.py
def haraheri(**kwargs):
  print(kwargs)

haraheri(main="beef", drink="coffee")
----
{'main': 'beef', 'drink': 'coffee'}
```

for.items.pyでのitems()をここでも利用してみると、(**kwargs)で受け取った辞書型の引数を対応するペア同士で出力することができる。

```kwargs2.py
def haraheri(**kwargs):
  for kind, food in kwargs.items():
    print(kind, food)

haraheri(main="beef", drink="coffee")
----
main beef
drink coffee
```
*argsと**kwargsの併用

```args_kwargs.py
def menu(food, *args, **kwargs):
  print(food)
  print(args)
  print(kwargs)

menu("apple", "banana", "orange", main="beef", drink="coffee")
----
apple
('banana', 'orange')
{'main': 'beef', 'drink': 'coffee'}
```

apple-food, banana/orange→*arges, main/drink→kwargsとなっている。
~~~~~~~~~~~

#リスト内包表記
```リスト内包表記.py
[i**2 for i in range(5)]
----
[0, 1, 4, 9, 16]
```

```リスト内包表記1.py
[i*j for i in range(1,5) for j in range(1,3)]
```

```リスト内包表記1'.py
for i in range(1,5):
  for j in range(1,3):
    print(i*j)
```

上記2つは同様の内容を出力している。

```map()とlambdaを使ったリスト内包表記.py
num = [i for i in range(7)]
print(num)

[x for x in map(lambda x: "even" if x%2 == 0 else "odd", num)]
----
[0, 1, 2, 3, 4, 5, 6]
['even', 'odd', 'even', 'odd', 'even', 'odd', 'even']
```
map(実行したい処理, 実行対象)で行うことができる。

とりあえず今回はこの辺りで。
また次回に続きを書きます。
git 新しいブランチを作成する

# 新しいブランチを作成する
まず、`cd`コマンドで現在作成中のアプリケーションのディレクトリに移動して、そこで、gitコマンドを入力する。
ディレクトリの移動後は、元のマスターブランチに一旦戻って、そこで、ブランチ作成コマンドを入力する。

```:現在のブランチの確認
$ git branch -a
# 以下のように現在のブランチの状況が表示される
* main　=>  いまここ
  remotes/heroku/master
  remotes/origin/main
# 元のブランチにいるか確認する
```

次に、新しいブランチを作成するコマンドを入力して、新規ブランチを作成する。

```:新規ブランチの作成
$ git checkout -b "リポジトリ名"
Switched to a new branch '時刻表示の実装'
```
これで新しくブランチが作成できました。
ちなみにブランチを移動する場合は、以下のコマンドを入力します。

```:ブランチの移動
$ git checkout "移動したいブランチ名"
```
これで、ブランチを変えることができます。
v-for:繰り返し処理

配列を取り出して表示せる方法
-

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="fruit in fruits">{{fruit}}</li>
</ul>
</div>
```

```vuejs
new Vue({
  el: '#app',
   data: {
   fruits: ['りんご','バナナ','キュウイ','ぶどう']}
})
```

表し方
-

```
<li v-for="fruit in fruits">{{fruit}}</li>
```

|v-for 単数形名詞　in 複数形名詞　{{単数形名詞}}|
|--|
Oracle_システムパラメータ関係

DBとクライアントバージョン：
--------------------------------------------

コマンドプロンプトでバージョンを確認：
C:\Users\user1>sqlplus -v
SQL*Plus: Release 12.2.0.1.0 Production

SQLでバージョンを確認：
SELECT * FROM v$version

サービス名とSID
--
SQLで確認：

```
-- サービス名(SERVICE_NAMES):デフォルト(通常変更しない)はDB_UNIQUE_NAME.DB_DOMAIN。
select name,DB_UNIQUE_NAME from v$database;
SELECT NAME, VALUE FROM V$PARAMETER WHERE NAME = 'db_domain'; 

-- システム識別子(SID):通常はインスタンス名と同じ
select instance_name from v$instance;
```
sqlplusで確認：

```
SQL> show parameter db_name
SQL> show parameter db_unique_name
SQL> show parameter db_domain
SQL> show parameter instance_name
```
文字をASCIIコードに変換する（ASCII）
--
SQL> SELECT ASCII('A') FROM dual;
ASCII('A')
出力：
65

テーブルに変な形のKあり、普通のKと区別するためにアスキーコード変換して、確認
select ID,ASCII(ID) from table1;
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381112/62fd9c07-63d3-bd96-8f0e-5e6d5ac58876.png)
v-show


v-ifディレクティブとv-showディレクティブが消えた場合両者に違いがあります。

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p v-if="ok">if</p>
<p v-show="ok">show</p>
<button @click="ok = !ok">ボタン</button>
</div>
```
```vuejs
new Vue({
  el: '#app',
   data: {
   ok: true
 }
})
```

v-ifの場合(検証画面で）
![20210507-093106.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/58112598-fd88-a7e3-ea20-ff35da2846c1.png)

<!---->になっている

v-showの場合(検証画面で）

<p style="display: none">show</p>となっている。

v-showとtemplateタグの相性の悪さ
-

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<template v-show="ok">
<p>テスト</p>
</template>
</div>
```
```vuejs
new Vue({
  el: '#app',
   data: {
   ok: false

 }
})
```

templateとの相性の悪さ
-

templateタグはok: falseを受けて消えるがv-showは元もとdisplay: noneで消えていて元は残っているのでテストだけ残ってしまう事になる。

2
-

if-elseにあたるものがない

3
-

表示コストが高い（表示しないものでもdisplay: noneで読み込んでいる）
＊v-ifも<!---->要素を消す作業をしているのでこちらも表示コストが高い。
正規表現の一覧

#正規表現とは
正規表現とは、文字列のパターンを記述するための言語。文字列が指定したパターンを含んでいるかチェックできる。

Ruby3.0.0 リファレンスの引用文
>正規表現(regular expression)は文字列のパターンを記述するための言語です。また、この言語で記述されたパターンも正規表現と呼びます。
>正規表現を用いると、文字列が指定したパターンを含んでいるかどうかを判定し、また含んでいるならばそれが文字列中のどの場所であるかを知ることができます。

#正規表現の例
```正規表現
/\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i

```
正規表現|意味
-|-
/ |正規表現の開始を示す
\A|文字列の先頭
[\w+\-.]+|英数字、アンダースコア（_）、プラス（+）、ハイフン（-）、ドット（.）のいずれかを少なくとも1文字以上繰り返す
@|アットマーク
[a-z\d\-.]+|英小文字、数字、ハイフン、ドットのいずれかを少なくとも1文字以上繰り返す
\.|ドット
[a-z]+|英小文字を少なくとも1文字以上繰り返す
\z|文字列の末尾
/|正規表現の終わりを示す
i|大文字小文字を無視するオプション


#基本の文法
正規表現内で特別な働きをする文字列（メタ文字列）
それ以外の文字列そのおのにマッチするような文字列（リテラル）

文字列|名称
-|-
東京、大阪|リテラル
() [] {} . ? + * &#124; \ |メタ文字列
#{式}|式展開

#文字クラス
文字|説明
-|-
[]|角括弧に含まれるいずれか１文字にマッチ
-|範囲指定
^|角括弧に含まれる文字以外にマッチ（否定）
&&|共通
()|列挙
&#124;&#124;|いずれかの条件(OR条件)
\|直後の正規表現記号をエスケープ

<h1>文字</h1>
文字|説明
--|--
\t|タブ（水平）
\v|タブ（垂直）
\r|改行
\n|改行
\f|改ページ
\b|バックスペース（文字クラス内で有効）
\a|ベル
\e|エスケープ文字

#省略記法
文字|説明
-|-
\s|空白
\d|すべての数字（１０進数字）
\D|すべての数字以外の文字（非１０進数字）
\s|垂直タブ以外のすべての空白文字（空白文字）
\S|すべての非空白文字（非空白文字）
\w|アルファベット、アンダーバー、数字（単語構成文字）
\W|アルファベット、アンダーバー、数字以外の文字（非単語構成文字）

<h1>繰り返し</h1>
文字|説明
--|--
.|任意の１文字にマッチ
+|直前の文字が１回以上繰り返す場合にマッチ
*|直前の文字が０回以上繰り返す場合にマッチ
?|直前の文字が０個か１個の場合にマッチ
+?|直前の文字が１回以上繰り返す場合にマッチ
*?|直前の文字が０回以上繰り返す場合にマッチ
??|直前の文字が０個か１個の場合にマッチ
{n}|直前の文字の桁数を指定
{n,}|直前の文字の最小桁数のみ指定
{n,m}|直前の文字の最小桁数と最大桁数を指定
{n,m}?|直前の文字の最小桁数と最大桁数を指定

#キャプチャ
文字|説明
-|-
()|文字を１つのグループにまとめる（キャプチャ）
(?<name>pat)|名前つきキャプチャ

<h1>定義済みの表現</h1>
文字|説明
--|--
^|直後の文字が行の先頭にある場合にマッチ
$|直前の文字が行の末尾にある場合にマッチ
\<|単語の先頭にマッチ
\>|単語の末尾にマッチ
\b|単語の先頭か末尾にマッチ
\B|単語の先頭か末尾以外にマッチ
\A|ファイルの先頭にマッチ
\z|ファイルの末尾にマッチ
\G|直前の一致文字列の末尾にマッチ

<h1>文字列の置き換え</h1>
文字	|説明
--|--
\0|一致した文字列全体に置換
\1 ～ \9|一致した文字列の１～９番目に対応する文字列に置換
\l	|次の１文字を小文字に変換
\L...\E	|挟まれた文字列を小文字に変換
\u	|次の１文字を大文字に変換
\U...\E	|挟まれた文字列を大文字に変換

<h1>修飾子一覧</h1>
文字|説明
--|--
/i|大文字と小文字を区別しない
/o|式の展開を一度だけ行う
/x|パターンの空白やコメントを無視
/m|対象の文字列を複数行として扱う
/g|繰り返しマッチを行う
/e|置換を行った結果を式として処理


参考元
[Ruby ３.０.0 リファレンスマニュアル＞正規表現](https://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html)
Ardino-firmata-pyMataを使ったI2Cセンサー接続GUIを作る

[前記載のPCのI/OとしてのArduinoから](https://qiita.com/Nomisugi/items/e06478efe0d1a9f1269b)
ArduinoとFirmataを使えばPCから簡単にI/Oを操作できる事がわかりました。
そこで、pythonを使ってGUIでI2CセンサーをコントロールできるGUIサンプルを作りました。

接続図

![pyMata_Connect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506495/a3c27d13-cce9-8d12-83cc-9e7ab2997ada.png)

手元にあったMPU6500を使って汎用的なI2Cセンサーを接続できるような
Pythonプログラムを作ってみました。
下記にテスで使ったBMG160( TDK : IMU - 慣性測定ユニット 6-Axis MEMS MotionTracking Device)を使ったレジスタ設定テキストサンプル

```
# Register Configration sample
SLAVE,0x68
REG,0x00,1,0x00,R,CHIP_ID
REG,0x02,1,0x00,R,RATE_X_LSB
REG,0x03,1,0x00,R,RATE_X_MSB
REG,0x04,1,0x00,R,RATE_Y_LSB
REG,0x05,1,0x00,R,RATE_Y_MSB
REG,0x06,1,0x00,R,RATE_Z_LSB
REG,0x07,1,0x00,R,RATE_Z_MSB
REG,0x08,1,0x00,R,TEMP
REG,0x09,1,0x00,R,INT_STATUS_0
REG,0x0a,1,0x00,R,INT_STATUS_1
REG,0x0b,1,0x00,R,INT_STATUS_2
REG,0x0c,1,0x00,R,INT_STATUS_3
REG,0x0e,1,0x00,R,FIFO_STATUS
REG,0x0f,1,0x00,RW,RANGE
REG,0x10,1,0x00,RW,BW
REG,0x11,1,0x00,RW,LPM1
REG,0x12,1,0x00,RW,LPM2
REG,0x13,1,0x00,RW,RATE_HBW
REG,0x14,1,0x00,W,BGW_SOFTRESET
REG,0x15,1,0x00,RW,INT_EN_0
REG,0x16,1,0x00,RW,INT_EN_1
REG,0x17,1,0x00,RW,INT_MAP_0
REG,0x18,1,0x00,RW,INT_MAP_1
REG,0x19,1,0x00,RW,INT_MAP_2
REG,0x1a,1,0x0000,RW,Interrput Select
```

上記レジスタ設定を交換すれば別センサーを簡単にI2C Read / Writeできるようにしてみました。
Python(winpython)を使ってGUI化した結果下記のような実行結果を得ました。
![BMG160.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506495/cf1b9582-1b98-1005-6d72-09c390d1de90.png)

問題点として、動作が非常に重い事(通信速度9600bps固定)と、I2Cの制御が不安定な事が気になります。
I2CReadを行う場合、下記のような手続きが必要となります。

~~~
        board.i2c_read(slave_addr, addr, 1, board.I2C_READ)
        time.sleep(0.3)
        data = board.i2c_get_read_data(slave_addr)
~~~

pyMataの場合、このI2C Readタイミングをユーザ側で決めなければならないらしく非常に遅い。
300ms間隔開けても普通に失敗することもあるので、安全を見ると500msはほしいところ。
レジスタを読むだけならこれでいいのかもしれませんが、センサーをウォッチするには向いていない性能。
pyMataは既に更新止まっているので、別のpythonモジュールも探してみます。
【Java】equals()とは一体なんぞや

##はじめに
JavaSilverの学習中にて

「ふむふむ、**equals()**は2つのインスタンス間の**同一性**を判定するものなんだな」

「あれ？でもこっちには**同値性**を調べるって書いてる…」

「String型のequals()は親クラスのObject型のequals()を引き継いでるからデフォルトのままやろな……違うの！？なんで！？」

とまあ、概念の理解がなかなかに困難だったので備忘録としてまとめておきます。



##同一性と同値性
前提知識として…

###・同一性
複数の変数が同じインスタンスを参照しているどうか

下記の例だと、オブジェクト型の変数aにインスタンスaへの参照先を代入して、
オブジェクト型の変数bに変数aの中身（インスタンスaへの参照先）を代入しており、
変数は違えど参照先は同じインスタンスであるため、同一性であると言える。

```java
Object a = new Object();
Object b = a;
System.out.println(a == b); //result:true
```

###・同値性
異なるインスタンスでも、その中身が等しいかどうか

下記の例だと、String型のa,bは異なるインスタンスだが、
中身の値は同じであるため、同値性であるといえる。

```java
String a = "Hello";
String b = "Hello";
System.out.println(a == b); //result:true
```

##equals()
Objectクラスで定義されているメソッドで、デフォルトでは**同一性**を調べるものとなっている。

```java
public boolean equals(Object obj){
    return (this == obj)
}
```

ただ、ここで注意すべきなのが、equals()は本来**同値性**を調べるもので、
**オーバーライドを用いてクラスごとに再定義するのが普通**である。

##JavaSilverつまずき問題
混乱したのが下記の問題（JavaSE8 Silverの黒本より）

```java
//第3章 問12 実行結果はどうなるか
public class Main{
    public static void main(String[] args){
        String a = "sample";
        String b = "sample";
        System.out.print(a == b);
        System.out.print(",");
        System.out.print(a.equals(b));//result：true,true
        }
}
```

`System.out.print(a.equals(b));`のコードが「はじめに」で述べてた箇所で、

「String型のequals()は親クラスのObject型のequals()を引き継いでるからデフォルトのままやろな……違うの！？なんで！？」

に繋がります。

そのときの自分の誤った考えとしては
「えっと、equals()を呼び出して、インスタンスa, bの同値性を調べるんだよな。
あ、でもString型のequals()はObject型のequals()を引き継いでるから同一性判定なのか。
じゃあa,bは異なるインスタンスだからこれはfalseだな」

と考えた結果、答えはtrueだったので「えぇっ！？」となりました（語彙力）

（まあそもそも真ん中の行で「==」で同一性判定を行ってて、
そこがtrueだって分かったなら今回のequals()もtrueだってなりそうなもんですけどね…）

###１．String型でもequals()はオーバーライドされている
>「String型のequals()はObject型のequals()を引き継いでるから同一性判定なのか」

と述べていますが、半分不正解です。

Object型のequals()は同一性判定の定義となっていますが、
String型でequals()はオーバーライドされており、
2つのインスタンスが**同値性**の関係かを調べるものとなっています。
（コードは省略）

##おわりに
1,2時間ぐらいかけて勉強しましたが、正直まだまだ理解できていない部分も多いです。
また更新します。
templateタグの使用


```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<template>
<p v-if="ok">OK</p>
<p v-else>NG</p>
</template>
</div>
```

![20210507-090637.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/8697b1cf-698f-4246-6b92-b76d04338189.png)

**templateタグは表示されない性質を持っている。**

そこで連続した値を消すということが必要になった場合

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p v-if="ok">OK</p>
<p v-if="ok">おはよう</p>
<p v-if="ok">こんにちは</p>
<button @click="ok = !ok">ボタン</button>
</div>
```
```vuejs
new Vue({
  el: '#app',
   data: {
   ok: true
 }
})
```

![20210507-091830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/2d7053de-61b3-7b9c-501b-3d170f79d390.png)

ボタンを押すと

![20210507-091852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/e05da818-0796-15bd-c61e-32b06c7fe684.png)

templateタグを使っても同じ挙動が起こせる。(グループで条件分岐させるときに便利）

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<template v-if="ok">
<p>OK</p>
<p>おはよう</p>
<p>こんにちは</p>
</template>
<button @click="ok = !ok">ボタン</button>
</div>
```

```vuejs
new Vue({
  el: '#app',
   data: {
   ok: true
 }
})
```
ページトップリンク＋スムーススクロール

#概要
下記４つの方法で実現します

- jQuery
- CSS
- JavaScript
- JavaScript+Vue.js

#jQueryでの実現方法

##参考書籍
[動くWebデザイン アイディア帳](https://www.amazon.co.jp/%E5%8B%95%E3%81%8FWeb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3-%E4%B9%85%E4%BF%9D%E7%94%B0%E6%B6%BC%E5%AD%90/dp/4802612281/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=FRFT633CFCCB&dchild=1&keywords=%E5%8B%95%E3%81%8Fweb%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%A2%E3%82%A4%E3%83%87%E3%82%A3%E3%82%A2%E5%B8%B3&qid=1620344874&sprefix=%E5%8B%95%E3%81%8F%2Caps%2C328&sr=8-1)

##実現方法
- ページトップリンク　aタグでトップ(#)にリンクする

```html
       -----省略-----
        <p id="page-top"><a href="#">Page Top</a></p>	
```

- ページトップリンクをクリックするとjQuery animate scrollTop:0 へ移動させる

```js
$('#page-top').click(function () {
     $('body,html').animate({
        scrollTop: 0
    }, 500);
    return false;
});
```
##結果
思った通りに動作しました

return falseの意味は下記で確認しました
[【JavaScript】return falseの意味について総まとめ。コード付で解説](https://freelance-jak.com/technology/javascript/1140/)

#CSSでの実現方法
##参考
[CSSのみ！簡単にスムーズスクロールを導入する](https://www.fuji-blo.com/entry/smooth-scroll)
htmlはjQueryの場合と同じです

```css
html {
    scroll-behavior: smooth;
}
```

##結果
思った通りに動作しました

##注意点
Safari、Opera、IEには対応していません


#JavaScriptでの実現方法
##参考
[【脱jQuery】Javascriptのみでスムーススクロールを実装【コピペ】](https://flex-box.net/js-smoothscroll/)

- htmlの内容はjQueryに加えてid要素を付与

```html
       -----省略-----
        <p id="page-top"><a id = "page_top_link" href="#">Page Top</a></p>	
```

- JSでaタグのクリックでスムースクロールする
※思っていたより簡単

```js
    const smoothScrollTrigger = document.getElementById("page_top_link");
    smoothScrollTrigger.addEventListener('click', function(e) {
        e.preventDefault();
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    });
```

#JavaScript+Vue.jsでの実現方法

- htmlはクリックイベント追加

```html
    <footer id="footer">
        <p id="page-top"><a v-on:click = "page_top_click" href="#">Page Top</a></p>	
        -----省略-----	
    </footer>	
```


```js
    var footer = new Vue({
        el:"#footer",
        methods:{
            page_top_click:function(e){
                e.preventDefault();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth',
                });
            }
        }
    })
検索ボックスの中にアイコンを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/68084e38-24ed-dbca-4131-667273b9b9ac.png)
某サイトのこれを真似してみたくなったので、備忘録として書きます。

```html
  <header>
    <div class="header-inner">
      <h1>TESTタイトル</h1>
      <form>
        <input type="text" placeholder="アニメタイトルや声優で検索♪">
        <button>あ</button>
      </form>
    </div>
  </header>
```
- `あ` はアイコンとします

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/7b61f241-1539-85ce-afe2-7a2df1b94312.png" width=30%>
まだ程遠いですね。

## 1. form周りを整える
```css
.header-inner form input {
  width: 300px;
  height: 100%;
  display: block;
  padding: 0px 20px;
  border-radius: 20px;
  border: 1px solid black;
  font-size: 20px;
  line-height: 1;
}
```
- inputタグはインライン要素なので、扱いやすいようにblock要素にします。
- border-radiusでフォームを丸くします。
- 文字の打ちはじめの位置が左端スタートになってしまうので、input内の両端にゆとりを持たせるため padding を指定します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/75309766-17c7-c0f2-bb03-396bfbdd72cc.png" width=30%>

## 2. placeholderに対してCSSを当てる
```css
.header-inner form input::placeholder {
  font-size: 14px;
  position: relative;
  bottom: 2px;
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/87135759-4527-1d6d-00aa-1af9d9873ba9.png" width=30%>

## 3. ボタンを 検索窓の中に持ってくる
```css
.header-inner form {
  display: block;
  position: relative;
  height: 40px;
}
.header-inner form button {
  position: absolute;
  right: 7px;
  top: 50%;
  font-size: 25px;
  transform: translateY(-50%);
}  
```

ここで、 `position:relative`, `position:absolute` が出てきます。

`position:relative` の起点は、**現在いる位置**からになります。
`position:absolute`は、何も指定していなければページ全体になります。しかし、親要素に`position:relative`を加えることで、**親要素を起点**にすることができます。

なので今回のケースだと、
- formに対して `position:relative` を指定する
- buttonに対して `position:absolute` を指定して、 formを親要素として、位置を決める
ことによって、ボタンの位置をform内で自由に動かすことができます。

`top: 50%;` `transform: translateY(-50%);` を指定することによって、親要素の高さが可変になっても button の位置が真ん中をキープするようになります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/14a3d28d-ea92-187a-6c22-039c31064738.png" width=30%>

だいぶ近くなりました。
can I expand the field name on the report type field layout page, hovering isn't cutting it

カスタムレポートタイプでフィールドの選択がうまくいかないんですよね。おっとこれはLightning環境での話。

仕方ないのでClassicに戻して行えばできる。

Lightningあるあるのひとつかな。

https://trailblazers.salesforce.com/answers?id=9064S000000DmS1
Python3年目のエンジニアがGo言語に入門してみたら詰まったところ。

私は普段PythonとTypeScriptばかり書いています。
GWで時間があったのでかねてからやってみたいと思っていたGo言語を触ってみたので
詰まったところをまとめておきます。
PythonとGoだと一番大きな違いは型付けだと思いますが、
普段からPythonでも型定義をしながら書いているのでそこは問題に感じませんでした。

私が理解に時間がかかったのは以下の項目です。
- Json
- インターフェース
- パッケージの扱い


# パッケージの扱い
Goのパッケージはファイル単位ではありません。

```go
package パッケージ名
```

のようにファイルの先頭で指定したパッケージ名ごとに分かれます。
同じパッケージ内であれば特に明示しなくてもファイル間で参照し合えます。

また、ファイルの外部から参照する際には全ての命名を大文字で始めなければなりません。
構造体のプロパティも例外ではないので全て大文字で始まります。

```go
type SomeStruct struct {
    propertyName string // <-こうじゃなくて   
    PropertyName string // <-こう
}
```


# Json
構造体をJsonに変換するときに、タグを付けなければならないという所でも若干詰まりました。


```go
type SomeStruct struct {
    PropertyName string `json:"propertyName` <-最後のこれ
}
```

こうするとJson化するときにキー名を小文字で始めることができます。
上の構造体のプロパティ名が大文字で始まってしまう仕様と関係していそうです。

また、このタグはJson以外のパースにも使われますし、
バリデーションを行うためにRequiredのフラグを立てたり、最大、最小値を指定することにも使われます。

# インターフェース
Go言語のインターフェースは他言語のインターフェースと使い方が異なります。
JavaやTypeScriptであればクラスを定義する際にimplement句などで
インターフェースを実装している事を明示しますが、
Go言語のインターフェースは使い方が異なります。

インターフェースで定義されているメソッドを持つ型であれば、
特に明示しなくてもそのインターフェースを実装していることになります。

```go
type Reader interface {
    Read() string
}

type Human struct {}

// ここでHumanにEaterを実装していることになる。
func (h Human*) Read() {
    return "..."
}


```

ではどういう時に便利なのかというと、構造体を初期化する関数の返り値をその構造体自身ではなく
インターフェースを指定することでより高度にカプセル化できます。
また、テスト用にモックを作る時にも役立ちます。

Goのインターフェースの使い方は特殊な感じがしますが、
下記のエムスリーさんのテックブログが大変分かりやすかったので参考にさせていただきました。
https://www.m3tech.blog/entry/go

# 未解決問題
なんでEnum型ないんだろう。。。

# 最後に
Goを勉強する上で、実際に手を動かす前には
クラスの継承がなかったり型を常に定義したりといった所に目がいっていました。
しかし、実際にコードを書いてみるとそれらはそこまで大したハードルにはならず、
意外なところにつまづきポイントがありました。
新しい言語を学習するとプログラミングに関する理解も深まって良いですね。
Laravel sanctumのログイン時の「scopes」について

##ログインのScopesとは
管理者権限を持つユーザーにしかアクセスできないrouteを作りたいときは、Laravelの場合は``Gate``なんかを利用するのが一般的かと思いますが、Sanctumの場合は以下のような流れで、同じようなことをより簡単に行うことができる……らしいです。

- 発行するトークンにスコープを付与する
- トークンのスコープをチェックし、「admin」以外はエラーを投げるミドルウェアを作成する
- カーネルのルートミドルウェアに、上記のミドルウェアを登録する
- 特定のルートにアクセスする際は上記のミドルウェアを通るようにする

以下に細かい流れを見ていきましょう。
なおPassportでも出来るかはわからんので、本稿では触れません。

##発行するトークンへのスコープの付与

```php:AuthController
public function loginAsAdmin(Request $req){
        if(!Auth::attempt($req->only('email','password'))){
            return response([
                'error'=>'invalid credentials'
            ],Response::HTTP_UNAUTHORIZED);
        };
        $user = Auth::user();
        $jwt = $user->createToken('token',['admin'])->plainTextToken;
//createTokenの二つ目の引数が付与するscopesの一覧
        $cookie = cookie("jwt",$jwt,60 * 24);
        return response([
            "message"=>"success"
        ])->withCookie($cookie);
    }
    public function user(Request $req){
        return $req->user();
    }
```

ご覧の通り、ここの作業は非常に単純かつ直感的です。
Sanctumを入れていれば、``Auth::user()``で取り出したユーザーの``createToken``メソッドでトークンを作成できますが、なんとその際に第二引数にscopesを指定するだけ！ **こんな簡単にできちゃっていいのかよ！**

##飛んでくるクッキーをヘッダに入れてSanctumに食わせる
ところでscopesとは直接関係ありませんが、上記の``login``メソッドでは、jwtはクッキーと言う形でクライアントに送られています。
当然次のクライアントからのリクエストでも、jwtはクッキーと言う形で飛んできます。Sanctumの認証はヘッダの``Authorization: Bearer``を検めて「よし、通れ！」「曲者じゃ、出会え！」とやるので、**クッキーからjwtを拾ってヘッダの``Authorization: Bearer``に入れなおす作業**を、認証時に行わなければいけません。
上記の作業は``App/Middleware/Authenticate.php``にて行います。

```php:Authenticate.php
public function handle($req, Closure $next, ...$guards)
    {
        if($jwt = $req->cookie("jwt")){
//クッキーからjwtを取り出している
            $req->headers->set(
                "Authorization",
                "Bearer ".$jwt
            );
//ヘッダに入れている
        }
        $this->authenticate($req, $guards);
//ここで認証している
        return $next($req);
    }
```

##ScopeAdminMiddleware

それでは``php artisan make:middleware``で、トークンのスコープをチェックするミドルウェアを作成します。
そして上記のAuthenticate.phpと同じく、``handle``メソッド内に処理を書き込みます。

```php:ScopeAdminMiddleware.php
public function handle(Request $req, Closure $next)
    {
        if(!$req->user()->tokenCan('admin')){
            abort(401,'unauthorized');
        };
        return $next($req);
    }
```
これも信じがたいほど簡単です。$req->user()で取り出したユーザーのtokenCanメソッドに確かめたいスコープを入れるだけ。**こんな簡単にできちゃっていいのかよ！**

##karnel.phpへの登録
正直詳しいことはよく分からんし、さっき調べたらこれに関しても色んな記事があったから後で読んどこう……。
とりま、先ほど作成したミドルウェアのクラスを、``scope.admin``と言う名前で``$routeMiddleware``に追加。これで``Route::middleware``でミドルウェアとして使えるようになります。

```php
protected $routeMiddleware = [

//　～　中略　～
        'scope.admin'=>\App\Http\Middleware\ScopeAdminMiddleware::class,
    ];
```
##ルートへのミドルウェアの追加

```php:api.php
Route::middleware(['auth:sanctum','scope.admin'])->group(function(){
        Route::get('user',[AuthController::class,'user']);
        Route::delete('logout',[AuthController::class,'logout']);
    });
```

最後に、上記のようにしてRoute::middlewareの引数に``scope.admin``を追加すれば、ログイン時に``admin``スコープを割り当てられたユーザー以外は**401Unauthorized**で弾かれます。

##所感
たしかにGateより楽ですけど、コントローラのレイヤでメソッドごとにアクセスを限定できるGateと違って、今のところ使いどころがよくわかんない感じです……。
また使いどころが分かったら追記します。
【備忘録】カスタムデータ属性（data-*）について

初めに
cssやjavascriptでカスタムデータ属性が使われている。カスタムデータ属性とは何か、そして使い方について備忘録として残します。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

#カスタムデータ属性とは
htmlのタグに固有の値を付与してcssやjavascriptでその値を取得して利用できるようにしたもの。

#書き方
htmlでカスタムデータ属性を付与したいタグにdata-*という形式で指定。divタグだと以下のようになる。

```html
<div data-属性名=値></div>
```
属性名と値は任意のものであり、自由に指定できる。

例として以下のようにdata-hogeというカスタムデータ属性を指定したとします。

```html
 <section class="custom_data_section">
    <div class="test" data-hoge="text">Hello World</div>
  </section>
```

#cssで利用する場合
まずhtmlのdivタグにdata-hogeというカスタムデータ属性を付与します。

①セレクターとして使う
[data-属性名]という書き方でセレクターとして使います。

```css
[data-hoge] {
  color: red;
}

/* .testを付けても結果は同じ */
.test[data-hoge] {
  color: red;
}
```
![スクリーンショット 2021-05-07 7.31.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/a94f2656-aa08-ce75-541b-f25adc9369b6.png)

②擬似要素として使う
擬似要素afterやbeforeの中身としてcontentプロパティにattr()関数を使ってカスタムデータ属性の値を渡します。
> attr()関数について：https://developer.mozilla.org/ja/docs/Web/CSS/attr()

```css
.test::before {
  content: attr(data-hoge);
  font-size: 50px;
  color: purple;
}
```
data-hogeの値"text"が画面に表示されました。
![スクリーンショット 2021-05-07 7.46.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/0173944a-97e1-72f1-93d9-060b2f827273.png)

#javascriptで利用する場合

①カスタムデータ属性の設定
querySelectorで.testを取得し、「test.dataset.属性名 = 値」で新しいカスタムデータ属性を設定できます。

```javascript
const test = document.querySelector(".test");
test.dataset.huga = 20;
```
コンソールで確認すると「data-huga」というカスタムダータ属性ができました。また、値として"20"と表示されます。
![スクリーンショット 2021-05-07 7.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/817b77f1-8aaf-b1fe-f220-6e12d6519324.png)

②カスタムデータ属性の値を取得
「test.dataset.属性名」で簡単に取得できます。

```javascript
const test = document.querySelector(".test");
const hoge = test.dataset.hoge;
console.log(hoge);
```
![スクリーンショット 2021-05-07 8.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/eb0053a2-95c9-f05f-87f9-fc86e085c878.png)

③カスタムデータ属性の値を変更
「test.dataset.属性名 = 変更する値」で値の変更ができます。

```javascript
const test = document.querySelector(".test");
test.dataset.hoge = "hello";
console.log(test);
```
コンソールで確認するとtextからhelloに変わっていることがわかります。
![スクリーンショット 2021-05-07 8.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/966135/252efc85-dfbd-f321-331e-7fc163937249.png)

#参考サイト
https://www.webprofessional.jp/how-why-use-html5-custom-data-attributes/
https://qiita.com/k152744/items/c96fcf0141798bf48dd7
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*
https://techacademy.jp/magazine/24740
https://whiskers.nukos.kitchen/2016/11/19/data-attr-style.html
https://twotone.me/web/2658/
https://apex-traders.net/html-custom-data/
https://developer.mozilla.org/ja/docs/Web/CSS/attr()
rustの条件分岐書いたら、"expected `()`, found XXXX"って怒られた。

# 問題のソースコード

このコードを書いたところ、コンパイルエラーで躓くようになった。うーん、これはどういう事ですかね？

```rust,no_run

fn fn_x () -> i32 {
    42
}

fn fn_x2 (x : i32) -> i32 {
    x
}

fn fn_x3 (x : i32) -> i32 {
     if x == 0 {
        42
     }
     x
}

fn main() {
    println!("fn_x()    = {}", fn_x() );
    println!("fn_x2()   = {}", fn_x2(42) );
    println!("fn_x3(0)  = {}", fn_x3(0) );
    println!("fn_x3(42) = {}", fn_x3(42) );
}

```

## エラーメッセージを見ると...

```rust,ignore
> Executing task: cargo run <

   Compiling iftest v0.1.0 (/home/kmtr/work/rust/iftest)
error[E0308]: mismatched types
  --> src/main.rs:12:9
   |
11 | /     if x == 0 {
12 | |         42
   | |         ^^ expected `()`, found integer
13 | |     }
   | |     -- help: consider using a semicolon here
   | |_____|
   |       expected this to be `()`

error: aborting due to previous error

For more information about this error, try `rustc --explain E0308`.
error: could not compile `iftest`
```

- `42` のところで、`()`を期待してたのにintegerになっている！とお怒り。
- このif文の最後、セミコロン抜けてない？と。
- 最後に「ここで"()"が期待されているよ

うん、わからん？

Rustのエラーコード表を見ても、うんわからん！

https://doc.rust-lang.org/error-index.html#E0308


## 言われたままセミコロンをつけてみる

セミコロンが抜けているかも？と言われたから、言われた通りにセミコロンをつけてみる。

```rust,ignore

> Executing task: cargo run <

   Compiling iftest v0.1.0 (/home/kmtr/work/rust/iftest)
error[E0317]: `if` may be missing an `else` clause
  --> src/main.rs:11:5
   |
11 | /     if x == 0 {
12 | |         42
   | |         -- found here
13 | |     };
   | |_____^ expected `()`, found integer
   |
   = note: `if` expressions without `else` evaluate to `()`
   = help: consider adding an `else` block that evaluates to the expected type

error: aborting due to previous error

For more information about this error, try `rustc --explain E0317`.
error: could not compile `iftest`

To learn more, run the command again with --verbose.
```

エラーコードが変わって、原因まで出てますね…

- note: `if` expressionにelseが無い場合には`()`として評価します
- help: 想定している型として評価するために、`else` blockの追加を検討ください


https://doc.rust-lang.org/error-index.html#E0317

# つまり"rustにはif文はない"。

極端なことを言えば、"if文"はrustにはない！！
厳密には「if式を、文に組み込んで記載できる」、かしら？

https://doc.rust-jp.rs/rust-by-example-ja/expression.html

```plaintext
文(statement)
├ 変数束縛(variable binding) : 例)let x = 5;
└ 式(expression)+";"  例) 42;
```

そして、コードブロックも式であり、その最後の式が示す値ということになると…。結局、こう書き直さないといけない。

```rust
fn fn_x3 (x : i32) -> i32 {
     if x == 0 {
        42
     }else{
        x
     }
}
```

C/C++に慣れていると「えー」という感じだけど、確かにこっちの方が記載ミスは少なそう。そうだよなー、と納得しつつ。

以上になります。
Promise・async/await

##非同期処理のデメリット
非同期通信は実行完了を待たず次の処理を行ってしまう為、制御が難しいというデメリットがあります。
例えばapiを叩きレスポンスに対して特定の処理をしたいとします。
ネットワーク通信はとても重たい処理なので、実行結果を待たず次の処理に進んでしまいエラーになってしまいます。
Promiseやasync/awaitを使えば実行完了を制御する事ができます。

##Promise
まだ確定してない値の状態を表すオブジェクトのことで、非同期処理の操作が完了したときに結果を返すものです。
このPromiseオブジェクトでは、**値が確定した時に行って欲しい処理を登録する事ができます。**

```javascript
    const promiseFunc = () => {
      return new Promise((resolve, reject) => {
        someAsynchronousFunc(() => {
          // 何かしらの非同期処理
        }).then(() => {
          // 非同期処理が成功した場合
          return resolve('成功!')
        }).catch(() => {
          // 非同期処理が失敗した場合
          return reject('失敗!')
        })
      })
    }
````

resolveとrejectを引数で渡します。
この**resolveかrejectが実行されるまで次の処理に進まなくなります。**
その為順番に制御され同期処理と同じような動きになります。

####コールバック地獄
可読性という意味でもメリットがあります。
連続で非同期処理を行いたい場合、コールバック関数を使うとネストが深くなる為可読性が落ちます。

```javascript
setTimeout(() => {
  console.log(3);
  setTimeout(() => {
    console.log(2);
    setTimeout(() => {
      console.log(1);
    }, 1000); 
  }, 1000);
}, 1000);
```
####Promise化
```javascript
const sleep = ms => new Promise(resolve => setTimeout(resolve,ms));
sleep(1000)
.then(() => console.log(3))
.then(() => sleep(1000))
.then(() => console.log(2))
.then(() => sleep(1000))
.then(() => console.log(1))
```
thenでつなぐ事で可読性が上がります。これをthenチェーンと言います。
連続してthenで繋げられるのは**thenメソッドの返り値がPromiseオブジェクトの為です。**

##async/await
promiseをよりシンプル且つ直感的に書けるようにしたものです。

```javascript
const asyncAwaitFunc = async () => {
  const hoge = await someAsynchronousFunc(() => {
    // 何かしらの非同期処理
  }).then(() => {
    // 非同期処理が成功した場合
    return '成功！'
  }).catch(() => {
    // 非同期処理が失敗した場合
    return '失敗!'
  })
}
```
asyncは関数前に、awaitは関数実行時につけます。
awaitを使うには必ずasync付きの関数内で行う必要があります。
v-bindとv-onの省略記法（「:」と「@」に注意）

エンジニア見習いとして働き始め（2021年3月1日〜）て2ヶ月が経ちました。

##v-bindとv-onの省略記法（「:」と「@」に注意）
```vue:v-bind
<!-- 省略無し -->
<input v-bind:value="message">

<!-- 省略した記法 -->
<input :value="message">
```

v-bindディレクティブは、リアクティブにHTML属性を更新します。

※ディレクティブ・・・v-から始まる特別な属性のこと。
※リアクティブ・・・データ変更がリアルタイムでビュー側に反映されること。
※バインディング・・・結び付け、関連付けみたいな意味。

"message"は文字列ではなくJavaScript。

```vue:v-on
<!-- 省略無し -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略した記法 -->
<a @click="doSomething"> ... </a>
```
v-on:イベント名="ハンドラ名"



##参考
[Vue.js テンプレート構文](https://jp.vuejs.org/v2/guide/syntax.html)
メール送信アクションで使っているメールに本文が表示されない

結果を聞いてみたら、盲点でした。

本文どころか、タイトルもないなぁ。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/0b44e5e1-eab8-2ee1-82ca-bd033692b90c.png)


今後はこれを確認したい。

Figured it out! Apparently someone removed all the fields from the Send Email global action layout. Not sure why since I haven't been in this org long SMH.

誰かがSendEmailグローバルアクションレイアウトからすべてのフィールドを削除したようです。

おいおい、というオチでしたねぇ。

https://trailblazers.salesforce.com/answers?id=9064S000000kEtc
【貴金属比】デザインに使える美しい比率

#貴金属比

**貴金属比**とは以下の式であらわされる比率のことです。
<br>

```math
1:\frac{n+\sqrt{n^2+4}}{2}
```
<br>

貴金属比を使うことにより、対象に美しさや安定感などを持たせることができます。
こういった比率は主にデザインや建築、アートなどによく使われています。
<br>

###第n貴金属比
貴金属比はいくつか種類があり、第n貴金属比の"n"を代入することで比率が

第1貴金属比　**1 : 1.6180339887...**
第2貴金属比　**1 : 2.4142135623...**
第3貴金属比　**1 : 3.3027756377...**
ect...

となります。
<br>

#黄金比（第1貴金属比）
![黄金比_thumb3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1208356/70ab68b4-bf3f-d714-7d56-24065ca9b787.png)


```math
1:1.618...
```
ヒマワリの種の配列、オウムガイのらせん状の形など黄金比は自然界に多く存在しています。

古代建築やアートの分野ではミロのヴィーナス、モナ・リザ、アップルのロゴ、パルテノン神殿、日常的なものだとデジタルカメラなどに黄金比が使われています。

黄金比を意識してデザインすることで、美しくなるのでぜひ意識して使ってみてください。
<br>

#画像素材
黄金比がひと目でわかるデザインなどに使える画像を作りました。

こちらからダウンロードできます。
↓
https://ryohakosako.fanbox.cc/posts/2213358
<br>
Google ColaboratoryからGitHubにpushしたらcould not read Username for 'https://github.com': No such file or directoryでpushできない件について

# はじめに
Google Colablatoryの有料版を契約したので、とりあえず記事の内容を検証するのに頻繁に使っており、Git管理したいとリポジトリを作りpushしたのですが、エラーがでたのでColabのpushの流れも含めて紹介します。

# 問題

`test_colab`というパブリックなリポジトリをGitHubで作成して、以下のコマンドを実行しました。

```
!git remote add origin  https://github.com/jinwatanabe/test_colab.git
!git push origin -u main
```
すると、以下のようなエラーが発生しました。

```
fatal: could not read Username for 'https://github.com': No such file or directory
```

# 解決方法

`!git remote add origin`に続く、リポジトリのHTTPSを、
`https://{username}:{password}@github.com/{username}/project.git`のように変更します。
usernameとpasswordはGitHubの自分のアカウントの情報になります。

ユーザー名:jinwatanabe
パスワード: password
の場合は以下のコマンドになります。


```
# git remote add origin https://{username}:{password}@github.com/{username}/project.git
!git clone https://jinwatanabe:password@github.com/jinwatanabe/test_colab.git
!git push -u origin main
```
これでうまくいきました。

# Colabでgit pushまでのコマンド

pushまでのコマンドをまとめておきます。

```
!git init
!git config --global user.email "your email"
!git config --global user.name "your user name"
!git add .
!git commit -m "your commit message"
!git branch -M main
!git remote add origin https://{username}:{password}@github.com/{username}/project.git

# ここでfatal: remote origin already exists. とでたら以下のコマンド
# !git remote rm origin
# !git remote add origin https://{username}:{password}@github.com/{username}/project.git

!git push -u origin main
```

# さいごに
`git remote rm origin`は毎回調べてる気がしたので、そろそろ覚えたいところです。
Colab便利ですが、環境構築の手間を忘れてしまうので、実際のローカル環境で同じコードを動かそうとしたときにライブラリが入っていなかったりでエラーをたくさんはいてしまいます。便利ですが悩みどころです。
Storyboard脱却への第一歩

今回はStoryboardを使わない開発について書いていきます。
SwiftUIを勉強したということもあり、全てコードでの開発をしてみたいと思いました。

# なぜStoryboardを使わない開発をするのか
一番大きな理由は、チーム開発時のコードレビューがやりにくいと感じたからです。
GitHub上では、StoryboardはXML形式で表示されます。XMLを眺めているだけだとViewがどんな見た目をしているのか把握することが難しいです。他には、コンフリクト修正をやりやすくするという点があります。Storyboardの場合だと、コンフリクトしている両ブランチをcloneしてどちらの見た目を優先するのか考える必要がありますが、SwiftファイルでViewを書くとその手間が省けるという利点があります。
後は個人的な理由ですが、私が使っているmacだとスペックがあまり高くないので、Storyboardを開くまでに時間がかかってしまい、ストレスに感じていることも理由の一つです。

# でも初心者はStoryboardを使った方がいいかも
StoryboardはUIを直感的に配置でき、オートレイアウトもStoryboard上で完結させることができます。オートレイアウトは慣れが必要なのですが(私自身も試行錯誤しながらオートレイアウトつけます...)、Viewを配置することに関してはStoryboardは時間をかけずに簡単にできます。
入門書もStoryboardを使って紹介しているものが多いので、初心者はまずStoryboardを使ってiOSアプリ開発を体験した方が挫折せず取り組めるかと思います。

# Main.storyboardを削除する
さて、ここから本題です。
実際に、Storyboardを使わない開発の第一歩を踏み出します。
![スクリーンショット 2021-05-07 1.35.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425368/fb4e9a26-e28f-ba44-3710-4b5a6f0e07b0.png)
プロジェクト立ち上げ時にデフォルトでMain.storyboardあるので、このファイルを削除します。
「え？　ホントに消すの？」と不安な人もいるかと思いますが、大丈夫です。思い切って消しましょう！！
この時点でビルドすると、「Mainっていう名前のstroyboardが見つけることができないよ」といった旨のエラーがでます。

#　Info.plistのStoryboard Nameを削除
![スクリーンショット 2021-05-07 1.42.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425368/089bb1b9-d6f3-dec5-c870-094672c4aa6e.png)
上の写真にもあるようにStoryboard Nameの項目を削除します。
この時点でビルドすると、成功しますが、真っ黒な画面になります。

# xcodeprojのMain Interfaceを空にする
![スクリーンショット 2021-05-07 1.48.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425368/d9187b84-48fc-d77f-2c98-65a9e117b820.png)
TARGETS > General > Development InfoにあるMain Interfaceの項目を空白に設定します。
この時点でもビルドすると、成功しますが、真っ黒な画面になります。


# SceneDelegate.swiftを編集
以下の通りにSceneDelegate.swiftを編集します。

```Swift:SceneDelegate.swift
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(frame: windowScene.coordinateSpace.bounds)
        window?.windowScene = windowScene
        window?.rootViewController = ViewController()
        window?.makeKeyAndVisible()
}
```
rootViewControllerに設定することで、今回はViewControllerが初期画面として表示されます。

# ViewController.swiftを編集
分かりやすいように背景を青色に設定してみます。

```Swift:ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .blue
    }
}
```

# ビルド
![Simulator Screen Shot - iPhone 12 Pro - 2021-05-07 at 02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/425368/b4f3e423-d204-9984-4b96-9b8b554be20d.png)
無事、表示できました！！
配列を用いて曜日を日本語表示する

<pre>
<?php
// 配列を使って曜日を日本語表示する
$week_name = ['日','月','火','水','木','金','土'];
// 同様の意味を持つ使う書き方
// $week_name = array{'日','月','火','水','木','金','土'};
//arrayは今時あまり使わないらしい

// このままでは、配列なので画面に表示できないエラーを除去するため、
// インデックスを用意する→添え字の意味
// →つまり配列内のどの値を呼び出すか→目次を指定するようなもの
// インデックスが下記'print'の[]内の値で表す
// 0から数える→0＝日,1＝月が表示される

print($week_name[6]);
// wのパラメータは曜日を数字で表すパラメータ

?php>
</pre>

説明が長すぎたので、すっきり書くと
<pre>
<?php
$week_name = ['日','月','火','水','木','金','土'];
print($week_name[6]);

?php>
</pre>

//$week_name=[..]の部分で、
//'$week_name'の代入するものを定義する（今回は、曜日）
//その後、printを使って、曜日を呼び出す
//[]内部の数値で曜日を呼ぶが、プログラム上は0から数えるので、例えば月なら、1を入れると呼び出せる。同様に、'土'を呼び出すのは、6を入力することで呼び出せる
【kintone】設定一切不要の超簡易カスタマイズ開発ツールつくりました

みなさんはどんな環境でkintoneカスタマイズ開発していますか？

https://developer.cybozu.io/hc/ja/articles/360030433312

ぼくは[Dropbox派](https://developer.cybozu.io/hc/ja/articles/201308690)でした．
ただ，Dropboxや[Live Server](https://developer.cybozu.io/hc/ja/articles/360026502091)を使った方法では，最初の1回はアプリ設定画面を開かなければいけないんですよね．

アプリ設定画面を開きたくないという人が候補に挙げるのが，[kintone-customize-uploader](https://www.npmjs.com/package/@kintone/customize-uploader)だと思います．
ところがしかし，ぼくの場合は軽微なカスタマイズが多いんですよね．
いちいちmanifest.jsonのような設定ファイルを作るのは億劫です．

そこで，簡易版kintone-customize-uploaderとして，simple-kintone-customize-uploaderを作りました！

https://www.npmjs.com/package/simple-kintone-customize-uploader

## よく使うコマンド例

Node.js v12以上をインストールしていれば下記コマンドだけで実行できます．

### ファイル変更を検知して自動アップロード

```bash
npx simple-kintone-customize-uploader sample.js,sample.css -w
```

「sample.js,sample.css」のように，アップロードするファイルのパスまたはURLをカンマ区切りで指定します．
拡張子がcssのときはcssファイルとして，それ以外のときはjsファイルとしてアップロードします．
デフォルトでは，desktopとmobileの両方にアップロードします．

オプションの-wがwatch機能になります．

### カスタマイズファイルをダウンロード

```bash
npx simple-kintone-customize-uploader download desktop/js/0
```

サブコマンドとしてdownloadと指定すると，カスタマイズのダウンロードができます．
「端末/コンテントタイプ/読み込み順序」のような形式で指定します．
端末はdesktopかmobile，コンテントタイプはjsかcss，読み込み順序は0始まりの整数値です．

### カスタマイズファイルを削除

```bash
npx simple-kintone-customize-uploader remove desktop/js/0
```

サブコマンドとしてremoveと指定すると，カスタマイズの削除ができます．
引数の指定方法はダウンロードと同様です．

### カスタマイズファイルの一覧を表示

```bash
npx simple-kintone-customize-uploader list
```

サブコマンドとしてlistと指定すると，カスタマイズの一覧を表示できます．

## kintoneの認証について

環境変数，オプション，コマンド実行後の対話の3つの内いずれかで入力することになります．
環境変数名などは，だいたいkintone-customize-uploaderに合わせています．
くわしくは[ドキュメント](https://www.npmjs.com/package/simple-kintone-customize-uploader)を御覧ください．

## 今後について

機能追加を考えています．
今思いつく限りだと，.htmlファイルを指定したらカスタマイズビューをアップロードするとかですかね．

ご意見ご要望や質問等ございましたら，コメントいただけるととても嬉しいです．
タグ関数についてまとめてみた

# タグ関数とは

HTMLのテンプレートを引数に渡す目的で実装された関数のことです。
以下のコードでは、tagFunction がタグ関数に該当します。

```js
const view = tagFunction`
	 <div>${hoge}と${fuga}</div>
`;

function tagFunction(strings, ...values) {
	console.log(strings);
	console.log(...values);
}
```
# タグ関数について調べた背景
[JSPrimer](https://jsprimer.net/use-case/ajaxapp/display/)でタグ関数を学習していた際、
上記のようなタグ関数の引数をコンソールに出力した際に、配列が出力された
### 第一引数(strings) の出力結果

```console
0: "↵ <div>
1: "と"
2: "</div>↵"
```

### 第二引数(...values) の出力結果

```console
hoge fuga
```

この時

　Q. **どういうルールで**、第一引数に入る配列が作成されるのか

　Q. タグ関数を呼び出す際、引数にはHTMLテンプレート**1つしか渡していない**のに、第二引数に値が入るのはなぜか

という疑問を持ったので、調べてみました。

# タグ関数の呼び出し方

タグ関数を呼び出す時は、通常の関数と違い

```js
関数`テンプレート`;
```

という書き方をします。

一般的な関数呼び出しは

```js
関数(引数); 
```
と書きます。

# 使い方

実際のコードだと以下のように使います。
escapeHTML がタグ関数に該当します。

```js
const view = escapeHTML`
	 <h4>${userInfo.name} (@${userInfo.login})</h4>
	 <img src="${userInfo.avatar_url}" alt="${userInfo.login}" height="100">
	 <dl>
	   <dt>Location</dt>
	   <dd>${userInfo.location}</dd>
	   <dt>Repositories</dt>
	   <dd>${userInfo.public_repos}</dd>
	 </dl>
`;

function escapeHTML(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i - 1];
    if (typeof value === "string") {
      return result + escapeSpecialChars(value) + str;
    } else {
      return result + String(value) + str;
    }
  });
}
```

**userInfoの定義**

githubのユーザ情報が格納されており、各プロパティの詳細は以下の通りです。

userInfo.name：ユーザ名
userInfo.login：ログイン名
userInfo.avatar_url：プロフィール画像
userInfo.location：住んでいる国名
userInfo.public_repos：パブリックリポジトリの数

それでは、背景で書いた疑問の解答を書いていきます。

# 疑問1つ目

Q. **どういうルール**で、HTMLのテンプレートが区切られて、配列へ格納されるのか
A. テンプレートリテラル内の`${value}`が区切りとなり、それぞれが一要素として配列へ格納されます

配列をコンソールに出力すると、以下が表示されました。

```console
(7) ["↵             <h4>", " (@", ")</h4>↵             <img src="", "" alt="", "" height="100">↵             <dl>↵               <dt>Location</dt>↵               <dd>", "</dd>↵               <dt>Repositories</dt>↵               <dd>", "</dd>↵             </dl>↵          ", raw: Array(7)]
0: "↵             <h4>"
1: " (@"
2: ")</h4>↵             <img src=""
3: "" alt=""
4: "" height="100">↵             <dl>↵               <dt>Location</dt>↵               <dd>"
5: "</dd>↵               <dt>Repositories</dt>↵               <dd>"
6: "</dd>↵             </dl>↵          "
```

# 疑問2つ目

Q. タグ関数を呼び出す際、引数にはHTMLテンプレート**1つしか渡していない**のに、第二引数に値が入るのはなぜか
A. valuesには、テンプレートリテラル内の`${value}`の実際の値が格納された配列が入るため

第二引数(...values) もコンソールに出力すると、以下が表示されました。

```console
null "bita-kodai" "プロフィール画像のURL" "bita-kodai" null 17
```

# 終わりに

最後までご覧頂きありがとうございます。

何か補足や疑問点、フィードバック等々ございましたら、コメント欄への記載をお願いします。
LookingGlassのBlenderプラグインを試した

LookingGlassのBlenderプラグインを試した

https://github.com/Looking-Glass/blenderLKG

から最新のlooking_glass_toolsをダウンロード
（zipでダウンロードして展開）

looking_glass_toolsフォルダをzipにして
blenderのアドオンからインストール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/e981afa5-213c-7de7-c105-0f0cf5f59a63.png)

こんな感じで認識されて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/45ddcacc-1d1c-d667-4758-2fac04d2419b.png)
ツールのところにLKGタブがあるので
そこから、Create Render Setupを押すと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/724deebc-4d94-90c5-f6fd-68546a24f541.png)

MultiViewのところでLookingGlassの表示範囲みたいな枠がでてくるので、これにモデルとかが入るように位置を調整して

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/d6650a4b-2eef-9bc7-4cd9-cffd6ed1e0fd.png)

Send Quiltを押すと　LKGの方に表示される。

https://twitter.com/tatmos/status/1390288172957851658?s=20

#Quilt画像をレンダリングする

もっと良い手順があるのかもだけど、自分が試したのは
画像をF12でレンダリング

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/ed0137f9-262b-5c2f-0434-dd690d32c767.png)

画像を保存すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/fc8c5e4a-5580-fbf6-39e7-c73d0e4ba314.png)
連番で画像ができる

これを
Processingで連番読み込んで配置してQuilt画像化

実行して　描画が終わったらEnterキーで保存される。

```.js
PImage[] img  = new PImage[45];
 
void setup() {
  size(1536,2048);
  for(int i = 0;i<45;i++)
  {
    println("output/untitled."+nf(i,2,0)+".png");
    img[i] = loadImage("output/untitled."+nf(i,2,0)+".png");
    img[i].resize(1536/5,2048/9);
  }
}
 
void draw() {
  for(int i = 0;i<45;i++)
  {
    image(img[i], (i%5)*(1536/5), (2048-2048/9)-(i/5)*(2048/9));
  }
}

void keyPressed(){
  if(keyCode == ENTER){
  save("quilt.png");
  }
}
```

こんなpngファイルができあがる
![quilt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/fcbc2948-82c0-1984-e9ad-6a14d2a795ec.png)

このpngファイルを
HoloPlayStudioでQuilt形式で Import

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/a9f603f6-5e64-9f49-8de9-45790589ded4.png)

これで、表示ができた。

#あとがき
最初は順番間違えていて、へこんでみえていたけど、なるほど左右の目に逆の絵が見えていたのかもしれない。
Quiltの絵の順番を左下からにしたら綺麗に表示ができた。

せっかくなのでもう少し凝ったポーズにしてレンダリング設定も少し変えてみた
![quilt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96808/036d050b-d58e-2289-dc6d-56b8e13e876c.png)

こちらの方が右手が飛び出して見える感じ。　背景は黒とかも良い感じ。
event.targetとevent.currentTargetの違い

# 背景

ネストしたHTML要素の**親要素**に対してイベントハンドラのコールバック関数内の処理を付与した状態で、その**子要素**をクリックした。
すると、親要素に対して付与したはずのイベントハンドラのコールバック関数内の処理が、子要素に対してのみ実行された。

　>>>[挙動の参考](https://codepen.io/bita-kodai/pen/abmwNbg)<<<

どうして親要素に付与したイベント処理が、子要素だけに実行されたか？
という疑問が生じたので、調べてみた。

# どうして親要素に付与したイベントハンドラのコールバック関数内で処理を行う対象が、子要素になったのか？

これには2つの理由があり、分解して説明すると、、、

Q. 親要素に付与したイベントハンドラのコールバック関数内の処理が実行される理由
　→　**キャプチャリングとバブリングの影響**により、子要素をクリックした場合でも、親要素に付与されたイベントハンドラのコールバック関数内の処理が実行された

※ 本記事では、キャプチャリングとバブリングについては**触れません**
　>>>[キャプチャリングとバブリングの参考サイト](https://ja.javascript.info/bubbling-and-capturing)<<<

Q. 子要素が、親要素に付与したイベントハンドラのコールバック関数内で処理を行う対象となった理由
　→　処理の実行先を**event.target**としていた場合、event.targetはイベントを**発生させた要素**指すため、子要素でイベントが発生すると、event.targetは子要素を指す。 

# 結局どう解決したのか

event.currentTargetを使うことで解決

# event.targetとevent.currentTargetの違い

event.target：イベントを**発生させた要素**を指す
event.currentTarget：イベントハンドラが**登録されている要素**を指す

## event.targetを使った場合の挙動例

HTMLタグの構造が
```html
<div class="parent">
  親要素
  <div>子要素</div>
</div>
```
となっているとする。

親要素に

```jsx
const parentElm = document.querySelector('.parent');
parentElm.addEventListener('click', event => {
  event.target.setAttribute('style', 'background-color: blue;');
})
```

をセットする。
この状態で**子要素**をクリックすると、**子要素のbackground-colorだけがblue**となる。
event.targetには**イベントを発生させた要素(= 子要素)**が入るため。

## event.currentTargetを使った場合の挙動例
親要素に
```jsx
const parentElm = document.querySelector('.parent');
parentElm.addEventListener('click', event => {
  event.currentTarget.setAtrribute('style', 'background-color: blue;');
})
```
をセットする。
この状態で**子要素**をクリックしても
**常に親要素のbackground-colorがblue**となる。
currentTargetには、イベントハンドラを**登録した要素(= 親要素)**が入る。

# 終わり
ありがとうございました！
NuxtJSがIEで動かない

## 事象

NuxtJSでnpm run devしてIEで閲覧すると、

```
SCRIPT1002: 構文エラーです。
```
だの

```
SCRIPT1004: ';'がありません。
```

だの言われる。


## 原因

IEが読み込んでいるソースがトランスパイルされてない。


## 解決方法

### 前提

下記は間違っているかもしれない。だいぶ自信ないが、メモとして残す。
あと、SPAモードであることが前提。

### modern

modernプロパティに'client'を指定する。
ほんとか？
でもこれが嘘だったらmodernプロパティを指定しない場合は必ずレガシーバンドル出してることになっちゃうし？
どうなの？知らない。

https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-modern/

### transpile

node_modules内のソースはデフォルトではトランスパイルの対象にならないらしい。
でも、ライブラリによってはES6+で記述されていて、それがそのままバンドルに出力されてしまい、IEで読めなくて怒られる。
それをどうにかするためにtranspileというプロパティが用意されていて、これにライブラリ名を指定するとそのライブラリをトランスパイルしてもらえる。

```js
  build: {
    transpile:[ 'camelcase', 'map-obj', 'quick-lru' ],
  },
```

https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-build/#transpile


### polyfill

IntersectionObserverとか、IEにないオブジェクトを使っていると怒られる。
polyfill.ioとか使って追加してやると良い。
やり方はよそに書いてあるから省略。

ちょっと待て、modernのドキュメントに

```
2. レガシーバンドル: babel config（デフォルトでは IE9 互換）をベースにした古いブラウザを対象にしています。
```

と書いてあるからそんなことしなくても動くんじゃないか？という気がするが、それは気のせいだ。
デフォルトで対応してくれるのはアローファンクションだのテンプレートリテラルだのスプレッド演算子だのの文法の部分であって、IntersectionObserverみたいな機能の部分は補ってやる必要があるらしい。
（この言い方が正しいのかは知らない。）


## 関係なかったもの

npm run generate && npm run startでないと動かないような気がしたが、npm run devで大丈夫だった。
～のうち一つと一致する / ～のすべてと一致しない（＋別テーブルのデータと比較する）

#いずれかに一致する（いずれとも一致しない）という判定がしたい！

たとえば、こんな感じで、「関東地方FlG」を立てたい場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/a2a78152-0dd9-a320-4a1c-5856dd59b19a.png)
条件列の追加から…だと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/9a008e6f-be2a-f1b4-3813-b8eb69985575.png)
条件を6つも書かないといけないのって面倒ですよね。
この条件について、とくに序列（東京都と千葉県に同時に合致した場合に、東京都を優先する！）もないので、わざわざ条件列で作る必要はない。。
#つまり、リストにあるかどうか判定したいってこと！

ほかの言語でよくある、In（A,B,C）とかNot In（X,Y）に対応するようなあれをやりたいな、ってことなので

カスタム列の追加から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/54e78639-fec5-c9fe-cdf5-90e2eb31de37.png)

    =List.Contains({"茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県"},[県名])
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/70043fb9-cefa-1c9e-4827-6dcab8a51a81.png)
　青：判定したいリスト（リストなので｛｝で囲む！）
　黄色：比較したいカラム

##もちろん、いずれとも一致しないも判定できる

その場合はこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/7eaa794a-dc54-feb0-e7a1-1ffc78adea72.png)

    =not(List.Contains({"茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県"},[県名]))

さっきの式を全体()でくくって、notつける。
すると、反転した結果が得られる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/ca76e1f5-c679-b925-5735-2abbe01d5308.png)
#比較したいリストがめっちゃ長いとか、更新される可能性があるときは？

別テーブルにこんな感じに、１列の比較したいデータの一覧を作って
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/cb278393-ef47-eea5-eadf-856b13a559d1.png)
で、元のテーブルのほうにこんなカスタム列を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/5c815b25-1a30-4d36-2e8c-00e66f3b1ec5.png)

    =List.Contains(Table.ToList(関東一覧),[県名])
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/328545b8-875c-5c14-a874-68b75271e7d1.png)


　さっきと比べて、青いところが変わっただけ。｛｝でくくって、リストの中身を全部記載していたのを、Table.ToList()で、テーブルをリストに変えて読ませている。

もちろん、結果は同じになります！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1120006/bbe24e82-af21-54ff-8ba2-e4238174b1bf.png)
…もっと簡単にできる方法もある気がしますが、とりあえずやりたいことはできたのでヨシとする！
ターミナルでファイルを自在に操作するために癖付けた方がいいコマンド

**慣れるとfinderではなくターミナルでファイルを作成、削除した方が早いらしい**
--
開発環境：
macOS catalina バージョン10.15.7
macデフォルトターミナル
VisualStudioCode

pwd 自分の居場所表示
ls　自分のいるディレクトリ配下のファイルをリストアップ
rm 削除
ls | grep 一致する文字が名前に入っているファイルをリストアップ
code ./ 自分がいるディレクトリをエディタで開く
code ~~　自分がいるディレクトリ配下のファイルをエディタで開く