JavaScript Tips

Pocket

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

2つの配列を結合したい場合、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. トラックバックはまだありません。