cssnext(postCSS)を使ってみることにする。

公開:2015-09-05 21:19
更新:2020-02-15 04:37
カテゴリ:web,ブログ,html5,css

自分でブログシステムを作ろうとしているが、UIをどうしようかと考えていた。 Bootstrapを使おうと思っていたけど、もれなくjqueryがついてくるのでそれがちょっと無駄に思えてくる。Bootstrapもナビゲーションあたりしか使っていないし、DOM操作は最近はd3.jsが好みなので、Bootstrapのコンポーネントを使うためだけにjqueryをインクルードするのもなんだかなと思っていた。Bootstrapはオープンだから、jqueryに依存しているところを書き換えればいいのかもしれないけれども、それも面倒くさいしね。なにせ巨大なライブラリなので。

なので小規模なUIライブラリを自分で作ってみようかなとちょっと思った。でもBootstrapって、あまり深く考えなくてもレスポンシブにしてくれるのでその苦労をこれから味わうのかと考えるとちょっと萎えるけどもね。

で、今日はそれを行うために環境整備を行っていた。 今回はVS CODEをエディタに使おうと思っている。でDOM操作はd3.jsで行う。d3.jsはSVGを操作するためのライブラリのように思われがちだけれども、本質はDOM操作のライブラリである。なのでjqueryの置き換えとして使うことができる。

で、見た目は当然CSSで作るんだけれども、それのプリプロセッサをどうするかで小一時間悩んだ。第一候補はlessであったが、次バージョンのBootstrapはsassのみとなり、lessは外れることを知って、sassにしようかなと思ったけど、その次のバージョンではpostCSSになるという話も知った。このpostCSSというのは次世代のCSSとなるもののようで、sassやlessのようなことがネイティブでできるようになるらしい。それを先取りしたようなライブラリができていて、それがpostCSSのようである。これはいわばaltJS的なつくりになっていて、トランスパイルして現行のCSSにするというような作りのものである。今回はこれで行こうかなと思っている。ただこのpostCSSやcssnext周りのライブラリの構成がちょっとややこしくて、いまいち理解できていない。もう少し勉強すればわかるかもしれないけれども。

で、postCSSからCSSを出力するタスクランナーはgulpを使用して行う。しかしこの環境作り、意外と面倒である。ちょっと簡単とは言えない気がする。gulpとかは高機能でアドオンも豊富なのだけれども、どうもまだビルド・フローの書き方が腑に落ちてなくて、ググったサイトのものをまるままコピペしてちょっといじって使うくらいのことしかまだできない。

JSについてはBabelやBrowserifyを使ってES6ベースでコーディングしようかなと思う。この辺のコンフィグレーションもちょっと面倒だ。でも情報はたくさんネットに転がっているから、できるとは思うけれども。

どうもJSのタスクランナーは、makeのような絶対的なものがなくてややこしく感じるね。ほかの言語のビルド・システムに比べてとても難解な気がするんだけどもね。make使ってもJSのビルドはできるけどもね。でもそれもなんか違和感を感じるんだよね。