Vue.js やってる
来年、まずは Vue.js を利用しているプロジェクトに参加することになりそうなので https://jp.vuejs.org/v2/guide を見て書いてあることを自分なりにまとめなおしたりコード書いたりして勉強していた。
"基本的な使い方" だけ抑えて、後は必要になったとき探せばいいかなと思っている。ひとまず算出プロパティとウォッチャのパートまで。
以下は学習時のまとめです。
Vue インスタンス、オプションオブジェクト
- Vue アプリケーションは Vue() 関数で Vue インスタンスを作成することによって起動する
- Vue() に渡すオブジェクトをオプションオブジェクトと呼ぶ
- オプションオブジェクト内の data オブジェクトのプロパティは Vue インスタンスが作成される際にリアクティブシステムに追加される
- vm.$watch はインスタンスメソッド
- プロパティ、インスタンス、メソッドについては API リファレンスにまとまってる
ライフサイクル
- 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
2017年やったことまとめ
エンジニアとしての活動まとめです。
社内
- 事業部内のリポジトリにあった使われていないコードを遮二無二消した
- ペパボカレッジ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 のネタ出しと全般的なサポートを担当した
社外
- PHP 勉強会東京で LT
- あの日見たバグを僕達はまだ公式ドキュメントで見れない
- PHP バージョンアップ中に出会った mb_convert_variables() のバグについて
- 結婚
- WEB+DB PRESS Vol.99 の特集執筆に参加
- PHP カンファレンス福岡で登壇(30分)
- ISUCON7 予選に参加
- 退職
総括
古くなりつつも長年直せずにいた部分に首を突っ込んではせっせと改修したり、周辺チームの開発効率が上がるよう諸々のツールの整備をやったり、テクニカルサポート業をしたりしていた1年だった。2016年からやっていた PHP のバージョンアップがリリースできたのが特に感慨深い。表ではやったったぞ!!!!と震え、陰では心底ホッとした1件でした。
30分枠の登壇や ISUCON 予選など、ちょいちょい未体験の事柄に挑戦できて良かった。しかしながら数がやや寂しいので2018年はもっとやっていけるといいな。2017年の3倍強くなりたい。
GMOペパボ株式会社を退職します
3行まとめ
- GMO ペパボ株式会社を退職します
- 来年よりさくらインターネット株式会社に所属する予定です
- 主たる開発領域がバックエンドからフロントエンドになります
もう少し丁寧に + 謝辞
在籍している GMO ペパボ株式会社を 2017/12/31 を以って退職することになり、12/8 に最終出勤を終えました。新卒三期生として入社(当時は株式会社 paperboy&co. という社名でした)し、4年半ほど在籍していました。
入社して研修を終えてからは最終出社日まで EC サービスのチームに所属し、新規機能を作ったり既存機能を改善したりテクニカルサポートをやったり、特にここ1年くらいは12歳を超えた大規模サービスの PHP のバージョンアップに尽力していました。また、新卒・新入エンジニアのメンタリングやアルバイト、インターン生、OJT の全般的なサポートも何度か担当させてもらいました。
入社当時は Web アプリケーション開発・運用にしてもコンピュータサイエンスにしても知識がおぼろで学習意欲も弱かった自分が、大きめな機能開発や言語のバージョンアップを担当し自然と毎日本を読むようになれたのは、多くの方々から指導・支援いただいたおかげと思います。
またカンファレンスへの参加・登壇や OSS へのコントリビュートなどの社外活動・アウトプットを会社として大事にし、実際に活動しているエンジニアが多く周囲にいたおかげで、視野を大きく広げることもできました。
体調の問題など迷惑をかけることも多かったことと思いますが、総じて本当に感謝しています。エンジニアとして最初に入社した会社がペパボで良かった。
なぜ転職するのか
理由は大きく2つで、自身が使っていたり自身の興味が強い分野のサービスの開発に携わりたかったから、というのが1つ。自身の技術力がまだまだ低いと感じる中で、担当サービスで閉じる汎用性の低い知識が求められる業務に多くの時間あたり続けることが怖くなったから、というのが1つ、といったところです。
(技術力という便利ワードを使ってあれこれを曖昧に詰め込んでいるのは自覚していて、これからちゃんと言語化したい)
転職でなく部署異動も考えたものの、どうせ小さくない環境の変化を起こすなら、せっかくだし会社ごと変えたほうが何かと学びが多かろうと。
そういえば「給与か!?」と何度か聞かれましたが、ゼロではないものの大きな理由ではないです。
これから
フロントはこれまで業務でもプライベートでも少ししか触れてこなかった領域なので不安はありつつも楽しみです。
これまでにお世話になった方々、どうぞ今後ともよろしくお願いいたします。
そうそう、送別会でいただいた日本酒、早速1本いただいてますが大変美味しいです。最高!!