ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

2018/03/06 - UI/UX, 開発ツール Angular, Javascript, TypeScript, プログラミング, 開発

はじめに

Single Page Application （SPA）って知っていますか？
Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。
こういったサイトの作り方を Single Page Application （SPA）といって、最近ではメディアでも採用する例が出てきました。
SPAは古のHTMLとは違って、JavaScriptを使ってページを大胆に書き換えていくので、一般にフレームワークを使います。フレームワークとしては React や Vue.js などがありますが、今回は Angular を使ってみます。

必要なものをインストールする

誰でも（プログラミング初級者でも？）できるように＆自分用の覚書を兼ねて、まっさらな macOS High Sierra 上に開発環境を作っていきます。（Windows の人はごめんなさい。適宜読み替えてください）

Homebrew のインストール

ここを参考にして、Homebrew をインストールします。（途中でキー入力やパスワード入力が必要になることがあるので、表示されるメッセージに注意してください）

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1	$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodebrew と node.js のインストール

ここやここを参考に nodebrew と node.js をインストールして設定します。

$ brew install nodebrew
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> .bash_profile
$ source ~/.bash_profile
$ nodebrew install-binary stable
$ nodebrew use stable

$ brew install nodebrew

$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> .bash_profile

$ source ~/.bash_profile

$ nodebrew install-binary stable

$ nodebrew use stable

Angular CLI のインストール

ここを参考に Angular CLI をインストールします。

$ npm install -g @angular/cli

1	$ npm install -g @angular/cli

これで準備ができました。

はじめてのアプリを作って動かす

次のコマンドを打ってアプリの雛形を作ります。（dac-angular は名前なので適当なものを使ってください）

$ ng new dac-angular

1	$ ng new dac-angular

作成したアプリのディレクトリに移動して ng serve を実行すると、サーバでアプリが動くので localhost:4200 を開くと雛形のアプリが表示できます。

$ cd dac-angular
$ ng serve

1 2	$ cd dac-angular $ ng serve

Angularの雛形アプリをブラウザで表示

チャットアプリを作る

ここから、雛形のソースコードを編集してチャットアプリを作っていきます。ソースコードの編集にはVisual Studio Codeを使うといいでしょう。

Visual Studio Code の画面

TypeScriptの変更

Angular では、JavaScript に型とクラス定義ができるようした TypeScript を使ってプログラムを書きます。わからない人はだいたい JavaScript だと思っておけばいいです。
以下のコードでは、チャットメッセージが流れる timeline を string の配列で定義して、最初のメッセージとして 'Hello!' を入れています。また、メッセージが送信された時のメソッドとして add を定義して、そのなかで受け取った timeline に追加するようにしています。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  timeline:string[] = ['Hello!'];

  add(value: string) {
    this.timeline.push(value);
  }
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

timeline:string[] = ['Hello!'];

add(value: string) {

this.timeline.push(value);

}

また、HTMLテンプレートに app.component.html、スタイルに app.component.css を使うように定義してあるので、これらのファイルも編集していきます。

HTMLテンプレートの変更

input に入力した内容（input.value）を button をクリックした時に add メソッドの引数で渡すようにしています。また timeline 配列の中身を Forループ（*ngFor）で表示するようにしています。

<div>
  <input type="text" #input>
  <button (click)="add(input.value)">Send</button>
</div>
<ul>
  <li *ngFor="let item of timeline">
    {{ item }}
  </li>
</ul>

<div>

</div>

<ul>

</li>

</ul>

スタイル（CSS）の追加

とりあえずulの行頭の●を消すスタイルを追加しています。

ul {
  list-style-type: none;
}

ul {

list-style-type: none;

}

まとめ

これで、入力して「Send」ボタンを押すと、入力したものが一覧に追加されていく画面が作れました。

チャットアプリ画面（1）

ここまでのサンプルはここからダウンロードできます。
次回は、Firebase を使ってデプロイ・公開する予定です。

: Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。今回は非同期処理の代表的な・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます！非同期処理について(http://codezine.jp/articl …

: 自社サービスのDocker化(前編)

こんにちは。インフラ開発部の上田です。普段は自社開発システムのインフラ担当として、日々頑張って仕事をしています。今回は、近年話題になっているDockerについて、取り上げてみようと思います！なぜDockerなのか・・・？そもそもDockerとは何か・・・？当社では様々なサー …

: AWSにRailsアプリをデプロイする(準備編)

今回は、せっかくRailsで開発したアプリをAWS上に公開してみたいのでその構築方法をまとめていきたいと思います。 (前回の記事：初心者がRailsで開発 – deviseでユーザー認証設定 ) AWSの設定はすでに社内で使用できるようになっていたので割愛します。 ★やりたいこと Gitlabでコ …

: Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発・保守を担当しています。エンジニアの皆さん、デザインってどうしてます？わたくしはプライベートでとあるW …

: Vagrantの機能を使って開発環境の効率をあげてみた。

プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。保守の仕事に関わると、ユーザからのお問い合わせだったり、監視アラートによる検知からシステムを調査することがあります。ログとソースコードを見て、不具合を特定し改修する。すぐできればカッコいいですが、「本番環境に反映して別のエ …

: AWSにRailsアプリをデプロイする(公開編)

次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるのでとりあえずこれを設定していきます。アプリのsecret_key_baseの設定 [crayon-62bc80343f4c2851629 …

: kubernetes の全ノード上で同じコンテナを動かす

今回は、kubernetes上で同一コンテナを全ノードで動かす方法を紹介したいと思います。kubernetes自体の起動方法はここでは割愛します。はじめに以前、CoreOSのFleet上でmackerel-agentを動かすということを行いました。今回は、kubernetes上で同じようにクラス …

: 初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。開発部所属でありながら実は、、実際に自分で手を動かして開発する機会がなかなかありませんでした。。しかしついに、、、開発初心者がRailsでWebアプリの開発に挑戦します！！今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

: modern.IEを使ってMac上でWindows10を動かす

Microsoftが提供している modern.IE というプロジェクトがある。そこで提供されている仮想環境を使って、MacにWindows10をインストールしてみる。ちなみに、このプロジェクトの本来の目的はInternet Explorerの表示確認やデバッグの支援。 VirtualBoxの準備 …

: 自社サービスのDocker化(後編)

こんにちは。インフラ開発部の上田です。前回、前編としてDockerについて書き、早半年も経ちました。前編はこちらです今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …

PREV: MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介！
NEXT: ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編