Frontend Nagoya #3-2


Frontend Nagoya #3 の続きです。
コードを触っていて、いつの間にか謎の動きをするようになってしまったことってよくありますよね?ないですかね・・・。
今回は、そんな意図しない動きを作り込まない為に、自動的にコードチェックをするツールを取り入れていくための方法や、その必要性についてのお話を聞くことができました!


『BackstopJS + CircleCI + Docker で、HTML/CSSの自動テストをした話。(WordPressのテーマ編)』
占部 紘 さん

占部さん は、通称トロさんと呼ばれています。由来は「占」だそうです。
また、ワードプレスのプラグイン屋さんで知られているようです。代表テーマは『Vanilla

話の概要

CSSは、一つの変更で簡単に広範囲の上書きがされてしまい「意図しない変更」をしてしまう時がある。そんな意図しない変更を、!importantや、セレクタを強くすることで解決しようとすると更に予期しない不具合が発生する。そこで、テストやビルドを定期的に実行(CI)し、意図しない変更・予期しないバグの早期発見をすることで、この悪循環を断ち切りましょう!
しかし、テストやビルドを手動で定期的に実行するのは面倒で忘れがちになってしまうので、自動化させてしまいましょう!

継続的インテグレーション
(Continuous Integration)

継続的インテグレーションとは、主にプログラマーのアプリケーション作成時の品質改善や納期の短縮のための習慣のことです。略して「CI」と言います。
例)定期的なテスト/ビルドの実行


感想

普段、自分だけでコーディングしていても「意図しない変更」をしてしまうことがあります。それを防ぐ手段として、SCSSではBEM(命名規則)を取り入れたり、CSSの詳細度を上げないようにしたり、作ったあとのメンテナンス性を考えてファイルをパーツごとに分けたりしています。それでも、時々「意図しない変更」が入ってしまいます。「意図しない変更」は、時間が経てば経つほどこじれていくように感じています。(自分がどんなコードを書いたのかという記憶が薄れていくことも原因の一つ…。)
実体験からも、CIを定期的に行うのは作業効率化とモチベーション(何が原因でおかしくなっているのかわからなさすぎるとイライラしてくる)にとても効果的だと思うのでこれから取り入れていきたいと思いました。

CIを自動化するサービスが多数存在することを今回のセッションで知りました。しかし、なんでもかんでもCIサービスを利用すればいいというわけではなく、CPUのスペックや、Webページの量などに応じてどのCIサービスを使うべきか、そもそもCIサービスを使用すべきかを検討する必要があるようです。
利用する際はそのメリット、デメリットを理解しないと作業に支障が出てしまう危険があるので、特徴を理解してから利用するのが良さそうです。
と言っても、様々なサービスが普及していて「どれがいいの??」となってしまいそうなので、プライベートで使う分にはとりあえず使ってみるのもありかなと思います。

スライド「BackstopJS + CircleCI + Docker で、HTML/CSSの自動テストをした話。(WordPressのテーマ編)


投稿 2018/02/07

関連記事