<!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;
}
table{
}
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;
}
li{
padding: 5px;
font-weight: bold;
font-size: 1.2rem;
list-style: none;
text-align: center;
}
.csv-li{
list-style: decimal;
text-align: left;
}
@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">
<li class="csv-li">CSV形式について</li>
<li class="csv-li">CSVの構造について</li>
<li class="csv-li">CSVライブラリについて</li>
<li class="csv-li">番外編：CSVファイルへの「書き込み」</li>
</ol>
</section>
<section class="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 class="kouzou">
<h2 class="section-title">CSVの構造について</h2>
<p class="explain">CSV形式は複数のフィールドをフィールドごとに<span class="red">カンマ（,）</span>で区切り、
１レコードを１行におさめたテキストファイル形式となっています。</p>
<h3 class="kouzou-h3">使うときのルール</h3>
<ol>
<li style="list-style: decimal; text-align: left; margin-left: 30px;">数値はそのまま書く</li>
<li style="list-style: decimal; text-align: left; margin-left: 30px;">文字列はそのまま、もしくはダブルクォート（”）で囲む</li>
</ol>
<h3>例として</h3>
<ul style="border: yellowgreen 2px solid; padding: 10px; margin-bottom: 30px;">
<li>Hello(文字列)</li>
<li>１２３(整数)</li>
<li>４５６（文字列）</li>
<li>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 class="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 class="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("syounai.csv", <span style="background-color: blue;">:headers => true</span>)
</p>
<p class="explain">そばは300円である。」というように「そば」と「300円」という２つの言葉が関連付いているときにHashを使うととても便利。
</p>
</section>
<section class="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 style="text-align: start; list-style: decimal; margin-left: 40px;">"r"<br>読み込みモードで開く。</li>
<li style="text-align: start; list-style: decimal; margin-left: 40px;">"r+"<br>読み書きモードで開く。ファイルを読み込む場合 先頭から読み込み始める。</li>
<li style="text-align: start; list-style: decimal; margin-left: 40px;">"w"<br>書き込み(新規作成)モードで開く。既存のファイルは0バイトに クリアされる</li>
<li style="text-align: start; list-style: decimal; margin-left: 40px;">"w+"<br>読み書きモードで開く。既存のファイルは0バイトにクリアされる。</li>
<li style="text-align: start; list-style: decimal; margin-left: 40px;">"a"<br>書き込みモードで開く。ファイルが既に存在する場合は ファイルの終わりから開始し、なければ新規に作成する。</li>
<li style="text-align: start; list-style: decimal; margin-left: 40px;">"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>
ItoRino