ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。
連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。
HTMLのエディター
HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。
805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。
VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。
WebStormの回答者数は少なかったのですが、記事『使用歴5年目のエンジニアが送るWebStormの厳選神業集』で解説しているようにVS Codeに比べて圧倒的に機能が豊富です。VS Codeからのステップアップを考えている方はWebStormもオススメです。
HTMLのコードの流儀
今もキーワードを書いていますか？
HTMLのmetaタグのkeywords情報。すでにGoogle検索エンジンは対象から外していますが、現在も実装している方はいるのでしょうか？
1093票の回答があり「よく書いている」が26.8%、「たまに書いている」が19.6%、「書かない」が43.6%、「keywordsって何？」が10%でした。
驚くことに約46%の方が記述しているとのことです。特殊な事例で「イントラの社内検索エンジンのため」というコメントもありました。
11年前の2009年のGoogleの公式見解で「グーグルは、meta keywordsを検索順位を決める要因としては、利用していない」と表明しています。
alt属性はどのぐらい書いていますか？
アクセシビリティーには欠かせない画像の代替文言を示すalt属性。どんな意識で入れているのか、質問しました。
951票の回答があり「SEOのため」が27.2%、「アクセシビリティ」が58.6%、「社内ルール or クライアントの要望」が2.7%、「入れるの面倒 or 入れない」が11.5%でした。
商業的な回答として「SEO」や「クライアントの要望」を期待していたのですが、「アクセシビリティー」が多数となりました。みなさんの意識が高くて素晴らしいですね。
HTMLのテンプレートエンジンはどれが主流？
大量のHTML制作には、テンプレートエンジンの導入が効果的です。よく使われているテンプレートエンジンの種類はどれでしょうか？
969票の回答があり「Pug」が23.4%、「EJS」が15.7%、「その他のテンプレートエンジン」が9%、「テンプレートエンジンを使わない」が51.9%でした。
Pug（旧Jade）と多数派となりましたが、テンプレートエンジンを使わない方が多いようです。
CSSの作り方
SassかSCSSか？
CSSを効率良く書くためにはCSSプリプロセッサのSassがよく使われています。Sassは2通りの記法として、インデントで階層を表現するSass記法と、CSSを拡張したSCSS記法があります。どちらを使っている方が多いでしょうか？
341票の回答があり「.sass」が9.4%、「.scss」が71.8%、「他のプリプロセッサを使う」が2.3%、「CSSは生で書く！」が16.4%でした。
圧倒的にSCSS記法のほうがメジャーと言えそうです。
CSS設計で書いていますか？
CSSは基準がないまま記載すると混沌としてしまいます。混沌となるのを避けるため、「CSS設計」という基準を設けて制作することが多いです。CSSを書くときにどのCSS設計がよく採用されているのでしょう？
648票の回答があり「BEM / OOCSS / SMACSS」が53.4%、「Enduring CSS」が1.7%、「Scoped CSS」が11.4%、「オレオレルール」が33.5%でした。
フロントエンド界隈ではScoped CSSの仕組みによって、CSS設計の必要性が疑問視されていました。記事『Scoped CSSにおけるCSS設計手法』で紹介したとおり、Scoped CSSでの開発でもCSS設計の併用が望ましいでしょう。
Bootstrapは使っている？
BootstrapとはCSSフレームワークでもっとも有名なものです。初心者向けの教材でもBootstrapが解説されていることが多いですが、現場ではどのぐらい利用されているのでしょうか？
1294票の回答があり「よく利用している」が10.8%、「たまに利用する」が18%、「使わない」が62.8%、「Bootstrapって何？」が8.3%でした。
Bootstrapを使わない方が大多数をしめました。ウェブ制作会社では、デザイナーとコーダーが分業であることが多いです。Bootstrapを採用するには、デザインデータがBootstrapを意図したものでなければなりません。Bootstrapに適したデザインは、コーダーのみならずデザイナーの理解も必要となります。分業が多い現場ではBootstrapに即したデザインは少ないのが現状でしょう。
Sassのコンパイルエンジンはどれを使っていますか？
Sassのコンパイルに、何を使っているのか質問しました。
641票の回答があり「ruby-sass」が10.6%、「node-sass / LibSass」が57.7%、「dart-sass」が7.8%、「わからずに使っている」が23.9%でした。
実際のところ公式の開発状況は以下の通りで、今後はdart-sassが実質的標準となります。npmからインストールする際にsassを指定すれば、自動的にdart-sassが取り込まれます。
- ruby-sass : ディスコン。使うな非推奨
- node-sass : C++製コンパイラ。長く使われていたが、Node.jsのバージョン依存など課題が知られている
- dart-sass : Dart製。新機能が先行実装され、バージョン依存問題が解消されている。最近はこちらがオススメ
リセットCSSでbox-sizingを指定していますか？
リセットCSSについて、グローバルCSSやリセットCSSなど、box-sizing全体をborder-boxに設定していますか？
957票の回答があり「全体に設定する」が64.2%、「使用箇所のみ部分的に設定する」が24.5%、「box-sizingをほとんど使わない」が5%、「box-sizingを使ったことがない」が6.4%でした。
「全体に設定する」が多数派64%ですが、「使用箇所のみ部分的に設定する」が25%も存在することを考えると、全員が右向け右とはいえない状況ですね。リセットCSSはプロジェクトごとに制作ルールをチェックしたほうがいいでしょう。
歴史を振り返れば、border-boxはpaddingの標準仕様を誤ってブラウザ実装したIE 6互換モードと同じ挙動です（参照記事『若い世代が知らない2000年代のHTMLコーディングの地獄』）。かつてのIE 6と同じボックスモデルを好む方が多いというのも、皮肉なものですね。
IE11対応ってどのくらい大変？
ウェブ制作の関係者からひどく嫌われているブラウザInternet Explorer。それもそのはず、IE 11が公開されたのは2013年。なんと7年以上前のブラウザなのです。
IE 11の追加工数について、エンジニアにむけてアンケートで聞いてみました。
449票の回答があり「1.1〜1.3倍くらい」が36.3%、「1.4〜2.0倍くらい」が21.8%、「2倍以上」が6.7%、「非エンジニアなので回答だけみたい」が35.2%でした。
それに対して、エンジニアではない方に同じ質問をしました。
512票の回答があり「1.1〜1.3倍くらい」が21.1%、「1.4〜2.0倍くらい」が23%、「2倍以上」が12.3%、「エンジニアなので回答だけみたい」が43.6%でした。
2つのアンケートから、回答だけみたいを除外して回答者数を表に示してみました。興味深いことに、エンジニアではない方のほうが、追加対応の工数を多めに見積もっているようです。
| エンジニア (人) | 非エンジニア (人) | |
|---|---|---|
| 1.1〜1.3倍くらい | 163 | 108 |
| 1.4〜2.0倍くらい | 98 | 118 |
| 2倍以上 | 30 | 63 |
IE対応の苦労はウェブ制作者の共通理解だと思いますので、今も対応されている方はもう少しの年月をがんばりましょう。
フロントエンジニアへのアンケート
TypeScriptかBabelか？
ReactやVue.js、Angularを普段使っているフロントエンドエンジニアは、どのaltJSを使っているのでしょうか？
380票の回答があり「TypeScript」が37.9%、「Flow」が1.6%、「ES2015+(Babelありき)」が35.3%、「生JS」が25.3%でした。
TypeScriptとBabelがほぼ同じ割合でした。生JSで制作されている方は、JSライブラリをCDNで取り込んで利用されているのでしょうか？ ReactのJSXや、Vueのシングルファイルコンポーネントが使えず不便そうです。
formタグを使っていますか？
シングルページアプリケーションを開発すると、入力フォームを扱う場面は多いでしょう。inputタグだけでも入力フォームを作れますが、formタグと併用する方法もあります。どちらの方法で設計している方が多いでしょうか？
220票の回答があり「form要素を利用して送信」が37.3%、「form要素を使わずに送信」が42.7%、「SPAでAPI通信をやったことがない」が20%でした。
「form要素を使わずに送信」がわずかに多数派となりました。
バリデーションをどうやって実装していますか？
続いてフォームのバリデーションについても質問しました。
610票の回答があり「HTML5のフォームバリエーションを利用」が29.8%、「JSでオリジナルのバリエーションで作っている」が45.7%、「jQueryのプラグインで良い感じに」が11.8%、「サーバーサイドのエラー返却のみで実現」が12.6%でした。
入力フォームのバリデーションは、どのサイトでもよく見かけるから「実装が簡単そう」と思われがちです。バリデーション実装はフロントエンド開発の鬼門なので覚悟しましょう。
まとめ
このようなアンケートは今後も実施していく予定です。興味があれば筆者のTwitterアカウントをフォローいただければ幸いです。今回のアンケート実施にあたり、回答やシェアを多数いただきました。ご協力いただいたことに感謝を申し上げます。
