あまり知られていないけれど、HTML5では正規表現が使えるようになる

2009年9月29日はてなブックマーク del.icio.us Twitter
タグ : HTML5 , 正規表現

正規表現といえば、主にsedやawkといったUNIXのコマンドで、あるいはPerlやPHP、JavaScriptなどのスクリプト言語の中などで、プログラマーが文字列を操作するために使う道具でした。

その正規表現がHTML5でサポートされる見通しです。いままで正規表現を使わずに済んでいたデザイナやコーダーといった職種の方々も、いずれ仕事としてきちんと正規表現を扱わなければならない時代がやってきます。

HTML5のどこに正規表現が使えるようになるの?

正規表現は、input要素のpattern属性の中で使えることになる予定です。W3Cが2009年8月25日付け公開しているHTML5のワーキングドラフトの「4.10 Forms」の「4.10.4.2.8 The pattern attribute」では次のように記載されています。

The pattern attribute specifies a regular expression against which the control's value is to be checked.

If specified, the attribute's value must match the JavaScript Pattern production. [ECMA262]

例として、入力された文字を、数字1文字と大文字のアルファベット3文字に制限するサンプルがワーキングドラフトに掲載されています。

<label> Part number:
  <input pattern="[0-9][A-Z]{3}" name="part"
   title="A part number is a digit followed by 
          three uppercase letters."/>
</label>

title属性に設定された文字列は、ツールチップ表示や正規表現に合致しない場合のアラートに使われるようです。

ご存じのようにinput要素はほとんどのWebサイトで使われています。そこで顧客番号やユーザーID、シリアル番号や当選番号など、何らかの入力フォーマットを設定することはそれほど珍しいことではないでしょう。

いままで入力されたデータのチェックは、サーバ側かJavaScriptによるプログラミングが必要でしたが、HTML5では正規表現を使うことでWebブラウザ側で簡単に(しかも柔軟に)チェックできるようになります。そしてその正規表現を考えるのはWebデザイナーやコーダーの仕事になるかもしれません。

そんなWebデザイナーやコーダ-の方々のために、そしてプログラマだけど正規表現は得意ではない、という方々のために、次の記事では正規表現をマスターするためのリソースを紹介します(記事:正規表現をいまのうちに覚えておきたい人のためのリソース集

(追記:「サーバ側のチェックはいらなくなるの?」というコメントをいくつかいただきました。フォーマットのチェックはHTML5の正規表現でできるようになりますが、できることはそこまでです。サーバ側でのチェックが不必要になるわけではありません。例えばデータの内容のチェックなどはサーバ側でチェックが必要でしょう。言葉足らずでしたので、補足させていただきます)


次の記事≫ 正規表現をいまのうちに覚えておきたい人のためのリソース集
前の記事≪ マイクロソフトが研究中の分散OS「Barrelfish」、スナップショットを公開

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
RSSリーダーで : Feed
≫ 過去の記事を読む




アクセスランキング - 過去7日間

  1. 次の10年、「統計分析」こそテクノロジー分野…
  2. その分析、Hadoopなら速く安くできます …
  3. グーグルが構築した大規模システムの現実、そし…
  4. 米国で求められているクラウドのスキルは? A…
  5. [速報]VMworld 2010、クラウド時…
  6. 経過報告:「SAP」をSocial Appl…
  7. 技術評論社のクラウド技術誌「G-CLOUD …
  8. グーグルが構築した大規模システムの現実、そし…
  9. グーグル、オラクルとの係争を理由に今年のJa…
  10. グーグルが構築した大規模システムの現実、そし…
  11. 呼びかけ:「SAP」をSocial Appl…
  12. [速報]VMworld 2010、IT as…
  13. グーグルが構築した大規模システムの現実、そし…
  14. アドビ「iPadでFlashアプリを動かす」…

アーカイブ  (最新記事10)

バックナンバー

2010年9月
2010年8月
2010年7月
2010年6月
2010年5月
2010年4月
2010年3月
2010年2月
2010年1月
2009年12月
2009年11月
2009年10月
2009年9月
2009年8月
2009年7月
2009年6月
2009年5月
2009年4月
2009年3月
2009年2月






Trackbacks (TrackbackURL:http://www.publickey1.jp/mt/mt-tb.cgi/318)

  • (トラックバックは承認後に掲載されます)

Comments