SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ

ASP.NET Core 2.0でSPAテンプレートを使おう【後編】

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ 第4回


  • X ポスト
  • このエントリーをはてなブックマークに追加

SPAプロジェクトにページを追加しよう

 では、実際にアプリケーションにページを追加してみましょう。SPAのプロジェクトテンプレートから作成したアプリケーションには、「Weather forecast」という天気予報のページ(メニュー上は「Fetch data」)があらかじめ実装されています。これはサーバ側で生成したランダムな気象情報を表示するページなので、ここでは実際の気象情報を取得できるAPIからデータを取得して表示するページを追加していきます。

 本サンプルでは気象情報のAPIにWeather Hacksの「お天気Webサービス」を使用します。

APIの追加

 まずはサーバ側にコントローラを追加します。このコントローラではWeather Hacksのお天気Webサービスにアクセスして天気予報データを取得し、クライアント側で必要な内容のみにするため、データを加工します。

リスト5 天気予報コントローラ(Controllers/WeatherController.cs)
・・・中略
[Route("api/[controller]")]
public class WeatherController : Controller
{
    [HttpGet("[action]")]
    public async Task<IEnumerable<Weather>> Forecasts()
    {
        // Weather Hacks APIから東京(city=130010)の天気予報を取得
        var response = await new HttpClient().GetStringAsync("http://weather.livedoor.com/forecast/webservice/json/v1?city=130010");
        var jObject = JObject.Parse(response);

        // 取得した情報から必要なデータ(日付・天気)のみ抽出して返却
        return jObject["forecasts"]
            .Select(forecast => new Weather
            {
                Date = forecast["date"].ToString(),
                Telop = forecast["telop"].ToString()
            })
            .ToList();
    }
    
    public class Weather
    {
        public string Date { get; set; }
        public string Telop { get; set; }
    }
}

 サーバ側の実装は以上です。以降、このコントローラからデータを取得して画面に表示するクライアント側の実装に入ります。

コンポーネントの追加

 新しく追加するページに表示する気象情報データをサーバ側から取得するため、Angularのコンポーネントを作成します。

 コンポーネントのディレクトリ(ClientApp/app/components)に新たに/weatherディレクトリを作成し、その中に「weather.component.ts」を作成します。

リスト6 天気予報コンポーネント(ClientApp/app/components/weather/weather.component.ts)
import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';

@Component({
    selector: 'weather',
    templateUrl: './weather.component.html'
})
export class WeatherComponent {

    // ビュー連携用のフィールド
    weathers: Weather[];

    constructor(private http: Http, @Inject('BASE_URL') baseUrl: string) {
        
        // サーバからデータを非同期で取得してフィールドにセットする
        this.http.get(baseUrl + 'api/weather/forecasts').subscribe(result => {
                this.weathers = result.json() as Weather[];
        });
    }
}

interface Weather {
    date: string,
    telop: string
}

 Angularの提供するnpmパッケージ(@angular/http)を使い、先ほど作成したコントローラ(WeatherController)から天気予報データを取得し、コンポーネントのフィールドにセットしています。これによって次に作成するページへデータを受け渡すことができるようになります。なおコンポーネントにひも付くページは、@Componentデコレータの「templateUrl」で指定しています。

[コラム]Angularのhttpについて

 Angularのバージョン4.3以降では、Httpモジュールが刷新され、新たなHttpClientモジュール(@angular/common/http)の使用が推奨されています。

 2017年12月現在、.NET Coreのプロジェクトテンプレートから作成されるAngularプロジェクトはバージョン4.2系となっているため、本記事ではHttpモジュールについてもバージョン4.2系に対応したモジュール(@angular/http)を用いて説明をしています。

 バージョン4.3以降で使用できるHttpClientモジュールの使用方法については、Angularのサイトを参考にしてください。

ページの追加

 APIから取得した天気予報を表示するページをHTMLで作成します。WeatherComponentコンポーネントと同じディレクトリ(ClientApp/app/components/weather)に「weather.component.html」を作成します。

リスト7 ルートモジュール(ClientApp/app/components/weather/weather.component.html)
<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

<table class='table'>
    <thead>
        <tr>
            <th>Date</th>
            <th>Weather</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let weather of weathers">
            <td>{{ weather.date }}</td>
            <td>{{ weather.telop }}</td>
        </tr>
    </tbody>
</table>

 APIからは数日分のデータが取得できるため、AngularのngFor構文を使って数日分のデータをテーブルに表示できるように実装しています。

AppModuleSharedモジュールへのコンポーネントの追加、ルーティングの追加

 コンポーネントとページのセットが実装できたら、それらをAppModuleSharedモジュールに追加します。

リスト8 コンポーネントのモジュールへの追加、ルーティングの追加(ClientApp/app/app.module.shared.ts)
import { WeatherComponent } from "./components/weather/weather.component"; //・・・追加

@NgModule({
    declarations: [
        ...中略...
        WeatherComponent //・・・追加
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            ...中略...
            { path: 'weather', component: WeatherComponent }, //・・・追加
            { path: '**', redirectTo: 'home' }
        ])
    ]
})

 ルーティング先のパス名は「weather」とします。ここで定義したパスを次に説明するナビゲーションページで使用することになります。

ナビゲーションページへのリンクの追加

 ブラウザ左側に表示されるナビゲーションページに天気予報のページへのリンクを追加します。

リスト9 ナビゲーションページ(ClientApp/app/components/navmenu/navmenu.component.html)
        <div class='navbar-collapse collapse'>
                ...中略...
                <!-- 以下のliタグを追加 -->
                <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/weather']">
                        <span class='glyphicon glyphicon-th-list'></span> Wether data
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

 リンクの一覧の最下部にリンクを追加しました。aタグのrouterLink属性の値に、先ほどルーターへ登録したパス(/weather)を指定しています。

アプリケーションの起動

 ここまで実装したらアプリケーションを起動します。「dotnet run」でアプリケーションを起動し、「http://localhost:5000/weather」にアクセスしてください。図2のように数日分の天気が表示されれば成功です。

図2 新たに追加した天気予報のページ
図2 新たに追加した天気予報のページ

 なお、事前にASPNETCORE_Environment環境変数に開発用の値(Development)を設定してから「dotnet run」コマンドを実行することで、Webpack dev middlewareとHot Module Replacementが有効となります。これによりアプリケーションを起動したままの状態でコードを修正すると、ブラウザの再更新なしで変更が画面に反映されます。

リスト10 アプリケーションを開発モードで起動
# Windowsの場合
SET ASPNETCORE_Environment=Development

# macOS, Linuxの場合
export ASPNETCORE_Environment=Development

# アプリケーションの起動
dotnet run

おわりに

 フロントエンド開発、SPAフレームワークはトレンドの移り変わりが非常に早い世界です。前回と今回に渡って紹介したJavaScriptServicesを使うことで、流行を取り入れたいクライアントサイドと、安定したサービスを提供したいサーバサイドの利害を一致させつつも異なる技術要素を用いることができ、アプリケーションを疎結合に保つことができることが分かったかと思います。

 次回は、ASP.NET Core 2.0と同時に発表されたEntityFramework Core 2.0について紹介します。

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 秋葉 龍一(アキバ リュウイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10618 2018/02/05 16:11

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング