Logo a0de449bfc794a45333c1bf4f16f82b382942b7bfe1fa9e70ba67900e2306bd7

DIVE INTO CODE

人材紹介会社と連携した本気のカリキュラムと手厚いサポートを提供するプログラミングスクール。
最短わずか6ヶ月でRailsエンジニアとしての独立・転職を支援します。
home / web_texts / DIVE00-2
3

DIVE00-2

2017.01.10

Ruby基礎

DIVE00-2のゴール

DIVE00-2は、HTMLやCSSだけではなく、様々な機能の実装に必要なRubyと言うプログラミング言語を学んでいきます。

これから完成させるアプリケーションを確認しよう 

DIVE00-2を終えると、以下のようなアプリケーションが作れるようになります。

https://diveintocode.gyazo.com/162f9c38ce7a2e830cccea0d233bb517

Rubyとは

ここまでHTMLとCSSを使用して、achieveを作成してきました。
しかしHTML, CSSのみでは動的ページを用いたachieveは作成できません。
これはHTML, CSSが見た目に関する言語であり、データベース(データを保存する領域)と接続する処理を実装できないためです。
そこで、データベースに接続することのできるRubyが必要になります。

https://diveintocode.gyazo.com/dda8d3d182fda66d1261b16557d9333a

例えば、achieveには、ブログ機能があり以下4つの要件を満たす必要があります。

1. ブログの内容を入力するフォームが表示できる。
2. フォームに入力したブログの内容をデータベースに保存できる。
3. データベースに保存したブログの内容を取り出せる。
4. データベースから取り出したブログの内容を表示できる。

1 ブログの内容を入力するフォームが表示できる。

https://diveintocode.gyazo.com/7d79e349d9e454a1a97e1d64f837f5a3

2 フォームに入力したブログの内容をデータベースに保存できる。

https://diveintocode.gyazo.com/a6a31737f870a36758e0cde256eb3acb

3 データベースに保存したブログの内容を取り出せる。

https://diveintocode.gyazo.com/e2e5abb290650628b8b598dc39e8be9c

4 データベースから取り出したブログの内容を表示できる。

https://diveintocode.gyazo.com/5629b8c712c4e860f1405c51d06e2bd5

4つの内、以下の2つは、HTML、CSSで実装することができます。

1. ブログの内容を入力するフォームが表示できる。
4. データベースから取り出したブログの内容を表示できる。

しかし、残りの2つはデータベースと接続する必要があるためRubyを使わないと実装することができません。

2. フォームに入力したブログの内容をデータベースに保存できる。
3. データベースに保存したブログの内容を取り出せる。

Rubyのようにデータベースとのやり取りによりHTMLやCSSに影響を与えて、レスポンスを返す言語をサーバーサイドスクリプトと呼びます。

サーバーサイドスクリプトとは、Webサーバ上で動作し、Webサーバ上でプログラムの実行が要求されるたびに、結果をウェブブラウザに対して送信するようなプログラムである。

https://diveintocode.gyazo.com/6a3661f54da70ac870487bb70de45e20

なぜRubyを使用するのか

サーバーサイドスクリプトには、Rubyを含めPHPやJavaといった多くの言語があります。この中でRubyを選択する理由は、数あるフレームワークの中でも高い生産性を誇り非常に優秀なフレームワークであるRuby on Rails(以降、Rails)がRubyを使用するためです。
Ruby on Railsを使いこなすためにまずはRubyを学習していきましょう。

Rubyの基礎を学ぼう

ここからは、Rubyの基礎やターミナルの使い方を学んでいきます。
Cloud9上で作業を進めていきましょう。

Rubyファイルを作成する

まずは、rubyをプログラミングするファイルblog.rbを作成します。
.rb はrubyのファイルにつく拡張子です。

workspaceは、前回と同じ、dive-into-codeを使用します。

https://diveintocode.gyazo.com/b171424f64f70a4ea7ea7c4fa859ed2a

文字を表示する。

作成したblog.rbにRubyで処理をプログラミングし、「Hello World」というメッセージを出力してみましょう!

  1. blog.rbを開いて以下のRubyの処理を記述して下さい。
puts 'Hello World'

https://diveintocode.gyazo.com/350691e0aef5e2d769856fd641730a26

  1. Rubyを実行する。

早速ターミナルでRubyプログラムを実行しましょう。

現在のターミナルには、
lasershow(自分のID):~/workspace $このような文字列が表示されています。

(注)
現在作業を行っているフォルダが ~/workspaceではない場合$ cd ~/workspaceを実行しましょう。

lasershowのところには、自分のCloud9のIDが表示されています。
~/workspaceは、現在作業を行っているフォルダを表しています。
'$'はプロンプトと呼ばれるもので、このプロンプトの次に命令を打ち込んでいくことになります。

Rubyプログラムは、コマンドのあとに半角スペースを開けてファイル名を記述し、Enterキーを押すことで処理を実行できます。

ruby '実行したいファイル名'

それでは、ターミナルに、ruby blog.rbと入力して、blog.rbを実行しましょう。

https://diveintocode.gyazo.com/b652936e7f6e90e2eef7dda633e66858

このようにputsメソッドを実行することで、ターミナルに文字を出力させることができます。
Rubyをプログラミングして文字を出力することができました。
エンジニアへの第一歩です!!!

puts

putsは文字列や数字をターミナルに出力する処理を行います。

(注) #=> はメソッドを使用して出力されたものを表す。

puts 'あああ' #=> あああ
puts 23    #=> 23

メソッドとは

メソッドは、実行する処理をまとめたものです。Rubyでは以下のようにメソッドを定義、実行することができます。

#メソッドの定義
def メソッド名
  処理
end

#メソッドの実行
メソッド名

引数とは

メソッドを呼び出すときに渡す値のことです。これにより、メソッドの外の値をメソッド内に渡すことができます。

#メソッドの定義
def print(text)
  puts text
end

#メソッドの実行
print('こんにちは')

#実行結果
#=> こんにちは

ここではメソッドprint を実行するときに、引数として こんにちはdef print(text)text に渡しています。

レシーバとは

メソッドには様々な種類のものがあります。
その中の一つにlengthメソッドのように、レシーバを必要とするメソッドもあります。
lengthメソッドは文字列の文字数を数えるメソッドです。
よって、文字数を数える対象(レシーバ)が必要です。では実際にlengthメソッドを使った例を見てみましょう。

puts 'あああ'.length
#=> 3

puts 'Hello World'.length
#=>11
#lengthメソッドは空白もカウントします

今回は文字列をlengthメソッドでカウントして、それをputsメソッドで表示しました。
この時、'あああ'や'Hello World'がレシーバとなります。

ターミナルとは

ターミナルとは、プログラムでコンピュータに対して命令を出す場所です。
Rubyで書いたプログラムは、ターミナルでコマンドを実行することで動作します。
下図の赤枠の部分がターミナルです。

https://diveintocode.gyazo.com/bc30aea45d389be63d175704dd83b4a0

ターミナルにコマンドを記述して実行することでコンピュータに様々な処理を命令できます。

https://diveintocode.gyazo.com/335f434e0ee285626f7578b0c66b2bd8

Blogアプリを作成しよう。

それでは、実際にblogアプリ作成に取り掛かっていきます。

最初の説明文を作成する

  1. blog.rbに記述したputs 'Hello World'削除して、以下の文を記述しましょう。
puts '以下より行う操作を選んでください'
puts '1:ブログを作成する'
puts '2:作成されたブログを見る'
puts '3:ブログアプリを終了する'

これで、完成図と同じような説明文を出力させることができました。

ユーザに数字を入力させる

それでは、次にユーザに数字を入力させる機能を実装しましょう。

  1. getsメソッドを記述してユーザが数字を入力できるようにします。
puts '以下より行う操作を選んでください'
puts '1:ブログを作成する'
puts '2:作成されたブログを見る'
puts '3:ブログアプリを終了する'

gets
  1. ここで一度、blog.rbを実行してプログラムの挙動を確認してみましょう。

https://diveintocode.gyazo.com/3d36508dad959db3ecb95f71af6eead5

getsメソッドを実行すると、ターミナルは入力待ちの状態になり、文字や数字を入力できるようになります。

 getsメソッド

getsメソッドはユーザが入力した文字列や数字を引数として、文字列で返してくれるメソッドです。
ターミナルでユーザが入力した文字列や数字を引数として返すので、メソッド単体での実行が可能です。

ユーザが入力した値を保持する

先ほど、ユーザに数字を入力させるということは実装しましたが、このままでは入力した値を保持することができません。
ここからは、変数 を利用して値を保持する方法を学んでいきましょう。

変数とは

変数とは、文字列や数字を入れることのできる箱です。
変数に文字列や数字を保持させることで、後で呼び出せるようにすることができます。

https://diveintocode.gyazo.com/30ebe907f12453e74a1306ae1c33f5d0

変数には、以下のように文字列や数字を入れることができます。

# 変数の定義
# 変数名 = 代入する値
text = 'あああ'
# putsメソッドは変数を引数にとることもできます。
puts text
#=> あああ


number = 23
puts number
#=> 23 
#getsは引数を文字列で返すので、これは文字列の23になります。

  1. getsで取得した数字を変数に保持してみましょう。

変数名は、numberとします。

puts '以下より行う操作を選んでください'
puts '1:ブログを作成する'
puts '2:作成されたブログを見る'
puts '3:ブログアプリを終了する'

number = gets

これでnumberという変数にgetsで取得した値を保持させることができました。

  1. きちんと値が保持できているかどうか putsメソッドでnumberを出力して確認しましょう。
puts '以下より行う操作を選んでください'
puts '1:ブログを作成する'
puts '2:作成されたブログを見る'
puts '3:ブログアプリを終了する'

#getsメソッドでユーザから値を受け取り、変数numberに代入しています。
number = gets
puts number

https://diveintocode.gyazo.com/6640fde94dd9a4b76a9db1bcb23ea3f2

if 文を使用して分岐させる

次に、入力された数字を元に処理を分岐させる、ということを実装します。
ある条件を元に、処理を分岐させるにはif文を使用します。

if文

if文は以下のように定義できます。

#if文の定義
if 条件式1
 処理1
elsif 条件式2
 処理2
else
  処理3
end

if文を使用すると、「◯◯の場合は◯◯を実行する。☓☓の場合は☓☓を実行する。その他の場合は△△を実行する」と処理の条件を設定することが可能になります。

  1. それでは、変数numberの数字が◯◯だったらという条件文でif文を作成します。

numberが1だったらというのは、if number == 1で表します。

puts '以下より行う操作を選んでください'
puts '1:ブログを作成する'
puts '2:作成されたブログを見る'
puts '3:ブログアプリを終了する'

number = gets.to_i

if number == 1
  puts '1:ブログを作成する'
elsif number == 2
  puts '2:作成されたブログを見る'
elsif number == 3
  puts '3:ブログアプリを終了する'
else
  puts '1~3の数字を入力してください'
end

また、getsメソッドで、入力された物は、たとえ数字で書いても文字列で出力されるため、
to_iメソッドを使用し、文字列を数字に変換しています。
これは変数numberを後のif文で条件式に使用するため、数字に変換する必要があるためです。

number = gets.to.i(文字列→数字)
if number == 1(数字)

ブログ作成機能の実装

ブログには、タイトルと本文が必要です。それぞれユーザにgetsで入力させて、変数に格納しましょう。
変数に格納した後は、putsメソッドで出力させます。文字列の中で変数を出力させるためには、#{}で変数を囲う必要があります。

  1. ブログを作成する機能を実装する。
if number == 1
  puts '1:ブログを作成する'
  puts 'ブログのタイトルを入力してください'
  blog_title = gets
  puts 'ブログの本文を入力してください'
  blog_content = gets
  puts "入力されたタイトルと本文は以下です。"
  puts "タイトル:#{blog_title}"
  puts "本文:#{blog_content}"
elsif number == 2

繰り返し処理を実装しよう

ブログを作成する機能を実装することができましたが、通常、プログラムは、何らかの処理を繰り返して実行する機能を実装することが多いです。ここからは、while文を使って処理を繰り返して実行する方法を学びます。

while文

処理の繰り返し行いたいときwhile文を使用します。
while文は指定した条件式が真(true)の間、繰り返し実行します。
書式は次のようになっています。

while 条件式 do
  実行する処理
end

まずは、以下のようにwhile文をプログラミングして繰り返し処理を実装してみましょう。

#変数iに2を代入
i = 2

#変数iが1より大きい場合、処理の実行を繰り返す。
while i > 1 do
 puts "出力!"
end

変数iが1よりも大きい場合、doとendで囲んだ処理を実行します。
この場合ターミナルには「出力!」と出力されます。また、whileは条件を満たす限り、処理を継続します。
上記のプログラムは、i = 2なのでi > 1という条件を満たすため「出力!」と出力し続けます。
Macの場合は「control」+ 「c」、Windowsの場合「Ctrl」 + 「c」で停止することが出来ます。

それでは、blog.rbの実装に戻りましょう。
whileは条件文がtrueの場合、処理を繰り返します。
条件文とは、whileの右にある式を指します。
この場合条件文は、trueです。
つまり条件文=trueのため、永遠にwhile文が実行されることになります。

while true
 puts "diveintocode"
end

↑永遠と"diveintocode"と出力される

また、while文は、ブロック内でbreakを実行すると、繰り返しを中止することができます。
従って、ブログ終了を選択したら、break文を実行して処理を中止させるようにしましょう。

  1. whileメソッドで処理を繰り返す。
while true
  puts '以下より行う操作を選んでください'
  puts '1:ブログを作成する'
  puts '2:作成されたブログを見る'
  puts '3:ブログアプリを終了する'
  number = gets.to_i

  if number == 1
    puts '1:ブログを作成する'
    puts 'ブログのタイトルを入力してください'
    blog_title = gets
    puts 'ブログの本文を入力してください'
    blog_content = gets
    puts "入力されたタイトルと本文は以下です。"
    puts "タイトル:#{blog_title}"
    puts "本文:#{blog_content}"
  elsif number == 2
    puts '2:作成されたブログを見る'
  elsif number == 3
    puts '3:ブログアプリを終了する'
    break
  else
    puts '1~3の数字を入力してください'
  end
end

作成されたブログを見れるようにしよう

  1. 作成したブログを見るために、1(ブログを作成する)で格納した変数を出力させます。
省略
  elsif number == 2
    puts '2:作成されたブログを見る'
    puts "タイトル:#{blog_title}"
    puts "本文:#{blog_content}"
  elsif number == 3
省略

しかしこのままでは、複数のブログを表示させることができません。それは、ブログを作成する度に、作成したブログを上書きし続けるようになっているためです。
現在の実装では、複数のブログのタイトルや本文を保持することができません。そこで、配列という技術を使用して、複数の値を保持させることにします。

配列について

配列は、複数の値を保持することができます。変数は、一つの値しか保持することができません。

配列は、
配列名 = ["一番","二番","三番"]のように、複数の値を[]で囲うことによって使用することができます。
また、配列のそれぞれを表示させたい場合は配列名[表示させたい配列番号]とします。
例えば、”二番”と表示させたい場合配列名[1]とします。ここで注意したいのは、配列番号が0から始まるということです。今回"二番"は左から二番目だったため、配列番号は、( 2 − 1 )番となります。

  1. 配列を使用してブログの内容を複数保持させましょう。 配列を事前に用意して、そこに変数を追加していくというロジック(処理の構成)で実装します。
省略
  if number == 1
    puts '1:ブログを作成する'
    puts 'ブログのタイトルを入力してください'
    blog_title = gets
    blog_titles << blog_title
    puts 'ブログの本文を入力してください'
    blog_content = gets
    blog_contents << blog_content
    puts "入力されたタイトルと本文は以下です。"
    puts "タイトル:#{blog_title}"
    puts "本文:#{blog_content}"
  elsif number == 2
省略

blog_titles << blog_titleとすることで、blog_titles(配列)にblog_title(変数)を入れています。

blog_titles = []
blog_title = "中尾"
blog_titles << blog_title

blog_titles # ["中尾"]

blog_title = "宮岡"
blog_titles << blog_title

blog_titles # ["中尾","宮岡"]

これで、ブログを複数保持することができるようになりました。

(例)

blog_titles = ["今日は暑いですね。", "今日は寒いですね", "今日で3月が終わります"]
puts blog_title
#=>
今日は暑いですね。
今日は寒いですね
今日で3月が終わります。

ブログ機能では、タイトルと内容をそれぞれ一行ずつ表示させたいため、配列番号を指定して表示させてみます。

(例)

blog_titles = ["今日は暑いですね。", "今日は寒いですね", "今日で3月が終わります"]
blog_contents = ["40度です。","-10度です。","明日から4月です。"]

puts blog_titles[0]
puts blog_contents[0]
puts blog_titles[1]
puts blog_contents[1]
puts blog_titles[2]
puts blog_contents[2]

#=>
今日は暑いですね。
40度です。
今日は寒いですね
10度です。
今日で3月が終わります。
明日から4月です。

タイトルと本文をそれぞれ一行ずつ表示させることができましたが、これではブログが作成される度にputsメソッドを増やすことになってしまいます。
そこで、ハッシュとeachメソッドを使用します。

ハッシュ

ハッシュは配列と同じく複数のオブジェクトへの参照をまとめて管理することが出来るオブジェクトです。配列と大きく異なる点は、配列がインデックスを使って要素を区別していたのに対し、ハッシュではキーと呼ばれるものを使用します。

つまり、ハッシュの特徴は2点あります。
* 複数の値を保持できる
* 複数の値を配列と異なり、(配列)番号ではなく、キー(ラベルのようなもの)で管理する

blogs = ["晴れ","曇り","雨"]

このように、配列では保持することができるのは値のみです。値を参照する場合は、保持された順番で与えられた配列番号を使用します。
puts blogs[1] #=> 曇り

blogs = { title: "今日は", content: "晴れ" }

配列と同じように、ハッシュもこのように複数の値を保持することができます。保持している値は"今日は"と"晴れ"
になります。ハッシュはこれらを、配列番号ではなくキー(ラベルのようなもの)で管理しています。この場合キーは、titleとcontentです。キーであることを表すためは、文尾に:(シンボル)をつけます。値を参照する時は、ハッシュ名にキーを指定します。

(例)

blogs[:content] #=> 晴れ ※参照するときは " : " の位置は先頭にきます。

また、配列はハッシュを保持することができます。

blogs = [{ title: "晴れ", content: "暑い" }, { title: "曇り", content: "適温" }, { title: "雨", content: "寒い" }]

例えば、この配列の"曇り"と表示させる場合、blogs[1][:title] とします。"寒い"と表示させたかったらblogs[2][:content] とします。
配列の何番目のハッシュの何を選択するか。ということですね。

  1. それではハッシュと配列を使用して、blog.rbを書き換えましょう。
blogs = []

while true

  puts '以下より行う操作を選んでください'
  puts '1:ブログを作成する'
  puts '2:作成されたブログを見る'
  puts '3:ブログアプリを終了する'
  number = gets.to_i

  if number == 1
    blog = {}
    puts '1:ブログを作成する'
    puts 'ブログのタイトルを入力してください'
    blog[:title] = gets
    puts 'ブログの本文を入力してください'
    blog[:content] = gets
    blogs << blog
    puts "------入力確認------"
    puts "タイトル:#{blog[:title]}"
    puts "本文:#{blog[:content]}"
    puts blogs
  elsif number == 2
省略

一行目でblogs = []とすることで、配列を定義しています。
また、ブログを作成する分岐に入った後はblog = {}を記述して、空のハッシュを定義しています。

blog[:title] = gets
blog[:content] = gets

その後で、ハッシュにキーをつけて、ユーザが入力した値を保存します。実行後、変数blogの中には、titleとcontentがキーになっている値がそれぞれ保持されています。

(例)

blog = { title: "今日は", content: "晴れ"}

そして最後にblogs << blogとすることで、blogをblogsに代入しています。

(例)

blogs = [{blog = { title: "今日は", content: "晴れ" }}]

ブログが複数作成された場合、このようになります。

blogs = [{ title: "晴れ", content: "暑い" }, { title: "曇り", content "適温" }, { title: "雨", content: "寒い" }]

eachメソッド

ハッシュと配列により複数の値を保持することができました。
次は、eachメソッド を使用して、保持している値を表示させましょう。

「each」メソッドは配列や範囲オブジェクトなどで用意されているメソッドであり、オブジェクトに含まれている要素を順に取り出します。
eachメソッドを使用するのは、putsメソッドでは、変数の値の数だけputsを記述しなければなりませんが、eachメソッドを使用すれば、自動的に要素の数だけ実行してくれるからです。

(例)

["晴れ", "曇り", "雨"].each do
 puts "天気"
end

#=>
天気
天気
天気

このようにeachメソッドを使用すると、doとendで囲まれているプログラムがeachメソッドのレシーバの要素の数だけ繰り返します。
この場合、eachメソッドのレシーバは、["晴れ", "曇り", "雨"]で、要素の数が3つなので3回繰り返します。

https://diveintocode.gyazo.com/97095e198e0eac58b2607da8b1d68005

またeachメソッドは、繰り返し実行する際に、レシーバの要素を変数に代入させることができます。

["晴れ", "曇り", "雨"].each do |tenki|
 puts tenki
end

#=>
晴れ
曇り

このように、晴れ,曇り,雨は、それぞれtenki変数に代入されて、puts tenkiによってそれぞれ出力されます。

また同様にeachメソッドはハッシュに対しても、使用することができます。

{ title: "こんにちは", content: "寒いですね" }.each do |key, value|
  puts "#{key} #{value}"
end

#=>
"title こんにちは"
"content 寒いですね"

このように、keyには、titleやcontentなどのキーがはいり、valueには、"こんにちは"や"寒いですね"などの値が入ります。
この、keyやvalueの変数名は特に指定はありません。自分で好きな変数名にかえることができます。

{ title: "こんにちは", content: "寒いですね" }.each do |bar, foo|
  puts "#{bar} #{foo}"
end

#=>
"title こんにちは"
"content 寒いですね"
  1. それでは、eachメソッドを使用して実際にblogs配列を出力させましょう。
  elsif number == 2
    puts '2:作成されたブログを見る'
    blogs.each do |blog|
      puts "タイトル: #{blog[:title]}"
      puts "本文: #{blog[:content]}"
      puts "-----------"
    end
  elsif number == 3

これで、保持されたブログを表示させることができるようになり、ブログ機能の根幹を実装することができました。
ここまでのソースコードをここに貼り付けておきます。

blogs = []

while true
  puts '以下より行う操作を選んでください'
  puts '1:ブログを作成する'
  puts '2:作成されたブログを見る'
  puts '3:ブログアプリを終了する'
  number = gets.to_i

  if number == 1
    blog = {}
    puts '1:ブログを作成する'
    puts 'ブログのタイトルを入力してください'
    blog[:title] = gets
    puts 'ブログの本文を入力してください'
    blog[:content] = gets
    blogs << blog
    puts "------入力確認------"
    puts "タイトル:#{blog[:title]}"
    puts "本文:#{blog[:content]}"
  elsif number == 2
    puts '2:作成されたブログを見る'
    blogs.each do |blog|
      puts "タイトル: #{blog[:title]}"
      puts "本文: #{blog[:content]}"
      puts "-----------"
    end
  elsif number == 3
    puts '3:ブログアプリを終了する'
    break
  else
    puts '1~3の数字を入力してください'
  end
end

DIVE00-2課題

現在のソースコードでは、

  puts '以下より行う操作を選んでください'
  puts '1:ブログを作成する'
  puts '2:作成されたブログを見る'
  puts '3:ブログアプリを終了する'

このように、putsメソッドを複数使用して、ユーザに対してアプリ操作を説明しています。
これを、eachメソッドとputsメソッドを1つだけ使用してすべて表示させましょう。

ヒント

  • 文章を入れた配列用意しましょう。
  • その配列をeachメソッドの中にあるputsメソッドで出力させます。

課題に取り組んでみましょう。ご質問等がありましたら、無料説明会にて承ります。

  • 目次

DIVE INTO CODEの無料説明会を開催中

ハイレベルなプログラミングに入門したい方、フリーランスエンジニアになりたい方、
つくりたいアプリがある方、一歩前へ踏み出すお手伝いいたします。

無料説明会はこちら