はじめてでもできる!Webシステム開発の環境構築についてわかりやすく説明します

ここでは初心者が躓きやすい環境構築について説明させていただきます。
コチラの記事は以下の人を対象としています、是非ご参考ください。

  • JSPをこれから勉強しようとしている人
  • これからSEを目指そうとしている(仕事内容が知りたい)
  • 環境構築で悩んでいる人

環境構築は初心者が最も挫折しやすい作業になりますが、ココを乗り越えればあとは楽しい開発ライフが待っています!
わからなければ自分で調べたり、やっていけば将来的に自分の力になりますので、頑張って取り組みましょう!

この記事を書いた人

モグラビト

職業:SE。
SES5年間、社内SE3年、メーカー勤務2年の実績。
自宅でアプリ開発を実施中。

大前提の条件について

冒頭にも記載させていただきましたが、環境構築はこれからプログラミングをする上で初心者が最も挫折しやすい作業になります。これからプログラミングを始める方は是非ともご一読いただければ幸いです

そもそも「環境構築」って何?

「そもそも環境構築ってものがわからない」という人のためにまずは「環境」について説明させていただきます。

何かシステムを作る際に実は今のPCだけでシステムを組み上げることはできません。そこで必要なのが「環境」になり、大きなシステムでは開発とテストが分かれているので開発環境、テスト環境などの呼び名になります。
家で例えてみると、家(PC)はあって動画を見たり、絵を書いたり色々と便利ですよね。だけど仕事(プログラミング)をするためには仕事用の作業場(環境)を構築してあげる必要がある、というイメージでしょうか。

環境構築の前に。。。

では、実際に環境構築をはじめて行きましょう!でもその前に何をインストールするか、自分のセットアップした環境について明記します。

インストールするもの

インストールするものは以下の通りです。
これだけですべてのものが揃うわけではありませんが、とりあえずの作業の為に以下のものをインストールします。

環境構築に必要なシステムになります。開発ツールは他にもありますが、Javaの開発でコチラ以外を利用しているのを見ないぐらい一般的なツールです。

Eclipse Javaの開発環境になります。
Apache Tomcat javaServletを動かす際に必要なツールです(Tomcatととも呼ばれます)

必要なプログラムはEclipseで記載して、Tomcatと連携することによってWebで表示させる、というイメージを持っておけば大丈夫です。

注意

詳細については理解する必要はなく、ざっくりとで問題ありません。
インストール完了後、システムに慣れてきたら調べましょう

ちなみに僕の実際に利用したPCのスペック

因みに僕が利用したPCの環境について明記しておきます。

OS Windos11 Home
CPU Core i5-1235U 2.5GHz
RAM 16.0GB
注意

同じものを買う必要はありません。あくまで参考レベルで大丈夫です。
お店で店員さんと相談して使いやすいものを買いましょう。

PCの見方がよくわからない、という方は過去に書いたサイトが参考になると思います。

環境構築スタート!!

それでは実際に環境構築に入ります。
スムーズに行けば1時間程で終わる作業ですが、構築時のエラーなどでかなり時間を要してしまうこともあります(自分は1日無駄にしたことも)

Appach Tomcatのインストール

Appach Tomcat(シンプルにTomCatとも言います)はJSPやJavaサーブレットをWebシステムで利用するために必要なソフトになります。

Tomcatは公式HPより自由にインストールできるので其方からインストールしてください。

Tomcatは色々なVersionがリリースされていますが、Version9.0をインストールしてください。
※システムの場合、必ずしも最新が良いとは限りません。新しいものの場合、動作保証がされていないケースなどがあります

画面左側のDownloadからVersion9.0をクリックし、インストールの一覧から32-bit/64-bit Windows Service Installer (pgp, sha512)を選択します。

ダウンロードフォルダにTomcatのインストーラがインストールされるのでインストール。
インストール選択画面では初期値が「Normal」になっているので「Full」を選択してインストールします。

「Next」を選択すると次にユーザ名とパスワードを聞かれますが、こちらは任意ですので覚えやすいものを登録してください。
※パスワードはどこかにメモしておきましょう

後は「Next」で進めていけば問題ありません。途中の箇所はフォルダの保存先などを聞かれていますが、今は気にしなくて大丈夫です。

Tomcatがインストールされたかどうかは以下のURLをたたけばすぐにわかります。
http://localhost:8080/

うまくいくと以下の画面が表示されます。

失敗すると以下の画面が表示されます。この時点での失敗のケースは再度やり直すことをお勧めします(おそらくインストーラのミスが原因かと)後々になって「あ、Tomcat起動できていない」とかでもわかる画面ですね。

Eclipseのインストール

Eclipse(エクリプス)統合開発環境の構築です。こちらをインストールするとJavaの開発環境が一通り揃うので大抵の職場では利用されているほど人気のソフトです。
「Eclipse ダウンロード」で検索すると、「Java 統合開発環境 Eclipse 日本語化プロジェクト」で調べると以下の画面が表示されるの(下記画像をクリックでもOK)で、其方からインストールしましょう。

自分は2023年度のものを選択しました。

インストールはJavaでOK(PlatformやUnlimitedなどでも勿論動きますが、容量が無駄なので使うものだけをインストールしましょう)

pleiades-2023-12-java-win-64bit-jre_20240218.zipがダウンロードされるので流れに従ってインストールしましょう。

うまくいくとCドライブ直下にpleiadesというフォルダが作成されます。

ファイルパス:c:\pleiades\2023-12

C:\pleiades\2023-12\eclipseのフォルダにeclipseのアプリケーションがあるので、今後のためにショートカットをデスクトップへ作成しておきましょう。アプリをダブルクリックして、起動。「ワークスペースとしてのディレクトリー選択」が確認されますがそのまま進めると以下の画面が表示されます。

 

EclipseにTomcatを接続する

Tomcatを接続する

ここではインストールしたEclipseからTomcatを起動する方法を記載します。
画面が黒背景の方が開発時に眼にやさしいのですが、確認する側は見づらいと思いますので、クラッシック背景に変更しています(変更方法については機会があれば解説します)

初期設定ではサーバーの設定は以下のようになっていると思います。

コチラにTomcatと連携したサーバーを追加したいと思います。
サーバータグの画面で右クリック「新規」でサーバーを選択します。サーバー追加画面が表示されるのでTomcat9.0を選択します(今回インストールしたのが9.0なので)Tomcatに連携するために【追加】ボタンを押下します。

Tomcatのインストールディレクトリが異なっているのでTomcatのディレクトリに変更します。
※既存のディレクトリから変更してなければ以下のパスで大丈夫 C:\Program Files\Apache Software Foundation\Tomcat 9.0

下記画面のように変更されていれば大丈夫です。

これでTomcatとEclipseの連携は大丈夫。実際に動作を確認してみましょう!

サーバーの設定を確認

設定したサーバーをそのまま起動すると以下のエラーが発生します(1つ以上のポートが無効なため、サーバーを起動できません。)

 

コチラの解消についてですが、サーバーの設定情報を確認しましょう。

対象のサーバーをダブルクリックするとサーバーの概要が表示されるので、そちらの「Tomcatの管理ポート」を「-」から「8005」へ変更しましょう(8005に大きな意味はないです。8015でも8006でも起動します)

 

動作確認

接続が問題ないかを確認のためにプロジェクトを動かしてみます。

まず、左上画面から「動的Webプロジェクトを作成します」を押下します(メニューの「ファイル」「新規」からの作成でも同様に作成可能です)

作成すると以下のプロジェクト作成画面が表示されます。

    • プロジェクト名は「JspTest」(テストなので何でも大丈夫です)
    • ターゲットランタイムは先ほど作成した「Appach Tomcat v9.0」を設定しましょう(ここを設定しないと以降の作業がうまくいきません)

上記設定を完了後に【次へ】ボタンで次の設定に移動します。

次にビルド・パスの編集を行います。コチラの初期値は「src\main\java」となっていますが、一度【除去】ボタンで削除してから【フォルダーの追加】ボタンの押下で「src」を追加します(変更を行くても問題ありませんが、過去のEclipseのヴァージョンに合わせるために設定をしています)

 

次に「webモジュール」の設定画面でコンテンツ・ディレクトリーを「src/main/webapp」から「src」へ変更し、「web.xmlデプロイメント記述子の生成」にチェックを入れます。【完了】ボタンを押下すれば作成完了です。

 

作成が完了すれば以下のような形になります。

次に実際のjspファイルを作成していきましょう。
WebContentの上で右クリックを押下し、「新規」から「ファイル」を選択しましょう。
ファイル名は「HelloWorld.jsp」として【完了】ボタンを押下します。

HelloWorld.jspに記述するプログラムは以下の通りです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>Hello World!!</h3>

This is a New World !!

</body>
</html>

 

実際に「HelloWorld.jsp」を右クリックして「実行」ボタンを押下し「サーバーで実行」をしてみて以下の画面が表示されれば成功です(お疲れ様でした)

正直ここまでの道のりは長かった上にかなり退屈だったと思います。ですが、実際に環境を構築してプログラムの実行までができればプログラマーとしての道の大きな1歩を踏み出せたといえます。以降は実際にプログラムを書いていく内容になっていきますので、プログラムの楽しさがだんだんと伝わってくれればうれしいです。

記事の更新が待てないよ!!、動画で勉強したい!という方はUdemyでの勉強もおすすめです(自分はコチラで助けられました)
多彩な講座から自分に合った講座を探そう!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です