日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - ノート pad アプリケーション: 最初のウェブアプリを作成する

こんにちは、将来のプログラマーさんたち！AngularJSを使って最初のウェブアプリケーションを作成する興奮する旅にあなたを案内することを楽しみにしています。プログラミングを教えて10年以上になる私が保証しますが、このチュートリアルの最後に、あなたは機能的なノート pad アプリケーションとAngularJSの基本をしっかりと理解していることでしょう。それでは、始めましょう！

AngularJS - Notepad Application

AngularJSとは？

コードを書く前に、AngularJSが何かを理解しましょう。家を建てることを想像してください。AngularJSは、家を建てるプロセスをより簡単で組織的になるようにするフレームワークのようなものです。これは、労力を減らして動的なウェブアプリケーションを作成するのに役立つJavaScriptのフレームワークです。

開発環境の設定

まず第一に、ワークスペースを設定する必要があります。心配しないでください。実際の作業台を設定するよりも簡単です！

  1. 楽しいテキストエディタ（初心者にはVisual Studio Codeを推薦します）を開きます。
  2. 新しいフォルダ「AngularJS-Notepad」を作成します。
  3. このフォルダ内に以下の3つのファイルを作成します：
  • index.html
  • app.js
  • style.css

HTML構造の作成

まずは index.html ファイルから始めましょう。これは家の設計図のようなものです。

<!DOCTYPE html>
<html ng-app="notepadApp">
<head>
<title>AngularJS Notepad</title>
<link rel="stylesheet" href="style.css">
<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="NotepadController">
<h1>私のノート pad</h1>
<textarea ng-model="noteContent"></textarea>
<p>文字数: {{noteContent.length}}</p>
</body>
</html>

これを分解すると：

  • ng-app="notepadApp": これはAngularJSに、これはアプリケーションのルートであることを伝えます。
  • ng-controller="NotepadController": これはどのコントローラがこのページのこの部分を管理するかを指定します。
  • ng-model="noteContent": これはtextareaをコントローラ内のnoteContentという変数にバインドします。
  • {{noteContent.length}}: これはノートの文字数を表示する式です。

アプリケーションのスタイル

今、アプリケーションに基本的なスタイルを追加して、ノート pad を少し魅力的に見せます。style.css ファイルに以下を追加します：

body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
}

h1 {
color: #333;
}

このCSSは、コンテンツを中央に配置し、良いフォントを設定し、textareaとヘッダーをスタイル化します。

AngularJSアプリケーションの作成

さて、楽しみな部分です - AngularJSでノート pad を生命を吹き込みましょう！app.js ファイルで：

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

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';
});

これを分解すると：

  1. AngularJSモジュール「notepadApp」を作成します。
  2. 「NotepadController」というコントローラを定義します。
  3. コントローラ内でnoteContentを空の文字列として初期化します。

より多くの機能を追加

基本的なノート pad が完成したので、さらにいくつかの機能を追加して便利にしましょう！

1. 保存と読み込み機能

保存ボタンと読み込みボタンを追加してみましょう。HTMLを更新します：

<body ng-controller="NotepadController">
<h1>私のノート pad</h1>
<textarea ng-model="noteContent"></textarea>
<p>文字数: {{noteContent.length}}</p>
<button ng-click="saveNote()">ノートを保存</button>
<button ng-click="loadNote()">ノートを読み込み</button>
</body>

そして app.js を更新します：

app.controller('NotepadController', function($scope) {
$scope.noteContent = '';

$scope.saveNote = function() {
localStorage.setItem('savedNote', $scope.noteContent);
alert('ノートが保存されました！');
};

$scope.loadNote = function() {
$scope.noteContent = localStorage.getItem('savedNote') || '';
alert('ノートが読み込まれました！');
};
});

ここでは、localStorageを使ってノートを保存し、読み込みます。これを小さなノートとして考えると、ブラウザが後で思い出すための情報を書き留めることができます。

2. 単語数カウント機能

単語数カウント機能を追加してみましょう。HTMLを更新します：

<p>文字数: {{noteContent.length}} | 単語数: {{wordCount()}}</p>

そしてコントローラに以下の関数を追加します：

$scope.wordCount = function() {
return $scope.noteContent.split(/\s+/).filter(function(n) { return n != '' }).length;
};

この関数は、ノートの内容を空白で分割し、空でない要素の数をカウントして単語数を返します。

すべてをまとめる

以下の表は、私たちが使用した主要なAngularJSディレクティブと表現のまとめです：

ディレクティブ/表現 目的
ng-app AngularJSアプリケーションのルート要素を定義
ng-controller HTML要素に対するコントローラを使用する
ng-model HTMLコントロールの値をアプリケーションデータにバインド
ng-click 要素がクリックされたときにAngularJS式を評価
{{expression}} 式の値を表示

おめでとうございます！あなたは初めてのAngularJSアプリケーションを作成しました。私たちは、AngularJSアプリケーションの基本設定、コントローラーの使用、モデルとの作業、ローカルストレージへのデータ保存までをカバーしました。

覚えておいてください、コードを学ぶことは新しい言語を学ぶのと同じです。練習、忍耐、持久が必要です。すぐに理解できないことがあるてもがっかりしないでください - それは学習プロセスの一部です。ノート pad アプリケーションをさらに実験し、新しい機能を追加してみてください。そして最も重要なのは、楽しむことです！

私の教師生活の中で、数多くの学生が完全な初心者から熟練した開発者に成長を見せてきました。あなたも同じ興奮する旅に出発しています。codingを続け、学び続け、間もなく複雑なウェブアプリケーションを簡単に作成できるようになるでしょう！

Credits: Image by storyset

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