のでメモる

再帰的に正規表現で抜き出して詰めたい場合があるとする。



```js
function regexpr(re, text, acc = []) {
  const res = re.exec(text)
  return res
    ? regexpr(
        re,
        text.substr(res.index + res[0].length, text.length),
        acc.concat(res)
      )
    : acc
}
```

このとき chrome さんだと、 g オプションつけた時で結果が異なる。

```js
regexpr(/hello|world/, 'hello world') // => ["hello", "world"]
regexpr(/hello|world/g, 'hello world') // => ["hello"]
regexpr(/hello|world/, 'hello world hello world') // => ["hello", "world", "hello", "world"]
regexpr(/hello|world/g, 'hello world hello world') // => ["hello", "hello"]
```

index や結果は変わらないのに、なんでだろう

のでメモる

再帰的に正規表現で抜き出して詰めたい場合があるとする。



```js
function regexpr(re, text, acc = []) {
  con

JSの正規表現の再帰にはまった


いつバージョン 3 になったんだ、、あとで差分チェックする


docker compose 3


## 作ったもの

https://github.com/mijime/markdown-editor

ダウンロードすればオフラインでも使えるマークダウンエディタを作りたかった

---

## 使ってよかったもの

## Rehype, Remark

- https://github.com/wooorm/rehype
- https://github.com/wooorm/remark

HTML や Markdown を AST に変換してくれる。

Marked が String を既にがっちゃんこ状態で投げてくるので
dangerouslySetInnerHTML を使わざるえない影響が出てくる。

そういうときは上の Rehype, Remark で AST に変換してから React コンポーネントにするアプローチが良さげ。

react-markdown ていうのもあったけど commonmark に準拠してるらしく、テーブルの変換ができなかったので諦めた。
あと commonmark が割と容量食ってたのもある。

remark-react を使わなかったのは highlight 系のライブラリをかます必要があったのと
`markdown -> html -> react` の流れのほうが拡張しやすく感じた。
絵文字対応もさくっといけたし。

なんかやるとき、もしくはデンジャラスなコードを強要されたときはまた使ってみたい。

ただ、 marked の方が軽量ではあったので、1 回きりの表示なら marked のほうが断然良さそう。

## Prism.js

- http://prismjs.com/

highlight.js を Minify すると中身が飛びでて辛いときに使ったやつ。

プロセッサも分かれてるのでそのまま rehype に流せた。

プラッガブルでなかなかに軽量なので、おすすめしていきたい。

## Preact

- https://preactjs.com/

React がでかすぎたので使って見た。

webpack-bundle-size-anlyzer をつかってサイズを比較した。

ReactDOM + React が 500+kb なのに対し、 Preact + Preact-compat が 35kb 前後？良い。

React-Redux は普通に使えたので、 問題はなかった。 React-helmet とか React-router 周りはまだ試していない。
ただ、Preact-helmet や Preact-router とかあるし、なんだかんだでまた使えそう。

dio.js とかも同様も簡単に乗り換えられるか試したけど、 Preact-compat はだいぶ頑張っているのが分かっただけだった。

Jest や StyleGuidist なんかが React を強要するので、 Webpack でビルド時のみ差し替える運用にした。

## milligram

- https://milligram.github.io/

マークダウンプレビューとしては綺麗に表示できるので、
みんな Github.css から乗り換えるべきだと思う。軽量ですし。

ただ、シンプルなコンポーネントしかないので
UI が複雑になってきたなら Material なんちゃら系の方が良さそう、とは思う

---

## 見送ったもの

## highlight.js

みんな言語絞って使ってるくさい。最初、何度圧縮してもクソでかくて不思議だった。
言語によっては圧縮時に飛び出る。 と思ったけど browserify 使った時は問題なさそう。. だった？

使うのやめた。

## CodeMirror

重量がなかなかあったので、採用を見送った。 vim mode 試したかった。

もっと軽量なエディタがあれば選択肢に入れたかったので、あとで探す。

---

## React.setState

React の setState は使わずに pure component だけで構成したかったので。

非同期に描画してコンポーネント内だけで完結するなら、 state を使って書いた方が切り出しやすかった。

## Flow

今回は頑張って Flowtype に立ち向かってみた。 Flow-jsdoc で JSDoc と同期をとりつつ、みたいなことを実現したかったが、
type 周りが対応してなかったので結局 flow-comment をちりばめながら書くはめになった。

あと、flow さんって commonjs スタイル読み取ってくれないのが一番のショックだった。
その他にも、他のライブラリの \*.flow にビンビン反応していくのもちょいちょい辛い。



## 作ったもの

https://github.com/mijime/markdown-editor

ダウンロードすればオフラインでも使えるマークダウンエディタを作りたかった

---

## 

ReactでMarkdownEditorを作ったかんそう


## AWS Lambda を管理するツール Lamma やってみた

Ruby で書かれた lammba というリポジトリが上がったので
ruby 勉強会に参加がてら触ってみた

### [lamma](https://github.com/ayemos/Lamma)

### 作業リポジトリ

[source](https://github.com/mijime/mijime.github.io/tree/content/source/study/kanazawa.rb/2016-06-18)

### 作業雑感

シンプルな Lambda 管理ツール

#### Pros

- 1 dir, 1 func なのでわかりやすいね
- 勝手に zip してくれるね
- Ruby なので今後拡張しやすい、のかな？

#### Cons

- nodejs, python2.7 のみ対応
- 消したりするのめんどくさそう ... まぁ関数だけだからいいんだけども ...
- node_modules 入ってない？

### 作業ログ

まずは環境作成

```ruby
source "https://rubygems.org"

gem "lamma"
```

```
FROM ruby

COPY Gemfile /var/app/Gemfile
WORKDIR /var/app
RUN bundle install
```

```
---
version: '2'
services:
  app:
    build: .
    command: sleep 3600
    environment:
      AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
      AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
    volumes:
      - ./scripts:/var/app/scripts
```

とりあえずインストールして実行してみる

AWS 関連の情報を渡して ...

```
eval $(cat ~/.aws/credentials | awk -v FS=" = " '$1~/^aws/{print "export",toupper($1)"="$2}')
```

関数を作成してみる

```
lamma create scripts/my-function-1 --runtime python2.7

Creating function at directory ./scripts/my-function-1.
bundler: failed to load command: lamma (/usr/local/bundle/bin/lamma)
NoMethodError: undefined method `match' for nil:NilClass
Did you mean?  catch
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:67:in `block in partition_matching_region'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:66:in `each'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:66:in `find'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/endpoint_provider.rb:66:in `partition_matching_region'
...
```

うーん ... なぜに nil ...

AWS_REGION を渡す

```diff
diff --git a/source/study/kanazawa.rb/2016-06-18/docker-compose.yml b/source/study/kanazawa.rb/2016-06-18/docker-compose.yml
index e03b010..2784d3c 100644
--- a/source/study/kanazawa.rb/2016-06-18/docker-compose.yml
+++ b/source/study/kanazawa.rb/2016-06-18/docker-compose.yml
@@ -7,5 +7,6 @@ services:
     environment:
       AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
       AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+      AWS_REGION: ap-northeast-1
     volumes:
       - ./scripts:/var/app/scripts
```

```
$ lamma create my-function --runtime python2.7

Creating function at directory ./my-function.
Done.
```

```
$ tree .

my-function
  ├── lambda_function.py
  └── lamma.conf

1 directory, 2 files
```

まだこの時点で関数は作られていないみたい ... なんで AWS 認証求められたんだ

deploy してみる。

```
$ lamma deploy test

Loading configuration.
Done.
bundler: failed to load command: lamma (/usr/local/bundle/bin/lamma)
Aws::Lambda::Errors::BadRequest:
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/seahorse/client/plugins/raise_response_errors.rb:15:in `call'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/aws-sdk-core/plugins/param_converter.rb:20:in `call'
/usr/local/bundle/gems/aws-sdk-core-2.3.14/lib/seahorse/client/plugins/response_target.rb:21:in `call'
```

うーん ... ?

よくわからないので JS で作り直す

```
$ lamma create my-function-js --runtime nodejs

Creating function at directory ./my-function-js.
Done.
```

```
$ lamma deploy test

Loading configuration.
Done.
Function 'my-function-js' doesn't seem to be exists.
Do you want to create new function 'my-function-js' ? (y/n) y
Creating function 'my-function-js' ...
bundler: failed to load command: lamma (/usr/local/bundle/bin/lamma)
Errno::ENOENT: No such file or directory @ rb_sysopen - /tmp/d20160618-92-1fppw7/lambda.zip
  /usr/local/bundle/gems/lamma-0.1.1/lib/lamma/function.rb:57:in `initialize'
...
```

zip ...

```diff
diff --git a/source/study/kanazawa.rb/2016-06-18/Dockerfile b/source/study/kanazawa.rb/2016-06-18/Dockerfile
index f9e4aff..0595f36 100644
--- a/source/study/kanazawa.rb/2016-06-18/Dockerfile
+++ b/source/study/kanazawa.rb/2016-06-18/Dockerfile
@@ -3,3 +3,4 @@ FROM ruby
COPY Gemfile /var/app/Gemfile
WORKDIR /var/app
RUN bundle install
+RUN apt-get update && apt-get install -y zip
```

```
$ lamma deploy test

Loading configuration.
Done.
Function 'my-function-js' doesn't seem to be exists.
Do you want to create new function 'my-function-js' ? (y/n) y
Creating function 'my-function-js' ...
adding: lamma.conf (deflated 17%)
adding: index.js (deflated 45%)
ArgumentError occured. You might need to specify role arn you want to pass to your function via 'lamma.conf' file or ENV['AWS_LAMBDA_IAM_ROLE'].
Done.
```

ほむほむ ... あんましロールを書きたくないので env で

```
export AWS_LAMBDA_IAM_ROLE=arn:aws:iam::000000000000:role/lambda_basic_execution
```

```
$ lamma deploy test

Loading configuration.
Done.
Function 'my-function-js' doesn't seem to be exists.
Do you want to create new function 'my-function-js' ? (y/n) y
Creating function 'my-function-js' ...
adding: lamma.conf (deflated 17%)
adding: index.js (deflated 45%)
Done.
Setting aliases.
Done.
```

```
$ lamma list-functions

my-function-js
```

できた。

## LT 感想

### シェルチェックを使おう

- 文法がバラバラなので統一する
- 各環境でパッケージとして提供されている

確かにシェルは動かすの簡単だけど、 他の環境で動かないことが多い ...

### shUnit2 を使おう

- 対応シェルも幅広い
- ダウンロードするだけで使える！

bats 派だけど、 msys でも早いなら乗り換えたいかも

### Dokku

- Heroku like
- 前面に nginx があって、 コンテナにルーティング
- heroku の build packs も利用できるので良い！
- 運用メンテナンスが気になるところ

スケーリングしないとかで敬遠してたけども、 開発環境で利用するなら楽だよなぁ

だいぶバージョンアップされているとのことなので、触ってみたい

もっと利用されるという話なので、その話を聞いてからかな？

dokku-alt との違いもあとで調べておこう ...

### AWSSummit

SIer が完全に淘汰されちゃう感じ

PaaS, SaaS の流行には全然触れてなかったので、 今回の話を機会に調べてみよう ...

### Iot

書き込むのに結構ツールが必要なんですね ...

IOT 超絶敷居高い。



## AWS Lambda を管理するツール Lamma やってみた

Ruby で書かれた lammba というリポジトリが上がったので
ruby 勉強会に参加がてら触ってみた

### [lam

 kanazawa.rb meetup 46に参加した


code.language-mermaid を変換するスクリプトを噛ませただけだけど。

```mermaid
  graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

```mermaid
  gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task: done,   des1,       2014-01-06, 2014-01-08
    Active task:    active, des2,       2014-01-09, 3d
    Future task:    des3,   after des2, 5d
    Future task2:   des4,   after des3, 5d
    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06, 24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
```

```mermaid
  sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
    John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!
```



code.language-mermaid を変換するスクリプトを噛ませただけだけど。

```mermaid
  graph TD;
    A-->B;
    A-->C;
    B-->D

My snippets

JSの正規表現の再帰にはまった

docker compose 3

ReactでMarkdownEditorを作ったかんそう

kanazawa.rb meetup 46に参加した

mermaidに対応した