FRONTEND CONFERENCE 2017 で「CSS フレームワークをつくろう!」という話をしました

2017年3月18日(土)に開催された FRONTEND CONFERENCE 2017 で登壇させていただきました。昨年は一参加者として参加しただけでしたが、また行くならせっかくだからと登壇応募したところ採用していただきまして、普段 WordPress な場所でお話させていただくことはぼちぼちありますが、フロントエンドな場所でお話するのははじめてで、しかもフロントエンドエンジニアはマサカリを投げつけてくるこわいひとたちだと聞いていたので震えながら登壇しました。

僕は js とか全然詳しくないし、CSS なら Basis つくってるからそれを絡めれば多少話せるなという考えだけで応募したので、応募段階ではあんまり内容を考えていませんでした。あんまり自分のプロダクトの話ばかりすると宣伝っぽくなってイヤだなと思い、最初は「CSS フレームワークをつくる際に考えておいたほうが良いこと」みたいな内容でスライドをつくっていたのですが、つくりおわって通して見ると、まぁこれがつまらない。だいたい CSS フレームワークなんて、言ってしまえばよく使うスタイル集みたいなもので、そう考えてしまえばつくるのなんて CSS が書けさえすれば誰でもできるわけです。なのでせっかくこういう場所で話す機会を頂いたのに、僕じゃなくても誰でもできるような話をするというのも意味がないなと思い、登壇の4〜5日くらい前に全部破棄して Basis ゴリゴリな内容に変更しました。なるべく宣伝色が強くならないようにどういう考えでどういうことをしているのかとか、経験や思想についてお話するように配慮したのですがどうだったでしょうか…。

個人的には Basis をつくって、実際に仕事でも使うようになってかなりストレスが軽減されたし、それにともなって効率も品質も上がっているように感じています。それぞれの環境で必要な設計や機能・コンポーネントは違うはずなので、僕のセッションを聞いて自分もつくってみようと思う方がいらっしゃったなら嬉しいなと思います。

ちゃんとドキュメントまである日本製の CSS フレームワークはあまりなく、GitHub でみつけたときはスターをつけるのが趣味なので、ぜひつくったかたは GitHub で公開してくださいw

CSS フレームワークについて話すということで、事前に CSS フレームワークについて色々調べてみたのですが、「Bootstrap の使い方」とか「CSS フレームワーク○選」みたいな記事がほとんどで、ほとんど「CSS フレームワーク論」みたいなのはないなぁという印象で、ちょっとそういうのも入れたいなと思っていたので僕なりの考えを少し入れたりしました。あと、CSS フレームワークに関するセッション動画やスライドもほとんどみつけきれなかったのですが、「理想のCSSフレームワークを探して」というタイトルで CSSNite に登壇されていた森田さんとお話できたのは有名人にあったみたいで嬉しかったですw

セッション中も少し話したのですが、僕は日常的に Twitter で「CSS フレームワーク」と検索しています。なので「今どのフレームワークがたくさんツイートされてるなぁ」とか「CSS フレームワークってこう思われてるんだなぁ」みたいなことを結構みているのですが、わりと CSS フレームワークにはネガティブな意見が多くて、でもそれは結構的外れ(そもそもそれ CSS フレームワークがというより Bootstrap やん…とか、それはそもそも使い方がダメやん…とか)なことが多いなぁと感じています。最後の質疑応答でマサカリを投げられる覚悟だったので、そういう系の質問がくれば良いディスカッションができるかなと思っていたのですが、質問0だったのでホッとした反面ちょっと残念でもありました。僕は座談会とかパネルディスカッションが好きなので、CSS とか CSS フレームワークについて話せるそういう場があればぜひ参加したいなと思いました。

関西、しかも WordPress ではなくてフロントエンド、ということでそんなに知り合いも多くなかったのですが、色々な方にお声がけいただきましてとても楽しかったです、ありがとうございます!ずっとお会いしたいなと思っていたたんしおさんにもお会いできて、東北でイベントを企画されているそうなのでタイミングがあえばぜひ東北にも行ってみたいなと思いました。

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく