0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[ES5]多くのWebエンジニアができていないクライアントサイドの書き方(JavaScriptのアンチパターン等) ES5

Last updated at Posted at 2020-02-26

フリーのエンジニアです。
出向先でクライアントサイドについて話す事がありましたので、記事にしました。
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 } // 引数が正の整数を期待している場合のサンプル

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?