フロントエンドの改善、継続中です

フロントエンドエンジニアの岡田です。

3月からフロントエンドチームのメンバーが2名増えました 🎉
現在は、開発環境の改善とリファクタリングに力を入れています。

今回は、3月に入って改善したことについてお伝えします。

PrettierでCSSを自動フォーマット

LCLでは、Prettierを使って共通のコードフォーマットがかかるようにしています。
PrettierはJSについては問題なく動いていたのですが、CSSについてはうまく動かず、手動でフォーマットしていました。ですが、手動での運用では、フォーマットを忘れてしまう、という問題がありました。

そこで、CSSも自動でフォーマットがかかるように改善しました。

npm-run-allの導入

npm-run-allを使うと、複数のnpm-scriptsを実行するときに、package.jsonが簡潔に書けるようになります。
npm-run-allについては、以下の記事の説明がわかりやすかったのでここでは割愛します。
npm-run-all - 橋本商会

npm-run-all導入前後のスクリプトは以下のとおりです。（※一部他の改修も入っています）

導入前

  "scripts": {
    "start": "npm run prettier:watch & webpack --config webpack.dev.js --watch & browser-sync start --config frontend/bs-config.js & npm run sass:build & npm run sass:watch & npm run imagemin:watch",
    "build": "webpack --config webpack.prod.js && npm run sass:build",
    "prettier:watch": "onchange 'frontend/src/scripts/**/*.{js,jsx}' -- prettier --write --print-width 80 --single-quote --trailing-comma es5 {{changed}} & onchange 'app/assets/javascripts/**/*.js' -- prettier --write --print-width 400 --single-quote --trailing-comma es5 {{changed}}",
    "prettier:build-es5": "prettier --write --print-width 400 --single-quote --trailing-comma es5 app/assets/javascripts/**/*.js",
    "prettier:build-es6": "prettier --write --print-width 80 --single-quote --trailing-comma es5  frontend/src/scripts/**/*.{js,jsx}",
    "sass:build": "node-sass frontend/src/sass/entry --importer node_modules/node-sass-globbing/index.js --output app/assets/stylesheets/dist --source-comments true",
    "sass:watch": "onchange 'frontend/src/sass' -- npm run sass:build",
    "prettier-stylelint:build": "prettier-stylelint --quiet --write frontend/**/*.scss",
    "prettier-stylelint:watch": "onchange 'frontend/src/sass' -- prettier-stylelint --quiet --write {{changed}}",
    "imagemin:build": "node imagemin.js",
    "imagemin:watch": "onchange 'frontend/src/images' -e '**/*.DS_Store' -- npm run imagemin:build"
  },

導入後

  "scripts": {
    "start": "npm-run-all build:scss -p watch:**:* browser-sync",
    "build": "webpack --config webpack.prod.js && npm run build:scss",
    "build:js": "webpack --config webpack.dev.js",
    "build:scss": "node-sass frontend/src/sass/entry --importer node_modules/node-sass-globbing/index.js --output app/assets/stylesheets/dist --source-comments true",
    "browser-sync": "browser-sync start --config frontend/src/configs/bs-config.js",
    "prettier:es5": "prettier --write --print-width 400 --single-quote --trailing-comma es5",
    "prettier:es6": "prettier --write --print-width 80 --single-quote --trailing-comma es5",
    "prettier:scss": "prettier --write",
    "imagemin:build": "node frontend/src/tools/imagemin.js",
    "watch:js": "npm run build:js -- --watch",
    "watch:scss": "onchange 'frontend/src/sass' -- npm run build:scss",
    "watch:prettier:es6": "onchange 'frontend/src/scripts/**/*.{js,jsx}' -- npm run prettier:es6 {{changed}}",
    "watch:prettier:es5": "onchange 'app/assets/javascripts/**/*.js' -- npm run prettier:es5 {{changed}}",
    "watch:prettier:scss": "onchange 'frontend/src/sass' -- npm run prettier:scss {{changed}}",
    "watch:imagemin": "onchange 'frontend/src/images' -e '**/*.DS_Store' -- npm run imagemin:build"
  },

一行の記述量が減り、わかりやすくなりました😇