WebDesign Dackel

Reactでドラッグアンドドロップを実装したいので、react-dndを使ってみた

Reactでドラッグアンドドロップを実装したいので、react-dndを使ってみた

やりたいこと 例えば、TODO管理のWebアプリでタスクの並び替えを実装しよう!となった時、ドラッグ&ドロップを使って順番を入れ替えたいですよね。 ただ、React.jsでは基本的に直接DOM操作は行...

React.jsでリストの追加・削除時にアニメーションを付ける

React.jsでリストの追加・削除時にアニメーションを付ける

はじめに この前はReact.jsをCoffeeScriptで書いていくための環境を構築しました。 少し時間があいてしまいましたが、やっと公式のチュートリアルが終わりました。 チュートリアルは、簡単に...

ReactをCoffeeScriptで書くための開発環境を整える

ReactをCoffeeScriptで書くための開発環境を整える

はじめに 今年初めくらいから触ってみたいなと思っていたReact.jsですが、色々と情報が増えてきてやっと手をつける気になってきたので、これから勉強していきたいと思いました。 そこでどうせならCoff...

JavaScriptで2つの時間帯が重複しているかチェック

JavaScriptで2つの時間帯が重複しているかチェック

よくバックエンドでは実装をするのですが、フロントではあまり使ったことが無かったのでメモです。 いったい何がしたいのかというと、12:00~13:00と12:30~13:30という2つの時間帯があったと...

requestAnimationFrameの簡単なラッパークラスをCoffeeScriptで書いてみた

requestAnimationFrameの簡単なラッパークラスをCoffeeScriptで書いてみた

はじめに JavaScriptでアニメーションをする時に定番化してきているrequestAnimationFrameですが、npmで探せば、使いやすそうなライブラリが沢山出てきます。 でも、ちょっとし...

JavaScriptを使ってスネークケース・キャメルケース・パスカルケースの変換

JavaScriptを使ってスネークケース・キャメルケース・パスカルケースの変換

はじめに 下記のような変換を行うための処理です。 sample_string => sampleString sample_string => SampleString この逆もしかりです...

JavaScriptで正規表現でのチェックと結果の取得を簡潔に書く

js-regexp-matches900x550

はじめに 最近、会社が引っ越しました。それに合わせて自宅の引っ越しもしたので何かと忙しい毎日を過ごしていたのですが、最近になってようやく落ち着いてきました。 この記事で書きたい内容はタイトルのままで、...

d3.jsでレスポンシブな折れ線グラフを描く

d3.jsでレスポンシブな折れ線グラフを描く

はじめに この前d3.jsについて書いた記事が、円グラフのレスポンシブ対応だったので、今回は折れ線グラフに対応してみたいと思います。 前回もそうでしたが、レスポンシブ対応だけは物足りない感じがするので...

gulp+webpack+bowerの構成でcoffee-script開発する

gulp+webpack+bowerの構成でcoffee-script開発する

突然ですが、最近Gruntやgulpなどのタスクランナー無しでの開発がもの凄く億劫になってきています。 JSのminifyやSassのコンパイル、画像の圧縮やブラウザのライブリロードなど、サイトのクオ...

JavaScriptで相対パスをhttpから始まる絶対パスに変換

やりたいことはタイトルのまんまです。以前にjQueryを使って同じことをしてみましたが、jQueryを導入していない案件で必要なことがあったのでコピペ用に残しておきます。 ちなみに以前に書いた記事はこ...