「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
Text FX is a jQuery plug-in to make your text feel good, look good and animate good.jQuery TextFX is your all in one plug-in for making your text feel good, look good, and animate good. Getting started is easy, all you need to do is download the plugin then include it in your project! Please install jquery.transit.js as well as TextFX uses CSS Transforms instead of jquery.animate() transitions. <s
jQueryTween - Lightest Tweening Engine for jQuery jQueryTween Welcome to jQueryTween - Lightest Tweening Engine for jQuery jQueryTween!! The Lightest Tweening Engine for jQuery This plugin is a bridge to tween.js and aims to drastically simplify your work. Each script does what it does best, for high performance hardware accelerated animations. Github Tween.js My Work Demo Developer Friendly Using
The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepi
概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指しているのだけど、コアドメインをTypeScriptで書いて、それをUI層からCoffeeScri
CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。 そこで役立つ便利なプラグインjQuery masonryをまとめてみました。 ちなみにMasonryとは、和訳すると「石造建築」。 レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな？ jQuery masonryの使い方 JSファイルをダウンロード まずはjQuery本体とjQuery masonry本体をDL。 jQuery jQuery masonry jsファイルを読み込み headタグ内に、ダウンロードしたJSファイルの読み込みます。 <script src="jquery.js"></script> <script src="jquery.masonry.min.js"></script> 続けて、/bodyの直前に下記jsを記述します。 <script>
「jQuery 2.x→jQuery 3.0」「jQuery 1.x→jQuery Compat 3.0」に。jQueryが新名称と新バージョンへ JavaScriptのライブラリとして人気のあるjQueryは現在、モダンブラウザのみサポートすることで、より小さく速く安定したjQuery 2.x系と、古いバージョンのWebブラウザを含む幅広いWebブラウザをサポートするjQuery 1.x系の2つが存在しています。 この2つのバージョン表記を、次のリリースから変更することが、jQueryのブログにポストされた記事「jQuery 3.0: The Next Generations」で発表されました。 バージョンは3.0に統一 現在のjQuery 1.9系とjQuery 2.0系は、前述のようにサポートするブラウザが異なるだけで、APIは基本的に互換性があります。 そこで、次のリリースからこの
フォーム関連 フォーム共通 フォームのオブジェクトを取得する id指定 View <%= form_for(@page) do |f| %> <%= f.text_field :title %> <% end %> CoffeeScript $ -> page_title = $('#page_title') class指定 View <%= form_for(@page) do |f| %> <%= f.text_field :title, class: "title" %> <% end %> CoffeeScript $ -> title = $('.title') name指定 View <%= form_for(@page) do |f| %> <%= f.text_field :title %> <% end %> CoffeeScript $ -> title = $('[n
前書き Railsを使いつつJSもそこそこ書きたい、という条件であればまず前提としてjQuery脳を捨てましょう。jQueryスタイルで考えるかぎり何をどうやっても破綻するのでJSを諦めるか保守性を諦めるかして覚悟を決めましょう。 捨てるのは「jQuery」ではなく「jQuery脳」です。jQueryでグローバルな領域に進出してメソッドチェインで狼藉を働いたり、いま現在目の前にあるHTMLだけを考えてDOM操作をしたり、$.onと$.triggerを使ったクロージャ内部へのGOTOなどを記憶から消しましょう。 可能な限りスコープを小さく保つのはプログラミングの基本原則といえます。その原則を思い出し、JSを軽く扱わず、一般的なプログラミングと同様に閉じられた関心事にのみ注力するようにしましょう。 RailsとJSと役割分担 Railsもviewとしてテンプレートエンジンの処理を持っていますが
はじめに 数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今1つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら手軽にWebGLコンテンツを作ることができます。 本記事では、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
