(C言語がわかる人向け)Javascriptのクイック講座

主にC系の言語と比較しながら言語の仕様について紹介します。

型の数が少ない

C言語と違い、型の数が非常に少ないです。基本的に抑えるべき型は以下の通り。

• Number 数値型(intやdouble等の区別はなし)
• String 文字列型
• Boolean 理論値型
• 配列 (Cと同じ)
• 連想配列 (これがCにはない特殊な配列)
• オブジェクト型 (非常に特殊)

基本的な型

大きく分けるとこの通り。数値型には整数や浮動小数点数などの区別がないので、数字は数字。小数点も考慮されると覚えればOKです。
文字列型に関しては、文字型が存在しません。これも文字列は文字列だ！で覚えましょう。
理論値に関してはCと同じような感じです。ですが、1ならtrueのような使い方はJavascriptではできないので注意しましょう。
配列に関してはCと全く同じです。ただあくまで配列であり、Cのポインターのような使い方はできません。

特殊な型

Cにはない特殊な型の紹介です。勘違いしないよう、しっかり区別しましょう。

連想配列

これは名前付き配列とも呼ばれ、C#でいえばDictionary型のようなもの。
配列とありますが、構造体と考えればいいと思います。
ただ、プログラム実行中にメンバーを追加したりすることもできるので非常に厄介。
使い方は以下の通りです。

var hairetsu = {
    "name" : "Sharoron",
    "Age": 18,
    "Gender": "Unknown"
};
// 値の取得は2通り。どちらでも可能
var name = "";
name = hairetsu.name;
name = hairetsu["name"];
// 値の設定も同じような感じです。
hairetsu.name = "TEST";
hairetsu["name"] = "TEST";

配列の追加についてですが、これも非常に強引な方法で可能です。例はさっきのコードの続き

hairetsu.address = "Tokyo, Japan";
// 取得
var address = hairetsu.address

なお、メンバーの中にデータが入っていない場合はnull、そもそもメンバーが定義されていない場合はundefinedが返されます。詳しくは後述

オブジェクト型

これはJavascriptの使い方としては応用の分野です。
基本的に使われることはないのですが、大きなプロジェクトになるとむしろ使いまくるので必要であれば覚えてください。
Javascriptはfunctionを使い、メソッドを定義するのですが、prototypeというものを使うことでメンバーの定義が行えます。C++やC#で言うところのクラスを定義することができます。
例えば、以下のような仕様でクラスを定義してみます。

• クラス名は People
• プロパティとして、NameとGenderを定義する
• メソッドとして、ChangeGenderを定義する

これをJavascriptコードで定義すると以下の通りになります。

// コントラスタ
function People() {
    // プロパティの定義
    this.Name = "UNKNOWN";
    this.Gender = "UNKNOWN";
}
// メソッドの定義
People.prototype.ChangeGender = function() {
    if (this.Gender == "male")
        this.Gender = "female";
    else if (this.Gender == "female")
        this.Gender = "male";
}

そして、このコードを使う時はこのようになります。

var hoge = new People();
hoge.Name = "HogeHoge";
hoge.Gender = "male";
console.log(hoge.Gender);
// 出力: male
hoge.ChangeGender();
console.log(hoge.Gender);
// 出力: felame

使い方はC系の言語とほぼ同じような感じで使えます。

コードの仕様

次にコードの記述の仕様について紹介します。

セミコロンは必要なし

セミコロンがなくても、その行だけで完結した命令を書く場合に限り必要ありません。
もちろんセミコロンは可読性のためにも書くべきです。

// 問題なし
console.log("Hello, World!")
// 問題なし
console.log(
    "Hello, World!");
// これはダメ(1行で完結する命令ではないのにセミコロンがないため)
console.log(
    "Hello, World!")

 グローバル空間に命令を直接書ける

普通はメソッドの中に命令を書くのですが、Javascriptはその必要がありません。
ソースコードの頭からいきなり

console.log("Hello, World!");

と書いても動作します。
なお、一般的なのかどうかはわかりませんが、一番最初に実行したいコードを以下のように書く人を多く見かけます。

(function(){
    // 一番最初に動作させたいコード
})();

ただ一番最初に実行させるコードをわかりやすく区別するためにこうしてるのかなと。
別にこういう書き方をしたからって動作は変わらないです。
また、jQueryというライブラリを使っている場合はこのようなコードを書くのが一般的です。

$(function() {
    // 一番最初に実行させたいコード
});

これは jQueryが読み込まれ、HTMLの要素(DOMと言います)が完全に読み込まれた後に実行中させることができます。
普通は、ページが完全に読み込まれてないのにJavascriptソースコードが読み込まれた場合は、ページが完全に読み込まれていないのにもかかわらずJavascriptコードが実行されてしまいます。
これでは要素を扱うメソッドが失敗してしまうので、jQueryではこのような書き方をするように推奨しているのです。

扱えるのはそのページ内で完結する命令のみ

例外もありますが、そのページ内で完結する命令のみ呼び出すことができます。
つまり、他のページを読み込ませ、そのページで命令を実行させるようなことは普通できません。(自分のサイトのページならやり方次第ではできる)
また、ファイル操作とかもできません。データは基本的にCookieと呼ばれるストレージに保存するのとしかできず、扱えるデータも非常に少ないです。

覚えるべき命令

Javascriptでよく使われる命令一覧です。

文字列操作系

• 全てのデータ型.toString()
  文字列に変換する
• 文字列型.substr(開始位置, [抜き出す長さ])
  文字列を抜き出す。
• 文字列型.replace(置き換える文字列, 置き換え後の文字列)
  文字列を置き換える。正規表現も使用可能

ここで注意していただきたいのが正規表現について。
置き換える文字列が決まった文字なら、””でくくって指定する。
ただし、ここに正規表現を指定する際は、//でくくって指定する必要あり。
例えばこういう感じの使い方になる。

str.replace(/Xmas/, "Christmas")

 数値系

計算関係はMathクラスにいろいろあるので触ると面白いかも。よく使うのを抜粋しておく

• Math.floor(数値)
  切り捨てる
• Math.round(数値型)
  四捨五入
• Math.ceil(数値)
  切り上げ
• Math.abs(数値)
  絶対値を求める
• Math.sin cos tan(数値)
  まとめて紹介。三角関数

C#とか使っている人ならそのまま扱えるかも。なおメソッドの先頭は小文字です。

変換系

むちゃくちゃよく使う。暗記必要

• parseInt(文字列)
  文字列から整数型の数値に変換
• parseFloat(文字列)
  文字列から浮動小数点数の数値に変換
• String(数値)
  数値から文字列に変換
• オブジェクト.toString()
  オブジェクト型から文字列に変換。String(*)を使うことはない。

parseIntってなんだ。数値は数値じゃないのか。って言われそうですが、ようは小数点以下を切り捨てるメソッドということです。
じゃあ浮動小数点数を整数にするのはどうするのかと言いますと、Math.floorとかで切り捨てればOKです。

タイマー関係

• setTimeout(メソッド, 時間ms)
  時間ms後にメソッドを呼び出す
• setInterval(メソッド, 間隔ms)
  間隔msごとにメソッドを呼び出す
• clearTimeout(ハンドル)
  setTimeoutを解除する
• clearInterval(ハンドル)
  setIntervalを解除する

タイマー関係のメソッドで、setした時の戻り値はタイマーのハンドルです。
解除する時に必要になるので、変数等に格納して大事にしておきましょう。
もちろん解除することがなければ保管する必要なし。

イベントについて

要素(コントロール)にイベントを設定する方法はいろいろありますが、基本的なのをざっと。
まず、HTML側で設定する方法

<input type="button" onclick="button_click(this)" />
<script>
    function button_click(sender) {
        // ..
    }
</script>

メソッドの設定方法はいくつかありますが、個人的にメジャーだと思う方法はこれ。
次にJavascriptから動的にイベントをバインドする方法

<input type="button" id="btn1" />
<script>
    btn1.addEventListener("click" button_click);
    function button_click() {
        alert("clicked!");
    }
</script>

あとはjQueryを使った方法。jQuery使ってるなあらaddEventListenerなんてまどろっこしいメソッドは使わない。
さっきのサンプルコードのHTMLタグ部分とbutton_clickメソッドはそのまま流用してください。

$("#btn1").bind("click", button_click);

と、このようにできます。ちなみに$(“#btn1”)はbtn1のjQuery用コントロールオブジェクトを取得する命令です。

グローバル変数について

これは書くソースコードにもよるのでなんとも言えないんですが、Javascriptではグローバル変数はたくさん存在します。
ただ、大規模なコードになるならやっぱり極力控えた方がいいです。
そのために、前項で紹介したクラスの作成です。
また、変数群を連想配列でまとめてしまうっていうのも大事なテクニックになります。

マルチスレッドについて

Javascriptではマルチスレッドを扱うことはできますが、公式の方法として使えるわけではありません。
使い方としてはタイマーを設定した時に、その設定したメソッドが非同期で呼び出されることを利用したものです。
だからと言って、確実にマルチスレッド化できる保証もなく(ブラウザや環境によるため)、基本的にはシングルスレッドだと思うべきです。

ページ遷移について

タイマー等設定していて、別のページに移動するときはタイマーは自動的に解除されます。
メモリーの破棄等は必要ないです。

メモリー管理について

メモリーは自動的に管理されます。
また、破棄がいちいち必要なぐらい高度なメソッドがそもそも存在しないので考える必要もないと思います。

ライブラリについて

最近のライブラリは非常に便利です。一番有名なのはjQueryかな。
Javascriptが扱える=jQueryも扱えるなんて認識にもなってきているレベルなので、しっかり覚えましょう

魔のInternet Explorerについて

世間ではクソブラウザとして名高いInternet Explorerです。独自規格が多いくせして、一般的な規格がまともに動作しないために糞と言われています。
ただシェアは落ちてきているのでもう気にする必要もないかも？
jQuery使っておけば、基本的に動作します。あとは世間に書いたコードを出す場合は一応チェックもしておきましょう。p