ホームお問い合わせプロフィール未経験→就職転職合格率年収の相場ブラック企業判別定時帰りする方法

初心者が知るべきJavaScriptの魅力はたった2つ!

2014年12月6日に投稿 → に更新 技術 アフィリエイトリンクを含みます

JavaScriptの魅力は2つあります。

  1. 構文の魅力
  2. 動作するプラットフォームの魅力

1の構文の魅力は、コードを短く書けるとか、分かりやすく書けるとか、簡単に書けるとか、柔軟な構造を作れる等の機能のことです。JavaScriptの場合、プロトタイプ型オブジェクト指向関数が第一級オブジェクトである等の構文的特徴があります。

2の動作するプラットフォームの魅力は、JavaScriptを動かせる実行環境の多さです。

JavaScriptは現在最も多くの実行環境を持つ言語と言っても過言ではありません。

JavaScriptは当初PCのブラウザ上で動く言語として作られましたが、その後、Windowsのマクロ実行環境であるWSH(Windows Scripting Host)等が出てきて、現在だとスマホブラウザで動くのはもちろんのこと、サーバーサイドでJavaScriptを動かすことが出来るNode.js、JavaScriptでスマホネイティブ開発の出来るPhoneGapやTitanium Mobileなどがあります。IoTの分野でも故人で手軽に扱えるマイコンボードArduinoでもJavaScriptが動かせます。

ここで挙げたのは一例であり、この他にもJavaScriptが動く環境はたくさんあります。

それでは、
1. 構文の魅力
2. 動作するプラットフォームの魅力
について、詳しく紹介します。

1. 構文の魅力

プロトタイプ型オブジェクト指向とは?

プロトタイプ型オブジェクト指向はJavaやRubyのようなクラス型オブジェクト指向とはオブジェクトのつくり方が異なります。

以下のサンプルコードではゲームのプレイヤーオブジェクトを作成しています。

//コンストラクタ関数
function Player(_id, _name) {
	this.id = _id;
	this.name = _name;
	this.exp = 0;
}
//コンストラクタ関数のプロトタイプにメンバ関数(Javaでいうメソッド)を追加
Player.prototype.attack = function() {
	alert("攻撃するお!");
};

// インスタンス化
var player1 = new Player(1025, "やまろう");
// メソッド呼び出し
player1.attack();
// メンバ変数(フィールド)の値変更
player1.exp += 10;

プロトタイプ型オブジェクト指向言語のすごい所は、実行時にオブジェクトのメンバーを追加できることです。
例えば、プレイヤーのヒットポイントを保存する必要があったら、あとからメンバ変数(フィールド、プロパティのようなもの)を実行時に追加することができます。

上記のコードの続きに以下のようなコードが書けます。

player1.hp = 100; //定義時には存在しなかったhpに値を設定
player1.mp = 140; //定義時には存在しなかったmpに値を設定

JavaやC#の場合、クラス定義時にメンバ変数(フィールド、プロパティ)は定義しなければいけませんが、JavaScriptの場合、オブジェクトをインスタンス化した後にプロパティを追加することができるんです。

関数が第一級オブジェクト

JavaScriptでは関数を変数に格納して受け渡すことができます。変数に格納できるものを第一級オブジェクトと言います。関数が受け取った変数に格納された関数を実行することを高階関数と言います。

「意味わからん?」って思いました?コード例を見てみましょう。

var func1 = function() {
	console.log("func1だお!");
}

function executeFuctionWithBeginEndLog(func) {
	console.log(func.name + "を実行します");
	func();
	console.log(func.name + "を実行しました");
}
executeFuctionWithBeginEndLog(func1);

実行結果は、
func1を実行します。
func1だお!
func1を実行しました。
とコンソール出力されます。

同じような処理の流れのコードが多くて、その一部だけを個別のロジックにしたい場合などには高階関数を使うとうまくいきます。

高階関数をサポートしていないオブジェクト指向言語の場合、同じことをするのに、インターフェースを実装したクラスを使ったStrategyパターンというやり方を使います。高階関数があれば、わざわざインターフェースを実装したクラスを作る必要がないので実装がかんたんです。

JavaでStrategyパターンを用いて同じことをしているコード例です。

interface Executable {
	void execute();
}
class Func1Strategy implements Executable {
	public void execute() {
		System.out.println("func1だお!");
	}
}
class Main {
	void executeFuctionWithBeginEndLog(Executable func) {
		System.out.println(func.toString()+ "を実行します");
		func.execute();
		System.out.println(func.toString() + "を実行しました");
	}
	public static void main(String[] args) {
	Executable func1 = new Func1Strategy();
		executeFuctionWithBeginEndLog(func1);
	}
}

JavaScriptで数行だったのが、Javaだとこれほど長くなってしまいます。っといってもJava8からはラムダ式、クロージャという高階関数の機能がサポートされたのでJavaScriptに近い書き方が出来るようになっています。

連想配列(ハッシュ)とオブジェクトが同じ

JavaScriptでは連想配列(ハッシュ)とオブジェクトは同じものです。
オブジェクトをハッシュのように操作することもできるし、ハッシュをオブジェクトのように操作することもできます。

//ハッシュの場合
var myHash = {
	id: 1250,
	name: "やまろう"
};
//ハッシュからキーの値を参照
alert(myHash["id"]);

//オブジェクトの場合
function MyObject(_id, _name) {
	this.id = _id;
	this.name = _name;
}

var myObj = new MyObject(1250, "やまろう");
//オブジェクトからプロパティの値を参照
alert(myObj.id);

//ハッシュからプロパティの値を参照
alert(myHash.id);
//オブジェクトからキーの値を参照
alert(myObj["id"]);

これは非常に便利で、RubyやC#等のコードを書いている時もJavaScriptを書いてる時のくせでハッシュをプロパティとして参照するコードを書いて文法エラーになることがよくあります。それくらい便利で素晴らしい記法だと思います。

2. 動作するプラットフォームの魅力

JavaScriptは多数のプラットフォームで動きますが、他の言語と比較してどうなのか検証してみましょう!

言語/Platform PC ブラウザ Webサーバ スマホネイティブ
JavaScript WSH上 全ブラウザ node.js等 PhoneGap, Titunium等
Java JVM × Tomcat等 Androidのみ
Ruby rubyインタプリタ上 × Passenger等 RubyMotion
C# .NET Framework上 × IIS等 WindowsPhone, UnityやMonoでiOSとAndroid

こうして比較してみると、JavaScriptだけ際立って多数プラットフォームで動くというわけでもないようです。が、JavaScriptだけがブラウザ上で動くという点は大きな魅力です。もちろんAltJSと言われるCoffeeScript、TypeScript、Dartなどのようなコンパイル(トランスパイル)するとJavaScriptのソースコードが出力される言語はありますが、直にブラウザ上で動く言語は今の所、JavaScriptだけなのでオンリーワンの魅力があることは間違いありません。

さぁJavaScriptを学ぼう!

そんなわけでJavaScriptを学ぶと多くのプラットフォームで動作するプログラムを作ることができます。

また、JavaScriptはプロトタイプ型オブジェクト指向言語という珍しいタイプの言語なので、他の言語では学べない手法が身に付きます。

なので、ぜひ学んでみることをおすすめします!