Excelアドインで罫線を引く方法とセル幅を自動調節する方法

# はじめに

Excelアドインで罫線を引くには、[RangeBorder Object (JavaScript API for Excel) 「Property:sideIndex & Style」](https://github.com/OfficeDev/office-js-docs/blob/master/reference/excel/rangeborder.md#properties)を用います。
Requirement setがExcelApi1.1なので、Excel2013(以降)、Excel Onlineで実現します。
Excelアドインでセル幅自動調節するには、[RangeFormat Object (JavaScript API for Excel) 「Methods:autofitColumns()」](https://github.com/OfficeDev/office-js-docs/blob/master/reference/excel/rangeformat.md#methods)を用います。
Requirement setがExcelApi1.2なので、Excel2016(以降)、Excel Onlineで実現します。

# 罫線を引くには

罫線は、
range.format.borders.getItem('EdgeTop').style = 'Continuous';
のように記述します。

## 罫線を引く場所

'EdgeTop'の部分には、罫線を引く場所を記述します。
使用可能な値は、次のとおりです。

![fig6.png](https://qiita-image-store.s3.amazonaws.com/0/192012/c14f06e0-f786-c13a-a814-ea5cc3169c82.png)

- EdgeTop　：範囲指定した最上部の罫線
- EdgeBottom　：範囲指定した最下部の罫線
- EdgeLeft　：範囲指定した左端の罫線
- EdgeRight　：範囲指定した右端の罫線
- InsideHorizontal　：範囲指定した内側水平部分の罫線
- InsideVertical　：範囲指定した内側垂直部分の罫線
- DiagonalDown　：範囲指定したセル全ての下り対角線
- DiagonalUp　：範囲指定したセル全ての上り対角線

## 罫線の線種

'Continuous'の部分には、罫線の線の種類をいずれか一つ記述します。
使用可能な値は、次のとおりです。Excel2016 for Windowsでは、このように表示されます。

![fig8-2.png](https://qiita-image-store.s3.amazonaws.com/0/192012/5e178d73-363d-62a3-a2db-5592407403bc.png)

- None　：罫線なし
- Continuous　：実線
- Dash　：破線
- DashDot　：一点鎖線
- DashDotDot　：二点鎖線
- Dot　：点線
- Double　：二重線
- SlantDashDot　：斜め一点鎖線

Excel Onlineでは、このように表示されます。

![fig9-2.png](https://qiita-image-store.s3.amazonaws.com/0/192012/589be748-f86e-b4ed-e7b0-83f326889f77.png)

DashとDashDot、DashDotDotとDotが同一に見えます。
一見、罫線の種類が違うように見えますが、Excel2016 for Windowsで開きなおすと、先ほどの罫線情報となっているので、線種の設定は同一で多少見え方が違うようです。

# セル幅の自動調節は

セル幅の自動調節は、以下のように記述します。
range.format.autofitColumns();
範囲指定したセル内の文字にセル幅を合わせます（コマンド実行時に動作しますので、コマンド実行後に文字数を減らしても、セル幅は変化しません）。

# 具体的には

前回の、[Office2016(Word2016、Excel2016) JavaScript APIを確認する方法](http://qiita.com/y__na_ka_ya_ma/items/2575e79248978ff7828d#%E5%85%B7%E4%BD%93%E7%9A%84%E3%81%AB%E3%81%AF)と同様にVisual Studioのサンプルコード（デフォルト状態）のHome.jsに以下のように追記します。
今回は、作業アドイン起動時に実行される、LoadSampleData内に記述してみます。
//罫線の設定
//セル幅の自動調節
が追記部分です。
申し訳ございません。Excel2013では、LoadSampleDataを実行しないので、確認できません。

```JavaScript:Home.js
    function loadSampleData() {
        var values = [
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)],
            [Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)]
        ];

        // Excel オブジェクト モデルに対してバッチ操作を実行します
        Excel.run(function (ctx) {
            // 作業中のシートに対するプロキシ オブジェクトを作成します
            var sheet = ctx.workbook.worksheets.getActiveWorksheet();
            // ワークシートにサンプル データを書き込むコマンドをキューに入れます
            sheet.getRange("B3:D5").values = values;

            //罫線の設定　↓ここから
            sheet.getRange("B3:D5").format.borders.getItem('EdgeBottom').style = 'Dash';
            sheet.getRange("B3:D5").format.borders.getItem('InsideHorizontal').style = 'DashDot';
            sheet.getRange("B3:D5").format.borders.getItem('InsideVertical').style = 'DashDotDot';
            sheet.getRange("B3:D5").format.borders.getItem('EdgeLeft').style = 'Dot';
            sheet.getRange("B3:D5").format.borders.getItem('EdgeRight').style = 'Double';
            sheet.getRange("B3:D5").format.borders.getItem('EdgeTop').style = 'SlantDashDot';
            //罫線の設定　↑ここまで

            //セル幅の自動調節　↓ここから
            //指定した範囲（B3:C5）のセル幅の自動調節を行います
            sheet.getRange("B3:C5").format.autofitColumns();
            //セル幅の自動調節　↑ここまで　

            // キューに入れるコマンドを実行し、タスクの完了を示すために Promise を返します
            return ctx.sync();
        })
        .catch(errorHandler);
    }
```

Visual Studioの［▶開始］を押します。Taskpaneを押します。
loadSampleDataが実行されると、
Excel2016 for Windowsでは、このように表示されます。

![fig11.png](https://qiita-image-store.s3.amazonaws.com/0/192012/5f44a75b-9341-6920-c8a7-0d5f397e67e3.png)

Excel Onlineでは、このように表示されます。

![fig13.png](https://qiita-image-store.s3.amazonaws.com/0/192012/0df9445a-7196-2caf-4417-4e81054e4b23.png)

# 参考
罫線
 [RangeBorder Object (JavaScript API for Excel) 「Property:sideIndex & Style」] (https://github.com/OfficeDev/office-js-docs/blob/master/reference/excel/rangeborder.md#properties)
セル幅の自動調節
 [RangeFormat Object (JavaScript API for Excel) 「Methods:autofitColumns()」](https://github.com/OfficeDev/office-js-docs/blob/master/reference/excel/rangeformat.md#methods)
Excel JavaScript API 要件設定
[Excel JavaScript API requirement sets](https://github.com/OfficeDev/office-js-docs/blob/master/reference/requirement-sets/excel-api-requirement-sets.md#excel-javascript-api-requirement-sets)

#おわりに

セル幅の自動調節など、当初のJavaScript API for Excelではできなかったことが、できるようになってきているので、更なるJavaScript APIの進化に期待しています。

最後までお読みいただきありがとうございました。