JavaScript
jQuery

JavaScriptについて

2017.11.10
近いうちに自分のブログで投稿を移動させると思います。
よければのぞいてみてくださいm(_ _)m
https://blog.mm-kun.com

JavaScriptについて調べた内容をまとめた備忘録です。
もし、誤った内容があればご指摘をお願いしますm(_ _)m

◯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() {
    // ...
})();

全体を(function(){...})();で囲みます。
これでvarがグローバルを汚染しないようになります。

(function() {
    "use strict";

    // ...
})();

"use strict";を宣言しておきます。

補足
Strict Modeというモードが有効になり、簡単に言うと「変なコード/危ういコード」を書けなくします。

注意
:他の「非 Strict Mode」なコードと連結するような場合は、問題が出るかもしれません。

IE10 以下を切る場合の JavaScript チェックリスト:Strict Modeについて

(function(global) {
    "use strict";

    // ...
})((this || 0).self || global);

ブラウザでも Web Worker でも node.js でも使えるような書き方でグローバルオブジェクトを取得します。

このidiomで、ブラウザであれば window, Web Workers であれば WorkerGlobalScope, node であれば global を取得出来ます。
WebModule に使われている Idiom(トリック) について解説

var isBrowser = "document" in global;
var isWebWorkers = "WorkerLocation" in global;
var isNode = "process" in global; 

実行環境を特定したい場合は、次のidiomを使います。

if ("process" in global) {
   module.exports = YourModule;
}

CommonJS スタイルでの require に対応するため、module.exports にモジュールをエクスポートします。
最近では node.js だけではなく、ブラウザでも browserify や webpack を利用して require を使えるため、ブラウザだけの対応でもエクスポートを行ないます。

CommonJS スタイルでない通常の <script> 読み出しに対応する為、global オブジェクトに Module を突っ込みます。

global["YourModule"] = YourModule;

◯JavaScriptのコーディング規約

参考サイト

変数宣言

  • グローバル空間に定義されてしまうのでvarで宣言する
var hoge;

演算子は厳密比較を行う(==!= は使うな)

  • 厳密比較を使うと良い
// 悪
' ' == 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の次世代規格ということ