Ext JS 実践開発ガイド Vol.1

ブログにExt JS 実践開発ガイドとして、これからExt JSを始める方や、既に使用し始めているがアプリケーション開発で苦戦している方などに、基礎からExt JSを利用したアプリケーション開発が行えるように不定期連載形式で、ブログにまとめていきます。

はじめに

前置きとして、「Ext JS 実践開発ガイド」という名前で書籍出版の話があったのですが、色々な状況から実現できませんでした。期待してくれていた人たち、ごめんなさい。どこか出してくれる出版社があれば、紹介してください。さて、 そんなExt JS実践開発ガイド、全14章構成で作成していました。既に5章まで書き上がっています。

その内容を抜粋＋加筆しながらここに掲載し、まとまってきたら会社のサイトに移行します。

また、他の関係ない記事と差別化するために、Ext JSのブログのようにアイコン設置しました。このアイコンが表示されているときは、Ext JS 実践ガイドなんだと思ってください。

アプリケーションのためのHTML

HTMLとDOCTYPE

次のHTMLをみてください。

一見、普通のHTMLです。その通りで、普通のHTMLです。しかし、最近はやりのXHTMLコーディングを行ったりする方も多いのではないでしょうか。

その場合、doctypeの指定をどうするか？などで悩まれるかもしれません。ここで重要なのは、doctypeの指定は、アプリケーションに対してではなく、 ドキュメントに対して指定するものであるという点です。

つまり、Ext JSを使ったアプリケーションを開発するわけであって、文章を作成する訳ではありません。
（Ext Coreなどで文章に対するエフェクトを与える場合などは、例外です）

従って、doctypeの指定はしなくてもよいのです。 Extアプリケーションにおいてdoctypeを指定をすることで、 ブラウザによって動作がおかしくなることがある場合、doctypeの指定をやめるべきです。

外部読み込み

JavaScriptとCSSファイルを外部ファイルにして読み込む場面は多々あります。
ここで、重要なのは、CSSファイルはドキュメントのヘッドに含まれるべきで、JavaScriptファイルは、HTMLドキュメントの中のどこにでもを含むことができるという点です。

通常、JavaScriptファイルの読み込みは、ヘッドに含まれる場合が多いですが、ユーザーに対する表示を先に行い下部でJavaScriptを読み込む場合もあります。

ファイルパス

読み込まれるファイルは、現在のフォルダーからの相対、または絶対位置で指定する必要があります。

次の場合、’mystyles.css’ファイルは現在のドキュメントより一つ上ののフォルダに存在します。

先頭にスラッシュを追加すると、ドキュメントルートからの絶対パスになります。

DOM(Document Object Model)

DOMとは、プログラミングでHTMLを表現することができるブラウザAPIです。
DOMは、複数のオブジェクトツリーにより分けられ、ルート要素はwindowです。これは省略が可能です。
‘Window’はDOMのルートの要素(また、これはJavaScriptでグローバルな範囲と呼ばれる)です。
documentは、1ページ全体を含むオブジェクトです。テーブルや、フォームなどいろいろなオブジェクトがこのオブジェクト内に存在することになります。
Windowの’document’プロパティは、まるまる1ページ構造へのプロパティを含んでいます。

次回予告

いかがでしたでしょうか、以外と曖昧な部分を先に埋めていくことでExt JSの開発スピードも飛躍的に向上できる結果が、ここ最近の教育＆コンサルティング業務で得られています。

これを機会に、一緒に当たり前だと思っている知識を見直してみませんか？

次回は、「CSSの基本とCSSセレクター」「モダンJavaScript」です。