JavaScript用開発ツール

JavaScriptの開発で便利なツールの紹介です。最近ずいぶん手抜きになり紹介だけでのページです。

ここの内容もだいぶ古くなり、ツールの紹介としては役に立たなくなってきたのでちょっと更新しました。

Ajaxライブラリ(Ajaxに限ったわけではないけれど・・・)

$.ajax({
  url: "ajax.html",
  type: "GET",
  success: function(req){
    $("#id").html(req);
  }
});

axios.get('ajax.html')
.then((response) => {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
}).catch(() => {
  console.log('Failed');
}).then(() => {
  console.log('Complete!');
});

dojo.xhrGet({
  url: "ajax.html",
  load: function(req){
    dojo.byId("id").innerHTML = req;
  }
});

Ext.Ajax.request({
  url: "ajax.html",
  success: function(req){
    Ext.DomHelper.overwrite("id", req.responseText);
  }
});

new Request({
  url: "ajax.html",
  method: "get",
  onSuccess: function(req){
    $("id").innerHTML = req;
  }
}).send();

new Ajax.Request(
  "ajax.html", {
    onSuccess: function(req){
      $("id").innerHTML = req.responseText;
    }
  }
);

YAHOO.util.Connect.asyncRequest(
  "GET",
  "ajax.html", {
    success: function(req){
      YAHOO.util.Dom.get("id").innerHTML
          = req.responseText;
    }
  }
);

ほかにもたくさんあるけどこれぐらいで。。。最近は、Node.js といったサーバーサイドでJavaScriptを使うためのプラットフォームの利用や TypeScriptといった静的型付けとクラスベースオブジェクト指向を加えた JavaScriptのスーパーセットである言語の利用で、上記のようなツールはあまり使われなくなっていている。

デバッグ

昔は JavaScript のデバッグなんてしたくなかったけど、最近はとても便利なツールが揃っているのでデバッグがしやすくなりました。

といった紹介をしていたのですが、もう Firebug は存在せず、それぞれのブラウザーがデバッグ・ツールを標準装備するようになりました。 JavaScript のデバッグ、HTMLの解析、CSSの動的置き換えなど便利な機能がブラウザに標準実装されています。

詳しい紹介や他のブラウザーについて、"Firebug Alternatives: 10 Best JavaScript Debugging Tools" に紹介されているので、 参考にしてみてください。（Thanx Sally from PCWDLD.com）

テストとバリデーション

コードの最適化と最小化

その他のライブラリ

今やたくさんありすぎて何を紹介すればいいのやら...

このほかに、ライトボックス（PhotoSwipe, lightGallery, etc）、スライドショー（Slick, Glide, etc）、 ボタン・アクション、アニメーションなどを Webサイトに簡単に実装するライブラリーが数多く存在します。

効率よくサイトを構築するには Framework も大切

個人のサイトを構築するには、さほど気にする必要もないかもしれませんが、大きめのサイトを構築する場合、多くの開発者が携わることはあります。

そんな時に効率よく開発するために、コーディング方法や機能を全体的に統一させるためフレームワークを利用することが多々あります。フレームワークでよく使われているものをちょっとだけ紹介しておきます。

1. Bootstrap: https://getbootstrap.com/
2. Node.js: https://nodejs.org/
3. Deno: https://deno.land/
4. Angular: https://angular.io/
5. Next.js: https://nextjs.org/
6. Vue.js: https://vuejs.org/
7. Nuxt.js: https://nuxtjs.org/
8. Ember.js: https://emberjs.com/
9. Webix: https://webix.com/