メンテナンスを考慮したコーディングルール

Mobageのような大きなプロジェクトに限らず、現在のフロントエンド開発には複数のスタッフが同時に携わること、また担当スタッフが変更されるといったことはありがちなことである。スタッフ変更には関係なくコンテンツ自体は継続していく中、コーディング等を担当するエンジニアにはメンテナンス性を重視した開発が求められる。
そのためには、HTML、CSS、JavaScriptそれぞれの役割分担を明確化しておくことが重要。具体的には、データ自体はHTMLコードに記述し、CSSでデータの視覚的表示を定義。そしてJavaScriptで制御というルールを守ることでマークアップとスクリプトを分離し、見通しのよいコーディングを行うことだ。そして、こういった考え方を開発スタッフ間で共有しておくとよいだろう。
これにより、HTML、CSS、JavaScriptとそれぞれが別々のスタッフが担当する体制であっても、またスタッフが変更された場合であっても柔軟に対応できるメンテナンス性の高さを実現できる。

JavaScriptコードで視覚的効果を与える

HTML、CSS、JavaScriptの役割を整理

先の事例のように表示／非表示を切り替えるようなケースでは、表示／非表示を各シーンと捉えて、そのシーンを定義したスタイルをCSSで記述し、JavaScriptではクラス名を制御するという手法が考えられる。
まず、【4】のようなHTMLがあるとしよう。

<div id=”container”> <div class=”modal”>モーダルウィンドウに表示する内容</div> </div>

【4】モーダルウィンドウを定義するHTMLコード例

最初の事例のようにモーダルウィンドウの表示/非表示を切り替える場合は、【5】のようなコードにする。

<div id=”container” class=”scene-modal”> <div class=”modal”>モーダルウィンドウに表示する内容</div> </div>

.modal {display: none;} .scene-modal .modal {display: block;}

var container = document.getElementById(’container’); container.className = ‘scene-modal’;// 表示 container.className = ‘’;// 非表示

【5】定義したシーンを制御することでモーダルウィンドウの表示/非表示を切り替えるコード例

あらかじめCSSで用意した表示／非表示用のclass名をJavaScriptによって該当する要素のclassNameに代入することで、表示／非表示を切り替えるわけだ。
モーダルウィンドウの内容を切り替える場合はどうなるだろう【6】。

<div id=”container”> <div class=”select”>選択</div> <div class=”confirm”>確認</div> <div class=”complete”>完了</div> </div>

.select, .confirm, .complete {display: none;}// 初期非表示状態 .scene-select select, .scene-confirm .confirm, .scene-conplete .complete { display: block;// 各要素を表示 }

var container = document.getElementById(’container’); container.className = ‘scene-select’; container.className = ‘scene-confirm’; container.className = ‘scene-complete’;

【6】定義したシーンを制御することでモーダルウィンドウの内容を切り替えるコード例

モーダルウィンドウとなる「div id=”container”」にはあらかじめ「選択」「確認」「完了」すべてのデータを記述しておき、CSSで「display: none;」として初期段階では非表示としておく。
そして適宜必要な際に、JavaScriptで「div id=”container”」のclassNameにclass名を代入することで該当する要素を表示する。
表示／非表示をシーンと考えることによって、JavaScriptではそのシーンを切り替えるだけの役目を与える。後は適宜clickイベントなどによって必要な機能を呼び出すだけだ。
JavaScriptでは、表示／非表示を切り替えるのではなく、あくまでもclass名を制御しているのみであることがポイントである。視覚的表示状態はCSSで記述しているため、表示方法を変更する場合もCSS側の記述を変更するだけで対応できる。
たとえば前者の事例で表示する際にアニメーションしたければ、【7】のようなCSSを記述すればよい。

.modal { position: absolute; left: -320px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.2s; } .scene-modal .modal { -webkit-transform: translate3d(320px, 0, 0); }

【7】モーダルウィンドウをアニメーション表示させるコード例

このようにHTML、CSS、そしてJavaScriptでそれぞれの役割を明確に区別・整理しておくことで、コードの見通しがよくなり、結果としてメンテナンス性も向上することになる。