WebDesign Dackel

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

SassでBEMる時に便利なmixin

Sass+BEMでコーディングをする際に、下記のサイトにあるようなmixinを便利に使わせてもらっていたのですが、一点不満に思う箇所があったのでちょっとだけカスタマイズしてみました。 BEM Mixi...

Vagrant+node.js+express4+MongoDBで簡単なWebアプリを構築

Vagrant+node.js+express4+MongoDBで簡単なWebアプリを構築

これまで僕はサーバサイドのJavaScriptをまともに書いたことがありませんでした。普段はPHP+MySQLで作ることがほとんどだからです。 しかし、フロントを実装する際にgulpを使ったり、npm...

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

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

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

webpackで複数のディレクトリへ出力する

最近、仕事でもプライベートでもwebpackを使う機会が少しずつ増えてきましたが、複数のエントリーファイルを扱う際に少し迷ったことがあったのでメモです。 具体的にどんなことで迷ったかといいますと、 ....

Bootstrap無しでinput-groupを作る

Bootstrap無しでinput-groupを作る

バージョン4のalphaがリリースされたのが記憶に新しいBootstrapですが、プロトタイプの製作から実際のコーディングまで結構お世話になっています。 特にグリッドとフォーム周りのスタイルは自分で作...

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

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

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

オブジェクト内の文字列をテンプレート化するtemplate-obj.jsを作ってみた

オブジェクト内の文字列をテンプレート化するtemplate-obj.jsを作ってみた

何を作ったの? JavaScriptのオブジェクトをちょこっと使いやすくするtemplate-obj.jsというライブラリを作りました。 tsuyoshiwada/template-obj どんなもの...