Merge pull request #8 from true-runes/update_development_environments

Update development environments

Author: nikukyugamer

README.md

@@ -1,10 +1,13 @@
 # suikoden-election-2020-spreadsheet
+
 Spreadsheet (Suikoden election 2020)
 
 # GAS Template
+
 A GAS template is powered by [howdy39/gas-clasp-starter: A starter template for Google Apps Script by clasp](https://github.com/howdy39/gas-clasp-starter)
 
-# 手順
+# 環境構築手順
+
 - あらかじめ `$ clasp login` を行って `~/.clasprc.json` を作っておく必要がある
 - `.clasp.sample.json` をもとにして `.clasp.json` を作成する
   - `"scriptId"` の値には、スクリプトページの URL の以下の部分の値を設定する
@@ -14,7 +17,21 @@ A GAS template is powered by [howdy39/gas-clasp-starter: A starter template for
     - つまりスプレッドシートごとにリポジトリを作る必要がある
       - 開発用と本番用の場合はこの限りではない
 
+# 開発手順
+
+- `webpack.config.js` のエンドポイントに合わせて、コードを書く
+  - これを書いている時点では `src/index.ts` にごりごり書く
+    - ビルドしてできるファイルは `bundle.js` の一つになる
+- `$ yarn build` で `dist/` 配下にビルド成果が生成される
+  - `$ clasp push` で push されるのはこの `dist/` 配下のファイルになる
+  - 現在の `$ yarn build` を実行すると、ビルド前に `dist/` は削除される
+  - 現在の `webpack.config.js` では `src/*.ts` がトランスパイル対象になる
+- `package.json` の `scripts` と `webpack.config.js` は自分用に修正していった方がいい
+  - デフォルトの `scripts` は自分にあっていないためリネームしてある
+- `sample/` 配下には `gas-clasp-starter` に含まれているサンプルコードを配置してある
+
 # 参考
+
 - [howdy39/gas-clasp-starter: A starter template for Google Apps Script by clasp](https://github.com/howdy39/gas-clasp-starter)
 - [Google Apps Script をローカル環境で快適に開発するためのテンプレートを作りました - Qiita](https://qiita.com/howdy39/items/0e799a9bfc1d3bccf6e5)
-- [5分で作るclaspを使ったGoogle Apps Scriptの開発環境 - Qiita](https://qiita.com/suin/items/b264092eab3ce553f16a)
+- [5 分で作る clasp を使った Google Apps Script の開発環境 - Qiita](https://qiita.com/suin/items/b264092eab3ce553f16a)

package.json

@@ -4,10 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "lint": "eslint --fix src/**/*.ts",
+    "default:lint": "eslint --fix src/**/*.ts",
+    "default:build": "npm run lint && npm run test && rimraf dist && webpack && cpx src/appsscript.json dist && cpx \"src/**/*.html\" dist",
+    "default:push": "npm run build && clasp push",
     "test": "jest",
-    "build": "npm run lint && npm run test && rimraf dist && webpack && cpx src/appsscript.json dist && cpx \"src/**/*.html\" dist",
-    "push": "npm run build && clasp push"
+    "build": "rimraf dist && webpack && cpx src/appsscript.json dist"
   },
   "repository": {
     "type": "git",

sample/index.ts

@@ -0,0 +1,9 @@
+import { SheetService } from './sheet.service';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare let global: any;
+
+global.createNewFile = (): void => {
+  const ss = SheetService.createInitialFile('New file');
+  ss.getRange('A2').setValue('Happy gas!');
+};

sample/sampel.ts

@@ -0,0 +1,5 @@
+function debugFunction(): void {
+  console.log('Hello, debugFunction!')
+}
+
+debugFunction()

sample/sheet.service.ts

@@ -0,0 +1,12 @@
+import Spreadsheet = GoogleAppsScript.Spreadsheet.Spreadsheet;
+import { getDayFormat } from './util';
+
+export class SheetService {
+  static createInitialFile(prefix: string): Spreadsheet {
+    const fileName = `${prefix} ${getDayFormat()}`;
+    const ss = SpreadsheetApp.create(fileName);
+    const range = ss.getRange('A1');
+    range.setValue('Hello, clasp!');
+    return ss;
+  }
+}

sample/util.ts

@@ -0,0 +1,6 @@
+export const getDayFormat = (date = new Date()): string => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month}-${day}`;
+};

src/appsscript.json

@@ -0,0 +1,7 @@
+{
+  "timeZone": "Asia/Tokyo",
+  "dependencies": {
+  },
+  "exceptionLogging": "STACKDRIVER",
+  "runtimeVersion": "V8"
+}

webpack.config.js

@@ -12,7 +12,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.ts$/,
+        test: /\src\/.ts$/,
         use: 'ts-loader',
       },
     ],