Bootstrapはすでに下火に——海外の開発者1600人に聞いたCSS開発のいま

2017年07月19日　08時00分更新

文●Louis Lazaris

ツイートする

WPJが提携するWeb開発者向けメディア「SitePoint」ではCSS開発者を対象にした大規模なアンケート調査を実施しました。その結果から、いま何を学ぶべきかが見えてきました。

CSS開発の現場で実践されている習慣、CSSに関する知識の量、理解度などの情報を集める目的で実施した「究極のCSS調査」には、6週間で1600名以上からの回答が寄せられました。このほど集計が完了したので、結果を発表します！

フォローアップコメントと考察、昨年の結果との比較、コメント欄に寄せられた質問の回答も掲載します。

アンケートの結果は以下を参照してください。

結果は上下の矢印でめくりながら見られます。

調査の目的

まず、読者からは調査の目的とフィードバックで得られることについて、質問がありました。私がSitePointのエディターとしてもっとも優先しているのは、読者を理解することです。いろいろな技術に関して、読者がどのレベルなのか、よく使うCSSの機能や苦労していること、利用しているツールなどを知りたいと考えています。また、開発者がベストプラクティスに従っているのかを知るのも、SitePointで新しい記事や読者の役に立つプレミアムコンテンツを依頼するのに有用です。

昨年と同様、今年も多くの人が調査を通じて、知らなかったり、忘れていたりするCSSツールや機能、技術に接するきっかけができました。調査結果から業界が向かっている方向がわかり、仕事探しをする上で、磨くべき技術や、求められる人物のヒントが得られるでしょう。

調査結果について

すべての結果は冒頭に掲載しましたので、各自でも分析してみてください。私が気がついた点を挙げます。

一般的事項とベストプラクティス

自分自身について（質問2）、30％の回答者がフルスタック開発者と答えています。昨年は選択肢に「フルスタック」を入れなかったので、結果を比較するのは困難ですが、多くの人がフルスタックだと答えたのには驚きました。ある程度、SitePointの読者層を反映しているのではないかと思っています。
大幅に増えた項目にCSSメソドロジーを使っている開発者の数があります（質問32）。既成のメソドロジーを利用していると回答した人は、昨年の23%に対し今年は32%でした。特に、BEMの利用は昨年21%だったのに対して今年は29%に伸びています。
CSSにドキュメントを残しているのはわずか23%で（質問39）、昨年の約28%から減っています。高い割合になるとは思いませんが、減少するとは思いませんでした。
さまざまなモバイル機器でCSSをテストする人が増えています（質問41）。約82%が、ほどほど、あるいは徹底的なテストを実施しています。昨年は72%でした。
8%の回答者がまだIE8でテストとサポートをしていて、4%がIE6/7も対象にしていると回答しました（質問42）。うち2名は、IE5.5もサポートすると答えています。これらの数字は、実際よりも若干高くなっていると思います。
W3Cと標準プロセスに満足している開発者の数は、昨年に比べ増えています（質問43と44）。
23%の回答者がCSS Conferenceに出席したと回答しました（質問48）。昨年から6ポイントの増加です。すばらしい。
70%超の回答者が、CSSを学んだきっかけは、たまたま見かけたWebサイトのソースコードだと答えています（質問50）。

CSSの機能

昨年の調査に比べ、タイポグラフィとサイジングの基本単位にremを使うCSS開発者が増えています（質問11、12）。
驚くほどではありませんが、昨年の調査からもっとも増えている項目は、flexboxの利用です（質問14）。昨年は31%がまだ使い始めていないと回答していましたが、今年は18%でした。また、62%が新しいプロジェクトでは、ほとんど、あるいはすべてでflexboxを使っていると答えています。昨年はわずか39%でした。
vw、vh、grad、turnなどのあまり知られていないCSS単位を使う人も増えています（質問24）。
開発者が苦労しているCSSの分野は、擬似クラス表現、CSSタイポグラフィ、フォームのスタイリング、3Dアニメーション、グリッドレイアウトおよびflexboxです（質問46、47）。

ツール

BootstrapやFoundationなどのCSSフレームワークは下火になってきているようです。激減したわけではありませんが、昨年と比較しすると、はっきり違いがありました（質問25、26）。
SassとLessの利用は減っていますが、PostCSSの利用は19%から30%に大幅増です。同様に、CSS ModulesやPleeeaseなど、知られていないツールの利用が増えています（質問28）。
昨年と同様、60%を超える回答者が、Sassをはじめプリプロセッサーの機能はCSS本体に含まれるべきだと感じています（質問29）。
人気のあるコードエディターとIDEは、Sublime Text、Atom、Visual StudioとPHPStorm です（質問30）。回答した人の多くがフルスタックの開発者なので、つじつまが合います。
50%を超える回答者がブラウザーでCSS関連のバグを発見したことがあると回答しています（15％がバグを報告）。多すぎる印象ですが、バグの大部分は実はバグではなかったのではと私は推測します（質問34）。
今年は、多くの人が、いくつかのライブラリーがやっているようにJavaScriptを使ってCSSを管理しています（昨年の30%から増えて37%）。よい傾向だと感じます（質問35）。

回答者からのフィードバック

昨年同様、調査項目にコメントをいただきました。いくつか紹介します。

多くの人たちが質問の数が多すぎると感じました。今年はだいぶ短くしましたが、カバーしたい領域がたくさんあるので、回答数を増やすために質問を減らすのではなく、できるだけ多くの項目で回答を得たいと考えています。
昨年は、多くの人がよく使うレイアウト方法に、スタンダードではなかった「Grid Layout Module」を選びました。回答者は、フレームワークベースのグリッドシステムだと考えたようです。今年は質問の意味を明確にしたところ、多くの人が「その他」の項目に「Bootstrap」と記入しました。グリッドレイアウトを実装するには、フロート技術やほかの技術を使うことを多くの人が忘れていたり、知らなかったりするので、次回の調査では、「フレームワーク」という選択肢を入れる予定です。
CSSの国際化、RTL言語などに関する質問をいれるのが良いと思います。
すべての質問に「どれにもあてはまらない」という選択肢を入れるべきだと感じました。WordPressなどのCMSで、単一のWebサイトをしている人の意見だと思います。確かに、全員にあてはまらない質問もあります。昨年から改良していますが、まだ、同様のコメントが数多くありました。
自分の回答のまとめをEメールで希望する読者もいました。良い考えなので、SitePointがこの調査に使っているTypeformで実現できるか調べてみます。
質問22の「!importantキーワードを使う頻度は？」に対して、答えの「絶対に必要なときだけ。あとで必ずリファクタリングする」というのは細かすぎるとの意見がありました。絶対に必要なときだけ使うが、リファクタリングはしないと回答したユーザーもいました。次はリファクタリングの部分は省きます。
CSSに直接関係しない、開発環境やビルドプロセスなどの質問も希望しています。意図的にCSSに限定した調査なので、CSSに関係しない質問は入れていません。一般的な調査はほかに任せます。
人気が高まっている、CSSの管理に使っているJavaScriptツールの質問を入れる予定です。複数の読者から要望がありました。
CSSを仕事だけで使っている前提の質問もありました。ただし、趣味のためにCSSを書く人もいるので、専用の質問を作るか、質問2に入れるよう検討します。
テストは、IEではなくSafariが最大の問題児だと指摘する人が多くいました。
ブラウザーのバグを見つけることに関する質問34では、バグの報告方法を知らない人や報告しようとしたけれど重複だったという人向けの選択肢を用意したほうが良いかもしれません。
今後の調査で考えるべきトピックスとして、CSSlinting、Shadow DOM、Web Componentsがあります。