ravelll の日記

よしなに

ウニバーに行ってきた

gohan

何人かの知人が行ってはおかしくなっていたウニバーについに行ってきた。コースは匠。

tabelog.com

料理は過度に良く、「ﾎｯ」「んあっ」「ぅうめえ」のようなプリミティブな反応ばかり出がちだった。

f:id:ravelll:20171230192702j:plain

f:id:ravelll:20171230193428j:plain

さすが専門店だけありウニの存在はユビキタスで、3種食べ比べの他、白エビや大根の煮物、銀鱈やお吸い物の上にもいた。それぞれ立派なものがドカッと。これが "調味料としてのウニ" という界隈か。

f:id:ravelll:20171230194447j:plain

f:id:ravelll:20171230201654j:plain

f:id:ravelll:20171230203647j:plain

また正直なところ、高質なウニをとりあえず添付することで 料理の質B + ウニの質S = 総合評価A となっている世界観なのではと疑っていたのだけど全然そんなことはなく、乗ったウニはちゃんと料理に必要な1ピースになっていて、不自然なバランスではなかった。そんな猪口才なことを言わずとも、ただただ美味しかった。美味しければいい。

f:id:ravelll:20171230210605j:plain

会計はコース（ちなみに写真はコースの料理全てではない）とお酒を2杯で17,000円ほど。たっかいんだけれども、満足できている。 他のコースも気になるのでまた頭のネジが緩んだらお世話になりたい。

Vue.js やってる

Vue.js tech

来年、まずは Vue.js を利用しているプロジェクトに参加することになりそうなので https://jp.vuejs.org/v2/guide を見て書いてあることを自分なりにまとめなおしたりコード書いたりして勉強していた。
"基本的な使い方" だけ抑えて、後は必要になったとき探せばいいかなと思っている。ひとまず算出プロパティとウォッチャのパートまで。

以下は学習時のまとめです。

Vue インスタンス、オプションオブジェクト

ライフサイクル

  • Vue インスタンスは生成時に一連の初期化を行う
  • それらの各初期化段階ごとにユーザーのコードを追加するための関数（ライフサイクルフック）が実行される
    • create, mount, update, destroy それぞれの前後にある（beforeCreate, created ...）
    • 全てのライフサイクルフックにおける this は Vue インスタンスを指す
  • https://jp.vuejs.org/v2/guide/instance.html の最下部にライフサイクルの全体図がある

テンプレート

  • テンプレートは内部で VirtualDOM の描画関数にコンパイルされる
    • アプリケーションの状態が変わったら最低限の DOM 操作を行う
  • テンプレートを使わず render 関数で直接描画することもできる
  • データバインディングは Mustache の記法を使うのが基本
    • Mustache で展開した場合、データは HTML ではなくプレーンなテキストとして扱われる
    • HTML で展開する場合は v-html ディレクティブを使う
      • v-html は XSS の温床なのでユーザからのコンテンツに対して使わない
  • Mustache は HTML の属性の内部では使えないので、その場合は v-bind ディレクティブを使う
    • <div v-bind:disabled="divDisabled">DIV</div> として divDisabled プロパティに値を入れる
  • Mustache の内部では js の式を書ける
    • 文は書けない（1 + 2 は OK、let num = 3 は NG）

ディレクティブ

  • v- から始まる Vue における特別な属性
  • v-for を除くディレクティブは属性値として単一の js 式を期待する
  • 属性値が変化すると各ディレクティブは副作用を DOM に適用する
  • v-bind:title における title は v-bind ディレクティブの引数
  • v-bind と v-on には省略記法がある
    • v-bind:title -> :title
    • v-on:click -> @click

算出プロパティ

  • オプションオブジェクトに computed プロパティとして指定
  • 例えば upperTitle 算出プロパティを定義すると vm.upperTitle の getter として使われる
    • 算出プロパティに渡すオブジェクトに set / get プロパティを書くことで setter も書ける
  • 同じ関数を methods プロパティで定義したときと computed プロパティで定義したときの差について
    • 結果は同じ
    • methods では再描画のたびに関数が評価される
    • computed では依存関係が更新されたときにだけ再評価され、それ以外はキャッシュされている評価結果を返す
    • 以下のようなコードを用意してブラウザのコンソールから vm.title を更新するときの振る舞いを見ると分かりやすい
<!DOCTYPE html>
<html>
  <body>
    <div id="app">
      <h1>
        {{ title }}
      </h1>
      {{ methods_now() }}
      {{ computed_now }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./index.js"></script>
  </body>
</html>

const vm = new Vue({
  el: '#app',
  data: {
    title: "Sample Title"
  },
  methods: {
    methods_now: function () {
      return Date.now()
    }
  },
  computed: {
    computed_now: function () {
      return Date.now()
    }
  }
})
  • 監視（watched）プロパティもあるけど computed でできないか考えて使う
    • watch はデータ変更のたびに重い処理を非同期で行いたいときとかに便利

その他 Tips

  • インスタンスプロパティやコールバックでアロー関数は使わない
    • 親コンテキストに束縛されるため this が Vue インスタンスを指さなくなる

2017年やったことまとめ

tech

エンジニアとしての活動まとめです。

社内

  • 事業部内のリポジトリにあった使われていないコードを遮二無二消した
  • ペパボカレッジ1期生のうち、自分と同部署に配属された3人のメンタリング（半年）
  • 動くべきだけど動かなくなっている物事を見つけては動くように直した
    • build できなくなっていた CI 用 Dockerfile をメンテしたり
    • 色々あったはずだけど思い出せない…
  • 公開 API（Rails）の機能を追加しようとした（色々あり途中まで）
  • 変更の多いリポジトリの CI にかかる時間を短縮した（6分くらい縮めた気がする）
  • Slack bot（hubot）の機能追加あれこれやった
    • PR のレビュアー選択とか、特定タスクの当番の呼び出し仲介とかあれこれ
  • あるアプリケーション（大きめ）の PHP バージョンを 5.3 -> 5.6 に上げた
  • お問い合わせ対応のうちカスタマーサービスだけでは解決できない技術的な問題について原因を調査したり改善したり
  • 社内テックミーティングでトーク * 3
  • 新卒エンジニア向けの座学を1コマやった
  • あるアプリケーション（大きくない）の PHP バージョンを 5.3 -> 7.2 にすべく手元で動く程度まで動作検証したりコードを修正したり（退職により時間切れ）
  • 自チームでの新卒エンジニアの OJT のネタ出しと全般的なサポートを担当した

社外

総括

古くなりつつも長年直せずにいた部分に首を突っ込んではせっせと改修したり、周辺チームの開発効率が上がるよう諸々のツールの整備をやったり、テクニカルサポート業をしたりしていた1年だった。2016年からやっていた PHP のバージョンアップがリリースできたのが特に感慨深い。表ではやったったぞ!!!!と震え、陰では心底ホッとした1件でした。

30分枠の登壇や ISUCON 予選など、ちょいちょい未体験の事柄に挑戦できて良かった。しかしながら数がやや寂しいので2018年はもっとやっていけるといいな。2017年の3倍強くなりたい。