サーブレット/JSPでWebアプリケーションを作るまで(その1)


はじめに

プログラミング言語(Java)を勉強してきた約1年を振り返っていきたいと思います。
勉強するにあたって、目標にしたのがWebアプリケーションの作成です。

Webアプリケーションの仕組み

Webアプリケーションの仕組みについて以下にまとめました。

厳密にはもっと細かいのですが、大まかにはこういった仕組みで出来ています
上記のアプリケーションサーバを作成するにあたってJavaだけでなく、データベース(SQL)、
サーブレット/JSP、HTML/CSSという技術を学びました。

学習言語と流れ

Webアプリケーション開発の為に学習してきたプログラミング言語、流れは以下の通りです。

SQL

まず始めに勉強したのがSQLです。
SQLは大量のデータ(ユーザー情報や商品情報、動画など)を扱うためのデータベースを管理、操作を行うときに使われる「データベース言語」。簡単に言うとデータベースへの命令文です。

データベース(リレーショナルデータベース)はイメージとしてExcelが近いと思います。

データベースはテーブル(Excelのsheetのような感覚)を作成し、1つのテーブルごとに、「ID」「名前」「年齢」など関連性のある一連のデータがそれぞれ格納されます。

主な命令部は4つです。
1、テーブルを作る(CREATE)
2、情報の検索(READ)
3、情報の入力、更新(UPDATE)
4、情報の削除(DELETE)
簡単な命令文を覚えることがメインなのでサクサク勉強できました。

データベース使うメリットとして
・自動でデータの関連付け、分析が出来る
・同時アクセスしてもデータが壊さず共有可能
・不正なデータをブロックバックアップできる
等のメリットが得られます。

Java

SQLの次にJavaの基礎について参考書を見ながら勉強しました。
Javaはサーバーを作るために必要な言語で後に記述するサーブレットにも用いります。
勉強してきた内容についてはまた、詳しく記事にしていきたいと思います。

HTML/CSS

実際にPCやスマホで見る画面作成の為、HTMLとCSSについて勉強しました。
HTMLは文章や画像、リンクをを構成するもので、CSSはHTMLに飾りをつけるためのものととらえていただければと思います。

例えば以下のようなHTMLだけだと

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>top page</title>
<link rel="stylesheet" href="@{/css/stylesheet.css}" type="text/css">
</head>
<body>
    <h1>見出し</h1>
    <p>本文</p>
</body>
</html>


上記の様にbodyと書かれている間が表示されます。
現在はHTMLのみのため黒い文字のみが表示されますが、ここにCSSを加えると

h1 {
    color: red;
}

p {
    color: blue;
}


h1(見出し)の文字を赤色に、p(本文)の文字を青色にするに変更しました。
文字の色を変える以外にも背景に色を付けたり画像にしたり、表示する場所を
左右に寄せたりなど装飾を施すことが出来るようになります。

サーブレット/JSP

簡単に言うとJSPは画面、サーブレットはサーバーと考えていただければと思います。

JSPはHTMLの中にJavaのコードを埋め込んだものです。ブラウザからURLで
サーブレットを呼び出して、要求を受けたサーブレットはJSPを用いて
必要な画面を作成しブラウザに返します。

ではなぜ、JSPがHTMLにJavaのコードを埋め込む必要があるのかというと
例えばショッピングサイトで毎回同じ商品が表示されるわけではなく、
新商品や目玉商品などが表示されると思います。あれはサーブレット(サーバー)が
データベース内にある今月発売の新商品などを見つけてきて、JSP内にあるJavaの
コードでリストとして画面を作成してブラウザに返しているからです。

次回予告

今回はサーブレット/JSPを扱ううえで必要な用語等をまとめました。
次回一つひとつ掘り下げていきたいと思います。