WebDesign Dackel

Babel6でクラス継承をIE9に対応する

Babel6を使ってクラスの継承をトランスパイルする際に、継承先クラスのコンストラクタでsuper()を使い親コンストラクタを呼び出すと、IE9で正しく動作しませんでした。 そもそもIE9で動作させる...

JavaScriptでCSSセレクタを使ったEvent Delegationの実装

はじめに まだDOMツリーに描画されていない要素に対してイベントを設定したい場合、jQueryを使用していると以下のメソッドを使いますよね。 jQuery.fn.on(events, selector...

ES6フレンドリーなスムーススクロール「sweet-scroll.js」を作りました

ES6フレンドリーなスムーススクロール「sweet-scroll.js」を作りました

ES6フレンドリー、かつ依存無しで動かせるスムーススクロールライブラリを作り、npmに公開しました。 実際ブログに組み込んだり、それ以外でもちょこちょこと使ってみて、普通に使えるようになってきたのでご...

Atomでマルチカーソルの連番入力をするパッケージ「sequential-number」をリリースしました

Atomでマルチカーソルの連番入力をするパッケージ「sequential-number」をリリースしました

つい先日Visual Studio CodeがOSS化されたり、数ヶ月前にAtomが正式のバージョンである1.0を迎えたり、エディタ界の盛り上がりにはワクワクしますね。 僕は最近AtomとSublim...

rollup.jsでES6なモジュールをブラウザとNodeの両対応させる

まだES6 Modulesの仕様が確定せず、実際に使うのってどうなの?みたいなところについては、様々な議論があると思います。 ただ、「せっかくES6だしモジュール周りもそれっぽく書きたい!!」というこ...

CakePHPのHashクラスをJavaScriptに移植した「cake-hash.js」を作ってみた

CakePHPのHashクラスをJavaScriptに移植した「cake-hash.js」を作ってみた

最近フロントエンドが楽しくて、なかなかPHPを書いていませんでした。 ふと、以前にCakePHPで作ったWebアプリを見なおしてみると、Hashクラス便利だったなぁ〜と思いました。 どんな感じの実装に...

react-routerでページ遷移にちょっとしたアニメーションを付ける

react-routerのリポジトリを見ると、アニメーション用のサンプルがありました。 以前、同じような事をやろうとして上手く出来なかったので、この機会に試してみました。 それぞれのライブラリのバージ...

Reduxで定期的なアクションを実行する簡単なサンプルを作ってみた

Reduxで定期的なアクションを実行する簡単なサンプルを作ってみた

個人的に作ってみたいサイトがあって、どうせならモダンな感じで書きたいなぁということで、少しずつReduxを触ってみています。 Reduxは初めて使いますが、Reactは以前、CoffeeScriptで...

karma+mocha+power-assertでDOM操作を含むユニットテストをES6で書く

テスト周りは以前にmocha+chai、QUnitを少し触った程度であまり詳しくなく、少しずつ慣れていかなきゃなぁと感じていました。 そこで今回は簡単なモジュールを、コード本体とテストコードの両方をE...

iOS9で追加されたForceTouch(3DTouch)をJavaScriptで操作してみる

iOS9で追加されたForceTouch(3DTouch)をJavaScriptで操作してみる

先週、2年使って画面のバッキバキになったiPhone 5sを6sに買い換えました。 買い換えてみて便利だなぁと思ったのは、やっぱりForce Touch(3D Touch)でした! カーソルの移動や、...