Google JavaScript Style Guide
ファイル名
- すべて小文字、拡張子は「.js」、区切り文字はアンダースコア。
命名
- functionNamesLikeThis
- variableNamesLikeThis
- ClassNamesLikeThis
- EnumNamesLikeThis
- methodNamesLikeThis
- SYMBOLIC_CONSTANTS_LIKE_THIS
命名その他
- Privateのプロパティ、変数、メソッドには、末尾にアンダースコア(Protectedの場合はアンダースコアなし)。
- オプション引数には、先頭に「opt_」。
- getter→「getFoo()」、setter→「setFoo(value)」(booleanのgetterの場合「isFoo()」の可)。
{}
処理系によってセミコロンが暗黙で挿入されるのを防ぐために、開きカッコの前で改行しない。
if () {
// ...
} else {
// ...
}
整列
プロパティを整列させると問題を引き起こす場合があるので、整列はさせない。
以下はNG。
WRONG_Object.prototype = {
a : 0,
b : 1,
lengthyName: 2
};
2項/3項演算子
暗黙のセミコロンの問題の発生をさけるため、改行を入れる場合は、演算子は先行する行へ。
var z = a ?
moreComplicatedB :
moreComplicatedC;
クオート
ダブルクオートよりシングルクオート(HTMLな文字列を扱うときに便利)。
var msg = 'なんらかの HTML';
コメント
JSDocを使用。
→jsdoc-toolkit - A documentation generator for JavaScript. - Google Project Hosting
トップレベル/ファイルレベルコメント
// Copyright 2009 Google Inc. All Rights Reserved.
/**
* @fileoverview ファイルの説明, 使用方法や
* 依存関係の情報など.
* @author user@google.com (Firstname Lastname)
*/
クラスコメント
/**
* なんだか楽しいクラス.
* @param {string} arg1 An argument that makes this more interesting.
* @param {Array.<number>} arg2 List of numbers to be processed.
* @constructor
* @extends {goog.Disposable}
*/
project.MyClass = function(arg1, arg2) {
// ...
};
goog.inherits(project.MyClass, goog.Disposable);
メソッド/関数コメント
/**
* テキストをなにか全く別のテキストに変換する
* @param {string} arg1 An argument that makes this more interesting.
* @return {string} Some return value.
*/
project.MyClass.prototype.someMethod = function(arg1) {
// ...
};
/**
* MyClass のインスタンスを処理して何かを返す関数
* @param {project.MyClass} obj Instance of MyClass which leads to a long
* comment that needs to be wrapped to two lines.
* @return {boolean} Whether something occured.
*/
function PR_someMethod(obj) {
// ...
}
プロパティコメント
/**
* 1 pane ごとの最大数.
* @type {number}
*/
project.MyClass.prototype.someProperty = 4;
基本
真偽値
以下はfalse
null
undefined
'' //からの文字列
0 //数値
以下はtrue
'0' //文字列
[] //空の配列
{} //空のオブジェクト
演算子
==
>
<
!=
&&
||
i > 0 ? x = "正" : x = "負"
if
if(){
}else if(){
}else{
}
ループ
//0から9まで
for(i = 0; i < 10; i ++){
}
//配列
for(rec in myList){
}
//ループから抜ける
break;
//続ける
continue;
while(i > 10){
}
ノードリストのループの場合、
//以下よりも、
var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
doSomething(paragraphs[i]);
}
//以下の方がベター
var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
doSomething(paragraph);
}
//childNodesをたどる場合は、firstChildやnextSiblingプロパティを使う
var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
doSomething(child);
}
関数/サブルーチン
//function文
funtion test(aa,bb){
return true;
}
//関数リテラル
var test = function (para) {
return true;
}
//Functionコンストラクタ関数
var test = new Function(para1, para2, ..., 処理);
変数宣言
//varでの宣言はブロック内ではなく、関数全体でローカル(varを省略するとグローバル)
var i;
var test1, test2;
var message = "Hello";
var i= 0, j = 1, k = 5;
var b = a;
var list = [1, 2, 3];
var a = {x:1, y;3}
var list = [[1, 2], [10, 20], {x:1, y:3}];
数値
//足す引く
var num = 5;
num ++;
num --;
//数値にする(10進数へ)('130px'→130)
parseInt(_str, 10);
//切り捨て(1.3→1 2.5→2)
Math.floor(num)
//切り上げ(1.3→2 2.5→3)
Math.ceil(num)
//ランダム(0より大きく1より小さい小数を返す)
Math.random()
文字
//つなげる
var str = "あいう";
str += "えお";
//2文字目
str.charAt(1)
//4〜8文字
str.slice(3, 7);
str.substring(3, 7);
配列
//配列
var myList = new Array();
var myList = new Array(1,4,9);
myList[0] = 1;
myList[0] = 5;
myList[0] = 9;
//2次元配列(それぞれに配列宣言が必要)
var myList[0] = new Array();
myList[0][1] = 23;
//長さ(要素数)
myList.length
//split(new Array()は必要ない)
myList = myText.split("/");
//join
str = myList.join("x");
//reverse
myList.reverse
//sort
myList.sort
//push/pop/shift/unshift/slice
myList.push('aaa');
配列への追加は、pushよりインデックス指定の方が高速。
var html = [];
for (var i; i < items.length; i ++) {
html[i] = itemHtml(items[i]);
}
連想配列
price["apple"] = 100;
price["banana"] = 150;
typeof
if(typeof _str == "string")
//文字列型
"string"
//数値型
"number"
//論理値型
"bookean"
//関数型
"function"
//未定義
"undefined"
//オブジェクト型
"object"
デバッグ
alert();
window.status();
マッチング
_str.match(/abc/);
_str.replace(/abc/, '123');
_str.replace(
/(\\d+?)\\-(\\d+?)/,
function(_match, _one, _two){
var newId = parseInt(_one) + 1;
return newId + '-' + _two;
}
);
フォーム
//何もしない
<a href="javascript:void()">クリック</a>
プロンプト
//OKで入力文字列、キャンセルでnull、無入力で''
n = prompt('入力してください', 'デフォルト');
if( confirm('よろしいですか') ){
OKクリックの処理
}else{
キャンセルクリックの処理
}
alert('違います')
タイマー
//5000ミリ秒後にxxxx()を実行(1秒＝1000ミリ秒)
timerid = setTimeout("xxxx()", 5000);
//クリア
clearTimeout(timerId);
イメージオブジェクト
var img = new Image(280, 140);
//イメージのロード
img.src = 'officek.jpg';
オブジェクト
//コンストラクタ
function Person(_age, _sex) {
this.age = _age;
this.sex = _sex;
//オブジェクトを返す
return this;
}
//クラスの作成
var yugo = new Person(31, 'male');
//プロパティの追加(宣言なしで追加可能)
yugo.eyeColor = 'black';
//連想配列の引数はすべてプロパティ
yugo['eyeColor'] = 'black';
function changeAge(_age) {
this.age = _age;
}
var yugo = new Person(31, 'male');
//メソッドの追加
yugo.chgAge = changeAge;
yugo.chgAge(100);
PersonクラスオブジェクトのPersonコンストラクタをnew演算子を用いて起動。
newは、メモリ上に場所を確保し、そのポインタを返す演算子。
yugoがPersonオブジェクトのインスタンス。
予約済みプロパティ
//そのオブジェクトを作成したコンストラクタ
constructor
//引数
arguments
//要素数
length
イベントハンドラ
//ロード
onLoad
//アンロード
onUnload
//フォーカス
onFocus
//フォーカスを外れた
onBlur
//変更された
onChange
//選択された
onSelect
//マウスボタン(onMouseDown→onMouseUp→onClick)
onMouseDown
onMouseUp
onClick
onDblClick
onmouseover
onmouseout
onmousemove
//down→up→press
onkeydown
onkeyup
onkeypress
onmove
onresize
onReset
onSubmit
document.getElementById("id")
obj.style.color = "#ff0000";
あれこれ
//select選択された項目のインデックス(0始まり)
document.form1.select1.selectedIndex
this.selectedIndex
//1秒後に実行
setTimeout(alert('hey!'), 1000);
オンラインツール
- Javascript keyCode checker tool(キーコード表示)
http://www.ryancooper.com/resources/keycode.asp