Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。

お問い合わせ 資料請求 無料見積り

お電話でお気軽にお問い合わせくださいTel 03-6805-2904 営業時間 [平日]AM 9:30 - PM 6:30

モダンJavaScript

モダンJavaScriptについて

モダンJavaScriptといっても、言語的に変わったとかそういう話ではありません。現代風JavaScriptの書き方について学んでいきます。

Ext JSを利用した開発では、JavaScritp以外に先に学んだCSSの基本的な知識が必要です。CSSに関してもJavaScript同様、きちんとした基礎知識があるかないかで、JavaScriptのコードにも影響を及ぼしますので、JavaScriptに関する知識を一つ一つ確認していきながら、ご覧下さい。

JavaScript基礎確認

大文字と小文字の区別

JavaScriptは、大文字・小文字を区別して動作します。次のコードを見てください。

var foo = ‘A’;
var Foo = ‘B’;
var FOO = ‘C’;

alert(Foo);

最後にalertでメッセージを表示しています。このときに引数に渡している変数Fooの値は、「B」になります。他のfooもFOOも大文字・小文字が違うため別な変数として認識します。

セミコロン

通常、区切りにセミコロン(;)をつけますが、JavaScriptでは、文末にセミコロンを省略できます。しかし、セミコロンをつけないせいでデバッグが困難になる場合があります。

var foo = ‘A’
var Foo = ‘B’;

alert(Foo);

変数fooの定義している文末にセミコロンがありませんが、上記のコードは動作します。しかし、リスク回避のためにも、文末にはセミコロンをつける癖をつけましょう。

コメント

JavaScriptのコメントは、CやC++のようなコメントスタイルをサポートしています。

行コメント

// コメント行です。

ブロックコメント

/*
ブロックコメントです。
*/

ドキュメンテーションコメント

/**で始まるコメントは、JSDocを使えば、ドキュメンテーションコメントとして解析されます。

JSDocはJavaDocのような感覚で、JavaScriptのクラスを、下記のようなコメントにより定義することができ、コードとドキュメンテーションは同期することが出来ます。

/**
* サンプルメソッド
*
* @param {String} display (オプション) サンプル値
* @param {Integer} myVar (オプション) 他の値
* @return {String} ‘example’
*/
someExampleFunction : function(display, myVar){

return ‘example’;
}

参照:http://jsdoc.sourceforge.net/

予約語

以下の予約語は、JavaScriptにおける変数と関数名として予約語の使用を避けてください。

  • abstract
  • boolean
  • break
  • byte
  • case
  • catch
  • char
  • class
  • comment
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • double
  • else
  • enum
  • export
  • extends
  • false
  • final
  • finally
  • float
  • for
  • function
  • goto
  • if
  • implements
  • import
  • in
  • instanceof
  • int
  • interface
  • label
  • long
  • native
  • new
  • null
  • package
  • private
  • protected
  • public
  • return
  • short
  • static
  • super
  • switch
  • synchronized
  • this
  • throw
  • throws
  • transient
  • true
  • try
  • typeof
  • var
  • void
  • volatile
  • while
  • with

数値型

数値型は、次の値を扱うことのできる型です。

  • 整数
  • 16進数と8進数
  • 浮動小数点(小数)

“+”が足し算、”*”はかけ算、”/”は割り算、、”-”は引き算、”&”はビット演算です。

また、JavaScriptのMathライブラリには多くの役に立つメソッドがあります。

  • Math.abs(num)
  • Math.sin(num)
  • Math.ceil(num)

文字列

0文字以上のシングル、またはダブルコーテーションで囲まれた文字は、「文字列」として扱われます。

  • “”
  • ‘hoge’
  • “foo”
  • “This is a longer string”

エスケープシーケンス

文字列の中で、改行文字や復帰文字のように、バックスラッシュを含む文字は特別な意味を持ちます。

  • ¥’
  • ¥r
  • ¥n
  • ¥t
var myVar = ‘文字列¥n文字列’;
alert(myVar);

文字列の追加

文字列の追加は、非常に単純です。

var anotherString = ‘new’;
var newVariable = ‘Something ‘ + anotherString;

alert(newVariable);

数値型の値を加えるとき、自動的にストリングに変換されます。

var x = 12;
var newString = x + ‘ dozen eggs’;

alert(newString);

文字列と数値

文字列から数値を抽出ために、数値変換することができます。

  • parseInt
  • parseFloat
var x = ‘12′;
var y = ‘3′;

alert(x+y);

var xNum = parseInt(x);
var yNum = parseInt(y);

alert(xNum+yNum);