はてなブックマーク

この記事はSmartHR Advent Calendar 2020 10日目の記事です。 はじめに 私は、普段フロントエンドエンジニアとしてWebフロントエンドのコードを書いたりしています。 新しいHTML/CSS/JavaScriptの仕様だったり、新しいAPIのドキュメントを読んだりしていると、 この新しい仕様ってブラウザにどんな風に実装されてるんだろ？ ↓ Chromiumのコードって公開されてるから見られるんじゃないかな ↓ いや、そもそもChromiumのソースコードって私でも見ても分かるのかな… ↓ 公開されてるし、ちょっと覗いてみるだけでも何かいいことあるかも と思いたってChromiumのソースコードを読んでみることにしました。 この記事はChromiumのコードを読んだことがない私がChromiumのコードを読むために行った手順と気付きを書いています。 ゴールを決める C

HMR(Hot Module Replacement)ってみなさん使ってますか？ HMRは、webpackの提供する仕組みで、ページの再読み込み無しで、モジュールの交換・追加・削除をアプリケーションの動作中にブラウザに適用してくれる開発ツールです。 ブラウザをリロードしなくても変更したモジュールだけが更新されるし、開発の時間が節約できて便利ですよね！ 最近HMRってどうして変更したモジュールだけが更新されるのかなあって考えたことがあったのでまとめてみました。 HMRの仕組み HMRでファイルを変更してからブラウザで変更が反映されるまでの流れは以下のような仕組みになっています。 Webpackのコア、プラグインライブラリ Webpack-dev-server関連のライブラリ HMRライブラリ(react-hot-loader、style-loader等) 変更したファイル(js, css等)

Vue.jsの中身を読んでみる！というのを最近やってみていて、算出プロパティ部分を読んでいたのですが、 実際に同じようなコードが書けないかなあと思い、少し書いてみました。 Vue.js 算出プロパティ部分のコード Vue.jsでの実現方法は多分こんな感じ initDataでobserveが呼ばれている vue/state.js at dev · vuejs/vue · GitHub function initData (vm: Component) { let data = vm.$options.data // ... data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} // observe data observe(data, true /* asRootData */) } ↓ o