• フロントエンドエンジニア向け
• 英語ちょっと苦手
• 命名規則に興味がある
• チートシート大好き！

こんにちは、commono株式会社のフロントエンドエンジニア山本です👋

日々のコーディング業務で、私のような非英語ネイティブのフロントエンドエンジニアが日々直面するものにHTML/CSS/JSのID・クラス・メソッド命名問題があります。

デザイナーやディレクターがクライアント様と共同で仕上げたデザイン案を適切な単位に切り分けてマークアップしていく過程において、命名はコードの可読性・保守性に大きく影響する要素です。

可読性・保守性に関係する原則としては簡潔に

• 機能や目的を明確に沿っている
• 第三者が読んで理解できる

上記の2点を満たしているということが重要と考えられますが、これを満たすように意識して名称を考えるのは地味に時間がかかり頭を悩ませる作業の一つであるということは、同じフロントエンドエンジニアの皆さんには同意いただけるのではないかと思います。

それでも、ある程度長くこの業務に携わっていると、ある程度類型化することのできるパーツ名称を覚えることで少しずつこの命名問題にさく時間が減っていくものかと思います。

ただ、私はふとした時に自分が書いているソースコードを眺めていると「これってもしかして和製英語では…？」という表現が目につくことがありました。

可読性・保守性に関して言えば、命名の一貫性が保たれており過度な省略語などがなければ、今後も日本語話者がメンテナンスし続けるという仮定において、必ずしも正しい英語である必要はないと思われますが、今後英語圏の方がメンテナンスする可能性があるコードであればなるべく意味の伝わる英語である必要があるはずで、何より和製英語を堂々と使い続けるのは個人的に若干の気恥ずかしさが否めないため、記事を書くというこの機会に英語ネイティブのWEB制作会社のサイトで実際に使われているクラス名について調べてみたいと思います。

対象はアメリカにあるメジャーなウェブ会社としました。

「英語なのに英国を対象にしないのはなぜか🤬」という意見もあるかと思われますが、人口などから単純に事例が見つけやすそうという点と、英語圏でも違う言い回しや単語の使い方を考慮し始めるとキリがなくなるという点から在アメリカの会社を対象としました。

方法は、検索で見つけたアメリカ国内のWEB制作会社をまとめているサイト（https://clutch.co/us/web-developers）からWEB制作会社をランダムにピックアップします。

• https://proven.us/
• https://www.empat.tech/
• https://www.urbaninsight.com/
• https://www.olioapps.com/
• https://www.3mediaweb.com/
• https://www.alliancetek.com/
• https://www.krishaweb.com/

実際のサイト使われているクラス名を調べて列記した上で、ある程度役割ごとに単語をまとめたものが以下になります。（目視で主だったものを拾って行ったため網羅できているわけではないことをあらかじめご了承ください）

文章的な意味はなく、純粋にレイアウトや配置を制御するためのもの

見た目の変更やアニメーション・状態変化のためのもの

文章的な意味・役割をもつパーツのもの

フォーム周りのパーツやステータス・用途に関するもの

デザインシステムやユーティリティクラス

意外と見慣れた単語が多いと感じましたが、日々海外製のJSライブラリ等にお世話になっており、その基本構造を踏襲してコーディングしている中で自然とインプットされたのかとも思います。

ただ、個人的にこれまであまり使ってこなかった単語がいくつかあったので、意味を調べてみました。

直訳するとそのまま「主人公」という意味ですが、WEBサイトではページ最上部にある大きなビジュアル・見出し・CTAを含む“目立つエリア”のことを指し、つまりは日本でいうメインビジュアル、ファーストビュー*にあたります。

参考：https://www.optimizely.com/optimization-glossary/hero-image/

直訳すると「証言」という意味で、WEBサイトでは顧客やユーザーの声・レビュー・推薦文のこと示すことが多いようです。
参考：https://ejje.weblio.jp/content/testimonial

dynamicという単語の略で「動的な」という意味です。実際的にはJavascriptなどで動きのある要素や、CMS・API・AJAXで中身変わる要素で使われ、標準的な用語ではないようです。

例：dyn-content, dyn-banner, dyn-section（静的HTMLと区別して「JavaScriptで内容が変わる」などを明示）

日本におけるWEBデザインの用語でメインビジュアルやファーストビューはよく耳にするものかと思いますが、これは和製英語に当たるそうです。メインビジュアルに相当する英語はhero image、ファーストビューはabove the foldといい、どちらの言葉も広告・印刷業界から来たもののようです。
参考： https://www.mainstreethost.com/blog/hero-images-web-design/

https://www.seohacks.net/blog/990/

今回調査した限りでは、アメリカでWEBサイトのコーディングで利用される英単語は一部を除けば日本国内で使われているものと、あまり大きな違いはなさそうでした。

なお、命名においては、命名規則と呼ばれる単語をどう組み合わせるかというルールがあります。命名規則には有名なものではBEMやSMACSSなどがありますが、今回調査したサイトの範囲では、あまり傾向と言えるようなものは見つけられませんでした。これはサイト自体がTailwind CSSやBootstrapなどのCSSフレームワークを利用して構築されているものが多かったのも理由に思います。

命名規則は初学者にはとっつきにくい物かと思いますが、ここであげたような単語を組み合わせることで、文法をあまり考慮せずに機械的に可読性・保守性が高い命名できるようになるので、単語の語彙と合わせて身につけるとコーディング中に手が止まってしまう時間が短くなると思います。

この記事で紹介した単語はあくまで一例で、優先度を表現するprimary（最も重要）には関連語としてsecondary（２番目）などの単語や、反対の状態を表現する単語などもありますので、興味があれば調べてみていただければと思います。

また視点は変わりますが、IDやクラス名称を考えることはUIにおけるそのパーツの役割を考えることにもつながるものと思っています。例えば「headline」というクラスであればその記事やセクションの内容がわかって目を惹きつけるものであるべき、「cta」であれば、ユーザーに行動して欲しいということがわかるように伝わるようにする必要がある、「–primary」がついている要素は「–secondary」よりも見つけやすくなっている必要があるなど、パーツごとの名前をつけるという作業は同時にサイトの設計意図を改めて明確に定義し直す作業と考えています。

ID・クラス名は直接ユーザーの目に触れることは無い要素ではありますが、インタラクションやアニメーションの細部では表現にも現れてくるものと思いますので、意識しながら設定していきたいものですね。

commono株式会社ではそんな裏側にも思いを馳せながらブランディングやデザインに取り組む仲間を随時募集中です。この記事を読んで、私も表面に見えないサイトの骨格まで気を配ったデザインやコーディングをしてます/したいと言う方はぜひリクルートページも訪れてみてくださいね！

Recruit

最後に読んでくださった皆さんにプレゼントとして、ちょっと便利なチートシートを用意しました。

https://commono.co.jp/tools/class-name-cheat-sheet/

ページ左側のサイトのモックをクリックしたりホバーすると関連するクラス名に使える単語が表示されるという優れもの（自画自賛）です。

単純化された構造なので、実際のサイトの複雑な条件に全て適用できるわけではないと思いますが、クラス名の検討に少しでも役立てば幸いです！