WebDesign Dackel

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

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

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

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

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

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

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

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

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

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

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)でした! カーソルの移動や、...

gulpfile.coffeeからES6(ES2015)へ書きなおしてみた

gulpfile.coffeeからES6(ES2015)へ書きなおしてみた

最近プライベートで使うコードをES6で書いてみたりしています。ただ、gulpfileに関してはずっとCoffeeScriptを使っていました。 メインのコードがES6なのに、gulpfileがCoff...

JavaScriptで複数のランダムな色を虹色に並び替えてみる

JavaScriptで複数のランダムな色を虹色に並び替えてみる

はじめに 例えば、ランダムに並べたとってもカラフルなブロックを、手作業で虹色に並び替えるのはそれほど難しくないかもしれません。(実際やってみたら難しいかも…) ではそれをプログラムで実現に...