WebDesign Dackel

【初心者向け】jQueryでツールチップのプラグインを自作しよう – Part1

【初心者向け】jQueryでツールチップのプラグインを自作しよう - Part1

はじめに 最近のフロントエンドではjQuery離れがささやかれたりしていますが、そんな中僕が通っていた専門学校の生徒(在校生)さんにjQueryを教える機会がありました。 (大したことは教えてあげられ...

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

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

jQueryでプラグインを使わずにそれなりにちゃんとしたスムーススクロールを実装する

jQueryでプラグインを使わずにそれなりにちゃんとしたスムーススクロールを実装する

はじめに いきなりですがjQueryでスムーススクロールを実装した事があるでしょうか? きっと沢山の人が実装したこと、使ったことのある機能だと思います。 ちょっと調べて出てきたサンプルのコードをコピペ...

jQueryとCSSのclipプロパティを活用して、ここまで白ここから黒、みたいな表現を作る

jQueryとCSSのclipプロパティを活用して、ここまで白ここから黒、みたいな表現

はじめに いきなりですが、タイトルが若干意味不明ですね。良いタイトルが思いつきませんでした。 やりたいことは単純で、下の画像みたいな感じなことです。 実はこのブログの画面右上のメニューボタンにも試験的...