JavaWebアプリ開発勉強会レポート Vol.1
JavaWebアプリ開発勉強会は、開発系の勉強会の中でも資格取得ではなくプログラミングを中心としており、勉強会を通してプログラミングの楽しさや面白さを学んで貰う事を目的としています。多くの方にプログラミングに興味を持ってもらい、覚えるのではなく、実際に手を動かしてWebアプリケーションを作れるようになって欲しいという思いを込め、第２回JavaWebアプリ開発勉強会をレポートします。
１．今回のテーマと内容
今回のテーマは「フォーム」と「MVCモデルと処理の遷移」の２つです。普段何気なく使っているWebシステムですが、一体どんな仕組みで動いているのでしょう？今回のテーマはそんなWebシステムのフロント部分のベースとなる「フォーム」とWebアプリケーション処理のベースとなる仕組みの「MVCモデル」について説明します。そして自分でプログラムを作って、「MVCモデルと処理の遷移」を体験してもらいます。
では、さっそく勉強会を覗いてみましょう。
１-１．フォーム
まずは1つ目のテーマの「フォーム」です。
１-１-１．フォームの基本
フォームの基礎ですが、フォームってなに？から始まり、フォームの定義、構成する要素や作成する際の注意点、データ送信の仕組みについての講義がが座学で実施されます。大まかな講義の流れは次の通り。
①フォームとは
②フォームの構造
③フォームの部品
④フォームの作成
⑤データ送信の仕組み（リクエストパラメータ）
⑥データ送信の仕組み（URLエンコード）
⑦GETリクエストとPOSTリクエストの使い分け(1)
⑧GETリクエストとPOSTリクエストの使い分け(2)
基本からスタートして、順序良く講義が進んでいきます。途中受講者の表情に？？という事がありますが、大丈夫です。ちゃんと次のセンテンスでその疑問が解消されるように構成されていますので、ご安心を！
少し講義の内容を聞いてみましょう。
①フォームとは
フォームとは、Webアプリケーションにおいてユーザーの入力に対して処理をする仕組みのことで、入力項目をひとまとめにしてサーバサイドプログラムに送信することができます。
②フォームの構造
フォームはHTMLの複数のタグを組み合わせて作成します。フォーム自体はブラウザ上には表示されさません。ここで受講者は？？となった様子でしたが、大丈夫です。続きを聞いてみましょう。
フォームは、<form>~</form>タグを使って定義します。サーバサイドプログラムに送信するための入力項目を<form>~</form>の間に定義することでひとまとめにすることができます。
③フォームの部品
<form>タグの中に、<input>タグを使用して入力項目を定義します。この<input>タグで定義した項目が実際の画面に表示され、入力を受け付けます。<input>タグでは、フォーム部品の種類を指定する際にtype属性を使用します。type属性にどのような値を指定するかによって一行テキストボックス、ラジオボタン、送信ボタン等を使い分けることができます。
なるほど、テキストのイメージもわかりやすくて、理解が進みますね！で、実際にフォームを作成するにはどうしたらいいのでしょう？続きが気になりますが今回はここまで。講義は、基礎的なことを丁寧に説明していますし、何よりこの後に実技が待っていますのでみなさん集中して受講しています。
１-１-２．リクエストパラメータの取得
リクエストパラメータの取得は、クライアントから送信された項目をサーバサイドで使用するために取り出す方法についての講義です。大まかな講義の流れは次の通り。
①リクエストパラメータとHttpServletRequestインスタンス
②サーブレットクラスでリクエストパラメータの値を取得
③JSPファイルでリクエストパラメータの値を取得
④各リクエストメソッドが使われるブラウザ操作
どんどん講義の内容が専門的になってきますが、これでもまだ基礎の基礎です。
リクエストパラメータは、アプリケーションサーバーによって「HttpServletRequestインスタンス」に格納され、送信先(リクエスト先)のサーブレットクラスまたはJSPファイルに渡されます。次に、サーブレットクラスでの取得方法とJSPファイルでの取得方法の説明と続きます。リクエストパラメータは基礎的な説明だけだけでなく、応用編の説明もあり満足度が高いです。
１-２．MVCモデルと処理の遷移
続いて、もう１つのテーマの「MVCモデルと処理の遷移」です。
１-２-１．MVCモデル
MVCモデルは、Webアプリケーションを開発する上で避けては通れないものですよね。使用する言語に関係なくこの考え方をしっかりと理解していないとWebアプリケーションの開発はできません。そのことをよく理解いている講師は講義にもより一層力が入ります。大まかな講義の流れは次の通り。
①MVCモデルとは
②MVCモデルのイメージ
③MVCモデルの実現イメージ
MVCモデルとは、GUIアプリケーションのための模範的な構造のことで、アプリケーションを次の3つの要素、モデル(Model)、ビュー(View)、コントローラ(Controller)に分けて開発することを定めている。各要素は担当する役割が決められており、他の要素の役割は担わないません。続くMVCモデルのイメージ説明は、２つのイメージを対比してわかりやすく説明していきます。シンプルな処理イメージですがこの説明だととても良く理解できますね。
１-２-２．処理の転送
処理の転送では、「フォワード」と「リダイレクト」についての講義です。MVCモデルでのWebアプリケーション開発には欠かせない技術ですからしっかりと理解しましょう。大まかな講義の流れは次の通り。
MVCモデルで開発する場合、コントローラが処理結果の表⽰をビューに依頼する際に、サーブレットクラスからJSPファイルを利⽤する必要があります。しかし、JSPファイルはJavaのクラスのようにnewでインスタンスを⽣成して呼び出すことができないので、これを解決するのがフォワードという仕組みです。リダイレクトはブラウザのリクエスト先を変更して処理の転送を行うことです。ダイレクトを行うと、次のように処理が進行します。
(1)ブラウザがリクエストを出すと、サーブレットクラスから「ここにリクエストをしなさい」というレスポンスが返ってくる。
(2)命令を受けたブラウザは、指示された先に自動的に再リクエストを行う。
(3)再リクエストの結果が、ブラウザに表示される。
以上で今回の座学は終了。いよいよみなさんお待ちかねの実技に移ります！
１-３．ハンズオン（フォーム／MVCモデルと処理の遷移）
ハンズオンでは、座学で学んだことを実際に自分でプログラムを作成して確認します。「覚える」のではなく「作れる」ようになる！！を目指して受講者のみなさんとても楽しそうに取り組んでいます。簡単な仕組みのプログラムとはいえ、いざ作ってみると中々うまく動きません。そんな時には講師の教えて貰うだけでなく、受講生同士で議論したり教えあったりとみんなで協力して課題を進めていきます。
残念ながら時間内に課題がクリアできなかった受講生もいましたが、それでも実際に自分で手を動かしているので理解できなかった部分も明確です。次の勉強会までにちゃんとキャッチアップできることでしょう！
２．次回予告
次回のテーマは「スコープ」です。Webアプリケーションで使用する３つのスコープについて、自分で作成したプログラムで実際に動きを確認していきます。！乞うご期待！
３．受講者の声と評価
今回の参加人数6名、辛口の受講者アンケートでは、満足度が平均「93点」を獲得し、「演習でプログラムを動かす事ができて楽しかった！」「周りの人と協力しながら進められる環境が良かった！」「手を動かしながらの講習なので、身についている実感がある！」など、多くの評価を頂きました。
また、講義後に講師の元へは「座学と実技両方あるのが分かりやすくて良かったです。」「プログラムは実際にコーディングをしないと覚えられない事を実感できた。」など、受講生が手応えを感じている報告されています。
４．勉強会で伝えたい事
今回は「フォーム」と「MVCモデルの処理と遷移」について勉強しましたが、いずれもWebアプリケーションの基礎となる知識です。特に「MVCモデル」はWebアプリケーションを理解する上でとても重要になりますので、しっかりと理解してほしいと思います。当勉強会では、「覚える」のではなく「作れる」ようになる！を合言葉に、プログラミングを実際に経験してプログラミングの楽しさ、面白さを学んで現場で活躍できることを目指します。
そのために、実技多めで楽しく技術を身につけられる様に工夫しています。プログラミングは、自分で作ってみるのが一番ですからね！一緒にプロフェッショナルを目指して頑張りましょう！！本勉強会は、メイン講師２名(2019年10月現在)によって構成しており、受講者からの質問や問い合わせにも手厚く対応しています。ぜひ、見学に来てね！！
