日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - LastFm アプリケーション：音楽探索アプリの構築

はじめに

こんにちは、将来のプログラマーさんたち！今日は、Web開発の世界に興味深い旅に出ます。AngularJSとLastFm APIを使って音楽探索アプリを作成します。コードを書いたことがない方も心配しないでください。私はあなたたちの側にいて、ステップバイステップでサポートします。さあ、飛び込んでみましょう！

AngularJS - Lastfm Application

AngularJSとは？

コードを書く前に、AngularJSとは何かを理解しましょう。家を建てていると考えましょう。AngularJSはその家の骨組みのようなものです。それは、あなたのWebアプリケーションに構造とサポートを提供します。強力なJavaScriptフレームワークで、ダイナミックなシングルページアプリケーションを簡単に作成する手助けをしてくれます。

プロジェクトのセットアップ

ステップ1：HTML構造の作成

まず、アプリケーションの基本構造を作成しましょう。お気に入りのテキストエディタを開き、新しいファイル「index.html」を作成します。以下をファイルに追加します：

<!DOCTYPE html>
<html ng-app="lastfmApp">
<head>
<title>LastFm 音楽探索</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController">
<h1>LastFm 音楽探索</h1>
<input type="text" ng-model="artistName" placeholder="アーティスト名を入力してください">
<button ng-click="searchArtist()">検索</button>
<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
</div>
</body>
</html>

これを分解すると：

  • ng-app="lastfmApp": これはAngularJSに、これはアプリケーションのルート要素であることを伝えます。
  • ng-controller="MainController": これは、このアプリのこの部分のロジックをどのコントローラが処理するかを指定します。
  • ng-model="artistName": これは、インプットフィールドをコントローラのartistNameという変数にバインドします。
  • ng-click="searchArtist()": これは、ボタンがクリックされたときにsearchArtist()関数を呼び出すように伝えます。
  • ng-if="artist": これは、アーティストが見つかった場合にのみアーティスト情報を表示します。

ステップ2：AngularJSアプリケーションの作成

次に、AngularJSアプリケーションを作成します。新しいファイル「app.js」を作成し、以下のコードを追加します：

var app = angular.module('lastfmApp', []);

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
});
};
});

これを分解すると：

  • 我们创建了一个名为lastfmApp的AngularJS模块。
  • 我们定义了一个名为MainController的控制器。
  • 在控制器内，我们定义了searchArtist函数，该函数向LastFm API发起HTTP请求。
  • 我们使用$scope使变量和函数在HTML中可用。
  • 我们使用$http来发送API请求。

AngularJSの概念を理解する

基本的なアプリケーションを設定したので、AngularJSのいくつかの概念に詳しくなしましょう。

モジュール

AngularJSでは、モジュールはアプリケーションの異なる部分のコンテナです。コードを整理し、保守しやすくします。私たちのケースでは、lastfmAppというモジュールを作成しました：

var app = angular.module('lastfmApp', []);

コントローラ

コントローラは、アプリケーションの動作を定義する場所です。アプリのロジックを含んでいます。私たちの例では、MainControllerを作成しました：

app.controller('MainController', function($scope, $http) {
// コントローラのロジックはここに
});

スコープ

スコープはモデルを指すオブジェクトで、コントローラとビューの間の接着剤として機能します。コントローラで$scopeを使用すると、データをHTMLで利用可能にしています：

$scope.artist = response.data.artist;

ディレクティブ

ディレクティブは、DOM要素上のマーカーで、AngularJSに特定の動作をアタッチするように指示します。私たちのHTMLではいくつかのディレクティブを使用しています：

  • ng-app
  • ng-controller
  • ng-model
  • ng-click
  • ng-if

アプリケーションの強化

基本的なことを理解したので、アプリケーションにいくつかの機能を追加しましょう。

同じアーティストの表示

HTMLを修正して、同じアーティストを表示します：

<div ng-if="artist">
<h2>{{artist.name}}</h2>
<p>{{artist.bio.summary}}</p>
<h3>同じアーティスト</h3>
<ul>
<li ng-repeat="similar in artist.similar.artist">{{similar.name}}</li>
</ul>
</div>

ここでは、ng-repeatディレクティブを使用して、同じアーティストをループ表示しています。

エラーハンドリングの追加

コントローラにエラーハンドリングを追加します：

app.controller('MainController', function($scope, $http) {
$scope.searchArtist = function() {
var apiKey = 'YOUR_LASTFM_API_KEY';
var apiUrl = 'http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=' + $scope.artistName + '&api_key=' + apiKey + '&format=json';

$http.get(apiUrl).then(function(response) {
$scope.artist = response.data.artist;
$scope.error = null;
}, function(error) {
$scope.error = "エラーが発生しました。もう一度試してください。";
$scope.artist = null;
});
};
});

そしてHTMLにこれを追加します：

<p ng-if="error" style="color: red;">{{error}}</p>

結論

おめでとうございます！あなたは初めてのAngularJSアプリケーションを構築しました。私たちは多くのことをカバーし、基本的な構造から機能やエラーハンドリングまで追加しました。コードを学ぶことは旅であり、作成する cadaアプリケーションは新しいことを教えてくれます。

以下に、私たちがカバーした主なAngularJS概念のまとめ表を示します：

概念 説明
モジュール アプリケーションの部分のコンテナ
コントローラ アプリケーションの動作を定義
スコープ コントローラとビューの間の接着剤
ディレクティブ HTMLにカスタム属性や要素を追加

練習を続け、アプリケーションを構築し、コーディングを楽しみましょう。それで、複雑なWebアプリケーションを簡単に作成できるようになるまでに。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
AngularJS - Leafletアプリケーション