日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - 天気アプリケーション

こんにちは、未来のプログラミングスーパースターたち！今日は、AngularJSを使って天気アプリケーションを作成する興奮人心的な旅に踏み出します。プログラムを書いたことがない人も心配しないでください - 私はこの冒険のなかであなたの親切なガイドとしてあなたをサポートします。これまでに数多くの学生を指導してきました。では、腕をまくって飛び込みましょう！

AngularJS - Weather Application

AngularJSとは？

天気アプリの構築を始める前に、AngularJSについて話しましょう。家を建てているとしましょう。AngularJSはその家の骨組みのようなものです - あなたのウェブアプリケーションに構造とサポートを提供します。強力なJavaScriptフレームワークで、簡単に動的なシングルページアプリケーションを作成することができます。

プロジェクトの設定

ステップ1: AngularJSをプロジェクトに含める

まず第一に、プロジェクトにAngularJSを含めます。これには、HTMLファイルにscriptタグを追加します：

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>私の天気アプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- アプリケーションはここに配置されます -->
<script src="app.js"></script>
</body>
</html>

<html>タグの中のng-app="weatherApp"を見てください。これはAngularJSに「ここが私たちのアプリケーションの居場所だ」と伝えています！

ステップ2: アプリケーションを作成する

次に、app.jsファイルを作成します：

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

この行は「こんにちは、AngularJS！新しいアプリケーション'weatherApp'を作成してください」と言っているようなものです。簡単ですね？

天気アプリの構築

ステップ3: コントローラーを作成する

AngularJSでは、コントローラーにアプリケーションの動作を配置します。コントローラーを作成してみましょう：

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

これは少し複雑ですが、分解してみましょう：

  1. 「WeatherController」というコントローラーを作成しています。
  2. $scopeはコントローラーとビュー間でデータを渡すためのものです。
  3. $httpはAngularJSがHTTPリクエストを行うためのものです。
  4. 「getWeather」という関数を作成し、呼び出されると天気データを取得します。

ステップ4: ビューを作成する

次に、HTMLを更新してコントローラーを使用します：

<body ng-controller="WeatherController">
<h1>天気アプリ</h1>
<input type="text" ng-model="city" placeholder="都市名を入力してください">
<button ng-click="getWeather()">天気を取得する</button>

<div ng-if="weather.main">
<h2>{{weather.name}}の天気</h2>
<p>温度: {{weather.main.temp}}°C</p>
<p>説明: {{weather.weather[0].description}}</p>
</div>
</body>

以下は何が起きているかです：

  1. ng-controller="WeatherController"はビューとコントローラーを結びつけます。
  2. ng-model="city"は入力を$scope.city変数にバインドします。
  3. ng-click="getWeather()"はボタンをクリックするとgetWeather関数を呼び出します。
  4. ng-if="weather.main"は天気データを取得した場合にのみ情報を表示します。
  5. {{}}は$scopeのデータをビューに表示するためのものです。

ビューを美しくする

ステップ5: スタイルを追加する

ビューを少し美しくするためにCSSを追加します：

<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input, button {
font-size: 16px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>

全てを纏める

以下は完全なindex.htmlファイルです：

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>私の天気アプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* ステップ5のCSSをここに配置 */
</style>
</head>
<body ng-controller="WeatherController">
<h1>天気アプリ</h1>
<input type="text" ng-model="city" placeholder="都市名を入力してください">
<button ng-click="getWeather()">天気を取得する</button>

<div ng-if="weather.main">
<h2>{{weather.name}}の天気</h2>
<p>温度: {{weather.main.temp}}°C</p>
<p>説明: {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

以下は完全なapp.jsファイルです：

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

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

結論

そして、皆さん！これで簡単ですが機能的な天気アプリをAngularJSで作成できました。コードを学ぶことは新しい言語を学ぶのと同じです - 練習と忍耐が必要です。すぐに全てを理解できない場合も、がっかりしないでください。実験を続け、コードを書き続け、そして最も重要なのは、楽しむことです！

以下は私たちが使用した主要なAngularJSコンセプトの表です：

コンセプト 説明
ng-app AngularJSアプリケーションのルート要素を定義します
ng-controller アプリケーションのセクションのコントローラーを定義します
ng-model 入力をスコープの変数にバインドします
ng-click クリックイベントを定義します
ng-if 条件に基づいて要素をレンダリングします
{{}} スコープのデータをビューに表示します
$scope コントローラーとビュー間でデータを渡します
$http HTTPリクエストを行います

皆さん、ハッピーコーディング！すべての専門家もかつては初心者でした。続けると、すぐに素晴らしいアプリケーションを構築できるようになります。では、コーディングの世界を征服しましょう！

Credits: Image by storyset

前のチュートリアル:
AngularJS - アプリケーション共有
次のチュートリアル:
AngularJS - タイマーアプリケーション