学習[38]日目

本日の学習内容

javascriptに関して学習しました。

基礎で学んだRubyとの違いを比較しながら学習していこうと思います。

1. Ruby(以下、「rb」)で言うputsメソッドは？

Rubyでputsメソッドを利用すると以下のようになりますが、

.rb
puts 'abc'
=> abc

javascript(以下、js)ではどのような表現になるでしょうか。

以下がその結果です。

.js
console.log('abc');
=> abc　＃こちらに関してはhtml上の検証ツールのConsole画面に蹴る出力結果です。

上記のようにコンソールメソッドを使用します。

以降に記述していく内容もそうですが、「;」や「()」使われるところが、jsにおける特徴なのかなと個人的に感じました。

2. rbとの変数宣言及び関数定義の違い

rbにて関数や変数を定義する際には、以下のようになりましたが、

＃関数の定義
def say_name(name)
  puts name
end

#変数の定義
name = 'abc'

say_name(name)
=> abc

jsではどうでしょうか。同じように見ていきます。

＃関数の定義
function sayName(name){
 console.log(name);
}

#変数の定義
let name = 'abc';

sayName(name);
=> abc

 上から見ていくと関数の定義方法に関してはfunctionと言うメソッドを利用しており、defのようにendを必要とせず、代わりに{}が使用されいます。

このコードでは記載されていませんが、rbが引数が必要な時に()内に引数を用いるのに対してjsでは引数の有無に関わらず()を記載する必要があるそうです。

そして関数処理後の戻り値に関してはrbは式の最後の値が返ってきますが、jsではreturnを添えてあげないと何も値が返ってこない点が注意したいところです。

一方で、変数の定義においてはrbでシンプルに代入する形式が取られていたものが、jsではlet(書換可能)やconst(書換不可)とといった変数前に目印を添えてあげなければいけません。

3.条件分岐と繰り返し処理

rbでは条件分岐で主にif 、繰り返し処理ではwhileやforが使われていたものですが、

まず条件分岐に関してjsの記述を見てみます。

#変数の定義
let num = 7;

#条件分岐
if (num == 7) {
  console.log(num + 'は縁起の良い数字です');
} else if (num > 0 && num < 7) {
  console.log(num + 'は７より小さい数字です');
} else {
  console.log(num + 'は数字です');
}

ここではrbでのコードは記述しませんが、上から見ていくと変数の定義は先程と同様でifを使用する点はrbも同じです。

しかし、rbと違い条件を()で囲んでいる点と関数の定義と同様に{}で処理を囲んでいる点、複数条件分岐の際に使用するelsif(rbでは)がelse if (js)と省略しない点が異なります。

続いて繰り返し処理ですが、

rb
for i in 1..7  #1..7(1以上7以下)で1...7(1以上7未満)
 puts "#{i} years ago"
end

js
num = 1;
for (let i = 0; i < 7; i += 1) {
  console.log(num + 'years ago')
  num +=  1
}

rbではオブジェクトには配列や範囲オブジェクトを渡すのが一般的ですが、今回の場合は範囲オブジェクトで比較していきます。rbでは「i」に対して定義がなくても繰り返し処理する度に「i」の値が増加する一方でjsでは繰り返し処理する回数の値を変数として定義しており、式がやや記述が多くなっているように思います。

(他の記述方式があったら申し訳ありません)

4.配列とオブジェクト

個人的にrb学習初期にシンボルやハッシュと言った言葉で理解がごちゃごちゃになっていた配列やオブジェクトに関してですが、それぞれについて基本的に行う処理と一緒にまとめてていきたいと思います。

#配列の定義　　　　　let list = ['a', 'b', 'c'];
#配列全ての取得     console.log(list);          =>['a', 'b', 'c']
#選択配列の取得     console.log(list[1]);       =>　b
#配列の要素数の取得  console.log(list.length);   =>　３
#配列への要素追加   list.push('d');　　　　　 =>['a', 'b', 'c', 'd']
                                        #実際は出力されない
#配列内の最後の要素削除   list.pop();             =>['a', 'b', 'c']
　　　　　　　　　　　　　　　　　　　　　　　　　　#実際は出力されない

まず、配列ですが先ほどから記述している違い以外はrbと似たような内容で配列の削除や追加の際のメソッドが目新しいように思います。オブジェクトに関してはrbで言う所のハッシュの様なものでプロパティの取得や変更に関しても似た様な表現が多いだけなので割愛しようかと思います。

個人的に興味のある方は調べてみて頂けると幸いです。

今日のまとめはこの様な形になります。

最後までお読み頂きありがとうございました。