|
アプリ開発の準備 Webアプリの開発に必要なのは、ソースコードを編集するためのテキストエディタだけです。 Windows に付属する「メモ帳」あたりでも構わないのですが、ソースコードの編集用に特化した機能を備えた高機能のソフトが無償で出回っていますので、そちらを利用した方が便利でしょう。 ここでは MicroSoft が提供している Visual Studio Code をお勧めしておきます。 ( 初期状態では英語表示になっている可能性がありますが、日本語表示に変更できます。 ) Webアプリはブラウザ上で実行されるものですから、当然、何らかのブラウザソフトが必要ですが、現在出回っているものであれば何でも構いません。 ただし、かつて Windows の標準だった Internet Explorer は使用しないでください。これはすでに開発を終了した製品で、新しい言語仕様に対応していないためです。 現在、最も多くの人に使われているのは Chrome ですので、このあたりが無難かもしれません。アプリのデバッグ ( アプリの動作を追跡し、検証する作業 ) のためのツールは開発に必須ですが、これは各ブラウザごとに用意されています。 いずれにせよ、ここではごく概括的な話しかできません。多数の入門書が出版されていますので、これからアプリの開発に挑戦しようしている方はそちらを読んでいただくしかありません。とりあえず、ここでは以下の本をお勧めしておきます。 齊藤新三「これから学ぶ JavaScript」 (インプレス) 税別定価 2,400 円 アプリを構成するファイル JavaScript を用いたWebアプリは、一般に、以下の 3 種類の拡張子をもつテキストファイルによって構成されます。通常、これらのファイルは同一のフォルダ内に置かれます。 *. html または *. htm ユーザーインタフェース、つまりブラウザ上に表示される画面を HTML という言語で記述したもの。今ご覧になっているこの画面もこれで書かれています。 *. css ( 必須ではない ) 上記の HTML 文書を修飾するための「スタイルシート」と呼ばれるファイルです。ここで、たとえば文字フォントの大きさとか色とかが定義されます。 *. js アプリの制御コードを JavaScript で記述した、いわゆる「ソースコード」です。たとえば、HTML 文書によって配置された「ボタン」を押すとこのファイルの内容が呼ばれ、何らかの処理が行われてブラウザ側に応答が返ってくる、というような仕組みです。 JavaScript の例題 現在公開中の「H形鋼の断面計算」のソースコードを使用したアプリを例題として作りました。以下のファイルをダウンロードしてから同じフォルダ内に解凍してください。  sample_h.zipここには以下の 3 つのファイルが含まれています。 ・ sample_h.html ・ sample_h.js ・ steelH.js ( 現在公開中のソースコードファイルと全く同じもの ) この中の sample_h.html をダブルクリックするとブラウザが起動し、画面があらわれます。操作法は説明するまでもないと思いますが、H形鋼の寸法を所定欄に入力して「計算」ボタンを押すと断面性能やら許容応力度やらが出力される、というものです。 以下、これらのファイルがどのように使われているかを簡単に確認しておきましょう。 エディタを起動して sample_h.html の中を見てください。 前述の通り、このファイルはブラウザに表示される「画面」を定義するものですが、この最後の方の 2 行の script タグの中に以下の記述があります。 type="text/javascript" src="steelH.js" → JavaScript で書かれた steelH.js を使用 type="text/javascript" src="sample_h.js" → JavaScript で書かれた ssample_h.js を使用 この宣言により、この HTML 文書に 2 つのファイルが関連付けられていることが分かります。 少し前の行にさかのぼり、「計算」という文字列を探してください。これが書かれている button タグの中に以下の記述があります。 onclick="onCalcClick()" → ボタンがクリックされたら onCalcClick() を呼び出す この onCalcClick() という関数で、ボタンがクリックされた時の具体的な処理を指示しているのですが、これは sample_h.js の中に書かれています。 そこで、次はこのファイルを開いてみます。 冒頭の function onCalcClick() のブロック内に様々な処理が書かれていることが分かりますが、その中ほどに let member = new steelH(h, b, tw, tf, r); という行があります。ここで steelH というクラスが使われていますが、これの定義が steelH.js というファイルの中にかかれているのです。 ... という風に、解凍された 3 つのファイルがアプリ全体の中でどのように使われるのかを駆け足で説明してきましたが、当然ながら、その「クラス」とは一体何なんだ というような疑問を持つ方はおられるでしょう。ですが、そのあたりをここで逐一解説することはできません。これについては、さきほどの参考図書等に目を通しながらご自分で勉強していただくしかありません。 何かと大変に思えるかもしれませんが、しかし JavaScript を使ったアプリの開発は、PC用あるいはスマホ用のアプリを作成することに比べたら格段にハードルは低いです。そのことだけは保証できます。 |