JavaScriptを利用する上で知っておきたい周辺知識について取り上げます。各周辺知識ごとに関連リンクも載せていますので参考にしてください。
バージョン｜ECMAScriptの歴史
2015年6月に公開された ECMAScript 2015 で多くの機能が追加されました。
参考書などは、バージョンに注意して読むことをお勧めします。
参考リンク
-
ES2015
-
ES2016
npm, yarn
パッケージ管理ツールです。
参考リンク
yarnについては下記ページで取り上げています。
パッケージマネージャー「Yarn」の使い方
Webpack
複数のモジュールを1つのファイル( バンドル )にまとめてくれます。つまり、JS、CSS、画像などを一つのファイルにまとめることができます。
ローダー(バンドル生成前に個別ファイルごとに作用) や プラグイン(バンドル生成後に作用) を利用して、下記のような追加操作も設定することが可能です。
- ES2015以降のコードをES5のコードに変換
- TypeScriptをJavaScriptに変換
参考リンク
Babel
Node.js製のトランスパイラです。ブラウザがまだサポートしていない新しいESの機能を、ブラウザがサポートしている形式に変換してくれます。
参考リンク
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
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の構文をそのまま活用できます。
TypeScript では 静的型付け もできるので、大規模開発などで活躍します。
参考
https://www.typescriptlang.org/play/index.html でどのように変換されるのか確認することができます。
参考になるサイト
JavaScriptを利用する際、mozillaのリファレンスサイトが参考になります。
JavaScript関連の情報が豊富です。
- JavaScript関連
- DOM関連[ブラウザオブジェクトなど]
- Web API インターフェイス
