JavaScriptについて

システムJavaScript

はじめに

仕事で今時なJavaScriptの書き方について調べた時にまとめた備忘録です。
もし、誤った内容がありましたらご指摘をお願いしますm(_ _)m

JavaScriptについて
JavaScriptについて

テンプレ

サンプルコード

(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 がグローバルを汚染しないようになります。

"use strict";

Strict Mode というモードが有効になり、簡単に言うと「変なコード/危ういコード」を書けなくします。
注意
他の「非 Strict Mode」なコードと連結するような場合は、問題が出るかもしれません。

http://qiita.com/Jxck_/items/fe8a1c49cac717e52ae3#js-%E7%B7%A8
(function(global) {
    "use strict";
    // ...
})((this || 0).self || global);

グローバルオブジェクトを取得します。
(ブラウザでも Web Worker でも node.js でも使えるような書き方で行う)
この idiom で、ブラウザであれば window, Web Workers であれば WorkerGlobalScope, node であれば global を取得出来ます。

https://github.com/uupaa/WebModule/wiki/WebModuleIdiom
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. 即時関数として利用可能なため、誤動作を防止するために閉じる際、セミコロンが必要

フレームワークについて

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

参考

参照サイト

コーディング規約

フレームワーク

参考サイト

システムJavaScript