Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Coding Rules

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

命名規則

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

webpack

webpack というモジュールバンドラを使ってカスタマイズファイルを作成。

  • プロジェクトのディレクトリに移動して、最新版の npm をインストール
cd {projectName}
npm install
  • npm init コマンドでpackage.json作成
npm init
  • 必要なパッケージをインストール
npm install --save-dev {package name} -> devDependencies
npm install --save {package name} -> dependencies
  • 以下のようにファイルを構成
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 を利用してモジュールをエクスポート
module.exports = {
  app: {
    config: {
      fieldCode: {
        users: 'users'
      }
    }
  }
}

  • editDisabled.js (実行関数のファイル)
    • require を利用してモジュールをインポート
    • module.exports を利用してモジュールをエクスポート
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 を利用して、実行関数のモジュールをインポート
var editDisabled = require('../Common/editDisabled.js');

(function() {

  kintone.events.on('app.record.edit.show', function(event) {
    editDisabled.disabled(event);
  });
})();
  • webpack.config.js (webpack の設定ファイル)
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 のルール設定ファイル)
{
  "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 のルール適用を外したいファイルを指定)
(ex.)
node_modules
dist
webpack.config.js
  • .gitignore (コミットの際に無視するファイルを指定)
    • 容量大きい node_module などを省くことが多い
    • 「/node_modules/」のようにディレクトリとして指定しないと、指定した名前全てが検索されて無視されるので注意
(ex.)
/node_modules/
/dist/
  • package.json (インストールしたパッケージの設定ファイル)
    • npm install {package name} すると、package.json に記録される
    • scripts のところに dev と prod 環境それぞれの実行コマンドを指定しておく
{
  "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 を実行
npm run build:dev -> 開発環境用
npm run build:prod -> 本番環境用
  • dist ディレクトリにバンドルファイルが格納される
dist
  - ExpenseReport
    - ExpenseReport_bundle.js
  - ×××
    - ×××_bundle.js
  • バンドルファイルを適用

  • エラーが出たら inline-source-map でデバッグ

    • webpack.config.js の devtool で 「inline-source-map」 を指定していればバンドル前のスクリプトを展開できる inlineSourceMap.png

SourceTree

SourceTree という Git の無料クライアントを使ってリポジトリの操作をする。
GUI でコマンドいらずで操作できるので楽。
SourceTree.png

ざっくりの操作手順

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

参考記事

Mikei
Cybozu Inc. Technical Evangelist / System Engineer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away