[git]複数のcommitをまとめてcherry-pickする

ちょいメモ。

別ブランチのコミットを他のブランチにも適用するときに便利な cherry-pick コマンドですが、
複数のコミットをまとめて cherry-pick してしまいたい時がたまにあります。

そんなとき

$ git cherry-pick [cherry-pick の始点となるコミット]..[cherry-pick の終点となるコミット]

というように、A..B という指定のしかたでコミット A からコミット B までの一連のコミットを cherry-pick することが可能です。

が、注意点として、始点となるコミットは 実際に cherry-pick したいコミットの１つ前 を選ぶ必要があります。

以下、例。

$ git branch -a
* master

$ git log
commit 63ca256a5f806c8b237c3ff5c872debc0be12359
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:22:35 2016 +0900

    first commit

$ git checkout -b foo

# 略: foo ブランチ上でコミットを進める

$ git log
commit 738b8de617497b37bc47c06ce9fa9f676c256b61
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:23:39 2016 +0900

    commit 3

commit bee000f8a765367fe489302b064f856b2e1b259a
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:23:12 2016 +0900

    commit 2

commit d4baa931f1d2c3259c45109b880b9222a592c61f
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:22:59 2016 +0900

    commit 1

commit 63ca256a5f806c8b237c3ff5c872debc0be12359
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:22:35 2016 +0900

    first commit

$ git checkout master

# commit 1 ~ commit 3 までを master に cherry-pick したい
# 1) 始点に commit 1 を指定した場合
# conflict する...
$ git cherry-pick d4baa931f1d2c3259c45109b880b9222a592c61f..738b8de617497b37bc47c06ce9fa9f676c256b61
error: could not apply bee000f... commit 2
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add <paths>' or 'git rm <paths>'
hint: and commit the result with 'git commit'

# 2) 始点に commit 1 の1つ前を指定した場合
# 正常に cherry-pick できる
$ git cherry-pick 63ca256a5f806c8b237c3ff5c872debc0be12359..738b8de617497b37bc47c06ce9fa9f676c256b61
[master 2326872] commit 1
 Date: Mon Jun 6 17:22:59 2016 +0900
 1 file changed, 1 insertion(+)
[master 85d0cd2] commit 2
 Date: Mon Jun 6 17:23:12 2016 +0900
 1 file changed, 1 insertion(+)
[master 3299797] commit 3
 Date: Mon Jun 6 17:23:39 2016 +0900
 1 file changed, 1 insertion(+)

$ git log
commit 3299797bf2964b6c728eb268255e34eee5877dd0
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:23:39 2016 +0900

    commit 3

commit 85d0cd22f4d962b8b6c670dd0894874049437343
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:23:12 2016 +0900

    commit 2

commit 2326872f0c80c9b2dd83200ba039aba0ceef9b9f
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:22:59 2016 +0900

    commit 1

commit 63ca256a5f806c8b237c3ff5c872debc0be12359
Author: zaki-yama <xxx@gmail.com>
Date:   Mon Jun 6 17:22:35 2016 +0900

    first commit

Summer '16 開発者向けWebセミナー のメモ

Summer '16 開発者向けWebセミナー | Salesforce Developers

割とちゃんと観た。

UI の新機能（Lightning Experience）

• ホーム画面のカスタマイズ

• Lightning App Builder で作ったページが（ようやく）LEX とモバイル両方で使用可能

• オブジェクトの日付項目からカレンダーの予定を作成可能

• レポートのフィルタリング

Apps の新機能（Sales, Service, Mobile, Wave）

Sales Cloud

• 取引先責任者と複数の取引先の関連づけを許可
  • Contact.Account.Id ができなくなり、AccountContactRelation が追加（連結オブジェクト？）
  • データモデル変更になるのつらい...
• Lightning ボイス（日本ではまだ）

Wave

• CSV／Excel 形式でのダウンロード
• SAQL、集計関数の拡張

Mobile

• オフライン機能（公開パイロット）
  • S1 for Android 9.0 で提供、S1 for iOS（予定）

Identity とセキュリティの機能拡張

• テンポラリ認証コードの生成
  • 2要素認証を利用するユーザがデバイスを忘れたりしたときに、一時的に認証コードを発行
  • このコードを生成するだけの PermissionSet が追加
• ユーザ切り替えの簡素化（LEX のみ）
  • 設定項目あり（セッション）

一般的な開発の新機能

• Lightning プロセスビルダー
  • 複数条件でのアクション実行が可能
    • 1個目の条件を満たした場合、そこで処理をやめるか次の条件に進むか選べるように

• 制限つき選択リスト（正式リリース）
  • 選択リストの選択肢にある値以外は API 経由でも登録できなくするやつ
• Flow REST API
• イベントモニタリング
  • Wave App として
  • 別途契約が必要
• セッションベースの権限セット（開発者プレビュー）
  • 特定の種類のセッションでのみ有効な権限セットを割り当て

Apex

• UI からテスト結果の確認（LEX のみ）
  • 開発者コンソールと同じ
• getPopulatedFieldsAsMap()
  • SObject のインスタンスから、項目名と値の Map を取得

Visualforce

• LEX での Visualforce の使用が GA に
  • 使えない機能もあり
  • まだスタイルが自動で当たるわけではない

Lightning Component

• アクセスチェックエラーの強制
  • <aura:component access="global"> とかちゃんとつけようねという話

アクセスコントロールはComponen Exchangeでt公開をしなくても、AppBuilderからも使えなくなるので注意が必要です。要設定。

— Hiroshi Yoshita (@xlouder) 2016年6月3日

• LockerService
• Salesforce Lightning CLI
  • ここ見る
  • salesforce-lightning-cliのlintをeslintから実行してみた - Qiita
• Salesforce Lightning Inspector
  • https://chrome.google.com/webstore/detail/salesforce-lightning-insp/pcpmcffcomlcjgpcheokdfcjipanjdpc
• $Resource で静的リソース参照可能に

その他

• LEX の IE11 のサポート終了
• Chatter デスクトップ終了

HTML5とか勉強会 - React最新情報 に行ってきた

行ってきました。

ESLintでReactとES2015の構文チェック(eslint-config-airbnb)

ES2015の構文チェックと言えば ESLint ですね。
ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から
自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要があります。

ただ、さすがに一から自分でルールを構築するのは面倒なので、通常は Shareable Configs と呼ばれる機能を使い、他の人が大体いい感じにセットアップしたものを共有することができます。
eslint-config-airbnb もこの Shareable Configs の1つで、React に関する lint も含まれているのでとりあえずはここから始めるのが良さそうです。

インストールと設定

（package.json は作成済みとします）

eslint-config-airbnb の README の通りに、必要なパッケージをインストールします。

$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint

インストール後、設定ファイル .eslintrc に extends: airbnb を追加します。

{
  "extends": "airbnb"
}

ESLint の実行

package.json に以下のように記述し、npm scripts として実行できるようにします。
（以下は、ソースコードが src ディレクトリにある場合）

{
  "scripts": {
    "lint": "eslint src/**/*.js"
  },
  ...
}

ESLint を実行します。

$ npm run lint
> react-es6-tutorial@1.0.0 lint /Users/yamazaki/workspace/react/react-es6-tutorial
> eslint src/**/*.js


/Users/yamazaki/workspace/react/react-es6-tutorial/src/app.js
  5:7   error  'data' is defined but never used  no-unused-vars
  6:3   error  A space is required after '{'     object-curly-spacing
  ...

構文チェックに引っかかった箇所がずらーっと表示されます。

eslint-config-airbnb のカスタマイズ

デフォルトの設定を遵守してもいいですが、自分好みにカスタマイズしたいルールもあると思います。
たとえば、eslint-config-airbnb そのままでは comma-dangle というルールが有効になっているようです。
これは、オブジェクトリテラルの最後の要素にも , がついてないと警告するものです。

var foo = {
    bar: "baz",
    qux: "quux",  // ここにも , が必要
};

このルールを無効にしてみます。

ルールのカスタマイズは .eslintrc に rules という項目を記述することで実現できます。

{
  "extends": "airbnb",
  "rules": {
    "comma-dangle": 0
  }
}

rules にはルール ID（一覧は ここ）と 0 ~ 2 までの値のペアを列挙します。
0 ~ 2 までの値はそれぞれ以下の意味を持ちます。

• 0 または "off" : 無効
• 1 または "warn" : 警告
• 2 または "error" : エラー

（Configuring Rules の項を参照）

警告とエラーの違いはよくわかってませんが。。。

おまけ：エディタから ESLint を実行する

npm scripts から実行すると src ディレクトリ内のファイルすべてがチェック対象になってしまい、警告が多いと結果を確認するのが大変です。
かといって、対象ファイルを指定するために毎回 package.json を修正するのも面倒です。

というわけで、エディタと ESLint を連携し、編集中のファイルに ESLint を実行できるようにしておきます。

順番は前後しますが、これについては Vim の設定方法を記事に書きました。

また、記事の最後に Atom の設定で参考になりそうな記事も載せています。

さらにおまけ：ESLint の parser オプションについて

たまに、.eslintrc の parser に babel-eslint を指定しているのを見かけます。

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {
    ...
  }
}

指定するべきなのかな、と思ったのですが、README の冒頭に

Note: You don't need to use babel-eslint if you are only using ES6/ES2015. ESLint actually supports ES6/ES7, JSX, and object rest/spread by default now.

と書かれているので、とりあえず ES2015 で React 書いてる分には必要なさそうという結論になりました。

リファレンス

eslint-config-airbnb 以外の Shareable Configs も紹介されてます。

また、eslint-config-airbnb は比較的厳しめと聞いてますが、コメント欄読むとそれでも十分でない項目もあるみたいです。

webpack-dev-serverの基本的な使い方とポイント

はじめに

（2017/08/10追記）

この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。
また webpack 1 系の情報になっており少々古いです。

最新の設定についてはこちらの GitHub リポジトリを参考にしてください。
https://github.com/zaki-yama/redux-express-template

（追記ここまで）

JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。
通常の webpack コマンドも --watch （または -w）オプションつきで実行することにより
ファイルの変更を検知して自動でリビルドを行うことが可能ですが、
webpack-dev-server は上記に加えて

• ローカルサーバーも起動してくれる（中身は Node.js の Express サーバーらしい）
• ファイルの変更を検知して自動ビルドした後、ブラウザも自動的にリロードしてくれる（Automatic Refresh）
• ブラウザ全体のリロードではなく、編集したモジュールのみを更新する Hot Module Replacement という仕組みが使える（後述）

といった機能を備えているため、ローカルで開発する分にはこちらを使う方が便利です。

ここではその基本的な使い方と、個人的に気をつけたいと思った部分をポイントとしてまとめておこうと思います。

なお、ここでは webpack-dev-server や Hot Module Replacement がどういった仕組みで動いているのかについては言及しません。（私も理解していません。。。）
そういった話についてはこの記事が参考になりそうです。

（2017/06/15追記）

この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。Express に組み込む場合の手順はこちら。

（追記ここまで）

VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする

（2016/10/24追記）
しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。

（追記ここまで）

はじめに

vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じるようになります。
Syntastic はそのための vim のプラグインで、JavaScript に限らず様々な言語の構文チェックを行うことが可能です。

参考：以前 Python 用に設定した時の記事

今回は JavaScript の代表的な linter (syntax checker) である ESLint を使い、vim で ES2015 を書くときの構文チェック環境を構築してみます。

よく見る設定

「vim es6 syntastic」とかでググってよく見るのは以下のように、ESLint をグローバルインストールして使う方法です。

$ npm install -g eslint

.vimrc

" プラグイン管理に NeoBundle を使用している場合
NeoBundle 'scrooloose/syntastic'
let g:syntastic_javascript_checkers=['eslint']

たしかにこれで問題なく動作しますが、通常 ESLint はプロジェクト（アプリケーション）ごとに package.json に含まれていて
npm install でローカルインストールして gulp や npm scripts から使うことの方が多いと思います。

そのため、ESLint をグローバルインストールせずに構文チェックを行う方法がないか調べてみたところ、
こちらの vim プラグインを使うと実現できそうなことがわかりました。

今回の設定

先ほどの syntastic-local-eslint.vim を使った方法だと、.vimrc は以下のようになります。

" プラグイン管理に NeoBundle を使用している場合
NeoBundle 'scrooloose/syntastic'
NeoBundle 'pmsorhaindo/syntastic-local-eslint.vim'

let g:syntastic_javascript_checkers=['eslint']

" ここから下は Syntastic のおすすめの設定
" ref. https://github.com/scrooloose/syntastic#settings

" エラー行に sign を表示
let g:syntastic_enable_signs = 1
" location list を常に更新
let g:syntastic_always_populate_loc_list = 0
" location list を常に表示
let g:syntastic_auto_loc_list = 0
" ファイルを開いた時にチェックを実行する
let g:syntastic_check_on_open = 1
" :wq で終了する時もチェックする
let g:syntastic_check_on_wq = 0

使い方

実際のアプリケーション（前に書いた Redux の Todo App を使用）に ESLint を試してみます。
今回は ESLint の設定に eslint-config-airbnb を使用します。

まず、既に package.json が存在するものとして、以下のコマンドで必要なパッケージをインストールします。

$ npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint babel-eslint

eslint-config-airbnb は eslint 以外にも必要なパッケージがいくつかあるため、このようになっています。
また、今回は parser に babel-eslint を指定するため一緒にインストールしています。

インストールしたら、.eslintrc を作成します。

.eslintrc

{
  "parser": "babel-eslint",
  "extends": "airbnb"
}

この状態で vim を開き、:NeoBundleInstall を実行して Syntastic と syntastic-local-eslint をインストールし、
JavaScript ファイルを開くと以下のように表示されます。

ESLint で検出されたエラー行に >> という sign が表示されています。
該当行にカーソルを移動するとエラー内容が下部に表示されます。

また、:Errors コマンドでエラー一覧の location list を表示することができます。

location list の行で Enter を押すと該当行にジャンプすることができるので、
ファイル行数が多いときに役立ちます。

なお、この location list は .vimrc の

let g:syntastic_auto_loc_list = 0

を 1 に変えると常に表示されるようになります。

構文チェック実行中はファイル保存のたびにチェックが実行されるようになるため保存時の動作が重くなります。
こまめに :w するという方は以下のコマンドで構文チェックの ON／OFF を切り替えると良さそうです。

:SyntasticToggleMode

なお、今回動作を試したコードはこちらにあります。（Redux の basics チュートリアル）
https://github.com/zaki-yama/redux-tutorial/tree/master/basics

おわりに

この設定のおかげで、コードを書きながらこまめに構文チェックを行うことができるようになりました。

以前 ESLint を試したとき、gulp から実行しようとするとどうしてもデフォルトの対象がアプリケーション全体になってしまい
編集したファイル以外の大量のエラーによって本来確認したいファイルを見つけづらいという問題がありました。
vim から実行できるようになったことで、編集中のファイルのエラーだけを確認することができるようになり、開発はだいぶしやすくなったと思います。

おまけ

Atom だとこちらの記事が参考になりそうです。

GCPUG In Tokyo & Osaka #1 に行ってきた

行ってきました。

GCPUG イベント初の、東京 - 大阪を TV 中継で結んだ2拠点同時開催となりました。
会場はサイボウズさん。オフィスがとってもおしゃれ。

GCE で Selenium を動かすというセッションが一番の目当てだったんですが、到着が遅れて最後のセッションしか聞けず。。。
最初 2つのセッションについてはあとでスライド読みました。

セッション

• Compute EngineでSeleniumを用いた自動テスト
• GCP Next近辺で追加された内容
• Cloud ML

Compute EngineでSeleniumを用いた自動テスト

@miyajan さん

Distributed Selenium Testing with Google Compute Engine from Jumpei Miyata

• kintone チーム：PM 2 名、プログラマ 12 名、QA 16 名（QA 多い！）
• E2E テストのために Selenium Webdriver、並列実行のために Selenium Grid を利用
• 48 並列実行（！）
• Selenium Docker という Docker イメージもある
• 並列実行するために必要なリソースを GCE で
  • CPU 32 コア、メモリ 80 GB（！）
• それでも必要なときしか起動しないようにしてるので $200 / 月ぐらい
• AWS はどうか？
  • EC2 は最小課金単位が1時間なのがネック
  • （これ懇親会で全く同じ質問してしまった。。。すみませんでした）
• GCE の問題点
  • 利用上限を設定できないのが難点
    • 使った後のインスタンス停止忘れが怖い
    • アラート機能あるけど完璧ではないっぽい

GCP Next近辺で追加された内容

@sinmetal さん

• GCP Next のイベントの様子を写真で。楽しそう
• GAE に割とフォーカスされてた？
• 東京リージョンついに！
  • 参考：Google Cloud Platform、ついに日本国内リージョン開設を正式発表。東京に「東アジアリージョン」開設。1カ月以内にベータ公開を開始 － Publickey
• あと新サービスとして気になるのは Google Stackdriver とか
  • 参考：［速報］Google、AWSとGoogle Cloud Platformに対応した企業向けハイブリッドクラウドのモニタリングツール「Google Stackdriver」発表。GCP Next 2016 － Publickey
• IAM は「アイアム」と読むらしい（タイムラインの情報から）
  • IAM って AWS で知ったんだけど、GCP にもあるの知らなかった

Cloud ML

@sfujiwara さん

※スライドはまだ公開されてないようです

前半は Cloud Vision API と Cloud Speech API、後半は Cloud ML（Machine Learning） と Tensorflow について。

• Cloud Vision API
  • デモ：https://ml-topgate.appspot.com/
  • 主な機能は 顔検出、表情検出、文字検出
• Cloud Speech API
  • デモ：https://www.google.com/intl/ja/chrome/demos/speech.html
  • 日本語も対応してるし、何より リアルタイムで解析してくれる の素晴らしい
• Cloud ML
  • Speech/Vision API は以下 4 つとも google がやってくれる。Cloud ML は1, 2を自分でやる
    1. データの収集
    2. 学習アルゴリズムの実装
    3. 学習の実行
    4. 学習済みモデルをデプロイ
  • モデルの構築に Tensorflow フレームワークを使用している（？）
• Tensorflow
  • 計算手順だけを定義する
  • 計算順序を事前に教えてあげることで分散処理だとかそういうものは google がよしなにやってくれる。開発者は純粋に機械学習のモデル構築に集中できる（ということ？）

感想

最初の Selenium の話、Twitter で 48 並列実行という言葉だけ聞いて、勝手に 48 個ぐらいインスタンス立ち上げて
GKE とかも使って分散処理するみたいな話だと想像してたんですが
家帰って改めてスライド読んでみると違いますね。
超ハイスペックなインスタンス1個起動してその中で Selenium Grid による並列実行を行っているという理解です。

また、@miyajan さんには懇親会で「Selenium 興味あるんですけど自分で使ったことはないんです」と正直にお話ししたら
こちらの本を紹介していただきました。

Selenium実践入門 ―― 自動化による継続的なブラウザテスト (WEB+DB PRESS plus)

今だと一番 Selenium についてよくまとまってるのはおそらくこの本、というのと、後半にサイボウズさんの事例も紹介されてるとのこと。

---

あとは、懇親会でちらっと話に出てた
「GCP はすごく良いサービスなんだけど Google はマーケティングが下手で。。。」
という話が面白かったです。
自分も同じような印象持ってました。

基本、自分たちのサービスで使うために生まれた技術・プラットフォームを僕らにも公開してるってスタンスなので
広く普及してほしいとかそういうモチベーションはあんまりないんですかねえ。
ただ、Google のエンジニアが自分たちで使ってるからなのか、どのサービスもエンジニアには非常に使いやすいようになってるという感じはします。

GCPUG は GCP のサービスを実際に使ってなくても興味深い話が聞けるので、これからもちょくちょく参加して勉強させていただきたいと思います。