bashのshellで2次元配列を使ってHTMLのテーブルを作る方法

# やりたいこと
- HTMLのテーブル:arrow_double_down:を作りたい
    - テーブルの行がすごく多い
    - 仕様変更によって行の内容が変わる可能性が大きい
    - 列は決まっている
    - 本当はJSPを作りたいので変数名なんかを間に入れ込んだりする
    - 諸事情により既存のべた書き方法は変えられない

## 本音 : 面倒くさいことはやりたくない
地道に書くのも地道に修正するのも面倒くさい

# HTMLのテーブルを作る方法
## 1. テーブルの1行に使う文字郡を作る
1. 仕様書などからExcelなどでスペース区切りにして文字列を結合する
2. シングルクォーテーション(')かダブルクォーテーション(")で囲む

> (サンプル)
> 'くま もり peachpuff'
> 'ねこ まち lightpink'

## 2. bashでshellを作る
1. で作った1行に使う文字郡は配列にベタッと貼る

```bash:htmlMaker.sh
#!/bin/bash

dataArray=(
    'くま もり peachpuff'
    'ねこ まち lightpink'
    'さる 上野動物園 burlywood'
    'りす 鎌倉 khaki'
    '魚 海 lightblue'
)

fileName='Table.html'

echo '<html>' > $fileName
echo '<table bordercolor="black">' >> $fileName
echo '<tr>' >> $fileName
echo '<th>動物</th>' >> $fileName
echo '<th>居場所</th>' >> $fileName
echo '</tr>' >> $fileName

for i in "${dataArray[@]}"; do
    data=(${i[@]})
    animal=${data[0]}
    place=${data[1]}
    color=${data[2]}
    echo '<tr>' >> $fileName
    echo '<td bgcolor="'$color'">'$animal'</td>' >> $fileName
    echo '<td bgcolor="'$color'">'$place'</td>' >> $fileName
    echo '</tr>' >> $fileName
done

echo '</table>' >> $fileName
echo '</html>' >> $fileName
```

## 3. シェルを動かしてHTMLを出力してもらう
```html:Table.html
<html>
<table bordercolor="black">
<tr>
<th>動物</th>
<th>居場所</th>
</tr>
<tr>
<td bgcolor="peachpuff">くま</td>
<td bgcolor="peachpuff">もり</td>
</tr>
<tr>
<td bgcolor="lightpink">ねこ</td>
<td bgcolor="lightpink">まち</td>
</tr>
<tr>
<td bgcolor="burlywood">さる</td>
<td bgcolor="burlywood">上野動物園</td>
</tr>
<tr>
<td bgcolor="khaki">りす</td>
<td bgcolor="khaki">鎌倉</td>
</tr>
<tr>
<td bgcolor="lightblue">魚</td>
<td bgcolor="lightblue">海</td>
</tr>
</table>
</html>
```
## 4. 見てみる
![Screen Shot 2017-03-13 at 22.15.56.png](https://qiita-image-store.s3.amazonaws.com/0/159761/fbb7fcea-8746-ffd6-db2a-5340df4274b7.png)

## このやり方の欠点
### スペースがある文字列が使えない
誰かいい方法を教えて下さい。

# この方法に辿りつくまでの失敗
## 初心者過ぎてbashで多次元配列は工夫しないとできないことを知らなかった
```bash
dataArray=(
    ('くま' 'もり' 'peachpuff')
)
```

こう書いて怒られた・・・

```text
$ bash htmlMaker.sh 
htmlMaker.sh: line 4: syntax error near unexpected token `('
htmlMaker.sh: line 4: `    ('くま' 'もり' 'peachpuff')'
htmlMaker.sh: line 9: syntax error near unexpected token `)'
htmlMaker.sh: line 9: `)'
```

だから[BASHで二次元配列][]のやり方をベースに考えることにした
[BASHで二次元配列]:http://kiyohime.hatenablog.com/entry/2013/12/09/193729

## 配列の展開方法を知らなかった
```bash
for i in $dataArray; do
    data=$i
    animal=$data[0]
    place=$data[1]
    color=$data[2]
<省略>
done
```

こう書いてこうなった

```html
<html>
<table bordercolor="black">
<tr>
<th>動物</th>
<th>居場所</th>
</tr>
<tr>
<td bgcolor="くま[2]">くま[0]</td>
<td bgcolor="くま[2]">くま[1]</td>
</tr>
<tr>
<td bgcolor="もり[2]">もり[0]</td>
<td bgcolor="もり[2]">もり[1]</td>
</tr>
<tr>
<td bgcolor="peachpuff[2]">peachpuff[0]</td>
<td bgcolor="peachpuff[2]">peachpuff[1]</td>
</tr>
</table>
</html>
```

[配列を使用する][]で勉強して修正した
[配列を使用する]:http://shellscript.sunone.me/array.html#配列の要素を参照する

### ダブルクォーテーション(")で配列をくくる必要性を知らなかった
```bash
for i in ${dataArray[@]}; do
    data=$i
    animal=${data[0]}
    place=${data[1]}
    color=${data[2]}
<省略>
done
```

こう書いてこうなった

```html
<html>
<table bordercolor="black">
<tr>
<th>動物</th>
<th>居場所</th>
</tr>
<tr>
<td bgcolor="">くま</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">もり</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">peachpuff</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">ねこ</td>
<省略>
<td bgcolor="">lightblue</td>
<td bgcolor=""></td>
</tr>
</table>
</html>
```

[【bash】シェルの配列について][]のサイトで教えてもらってなおした
[【bash】シェルの配列について]:http://www.task-notes.com/entry/20150119/1421646435

### 配列の中にある配列を抜く方法がわかっていなかった
```bash
for i in "${dataArray[@]}"; do
    data=$i
<省略>
done
```

こう書いてこうなった

```html
<html>
<table bordercolor="black">
<tr>
<th>動物</th>
<th>居場所</th>
</tr>
<tr>
<td bgcolor="">くま もり peachpuff</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">ねこ まち lightpink</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">さる 上野動物園 burlywood</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">りす 鎌倉 khaki</td>
<td bgcolor=""></td>
</tr>
<tr>
<td bgcolor="">魚 海 lightblue</td>
<td bgcolor=""></td>
</tr>
</table>
</html>
```

こうやっても結果は同じだった

```bash
for i in "${dataArray[@]}"; do
    data=${i[@]}
<省略>
done
```

bashの気持ちをおトイレで考えて思いついて修正した