出来上がったもの(2018年9月)

ソースコード

この記事は半起半眠みたいな状態で書いたので、文章が壊滅している可能性がありますがご了承ください。

#dependencies

yarn add -D parcel-bundler babel-core babel-preset-env css-mqpacker eslint eslint-config-precure husky lint-staged node-sass node-sass-package-importer parcel-bundler parcel-plugin-imagemin parcel-plugin-inlinesvg postcss postcss-short postcss-sorting pug stylelint stylelint-config-recommended-scss stylelint-scss

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons awesome-sass-easing barba.js bezier-easing imagesloaded masonry-layout mathsass minireset.css sass-metallic-ratio webfontloader

#バンドルツール

普段はwebpackを使っていましたが、今回はParcelを採用しました。

理由はwebpack.config.js書くのがそろそろダルくなってきたというのがメインなんですが、それ以外にwebpack-dev-server関係が上手くいかなかったなどがありました。

package.json

  "scripts": {
    "dev": "npx parcel ./src/index.pug",
    "build": "npx parcel build ./src/index.pug --experimental-scope-hoisting",
  }

基本的にnpmスクリプトとして登録しておくと楽でいいと思います。

buildの際に--experimental-scope-hoistingなるオプションをつけるとTree-Shakingが行われ、ファイルサイズを圧縮する事ができます。（FontAwesome5関連は後述します）

Parcelプラグイン

Parcelにはプラグインがいくつか開発されており、parcel-plugin-*という名前で登録されています。
Parcelプラグインはインストールしておくだけでparcel側が勝手に使用します。

今回はparcel-plugin-imageminとparcel-plugin-inlinesvgを使いました。

parcel-plugin-imagemin

Imageminプラグインでは画像の圧縮を担当します。
imagemin.config.jsで画像の圧縮に関する設定を行うことが出来ます。自分の場合はこんな風です。

imagemin.config.js

module.exports = {
  mozjpeg: {
    progressive: true,
    quality: 65,
  },
  pngquant: {
    quality: 65,
    speed: 4,
  },
  gifsicle: {
    interlaced: false,
    optimizationLevel: 3,
  },
  webp: { quality: 25 },
}

デフォルト値、設定方法はこれらのリポジトリを参照してください。

アニメーションwebpはまだ対応しておらず、エラーを吐いてしまうことが注意点です。

parcel-plugin-inlinesvg

SVGファイルをこのように使ったりする時に必要になります。

const logo = require("mylogo.svg")

中間ツール

Parcelはいくつかの中間ツールに対応しています。(公式ドキュメント)

browserslist

対応させるブラウザを指定することが出来ます。(Github)

.browserslistrc

>0.25%
not ie 11
not op_mini all

Opera Mini、IE11を除く0.25%以上のシェア率のウェブサイトに対応するように記述してあります。

babel

Babelはごく一般的な、babel-preset-envだけの構成です。

.babelrc

{
  "presets": ["env"]
}

babel-preset-envはbrowserslistに対応しています。(公式ドキュメント)

postcss

.postcssrc

{
  "parser": "postcss-scss",
  "plugins": {
    "autoprefixer": {},
    "css-mqpacker": {},
    "postcss-sorting": {},
    "postcss-short": {}
  }
}

postcss-scss PostCSS用のSCSSパーサー。
autoprefixer 自動でプレフィックスを付ける。browserslistで対応ブラウザを指定することが出来る。
css-mqpacker メディアクエリを一つにまとめる。
postcss-sorting プロパティを並び替えて、サイズの縮小化を図る。
postcss-short プロパティーのショートハンドを追加。

Sass

root.scss

@import '~minireset.css/minireset';//node_modules直下のファイルを読み込みたい。

webpackなどではスンナリ通ったこれらのコードが突然死んだので、node-sass-package-importerを使いました。

この記事などが参考になると思います。

.sassrc.js

const packageImporter = require('node-sass-package-importer')

module.exports = {
  importer: [packageImporter()],
}

Lint、フォーマット関連

使用したのはESLint、Stylelint、Prettierです。

エディタ側のフォーマットの設定で、editorconfigも使いました。

ESLint、Prettierはお使いのエディタの拡張機能も合わせて使うと幸せになれるかもしれません。

ESLint

@akameco氏のeslint-config-precureをそのまま継承しています。(Qiita記事)

PrettierとESLintのコンフィグ重複の調整を行ってくれるので幾分か楽です。

.eslintrc

{
  "extends": ["precure"]
}

Stylelint

SCSS使いなので、コンフィグはStylelint-config-recommended-scssを継承しています。

no-descending-specificitは自分のコードの書き方に合わなかったので無効化しています。

.stylelintrc

{
  "extends": "stylelint-config-recommended-scss",
  "rules": {
    "no-descending-specificity": null
  }
}

Prettier, EditorConfig

akameco氏のコンフィグを参考に。

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false

コミット時のLintとか

husky、lint-stagedを使って、package.jsonに以下のプロパティを追加。

package.json

  "scripts": {
    "precommit": "npx lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "src/**/*.{css,scss}": [
      "prettier --write",
      "stylelint",
      "git add"
    ]
  },

これでgit commitする度にLintが通ったりフォーマットされたりします。

その他色々

FontAwesome5

FontAwesome5にはTree Shakingの機能がちゃんとあるのですが(公式ドキュメント)、Parcel側が採用しているJS圧縮パッケージと相性が悪く、下記の書き方だと成功しません。

fontawesome.js

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope, faCopy } from '@fortawesome/free-solid-svg-icons'

library.add(
  faEnvelope,
  faCopy
)

結構面倒くさいですが、この書き方だと成功するのでかなり圧縮されます。（自環境では900kBから200kBほど）

fontawesome.js

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope'
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy'

library.add(
  faEnvelope,
  faCopy
)

いずれ対応することを願っていましょう。

CSSノーマライズ

「結局どれが良いんだよ！」と思いながら、今回はMiniReset.cssを採用しました。

おすすめがあったら誰か教えてください。

Webフォント

WebフォントのCSSをHTMLにベタ書きすると読み込まれた判定が出来ないので、webfontloaderを使用しています。

結構色々な事ができるので、詳しくは公式ドキュメントを読んでください。
私はGoogleFonts信者なので、googleプロパティしか使ったこと無いのですが.......

自分はPromiseとして使っています。

import webfontloader from 'webfontloader'

const webfont = new Promise(resolve => {
  webfontloader.load({
    google: {
      families: [
        'VT323',
        'Lobster Two:400i',
        'Poppins;400,300',
        'Roboto Mono',
        'Sawarabi Gothic:latin,japanese',
      ],
    },
    active() {
      resolve()
    },
  })
})

余談ですが、いつの間にかGoogleFontsに日本語が追加されてました。やったね！
https://fonts.google.com/?subset=japanese

#おわりに

barba.jsに苦戦したり、スマホ対応を全力でぶん投げたりしましたが、楽しかったです。

また作り直したいですね。

こんなライブラリあるよ！等のコメントがあれば大変嬉しいので、よろしくおねがいします。