HTML5が普及して以来、Webプラットフォーム全体は大きく進歩し、JavaScriptを複雑なアプリケーションを作成できる言語と見なすようになりました。多くの新しいAPIが次々と登場し、ブラウザでこれらの技術をどのように適用するかについての記事も大量に出現しました。

スクリプト言語として、JavaScriptはもともとWebページの表現力を高める目的で作られましたが、現在ではJavaScriptは考えられる限りのあらゆる場所で使用されています。業界全体の技術力が向上するにつれて、JavaScriptはサーバー上で実行できるだけでなく、ネイティブのモバイルアプリケーションのコードにコンパイルすることもできます。今日のJavaScript開発者は、豊かなエコシステムの一員であり、数百種類のIDE、ツール、フレームワークの中から自由に選ぶことができます。選択肢やリソースがあまりにも多いため、どこから学び始めればよいのか分からなくなる開発者もいます。私は現代のJavaScript開発者が直面している状況について議論し、概説したいと思います。まず、JavaScriptの歴史を簡単に紹介し、その後、現在最も人気のあるフレームワーク、ツール、IDEを取り上げます。

歴史を簡単に振り返る

では、手短に旅に出ましょう。1995年に戻ります。当時、ブラウザの選択肢はNetscape NavigatorとInternet Explorer 1.0だけでした。ウェブサイトには迷惑な点滅テキストと多すぎるGIF画像があふれていました。ダイヤルアップ接続でリッチなコンテンツを含むページを読み込むには、最大でまる2分間待つ必要がありました。その後、これらの古いウェブサイトがクライアント側でコードを実行できるようにするWeb言語が登場しました。この年こそ、JavaScriptが誕生した年です。

20年前に作られたこれらのウェブサイトは、JavaScriptをあまり使用しておらず、もちろんこの言語の可能性を十分に引き出しているわけでもありませんでした。たまにポップアップダイアログで何かの情報を知らせるか、あるいは枠の中でスクロール文字でニュースを表示するか、クッキーでユーザー名を保存して、数ヶ月後に再訪問したときに名前を直接表示する程度でした。職業の世界にも、JavaScriptを主要な開発言語とする仕事は存在しませんでした。当時、仕事で実際にJavaScriptを書けたなら、それは本当に幸運なことでした。要するに、当時のウェブサイトによるJavaScriptの活用は、DOMでちょっとした小技を弄る程度だったのです。

今日、あなたは基本的にどこでもJavaScriptの姿を見ることができるようになりました。例えば、BootstrapReactJS、Angular、定番のjQuery、さらにはサーバーサイドで動作するNode.jsに至るまで、JavaScriptは最も重要で人気のあるWeb言語の1つになりました。

フレームワーク

JavaScriptは登場以来、最も大きく変わった点の1つが、その利用方法です。あのぎこちないdocument.GetElementByIdメソッドの呼び出しや、重厚なXmlHttpRequestオブジェクトの生成といった時代はもう過去のものになりました。代わりに、さまざまな支援ライブラリがこうした基本機能を抽象化し、JavaScriptを開発者にとってより使いやすくしました。これこそが、今日JavaScriptが至る所で見られるようになった主な理由の1つです。

jQuery

jQueryはJohn Resigによって2006年に発表され、豊富なツールセットを提供し、さまざまな分かりにくく謎めいたJavaScriptのコマンドやメソッドを抽象化・簡素化しました。このツールを示す最も簡単な方法は、コード例に勝るものはありません。

純粋なJavaScriptでAJAXリクエストを作成する：

function loadXMLDoc() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 ) {
           if(xmlhttp.status == 200){
               alert("success");
           }
           else if(xmlhttp.status == 400) {
              alert("error 400")
           }
           else {
               alert("something broke")
           }
        }
    }

    xmlhttp.open("GET", "test.html", true);
    xmlhttp.send();
}

出典: Stack Overflow

一方、jQueryを使用してAJAXリクエストを作成する：

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

jQueryは複雑なJavaScript関数を手軽に使いこなせるようにし、DOM操作はお茶の子さいさいになりました。結果として、jQueryは最初期に広く採用されたJavaScriptフレームワークの1つとなり、そのJavaScriptを抽象化する思想は、他のさまざまなフレームワーク構築の基盤となりました。

AngularJS

AngularJSは、ししばしば「Augular」とも呼ばれ、2009年に登場しました。これはGoogleによって作られたフレームワークで、シングルページアプリケーション（SPA）の作成を簡素化することを目的としています。jQueryと同様に、複雑な操作を再利用性の高いメソッドに抽象化することを目指しています。JavaScriptにモデル・ビュー・コントローラー（MVC）アーキテクチャを提供します。

ReactJS

ReactJSは、しばしば「React」とも呼ばれ、この分野に登場したばかりの新参者です。Facebookによって作られ、2013年に初めてリリースされました。FacebookはReactがSPAの問題を処理する上でAngularの代替となり得ると考えています。したがって、AngularとReactの2つのフレームワークが競合関係にあると考えるなら、それは正しい理解です。ただし、Angularと比較したReactの最大の違いは、より効率ので、より高性能かつ高速なライブラリであるということです。下の図は、React、Angular、Knockout（もう1つのライブラリで、この記事では取り上げません）、および純粋なJavaScriptを使用して、DOM内に1000項目のリストをレンダリングする際にそれぞれ必要となる時間を示しています。

出典: The Dapper Developer

アプリケーションのパフォーマンスを非常に重視するなら、Reactが正しい選択です。

JavaScript開発環境

効率的な開発には、IDEの使用が非常に重要です。IDEの正式名称は統合開発環境であり、開発者に一連のツールを提供するアプリケーションです。このようなツールの中で最も重要な部分は、通常、構文ハイライト、自動補完、キーボードショートカットを提供して、面倒な手作業を高速化する高機能テキストエディタです。

Sublime Text

Sublime Textは実際にはIDEではなく、軽量で非常に高速なプログラミング用テキストエディタであり、構文ハイライト機能と直感的なキーボードショートカットを提供します。それ自体がクロスプラットフォームであるため、PC環境でMacを使いたい（またはその逆の）開発者にとって理想のな選択肢です。Sublime Textのほぼすべての部分はカスタマイズ可能で、Git統合やリンティングなどのIDEに似た機能を追加する多数のプラグインも用意されています。JavaScript愛好家や初心者開発者にとっては素晴らしい選択肢です。本記事の公開時点で、Sublime Textのライセンスは1つ70ドルでした。

出典: Sublime Text

WebStorm

WebStormはJetBrainsチームによって開発されたスマートなIDEで、主にHTML、CSS、JavaScriptの開発に焦点を当てています。わずかなライセンス費用（本記事の公開時点では49ドル）で入手でき、経験豊富なJavaScriptエキスパートの間で広く認知され、事実上の標準と見なされています。それも当然で、内蔵のコード補完機能と検査ツールは他に類を見ないほど優れているからです。WebStormには豊富なJavaScriptデバッガも用意されており、KarmaテストランナーやJSDriverなどさまざまな人気のある単体テストフレームワークと統合されています。Node.jsをサポートするMochaにも対応しています。

WebStormの最も優れた機能の1つは、何と言ってもライブ編集（Live Edit）機能です。ChromeとWebStormの両方に特定のプラグインをインストールするだけで、開発者はコードを変更しながら、ブラウザ上で直接結果を確認できます。さらに、ライブ編集を設定して、ブラウザウィンドウ内で変更をハイライト表示することもでき、デバッグとコーディングの生産性を大幅に向上させます。

全体として、JavaScriptがあなたのフルタイムの仕事ならば、WebStormというIDEは非常に良い選択肢になり得ます。

出典: JetBrains

Brackets

Bracketsは、ビジュアルツールに特化したオープンソースの無料IDEです。BracketsはWebStormに似たライブ編集機能を提供し、コード変更の結果をブラウザウィンドウ上で直接確認できます。また、インライン編集もサポートしており、コーディング中に別のアプリケーションへ切り替えたりポップアップを使用したりすることなく、コードの結果を直接確認できます。Bracketsの最も興味深い機能の1つは「抽出（Extract）」と呼ばれるもので、PhotoshopのPSDファイルを解析して、フォント、色、サイズなどの情報を取得できます。この機能により、Bracketsはデザイン作業も同時に行うJavaScript開発者にとって非常に適しています。

（画像をクリックすると拡大します）

出典: Brackets

Atom

AtomはGitHubが公開したオープンソースの無料リッチテキストエディタで、非常に使いやすく、インストール後すぐに実行でき、設定ファイルを変更することなく「問題なく動作します」。Atomの最も興味深い点は、そのすべての側面をカスタマイズできることです（GitHubはこれを「自由にいじり回せる」と表現しています）。AtomはWebコア上に構築されているため、ユーザーは標準のなHTML、CSS、JavaScriptを書くことで外観をカスタマイズできます。Atomに別の背景やテキストフォントを設定したいですか？CSSを変更するだけです。また、Atom用に作成されたさまざまなテーマをダウンロードして適用することもできます。この柔軟性により、Atomはあなたの希望どおりに表示されます。JavaScript初心者の開発者やカスタマイズに熱心なユーザーにとって、Atomは優れたツールです。

（画像をクリックすると拡大します）

出典: Atom

ビルドと自動化ツール

現代のJavaScriptプロジェクトはますます複雑化し、変更される部分も増え続けています。これは言語や対応するツールが非効率だからではなく、現在作成されているWebアプリケーションの豊富さ、魅力のな体験、複雑さの直接のな結果です。大規模なプロジェクトで作業する場合、コードをチェックインするときや本番環境用にビルドするときなど、多くの反復的な作業を頻繁に行う必要があります。これらの作業には、結合、圧縮、LESSやSASSのCSSファイルのコンパイル、さらにはテストの実行などが含まれます。これらの作業を手動で行うのは、ストレスがたまるだけでなく効率も悪いです。より良い方法は、これらのタスクをサポートするビルドツールを使用して自動化することです。

バンドリングとミニフィケーション

あなたが書くほとんどのJavaScriptとCSSは、複数のWebページで共有されます。そのため、これらのコンテンツを個別の.jsファイルと.cssファイルに置き、Webページでこれらのファイルを参照することが一般的です。この方式の結果、ユーザーのブラウザはWebアプリケーションを完全に表示するために、これらのファイルを取得する（または少なくともファイルが変更されたかどうかを検証する）ために個別のHTTPリクエストを送信する必要があります。

HTTPリクエストのコストは非常に高いです。リクエスト自体のサイズに加えて、ネットワーク遅延、HTTPヘッダー、Cookieなどに対してもコストがかかります。結合と圧縮ツールの設計目的は、これらのリクエストによる影響を減らすか、完全に排除することです。

バンドリング

Webコードのパフォーマンスを改善するために開発者ができる最も簡単なことの1つは、コードを結合することです。結合プロセスでは、複数のJavaScriptファイルまたはCSSファイルが単一のJavaScriptファイルまたはCSSファイルに統合されます。これは、複数の個別のパノラマ写真をつなぎ合わせて、1つの連続した写真を完成させるような感覚です。JavaScriptファイルとCSSファイルを結合することで、HTTPリクエストのオーバーヘッドの大部分を排除できます。

ミニフィケーション

JavaScript開発者には、パフォーマンスを改善するもう1つの方法があります。それは、結合したばかりのコードを圧縮することです。圧縮プロセスは、機能を変えずにJavaScriptコードとCSSコードを可能な限り最小の形式に圧縮します。JavaScriptの場合、これは変数を意味のない単一文字にリネームし、すべての空白と書式文字を削除することを意味します。CSSの場合、ページのスタイルは変数名に依存するため、通常は書式文字と空白のみが削除されます。圧縮は各HTTPレスポンスのバイト数を減らすため、ネットワークパフォーマンスを大幅に向上させます。

圧縮されていないAJAX JavaScriptコード。上に示したコードと同じです：

$.ajax({
    url: "test.html",
    statusCode: {
        200: function() {
            alert("success");
        },
        400: function() {
            alert("error 400");
        }
    },
    error: function() {
        alert("something broke");
    }
});

同じコードを圧縮した後の形式：

$.ajax({url:"test.html",statusCode:{200:function() {alert("success");},
400:function(){alert("error 400");}},error:function(){alert("something broke");}});

圧縮後の出力を2行に分けたのは、記事内での読みやすさを考慮したためです。実際には、圧縮後の出力は通常1行だけです。

バンドリングとミニフィケーションのタイミング

通常、結合と圧縮のステップは本番環境でのみ実行されます。これは、ローカル環境や開発環境で、書式文字と行番号を含む元のコードをデバッグできるようにするためです。上に示したような圧縮コードのデバッグは、すべてのコードが1行に詰め込まれているため、非常に困難です。さらに、圧縮されたコードは完全に読めなくなり、デバッグを試みると役に立たず、非常にイライラさせられます。

ソースマップファイル

コード内の特定のバグが本番環境でのみ再現されることがあります。そのため、問題をデバッグしようとするとき、圧縮されたコードが問題になります。幸いなことに、JavaScriptはソースマップファイルをサポートしており、圧縮されたコードと元のコードの間で「マッピング」を行うことができます。これらのソースマップファイルは、圧縮段階で後述するビルドツールによって生成されます。JavaScriptデバッガはこれらのマップファイルを使用して、デバッグ用の明確で読みやすいコードを提供できます。マップファイルは実際のコードと一緒に公開することをお勧めします。そうすれば、機能に問題が発生したときにコードをデバッグできます。

リンティング

コードリンティングツールは、事前定義されたフォーマットルールに基づいて、コード内の一般的なエラーや問題をチェックします。これらのツールが報告するエラーは通常、次のようなものです：スペースの代わりにタブインデントを使用している、行末にセミコロンがない、if、for、whileステートメントを使用せずに中括弧を使用しているなど。ほとんどのIDEにはコードリンティングツールが組み込まれており、その他の一部のIDEではユーザーがリンティングプラグインを自分でインストールすることもできます。

最も人気のある2つのJavaScriptリンティングツールはJSHintとJSLintです。JSLintはDoug Crockfordによって開発されたリンティングフレームワークであり、JSHintはコミュニティによってJSLintからフォークされたものです。両者はコードフォーマット標準においてのみ若干の違いがあります。私の提案は、両方を試して、あなたのコードスタイルに最も適したものを選ぶことです。

自動化タスク：Grunt

その名前（いびきをかくという意味）とは異なり、Gruntは決して粗末なツールではなく、ユーザーが定義したさまざまなタスクを実行できる堅牢なコマンドラインビルドツールです。簡単な設定ファイルを設定するだけで、LESSやSASSファイルのコンパイル、特定のフォルダ内のすべてのJavaScriptファイルとCSSファイルのビルドと圧縮、さらにはリンティングツールやテストフレームワークの実行など、さまざまな作業をGruntに実行させることができます。また、GruntをGitフックとして実行するように設定して、ソース管理リポジトリにチェックインするときにコードを自動的に圧縮および結合することもできます。

Gruntはさまざまな名前付きターゲットをサポートしています。異なる環境で異なるコマンドを指定できるからです。たとえば、「dev」と「prod」をターゲットとして指定できます。これは、本番環境ではコードを結合して圧縮し、開発環境ではデバッグのためにこのステップを省略するなど、特定のシナリオで非常に便利です。

Gruntの非常に便利な機能の1つに「grunt watch」があります。これは、ディレクトリ内のファイルまたはファイルセットの変更を監視します。この機能はWebStormやSublime TextなどのIDEに統合できます。監視機能を使用すると、ファイルの変更に応じてイベントをトリガーできます。LESSやSASSのコンパイルはこの機能の実用のな使用例です。Gruntを設定してLESSやSASSファイルを監視し、ファイルが変更されたら即座にコンパイルし、生成されたファイルを開発環境で直接使用できます。また、各ファイルを変更した後にリンティングツールを自動的に実行するようにGruntを監視させることもできます。Grunt watchによるリアルタイムのタスク実行は、生産性を向上させる優れた方法です。

自動化タスク：Gulp

GruntとGulpはどちらもビルド自動化の問題を解決するためのツールであり、両者は直接の競合相手と言えます。両者の主な違いは、Gruntが設定（構成）に重点を置いているのに対し、Gulpはコードに重点を置いていることです。Gruntファイルでは宣言的なJSONを使用してビルドタスクを設定しますが、GulpファイルではJavaScript関数を作成して同じ機能を実現します。

次のGrunt設定ファイルは、SASSファイルに変更があった場合にCSSファイルをコンパイルして生成します：

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        cwd: "app/styles",
        src: "**/*.scss",
        dest: "../.tmp/styles",
        expand: true,
        ext: ".css"
      }]
    }
  },
  autoprefixer: {
    options: ["last 1 version"],
    dist: {
      files: [{
        expand: true,
        cwd: ".tmp/styles",
        src: "{,*/}*.css",
        dest: "dist/styles"
      }]
    }
  },
  watch: {
    styles: {
      files: ["app/styles/{,*/}*.scss"],
      tasks: ["sass:dist", "autoprefixer:dist"]
    }
  }
});
grunt.registerTask("default", ["styles", "watch"]);

出典: Grunt vs Gulp – Beyond the Numbers

次のGulp設定ファイルも、SASSファイルに変更があった場合にCSSファイルをコンパイルして生成します：

gulp.task("sass", function () {
  gulp.src("app/styles/**/*.scss")
    .pipe(sass())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest("dist/styles"));
});
gulp.task("default", function() {
  gulp.run("sass");
  gulp.watch("app/styles/**/*.scss", function() {
    gulp.run("sass");
  });
});

出典: Grunt vs Gulp – Beyond the Numbers

どちらでもお好みのものを自由に選ぶことをお勧めします。これらの2つのツールは、一般的にNode.jsのパッケージマネージャーを介してnpmダウンロードされます。

まとめ

JavaScriptは、インターネット初期の誕生以来、大きな進化を遂げてきました。現在では、インタラクティブなWebアプリケーションの重要な構成要素となっています。

開発者も1995年から現在に至るまで大きな変化を経験してきました。現在の開発者は、作業の効率と生産性を向上させるために、豊富で堅牢なフレームワーク、ツール、IDEを積極的に活用しています。

最初のモダンなJavaScriptアプリケーションの作成は、あなたが想像するよりも簡単かもしれません！IDEを選ぶだけで（初心者にはAtomをお勧めします）。そしてnpmとgruntをインストールしてください。その後どこかで行き詰まったら、Stack Overflowは非常に優れたリソースです。基礎を学ぶために少し時間を費やすだけで、すぐに開発を始め、最終的に最初のモダンなJavaScriptアプリケーションをリリースできるようになります。

リソース

チュートリアル：

• JavaScript チュートリアル

フレームワーク：

• jQuery
• AngularJS
• ReactJS

IDE：

• Sublime Text
• WebStorm
• Brackets
• Atom

コードリンティングツール：

• JSLint
• JSHint

ビルドと自動化ツール

• NPM
• Grunt
• Gulp

実用リソース

• Stack Overflow

出典：http://www.infoq.com/cn/articles/modern-javascript-toolbox