JavaScriptの礼儀正しいソースコードとは？
JavaScriptでプログラムしていると乱雑なプログラミングをしてしまいメンテナンス性が低下しがちです。今回は礼儀正しいJavaScriptの書き方を紹介します。
JavaScriptでメンテナンス性が高い礼儀正しいソースコードの書き方が分かる。
もし、誤った内容がありましたらご指摘をお願いしますm(_ _)m
JavaScriptの礼儀正しいソースコード
サンプルコードを紹介
JavaScriptで礼儀正しいソースコードのサンプルを紹介します。
- JavaScriptの変数のスコープを理解して、グローバル汚染を防ぐ
- Strict Modeを有効にする
(function(global) {
"use strict;"
// Your Module
function YourModule() {
// ...
};
// Exports
if ("process" in global) {
module["exports"] = YourModule;
}
global["YourModule"] = YourModule;
})((this || 0).self || global);
変数のグルーバル汚染を防ぐ
(function(){
...
})();ソースコード全体もしくは機能単位に囲むことで var がグローバルを汚染しないようにします。
JavaScriptでは、関数中に書かない変数宣言はすべてグローバル変数として扱われます。なので、関数式の"(function() {});"で囲みグローバル汚染を防ぐようにしています。
Strict Modeを有効にする
"use strict";Strict Modeとは、JavaScriptのソースコードを厳密にエラーチェックを行うことが出来る仕組みです。つまりソースコードにおける潜在的バグやエラーを未然に抑えることができます。
グローバルオブジェクトを取得
(function(global) {
"use strict";
// ...
})((this || 0).self || global);イディオム(idiom)で “((this || 0).self || global)" としてグローバルオブジェクトを取得します。
- ブラウザ
- windowで取得
- Web Workers
- WorkerGlobalScopeで取得
- node
- globalで取得
イディオム(idiom)とは、プログラミングにおけるテクニックの1つです。ソースコードを短く処理速度が早いプログラミングを書くことが出来ます。ただプログラミング初心者にはわかりにくいコードとなり可読性が低くなります。
実行環境(ブラウザ、Webワーカー、ノード)は、以下のように特性することができます。
var isBrowser = "document" in global;
var isWebWorkers = "WorkerLocation" in global;
var isNode = "process" in global; 実行環境を特定したい場合は、次の idiom を使います。
if ("process" in global) {
module.exports = YourModule;
}global["YourModule"] = YourModule;CommonJS スタイルでの require に対応するため、module.exports にモジュールをエクスポートします。
最近では node.js だけではなく、ブラウザでも browserify や webpack を利用して require を使えるため、ブラウザだけの対応でもエクスポートを行ないます。
CommonJS スタイルでない通常の <script> 読み出しに対応する為、global オブジェクトに Module を突っ込みます。
コーディング規約
次に一般的なコーディング規約の中で、守っておくと礼儀正しくなる内容を紹介します。
変数宣言
var hoge;グローバル空間に定義されてしまうのでvarで宣言する
演算子は厳密比較を行う(== と != は使うな)
// 悪
' ' == 0 // false
0 == ' ' // true
0 == '0' // true
厳密比較を使うと良い
parseInt関数
// 良
parseInt("08", 10) // 8
// 悪
parseInt("16 hoge") // 16
parseInt("08") // 0
parseInt("09") // 0
第二引数で基数を与える
関数定義はfunction文ではなく代入文で実装
/*
* function文
*/
hoge(); // 実行できる
function hoge() {
alert("hoge");
}
hoge(); // 実行できる
/*
* 代入文
*/
hoge(); // hoge is not defined
var hoge = function () {
alert("hoge");
};
hoge(); // 実行できるが、上記のErrorで止まる
function文
1. コンパイル時に静的に定義されるため順序が前後しても良い
2. 文が完結するため、閉じる際にセミコロンが不要
代入文
1. prototypeで実装する時には必ず利用することになる。
2. 即時関数として利用可能なため、誤動作を防止するために閉じる際、セミコロンが必要
フレームワークを使う
フレームワークを使うことで、一定のルールでソースコードをプログラミングすることが出来ます。なので、可読性が高まりソースコードのメンテナンス性が高まります。
JavaScriptのフレームワークをいくつか紹介します。
AngularJS
- Google製のJavaScriptフレームワーク
Angular2
- AngularJSとAngular2には互換性はない
- 学習コストはかなり高い
- 言語が TypeScript や ES6 前提というアプローチは, 未来に向けては良いと思います。 ですが、ビルド環境やデベロッパーツールが成熟するまでは, 使っていく中で色々と躓くことも多いでしょう.
React
js 内に html, css を書いていくのはかなり違和感があります.
Vue.js
- 大規模なプロジェクトになると Vue.js のみで完結させるのは難しいです.
View に特化してるからというのもあるのですが routing やコンポーネント化には他のプラグイン(一応公式で色々ある)が必要になります.
Riot.js
備考
SPA（Single Page Application）
- 単一ページによるWebアプリケーション
- ページはハッシュの変更や DOM の操作によって切り替わる
- サーバとの通信は Ajax や WebSocket などで行う
CommonJS
1ファイル1モジュールとしてインタフェースや依存性を記述するモジュール管理
旧来のような<script>経由でのロードもとうに古くなっています。
今は CommonJS スタイルで、require を用いたモジュールのロードを行なうことがより良いとされています。
TypeScript / Babel
- ES6構文を含むJavaScriptをES5で動くように変換するトランスパイラのひとつ
Babel - 実際の開発ではgulpなどのタスクランナーでBabelの変換処理を自動化して利用します。
ES6
ESとはECMAScriptの略称で、JavaScriptと呼んでいる言語の正式な標準規格のこと
ES6は簡単に言うとJavaScriptの次世代規格ということ
1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト