バージョン｜ECMAScriptの歴史

2015年6月に公開された ECMAScript 2015 で多くの機能が追加されました。
参考書などは、バージョンに注意して読むことをお勧めします。

参考リンク

npm, yarn

パッケージ管理ツールです。

参考リンク

yarnについては下記ページで取り上げています。
パッケージマネージャー「Yarn」の使い方

Webpack

複数のモジュールを1つのファイル( バンドル )にまとめてくれます。つまり、JS、CSS、画像などを一つのファイルにまとめることができます。

ローダー(バンドル生成前に個別ファイルごとに作用) や プラグイン(バンドル生成後に作用) を利用して、下記のような追加操作も設定することが可能です。

ES2015以降のコードをES5のコードに変換
TypeScriptをJavaScriptに変換

参考リンク

Babel

Node.js製のトランスパイラです。ブラウザがまだサポートしていない新しいESの機能を、ブラウザがサポートしている形式に変換してくれます。

参考リンク

https://babeljs.io/

https://babeljs.io/repl でどのように変換されるのか確認することができます。

ESLint

静的構文チェックツールです。

参考リンク

コーディング規約

JavaScript Standard Style

(英語) https://github.com/standard/standard
(英語) https://standardjs.com/#standardjs–the-rules
(日本語) https://www.webprofessional.jp/why-use-javascript-style-guide/

セミコロンは書かないというのが他のスタイルガイドと比較して、特徴的かと思います。

Airbnb JavaScript Style Guide

(英語) https://github.com/airbnb/javascript
(日本語) http://mitsuruog.github.io/javascript-style-guide/

MDN JavaScript Style Guide

(日本語) https://developer.mozilla.org/ja/docs/JavaScript_style_guide

Google JavaScript Style Guide

(日本語) http://cou929.nu/data/google_javascript_style_guide/

ドキュメンテーションコメント

ルールに沿ってコメントを書くことで、ソースの可読性が高まります。
例を示します。

/**
 * コンストラクタの説明
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
}
 
/**
 * メソッドの説明
 * @returns {string}
 */
Book.prototype.getTitle = function() {
}

JSDoc( http://usejsdoc.org/ )を利用すると、コメントから自動でAPI仕様書を生成することができます。