最低限のCSSの機能

html プログラミング

前章でHTMLについて学び、ウェブサイト上に文字を表示できるようになりました。しかし、このままではリンク以外は黒色の文字が並んでいるだけです。これを装飾する役目を持っているのがCSSです。 本章では、CSSに必要なファイルを作成し、コードを書きながら学びます。

 

3-3フォルダのなかにindex3-3.htmlというファイルを作成しましょう。

 

作成したファイルに前章と同じ以下のコードを記述しましょう。前章のコードをそのまま本章でも使用します。

 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。

<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">

クリックすると、Googleへ移動します。</a>
</body>
</html>

CSSファイルを用意しましょう
3-3フォルダのなかにstyle3-3.cssというファイルを作成しましょう。

 

以下のようなフォルダの構成になっていれば成功です。

HTML_CSS3-2index3-2.html
　　
3-3index3-3.html
style3-3.css
　　
今回作成したstyle3-3.cssファイルにこれからCSSの記述をします。

CSSの文法
HTMLの時と同様に、コードを書きながらCSSの文法を学びます。

HTMLとCSSの関係性についておさらいしよう
CSSの文法に入る前に、HTMLとCSSの関係性について振り返りましょう。

 

CSSファイルをHTMLファイルで読み込むためには、CSSファイルの情報をHTMLのhead要素に記述する必要があります。

head要素からCSSを呼び出せるようにしよう
本章で新しく作成したstyle3-3.cssを、index3-3.htmlから読み込む設定をします。
CSSファイルを呼び出すためには、head要素内に以下のような記述をします。

 

新しくでてきたキーワードを一つずつ確認しましょう。

link要素
link要素は現在のファイル（HTML）から外部情報（今回であればCSSファイル）を関連付けする際に記載します。
rel属性、href属性と一緒に使用するのが一般的です。

rel属性
rel属性はRelation（関係）の略で、参照先のファイルが現在のファイルとどのような関係であるのかを明らかにします。
属性値には決められたキーワードを記載します。
今回は”stylesheet”というキーワードを指定することでCSS（Cascading Style Sheets）を参照することを表している。

href属性
href属性はHyper Referenceの略で、参照先の外部ファイルの場所を明らかにします。
属性値にはファイルの場所、ファイル名を記載します。

 

head要素からCSSファイルを呼び出せるようにしましょう
index3-3.htmlに以下のようにCSSファイルの情報を記述しましょう。

HTML_CSS/3-3/index3-3.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

これで、同じフォルダにあるCSSファイルを指定することができました。

CSSの記述に必要な知識を学ぼう
CSSの基本的な記述は、下図のようになります。

 

それぞれのキーワードを解説します。

セレクタ
セレクタとは、CSSによる装飾を、どの部分のHTMLに適用するかを選択するための記述です。

プロパティ
プロパティとはセレクタで指定したHTMLの「何を変えるのか」を選択するための記述です。背景の色や文字の大きさ、要素同士の余白など様々なプロパティが用意されています。

また、複数プロパティがある場合は順序は問いません。
下の例①と例②は同じコードを意味します。

【例①】
.body {
color: white;
height: 100px;
}

【例②】
.body {
height: 100px;
color: white;
}

値
プロパティで設定する内容を決めるための記述です。背景の色を指定するプロパティであれば、値でどのような色にするのかを決めることができます。プロパティと値の間はコロン（ : ）で区切り、値の後にはセミコロン（ ; ）を入力します。

文字の色を指定しよう
<p>...</p>の文字に色を付けて、CSSの使い方を学びましょう。

文字に色を付けるためには、colorプロパティを使います。

colorカラープロパティ
colorプロパティは、値によって自由に文字の色を指定することができます。今回はp要素全てを赤色にするので、以下のような記述をします。

 

CSSファイルを編集して、文字の色を指定しましょう
style3-3.cssに以下のように追記しましょう。

HTML_CSS/3-3/style3-3.css
p {
color: red;
}

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

値の最後のセミコロン（ ; ）を忘れている
値の最後がセミコロン（ ; ）ではなく、コロン（ : ）になっている
スペルミスや打ち間違いがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
ブラウザで確認しましょう
画面をリロードしてCSSが正しく適用されているか、確認しましょう。以下のように表示されていれば成功です。

 

文字の大きさを指定しよう
同様に<p>...</p>の文字の大きさを編集して、CSSの使い方を学びましょう。

font-sizeフォント サイズプロパティ
font-sizeプロパティとは文字の大きさを指定するプロパティです。
文字の大きさを調整するときに、単位としてpxが頻繁に使用されます。

pxピクセル
px(ピクセル)とはpixelの略で、簡単にいうとデジタル画面の最小の単位のことです。
pxの概念は少し複雑なのでここでは省略しますが、気になる人はこちらの記事を参考にしてください。

本章では、よく使用する単位であることを覚えておきましょう。

先ほど記述したコードは以下のように読み解くことができます。

 

CSSファイルを編集して、文字の大きさを指定しましょう
style3-3.cssに以下のように追記しましょう。

HTML_CSS/3-3/style3-3.css
p {
color: red;
font-size: 24px;
}

ブラウザで確認しましょう
画面をリロードしてCSSが正しく適用されているか、確認しましょう。以下のように表示されていれば成功です。

 

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

値の最後のセミコロン（ ; ）を忘れている
値の最後がセミコロン（ ; ）ではなく、コロン（ : ）になっている
font-sizeのfontとsizeの間がハイフン（ - ）になっていない
スペルミスや打ち間違いがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
class属性とclassセレクタについて理解しよう
上記までのステップでは、CSSを修正することによって、<p>...</p>の全ての色と大きさを編集することができました。

しかしながら、下図のように、一部の<p>...</p>のみを装飾したい場合は、どのようにすれば良いでしょうか。

 

そこでclass属性とclassセレクタが登場します。

classクラス属性
class属性とはHTML要素に対して個別に名前を指定することができる属性です。
class属性の属性値をclass名といいます。

 

例えば、<p>...</p>に対して"first-message"というclass名を付与する場合は、以下のように記載します。

【例】sample.html
<p class="first-message">
テキストテキストテキスト
</p>

CSSではclass名をセレクタと指定して、装飾することができます。

classクラスセレクタ
HTMLで指定したclass名をCSSのセレクタとして使用することができます。classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。

【例】sample.css
.first-message {
color: red;
}

classセレクタを使うことによって、特定のHTMLだけに装飾をすることができます。

要素を指定して文字の大きさと色を指定しましょう
先ほどまではp要素すべてが装飾されていました。今回は2つ目の段落だけが装飾されるように、以下の手順でコードを編集していきましょう。

HTMLファイルで、2つ目の段落のp要素にclass名をつける
CSSファイルで、p要素につけたclass名に対して装飾する
HTML_CSS/3-3/index3-3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p class="second-message">
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

style3-3.cssに以下のように追記しましょう。

style3-3.css

p {
font-size: 24px;
color: red;
}
.second-message {
color: orange;
font-size: 12px;
}

ブラウザで確認しましょう
画面をリロードして、CSSが正しく適用されているか確認しましょう。以下のように表示されていれば成功です。

 

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

style3-3.cssファイルのクラス名指定で、.second-messageに打ち間違いやスペルミスがある
style3-3.cssファイルのクラス名指定で、.second-messageの先頭のドット（ . ）が抜けている
colorやorangeなどにスペルミスがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
id属性とidセレクタについて理解しよう
class属性とclassセレクタの他にも、特定の要素を装飾する方法があります。
それは、id属性とidセレクタです。

idアイディー属性
id属性とは特定のHTML要素のみに対して、名前を指定することができる属性です。
id属性の属性値をid名といいます。

id属性には「1つのページ内で、同じid名を複数のHTML要素に付与しない」という慣例が存在します。ブラウザに関連する他の言語が、想定した挙動にならない場合があるためです。
したがって、「1つのページ内には、同じid名を持つHTML要素が存在しない」ように命名しましょう。

 

例えば、<p>...</p>に対して"third-message"というid名を付与する場合は、以下のように記載します。

【例】sample.html
<p id="third-message">
テキストテキストテキスト
</p>

CSSではid名をセレクタと指定して、装飾することができます。

idアイディーセレクタ
HTMLで指定したid名をCSSのセレクタとして使用することができます。idセレクタを指定する場合は、「#id名」の形でCSSファイルに記述します。

【例】sample.css
#third-message {
color: blue;
}

idセレクタを使うことによって、特定のHTMLだけに装飾をすることができます。

要素を指定して文字の大きさと色を指定しましょう
class属性と同様にして、以下の手順でコードを編集しましょう。

HTMLファイルで、3つ目の段落のp要素にid名をつける
CSSファイルで、p要素につけたid名に対して装飾する
HTML_CSS/3-3/index3-3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
１つ目の段落です
</p>
<p class="second-message">
2つ目の段落です
</p>
<p id="third-message">
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

style3-3.cssに以下のように追記しましょう。

style3-3.css
p {
font-size: 24px;
color: red;
}
.second-message {
color: orange;
font-size: 12px;
}
#third-message {
color: blue;
}

ブラウザで確認しましょう
画面をリロードして、CSSが正しく適用されているか確認しましょう。
以下のように表示されていれば成功です。

 

見本通りに表示されない場合は、以下の可能性があります。確認してみましょう。

style3-3.cssファイルのid名指定で、#third-messageに打ち間違いやスペルミスがある
style3-3.cssファイルのid名指定で、#third-messageの先頭のシャープ（ # ）が抜けている
colorやblueなどにスペルミスがある
style3-3.cssファイルで、閉じ括弧（ } ）が無い
テキストの一部にCSSを指定する方法を学ぼう
テキストの一部だけに、CSSを指定することもできます。そのためによく使用する要素が、span要素です。

spanスパン要素
span要素は、テキストの一部だけを装飾するために使用される要素です。部分的にテキストのフォント調整、文字色・背景色を変更するのに頻繁に使用されます。

ここでは、見出しのテキストの一部分を、青色に変えます。以下のようにindex3-3.htmlに追記しましょう。行うことは、

「見出し」の前後を<span>...</span>で囲む
span要素にblueクラスを設定する
CSSファイルで、blueクラスにプロパティを設定する
です。

部分的にCSSを指定したい箇所にspan要素を記述しましょう
まずは、以下のようにindex3-3.htmlに追記しましょう。

HTML_CSS/3-3/index3-3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
<link rel="stylesheet" href="style3-3.css">
</head>
<body>
<h1>
これは<span class="blue">見出し</span>です
</h1>
<p>
１つ目の段落です
</p>
<p class="second-message">
2つ目の段落です
</p>
<p id="third-message">
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

部分的にCSSを指定しましょう
続いて、style3-3.cssに以下のように追記しましょう

style3-3.css
p {
font-size: 24px;
color: red;
}
.second-message {
color: orange;
font-size: 12px;
}
#third-message {
color: blue;
}
.blue {
color: blue;
}

ブラウザで確認しましょう
画面をリロードしてCSSが正しく適用されているか、確認しましょう。以下のように表示されていれば成功です。

 

要点

CSSファイルの読み込みはHTMLのhead要素の中で行う。

link要素を用いてHTMLファイルからCSSファイルを読み込むことができる。

CSSの記述は、セレクタ・プロパティ・値から成り立っている。

セレクタを用いて、CSSを適用する箇所を決める。 プロパティはCSSで何を装飾するのかを決める（文字の色や大きさ、余白など）。

colorプロパティで文字の色を変えることができる。 font-sizeプロパティで文字の大きさを変えることができる。

classセレクタを用いることで、特定の箇所だけにCSSを適用することができる。

idセレクタを用いることで、特定の箇所だけにCSSを適用することができる。

1つのページ内に、同じid名を持つHTML要素を配置しない。

span要素を使うことでテキストの一部分にCSSの装飾を加えられる。

 

MacBookで使えるショートカットキー

ショートカットキーとは、コンピューターに特定の動作をさせるために押すキーのことを指します。マウス（トラックパッド）で行っている操作を、ショートカットキーで置き換えることができます。 ショートカットキーは、修飾キーと文字キーの組み合わせから成っているものがほとんどです。修飾キーを押しながら文字キーを入力します。 修飾キーの例には以下の種類があります。キーボード上の位置を確認し、合わせてその記号も覚えておきましょう。

記号

「command」キー ⌃

「control」キー ⌥

「option」キー ⇧

「shift」キー ⇪

「caps lock」キー

fn ファンクションキー 

⌘ C 選択した文字などをコピーする

⌘ V コピーした文字などを貼り付ける

⌘ X 選択した文字などを切り取る

⌘ A 全選択する ⌘ Z 1つ前に戻す

HTMLとCSSの概要

プログラミング html

私達は日頃、様々なWebページを閲覧しています。それらのページの情報は、HTMLとCSSという2つの言語によって構成されています。

 

HTML（HyperText Markup Language）エイチティーエムエル（ハイパー テキスト マークアップ ランゲージ）
ウェブサイトに表示される情報を記載する言語です。
〇〇.htmlという名前のファイルに記述します（例：test.html）。

CSS（Cascading Style Sheets）シーエスエス（カスケーディング スタイル シート）
HTMLに装飾を加えるための言語です。
〇〇.cssという名前のファイルに記述します（例：style.css）。

拡張子
拡張子は、ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列です。
例えばhtmlのファイルを作成する場合は〇〇.htmlとなり、CSSの場合は〇〇.cssとなります。このように、言語ごとに拡張子が異なります。

 

HTMLはブラウザ上に情報を表示するための言語です。したがってHTMLだけでも情報を表示することができます。
しかしHTMLだけでは、下の図のように質素なウェブサイトに仕上がってしまいます。

 

これを解決するためにCSSを用います。
CSSを用いることで、ユーザーが見やすい形にウェブサイトを装飾することができます。

 

したがって、HTMLとCSSはセットで使用するものと認識しておきましょう。

HTMLをブラウザに表示させよう
ここではHTMLを実際にブラウザ（PC画面）に表示させます。これまで本章で学んだことを実践しましょう。

以下の指示に従い、ファイルを作成しましょう
以下の手順で、HTMLを記述するためのファイルを作成します。

1. テキストエディタを起動します
テキストエディタとは、直前のレッスンでインストールしたVSCodeのことです。
command（⌘） を押しながら スペースを押して、Spotlight検索を行います。vsと入力するだけでVSCodeが予測変換されます。Enterキーを押下して、VSCodeを起動しましょう。

2.ファイルを新規作成します
command（⌘） を押しながら N を押すと、ファイルを新規作成できます。

3.test.htmlという名前でファイルを保存します
command（⌘）キー を押しながら+ S を押すと、ファイル保存のためのポップアップが出ます。下図に従って、ファイルをデスクトップフォルダに保存してください。
ファイル名はtest.htmlです。HTMLのファイルなので拡張子は.htmlとなります。

 

HTMLを記述してみましょう

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学習用ウェブサイト</title>
</head>
<body>
<h1>
これは見出しです
</h1>
<p>
1つ目の段落です
</p>
<p>
2つ目の段落です
</p>
<p>
3つ目の段落です。<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>

HTMLファイルをブラウザに表示させましょう
いま記述したHTMLをブラウザに表示させてみましょう。いくつか方法がありますが、一番簡単な方法は以下の手順のように、HTMLファイルをFinderからブラウザ上にドラッグ＆ドロップすることです。

ブラウザで新規タブを開いておく
1の状態でcommand（⌘） + スペースでSpotlightを開く
finderと入力してFinderを開く
Finderでデスクトップに移動
test.htmlをブラウザにドラッグ&ドロップする
デスクトップにtest.htmlがない場合は保存場所を間違えている可能性があるため、もう一度ファイルを作り直しましょう

今後も同じ方法でHTMLの確認をするので、こちらの操作は覚えておきましょう。

HTMLがブラウザに正しく表示されているか確認しましょう
ブラウザが以下のように表示されていれば成功です。

 

このHTMLの一つひとつの構造については次の章で詳細に学びます。
普段見ているウェブサイトに比べると質素な見た目です。これはHTMLだけでCSSによる装飾が無いためです。

 

要点

Webサイトの見た目はHTMLとCSSの2つの言語からできている。

HTMLはWebサイトに表示する情報を記載する言語 CSSはHTMLを装飾するための言語 HTMLだけでもWebサイトは表示できるが、見た目が質素になるため、CSSも合わせて必要になる。

HTMLはWebサイトに表示する情報を記載する言語。 CSSはHTMLを装飾するための言語。

HTMLファイルは〇〇.html、CSSファイルは〇〇.cssという拡張子をつけてファイルを作る。

HTMLファイルをブラウザに表示させるためには、ファイルをブラウザにドラッグ&ドロップする。

 

Ruby 機能

html プログラミング

用意された機能
Rubyには、最初からさまざまな機能が用意されています。

プログラムを書くということは、この機能を適宜呼び出して使用することと言い換えてもよいでしょう。

文字列を記述する、数値を計算する、配列で複数の要素を管理するなど、これらはすべてRubyというプログラミング言語に用意された機能です。

そしてこのような予め用意された機能のかたまりを「ライブラリ」と呼びます。

ライブラリ
ライブラリとは、汎用性の高いプログラムを再利用可能な形でまとめたものです。

Rubyではライブラリに用意されている機能を呼び出すことによって、プログラムを動かしています。

 

ライブラリの種類
ライブラリには大きく分けて以下の3種類があります。

標準ライブラリ
組み込みライブラリ
外部ライブラリ


標準ライブラリ
Rubyに標準で用意されているライブラリです。

インストールは不要ですが、使用する際には明示的に読み込む必要があります。代表的なものとして、日付を扱うDateクラスがあります。

 

組み込みライブラリ
標準ライブラリの中でも、特に利用する頻度が高いライブラリです。

文字列のStringクラスや数値のIntegerクラス、配列のArrayクラス、ハッシュのHashクラスなどが該当します。使用する際の読み込みは必要ありません。

外部ライブラリ
世界中の有志のエンジニアによって提供されるライブラリです。

Rubyにおける外部ライブラリはgemと呼ばれます。使用するためにはインストールが必要で、かつ読み込みの記述が必要です。

Ruby クラス

プログラミング html

既存のクラスの引き継ぎ

Rubyではデータの元となる設計図を作り、その設計図を元に実体となるデータを作るという手順を踏むのでした。

この設計図をクラス、実体となるデータをインスタンスと呼びます。

実はこのクラスは親子関係を作ることができます。親子関係とは、既存のクラスの情報を元に新しいクラスを作るということです。

これを「クラスの継承」と呼びます。

クラスの継承
クラスの継承とは既存のクラスを元に新しいクラスを作ることです。

このとき、新しいクラスを子クラス（またはサブクラス）、元になったクラスを親クラス（またはスーパークラス）と呼びます。

では、なぜクラスの継承が必要なのでしょうか？

それは、クラスの継承を使えば、共通する部分をまとめることができて効率的だからです。

例えば、パトカー、消防車、救急車のクラスを作成するならば、3つに共通する情報をまとめた自動車クラスを作成し、その自動車クラスを継承したクラスを作成したほうが効率的です。

そうすれば、各クラスは自動車が共通して持つ情報を引き継ぎつつ、それぞれ独自の情報を持つことができます。

 

継承の書き方を知ろう
あるクラスを継承して新しいクラスを作る場合には以下のように「新しいクラス < 元となるクラス」と書きます。

【例】

class PoliceCar < Car

end

 

継承されるものを知ろう
クラスを継承すると、親クラスから子クラスへ以下のものが引き継がれます。

親のインスタンス変数
親のインスタンスメソッド
例えば、Carクラスを継承したPoliceCarクラスを作成するコードを以下に示します。

class Car

def initialize(car_type, capacity)
@name = car_type
@capacity = capacity
end

def info
puts "車種：#{@name}　乗車定員：#{@capacity}人"
end

end

class PoliceCar < Car

end

police_car = PoliceCar.new("パトカー", 5)

police_car.info

# ターミナル出力結果
# 車種：パトカー　乗車定員：5人

上記を見てみると、PoliceCarクラスの中には何も記述をしていませんが、継承元のCarクラスのインスタンス変数およびインスタンスメソッドを使うことが確認できます。

 

インスタンスメソッドを追加する方法
続いて子クラスに独自のインスタンスメソッドを追加する方法について学びましょう。

と言っても方法は簡単です。子クラス内に新しくメソッドの定義を追加するだけです。

先ほどのPoliceCarクラスを例に説明をします。以下を見てください。

【例】

class Car
def initialize(car_type, capacity)
@name = car_type
@capacity = capacity
end

def info
puts "車種：#{@name}　乗車定員：#{@capacity}人"
end

end

class PoliceCar < Car

def siren
puts "ウゥ〜ウゥ〜"
end

end

police_car = PoliceCar.new("パトカー", 5)

police_car.siren

# ターミナル出力結果
# ウゥ〜ウゥ〜

上記では、PoliceCarクラス内にsirenメソッドを新たに追加し、それを実行しています。

このように子クラスにインスタンスメソッドを追加することで、そのクラス固有のメソッドを定義することができます。

メソッドを上書きする方法
最後にメソッドを上書きする方法について解説します。

親クラスにあるメソッドと同じ名前のメソッドを子クラスで定義すると、メソッドを上書きすることができます。

これをメソッドの「オーバーライド」と呼びます。

オーバーライド
オーバーライドとは、親クラスのメソッドを子クラスに同名のメソッドを定義することによって上書きすることを指します。

例えば、以下のコードを見てください。

【例】

class Car
def initialize(car_type, capacity)
@name = car_type
@capacity = capacity
end

def info
puts "車種：#{@name}　乗車定員：#{@capacity}人"
end

end

class PoliceCar < Car

def info
puts "車種：#{@name}　乗車定員：#{@capacity}人　パトロール時間：24時間"
end

def siren
puts "ウゥ〜ウゥ〜"
end

end

police_car = PoliceCar.new("パトカー", 5)

police_car.info

# ターミナル出力結果
# 車種：パトカー　乗車定員：5人　パトロール時間：24時間

上記では、Carクラスで定義されたinfoメソッドと同名のメソッドをPoliceCarクラス内で定義しています。

これによって、PoliceCarクラスを元に生成されたインスタンスでinfoメソッドを実行すると、上書きされた処理が実行されるようになります。

Rubyを深掘る

プログラミング html

まずは、ブロックを使った簡単なコードを以下に示します。

【例】

ages = [20, 56, 32]

ages.each do |age|
puts age
end

# ターミナル出力結果
# 20
# 56
# 32

上記はeachメソッドで配列の要素を1つずつ取り出してターミナルに出力しています。

見慣れたコードかもしれませんが、実はこのdo〜endまでをRubyではブロックと呼びます。また|age|のageはブロック引数と呼ばれます。

Rubyにおいて、ブロックは頻出の文法なのでまずは用語をしっかり覚えておきましょう。

またブロックをメソッドの引数として渡すことができるのもブロックの特徴です。

例えば、Rubyに標準で組み込まれているeachメソッドは、ブロックを引数として受け取るメソッドの代表例です。

ここまでブロックの基本的な書き方について説明しました。

Rubyには、これまでに学んだtimesメソッドやeachメソッド以外にも多くのメソッドにおいてブロックが用いられています。

では、ブロックはこのようにRubyで元から定義されているメソッドでしか使えないのでしょうか？

そんなことはありません。自分で定義したメソッドでもブロックを使うことができます。

ここでは自分で定義したメソッドでブロックを用いる方法について解説します。

では、はじめに以下のコードを見てください。

【例】

def greeting
puts "Hello"
end

greeting

# ターミナル出力結果
# Hello

解説するまでもありませんね。ただテキストを出力するメソッドを実行しているだけです。

では上記のコードを少し編集します。

【例】def greeting
puts "Hello"
end

greeting do
puts "Goodbye"
end

# ターミナル出力結果
# Hello

greetingメソッドの呼び出し部分に適当なブロックを付けてみました。

実行結果を見てみると、先ほどと変化はありません。

メソッドに渡したブロックを実行するには、以下のようにメソッドの定義内にyieldを記述する必要があります。

【例】

sample.rb
def greeting
puts "Hello"
yield
end

greeting do
puts "Goodbye"
end

# ターミナル出力結果
# Hello
# Goodbye

すると、メソッドに紐付けたブロックの処理が実行されていることが確認できます。

 

ブロックをメソッドの引数として明示的を受け取る方法を知ろう

ブロックをメソッドの引数として明示的に受け取ることもできます。

メソッドの引数としてブロックを明示的に受け取る場合には、引数名の前に&をつけます。また受け取ったブロックを実行する場合は、callメソッドを実行します。

以下を見てください。

【例】

def greeting(&block)
puts "Hello"
block.call("Goodbye")
end

greeting do |text|
puts text
end

# ターミナル出力結果
# Hello
# Goodbye

少し複雑になりましたが、先ほどのコードと上記のコードをじっくり見比べてください。

上記のコードでは、メソッドの引数としてブロックを明示的に受け取るために、メソッドの定義部分で&blockと書いています。

そしてそのブロックを実行するためにcallメソッドを実行しています。

callメソッドには引数を渡すことができます。今回はGoodbyeという文字列をブロックに渡しています。

するとメソッド呼び出し時に渡しているブロックのブロック引数（|text|）にGoodbyeが代入され、ブロックが実行されます。

プログラミング 条件分岐について

プログラミング html

case文

case文とは、条件分岐を表現するための文法です。複数の条件を指定する時に、if文のelsifを重ねるよりもシンプルにコードを書くことができます。

並列する条件が多数ある場合は、if文よりもcase文を使った方がコードとして読みやすくなります。

case文の構文は以下の通りです。

case 対象のオブジェクトや式
when 値1
# 値1に一致する場合に実行する処理
when 値2
# 値2に一致する場合に実行する処理
when 値3
# 値3に一致する場合に実行する処理
else
# どれにも一致しない場合に実行する処理
end

 

if文と比較しながらcase文のコードを見てみましょう。

例えば以下のようなコードがあったとします。まずはif文からです。

例 if文

country = "Japan"

if country == "Japan"
puts "こんにちは"
elsif country == "America"
puts "Hello"
elsif country == "France"
puts "Bonjour"
elsif country == "China"
puts "你好"
elsif country == "Italy"
puts "Buon giorno"
elsif country == "Germany"
puts "Guten Tag"
else
puts "..."
end

 

case文

country = "Japan"

case country
when "Japan"
puts "こんにちは"
when "America"
puts "Hello"
when "France"
puts "Bonjour"
when "China"
puts "你好"
when "Italy"
puts "Buon giorno"
when "Germany"
puts "Guten Tag"
else
puts "..."
end

上記では、case countryの部分が条件の対象となります。そして、whenで指定した値とcountryの中身が一致するかで条件を判定しています。

if文と比べると記述がシンプルになっていることが確認できます。このように並列する条件が多数ある場合は、case文を使うことを検討しましょう。

 

繰り返し処理

次に繰り返し処理について学びましょう。

繰り返し処理で思い浮かぶのはeachメソッドではないでしょうか。eachメソッドは、配列に対して使うことができるメソッドでした。

Rubyでは他にも繰り返し処理用の構文が用意されています。

Rubyの繰り返し処理用の構文の中の1つがwhile文です。

繰り返し処理を行うためのRubyの構文です。指定した条件が真である間、処理を繰り返します。

while文の構文は以下の通りです。

【例】

while 条件式
# 条件が真である時に繰り返す処理
end

具体例

number = 0

while number <= 10
puts number
number += 1
end

# ターミナル出力結果
# 0
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10

上記のコードでは、一番初めに変数numberに0を代入しています。そしてwhile number <= 10の部分では、条件を判定しています。

当然、条件は0 <= 10で真になるので、puts numberで0が出力されます。number += 1では、変数numberに1を加えています。

endまで行ったらwhile文は繰り返し処理を行うかどうかの判定を行ないます。先ほど変数numberの値は1になったので、条件は1 <= 10で真になりますね。

したがって、再度while文の中の処理を実行します。これを条件が偽になるまで繰り返します。結果的にターミナルには0から10までの連番が出力されます。

 

無限ループについて学ぼう

繰り返し処理を実装する際に、覚えておきたい概念として「無限ループ」があります。もしかしたら、みなさんも日常会話で聞いたことがあるかもしれません。

この無限ループという言葉は、元はプログラム上で使われていた用語です。改めて説明するまでもないですが、無限ループとは「処理が永遠に繰り返されること」を指します。

ここでは無限ループを2つのサンプルコードで紹介します。

まずは1つめです。先ほどのコードを再掲します。

【例】

number = 0

while number <= 10
puts number
number += 1
end

 

例えば上記のコードからnumber += 1の部分を削除したらどうなるでしょうか？

number変数の値は常に0のままなので、while number <= 10の判定は常に真となり、無限に0がターミナルに出力されます。

これが無限ループです。

では2つめです。上記のコードを少し編集しました。

【例】

number = 0

while true
puts number
number += 1
end

# ターミナル出力結果
# 0
# 1
# 2
# 3
# 4
# 5
# 6
# 7
# 8
# 9
# 10
# .
# .
# .

while trueの部分に着目してください。while文ではwhileの右の式を判定し、最終的に真偽値（true/false）に変換して繰り返すかどうかを決めます。

上記のコードは、この特性を利用し、条件式の部分にはじめからtrueと書くことによって意図的に無限ループを発生させているのです。

ここまで2つの例で無限ループを学びました。

無限ループはコンピュータに大きな負荷をかけてしまうので、繰り返し処理を実装する場合は特に注意が必要です。

 

ループから抜け出す方法を学ぼう

最後にループから抜け出す方法について学びましょう。

自分で設定したループからわざわざ抜け出す必要なんてあるのかと疑問に思われるかもしれませんが、ある特定の条件になったらループから抜け出すという処理はよく使います。

今回はその基本を学びましょう。ループから抜け出すにはbreakを使います。

break
breakは、eachメソッドやwhile文などのループから脱出するために使われます。

具体例を見てみましょう。

先ほどのコードを再掲します。

【例】

number = 0

while number <= 10
puts number
number += 1
end

実行結果が0〜10までの連番になることは解説しました。では上記のコードを一部編集します。以下を見てください。

【例】

number = 0

while number <= 10
if number == 5
break
end
puts number
number += 1
end

# ターミナル出力結果
# 0
# 1
# 2
# 3
# 4

上記のコードでは、if文を追加しています。そしてnumber変数の値が5だったときにbreakを実行しています。

すると、実行結果を見てもわかる通り、出力結果は4で止まっています。

つまり、number変数の値が5の時にif文内のbreakが実行され、ループから抜け出していることが確認できます。

このようにif文などの条件分岐とbreakを使うと、特定の条件のときにループを脱出することができます。

実際の現場ではもっと複雑な条件が使われます。今回は仕組みを理解するためにシンプルなコードで解説しました。