infinite       loop

Satellite Of Digitalis Syndicate

キャメルケース ーLower Camel Case

嬉しい発見。
最近キャメルケース流行ってるんだ、てか、ちゃんと流通しはじめたんだ、歓迎、大歓迎である。

Web用語とか手法だとか、私が認知するまでにはもう相当量の人が知っている。今更書かなくてもみんな知ってんじゃない?という状況で、あんまり技術的なことの流布に貢献することはなく、駄文の無限ループが歴代私的ブログの宿命であったが

一応、強調点に出くわすと、急に喋り出します。
無口だと思ってたけど、スイッチ押しちゃったらしいぞ・・な呑み屋のお座敷席的な光景がはじまります。

CSSのクラス名指定などで使われることが多いようなので、CSSを例にすると
全ページ共通で使われるグローバルなナビゲーションがあるとして

global-navigation

と全表記クラス名にすれば誰にでも通じる間違えないもので、それも良しなんだけど
そもそもでHTML5はナビゲーションはどこにあろうとも、<nav>というElementタグで囲われる要素なので、

global-nav

と書くケースが多くなる。

「誰にでも通じる間違えないもの」とはHTMLのタグ一つ知らない人でも、文書として、グローバルなナビゲーションが、ここからはじまり、ここで終わるのね、が解る命名。
Web屋なら、nav=<nav>エレメントなのね、が直感的で良いが、どちらの命名則がいいと思うかは案件ごとの状況や個人の自由含め取捨選択すべき自由裁量。

本題のキャメルケースの前に、私が「普段」好きなのは、「Capitalize」ですわ、を書きます。

Global Nav

といった単語の最初の一文字だけ大文字で書く、または打つ手法。
中学校一年の英語の授業から、英文は、最初の一文字だけ大文字で書き出す、みたいな習慣は無意識に身についていますよね。

英語ゼロ点なのでこれしか思いつかない例が

This is a pen.

こんなに短い文章でも私には決して読みやすくもないし、正しく書けているかの自信もない。
心情的には、俺は「ペンだ」と言いたいから、

This is a Pen.

This is a PEN.
とでも言ってしまいたい。
Penがまるでブランド名か何かのように、強調されましたね。

心情的な口語体の強調と文書体がチャンポンになっているのが、まさにこのブログのような最悪な文章だというオチは放っておいて

文字(=キャラクター)を並べるしか方法のない文章(=テキスト)は、

形と空白と大きさ(とたまに+色)でしか表現できないので、あらゆる制限を受けながら、無限の表現をできるものなんすよね。

ここに、キャメルケース、ローワーキャメルケースとは直接関係ないようでいて、実は密接な関係がある、根幹にあることを見事に説明してくれているリンク先を挿みます。

視認性と可読性と判読性

フォントだけの問題ではなく、レイアウトだけの問題ではなく、
デザイン(意匠)として、あるいは伝達力を持つ文章をアウトプットする職業、大まかにはあらゆるメディアに関わる人、携わる人は意識しておかなければいけないのが「視認性・可読性・判読性」

写真くらいですかね、文字のそれらに束縛されない表現方法は。あ、絵画もそうですね。
でも写真もポスターに使われるときは、文字配置との関係性、位置付け、大事ですから、やっぱり読んでおいて損はない良質記事。

で、どうせ、長くなるんだから、ウィークポイントを考えてみる。

英語圏の方々は、アルファベットたった26字で、歴史から家族間の愛情から、何もかんも表現するとなると、文字と大きさと余白との戦いってことになりますよね、表現は。

This is a pen.

のAとPの間の余白をどうとるか、半角スペースでいいのか、120%増しにしたら読み易いんじゃないか、強調できるんじゃないか、タイポグラフィーやグラフィックデザイナーさんの領域で鍛えられてきたこと、は英語圏の方々は、文字を書きはじめたその日から意識をせざるをえないんじゃないかと少し予想できる。

特に、文字間隔、文字ピッチというキャラクタとキャラクタの間のとり方
さらに単語と単語の間の空白、
筆記体の手紙であれば、その人特有の癖をおおいに出して感情のままに綴ればいいんでしょうけど、活字になると、読みやすさ、を大前提としつつ、さらに感情も上乗せしないと気持ちは伝わらん、難しいことになる。

日本語は、この「単語と単語の間の空白」が基本的にないので、その辺は何をやる場合にもまず見落としがちなウィークポイントになりそうだ、と予想できる。

ただ逆に、もともと句読点以外の空白少なき文章なので
CSSで指定する

font-size : 2em;
などを文頭、最初の一文字に使うだけで急に目立つ、といった利点もある
「危ない!」という標識で、危険の「危」だけ大きくする。
小学生の通学路なら「あぶないっ」の「あ」だけ大きくする。
まぁこれ英語圏も同じなんだろけど・・・(←今頃気づく)

道路標識というのは悲しきものですね。
最初は「危ない」を強調したくて、黒文字テキストの中で赤く塗った塗料が、経年劣化の果てに、どーでもいい黒文字部分だけが残っているという歯欠け文章をよく見かけます。
赤文字の縁だけが微かに残っている白抜き文字になっていたり・・・

余談中の余談のようですが、駅に2週間貼られる予定のポスターと、路上脇に置かれる二本足の立て看板の用途・目的の違いなんぞに触れてしまいました。
本当にCSSの話などする気があるんでしょうか、この人は(笑)

まぁ、あるにはあるんだけど狭義で終わらせるつもりも、簡潔な説明にまとめる技量も、ちっともさらさらねぇんです。

うちの近所にある日、新しいクリーニング屋さんができ、路面に置かれる回転式の看板に
「早く安くキレイに ハイクリーナー清水」

と書かれてクルクル回ってました。
母が財布からピンクのチケットを出して、クリーニング屋さんでもらってきて(仕上がってるのを)と言います。

おバカ末っ子は「うん!ハヤクヤスクキレイなハイクリーナー清水だねっ!」と承知します。
コピーライトの力ですね。

わたくし何十年経っても、このクリーニング屋さんの店名をまだ知りません。
ご主人が清水さんであろうことと、看板は古びたけど母との思い出も吸い込んでまだコピーライトの力を発揮し続けている。

屋根の看板をいつか見たかも知れないけど、覚えてないんだから、店名は知らないに等しい。
でも回転式電光看板にちょうど「ぶちあたりそうな」身長だった子供には、このゴロの良い言い回しが面白くて、しかもなんだか良いお仕事をしそうだ、も伝わって、コピーライトの目的は過分に果たされている。

そして自分の現職も、「速く、安く、キレイに」を心がけてますからね。
職種まったく違うのに、刷り込みとはかくも恐ろしいものなのか、尊きものなのか、よくわかんない状態ですが、マークアップエンジニアにだって、より速く、コストパフォーマンス良く、機械が読みやすいクリアなコードで、はまんま当て嵌まるので、まだ繰り返してますよ。

「よっしゃ!ハヤクヤスクキレイなハイクリーナー清水のようにだっ!」と。
より速くも、コストパフォーマンス良くも、お客様のためというよりは、フリーランサーとしての「自分のため」です。

同じ仕上がりなら、短時間で仕上げた方が、単純に時給や日給を高くできる。
さすれば、お客様に同じ技術を安く提供しようと、余暇を趣味に回そうと、ガッツガツ仕事を大量に受けてお金持ちを目指そうと、自由という「自分の好きに出来る部分」が増えていく。

なんか、たかがキャメルケース一つでよくここまで書くな・・・って今自分で呟いたけど
効率とか時間とか、制するものは勝つ、負ける、の分野は、元来好きなんでしょう、性分的に。
ジョジョのラスボスも、スタンドは全部「時間を制する」系だし(←今いちばんそんなの関係ねぇっ!!byヨシオ)

そして敵は固定観念なんすね・・・

便宜上、CSSのtext-transformで使えるバリューを並べます。

text-transform: none; 書いたままの文字を表示| none

text-transform: capitalize; 単語の最初の1文字だけ大文字で表示| Capitalize

text-transform: lowercase; すべて小文字で表示| lowercase

text-transform: uppercase; すべて大文字で表示 | UPPERCASE

ついでに、てか本題だったキャメルケースについて書くと

先ほどのGlobal Navを繋げて書いたのが
GlobalNav
アッパーキャメルケースは、すべての単語の先頭文字を大文字で書く:UpperCamelCase

globalNav
ローワーキャメルケースは、後から繋げる単語の先頭文字を大文字で書く:lowerCamelCase

どちらもキャメルケースだけど、複合語の先頭をUpper(大文字)にするかlower(小文字)にするかの差。

Wikipediaに頼ると、キャメルケースは、

複合語をひと綴りとして、要素語の最初を大文字で書き表すことをいう。キャメルケースとは、大文字が「らくだのこぶ」のように見えることからの命名である。

だそうです。

そして敵は固定観念なんすね・・・に戻ると、

私がHTMLコーダーとかWebデザインとか言われる仕事をはじめた頃、HTMLはほぼ全部「uppercase」で書かれてた。

なんでですか?と聞くと、
「プロは全部大文字で書くもんだ」という返答。
だから、その理由は?と重ねて尋ねても
「プロは全部大文字で書くもんだ、それが常識っ」と返された。

だからその常識はどういう成り立ちで、どう固定したのか、それを訊いてんだよー。オイラも言葉少ねぇけど、あんたもたいがいぢゃねーか、ちっくしょう。という脳内だけ饒舌で
「へぇぇぇぇぇ、そうなんすかぁ。へぇぇぇぇぇ!」みたいな感心したのか、バカにしたのかわからない不透明な返事をして終わりましたよね。

落語のネタみたいな不思議現象だけども、実際に、小文字の「lowercase」で書かれたソースを見ると、この人たちは悪口を言ってましたから。これだから、シロートは、と。

で、私は当時どっちが正しいか、知りませんでした。
正直、どっちでもいいじゃん、でも全大文字は人間としては読みにくい、つまり書くのも苦痛なんで、それが常識なら、まず小文字で書いて、仕上がってからエディタで全大文字「uppercase」に変換すりゃいいや、と舐めくさってました。実際に文句言われたらそーしよー。でもお金貰わない自分のサイトは変換せんでいいやー。

で、全文大文字のコードを書いた憶えは・・・覚えてないけど、たぶんやらずに済んだんだと思う。そんな拷問みたいなこと、やっていたらいくらなんでも憶えていそうだから。
ただし読む方は、たくさん読まされて、部分修正くらいはしたような・・・。大文字「uppercase」で。

逆に、カラーコードの#000000を、「#000」と省略で書いている人がいて、なんで?気持ち悪いから「#000000」と6桁書きしてもいいっすかーと直してしまったことがあります。
これもどっちでも可だけど、今では私も「#000」と省略する派なので、彼女にはちょっと悪いことした、と思ってます。

その時は、私はエディタでサクサクとコードの書けるやつ、対、オーサリングソフトを通してしかHTMLを書けない社員さんが彼女で、なんとなく萎縮させてしまった。
有名なオーサリングソフトがそうアウトプットしてるんなら、そういう書き方もアリなんだということを、今ならネットで即調べられますよね。

でも当時はHTMLを書いている人間でも、書籍頼りだった時代でした。
紙媒体の常にオールディーになりかけてるものを常識と呼び、盲信し、小さなパワハラを同族間で繰り返していた。

彼女が後に、あの億ちゃんて子は不遜な態度で鳴り物入りしたけど、案外もの知らないで喋ってることも多かったんだわ、と消化してくれてたら本望っすけど、もうWebになんぞ関わってないかなー。ンマーごめん!「気持ち悪い」はマスターベーションの気持ち良いの対語みたいなもんで、自己満足タイプの口癖だ、みたいに世間知の方で通過してって欲しい。

とまぁ過去の話が長引いたが、上述の「それが常識っ」みたいなコトは、今でも続いていますね。
有名なクリエイターが書いたソースだから間違ってるはずがないと、無数にコピー量産され続けるmetaタグ「viewport」だとか、レシポンシブって、ハンバーガーメニューが果たして本当に最適なの?とか、(私は決してそうは思わない)

言い出したらキリがない、そして今のいまも、自分も無意識に悪しき轍を踏んでるぢゃないかと大袈裟に身震いすることもなくはない。

ただ自分のタイプの悪い見本、強烈な反面教師とたまたま今同居しているんで、己を頼みすぎて、他人の話を聴かない、信じないのが最も悪質だと思い、船の転覆を防ぐトリミング方法としては、逆に少し身体を傾けて「まぁ良か良か」「それも良かとよ。」の鷹揚さで、乗り切りたいと思っている。

なんだこの独白は・・・。

とりあえずCSSについては、18年前に独りで書き出したときから、ローワーキャメルケースで書きたい気持ちがありました。
根拠なんて何もなく、それが自分で後から読みやすく、思い出しやすいからという陳腐な理由で。

Global Nav

という「capitalize」が好きだけど、クラス名としては空白NGだし、最初のGもソースの中では埋没してけして読みやすくはないんで、

globalNav

が次点の「好み」なんだけど、これまたなんとなく周りの風潮でCSSのクラス名は全小文字みたいな雰囲気があって、妥協というか右へ倣えしてきた。

たぶん問題は「ヘッダー」なんですね。
<head>があり、<header>があり、<h1>〜<h6>のHeading<h+num>がある。

<head>を装飾することはないけど<h1>〜<h6>は頻出するので、

redHead
blackHead
whiteHead
のような使いまわしというか、カテゴライズをしたかったんだろうなぁ。

全小文字だと、
red-head
black-head
white-head

んー。書いてみるとなんの問題もなく見える(笑)
ただしこれにJavaScriptなど避けて通れないものを加味すると
var topNav = $(‘#globalnav’);
なんぞと変数名に「topNav」とかローワーキャメルケース使いたくなるんですね。
これまたそういう他人様のソースを盗み続けた習慣の伝播でしょうか。

ボーン・コレクターのような話になってきた。人と人が接触したら、必ず何かモノが移動するから、科学捜査の出番だわ、グリッド捜査だわってやつですね。
まぁアンジェリーナ・ジョリーはここに登場してくれないけど・・・。

ホントにこの記事、書き続けていいんかな?の疑問も浮かんだんで、
逆のもの拾ってきました。

キャメルケースよりスネークケースで。

いや、ここで挙がってるの、キャメルケース:スネークケースで、ローワーキャメルケース単体ではないすね・・・(汗)
でも読む価値ありなのでリンクは残させてもらって。

ハンガリアン記法って気持ち悪い。

あぁ・・・モゥ・・・ローワーキャメルケースに否定的なものを探そうとして、好きですってのをリンクしちゃったよ・・・。

フロントエンド界隈でローワーキャメルケースに否定的な人がいたら、読みたいので、ぜひ教えてください(ハイ募集)でいいすかね?

私の動機は、好きなローワーキャメルケースがBEMのおかげで流行ってきたみたい、使う人が増えると、ドサくさまぎれに好きなことできる、ウキウキ、なだけだったんですけど
一拍置いて、ワンコちゃん「待て!」を自分に課して、考えること、が好きなんですよ。

どちらさんの云うことが正しいかのジャッジよりも、自分で考えて、この場合は、こういう理由で、この手法を採りました。とお客さんにクドクド説明する、ディレクターにメールする。
はた迷惑な人間だが、それでも情報を共有しだすと、なるほど、ではその案を採用!となったり、それでもワシは今こーゆーのがマイブームなんよ!と本音がいただけたり、まぁ楽しいんです。共同作業がっ!!

ほら億ちゃん、ケーキカットの「お二人の初の共同作業」ってやつしてないから(笑)
んなわけねーだろ!
共同作業は、価値観の違う、他人としてこそ倍楽しいんだよー(*♥д♥*)

て、CSSはどこへ・・・。

どうにかこうにか纏めると、最後のリンク2件、どちらもプログラマーさんだった。
プログラマーさんは常々こういうことを真剣に考え、効率を求め続けるんだろうな、また一人では小さな仕事しかできないから、共同作業をする上でのルール、ベスト、ベターなルールを模索し続ける、その姿勢がボーン・コレクター的にWeb界隈にもうつってきたのは非常に、非常に、非常に、好ましいと思うのです。

(うつってきたは伝染とか感染と書きたいのをご遠慮申しあげました。
本当は、敬意を込めて、熱病がうつってきと書きたいす)

たぶんバックエンドの方々は、メンテナンスをずっとし続けるから、チームとしての効率、後々を考慮した設計、ルール作りが不可欠で、
一方、Webのデザインは、更新はするけれど、流行り廃りはめまぐるしく、リニューアルで意匠をまるっと描き変えられるなど当たり前、使い捨ての時代も長かった。

でもCSSをみんなが使い出したら、そーもいってらんなくなって、みんながどのルールが良いかと頭を寄せ合っている、知恵を絞りあっている、←今ココ、って悪くないよね。

ところで、読み直してハタと気づいた。
うちの近所のクリーニング店の名前は、もしや「ハイクリーナー清水」では?

本気で今の今まで気づいてなかったので、知った後としての文章、校正できません・・・自分の鈍さがまた一つ恐ろしくなったわ。

コメントの入力は終了しました。