LoginSignup
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@asuka-80

【Ruby&JavaScript入門】プログラム初心者が複数のプログラミン言語を比較しながら復習するための練習帳《その2》

Last updated at Posted at 2023-06-04

プログラミング超初心者がRubyとJavaScript入門編を学び、次へ進もうとすると理解したことを忘れるため備忘録目的で記事を書きました。その第2弾です。

具体的な取り組み方法1。

取り組むときの注意2。

①変数を使って1~5を出力。ただし、while文を使う。

【Ruby&JavaScript入門】練習帳《その1》の問題⑩をもっと少ないコードで書いてみる

asuka.rb
## 変数numを定義する
num = 1
## while文を作成する
while num <= 5 do
  puts num
  num += 1
end
asuka.js
// 変数numを定義する
let num = 1;
// while文を作成する
while (num <= 5) {
  console.log(num);
  num += 1;
}

出力結果
1
2
3
4
5

【Ruby】 while文の基本構文
while 条件式 do # doは省略OK
  # 繰り返したい処理
  # 変数の更新を忘れてはNG
end
【JavaScript】 while文の基本構文
while(条件式){
  // 繰り返したい処理
  // 変数の更新を忘れてはNG
}

変数の更新(①の問題の場合はnum += 1 )を忘れると、永遠に1という数字が繰り返し出力されてしまう(無限ループになる)ので注意が必要！

②変数を使って1~5を出力。ただし、for文を使う。

asuka.rb
for num in 1..5 do
  puts num
end
asuka.js
for (let num = 1; num <= 5; num += 1) {
  console.log(num);
}

// 変数の定義(num += 1 は　num++ でもOK)
for (let num = 1; num <= 5; num++) {
  console.log(num);
}

出力結果
1
2
3
4
5

【Ruby】 for文の基本構文
for num in オブジェクト do
  処理
end
【JavaScript】 for文の基本構文
for(変数の定義;条件式;変数の更新){
  処理
}

オブジェクト範囲.png

計算式の省略.png

③JavaScriptのfor文を用いて1~10を順番に出力する。ただし、if文で5の倍数の時は「〇は5の倍数です」、そうでない時は数字が出力されるように条件分岐する。

asuka.js
for (let num = 1; num <= 10; num++) {
  // if文を用いてnumが5の倍数の時に「〇は5の倍数です」、そうでないときは数字を出力
  if (num % 5 === 0) {
    console.log(`${num}は5の倍数です`);
  } else {
    console.log(num);
  }
}

出力結果
1
2
3
4
5は5の倍数です
6
7
8
9
10は5の倍数です

Rubyでの書き方がわかりませんでした

④以下の変数名で定義し、"黒"、"赤"、"金"の文字列を要素とする配列を代入して変数（shochu_names、shochuNames）を出力する。

  • Rubyの変数名shochu_names
  • JavaScriptの変数名shochuNames
asuka.rb
shochu_names = ["黒","赤","金"]
puts shochu_names
asuka.js
let shochuNames = ["黒", "赤", "金"];
console.log(shochuNames);

出力結果
《Ruby》
黒
赤
金

※『puts 変数名』の場合、配列の要素が1つずつ改行されて出力

《JavaScript》
[ '黒', '赤', '金' ]

※『console.log(変数名または定数名)』の場合、配列がコンソールに出力される

⑤《配列の要素を取得》以下の配列からインデックス番号が2の要素を出力し、インデックス番号が0の要素を使って『毎日飲むのは●●です』となるように出力。

Rubyの配列： shochu_names = ["黒","赤","金"]
JavaScriptの配列：let shochuNames = ["黒", "赤", "金"];

asuka.rb
shochu_names = ["黒","赤","金"]
 # インデックス番号が2(配列の3つ目)の要素を出力してください
puts shochu_names[2]
 # インデックス番号が0(配列の1つ目)の要素を使って「毎日飲むのは●●です」となるように出力
puts "毎日飲むのは#{shochu_names[0]}です"
asuka.js
let shochuNames = ["黒", "赤", "金"];
 // インデックス番号が2の要素を出力
console.log(shochuNames[2]);
 // インデックス番号が0の要素を使って「毎日飲むのは●●です」となるように出力
console.log(`毎日飲むのは${shochuNames[0]}です`);

出力結果
金
毎日飲むのは黒です

⑥《配列の要素を更新》インデックス番号1の要素の値を"白"に更新し、Rubyは各要素を改行して出力し、JavaScriptは配列を出力。そしてインデックス番号1の要素を出力。

Rubyの配列： shochu_names = ["黒","赤","金"]
JavaScriptの配列：let shochuNames = ["黒", "赤", "金"];

asuka.rb
shochu_names = ["黒","赤","金"]
 # shochu_namesから"赤"を検索して"白"で置換する
shochu_names.map!{|x| x=="赤" ? "白" : x}
puts shochu_names
puts "-----------"
puts shochu_names[1]
asuka.js
let shochuNames = ["黒", "赤", "金"];
shochuNames[1] = "白";
console.log(shochuNames);
console.log(shochuNames[1]);

出力結果
《Ruby》
黒
白
金
-----------
白

※Rubyのほうは、厳密にはインデックス番号ではなく赤という値を検索して白へ置換している。そのため、万一赤が存在しない場合は元のインデックス番号1の要素が出力される。

《JavaScript》
[ '黒', '白', '金' ]
白

※JavaScriptのほうは、インデックス番号1の要素の値を白へ更新している。

焼酎.png
　　

⑦以下の配列の各要素を改行して出力する。JavaScriptはfor文を使った書き方も。

Rubyの配列： shochu_names = ["黒","赤","金"]
JavaScriptの配列：const shochuNames = ["黒", "赤", "金"];

asuka.rb
shochu_names = ["黒","赤","金"]
puts shochu_names
asuka.js
 // 要素の数の分、console.log();を1つずつ書いて出力する場合　　 
const shochuNames = ["黒", "赤", "金"];
console.log(shochuNames[0]);
console.log(shochuNames[1]);
console.log(shochuNames[2]);  

 // for文を用いて、配列の値を順にコンソールに出力する場合　　
const shochuNames = ["黒", "赤", "金"];
for (let i = 0; i < 3; i++) {
  console.log(shochuNames[i]);
}

出力結果
黒
赤
金

⑧以下の配列の各要素ごとに「●●が好きです」と出力をする。ただし、Rubyはeach文を、JavaScriptはfor文を作成する。

Rubyの配列： shochu_names = ["黒","赤","金"]
JavaScriptの配列：const shochuNames = ["黒", "赤", "金"];

asuka.rb
shochu_names = ["黒","赤","金"]
  # each文を用いて要素ごとに「●●が好きです」と出力
shochu_names.each do |shochu_name|
  puts "#{shochu_name}が好きです"
end
asuka.js
const shochuNames = ["黒", "赤", "金"];
  // for文を用いて要素ごとに「●●が好きです」と出力
for (let i = 0; i < 3; i++) {
  console.log(`${shochuNames[i]}が好きです`);
}

出力結果
黒が好きです
赤が好きです
金が好きです

⑨以下の配列の要素の数を出力。

Rubyの配列： shochu_names = ["黒","赤","金"]
JavaScriptの配列：const shochuNames = ["黒", "赤", "金"];

asuka.rb
shochu_names = ["黒","赤","金"]
puts shochu_names.length
asuka.js
const shochuNames = ["黒", "赤", "金"];
// lengthを用いて配列の要素の数を出力
console.log(shochuNames.length);

出力結果
3

⑩ ⑧のJavaScriptのfor文をlengthを用いて書き換える。

問題⑧のfor文
const shochuNames = ["黒", "赤", "金"];
for (let i = 0; i < 3; i++) {
  console.log(`${shochuNames[i]}が好きです`);
}
lengthを用いて条件式を書き換え
const shochuNames = ["黒", "赤", "金"];
for (let i = 0; i < shochuNames.length; i++) {
  console.log(`${shochuNames[i]}が好きです`);
}

出力結果
黒が好きです
赤が好きです
金が好きです

配列の要素数が変わっても、Rubyと同様に問題なく繰り返すことができる

⑪以下の配列の情報にRubyはキーを付けてハッシュに、JavaScriptはプロパティをつけてオブジェクトをつくる。また、Rubyはキーの部分を文字列ではなくシンボルの書き方、かつ省略形で書く。

Rubyの配列： shochu_names = ["黒","赤","金"]
JavaScriptの配列：const shochuNames = ["黒", "赤", "金"];
キー・プロパティ：黒はimo0、赤はimo1、金はimo2。

asuka.rb
shochu_names = {imo0: "黒", imo1: "赤", imo2: "金"}
puts shochu_names
asuka.js
  // 定数shochuNamesを定義し、指定されたオブジェクトを代入する
const shochuNames = {imo0: "黒", imo1: "赤", imo2: "金"};
  // shochuNamesの値を出力
console.log(shochuNames);

出力結果
《Ruby》
{:imo0=>"黒", :imo1=>"赤", :imo2=>"金"}

省略した書き方の場合でも、あくまでキーはシンボルなので、変数shochu_namesは省略されていない形で出力。また、要素を出力する時もシンボル[:●●]を用いる必要がある。

《JavaScript》
{ imo0: '黒', imo1: '赤', imo2: '金' }

⑫ ⑪のRubyはキーが:imo1の値を、JavaScriptはimo1プロパティの値を出力

asuka.rb
shochu_names = {imo0: "黒", imo1: "赤", imo2: "金"}
puts shochu_names[:imo1]
asuka.js
const shochuNames = {imo0: "黒", imo1: "赤", imo2: "金"};
console.log(shochuNames.imo1);

出力結果
赤

⑬ ⑪のRubyはキーが:imo1の値を、JavaScriptはimo1プロパティの値を赤から白へ更新し、Rubyはキーが:imo1の値を、JavaScriptはimo1プロパティの値を出力する。そしてRubyは変数shochu_namesを、JavaScriptは定数shochuNamesを出力する。

asuka.rb
shochu_names = {imo0: "黒", imo1: "赤", imo2: "金"}
  # キー『:imo1』の値を「"白"」に更新
shochu_names[:imo1] = "白"
  # キー『:imo1』の値を出力
puts shochu_names[:imo1]
puts shochu_names
asuka.js
const shochuNames = {imo0: "黒", imo1: "赤", imo2: "金"};
shochuNames.imo1 = "白";
console.log(shochuNames.imo1);
console.log(shochuNames);

出力結果
《Ruby》
白
{:imo0=>"黒", :imo1=>"白", :imo2=>"金"}

《JavaScript》
白
{ imo0: '黒', imo1: '白', imo2: '金' }

⑭ ⑪のRubyはキーが:imo3の値が白を、JavaScriptはimo3プロパティの値が白を追加し、Rubyは変数shochu_namesを、JavaScriptは定数shochuNamesを出力する。

asuka.rb
shochu_names = {imo0: "黒", imo1: "赤", imo2: "金"}
shochu_names[:imo3] = "白"
puts shochu_names
asuka.js
const shochuNames = {imo0: "黒", imo1: "赤", imo2: "金"};
shochuNames.imo3 = "白";
console.log(shochuNames);

出力結果
《Ruby》
{:imo0=>"黒", :imo1=>"赤", :imo2=>"金", :imo3=>"白"}

《JavaScript》
{ imo0: '黒', imo1: '赤', imo2: '金', imo3: '白' }

⑮ ⑪のRubyは『(キーが:imo0の値)より(キーが:imo2の値)はゴージャスです』、JavaScriptは『(imo0プロパティの値)より(imo2プロパティの値)はゴージャスです』と出力する。

asuka.rb
shochu_names = {imo0: "黒", imo1: "赤", imo2: "金"}
puts "#{shochu_names[:imo0]}より#{shochu_names[:imo2]}はゴージャスです"
asuka.js
const shochuNames = {imo0: "黒", imo1: "赤", imo2: "金"};
console.log(`${shochuNames.imo0}より${shochuNames.imo2}はゴージャスです`);

出力結果
黒より金はゴージャスです

⑯Rubyのハッシュ、JavaScriptのオブジェクトがそれぞれ以下のとき、Rubyはキーである[:job]、JavaScriptはプロパティである job の値がある場合に『●●さんの仕事は〇〇です』と出力し、Rubyはキーである[:job]、JavaScriptはプロパティである job の値がない場合に『●●さんの仕事は秘密です』と出力できるようにif文の条件式をつくる。

asuka1.rb
user = {name: "飛鳥"}
asuka2.rb
user = {name: "飛鳥", job: "看護師"}
asuka1.js
const user = {name: "飛鳥"};
asuka2.js
const user = {name: "飛鳥", job: "看護師"};

if文をつくる

asuka1.rb
user = {name: "飛鳥"}
if user[:job] == nil
  puts "#{user[:name]}の仕事は秘密です"
else
  puts "#{user[:name]}の仕事は#{user[:job]}です"
end
  # あるいは以下でもOK
user = {name: "飛鳥"}
if user[:job]
  puts "#{user[:name]}の仕事は#{user[:job]}です"
else
  puts "#{user[:name]}の仕事は秘密です"
end
asuka2.rb
user = {name: "飛鳥", job: "看護師"}
if user[:job] == nil
  puts "#{user[:name]}の仕事は秘密です"
else
  puts "#{user[:name]}の仕事は#{user[:job]}です"
end
  # あるいは以下でもOK
user = {name: "飛鳥", job: "看護師"}
if user[:job]
  puts "#{user[:name]}の仕事は#{user[:job]}です"
else
  puts "#{user[:name]}の仕事は秘密です"
end
asuka1.js
const user = {name: "飛鳥"};
if(user.job === undefined){
 console.log(`${user.name}の仕事は秘密です`);
}else{ 
 console.log(`${user.name}の仕事は${user.job}です`);
}
asuka2.js
const user = {name: "飛鳥", job: "看護師"};
if(user.job === undefined){
 console.log(`${user.name}の仕事は秘密です`);
}else{ 
 console.log(`${user.name}の仕事は${user.job}です`);
}

出力結果
《asuka1.rb》
飛鳥の仕事は秘密です
《asuka2.rb》
飛鳥の仕事は看護師です
《asuka1.js》
飛鳥の仕事は秘密です
《asuka2.js》
飛鳥の仕事は看護師です

false例.png

RubyとJavaScript違い1.png

⑰要素がRubyはハッシュである以下の配列、あるいはJavaScriptはオブジェクトである以下の配列のインデックス番号1を出力。

【Ruby】要素がハッシュである配列
  # 配列
users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
]
【JavaScript】要素がオブジェクトである配列
 // 配列
const users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
];

配列のインデックス番号1を出力させる

asuka.rb
users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
]
# users配列のインデックス番号1(2つ目の要素)を出力させる
puts users[1]
asuka.js
const users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
];
  // users配列のインデックス番号1(2つ目の要素)を出力させる
console.log(users[1]);

出力結果
《asuka.rb》
{:name=>"あすか", :job=>"保健師", :job_year=>4}
《asuka.js》
{ name: 'あすか', job: '保健師', job_year: 4 }

⑱ ⑰のusers配列のインデックス番号0( 1つ目の要素)の「name」に対応する値を出力。

asuka.rb
users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
]
#  users配列のインデックス番号0( 1つ目の要素)の「name」に対応する値を出力
puts users[0][:name]
asuka.js
const users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
];
  // users配列のインデックス番号0( 1つ目の要素)の「name」に対応する値を出力
console.log(users[0].name);

出力結果
飛鳥

⑲ ⑰のusers配列でRubyはeach文、JavaScriptはfor文を使って繰り返し処理を行い、順に出力させる。なお、出力させる際には「名前は〇〇(name)です」「●●(job)歴▲▲(job年数)年です」を出力

asuka.rb
users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
]

# each文を使って要素ごとに出力
users.each do |user|
  puts "--------------------"
    ## 「名前は〇〇(name)です」を出力
  puts "名前は#{user[:name]}です"
    ## 「●●(job)歴▲▲(job年数)年です」を出力
  puts "#{user[:job]}歴#{user[:job_year]}年です"
end
asuka.js
const users = [
  {name: "飛鳥", job:"看護師", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job:"CRC", job_year:5},
];

// for文を使う
for (let i = 0; i < users.length; i++) {
  console.log("--------------------");
  // 定数userを定義する
  const user = users[i];
  // 「名前は〇〇(name)です」を出力
  console.log(`名前は${user.name}です`);
  // 「●●(job)歴▲▲(job年数)年です」を出力
  console.log(`${user.job}歴${user.job_year}年です`);
}

出力結果

--------------------
名前は飛鳥です
看護師歴10年です
--------------------
名前はあすかです
保健師歴4年です
--------------------
名前はasukaです
CRC歴5年です

⑳要素がRubyはハッシュである配列、あるいは要素がJavaScriptはオブジェクトである配列が以下にある。Rubyはeachとif文、JavaScriptはforとif文を使って繰り返し処理を行い、順に出力させる。なお、出力させる際には「〇〇(name)職歴▲▲(job_year)年です」を出力。そして職業(job)がある場合は「職業●●です」、ない場合は「職業秘密です」と出力する。

【Ruby】要素がハッシュである配列
  # 配列
users = [
  {name: "飛鳥", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job_year:5},
]
【JavaScript】要素がオブジェクトである配列
 // 配列
const users = [
  {name: "飛鳥", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job_year:5},
];

文章を出力させる

asuka.rb
users = [
  {name: "飛鳥", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job_year:5},
]

users.each do |user|
  puts "--------------------"
  puts "#{user[:name]}は職歴#{user[:job_year]}年です"
  
  # if文を使ってキー:jobの有無に応じて条件分岐
  if user[:job] == nil
    puts "職種は秘密です"
  else
    puts "職種は#{user[:job]}です"
  end
end
asuka.js
const users = [
  {name: "飛鳥", job_year:10},
  {name: "あすか", job:"保健師", job_year:4},
  {name: "asuka", job_year:5},
];

for (let i = 0; i < users.length; i++) {
  console.log("--------------------");
  
  const user = users[i];
  
  console.log(`${user.name}は職歴${user.job_year}年です`);
  
  // if文を追加してください
  if (user.job === undefined) {
    console.log("職種は秘密です");
  } else {
    console.log(`職種は${user.job}です`);
  }
}

出力結果
--------------------
飛鳥は職歴10年です
職種は秘密です
--------------------
あすかは職歴4年です
職種は保健師です
--------------------
asukaは職歴5年です
職種は秘密です

  1. 回答用のファイル(mdファイル)を別途用意して練習帳(この記事)のコードをコピーする。回答用の中にある自力で入力しなくてはいけないコードを全て削除。回答用のファイルをVSコードで開き、コードを書く。やり方はQiitaの【Markdown記法 チートシート】を活用してMarkdownをマスターする！《答え編》と同じ要領です。 ↩

  2. mdファイルに書いているのでMarkdownと異なり、コードを間違えても気づきにくいです。 ↩

0
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?