始めてみる

フロントエンドとバックエンド

Web アプリケーションは大きく『フロントエンド』と『バックエンド』の2つに分かれる。 それぞれの役割は以下の通り。

フロントエンド

ブラウザ上で動く、実際にユーザーが利用する部分。 HTML, CSS, JavaScript で構成される。

バックエンド

サーバー側でデータベース処理や負荷のかかる計算を行う部分。 Java, Ruby, Python など様々な言語で実装される。

環境構築

フロントエンドの開発には様々なソフトを利用するが、とりあえずは

• Web ブラウザー
• テキストエディタ

が、あれば問題ない。

Node.js のインストール

Windows で開発をするなら、Node.js の公式ページ に行き、LTS 推奨版 をダウンロードしインストーラーでインストールする。 インストールが終わったらコマンドプロンプトを開き以下のコマンドを実行してインストールされていることを確認する。

node --version

npm --version

node は JavaScript のインタプリタで、npm はそこで利用するパッケージマネージャ。

http-server のインストール

とりあえず HTML の動きを見るだけなら、エクスプローラで .html ファイルを開きブラウザで表示させるだけで問題ないが、Ajax の一部の機能などを使おうと思うと file:// からでは利用できない場合がある。 http-server は実行しているディレクトリで Web サーバーを起動させ http://localhost:8080/ の様に HTTP でアクセスできるようにしてくれる。

インストールには npm を使う。

npm install http-server -g

インストールが完了したら、ブラウザで確認したいフォルダに移動して http-server コマンドを実行する。 実行後そのフォルダの中身に http 経由でアクセスすることが出来る。 例えば、フォルダ内の main.html にアクセスる場合は

http://localhost:8080/main.html

なお、index.html という名前の HTML ファイルは特殊で、ファイル名を省略してもアクセスできる。

http://localhost:8080/
http://localhost:8080/index.html

標準では上の様に 8080 ポートを利用するが、ポートが開いてない場合は起動時のオプションで指定する。

http-server ./ -p 9090

Web ページの構成

進める前に

Web 関係の特に

CSS のテンプレート

いきなり、一から CSS を全て書いていくのは現実的ではない。 なので、まず最初は一般に出回っている OSS のテンプレートを使って、それっぽいページを簡単に作れるようにする。 その途中で詳細な HTML や CSS を勉強していく。

代表的なテンプレートとしては以下のようなものがある。

名前	備考
Bootstrap
Material Design Lite
Primer
Office UI Fabric

ここでは、この中で一番有名な Bootstrap を使う。