OmniAICreator/Qiita-1.07M huggingface dataset:
Linuxって、そもそもなんやねん編

箸休めです。
色々勉強しているので、皆さん分かっているとは思いますが
Linuxって一般的にはOSです。(カーネルとかややこしいのは今はいいです。)

WindowsとかMac等と同じですね。
IT業界に入るまでは、聞いた事もありませんでした。

Linuxを使われてる理由は一番の大きな理由はオープンソースが理由なんじゃないかなと思います。
無料で使えますし、OSも自分で弄る事が出来ます。Windowsはお金が掛かるし、OS弄れないですからね。
大きなメリットです。
【Ruby】なぜrequire 'json'するとto_jsonできるようになるのか

## TL;DR

- json module読み込み時にC言語の拡張メソッドを呼び出して関数の追加とmodule追加して、組み込みのクラスに後からMixinしているから。


## 疑問

Rubyでjsonに変換する場合`to_json`を使用をする場合が多いと思います。
`Hash`型や`Array`型のオブジェクトから変換する場合は、以下のようなコードを書きますが、`require 'json'`をしないと`NoMethodError`でエラーが発生します。

- `require 'json'`しない

```ruby:エラー起こる
irb(main):002:0> some_hash = {a: 1,b: 2}
irb(main):004:0> some_hash.to_json()
Traceback (most recent call last):
        5: from /usr/local/opt/ruby/bin/irb:23:in `<main>'
        4: from /usr/local/opt/ruby/bin/irb:23:in `load'
        3: from /usr/local/Cellar/ruby/2.7.1_2/lib/ruby/gems/2.7.0/gems/irb-1.2.3/exe/irb:11:in `<top (required)>'
        2: from (irb):3
        1: from (irb):4:in `rescue in irb_binding'
NoMethodError (undefined method `to_json' for {:a=>1, :b=>2}:Hash)
Did you mean?  to_s
```

-  `require 'json'`する

```ruby:エラー起こらない
irb(main):005:0> require 'json'
=> true
irb(main):002:0> some_hash = {a: 1,b: 2}
irb(main):006:0> some_hash.to_json()
=> "{\"a\":1,\"b\":2}"
```

組み込みのclassに対して後からインスタンスメソッドを追加するのは珍しいなと感じたので、内部の実装を追って見ます。

## ソースコード確認

Rubyのドキュメントによると `JSON::Generator::GeneratorMethods::Hash`というmoduleが存在するようです。

https://docs.ruby-lang.org/ja/latest/class/JSON=3a=3aGenerator=3a=3aGeneratorMethods=3a=3aHash.html


Rubyソースコードの該当部分を検索してみるとおそらくここから各generatorクラス(`json/ext/generator`)の呼び出しをしているみたいです。

https://github.com/ruby/ruby/blob/v2_7_1/ext/json/lib/json/ext.rb#L8

```rb:ext.rb
  module Ext
    require 'json/ext/parser'
    require 'json/ext/generator'
    $DEBUG and warn "Using Ext extension for JSON."
    JSON.parser = Parser
    JSON.generator = Generator
  end
```

さらに以下を確認すると`json/ext/generator`は`.rb`ではなくc言語から拡張ライブラリとしてコンパイルされていることが分かります。

https://github.com/ruby/ruby/blob/v2_7_1/ext/json/generator/extconf.rb#L4

```rb:extconf.rb
require 'mkmf'

$defs << "-DJSON_GENERATOR"
create_makefile 'json/ext/generator'
```

該当のc言語のファイルを確認すると`rb_define_method`によって`Hash`クラスに対して`to_json`のメソッドが登録及びmoduleの登録が行われていることが分かりました。

https://github.com/ruby/ruby/blob/68d7e93b3baf91ac7d7cc100b75bab81ba7dee76/ext/json/generator/generator.c#L1511

```c
    mHash = rb_define_module_under(mGeneratorMethods, "Hash");
    rb_define_method(mHash, "to_json", mHash_to_json, -1);
```

そして上記のmoduleは以下でMixinすることで後からインスタンスメソッドの追加を行なっているようです。

https://github.com/ruby/ruby/blob/68d7e93b3baf91ac7d7cc100b75bab81ba7dee76/ext/json/lib/json/common.rb#L67

```rb
       klass.class_eval do
          instance_methods(false).each do |m|
            m.to_s == 'to_json' and remove_method m
          end
          include modul
        end
```

## まとめ

json module読み込み時にC言語の拡張メソッドを呼び出して関数の追加とmodule追加して、組み込みのクラスに後からMixinしているから、というのが分かりました。

言語によっては(Pythonとか)組み込みクラスに対してメソッドの追加を許可していない言語もあるので少し新鮮でした。良くも悪くも組み込みクラスに対して柔軟にインジェクションできるんですね。
これからも勉強していきたいと思います。
RailsでXSSを回避しつつ改行を維持して出力したい場合の書き方

Scriptタグを含む以下の文字列をいろんな方法で出力して、違いを比較します。

```html:@hoge
<script>
  alert('you are an idiot');
</script>
```

## そのまま出力
```erb:erb
<%= @hoge %>
```
```:出力
<script> alert('you are an idiot'); </script>
```
### 結果
XSSは回避できるが、改行やスペースが反映されない

## html_safe
```erb:erb
<%= @hoge.html_safe %>
```
```:出力
Scriptが実行される！
```
### 結果
XSSを誘発します。`html_safe`はその名前に反して全然safeじゃないです。

## simple_format(`@hoge`, sanitize: true)
```erb:erb
<%= simple_format(@hoge, sanitize: true) %>
```
```:出力
alert('you are an idiot');
```
### 結果
`script`タグが消去される

### h(`@hoge`)
```erb:erb
<%= h(@hoge) %>
```
```:出力
<script> alert('you are an idiot'); </script>
```
### 結果
XSSは回避できるが、改行やスペースが反映されない

## simple_format(h(`@hoge`))
```erb:erb
<%= simple_format(h(@hoge)) %>
```
```:出力
<script>
alert('you are an idiot');
</script>
```
### 結果
XSSは発生しない。scriptタグはエスケープされ、改行も保持。改行後のスペースだけが反映されない。

## 所感
改行を反映させたい時は`simple_format(h(@hoge)`が良さそう。
余白のemがカンプ通りのpxにならない

<h2>現象</h2>
フォントと余白(` padding` 、` margin` )のサイズ指定にemを使用。
Chromeの検証ツールで確認すると、余白がカンプのpxよりも小さい箇所がある。

<h2>原因</h2>
emは親要素のフォントサイズを継承するため、フォントサイズを指定すると余白も変動する。
親要素のサイズが頭から抜けていて、デフォルトサイズ16pxで計算していたのが原因でした。

<h2>対処法</h2>
1. フォントサイズを考慮して再計算する。<br>
デフォルトサイズが16px、親要素のフォントサイズが15px(0.9375em)、` padding` に上下左右30pxを指定したい場合、<br>
30÷15=2rem　を指定する。
2. <p>remを使用する。</p>

<h2>参考リンク</h2>
[CSS の値と単位 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units "CSS の値と単位 - ウェブ開発を学ぶ | MDN")

<p>解釈が間違っていたら教えてください。</p>
[Vue.js] propsでnullが入ることも想定した書き方

propsの**プロパティを一部のコンポーネントでは指定したくない時**、
もしくは**実行するAPIなどによって値を入れたり、入れなかったりする時**があるかと思います。
その場合はnullを許容するように指定します。

**required: false**
でプロパティの中身が必須ではないことを定義します。
**default: null**
でプロパティに値が入ってこない場合にデフォルトでnullを指定します。


```
props: {
    value: { type: String, required: false, default: null }
  }
```

required: falseは最悪定義しなくても警告などはでませんが、
default: nullは指定していないとコンソールで警告が出ます。

（警告はエラーのようにアプリが止まることはありませんが、予期せぬ不具合が起きる可能性があるので解消しておくようにしましょう）

```
Invalid prop: type check failed for prop "value". Expected String with value "null", got Null 
```

先ほど、

>required: falseは最悪定義しなくても警告などはでません

と書きましたが、
その値が必要なものなのか、そうでないのかは、可読性を高めるためにも定義しておいた方がよいでしょう。

ちなみに
**required: true**
とすることで、プロパティに入ってくる値を必須とします。
この場合にもしnullなどが入ってしまうと先ほどと同じような警告が出てしまいます。

```
Invalid prop: type check failed for prop "value". Expected String with value "null", got Null 
```
楽しいのでお薦め！！新しいタイピングの修得方法を提案する（キーの配列をよく見て頭に入れる）

#概要

新しいタイピングの修得方法を提案する

提案する理由は、何年も何年もタイピングしているが、一向に向上しない。
ちゃんと練習すればなんとかなる気もするが、ちょっと、しんどい。

#「新しいタイピングの修得方法」の方向性

ブラインドタッチ（Blind Touch)ができるようになりたいが、
通常、発想がそこで短絡し、
キーを見ずに、タッチできることを一生懸命練習することになる。
しかし、
簡単ではない。
⇒　**全く、逆を考えた！**

#「新しいタイピングの修得方法」

キーボードを、ものすごく、しっかり見て、
**キーボードの配列を、画像として記憶する。**


#進捗

##進捗１(2020/08/29)

＜進捗＞
まだ、あまり成果は上がっていない。
まだ、極一部のキーしか記憶できていない。
しかし、
「キーボードの配列を画像として記憶する」その活動は、
**歩きながらでもできる**ことがメリットであることに気づいた。

＜懸念・問題的＞
記憶できたとして、それを指の動きにつなげる必要があるが、
そこのつながりがどうなるかは、まだ、よくわかっていない。

＜その他＞
よく手が覚えている（例.パスワードなど）という状況があるが、
頭も覚えているほうがより良い気がする。
今回の新タイピングの場合は、頭も、ついていけるのではないか。

##進捗２(2020/09/06)

＜進捗＞
のんびりやっています。
悪くないです。
大文字のZの打ち方を、初めて、悩みました。いままで、Zそのものが大して
わかっていなかったので、見ながら打ってた！！！
しかし、いまは、Zの場所は完全に頭に入っているので、**さっさと打とうとするが、、、**
⇒さて、大文字にするには？？
⇒⇒ **両手使うんですね。**

＜懸念・問題的＞
**意外と、覚えにくいというか、こんがらがったときに、正しいものを覚えるのは
結構大変**。まあ、ここは、努力。キーの左の列が、QAZなのかQSZなのか、こんがらがって。。。。

＜その他＞
結構、楽しいです！！
「手元を決して見るな。。。」という流派もあるんでしょうが、、、
**最初は、どんどん見なさいという、新流派です。**

##進捗３(2020/09/19)

＜進捗＞
手が覚えているのも、うまく、利用したいと思いました。
た。例えば、行を意味するcolumnとか、手が覚えていますが、
**「U」はどこにキーがあるか**、手は覚えていても、頭でわかる人、
意外と少ないかも。。。。
⇒ダメじゃないですか？？？頭でも覚えましょう！！！
（全然、ダメじゃない可能性もあるけど。。。）
言いたいのは、総合的に覚えるベシということ？？？
⇒⇒しばらく、手の記憶を頭に移すようなことを試みます！

##進捗３(2020/09/21)

＜進捗＞
「h」(human)を打つときに、指でなく、手全体が動くときがあることに気づいた。
修正する。（これは、画像で覚える方式と直接関係ないが。）

##進捗４(2020/09/26)
＜進捗＞
進捗３とかぶるが、手が動かないように、手の下のほうを固定する（パソコンとかに押さえつける）ことを、自分で思いついた（どうやら、常識のよう）。最適な場所は、まだ、未定。今後、いろいろなキーを打てば決まると思う（仮に前の方ーーーに、いまは、してみている）。いまは、「,」の場所を覚えるのが、マイブーム。


##進捗５(2020/10/31)
＜進捗＞
全然、楽しくやっています。いまは、単に、数字の０とかをタイピングする際の手の動きとかを練習している状況。主題からは少しずれていますが、手の動きもうまくいかないと、『キーの配列をよく見て頭に入れる』という提案の足元をすくわれるため。０００。

#まとめ
まだ、始めたばっかりなので、適宜、進捗を報告する。
JavaScriptで使用する関数、関数宣言と関数式、記述方法、違いを理解する

#関数を定義する
Rubyでいうところのメゾットのことを、JavaScriptでは**関数**と呼びます。
**<font color="Red">function 関数名( 引数 ){ 処理 }</font>**と記述することで関数を定義することができます。
関数定義方法は主に以下の２種類です。

##（１）関数宣言
 
```
function 関数名(引数){
  処理
}
```
定義例１

```
function animal(){
  console.log("ライオン")
}

animal()

出力される値：ライオン
```
定義例２

```
function calc(num1,num2){
  return num1*num2
}

const num1 = 10
const num2 = 4
console.log(calc(num1,num2))
出力される値：40

※ JavaScriptでは、返り値をreturnで定義する必要があります。  
  今回の場合、returnがなければ値が出力されません
```

##（2）関数式

```
変数 = function( 引数 ){
   関数内の処理
}
```

##二つの変数の違いを理解する。
- **記述の違い**  
関数式の場合は、**<font color="Red">function（）{}</font>**という無名の関数を定義・代入するという記述になる。

```
// 関数宣言
function 関数名( 引数 ){
  // 関数内の処理
}

// 関数式
変数 = function( 引数 ){
  // 関数内の処理
}
```
- **変数を読み込むタイミングの違い**  
関数宣言については、関数以前に定義しても読み込まれる。

```
//関数宣言
hello()　←変数定義

function hello(){
  console.log('hello')
}

出力される値：hello
```

関数宣言の場合は、関数定義後に変数を記述しても読み込まれます。

```
//関数宣言
function hello(){
  console.log('hello')
}
hello()　←変数定義

出力される値：hello
```  
次は、関数式です。

```
//関数式
hello()　←変数定義

const hello = function(){
  console.log('hello')
}

出力される値：Uncaught SyntaxError: Identifier 'hello' has already been declared
```
このように、関数式の場合は**関数以前に変数を定義するとエラー**になってしまいます。
関数式の場合は、**関数式以降に変数を記述する**ようにしましょう。

```
//関数式

const hello = function(){
  console.log('hello')
}

hello()　←変数定義

出力される値：hello
```

※　現在プログラミング勉強中ですので、間違いがあれば教えていただけると幸いです。
TkinterでMVC

## はじめに
この記事でのMVC(Model-View-Controller)は、以下の方針で機能を切り分けることを指します。
**Model**: ViewもControllerも知らない。ただ実直に計算を行う。
**View**: ModelもControllerも知らない。美を追求するのみ。
**Controller**: ModelとViewの両方を知っている神様的ポジション。ModelとViewの橋渡しをする。

何番煎じか分からないですが、
意外と上の方針に則るMVCの情報が少ないと思ったため記事にします。

## いきなりコード

```python
import tkinter as tk


class Model:
    def __init__(self, parent):
        self.val = tk.IntVar(parent, value=0)

    def add_one(self):
        self.val.set(self.val.get() + 1)

    def reset(self):
        self.val.set(0)


class View(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.parent = parent
        self.value_label = tk.Label(self)
        self.add_one_btn = tk.Button(self, text="ADD ONE")
        self.reset_btn = tk.Button(self, text="RESET")
        
        self.value_label.pack()
        self.add_one_btn.pack()
        self.reset_btn.pack()
        self.pack()


class Controller:
    def __init__(self, root):
        self.model = Model(root)
        self.view = View(root)

        # Binding
        self.view.value_label.config(textvariable=self.model.val)

        # Callback
        self.view.add_one_btn.config(command=self.model.add_one)
        self.view.reset_btn.config(command=self.model.reset)


if __name__ == "__main__":
    root = tk.Tk()
    app = Controller(root)
    root.mainloop()
```

## 完成品

![スクリーンショット 2020-08-29 16.25.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571854/721a0968-55ba-1fbe-334a-4b91c20f0b9f.png)

ADD ONEボタンを押すと上の数字が1ずつ増えていきます。
RESETボタンを押すと上の数字が0に戻ります。

##解説
### どうなってんの？
**Model**
`tk.IntVar()`というのがすごい便利なやつです。これを通常のintの代わりに使っています。
ほかにもデータ型によって`tk.DoubleVar()`, `tk.BooleanVar()`, `tk.StringVar()`があります。
値のやりとりにget()/set()を使う必要がある点にだけ注意して、淡々と計算をさせます。

**View**
Viewはただ見た目だけ気にしてコンポーネントを作っていきます。
変数になる部分(ラベルのテキスト)はここでは何も設定しません。

**Controller**
ControllerはModelとViewの両方を知っているのでやりたい放題です。
`self.view.value_label.config(textvariable=self.model.val)`
ここで、ModelのもつIntVar()を、Viewのテキストを空にしていたラベルコンポーネントに割り当てています。
こうすることで、ModelとViewの変数が同期するようになり、Modelで値を変更すると、自動的にViewに反映されます。
また、各ボタンを押した時の処理もControllerで割り当てます。


### 知らないってどういうこと？
「ModelがViewもControllerも知らない」というのは、簡単に言うとModelがViewやControllerのインスタンスを持たないことです。

例えば以下のようにModelがViewを持つような実装をしたとします。

```python
class Model:
    def __init__(self, view):
        self.val = 0
        self.view = view
```

こうすれば、Modelがもつ値が変わったとき、その変更をViewに教えることができます。
例えばこう

```python
class Model:
    #・・・
    def add_one(self):
        self.val += 1
        self.view.label["text"] = str(self.val)  # viewに値を反映
```

すごく簡単そうで何だか最初のコードよりも良さそうに思うかもしれません。
でも実はModelを実装する人の負担がめちゃ増えています＞＜
この実装だとModel担当の人は、こんな足し算するだけの処理のために、次のことを知っている必要があります。

* Viewにはラベルコンポーネントがあること
* その名前はlabelということ
* ラベルコンポーネントのテキスト更新の方法 

などなど

また、ModelがViewを持つことで、Viewを破壊する危険もあります。
ていうか一発で破壊できます。

```python
class Model:
    #・・・
    def balse(self):
        self.view = None
```
大いなる力には大いなる責任が伴います。
なるべく力は持たないようにしたいです。

ということで
MVCで役割分担を明確にして、負担も責任も最小にしましょう。


----
###余談
GUI作成の経験があんまりないので、いまいちどのライブラリが良いのか分からないです。
pythonだとtkinterしか使ったことがないのですが、
wxpythonとかkivyとかは、どこが優れているのか教えて頂けると助かります。
【ruby】map, injectを使ってeachを簡略化する

rubyの繰り返し処理として有名なのが、**eachメソッド**ですが、必ずしもeachが最善という訳ではなかったりします。

あるパターンの時は、違うメソッドを使った方が簡略化して、実装できる場合があります。
今回は、パターン別で、簡略化する書き方をご紹介します。


#すでにある配列から、要素を変化させた新たな配列を作成する時

`map`メソッドを使っていきます。

###演算子を使っての変化

```ruby

# eachの場合

list = (1..5).to_a
list_double = []

list.each do |i|
  list_doubule << i * 2
end

p list_double  # [2, 4, 6, 8, 10]
```

```ruby

# mapの場合

list = (1..5).to_a

list_double = list.map{ |i| i* 2 }

p list_double  # [2, 4, 6, 8, 10]
```

###インスタンスメソッドを使っての変化

```ruby

# eachの場合

array = ["a", "b", "c"]
array_up = []

array.each do |i|
  array_up << i.upcase
end

p array_up  # ["A", "B", "C"]
```

```ruby

# mapの場合

array = ["a", "b", "c"]

array_up = array.map(&:upcase)

p array_up  # ["A", "B", "C"]
```
`.map{ |i| i.upcase }`をさらに省略させている



#配列の要素(数字)の合計を求める時

`inject(初期値)`メソッドを使っていきます。

```ruby

# eachの場合

list = (1..5).to_a
sum = 0

list.each do |i|
  sum += i
end

p sum  # 15
```

```ruby

# injectの場合

list = (1..5).to_a

sum = list.inject(0){|i, j| i += j}

p sum  # 15
```
U-Net: Convolutional Networks for Biomedical Image Segmentation(18 May 2015)を読む

#概要

Semantic Segmentationの重要な論文である
https://arxiv.org/pdf/1505.04597.pdf
U-Net: Convolutional Networks for Biomedical Image Segmentation
を読む。

#Abstractを読む

##Abstract原文
https://arxiv.org/pdf/1505.04597.pdfのアブストラクト

>
Abstract. There is large consent that successful training of deep networks requires many thousand annotated training samples. In this paper, we present a network and training strategy that relies on the strong use of data augmentation to use the available annotated samples more efficiently. The architecture consists of a contracting path to capture context and a symmetric expanding path that enables precise localization. We show that such a network can be trained end-to-end from very few images and outperforms the prior best method (a sliding-window convolutional network) on the ISBI challenge for segmentation of neuronal structures in electron microscopic stacks. Using the same network trained on transmitted light microscopy images (phase contrast and DIC) we won the ISBI cell tracking challenge 2015 in these categories by a large margin. Moreover, the network is fast. Segmentation of a 512x512 image takes less than a second on a recent GPU. The full implementation (based on Caffe) and the trained networks are available at http://lmb.informatik.uni-freiburg.de/people/ronneber/u-net .

##Abstract Google翻訳（未加工）

>概要。ディープネットワークのトレーニングを成功させるには、数千の注釈付きトレーニングサンプルが必要であるという大きな同意があります。このペーパーでは、利用可能な注釈付きサンプルをより効率的に使用するために、データ拡張の強力な使用に依存するネットワークとトレーニング戦略を示します。アーキテクチャは、コンテキストをキャプチャする収縮パスと、正確なローカリゼーションを可能にする対称的な拡張パスで構成されています。そのようなネットワークは、非常に少数の画像からエンドツーエンドでトレーニングでき、電子顕微鏡スタックのニューロン構造のセグメンテーションに関するISBIチャレンジで、以前の最良の方法（スライディングウィンドウ畳み込みネットワーク）よりも優れていることを示します。透過光顕微鏡画像（位相差とDIC）でトレーニングされた同じネットワークを使用して、これらのカテゴリーでISBIセルトラッキングチャレンジ2015に大きなマージンで勝利しました。さらに、ネットワークは高速です。最近のGPUでは、512x512画像のセグメンテーションに1秒もかかりません。完全な実装（Caffeに基づく）およびトレーニング済みネットワークは、http://lmb.informatik.uni-freiburg.de/people/ronneber/u-netで入手できます。

#今後
この論文の特徴などを追って検討します。

#まとめ
コメントなどあればお願いします。
LogicApps　フロー作成手順

１．LogicApps概要
 企業または組織の間でアプリ、データ、システム、サービスを統合する必要がある場合に、タスク、ビジネス プロセス、ワークフローのスケジュール設定、自動化、調整に役立つクラウドサービスです。

２．作業目的
　クラウド、オンプレミス、その両方のどこにあるかを問わず、アプリの統合、データの統合、システムの統合、Enterprise Application Integration (EAI)、および企業間 (B2B) 通信が可能になるスケーラブルなソリューションを設計および構築する作業を簡略化できます。

３．作業手順
　今回は2本のフローをご紹介します。
　
　３．１．GET（データの取得）の構築
　　→SharePointで使用している出退勤管理で新規に登録すると、その情報を取得。Office365のアカウント情報を取得し、メールを自動的に送るフローです。
　　※今回は2人で管理しており、Office365のアカウントを持っていると想定しています。
　　①トリガーはSharePointの「When a new item is created」を選択
　　　※項目を確認する頻度は任意で変更する。（今回は1分で設定）
　　![GET1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/526ec6be-96f8-a9b9-71a9-b782a561022d.png)

　　②タイムゾーンは「(UTC+09:00) 大阪、札幌、東京」を選択
　　③「条件」のアクションを入れ、出勤の申請者が○○であった場合と、そうではない場合とで条件の分岐を行う（お互いの出勤時にそれぞれのメールへ送信するため）
　　![GET2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/f85a61fd-6055-00e0-d8f4-dc414b2d42f7.png)

　　④②の条件分岐でtrueの方にOffice365ユーザーの「マイ プロフィールの取得 (V2)」を選択し、接続先を設定する
　　![GET3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/58a04d96-8932-6211-ac9d-4a4b1715ab75.png)

　　⑤Office365Outlookの「メールの送信 (V2)」を選択
　　⑥本文、件名、宛先の入力（以下を参照）
　　![GET4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/3159ac2b-507c-bc42-e399-94a591da1904.png)

　　⑦条件分岐のfaulseの方も同じアクションを追加する（アカウントは別）
　　⑧以上でフローの作成は完了。実際に動くかテストをする
　　
　３．２．POST（データの入力）の構築
　　→Outlookの予定表に追加されたら、自動的にGoogleカレンダーにも同じ予定を記載するフローを作成
　　①トリガーをOutlookの「イベントが追加、更新、削除されたとき (V3)」を選択
　　![POST1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/8559561a-027a-ff1d-e93d-80fbdb7fb5a5.png)

　　②カレンダーIDを入力（ドロップダウンで自分が管理しているIDが表示される）
　　③開始時刻、終了時刻それぞれ変数を初期化する
　　　→名前は任意、種類は「文字列」、値は「開始時刻」「終了時刻」を選択
　　![POST2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/a9d68989-ef4d-9745-a266-aeaf6d3c0509.png)

　　④Googleカレンダーの「イベントの作成」を選択
　　![POST3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699286/4d0d5bc2-0260-f3b2-af70-11965754ce55.png)

　　⑤カレンダーIDを入力（ドロップダウンで自分が管理しているIDが表示される）
　　⑥開始時刻、終了時刻は③で作成した変数を使用し最後に「Z」をつける
　　⑦その他、説明、場所、タイトルも入力する場合は任意で選択
　　⑧以上でフローの作成は終了。実際に動くかテストをする
UIでよく忘れること(メモ)

###言葉の定義

- 属性
    - ID, Classとかtypeとかdataとかのこと
- 属性値
    - Classとかの値。class="hoge"のhogeのこと
- タグ
    - Divとかh1とかのこと
- セレクタ
    - セレクタはjQueryを記述する際の$()の中のことを指します

###Javascript

- 配列に要素を加える

```javascript:hoge.js
var Ary = [1,2];
Ary.push(3); // Ary = [1,2,3]
```

###Jquery

* クラス属性の値が"description t_hold"で、かつ、data-idが117のdivタグに、CSSを設定する

```javascript
$('div[class="description t_bold"]').filter('[data-id="117"]').css('color', 'blue')
```
* クラス名が"label~"のlabelタグに入っているstyle属性の値を取得する
* 属性値を取得するにはattr()を使う！

```javascript
$('label[class="label_color color1"]').attr('style')
```

* 最高に参考になる
    * http://www.hp-stylelink.com/news/2013/11/20131122.php

###乱数を作る

* https://www.sejuku.net/blog/22432

###各文章にランダムな色を設定する
```javascript:mtmx.js
//色変数定義
var kiiro = "rgb(255, 165, 0)"
var murasaki = "rgb(128, 0, 128)"
var pink = "rgb(219, 112, 147)"
var akafukai = "rgb(165, 42, 42)"
var midori = "rgb(0, 128, 0)"
var ao = "rgb(0, 0, 205)"
var aka = "rgb(220, 20, 60)"
var kuro = "rgb(0, 0, 0)"

//連想配列の作成
var colorHash = {
  0: kiiro,
  1: murasaki,
  2: pink,
  3: akafukai,
  4: midori,
  5: ao,
  6: aka,
  7: kuro
}

//8以下の乱数生成
function getRdm(){
  return Math.floor(Math.random()*8);
}

//ランダムに色を取得する関数の定義
function getRdmColor(){
  return colorHash[getRdm()];
}

//レスコンテンツ数の取得
//ブラウザで対象のタグを読み出すことが必要
var lth = $('div[class="description"]').length

//レスコンテンツ数に対して、ランダムで色を設定する
for (var i = 0; i < lth; i++ ){
  $('div[class="description"]').eq(i).css('color', getRdmColor())
}

//追記実際に動くやつ

var pre = 'input[name=color_'
var afi = ']'
//var ctx = pre + num + afi

function getRdm(){
  return Math.floor(Math.random()*7);
}

var lth = parseInt($('#count').text()) + 1

for (var i = 1; i < lth; i++ ){

  $(pre + i + afi ).eq(getRdm()).click();

}
```


###即時関数

* 関数定義したと同時に実行する関数
* 書き方

```javascript:hoge.js
//関数を()で囲み（）をつける。
(function(){})();
//これを変数に入れたりする。下は乱数を吐き出す変数を定義する例

var num = function getRdm(){
  return Math.floor(Math.random()*8);
}
//即時関数だと
var getRdm() = (function(){
  return Math.floor(Math.random()*8);
})();
//num だけで乱数が取得できる。
```
###参考

* forEach文は一気に吐き出す。
RSSを読み込んで自動的に定期ツイートしてくれるDockerImageを作って公開した。

# はじめに

RSS定期ツイートをiftttで実装してやっていたのですが、制限が厳しかったため自作しました。

# 完成品

https://hub.docker.com/r/hashito/tweetrss

```sh
docker run -it --rm \
    -e RSS_URL=https://news.google.com/rss/search?hl=ja&gl=JP&ceid=JP:ja&q=twitter \
    -e CONSUMER_KEY=x \
    -e CONSUMER_SECRET=x \
    -e ACCESS_TOKEN=x \
    -e ACCESS_TOKEN_SECRET=x \
    -e 'ADD_TEXT="#rss2tweet"' \
    hashito/tweetrss

```

上から

 * RSSのURL
 * TwitterのCONSUMER_KEY
 * TwitterのCONSUMER_SECRET
 * TwitterのACCESS_TOKEN
 * TwitterのACCESS_TOKEN_SECRET
 * 追加されるテキスト

を入れれば出来ます。
Tweet周期を変更したい場合は`SCAN_SPAN`と`TWEET_DELAY`をいじってください。(両方とも秒です)
あんまりツイートすると怒られるので注意…

あと、内部でcash値を持っていて再構築すると前回どこまでRSSを読んだか忘れてしまいます。

下記のようなファイルを作ってマウントさせてあげましょう。

```:中身
{}
```

> -v {you chash file}:/root/cash

(この辺ダサいですね…いつか直します)

# ソースコード
ソースは単純です。
定期的にRSSを読み出し、Tweetする。
RSSはIDを保持し同一IDは対象としない、一定期間同一IDの受信なければID破棄という感じ。

```python
import feedparser
import json
import os
import time
import datetime
import json
from requests_oauthlib import OAuth1Session

RSS_URL=os.environ["RSS_URL"]
CONSUMER_KEY=os.environ["CONSUMER_KEY"]
CONSUMER_SECRET=os.environ["CONSUMER_SECRET"]
ACCESS_TOKEN=os.environ["ACCESS_TOKEN"]
ACCESS_TOKEN_SECRET=os.environ["ACCESS_TOKEN_SECRET"]

CASH_FILE=os.environ["CASH_FILE"]
ADD_TEXT=os.environ["ADD_TEXT"]
SCAN_SPAN=int(os.environ["SCAN_SPAN"])
TWEET_DELAY=int(os.environ["TWEET_DELAY"])


def cash_read():
    with open(CASH_FILE) as f:
        return json.loads(f.read())

def cash_write(data):
    with open(CASH_FILE,mode="w") as f:
        f.write(json.dumps(data,ensure_ascii=False))

def read_rss():
    return feedparser.parse(RSS_URL)
    
def send_tweet(text):
    twitter = OAuth1Session(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET) #認証処理
    url = "https://api.twitter.com/1.1/statuses/update.json" #ツイートポストエンドポイント
    params = {"status" : text}
    res = twitter.post(url, params = params) #post送信
    return res.status_code == 200

if(__name__ == '__main__'):
    cash=cash_read()
    print("cash:",cash)
    while(1):
        tm=datetime.datetime.now().timestamp()
        rss=read_rss()
        for i in rss["entries"]:
            if(not i["id"] in cash):
                print("tweet:",f"{i['title']} {i['link']} {ADD_TEXT}")
                send_tweet(f"{i['title']} {i['link']} {ADD_TEXT}")
                time.sleep(TWEET_DELAY)
            cash[i["id"]]=tm
            cash_write(cash)
        for k in list(cash.keys()):
            if((cash[k]+60)<tm):
                print("delete:",k,cash[k],tm)
                cash.pop(k)
        time.sleep(SCAN_SPAN)
```

## docker file
こちらも単純ですね。
python3のイメージを使って`requirements.txt`をインストール。
環境変数を準備して、起動してあげる感じです。


```dockerfile
  
FROM python:3
COPY . /root/

RUN pip install -r /root/requirements.txt

ENV RSS_URL=https://news.google.com/rss/search?hl=ja&gl=JP&ceid=JP:ja&q=twitter \
    CONSUMER_KEY=x \
    CONSUMER_SECRET=x \
    ACCESS_TOKEN=x \
    ACCESS_TOKEN_SECRET=x \
    CASH_FILE=/root/cash \
    ADD_TEXT="#rss2tweet" \
    SCAN_SPAN=600 \
    TWEET_DELAY=150

CMD ["python","/root/main.py"]
```
docker file sharingの設定を手動でする

## 問題

docker-compose upをした際に、`/var/folders`がファイルシェアリングしていないので、特的のコンテナが起動しないエラーが出た。

## ソリューション

docker for macでファイルシェア設定をしろと、エラー文には書かれているのでやってみた。
が、GUIでは/varフォルダは選択できないので以下のファイルを直接編集した。

```shell

~/Library/Group\ Containers/group.com.docker/settings.json
```

MacOSは、`/var`フォルダを、`/private`として指定するので、`/var/folders`と`/private/var/folders`の両方で、ファイルシェアリング設定を行う必要がある。



```shell
{
  "filesharingDirectories" : [
    "\/Users",
    "\/Volumes",
    "\/private",
    "\/tmp",
    "\/var\/folders", // 追加
    "\/private\/var\/folders" // 追加
  ],
```


docker for macを再起動させれば完了。


![Settings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150144/0577c504-0b9a-4355-ac63-ea407b4702a7.png)



## 参考

ここに書かれていることを、順番に行っただけ。
https://medium.com/effy-tech/fixing-the-var-folders-error-in-docker-for-mac-v2-2-3-2a40e776132d
【Python】曜日を取得する（英語＆日本語）

# Pythonで曜日を取得する方法

Pythonで曜日を取得する方法について調べたので、備忘録としてのまとめです。

以下、参考にしたページです。

>
- [How do I get the day of week given a date?](https://stackoverflow.com/questions/9847213/how-do-i-get-the-day-of-week-given-a-date)
- [Pythonで日付から曜日や月を文字列（日本語や英語など）で取得](https://note.nkmk.me/python-datetime-day-locale-function/)

大きく分けると２通りの方法があるようです。

- `datetime`モジュールの`strftime()`メソッドを使う方法
- `datetime`モジュールの`weekday()`メソッドと`calendar`モジュールの`day_name`を使う方法

それぞれ詳しく見ていきます。

## `datetime`モジュールの`strftime()`メソッドを使う方法
datetimeモジュールの**`strftime()`**はdate型またはdatetime型のオブジェクトを文字列型に変換・フォーマットするためのメソッド。

引数に変換したいフォーマットを渡すと、文字列に変換してくれる。

`%〇`は書式化コードと呼ばれるもので、ここに年や月、分、曜日などを埋め込むことができる。

曜日の書式化コードは次のようになっている。

- `%A` : 曜日名
- `%a` : 曜日名（短縮形）

### 英語の曜日を取得
英語の曜日を取得したい場合は次のように簡単に取得できる。

```python
import datetime as dt

date = dt.date(2001, 1, 2)
print(date.strftime('%Y-%m-%d'))  # => '2001-01-02'

# 曜日を取得
print(date.strftime('%A'))  # => 'Tuesday'
print(date.strftime('%a'))  # => 'Tue'
```

### 日本語の曜日を取得

`locale`モジュールはPython上でロケールを確認したり変更したりするためのモジュールで、`locale.setlocale()`を使ってロケールを変更できる。ロケールを日本語環境に変更した後に上のコードと同じように`strftime()`を使えば日本語の曜日が取得できる。

```python
import datetime as dt
import locale


# localeモジュールで時間のロケールを'ja_JP.UTF-8'に変更する
locale.setlocale(locale.LC_TIME, 'ja_JP.UTF-8')

date = dt.date(2001, 1, 2)
print(date.strftime('%A'))  # => '火曜日'
print(date.strftime('%a'))  # => '火'
```

## `datetime`モジュールの`weekday()`メソッドと`calendar`モジュールの`day_name`を使う方法

`datetime`モジュールの`weekday()`は曜日に対応する整数を返してくれる。月曜日が0始まりで日曜日が6で終わる。ちなみに`datetime`モジュールには`isoweekday()`というメソッドもあるが、こちらは月曜日が1始まりで日曜日が7で終わる。

`calender`モジュールの`day_name()`は曜日（英語）の`calendar._localized_day`というスライスできる型を返すので`weekday()`と`day_name`を組み合わせて曜日を取得できる。

```python
import calendar
import datetime as dt
import locale


print((2001, 1, 2).weekday())  # => 1
print(calendar.day_name[:])  # => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

# localeモジュールで時間のロケールを'ja_JP.UTF-8'に変更する
locale.setlocale(locale.LC_TIME, 'ja_JP.UTF-8')
print(calendar.day_name[:])  # => ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日']
```

### 英語の曜日を取得
先に述べたことを利用する。

```python
import calendar
import datetime as dt


date = dt.date(2001, 1, 2)

# 曜日を取得
day_index = date.weekday()  # => 1
print(calendar.day_name[day_index])  # => 'Tuesday'
```

### 日本語の曜日を取得
日本語で取得する場合は`locale.setlocale()`を使ってロケールを変更する。

```python
import calendar
import datetime as dt
import locale


# localeモジュールで時間のロケールを'ja_JP.UTF-8'に変更する
locale.setlocale(locale.LC_TIME, 'ja_JP.UTF-8')

date = dt.date(2001, 1, 2)

# 曜日を取得
day_index = date.weekday()  # => 1
print(calendar.day_name[day_index])  # => '火曜日'
```

## 注意点
どちらの方法でも良さそうだが、どちらともロケールを変更しているため（システムワイドではなく実行したコード内だけでの変更だが）、ロケールを変更したくない場合は、`locale.setlocale()`を使わずに英語の曜日から日本語の曜日に変換する関数を定義して使うと良さそう。
Gitコマンド ブランチ関係(branch, checkout, switch, restore)

# $ git branch
```
$ git branch -a
```
リモートリポジトリにあるブランチを含む全てのブランチの一覧を表示する。

```
$ git branch <branchname>
```
`<branchname>`ブランチを作成する。ブランチの切り替えは行わない。

# $ git checkout
「ブランチの切り替え作業」と「作業ツリーのファイルの復元」の2つの役割がある

```
$ git checkout <branchname>
```
`<branchname>`ブランチへ切り替え

```
$ git checkout -b <branchname>
```
`<branchname>`ブランチを作成し、同時に切り替えも行う

```
$ git checkout -f <branchname>
```
ファイルや作業ツリーの変更内容を破棄して、強制的に`<branchname>`ブランチに切り替える

```
$ git checkout <filename>
```
ローカルの`<filename>`の変更内容を取り消す

```
$ git checkout .
```
ローカルのすべての変更を取り消す（新規作成されたファイルは残る）

# Gitの新コマンド "switch","restore"
Git 2.23から新コマンド`switch`,`restore`が追加された

# $ git switch

```
$ git switch -c <branchname>
```
`git checkout -b <branchname>`と同義
-cはcreateの略

```
$ git switch <branchname>
```
`git checkout <branchname>`と同義

# $ git restore

```
$ git restore .
```
`git checkout .`と同義

```
$ git restore <filename>
```
`git checkout <filename>`と同義

# 参考
[git branch コマンド](https://qiita.com/chihiro/items/e178e45a7fd5a2fb4599)
[【Git】あなたが知らない新コマンドswitch/restoreの世界にご招待](https://qiita.com/rebi/items/5a23f8cf904271bb5452)
Atom Echo + ENV II メモ

# 概要
ATOM Echo で ENV II の[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENVII/Arduino/ENVII) を動かすには `Wire.begin(26,32);` で Grove 端子のピン番号を指定する必要がある.

# 目的
ATOM Echo に Grove で ENV II を繋いで温度等を取得する.

# ハードウェア
- [M5Stack用環境センサユニット ver.2（ENV II）](https://www.switch-science.com/catalog/6344/)
- [ATOM Echo - スマートスピーカー開発キット](https://www.switch-science.com/catalog/6347/)

# Arduino IDE
設定

| 項目 | 値 |
|---|---|
|ボード|M5Stick-C|
|Upload Speed|1500000|


# ENV II の[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENVII/Arduino/ENVII) を動かす.
そのままでは ENV II が認識できない旨のエラーになる. そこで次のような変更を行う.

## 変更点 include
必須かは不明だが一応変更する.

```ENVII.ino.diff
+ #include <M5Atom.h>
- #include <M5Stack.h>
```

## 変更点 Wire.begin()
恐らく最重要変更点.
ネット上の arduino の資料には, `Wire.begin()` の引数に I2C のスレーブとして動作する為のアドレスを指定する云々とあるが, 以下のように Atom Echo の Grove に使われているピン番号を引数として指定するとその IO で I2C の通信を行うようである.

```ENVII.ino.diff
-  Wire.begin();
+  Wire.begin(26,32);
```

ちなみに Grove ではなく 25,21 番のピンで I2C 通信する場合は, M5Atom ライブラリの src/M5Atom.cpp ファイルには以下のような記述があるので `M5.begin(true, true, false);` 等と記述する方法もある. (未検証)

```M5Atom.cpp
...
M5Atom::begin(bool SerialEnable , bool I2CEnable , bool DisplayEnable ) {
	...
	if( I2CEnable )
	{
		Wire.begin(25,21,10000);
	}
	...
}
...
```

## 変更点 M5.Lcd
Atom Echo には LCD はついてないのでコメントアウトか削除する.

```ENVII.ino.diff
-  M5.Lcd.setBrightness(10);
-  M5.Lcd.setTextSize(3);
-  M5.Lcd.println("Could not find a valid BMP280 sensor, check wiring!");
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.println("ENV Unit test...");
-  M5.Lcd.setCursor(0, 0);
-  M5.Lcd.setTextColor(WHITE, BLACK);  
-  M5.Lcd.printf("Temp: %2.1f  \r\nHumi: %2.0f%%  \r\nPressure:%2.0fPa\r\n", tmp, hum, pressure);
```

# まとめ
Atom Echo の Grove で I2C 通信する場合は, `Wire.begin(26,32);` のようにピン番号を手動で指定する必要がある.

M5Stack Basic や M5StickC では手動指定する必要はなかったりするのだろうか？

# 参考
- M5Stick-C で `Wire.begin(32, 33);` の記述 -> https://lang-ship.com/blog/work/m5stickc-i2c/
- IDE の設定参考 -> https://programresource.net/2020/04/14/3265.html
factorization machineでレコメンドエンジンを作成する①

## レコメンドエンジンとは
例えばNetflixを開くと、自分が見たい映画をトップページで表示してくれる。
例えば僕は、「君の名は」、　「ドラえもん」などが表示される。

これはユーザー協調フィルタリングレコメンドエンジンの働きのおかげだ。
ユーザー協調フィルタリングレコメンドエンジンとは、多数のユーザーの行動履歴から、あるユーザーの行動を予測し、レコメンドすると言うものだ。

例えば、３０代女性に人気の俳優が、登場する映画Aがあるとする。そうすると、ユーザー協調フィルタリングレコメンドエンジンは、３0代の女性ユーザーには映画Aをレコメンドする。

話に聞くと簡単でしょう。
でも、実際に作るとなると、性別、年齢、言語など、考慮しなければならない事が多すぎて、通常のif-elseをしようしたプログラミングでは、あまり精度の高いレコメンドエンジンを作成する事が出来ない。

そのため、factorization machineと言うフレームワークを使用して、精度の高いレコメンドエンジンを作成する。

## factorization machenとは何か？
レコメンドエンジンを作成しようと思った人なら、matrix fatroizationと言う概念を聞いた事があると思う。
factorization machineは、matrix factorizationを使いやすく進化させたものだ、より精度の高いレコメンドエンジンを作成可能だ。
・Matrix Factorizationでは、ユーザーとアイテムの情報しか扱えなかったため、性別、年齢などをレコメンドエンジンの作成に用いる事が出来なかったが、Factorazitaion Machineは、それ以外の情報も扱えるため、性別、年齢を考慮したレコメンドエンジンを作成可能。
・ロジスティック回帰などと異なり、Matrix Factorizationと同じく疎な行列を扱う事が出来る。
・特徴量の間で影響を与あう相互作用（Interaction）を考慮する事が出来るので、相関関係がある特徴量も適切に扱う事が出来る。

factorization machineでレコメンドエンジンを作成する②（執筆中）
へ続く


## 参考
[仕事で覚える機械学習](
https://www.amazon.co.jp/%E4%BB%95%E4%BA%8B%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92-%E6%9C%89%E8%B3%80-%E5%BA%B7%E9%A1%95/dp/4873118255)

名著なので、ぜひ買ってみてください。
AWSのOrganization組織のアクセス権をなんとかする

# 困ったこと
マスターアカウントとは別にアドミン権限を持ったアカウントを別途作ったとしても、「組織(Organization)」の機能は使えない。。


## 勘違いしていたこと

(GCPみたいに) プロジェクトに対して複数のアカウントを設定する。のだと思っていたのだけど、AWSの場合はEメールに紐尽くアカウント毎にプロジェクトが存在し、そのプロジェクトの中にEC2だとかIAMだとかが存在する。

なので、AWSの場合はEメールでログインするアカウント=ルートユーザーという位置づけになり、日常の作業はIAMで作ったEメールで一意に特定されないアカウントでの作業になる

## 起きていたこと

現在本番環境が動いている環境は次の様に作られていた

1. master@test.net でアカウントを作成
2. master@test.net が組織を作成し、その組織に old-root@test.net でアカウントを作成した
3. old-root@test.net アカウントでEC2をはじめとした本番環境を構築した
4. old-root@test.net アカウントのメールは開発責任者がメールを見ることが出来ないので、アカウントのIDを root@test.net に変更した


### 問題点は何だったのか？

本番環境とは別に root@test.net アカウントでサブアカウントを作ろうと「組織」をアクセスしても、次のように表示され、組織のサブアカウントが作成出来ない？となった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42407/09071425-2420-48ff-f858-e51371a91eb6.png)

root@test.net で「組織」機能へのアクセスポリシーを設定したけど、アクセスはできなかった。

## 解決策

組織のアカウントに"OrganizagtionAccountAccessRole"を割り当てる
やり方 → https://docs.aws.amazon.com/organizations/latest/userguide/orgs_manage_accounts_access.html#orgs_manage_accounts_create-cross-account-role

1. マスターアカウントでIAMのコンソールにアクセス
2. ロールを作成→別のAWSアカウント
3. 「このロールを試用できるアカウントを指定する」では、組織にアクセスさせたいアカウント（上の場合はroot@test.net)のアカウントを指定する
4. Attachアクセス権限ポリシー で "AdministratorAccess" を選択し、次のステップに進む
5. タグは特に選択せず、次のステップに進む
6. ロールをOrganizationAccountAccessRoleという名前で作成する
7. ロールの詳細を開いて、ロールARNの値をコピーしておく。また、「コンソールでロールを切り替える事ができるユーザーにこのリンクを知らせます」のURLをコピーする
8. 次に、組織にアクセスしたいアカウントでログインして、IAMコンソールを開き、ポリシーを作成する
9. サービス：STS, Action: AssumeRole
10. リソース ARNの追加で、7のARNの値を（組織マスターのアカウントIDと先ほど作成したロールの名前）入力する。このアカウントIDとロールは「SwitchRole」でも使用するのでどこかに控えておく必要があります
11. で、Eメールでログインするアカウントだと、ロールの切替機能が使えないので、ユーザーを作成して、上のポリシーを割り当てる→グループにポリシーをアタッチして、そのグループにユーザーを指定します
12. IAMでユーザーを作成して、「IAMユーザーのサインインリンク」からログインをすると、右上にロールを切替とでてきます
13. ロール切替を選択すると、アカウントIDとロールの入力が求められるので、10で控えておいたアカウントIDとロールを指定することで、そのアカウントのそのロールでコンソールが使える様になりました！
ラズパイUbuntu Server Focal / Groovyメモ

個人用の備忘録です

# 初回起動前

* SDカードにイメージファイルを書き込む
* Ethernetに繋ぐか、キーボードとディスプレイに繋がないと初回ログインできない。/boot/firmware/network-config とかをいじっても無線でログインできるようにならない
* /boot/firmware/cmdline.txt に systemd.unified_cgroup_hierarchy=1 を追加
* キーボードの配置がUSなので予め `/etc/default/keyboard` を編集しておくべき
* 初回起動前に、スワップパーティションをSDカード末尾に作っておくとよい
* /etc/fstab のマウントオプションに lazytime,async を追加
* /root/.ssh/authorized_keys を設定
* プロキシの設定

```config:/etc/environment
http_proxy=http://192.168.1.2:3128/
https_proxy=http://192.168.1.2:3128/
```

* APT設定

```config:/etc/apt/apt.conf.d/00myconf
APT::Install-Recommends 0;
APT::Get::Purge 1;
APT::Get::Upgrade-Allow-New 1;
APT::Get::AutomaticRemove 1;
```

# 初回起動時作業（最終的な接続方法は無線LANを仮定）

* ユーザー`ubuntu`としてログインしてパスワード設定
* `apt-get purge unattended-upgrades`
* `dpkg-reconfigure tzdata`
* `apt-get install crda language-pack-en`

```config:/etc/wpa_supplicant/wpa_supplicant-wlan0.conf
country=JP

network={
  ssid="YourWifi"
  scan_ssid=1
  key_mgmt=WPA-PSK
  psk="YourPassword"
}
```

```config:/etc/systemd/network/wlan0.network
[Match]
Name=wlan0
[Network]
DHCP=yes
NTP=ntp.nict.jp
```

* 上記のファイルを作ったあとに `systemctl reenable systemd-timesyncd systemd-networkd wpa_supplicant@wlan0` 

* netplanなどを削除 `apt-get --autoremove purge netplan.io networkd-dispatcher`
* 要らないパッケージを削除 `apt-get --autoremove purge cloud-guest-utils cloud-init cloud-initramfs-copymods cloud-initramfs-dyn-netconf cryptsetup cryptsetup-bin cryptsetup-initramfs cryptsetup-run lvm2 lxd-agent-loader plymouth plymouth-theme-ubuntu-text snapd thin-provisioning-tools ufw`
* `apt-get update; apt-get dist-upgrade`

# Groovy の話
* [ダウンロードはこちらから](http://cdimage.ubuntu.com/ubuntu-server/daily-preinstalled/current/HEADER.html)
* [flash-kernelがバグっていてヤバイ](https://bugs.launchpad.net/ubuntu/+source/flash-kernel/+bug/1893491)
[Rust] 子ネタ: 参照で渡された&Vec<T>を変更する

初心者向け。
例えばこんなコードがあったとします。

```rust
struct T(i32);

fn func(v: &Vec<T>) {}

fn main() {
    let v = vec![T(1), T(2), T(3)];
    func(&v)
}
```

ここで、`func()`の中で`v`への要素の追加や削除を行いたいとします。しかし、ここで`v`は参照であるため、そのようなことはできません。
もちろん、以下のように`v`を再束縛してやってもエラーになります。

```rs
struct T(i32);

fn func(v: &Vec<T>) {
    let mut v = v;
    v.remove(0); // Error: `v` is a `&` reference, so the data it refers to cannot be borrowed as mutable
}

fn main() {
    let v = vec![T(1), T(2), T(3)];
    func(&v)
}
```

では、`let mut v = v.clone();`を行って`v`を複製すればいいと思うかもしれません。たしかに、`clone()`関数を実行すれば`&T -> T`の変換ができます。しかし、この例ではそれもエラーになります。なぜなら、`struct T`が`Clone`トレイトを実装していないからです。すなわち、`&Vec<T>`を複製して`Vec<T>`を作ろうとしても、`&T`を`T`として複製できない場合はエラーになるのです。

もちろん、`struct T(i32);`の直前に`#[derive(Clone)]と書けば`T`は`Clone()`可能となり、コンパイルは通ります。以下のように:

```rs
#[derive(Clone)]
struct T(i32);

fn func(v: &Vec<T>) {
    let mut v = v.clone();
    v.remove(0);
}

fn main() {
    let v = vec![T(1), T(2), T(3)];
    func(&v)
}
```

しかし、意図して`T`を複製させたくない場合もあります。この場合、`&Vec<T>`を`Vec<T>`ではなく`Vec<&T>`に変換すれば目的を達成することが出来ます。

```rs
#[derive(Clone)]
struct T(i32);

fn func(v: &Vec<T>) {
    let mut v = v.iter().collect::<Vec<_>>();
    v.remove(0);
}

fn main() {
    let v = vec![T(1), T(2), T(3)];
    func(&v)
}
```

このコードで重要なのは、`v.iter().collect::<Vec<_>>()`の部分です。ここで、`iter()`は`&Vec<T>`を取り、`std::vec::Iter<Item=&T>`を返す関数です。これは`std::slice::Iterator<Item=&T>`トレイトを実装しているため、`&T`を得るイテレータとなっています。これに対し、`collect()`を実行すると、`&T`を要素として持つ`Vec`を得ることが出来ます。

# おわりに

ベクトル加工用のメソッドを作る場合は、`Iterator`を取るようにしたほうがいいと思います。
でも、例えば`Vec`を取って`bool`を返すような関数で、その計算が複雑すぎるために計算中に`Vec`への要素の追加や削除を行いたい場合は、今回の方法が使えると思います。
vue/test-utils で overwriting methods via the `methods` property is deprecated の警告を消す

表題の通り、`@vue/test-utils`で`Deprecated`を由来とするコンソールエラーを非表示にする方法です。

# 環境

- `@vue/test-utils` v1.0.4
- `Vue.js` v2.6.11

# 事象

テスト実行時に下記のようなコンソールエラーが出ます。

```
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in the next major version. There is no clear migration path for the `methods` property - Vue does not support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.
```

どんなテストコードを書いているかというと、下記のようなコードです。

```javascript
    const methods = {
      setUpXXXXX: jest.fn(),
    }

    const computed = {
      user () {
        return {}
      },
    }

    const wrapper = shallowMount(Component, {
      localVue,
      vuetify,
      router,
      stubs,
      methods,
      computed,
    })
```

上記のように、`methods`や`computed`をテストコードから上書きしてモックなどに差し替える方法はVue2.xのテストコードを書く上では便利なのですが、`@vue/test-utils` v1.0.4時点で`Deprecated`となっております。

これは、Vue3以降で`composition-api`に対応するため、これからは`composable`としてこれらの処理は全てまとめて切り出し、単体テストを書く流れになることから、`methods/computed`をVueインスタンスにinjectするようなテスト手法は終りを迎えるという意味だと思っています（これは仮説）。

とはいえ、特に`Nuxt.js`のユーザーの場合は2020年9月現在、まだしばらくはVue2のテストコードを書かなければいけないでしょう。というか僕がそうです（`nuxt-composition-api`のメジャーバージョンが待ち遠しい）。

# 対策

対象のテストファイルの冒頭に下記のコードを差し込めば、`Deprecated`を由来としたコンソールエラーは消えます。

```javascript
import { config } from '@vue/test-utils'

config.showDeprecationWarnings = false
```

よく見たら公式リポジトリにも書いてました。
https://github.com/vuejs/vue-test-utils/blob/869b096253e1af0b6121bd4529fa1adc47fda934/docs/api/config.md

こちらのソースを見ると、`warnDeprecated`の動作自体が上記Configをもとにして判断していたので、Falseにすればいいのだとわかりました。
https://github.com/vuejs/vue-test-utils/blob/39be102165f94897786db3b9db51af09ad419187/packages/shared/util.js

# まとめ

コンソールエラーを汚されると、肝心のコンポーネント読み込み失敗などのWarningが埋もれてしまうので消しました。`showDeprecationWarnings`で`grep`したら今後Vue3への移行時にも対応できると思うので、一時的な対応ではありますがあとでちゃんと移行することを念頭に置いて実装しましょう。
Windows/Office ショートカットまとめ（開始キー別）

よく使うショートカットキーを開始キー別にまとめます。
ソフトによっても機能が違いますので、よく使う部分だけ覚えておきましょう。
（自分比で余り使わない機能は省いてます。重要度も自分比。）

#Ctrl始動
|重要| ショートカット | 機能 |
|:-:|---|---|
|★| Ctrl + A | 全選択  |
|| Ctrl + B | 太字に変更  |
|★| Ctrl + C | コピー  |
|| Ctrl + D | 上のセルのコピー&貼付(EXCEL) / ブックマークの追加(ブラウザ) |
|★| Ctrl + F | 検索フォーム呼出  |
|★| Ctrl + H | 置換フォーム呼出(EXCEL)  |
|| Ctrl + L | アドレスフォームへ移動(ブラウザ)  |
|| Ctrl + N | 新規フォルダを開く(Windows) / 別ウィンドウを開く(ブラウザ)  |
|| Ctrl + O | ファイルを開く  |
|★| Ctrl + P | 印刷フォーム起動  |
|| Ctrl + R | 左のセルをコピー&貼付(EXCEL)  |
|★| Ctrl + S | 保存  |
|| Ctrl + T | テーブル作成フォーム起動(EXCEL)  |
|★| Ctrl + Y | 元に戻した操作を一つ進める  |
|| Ctrl + W | ウィンドウの終了  |
|★| Ctrl + X | 切り取り  |
|★| Ctrl + Z | 一つ操作を戻す  |
||Ctrl + ＋|セル・行・列の挿入(EXCEL)|
||Ctrl + －|セル・行・列の削除(EXCEL)|
|★|Ctrl + Tab|アプリケーション内のページの切替|
||Ctrl + Space|列(縦)の選択(EXCEL)|
||Ctrl + PageUp|次のシートへ移動(EXCEL)|
||Ctrl + PageDown|前のシートへ移動(EXCEL)|
||Ctrl + Alt + Delete|コンピュータ再起動ページへ移動|

#Shift始動
|重要| ショートカット | 機能 |
|:-:|---|---|
|   | Shift + Space  | 行(横)の選択(EXCEL)  |
|   | Shift + マウスでドラッグ  | 範囲選択　※矢印キーでも可  |
||Shift + CapsLock| 大文字 / 小文字切替|
||Shift + Esc|入力文字を変更前に戻す|
||Shift + Delete|ファイル完全削除|



#Alt始動
|重要| ショートカット | 機能 |
|:-:|---|---|
| ★  | Alt + Tab  | アプリケーションの切替  |
|   | Alt + ←  | 前のページ(フォルダ)へ戻る  |
|   | Alt + →  | 戻る前のページ(フォルダ)へ戻る  |
|   | Alt + ↑  | 親フォルダーに移動  |
|   | Alt + Shift + =  | SUM関数呼出(EXCEL)  |
||Alt + PrtScreen|画面コピー(ウィンドウ内) |

#Fキー始動
|重要| ショートカット | 機能 |
|:-:|:-:|:-:|
|   | F1  | ヘルプ表示  |
| ★  | F2  | ファイルなどの名称変更  |
|   | F3  | 検索フォーム呼出(ファイル/ブラウザなど)  |
|   | F4  | アドレスフォームへ移動(ブラウザ)  |
| ★  | F5  | 更新  |
|   | F6  | ひらがなへ変換  |
|   | F7  | カタカナへ変換  |
|   | F8  | 半角カタカナに変換  |
|   | F9  | 全角英数字へ変換  |
|   | F10  | 半角英数字へ変換  |
||F12|名前を付けて保存(EXCEL)|

#その他キー始動
|重要| ショートカット | 機能 |
|:-:|:-:|:-:|
| ★  | Delete  | ファイル削除 / 予測変換キャンセル |
|   | Windows | スタートメニュー表示  |
|   | Windows + D  | デスクトップ表示  |
|   | Windows + E  | マイコンピュータ表示  |
|   | Windows + L  | 画面ロック  |
|   | Windows + ↑  | ウィンドウサイズ変更(大きく)  |
|   | Windows + ↓  | ウィンドウサイズ変更(小さく)  |
|   | Windows + ←  | ウィンドウ左寄せ  |
|   | Windows + →  | ウィンドウ右寄せ  |
|   | PrtScreen  | 画面コピー(全体)  |
||Escape|操作キャンセル|

間違いございましたら、ご指摘ください。
Archlinux 64bit Raspberry pi 4でUSB bootするまで(MBRディスクのみ)

#始めに

Raspberry Pi4でもUSBからブートできるようになり、各種ディストリビューションでも動作するようになってきました。64bit対応のものでもできるようになってきましたが、まだ手順がいろいろあり、一発で動作するようにはなっておりません。特にArchlinuxは32bit版はできるが、64bit版ができない状態でした。やっと[方法の文章](https://archlinuxarm.org/forum/viewtopic.php?t=14672&p=64276)を見つけたので、試したところ、MBRディスク限定ですが成功したので、手順を公開しておきます。

#参考サイト

- [[SOLVED] RPi 4- aarch64 enable USB early in boot process
](https://archlinuxarm.org/forum/viewtopic.php?t=14672&p=64276)
- [Raspberry pi 4とArchlinux 64bitとKVMとqemuでWindows10 WOAを動かす](https://qiita.com/yoshiki9636/items/21d37ac6f6593c880efa)

#準備するもの

- Raspberry Pi 4（USB boot対応済のもの）
- SDカード　16 or 32GB 仮環境の構築
- SSD or HDD 2TB未満のもの( GPT対応不可のため )
- Linux PC　環境作成に使用

#インストラクション

まず、SDカードにArchlinux 64bitの環境をインストールします。linux PCを使い、[こちらの記事](https://qiita.com/yoshiki9636/items/21d37ac6f6593c880efa)に記載されている「Archlinuxのインストール」の部分でインストールを行ってください。インストールが完了したら、同記事の「Raspberry Pi 4の環境設定」のうちのsudoを設定するところまで完了してください。以降、ユーザpiで入り直したところからの手順となります。

まず、ベースの環境をインストールして、ワークディレクトリを作ります。

```
$ sudo pacman -S base-devel
$ mkdir work
$ cd work
```

次にPCなどで、ブラウザで以下のアドレスをアクセスしてください。（SSHなどでPCからraspberry piに接続していることを想定）

https://archlinuxarm.org/packages/armv7h/uboot-raspberrypi/files

ここに出ている5つのテキストファイルを同名でworkディレクトリ内に作成してください。

0001-rpi-increase-space-for-kernel.patch
PKGBUILD
boot.txt.v2
boot.txt.v3
mkscr

多分viなどの画面にコピペすることになりますが、
この時、
0001-rpi-increase-space-for-kernel.patch
は最後空行が必要、それ以外は最後空行はNGとなります。（実行時にエラーとなります。）
次にPKGBUILDを開きます。

```
$ vi PKGBULID
```
以下の変更をします。
(1) pkgnameを uboot-raspberrypi-rc にします。
(2) pkgver を 2020.10rc2 にします。
(3)  md5sums の最初の行のチェックサムを 'bae5280c7ce49961c3722fa9019535bf' にします。

出来上がったら、実行してビルドします。

```
$ makepkg -si
```
ビルドが無事終了すると、最後に出来上がったパッケージをインストールしようとしてエラーで落ちます。なので、手動でインストールします。

```
$ mkdir tmp
$ tar xf uboot-raspberrypi-rc-2020.10rc2-2-aarch64.pkg.tar.xz -C tmp
$ sudo cp tmp/boot/* /boot
```
次にイニシャライズ部分の変更をします。

```
$ sudo vi /etc/mkinitcpio.conf
```
MODULES=()

の行を

MODULES=(pcie_brcmstb)

に変更して、以下を実行します。

```
$ sudo mkinitcpio -P
```

これで、USB boot可能なイメージが出来上がりました。Raspberry pi4はシャットダウンしてください。

このイメージをlinux PCを用いて、SSD/HDDに写し取ります。SDカードイメージには、/bootと/の２つのイメージが入っているため、SDカードと同じ要領でパーティションを作成します。このパーティションにSDカードのパーティション内容をコピーします。コピーするときはrootユーザで実行してください。また、/をコピーするときは、cp -rpとpオプションを指定して、オーナー情報等を保存してください。

これでやっとUSB bootができます。
Raspberry Pi4にSSD/HDDだけを取り付け、電源を入れてください。立ち上がると思います。

Archlinux aarch64版の良いところは、[別記事](https://qiita.com/yoshiki9636/items/21d37ac6f6593c880efa)にもあるように最初からKVMがついており、aarch64のVMを高速に動作させることができることです。そのためには、容量に余裕のあるSSD/HDDで環境構築できるといろいろ良いことがあると思います。よかったら試してみてください。
JavaScriptで使われるライブラリ

```
前提
プログラミング初学者（１〜２ヶ月）の私が学習内容をまとめたものです。
実際の現場では通用しないことや、間違いなど含まれている可能性があります。
お気づきの際はコメントにて指摘していただければ幸いです。
```
JavaScriptを学習している時に目にしたライブラリについてまとめてみました。
使ったことがないため、調べた中での特徴をまとめています。
違う部分や情報が足りないことがあると思いますので詳しい方おられましたら、バシバシ指摘して下さい。
随時修正していきたいと思います。

## jQuery
DOM操作（HTMLの取得や追加、削除など）を短く簡単にかくことができる。
やや下火傾向ではあるが、手軽に扱えるため人気がある。

## Node.js
サーバサイドで動くJavaScript
処理速度が速く、大量のデータ処理に向いている。
リアルタイムでの反応が必要なチャットアプリ開発に用いられている。
Paypal、uber、LinkedInなどのサービスに使われている。

## TypeScript
JavaScriptで型定義ができる
動的型付け言語は定義しなくて良いためプログラムの記述は簡単、
一方で思わぬエラーが起こることも。
静的型付け言語は型を宣言して開発を行うため、事前に起こり得るエラーに対応しやすいというメリットがある。

## React
仮想DOMの概念で、より早い高速なアプリケーション実装が実現できる
AndroidやiOSのネイティブアプリ開発においてReactのフレームワークであるReact Nativeを使うことができる。
柔軟性が高く、人気が増してきている。
**仮想DOM**
DOMはツリー構造でこれを読み取って再現したものが仮想DOM
画面の描画を変更する時、仮想DOMを操作して実際のDOMに反映する方法が使われている。
仮想DOMでDOMを変更すると変更後の描画についてライブラリが最適な形で実現してくれます。このためプログラマーが処理や高速化について考えなくてもよくなる。

## Vue.js
JavaScriptのライブラリとして近年取り入れる現場が増えている人気のライブラリ
React同様仮想DOMの概念があり、冗長な記述を減らし、HTMLやCSSを中心としたwebアプリ開発が可能になる。

## Angular
Angular内にも多くのライブラリがあるため公式の機能だけで十分な開発を行うことができる。
推奨言語にJavaScriptではなく、TypeScriptを採用している
データベースフレームワークMedooの書き方　備忘録

たまたまMedooを使う機会があったので、備忘録として書き方を残しておきます。

<h2>Medooとは</h2>
PHPのデータベースフレームワークです。
（公式サイトは<a href="https://medoo.in/">こちら</a>）




<h2>構造</h2>
私が使った内容がこちらです。配置する順番は以下になります。

```sample.php

select(
  "Account",
   [
     "[><]Shop" => ["Shop" => "id"],
     "[><]Product" => ["Product" => "id"]
   ],
   [
     "Account.Id",
     "Account.Name",
     "Account.Tel",
     "Shop.Id(Shop_id)"
     "Shop.Name(Shop_Name)",
     "Product.Name(Product_Name)"
   ],
   [
      "AND" =>
        [
          "Account.Id" => 1,
          "OR" => [
             "Account.Name[~]" => '田中',
             "Account.Name[~]" => '鈴木'
          ]
        ],
     "GROUP" =>
       [
         "Account.Id"
       ],
     "ORDER" =>
      [
        "Account.CreatedDate" => "DESC"
      ]
   ]
);
```

<h2>書き方</h2>

<h3>１） テーブルをJOINする</h3>

JOINしたいテーブルの文頭にJOIN方法に合わせて以下の内容を付けます。

````sample.php
// [>] == LEFT JOIN
// [<] == RIGH JOIN
// [<>] == FULL JOIN
// [><] == INNER JOIN

select(
  "Account",    
  "[><]Shop" => ["Shop" => "id"]

```

<h3>２） 別名をつける</h3>
SQLで言うところの「AS句」です。
以下の方法でShopテーブルのIdカラムに対して「Shop_id」と言う別名をつけることができます。

```sample.php

[
  "Account.Id",
  "Shop.Id(Shop_id)"
]
```

<h3>３） あいまい検索</h3>

検索対象のカラム名の後ろに[~]を付けます。

```sample.php

 "AND" =>
   [
     "Account.Name[~]" => '田中',
   ],
```


<h3>４） 重複を除く</h3>

SQLで言うところの「distinct」に相当する書き方は現時点ではありません。
色々とやり方はあるかもしれませんが、私はGROUPを使う方法で代替しました。（SQLのGROUP BYと同じ）

```sample.php

"GROUP" =>
  [
    "Account.Id"
  ],
```

<h2>まとめ</h2>
調べてみてもあまり多くの情報が出てきません。
<a href="https://medoo.in/doc">公式ドキュメント</a>を確認するのが一番良さそうです。

そこまで複雑でないSQLであれば、Medooを使ってみても良いかと思います。
【初心者でもわかる】2カラム、3カラム、4カラム、5カラム以上を作る方法

# どうも7noteです。記事一覧などを作る時、カラムで表示する方法

どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/column/
JavaScriptの関数

```
前提
プログラミングを始めたて(1~2ヶ月)の自分が学習した内容をまとめています。
実際の現場では通用しないことや間違いなどあるかもしれません。
お気づきの際はコメントにてご報告いただければ幸いです。
```

## JavaScriptの関数定義
JavaScriptの基本構成の１つで、同じ処理をまとめて定義し、何度も使えるような形にしたものです。
RubyでいうメソッドがJavaScriptでの関数っていうイメージです。
JavaScriptの関数には大きく分けて２つあります。
関数宣言と関数式です。
**注意点**
JavaScriptの関数では戻り値に関してルールがあります。
戻り値はreturnで明示する必要があります。
### 関数宣言
以下で定義されるものを関数宣言といいます。

```
function 関数名(引数){ 処理 }
```

### 関数式
関数名の定義なしで定義すること

```
変数 = function(引数){ 処理 }
```

#### 関数宣言と関数式の違い
読み込まれるタイミングが異なります。
関数宣言は先に読み込まれ、関数式は先に読み込まれない。
例えば、
**関数宣言の場合**

```
good()

function good(){
console.log('good')
}
```
エラーなく以下の出力がされます。

```
good
```

**関数式の場合**

```
good()

const good = function(){
console.log('good')
}
```
以下のようなエラーがでます。

```
Uncaught ReferenceError: good is not defined
    at <anonymous>:1:1
```


以上の結果からも関数宣言は定義した関数が先に読み込まれるため、表示されます。
一方で関数式の場合は定義した関数が先に読み込まれないため、変数が定義されていないというエラーが発生しました。

###関数式には更に３種類ある
関数式にはさらに３種類に分けられます。（これもあくまでざっくりなのでより細かく分けるともっとあります。）
・無名関数
・即時関数
・アロー関数
### 無名関数

```
function(引数){}
```
で記述されている式を無名関数と呼びます。
より簡潔なコードが書けるらしい？です。
下記比べてみました。
**無名関数**

```
const calc = function(num1,num2){
return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
```
**関数宣言**

```
function calc(){
return num1*num2
}

const num1 = 3
const num2 = 4
console.log(calc(num1,num2))
```
この場合だと関数宣言のほうが簡単なような？
簡単すぎる記述ではそこまで差がでないのかと思いました。
また関数名がないって具体的にイメージできなかったので、これから学習を進めてアップデートしたいと思います。

#### 即時関数
関数を定義すると同時に実行される構文
関数を呼び出す手間を省くことができます。

```
(function 関数名() {
console.log(num)
})(1)
```
()の中にfunctionから始まる関数定義をのものを配置することで、その関数を即実行できるようになります。

#### アロー関数
functionの記述を省略し、()=>という記述で関数を定義できる構文
書き比べてみます。

```
// 無名関数
const 変数名 = function(){ 処理 }
// アロー関数
const 変数名 = () => { 処理 }
```

まとめると

|関数定義|構文|特徴|
|------|----|-------|
|関数宣言|function 関数名(引数){処理}|標準的な関数の定義|
|関数式(無名関数)|function(引数){処理}|関数名の重複を避けることができる。関数を多く使用するコードである時に使用する。|
|関数式(即時関数)|(function 関数名(引数){処理})|別途関数を定義する手間がない。流用する可能性のない関数を定義する時に使う。|
|関数式(アロー関数)|(引数) => {処理}|無名関数や即時関数において、より省略した記述をしたい時に使用する。|



### JavaScriptにおけるセミコロンのルール
セミコロン(;)は記述の終わりを示すために付与する。
基本的には省略可ではあるが、開発現場によってルールが様々となっているようです。
セミコロンをつける場合
・変数の定義

```
const name = "Nako";
```
・メソッド

```
console.log(name);
```
・関数式（無名関数）

```
const good = function(){};
```
・関数式（即時関数）

```
(function good(){})();
```
・関数式（アロー関数）

```
const good = () => {};
```
セミコロンをつけない場合
・関数宣言

```
function good(){}
```
・if文

```
if(true){}els{}
```

セミコロンについては開発現場によるということのため、
学習段階ではあまり固定化した考えをもたないほうがよさそうです。

### まとめ
**JavaScriptでの関数の定義は大きく２種類**
・関数宣言と関数式
・２つの大きな違いは読み込まれるタイミングの違い
**セミコロンの有無は開発現場による**