OmniAICreator/Qiita-1.07M huggingface dataset:
Dart-Exceptions

# Dart Exceptions
Dart言語に関する例外処理の書き方についてまとめます。
Dart言語はJavaにほとんど似た書き方をしていますが、例外処理に関しては少し独特な書き方をします。
覚えてしまえば見やすいですが、構造を理解することが大切です。

## サンプルソースコード
```dart
main(List<String> args) {
  try {
    // 例外を発生させる
    throw FormatException("throw exception");
    // 例外を取得する
  } on FormatException catch(e) {
    print(e.message);
  } finally {
    print("finaly");
  }
}
```
- 例外を発生させる時は、throw句を使用する。
- 例外を取得する時は、on句で例外の種類を指定して、catchで例外の変数を定義する。
- on句を省略してcatchをいきなり書くことが可能

```dart
main(List<String> args) {
  try {
    // 例外を発生させる
    throw FormatException("throw exception");
    // 例外を取得する
  } catch(e) {
    print(e.message);
  } finally {
    print("finaly");
  }
}
```
- finalyは例外が発生してもしなくても、最後に実行する処理を記載する場所
Leetcode #961: N-Repeated Element in Size 2N array

Time complexity: O(N), where N is the length of A
Space complexity: O(N)

```swift
func repeatedNTimes(_ A: [Int]) -> Int {
    var dict = [Int: Int]()
    for number in A {
        if dict[number] != nil {
            return number
        } else {
            dict[number] = 1
        }
    }
    return 0
}
```
length、size、count メソッドの違いまとめ【Ruby】

####Rubyの length、size、count メソッドの違いいつも忘れるので、備忘録としてささっとアウトプット。
Rubyバージョンは 2.6.2

#まず、結論

##配列の場合
####・要素数カウントしたい                      →  length か size がベターだが countも使える
####・___特定の要素___  の数をカウントしたい     →  count
##ハッシュの場合
####・{key: value}のセット数を確認したい      →  length か size がベターだが countも使える
####・___特定の {key: value}___ のセット数を確認したい  →  count
##文字列の場合
####・文字数カウントしたい                    →  length か size
####・___特定の文字___  の数をカウントしたい  →  count

#ここから解説
##length / size
length と size は***同じ***。***エイリアス***。
機能としては下記のように配列の要素数、ハッシュの{key: value}のセット数、文字列の文字数を数値で返す。
全要素数、全{key: value}セット数、文字数を返す。それたけ。

|型  |配列  |ハッシュ  |文字列  |
|---|---|---|---|
|戻り値  |配列の要素数  |{key: value}の数  |文字数|


***使用例***

```ruby

#配列
[1, 2, 3].size #=> 3

#ハッシュ
{name: "Taro", age: 20, occupation: "Student"}.length #=> 3

#文字列
"aiueo".size #=> 5
```

シンプル！ length と size は以上！

##count
count の機能としては、length / size と同じように配列の要素数、ハッシュの{key: value}のセット数返す。
#### length と size との違いは ***count は引数を取れる***ということ。
#####文字通り、引数と同じ配列の要素、引数と同じ文字列の数をカウントする。
#####つまり ***count は(処理速度という観点を除けば) length / size の ほぼ上位互換的な存在***。
引数には普通に***文字列***、***数値***、そして***ブロック***も取れる。

####※だた注意点
#####文字列の場合、シンプルに全文字数カウントはできない。(引数が必須)
この注意点を踏まえて下記の使用例。
**使用例**

```ruby
# 配列(引数あり)
[1, 2, 3].count(3) #=> 1

# 配列(引数なし)
[1, 2, 3].count #=> 3

# ハッシュ(引数あり)
{name: "Taro", age: 20, occupation: "Student"}.count([:name, "Taro"]) #=> 1

# ハッシュ(引数なし)
{name: "Taro", age: 20, occupation: "Student"}.count #=> 3

# 文字列(引数あり)
"aiueo".count("a") #=> 1

# 文字列(引数なし) ※既述のように引数なしでは使えず、引数が必要とエラーが出ます。size or lengthを使いましょう。
"aiueo".count
ArgumentError: wrong number of arguments (given 0, expected 1+)
from (pry):7:in `count
```

続いて、上述した引数がブロックの時の使い方

```ruby

#数値の配列から奇数をカウント
[1, 2, 3, 4, 5, 6, 7, 8, 9].count { |item| item.even? == true} #=> 4

#数値の配列から偶数をカウント
[1, 2, 3, 4, 5, 6, 7, 8, 9].count { |item| item.odd? == true} #=> 5
```
表にするとこんな感じ

|  メソッド  |  配列(全部)  |  ハッシュ(全部)  |  文字列(全部)  |  配列(引数指定)  |  ハッシュ(引数指定)  |  文字列(引数指定)  |引数にブロック使用|
|---|---|---|---|---|---|---|---|
| size/length |  ◯  |  ◯  |  ◯  |  ×  |  ×  |  ×  |×|
| count |  ◯  |  ◯  |  ×  |  ◯  |  ◯  |  ◯  |◯|



##※length / size と count の処理速度については @scivola さんからわかりやすいコメントをいただいたのでそちら参照いただけると幸いです。

#まとめ
#### 全カウントの場合は処理速度が早い length / size を使い、
####特定の文字数や要素をカウントしたい時のみ count を使う！！
ポリモーフィズムを人間で例えてみた

# はじめに
最近ポリモーフィズムという概念について理解を深めたので、さらに理解するためにわかりやすいレベルまで落とし込んだ説明を書いてみることにしました。

# この記事が対象とする人
+ ポリモーフィズムがわからん人

# 本題
まず、人間がものを書くという操作について考えます。3
仮に「きいたくん」と「ちえちゃん」という二人の人間がいるとしましょう。
二人がそれぞれ`content`と呼ばれるものを書くときに、`QiitaWrite(content1)`,`ChieWrite(content2)`みたいに書くのはあまり良い方法ではありません、
もう少し良いやり方だと、`write(Qiita, content1)`,`write(Chie, content2)`のような書き方もあるかもしれません、しかしオブジェクト指向が使える言語では、次のように書くことで、もっと良い書き方ができます。
以下のように書いてみましょう。

```python3
class People:
    def __init__(self):
        self.content: str = ''
            
    def write(self):
        print(self.content)
                
class Qiita(People):
    def __init__(self):
        self.content = 'content1'
        
class Chie(People):
    def __init__(self):
        self.content = 'content2'
        
qiita = Qiita()
chie = Chie()

qiita.write()
#content1

chie.write()
#content2
                
```

どうでしょうか、このように共通の機能を持ったクラスを継承することで、同じ関数名で挙動を変えることができます。
また、この書き方ならば「誰が(何が)」「何を」しているのかが実行部分を見てもわかりやすいと思います。
このように、共通のメソッドで違う挙動を示すというやり方をポリモーフィズムといいます(間違ってたらごめんなさい)
Leetcode #970 Powerful Integers

Special case: when x or y is 1, we need to break the loop

```swift
func powerfulIntegers(_ x: Int, _ y: Int, _ bound: Int) -> [Int] {
    var answer = Set<Int>()
    var first = 1
    while first <= bound {
        var second = 1
        while second <= bound - first {
            answer.insert(first + second)
            second *= y
            if second == 1 {
                break
            }
        }
        first *= x
        if first == 1 {
            break
        }
    }
    return Array(answer)
}
```
springbootでslackボットを作ってみる

# 目標
springbootでslackボットを使ったメッセージの送受信ができる！

# ライブラリ
`simpleslackapi`というものがあるようなので使ってみる
> https://mvnrepository.com/artifact/com.ullink.slack/simpleslackapi

# Bot作成
ここでは割愛。。。
Botで使用するトークンが手元にある前提です

# 早速実装！

## slackとの接続

```java:SlackApiClient.java
import com.ullink.slack.simpleslackapi.SlackChannel;
import com.ullink.slack.simpleslackapi.SlackSession;
import com.ullink.slack.simpleslackapi.impl.SlackSessionFactory;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

@Component
@Slf4j
public class SlackApiClient {
    private SlackSession session;

    public SlackApiClient() throws Exception {
        // 生成したセッションをフィールドに保持しておく
        this.session = SlackSessionFactory.createWebSocketSlackSession("your slack bot token");
        session.connect();
    }
}
```
これだけ！

## メッセージの送信機能
- sessionからSlackChannelクラスを生成
    - 名前の通りslackのチャンネルと紐づいたクラス
- メッセージ送信自体は`SlackSession#sendMessag`

```java:SlackApiClient.java
import com.ullink.slack.simpleslackapi.SlackChannel;
import com.ullink.slack.simpleslackapi.SlackSession;
import com.ullink.slack.simpleslackapi.impl.SlackSessionFactory;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

@Component
@Slf4j
public class SlackApiClient {
    private SlackSession session;

    public SlackApiClient(ApplicationProperties applicationProperties) throws Exception {

        this.session = SlackSessionFactory.createWebSocketSlackSession(applicationProperties.getToken());
        session.connect();
    }

    // メッセージ送信
    public void sendMessage(String channel, String message) {
        SlackChannel slackChannel = session.findChannelByName(channel);
        return session.sendMessage(slackChannel, message);
    }
}
```

## メッセージの受信機能
- `SlackSession`に`addMessagePostedListener`というクラスがある
- このメソッドに`SlackMessagePostedListener`を登録すればOK！
- 関数インタフェースになっているからここでは簡易的にラムダ式で実装
    - 受け取るのは`SlackMessagePosted`と`SlackSession`
    - `SlackMessagePosted`の中にチャンネルとか送信者とかメッセージが入っている

```java:SlackApiClient.java
import com.ullink.slack.simpleslackapi.SlackChannel;
import com.ullink.slack.simpleslackapi.SlackSession;
import com.ullink.slack.simpleslackapi.impl.SlackSessionFactory;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

@Component
@Slf4j
public class SlackApiClient {
    private SlackSession session;

    public SlackApiClient(ApplicationProperties applicationProperties) throws Exception {

        this.session = SlackSessionFactory.createWebSocketSlackSession(applicationProperties.getToken());
        session.connect();
        session.addMessagePostedListener(((event, slackSession) -> {
            // メッセージ受信時の処理
        }));
    }

    public Object sendMessage(String channel, String message) {
        SlackChannel slackChannel = session.findChannelByName(channel);
        return session.sendMessage(slackChannel, message);
    }
}
```

いったんここまで！
ROS2のpublisher/subscriber概要

【[ROS2関係トップページへ](https://qiita.com/NeK/items/7ac0f4ec10d51dbca084)】
【[ROS2レクチャー:初級 -ROS1 style-](https://qiita.com/NeK/items/74e4bb9d1530e22a63fc)】
【[ROS2レクチャー:初級 -class style-](https://qiita.com/NeK/items/14db31ff784a0bfafe3d)】

【前:[ROS2最小構成プログラム:初級 -ROS1 style-]】
【前:[ROS2最小構成プログラム:初級 -class style-]】
【次:[ROS2の最小構成subscriber:初級 -ROS1 style-]】
【次:[ROS2の最小構成subscriber:初級 -class style-]】

[ROS2最小構成プログラム:初級 -ROS1 style-]:https://qiita.com/NeK/items/c9ba8aa3a005087762e2
[ROS2最小構成プログラム:初級 -class style-]:https://qiita.com/NeK/items/d98a20e1c93993e06b7a
[ROS2の最小構成subscriber:初級 -ROS1 style-]:https://qiita.com/NeK/items/2e4e1f78e76594891fc7
[ROS2の最小構成subscriber:初級 -class style-]:https://qiita.com/NeK/items/224595987212067f41db

# subscriberとは
subscriberはpublisherが発信した情報を受け取るものであり，publisherが主，subscriberが従である．
基本的にpublisherとsubscriberの関係は1対多である．node内に複数のpublisher/subscriberを持つ場合，nodeとしては多対多となるが．
イメージとしてはSNSの配信者とフォロワーみたいなもの？

topicを説明する[公式のアニメーション付き図](https://docs.ros.org/en/galactic/Tutorials/Topics/Understanding-ROS2-Topics.html#id1)がすごく分かりやすい．

# 関連情報
## topic
topicとはpublisherとsubscriberのやりとりである．
ROSシステムでは同時に複数のtopicが存在するので区別するために名前が付けられる．これをtopic名と呼ぶ．
関係はpublisherが主でありsubscriberが従である．topic名もpublisherが指定し，subscriberはpublisherが公開しているtopic名を見ていて情報が発信されたら受け取り処理が生じるようになっている．

### msg
やりとりするデータそのものはmsgなどと表記する．または，topic messageなど？
利用できる変数の種類は[About ROS2 interfaces]にある．

<details>
<summary><font color="Red">注意:std_msgsの廃止について</font></summary>
メッセージを「とりあえず」「簡単に」使用するためにこれまでstd_msgsが用意されていた．ROS1時代から，「ほんととりあえずだから！使用は非推奨だから！」と言っていたみたいだけど，とりあえずEloquent Elusorまでは使用できていたがFoxy Fitzroyからいよいよ廃止されるらしい．
とは言っても自分のプログラムを作り始めたら内容に合わせて変数名も変えたほうがよいのでtutorialくらいでしか使用しない．std_msgsはexample_interfacesという名前になるらしいので，tutorialみたいなので使う場合には名前を変えれば使えるから問題なし？
</details>

<details>
<summary><font color="Red">注意:std_msgsについて</font></summary>
結局，std_msgsについて再度実装された模様です．ただ，中身のコメントを見るとやっぱり「簡易使用で本番用じゃないから」と書いてあました．自分は使わない派．
</details>


msgはmsgファイルというテキストファイルで記述する．変数の型と変数名を適切にテキスト形式で記述することで，ROS2が勝手にクラス化し使えるようにしてくれる．

ROS2がデフォルトで(とりあえずぱっと使えるように)提供するexample_interfacesプロジェクトにはmsgとして文字stringを扱うメッセージを使える．この時，

- example_interfacesの中のmsgディレクトリの中のString.msgを使う

と考え，利用のためにインクルードするファイルは

```
#include "example_interfaces/msg/string.hpp"
```

となる．大文字・小文字の扱いは[ROS2独自メッセージの作成](https://qiita.com/NeK/items/26751b8ed12976ff977d)にて説明する．
またソースの中では，

```
example_interfaces::msg::String
```

で表されるクラスとして利用する．

## 関連コマンド
トピックの表示やコンソールからのデータ取得・データ設定などのコマンドは[ROS2コマンド一覧のROS2状態確認]を参照のこと．


【前:[ROS2最小構成プログラム:初級 -ROS1 style-]】
【前:[ROS2最小構成プログラム:初級 -class style-]】
【次:[ROS2の最小構成subscriber:初級 -ROS1 style-]】
【次:[ROS2の最小構成subscriber:初級 -class style-]】



[About ROS2 interfaces]:https://index.ros.org/doc/ros2/Concepts/About-ROS-Interfaces/
[ROS2コマンド一覧のROS2状態確認]:https://qiita.com/NeK/items/33d62c61fc1a8c0c233e#ros2%E7%8A%B6%E6%85%8B%E7%A2%BA%E8%AA%8D
Online LaTeX Equation EditorをQiitaで使ってみる

#Online LaTeX Equation Editor

[Online LaTeX Equation Editor](https://www.codecogs.com/latex/eqneditor.php)

注意！！：日本語は使えません。
Google Chromeでは，画像の位置がうまく表示されますが，Microsoft Edgeでは，表示される位置がよくありませんでした。
他のWebブラウザでは確認していません。

web上でLaTeXを使うことができるサービス。数式部分の画像を生成することができます。また，次のようにHTMLに画像部分のリンクを埋め込むことができます。


svgの画像例
<img src="https://latex.codecogs.com/svg.latex?\large&space;F=ma" title="\large F=ma" />


比較 Qiita デフォルト（mathjax）

$\large F = ma$

svg以外にもpngなどを貼り付けることができます。


##Qiitaに貼り付ける（HTMLタグ）
HTMLタグを直接記入することで，Qiitaにも数式部分を貼り付けることができます。最低限必要なものを述べていきます。

```HTML
<img src="https://latex.codecogs.com/svg.latex?数式コマンド"/>
```

「数式コマンド」の部分に数式を書くことで，次のようになります。

その１
<img src="https://latex.codecogs.com/svg.latex?\large F=ma"/>

```HTML
<img src="https://latex.codecogs.com/svg.latex?\large F=ma"/>
```

その２
<img src="https://latex.codecogs.com/svg.latex?\large \sum_{k=1}^n k^2 = \frac{1}{6}n(n+1)(2n+1)"/>

```HTML
<img src="https://latex.codecogs.com/svg.latex?\large \sum_{k=1}^n k^2 = \frac{1}{6}n(n+1)(2n+1)"/>
```

その３
文章中に挿入する場合

三ツ矢君は2Lあるサイダーの <img src="https://latex.codecogs.com/svg.latex?\large \frac{1}{2}"/> を一気に飲み干しました。

```HTMK
三ツ矢君は2Lあるサイダーの <img src="https://latex.codecogs.com/svg.latex?\large \frac{1}{2}"/> を一気に飲み干しました。
```

使えないコマンド
ベクトルを太字で表すために，`\bm`を多用することがあります。しかし，これは使えません。


**使えない**
地球の中心から動径方向のベクトルを <img src="https://latex.codecogs.com/svg.latex?\large \bm r"/> とする。

```HTML
地球の中心から動径方向のベクトルを <img src="https://latex.codecogs.com/svg.latex?\large \bm r"/> とする。
```

**使える**
地球の中心から動径方向のベクトルを <img src="https://latex.codecogs.com/svg.latex?\large&space;\vec&space;r"/> とする。

```HTML
地球の中心から動径方向のベクトルを <img src="https://latex.codecogs.com/svg.latex?\large \vec r"/> とする。
```

##Qiitaに貼り付ける（Markdown）

その１

![alt](https://latex.codecogs.com/svg.latex?\\large \\sum_{k=1}^n k^2 = \\frac{1}{6}n(n+1)(2n+1))

```markdown
![alt](https://latex.codecogs.com/svg.latex?\\large \\sum_{k=1}^n k^2 = \\frac{1}{6}n(n+1)(2n+1))
```


その２

三ツ矢君は2Lあるサイダーの ![alt](https://latex.codecogs.com/svg.latex?\\large \\frac{1}{2}) を一気に飲み干しました。


```markdown
三ツ矢君は2Lあるサイダーの ![alt](https://latex.codecogs.com/svg.latex?\\large \\frac{1}{2}) を一気に飲み干しました。
```

HTMLタグとMarkdown記法を比較すると，ほぼ同じ使い方になるが，書き方の違いが2つある。

Markdown記法の場合，TeXコマンドのバックスラッシュ`\`を2回重ねる

Markdown記法の場合改行が許される



##メリット・デメリット
**メリット**
ネットにつながってさえいれば，リアルタイムでコンパイルされる

数式部分の画像を，そのままコピーすることができる。
（私のMS Wordではうまくsvgを貼り付けることはできなかったが，libre office writterでは数式部分も一応貼り付けられた。）

注意：EvernoteのWebClipperを使うと，粗い画像になってしまう。



**デメリット**
HTMLのタグを書かなければならない

日本語が使えない

Qiita仕様では，タグの途中で改行できない。

タグを打ち込む作業が増え，TeXの気楽さが消える。
51歳からのﾌﾟﾛｸﾞﾗﾐﾝｸﾞ　備忘　メモメモ

いつも迷ってしまうので備忘

Auth認証者のｲﾝｽﾀﾝｽ生成

```
$user=Auth::user()
```



eloquent検索

```
$user=User::find($id)->name;
```
or

```
$user=new User;
$user=$user::find($id);
$user=$user['name'];
```
PHPでDBにSQLを発行する

#やりたいこと
PHPでDBからデータを取得したり、逆に操作したりするようなSQLを投げたい。

#環境
PHP 5.5.9
MySQL 14.14

#やり方
色々手法はあるみたいですが、SQLインジェクション対策を意識したやり方で実現することに。

**接続情報の設定**
まずは接続するDBの情報を持たせる。

```php
$dsn = 'mysql:host=localhost;dbname=bbs;charset=utf8';
$user = 'user01';
$password = 'password';
```

1行目は接続先のホスト名、DB名の指定。
2、3行目はDBに接続するユーザー名、パスワード。


**接続**

```php
$db = new PDO($dsn,$user,$password);
$db->setAttribute(PDO::ATTR_EMULATE_PREPAES,false);
```

PDOはPHPとDBとの間に入る抽象化レイヤー。
先程宣言したDB情報とユーザー名、パスワードを指定してインスタンス化。
2行目は静的プレースホルダを使用するために必要な設定。


**プリペアドステートメントの設定**

```php
$stmt = $db->prepare("SELECT * FROM T_TEST WHERE id = :id");
$stmt->bindparam(':id', $id ,PDO::PARAM_INT);
$stmt->execute();
```

prepareで発行したいSQLを指定する。
この際、何かしら変数をSQL文に埋め込む場合（今回の例だとID）、直接変数で指定するのではなく、bindparamを噛ませてデータを渡してあげる。
渡す値にクォーテーションなどが紛れて、意図しないSQLの動作を防げる。

最後にexecuteで実行。


DBから取得したデータは$stmtに連想配列で格納されるので、そこからfetchするなりなんなりで扱っていく。
ちなみに連想配列に設定されるIDはDBのカラム名と同じになる。
JSONのObjectの中のあれはmember(メンバー)と呼ぼう

# 問題

```json
{
  "id": 3,
  "name": "太郎"
}
```

このJSONのオブジェクトの中の

```json
"id": 3,
```

や

```json
"name": "太郎"
```

は以下のようなさまざまな呼び方をされています。

* property
* key
* entry
* member
* field
* pair

こうなった原因としては[JSON \- Wikipedia](https://en.wikipedia.org/wiki/JSON)など多くのJSONの参考ページでこれの呼称が書かれておらず、加えてJavaScript, Ruby, Pythonなど様々な言語がJSONを利用するようになった結果各言語のJSONオブジェクトに当たるデータ型での呼称と混同されるようになったことが原因だと思われます。

時と場所、人によって同じものを別の呼び方をしていると混乱を招き、開発効率の低下やバグを引き起こす原因になります。
そこで呼称を統一したいのですが、なんと呼べばもっとも正しいでしょう？

# 提案

member(メンバー)と呼びましょう。

## 理由

JSONの最新仕様書である[RFC 8259 \- The JavaScript Object Notation \(JSON\) Data Interchange Format](https://tools.ietf.org/html/rfc8259#section-4)で以下のように定義されています。

```
      object = begin-object [ member *( value-separator member ) ]
               end-object

      member = string name-separator value
```

[JSON](https://www.json.org/)では図では書かれていませんが、右の柱にはやはり次のように書かれています。

```
object
    '{' ws '}'
    '{' members '}'

members
    member
    member ',' members

member
    ws string ws ':' element
```

# 蛇足

WikipediaなどJSONについて言及しているページ・サイトの多くでmemberについて一切言及していないのがちょっと不思議に思いました。
まるでそれの名前を呼ぶことを避けるようにObjectの定義内ではkeyとvalueのペアのそれに名前をつけたり呼んだりしていません。
RFC上での最も古い仕様書がこれ[RFC 4627 \- The application/json Media Type for JavaScript Object Notation \(JSON\)](https://tools.ietf.org/html/rfc4627)で2006年に発行されています。
この時点ですでにObjectの構成要素はmemberと書かれているので、少なくともその時点ではmemberという呼称はあったはずです。

ただ、[JavaScript Object Notation \- Wikipedia](https://ja.wikipedia.org/wiki/JavaScript_Object_Notation#JSON%E3%81%AE%E7%99%BA%E8%A6%8B)に

> ダグラス・クロックフォード（英語版）はJavaScriptのプログラマで、JSONを広めた一人だが、「The JSON Saga」と題したプレゼンテーション[3]中で「自分はJSONと名付けたが、考案者ではなく、それ自体は“自然に”存在していたもので、早い例としては1996年にはNetscape Navigatorでデータ交換用に使われていた。だから“発見した”ということになるのだが、発見したのも自分が最初ではない」といったように述べている。

と書かれている通りJSONの利用・拡散は2006年よりずっと前からあったようで、事実上のスタンダードが利用者の間で暗黙的に広がっていたようです。
その中で呼称の必要性の薄いmemberは明確な呼称を持たず、RFC化するときに初めて定まった名前が与えられたものの後追いの仕様であるRFCが軽視されがちであった結果、各々好きなように呼んでいる、呼び続けているのではないかと思いました。
ヘルパーメソッドの助けを借りよう

#ヘルパーメソッドとは

ヘルパーメソッドとはrailsでの開発において、viewで使用されるメソッドである。

ヘルパーと言うだけあって、viewでのコーディングを助けてくれる頼もしい存在なんだって！

しかしながら自分を含めrails初心者🔰のうちは、link_toやform_tagあたりは使った事があるけど、実際のところはHTMLでのaタグとかをrails風味に味付け程度にしか思ってない（自分だけ？）:thinking:


#ヘルパーメソッドを「定義」しよう

全体に適用したい場合は、application_helper.rb内に。
特定のモデル内のみに適用したい場合は、モデル名_helper.rb内にヘルパーメソッドを定義します。

```helpers/application_helper.rb
module ApplicationHelper
   
def hunger
   "お腹すいた"
end

```
view内でへルパーメソッド呼び出し

```index.html.erb
<%= hunger %>  => お腹すいた
```


変数を定義して使いまわしていく要領で便利に、そして短いコードでviewを上手くまとめられるようになる！
プログラミング学習記録63〜IoTとインターネット技術〜

##今日やったこと
- IoTの講義を終わらせる
- インターネットの講義を進める

今日は一気に進めました。
ただ、一気にやりすぎて頭に入ってないです。

ちゃんとした知識として定着させるには、まだまだ反復させる必要がありそうです。

現場で働いているエンジニアさんの記事を読むとまだまだだな〜と落ち込むこともありますが、あくまでも自分のペースで進んでいこうと思います。

ただ、同時に前向きな自己否定もしていかないと成長はありません。
満足して自分を褒めるのと不満足を自覚して上を目指す気持ちのバランスが難しい今日この頃です。

大量にインプットした割に少ないアウトプットになってしまいました。

自分でも物足りなさは感じていますが、今日はこの辺で。

おわり
SQLite3 で created_at, updated_at

今更な内容ではありますが、分かりやすくまとめたかったのと、よそにあった情報で気になった部分を修正して書きたいと思います。

# 1. 答え

```sql:テーブル,&nbsp;トリガーの作成
CREATE TABLE test (
    test TEXT,
    created_at TEXT NOT NULL DEFAULT (DATETIME('now', 'localtime')),
    updated_at TEXT NOT NULL DEFAULT (DATETIME('now', 'localtime'))
);

CREATE TRIGGER trigger_test_updated_at AFTER UPDATE ON test
BEGIN
    UPDATE test SET updated_at = DATETIME('now', 'localtime') WHERE rowid == NEW.rowid;
END;
```

テーブル名やトリガー名の `test` の部分を必要に応じて書き換えてください。

# 2. 説明

## 2.1. `DEFAULT` 制約で `DATETIME` 関数を使える

「`DEFAULT` 制約で `DATETIME` 関数を使えない」と言うような説明をしている情報がありますが、括弧で囲むことで**使えます**。
代わりに `CURRENT_TIMESTAMP` を使うと UTC なので、`DATETIME` 関数でタイムゾーンに合わせた日時の方が使いやすいと思います (必要に応じて使い分けてください) 。

参考「[column-constraint - Syntax Diagrams For SQLite](https://www.sqlite.org/syntaxdiagrams.html#column-constraint)」( `DEFAULT` -> `(` -> `expr` -> `)` )

## 2.2. SQLite3 の日時は `TEXT` 型

互換性も考えてか、`created_at`, `updated_at` の型を `DATETIME` や `TIMESTAMP` にしている情報があったのですが、SQLite3 での日付は `INSERT` 時に `TEXT` 型になるので、`TEXT` を指定して良いと思います。
ちなみに SQLite3 は `DATETIME` や `TIMESTAMP` を `NUMERIC` として識別するようで、型としての意味も間違っていると思います (キーワードとしての意味は合ってるんですけどね…) 。

参考「[3.1. Determination Of Column Affinity - Datatypes In SQLite Version 3](https://www.sqlite.org/datatype3.html#determination_of_column_affinity)」

## 2.3. トリガーで `rowid` を使う

テーブルに設定したプライマリキーで行を特定している情報が多いですが、こういう場合は `rowid` の方が使いまわせてスマートな書き方な気がします。
`WITHOUT ROWID` を使用している場合には `PRIMARY KEY` を使ってください。

## 2.4. カラム名は `created_at`, `updated_at`

カラム名を `created_date` や `modified` にしている情報を見かけたのですが、"Ruby on Rails" でのこの命名規則が有名らしいく、理由がなければこの名前にした方が良さそうです。

参考「[データベースオブジェクトの命名規約 - Qiita](https://qiita.com/genzouw/items/35022fa96c120e67c637)」

## 2.5. トリガー名にテーブル名を入れる

他にも名前の付け方があると思いますが、テーブルごとに設定することになると思うので、少なくともテーブル名を含むトリガー名にしたほうが良いと思います。
[Android Studio] Waiting for build to finishと表示されてレイアウトを表示できない

Androidアプリ開発をしていたら以下のように「Waiting for build to finish」と表示され、レイアウトプレビューが表示されなくなりました。
その時の対処法です。（画像は拝借しました）
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237903/4bfb732f-0285-e6bd-23b8-ab6f7b107fa6.png)

## Solution
Ctrl+Shift+AでFind Actionを起動し、「Sync Project with Gradle Files」と入力して実行。
再インポートとビルドのトリガとなっているそう。


## 参考
https://stackoverflow.com/questions/49737865/android-studio-waiting-for-build-to-finish
Daniel Leさん、ありがとうございます。
Spring + Kotlin + Gradleクイックスタート

Spring + Kotlin + GradleでサクッとWebサーバーを起動する方法。

# 1. Spring Initializrで雛形を入手
https://start.spring.io/

上記サイトで

- `Project`を`Gradle`に設定
- `Langulage`を`Kotlin`に設定
- `Spring Boot`を`2.1.4`に設定

`Generate Project`をクリックして、雛形をダウンロード。

![スクリーンショット 2019-04-20 19.51.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250965/75b4f4fd-fede-b867-8516-935298355c26.png)

# 2. IDEAで簡単なプログラムを書く
ダウンロードした雛形(zipファイル)を解凍して、IDEAで開く。
次に、`HelloController`というファイル名で、以下のプログラム書いて、保存。

```kotlin
package com.example.demo

import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestParam
import org.springframework.web.bind.annotation.RestController

@RestController
class HelloController {

    @GetMapping("hello")
    fun hello(@RequestParam("name") name: String): String = "Hello, $name!"
}
```

**`org.springframework.web`が見つからない場合:**
`build.gradle`の`dependencies`に以下の内容を追加。

```gradle
	// https://mvnrepository.com/artifact/org.springframework/spring-web
	compile group: 'org.springframework', name: 'spring-web', version: '5.1.2.RELEASE'
```

# 3. プログラム実行
`DemoApplication.kt`のmain関数の隣の三角のマークをクリックして、実行する。
![スクリーンショット 2019-04-20 20.00.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250965/c3b6f1d2-f327-a789-384b-95e1c1e27490.png)

実行したら、http://localhost:8080/hello?name=Spring にアクセス。結果↓
![スクリーンショット 2019-04-20 20.12.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250965/b659345d-9635-548e-c1aa-0593c1feef36.png)


**実行した時に、即行でexitされる場合:**
`build.gradle`の`dependencies`に以下の内容を追加。[参考リンク](https://medium.com/@dime.kotevski/writing-a-restful-backend-using-kotlin-and-spring-boot-9f162c96e428)

```gradle
compile group: 'org.springframework.boot', name: 'spring-boot-starter-web', version: '2.1.2.RELEASE'
```
クライアントサイドでnem2-sdkのListenerを使うときはWebSocketをインジェクトする

# はじめに

[nem2-sdk-typescript-javascript](https://github.com/nemtech/nem2-sdk-typescript-javascript)のListenerを使った際、以下のようなエラーに遭遇することはないでしょうか。

>Access to fetch at 'http://13.114.200.132:3000/ws' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

自分の経験では、クライアントサイド（ブラウザ）でListenerを使おうとすると出現します。

エラー的に、CORSを設定しなければならないように見えますが、そうではありません。

クライアントサイドでListenerを使う場合は、サーバーサイド（Node.js）の時とは異なり、WebSocketオブジェクトをインジェクトする必要があります。

# 例えば

例えば、Nuxt.jsで以下のようなコンポーネントを作って利用したとします。

```vue
<template>
  <div style="margin-top: 2rem;">
    <button @click="listenConfirmed" class="button--grey">confirmed</button>
    <pre style="text-align: left; font-size: xx-small;">{{ JSON.stringify(confirmed) }}</pre>
  </div>
</template>
<script>
import { Address, Listener } from 'nem2-sdk'

export default {
  name: 'Account',
  data() {
    return {
      confirmed: []
    }
  },
  methods: {
    listenConfirmed() {
      const listener = new Listener('http://13.114.200.132:3000');
      const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
      listener.open().then(() => {
        listener.confirmed(address).subscribe((x) => {
          this.confirmed.push(x)
        })
      });
    }
  }
}
</script>
<style>
</style>
```

開発者ツールのコンソールに以下のようなエラーが表示されると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/c420b0b3-2efa-b1ec-0b51-36a675a85155.png)

# 解決方法

Listenerの第１引数には`ws`から始まるURLを、第２引数には`WebSocket`オブジェクトを渡します。

なので、以下のように書き換えます。

```javascript
listenConfirmed() {
  const endpoint = 'http://13.114.200.132:3000';
  const wsEndpoint = endpoint.replace('http', 'ws');
  const listener = new Listener(wsEndpoint, WebSocket);
  const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
  listener.open().then(() => {
	listener.confirmed(address).subscribe((x) => {
	  this.confirmed.push(x)
	})
  });
}
```

何かトランザクションを送ってみると、ちゃんと取得できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/cde62bc9-7a59-0933-ad6d-5bd86ac84228.png)
Nuxt.jsでnem2-sdkを使ってみる

# はじめに

ここでいう`nem2-sdk`とは、`nem2-sdk-typescript-javascript`のことです。

https://github.com/nemtech/nem2-sdk-typescript-javascript

環境

- Node.js v8.15.1
- Windows 10

# インストール

https://ja.nuxtjs.org/guide/installation

以下のコマンドを入力したとき、いろいろ聞かれますが、とりあえず全部エンターキー押下で進みます。

```
npx create-nuxt-app nem2-sdk-nuxt
```

```
cd nem2-sdk-nuxt
npm run dev
```

`http://localhost:3000`にアクセスしましょう。

何かページが表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/f557a4ef-6bf5-91be-a450-559333e8b81a.png)

# nem2-sdkの追加

ここに、`nem2-sdk`を追加していきます。

```
npm i nem2-sdk rxjs
```

執筆時点でのバージョンは以下のようになりました。

```
"nuxt": "^2.4.0"
"rxjs": "^6.4.0"
```

`nuxt.config.js`に設定をしていきます。

```javascript:nuxt.config.js
build: {
  extend(config, ctx) {
    config.node = {
      fs: 'empty',
      net: 'empty',
      tls: 'empty'
    }
  }
}
```

`components/Account.vue`を作成します。とりあえず何かしらのアカウントの情報を取得するように作りました。

```vue:components/Account.vue
<template>
  <div style="margin-top: 2rem;">
    <button @click="getAccountInfo" class="button--grey">getAccountInfo</button>
    <pre style="text-align: left; font-size: xx-small;">{{ accountInfo }}</pre>
  </div>
</template>
<script>
import { Address, AccountHttp, NetworkType } from 'nem2-sdk'

export default {
  name: 'Account',
  data() {
    return {
      accountInfo: null
    }
  },
  methods: {
    getAccountInfo() {
      const accountHttp = new AccountHttp('http://13.114.200.132:3000', NetworkType.MIJIN_TEST);
      const address = Address.createFromRawAddress('SCA7ZS-2B7DEE-BGU3TH-SILYHC-RUR32Y-YE55ZB-LYA2');
      accountHttp.getAccountInfo(address).subscribe((x) => {
        this.accountInfo = JSON.stringify(x, null, "\t");
      })
    }
  }
}
</script>
<style>
</style>
```

`components/index.vue`を編集します。

```vue:components/index.vue
<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">
        nem2-sdk-nuxt
      </h1>
      <h2 class="subtitle">
        My spectacular Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >GitHub</a>
      </div>
      <account />
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'
import Account from '~/components/Account.vue'

export default {
  components: {
    Logo,
    Account
  }
}
</script>
```

これでページを再び見てみます。

ボタンが追加されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/c357b692-edb4-e4b3-bd42-e8059f8ccfcd.png)

ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/c3b0f577-e6d9-9c3c-94a6-317e004c2d30.png)

`nem2-sdk`を使って情報を取得して表示することができました。
AWS CLI 〜CloudFormation編①〜

# はじめに
備忘録として、自分がよく使う＆使ったaws-cliコマンドを書きます。
今回はCloudFormation編です。長めになりそうなので、一旦create-stackのみでわけました。


## 注意
- [公式ドキュメントがちゃんとあります](https://docs.aws.amazon.com/cli/latest/reference/cloudformation/index.html)
- 前述の通り自分がよく使う＆使ったものしか書いてないので、すべては網羅しておりません


# スタック作成
### ①テンプレートがローカルにあるバージョン

```
aws cloudformation create-stack --stack-name スタック名 --template-body file://テンプレートのパス
```

### ②テンプレートがS3にあるバージョン

```
aws cloudformation create-stack --stack-name スタック名 --template-url テンプレートのURL
```

上記①、もしくは②に、いろいろオプション指定していきます。


## IAMリソースが含まれる場合

```
--capabilities CAPABILITY_NAMED_IAM
```

マネコンから操作する時に、作成確認のチェックボックスみたいなのが出るかと思うのですが、そのチェックを入れるのと同等かと認識しております。
以下リソース作成時に出るそうです。

- AWS::IAM::AccessKey
- AWS::IAM::Group
- AWS::IAM::InstanceProfile
- AWS::IAM::Policy
- AWS::IAM::Role
- AWS::IAM::User
- AWS::IAM::UserToGroupAddition

※custom nameを持たないIAMリソースは「CAPABILITY_IAM」でもよいそうです。


## 削除保護有効化

```
--enable-termination-protection
```

## スタックにタグつける時

```
--tags Key=キー,Value=値
```

ちなみに個々リソースに同一Keyのタグが指定してあると、そっちが優先されます。
同一Keyタグ指定をしてないと、ここで指定した値が個々リソースにも付与されます。


## パラメータをjsonで渡す時

```
--cli-input-json file://パス
```

そもそもパラメータを指定する時は別途オプションがあるのですが（後述）

- より操作ミス発生の可能性を減らしたい
- パラメータがいっぱいある

ということで、あらかじめjsonファイルを作り、それを渡す方式をとることになりました。
タグなどほかオプションも、この方式で指定することができます。


## パラメータ指定

```
--parameters ParameterKey=string,ParameterValue=string,UsePreviousValue=boolean,ResolvedValue=string ...
```

前述の通りパラメータ指定はjson渡してやってましたが、こんな感じのようです。


# おわりに
CloudFormationの検証をしていたので、いちばん馴染み深いのがおそらくCloudFormationのコマンドかな〜と思い、これから書いてみました。
（Qiita投稿初めてなので、何か不手際があったらごめんなさい。）
メモ たのしいRubyChapter2

#シンボル
シンボル(Symbol)は文字列に似たオブジェクトで、Rubyがメソッドなどの名前を識別するためのラベルをオブジェクトにしたものである。

```ruby
sym = :hoge
sym2 = :"foo"
```

シンボルと文字列はお互いに変換ができる

```ruby
>> sym=:foo
=> :foo
>> sym2=:"foo"
=> :foo
>> sym.to_s
=> "foo"
>> "foo".to_sym
=> :foo
```

#ハッシュ
**{ キー => オブジェクト } という形式**で指定する。
キーにはシンボルや文字列、数値がよく使われるが、とりわけ**シンボル**がよく使われる。

```ruby
song = { :title => "Paranoid Android", :artist => "Radiohead" }

person = { "名前" => "高橋", "仮名" => "タカハシ" }

mark = { 11 => "Jack", 12 => "Queen"}
```

キーをシンボルにする場合は以下のような省略記法が利用可能である。

```ruby
#person1 = { :name => "後藤", : kane => "ゴトウ" }
person1 = { name: "後藤", kana: "ゴトウ" }
```
ハッシュに格納されたオブジェクトを取り出すには**ハッシュ名[:キー]**のように書く

```ruby
>>person1 = { name: "後藤", kana: "ゴトウ" }
>>person1[:name]
=>"後藤"
```

##ハッシュの繰り返し
ハッシュのキーと値を一つずつ取り出すには、eachメソッドを使う

```ruby
address ={name:"高橋", furigana:"タカハシ"}
address.each do |key, value|
  puts "#{key}: #{value}"
end

name: 高橋
furigana: タカハシ
```

#正規表現
正規表現と文字列のマッチングを行う場合は以下のように書く

```
/パターン/ =~ マッチングした文字列
```

サンプルコードを下記に示す

```ruby
#RubyのRが12文字目なので12と出力される
/Ruby/ =~ "Yet Another Ruby Hacker,"
=> 12
/Ruby/ =~ "Ruby"
=>0
#マッチングに失敗した場合はnilを返す
/Ruby/ =~ "Diamond"
nil
```

また、/に続けてiを書くと英字の大文字・小文字を区別せずにマッチングを行う

```ruby
/Ruby/ =~ "ruby"
=> nil
/Ruby/i =~ "ruby"
=> 0
```

#nilとは
nilは**オブジェクトが存在しない**ことを表す特別な値である。
##補足
**if分やwhile文は条件を判定するときにfalseとnilを「偽」の値として扱い、それ以外のすべての値を「真」として扱う**

```ruby

names = ["小林", "林", "高野", "森岡"]
names.each do |name|
  if /林/ =~ name
    puts name
  end
end
```
Leetcode #1002: Find common characters

Thoughts:
1. Iterate the first string and create a hash table for mapping between char and appearances of char
2. Iterate the rest of strings
3. if certain character doesn't appear, remove the key; if the appearances of char is smaller, update the answer.

```swift
class Solution {
    func commonChars(_ A: [String]) -> [String] {
        if let firstStr = A.first {
            var answer = [Character: Int]()
            for char in firstStr {
                if let value = answer[char] {
                    answer[char] = value + 1
                } else {
                    answer[char] = 1
                }
            }
        
            for str in A.dropFirst() {
                var dict = [Character: Int]()
                for char in str {
                    if let value = dict[char] {
                        dict[char] = value + 1
                    } else {
                        dict[char] = 1
                    }
                }
                for key in answer.keys {
                    if let value = dict[key] {
                        if value < answer[key]! {
                            answer[key] = value
                        }
                    } else {
                        answer.removeValue(forKey: key)
                    }
                }
            }
            var list = [String]()
            for key in answer.keys {
                if let value = answer[key] {
                    for _ in 0..<value {
                        list.append(String(key))
                    }
                }
            }
            return list
        } else {
            return [""]
        }
    }
}
```
windowsにLAMP環境構築

PHPを勉強するにあたって、環境構築でやってことを自分用にメモ。
WindowsマシンにXAMPPを導入してやってもいいけど、せっかくなのでLAMP環境を構築してみる。

#用意するもの
[VirtulBox](https://www.virtualbox.org/)
[Vagrant](https://www.vagrantup.com/)

Vagrantは仮想マシンを作成するにあたって必要な設定をしてくれるらしい。


#下準備
仮想マシンを格納するフォルダを作成をしておく。
テキトーなフォルダに今回はvagrantフォルダを作り、その中に仮想マシン置いたり、ゲストOSと同期するファイルを置いたりする。

#仮想マシンの作成
**Vagrantfileの作成**
仮想マシンの設定なんかをするファイル。
さっき作った仮想マシン作成用フォルダに移動して、以下のコマンドを叩く。

```
vagrant init 
```

フォルダ内を確認すると、Vagrantfileが作成されているはず。

#設定
先程作成したVagrantfileの中身をいじって、仮想マシンの設定をする。

**ゲストOS**
仮想マシンとして使うゲストOSを設定。
今回はcentOSを使用する。

```
config.vm.box = "centos/7"
```

事前にbox addコマンドでボックスを追加してもいい。一応このやり方でも初めて仮想マシンを起動したときに自動でboxを生成してくれる。

**IPアドレス**
Vangrantfile内に"private_network"と記載されている行があるので、そこをコメントから外す。
その行に記載されているIPアドレスがゲストOSのIPアドレスになる。

**その他**
Customize the amount of memory on the VMと書かれている部分で仮想マシンの設定ができる。
メモリとかCPUとか、色々設定できるので、気にする人は適時変更する。

設定終わり。これで起動だけはする。はず。


#起動と最後の設定
以下のコマンドで仮想マシンの起動。
初回の起動はboxの作成があるせいか、長い。気がする。

```
vagrant up
```

仮想マシンへSSH接続。

```
vagrant ssh
```

ユーザー名とパスワードはデフォルトで両方「vagrant」に設定されている。
無事接続できれば、これでLAMPのLは出来た。


#LAMP環境の構築
Lは入ったので、残りのAMPも入れる。

```
sudo yum -y install httpd
sudo systemctl start httpd
```
これでApacheをインストール＆起動


次にmySQL

```
sudo yum -y remove mariadb-libs.x86_64
sudo yum -y install http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm
sudo yum -y install mysql-community-server
sudo systemctl start mysqld
```
最初のはデフォルトで入っているmariaDBの削除。
まぁmariaDB使っても良さそうだけど、初心者らしく愚直に進める。

最後のPHP

```
sudo yum -y install epel-release
sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
sudo yum -y install --enablerepo=remi,epel,remi-php70 php php-devel php-intl php-mbstring php-pdo php-gd php-mysqlnd
```
以上

PHPについては普通にインストールしようとするとversion5くらいのが入ってしまうので、今回はversion7をインストールする手順を踏んだ。
php -vコマンドでバージョンチェックして、無事php 7.0.33のインストールが確認できた。


ただ、今の設定だとポートフォワードしてないので、ホストOS側からだと見れないみたい。
あとコーディング自体はホストOSでやりたいので、ファイル同期の設定もしたい。
そのあたりは次回。

##残事項

・ポートフォワード
・ファイル同期
・apacheの自動起動
【イベントレポート】Ruby On Rails ハンズオン @ 名古屋に参加して来ました!

## はじめに
はじめまして、学部2年生のけんしんです
4/13（土）に名古屋で開催されたTechTrain出張メンタリングに参加して来ました
どんなことをして来たか皆さんにご紹介します

## 概要
Ruby On Rails初心者向けのハンズオン
3時間でIRIAMの[オタクタイプ診断](https://shindan.iriam.com/)をベースとした簡単なアプリケーションを作成しました
その後メンターの社会人エンジニアによるパネルディスカション、みんなで話す懇親会がありました
![](https://i.imgur.com/r3oogT6.jpg)

メンターとして**株式会社ZIZAI**（元DUO）のぽこひでさん,**株式会社スタメン**の松谷さん、川谷さんに来てもらいました

## 開場
会場は高架下にオフィスを構える**株式会社スタメンさん**で行われました
外から見ると「こんなところに会社が？」って感じですが中に入るときれいでおしゃれでベンチャー企業って感じです
![](https://i.imgur.com/ddIAMNI.jpg)

4人ごとに別れて座り、名札をつけて軽く挨拶
エンジニア駆け出しらしくそれぞれの技術や目標なんかを雑談がてら話しました
来ていたのはほとんど大学生で大学生同士お互いの悩みに共感することも

## ハンズオン
そんなこんなで開始時間、Ruby On Railsハンズオンが始まりました![](https://i.imgur.com/jIpROIz.jpg)

教えてくれるのはメンターのぽこひでさん
[スライド](https://speakerdeck.com/hyde2able/techtrain-rorhansuon)を元に環境構築からアプリケーション作成までおまけに改善点を教えてくれました
今回作るのは[質問に答えると診断をしてくれる~~風の~~webアプリ](https://serene-reaches-15179.herokuapp.com/)です
**docker**使って環境構築、**モデル**や**コントローラー**を作成、**ビュー**に表示…
あっという間にアプリの原型が完成です
あとはCSSフレームワークの**Bulma**スタイルをあてていきます
比較的簡単に見た目が綺麗になりました
2時間ちょっとでアプリ完成！あとはここからどんな改善が考えられるかというのを運用目線やコンテンツ目線で教えてもらいました
今までrailsの全体像が掴めなくてコードをいじっても「今何をやってるんだろ？」って感じだったのがMVCモデルやルーティングの仕組みを図で説明してくれて、今自分が何をしているかすごくわかりやすかったです
アプリの完成と道筋の理解で自信がつきました！

## 社会人エンジニアによるパネルディスカッション
メンターのぽこひでさん、松谷さん、川谷さんとTechTrainの小澤さんによるパネルディスカッションが行われました
![](https://i.imgur.com/kjjpxVh.jpg)

参加者からの質問に対して社会人エンジニアとして答えてもらいました
スキルアップ法やベンチャー企業について、仕事の話、普段の話
なかなか聞けない生の意見を聞くことができました
一番驚いたのはぽこひでさんの「ネットニュースを一日300〜400件見ている」って話です
すごすぎる…
自分も習慣作って実行していきたいけどなかなか難しい
とりあえず毎日腹筋でもしようかな（笑）

## 懇親会
3グループに別れてメンターさんとお菓子を食べながら雑談
と思いきやみんなでメンターさんに質問攻め
![](https://i.imgur.com/HQaOQ8W.jpg)

パネルディスカッションで聞ききれなかったこと、個人的に聞きたいこと、聞きまくりました
メンターさんたちはしっかりそれに自分の意見で答えてくれました
僕もチーム開発で方向性バラバラでなかなか進めないっていう相談をさせてもらいました
すると実際の開発でもそういうことはあるらしく、個人のやりたいことだけだとまとまらないからチームとしての方向性を決めなくちゃいけないという答えをもらえました
実際の開発でもそういうことがあるということと実際の解決法が聞けてよかったです

## 最後に
この勉強会ではrailsのアプリケーション作成が学べて社会人エンジニアの考え方も学べて美味しいご飯も食べれて一石三鳥みたいな勉強会でした
名古屋ではこういった勉強会が少ないのでどんどん増えていってくれると嬉しいなと思います
そしてこういった勉強会に参加する学生も増えていって名古屋でITが盛り上がっていくといいと思います
![](https://i.imgur.com/GVARabf.jpg)
vivaldiがクラッシュする問題

# TL;DR
アップデートしよう！

# 問題
MacbookProで現在メインブラウザとして使用しているVivaldi．
マウスジェスチャー機能など大変便利なので愛用させてもらっているのだが，何度か突然アプリがクラッシュすることがあった．

- PDFからページを戻った際にクラッシュする

# 対処
Vivaldi自体あまり有名なブラウザではないので，情報が少なかったのだが，解決方法は[公式のQ&A](https://forum.vivaldi.net/topic/36258/pdf閲覧時のクラッシュ)に記載されており，Vivaldiをアップデートすると改善されるらしい．

## Vivaldiアップデート方法
1. Vivaldiを選択中に画面最上部の`Vivaldi`をクリック．
2. `アップデートを確認`をクリック
3. 言われた通りにクリック

# 結果
PDFからページを戻った際にVivaldiがクラッシュする問題は改善された．
しかし，まだ稀にクラッシュするので，今後のアップデートに期待したい．

# 現状
2019/05/09にPDFから戻るをするとクラッシュする問題が発生してしまい，最新版(Vivaldi 2.5.1525.40)に更新したところ，10回ほど戻る進むを繰り返してもクラッシュしなかった．
2020/05/22現在では、本問題は解消されており、ストレスなくブラウジングできる様になった。
Apex Design Patterns(Facade)

#1.Facade Patternとは？(外观模式)
このタイプのデザインパターンは、システムへのアクセスインターフェースを提供するため、既存のシステムの複雑さを隠します。

**UML構造図**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/58fd4ee6-36eb-362a-54d3-b0dee60730c2.png)

#2.実装例
##2.1.Shape インターフェース
```java

public interface Shape {
   void draw();
}
```
##2.2.Rectangle クラス
```java

public class Rectangle implements Shape {
   public void draw() {
      // 【矩形の描画】複雑処理はここに実装する
      system.debug('Rectangle::draw()');
   }
}
```

##2.3.Square クラス
```java
public class Square implements Shape {
   public void draw() {
      // 【正方形の描画】複雑の処理はここに実装します
      system.debug('Square::draw()');
   }
}
```
##2.4.ShapeMaker クラス
```java

public class ShapeMaker {
   private Shape rectangle;
   private Shape square;

   public ShapeMaker() {
      rectangle = new Rectangle();
      square = new Square();
   }

   public void drawRectangle(){
      rectangle.draw();
   }
   public void drawSquare(){
      square.draw();
   }
}
```
##2.5.Client (利用者)
実行匿名ウィンドウで下記のソースを実行する。

```java

ShapeMaker shapeMaker = new ShapeMaker();

// 矩形の描画
shapeMaker.drawRectangle();

// 正方形の描画
shapeMaker.drawSquare();
```
##2.6.実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332907/9870ffb8-c1b0-81cf-e88e-db2c0ab3ccd2.png)
URLベースなボリュームメーターを作ってみる

## 概要
twitterで面白いものを見つけたので、共有します。  
それは、URLフォームに再現される、ボリュームメータ？（バー）です。
あれの名前は何なんだろう。

## 作るもの
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">when your friend throws you a dumb idea like a URL-based graphic eq, don&#39;t think twice, just do it. <a href="https://t.co/gBOQR2Ews9">pic.twitter.com/gBOQR2Ews9</a></p>&mdash; jake albaugh (@jake_albaugh) <a href="https://twitter.com/jake_albaugh/status/1118611365508337665?ref_src=twsrc%5Etfw">April 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
URLフォームに動的にボリュームが表現されます。面白い。

## コード
これで終わり！  
以下を保存して`open`コマンドで開けば終わり！


```html
<html>
  <script>
    var l = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
    var x = new AudioContext();
    var a = x.createAnalyser();
    a.fftSize = 32;
    var d = new Uint8Array(16);
    navigator.mediaDevices.getUserMedia({ audio: true }).then(s => {
      x.createMediaStreamSource(s).connect(a);
      z();
    });
    function z() {
      setTimeout(z, 40);
      a.getByteFrequencyData(d);
      var s = [];
      d.forEach(v => s.push(l[Math.floor((v / 255) * 8)]));
      location.hash = document.title = s.join("");
    }
  </script>
</html>
```

### 注意
chromeだと以下の警告が出て、動かないです。
Firefoxで動作確認済みです。

```
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
```
【Angular】複数の非同期処理完了後の処理はforkJoin()を使おう

## forkJoinメソッドで複数の非同期処理を扱う
複数の非同期処理の完了後に処理を走らせる、C#で例えるなら`Task.WhenAll()`のような処理をRxJSで記述するにはforkJoinメソッドを利用します。

## サンプルコード
```
  import { forkJoin, Observable, of } from 'rxjs';

  // メイン処理
  public main(): void {
    const taskList: Observable<string>[] = [];

    // taskList内に非同期メソッドを追加
    taskList.push(this.sub(1));
    taskList.push(this.sub(2));
    taskList.push(this.sub(3));

    forkJoin(taskList).subscribe(resultList => {
      // taskList内の処理がすべて完了した後の処理
      console.log(resultList);
    });
  }

  // サブ処理（非同期）
  public sub(id: number): Observable<any> {
    // Observable型にして返す
    return of('Task' + id + ' is called!');
  }
```

## 処理結果
上記サンプルコード上のmain()メソッドのsubscribe後に出力するログはこのように出力されます。forkJoin()の結果は配列で返ってくるのがポイントです。

```
 ["Task1 is called!", "Task2 is called!", "Task3 is called!"]
```

## 実装方法
### import
必要なクラス、ライブラリをRxJSからimportします。

```
import { forkJoin, Observable, of } from 'rxjs';
```


### Observable型の配列作成
サンプルコードではmain()内でのtaskList作成部分です。
まずObservable型の配列を作成し、その配列に非同期処理（Observable型）を追加します。

```
    const taskList: Observable<string>[] = [];

    // taskList内に非同期メソッドを追加
    taskList.push(this.sub(1));
    taskList.push(this.sub(2));
    taskList.push(this.sub(3));
```

### 非同期処理
サンプルコードでは非同期処理をメソッド化しています。
この処理がmain()内の`forkJoin()`でそれぞれ呼び出されることにより、処理が並列実行されます。
非同期処理のため、戻り値はObservable型でなければなりません。

```
  // サブ処理（非同期）
  public sub(id: number): Observable<string> {
    // Observable型にして返す
    return of('Task' + id + ' is called!');
  }
``` 

### 非同期処理の実行と完了後の処理
作成したObservable型の配列を引数に`forkJoin()`を呼び出します。これで非同期処理を並列実行します。
配列内の非同期処理すべてが完了した後の処理については`subscribe()`内に記述します。
非同期処理の戻り値は下記のコードの`resultList`に配列として入ります。

```
    forkJoin(taskList).subscribe(resultList => {
      // taskList内の処理がすべて完了した後の処理
      console.log(resultList);
    });
```
テスト駆動開発と単なるテストの違い

#テストとは
まずは単なるテストについてです。
デバッグです。バグを探してそのバグを取り除いてクオリティを上げること。
開発に際してプログラムを書くこと多くありません。
下記のテスト駆動開発とは別物です。

#テスト駆動開発(Test Driven Development = TDD)
歴史：意外と昔から存在してます。1989年に最初のTDDフレームワークとして知られているSUnitが誕生し、動作しました。概念としてはもっと昔からあったようですがここでは割愛

###どんなものなのか
ちゃんと動くかチェックしてくれるプログラムから書く　という手法

レッド（動かない）　グリーン（動く）　リファクタリング（きれいにする）
の３つに分けて開発を進めていきます。

■レッド
テストコードを書いてErrorを吐いてもらいます。この状態がレッドです。
想定したErrorが出るところから開発が始まる。
もしここで想定通りプログラムがErrorを吐いてくれないのであればそのコードも疑ってください。

■グリーン
プロダクトコードを書いてテストコードにErrorを吐かせないようにします。
その際のコードは実際のプロダクトに沿ったものでなくていいのでテストコードにTrueを
返してもらうようにコードを書きます。後述しますが無理矢理でもいいです。

■リファクタリング
グリーンになった状態でプロダクトを作成していきます。
ここまではどんな形でもいいのでグリーンの状態に持っていくプロダクトコードを書いてきました。
ここからは本来実装したい機能のコードに変えていく事になります。
これがリファクタリングです。
***
####例
テストコード　文字の数を数えます。
とりあえずrubyで。

テストコード

```ruby:testcode.rb
    def setup
      @counter = Counter.new
    end

    def test_moji_count
      str = ' this sentence has over 7 letters'
      actual = @counter.send(:moji_count, str)
      expected = 7
      assert_equal expected, actual
    end
```

プロダクトコード

```ruby:product.rb
    def moji_count(str)
      str.gsub(/[^a-z]/,'').size
    end
```


***


###TDDが目指すもの
ちゃんと動くコード　　＆＆　きれいに実装すること
開発を進める際に、まずは機能を作ってからあとできれいにしよう、リファクタリングしようと考える方向けです。
とりあえず動くものを作った後に発生する問題点があります。
***
*問題点*
①コードが汚い　直さなければ・・・
②動いているからいいか・・・（直さない）
③変に弄って動かなくなったらどうしよう
***

上記の問題を解決してくれるのがTDDなのです。
先にErrorを吐いてくれる監視員を作ってから開発ができるので命綱のような役割になり
安心して開発に取り組むことが来ます。
テストファーストな開発方法でした。


参考記事
https://rooter.jp/web-crawling/ruby-testcode/
https://postd.cc/test-driven-development/
https://dev.classmethod.jp/study_meeting/read/what-tdd/
https://railsguides.jp/testing.html
https://inokara.hateblo.jp/entry/2018/02/08/230702
ページネーション追加方法

###gemfileに追加###
```rb
gem "kaminari"
```

```erb
$ bundle install
```
・サーバ再起動

###Controller修正###
```ruby 
def index
  @messages = Message.all.page(params[:page])
end
```

###View追加###
```rb
<%= paginate @messages %>
```

##レコード数を変更する場合##
```rb
@messages = Message.page(params[:page]).per(5)
```
perをつけない場合、デフォルトで２５件表示

##順番変更する場合##
```rb
@messages = Message.order(id: :desc).page(params[:page]).per(5)
```

##Bootstrap適用##
```erb
$ rails g kaminari:view bootstrap4
```
errors:There is no directive with "exportAs" set to "ngModel"

# errors:There is no directive with "exportAs" set to "ngModel"

次のようなフォームコードを書くとエラーがでます。

```html
<mat-form-field>
          <mat-label>feature</mat-label>
            <input matInput placeholder="feature" formControlName="feature" #feature="ngModel" [(ngModel)]="feature">
</mat-form-field>
```

<br />


error

```error
errors:
There is no directive with "exportAs" set to "ngModel"
```

<br />

### 理由は

**formControlName**と**ngModel**ディレクティブを同時に使用できないから。



be **mixing Reactive forms directives**, such as `formControlName`, **with the ngModel directive**. This ["has been deprecated in Angular v6 and will be removed in Angular v7"](https://angular.io/api/forms/FormControlName#use-with-ngmodel)

なのでV7にアップグレードする前に、どちらかにするか決めないといけない云々といったことが書かれています。



<br />

なので明らかにパワフル（そして複雑な）リアクティブフォームのformControlNameのほうを今後使用した方がいいようです。

ただ、私の確認ではAngular7.1.4を使用していますが、以下のような書き方は、確かに注意されるのですけど使えています。

```html

<input matInput placeholder="id" formControlName="id" [(ngModel)]="item.id">
```

警告：
It looks like you're using ngModel on the same form field as formControlName. 
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

(訳：formControlNameのあるフォームにngModelを使ってますね。v6でそれらは機能がダブりますし、v7では削除される予定です。）

<br />

### 別のケースの場合

いや、ngModelしか使ってないよという場合は、ミスタイプか、FormsModule, ReactiveFormsModuleをインポートしていないケースが多いかと。


`import { FormsModule, ReactiveFormsModule } from '@angular/forms';`


<br />
#jq コマンドで #json 配列をスライスする例

# n番目の要素

- 0が1番目
- 1が2番目
- 2が3番目

多くのプログラミングの悪癖を引き継いでいるよね‥？

```
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[0]'
1
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[1]'
2
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[2]'
3
```

# n番目以降の要素

コロンで区切り、後ろを空にする ( `[0:]` など  )

```
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[0:]'
[
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9
]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[2:]'
[
  3,
  4,
  5,
  6,
  7,
  8,
  9
]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[4:]'
[
  5,
  6,
  7,
  8,
  9
]

```


# n番目からm番目の要素

- `0:0` ‥これ動かないんだよね
- `0:1` で 1番目の要素が取れる
- `0:2` で 1番目-2番目の要素が取れる‥ふざんけんなよ


```
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[0:0]'
[]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[0:1]'
[
  1
]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[0:2]'
[
  1,
  2
]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[0:3]'
[
  1,
  2,
  3
]
```


[jq 1.5 Manual](https://stedolan.github.io/jq/manual/v1.5/)

始端は含まれ、終端は含まれると‥うう‥ふざけるなよ‥

```
The .[10:15] syntax can be used to return a subarray of an array or substring of a string. The array returned by .[10:15] will be of length 5, containing the elements from index 10 (inclusive) to index 15 (exclusive). Either index may be negative (in which case it counts backwards from the end of the array), or omitted (in which case it refers to the start or end of the array).
```


# n番目の要素 (うしろから数えて)


```
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-1]'
9
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-2]'
8
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-3]'
7
```



# n番目からm番目の要素 (うしろから数えて)

なんとも融通が効かない感じ。

```
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-1:-3]'
[]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-3:-1]'
[
  7,
  8
]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-3:]'
[
  7,
  8,
  9
]
$ echo "[1,2,3,4,5,6,7,8,9]" | jq '.[-4:]'
[
  6,
  7,
  8,
  9
]
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1352








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
PHPで駅をモデルにした最短経路問題を解く(1/4 考え方編)


#はじめに
取り組んだ研修があまりにも骨太だったので備忘録として残しておきたく、書くことにしました。


#お題のルール
この問題は以下の条件を元に取り組んでいます。
1. モデルは京急線全域とする（73駅）。
　　[路線図（公式サイト）](https://www.keikyu.co.jp/train-info/kakueki/index.html)
2. ダイヤは考慮しない。
3. 一駅につき普通列車は5分かかるものとする。なおエアポート急行は4分、特急は3分、快特は2分、エアポート快特は1分それぞれかかるものとする。
4. 停車時間は1分とし、乗換は停車時間中に行えるものとする。
5. 出発駅と到着駅を選択し、最短経路と所要時間を表示する。ただし乗り換えずに通過した駅は表示しないものとする。
6. 逆走は禁止。

#ヒント
1.京急線は枝分かれがいくつか存在している。分岐の基準になる駅（羽田空港行きの枝の場合は京急蒲田駅）を境目とし、路線に番号を付ける。分岐の駅は接続する全ての番号が対応するものとする。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281672/d1906733-51ab-6376-23ca-a0d3c6884024.jpeg" width=６０%>

2.開始駅と到着駅がどの路線に属しているのかを調べ、その路線を一本になるように繋げる。その為に一本道になるルートをあらかじめ洗い出しテーブルで検索できるようにしておく。例えば[1,2]（泉岳寺〜羽田空港）、[1,3,5,6]、[2,3,4]などが該当し、計15ルートある。

3.ルートに該当する全ての駅情報を抽出し、順番通りに並び替える。ルートによっては枝分かれの駅順が逆になるケースがあるのでひっくり返す。

4.３のデータをもとに最短経路を求める。

#今回の方針
最短経路問題自体初めてだったので、調べたらよく出てきた「ダイクストラ法」という総当たりで解く公式を採用しました。
この方式を使うには、隣り合う駅の時間を記した隣接行列が必要とのことでした。
ということで方針は以下のようにしました。
1.止まる電車と所属する路線idを持った駅テーブルを作る。
2.一本道になるルートをカンマで区切ったルートテーブルを作る。
3.駅テーブル~ルートテーブル間の中間テーブルを作り、ルートに応じた駅情報を抽出できるようにする。
４.ビューを作り、1~3のテーブルをphp内のSQLを駆使し必要なデータを抽出する、順番が逆になる駅があればUnionでひっくり返したものを引っ付ける。
5.駅情報を元に到着する電車の種類に応じで時間を振った配列を作成する。
6.5によってできたものをまとめて隣接行列とし、ダイクストラ法に代入する。
7.表示したい情報を出す為、参考にしたダイクストラ法のコードを加工する。
8.完成！

やった感想としては、隣接行列を作成することと、ダイクストラ法を理解し加工することがこの問題の肝だなと感じました。
次回はDBから必要なデータをを抽出するパートです。コードを書きながら解説しようと思います。
[SQL編に続く](https://qiita.com/PAmatsuti/items/38380c2b53e45b1386a9)

#参考サイト
[ダイクストラ法（最短経路問題）](http://www.deqnotes.net/acmicpc/dijkstra/)
[PHPでダイクストラ法](https://qiita.com/kiimiiis/items/25122226b41eec799307)