Thu.
12
May,2016
児嶋 いずみ
投稿者:児嶋 いずみ
(Webディレクター/コーダー)

2016年05月12日

時代が変われば、スタンダードも変わる
〜コーディングガイドライン策定 #02〜

コーダーのあーだこーだ

児嶋 いずみ
投稿者:児嶋 いずみ(Webディレクター/コーダー)

こんにちは。コーディングファクトリー部コーディングチームの児嶋です。

先月、「コーディングファクトリーのガイドラインがバージョンアップしました。」という記事がありましたが、今回は、その続編です。

前回の記事で、「一体どこが新しくなったのか」で、以下の変更点を挙げました。

1.Webを取り巻く環境の変化にあわせて、新しく追加した項目
2.これまでガイドラインで定められていたが、現状不要になった項目の削除
3.classの命名ルール

今回は、1 と2 についてご紹介します。
ちなみに、以降は

#03では、白熱した議論が繰り広げられた「3.classの命名ルール」の話
#04では、NEWガイドラインをもとに刷新したコーディングテンプレートの話
#05では、全体のまとめと委員会についての感想

以上を、「コーダーのあーだこーだ」のコーナーでご紹介させていただきます。
 

1.【Webを取り巻く環境の変化にあわせて、新しく追加した項目】の巻

まず外せないのが、
doctypeのデフォルトがhtml5、cssのデフォルトがcss3
になったことです。きわめて大きな変更です。それにともない、主要なタグの説明がheader、footer、sectionなど、html5タグの内容で刷新されています。
とりあえずなんでもdivかspanで囲っておけばいい、という時代は終わりました。NEWガイドラインは、正しい文書構造で組んでいくためのよき手助けになるのではないかと思います。

続いて、
viewportの設定
が追加されました。
マルチデバイスに対応するサイトも増え、モバイルフレンドリーな時代になりました。ということで、PCサイトの場合でもviewportの記述をすることに決定しました。
ちなみに、一昨年にレスポンシブWebデザイン用のコーディングガイドラインを制作したのですが、それらの内容の大半が今回のガイドラインに盛り込まれています。

それから、
ベンダープレフィックス
が追加になりました。css3での記述がデフォルトになったとはいえ、まだまだ各ブラウザで対応が追いついていないものもありますし、ブラウザ間で記述が違う場合もあります。これらはもしかしたら次回の刷新の時にはなくなってしまう項目かもしれませんね。

追加項目だけでなく、そのほか項目内容が変更されたものも多々あります。
たとえば…
改行とインデント
コメントルール

→昨今のエディタや開発者ツールの状況を踏まえて変更

フォントファミリー
→フォントの選定から並び順まで精査検討

ファイルの命名ルール
画像の書き出しルール

→デバイス&retinaへの対応

文法チェック方法
→LintからW3Cへ

などなど、本当に盛りだくさんです。


NEWコーディングガイドラインの中身(ちら見)。ルールだけでなく、簡単な解説、コード例、命名サンプルなど内容を理解しやすいように工夫しています。
 

2.【これまでガイドラインで定められていたが、現状不要になった項目】の削除の巻

改めて削除された項目を見てみたら、時代を感じました。
たとえば、
CSSでの再現が困難な場合を除き、必然性のない(レイアウトを目的とした)tableコーディングは行わない。
おぉ、テーブルレイアウト!懐かしい(遠い目)。
そもそも今どきの子たちは、テーブルレイアウトとかspacer.gifとか知っているのかしら?すっかりババァ目線です。

メールアドレスはエンティティ文字に変換し記述する。
@マークが悪者になっていた時代もありました。
ですが、メールアドレスの収集ロボットの収集技術は進化し続けていて、いまどきエンティティ化くらいでは防げるわけもなく、今回お役御免となりました。

そして、前ガイドラインを席巻していた
IE6&7についての記述
が、ごっそり、でもひっそりと姿を消しました。
IE8も、css hackとプログレッシブエンハンスメントの項のみにしか現れず、もはや「過去の人が残していった残り香」くらい微かな扱いになっています。
なんだか、ちょっとだけおセンチな気持ちになりました。

気を取り直して、次に、
定番系のJavaScriptのプラグイン集の削除
「追加設定JavaScript」という項目で掲載されていた「定番系のJavaScriptのプラグイン集」がごっそりなくなりました。Webの進化に合わせてツールもどんどん変わっていきます。その時その時にあったものを入れようということで、あえて削除することにしました。

最後に
@importによるcss読み込み
が削除されています。
当時はわかりやすさ・管理のしやすさのためにimport.cssファイル内に@importでcssファイルを一括読み込みしていたのですが、今やsassなどのプリプロセッサーがその役割を担っています。また、@importはファイルを1つずつ順番にしか読めないというのがネック(読込速度が遅くなる)で、この度お役御免となりました。


コーダーチームの技術共有スペース(esa.io)にストックされた宿題(課題)のレポート記事とミーティングの議事録。議事録をまとめるよりも、実は議事録のサブタイトルを考えることに腐心していた。
ミーティングは全21回。宿題のレポート記事は16記事にも及ぶ。

 

【一粒で何度もおいしかった】の巻

今回、ガイドラインの刷新作業をしてみて思ったのですが、「定期的に内容を見直すこと」は、Web業界の「今を知ること」でもあるのだなぁと、改めて思いました。

また、このミーティングをすることでいい効果もありました。

  • 曖昧だったことをしっかりと調査して深堀ることで技術的な理解が深められた。
  • コーダー各自が持っているスキルや考え方の共有ができたので、認識のすり合わせやチームのスキルの底上げにつながった。

という効果です。チームリーダー目線から見ると、これはたいへんおいしい。(しめしめ)

これを機に、皆さんの会社でもガイドライン策定委員会をたちあげてみてはいかがでしょうか?きっと、チームにとって百利あって一害もないはずです!

ガイドラインお申し込みフォームへ

 

この投稿を書いた人

児嶋 いずみ

児嶋 いずみ(こじま いずみ)Webディレクター/コーダー

2019年まで、コーディングファクトリー部にいました。2020年からは、Webマスターサポート(運用系)のお仕事をしています。 2017年前半でハロヲタを卒業し、以降、タカラヅカ沼にどっぷりはまっています。

児嶋 いずみが書いた他の記事を見る