<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="utf-8">
<title>CSV説明シート</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 href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../jdmain.css">
<script type="text/javascript" src="../jdinit.js"></script>
<style>
p{
font-size: 1.1rem;
margin-bottom: 10px;
}
.program{color: White; background-color: black; font-size:20px; margin-bottom: 1em; }
td{
text-align: center;
font-weight: bold;
}
.red{
color: rgb(255, 70, 70);
font-size: 1.6rem;
}
.orengi{
position: relative;
background: linear-gradient(transparent 40%, #ffc58f 40%);
}
.explain{
font-size: 1.3rem;
padding-top: 10px;
padding-bottom: 30px;
margin: 0 auto;
line-height: 1.7;
font-size: 1.2rem;
}
h3{
font-size: 1.4rem;
color: orange;
margin-bottom: 30px;
margin-top: 30px;
}
.icon{
margin-left: 40px;
margin-top: 30px;
margin-bottom: 30px;
}
.black{
background-color: black;
color: white;
}
.csv-inner-li{
padding: 5px;
font-size: 1.2rem;
list-style: none;
text-align: center;
}
.csv-li{
list-style: decimal;
text-align: left;
font-size: 1.2rem;
}
.explain-list{
color: #000;
}
.explain-list:hover{
color: blue;
}
.comment{
color: greenyellow;
}
.blue{
color: rgb(0, 255, 255);
}
@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.2rem;
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">CSV教材</h1>
<section class="csv-list">
<ol class="csv-ol">
<a href="#about" class="explain-list">
<li class="csv-li">CSV形式について</li>
</a>
<a href="#kouzou" class="explain-list">
<li class="csv-li">CSVの構造について</li>
</a>
<a href="#library" class="explain-list">
<li class="csv-li">CSVライブラリについて</li>
</a>
<a href="#Hash" class="explain-list">
<li class="csv-li">Hashをもっと深く知ろう！</li>
</a>
<a href="#read-use" class="explain-list">
<li class="csv-li">CSV.readを使ったプログラムを書いてみよう！</li>
</a>
<a href="#pg" class="explain-list">
<li class="csv-li">番外編：CSVファイルへの「書き込み」</li>
</a>
</ol>
</section>
<section id="about">
<h2 class="section-title">CSV形式について</h2>
<p class="explain"> CSV形式とはあらゆる種類のソフトウェアで読み書きできる「表形式」で表現できるデータのことです。</p>
<blockquote>
<table border="1">
<tr>
<td width="150" height="50">漢字氏名</td>
<td width="150" height="50">カタカナ氏名</td>
<td width="150" height="50">電話番号</td>
<td width="150" height="50">メイルアドレス</td>
<td width="150" height="50">住所</td>
</tr>
</table>
</blockquote>
<p class="explain">表の中の各項目が揃った一単位のデータのことを<span class="red">レコード</span>と言います。<br><span class="orengi">上の表では外枠を指します</span>。<br>
レコードの中にある一つ一つの項目のことを<span class="red">フィールド</span>と言います。<br><span class="orengi">上の表では内枠を指します。</span>
</p>
<p class="explain">表計算ソフトなどでは<span class="orengi">1レコードを1行に、 1フィールドを1セルに</span>書き込んで表現します。<br>
表計算ソフトなどでデータの集合を保存するときはそのソフト固有の保存形式で記録しているため、その保存形式に対応したソフトを使わない限り開くことができません。<br>
しかし<span class="orengi">CSV形式はあらゆる種類のソフトウェアで読み書きできる形式です。</span></p>
<p class="explain">csvファイルを作るときは<br><span class="red">ファイル名.csv</span>という形で作ります。</p>
</section>
<section id="kouzou">
<h2 class="section-title">CSVの構造について</h2>
<p class="explain">CSV形式は複数のフィールドをフィールドごとに<span class="red">カンマ（,）</span>で区切り、
１レコードを１行におさめたテキストファイル形式となっています。</p>
<h3 class="kouzou-h3">使うときのルール</h3>
<ol>
<li class="csv-inner-li" style="list-style: decimal; text-align: left; margin-left: 30px;font-weight: bold;">数値はそのまま書く</li>
<li class="csv-inner-li" style="list-style: decimal; text-align: left; margin-left: 30px;font-weight: bold;">文字列はそのまま、もしくはダブルクォート（”）で囲む</li>
</ol>
<h3>例として</h3>
<ul style="border: yellowgreen 2px solid; padding: 10px; margin-bottom: 30px;">
<li class="csv-inner-li" style="font-weight: bold;">Hello(文字列)</li>
<li class="csv-inner-li" style="font-weight: bold;"> １２３(整数)</li>
<li class="csv-inner-li" style="font-weight: bold;">４５６（文字列）</li>
<li class="csv-inner-li" style="font-weight: bold;">Hello,World(文字列)</li>
</ul>
<p class="explain">という内容のCSVファイルを作るときに
<span class="orengi">Hello,123,”456”,”Hello, World” </span>と表します。<br>
この場合Hello,Worldにカンマがついています。<br>
<span class="red">空白文字かカンマがある場合必ずダブルクォートで括りましょう。</span>
</p>
<p class="explain"><span class="orengi">He said “Hello”.</span> という文にはダブルクォート（”）が入っています。<br>
この文を入れてCSVファイルを作るときは
<span class="orengi">”He said ””Hello””.” </span>と表します。<br>
このように<span class="red">文字列自身にダブルクォートが含まれるときはダブルクォートを重ねて</span>表します。</p>
<h3>例</h3>
<blockquote>
<table border="1" width="500" height="100">
<tr>
<th>名前</th>
<th>電話番号</th>
<th>住所</th>
<th>職業</th>
</tr>
<tr>
<td>公益太郎</td>
<td>000-0000-0000</td>
<td>山形県</td>
<td>学生</td>
</tr>
</table>
</blockquote>
<div class="icon"><i style="color: rgb(0, 183, 255);" class="fas fa-angle-double-down fa-4x"></i></div>
<div class="black">
<p style="text-align: center;">名前,電話番号,住所,職業<br>
酒田太郎,000-000-000,山形県,学生</p>
</div>
</section>
<section id="library">
<h2 class="section-title">CSVライブラリについて</h2>
<p class="explain">CSVライブラリとはRubyで使えるCSVファイルを使ってあらゆることを行えるようにする便利道具のようなものです。<br>
<span class="orengi">CSVファイルの「読み込み」「書き込み」「１行変換」「全データの繰り返し処理」などを行えます。</span></p>
<h3>CSVファイルの読み込み①</h3>
<p class="explain">CSV ファイルからデータを読むには <span class="red">CSV.read</span> メソッドを使います。</p>
<h4>使い方</h4>
<p><span style="color: blue;">data(変数)</span> = <span class="red">CSV.read</span>(csvファイル名)</p>
<p>これを使うとdataという変数に各行の各フィールドごとに配列化したものがさらに配列化されて入る。</p>
<div class="black">
<p style="padding-left: 20px;">建物名,住所,電話番号<br>
羽黒山 五重塔,山形県鶴岡市羽黒町手向,000-000-000<br>
加茂水族館,山形県鶴岡市今泉字大久保,999-999-999<br>
</p>
</div>
<p class="red">↓このようなCSVファイルをCSV.readで読み込むと配列の配列が返る
</p>
<div class="black">
<p style="padding-left: 20px;">[["建物名", "住所", "電話番号"],<br>
["羽黒山 五重塔", "山形県鶴岡市羽黒町手向", "000-000-000"],<br>
["加茂水族館", "山形県鶴岡市今泉字大久保", "999-999-999"]]
</p>
</div>
<h3>CSVファイルの読み込み②</h3>
<p>CSV.readを使うときはCSV ファイルの1行目の見出しを
<span class="orengi">キーとして値を取り出せる形式</span>で読んだ方が使いやすい。
</p>
<p>キーとして値を取り出すとは？
</p>
<p style="background-color: black; color: white;">連想配列名 = {キー名1 => バリュー1, キー名2 => バリュー2, キー名3 => バリュー3}
</p>
<p class="explain">配列に似ているが配列が要素を指定するのに「0」から始まる添字を使用するのに対し、<br>
<span class="orengi">添字に「キー」と呼ばれる任意の文字列を指定して「バリュー」と呼ばれる要素を指定する。</span>
</p>
<p class="explain">このようなものを<span class="red">Hash</span>と言います。</p>
</section>
<section id="Hash">
<h2 class="section-title">Hashをもっと深く知ろう！</h2>
<h3>Hashの例</h3>
<div class="black">
<p style="margin-left: 100px;">
menu = {<br>
<br>
"そば" => "300円", <br>
"ケーキ" => "500円", <br>
"ハンバーグ" => "800円"<br>
}<br>
print menu["そば”]<br>
lunch = "ハンバーグ"<br>
print menu[lunch]
</p>
</div>
<p style="color: orange; font-weight: bold;">出力結果</p>
<p style="font-weight: bold;">300円<br>
800円
</p>
<p class="explain">このように、Hashでは<span class="orengi">添字が番号ではなく指定したキーとなっている。<br>要素を取得する際も、キーを指定することでセットになっている値(バリュー)を取得する。</span>
</p>
<h4 style="font-size: 1.2rem;">▶CSV.readでCSVファイルを読み込むときは<span style="color: blue;">青い部分を付け足すことでHash化させることができる</span></h4>
<p style="background-color: black; color: white; padding-left: 30px;">data = CSV.read("shonai.csv", <span style="background-color: blue;">:headers => true</span>)
</p>
<p class="explain">そばは300円である。」というように「そば」と「300円」という２つの言葉が関連付いているときにHashを使うととても便利。
</p>
</section>
<section id="read-use">
<h2 class="section-title">CSV.readを使ったプログラムを書いてみよう！</h2>
<p class="explain"><span class="orengi">今回作るのはCSV.readを使った観光スポットを検索するプログラムです。</span></p>
<p class="explain">今回使うファイルは<span class="red">shonai.csv</span>と<span class="red">kankou.rb</span>です。</p>
<h3>shonai.csv</h3>
<div class="black">
<p style="margin-left: 100px;">
建物名,住所,特徴<br>
羽黒山 五重塔,山形県鶴岡市羽黒町手向,羽黒山参道、東北北地方では最古の塔といわれている。,<br>
白山島,山形県鶴岡市由良2丁目,"由良海岸のシンボルである島。",<br>
加茂水族館,山形県鶴岡市今泉字大久保657-1,約1万のミズクラゲがいる「クラゲドリームシアター」がある。,<br>
庄内観光物産館 ふるさと本舗,山形県鶴岡市布目字中通80-1,庄内地方をはじめとするお土産を数多く取り揃えている。,<br>
酒田米菓（オランダせんべいFACTORY）,山形県酒田市両羽町2-24,オランダせんべいＦＡＣＴＯＲＹではその工程を見学できる。,<br>
丸池様,山形県飽海郡遊佐町直世荒川５７,水深3.5メートル、湧き水だけで満たされた池。,<br>
山居倉庫,山形県酒田市山居町1-1-20,庄内のシンボルである山居倉庫。,<br>
道の駅「とざわ」高麗館,山形県最上郡戸沢村蔵岡黒淵3008-1,韓国風の外観が特徴の戸沢村にある道の駅。,
</p>
</div>
<p class="explain">このcsvファイルを読み込んで取り出していくプログラムを書いていく。</p>
<h3>kankou.rb</h3>
<pre class="program">
<span class="blue">require</span> 'csv'<span class="comment"># CSVライブラリ読み込み</span>
data = CSV.read("shonai.csv", :headers => true)<span class="comment">#観光スポット一覧で使うcsvファイル読み込み</span>
<span class="blue">while</span> true
puts "1 観光スポット一覧"
puts "0 終了"
print "どれかひとつ選んでください => "
input=gets.to_i<br>
<span class="blue">if</span> input == 0 then <span class="comment">#もしinputが0だったとき</span>
break <span class="comment">#終了する</span>
<span class="blue">elsif</span> input == 1 then <span class="comment">#もしinputが1だったとき</span>
<span class="comment">#↓行ごとに取り出す</span>
n = 0
data.each{|row| <span class="comment"># rowには1行ずつ値が入り繰り返される</span>
printf("%d: %sとはどんなところ？\n", n+=1, row["建物名"])
printf("住所 => %s \n特徴 => %s \n",row["住所"], row["特徴"])
print("--------------------------\n") }<span class="comment">#仕切りの機能（何個あってもいい）</span>
<span class="blue">else</span>
print "1/0から選んでください\n"
<span class="blue">end</span>
<span class="blue">end</span>
</pre>
<p style="color: green; font-size: 1.5rem; font-weight: bold;text-align: center;margin-top: 40px;">実際にプログラムを動かしてみてね！どう動いたかな？</p>
</section>
<section id="pg">
<h2 class="section-title">CSVファイルへの書き込み</h2>
<p class="explain">書き込みには<span class="red">CSV.open</span>メソッドを使う。</p>
<div class="black">
<p style="margin-left: 30px;">CSV.open(<span style="color: greenyellow;">ファイル</span>, <span style="color: greenyellow;">モード</span>) do |<span style="color: greenyellow;">変数</span>|<br>
:<br>
: (<span style="color: greenyellow;">変数</span> << によってファイルの中に書き込む処理)<br>
:<br>
end</p>
</div>
<p class="section-text">
書き込む際は、CSV.open メソッドにファイル書き込みオプション <span class="orengi">"w" または "a" </span>などを与えて行なう。
</p>
<h3>書き込みオプションの主な例</h3>
<ul style="border: yellowgreen 2px solid; padding: 10px; margin-bottom: 30px;">
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"r"<br>読み込みモードで開く。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"r+"<br>読み書きモードで開く。ファイルを読み込む場合 先頭から読み込み始める。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"w"<br>書き込み(新規作成)モードで開く。既存のファイルは0バイトに クリアされる</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"w+"<br>読み書きモードで開く。既存のファイルは0バイトにクリアされる。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"a"<br>書き込みモードで開く。ファイルが既に存在する場合は ファイルの終わりから開始し、なければ新規に作成する。</li>
<li class="csv-inner-li" style="text-align: start; list-style: decimal; margin-left: 40px;font-weight: bold;">"a+"<br>読み書きモードで開く。ファイルが既に存在する場合は ファイルの終わりから開始し、なければ新規に作成する。</li>
</ul>
<p>中身が空のCSVファイル「sample.csv」があったとします。</p>
<h3>そのときこのようなプログラムを書くと...</h3>
<div class="black">
<p style="margin-left: 30px;">require 'csv'<br>
CSV.open("sample.csv", "w") do |sample| <span style="color: greenyellow;"># csv変数に値を追加すればよい</span><br>
sample << ["name", "phone-number"] <span style="color:greenyellow;"># << で1行ぶんの配列を指定する</span><br>
sample << ["yamada", "000-0000-0000"]<br>
sample << ["ito", "111-1111-1111"]<br>
sample << ["saito", "222-2222-2222"]<br>
sample << ["sasaki", "333-3333-3333"]<br>
end</p>
</div>
<div class="icon"><i style="color: rgb(0, 183, 255);" class="fas fa-angle-double-down fa-4x"></i></div>
<div class="black">
<p style="margin-left: 30px;">name,phone-number<br>
yamada,000-0000-0000<br>
ito,111-1111-1111<br>
saito,222-2222-2222<br>
sasaki,333-3333-3333</p>
</div>
<h3>このようにCSVファイルの中に書き込まれる。書き込みの時も数値はそのまま書く。文字列はそのまま、もしくはダブルクォート（”）で囲む</h3>
<p>プログラムの解説<br>
1行目: 「csv」ライブラリを指定<br>
2行目: 「csv」ライブラリのopenメソッドで「sample.csv」ファイルを開く<br>
3行目～7行目: CSVデータを書き込み</p>
</section>
<p style="color: green; font-size: 1.5rem; font-weight: bold;text-align: center;margin-top: 40px;">CSVライブラリを使ってプログラムの幅をどんどん広げていこう！！</p>
</div>
<footer id="footer">この部分は footer.html に置き換わる</footer>
</body>
</html>
