こんばんは。このサイトも立ち上げから6年くらい経ちました。思えば、何もわからない状態から手探りで制作をはじめてからというもの、このサイトも色々変遷をしてきました。今回はWeb制作のお話になりますが、少々お付き合いくださいませ。

webpackを導入しました

webpackとは、現在最も注目されているWebフロントエンド開発ツールです。簡単に言うと、なんでもかんでも1つにまとめる君です。Web制作に必要なhtml, css, js, 画像, フォントなどの材料(アセット)をなんでも取り込んで、よしなにしてくれるというわけです。

今回デザインは据え置きですが、制作環境にwebpackを取り入れました。JavaScriptやSass、Webフォント関連を、全てwebpackに一任。今までは、js,cssライブラリやwebフォントははcdnで個々に読み込んで使うという、いわゆる旧態依然とした方法をとっていましたが、全てnpm経由でwebpackでバンドルする方法に変更しました。ようやく、イマドキ風の制作環境に移行完了です。これによってメンテナンス性向上だけでなく、httpリクエストの削減などによるサイトの高速化も見込めます。

自前の細かいスクリプトをモジュール化してnpmで管理

かねてから蓄積されてきたオレオレスクリプトの数々を、モジュール化してnpmに公開し管理することにしました。これによって、今までは他プロジェクトにコピペして使ってたスクリプトたちをnpm経由で常に最新版を利用できるようになりました。

自前WordPressプラグインのcssもwebpack

自前プラグインのcssも全部webpackに投げ込む。まさに、この時のために、自前プラグインは全てcssの出力をオフにできるようにしていました。これによってhttpリクエストを削減します。

自前sassフレームワークを一新

今までもオレオレsassフレームワークを使っていましたが、このたび、modular scaleやvertical rhythmの概念を取り入れた、より洗練されたsassフレームワークmotivをリリースし、当サイトにも採用しました。まだベータ版ですが。

肝心の速度は変わったのか

pingdom toolsでチェックしてみました。左が使用前、右が使用後です。

httpリクエストの数が 94 -> 72 と激減。ロード時間も 2.97s -> 1.53s に改善されました。単純にcssやjsの読み込み数が減ったのと同時に、いくつかの細かい画像がwebpackによりインライン化(base64化)されたため、その分のhttpリクエストが減っています。

Web制作について思うこと

僕がWeb制作をはじめた頃は、まだ font タグとかが現役で、またflash全盛時代でした。その頃から思うと、Web制作事情は大きく変わったなぁと実感する今日このごろ。

Web制作の基本は、html, css, jsの3点セットであることには変わりませんが、実のところ、現在ではhtmlやcssを直に書くことはまずありません。その代わり、それらを生成、コンパイルするためのsass, stylus, WordPress(php), pug(旧jade), jekyll, browserify, webpack, 各種フレームワークやライブラリであるjQuery, React, Angular, Vue, Bourbon, Bootstrap, CakePHP,モジュール管理のためのnpm, タスク管理のためのGulpやnpm script, バージョン管理するためのGit、およびこれらの設定ファイルやeslintなどの静的検証ツールなど、超効率で開発できるようになった反面、これら膨大なツールたちの使い方やお作法を学んだり触れたりしている時間の方が遥かに長くなりました。いかに設定するかが勝負で、設定が完了したら開発の半分終わり、みたいな。webpackやnpmを導入してからはさらにこの傾向は加速した気がします。

脱Gulp。したい

タスクランナーにはずっとGulpを使ってきましたが、webpack x npm scriptだけでなんとかならんかなーと思いつつ。核となるタスクはnpm scriptへ移行しましたが、やっぱGulpは直感的で使いやすいので、細かいタスク用にちょいちょい使ってます。

脱jQuery。

僕はWordPressベースのサイト制作がメインで、SPAなどの開発はほとんどしたことはありません。JavaScriptと言えばjQuery、みたいに思って来ました。でも、数々のオレオレjQueryモジュールをcommonjs化しながら、イマドキjQueryプラグインとか作ってるのオレだけなんじゃないか…?という思いがよぎりました。脱jQuery宣言、すべきなんだろうか。でも、WordPressのプラグインとかってけっこうjQuery依存のものも多く、サイトから撤廃するのはなかなか難しそうでもあります。