サーブレット&JSPの基本｜Webアプリの設計と開発手順

サーブレット&JSPの基本｜Webアプリの設計と開発手順

作りたいWebアプリを、思いつきで終わらせない。要件を決め、設計し、機能ごとに形にしていく開発手順を身に付けよう

ここまで、Servlet、JSP、スコープ、EL式、JSTL、データベース、JDBC、DAOパターンなど、Webアプリケーションを作るための大切な技術を学習してきました。

これらを組み合わせると、かなり本格的なWebアプリケーションを作れるようになります。

ログイン機能を作ることもできます。

フォームから入力された値を受け取ることもできます。

JSPで画面を表示し、EL式とJSTLでデータを見やすく表示することもできます。

DAOを使ってデータベースに接続し、投稿や商品情報、ユーザー情報を保存することもできます。

ここまで来ると、自分でも何かオリジナルのWebアプリケーションを作ってみたくなるはずです。

しかし、いざ自分で作ろうとすると、思ったより難しく感じることがあります。

何から始めればよいのか。

どの画面を作ればよいのか。

どのサーブレットを用意すればよいのか。

どのデータをテーブルに保存すればよいのか。

どの順番でプログラムを書けばよいのか。

このようなことを考えないまま、いきなりプログラムを書き始めると、途中で手が止まりやすくなります。

Webアプリケーション開発では、文法や仕組みを知っているだけでは十分ではありません。

作りたいものを形にするには、作る前に考える作業が必要です。

それが設計です。

この記事では、入門者が自分の力でWebアプリケーションを作るための考え方と、開発の進め方を学習します。

最初に要件を決め、次に設計を行い、その設計をもとに機能ごとにプログラミングしていく流れを確認します。

また、チーム開発で構成や作り方をそろえるために使われるSpring Frameworkのようなフレームワークにも少し触れながら、これからの学習の方向性を整理していきます。

作りたいものを形にするために必要な考え方

Webアプリケーションを作るとき、最初にやりたくなるのはプログラミングです。

Eclipseで動的Webプロジェクトstudyを作成し、サーブレットを作り、JSPを書き、画面を表示してみたくなるかもしれません。

もちろん、手を動かすことはとても大切です。

しかし、最初からプログラムを書き始めると、途中で困ることがよくあります。

たとえば、ログイン画面を作っている途中で、ユーザー登録機能も必要だと気付くかもしれません。

投稿機能を作っている途中で、投稿を削除する機能も必要だと気付くかもしれません。

商品一覧画面を作っている途中で、商品をどのテーブルに保存するのか決めていなかったことに気付くかもしれません。

このように、作りながら考える進め方では、細かい部分があいまいになりやすくなります。

作りながら考えると起こりやすいこと

Webアプリケーションを作るときは、プログラムを書く前に、まず何を作るのかを整理します。

そして、どのような構成で作るのかを考えます。

この準備があると、プログラミング中の迷いが減り、効率よく作り進められます。

図1：考えながら作ると開発がうまく進まない理由

この図から分かること

いきなりプログラミングから始めると、作りながら機能や画面、テーブル、処理の流れを考えることになります。

その結果、細部があいまいなまま進み、矛盾や機能不足が発生しやすくなります。

矛盾や機能不足があると、エラーや手戻りが増え、本来作りたい機能に集中できなくなります。

Webアプリケーションを効率よく作るには、最初に要件を決め、次に設計を行い、その後でプログラミングする流れが大切です。

Webアプリケーションの設計とは

設計とは、作りたいWebアプリケーションをどのように実現するかを考える作業です。

要件で決めた内容を、画面、テーブル、サーブレット、JSP、モデル、DAOなどの具体的な構成に落とし込んでいきます。

言い換えると、設計はプログラミング前の地図作りです。

地図がないまま目的地へ向かうと、途中で迷いやすくなります。

Webアプリケーション開発でも同じです。

どの画面があり、どの順番で移動し、どのサーブレットが処理を受け取り、どのJSPに表示し、どのテーブルに保存するのかを事前に考えておくことで、プログラムを書きやすくなります。

設計で考えること

設計を行うことで、Webアプリケーション全体の形が見えやすくなります。

そして、何から作ればよいか、どのファイルを作ればよいか、どの順番で実装すればよいかが分かりやすくなります。

要件を決める

Webアプリケーション開発の第一歩は、要件を決めることです。

要件とは、どんなWebアプリケーションを作りたいのか、どんな機能を持たせたいのかをまとめたものです。

業務として開発する場合は、お客様や利用者と話し合いながら要件を決めます。

学習目的で作る場合は、自分で要件を考えます。

たとえば、ショッピングサイトを作りたい場合、最初から本格的なネットショップを目指すと大変です。

商品検索、会員登録、ログイン、カート、注文、決済、在庫管理、注文履歴、管理画面など、必要な機能が一気に増えてしまいます。

最初は、1〜3個程度の小さな機能に絞るのがおすすめです。

最初に作る機能の考え方

大切なのは、最初から完璧なアプリケーションを目指さないことです。

まずは小さく作り、完成させる経験を積みます。

完成までの流れを体験すると、次に作るときに、どこを先に考えればよいかが分かるようになります。

要件の例

ここでは、学習用のショッピングサイトを例にして考えてみます。

プロジェクト名はstudyとします。

最初から本格的なショッピングサイトを作るのではなく、ログイン機能とユーザー登録機能のように、基本的な機能に絞って考えます。

ショッピングサイトの要件例

このように、機能ごとに何をするのかを整理します。

要件は、プログラムを書くための出発点です。

要件があいまいなままだと、設計もあいまいになります。

設計があいまいだと、プログラムを書いている途中で迷いやすくなります。

機能要件と非機能要件

要件には、大きく分けて機能要件と非機能要件があります。

機能要件と非機能要件の違い

この記事では、主に機能要件を扱います。

入門段階では、まずアプリケーションがどのような機能を持つのかを整理することが大切です。

ただし、実務では非機能要件も重要です。

たとえば、何人まで同時に利用できるのか、障害が起きたときにどう復旧するのか、個人情報をどう守るのか、といったことも考えます。

学習の最初は、まず機能要件を小さく整理するところから始めましょう。

図2：要件を決めて作る範囲を小さくする

この図から分かること

作りたいWebアプリケーションのアイデアが大きすぎると、必要な機能が増えすぎてしまいます。

機能が多いと、画面、テーブル、サーブレット、JSP、モデル、DAOなど、考えることも一気に増えます。

入門段階では、最初から本格的なWebアプリケーションを目指すのではなく、1〜3個程度の機能に絞ることが大切です。

小さな機能を完成させることで、要件決定、設計、プログラミング、動作確認の流れを体験しやすくなります。

要件が決まったら設計する

要件を決めたら、すぐにプログラムを書くのではなく、次に設計を行います。

要件は何を作るかを決める作業です。

設計は、どうやって作るかを決める作業です。

たとえば、ログイン機能を作ると決めた場合でも、まだ考えることはたくさんあります。

ログイン画面には何を入力するのか。

認証に使うテーブルは何か。

ログイン処理を担当するサーブレットはどれか。

認証処理はどのモデルクラスに書くのか。

ログイン成功時と失敗時で、どのJSPにフォワードするのか。

このような内容を整理するのが設計です。

要件と設計の違い

要件だけでは、まだプログラムは書きにくい状態です。

設計によって、要件を具体的なファイルやクラス、画面、テーブルに変換していきます。

さまざまな設計手法

Webアプリケーションの設計には、いろいろな手法があります。

代表的なものとして、OOADやDOAなどがあります。

OOADは、オブジェクト指向分析とオブジェクト指向設計の考え方です。

DOAは、データを中心にシステムを考える設計の考え方です。

実際の開発現場では、こうした設計手法をそのまま使ったり、組織やプロジェクトに合わせて調整したりしながら開発を進めます。

ただし、ServletとJSPを学んだばかりの段階で、いきなり本格的な設計手法を使いこなすのは簡単ではありません。

最初は、難しい設計理論を完全に理解することよりも、小さなWebアプリケーションを完成させるための手順を身に付けることが大切です。

入門者向けの設計方法

ここでは、入門者が小規模なWebアプリケーションを作るための設計方法として、次の4つに分けて考えます。

4つの設計

最初に、アプリケーション全体で使うテーブルを設計します。

その後、機能ごとに画面、サーブレットとJSP、サーバサイドの処理を設計していきます。

そして、設計した内容をもとにプログラミングします。

テーブルの設計

テーブルの設計では、アプリケーションで保存するデータを整理します。

たとえば、ユーザー登録機能があるなら、ユーザー情報を保存するUSERSテーブルが必要になります。

商品を扱うなら、PRODUCTSテーブルが必要になります。

注文を扱うなら、ORDERSテーブルが必要になるかもしれません。

テーブル設計で考えること

テーブル設計があいまいだと、後からJavaクラスやDAOを作るときに困ります。

保存したいデータを先に整理しておくことで、後の設計が進めやすくなります。

画面の設計

画面の設計では、利用者が見る画面や入力する画面を決めます。

画面の名前、表示する項目、入力する項目、ボタン、エラーメッセージなどを整理します。

画面設計で考えること

画面の設計をしておくと、JSPに何を書けばよいかが分かりやすくなります。

また、サーブレットでどのリクエストパラメータを取得する必要があるかも見えてきます。

サーブレットクラスとJSPファイルの設計

画面が決まったら、どのサーブレットがリクエストを受け取り、どのJSPが画面を表示するのかを決めます。

ServletとJSPの役割を分けて考えることが大切です。

サーブレットは、リクエストを受け取り、必要な処理を呼び出し、JSPへフォワードしたり、別のURLへリダイレクトしたりします。

JSPは、サーブレットから渡されたデータを画面に表示します。

サーブレットとJSPの設計で考えること

この設計をしておくと、リクエストの流れが整理されます。

どのサーブレットに何を書くか、どのJSPに何を表示するかが明確になります。

サーバサイドの設計

サーバサイドの設計では、モデルクラス、DAOクラス、JavaBeansなどの役割を決めます。

Servletにすべての処理を書くと、すぐに複雑になります。

そのため、業務処理はLogicクラス、データベースアクセスはDAO、データの入れ物はJavaBeansというように分けて考えます。

サーバサイド設計で考えること

このように役割を分けると、プログラムの見通しがよくなります。

また、後から修正するときも、どのクラスを直せばよいか分かりやすくなります。

図3：入門者向けWebアプリ開発の手順

この図から分かること

Webアプリケーションを作るときは、最初に要件を決めます。

次に、アプリケーション全体で使うテーブルを設計します。

その後、機能ごとに画面、サーブレットクラスとJSPファイル、サーバサイドの処理を設計し、プログラミングします。

最初からすべての機能を一気に作ろうとすると、考える範囲が広くなりすぎます。

入門段階では、機能ごとに設計して少しずつ完成させるほうが進めやすくなります。

機能ごとに完成させていく

入門段階では、機能ごとに設計し、機能ごとにプログラミングしていく進め方がおすすめです。

たとえば、ログイン機能、ユーザー登録機能、商品一覧機能がある場合、すべてを同時に作ろうとすると大変です。

まずログイン機能を設計し、プログラミングし、動作確認します。

次にユーザー登録機能を設計し、プログラミングし、動作確認します。

その後で商品一覧機能に進みます。

機能ごとに進める例

この進め方なら、1つの機能に集中できます。

考える範囲が限定されるため、経験が浅くても進めやすくなります。

機能ごとに作るメリット

機能ごとに作ると、少しずつ完成を確認できます。

1つの機能が動くたびに、達成感も得られます。

メリット

特に入門段階では、完成までたどり着く経験がとても大切です。

小さな機能を作り切ることで、次の機能を作る自信につながります。

機能ごとに作るときの注意点

機能ごとに作る進め方には、注意点もあります。

1つの機能だけを見て設計すると、あとから別の機能と連携しにくくなる場合があります。

たとえば、ユーザー登録機能を作ったあとで、ログイン機能とユーザーIDの扱いが合わないことに気付くかもしれません。

商品一覧機能を作ったあとで、注文機能に必要な情報がPRODUCTSテーブルに足りないことに気付くかもしれません。

注意点

経験が浅いうちは、手戻りが発生するのは自然なことです。

むしろ、手直しを通じて、どこを先に考えておくべきだったのかが分かるようになります。

設計は、最初から完璧にできなくてもかまいません。

小さく作り、動かし、直しながら経験を積んでいくことが大切です。

チーム開発とフレームワーク

Webアプリケーション開発では、1人で作る場合もあれば、複数人のチームで作る場合もあります。

チームで開発するときは、作り方が人によってばらばらだと困ります。

ある人はサーブレットに処理をたくさん書き、別の人はLogicクラスを使い、さらに別の人はDAOの名前の付け方を変える、という状態では、全体の統一感がなくなります。

そのため、チーム開発では、共通の作り方や構成をそろえることが大切です。

その助けになるのが、フレームワークです。

フレームワークとは、Webアプリケーションを作るための土台や決まりごとを提供する仕組みです。

多くの現場では、Spring Frameworkのようなフレームワークが使われています。

フレームワークを使う利点

ただし、フレームワークを学ぶ前に、Servlet、JSP、リクエスト、レスポンス、スコープ、MVC、DAOなどの基本を理解しておくと、仕組みをより深く理解できます。

設計の学習を進めながら、必要に応じてフレームワークの基礎にも触れていくとよいでしょう。

プログラミング前に資料を作る

設計を行う目的の1つは、プログラミングに使える資料を作ることです。

頭の中だけで考えていると、途中で忘れたり、矛盾に気付きにくくなったりします。

表や図にして書き出すことで、作る内容を確認しやすくなります。

作っておきたい資料

これらをすべて最初から完璧に作る必要はありません。

小さなWebアプリケーションなら、簡単な表や手書きの図でも十分です。

大切なのは、作る前に一度整理することです。

studyプロジェクトで練習するときの進め方

学習用にstudyプロジェクトでWebアプリケーションを作る場合は、次のように進めると取り組みやすくなります。

練習の流れ

この流れを何度か繰り返すと、Webアプリケーション開発の考え方が身に付いてきます。

最初は時間がかかっても問題ありません。

むしろ、設計してから作る経験を積むことが大切です。

小さく設計して作り始めるために

Webアプリケーションを作る力は、知識を読んだだけではなかなか身に付きません。

実際に要件を決め、設計し、プログラムを書き、動かし、直すことで少しずつ身に付いていきます。

最初から大きなアプリケーションを作ろうとすると、画面、テーブル、サーブレット、JSP、モデル、DAOのすべてが複雑になり、途中で止まりやすくなります。

まずは小さな機能を選びましょう。

ログインだけ。

ユーザー登録だけ。

投稿一覧だけ。

商品一覧だけ。

このような小さな単位で、要件の決定、テーブルの設計、画面の設計、サーブレットクラスとJSPファイルの設計、サーバサイドの設計、プログラミングを体験します。

手戻りがあっても、それも大切な経験です。

修正を通じて、次はどこを先に考えればよいかが分かるようになります。

これまで学んだServletとJSPの知識を使って、作りたいWebアプリケーションを少しずつ形にしていきましょう。