#1【初心者】知識0からEclipseでWebアプリ（Webサイト）を作る．「 Webアプリを作る為の環境を構築しよう」

#はじめに

友人とWebサイトを1から作りたいという話となり，右も左もわからない状態からeclipseを使ってとりあえず触りながらのメモ書きをしていく．（調べても知ってて当然だよねって感じで細かい設定とか書いてないサイトが多い...）

環境一覧
プログラミングソフト：[Eclipse 2020](https://mergedoc.osdn.jp/)
JAVA SE 14
Tomcat 8.5.88


- **環境作成編**

 #1 [Webアプリを作る為の環境を構築しよう](https://qiita.com/RyoyaHase/items/ba13d78aefe821600357)（この記事）2020 10月更新

 #2 [GitHubとEclipseを繋げて動的Webアプリを共同開発する](https://qiita.com/RyoyaHase/items/56240c0570b0a2bad221)　2020 10月更新


- **デザインを考えよう編**

- **フロントエンド作成編**

- **バックエンド作成編**

- **実際にサービスを動かしてみよう編**


今回の記事では，

1．Eclipseをインストールする．
2．Javaのインストール
3．パースペクティブの設定
4．プロジェクトの作成
5．サーブレットの作成
6．サーブレットの実行

という流れ．

単語メモ
パースペクティブ：各々のアプリを開発するのに最適な画面設定
サーブレット：Webサーバ上（バックエンド）で動くプログラム，今回の記事で作成するのはデバック用のローカルサーバ．


#1．Eclipse をインストールする．

[Eclipse](https://mergedoc.osdn.jp/)には日本語化などの面倒な設定を行わずにそのまま使い始めることができる「Pleiades All in One」というエディションが用意されている．
[ダウンロードサイト](https://mergedoc.osdn.jp/)より，Eclips 2020をダウンロードする．

![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c15e0da1-b219-d564-80ac-7da42bc62b52.jpeg)

様々なバージョンが表示されるが，今回使用するのは Windows10 64bit の Java Full Edituonをダウンロードする． 

![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/8ecb8e04-8988-0ba0-ddf9-50c5c9cb0f5c.jpeg)

勝手にダウンロードが始まる．
始まらなければ青く表示されたURLを押せばダウンロードが始まる．

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/d34647b5-c8d1-fac2-788a-6196e881d553.jpeg)
ダウンロードした.zipファイルを解凍する．
Windowsの標準解凍ソフトだと上手く解凍できないらしいので[7-Zip](https://sevenzip.osdn.jp/)を使って解凍する．

![04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/fab143e1-c39d-7e24-dade-1cedf3c59d34.jpeg)

解凍するとpleiadesというフォルダが現れるので，Windows(C:)フォルダに直接置いておく（場所は自由だが C: の直下が分かりやすい）．

![05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/1fb07473-3fd5-c2ea-b825-20469d7f33ca.jpeg)

Windows(C:)直下に移動したら，C:\pleiades\eclipseフォルダ内にあるeclipse.exeを右クリックしてショートカットを作成して，デスクトップなどの分かりやすい場所に置き直しておく．（アプリとしてインストールしないためショートカットから起動する）

![06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/16cebba4-270b-c609-eb65-3c79886fb5fb.jpeg)

![07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5a8612ee-0943-0c36-5d5f-55bb3cd00eca.jpeg)

初回起動ではワークスペース（データの保存場所）をどこにするか聞かれるので，ドキュメントのフォルダ内にeclipseというフォルダを新規作成して，参照からフォルダを変更しておく．（デフォルトでも問題ないが分かりやすい場所に移動しておく）

![08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/951b5d9e-0541-727e-38a9-90e5eb43eb81.jpeg)
↓　変更する
![09.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/05cc4fb6-6918-bfb6-55e7-1a17629cb92f.jpeg)

変更したら起動(L)を押して画面が表示されればインストール完了．

![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/4b9299b9-6f2e-e86a-6992-0dab7c6b0f9e.jpeg)


#2．Java SE をインストールする．

今回は [JAVA SE](https://www.oracle.com/java/technologies/javase-downloads.html)の14を使用する．
トップページから14を選択するか，[JAVA SE 14 ダウンロードサイト](https://www.oracle.com/java/technologies/javase/jdk14-archive-downloads.html)から Windows x64 Installer をダウンロードする（なぜかChromeだと動かない時があるのでIEを使ったほうがいい）．

![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/6fb5c6f9-c329-1081-d759-f9ea8b37e580.jpeg)

特に設定などはないのでそのままインストールするだけ．

#3．パースペクティブの設定

右上のJavaアイコンの横にある①＋マーク（パースペクティブ）を押すとリストが出てくるので②Java EEを選択する.

![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c77174d4-c5fc-ee36-784a-e9cb10f668e0.jpeg)

Java EEを開くとサーバー管理などのサポートがあるサーブレットパースペクティブ（画面構成）となる．
サーバータブなどはWebアプリを開発する際に必須なのでしっかりとJava EEに変更してから開発を開始する．

![13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/923b338a-b8a7-3359-0973-4f597c4b74ac.jpeg)

#4．プロジェクトの新規作成

ファイル→新規→その他を選択

![14.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/9a14f36a-3fbc-c9f0-0f8c-51d96fe8e424.jpeg)

ウィザードからWebフォルダ内にある①「動的Webプロジェクト」を選び，②次へを押す．

![15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/0d7ce4fd-7e36-9592-21a1-8380094c4b75.jpeg)

設定画面が出てくるのでプロジェクト名を好きな名前で設定し，ターゲットランタイムをTomcat8 (Java8)に変更する．
変更すると動的モジュールバージョンと構成がターゲットランタイムに合わせて自動的に変更される．変更できたら次へを押す．

![17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/f305ed23-2ce2-85f6-978b-6a4d2487d212.jpeg)

ここはデフォルトで大丈夫なので次へを押す．

![18.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/3035856c-06bc-edfc-8e7f-bd9728d5bffb.jpeg)

web.xmlデプロイメント記述子の作成にチェックを入れ，完了を押すとプロジェクトが作成される．

![19.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/0778efa1-ae19-75bc-9ce9-4927c9f1077d.jpeg)

これでサーブレット作成する準備が完了．

![20.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/822e8615-c835-cd25-ece2-c9449a1db634.jpeg)

#5．サーブレットの作成

サーブレットを作成するためにJavaリソース→srcを右クリックしてサーブレットを選択する．

![21.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/069a63bb-22b5-162f-2c13-f60d1a97c4f2.jpeg)

とりあえず名前を適当に①sample_main ②sample と設定して完了を押す．

![22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/8d6e8489-645a-f9ab-abfb-a3f059cbdcf5.jpeg)

無事に基本的なコードが記述されたサーブレットが作成されました．

![23.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/160cf969-cf97-967c-6880-76986d00ece6.jpeg)

Webサーバのタブを開いて，「使用可能なサーバがありません．このリンクをクリックして新規サーバを作成してください．」という部分をクリックする．

![24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/9fc083b3-9fd6-21bc-7d99-c41c199d8453.jpeg)

Apacheフォルダ内から「Tomcat v8.5」サーバを選択して次へを押す．

![25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/2b360249-7171-b02f-5047-4007a8bd899e.jpeg)

サーバに追加したいリソースを①選択して，②追加を押す．

![26.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/e558d609-44cd-ee88-59b4-ee7d28e6cc90.jpeg)

右側にファイルが移動しているのを確認したら完了を押す．

![27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/94d35138-b5e8-ed9d-14da-22bf8fe4f1da.jpeg)

サーバーが作成されるので，右クリックして公開を押す．

![28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c6d193a8-465f-c737-f1d7-2cac86f20ccb.jpeg)

次にもう一度右クリックして再開を押す．

![29.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/49f1d9e3-d797-5d1a-3a44-09010553a3bc.jpeg)

問題がなければサーバの右側にあるステータスが[起動済み，同期済み]となる．

![30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5fd88b3f-39cf-af32-dd06-e7a4bb75eeb7.jpeg)

次にchromeを開いて，URLに以下を入力．

```javascript

http://localhost:8080/[プロジェクト名]/[クラス名]
```

今回手順通りに作っていれば，

```javascript

http://localhost:8080/test/sample
```

こんな画面が表示されれば問題なく動作している．

![31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/db9c5d59-0323-eaed-eaa6-5f2a766da9bb.jpeg)

#試しに

ここにある

```javascript

("Served at: ")
```

を

```javascript

("tesutesu")
```
に変えてみる（日本語で打つと文字化けするのでアルファベットで入力する）．

![32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c19667f3-6183-198a-e332-b4563585b1a0.jpeg)

しっかり更新されてますね．

![33.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a8e3f719-9019-3631-a488-7636fd99d8e7.jpeg)

とりあえずこれで開発環境の設定は完了，次回はGit hubで共有してみる．


次→[]