2017-08-01

Vue.js の scoped slot の理解

Vue JavaScript

毎回混乱して、ドキュメントを読んでいるのでまとめ。

以下のようなスロットの機能を利用したコンポーネント child で考える。

<div>
  {{ foo }}
  <child>
     <span>{{ bar }}</span>
  </child>
  {{ baz }} 
</div>

https://jp.vuejs.org/v2/guide/components.html#コンパイルスコープに書いてある話ですが、上記のテンプレートの foo, bar, baz のスコープは、そのテンプレートを扱っているコンポーネントになる。なんとなく、bar を展開している場所のスコープは child のような気がしてくるのだけど、そうではない。

bar を展開している場所で child のスコープを扱いたい( child のステートで class の付け替えをしたり )場合は、以前までは、child のステートを親のコンポーネントに渡し、親のコンポーネントを通してステートを展開していた。これは、親と子のコンポーネントが密になるのでよろしくない。

この問題を解決するのが scoped slot。child 内の slot コンポーネントに渡したデータが scope 属性値のオブジェクトを通して参照できるようになる。

<!-- child のテンプレート -->
<div>
  <scope :bar="..."></scope>
</div>

<div>
  {{ foo }}
  <child>
     <template scope="props">
       <span>{{ props.bar }}</span>
     </template>
  </child>
  {{ baz }} 
</div>

コンポーネントの親子間でプロパティを通してデータを渡すイメージに近く、属性値の scope の名は props と付けることが多い気がする( ドキュメントもそうなっている )。

2017-07-27

プロフェッショナル仕事の流儀「天職は、生涯かけて全うせよ～うなぎ職人・金本兼次郎」を見た

Diary

土用の丑の時期だからか、NHK オンデマンドのおすすめに出ていたので見た。

江戸時代からの鰻の老舗「野田岩」の五代目金本兼次郎さんを取り上げている。

http://www.nhk-ondemand.jp/goods/G2013050750SA000/?capid=sns002

個人的に刺さった部分。

常日頃から弟子に伝えているのは『仕事を作業にしないこと』

どうすれば日々の工程を深められるか考える姿勢がなければ、仕事ではないと金本さんは言う。

「仕事はどこまでも追求していかなきゃ。仕事への追求心がなくなると作業になっちゃう。この微妙な紙一重ね。それが職人のやり方。それがお客様を喜ばせる最大の元になる。」

このところ少し立て込みがちで、淡々とやりすぎていたな、こういった姿勢が足りていなかったな、と襟を正すきっかけになった。

2017-07-17

now での bot の 24 時間運用

Tech PaaS

最近、bot を now で運用しているのでメモ。

PaaS の free plan というと、一定時間アクセスがないと sleep したり、24時間連続で動かすことができないものが多く、bot を 24 時間稼働させるためにあの手この手を使って、中々苦労する印象がありますが、now は we allow you to deploy infinitely (even in the OSS free plan!) ( refs: https://zeit.co/blog/scale ) ということで free で24時間連続で動かすことが出来ます( 多分、静的サイトのホスティングを意識して、こういう仕様になっているのかな )。

deploy 後に now scale でインスタンス数を 1 に設定してあげるだけです。

$ now scale my-deployment.now.sh 1

go で書いた bot を1週間程度運用していますが、今のところ、特に問題はないです。複数 deploy すると問題が生じる bot の場合は、deploy の際に以前の deploy を削除したり、シャットダウンを受け付ける口を用意する等してシームレスに切り替える必要があるので、そこだけ対応が必要です。

2017-07-06

最近 2017年7月

一年前に書いたブログ( これからの1日の過ごし方 - kitak blog )がスターされて、「この記事を書いてから一年か。そういえば今年も半分が終わったな」と思ったので、適当に最近あったことを書いておきます。

最近の1日の過ごし方

ここ最近はこれからの1日の過ごし方 - kitak blog のようなかんじ。寒いのが苦手で冬は朝早く起きることができないので、去年の冬からちょっと前までは普通に9時とか10時に出社していました。
今年の冬は会議がなければ午前中は家で好きなことをして、12時~13時出社とかがいいかな、と思っていたりします。

痩せた

去年の振り返り( 2016年のふりかえり - kitak blog )で、風邪をひくことが多いだの、体重が増えているだの書いていたと思うんですが、一念発起して、新年に半年かけて 8kg ~ 10kg 減らす目標を立てました( 自分、こういう目標をブログに書くと絶対にやらないので、新年の目標はブログに書かないようにしてました )。
以下のようなことをやって、見事、目標達成しました。

腸内環境を整える。乳酸菌をオリゴ糖や食物繊維と組み合わせて摂る
糖質の摂取を控えめにする。苦しくなるまでお腹いっぱい食べないようにする
血糖値の急激な上昇を防ぐために極端にお腹が空いた状態を作らないようにする。お腹が空いたら、ローソンのブランパンか素焼きミックスナッツをおやつとして食べる
週に3~4日、30分程度、スロージョギングする
お茶を飲む。毎日、特茶かヘルシアを飲む。飲み会の前後にからだすこやか茶Wを飲む

痩せた以外にも、(たまたまかもですが)風邪を半年の間に一回しかひいていないのと、健康診断の結果も去年が「大体 B で E が 2つ」だったのが、今年は「大体 A で C が 2つ」になって良かったです。次の半年は、体重をキープ、リバウンドしないように適度に筋肉をつけようかな、と思っています。

個人事業主になった

先月、友人からベンチャー企業のお手伝いの話が来て、土日メインで副業を始めたんですが(ちゃんと会社に申請出してますよ！)、個人事業主になったほうが良いと判断したので、流れで個人事業主になりました。会社員兼です。屋号は kitak tech (キタックテック) です。

こういう話をすると、独立フラグか！？と思われそうなんですが、今、所属している会社は、今後も所属するつもりですし、当然そちらがメインです。

ありがたいことに個人事業主としての年内の仕事は埋まっているんですが、今後の関係も踏まえて話だけでもとりあえず、と思っていただけたら、Twitter の @kitak と相互フォローの関係であれば DM を送っていただくか、kei.kita2501 at gmail.com にメールをください。以下のような内容で貢献できるかもしれません(あくまで、平日の夕方・夜や、土日の空いた時間に自分がやりたいだけやっている形なので、精神・物理両面で強く制約されるお仕事はお引き受けできないかもしれません)。

Vue.js のハンズオン(単発のもの)
Single Page Application や JavaScript の関係する UI の設計/実装、あるいはそれらのレビュー
ウェブサイト/アプリのフロントエンドが関係するパフォーマンス上のボトルネックの特定と改善

上のようなお話をいただけるようになったのは、2, 3 年前に撒いた種が育って実がなったようなものなのかなと思っているのですが、今また次の2, 3 年を見据えて、面白いことを見つけて、種を撒きたいな、という気持ちもあります。人とダンスを踊るように目の前のことにしっかりかつ柔軟に向き合いつつ、次を見据えて種を撒く、次の半年~１年はそんなかんじになりそうです。

2017-06-20

Kotlin の JavaScript サポートを試す

Kotlin JavaScript

Kotlin 1.1 で JavaScript がサポートされたので、Your first Node.js app with Kotlin – Miquel Beltran – Medium を読みながら試してみました。仕事で JavaScript ばかり書いている背景があるので、気分転換で一見 JavaScript っぽくない別言語で Node で動くサーバーを書いてみたかったという気持ちです。

GitHub - kitak-sandbox/node-with-kotlin

試してみて

Tips っぽいやつ。

実行時エラーのスタックトレースが変換後の JS で出てくると分かりづらいので、GitHub - evanw/node-source-map-support: Adds source map support to node.js (for stack traces) で .kt の行数でスタックトレースを出力させるようにしました。パッケージをインストールして、require するだけ( https://github.com/kitak-sandbox/node-with-kotlin/blob/89f32b5e1de76a374ad8d5595fb6af4890a47f0d/src/main/kotlin/Main.kt#L5 )です。

サードパーティライブラリの型付けを試みるために、TypeScript の型定義ファイルを Kotlin の定義に変換するツール( https://github.com/Kotlin/ts2kt )を使ってみたんですが、今のところ、TypeScript の型定義ファイルを完全に変換できるわけではなさそうで、ライブラリによってはエラーや警告がそれなりに出ていました。ツールに関してはもう少し成熟するのを待って、静的型付けが必要と感じた場合は都度 Kotlin で定義を追加するのが良さそうです。

現場で使う？

お仕事で使うかどうかという話。単純に JavaScript に静的型付けや null 安全性を求めるのであれば、TypeScript で書いたほうが良いと思います。JavaScript + 静的型付けな言語で、普段、JavaScript を書いているのであればとっつきやすいですし、エコシステムも成熟しているというのがその理由です。

それでも、JavaScript をターゲットとして、Kotlin を採用すべき場面があるかどうか。バックエンドが Kotlin で書かれていて、コードをクライアントサイド(ブラウザ)やバックエンドフロントエンド(サーバー)で共有したいときに検討する価値があるかもしれません。
Kotlin ではないですが、Scala.js でそういった試みをおこなった事例があります( 0-9, 二槽式とはなにか )。とはいえ、記事の終わりの方にもあるように、採用すべき場面はかなり限定される気がします。

とりあえずは、始めに書いたように個人的に JavaScript で書いているアレコレを Kotlin の書き味で楽しむぐらいがちょうどいいかな、という気持ちです。

2017-06-19

シンプルな PaaS 「Now」で Go で書いたアプリのデプロイを試した

PaaS Golang

けっこう前に存在を知ったんですが、全然触っていなかったので試してみました。

Now 自体の説明は、公式サイト( Now – Realtime global deployments )や中の人の翻訳( http://qiita.com/nkzawa/items/8bf62549f79ebbcaafd8 )を読むのがいいと思います。

Now を運営している Zeit は、Next.js を開発していたり、Socket.IO の開発で有名な @rauchg が所属していて、そういった点でも興味を引きますね。 Now は、Node.js と Docker で動作するアプリのデプロイに対応しています。

今回は Go で書いたアプリを Docker をターゲットにデプロイしてみます。デプロイは、アプリのリポジトリに Dockerfile を用意して、now コマンドを叩くだけです。

事前にバイナリをビルドする

最初、golangをDockerでデプロイする — そこはかとなく書くよん。のノリで事前にバイナリをビルド( GOOS=linux GOARCH=amd64 go build )して、Dockerfile の COPY でバイナリを追加する形でのデプロイを試みました。

こんなかんじです。

FROM scratch
LABEL name "hello"
COPY hello /hello
EXPOSE 80
ENTRYPOINT ["/hello"]

ただ、Go が出力するバイナリは helloworld 程度の内容でも 1 MB を超えるので(バイナリのサイズをめっちゃ減らす術があったら教えてください)、無料の OSS プランの最大ファイル容量( refs: ZEIT – Now Pricing )にひっかかってデプロイできませんでした。とぼとぼ。ひとつ上の Premium プランであれば、問題なくデプロイできそうです。

デプロイの過程でビルドする

月 $15 は、お遊びで使うにはちょっと高いので、デプロイの過程でビルドさせることにしました。Dockerfile はこんなかんじです。

FROM golang:1.8
LABEL name "hello"
WORKDIR /go/src/app
COPY . .
RUN go-wrapper download
RUN go-wrapper install
EXPOSE 80
ENTRYPOINT ["go-wrapper", "run"]

使ってみた感想として、now コマンドを叩くだけでデプロイできる( git を使う必要すらない )というところで、非常にお手軽です。アプリが Now の固有の仕様に引きずられない、ロックインされないのも好印象でした。特に Docker の上で動かすことができれば、他の Docker に対応している PaaS への移行も容易なので気持ちが楽です。ちょっとした静的サイトをサクッと公開したり、プレゼンのデモアプリや趣味アプリを動かすサービスとして、有力な選択肢のひとつではないでしょうか。

2017-06-03

デヴィッド・リンチ監督作品ストレイト・ストーリーを観た

Movie

観た。脳卒中で倒れた兄に会いにトラクターで560kmを移動したアルヴィン・ストレイトというおじいさんの実話を基に作られた映画。

ストレイト・ストーリーリストア版 [Blu-ray]

出版社/メーカー: パラマウントホームエンタテインメントジャパン
発売日: 2013/08/23
メディア: Blu-ray
この商品を含むブログ (3件) を見る

アルヴィンを演じるリチャード・ファーンズワースの輝きに満ちた目、透明感のある声で発される演技は、まるで本人が演じているのではないか、と思えるぐらい役にハマっている。
道行く先々で出会った人々との交流で、アルヴィンの頑固な性格が出てくるのだけど、「あぁ、こういう頑固なおじいさんいるよね！でも、こういう頑固さ、嫌いじゃない。真っ直ぐだ」という気持ちになる。

音楽はデヴィッド・リンチと多くの作品でタッグを組んでいるアンジェロ・バダラメンティ。全体を通して、アルヴィンを表現しているような清廉な音楽が流れていて、これがとても素晴らしい。サウンド・トラックを買いたい。

兄のライルを演じるのは、TWIN PEAKS Fire Walk With Me でも印象的な演技をしていたハリー・ディーン・スタントン。兄と再会するシーンは最後の数分でセリフもほとんどないのだけど、このシーンのアルヴィンとライルの顔の表情や息遣い、声の出し方、そのひとつひとつから目が離せない。
ライルは、弟のトラクターに目線をやった後、徐々に目に光るものが溜まっていく。言葉は少ないけれども「遠いところからあんなものでわざわざ俺に会いに来てくれたんだなぁ。あぁ、泣きそうだ。だが、弟の前で泣くのはみっともない、我慢だ」という心の声が顔の表情だけで伝わってくる。
アルヴィンも数十年確執のあった兄との再会で、確執のあった人物と邂逅するときに誰もがそうなりそうな、少し居心地が悪そうな、目線を兄の顔からさりげなく外した絶妙な演技をしている。その後、ふたりが目線を上に移した後、星いっぱいの夜空に映像が切り替わり、ふたりがこれからどんな話をするのか観ている人間に想像を膨らませてのエンディングロールとなる。

全体的に話の進み方はゆっくりで、正直途中でダレそうにもなるのだけど、観終わった後になんとも言えない余韻が残る。この余韻を楽しむために、定期的に観ることになりそうだ。