JavaScriptを利用する上で知っておきたい周辺知識について取り上げます。各周辺知識ごとに関連リンクも載せていますので参考にしてください。

バージョン｜ECMAScriptの歴史

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

参考リンク

• Wikipedia｜ECMAScript

• ES2015

  • Qiita | ES2015(ES6) 入門
  • Mozilla における ECMAScript 6 のサポート

• ES2016

  • Qiita | ES2016 / ES2017の最新動向を追ってみた
  • Mozilla における ECMAScript 7 のサポート

npm, yarn

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

参考リンク

• https://docs.npmjs.com/
• https://yarnpkg.com/ja/docs

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

Webpack

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

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

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

参考リンク

• https://webpack.github.io/
• Qiita | 【意訳】Webpackの混乱ポイント
• Qiita | webpack 4 入門

Babel

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

参考リンク

• https://babeljs.io/

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

ESLint

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

参考リンク

• https://eslint.org/docs/user-guide/
• Qiita | 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仕様書を生成することができます。

AltJS｜TypeScript

JavaScriptが持つ問題点を解決するために作られた JavaScriptの代替言語 です。

AltJSはいくつか存在しますが、Microsoftが開発した TypeScript が特に有名です。
TypeScriptはJavaScriptの スーパーセット でJavaScriptの構文をそのまま活用できます。

TypeScript では 静的型付け もできるので、大規模開発などで活躍します。

参考

• https://www.typescriptlang.org/index.html

https://www.typescriptlang.org/play/index.html でどのように変換されるのか確認することができます。

参考になるサイト

JavaScriptを利用する際、mozillaのリファレンスサイトが参考になります。
JavaScript関連の情報が豊富です。

• JavaScript関連
  • https://developer.mozilla.org/ja/docs/Web/JavaScript
• DOM関連[ブラウザオブジェクトなど]
  • https://developer.mozilla.org/ja/docs/DOM
• Web API インターフェイス
  • https://developer.mozilla.org/ja/docs/Web/API