#Chromeのコンソールを使おう
Chromeのコンソールを用いると、どのページでもirbのような対話形式でJavaScriptのコマンドを実行することができます。
コンソールは、command + option + J (Windowsの場合はCtrl + Shift + J )
で立ち上げることができます。
#Hello worldと出力しよう
rubyでは以下のようにputsメソッドを使いました。
puts "Hello world"
javascriptでは以下のように記述します。
console.log("Hello world");
Rubyと比べてみると、メソッドの違いはもちろんのことですが末尾にセミコロンが付いていることがわかります。JavaScriptでは、一つの処理の終わりにセミコロンをつける慣習があります。(実際なくても問題なく動く場合がほとんどですが)
またRubyでは引数の括弧を省略することができますが、Javascriptでは省略することができません
#変数を使ってみよう
Rubyでは以下のように変数を定義することができました。
x = 1 # 定義
x = 5 # 代入
name = "onda"
array = [1, 2, "a"]
Javascriptでは以下のようになります。
var x = 1;
x = 5;
var name = "shizuka";
var array = [1, 2, "a"];
変数を定義するときは、varをつける必要があります。varを省略して変数宣言をした場合、関数内での宣言であっても、その変数はグローバル変数になってしまいます。混乱を防ぐためにも変数を定義する際はvarをつけるのが良い。
#関数を使ってみよう
Rubyでは以下のように関数を定義することができました。
def 関数名(引数)
処理内容
end
Javascriptでは以下のようになります。
function 関数名(引数) {
処理内容
}
関数の呼び出しも含めて見てみましょう。Rubyは以下のようです。
def greeting(name)
puts 'Hello ' + name
end
name = 'onda'
greeting(name)
Javascriptでは以下のようになります
function greeting(name) {
console.log('Hello ' + name);
}
var name = 'onda';
greeting(name);
関数の定義と呼び出しに関して、2つの間に大きな差はないことがわかります。
ただ、Rubyの場合では引数がない時にはメソッド名だけで定義と呼び出しができていたのに対し、JavaScriptでは、引数が無い場合も、以下のように空の括弧をつける必要があります。
function printHello() {
console.log("Hello");
}
printHello();
#オブジェクトを使ってみよう
Javascriptにはオブジェクトという、キーと値がセットになったものがあります。
これはRubyでいう、ハッシュと似ています。
Rubyでは以下のようにしてハッシュの定義と呼び出しを行います。
hash = {key1: "value1"}
hash[:key1] = "value1"
javascriptでは以下のようになります。
var hash = {key1: "value1"};
hash.key1 = "value1";
オブジェクトに関して、キーと値のセットのことをプロパティと呼びます。今回ではkey1といったキーがプロパティ名、それに対応するvalue1がプロパティの値、hashがオブジェクトになっています。また、"value1"を指す言葉として、「hashのkey1プロパティ」という呼び方をすることが多いです。
オブジェクトのプロパティにアクセスする時は、ピリオドを使って
**(オブジェクト).(プロパティ名)**とします。
また、JavascriptのオブジェクトがRubyのハッシュと異なる点は、プロパティに関数(メソッド)を持つことができるという点です。つまり数値や文字列と同様にプロパティに関数を持つことができ、引数として関数を渡すこともできるのです。
値の取得同様に、(オブジェクト).(メソッド名)で呼び出すことが出来ます。例えば、console.logは、consoleオブジェクトのlogプロパティのメソッドを呼び出していることを表します。