はじめまして。
吾輩は拾壱号機である。アイコンはまだ無い。
どこでコーダーになったか頓と見当がつかぬ。何でも閑静とした所でカタカタとコーディングしていた事だけは記憶している。吾輩はここで初めて……
はい！というワケでございましてですね、コンサルロケッツではフロントエンドエンジニアとして在籍しております、ロケッツ拾壱号機です！
コンゴトモヨロシク・・・。
フロントエンドエンジニアとは言いますが、ほぼコーディングを担当しております。
自社サイトの自由度のあるコーディング、ECサイトの禁止タグや文字数に束縛された世界に閉じ込められつつも死中に活を求めて闘うコーディングに日々奮闘しつつも、
その束縛という制限を回避してRMS等に上手くHTMLソースが入った時の快楽に溺れております。デュフフフ。
……さて、初回の記事を書くにあたって緊張して何を書こうかと悩んだ末、
我が隠されし秘術である『秘匿の言霊』をここに記すものぞ！！（とっておきの「コメントアウト」について書きます！）
コメントアウトと言っても、ブラウザ上で非表示にする目的のコメントアウトではなく、『注釈』や『ラベル』的な意味であり、ECにおいて編集する場所を表すようなコメントアウトについて書いていこうと思います。
さて、早速ですがこのソースコードのコメントアウトを見て「うっわ、日本語コメントアウトだっせぇｗｗｗｗｗｗ」と思った人、怒らないから手を上げなさい。
……いま手を上げた人は放課後、伝説の木の下に来るように！
というわけで（？）、グローバルな世の中のこの御時勢、日本語でコメントアウトを追記する事はあまりスタイリッシュではないという風潮もあり、自社サイトなどでは英語表記でコメントアウトを追記する事が多いかと思います。
が！
こと、ECサイトの運営にあたっては「スタイリッシュなソースコード」は不便になる事が多いのです。
その最大の理由としては『複数の担当者がソースコードを編集する』というECならではの性質の為であります。
自社サイトやブランドサイトのように、一度コーディングしてしまった後は新着情報くらいしか更新しないサイトや、
たまに出るサイトの更新作業をHTMLのわかる担当者or外注会社に任せてしまう事が多いサイトでは、
オシャレなソースコードの方が、一般の方がソースコードを表示した時に「お！綺麗なソースコードだなー！」と思われ、サイト全体が綺麗だという印象を与えるのでGood！なのですが……
これがECサイトだと、一般の方がソースコードを見た時の事を考える以上に、
・更新する際にどこを編集すればいいのかわかりづらくて、編集箇所を探すだけで時間がかかる
・商品リストが並んでいる場合に、どこからどこまでが1つの商品のソースコードで、どのタグからどのタグまでをコピー＆ペーストすれば良いのかわからない
・誰かが編集した際に閉じタグを忘れたりした場合、他の編集者がその原因である閉じタグ忘れを発見するまでに時間がかかりすぎる→更新作業の時間が余計にかかる
というデメリットが大きすぎる事になります。
ソースコードを見た時に、パッと見でそのエリアが何のエリアなのかがわかれば、ものの数秒で編集するエリアが発見でき、編集したい商品部分が発見でき、編集したいテキストや画像などをすぐに更新できる事に繋がります。
つまり、HTMLがわかるわからないに関わらず『誰でも編集する場所がすぐわかるようなソースコード』である必要があるという事です。
これがいかにECという業界において『デカい』かが、ECに携わった方ならばわかって頂けるのではないでしょうか…！
というわけで前置きが長くなりましたが、実際に私が使ってるコメントアウトを少し紹介したいと思います。
もちろん紹介するコメントアウトが必ずしも正解で一番わかりやすいコメントアウトであるわけではないので、あくまで私が今までコーディングしてきた中で『少しでもわかりやすいコメントアウト方法』かなと思って使っているものをいくつか紹介させて頂きますので御了承下さい！
<!--▼ オススメアイテム ****************************************▼--> <div> … </div> <!--▲ オススメアイテム ****************************************▲-->
まずは数あるコメントアウトの中でもエリア区切りが一番わかりやすいかもしれないコメントアウトです。
「ここから」や「ここまで」を表す為に、開始位置を▼で、終了位置を▲で明示しているので、日本語の注釈が『そのエリアの説明の単語のみ』になるので、パッと見で何のエリアなのかがわかりやすく、目に付きやすいアスタリスク*を横に長くつけることで、ソースコードの中に埋もれてしまう事もなく、区切りを発見しやすくしています。
<!--▼ 中央コンテンツエリア ////////////////////////////////////////////////////////▼--> <div> … </div> <!--▲ 中央コンテンツエリア ////////////////////////////////////////////////////////▲-->
最初に紹介したコメントアウトよりも外側の、大きなエリアを表示する時に使っているコメントアウトです。
アスタリスク版と同じように▼▲で範囲を明示し、スラッシュを長めにつけることで、より、ソースコードの中に埋もれる事なく区切りが発見しやすいようにしています。
<!--▼ 商品 =============================--> <div> … </div> <!--▲ 商品 =============================-->
アスタリスクよりは目に付きにくいものをあえて使う事で、アスタリスク版よりも内側（内包）のエリアを表す時に使っています。
内側の、より小規模なエリアを表す部分にアスタリスクと同じように目に付きやす過ぎるものを使うと、外側から内側の要素の関係がパッと見でわかりにくくなるのでなるべく目に付きにくくも、エリアがわかるようなコメントアウト・・・という微妙なラインを狙ってイコールを使っています。
<!--▼ 商品A ▼--> <div> … </div> <!--▲ 商品A ▲--> <!--▼ 商品B ▼--> <div> … </div> <!--▲ 商品B ▲-->
さらに内側の、商品ごとにわける場合などに使うコメントアウトです。
開始と終了さえわかればいいレベルの範囲指定に使います。
以上、4つのコメントアウトを紹介しました。
私自身、これと同じコメントアウトをずっと使い続けているわけではなく、下手をするとコーディングする度に微妙にコメントアウトに使う記号や長さを変えている事もあり、日々アップデートしております。
さらにECサイトのお話である以上、あの憎っくき『文字数制限』野郎は必ず関わってくるので、文字数制限に引っかかった場合は容赦なくアスタリスクを削ったり、そもそもコメントアウトを削除したりと臨機応変かつ柔軟に対処する事になろうかと思います。（・・・『行き当たりばったり』って訳さないで！）
もちろんこれ以外にもコメントアウトは沢山あり、もっとわかりやすい＆見やすいものはあると思いますので、そういうコメントアウトがあればこっそり教えてください！
というわけで、あまりまとめきれていないですが、コメントアウトのお話でございました。
今後ともコンサルロケッツブログをよろしくお願い致します。
