【プログラミング入門】javaでWEBアプリケーションを作ってみよう!【クライアント編】

プログラミング

【プログラミング入門】javaでWEBアプリケーションを作ってみよう!【はじめに】

本記事では、簡単にですがフロントエンドの実装を行ってみます。

画面を作ってサーバとやり取りするものを作成していきます。

サーバとアクセスできれば、環境は何でもいいのですが、今回はAngularJSを使用して実装を行っていきます。

 

もし、フロントエンドを学習されている方であれば、今ご自身が勉強がてらに作成しているプログラムを使用してみてもいいかもしれません。

 

では、始めていきます。

 

クライアントの開発環境を構築しよう

Angularが動作する環境を構築していきます。

visual studio codeをインストールしよう

必ず入れる必要はありませんが、あると便利なのでインストールしましょう。

ソースコードエディターです。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

Windows版をダウンロードしてインストールしましょう。

Angularをインストールしよう

以下の公式の手順に沿って行っていきます。

Angular 日本語ドキュメンテーション

Node.jsをインストール

Node.jsの環境が必要になりますので、Node.jsをインストールします。

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

リンク先に行くとボタンが2つあるかと思います。
どちらでもいいかもしれませんが、LTSをダウンロードしましょう。

ダウンロードが完了するとmsi形式のインストーラファイルが落ちてくるかと思いますので、これをダブルクリックしインストールを進めます。

設定はそのままで問題ないです。「Next」を押してインストールしましょう。

問題なくインストールできたか、visual studio codeを開いて確認します。

まず、作業用フォルダを作成しましょう。
今回は以下のフォルダを作成して進めていきます。
「C:\sts\client」

上記作成が終わりましたらvisual studio codeを起動し、以下のように作成したフォルダを開きましょう。

「File」→「Open Folder」→(選択ダイアログから作成したフォルダを選択)

 

続いて以下の手順でターミナルを開きます。

「Terminal」→「New Terminal」

下部にターミナルが表示されればOKです。

ターミナルに以下コマンドを入力し、Enterを押してください。

npm -v

バージョン番号が表示されればOKです。

※もしエラーになる場合は、「visual studio code」を開きなおしてみてください。

Angular CLIをインストール

ターミナルに以下コマンドを入力し、Enterを押します。

npm install -g @angular/cli

インストールが開始されるのでしばらく待ちます。

問題なく完了していれば、OKです。

以上で、環境構築が終了になります。

 

クライアントアプリを作成してみよう

では、実際にアプリケーションの作成に移りたいと思います。

プロジェクトの作成

ターミナルより以下のコマンドを実行してください。

ng new my-app

途中以下のように2つ確認がありますが、1つ目は「y」を入力し、2つ目はそのままEnter押してください。

問題なく完了したら左の欄に「my-app」が表示されます。

サーバへのアクセスの実装

上記、プロジェクトの作成ができたら、サーバへアクセスする処理を行ってみましょう。

初期出力された以下のファイルを修正していきます。

app.component.html

まず、見た目の部分になります。初期状態はいろいろコードが書かれていますが、すべて削除して以下に置き換えてください。

<div>
  <h1>TEST</h1>
  <form>
    <div>
      <label>API TEST</label>
      <div>
        <span>{{test}}</span>
      </div>
    </div>
  </form>
</div>

app.module.ts

次に使用するモジュールを定義する場所にHTTPのクライアントモジュールを追記します。

6行目と14行目を追記してください。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

最後にサーバへアクセスする処理を実装します。

以下の内容に置き換えてください。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
  constructor(private http: HttpClient) { }

  test = ''
  ngOnInit() {
    var url = "http://localhost:8080/api/test";

    this.http.get(url)
    .subscribe(response => {
      console.log(response);
        this.test = response['test'];
    });
  }
}

内容を簡単に説明すると前回作成したAPIを呼び出すために「http://localhost:8080/api/test」のURLをGETメソッドでリクエストしています。

返ってきたレスポンスのtestの項目をhtmlのtestと記述した個所に出力するといった形です。

作成したプログラムを動かしてみよう

まず、前回作成したサーバを起動してみましょう。
※起動の仕方を忘れた場合は以下より確認してください。

【プログラミング入門】javaでWEBアプリケーションを作ってみよう!【プログラミング編】
【プログラミング入門】javaでWEBアプリケーションを作ってみよう!【はじめに】 前回の記事で環境構築が完了できたかと思います。 ここからは実際にプログラミングの作業に移ります。 javaのコーディング作業ですね。 ...

 

サーバの起動が無事完了したらクライアント動かしてみます。

ターミナルより以下を実行してください。
まず、「my-app」へディレクトリを移動します。

cd .\my-app\ 

その後、以下を実行すればクライアントが起動し、自動でブラウザが立ち上がります。

ng serve --open

以下の画面が表示されます。

上記が表示されたらクライアントが問題なく起動しています。

しかし、現状のままだとサーバに接続できません。

Cross-Origin Resource Sharing (CORS)をサーバ側が許可していないためです。

CORSについては以下のサイトが分かりやすく説明されているので、よければ読んでみて頂けたらと思います。

Spring MVC で CORS 設定 - Qiita
はじめに Angular と Spring Boot による SPA 開発時、 クライアントサイドとサーバサイドアプリを、 別々のマシンにホスティングする場合の考慮事項をまとめた記事です。 Same Origin Polic...

サーバ側でCORSを許可する設定を行う必要があります。

方法を記載してみます。

まず、前回作成した「Test.java」に8行目の「@CrossOrigin」を追加してください。

package com.example.demo.api;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin
@RestController
@RequestMapping("/api/test")
public class Test {

	@RequestMapping(method = RequestMethod.GET)
	public String get() {
		return "{\"test\": \"APIの練習です\"}";
	}
}

追加が完了したら再度サーバを起動し、再度クライアントも起動してください。

以下の表示になればOKです。

以上、簡単なクライアントアプリからサーバへ接続する方法になります。

 

最後に

問題なく実施できましたでしょうか?

 

今回は簡単なクライアントアプリを作成してみました。

とりあえず、サーバへ接続させるためのものなので、見た目はすごくシンプルなものです。

フロントエンドエンジニアを目指されている方は、画面の使いやすさや見やすさなどを意識して作成していくことが大事になります。

 

ただ、よくデザインばかり注目されがちですが、クライアントにも内部的な処理がちゃんとあります。見た目以外にも内部構造をどういう風に構成すれば、無駄なく処理できるかなど、見えない部分の考慮もたくさんありますので、少しずつ勉強していきましょう。

コメント

タイトルとURLをコピーしました