バックエンドエンジニアのためのVue.js、React、Angular入門 - Qiita
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました（編集が困難になるほど容量圧迫してたので、それぞれで独立させています）。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
jQuery.whenのdone()にAjaxで取得したデータを加工して渡したい - かもメモ
$.when()で複数の非同期処理を行って、.done()で結果を受け取ってその後の処理をするのですが、特に非同期処理がAjaxの時、$.when()の.done()でAjaxで取得できた値を受け取って加工するのではなく、Ajax側で取得したデータを加工して$.when()のdone()に渡したい時のやりかたのメモ。 例 var foo = $.ajax({ url : "foo_API_URL", // {"text": "foo"} が返ってくるとする type : "GET", dataType : "json", data: data }).done(function(res) { var resText = res.text; // "foo" // ↓ 加工済みのデータを返したい return resText }); var bar = function() { return
jQuery.DeferredとかjQuery.whenの使い方について - 一から勉強させてください
今回はjQuery.Deferredとかそれに関連するjQuery.whenとかのことをざっくり書こうと思います。 まずざっくりとDeferredについて。 Deferredオブジェクトはunresolved, resolved, rejectedのいずれかの状態をもつオブジェクトです（デフォルト値はunresoleved）。 そして、 ・unresolved状態→後続の処理は実行されない。 ・resolved状態→resolvedになった時用の処理（要するにdone）が実行される。 ・rejected状態→rejectedになった時用の処理（要するにfail）が実行される。 といった具合に、状態に応じて後続の処理を管理してくれます（ちなみに地味に重要なんですが、一度状態が変わったDeferredオブジェクトはもう二度と別の状態には変わりません。役目終了です）。 これによって、実行の順番を
jQuery.when() で、複数の非同期処理を扱う ｜ Tips Note by TAM
jQuery で AJAXするのに Deferred が便利ですよねーという話。 今回は jQuery.when() についてです。 複数の非同期処理を扱うとき たとえば、 JSONデータA を AJAX で取得したい 別のデータB も AJAX で取得したい 両方の取得が終わったら、続く処理をしたい こういう処理を Deferred の仕組みを使わないで書くと、こんな感じになりますでしょうか。 var data_a, data_b; $.getJSON('a.json', function (data_a) { $.getJSON('b.json', function (data_b) { // 両方終わった時の処理 console.log(data_a, data_b); }); }); Deferred を使わないと、コールバックの中に次のコールバックを書いて…… といった書き方です
スクロールのイベントをIntersectionObserverで快適に実装する最新の軽量JavaScriptライブラリ -Scrollama
Intersection Observerを利用したWebページが増えてきました。 IntersectionObserversは、ターゲット要素がブラウザのビューポートと呼ばれるページの表示領域と重なる（または交差する「Intersection」）量を計算するもので、主要なブラウザに実装されています。 どんなことができるかというと、コンテンツのスクロールに応じてサイドバーをぴたっと配置したり、ヘルプや広告を表示したり、まだ表示されていないコンテンツや画像を先読みさせたりできます。これらを実装するには面倒なJavaScriptが必要でしたが、今では非常に簡単に実装できます。 IntersectionObserverを使用して、スクロールに応じたさまざまなイベントを実装する最新の軽量JavaScriptライブラリを紹介します。 Scrollama -GitHub Intersection Ob
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方法は面倒で非効率的でしたが、主要なブラウザに実装されているIntersectionObserver APIを使用すると、非常に簡単に取得することができます。 Intersection Observer comes to Firefox 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様にライセンスを得て翻訳しています。 「IntersectionObserver()」の基本的な
スワイプ処理を実装してみる
スマートフォン向けにスワイプ処理を実装する機会があったのでメモ。こちらの記事を参考にさせていただきました。 サンプルコード HTML <div id="wrap"> <div class="box"></div> </div> .boxをスワイプで動かすようにします。 CSS #wrap { position: relative; width: 100%; max-width: 318px; } .box { position: absolute; top: 0; left: 0; width: 600px; } 今回は.boxを横に移動させるので、スワイプした距離や方向に応じてleftの値を変更します。 JavaScript $(function() { // 移動する要素の親要素(スワイプ後の位置を確認するのに使用) var swWrap = $('#wrap'); // 移動する要素
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
Waypoints
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
Roulette.js Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。 画像を数字に変更すれば、ビンゴっぽいのも作れるかも。 みてもらうのが一番早いと思うので、サンプルをご覧ください。 → ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」サンプル シンプルでおしゃれな感じなので[START]で回転し始めます。[STOP]で少しずつスピードが落ちながら、回転が止まります。 ググっても日本語の解説がなかったので、ちょっと気合いれて使い方を解説しますね。 使い方 こちらのサイトをご覧ください。公式のデモページになってます。回転スピードを調節したり、止まった時にでる画像を指定したりと、いろいろ試すことができます。 http://demo.st-marron.info/roulette/sample/dem
jQuery.Ajax() の書き方まとめ - Corredor
【中古】 jQueryで作るAjaxアプリケーション ／沖林正紀【著】 【中古】afb ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > Javaショップ: ブックオフオンライン楽天市場店価格: 198円 すぐ書き方を忘れるので、よく使うかたまりを置いておく。 jQuery 1.4 系までは success・error・complete プロパティを使う。1.8 系以降は非推奨になっている。 $.ajax({ type: "GET", dataType: "html", url: "./content.html", success: function(response, textStatus, jqXHR) { // 成功時 }, error: function(jqXHR, textStatus, errorThrown) { // 失敗時
jQueryでAjaxを始めよう！ - Deferredを使った非同期処理の書き方
今回はjQueryのAjax関数を使った非同期通信処理をご紹介していきます。Ajaxを使うことでページ遷移をさせずにコンテンツを書き換えたり、他の処理を行いながらサーバとデータのやりとりを行うことができます。jQueryのajax関数はDeferredに対応しており、並列処理の記述が簡単にできたり、コードの汎用性が非常に高くなるメリットがあります。 AjaxとはAjaxとはjavascriptを用いて非同期で通信を行い、その結果に応じて処理を行う技術を指します。 Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。 e-words – Ajaxとは Ajaxを使用することで画面遷移をせずにHTMLを更新することが可能なので、ユーザビリ
jQueryのDeferredの基本的な使い方メモ - Qiita
new $.Deferred() で Deferred のオブジェクトを生成する。 非同期処理が完了した時点で、生成しておいた Deferred オブジェクトの resolve() メソッドを実行する。 Deferred オブジェクトの promise() メソッドを実行し、その戻り値（promise オブジェクト）の then() メソッドに非同期処理の後に実行したい処理を渡す。 then() はメソッドチェーンができるので、 var d = new $.Deferred(); async(function() { console.log('async'); d.resolve(); }); d.promise() .then(function() { console.log('hoge'); }) .then(function() { console.log('fuga'); });
setTimeoutはダサいぞ。JavaScript Promiseを使って処理を順番に実行しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
皆さん、JavaScriptで「アニメーションAを3秒かけて実行したあと、アニメーションBを実行」などと、順番に処理を実行したいとき、どのようにしていますか？ 以下のように setTimeout() を使って実現しているでしょうか？ function serialAnim () { // ...アニメーションAの処理 setTimeout(() => { // ...アニメーションBの処理 }, 3000) } うーん、ダサいですね。 それとも以下のようにコールバックを利用しているでしょうか？ animA(animB) function animA (callback) { // ...アニメーションAを実行した後に、callback(この例ではanimB)を実行する処理 } setTimeout() は、保守性に問題があることはもちろん、そもそもが「◯秒以降」に実行されるという関数なので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - specious/cloud9carousel: :cyclone: 3D-perspective carousel for jQuery / Zepto
doruby.jp
スワイプ対応の画像ポップアップを実装できるJavaScriptプラグイン「baguetteBox.js」。WordPressでの使い方。
GitHub - jasny/jquery.smartbanner: Smart Banner support for iOS 4/5 and Android
jQuery Smart Banner - Jasny · web development
無効なURLです
