ゼロから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 を使ってデプロイ・公開する予定です。

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

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

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

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

: ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編

前回までのおさらいと今回やること前々回（はじめてのアプリ編）と前回（デプロイ・公開編）で、作成した Angular のチャットアプリを Web に公開するところまでいきました。でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。今回は GitHub でソースコードを管理して、 …

: 【HTML5】4ツール出力ファイルサイズ比較

こんにちは、近江です。前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。何故ファイルサイズの比較をするかと言 …

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

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

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

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

: Charlesを使ってスマホアプリ(iOS)のUAを調べてみた

はじめにここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …

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

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

: SafeFrameでリッチ広告をセキュアに実現

アドサーバ(広告配信サーバ)は、通常iframeで広告のクリエイティブを配信している。(JS配信とかに対応しているアドサーバもある) 通常のセキュリティだとiframeの中身(srcで実際に表示されている側)がiframeを操作する事はできない。つまりexpandなどのリッチ広告、特に表示領域を変更 …

: クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。そこで問題になるのが、障害などによる深夜対応・・・。データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に電話連絡をもらっていたのですが、クラウド環境では …

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