HTML/CSS/JavaScriptを複雑に組み合わせてアプリケーションを作ろうという大きい流れがありますが、そもそも「アプリケーションを書くことを想定していないモノ」で無理矢理作ること自体に無理があるよねという考えがあってもいいと思います。

altJSがいくつか出ていたりJavaScriptを機械語のように使おうという発想が出ていたりしますが、これらはすべてJavaScriptが使いものにならないと判断したからこその取り組みですよね。だから1つ抽象化レイヤを引き上げて、JavaScriptを直接書きたくないからaltJSを書いて変換しようという話と同様に、ウェブサイトを直接書きたくないからaltWebSiteを書いて変換しようという話があってもいいはずです。

そういう言語ができたらいいなということで妄想してみました。なお用語定義はJavaに習っていますが深い意味はありません。

目標

DOMやJavaScriptなんてものを意識しないでクライアントサイド開発が行える。

できること

コンパイルするとHTML/JS/CSSなどの静的ファイルを吐き出す。

サーバサイドとの連携
- formの使うmethod, actionの指定
- JSON, JSONP, XMLを吐くサーバとの対話をサポート
- WebSocketとかも対応するのでリアルタイム処理もOK
- コンパイル時にJSPをはじめとしたテンプレートを吐くことができる
規模のあるサイトでの問題解決
- サイトマップ管理
  - 到達不能ページ検出
  - 最大必要画面遷移数の算出
  - 画面遷移の対称性確認
- form自動生成
  - form(:value => tweet)とか書くと指定されたDTOの型からformを自動生成する
  - バリデーションや入力補助、サジェスト、住所検索ボタンなどはDTOのfieldの型とかアノテーションから生成
  - DTOの定義を書き換えるだけで複数ページに散在するformがすべて自動更新される
- ヘッダー、フッター、メニューの全画面での統一
- ユーザのロールによるレンダリング処理
  - ログイン前
  - ログイン後
  - 管理者
  - VIP
- テンプレートっぽくデザイン統一
  - ”編集機能”、”管理機能”、”購入手続きフロー”といった区画を決めて、区画ごとにポリシーを統一できる
  - 3ペイン、と決めておくと区画内のすべてのページのデザインが統一される
- パンくずリスト自動生成
- CSRF/XSS脆弱性の自動検知

やらなくていいこと

オブジェクト編集用のフォームを自分で書く
ID, class, nameといった概念をイメージする
ページをコーディングしているときはデザインを考える必要ない
- 流しこむとか浮くとかアコーディオンとかタブとか色合いとかRWDとかどうでもいい
- ページの責務を書くイメージ（「責務」がUIに合う考えかどうか不明）

言語イメージ

言語仕様とかどうでもよくて、なにが関心ごとなのかということだけ提示できればと思います。

# sitemap.yml
index:
  - signup
  - reset_password
  - portal:
    - logout
    - schedule
    - configure:
      - personal
      - social
# yamlでこういう書き方はできなそう？

# area.yml
admin:
  - /admin/*
normal:
  - otherwise

# design/normal.yml
component: # 登場人物と位置関係（デザイナーの関心事を設定ファイルに置くのは正しいのか？）
  - header
  - container:
    - menu
    - main:
      - breadcrumb
      - content
  - footer
menu: # メニューに何を表示するか
  - portal # portal.yamlを解釈して勝手にサブメニューを作る
  - cart
  - recommend
  - history
  - setting
header:
  - logo
  - logout
footer:
  - jump_to_top # 画面最上部にスクロールするリンク
  - back_to_parent_page # 親ページに戻るリンク
  - link: # リンク集
    - index
    - sitemap
    - help
  - copyright

# index.rb
form(
  :action => "/login",
  :method => :POST,
  :value => :data_to_signin
)

explain :how_to_reset_password with link to("/password/reset")

explain :how_to_signup with link to("/signup")

# 注：rubyでこういう構文のDSL作れるか知りません

これやると多言語化も簡単そうな気がしてきた。

Kengo's blog

Technical articles about original projects, JVM, Static Analysis and TypeScript.

altWebSiteなるものを妄想してみる

目標

できること

やらなくていいこと

言語イメージ

関連