経緯

Webシステムの開発において極力楽をしたい、便利なものは取り入れたい、使いやすくしたいなどなど。
一度にやると大概失敗するものです。

ここ一年くらいで実施したこと、その評価をまとめてみたいと思います。

CSSフレームワークの利用

個人的な評価…△

■CSSフレームワークのメリット
・フレームワークは誰が書いても同じように扱える。
・ドキュメントもしっかりしている。
・CSSの記述が少なく済むのでごちゃごちゃすることがなくなる。
■CSSフレームワークのデメリット
・フレームワークの仕様に引きづられ、細かい調整が必要になること。
　※特にマルチバイトの表現に関わるあたりが困ることが多い気がしました。

今回は仕様に引きづられて余計なCSSの修正が煩わしかったため、Bootstrapの利用をやめました。

js、CSSファイルの圧縮

個人的な評価…◯

minifyでだけではファイルサイズの圧縮にも限界があります。
そこでjs、CSSファイルをgzip圧縮するようにしました。
■js、CSSファイル圧縮のメリット
・単純にファイルサイズが大幅に小さくなるため転送量が減る。
・高速化が見込める。
■js、CSSファイル圧縮のデメリット
・何でもかんでも圧縮してしまうと修正の度に圧縮が必要になるため手間が増える

効果が大きいのは共通のライブラリなどで、直接コードの修正を行わないファイルサイズの大きいものでしょうか。
CSSについては圧縮はいらないような気もしました。
転送量の大幅な抑制ができました。
手動で圧縮するのも面倒なので圧縮対象は選ぶ必要があるかもしれません。
頻繁に修正するものは手動で圧縮して管理するのは非常に面倒です。

mod_deflateの利用

個人的な評価…◯

サーバサイドでコンテンツの圧縮を行うように設定してみました。
■mod_deflate利用のメリット
・ajaxを多用するシステムで通信の際の転送コストが大きかったため大きな改善ができました。
・サーバ側で圧縮を行っているため、特に設定を変更する必要はなく導入の手間がほぼない。
■mod_deflate利用のデメリット
・サーバのCPUに負荷をかける。

下記サイトを参考にして実装しました。
→gzip圧縮でCSSやJSなどの転送量を減らす方法

タスクランナーの導入

個人的な評価…✕

前述のファイルの圧縮が成功したので、その手間を減らすことを考えてみました。
CSS,jsをminifyしてgzip圧縮するところまでをタスクランナーで自動化です。
■タスクランナー導入のメリット
・自動化しているので何も考えることなくコーディングできる。
■タスクランナー導入のデメリット
・チームで開発するときに各自のPCで全く同じバージョン、同じ設定でタスクランナーを動かせるようにする必要がある。

タスクランナーの使い方から共有して、実際にやってみて運用ルールの改善点があったら修正して…
となると非常に煩雑で、余計な手間がかかる（面倒くさくなる）
うまくやれればいいのでしょうけど、正直なところそこに時間をかけるよりは別の方法で解決したいなと感じました。

SCSSの導入

個人的な評価…◎

■SCSS導入のメリット
・CSSを階層で書ける。
・定数を利用でき、プログラム的なことがいろいろとできる。
■SCSS導入のデメリット
・SCSS→CSSの変換が必要

SCSSについては下記サイトを参考にしました。
→みんなが使う理由がわかる！Sass(SCSS)の基本機能、まとめました。

SVGの積極的な導入

個人的な評価…×

■SVG導入のメリット
・軽量
・サイズを変更しても潰れずにきれいに表示される
・CSSを利用することができる
■SVG導入のデメリット
・IE,EdgeではSVGの扱いに難があり、期待通りに表示できない、制御できないなどなどの不具合がある

メリットが多く、アイコンの利用などにも非常に便利なので、できれば積極的に取り入れて行きたかったのですが、残念です。

Webフォントの導入

個人的な評価…○

■Webフォント導入のメリット
・環境（ＯＳ等）に依存せず、フォントの違いによる見え方の差異を解決できる。
■Webフォント導入のデメリット
・マルチバイトのフォントデータを取得するため初回に通信量が大きくなる。

Webフォントの導入には下記サイトを参考にしました。
→【簡単】Webフォントの使い方！Google web fontsを使ってみよう

まとめ

いかがでしょうか？
開発の手間は少しでも減らしたいものです。
もし参考になれば幸いです。