kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

「学ぶ」とは何か?を理論的に知ることができた /「エンジニアの知的生産術」を読んだ

今年8月に出版された「エンジニアの知的生産術」を読んだ.今までも「どう効率的に仕事を進めるか」とか「どう意識高くアウトプットをし続けるか」とか「知的生産」に興味があって取り組んできたけど,本書の目次と索引を見たら,気になる用語がたくさんあった.

  • 第1ç«  : 新しいことを学ぶには
  • 第2ç«  : やる気を出すには
  • 第3ç«  : 記憶を鍛えるには
  • 第4ç«  : 効率的に読むには
  • 第5ç«  : 考えをまとめるには
  • 第6ç«  : アイデアを思い付くには
  • 第7ç«  : 何を学ぶかを決めるには

エンジニアの知的生産術 ──効率的に学び、整理し、アウトプットする (WEB+DB PRESS plusシリーズ)

エンジニアの知的生産術 ──効率的に学び、整理し、アウトプットする (WEB+DB PRESS plusシリーズ)

やる気

第2章では「やる気」がテーマになっていた.冒頭に「延べ12000人以上のやる気が出ない人に調査をした」と書かれていて,パワーワードすぎて笑ってしまった.紹介されているプラクティスは「GTD (Getting Things Done)」や「ポモドーロ」など,有名なものも多かったけど,他にも「タスクを1つに絞れているか」や「どのように優先順位を決めるか」や「不確定要素があるときに何を優先するか」など,考えさせられる内容になっていた.

個人的に「ポモドーロ」は5年以上続けていて,自己流の「ポモドーロ + 収穫逓減の法則」を実践している.また最近はタイムボックスを 25min → 45min に伸ばして検証をしている.

kakakakakku.hatenablog.com

また僕は「タスクが大きすぎる」と腰が重くなり「やる気」が出ないため「小さな習慣」を意識している.

kakakakakku.hatenablog.com

効率的に読む

第4章では「効率的に読む」がテーマになっていた.個人的に本を読むのが遅いことに悩んでいて,でも「速読」を解決策にしたくないとも考えていたので,第4章は本書の中で1番学びがあった.

  • 「読む」とは何?
  • 本を「読む」ことの目的は?
  • 「読む」種類は?
  • 「読む」速度は?

特に「読む速度のピラミッド」として「読む速度」を「8段階 : A / B / C / D / E / F / G / H」に分類されていたのは印象的だった.今まで「読む速度」を意識したことはなく,どんな難易度の本でも同じように読んでしまっていたことに気付いた.さらに「段階 A / B」は「読まない読み方」となり,本書の中で紹介されていた本「読んでいない本について堂々と語る方法」も気になる.

読んでいない本について堂々と語る方法 (ちくま学芸文庫)

読んでいない本について堂々と語る方法 (ちくま学芸文庫)

「読む速度のピラミッド」の手書き図は以下の記事にも載っている.

d.hatena.ne.jp

特に「段階 D / E」の「速い読み方」の中で Whole Mind System というプラクティスが紹介されていた.Whole Mind System では以下の段階がある(本来ある "5段階" を著者がさらに "8段階" に再構築した).

  1. 準備
  2. プレビュー
  3. フォトリーディング
  4. 質問を作る
  5. 熟成させる
  6. 答えを探す
  7. マインドマップを作る
  8. 高速リーディング

「3. フォトリーディング」は「目のフォーカスをぼかしてページ全体を眺める」読み方で,どちらかと言うと速読に近く感じるけど,例えば「見出しを中心に読む」など,自己流に粗く読むことはできそうだと気付けた.今までは1文字1文字読む癖があり,誤植をよく見つけることもあったけど,時間とトレードオフになっていた.さらに「読む速度を変えて2回読む」という発想もなく,次に本を読むのが楽しみになった.

そして「4. 質問を作る」は良かった.近い観点だと「人に教えられるように読む」や「読んだ後にブログを書く(言語化する)」も重要だと思う.質問を作ることを意識しながら読み直すと,自分自身の理解度も整理できるし,僕が担当しているトレーニングでも活用できるし,メリットが多くある.

f:id:kakku22:20181113122339p:plain

(参考 : 本書を読み終わった状態)

要約の素晴らしさ

本書は多くの参考文献(本だけでなく研究成果や歴史的な背景なども含む)に支えられている.そして,参考文献の重要なポイントが要約して説明されていたり,キレイに図解されていたり,理解しやすいように工夫されている点が素晴らしかった.点と点が繋がり,深く理解されているからこそ,ここまで構成できるんだと思う.今まで知らなかった用語を箇条書きにしておく.

最後に

本書は非常に理論的かつ学術的に構成されているので,スラスラと流し読みできるような本ではないと思う.また注釈も多く,全ページが充実して書かれている.今回読んで全てを理解できたとは言えないため,本書の冒頭に書かれている以下のメッセージの通り,また半年後に読み直そうと思う.

材料がそろっていないと、結合は起きません。「地」は経験です。本書を読んでしっくりこなかったなら、今回は残念ながら材料が足りなかったようです。でも大丈夫です。経験は日々あなたの中に蓄積されていくので、いつか「あ、これか」とつながるときが来るでしょう。半年経ってからまた読みなおしてみてください。きっと何かが変わるでしょう。

正誤表

Scrapbox にまとまっている.

scrapbox.io

依存パッケージを更新するサービス「Depfu」で package.json の更新をチェックする

Depfu は依存パッケージの更新を定期的にチェックし,更新があった場合にプルリクエストを作成してくれるサービスで,現時点で「Ruby, JavaScript」をサポートしている.導入企業に Cookpad も載っている.今回 Depfu を JavaScript で試した.

depfu.com

Depfu 以外にも依存パッケージの更新を定期的にチェックするサービスはある.

特に Dependabot はサポートしているプログラミング言語が多いという特徴がある.以下に Dependabot + Dockerfile を試した記事がある.

kakakakakku.hatenablog.com

インストール

Depfu は GitHub Marketplace からインストールできる.パブリックリポジトリなら無料で使えるので,すぐに試すことができる.

github.com

今回は数年前に実装した個人用 Slack Bot (Hubot) のリポジトリに Depfu を適用した.全プルリクエスト(計8個)を merge して,Slack Bot をデプロイしたら問題なく使えた!Slack Bot は Heroku で動かしていて,久し振りに Heroku を使った.

github.com

リポジトリ設定

Depfu では,リポジトリごとに詳細な設定ができる.

  • Update Strategy(アップデート戦略)
    • Individual Updates
    • Security Updates Only
    • Paused
  • Limit of open pull requests from Depfu(プルリクエスト上限数)
  • Customize the pull requests Depfu creates
    • Commit message(コミットメッセージ)
    • Which labels should we use for the PRs?(プルリクエストラベル)
    • Should we assign anyone to the PRs?(プルリクエストアサイン)
  • Environment Variables(環境変数)

f:id:kakku22:20181109112645p:plain

Up-to-date Dependencies

ライブラリごとに Requirement version と Latest version を確認できる管理画面がある.ライブラリによっては GitHub URL と Changelogs URL も載っていて,非常に使いやすく実装されている.

f:id:kakku22:20181109112658p:plain

プルリクエスト

Depfu のプルリクエストは詳細に書かれていて,ライブラリのバージョン比較だけではなく,実際にどのような差分(コミット)があるのかを確認することもできる.

github.com

また Depfu は ChatOps に対応していて,以下のようなコメントでメンションをすると,トリガーすることができる.今回は @​depfu rebase と @​depfu merge を使った.

  • @​depfu rebase
  • @​depfu merge
  • @​depfu reopen
  • @​depfu pause
  • @​depfu pause [minor|major]
  • @​depfu resume

f:id:kakku22:20181109112730p:plain

Depfu バッジ

Depfu では GitHub の README.md などに貼るバッジも用意されている.

Depfu

Depfu

Depfu

まとめ

  • 依存パッケージの更新を定期的にチェックしてくれる Depfu は便利
  • 現時点では Ruby と JavaScript をサポートしている
  • Depfu はどう発音するんだろう?
    • 試しに say をしたら「デェプフ」のように聞こえた!
$ say -v Alex Depfu

関連記事

今回題材にした Slack Bot を実装した2016年に書いた記事は以下にある.今どき CoffeeScript は書かないよなぁー.

kakakakakku.hatenablog.com

iTerm2 のプロファイルを peco で切り替える

普段 iTerm2 でターミナル作業をするとき,Colors は Solarized Dark を使っている.ただし,モブプログラミングをしたり,研修中にデモを見せたりするときに,スクリーンに Solarized Dark で投影すると視認性が悪いため,毎回 Edit Session or Open Profiles で Solarized Light など別の Colors に切り替えていた.

コマンドからプロファイルを切り替える

調べたところ,iTerm2 ではコマンドからプロファイルを切り替えることができる.例えばプロファイル名が Demo だとすると,以下のコマンドでプロファイルを切り替えることができる.

$ echo -ne "\033]1337;SetProfile=Demo\a"

alias と組み合わせる

次は .zshrc などの設定ファイルに alias を登録して,エイリアスから起動できるようにする.今回は demo と打てば,プロファイルを切り替えられるようにした.

alias demo='echo -ne "\033]1337;SetProfile=Demo\a"'

peco と組み合わせる

github.com

プロファイルが複数あると,エイリアスを覚えるのが大変になるし,他のエイリアスとカブる可能性もあるので,peco と組み合わせてインタラクティブにプロファイルを切り替えられるようにした.まず .iterm2-profiles ファイルを作成し,その中にプロファイル名を書いておく(ちなみに,ファイル名は自由に決めて良し).

Default
Demo
Mob

そして,peco と組み合わせたコマンドを alias にして,また .zshrc などの設定ファイルに登録する.今回は p と打てば,プロファイル名を選択できるようにした.便利!

alias p='echo -ne "\033]1337;SetProfile=$(peco ~/.iterm2-profiles)\a"'

f:id:kakku22:20181103134430g:plain

まとめ

  • iTerm2 では,コマンドでプロファイルを切り替えることができる
  • peco と組み合わせると,複数のプロファイルを簡単に切り替えることができる

Markdown を HTML に変換するライブラリ「Showdown」を試した

最近 Markdown で書かれたシンプルなドキュメント(見出し / リスト / コードブロックなど)を HTML に変換する必要があり,Markdown を HTML に変換するライブラリ「Showdown」を試した.今までは「Pandoc」を使う機会が多かったので,他のライブラリを試したかったという背景もあった.

github.com

サクッと Showdown の挙動を確認する場合は Showdown Live Editor を見てみると良いかと.

Showdown CLI とは?

CLI で Markdown を HTML に変換する場合,Showdown CLI を使う.オプションは以下から選べる.

  • -i/--input
    • Markdown ファイル名を指定する
    • 標準入力もサポートしている
  • -o/--output
    • HTML ファイル名を指定する
    • 標準出力もサポートしている
  • -u/--encoding
    • エンコードを指定する
  • -a/--append
    • 追記するときに指定する(どういうときに使うんだろう?)
  • -e/--extensions
    • 拡張ライブラリを指定する

詳細は Wiki に載っている.

Showdown CLI 実行

インストールは npm を使う.

$ npm install showdown -g
$ showdown -v
1.8.7

次に Markdown を用意する.「`3個」を入れ子にすると表示が崩れるため,Markdown 内部の「`3個」の先頭に本来不要な半角スペースを入れている.

# Sample
This is **Showdown** sample !

## List & Link

- A1
    - A1-1
    - A1-2
    - A1-3
- B1
    - B1-1
    - B1-2
        - B1-2-1
        - B1-2-2
        - B1-2-3
- [kakakakakku blog](https://kakakakakku.hatenablog.com/)

## Code Block

 ```
package main

import (
    "fmt"
)

func main() {
    fmt.Println("Hello, playground")
}
 ```

## Image

![Twitter](https://pbs.twimg.com/profile_images/604918632460656640/FdOmiWZW_400x400.png =200x200)

そして showdown makehtml を実行する.

$ showdown makehtml -i kakakakakku.md -o kakakakakku.html
Enabling option ghCodeBlocks
Enabling option encodeEmails
...
Reading data from file...
Parsing markdown...
Writing data to file...


DONE!

HTML に変換できた.

f:id:kakku22:20181029233236p:plain

CSS を適用する

Showdown では,基本的にシンプルな HTML に変換されるので,CSS などは適用されない.ただし GitHub を見ていたら,Markdown に style タグを書けば,多少はワークアラウンドができることがわかった.あくまで Markdown に style タグを書くだけなので,複雑なスタイルを書くと可読性が下がりそう.例えば,以下のように書ける.

<style>
h1 {
  color: red;
}
</style>

# Sample
This is **Showdown** sample !

サーバサイドで Markdown を HTML に変換する

GitHub の README.md を読んでいると,Showdown の強みはクライアントサイドでもサーバサイドでも Markdown を HTML に変換できるところにありそうだった.実際に Node.js でサンプルコードを動かしてみた.ウェブサービスの実装で Showdown を使うこともできそう.

var showdown  = require('showdown'),
    converter = new showdown.Converter(),
    text      = '# hello, markdown!',
    html      = converter.makeHtml(text);

console.log(html);

実行すると HTML に変換できた.

$ node sample.js
<h1 id="hellomarkdown">hello, markdown!</h1>

Showdown Extension

Wiki を読んでいると,Showdown Extension という拡張機能があり,公式には Twitter Extension と YouTube Extension が公開されていた.簡単に言うと「特定の文言を変換する機能」で,例えば Twitter Extension だと @username と書くだけで <a href="http://twitter.com/username">@username</a> に変換できるようになる.また Showdown Extension Boilerplate も公開されているので,独自の変換ルールを実装して拡張することもできそう.

github.com

github.com

github.com

まとめ

  • Markdown を HTML に変換するライブラリ「Showdown」を試した
  • Showdown CLI を使えば,ターミナルから変換ができる
  • Showdown Extension を使うと独自の変換ルールを実装できる
  • 次は Netlify 連携を試してみたいと思う

CPU / メモリ / ディスクに負荷をかける stress コマンド

最近 stress コマンドを使って,サーバに負荷をかける方法を紹介する機会があり,よく使っているのに今までブログに書いていなかったなと気付き,今回まとめることにした.CPU に負荷をかけるだけなら yes > /dev/null をコア数に合わせて並列実行すれば良いけど,stress コマンドならメモリとディスクにも負荷をかけることができるので,シナリオのバリエーションを増やすことができる.

インストール

検証環境として CentOS を使った.

$ sudo yum install stress

$ stress --version
stress 1.0.4

共通オプション

以下のような共通オプションが用意されている.よく使うのは --timeout で,秒数を指定して負荷をかけることができる.他はあまり使ったことがないかも.

  • -t, --timeout : 負荷をかける秒数を指定する
  • -n, --dry-run : 実際に負荷をかけず,期待値を確認する
  • -q, --quiet : 標準出力を抑制する
  • -v, --verbose : 標準出力にデバッグ情報まで表示する

CPU に負荷をかける

CPU に負荷をかける場合は --cpu オプションを使う.引数にコア数を指定するので,/proc/cpuinfo あたりを見て負荷を調整する.以下は,10秒間 CPU に負荷をかけて dstat で確認している.

$ stress --cpu 2 --timeout 10

$ dstat -c
----total-cpu-usage----
usr sys idl wai hiq siq
  0   0 100   0   0   0
  0   0 100   0   0   0
 73   0  27   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
100   0   0   0   0   0
 26   0  74   0   0   0
  0   0 100   0   0   0
  0   0 100   0   0   0

メモリに負荷をかける

メモリに負荷をかける場合は --vm オプションを使う.1 VM あたりのメモリサイズはデフォルトで 256MB になっているので,変更する場合は --vm-bytes 512M のように --vm-bytes オプションと併用する.また,デフォルトの挙動では「メモリ確保 → メモリ解放を繰り返す」ようになっている.

$ stress --vm 1
$ stress --vm 2
$ stress --vm 2 --vm-bytes 512M

以下は,10秒間メモリに負荷をかけて dstat で確認している.used の値が「増えて → 減って」を繰り返していることがわかる.

$ stress --vm 2 --timeout 10

$ dstat -m
------memory-usage-----
 used  buff  cach  free
97.9M 19.2M  442M 3148M
97.9M 19.2M  442M 3148M
 328M 19.2M  442M 2918M
 158M 19.2M  442M 3088M
 396M 19.2M  442M 2850M
 137M 19.2M  442M 3109M
 445M 19.2M  442M 2801M
 194M 19.2M  442M 3051M
 500M 19.2M  442M 2745M
 245M 19.2M  442M 3000M
 545M 19.2M  442M 2700M
 312M 19.2M  442M 2934M
98.4M 19.2M  442M 3147M
98.4M 19.2M  442M 3147M

逆に「メモリ確保を維持する」場合には --vm-hang オプションと併用する.--vm-hang オプションには維持する秒数を指定することができ,0 を指定すると無期限に維持する.以下は,10秒間メモリに負荷をかけて,確保サイズを 512MB で維持している.

$ stress --vm 2 --vm-hang 0 --timeout 10

$ dstat -m
------memory-usage-----
 used  buff  cach  free
 105M 21.2M  444M 3137M
 105M 21.2M  444M 3137M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 617M 21.2M  444M 2625M
 105M 21.2M  444M 3136M
 105M 21.2M  444M 3136M

ディスクに負荷をかける

stress コマンドではディスク(書き込み)に負荷をかけることができる.その場合は --hdd オプションを使う.デフォルトの挙動では「書き込み → 削除を繰り返す」ようになっている.書き込みサイズはデフォルトで 1GB になっているので,変更する場合は --hdd-bytes 2G のように --hdd-bytes オプションと併用する.あとは dstat -r で IOPS あたりを確認する.

$ stress --hdd 1 --timeout 10
$ stress --hdd 2 --timeout 10
$ stress --hdd 2 --hdd-bytes 2G

まとめ

  • サーバに負荷をかける場合は stress コマンドが便利
  • CPU だけではなく,メモリとディスクにも負荷をかけることができる