メンテナンスを考慮したコーディングルール
Mobageのような大きなプロジェクトに限らず、現在のフロントエンド開発には複数のスタッフが同時に携わること、また担当スタッフが変更されるといったことはありがちなことである。スタッフ変更には関係なくコンテンツ自体は継続していく中、コーディング等を担当するエンジニアにはメンテナンス性を重視した開発が求められる。
そのためには、HTML、CSS、JavaScriptそれぞれの役割分担を明確化しておくことが重要。具体的には、データ自体はHTMLコードに記述し、CSSでデータの視覚的表示を定義。そしてJavaScriptで制御というルールを守ることでマークアップとスクリプトを分離し、見通しのよいコーディングを行うことだ。そして、こういった考え方を開発スタッフ間で共有しておくとよいだろう。
これにより、HTML、CSS、JavaScriptとそれぞれが別々のスタッフが担当する体制であっても、またスタッフが変更された場合であっても柔軟に対応できるメンテナンス性の高さを実現できる。
JavaScriptコードで視覚的効果を与える
【1】Webページの前面に表示されるモーダルウィンドウ。
では、具体的な事例として、Webページ上にモーダルウィンドウを表示する場合のコーディングを見ていこう【1】。
まず、内容が一定のモーダルウィンドウを一つだけ表示/非表示する場合、【2】のようなコードが考えられる。
- <div id=”modal”>
モーダルウィンドウに表示する内容
</div>
- var modal = document.getElementById(’modal’);
modal.style.display = ‘block’;// 表示
modal.style.display = ‘none’;// 非表示
【2】モーダルウィンドウを一つだけ表示する場合のコード例
では、モーダルウィンドウの内容を切り替える場合はどうだろう。たとえば、「選択」→「確認」→「完了」といったようにモーダルウィンドウ内でコンテンツが遷移する場合、【3】のようなコードが考えられる。
- <div id=”container”>
<div id=”select”>選択</div>
<div id=”confirm”>確認</div>
<div id=”complete”>完了</div>
<div>
- var select = document.getElementById(’select’);
var confirm = document.getElementById(’confirm’);
var complete = document.getElementById(’complete’);
//選択→確認
select.style.display = ‘none’;
confirm.style.display = ‘block’;
//確認→完了
confirm.style.display = ‘none’;
complete.style.display = ‘block’;
【3】3つのモーダルウィンドウを表示する場合のコード例
【3】ではid属性で制御しているため、表示/非表示の切り替えはid属性をもった要素ごとにすべてJavaScriptで記述しなければならず、汎用性には乏しいといえる。
そこで、id属性ではなくclass属性を使って、より汎用性・拡張性に富んだ記述を考えてみよう。
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でそれぞれの役割を明確に区別・整理しておくことで、コードの見通しがよくなり、結果としてメンテナンス性も向上することになる。
classList APIについて
今回紹介したコーディングでは、HTML5で拡張されたclassList APIを利用することで、より効率的なコードを記述することも可能だ。
ただし、現時点ではAndroid 2.3以下ではclassList APIを利用することができないため、汎用的な記述を考慮した。
今後、スマートフォンなどのデバイス搭載OSのバージョンが上がり、classList APIが汎用的に利用可能となれば、「[要素].classList.add();」、「[要素].classList.remove();」といったメソッドを使ってclass名の付け替えもよりスマートにできるようになるだろう。
次回は、モーダルウィンドウ内に異なる役割を持った複数のボタンが存在するケースについて解説しよう。