JavaScript Tips

JavaScript 開発についての参考情報、Tipsをまとめました。

コーディング規約

・Google JavaScript Style Guide

・Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳

・他人にやさしいソースコードの書き方 コーディング規約 JavaScript編 | Web制作会社スタイル

・Airbnb JavaScript スタイルガイド | Javacript-style-guide by mitsuruog

・最近の案件でのJavaScript開発周辺について、書いてみる | be-hase.com

JavaScript開発ノウハウ

クライアント、サーバーサイド共通

・サバクラ両方で動く JavaScript の大規模開発を行うために

クライアントサイド

・ユーザーの体感速度を高めるためのJavaScriptチューニング（前編） | HTML5Experts.jp

・ユーザーの体感速度を高めるためのJavaScriptチューニング（後編） | HTML5Experts.jp

JavaScript学習資料

・社内研修「JavaScript基礎」の資料を公開します！ | mixi Engineers' Blog

はてな社の研修教材。よくまとまっているので、研修資料として流用できそう。

便利サイト

JavaScript のテストケースを共有できるサービスです。
スニペットを登録してパフォーマンスを比較することができます。

正規表現をテストできるサイト

デザインパターン

・JavaScriptアプリケーションのためのデザインパターン

jQuery

・『jQuery 最高の教科書』サンプルサイト

・高速で安全なjQueryを書くために今できること | Dress Cording

jQueryライブラリ

・websanova/jquery-url

・jQuery用のシンプルなURLパーサー『jquery-url』 | IDEA*IDEA

フォームのselect要素にいい感じのデザインを適用するjQueryのプラグイン
・Minimalect by groenroos

スクロール中に特定の要素を固定してくれるjQueryのプラグイン
・hcSticky – jQuery Floating Sticky Plugin | Some Web Log

・jQuery hcSticky/a>

AngularJS

・AngularJS コードの構造化 ｜ Developers.IO

JavaScript 逆引きメモ

JavaScriptで「あれしたい」というときに振り返る。

数値 Integer

・無題メモランダム: Javascriptで小数点以下X桁を四捨五入する

文字列 String

文字列の中に特定の文字列が含まれているかチェックする。

・String.indexOf – JavaScript | MDN

配列 Array

２つの配列を結合したい場合、Array.concat か Array.prototype.push.apply を使う。

・Array.prototype.concat – JavaScript | MDN

・JavaScript – 配列の連結(concat vs Array.prototype.push.apply) – Qiita [キータ]

配列の特定の要素を削除したい場合、Array.splice を使う。

・JavaScriptの配列の要素を削除する(delete演算子とspliceメソッド) – 山本隆の開発日誌

配列の要素のチェックするには、Array.indexOf を使う。

・Array.indexOf – JavaScript | MDN

function validateApiKey(api_key){
  var api_keys = API_KEYS;
 
  if(api_keys.indexOf(api_key) === -1){
    return false;
  }
  return true;
}

配列の中から特定の値を見つけたいだけなら Array.some() を使うと計算量を減らせる。

・Array.prototype.some() – JavaScript | MDN

Array.forEach ではなく Array.map を使うべきケース

Array.forEach を使った以下のコードは Array.map を使うほうが簡潔に書ける。

// Array.forEach を使った書き方
var resultArray = [];
array.forEach(function(e) {
  return resultArray.push(someFunction(e.arg1, e.arg2));
});
// Array.map を使った書き方
var resultArray = array.map(function(e) {
  return someFunction(e.arg1, e.arg2);
});

・Array.prototype.forEach() – JavaScript | MDN
・Array.prototype.map() – JavaScript | MDN

時刻 Date

UNIX timestamp を取得する（ミリ秒単位）

var timestampMsec = new Date().getTime();

UNIX timestamp を取得する（秒単位）

var timestamp =  parseInt(new Date().getTime() / 1000);

日付、時刻の整形には「moment.js」というライブラリがめちゃくちゃ便利！

・Moment.js | Parse, validate, manipulate, and display dates in javascript.

・[JavaScript] 日付や時刻をカンタンに扱えるライブラリ「moment.js」 | CodeNote.net

型チェック（比較）

・Javascript 型判定の方法とその処理速度について:humming bird

非同期処理を上手く使う

・Promiseが実装された – JS.next

RIL

・【翻訳】2015年に向けたJavaScriptアプリケーションアーキテクチャ PART 1 | POSTD

・ES6のテンプレート文字列

applyとcall

・applyとcallの使い方を丁寧に説明してみる – あと味

・Javascriptのcall/apply関数のプロっぽい使い方 〜 JSおくのほそ道 #014 – Qiita

  1. コメントはまだありません。

  1. トラックバックはまだありません。