HOME > Learning Place >  No.1 JavaScriptの基本と値、変数、データ型

No.1 JavaScriptの基本と値、変数、データ型

JavaScriptの基本

Sencha Ext JS、Sencha Touchのどちらを利用するにしても、そのプログラミング言語はJavaScriptになります。 JavaScript自体の歴史やバージョンの違いなどは、ここでは触れません。 しかしながら、最低限知っておかなければ、開発に支障がある事がいくつかあります。 特に、これからSencha Ext JS、Sencha Touchを初めて見たいけどJavaScriptは、まともに記述したことがない。という方も少なくないはずです。 様々な経緯から、言語として軽視されていたり、嫌われていたり、またはアプリケーション開発を行うために利用するものではないと思っている方も結構いるようです。

実行環境

まずは、どこでJavaScriptを実行させましょう？ 最終的には、HTMLにJavaScriptを読み込ませて、 実行させます。 しかし、現在ブラウザ付属の開発ツールを使うと、容易にJavaScirptを実行することができます。 ここでは、Chromeブラウザのデベロッパーツールを利用して、JavaScriptを実行してみましょう。

Windowsの場合

Ctrl + Shift + Jを押すとConsoleが表示されます

Console画面(Windows)

Mac OS Xの場合

Command + Alt + Jを押すとConsoleが表示されます

Console画面(mac)

Consoleを表示すると文字が入力できる状態になっており、この部分にJavaScriptのコードを記述しEnterで実行することが出来ます。

試しに下記のコードを記述して、Enterで実行してみましょう。

1

alert('HelloWorld!!')

上記のコードはJavaScriptに最初から用意されている、ブラウザのアラートを表示させるコードになります。こちらを実行すると下記のようなアラートが表示されます。（下記図はMacの場合です）

alert画面

このように最近のブラウザでは、HTMLにJavaScriptを読み込ませなくても実行することが出来る環境が既に用意されているため、JavaScriptを学習する際には是非有効活用してください。

また別の章で再度触れますが、このConsoleは表示中のWebサイトに記述されているJavaScriptコード内の関数を呼び出したり、変数にアクセスすることができる非常に便利なツールになっています。

大文字と小文字

プログラミング言語には、大文字・小文字を区別する言語、しない言語があります。
今回学ぶJavaScriptは、大文字小文字を区別する言語です。

たとえば以下のような文字列があるとします。

  • myName
  • Myname
  • mYname
  • myNAME

JavaScriptでは、これらの文字列はすべて違う文字列として認識されます。

さらに例を見ていきましょう。

下記では、変数の宣言しています。新しい変数を宣言する際は必ず先頭にvarを付けてから変数名を定義します。とは言いつつも、実際はvarを付けなくても変数の宣言は行えてしまいます。このvarを付けずに変数の定義を行った場合、その変数はグローバル変数というものになります。

こちらについても別の章で触れていきますが、グローバル変数を使用することは余り望ましくありません。
ですので、原則変数を宣言する際は先頭にvarを付けることを心がけましょう。

1
2

var myName = 'A';
myNAME = 'B'; // グローバル変数

話を戻して、大文字小文字の区別について行っていきます。 先ほど変数の定義を行っていましたが、下記のようにスペルが同じで大文字小文字がそれぞれ異なる変数を宣言し、最後にJavaScriptのalertを利用して、その変数の中身を表示してみましょう。

1
2
3
4
5
6

var myName = 'A';
var Myname = 'B';
var mYname = 'C';
var myNAME = 'D';
 
alert(mYname); // 変数の中身をアラートで表示させる

するとCという文字が表示されたと思います。 このようにJavaScriptでは同じ単語・スペルなどでも、大文字小文字が異なるだけで全く別物として扱われてしまう為、注意が必要です。

セミコロンとコメント

JavaScriptでは文末にセミコロンを付けるのが一般的です。一般的というのも、例えば1行のみのコードでは文末のセミコロンを省略してもエラーにはなりません。しかし、Sencha ExtJS・Touch共にですが、デバッグする際に、このセミコロンを省略したことにより予期せぬバグを生む可能性もある為、セミコロンは文末に付けるように日頃から心がけましょう。

ただ、下記のように、if文・for文・関数などのブロック要素と呼ばれるものについては文末にセミコロンは付けません。

1
2
3
4
5

var myName = 'xenophy';
 
function getName() {
    return 'test';
}

文末にセミコロンを付ける習慣をつけておくことにより、ケアレスミスや不毛なバグで時間を無駄に割くことも少なくなります。あと、JavaScriptはコードを圧縮することが出来ます。（例：Google Closure Compiler、SenchaCmdにも圧縮するためのコマンドがあります）

このコード圧縮を行う際に、コード内の余分なスペースや改行を取り除き長い1行のコードに圧縮してくれます。（実際は、他にも色々行ってくれていますが、ここでは深く触れません）
その際にセミコロンを付けていないと、1行に圧縮した際にコードの文末が判断できなくなりエラーが起きてコードが動かなくなるなどの問題もある為、セミコロンを文末に付けることは非常に重要になってきます。

予約語

JavaScriptで既に使用されている、ifやfunction、varなどのことを予約語といい、変数名や関数名に使用できない名称というものがあります。下記の一覧の他にも予約語は多数存在しています。

  • break
  • if
  • function
  • switch
  • class
    • classに関しては、今現在ではJavaScriptで使用されておりませんが今後使用される可能性があるものも予約語として登録されていますので、注意してください

さらに詳細な一覧については、下記リンクよりご参照ください。

予約語 – JavaScript | MDN

データ型の種類

プログラミング言語には様々なデータ型がありますが、JavaScriptには次のようなデータ型があります。

  • 数値型
  • 文字列型
  • 論理型
  • 関数型
  • オブジェクト型
  • 配列型
  • null
  • undefined
  • NaN
  • 日付型
  • Error

JavaScriptでは、変数にどんな型のデータでも格納することが出来てしまう為、開発者は常に変数の型が何なのかを意識することが重要になってきます。（数値だと思って演算を行っていたら実は文字列だったり･･･）
typeof演算子というものを利用することにより、その変数が何の型なのかをチェックすることが出来ます。

次のコードを1行ずつConsoleに入力して実行していって見ましょう

1
2
3
4

var test = 'test';
typeof test;
test = 100; // 最初に変数の宣言を行っているので、それ以降変数にアクセス出来ます
typeof test

このコードを実行すると分かるように、変数の中身が最初は文字列だったとしても処理の最中に数値になってしまうこともありうるのです。ここでは、最も基本的な数値と文字列について触れていきます。

数値

JavaScriptでは大きく分けて2種類の数値があります。

  • 整数
    • 10進数：先頭に0を付けない数字の連続
1

123
  • 16進数：先頭に0x（または0X）を付けた数字の連続
1

0x232323
  • 8進数：先頭に0を付けた数字の連続
1

0123
  • 浮動小数点（小数）
1

123.345

これらの数値に対して足し算、かけ算等の演算子も他の言語と同じように使用することが可能です。

  • 足し算：“+”
  • 掛け算：“*”
  • 割り算：“/”
  • 引き算：“-“
  • ビット演算：“&” または “|”

また他にもJavaScriptにはMathライブラリというものがあり、非常に多くの便利な機能が提供されています。

  • 絶対値を求めるabsメソッド
1

Math.abs(num)
  • サイン値を算出するsinメソッド
1

Math.sin(num)
  • 小数点を切り上げるceilメソッド
1

Math.ceil(num)

このほかにも様々なMathメソッドが用意されています。

文字列

JavaScriptにおける文字列は、0文字以上のシングル、ダブルコーテーションで囲まれたものを文字列として扱います。
0文字というのは、文字が何も入っていない空文字のことを指します。

  • “”
  • ‘HelloWorld!!’
  • “HelloWorld!!” // こっちはダブルコーテーション

この後触れていきますが、文字列内にシングル、またはダブルコーテーションを使用したい場合は、文字列全体をシングルコーテーションで括り、その中にダブルコーテーション（またはその逆）を入れることでエスケープする必要が無くなります。

また、文字列にも文字列結合や分割、置換などの便利なメソッドが用意されています。

エスケープシーケンス

文字列の中で、改行文字や復帰文字のような、バックスラッシュを含む文字は特別な意味を持ち、これをエスケープシーケンスと呼びます。

例えば、手前の文字列の説明部分で出てきた文字列内にシングルコーテーションを使用したい場合、文字列全体を括るのにシングルコーテーションを使用していると下記のように記述する必要があります。

1
2
3
4
5

var txt = 'This is a \'pen\' !!';
 
// エスケープを行わないと･･･
// シングルコーテーションを入れた部分で文字列が終わってしまいます
var txt = 'This is a 'pen' !!';　

そこで、手前の文字列の説明部分にあるようにシングル、ダブルコーテーションをそれぞれ組み合わせて使うことによってエスケープをせずに期待した文字列を定義することも出来ます。

1
2

var txt = "This is a 'pen' !!";
var txt = 'This is a "pen" !!';

\' 以外にも以下のようなエスケープがあります。

  • \'：シングルコーテーション
  • \r：キャリッジリターン
  • \n：改行
  • \t：タブ

ここで1点注意しなければいけないのですが、\n などの改行をHTML上に書いても改行はされずにそのまま表示されてしまいます。例としては、アラートなどで表示する文字列を改行させたい際などに使用します。

1
2

var txt = "Hello \n World!!";
alert(txt);

今回はここまでになります。
次回からは、文字列の基本操作についてもう少し詳細に触れていきたいと思います。

Learning Placeトップに戻る

PAGETOP