Newer
Older
hoge / info / JDchokai-explain.html
@asahi kamakami asahi kamakami on 16 Mar 2022 69 KB info 追加
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>JD説明シート</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../jdmain.css">
<script type="text/javascript" src="../jdinit.js"></script>
<style>
h1.section-items{background-color: #D3DEF1; text-align:center;}
.program{color: White; background-color: black; font-size:20px; margin-bottom: 1em; }
.answer{color: White; background-color: #008080; font-size:20px; margin-bottom: 1em;}
img.ruby-ex-img{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.box1 {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  border: solid 3px #76f111;
}
.box1 li{
  padding: 5px;
  font-weight: 400;
  list-style: none;
}

h2{
  margin-top: 30px;
}
p{
   font-size: 1.1rem;
   margin-bottom: 10px;
  }
  table{
  
  }
  td{
    text-align: center;
    font-weight: bold;
  }
  .red{
    color: rgb(255, 70, 70);
    font-size: 1.6rem;
  }
  .orenge{
    position: relative;
    background: linear-gradient(transparent 40%, #ffc58f 40%);
  }
  h3{
    font-size: 2.0rem;
    color: orange;
    margin-bottom: 30px;
    margin-top: 30px;
  }
  .csv-inner-li{
    padding: 5px;
  font-size: 1.2rem;
  list-style: none;
  }
  .csv-li{
    list-style: decimal;
    text-align: left;
    font-size: 1.2rem;
  }
  .explain-list{
    color: #000;
  }
  .explain-list:hover{
    color: blue;
  }
  .p-red{
    font-size: 1.3rem;
    color: red;
  }
  .blue{
    color: rgb(0, 255, 255)
  }
  .comment{
    color: yellow;
  }
  @media screen and (max-width: 746px){
    p{
   font-size: 0.9rem;
  }
  .red{
    font-size: 1.2rem;
  }
  .explain{
    font-size: 1.0rem;
    padding-bottom: 30px;
  }
  h3{
    font-size: 1.6rem;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .icon{
    margin-top: 20px;
    margin-bottom: 20px;
  }
  li{
    padding: 4px;
  font-size: 1.0rem;
  }
  .section-title::before{
    background-image: none;
    vertical-align: baseline;
    content: '';
    position: absolute;
    bottom: -20px;
    display: inline-block;
    width: 60px;
    height: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: rgb(255, 153, 0);
  }
  .section-title::after{
    display: none;
  }
  }
</style>
</head>
<body>
  <header id="header">この部分は header.html に置き換わる</header>
  <div class="wrapper">
    <h1 class="section-title">ジュニアドクター教材</h1>
    <section class="csv-list">
      <ol class="csv-ol">
        <a href="#base" class="explain-list">
          <li class="csv-li" style="list-style: none; font-size: 1.3rem;">(0) 基礎内容</li>
        </a>
        <a href="#variable" class="explain-list">
          <li class="csv-li" style="list-style: none; font-size: 1.3rem;">(1) 変数</li>
        </a>
        <a href="#price" class="explain-list">
          <li class="csv-li" style="list-style: none;font-size: 1.3rem;">(2)値</li>
        </a>
        <a href="#process" class="explain-list">
          <li class="csv-li" style="list-style: none;font-size: 1.3rem;">(3)入出力処理</li>
        </a>
        <a href="#control" class="explain-list">
          <li class="csv-li" style="list-style: none;font-size: 1.3rem;">(4)制御構造</li>
        </a>
        <a href="#arran" class="explain-list">
          <li class="csv-li" style="list-style: none;font-size: 1.3rem;">(5)配列</li>
        </a>
        <a href="#method" class="explain-list">
          <li class="csv-li" style="list-style: none;font-size: 1.3rem;">(6)メソッド</li>
        </a>
        <a href="#pg-enjoy" class="explain-list">
          <li class="csv-li" style="list-style: none;font-size: 1.3rem;">(7)プログラムをもっと楽しくしてみよう!</li>
        </a>
      </ol>
    </section>

  <section id="base">
    <h1 class="section-title">(0) 基礎内容</h1>
      <h2>[1]キーボードについて</h2>
      <p>キーボードの配置は主に以下の通りである。</p>
    <img class="ruby-ex-img" src="../img/keyboard.png" alt="キーボード">
    <p><span class="orenge">赤丸で囲まれている部分を【コントロール】といい、プログラムの操作をする上で大事なキーとなるため必ず覚えておく。他にも、【shift(シフト)】というキーもよく使うものであるので必ず覚えておくこと。</span>コントロールを押しながら別のキーを押す、シフトを押しながら別のキーを押すというように別のキーと組み合わせて使うので、その組み合わせをしっかり記憶しておくことでプログラムを書く際にスムーズに進めることが出来る。このJD説明書と別冊の教科書ではコントロールを押しながら、1を押すことを【C-1】と記載する。【C-●】と出てきたら、それはコントロールを押しながら●のキーを押す操作である。</p>
    <div class="box1">
    <ul>
      <li class="csv-inner-li">キーボードの配置は覚えておくこと。特にコントロールとシフトは大事</li>
      <li class="csv-inner-li">【C-1】とはコントロールを押しながら1を押すことである</li>
      <li class="csv-inner-li">【C-●】とはコントロールを押しながら別のキーを押す説明である</li>
    </ul>
    </div>
    
    <h2>[2]画面の操作について</h2>
    <h3>emacs</h3>
    <p><span class="orenge">【C-1】と入力することで、emacs(いーまっくす)というタブを選択することが出来る。</span>このタブを使ってプログラムを作成することが出来る。もしemacsというタブを選択することが出来ない場合、何もない場所を左クリックしてメニューを表示し、上にあるemacsを選んで新しくタブを出す。</p>
    <img class="ruby-ex-img" src="../img/emacs.png" alt="emacs">
    <h3>kterm</h3>
    <p>【C-2】と入力することで、kterm(けーたーむ)というタブを選択することが出来る。<span class="orenge">このタブを使ってプログラムを実行したり、作ったプログラムを確認したり出来る。</span>もしktermというタブを選択することが出来ない場合、何もない場所を右クリックしてメニューを表示し、上にあるktermを選んで新しくタブを出す。</p>
    <img class="ruby-ex-img" src="../img/kterm.png" alt="kterm">
    <div class="box1">
    <ul>
      <li class="csv-inner-li">【C-1】でemacsを選ぶ事ができ、ここでプログラムを作成する</li>
      <li class="csv-inner-li">【C-2】でktermを選ぶ事ができ、ここでプログラムを実行する</li>
    </ul>
    </div>
    
    <h2>[3]プログラムの基本的なルール</h2>
    <p><span class="orenge">プログラムは上から1行づつ書いていき、上から順に実行されていく。</span>途中から・下からは実行はされない。プログラムは1文字でもおかしい部分があると動いてはくれないため、誤字脱字などに気をつける。</p>
    <pre class="program">
    #!/usr/bin/env ruby
    #-*- coding: utf-8 -*-

    print("こんにちは!")
    print("JD 鳥海塾の〇〇〇〇です。\n")
    </pre>
    <pre class="answer">
    こんにちは!<br>
    JD 鳥海塾の〇〇〇〇です。<br>
    </pre>
    <p><span class="orenge">プログラムは必ず保存してから実行する。</span>保存を行うときには【C-x】【C-s】保存が出来ると、左下にある**のマークが--に変わる。**が保存できていないという証で、ーーが保存完了の証。</p>
    <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">プログラムは上から1行づつ書いていき、上から順に実行されていく</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">【C-x】【C-s】でプログラムを保存することが出来る</li>
    </ul>
    </div>
    
    <h2>[4]プログラムファイルの作り方</h2>
    <p><span class="orenge">プログラムファイルを作るためにはemacs上で【C-x】【C-f】を入力する。すると下の部分に青文字で Find file: ~/ というテキストが出てくる。</span></p>
    <pre class="program">
    <span style="color: rgb(0, 255, 255)">Find file: ~/</span>
    </pre>
    <p>そこに続けて Ruby/my1.rb と入力することでmy1.rbというプログラムファイルを作成することが出来る。<span class="orenge">my1 の部分は自分の好きな名前を入れる事が出来る。 kudamono.rb yasai.rb keisan.rb などである。</span>作成出来ると何も書いていない真っ白なページが出来るので、そこにプログラムを書くことが出来る。書き終わったら保存を忘れないこと。</p>
    <pre class="program">
    <span style="color:rgb(0, 255, 255)">Find file: ~/</span>Ruby/my1.rb <span style="color: yellow;">#my1.rbは自分が分かりやすい名前にしておく</span>
    </pre>
    <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">プログラムファイルを新しく作るにはemacs上で【C-x】【C-f】を入力</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">Ruby/my1.rb と入力することでmy1.rbというプログラムファイルを作成することが出来る。my1 の部分は自分の好きな名前を入れる事が出来る。</li>
    </ul>
    </div>
  </section>

<section id="variable">
  <h1 class="section-title">(1) 変数</h1>
    <h2>[1]変数について</h2>
  <p><span class="orenge">変数とは「値」を入れておく「箱」のようなもので、事前に「値」を格納しておき、後で簡単に取り出せるように出来る。</span></p>
  <p>変数を用意するにはプログラムにはこのように書く。</p>
  <pre class="program">
  apple = <span style="color: yellow;">#appleという名前をつけた「変数」を用意</span>
  </pre>
  <p><span class="orenge">この記述だけで「apple」という「変数」を作ることが出来る。</span>では早速この変数に値を格納する。</p>
  <pre class="program">
  apple = 3 <span style="color: yellow;">#「変数」に3を格納</span>
  </pre>
  これでappleという「変数」に3という「値」を格納することが出来た。<span class="orenge">この格納する動きのことを代入と表現する。</span>変数を利用して計算のプログラムを作成する。
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  apple = 3 <span style="color: yellow;">#appleという「変数」に「3」を代入</span>
  print(appel + 17) <span style="color: yellow;">#appleには「3」が格納されているので、3 + 17 になる</span>
  </pre>
  <pre class="answer">
  20
  </pre>
  
  <h2>[2]変数のルール</h2>
  <p><span class="orenge">変数には自分の好きな名前をつけることが出来るが、使える文字は英数字とアンダースコア(_)のみで、最初の文字は英語の小文字でなければならない</span></p>
  <img class="ruby-ex-img" src="../img/variable6.png" alt="変数のルール">
  <p>上記のルールを守った上で複数の変数を使用したプログラムを作成する。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  apple = 3
  orange = 5
  japan = 2
  google_earth = apple + orange + japan
  <span style="color: yellow;">#3つの変数の値の合計をgoogle_earthに代入する</span>
  print(google_earth)
  </pre>
  <pre class="answer">
  10
  </pre>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">変数とは「値」を入れておく「箱」のようなもので、事前に「値」を代入しておき、後で簡単に取り出せるように出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">変数 = 値で変数の中に値を代入することが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">変数には自分の好きな名前をつけることが出来るが、使える文字は英数字とアンダースコア(_)のみで、最初の文字は英語の小文字でなければならない。</li>
    </ul>
</section>


<section id="price">
  <h1 class="section-title">(2)値</h1>
  <h2>[1]値について</h2>
  <p><span class="orenge">プログラム内において、値とはプログラムの処理の対象になるデータのこと。</span></p>
  <p>これについてはプログラムを確認しながら説明していく。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print(1 + 2)
  </pre>
  <pre class="answer">
  3
  </pre>
  <p>このプログラムはただ「1+2」を行い「3」を出力しただけのプログラムであるが、この動き自体が実は凄いことをしている。</p>
  <p>このプログラムには「3」という文字は一切書かれていない。それにも関わらず、プログラムは「1」と「2」という数字を対象として、「足し算という処理」を行い、「3」を導き出している。</p>
  <p><span class="orenge">今回のプログラムの「1」と「2」のように「処理の対処になるもの」のことを「値」と呼ぶ</span>。</p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">値とはプログラムの処理の対象になるデータのことである。</li>
    </ul>
  </div>
  
  <h2>[2]値の形</h2>
  <p>日本語にひらがなとカタカナがあるように、値にも様々な種類がある。</p>
  <p><span class="orenge">その中で代表的なのか「数値」と「文字列」である。</span></p>
  <h3>数値</h3>
  <p><span class="orenge">数値とは「1」や「3.5」のような整数や少数のことを意味する。足し算・引き算、掛け算などの計算をするときなどに使える。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  number1 = 3 <span style="color: yellow;">#「数値」の3</span>
  number2 = 5 <span style="color: yellow;">#「数値」の5</span>
  sum = number1 + number2
  print(sum)
  </pre>
  <pre class="answer">
  8 <span style="color: yellow;">「数値」の3と「数値」の5の足し算になるのでそのまま計算し、「数値」の8という結果になる。</span>
  </pre>
  <h3>文字列</h3>
  <p><span class="orenge">文字列とは複数の文字が組み合わさったもの。"(ダブルクオーテーション)で囲んで表現する。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  number1 = "3" <span style="color: yellow;">#「文字列」の3</span>
  number2 = "5" <span style="color: yellow;">#「文字列」の5</span>
  sum = number1 + number2 <span style="color: yellow;">#「文字列」の5と「文字列」の3の足し算</span>
  print(sum)
  </pre>
  <pre class="answer">
  35 <span style="color: yellow;">「文字列」の3と「文字列」の5の足し算になるのでそのまま連結し、「文字列」35という結果になる。</span>
  </pre>
  <p>どちらも3と5の足し算であるが、結果がこんなにも違ってくる。値の形を間違えてプログラムにエラーが起こることが多いので、十分注意する。</p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li">値には「数値」と「文字列」の2種類の形がある。</li>
      <li class="csv-inner-li" class="csv-inner-li">同じ文字でも「数値」と「文字列」では全く違う。</li>
      <li class="csv-inner-li" class="csv-inner-li">「数値」と「文字列」を間違うことで起こるエラーに注意する。</li>
    </ul>
  </div>
</section>

<section id="process">
  <h1 class="section-title">(3)入出力処理</h1>
  <h2>[1]gets</h2>
  <p><span class="orenge">getsとはキーボードからの入力を読み込むもの。人間が打ち込む値で、必ず文字列となる。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print("入力をおねがいします。\n")
  number1 = gets <span style="color: yellow;">#キーボードに打ち込んだ値をnumber1に代入</span>
  number2 = "さようなら"
  print("表示します。\n")
  print(number1)
  print(number2)
  </pre>
  <pre class="answer">
  入力をおねがいします。
  <span style="color: yellow;">こんにちは[Enter]</span> <span style="color: yellow;">入力待ちになるので「こんにちは」とキーボードで入力しEnterキーを押す</span>
  表示します。
  こんにちは
  さようなら
  </pre>
  <p>「入力をおねがいします。」と表示された後にユーザーの入力待ちになる。ここで「こんにちは」と入力し、その文字列がnumber1という変数に代入され、そのままプログラムは進行し、結果が表示される。<span class="orenge">getsを使うとプログラムを動かした後で自由に変数の中身を変更出来る。</span></p>
  
  <h3>.chomp</h3>
  <p>getsには打ち込んだ値の後ろに必ず「改行文字」が入力されている。改行文字とは改行の指示を出す文字のことである。「\n」と書く。</p>
  <p><span class="orenge">getsに.chompをつけて改行文字を切り取ることが出来る。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print("入力をおねがいします。\n")
  number1 = gets.chomp <span style="color: yellow;">#キーボードに打ち込んだ値をnumber1に代入</span>
  number2 = "さようなら"
  print("表示します。\n")
  print(number1)
  print(number2)
  </pre>
  <pre class="answer">
  入力をおねがいします。
  <span style="color: yellow;">こんにちは[Enter]</span> <span style="color: yellow;">入力待ちになるので「こんにちは」とキーボードで入力しEnterキーを押す</span>
  表示します。
  こんにちはさようなら <span style="color: yellow;">改行行文字を切り取ったので改行されずに並んで表示される</span>
  </pre>
  <p>改行文字を切り取ったため、「こんにちは」の後ろで改行されずに次の結果が表示されている。</p>
  
  <h3>.to_i</h3>
  <p><span class="orenge">getsで打ち込んだ値は必ず文字列であるが、「.to_i」を後ろにつけることで整数に変換出来る。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print("入力をおねがいします。\n")
  number1 = gets.chomp.to_i <span style="color: yellow;">#キーボードに打ち込んだ値をnumber1に代入</span>
  number2 = gets.chomp.to_i <span style="color: yellow;">#キーボードに打ち込んだ値をnumber2に代入</span>
  print("表示します。\n")
  print(number1 + number2)
  </pre>
  <pre class="answer">
  入力をおねがいします。
  <span style="color: yellow;">3[Enter]</span> <span style="color: yellow;">入力待ちになるので「3」とキーボードで入力しEnterキーを押す</span>
  <span style="color: yellow;">4[Enter]</span> <span style="color: yellow;">入力待ちになるので「4」とキーボードで入力しEnterキーを押す</span>
  表示します。
  7 <span style="color: yellow;">整数に変換されているので計算が出来る。</span>
  </pre>
  <p>文字列のままでは計算が出来ないが、整数に変換されているので「3 + 4」の計算が可能となり、結果は7が表示される。</p>
  <h3>.to_f</h3>
  <p><span class="orenge">こちらはto_iと違い、少数に変換することの出来るもの。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print("入力をおねがいします。\n")
  number1 = gets.chomp.to_f <span style="color: yellow;">#キーボードに打ち込んだ値をnumber1に代入</span>
  number2 = gets.chomp.to_f <span style="color: yellow;">#キーボードに打ち込んだ値をnumber2に代入</span>
  print("表示します。\n")
  print(number1 + number2)
  </pre>
  <pre class="answer">
  入力をおねがいします。
  <span style="color: yellow;">3.5[Enter]</span> <span style="color: yellow;">入力待ちになるので「3.5」とキーボードで入力しEnterキーを押す</span>
  <span style="color: yellow;">4.2[Enter]</span> <span style="color: yellow;">入力待ちになるので「4.2」とキーボードで入力しEnterキーを押す</span>
  表示します。
  7.7 <span style="color: yellow;">少数に変換されているので計算が出来る。</span>
  </pre>
  <p>少数も扱えるようになり、「3.5 + 4.2」の計算が可能となり、結果は7.7が表示される。</p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li">getsとはキーボードからの入力を読み込むもの。人間が打ち込む値で、必ず文字列となる。</li>
      <li class="csv-inner-li">getsに.chompをつけて改行文字を切り取ることが出来る。</li>
      <li class="csv-inner-li">.to_iを後ろにつけることで整数に変換出来る。</li>
      <li class="csv-inner-li">.to_fを後ろにつけることで少数に変換出来る。</li>
    </ul>
  </div>
  <h2>[2]printf</h2>
  <p><span class="orenge">指定した値と組み合わせて文章を出力することの出来るもの。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  name = "さとうたろう"
  number1 = 15
  number2 = 1.7
  
  printf("私の名前は%sです。\n",name) <span style="color: yellow;">#組み合わせたい値が文字列のときは%sを使う</span>
  printf("年齢は%d歳です。\n",number1) <span style="color: yellow;">#組み合わせたい値が整数のときは%dを使う</span>
  printf("身長は%fメートルです。\n",number2) <span style="color: yellow;">#組み合わせたい値が少数のときは%fを使う</span>
  </pre>
  <pre class="answer">
  私の名前はさとうたろうです。
  年齢は15歳です。
  身長は1.700000メートルです。
  </pre>
  <p>変数の中身を使って文章を作成することが出来る。これを使えば名前をユーザーに入力させてそれを表示するプログラムも作ることが出来る。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  name = gets.chomp
  
  printf("私の名前は%sです。\n",name) <span style="color: yellow;">#組み合わせたい値が文字列のときは%sを使う</span>
  </pre>
  <pre class="answer">
  <span style="color: yellow;">さとうたろう[Enter]</span><span style="color: yellow;">入力待ちになるので「さとうたろう」とキーボードで入力しEnterキーを押す</span>
  私の名前はさとうたろうです。
  </pre>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" >printfを使うと、指定した値と組み合わせて文章を出力することが出来る。</li>
    </ul>
  </div>
</section>

<section id="control">
  <h1 class="section-title">(4)制御構造</h1>
  <h2>[1]if</h2>
  <p><span class="orenge">ifはプログラムに分かれ道を作ることが出来る。「もしも○○であるならば、△△の処理を行う」というような動きをつけられる。</span></p>
  <p>if文を書き始める場合には、最初に「if」「end」を記述する。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span>
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>その後はどんな条件の時に「if」「end」の間に記述した動きをするか決める。今回はnumberが「数値の1」の時という条件をつける。<p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span> number == 1
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>最後にどんな動きをするのかを記述する。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span> number == 1
    print("ありがとう")
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>今回は「ありがとう」と出力する動きを記述した。これで、「もしもnumberが数値の1であるならば、「ありがとう」と出力する処理を行う」という動きを作成することが出来た。<p>
  <p>ここからもう1手順加える。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span> number == 1
    print("ありがとう")
  <span style="color: rgb(0, 255, 255)">else</span>
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  </p><span class="orenge">elseは、指定した条件が合わない時の処理を作成することが出来る。</span>今回の場合は、「もしもnumberが数値の1以外であるならば、△△の処理を行う」という条件を作ることが出来る。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span> number == 1
    print("ありがとう")
  <span style="color: rgb(0, 255, 255)">else</span>
    print("ごめんなさい")
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>これで、「もしもnumberが数値の1であるならば、「ありがとう」と出力する処理を行う」、「もしもnumberが数値の1以外であるならば、「ごめんなさい」と出力する処理を行う」という動きを作成することが出来た。</p>
  <p>では、動かしてみる。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print("数字を入力してください。\n")
  number = gets.chomp.to_i
  
  <span style="color: rgb(0, 255, 255)">if</span> number == 1
    print("ありがとう")
  <span style="color: rgb(0, 255, 255)">else</span>
    print("ごめんなさい")
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <pre class="answer">
  数値を入力してください。
  <span style="color: yellow;">1[Enter]</span>
  ありがとう
  </pre>
  <pre class="answer">
  数値を入力してください。
  <span style="color: yellow;">6739[Enter]</span>
  ごめんなさい
  </pre>
  <p>これで1を入力するとありがとう、1以外を入力するとごめんなさいを出力するプログラムを作成することが出来た。</p>
  <p>最後にここで、もう1つ動きを加えてみる。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  print("数字を入力してください。\n")
  number = gets.chomp.to_i
  
  <span style="color: rgb(0, 255, 255)">if</span> number == 1
    print("ありがとう")
  <span style="color: rgb(0, 255, 255)">elsif</span> number == 2 <span style="color: yellow;">#追加した部分</span>
    print("どういたしまして") <span style="color: yellow;">#追加した部分</span>
  <span style="color: rgb(0, 255, 255)">else</span>
    print("ごめんなさい")
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <pre class="answer">
  数値を入力してください。
  <span style="color: yellow;">1[Enter]</span>
  ありがとう
  </pre>
  <pre class="answer">
  数値を入力してください。
  <span style="color: yellow;">2[Enter]</span>
  どういたしまして
  </pre>
  <pre class="answer">
  数値を入力してください。
  <span style="color: yellow;">846[Enter]</span>
  ごめんなさい
  </pre>
  <p><span class="orenge">elsifは、「もしも○○であるならば、△△の処理を行う」という処理を追加することが出来る。</span></p>
  </p>これでこのプログラムは、「もしもnumberが数値の1であるならば、「ありがとう」と出力する処理を行う」、「もしもnumberが数値の2であるならば、「どういたしまして」と出力する処理を行う」、「もしもnumberが数値の1と2以外であるならば、「ごめんなさい」と出力する処理を行う」という動きをするようになった。</p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">if文は「もしも○○であるならば、△△の処理を行う」というように、プログラムに分かれ道を作ることが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">if文を書き始める場合には、最初に「if」「end」を記述する。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">elseは、指定した条件が合わない時の処理を作成することが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">elsifは、「もしも○○であるならば、△△の処理を行う」という処理を追加することが出来る。</li>
    </ul>
  </div>
  
  <h2>[2]while</h2>
  <p><span class="orenge">whileは「条件〇〇が正しいとき、△△を繰り返す処理を行う」という繰り返しの処理を行うときに使う。何度も繰り返すことをループという</span></p>
  <p>while文を書き始める場合には、最初に「while」「end」を記述する。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">while</span>
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>その後はどんな条件の時に「while」「end」の間に記述した動きをループさせるか決める。今回はnumberが「数値の5」以下の時はループさせ続けるという条件をつける。<p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">while</span> number < 5
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>最後にどんな動きをするのかを記述する。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">while</span> number < 5
    print("ありがとう\n")
    number -= 1
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p><span class="orenge">これで「number < 5 が正しいとき、ありがとうを出力し、numberの値を1増やす動きを繰り返す処理を行う」というプログラムが作成出来た。</span></p>
  <p>では、動かしてみる。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  number = 0
  
  <span style="color: rgb(0, 255, 255)">while</span> number < 5
    print("ありがとう\n")
    number += 1
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <pre class="answer">
  ありがとう
  ありがとう
  ありがとう
  ありがとう
  ありがとう
  <span style="color: yellow;">この回の繰り返しでnumbreは5になり、次の繰り返しの時に条件を満たしていないので<br>繰り返しは終了する。</span>
  </pre>
  <p>1回の繰り返しごとにnumberに1づつ代入され、numberが5になったので6回目の繰り返しが条件を満たせず終了した。</p>

  <h3>break</h3>
  <p><san class="orenge">繰り返しの実行を中止し、繰り返しから抜けることが出来る。</san></p>
  <p>今回はif文と組み合わせて作成する。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  number = 0
  sum = 0
  print("テストの合計点を計算しましょう。\n")
  
  <span style="color: rgb(0, 255, 255)">while true </span><span style="color: yellow;">#繰り返しの条件を「true」とすることで永遠にループさせることが出来る。</span>
    print("テストの点数を入力してください\n")
    test = gets.chomp.to_i
    <span style="color: rgb(0, 255, 255)">if</span> test == 0 <span style="color: yellow;">#もしもtestが0であるならば</span>
      <span style="color: rgb(0, 255, 255)">break</span> <span style="color: yellow;">#繰り返しの実行を中止し、繰り返しから抜ける</span>
    <span style="color: rgb(0, 255, 255)">end</span> <span style="color: yellow;">#if文のend</span>
    printf("%d点\n",test)
    sum += test
    number += 1
  <span style="color: rgb(0, 255, 255)">end</span> <span style="color: yellow;">#while文のend</span>
  printf("あなたの%d回分のテストの合計得点は%d点です。\n", number, sum)
  </pre>
  <pre class="answer">
  テストの合計点を計算しましょう。
  テストの点数を入力してください。
  <span style="color: yellow;">80[Enter]</span>
  80点
  テストの点数を入力してください。
  <span style="color: yellow;">75[Enter]</span>
  75点
  テストの点数を入力してください。
  <span style="color: yellow;">70[Enter]</span>
  70点
  テストの点数を入力してください。
  <span style="color: yellow;">0[Enter]</span>
  あなたの3回分のテストの合計点は225点です。
  </pre>
  <p>このプログラムは、キーボードで点数を打ち込み、テストの合計点数を計算するプログラムである。</p>
  <p><span class="orenge">繰り返しの条件を「true」とすることで、whileの中を永遠に繰り返し続ける処理を書くことが出来る。</span>このような場合にbreakは役に立つ。10・11・12行目のif文に注目してもらいたい。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span> test == 0
    <span style="color: rgb(0, 255, 255)">break</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>このif文で「もしもtestが0であるならば、繰り返しの実行を中止し、繰り返しから抜ける処理を行う」という動きを作成している。</p>
  <p>こうすることで、ユーザーの好きなタイミングで繰り返しを抜けさせることも出来るようになる。</p>
  <p><span class="orenge">制御構造を1度に2つも使用しているため、endも2つ出てきている。混乱しないように、「if」と「while」を書くときは、最初に「end」とセットで書くように心がける。</span></p>
  
  <h3>redo</h3>
  <p><span class="orenge">その繰り返しを無効化し、その繰り返しの先頭からやりなおす事が出来る。</span></p>
  <p>先程のテストの点数の合計を出すプログラムに、点数を打ち間違えた時にやり直せる機能をredoを使って作成する。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  number = 0
  sum = 0
  print("テストの合計点を計算しましょう。\n")
  
  <span style="color: rgb(0, 255, 255)">while true </span>
    print("テストの点数を入力してください。\n")
    test = gets.chomp.to_i
    <span style="color: rgb(0, 255, 255)">if</span> test == 0
      <span style="color: rgb(0, 255, 255)">break</span>
    <span style="color: rgb(0, 255, 255)">end</span> <span style="color: yellow;">#breakのif文用のend</span>
    printf("%d点\n",test)
    print("間違いありませんか? 訂正したければno,問題なければno以外を入力してください。\n") <br>
    <span style="color: yellow;">#確認用のテキストを追加</span>
    choose = gets.chomp <span style="color: yellow;">#chooseにキーボードで入力したものを代入</span>
    <span style="color: rgb(0, 255, 255)">if</span> choose == "no" <span style="color: yellow;">#もしもchooseがnoであるならば</span>
      print("今の入力をなかったことにします。\n")
      <span style="color: rgb(0, 255, 255)">redo</span> <span style="color: yellow;">#この繰り返しを無効化し、この繰り返しの先頭からやりなおす</span>
    <span style="color: rgb(0, 255, 255)">else</span> <span style="color: yellow;">#もしもchooseがno以外であるならば</span>
    sum += test
    number += 1
    <span style="color: rgb(0, 255, 255)">end</span> <span style="color: yellow;">#redoのif文用のend</span>
  <span style="color: rgb(0, 255, 255)">end</span> <span style="color: yellow;">#while文用のend</span>
  printf("あなたの%d回分のテストの合計得点は%d点です。\n", number, sum)
  </pre>
  <pre class="answer">
  テストの合計点を計算しましょう。
  テストの点数を入力してください。
  <span style="color: yellow;">80[Enter]</span>
  80点
  間違いありませんか? 訂正したければno,問題なければno以外を入力してください。
  <span style="color: yellow;">yes[Enter]</span>
  テストの点数を入力してください。
  <span style="color: yellow;">75[Enter]</span>
  75点
  間違いありませんか? 訂正したければno,問題なければno以外を入力してください。
  <span style="color: yellow;">no[Enter]</span>
  今の入力をなかったことにします。
  テストの点数を入力してください。
  <span style="color: yellow;">70[Enter]</span>
  70点
  間違いありませんか? 訂正したければno,問題なければno以外を入力してください。
  <span style="color: yellow;">はい[Enter]</span>
  テストの点数を入力してください。
  <span style="color: yellow;">0[Enter]</span>
  あなたの2回分のテストの合計点は150点です。
  </pre>
  <p>大きな追加部分は17行目〜23行目の部分</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">if</span> choose == "no"
    print("今の入力をなかったことにします。\n")
    <span style="color: rgb(0, 255, 255)">redo</span>
  <span style="color: rgb(0, 255, 255)">else</span>
  sum += test
  number += 1
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p><span class="orenge">このif文で「もしもchooseがnoであるならば、この繰り返しを無効化し、この繰り返しの先頭からやりなおす」,「もしもchooseがno以外であるならば、sumに入力したテストの点数を加算し、numberを1増やす」という動きを作成している。</span></p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" >while文は「条件〇〇が正しいとき、△△を繰り返す処理を行う」というように、プログラムに繰り返し処理する部分を作成すること出来る。</li>
      <li class="csv-inner-li">while文を書き始める場合には、最初に「while」「end」を記述する。</li>
      <li class="csv-inner-li" >制御構造を1度に2つ以上使用する場合、endも2つ以上書かなければならず、どの制御構造とセットのendか解らなくなる危険性がかる。混乱しないように、「if」と「while」を書くときは、最初に「end」とセットで書くように心がける。</li>
      <li class="csv-inner-li">breakは繰り返しの実行を中止し、繰り返しから抜けることが出来る。</li>
      <li class="csv-inner-li">redoはその繰り返しを無効化し、その繰り返しの先頭からやりなおす事が出来る。</li>
    </ul>
  </div>
</section>

<section id="arran">
  <h1 class="section-title">(5)配列</h1>
  <h2>[1]配列とは</h2>
  <p><span class="orenge">配列とは、データをたくさん詰めることの出来る引き出しのようなもので、複数の値をひとまとめにすることが出来る。</span></p>
  <pre class="program">
  yasai = "きゅうり" <span style="color: yellow;">#yasaiという名前の「変数」</span>
  
  kudamono = ["りんご", "みかん", "バナナ"] <span style="color: yellow;">
  #kudamonoという名前の「配列」</span>
  </pre>
  <p>kudamono =["りんご", "みかん", "バナナ"]のように</p>
  <p><span class="orenge">配列は[ ]のなかにいくつもの値を格納して表現される。配列に格納されている1つ1つの値のことを要素と呼ぶ。</span></p>
  <p>配列の要素を1つ取り出したい場合は、配列の名前[ x ]で取り出すことが出来る。配列の先頭は0から始まることに注意。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  kudamono = ["りんご", "みかん", "バナナ"]
  <span style="color: yellow;">#kudamonoという名前の「配列」</span>
  
  printf("%s\n", kudamono[0])
  printf("%s\n", kudamono[1])
  printf("%s\n", kudamono[2])
  </pre>
  <pre class="answer">
  りんご
  みかん
  バナナ
  </pre>
  <p><span class="orenge">[ ]の中の数字のことを添字という。</span></p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">配列とは、データをたくさん詰めることの出来る引き出しのようなもので、複数の値をひとまとめにすることが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">配列に格納されている1つ1つの値のことを要素と呼ぶ。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">配列の要素を1つ取り出したい場合は、配列の名前[ x ]で取り出すことが出来る。配列の先頭は0から始まることに注意。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">配列の名前[ x ]の中のxの数字のことを添字という。</li>
    </ul>
  </div>
  
  <h2>[2]配列への値の格納方法</h2>
  <p><span class="orenge">配列とはkudamono = ["りんご", "みかん", "バナナ"]のようにkudamonoと名前のつけた配列に値を格納することが出来る。</span>しかし、値の格納方法はこれ1つではない。</p>
  <pre class="program">
  kudamono = []
  <span style="color: yellow;">#配列の中身を空にして、何も格納されていない空の配列を用意する</span>
  
  kudamono[0] = "りんご"
  <span style="color: yellow;">#空の配列の先頭に値を格納</span>
  kudamono[1] = "みかん" <br>
  <span style="color: yellow;">#空の配列の2番めに値を格納</span>
  kudamono[2] = "バナナ"
  <span style="color: yellow;">#空の配列の3番目に値を格納</span>
  </pre>
  <p>この方法でもkudamono = ["りんご", "みかん", "バナナ"]の配列は作ることが出来る。しかし、この添字で直接格納するのではなく</p>
  <pre class="program">
  kudamono = []  <span style="color: yellow;">#配列の中身を空にして、何も格納されていない空の配列を用意する</span>
  
  kudamono &lt;&lt; "りんご"
  <span style="color: yellow;">#空の配列の末尾にりんごを追加</span>
  kudamono &lt;&lt; "みかん"
  <span style="color: yellow;">#りんごが先頭に格納されている配列の末尾にみかんを追加</span>
  kudamono &lt;&lt; "バナナ"
  <span style="color: yellow;">#りんごが先頭、2番めにみかんが格納されている配列の末尾にバナナを追加</span>
  </pre>
  <p><span class="orenge">というように「&lt;&lt;」を使って末尾に追加していくほうが便利に格納出来る。</span></p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" >事前に値を格納する方法以外にも配列に値を格納する方法はある。</li>
      <li class="csv-inner-li" >空の配列の用意の仕方は、変数 = [ ]</li>
      <li class="csv-inner-li" >空の配列に添字で直接値を格納出来る。</li>
      <li class="csv-inner-li">「&lt;&lt;」を使うと、配列の末尾に値を追加で格納出来る。</li>
    </ul>
  </div>
  
  <h2>[3]forの使い方</h2>
  <p><span class="orenge">forは配列の中にある複数の値を、順に変数へ代入する処理を行う時に使う。</span></p>
  <p>whileと似ていて、forは配列の中身を順に取り出していき、取り出せる中身がなくなったら繰り返しを終了する。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  #-*- coding: utf-8 -*-
  
  kudamono = ["りんご", "みかん", "バナナ"]
  
  <span style="color: rgb(0, 255, 255)">for</span> i <span style="color: rgb(0, 255, 255)">in</span> kudamono <span style="color: yellow;">#kudamonoの先頭から順に取り出しiに代入する。</span>
    printf("%sを食べました。\n", i)
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <pre class="answer">
  りんごを食べました。 <span style="color: yellow;">iにはりんごが代入されていた。</span>
  みかんを食べました。 <span style="color: yellow;">iにはみかんが代入されていた。</span>
  バナナを食べました。 <span style="color: yellow;">iにはバナナが代入されていた。</span>
  </pre>
  <p>配列内の要素を先頭から順番に取り出し変数に代入しながら繰り返し処理を行う。全ての値を取り出したら繰り返し終了となる</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">for</span> 変数 <span style="color: rgb(0, 255, 255)">in</span> 配列
    繰り返したい処理
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>これがforの基本構造となる。</p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">forは配列の中にある複数の値を、順に変数へ代入する処理を行う時に使う。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">whileと似ていて、forは配列の中身を順に取り出していき、取り出せる中身がなくなったら繰り返しを終了する。</li>
    </ul>
  </div>
  
  <h2>[4]配列の操作</h2>
  <h3>length</h3>
  <p><span class="orenge">配列の長さ(要素の数)を返すことが出来る</span>。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kudamono =["りんご", "みかん", "バナナ"] <span style="color: yellow;">#要素の数は3つ</span>
  kazu = kudamono.length <span style="color: yellow;">#kudamono.lenghtは3であるから、kuzuには3が代入される</span>
  printf("%dです。\n", kazu)
  </pre>
  <pre class="answer">
  3です。
  </pre>
  
  <h3>push</h3>
  <p><span class="orenge">配列の末尾に要素を追加する。 「&lt;&lt;」と同じ動きをする。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kudamono = ["りんご", "みかん", "バナナ"]
  printf("%sです。\n", kudamono.push("もも"))
  </pre>
  <pre class="answer">
  ["りんご", "みかん", "バナナ", "もも"]です。
  </pre>
  
  <h3>shift</h3>
  <p><span class="orenge">配列の先頭の要素を取り除き、その値を返す。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kudamono =["りんご", "みかん", "バナナ"]
  sara = kudamono.shift <span style="color: yellow;">#配列の先頭の要素を取り除きsaraに代入する</span>
  printf("%sです。\n", sara)
  printf("%sです。\n", kudamono)
  </pre>
  <pre class="answer">
  りんごです。
  ["みかん", "バナナ"]です。
  </pre>
  
  <h3>sort</h3>
  <p><span class="orenge">配列の要素を小さい順に並べ替える。文字列を要素に含む場合は、辞書順に並べ替える。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kazu = [3, 1, 5, 4, 2]
  kudamono =["りんご", "みかん", "バナナ"]
  printf("%sです。\n", kazu.sort)
  printf("%sです。\n", kudamono.sort)
  </pre>
  <pre class="answer">
  [1, 2, 3, 4, 5]です。
  ["みかん", "りんご", "バナナ"]です。
  </pre>
  
  <h3>reverse</h3>
  <p><span class="orenge">配列の要素の順序を逆にする。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kazu = [3, 1, 5, 4, 2]
  kudamono =["りんご", "みかん", "バナナ"]
  printf("%sです。\n", kazu.reverse)
  printf("%sです。\n", kudamono.reverse)
  </pre>
  <pre class="answer">
  [2, 4, 5, 1, 3]です。
  ["バナナ", "みかん", "りんご"]です。
  </pre>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">lengthは配列の長さ(要素の数)を返すことが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">pushは配列の末尾に要素を追加する。 「&lt;&lt;」と同じ動きをする。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">shiftは配列の先頭の要素を取り除き、その値を返す。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">sortは配列の要素を小さい順に並べ替える。文字列を要素に含む場合は、辞書順に並べ替える。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">reverseは配列の要素の順序を逆にする。</li>
    </ul>
  </div>
  
  <h2>[5]破壊的メソッド</h2>
  <h3>破壊的メソッド「!」</h3>
  <p><span>reverseやsortを使っても、元の配列の並びは変わらない。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kudamono =["りんご", "みかん", "バナナ"]
  printf("%sです。\n", kudamono.reverse)
  printf("%sです。\n", kudamono)
  </pre>
  <pre class="answer">
  ["バナナ", "みかん", "りんご"]です。
  ["りんご", "みかん", "バナナ"]です。
  </pre>
  <p>しかし、「!」をつけ「sort!」「reverse!」のようにすると直接操作出来る。この操作のことを破壊的操作といい。「sort!」「reverse!」のことを破壊的メソッドと呼ぶ。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  kudamono =["りんご", "みかん", "バナナ"]
  printf("%sです。\n", kudamono.reverse!)
  printf("%sです。\n", kudamono)
  </pre>
  <pre class="answer">
  ["バナナ", "みかん", "りんご"]です。
  ["バナナ", "みかん", "りんご"]です。
  </pre>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">reverseやsortを使っても、元の配列の並びは変わらない。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">「!」をつけ「sort!」「reverse!」のようにすると、元の配列の並びも変えることが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">この直接操作のことを破壊的操作と呼ぶ。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">「sort!」「reverse!」のことを破壊的メソッドと呼ぶ。</li>
    </ul>
  </div>
</section>

<section id="method">
  <h1 class="section-title">(6)メソッド</h1>
  <h2>[1]メソッドについて</h2>
  <p><span class="orenge">決められた計算や処理に名前をつけて、いつでも何度でも呼び出すことが出来る。</span></p>
    
<p><span class="orenge">この決められた計算や処理のことをメソッドという。メソッドは自分で変数を作るのと同じように自由に名前と処理を考え、作ることが出来る。</span></p>
  <p>今まで出できた「printf」、「gets」、「to_i」もメソッドの仲間。「getsメソッド」なんて呼んだりする。</p>
  <p>メソッドは「getsメソッド」や「printfメソッド」などの最初からRubyに用意されているものもあるが、自分で自由に用意することも出来る。</p>
  <p><span class="orenge">自分でメソッドを用意する時に使うものが「def」。</span></p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">メソッドとは決められた計算や処理に名前をつけて、いつでも何度でも呼び出せるようにしたもの。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">今まで出できた「printf」、「gets」、「to_i」もメソッドの仲間。「getsメソッド」なんて呼んだりする。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">メソッドは「getsメソッド」や「printfメソッド」などの最初からRubyに用意されているものもあるが、自分で自由に用意することも出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li" class="csv-inner-li">自分でメソッドを用意する時に使うものが「def」。</li>
    </ul>
  </div>
  
  <h2>[2]def</h2>
  <p><span class="orenge">メソッドはdefを使って定義することが出来る。</span></p>
  <p>defを書き始める場合は、最初に「def」「end」を記述する。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span>
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  次は今から作るメソッドに名前をつける。
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span> hello
    <span style="color: yellow;">この中に特定の動きをするプログラムを書く</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>これで今から作るメソッドの名前は「helloメソッド」に決まった。</p>
  <p>ここから「helloメソッド」に自分で自由に動きをつけることが出来る。</p>
  <p>では今回は「helloメソッド」に、Helloとこんにちはを出力する動きをつけることにする。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span> hello
    print("Hello\n")
    print("こんにちは\n")
  <span style="color: rgb(0, 255, 255)">end</span>
  </pre>
  <p>これで、Helloとこんにちはを出力する「helloメソッド」を作成することが出来た。</p>
  <p><span class="orenge">この作成したメソッドを呼び出すのは簡単。いままで「getsメソッド」や「printfメソッド」を呼び出していたやり方と同じ。</span></p>
  <pre class="program">
  name = gets <span style="color: yellow;">#「getsメソッド」を使いたいときにはgetsと書いていた。</span>
  </pre>
  <p>ここまでで、知らず知らずのうちに「メソッドの呼び出し方」はマスターしている。</p>
  <p>では、「helloメソッド」を呼び出してみる。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  <span style="color: rgb(0, 255, 255)">def</span> hello
    print("Hello\n")
    print("こんにちは\n")
  <span style="color: rgb(0, 255, 255)">end</span>
  
  hello <span style="color: yellow;">#「helloメソッド」を呼び出す。</span>
  </pre>
  <pre class="answer">
  Hello
  こんにちは
  </pre>
  <p>事前に「helloメソッド」を作成していたので、helloと書くだけで「helloメソッド」を呼び出すことが出来ている。</p>
  <p>これで自分で新たにメソッドを作成することが出来た。</p>
  <p>ここにもう一手間加えていく。</p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  <span style="color: rgb(0, 255, 255)">def</span> hello(x) <span style="color: yellow;">#「helloメソッド」に「引数」を指定する。</span>
    print("Hello\n")
    print("こんにちは\n")
    printf("私の名前は%sです。\n",x)
    <span style="color: yellow;"> #「helloメソッド」の「引数」を使って、printfを使用する。</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  
  hello("さとうたろう") <span style="color: yellow;">#「helloメソッド」(引数)を呼び出す。</span>
  </pre>
  <pre class="answer">
  Hello
  こんにちは
  私の名前はさとうたろうです。
  </pre>
  <p><span class="orenge">まず注目してほしいのは4行目の「hello(x)」。これは「helloメソッド」に「引数」をつけたもの。</span></p>
  <span class="orenge">
    <p>引数とは、プログラムの処理をする時に、別の場所から値を持ってこれるようにするために使うもの。</p>
  </span>
  <p>今回は「helloメソッド」の処理をする時に、別の場所から値を持ってくるために「引数」を指定した。</p>
  <p>「hello(x)」とは、「helloメソッド」の「引数」にxを指定するという意味である。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span> hello(x) <span style="color: yellow;">#「helloメソッド」に「引数」を指定する。</span>
  </pre>
  <p><span class="orenge">次に注目するべき部分は7行目の「printf("私の名前は%sです。\n",x)」。「printf」は指定した値と組み合わせて文章を出力することの出来るもの。今回は「helloメソッド」の引数xを活用することにしている。</span></p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span> hello(x) <span style="color: yellow;">#「helloメソッド」に「引数」を指定する。</span>
  
  printf("私の名前は%sです。\n",x)<span style="color: yellow;">
  #「helloメソッド」の「引数」を使って、printfを使用する。</span>
  </pre>
  <p><span class="orenge">最後に見るべきは10行目の「hello("さとうたろう")」。今回の「helloメソッド」には「引数」xを指定している。つまり、「helloメソッド」は引数xに何かしらの値が代入されていなければ動かないということ。</span></p>
  <p>そのため、引数のxに値を代入する必要がある。</p>
  <p>値を代入するタイミングは「helloメソッド」を呼び出した時。</p>
  <p><span class="orenge">そのため「helloメソッド」の呼び出し方は、「hello("さとうたろう")」というように引数に値を代入しながら呼び出す。</span></p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span> hello(x) <span style="color: yellow;">#「helloメソッド」に「引数」を指定してる。</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  
  hello("さとうたろう") <span style="color: yellow;">#「引数」のxに値を代入しながら呼び出す。</span>
  </pre>
  <p><span class="orenge">引数を指定したメソッドは、引数に何かしらの値が代入されていなければ動かないということに注意する。</span></p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li" class="csv-inner-li">メソッドはdefを使って定義することが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li">defを書き始める場合は、最初に「def」「end」を記述する。</li>
      <li class="csv-inner-li" class="csv-inner-li">defで作成したメソッドは、メソッドの名前を書くだけで呼び出すことが出来る。</li>
      <li class="csv-inner-li" class="csv-inner-li">引数とは、プログラムの処理をする時に、別の場所から値を持ってこれるようにするために使うもの。</li>
      <li class="csv-inner-li" class="csv-inner-li">引数を指定したメソッドを呼び出すときには、引数に値を代入しながら呼び出す。</li>
    </ul>
  </div>
  
  <h2>[3]返却値について</h2>
  <p><span class="orenge">複数の文がメソッド定義されている場合、最後に実行した文の値がメソッドの実行結果として返される。</span></p>
  <p>これを返却値という。</p>
  <p><span class="orenge">返却値で返せる実行結果は1つだけ。</span></p>
  <pre class="program">
  #!/usr/bin/env ruby
  # -*- coding: utf-8 -*-
  
  <span style="color: rgb(0, 255, 255)">def</span> sum(x) <span style="color: yellow;">#「sumメソッド」に「引数」を指定する。</span>
    a = x * 2 <span style="color: yellow;">#引数を2倍に</span>
    b = a + 2 <span style="color: yellow;">#aに2を足す</span>
    c = b + 5 <span style="color: yellow;">#bに5を足す</span>
  <span style="color: rgb(0, 255, 255)">end</span>
  
  y = 2
  printf("%d\n",sum(y)) <span style="color: yellow;">#「sumメソッド」(引数)を呼び出す。</span>
  </pre>
  <pre class="answer">
  11
  </pre>
  <p>この場合のメソッドの返却値は、最後に実行された「c = b + 5」の値。このプログラムの場合は11が返却値である。</p>
  
  <h3>return</h3>
  <p>r<span class="orenge">eturnを使うと、「メソッドの処理を中止し、指定した返却値を返す」ことが出来る。</span></p>
  <p>先程のプログラムにreturnを使用してみる。</p>
  <pre class="program">
  <span style="color: rgb(0, 255, 255)">def</span> sum(x)
    a = x * 2
    <span style="color: rgb(0, 255, 255)">return</span> a <span style="color: yellow;">#メソッドの処理を中止し、指定した返却値を返す。</span>
    b = a + 2
    c = b + 5
  <span style="color: rgb(0, 255, 255)">end</span>
  
  y = 2
  printf("%d\n",sum(y))
  </pre>
  <pre class="answer">
  4
  </pre>
  <p><span class="orenge">「return a 」と記述することで、メソッドの処理を中止し、aを返却値として返しているので、実行結果は4となる。</span></p>
  <div class="box1">
    <ul>
      <li class="csv-inner-li">複数の文がメソッド定義されている場合、最後に実行した文の値がメソッドの実行結果として返される。これを返却値という。</li>
      <li class="csv-inner-li">返却値で返せる実行結果は1つだけ。</li>
      <li class="csv-inner-li">returnを使うと、「メソッドの処理を中止し、指定した返却値を返す」ことが出来る。</li>
    </ul>
  </div>
  </div>
</section>

<section id="pg-enjoy" class="wrapper">
  <h1 class="section-title">(7)プログラムをもっと楽しくしてみよう!</h1>
  <h2>[1]乱数</h2>
  <p><span class="orenge">数字の中からラングムに発生させる数を乱数といい、randを使って取り出
    します。数値だけでなく、自分の作った配列から取り出すこともできます。</span>
    お祭りの屋台にある、おみくじ屋さんからくじを1枚とるイメージです。</p>
    <h3>数値の場合</h3>
    <p><span class="orenge">
      変数名= rand(自然数)のようにして取り出すことができ、0から指定した
        自然数未満の乱数が発生します。</span>また、<span class="p-red">srand()</span>によって、発生する乱数の種を初期化する必要があります。<br>
      <ul>
        <li><span class="p-red">自然数</span>⋯個数や順番を表すような普段使っている数。プラスの整数。<br></li>
        <li><span class="p-red">種</span>⋯乱数が発生するときの、最初に設定される値。<br></li>
        <li><span class="p-red">初期化</span>⋯実行する度に、違う乱数を発生させるために行う処理。</p></li>
      </ul>
      <p>saikoro.rb</p>
      <pre class="program">
        #!/usr/bin/env ruby
        # -*- coding: utf-8 -*-
        
        <span style="color: rgb(0, 255, 255)">srand</span>()<span class="comment">#乱数の種を初期化</span>
        saikoro = <span class="blue">rand</span>(6) + 1<span class="comment">#1を足すことで7未満の整数を発生</span>
        printf("振ったサイコロの目は%dでした。\n",saikoro)<span class="comment">#saikoroが1から6までの内ランダムで出力</span>
        </pre>
        <h3>文字列の場合</h3>
        <p><span class="orenge">取り出したい要素を含む配列と、乱数を発生させる変数を作り、配列名[変数名]のようにして出力します。</span>ここで、rand()内の数字には、配列に並んでいる要素の数を入れます。</p>
        <pre class="program">
        #!/usr/bin/env ruby
        # -*- coding: utf-8 -*-
        
        coin=[”表”,”裏”]<span class="comment">#2個なのでcoin.lengthは2</span>
        <span class="blue">srand</span>()<span class="comment">#乱数の種を初期化</span>
        hyori = rand(coin. length)<span class="comment">#よって0か1のどちらかになる</span>
        printf("投げたコインは%sでした。\n",coin[hyori]) <span class="commnet">#coin[hyori]が表か裏のいずれかで出力</span>
        </pre>
        <p><span class="p-red">発展</span></p>
        <p><span class="orenge">Rubyの場合、配列の中からランダムに取り出す処理は、coin.sampleと書けます。</span></p>

        <h2>[2]一時停止</h2>
        <p><span class="orenge">プログラムは実行したらすぐに表示されます。逆にプログラムを一時停止することもできます。プログラムに動きをつけたいときに使ってみましょう。</span><br>
          一時停止させたいときはsleepを使い、<span class="p-red">sleep(秒数)</span>のようにします。</p>
          <p>rocket.rb</p>
          <pre class="program">
            #!/usr/bin/env ruby
            # -*- coding: utf-8 -*-
            
            puts"ロケット打ち上げまで..."
            <span class="blue">sleep</span>(1)<span class="comment">#1秒間停止(以下同様)</span>
            puts "3"
            <span class="blue">sleep</span>(1)
            puts "2"
            <span class="blue">sleep</span>(1)
            puts "1"
            <span class="blue">sleep</span>(1)
            puts ”発射!!”
            </pre>
        <h2>[3]時刻</h2>
        <p><span class="orenge"><span class="p-red">Time.now</span>を使うと、現在の時刻を受け取ることができます。秒数を数えるときは、.to_iメソッドを利用しましょう。</span></p>
        <p>stopwatch.rb</p>
        <pre class="program">
            #!/usr/bin/env ruby
            # -*- coding: utf-8 -*-

            puts"ストップウォッチスタート!(Enterを押すと止まるよ)"
            kaishi = Time.now.to_i<span class="comment">#現在の時刻を代入</span>
            teishi = gets.chomp<span class="comment">#入力完了まで時間経過</span>
            syuryo = Time.now.to_i<span class="comment">#Enter を押した時刻を代入</span>
            jikan = syuryo - kaishi<span class="comment">#要した秒数を代入</span>     
            printf("タイムは%d秒です。\n",jikan)<span class="comment">#要した秒数が出力</span>
        </pre>

        <h2>[4]画像表示</h2>
        <p><span class="orenge">
          <span class="p-red">spawn "display -geometry +x+y ファイル名"</span>で画像を表示でき、xには画面左から、yには画面上からのドットの位置を指定します。
            ずっと画面に残ってしまうため、出していた画像を消すには<span class="p-red">Process.kill</span>を使います。
        </span></p>
        <p>gazo.rb</p>
        <pre class="program">
          #!/usr/bin/env ruby
          # -*- coding: utf-8 -*-

          pid = <span class="blue">spawn</span> "display -geometry +10+20 image.jpg"<span class="comment">#image.jpgの場合</span>
          <span class="comment">#しばらく別の処理をする(sleepなど)</span>
          <span class="blue">Process.kill</span>(:INT, pid)<spna class="comment">#:INTは信号の一種</spna>
        </pre>
      </section>
</div>

<footer id="footer">この部分は footer.html に置き換わる</footer>

</body>
</html>