kdoc - JavaScript

  • 作成日：2006-09-05 15:03:11
  • 修正日：2013-08-07 13:02:20

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);

オンラインツール

↑ページトップへ

↑ページトップへ