スキップしてメイン コンテンツに移動

ぺったんR APIドキュメントの副読本

この文書は jsdoc3 で書き出している pettanR フレームワーク API ドキュメントの副読本です。

はじめに、Web 開発の世界へようこそ!

技術文書の流通のために生み出されたハイパーテキストと Web ブラウザですが、現在では SPA や 3D ゲームといった Web アプリケーションのプラットフォームへと変貌を遂げました。

それらの素晴らしいプロダクトに触れ、これから Web 開発に望む皆さんは胸をときめかせていることでしょう。そうです、Web ブラウザはあなたの夢を何でも描くことの出来る自由なフロンティアです!

しかしいざ初めての開発に着手すると、Web ブラウザというフロンティアは少し雑草の茂るだけの荒野だと気付くでしょう。この荒野に素晴らしいテーマパークを築くには、まずは測量に整地・地盤や土壌の改良といった膨大な下準備をしなくてはいけません。

簡素な物置小屋のための最初の柱を建てるのにも、それ以前に膨大な作業の必要なことにあなたは唖然となるでしょう。そのような基礎もそこそこに勇んで建てた一本目の柱は傾き、または無残に朽ち果てるのを目撃しあなたは深いため息をつくかもしれません。

そんな HTML + Javascript ですが今や最も多くの端末で動作する言語のひとつへと躍進しました。これから如何にしてこのフロンティアを整地し、そしてその上にテーマパークを築くのか?一緒に考えていきましょう。

ようこそ Web 開発の世界へ!

『ぺったんR フレームワーク API ドキュメントの副読本』について

個人ホームページ時代から十数年が経過し、現在の Web 開発は膨大な知識と経験が必要なものになってしまいました。

どうやってそれらの情報を業務時間の間に継承していけばよいか?この問題意識は常にありました。

このたび『ぺったんR フレームワーク API ドキュメント』を書いていくにあたり、その副読本という形で取り組んでみようと思います。

副読本では API ドキュメントに書ききれなかった背景や参考リンクを紹介していきます。

フレームワークのレイヤー構造について

/core javascript の整地を行い大規模開発の基礎を整える

ブラウザの種類とバージョンを調べ、続いて Javascript 自体の差異を埋め、足りない関数を補います。

X.Callback, X.Closure

続いて、ファーストオブジェクトとも呼ばれる function について再利用可能クロージャの生成・破棄ができるようにします。

X.Class

大規模開発のためにクラス定義関数を用意します。prototype__proto__ 周りの差異やバグを吸収するためにもクラス定義の関数を使います。

X.EventDispatcher クラス

イベントターゲットオブジェクトをラップしたり、単にアプリケーション独自のイベントを配信するためにも使えます。フレームワークを使った開発のコーディングスタイルを決めているとても重要なクラスです。

X.Timer

setTimeout をラップした API を提供します。確実な動作のためにタイマーは重用されるべきです。

/dom DHTMLの差異を吸収し非同期化された仮想Nodeを提供する

jQuery ライクな構文で DOM ツリーの操作を行います。チェーンメソッドは速い、と聞きかじったので jQuery ライクなデザインにしました。

Real DOM の操作は非同期に行われるため高速です。Virtual DOM 時代のライバル達にひけをとることはありません、多分。

10年後の変化に対応するための実装を行う。その証明のために10年前の環境でも動作させます。

/ui UIフレームワーク

/dom までで吸収できなかった Web ブラウザの差異を最終的に吸収して HTML 要素をアプリケーションの UI 部品として利用するためのレイヤーです。

この層で吸収しきれなかった差異に関する情報を提供して、フレームワーク上のアプリケーションは UI をグレースフルデグラデーションします。

任意の UI を実現するための最適な HTML タグ構造がブラウザ毎に異なる場合に、その差異をカプセル化します。

Web ブラウザ自体のレンダリングコストを最小にし高速な UI 部品を提供するために独自のレイアウトルールを持ちます。

フォントサイズをベースとしたレイアウト指定のため、レスポンシブな画面作りを後押しします。