albatrosary's blog

UI/UXとエンタープライズシステム

HTML5開発環境とアーキテクチャと 〜 HTML5Experts.jp エンタープライズ開発特集・記念 〜

連載 | エンタープライズ開発特集 | HTML5Experts.jpがはじまりました。HTML5Experts.jpでは、私もエキスパートとしていくつか記事を書かさせて頂いております。

f:id:albatrosary:20140819143644p:plain

HTML5はバズワードではなくなったし、エンタープライズでも既に当たり前になってきた感のあるHTML5ですし、開発環境やアーキテクチャについても確定してきた感があります。

そして、既に「考え調べる」というフェーズから「使う」というフェーズに移りましたので、これからのエンタープライズ技術者は実践を通して手を動かすことが重要になります。

HTML5に適した開発環境

昨年では珍しかったYEOMAN(The web's scaffolding tool for modern webapps | Yeoman)も、既にエンタープライズでも当たり前のように使われています。開発インフラとしてのツールとしての地位を確立したという印象があります。エディタを選ばないというのも開発者に受け入れられている要因のひとつかと思います。

f:id:albatrosary:20140819114318p:plain

JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 | HTML5Experts.jp

でもYEOMANを利用していることを書かせて頂きましたが、当時はあまり資料もありなく苦労しましたが現在では十分過ぎるほど整っています。

自身オンラインではありましたが HTML5Experts.jpのエキスパートでもある村岡正和氏 からYEOMANの多くを学びましたので、その資料をまとめます。

f:id:albatrosary:20140819143945p:plain

今話題のワークフロー構築ツール「Yeoman」とは?:WEB制作を効率化! Yeomanを使ってみよう! 第1回 | エンカフェ

コマンド1つで制作環境を用意する:WEB制作を効率化! Yeomanを使ってみよう! 第2回 | エンカフェ

「grunt serve」でローカルWebサーバー環境を一発起動!:WEB制作を効率化! Yeomanを使ってみよう! 第3回 | エンカフェ

 
手前味噌ですが、自身もオープンソースカンファレンスで様々なところでYEOMANを紹介させて頂いております。

HTML5エンタープライズ・アーキテクチャ

Single-page Applicationというのも珍しくなく「YEOMANを使ってSPA開発」というのは"普通"になっているという印象があります。さてSingle-page Applciationを作るためにはフレームワークを選択する必要があります。

  • JavaScriptフレームワーク
  • CSSフレームワーク

CSSフレームワーク

JavaScriptフレームワークの決めは若干難しいようですが、CSSフレームワークについては Bootstrap が多く使われていると思います。

f:id:albatrosary:20140819121140p:plain

Bootstrapのグリッドシステムを使うことでレスポンシブなアプリケーション構築が可能になります。

Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! | HTML5Experts.jp

 

JavaScriptフレームワーク

注目しているJavaScriptフレームワークをいくつかあげます。

AngularJS — Superheroic JavaScript MVW Framework

f:id:albatrosary:20140819121531p:plain

Knockout : Home

f:id:albatrosary:20140819121543p:plain

Ember.js - A framework for creating ambitious web applications

f:id:albatrosary:20140819121559p:plain

 

HTML5Experts.jpコントリビュータでもある酒巻瑞穂氏がJavaScriptフレームワーク比較を行った資料がありますのでご紹介します。

f:id:albatrosary:20140819144258p:plain

同氏がHTML5Expert.jpにて実例からも比較していますので記事連載後このブログにも追記したいと思います。

 

エンタープライズでJavaScriptを選ぶポイントとしては

  • Web標準を意識した構成になっているか
  • 入りやすいアーキテクチャになっているか

が重要ではないかと思います。Web標準、特にWeb ComponentsやOo()等、将来性が伺えるものを選ぶべきと思います。

今後のHTML5エンタープライズ

以前はJavaScriptエンジニアがあまりいないということを言っていましたが、現在ではそうしたこともなくなってきています。開発環境、アーキテクチャ共に資料も多く「何をすれば良いのかわからない」という状態では無いというのが、このブログエントリーで理解できたのではないかと思います。

そして、今後のエンタープライズに重要なキーワードは

  • 開発スピード重視
  • 軽量な開発環境
  • フロントとバックエンドの疎結合

ではないかと思います。HTML5はRIAと同等なインターフェースを持ち、モバイル環境にも適合した今までに無い"ビジネス道具"です。過去のシステムをHTML5(SPA)で置き換えるというだけではなく、新しいビジネスを生む"道具"を創造し活用していくべきと考えます。