JavaScript用開発ツール
JavaScriptの開発で便利なツールの紹介です。最近ずいぶん手抜きになり紹介だけでのページです。
ここの内容もだいぶ古くなり、ツールの紹介としては役に立たなくなってきたのでちょっと更新しました。
Ajaxライブラリ(Ajaxに限ったわけではないけれど・・・)
ライブラリ | 概要 | Ajax |
---|---|---|
jQuery | とても軽くてわかりやすいライブラリ(主観)。数多く Plug-in が用意されているのでとても便利です。ユーザーインターフェースを強化するための UIライブラリも用意されています。 | $.ajax({ url: "ajax.html", type: "GET", success: function(req){ $("#id").html(req); } }); |
Axios | Promise ベースの非同期処理を操作するためのライブラリ。 | 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 Toolkit | コア(配列、文字列、DOM操作、XMLHttpRequestなど)、dijit(ユーザーインターフェース)に分かれたライブラリ | dojo.xhrGet({ url: "ajax.html", load: function(req){ dojo.byId("id").innerHTML = req; } }); |
Ext JS | グリッド、タブ、ウィンドウ、フォーム、ツールバーといった Webページで利用しそうなモジュールが用意されたライブラリ。サンプルもたくさん用意されておりドキュメントが充実している。商用版もあるぐらいだからかな・・・ | Ext.Ajax.request({ url: "ajax.html", success: function(req){ Ext.DomHelper.overwrite("id", req.responseText); } }); |
MochiKit | 非同期通信、DOM、文字列操作、エフェクト、など機能ごとに小さくまとまったライブラリ | |
MooTools | 文字、配列、イベント、HASH、DOM、エフェクト、Ajax、JSONとモジュールごとにまとめられたライブラリ | new Request({ url: "ajax.html", method: "get", onSuccess: function(req){ $("id").innerHTML = req; } }).send(); |
Prototype | 2015年9月以降、更新されなくなった。 とても有名なライブラリ。なんだその紹介は・・・。JavaScriptライブラリとして老舗のような存在のライブラリです。 |
new Ajax.Request( "ajax.html", { onSuccess: function(req){ $("id").innerHTML = req.responseText; } } ); |
script.aculo.us | 2010年12月以降、更新されなくなった。 アニメーションやドラッグアンドドロップ操作などユーザーインターフェースを強化するためは非常に多機能なライブラリ。Prototypeを基本的な部品のライブラリと利用しているため、Prototypeライブラリが必要。 |
|
Yahoo! User Interface Library | 2014年8月以降、更新されなくなった。 Yahoo!が公開しているライブラリ。基本的な部分からユーザーインターフェース、カレンダーや計算機やカルーセルといった widget風の部品まで揃ったライブラリ。ちょっと重いのが難点。Version 3.0では速くなるのかな? |
YAHOO.util.Connect.asyncRequest( "GET", "ajax.html", { success: function(req){ YAHOO.util.Dom.get("id").innerHTML = req.responseText; } } ); |
ほかにもたくさんあるけどこれぐらいで。。。最近は、Node.js といったサーバーサイドでJavaScriptを使うためのプラットフォームの利用や TypeScriptといった静的型付けとクラスベースオブジェクト指向を加えた JavaScriptのスーパーセットである言語の利用で、上記のようなツールはあまり使われなくなっていている。
デバッグ
昔は JavaScript のデバッグなんてしたくなかったけど、最近はとても便利なツールが揃っているのでデバッグがしやすくなりました。
プラグイン | URL | 概要 |
---|---|---|
Firebug | http://getfirebug.com/ | Firefox の Add-ons です。Firebugは、JavaScriptに限ったデバッグツールではなく、Web ページの CSS、HTML、JavaScript をリアルタイムに編集し効果を確かめることができます。javaScriptで利用している変数やオブジェクトのモニタリング、ステップ実行などデバッグ機能も充実しています。 |
CodeBurner | http://tools.sitepoint.com/codeburner/ | Firebugの Referenceパネルとして、SitePointが提供している HTMLリファレンス、CSSプロパティリファレンスなどを付加します。 |
Venkman JavaScript Debugger | http://www.mozilla.org/projects/venkman/ | Firefox の Add-ons です。Netscape版もあるけどまいいか。。JavaScriptのデバッグを行うのに便利なツールです。ステップ実行、ブレークポイント、変数のモニタリング、プロファイリングなどデバッガとしての機能が充実しています。 |
Drosera | http://webkit.org/blog/61/introducing-drosera/ | Safari(WebKitベースブラウザ)用の JavaScriptデバッガです。 |
Internet Explorer Developer Toolbar | http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en | Firebugに似た IE用のモジュール。JavaScriptのデバッグがこれでうまくできるかというと・・・・微妙 |
といった紹介をしていたのですが、もう Firebug は存在せず、それぞれのブラウザーがデバッグ・ツールを標準装備するようになりました。 JavaScript のデバッグ、HTMLの解析、CSSの動的置き換えなど便利な機能がブラウザに標準実装されています。
ブラウザ | ツール | 概要 |
---|---|---|
Firefox | The Firefox JavaScript Debugger | Firebug の後継で、JavaScript のデバッグ、HTMLの解析、CSSの動的置き換えなど、さまざまなユーティリティがブラウザに統合されている |
Chrome | Chrome DevTools | JavaScriptデバッガなど、Web開発・テストを支援するツール群 |
Edge | DevTools | マイクロソフトのJavaScriptコンソールなどのWeb開発者向けツール |
Safari | Safari Developer Menu | JavaScriptコンソールを含む開発者向けツール群 |
詳しい紹介や他のブラウザーについて、"Firebug Alternatives: 10 Best JavaScript Debugging Tools" に紹介されているので、 参考にしてみてください。(Thanx Sally from PCWDLD.com)
テストとバリデーション
ツール | URL | 概要 |
---|---|---|
ESLint | https://eslint.org/ | JavaScript のための静的検証ツール |
JSLint | https://www.jslint.com/ | Webベースの JavaScriptコードチェッカー |
JSHint | https://jshint.com/ | JavaScriptのエラーや潜在的な問題を検出するためのツール |
コードの最適化と最小化
ツール | URL | 概要 |
---|---|---|
JSMIN | https://www.crockford.com/jsmin.html | JavaScriptコード最小化ツール。 |
YUI Compressor | https://yui.github.io/yuicompressor/ | Yahoo!が公開しているJavaScriptコード最小化ツール。CSSファイルも最小化する機能がある。Javaで書かれている。 |
その他のライブラリ
今やたくさんありすぎて何を紹介すればいいのやら...
ツール名 | 用途 | 概要 |
---|---|---|
jQuery | Ajax、DOM操作、アニメーション、イベント処理 | 高速かつ軽量で豊富な機能を備えたJavaScriptライブラリ |
React | DOM操作 | ユーザーインターフェース構築のためのJavaScriptライブラリ。仮想DOMを構築して、ブラウザの表示DOMを効率的に更新するこで高速にレンダリングを行う。 |
D3.js | SVG | SVGを利用して、データを可視化(グラフなど)するライブラリ。 |
Lodash | ユーティリティー | 文字列、配列、オブジェクトなどを操作するライブラリ。 |
Anime.js | アニメーション | Webサイトに簡単にアニメーションを追加するライブラリ。 |
Cleave.js | 入力 | 入力フィールドを読みやすし、データ入力を向上させるライブラリ。 |
Moment.js | ユーティリティー | 日付操作ライブラリ |
Three.js | 3D | 3Dデザイン・ライブラリ。 |
Voca | ユーティリティー | 文字列操作ライブラリ。 |
このほかに、ライトボックス(PhotoSwipe, lightGallery, etc)、スライドショー(Slick, Glide, etc)、 ボタン・アクション、アニメーションなどを Webサイトに簡単に実装するライブラリーが数多く存在します。
効率よくサイトを構築するには Framework も大切
個人のサイトを構築するには、さほど気にする必要もないかもしれませんが、大きめのサイトを構築する場合、多くの開発者が携わることはあります。
そんな時に効率よく開発するために、コーディング方法や機能を全体的に統一させるためフレームワークを利用することが多々あります。フレームワークでよく使われているものをちょっとだけ紹介しておきます。
- Bootstrap: https://getbootstrap.com/
- Node.js: https://nodejs.org/
- Deno: https://deno.land/
- Angular: https://angular.io/
- Next.js: https://nextjs.org/
- Vue.js: https://vuejs.org/
- Nuxt.js: https://nuxtjs.org/
- Ember.js: https://emberjs.com/
- Webix: https://webix.com/