OmniAICreator/Qiita-1.07M huggingface dataset:
GASでDocumentにランダムな画像を挿入する

# GASの練習

1. MyFunction() ... OCRでテキストを取り込んだとき、どうしても色が変わった形になっているので、書式をリセットするもの。
2. 画像を取り込んだり、消去したりするもの。

```js
function insertRandomPicture() {
  const doc = DocumentApp.getActiveDocument();
  let body = doc.getBody();
  let image = UrlFetchApp.fetch("https://picsum.photos/536/354");

  let bodyImage = body.getImages();

  if (bodyImage.length !== 0) {
    bodyImage[0].removeFromParent();
  }
  body.insertImage(0, image);
}
```



## このコードのダメなところ

思いつくままに。

- えっと、まずは…なんだろう、ダメなところ。というより改善できるところなんだけど
- まず、`insert...`のURLかな
- まあ、あとはあれだ
- if の中
- `bodyImage.lenght !== 0`としているけど
- ほんとうはもっとなんかあるはず。if のコードの中が長くてはいけない。
- これはruby脳なのかな。
- `if ( bodyImages.empty? )`を書きたい。
ラビットチャレンジ - 応用数学 第3章 情報理論

# 0．概要
本記事は日本ディープラーニング協会認定の講座プログラムである「ラビット・チャレンジ」が提供している科目の1つである応用数学のレポートである。
記事タイトルに記載のとおり、第3章の情報理論について以下にまとめる。

# 1．自己情報量
ある事象$x$の発生確率が$P(x)$である時の情報量のこと。
$W(x)$：事象が起きた時、それが$x$である数みたいなもの

発生確率が低い方(珍しい)が情報量が多い。
また、情報量は加法性がある。

```math
I(x)=-log(P(x))=log(W(x))
```

$P(x)$と$W(x)$は逆数の関係にある。

```math
W(x)=\frac{1}{P(x)}
```

情報量の式で$log(P(x))$にマイナスがついているのは$log$は中の値を反転させると符号も反転するため。

例）1～40の選択肢があるうち、あたりが1つあるとすると、1～20までにあたりがある(確率1/2)より1～10までにあたりがある(確率1/4)にあたりがあるという情報の方が情報量が多い(選択肢をより絞れる)。

対数の底が2の場合、単位はビット(bit)。
対数の底が10(常用対数)の場合、単位はディット(dit)。
対数の底がネイピア数(自然対数)の場合、単位はナット(nat)。

# 2．シャノンエントロピー
自己情報量の期待値(情報の珍しさの平均)。
事象$x$の平均情報量。

予測できなさ、不確定さとも言える。
例）コイントスの場合、表ばかり出る、裏ばかり出るよりも表裏が大体同じくらい出る(次どっちでるか分からない)方がこのシャノンエントロピーは大きくなる。

```math
H(x)=E(I(x))
```

```math
H(x)=-E(log(P(x)))
```

```math
H(x)=-\sum{(P(x)log(P(x)))}
```

# 3．カルバック・ライブラー ダイバージェンス(KLダイバージェンス)
同じ事象・確率変数における異なる確率分布$P,Q$がどれだけ似ているか、違うか。

KL情報量、KL距離とも呼ぶ。
確率$P$、確率$Q$の確率分布がどれだけ近いか、どれだけ遠いか距離のように表す。
確率$Q$だったと思ってたら確率$P$だと判明した時、どれくらい違うか。
そのためPからQ、QからPで見た時、値が変わる。

```math
D_{KL}(P\parallel{Q})
=E_{x～P}\left[log\frac{P(x)}{Q(x)}\right]
=E_{x～P}[logP(x)-logQ(x)]
```

```math
I(Q(x))-I(P(x))=(-log(Q(x)))-(-log(P(x)))=log\frac{P(x)}{Q(x)}
```

```math
D_{KL}(P\parallel{Q})=\sum_{x}{P(x)(-log(Q(x)))-(-log(P(x)))}=\sum_{x}{P(x)\frac{P(x)}{Q(x)}}
```

KLダイバージェンスはマイナスにならない。
また、PとQが同じ場合は0となる。

# 4．交差エントロピー
KLダイバージェンスの一部を取り出したものでQについての自己情報量をPの分布で平均したもの。
$H$：シャノンエントロピー

```math
H(P,Q)=H(P)+D_{KL}(P\parallel{Q})
```

Kerasで2択の分類問題やる時に損失関数で指定していたbinary_crossentropyがこれってことですね。
予測値の$P$が正解の$Q$とどれだけ違うか(正解から遠いか)を表し、これによって正解なのか不正解なのか、どのクラスに分類されるのかが決まる。

# X．ラビットチャレンジとは
ラビットチャレンジとは、日本ディープラーニング協会認定の講座プログラムの1つ。
E資格を受験するためにはこのラビットチャレンジ等、いずれかの講座プログラムを修了しなければならない。

ラビットチャレンジの特徴は「現場で潰しが効くディープラーニング講座」の通学講座録画ビデオを編集した教材を使用した自習スタイルであるという点。
サポートは他の講座より少なく、受け身ではなく自主的に学んでいく姿勢でなければ進められないが、その分、他の講座に比べると安価であり、手が出しやすい。
ある程度知識がある人、自力で頑張るぞというガッツのある人向けではないかと感じる。

![bnr_jdla.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/389699/bce66671-a2f5-a7f9-de6f-3f87e15c253b.png)
Pytorchで新しくRNNを作るには？

研究でRNNを使う時に，デフォルトのtorch.nn.RNN()等を使うのではなくて，
自作したRNNを使用したいと思っていたのですが，やり方に結構悩んだので，備忘録的にまとめておきます．

今回扱うのはデフォルトのRNNCellやLSTM，GRUなどを使ってモデルを組む段階の話ではなく，
RNNCellそのものを自作したり，内部のリンクを変更したいと思った時にどうすればいいかというお話です．

結論から言ってしまえば，nn.Moduleを継承してRNNのクラスを作るだけでした．
※ゼロから作るDeep Learning 3 のp.475~477がとても参考になりました．
部分的なコードは以下のような感じです．

```python
import torch
import torch.nn as nn

class RNNCell(nn.Module):
  def __init__(self,n_in,n_hid):
    super(RNNCell,self).__init__()
    self.i2h=nn.Linear(n_in,n_hid)
    self.h2h=nn.Linear(n_hid,n_hid)
    self.h=None

  def reset_state(self):
    self.h=None

  def forward(self,x):
    if self.h is None:
      h_new=self.i2h(x)
    else:
      h_new=self.i2h(x)+self.h2h(torch.tanh(self.h))
    self.h=h_new
    h_out=torch.tanh(h_new)
    h_out=h_out.detach()

    return h_out
```
ちなみに上のコードのh_newは隠れ状態ではありません．
その一歩手前の（tanhに通す前の）内部状態を表しています．
また，outputのリンク部分は実際に回すモデルの方（RNNCellを使ってモデルを作る時に）で指定してます．

後は好きなように
h_new=self.i2h(x)+self.h2h(torch.tanh(self.h))
の部分などを変更すれば，任意のRNNが作れるはずです．
【ruby】splitメソッドで、文字列から配列にしたい。逆も然り。

文字列を配列化させて、配列を文字列にして、、、というパターンの時に、どういう書き方が期待する値になってくれるでしょうか。

ということで、ダメなパターンも交えて、整理していきましょう！

#文字列を配列にする

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

**split 英訳：分断する**
つまり、まとまりのあるもの(文字列等)を分断させて、要素とさせるメソッドになります。(配列化)
引数は、*切り取る部分の境目を指定するイメージになります*

様々なまとまりのパターンから、配列化をしてみました。
させたい配列は、`["foo", "bar", "baz"]`とします。

さて、どの書き方が合っているでしょうか。

```ruby
# 配列化                       # 返り値
"foo bar baz".split           ["foo", "bar", "baz"]  # ○
"foo bar baz".split('')	      ["f", "o", "o", " ", "b", "a", "r", " ", "b", "a", "z"]
"foo bar baz".split(',')      ["foo bar baz"]

"foobarbaz".split             ["foobarbaz"]
"foobarbaz".split('')         ["f", "o", "o", "b", "a", "r", "b", "a", "z"]
"foobarbaz".split(',')        ["foobarbaz"]
"fooxbarxbaz".split('x')      ["foo", "bar", "baz"]  # ○

"foo, bar, baz".split         ["foo,", "bar,", "baz"]
"foo, bar, baz".split('')     ["f", "o", "o", ",", " ", "b", "a", "r", ",", " ", "b", "a", "z"]
"foo, bar, baz".split(',')    ["foo", " bar", " baz"]

"foo,bar,baz".split           ["foo,bar,baz"]
"foo,bar,baz".split('')       ["f", "o", "o", ",", "b", "a", "r", ",", "b", "a", "z"]
"foo,bar,baz".split(',')      ["foo", "bar", "baz"]  # ○

%w[foo bar baz]               ["foo", "bar", "baz"]  # ○
```

この中から、期待する配列になる書き方は、*4通り*ということになります。


#配列から、文字列にしたい

`joinメソッド`を使っていきます。
引数に、*要素と要素の間に差し込む値を入れていくイメージになります*。

```ruby
# 文字列化                           # 返り値
["foo", "bar", "baz"].join        "foobarbaz"
["foo", "bar", "baz"].join('')    "foobarbaz"
["foo", "bar", "baz"].join(',')	  "foo, bar, baz"
```


#おまけ 範囲を配列化

```ruby
# 範囲を配列化                #戻り値
(0..9).to_a                 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
('a'..'z').to_a             ["a",..,"z"]
(1..5).map{ |i| i**2 )      [0, 1, 4, 9, 16, 25, 36, 49, 64, 81]
```
DiscordのSimplePollっぽいやつをスクラッチ実装しようとしたら手間取った


**（2020/09/09　一部追記）**
**（2020/09/14　一部再追記）**

https://top.gg/bot/simplepoll

↑こういうのを導入しようという話がありましたが、敢えて他にbotを入れるよりも自前のPython botで作った方が早そう＆メンテしやすそうだったのでしました

# 手間取ったポイント

- 「自分がしたばかりの発言」にリアクションをつける方法
- リアクション絵文字の指定

# コード

```python
#poll
@bot.command()
async def poll(ctx, *args):
    text = "**{}**".format(args[0])
    n = len(args)-1
    if(n == 0):
        await ctx.send("ないようがないよう")
        return
    if(n > 20):
        await ctx.send("ないようがありすぎるよう")
        return
    chars = "abcdefghijklmnopqrstuvwxyz"
    desc = ""
    for i in range(n):
        desc += ":regional_indicator_{}:{}\n".format(chars[i],args[i+1])
    embed = discord.Embed(description=desc)
    message = await ctx.send(text,embed=embed)
    emoji = "🇦🇧🇨🇩🇪🇫🇬🇭🇮🇯🇰🇱🇲🇳🇴🇵🇶🇷🇸🇹🇺🇻🇼🇽🇾🇿"
    for i in range(n):
        await message.add_reaction(emoji[i])
```

# 手間取ったポイント1

- 「自分がしたばかりの発言」にリアクションをつける方法

　`ctx.message`でコマンドのきっかけとなったメッセージオブジェクトは拾えますが、`crx.send`で送ったbot自身の発言のメッセージにリアクションで投票ボタンをつける必要があるので、それは別に取得する必要があります。

　最初は、https://discordpy.readthedocs.io/ja/latest/api.html#discord.TextChannel.last_message_id `last_message_id`でIDを取得し、https://discordpy.readthedocs.io/ja/latest/api.html#discord.TextChannel.fetch_message `fetch_message`でなんとかなるかと思いましたが、これで得られた`message`オブジェクトがなんか違うものだったらしく、`add_reaction`の属性なしと言われて失敗。

　~~結論的にはhttps://discordpy.readthedocs.io/ja/latest/api.html#discord.TextChannel.last_message `last_message`という属性でメッセージオブジェクトがそのまま取得できたのでそれで敢行。これだと任意のメッセージIDから取得することはできないですが、今回はそこまで必要なかったのであきらめました。ちょっと時間差があるらしく、`add_reaction`の直前にしないと一つ前のメッセージにリアクションをつけてしまうことがありました。~~

**（2020/09/09追記）** ~~`fetch_message`のコマンドの前に`await`をつけると上手くいきました。~~

**（2020/09/14再追記）** `await ctx.send`が送信したメッセージのオブジェクトを返してくれるようで、わわざわざ`last_message_id`から拾う必要がありませんでした。@coolwind0202さんご指摘ありがとうございました。


# 手間取ったポイント2

　公式リファレンス　→　https://discordpy.readthedocs.io/ja/latest/faq.html

　テキストであれば、普段discordで打ってるように`:hogehoge:`と打てばそのまま絵文字になってくれますが、リアクションだとそうはいかないようです。Unicode絵文字をそのまま打ったり、`{THUMBS UP SIGN}`等のキーワード（Discord内のそれとは別）が必要なようです。
　
　また、今回わかったこととして、サーバー独自の絵文字と、デフォルトの絵文字では方法が異なるということです。

# サーバー独自の絵文字の場合

　サーバーのIDを指定して、絵文字の名前で検索する必要があります。

```python
guild = bot.get_guild('ここにサーバーのID')
emoji = discord.utils.get(guild.emojis, name='ここに絵文字のDiscordでの呼び方')
if emoji:
    await message.add_reaction(emoji)
```

　また、Discordのチャットで`\:hogehoge:`などと発言するとIDを表示してくれるので、ID直打ちも可です。そんな手間は変わらないですが。サーバーIDが分からなければ、開発者モードを有効にしてサーバーアイコンを右クリックすると得られます。

　上のコードの`bot`は、参考にしたコードによっては`client`になっているかもしれません。いずれにせよ、最初に指定した変数名と一致させる必要があります。

# Unicodeにデフォルトで入っている絵文字の場合

　こっちの方がめんどくさかったです。この場合はコード内でそのままUnicode絵文字が使えるので、`emoji='😩'`というような形で指定することができます。しかし、これのA,B,C……はどうやって打てばよいでしょうか？　Discord内では`:regional_indicator_a:`等で出力できますが、これはあくまでDiscord内の呼び名であり、例えば上のコードで`emoji = discord.utils.get(guild.emojis, name='regional_indicator_a')`とやってもAの**絵文字は出てきません**。コピペしても`:regional_code_a:`という**テキストがコピー**されて絵文字にはなりません。なんだこの制御。

　結論的にいうと、`:regional_indicator_a:`を`\`でリテラル表示してそれをコピーして文字列を作りました。26文字……。それが🇦🇧🇨🇩🇪🇫🇬🇭🇮🇯🇰🇱🇲🇳🇴🇵🇶🇷🇸🇹🇺🇻🇼🇽🇾🇿という文字列です。これがUnicode上でどういう位置づけになって、皆様のOS上でどのように表示されているかは分かりませんが、めんどくさかった……。
J 言語なら 40 byte で FizzBuzz できる

[J言語でFizzBuzzを作る](https://qiita.com/Raclamusi/items/237a447ddd2dfc1a03bb) という記事でコメントしながら、もっと短く書ける方法を思いついたので紹介します。

# FizzBuzz (40 byte)

```j
echo@(, ::]Fizz`Buzz;@#~0=3 5&|)@>:i.100
```

ちょっと読みにくいですね(~~J 言語のシンタックスハイライト欲しい~~)。適宜空白を入れてみましょう。

```j
echo@(, ::] Fizz`Buzz ;@#~ 0 = 3 5&|)@>: i.100
```

~~あまり変わらないので~~ 優先順位を考慮して括弧を入れます。

```j
((echo @ ((, :: ]) ((Fizz ` Buzz) ((; @ #) ~) (0 = (3 5 & |))))) @ >:) (i. 100)
```

余計に読みにくくなってしまいました。とりあえず分解して解説します。

```j
fizzbuzz=. , ::] (Fizz`Buzz ;@#~ 0 = 3 5&|)
echo@fizzbuzz@>: i.100
```

# 解説

```j
echo@fizzbuzz@>: i.100
```

**`i.100`**
0 から 99 までの整数のリストです。

**`echo@fizzbuzz@>:`**
それぞれの整数を、インクリメント→変換→出力 します。`@`を使っているのは途中で結果が集められるのを防ぐためです。

---

```j
fizzbuzz=. , ::] (Fizz`Buzz ;@#~ 0 = 3 5&|)
```

**`3 5&|`**
引数を (3 で割った余り , 5 で割った余り) のリストを作ります。`&` は、引数を部分適用します。

**`0 = 3 5&|`**
(3 で割り切れるか , 5 で割り切れるか) のリストを返すフォークです。

**``Fizz`Buzz``**
`('Fizz' ; 'Buzz')` と同じで、ボックスのリストです。文字数削減のために `` ` `` を~~悪用~~使用しています。

**`;@#~`**
`~` は、右辺と左辺を入れ替える役割をしています。
`(0 = 3 5&|) ;@# ('Fizz' ; 'Buzz')"_` と同じ結果になります。
`#` は、リストをフィルターするのに使っています。
3 で割り切れるときは `<'Fizz'` が、5 で割り切れるときは `<'Buzz'` が残ります。
最後に `;` でボックスを開いて連結します。結果は `'Fizz'` , `'Buzz'` , `'FizzBuzz'` , 空文字列 のいずれかになります。

**`, ::]`**
`::` は、conjunction (接続詞)の一種で、`,` がエラーになれば代わりに `]` が実行されます。

**``, ::] (Fizz`Buzz ;@#~ 0 = 3 5&|)``**
これはフックで、`, ::]` の引数は、左辺が元の整数、右辺が上で計算した文字列になります。
文字列が空の場合、`,` は正常に左辺の整数を要素に持つリストを返します。
そうでない場合、domain error が発生して、代わりに `]` が右辺の文字列を返します。
この結果が最終的に `echo` に渡されます。

---

コードで表現すると ↓ のようになります(この方が分かりやすいかもしれません)。

```j
isDevisibleBy3_5=. 0 = 3 5&|

boxedFizzBuzz=. Fizz`Buzz

filterAndJoin=. ;@#

replaceEmpty=. , ::]

fizzbuzz=. replaceEmpty (boxedFizzBuzz filterAndJoin~ isDevisibleBy3_5)

echo@fizzbuzz@>: i.100
```

# 参考

[NuVoc](https://code.jsoftware.com/wiki/NuVoc)
↑ とりあえず分からないときはこれで調べるといいと思います。
プリミティブの一覧の他に Ancillary Pages が結構役に立ちます。

---

日本語の情報が少ない or 古いので、いつか J 言語の~~布教~~入門記事を書きたいと思います(実行するかどうかは別)。
ReactNative for Web（Expo web）でアプリリリースしてみた

始めまして。私は、Interchaoという英語学習アプリを作成しています。このアプリはReact Nativeで作成しており、AndroidとIOSの両方をリリースしております。

Interchaoには「日記を書く」という機能があるので、やはりスマホアプリだけでは辛いということで、Web化に踏み切りました。

先日無事リリースができたので、変更点を中心にまとめていきます。

# 環境
Expo 37
react navigation version 4

## Sentry
sentry-expoはWebだと使えません。@sentry/browserをインストーして使いましょう。

## Modal
react-native-modalは使えません。modal-enhanced-react-native-webを代わりに使いました。

## SwipeablePanel
rn-swipeable-panelのversion1.0.20だと動きませんでした。1.2.0にあげたら動くようになりました。

### Alert
react nativeのAlertはWebでは使えません。私は全てmodal-enhanced-react-native-webで書き直しました。

## TextInput
TextInputは色々厄介でした。

### ①autoが使えない
web + スマホだとautoが指定できません。

### ②heightの自動調整ができない
multilineの時、ネイティブアプリだと自動でTextInputの高さを調整してくれるのですが、webではTextInputが大きくなりません。`style={{height: 100}}`のように、heightを数字で直接指定ればいけるのですが、可変のところはこれでは厳しい。
そんな時は下記コードでいけます。

```
const [scrollHeight, setScrollHeight] = useState(null);
const handleFocus = (e: any): void => {
    setScrollHeight(e.target.scrollHeight);
  };
const handleChange = (e: any): void => {
    setScrollHeight(e.target.scrollHeight);
  };

<TextInput
    ...中略
    style={[styles.textInput, { height: scrollHeight }]}
    onFocus={handleFocus}
    onChange={handleChange}
/>
```

### ③onEndEditingが使えない
onEndEditingの挙動がおかしかったです。onBlurに全て書き換えました。

## Updates
OTAアップデートは、できません（当たり前ですが。笑）
ここはif文で飛ばしましょう。

## Share
Shareが使えません。InterchaoではTwitterとFacebookにシェアする機能を実装したい。なので、Shareライブラリは諦めて、直接作りました。

## Amplitude
Amplitudeが使えませんでした。これは諦めました。

# デザイン関連
スマホ、PC、Web、Android、Iosそれぞれにおいてデザインを作り分けなければいけません。
作りたいのは下記４つ。

①Web & PC
②Web & スマホ（タブレット）
③Nativeアプリ & Android
④Nativeアプリ & iOS

既に③④はできているので、今回新たに①と②を対応しました。
①は新デザインにしました。②はスマホアプリと全く同じデザインにしました。

### WebとPCでファイルごと書き換える方法
`AAA.native.tsx`
`AAA.web.tsx`


### ファイル内で細かく分ける時

Webかどうかのジャッチ（①または②）は下記でできます。
`Platform.OS === "web"`

①or②のジャッチはreact-responsiveを使います。ソースはこれでいけます。  

```
const isTabletOrMobileDevice = useMediaQuery({
   maxDeviceWidth: 1224,
});
```

## Tab
一番大きな変更はタブの構成。createBottomTabNavigatorをIntechaoでは使っています。

スマホの時は下に

![IMG_4008.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240827/179daf09-a274-6112-eed4-193810d4f529.png)

が、PCの時は横によせています。
![スクリーンショット 2020-08-30 7.33.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240827/27879545-5143-f088-f6f9-6e344d9832c0.png)

これはcreateBottomTabNavigatorの変数をいじる。みたい簡単なものじゃできませんでした。なんかできそうなのに。。。

詳細はここ参考にして作りました。有料サイトですが、自分でこの方法思いつくよりはみた方がいいかと。
https://medium.com/@bruno.eduardo.do/creating-a-custom-side-tab-navigator-with-react-navigation-28304b83e865

### まとめ
トータルで丸7日でInterchaoはWeb化できました。全画面試験しなすので、規模が大きいアプリだと結構大変かと思います。ただ、Reactで全部作り直すよりは圧倒的に早いです。

React Native for webはとにかく情報が少ないので、これから積極的にブログ書いていこうと思います！！

ここから必要な作業は、
・metaタグ書く
・next.js化する（必須ではないが私はやる）
・pathを設定していく

ここについてはこれからやっていくので、終わり次第まとめていきます。

作ったサイトはこちらです。
https://interchao.app/
Xcode12 beta で Carthageビルド失敗の対策

# 対策内容まとめ
## xcconfigファイルを作成

```
vim cathage-helper.xcconfig
```


```swift:xcconfig
EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64=arm64 arm64e armv7 armv7s armv6 armv8
EXCLUDED_ARCHS=$(inherited) $(EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_$(EFFECTIVE_PLATFORM_SUFFIX)__NATIVE_ARCH_64_BIT_$(NATIVE_ARCH_64_BIT))
```

## 環境変数を設定
```
export XCODE_XCCONFIG_FILE=/Users/ichinosehiroto/Documents/dev/kidsline/kidsline_ios/carthage-helper.xcconfig 
```

## ビルドする

```
carthage update --platform iOS --no-use-binaries --cache-builds
```

[参考元Github](https://github.com/Carthage/Carthage/issues/3019#issuecomment-664099506)
[Flutter] Modal bottom sheet内でPush, Popの画面遷移を実現する

FlutterでBottom sheet内で画面遷移を実装しようとすると意外と手こずります。

`showModalBottomSheet`して、Bottom sheet内で`Navigator.push`などしてもpush先の詳細画面がモーダル内で表示されないためです。

![before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30423/30f554bf-5806-7c82-a17d-66928c8e350d.gif)


## モーダル内で画面遷移を実現する
モーダル内で画面遷移を実現するポイントは2点です。

1. Navigatorをネストさせる
2. 画面を閉じるときはroot側のNavigatorを参照する

### 1. Navigatorをネストさせる
通常はMaterialAppが保持するNavigatorが、RootのNavigatorとして機能しています。それに加えモーダル用の自前Navigatorを作成することで、モーダル内の画面遷移が実現できます。

具体的なコードは下記です。
Navigatorでモーダルのページを包んで、`onGenerateRoute`でルートを定義します。

※ [Navigatorクラスの](https://api.flutter.dev/flutter/widgets/Navigator-class.html) "Nesting Navigators"の章を参照

``` dart
child: RaisedButton(
  color: Colors.blue,
  textColor: Colors.white,
  onPressed: () => showModalBottomSheet(
    context: context,
    // 自前でモーダル用Navigatorを作成
    builder: (context) => Navigator(
      onGenerateRoute: (context) => MaterialPageRoute<ModalPage>(
        builder: (context) => ModalPage(),
      ),
    ),
  ),
  child: Text('Show modal'),
),
```

### 2. 画面を閉じるときはroot側のNavigatorを参照する
1.の対応をするとモーダル内での画面遷移はうまくいきますが、`X`ボタンなどでモーダルを閉じるときに下のような挙動になり、うまく閉じません

![after1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30423/4b43e324-531c-7fe3-034e-3bf3f867072e.gif)

これは1.の対応をした際、Routeがネストされた構造になっているからです。ネストした子のRoute側で`pop`するのでモーダルが残ったままになります

これは、`Navigator.of(context, rootNavigator: true)` でRootのNavigatorを指定することで解決できます

```dart
return Scaffold(
  appBar: AppBar(
    leading: IconButton(
        // 閉じるときはネストしているModal内のRouteではなく、root側のNavigatorを指定する必要がある
        onPressed: () => Navigator.of(context, rootNavigator: true).pop(),
        icon: Icon(Icons.close)),
    title: Text('Modal'),
  ),
```

## 完成 :tada:
![complete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30423/1c5b2f90-866d-92eb-4ea9-c42e46aa25ce.gif)


#### おまけ
触って動かせるDemoをDartPadに置いておいたので、ご活用ください
https://dartpad.dartlang.org/65afaedbe5016c4d5c4f20549c575e55
機械学習についてまとめ（その２）

前回（勉強方法、機械学習についての概要）の続き
→ [機械学習についてまとめ（その１）](https://qiita.com/mk3mk/items/34eb43ba6e196b0a22b0)
今回は、教師あり学習の回帰についてまとめる。

# 回帰
### 概要
入力（説明変数）に対して連続値をとる出力（目的変数）を予測すること、つまり、$Y = f(X)$の関係を導き出すことを**回帰**という。
因みに、X が1次元ならば**単回帰**、X が2次元以上ならば**重回帰**という。

### 解説
A君は、学校で小テストがある前日はテスト範囲の復習を行うようにしている。
ある日、お母さんが100点をとれたらご褒美をくれるというので、A君はこれまでの傾向からどのくらい復習に時間を割けば100点がとれるかを予測した。

今回は、「得点」を「復習時間」の1変数（1次元）から予測するので単回帰となる。
グラフで表すと以下の通り。
![その２_図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696527/83b13428-2a94-0311-eb62-b415700bcee5.png)
予測値の「得点」を $\hat{y}$、「復習時間」を $x$ とした場合、今回の単回帰モデルを以下の式で表すことが出来る。

```math
\hat{y} = w_0 + w_1x
```

$ w_0 $ は**バイアス**、$w_1$ は**重み**といい、このパラメータを連続するデータに適した値に調整することで、予測値 $\hat{y}$ を取得することが出来る。この関数を**仮説関数**という。

#### 最小二乗法
仮説関数がデータにどのくらいフィットしているかを確認するために、**最小二乗法**という**目的関数**を導入する。
最小二乗法は、実測値 $y$ と予測値 $\hat{y}$ がどれくらいずれているかを、差の二乗で計算し全データ数分を足して平均をとっている。

```math
E(w) = \frac{1}{2} \displaystyle \sum_{ i = 1 }^{ N } (y_i - \hat{y_i})^2
```

![その2_図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696527/dcdf3f22-39ae-5eb9-290e-ec0ebd1d1054.png)
つまり、目的関数 $E(w)$ が限りなく0に近くなるように（＝予測値と実績値に誤差がなくなるように）パラメータ $ w_0 $ $w_1$ を調整させていけばよいということになる。

#### 最急降下法 
目的関数 $E(w)$を最小とするように、パラメータ $ w_0 $ $w_1$を求める方法として、**最急降下法**がある。
最急降下法とは、関数の傾きから最小値を探索する勾配法のアルゴリズムの1つで、以下の式で表される。

```math
w_j = w_j-α\frac{∂}{∂w_j}E(w)
```

2次関数のグラフを使って説明すると、$E(w)$の初期値を赤色地点、最小値を青色地点とすると、接線の傾き$\frac{∂}{∂w_j}E(w)$と逆方向へずらし（$w_j$から傾きを引く）、傾きが十分に小さくなるまで繰り返すことで、赤色地点から青色地点へと点が移動し、最小値が求められる。
![その2_図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696527/9b7a5a0b-60a9-d725-041f-53863e167fff.png)
また、$α$ は**学習率**といい、重みを一度にどの程度変更するかを決める**ハイパーパラメータ**である。
学習率を大きくしすぎると発散してしまい、逆に小さくしすぎると収束に時間がかかるため、ハイパーパラメータの調整がエンジニアの腕の見せ所だったりする。

# 次回
次回は、教師あり学習の分類についてまとめる。
→ 機械学習についてまとめ（その３）
wslで.lnkの参照先フルパスを取得

# インストール (lnkinfo)
```
$ sudo apt install -y liblnk-utils
```

# 実行
```
$ wslpath -a $(lnkinfo /path/to/src.lnk | grep 'Local path' | sed 's/.*: //')
/mnt/c/path/to/dst
```
機械学習についてまとめ（その１）

# はじめに
### きっかけ
新型コロナウィルスが蔓延したことで、自宅に閉じこもる時間が多くなり、「新しいことを勉強する良い機会かぁ・・」と思い、機械学習の勉強を開始した。
勉強開始からしばらく経つため、復習がてら内容について簡単にまとめてみた。

### 勉強方法
- Coursera（機械学習コース）の受講
「何から始めればよいか・・」と思いググってみると、[Coursera（機械学習コース）](https://www.coursera.org/learn/machine-learning)が好評で、無料ということもあり受講してみた。
機械学習のアルゴリズムの理解には、微分/積分、線形代数などの数学の知識が必要となるが、本コースは、その辺が丁寧に解説されているので、数学が苦手な人に特におすすめ。
※講師はスタンフォード大学の教授なので全て英語だが、字幕つけれる。

- youtubeの視聴
数学的理論なんかはyoutubeで分かりやすく解説されている。文書を読むことに疲れた人、動画で勉強したい人におすすめ。
[予備校のノリで学ぶ「大学の数学・物理」](https://www.youtube.com/channel/UCqmWJJolqAgjIdLqK3zD1QQ)が幅広くカバーされているのと分かりやすいので個人的におすすめ。

- 参考書を読む
何冊か読みました。好き嫌いがあると思うので書店で自分に合ったやつを探してください。

# 機械学習
### 機械学習とは？
機械に大量の情報（データ）から、そこに潜むパターンを覚えさせ（学習）、未知のルール（モデル）を獲得させる技術のこと。
人間には複雑すぎたり、認識していないことでルールを設定できない課題を解決するアプローチが機械学習といえる。
因みに、定義としては、AI（人工知能） > 機械学習 > ディープラーニングであり、AI（人工知能）技術が内包する分野のひとつであるため注意。

### 機械学習の分類（教師あり学習・教師なし学習・強化学習）
機械学習は以下の3つに分類される。

- 教師あり学習
正解付きのデータセットを機械に学習させることで、未知のデータの正解を予測する学習方法。
例えば、犬と猫の画像とその正解を機械に学習をさせることで、未知の犬と猫の画像の正解を予測する**分類**、他にも、過去の店舗の売上と入店者数や天気といった情報を機械に学習させることで、売上のパターンをつかみ、未来の店舗の売上を予測する**回帰**が、教師あり学習の代表的な手法に挙げられる。

- 教師なし学習
正解がないデータを機械に学習させることで、類似したデータをグルーピングしたり、仲間外れのデータを検知する学習方法。
例えば、ラベリングされていない大量の記事を「政治」「経済」「エンタメ」「スポーツ」といったジャンルごとに自動でグループ分けをする**クラスタリング**が、教師なし学習の代表的な手法に挙げられる。

- 強化学習
機械に試行錯誤させることで、目的達成のための最適なルールを構築する学習方法。
迷路を例とすると、各地点ごとで上下左右の選択肢が存在するが、各地点、各選択肢に対する報酬（選択肢の良さ）が最大化するように繰り返し学習をさせることで、ゴールに対する最短経路を導き出す。

# 次回
次回は、教師あり学習の回帰についてまとめる。
→ [機械学習についてまとめ（その２）](https://qiita.com/mk3mk/items/9142c2ccda1e212a25af)
VBAで最終行を取得する

#VBAで最終行を取得する
範囲指定や入力セルの指定には、対象の列の最終行番号を取得して使用します。

###最終行を取得
```
Sub 最終行を取得()
    Dim LastRow As Long
    LastRow = ThisWorkbook.Worksheets("Sheet1").Cells(Rows.Count, 1).End(xlUp).Row
    Debug.Print LastRow
End Sub
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/b8d5680b-34b4-9466-6cbe-22d35f1675ec.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/77885dbf-d53c-cb7a-a331-4832991dd138.png)

###最終行のひとつ下から入力させたい場合は
```
Sub 最終行を取得してひとつ下に値を入力()
    Dim LastRow As Long
    LastRow = ThisWorkbook.Worksheets("Sheet1").Cells(Rows.Count, 1).End(xlUp).Row
    ThisWorkbook.Worksheets("Sheet1").Cells(LastRow + 1, 1).Value = 10
    ThisWorkbook.Worksheets("Sheet1").Cells(LastRow + 1, 2).Value = "jjj"
End Sub
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700414/20381345-afa0-8a7c-5205-65163c4fb315.png)

###ワタシ流こだわり
__ThisWorkbook.Worksheets("Sheet1")__　や__シートオブジェクト名__は絶対つける:point_up:
A2019開発者はJava FXパッケージを落とすべし

#前回の記事で野良パッケージ？と書いたJava FXパッケージ

Bot Storeにありました。
特にBot開発時に使い勝手良いので、是非入れてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/a87eb499-73c5-900e-1a84-b71147911d72.png)

##パッケージの中身
中身はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/8f6386dd-37e3-6c1f-9528-f78740f31576.png)

特に私が気に入っているのは、Show Dictionary / Show List / Show Record / Show Table。
開発中にWebサービスから戻ってきたり、ファイルから読み込んだデータを確認することが出来ます。


##利用例
例えば、三菱UFJ銀行のWebサイトの為替データをRecorderでキャプチャし、テーブルとして取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/c079f9f2-fdd9-254c-ae4e-57b081338cf5.png)


ここで、Show Tableを使うことで、実際にどのような形でデータが格納されているかを確認することが出来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/ccfe4556-5382-c385-08cc-accf9c7b9ed3.png)

##他にも・・・

例えば、前回の記事で使った通貨変換パッケージ。
デモのファイルを見れば書いてありますが、ただ単にタスクで呼び出す処理を書いたときに、ディクショナリが戻ってくることは分かりますが、データを取り出すキーが分かりません。
そんなときに、Show Dictionaryを使うことでキーも値も確認できます。

他には、IQ Bot Advancedというカスタムパッケージを使うとIQ Botの処理状況をクエリーすることが出来るのですが、
戻りがディクショナリ形式になっていて、多くの情報が含まれますので、どんなキーが含まれているのかの確認に使えます。
pwnagotchi PwnMAIL

履歴
> 2021/06/18 discord の Pwnagotch Unofficial の #pwnfiles がお友達掲示板です。

pwnagotchi とは ( https://qiita.com/k0uj1k/items/f91a3b7e3a4b9209774f ) を参照してください。

PwnMAIL は pwnagotchi をユーザだけのメッセージツールです。
pwnagotchi のネットワークは pwngrid と呼びます。 

pwnagotchi の web UI ( http://10.0.0.2:8080 ) から操作します。
\# Bluetooth テザリングができていれば、スマホからも操作できます。

##Profile

`Profile` では pwngrid での、あなたの pwnagotchi の Name, Fignerprint, QRコード が表示されます。

私の場合 ID はこれになります。

```ID
004d00d6c21608ee65dd3ac6b41ca4e3d43f5b791f69645156e717e4509532fe
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587146/4d50f256-fea1-a78a-0f00-37fd7d70331a.png)

Fingerprint の URL をクリックする、または、QRコードを読むとpwnagotchiの活動状況がわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587146/4f5b08ef-6a88-6b41-c110-b2597193bf90.png)

##New

試しに自分に送ってみます。

`To:` にIDを入れます。

`Message:` 日本語もOKですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587146/3f8a4778-b457-ee02-1521-f393a4b6e9b4.png)

`Send` で送信します。

メッセージが来ます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587146/73f3e02e-cba7-4177-550c-163404a29ddf.png" width=75%>

##Inbox
Inbox を開くと新着メッセージが来ています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587146/d848db64-bc6a-74d6-b712-db170ca98cf7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587146/c398f41e-df15-3272-ee49-3f3b9ec6c7b1.png)

届きましたね。

## 気づいたこと

backup.sh で環境を保存しておくと、戻したときに ID が引き継がれます。環境の保存と戻し方(ありがとう @kisaragi_fiber さん https://qiita.com/kisaragi_fiber/items/7cee7f35448bdd3f7232 )

---
# ハックザプラネット！
新卒SEの備忘録 【Java オブジェクト指向編】 

#【Java オブジェクト指向編】 

新人研修時のJava オブジェクト指向のメモです。

##オブジェクト指向（プロパティ、メソッド）　

部品化の考え方であり、「人間が把握しきれない複雑さ」を克服するために考えられた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/472549/8d4fea25-4675-94c9-be92-bbaf44bcdb8d.png)

```java
//①
public class Car{
  String maker
  int displacement
  String color

  void start(){
    System.out.println("発進")
  }
  void turn(){
    System.out.println("曲がる")
  }
  void stop(){
    System.out.println("停止")
  }
}
```
```java
//②
public class TestCar{
  public static void main(String[] args) {
    Car car = new Car();
  }
}
```

オブジェクト指向でやっていること。（上記の例）
　①車の設計書を作成
　　　　　　↓
　②車の設計書を元に、インスタンス（new）車を製造。


コンストラクタは、インスタンス化後にすぐに実行される。最初のみ。

```java
//コンストラクタの基本書式

public class クラス名
  クラス名() {
    //ここに自動実行処理を記述する。
  }
}
```
コンストラクタは、メソッド名とクラス名が同じ。メソッド宣言に戻り値なし（voidもなし）
クラスブロックの中に宣告された変数を、フィールドという。


##【オブジェクト指向の3大機能】

###①カプセル化（アクセス制御）
private 同一クラスからしかアクセスできない

クラスは、private　
メソッドは、public
フィールドは、private で修飾する。

フィールドは、privateで隠して、getter,setter　メソッド経由でアクセスする。 
メソッドでフィールドを保護している。

####getterとsetter
```java
//getterメソッドの定石
public 値を取り出すフィールドの型 getフィールド名() {
  return this.フィールド名;
}
```
自分のクラスのフィールドを他クラスから呼び出せるようにするために、
フィールドの中身を返すだけのメソッド

```java
//setterメソッドの定石
public void setフィールド名(フィールドの型 任意の変数名) {
  this.フィールド名 = 任意の変数名;
}
```
ある特定のフィールドに、指定された値を代入するだけのメソッド

###②継承（ 【extends】　類似したものを作成）
オーバーライドとは、親クラスを継承した子クラスを宣言する時に、親クラスのメンバを子クラス側で上書きすることをいう。

継承は、ある2つのクラスに特化・汎化の関係があることを示す。
　継承元を、スーパークラス
　継承先を、サブクラス

※宣言時にfinalと記述すれば、クラスは継承できない。

###③多様性（だいたい同じように。その結果が効率よい開発に）
インスタンスを曖昧に捉えて考える。　

is-aの関係　子クラスis-a親クラス（子クラスは親クラスの一種）　

##①②③ これらを利用して、コンピューター内の仮想世界を再現
Javaの仮想世界は、コンピュータのメモリ領域

##余談

Java研修で学習したオブジェクト指向が現在の業務で活かされています。
この記事は、プログラミング初心者の私がまとめたものなので、何か助言がありましたら、コメントを頂けるととても嬉しいです！

業務外は、Ruby,Ruby on Railsを使用して、ポートフォリオ作成をしています。
今後も引き続き頑張っていきます。
react で yarn startができなくなって困った

急にyarn startができなくて困ったので原因と経緯を書いておきます。
結果を先に言うと`react-scripts`を消してしまっていました…


## 発生した事象

```bash
$ yarn start
yarn run v1.22.5
$ react-scripts start
/bin/sh: react-scripts: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

```

## 発生の経緯
久々に触ったアプリにて、
package installひとつづつやるのめんどくさいから、package.json一気に書き換えて…
よしyarn installして、とりあえずエラー出てないか起動してみよう....あれ？そもそも起動ができない…なぜだ…


## 解決までの道筋

初めてみたエラーだ…なんだこれ…パニック…
とかなる前にまずはエラーメッセージを出してくれているのでちゃんと読む。

```bash
/bin/sh: react-scripts: command not found
```

yarn曰く、原因はreact-scriptsがないですよ？と言っている。
あ…なるほど…


## これはどういうことか

```bash
$ yarn start
```

をした時に見ているのは

```package.json
（...省略）
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
（省略...）
```

この部分。
ここで`react-scripts`呼んでいるのにそんなもの見つかりませんよ？正気ですか？と言われている。

なるほど？では`react-scripts`は`node_modules/`にいるはず（と思っている）ので調べる。

```bash
$ ls node_modules/ | grep react-scripts
$ 
```

あれ…ない？



```bash

$ ls -1 node_modules/ | grep react-
babel-plugin-add-react-displayname
babel-plugin-react-docgen
babel-plugin-transform-react-remove-prop-types
babel-preset-react-app
connected-react-router
create-react-context
css-to-react-native
enzyme-adapter-react-16
eslint-config-react-app
eslint-plugin-react-hooks
hoist-non-react-statics
mini-create-react-context
react-addons-create-fragment
react-app-polyfill
react-async-script
react-circle
react-clientside-effect
react-color
react-dev-utils
react-div-100vh
react-docgen
react-dom
react-draggable
react-dropzone
react-element-to-jsx-string
react-error-overlay
react-fast-compare
react-focus-lock
react-ga
react-google-recaptcha
react-gtm-module
react-helmet
react-helmet-async
react-hot-loader
react-hotkeys
react-infinite-scroller
react-input-autosize
react-inspector
react-is
react-lifecycles-compat
react-move
react-native-get-random-values
react-popper
react-popper-tooltip
react-pose
react-redux
react-router
react-router-dom
react-router-hash-link
react-scroll
react-select
react-side-effect
react-sizeme
react-syntax-highlighter
react-test-renderer
react-textarea-autosize
react-transition-group
react-use
storybook-react-router
```


やっぱりない…

package.jsonを見に行くと…`react-scripts`が消えている…

## 解決

ということで`package.json`に`react-scripts`を追記して、`yarn-install`して解決。


## まとめ

ちゃんとエラーメッセージで教えてくれているので、
初めてみるエラーだからってパニックになってはいけない。

…あとエラーハンドリングする時は、
エラー対応した人がわかるようにエラーメッセンジャー作るの重要ですね。
気をつけます。
PHPStormとdocker上のxdebugとの連携に詰まったら。トラブルシューティング

# これはなに
PHPStormとdocker上のxdebugを連携したいケースで、
「なんで繋がんないんだよ！！」ってなったので、
ヒントになることを書きます。

## Xdebugとは？

> Xdebugとは高機能なPHPのデバッグツールです。 PHPのデバッグでおなじみの「var_dump」を見やすくしてくれたり、ボトムネックになっている処理を見つけたり、ステップ実行できたりします。 その他のデバッグツールとしてはZendDebuggerがあります。
[Xdebugを使い倒す5つのTIPS | スマホサイト・アプリをつくろう。](http://www.plusmb.jp/2009/06/26/3923.html)
より。

# ログを有効化する

xdebug.iniやphp.iniに設定を追加しましょう。
追加したらnginxやapacheの再起動が必要です。

```
xdebug.remote_log=/tmp/xdebug.log
```

/tmp/xdebug.logにログが表示されますので、
出力されたエラー内容を見て、原因を特定しましょう。
ググれば関連する情報が出てきます。
ログを見ないで疎通させようとするのは、地図を持たないで山に入るようなもんです。


# そもそもxdebugの設定が読み込まれているか？

xdebugの設定を記載してもxdebugが動かない、ログも出ないときは
phpに設定が読み込まれているか確認しましょう。
xdebug.soの読み込み忘れでxdebugが動いていなかったり、
別のファイルで設定が上書きされていた、なんてこともありえます。


下記のコマンドは、phpに読み込まれている設定値を出力するものです。
xdebugが有効になっている場合は、xdebug関係の設定がいくつか出力されます。

```
php -r 'phpinfo();' | grep xdebug
```

`| grep xdebug` の部分は絞り込みをしています。

# PHPStorm上のPath Mappingが設定されているか？

docker上のファイルパスと、ローカルPC上のファイルパスのマッピングを設定する必要があります。

![スクリーンショット_2020-08-30_17_18_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268801/05cd76a0-fef2-b3ee-2bfd-50a37d7efe94.png)


# index.phpにブレークポイントを設定する

ブラウザからアクセスされた時に必ず実行されるところにブレークポイントを貼ってみましょう。
laravelだと`public/index.php`です。
これで、xdebugが動いていないのか、ブレークポイントの追加する場所が悪いのか原因の切り分けができます。

以上、参考になりましたら幸いです。




# 参考
https://qiita.com/haruna-nagayoshi/items/99fa041e884c2c3975d2
https://qiita.com/castaneai/items/d5fdf577a348012ed8af
https://qiita.com/taniai-lvgs/items/8e9eba112d2d0ed2530f
配列の使い方(個人的な備忘録)

# はじめに
個人的な配列についてのまとめ。

## 配列の定義
```ruby
array = []

array1 = [1, 2, 3, 4, 5]

array2 = ["A", "B", "C"]

array3 = (1..5).to_a
=> [1, 2, 3, 4, 5]

array4 = ("a".."c").to_a
=> [a, b, c]
```


## 配列に要素を追加
```ruby
array = [1, 2, 3]

## 先頭に追加
array.unshift(10)
p array
=> [10, 1, 2, 3]

## 最後に要素を追加
array << 10
p array
=> [1, 2, 3, 10]

array.push(10)
p array
=> [1, 2, 3, 10]

## 指定した位置に要素の追加
array.insert(2, 5)
p array
=> [1, 2, 5, 3]
```
insertメソッドは指定位置に追加できるため便利。

## 配列の要素を削除
```ruby
array = [1, 2, 3, 4, 5]

## 指定した要素の削除
array.delete(4)
p array
=> [1, 2, 3, 5]

## 先頭の要素を削除
array.shift
p array
=> [2, 3, 4, 5]

## 最後の要素を削除
array.pop
p array
=> [1, 2, 3, 4]

## 指定した位置の要素を削除
array.delete_at(2)
p array
=> [1, 2, 4, 5]

## 指定した範囲の要素の削除
array.slice!(1, 3) 
p array
=> [1, 5]

## trueの要素のみ残し、他を削除
array.select! { |n| n % 2 == 0 }
p array
=> [2, 4]

## falseの要素のみ残し、他を削除
array.reject! { |n| n % 2 == 0 }
p array
=> [1, 3, 5]
```

## 配列の出力
```ruby
array = [1, 2, 3, 4, 5, 6, 7]

## 指定した位置の出力
puts array[0]
=> 1

puts array[5]
=> 6

## 指定した範囲の出力
puts array.slice(3, 4).join
=> 4567

## trueの最初の要素のみ出力
puts array.find { |n| n % 3 == 0 }
=> 3

## trueの最初の要素の位置を出力
puts array.find_index { |n| n % 3 == 0 }
=> 2

## trueの要素のみ出力
puts array.select { |n| n % 2 == 0 }.join
=> 246

## falseの要素のみ出力
puts array.reject { |n| n % 2 == 0 }.join
=> 1357

## false手前の要素を出力
puts array.take_while { |n| n < 5 }.join
=> 1234

## false以降の要素を出力
puts array.drop_while { |n| n < 5 }.join
=> 567
```

# 終わりに
基本的なことはこれでできると思います。
Firebase + redux-toolkit の学習備忘録

# まず
本記事がqiita初投稿となります。
暖かい目でご覧いただければ幸いです。
※現在、追記＆学習中です

# ここまでの経歴
1. 自作でReactとReact Nativeでアプリケーションを作成しようと思った
2. AWSのEC2でやってみよう
3. なんか手作り感がすごい、、カッコよく手軽に作りたかった→そうだFirebaseを使おう！
4. Redux嫌いだから、useContextで乗り切ろう
5. useContextも意外と好きじゃないかも。。。
6. redux-toolkitっていうのがあるらしい、試してみよう
7. redux-toolkitマジで最強！！　使っていこう
8. Firebase + redux-toolkit　でどんなアプリもさくっと作れそうなテンプレ覚えてみよう　←今ここ

# 困ったこと
## firebaseUIの機能だけ継承して独自UIにしたいのにできない。。。  
できない。
> 独自UI使いたいならfirebaseUIは使わない　or　DOM非表示にしてクリックイベント発火させるしかない。。。  


## firebaseuiのuiConfig.callbacks.signInSuccessWithAuthResult内でdispatch実行してもstoreが更新されない。。。  
> **react-redux-firebase** を使ってなんとか解決


## Firebase + redux-toolkitの日本語ドキュメントなさすぎ、公式もredux-toolkitに対応してなさすぎ問題
もしかしてと思って調べてみたら、そもそもFirebaseを使ってる日本のサービスがあんまり見つからなかった。
意外と流行っていないのかな
> 個人開発ではとっかかりやすいから有名だけど、会社として開発するとなるとFirebaseは選択しないのかも。。。

## redux-toolkitの非同期がなんかうまくできない
> createAsyncThunkの返り値が action.payload に入るというルールを知らなかった
人工知能初心者向けの書籍3冊の感想まとめ

人工知能初心者向けの書籍を3冊読みましたので個人的な感想とそれぞれの書籍のおすすめポイントをまとめました。

###### 今回拝読した書籍
・深層学習教科書　ディープラーニング　G検定公式テキスト　浅川 伸一, 江間 有沙 他5名, 一般社団法人日本ディープラーニング協会　翔泳社
・人工知能は人間を超えるか　松尾 豊　KADOKAWA
・人工知能システムのプロジェクトがわかる本 企画・開発から運用・保守まで　本橋 洋介　翔泳社

基本的に技術書というよりは基礎知識を得る、プロジェクトに参画するにあたっての心構えをするための書籍ですね。
何であれ実際に技術書を読みだす前に基礎知識を固める必要があること、基礎知識だけでは実際どのようにプロジェクトが動くのかをイメージしたかったため上記三冊を拝読しました。


## 深層学習教科書　ディープラーニング
・深層学習教科書　ディープラーニング　G検定公式テキスト　浅川 伸一, 江間 有沙 他5名, 一般社団法人日本ディープラーニング協会　翔泳社

人工知能の定義、歴史から将来的な目標や危険性にいたるまでの概要や機械学習や深層学習の基礎知識・キーワードをまとめて解説してくれる、まさに教科書にふさわしい1冊です。
これまでの人工知能分野の技術進歩の流れと各時代でメインとなった研究、深層学習の登場によってそれらの研究で発展したことなどを学習することができます。
教科書と銘打つとおり、基礎を網羅してはいますが踏み込んだ内容について記載されているわけではありません。
具体的な開発言語やフレームワーク、環境についての知識はこの本では学習することができないため、それらについて学習したい方には別途書籍なり学習手段を用意する必要がありますのでご注意ください。

他の専門書を読みだす前にまず押さえておくべきことについては粗方解説されているため、これから人工知能の勉強を始めるという方はG検定を受ける予定が全くなくても読んでおくとよいと思います。
ただ、人工知能分野の知識が全くない状態でこの本を一読した場合、おそらくキーワードや頭に入れるべき知識が多すぎて内容が飲み込めないという状態になります。
ですがタイトルにもありますとおり、こちらの本は教科書だと思いましょう。他の入門書を読む際に参照したり、書かれた内容をノートや自分好みのツールにまとめたりと使っていく中で、人工知能について基礎知識を自分の中に落とし込むことができるはずです。


## 人工知能は人間を超えるか
・人工知能は人間を超えるか　松尾 豊　KADOKAWA

著者である松尾 豊先生ご本人の体験や当時の思いなど、基本がテキストであった深層学習教科書とは異なり、エッセイを読むようにすんなりと読むことができます。
専門書よりもエッセイや啓発書など誰かの経験や考えを読み学ぶことになれた方には特に読みやすく感じる書籍ではないかと思います。
(半面、学術書や論文的な内容を求める方には向かない書籍であるかもしれません)

語り口調に近い文体で書かれているため非常に読みやすく、また読み進める中で人工知能の主だったキーワードについてある程度理解できるようになっています。
私は深層学習教科書の読後に人工知能は人間を超えるかを拝読しましたが、深層学習教科書で見た基礎的なキーワードを頭の中でおおよそ整理できるようになっていました。
教科書の得た知識を当時の人工知能分野で活動していた方の体験を通してどれだけ重大な、画期的な取り組みだったのかなどを感じ取ることで詰め込んだだけの知識から肉付けをしていただけたように感じます。

エッセイのように、と前述したことからお分かりかと思いますが、人工知能は人間を超えるかの内容はテキストである深層学習教科書よりも深い知識を学べるものというよりは、著者である松尾 豊先生の解説を通して概要をしっかりと飲み込むことを主眼としている内容ではないでしょうか。
人工知能分野を初めて学ぶ方には深層学習教科書と合わせて読むことで理解度を増すことが期待できる書籍だと思います。


## 人工知能システムのプロジェクトがわかる本
・人工知能システムのプロジェクトがわかる本 企画・開発から運用・保守まで　本橋 洋介　翔泳社

人口知能についての基礎知識が身についたところで、具体的にどういった形でプロジェクトが動くのかをイメージするのが難しかったため購読させていただいた書籍です。
G検定程度の基礎知識は身に着けている・一般的なシステム開発の流れは理解している人が対象の書籍であるように思いました。
もっと言えば「エンジニア経験があり、人工知能の基礎知識はあるけど実際に開発を経験したことが無い人」向けの書籍でしょうか。私もそうですが、ほかにもそういう方は実際結構いらっしゃるような気がします。
実際の「人工知能を導入する」プロジェクトで人工知能をどの工程で動かすことが多いのかなどを最初のほうで解説されているので、プロジェクトの内容を個々でイメージをしながら開発の流れを学習していくことができます。
ポイントポイントでケーススタディという形で工程や確認すべきポイントを提示されます。これは私にとってはイメージがしやすくなるので助かりました。

また、私が本書を拝読してはっとなったのが、人工知能の学習結果を整理して「人にとって知見が妥当かどうかを判断する」というところです。
人工知能はデータを学習していきますが、その結果が人にとって妥当かどうか、人が判断する必要がある。
それは当たり前のことですが、実際に人工知能を使う立場にならないと見落としてしまうポイントなのかな、と思います。
作ることが目的だったり、流れを把握するにとどまる学習時は見落されてしまいやすいポイントかもしれません。
人工知能の計算結果は結局人が使うためのもので、人工知能が学習した傾向の正誤は結局人が判断する必要があるんですよね。計算上正しくても、それが正しいものとして人に感じられなければ運用されなくなってしまう。
本当に当たり前のことなんですが、私はうっかり失念しかけていたポイントでした。

人工知能の勉強しても、それを実際に開発・運用できるかというとなかなか難しいです。ですがこの書籍を読むことで実際のプロジェクトに関わる前に、ある程度流れを把握しポイントを押さえるためのとっかかりを得られるのではないでしょうか。
もちろん実際のプロジェクトでこの通りの流れやポイントがすべて通じるというわけではないでしょうが、これから最初の「人工知能を使用するシステム」の案件を経験する予定がある方には読んでおくと心強い一冊であるように思います。
IBM Cloud: VPCのVSIをOSコマンドでshutdownしようとしても自動的に再起動されてしまう件

表題の通りですが、さっき試してみたら気がついたちょっとした小ネタです。

```
#VPCのVSIにログインした後に、明示的にOSコマンドでシャットダウンを実施
$ ssh root@xx.xx.xx.xx
Last login: Thu Aug 27 16:34:28 2020 from ntchba459247.chba.nt.ngn.ppp.infoweb.ne.jp
[root@syasuda5-vpc1 ~]# shutdown -h now
Connection to xx.xx.xx.xx closed by remote host.
Connection to xx.xx.xx.xx closed.

#シャットダウン直後は（想定通り）ログインできない
$ ssh root@xx.xx.xx.xx
ssh: connect to host xx.xx.xx.xx port 22: Operation timed out

#しかし、数十秒ぐらい経ったらログインできるようになっている！
$ ssh root@xx.xx.xx.xx
Last login: Thu Aug 27 16:34:33 2020 from ntchba459247.chba.nt.ngn.ppp.infoweb.ne.jp
[root@syasuda5-vpc1 ~]#
```

どうやら、UIやCLIから明示的に以下のようにStopを選択しないとOSコマンドレベルでのshutdownではすぐに再起動されてきてしまうようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/d55699b3-a530-4aa3-3ead-8791acdff326.png)
【spring boot】Gradleのcompileとimplementationの違い

#本記事の結論
Gradleの依存関係の宣言方法には、以下のような違いがある。

- compile　　　　　：***旧式。***無条件で依存関係を伝播する。
- implementation　：依存関係を伝播しない。
- api　　　　　　　：明示的に依存関係を伝播する。（本記事では説明の対象としない）


##前提条件
説明に用いるプロジェクトには以下のような依存関係がある。

![【gradle】compile_implementation_api-プロジェクトの関係.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696295/bef55a4d-4481-c13a-a9b9-b4add62ef333.png)

![【gradle】compile_implementation_api-プロジェクトの依存関係.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696295/2cdcf524-49da-d69d-1cdf-53c80c1a16af.png)


#プロジェクトBからプロジェクトAに対して、依存関係の宣言
###compileの場合
- 無条件でプロジェクトAとプロジェクトCに依存関係が***成立する***。

![【gradle】compile_implementation_api-compile.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696295/e8595215-b638-8f69-ac36-430628482895.png)


###implementationの場合
- プロジェクトAとプロジェクトCに依存関係が***成立しない***。

![【gradle】compile_implementation_api-implementation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696295/84bba398-c9fb-4d92-0494-a480af23bf84.png)


#参考
- [Gradleのimplementationとapiの違いメモ](https://qiita.com/tkhs0604/items/7afe40599af2354eb2ad)
- [Gradle の compile, api, implementation とかについて](https://qiita.com/opengl-8080/items/6ad642e0b016465891de)
- [新しい依存関係コンフィグレーションの使用](https://developer.android.com/studio/build/gradle-plugin-3-0-0-migration?hl=ja#new_configurations)
久しぶりにmac向けXAMPPをインストールしたら一味違っていた件

# 結論
1. VMになっていた
2. `http://localhost~`じゃなく`http://{IPアドレス}~`でアクセスする

# XAMPPのインストールをする

[XAMPP](https://www.apachefriends.org/jp/index.html)

2020/08/30時点のバージョンは7.4.9

![スクリーンショット 2020-08-30 16.05.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699952/a64f1e2a-a0f6-5938-0c28-7b5ff26f06cf.png)


#### finderにできるはずのXAMPPフォルダがなくなっていることに気づく

# とりあえずXAMPPをスタートさせてみた

するとなんだかローカルIPアドレスが割り振られたように見える

![スクリーンショット 2020-08-30 16.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699952/46fc7774-cb13-3b8a-0e89-10dafa6e84a8.png)

ApacheとMySQLもスタートさせておく

![スクリーンショット 2020-08-30 16.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699952/2111e8f7-9412-ba55-d1d5-0035e5b481f0.png)


80ポートをenableにする

![スクリーンショット 2020-08-30 16.17.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699952/42ba2f84-bd41-b560-e98b-70c6bb5fa1f4.png)

mountをクリックする

![スクリーンショット 2020-08-30 16.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/699952/9136ccb8-a399-8e34-4031-7ce37167b649.png)


この`opt/lampp`の中にあるhtdocsがドキュメントルートになるようだ。

**ここまでいくとfinderの"場所"にVMのIPアドレスが表示されていてフォルダが操作できるようになる**
Unity 2020.1 で ReorderableList が作りやすくなったらしい……？

## みんな大好き、ReorderableList
カッコいいエディタ拡張の代名詞たるReorderableList、好きですよね。しかし実際に使おうとすると、ReorderableListはUnityEditorInternalに入っている関係上、マニュアルはおろか、リファレンスすらありません。幸いすでにたくさんの方がその使い方を記事にされており、私もそれらを参考に実装していました。それでもなおその使い方はかなり煩雑で、だいぶめんどくさかったのです。

しかし先日Unity 2020.1のリファレンスを眺めていたところ、以下のような項目が。
[Unity - Scripting API: UIElements.ListView.reorderable](https://docs.unity3d.com/2020.1/Documentation/ScriptReference/UIElements.ListView-reorderable.html)
なんとUI ElementsのほうのListViewにreorderableというプロパティが実装されていました。プロパティいっこ設定するだけでReorderableにできるというのです。これは試さなくては！


意気揚々と実装してみた結果が以下になります。

![g.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124429/bdd42c79-24da-df47-d38c-9568f0f2cd42.gif)

**えっなんか違う……**
reorderableってそういう……？

## そんなにカッコよくはないけどまあ便利そうなので
以下、今回のコードです。

```SampleList.cs
using System;
using UnityEngine;

public class SampleList : MonoBehaviour
{
    public SampleListItem[] items;
}

[Serializable]
public class SampleListItem
{
    public string key;
    public string value;
}

```

```SampleListEditor.cs
using UnityEditor;
using UnityEditor.UIElements;
using UnityEngine.UIElements;

[CustomEditor(typeof(SampleList))]
public class SampleListEditor : Editor
{
    public override VisualElement CreateInspectorGUI()
    {
        var root = new VisualElement();
        
        var list = new ListView();
        list.bindingPath = "items";
        list.reorderable = true;
        list.itemHeight = 70;

        list.style.flexGrow = 1;
        
        root.Add(list);
        root.Bind(serializedObject);

        root.style.height = 200;
        
        return root;
    }
}
```

まあ実装は楽だし入れ替えは便利だし……
TechCampエンジニア　41日目



#現在の進歩状況:motorcycle:

現在、悪戦苦闘を重ねながらも　商品管理機能をおわらすことに成功しました。:corn:

現在４１日の昼を迎えて、コードレビューを出し終えたので感想を述べますと、
TechCampのカリキュラムはすごくわかりやすく、楽しく勉強することができました。
思っていたよりプログラミングは地道な作業でしたが、難解なコードの羅列を理解できた時の
達成感とても凄まじいですね:coffee:。
この膨大なカリキュラムのおかげでプログラミングでいろいろできることを体験できたけっか、
プログラミングに興味をすごく持てているので、勉強している感覚はないです！楽しい:grapes:




#オンライン体験した結果の感想:cookie:
私は実は、教室である難波スカイオには１回しか訪れておりません！
これは怠惰なのではなく、あまりにもTechCampのオンラインでの質問が充実しているので
わざわざ着替えて電車に乗るより効率よく感じたからです（家での環境が整っている場合）
画面共有とリモートデスクトップで、メンターさんも操作してくださるので、実際に対面して教えてもらうのとほとんどクオリティです:apple:
オンラインを偏見してましたが、むしろ移動時間や用意も省けて、私の性格上　対面より満足しています！！:bread:
ps.教室は超絶綺麗でしたよ:rice_ball:

#これからの人生のあらすじ

今からレビューでRGTMをもらえたら、１８日までに全てカリキュラムを終わらせなければならないので
がんばってきます。来週からはキャリアアドバイザーさんと就活の用意をしていくみたいなので、
個人的にもかけそうな内容を考えていきたいです:chocolate_bar:
カードを使用した電子扉システムの設計ー午後

応用情報技術者平成30年秋期 午後問7 

ファイル：2018h30a_ap_pm_qs.pdf

１、「制御部とサーバ間通信」について、本文中のa,bに入れる適切な字句を、本文中の字句を用いて答えよ。

a,bは図２によると、扉識別コード、カード識別コード、または、有効期限ですね。
ただ、aは、入退室カードの保有者を特定できるので、カード識別コードですね。
bは入退室する扉を特定できるので、扉識別コードでしょう。

＜＜制御部とサーバ間通信＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/a9bde19f-92d6-bae2-05fc-a17e685a1c46.png)

＜＜図２：電子扉ユニットのハードウェア構成＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/36f554a9-b341-f070-e439-bd35ccce7ef1.png)


２、「制御部のプログラムの処理」について、（１）～（３）に答えよ。
（１）図３中のｃに入れる適切な処理を、本文中の字句を用いて答えよ。
ｃは、上記「図２：電子扉ユニットのハードウェア構成」によると、「電子ブザーは、単発音の許可音・エラー音を発生したり、。。。」という記載がありますので、ｃは「エラー音を発生する」でしょう。


＜＜図３＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/7d630ba9-3453-9e28-209e-357fe3f91425.png)

（２）図３中のｄ、eに入れる適切な処理を、解答群の中から選ぶ。
ｄは、電子扉システムの動作によると、「（２）サーバからの応答が開錠許可なら、許可音を発生して開錠する。開錠してからｔ１秒以内に扉が開かないときは施錠する」との記載があるので、開錠の後は、タイマにｔ１秒を設定するとのことでしょう。

eは、開扉イベント発生した後の処理ですね。開扉してから、元のタイマが取り消されて、新しいタイマ設定が必要ですね。ｔ２秒以内閉じないと警告音を鳴動するから。なので、eはタイマにｔ２秒を設定するとのことでしょう。

＜＜ｄ、eの解答群＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/d35c2588-ae37-3475-a1ea-1b95bcd734b9.png)

＜＜電子扉システムの動作＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/45dbc16b-7e33-a017-c763-d4358105ea5f.png)

（３）図３中のｆ、ｇに入れる適切なイベントを、本文中の字句を用いて答えよ。
通知の判断条件ですね。
ｆは、次の処理は「タイマ取り消し」ので、正常に閉扉イベントが来たとのことでしょう。
ｇは、次の処理は、「ブザーが鳴動する」ので、閉扉イベントが来られなく、「タイマ満了イベント」が来てしまったとのことですね。

閉扉イベント　（私の答え）
→
閉扉　（参考答え）

タイマ満了イベント　（私の答え）
→
タイマ満了　（参考答え）

なぜ、参考答えには、「イベント」がないですね。。。。


＜＜制御部のプログラムの処理＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/9feb0990-67a4-e87b-e883-af2d1acbec3c.png)

３、「不具合の発生」について、不具合が発生する条件を３５字以内で述べよ。
図３の「①施錠する」を処理した後に発生していた不具合ですね。
不具合は、扉を開けたままｔ２秒経過しても、警告音が鳴動しないとのことです。

まずは、「①施錠する」とな何をやるんですかね。施錠しますね。なぜ「開けたまま」ですかね。
開けるの？の疑問がないでしょうか。

制御部のプログラムの処理　によると、「電子錠が開錠/施錠するのに１秒掛かり、その間、次の処理は行わない」の記載があります。つまり、その１秒間は、「施錠する」を指示したのに、実はまだ施錠している状態ではなく、開ける状態ですね。

”①施錠する”処理してから１秒以内で扉を開いて、そのまま保持する（私の答え）
→
”施錠する”処理中に扉を開き、そのままｔ２秒経過したとき　（参考答え）

＜＜不具合の発生＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/d7ad5669-3121-e0af-783d-efbb8fc5ffdc.png)
Aizu Online Judge

この記事は、Aizu Online Judgeに取り組む中で勉強したこと等を忘れないようにするため、備忘録として作成するもの。

#gets（文字列の入力を受け付ける）
gets = get string

```ruby
name = gets
#Taroと入力し、エンター
#=>"Taro\n"
name = gets.chomp
#Taroと入力し、エンター
#=>"Taro"
number = gets.to_i
#1と入力
#=>1 
```

##複数のデータセット入力
```ruby
gets.split(" ")
#1 2　と入力
#=> ["1", "2"]

gets.split(" ").map(&:to_i)
#1 2　と入力
#=> [1, 2]

x,y = [1,2]
#変数x、yに配列の要素を代入
#x =>1
#y =>2 


x,y = gets.split(" ").map(&:to_i)
#1 2　と入力
#x => 1
#y => 2
```

##chomp(改行文字の削除)

```ruby
gets
#aと入力
=> "a\n"

gets.chomp
#aと入力
=> "a"
```
#hash(ハッシュ)
##to_a
```ruby
h = {1 => 2}
h.to_a #=> [[1,2]]
```


#join (配列の連結)
配列を連結して１つの`文字列`として返す

```ruby
[1,2,3].join  
#"abc"
[1,2,3].join(" ")
#"a b c"
[1,2,3].join("+")
#"1+2+3"
```

#繰り返し
##times
```ruby
1000.times do
  puts "Hello World"
end
```

##while
```ruby
while 繰り返し続ける条件 do
  繰り返す処理
end

#例
i = 1
while i <= 10
  puts i
  i = i +1
end
```

##文字列の繰り返し

```ruby
"abc" * 2 #=>"abcabc"
```

#範囲（Range）（../...）
```ruby
(1..5).to_a  #=>[1,2,3,4,5]
(1...5).to_a #=>[1,2,3,4]
```

#比較演算子
```ruby
a != b #aとbが等しくない
```

#sendメソッド
レシーバに対して指定した文字列（またはシンボル）のメソッドを実行する。

```ruby
1.send("+",2) #=>3
"a".send("upcase") #=> "A"
```

#配列
##Array.new
```ruby
arr = Array.new(3)
#=> [nil,nil.nil]

arr = Array.new(3,0)
#=> [0,0,0]

a = Array.new(3){"abc".upcase}
=> ["ABC", "ABC", "ABC"]
```
##配列の合計
Enumerableモジュールのinjectメソッドを使う。A
##組み合わせ
```ruby
[1,2,3].combination(2)
#=>#<Enumerator: [1, 2, 3]:combination(2)>

[1,2,3].combination(2).to_a
#=>[[1, 2], [1, 3], [2, 3]]

```
##each_with_index
```ruby
["a","b","c"].each_with_index do |str,i|
  puts "要素：#{str},インデックス番号：#{i}"
end
#=>要素：a,インデックス番号：0
#=>要素：b,インデックス番号：1
#=>要素：c,インデックス番号：2
```

##uniq(重複の排除)
```ruby
[1,2,2,3,4,4].uniq
=> [1, 2, 3, 4]
```
##並べ替え
###reverse
逆順に並べ替える。（＊降順ではない！）

```ruby
[1,5,3].reverse
=> [3, 5, 1]
```
降順にする場合は、sortで昇順にしたのち、reverse

```ruby
 [1,5,3,4,2].sort.reverse
=> [5, 4, 3, 2, 1]
```
##find_all
配列の各要素にブロックを実行し、結果が真になる要素を返す。

```ruby
[0,1,1,0].find_all{|n|n == 1}
#=> [1, 1]
```
##all?
すべての要素が真である場合に true を返す。偽である要素があれば、ただちに false を返す。
ブロックを伴う場合は、各要素に対してブロックを評価し、すべての結果が真である場合に true を返す。ブロックが偽を返した時点で、ただちに false を返す。

```ruby
[2,4,6,8].all?(&:even?)
=> true
[1,2,4,6].all?(&:even?)
=> false
```

#正規表現
##gsub
マッチする部分全てを置き換える。


```ruby
"123456".gsub(/2345/,"0")
=> "106"
```
RailsのDeviseとセットアップ方法

# はじめに
この記事は、インターネット上の百科事典や技術情報サイト、勉強会を基に、RailsにおけるDeviseについて復習しやすいようにまとめた備忘録です。
技術的に誤っている点がございましたら、ご指摘いただけますと幸いです。

# Deviseとは？
DeviseとはRailsで作成したアプリケーションに認証機能を実装できるgemの一つです。
Deviseを利用することでログイン機能を簡単に実装することができます。

# Deviseの使い方
## Gemfileの編集とインストール
```ruby:Gemfile
gem 'devise'
```
以下の記事のGetting startedを参考にインストールします。
https://github.com/heartcombo/devise#getting-started

```
$ bundle install
```
Gemのインストール完了です。

## Deviseのセットアップ
```
$ rails g devise:install
```
Deviseの設定ファイルをRailsアプリケーションにインストールするためのコマンドです。

```
$ rails g devise User
```
Deviseで認証するためのモデルを作成するコマンドです。
今回はUserモデルを作成すると想定してUserを入力しています。

```
$ rake db:migrate
```
作成したモデルを基にデータベースを作成します。
Rails5以降をインストールしている場合は、`$ rails db:migrate`コマンドを使えます。

```
$ rails g devise:views
```
app/views/devise配下にDeviseで使用するビューを作成するコマンドです。

## Deviseに機能を追加する
Deviseには10個のモジュールが用意されています。
以下の各モジュールの概要については[RailsにおけるDeviseとは？](https://diveintocode.jp/blogs/Technology/Devise#:~:text=Devise%E3%81%A8%E3%81%AF%E3%83%BB%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E5%87%BA%E6%9D%A5%E3%81%BE%E3%81%99%E3%80%82)から引用させていただいております。

|機能  |概要  |
|---|---|
|database_authenticatable  |サインイン時にユーザーの正当性を検証するためにパスワードを暗号化してDBに登録します。  |
|registerable  |登録処理を通してユーザーをサインアップします。また、ユーザーに自身のアカウントを編集したり削除することを許可します。  |
|recoverable  |パスワードをリセットし、それを通知します。  |
|rememberable  |保存されたcookieから、ユーザーを記憶するためのトークンを生成・削除します。  |
|trackable  |サインイン回数や、サインイン時間、IPアドレスを記録します。  |
|validatable  |Emailやパスワードのバリデーションを提供します。独自に定義したバリデーションを追加することもできます。  |
|confirmable  |メールに記載されているURLをクリックして本登録を完了する、といったよくある登録方式を提供します。また、サインイン中にアカウントが認証済みかどうかを検証します。  |
|lockable  |一定回数サインインを失敗するとアカウントをロックします。ロック解除にはメールによる解除か、一定時間経つと解除するといった方法があります。  |
|timeoutable  |一定時間活動していないアカウントのセッションを破棄します。  |
|omniauthabl  |intridea/omniauthをサポートします。TwitterやFacebookなどの認証を追加したい場合は追加します。  |

## Deviseが用意しているメソッド
```
current_user
```
現在ログインしているユーザーを取得することができるメソッドです。

# 備考
Deviseの導入方法と追加できる機能についてまとめさせていただきました。
Deviseは趣味で何回か利用していますが、学習内容をまとめておくことで理解度が高まったように感じます。
ここまで拝読していただき、ありがとうございました。

# 参考文献
DIVE INTO CODE MEDIA
- [RailsにおけるDeviseとは？](https://diveintocode.jp/blogs/Technology/Devise#:~:text=Devise%E3%81%A8%E3%81%AF%E3%83%BB%E6%A9%9F%E8%83%BD%E7%B4%B9%E4%BB%8B,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E5%87%BA%E6%9D%A5%E3%81%BE%E3%81%99%E3%80%82)
Github
- [heartcombo/devise](https://github.com/heartcombo/devise)
Railsについての知識を交換するコミュニティ
- [【オンライン開催】銀座Rails#24@リンクアンドモチベーション](https://ginza-rails.connpass.com/event/181807/)