OmniAICreator/Qiita-1.07M huggingface dataset:
【Vue.js】computedとmethodsの違いまとめ

#はじめに
[UdemyのVue.js講座](https://www.udemy.com/course/vuejs-2-the-complete-guide/)で学習していたところ、computedとmethodsの違いがよく分からなかったので、備忘のためにアウトプットしたいと思います。

#computedとmethodsの違い
computedがリアクティブな依存関係が更新されたときにだけ再評価されるのに対し、methodsは再描画が起きると常に関数が実行されます。

||methods|computed|
|:--:|:--:|:--:|
|オブジェクト内での役割|メソッド|プロパティ|
|処理結果のキャッシュ|キャッシュされない|キャッシュされる|
| テンプレートからの呼び出し方 |{{ call() }}|{{ call }}|
|getter, setter|getterのみ定義できる|getter, setter両方定義できる|

#実際の動き
以下はcomputedが実行されると``computed発火！``、methodsが実行されると``methods発火！``がコンソールに出力される処理です。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="tktaka" data-slug-hash="abmBreG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="abmBreG">
  <span>See the Pen <a href="https://codepen.io/tktaka/pen/abmBreG">
  abmBreG</a> by TokioTakamiya (<a href="https://codepen.io/tktaka">@tktaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script></script>

##methodsの場合
methodsは再描画の度に関数が実行されるため、computed実行時でも``computed発火！``とともに``methods発火！``も表示されています。

![Screen Recording 2020-12-12 at 12.49.43.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512863/62a393d4-eb6a-96c3-b7f4-7424902237a8.gif)


##computedの場合
一方、methodsの実行時は``computed発火！``は画面リロード時の1度しか表示されておらず、``methods発火！``のみ増加しています。
![Screen Recording 2020-12-12 at 13.02.53.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512863/931aae16-f99d-6a11-992d-559885247285.gif)

次回の記事では、``computedとwatchの違い``について触れたいと思います。

#参考
[Vue.js : 算出プロパティとメソッド](https://jp.vuejs.org/v2/guide/computed.html#%E7%AE%97%E5%87%BA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3-vs-%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89)
備忘録(Ruby:基礎文法:ハッシュ)

##配列による管理の限界
配列は複数の情報を順番で管理することは得意
複数の情報同士の関係性を示すことには向いていない
関係のある複数の値を管理するときには、ハッシュを用いる

####ハッシュ
「データ」とそれに対応する「名前」のセットを要素として持つ値
ハッシュにおいては、データをバリュー、それに対応する名前をキーと呼ぶ
ハッシュは順番ではなく、キーで管理する(キーバリューストア)
ハッシュを用いれば、別々の意味を持つ値を1つにまとめられるため、値同士の関連を示すことができる

```ruby
#ハッシュの宣言
変数 = {}

#ハッシュの生成は以下のようにハッシュロケット=>を用いてキーとバリューをセットにして記述
変数 = { キー1 => バリュー1, キー2 => バリュー2, キー3 => バリュー3 }
```

####シンボル
見た目は文字列のようだが、実際の中身は数値になっている値
シンボルの宣言は、文字列の先頭にコロン:をつける
シンボルをハッシュのキーに用いる場合は、文字列をキーにする場合と同じ書き方と、
シンボルをキーにするときだけ使用できる書き方の2種類がある

```ruby
#シンボルの宣言
# 以下はどちらも同じ値
:"文字列"
:文字列  # よく使用される


# 以下はどちらも同じ要素
hash = { :name => "Taro" }
hash = { name: "Taro" }  # よく使用される

#例
student = { "name" => "John", "age" => 10 }
teacher = { name: "Mike", age: 25 }

puts student
puts teacher
```

####ハッシュに値を追加
配列で添字を指定するように角括弧[]の中にキーを記述し、値を代入

```ruby
#ハッシュへ要素を追加
ハッシュ[追加するキー] = 値

#例
student = { "name" => "John", "age" => 10 }
teacher = { name: "Mike", age: 25 }

teacher[:subject] = "English"

puts student
puts teacher

```

####ハッシュの値を取得
取得の際に使うのはその値に対応するキー
配列では添字を指定していたが、ハッシュではキーを指定

```ruby
#ハッシュの要素を取得
ハッシュ[取得したい値のキー]

#例
student = { "name" => "John", "age" => 10 }
teacher = { name: "Mike", age: 25 }

teacher[:subject] = "English"

puts student
puts teacher
puts teacher[:name]

#puts teacher[:name]でMikeが出力される
#指定したキーに対応する値が取得できる
```

####ハッシュの値を変更
要素を追加するときと同様に、取得の記述に代入演算子で値を代入するように記述
指定するキーがハッシュに含まれていれば、そのキーに対応する値を変更
存在しないキーであれば、そのキーと値が新しい要素として追加

```ruby
#ハッシュの要素を変更
ハッシュ[変更したい値のキー] = 値

#例
student = { "name" => "John", "age" => 10 }
teacher = { name: "Mike", age: 25 }

teacher[:subject] = "English"
teacher[:name] = "Emma"

puts student
puts teacher
puts teacher[:name]

#名前を持つキーnameの値がMikeからEmmaに変更され、
#puts teacher[:name]の出力は「Emma」になる
```

####ハッシュによる管理の限界
「名前」「年齢」という同じ構造のまとまり自体が増えていくと、ハッシュを代入する変数を増やすことになり、hash1, hash2, ...のような変数名に番号がつく無駄の多い管理になってしまう

ハッシュを利用して複数の変数をまとめても、そのハッシュ自身を代入する変数が増えてしまい本末転倒

そこで配列と組み合わせて値を管理する(配列の要素にハッシュを追加して管理する)

```ruby
#からの配列を作成する
students = []

#空の配列studentsにハッシュを追加する
students << {name: "太郎くん", height: 160}
students << {name: "花子さん", height: 155}
students << {name: "次郎くん", height: 165}
students << {name: "春子さん", height: 150}

puts students[1][:name]
#配列の添字[1]{name: "花子さん", height: 155}のなかの、name:を指定しているので
#値の、花子さんと出力される

```
Ruby の nil は無か？

Qiita の Ruby の記事で，`nil` に関してしばしば誤解を招く表現が見られます。

変数の値が `nil` であったり，メソッドの返り値が `nil` であることを

* オブジェクトが無い
* 値が無い
* 何も無い

などと。

また，プログラミングスクールの記事でも，例えば
[Rubyのnil判定を行う方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン](https://techacademy.jp/magazine/22199)
には

> nilとは、存在しない、何も無いという意味です。

などと書かれています。「何も無い」わけじゃありません。せめて

> `nil` は何かが存在しないことを表すために用いられるオブジェクトです。

くらいの書き方にしてほしかった。

Ruby の `nil` はれっきとしたオブジェクトです。`NilClass` というクラスのインスタンスです[^so]。

[^so]: ちなみに `NilClass` はインスタンスをただ一つしか持てないことが保証されています。そのただ一つのオブジェクトが `nil` です。

`nil` はオブジェクトなのでメソッドにも反応するし，メソッドに引数で渡したり，変数に代入したり，演算子のオペランドにしたり，配列の要素にしたりもできます。
その点では他のオブジェクトと何ら変わりません。

ただ，**用途として**「期待したものが存在しなかった」ことなどなどを表す，というだけなのです。
具体的には，「あー，オレ，長さ 3 の配列なんだよねー，だからインデックス 5 の要素をくれとか言われても，そんなもん持ってないから `nil` 返しとくわー」などという場合ですね。

```rb
ary = ["Apple", "Banana", "Cherry"]
p ary[5] # => nil
```
【Java】concat / append (文字列を連結するメソッド)

# Javaの文字列を連結させるメソッド

についてまとめました。

## 【要約】

concatもappendも両方文字列を連結するメソッドです。

抑えるべきポイントは以下です

- concatは新しくオブジェクトを生成する
- appendはオブジェクトを生成しない

## concatメソッドとは

要約すると「文字列を結合しオブジェクトを新たに生成する」メソッドです。

他にも文字列結合のメソッドはありますが、オブジェクトを新たに生成するのはconcatメソッドのみ。

## 【説明】

concatメソッドは元になる文字列自体を変更させるものではなく、「結合した新しいインスタンスを生む」という点がポイント。

concatメソッドを使うには、元になる文字列を用意し、結合したい文字列を引数に渡して結合します。書き方は以下です。

```java
//concatの記述方法
元になる文字列.concat(結合したい文字列);

// 結合した文字列を変数として扱う
String 結合した文字列 = 元になる文字列.concat(結合したい文字列);
```

## appendメソッドとは

要約すると「文字列を結合する」メソッドです。

上記のconcatとのおおまかな違いは、オブジェクトを生成するか否かです。

## 【説明】

appendメソッドでは、「文字列バッファ」という変数をつかうのでオブジェクトを生成しません。

一般的にオブジェクトの生成は時間がかかるのため、appendメソッドを使う方が処理にかかる時間が短いということ。

文字を連結する際に「新しくオブジェクトを作る必要があるか」を問いてなるべくappendを採用できるようにするのがいいかも知れない。

### appendメソッド種類

appendメソッドには以下のクラスを使う二通りのやり方があります。

- StringBuilderクラス
- StringBufferクラス

書き方は以下です。

## StringBuilderクラス

### 書き方1

```java
StringBuilder 変数名 = new StringBuilder(結合したい文字列);
変数名.append(結合したい文字列);
String 結合した文字列 = 変数名.toString()
```

### サンプルコード1

```java
public class Main {
    public static void main(String[] args) {
        // StringBuilderクラスのappendメソッドを使う場合
        StringBuilder sb = new StringBuilder("Hello");
        sb.append(" StringBuilder");
        String str = sb.toString();
        System.out.println(str);
    }
}
```

```java
Hello StringBuilder
```

## StringBufferクラス

### 書き方1

```java
StringBuffer 変数名 = new StringBuilder(結合したい文字列);
変数名.append(結合したい文字列);
String 結合した文字列 = 変数名.toString()
```

### サンプルコード1

```java
public class Main {
    public static void main(String[] args) {
        StringBuffer sb = new StringBuffer("Hello");
        sb.append(" StringBuffer");
        String str = sb.toString();
        System.out.println(str);
    }
}
```

```java
Hello StringBuffer
```

## 【まとめ】

JavaSilverの試験での範囲内ですので、以下の点は抑えておく。

- concatはインスタンスを生成するメソッド
- appendはインスタンスを生成しないメソッド

言い方を変えればappendは「もともとインスタンスが用意されている状態で使うメソッド」とも言えるかも知れません。

## 参考文献・記事

- [徹底攻略Java SE 11 Silver問題集[1Z0-815]対応](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Silver%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-815/dp/4295007625/ref=pd_lpo_14_img_0/356-5238196-1895250?_encoding=UTF8&pd_rd_i=4295007625&pd_rd_r=1c21865b-a9fe-43e8-ac01-46170e44abca&pd_rd_w=9El0Q&pd_rd_wg=hh5Hc&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=72AVH18EM90CKG00CH5W&psc=1&refRID=72AVH18EM90CKG00CH5W)
- [Javaのconcatメソッドを使って文字列を連結する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/27358)
クローンしておいてと言われたら

#「これクローンしておいて」
###えっと・・・・:no_mouth:
毎回何か始めるときにはやってるはずなのに忘れてしまう残念な頭なので、メモしておきます。

#github上で緑のボタン「↓Code」
ポチ
すると手前になんか窓が出てくるので、`git@github.com:〜`とかurl的なやつをコピー。:floppy_disk:このフロッピーマークみたいなやつ押すとコピーできる。

#それをクローンしたいディレクトリでクローン
これをクローンすればいいんだな！！と、
適当なところでクローンしないように
きちんとディレクトリを確認しましょうね。:stuck_out_tongue_closed_eyes:
ちなみにクローンするとディレクトリが新規作成されるので、わざわざ新しいフォルダを用意したりしなくていいよ！

```
git clone　なんちゃら
```

これでクローンが完了します。
Windowsで重たいファイルの中身を確認する方法

ファイルの中身を確認する必要があったのですが、重たすぎて開くことができないものが多くありました。
仕事で困ってしまったので、対処法を忘備録として残します。
間違いなく他に良い方法もあると思っているので、簡単な方法を知っている方いたら教えてください。

###環境
Windows10

###方法
①sublime（多少探してみたが、個人的には一番sublimeがしっくりきました）。
②PowerShell。

###手順

1.対象のファイルをダウンロード。僕が開きたかったファイルは拡張子が.xmlや.gzなどでうまくダウンロードできないことがありました。その場合は7-zipをインストールするとなんとかなります。
URL：　https://sevenzip.osdn.jp/

２.7-zipでプログラムを開き、開くボタンを押します。

3.7-zipでファイルを開いた後、sublimeでファイルを開きます。
URL：　https://www.sublimetext.com/
容量が大きいGBになってしまうとsublimeは、開くまでに相当時間がかかります。しかし、他の開き方と比べると時間はかかっても失敗することはないらしいです。ただ、何時間も待つことになるので現実的ではないです。
その場合は、4.PowerShellで中身を確認します。

4.Windows標準装備であるPowerShellで中身を確認します。
以下コマンドを使ってファイルの中身を確認します。

```PowerShell

Select-String C:¥Users¥[username]¥Desktop¥testfile -Pattern antagonist
#この場合、デスクトップにあるtestfileでantagonistという単語が使われている場所を確認する。

Get-Content -Path  C:¥Users¥[username]¥Desktop¥testfile -Wait -Tail 20
#この場合、デスクトップにあるtestfileの最後20行を表示する。


Get-Content -Path  C:¥Users¥[username]¥Desktop¥testfile -Wait -Head 20
#この場合、デスクトップにあるtestfileの最初20行を表示する。

Select-String C:¥Users¥[username]¥Desktop¥testfile -Pattern 1159529　-Context 7,1
#この場合、デスクトップにあるtestfileでantagonistという単語が使われている場所の前７行と後ろ１行を表示する。

Get-Content C:¥Users¥[username]¥Desktop¥testfile | Select-Object -first 44619100 | Select-Object -last 100
#44619100行目より上100行を表示する
```

最初からSublimeではなくて、PowerShellで取り出すのも良いと思いますが、個人的にはsublimeで開いた方が全体像を確認することができて仕事がスムーズに進むことができたので、1GB以内であればsublimeをまず使ってみるのも良いと思います。
DjangoでForeignKeyのon_deleteをDO_NOTHINGにした時、db_constraint=Falseも指定しないとIntegrityErrorが発生する。

#delete時のIntegrityErrorエラー
掲題の通り、ForeignKeyモデルフィールドで**on_delete**引数に**DO_NOTHING**を使用する時、**db_constraint**引数を**False**にしておかないと、リレーション先のモデルオブジェクトを削除した時に**IntegrityError**'Cannot delete or update a parent row: a foreign key constraint fails'(Mysql)が発生する。

+ **on_delete=DO_NOTHING**：リレーション先オブジェクトの削除更新時のアクションを"何もしない"にする。
+ **db_constraint=False**：明示的に外部キー制約を行わない事を指示する。データ整合性が失われるので集計用のトランザクションなどフロントから直接参照されないモデル以外には使用しない方がよいかも。

#参照
* [DO_NOTHING](https://docs.djangoproject.com/ja/3.0/ref/models/fields/#django.db.models.DO_NOTHING "DO_NOTHING")

* [ForeignKey.db_constraint](https://docs.djangoproject.com/ja/3.0/ref/models/fields/#django.db.models.ForeignKey.db_constraint)
[Elixir] GenServer.init関数で重い処理

この記事は [Elixir その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir2) 18日目です。

前日は、「[[Elixir] プロセス使用を検討する基準](https://qiita.com/mnishiguchi/items/7e03e6664900f4402d40)」でした。

## はじめに

さて、Elixirのプロジェクトでは、大抵の場合、Supervisionツリー構造を作りプロセスを管理することになると思います。Supervisorはinit関数の中で、子プロセスリストに「指定された順番」で、「同期的」にプロセスが生成されます。各子プロセスのinit関数が処理している間は、Supervisor.initがプロックされている状態になります。ですので、子プロセスのinit関数は、できる限り重い処理を避けたいです。

ほとんどの場合、子プロセスのinitは初期の状態を準備する軽い処理でしょうが、万が一何らかの理由で重い処理が必要な場合に備えておいたに越したことはありません。

アイデアは「[Elixir in Action by Saša Juric](https://www.manning.com/books/elixir-in-action-second-edition)」で学んだものです。コードは手作りです。

## 実験１：子プロセスのinit内で重い処理をする

スタート直後、子プロセスが処理している間、IEXがフリーズしてしまいます。

```elixir
defmodule MyApp.Supervisor do
  use Supervisor

  def start_link() do
    Supervisor.start_link(__MODULE__, nil)
  end

  @impl true
  def init(_args) do
    children = [
      {MyApp.HelloServer, nil},
    ]

    Supervisor.init(children, strategy: :one_for_one)
  end
end

defmodule MyApp.HelloServer do
  use GenServer

  def start_link(_args) do
    GenServer.start_link(__MODULE__, nil)
  end

  @impl true
  def init(todo_list_name) do
    long_task()
    {:ok, nil}
  end

  defp long_task do
    IO.puts("A long task stated")
    Process.sleep(5000)
    IO.puts("A long task finished")
  end
end
```

```elixir
iex> MyApp.Supervisor.start_link()
A long task stated
A long task finished
{:ok, #PID<0.249.0>}
```

## 実験２：子プロセスのinitから自分プロセスにメッセージを投げ処理を委譲

スタートしたらすぐに終了する。子プロセスの処理が非同期で処理される。

```elixir
defmodule MyApp.HelloServer do
  use GenServer

  def start_link(_args) do
    GenServer.start_link(__MODULE__, nil)
  end

  @impl true
  def init(todo_list_name) do
    send(self(), :initialize_state)
    {:ok, nil}
  end

  @impl true
  def handle_info(:initialize_state, state) do
    long_task()
    {:noreply, nil}
  end

  defp long_task do
    IO.puts("A long task stated")
    Process.sleep(5000)
    IO.puts("A long task finished")
  end
end
```

```elixir
iex(10)> MyApp.Supervisor.start_link()
A long task stated
{:ok, #PID<0.300.0>}
A long task finished
```

一点注意が必要です。プロセスをローカル名で登録したい場合、外から誰でもそのプロセスにアクセスできてしまうので、初期化のメッセージが最初という保証がなくなります。
その場合はちょっとしたハックでプロセスの登録を遅らせる事により、解決できます。

```elixir
defmodule MyApp.HelloServer do
  use GenServer

  #...

  @impl true
  def init(todo_list_name) do
    send(self(), :initialize_state)

    # 初期化後にプロセスを登録することにより、初期化が最初のメッセージであることを保証。
    Process.register(self, __MODULE__)

    {:ok, nil}
  end

  # ...
end
```

## どっちがいい？

非同期でよいのであれば、重い処理を非同期にすればSupervisorの起動を早くできる前者がよいと思われます。ただし、次の子プロセスが前の子プロセスの処理に依存する場合は時間がかかろうが同期されることになると思います。どうでしょうか？

## さいごに

今後更に新しいことを学んだら随時内容も更新していこうと思います。

---

明日は「[[Elixir] Supervisorのchild_spec](https://qiita.com/mnishiguchi/items/f4668697cb371ea6bb39)」です。引き続き、Elixirを楽しみましょう。

- [Elixir その1 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir)
- [Elixir その2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/elixir2)
- [【毎日自動更新】QiitaのElixir LGTMランキング！](https://qiita.com/torifukukaiou/items/1edb3e961acf002478fd) by @torifukukaiou
電池ボックスの修理

今年は「おうちハック」のアドベントカレンダーがありませんが、なんとなくそんな気分での投稿です。

最近修理した電池ボックスネタです。

一つ目はSEIKOの壁掛け時計の電池ボックスで、液漏れでマイナス側の端子が割れてしまいました。そのまま電池を入れるとマイナス側が凹んだ位置になり、縦に入れてるのでプラス側が接触しません。

使わなくなった単三の電池ボックスのマイナス側のばねを切り取って、プラス側に入れました。最初マイナス側に入れたんですが、単一の重みがもろにかかって効果がなかったので、上方のプラス側に入れました。

![IMG_20201212_105530.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/44f8bada-50df-6499-560c-3badd1a90312.jpeg)

壁にかけて使ってみたところ、しばらくすると左に傾きます。おそらく振り子の駆動が片側になっていて、そのモーメントによって傾くような気がします。裏の片側のふちに画鋲を打って傾かないようにしてみました。

二つ目は灯油ポンプ(三宅化学 TP-20R)でスイッチを入れても動かなくなりました。分解してスイッチや接点をクリーニングして接触部分の角度などを調整したところ動くようになりました。

![IMG_20201212_105436.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/fe770bab-2f4c-e7fd-18cc-b1b368cd5355.jpeg)

電池が新しいのに回転音が低く元気のないときはまだ完全じゃないので、もう一度クリーニングしてみると良いです。

この機種の後継のモデル(TP-S20S)は単三が二本になりました。単一二本は重くバランスが良くありません。

三つ目はSONYの古い携帯ラジオ(ICF-10G)でこれも液漏れで、マイナス側の端子が折れてしまったので、使わなくなった機器から取ったばねを入れました。

![IMG_20201214_105106.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/f7f7afeb-59fb-8de8-9f4a-576c1e737bcf.jpeg)

乾電池は液漏れに注意が必要です。長期間使用しない機器の電池は抜きましょう。
備忘録(Ruby:基礎文法:配列)

##配列
####配列
１つの変数で複数の値をもつことのできる値
引き出しのようなロッカーのイメージ
配列の中には複数の値を入れることができる
配列はデータを入れるとそのデータに順番がつけられる
データと順番が紐付けられる

####要素
配列の中のデータは「要素」と呼ばれる
配列へ入れた順に1番目,2番目,... と自動的に順番が割り振られる

```ruby
#配列の宣言
変数 = []

#例
pencil_case = ["ペン", "消しゴム", "定規"]

puts pencil_case
```

####配列演算子(<<)
生成した配列に新しい要素を追加したいときに使用
配列に続けて<<を記述し、追加したい要素を後ろに書く

```ruby
配列 << 追加する要素

#例
pencil_case = ["ペン", "消しゴム", "定規"]
pencil_case << "えんぴつ"

puts pencil_case
```

####添字
配列の各要素に割り振られた番号のこと
添字は「0」から始まる

```ruby
#配列の要素を取得
配列[添字]
```

要素の取得は、配列から要素を取り出しているのではなく、値をもらっているだけ
取得した要素は、別の変数に代入することができる

```ruby
変数 = 配列[添字]

#例
pencil_case = ["ペン", "消しゴム", "定規"]
pencil_case << "えんぴつ"

puts pencil_case
puts pencil_case[1]
```

####配列の値の変更
要素の取得方法と同様に、角括弧[]で変更したい要素の添字を囲う
その後、代入演算子で変数に値を代入するように記述

```ruby
配列[添字] = 値

#例
pencil_case = ["ペン", "消しゴム", "定規"]
pencil_case << "えんぴつ"
pencil_case[1] = "修正ペン"

puts pencil_case
puts pencil_case[1]
```

####配列が持つ要素の数を数える

####lengthメソッド(配列)
配列が持つメソッド
配列の要素数を返す

```ruby
# 配列内の要素の数を返す
irb(main):001:0> ['あお', 'きいろ', 'あか'].length
=> 3

#例
pencil_case = ["ペン", "消しゴム", "定規"]
puts pencil_case.length

pencil_case << "えんぴつ"
pencil_case << "付箋"
puts pencil_case.length

#最初は「ペン、消しゴム、定規」という3つの要素が入っているので、3がlengthメソッドで返ってくる。
#その後「えんぴつ、付箋」を追加したので5が返ってくる
```
Suspenseを自作する

# 始めに
Vue.jsも3系からSuspenseが実装されましたが、今一な点がいくつかありました。

+ コンポーネントとして作らないといけない
+ ページングなど、複数回ローディングすることはできなそう

参考
[Vue.js 3.0 の新機能を試す。 〜 Suspense 編〜](https://qiita.com/ryo2132/items/7225d60768a15dabfb9f)

そこで自分がやりたいことを満たすようなコンポーネントを自作してみたので、それの備忘録として記事に残します。

# 自作コンポーネント（SuspensePromise）の機能
## Promiseを渡して状態を監視する
以下のようにPromiseをコンポーネントに渡し、状態に応じて表示内容を切り替えられるようにしています。promiseを渡すだけなので、新しくしたらまたローディングの表示ができるようになります。状態の切り替えの際にresolve, rejectで送ったデータも受け取って表示させることができます。

```vue:SuspensePromiseの使用例
<template lang="pug">
div
  SuspensePromise(
    :promise="$data.promise"
    :waitTime="100"
  )
    template(#pending)
      p pending...
    template(#resolved="{ data }")
      p resolved, {{ data }}
    template(#rejected="{ data }")
      p rejected, {{ data }}
</template>
```

実行イメージは以下のような感じです。
![Dec-12-2020 10-29-50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187768/ec81a625-0863-2e75-ea5f-218693858f16.gif)

## pending状態の表示待ち時間を指定できる
こういうローディング系で一番気にしているのが「一瞬ローディングが出てくる」ことです。resolveされるタイミングが早い場合はこういうローディングを出さずにしたいと思って調整しようと思うと、結構大変だと思います。

![Dec-12-2020 10-31-12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187768/738db735-6a16-e055-62a7-01193d5c428b.gif)

それをこのコンポーネントでは解消してくれて、`waitTime`にpending状態を表示するまでの待ち時間を指定できます。この時間がくる前にresolveされれば、pendingを表示させずにすぐ結果を出すことができます。

![Dec-12-2020 10-32-31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187768/848d009a-03e6-b61b-7a9e-3bf0e4827a95.gif)


# 終わりに
以上が自作した機能の紹介でした。詳細の実装はCodePenに書いていますので、興味がある方は是非みてください。

<p class="codepen" data-height="347" data-theme-id="dark" data-default-tab="js,result" data-user="wintyo" data-slug-hash="vYXywga" style="height: 347px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Suspenseの自作（SuspensePromise）">
  <span>See the Pen <a href="https://codepen.io/wintyo/pen/vYXywga">
  Suspenseの自作（SuspensePromise）</a> by wintyo (<a href="https://codepen.io/wintyo">@wintyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
アマチュア無線のススメ


■はじめに
　当初は海外に関する記事を記載する予定だったが、そういえば今年は2月のロシアが最後の出張で今年はどこもいっていない!! ということで小学生から始めたアマチュア無線について書いてみたいと思う。

■無線ってなんだ
　携帯電話の普及により無線の存在は薄れつつあるが、昭和の時代(笑)は一世を風靡したものである。タクシーには当たり前についているが、3～40年まえは車にアンテナを取り付けることが男のロマンだったような気がする(笑)
携帯電話も電波を使って相手の声を届ける「無線」には変わりないのだが、いつでもどこでもつながるという便利さがあまりロマンを感じない。

■携帯電話
　既に記載した通り携帯電話も無線ではあるが、携帯電話の出力は非常に小さいもので、町中にある基地局を通して相手に声を届けるシステムである。じゃあ直接相手の電話を呼び出せはいいじゃんとなるところだが、小禄から東京まで連絡したいんだったら相当のパワーがないと届かない。これを全国民がやってしまうと電波障害が起きて大変なことになる! ということで大きな出力が必要であれば免許制にしようということで電波法が制定された。
携帯電話は小電力ということもあり、おもちゃのトランシーバー同様に免許がなくても利用する事ができる。

■アマチュア無線
　自分が免許を取得したのは昭和58年。ボーイスカウト全盛時代にキャンプや非常時に必要ということで当時の隊長のススメで取得。電波法や無線工学など大人と一緒に勉強して何とか合格。当時取得したのは「電話級アマチュア無線技士」という一番下のものであった。
ライセンスは上位から
　・第1級アマチュア無線技士
　・第2級アマチュア無線技士
　・電信級アマチュア無線技士(現在：第3級アマチュア無線技士)
　・電話級アマチュア無線技士(現在：第4級アマチュア無線技士)
となっていて、まあ駆け出しからのスタートで始まった。

■無線通信の醍醐味
　お年玉を貯めて小さなVHFトランシーバーを購入。VHFとは周波数帯で30～300Mhz内の周波数でFMラジオ局もこの周波数帯を使っている。
　例：FM沖縄(87.3MHz)
　※ラジオ局やテレビ局も無線局の免許を取得している(プロのね)
　自分たちアマチュア無線局は割り当てられた周波数を利用して様々な人と通信をして楽しんでいるが、なんといっても一番の楽しみは自分で通信機(無線機)を制作することや電波を送信するアンテナを制作する事だと思う。
　ただ単純にワイヤーを伸ばしてアンテナを作ればよいというものではなく、利用する周波数によって長さが変わるということである。周波数には1秒間にどれくらいの距離で振動しているかという波長というものがある。(下図参照)
![freq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/922572/a20d95e9-b578-138a-677c-2c9a08039f40.png)
[参照]http://www.phosc.jp/cms/article/000004.html
計算式は省くが、上記FM沖縄のラジオ局だと3.4mくらいの波長になる。
ちなみにAM局の場合はMFをいう1,000Khz前後の中波帯で波長も100～1000mという長さになる。AM局のアンテナが鉄塔で非常に長いワイヤーを張っているのがそれ。
　こういう波長を計算しながら効率よく遠くまで飛ばせるアンテナを制作するのである。もちろん製品としてたくさん売っている(笑)

　そんな感じで、小中学生のころはアンテナ張り巡らせて、どこまで通信できるかいろいろ挑戦していた理系学生だった。今は体育系(脳筋型)だがどちらもいけるクチである。

　通信範囲はVHFのトランシーバーだと見通し距離レベルだが、春先にはスポラディックE層(Eスポ)の発生により、電波の異常伝搬が発生し、県外の局が入ってきてドキドキしたものである。これはFMラジオでも経験する事ができ、春先に県外のFM局を傍受することができる。
　そして短波帯(HF)を利用したら、県外または海外の局とも通信することができる。しかし、免許は一番下のライセンスなので出力も10wまでと限定されていて、海外の珍しい局と通信しようとなると高出力の局につぶされてしまい、太刀打ちできないということで、この前一つ上の第3級アマチュア無線技士の資格を取得。これは50wまで利用可能(一気に5倍!!)。

　ただ今は仕事もあり、十分に趣味を満喫することはできないが、近いうちに没頭したいと思う。

■まとめ
　ごちゃごちゃと書いたが、アマチュア無線って過去の物じゃん!スマホがあるさーって思っているアナタ!! 地震などの災害で基地局がダウン、停電となった時はどうだろう? 阪神淡路大震災などでも活躍し、非常時の通信手段としてはもってこいだと思う。ボーイスカウトでも「そなえよつねに」とうたっており、日頃から準備しておけば大丈夫! ことが起きてからでは遅いので、皆さんも免許取得にチャレンジしてはいかが?

■おわりに
　なんかクリスマスーって感じなネタを一つ。
　毎年クリスマスにNORAD(北米航空宇宙防衛司令部)がサンタを電波を使って追跡しているのをご存じだろうか? 今年もクリスマスイブに全世界に向けてサンタクロースが出発するので是非追跡してほしい。(日本語訳あり)

　公式サイト：https://www.noradsanta.org/
　今年で65年らしい!!

　昨年の様子：https://youtu.be/iBOEpIUsrjI

クリスマスまであと2週間!! よりクリスマスを🎅
【3D OD Stereo】PSEUDO-LIDAR++ : Depth Cost VolumeとDepth Correlation

<h1>PSEUDO-LIDAR++:ACCURATE DEPTH FOR 3D OBJECT DETECTION IN AUTONOMOUS DRIVING</h1>


<h2>Depth Cost Volume</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/02e99c18-2398-b6d9-4179-9357662859f0.png)
Disparity Cost VolumeをDepth Cost Volumeに変換する。DisparityのCost Volumeに3D CNNを掛けると同じFilterでDisparity(1/Depth)をSmoothingするので、Disparityの小さい(遠い)物体が余計にSmoothingされてしまう事が指摘されてました。depth = f * b / dispの座標変換をしてから3D CNNでを掛けると精度が上がるというのに衝撃を覚えました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/2a009bc8-6510-a09f-78c9-5f5c56291509.png)

<h2>Depth Correlation</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/913d82c9-6dbd-c7e1-5e1f-ea3fac2b14ce.png)
LiDARのPointを使ってStereo Depthで得たDepthマップのオフセットを修正します。


<h2>結果</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/4833189d-4cc6-fffd-ec9a-ad9f6218092c.png)
Depth Cost VolumeもDepth Correctionも両方とも精度を上げている！！ 

<h1>結論</h1>
・Cost VolumeをDisparityからDepthに変換する事でより意味のあるSmoothingが出来る。
・Depth Correlationをする事でDepthのOffsetを4 beamのLiDARで修正する事が出来た。


<h1>参考文献</h1>
PSEUDO-LIDAR++: ACCURATE DEPTH FOR 3D OBJECT DETECTION IN AUTONOMOUS DRIVING
https://arxiv.org/pdf/1906.06310.pdf
【Ktolin初心者】ProgressBarを実装してみた

# はじめに
よくある画面読み込み中にあるリクエストAPIクリエストの処理待ちに使えわれるProgressBarについて解説してみます。

## この記事書いてる人
株式会社evoluのAndroidエンジニア(3ヶ月目)

## イメージ
progress barの実装デモ画面になります
こんな感じで読み込みが終わると次の画面が表示されます
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320838/8c7bafe2-404e-b29b-3b63-dda4baa14c2c.png" width="400">

## コード

```MainActivity.kt
package com.example.progressbar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ProgressBar

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val progress = findViewById<ProgressBar>(R.id.progress_bar)

    }
}
```

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

これでひとまずActivityにProgressBarを表示することができます
BLE


環境はMacOS
https://bleak.readthedocs.io/en/latest/troubleshooting.html#macos
上のURLに飛ぶ。MACの場合は以下のURLに移動し、左にあるsearch downloadsのところにadditional toolsと入力し、それぞれのバージョンに対応したやつをダウンロード。入れたものをクリックし、hardwareというフォルダに移動。packetlogger.appを起動する。
https://developer.apple.com/download/more/
![ddab8f5a2c247415743c7ac52095d528.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/daff074e-7bd7-1a00-c305-ff3d8e533438.png)
clearボタンを押し、これまでのログを削除してから、以下の手順を踏む。


![a649a0996ee5d5208077e26916b2c96f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/829ab7eb-06a9-fff9-79f2-9f75742b7c10.png)
discover.pyを用いてaddressを入手する。
今回はiPhoneを利用する。
手に入れたアドレスをservice_explore.pyの６４行目に入れ、実行する。
windowsの場合は62行目（多分）
![1bbfd4b2111f76f4d33b5da42d778564.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/a558f729-508f-8a6b-9d39-385a7613e4e7.png)
とりあえず一番上のcharacteristic以下にあるUUIDをコピーしread_ble.pyの６行目に入れる。一番初めに手に入れたaddressを２１行目に入れる。windowsだと１９行目（多分）(write,notify,extended-properities)と書いてあるものは読み込み失敗するっぽい。(read,notify)か(read)のUUIDを使う。
![7fda6667618b315913a969adb2fb99a7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/54039822-a5b7-c748-7c93-2223f2f1c979.png)
UUIDの一番右端にあるValue:の値が返ってきている。UUIDを変化させると返ってくる値も異なる。
![da726be88aacf8bc1388687672a32627.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/fd1b6c2c-9984-5596-a662-cd9990510961.png)
できたらpacketlogger.appの画面に戻りstopを押す。
![ddab8f5a2c247415743c7ac52095d528.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/170738e8-320f-48a9-4729-c0a4af848344.png)
そしたら自分の接続したデバイス名がAddrという場所にあるので探す。![e6e31fa560070b85b285988083f8eb76.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/9619843a-2edd-5d00-9efa-fd60f4c9d4b1.png)
見つけたら矢印マーク(>)をクリックすることで展開が可能。![f3ed0e016b972d1a53c988b6929c4b26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/8176f5af-1ab1-eb80-b7f9-4c5804222a52.png)
デバイスフィルターをかけることで、絞れる。
![ede6e08251b37716af970106357e25c4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/a5244a40-a87b-c0eb-7205-7cec9554c339.jpeg)
command+Sをすることで保存が可能。

ここからwiresharkの導入をする。参考（https://qiita.com/y-vectorfield/items/3aaaa98eb2aeca223ecf）
wiresharkを導入し、さっき保存したファイルをwireshark常にドロップすることでwireshark上で情報を確認できる。![258cabd7ba258dc5d98663c3ba89b054.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/ade011fa-7623-03f0-9f6e-b9827fc84ba9.png)

splunkにもデータとして利用することが可能だった。
![479a02a7a0c3d38c672686dff2e661c5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256914/c55eba7e-e55a-70e3-10b8-ebac44fb4602.png)
【AzureAD】Salesforeの認証シーケンス図を書いてみた

SalesforceとAzureADのSSOは出来ましたが、
イマイチ認証の流れを説明できない部分があった為、
シーケンス図を書いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480057/e83e682e-dba2-c157-472d-0dc416bd73b4.png)

ちなみにAzureADと3rdパーティ製アプリをSSO設定する場合、
ADFSとoffice365を認証連携している環境だと少し動きが複雑になりますね。
参考までに書いておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480057/084ab0ed-faf0-8c69-510b-1a9d168becb8.png)


以上です！！
Udemy講座を利用してAWS SAAに合格した話

本記事は、[あなたの学びをシェア！2020年までにUdemyで学んだこと03【PR】Udemy Advent Calendar 2020][1]の13日目です。

# はじめに
業務で、AWS認定ソリューションアーキテクトアソシエイトが必要になったため、Udemyの講座を利用して学習し受験、合格することができたので、私なりの勉強法をご紹介したいと思います。

# 受講したUdemy講座
これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）
https://www.udemy.com/course/aws-associate/

クラウドプラクティショナーも直近で取得はしており、その際はAWSが提供するトレーニングで学習したのですが、難易度の乖離（試験のほうが難しい）を感じました。そのため、サードパーティの講座を探したところ、ネット上で評判が良かった上記講座を見つけ、購入しました。
私はブラックフライデーのセールで購入したため、1,300円で購入できました。

# 勉強の流れ
AWSの実務経験は3年弱あったのですが、講座を購入してから受験日まで2週間しかなかったため、以下の流れで学習しました。

1. セクション3．AWSとアソシエイト試験の概要と、セクション8. Well Architect Frameworkを受講し全体を把握する
- 模試を受験し、弱点を見つける
- 弱点部分(私の場合はデータベース、SQS、SNS、CloudFormationなど)の講座を受講し、補強する
- 2と3を繰り返し、3回分の模試を消化

模試は2回分は本番のテスト形式になっていますが、残りの1回分は小テスト形式(多肢選択式がない)であるため、小テスト方式のものを先に消化しました。
3回目の模試を消化したのが試験当日の受験4時間前で、しかも不合格だったのは焦りました……

# 受講して良かったポイント
AWSの模試が3回分あり、それぞれの問題ごとに詳しい解説が記載されているので、学習がしやすかったです。また、講座内の説明が丁寧にされているので、今までAWSを触ったことがないけど触る必要があるといった場合の初心者講座としても良い教材だと思います。

# 受験結果と感想
結果は768点で合格でしたがギリギリでした。試験問題簡単じゃん！と思いながら解いていたので、もっと余裕があると思っていたのに……
模試を繰り返しやらなかったため、自身の知識として定着していなかったのが反省点です。（受験を急ぎすぎた気もします。）復習しつつ更なる高みを目指せればと思っています。

[1]:https://qiita.com/advent-calendar/2020/udemy03
WordPressテーマ開発で最低限必要なファイル は２つ！

##はじめに
下記の方向けで書きます。


* 取りあえずテーマを表示させたい
* WordPressテーマ開発したい
* php初心者


##WordPressテーマ開発で最低限必要なファイル 
では、
WordPressでテーマをアップロードしたとき最低限必要なファイル（構成）についてです。

今回、紹介するのは
WordPressの設定でテーマとして認識されるための構成です。

次のファイルを同じ階層にまとめて、アップロードすれば
とりあえずテーマをWordPressが認識して動くようになります。

###index.php

トップページ用テンプレートになります。

中身は何でも可能！！
ひとまず、「Hello World」的な文言でも書いておきます。

HTMLのベタ書きでもOKです。

```php:index.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet">
    <title>サイト名</title>
</head>
<body>
    <p>Hello World</p>
</body>
</html>
```


###style.css

WordPressテーマ作成で
陥りがちなのが、下記のstyle.cssを用意していないことです。
これ忘れると、テーマはうごかないです。

```css:style.css
/*
Theme Name: サイトorブログ名等々
*/
```

他に、記載しとくと良いものも合わせると
下のようになります。



```css:style.css
/*
Theme Name: サイトorブログ名等々
Description: テーマの説明
Version: 1.0.0
Author:  テーマの作成者
*/
```
##まとめ

以上です。
あとは上の２つのファイルを１つのファイルにまとめてWordPressにアップロードして確認してみて下さい。
【Java】startsWith・endsWith,メソッド(開始 / 終了の文字を判定する)

# Javaの startsWithメソッド

についてまとめました。

## startsWid]thメソッドとは

要約すると「指定した文字列で文頭や文末が一致しているか、パターンマッチ判定するメソッド」です。

## 【説明】

◯◯Withメソッドは、文字列を指定し、その文字列で始まるどうかを判定するメソッドです。共通して返ってくる値はbool型で「true / false」を返します。

用途に応じた使い分けは以下です。

- 前方一致の判定: startsWithメソッド
- 後方一致の判定: endsWithメソッド

startsWithメソッドは、例えばIf文などに組み込んで電話番号を入力する箇所の数字が090や070で始まるか判定したりするのに使えます。

## 【書き方】

判定したい文字列をString型で指定するなど、基本的に書き方はおなじです。それぞれ書き方はこちら。

```java
// startsWith 構文
文字列.startsWith(String 判定する文字列);
// サンプルコード
str.startsWith("Hello")

// endsWith の構文
文字列.endsWith(String 判定する文字列);
// サンプルコード
str.endsWith("bye")
```

## startsWithの書き方2

startsWithメソッドには、引数offsetを指定した、別の書き方があります。形式は以下です。

```java
// startsWith 構文2
文字列.startsWith(判定する文字列, 判定を開始する位置);

// サンプルコード
str.startsWith("Hello", 3)
```

## メソッドチェイン

あるメソッドが戻すオブジェクトののメソッドをさらに呼び出すことを「メソッドチェイン」と呼びます。

以下のコードは「何文字目から何文字目の文字を調べるメソッド」と「指定した文字列は何から始まるかを判定するメソッド」の役割の違ったメソッドを組み合わせた例になります。

```java
public class Main {

    public static void main(String[] args) {
        String str = "あいうえお";
        // 文字列の２〜４文字の、最初の文字は「い」か判定
        System.out.println(str.substring(1, 3).startsWith("い"));

    }

}
```

```java
true
```

## 【まとめ】

JavaSilverの学習中当たり前のように出てきたのでポイントをおさらいすると

- 前方一致の判定: startsWithメソッド
- 後方一致の判定: endsWithメソッド
- 判定結果はfalse と true
- startsWithメソッドは判定開始位置を指定する書き方ができる

ということを抑えておく。

またメソッドチェーンを用いたややこしいことを聞かれてもいいように、わからなくなったらロジックを書き出す。

## 参考文献・記事

- [徹底攻略Java SE 11 Silver問題集[1Z0-815]対応](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Silver%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-815/dp/4295007625/ref=pd_lpo_14_img_0/356-5238196-1895250?_encoding=UTF8&pd_rd_i=4295007625&pd_rd_r=1c21865b-a9fe-43e8-ac01-46170e44abca&pd_rd_w=9El0Q&pd_rd_wg=hh5Hc&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=72AVH18EM90CKG00CH5W&psc=1&refRID=72AVH18EM90CKG00CH5W)
- [JavaのstartsWith、endsWithメソッドの使い方を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/45863)
備忘録(Ruby:基礎文法:ターミナルでの入出力)

##ターミナルへ値を出力する
####putsメソッド
Rubyに用意された、ターミナルに値を出力するメソッド
getsメソッドで入力された値は、末尾に改行がついた文字列になる

```ruby
#putsメソッド
name = "Taro"

# ターミナルに出力する
puts name

#ターミナル
# nameの値が出力される
=> "Taro"
```

##ターミナルから値を入力する
####getsメソッド
Rubyに用意された、ターミナルに値の入力機能を起動するメソッド
ターミナルで入力された値は文字列としてプログラムに渡される

```ruby
name = gets  # 入力が完了するまで、コードの読み込みは停止

puts name  # 入力が完了するまで、この行は読み込まれない。
```

##文字列末尾の改行を取り除く
####chompメソッド
文字列が使用できるメソッド
文字列の末尾に存在する改行を取り除いた文字列を返してくれる

```ruby
input = gets.chomp

puts "入力した値は#{input}です"
```

####文字列を改行する
##バックスラッシュ記法
 \(バックスラッシュ) から始まる文字の記法
バックスラッシュ記法が適応されるのは文字を "(ダブルクォーテーション)で囲んだときのみ
'(シングルクォーテーション)で囲ってしまうとバックスラッシュ記法は解釈されずにただの文字として出力される

|    記法  |   意味　　|
|---------|----------|
| \n      | 改行      |
|\t       | タブ      |
|\b       |バックスペース|
|\\       |バックスラッシュ|
MySQL　PHPからデータ登録できずエラーになってしまう＆ターミナルから文字を入力した際に削除した文字も表示されてしまう

#環境
mac 11.0.1
docker-compose.ymlappコンテナ　
php:7.4-apachedbコンテナ　mysql:5.5


#事象1 ターミナルでプログラムの実行確認をしている際に、MySQLにデータが登録されない

```tr:ターミナル
[今日のメモ]
登録しました
string(54) "INSERT INTO memo (memo) VALUES (登登録しました)"
Error: データの追加に失敗しました
Debugging: Unknown column '登登録しました' in 'field list'
```
VALUESに出力されている文字がおかしいのは一旦置いておきます。

```P:PHP
　　　　　echo '[今日のメモ]' . PHP_EOL;
        $memo = trim(fgets(STDIN));
        $sql = "INSERT INTO memo (memo) VALUES ($memo)"; 
        $result = mysqli_query($link, $sql);
        var_dump($sql);
```
memoにシングルクォーテーション追加
```$sql = "INSERT INTO memo (memo) VALUES ('$memo')";```
$memoをシングルクォーテーション``''``で囲まないと文字としてではなく、カラムで出力されてしまいエラーになる

#事象2 ターミナルから文字を入力した際に削除した文字もテーブルに登録されてしまう
```tr:ターミナル
% docker-compose exec app php tmp/memo.php
Success: データベースに接続できました
[今日のメモ]
明日
string(9) "明日明"
登録が完了しました
```
実行確認の際に、BackSpaceで誤入力を削除し、上手く削除されてテーブルに、登録されている時もありましたが、上記のようになる事が多く、初めはINSERT文がおかしいのかと思ったのですが、最終的にターミナルでの操作にいきつきました。

``var_dump(変数名)``で出力すると消えていない文字を発見！！

コマンドのショートカットで削除する事にしました。
>削除
コマンド	意味
Ctrl + h (BackSpace)	カーソルの後方を1文字削除
Ctrl + d (Delete)	カーソル上の1文字削除
Ctrl + w	単語1個文削除
Ctrl + d は何も入力していない状態で入力するとログアウトしてしまうので注意が必要。

>カット,ヤンク
コマンド	意味
Ctrl + k	行末まで削除
Ctrl + u	行頭まで削除
Ctrl + y	最後に削除した内容を挿入
カットが切り取りで、ヤンクが貼り付けと覚えておけば大丈夫です。

私の現在の設定では、Ctrl + h (BackSpace)は使用できませんでした。

```:ターミナル
[今日のメモ]
明日
string(6) "明日"
登録が完了しました
```
SELECT * FROM memo;

```:MySQL：テーブル
| 71 | 明日明              | 2020-12-12 04:26:04 |
| 72 | 明日                | 2020-12-12 04:26:29 |
+----+--------------------+----
```

無事完了！

参考にさせていただきました！ありがとうございます！
[爆速でターミナルを使うためのショートカット集]()

間違えている所や、ここもっと勉強するといいよ！などコメントいただけましたら、かなり有り難いのでよろしくお願いいたします笑
Azureハマりどころ1（「仮想マシン'[VM名]'を起動できませんでした。エラー:VM'[VM名]'が汎用化されているため、操作'StartVM'は許可されません」に対する解決策） 

# 背景
- 今まで起動できたVMがキャプチャ（VMのイメージ）を取得したあと何故か起動できない
    - 「仮想マシン'[VM名]'を起動できませんでした。エラー:VM'[VM名]'が汎用化されているため、操作'StartVM'は許可されません」とエラーが出る※画像はVM名を'samuraiVM'とした時に表示されるエラー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/936440/bf7d25f8-5dbf-22d4-797a-ef90bc4d8045.png)

# 原因
- キャプチャを実行すると「一般化済み」というフラグが立てられ、「一般化済み」としてマークされたマシンは今後起動することができないとのこと。こちらはAzureで想定された動作であり、詳しくは以下の公式ドキュメントで紹介されている
    - 参考資料：「キャプチャ」を実行した仮想マシンが起動できない原因と対処策について
        - https://docs.microsoft.com/ja-jp/archive/blogs/jpaztech/cannot-start-vm

# 解決策
- VMに紐づいているディスク（ボリューム）から新たにVMを新規作成することで復活できる。詳しい手順については、先述した公式ドキュメントを参照すべし

# 補足
- イメージを作成するときに、「一般化」ではなく「特殊化」を選択すれば、元のVMも継続して使える
    - ただし、特殊化は元のVMのユーザーアカウント、アプリケーション、その他の状態データが保存されるため（既存のVMの仮想ハードディスク(VHD)のコピー）、新規立ち上げしたVMは、元のVMのコンピューター名を保持する。場合によっては、この重複情報によって問題が発生する可能性があるので注意が必要とのこと
        - 参考資料：Microsoft AzureのGitHubドキュメント（MicrosoftDocs/azure-docs.ja-jp）
            - https://github.com/MicrosoftDocs/azure-docs.ja-jp/blob/master/articles/virtual-machines/windows/create-vm-specialized.md



※記事タイトルの「ハマりどころ」に関しては、あくまで某の体験に基づくものであり、何某にとっては5mm程度の窪みだったりする。奇な世界でござる。

※そういえばちゅらデータなる会社でオープンな忘年会をやるらしいので興味ある方は参加すべし
https://churadata.connpass.com/event/196682/
アルゴリズム

#アルゴリズム
- k近傍法
- k-means


##k近傍法
k近傍法は機械学習アルゴリズムの一つであり、分類問題を解くための教師あり学習である。
###訓練データ生成

```python
%matplotlib inline
import numpy as np
import matplotlib.pyplot as plt
from scipy import stats

def gen_data():
  x0 = np.random.normal(size=50).reshape(-1, 2) - 1
  x1 = np.random.normal(size=50).reshape(-1, 2) + 1.
  x_train = np.concatenate([x0, x1])
  y_train = np.concatenate([np.zeros(25), np.ones(25)]).astype(np.int)
  return x_train, y_train

X_train, ys_train = gen_data()
plt.scatter(X_train[:, 0], X_train[:, 1], c=ys_train)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906331/73dc654f-6815-5223-a803-f198a55e8504.png)

###予測
予測するデータ店との距離が最も近いk個の訓練データのラベルの最頻値を割り当てる。
ここでkを変化させると結果も変わる。

```python
def distance(x1, x2):
    return np.sum((x1 - x2)**2, axis=1)

def knc_predict(n_neighbors, x_train, y_train, X_test):
    y_pred = np.empty(len(X_test), dtype=y_train.dtype)
    for i, x in enumerate(X_test):
        distances = distance(x, X_train)
        nearest_index = distances.argsort()[:n_neighbors]
        mode, _ = stats.mode(y_train[nearest_index])
        y_pred[i] = mode
    return y_pred

def plt_resut(x_train, y_train, y_pred):
    xx0, xx1 = np.meshgrid(np.linspace(-5, 5, 100), np.linspace(-5, 5, 100))
    xx = np.array([xx0, xx1]).reshape(2, -1).T
    plt.scatter(x_train[:, 0], x_train[:, 1], c=y_train)
    plt.contourf(xx0, xx1, y_pred.reshape(100, 100).astype(dtype=np.float), alpha=0.2, levels=np.linspace(0, 1, 3))

n_neighbors = 3

xx0, xx1 = np.meshgrid(np.linspace(-5, 5, 100), np.linspace(-5, 5, 100))
X_test = np.array([xx0, xx1]).reshape(2, -1).T

y_pred = knc_predict(n_neighbors, X_train, ys_train, X_test)
plt_resut(X_train, ys_train, y_pred)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906331/78df1c4f-4f38-b3c6-d4a3-0e6bbe19ec7d.png)

###numpyで実装する場合

```python
xx0, xx1 = np.meshgrid(np.linspace(-5, 5, 100), np.linspace(-5, 5, 100))
xx = np.array([xx0, xx1]).reshape(2, -1).T

from sklearn.neighbors import KNeighborsClassifier
knc = KNeighborsClassifier(n_neighbors=n_neighbors).fit(X_train, ys_train)
plt_resut(X_train, ys_train, knc.predict(xx))
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/906331/91ff2c7b-e56f-8122-78ca-7fde801d9f96.png)

##k-means
k-meansは、クラスタリングアルゴリズムの一つであり、与えられたデータをk個のクラスタに分類するための教師なし学習である。
クラスタリングとは、特徴の似ているもの同士をグループ化することである。
###手順
①各クラスタ中心の初期値を設定する

②各データ点に対して、各クラスタ中心との距離を計算し、最も距離が近いクラスタを割り当てる

③各クラスタの平均ベクトルを計算する

④収束するまで②、③の処理を繰り返す
備忘録(Ruby:基礎文法:変数)

####変数
値を入れる箱のようなもの
箱には名前をつけることができ、どんな値が入っているか簡単に識別できるようになる。この名前を変数名という
変数を作ることを変数の宣言という
宣言した変数にどのような値を入れるのか記述することを変数の定義という
####代入
変数の定義には、=を使って代入と呼ばれる記述がされる
Rubyにおいて=が1つの式は必ず『右側の値を左の変数に代入する』という意味

```ruby
# piという変数の中身を、円周率の3.14159であると定義する
irb(main):001:0> pi = 3.14159

# piを呼び出すと、格納された3.14159が返ってくる
irb(main):002:0> pi
=> 3.14159

# 何度実行しても、格納された3.14159が返ってくる
irb(main):003:0> pi
=> 3.14159
```


####再代入
1度値を代入したあとの変数に、別の値を再び代入することもできる
プログラム中に何度でも変更可能であることも変数の特徴


```ruby
# 変数に代入
irb(main):001:0> value = "Hello World"
=> "Hello World"

# 変数を出力
irb(main):002:0> value
=> "Hello World"

# 変数に再代入
irb(main):003:0> value = "See you"
=> "See you"

# 変数を出力
irb(main):004:0> value
=> "See you"

```

また、変数自身の値を利用した計算結果と入れ替えることができる

```ruby
# 変数に代入
irb(main):001:0> number = 7
=> 7

# 変数に1を足す
irb(main):002:0> number = number + 1
=> 8
```

####自己代入演算子
自己代入とは、その名の通り自分自身に代入するということ
通常の演算子を用いた書き方を省略して記述できる

```ruby
#通常の代入演算子
number = number + 1
#自己代入演算子
number += 1
```

| 自己代入演算子 |    例       |           処理                |
|--------------|------------|-------------------------------|
|       +=     |number += 1 |numberに1足した値をnumber自身に代入 |
|-=            |number -= 2 |numberから2引いた値をnumber自身に代入|
|*=            |number *= 3 |numberに3かけた値をnumber自身に代入 |
|/=            |number /= 4 |numberを4で割った値をnumber自身に代入|


####
変数の命名規則
名前は自由に決められるが、一定のルールがある
・変数の中身がわかる
・_(アンダーバーではじめない)
・数字ではじめない
・日本語を使わない
・スペースを含めない
・予約語(Rubyの文法などで予め決まっている単語)を使用しない

```ruby
# 良い例
number = 100
dog = "ワンワン"
message_1000_AM = "午前10時ちょうどをお知らせします。"

# 悪い例
bad number = 777  # スペースが入っているので×
do = "ワンワン"  # doは予約語として存在しているので×
1000_AM_message = "午前10時ちょうどをお知らせします"  # 数字から始まっているので×
```

####なぜ変数を使うのか
１：値の意味がわかりやすくなる
変数が値に名札をつけるような役割となり、ソースコード内で値の意味がわかりやすくなる
２：値を再利用しやすくなる
プログラムの中で同じ値を何度も使う場合、その値を変数にして使うようにすれば、あとからその値を変える必要が生じた場合も変数に代入する箇所を変更するだけ済む

```ruby
# 直径10の場合
irb(main):001:0> menseki = (10 / 2) * (10 / 2) * 3.14  # 面積
irb(main):002:0> ensyu = 10 * 3.14  # 円周

#変数を使って以下のように変更
# 直径10
irb(main):001:0> tyokkei = 10

# 面積
irb(main):002:0> menseki = (tyokkei / 2) * (tyokkei / 2) * 3.14

# 円周
irb(main):003:0> ensyu = tyokkei * 3.14
```
npm install した時に，Maximum call stack size exceeded エラーが発生した時の対処法

#TL; DR
```bash
npm rebuild
```
これで解決した．

#解説？
sharpやjsdomなど，nodejsのNative moduleを使うときにこのエラーが発生する．
ビルドのやり直しで解決する事もあるようだ．
Slackチャンネル内で人気の絵文字ランキングをみたい





#1.DockerでGoの開発環境を作ってServerlessでAWS Lambdaにデプロイする　　
参考
https://qiita.com/kai_kou/items/fc3eab987d7ed2d6f65b

#2.Slack トークン取得　　
参考
https://qiita.com/ykhirao/items/3b19ee6a1458cfb4ba21

#3.SlackのPermission設定とメソッド　　
メソッドとPermissionの一覧
https://www.utali.io/entry/2016/10/03/004421

今回設定するPermission

![スクリーンショット 2019-01-28 19.36.53.png](https://qiita-image-store.s3.amazonaws.com/0/213395/9d9c44b0-b91e-b38d-0aed-540021ea4cf6.png)

SlackAPI確認方法

```
https://slack.com/api/channels.history?channel=[CHANNEL]&count=1000&token=[SLACK_TOKEN]&query=after%3Ayesterday
```
#4.goのmain.goを絵文字カウント取得コードにする。

参考

https://qiita.com/dondoko-susumu/items/73d83ace88c9b507a371

Lambdaで動かせるようにmain メソッドの中を変更する

```main.go
func main() {
    lambda.Start(MainProcess)
}
func MainProcess() {
	
	token := os.Getenv("SLACK_TOKEN")
	if token == "" {
		log.Fatal("SLACK_TOKEN environment variable should be set")
	}
        //続く
```

#5.Lambdaの環境変数に2で作成したSLACK_TOKENを設定する

#6.完成したので実行する

```bash:コンテナ内 
// ビルド
GOOS=linux go build -o bin/main
// lambdaにデプロイ
serverless deploy
// lambdaで実行
serverless invoke -f hello
```

Slackの画面
![スクリーンショット 2019-01-30 21.49.35.png](https://qiita-image-store.s3.amazonaws.com/0/213395/aac0504d-af51-04bd-0ff8-64c7f5ccafa2.png)


- その他参考

How to build a Serverless API with Go and AWS Lambda　　
https://www.alexedwards.net/blog/serverless-api-with-go-and-aws-lambda#creating-and-deploying-an-lambda-function
Vuexの代わりにnuxt-typed-vuexを用いて型の恩恵を受ける🏦

Nuxt を用いてグローバルな状態管理を行う場合、一般的な選択肢は [Vuex](https://vuex.vuejs.org/ja/) かと思います。

一方で Vuex を使って状態管理をしようとすると、TypeScript による型の恩恵を受けにくいというデメリットがあります。昨今は Vuex 4 系での TS 対応など、以前に比べると環境が改善されてきている印象ですが、それでも完全とはいえない状態です。

というわけで Vuex に代わる TS と相性が良い状態管理の方法を調べていたのですが、`nuxt-typed-vuex` が良さそうという結論になりました。

- ドキュメント: [nuxt\-typed\-vuex](https://typed-vuex.roe.dev/)
- リポジトリ: [danielroe/typed\-vuex: 🏦 A typed store accessor for vanilla Vuex\.](https://github.com/danielroe/typed-vuex)

## nuxt-typed-vuex とは？

nuxt-typed-vuex は内部を見た感じ Vuex の薄いラッパーです。ちなみに Nuxt 依存のない typed-vuex という実装も存在するので、Nuxt 以外のプロジェクトへの導入も可能です。

[Getting started \(Nuxt\) \- Typed Vuex](https://typed-vuex.roe.dev/getting-started-nuxt) にある通り、インストールも簡単で以下の手順で導入できます。

1. `yarn add nuxt-typed-vuex`
2. `buildModules`に`'nuxt-typed-vuex'`を追加
3. 型定義ファイルを作成

```ts:型定義ファイル.ts
import { accessorType } from "~/store";

declare module "vue/types/vue" {
  interface Vue {
    $accessor: typeof accessorType;
  }
}

declare module "@nuxt/types" {
  interface NuxtAppOptions {
    $accessor: typeof accessorType;
  }
}
```

## 使い方

Store の定義は [State \- Typed Vuex](https://typed-vuex.roe.dev/state) や [Actions \- Typed Vuex](https://typed-vuex.roe.dev/actions) などを参考にしてください。基本的に、Vuex での Store 定義と似たように実装できます。

呼び出し時は`this.$accessor`を経由します。

```ts
// Accesses this.$store.state.email
this.$accessor.email;

// Accesses this.$store.getters['fullName']
this.$accessor.fullName;

// Runs this.$store.dispatch('initialiseStore')
this.$accessor.initialiseStore();

// Runs this.$store.commit('SET_NAME', 'John Doe')
this.$accessor.SET_NAME("John Doe");

// Accesses this.$store.state.submodule.id
this.$accessor.submodule.id;

// etc.
```

上記の通り、State、Getters、Mutations、Actions に完璧に型の補完が効いている状態になっています。

## 使ってみた感想

`nuxt-typed-vuex` はいくつかのプロジェクトで利用していますが、いまのところ問題なく利用できています。Vuex と似たように使えるのでテストの書き換えもそこまで大変ではありませんでした。`mapGetters` などの機能を使っていない方であれば、簡単に Vuex から移行できるかと思います。

使ってみた実感としては、やはり型がある状態で Store の呼び出しができるのは非常に快適ですね 😄

若干の注意点は、上記呼び出し例にもある通り State と Getters の呼び出し方法に違いがないため同名の State と Getters がある場合は Getters の方が優先されるという点でしょうか。これは大きな問題になることはないと思いますが、通常の Vuex のように Getters から明示的に呼び出す方法は今のところないっぽいので、意識しておいたほうが良さそうです。

## 参考記事

- [nuxt\-typed\-vuex を使って Nuxt の Store に型をもたらす \- unsweets\.log](https://blog.unsweets.net/entries/get-types-of-store-using-nuxt-typed-veux/)
- [Options API を使用して Nuxt\.js \+ TypeScript で Vuex に型指定する方法（nuxt\-typed\-vuex）](https://tech.smartshopping.co.jp/nuxt-typed-vuex)
ディレクトリを作ってそこに移動するコマンド

# は、ないものか

と前々から思っていたんですが、 `&&` でコマンドを繋げることができるんですね。

```terminal
$ mkdir testapp && cd testapp 
```

もっと繋げることもできる。

```terminal
$ mkdir testapp && cd testapp && touch index.html && mkdir css
```
【Intellij IDEA】特定のアノテーションが設定されている内容でunused警告を抑制する

この記事は[JetBrains Advent Calendar 2020](https://qiita.com/advent-calendar/2020/jetbrains)の12日目の記事です。

---

# TL;DR
- 空気を読め（`ALT` + `Enter`）ば設定できる
- `Inspections` -> `Unused symbol`からまとめて設定することもできる

# 問題
`Intellij IDEA`は賢いので、使われていないコードには未使用警告を出してくれます。
一方、アノテーションをリフレクションで読んで使うような場面では、利用されているのに未使用警告が出たりします。

以下は`JMH`のベンチマークコードに未使用警告が出ている様子です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/02269ee4-c5e6-74ef-50f4-532d6c25bb2a.png)

`Supress`アノテーションで警告を抑制することはできますが、一々アノテーションを付けて回るのは非効率です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/57351fcc-593a-cdc2-73ab-d80589e6ac76.png)

# 対処法
空気を読めば、「このアノテーションが付いていたら未使用警告を抑制する」設定が出てくるので、そのまま選べば設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/4cbc144c-6b34-81b2-4ddf-6f8fc5daa8d1.png)

まとめて設定したり、現状の設定を確認したい場合、`Inspections` -> `Unused symbol`からできます。
行き方は幾つか有りますが、先ほどの抑制のオプションから`Edit inspection profile setting`を開き、`Annotations...`を押せば設定が出せます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/a8dbdcb1-6c96-d228-73e2-d61d17a745c8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/ed257236-7fb6-7d59-732d-00ea2759d6d2.png)

以下は`JMH`の`Benchmark`アノテーションを抑制設定した様子です。
`+`マークは`C`が付いているものと`?`が付いているものの2種類有りますが、前者がクラス（アノテーション）単位指定、後者がパターン指定です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280230/3f37f446-add7-9a17-3137-fe2b01f7f8e2.png)
初心者がつまづいたSassのコンパイル方法とか環境構築の備忘録

<h2>前置き</h2>

<h3>私の今の状態</h3>
1年ぐらいProgateやらドットインストールやらで勉強しましたが、超のつく初心者なので専門用語とかがまだよくわかってません。
間違った言葉の使い方とかしてたらそっと教えてください…

<h3>この記事の対象となる人</h3>
同じくProgate終わったかなー、程度の人向け。
私の場合は、ProgateでSassやったし実際に書いてみるかー、と思ったらコード書くための準備？の段階で2～3日詰んだので、同じような人に読んでいただければ幸いです。

<h2>環境</h2>
ここも何書いていいのかわかりませんが…
<ul><li>Windows10</li><li>VSCodeを使用</li><li>コンパイルにはLiveSassCompilerを使用</li></ul>

<h2>手順</h2>
<p>LiveSassCompilerはもうインストールして使える状態になってる前提で進めていきます。<br>インストール方法についてはこちらの記事を参考にさせていただいました。ありがとうございます。</p>
[夢みるゴリラ｜「Live Sass Compiler」の設定方法 - VScodeでSassを書く](https://yumegori.com/vscode-sass-setting20200116)

<ol>
<li>index.html ファイルの head でとりあえずscssのリンクを張る</li>
<p>
&lt;head&gt;<br>
  &lt;link rel="stylesheet" href="css/style.scss&gt;<br>
&lt;/head&gt;<br>
みたいな感じ。

</p>
<li>css/style.scss にカーソルをあてCtrlと左クリックでファイルを作ってもらう</li>
<li>作ったscssファイルに適当になにか書いてコンパイルする</li>

<p>コンパイルした後エクスプローラーを開くとcssフォルダ内にstyle.cssとstyle.css.mapの二つが追加されているはず。</p>
<p>（自動的にコンパイルされる気がするけど、できなければ画面下にあるWatch Sassみたいなのをクリック）</p>
<li>headに張ったリンクの拡張子を.scssから.cssに変更</li>
<p>私はここで思いっきり躓きました。<br>.scssを読み込めばいいと思い込んでいたからです。コンパイルしたcssを読み込ませてあげてください。</p>
<li>書く時はもちろんscssファイルに</li>
<p>最初は読み込むファイルとコードを書くファイルが違っていいのか？って疑問に思ってましたが、勝手にコンパイルしてくれてるのでそれで大丈夫でした。<br>要らぬ心配でした。パソコンはとても優秀です。</p>
</ol>
<p>ここまできたらあとはとにかくコードを書いていくだけです。<br>ほかにもっといい方法があれば教えてください（切実）</P>

<h2>おわりに</h2>
<p>コンパイル　という単語すら知らずにSass使おうとか無謀すぎました。
<br>知っている人からすれば「そんなことで躓くの…？」とびっくりされるかもしれませんが
私は思いっきり躓きました。</p>
<p>私自身が超初心者なんで、「そんな方法でやらなくてももっとこうすればいいのに…」「そこ間違ってるし…」みたいなのがあれば教えてやってもらえたら喜びます。</P>
備忘録(Ruby:基礎文法:文字列と数値)

####Rubyファイルの拡張子
〇〇.rb
####コードの書き方
putsは、ターミナルの画面に文字を表示するための記述
"Hello World"はターミナルの画面に出力される文字
例

```ruby
puts "Hello World"
```

####rubyコマンド
Rubyに関するさまざまな操作が実行できるコマンド
ターミナルにruby [実行したいRubyファイルのパス]と打ち込む

```ruby
# Rubyファイルの実行
% ruby sample.rb
```

####文字列
プログラミングの中で文字を扱うための値
文字列を生成するには、文字をダブルクォーテーション"またはシングルクォーテーション'で囲む


```ruby
"This is string."

'This is string, too.'
```

####文字列の連結
文字列同士を+(プラス)で繋ぐ

```ruby
# 文字列を連結
irb(main):001:0> "Hello " + "World"
=> Hello World
```
####メソッド
プログラミングにおける何らかの処理をまとめたもの
メソッド名をプログラム中に記述することで、そのメソッドの処理を実行

####lengthメソッド
文字列が持つメソッド。length（レングス）メソッドは文字列の文字数を数えてくれる
値に対してメソッド名「length」をドット.で繋ぎ実行

```ruby
# 文字列の文字数を出す
irb(main):001:0> "Hello World".length
=> 11
```

####数値
数を表現する値
計算などを行うことができる
ダブルクォーテーション"やシングルクォーテーション'も必要無い

```ruby
# 整数
10

# 負の値
-10

# 小数
3.14
```

####代数演算子
演算子の中でも計算を行うもの
+：足し算
-：引き算
*：掛け算
/：割り算
%：余剰（あまり）

```ruby
# 足し算
irb(main):001:0> 1000 + 2000
=> 3000

# 引き算
irb(main):002:0> 3000 - 1500
=> 1500

# 掛け算
irb(main):003:0> 50 * 40
=> 2000

# 割り算
irb(main):004:0> 600 / 15
=> 40

# 剰余演算（5 ÷ 2をした余り）
irb(main):005:0> 5 % 2
```

####to_sメソッド
数値が持つメソッド
数値を文字列に変換してくれる

```ruby
# 数値「20」にto_sメソッドをつけて実行
irb(main):001:0> 20.to_s
=> "20"
```
####to_iメソッド
文字列が持つメソッド
文字列を数値に変換してくれる

```ruby
# 文字列「30」にto_iメソッドをつけて実行
irb(main):001:0> "30".to_i
=> 30
```

####異なる値同士の連結
文字列と数値は別の種類なので+を使って連結することができない
to_sメソッドやto_iメソッドを使用して変換する

```ruby
# to_sで数値を文字列に変換し、連結
irb(main):001:0> "i am " + 20.to_s + " years old."

# 続けてこのように表示されれば成功
=> i am 20 years old.
```

```ruby
# to_iで文字列を数値に変換
irb(main):001:0> "100".to_i + 400
=> 500
```

####式
文字列や数値
メソッドの呼び出し
変数や演算子式など、Rubyは記述をすべて式と捉える

####式展開
文字同士の連結はRubyの式展開を使えばより綺麗に書くことができる
文字列中で#{式}とする
文字列を作るときにダブルクォーテーション"で囲む

```ruby
# 式展開で文字列に式を含む
irb(main):001:0> "今日で#{20}歳になりました"
=> "今日で20歳になりました"

# シングルクォーテーションだと式展開されない
irb(main):002:0> '今日で#{20}歳になりました'
=> "今日で\#{20}歳になりました"

```