SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Web開発者の悩みを軽減! クライアントサイドでのHTMLテンプレート管理

サーバサイドHTMLテンプレートからの脱却のススメ

Web開発者の悩みを軽減! クライアントサイドでのHTMLテンプレート管理 第1回


  • X ポスト
  • このエントリーをはてなブックマークに追加

最近のWebシステム開発

 最近では、今までの流れに加えて、新たなWebシステムも求められています。どういうものかというと、JavaScriptなどが積極的に使われ、より使いやすく、そして、より即時に情報にアクセスできるようなUIがリッチになったものです。見た目も重要ですが、使い勝手もそれ以上に重要視され、UI/UXに占める割合はかなり大きくなっています。

 これらの機能はFlashが今まで担ってきましたが、Flashが使われなくなり、特にスマホではHTML5がそのポジションに取って代わりました。HTMLを記述しているエンジニアには新たなスキルが求められ始めました。そのようなUI/UXを専門に担当するフロントエンドエンジニアというカテゴリも生まれました。

 そして、サーバサイドの開発では、スマホアプリなどからの利用もあり、リクエストは必ずしもブラウザからのみという状況ではなくなっています。

 つまり、見た目や使い勝手についての実装が、サーバサイドではなくクライアントサイドに移ってきているということです。

 そして、サーバサイドでは、ビジネスロジックとしてのAPIや、AIというキーワードもあるように、よりインテリジェンスな機能を実装するスキルが求められ、役割が変わりつつあります。それに従い、機能を実装する担当と、UI/UXを担当するエンジニアが分かれつつあり、プロジェクトの進め方も図3のように変わってきました。

図3 UI/UXが重要な最近のWebシステム開発プロジェクトの流れ
図3 UI/UXが重要な最近のWebシステム開発プロジェクトの流れ

 このようなプロジェクトは、先ほど紹介したウォーターフォール型ではなく、アジャイル型と呼ばれています。

 アジャイル型では、調査、設計、実装、テストなどを繰り返しながらプロジェクトが進みます。しかし、実際にプロジェクトを進める担当者では、それぞれが共に専門性を高める必要がありつつも、密に連携を取る必要があり、それらの手法がまだ確立しているとは言えない状態で、いろいろなやり方を模索している最中と言えます。

 このようなHTML5の機能を使いこなすようなUI/UXを重視したWebシステムでなくても、確実に、HTMLはより柔軟に変更が必要になり、そして、そのHTMLにかかわる関係者も増えたことは確実なはずです。

現場でおきている問題

 ここで、最初に提示した以下の問題について考えてみましょう。

  • HTMLの文言、デザインの修正がすぐにできない
  • サーバサイドの技術がわからないとHTMLが修正できない

 HTMLの文言の修正は、HTMLを知らないと決してできないものではありません。変更する前の文言と変更後の文言がわかればできます。

 また、デザインの変更も、簡単な色やサイズ、配置くらいならば、CSSとちょっとしたHTMLの変更でできるはずだと、多くの方は思うはずです。しかし、サーバサイドHTMLテンプレートを用いた手法では、ソースが過剰に高度化しているため、修正が困難になっています。

 例えば、リスト1はSmartyというPHPのテンプレート言語を使った場合のHTMLです。

リスト1 Smartyテンプレートでの記述例
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>{#pageTitle#}</title>  <!-- (1) -->
    <script type="text/javascript">
        window.alert('foo');
    </script>
</head>
<body>
<h1>ご利用ありがとうございます。</h1>
<div id="container" class="col">
    {if $isPrimeUser}     <!-- (2) -->
        <p>[プライム会員]</p>

        <p>[一般会員]</p>
    {/if}
    <p>このたびは・・・・・</p>
</div>
</body>
</html>

 比較的分かりやすそうなものの、(1)ページタイトルを修正したくても、変数化されているために、その変数がどこで定義されているかを調べる必要がでてきます。

 また、(2)のifなどの制御文を使えることも特徴です。このため、例えば、$isPrimeUserという変数名を間違えてしまえば、その時点でHTMLへの変換が失敗することになり、最悪、画面が真っ白ということになります。その原因をサーバサイド技術を知らないエンジニアが調べるのは困難でしょう。しかしながら、簡単な文言の修正やデザインであれば、運用可能なレベルと言えます。

 続いて、リスト2はJadeというテンプレート言語を使ったHTMLです。

リスト2 Jadeテンプレートでの記述例
doctype html
html(lang="ja")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
        window.alert('foo');
      }
  body
    h1 ご利用ありがとうございます。
    #container.col
      if isPrimeUser
        p [プライム会員]
      else
        p [一般会員]
      p.
        このたびは・・・・・

 こちらも先ほどの内容と同じHTMLを出力するテンプレートですが、HTMLからかなり拡張されているので、すでにHTMLができあがっている場合には、そのHTMLからテンプレートを起こすのはかなり面倒な作業で、そのテンプレート言語を別に覚える必要があると言えるでしょう。

 ただし、Smartyは少々古いサーバサイドHTMLテンプレートであり、現在の流れはJadeのように新たなシンタックスを要求したり、または、HTMLの中に例外的にプログラムが記述できるなど、よりプログラムとHTMLテンプレートが密接に繋がる方向へと変わってきています。

 このような流れが、簡単な修正であってもある程度のスキルが要求されてしまうことに繋がっているのです。

 したがって、HTMLが分かることはもちろん、サーバサイド技術にも多少は理解がないと、ちょっとした修正さえ難しいという現状があるのです。簡単な文言修正や、デザインの変更であっても修正に時間がかかってしまうケースがよくあります。

次のページ
フロントエンドエンジニアが抱える問題

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Web開発者の悩みを軽減! クライアントサイドでのHTMLテンプレート管理連載記事一覧
この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9594 2016/09/20 17:03

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング