こんばんは、HTMLファイ部ののびーです。Web技術で何かしらうまいことやるのを得意としてます。
今回はAdvent Calendarの場を借りて、HTMLファイ部で運用しているkayac-html5-starterの話をさせていただきます。
それはなんぞや
なにはともあれレポジトリをぺたり。
「starter」という名前は、Googleさんが公開しているWeb Starter Kitから来ていますが、要するに 新しいWebサイトの開発を始めるときに使えるひながたです。
こちらに乗っかってもらえば、gulp等々もろもろのツールを使ったことがない方でも、快適・高速・モダンなWebフロント開発ができますよ！というわけです。
今年の初めあたりからまともに作り始め、かなり定着したなということで今回ご紹介します。 （ちなみに現在つかっているものは２代目で、元社員のいそっぷさんが作ってくれた初代というのもあります）
目的
- 新しいメンバーが、HTMLファイ部でどんなツールを使って開発しているのか、手っ取り早く理解できるようにする
- メンバー内で共有している開発環境があることで、プロジェクト担当者の引き継ぎ・増員がスムーズになる
やらないこと
スタイルガイドは含まない
googleのWeb Starter Kitは、PC/Tab/SPの３環境で快適に閲覧できる、スタイルのサンプルも最初から含まれていますが、kayac-html5-starterにスタイルのサンプルは全く含まれていません。
これはHTMLファイ部が主に受託開発を担当するチームであり、各プロジェクトで共通して使えるデザイン要素が全くない、というあたりが関係しています。
強制しない
これも地味に特徴的なところだと思っているのですが、会社として用意しているツールでありつつ、全てのプロジェクトでこちらを利用することをルールとしているわけではありません。
あくまで、メンバーがここで使われているくらいの開発ツールの知識と、共通認識を持っていることが大事なので、上級者はkayac-html5-starterとは別にプロジェクトひな型を持っていることが多いです。
基本構成
Task Runner: gulp
npm scriptで完結させる派も現れつつありますが、現状は可読性・拡張性の意味でもgulpで書いておくのが無難かなということでgulpです。 ちなみに、gulp.parallel・gulp.seriesあたりが便利ということでgulp4系を使っています。
Javascript: browserify + babel (es2015)
ファイルのモジュール化を簡易にするbrowserifyと、もろもろJavascriptの嫌なところを克服しつつあるes2015を採用しています。 複数人での開発になった際、classの書き方が統一されるというだけでもes2015導入の理由になりますね。とてもよいです。
CSS: node-sass + pleeese
「compassは重い」等々の意見からnode-sassを採用。ベンダープレフィックスなどはpleeeseが補ってくれています。拡張すればautoprefix以外にもいろいろやってくれるので便利です。
HTML: pug (jade)
なんだかんだ、ビルドを噛ませることでの恩恵が一番大きいのはHTMLかもしれません。 メタ文言・シェア文言を別で管理したり、シェア用のページを大量生成したり、活躍しています。
開発用サーバー: browser-sync
こちらも選択肢が色々とありますが、更新時のオートリロードに対応しており、オプションも多い点から採用してます。 weinre経由でのリモートデバッグにも対応しているので、奇想天外な挙動をする特定端末のデバッグをする際などにも便利です。
アップデートの軌跡
Webフロントエンドエンジニアの方なら、2016年もいろいろと技術トレンドの変遷が多い年だったことは納得いただけるのではないかと。kayac-html5-starterも、そうした技術トレンドにできるだけキャッチアップできるよう更新を続けてきました。
こちらでは、そうした変遷が垣間見えるアップデートをいくつかピックアップしてみました。
Jadeをpugにする by hystking · Pull Request #11 · kayac/kayac-html5-starter
- HTMLテンプレートのjadeは気がついたらpugという名前に変わってしまいました。かわいくなりましたよね。
gulp.watch がうまく動かないのでgulp-watchに差し替え by jshimazu · Pull Request #19 · kayac/kayac-html5-starter
- なにかしらのアップデートでgulp.watchが仕事しなくなってしまったので、別npmを使って解決。
- （改めて見たけどあんまり原因が分からない…。ただしどうやら、gulp4系を使っている影響らしい。）
bowerを殺す by fnobi · Pull Request #33 · kayac/kayac-html5-starter
- 一部のコンポーネントをbowerで管理していたのですが、npmに一本化しました。reset.cssのようなjsを含まないものでもnpmに入ってくるとは。
yarn導入 by nobii · Pull Request #32 · kayac/kayac-html5-starter
- インストールが早く、依存関係のlockファイルも残せるパッケージマネージャー・yarnも導入済みです。npm installでのインストールも可能なままなので、導入ハードルが低いのもよいですね。
導入してよかったこと
プロジェクトメンバーの引き継ぎ・増員がしやすくなった
目的の項にも書いた通り、標準の開発環境をつくることで認識が近くなり、プロジェクトの途中でメンバーの変更があってもスムーズに対応できるようになりました。
メンバーみんなの初期環境整備が早くなった
それまではプロジェクトのひながたを特別用意していないメンバーも多かったので、まずこれを用意することで開発の初動スピードが上がりました。
各自のes2015・yarnの導入が早まった
この手のツールは、意識して乗り換えていかないとなかなか広まらないものですが、Starter Kitの方でアップデートすることで、チーム内標準として普及させやすくなりました。
まとめ
つらつらと書いてしまいましたが、いかがでしたでしょうか？ Webフロント開発のツールに迷っている方など、一度使ってみてもらえたら嬉しいです。
明日は同じくHTMLファイ部から、アニメーションが得意な急成長中メンバー・ @okumuramm が記事を書いてくれます。おたのしみに！
