周辺知識(バージョン, webpack, babel, eslint)

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

バージョン|ECMAScriptの歴史

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

参考リンク

npm, yarn

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

参考リンク

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

Webpack

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

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

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

参考リンク

Babel

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

参考リンク

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

458-javascript-history-tool_babel.png

ESLint

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

参考リンク

コーディング規約

JavaScript Standard Style

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

Airbnb JavaScript Style Guide

MDN JavaScript Style Guide

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の構文をそのまま活用できます。

スーパーセット
上位互換ともいいます。JavaScriptの機能をすべて含んだ上で、より機能が拡張されているものがTypeScriptです。

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

参考

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

参考になるサイト

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

わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。