もうReactのフォームで消耗したくないので、HoCベースのフォームライブラリを作った - wadackel.me
2017 年。React のフォームに消耗しました。 いくつか良さそうなフォームライブラリはありますが、個人的に満足のいくものが無かったので、とあるプロジェクトで実装したものをベースにしてライブラリにまとめました。 作ったもの react-drip-form という、HoC ベースで React のフォームコンポーネントを構築するライブラリを作りました。元となるコードを書いている時、「さくっとフォームの実装を済ませてゆっくりコーヒーでも飲みてぇ…」という気持ちがかなり高まってたので、コーヒーを連想させる名前にしてみました。 wadackel/react-drip-form https://github.com/wadackel/react-drip-form ドキュメントのページでは、Create React App を使った Quick Start もあるので、さくっと試すことが出来ると
Rails ActiveRecord date between
I need to query comments made in one day. The field is part of the standard timestamps, is created_at. The selected date is coming from a date_select. How can I use ActiveRecord to do that? I need something like: "SELECT * FROM comments WHERE created_at BETWEEN '2010-02-03 00:00:00' AND '2010-02-03 23:59:59'"
BabelとTraceurでES6末尾再帰最適化を試す - teppeis blog
ちょっと前にBabelに末尾再帰最適化が入って話題になったけど、同じくTraceurにもv0.0.85で最適化が入ったので試してみた。 末尾再帰最適化って何？ 厳密な話はそちらの筋に任せるとして、ざっくりしたストーリーはこんな感じ。 再帰って深くなるとstack overflowになっちゃう 再帰をシンプルなループ（スタックを使わないジャンプ）に変換できればstack overflowを避けられる 一般に末尾再帰であれば再帰をループに変換できる方法が知られている（これが末尾再帰最適化） 末尾再帰とは、関数の最後のステップだけで再帰呼び出しを行うこと 末尾再帰ではない再帰関数でも、CPS変換を使うことで末尾再帰関数に変換が可能 CPS変換とは、関数を結果の値を受け渡すスタイルから継続渡しスタイルに書き換えること つまり、普通の再帰関数 -> CPS変換で末尾再帰化 -> 末尾再帰最適化を適用
class extends構文を使わずにArrayを継承する
ES2015からclass extendsを使うことでクラスを継承することができます。 今まではビルトインのArrayやErrorの継承は内部プロパティを引き継ぐことができませんでした。 Chapter 28. Subclassing Built-ins How ECMAScript 5 still does not allow to subclass array — Perfection Kills ES2015からはclass extendsを使うと内部プロパティも含め継承できます。 lengthプロパティの動作も継承できています。 class SubArray extends Array { last(){ return this[this.length - 1]; } } var array = new SubArray(1,2,3); array.push("x"); conso
Object spread vs. Object.assign
Let’s say I have an options variable and I want to set some default value. What’s is the benefit / drawback of these two alternatives? Using object spread options = {...optionsDefault, ...options}; Or using Object.assign options = Object.assign({}, optionsDefault, options); This is the commit that made me wonder.
ES6 Symbolとはなんなのか
なんか最近WebKit (JSC) に ES6 Symbol が実装されたようなんですが、Symbol とかそんなのあったのか……というレベルだったので調べてみました。調べてみたらけっこう知らない世界でした。ES6、いつのまにかこんなことができたのかって感じ。 シンボルとは何なのか プログラミング言語におけるシンボルというのは……名前がついて区別可能なモノ、というのが一般的な理解である気がします。LISPでは多用されますね。たとえばメソッドの名前とか構造体のフィールド名、連想配列のキーやenumのようなものとして使ったりします。Rubyでもおなじみです。 まあこういう説明が必要な人はあんまりここを読んでない気もするのでwikipediaへのリンクで済ませたい。 ES6のシンボル ES6のシンボルも似たような感じなんですが、いろいろ違うところもあって戸惑います。以下はおおむねMDNからもって
ECMAScript6にシンボルができた理由
ECMAScript6 (ES6, ES2015) で導入された新機能の大半は、読めば便利さが想像くらいはできるけど、自分にとってしばらく訳がわからなかった新機能が「シンボル」（MDNのリファレンス）。これまで文字列だけで上手くやってきたJavaScriptに、急になぜこんなものが導入されたの？ イマイチ分からなかったので、調べたことのまとめ。 シンボルの簡単なおさらい 知ってる人は読み飛ばし推奨。詳しく見たい人は、こことかの他のページを参照。 ES6で導入された、 Symbol() で作成できる特殊な値。 Symbol() は、 typeof すると 'number' でも 'string' でも 'object' でもなくて 'symbol' となる、まったく新しいタイプのプリミティブ値を生成する。 一旦作ったシンボルは、それ自身とのみ等しくなる、ユニークなIDとして機能する。 ===
Modular JavaScript , CommonJs, AMD, UMD について – Supertrue
JavaScript でのモジュールの定義について。 CommonJS, AMD, UMD 各フォーマットの覚書き。 CommonJs CommonJSでは、サーバ上などのブラウザ外で利用する際のモジュール定義について、簡潔なAPIが規定されてます。AMDとは異なり、IO、ファイルシステム、promiseなど、より広範な概念を扱います。 CommonJSのモジュールとは、利用可能な特定のオブジェクトをそれに依存する任意のコードにエクスポートする再利用可能なJavaScriptコードです。AMDとは異なり、通常そのようなモジュールには関数ラッパーはありません。（そのため 例えば define はありません） // js/foo.js exports = function() { // モジュールの定義 return { add: function(a, b) { return a + b;
ES6 Collections: Using Map, Set, WeakMap, WeakSet — SitePoint
April 4, 2018ES6 Collections: Using Map, Set, WeakMap, WeakSet Most major programming languages have several types of data collections. Python has lists, tuples, and dictionaries. Java has lists, sets, maps, queues. Ruby has hashes and arrays. JavaScript, up until now, had only arrays. Objects and arrays were the workhorses of JavaScript. ES6 introduces four new data structures that will add power
How to Use Variables in CSS: CSS Custom Properties — SitePoint
CSS Variables (officially known as custom properties) are user defined values that can be set once and used many times throughout your codebase. They make it easier to manage colors, fonts, size, and animation values, and ensure consistency across web applications. For example, you can set a brand color as a CSS property ( --primarycolor: #7232FA) and use this value in any components or style that
hsl()とcalc()、そしてCustom Propertiesを使った色の生成
CSSでの色については単純な変数だけでは少し足らない。それはCustom Propertiesがあったとしても同じで、論理的に操作したいという欲求があるからだ。少し明るくしたいとか、ここはビビットにとか、補色から30度近づけたい(Triad)とか、計算できるものを計算で生成できると良いわけだ。そこで明るさや鮮やかさをベースに色を定義できるhsl()関数とcalc()関数を組み合わせ、さらにそれをCustom Propertiesを通して合成することで色を生成するというアイディアを考えた。既にChrome 54やSafari 10では実現可能だ。 Demo: Generating Colors hsl()そのものを計算することはできないので、色相・彩度・明度をそれぞれ定義し、それを計算するという方針になる。最終的にCustom Propertiesを駆使してhsl()に合成している(本当はル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quiz: How well do you know CSS?
Powerfully React forms state manager - react drip form
What is last_sign_in_at used for in Devise?
Support for with_deleted option on associations · Issue #176 · rubysherpas/paranoia
Get Ready for Web Bluetooth! - Telerik Blogs