はてなブックマーク

最近、JavaScriptフレームワークであるVue.jsの勉強をしているのですが、jQueryを用いて開発を進めるときと比べるとデバックに時間がかかってしまいます。 何か良い解決策を探してみると「Vue.js Devtools」というchromeブラウザの拡張機能の存在を知りました。 早速導入してみると、 作業がとても捗った ので、導入方法や使い方を簡単にまとめたいと思います。 Vue.js Devtoolsとは Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 です。これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。 Vue.js Devtoolsの導入方法について それではさっそくVue.js devtoolの導入方法について。まずは下記URLにアクセスして拡張機能を追加します。 Vu

サイト改修の中でposition:stickyのpolyfillを使用する機会がありました。 今回はpolyfillの内部実装と利用する際に注意すべきことを紹介したいと思います。 position:stickyとは まず始めにposition: stickyの簡単な紹介から。 position: stickyは、画面からスクロールアウトする際に、画面の上下左右、指定した位置で要素の固定し、スクロールに追従してくるような配置を可能にするcssの記述です。 下記の場合、.sampleの要素が画面に現れたら、topが0の位置で追従します。 このcssを用いるとサイドバーとを特定の位置までスクロールさせたら追従させたり、スクロールが発生するtableの組んだ時に、thのみ追従させることが可能になり便利です。 position:stickyのサポート状況 上記で紹介したとおり、position:st

MVVMの中でもシンプルで学習障壁が低いと言われている「Vue.js」を使って、ToDoリストを作成してみました。（追加と削除のみの機能しかもたない簡単なToDOリストです。） 学習した内容の整理も兼ねて、記述したコードを紹介したいと思います。 ※今回はVue.js v2.3.3を使用しています。 ViewModel scriptの記述は下記の通り▼ new Vue({ el: '#js-todoList', data: { newItem: "", todos: [] }, methods: { addItem: function(event) { event.preventDefault(); if (this.newItem == "") return; this.todos.push({ item: this.newItem }); this.newItem = ""; }, de