OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails6】link_toでmethod: :deleteが使えない

## 問題
`<%= link_to 'ログアウト', 'logout_path, method: :delete %>`
のリンクをクリックすると
`No route matches [GET] '/login'`が表示される。
↓
DeleteじゃなくてGetでリクエストが送られてしまっている。
↓
HTMLを確認すると、該当のaタグの中に`data-method="delete"`の記述は確認できる。

## ググって見つけた解決策
以下はどれも変化なし

- `app/javascripts/packs/application.js`で`jquery_ujs`を読み込む
- headの中のjsファイル読み込み部分を修正する
- gem`jquery-rails`を追加する

## 応急処置
`link_to`を`button_to`に変えたら`method: :delete`が効くようになりました。
でもやっぱ`link_to`を使いたい。

## うまくいった方法
```zsh
$ yarn remove @fullhuman/postcss-purgecss
```
`postcss-purgecss`という、導入したけど結局使わなくなったnpmライブラリを削除したら、`method: :delete`が効くようになりました。
Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.

# エラー
```zsh
$ ./gradlew compileJava
> Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.
```

# 対応
- http://jdk.java.net/java-se-ri/8-MR3 からダウンロード

```zsh
$ /usr/libexec/java_home -V | grep jdk
1.8.202.08 (x86_64) "Oracle Corporation" - "Java" /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home
$ mv java-se-8u41-ri/lib/tools.jar "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home"
$ sudo chown root:wheel tools.jar
```
マイクロサービスアーキテクチャを運用してみた



## はじめに
こんにちは。
大学3年生の時に、スタートアップの会社で1年弱CTOをしていました。

その会社では、<a href="https://microservices.io/patterns/microservices.html">マイクロサービスアーキテクチャ</a>を採用し、Kubernetesクラスタ上で運用していたので、その際に感じた課題感と対応策についてこちらに記述します。
## 開発したプロダクト

災害時対応のためのSaaSを開発していました。
このプロダクトの機能要件の作成やペルソナとユースケースの作成の段階から全て担当していました。


## なぜマイクロサービスアーキテクチャなのか。
一般的には、スタートアップでマイクロサービスアーキテクチャを構築することってまずないと思います。
インフラ構築、運用の工数と難易度が爆発的に上がりますし、
<a href="https://microservices.io/patterns/data/database-per-service.html">DBが分離する事</a>によって、依存関係を適切に切り分けないとサービスが機能しなくなるため、アプリケーションの設計の難易度も格段に上がります。

その中でマイクロサービスアーキテクチャを選定した理由は以下の2つです。
一つ目は、マイクロサービスアーキテクチャは**組織のための技術**であるということです。

僕の作りたい組織は、全員がリーダーシップを発揮する組織です。
トップダウンだけでなく、一人ひとりの意思が積み重なって総意になり、ボトムアップの意思決定が最終的に大規模なアプリケーションの品質を高めていくというような状態が理想だと考えています。

また、自分の所属しているマイクロサービスに対しては、オーナーシップを持って、自分で考えて意思決定して欲しい。
人は意思決定の数だけ成長すると考えているので、そうすることで、人が成長できる組織にできると考えられます。

一人一人のエンジニアが考えるべき影響範囲を極限まで減らすことで、チームとして内部実装へのknowledgeがたまりやすく、それぞれがオーナーシップを持てるような環境になるので、チームとしても個人としてもとてもいい影響があります。

そのような観点から、マイクロサービスアーキテクチャの採用に踏み切りました。

二つ目は、**影響範囲を切り分け、信頼性を保つことです。**
自然言語処理の機械学習モデルや、大量のニュースを処理するニュースページは、負荷が大きく**こちらのインフラ要件を満たせなかったり、アプリケーションエラーが起きてしまったりすることで、メインサービスであるダッシュボードの機能まで落ちてしまうことを嫌ったため**、マイクロサービス化する重要性が高くなりました。
また、アプリケーションレイヤーの更新は頻繁に起こるため、プログラムエラーによるダウンタイムがBCP機能に影響しないようにしたかったという意図もあります。
備蓄品管理やスケジュール管理などは数時間のダウンタイムがさほど大きな影響ではないのに対し、BCP機能は災害時にどうしても動作していてほしいプログラムです。
これが最大の理由です。

### マイクロサービスの自由で許容していることいないこと
採用するアーキテクチャやライブラリは同一サービス内で統一されていればいいものとしています。

新しいマイクロサービスを作成する時に、過去のマイクロサービスよりも、より先進的なライブラリを用いて、フレキシブルかつスケーラブルな構成にしていこうという取り組みは、技術者を成長させていく上で欠かせません。
逆に規模の小さなサービスにクリーンアーキテクチャを当てはめるのは大げさになる可能性もあります。
なので、使用するアーキテクチャやライブラリはサービスごとに異なります。

しかし、言語選定レベルの自由は許容していません。
小さい会社でメンバーの入れ替わりが激しいので、長期的に見れば、別のマイクロサービスを開発する可能性が非常に高いからです。

その時に、Go言語とRustが混ざっていると、Go言語のエンジニアとRustのエンジニアは互いに交われないことになりますし、
社内で作成している静的解析ツールやメモリマネジメント、プロファイリングの知見が共有できなくなります。
ほとんどのマイクロサービスで、Go言語で統一しています。
例外的に、データ分析などではPythonが用いられていますし、簡単なスクリプトはRubyやPythonで書くことを許容しています。



## マイクロサービスの運用での課題点

- サービスごとの境界線の定義、ドメインモデリング
- サービス間ネットワーキング
- DBの分離による一貫性と冪等性
- SLI/SLOとError Budget
- Observability
- Testability(unit testとE2E testとサービス結合テスト)
- CI/CDパイプライン(CIとCDの分離、GitOps)
- 機械学習の導入

これらの定義や運用には難しさを感じました。
mercariやYahoo!などのマイクロサービスを使っている会社について調べることで多くの課題を解決することができました。
一般的なマイクロサービス の解決策(Kubernetes, Saga, イベント駆動通信)を用いたので、そういった方法論で多くの課題は解決できます。
逆に、得られた成果は非常に大きかったです。
10人以上の開発組織でしたが、全員が自分の所属しているマイクロサービスについて深い理解を持ち、オーナーシップを発揮している組織にすることができました。
各マイクロサービスについて星の名前を割り振っていましたが、「その星に愛着が湧く」といっていたメンバーに他のメンバーも共感していたのが印象的でした。
そのくらい、オーナーシップを発揮できる環境を作ることができたのは、マイクロサービスアーキテクチャの導入も１つあったと思います。
皆さんも、スタートアップ企業でマイクロサービスアーキテクチャを導入してみてはいかがでしょうか！？
Unity Shortcut Managerで便利なショートカットをつくろう！

#はじめに
この記事は「[サムザップ #1 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/sumzap1)」の12月15日の記事です。
昨日の記事は@tomeitouさんの「[未来の本番不具合を減らすための振り返りと分析](https://qiita.com/tomeitou/items/a3a3e4e0076763098456)」でした。

Unity 2019で「Shortcut Manager」という機能が追加されました。この機能はunity上でショートカットを設定できる機能です。

設定できるショートカットは、既存のメニューの機能や[MenuItem](https://docs.unity3d.com/ja/current/ScriptReference/MenuItem.html)です。
MenuItemとして実装をすれば、独自の機能もショートカットとして追加することができます。

今回はUnity Shortcut Managerを使って、ショートカットを設定する手順を紹介します。

#既存の機能をショートカットに設定する
###ショートカットの設定ウインドウを開く
以下の手順から設定ウインドウを開きます
Windows: Edit > Shortcuts
Mac: Unity > Shortcuts
![Screen Shot 2020-07-06 at 22.09.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/cad9b933-73e1-5d90-2604-b7ffd64466b7.png)![Screen Shot 2020-07-06 at 22.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/4e7b80a6-f987-2f07-9e45-1ec9d1cd465d.png)
赤色キー：すでにショートカットが割り当てられる
青色キー：他のキーとセットで入力するショートカットとして割り当てられている
黒色キー：まだショートカットが割り当てられていない
Category:メニューのどの操作に属しているか
Name : 操作名
Bindings : 割り当てられているショートカット

###ショートカットを割り当てる
ボタンを生成するコマンドにショートカットを割り当てます
操作一覧からボタンを生成するコマンドを探します
Nameの欄をダブルクリックして、割り当てたいショートカットを入力します。今回はOption + bを割り当てました。
![shortcut1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/dc5565a1-699a-3fed-f2d0-bcbedefa6e4f.gif)
実際に使ってみます。
![addButton2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/9cbba342-c280-6c72-da39-5862d91b785f.gif)

# 独自のメニューを作って、ショートカットに設定する
最後に独自の処理をショートカットとしてつかってみたいと思います。
まず、MenuItemとして、ショートカットとして使いたい処理を実装します。
今回はヒエラルキー上の選択されたGameObjectの順番を変更する処理を用意しました。

```c#:title
using System.Linq;
using UnityEditor;
using UnityEngine;
public class TestShortCut : MonoBehaviour
{
    [MenuItem( "Tools/GameObject Down" )]
    private static void Down()
    {
        var selectedGameObjects = Selection.gameObjects;
        foreach(var selectedGameObject in selectedGameObjects.Reverse())
        {
            selectedGameObject.transform.SetSiblingIndex(selectedGameObject.transform.GetSiblingIndex() + 1);
        }
    }
    
    [MenuItem( "Tools/GameObject Up" )]
    private static void Up()
    {
        var selectedGameObjects = Selection.gameObjects;
        foreach(var selectedGameObject in selectedGameObjects)
        {
            selectedGameObject.transform.SetSiblingIndex(selectedGameObject.transform.GetSiblingIndex() - 1);
        }
    }
} 
```
MenuItemを実装すると、Shortcut managerにも表示されます。
![Screen Shot 2020-07-06 at 22.56.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/668f734b-4e83-650e-c929-0899e2d86382.png)
GameObject Down：選択されているゲームオブジェクトをヒエラルキーの順番を下にする
GameObject Up：選択されているゲームオブジェクトをヒエラルキーの順番を下にする
実際に使ってみます
![updownObject2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249963/e28da3df-fcf5-511b-7ff0-f59ad1bf038d.gif)

#まとめ
今回はUnity Shortcut Managerを使って、ショートカットを設定する方法を紹介しました。
普段、マウスを使ってよく行う操作をショートカットに設定すると、とても快適になります。もしよかったら、使ってみてください。最後まで読んでいただきありがとうございました。
明日のアドベントカレンダーの担当は@ichikawa_masahiroさんです。
Cento7.x postfix + dovecot SSL/TLS化

SSL/TLSがない場合のメールクライアントのポート設定は
送信サーバ(SMTP)はsmtp(25)を使う。
但し、Outbound Port25 Blockingなどで制限する場合
はsmtp-submission(587)を使う。
受信サーバ(POP3)はpop3(110)を使う。

一方SSL/TLSの場合、ポート設定は
送信サーバ(SMTP)はsmtp-submission(587)を使う。smptps(467)は非推奨らしい。
受信サーバは（POP3)はpop3s(995)を使う。

### 証明書の発行
let's encryptにて発行。httpサーバ用ではないのでstandaloneで発行
同一サーバにwebサイトでの証明書発行がいる場合、エラーとなる？ので
nginx(apache)を停止して発行する。
このままだとcronによる自動再発行でエラーとなるかも。

```bash
# certbot certonly --standalone -d black.jp
```

使用する証明書は以下の2ファイル
Certificate Path：/etc/letsencrypt/live/black.jp/fullchain.pem
Private Key Path: /etc/letsencrypt/live/black.jp/privkey.pem

### postfixの設定変更
```config:/etc/postfix/main.cf
smtpd_tls_security_level = may
smtpd_tls_cert_file = /etc/letsencrypt/live/black.jp/fullchain.pem
smtpd_tls_key_file = /etc/letsencrypt/live/black.jp/privkey.pem
smtpd_tls_session_cache_database = btree:/var/lib/postfix/smtpd_scache
smtpd_tls_session_cache_timeout = 3600s
smtpd_tls_received_header = yes
smtpd_tls_loglevel = 1

```

```config:/etc/postfix/master.cf
smtps     inet  n       -       n       -       -       smtpd
#  -o syslog_name=postfix/smtps
  -o smtpd_tls_wrappermode=yes
  -o smtpd_sasl_auth_enable=yes
#  -o smtpd_reject_unlisted_recipient=no
#  -o smtpd_client_restrictions=$mua_client_restrictions
#  -o smtpd_helo_restrictions=$mua_helo_restrictions
#  -o smtpd_sender_restrictions=$mua_sender_restrictions
  -o smtpd_recipient_restrictions=permit_sasl_authenticated,reject
#  -o milter_macro_daemon_name=ORIGINATING
```

### dovecotの設定
設定するファイルは10-ssl.conf、10-master.conf。
```config:/etc/dovecot/conf.d/10-ssl.conf
ssl=yes
ssl_cert = </etc/letsencrypt/live/black.jp/fullchain.pem
ssl_key = </etc/letsencrypt/live/black.jp/privkey.pem
```

POP3(POP3S)とIMAP4(IMAP4S)の有効無効とポートの設定を行う。
POP3とIMAP4のportは0とし無効に、POP3SとIMAP4Sはportを指定しssl=yesとする。

```config:/etc/dovecot/conf.d/10-master.conf
...
service imap-login {
  inet_listener imap {
    port = 0
  }
  inet_listener imaps {
    port = 993
    ssl = yes
  }
...
service pop3-login {
  inet_listener pop3 {
    port = 0
  }
  inet_listener pop3s {
    port = 995
    ssl = yes
  }
}
```

### メールクライアントの確認
Becky! で確認していたが
「基本設定」タブのPOP3S、SMTPSのチェック状態で
「詳細」タブのサーバのポート番号が自動で変更されるので
メール送受信プロトコルで標準ポートを使用しない場合は注意が必要。
CodeForces Round 689 Div.2 C. Random Events(確率)

https://codeforces.com/contest/1461/problem/C

# 概要
- 1からnまでの数字をシャッフルした数列aがある
- m個のr, pが与えられる。これは$a_1$から$a_r$(を含む)までをpの確率でソートする（数列aを書き換える）
- mの操作を1回ずつ行い、数列aがソート(昇順)されている確率を求めよ

# こう考えた
例えば今、n=5とすると、いくつかのパターンが考えられる。
パターン1; $[1, 2, 3, 4, 5]$ → 並び替えが不要なパターン
パターン2: $[3, 2, 1, 4, 5]$ → 3番目までの並び替えが必要なパターン。これをu番目まで並び替えが必要と呼ぶ。
パターン3: $[5, 4, 3, 2, 1]$ → 全ての並び替えが必要。これはパターン2がu=n番目まで並びかえ必要なパターン。

つまり、求めたい配列を考えると、$i = 1,2, ... , n$ に対して、$a_{i} = i$ であることが必要であり、$u$とは、$i = 1,2, ... , n$と見ていった際に、最後に$a_{i} = i$ではないインデックスであることがわかる。

ここで、パターン2を考えると、$r=1$から$r=u-1$までの並び替え動作は一切結果に影響がないことが分かる。なぜなら、インデックス$r$の値がソートされない限り、数列全体がソートされているとは言えないからである。逆に、$u$から$n$までの並び替えは一度でもそれが実行されれば、目的の配列になることが分かる。

ここで、目的の確率は「数列がソートされている確率」であるというのは、「$1 - $数列がソートされていない確率」となることは自明である。
そこで、数列がソートされないための確率を考えると、rがu以上の抽選に1度でも当たると、ソートされた数列になるため、rがu以上の抽選に1度も当たらない確率を考えれば良い。

つまり、rがu以上の全てについて、当たる確率がpなのであるから、$1-p$を引き続ければ良い。

# コード
```Python

def do():
    n, m = map(int, input().split())
    dat = list(map(int, input().split()))
 
    untilnum = 0 # ソートされていない最後のインデックス
    for i in range(n):
        if dat[i] != (i+1):
            untilnum = i
 
    x = 1
    for mm in range(m):
        r, p = input().split()
        r = int(r) - 1 # 1origin -> 0origin
        p = float(p)
        if r >= untilnum:
            x *= (1 - p)


    if untilnum == 0: 
        # ソートされていないインデックスがないなら最初からソートされている
        print("1.0")
        return
 
    print(1-x)
 
q = int(input())
for _ in range(q):
    do()

```

https://codeforces.com/contest/1461/submission/100938467
redash に対してpsqlみたいにSQL投げられるCLI作ってみた

こんにちは。LAPRASでデータ分析の責務を担当しているdenzowです。

この記事は、[LAPRAS Advent Calendar 2020](https://qiita.com/advent-calendar/2020/lapras) 10日目の記事です。オレが書いたときが10日目です。
[5日目](https://qiita.com/denzow/items/35671b06b5be3491f779) ではテクニカルサポート担当でしたが、LAPRASは責務が流動的で一人が様々な責務を担うので、私は開発者以外にテクサポとデータ分析をやっています。


## LAPRASのデータ分析

LAPRASでは今のところ[redash](https://redash.io/) をAWS上に構築してデータ分析に活用しています。分析対象は基本的には[LAPRAS SCOUT](https://scout.lapras.com)や[LAPRAS](https://lapras.com)のRDBMSですが、スプレッドシートやAWS Athena、Google Analyticsもデータソースにしています。

redashではRDBMS以外のデータソースを分析できる上に、それらを横断した(異種のデータソース間でのJOIN)クエリを実行できるので大いに活用しています。
※異種データソース間のJOINはそれなりに痛みも伴いますが…

## redashでのクエリ作成

redashでクエリを作成する場合、こんな感じの画面になります。

![範囲を選択_366.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44722/b063464a-6939-4507-e7cf-927d81eb465c.png)

左のサイドパネルにデータソースの選択やそこで利用できるスキーマの一覧等が表示され、右にクエリを書いて実行その下に結果がでるという流れで行います。SQL入力中はスキーマ名や予約後等の補完も効きますので、ブラウザ上でも十分SQLは書けます。

## それでもcliが好き

普通にSQLを書く分には十分すぎる機能があるのですが、私はDBAだった背景がありSQLとはCLIで書く物という刷り込みがなされています。

OracleのSQLPLUS,MySQLのmysqlコマンド、PostgreSQLのpsql等どれも気軽に起動でき、困らない程度の機能が入っているので使い込むと手に馴染みます。なのでredash上のクエリを書くときもできればターミナル上でやりたいのです。特に最高のSQL用CLI(個人の感想です)であるpsqlのようなツールがあればと日々思っておりました。

## redaql

そんな思いが詰まった[redaql](https://github.com/denzow/redaql)を作りました。作ったと言っても、前から欲しかった物をこのアドベントカレンダー用に突貫工事しただけなのでまだ最低限の機能しかありません。

- psqlライクな見た目
- `\c data_source_name`でDBを切り替えるようにデータソースを切り替えられる
- SQL作成中の入力補完

![Peek 2020-12-14 14-35.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44722/777b0518-5abf-71d5-d3f9-8740c4a727a3.gif)


なんとなくpsqlみを感じる挙動になっているかと思います。そのうち起動引数で接続パラメータ等を取りますが、現在は以下の環境変数より雪辱情報を取得しています。

```
export REDASH_API_KEY=XXXXX
export REDASH_SERVICE_URL=XXXXX
export REDASH_HTTP_PROXY=必要に応じて
```


### redash_py

redaqlはredashのAPIを通じてデータソースの一覧やスキーマ情報、アドホックなクエリ実行を行っています。確認する限りRedashのAPIに対応するPythonClientは存在しなかったので作りました。

https://github.com/denzow/redash-py

Redashが備えるAPIのうち、必要になったものしか実装していませんので今後埋めていきたいと思っています。一応redash自体のAPIガイドは[ここ](https://redash.io/help/user-guide/integrations-and-api/api) にありますが、明らかに乗ってないAPIも多いです。

APIに対応するredash自体のコードはここですので、ソースを読むと意外とこんなAPIもあるんだ！みたいな感じでだいたいやりたいことは見つかります。
https://github.com/getredash/redash/blob/master/redash/handlers/api.py


## まとめ

とりあえずまだredaqlは作ったばかりでちゃんと運用できてないので自分で使いながら今後も整えていきます。また来年のアドベントカレンダーにはスペシャルになったredaqlの話をさせていただきます。
VSCodeでコードフォーマット(JSON)

# 概要
小技ですが、JSONの整形がパッとできたら嬉しいですよね。
今回はVSCodeを用いたそんな方法をご紹介します。

# やり方
1,言語をJSONに変更する。
![スクリーンショット 2020-12-14 12.06.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/2d34d83b-a32f-56b7-52fe-f7ed06c1a2f9.png)

2,Format Documentを押す。(右クリック、control+左タップ)
![スクリーンショット 2020-12-14 12.05.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/3c51aeb2-c22a-f6d1-008e-9e45d891138d.png)

# まとめ
JSONのフォーマットは普段あまり使わないと思いますが。、
いざ必要になった時、ちょこっと役にたてば幸いです。
プログラミング向けの等幅フォントをつくりました

## Relaxed Typing Mono JP
Source Code Pro と Noto Sans JP を組み合わせたフォントを作成しました。

この組み合わせのフォントには、すでに Source Han Code JP がありますが、文字幅の比率が半角と全角で 3:5 です。これを 1:2 に調整しました。

ライセンス上、似た名前にするのが憚られましたので、まったく関係ない名前を考えました。Relaxed Typing Mono JP という名前で公開しています。

[リポジトリ](https://github.com/mshioda/relaxed-typing-mono-jp)は Github にあります。
フォントのダウンロードは[こちら](https://github.com/mshioda/relaxed-typing-mono-jp/releases)から行えます。

## 表示例
表示させてみると、こんなかんじになります。
![RelaxedTypingMonoJP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103414/3d20e4d9-2bd7-d597-3cad-c08c6101afae.png)

ちなみに、同じ文字列を Source Han Code JP で表示させると、こんなかんじになります。

![SourceHanCodeJP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103414/4b438b15-8c00-1b4b-bbd1-f8d4e44dc660.png)

比較していただくと一目瞭然ですが、基本的には、全角文字の間隔を広くすることで文字幅の比率を調整しています。半角文字のほうの間隔をつめて 1:2 にするフォントが多いなか、逆に全角を広げる方向で調整したということになります。

## おわりに
こうした合成フォントは、しらべてみるとすでにいくつかあるようですね。つくる前によく調べなさいという話でした（^^;）。

英数字の間隔が比較的ゆったりめ（全角はさらにゆったり）しているフォントとして、選択肢のひとつにしていだければ、と思います。
対応ブラウザをIEからChromeに変更する時の注意点その１(textareaのリサイズ)

# 対応ブラウザをIEからChromeに変更する時の注意点その１(textareaのリサイズ)

対応ブラウザをIEからChromeに変更する時の注意点について備忘録的に記載します。

# 発生問題点
textareaがリサイズできてしまう。

# 環境
* <font color="Green">__OSはWindows10__</font>
	* バージョン：1803(OSビルド17134.407)

* <font color="Green">__Microsoft Internet Explorer__</font>
	* バージョン：11.407.17134.0
	* 更新バージョン：11.0.95(BK4466536)

* <font color="Green">__Google Chrome__</font>
	* バージョン：76.0.3809.100(Official Build) (64ビット)

# 画面イメージ

IEでは以下のようにリサイズできなかった。

![IE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701538/862f211a-8c8c-d8e3-17fb-69a01d2f791f.png)

しかしChromeでは以下のようにリサイズでてきしまう。


![チャーム1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701538/57940046-dece-6bc8-e36b-51c936b7870e.png)

# ソース
```
 1<html lang="ja">
 2	<head>
 3	<meta charset="utf-8">
 4	<title>textareaのテスト</title>
 5	<head/>
 6	<body>
 7	textarea<BR>
 8	<textarea cols="40" rows="2" maxrow="2"></textarea>
 9	</body>
10</html>
```


# 解決方法
textareaのstyleに明示的にresize:noneを指定する。
以下ソースの8行目に『style="resize:none;』を追加

# ソース
```
 1<html lang="ja">
 2	<head>
 3	<meta charset="utf-8">
 4	<title>textareaのテスト</title>
 5	<head/>
 6	<body>
 7	textarea<BR>
 8	<textarea cols="40" rows="2" maxrow="2" style="resize:none;"></textarea>
 9	</body>
10</html>
```

# 変更後の画面イメージ


![チャーム2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701538/136e8266-e14e-e208-71d9-ee5308201ef5.png)
DBつくったけど、日付の時間が正しくない ~そんなときの対処法一例~

DBつくったけど、日付の時間が正しくない。
そんなときの対処法一例を記します。


結論としては、INSERTで挿入する値をnow()にしてみる。
というかんじです。

```PHP:db.php
    // DBへの接続の記述（省略）

    $dbh = new PDO($dsn, $user, $password, $options);
    
　　// INSERTで挿入する値をnow()にしてみる  
    $sql = 'INSERT INTO contact (name,tel,email,create_date,ip) VALUES(:name,:tel,:email,now(),:ip)'
    
    $stmt = $dbh->prepare($sql);
   
    // array内に日付に関する記述はしない
    $stmt->execute(array(':name' => $name, ':tel' => $tel, ':email' => $email, ':ip' => null));

```
Valtioで超絶簡単React状態管理

https://github.com/pmndrs/valtio

![valtio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63327/3abf08a2-8d96-70a5-8fe6-6b1a0182171c.png)

### ステートオブジェクトを包む

```js
import { proxy, useProxy } from 'valtio'

const state = proxy({ count: 0, text: 'hello' })
```

### どこからでも変更できる

```js
setInterval(() => {
  ++state.count
}, 1000)
```

### useProxyでReactへ

```jsx
function Counter() {
  const snapshot = useProxy(state)
  // 読み込む場合はsnapshot、いじる場合はstate
  // snapshotの読み込み部分が変化したら再描画される
  return (
    <div>
      {snapshot.count}
      <button onClick={() => ++state.count}>+1</button>
    </div>
  )
}
```
Dockerを使ってjupyterlabを起動する

#概要
Dockerを使用することで複雑な環境構築なしに簡単にjupyterlabの環境構築をすることが出来るのでその方法をメモします。

#参考
**dockerの導入**
・[WindowsでDocker環境を試してみる](https://qiita.com/fkooo/items/d2fddef9091b906675ca)
・[Windows10 に Docker Desktop をインストール](https://mikolabo.net/index.php/2020/12/07/docker_desktop/)

<b>jupyterlab for docker</b>
・[docker for jupyter 公式github](https://github.com/jupyter/docker-stacks)
・[Dockerで基本的なData Science環境(Jupyter, Python, R, Julia, 定番ライブラリ)を構築する。](https://qiita.com/y4m3/items/c2703d4e131e05084b7b)
#Dockerのインストール

・mac os 

インストール

```:ターミナル
brew update
brew install docker
brew cask install docker  
```
バージョンの確認

```:ターミナル
docker --version
```

・windows

windowsは以下のバージョンに対応しています。

windows10pro
windows10home

ダウンロード方法は以下のurlより`Get Docker`よりdocker for windowsをインストールします。
(※事前にdockerhubの登録が必要になるので[このリンクのqiitaの記事](https://qiita.com/fkooo/items/d2fddef9091b906675ca)を参考にしてdocekrhubの登録を行ってください。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/2acb9e60-7ee1-2c91-7704-292c9c7c346d.png)


#docker for jupyterようのdocker-compose.ymlの作成

公式イメージと参考のqiitaの記事をもとにdocker-compose.ymlを作成していきます。

```:docker-compose.yml
version: "3.9"
services:
  jupyterlab:
    image: jupyter/datascience-notebook
    container_name: jupyterlab
    ports:
      - "10000:8888"
    environment:
      - JUPYTER_ENABLE_LAB=yes
      - TZ=Asia/Tokyo
    volumes:
      - .:/home/jovyan/work
    command: sh work/go.sh
```

はじめDockerfileを作成した後docker-composeしようと思っていたが以下のようなエラーを吐かれたので断念😭

```
Traceback (most recent call last):
  File "compose/cli/main.py", line 67, in main
  File "compose/cli/main.py", line 126, in perform_command
  File "compose/cli/main.py", line 302, in build
  File "compose/project.py", line 468, in build
  File "compose/project.py", line 450, in build_service
  File "compose/service.py", line 1147, in build
compose.service.BuildError: (<Service: jupyterlab>, {'message': 'invalid reference format'})

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "docker-compose", line 3, in <module>
  File "compose/cli/main.py", line 78, in main
TypeError: can only concatenate str (not "dict") to str
[50679] Failed to execute script docker-compose
```


そのためshellscriptを作成してそこでrequirements.txtのインストールを行う記述をしました。
go.shファイルは以下のようにしてあります。

```:go.sh
cd work
pip install -r requirements-data.txt
start-notebook.sh --NotebookApp.token=''
```

requirements-data.txtには機械学習のライブラリ等を記述しました。

```
tensorflow
keras
matplotlib
bs4
selenium
```

##Dockerの起動
以下のコマンドを順々に入力しdockerを起動していきます。

```
docker-compose build #初回
docker-compose up 
```

[http://localhost:10000/](http://localhost:10000/)にアクセスするとjupyterlabを起動できているのを確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/2672803c-cf3b-09c5-3671-94b5965c7c23.png)

dockerを使ってjupyterlifeを楽しみましょう！！

※このコードは以下のgithubに保存してあります。必要であればインストールして試してください。

[ソースコード](https://github.com/marumaru1019/teaching-python_programing)

## 余談
dockerの使い方がよくわからない場合に生のアナコンダのインストール方法について以下の記事でわかりやすく書いていたので活用ください。
[Python japan](https://www.python.jp/install/anaconda/windows/install.html)
【Rails】CloudFrontの署名付きURLの作成方法

## 準備
Gemの「AWS - SDK」を使用する。
※ CarrierWaveを使用している前提

```Gemfile
gem "aws-sdk"
```

## 実装
KEY_PAIR_ID：CloudFrontで作成したキーペアのID
PRIVATE_KEY：CloudFrontで作成したキーペアのプライベートキーの内容
※ private_key_pathオプションを使用すれば、プライベートキーのファイルパスを指定すれば読み込んでくれる。
[公式リファレンス](https://docs.aws.amazon.com/sdk-for-ruby/v3/api/Aws/CloudFront/UrlSigner.html)

```ruby
class ApplicationUploader < CarrierWave::Uploader::Base
  def signed_url
    if path.blank?
      url
    else
      signer = Aws::CloudFront::UrlSigner.new(key_pair_id: KEY_PAIR_ID, private_key: PRIVATE_KEY)
      signer.signed_url(url, expires: Time.zone.now + 5.minutes)
    end
  end
end
```

## 関連
[【AWS】CloudFrontで署名付きURLの設定方法（プライベートコンテンツの配信）](https://qiita.com/may-solty/items/a1ac7d64f9a24efad4ab)
laravel開発サイトにngrok経由で接続する際にhttps固定にする

ローカル開発中のlaravelで内蔵サーバ (php artisan serve) を起動し一時的な確認のためにngrok経由で接続する際、httpsで接続してもhttp接続に切り替わってしまいました。https接続固定にする設定をおこなったのでメモ。

###私の環境
- macOS Catalina
- PHP 7.4.8 
- Laravel 6.18.8
- ngrok 2.3.35

###設定

laravelディレクトリ内で以下ファイルを設定

```php:.env
...
APP_ENV=dev_ngrok
...
APP_URL=http://127.0.0.1:8000
...
```

```php:app/Providers/AppServiceProvider.php
public function boot()
{
    //.envファイルで APP_ENV=dev_ngrok の際に適用される
    if(env('APP_ENV') === 'dev_ngrok')
    {
        $this->app['request']->server->set('HTTPS', true);
    }
}
```

###サーバ起動

####Laravelローカルサーバ起動
```shell
php artisan serve --host=127.0.0.1 --port=8000
```

####ngrok起動

```shell
ngrok http 127.0.0.1:8000
```

```shell
Session Status                online                                                                        
...                                                       
Forwarding                    http://*********.ngrok.io -> http://127.0.0.1:8001                         
Forwarding                    https://*********.ngrok.io -> http://127.0.0.1:8001 
...
```
となるので https://*********.ngrok.io に接続するとhttpsで接続される

###参考文献
>https://stackoverflow.com/questions/60407010/unsupported-ssl-request-php-artisan-serve
【GAS】yyyy/MM/dd文字列から日時オブジェクトを取得する

#はじめに
GoogleAppsScriptで「yyyy/MM/dd」表記の<font color="red">**文字列**</font>から、日時オブジェクトを取得する方法です。
スプレッドシートから文字列で日時を取得した後、日時オブジェクトとして扱いたい時に利用しています。

#完成したコード

```javascript:code.gs
var date = '2020/12/10';//日時を文字列で設定

var yy = date.slice(0,4);//→「年」の部分'2020'を切り出す
var mm = date.slice(5,7);//→「月」の部分'12'を切り出す
var dd = date.slice(8,10);//→「日」の部分'10'を切り出す

var dateObj = new Date(yy,mm-1,dd);//日時オブジェクト取得(月は0からカウントするので-1とする)
console.log(dateObj);
```

#結果

```javascript:code.gs
Thu Dec 10 00:00:00 GMT+09:00 2020
```

以上です！
Amazon Redshift MLについて調べてみた

##はじめに
**この記事は株式会社ナレッジコミュニケーションが運営する [Amazon AI by ナレコム Advent Calendar 2020](https://qiita.com/advent-calendar/2020/knowcom-amazonai) の 14日目にあたる記事になります。**

現在開催中のre:Invent2020にて、発表された新サービス「Amazon Redshift ML」について、調べたことを簡単に書いていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321357/e83bf447-94e6-e738-c139-d64fecdca82b.png)

##Amazon Redshiftとは
Amazon Redshift(以降Redshift)は、クラウド型のデータウェアサービスです。
Redshiftを活用することで、ペタバイト級のデータウェアハウスを構築し、社内・社外の多様なデータを統合することが可能です。Redshiftは巨大な表に複雑なクエリ（複数の表を結合する等）を実行することに最適化されているため、小売、在庫、金融データといった膨大なデータを特別な苦労なく処理することができます。
RedshiftはAmazon Redshift Spectrumというサービスも提供しているので、今回はこちらについても少し触れたいと思います。

##Amazon Redshift MLについて
Redshift上のデータをシームレスに機械学習処理をすることができるサービスです。
では、従来のRedshift上のデータを機械学習処理する際の一般的な例を挙げさせていただきます。
これまでRedshift上のデータの機械学習させるには、下記の手順が必要でした。
1.Redshift上のデータをAmazon S3にエクスポート
2.Amazon Sagemakerにて、分析環境の準備
3.Amazon Sagemaker上でモデルの開発、推論、デプロイ
上記のように、データの移動、Amazon Sagemakerの利用方法及びモデル開発などの専門的知見などRedshift以外にも必要な知識がありました。さらに、これらの環境を準備するのにも時間がかかります。

##Amazon Redshift MLでできること
Amazon Redshift MLでは、以下のことができます。（下記の図の概略です）
・簡単なSQLコマンドを使用してMLモデルを作成およびトレーニングできます
・自動アルゴリズム選択を使用する柔軟性を提供します（Amazon Sagemakerと連携）
・データを自動的に前処理し、モデルを作成、トレーニング、および展開します
・データウェアハウスの外部にデータを送信することなく、SQLを使用して予測を生成できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321357/4f889f45-f386-a692-09a4-b4d9e94f2f46.png)


##Amazon Redshift Spectrumについて
Redshiftは非構造化データについては、Amazon S3に保存しているユーザーが多いようです。Amazon Redshift Spectrumを使用することで、Redshift標準のSQLクエリを実行するかのように簡単にAmazon S3上に保存された非構造化データを分析することができます。Redshift Spectrumは、検索されたデータに基づいてクエリ演算能力を自動的に拡張することから、数テラバイトから数ペタバイトさらには、数エクザバイトに至るまで処理するデータの量に関わらず、Amazon S3内のデータに対してすばやくクエリを実行できます。

##Amazon Redshift MLとAmazon Redshift Spectrumについて
Redshift MLは、Redshift上に保存されている構造化データに対して、直接SQLを実行することで機械学習などの分析を行なうことができます。
Redshift Spectrumは、Amazon S3上にある大規模な非構造化データに対して、Redshift同様のSQLクエリを実行、分析を行なうことができます。

##利用する際の注意点
Redshift MLは、SQLでクエリを実行することで、機械学習ができるようになるということは、前項までに説明をしましたが、
多種多様なサービスを有しているAWSだからこその各サービス連携が自動で行なわれている仕組みになっています。
下記サービスが連携することで実現できるようになっており、対象のサービスに対する権限付与が必要になります。
自動で連携するサービス
・Amazon Redshift ML（本サービス）
・Amazon S3
・Amazon Sagemaker
最低限上記サービスのFullaccess権限の付与は実施しましょう。

##料金について
Redshift MLを利用するために追加でRedshiftの料金は発生しません。
既存のクラスタを予測できるように活用するため、追加でRedshiftの料金がかかることはありません。

##おわりに
これまでは、Redshit上のデータで機械学習などを行う場合は、データを一度エクスポートするなどの前準備が必要でしたが、
今回のRedshift MLを使うことで、シームレスにRedshift上のデータを機械学習することができるようになるため、もともとRedshiftを利用している方にとっては、分析作業の効率化にもつながるのではと思いました。


参考記事
AWS公式ブログ
https://aws.amazon.com/jp/blogs/big-data/create-train-and-deploy-machine-learning-models-in-amazon-redshift-using-sql-with-amazon-redshift-ml/
https://aws.amazon.com/jp/blogs/news/amazon-redshift-spectrum-exabyte-scale-in-place-queries-of-s3-data/
https://aws.amazon.com/jp/about-aws/whats-new/2017/04/aws-announces-redshift-spectrum/
簡単！automaterを使ってgitでバッチ処理

[マンハッタンコード](url "https://www.mht-code.com/" )の[chi:bird](URL "https://twitter.com/MHTcode_chibird")さんに「automaterを使用すると簡単に自動化できるよ」
との情報をいただいたので
面倒なgitのコマンドを自動化することにしました

automaterを起動し新規書類作成後アプリケーションを選択
![スクリーンショット 2020-12-14 10.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771733/fd97d1b1-95f6-1ac2-571c-675bf6e8b76c.png)

テキストの入力を求めるを追加
![スクリーンショット 2020-12-14 10.54.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771733/c29a27bd-ccb8-e02e-2026-82231d0a6b8b.png)


変数の値を設定を追加


![スクリーンショット 2020-12-14 10.54.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771733/4ba493e6-42da-5bba-e7b1-8cdee225d26d.png)

シェルスクリプトを追加

![スクリーンショット 2020-12-14 10.55.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771733/32045895-4e75-9ac6-1ebd-85666c0455f3.png)


シェルスクリプトに以下コマンドを記載します

```
ssh-add -A (ssh agentを復元)
cd Users/hogehoge （gitのレポジトリ配下まで移動)

git add . 

git commit -m "$1" ($1 ==>テキストで入力した値)

git push 
```

#push時にパスワードを要求される場合(sshの場合)
ssh -agentの設定する必要あり
https://qiita.com/ggg-mzkr/items/fd32e1a6b7353ca52d3c



#mac起動時に実行したい場合
https://qiita.com/ggg-mzkr/items/fd32e1a6b7353ca52d3c
環境設定->ユーザーとグループ->ログイン項目に先ほど作成したアプリを追加



#時間帯によってアプリを起動させたい場合
macのカレンダーを使用する

https://www.wholenotism.com/blog/2020/04/timeredexecommand.html
非エンジニアの俺がMastodonサーバを保守したら2年たって、アップデートのやり方が固まってきたんだがメモ

[**✩.*˚fediverse advent calendar 11日目の記事だよ**](https://adventar.org/calendars/6046)

# わたくしのMastodonサーバ
[**ドン・ゴロツキ**](https://gorone.xyz/about/more)と申します。

- 全登録者：64人とかそれくらい
- アクティブ人数／週：40人くらい※ちょっと基準よくわかんない
- 招待制（adminのみ招待可能）
- 月3500円くらいの費用
- 精鋭エンジニアさんにお手伝いいただいて構築した経緯あり[（詳細）](https://le-mal-du-pay.goat.me/bRoQqQRm1i)

### ☆アップデートのタイミング
- **Master？なにそれ美味しいの**
- 「タグ付き最新版が出たよ～」と[Mastodon公式](https://mastodon.social/@Mastodon)さんがトゥートしたら渋々アップデートする
- とはいえ「一度最新のタグ付きでなくなったら、もう追いかけられなくなって詰む…！！！」という恐怖があるため、割と早めに最新にする傾向がある※私はとてもビビリな性格です

### ☆アップデート前の確認
- **リリースノートをざっと読む**
     - 「よくわからんけど…なんかこう…修正が中心やな…」くらいの雑な解像度
     - 私はDockerを使っていないので、Non-Dockerって書いてあるところはしっかり読んでおく。イレギュラーな作業が入ってるときが結構ある
     -  最新タグ付きのリリースノート（2020/12/12時点）は下記。末尾のver番号を、該当の数字に書き換えればそれでもOK。

`https://github.com/tootsuite/mastodon/releases/tag/v3.2.1`

- **アップデート方法のおさらい**
     - Mastodon公式サイトの、[アプデ方法ページ](https://docs.joinmastodon.org/admin/upgrading/)をチェックする。たまに変わってるときがある。

# アップデート手順（ざっくり）
### 1.一時swapを上乗せする（アプデの時のみ）
`sudo fallocate -l 1G /swap
sudo mkswap /swap
sudo swapon /swap
free -h`

**止める**
`sudo swapoff /swap`

**削除**
`sudo rm /swap`

**確認**
`free -h`
### 2.ポスグレの最新バックアップを作る
- ポスグレアカウントに入って、バックアップを吐き出す
`sudo su - postgres
pg_dumpall > 2021021-3.2.1.dumpall`
※バージョンと日付を書き換えていく

- ポスグレの古いのを消す
`rm /var/lib/postgresql/2020808-3.2.0.dumpall`
※これがたまるとサーバ容量を圧迫してくるため毎回消す
### 3.アップデートする

- mastodonアカウントログイン
`sudo su - mastodon
cd live`

- バージョンチェック（最初のほう)
`cat lib/mastodon/version.rb`

- バージョンアップ本番
`git fetch --tags
git checkout v3.1.諸々`

- バージョンチェック再度（新しくなっているか）
`cat lib/mastodon/version.rb`

### 4.bundle installする
`RAILS_ENV=production bundle install --deployment --without development test
RAILS_ENV=production yarn install `
### 5.migrateする
`RAILS_ENV=production bundle exec rails db:migrate`
### 6.precompileする　
`RAILS_ENV=production bundle exec rails assets:precompile`
※しなくていいときもありそうだけど毎回しちゃっている
### 7.mastodonを再起動させる
- mastodonアカウントを抜ける

`exit`

- 諸々再起動する

`sudo systemctl restart mastodon-sidekiq`
`sudo systemctl reload mastodon-web`

### 8.本番みて、ソースコードが最新か確認。

# その他おぼえがき

### ①yarnが古いと言われたら
`sudo apt install yarn`

### ②Ruby verアップ
`$ cd "$(rbenv root)"/plugins/ruby-build && git pull`
`$ rbenv install 新ばーじょんの番号`
`例）$ rbenv install 2.6.6. `

### ③マメに更新必須！
`sudo apt update`
`sudo apt upgrade`
### ④勝手 Mastodon tootctl リファレンス は神！！
なにかあったら、[くますんさん](https://qiita.com/kumasun)作成の
___[勝手 Mastodon tootctl リファレンス](https://qiita.com/kumasun/items/870769d7db4d95cde238)___
を参考に調べまくりんぐ！

#Special Thanks
[のえるさん](https://fedibird.com/@noellabo)
[わんせたくん](https://odakyu.app/@ars42525)
[まめもさん](https://momo.mame.moe/@mamemomonga)
View のレイアウト方法を AutoLayout から温かみのある手計算にしたらパフォーマンスが 9.26 倍になった話

## prev

本記事は [iOS Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ios) の15日目の記事です。
昨日は @zwtin さんで [ALAsset の thumbnail メソッドでの画像取得は止めたほうがいい](https://qiita.com/zwtin/items/1af0352654d100a2ce5c) でした。

## disclaimer

手計算を勧める意図は無く、特殊な状況下で計測した内容です

## 前提

- 画面の高さの10倍程度の contentView を持つ UIScrollView をレイアウトする
- カレンダーの日付をそれぞれ UILabel で構成しているような View 数が多いケース
    - 画面イメージ
        - <img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12653/d58e69f4-0932-26b5-575e-701d91595944.png" />

## 変更内容

- 画面遷移に時間がかかるようになったのが変更のきっかけ
- タイトルの通りで AutoLayout + UIStackView でレイアウトしていたコードを、自前で frame を計算するようにした

## 結果

- 変更前は 1.0038 秒かかっていた処理が 0.1084 秒で済むようになった
    - `super.loadView()` 直後から `super.viewDidLayoutSubviews()` 直後までの時間を計測
    - 交互に5回実行したそれぞれの平均値
    - 計測環境は iPhone 12 Pro Max
        - (もともと iPhone 11 Pro で検証していたので「あれ？AutoLayout でも割と早いな？」ってなったのは内緒)

- AutoLayout のソルバーは優秀で、ちょっと変更が入ったときの差分更新とかは強いけど結局初回は最適化問題を解いているので、静的に決定できちゃう場合はまぁそうなるよね、という感想

## 変更前後でのヒエラルキーの比較

- before
    - ![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12653/deac2396-37f7-b4e0-82be-d6e30b09d26f.png)

- after
    - ![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12653/0d0b2a2c-77f5-9ca3-d95b-83580dcd710a.png)

- UIScrollView から最下層まで最大 7 段ネストしていたものが、全て UIScrollView の直下にフラットに配置されるようになった

## そもそも

- そもそも、これぐらいの contentSize の UIScrollView を作るのであれば UICollectionView を使うのが正解な気はする
    - ~~とはいえ、こういうレイアウトちゃんとやろうとすると面倒くさい~~
    - 20年分ぐらいのデータを表示しようと思ったら対応しないといけなくなるかも (でもスペックの進化の方が早いかも :smile:)

## 検証コード

https://github.com/funnything/LayoutPerformanceDemo

## 宣伝

この記事で取り上げた変更内容を取り入れたアプリを App Store に公開しています。
毎日笑顔を作ることで、より自然でより魅力的な笑顔を作るトレーニングを習慣にできるアプリです。
コロナ禍でテンションが下がりがちな昨今、少しでも気持ちを上げる一助になれば幸いです。
よろしければお使いください〜
<a href="https://apps.apple.com/us/app/smilestreaks/id1474219916?itsct=apps_box&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-US?size=250x83&amp;releaseDate=1565136000&h=81b5a2e8870cd9396ac53ee22fc5ac32" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;"></a>

## next

明日は @yum_fishing さんの記事です。
[小ネタ]僕私がbladeからcomponentにデータ送信する時つまづいたこと[laravel+vue]

どうも。
初心者サーバーサイドプログラマーのまいけるです。

最近、業務でサーバーはlaravel、フロントはvueといったアプリを制作した際に自分がちょっとつまづいた点を備忘録的に書いていきたいと思います。

## ①オブジェクトで値が渡らない！！！！！

```
<foo-component
foo-object="{{ json($foo_object }}"
></foo-component>
```
最初は、こんな感じでcomponent側に値を渡していたのですが...



v-forで回せない！！！！！！！
なぜ...


ということでchromeのvue拡張機能でfoo-objectの中身を見てみると。

Stringで渡ってるやん!!!

どうやらv-bindしないとオブジェクトに渡らないそうです。
ということで最終的には

```
<foo-component
:foo-object="{{ json($foo_object }}"
></foo-component>
```

こんな感じに収まりました。


## ②sessionとrouteをうまく渡せない！！！！
v-bindで渡せば良い、ということを知った自分は、名前付きのrouteやsessionなども以下のような感じで書くことにしました。

```
<foo-component
:route="{{ route('app.index') }}"
:session="{{ session('foo') }}"
></foo-component>
```
すると・・・。


エラー出ちゃってるけど。

routeやsessionについては、以下みたいに書かなきゃいけないみたいです。


## ③intで渡らない!!!!!

```
<foo-component
id="{{ session('id') }}"
></foo-component>
```

さて、sessionはv-bindせず（？）に渡さなきゃいけないということで上記のようにコードを書いたのですが今度は全然intで渡らなくなってしまいました。

なぜだ...となっていたのですが、objectを渡していた時のことを思い出して拡張機能でidの中身を見てみると

Stringでした。

ということで以下みたいにv-bindで渡すことでintはintのまま、objectはobjectのまま渡せるみたいですね。
ちなみに、sessionでオブジェクトとか配列を渡す時は、

```
<foo-component
foo-object="{{ json_encode(session('foo_object') ?? '') }}"
></foo-component>
```
みたいに書けばいいそうです。
※②番目もjson_encodeすれば多分v-bindで書けると思うのですが、routeについてはstringで渡せば問題ないので②番目の書き方を採用しました。


他にもちょこちょことつまづいたのですが今回はblade中心ということで。
まあ、ちゃんとドキュメントを読みましょう、という感じですね。
Azureを触ったことない開発者向けの参考サイト紹介

# どうして書こうと思ったのか

個人では使っていたものの、業務でもAzureを使わないといけなくなり
Azureってなんぞやっていう触ったことない人に超ざっくり概要と学習をする際の参考サイトなど乗せていこうと思います
内容的には[Microsoft Learn] (https://www.microsoft.com/ja-jp/)の紹介です



# Azureってなーに？
 - マイクロソフト社が作ったクラウドサービス
 - DB作ったりサーバー建てたりもすぐできる

とりあえずは、**いろいろできる！すげー！！**ぐらいに思ってもらってOKです

# Azure使うと何がいいの？
 - サーバー構築までの時間を短縮できる
 - インフラ管理に割く時間を削減できる
 - サーバーの増強などが容易
 - 比較的Officeとの連携しやすい

ここらへんはAzureに限らずパブリッククラウドだとありがちですが、
最後の点はAzureならではなのかなと思います。さすがマイクロソフト


# すごいのはわかったからどうやってAzureを知っていけばいいの？

個人的には学習サイトのMicrosoft Learnがおすすめです
本を買うよりは自分で手を動かしたほうがいいのと、わかりやすくまとめられているのでまずはこれでよいと思います。
 [Microsoft Learn] (https://docs.microsoft.com/ja-jp/learn/)

コンテンツはラーニング パスとモジュールに分かれており
製品についてピンポイントに知りたいならモジュールを、
機能概要など関連する内容を含め知りたいならラーニングパスを受講するといいでしょう

ログインなしでもページの閲覧はできるようですが、マイクロソフトアカウントでログインすると学習状況を記録してくれるのでお勧めです
モジュールなど修了すると経験値的なポイントもつくので少しうれしいです。

とっかかりになるLeanモジュールのリンクを記載しておこうと思います。

## とりあえずざっくり知りたい人向け

急ぎ触れるようになるためにはAzureの基礎と、これから操作するコンポーネントのコースを見てみるのがよいと思います

 - [Azure の基礎の概要](<https://docs.microsoft.com/ja-jp/learn/modules/intro-to-azure-fundamentals/)
 - [Azure アーキテクチャのコア コンポーネントを説明する] (https://docs.microsoft.com/ja-jp/learn/modules/azure-architecture-fundamentals/)

最低限上記をみてから必要な技術説明をLearnサイト内で探せばいいと思います。

例えばサーバーレスアプリケーションだったら

  - [サーバーレス アプリケーションの作成 (ラーニングパス)] (https://docs.microsoft.com/ja-jp/learn/paths/create-serverless-applications/)
  - [Azure Functions を使用したサーバーレス ロジックの作成 (モジュール)] (https://docs.microsoft.com/ja-jp/learn/modules/create-serverless-logic-with-azure-functions/)

などを受講するといいでしょう

なお、[くらでべ] (https://www.youtube.com/channel/UCMmRHq3E_9Hc9noZeo3zDCw)などのyoutubeでも解説動画もあるのでそこから入るのもありですが
ただしアカウント作成などAzureを使うのは業務だけって人向けではないのでご注意ください


## じっくり知識を深めたい人向け
こつこつmicrosoft Learnのラーニングパスをやっていってください！
以下のラーニングパスの内容をパート１から６まで一通りやるだけでもだいぶ違うと思います

[Azure の基礎 第 1 部:Azure の主要概念に関する説明] (https://docs.microsoft.com/ja-jp/learn/paths/az-900-describe-cloud-concepts/)

<hr>
初投稿かつ、ざっくりではありますが、Azureを知るきっかけになれば幸いです
Let's Enjoy Develop!
Swift Package Manager対応ではまったところ

# はじめに
- iOSアプリ開発でSwift Package Manager扱うことが増えてきました。今後、既存のライブラリをSwift Package Managerに対応させることが増えてくると思います。ライブラリを対応させるなかでのハマりどころについてまとめました

# 環境
```
Xcode 12.2
Build version 12B45b
Apple Swift version 5.3.1 (swiftlang-1200.0.41 clang-1200.0.32.8)
```


# OSの分岐
- Swift Package ManagerはiOS以外のOSをサポートしているのでOSによってはサポートしていないフレームワークもあるので分岐が必須です

```swift
#if os(iOS)
import UIKit

class HogeView: UIView {

}

#endif
```
- [Package Manager Conditional Target Dependencies](https://github.com/apple/swift-evolution/blob/master/proposals/0273-swiftpm-conditional-target-dependencies.md)
    - ためしたことないですがこの機能を使えば、分岐を減らせそうだと思いました

# Bundleの呼び出し
- Swift 5.3から画像やxibなどのリソースファイルがサポートされるようになりました。
- サポート伴い、Swift Package ManagerでのBundleの呼び出し方が変わりました。画像やXibなどの呼び出しでは分岐が必要になります。[SwiftGen](https://github.com/SwiftGen/SwiftGen/pull/763)でも対応のため、変更が入ってました。

```swift
#if SWIFT_PACKAGE && swift(>=5.3)
   let bundle = Bundle.module
#else
   let bundle = Bundle(for: Hoge.self)
#endif
```

# 参考リンク
- https://github.com/apple/swift-evolution/blob/master/proposals/0271-package-manager-resources.md
- https://developer.apple.com/documentation/swift_packages/bundling_resources_with_a_swift_package
- https://github.com/SwiftGen/SwiftGen/pull/763
- https://qiita.com/chocoyama/items/f9721400cdb1a634be7d
論理ページごとに行番号をリセットしないnlコマンドのpオプション


nlコマンドはpオプションを指定することで、行番号を論理ページにかかわらず通し番号にすることができます。

# pオプションの使い方
オプションに追加の引数はありません。特筆することもありませんが、マニュアルを参照してみましょう。

## info nl (GNU coreutils)
```console
‘-p’
‘--no-renumber’
     Do not reset the line number at the start of a logical page.
```

## man nl (BSD)
```console
     -p           Specify that line numbering should not be restarted at logical
                  page delimiters.
```

## POSIX
> -p
Specify that numbering should not be restarted at logical page delimiters.

# pオプションを試す

試してみましょう。

```console:coreutils
$ echo -e 'a\n\:\:\nb'
a
\:\:
b
$ echo -e 'a\n\:\:\nb' | nl
     1	a

     1	b
$ echo -e 'a\n\:\:\nb' | nl -p
     1	a

     2	b
```

```console:BSD
$ echo -e 'a\n\:\:\nb' | nl
     1	a
     1	b
$ echo -e 'a\n\:\:\nb' | nl -p
     1	a
     2	b
```

特に入力データが制御可能なケースでは、`-p`を利用する機会はほぼないでしょう。ボディに限った話であれば、以下のように区切り文字列を削除してしまうのと同じです。（厳密には[coreutilsの`nl`において空行に置き換わる](https://qiita.com/Carol_815/items/d1f52df36b0d39b374b0#coreutils%E3%81%AEnl%E3%81%A7%E5%8C%BA%E5%88%87%E3%82%8A%E6%96%87%E5%AD%97%E5%88%97%E3%81%8B%E3%82%89%E5%A4%89%E6%8F%9B%E3%81%95%E3%82%8C%E3%82%8B%E7%A9%BA%E8%A1%8C)かどうかの違いはありますが）

```console:coreutils
$ echo -e 'a\n\:\:\nb' | sed 's/\\:\\://' |  nl
     1	a
       
     2	b
```

```console:BSD
$ echo -e 'a\n\:\:\nb' | sed '/\\:\\:/d' | nl 
     1	a
     2	b
```

# 古いcoreutilsの`nl`(~v8.25)について

意外なことにcoreutilsの`nl`は初版から比較的最近まで正しく動作していませんでした。デフォルトの動作に問題があり常に`-p`が有効になった状態で、論理ページごとに行番号がリセットされることはありませんでした。これは2016年11月にリリースされたv8.26で修正されています。

```console:coreutils~v8.25
$ echo -e 'a\n\:\:\nb' | nl
     1  a

     2  b
$ echo -e 'a\n\:\:\nb' | nl -p
     1  a

     2  b
```

サポートが継続されている主要なディストリビューションでも、RHEL 7がv8.22、Ubuntu 16.04LTSがv8.25の古いバージョンを採用しています。これらの環境の`nl`では論理ページを含むデータから正しい行番号を得ることはできないので注意が必要です。
[以前の記事](https://qiita.com/Carol_815/items/d1f52df36b0d39b374b0#%E7%95%AA%E5%8F%B7%E3%81%AE%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88)で当たり前にリセットできるかのように書きましたが、お手元の環境でうまくいかない場合の原因はおそらくこの不具合によるものです。

---
【備忘】MySQLとNGINXを使ってるときの設定ファイル名の拡張子

きっかけはただの初歩的なミスでした。
## 結論
MySQLの設定ファイルは `default.cnf`や `my.cnf`
nginxの設定のファイルは `default.conf`

この拡張子の違いのおかげで1日溶かしました。

## こんな状況で起こった

docker-compose環境で、「node+mysql」のコンテナと「node+vue-cli」のコンテナのリバプロをnginxのコンテナを利用して実装したかった。
　その際、nginxの設定ファイル default.conf をMySQLの設定ファイル default.cnf と混同してどっちも default.**cnf** にしたためにnginxに設定が反映されず、「あれれー？おっかしいなー？？」を20時間くらいしてた。
Graphite vs. Splunk 〜監視ツールを比較してみた〜

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/3bc88a50-53df-335e-d04d-24d75134942a.png)

#Graphiteとは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/dfccfae0-7f71-845c-4229-8fedafa2d850.png)

Graphiteは、2008年に最初にリリースされたオープンソースの時系列監視ソフトウェアです。プッシュベースの監視ソフトウェアです。つまり、すでに表現されている情報を取得してメトリクスを収集し、それを記録して視覚化します。 Graphiteは通常、StatsDまたはcollectdと連携して、インフラストラクチャから時系列メトリックを取得します。 次に、メトリックは集約され、GraphiteのデータベースであるWhisperに保存されます。 Graphiteは、企業にデータの監視、保存、視覚化、および特定のイベントに関するアラートを提供します。 セットアップやメインテナンスが不要なGraphiteは、パッケージに含まれているGrafanaとともに[MetricFire](https://www.metricfire.com/japan/?utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=Graphite%20vs.%20Splunk)から入手することができます。

[無料トライアル](https://www.hostedgraphite.com/signup?utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=Graphite%20vs.%20Splunk)を入手して、MetricFireの使用をすぐに開始してみてください。 HostedGraphiteがあなたにぴったりかどうかを確認できます。 ご不明な点がございましたら、いつでも[デモを予約](https://www.metricfire.com/demo-japan/?utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=Graphite%20vs.%20Splunk)して直接お問い合わせください。

#Splunkとは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614998/8b4f2672-6985-ed99-10d8-42505d193bb8.png)

Splunkは、IoT、セキュリティ、IT、およびビジネス分析を専門とする有料のデータ監視および視覚化サービスです。 Splunkは主にログを処理しますが、ログをメトリックに変更する際にも役立ちます。 データストレージもサポートし、オンプレミスセットアップとクラウドセットアップの両方を備えています。 Splunkの最大の強みの1つは、リアルタイムの可視化です。 最も一般的な入力データ形式は.csvとjsonですが、どの形式でも使用でき、あらゆる種類のデータ生成からデータ入力ソースを作成できます。 また、Splunkは顧客サポートも提供しています。

#MetricFireのHosted graphiteの使用が適している時は？
次の場合はHosted Graphiteを使用してみてください。

- インフラストラクチャの時系列監視が必要である
- 複数の異なるソースからのデータを視覚化する必要がある
- 重要なイベントについて警告する必要がある
- インフラストラクチャが大きすぎて自分で実行できないため、マネージドサービスが必要である


#Splunkの使用が適している時は？
次の場合はSplunkを使用してみてください。

- ホストされたデータの収集、監視、視覚化、分析、およびストレージサービスをすべて1か所にしたい
- リアルタイムのデータを視覚化したい
- 重要な機械生成情報の保存データベースを作成したい
- 監視および視覚化できる検索可能なデータベースを作成したい

#価格の比較‍

- Gaphiteはオープンソースであり、無料です。
- MetricFireのHosted Prometheus、Hosted Graphite ＆ Grafanaを含む、ビジネス対応のGraphiteは、月額99米ドルから始まります。
- Splunk Enterpriseは月額225米ドルです。
- Splunk Freeは1人のユーザーが利用でき、1か月あたり最大500 MBのデータを利用できます。
- Splunkには、ボリュームベースの価格と、他の価格で購入できるさまざまな特定の製品もあります。

#重要なポイント

- Graphiteは、あらゆる種類の時系列データを監視、保存、警告、および視覚化できます。
- Graphiteはオープンソースであり、無料です。
- Splunkは、データ管理に関連するすべてのワンストップショップであり、幅広い分野（IoT、IT、セキュリティ、ビジネス指標）で使用できます。
- Splunkは、無料で使用できない独自のサービスです。

Hosted Graphiteについて詳しく知り、[MetricFire](https://www.metricfire.com/japan/?utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=Graphite%20vs.%20Splunk)が監視環境にどのように適合するかを確認してください。 [無料トライアル](https://www.hostedgraphite.com/signup?utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=Graphite%20vs.%20Splunk)を入手して、今すぐGraphiteの使用を開始してください。 [デモを予約](https://www.metricfire.com/demo-japan/?utm_source=blog&utm_medium=Qiita&utm_campaign=Japan&utm_content=Graphite%20vs.%20Splunk)して、HostedGraphiteで何ができるかを確認してください。
IoTの時系列データに対して現場レベルで簡単に試すことができるノイズフィルタ、完全に理解した

# はじめに
この記事は[完全に理解したTalk Advent Calendar 2020](https://qiita.com/advent-calendar/2020/easyeasy "完全に理解したTalk Advent Calendar 2020")の9日目の記事です。
9日目の欄が空いたままになっていたので、遅ればせながらではありますが、ささやかな記事を1つ上げたいと思います。

今回の記事は過去に2つ上げていた遺伝的アルゴリズムとは一風変わり、信号処理のお話です。

皆さんはIoTやっていますか？私は別にやってないです。~~IoTと言いたかっただけです。~~
完全に想像ではありますが、IoTの用途の中には「なにかの数値をセンサーで計測し、その計測値を用いで何らかの判断を行い、処理を実行する」ということが行われることもあるのではないかと思います。

そういった場合、下図のように、計測系のどこかにノイズが入り込んで重畳されてしまうことがあるのではないでしょうか？
![chart.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/d4cc3e29-acca-6b3d-f687-09bb0dfaccff.png)

こういった場合、可能な限りノイズを除去して、オリジナルの信号波形に近いデータを得たいはずです。
信号処理って色んなやり方があって、ケースバイケースでノイズ除去を行うことになると思うのですが、今回はそういった場合に「とりあえず使ってみる」という用途に向いているフィルタを紹介したいと思います。

# 定義
```ruby:RC&#x20;Filter
Y[i] = alpha * Y[i-1] + (1-alpha) * X[i]

X:センサの測定値
Y:フィルタの出力値
alpha:調整パラメータ[0 <= aplha <= 1]
ただしY[0] = X[0]とする
```
超簡単ですね。
要するに今回の計測値と前回のフィルタ処理後の数値を重み付けして足し合わせることで平準化を行っています。
**alpha**は調整パラメータで1に近づけば近づくほどフィルタの効果が強くなります。

# 動作イメージ
例えばこんな感じに、青い波形から赤い波形を抽出することが出来ます。
![chart (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/680e6484-72cf-a437-4801-98b213b4b09f.png)

ちなみにこのとき**alpha = 0.85**です。
自分はだいたい0.75～0.95くらいの間で使うことが多いです。

alphaを変化させたときのイメージは下記のとおりです(ノイズ波形をRAND関数で生成しているので毎回波形が違う点はご勘弁を)。

**alpha = 0.25**のとき
![chart (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/16ca4b43-0209-6d35-e791-51c46a419423.png)

**alpha = 0.50**のとき
![chart (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/9a78bfff-c301-56f6-05ff-7f899cd0295d.png)

**alpha = 0.75**のとき
![chart (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/aaf93c61-76cd-b328-2f1c-49c60a60ac06.png)

今回のケースでも、alphaは0.75以上に設定するのが良さそうです。
この辺りは実際にフィルタを掛けるときに試行錯誤することになるかな、と思います。
留意したい点は、なるべくalphaは小さい方が良い、ということです。理由はデメリットの項で紹介します。

# メリット
今回紹介するフィルタのメリットは以下の通りかなと思います。

- 専門的知識が要らない
- Excelなどの表計算ツールで簡単に適用できる
- 調整パラメータが1つだけで調整しやすい

# デメリット
逆にデメリットは以下の2点かなと思います。

- alphaを強くすると信号波形の位相が遅れる
- alphaを強くすると信号波形のゲインが小さくなる

実は今回最初に提示した信号波形は、正弦波にランダムなノイズを足し合わせて人工的に作ったものです(黄色 = 青色 + 赤色)。
![chart (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/839eb28e-caee-6d9b-3d4a-0482d2ab0a1a.png)
では、このオリジナルの正弦波と、フィルター適用後の波形を重ねるとどうなるでしょうか？

以下は**alpha = 0.85**のときの比較です。
信号のゲイン(振幅の大きさ)が若干ですが弱まっていることがわかります。また、信号の波形が若干右にずれている(位相が遅れている)ことがわかります。
![chart (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/e93ab2f8-f1fa-c862-6f20-8c49257a298f.png)

さらに**alpha = 0.95**のときを見てみましょう。ゲインが半分以下になって、位相もかなり遅れています。
![chart (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/71b689aa-0efc-8099-0b97-e1d8b373eaad.png)

最後に**alpha = 0.99**のときです。波形は滑らかですが、話になりませんね。
![chart (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272003/ed86196e-2708-c106-65a2-685397ce0b5a.png)

ゲインの方はあとから補正はできなくもないですが、位相のほうが致命的です。
例えばこの測定値をPID制御のコントローラに入力してフィードバック制御を行う場合など、制御系の位相がトータルで90deg遅れると制御系が不安定になり発散するリスクがあります。
自動制御に使う場合は注意が必要です。
Next.js 素振り会場を作る

素振りっていい表現だなと思って使っているけどあんまり周りで聞かない気がする。

## 以下五行でなんとか

```
$ npm init -y
$ npm install next react react-dom
$ mkdir src/pages/
$ echo 'export default () => <h1>hello</h1>' > src/pages/index.jsx
$ npx next dev
```

React 17 の新しいJSXトランスフォーマーのおかげで `import React from 'react'` がなくてもいけるようになっている。便利。

## Fast Refresh が発生したときローカルステートを保護するために

名前をつけよと。

```
Anonymous arrow functions cause Fast Refresh to not preserve local component state.
Please add a name to your function, for example:

Before
export default () => <div />;

After
const Named = () => <div />;
export default Named;
```

next.js の開発サーバのHMRちょっと状態の保全の癖があるなと思っていたけど、こういうのあるのか。気をつけてみよう。

Fast Refresh は [こういうものらしい](https://nextjs.org/blog/next-9-4#fast-refresh)。9.4から入った。コンポーネントの状態を維持したままコードの変更をリロードできる。
reflectパッケージ（メモ）

# Reflection in golang

### Reflection とは
プログラムの実行過程でプログラム自身の構造を読み取ったり書き換えたりする技術

### いつ使うのか
Ruby,PHP,Pythonは、型を明示する必要がなく、行が実行されるまでデータの型の不整合は検知されない。一方で、Goは型を宣言しないとコンパイルさえできない言語。それゆえ、どの型のデータを扱っているか常に分かっている状態でコードを書く必要がある。しかしながら、その期待に添えない場面がある。それは、ユーザーが入力した値やファイルなどから読み込んだ値に対して動的に(自動的に)型を判断し、処理を変える必要がある時。この時、golangではreflectパッケージを使う。

### reflectパッケージを使わない場合
型アサーションで任意の型interface{}に対して、switch文で型の種類に応じた処理を書くことはできるものの、全ての考えられる型に対して処理を書くのはコードが冗長になってしまう。(mapの場合、キーの型とvalueの型の両方で完全な型となるため、その場合分けを書く必要が合ったりする)
→reflectパッケージを使うとコンパイル時に型情報がわからなくとも汎用的なコードを書くことができる

下記URLは、reflectパッケージを使ってタグの値をとるサンプルコード
https://play.golang.org/p/75qMuqXRge2
【ネットワーク基礎】ネットワーク学習前の心構え

# 便利な時代ではあるが...
ネットワークに関する広大な知識や深い理解が無くとも、マニュアル通りに実施すれば、容易にネットワークを利活用できる時代になりました。個人で利用する(自宅にWi-Fiを設置するなど)場合には、それで十分かもしれませんが、仕事で携わる場合には、中で何が起こっているのかを理解していなければ、障害が発生した時などに対応できなくなってしまいます。

# 障害の原因を究明しなければならない立場にあると考えて
ネットワークは複雑で、全てを理解する事は非常に困難なシステムです。それと同時に、標準化やパッケージ化されている側面も多く、ユーザーが容易に使用する事も可能です。このシステムの仕組みと、ユーザーの理解の間で、乖離が大きすぎると、障害が発生した際に対応が出来なくなってしまいます。学習時には、「もしこの部分で何か障害が起こった際に、解決できるかのか？」と自問しながら学習を進めてください。

# 「どこで(Where)」「何を(What)」「いつ(When)「誰が(Who)」」行っているのか、そして「何故(Why)」それが必要なのかを意識する
ネットワークに関して学習を進めていくと、様々な「用語」や「仕組み」、「概念」や「推移の歴史」に触れることになります。覚えること、理解する事が多く、混乱しそうになると思いますが、１つ１つに対して、「どこで」「何を」「いつ」「誰が」「なぜ」を意識してみて下さい。分からないものが出てきた際は、この5つを整理し、5つの中で、何が不明確なのか、どれの理解が出来ていないのかを把握し、その穴を埋めていけば確実に前に進めると思います。

# どうしても分からなければ据え置き
学習の中で、いくら調べても理解出来ない仕組みや概念が出てくると思います。そういった時は、思いきって飛ばしてあげましょう。1番重要な事は学習を継続する事です。思わぬ所で点と点が繋がり、分からなかった箇所の理解ができる事もあります。その場で分からなくとも、「学習を続けていればいつか理解できるようになる」くらいに割り切って、前に進んでいきましょう。
[Vue3]そんなに怖くなかったよ Composition API

こんにちわ。[Diverse](https://diverse-inc.com)でフロントエンドしているNakazです。

さて、[Vue3](https://v3.vuejs.org/) が正式リリースしたので、今回最大の目玉であり関門の[Composition APi](https://v3.vuejs.org/guide/composition-api-introduction.html)を少し触ってみてました。
触ってみると、思ったよりは難しくないのかな（まだほんの触り程度なので）っていう印象だったので、初歩の初歩的な違いを書けたらなと思います。

### 作るもの
ボタンを押したら数字が増えるというシンプルなアプリです

### HTML部
```
<div id="app">
  <div>{{count}}</div>
  <br>
  <span @click="onCount">count up!</span>
</div>
```
こちらは共通のコードを使っています。

### 従来のコード
```
Vue.createApp({
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    onCount() {
      this.count++
    }
  }
}).mount("#app")
```
はい、よく見慣れたコードです。
もう見ただけで動き出しそうです。

### Composition APIのコード
```
Vue.createApp({
  setup() {
    const count = Vue.ref(0)
    const onCount = () => {
      count.value++
    }
    return {
      count,
      onCount
    }
  }
}).mount('#app2')
```
見慣れなさすぎて戸惑いしか感じませんね。

### 大まかな違い
もはや全部違う感じではあるのですが
- 基本的な処理は`setup`の中に書く
- リアクティブに変更していく変数は`ref()`の中に書く
- そもそも `data`や`methods`が無い。`this`だって無い。
- `return`の中に書き出して動かす

### まとめ
どうでしたか？見慣れないは見慣れないですが、ちょっと書いてると不思議と理解度が上がってくると思います。
書くモチベーションがあったら、次は`computed`と`reactive()`の話でも書けたらと思います。

### 備考
- Vue3のCDNから書いたコードなので、`Vue.ref()`となっていますが、ビルド環境であれば`ref()`になります。
- そもそも `Vue.createApp().mount()`に変わった点は今回説明から省きました。