JavaScriptの礼儀正しいソースコードとは?

2017年11月10日システムJavaScript,プログラミング初心者

JavaScriptについて
JavaScriptについて

どうも、UT(@ut_1029)です。

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の次世代規格ということ

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2017年11月10日システムJavaScript,プログラミング初心者

Posted by UT