【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【JavaScript】jQueryより軽量なSuperAgentを使ってみよう

  • 2016.03.28
  • 2016.05.12
  • 技術
【JavaScript】jQueryより軽量なSuperAgentを使ってみよう

こんにちは、開発部のまつおかです。

今日は非同期処理のライブラリとして使用できる「SuperAgent」というものを紹介しようと思います。

SuperAgentってなに?

非同期処理に特化したJavaScriptライブラリです。

最近は、React.jsやVue.jsなどのフレームワークが使われることが増えてきてますよね。(※ここではReact.jsやVue.jsの説明は割愛します)

そのReactやVueでは基本的に直接DOM操作することは望まれていない、というのがあげられます。となると、普段よく使用するjQueryも非同期処理でしか使わなくなるということになってきます。

(非同期処理のためだけに、比較的サイズの大きいjQueryを読み込む事になるのかぁ・・・)
というような時に使えるのがSuperAgentになります。

前述の通り、「非同期処理に特化したライブラリ」ですのでその他余計な処理は一切ありません。ですのでサイズがjQueryに比べてグッと小さくなり、ほんの少しだけレンダリングの速度も短くなるということになるんでしょうね。

ほんの一例のみになりますが、jQueryでの記述方法と比較しながらSuperAgentでの記述方法を紹介していきます。

GET/POST通信

jQueryでもよく使われるであろうPOST通信の例です。

jQueryでの書き方(他の書き方もあります)

$.ajax({
  type: 'POST',
  url:  'hogeApi.php',
  data: {hoge: fuga}
}).done(function(res) {
  console.info(res);
  console.log('success');
}).fail(function() {
  console.error('error');
}).always(function() {
  console.log('complete');
});

SuperAgentでの書き方

var request = window.superagent;
request
  .post('hogeApi.php')
  .send({hoge: fuga})
  .end(function(err, res){
     if (res.ok) {
       console.info(res.body);
       console.log('success');
     } else {
       console.error('error');
     }
    console.log('complete');
  });

あまり大差ありませんね!
ちなみにGETの場合は、こうなります。

var request = window.superagent;
request
  .get('hogeApi.php')
  .query({hoge: fuga})
  .end(function(err, res){
     if (res.ok) {
       console.info(res.body);
       console.log('success');
     } else {
       console.error('error');
     }
    console.log('complete');
  });
終わりに

いかがでしょう。

多少記述方法に違いがありますが、感覚的には同じように書けてしまうのでそこまで学習コストも高くなさそうですね。

さらにjQueryより軽量だということで、「DOM操作にjQueryを使用しない」という前提があればこちらのライブラリを使うという選択肢も出てきます。

※ちなみに、SuperAgentはJSONPには対応していないようです。(superagent-jsonpというものがあるそうですが、、、)

以上、開発部まつおかでした!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+