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