フリーのエンジニアです。
出向先でクライアントサイドについて話す事がありましたので、記事にしました。
ES5に関する記事なので、古いブラウザ(ie11など)に対応することを想定してください。
メモした内容をそのまま貼り付けてます。わかりにくいかも。
#厳密等値演算子を使おう
==,!= はアンチパターン
#Promiseを使おう
ES5でもpolyfillを利用すれば、Promiseは使える
積極的に使う事
#クラスの書き方
コンストラクタはこう書く var MyClass = function() { ... };
メソッドはこう書く #MyClass.prototype.methodA = function() { ... };
#組み込みオブジェクト(Mathのようなオブジェクトを作りたい時)の書き方
モジュールパターンを使うとよい
#varをいくつも書かない
カンマで区切ろう
#varのスコープは関数スコープ
ブロックスコープはES5には無いよ。
なるべく、関数の先頭にvarを書く
#配列の初期化は[]
new Array()と書いてはいけない。オブジェクトの初期化は{}。new Object() と書いてはいけない。
#配列のループ処理は、foreach,reduce等を使う
for文は仕方なく使う感じ
#call,applyを使いこなすと便利 thisを固定できる
thisは動的に決まる
thisを正しく理解する事
#1モジュール1ファイルという決まりは無い
クラスのメソッドがたくさんある場合、機能別に別ファイルにしても構わない
#プログラムのエントリポイントは意識せよ
エントリポイントは1箇所にすべき
jQueryを使っているなら、
$(function() { });
これの呼び出しは1箇所にして、ここで全部初期化しましょう。
#グローバル変数はなるべく少なくしよう
サーバーが生成する変数は1つのオブジェクトで受け取ろう
#クライアントサイドMVCを意識してプログラミングしよう。
見通しが良くなります
悪い例 ビューに変数を埋め込む事
#同じ処理を2回以上書かない
当たり前の事ですが、できていない人が多すぎる。関数にしましょう。
#$(selector)の戻り値は配列ではない
配列ではありません。オブジェクトのような配列です。(object-like array)
#ES5でもデフォルト引数のようなことできる
function test(a) { a = a || 10 } // 引数が正の整数を期待している場合のサンプル
More than 3 years have passed since last update.
[ES5]多くのWebエンジニアができていないクライアントサイドの書き方(JavaScriptのアンチパターン等) ES5
Last updated at Posted at 2020-02-26
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme