2014-10-07

JavaScriptのコードにコメントを書く

コメントは、以下のような構文で表現できる。

コメント	概要
//	単一行コメント（「//」から行末までがコメント）
/* 〜 */	複数行コメント（「/」から「/」までがコメント）
/** 〜 */	ドキュメンテーションコメント

原則として単一行の//を優先して利用すべき。
/* 〜 */ は入れ子にできないので、/* 〜 */を含んでいるコードをさらに/* 〜 */でコメントアウトした場合、構文エラーの原因となる。また、「*/」は正規表現リテラルの中で発生する可能性もある。たとえば、次のコードは構文エラーになる。

/*
var reg = /[0-9]*/.matcj(str);
*/

2014-10-01

JavaScriptの基本文法を理解する

セミコロンは省略可能だが、省略すべきではない。文の末尾はセミコロンで終えるべき。

console.log(‘hoge');
console.log(‘foo')

たとえば、次のようなコードは正しく動作しない。

var hoge = function() {  }    // セミコロン省略　①
(function() {   })();　　　　　　　　　　　　　　 ②

結果は「undefied is not a function」となる。②を匿名関数（①）の引数と見なして実行した結果。

文は複数の行にまたがってもかまわない。
１つの文が長い場合には、意味ある単語（キーワード）の区切り目で改行を加えてもOK。

console
.
log
(
'hoge'
);

次はNG。

function foo(a, b) {
   return
   a * b;
}

foo関数はundefined(未定義値)を返す。これはセミコロンが自動的に補完されるので。

function foo(a, b) {
   return;
   a * b;
}

メモ
break、continue、throwなども注意
return命令と同じ理由で、次のような文についても、途中で改行しないほうがよい。

ラベル付きのbreak/coninue
throw
++、--演算子（後置）

2014-10-01

外部スクリプトをインポートする

HTML（レイアウト）とJavaScript（ロジック）を明確に分離するという意味で、JavaScriptを外部ファイルとして定義するべき。

<p id="foo">hoge</p>

<!--外部スクリプト-->
<script src="http://hoge.com/jQuery.js"></script>

<!--インラインスクリプト-->
<script type="text/javascript">
$(function() {
  $('#foo').css('background-color', '#fff');
});
</script>

src属性で、インポートすべき.jsファイルのパスを指定する。src属性を指定した場合、<script>要素の配下は無視されるので注意。（コメントの記述は可能）このため、外部スクリプトとインラインスクリプトを併用する場合には、それぞれ異なる<script>要素として表さなければいけない。

メモ
文字コードはUTF-8を推奨
.htmlファイル、.jsファイル、.cssファイルは、UTF-8が吉。UTF-8は国際化対応にも優れ、HTML5をはじめ、さまざまな技術で推奨。他の文字コードも利用することができるが、特にAjax通信などで外部データと連携する場合、思わぬ不具合の原因となる。特別な理由があったり、文字コードについて理解不足の場合、すべてのファイルをUTF-8にした方が安全。

2014-09-30

HTMLページにJavaScriptのコードを組み込む

JavaScriptのコードをHTMLページに組み込むには、<script>要素を利用する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>タイトル</title>
</head>
<body>
・・・ページ本文・・・
<script type="text/javascript">
console.log('Hoge');
</script>
</body>
</html>

type属性は、スクリプトの種類を表す。ただし、HTML5でのデフォルト値は「text/javascript」なので、省略可。

「メモ」
language属性
昔のコードでは「language="JavaScript"」のような指定をしているものもあるが、現在は非推奨の扱いとなっている。古いブラウザとの互換性のために、language属性とtype属性を併記するようなケースもあるが、現存するブラウザのほとんどはtype属性に対応しているので、あえてそのようにする意味はない。

<script>要素そのものは、<body>閉じタグの直前に記述するとGood。一般的なブラウザではスクリプトの読み込み＆実行が完了するまで、以降の描画をブロックする。そのため、巨大なスクリプトがページの最初（たとえば<head>要素の配下）にあることは、そのまま描画速度が劣化する一因ともなる。 <body>閉じタグの直前に<script>要素を記述することで、そのような遅延を解消できる。一般的に、JavaScriptによる処理はページの読み込みを完了してから行うため、末尾に記述することによる弊害もない（特殊な例外がある場合も、そのコードだけをページの先頭に記述するようにすると良い）。