[備忘録] ソース管理メモ（webpack, SourceTree, git）

備忘録として、JavaScript のソース管理について書きます。

# Coding Rules
ソース管理の前にコーディングルール。
基本的に社内の ESLint ルールがあるので、それを使う。

### 命名規則
- 変数名
    - キャメルケースを利用する
    - ```var getRecords = ×××;```
- 関数名, パラメータ, オブジェクト, クラス, プロパティ名
    - キャメルケースを利用する
    - ```function myFunction(firstParam, secondParam) {}```
- コンストラクタ, オブジェクト, クラス名
    - パスカルケースを利用する
    - ```var FunctionSetting = {}```
- 定数名
    - アッパーアンダースコアケースを利用する
    - ```var MAX_ROW = 10;```

# webpack
[webpack](https://webpack.js.org/) というモジュールバンドラを使ってカスタマイズファイルを作成。

- プロジェクトのディレクトリに移動して、最新版の [npm](https://www.npmjs.com/) をインストール

```terminal
cd {projectName}
npm install
```

- npm init コマンドでpackage.json作成

```terminal
npm init
```

- 必要なパッケージをインストール

```terminal
npm install --save-dev {package name} -> devDependencies
npm install --save {package name} -> dependencies
```

- 以下のようにファイルを構成

```text
projectName
  - Common
    - common.js (定数を管理)
    - editDisabled.js (複数アプリに適用する処理を切り出してファイル化)
  - ExpenseReport(処理ごとにファイル分割)
    - desktop.js
  - ×××
    - desktop.js
  - dist (webpack でバンドルされたファイルの格納先)
  - webpack.config.js (webpack の設定ファイル)
  - .eslintrc.json (ESLint の設定ファイル)
  - .eslintignore (ESLint のルールを無視するファイルを指定)
  - .gitignore (git でコミットする際に無視するモジュールを指定)
  - package.json (パッケージ管理ファイル)
  - package-lock.json
  - node_modules (モジュールの格納先)
```

> 📌 ポイント

> - common.js (定数などの設定ファイル)
>   - module.exports を利用してモジュールをエクスポート

> ```javascript
> module.exports = {
>   app: {
>     config: {
>       fieldCode: {
>         users: 'users'
>       }
>     }
>   }
> }

> ```

> - editDisabled.js (実行関数のファイル)
>   - require を利用してモジュールをインポート
>   - module.exports を利用してモジュールをエクスポート

> ```javascript
> var common = require('../Common/common.js');

> module.exports = {
>   disabled: function(event) {
>     var record = event.record;
>     var users = record[common.app.config.fieldCode.users];
>     if (event.reuse) {
>       users.value = [];
>     }
>     users.disabled = true;
>     return event;
>   }
> };

> ```

> - desktop.js (イベントハンドラ記載のファイル)
>   - require を利用して、実行関数のモジュールをインポート

> ```javascript
> var editDisabled = require('../Common/editDisabled.js');

> (function() {

>   kintone.events.on('app.record.edit.show', function(event) {
>     editDisabled.disabled(event);
>   });
> })();
> ```

> - webpack.config.js (webpack の設定ファイル)

> ```javascript
> var path = require('path');
> var webpack = require('webpack');

> module.exports = {
>   entry: { // desktop.jsなど実行したいファイルを指定
>     ExpenseReport: './ExpenseReport/desktop.js',
>     ×××: './×××/desktop.js'
>   },
>   output: { // bundleファイルの出力先を指定
>     path: __dirname + '/',
>     filename: 'dist/[name]/[name]_bundle.js'
>   },
>   resolve: { // モジュールの解決方法を指定
>     alias: {
      'modules': path.join(__dirname, 'node_modules')
>     }
>   },
>   devtool: 'inline-source-map', // inline-source-map, eval-source-mapなど開発者ツールでソース展開するようにしとくと便利
>   mode: 'development' // dev(開発)かprod(本番)を指定
> };

> ```

> - .eslintrc.json (ESLint のルール設定ファイル)

> ```json
> {
>   "extends": "@cybozu/eslint-config/presets/kintone-customize-es5",
>   "parserOptions": {
>       "sourceType": "module"
>   },
>   "globals": {
>   },
>   "rules": {
>       "no-underscore-dangle": "off",
>       "no-console": "off",
>       "max-statements": "off",
>       "max-len": "off",
>       "no-lonely-if": "off",
>       "no-param-reassign": "off"
>   }
> }

> ```

> - .eslintignore (ESLint のルール適用を外したいファイルを指定)

> ```text
> (ex.)
> node_modules
> dist
> webpack.config.js
> ```

> - .gitignore (コミットの際に無視するファイルを指定)
>   - 容量大きい node_module などを省くことが多い
>   - 「/node_modules/」のようにディレクトリとして指定しないと、指定した名前全てが検索されて無視されるので注意

> ```text
> (ex.)
> /node_modules/
> /dist/
> ```

> - package.json (インストールしたパッケージの設定ファイル)
>   - ```npm install {package name}``` すると、package.json に記録される
>   - scripts のところに dev と prod 環境それぞれの実行コマンドを指定しておく

> ```json
> {
>   "name": "{projectName}",
>   "version": "1.0.0",
>   "description": "",
>   "main": "webpack.config.js",
>   "scripts": {
>     "test": "echo \"Error: no test specified\" && exit 1",
>     "build:dev": "webpack --mode development",
>     "build:prod": "webpack --mode production"
>   },
>   "author": "",
>   "license": "ISC",
>   "devDependencies": {
>     "eslint": "^5.16.0",
>     "webpack": "^4.29.6",
>     "webpack-cli": "^3.3.0"
>   }
> }

> ```

- webpack を実行

```terminal
npm run build:dev -> 開発環境用
npm run build:prod -> 本番環境用
```

- dist ディレクトリにバンドルファイルが格納される

```terminal
dist
  - ExpenseReport
    - ExpenseReport_bundle.js
  - ×××
    - ×××_bundle.js
```

- バンドルファイルを適用

- エラーが出たら inline-source-map でデバッグ
    - webpack.config.js の devtool で 「inline-source-map」 を指定していればバンドル前のスクリプトを展開できる
![inlineSourceMap.png](https://qiita-image-store.s3.amazonaws.com/0/90265/bb6a4a04-2924-eed8-02ac-97178a0619d4.png)


# SourceTree
[SourceTree](https://sourcetreeapp-marketing.atlassian.com) という Git の無料クライアントを使ってリポジトリの操作をする。
GUI でコマンドいらずで操作できるので楽。
![SourceTree.png](https://qiita-image-store.s3.amazonaws.com/0/90265/63b1808d-25d7-e987-ab0b-4f985fd88e20.png)

### ざっくりの操作手順
- 操作したいリポジトリを指定して「クローン」
- master を「プル」
- プロジェクト開発用にブランチを作成
- 開発用のブランチを「チェックアウト」
- ローカルディレクトリで実装
- ファイルステータスに差分のあるファイルが上がるので、一つずつチェックしてコミットリクエストにあげる
- コミットリクエストを「プッシュ」 & 「コミット」
- 「プルリク」を作成してレビュー依頼
- レビューOKで「マージ」
- 開発完了後は、開発用のブランチ削除

# 参考記事
- [webpack 4 入門](https://qiita.com/soarflat/items/28bf799f7e0335b68186)
- [webpack.config.jsがわからない](https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3)
- [.gitignoreの注意点](https://qiita.com/eiryu/items/27818cd533371536ec0a)
- [モジュール化(importとrequireの違い)](https://www.wakuwakubank.com/posts/466-javascript-module-import-export/)
- [CommonJS と ES6の import/export で迷うなら](https://qiita.com/rooooomania/items/4c999d93ae745e9d8657)
- [Node.jsのES Modulesサポートの現状確認と備え](https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs)